研发、产品和技术写作日常需要流程图、时序图、甘特图。拖拽式工具改稿慢、难纳入版本管理；在线 Mermaid 编辑器依赖网络，代码可能离开本机，中文排版和导出分辨率也不好控。本项目针对这一缺口，做一款 macOS 原生桌面工具：在本地把 Mermaid 文本实时渲染成图，并导出可直接用于演示文稿、文档和网页的 PNG、SVG、PDF。
面向软件研发、技术文档、项目管理和教学演示。业务上已普遍采用 Markdown 与「图表即代码」协作，但桌面端缺少离线、隐私友好、导出可控的原生应用。本应用按开发者工具定位，图表与草稿只留在本机，不上传云端，方便工程师、产品经理和技术写作者在不联网的情况下完成从写代码到出图的闭环。
应用按「编辑—预览—导出」三条主线组织。
编辑模块：左侧为带行号的 Mermaid 代码编辑器，支持语法高亮、缩进/反缩进、一键格式化、查找替换、撤销重做，以及光标行列、图表类型、总行数等状态栏信息。内置流程图、时序图、甘特图、类图、状态图、饼图、ER 图、Git 图、时间线、用户旅程、思维导图、象限图等模板，可打开或拖入 .mmd/.mermaid 文件，维护最近打开列表，未保存内容自动存为本地草稿。
预览模块：右侧用内置 mermaid.js 实时渲染，输入防抖刷新。可切换默认/森林/深色等主题，调节缩放与适合窗口，选择白底、深色或透明格子背景，甘特图可切日/周/月/季度刻度。语法错误会给出中文提示、高亮出错行，并提供补全图表类型或恢复示例等快捷修复。流程图支持语义化配色（开始、决策、处理、数据库等节点类），可在主题编辑器中自定义并附使用指南。界面可在简体中文与英文间切换。
导出与输出模块：支持 PNG、SVG、PDF，分辨率从 512px 到 8192px 或自定义宽度，PNG 可选透明底。提供演示、文档、网页、印刷等用途预设，可复制 SVG/PNG 到剪贴板，也可直接打印。设置中可调编辑器字号、自动保存间隔、预览刷新延迟和默认导出格式。渲染与存储均在本地完成。
本项目由本人独立完成，覆盖产品设计、界面、渲染管线、导出、编辑器、主题系统和本地文件能力。
技术栈为 Swift 5、SwiftUI 与 AppKit 混编。界面用 SwiftUI 搭建左右分栏；编辑器以 NSViewRepresentable 封装自定义 NSTextView（含 TextStorage 语法高亮与行号标尺）；预览用 WKWebView 加载 Bundle 内 mermaidPreview.html 与 mermaid.min.js，经 JavaScript 桥回传渲染成功或错误。文件与偏好走沙盒、用户选择读写权限、UserDefaults 与安全作用域书签。架构上以 ContentView 协调状态，底层拆出渲染、导出、模板、格式化、语义主题、最近文件等服务，避免界面与 Web 渲染耦合。
实现要点：启动时预加载预览页以缩短首次出图；输入防抖减少无效渲染；仅对 flowchart 注入 classDef，避免其他图类型解析失败；导出前将预览改为左上对齐并用 WKPDFConfiguration 按 SVG 真实边界截取，解决居中导致左侧空白的问题，再按目标宽度生成高清 PNG/PDF。
主要难点：系统 TextEditor 无法满足行号、查找高亮与撤销栈，需自建 AppKit 编辑器；浮动查找窗会抢焦点，撤销必须直连编辑器 UndoManager；Web 与原生坐标系、缩放、负 left 叠加，导出裁切容易偏；Mermaid 英文报错需映射为可读中文并定位行号。
评论