[{"data":1,"prerenderedAt":634},["ShallowReactive",2],{"mobile-docs-navigation":3,"docs-page:\u002Fadvanced\u002Finteractions":92,"docs-navigation:en":613},[4,8,12,16,34,38,47],{"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,"children":20,"page":33},"Advanced","\u002Fadvanced","5.advanced",[21,25,29],{"title":22,"path":23,"stem":24},"Themes and Styling","\u002Fadvanced\u002Fthemes-and-styling","5.advanced\u002F1.themes-and-styling",{"title":26,"path":27,"stem":28},"Custom Rendering","\u002Fadvanced\u002Fcustom-rendering","5.advanced\u002F2.custom-rendering",{"title":30,"path":31,"stem":32},"Interactions","\u002Fadvanced\u002Finteractions","5.advanced\u002F3.interactions",false,{"title":35,"path":36,"stem":37},"Troubleshooting","\u002Ftroubleshooting","6.troubleshooting",{"title":39,"path":40,"stem":41,"children":42,"page":33},"Migration","\u002Fmigration","7.migration",[43],{"title":44,"path":45,"stem":46},"Migration to v3","\u002Fmigration\u002Fv3","7.migration\u002F1.v3",{"title":48,"path":49,"stem":50,"children":51,"page":33},"Zh","\u002Fzh","zh",[52,56,60,64,80,84],{"title":53,"path":54,"stem":55},"開始使用","\u002Fzh\u002Fgetting-started","zh\u002F2.getting-started",{"title":57,"path":58,"stem":59},"撰寫圖表","\u002Fzh\u002Fwriting-diagrams","zh\u002F3.writing-diagrams",{"title":61,"path":62,"stem":63},"設定","\u002Fzh\u002Fconfiguration","zh\u002F4.configuration",{"title":17,"path":65,"stem":66,"children":67,"page":33},"\u002Fzh\u002Fadvanced","zh\u002F5.advanced",[68,72,76],{"title":69,"path":70,"stem":71},"主題與樣式","\u002Fzh\u002Fadvanced\u002Fthemes-and-styling","zh\u002F5.advanced\u002F1.themes-and-styling",{"title":73,"path":74,"stem":75},"自訂渲染","\u002Fzh\u002Fadvanced\u002Fcustom-rendering","zh\u002F5.advanced\u002F2.custom-rendering",{"title":77,"path":78,"stem":79},"互動","\u002Fzh\u002Fadvanced\u002Finteractions","zh\u002F5.advanced\u002F3.interactions",{"title":81,"path":82,"stem":83},"疑難排解","\u002Fzh\u002Ftroubleshooting","zh\u002F6.troubleshooting",{"title":39,"path":85,"stem":86,"children":87,"page":33},"\u002Fzh\u002Fmigration","zh\u002F7.migration",[88],{"title":89,"path":90,"stem":91},"升級至 v3","\u002Fzh\u002Fmigration\u002Fv3","zh\u002F7.migration\u002F1.v3",{"id":93,"title":30,"body":94,"config":606,"description":607,"extension":608,"meta":609,"navigation":610,"path":31,"seo":611,"stem":32,"__hash__":612},"docs\u002F5.advanced\u002F3.interactions.md",{"type":95,"value":96,"toc":600},"minimark",[97,101,110,115,118,260,282,293,297,302,425,439,446,449,453,456,566,574,578,581,596],[98,99,30],"h1",{"id":100},"interactions",[102,103,104,105,109],"p",{},"The built-in renderer provides source copying, browser fullscreen, an expand overlay, and zoom\u002Fpan controls. A successfully resolved ",[106,107,108],"a",{"href":27},"Custom Renderer"," replaces all of them, so this page applies only to the built-in renderer.",[111,112,114],"h2",{"id":113},"choose-visible-toolbar-controls","Choose visible toolbar controls",[102,116,117],{},"The toolbar appears above each built-in diagram. Its title and controls are enabled by default:",[119,120,125],"pre",{"className":121,"code":122,"language":123,"meta":124,"style":124},"language-ts shiki shiki-themes github-light github-dark-high-contrast","export default defineNuxtConfig({\n  contentMermaid: {\n    toolbar: {\n      title: 'Architecture',\n      fontSize: '14px',\n      fullscreenToolbarScale: 1.25,\n      buttons: {\n        copy: true,\n        fullscreen: true,\n        expand: true,\n      },\n    },\n  },\n})\n","ts","",[126,127,128,148,155,161,174,185,197,203,214,224,234,240,246,254],"code",{"__ignoreMap":124},[129,130,133,137,140,144],"span",{"class":131,"line":132},"line",1,[129,134,136],{"class":135},"s-kum","export",[129,138,139],{"class":135}," default",[129,141,143],{"class":142},"s_Opv"," defineNuxtConfig",[129,145,147],{"class":146},"sjV9Q","({\n",[129,149,151],{"class":131,"line":150},2,[129,152,154],{"class":153},"skGVy","  contentMermaid: {\n",[129,156,158],{"class":131,"line":157},3,[129,159,160],{"class":153},"    toolbar: {\n",[129,162,164,167,171],{"class":131,"line":163},4,[129,165,166],{"class":153},"      title: ",[129,168,170],{"class":169},"srMev","'Architecture'",[129,172,173],{"class":153},",\n",[129,175,177,180,183],{"class":131,"line":176},5,[129,178,179],{"class":153},"      fontSize: ",[129,181,182],{"class":169},"'14px'",[129,184,173],{"class":153},[129,186,188,191,195],{"class":131,"line":187},6,[129,189,190],{"class":153},"      fullscreenToolbarScale: ",[129,192,194],{"class":193},"sP0c6","1.25",[129,196,173],{"class":153},[129,198,200],{"class":131,"line":199},7,[129,201,202],{"class":153},"      buttons: {\n",[129,204,206,209,212],{"class":131,"line":205},8,[129,207,208],{"class":153},"        copy: ",[129,210,211],{"class":193},"true",[129,213,173],{"class":153},[129,215,217,220,222],{"class":131,"line":216},9,[129,218,219],{"class":153},"        fullscreen: ",[129,221,211],{"class":193},[129,223,173],{"class":153},[129,225,227,230,232],{"class":131,"line":226},10,[129,228,229],{"class":153},"        expand: ",[129,231,211],{"class":193},[129,233,173],{"class":153},[129,235,237],{"class":131,"line":236},11,[129,238,239],{"class":153},"      },\n",[129,241,243],{"class":131,"line":242},12,[129,244,245],{"class":153},"    },\n",[129,247,249,252],{"class":131,"line":248},13,[129,250,251],{"class":153},"  }",[129,253,173],{"class":146},[129,255,257],{"class":131,"line":256},14,[129,258,259],{"class":146},"})\n",[102,261,262,265,266,269,270,273,274,277,278,281],{},[126,263,264],{},"copy"," copies Mermaid source. After an attempt, its button temporarily uses ",[126,267,268],{},"Copied"," or ",[126,271,272],{},"Copy failed"," as its title and accessible label; the renderer first uses the Clipboard API and then attempts the browser's legacy copy fallback. ",[126,275,276],{},"fullscreen"," is displayed only when the browser supports the Fullscreen API. ",[126,279,280],{},"expand"," opens the in-page overlay.",[102,283,284,285,288,289,292],{},"Set a button to ",[126,286,287],{},"false"," to hide it. Hiding the expand button does not disable opening an overlay by clicking a diagram; control that separately with ",[126,290,291],{},"expand.invokeOpenOn.diagramClick",".",[111,294,296],{"id":295},"configure-opening-and-closing","Configure opening and closing",[102,298,299,301],{},[126,300,280],{}," is enabled by default. Its close controls are independently configurable:",[119,303,305],{"className":121,"code":304,"language":123,"meta":124,"style":124},"export default defineNuxtConfig({\n  contentMermaid: {\n    expand: {\n      margin: 24,\n      invokeOpenOn: {\n        diagramClick: true,\n      },\n      invokeCloseOn: {\n        esc: true,\n        wheel: true,\n        swipe: true,\n        overlayClick: true,\n        closeButtonClick: true,\n      },\n    },\n  },\n})\n",[126,306,307,317,321,326,336,341,350,354,359,368,377,386,395,404,408,413,420],{"__ignoreMap":124},[129,308,309,311,313,315],{"class":131,"line":132},[129,310,136],{"class":135},[129,312,139],{"class":135},[129,314,143],{"class":142},[129,316,147],{"class":146},[129,318,319],{"class":131,"line":150},[129,320,154],{"class":153},[129,322,323],{"class":131,"line":157},[129,324,325],{"class":153},"    expand: {\n",[129,327,328,331,334],{"class":131,"line":163},[129,329,330],{"class":153},"      margin: ",[129,332,333],{"class":193},"24",[129,335,173],{"class":153},[129,337,338],{"class":131,"line":176},[129,339,340],{"class":153},"      invokeOpenOn: {\n",[129,342,343,346,348],{"class":131,"line":187},[129,344,345],{"class":153},"        diagramClick: ",[129,347,211],{"class":193},[129,349,173],{"class":153},[129,351,352],{"class":131,"line":199},[129,353,239],{"class":153},[129,355,356],{"class":131,"line":205},[129,357,358],{"class":153},"      invokeCloseOn: {\n",[129,360,361,364,366],{"class":131,"line":216},[129,362,363],{"class":153},"        esc: ",[129,365,211],{"class":193},[129,367,173],{"class":153},[129,369,370,373,375],{"class":131,"line":226},[129,371,372],{"class":153},"        wheel: ",[129,374,211],{"class":193},[129,376,173],{"class":153},[129,378,379,382,384],{"class":131,"line":236},[129,380,381],{"class":153},"        swipe: ",[129,383,211],{"class":193},[129,385,173],{"class":153},[129,387,388,391,393],{"class":131,"line":242},[129,389,390],{"class":153},"        overlayClick: ",[129,392,211],{"class":193},[129,394,173],{"class":153},[129,396,397,400,402],{"class":131,"line":248},[129,398,399],{"class":153},"        closeButtonClick: ",[129,401,211],{"class":193},[129,403,173],{"class":153},[129,405,406],{"class":131,"line":256},[129,407,239],{"class":153},[129,409,411],{"class":131,"line":410},15,[129,412,245],{"class":153},[129,414,416,418],{"class":131,"line":415},16,[129,417,251],{"class":153},[129,419,173],{"class":146},[129,421,423],{"class":131,"line":422},17,[129,424,259],{"class":146},[102,426,427,430,431,434,435,438],{},[126,428,429],{},"margin"," keeps pixels around the expanded SVG. Set ",[126,432,433],{},"expand: false"," to disable the feature entirely. See ",[106,436,13],{"href":437},"\u002Fconfiguration#expand"," for the boolean-preset and object-patch distinction.",[102,440,441,442,445],{},"See ",[106,443,444],{"href":437},"Expand configuration"," for the complete option paths, defaults, and effects.",[102,447,448],{},"The browser fullscreen control exits through the browser's normal fullscreen behavior. It does not use the expand-overlay close policy.",[111,450,452],{"id":451},"zoom-and-pan-a-large-diagram","Zoom and pan a large diagram",[102,454,455],{},"Fullscreen and the expanded overlay show zoom-out, zoom-in, percentage, and reset controls. The same mappings work in either view:",[457,458,459,472],"table",{},[460,461,462],"thead",{},[463,464,465,469],"tr",{},[466,467,468],"th",{},"Input",[466,470,471],{},"Action",[473,474,475,484,499,513,526,536,544,551,558],"tbody",{},[463,476,477,481],{},[478,479,480],"td",{},"Zoom controls",[478,482,483],{},"Zoom out, zoom in, or reset.",[463,485,486,496],{},[478,487,488,491,492,495],{},[126,489,490],{},"Ctrl"," + wheel on Windows\u002FLinux, or ",[126,493,494],{},"⌘"," + wheel on macOS",[478,497,498],{},"Zoom at the pointer.",[463,500,501,510],{},[478,502,503,506,507],{},[126,504,505],{},"+"," \u002F ",[126,508,509],{},"=",[478,511,512],{},"Zoom in.",[463,514,515,523],{},[478,516,517,506,520],{},[126,518,519],{},"-",[126,521,522],{},"_",[478,524,525],{},"Zoom out.",[463,527,528,533],{},[478,529,530],{},[126,531,532],{},"0",[478,534,535],{},"Reset zoom and pan.",[463,537,538,541],{},[478,539,540],{},"Arrow keys",[478,542,543],{},"Pan the diagram.",[463,545,546,549],{},[478,547,548],{},"Hold Space and drag with a mouse",[478,550,543],{},[463,552,553,556],{},[478,554,555],{},"One-finger touch drag",[478,557,543],{},[463,559,560,563],{},[478,561,562],{},"Two-finger pinch",[478,564,565],{},"Zoom the diagram.",[102,567,568,569,269,571,573],{},"In the expand overlay, an unmodified wheel over the diagram does not zoom; it displays a one-time hint to use ",[126,570,490],{},[126,572,494],{}," plus scrolling. A wheel over the overlay background follows the configured close behavior. A pinch is treated as a diagram manipulation, not a swipe-to-close gesture.",[111,575,577],{"id":576},"keep-controls-understandable-and-accessible","Keep controls understandable and accessible",[102,579,580],{},"The built-in controls use native buttons and accessible labels, including Copy, Enter\u002FExit fullscreen, Expand\u002FCollapse diagram, Zoom In\u002FOut, Reset Zoom, and Minimize diagram. Keyboard users can operate controls and use the zoom shortcuts while a diagram is expanded or fullscreen.",[102,582,583,584,587,588,591,592,595],{},"When you disable a close path, provide another reachable close path. In particular, if you turn off ",[126,585,586],{},"esc",", ",[126,589,590],{},"overlayClick",", and ",[126,593,594],{},"closeButtonClick",", users may have no obvious way to exit the expanded view. When you replace the built-in renderer, recreate equivalent labels, keyboard access, focus behavior, and touch affordances in your own component.",[597,598,599],"style",{},"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 .srMev, html code.shiki .srMev{--shiki-default:#032F62;--shiki-dark:#ADDCFF}html pre.shiki code .sP0c6, html code.shiki .sP0c6{--shiki-default:#005CC5;--shiki-dark:#91CBFF}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":124,"searchDepth":150,"depth":150,"links":601},[602,603,604,605],{"id":113,"depth":150,"text":114},{"id":295,"depth":150,"text":296},{"id":451,"depth":150,"text":452},{"id":576,"depth":150,"text":577},null,"Configure the built-in toolbar, fullscreen, expand overlay, zoom, and accessible controls.","md",{},true,{"title":30,"description":607},"cPyab4ZGzjdSHB73XnD5O4CJqbopWMy0sPqJ6oGH1AE",[614,616,618,620,628,630],{"title":5,"path":6,"stem":7,"children":615},[],{"title":9,"path":10,"stem":11,"children":617},[],{"title":13,"path":14,"stem":15,"children":619},[],{"title":17,"path":18,"stem":19,"children":621,"page":33},[622,624,626],{"title":22,"path":23,"stem":24,"children":623},[],{"title":26,"path":27,"stem":28,"children":625},[],{"title":30,"path":31,"stem":32,"children":627},[],{"title":35,"path":36,"stem":37,"children":629},[],{"title":39,"path":40,"stem":41,"children":631,"page":33},[632],{"title":44,"path":45,"stem":46,"children":633},[],1787059980828]