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

ops/2024/9/25 21:22:41/

Mermaid简介

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

Mermaid的使用场景

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

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

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

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

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

Mermaid实例展示

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

流程图 (Flowchart)
mermaid"> mermaid-svg-Hqa9Qn3ZeRgXEuoR" width="432.8562927246094" xmlns="http://www.w3.org/2000/svg" height="158" viewbox="0 0 432.8562927246094 158" class="mermaid-svg">
Yes
No
开始
处理
结果
成功
失败

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

序列图 (Sequence Diagram)
mermaid"> mermaid-svg-K5zLu0j2ZMhtrdnv" width="100%" xmlns="http://www.w3.org/2000/svg" height="275" style="max-width: 506px;" viewbox="-50 -10 506 275" class="mermaid-svg"> Alice Bob Hello Bob, how are you? I am good thanks! Alice Bob

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

甘特图 (Gantt Diagram)
mermaid"> mermaid-svg-x5I2EJ5Ee8jT1hV9" width="100%" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 1200 196" height="196" style="max-width: 1200px;" class="mermaid-svg"> 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)
mermaid"> mermaid-svg-y8mhctOQm03T48Dn" width="337.97393798828125" xmlns="http://www.w3.org/2000/svg" height="222" viewbox="0 0 337.97393798828125 222" class="mermaid-svg">
Inheritance
Composition
Association
Class01
Class02
Class03
Class04
Class05
Class06

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

状态图 (State Diagram)
mermaid"> mermaid-svg-mHPjKlnXM4RYEH6b" width="100%" xmlns="http://www.w3.org/2000/svg" class="statediagram mermaid-svg" height="303" style="max-width: 246.5859375px;" viewbox="0 0 140.90625 303">
State1
State2
State3

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

实体关系图 (Entity-Relationship Diagram)
mermaid"> mermaid-svg-4H7FL3qoAkka5ULR" width="100%" xmlns="http://www.w3.org/2000/svg" height="465" style="max-width: 369.662109375px;" viewbox="0 0 369.662109375 465" class="mermaid-svg"> CUSTOMER ORDER LINE-ITEM DELIVERY-ADDRESS places contains uses

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

结语

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

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

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


http://www.ppmy.cn/ops/23626.html

相关文章

STM32 float浮点数转换成四个字节

float浮点数转换成四个字节 在C或C中,联合体(union)是一种特殊的数据结构,它允许在相同的内存位置存储不同的数据类型。联合体中的所有成员共享同一块内存区域,这意味着同一时间内,联合体只能保存其中一个…

架构师技能:技术深度硬实力透过问题看本质--深入分析nginx偶尔502错误根因

以架构师的能力标准去分析每个问题,过后由表及里分析问题的本质,复盘总结经验,并把总结内容记录下来。当你解决各种各样的问题,也就积累了丰富的解决问题的经验,解决问题的能力也将自然得到极大的提升。励志做架构师的…

进程的概念(2)

进程优先级 1.什么的优先级 概念:指定进程获取某种资源(CPU)的先后顺序 本质:优先级的本质是优先级数字的大小,Linux中优先级数字越小,优先级越高 task_struct 进程控制快-> struct -> 内部字段 -&g…

K8S Service 常见问题

Service 问题排查 为了演示需要部署以下服务。 apiVersion: apps/v1 kind: Deployment metadata:name: busyboxnamespace: appslabels:app: busybox spec:replicas: 1selector:matchLabels:app: busyboxtemplate:metadata:labels:app: busyboxspec:containers:- name: busybo…

注意力机制(四)(多头注意力机制)

​🌈 个人主页:十二月的猫-CSDN博客 🔥 系列专栏: 🏀《深度学习基础知识》 相关专栏: ⚽《机器学习基础知识》 🏐《机器学习项目实战》 🥎《深度学习项目实…

mysql本地链接一段时间就需要重启项目,否则就链接不上了呢

#数据库 spring.datasource.url jdbc:mysql://XXXXXX:3306/statistics?useUnicodetrue&characterEncodingutf8&allowMultiQueriestrue&serverTimezoneGMT%2B8&useSSLfalse&allowPublicKeyRetrievaltrue&rewriteBatchedStatementstrue spring.datasour…

Centos7 yum报错 Could not resolve host: mirrorlist.centos.org

yum install报如下错误 应该是网络问题,检查是不是这个文件配置错了导致连不上网 /etc/sysconfig/network-scripts/ifcfg-ens33 注意里面的DNS配置 可以在服务器ping一下百度 ping wwww.baidu.com

外汇返佣是什么意思?是不是越高越好?

外汇返佣是外汇经纪商提供的一种激励措施,用于返还部分交易费用给交易者。外汇返佣的具体内容可以从以下几个方面进行详细解释: 1、返佣的形式: 返佣通常根据交易量来计算,可以是按照每手交易的数量来返还一定金额,或者…