1. Mermaid简介
Mermaid: JavaScript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically.
参考文档:
2. Mermaid与Puppeteer
Mermaid库本身并不依赖于Puppeteer,Mermaid可以直接在浏览器或其他Javascript环境下运行,通过Mermaid的API可以生成SVG格式的图表。
1 | <script src="https://unpkg.com/mermaid/dist/mermaid.min.js"></script> |
通过这种方式使用Mermaid就不需要安装或配置Puppeteer或Chromium。
但是,Mermaid提供的命令行工具mermaid-cli(mmdc)是依赖Puppeteer的。
mermaid-cli使用Puppeteer(一个Node.js库)启动一个Chromium实例来渲染图表的SVG并将其保存为文件。
3. 安装Node
1、安装nvm
nvm安装方法参考文档《MacOS上软件配置》
2、安装v20版本node
1 | nvm install v20.10.0 |
node版本要大于v14,更低版本的node会报错 SyntaxError ,详情参考 Client does not start
3、使用v20版本node
1 | nvm use v20.10.0 |
4. 安装Mermaid
1 | export PUPPETEER_SKIP_DOWNLOAD="true" |
5. 安装Chromium(可选)
1、下载chromium
2、放置chromium到指定路径
1 | unzip chrome-mac.zip |
6. 使用mmdc
6.1. mmdc简介
mmdc是Mermaid CLI(命令行接口)的核心命令,用于把Mermaid图表代码转换为图像文件(如SVG、PNG、PDF)。
mmdc语法:
1 | mmdc -i /path/to/input_file -o /path/to/output_file -p puppeteer-config.json |
参数说明:
- -i 参数后接输入文件路径,对应的是包含 Mermaid 代码的文件。
- -o 参数后接输出文件路径,对应的是转换后的图像文件。
- -p 参数用于指定Puppeteer配置文件的路径,Puppeteer是一个Node库,提供了控制Chromium、Chrome或Firefox的高级API。
- -w 和 -H 控制浏览器视窗的尺寸(不是生成的图像的尺寸)
- -t 参数用于指定主题样式,比如default、forest、neutral等。
6.2. mmdc使用示例
1、创建 pupeteer 配置文件 puppeteer-config.json
1 | { |
如果使用Chrome的话,配置内容如下
1 | { |
2、创建一个 mmd 文件 flowchart.mmd
1 | graph TD; |
3、生成图表
1 | mmdc -i flowchart.mmd -o flowchart.png -p puppeteer-config.json |