Skip to content
✨ Publier v1 is live — a polished docs platform built for the open web.
On this page

Mermaid diagrams

Render flowcharts, sequence diagrams, class diagrams, and state machines inline via fenced Mermaid code blocks — auto-detected and theme-aware when astro-mermaid is installed.

Mermaid diagrams turn plain-text syntax into SVG diagrams at build time. Publier auto-detects astro-mermaid and wires it transparently — write a fenced code block with mermaid as the language and you get a rendered diagram.

Flowchart

flowchart LR
  A["publier.config.yaml"] --> B{"docsShell()"}
  B --> C["@astrojs/mdx"]
  B --> E["astro-expressive-code"]
  B --> F["astro-mermaid"]
  B --> G["remark / rehype pipeline"]
  C & E & F & G --> H["Production build"]
```mermaid
flowchart LR
  A["publier.config.yaml"] --> B{"docsShell()"}
  B --> C["@astrojs/mdx"]
  B --> E["astro-expressive-code"]
  B --> F["astro-mermaid"]
  B --> G["remark / rehype pipeline"]
  C & E & F & G --> H["Production build"]
```

Sequence diagram

sequenceDiagram
  participant U as User
  participant C as Publier CLI
  participant D as Dev server
  U->>C: publier dev
  C->>D: spawn local dev server
  D-->>U: http://localhost:4321

Class diagram

classDiagram
  class DocsShellOptions {
    +boolean mdx
    +boolean math
    +boolean mermaid
    +boolean prefetch
    +boolean autolinkHeadings
    +SnippetsConfig snippets
  }
  class AstroIntegration
  DocsShellOptions --> AstroIntegration : docsShell()

State diagram

stateDiagram-v2
  [*] --> Draft
  Draft --> Review: submit
  Review --> Draft: request changes
  Review --> Published: approve
  Published --> Archived: deprecate
  Archived --> [*]

Setup

astro-mermaid is detected automatically at build time. Nothing to enable if it’s installed:

Terminal window
pnpm add astro-mermaid mermaid

Opt out explicitly with docsShell({ mermaid: false }) if you’d rather not ship Mermaid on a specific site.

Theme handling

Publier passes autoTheme: true to the integration. Mermaid reads the data-theme attribute set by <ThemeToggle /> and repaints its diagrams in sync — same colors as the rest of your docs, same light/dark behavior.

Behaviour

  • Diagrams render at build time — no browser-side Mermaid runtime.
  • Fenced blocks with mermaid as the language are auto-detected; all other languages fall through to Expressive Code syntax highlighting.
  • Theme adapts automatically on dark-mode toggle.

More

For deeper coverage — all Mermaid diagram types, GitHub-specific caveats, escaping, custom classes — see the Diagrams guide.