[{"data":1,"prerenderedAt":296},["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,"tool-content-markdown-mermaid":45,"i-lucide:book-open":255,"i-lucide:copy":257,"i-lucide:undo-2":259,"i-lucide:redo-2":261,"i-lucide:trash-2":263,"i-lucide:eye":265,"i-lucide:download":267,"i-lucide:git-branch":269,"i-lucide:calendar":271,"i-lucide:presentation":273,"i-lucide:database":275,"i-lucide:shield":277,"i-lucide:code":279,"i-lucide:pen-line":281,"i-lucide:share-2":283,"i-lucide:wand-sparkles":285,"i-lucide:file-code-2":287,"i-lucide:layout-template":290,"i-lucide:arrow-up-right":292,"i-lucide:network":294},{"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>",{"strings":46,"features":155,"steps":186,"useCases":208,"articleHtml":252},{"zh":47,"en":101},{"heroLead":48,"example":49,"export":50,"placeholder":51,"renderError":52,"diagramLight":53,"diagramDark":54,"emptyHint":55,"edit":56,"preview":57,"resetView":58,"fullscreen":59,"exitFullscreen":60,"hintFlowchart":61,"hintGeneral":62,"errorGoTo":63,"editNodeTitle":64,"editEdgeTitle":65,"editEdgeFallback":66,"editGenericTitle":67,"editPlaceholder":68,"editCancel":69,"editConfirm":70,"editNotFound":71,"editEdgeNotFound":72,"editReplacedN":73,"pdfPopupBlocked":74,"exportSvgDesc":75,"exportPngDesc":76,"exportJpgDesc":77,"exportPdfDesc":78,"quadrantUnicodeTitle":79,"quadrantUnicodeDesc":80,"quadrantUnicodeFix":81,"chineseQuoteTitle":82,"chineseQuoteDesc":83,"chineseQuoteFix":84,"undo":85,"redo":86,"copy":87,"markdownExtractedTitle":88,"markdownExtractedDesc":89,"markdownExtractedOk":90,"faq1q":91,"faq1a":92,"faq2q":93,"faq2a":94,"faq3q":95,"faq3a":96,"faq4q":97,"faq4a":98,"faq5q":99,"faq5a":100},"输入 Mermaid 语法，右侧实时渲染流程图、时序图、类图等，支持导出 SVG \u002F PNG \u002F JPG \u002F PDF。","加载示例","导出","在此输入 Mermaid 代码…","语法错误","亮色图表","暗色图表","在左侧输入 Mermaid 代码，图表将在这里实时渲染","编辑","预览","复位","全屏预览","退出全屏","滚轮缩放 · 拖拽移动 · 单击节点编辑","滚轮缩放 · 拖拽移动 · 单击文字编辑","跳转到第 {n} 行","编辑节点 \"{id}\"","编辑边 \"{from} → {to}\"","编辑边标签","编辑文字","输入新的文字","取消","确认","未找到对应内容，请手动在编辑器中修改","未找到对应边，请手动修改","已替换 {n} 处相同文字","请允许弹出窗口以导出 PDF","矢量","透明背景","主题背景色","打印友好","检测到 Unicode 字符（如中文），可能导致无法渲染","quadrantChart 的数据点名称含有中文等非 ASCII 字符时，需用英文双引号包裹才能正常渲染。点击下方按钮可自动修正。","自动加上引号","检测到含中文\u002F中文标点的未加引号标签","Mermaid 解析器遇到中文字符或中文标点（如中文冒号 ：）时可能报 unrecognized text 错误。点击下方按钮可自动在节点标签和边标签中加上英文双引号。","自动加引号修复","撤回","重做","复制代码","从 Markdown 提取","已识别并抽取第一个 mermaid 代码块。","好的","Mermaid 支持哪些图表类型？","本工具基于 Mermaid.js 最新版，支持：流程图（flowchart\u002Fgraph）、时序图（sequenceDiagram）、类图（classDiagram）、ER 图（erDiagram）、甘特图（gantt）、饼图（pie）、状态图（stateDiagram）、用户旅程图（journey）、Git 图（gitGraph）等 10+ 种图表类型。","导出的 SVG \u002F PNG 质量如何？","SVG 是矢量格式，无限放大不失真，适合放入 PPT、文档、网页。PNG 导出时会使用设备像素比（通常 2×）渲染，高清屏幕下字体和线条依然清晰。两种格式都完整保留 Mermaid 的样式和颜色。","我的图表代码会上传到服务器吗？","不会。Mermaid.js 是纯 JavaScript 库，渲染完全在你的浏览器本地完成。你输入的任何代码、生成的图表都不会发送到任何服务器，适合绘制包含敏感架构信息的内部系统图。","如何在 Markdown 文档中嵌入 Mermaid？","GitHub、GitLab、Notion、Obsidian、Typora 等平台都原生支持 Mermaid 代码块。写法是用三个反引号包裹并标注语言为 mermaid：```mermaid\\n图表代码\\n```。你可以在本工具调试好代码后直接复制粘贴到你的文档里。","出现语法错误怎么办？","右侧预览区会显示具体的错误信息，指出是哪一行、哪个关键词出了问题。常见错误：① 第一行没有声明图表类型（如 flowchart TD \u002F sequenceDiagram）② 节点或连线用了特殊字符但没有用引号包裹 ③ 箭头语法写错（flowchart 用 --> \u002F ---，sequence 用 ->> \u002F -->）。可以点击示例按钮参考正确语法。",{"heroLead":102,"example":103,"export":104,"placeholder":105,"renderError":106,"diagramLight":107,"diagramDark":108,"emptyHint":109,"edit":110,"preview":111,"resetView":112,"fullscreen":113,"exitFullscreen":114,"hintFlowchart":115,"hintGeneral":116,"errorGoTo":117,"editNodeTitle":118,"editEdgeTitle":119,"editEdgeFallback":120,"editGenericTitle":121,"editPlaceholder":122,"editCancel":123,"editConfirm":124,"editNotFound":125,"editEdgeNotFound":126,"editReplacedN":127,"pdfPopupBlocked":128,"exportSvgDesc":129,"exportPngDesc":130,"exportJpgDesc":131,"exportPdfDesc":132,"quadrantUnicodeTitle":133,"quadrantUnicodeDesc":134,"quadrantUnicodeFix":135,"chineseQuoteTitle":136,"chineseQuoteDesc":137,"chineseQuoteFix":138,"undo":139,"redo":140,"copy":141,"markdownExtractedTitle":142,"markdownExtractedDesc":143,"markdownExtractedOk":144,"faq1q":145,"faq1a":146,"faq2q":147,"faq2a":148,"faq3q":149,"faq3a":150,"faq4q":151,"faq4a":152,"faq5q":153,"faq5a":154},"Type Mermaid syntax and see your diagram rendered live on the right — export as SVG, PNG, JPG or PDF.","Load Examples","Export","Enter Mermaid code here…","Syntax error","Light diagram","Dark diagram","Enter Mermaid code on the left and your diagram will appear here","Edit","Preview","Reset","Fullscreen","Exit Fullscreen","Scroll to zoom · Drag to pan · Click node to edit","Scroll to zoom · Drag to pan · Click text to edit","Go to line {n}","Edit node \"{id}\"","Edit edge \"{from} → {to}\"","Edit edge label","Edit text","Enter new text","Cancel","Confirm","Not found, please edit manually","Edge not found, please edit manually","Replaced {n} occurrences","Please allow popups to export PDF","Vector","Transparent","Theme bg","Print","Unicode characters detected (e.g. Chinese) — may prevent rendering","quadrantChart data point names containing non-ASCII characters (such as Chinese) must be wrapped in double quotes to render correctly. Click the button below to auto-fix.","Auto-add quotes","Unquoted labels with Chinese characters detected","Mermaid's parser may throw an \"unrecognized text\" error when labels contain Chinese characters or CJK punctuation (e.g. ：). Click below to automatically wrap affected labels in double quotes.","Auto-fix with quotes","Undo","Redo","Copy code","Extract from Markdown","Found and extracted the first mermaid block.","OK","Which diagram types does Mermaid support?","This tool is powered by the latest Mermaid.js and supports: flowchart (flowchart\u002Fgraph), sequence diagram (sequenceDiagram), class diagram (classDiagram), ER diagram (erDiagram), Gantt chart (gantt), pie chart (pie), state diagram (stateDiagram), user journey (journey), Git graph (gitGraph), and more — 10+ diagram types in total.","How good is the SVG \u002F PNG export quality?","SVG is a vector format — infinitely scalable without quality loss, perfect for presentations, docs, or web pages. PNG export uses your device pixel ratio (typically 2×) so text and lines stay crisp on high-DPI screens. Both formats fully preserve Mermaid's styling and colours.","Is my diagram code uploaded to any server?","No. Mermaid.js is a pure JavaScript library — rendering happens entirely in your browser. None of your code or generated diagrams are ever sent to a server, making it safe to diagram sensitive internal architectures.","How do I embed Mermaid in a Markdown document?","GitHub, GitLab, Notion, Obsidian, Typora, and many other platforms natively render Mermaid code blocks. The syntax is a fenced code block with 'mermaid' as the language tag: ```mermaid\\ndiagram code\\n```. Debug your diagram here and paste the code directly into your document.","What should I do when I see a syntax error?","The preview panel shows the exact error message, pointing to which line or keyword is problematic. Common mistakes: ① missing diagram type on the first line (e.g. flowchart TD or sequenceDiagram) ② special characters in node labels not wrapped in quotes ③ wrong arrow syntax (flowchart uses --> \u002F ---, sequence uses ->> \u002F -->). Click the example buttons to see correct syntax for each diagram type.",{"zh":156,"en":173},[157,161,165,169],{"icon":158,"title":159,"desc":160},"lucide:git-branch","10+ 图表类型","流程图、时序图、类图、ER 图、甘特图、饼图等，输入即渲染，无需安装任何工具",{"icon":162,"title":163,"desc":164},"lucide:eye","实时预览","左侧输入 Mermaid 语法，右侧 400ms 内实时渲染，语法错误有友好提示",{"icon":166,"title":167,"desc":168},"lucide:download","导出 SVG \u002F PNG","SVG 矢量无损，PNG 支持高清（2x）导出，文件名遵循 metool_mermaid 规范",{"icon":170,"title":171,"desc":172},"lucide:shield","代码不离开浏览器","渲染由 Mermaid.js 在本地完成，架构图、系统图等敏感内容全程留在设备内",[174,177,180,183],{"icon":158,"title":175,"desc":176},"10+ diagram types","Flowchart, sequence, class, ER, Gantt, pie and more — rendered on the spot, no install needed",{"icon":162,"title":178,"desc":179},"Real-time preview","Type Mermaid syntax on the left, see the diagram update within 400ms on the right with friendly error messages",{"icon":166,"title":181,"desc":182},"SVG \u002F PNG export","SVG is losslessly scalable; PNG renders at 2× for crisp high-DPI output",{"icon":170,"title":184,"desc":185},"Code stays in your browser","Mermaid.js renders entirely locally — architecture diagrams and internal system diagrams never leave your device",{"zh":187,"en":198},[188,192,195],{"icon":189,"title":190,"desc":191},"lucide:code","输入 Mermaid 语法","在编辑区输入 Mermaid 图表语法，支持流程图\u002F甘特图等",{"icon":162,"title":193,"desc":194},"实时预览图表","右侧即时渲染图表，确认结构和节点连接无误",{"icon":166,"title":196,"desc":197},"导出图表图片","将图表导出为 PNG\u002FSVG，用于文档、演示或分享",[199,202,205],{"icon":189,"title":200,"desc":201},"Write Mermaid Syntax","Type Mermaid diagram code — flowcharts, Gantt, sequence, and more",{"icon":162,"title":203,"desc":204},"Preview Diagram Live","The chart renders in real time on the right as you edit",{"icon":166,"title":206,"desc":207},"Export as Image","Download the diagram as PNG or SVG for docs, slides, or sharing",{"zh":209,"en":233},[210,213,217,221,225,229],{"icon":158,"title":211,"desc":212},"绘制流程图","用文字描述流程，实时渲染为专业流程图并导出",{"icon":214,"title":215,"desc":216},"lucide:network","可视化系统架构","开发者用 Mermaid 语法绘制系统架构图，替代画图软件",{"icon":218,"title":219,"desc":220},"lucide:calendar","制作甘特图","项目经理用甘特图语法快速生成项目进度可视化图表",{"icon":222,"title":223,"desc":224},"lucide:presentation","为文档添加图表","在技术文档或 README 中插入 Mermaid 图，增强可读性",{"icon":226,"title":227,"desc":228},"lucide:share-2","分享可视化设计图","将 Mermaid 图表导出为图片，发给设计师或非技术人员",{"icon":230,"title":231,"desc":232},"lucide:database","绘制数据库 ER 图","用 Mermaid 语法定义实体关系，快速生成数据库结构图",[234,237,240,243,246,249],{"icon":158,"title":235,"desc":236},"Draw Flowcharts","Describe a flow in text — get a professional diagram rendered instantly",{"icon":214,"title":238,"desc":239},"Visualize System Architecture","Use Mermaid syntax to diagram systems without a separate drawing tool",{"icon":218,"title":241,"desc":242},"Create Gantt Charts","Generate project timeline visualizations with simple Gantt syntax",{"icon":222,"title":244,"desc":245},"Enrich Technical Docs","Embed Mermaid diagrams in docs or READMEs to improve readability",{"icon":226,"title":247,"desc":248},"Share Diagram Exports","Export Mermaid charts as images to send to designers or stakeholders",{"icon":230,"title":250,"desc":251},"Draw Database ER Diagrams","Define entity relationships in Mermaid syntax to generate database structure diagrams",{"zh":253,"en":254},"\u003Ch2>2026 年为什么 Mermaid 成为技术团队的默认图表语言？\u003C\u002Fh2>\n\u003Cp>在 2026 年，越来越多的技术团队把图表从 Visio、\u003Ca href=\"http:\u002F\u002FDraw.io\">Draw.io\u003C\u002Fa> 迁移到 Mermaid — 原因很简单：\u003Cstrong>Mermaid 是代码，图表也是代码\u003C\u002Fstrong>。就像 Markdown 让文档可以进 Git，Mermaid 让流程图、架构图、时序图也可以进 Git — diff 可读、Review 可查、历史可回溯。\u003C\u002Fp>\n\u003Cp>GitHub 在 2022 年原生支持 Mermaid 渲染后，这个趋势彻底加速。现在 GitHub README、Issues、Discussions、Wiki 里的 Mermaid 代码块都会被自动渲染成图表。GitLab、Notion、Obsidian、Typora 也相继跟进。\u003Cstrong>Markdown + Mermaid 的组合\u003C\u002Fstrong>，正在成为技术文档的新标配。\u003C\u002Fp>\n\u003Cp>MeTool 的 Mermaid 在线渲染器，是为"快速调试一段 Mermaid 代码"设计的。不需要安装 Node、不需要 Mermaid CLI，打开浏览器就能写、就能看渲染结果，写完复制代码贴回文档即可。\u003C\u002Fp>\n\u003Ch2>Mermaid 10 种图表类型速查\u003C\u002Fh2>\n\u003Ch3>流程图（flowchart \u002F graph）\u003C\u002Fh3>\n\u003Cp>最常用的图表类型。用 \u003Ccode>flowchart TD\u003C\u002Fcode>（从上到下）或 \u003Ccode>flowchart LR\u003C\u002Fcode>（从左到右）声明。节点用 \u003Ccode>[]\u003C\u002Fcode>（矩形）、\u003Ccode>{}\u003C\u002Fcode>（菱形\u002F判断）、\u003Ccode>(())\u003C\u002Fcode>（圆形\u002F开始结束）等形状，连线用 \u003Ccode>-->\u003C\u002Fcode>（箭头）、\u003Ccode>---\u003C\u002Fcode>（无箭头）。\u003C\u002Fp>\n\u003Ch3>时序图（sequenceDiagram）\u003C\u002Fh3>\n\u003Cp>描述多个参与者之间的消息交互顺序，适合 API 调用链、微服务交互、用户登录流程。\u003Ccode>->>+\u003C\u002Fcode> 表示激活，\u003Ccode>-->>-\u003C\u002Fcode> 表示返回并停用。\u003C\u002Fp>\n\u003Ch3>类图（classDiagram）\u003C\u002Fh3>\n\u003Cp>UML 类图，描述类的属性、方法、继承、组合关系。\u003Ccode><|--\u003C\u002Fcode> 表示继承，\u003Ccode>*--\u003C\u002Fcode> 表示组合，\u003Ccode>o--\u003C\u002Fcode> 表示聚合。\u003C\u002Fp>\n\u003Ch3>ER 图（erDiagram）\u003C\u002Fh3>\n\u003Cp>数据库 ER 图，描述表结构和表间关系。支持 PK \u002F FK 标注，关系用 \u003Ccode>||--o{\u003C\u002Fcode>（一对多）等符号。\u003C\u002Fp>\n\u003Ch3>甘特图（gantt）\u003C\u002Fh3>\n\u003Cp>项目管理时间线，自动计算任务起止、并行关系。支持 \u003Ccode>after\u003C\u002Fcode> 关键词设置前置依赖。\u003C\u002Fp>\n\u003Ch3>饼图（pie）\u003C\u002Fh3>\n\u003Cp>最简单的图表类型，适合展示比例分布。用 \u003Ccode>pie title 标题\u003C\u002Fcode> 声明，每行 \u003Ccode>"标签" : 数值\u003C\u002Fcode>。\u003C\u002Fp>\n\u003Ch3>状态图（stateDiagram）\u003C\u002Fh3>\n\u003Cp>有限状态机图，描述对象的状态转换。支持嵌套状态和并发状态。\u003C\u002Fp>\n\u003Ch3>用户旅程图（journey）\u003C\u002Fh3>\n\u003Cp>描述用户在产品中的体验旅程，每个步骤可以打分（1-5 分）并标注参与的角色。\u003C\u002Fp>\n\u003Ch3>Git 图（gitGraph）\u003C\u002Fh3>\n\u003Cp>可视化 Git 提交历史和分支策略，\u003Ccode>commit\u003C\u002Fcode>、\u003Ccode>branch\u003C\u002Fcode>、\u003Ccode>merge\u003C\u002Fcode> 指令直接对应 Git 操作。\u003C\u002Fp>\n\u003Ch3>思维导图（mindmap）\u003C\u002Fh3>\n\u003Cp>用缩进表示层级的树状图，适合知识结构梳理和头脑风暴。\u003C\u002Fp>\n\u003Ch2>把 Mermaid 融入你的 Markdown 工作流\u003C\u002Fh2>\n\u003Col>\n\u003Cli>\u003Cstrong>用本工具调试代码：\u003C\u002Fstrong>把 Mermaid 代码粘进左侧编辑区，右侧实时看渲染结果。遇到语法错误，错误信息会提示具体出错位置。调试好之后导出 SVG \u002F PNG，或者直接复制代码。\u003C\u002Fli>\n\u003Cli>\u003Cstrong>粘回 Markdown 文档：\u003C\u002Fstrong>把调试好的代码用 \u003Ccode>```mermaid\u003C\u002Fcode> 围栏包裹，粘进 GitHub Issues、README、Notion 页面或 Obsidian 笔记。平台会自动渲染。\u003C\u002Fli>\n\u003Cli>\u003Cstrong>导出图片用于演示：\u003C\u002Fstrong>如果目标平台不支持 Mermaid 渲染（比如微信公众号、PPT），导出为 PNG 后直接插图。\u003C\u002Fli>\n\u003Cli>\u003Cstrong>配合其他 Markdown 工具：\u003C\u002Fstrong>用 \u003Ca href=\"\u002Fmarkdown\u002Fedit\u002F\">Markdown 编辑器\u003C\u002Fa> 写正文，Mermaid 工具补充图表，用 \u003Ca href=\"\u002Fmarkdown\u002Fconvert\u002F\">Markdown 转 PDF\u003C\u002Fa> 一键导出完整文档。\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Cp>Mermaid + Markdown 的组合，让你在不离开纯文本环境的前提下，完成从文字到图表的全部创作 — 2026 年技术内容创作者最值得掌握的工具组合之一。\u003C\u002Fp>\n\u003Ch2>Mermaid 实用代码示例：5 分钟学会常用图表\u003C\u002Fh2>\n\u003Cp>理论总是枯燥的，直接看例子最有效。下面是几种最常用图表的最小可用示例，复制进本工具就能立即看到渲染结果。\u003C\u002Fp>\n\u003Cp>\u003Cstrong>简单流程图：\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"background-color:#fff;--shiki-dark-bg:#24292e;color:#24292e;--shiki-dark:#e1e4e8\" tabindex=\"0\">\u003Ccode class=\"language-text\">\u003Cspan class=\"line\">\u003Cspan>flowchart LR\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan>  A[用户提交表单] --> B{数据验证}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan>  B -- 通过 --> C[写入数据库]\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan>  B -- 失败 --> D[返回错误提示]\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan>  C --> E[发送确认邮件]\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cstrong>API 时序图：\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"background-color:#fff;--shiki-dark-bg:#24292e;color:#24292e;--shiki-dark:#e1e4e8\" tabindex=\"0\">\u003Ccode class=\"language-text\">\u003Cspan class=\"line\">\u003Cspan>sequenceDiagram\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan>  participant 前端\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan>  participant 后端\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan>  participant 数据库\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan>  前端->>后端: POST \u002Fapi\u002Flogin\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan>  后端->>数据库: 查询用户信息\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan>  数据库-->>后端: 返回用户记录\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan>  后端-->>前端: 200 OK + JWT Token\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cstrong>项目甘特图：\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"background-color:#fff;--shiki-dark-bg:#24292e;color:#24292e;--shiki-dark:#e1e4e8\" tabindex=\"0\">\u003Ccode class=\"language-text\">\u003Cspan class=\"line\">\u003Cspan>gantt\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan>  title 功能迭代计划\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan>  dateFormat YYYY-MM-DD\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan>  section 设计\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan>    UI 原型       :done, 2025-01-01, 7d\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan>    设计评审      :done, 2025-01-08, 2d\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan>  section 开发\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan>    前端开发      :active, 2025-01-10, 14d\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan>    后端 API      :2025-01-10, 10d\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan>  section 测试\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan>    集成测试      :2025-01-24, 5d\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>遇到问题时，最常见的语法错误是：节点标签内含有英文括号或特殊字符未加引号、缩进不一致、图表类型拼写错误（\u003Ccode>flowChart\u003C\u002Fcode> 和 \u003Ccode>flowchart\u003C\u002Fcode> 区分大小写）。编辑区下方的错误提示会给出具体行号，快速定位。\u003C\u002Fp>\n\u003Ch2>Mermaid 在主流平台的支持现状（2026 年更新）\u003C\u002Fh2>\n\u003Cp>选择 Mermaid 作为团队图表标准前，了解各平台的支持情况很重要：\u003C\u002Fp>\n\u003Cp>\u003Cstrong>原生支持（零配置可用）：\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cstrong>GitHub\u003C\u002Fstrong>：README、Issues、PR 描述、Discussions、Wiki 均可直接渲染 Mermaid 代码块。\u003C\u002Fli>\n\u003Cli>\u003Cstrong>GitLab\u003C\u002Fstrong>：从 10.3 版本起原生支持，Markdown 文件、Issue、Wiki 均可渲染。\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Notion\u003C\u002Fstrong>：内置 Mermaid 代码块，插入 "\u002Fmermaid" 即可创建图表块。\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Obsidian\u003C\u002Fstrong>：核心插件中内置 Mermaid 渲染，笔记内可直接使用。\u003C\u002Fli>\n\u003Cli>\u003Cstrong>HackMD \u002F CodiMD\u003C\u002Fstrong>：协作 Markdown 平台，完整支持所有 Mermaid 图表类型。\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>\u003Cstrong>需插件支持：\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cstrong>VS Code\u003C\u002Fstrong>：安装 "Markdown Preview Mermaid Support" 插件后可在预览窗口渲染。\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Confluence\u003C\u002Fstrong>：通过 Mermaid 插件（付费）支持，或通过嵌入 iframe 实现。\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Jira\u003C\u002Fstrong>：目前原生不支持，需借助第三方插件或嵌入链接。\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>\u003Cstrong>不支持（导出为图片是最佳方案）：\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cul>\n\u003Cli>微信公众号、飞书文档（分享）、PPT、邮件 HTML\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>遇到不支持的平台，用本工具导出 SVG 或 PNG 后插图即可——SVG 矢量格式在任何分辨率下都清晰，推荐优先使用。\u003C\u002Fp>\n","\u003Ch2>Why Mermaid became the default diagram language for tech teams in 2026\u003C\u002Fh2>\n\u003Cp>In 2026, more and more technical teams are migrating diagrams away from Visio and \u003Ca href=\"http:\u002F\u002FDraw.io\">Draw.io\u003C\u002Fa> toward Mermaid — and the reason is simple: \u003Cstrong>Mermaid is code, so diagrams become code too\u003C\u002Fstrong>. Just like Markdown makes documentation versionable, Mermaid makes flowcharts, architecture diagrams, and sequence diagrams versionable — diffs are readable, reviews are auditable, history is recoverable.\u003C\u002Fp>\n\u003Cp>The trend accelerated when GitHub added native Mermaid rendering in 2022. README files, Issues, Discussions, and Wikis on GitHub all auto-render fenced Mermaid blocks. GitLab, Notion, Obsidian, and Typora followed. \u003Cstrong>Markdown + Mermaid\u003C\u002Fstrong> is rapidly becoming the new standard for technical documentation.\u003C\u002Fp>\n\u003Cp>MeTool's online Mermaid renderer is built for "quickly iterate on a Mermaid snippet". No Node.js install, no Mermaid CLI — open your browser, write, see the render live, copy the code back into your doc.\u003C\u002Fp>\n\u003Ch2>A quick-reference guide to Mermaid's 10 diagram types\u003C\u002Fh2>\n\u003Ch3>Flowchart (flowchart \u002F graph)\u003C\u002Fh3>\n\u003Cp>The most-used type. Declare with \u003Ccode>flowchart TD\u003C\u002Fcode> (top-down) or \u003Ccode>flowchart LR\u003C\u002Fcode> (left-right). Node shapes: \u003Ccode>[]\u003C\u002Fcode> rectangle, \u003Ccode>{}\u003C\u002Fcode> diamond\u002Fdecision, \u003Ccode>(())\u003C\u002Fcode> circle\u002Fterminal. Connectors: \u003Ccode>-->\u003C\u002Fcode> arrow, \u003Ccode>---\u003C\u002Fcode> no-arrow line.\u003C\u002Fp>\n\u003Ch3>Sequence diagram (sequenceDiagram)\u003C\u002Fh3>\n\u003Cp>Models message exchanges between participants — API call chains, microservice interactions, login flows. \u003Ccode>->>+\u003C\u002Fcode> activates a participant; \u003Ccode>-->>-\u003C\u002Fcode> returns and deactivates.\u003C\u002Fp>\n\u003Ch3>Class diagram (classDiagram)\u003C\u002Fh3>\n\u003Cp>UML class diagrams with attributes, methods, and relationships. \u003Ccode><|--\u003C\u002Fcode> inheritance, \u003Ccode>*--\u003C\u002Fcode> composition, \u003Ccode>o--\u003C\u002Fcode> aggregation.\u003C\u002Fp>\n\u003Ch3>ER diagram (erDiagram)\u003C\u002Fh3>\n\u003Cp>Database entity–relationship diagrams with PK\u002FFK annotations. Cardinality uses symbols like \u003Ccode>||--o{\u003C\u002Fcode> (one-to-many).\u003C\u002Fp>\n\u003Ch3>Gantt chart (gantt)\u003C\u002Fh3>\n\u003Cp>Project management timelines. Tasks auto-calculate start\u002Fend; \u003Ccode>after taskName\u003C\u002Fcode> sets dependencies.\u003C\u002Fp>\n\u003Ch3>Pie chart (pie)\u003C\u002Fh3>\n\u003Cp>Simplest type. Declare with \u003Ccode>pie title Label\u003C\u002Fcode>, each entry is \u003Ccode>"Slice" : value\u003C\u002Fcode>.\u003C\u002Fp>\n\u003Ch3>State diagram (stateDiagram)\u003C\u002Fh3>\n\u003Cp>Finite-state machine diagrams showing state transitions, including nested and concurrent states.\u003C\u002Fp>\n\u003Ch3>User journey (journey)\u003C\u002Fh3>\n\u003Cp>Models a user's experience journey, with step ratings (1–5) and actor annotations.\u003C\u002Fp>\n\u003Ch3>Git graph (gitGraph)\u003C\u002Fh3>\n\u003Cp>Visualises Git commit history and branching strategies. \u003Ccode>commit\u003C\u002Fcode>, \u003Ccode>branch\u003C\u002Fcode>, and \u003Ccode>merge\u003C\u002Fcode> map directly to Git operations.\u003C\u002Fp>\n\u003Ch3>Mind map (mindmap)\u003C\u002Fh3>\n\u003Cp>Indentation-based tree structure for knowledge maps and brainstorming.\u003C\u002Fp>\n\u003Ch2>Integrating Mermaid into your Markdown workflow\u003C\u002Fh2>\n\u003Col>\n\u003Cli>\u003Cstrong>Debug your diagram here:\u003C\u002Fstrong> paste Mermaid code into the left editor, watch the render update live on the right. Syntax errors surface as readable messages pointing at the offending line. Once satisfied, export as SVG \u002F PNG or copy the code.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Embed in your Markdown document:\u003C\u002Fstrong> wrap the code in a \u003Ccode>```mermaid\u003C\u002Fcode> fence and paste into GitHub Issues, README, Notion pages, or Obsidian notes — the platform renders it automatically.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Export images for non-Mermaid platforms:\u003C\u002Fstrong> if your target platform doesn't support Mermaid rendering (WeChat articles, PowerPoint slides), export as PNG and insert as a regular image.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Pair with the rest of the Markdown toolchain:\u003C\u002Fstrong> write prose in the \u003Ca href=\"\u002Fmarkdown\u002Fedit\u002F\">Markdown Editor\u003C\u002Fa>, build diagrams here, export a polished document via \u003Ca href=\"\u002Fmarkdown\u002Fconvert\u002F\">Markdown → PDF\u003C\u002Fa>.\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Cp>Mermaid + Markdown keeps you entirely in plain text from first draft to final diagram — one of the most valuable tool combinations for 2026 technical content creators.\u003C\u002Fp>\n",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":256},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 7v14m-9-3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4a4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3a3 3 0 0 0-3-3z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":258},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Crect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\"\u002F>\u003Cpath d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":260},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M9 14L4 9l5-5\"\u002F>\u003Cpath d=\"M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5a5.5 5.5 0 0 1-5.5 5.5H11\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":262},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"m15 14l5-5l-5-5\"\u002F>\u003Cpath d=\"M20 9H9.5A5.5 5.5 0 0 0 4 14.5A5.5 5.5 0 0 0 9.5 20H13\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":264},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M10 11v6m4-6v6m5-11v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":266},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M2.062 12.348a1 1 0 0 1 0-.696a10.75 10.75 0 0 1 19.876 0a1 1 0 0 1 0 .696a10.75 10.75 0 0 1-19.876 0\"\u002F>\u003Ccircle cx=\"12\" cy=\"12\" r=\"3\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":268},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M12 15V3m9 12v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"\u002F>\u003Cpath d=\"m7 10l5 5l5-5\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":270},"\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>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":272},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M8 2v4m8-4v4\"\u002F>\u003Crect width=\"18\" height=\"18\" x=\"3\" y=\"4\" rx=\"2\"\u002F>\u003Cpath d=\"M3 10h18\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":274},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M2 3h20m-1 0v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V3m4 18l5-5l5 5\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":276},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cellipse cx=\"12\" cy=\"5\" rx=\"9\" ry=\"3\"\u002F>\u003Cpath d=\"M3 5v14a9 3 0 0 0 18 0V5\"\u002F>\u003Cpath d=\"M3 12a9 3 0 0 0 18 0\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":278},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" 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>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":280},"\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":282},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 21h8m.174-14.188a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":284},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Ccircle cx=\"18\" cy=\"5\" r=\"3\"\u002F>\u003Ccircle cx=\"6\" cy=\"12\" r=\"3\"\u002F>\u003Ccircle cx=\"18\" cy=\"19\" r=\"3\"\u002F>\u003Cpath d=\"m8.59 13.51l6.83 3.98m-.01-10.98l-6.82 3.98\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":286},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m21.64 3.64l-1.28-1.28a1.21 1.21 0 0 0-1.72 0L2.36 18.64a1.21 1.21 0 0 0 0 1.72l1.28 1.28a1.2 1.2 0 0 0 1.72 0L21.64 5.36a1.2 1.2 0 0 0 0-1.72M14 7l3 3M5 6v4m14 4v4M10 2v2M7 8H3m18 8h-4M11 3H9\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":288,"hidden":289},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M4 22h14a2 2 0 0 0 2-2V7l-5-5H6a2 2 0 0 0-2 2v4\"\u002F>\u003Cpath d=\"M14 2v4a2 2 0 0 0 2 2h4M5 12l-3 3l3 3m4 0l3-3l-3-3\"\u002F>\u003C\u002Fg>",true,{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":291},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Crect width=\"18\" height=\"7\" x=\"3\" y=\"3\" rx=\"1\"\u002F>\u003Crect width=\"9\" height=\"7\" x=\"3\" y=\"14\" rx=\"1\"\u002F>\u003Crect width=\"5\" height=\"7\" x=\"16\" y=\"14\" rx=\"1\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":293},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M7 7h10v10M7 17L17 7\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":295},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Crect width=\"6\" height=\"6\" x=\"16\" y=\"16\" rx=\"1\"\u002F>\u003Crect width=\"6\" height=\"6\" x=\"2\" y=\"16\" rx=\"1\"\u002F>\u003Crect width=\"6\" height=\"6\" x=\"9\" y=\"2\" rx=\"1\"\u002F>\u003Cpath d=\"M5 16v-3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3m-7-4V8\"\u002F>\u003C\u002Fg>",1782799334682]