[{"data":1,"prerenderedAt":1291},["ShallowReactive",2],{"mobile-docs-navigation":3,"docs-page:\u002Fadvanced\u002Fcustom-rendering":92,"docs-navigation:en":1270},[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":26,"body":94,"config":1264,"description":1265,"extension":1266,"meta":1267,"navigation":390,"path":27,"seo":1268,"stem":28,"__hash__":1269},"docs\u002F5.advanced\u002F2.custom-rendering.md",{"type":95,"value":96,"toc":1258},"minimark",[97,101,110,115,126,212,222,274,277,281,284,305,320,856,859,863,869,1212,1237,1241,1254],[98,99,26],"h1",{"id":100},"custom-rendering",[102,103,104,105,109],"p",{},"Use a custom renderer only when you want to own the whole diagram experience. If you only need surrounding layout, shared loading UI, or an error presentation, wrap ",[106,107,108],"code",{},"\u003CMermaid>"," instead and retain the built-in renderer.",[111,112,114],"h2",{"id":113},"understand-renderer-selection","Understand renderer selection",[102,116,117,118,121,122,125],{},"Set ",[106,119,120],{},"components.renderer"," to the name of a component in ",[106,123,124],{},"~\u002Fcomponents",":",[127,128,133],"pre",{"className":129,"code":130,"language":131,"meta":132,"style":132},"language-ts shiki shiki-themes github-light github-dark-high-contrast","export default defineNuxtConfig({\n  contentMermaid: {\n    components: {\n      renderer: 'CustomMermaid',\n      spinner: 'MermaidSpinner',\n    },\n  },\n})\n","ts","",[106,134,135,155,162,168,181,192,198,206],{"__ignoreMap":132},[136,137,140,144,147,151],"span",{"class":138,"line":139},"line",1,[136,141,143],{"class":142},"s-kum","export",[136,145,146],{"class":142}," default",[136,148,150],{"class":149},"s_Opv"," defineNuxtConfig",[136,152,154],{"class":153},"sjV9Q","({\n",[136,156,158],{"class":138,"line":157},2,[136,159,161],{"class":160},"skGVy","  contentMermaid: {\n",[136,163,165],{"class":138,"line":164},3,[136,166,167],{"class":160},"    components: {\n",[136,169,171,174,178],{"class":138,"line":170},4,[136,172,173],{"class":160},"      renderer: ",[136,175,177],{"class":176},"srMev","'CustomMermaid'",[136,179,180],{"class":160},",\n",[136,182,184,187,190],{"class":138,"line":183},5,[136,185,186],{"class":160},"      spinner: ",[136,188,189],{"class":176},"'MermaidSpinner'",[136,191,180],{"class":160},[136,193,195],{"class":138,"line":194},6,[136,196,197],{"class":160},"    },\n",[136,199,201,204],{"class":138,"line":200},7,[136,202,203],{"class":160},"  }",[136,205,180],{"class":153},[136,207,209],{"class":138,"line":208},8,[136,210,211],{"class":153},"})\n",[102,213,214,215,217,218,221],{},"The configured name is a Custom Renderer Candidate. On the client, the package searches ",[106,216,124],{}," recursively for a matching filename; matching ignores case, spaces, underscores, hyphens, path segments, and an optional ",[106,219,220],{},".vue"," suffix.",[223,224,225,238],"table",{},[226,227,228],"thead",{},[229,230,231,235],"tr",{},[232,233,234],"th",{},"Resolution outcome",[232,236,237],{},"Rendering owner",[239,240,241,250,258,266],"tbody",{},[229,242,243,247],{},[244,245,246],"td",{},"No renderer name",[244,248,249],{},"Built-in Renderer.",[229,251,252,255],{},[244,253,254],{},"Candidate is loading",[244,256,257],{},"No renderer yet; the default source fallback remains visible.",[229,259,260,263],{},[244,261,262],{},"Candidate resolves",[244,264,265],{},"Custom Renderer, exclusively.",[229,267,268,271],{},[244,269,270],{},"Candidate is not found or fails to load",[244,272,273],{},"Built-in Renderer after a console diagnostic.",[102,275,276],{},"This is a one-way ownership choice per resolved candidate. A Custom Renderer that later fails to mount or render does not cause a second built-in fallback. Its loading, error UI, theme decisions, Mermaid invocation, toolbar, fullscreen, expand, and accessibility behavior are yours to implement.",[111,278,280],{"id":279},"implement-a-complete-custom-renderer","Implement a complete custom renderer",[102,282,283],{},"A resolved Custom Renderer receives exactly these extension inputs:",[285,286,287,293,299],"ul",{},[288,289,290,292],"li",{},[106,291,106],{},": decoded Mermaid source, when the caller passed it.",[288,294,295,298],{},[106,296,297],{},"spinner",": the configured spinner component, or the package spinner fallback.",[288,300,301,302,304],{},"The default slot: the source fallback supplied by ",[106,303,108],{},".",[102,306,307,308,311,312,315,316,319],{},"It does not receive built-in ",[106,309,310],{},"pageConfig",", direct ",[106,313,314],{},"config",", toolbar options, loading slots, error slots, automatic theme resolution, or ",[106,317,318],{},"components.error",". Own those concerns explicitly:",[127,321,325],{"className":322,"code":323,"language":324,"meta":132,"style":132},"language-vue shiki shiki-themes github-light github-dark-high-contrast","\u003C!-- components\u002FCustomMermaid.vue -->\n\u003Cscript setup lang=\"ts\">\nimport { onMounted, ref, shallowRef, useId } from 'vue'\nimport type { Component } from 'vue'\n\nconst props = defineProps\u003C{\n  code?: string\n  spinner: Component | string\n}>()\n\nconst loading = ref(true)\nconst error = shallowRef\u003Cunknown>()\nconst svg = ref('')\nconst renderId = `custom-mermaid-${useId().replaceAll(':', '')}`\n\nonMounted(async () => {\n  try {\n    const mermaid = await useNuxtApp().$mermaid()\n    svg.value = (await mermaid.render(renderId, props.code ?? '')).svg\n  }\n  catch (cause) {\n    error.value = cause\n  }\n  finally {\n    loading.value = false\n  }\n})\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Csection class=\"custom-mermaid\">\n    \u003Ccomponent :is=\"props.spinner\" v-if=\"loading\" \u002F>\n    \u003Cp v-else-if=\"error\" role=\"alert\">\n      Diagram failed: {{ error instanceof Error ? error.message : String(error) }}\n    \u003C\u002Fp>\n    \u003Cdiv v-else v-html=\"svg\" \u002F>\n  \u003C\u002Fsection>\n\u003C\u002Ftemplate>\n","vue",[106,326,327,333,358,372,386,392,410,422,438,444,449,471,492,511,549,554,574,582,607,639,645,654,665,670,678,689,694,699,709,714,724,743,771,796,802,812,837,847],{"__ignoreMap":132},[136,328,329],{"class":138,"line":139},[136,330,332],{"class":331},"s-wDw","\u003C!-- components\u002FCustomMermaid.vue -->\n",[136,334,335,338,342,346,349,352,355],{"class":138,"line":157},[136,336,337],{"class":160},"\u003C",[136,339,341],{"class":340},"sx1sP","script",[136,343,345],{"class":344},"sHg5J"," setup",[136,347,348],{"class":344}," lang",[136,350,351],{"class":160},"=",[136,353,354],{"class":176},"\"ts\"",[136,356,357],{"class":160},">\n",[136,359,360,363,366,369],{"class":138,"line":164},[136,361,362],{"class":142},"import",[136,364,365],{"class":160}," { onMounted, ref, shallowRef, useId } ",[136,367,368],{"class":142},"from",[136,370,371],{"class":176}," 'vue'\n",[136,373,374,376,379,382,384],{"class":138,"line":170},[136,375,362],{"class":142},[136,377,378],{"class":142}," type",[136,380,381],{"class":160}," { Component } ",[136,383,368],{"class":142},[136,385,371],{"class":176},[136,387,388],{"class":138,"line":183},[136,389,391],{"emptyLinePlaceholder":390},true,"\n",[136,393,394,397,401,404,407],{"class":138,"line":194},[136,395,396],{"class":142},"const",[136,398,400],{"class":399},"sP0c6"," props",[136,402,403],{"class":142}," =",[136,405,406],{"class":149}," defineProps",[136,408,409],{"class":160},"\u003C{\n",[136,411,412,416,419],{"class":138,"line":200},[136,413,415],{"class":414},"sa561","  code",[136,417,418],{"class":142},"?:",[136,420,421],{"class":399}," string\n",[136,423,424,427,429,433,436],{"class":138,"line":208},[136,425,426],{"class":414},"  spinner",[136,428,125],{"class":142},[136,430,432],{"class":431},"sMTad"," Component",[136,434,435],{"class":142}," |",[136,437,421],{"class":399},[136,439,441],{"class":138,"line":440},9,[136,442,443],{"class":160},"}>()\n",[136,445,447],{"class":138,"line":446},10,[136,448,391],{"emptyLinePlaceholder":390},[136,450,452,454,457,459,462,465,468],{"class":138,"line":451},11,[136,453,396],{"class":142},[136,455,456],{"class":399}," loading",[136,458,403],{"class":142},[136,460,461],{"class":149}," ref",[136,463,464],{"class":160},"(",[136,466,467],{"class":399},"true",[136,469,470],{"class":160},")\n",[136,472,474,476,479,481,484,486,489],{"class":138,"line":473},12,[136,475,396],{"class":142},[136,477,478],{"class":399}," error",[136,480,403],{"class":142},[136,482,483],{"class":149}," shallowRef",[136,485,337],{"class":160},[136,487,488],{"class":399},"unknown",[136,490,491],{"class":160},">()\n",[136,493,495,497,500,502,504,506,509],{"class":138,"line":494},13,[136,496,396],{"class":142},[136,498,499],{"class":399}," svg",[136,501,403],{"class":142},[136,503,461],{"class":149},[136,505,464],{"class":160},[136,507,508],{"class":176},"''",[136,510,470],{"class":160},[136,512,514,516,519,521,524,527,530,533,535,538,541,543,546],{"class":138,"line":513},14,[136,515,396],{"class":142},[136,517,518],{"class":399}," renderId",[136,520,403],{"class":142},[136,522,523],{"class":176}," `custom-mermaid-${",[136,525,526],{"class":149},"useId",[136,528,529],{"class":176},"().",[136,531,532],{"class":149},"replaceAll",[136,534,464],{"class":176},[136,536,537],{"class":176},"':'",[136,539,540],{"class":176},", ",[136,542,508],{"class":176},[136,544,545],{"class":176},")",[136,547,548],{"class":176},"}`\n",[136,550,552],{"class":138,"line":551},15,[136,553,391],{"emptyLinePlaceholder":390},[136,555,557,560,562,565,568,571],{"class":138,"line":556},16,[136,558,559],{"class":149},"onMounted",[136,561,464],{"class":160},[136,563,564],{"class":142},"async",[136,566,567],{"class":160}," () ",[136,569,570],{"class":142},"=>",[136,572,573],{"class":160}," {\n",[136,575,577,580],{"class":138,"line":576},17,[136,578,579],{"class":142},"  try",[136,581,573],{"class":160},[136,583,585,588,591,593,596,599,601,604],{"class":138,"line":584},18,[136,586,587],{"class":142},"    const",[136,589,590],{"class":399}," mermaid",[136,592,403],{"class":142},[136,594,595],{"class":142}," await",[136,597,598],{"class":149}," useNuxtApp",[136,600,529],{"class":160},[136,602,603],{"class":149},"$mermaid",[136,605,606],{"class":160},"()\n",[136,608,610,613,615,618,621,624,627,630,633,636],{"class":138,"line":609},19,[136,611,612],{"class":160},"    svg.value ",[136,614,351],{"class":142},[136,616,617],{"class":160}," (",[136,619,620],{"class":142},"await",[136,622,623],{"class":160}," mermaid.",[136,625,626],{"class":149},"render",[136,628,629],{"class":160},"(renderId, props.code ",[136,631,632],{"class":142},"??",[136,634,635],{"class":176}," ''",[136,637,638],{"class":160},")).svg\n",[136,640,642],{"class":138,"line":641},20,[136,643,644],{"class":160},"  }\n",[136,646,648,651],{"class":138,"line":647},21,[136,649,650],{"class":142},"  catch",[136,652,653],{"class":160}," (cause) {\n",[136,655,657,660,662],{"class":138,"line":656},22,[136,658,659],{"class":160},"    error.value ",[136,661,351],{"class":142},[136,663,664],{"class":160}," cause\n",[136,666,668],{"class":138,"line":667},23,[136,669,644],{"class":160},[136,671,673,676],{"class":138,"line":672},24,[136,674,675],{"class":142},"  finally",[136,677,573],{"class":160},[136,679,681,684,686],{"class":138,"line":680},25,[136,682,683],{"class":160},"    loading.value ",[136,685,351],{"class":142},[136,687,688],{"class":399}," false\n",[136,690,692],{"class":138,"line":691},26,[136,693,644],{"class":160},[136,695,697],{"class":138,"line":696},27,[136,698,211],{"class":160},[136,700,702,705,707],{"class":138,"line":701},28,[136,703,704],{"class":160},"\u003C\u002F",[136,706,341],{"class":340},[136,708,357],{"class":160},[136,710,712],{"class":138,"line":711},29,[136,713,391],{"emptyLinePlaceholder":390},[136,715,717,719,722],{"class":138,"line":716},30,[136,718,337],{"class":160},[136,720,721],{"class":340},"template",[136,723,357],{"class":160},[136,725,727,730,733,736,738,741],{"class":138,"line":726},31,[136,728,729],{"class":160},"  \u003C",[136,731,732],{"class":340},"section",[136,734,735],{"class":344}," class",[136,737,351],{"class":160},[136,739,740],{"class":176},"\"custom-mermaid\"",[136,742,357],{"class":160},[136,744,746,749,752,755,757,760,763,765,768],{"class":138,"line":745},32,[136,747,748],{"class":160},"    \u003C",[136,750,751],{"class":340},"component",[136,753,754],{"class":344}," :is",[136,756,351],{"class":160},[136,758,759],{"class":176},"\"props.spinner\"",[136,761,762],{"class":344}," v-if",[136,764,351],{"class":160},[136,766,767],{"class":176},"\"loading\"",[136,769,770],{"class":160}," \u002F>\n",[136,772,774,776,778,781,783,786,789,791,794],{"class":138,"line":773},33,[136,775,748],{"class":160},[136,777,102],{"class":340},[136,779,780],{"class":344}," v-else-if",[136,782,351],{"class":160},[136,784,785],{"class":176},"\"error\"",[136,787,788],{"class":344}," role",[136,790,351],{"class":160},[136,792,793],{"class":176},"\"alert\"",[136,795,357],{"class":160},[136,797,799],{"class":138,"line":798},34,[136,800,801],{"class":160},"      Diagram failed: {{ error instanceof Error ? error.message : String(error) }}\n",[136,803,805,808,810],{"class":138,"line":804},35,[136,806,807],{"class":160},"    \u003C\u002F",[136,809,102],{"class":340},[136,811,357],{"class":160},[136,813,815,817,820,823,826,828,831,835],{"class":138,"line":814},36,[136,816,748],{"class":160},[136,818,819],{"class":340},"div",[136,821,822],{"class":344}," v-else",[136,824,825],{"class":344}," v-html",[136,827,351],{"class":160},[136,829,830],{"class":176},"\"svg\"",[136,832,834],{"class":833},"sxVmR"," \u002F",[136,836,357],{"class":160},[136,838,840,843,845],{"class":138,"line":839},37,[136,841,842],{"class":160},"  \u003C\u002F",[136,844,732],{"class":340},[136,846,357],{"class":160},[136,848,850,852,854],{"class":138,"line":849},38,[136,851,704],{"class":160},[136,853,721],{"class":340},[136,855,357],{"class":160},[102,857,858],{},"The example deliberately owns failure rendering. If your renderer needs theme changes or Mermaid configuration, provide and react to its own application-level state rather than expecting the built-in renderer's props.",[111,860,862],{"id":861},"wrap-the-built-in-renderer-instead","Wrap the built-in renderer instead",[102,864,865,866,868],{},"Do not configure this wrapper as ",[106,867,120],{},". It is an ordinary application component that preserves built-in configuration, interactions, loading, and error behavior while adding presentation:",[127,870,872],{"className":322,"code":871,"language":324,"meta":132,"style":132},"\u003C!-- components\u002FDiagramCard.vue -->\n\u003Cscript setup lang=\"ts\">\nconst props = defineProps\u003C{\n  title: string\n  source: string\n}>()\n\nconst encodedSource = computed(() => encodeURIComponent(props.source))\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Csection class=\"diagram-card\">\n    \u003Ch2>{{ title }}\u003C\u002Fh2>\n    \u003CMermaid :code=\"encodedSource\">\n      \u003Ctemplate #loading>\n        \u003Cp aria-live=\"polite\">Rendering diagram…\u003C\u002Fp>\n      \u003C\u002Ftemplate>\n      \u003Ctemplate #error=\"{ error, source }\">\n        \u003Cp role=\"alert\">\n          Render failed: {{ error instanceof Error ? error.message : String(error) }}\n        \u003C\u002Fp>\n        \u003Cdetails>\n          \u003Csummary>Show Mermaid source\u003C\u002Fsummary>\n          \u003Cpre>\u003Ccode>{{ source }}\u003C\u002Fcode>\u003C\u002Fpre>\n        \u003C\u002Fdetails>\n      \u003C\u002Ftemplate>\n    \u003C\u002FMermaid>\n  \u003C\u002Fsection>\n\u003C\u002Ftemplate>\n",[106,873,874,879,895,907,916,925,929,933,956,964,968,976,991,1004,1029,1044,1066,1075,1097,1111,1116,1125,1134,1149,1172,1180,1188,1196,1204],{"__ignoreMap":132},[136,875,876],{"class":138,"line":139},[136,877,878],{"class":331},"\u003C!-- components\u002FDiagramCard.vue -->\n",[136,880,881,883,885,887,889,891,893],{"class":138,"line":157},[136,882,337],{"class":160},[136,884,341],{"class":340},[136,886,345],{"class":344},[136,888,348],{"class":344},[136,890,351],{"class":160},[136,892,354],{"class":176},[136,894,357],{"class":160},[136,896,897,899,901,903,905],{"class":138,"line":164},[136,898,396],{"class":142},[136,900,400],{"class":399},[136,902,403],{"class":142},[136,904,406],{"class":149},[136,906,409],{"class":160},[136,908,909,912,914],{"class":138,"line":170},[136,910,911],{"class":414},"  title",[136,913,125],{"class":142},[136,915,421],{"class":399},[136,917,918,921,923],{"class":138,"line":183},[136,919,920],{"class":414},"  source",[136,922,125],{"class":142},[136,924,421],{"class":399},[136,926,927],{"class":138,"line":194},[136,928,443],{"class":160},[136,930,931],{"class":138,"line":200},[136,932,391],{"emptyLinePlaceholder":390},[136,934,935,937,940,942,945,948,950,953],{"class":138,"line":208},[136,936,396],{"class":142},[136,938,939],{"class":399}," encodedSource",[136,941,403],{"class":142},[136,943,944],{"class":149}," computed",[136,946,947],{"class":160},"(() ",[136,949,570],{"class":142},[136,951,952],{"class":149}," encodeURIComponent",[136,954,955],{"class":160},"(props.source))\n",[136,957,958,960,962],{"class":138,"line":440},[136,959,704],{"class":160},[136,961,341],{"class":340},[136,963,357],{"class":160},[136,965,966],{"class":138,"line":446},[136,967,391],{"emptyLinePlaceholder":390},[136,969,970,972,974],{"class":138,"line":451},[136,971,337],{"class":160},[136,973,721],{"class":340},[136,975,357],{"class":160},[136,977,978,980,982,984,986,989],{"class":138,"line":473},[136,979,729],{"class":160},[136,981,732],{"class":340},[136,983,735],{"class":344},[136,985,351],{"class":160},[136,987,988],{"class":176},"\"diagram-card\"",[136,990,357],{"class":160},[136,992,993,995,997,1000,1002],{"class":138,"line":494},[136,994,748],{"class":160},[136,996,111],{"class":340},[136,998,999],{"class":160},">{{ title }}\u003C\u002F",[136,1001,111],{"class":340},[136,1003,357],{"class":160},[136,1005,1006,1008,1011,1014,1016,1018,1022,1025,1027],{"class":138,"line":513},[136,1007,748],{"class":160},[136,1009,1010],{"class":340},"Mermaid",[136,1012,1013],{"class":160}," :",[136,1015,106],{"class":344},[136,1017,351],{"class":160},[136,1019,1021],{"class":1020},"sXKb-","\"",[136,1023,1024],{"class":160},"encodedSource",[136,1026,1021],{"class":1020},[136,1028,357],{"class":160},[136,1030,1031,1034,1036,1039,1042],{"class":138,"line":551},[136,1032,1033],{"class":160},"      \u003C",[136,1035,721],{"class":340},[136,1037,1038],{"class":160}," #",[136,1040,1041],{"class":344},"loading",[136,1043,357],{"class":160},[136,1045,1046,1049,1051,1054,1056,1059,1062,1064],{"class":138,"line":556},[136,1047,1048],{"class":160},"        \u003C",[136,1050,102],{"class":340},[136,1052,1053],{"class":344}," aria-live",[136,1055,351],{"class":160},[136,1057,1058],{"class":176},"\"polite\"",[136,1060,1061],{"class":160},">Rendering diagram…\u003C\u002F",[136,1063,102],{"class":340},[136,1065,357],{"class":160},[136,1067,1068,1071,1073],{"class":138,"line":576},[136,1069,1070],{"class":160},"      \u003C\u002F",[136,1072,721],{"class":340},[136,1074,357],{"class":160},[136,1076,1077,1079,1081,1083,1086,1088,1090,1093,1095],{"class":138,"line":584},[136,1078,1033],{"class":160},[136,1080,721],{"class":340},[136,1082,1038],{"class":160},[136,1084,1085],{"class":344},"error",[136,1087,351],{"class":160},[136,1089,1021],{"class":1020},[136,1091,1092],{"class":160},"{ error, source }",[136,1094,1021],{"class":1020},[136,1096,357],{"class":160},[136,1098,1099,1101,1103,1105,1107,1109],{"class":138,"line":609},[136,1100,1048],{"class":160},[136,1102,102],{"class":340},[136,1104,788],{"class":344},[136,1106,351],{"class":160},[136,1108,793],{"class":176},[136,1110,357],{"class":160},[136,1112,1113],{"class":138,"line":641},[136,1114,1115],{"class":160},"          Render failed: {{ error instanceof Error ? error.message : String(error) }}\n",[136,1117,1118,1121,1123],{"class":138,"line":647},[136,1119,1120],{"class":160},"        \u003C\u002F",[136,1122,102],{"class":340},[136,1124,357],{"class":160},[136,1126,1127,1129,1132],{"class":138,"line":656},[136,1128,1048],{"class":160},[136,1130,1131],{"class":340},"details",[136,1133,357],{"class":160},[136,1135,1136,1139,1142,1145,1147],{"class":138,"line":667},[136,1137,1138],{"class":160},"          \u003C",[136,1140,1141],{"class":340},"summary",[136,1143,1144],{"class":160},">Show Mermaid source\u003C\u002F",[136,1146,1141],{"class":340},[136,1148,357],{"class":160},[136,1150,1151,1153,1155,1158,1160,1163,1165,1168,1170],{"class":138,"line":672},[136,1152,1138],{"class":160},[136,1154,127],{"class":340},[136,1156,1157],{"class":160},">\u003C",[136,1159,106],{"class":340},[136,1161,1162],{"class":160},">{{ source }}\u003C\u002F",[136,1164,106],{"class":340},[136,1166,1167],{"class":160},">\u003C\u002F",[136,1169,127],{"class":340},[136,1171,357],{"class":160},[136,1173,1174,1176,1178],{"class":138,"line":680},[136,1175,1120],{"class":160},[136,1177,1131],{"class":340},[136,1179,357],{"class":160},[136,1181,1182,1184,1186],{"class":138,"line":691},[136,1183,1070],{"class":160},[136,1185,721],{"class":340},[136,1187,357],{"class":160},[136,1189,1190,1192,1194],{"class":138,"line":696},[136,1191,807],{"class":160},[136,1193,1010],{"class":340},[136,1195,357],{"class":160},[136,1197,1198,1200,1202],{"class":138,"line":701},[136,1199,842],{"class":160},[136,1201,732],{"class":340},[136,1203,357],{"class":160},[136,1205,1206,1208,1210],{"class":138,"line":711},[136,1207,704],{"class":160},[136,1209,721],{"class":340},[136,1211,357],{"class":160},[102,1213,1214,1215,1218,1219,1222,1223,1226,1227,1229,1230,1232,1233,1236],{},"Add ",[106,1216,1217],{},"import { computed } from 'vue'"," if your Nuxt setup does not auto-import Vue utilities. The built-in renderer accepts a default slot for source fallback, ",[106,1220,1221],{},"#loading"," for its initial loading state, and ",[106,1224,1225],{},"#error=\"{ error, source }\""," for a Mermaid render failure. Alternatively, ",[106,1228,318],{}," supplies a global built-in error component and receives ",[106,1231,1085],{}," and ",[106,1234,1235],{},"source","; it is not used by a Custom Renderer.",[111,1238,1240],{"id":1239},"avoid-recursive-renderer-selection","Avoid recursive renderer selection",[102,1242,1243,1244,1246,1247,1249,1250,1253],{},"Never render ",[106,1245,108],{}," inside the component configured by ",[106,1248,120],{},". The nested component repeats candidate selection and can recurse indefinitely. Call ",[106,1251,1252],{},"useNuxtApp().$mermaid()",", another renderer, or a separate lower-level implementation instead. A wrapper is safe only when it is not the configured custom renderer.",[1255,1256,1257],"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 .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-wDw, html code.shiki .s-wDw{--shiki-default:#6A737D;--shiki-dark:#BDC4CC}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 .sP0c6, html code.shiki .sP0c6{--shiki-default:#005CC5;--shiki-dark:#91CBFF}html pre.shiki code .sa561, html code.shiki .sa561{--shiki-default:#E36209;--shiki-dark:#FFB757}html pre.shiki code .sMTad, html code.shiki .sMTad{--shiki-default:#6F42C1;--shiki-dark:#FFB757}html pre.shiki code .sxVmR, html code.shiki .sxVmR{--shiki-default:#B31D28;--shiki-default-font-style:italic;--shiki-dark:#FFB1AF;--shiki-dark-font-style:italic}html pre.shiki code .sXKb-, html code.shiki .sXKb-{--shiki-default:#032F62;--shiki-dark:#F0F3F6}",{"title":132,"searchDepth":157,"depth":157,"links":1259},[1260,1261,1262,1263],{"id":113,"depth":157,"text":114},{"id":279,"depth":157,"text":280},{"id":861,"depth":157,"text":862},{"id":1239,"depth":157,"text":1240},null,"Replace the built-in renderer or wrap it while keeping rendering ownership clear.","md",{},{"title":26,"description":1265},"mGS4ZPt8s0ov197C91PhYTRsLSdBAjKrl_8SPRyX0kw",[1271,1273,1275,1277,1285,1287],{"title":5,"path":6,"stem":7,"children":1272},[],{"title":9,"path":10,"stem":11,"children":1274},[],{"title":13,"path":14,"stem":15,"children":1276},[],{"title":17,"path":18,"stem":19,"children":1278,"page":33},[1279,1281,1283],{"title":22,"path":23,"stem":24,"children":1280},[],{"title":26,"path":27,"stem":28,"children":1282},[],{"title":30,"path":31,"stem":32,"children":1284},[],{"title":35,"path":36,"stem":37,"children":1286},[],{"title":39,"path":40,"stem":41,"children":1288,"page":33},[1289],{"title":44,"path":45,"stem":46,"children":1290},[],1787059980828]