282 字
1 分钟
Markdown Mermaid 示例
Markdown + Mermaid 完整指南
本文演示如何在 Markdown 中使用 Mermaid 绘制多种常见图表，包括流程图、时序图、甘特图、类图、状态图与饼图。
流程图示例
流程图非常适合表达流程与算法步骤。
graph TD
A[开始] --> B{条件判断}
B -->|是| C[处理步骤 1]
B -->|否| D[处理步骤 2]
C --> E[子流程]
D --> E
subgraph E [子流程详情]
E1[子步骤 1] --> E2[子步骤 2]
E2 --> E3[子步骤 3]
end
E --> F{另一个判断}
F -->|选项 1| G[结果 1]
F -->|选项 2| H[结果 2]
F -->|选项 3| I[结果 3]
G --> J[结束]
H --> J
I --> J
时序图示例
时序图用于展示对象在时间维度上的交互关系。
sequenceDiagram
participant User as 用户
participant WebApp as 前端应用
participant Server as 服务端
participant Database as 数据库
User->>WebApp: 提交登录请求
WebApp->>Server: 发送认证请求
Server->>Database: 查询用户凭据
Database-->>Server: 返回用户数据
Server-->>WebApp: 返回认证结果
alt 认证成功
WebApp->>User: 展示欢迎页面
WebApp->>Server: 请求用户数据
Server->>Database: 获取用户偏好
Database-->>Server: 返回偏好数据
Server-->>WebApp: 返回用户数据
WebApp->>User: 加载个性化界面
else 认证失败
WebApp->>User: 展示错误信息
WebApp->>User: 提示重新输入
end
甘特图示例
甘特图适合展示项目进度与时间安排。
gantt
title 网站开发项目时间线
dateFormat YYYY-MM-DD
axisFormat %m/%d
section 设计阶段
需求分析 :a1, 2023-10-01, 7d
UI 设计 :a2, after a1, 10d
原型制作 :a3, after a2, 5d
section 开发阶段
前端开发 :b1, 2023-10-20, 15d
后端开发 :b2, after a2, 18d
数据库设计 :b3, after a1, 12d
section 测试阶段
单元测试 :c1, after b1, 8d
集成测试 :c2, after b2, 10d
用户验收测试 :c3, after c2, 7d
section 发布阶段
生产部署 :d1, after c3, 3d
上线 :milestone, after d1, 0d
类图示例
类图可展示系统的静态结构：类、属性、方法及关系。
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
状态图示例
状态图用于描述对象生命周期中的状态变化。
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 title 网站流量来源分析
"搜索引擎" : 45.6
"直接访问" : 30.1
"社交媒体" : 15.3
"外部引荐" : 6.4
"其他来源" : 2.6
总结
Mermaid 能够让你在 Markdown 中高效创建可视化图表。只需在代码块中指定 mermaid，并使用简洁语法描述图形，即可自动渲染为清晰的图表。
建议在技术博客与项目文档中使用 Mermaid，它能显著提升内容的可读性与专业度。
分享
如果这篇文章对你有帮助，欢迎分享给更多人！
Markdown Mermaid 示例
https://ablog.ch0co1ate.top/posts/markdown-mermaid/ 部分信息可能已经过时