文章目录
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
原版文档
孪生项目
寻求帮助
事情比较多,我很难跟上。如果我们能够为了解决这个问题,组建一个核心的开发人员团队在未来与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.