Diagram catalog

All diagram examples

Explore every supported diagram type with source + live preview. These snippets can be copied into your workspace or used as prompts for AI edits.

Want board-level context? See board previews.

Supported examples

Rendered with Mermaid in-browser. Use Code / Preview to inspect syntax and output.

Request flow

Input request routes through validation and processing.

flowchart
Rendering diagram…

Checkout handshake

User, app, gateway, and DB message exchange.

sequenceDiagram
Rendering diagram…

Domain classes

User/project/workspace relationships.

classDiagram
Rendering diagram…

Ticket lifecycle

How work items move from intake to close.

stateDiagram-v2
Rendering diagram…

Entity model

Team, service, and incident relational model.

erDiagram
Rendering diagram…

User journey

End-user satisfaction per phase.

journey
Rendering diagram…

Roadmap timing

Quarterly implementation milestones.

gantt
Rendering diagram…

Channel split

Budget or traffic distribution example.

pie
Rendering diagram…

Prioritization matrix

Impact/effort matrix for initiatives.

quadrantChart
Rendering diagram…

Requirement trace

Requirement metadata and relationships.

requirementDiagram
Rendering diagram…

Branch graph

Mainline + feature + hotfix branch pattern.

gitGraph
Rendering diagram…

Idea map

Hierarchical concept map for planning.

mindmap
Rendering diagram…

Release timeline

Narrative sequence by month.

timeline
Rendering diagram…

Architecture

Service topology with groups and edges.

architecture-beta
Rendering diagram…

Capability radar

Compare multiple dimensions for two options.

radar-beta
Rendering diagram…

C4 context

System context relationships using C4 notation.

C4Context
Rendering diagram…

Sankey flow

Volume split across stages.

sankey-beta
Rendering diagram…

XY chart

Bar + line trend in one chart.

xychart-beta
Rendering diagram…

Layered pipeline

Macro stages and handoffs—block-style layout without the experimental block-beta renderer.

flowchart
Rendering diagram…

Packet layout

Packet fields and bit ranges.

packet-beta
Rendering diagram…

Kanban board

Backlog and in-flight work states.

kanban-beta
Rendering diagram…

Treemap

Hierarchical proportional categories.

treemap-beta
Rendering diagram…

Additional diagram families

These are on our roadmap, but are not currently bundled in the in-browser Mermaid runtime for this app build.

  • Venn
  • Ishikawa
  • TreeView
  • ZenUML
  • Other Examples