How to draw beautiful software architecture diagrams

• flowchart-fun

  60 3,002 8.8 TypeScript

  Easily generate flowcharts and diagrams from text ⿻

  

https://flowchart.fun/ recently helped me very quickly draw flow charts to understand process of a system. Best thing was how intuitive and fast I could iterate over. And it allows custom css for styling which helped a lot. IMO for flow charts, this is so far the easiest / quickest text based diagram tool.

• text-to-bmp

  1 0 6.1 C

  Create background image from text file (Journalctl logs)

You can create Plantuml diagrams without the server locally using this small Docker ( https://github.com/lrvl/text-to-bmp ) and use "make docker-plantuml"

• SurveyJS

  surveyjs.io sponsored

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• ezmdpage

  2 13 5.8 HTML

  📝 Write raw Markdown in .html files that gets auto-rendered on page load

  

One of the things I recommend to the startups I advise is to include documentation within the repository. I always try to have a /doc directory which includes Markdown (I like using [1] self rendering markdown pages) and MermaidJS (For which I also created a dumb self rendering script [2]).

That way Merge Requests can be blocked for lack of documentation, or lack of documentation update.

MermaidJS have been a godsend for documentation.

[1] https://github.com/jcbhmr/ezmdpage

• mermaid-js-auto-renderer

  1 2 5.2 JavaScript

  Mermaid JS webpage auto renderer

• elk

  3 232 8.0 Java

  Eclipse Layout Kernel - Automatic layout for Java applications. (by eclipse)

  

Graphviz is the classic option but unfortunately it isn't very good. I mean it was great when it was written in the 80s or whatever but then it seems like it was declared "done" and is still stuck in the 80s.

Quite annoying because it totally dominates the mindshare of graph layout tools, making it difficult to find alternatives.

Here's some other options anyway:

* Eclipse Layout Kernel: https://github.com/eclipse/elk

* OGDF: https://ogdf.uos.de/

In fairness both their websites are pretty terrible (would some examples kill you OGDF?) and they don't provide an easy way to try them out, so I guess it's not that surprising that Graphviz dominates.

Anyway in practice if you have a complex graph then doing it manually is by far the best option.

If it's too big to do manually then it's unlikely to be a useful graph in the first place.

• revezone

  1 965 9.5 TypeScript

  A lightweight local-first graphic-centric productivity tool to build your second brain. Supporting Excalidraw/Tldraw whiteboard and notion-like note. 一款以图形为中心、轻量级、本地优先的用于构建第二大脑的效率工具。支持 Excalidraw、Tldraw 白板和类 Notion 笔记。

  

For anyone who likes excalidraw & tldraw, there's this wrapper that handles local storage: https://github.com/revezone/revezone

• d2-playground

  23 62 6.5 JavaScript

  An online runner to play, learn, and create with D2, the modern diagram scripting language that turns text to diagrams.

  

• InfluxDB

  www.influxdata.com sponsored

  Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

  

• excalidraw-collaboration

  1 292 6.2 Makefile

  excalidraw with collaboration feature, self-hosting, and only one-click deploy

• pikchr

  3 103 7.5 C

  Mirror for Pikchr

• penrose

  21 6,611 9.2 TypeScript

  Create beautiful diagrams just by typing notation in plain text.

  

- penrose - advanced, general - https://penrose.cs.cmu.edu

• kroki

  49 2,669 8.8 JavaScript

  Creates diagrams from textual descriptions!

  

• svgbobrus

  29 3,718 6.0 Rust

  Convert your ascii diagram scribbles into happy little SVG

• DrawThe.Net

  9 1,078 0.0 JavaScript

  drawthe.net draws network diagrams dynamically from a text file describing the placement, layout and icons. Given a yaml file describing the hierarchy of the network and it's connections, a resulting diagram will be created.

• argdown

  8 852 0.0 JavaScript

  a simple syntax for complex argumentation

• diagrams

  110 34,870 6.2 Python

  :art: Diagram as Code for prototyping cloud system architectures

• openscad-graph-editor

  29 161 8.1 C#

  OpenSCAD Graph Editor

Yes, unless you're a visually oriented person like myself who is trying to do the programming visually.

I use:

https://github.com/derkork/openscad-graph-editor

to try to design woodworking projects:

https://forum.makerforums.info/t/openscad-and-python-looking...

and I'd like to think that I'm managing to keep the visual appearance sufficiently expressive that it is easier to work with than a traditional textual code representation --- jury is still out on that, we'll see when I start re-purposing what I'm working on for odd/even sides, and then then doing the horizontal version of the joinery.

• WorkOS

  workos.com sponsored

  The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.

  

Suggest a related project