mermaid
11.4.0
从类似 Markdown 的文本生成图表。
实时编辑器！
文档 | 开始使用 | CDN | ？加入我们
简体中文
尝试未来版本的实时编辑器预览：开发 |下一个
？ Mermaid 被提名并荣获 JS 开源奖（2019 年）“最令人兴奋的技术应用”类别！！！
感谢所有参与者，提交拉取请求的人们，回答问题的人们！
关于
示例
发布
相关项目
贡献者
安全和安全图表
报告漏洞
欣赏
Mermaid 是一种基于 JavaScript 的图表绘制工具，它使用 Markdown 启发的文本定义和渲染器来创建和修改复杂的图表。 Mermaid 的主要目的是帮助文档跟上开发的步伐。
Doc-Rot 是 Mermaid 帮助解决的第 22 条军规。
图表和文档会耗费开发人员宝贵的时间，并且很快就会过时。但没有图表或文档会破坏生产力并损害组织学习。
Mermaid 通过使用户能够创建易于修改的图表来解决这个问题。它还可以成为生产脚本（和其他代码段）的一部分。
Mermaid 甚至允许非程序员通过 Mermaid 实时编辑器轻松创建详细的图表。
如需视频教程，请访问我们的教程页面。将 Mermaid 与您最喜欢的应用程序一起使用，查看 Mermaid 的集成和用法列表。
您还可以在 GitHub 中使用 Mermaid 以及您喜欢的许多其他应用程序 - 查看 Mermaid 的集成和用法列表。
有关 Mermaid 及其一些更基本用途的更详细介绍，请参阅初学者指南、用法和教程。
我们的 PR 视觉回归测试由 Argos 及其慷慨的开源计划提供支持。它使得审查具有视觉变化的 PR 的过程变得轻而易举。
在我们的发布过程中，我们严重依赖使用 applitools 的视觉回归测试。 Applitools 是一项很棒的服务，易于使用并与我们的测试集成。
以下是可以使用 Mermaid 制作的图表、图表和图形的一些示例。单击此处跳转到文本语法。
flowchart LR
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]流程图LR
A[难] -->|文本| B(圆形)
B --> C{决定}
C -->|一| D[结果1]
C -->|两个| E[结果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
甘特图
部分 部分
已完成：完成，des1，2014-01-06，2014-01-08
活跃：活跃，des2，2014-01-07，3d
并行 1：des3，des1 之后，1d
并行 2：des4，des1 之后，1d
并行 3：des5，des3 之后，1d
并行 4：des6，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()
}类图
Class01 <|-- AveryLongClass : 酷
<<接口>> Class01
Class09 --> C2 : 我在哪里？
09级 --* C3
09 级 --|> 07 级
类07：等于（）
Class07 : 对象[]元素数据
类01：尺寸（）
Class01：国际黑猩猩
Class01：国际大猩猩
类10 {
<<服务>>
整数ID
尺寸（）
} 加载中stateDiagram-v2 [*] --> Still Still --> [*] Still --> Moving Moving --> Still Moving --> Crash Crash --> [*]
状态图-v2
[*] --> 仍然
仍然 --> [*]
仍然 --> 移动
移动-->静止
移动-->崩溃
崩溃 --> [*] 加载中pie "Dogs" : 386 "Cats" : 85.9 "Rats" : 15
馅饼
“狗”：386
《猫》：85.9
“老鼠”：15 加载中gantt title Git Issues - days since last update dateFormat X axisFormat %s section Issue19062 71 : 0, 71 section Issue19401 36 : 0, 36 section Issue193 34 : 0, 34 section Issue7441 9 : 0, 9 section Issue1300 5 : 0, 5
甘特图
title Git 问题 - 自上次更新以来的天数
日期格式 X
轴格式 %s
第 19062 节
71 : 0, 71
第 19401 节
36 : 0, 36
第 193 节
34 : 0, 34
第7441节
9 : 0, 9
第 1300 期
5 : 0, 5 加载中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
旅行
标题 我的工作日
部分 去上班
泡茶：5：我
上楼：3：我
做工作：1：我，猫
部分 回家
下楼：5：我
坐下：3：我加载中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") C4上下文
title 网上银行系统系统上下文图
Person(customerA, "银行客户 A", "银行客户，拥有个人银行账户。")
Person(customerB, "银行客户 B")
Person_Ext(customerC, "银行客户 C")
系统（SystemAA，“网上银行系统”，“允许客户查看有关其银行帐户的信息并进行付款。”）
Person(customerD, "银行客户 D", "银行客户，<br/> 拥有个人银行账户。")
Enterprise_Boundary(b1, "BankBoundary") {
SystemDb_Ext(SystemE, "大型银行系统", "存储有关客户、帐户、交易等的所有核心银行信息")
System_Boundary(b2, "BankBoundary2") {
系统（系统A，“银行系统A”）
System(SystemB, "银行系统B", "银行A系统，有个人银行账户。")
}
System_Ext(SystemC, "电子邮件系统", "内部 Microsoft Exchange 电子邮件系统。")
SystemDb(SystemD, "银行系统 D 数据库", "银行的系统，具有个人银行账户。")
边界（b3，“BankBoundary3”，“边界”）{
SystemQueue(SystemF, "银行系统 F 队列", "银行的系统，有个人银行账户。")
SystemQueue_Ext(SystemG, "银行系统G队列", "银行的系统，有个人银行账户。")
}
}
BiRel（客户A，SystemAA，“使用”）
BiRel（系统AA，系统E，“使用”）
Rel(SystemAA, SystemC, "发送电子邮件", "SMTP")
Rel(SystemC, customerA, "发送电子邮件至") 加载中对于那些有权这样做的人：
更新package.json中的版本号。
npm 发布
上面的命令会在dist文件夹中生成文件并将其发布到 https://www.npmjs.com。
命令行界面
实时编辑器
HTTP服务器
Mermaid 是一个不断发展的社区，并且始终接受新的贡献者。有很多不同的方法可以提供帮助，我们一直在寻找额外的帮助！如果您想知道从哪里开始提供帮助，请查看此问题。
有关如何贡献的详细信息可以在贡献指南中找到
对于公共网站，从互联网上的用户检索文本并存储该内容以便稍后在浏览器中呈现可能会很不稳定。原因是用户内容可能包含嵌入的恶意脚本，这些脚本将在呈现数据时运行。对于 Mermaid 来说这是一个风险，特别是因为 mermaid 图包含 html 中使用的许多字符，这使得标准卫生无法使用，因为它也会破坏图表。我们仍然努力清理传入的代码并不断完善流程，但很难保证不存在任何漏洞。
作为具有外部用户的站点的额外安全级别，我们很高兴引入一个新的安全级别，其中图表在沙盒 iframe 中呈现，防止代码中的 javascript 被执行。这是提高安全性的一大进步。
不幸的是，你不能鱼与熊掌兼得，在这种情况下，这意味着某些交互功能会与可能的恶意代码一起被阻止。
要报告漏洞，请发送电子邮件至 [email protected]，并附上问题描述、创建问题所采取的步骤、受影响的版本以及问题的缓解措施（如果已知）。
Knut Sveidqvist 的简短说明：
非常感谢 d3 和 dagre-d3 项目提供的图形布局和绘图库！
还要感谢 js-sequence-diagram 项目对序列图语法的使用。感谢 Jessica Peter 为甘特图渲染提供的灵感和起点。
感谢 Tyler Long 自 2017 年 4 月以来一直是我们的合作者。
感谢不断增长的贡献者名单，使该项目走到了这一步！
Mermaid 由 Knut Sveidqvist 创建，旨在简化文档编写。
