给你的编辑器加上思维导图、流程图、白板：一套开源组件，多种文档通用

白小白ID266 · 2 小时前

做 QuireKit 的时候，我顺手把文档里最常用的 5 种图：思维导图、流程图、白板、文本绘图、多维表格，做成了一套独立的开源组件，MIT 许可。
QuireKit 自己的三种文档：分页文档、块文档、Markdown ，用的就是这一套。它们也可以单独拿出来用：Tiptap 、ProseMirror 、CodeMirror 、自己写的编辑器，甚至一个 textarea ，都能接。

双击文档里的导图，打开的就是这个编辑器。
它和你见过的导图、流程图插件，有四点不一样：

像图片一样用。 在任何文档里，它们都渲染成一张普通图片：单击可以像图片一样调大小、改对齐，背后存的却是能继续编辑的数据。三种文档里体验完全一致。
一份数据，哪种文档都能放。 在富文本里是一个块，在 Markdown 里是一段代码，在 Word 式的分页文档里是一个图片对象。
AI 辅助写作时能直接画。 用 AI 辅助写文章，它会在合适的地方插入流程图、导图，插进来的是能双击编辑的真图，不是截图。
导出了也不会“死”。 导出成 Word ，在 Word 里是图；导回来，还能双击接着改。

五个编辑器，各有什么亮点

思维导图（ Quire Mind ）

20 个模板，分基础风格、工作规划、学习生活、分析决策四类：每周计划、项目推进、会议记录、SWOT 分析、读书摘记……打开就能用
脑图、逻辑图、组织结构图、时间轴，一键切换结构
主题上能加链接、备注、图片和标记
直接导入导出 XMind ，也能从文字大纲生成
没保存就关掉，修改留在本机草稿里，下次打开还能恢复

思维导图的模板库。
文档： https://docs.quirekit.com/plugins/reference/mind-map/
流程图

三种画风：标准、轻手绘、铅笔排线。手绘风格放进技术文档、方案汇报里，一下子就不一样了
31 个模板，分 ER 图、UML 类图、时序图、泳道图、组织结构、鱼骨分析、架构关系、业务流程、数据处理等十多类
自动布局、对齐分布、旋转翻转，连线自动绕行，支持分页打印
演示模式：按步骤播放节点和连线的流动动画，可以暂停、单步、调速
能画 ER 图（字段、类型、主外键、关系基数）和 UML 类图（关联、依赖、泛化、实现、聚合、组合）
整张图能存成模板，选中的部分能存成组件，下次直接复用

流程图的手绘风格：自然笔触，铅笔排线填充。

流程图的模板库。
文档： https://docs.quirekit.com/plugins/reference/flowchart/
白板

自由书写、图形、文字和笔迹
直接导入导出 Excalidraw 文件，也能导出 PNG

文档： https://docs.quirekit.com/plugins/reference/whiteboard/
文本绘图

写 Mermaid 、PlantUML 、Graphviz 的源码，旁边实时出图
可以切换语言，也能从模板开始

在线体验： https://text-diagram.quirekit.com
多维表格

文本、数字、单选、多选、勾选、日期、日期时间等字段
表格和看板两种视图随时切换，拖动卡片就改状态
筛选、排序、分组、数值汇总，记录详情里编辑长文本

多维表格的看板视图。
文档： https://docs.quirekit.com/plugins/reference/data-view/
为什么要做

现在的文档，只有文字已经不够：要图文并茂，图要好看，还要能被 AI 读写。导图、流程图、白板、多维表格，成了文档的标配。
用 AI 辅助写文章已经很常见了，可写出来的大多是一整屏文字。要让 AI 辅助写出图文并茂的文章，图就不能是截图：截图在 AI 眼里是一团像素，它既画不出来，也改不了。图的数据得以结构化的形式留在文档里，AI 才能画、才能改。
我做 QuireKit 时，难点还要再多一层：分页文档、块文档、Markdown 三种文档，要共用同一张导图。
市面上常见的做法有三类，各有适用的场景，但都满足不了这个需求：

