Examples

Each diagram below pairs its mermaid source with the dual-theme inline SVG the extension renders it to — the light or dark variant follows the page theme, with no client-side script.

Block

block-beta
    columns 3
    Parse["Parse fence"] Render["Run mmdc"] Cache["Cache SVG"]
    Parse --> Render
    Render --> Cache

Class

classDiagram
    class MermaidDirective {
        +run() list~Node~
    }
    class mermaid_inline {
        +mermaid_source str
    }
    class Renderer {
        +render(source, theme) str
        -cache Path
    }
    MermaidDirective --> mermaid_inline : emits
    mermaid_inline --> Renderer : rendered by

Entity relationship

erDiagram
    PROJECT ||--o{ DOCUMENT : contains
    DOCUMENT ||--o{ DIAGRAM : embeds
    DIAGRAM {
        string source
        string theme
        string digest
    }

Flowchart

flowchart LR
    browser --> cdn
    cdn -->|hit| browser
    cdn -->|miss| origin
    origin --> db[(database)]
    origin --> cdn

Gantt

gantt
    title Diagram build
    dateFormat YYYY-MM-DD
    axisFormat %m-%d
    section Render
    Parse fences   :a1, 2026-07-01, 1d
    Run mmdc       :a2, after a1, 2d
    section Ship
    Normalize SVG  :a3, after a2, 1d
    Write HTML     :a4, after a3, 1d

Git graph

gitGraph
    commit id: "scaffold"
    branch mermaid
    checkout mermaid
    commit id: "port renderer"
    commit id: "dual themes"
    checkout main
    merge mermaid
    commit id: "release"

Mindmap

mindmap
  root((sphinx-gp-mermaid))
    Authoring
      MyST fence
      caption and name
    Rendering
      dual light and dark
      inline SVG
    Toolchain
      mmdc
      puppeteer Chrome

Pie

pie showData
    title Diagram types in these docs
    "Flowchart" : 40
    "Sequence" : 25
    "Class" : 15
    "State" : 10
    "Other" : 10

Sequence

sequenceDiagram
    participant U as Reader
    participant S as Sphinx
    participant M as mmdc
    U->>S: request page
    S->>M: render mermaid fence
    M-->>S: inline SVG (light + dark)
    S-->>U: page paints with diagram

State

stateDiagram-v2
    [*] --> Parsing
    Parsing --> Rendering: fence found
    Rendering --> Cached: mmdc succeeds
    Rendering --> Fallback: mmdc missing
    Cached --> [*]
    Fallback --> [*]

Timeline

timeline
    title Diagram lifecycle
    Author : write a mermaid fence
    Build : render via mmdc : cache the SVG
    Serve : inline in the page : toggle light and dark