F Kitchen Sink

Design system

Diagram-as-code examples

Overview

This page aims for broad coverage of diagram grammars shipped with the pinned mermaid@10.9.x ESM build from jsDelivr (same init as layouts.py). Each block uses render_mermaid_block — the same .forge-diagram + .mermaid pattern as Markdown language-mermaid fences after convert_mermaid_blocks.

Beta grammars (Sankey, Block, Treemap, Kanban, Packet, Architecture, XY chart) may render differently or break on runtime upgrades; treat them as previews.

For static SVG archetypes (no runtime library) and per-template diagram-as-code parallels, see Diagram templates. Diagrams that need external registration (e.g. some ZenUML bundles) are not shown here.

Not in this build: Treemap, Kanban, Packet, and Architecture beta grammars are not registered in the default mermaid@10.9.x ESM bundle from jsDelivr (they do not resolve with the stock parser). Upgrade the runtime or register external diagram types if you need those.

The diagram runtime loads when the page sets has_mermaid in its PAGE dict so the showcase build injects the shared script.

Flowchart

Rendered when JavaScript runs; theme follows Forge light/dark via forgeMermaidRefresh.

graph TD / graph LR are aliases of flowchart; prefer flowchart in new content.

flowchart LR subgraph Plan["Plan"] A["Backlog"] --> B["Refine"] end subgraph Build["Build"] B --> C["Implement"] C --> D["Test"] end D --> E["Release"]

Org chart

Rendered when JavaScript runs; theme follows Forge light/dark via forgeMermaidRefresh.

Stock mermaid@10 does not ship a separate orgChart type; model reporting lines with flowchart TD (or LR). Shape styles such as ([ ]) round the top role.

flowchart TD CEO([CEO]) CEO --> CTO[Chief Technology Officer] CEO --> CFO[Chief Financial Officer] CTO --> VPE[VP Engineering] CTO --> VPP[VP Product] VPE --> TL1[Platform lead] VPE --> TL2[App lead] CFO --> CTL[Controller]

Sequence

Rendered when JavaScript runs; theme follows Forge light/dark via forgeMermaidRefresh.

sequenceDiagram participant Web as Client participant API as API Web->>API: POST /session API-->>Web: 201 + token Web->>API: GET /resource API-->>Web: 200 JSON

State diagram

Rendered when JavaScript runs; theme follows Forge light/dark via forgeMermaidRefresh.

stateDiagram-v2 [*] --> Draft Draft --> Review: submit Review --> Draft: changes Review --> Published: approve Published --> [*]

Class diagram

Rendered when JavaScript runs; theme follows Forge light/dark via forgeMermaidRefresh.

classDiagram class Repository { +list() +get(id) } class Service { -repo Repository +run() } Service --> Repository

Entity–relationship

Rendered when JavaScript runs; theme follows Forge light/dark via forgeMermaidRefresh.

erDiagram CUSTOMER ||--o{ ORDER : places ORDER ||--|{ LINE_ITEM : contains PRODUCT ||--o{ LINE_ITEM : "ordered in" CUSTOMER { string id string name } ORDER { string id date created }

Pie chart

Rendered when JavaScript runs; theme follows Forge light/dark via forgeMermaidRefresh.

pie showData title Work mix "Build" : 45 "Review" : 25 "Plan" : 20 "Ops" : 10

Mindmap

Rendered when JavaScript runs; theme follows Forge light/dark via forgeMermaidRefresh.

mindmap root((Product)) Discovery Interviews Analytics Delivery Design Engineering

Gantt

Rendered when JavaScript runs; theme follows Forge light/dark via forgeMermaidRefresh.

gantt title Program Gantt dateFormat YYYY-MM-DD axisFormat %b %d section Discovery Research and design :done, disc1, 2024-01-02, 10d section Build Core implementation :active, build1, after disc1, 14d Hardening and QA :build2, after build1, 9d section Release Launch prep :crit, rel1, after build2, 5d GA ship :milestone, m1, after rel1, 0d

Timeline

Rendered when JavaScript runs; theme follows Forge light/dark via forgeMermaidRefresh.

timeline title Product eras section 2023 Alpha : milestone Beta launch : milestone section 2024 GA release : milestone

Requirement

Rendered when JavaScript runs; theme follows Forge light/dark via forgeMermaidRefresh.

requirementDiagram requirement req_auth { id: 1 text: Authenticate users before sensitive actions. risk: high verifymethod: test } element portal { type: design } portal - satisfies -> req_auth

Quadrant chart

Rendered when JavaScript runs; theme follows Forge light/dark via forgeMermaidRefresh.

quadrantChart title Prioritization x-axis Low effort --> High effort y-axis Low impact --> High impact quadrant-1 Quick wins quadrant-2 Major bets quadrant-3 Fill-ins quadrant-4 Time sinks Feature A: [0.2, 0.75] Feature B: [0.65, 0.35]

XY chart

Beta This grammar is beta and may change between minor releases.

Rendered when JavaScript runs; theme follows Forge light/dark via forgeMermaidRefresh.

xychart-beta title "Quarterly throughput" x-axis [Q1, Q2, Q3, Q4] y-axis "Items" 0 --> 120 bar [40, 55, 70, 90] line [35, 50, 65, 85]

Git graph

Rendered when JavaScript runs; theme follows Forge light/dark via forgeMermaidRefresh.

gitGraph commit id: "init" branch develop checkout develop commit id: "feature" checkout main merge develop commit id: "tag"

User journey

Rendered when JavaScript runs; theme follows Forge light/dark via forgeMermaidRefresh.

journey title Onboarding section Sign up Visit site: 5: User Create account: 4: User section First value Complete profile: 3: User, App See dashboard: 5: User

Sankey

Beta This grammar is beta and may change between minor releases.

Rendered when JavaScript runs; theme follows Forge light/dark via forgeMermaidRefresh.

sankey-beta Alpha,Gamma,30 Alpha,Beta,20 Beta,Delta,15 Gamma,Delta,25

Block

Beta This grammar is beta and may change between minor releases.

Rendered when JavaScript runs; theme follows Forge light/dark via forgeMermaidRefresh.

block-beta columns 1 block:chain:2 A["Step A"] B["Step B"] end block C["Done"] end

C4 context

Rendered when JavaScript runs; theme follows Forge light/dark via forgeMermaidRefresh.

C4Context title System context Person(user, "User", "Uses the product") System(sys, "Core system", "Primary application") Rel(user, sys, "HTTPS")

Expandable diagram

render_mermaid_block(..., expandable=True) adds forge-diagram-trigger and openDiagramModal (from forge-theme.js) after the runtime draws SVG into the container.

flowchart TD A[Click this frame] --> B[Modal shows SVG] B --> C[Same forge-diagram styling]