mobile wallpaper 1mobile wallpaper 2mobile wallpaper 3mobile wallpaper 4mobile wallpaper 5mobile wallpaper 6
384 字
1 分钟
Markdown 图表
2023-10-01
统计加载中...

Mermaid 图表 Markdown 完整指南#

本文演示了如何在 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 用户 participant 网页应用 participant 服务器 participant 数据库 用户->>网页应用: 提交登录请求 网页应用->>服务器: 发送认证请求 服务器->>数据库: 查询用户凭证 数据库-->>服务器: 返回用户数据 服务器-->>网页应用: 返回认证结果 alt 认证成功 网页应用->>用户: 显示欢迎页面 网页应用->>服务器: 请求用户数据 服务器->>数据库: 获取用户偏好 数据库-->>服务器: 返回偏好设置 服务器-->>网页应用: 返回用户数据 网页应用->>用户: 加载个性化界面 else 认证失败 网页应用->>用户: 显示错误信息 网页应用->>用户: 提示重新输入 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 用户 { +String 用户名 +String 密码 +String 邮箱 +Boolean 是否激活 +登录() +登出() +更新资料() } class 文章 { +String 标题 +String 内容 +Date 发布日期 +Boolean 是否发布 +发布() +编辑() +删除() } class 评论 { +String 内容 +Date 评论日期 +添加评论() +删除评论() } class 分类 { +String 名称 +String 描述 +添加文章() +移除文章() } 用户 "1" -- "*" 文章 : 撰写 用户 "1" -- "*" 评论 : 发表 文章 "1" -- "*" 评论 : 拥有 文章 "1" -- "*" 分类 : 属于

状态图示例#

状态图展示了对象在其生命周期中所经历的状态序列。

stateDiagram-v2 [*] --> 草稿 草稿 --> 审核中 : 提交 审核中 --> 草稿 : 驳回 审核中 --> 已通过 : 批准 已通过 --> 已发布 : 发布 已发布 --> 已归档 : 归档 已发布 --> 草稿 : 撤回 state 已发布 { [*] --> 公开 公开 --> 隐藏 : 临时隐藏 隐藏 --> 公开 : 恢复 公开 --> [*] 隐藏 --> [*] } 已归档 --> [*]

饼图示例#

饼图非常适合展示比例和百分比数据。

pie title 网站流量来源分析 "搜索引擎" : 45.6 "直接访问" : 30.1 "社交媒体" : 15.3 "外链引流" : 6.4 "其他来源" : 2.6

总结#

Mermaid 是在 Markdown 文档中创建各种类型图表的强大工具。本文演示了如何使用流程图、时序图、甘特图、类图、状态图和饼图。这些图表可以帮助你更清晰地表达复杂概念、流程和数据结构。

使用 Mermaid 只需在代码块中指定 mermaid 语言,然后用简洁的文本语法描述图表即可。Mermaid 会自动将这些描述转换为美观的可视化图表。

尝试在你的下一篇技术博客文章或项目文档中使用 Mermaid 图表吧——它们会让你的内容更专业、更易于理解!

分享

如果这篇文章对你有帮助,欢迎分享给更多人!

Markdown 图表
https://fish.sf0.top/posts/markdown-mermaid/
作者
Fishing_MZ
发布于
2023-10-01
许可协议
CC BY-NC-SA 4.0

部分信息可能已经过时

封面
Sample Song
Sample Artist
封面
Sample Song
Sample Artist
0:00 / 0:00