Mermaid Syntax Reference
Quick reference for writing Mermaid diagrams in ChapterWise codex files. For the complete Mermaid documentation, see mermaid.js.org.
Flowchart
The most common diagram type. Supports directional flows and decision trees.
Directions: TB (top-bottom), BT, LR (left-right), RL
content:
- key: flow
type: diagram
value: |
graph LR
A[Rectangle] --> B(Rounded)
B --> C{Diamond}
C -->|Yes| D[Result 1]
C -->|No| E[Result 2]
Node shapes: [text] rectangle, (text) rounded, {text} diamond, ([text]) stadium, [[text]] subroutine, [(text)] cylinder, ((text)) circle, >text] asymmetric
Arrow types: --> solid, -.-> dotted, ==> thick, --text--> labeled
Sequence Diagram
Show interactions between actors over time.
content:
- key: api-flow
type: diagram
value: |
sequenceDiagram
participant U as User
participant S as Server
participant D as Database
U->>S: Upload manuscript
S->>D: Store file
D-->>S: Confirmation
S-->>U: Success response
Arrow types: ->> solid, -->> dashed, -x cross, -) open
Entity Relationship Diagram
Model database schemas and data relationships.
content:
- key: schema
type: diagram
value: |
erDiagram
USER ||--o{ MANUSCRIPT : uploads
MANUSCRIPT ||--|{ CHAPTER : contains
CHAPTER ||--o{ ANALYSIS : has
USER ||--o{ PROJECT : owns
Cardinality: || exactly one, o| zero or one, |{ one or more, o{ zero or more
Gantt Chart
Project timelines and scheduling.
content:
- key: schedule
type: diagram
width: 1/1
value: |
gantt
title Production Schedule
dateFormat YYYY-MM-DD
section Writing
First Draft :a1, 2026-01-01, 60d
Revisions :a2, after a1, 30d
section Editing
Copy Edit :b1, after a2, 14d
Proofreading :b2, after b1, 7d
section Publishing
Layout :c1, after b2, 14d
Print :c2, after c1, 21d
Pie Chart
Show proportional data.
content:
- key: genre-split
type: diagram
width: 1/2
value: |
pie title Genre Distribution
"Fantasy" : 35
"Sci-Fi" : 25
"Mystery" : 20
"Romance" : 15
"Other" : 5
Mindmap
Hierarchical idea maps.
content:
- key: themes
type: diagram
value: |
mindmap
root((Story Themes))
Power
Corruption
Responsibility
Identity
Self-discovery
Transformation
Connection
Family
Community
State Diagram
Model state machines and transitions.
content:
- key: manuscript-states
type: diagram
value: |
stateDiagram-v2
[*] --> Draft
Draft --> Review
Review --> Revision
Revision --> Review
Review --> Approved
Approved --> Published
Published --> [*]
Class Diagram
Object-oriented relationships.
content:
- key: classes
type: diagram
value: |
classDiagram
class Character {
+String name
+Int age
+speak()
+act()
}
class Hero {
+String quest
+fight()
}
class Villain {
+String motive
+scheme()
}
Character <|-- Hero
Character <|-- Villain
Git Graph
Branch and commit visualization.
content:
- key: branches
type: diagram
value: |
gitGraph
commit id: "Initial"
branch develop
commit id: "Feature A"
commit id: "Feature B"
checkout main
merge develop id: "Release 1.0"
commit id: "Hotfix"
Timeline
Chronological events.
content:
- key: history
type: diagram
value: |
timeline
title Story Timeline
1900 : Kingdom founded
1950 : The Great War
1975 : Peace treaty signed
2000 : New era begins
2025 : Present day
User Journey
Experience flows with satisfaction scores.
content:
- key: reader-journey
type: diagram
value: |
journey
title Reader Experience
section Opening
Hook: 5: Reader
World Building: 3: Reader
section Middle
Plot Twist: 5: Reader
Character Death: 2: Reader
section Climax
Final Battle: 5: Reader
Resolution: 4: Reader
Width Options
Control diagram sizing in the layout:
| Width | Description | Best For |
|---|---|---|
1/1 |
Full width | Complex diagrams, Gantt charts, sequences |
1/2 |
Half width | Pie charts, simple flows, side-by-side |
1/3 |
Third width | Small pie charts, simple states |
content:
- key: chart-a
type: diagram
width: 1/2
value: |
pie title Budget
"Dev" : 60
"Design" : 25
"QA" : 15
- key: chart-b
type: diagram
width: 1/2
value: |
pie title Timeline
"Done" : 40
"In Progress" : 35
"Planned" : 25