流程图绘制相关
mermaid简述
特性:Mermaid制图是一种基于文本的图表绘制方法,它使用类似于Markdown的语法来描述图表,并可以将其转换为SVG或其他图形格式进行展示。特点是简单易学功能强大,能够满足大部分简易制图要求,(要是太难了为什么不直接贴图呢)
其他:
- Mermaid支持通过CSS样式来自定义图表的外观和布局。(不建议,太复杂不如贴图)
- Mermaid图表可以导出为PNG、SVG等常见的图像格式。(不会,遇到了在学)
- Mermaid支持插件和编辑器的集成,使得用户可以更加高效地使用和管理Mermaid图表。
- 在Markdown编辑器中,可以直接使用Mermaid语法来创建和渲染图表。(Typora可以)。
- 支持流程图、序列图、甘特图。
注意:
- 在markdown编辑中,要写在代码框里,所以要先在最开始打出
```mermaid
唤醒这个对应代码(Typora里)。
简单的流程图:
graph TB
A[开始] --> B[处理]
B --> C{判断}
C -- 是 --> D[结束]
C -- 否 --> E[处理]
E --> B
简单的序列图:
sequenceDiagram
A->>B: 消息1
B->>C: 消息2
C-->>A: 响应
loop 循环操作
A->>B: 消息3
end
简单的甘特图
gantt
dateFormat YYYY-MM-DD
title 项目进度
section SectionA
TaskA :active, a1, 2023-01-01, 30d
TaskB : b1, after a1, 20d
具体语法
主要分成三层:
标志层:选择graph、sequenceDiagram 、gantt选择你要制的图
语法层:中间填入对应语法
结束层:end表示结束
流程图(Flowchart)
- 使用
graph
关键词定义图表类型,如graph TB
(从上到下)或graph RL
(从右到左)。 - 使用
A --> B
表示从节点A到节点B的箭头。 - 支持条件判断,如
C -- 是 --> D[结果1]
。
序列图(Sequence Diagram)
- 使用
sequenceDiagram
关键词定义。 - 通过
->>
表示参与者之间的消息传递。 - 可以使用
loop
、alt
等关键词描述循环和选择结构。
甘特图(Gantt Chart)
- 使用
gantt
关键词定义。 - 定义任务和时间轴,如
section SectionName
和TaskName :crit, active, x-day1, x3-day4
。
节点形状
- 节点可以通过不同的括号和关键词来定义形状,如:
[方形]
(圆边矩形)
((圆形))
{菱形}
- // 注释