使用markdown画流程图、时序图等
创始人
2024-04-15 03:30:30
0

概述

能表示的图类型还有很多,比如:

  • sequenceDiagram时序图

  • classDiagram类图

  • stateDiagram:状态图

  • erDiagram:ER图

  • gantt: 甘特图

  • pie:饼图

  • requirementDiagram: 需求图

流程图

流程图代码以「graph 《布局方向》」开头

布局

TB,从上到下
TD,从上到下
BT,从下到上
RL,从右到左
LR,从左到右

例如

```mermaid
流程图/时序图代码
```

符号

起止框

起止框

在这里插入图片描述

处理框

处理框

在这里插入图片描述

可以使用 HTML 中的实体字符。

双引号:"

在这里插入图片描述

判断框

判断框

在这里插入图片描述

连接

连接

在这里插入图片描述

连接样式

实线

带文字实线箭头

文字描述AB

在这里插入图片描述

无文字实线箭头

AB

在这里插入图片描述

无文字实线无箭头

AB

在这里插入图片描述

带文字实线无箭头

文字描述AB

在这里插入图片描述

虚线

无文字虚线箭头

AB

注意有中间
在这里插入图片描述

有文字虚线箭头

文字AB

注意有中间
在这里插入图片描述

其他

其他类似实线

综合示例

通过不通过接口请求参数校验校验不通过处理业务逻辑结束
	` ``mermaidgraph TBA(接口请求) --> B[参数校验]B[参数校验] --> C{校验通过}C{校验通过} -- 通过 --> d[处理业务逻辑]C{校验不通过} -- 不通过 --> e[结束]d[处理业务逻辑] --> e(结束)```

时序图

时序图代码以「sequenceDiagram」开头

lileihanmeimeiHow are you.对象A的描述(提示)Fine, Thank you.对象B的描述我走了lileihanmeimei
	```mermaidsequenceDiagramparticipant A as lileiparticipant B as hanmeimeiA ->> B: How are you.Note left of A: 对象A的描述(提示)B -->> A: Fine, Thank you.Note right of B: 对象B的描述A -x B: 我走了```

参与者

参与者名称参与者名称
	```mermaidsequenceDiagramparticipant 别名 as 参与者名称```
参与者名称参与者名称
	```mermaidsequenceDiagramparticipant 参与者名称```

注解

左边注解

 Note left of 参与者: 参与者的描述(提示)

右边注解

 Note right of 参与者: 参与者的描述(提示)

在xx之上

Note over 参与者1,参与者2 : 哈哈哈
参与者名称1参与者名称2参与者名称1的描述(提示)参与者名称2的描述over1的描述over2的描述over21的描述over12的描述参与者名称1参与者名称2
	```mermaidsequenceDiagramparticipant 别名1 as 参与者名称1participant 别名2 as 参与者名称2Note left of 别名1: 参与者名称1的描述(提示)Note right of 别名2: 参与者名称2的描述Note over 别名1,别名1: over1的描述Note over 别名2,别名2: over2的描述Note over 别名2,别名1: over21的描述Note over 别名1,别名2: over12的描述```

消息

交互时一方对另一方的操作(比如接口调用)或传递出的信息。

格式

<参与者> <箭头> <参与者> : <描述文本>

箭头

->> 显示为实线箭头(主动发出消息)
-->> 显示为虚线箭头(响应)
-x 显示为末尾带「X」的实线箭头(异步消息)

举例

参与者名称1参与者名称2who are you参与者名称1的描述(提示)i am 参与者名称2参与者名称2的描述bye!参与者名称1参与者名称2
	```mermaidsequenceDiagramparticipant 别名1 as 参与者名称1participant 别名2 as 参与者名称2别名1 ->> 别名2: who are youNote left of 别名1: 参与者名称1的描述(提示)别名2 -->> 别名1: i am  参与者名称2Note right of 别名2: 参与者名称2的描述别名1 -x 别名2: bye!```

激活框

从消息接收方的时间线上标记一小段时间,表示对消息进行处理的时间间隔。
格式

<参与者> <箭头> [+/-]: <描述文本>。
A1A2111222A1A2
	```mermaidsequenceDiagramA1 ->> + A2: 111A2 -->> - A1: 222```

循环

相当于编程代码中的 while 循环 循环格式为:

loop 循环的描述消息
end
A1A2111222消息1响应1loop[一天七次]A1A2
	```mermaidsequenceDiagramA1 ->> + A2:  111A2 -->> - A1: 222loop 一天七次A1 ->> + A2:  消息1A2 -->> - A1: 响应1end```

选择(alt)

类似于 switch语句

学生学校查询成绩成绩优秀及格不及格alt[成绩 > 90][60 <= 成绩 < 90][成绩 < 60]学生学校
	```mermaidsequenceDiagram学生 ->> 学校 : 查询成绩学校 -->> 学生 : 成绩alt 成绩 > 90学生 ->> 学校 : 优秀else 60 <= 成绩 < 90学生 ->> 学校 : 及格else 成绩 < 60学生 ->> 学校 : 不及格end```

可选

类似于单个分支的 if 语句

学生学校我成绩及格再出成绩你及格了opt[成绩 > 60]学生学校
	```mermaidsequenceDiagram学生 ->> 学校 : 我成绩及格再出成绩opt 成绩 > 60学校  -->> 学生 : 你及格了end```

并行

AB工作做什么刷微博听音乐par[开始摸鱼]9点下班回家AB
	```mermaidsequenceDiagramA ->> B: 工作做什么par 开始摸鱼B ->> B : 刷微博andB ->> B : 听音乐endB -->> A : 9点下班回家```

上一篇:java 每日一练(6)

下一篇:学习笔记:引用

相关内容

热门资讯

喜闻乐见,2026年“国补”政... 12月30日,国家发展改革委、财政部印发的《关于2026年实施大规模设备更新和消费品以旧换新政策的通...
女子与表姐夫婚外情获赠三百余万... 一桩发生在海南的民间借贷纠纷,将一段持续二十余年的婚外情推到台前。相关材料显示,男子林森(化名)在婚...
诉讼纠纷频发!中央商场子公司又... 继控股子公司新亚百货面临补缴税款及滞纳金7392万元后,百货零售巨头中央商场(600280.SH)另...
从明天起,楼市迎来两大利好政策... 作者:暴哥 来源:暴财经pro 同志们,2025年要过去了! 今年,各位在股市里应该收获不少,把过去...
国台办回应台湾网红“馆长”大陆... 12月31日,国台办举行例行新闻发布会,国台办发言人张晗就近期两岸热点问题回答记者提问。 有记者提问...
中钢天源:股东中钢热能院907... 雷达财经 文|冯秀语 编|李亦辉 12月30日,中钢天源(证券代码:002057)发布公告称,其控股...
宇树科技因侵权责任纠纷案件被起... 天眼查法律诉讼信息显示,近日,杭州宇树科技股份有限公司及邵某新增1条开庭公告,原告为孙某,涉及侵权责...
今日视点:“制度创新+科技突破... 2025年,A股市场交易活跃度持续提升。截至12月30日,全年累计成交金额达417.8万亿元,同比增...
专业文章丨第二顺位抵押权人实现... 【珠海律师、珠海法律咨询、珠海律师事务所、京师律所、京师珠海律所】 (本文转载自北京市京师郑州律师事...
企业就网络谣言报案并追究法律责... 2025-12-31 09:41:29 作者:狼叫兽 声明指出,目前相关网络平台已对上述不实信息进...