Mermaid

从类似 Markdown 的文本生成图表。

尝试未来版本的在线编辑器预览：开发版 | 下一版

:trophy: Mermaid 被提名并获得了 JS 开源奖（2019） "最令人兴奋的技术应用" 类别的奖项！！！

感谢所有参与的人，提交拉取请求的人，回答问题的人！🙏

关于

Mermaid 是一个基于 JavaScript 的图表绘制工具，它使用类似 Markdown 的文本定义和渲染器来创建和修改复杂的图表。Mermaid 的主要目的是帮助文档跟上开发进度。

文档腐化是一个 Mermaid 有助于解决的两难困境。

绘图和编写文档需要耗费宝贵的开发时间，而且很快就会过时。但是没有图表或文档会降低生产力并损害组织学习。
Mermaid 通过使用户能够创建易于修改的图表来解决这个问题。它还可以成为生产脚本（和其他代码片段）的一部分。

Mermaid 甚至允许非程序员通过 Mermaid 在线编辑器轻松创建详细的图表。
有关视频教程，请访问我们的教程页面。在您喜欢的应用程序中使用 Mermaid，查看 Mermaid 的集成和使用列表。

您还可以在 GitHub 以及许多其他喜欢的应用程序中使用 Mermaid——查看 Mermaid 的集成和使用列表。

有关 Mermaid 的更详细介绍及其一些基本用法，请参阅新手指南、使用方法和教程。

在我们的发布过程中，我们严重依赖使用 applitools 进行视觉回归测试。Applitools 是一项出色的服务，易于使用并与我们的测试集成。

示例

以下是使用 Mermaid 可以制作的一些图表、流程图和图形的示例。点击此处跳转到文本语法。

流程图 [文档 - 在线编辑器]

flowchart LR

A[硬] -->|文本| B(圆)
B --> C{决策}
C -->|一| D[结果 1]
C -->|二| E[结果 2]

flowchart LR

A[硬] -->|文本| B(圆)
B --> C{决策}
C -->|一| D[结果 1]
C -->|二| E[结果 2]

时序图 [文档 - 在线编辑器]

sequenceDiagram
Alice->>John: 你好 John，你好吗？
loop 健康检查
    John->>John: 与疑病症作斗争
end
Note right of John: 理性思考！
John-->>Alice: 很好！
John->>Bob: 你呢？
Bob-->>John: 好极了！

sequenceDiagram
Alice->>John: 你好 John，你好吗？
loop 健康检查
    John->>John: 与疑病症作斗争
end
Note right of John: 理性思考！
John-->>Alice: 很好！
John->>Bob: 你呢？
Bob-->>John: 好极了！

甘特图 [文档 - 在线编辑器]

gantt
    section 部分
    已完成 :done,    des1, 2014-01-06,2014-01-08
    进行中        :active,  des2, 2014-01-07, 3d
    并行 1   :         des3, after des1, 1d
    并行 2   :         des4, after des1, 1d
    并行 3   :         des5, after des3, 1d
    并行 4   :         des6, after des4, 1d

gantt
    section 部分
    已完成 :done,    des1, 2014-01-06,2014-01-08
    进行中        :active,  des2, 2014-01-07, 3d
    并行 1   :         des3, after des1, 1d
    并行 2   :         des4, after des1, 1d
    并行 3   :         des5, after des3, 1d
    并行 4   :         des6, after des4, 1d

类图 [文档 - 在线编辑器]

classDiagram
Class01 <|-- AveryLongClass : 酷
<<Interface>> Class01
Class09 --> C2 : 我在哪里？
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
class Class10 {
  <<service>>
  int id
  size()
}

classDiagram
Class01 <|-- AveryLongClass : 酷
<<接口>> Class01
Class09 --> C2 : 我在哪？
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
class Class10 {
  <<服务>>
  int id
  size()
}

状态图 [文档 - 在线编辑器]

stateDiagram-v2
[*] --> 静止
静止 --> [*]
静止 --> 移动
移动 --> 静止
移动 --> 碰撞
碰撞 --> [*]

stateDiagram-v2
[*] --> 静止
静止 --> [*]
静止 --> 移动
移动 --> 静止
移动 --> 碰撞
碰撞 --> [*]

饼图 [文档 - 在线编辑器]

pie
"狗" : 386
"猫" : 85.9
"老鼠" : 15

pie
"狗" : 386
"猫" : 85.9
"老鼠" : 15

Git图 [实验性 - 在线编辑器]

条形图（使用甘特图） [文档 - 在线编辑器]

gantt
    title Git问题 - 距离上次更新的天数
    dateFormat  X
    axisFormat %s

    section 问题19062
    71   : 0, 71
    section 问题19401
    36   : 0, 36
    section 问题193
    34   : 0, 34
    section 问题7441
    9    : 0, 9
    section 问题1300
    5    : 0, 5

gantt
    title Git问题 - 距离上次更新的天数
    dateFormat  X
    axisFormat %s

    section 问题19062
    71   : 0, 71
    section 问题19401
    36   : 0, 36
    section 问题193
    34   : 0, 34
    section 问题7441
    9    : 0, 9
    section 问题1300
    5    : 0, 5

