[{"data":1,"prerenderedAt":52},["ShallowReactive",2],{"i-lucide:menu":3,"i-lucide:grip":8,"i-lucide:chevron-right":10,"i-lucide:moon":12,"i-lucide:sun":14,"i-material-symbols:language":16,"i-lucide:chevron-down":18,"i-lucide:shield-check":20,"i-lucide:mail":22,"i-tabler:markdown":24,"i-lucide:code-xml":26,"i-lucide:film":28,"i-lucide:file-text":30,"i-lucide:box":32,"i-lucide:code-2":34,"i-lucide:image":35,"i-lucide:square-sigma":37,"i-lucide:gamepad-2":39,"i-lucide:sparkles":41,"i-lucide:graduation-cap":43,"blog-body-diagram-as-code-zh":45,"i-lucide:cpu":46,"i-lucide:code":48,"i-lucide:git-branch":50},{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":7},0,24,false,"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 5h16M4 12h16M4 19h16\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":9},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Ccircle cx=\"12\" cy=\"5\" r=\"1\"\u002F>\u003Ccircle cx=\"19\" cy=\"5\" r=\"1\"\u002F>\u003Ccircle cx=\"5\" cy=\"5\" r=\"1\"\u002F>\u003Ccircle cx=\"12\" cy=\"12\" r=\"1\"\u002F>\u003Ccircle cx=\"19\" cy=\"12\" r=\"1\"\u002F>\u003Ccircle cx=\"5\" cy=\"12\" r=\"1\"\u002F>\u003Ccircle cx=\"12\" cy=\"19\" r=\"1\"\u002F>\u003Ccircle cx=\"19\" cy=\"19\" r=\"1\"\u002F>\u003Ccircle cx=\"5\" cy=\"19\" r=\"1\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":11},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m9 18l6-6l-6-6\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":13},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":15},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Ccircle cx=\"12\" cy=\"12\" r=\"4\"\u002F>\u003Cpath d=\"M12 2v2m0 16v2M4.93 4.93l1.41 1.41m11.32 11.32l1.41 1.41M2 12h2m16 0h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":17},"\u003Cpath fill=\"currentColor\" d=\"M8.125 21.213q-1.825-.788-3.187-2.15t-2.15-3.188T2 11.988t.788-3.875t2.15-3.175t3.187-2.15T12.013 2t3.875.788t3.175 2.15t2.15 3.175t.787 3.875t-.787 3.887t-2.15 3.188t-3.175 2.15t-3.875.787t-3.888-.787M12 19.95q.65-.9 1.125-1.875T13.9 16h-3.8q.3 1.1.775 2.075T12 19.95m-2.6-.4q-.45-.825-.787-1.713T8.05 16H5.1q.725 1.25 1.813 2.175T9.4 19.55m5.2 0q1.4-.45 2.488-1.375T18.9 16h-2.95q-.225.95-.562 1.838T14.6 19.55M4.25 14h3.4q-.075-.5-.112-.987T7.5 12t.038-1.012T7.65 10h-3.4q-.125.5-.187.988T4 12t.063 1.013t.187.987m5.4 0h4.7q.075-.5.113-.987T14.5 12t-.038-1.012T14.35 10h-4.7q-.075.5-.112.988T9.5 12t.038 1.013t.112.987m6.7 0h3.4q.125-.5.188-.987T20 12t-.062-1.012T19.75 10h-3.4q.075.5.113.988T16.5 12t-.038 1.013t-.112.987m-.4-6h2.95q-.725-1.25-1.812-2.175T14.6 4.45q.45.825.788 1.713T15.95 8M10.1 8h3.8q-.3-1.1-.775-2.075T12 4.05q-.65.9-1.125 1.875T10.1 8m-5 0h2.95q.225-.95.563-1.838T9.4 4.45Q8 4.9 6.912 5.825T5.1 8\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":19},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m6 9l6 6l6-6\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":21},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z\"\u002F>\u003Cpath d=\"m9 12l2 2l4-4\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":23},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"m22 7l-8.991 5.727a2 2 0 0 1-2.009 0L2 7\"\u002F>\u003Crect width=\"20\" height=\"16\" x=\"2\" y=\"4\" rx=\"2\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":25},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M3 7a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"\u002F>\u003Cpath d=\"M7 15V9l2 2l2-2v6m3-2l2 2l2-2m-2 2V9\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":27},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m18 16l4-4l-4-4M6 8l-4 4l4 4m8.5-12l-5 16\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":29},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Crect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\"\u002F>\u003Cpath d=\"M7 3v18M3 7.5h4M3 12h18M3 16.5h4M17 3v18m0-13.5h4m-4 9h4\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":31},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z\"\u002F>\u003Cpath d=\"M14 2v5a1 1 0 0 0 1 1h5M10 9H8m8 4H8m8 4H8\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":33},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z\"\u002F>\u003Cpath d=\"m3.3 7l8.7 5l8.7-5M12 22V12\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":27},{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":36},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Crect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\" ry=\"2\"\u002F>\u003Ccircle cx=\"9\" cy=\"9\" r=\"2\"\u002F>\u003Cpath d=\"m21 15l-3.086-3.086a2 2 0 0 0-2.828 0L6 21\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":38},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Crect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\"\u002F>\u003Cpath d=\"M16 8.9V7H8l4 5l-4 5h8v-1.9\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":40},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 11h4M8 9v4m7-1h.01M18 10h.01m-.69-5H6.68a4 4 0 0 0-3.978 3.59l-.017.152C2.604 9.416 2 14.456 2 16a3 3 0 0 0 3 3c1 0 1.5-.5 2-1l1.414-1.414A2 2 0 0 1 9.828 16h4.344a2 2 0 0 1 1.414.586L17 18c.5.5 1 1 2 1a3 3 0 0 0 3-3c0-1.545-.604-6.584-.685-7.258q-.01-.075-.017-.151A4 4 0 0 0 17.32 5\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":42},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594zM20 2v4m2-2h-4\"\u002F>\u003Ccircle cx=\"4\" cy=\"20\" r=\"2\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":44},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M21.42 10.922a1 1 0 0 0-.019-1.838L12.83 5.18a2 2 0 0 0-1.66 0L2.6 9.08a1 1 0 0 0 0 1.832l8.57 3.908a2 2 0 0 0 1.66 0zM22 10v6\"\u002F>\u003Cpath d=\"M6 12.5V16a6 3 0 0 0 12 0v-3.5\"\u002F>\u003C\u002Fg>","\u003Cblockquote>\n\u003Cp>"用文字描述，自动生成一张图"听起来像魔法，其实是一条清晰的三段流水线：把文本解析成抽象结构、用算法算出每个图元的位置、再渲染成矢量图形。理解这三段，就能判断这类方案能做什么、做不到什么。\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Cp>\u003Cimg src=\"\u002Fblog\u002Fdiagram-as-code\u002Fcover.webp\" alt=\"文章核心论点配图\">\u003C\u002Fp>\n\u003Ch2>diagram-as-code 到底是什么？\u003C\u002Fh2>\n\u003Cp>diagram-as-code 指\u003Cstrong>用纯文本描述图的逻辑结构，由程序自动生成图形\u003C\u002Fstrong>的一类方案，代表有 Mermaid、PlantUML、Graphviz\u002FDOT、D2 等。它的核心主张是：作者只声明"有哪些节点、节点之间有哪些关系"，而\u003Cstrong>不手动指定每个图元的坐标\u003C\u002Fstrong>。\u003C\u002Fp>\n\u003Cp>这与 \u003Ca href=\"http:\u002F\u002Fdraw.io\">draw.io\u003C\u002Fa>、Visio 这类手动画图工具形成鲜明对照。手动画图里，一个方框在哪、多大、连线怎么拐弯，都由人逐一摆放；diagram-as-code 里这些全交给算法。这一根本差异决定了两者后续的全部取舍——可控性、可维护性、适用场景，都从这里分叉。\u003C\u002Fp>\n\u003Ch2>从文本到图形要经过哪几步？\u003C\u002Fh2>\n\u003Cp>从一段文本到最终图形，几乎所有引擎都走同一条三段流水线：\u003C\u002Fp>\n\u003Col>\n\u003Cli>\u003Cstrong>解析（parse）\u003C\u002Fstrong>：把领域特定语言（DSL）文本解析成抽象语法树 \u002F 内部图模型——节点集合、边集合、以及它们的属性（标签、形状、方向）。\u003C\u002Fli>\n\u003Cli>\u003Cstrong>布局（layout）\u003C\u002Fstrong>：核心难点。算法根据图的拓扑计算每个节点的坐标、每条边的走线，使图尽量少交叉、对齐整齐、间距合理。\u003C\u002Fli>\n\u003Cli>\u003Cstrong>渲染（render）\u003C\u002Fstrong>：把带坐标的几何模型画成 SVG \u002F Canvas，应用主题样式、字体、配色。\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>阶段\u003C\u002Fth>\n\u003Cth>输入\u003C\u002Fth>\n\u003Cth>输出\u003C\u002Fth>\n\u003Cth>主要难点\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\n\u003Ctr>\n\u003Ctd>解析\u003C\u002Ftd>\n\u003Ctd>DSL 文本\u003C\u002Ftd>\n\u003Ctd>图模型（点\u002F边\u002F属性）\u003C\u002Ftd>\n\u003Ctd>语法歧义、错误定位\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>布局\u003C\u002Ftd>\n\u003Ctd>图模型\u003C\u002Ftd>\n\u003Ctd>带坐标的几何\u003C\u002Ftd>\n\u003Ctd>减少交叉、自动对齐\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>渲染\u003C\u002Ftd>\n\u003Ctd>几何 + 样式\u003C\u002Ftd>\n\u003Ctd>SVG \u002F 位图\u003C\u002Ftd>\n\u003Ctd>字体度量、主题一致性\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n\u003Cp>三段里，\u003Cstrong>布局是把"逻辑"变成"好看的图"的关键\u003C\u002Fstrong>，也是不同引擎拉开差距的地方。\u003C\u002Fp>\n\u003Ch2>自动布局是怎么算出来的？\u003C\u002Fh2>\n\u003Cp>布局的本质是一个优化问题：在二维平面上摆放节点、安排连线，使整体可读性最高（交叉最少、层次最清、间距均匀）。不同图类用不同算法族：\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cstrong>有向无环图 \u002F 分层图\u003C\u002Fstrong>（流程图、依赖图）：常用 \u003Cstrong>Sugiyama 分层布局\u003C\u002Fstrong>——先给节点分层（rank），层内排序以最小化边交叉，再分配坐标。Graphviz 的 \u003Ccode>dot\u003C\u002Fcode>、前端常用的 \u003Ccode>dagre\u003C\u002Fcode> 都属此类。\u003C\u002Fli>\n\u003Cli>\u003Cstrong>通用关系图 \u002F 网络图\u003C\u002Fstrong>：常用\u003Cstrong>力导向布局（force-directed）\u003C\u002Fstrong>——把边当弹簧、节点当带斥力的粒子，迭代到能量最低的稳定态。\u003C\u002Fli>\n\u003Cli>\u003Cstrong>时序图、甘特图\u003C\u002Fstrong>：几乎不需要复杂优化，因为时间轴\u002F参与者已经隐含了强约束，布局接近确定性排布。\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>这里藏着一个常被误解的特性：\u003Cstrong>布局是实时计算的，不是固定坐标\u003C\u002Fstrong>。所以引擎或布局库升级后，同一份源码可能渲染出略有差异的排布——这是自动布局的固有性质，而非缺陷。\u003C\u002Fp>\n\u003Ch2>几个主流引擎怎么取舍？\u003C\u002Fh2>\n\u003Cp>同样是 diagram-as-code，设计目标不同，能力侧重也不同：\u003C\u002Fp>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>引擎\u003C\u002Fth>\n\u003Cth>运行环境\u003C\u002Fth>\n\u003Cth>强项\u003C\u002Fth>\n\u003Cth>取舍\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\n\u003Ctr>\n\u003Ctd>Graphviz (DOT)\u003C\u002Ftd>\n\u003Ctd>原生 \u002F WASM\u003C\u002Ftd>\n\u003Ctd>大规模图、成熟分层算法\u003C\u002Ftd>\n\u003Ctd>语法偏底层，样式较朴素\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Mermaid\u003C\u002Ftd>\n\u003Ctd>浏览器 JS\u003C\u002Ftd>\n\u003Ctd>图类型多、Markdown 生态集成好\u003C\u002Ftd>\n\u003Ctd>复杂大图布局可控性有限\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>PlantUML\u003C\u002Ftd>\n\u003Ctd>JVM\u003C\u002Ftd>\n\u003Ctd>UML 全家桶（类图\u002F时序\u002F组件）\u003C\u002Ftd>\n\u003Ctd>依赖 Java 运行时\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>D2\u003C\u002Ftd>\n\u003Ctd>原生\u003C\u002Ftd>\n\u003Ctd>现代语法、布局引擎可插拔\u003C\u002Ftd>\n\u003Ctd>生态较新\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n\u003Cp>选型不存在"最优"：要画规范的 UML、且能接受 JVM，PlantUML 覆盖最全；要在网页\u002FMarkdown 里轻量嵌图，Mermaid 集成成本最低；要处理超大依赖图，Graphviz 的分层算法最经得起考验。\u003C\u002Fp>\n\u003Ch2>能力边界与已知限制\u003C\u002Fh2>\n\u003Cp>diagram-as-code 不是万能的，把它用在不擅长的场景只会事倍功半。常见边界：\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cstrong>布局不完全可控\u003C\u002Fstrong>：你能影响方向（如自上而下）和分组，但很难强制"这个框必须在那个框左边 20px"。需要像素级摆位时，它不是合适工具。\u003C\u002Fli>\n\u003Cli>\u003Cstrong>大图易退化\u003C\u002Fstrong>：节点和边到几百上千时，自动布局可能产生大量交叉或超长连线，可读性反而下降，往往要拆子图。\u003C\u002Fli>\n\u003Cli>\u003Cstrong>样式表达有限\u003C\u002Fstrong>：相比手绘画布，配色、图标、自由形状的表现力较弱，不适合做强视觉设计的信息图。\u003C\u002Fli>\n\u003Cli>\u003Cstrong>DSL 学习与调试成本\u003C\u002Fstrong>：语法错误、未加引号的特殊字符（尤其 CJK 标签）会导致解析失败，错误定位有时不直观。\u003C\u002Fli>\n\u003Cli>\u003Cstrong>版本间渲染漂移\u003C\u002Fstrong>：如前所述，布局算法升级会让同源码图产生位置变化，对"图必须逐像素一致"的归档场景不友好。\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>判断一类图适不适合 diagram-as-code，关键看它\u003Cstrong>是否结构化、关系是否明确、是否需要纳入版本管理\u003C\u002Fstrong>：结构清晰、要 diff、要随代码演进的，用文本生成最划算；要自由排布、强设计感的，手动画布更合适。\u003C\u002Fp>\n\u003Ch2>小结\u003C\u002Fh2>\n\u003Cp>diagram-as-code 的本质是"声明结构、算法布局、自动渲染"的三段流水线，把图的坐标决策权从人手里交给布局算法。它换来的是纯文本可版本管理、与文档\u002F代码同源演进的好处，代价是布局不完全可控、大图易退化、版本间可能漂移。流程图、时序图、ER 图这类结构化关系图是它的主场；像素级精确和强视觉设计，则仍属于手动画图工具的领域。\u003C\u002Fp>\n",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":47},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M12 20v2m0-20v2m5 16v2m0-20v2M2 12h2m-2 5h2M2 7h2m16 5h2m-2 5h2M20 7h2M7 20v2M7 2v2\"\u002F>\u003Crect width=\"16\" height=\"16\" x=\"4\" y=\"4\" rx=\"2\"\u002F>\u003Crect width=\"8\" height=\"8\" x=\"8\" y=\"8\" rx=\"1\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":49},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m16 18l6-6l-6-6M8 6l-6 6l6 6\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":51},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M15 6a9 9 0 0 0-9 9V3\"\u002F>\u003Ccircle cx=\"18\" cy=\"6\" r=\"3\"\u002F>\u003Ccircle cx=\"6\" cy=\"18\" r=\"3\"\u002F>\u003C\u002Fg>",1782703045880]