跪拜 Guibai
← All articles
Vue.js · AI Programming · Frontend

One JSON object: QuireKit's embed object carries mind maps, flowcharts, and whiteboards into any editor

By king王一帅 ·
Read original on juejin.cn ↗ Google Translate ↗ Alt translation

Because the embed object is document-agnostic, teams can stop building diagram support per editor and instead wire one adapter per document type. The structure also means AI tools can generate and modify diagrams without round-tripping through screenshots.

Summary

QuireKit ships five diagram components as MIT-licensed standalone packages: mind map, flowchart, whiteboard, text diagram (Mermaid/PlantUML/Graphviz), and a multi-dimensional table. Each one renders inside a document as a normal image you can resize and align, while the data behind it stays structured and editable. The same JSON object works as a block in rich text, a code fence in Markdown, and an image object in a paged Word-style document.

The design splits editing from storage: the editor has no idea what document it lives in, and each document type needs only a thin adapter that reads and writes the embed object. Two conventions connect them: a universal embed object carries the diagram data, a stable ID, and a preview image; an edit request passes the current data plus a commit callback that returns 'saved', 'conflict', 'readonly', or 'missing'. Kernels are swappable: the flow chart uses AntV X6, mind map uses simple-mind-map, whiteboard uses Excalidraw, and text diagrams use the official Mermaid/PlantUML/Graphviz libraries, all behind adapters.

The structured data is what lets AI write diagrams directly. Each component exposes command descriptions for inserting and updating diagrams; an AI assistant can decide where a flowchart or mind map fits, insert a real editable diagram, and recover from syntax errors. The integration paths cover ProseMirror/Tiptap block nodes, Markdown code fences, paged documents, and direct API calls.

Takeaways
— QuireKit's five diagram components are MIT-licensed and usable standalone.
— The embed object is a JSON with type, version, id, document data, and a base64 preview image.
— The commit callback returns 'saved', 'conflict', 'readonly', or 'missing' so editors detect concurrent changes.
— Mind map supports 20 templates, XMind import/export, and local drafts for unsaved edits.
— Flowchart supports 31 templates, multiple styles (standard, hand-drawn, pencil), auto layout, and presentation mode.
— Whiteboard can import/export Excalidraw files and PNG.
— Text diagram renders Mermaid, PlantUML, and Graphviz live.
— Multi-dimensional table offers both table and kanban views with filters and sorting.
— Kernels: X6, simple-mind-map, Excalidraw, official Mermaid/PlantUML/Graphviz, and a custom data view.
— AI can insert and update diagrams via command descriptions; syntax errors get rejected and the AI can fix and resubmit.
— Integration: rich text uses block node attribute; Markdown uses code fence; paged document uses image object; direct API with npm packages.
— Preview images can be uploaded to a CDN to avoid bloating the document.
— Commercial components cover Word paginated integration and round-trip Word export; free for dev/eval.
Conclusions

Separating editor logic from storage lets a single diagram implementation serve Tiptap, Markdown, and custom editors without duplicating code.

Combining a preview image with structured data keeps documents renderable anywhere (GitHub, Word) without running the editor, while preserving editability.

The commit statuses address real multi-user conflicts, a step beyond typical plugin implementations that just overwrite.

Swappable kernels avoid lock-in to any diagram library; if a kernel dies, only the adapter changes.

AI integration works only because the data is structured; screenshots would make it impossible for AI to edit.

Concepts & terms
Universal embed object
A JSON structure that stores diagram data, a stable ID, and a preview image, allowing any document type to render a diagram without running the editor.
Edit request interface
The contract between a document host and a diagram editor, consisting of current data, a commit callback that returns statuses (saved/conflict/readonly/missing), and a release function.
From the discussion
Featured comments
达拉

Performance seems a bit off—when I opened the official site, a few clicks caused it to lag for quite a while.

king王一帅

Another reason is that edge nodes can have cold-start issues.

See top comments, translated →
Source: juejin.cn ↗ Google Translate ↗ Backup ↗