一款优雅的流程图利器-Mermaid 使用指南

Mermaid 使用指南

Mermaid 被提名并获得了 JS Open Source Awards (2019) 的 “The most exciting use of technology” 奖项!!!

关于 Mermaid

Mermaid 是一个基于 Javascript 的图表绘制工具，通过解析类 Markdown 的文本语法来实现图表的创建和动态修改。Mermaid 诞生的主要目的是让文档的更新能够及时跟上开发进度。

Mermaid 致力于解决 Doc-Rot 这个令人头疼的问题。

绘图和编写文档花费了开发者宝贵的开发时间，而且随着业务的变更，它很快就会过期。 但是如果缺少了图表或文档，对于生产力和团队新人的业务学习都会产生巨大的阻碍。

Mermaid 通过减少创建可修改的图表所需要的时间、精力和工具来解决这一难题，从而提高了内容的智能化和可重用性。 作为一个基于文本的绘图工具， Mermaid 天生就易于维护和更新，它也可以作为生产脚本（或其他代码）的一部分，使得文档编写变得更加简单。 有了它之后，开发者可以从维护文档这个与开发割离且麻烦的任务中解放出来。

即使是从未接触过编程的非专业人员也可以通过 Mermaid Live Editor来创建图表。

你可以访问 教程 来查看 Live Editor 的视频教程。
U也可以查看 Mermaid 的集成和使用 这个清单来检查你的文档工具是否已经集成了 Mermaid 支持。

如果想要查看关于 Mermaid 更详细的介绍及基础使用方式，可以查看 入门指引 and 用法.

CDN | 文档 | 贡献 | 更新日志

示例

下面是一些使用 Mermaid 和类 Markdown 语法创建的图表示例。点击 语法 查看详情

流程图

graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

A

B

C

D

时序图

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! 

Alice Bob John Hello John, how are you? Fight against hypochondria loop [Healthcheck] Rational thoughts prevail! Great! How about you? Jolly good! Alice Bob John

甘特图

gantt
dateFormat  YYYY-MM-DD
title Adding GANTT diagram to mermaid
excludes weekdays 2014-01-10

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

gantt
dateFormat  YYYY-MM-DD
title Adding GANTT diagram to mermaid
excludes weekdays 2014-01-10

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

类图

classDiagram
Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label

Class01 int chimp int gorilla size() AveryLongClass Class03 Class04 Class05 Class06 Class07 Object[] elementData equals() Class08 Class09 C2 C3 Cool Where am i? Cool label

Git 图

gitGraph:
options
{
    "nodeSpacing": 150,
    "nodeRadius": 10
}
end
commit
branch newbranch
checkout newbranch
commit
commit
checkout master
commit
commit
merge newbranch

master, B5sVXPk

GuwehPh

YdBLwuI

abtsuh9

newbranch, thMT36s

OZJkdRm

实体关系图

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses

CUSTOMER ORDER LINE-ITEM DELIVERY-ADDRESS places contains uses

用户旅程图

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: 5: Me

Cat Me

Go to work

Go to work Me

Make tea

Make tea Me

Go upstairs

Go upstairs Me Cat

Do work

Do work

Go home

Go home Me

Go downstairs

Go downstairs Me

Sit down

Sit down My working day

状态图

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

Still

Moving

Crash

饼图

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

79% 17% 3% Dogs Cats Rats

相关项目

• Command Line Interface
• Live Editor
• HTTP Server

贡献者

Mermaid 是一个不断发展中的社区，并且还在接收新的贡献者。有很多不同的方式可以参与进来，而且我们还在寻找额外的帮助。如果你想知道如何开始贡献，请查看 这个 issue。

鸣谢

来自 Knut Sveidqvist:

特别感谢 d3 和 dagre-d3 这两个优秀的项目，它们提供了图形布局和绘图工具库!

同样感谢 js-sequence-diagram 提供了时序图语法的使用。 感谢 Jessica Peter 提供了甘特图渲染的灵感。

感谢 Tyler Long 从 2017年四月开始成为了项目的合作者。

感谢越来越多的 贡献者们，没有你们，就没有这个项目的今天！

---

Mermaid 是由 Knut Sveidqvist 创建，它为了更简单的文档编写而生。