mermaid工具

小灰灰 2021-05-12 11:55 893阅读 0赞

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

官网：[https://mermaidjs.github.io/][https_mermaidjs.github.io]

在线编辑器：[here][]

1、入门

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

1）流程图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXhpYW83MjM4NDY_size_16_color_FFFFFF_t_70][]

2）时序图：

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

效果如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXhpYW83MjM4NDY_size_16_color_FFFFFF_t_70 1][]

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

效果如下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXhpYW83MjM4NDY_size_16_color_FFFFFF_t_70 2][]

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/][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>

效果：

![20181030170418610.png][]

[https_mermaidjs.github.io]: https://mermaidjs.github.io/
[here]: https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiZ3JhcGggVERcbkFbQ2hyaXN0bWFzXSAtLT58R2V0IG1vbmV5fCBCKEdvIHNob3BwaW5nKVxuQiAtLT4gQ3tMZXQgbWUgdGhpbmt9XG5DIC0tPnxPbmV8IERbTGFwdG9wXVxuQyAtLT58VHdvfCBFW2lQaG9uZV1cbkMgLS0-fFRocmVlfCBGW2ZhOmZhLWNhciBDYXJdXG4iLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9fQ
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXhpYW83MjM4NDY_size_16_color_FFFFFF_t_70]: /images/20210511/279fc0e00d824d80a142a18fc7f94478.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXhpYW83MjM4NDY_size_16_color_FFFFFF_t_70 1]: /images/20210511/b99822f3ca8442339f39ce78c7a3fa51.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXhpYW83MjM4NDY_size_16_color_FFFFFF_t_70 2]: /images/20210511/982286d5f9164c5db0e342d61946a159.png
[https_unpkg.com_mermaid]: https://unpkg.com/mermaid/
[20181030170418610.png]: /images/20210511/ad9e5c81a40747238ac68432ea5ce109.png