mermaid 使用 (javascript 流程图 甘特图 序列图) 旧城等待, 2022-03-07 06:18 1245阅读 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
还没有评论,来说两句吧...