Note--Build beautiful architecture diagrams

1. Diagrams

Turn python code into cloud system architecture diagrams

2. Mermaid

Generation of diagram and flowchart from text in a similar manner as markdown.

3. ASCII editor

Free editor: Asciiflow, dot-to-ascii

Paid editor: Monodraw

4. PlantUML

It is an open-source tool allowing users to create diagrams from plain text language.

5. Markmap

Visualize your Markdown as mindmaps. It supports the VS code plugin. Markmap makes it easy to create mindmaps from Markdown. It is an open source project and supports a wide range of editors, including VS Code. It offers many features, such as customizable themes, export to various image formats and the ability to create custom nodes.

6. Go diagrams

Create beautiful system diagrams with Go

7. D2

D2 is a modern diagram scripting language that turns text to diagrams

XML

# Actors
hans: Hans Niemann

defendants: {
  mc: Magnus Carlsen
  playmagnus: Play Magnus Group
  chesscom: Chess.com
  naka: Hikaru Nakamura

  mc -> playmagnus: Owns majority
  playmagnus <-> chesscom: Merger talks
  chesscom -> naka: Sponsoring
}

# Accusations
hans -> defendants: 'sueing for $100M'

# Offense
defendants.naka -> hans: Accused of cheating on his stream
defendants.mc -> hans: Lost then withdrew with accusations
defendants.chesscom -> hans: 72 page report of cheating

8. Graphviz

Graphviz is a C-based graph visualization software born at AT&T Bell Labs in 1991. It uses a variety of layout algorithms to cover a wide breadth of domains such as UML diagrams, code dependency graphs, network maps, mind maps, and more.

Java

digraph G {
    // Actors
    hans [label="Hans Niemann"]

    subgraph cluster_0 {
        label="defendants"

        mc [label="Magnus Carlsen"]
        playmagnus [label="Play Magnus Group"]
        chesscom [label="Chess.com"]
        naka [label="Hikaru Nakamura"]


        mc -> playmagnus [label="Owns majority"]
        playmagnus -> chesscom [label="Merger talks", dir="both"]
        chesscom -> naka [label="Sponsoring"]
    }

    // Accusations
    // NOTE: hack to get subgraph edges working
    hans -> mc [lhead=cluster_0, label="sueing for $100M"];

    // Offense
    naka -> hans [label="Accused of cheating on his stream"]
    mc -> hans [label="Lost then withdrew with accusations"]
    chesscom -> hans [label="72 page report of cheating"]
}

9. Pintora

An extensible text-to-diagrams library that works in both browser and node.js

JavaScript

sequenceDiagram
  title: Sequence Diagram Example
  autonumber
  participant [<actor> User]
  User->>Pintora: Draw me a sequence diagram（with DSL）
  activate Pintora
  Pintora->>Pintora: Parse DSL, draw diagram
  alt DSL is correct
    Pintora->>User: Return the drawn diagram
  else DSL is incorrect
    Pintora->>User: Return error message
  end
  deactivate Pintora
  @note left of Pintora
  Different output formats according to render targets
  1. In browser side. output SVG or Canvas
  2. In Node.js side. output PNG file
  @end_note

Reference

awesome-diagramming

shubhamgrg04 • Updated Jul 7, 2024

diagrams

mingrammer • Updated Jul 7, 2024