Diagrams

Create diagrams using Mermaid syntax in fenced code blocks — automatic with Publier.

Mermaid support is built into Publier. Install the peer dependencies and Publier enables diagram rendering automatically. No config changes needed.

Setup

1. Install the packages:

   pnpm add astro-mermaid mermaid

2. That’s it. Publier picks up the packages at startup and renders diagrams. Dark/light theme follows your ThemeToggle automatically.

Usage

Write Mermaid diagrams in fenced code blocks with the mermaid language tag:

```mermaid
graph TD
    A[Start] --> B{Decision}
    B -->|Yes| C[Done]
    B -->|No| D[Retry]
    D --> B
```

Example diagrams

Flowchart

graph TD
    A[Start] --> B{Is it working?}
    B -->|Yes| C[Great!]
    B -->|No| D[Debug]
    D --> B

Sequence diagram

sequenceDiagram
    participant Browser
    participant Server
    participant Database
    Browser->>Server: GET /api/docs
    Server->>Database: SELECT * FROM pages
    Database-->>Server: Results
    Server-->>Browser: JSON Response

State diagram

stateDiagram-v2
    [*] --> Draft
    Draft --> Review
    Review --> Published
    Review --> Draft
    Published --> Archived
    Archived --> [*]

Dark mode

Diagrams re-render in Mermaid’s dark theme when the user toggles dark mode. The integration reads the data-theme attribute Publier sets on <html>, so no extra wiring is needed.

See the Mermaid documentation for the full syntax reference.