Diagrams
The diagram
directive allows you to render various types of diagrams using the Kroki service. Kroki supports many diagram types including Mermaid, D2, Graphviz, PlantUML, and more.
The basic syntax for the diagram directive is:
::::{diagram} [diagram-type]
<diagram content>
::::
If no diagram type is specified, it defaults to mermaid
.
The diagram directive supports the following diagram types:
mermaid
- Mermaid diagrams (default)d2
- D2 diagramsgraphviz
- Graphviz/DOT diagramsplantuml
- PlantUML diagramsditaa
- Ditaa diagramserd
- Entity Relationship diagramsexcalidraw
- Excalidraw diagramsnomnoml
- Nomnoml diagramspikchr
- Pikchr diagramsstructurizr
- Structurizr diagramssvgbob
- Svgbob diagramsvega
- Vega diagramsvegalite
- Vega-Lite diagramswavedrom
- WaveDrom diagrams
::::{diagram}
flowchart LR
A[Start] --> B{Decision}
B -->|Yes| C[Action 1]
B -->|No| D[Action 2]
C --> E[End]
D --> E
::::
::::{diagram} mermaid
sequenceDiagram
participant A as Alice
participant B as Bob
A->>B: Hello Bob, how are you?
B-->>A: Great!
::::
::::{diagram} d2
x -> y: hello world
y -> z: nice to meet you
::::
::::{diagram} graphviz
digraph G {
rankdir=LR;
A -> B -> C;
A -> C;
}
::::
If the diagram content is empty or the encoding fails, an error message will be displayed instead of the diagram.