Diagrams

Write a fenced code block with the mermaid language and it renders as a diagram. Diagrams are drawn in the browser and follow your light or dark theme.

Flowchart

```mermaidflowchart LR	A[Write Markdown] --> B{Has a fence?}	B -- mermaid --> C[Render a diagram]	B -- code --> D[Highlight with Shiki]```

Renders as:

flowchart LR
	A[Write Markdown] --> B{Has a fence?}
	B -- mermaid --> C[Render a diagram]
	B -- code --> D[Highlight with Shiki]

Sequence

sequenceDiagram
	participant R as Reader
	participant S as Server
	R->>S: Request a page
	S-->>R: Pre-rendered HTML
	R->>R: Hydrate and draw diagrams

Anything Mermaid supports works, including class diagrams, state diagrams, and Gantt charts. See the Mermaid docs for the full syntax.