Mermaid Editor

Mermaid Editor 是一个基于 Electron 打造的本地桌面应用，用于编写、预览并导出 Mermaid 图表。项目以单机离线能力为核心目标，集成了强大的 CodeMirror 编辑器、实时渲染预览、交互式缩放拖拽以及便捷的文件导入导出能力，让日常绘制流程图、时序图、甘特图等工作更加高效顺畅。

✨ 功能特性

• 所见即所得的实时预览：在编辑器失焦时自动渲染最新 Mermaid 代码，并在右侧预览窗中展示 SVG 图像。
• 强大的图形交互：支持对渲染结果进行缩放、拖拽、节点选中与右键操作，并提供迷你地图（Minimap）快速定位大图内容。
• 多格式文件支持：
  • 新建/打开/保存 .mmd 文档，方便与团队协作共享。
  • 一键导出高保真 SVG 与 2 倍分辨率 PNG 图片，用于文档或演示资料。
• 灵活主题切换：内置默认、深色、森林三套主题，可根据展示环境即时切换，预览区域会同步更新。
• 错误提示友好：渲染失败时，会在编辑区域下方弹出错误信息，协助快速定位语法问题。
• 桌面级体验：Electron 提供跨平台桌面能力，配合 CodeMirror 的行内高亮和历史记录，带来类似 IDE 的编辑体验。

📦 快速开始

环境要求

• Node.js 16 及以上版本
• npm（随 Node.js 安装）

安装依赖

npm install

启动应用

npm start

启动后 Electron 会打开主窗口，左侧为 Mermaid 代码编辑区，右侧为图形预览区。

如需调试，可使用 npm run start:debug 以调试模式启动 Electron，并在 DevTools 中进行排查。

🛠 使用指南

编辑与预览

1. 在左侧编辑器中粘贴或输入 Mermaid 代码。
2. 当编辑器失去焦点时，应用会自动调用 Mermaid 渲染，右侧即时更新 SVG 预览。
3. 可使用鼠标滚轮对图形缩放，按住鼠标左键拖动以调整视图。

文件操作

• 新建：清空当前编辑内容。
• 打开：选择本地 .mmd 或 .txt 文件加载内容。
• 保存：将当前编辑内容保存为 .mmd 文件。

导出图像

• 导出 SVG：生成标准 SVG 文档，包含 XML 声明及 DOCTYPE，便于后续矢量编辑。
• 导出 PNG：在后台先渲染 SVG，再转换为 2 倍分辨率 PNG，适合插入到幻灯片或文档。

视图增强

• 主题切换：工具栏右侧下拉框可在默认、深色、森林主题之间切换。
• 迷你地图：预览窗口右下角显示当前画布缩略图，可拖动视口框快速定位大图区域。
• 元素交互：
  • 单击节点或边可高亮选中。
  • 右键节点或子图将弹出上下文菜单，用于后续拓展自定义操作。

错误诊断

若 Mermaid 语法错误或渲染失败，预览区下方会显示具体报错信息，可依据提示修复代码后再次渲染。

📁 项目结构

mermaid-editor/
├── main.js          # Electron 主进程入口，负责窗口创建
├── src/
│   ├── index.html   # 应用主界面与工具栏结构
│   ├── renderer.js  # 渲染进程逻辑：编辑器、渲染、导出、交互
│   └── styles.css   # 界面与主题样式
├── package.json     # 项目元数据与 npm 脚本
└── README.md        # 项目说明文档

🧩 技术栈

• Electron：提供跨平台桌面应用运行时。
• Mermaid：负责解析并渲染图表。
• CodeMirror 6：实现高级文本编辑体验，包含 Markdown 支持、历史记录等模块。
• @electron/remote：简化渲染进程中的文件对话框调用。

🤝 贡献与反馈

欢迎提交 Issue 或 Pull Request 以完善功能与体验。若在使用过程中遇到问题，也可附上报错信息帮助我们定位。

祝你创作愉快，享受 Mermaid 带来的图表生产力！