{}

Mermaid widgets

Flowchart

flowchart LR
    Start([Request arrives]) --> Auth{Authenticated?}
    Auth -- No --> Login[Redirect to login]
    Auth -- Yes --> Handler[Run handler]
    Handler --> Render[Render widgets]
    Render --> Diff[Diff fragments]
    Diff --> Reply([Send response])

Sequence

sequenceDiagram
    participant Browser
    participant Server
    participant DB
    Browser->>Server: GET /page?x=1
    Server->>DB: Query
    DB-->>Server: Rows
    Server-->>Browser: HTML
    Browser->>Server: POST ?x=2 (Bespa-Fetch: 1)
    Server-->>Browser: Partial fragments
    Note over Browser: Swap by data-id

State

stateDiagram-v2
    [*] --> Idle
    Idle --> Loading: submit
    Loading --> Success: 2xx
    Loading --> Error: 4xx/5xx
    Success --> Idle: reset
    Error --> Idle: retry

Gantt

gantt
    title Release plan
    dateFormat YYYY-MM-DD
    section Design
    Mockups          :done,  des1, 2026-05-01, 7d
    Review           :active, des2, 2026-05-08, 3d
    section Build
    Widgets          :        b1, after des2, 10d
    Docs             :        b2, after b1, 5d

Class

classDiagram
    class Widget {
        +ID() string
        +Draw(w, r) error
    }
    class WidgetBase~T~ {
        -shown bool
        +RedrawIfChanged(r, keys) T
        +HideIf(pred) T
    }
    class ChartWidget
    class MermaidWidget
    Widget <|.. WidgetBase
    WidgetBase <|-- ChartWidget
    WidgetBase <|-- MermaidWidget

Zoom & pan

Wheel or pinch to zoom, drag to pan, double-click to recenter.
flowchart TB
    A[Request] --> B[Router]
    B --> C{Method}
    C -->|GET| D[Handler GET]
    C -->|POST| E[Handler POST]
    D --> F[Read state]
    E --> F
    F --> G[Build tree]
    G --> H[Draw]
    H --> I[Compress]
    I --> J[Response]
    J --> K[Client]
    K --> L{Bespa-Fetch?}
    L -->|Yes| M[Swap fragments]
    L -->|No| N[Replace page]