[{"data":1,"prerenderedAt":275},["ShallowReactive",2],{"markdown-doc:\u002Fguide\u002Fdiagrams":3},{"id":4,"title":5,"body":6,"description":263,"extension":264,"keywords":265,"locale":266,"meta":267,"navigation":268,"order":269,"path":270,"section":271,"seo":272,"stem":273,"__hash__":274},"docs\u002Fguide\u002Fdiagrams.zh-CN.md","流程图、思维导图与白板",{"type":7,"value":8,"toc":255},"minimark",[9,19,23,26,95,98,113,116,119,122,126,144,151,181,192,196,203,206,209,213,239,242,245,248,251],[10,11,12,13,18],"p",{},"文档中的",[14,15,17],"a",{"href":16},"\u002Fguide\u002Fcomparison","算法图","由 QuireKit 的流程图、思维导图和白板渲染器绘制。\n图里的节点、文字和连线保存在原生图稿中；点击“查看图稿”可以取得 JSON，点击“查看大图”可以放大阅读。",[20,21,22],"h2",{"id":22},"在本站文档里放一张图",[10,24,25],{},"本站已经为下面三种代码围栏注册了渲染组件。把编辑器导出的完整图稿放在对应围栏里，正文就会显示图表。",[27,28,29,45],"table",{},[30,31,32],"thead",{},[33,34,35,39,42],"tr",{},[36,37,38],"th",{},"围栏语言",[36,40,41],{},"图稿",[36,43,44],{},"渲染器",[46,47,48,65,80],"tbody",{},[33,49,50,57,62],{},[51,52,53],"td",{},[54,55,56],"code",{},"quirekit-flowchart",[51,58,59],{},[54,60,61],{},"FlowchartEmbed",[51,63,64],{},"Flow Editor 使用的 X6 适配器",[33,66,67,72,77],{},[51,68,69],{},[54,70,71],{},"quirekit-mind-map",[51,73,74],{},[54,75,76],{},"MindMapEmbed",[51,78,79],{},"Mind Editor 使用的 SimpleMindMap 适配器",[33,81,82,87,92],{},[51,83,84],{},[54,85,86],{},"quirekit-whiteboard",[51,88,89],{},[54,90,91],{},"WhiteboardDocument",[51,93,94],{},"已有 Excalidraw 白板适配器",[10,96,97],{},"例如，下面是一个可以直接复制的流程图图稿。这段围栏由文档的代码组件自动显示为图表：",[99,100,104],"pre",{"className":101,"code":102,"language":56,"meta":103,"style":103},"language-quirekit-flowchart shiki shiki-themes github-light github-light github-dark","{\"type\":\"quirekit-flowchart-embed\",\"version\":1,\"id\":\"docs-minimal-flow\",\"title\":\"从片段到解析\",\"preview\":null,\"document\":{\"format\":\"quirekit-flowchart\",\"version\":1,\"revision\":0,\"nodes\":[{\"id\":\"chunk\",\"shape\":\"terminator\",\"x\":0,\"y\":0,\"width\":180,\"height\":72,\"text\":\"收到片段\",\"style\":{}},{\"id\":\"parse\",\"shape\":\"process\",\"x\":280,\"y\":0,\"width\":180,\"height\":72,\"text\":\"继续解析\",\"style\":{}}],\"edges\":[{\"id\":\"chunk-parse\",\"source\":{\"node\":\"chunk\",\"port\":\"right\"},\"target\":{\"node\":\"parse\",\"port\":\"left\"},\"vertices\":[],\"routing\":\"orthogonal\",\"label\":\"\",\"labelPosition\":0.5,\"style\":{}}]}}\n","",[54,105,106],{"__ignoreMap":103},[107,108,111],"span",{"class":109,"line":110},"line",1,[107,112,102],{},[10,114,115],{},"这里只读取图稿，不会改写文档。缩放和“适应画布”只改变查看范围。",[20,117,118],{"id":118},"看原文与语法树怎样变化",[10,120,121],{},"下面由 QuireKit 流程图绘制并播放的场景，展示实际 Markdown 原文和 Lezer 语法树。默认连续插入\n加粗文字、行内代码与两项列表；跟随移动片段进入源落点，定位旧分支，再换入新节点。\n可以播放、暂停、单步、回退和重播，不能拖动、平移或缩放视图。",[123,124],"docs-demo",{"name":125},"algorithms\u002Fplayback",[10,127,128,131,132,135,136,139,140,143],{},[54,129,130],{},"recording\u002Ffixture.ts"," 定义原文与连续源码修改，",[54,133,134],{},"recording\u002Fsnapshots.ts"," 记录真正的增量解析和公共阅读投影。\n中间插入使用 EditorState 源码事务；末尾追加与后置引用实际调用 ",[54,137,138],{},"MarkdownStream.append","。\n",[54,141,142],{},"recording\u002Ftree.ts"," 从原生树读取类型、子节点、范围和对象编号，没有按文本相似度猜测复用。",[10,145,146,147,150],{},"回放只选择不可变的旧、新快照，再交给正常的 ",[54,148,149],{},"QuireMarkdown"," 显示。不会重复插入片段，\n也不会重挂历史 Vue 节点。语法树复用与阅读缓存分别展示：即使后续段落的 Tree 对象保留，\n绝对位置变化也可能要求重新投影。本例的慢放是教学编排，不是解析器内部日志或性能测速。",[10,152,153,156,157,160,161,164,165,168,169,172,173,176,177,180],{},[54,154,155],{},"graph\u002Fscene.ts"," 把这些数据变成 ",[54,158,159],{},"FlowchartDocument","，",[54,162,163],{},"graph\u002Ftrace.ts"," 编排步骤。\n每一步的 ",[54,166,167],{},"scene"," 描述接受后的完整图形：相同 ID 保留展示对象，新 ID 表示新节点。\n",[54,170,171],{},"sceneDuration"," 决定位置、文字和节点进出的过渡时长；",[54,174,175],{},"travel"," 负责片段沿线移动，\n",[54,178,179],{},"pulse"," 标出受影响分支。第三次插入同时展示新列表和相邻段落的变化。",[10,182,183,184,187,188,191],{},"图形、过渡和播放时钟均由 ",[54,185,186],{},"@quirekit\u002Fflowchart-x6"," 的公共 ",[54,189,190],{},"playback"," 提供。\n本站只把真实快照映射为图稿、操作公共播放器并显示阅读结果。播放使用临时展示图，\n不会修改作者图源、编辑历史或静态导出。流程图、思维导图和白板也继续用于静态关系图。",[20,193,195],{"id":194},"在-quiremarkdown-中接入","在 QuireMarkdown 中接入",[10,197,198,199,202],{},"Markdown 引擎允许用 ",[54,200,201],{},"components.pre"," 替换代码块的显示。下面的完整示例只为三种原生图稿启用渲染，普通代码仍保留代码查看与复制。",[123,204],{"name":205},"reading\u002Fdiagrams",[10,207,208],{},"打开示例源码，可以看到原生图稿生成、格式校验、三个渲染器的加载和挂载释放。\n这些渲染器由宿主选择；公共 Markdown 内核没有新增图表编辑器依赖。React 宿主可用同样的图稿及浏览器适配器，另行实现自己的组件挂载。",[20,210,212],{"id":211},"接入-docs-kit-的站点","接入 docs-kit 的站点",[10,214,215,216,219,220,223,224,226,227,230,231,234,235,238],{},"使用共享文档层时，可以在 Nuxt plugin 中通过 ",[54,217,218],{},"docsCodeRenderersKey"," 注册围栏语言到组件的映射。\n该入口来自 ",[54,221,222],{},"@quirekit\u002Fdocs-kit\u002Fruntime","。组件接收原始 ",[54,225,54],{},"、",[54,228,229],{},"language","、可选 ",[54,232,233],{},"filename"," 和 ",[54,236,237],{},"presentation","；图稿不能被解释为 Vue 模板。",[10,240,241],{},"未注册的语言继续显示为代码，示例的源码面板也继续显示原始文件。各站自行选择渲染器，docs-kit 不安装图表编辑器。",[20,243,244],{"id":244},"加载与错误处理",[10,246,247],{},"图表资源在客户端、图进入可视范围时才加载。服务端保留可读取的图稿；浏览器初始化失败时，可以继续查看和复制原稿。\n切换图稿、关闭大图或离开页面，会取消旧加载并销毁渲染实例。本站采用只读查看；编辑及保存仍由已有编辑器和应用负责。",[10,249,250],{},"图稿先通过各领域的格式校验。格式不完整时显示原始代码。本站自动预览还限制为 200 个流程图节点与 400 条连线、500 个思维导图主题或白板元素，源码最多 4 Mi 个 UTF-16 单元；超出时保留原稿。这个限制属于文档预览，不是各编辑器协议的容量上限。",[252,253,254],"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":103,"searchDepth":256,"depth":256,"links":257},2,[258,259,260,261,262],{"id":22,"depth":256,"text":22},{"id":118,"depth":256,"text":118},{"id":194,"depth":256,"text":195},{"id":211,"depth":256,"text":212},{"id":244,"depth":256,"text":244},"用现有编辑器的图稿渲染文档，并在 Markdown 阅读组件中接入同样的能力。","md",null,"zh-CN",{},true,6,"\u002Fguide\u002Fdiagrams","扩展与渲染",{"title":5,"description":263},"guide\u002Fdiagrams.zh-CN","PQNr16sf-AjF16mMBzkXLXiDE53DQDzHGkzWsaHDxhk",1793045321583]