mermaid 使用 (javascript 流程图 甘特图 序列图)

目录

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

mermaid 使用

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

mermaid 配置

官方文档
没有看到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的节点,将内容翻译成图形。


<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>Documenttitle>
    <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 指定元素渲染


<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>Documenttitle>
    
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

你可能感兴趣的:(js)