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

0%

MacOS安装配置Mermaid

1. Mermaid简介

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

参考文档:Mermaid

2. 安装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

3. 安装Mermaid

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

4. 安装Chromium(可选)

1、下载chromium

2、放置chromium到指定路径

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

5. 使用mmdc

5.1. mmdc简介

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

mmdc语法:

1
mmdc -i input -o output

参数说明:

  • -i 参数后接输入文件路径,对应的是包含 Mermaid 代码的文件。
  • -o 参数后接输出文件路径,对应的是转换后的图像文件。
  • -p 参数用于指定Puppeteer配置文件的路径,Puppeteer是一个Node库,提供了控制Chromium、Chrome或Firefox的高级API。
  • -w 和 -H 控制浏览器视窗的尺寸(不是生成的图像的尺寸)
  • -t 参数用于指定主题样式,比如default、forest、neutral等。

5.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

6. Python调用Mermaid

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

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