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

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

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

Mermaid简介

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

Mermaid的使用场景

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

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

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

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

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

Mermaid实例展示

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

流程图 (Flowchart)

Yes

No

开始

处理

结果

成功

失败

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

序列图 (Sequence Diagram)

BobAliceBobAliceHello Bob, how are you?I am good thanks!

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

甘特图 (Gantt Diagram)

2023-04-012023-04-032023-04-052023-04-072023-04-092023-04-112023-04-132023-04-152023-04-172023-04-192023-04-21需求分析 系统设计 编码 测试 设计开发项目开发时间线

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

类图 (Class Diagram)

Inheritance

Composition

Association

Class01

Class02

Class03

Class04

Class05

Class06

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

状态图 (State Diagram)

State1

State2

State3

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

实体关系图 (Entity-Relationship Diagram)

CUSTOMERORDERLINE-ITEMDELIVERY-ADDRESSplacescontainsuses

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

结语

我也是最近在接触到了这个Mermaid,提供了一个强大而灵活的方式来创建图表,特别适合于需要频繁更新图表内容的技术文档和软件开发项目。总的来说这个Mermaid有一定的学习成本,因为有相关大量的语法需要学习,用不用主要看自己吧,了解一些总是百利而无一害的,你说是吧!不过需要注意的是,有些平台是不支持这个mermaid语法的,就是markdown格式无法解析出图片来,真的在某些平台发文章的时候,可能需要转成图片来。

posted on   一点sir  阅读(574)  评论(0编辑  收藏  举报

相关博文:
阅读排行:
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了

导航

点击右上角即可分享
微信分享提示