Mermaid Syntax Reference

Field	Value
Type	Skill Resource
Source	~/.copilot/skills/technical-writing/references/mermaid/syntax-reference.md
Description	Not specified

Source Content

Mermaid Syntax Reference

Flowchart

flowchart TD
    PR["Open pull request"] --> Checks{"Checks pass?"}
    Checks -->|Yes| Merge["Merge to main"]
    Checks -->|No| Fix["Fix branch"]
    Fix --> PR

• Direction options: TD, LR, BT, RL.
• Use subgraph source_control[Source control], not subgraph "Source control", in linted repo docs.
• Do not put a colon after a subgraph label.
• Nodes are actions or states, not actors. Imply the actor with a What people do subgraph or an edge label (-->|reviewer approves|); reserve A((Label)) circles for true start/end points.

Node Shapes

A[Rectangle]         A(Rounded)          A([Stadium/pill])
A[[Subroutine]]      A[(Cylinder/DB)]    A((Circle))
A{Diamond/decision}  A{{Hexagon}}        A[/Parallelogram/]
A>Asymmetric]

Arrows

Type	Syntax	Use
Solid arrow	A --> B	Default flow
Solid link	A --- B	Relationship
Labeled arrow	A -->|label| B	Annotated flow
Dashed arrow	A -.-> B	Optional or async
Thick arrow	A ==> B	Critical path

Subgraph

flowchart LR
    subgraph local[Local workspace]
        Push["git push"]
    end
    subgraph github[GitHub]
        PR["Open PR"] --> Merge["Squash merge"]
    end
    Push -->|reviewer approves| PR

• subgraph id[Display label] — no colon after label, no bare quoted string.
• Subgraph IDs follow the same safe-characters rule as node IDs: [A-Za-z0-9_].
• direction LR inside a subgraph overrides layout for that group only.
• Style node lines work inside subgraphs without any change in syntax.

Sequence

sequenceDiagram
    actor Dev as Developer
    participant GH as GitHub
    participant CI as CI pipeline
    Dev->>GH: Open PR
    GH->>CI: Run checks
    CI-->>GH: Evidence attached
    alt Checks pass
        GH-->>Dev: Ready to review
    else Checks fail
        GH-->>Dev: Fix required
    end

• Use actor for people and participant for systems.
• Keep participants to 4-7 columns.
• Use alt / else / end for conditional branches.
• Use loop Label / end for repeated steps (e.g., retry loops).
• Use par / and / end for parallel flows.
• Use note right of Participant: text or note over A,B: text for callouts.

Arrow types in sequence diagrams:

Syntax	Meaning
A->>B: msg	Solid open arrowhead (async message)
A-->>B: msg	Dashed open arrowhead (reply)
A->B: msg	Solid no arrowhead
A-xB: msg	Solid cross (lost / dropped)

State

stateDiagram-v2
    [*] --> Idle
    Idle --> Running : start
    Running --> Idle : stop

• Use [*] for start/end.
• Use state diagrams for lifecycle, allowed transitions, and recovery loops.

ER

erDiagram
    TEAM ||--o{ REPOSITORY : "owns"
    REPOSITORY ||--o{ DEPLOYMENT : "records"

• Use ER diagrams for durable records, not workflows.
• Quote relationship labels that contain spaces.

Class

classDiagram
    class Reviewer {
        +approvePR()
        +requestChanges()
    }
    Reviewer <|-- ReleaseManager

• Use class diagrams for responsibilities and capabilities.
• Parent is on the left of <|--.

XY

xychart-beta
    title "Delivery health"
    x-axis "Week" [W1, W2, W3, W4]
    y-axis "Count" 0 --> 20
    bar [6, 8, 11, 13]
    line [4, 3, 2, 1]

• Use for trend, count, rate, or ordered comparison.
• Always label axes and units.

Gantt And Pie

Use gantt for timelines and pie for proportions. These may not be supported inside InteractiveMermaid; check the target renderer before using them.