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