最近为画各种流程图头疼的时候，一款软件拯救了我：Mermaid
什么是 Mermaid
Mermaid 是一个用于生成流程图、时序图、甘特图和类似图表的开源工具。它使用简单的文本语法来描述图表的结构和关系，并将其转换为可视化的图表。Mermaid 支持多种图表类型，包括流程图、时序图、甘特图、饼图等，可以用于软件开发、项目管理、文档编写等领域。
按照 Mermaid 的快速开始，画一个关系图：
1
2
3
4
5
6
7
8
9
10
11
|
sequenceDiagram
participant Alice
participant Bob
Alice->>John: Hello John, how are you?
loop Healthcheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts <br/>prevail!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
|
可以看出mermaid的语法还是比较简洁的，但无奈实在不想学了，于是发现了以下方式
结合ChatGPT使用mermaid画图
节选一段骚操作的对话：
我：
1
2
3
4
5
6
7
8
|
使用mermaid帮我画一个低代码编辑器的数据流程图
其中有四个模块
配置模块 页面展示模块 物料属性编辑模块 store数据存储模块
他们之间的关系是：
配置模块更改 基础配置时，会向store数据存储模块发起调度申请，更改对应数据的基础信息，同时在配置模块上回显基础信息数据，页面展示模块在感知到基础信息变更时，响应变化
配置模块增加或减少 物料配置时，会向store数据存储模块发起调度申请，增加或减少物料，同时在配置模块上回显物料的增减，页面展示模块在感知到物料增减时，响应式地在页面增加或删除对应物料的展示，物料属性编辑模块在感知到物料增减时，响应式地展示当前被增减模块的初始属性
页面展示模块在对页面中的物料进行拖拉拽时，会向store数据存储模块发起调度申请，更改物料的位置、大小、文案信息，同时在页面展示模块上回显拖位置、大小、文案，物料属性编辑模块感知到物料位置、大小变化时，对应的编辑数据同时变化
物料属性编辑模块编辑物料属性时，会向store数据存储模块发起调度申请，更改物料的属性信息，同时物料属性编辑模块回显编辑后的数据，页面展示模块感知到物料属性变化时，响应式地在页面上表现物料的属性变化
|
GPT:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
graph LR
A[配置模块] -->|更改基础配置| D[store数据存储模块]
D -->|回显基础信息数据| A
A -->|感知基础信息变更| B[页面展示模块]
B -->|响应变化| A
A -->|增加或减少物料配置| D
D -->|增加或减少物料| A
A -->|回显物料的增减| B
B -->|响应式增加或删除对应物料展示| B
A -->|回显物料的增减| C[物料属性编辑模块]
C -->|响应式展示初始属性| C
B -->|拖拉拽物料| D
D -->|更改物料的位置、大小、文案信息| B
B -->|回显拖位置、大小、文案| B
C -->|感知物料位置、大小变化| C
C -->|响应式展示编辑数据变化| C
C -->|编辑物料属性| D
D -->|更改物料的属性信息| C
C -->|回显编辑后的数据| C
C -->|感知物料属性变化| B
B -->|响应式表现物料属性变化| B
以上是使用Mermaid语言绘制的低代码编辑器的数据流程图。图中的模块包括配置模块、页面展示模块、物料属性编辑模块和store数据存储模块。箭头表示数据的流向和相互之间的调度申请。
|
我：
1
|
用Sequence diagram表示这一过程
|
GPT:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
sequenceDiagram
participant 配置模块
participant 页面展示模块
participant 物料属性编辑模块
participant store数据存储模块
配置模块->>store数据存储模块: 更改基础配置
store数据存储模块-->>配置模块: 基础信息数据
配置模块->>页面展示模块: 感知基础信息变更
页面展示模块->>配置模块: 响应变化
配置模块->>store数据存储模块: 增加或减少物料配置
store数据存储模块-->>配置模块: 物料增减
配置模块->>页面展示模块: 回显物料的增减
页面展示模块->>页面展示模块: 响应式增加或删除物料展示
配置模块->>物料属性编辑模块: 回显物料的增减
物料属性编辑模块->>物料属性编辑模块: 响应式展示初始属性
页面展示模块->>store数据存储模块: 拖拉拽物料
store数据存储模块-->>页面展示模块: 更改物料位置、大小、文案信息
页面展示模块->>页面展示模块: 回显拖位置、大小、文案
页面展示模块->>物料属性编辑模块: 感知物料位置、大小变化
物料属性编辑模块->>物料属性编辑模块: 响应式展示编辑数据变化
物料属性编辑模块->>store数据存储模块: 编辑物料属性
store数据存储模块-->>物料属性编辑模块: 更改物料属性信息
物料属性编辑模块->>物料属性编辑模块: 回显编辑后的数据
物料属性编辑模块->>页面展示模块: 感知物料属性变化
页面展示模块->>页面展示模块: 响应式表现物料属性变化
以上是使用Sequence Diagram表示低代码编辑器的数据流程。图中的参与者包括配置模块、页面展示模块、物料属性编辑模块和store数据存储模块。箭头表示消息的流向和相互之间的交互。
|
然后根据GPT给出的文本代码画出了设计图，有一说一，雀食不错