嵌入成品。 比如 draw.io 的嵌入模式：用 iframe 加载完整的编辑器，通过消息传递 XML 。功能很全，但界面和数据格式都是它自己的，导出 Word 、写进 Markdown 时怎么显示，得自己处理。
直接用画布库。 X6 、simple-mind-map 、Excalidraw 的画布和交互都很成熟，可它们只负责“画”。数据存在哪、怎么保存和取消、导出时显示什么，每个接入方都要自己再写一遍。
编辑器自带的扩展。 开箱即用，但和那一个编辑器绑死了：数据存在那个编辑器的格式里，换个编辑器就得重做。

所以我的思路是：画布用现成的库，“放进文档”这一层自己做，而且做成通用的。 任何文档，接一次就能用。
怎么设计的

核心只有一句话：编辑器只管编辑，存在哪由文档决定。
编辑器不知道自己在哪种文档里。它拿到一份数据，让用户编辑，再把结果交回去。每种文档只需要写一个很薄的接入层，负责取出数据、写回结果。两层之间，只靠两个约定连接。
约定一：一个通用的嵌入对象

一张导图，不管放在哪种文档里，都是同一个 JSON 对象：
{ "type": "quirekit-mind-map-embed", "version": 1, "id": "mind-1", "title": "项目推进", "document": { "...": "导图本身的数据" }, "preview": { "dataUrl": "data:image/png;base64,...", "width": 732, "height": 380 }}它由三部分组成：导图的数据、一个稳定的 ID 、一张预览图。
数据在 document 里，AI 读的、改的就是它。预览图留给不认识这种对象的地方：在 GitHub 上看 Markdown ，或者导出 Word 、PDF 时，不用把编辑器跑起来，直接显示这张图。预览图丢了，也能从数据重新生成。
约定二：一个编辑请求

