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

While building QuireKit, I turned the five most common diagram types in documents—mind maps, flowcharts, whiteboards, text diagrams, and multi-dimensional tables—into a standalone open-source component set under the MIT license.

QuireKit's own three document types—paginated documents, block documents, and Markdown—all use this same set. The components can also be used independently: Tiptap, ProseMirror, CodeMirror, your own editor, or even a textarea can all integrate them.

Double-click the diagram in a document to open this editor.

It differs from the diagram and flowchart plugins you've seen in four ways:

• Used like an image. In any document, they render as a normal image: click to resize or align like an image, while the underlying data remains editable. The experience is identical across all three document types.
• One piece of data works in every document type. In rich text it's a block, in Markdown it's code, in a Word-style paginated document it's an image object.
• AI-assisted writing can draw directly. When AI helps write an article, it inserts flowcharts or mind maps where appropriate—these are real, double-click-editable images, not screenshots.
• Exported diagrams don't 'die'. Export to Word: in Word they appear as images; import back, and you can double-click to keep editing.

What stands out in each of the five editors

Mind Map (Quire Mind)

• 20 templates across four categories: basic styles, work planning, study & life, analysis & decision-making—weekly plans, project tracking, meeting minutes, SWOT analysis, reading notes... ready to use
• One-click switching between brain map, logic chart, organization chart, and timeline structures
• Add links, notes, images, and markers to topics
• Directly import/export XMind, and generate from a text outline
• Close without saving and changes stay in a local draft, recoverable next time you open

Mind map template library.

Docs: https://docs.quirekit.com/plugins/reference/mind-map/

Flowchart

• Three drawing styles: standard, light hand-drawn, pencil hatching. The hand-drawn style immediately changes the feel when used in technical docs or proposal reports.
• 31 templates across more than a dozen categories: ER diagrams, UML class diagrams, sequence diagrams, swimlane diagrams, organization charts, fishbone analysis, architecture relationships, business processes, data processing, and more
• Auto layout, alignment/distribution, rotate/flip, automatic line routing, paginated printing support
• Presentation mode: step-through animations of nodes and connections with pause, single-step, and speed adjustment
• Can draw ER diagrams (fields, types, primary/foreign keys, relationship cardinality) and UML class diagrams (association, dependency, generalization, realization, aggregation, composition)
• Save an entire diagram as a template; save selected parts as components for reuse later

Hand-drawn style: natural strokes, pencil hatching fills.

Flowchart template library.

Docs: https://docs.quirekit.com/plugins/reference/flowchart/

Whiteboard

• Freehand drawing, shapes, text, and ink
• Directly import/export Excalidraw files, and export PNG

Docs: https://docs.quirekit.com/plugins/reference/whiteboard/

Text Diagram

• Write Mermaid, PlantUML, or Graphviz source and see the diagram render live beside it
• Switch languages or start from a template

Online demo: https://text-diagram.quirekit.com

Multi-dimensional Table

• Fields: text, number, single select, multi select, checkbox, date, datetime, and more
• Switch between table and kanban views anytime; drag cards to change status
• Filter, sort, group, aggregate values, and edit long text in the record detail panel

Kanban view of the multi-dimensional table.

Docs: https://docs.quirekit.com/plugins/reference/data-view/

Why I built it

Text alone is no longer enough for documents: you need illustrations, they need to look good, and they need to be readable and writable by AI. Mind maps, flowcharts, whiteboards, and multi-dimensional tables have become standard parts of a document.

Using AI to help write articles is common, but most output is a full screen of text. To have AI produce visually rich articles, diagrams cannot be screenshots: to AI, a screenshot is just a pile of pixels—it can neither draw nor modify it. The diagram's data must remain structured inside the document for AI to draw and edit it.

Building QuireKit added another layer of difficulty: three document types—paginated, block, and Markdown—had to share the same mind map.

Common approaches on the market fall into three categories, each with its own use cases, but none met this need:

• Embed a ready-made product. For example, draw.io's embed mode: load the full editor in an iframe and exchange XML via messages. Feature-rich, but the UI and data format are its own; how it displays when exported to Word or written into Markdown is something you handle yourself.
• Use a canvas library directly. X6, simple-mind-map, and Excalidraw have mature canvases and interactions, but they only handle 'drawing'. Where data lives, how to save and cancel, what to display on export—each integrator has to write that themselves.
• Editor-native extensions. These work out of the box but are tied to one editor: data is stored in that editor's format, and switching editors means redoing everything.

So my approach is: use ready-made libraries for the canvas, and build the 'put it into a document' layer myself, making it generic. Any document integrates once and it works.

How it's designed

The core idea is one sentence: the editor only handles editing; where the data lives is decided by the document.

The editor doesn't know which document it's in. It takes a piece of data, lets the user edit, and hands the result back. Each document type only needs a very thin adapter layer to extract the data and write back the result. Two conventions connect the layers.

Convention 1: a universal embed object

A diagram, no matter which document it lives in, is the same JSON object:

{
  "type": "quirekit-mind-map-embed",
  "version": 1,
  "id": "mind-1",
  "title": "项目推进",
  "document": { "...": "diagram data itself" },
  "preview": { "dataUrl": "data:image/png;base64,...", "width": 732, "height": 380 }
}

It consists of three parts: the diagram data, a stable ID, and a preview image.

The data lives in document; that's what AI reads and modifies. The preview image is for places that don't recognize this object: viewing Markdown on GitHub, or exporting to Word/PDF without running the editor—it just displays the image. If the preview is lost, it can be regenerated from the data.

Convention 2: an edit request

The adapter layer only needs to provide three things to open the editor:

