1009 字

5 分钟

使用Mermaid图表在Markdown中的完整指南

Mermaid Example

2011-11-02

Examples

Markdown

Mermaid

合集标签: Markdown

Media

Content

合集: Markdown 媒体示例系列

翻译提示 (未审阅)

此页面由 AI 翻译生成，可能存在不准确之处。

翻译自: 🇬🇧 English （Deepseek）

查看原文回到译文

使用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 Web应用 participant 服务器 participant 数据库用户->>Web应用: 提交登录请求 Web应用->>服务器: 发送认证请求服务器->>数据库: 查询用户凭证数据库-->>服务器: 返回用户数据服务器-->>Web应用: 返回认证结果 alt 认证成功 Web应用->>用户: 显示欢迎页面 Web应用->>服务器: 请求用户数据服务器->>数据库: 获取用户偏好数据库-->>服务器: 返回偏好设置服务器-->>Web应用: 返回用户数据 Web应用->>用户: 加载个性化界面 else 认证失败 Web应用->>用户: 显示错误消息 Web应用->>用户: 提示重新输入 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图表吧——它们会让您的内容更专业、更易于理解！

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.

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图表在Markdown中的完整指南

/zh-CN/posts/mermaid-example/

作者

MuxBuffer

发布于

2011-11-02

许可协议

CC BY-NC-SA 4.0

AI参与指数 IIIA-0

分类未经AI制作

等级 0

简介完全未使用AI

此页面可能不是最新版本。