用鼠标拖拽就能改 Mermaid 流程图这事儿终于被实现了

Mermaid 语法虽然方便，但最痛苦的就是微调。每次想改个节点文字或者挪个位置，得在代码里翻半天，改完还得刷新看效果，这种“盲操”体验实在糟糕。Visimer 这款开源库直接给 Mermaid 加了一个可视化编辑器，让用户能像用画图软件一样，直接在画布上点击、拖拽来修改标签或形状。

这种点对点编辑的逻辑其实解决了 AI 生成图表后的最后一个痛点。现在大模型能秒出 Mermaid 代码，但 AI 很难精准地帮你把某个分支挪到左边或者微调一个词，这时候手动在可视化界面点一下比在 Prompt 里反复描述要高效得多。

技术实现上，Visimer 没有走简单的“全量重新生成”路线，因为那样会把代码里的注释和格式全部搞丢。它的核心逻辑是将渲染后的 SVG 元素反向映射回 CST（具体语法树），这样在视觉上修改某个节点时，它只更新源码中对应的片段，保证了代码的纯净度。

如果你想在自己的项目里集成这个功能，它提供了几种不同的接入方式：

一、编辑器绑定
它原生支持 Monaco 和 CodeMirror，可以实现左边写代码、右边可视化编辑的同步联动。

二、无头模式
对于有特殊 UI 需求的人，可以使用它的 Headless 版本，只用逻辑层，界面自己写。

三、直接实操
如果你只是想快速改个图，可以直接在它的 Playground 里尝试。

对于习惯了 Markdown 工作流的人来说，这种能把可视化编辑和源码编辑结合起来的工具才是真正的生产力。

*