# Mermaid diagrams

Create diagrams, flowcharts, and visualizations using [Mermaid](https://mermaid.js.org/) 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

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

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

## Sequence diagram

```mermaid
sequenceDiagram
    participant Client
    participant API
    participant Database

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

## Class diagram

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

## State diagram

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

## Entity relationship diagram

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

## Pie chart

```mermaid
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:

````markdown
```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](https://mermaid.js.org/intro/) for full syntax reference.