在画UML图的时候，总要花费很多时间去调整图像对齐， 各个图像直接的距离是否合适，等等。 我觉得是浪费时间。

对于程序员来说，如果我们直接通过代码来画图，瞬间就亲切多了，画出来的图也会看起来更加的专业，整洁。

Mermaid美人鱼就是一款可以实现通过代码画流程图，时序图，类图， 甘特图，饼图等等的软件。

一共有四种方式使用mermaid，我个人觉得第一种最方便，不需要安装任何客户端，直接在线编辑。

可以直接打开在线的网站mermaid.live. ， 里面有列子，也可以自己写代码画图。

Four ways of using mermaid:

Using the Mermaid Live Editor at mermaid.live.

Using mermaid plugins with programs you are familiar with.

Calling the Mermaid JavaScript API.

Deploying Mermaid as a dependency.

在线编辑地址：

https://mermaid.live/edit#pako:eNpVj82qwkAMRl8lZOUF-wJdCNdW3QgKuut0EdrUGXR-mKZcpO2736luNKvAOd9HMmLjW8Ycb5GChmupHKT5rQodTS-W-hqybDMdWMB6x88JtquDh177EIy7_bz97SJBMR4XjUG0cff5jYpX_uR4grI6UhAf6k9y_fMT7Cpz1qn-m-jIKbWvOso7yhqKUFCscY2WoyXTprPHJaBQNFtWmKe15Y6GhyhUbk4qDeIvT9dgLnHgNQ6hJeHSUHrYYup99Dz_A1H0VDQ

流程图

代码

flowchart LR

A[Hard edge] -->|Link text| B(Round edge)

B --> C{Decision}

C -->|One| D[Result one]

C -->|Two| E[Result two]

效果

时序图

代码：

sequenceDiagram

autonumber

Alice->>John: Hello John, how are you?

loop Healthcheck

John->>John: Fight against hypochondria

end

Note right of John: Rational thoughts!

John-->>Alice: Great!

John->>Bob: How about you?

Bob-->>John: Jolly good!

效果

饼图

代码

pie showData

title Key elements in Product X

"Calcium" : 42.96

"Potassium" : 50.05

"Magnesium" : 10.01

"Iron" : 5

效果

官网

https://mermaid-js.github.io/mermaid/#/n00b-gettingStarted?id=four-ways-of-using-mermaid