[{"data":1,"prerenderedAt":255},["ShallowReactive",2],{"text-diagram-doc:\u002Fen\u002Fdocs":3},{"id":4,"title":5,"body":6,"description":244,"extension":245,"keywords":246,"locale":247,"meta":248,"navigation":249,"order":139,"path":250,"section":251,"seo":252,"stem":253,"__hash__":254},"docs\u002Findex.en.md","Quick start",{"type":7,"value":8,"toc":238},"minimark",[9,18,30,35,111,119,123,126,155,166,170,177,184,188,234],[10,11,12,13,17],"p",{},"QuireKit Text Diagram provides ",[14,15,16],"strong",{},"Mermaid, PlantUML and Graphviz \u002F DOT"," rendering in the browser, plus a standalone source authoring workbench. Saved source stays editable; SVG and PNG are projections for display and export.",[10,19,20,25,26],{},[21,22,24],"a",{"href":23},"\u002Fen\u002Fplayground","Open the playground →"," · ",[21,27,29],{"href":28},"\u002Fen\u002Freference\u002Ftemplates","Browse templates →",[31,32,34],"h2",{"id":33},"choose-an-integration-layer","Choose an integration layer",[36,37,38,54],"table",{},[39,40,41],"thead",{},[42,43,44,48,51],"tr",{},[45,46,47],"th",{},"Goal",[45,49,50],{},"Public entry",[45,52,53],{},"Environment",[55,56,57,72,85,98],"tbody",{},[42,58,59,63,69],{},[60,61,62],"td",{},"Create, validate and save objects; generate Markdown fences",[60,64,65],{},[66,67,68],"code",{},"@quirekit\u002Ftext-diagram",[60,70,71],{},"Browser or Node",[42,73,74,77,82],{},[60,75,76],{},"Render source to SVG \u002F PNG",[60,78,79],{},[66,80,81],{},"@quirekit\u002Ftext-diagram\u002Fbrowser",[60,83,84],{},"Browser DOM and Canvas",[42,86,87,90,95],{},[60,88,89],{},"Embed a complete workbench",[60,91,92],{},[66,93,94],{},"@quirekit\u002Ftext-diagram-editor\u002Fvue",[60,96,97],{},"Vue 3.5+, browser",[42,99,100,103,108],{},[60,101,102],{},"Open an editor from a button",[60,104,105],{},[66,106,107],{},"@quirekit\u002Ftext-diagram-editor",[60,109,110],{},"Browser; uses Vue internally",[10,112,113,114,118],{},"Both public packages are MIT. Standalone use requires no Classic, Block or MSFE dependency. Bundled engines retain their own license texts; see ",[21,115,117],{"href":116},"\u002Fen\u002Fguide\u002Fdeployment","deployment and assets",".",[31,120,122],{"id":121},"install","Install",[10,124,125],{},"This is an unreleased workspace preview. In a QuireKit workspace application, add:",[127,128,133],"pre",{"className":129,"code":130,"language":131,"meta":132,"style":132},"language-sh shiki shiki-themes github-light github-light github-dark","pnpm add '@quirekit\u002Ftext-diagram@workspace:*'\n# Add the UI packages when you need the workbench\npnpm add '@quirekit\u002Ftext-diagram-editor@workspace:*' '@quirekit\u002Fui@workspace:*' '@quirekit\u002Funocss-preset@workspace:*' vue\n","sh","",[66,134,135,143,149],{"__ignoreMap":132},[136,137,140],"span",{"class":138,"line":139},"line",1,[136,141,142],{},"pnpm add '@quirekit\u002Ftext-diagram@workspace:*'\n",[136,144,146],{"class":138,"line":145},2,[136,147,148],{},"# Add the UI packages when you need the workbench\n",[136,150,152],{"class":138,"line":151},3,[136,153,154],{},"pnpm add '@quirekit\u002Ftext-diagram-editor@workspace:*' '@quirekit\u002Fui@workspace:*' '@quirekit\u002Funocss-preset@workspace:*' vue\n",[10,156,157,158,161,162,165],{},"After public release, remove ",[66,159,160],{},"@workspace:*"," and use a published version. The source model works on the server; call ",[66,163,164],{},"\u002Fbrowser"," and the workbench during the client lifecycle.",[31,167,169],{"id":168},"try-a-diagram","Try a diagram",[10,171,172,173,176],{},"Open the ",[21,174,175],{"href":23},"playground",", choose a language and template, click Apply template, edit the source and wait for the preview. Download SVG \u002F PNG directly, or use Save diagram to submit the source and its matching PNG to the host.",[10,178,179,180,183],{},"CodeMirror provides line numbers, syntax highlighting, indentation, find\u002Freplace and undo. The workbench uses QuireKit's maintained ",[66,181,182],{},"@quirekit\u002Fcm-*"," source packages, the same vendor family used by MSFE.",[31,185,187],{"id":186},"continue","Continue",[189,190,191,199,206,213,220,227],"ul",{},[192,193,194,198],"li",{},[21,195,197],{"href":196},"\u002Fen\u002Fguide\u002Frendering","Render without an editor",": cancellable SVG \u002F PNG generation.",[192,200,201,205],{},[21,202,204],{"href":203},"\u002Fen\u002Fguide\u002Fvue","Embed in Vue",": styles, providers, requests and save events.",[192,207,208,212],{},[21,209,211],{"href":210},"\u002Fen\u002Fguide\u002Fdialog","Open a dialog",": button integration, theme and cleanup.",[192,214,215,219],{},[21,216,218],{"href":217},"\u002Fen\u002Fguide\u002Fpersistence","Save and restore",": source authority, revision checks and recoverable failures.",[192,221,222,226],{},[21,223,225],{"href":224},"\u002Fen\u002Fguide\u002Feditors","Three editor integrations",": Classic, Block and Markdown persistence.",[192,228,229,233],{},[21,230,232],{"href":231},"\u002Fen\u002Freference\u002Fsupport","Support boundaries",": engine differences, local assets and current limits.",[235,236,237],"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":132,"searchDepth":145,"depth":145,"links":239},[240,241,242,243],{"id":33,"depth":145,"text":34},{"id":121,"depth":145,"text":122},{"id":168,"depth":145,"text":169},{"id":186,"depth":145,"text":187},"Render a diagram from source or embed the complete authoring workbench in your application.","md",null,"en",{},true,"\u002Fen\u002Fdocs","Getting started",{"title":5,"description":244},"index.en","6nVv_KvL6t8cVllSVggAji6ss2YRiHyZETUubnzqh-M",1793045389002]