[{"data":1,"prerenderedAt":506},["ShallowReactive",2],{"mobile-docs-navigation":3,"docs-page:\u002Fzh\u002Fwriting-diagrams":59,"docs-navigation:zh":491},[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":40,"body":61,"description":487,"extension":86,"meta":488,"navigation":298,"path":41,"seo":489,"stem":42,"__hash__":490},"docs\u002Fzh\u002F3.writing-diagrams.md",{"type":62,"value":63,"toc":479},"minimark",[64,67,72,81,117,120,123,126,148,151,207,211,221,344,358,361,364,419,425,428,431,448,451,455,465,475],[65,66,40],"h1",{"id":40},[68,69,71],"h2",{"id":70},"mermaid-圍欄","Mermaid 圍欄",[73,74,75,76,80],"p",{},"使用語言標記恰好是 ",[77,78,79],"code",{},"mermaid"," 的圍欄程式碼區塊：",[82,83,88],"pre",{"className":84,"code":85,"language":86,"meta":87,"style":87},"language-md shiki shiki-themes github-light github-dark-high-contrast","```mermaid\nflowchart TD\n  A --> B\n```\n","md","",[77,89,90,99,105,111],{"__ignoreMap":87},[91,92,95],"span",{"class":93,"line":94},"line",1,[91,96,98],{"class":97},"skGVy","```mermaid\n",[91,100,102],{"class":93,"line":101},2,[91,103,104],{"class":97},"flowchart TD\n",[91,106,108],{"class":93,"line":107},3,[91,109,110],{"class":97},"  A --> B\n",[91,112,114],{"class":93,"line":113},4,[91,115,116],{"class":97},"```\n",[73,118,119],{},"Nuxt Content Mermaid 會以 Mermaid 元件取代原始區塊，同時保留可讀的原始碼，作為未啟用 JavaScript 時的後援內容。",[68,121,122],{"id":122},"圍欄標題與顯示模式",[73,124,125],{},"將標題或 Mermaid 顯示模式加入圍欄的行內中繼資料：",[82,127,129],{"className":84,"code":128,"language":86,"meta":87,"style":87},"```mermaid {title=架構 displayMode=compact}\nflowchart TD\n  A --> B\n```\n",[77,130,131,136,140,144],{"__ignoreMap":87},[91,132,133],{"class":93,"line":94},[91,134,135],{"class":97},"```mermaid {title=架構 displayMode=compact}\n",[91,137,138],{"class":93,"line":101},[91,139,104],{"class":97},[91,141,142],{"class":93,"line":107},[91,143,110],{"class":97},[91,145,146],{"class":93,"line":113},[91,147,116],{"class":97},[73,149,150],{},"如果圖表需要多個值，也可以在區塊內放置 Mermaid YAML frontmatter：",[82,152,154],{"className":84,"code":153,"language":86,"meta":87,"style":87},"```mermaid\n---\ntitle: 架構\ndisplayMode: compact\nconfig:\n  theme: forest\n---\nflowchart TD\n  A --> B\n```\n",[77,155,156,160,165,170,175,181,187,192,197,202],{"__ignoreMap":87},[91,157,158],{"class":93,"line":94},[91,159,98],{"class":97},[91,161,162],{"class":93,"line":101},[91,163,164],{"class":97},"---\n",[91,166,167],{"class":93,"line":107},[91,168,169],{"class":97},"title: 架構\n",[91,171,172],{"class":93,"line":113},[91,173,174],{"class":97},"displayMode: compact\n",[91,176,178],{"class":93,"line":177},5,[91,179,180],{"class":97},"config:\n",[91,182,184],{"class":93,"line":183},6,[91,185,186],{"class":97},"  theme: forest\n",[91,188,190],{"class":93,"line":189},7,[91,191,164],{"class":97},[91,193,195],{"class":93,"line":194},8,[91,196,104],{"class":97},[91,198,200],{"class":93,"line":199},9,[91,201,110],{"class":97},[91,203,205],{"class":93,"line":204},10,[91,206,116],{"class":97},[68,208,210],{"id":209},"mermaid-元件","Mermaid 元件",[73,212,213,214,217,218,220],{},"當圖表來源是 Vue 而不是 Markdown 時，請使用全域註冊的 ",[77,215,216],{},"\u003CMermaid>"," 元件。將經 URI 編碼的來源傳入 ",[77,219,77],{},"：",[82,222,226],{"className":223,"code":224,"language":225,"meta":87,"style":87},"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",[77,227,228,254,277,285,294,300,309,336],{"__ignoreMap":87},[91,229,230,233,237,241,244,247,251],{"class":93,"line":94},[91,231,232],{"class":97},"\u003C",[91,234,236],{"class":235},"sx1sP","script",[91,238,240],{"class":239},"sHg5J"," setup",[91,242,243],{"class":239}," lang",[91,245,246],{"class":97},"=",[91,248,250],{"class":249},"srMev","\"ts\"",[91,252,253],{"class":97},">\n",[91,255,256,260,264,267,271,274],{"class":93,"line":101},[91,257,259],{"class":258},"s-kum","const",[91,261,263],{"class":262},"sP0c6"," source",[91,265,266],{"class":258}," =",[91,268,270],{"class":269},"s_Opv"," encodeURIComponent",[91,272,273],{"class":97},"(",[91,275,276],{"class":249},"`flowchart TD\n",[91,278,279,282],{"class":93,"line":107},[91,280,281],{"class":249},"  A --> B`",[91,283,284],{"class":97},")\n",[91,286,287,290,292],{"class":93,"line":113},[91,288,289],{"class":97},"\u003C\u002F",[91,291,236],{"class":235},[91,293,253],{"class":97},[91,295,296],{"class":93,"line":177},[91,297,299],{"emptyLinePlaceholder":298},true,"\n",[91,301,302,304,307],{"class":93,"line":183},[91,303,232],{"class":97},[91,305,306],{"class":235},"template",[91,308,253],{"class":97},[91,310,311,314,317,320,322,324,328,331,333],{"class":93,"line":189},[91,312,313],{"class":97},"  \u003C",[91,315,316],{"class":235},"Mermaid",[91,318,319],{"class":97}," :",[91,321,77],{"class":239},[91,323,246],{"class":97},[91,325,327],{"class":326},"sXKb-","\"",[91,329,330],{"class":97},"source",[91,332,327],{"class":326},[91,334,335],{"class":97}," \u002F>\n",[91,337,338,340,342],{"class":93,"line":194},[91,339,289],{"class":97},[91,341,306],{"class":235},[91,343,253],{"class":97},[73,345,346,347,350,351,354,355,357],{},"元件也接受直接傳入的 Mermaid ",[77,348,349],{},"config"," prop。請勿同時提供 ",[77,352,353],{},"pageConfig"," 與 ",[77,356,349],{},"；兩者是同一個圖表的替代設定來源。",[68,359,360],{"id":360},"頁面與圖表設定",[73,362,363],{},"使用頁面 frontmatter，將純資料 Mermaid 設定套用至 Markdown 頁面上的所有圖表：",[82,365,367],{"className":84,"code":366,"language":86,"meta":87,"style":87},"---\nconfig:\n  theme: forest\n  flowchart:\n    curve: basis\n---\n\n```mermaid\nflowchart LR\n  Page --> Diagram\n```\n",[77,368,369,374,378,382,387,392,396,400,404,409,414],{"__ignoreMap":87},[91,370,371],{"class":93,"line":94},[91,372,164],{"class":373},"sg8bY",[91,375,376],{"class":93,"line":101},[91,377,180],{"class":97},[91,379,380],{"class":93,"line":107},[91,381,186],{"class":97},[91,383,384],{"class":93,"line":113},[91,385,386],{"class":97},"  flowchart:\n",[91,388,389],{"class":93,"line":177},[91,390,391],{"class":97},"    curve: basis\n",[91,393,394],{"class":93,"line":183},[91,395,164],{"class":373},[91,397,398],{"class":93,"line":189},[91,399,299],{"emptyLinePlaceholder":298},[91,401,402],{"class":93,"line":194},[91,403,98],{"class":97},[91,405,406],{"class":93,"line":199},[91,407,408],{"class":97},"flowchart LR\n",[91,410,411],{"class":93,"line":204},[91,412,413],{"class":97},"  Page --> Diagram\n",[91,415,417],{"class":93,"line":416},11,[91,418,116],{"class":97},[73,420,421,422,424],{},"若只要設定單一圖表，請使用行內圍欄中繼資料，或在 Mermaid 圍欄內放置 YAML frontmatter。在應用程式碼中，請改用元件直接提供的 ",[77,423,349],{}," prop，而不是頁面設定。",[68,426,427],{"id":427},"設定優先順序",[73,429,430],{},"越接近圖表的設定，優先順序越高：",[432,433,434,438,441],"ol",{},[435,436,437],"li",{},"行內圍欄中繼資料會覆寫圖表的 YAML frontmatter。",[435,439,440],{},"圖表設定會覆寫頁面設定。",[435,442,443,444,447],{},"頁面設定會覆寫 ",[77,445,446],{},"contentMermaid.loader.init"," 的應用程式預設值。",[73,449,450],{},"圖表內的 Mermaid 指令由 Mermaid 本身解析，並可依照 Mermaid 的規則覆寫初始化值。",[68,452,454],{"id":453},"mermaid-設定","Mermaid 設定",[73,456,457,458,460,461,464],{},"你可以在頁面 frontmatter 的 ",[77,459,349],{}," 中指定圖表主題等 Mermaid 設定，例如 ",[77,462,463],{},"config: { theme: forest }","。",[73,466,467,468,464],{},"如果想了解更多 Mermaid 主題、圖表選項、安全性設定與指令，請參考 ",[469,470,474],"a",{"href":471,"rel":472},"https:\u002F\u002Fmermaid.js.org\u002Fconfig\u002Fconfiguration.html",[473],"nofollow","Mermaid 官方設定文件",[476,477,478],"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 .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}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":87,"searchDepth":101,"depth":101,"links":480},[481,482,483,484,485,486],{"id":70,"depth":101,"text":71},{"id":122,"depth":101,"text":122},{"id":209,"depth":101,"text":210},{"id":360,"depth":101,"text":360},{"id":427,"depth":101,"text":427},{"id":453,"depth":101,"text":454},"撰寫 Mermaid 圍欄、設定個別圖表，以及直接使用 Mermaid 元件。",{},{"title":40,"description":487},"tes4wCTSw_f4tKw0hYiLuysyLZ7QFXvCdRSpwaVBayY",[492],{"title":31,"path":32,"stem":33,"children":493,"page":29},[494,496,498,500,502],{"title":36,"path":37,"stem":38,"children":495},[],{"title":40,"path":41,"stem":42,"children":497},[],{"title":44,"path":45,"stem":46,"children":499},[],{"title":48,"path":49,"stem":50,"children":501},[],{"title":21,"path":52,"stem":53,"children":503,"page":29},[504],{"title":56,"path":57,"stem":58,"children":505},[],1786997380389]