mermaid 使用（javascript 流程图甘特图序列图）

旧城等待， 2022-03-07 06:18 1293阅读 0赞

### 目录 ###

*  mermaid 使用
 *   *  mermaid 配置
     *  简单例子 script 方式使用
     *  render 指定元素渲染
     *  本地生成
     *   *  安装cli
         *  报错

# mermaid 使用 #

用来在页面画流程图、甘特图、序列图。mermaid使用的是[d3.js][]绘制的SVG图形

## mermaid 配置 ##

[官方文档][Link 1]  
没有看到API，不过可以参考配置文件GitHub项目的源码`./src/mermaidAPI.js`。  
初始化方法。

mermaid.initialize({ 
          theme: 'forest',//default, forest, dark or neutral
          // themeCSS: '.node rect { fill: red; }',
          logLevel: 3,
          flowchart: {  curve: 'linear' },
          gantt: {  axisFormat: '%m/%d/%Y' },
          sequence: {  actorMargin: 50 },
          // sequenceDiagram: { actorMargin: 300 } // deprecated
        });

## 简单例子 script 方式使用 ##

mermaid 会选中所有的class为mermaid的节点，将内容翻译成图形。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <script src="https://cdn.bootcss.com/mermaid/8.0.0-rc.8/mermaid.min.js"></script>
    </head>
    <body>
        <div class="mermaid">
            sequenceDiagram A-->B: Works!
        </div>
        <div class="firstTest mermaid">
           graph LR;
            A--合并-->B;
            A-->C;
            B-->D;
            C-->D;
        </div>
    </body>
    </html>

## render 指定元素渲染 ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        
    </head>
    <body>
        <div id="graphDiv" style="max-width:100px !important;"></div>
        <script> document.onreadystatechange = function(){ if(document.readyState === 'complete') addSvg() } function addSvg(){ var insertSvg = function(svgCode, bindFunctions){ document.querySelector("#graphDiv").innerHTML = svgCode; }; var graphDefinition = 'graph TB\na-->b'; var graph = mermaid.render('graphDiv', graphDefinition, insertSvg); } </script>
    
    </body>
    <script src="https://cdn.bootcss.com/mermaid/8.0.0-rc.8/mermaid.min.js"></script>
    </html>

## 本地生成 ##

[mermaid.cli][]  
安装cli(command-line interface)工具，在终端就可以使用了。

### 安装cli ###

`npm install -g mermaid.cli`  
文件input.mmd

graph TD
    	A[Christmas] -->|Get money| B(Go shopping)
    	B --> C{ Let me think}
    	C -->|One| D[Laptop]
    	C -->|Two| E[iPhone]
    	C -->|Three| F[fa:fa-car Car]

mmdc -h //查看帮助
    mmdc -i input.mmd // 生成图像 input.mmd.svg

结果

Get money

One

Two

Three

Christmas

Go shopping

Let me think

Laptop

iPhone

Car

### 报错 ###

`Launcher.launch (/usr/local/lib/node_modules/mermaid.cli/node_modules/puppeteer/lib/Launcher.js:119:15) UnhandledPromiseRejectionWarning Error: Chromium revision is not downloaded`  
`mermaid.cli/node_modules/puppeteer`说明mermaid.cli的安装包里面依赖puppeteer如果不能翻墙就用cnpm重新安装安装mermaid.cli

[d3.js]: https://github.com/d3/d3
[Link 1]: https://github.com/knsv/mermaid/blob/master/src/mermaidAPI.js
[mermaid.cli]: https://github.com/mermaidjs/mermaid.cli