[{"data":1,"prerenderedAt":278},["ShallowReactive",2],{"markdown-doc:\u002Fen\u002Fguide\u002Fdiagrams":3},{"id":4,"title":5,"body":6,"description":266,"extension":267,"keywords":268,"locale":269,"meta":270,"navigation":271,"order":272,"path":273,"section":274,"seo":275,"stem":276,"__hash__":277},"docs\u002Fguide\u002Fdiagrams.en.md","Flowcharts, mind maps and whiteboards",{"type":7,"value":8,"toc":258},"minimark",[9,19,24,27,96,99,114,117,121,124,128,146,153,183,194,198,205,208,211,215,241,244,248,251,254],[10,11,12,13,18],"p",{},"The ",[14,15,17],"a",{"href":16},"\u002Fen\u002Fguide\u002Fcomparison","algorithm diagrams"," use QuireKit's existing flowchart, mind-map and whiteboard renderers.\nTheir nodes, captions and connections remain in native documents. “Diagram source” reveals the JSON; “Full view” opens a larger viewport.",[20,21,23],"h2",{"id":22},"put-a-diagram-in-this-documentation","Put a diagram in this documentation",[10,25,26],{},"This site registers renderers for three fenced languages. Place a complete document exported from the editor inside the corresponding fence.",[28,29,30,46],"table",{},[31,32,33],"thead",{},[34,35,36,40,43],"tr",{},[37,38,39],"th",{},"Fenced language",[37,41,42],{},"Document",[37,44,45],{},"Renderer",[47,48,49,66,81],"tbody",{},[34,50,51,58,63],{},[52,53,54],"td",{},[55,56,57],"code",{},"quirekit-flowchart",[52,59,60],{},[55,61,62],{},"FlowchartEmbed",[52,64,65],{},"The X6 adapter used by Flow Editor",[34,67,68,73,78],{},[52,69,70],{},[55,71,72],{},"quirekit-mind-map",[52,74,75],{},[55,76,77],{},"MindMapEmbed",[52,79,80],{},"The SimpleMindMap adapter used by Mind Editor",[34,82,83,88,93],{},[52,84,85],{},[55,86,87],{},"quirekit-whiteboard",[52,89,90],{},[55,91,92],{},"WhiteboardDocument",[52,94,95],{},"The existing Excalidraw adapter",[10,97,98],{},"This complete minimal flowchart can be copied directly. The documentation's code component renders the fence automatically:",[100,101,105],"pre",{"className":102,"code":103,"language":57,"meta":104,"style":104},"language-quirekit-flowchart shiki shiki-themes github-light github-light github-dark","{\"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\":{}}]}}\n","",[55,106,107],{"__ignoreMap":104},[108,109,112],"span",{"class":110,"line":111},"line",1,[108,113,103],{},[10,115,116],{},"The viewer only reads source. Zoom and “Fit” change the viewport without changing the document.",[20,118,120],{"id":119},"watch-source-and-syntax-trees-change","Watch source and syntax trees change",[10,122,123],{},"These scenes are drawn and played by QuireKit Flowchart and show actual Markdown source and Lezer syntax. By default it inserts bold text,\ninline code and a list in sequence. Follow the moving fragments to their source positions, affected\nold branches and new syntax nodes. Play, pause, step, go back and replay; the view has no pan, drag or zoom.",[125,126],"docs-demo",{"name":127},"algorithms\u002Fplayback",[10,129,130,133,134,137,138,141,142,145],{},[55,131,132],{},"recording\u002Ffixture.ts"," defines literal source and sequential edits; ",[55,135,136],{},"recording\u002Fsnapshots.ts"," records real incremental parsing and\npublic reading projections. Middle edits use an EditorState source transaction, while tail appends\nand late references call ",[55,139,140],{},"MarkdownStream.append",". ",[55,143,144],{},"recording\u002Ftree.ts"," extracts native types, children, ranges\nand object identities, rather than guessing reuse from similar text.",[10,147,148,149,152],{},"Replay only selects immutable snapshots for the normal ",[55,150,151],{},"QuireMarkdown"," component. It does not\ninsert the fragment again or remount historical Vue nodes. Syntax reuse and reader caching are\nshown separately: a retained Tree with shifted absolute positions can still require a new projection.\nThe animation is a slowed teaching sequence, not an internal execution log or performance benchmark.",[10,154,155,158,159,162,163,166,167,170,171,174,175,178,179,182],{},[55,156,157],{},"graph\u002Fscene.ts"," maps this data to ",[55,160,161],{},"FlowchartDocument","; ",[55,164,165],{},"graph\u002Ftrace.ts"," arranges the steps.\nEach step's ",[55,168,169],{},"scene"," describes its accepted diagram: the same ID retains a display object,\na new ID introduces a node. ",[55,172,173],{},"sceneDuration"," controls transitions in position, text and membership;\n",[55,176,177],{},"travel"," moves fragments along edges, while ",[55,180,181],{},"pulse"," marks affected branches. The third insertion\nshows both the new list and the changed neighboring paragraph.",[10,184,185,186,189,190,193],{},"Drawing, transitions and the playback clock come from the public ",[55,187,188],{},"playback"," API of\n",[55,191,192],{},"@quirekit\u002Fflowchart-x6",". The site maps actual snapshots, operates that player and displays reader\noutput. Playback uses a transient presentation graph, preserving authoring source, history and static\nexports. Flowcharts, mind maps and whiteboards also remain available for static relationship diagrams.",[20,195,197],{"id":196},"integrate-with-quiremarkdown","Integrate with QuireMarkdown",[10,199,200,201,204],{},"Replace ",[55,202,203],{},"components.pre"," to customize code-block rendering. This complete example renders the three native diagram formats while retaining ordinary code display and copying.",[125,206],{"name":207},"reading\u002Fdiagrams",[10,209,210],{},"The source includes document creation, format validation, lazy loading and cleanup of all three renderers.\nThe application chooses these adapters; the shared Markdown core has no new editor dependencies.\nA React host can use the same documents and browser adapters with its own component mount.",[20,212,214],{"id":213},"register-renderers-in-a-docs-kit-site","Register renderers in a docs-kit site",[10,216,217,218,221,222,225,226,228,229,232,233,236,237,240],{},"A Nuxt plugin can provide a language-to-component map through ",[55,219,220],{},"docsCodeRenderersKey"," from ",[55,223,224],{},"@quirekit\u002Fdocs-kit\u002Fruntime",".\nComponents receive exact ",[55,227,55],{},", ",[55,230,231],{},"language",", optional ",[55,234,235],{},"filename"," and ",[55,238,239],{},"presentation",". Never interpret diagram source as a Vue template.",[10,242,243],{},"Unregistered languages remain ordinary code. Example source panels retain their original files.\nEach site chooses its renderers; docs-kit does not install diagram editors.",[20,245,247],{"id":246},"loading-and-errors","Loading and errors",[10,249,250],{},"Browser resources load only after the diagram enters the viewport. Server output retains readable source;\nif browser initialization fails, the original document remains available to read and copy.\nReplacing source, closing the larger view or leaving the page cancels earlier loading and destroys the mount.\nThis site uses read-only viewing; editing and saving remain owned by the editors and application.",[10,252,253],{},"Each source passes its domain validator. Incomplete formats fall back to code.\nAutomatic previews also cap flowcharts at 200 shapes and 400 edges, mind maps and whiteboards at 500 topics or elements,\nand source at 4 Mi UTF-16 code units. Oversized documents retain their source. These are documentation preview limits, not editor format capacities.",[255,256,257],"style",{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":104,"searchDepth":259,"depth":259,"links":260},2,[261,262,263,264,265],{"id":22,"depth":259,"text":23},{"id":119,"depth":259,"text":120},{"id":196,"depth":259,"text":197},{"id":213,"depth":259,"text":214},{"id":246,"depth":259,"text":247},"Render native editor diagrams in documentation and integrate them into a Markdown reading component.","md",null,"en",{},true,6,"\u002Fen\u002Fguide\u002Fdiagrams","Extensions and rendering",{"title":5,"description":266},"guide\u002Fdiagrams.en","3O_CsIscSNIFdg1oZbkuMuObEFMj6fwQCskFToCG8o0",1793045321690]