Show HN：Visimer——开源 Mermaid 图表可视化编辑器

Mermaid 图表的可视化编辑器。

Visimer 为 Mermaid 图表带来“所见即所得”的编辑能力。你可以通过实时编辑渲染后的图表来重命名标签、修改形状、添加新节点等。

AI 很擅长生成有助于直观解释概念的 Mermaid 图表。我们希望让用户能够轻松地以可视化方式编辑细节，而不必深入处理 Mermaid 语法。

• 可作为组件库使用，并嵌入任何应用程序。
• 可与 OpenKnowledge 等 Markdown 编辑应用配合使用，编辑 Markdown 中的 Mermaid 图表。

阅读发布文章，了解项目故事并体验一个可实时编辑的图表。

npm i @visimer/core @visimer/dom mermaid

import mermaid from 'mermaid'
import { MermaidWysiwygEditor } from '@visimer/core'
import { MermaidCanvasView } from '@visimer/dom'

const editor = new MermaidWysiwygEditor({
  code: 'flowchart TD\n  A[Start] --> B{OK?}\n  B -->|yes| C[Ship]',
})

new MermaidCanvasView({
  editor,
  container: document.querySelector('#canvas')!,
  mermaid,
  mermaidConfig: { theme: 'dark' },
})

editor.on('change', ({ code }) => console.log(code)) // always-current source

在本地试用全部功能：

pnpm install && pnpm dev   # playground at http://localhost:5173

OpenKnowledge 是一款支持以 WYSIWYG 方式编辑 Markdown 文件的 Markdown 编辑器。它将 Visimer 用作 Mermaid 图表的原生可视化编辑器，可作为面向 Mac、Linux 和 Windows 的 IDE 风格应用或 npm 包使用。

• 原位编辑文本：双击任何标签，即可直接在图表中输入；节点会随输入内容自动扩展。
• 拖拽连接节点、状态、类、实体和参与者，并提供边连接的幽灵预览。
• 拖拽重排时序图消息；对应语句会在源码中重新排序。
• 每个实体均有弹出面板：可选择形状、类型、箭头、基数、颜色、片段和注释。
• 统一撤销栈：画布和代码共用同一撤销历史（可在任意位置按 ⌘Z）。
• 容错能力强：输入过程中出现不完整或错误的语法，也不会使画布变为空白。
• 无损编辑：未知语法会按原样保留；你的 diff 只包含实际修改的内容。

23 种 Mermaid 图表类型中有 22 种可编辑。

项目编辑包括选择、原位编辑、添加和删除；结构编辑则支持连接、重排和重新设置样式。每种类型都支持无损往返转换，并在代码与画布之间同步选区，其中也包括仅可查看的 zenuml（一个外部插件）。

代码编辑器集成是一份契约，而不是依赖关系。core 暴露了 bindTextPane，这是一个由五个方法构成的适配器，可让任何编辑器获得同样的双向同步能力；CodeMirror 和 Monaco 包是该适配器的实现，除非你主动安装，否则两者都不会被引入（编辑器库要么是 peer dependency，要么完全不存在）。使用其他编辑器？实现这个适配器即可，代码大约只有四十行。

• 使用原生 Mermaid.js 渲染器来呈现 Mermaid 图表，确保视觉效果符合其原本设计；我们只是在其上叠加并添加点编辑功能。

• 我们将渲染后的 SVG 元素映射回具体语法树（CST）表示，因此只编辑需要更新的 Mermaid 源码部分，而不会影响文件其余内容。

  flowchart TD SRC["Your Mermaid source"] --> MR["Mermaid.js renderer (unmodified)"] MR --> SVG["Rendered SVG"] SVG --> COR["Correlator: SVG element → CST span"] COR --> OV["Point-edit overlay"] OV -->|"minimal text edit"| SRC

加载中

MIT © Inkeep

Visual editor for Mermaid diagrams.

Visimer brings "what you see is what you get" editability to Mermaid diagrams. Rename labels, change shapes, add new nodes, etc. by live editing the rendered diagram.

AI is great for generating Mermaid diagrams that help explain concepts visually. We wanted to make it easy to edit fine details visually without digging into Mermaid syntax.

• Use as a component library that can be embedded in any application.
• Use with a Markdown editing app like OpenKnowledge to edit Mermaid diagrams in your markdown.

Read the launch post for the story and a live editable diagram.

npm i @visimer/core @visimer/dom mermaid


import mermaid from 'mermaid'
import { MermaidWysiwygEditor } from '@visimer/core'
import { MermaidCanvasView } from '@visimer/dom'

const editor = new MermaidWysiwygEditor({
  code: 'flowchart TD\n  A[Start] --> B{OK?}\n  B -->|yes| C[Ship]',
})

new MermaidCanvasView({
  editor,
  container: document.querySelector('#canvas')!,
  mermaid,
  mermaidConfig: { theme: 'dark' },
})

editor.on('change', ({ code }) => console.log(code)) // always-current source

Try everything locally:

pnpm install && pnpm dev   # playground at http://localhost:5173

OpenKnowledge is a markdown editor that allows WYSIWYG editing of markdown files. It leverages Visimer as the native visual editor for Mermaid diagrams. Available as a Mac, Linux, and Windows IDE-style app or npm package.

• Edit text in place : double-click any label and type right on the diagram; nodes grow as you type
• Drag to connect nodes, states, classes, entities, participants, with a ghost edge preview
• Drag to reorder sequence messages; the statements reorder in source
• Popovers on every entity : shape/type/arrow pickers, cardinalities, color swatches, fragments, notes
• One undo stack across canvas and code (⌘Z anywhere)
• Error tolerant : broken syntax mid-keystroke never blanks the canvas
• Lossless : unknown syntax is preserved verbatim; your diff is only what you changed

22 of 23 Mermaid diagram types are editable.

Item editing is select, edit in place, add, and delete; structural editing adds connect, reorder, and restyle. Every type round-trips losslessly and syncs selection between code and canvas, including view-only zenuml (an external plugin).

The code-editor integration is a contract, not a dependency. core exposes bindTextPane, a five-method adapter that gives any editor the same two-way sync; the CodeMirror and Monaco packages are implementations of it, and neither is pulled in unless you install it (editor libraries are peer dependencies or absent entirely). Some other editor? Implement the adapter, it's about forty lines.

• Leverages the native Mermaid.js renderer for visualizing the Mermaid diagram true to how it’s intended. We just overlay/add point-edit functionality on top.

• We map the rendered SVG elements back to a Concrete Syntax Tree (CST) representation, which we can then use to edit only the parts of the Mermaid source that need updating (without affecting the rest of the file).

  flowchart TD SRC["Your Mermaid source"] --> MR["Mermaid.js renderer (unmodified)"] MR --> SVG["Rendered SVG"] SVG --> COR["Correlator: SVG element → CST span"] COR --> OV["Point-edit overlay"] OV -->|"minimal text edit"| SRC

Loading

MIT © Inkeep