interface MindMapEditRequest {
  document: MindMapEmbed                                                         // current data
  commit(document: MindMapEmbed): 'saved' | 'conflict' | 'readonly' | 'missing'  // write back
  release(): void                                                                // done, return focus
}

commit has four possible return values. While you're editing the diagram, the document may have been modified by someone else, become read-only, or the diagram may have been deleted; the editor uses the return value to prompt you, not silently overwrite others' content. Closing without saving is fine—changes stay in a local draft and can be recovered next time.

The kernel is swappable

The canvas kernels use mature open-source libraries: flowcharts use AntV X6, mind maps use simple-mind-map, whiteboards use Excalidraw, and text diagrams directly use the official Mermaid, PlantUML, and Graphviz libraries. Thanks to those projects.

Kernels are connected through independent adapter packages. If upstream maintenance stops, or a better option appears, swap the kernel without affecting the data in documents. The multi-dimensional table is self-written. All editors share the same component library, so the UI style is consistent.

AI-assisted writing of visually rich articles

The biggest benefit of structured data is that AI can 'draw' directly.

Each graphic component describes its own commands for AI to call: insert flowchart, insert mind map, insert text diagram, and update them. In the MD Editor, when AI assists writing an article, it first figures out where a diagram is needed and which type: steps and branches get a flowchart, hierarchy and outlines get a mind map, sequence interactions get a sequence diagram, proportions and trends get a pie or line chart, comparisons get a table.

What AI inserts are real flowcharts and mind maps, just like ones you draw by hand—double-click to continue editing. If it makes a mistake, for example a Mermaid syntax error, that step is rejected and the error is returned; AI fixes the source and resubmits. Each insertion or modification is one undo step; when modifying an existing diagram, the version is checked so it won't overwrite what someone just changed.

(The graphic components and command descriptions are MIT; the AI assistant in MD Editor is a commercial component, free for development and evaluation.)

How to integrate in different scenarios

Rich text editors (ProseMirror, Tiptap, and similar)

Store the embed object as a property of a block node; double-click the block opens the editor. QuireKit's block editor integrates this way:

Flowcharts and mind maps in the block editor can be dragged and copied.

Markdown

Write the embed object's JSON into a code fence. In the editor it displays as a diagram; in source it's just code:

Switch to source view and the map is a quirekit-mind-map code fence.

Put it in Git, and every change is visible; opening with GitHub or VS Code won't break anything. QuireKit's Markdown editor (based on CodeMirror) integrates this way.

Word-style paginated documents

Diagrams sit on the page as image objects, paginate and print with the text, and store the diagram data behind them:

When exporting to Word, both the preview image and original data are written into the file. After importing back, mind maps and flowcharts are still editable. This part involves the Word format and belongs to QuireKit's commercial components; development and evaluation are free.

No editor, or you want to manage storage yourself

Call directly: read data, open the editor, write back on save.

npm install @quirekit/mind-map@alpha @quirekit/mind-editor@alpha

import { createMindMapEmbed, parseMindMapEmbed, serializeMindMapEmbed } from '@quirekit/mind-map'
import { openMindMapDialog } from '@quirekit/mind-editor'
import '@quirekit/mind-editor/styles.css'

const saved = loadFromYourDoc()                      // your own read logic, returns string or null
const document = saved ? parseMindMapEmbed(saved) : createMindMapEmbed('mind-1')

openMindMapDialog({
  ownerDocument: window.document,
  request: {
    document,
    commit(next) {
      saveToYourDoc(serializeMindMapEmbed(next))     // your own write logic
      return 'saved'
    },
    release() {},
  },
})

If you want to embed in a page instead of a dialog, use the Vue component QuireMindEditor (import from @quirekit/mind-editor/vue). Flowcharts and whiteboards work the same way, just with the corresponding packages.

Preview image too large

The preview image defaults to base64 embedded in the document; no server needed. The cost is size: a diagram can be tens to hundreds of KB, and the Markdown source will show a long encoded string.

If you have an image host, provide an upload function:

openMindMapDialog({
  // ...
  uploadPreview: async (png) => uploadToYourCdn(png),   // returns image URL
})

The preview image uploads like a normal image, and the document only saves the URL.

Open source scope

• MIT: 5 editors, block editor, Markdown editor, and their integration layers. Closed-source commercial use is allowed.
• Commercial (free for development and evaluation): paginated document integration involving Word format, and round-trip Word export.

About QuireKit

These graphic components are just a small part of QuireKit. QuireKit is an open-source document editor ecosystem for building online documents, knowledge bases, and Markdown writing tools in your own product. Underneath are two Tiptap-style editor frameworks—one based on ProseMirror, one on CodeMirror—and on top are three ready-made editors:

• Classic paginated document editor: QuireKit's flagship product. It truly paginates in the browser, computing line breaks, page breaks, cursors, and selections itself, drawn on Canvas or SVG, edited page by page like Word or WPS. Can import/export DOCX, and export PDF and OFD (these are commercial components).
• MSFE, a Markdown-customized editor framework: the Markdown source is the document itself; document view, live preview, and source view all edit the same Markdown, and untouched lines remain byte-for-byte unchanged. The MD Editor described above is built on it.
• Block editor: Notion-style block documents, suited for notes and knowledge bases.

All three editors and these graphic components use the same UI component library.

Currently alpha; interfaces will be adjusted. Feedback and trials welcome:

• Website (homepage shows Classic; you can edit directly): https://quirekit.com
• MSFE: https://msfe.quirekit.com
• Block editor: https://quirekit.com/demo/block-editor/
• GitHub: https://github.com/quirekit/quirekit

If you find it useful, a star is appreciated. Also curious: which diagram would you most want in your editor?