0
点赞
收藏
分享

微信扫一扫

mermaid工具

mermaid是一款开源的画流程图、甘特图、时序图工具,她提供了一种类似markdown的语法来创建各种图。

官网:​​https://mermaidjs.github.io/​​

在线编辑器:​​here​​

1、入门

我们先试用mermaid提供的在线编辑器,来熟悉一下mermaid的各种画图语法;

1)流程图

mermaid工具_甘特图

2)时序图:

sequenceDiagram
A->> B: Query
B->> C: Forward query
Note right of C: Thinking...
C->> B: Response
B->> A: Forward response

效果如下:

mermaid工具_甘特图_02

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

效果如下

mermaid工具_2d_03

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>

效果:

mermaid工具_甘特图_04


举报

相关推荐

0 条评论