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 business process diagrams (BPMN), railroad and syntax diagrams, chemical structures from SMILES, music notation from ABC, Pikchr drawings, phylogenetic trees from Newick text and ASCII art rendered by svgbob. 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, circuits, Venn diagrams, chess positions and ASCII paintings you work on a canvas instead. Each one copies out as a short fenced block of text. Paste that block back into its editor to keep working on it, or download the picture as SVG or PNG.