Leo的恒河沙

使用 Typora 工具绘制流程图_participant as 使用 typro_时了了的博客 - CSDN 博客#

#Omnivore

使用 Typora 工具绘制流程图#

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

使用 Typora 工具绘制流程图#

• Typora 编辑器简介
• 使用 Mermaid 语法绘制流程图
• 1. 流程图方向
• 2. 节点形状
• 3. 节点间的连线
• 4. 子图表（subgraph）
• 5. 序列图（sequenceDiagram）
• 6. 参与者（participant）
• 7. 消息线
• 8. 处理中（activate）
• 9. 标注（Note）
• 10. 循环（loop）
• 11. 判断（alt/opt）
• 使用 flow 语法绘制标准流程图
• 1. 标准流程图
• 2. 标准流程图（横向）

Typora 编辑器简介#

Typora 编辑器让人们能更简单地用 Markdown 语言书写文字，解决了使用传统的 Markdown 编辑器写文的痛点，并且界面简洁优美，实现了实时预览等功能。
Typora 官网： https://typora.io/.
windos 版本下载地址：https://typora.io/#windows.

使用 Mermaid 语法绘制流程图#

Mermaid 可让您使用文本和代码创建图表和可视化。它是一种基于 Javascript 的图表和图表工具，可呈现受 Markdown 启发的文本定义以动态创建和修改图表。
官网: https://mermaidjs.github.io/.
Github 项目地址: https://github.com/knsv/mermaid.

1. 流程图方向#

2. 节点形状#

* 描述可以使用引号抑制一些特殊字符的使用。eg[“box”]

3. 节点间的连线#

4. 子图表（subgraph）#

subgraph 子图表名称 子图表中的描述语句... end

• 1
• 2
• 3

举个栗子：

• 代码

graph TB id1(圆角矩形)--普通线-->id2[矩形] subgraph 子图表名称 id2==粗线==>id3{菱形} id3-.虚线.->id4>右向旗帜] id3--无箭头---id5((圆形)) end

• 1

• 2

• 3

• 4

• 5

• 6

• 7

• 代码结果显示

子图表名称

单线加文字

粗线加文字

虚线加文字

无箭头

菱形

矩形

右向旗帜

圆形

圆角矩形

5. 序列图（sequenceDiagram）#

sequenceDiagram [参与者1][消息线][参与者2]:消息体 ...

• 1
• 2
• 3

举个栗子：

• 代码

sequenceDiagram 敢敢->>+憨憨: 在吗？ 憨憨->>-敢敢: 在的

• 1

• 2

• 3

• 代码结果显示

敢敢 憨憨 在吗？ 在的 敢敢 憨憨

* 代码中的 + - 对用来表示时序块。

6. 参与者（participant）#

上例中的敢敢、憨憨都是参与者，上例中的语法是最简单的，也可以明显表明参与者有哪些

sequenceDiagram participant 参与者 1 participant 参与者 2 ... participant 简称 as 参与者 3 #该语法可以在接下来的描述中使用简称来代替参与者 3

• 1
• 2
• 3
• 4
• 5

举个栗子：

• 代码

sequenceDiagram participant 敢敢 as A participant 憨憨 as B A->>B: 在吗？ B->>A: 在的

• 1

• 2

• 3

• 4

• 5

• 代码结果显示

敢敢 憨憨 干嘛呢？ 在听音乐 敢敢 憨憨

7. 消息线#

8. 处理中（activate）#

在消息线末尾增加 + ，则消息接收者进入当前消息的 “处理中” 状态；
在消息线末尾增加 - ，则消息接收者离开当前消息的 “处理中” 状态。
或者使用以下语法直接说明某个参与者进入 “处理中” 状态

activate 参与者

• 1

9. 标注（Note）#

Note 位置表述 参与者: 标注文字

• 1

• 位置表述

10. 循环（loop）#

loop 循环的条件 循环体描述语句 end

• 1
• 2
• 3

11. 判断（alt/opt）#

alt 条件 1 描述 分支 1 描述语句 else 条件 2 描述 # else 分支可选 分支 2 描述语句 else ... ... end

• 1
• 2
• 3
• 4
• 5
• 6
• 7

opt 条件描述 分支描述语句 end

• 1
• 2
• 3

举个例子

• 代码

sequenceDiagramDiagram participant gg as 敢敢 participant hh as 憨憨 loop 每日问候 gg->>hh: 工作做完了吗？ hh-->>gg: 做完了,你呢？ activate gg Note left of gg: 思考一下 alt 没做完 gg-xhh: 没做完，加班ing else 做完了 gg-xhh: 做完了，一起打王者吧！ end opt 节日愉快 hh-->gg: 生日快乐~ hh-->gg: 劳动节快乐~ hh-->gg: 儿童节快乐~ end end

• 代码结果显示

敢敢 憨憨 工作做完了吗？ 做完了，你呢？ 思考一下 没做完，加班 ing 做完了，一起打王者吧！ alt [没做完] [做完了] 生日快乐～劳动节快乐～儿童节快乐～opt [节日愉快] loop [每日问候] 敢敢 憨憨

使用 flow 语法绘制标准流程图#

1. 标准流程图#

举个例子

• 代码

flowchat st=>start: 开始框 op=>operation: 处理框 cond=>condition: 判断框(是或否?) sub1=>subroutine: 子流程 io=>inputoutput: 输入输出框 e=>end: 结束框 st->op->cond cond(yes)->io->e cond(no)->sub1(right)->op

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

*Typora 编辑时输入 flow 即可，CSDN 在编辑时关键字 flow 会被自动转换成 mermaid 语法 flowchat，所以代码首行会显示 flowchat。

• 代码结果显示

Created with Raphaël 2.2.0 开始框 处理框 判断框 (是或否？) 输入输出框 结束框 子流程 yes no

2. 标准流程图（横向）#

举个例子

• 代码

flowchatchat st=>start: 开始框 op=>operation: 处理框 cond=>condition: 判断框(是或否?) sub1=>subroutine: 子流程 io=>inputoutput: 输入输出框 e=>end: 结束框 st(right)->op(right)->cond cond(yes)->io(bottom)->e cond(no)->sub1(right)->op

• 1

• 2

• 3

• 4

• 5

• 6

• 7

• 8

• 9

• 10

• 代码结果显示

Created with Raphaël 2.2.0 开始框 处理框 判断框 (是或否？) 输入输出框 结束框 子流程 yes no

文章知识点与官方知识档案匹配，可进一步学习相关知识