Complete Guide to Markdown with Mermaid Diagrams
This article demonstrates how to create various complex diagrams using Mermaid in Markdown documents, including flowcharts, sequence diagrams, Gantt charts, class diagrams, and state diagrams.
中文翻译：本文演示如何在 Markdown 中使用 Mermaid 绘制常见图表，包括流程图、时序图、甘特图、类图、状态图和饼图。
Flowchart Example
Flowcharts are excellent for representing processes or algorithm steps.
中文翻译：流程图适合展示流程步骤和算法分支结构。
graph TD
A[Start] --> B{Condition Check}
B -->|Yes| C[Process Step 1]
B -->|No| D[Process Step 2]
C --> E[Subprocess]
D --> E
subgraph E [Subprocess Details]
E1[Substep 1] --> E2[Substep 2]
E2 --> E3[Substep 3]
end
E --> F{Another Decision}
F -->|Option 1| G[Result 1]
F -->|Option 2| H[Result 2]
F -->|Option 3| I[Result 3]
G --> J[End]
H --> J
I --> J
Sequence Diagram Example
Sequence diagrams show interactions between objects over time.
中文翻译：时序图用于表达多个对象在时间线上的交互顺序。
sequenceDiagram
participant User
participant WebApp
participant Server
participant Database
User->>WebApp: Submit Login Request
WebApp->>Server: Send Auth Request
Server->>Database: Query User Credentials
Database-->>Server: Return User Data
Server-->>WebApp: Return Auth Result
alt Auth Successful
WebApp->>User: Show Welcome Page
WebApp->>Server: Request User Data
Server->>Database: Get User Preferences
Database-->>Server: Return Preferences
Server-->>WebApp: Return User Data
WebApp->>User: Load Personalized Interface
else Auth Failed
WebApp->>User: Show Error Message
WebApp->>User: Prompt Re-entry
end
Gantt Chart Example
Gantt charts are perfect for displaying project schedules and timelines.
中文翻译：甘特图适合展示项目排期、任务持续时间和里程碑节点。
gantt
title Website Development Project Timeline
dateFormat YYYY-MM-DD
axisFormat %m/%d
section Design Phase
Requirements Analysis :a1, 2023-10-01, 7d
UI Design :a2, after a1, 10d
Prototype Creation :a3, after a2, 5d
section Development Phase
Frontend Development :b1, 2023-10-20, 15d
Backend Development :b2, after a2, 18d
Database Design :b3, after a1, 12d
section Testing Phase
Unit Testing :c1, after b1, 8d
Integration Testing :c2, after b2, 10d
User Acceptance Testing :c3, after c2, 7d
section Deployment
Production Deployment :d1, after c3, 3d
Launch :milestone, after d1, 0d
Class Diagram Example
Class diagrams show the static structure of a system, including classes, attributes, methods, and their relationships.
中文翻译：类图用于描述系统的静态结构，包括类、属性、方法及其关系。
classDiagram
class User {
+String username
+String password
+String email
+Boolean active
+login()
+logout()
+updateProfile()
}
class Article {
+String title
+String content
+Date publishDate
+Boolean published
+publish()
+edit()
+delete()
}
class Comment {
+String content
+Date commentDate
+addComment()
+deleteComment()
}
class Category {
+String name
+String description
+addArticle()
+removeArticle()
}
User "1" -- "*" Article : writes
User "1" -- "*" Comment : posts
Article "1" -- "*" Comment : has
Article "1" -- "*" Category : belongs to
State Diagram Example
State diagrams show the sequence of states an object goes through during its life cycle.
中文翻译：状态图用于描述对象在生命周期中的状态变化过程。
stateDiagram-v2
[*] --> Draft
Draft --> UnderReview : submit
UnderReview --> Draft : reject
UnderReview --> Approved : approve
Approved --> Published : publish
Published --> Archived : archive
Published --> Draft : retract
state Published {
[*] --> Active
Active --> Hidden : temporarily hide
Hidden --> Active : restore
Active --> [*]
Hidden --> [*]
}
Archived --> [*]
Pie Chart Example
Pie charts are ideal for displaying proportions and percentage data.
中文翻译：饼图适合展示占比和百分比类数据。
pie title Website Traffic Sources Analysis
"Search Engines" : 45.6
"Direct Access" : 30.1
"Social Media" : 15.3
"Referral Links" : 6.4
"Other Sources" : 2.6
Conclusion
Mermaid is a powerful tool for creating various types of diagrams in Markdown documents. This article demonstrated how to use flowcharts, sequence diagrams, Gantt charts, class diagrams, state diagrams, and pie charts. These diagrams can help you express complex concepts, processes, and data structures more clearly.
To use Mermaid, simply specify the mermaid language in a code block and describe the diagram using concise text syntax. Mermaid will automatically convert these descriptions into beautiful visual diagrams.
Try using Mermaid diagrams in your next technical blog post or project documentation - they will make your content more professional and easier to understand!
中文翻译：Mermaid 能让技术文档与博客中的结构化信息更直观。你只需在代码块中使用 mermaid 语法，即可自动生成图表。建议在后续文章中尝试使用，以提升可读性与专业度。