用户旅程图 [文档 - 在线编辑器]

  journey
    title 我的工作日
    section 去上班
      泡茶: 5: 我
      上楼: 3: 我
      工作: 1: 我, 猫
    section 回家
      下楼: 5: 我
      坐下: 3: 我

  journey
    title 我的工作日
    section 去上班
      泡茶: 5: 我
      上楼: 3: 我
      工作: 1: 我, 猫
    section 回家
      下楼: 5: 我
      坐下: 3: 我

C4图 [文档]

C4Context
title 互联网银行系统的系统上下文图

Person(customerA, "银行客户A", "银行的客户，拥有个人银行账户。")
Person(customerB, "银行客户B")
Person_Ext(customerC, "银行客户C")
System(SystemAA, "互联网银行系统", "允许客户查看他们的银行账户信息，并进行支付。")

Person(customerD, "银行客户D", "银行的客户，<br/>拥有个人银行账户。")

Enterprise_Boundary(b1, "银行边界") {

  SystemDb_Ext(SystemE, "大型机银行系统", "存储所有核心银行信息，包括客户、账户、交易等。")

  System_Boundary(b2, "银行边界2") {
    System(SystemA, "银行系统A")
    System(SystemB, "银行系统B", "银行的一个系统，包含个人银行账户。")
  }

  System_Ext(SystemC, "电子邮件系统", "内部Microsoft Exchange电子邮件系统。")
  SystemDb(SystemD, "银行系统D数据库", "银行的一个系统，包含个人银行账户。")

  Boundary(b3, "银行边界3", "边界") {
    SystemQueue(SystemF, "银行系统F队列", "银行的一个系统，包含个人银行账户。")
    SystemQueue_Ext(SystemG, "银行系统G队列", "银行的一个系统，包含个人银行账户。")
  }
}

BiRel(customerA, SystemAA, "使用")
BiRel(SystemAA, SystemE, "使用")
Rel(SystemAA, SystemC, "发送电子邮件", "SMTP")
Rel(SystemC, customerA, "发送电子邮件给")

C4Context
title 互联网银行系统的系统上下文图

Person(customerA, "银行客户A", "银行的客户，拥有个人银行账户。")
Person(customerB, "银行客户B")
Person_Ext(customerC, "银行客户C")
System(SystemAA, "互联网银行系统", "允许客户查看他们的银行账户信息，并进行支付。")

Person(customerD, "银行客户D", "银行的客户，<br/>拥有个人银行账户。")

Enterprise_Boundary(b1, "银行边界") {

  SystemDb_Ext(SystemE, "大型机银行系统", "存储所有核心银行信息，包括客户、账户、交易等。")

  System_Boundary(b2, "银行边界2") {
    System(SystemA, "银行系统A")
    System(SystemB, "银行系统B", "银行的一个系统，包含个人银行账户。")
  }

  System_Ext(SystemC, "电子邮件系统", "内部Microsoft Exchange电子邮件系统。")
  SystemDb(SystemD, "银行系统D数据库", "银行的一个系统，包含个人银行账户。")

  Boundary(b3, "银行边界3", "边界") {
    SystemQueue(SystemF, "银行系统F队列", "银行的一个系统，包含个人银行账户。")
    SystemQueue_Ext(SystemG, "银行系统G队列", "银行的一个系统，包含个人银行账户。")
  }
}

BiRel(customerA, SystemAA, "使用")
BiRel(SystemAA, SystemE, "使用")
Rel(SystemAA, SystemC, "发送电子邮件", "SMTP")
Rel(SystemC, customerA, "发送电子邮件给")

发布

对于有权限的人：

更新package.json中的版本号。

npm publish

上述命令会生成文件到dist文件夹并将它们发布到https://www.npmjs.com。

贡献者

Mermaid是一个不断发展的社区，我们随时欢迎新的贡献者。有很多不同的方式可以提供帮助，我们一直在寻找更多的帮手！如果你想知道从哪里开始帮忙，可以看看这个问题。

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

安全性和安全图表

对于公共网站来说，从互联网上的用户那里获取文本，并将其存储以便稍后在浏览器中展示可能是危险的。原因是用户内容可能包含嵌入的恶意脚本，这些脚本会在数据被展示时运行。对于Mermaid来说，这是一个风险，特别是因为mermaid图表包含许多在html中使用的字符，这使得标准的清理方法无法使用，因为它也会破坏图表。我们仍然努力清理incoming代码并不断完善这个过程，但很难保证没有漏洞。

作为对有外部用户的网站的额外安全级别，我们很高兴引入一个新的安全级别，在这个级别中，图表在沙盒化的iframe中渲染，防止代码中的JavaScript被执行。这是安全性提升的一大步。

不幸的是，你不能鱼和熊掌兼得，在这种情况下，这意味着一些交互功能会被阻止，同时也阻止了可能的恶意代码。

报告漏洞

要报告漏洞，请发送电子邮件至security@mermaid.live，描述问题、你采取的创建问题的步骤、受影响的版本，如果知道的话，还有问题的缓解措施。

感谢

Knut Sveidqvist的简短说明：

非常感谢d3和dagre-d3项目提供图形布局和绘图库！

也要感谢js-sequence-diagram项目，我们使用了它的序列图语法。感谢Jessica Peter为甘特图渲染提供的灵感和起点。

感谢Tyler Long，他自2017年4月以来一直是合作者。

感谢不断增长的贡献者列表，是他们将项目带到了这一步！