流程图绘制相关

mermaid简述

特性：Mermaid制图是一种基于文本的图表绘制方法，它使用类似于Markdown的语法来描述图表，并可以将其转换为SVG或其他图形格式进行展示。特点是简单易学功能强大，能够满足大部分简易制图要求，（要是太难了为什么不直接贴图呢）

其他：

  • Mermaid支持通过CSS样式来自定义图表的外观和布局。（不建议，太复杂不如贴图）
  • Mermaid图表可以导出为PNG、SVG等常见的图像格式。（不会，遇到了在学）
  • Mermaid支持插件和编辑器的集成，使得用户可以更加高效地使用和管理Mermaid图表。
  • 在Markdown编辑器中，可以直接使用Mermaid语法来创建和渲染图表。（Typora可以）。
  • 支持流程图、序列图、甘特图。

注意：

  • 在markdown编辑中，要写在代码框里，所以要先在最开始打出```mermaid 唤醒这个对应代码（Typora里）。

简单的流程图：

1
2
3
4
5
6
graph TB  
A[开始] --> B[处理]  
B --> C{判断}  
C -- 是 --> D[结束]  
C -- 否 --> E[处理]  
E --> B
1
2
3
4
5
6
7
graph TB  
A[开始] --> B[处理]  
B --> C{判断}  
C -- 是 --> D[结束]  
C -- 否 --> E[处理]  
E --> B

简单的序列图：

1
2
3
4
5
6
7
sequenceDiagram  
A->>B: 消息1  
B->>C: 消息2  
C-->>A: 响应  
loop 循环操作  
  A->>B: 消息3  
end
1
2
3
4
5
6
7
sequenceDiagram  
A->>B: 消息1  
B->>C: 消息2  
C-->>A: 响应  
loop 循环操作  
  A->>B: 消息3  
end

简单的甘特图

1
2
3
4
5
6
gantt  
dateFormat  YYYY-MM-DD  
title       项目进度  
section SectionA  
TaskA       :active,    a1, 2023-01-01, 30d  
TaskB       :           b1, after a1, 20d
1
2
3
4
5
6
gantt  
dateFormat  YYYY-MM-DD  
title       项目进度  
section SectionA  
TaskA       :active,    a1, 2023-01-01, 30d  
TaskB       :           b1, after a1, 20d

具体语法

1
2
3
4
主要分成三层：
标志层：选择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。
节点形状
  • 节点可以通过不同的括号和关键词来定义形状，如：
    • [方形]
    • (圆边矩形)
    • ((圆形))
    • {菱形}
    • // 注释