Diagram Types — Complete Syntax Reference
Load this file when you need detailed syntax for a specific diagram type beyond what the quick examples in SKILL.md provide.Table of Contents
- Flowchart (line ~20)
- Sequence Diagram (line ~120)
- Class Diagram (line ~220)
- State Diagram (line ~310)
- ERD (line ~380)
- Gantt Chart (line ~440)
- Pie Chart (line ~490)
- Mindmap (line ~520)
- Timeline (line ~560)
- Git Graph (line ~600)
- Sankey (line ~650)
- XY Chart (line ~690)
- Quadrant Chart (line ~730)
- Block Diagram (line ~770)
- User Journey (line ~820)
- Requirement Diagram (line ~860)
- Packet Diagram (line ~900)
- Kanban (line ~930)
1. Flowchart
Keyword:flowchart or graph
Directions: TD (top-down), LR (left-right), BT, RL
Node Shapes
Edge Types
Subgraphs
Styling
Click Events
2. Sequence Diagram
Keyword:sequenceDiagram
Participant Types
Message Types
Activation Boxes
Control Flow
Notes
Numbering
Boxes (Grouping)
3. Class Diagram
Keyword:classDiagram
Class Definition
Visibility modifiers:+ public, - private, # protected, ~ package
Relationships
Multiplicity
Annotations
Namespace
4. State Diagram
Keyword:stateDiagram-v2
Basic Syntax
Composite States
Forks and Joins
Choice
Notes
5. Entity Relationship Diagram
Keyword:erDiagram
Relationship Types
Cardinality Symbols
| Symbol | Meaning |
|---|---|
|| | Exactly one |
o| | Zero or one |
}o | Zero or more |
}| | One or more |
Attribute Types
Key markers:PK (primary key), FK (foreign key), UK (unique key)
6. Gantt Chart
Keyword:gantt
Task states: done, active, crit (critical path)
Duration: 7d (days), 5h (hours), or specific end date
Dependencies: after taskId or comma-separated after task1 task2
7. Pie Chart
Keyword:pie
showData is optional — adds percentages to labels.
8. Mindmap
Keyword:mindmap
Node shapes:
((Circle))— root/emphasis(Rounded)— default[Square]— structured)Cloud(— cloud shape))Bang((— explosion/emphasis
9. Timeline
Keyword:timeline
10. Git Graph
Keyword:gitGraph
Commit types: NORMAL, REVERSE, HIGHLIGHT
Options: branch order: 0 to control branch position
11. Sankey Diagram
Keyword:sankey-beta
Format: source,target,value — one per line, comma-separated.
12. XY Chart
Keyword:xychart-beta
Supports bar and line series. Multiple series can be combined.
13. Quadrant Chart
Keyword:quadrantChart
Coordinates are [x, y] with values between 0 and 1.
14. Block Diagram
Keyword:block-beta
Use columns N to define grid. space:N for empty cells.
Blocks span cells with :N suffix.
15. User Journey
Keyword:journey
Format: Task name: satisfaction(1-5): actor1, actor2
16. Requirement Diagram
Keyword:requirementDiagram
Relationship types: contains, copies, derives, satisfies, verifies,
refines, traces
17. Packet Diagram
Keyword:packet-beta
Format: start-end: "Label" — bit ranges for protocol headers.
18. Kanban
Keyword:kanban
Global Configuration
Any diagram can be configured with frontmatter: Themes:default, forest, dark, neutral, base
Looks: classic, handDrawn
Layouts: dagre (default), elk (advanced, needs integration)
Directives (Inline Config)
IMPORTANT: The init directive MUST be on the very first line, before any diagram type declaration.'lineColor': '#94a3b8' to replace the default harsh black lines with softer slate-colored lines. This single change dramatically improves diagram aesthetics.