Mermaid js 是一个开源的javascript框架，用于从基于markdown的文本内容生成图表。
定义markdown 文本内容的语法与markdown文本类似。这个项目使用D3 和dagre-d3 库来进行图形布局和绘制。
例如，你把流程定义为markdown，如下例子
graph TD;
Error-->Yes;
Error-->No;
Yes-->Fail;
No-->Success;
它也有一个在线编辑器，你在那里做设计图和测试图。
这个库可以使用javascript生成以下图表:
- 流程图
- 序列图
- 甘特图
- 类图
- Git图
- ER图
- 饼图
- 状态图
- 用户旅程
Mermaid JS的优势
- 开源的简单工具
- 不需要任何商业工具来生成流程图和顺序图的工具。
- 产生基本图的简单工具
- 免费使用
- 在线编辑器可以测试文本内容。
- 输出为PNG和SVG
- 易于修改和重新生成图表和图示
安装和设置
这个库作为javascript/jquery和基于节点的应用程序使用
使用CDN
在HTML的脚本标签中包含CDN URL，如下所示
使用配置对象初始化美人鱼对象
<script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/8.13.4/mermaid.min.js"></script>
<script>mermaid.initialize({startOnLoad:true});</script>
NodeJS npm
你可以使用npm或yarn库来安装mermaid库。
yarn add mermaid
npm install -g mermaid
它在你的nodejs应用程序中安装依赖性。
mermaid API的使用
它在客户端应用程序中使用，在网页上加载它。这些调用渲染功能，解析文本语法，生成图表并输出到SVN元素 在HTML中，我们将写出这样的HTML标签和class="mermaid"
<script>mermaid.initialize({startOnLoad:true});</script>
<div class="mermaid">
</div>
流程图示例
下面的代码片段生成了一个简单的流程图。
<!doctype html>
<html lang="en">
<head>
<title>Mermaind Javascript Flow chart Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/8.13.4/mermaid.min.js"></script>
<script>mermaid.initialize({startOnLoad:true});</script>
</head>
<body>
<div class="mermaid">
graph TD
A[Start] --> C{Answer Question?}
C -->|Yes| D[Do Something]
C -->|No| E[Do Something]
</div>
</body>
</html>
请看这个代码的输出，如截图所示
Mermaid CLI使用方法
Mermaid也可以使用CLI工具从命令行中调用。
它是一个命令行界面工具，以mmd扩展文件作为输入，并输出为SVG、png和PDF格式。 mmd是一个mermaid定义文件，包含文本markdown语法格式的内容。它有各种选项可以配置，高度，背景颜色和CSS样式。
安装CLI- 使用npm命令，这将在全局范围内安装工具。
yarn global add @mermaid-js/mermaid-cli
or
npm install -g @mermaid-js/mermaid-cli
这个cli提供了mmdc命令行选项。你可以按以下方式检查用法和选项
B:\Workspace\blog\mermaid>mmdc -h
Usage: index.bundle [options]
Options:
-V, --version output the version number
-t, --theme [theme] Theme of the chart, could be default, forest, dark or neutral. Optional. Default: default (default: default)
-w, --width [width] Width of the page. Optional. Default: 800 (default: 800)
-H, --height [height] Height of the page. Optional. Default: 600 (default: 600)
-i, --input Input mermaid file. Required.
-o, --output [output] Output file. It should be either svg, png or pdf. Optional. Default: input + ".svg"
-b, --backgroundColor [backgroundColor] Background color. Example: transparent, red, '#F0F0F0'. Optional. Default: white
-c, --configFile [configFile] JSON configuration file for mermaid. Optional
-C, --cssFile [cssFile] CSS file for the page. Optional
-p --puppeteerConfigFile [puppeteerConfigFile] JSON configuration file for puppeteer. Optional
-h, --help output usage information
导出到PDF/PNG/SVG的例子
这是一个从文本中生成序列图并将其转换为png文件并下载的例子。使用一个接受文本文件并生成png文件的mmdc工具。
mmdc -i sequence.mmd -o sequence.png -w 1024 -H 768
你也要为生成的png文件提供宽度和高度的配置。sequence.mmd文件包含以下markdown文本语法
sequenceDiagram
Browser->> Server: send request
Server->> Database: get records
Note right of Database: Records Processed.
Database->> Server: returns records
Server->> Browser: returned response to browser
生成的序列图如下所示
这是一个在线编辑器工具，用于编辑/预览/下载美人鱼的流程图和图表。
这对编码美人鱼定义文件和测试及预览图表流程非常有用。这将帮助开发人员节省时间，并在出现任何问题时进行调试。
这也有各种选项，如为生成的图表生成链接并与他人分享，其他人也可以编辑代码并查看图表。你也可以将生成的流程下载为SVG文件。
