Visimer Vibe 项目

Visimer 是一款面向 Mermaid 图表的可视化编辑工具，由 Inkeep 开源发布。它解决了 AI 生成 Mermaid 图表之后无法直观编辑的痛点——用户不必再手动修改底层代码，只需在渲染画布上直接操作，即可完成节点重命名、增删节点、调整连接线、更换形状等操作，所有改动自动同步回 Mermaid 源码，保持双向实时同步。

在技术实现上，Visimer 将 Mermaid.js 原样渲染为 SVG，再通过自研的 Correlator 引擎将每个 SVG 元素映射回 Mermaid 源码的 Concrete Syntax Tree（CST）片段。用户点按画布上的任意节点时，工具仅更新对应的那一小段源码，不影响文件中其余内容，从而实现精确、无损的增量编辑。这种「SVG → CST → 最小文本编辑 → 回写源码」的闭环，让错误语法在输入过程中始终不会导致画布空白。

Visimer 以 npm 包形式发布，包含五个模块：@visimer/core（无 DOM 依赖的核心引擎）、@visimer/dom（交互式画布）、@visimer/codemirror（CodeMirror 6 双向绑定）、@visimer/monaco（Monaco Editor 绑定）和 @visimer/react（React 组件）。支持 22 种 Mermaid 图表类型中的可视化编辑，包括 flowchart、sequence diagram、state diagram、class diagram、ER 图、pie、gantt 等。

安装方式为 npm i @visimer/core @visimer/dom mermaid。配合 OpenKnowledge（支持 Mermaid 可视化编辑的 Markdown IDE）使用，可获得完整的所见即所得文档编辑体验。代码编辑器绑定采用适配器模式，任何编辑器只需实现 bindTextPane 的五个方法即可接入，CodeMirror 和 Monaco 实现均作为独立包按需安装。