{"panel":"/showcase/mermaid"}

Web widgets showcase

{"_back":"^?panel="}

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]

Text formatting

The Material typography scale and inline text-style helpers — colors, weights, sizes — across the framework's font stack.
open_in_newweb_assetdock_to_right

Code blocks

Server-side syntax highlighting via Chroma, with token classes mapped to Material design colors so the same markup recolors on theme change.
open_in_newweb_assetdock_to_right

Progress widget

Determinate and indeterminate progress indicators, plus the finite/infinite progress-status pattern for long-running operations.
open_in_newweb_assetdock_to_right

Toolbar widget

An action toolbar with grouped buttons and separators. Buttons that share a parent are automatically gathered into a toolbar without explicit configuration.
open_in_newweb_assetdock_to_right

Gallery widget

A horizontally-scrolling gallery of cards. Useful for featured-content rows or any list where horizontal swipe beats vertical scroll.
open_in_newweb_assetdock_to_right

Deck of cards widget

A responsive grid of cards that re-flows between 1, 2, and more columns depending on the viewport width. Good for dashboards or any uniform collection.
open_in_newweb_assetdock_to_right

Tab switcher widget

Tabbed content with smooth switching between sections. Each tab body is rendered server-side and revealed via the same state-driven redraw that powers the rest of the framework.
open_in_newweb_assetdock_to_right

Navigation widgets

The three flavors of side navigation — a compact strip, a labeled rail, and a full drawer — all driven by the same widget tree and adapting to the viewport.
open_in_newweb_assetdock_to_right

Form input widgets

Every form input widget on one page — text, email, password, OTP, dates, ranges, dropdowns, file uploads, color pickers, checkboxes, radios, star/sentiment ratings, filter and input chips, toggle switches, and the rich-text editor.
open_in_newweb_assetdock_to_right

Form validation

Client-side and server-side form validation working together: required fields, pattern matching, length limits, and custom predicate functions, with inline error messages that survive a server round-trip.
open_in_newweb_assetdock_to_right

Data table

A sortable, filterable, paginated table over a small US-states dataset. Quick-search, column sort, and page-size controls all use the same incremental-redraw plumbing the rest of the framework uses.
open_in_newweb_assetdock_to_right

CRUD

Standard create / read / update / delete flow over a per-session in-memory directory of contacts. Demonstrates form-driven persistence with validation, duplicate detection, and a record cap.
open_in_newweb_assetdock_to_right

Charts

Apache ECharts wrapped as bespa widgets. Bar, pie, column, and a US-states map all themed against the Material design tokens, with live theme switching.
open_in_newweb_assetdock_to_right

Mermaid

Mermaid diagrams (flowcharts, sequence, class, state, gantt) rendered client-side, themed against the Material design tokens, with optional zoom and pan interaction.
open_in_newweb_assetdock_to_right