使用Typora工具绘制流程图

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. 流程图方向

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

2.节点形状

矩形节点	圆角矩形节点	圆形节点	右向旗帜状节点/非对称节点(asymetric shape)	菱形节点（rhombus）
A[描述]	B(描述)	C((描述))	D>描述]	E{描述}

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

3.节点间的连线

单线	单线加文字	粗线	粗线加文字	虚线	虚线加文字
—(3个-) 或 -->(2个–)	–text—(前2-后3-) 或 --text–>(前2-后2-)	=== 或 ==>	==text=== 或 ==text==>	-.- 或 -.->	-.text.- 或 -.text.->

4.子图表（subgraph）

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

举个栗子：

• 代码

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

• 代码结果显示

5.序列图（sequenceDiagram）

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

举个栗子：

• 代码

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

• 代码结果显示

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

6.参与者（participant）

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

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

举个栗子：

• 代码

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

• 代码结果显示

7.消息线

类型	描述
->	无箭头的实线
–>(2个-)	无箭头的虚线
->>	有箭头的实线
–>>(2个-)	有箭头的虚线
-x	末端为叉的实线（表示异步）
–x(2个-)	末端为叉的虚线（表示异步）

8.处理中（activate）

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

activate 参与者

9.标注（Note）

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

• 位置表述

右侧	左侧	居中（可以横跨多个参与者）
right of	left of	over

10.循环（loop）

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

11.判断（alt/opt）

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

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

举个例子

• 代码

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

• 代码结果显示

使用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

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

• 代码结果显示

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

• 代码结果显示