接入层要打开编辑器，只需要提供三项：
interface MindMapEditRequest { document: MindMapEmbed // 当前数据 commit(document: MindMapEmbed): 'saved' | 'conflict' | 'readonly' | 'missing' // 写回 release(): void // 结束，归还焦点}commit 有四种返回值。你在编辑导图的这段时间里，文档可能已经被别人改了、变成了只读，或者这张图已经被删掉了；编辑器会按返回值提示你，不会悄悄覆盖别人的内容。没保存就关掉也没关系，修改会留在本机的草稿里，下次打开还能恢复。
内核可以随时换

画布内核用的是成熟的开源库：流程图基于 AntV X6 ，思维导图基于 simple-mind-map ，白板基于 Excalidraw ，文本绘图直接用 Mermaid 、PlantUML 、Graphviz 的官方库。感谢这些项目。
内核通过独立的适配包接入。哪天上游停止维护，或者出现了更合适的选择，换掉内核即可，文档里的数据不受影响。多维表格是自己写的。所有编辑器共用同一套组件库，界面风格一致。
AI 辅助写出图文并茂的文章

结构化数据带来的最大好处，是 AI 可以直接“画图”。
每个图形组件都会把自己的命令描述出来，交给 AI 调用：插入流程图、插入思维导图、插入文本绘图，以及更新它们。在 MD Editor 里用 AI 辅助写一篇文章，它会先想清楚哪里需要图、该用哪种图：步骤和分支用流程图，层级和提纲用思维导图，时序交互用时序图，占比和趋势用饼图或折线图，对比用表格。
AI 插进来的是真正的流程图和导图，跟你手动画的一样，双击就能接着改。画错了也不怕：比如 Mermaid 语法写错，这一步会被拒绝并返回错误，AI 按错误修好源码再提交。每次插入或修改都是一步撤销；修改已有的图时会核对版本，不会覆盖别人刚改过的内容。
（图形组件和命令描述都是 MIT ； MD Editor 里的 AI 助手是商业组件，开发和评估免费。）
不同场景怎么接

富文本编辑器（ ProseMirror 、Tiptap 一类）

嵌入对象存成一个块节点的属性，双击这个块就打开编辑器。QuireKit 的块编辑器就是这样接的：

块编辑器里的流程图和思维导图，可以拖动、复制。
Markdown

把嵌入对象的 JSON 写进一段代码围栏。编辑器里显示成图，源码里就是一段代码：

切到源码视图，导图就是一段 quirekit-mind-map 代码围栏。
放进 Git ，每次修改都看得见；用 GitHub 、VS Code 打开也不会坏。QuireKit 的 Markdown 编辑器（基于 CodeMirror ）就是这样接的。
Word 式的分页文档

导图以图片对象的形式排在页面上，随正文一起分页、一起打印，背后存着导图的数据：

导出 Word 时，预览图和原始数据一起写进文件。导回来以后，导图和流程图还能接着编辑。这部分涉及 Word 格式，属于 QuireKit 的商业组件，开发和评估免费。
没有编辑器，或者想自己管存储

直接调用：读出数据，打开编辑器，保存时写回。
npm install @quirekit/mind-map@alpha @quirekit/mind-editor@alphaimport { createMindMapEmbed, parseMindMapEmbed, serializeMindMapEmbed } from '@quirekit/mind-map'import { openMindMapDialog } from '@quirekit/mind-editor'import '@quirekit/mind-editor/styles.css'const saved = loadFromYourDoc() // 你自己的读取逻辑，返回字符串或 nullconst document = saved ? parseMindMapEmbed(saved) : createMindMapEmbed('mind-1')openMindMapDialog({ ownerDocument: window.document, request: { document, commit(next) { saveToYourDoc(serializeMindMapEmbed(next)) // 你自己的写入逻辑 return 'saved' }, release() {}, },})想嵌在页面里而不是弹窗，用 Vue 组件 QuireMindEditor（从 @quirekit/mind-editor/vue 导入）。流程图、白板的接法相同，换成对应的包即可。
预览图太大

预览图默认以 base64 写进文档，不需要任何服务就能用。代价是体积：一张导图几十到几百 KB ，Markdown 源码里会出现一大段编码。
有图床的话，提供一个上传函数：
openMindMapDialog({ // ... uploadPreview: async (png) => uploadToYourCdn(png), // 返回图片地址})预览图会像普通图片一样传上去，文档里只保存地址。
开源范围

MIT：5 个编辑器、块编辑器、Markdown 编辑器，以及它们的接入层，闭源商用也可以。
商业组件（开发和评估免费）：分页文档中涉及 Word 格式的接入，以及可往返的 Word 导出。

最后说说 QuireKit

这些图形组件，只是 QuireKit 的一小部分。QuireKit 是一套开源的文档编辑器生态，用来在你自己的产品里搭在线文档、知识库和 Markdown 写作工具。它底下是两套 Tiptap 风格的编辑器框架，一套基于 ProseMirror ，一套基于 CodeMirror ，上面是三个现成的编辑器：

Classic 分页文档编辑器：QuireKit 主打的产品。在浏览器里真正分页，断行、分页、光标、选区全部自己算，画在 Canvas 或 SVG 上，像 Word 、WPS 一样一页一页地编辑。可以导入导出 DOCX ，也能导出 PDF 和 OFD （这几项是商业组件）。
MSFE ，为 Markdown 定制的编辑器框架：Markdown 原文就是文档，文档视图、实时预览、源码视图改的都是同一份 Markdown ，没碰过的行一个字节都不变。上面那个 Markdown 编辑器 MD Editor ，就是用它搭出来的。
块编辑器：Notion 式的块文档，适合笔记和知识库。

三个编辑器和这些图形组件，用的都是同一套 UI 组件库。
目前还是 alpha ，接口还会调整，欢迎试用和反馈：

官网（首屏就是 Classic ，可以直接编辑）： https://quirekit.com
MSFE： https://msfe.quirekit.com
块编辑器： https://quirekit.com/demo/block-editor/
GitHub： https://github.com/quirekit/quirekit

觉得有用，欢迎点个 Star 。也想听听：你的编辑器最想接入哪种图？

⚠️内容来自互联网，如有侵权请点击反馈！侵权投诉

给你的编辑器加上思维导图、流程图、白板：一套开源组件，多种文档通用

回复

有头有脸

快捷访问

附加功能

关于我们

关注我们