Mermaid

使用Markdown语法以相同的规则从纯文本生成图标和流程图。

当你说明代码时否曾想简化文档编写并避免使用像visio一样繁杂庞大的工具？

这就是mermaid产生的原因，一个简单的类Markdown脚本语言，其通过javascript从纯文本中产生图表。

查看mermaid整合方式和使用方法的列表。

**Mermaid was nominated and won the JS Open Source Awards (2019) in the category “The most exciting use of technology”!!! Thanks to all involved, people committing pull requests, people answering questions and special thanks to Tyler Long who is helping me maintain the project. **

Mermaid被提名并赢得了2019年The most exciting use of technology类JS Open Source奖金。感谢所有参与、提交PR、回答问题并特别感谢Tyler Long帮助我们一直保持这个项目。

8.5版本中的新图表

在8.5版本中修复了一些bug和做了一个提升，添加了一个新的图表类型，实体关系图表。

有关8.2版本的特别记录

在版本8.2中引入了一个安全性改进。引入了securityLevel配置，该配置用于设置在一个已经解析的图表上使用的信任级别。

• true：默认，文本中的标签被编码，点击功能失效
• false：文本中的标签被允许使用，点击功能被允许使用

关闭的问题：

注意：这将更改mermaid默认行为，在升级至8.2版本后如果没有配置securityLevel，则流程图中的标签将被编码为标记，并禁用单击功能。

如果你的应用程序对图源安全性负责，则可以设置securityLevel。通过再次设置可以使单击和标签功能再次被允许。

mermaidAPI.initialize({
    securityLevel:'loose'
});

图表

流程图

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

顺序图

sequenceDiagram
	participant Alice
    participant Bob
    participant John
    Alice->>John: Hello John, how are you?
    loop Healthcheck
    	John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!

甘特图

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[] elemeentData
Class01: size()
Class01: int chimp
Class01: int gorilla
Class08 <--> C2: Cool label

Git图表-实验阶段

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

实体关系图-试验阶段

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

安装

CDN

https://unpkg.com/mermaid@<version>/dist/

使用准备使用的版本号替换<version>，例如https://unpkg.com/mermaid@7.10/dist/

Node.js

yarn add mermaid

原版文档

https://mermaidjs.github.io

孪生项目

• mermaid CLI
• mermaid live editor
• mermaid webpack demo
• mermaid Parcel demo

寻求帮助

事情比较多，我很难跟上。如果我们能够为了解决这个问题，组建一个核心的开发人员团队在未来与mermaid发展合作，这将是很棒的。

作为开发团队的一员，你将会获得对存储库的写权限，并且可以在回答问题和issues时代表本项目。

我们可以一起工作的内容：

• 添加更多像脑图、ert图等类型的图表
• 提升已经存在的图表类型

如果你想参与其中，请随时和我联系。

针对参与者

安装

yarn install

编译

yarn build:watch

Lint

yarn lint

我们使用eslint。我们推荐你安装编辑器插件以便于你能够获得实时的lint结果。

测试

yarn test

在浏览器中的测试手册：打开dist/index.html

发布

对于那些拥有权力取发布的人：

在package.json更新版本号。

npm publish

上述命令会在文件夹dist内产生文件，并将他们发布到npmjs.org。

信任

Many thanks to the d3 and dagre-d3 projects for providing the graphical layout and drawing libraries!

Thanks also to the js-sequence-diagram project for usage of the grammar for the sequence diagrams. Thanks to Jessica Peter for inspiration and starting point for gantt rendering.

Mermaid was created by Knut Sveidqvist for easier documentation.

Tyler Long has became a collaborator since April 2017.

ter for inspiration and starting point for gantt rendering.

Mermaid was created by Knut Sveidqvist for easier documentation.

Tyler Long has became a collaborator since April 2017.

Here is the full list of the projects contributors.