[{"data":1,"prerenderedAt":350},["ShallowReactive",2],{"mobile-docs-navigation":3,"docs-page:\u002Fgetting-started":59,"docs-navigation:en":337},[4,8,12,16,20,30],{"title":5,"path":6,"stem":7},"Getting Started","\u002Fgetting-started","2.getting-started",{"title":9,"path":10,"stem":11},"Writing Diagrams","\u002Fwriting-diagrams","3.writing-diagrams",{"title":13,"path":14,"stem":15},"Configuration","\u002Fconfiguration","4.configuration",{"title":17,"path":18,"stem":19},"Troubleshooting","\u002Ftroubleshooting","5.troubleshooting",{"title":21,"path":22,"stem":23,"children":24,"page":29},"Migration","\u002Fmigration","6.migration",[25],{"title":26,"path":27,"stem":28},"Migration to v3","\u002Fmigration\u002Fv3","6.migration\u002F1.v3",false,{"title":31,"path":32,"stem":33,"children":34,"page":29},"Zh","\u002Fzh","zh",[35,39,43,47,51],{"title":36,"path":37,"stem":38},"開始使用","\u002Fzh\u002Fgetting-started","zh\u002F2.getting-started",{"title":40,"path":41,"stem":42},"撰寫圖表","\u002Fzh\u002Fwriting-diagrams","zh\u002F3.writing-diagrams",{"title":44,"path":45,"stem":46},"設定","\u002Fzh\u002Fconfiguration","zh\u002F4.configuration",{"title":48,"path":49,"stem":50},"疑難排解","\u002Fzh\u002Ftroubleshooting","zh\u002F5.troubleshooting",{"title":21,"path":52,"stem":53,"children":54,"page":29},"\u002Fzh\u002Fmigration","zh\u002F6.migration",[55],{"title":56,"path":57,"stem":58},"升級至 v3","\u002Fzh\u002Fmigration\u002Fv3","zh\u002F6.migration\u002F1.v3",{"id":60,"title":5,"body":61,"description":333,"extension":225,"meta":334,"navigation":238,"path":6,"seo":335,"stem":7,"__hash__":336},"docs\u002F2.getting-started.md",{"type":62,"value":63,"toc":325},"minimark",[64,68,73,77,100,104,107,135,146,150,157,203,210,214,221,275,281,285,288,300,304,321],[65,66,5],"h1",{"id":67},"getting-started",[69,70,72],"h2",{"id":71},"prerequisites","Prerequisites",[74,75,76],"p",{},"Use the package in a Nuxt Content application with:",[78,79,80,88,94],"ul",{},[81,82,83,84],"li",{},"Node.js ",[85,86,87],"code",{},">=22.19.0",[81,89,90,91],{},"Nuxt ",[85,92,93],{},"^4.1.0",[81,95,96,97],{},"Nuxt Content ",[85,98,99],{},">=3.5.0 \u003C4.0.0",[69,101,103],{"id":102},"install","Install",[74,105,106],{},"Install the module and Nuxt Content:",[108,109,114],"pre",{"className":110,"code":111,"language":112,"meta":113,"style":113},"language-bash shiki shiki-themes github-light github-dark-high-contrast","pnpm add @barzhsieh\u002Fnuxt-content-mermaid @nuxt\u002Fcontent\n","bash","",[85,115,116],{"__ignoreMap":113},[117,118,121,125,129,132],"span",{"class":119,"line":120},"line",1,[117,122,124],{"class":123},"sMTad","pnpm",[117,126,128],{"class":127},"srMev"," add",[117,130,131],{"class":127}," @barzhsieh\u002Fnuxt-content-mermaid",[117,133,134],{"class":127}," @nuxt\u002Fcontent\n",[74,136,137,138,145],{},"Mermaid is included by the module, so you do not need to install it separately.\nThe published version and package metadata are available on ",[139,140,144],"a",{"href":141,"rel":142},"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@barzhsieh\u002Fnuxt-content-mermaid",[143],"nofollow","npm",".",[69,147,149],{"id":148},"enable-the-module","Enable the module",[74,151,152,153,156],{},"Add the module to ",[85,154,155],{},"nuxt.config.ts",":",[108,158,162],{"className":159,"code":160,"language":161,"meta":113,"style":113},"language-ts shiki shiki-themes github-light github-dark-high-contrast","export default defineNuxtConfig({\n  modules: ['@barzhsieh\u002Fnuxt-content-mermaid'],\n})\n","ts",[85,163,164,181,197],{"__ignoreMap":113},[117,165,166,170,173,177],{"class":119,"line":120},[117,167,169],{"class":168},"s-kum","export",[117,171,172],{"class":168}," default",[117,174,176],{"class":175},"s_Opv"," defineNuxtConfig",[117,178,180],{"class":179},"sjV9Q","({\n",[117,182,184,188,191,194],{"class":119,"line":183},2,[117,185,187],{"class":186},"skGVy","  modules: [",[117,189,190],{"class":127},"'@barzhsieh\u002Fnuxt-content-mermaid'",[117,192,193],{"class":186},"]",[117,195,196],{"class":179},",\n",[117,198,200],{"class":119,"line":199},3,[117,201,202],{"class":179},"})\n",[74,204,205,206,209],{},"If your application already lists ",[85,207,208],{},"@nuxt\u002Fcontent",", you can keep it in the module list.",[69,211,213],{"id":212},"add-your-first-diagram","Add your first diagram",[74,215,216,217,220],{},"Add a ",[85,218,219],{},"mermaid"," code fence to a Markdown file in your Content source:",[108,222,226],{"className":223,"code":224,"language":225,"meta":113,"style":113},"language-md shiki shiki-themes github-light github-dark-high-contrast","# Hello diagram\n\n```mermaid\nflowchart LR\n  Markdown --> Content\n  Content --> Mermaid\n  Mermaid --> Rendered\n```\n","md",[85,227,228,234,240,245,251,257,263,269],{"__ignoreMap":113},[117,229,230],{"class":119,"line":120},[117,231,233],{"class":232},"sg8bY","# Hello diagram\n",[117,235,236],{"class":119,"line":183},[117,237,239],{"emptyLinePlaceholder":238},true,"\n",[117,241,242],{"class":119,"line":199},[117,243,244],{"class":186},"```mermaid\n",[117,246,248],{"class":119,"line":247},4,[117,249,250],{"class":186},"flowchart LR\n",[117,252,254],{"class":119,"line":253},5,[117,255,256],{"class":186},"  Markdown --> Content\n",[117,258,260],{"class":119,"line":259},6,[117,261,262],{"class":186},"  Content --> Mermaid\n",[117,264,266],{"class":119,"line":265},7,[117,267,268],{"class":186},"  Mermaid --> Rendered\n",[117,270,272],{"class":119,"line":271},8,[117,273,274],{"class":186},"```\n",[74,276,277,278,280],{},"The fence language must be ",[85,279,219],{},". The module transforms the block during the Content build and renders the diagram in the browser.",[69,282,284],{"id":283},"run-the-application","Run the application",[74,286,287],{},"Start Nuxt and open the route for that Markdown file:",[108,289,291],{"className":110,"code":290,"language":112,"meta":113,"style":113},"pnpm dev\n",[85,292,293],{"__ignoreMap":113},[117,294,295,297],{"class":119,"line":120},[117,296,124],{"class":123},[117,298,299],{"class":127}," dev\n",[69,301,303],{"id":302},"next-steps","Next steps",[78,305,306,311,316],{},[81,307,308,309,145],{},"Learn the supported authoring forms in ",[139,310,9],{"href":10},[81,312,313,314,145],{},"Set project defaults in ",[139,315,13],{"href":14},[81,317,318,319,145],{},"If the diagram does not render, follow ",[139,320,17],{"href":18},[322,323,324],"style",{},"html pre.shiki code .sMTad, html code.shiki .sMTad{--shiki-default:#6F42C1;--shiki-dark:#FFB757}html pre.shiki code .srMev, html code.shiki .srMev{--shiki-default:#032F62;--shiki-dark:#ADDCFF}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);}html pre.shiki code .s-kum, html code.shiki .s-kum{--shiki-default:#D73A49;--shiki-dark:#FF9492}html pre.shiki code .s_Opv, html code.shiki .s_Opv{--shiki-default:#6F42C1;--shiki-dark:#DBB7FF}html pre.shiki code .sjV9Q, html code.shiki .sjV9Q{--shiki-default:#24292E;--shiki-dark:#FFB757}html pre.shiki code .skGVy, html code.shiki .skGVy{--shiki-default:#24292E;--shiki-dark:#F0F3F6}html pre.shiki code .sg8bY, html code.shiki .sg8bY{--shiki-default:#005CC5;--shiki-default-font-weight:bold;--shiki-dark:#91CBFF;--shiki-dark-font-weight:bold}",{"title":113,"searchDepth":183,"depth":183,"links":326},[327,328,329,330,331,332],{"id":71,"depth":183,"text":72},{"id":102,"depth":183,"text":103},{"id":148,"depth":183,"text":149},{"id":212,"depth":183,"text":213},{"id":283,"depth":183,"text":284},{"id":302,"depth":183,"text":303},"Install Nuxt Content Mermaid and render your first diagram.",{},{"title":5,"description":333},"18l5V6b-mzu6VbqVDuRXeps5-0Djl3-xcTbHAw-az6Q",[338,340,342,344,346],{"title":5,"path":6,"stem":7,"children":339},[],{"title":9,"path":10,"stem":11,"children":341},[],{"title":13,"path":14,"stem":15,"children":343},[],{"title":17,"path":18,"stem":19,"children":345},[],{"title":21,"path":22,"stem":23,"children":347,"page":29},[348],{"title":26,"path":27,"stem":28,"children":349},[],1786997380382]