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>
效果：
893
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
