We can't find the internet
Attempting to reconnect
# 使用`mermaid.js`来绘制图表
最近需要绘制一些流程图来做说明，大概检索了一下现在可以使用的东西。
看到了`mermaid`这个图表绘制工具。
这款软件曾经获得过OpenSource Reword 2019
`mermaid`是一款使用标记语言来绘制图表的工具，可以快速的绘制出流程图来，让你的表达跟上你的思想。
这款图表的实现原理是解析标记语言，再根据标记语言，使用d3来绘制图表。
收到d3的限制，只能在dom中使用。
图表可轻易嵌入markdown之中，如下：
```
flowchart LR
A[Jonathan]
B[Develop next app]
C[Develop phoenix app]
D[Develop mail server]
E[Develop notification server]
F[Develop cdn server]
G[Develop database]
Z[GSMLG Application]
A-->B
A-->C
A-->D
A-->E
A-->F
A-->G
B-->Z
C-->Z
D-->Z
E-->Z
F-->Z
G-->Z
```
生成的图表
```mermaid
flowchart LR
A[Jonathan]
B[Develop next app]
C[Develop phoenix app]
D[Develop mail server]
E[Develop notification server]
F[Develop cdn server]
G[Develop database]
Z[GSMLG Application]
A-->B
A-->C
A-->D
A-->E
A-->F
A-->G
B-->Z
C-->Z
D-->Z
E-->Z
F-->Z
G-->Z
```
### 支持的图表类型
* Flowchart
* Sequence diagram
* Gantt diagram
* Class diagram
* State Diagram
* Git graph
* Entity Relationship Diagram - ! experimental
* User Journey Diagram
* Gantt
* Requirement Diagram
**配置文档**
更详细的配置文档可以在 [这里](https://mermaid-js.github.io/mermaid/#/flowchart) 找到。
### Demo
```mermaid
sequenceDiagram
actor A as Client
participant B as Front Server
participant C as Backen Servers
A ->>+ B: Get Page
B ->>+ C: Get Data
B ->>+ C: Get Resource
C -->>- B: Return Data
C -->>- B: Return Resource
B -->>- A: Rsponse Page
```