Diagrams

Use the <Mermaid> component — globally available in any page, no import — and pass the diagram as its chart prop:

<Mermaid
  chart={`flowchart LR
  A[Markdown] --> B[fiskil build]
  B --> C[Docs site]
  C --> D[Happy readers]`}
/>

Every Mermaid type works — flowcharts, sequence diagrams, state machines, ER diagrams, Gantt charts:

A fenced ```mermaid code block renders as highlighted code, not as a diagram — use it when you want to show diagram source, and <Mermaid> when you want the diagram itself.

Theming is automatic

Diagrams read your site's theme variables at render time — surfaces, text, and border colors — and re-render correctly in dark mode. There is nothing to configure and no way for a diagram to drift off-brand.

Keep diagrams narrow (vertical flow for anything with more than four or five nodes) — they render inside the content column, and readers on laptops will thank you.