Blocks
Compatibility: GitHub, GitLab, Obsidian, Notion
A fenced block is three backticks with a name after them. For code that name is the language and the block shows as highlighted text. For a diagram the name is the diagram type, and the block renders as a picture wherever that block type is supported. Mermaid, for example, renders on GitHub, GitLab and Notion. You write the diagram once as text and it travels with your document.
You write
```mermaid
flowchart LR
Start --> Stop
```
You get
Block types
The name after the opening fence sets the block type. These are the diagram block types, including ones we do not build an editor for yet.
| Block | Type | Editor |
|---|---|---|
| Available now | ||
```mermaid | Mermaid diagrams | See types below |
```dot | Graphviz graph / network | Open |
```vega-lite | Vega-Lite data chart | Open |
```wavedrom | WaveDrom waveform | Open |
```bpmn | BPMN process | Open |
```railroad | Railroad / syntax | Open |
```smiles | Chemical structure (SMILES) | Open |
```abc | Music notation (ABC) | Open |
| Known, not yet supported | ||
```plantuml | PlantUML (UML, C4 and more) | — |
```d2 | D2 diagrams | — |
```nomnoml | Nomnoml (UML) | — |
```markmap | Markmap (mind map) | — |
```ditaa | ditaa (ASCII art to image) | — |
```blockdiag | blockdiag family (seq, act, nw) | — |
```pikchr | Pikchr | — |
```svgbob | Svgbob (ASCII to SVG) | — |
```vega | Vega (full spec) | — |
```tikz | TikZ / PGF | — |
```math | Maths (LaTeX / KaTeX) | — |
Mermaid diagram types
Mermaid packs many diagrams into the one ```mermaid block. You choose which by the
first line inside the block. These are the first lines.
| First line | Diagram | Editor |
|---|---|---|
| Available now | ||
flowchart TD | Flowchart | Open |
sequenceDiagram | Sequence diagram | Open |
classDiagram | Class (UML) diagram | Open |
stateDiagram-v2 | State diagram | Open |
erDiagram | ER / database diagram | Open |
gantt | Gantt chart | Open |
timeline | Timeline | Open |
mindmap | Mind map | Open |
journey | User journey | Open |
gitGraph | Git graph | Open |
requirementDiagram | Requirement diagram | Open |
kanban | Kanban board | Open |
architecture-beta | Architecture diagram | Open |
pie | Pie chart | Open |
quadrantChart | Quadrant chart | Open |
sankey-beta | Sankey diagram | Open |
xychart-beta | XY / bar / line chart | Open |
| Known, not yet supported | ||
C4Context | C4 architecture | — |
block-beta | Block diagram | — |
packet-beta | Packet diagram | — |
zenuml | ZenUML sequence | — |