像写 Markdown 一样画流程图

今天推荐一个项目「mermaid」，一个基于 Javascript 的图表绘制工具，通过解析类 Markdown 的文本语法来实现图表的创建和动态修改。

Mermaid 甚至能让非程序员也能通过 Mermaid Live Editor 轻松创建详细的图表。

下面是一些可以使用 Mermaid 创建的图表示例：

1、流程图

flowchart LR
A[Hard] -->
    |Text| B(Round)
B -->
 C{
Decision}
    
C -->
    |One| D[Result 1]
C -->
    |Two| E[Result 2]

2、时序图

sequenceDiagram
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!

3、甘特图

gantt
    section Section
    Completed :done,    des1, 2014-01-06,2014-01-08
    Active        :active,  des2, 2014-01-07, 3d
    Parallel 1   :         des3, after des1, 1d
    Parallel 2   :         des4, after des1, 1d
    Parallel 3   :         des5, after des3, 1d
    Parallel 4   :         des6, after des4, 1d

4、类图

classDiagram
Class01 |-- AveryLongClass : Cool
Interface>
    >
     Class01
Class09 -->
     C2 : Where am i?
Class09 --* C3
Class09 --|>
 Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
class Class10 {
    
  service>
    >

  int id
  size()
}
    

5、饼图

pie
"Dogs" : 386
"Cats" : 85
"Rats" : 15

体验地址：https://mermaid-js.github.io/mermaid-live-editor/edit

开源项目地址：https://github.com/mermaid-js/mermaid

开源项目作者：mermaid-js

- END -

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！