Mermaid保存为图片时模糊如何解决？

Question

使用 Mermaid 生成流程图并保存为图片时，常常遇到图片模糊的问题，影响阅读和展示效果。这是开发者在文档编写和可视化展示中常遇到的技术难题。模糊通常由导出分辨率低、缩放方式不当或浏览器渲染限制引起。如何在不降低使用便捷性的前提下，获得高清图片输出，是使用 Mermaid 时亟需解决的问题。本文将探讨几种实用的方法，帮助你提升导出图片的清晰度。

Answer 1

一、Mermaid 图片模糊问题的成因分析

Mermaid 是一个强大的流程图和图表生成工具，广泛用于 Markdown 文档、Wiki 页面和技术文档中。然而，开发者在使用 Mermaid 生成流程图并导出为图片时，常常遇到图片模糊的问题。造成这一问题的主要原因包括：

• 导出分辨率低：默认导出的图片 DPI 较低，导致在高分辨率设备或打印时模糊。
• 缩放方式不当：浏览器渲染 SVG 或 PNG 时未使用高质量缩放算法。
• 渲染引擎限制：部分浏览器或插件在处理 Mermaid 渲染后的 SVG 时存在兼容性问题。

这些问题直接影响图表的展示效果，尤其在正式文档或演示场景中尤为突出。

二、基础解决方案：提升导出清晰度

要解决 Mermaid 图片模糊问题，首先可以从基础导出设置入手：

1. 使用高清导出插件：如 mermaid-cli 或 mermaid-live-editor 提供的高清导出功能。
2. 调整导出分辨率：在命令行导出时通过参数设置更高 DPI，如 --dpi 300。
3. 使用 SVG 格式：优先导出为 SVG 格式，避免位图缩放带来的失真。

三、进阶方案：优化渲染与导出流程

除了基础设置，还可以通过优化 Mermaid 的渲染流程来提升图像质量：

方法	描述	适用场景
使用 Puppeteer 渲染	通过无头浏览器控制 Mermaid 渲染页面，截图导出高清 PNG。	自动化文档生成、CI/CD 环境
集成 Mermaid API	通过 JavaScript 调用 Mermaid 的 render API，获取 SVG 内容并转换。	Web 应用中动态生成图表

四、实战示例：使用 Mermaid CLI 导出高清图片

以下是一个使用 mermaid-cli 导出高清 PNG 图片的完整示例：

npm install -g @mermaid-js/mermaid-cli
mmdc -i diagram.mermaid -o output.png --dpi 300
  

该命令将指定的 Mermaid 文件渲染为 300 DPI 的 PNG 图片，显著提升清晰度。

五、Mermaid 图表示例

以下是一个简单的 Mermaid 流程图示例，用于展示其基本语法和渲染效果：

graph TD
    A[开始] --> B[生成 Mermaid 代码]
    B --> C{导出方式}
    C -->|SVG| D[导出为矢量图]
    C -->|PNG| E[设置高 DPI 导出]
    D --> F[嵌入 HTML 或文档]
    E --> G[用于演示或打印]