Mermaid Chart Selection
| Field | Value |
|---|---|
| Type | Skill Resource |
| Source | ~/.copilot/skills/technical-writing/references/mermaid/chart-selection.md |
| Description | Not specified |
Source Content
Mermaid Chart Selection
Use the chart type that answers the reader’s question.
| Goal | Diagram type | Opening keyword |
|---|---|---|
| Actor handoff over time | Sequence | sequenceDiagram |
| Process, logic flow, decision tree | Flowchart | flowchart TD or flowchart LR |
| Lifecycle and allowed transitions | State | stateDiagram-v2 |
| End-to-end user experience with emotion | User journey | journey |
| Durable records, ownership, audit evidence | ER | erDiagram |
| Roles, capabilities, interfaces | Class | classDiagram |
| A service in its ecosystem (who and what it touches) | C4 context | C4Context |
| Deployment topology (services, stores, edges) | Architecture | architecture-beta |
| Trend, count, rate, ordered buckets | XY chart | xychart-beta |
| Volume through a funnel, with drop-off | Sankey | sankey-beta |
| Two-axis prioritisation (impact vs. effort) | Quadrant | quadrantChart |
| Discovery map of a whole service | Mindmap | mindmap |
| Phases or milestones without exact dates | Timeline | timeline |
| Project timeline with dated tasks | Gantt | gantt |
| Requirement-to-component traceability | Requirement | requirementDiagram |
| Proportions | Pie | pie |
| Git branching | Gitgraph | gitGraph |
Digital service teams
For a full catalog geared to service delivery — sixteen types grouped by lifecycle phase (understand users, design, connect, deliver, measure), each with when-to-use and when-not guidance and a worked example — read service-team-diagrams.md. It ships with a rendered gallery at ../gallery/index.html so a team can look at every type side by side and agree the house look before anyone draws the next one.
InteractiveMermaid Support
The design-system InteractiveMermaid wrapper uses beautiful-mermaid.
Its rich supported chart types are flowcharts, state diagrams, sequence diagrams,
class diagrams, ER diagrams, and XY charts.
Do not assume gitGraph, gantt, pie, journey, timeline, mindmap,
quadrantChart, sankey-beta, architecture-beta, block-beta, C4Context,
or requirementDiagram will render in InteractiveMermaid. Use a static Mermaid
surface, an existing UI component, or prose/table guidance for those.
GitOps Mapping
| GitOps question | Preferred chart | Why |
|---|---|---|
| What does the developer or reviewer do next? | Flowchart or sequence | Flowchart gives role color; sequence gives strict time order. |
| How does a change move from branch to cluster? | Flowchart | Shows branch, PR, CI, Git state, ArgoCD, and runtime result. |
| Which environment state is allowed next? | State | Shows gates, waiting states, and recovery loops. |
| Who owns policy, repo settings, environments, and evidence? | ER | Shows durable records and ownership relationships. |
| Which role can approve or override? | Class or flowchart | Class shows capabilities; flowchart shows decisions. |
| Is delivery getting healthier? | XY chart | Shows deployment count, failed syncs, lead time, MTTR, or incident trend. |