用Mermaid画流程图、序列图、类图、甘特图

Mermaid简介

Mermaid 是一种基于文本的图表定义语言,它允许开发者使用文本和代码的形式来创建图表。这种语言的设计初衷是为了方便版本控制和多人协作,同时简化图表的维护和更新过程。

Mermaid的使用场景

Mermaid可以支持markdown格式,所有很多时候修改是比较方便的,所有有很多方便的地方,主要有以下使用场景

1、版本控制集成,由于图表以文本形式存在,它们可以无缝地与代码一起进行版本控制。

2、多图表支持,支持多种类型的图表,包括流程图、序列图、甘特图、类图、状态图和实体关系图等。

3、自动布局、Mermaid 提供了自动布局功能,可以减少手动调整图表布局的工作量。

4、多种输出格式、可以生成多种格式的图像,如 SVG、PNG 和 PDF,方便在不同场景下使用。

Mermaid实例展示

很多人可能觉得Mermaid可能挺难的,这网易难倒是不难,主要在于语法比较多,真的使用的时候可能需要不停的查找相关信息。Mermaid 支持多种图表类型,每种类型都有其特定的语法。以下是一些常见图表类型的 Mermaid 语法示例,更详细的语法可以上官方网站去了解,这里只是展示一些图表,方便大家观看。

流程图 (Flowchart)
Yes
No
开始
处理
结果
成功
失败

这个流程图展示了一个简单的决策过程,从开始到处理,然后根据结果是成功还是失败,分别导向不同的结果。

序列图 (Sequence Diagram)
Alice Bob Hello Bob, how are you? I am good thanks! Alice Bob

序列图展示了两个参与者之间的交互过程,例如 Alice 和 Bob 之间的对话。

甘特图 (Gantt Diagram)
2023-04-01 2023-04-03 2023-04-05 2023-04-07 2023-04-09 2023-04-11 2023-04-13 2023-04-15 2023-04-17 2023-04-19 2023-04-21 需求分析 系统设计 编码 测试 设计 开发 项目开发时间线

甘特图用于展示项目的时间线和各个阶段的持续时间,非常适合项目管理。

类图 (Class Diagram)
Inheritance
Composition
Association
Class01
Class02
Class03
Class04
Class05
Class06

类图用于展示不同类之间的关系,如继承、组合和关联。

状态图 (State Diagram)
State1
State2
State3

状态图展示了对象可能处于的不同状态以及状态之间的转换。

实体关系图 (Entity-Relationship Diagram)
CUSTOMER ORDER LINE-ITEM DELIVERY-ADDRESS places contains uses

实体关系图用于展示不同实体之间的关系,常用于数据库设计。

结语

我也是最近在接触到了这个Mermaid,提供了一个强大而灵活的方式来创建图表,特别适合于需要频繁更新图表内容的技术文档和软件开发项目。总的来说这个Mermaid有一定的学习成本,因为有相关大量的语法需要学习,用不用主要看自己吧,了解一些总是百利而无一害的,你说是吧!

左手编程,右手年华。大家好,我是一点,关注我,带你走入编程的世界。

公众号:一点sir,关注领取编程资料

### 在 VSCode 中使用 Mermaid 绘制流程图 #### 安装插件 为了能够在 VSCode 中利用 Mermaid 绘制表,需先安装合适的扩展工具。推荐安装名为“Markdown Preview Mermaid Support”的插件来增强 Markdown 文件内的形展示能力[^1]。 如果遇到该插件无法满足需求的情况,则可尝试替代方案——即安装另一个叫做“Mermaid Editor”的插件,它对于某些特定的语法有更好的兼容性,比如支持圆角样式等更复杂的表达形式[^3]。 #### 创建并编辑 Markdown 文件 完成上述操作之后,在 VSCode 内新建一个 `.md` 后缀名的文档(例如 `test.md`),接着就可以在这个文件里编写遵循 Mermaid 语法规则的内容了。以下是创建简单流程图的例子: ```mermaid graph LR; A--->B; A--->C; B--->D; C--->D; ``` 这段代码定义了一个从左至右布局(`LR`) 的有向,其中包含了四个节点 (A, B, C 和 D),并通过箭头指明它们之间的关系。 #### 基本语法介绍 当构建更加复杂或定制化的表时,了解一些基础的 Mermaid 语法会很有帮助。这里列举了几种常见的元素及其书写方式: - **方向设定**: 可以为整个表指定整体的方向,如上下 (`TB`, Top to Bottom) 或左右 (`LR`, Left to Right)[^4]。 - **节点形状**: - 圆形: 使用双括号 `((...))` - 方形/默认: 单方括号 `[...]` 或者直接写文本 - 圆角矩形: `(...)` - 菱形: `{...}` - **连接线型** - 普通直线 `-` - 实心箭头 `-->` - 虚线 `-.->` - 加粗实线 `==>` 此外还可以在连线中间加入描述性的文字说明,格式如下所示:`--| 文字 |-->`。 通过以上步骤和指导原则,便可以在 VSCode 环境下顺利地运用 Mermaid 来制作各种型的表了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程序员一点

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值