无论是作报告还是梳理知识点，流程图和结构图都能起到画龙点睛的用处，而在实际办公的过程中，如果你可以很快做出一个漂亮的结构图，相信老板肯定会对你刮目相看，今天就带大家一起学习一下如何利用
再高深的前端知识小编不懂，仅面向不是很懂变成编程，或者只是需要做结构图的人。
先来看几个样品：
话不多说，先把平台连接发出来：
https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiZ3JhcGggVERcbkFbQ2hyaXN0bWFzXSAtLT58R2V0IG1vbmV5fCBCKEdvIHNob3BwaW5nKVxuQiAtLT4gQ3tMZXQgbWUgdGhpbmt9XG5DIC0tPnxPbmV8IERbTGFwdG9wXVxuQyAtLT58VHdvfCBFW2lQaG9uZV1cbkMgLS0-fFRocmVlfCBGW2ZhOmZhLWNhciBDYXJdXG4iLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9fQ
下面我们一步一步的做出结构图：
作图方向：
graph TD
Start --> Stop
第一行的graph LR中graph指定是一个图，第二个TD指定图的方向，所有的方向关键词为:
graph LR;
A[aa bb]-->B(wo);
A-->C((我是C));
B-->D>我是D];
C-->D;
D-->E{我是E};
C-->E;
2-->E;
graph TD
A[A] --> B[B]
A1[A] --- B1[B]
A4[A] -.- B4[B]
A5[A] -.-> B5[B]
A7[A] ==> B7[B]
A2[A] -- 描述 --- B2[B]
A3[A] -- 描述 --> B3[B]
A6[A] -. 描述 .-> B6[B]
A8[A] == 描述 ==> B8[B]
节点形状：
大写字母表示节点，name表示节点的名字，主要形状如下：
文本节点 B[bname]圆角节点 C(cname)圆形节点 D((dname))非对称节点 E>ename]菱形节点 F{fname}实体字符：可以使用 HTML 中的实体字符。
graph LR
A["A double quote:#quot;"] -->B["A dec char:#9829;"]
这个网址有很多：https://www.cnblogs.com/mengmengi/p/10137167.html
直接替换就可以：
增加渲染：
graph LR
id1(Start)-->id2(Stop)
style id1 fill:#f9f,stroke:#333,stroke-width:4px;
style id2 fill:#f00,stroke:#000,stroke-width:2px,stroke-dasharray:5,5;
style id1 fill:#f9f,stroke:#000,stroke-width:2px,stroke-dasharray:5,5;
fill:#f9f表示框框中填充的颜色，由RGB表示，但只有0~F，如#f00表示填充红色
stroke:#000,表示外框的颜色，也是由RGB表示
stroke-width:2px,表示外框短线的宽度为2个像素，
stroke-dasharray:5,5;表示外框短线的长度，等于方框的边长除以5
如果有很多需要设置为一样的格式，也可以定于类重复调用：
graph LR
classDef className fill:#f9f,stroke:#333,stroke-width:4px;
class nodeId className;
id1(Start)-->id2(Stop)
id3(Start)-->id4(Stop)
id5(Start)-->id6(Stop)
class id1 className;
class id3 className;
class id4 className;
class id5 className;
style id2 fill:#f00,stroke:#000,stroke-width:2px,stroke-dasharray:5,5;
下面讲一下不同的图表类型：
子流程图
graph TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
graph TB：描述了作图的方向
subgraph three：将区域分类标注
时序图：
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
prevail...
John-->Alice: Great!
John->Bob: How about you?
Bob-->John: Jolly good!
做一个消息图：
sequenceDiagram
participant A as Alice
participant J as John
A->>J: Hello John, how are you?
J->>A: Great!
添加个备注：
语法：Note [ right of | left of | over ] [Actor]。
over 可用于单独一个角色上，也可以用于相邻两个角色间：
别名
可以给角色写一个简短的别名以方便书写。
sequenceDiagram
participant A as Alice
participant J as John
A->>J: Hello John, how are you?
J->>A: Great!
活动期：
sequenceDiagram
Alice->>John: Hello John, how are you?
%% activate 角色名 表示激活控制焦点
activate John
John-->>Alice: Great!
%% deactivate 角色名 表示控制焦点结束
deactivate John
使用 +/- 的更方便的写法：
循环
loop Loop text
... statements ...
end
sequenceDiagram
Alice->John: Hello John, how are you?
%% loop 后跟循环体说明文字
loop Every minute
John-->Alice: Great!
%% 标记循环结束
end
选择
语法：
alt Describing text
... statements ...
else
... statements ...
end
可选条件，比如在没有 else 分支的情况下使用，有点类似 java 中的 switch 的 default 分支，代表剩下所有情况。
opt Describing text
... statements ...
end
sequenceDiagram
Alice->>Bob: Hello Bob, how are you?
alt is sick
Bob->>Alice: Not so good :(
else is well
Bob->>Alice: Feeling fresh like a daisy
end
opt Extra response
Bob->>Alice: Thanks for asking
end
甘特图：
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d
future task : des3, after des2, 5d
future task2 : des4, after des3, 5d
section Critical tasks
Completed task in the critical line :crit, done, 2014-01-06,24h
Implement parser and json :crit, done, after des1, 2d
Create tests for parser :crit, active, 3d
Future task in critical line :crit, 5d
Create tests for renderer :2d
Add to ,mermaid :1d
关键词说明：
使用关键词gantt声明甘特图title—标题dateFormat—日期格式section—声明板块Completed—已经完成Active—当前正在进行Future—后续待处理crit—关键阶段时间参数：
甘特图：学习网站：https://www.yuque.com/yuque/help/gantt