Build beautiful architecture diagrams
🖼️

Build beautiful architecture diagrams

1. Diagrams

Turn python code into cloud system architecture diagrams
notion image

2. Mermaid

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

3. ASCII editor

Free editor: Asciiflow, dot-to-ascii
Paid editor: Monodraw
notion image
notion image

4. PlantUML

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

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.
notion image

6. Go diagrams

Create beautiful system diagrams with Go
notion image

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
notion image

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"]
}
notion image

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
 
notion image
 

Reference

awesome-diagramming
shubhamgrg04Updated May 23, 2024
diagrams
mingrammerUpdated May 24, 2024