MacOS安装配置Mermaid

1. Mermaid简介

Mermaid: JavaScript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically.

参考文档：

• Mermaid官网
• github - mermaid
• github - mermaid-cli

2. Mermaid与Puppeteer

Mermaid库本身并不依赖于Puppeteer，Mermaid可以直接在浏览器或其他Javascript环境下运行，通过Mermaid的API可以生成SVG格式的图表。

<script src="https://unpkg.com/mermaid/dist/mermaid.min.js"></script>

<script>
mermaid.mermaidAPI.initialize({
    startOnLoad:true
});
</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

nvm install v20.10.0

node版本要大于v14，更低版本的node会报错 SyntaxError ，详情参考 Client does not start

3、使用v20版本node

nvm use v20.10.0
nvm alias default v20.10.0
nvm list

4. 安装Mermaid

export PUPPETEER_SKIP_DOWNLOAD="true" 
npm install -g @mermaid-js/mermaid-cli

5. 安装Chromium（可选）

1、下载chromium

2、放置chromium到指定路径

unzip chrome-mac.zip
mv chrome-mac $HOME/.cache/puppeteer/chrome

6. 使用mmdc

6.1. mmdc简介

mmdc是Mermaid CLI（命令行接口）的核心命令，用于把Mermaid图表代码转换为图像文件（如SVG、PNG、PDF）。

mmdc语法：

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

{
    "executablePath": "/Users/vk/.cache/puppeteer/chrome/chrome-mac/Chromium.app/Contents/MacOS/Chromium"
}

如果使用Chrome的话，配置内容如下

{
    "executablePath": "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
}

2、创建一个 mmd 文件 flowchart.mmd

graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

3、生成图表

mmdc -i flowchart.mmd -o flowchart.png -p puppeteer-config.json

7. Python调用Mermaid

参考代码：MetaGPT - metagpt/utils/mermaid.py