Flowcharts, mind maps and whiteboards

The algorithm diagrams use QuireKit's existing flowchart, mind-map and whiteboard renderers. Their nodes, captions and connections remain in native documents. “Diagram source” reveals the JSON; “Full view” opens a larger viewport.

Put a diagram in this documentation

This site registers renderers for three fenced languages. Place a complete document exported from the editor inside the corresponding fence.

This complete minimal flowchart can be copied directly. The documentation's code component renders the fence automatically:

{"type":"quirekit-flowchart-embed","version":1,"id":"docs-minimal-flow","title":"From chunks to parsing","preview":null,"document":{"format":"quirekit-flowchart","version":1,"revision":0,"nodes":[{"id":"chunk","shape":"terminator","x":0,"y":0,"width":180,"height":72,"text":"Receive a chunk","style":{}},{"id":"parse","shape":"process","x":280,"y":0,"width":180,"height":72,"text":"Resume parsing","style":{}}],"edges":[{"id":"chunk-parse","source":{"node":"chunk","port":"right"},"target":{"node":"parse","port":"left"},"vertices":[],"routing":"orthogonal","label":"","labelPosition":0.5,"style":{}}]}}

The viewer only reads source. Zoom and “Fit” change the viewport without changing the document.

Watch source and syntax trees change

These scenes are drawn and played by QuireKit Flowchart and show actual Markdown source and Lezer syntax. By default it inserts bold text, inline code and a list in sequence. Follow the moving fragments to their source positions, affected old branches and new syntax nodes. Play, pause, step, go back and replay; the view has no pan, drag or zoom.

recording/fixture.ts defines literal source and sequential edits; recording/snapshots.ts records real incremental parsing and public reading projections. Middle edits use an EditorState source transaction, while tail appends and late references call MarkdownStream.append. recording/tree.ts extracts native types, children, ranges and object identities, rather than guessing reuse from similar text.

Replay only selects immutable snapshots for the normal QuireMarkdown component. It does not insert the fragment again or remount historical Vue nodes. Syntax reuse and reader caching are shown separately: a retained Tree with shifted absolute positions can still require a new projection. The animation is a slowed teaching sequence, not an internal execution log or performance benchmark.

graph/scene.ts maps this data to FlowchartDocument; graph/trace.ts arranges the steps. Each step's scene describes its accepted diagram: the same ID retains a display object, a new ID introduces a node. sceneDuration controls transitions in position, text and membership; travel moves fragments along edges, while pulse marks affected branches. The third insertion shows both the new list and the changed neighboring paragraph.

Drawing, transitions and the playback clock come from the public playback API of @quirekit/flowchart-x6. The site maps actual snapshots, operates that player and displays reader output. Playback uses a transient presentation graph, preserving authoring source, history and static exports. Flowcharts, mind maps and whiteboards also remain available for static relationship diagrams.

Integrate with QuireMarkdown

Replace components.pre to customize code-block rendering. This complete example renders the three native diagram formats while retaining ordinary code display and copying.

The source includes document creation, format validation, lazy loading and cleanup of all three renderers. The application chooses these adapters; the shared Markdown core has no new editor dependencies. A React host can use the same documents and browser adapters with its own component mount.

Register renderers in a docs-kit site

A Nuxt plugin can provide a language-to-component map through docsCodeRenderersKey from @quirekit/docs-kit/runtime. Components receive exact code, language, optional filename and presentation. Never interpret diagram source as a Vue template.

Unregistered languages remain ordinary code. Example source panels retain their original files. Each site chooses its renderers; docs-kit does not install diagram editors.

Loading and errors

Browser resources load only after the diagram enters the viewport. Server output retains readable source; if browser initialization fails, the original document remains available to read and copy. Replacing source, closing the larger view or leaving the page cancels earlier loading and destroys the mount. This site uses read-only viewing; editing and saving remain owned by the editors and application.

Each source passes its domain validator. Incomplete formats fall back to code. Automatic previews also cap flowcharts at 200 shapes and 400 edges, mind maps and whiteboards at 500 topics or elements, and source at 4 Mi UTF-16 code units. Oversized documents retain their source. These are documentation preview limits, not editor format capacities.