Diagram makers

Make many kinds of diagram in your browser and drop them straight into your Markdown. Most are written as text inside a fenced code block, so the source lives in your file and renders wherever Markdown supports it. Pick a diagram type from the menu, or read about the engines below.

Mermaid

A Mermaid diagram is written as a short block of text that renders into a picture. One syntax covers flowcharts, sequence, class, state, ER (database), gantt, mind maps and more, and Mermaid diagrams render natively on GitHub, GitLab and Notion. Put a mermaid block in your Markdown:

```mermaid
flowchart TD
  A[Start] --> B{Ready?}
  B -->|yes| C[Ship it]
  B -->|no| A
```

Graphviz

Graphviz lays out generic graphs from the DOT language: networks, trees and dependency graphs. It handles large, dense graphs better than anything else.

```dot
digraph {
  A -> B
  A -> C
  B -> D
  C -> D
}
```

Vega-Lite

Vega-Lite renders data charts, such as bar, line and scatter, from a small JSON spec.

```vega-lite
{
  "data": {"values": [
    {"month": "Jan", "sales": 28},
    {"month": "Feb", "sales": 55}
  ]},
  "mark": "bar",
  "encoding": {
    "x": {"field": "month", "type": "nominal"},
    "y": {"field": "sales", "type": "quantitative"}
  }
}
```

WaveDrom

WaveDrom draws digital timing diagrams and register layouts from JSON, useful for hardware and protocol documentation.

```wavedrom
{ "signal": [
  { "name": "clk",  "wave": "p......" },
  { "name": "data", "wave": "x.34.5x", "data": ["a", "b", "c"] }
]}
```

More text engines

The menu also covers mind maps (Markmap), lightweight UML (Nomnoml), business process diagrams (BPMN), railroad and syntax diagrams, chemical structures from SMILES, and music notation from ABC. Each is written as its own fenced block and edited on its own page.

Visual editors

Not every diagram is text. For freeform pictures, floor plans and circuits you draw on a canvas instead. We store an editable model in a comment alongside a rendered image, so the picture shows in any Markdown viewer while staying fully editable here.