渲染Mermaid生成SVG图片

这是之前的一篇，介绍 Mermaid 的基本语法：纯文本的图表生成工具​​Mermaid和常用语法。

Mermaid 代码在大多数标准 Markdown 环境中均可自动渲染并显示图表，但其样式和细节往往难以通过代码直接精细控制。本文介绍一种将 Mermaid 代码渲染为 SVG 图像的方法，生成的 SVG 文件便于后续进行更灵活的编辑与优化。

先有 Node.js 环境（https://nodejs.org），然后安装：

npm install -g @mermaid-js/mermaid-cli

如果安装报错，可以尝试：

npm uninstall -g @mermaid-js/mermaid-cli
npm config set registry https://registry.npmmirror.com
npm config get registry
npm config set strict-ssl false
setx PUPPETEER_SKIP_DOWNLOAD true

然后设置浏览器：

setx PUPPETEER_EXECUTABLE_PATH "C:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe"
或者
setx PUPPETEER_EXECUTABLE_PATH "C:\Program Files\Google\Chrome\Application\chrome.exe"

重启终端后，使得环境生效，然后再安装：

npm install -g @mermaid-js/mermaid-cli

查看是否完成安装：

mmdc --version

运行：

mmdc -i a.mmd -o a.svg

a.mmd 代码文件示例：

flowchart TD
    A[开始] --> B{条件判断}
    B -->|是| C[执行操作]

生成的 a.svg 源码中可能包含 html 信息，inkscape 软件无法解析，文字无法显示。这种情况可以在 .mmd 代码前面加上一句：

%%{init: {"htmlLabels": false}}%%
flowchart TD
    A[开始] --> B{条件判断}
    B -->|是| C[执行操作]

另外，如果在 root 权限下，可能会运行报错，可以使用以下命令：

mmdc -i a.mmd -o a.svg -p puppeteer-config.json

其中 puppeteer-config.json 文件内容为：

{
  "args": ["--no-sandbox", "--disable-setuid-sandbox"]
}

除了生成 SVG 文件外，还可以生成 PDF 文件和 PNG 文件（ PNG 文件像素较低）：

mmdc -i a.mmd -o a.pdf
mmdc -i a.mmd -o a.png

如果觉得环境安装比较麻烦，可以直接使用这个工具：https://tool.guanjihuan.com。

8 次浏览

【说明：本站主要是个人的一些笔记和代码分享，内容可能会不定期修改。为了使全网显示的始终是最新版本，这里的文章未经同意请勿转载。引用请注明出处：https://www.guanjihuan.com】