Diagram Templates

SVG Diagram Type Templates

31 static SVG archetypes (Forge palette: cyan / amber / slate surfaces), extensible over time — aligned with diagram-as-code in the same design system: each family explains the closest native grammars, and each card lists matching types (e.g. flowchart, gantt, xychart-beta). Click a card for the modal legend. Scroll to diagram-as-code parallels for live samples per template key, or Diagram-as-code examples for the full mermaid@10 catalog (sequence, state, class, ER, C4, Git graph, …).

For JSON-driven metrics charts (same charts envelope as forge-lenses), see Data charts (static JSON) and Data charts (API fetch).

ASCII diagrams

In Markdown, the ```blueprint-diagram-ascii fence (alias ```ks-diagram-ascii) renders box-drawing in the same .forge-diagram shell as Mermaid and SVG tiles. Optional key:, alt:, caption:, and expand: lines form a prefix; the first line that does not match begins the art. With a valid catalog key: and expand: true, the figure opens the same legend modal as static SVG tiles. Heuristics for choosing key: from ASCII intent are in docs/ascii-to-ks-diagrams.md in the repository.

Example (static)

+------+     +------+     +------+
|  A   | --> |  B   | --> |  C   |
+------+     +------+     +------+

Example (expand — click figure)

+------+     +------+
|  A   | --> |  B   |
+------+     +------+

Process & flow

How work moves through stages — same visual language as flowchart and journey-style narratives.

Primary diagram-as-code parallels: flowchart (LR/TD, decisions, subgraph swimlanes) and journey. Volume narrowing is approximated with sankey-beta on the Diagram-as-code examples page.

linear-flow

Diagram-as-code: flowchart · journey

loop-cycle

Diagram-as-code: flowchart

gate-chain

Diagram-as-code: flowchart

swimlane

Diagram-as-code: flowchart · subgraph

decision-flow

Diagram-as-code: flowchart

funnel

Diagram-as-code: flowchart · sankey-beta

Structural & relational

Hierarchy, boards, and relationships — align with flowchart, mindmap, and (for networks) graph edges. Tree = generic node boxes; org chart = people cards (avatar, name, title, team line).

Maps to flowchart trees and org-style TD layouts, mindmap, and dense links similar to flowchart --- / --> edges. classDiagram / erDiagram cover typed relations on Diagram-as-code examples.

tree

Diagram-as-code: flowchart · mindmap

org-chart

Diagram-as-code: flowchart

board-columns

Diagram-as-code: flowchart · block-beta

checklist

Diagram-as-code: flowchart

network

Diagram-as-code: flowchart

venn

Diagram-as-code: (no direct grammar — use SVG or other tools)

Timeline & scheduling

Time-based views — pair with gantt and timeline grammars.

Direct grammars: gantt and timeline. Roadmaps often combine both; see Diagram-as-code examples.

gantt

Diagram-as-code: gantt

timeline

Diagram-as-code: timeline

roadmap

Diagram-as-code: timeline · gantt

Cartesian charts

Category and time-series on X/Y axes — bar, line, area, stacked bars, scatter, and waterfall bridges. Native grammars cover most via xychart-beta and quadrantChart; waterfall is SVG-first.

xychart-beta for bar, line, and multi-series; quadrantChart for scatter-like placement. Waterfall has no stock grammar in our pinned build — use the SVG template or BI tools. See Diagram-as-code examples.

bar-chart

Diagram-as-code: xychart-beta

line-chart

Diagram-as-code: xychart-beta

stacked-bar

Diagram-as-code: xychart-beta

area-chart

Diagram-as-code: xychart-beta

scatter

Diagram-as-code: quadrantChart

waterfall

Diagram-as-code: (no direct grammar — use SVG or other tools)

Polar & composition

Parts-of-whole, multi-axis profiles, and nested rings — pie/donut, radar, and sunburst-style breakdowns. Only pie maps cleanly to native pie syntax; the rest are SVG-first.

pie is native. Radar and nested donut archetypes are Forge-styled SVG — use these cards or external charting. See Diagram-as-code examples for pie syntax.

pie-donut

Diagram-as-code: pie

radar

Diagram-as-code: (no direct grammar — use SVG or other tools)

nested-donut

Diagram-as-code: (no direct grammar — use SVG or other tools)

Comparison & status

Quadrants, gauges, KPI tiles, and bullet charts — quadrant via quadrantChart; gauges, bullets, and KPI cards are usually custom SVG or BI exports.

quadrantChart is native; gauges, KPI cards, and bullet charts have no stock type in our pinned build — keep these templates or embed from analytics tools.

quadrant

Diagram-as-code: quadrantChart

gauge

Diagram-as-code: (no direct grammar — use SVG or other tools)

kpi-card

Diagram-as-code: (no direct grammar — use SVG or other tools)

bullet-chart

Diagram-as-code: (no direct grammar — use SVG or other tools)

Interaction & behavior

Message order across actors and finite-state lifecycles — pair with sequence and state diagrams.

Native: sequenceDiagram for lifelines and stateDiagram-v2 for states. Full syntax on Diagram-as-code examples.

sequence

Diagram-as-code: sequenceDiagram

state-machine

Diagram-as-code: stateDiagram-v2

Specialized

Heatmaps and other dense matrices — not in default bundle as first-class grammars.

No default mermaid@10 heatmap grammar; use this SVG archetype or external charting. Other specialized diagrams (e.g. requirementDiagram, gitGraph, C4) live on Diagram-as-code examples.

heatmap

Diagram-as-code: (no direct grammar — use SVG or other tools)

Diagram-as-code parallels

Each block is diagram-as-code with the same render_mermaid_block wrapper as handbook and product pages. Use it when you want editable source; use the SVG cards above when you need exact Forge styling. Click a rendered diagram to open it in the lightbox (same as expandable blocks on handbook pages). Some archetypes have no close native grammar — keep the static template or use BI/design tools.

For the full catalog (C4, ER, Sankey, Git graph, …), see Diagram-as-code examples.

Process & flow

Structural & relational

Timeline & scheduling

Cartesian charts

Polar & composition

Comparison & status

Interaction & behavior

Specialized