Test#004
2026/11/02 1:04
2026/11/02 1:04
Mermaid Test Suite
1. Flowchart Basics
Node Shapes
graph TD
A[Rectangle] --> B(Rounded)
B --> C([Stadium])
C --> D[[Subroutine]]
D --> E[(Database)]
E --> F((Circle))
F --> G>Asymmetric]
G --> H{Rhombus}
H --> I{{Hexagon}}
I --> J[/Parallelogram/]
J --> K[/Trapezoid\]
Arrow Types
graph LR
A --> B
C --- D
E -.-> F
G ==> H
I -- label --> J
K -->|label| L
M --o N
O --x P
Q <--> R
2. Flowchart Advanced
Subgraphs
graph TD
subgraph Frontend
UI[Browser] --> API[API Client]
end
subgraph Backend
S[Server] --> DB[(Database)]
S --> C[(Cache)]
end
API -->|HTTP| S
Styling, Branches & Loops
graph TD
Start([Start]) --> Init[i = 0]
Init --> Cond{i < n ?}
Cond -->|Yes| Body[Process item i]
Body --> Inc[i = i + 1]
Inc --> Cond
Cond -->|No| End([End])
classDef term fill:#d4edda,stroke:#28a745,stroke-width:2px
classDef decision fill:#fff3cd,stroke:#ffc107
class Start,End term
class Cond decision
style Body fill:#cce5ff,stroke:#004085,stroke-dasharray: 5 5
3. Sequence Diagram
sequenceDiagram
autonumber
actor User
participant Client
participant Server
participant DB as Database
User->>Client: Click login
Client->>+Server: POST /login
Server->>+DB: SELECT user
DB-->>-Server: user record
alt valid password
Server-->>Client: 200 OK (token)
else invalid password
Server-->>Client: 401 Unauthorized
end
deactivate Server
opt remember me
Client->>Client: Save token
end
loop every 5 min
Client-)Server: Heartbeat (async)
end
Note over Client,Server: Session established
Note right of DB: Read only
4. Class Diagram
classDiagram
class Animal {
<<abstract>>
+String name
#int age
+makeSound()* void
+getAge() int
}
class Dog {
-String breed
+makeSound() void
+fetch() void
}
class Cat {
+makeSound() void
}
class Owner {
+String name
}
class Leg
class Shelter
Animal <|-- Dog
Animal <|-- Cat
Owner "1" --> "0..*" Animal : owns
Dog *-- "4" Leg : composition
Shelter o-- Animal : aggregation
Owner ..> Shelter : dependency
5. State Diagram
stateDiagram-v2
[*] --> Idle
Idle --> Running : start
Running --> Paused : pause
Paused --> Running : resume
Running --> Done : finish
Done --> [*]
state Running {
[*] --> Loading
Loading --> Processing
Processing --> Saving
Saving --> [*]
}
Fork & Join
stateDiagram-v2
state fork_state <<fork>>
state join_state <<join>>
[*] --> fork_state
fork_state --> TaskA
fork_state --> TaskB
TaskA --> join_state
TaskB --> join_state
join_state --> [*]
6. Entity Relationship Diagram
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ ORDER_ITEM : contains
PRODUCT ||--o{ ORDER_ITEM : "is in"
CUSTOMER {
int id PK
string name
string email UK
}
ORDER {
int id PK
int customer_id FK
date created_at
}
ORDER_ITEM {
int order_id FK
int product_id FK
int quantity
}
PRODUCT {
int id PK
string name
float price
}
7. Gantt Chart
gantt
title Project Schedule
dateFormat YYYY-MM-DD
axisFormat %m/%d
section Design
Requirements :done, req, 2026-01-01, 5d
Architecture :done, arch, after req, 4d
section Development
Implementation :active, impl, after arch, 10d
Code Review :crit, rev, after impl, 3d
section Release
Testing : test, after rev, 5d
Release :milestone, rel, after test, 0d
8. Pie Chart
pie showData
title Browser Share
"Chrome" : 65
"Safari" : 18
"Firefox" : 7
"Edge" : 5
"Others" : 5
9. Git Graph
gitGraph
commit id: "init"
commit id: "add README"
branch develop
checkout develop
commit id: "feat: A"
branch feature
checkout feature
commit id: "feat: B"
checkout develop
merge feature
checkout main
merge develop tag: "v1.0.0"
commit id: "hotfix"
10. Mindmap, Timeline & User Journey
Mindmap
mindmap
root((Mathematics))
Algebra
Groups
Rings
Fields
Analysis
Real Analysis
Complex Analysis
Geometry
Euclidean
Differential
Timeline
timeline
title History of Physics
1687 : Newton's Principia
1865 : Maxwell's Equations
1905 : Special Relativity
: Photoelectric Effect
1915 : General Relativity
1926 : Schrödinger Equation
User Journey
journey
title Morning Routine
section Wake up
Turn off alarm: 2: Me
Get out of bed: 1: Me
section Prepare
Make coffee: 5: Me
Read news: 4: Me
section Commute
Take the train: 3: Me, Others
11. Newer Charts
These diagrams require a recent version of Mermaid.
Quadrant Chart
quadrantChart
title Task Priority
x-axis Low Urgency --> High Urgency
y-axis Low Importance --> High Importance
quadrant-1 Do First
quadrant-2 Schedule
quadrant-3 Eliminate
quadrant-4 Delegate
Write paper: [0.8, 0.9]
Check email: [0.7, 0.3]
Read blog: [0.2, 0.2]
Study math: [0.3, 0.8]
XY Chart
xychart-beta
title "Monthly Temperature"
x-axis [Jan, Feb, Mar, Apr, May, Jun]
y-axis "Temperature (C)" 0 --> 30
bar [6, 7, 10, 15, 20, 23]
line [6, 7, 10, 15, 20, 23]
Sankey
sankey-beta
Salary,Rent,80
Salary,Food,40
Salary,Savings,50
Salary,Hobby,30
Hobby,Books,20
Hobby,Games,10
12. Edge Cases
Japanese Labels
graph TD
A[開始] --> B{条件を満たすか}
B -->|はい| C[処理を実行する]
B -->|いいえ| D[エラーを表示する]
C --> E[終了]
D --> E
Special Characters & Markdown Strings
graph TD
A["Quotes: #quot;hello#quot;"] --> B["Brackets: [ ] ( ) { }"]
B --> C["Symbols: < > & #35;"]
C --> D["`**Bold** and _italic_ text`"]
D --> E["`Line 1
Line 2`"]
Theme Directive
%%{init: {'theme': 'dark'}}%%
graph TD
A[Dark Theme] --> B[Node]
B --> C[Node]
KaTeX inside Mermaid
Requires Mermaid v10.9 or later.
graph TD
A["$$x^2 + y^2 = r^2$$"] --> B["$$\int_0^1 x \, dx = \frac{1}{2}$$"]
B --> C["$$e^{i\pi} + 1 = 0$$"]