Pixiv - KiraraShss
Markdown Mermaid 图表
908 từ
5 phút
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 : 写作
User "1" -- "*" Comment : 发表
Article "1" -- "*" Comment : 拥有
Article "1" -- "*" Category : 属于
状态图示例
状态图显示对象在其生命周期中经历的状态序列。
stateDiagram-v2
[*] --> 草稿
草稿 --> 审核中 : 提交
审核中 --> 草稿 : 拒绝
审核中 --> 已批准 : 批准
已批准 --> 已发布 : 发布
已发布 --> 已归档 : 归档
已发布 --> 草稿 : 撤回
state 已发布 {
[*] --> 活跃
活跃 --> 隐藏 : 临时隐藏
隐藏 --> 活跃 : 恢复
活跃 --> [*]
隐藏 --> [*]
}
已归档 --> [*]
饼图示例
饼图非常适合显示比例和百分比数据。
pie title 网站流量来源分析
"搜索引擎" : 45.6
"直接访问" : 30.1
"社交媒体" : 15.3
"推荐链接" : 6.4
"其他来源" : 2.6
总结
Mermaid 是在 Markdown 文档中创建各种类型图表的强大工具。本文演示了如何使用流程图、时序图、甘特图、类图、状态图和饼图。这些图表可以帮助您更清晰地表达复杂的概念、流程和数据结构。
要使用 Mermaid,只需在代码块中指定 mermaid 语言,并使用简洁的文本语法描述图表。Mermaid 会自动将这些描述转换为美观的可视化图表。
尝试在您的下一篇技术博客文章或项目文档中使用 Mermaid 图表 - 它们将使您的内容更加专业且更易理解!
Ủng hộ & Chia sẻ
Nếu bài viết này giúp ích cho bạn, hãy chia sẻ hoặc ủng hộ nhé!
Markdown Mermaid 图表
https://firefly.cuteleaf.cn/posts/markdown-mermaid/ Cập nhật lần cuối vào 1970-01-01,20518 ngày trước
Một số nội dung có thể đã cũ
Bài viết liên quan Thông minh
1
Markdown 扩展功能
文章示例 了解 Firefly 中的 Markdown 功能
2
Firefly 一款清新美观的 Astro 博客主题模板
文章示例 Firefly 是一款基于 Astro 框架和 Fuwari 模板开发的清新美观且现代化个人博客主题模板,专为技术爱好者和内容创作者设计。该主题融合了现代 Web 技术栈,提供了丰富的功能模块和高度可定制的界面,让您能够轻松打造出专业且美观的个人博客网站。
3
Firefly 简单使用指南
博客指南 如何使用 Firefly 博客模板。
4
Firefly 代码块示例
文章示例 在Firefly中使用表达性代码的代码块在 Markdown 中的外观。
5
Ví dụ bài viết định dạng MDX
Bài viết mẫu Đây là một bài viết mẫu định dạng MDX, minh họa cách sử dụng JSX trong Markdown.
Bài viết ngẫu nhiên Ngẫu nhiên