[{"data":1,"prerenderedAt":506},["ShallowReactive",2],{"mobile-docs-navigation":3,"docs-page:\u002Fwriting-diagrams":59,"docs-navigation:en":493},[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":9,"body":61,"description":489,"extension":87,"meta":490,"navigation":299,"path":10,"seo":491,"stem":11,"__hash__":492},"docs\u002F3.writing-diagrams.md",{"type":62,"value":63,"toc":481},"minimark",[64,68,73,82,118,121,125,128,150,153,209,213,222,345,359,363,366,421,427,431,434,451,454,458,467,477],[65,66,9],"h1",{"id":67},"writing-diagrams",[69,70,72],"h2",{"id":71},"mermaid-fences","Mermaid fences",[74,75,76,77,81],"p",{},"Use a fenced code block whose language is exactly ",[78,79,80],"code",{},"mermaid",":",[83,84,89],"pre",{"className":85,"code":86,"language":87,"meta":88,"style":88},"language-md shiki shiki-themes github-light github-dark-high-contrast","```mermaid\nflowchart TD\n  A --> B\n```\n","md","",[78,90,91,100,106,112],{"__ignoreMap":88},[92,93,96],"span",{"class":94,"line":95},"line",1,[92,97,99],{"class":98},"skGVy","```mermaid\n",[92,101,103],{"class":94,"line":102},2,[92,104,105],{"class":98},"flowchart TD\n",[92,107,109],{"class":94,"line":108},3,[92,110,111],{"class":98},"  A --> B\n",[92,113,115],{"class":94,"line":114},4,[92,116,117],{"class":98},"```\n",[74,119,120],{},"Nuxt Content Mermaid replaces the source block with its Mermaid component while preserving readable source as the no-JavaScript fallback.",[69,122,124],{"id":123},"fence-title-and-display-mode","Fence title and display mode",[74,126,127],{},"Add a title or Mermaid display mode as inline fence metadata:",[83,129,131],{"className":85,"code":130,"language":87,"meta":88,"style":88},"```mermaid {title=Architecture displayMode=compact}\nflowchart TD\n  A --> B\n```\n",[78,132,133,138,142,146],{"__ignoreMap":88},[92,134,135],{"class":94,"line":95},[92,136,137],{"class":98},"```mermaid {title=Architecture displayMode=compact}\n",[92,139,140],{"class":94,"line":102},[92,141,105],{"class":98},[92,143,144],{"class":94,"line":108},[92,145,111],{"class":98},[92,147,148],{"class":94,"line":114},[92,149,117],{"class":98},[74,151,152],{},"You can also place Mermaid YAML frontmatter inside a block when the diagram needs multiple values:",[83,154,156],{"className":85,"code":155,"language":87,"meta":88,"style":88},"```mermaid\n---\ntitle: Architecture\ndisplayMode: compact\nconfig:\n  theme: forest\n---\nflowchart TD\n  A --> B\n```\n",[78,157,158,162,167,172,177,183,189,194,199,204],{"__ignoreMap":88},[92,159,160],{"class":94,"line":95},[92,161,99],{"class":98},[92,163,164],{"class":94,"line":102},[92,165,166],{"class":98},"---\n",[92,168,169],{"class":94,"line":108},[92,170,171],{"class":98},"title: Architecture\n",[92,173,174],{"class":94,"line":114},[92,175,176],{"class":98},"displayMode: compact\n",[92,178,180],{"class":94,"line":179},5,[92,181,182],{"class":98},"config:\n",[92,184,186],{"class":94,"line":185},6,[92,187,188],{"class":98},"  theme: forest\n",[92,190,192],{"class":94,"line":191},7,[92,193,166],{"class":98},[92,195,197],{"class":94,"line":196},8,[92,198,105],{"class":98},[92,200,202],{"class":94,"line":201},9,[92,203,111],{"class":98},[92,205,207],{"class":94,"line":206},10,[92,208,117],{"class":98},[69,210,212],{"id":211},"the-mermaid-component","The Mermaid component",[74,214,215,216,219,220,81],{},"Use the globally registered ",[78,217,218],{},"\u003CMermaid>"," component when the diagram source comes from Vue rather than Markdown. Pass URI-encoded source through ",[78,221,78],{},[83,223,227],{"className":224,"code":225,"language":226,"meta":88,"style":88},"language-vue shiki shiki-themes github-light github-dark-high-contrast","\u003Cscript setup lang=\"ts\">\nconst source = encodeURIComponent(`flowchart TD\n  A --> B`)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CMermaid :code=\"source\" \u002F>\n\u003C\u002Ftemplate>\n","vue",[78,228,229,255,278,286,295,301,310,337],{"__ignoreMap":88},[92,230,231,234,238,242,245,248,252],{"class":94,"line":95},[92,232,233],{"class":98},"\u003C",[92,235,237],{"class":236},"sx1sP","script",[92,239,241],{"class":240},"sHg5J"," setup",[92,243,244],{"class":240}," lang",[92,246,247],{"class":98},"=",[92,249,251],{"class":250},"srMev","\"ts\"",[92,253,254],{"class":98},">\n",[92,256,257,261,265,268,272,275],{"class":94,"line":102},[92,258,260],{"class":259},"s-kum","const",[92,262,264],{"class":263},"sP0c6"," source",[92,266,267],{"class":259}," =",[92,269,271],{"class":270},"s_Opv"," encodeURIComponent",[92,273,274],{"class":98},"(",[92,276,277],{"class":250},"`flowchart TD\n",[92,279,280,283],{"class":94,"line":108},[92,281,282],{"class":250},"  A --> B`",[92,284,285],{"class":98},")\n",[92,287,288,291,293],{"class":94,"line":114},[92,289,290],{"class":98},"\u003C\u002F",[92,292,237],{"class":236},[92,294,254],{"class":98},[92,296,297],{"class":94,"line":179},[92,298,300],{"emptyLinePlaceholder":299},true,"\n",[92,302,303,305,308],{"class":94,"line":185},[92,304,233],{"class":98},[92,306,307],{"class":236},"template",[92,309,254],{"class":98},[92,311,312,315,318,321,323,325,329,332,334],{"class":94,"line":191},[92,313,314],{"class":98},"  \u003C",[92,316,317],{"class":236},"Mermaid",[92,319,320],{"class":98}," :",[92,322,78],{"class":240},[92,324,247],{"class":98},[92,326,328],{"class":327},"sXKb-","\"",[92,330,331],{"class":98},"source",[92,333,328],{"class":327},[92,335,336],{"class":98}," \u002F>\n",[92,338,339,341,343],{"class":94,"line":196},[92,340,290],{"class":98},[92,342,307],{"class":236},[92,344,254],{"class":98},[74,346,347,348,351,352,355,356,358],{},"The component also accepts a direct Mermaid ",[78,349,350],{},"config"," prop. Do not provide ",[78,353,354],{},"pageConfig"," and ",[78,357,350],{}," together; they are alternative configuration sources for the same diagram.",[69,360,362],{"id":361},"page-and-diagram-configuration","Page and diagram configuration",[74,364,365],{},"Use page frontmatter to apply pure-data Mermaid configuration to every diagram on a Markdown page:",[83,367,369],{"className":85,"code":368,"language":87,"meta":88,"style":88},"---\nconfig:\n  theme: forest\n  flowchart:\n    curve: basis\n---\n\n```mermaid\nflowchart LR\n  Page --> Diagram\n```\n",[78,370,371,376,380,384,389,394,398,402,406,411,416],{"__ignoreMap":88},[92,372,373],{"class":94,"line":95},[92,374,166],{"class":375},"sg8bY",[92,377,378],{"class":94,"line":102},[92,379,182],{"class":98},[92,381,382],{"class":94,"line":108},[92,383,188],{"class":98},[92,385,386],{"class":94,"line":114},[92,387,388],{"class":98},"  flowchart:\n",[92,390,391],{"class":94,"line":179},[92,392,393],{"class":98},"    curve: basis\n",[92,395,396],{"class":94,"line":185},[92,397,166],{"class":375},[92,399,400],{"class":94,"line":191},[92,401,300],{"emptyLinePlaceholder":299},[92,403,404],{"class":94,"line":196},[92,405,99],{"class":98},[92,407,408],{"class":94,"line":201},[92,409,410],{"class":98},"flowchart LR\n",[92,412,413],{"class":94,"line":206},[92,414,415],{"class":98},"  Page --> Diagram\n",[92,417,419],{"class":94,"line":418},11,[92,420,117],{"class":98},[74,422,423,424,426],{},"Use inline fence metadata or YAML frontmatter inside a Mermaid fence for a single diagram. In application code, use the component's direct ",[78,425,350],{}," prop instead of page configuration.",[69,428,430],{"id":429},"configuration-precedence","Configuration precedence",[74,432,433],{},"More local settings take precedence:",[435,436,437,441,444],"ol",{},[438,439,440],"li",{},"Inline fence metadata overrides the diagram's YAML frontmatter.",[438,442,443],{},"Diagram settings override page configuration.",[438,445,446,447,450],{},"Page configuration overrides application defaults from ",[78,448,449],{},"contentMermaid.loader.init",".",[74,452,453],{},"Mermaid directives inside the diagram are interpreted by Mermaid itself and can override initialization values according to Mermaid's rules.",[69,455,457],{"id":456},"mermaid-configuration","Mermaid configuration",[74,459,460,461,463,464,450],{},"You can specify diagram settings such as the theme in page frontmatter through ",[78,462,350],{},", for example ",[78,465,466],{},"config: { theme: forest }",[74,468,469,470,450],{},"For more information about Mermaid themes, diagram options, security settings, and directives, see the ",[471,472,476],"a",{"href":473,"rel":474},"https:\u002F\u002Fmermaid.js.org\u002Fconfig\u002Fconfiguration.html",[475],"nofollow","official Mermaid configuration documentation",[478,479,480],"style",{},"html pre.shiki code .skGVy, html code.shiki .skGVy{--shiki-default:#24292E;--shiki-dark:#F0F3F6}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 .sg8bY, html code.shiki .sg8bY{--shiki-default:#005CC5;--shiki-default-font-weight:bold;--shiki-dark:#91CBFF;--shiki-dark-font-weight:bold}html pre.shiki code .sx1sP, html code.shiki .sx1sP{--shiki-default:#22863A;--shiki-dark:#72F088}html pre.shiki code .sHg5J, html code.shiki .sHg5J{--shiki-default:#6F42C1;--shiki-dark:#91CBFF}html pre.shiki code .srMev, html code.shiki .srMev{--shiki-default:#032F62;--shiki-dark:#ADDCFF}html pre.shiki code .s-kum, html code.shiki .s-kum{--shiki-default:#D73A49;--shiki-dark:#FF9492}html pre.shiki code .sP0c6, html code.shiki .sP0c6{--shiki-default:#005CC5;--shiki-dark:#91CBFF}html pre.shiki code .s_Opv, html code.shiki .s_Opv{--shiki-default:#6F42C1;--shiki-dark:#DBB7FF}html pre.shiki code .sXKb-, html code.shiki .sXKb-{--shiki-default:#032F62;--shiki-dark:#F0F3F6}",{"title":88,"searchDepth":102,"depth":102,"links":482},[483,484,485,486,487,488],{"id":71,"depth":102,"text":72},{"id":123,"depth":102,"text":124},{"id":211,"depth":102,"text":212},{"id":361,"depth":102,"text":362},{"id":429,"depth":102,"text":430},{"id":456,"depth":102,"text":457},"Write Mermaid fences, configure individual diagrams, and use the Mermaid component directly.",{},{"title":9,"description":489},"xUxSwbLtcYswRcriIEBh43cEMmXGphlILaRYxFoQD2w",[494,496,498,500,502],{"title":5,"path":6,"stem":7,"children":495},[],{"title":9,"path":10,"stem":11,"children":497},[],{"title":13,"path":14,"stem":15,"children":499},[],{"title":17,"path":18,"stem":19,"children":501},[],{"title":21,"path":22,"stem":23,"children":503,"page":29},[504],{"title":26,"path":27,"stem":28,"children":505},[],1786997380384]