.md

Mermaid diagrams

Create diagrams, flowcharts, and visualizations using Mermaid syntax directly in markdown files.

The theme in src/app/directives/mermaid-themes.ts draws diagrams in the docs' language: ink lines and 1.5px ink strokes, nodes on the page surface with 4px corners, Hanken Grotesk labels, edge labels as small ruled chips, notes on the yellow tint, and a panel framed by the 1.5px rule. Light and dark variants follow the docs theme; diagrams re-render when it changes.

Flowchart

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

Emphasis

Give the one node a diagram is about the mint class, inline with A:::mint or as a statement with class A mint. Use it once per diagram at most, like mint everywhere else.

flowchart LR
    M[Model] --> L[List]:::mint
    L --> Q[Query]
    Q --> R[Results]

Sequence diagram

sequenceDiagram
    participant Client
    participant API
    participant Database

    Client->>API: Request data
    API->>Database: Query
    Database-->>API: Results
    API-->>Client: JSON response

Class diagram

classDiagram
    class DcuplCore {
        +config: Config
        +init()
        +query(model)
    }
    class DcuplList {
        +items: Item[]
        +filter()
        +sort()
    }
    DcuplCore --> DcuplList

State diagram

stateDiagram-v2
    [*] --> Idle
    Idle --> Loading: fetch()
    Loading --> Success: data received
    Loading --> Error: request failed
    Success --> Idle: reset()
    Error --> Loading: retry()

Entity relationship diagram

erDiagram
    USER ||--o{ ORDER : places
    ORDER ||--|{ LINE_ITEM : contains
    PRODUCT ||--o{ LINE_ITEM : "ordered in"

Pie chart

pie title Data Distribution
    "Category A" : 40
    "Category B" : 30
    "Category C" : 20
    "Category D" : 10

Usage

Use the mermaid language identifier in fenced code blocks:

```mermaid
flowchart TD
    A[Start] --> B[End]:::mint
```

Don't set colors in the diagram source (style, classDef … fill:): they bypass the theme and break in dark mode. The mint class is the one built-in emphasis.

Supported diagram types

  • Flowchart - Process flows and decision trees
  • Sequence Diagram - Interactions between components
  • Class Diagram - Object-oriented structures
  • State Diagram - State machines and transitions
  • Entity Relationship - Database schemas
  • Pie Chart - Data distribution
  • Gantt Chart - Project timelines
  • Git Graph - Branch visualization

See the Mermaid documentation for full syntax reference.