Mermaid Diagrams
Create beautiful diagrams directly in Markdown using Mermaid.
Basic Syntax
Use a code block with mermaid language:
```mermaid
graph TD
A[Start] --> B[End]
```
Flowchart
Basic Flow
🔄 正在渲染 Mermaid 图表...
graph TD
A[Start] --> B{Decision}
B -->|Yes| C[Do Something]
B -->|No| D[Do Something Else]
C --> E[End]
D --> E
Left to Right
🔄 正在渲染 Mermaid 图表...
graph LR
A[Input] --> B[Process]
B --> C[Output]
Node Shapes
🔄 正在渲染 Mermaid 图表...
graph TD
A[Rectangle]
B(Rounded)
C([Stadium])
D[[Subroutine]]
E[(Database)]
F((Circle))
G{Diamond}
H{{Hexagon}}
Sequence Diagram
🔄 正在渲染 Mermaid 图表...
sequenceDiagram
participant User
participant Browser
participant Server
participant Database
User->>Browser: Enter URL
Browser->>Server: HTTP Request
Server->>Database: Query Data
Database-->>Server: Return Data
Server-->>Browser: HTTP Response
Browser-->>User: Display Page
Class Diagram
🔄 正在渲染 Mermaid 图表...
classDiagram
class Animal {
+String name
+int age
+makeSound()
}
class Dog {
+String breed
+bark()
}
class Cat {
+String color
+meow()
}
Animal <|-- Dog
Animal <|-- Cat
State Diagram
🔄 正在渲染 Mermaid 图表...
stateDiagram-v2
[*] --> Draft
Draft --> Review
Review --> Draft: Changes needed
Review --> Published
Published --> Archived
Archived --> [*]
Gantt Chart
🔄 正在渲染 Mermaid 图表...
gantt
title Project Timeline
dateFormat YYYY-MM-DD
section Planning
Requirements :a1, 2025-01-01, 7d
Design :a2, after a1, 5d
section Development
Backend :b1, after a2, 14d
Frontend :b2, after a2, 14d
section Testing
Testing :c1, after b1, 7d
Deployment :c2, after c1, 3d
Pie Chart
🔄 正在渲染 Mermaid 图表...
pie title Language Usage
"JavaScript" : 45
"TypeScript" : 30
"Python" : 15
"Other" : 10
Entity Relationship
🔄 正在渲染 Mermaid 图表...
erDiagram
USER ||--o{ POST : writes
USER ||--o{ COMMENT : writes
POST ||--o{ COMMENT : has
POST }|--|| CATEGORY : belongs_to
Git Graph
🔄 正在渲染 Mermaid 图表...
gitGraph
commit id: "Initial"
branch develop
checkout develop
commit id: "Feature A"
commit id: "Feature B"
checkout main
merge develop
commit id: "Release"
Styling
Custom Colors
🔄 正在渲染 Mermaid 图表...
graph TD
A[Start]:::green --> B{Check}:::yellow
B -->|Pass| C[Success]:::green
B -->|Fail| D[Error]:::red
classDef green fill:#90EE90
classDef yellow fill:#FFE4B5
classDef red fill:#FFB6C1
Tips
Best Practices
- Keep it simple - Complex diagrams become hard to read
- Use meaningful labels - Clear text improves understanding
- Choose the right type - Match diagram to your content
- Test rendering - Preview before publishing
Next: LaTeX Math for mathematical formulas.