[{"data":1,"prerenderedAt":251},["ShallowReactive",2],{"text-diagram-doc:\u002Fdocs":3},{"id":4,"title":5,"body":6,"description":240,"extension":241,"keywords":242,"locale":243,"meta":244,"navigation":245,"order":137,"path":246,"section":247,"seo":248,"stem":249,"__hash__":250},"docs\u002Findex.zh-CN.md","快速开始",{"type":7,"value":8,"toc":234},"minimark",[9,18,30,34,110,118,121,124,153,164,167,174,181,184,230],[10,11,12,13,17],"p",{},"QuireKit Text Diagram 提供 ",[14,15,16],"strong",{},"Mermaid、PlantUML、Graphviz \u002F DOT"," 的浏览器本地渲染，以及可单独使用的源码编辑工作台。保存的源码可以继续编辑，SVG 与 PNG 用于展示和导出。",[10,19,20,25,26],{},[21,22,24],"a",{"href":23},"\u002Fplayground","打开在线工作台 →"," · ",[21,27,29],{"href":28},"\u002Freference\u002Ftemplates","浏览模板 →",[31,32,33],"h2",{"id":33},"选择接入层",[35,36,37,53],"table",{},[38,39,40],"thead",{},[41,42,43,47,50],"tr",{},[44,45,46],"th",{},"需要什么",[44,48,49],{},"公开入口",[44,51,52],{},"运行环境",[54,55,56,71,84,97],"tbody",{},[41,57,58,62,68],{},[59,60,61],"td",{},"创建、读取、保存绘图对象，生成 Markdown 围栏",[59,63,64],{},[65,66,67],"code",{},"@quirekit\u002Ftext-diagram",[59,69,70],{},"浏览器或 Node",[41,72,73,76,81],{},[59,74,75],{},"把源码渲染为 SVG \u002F PNG",[59,77,78],{},[65,79,80],{},"@quirekit\u002Ftext-diagram\u002Fbrowser",[59,82,83],{},"浏览器 DOM 与 Canvas",[41,85,86,89,94],{},[59,87,88],{},"自己的页面中嵌入完整工作台",[59,90,91],{},[65,92,93],{},"@quirekit\u002Ftext-diagram-editor\u002Fvue",[59,95,96],{},"Vue 3.5+、浏览器",[41,98,99,102,107],{},[59,100,101],{},"从按钮打开绘图弹窗",[59,103,104],{},[65,105,106],{},"@quirekit\u002Ftext-diagram-editor",[59,108,109],{},"浏览器，内部使用 Vue",[10,111,112,113,117],{},"两个公共包均为 MIT，独立使用无需安装 Classic、Block 或 MSFE。捆绑引擎保留各自的许可文本，见",[21,114,116],{"href":115},"\u002Fguide\u002Fdeployment","部署与资源","。",[31,119,120],{"id":120},"安装",[10,122,123],{},"当前为工作区预览版，尚未发布到 npm。在 QuireKit 工作区的应用目录内添加：",[125,126,131],"pre",{"className":127,"code":128,"language":129,"meta":130,"style":130},"language-sh shiki shiki-themes github-light github-light github-dark","pnpm add '@quirekit\u002Ftext-diagram@workspace:*'\n# 需要可视工作台时再添加\npnpm add '@quirekit\u002Ftext-diagram-editor@workspace:*' '@quirekit\u002Fui@workspace:*' '@quirekit\u002Funocss-preset@workspace:*' vue\n","sh","",[65,132,133,141,147],{"__ignoreMap":130},[134,135,138],"span",{"class":136,"line":137},"line",1,[134,139,140],{},"pnpm add '@quirekit\u002Ftext-diagram@workspace:*'\n",[134,142,144],{"class":136,"line":143},2,[134,145,146],{},"# 需要可视工作台时再添加\n",[134,148,150],{"class":136,"line":149},3,[134,151,152],{},"pnpm add '@quirekit\u002Ftext-diagram-editor@workspace:*' '@quirekit\u002Fui@workspace:*' '@quirekit\u002Funocss-preset@workspace:*' vue\n",[10,154,155,156,159,160,163],{},"正式发布后可移除 ",[65,157,158],{},"@workspace:*"," 使用公开包版本。源码模型可在服务端使用；",[65,161,162],{},"\u002Fbrowser"," 和工作台必须在客户端生命周期调用。",[31,165,166],{"id":166},"先试一张图",[10,168,169,170,173],{},"进入",[21,171,172],{"href":23},"在线工作台","，选语言和模板，点击“应用模板”，修改源码并等待预览。可以直接下载 SVG \u002F PNG；“保存图形”则把源码与对应 PNG 一起提交给宿主。",[10,175,176,177,180],{},"工作台提供 CodeMirror 行号、语法着色、缩进、查找替换和撤销。它使用 QuireKit 维护的 ",[65,178,179],{},"@quirekit\u002Fcm-*"," 源码版本，与 MSFE 共用同一套 vendor 包。",[31,182,183],{"id":183},"从哪里继续",[185,186,187,195,202,209,216,223],"ul",{},[188,189,190,194],"li",{},[21,191,193],{"href":192},"\u002Fguide\u002Frendering","仅渲染图形","：不挂载编辑器，获得可取消的 SVG \u002F PNG。",[188,196,197,201],{},[21,198,200],{"href":199},"\u002Fguide\u002Fvue","嵌入 Vue 工作台","：样式、Provider、请求与保存事件。",[188,203,204,208],{},[21,205,207],{"href":206},"\u002Fguide\u002Fdialog","独立弹窗","：已有页面中的按钮入口、主题与释放。",[188,210,211,215],{},[21,212,214],{"href":213},"\u002Fguide\u002Fpersistence","保存与恢复","：源码权威、修订检查、失败后保留草稿。",[188,217,218,222],{},[21,219,221],{"href":220},"\u002Fguide\u002Feditors","三个编辑器","：Classic、Block 与 Markdown 中的不同持久化方式。",[188,224,225,229],{},[21,226,228],{"href":227},"\u002Freference\u002Fsupport","支持范围","：引擎差异、离线资源和当前限制。",[231,232,233],"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":130,"searchDepth":143,"depth":143,"links":235},[236,237,238,239],{"id":33,"depth":143,"text":33},{"id":120,"depth":143,"text":120},{"id":166,"depth":143,"text":166},{"id":183,"depth":143,"text":183},"用一份源码生成图形，或把完整的文本绘图工作台放进自己的应用。","md",null,"zh-CN",{},true,"\u002Fdocs","开始使用",{"title":5,"description":240},"index.zh-CN","d1fee9fnJ6f1JAlzz417gucMQLPa9MHjvNxstKRnXNE",1793045389001]