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.
```mermaid
flowchart LR
Start --> Stop
```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 | — |
Spotted a mistake? Let us know.