Mermaid

通过解析类 Markdown 的文本语法来实现图表的创建和动态修改。

实时编辑器!

📖 文档 | 🚀 入门 | 🌐 CDN | 🙌 加入我们

English

尝试未来版本的实时编辑器预览: Develop | Next

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

感谢所有参与进来提交 PR，解答疑问的人们! 🙏

关于 Mermaid

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

Doc-Rot 是 Mermaid 致力于解决的一个难题。

绘图和编写文档花费了开发者宝贵的开发时间，而且随着业务的变更，它很快就会过期。 但是如果缺少了图表或文档，对于生产力和团队新人的业务学习都会产生巨大的阻碍。
Mermaid 通过允许用户创建便于修改的图表来解决这一难题，它也可以作为生产脚本（或其他代码）的一部分。

Mermaid 甚至能让非程序员也能通过 Mermaid Live Editor 轻松创建详细的图表。
你可以访问 教程 来查看 Live Editor 的视频教程，也可以查看 Mermaid 的集成和使用 这个清单来检查你的文档工具是否已经集成了 Mermaid 支持。

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

示例

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

流程图 [文档 - live editor]

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

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

时序图 [文档 - live editor]

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!

1sequenceDiagram
2Alice->>John: Hello John, how are you?
3loop HealthCheck
4    John->>John: Fight against hypochondria
5end
6Note right of John: Rational thoughts!
7John-->>Alice: Great!
8John->>Bob: How about you?
9Bob-->>John: Jolly good!

甘特图 [文档 - live editor]

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

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

类图 [文档 - live editor]

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

1classDiagram
2Class01 <|-- AveryLongClass : Cool
3<<Interface>> Class01
4Class09 --> C2 : Where am I?
5Class09 --* C3
6Class09 --|> Class07
7Class07 : equals()
8Class07 : Object[] elementData
9Class01 : size()
10Class01 : int chimp
11Class01 : int gorilla
12class Class10 {
13  <<service>>
14  int id
15  size()
16}

状态图 [docs - live editor]

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

1stateDiagram-v2
2[*] --> Still
3Still --> [*]
4Still --> Moving
5Moving --> Still
6Moving --> Crash
7Crash --> [*]

饼图 [文档 - live editor]

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

1pie
2"Dogs" : 386
3"Cats" : 85
4"Rats" : 15

Git 图 [实验特性 - live editor]

用户体验旅程图 [文档 - live editor]

  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

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

C4 图 [文档]

C4Context
title System Context diagram for Internet Banking System

Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
Person(customerB, "Banking Customer B")
Person_Ext(customerC, "Banking Customer C")
System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")

Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.")

Enterprise_Boundary(b1, "BankBoundary") {

  SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")

  System_Boundary(b2, "BankBoundary2") {
    System(SystemA, "Banking System A")
    System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts.")
  }

  System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
  SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.")

  Boundary(b3, "BankBoundary3", "boundary") {
    SystemQueue(SystemF, "Banking System F Queue", "A system of the bank, with personal bank accounts.")
    SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.")
  }
}

BiRel(customerA, SystemAA, "Uses")
BiRel(SystemAA, SystemE, "Uses")
Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
Rel(SystemC, customerA, "Sends e-mails to")

1C4Context
2title System Context diagram for Internet Banking System
3
4Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
5Person(customerB, "Banking Customer B")
6Person_Ext(customerC, "Banking Customer C")
7System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
8
9Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.")
10
11Enterprise_Boundary(b1, "BankBoundary") {
12
13  SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
14
15  System_Boundary(b2, "BankBoundary2") {
16    System(SystemA, "Banking System A")
17    System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts.")
18  }
19
20  System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
21  SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.")
22
23  Boundary(b3, "BankBoundary3", "boundary") {
24    SystemQueue(SystemF, "Banking System F Queue", "A system of the bank, with personal bank accounts.")
25    SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.")
26  }
27}
28
29BiRel(customerA, SystemAA, "Uses")
30BiRel(SystemAA, SystemE, "Uses")
31Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
32Rel(SystemC, customerA, "Sends e-mails to")

发布

对于有权限的同学来说，你可以通过以下步骤来完成发布操作：

更新 package.json 中的版本号，然后执行如下命令：

1npm publish

以上的命令会将文件打包到 dist 目录并发布至 https://www.npmjs.com.

相关项目

• Command Line Interface
• Live Editor
• HTTP Server

贡献者

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

关于如何贡献的详细信息可以在 贡献指南 中找到。

安全

对于公开网站来说，从互联网上的用户处检索文本、存储供后续在浏览器中展示的内容可能是不安全的，理由是用户的内容可能嵌入一些数据加载完成之后就会运行的恶意脚本，这些对于 Mermaid 来说毫无疑问是一个风险，尤其是 mermaid 图表还包含了许多在 html 中使用的字符，这意味着我们难以使用常规的手段来过滤不安全代码，因为这些常规手段会造成图表损坏。我们仍然在努力对获取到的代码进行安全过滤并不断完善我们的程序，但很难保证没有漏洞。

作为拥有外部用户的网站的额外安全级别，我们很高兴推出一个新的安全级别，其中的图表在沙盒 iframe 中渲染，防止代码中的 javascript 被执行，这是在安全性方面迈出的一大步。

很不幸的是，鱼与熊掌不可兼得，在这个场景下它意味着在可能的恶意代码被阻止时，也会损失部分交互能力。

报告漏洞

如果想要报告漏洞，请发送邮件到 security@mermaid.live, 并附上问题的描述、复现问题的步骤、受影响的版本，以及解决问题的方案（如果有的话）。

鸣谢

来自 Knut Sveidqvist:

特别感谢 d3 和 dagre-d3 这两个优秀的项目，它们提供了图形布局和绘图工具库！ > 同样感谢 js-sequence-diagram 提供了时序图语法的使用。 感谢 Jessica Peter 提供了甘特图渲染的灵感。 > 感谢 Tyler Long 从 2017 年四月开始成为了项目的合作者。

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

---

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