Diagrams (Mermaid)

A ```mermaid fenced block renders as an actual diagram - Mermaid’s own syntax, parsed and drawn in the browser - instead of being syntax-highlighted like an ordinary code block.

```mermaid
graph TD
  A[Write MDX] --> B{writedocs build}
  B --> C[Static HTML]
  B --> D[sitemap.xml]
  C --> E[Deploy anywhere]
```

Flowcharts, sequence diagrams, state diagrams, Gantt charts, and everything else Mermaid supports all work the same way - fence the block as mermaid, write ordinary Mermaid syntax inside it.

Theme

Diagrams automatically follow the site’s light/dark toggle - no configuration needed. Switching themes re-renders any diagrams on the page in the new theme.