# Diagrams (Mermaid)

A ```` ```mermaid ```` fenced block renders as an actual diagram - [Mermaid](https://mermaid.js.org)'s own syntax, parsed and drawn in the browser - instead of being syntax-highlighted like an ordinary code block.

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

```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.

<Callout type="tip">
  Diagrams render client-side (the same way search does), so they need JavaScript enabled. A reader with JavaScript disabled sees the raw diagram source as plain text instead of a blank space.
</Callout>