关键字：mermaid 文件怎么打开、.mmd 文件、Mermaid 编辑器、Mermaid 在线预览、Mermaid 导出 PNG/SVG

写架构图、画状态机、做接口时序——Mermaid 已经成为很多开发者文档协作的「事实标准」。然而当一份 .mermaid 或 .mmd 文件落到本地，双击之后往往只能跳出文本编辑器。本文系统梳理 Mermaid 的文件格式、几种主流打开方式，以及最省事的桌面方案。

一、.mermaid 与 .mmd 到底是什么？

.mermaid 与 .mmd 是 Mermaid 官方推荐的两种纯文本扩展名，两者完全等价，只是命名习惯不同：

扩展名	来源	备注
.mmd	Mermaid CLI（mermaid-cli）默认输出	短小、CI 友好
.mermaid	部分编辑器与文档工具偏好	语义更明确

文件内部是 UTF-8 编码的图表 DSL，常见图表类型如下：

flowchart TD
    A[用户请求] --> B{鉴权}
    B -->|通过| C[业务处理]
    B -->|拒绝| D[返回 401]
    C --> E[(数据库)]
    C --> F[返回结果]

sequenceDiagram
    Client->>Server: POST /api/login
    Server->>DB: SELECT user
    DB-->>Server: user row
    Server-->>Client: JWT token

Mermaid 一份语法，可以渲染：flowchart / sequenceDiagram / classDiagram / stateDiagram / erDiagram / gantt / pie / mindmap / timeline / quadrantChart……几乎覆盖所有研发文档场景。

二、主流打开方式横评

方案 1：VS Code + Mermaid 插件

最常见的开发者方案。安装 Markdown Preview Mermaid Support 或 Mermaid Editor 插件后，在 VS Code 内右键 → Preview Mermaid。

• ✅ 免费、和现有 IDE 工作流融合
• ❌ 需要安装插件，新机器要重复配置
• ❌ 多文件批量浏览不方便
• ❌ 部分插件对 v10+ 语法支持滞后

方案 2：mermaid-cli 命令行工具

适合在 CI / 脚本中批量出图：

# 安装
npm install -g @mermaid-js/mermaid-cli

# 渲染为 SVG
mmdc -i flow.mmd -o flow.svg

# 渲染为 PNG，指定主题与背景
mmdc -i flow.mmd -o flow.png -t dark -b transparent

• ✅ 自动化友好，可写进 Makefile / pre-commit
• ❌ 依赖 Node + Chromium（puppeteer），首次安装较重
• ❌ 没有交互预览，只能出图后查看

方案 3：在线编辑器

Mermaid Live Editor、Kroki 等 Web 工具可以临时贴代码看图。

• ✅ 无需安装
• ❌ 涉密 / 内网图表不能上传
• ❌ 网络不稳定时体验差

方案 4：桌面文件管理器 OpenFiles（推荐）

OpenFiles 是一款支持 350+ 文件格式的桌面应用，对 .mermaid / .mmd 提供原生双栏渲染：

核心体验：

• 左侧编辑器 + 右侧预览，所见即所得
• 修改即刷新，无需 Node、无需插件
• 一键 导出 SVG / PNG，直接贴进 PPT、Confluence、语雀
• .mermaid 与 .mmd 同时识别，文件关联开箱即用
• 同一个 App 还能预览 PSD、AI、3D 模型、Lottie 动画、Jupyter Notebook 等 350+ 格式

三、动手实践：3 分钟从代码到一张图

openfiles首页-新建文件-- arch.mermaid，在左边写入如下代码：

flowchart TD
    A[用户上传文件] --> B{OpenFiles 识别格式}
    B -->|.mermaid / .mmd| C[流程图渲染]
    B -->|图片格式| D[图像预览]
    B -->|文档格式| E[文档预览]
    C --> F[导出 SVG/PNG]
    D --> F
    E --> F
    F --> G[完成]

    style A fill:#4F46E5,stroke:#312E81,color:#fff
    style B fill:#06B6D4,stroke:#0E7490,color:#fff
    style C fill:#10B981,stroke:#047857,color:#fff
    style G fill:#F59E0B,stroke:#B45309,color:#fff

右侧立即看到渲染图 → 顶部「导出」按钮选择 SVG / PNG → 拖进文档完事。整个流程不涉及命令行、不依赖 Node 环境。

用 mermaid-cli 验证（可选）：

mmdc -i arch.mermaid -o arch.png -w 1600 -H 900

四、常见坑与排查

1. 中文乱码：检查文件是否为 UTF-8 with BOM；Mermaid 内部不建议带 BOM。
2. 图表撑爆容器：在 flowchart 顶部加 %%{init: {'flowchart': {'htmlLabels': true}}}%%。
3. CLI 报 puppeteer 错误：国内环境可设置 PUPPETEER_DOWNLOAD_HOST=https://npmmirror.com/mirrors。
4. GitHub 渲染失败：确认 fenced code 标记为 ```mermaid，且 Mermaid 语法符合 GitHub 已启用的版本。

五、写在最后

.mermaid / .mmd 是 「可被 diff、可被 review、可被 CI 出图」的文档资产，越早把图表纳入版本控制，越能避免「PPT 截图沉淀不下来」的窘境。

• 个人开发者：VS Code 插件 + OpenFiles 双栏预览，速度最快
• 团队协作：mermaid-cli 接入 CI，自动出图入 Wiki
• 临时查看 / 文件接收方：直接 OpenFiles 双击，零配置

如果你也经常被「打不开的 .mermaid 文件」困扰，可以试试openfiles，它把 350+ 种格式的预览和部分编辑能力收进了一个 App。

---

OpenFiles官网：openfiles.pansysoft.app

觉得有用记得点赞收藏 👍 评论区聊聊你正在用哪种方式画 Mermaid。