[{"data":1,"prerenderedAt":352},["ShallowReactive",2],{"navigation_docs_manual_en":3,"-docs-manual-en-essentials-mermaid":134,"-docs-manual-en-essentials-mermaid-surround":347},[4,41,77,109],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":40},"Getting Started","i-lucide-rocket","\u002Fdocs\u002Fmanual\u002Fen\u002Fgetting-started","docs\u002Fmanual\u002Fen\u002F1.getting-started",[10,15,20,25,30,35],{"title":11,"path":12,"stem":13,"icon":14},"Introduction","\u002Fdocs\u002Fmanual\u002Fen\u002Fgetting-started\u002Fintroduction","docs\u002Fmanual\u002Fen\u002F1.getting-started\u002F2.introduction","i-lucide-house",{"title":16,"path":17,"stem":18,"icon":19},"Installation","\u002Fdocs\u002Fmanual\u002Fen\u002Fgetting-started\u002Finstallation","docs\u002Fmanual\u002Fen\u002F1.getting-started\u002F3.installation","i-lucide-download",{"title":21,"path":22,"stem":23,"icon":24},"Project Structure","\u002Fdocs\u002Fmanual\u002Fen\u002Fgetting-started\u002Fproject-structure","docs\u002Fmanual\u002Fen\u002F1.getting-started\u002F4.project-structure","i-lucide-folder-tree",{"title":26,"path":27,"stem":28,"icon":29},"Studio module","\u002Fdocs\u002Fmanual\u002Fen\u002Fgetting-started\u002Fstudio","docs\u002Fmanual\u002Fen\u002F1.getting-started\u002F5.studio","i-lucide-mouse-pointer-2",{"title":31,"path":32,"stem":33,"icon":34},"Migration","\u002Fdocs\u002Fmanual\u002Fen\u002Fgetting-started\u002Fmigration","docs\u002Fmanual\u002Fen\u002F1.getting-started\u002F6.migration","i-lucide-replace",{"title":36,"path":37,"stem":38,"icon":39},"Troubleshooting","\u002Fdocs\u002Fmanual\u002Fen\u002Fgetting-started\u002Ftroubleshooting","docs\u002Fmanual\u002Fen\u002F1.getting-started\u002F7.troubleshooting","i-lucide-wrench",false,{"title":42,"icon":43,"path":44,"stem":45,"children":46,"page":40},"Core Concepts","i-lucide-brain","\u002Fdocs\u002Fmanual\u002Fen\u002Fconcepts","docs\u002Fmanual\u002Fen\u002F2.concepts",[47,52,57,62,67,72],{"title":48,"path":49,"stem":50,"icon":51},"Edition","\u002Fdocs\u002Fmanual\u002Fen\u002Fconcepts\u002Fedition","docs\u002Fmanual\u002Fen\u002F2.concepts\u002F2.edition","i-lucide-pencil",{"title":53,"path":54,"stem":55,"icon":56},"Configuration","\u002Fdocs\u002Fmanual\u002Fen\u002Fconcepts\u002Fconfiguration","docs\u002Fmanual\u002Fen\u002F2.concepts\u002F3.configuration","i-lucide-settings",{"title":58,"path":59,"stem":60,"icon":61},"Theme","\u002Fdocs\u002Fmanual\u002Fen\u002Fconcepts\u002Ftheme","docs\u002Fmanual\u002Fen\u002F2.concepts\u002F4.theme","i-lucide-paint-roller",{"title":63,"path":64,"stem":65,"icon":66},"Customization","\u002Fdocs\u002Fmanual\u002Fen\u002Fconcepts\u002Fcustomization","docs\u002Fmanual\u002Fen\u002F2.concepts\u002F5.customization","i-lucide-pen-tool",{"title":68,"path":69,"stem":70,"icon":71},"Internationalization","\u002Fdocs\u002Fmanual\u002Fen\u002Fconcepts\u002Finternationalization","docs\u002Fmanual\u002Fen\u002F2.concepts\u002F6.internationalization","i-lucide-globe",{"title":73,"path":74,"stem":75,"icon":76},"Nuxt","\u002Fdocs\u002Fmanual\u002Fen\u002Fconcepts\u002Fnuxt","docs\u002Fmanual\u002Fen\u002F2.concepts\u002F8.nuxt","i-simple-icons-nuxt",{"title":78,"icon":79,"path":80,"stem":81,"children":82,"page":40},"Essentials","i-lucide-book-open","\u002Fdocs\u002Fmanual\u002Fen\u002Fessentials","docs\u002Fmanual\u002Fen\u002F3.essentials",[83,88,93,98,103],{"title":84,"path":85,"stem":86,"icon":87},"Markdown Syntax","\u002Fdocs\u002Fmanual\u002Fen\u002Fessentials\u002Fmarkdown-syntax","docs\u002Fmanual\u002Fen\u002F3.essentials\u002F1.markdown-syntax","i-lucide-heading-1",{"title":89,"path":90,"stem":91,"icon":92},"Code Blocks","\u002Fdocs\u002Fmanual\u002Fen\u002Fessentials\u002Fcode-blocks","docs\u002Fmanual\u002Fen\u002F3.essentials\u002F2.code-blocks","i-lucide-code-xml",{"title":94,"path":95,"stem":96,"icon":97},"Components","\u002Fdocs\u002Fmanual\u002Fen\u002Fessentials\u002Fcomponents","docs\u002Fmanual\u002Fen\u002F3.essentials\u002F3.components","i-lucide-component",{"title":99,"path":100,"stem":101,"icon":102},"Images and Embeds","\u002Fdocs\u002Fmanual\u002Fen\u002Fessentials\u002Fimages-embeds","docs\u002Fmanual\u002Fen\u002F3.essentials\u002F4.images-embeds","i-lucide-image",{"title":104,"path":105,"stem":106,"icon":107,"position":108},"Mermaid Diagrams","\u002Fdocs\u002Fmanual\u002Fen\u002Fessentials\u002Fmermaid","docs\u002Fmanual\u002Fen\u002F3.essentials\u002F5.mermaid","i-lucide-chart-network",5,{"title":110,"icon":111,"path":112,"stem":113,"children":114,"page":40},"AI","i-lucide-sparkles","\u002Fdocs\u002Fmanual\u002Fen\u002Fai","docs\u002Fmanual\u002Fen\u002F4.ai",[115,119,124,129],{"title":116,"path":117,"stem":118,"icon":111},"Assistant","\u002Fdocs\u002Fmanual\u002Fen\u002Fai\u002Fassistant","docs\u002Fmanual\u002Fen\u002F4.ai\u002F1.assistant",{"title":120,"path":121,"stem":122,"icon":123},"MCP Server","\u002Fdocs\u002Fmanual\u002Fen\u002Fai\u002Fmcp","docs\u002Fmanual\u002Fen\u002F4.ai\u002F2.mcp","i-lucide-cpu",{"title":125,"path":126,"stem":127,"icon":128},"Agent Skills","\u002Fdocs\u002Fmanual\u002Fen\u002Fai\u002Fskills","docs\u002Fmanual\u002Fen\u002F4.ai\u002F3.skills","i-lucide-wand-sparkles",{"title":130,"path":131,"stem":132,"icon":133},"LLMs Integration","\u002Fdocs\u002Fmanual\u002Fen\u002Fai\u002Fllms","docs\u002Fmanual\u002Fen\u002F4.ai\u002F4.llms","i-lucide-message-circle-code",{"id":135,"title":104,"body":136,"config":339,"description":340,"extension":206,"links":339,"meta":341,"navigation":342,"path":105,"seo":343,"stem":106,"__hash__":346},"docs_manual_en\u002Fdocs\u002Fmanual\u002Fen\u002F3.essentials\u002F5.mermaid.md",{"type":137,"value":138,"toc":331},"minimark",[139,144,157,165,169,174,178,181,184,187,191,201,275,278,282,303,307,310,327],[140,141,143],"h2",{"id":142},"mermaid-is-already-enabled","Mermaid is already enabled",[145,146,147,148,152,153,156],"p",{},"TockDocs registers ",[149,150,151],"code",{},"@barzhsieh\u002Fnuxt-content-mermaid"," in the shared layer, so any Markdown page under ",[149,154,155],{},"docs\u002Fcontent\u002F**"," can render Mermaid fences.",[145,158,159,160,164],{},"You do ",[161,162,163],"strong",{},"not"," need to add a separate Vue component for the common case. Just write a top-level Mermaid fence in your content file and the layer will turn it into a responsive diagram.",[140,166,168],{"id":167},"create-your-first-diagram","Create your first diagram",[170,171],"mermaid",{":config":172,"code":173},"config","flowchart%20TD%0A%20%20A%5BWrite%20Markdown%5D%20--%3E%20B%5BAdd%20a%20mermaid%20fence%5D%0A%20%20B%20--%3E%20C%5BTockDocs%20converts%20it%20to%20%60%3CMermaid%3E%60%5D%0A%20%20C%20--%3E%20D%5BNuxt%20renders%20the%20SVG%5D",[140,175,177],{"id":176},"build-diagrams-that-fit-tockdocs","Build diagrams that fit TockDocs",[145,179,180],{},"A simple TockDocs example:",[170,182],{":config":172,"code":183},"flowchart%20LR%0A%20%20Docs%5Bdocs%2F%5D%20--%3E%20Layer%5Blayer%2F%5D%0A%20%20Layer%20--%3E%20Content%5BNuxt%20Content%5D%0A%20%20Layer%20--%3E%20Mermaid%5BMermaid%20runtime%5D%0A%20%20Content%20--%3E%20Page%5BRendered%20page%5D%0A%20%20Mermaid%20--%3E%20Page",[145,185,186],{},"You can also use sequence diagrams, state diagrams, class diagrams, and more — anything Mermaid supports.",[140,188,190],{"id":189},"customize-a-diagram-per-page","Customize a diagram per page",[145,192,193,194,196,197,200],{},"TockDocs exposes a ",[149,195,172],{}," frontmatter field for Mermaid overrides. The shared layer already declares this field in ",[149,198,199],{},"layer\u002Fcontent.config.ts",", so it is parsed as an object.",[202,203,208],"pre",{"className":204,"code":205,"language":206,"meta":207,"style":207},"language-md shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","---\ntitle: Mermaid diagrams\nconfig:\n  theme: forest\n  flowchart:\n    curve: step\n---\n","md","",[149,209,210,219,233,241,252,259,270],{"__ignoreMap":207},[211,212,215],"span",{"class":213,"line":214},"line",1,[211,216,218],{"class":217},"sMK4o","---\n",[211,220,222,226,229],{"class":213,"line":221},2,[211,223,225],{"class":224},"swJcz","title",[211,227,228],{"class":217},":",[211,230,232],{"class":231},"sfazB"," Mermaid diagrams\n",[211,234,236,238],{"class":213,"line":235},3,[211,237,172],{"class":224},[211,239,240],{"class":217},":\n",[211,242,244,247,249],{"class":213,"line":243},4,[211,245,246],{"class":224},"  theme",[211,248,228],{"class":217},[211,250,251],{"class":231}," forest\n",[211,253,254,257],{"class":213,"line":108},[211,255,256],{"class":224},"  flowchart",[211,258,240],{"class":217},[211,260,262,265,267],{"class":213,"line":261},6,[211,263,264],{"class":224},"    curve",[211,266,228],{"class":217},[211,268,269],{"class":231}," step\n",[211,271,273],{"class":213,"line":272},7,[211,274,218],{"class":217},[170,276],{":config":172,"code":277},"flowchart%20TD%0A%20%20A%5BStart%5D%20--%3E%20B%5BCustomized%20with%20frontmatter%20config%5D",[140,279,281],{"id":280},"useful-tips","Useful tips",[283,284,285,291,294,300],"ul",{},[286,287,288,289],"li",{},"Keep the fence name exactly ",[149,290,170],{},[286,292,293],{},"Put the fence at the top level of the Markdown file",[286,295,296,297],{},"Use valid Mermaid syntax; a single typo can trigger ",[149,298,299],{},"⚠️ Mermaid Diagram Error",[286,301,302],{},"If you change module configuration, restart the dev server so Vite can re-optimize dependencies",[140,304,306],{"id":305},"when-to-use-it","When to use it",[145,308,309],{},"Use Mermaid when you want to explain:",[283,311,312,315,318,321,324],{},[286,313,314],{},"workspace structure",[286,316,317],{},"request or data flow",[286,319,320],{},"architecture decisions",[286,322,323],{},"onboarding steps",[286,325,326],{},"deployment paths",[328,329,330],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}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 .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 .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":207,"searchDepth":221,"depth":221,"links":332},[333,334,335,336,337,338],{"id":142,"depth":221,"text":143},{"id":167,"depth":221,"text":168},{"id":176,"depth":221,"text":177},{"id":189,"depth":221,"text":190},{"id":280,"depth":221,"text":281},{"id":305,"depth":221,"text":306},null,"Learn how to create Mermaid diagrams in TockDocs Markdown pages.",{},{"icon":107,"position":108},{"title":344,"description":345},"Mermaid diagrams","Render Mermaid diagrams in TockDocs content with fenced code blocks.","-qzbPY5ciNiIGaIkXuvpeu_qmU10kSD-5Y_hybaJLyA",[348,350],{"title":99,"path":100,"stem":101,"description":349,"icon":102,"children":-1},"Add image, video, and other HTML elements",{"title":116,"path":117,"stem":118,"description":351,"icon":111,"children":-1},"Add AI-powered chat to your docs that answers questions, cites sources, and generates code examples.",1778495974466]