介绍

Mermaid是一个基于Javascript的图表绘制工具，它使用基于Markdown的文本定义和渲染器来创建和修改复杂的图表。Mermaid的主要目的是帮助文档跟上开发进度!Mermaid被提名并获得了“最令人兴奋的技术”类别的JS开源奖（2019年）！！！

Github

https://github.com/mermaid-js/mermaid

为何会有mermaid？

图表和文档编制耗费了开发人员宝贵的时间，而且很快就过时了。但没有图表或文档会破坏生产力，并损害组织学习。mermaid通过减少创建可修改的图表所需的时间、精力和工具来解决这个问题，从而实现更智能、更可重用的内容。mermaid的文本定义使其易于更新，也可以使其成为生产脚本（和其他代码段）的一部分。也就是说mermaid是为了平衡开发人员时间的一种工具，更具生产力！

范例

下面我们可以查看几个案例

• 流程图

graph TD
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 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!

• 甘特图

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

• 类图

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()
}

• 状态图

stateDiagram
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]

• 饼状图

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

• 用户体验旅程图

 journey
    title My working day
    section Go to work
      Make tea: 5: Me
      Go upstairs: 3: Me
      Do work: 1: Me, Cat
    section Go home
      Go downstairs: 5: Me
      Sit down: 3: Me

总结

Mermaid是一个非常不错的工具，有效的提升了编写各种图表的效率上，可以将Mermaid看作是一个图表脚本语言，使用Javascript实现，官方具备详细的文档，感兴趣的小伙伴不要错过！