mermaid是一款开源的画流程图、甘特图、时序图工具,她提供了一种类似markdown的语法来创建各种图。
官网:https://mermaidjs.github.io/
在线编辑器:here
1、入门
我们先试用mermaid提供的在线编辑器,来熟悉一下mermaid的各种画图语法;
1)流程图
2)时序图:
sequenceDiagram
A->> B: Query
B->> C: Forward query
Note right of C: Thinking...
C->> B: Response
B->> A: Forward response
效果如下:
3)甘特:
gantt
dateFormat YYYY-MM-DD
title Shop项目交付计划
section 里程碑 0.1
数据库设计 :active, p1, 2016-08-15, 3d
详细设计 : p2, after p1, 2d
section 里程碑 0.2
后端开发 : p3, 2016-08-22, 20d
前端开发 : p4, 2016-08-22, 15d
section 里程碑 0.3
功能测试 : p6, after p3, 5d
上线 : p7, after p6, 2d
交付 : p8, afterp7, 2d
效果如下
2、使用:
1)mermaid提供了nodejs方式,在命令行上使用:
由于 mermaid 使用 nodejs 写的,所以需要 node 环境,这个不多说,根据自己的平台安装好 node 即可。安装 mermaid :
npm install -g phantomjs && npm install -g mermaid
完成之后,就可以使用命令行了。先新建一个文本文件,我们这里就来展示一个甘特图,命名 demo.gantt
,demo.gantt
文件内容就用上面的甘特图的例子,然后使用命令:
mermaid demo.gantt -w 1920 -s -p -o images
就可以在 images 目录下生成两个文件,一个是 PNG 图片,另一个是 SVG 矢量图。
可以用 mermaid -h 命令查看帮助,这里我贴上刚刚那条命令里用到的参数:
-s --svg 输出 SVG 替代 PNG(试验性的功能)。
-p --png 如果选择保存 SVG,那么加上这个选项可以同时保存 PNG。
-o --outputDir 保存文件的目录(如果不存在会自动创建),默认 `cwd`。
-w --width 生成的 PNG 图片宽度。
2)整合进 Markdown:
忽略
3)在html中使用:
官网上有很多例子可以参考https://unpkg.com/mermaid/ ,这里简单写一个
<!DOCTYPE html>
<html>
<head>
<script src="./mermaid.js"></script>
</head>
<body>
<div class="firstTest">
graph LR;
A--合并-->B;
A-->C;
B-->D;
C-->D;
</div>
<script>
mermaid.init({noteMargin: 10}, ".firstTest");
</script>
</body>
</html>
效果: