一个计算机技术爱好者与学习者

0%

MacOS安装配置Mermaid

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
2
3
4
5
6
7
<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

1
nvm install v20.10.0

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

3、使用v20版本node

1
2
3
nvm use v20.10.0
nvm alias default v20.10.0
nvm list

4. 安装Mermaid

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

5. 安装Chromium(可选)

1、下载chromium

2、放置chromium到指定路径

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

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
2
3
{
"executablePath": "/Users/vk/.cache/puppeteer/chrome/chrome-mac/Chromium.app/Contents/MacOS/Chromium"
}

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

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

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

1
2
3
4
5
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;

3、生成图表

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

7. Python调用Mermaid

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

  • 本文作者: 好好学习的郝
  • 原文链接: https://www.voidking.com/dev-macos-mermaid/
  • 版权声明: 本文采用 BY-NC-SA 许可协议,转载请注明出处!源站会即时更新知识点并修正错误,欢迎访问~
  • 微信公众号同步更新,欢迎关注~