[{"data":1,"prerenderedAt":8309},["ShallowReactive",2],{"content-/nuxt3-drawio-complete-guide":3,"all-pages-for-dir":8288,"related-/nuxt3-drawio-complete-guide":8289,"og-image-/nuxt3-drawio-complete-guide":8308},{"id":4,"title":5,"body":6,"category":8269,"concepts":8269,"description":8270,"extension":8271,"meta":8272,"navigation":239,"ogImage":8269,"path":8273,"project_name":8269,"published":8274,"publishedAt":8275,"seo":8276,"source":8269,"stem":8277,"tags":8278,"todo":8269,"unpublished":8274,"updatedAt":8286,"__hash__":8287},"pages/2025-11/2025-11-19/nuxt3-drawio-complete-guide.md","Nuxt 3でDraw.ioファイルを表示する完全ガイド",{"type":7,"value":8,"toc":8229},"minimark",[9,13,30,45,50,57,60,65,68,73,355,360,494,507,511,514,908,913,1044,1052,1056,1063,2132,2140,2144,2147,2165,2325,2333,2337,2340,2656,2664,2668,2672,2683,2764,2778,2868,2871,2878,2885,2890,2948,2951,2958,3125,3130,3230,3233,3236,3241,3257,3271,3274,3279,3290,3304,3309,3829,3834,3848,3851,3854,3871,3907,3915,3918,4049,4052,4055,4059,6411,6415,6988,6991,6995,7439,7443,7760,7763,7767,7770,7893,7897,7904,7908,7911,7914,7918,7924,7929,8046,8050,8059,8063,8121,8125,8130,8135,8139,8144,8152,8199,8202,8209,8216,8223,8226],[10,11,5],"h1",{"id":12},"nuxt-3でdrawioファイルを表示する完全ガイド",[14,15,16],"blockquote",{},[17,18,19,23,24,29],"p",{},[20,21,22],"strong",{},"セキュリティに関する補足",": viewer-static.min.jsをCDNから読み込むか、ローカルにホストするかの選択については、",[25,26,28],"a",{"href":27},"/drawio-viewer-cdn-vs-local","CDN vs ローカルホストのセキュリティ比較","を参照してください。",[17,31,32,33,36,37,40,41,44],{},"現在のviewer.diagrams.netのCORS問題は",[20,34,35],{},"サーバー側のCORS設定不足","が原因です。Nuxt 3では複数の解決策があり、最も実用的なのは",[20,38,39],{},"NuxtサーバーミドルウェアでのCORS設定","または",[20,42,43],{},"iframe embed mode","の使用です。本レポートでは、問題の原因から実装コード、代替手段まで網羅的に解説します。",[46,47,49],"h2",{"id":48},"なぜ同一ドメインでもcorsエラーが発生するのか","なぜ同一ドメインでもCORSエラーが発生するのか",[17,51,52,53,56],{},"viewer.diagrams.netが外部URLからファイルを読み込む際、ブラウザは必ずCross-Originリクエストとして扱います。Nuxt 3のpublicディレクトリは",[20,54,55],{},"デフォルトでCORSヘッダーを付与しない","ため、viewer.diagrams.netからのアクセスが拒否されます。開発環境では特に、異なるポート間のアクセス（localhost:3000 → localhost:3000でも内部的にはクロスオリジン扱い）やプリフライトリクエスト（OPTIONS）の処理不足が原因となります。",[46,58,59],{"id":59},"最も効果的な5つの解決策",[61,62,64],"h3",{"id":63},"解決策1-nuxtサーバーミドルウェアでのcors設定推奨","解決策1: NuxtサーバーミドルウェアでのCORS設定（推奨）",[17,66,67],{},"本番環境でも開発環境でも動作する最も堅牢な方法です。Nuxt 3のサーバーミドルウェアを使用して、Draw.ioファイルに適切なCORSヘッダーを付与します。",[17,69,70],{},[20,71,72],{},"実装コード:",[74,75,80],"pre",{"className":76,"code":77,"language":78,"meta":79,"style":79},"language-typescript shiki shiki-themes vitesse-light vitesse-light","// server/middleware/cors.ts\nexport default defineEventHandler((event) => {\n setResponseHeaders(event, {\n 'Access-Control-Allow-Methods': 'GET,HEAD,PUT,PATCH,POST,DELETE',\n 'Access-Control-Allow-Origin': '*',\n 'Access-Control-Allow-Credentials': 'true',\n 'Access-Control-Allow-Headers': '*',\n })\n\n if (event.method === 'OPTIONS') {\n event.node.res.statusCode = 204\n event.node.res.statusMessage = 'No Content.'\n return 'OK'\n }\n})\n","typescript","",[81,82,83,92,123,139,166,187,208,228,234,241,274,302,330,343,349],"code",{"__ignoreMap":79},[84,85,88],"span",{"class":86,"line":87},"line",1,[84,89,91],{"class":90},"sxvE3","// server/middleware/cors.ts\n",[84,93,95,99,102,106,110,114,117,120],{"class":86,"line":94},2,[84,96,98],{"class":97},"sHkkW","export",[84,100,101],{"class":97}," default",[84,103,105],{"class":104},"senZ8"," defineEventHandler",[84,107,109],{"class":108},"shFtX","((",[84,111,113],{"class":112},"s4oTP","event",[84,115,116],{"class":108},")",[84,118,119],{"class":108}," =>",[84,121,122],{"class":108}," {\n",[84,124,126,129,132,134,137],{"class":86,"line":125},3,[84,127,128],{"class":104}," setResponseHeaders",[84,130,131],{"class":108},"(",[84,133,113],{"class":112},[84,135,136],{"class":108},",",[84,138,122],{"class":108},[84,140,142,146,150,153,156,158,161,163],{"class":86,"line":141},4,[84,143,145],{"class":144},"sMJiu"," '",[84,147,149],{"class":148},"sdGka","Access-Control-Allow-Methods",[84,151,152],{"class":144},"'",[84,154,155],{"class":108},": ",[84,157,152],{"class":144},[84,159,160],{"class":148},"GET,HEAD,PUT,PATCH,POST,DELETE",[84,162,152],{"class":144},[84,164,165],{"class":108},",\n",[84,167,169,171,174,176,178,180,183,185],{"class":86,"line":168},5,[84,170,145],{"class":144},[84,172,173],{"class":148},"Access-Control-Allow-Origin",[84,175,152],{"class":144},[84,177,155],{"class":108},[84,179,152],{"class":144},[84,181,182],{"class":148},"*",[84,184,152],{"class":144},[84,186,165],{"class":108},[84,188,190,192,195,197,199,201,204,206],{"class":86,"line":189},6,[84,191,145],{"class":144},[84,193,194],{"class":148},"Access-Control-Allow-Credentials",[84,196,152],{"class":144},[84,198,155],{"class":108},[84,200,152],{"class":144},[84,202,203],{"class":148},"true",[84,205,152],{"class":144},[84,207,165],{"class":108},[84,209,211,213,216,218,220,222,224,226],{"class":86,"line":210},7,[84,212,145],{"class":144},[84,214,215],{"class":148},"Access-Control-Allow-Headers",[84,217,152],{"class":144},[84,219,155],{"class":108},[84,221,152],{"class":144},[84,223,182],{"class":148},[84,225,152],{"class":144},[84,227,165],{"class":108},[84,229,231],{"class":86,"line":230},8,[84,232,233],{"class":108}," })\n",[84,235,237],{"class":86,"line":236},9,[84,238,240],{"emptyLinePlaceholder":239},true,"\n",[84,242,244,247,250,252,255,258,262,265,268,270,272],{"class":86,"line":243},10,[84,245,246],{"class":97}," if",[84,248,249],{"class":108}," (",[84,251,113],{"class":112},[84,253,254],{"class":108},".",[84,256,257],{"class":112},"method",[84,259,261],{"class":260},"stQ0i"," ===",[84,263,264],{"class":144}," '",[84,266,267],{"class":148},"OPTIONS",[84,269,152],{"class":144},[84,271,116],{"class":108},[84,273,122],{"class":108},[84,275,277,280,282,285,287,290,292,295,298],{"class":86,"line":276},11,[84,278,279],{"class":112}," event",[84,281,254],{"class":108},[84,283,284],{"class":112},"node",[84,286,254],{"class":108},[84,288,289],{"class":112},"res",[84,291,254],{"class":108},[84,293,294],{"class":112},"statusCode",[84,296,297],{"class":108}," =",[84,299,301],{"class":300},"sM54T"," 204\n",[84,303,305,307,309,311,313,315,317,320,322,324,327],{"class":86,"line":304},12,[84,306,279],{"class":112},[84,308,254],{"class":108},[84,310,284],{"class":112},[84,312,254],{"class":108},[84,314,289],{"class":112},[84,316,254],{"class":108},[84,318,319],{"class":112},"statusMessage",[84,321,297],{"class":108},[84,323,264],{"class":144},[84,325,326],{"class":148},"No Content.",[84,328,329],{"class":144},"'\n",[84,331,333,336,338,341],{"class":86,"line":332},13,[84,334,335],{"class":97}," return",[84,337,264],{"class":144},[84,339,340],{"class":148},"OK",[84,342,329],{"class":144},[84,344,346],{"class":86,"line":345},14,[84,347,348],{"class":108}," }\n",[84,350,352],{"class":86,"line":351},15,[84,353,354],{"class":108},"})\n",[17,356,357],{},[20,358,359],{},"または、特定のルートにのみ適用:",[74,361,363],{"className":76,"code":362,"language":78,"meta":79,"style":79},"// nuxt.config.ts\nexport default defineNuxtConfig({\n routeRules: {\n '/diagrams/**': {\n cors: true,\n headers: {\n 'Access-Control-Allow-Origin': '*',\n 'Access-Control-Allow-Methods': 'GET,OPTIONS',\n 'Access-Control-Allow-Headers': '*',\n }\n }\n }\n})\n",[81,364,365,370,382,391,402,413,420,439,458,476,481,486,490],{"__ignoreMap":79},[84,366,367],{"class":86,"line":87},[84,368,369],{"class":90},"// nuxt.config.ts\n",[84,371,372,374,376,379],{"class":86,"line":94},[84,373,98],{"class":97},[84,375,101],{"class":97},[84,377,378],{"class":104}," defineNuxtConfig",[84,380,381],{"class":108},"({\n",[84,383,384,388],{"class":86,"line":125},[84,385,387],{"class":386},"sz8Xr"," routeRules",[84,389,390],{"class":108},": {\n",[84,392,393,395,398,400],{"class":86,"line":141},[84,394,145],{"class":144},[84,396,397],{"class":148},"/diagrams/**",[84,399,152],{"class":144},[84,401,390],{"class":108},[84,403,404,407,409,411],{"class":86,"line":168},[84,405,406],{"class":386}," cors",[84,408,155],{"class":108},[84,410,203],{"class":97},[84,412,165],{"class":108},[84,414,415,418],{"class":86,"line":189},[84,416,417],{"class":386}," headers",[84,419,390],{"class":108},[84,421,422,425,427,429,431,433,435,437],{"class":86,"line":210},[84,423,424],{"class":144}," '",[84,426,173],{"class":148},[84,428,152],{"class":144},[84,430,155],{"class":108},[84,432,152],{"class":144},[84,434,182],{"class":148},[84,436,152],{"class":144},[84,438,165],{"class":108},[84,440,441,443,445,447,449,451,454,456],{"class":86,"line":230},[84,442,424],{"class":144},[84,444,149],{"class":148},[84,446,152],{"class":144},[84,448,155],{"class":108},[84,450,152],{"class":144},[84,452,453],{"class":148},"GET,OPTIONS",[84,455,152],{"class":144},[84,457,165],{"class":108},[84,459,460,462,464,466,468,470,472,474],{"class":86,"line":236},[84,461,424],{"class":144},[84,463,215],{"class":148},[84,465,152],{"class":144},[84,467,155],{"class":108},[84,469,152],{"class":144},[84,471,182],{"class":148},[84,473,152],{"class":144},[84,475,165],{"class":108},[84,477,478],{"class":86,"line":243},[84,479,480],{"class":108}," }\n",[84,482,483],{"class":86,"line":276},[84,484,485],{"class":108}," }\n",[84,487,488],{"class":86,"line":304},[84,489,348],{"class":108},[84,491,492],{"class":86,"line":332},[84,493,354],{"class":108},[17,495,496,499,500,503,504,506],{},[20,497,498],{},"メリット:"," 開発・本番両対応、細かい制御が可能、キャッシュ制御も設定可能\n",[20,501,502],{},"デメリット:"," サーバー側のコード追加が必要、本番環境では",[81,505,182],{},"の代わりに特定のオリジンを指定すべき",[61,508,510],{"id":509},"解決策2-base64エンコードでの埋め込み即座に動作","解決策2: Base64エンコードでの埋め込み（即座に動作）",[17,512,513],{},"CORSを完全に回避する方法です。Draw.ioファイルのXMLをbase64エンコードして、HTML内に直接埋め込みます。",[74,515,519],{"className":516,"code":517,"language":518,"meta":79,"style":79},"language-vue shiki shiki-themes vitesse-light vitesse-light","\u003Ctemplate>\n \u003CClientOnly>\n \u003Cdiv\n class=\"mxgraph\"\n :data-mxgraph=\"diagramConfig\"\n style=\"max-width: 100%;\"\n />\n \u003C/ClientOnly>\n\u003C/template>\n\n\u003Cscript setup lang=\"ts\">\nimport { computed, onMounted } from 'vue'\n\nconst diagramXml = ref('')\n\n// ファイルを読み込んでbase64エンコード\nonMounted(async () => {\n const response = await fetch('/diagrams/architecture.drawio')\n diagramXml.value = await response.text()\n})\n\nconst diagramConfig = computed(() => JSON.stringify({\n highlight: '#0000ff',\n nav: true,\n resize: true,\n toolbar: 'zoom layers lightbox',\n xml: diagramXml.value\n}))\n\u003C/script>\n","vue",[81,520,521,532,542,550,567,581,595,603,612,621,625,649,677,681,702,706,712,730,758,784,789,794,820,837,849,861,878,893,899],{"__ignoreMap":79},[84,522,523,526,529],{"class":86,"line":87},[84,524,525],{"class":108},"\u003C",[84,527,528],{"class":97},"template",[84,530,531],{"class":108},">\n",[84,533,534,537,540],{"class":86,"line":94},[84,535,536],{"class":108}," \u003C",[84,538,539],{"class":97},"ClientOnly",[84,541,531],{"class":108},[84,543,544,547],{"class":86,"line":125},[84,545,546],{"class":108}," \u003C",[84,548,549],{"class":97},"div\n",[84,551,552,555,558,561,564],{"class":86,"line":141},[84,553,554],{"class":112}," class",[84,556,557],{"class":108},"=",[84,559,560],{"class":144},"\"",[84,562,563],{"class":148},"mxgraph",[84,565,566],{"class":144},"\"\n",[84,568,569,572,574,576,579],{"class":86,"line":168},[84,570,571],{"class":112}," :data-mxgraph",[84,573,557],{"class":108},[84,575,560],{"class":144},[84,577,578],{"class":148},"diagramConfig",[84,580,566],{"class":144},[84,582,583,586,588,590,593],{"class":86,"line":189},[84,584,585],{"class":112}," style",[84,587,557],{"class":108},[84,589,560],{"class":144},[84,591,592],{"class":148},"max-width: 100%;",[84,594,566],{"class":144},[84,596,597,601],{"class":86,"line":210},[84,598,600],{"class":599},"s5V_Q"," /",[84,602,531],{"class":108},[84,604,605,608,610],{"class":86,"line":230},[84,606,607],{"class":108}," \u003C/",[84,609,539],{"class":97},[84,611,531],{"class":108},[84,613,614,617,619],{"class":86,"line":236},[84,615,616],{"class":108},"\u003C/",[84,618,528],{"class":97},[84,620,531],{"class":108},[84,622,623],{"class":86,"line":243},[84,624,240],{"emptyLinePlaceholder":239},[84,626,627,629,632,635,638,640,642,645,647],{"class":86,"line":276},[84,628,525],{"class":108},[84,630,631],{"class":97},"script",[84,633,634],{"class":112}," setup",[84,636,637],{"class":112}," lang",[84,639,557],{"class":108},[84,641,560],{"class":144},[84,643,644],{"class":148},"ts",[84,646,560],{"class":144},[84,648,531],{"class":108},[84,650,651,654,657,660,662,665,668,671,673,675],{"class":86,"line":304},[84,652,653],{"class":97},"import",[84,655,656],{"class":108}," {",[84,658,659],{"class":112}," computed",[84,661,136],{"class":108},[84,663,664],{"class":112}," onMounted",[84,666,667],{"class":108}," }",[84,669,670],{"class":97}," from",[84,672,264],{"class":144},[84,674,518],{"class":148},[84,676,329],{"class":144},[84,678,679],{"class":86,"line":332},[84,680,240],{"emptyLinePlaceholder":239},[84,682,683,686,689,691,694,696,699],{"class":86,"line":345},[84,684,685],{"class":260},"const ",[84,687,688],{"class":112},"diagramXml",[84,690,297],{"class":108},[84,692,693],{"class":104}," ref",[84,695,131],{"class":108},[84,697,698],{"class":144},"''",[84,700,701],{"class":108},")\n",[84,703,704],{"class":86,"line":351},[84,705,240],{"emptyLinePlaceholder":239},[84,707,709],{"class":86,"line":708},16,[84,710,711],{"class":90},"// ファイルを読み込んでbase64エンコード\n",[84,713,715,718,720,723,726,728],{"class":86,"line":714},17,[84,716,717],{"class":104},"onMounted",[84,719,131],{"class":108},[84,721,722],{"class":260},"async",[84,724,725],{"class":108}," ()",[84,727,119],{"class":108},[84,729,122],{"class":108},[84,731,733,736,739,741,744,747,749,751,754,756],{"class":86,"line":732},18,[84,734,735],{"class":260}," const ",[84,737,738],{"class":112},"response",[84,740,297],{"class":108},[84,742,743],{"class":97}," await",[84,745,746],{"class":104}," fetch",[84,748,131],{"class":108},[84,750,152],{"class":144},[84,752,753],{"class":148},"/diagrams/architecture.drawio",[84,755,152],{"class":144},[84,757,701],{"class":108},[84,759,761,764,766,769,771,773,776,778,781],{"class":86,"line":760},19,[84,762,763],{"class":112}," diagramXml",[84,765,254],{"class":108},[84,767,768],{"class":112},"value",[84,770,297],{"class":108},[84,772,743],{"class":97},[84,774,775],{"class":112}," response",[84,777,254],{"class":108},[84,779,780],{"class":104},"text",[84,782,783],{"class":108},"()\n",[84,785,787],{"class":86,"line":786},20,[84,788,354],{"class":108},[84,790,792],{"class":86,"line":791},21,[84,793,240],{"emptyLinePlaceholder":239},[84,795,797,799,801,803,805,808,810,813,815,818],{"class":86,"line":796},22,[84,798,685],{"class":260},[84,800,578],{"class":112},[84,802,297],{"class":108},[84,804,659],{"class":104},[84,806,807],{"class":108},"(()",[84,809,119],{"class":108},[84,811,812],{"class":112}," JSON",[84,814,254],{"class":108},[84,816,817],{"class":104},"stringify",[84,819,381],{"class":108},[84,821,823,826,828,830,833,835],{"class":86,"line":822},23,[84,824,825],{"class":386}," highlight",[84,827,155],{"class":108},[84,829,152],{"class":144},[84,831,832],{"class":148},"#0000ff",[84,834,152],{"class":144},[84,836,165],{"class":108},[84,838,840,843,845,847],{"class":86,"line":839},24,[84,841,842],{"class":386}," nav",[84,844,155],{"class":108},[84,846,203],{"class":97},[84,848,165],{"class":108},[84,850,852,855,857,859],{"class":86,"line":851},25,[84,853,854],{"class":386}," resize",[84,856,155],{"class":108},[84,858,203],{"class":97},[84,860,165],{"class":108},[84,862,864,867,869,871,874,876],{"class":86,"line":863},26,[84,865,866],{"class":386}," toolbar",[84,868,155],{"class":108},[84,870,152],{"class":144},[84,872,873],{"class":148},"zoom layers lightbox",[84,875,152],{"class":144},[84,877,165],{"class":108},[84,879,881,884,886,888,890],{"class":86,"line":880},27,[84,882,883],{"class":386}," xml",[84,885,155],{"class":108},[84,887,688],{"class":112},[84,889,254],{"class":108},[84,891,892],{"class":112},"value\n",[84,894,896],{"class":86,"line":895},28,[84,897,898],{"class":108},"}))\n",[84,900,902,904,906],{"class":86,"line":901},29,[84,903,616],{"class":108},[84,905,631],{"class":97},[84,907,531],{"class":108},[17,909,910],{},[20,911,912],{},"必要なスクリプト:",[74,914,916],{"className":76,"code":915,"language":78,"meta":79,"style":79},"// plugins/drawio-viewer.client.ts\nexport default defineNuxtPlugin(() => {\n if (process.client) {\n const script = document.createElement('script')\n script.src = 'https://viewer.diagrams.net/js/viewer-static.min.js'\n script.async = true\n document.head.appendChild(script)\n }\n})\n",[81,917,918,923,938,956,983,1002,1015,1036,1040],{"__ignoreMap":79},[84,919,920],{"class":86,"line":87},[84,921,922],{"class":90},"// plugins/drawio-viewer.client.ts\n",[84,924,925,927,929,932,934,936],{"class":86,"line":94},[84,926,98],{"class":97},[84,928,101],{"class":97},[84,930,931],{"class":104}," defineNuxtPlugin",[84,933,807],{"class":108},[84,935,119],{"class":108},[84,937,122],{"class":108},[84,939,940,942,944,947,949,952,954],{"class":86,"line":125},[84,941,246],{"class":97},[84,943,249],{"class":108},[84,945,946],{"class":112},"process",[84,948,254],{"class":108},[84,950,951],{"class":112},"client",[84,953,116],{"class":108},[84,955,122],{"class":108},[84,957,958,961,963,965,968,970,973,975,977,979,981],{"class":86,"line":141},[84,959,960],{"class":260}," const ",[84,962,631],{"class":112},[84,964,297],{"class":108},[84,966,967],{"class":112}," document",[84,969,254],{"class":108},[84,971,972],{"class":104},"createElement",[84,974,131],{"class":108},[84,976,152],{"class":144},[84,978,631],{"class":148},[84,980,152],{"class":144},[84,982,701],{"class":108},[84,984,985,988,990,993,995,997,1000],{"class":86,"line":168},[84,986,987],{"class":112}," script",[84,989,254],{"class":108},[84,991,992],{"class":112},"src",[84,994,297],{"class":108},[84,996,264],{"class":144},[84,998,999],{"class":148},"https://viewer.diagrams.net/js/viewer-static.min.js",[84,1001,329],{"class":144},[84,1003,1004,1006,1008,1010,1012],{"class":86,"line":189},[84,1005,987],{"class":112},[84,1007,254],{"class":108},[84,1009,722],{"class":112},[84,1011,297],{"class":108},[84,1013,1014],{"class":97}," true\n",[84,1016,1017,1020,1022,1025,1027,1030,1032,1034],{"class":86,"line":210},[84,1018,1019],{"class":112}," document",[84,1021,254],{"class":108},[84,1023,1024],{"class":112},"head",[84,1026,254],{"class":108},[84,1028,1029],{"class":104},"appendChild",[84,1031,131],{"class":108},[84,1033,631],{"class":112},[84,1035,701],{"class":108},[84,1037,1038],{"class":86,"line":230},[84,1039,348],{"class":108},[84,1041,1042],{"class":86,"line":236},[84,1043,354],{"class":108},[17,1045,1046,1048,1049,1051],{},[20,1047,498],{}," CORSの問題が一切発生しない、サーバー設定不要、シングルファイルで完結\n",[20,1050,502],{}," 大きなファイルには不向き（10MB超は避けるべき）、ファイル更新時に再エンコードが必要",[61,1053,1055],{"id":1054},"解決策3-iframe-embed-modeの使用フル機能","解決策3: iframe embed modeの使用（フル機能）",[17,1057,1058,1059,1062],{},"viewer.diagrams.netの代わりに",[20,1060,1061],{},"embed.diagrams.net","を使用します。これはpostMessageプロトコルでファイルを渡すため、CORS問題が軽減されます。",[74,1064,1066],{"className":516,"code":1065,"language":518,"meta":79,"style":79},"\u003Ctemplate>\n \u003Cdiv class=\"drawio-editor-container\">\n \u003CClientOnly>\n \u003Ciframe\n ref=\"editorIframe\"\n :src=\"embedUrl\"\n class=\"drawio-iframe\"\n frameborder=\"0\"\n style=\"width:100%; height:600px;\"\n />\n \u003C/ClientOnly>\n \u003C/div>\n\u003C/template>\n\n\u003Cscript setup lang=\"ts\">\nimport { ref, computed, onMounted, onUnmounted } from 'vue'\n\nconst props = defineProps\u003C{\n diagramPath: string\n}>()\n\nconst editorIframe = ref\u003CHTMLIFrameElement | null>(null)\nconst isInitialized = ref(false)\n\nconst embedUrl = computed(() => {\n const params = new URLSearchParams({\n embed: '1',\n proto: 'json',\n spin: '1',\n ui: 'atlas'\n })\n return `https://embed.diagrams.net/?${params.toString()}`\n})\n\nconst handleMessage = async (event: MessageEvent) => {\n if (!event.origin.includes('diagrams.net')) return\n\n try {\n const msg = JSON.parse(event.data)\n\n if (msg.event === 'init') {\n // 初期化完了、ファイルを読み込む\n isInitialized.value = true\n\n const response = await fetch(props.diagramPath)\n const xml = await response.text()\n\n editorIframe.value?.contentWindow?.postMessage(\n JSON.stringify({\n action: 'load',\n xml: xml,\n autosave: 1\n }),\n '*'\n )\n }\n\n if (msg.event === 'save') {\n console.log('Diagram saved:', msg.xml)\n // ここでバックエンドに保存\n }\n } catch (error) {\n console.error('Error handling message:', error)\n }\n}\n\nonMounted(() => {\n window.addEventListener('message', handleMessage)\n})\n\nonUnmounted(() => {\n window.removeEventListener('message', handleMessage)\n})\n\u003C/script>\n\n\u003Cstyle scoped>\n.drawio-iframe {\n border: 1px solid #e0e0e0;\n border-radius: 4px;\n}\n\u003C/style>\n",[81,1067,1068,1076,1097,1105,1113,1127,1141,1155,1169,1183,1190,1199,1207,1215,1219,1239,1270,1274,1289,1300,1305,1309,1338,1356,1360,1376,1393,1409,1425,1440,1455,1460,1491,1496,1501,1529,1566,1571,1579,1607,1612,1640,1646,1660,1665,1690,1710,1715,1739,1751,1768,1780,1791,1797,1806,1812,1817,1822,1848,1879,1885,1890,1908,1934,1939,1945,1950,1961,1988,1993,1998,2010,2034,2039,2048,2053,2066,2075,2103,2118,2123],{"__ignoreMap":79},[84,1069,1070,1072,1074],{"class":86,"line":87},[84,1071,525],{"class":108},[84,1073,528],{"class":97},[84,1075,531],{"class":108},[84,1077,1078,1080,1083,1086,1088,1090,1093,1095],{"class":86,"line":94},[84,1079,536],{"class":108},[84,1081,1082],{"class":97},"div",[84,1084,1085],{"class":112}," class",[84,1087,557],{"class":108},[84,1089,560],{"class":144},[84,1091,1092],{"class":148},"drawio-editor-container",[84,1094,560],{"class":144},[84,1096,531],{"class":108},[84,1098,1099,1101,1103],{"class":86,"line":125},[84,1100,546],{"class":108},[84,1102,539],{"class":97},[84,1104,531],{"class":108},[84,1106,1107,1110],{"class":86,"line":141},[84,1108,1109],{"class":108}," \u003C",[84,1111,1112],{"class":97},"iframe\n",[84,1114,1115,1118,1120,1122,1125],{"class":86,"line":168},[84,1116,1117],{"class":112}," ref",[84,1119,557],{"class":108},[84,1121,560],{"class":144},[84,1123,1124],{"class":148},"editorIframe",[84,1126,566],{"class":144},[84,1128,1129,1132,1134,1136,1139],{"class":86,"line":189},[84,1130,1131],{"class":112}," :src",[84,1133,557],{"class":108},[84,1135,560],{"class":144},[84,1137,1138],{"class":148},"embedUrl",[84,1140,566],{"class":144},[84,1142,1143,1146,1148,1150,1153],{"class":86,"line":210},[84,1144,1145],{"class":112}," class",[84,1147,557],{"class":108},[84,1149,560],{"class":144},[84,1151,1152],{"class":148},"drawio-iframe",[84,1154,566],{"class":144},[84,1156,1157,1160,1162,1164,1167],{"class":86,"line":230},[84,1158,1159],{"class":112}," frameborder",[84,1161,557],{"class":108},[84,1163,560],{"class":144},[84,1165,1166],{"class":148},"0",[84,1168,566],{"class":144},[84,1170,1171,1174,1176,1178,1181],{"class":86,"line":236},[84,1172,1173],{"class":112}," style",[84,1175,557],{"class":108},[84,1177,560],{"class":144},[84,1179,1180],{"class":148},"width:100%; height:600px;",[84,1182,566],{"class":144},[84,1184,1185,1188],{"class":86,"line":243},[84,1186,1187],{"class":599}," /",[84,1189,531],{"class":108},[84,1191,1192,1195,1197],{"class":86,"line":276},[84,1193,1194],{"class":108}," \u003C/",[84,1196,539],{"class":97},[84,1198,531],{"class":108},[84,1200,1201,1203,1205],{"class":86,"line":304},[84,1202,607],{"class":108},[84,1204,1082],{"class":97},[84,1206,531],{"class":108},[84,1208,1209,1211,1213],{"class":86,"line":332},[84,1210,616],{"class":108},[84,1212,528],{"class":97},[84,1214,531],{"class":108},[84,1216,1217],{"class":86,"line":345},[84,1218,240],{"emptyLinePlaceholder":239},[84,1220,1221,1223,1225,1227,1229,1231,1233,1235,1237],{"class":86,"line":351},[84,1222,525],{"class":108},[84,1224,631],{"class":97},[84,1226,634],{"class":112},[84,1228,637],{"class":112},[84,1230,557],{"class":108},[84,1232,560],{"class":144},[84,1234,644],{"class":148},[84,1236,560],{"class":144},[84,1238,531],{"class":108},[84,1240,1241,1243,1245,1247,1249,1251,1253,1255,1257,1260,1262,1264,1266,1268],{"class":86,"line":708},[84,1242,653],{"class":97},[84,1244,656],{"class":108},[84,1246,693],{"class":112},[84,1248,136],{"class":108},[84,1250,659],{"class":112},[84,1252,136],{"class":108},[84,1254,664],{"class":112},[84,1256,136],{"class":108},[84,1258,1259],{"class":112}," onUnmounted",[84,1261,667],{"class":108},[84,1263,670],{"class":97},[84,1265,264],{"class":144},[84,1267,518],{"class":148},[84,1269,329],{"class":144},[84,1271,1272],{"class":86,"line":714},[84,1273,240],{"emptyLinePlaceholder":239},[84,1275,1276,1278,1281,1283,1286],{"class":86,"line":732},[84,1277,685],{"class":260},[84,1279,1280],{"class":112},"props",[84,1282,297],{"class":108},[84,1284,1285],{"class":104}," defineProps",[84,1287,1288],{"class":108},"\u003C{\n",[84,1290,1291,1294,1296],{"class":86,"line":760},[84,1292,1293],{"class":112}," diagramPath",[84,1295,155],{"class":108},[84,1297,1299],{"class":1298},"sSkh3","string\n",[84,1301,1302],{"class":86,"line":786},[84,1303,1304],{"class":108},"}>()\n",[84,1306,1307],{"class":86,"line":791},[84,1308,240],{"emptyLinePlaceholder":239},[84,1310,1311,1313,1315,1317,1319,1321,1324,1327,1330,1333,1336],{"class":86,"line":796},[84,1312,685],{"class":260},[84,1314,1124],{"class":112},[84,1316,297],{"class":108},[84,1318,693],{"class":104},[84,1320,525],{"class":108},[84,1322,1323],{"class":1298},"HTMLIFrameElement",[84,1325,1326],{"class":108}," |",[84,1328,1329],{"class":260}," null",[84,1331,1332],{"class":108},">(",[84,1334,1335],{"class":260},"null",[84,1337,701],{"class":108},[84,1339,1340,1342,1345,1347,1349,1351,1354],{"class":86,"line":822},[84,1341,685],{"class":260},[84,1343,1344],{"class":112},"isInitialized",[84,1346,297],{"class":108},[84,1348,693],{"class":104},[84,1350,131],{"class":108},[84,1352,1353],{"class":97},"false",[84,1355,701],{"class":108},[84,1357,1358],{"class":86,"line":839},[84,1359,240],{"emptyLinePlaceholder":239},[84,1361,1362,1364,1366,1368,1370,1372,1374],{"class":86,"line":851},[84,1363,685],{"class":260},[84,1365,1138],{"class":112},[84,1367,297],{"class":108},[84,1369,659],{"class":104},[84,1371,807],{"class":108},[84,1373,119],{"class":108},[84,1375,122],{"class":108},[84,1377,1378,1380,1383,1385,1388,1391],{"class":86,"line":863},[84,1379,735],{"class":260},[84,1381,1382],{"class":112},"params",[84,1384,297],{"class":108},[84,1386,1387],{"class":260}," new ",[84,1389,1390],{"class":104},"URLSearchParams",[84,1392,381],{"class":108},[84,1394,1395,1398,1400,1402,1405,1407],{"class":86,"line":880},[84,1396,1397],{"class":386}," embed",[84,1399,155],{"class":108},[84,1401,152],{"class":144},[84,1403,1404],{"class":148},"1",[84,1406,152],{"class":144},[84,1408,165],{"class":108},[84,1410,1411,1414,1416,1418,1421,1423],{"class":86,"line":895},[84,1412,1413],{"class":386}," proto",[84,1415,155],{"class":108},[84,1417,152],{"class":144},[84,1419,1420],{"class":148},"json",[84,1422,152],{"class":144},[84,1424,165],{"class":108},[84,1426,1427,1430,1432,1434,1436,1438],{"class":86,"line":901},[84,1428,1429],{"class":386}," spin",[84,1431,155],{"class":108},[84,1433,152],{"class":144},[84,1435,1404],{"class":148},[84,1437,152],{"class":144},[84,1439,165],{"class":108},[84,1441,1443,1446,1448,1450,1453],{"class":86,"line":1442},30,[84,1444,1445],{"class":386}," ui",[84,1447,155],{"class":108},[84,1449,152],{"class":144},[84,1451,1452],{"class":148},"atlas",[84,1454,329],{"class":144},[84,1456,1458],{"class":86,"line":1457},31,[84,1459,233],{"class":108},[84,1461,1463,1466,1469,1472,1475,1477,1479,1482,1485,1488],{"class":86,"line":1462},32,[84,1464,1465],{"class":97}," return",[84,1467,1468],{"class":144}," `",[84,1470,1471],{"class":148},"https://embed.diagrams.net/?",[84,1473,1474],{"class":97},"${",[84,1476,1382],{"class":148},[84,1478,254],{"class":108},[84,1480,1481],{"class":104},"toString",[84,1483,1484],{"class":108},"()",[84,1486,1487],{"class":97},"}",[84,1489,1490],{"class":144},"`\n",[84,1492,1494],{"class":86,"line":1493},33,[84,1495,354],{"class":108},[84,1497,1499],{"class":86,"line":1498},34,[84,1500,240],{"emptyLinePlaceholder":239},[84,1502,1504,1506,1509,1511,1514,1516,1518,1520,1523,1525,1527],{"class":86,"line":1503},35,[84,1505,685],{"class":260},[84,1507,1508],{"class":104},"handleMessage",[84,1510,297],{"class":108},[84,1512,1513],{"class":260}," async ",[84,1515,131],{"class":108},[84,1517,113],{"class":112},[84,1519,155],{"class":108},[84,1521,1522],{"class":1298},"MessageEvent",[84,1524,116],{"class":108},[84,1526,119],{"class":108},[84,1528,122],{"class":108},[84,1530,1532,1534,1536,1539,1541,1543,1546,1548,1551,1553,1555,1558,1560,1563],{"class":86,"line":1531},36,[84,1533,246],{"class":97},[84,1535,249],{"class":108},[84,1537,1538],{"class":260},"!",[84,1540,113],{"class":112},[84,1542,254],{"class":108},[84,1544,1545],{"class":112},"origin",[84,1547,254],{"class":108},[84,1549,1550],{"class":104},"includes",[84,1552,131],{"class":108},[84,1554,152],{"class":144},[84,1556,1557],{"class":148},"diagrams.net",[84,1559,152],{"class":144},[84,1561,1562],{"class":108},"))",[84,1564,1565],{"class":97}," return\n",[84,1567,1569],{"class":86,"line":1568},37,[84,1570,240],{"emptyLinePlaceholder":239},[84,1572,1574,1577],{"class":86,"line":1573},38,[84,1575,1576],{"class":97}," try",[84,1578,122],{"class":108},[84,1580,1582,1584,1587,1589,1591,1593,1596,1598,1600,1602,1605],{"class":86,"line":1581},39,[84,1583,960],{"class":260},[84,1585,1586],{"class":112},"msg",[84,1588,297],{"class":108},[84,1590,812],{"class":112},[84,1592,254],{"class":108},[84,1594,1595],{"class":104},"parse",[84,1597,131],{"class":108},[84,1599,113],{"class":112},[84,1601,254],{"class":108},[84,1603,1604],{"class":112},"data",[84,1606,701],{"class":108},[84,1608,1610],{"class":86,"line":1609},40,[84,1611,240],{"emptyLinePlaceholder":239},[84,1613,1615,1618,1620,1622,1624,1626,1629,1631,1634,1636,1638],{"class":86,"line":1614},41,[84,1616,1617],{"class":97}," if",[84,1619,249],{"class":108},[84,1621,1586],{"class":112},[84,1623,254],{"class":108},[84,1625,113],{"class":112},[84,1627,1628],{"class":260}," === ",[84,1630,152],{"class":144},[84,1632,1633],{"class":148},"init",[84,1635,152],{"class":144},[84,1637,116],{"class":108},[84,1639,122],{"class":108},[84,1641,1643],{"class":86,"line":1642},42,[84,1644,1645],{"class":90}," // 初期化完了、ファイルを読み込む\n",[84,1647,1649,1652,1654,1656,1658],{"class":86,"line":1648},43,[84,1650,1651],{"class":112}," isInitialized",[84,1653,254],{"class":108},[84,1655,768],{"class":112},[84,1657,297],{"class":108},[84,1659,1014],{"class":97},[84,1661,1663],{"class":86,"line":1662},44,[84,1664,240],{"emptyLinePlaceholder":239},[84,1666,1668,1671,1673,1675,1677,1679,1681,1683,1685,1688],{"class":86,"line":1667},45,[84,1669,1670],{"class":260}," const ",[84,1672,738],{"class":112},[84,1674,297],{"class":108},[84,1676,743],{"class":97},[84,1678,746],{"class":104},[84,1680,131],{"class":108},[84,1682,1280],{"class":112},[84,1684,254],{"class":108},[84,1686,1687],{"class":112},"diagramPath",[84,1689,701],{"class":108},[84,1691,1693,1695,1698,1700,1702,1704,1706,1708],{"class":86,"line":1692},46,[84,1694,1670],{"class":260},[84,1696,1697],{"class":112},"xml",[84,1699,297],{"class":108},[84,1701,743],{"class":97},[84,1703,775],{"class":112},[84,1705,254],{"class":108},[84,1707,780],{"class":104},[84,1709,783],{"class":108},[84,1711,1713],{"class":86,"line":1712},47,[84,1714,240],{"emptyLinePlaceholder":239},[84,1716,1718,1721,1723,1725,1728,1731,1733,1736],{"class":86,"line":1717},48,[84,1719,1720],{"class":112}," editorIframe",[84,1722,254],{"class":108},[84,1724,768],{"class":112},[84,1726,1727],{"class":108},"?.",[84,1729,1730],{"class":112},"contentWindow",[84,1732,1727],{"class":108},[84,1734,1735],{"class":104},"postMessage",[84,1737,1738],{"class":108},"(\n",[84,1740,1742,1745,1747,1749],{"class":86,"line":1741},49,[84,1743,1744],{"class":112}," JSON",[84,1746,254],{"class":108},[84,1748,817],{"class":104},[84,1750,381],{"class":108},[84,1752,1754,1757,1759,1761,1764,1766],{"class":86,"line":1753},50,[84,1755,1756],{"class":386}," action",[84,1758,155],{"class":108},[84,1760,152],{"class":144},[84,1762,1763],{"class":148},"load",[84,1765,152],{"class":144},[84,1767,165],{"class":108},[84,1769,1771,1774,1776,1778],{"class":86,"line":1770},51,[84,1772,1773],{"class":386}," xml",[84,1775,155],{"class":108},[84,1777,1697],{"class":112},[84,1779,165],{"class":108},[84,1781,1783,1786,1788],{"class":86,"line":1782},52,[84,1784,1785],{"class":386}," autosave",[84,1787,155],{"class":108},[84,1789,1790],{"class":300},"1\n",[84,1792,1794],{"class":86,"line":1793},53,[84,1795,1796],{"class":108}," }),\n",[84,1798,1800,1802,1804],{"class":86,"line":1799},54,[84,1801,424],{"class":144},[84,1803,182],{"class":148},[84,1805,329],{"class":144},[84,1807,1809],{"class":86,"line":1808},55,[84,1810,1811],{"class":108}," )\n",[84,1813,1815],{"class":86,"line":1814},56,[84,1816,485],{"class":108},[84,1818,1820],{"class":86,"line":1819},57,[84,1821,240],{"emptyLinePlaceholder":239},[84,1823,1825,1827,1829,1831,1833,1835,1837,1839,1842,1844,1846],{"class":86,"line":1824},58,[84,1826,1617],{"class":97},[84,1828,249],{"class":108},[84,1830,1586],{"class":112},[84,1832,254],{"class":108},[84,1834,113],{"class":112},[84,1836,1628],{"class":260},[84,1838,152],{"class":144},[84,1840,1841],{"class":148},"save",[84,1843,152],{"class":144},[84,1845,116],{"class":108},[84,1847,122],{"class":108},[84,1849,1851,1854,1856,1859,1861,1863,1866,1868,1870,1873,1875,1877],{"class":86,"line":1850},59,[84,1852,1853],{"class":112}," console",[84,1855,254],{"class":108},[84,1857,1858],{"class":104},"log",[84,1860,131],{"class":108},[84,1862,152],{"class":144},[84,1864,1865],{"class":148},"Diagram saved:",[84,1867,152],{"class":144},[84,1869,136],{"class":108},[84,1871,1872],{"class":112}," msg",[84,1874,254],{"class":108},[84,1876,1697],{"class":112},[84,1878,701],{"class":108},[84,1880,1882],{"class":86,"line":1881},60,[84,1883,1884],{"class":90}," // ここでバックエンドに保存\n",[84,1886,1888],{"class":86,"line":1887},61,[84,1889,485],{"class":108},[84,1891,1893,1896,1899,1901,1904,1906],{"class":86,"line":1892},62,[84,1894,1895],{"class":108}," }",[84,1897,1898],{"class":97}," catch",[84,1900,249],{"class":108},[84,1902,1903],{"class":112},"error",[84,1905,116],{"class":108},[84,1907,122],{"class":108},[84,1909,1911,1914,1916,1918,1920,1922,1925,1927,1929,1932],{"class":86,"line":1910},63,[84,1912,1913],{"class":112}," console",[84,1915,254],{"class":108},[84,1917,1903],{"class":104},[84,1919,131],{"class":108},[84,1921,152],{"class":144},[84,1923,1924],{"class":148},"Error handling message:",[84,1926,152],{"class":144},[84,1928,136],{"class":108},[84,1930,1931],{"class":112}," error",[84,1933,701],{"class":108},[84,1935,1937],{"class":86,"line":1936},64,[84,1938,348],{"class":108},[84,1940,1942],{"class":86,"line":1941},65,[84,1943,1944],{"class":108},"}\n",[84,1946,1948],{"class":86,"line":1947},66,[84,1949,240],{"emptyLinePlaceholder":239},[84,1951,1953,1955,1957,1959],{"class":86,"line":1952},67,[84,1954,717],{"class":104},[84,1956,807],{"class":108},[84,1958,119],{"class":108},[84,1960,122],{"class":108},[84,1962,1964,1967,1969,1972,1974,1976,1979,1981,1983,1986],{"class":86,"line":1963},68,[84,1965,1966],{"class":112}," window",[84,1968,254],{"class":108},[84,1970,1971],{"class":104},"addEventListener",[84,1973,131],{"class":108},[84,1975,152],{"class":144},[84,1977,1978],{"class":148},"message",[84,1980,152],{"class":144},[84,1982,136],{"class":108},[84,1984,1985],{"class":112}," handleMessage",[84,1987,701],{"class":108},[84,1989,1991],{"class":86,"line":1990},69,[84,1992,354],{"class":108},[84,1994,1996],{"class":86,"line":1995},70,[84,1997,240],{"emptyLinePlaceholder":239},[84,1999,2001,2004,2006,2008],{"class":86,"line":2000},71,[84,2002,2003],{"class":104},"onUnmounted",[84,2005,807],{"class":108},[84,2007,119],{"class":108},[84,2009,122],{"class":108},[84,2011,2013,2015,2017,2020,2022,2024,2026,2028,2030,2032],{"class":86,"line":2012},72,[84,2014,1966],{"class":112},[84,2016,254],{"class":108},[84,2018,2019],{"class":104},"removeEventListener",[84,2021,131],{"class":108},[84,2023,152],{"class":144},[84,2025,1978],{"class":148},[84,2027,152],{"class":144},[84,2029,136],{"class":108},[84,2031,1985],{"class":112},[84,2033,701],{"class":108},[84,2035,2037],{"class":86,"line":2036},73,[84,2038,354],{"class":108},[84,2040,2042,2044,2046],{"class":86,"line":2041},74,[84,2043,616],{"class":108},[84,2045,631],{"class":97},[84,2047,531],{"class":108},[84,2049,2051],{"class":86,"line":2050},75,[84,2052,240],{"emptyLinePlaceholder":239},[84,2054,2056,2058,2061,2064],{"class":86,"line":2055},76,[84,2057,525],{"class":108},[84,2059,2060],{"class":97},"style",[84,2062,2063],{"class":112}," scoped",[84,2065,531],{"class":108},[84,2067,2069,2071,2073],{"class":86,"line":2068},77,[84,2070,254],{"class":108},[84,2072,1152],{"class":112},[84,2074,122],{"class":108},[84,2076,2078,2081,2084,2087,2090,2094,2097,2100],{"class":86,"line":2077},78,[84,2079,2080],{"class":386}," border",[84,2082,2083],{"class":108},":",[84,2085,2086],{"class":300}," 1",[84,2088,2089],{"class":260},"px",[84,2091,2093],{"class":2092},"snbK4"," solid",[84,2095,2096],{"class":108}," #",[84,2098,2099],{"class":2092},"e0e0e0",[84,2101,2102],{"class":108},";\n",[84,2104,2106,2109,2111,2114,2116],{"class":86,"line":2105},79,[84,2107,2108],{"class":386}," border-radius",[84,2110,2083],{"class":108},[84,2112,2113],{"class":300}," 4",[84,2115,2089],{"class":260},[84,2117,2102],{"class":108},[84,2119,2121],{"class":86,"line":2120},80,[84,2122,1944],{"class":108},[84,2124,2126,2128,2130],{"class":86,"line":2125},81,[84,2127,616],{"class":108},[84,2129,2060],{"class":97},[84,2131,531],{"class":108},[17,2133,2134,2136,2137,2139],{},[20,2135,498],{}," フル編集機能、CORSの影響を受けにくい、常に最新のDraw.io機能が利用可能\n",[20,2138,502],{}," iframe通信の複雑さ、オンライン接続が必要（ただしセルフホスト可能）",[61,2141,2143],{"id":2142},"解決策4-nuxt-securityモジュールの使用","解決策4: nuxt-securityモジュールの使用",[17,2145,2146],{},"包括的なセキュリティ設定とCORS処理を一括管理できます。",[74,2148,2152],{"className":2149,"code":2150,"language":2151,"meta":79,"style":79},"language-bash shiki shiki-themes vitesse-light vitesse-light","npm install nuxt-security\n","bash",[81,2153,2154],{"__ignoreMap":79},[84,2155,2156,2159,2162],{"class":86,"line":87},[84,2157,2158],{"class":104},"npm",[84,2160,2161],{"class":148}," install",[84,2163,2164],{"class":148}," nuxt-security\n",[74,2166,2168],{"className":76,"code":2167,"language":78,"meta":79,"style":79},"// nuxt.config.ts\nexport default defineNuxtConfig({\n modules: ['nuxt-security'],\n\n security: {\n corsHandler: {\n origin: '*', // 本番では具体的なオリジンを指定\n methods: ['GET', 'OPTIONS'],\n credentials: false,\n }\n },\n\n routeRules: {\n '/api/**': {\n cors: true\n }\n }\n})\n",[81,2169,2170,2174,2184,2202,2206,2213,2220,2239,2263,2274,2278,2283,2287,2293,2304,2313,2317,2321],{"__ignoreMap":79},[84,2171,2172],{"class":86,"line":87},[84,2173,369],{"class":90},[84,2175,2176,2178,2180,2182],{"class":86,"line":94},[84,2177,98],{"class":97},[84,2179,101],{"class":97},[84,2181,378],{"class":104},[84,2183,381],{"class":108},[84,2185,2186,2189,2192,2194,2197,2199],{"class":86,"line":125},[84,2187,2188],{"class":386}," modules",[84,2190,2191],{"class":108},": [",[84,2193,152],{"class":144},[84,2195,2196],{"class":148},"nuxt-security",[84,2198,152],{"class":144},[84,2200,2201],{"class":108},"],\n",[84,2203,2204],{"class":86,"line":141},[84,2205,240],{"emptyLinePlaceholder":239},[84,2207,2208,2211],{"class":86,"line":168},[84,2209,2210],{"class":386}," security",[84,2212,390],{"class":108},[84,2214,2215,2218],{"class":86,"line":189},[84,2216,2217],{"class":386}," corsHandler",[84,2219,390],{"class":108},[84,2221,2222,2225,2227,2229,2231,2233,2236],{"class":86,"line":210},[84,2223,2224],{"class":386}," origin",[84,2226,155],{"class":108},[84,2228,152],{"class":144},[84,2230,182],{"class":148},[84,2232,152],{"class":144},[84,2234,2235],{"class":108},", ",[84,2237,2238],{"class":90},"// 本番では具体的なオリジンを指定\n",[84,2240,2241,2244,2246,2248,2251,2253,2255,2257,2259,2261],{"class":86,"line":230},[84,2242,2243],{"class":386}," methods",[84,2245,2191],{"class":108},[84,2247,152],{"class":144},[84,2249,2250],{"class":148},"GET",[84,2252,152],{"class":144},[84,2254,2235],{"class":108},[84,2256,152],{"class":144},[84,2258,267],{"class":148},[84,2260,152],{"class":144},[84,2262,2201],{"class":108},[84,2264,2265,2268,2270,2272],{"class":86,"line":236},[84,2266,2267],{"class":386}," credentials",[84,2269,155],{"class":108},[84,2271,1353],{"class":97},[84,2273,165],{"class":108},[84,2275,2276],{"class":86,"line":243},[84,2277,485],{"class":108},[84,2279,2280],{"class":86,"line":276},[84,2281,2282],{"class":108}," },\n",[84,2284,2285],{"class":86,"line":304},[84,2286,240],{"emptyLinePlaceholder":239},[84,2288,2289,2291],{"class":86,"line":332},[84,2290,387],{"class":386},[84,2292,390],{"class":108},[84,2294,2295,2297,2300,2302],{"class":86,"line":345},[84,2296,145],{"class":144},[84,2298,2299],{"class":148},"/api/**",[84,2301,152],{"class":144},[84,2303,390],{"class":108},[84,2305,2306,2308,2310],{"class":86,"line":351},[84,2307,406],{"class":386},[84,2309,155],{"class":108},[84,2311,2312],{"class":97},"true\n",[84,2314,2315],{"class":86,"line":708},[84,2316,485],{"class":108},[84,2318,2319],{"class":86,"line":714},[84,2320,348],{"class":108},[84,2322,2323],{"class":86,"line":732},[84,2324,354],{"class":108},[17,2326,2327,2329,2330,2332],{},[20,2328,498],{}," 包括的なセキュリティ設定、プリフライトの自動処理、本番環境向け\n",[20,2331,502],{}," 追加の依存関係、モジュール固有の学習コスト",[61,2334,2336],{"id":2335},"解決策5-開発用プロキシと本番用cors設定の併用","解決策5: 開発用プロキシと本番用CORS設定の併用",[17,2338,2339],{},"開発環境と本番環境で異なる設定を使用する最適化された方法です。",[74,2341,2343],{"className":76,"code":2342,"language":78,"meta":79,"style":79},"// nuxt.config.ts\nexport default defineNuxtConfig({\n // 開発環境: プロキシでCORSを回避\n $development: {\n routeRules: {\n '/api/diagrams/**': {\n proxy: { to: 'http://localhost:9000/diagrams/**' }\n }\n }\n },\n\n // 本番環境: CORSヘッダー設定\n $production: {\n routeRules: {\n '/api/diagrams/**': {\n cors: true,\n headers: {\n 'Access-Control-Allow-Origin': '*',\n 'Access-Control-Allow-Methods': 'GET,OPTIONS',\n 'Cache-Control': 'public, max-age=3600',\n }\n }\n }\n },\n\n // 静的ファイルの配信設定\n nitro: {\n publicAssets: [\n {\n baseURL: '/diagrams',\n dir: 'public/diagrams',\n maxAge: 60 * 60 * 24 * 7 // 7日間キャッシュ\n }\n ]\n }\n})\n",[81,2344,2345,2349,2359,2364,2371,2378,2390,2413,2417,2421,2425,2429,2434,2441,2447,2457,2468,2475,2494,2512,2532,2537,2541,2545,2549,2553,2558,2565,2573,2578,2594,2610,2639,2643,2648,2652],{"__ignoreMap":79},[84,2346,2347],{"class":86,"line":87},[84,2348,369],{"class":90},[84,2350,2351,2353,2355,2357],{"class":86,"line":94},[84,2352,98],{"class":97},[84,2354,101],{"class":97},[84,2356,378],{"class":104},[84,2358,381],{"class":108},[84,2360,2361],{"class":86,"line":125},[84,2362,2363],{"class":90}," // 開発環境: プロキシでCORSを回避\n",[84,2365,2366,2369],{"class":86,"line":141},[84,2367,2368],{"class":386}," $development",[84,2370,390],{"class":108},[84,2372,2373,2376],{"class":86,"line":168},[84,2374,2375],{"class":386}," routeRules",[84,2377,390],{"class":108},[84,2379,2380,2383,2386,2388],{"class":86,"line":189},[84,2381,2382],{"class":144}," '",[84,2384,2385],{"class":148},"/api/diagrams/**",[84,2387,152],{"class":144},[84,2389,390],{"class":108},[84,2391,2392,2395,2398,2401,2403,2405,2408,2410],{"class":86,"line":210},[84,2393,2394],{"class":386}," proxy",[84,2396,2397],{"class":108},": { ",[84,2399,2400],{"class":386},"to",[84,2402,155],{"class":108},[84,2404,152],{"class":144},[84,2406,2407],{"class":148},"http://localhost:9000/diagrams/**",[84,2409,152],{"class":144},[84,2411,2412],{"class":108}," }\n",[84,2414,2415],{"class":86,"line":230},[84,2416,480],{"class":108},[84,2418,2419],{"class":86,"line":236},[84,2420,485],{"class":108},[84,2422,2423],{"class":86,"line":243},[84,2424,2282],{"class":108},[84,2426,2427],{"class":86,"line":276},[84,2428,240],{"emptyLinePlaceholder":239},[84,2430,2431],{"class":86,"line":304},[84,2432,2433],{"class":90}," // 本番環境: CORSヘッダー設定\n",[84,2435,2436,2439],{"class":86,"line":332},[84,2437,2438],{"class":386}," $production",[84,2440,390],{"class":108},[84,2442,2443,2445],{"class":86,"line":345},[84,2444,2375],{"class":386},[84,2446,390],{"class":108},[84,2448,2449,2451,2453,2455],{"class":86,"line":351},[84,2450,2382],{"class":144},[84,2452,2385],{"class":148},[84,2454,152],{"class":144},[84,2456,390],{"class":108},[84,2458,2459,2462,2464,2466],{"class":86,"line":708},[84,2460,2461],{"class":386}," cors",[84,2463,155],{"class":108},[84,2465,203],{"class":97},[84,2467,165],{"class":108},[84,2469,2470,2473],{"class":86,"line":714},[84,2471,2472],{"class":386}," headers",[84,2474,390],{"class":108},[84,2476,2477,2480,2482,2484,2486,2488,2490,2492],{"class":86,"line":732},[84,2478,2479],{"class":144}," '",[84,2481,173],{"class":148},[84,2483,152],{"class":144},[84,2485,155],{"class":108},[84,2487,152],{"class":144},[84,2489,182],{"class":148},[84,2491,152],{"class":144},[84,2493,165],{"class":108},[84,2495,2496,2498,2500,2502,2504,2506,2508,2510],{"class":86,"line":760},[84,2497,2479],{"class":144},[84,2499,149],{"class":148},[84,2501,152],{"class":144},[84,2503,155],{"class":108},[84,2505,152],{"class":144},[84,2507,453],{"class":148},[84,2509,152],{"class":144},[84,2511,165],{"class":108},[84,2513,2514,2516,2519,2521,2523,2525,2528,2530],{"class":86,"line":786},[84,2515,2479],{"class":144},[84,2517,2518],{"class":148},"Cache-Control",[84,2520,152],{"class":144},[84,2522,155],{"class":108},[84,2524,152],{"class":144},[84,2526,2527],{"class":148},"public, max-age=3600",[84,2529,152],{"class":144},[84,2531,165],{"class":108},[84,2533,2534],{"class":86,"line":791},[84,2535,2536],{"class":108}," }\n",[84,2538,2539],{"class":86,"line":796},[84,2540,480],{"class":108},[84,2542,2543],{"class":86,"line":822},[84,2544,485],{"class":108},[84,2546,2547],{"class":86,"line":839},[84,2548,2282],{"class":108},[84,2550,2551],{"class":86,"line":851},[84,2552,240],{"emptyLinePlaceholder":239},[84,2554,2555],{"class":86,"line":863},[84,2556,2557],{"class":90}," // 静的ファイルの配信設定\n",[84,2559,2560,2563],{"class":86,"line":880},[84,2561,2562],{"class":386}," nitro",[84,2564,390],{"class":108},[84,2566,2567,2570],{"class":86,"line":895},[84,2568,2569],{"class":386}," publicAssets",[84,2571,2572],{"class":108},": [\n",[84,2574,2575],{"class":86,"line":901},[84,2576,2577],{"class":108}," {\n",[84,2579,2580,2583,2585,2587,2590,2592],{"class":86,"line":1442},[84,2581,2582],{"class":386}," baseURL",[84,2584,155],{"class":108},[84,2586,152],{"class":144},[84,2588,2589],{"class":148},"/diagrams",[84,2591,152],{"class":144},[84,2593,165],{"class":108},[84,2595,2596,2599,2601,2603,2606,2608],{"class":86,"line":1457},[84,2597,2598],{"class":386}," dir",[84,2600,155],{"class":108},[84,2602,152],{"class":144},[84,2604,2605],{"class":148},"public/diagrams",[84,2607,152],{"class":144},[84,2609,165],{"class":108},[84,2611,2612,2615,2617,2620,2623,2626,2628,2631,2633,2636],{"class":86,"line":1462},[84,2613,2614],{"class":386}," maxAge",[84,2616,155],{"class":108},[84,2618,2619],{"class":300},"60",[84,2621,2622],{"class":260}," *",[84,2624,2625],{"class":300}," 60",[84,2627,2622],{"class":260},[84,2629,2630],{"class":300}," 24",[84,2632,2622],{"class":260},[84,2634,2635],{"class":300}," 7",[84,2637,2638],{"class":90}," // 7日間キャッシュ\n",[84,2640,2641],{"class":86,"line":1493},[84,2642,480],{"class":108},[84,2644,2645],{"class":86,"line":1498},[84,2646,2647],{"class":108}," ]\n",[84,2649,2650],{"class":86,"line":1503},[84,2651,348],{"class":108},[84,2653,2654],{"class":86,"line":1531},[84,2655,354],{"class":108},[17,2657,2658,2660,2661,2663],{},[20,2659,498],{}," 開発と本番で最適な設定、キャッシュ制御も含む\n",[20,2662,502],{}," 設定が複雑、環境ごとの管理が必要",[46,2665,2667],{"id":2666},"nuxt-3特有の考慮事項","Nuxt 3特有の考慮事項",[61,2669,2671],{"id":2670},"ssrとclientonlyの重要性","SSRとClientOnlyの重要性",[17,2673,2674,2675,2678,2679,2682],{},"Nuxt 3では、Draw.io関連のコンポーネントは",[20,2676,2677],{},"必ずClientOnlyでラップ","する必要があります。SSR時には",[81,2680,2681],{},"window","オブジェクトが存在せず、iframeも機能しないためです。",[74,2684,2686],{"className":516,"code":2685,"language":518,"meta":79,"style":79},"\u003Ctemplate>\n \u003CClientOnly fallback-tag=\"div\" fallback=\"図を読み込み中...\">\n \u003CDrawioViewer :src=\"diagramPath\" />\n \u003C/ClientOnly>\n\u003C/template>\n",[81,2687,2688,2696,2727,2748,2756],{"__ignoreMap":79},[84,2689,2690,2692,2694],{"class":86,"line":87},[84,2691,525],{"class":108},[84,2693,528],{"class":97},[84,2695,531],{"class":108},[84,2697,2698,2700,2702,2705,2707,2709,2711,2713,2716,2718,2720,2723,2725],{"class":86,"line":94},[84,2699,536],{"class":108},[84,2701,539],{"class":97},[84,2703,2704],{"class":112}," fallback-tag",[84,2706,557],{"class":108},[84,2708,560],{"class":144},[84,2710,1082],{"class":148},[84,2712,560],{"class":144},[84,2714,2715],{"class":112}," fallback",[84,2717,557],{"class":108},[84,2719,560],{"class":144},[84,2721,2722],{"class":148},"図を読み込み中...",[84,2724,560],{"class":144},[84,2726,531],{"class":108},[84,2728,2729,2731,2734,2737,2739,2741,2743,2745],{"class":86,"line":125},[84,2730,546],{"class":108},[84,2732,2733],{"class":97},"DrawioViewer",[84,2735,2736],{"class":112}," :src",[84,2738,557],{"class":108},[84,2740,560],{"class":144},[84,2742,1687],{"class":148},[84,2744,560],{"class":144},[84,2746,2747],{"class":108}," />\n",[84,2749,2750,2752,2754],{"class":86,"line":141},[84,2751,607],{"class":108},[84,2753,539],{"class":97},[84,2755,531],{"class":108},[84,2757,2758,2760,2762],{"class":86,"line":168},[84,2759,616],{"class":108},[84,2761,528],{"class":97},[84,2763,531],{"class":108},[17,2765,2766,2769,2770,2773,2774,2777],{},[20,2767,2768],{},"重要な注意点:"," ",[81,2771,2772],{},"\u003CClientOnly>","はレンダリングを防ぐだけで、",[20,2775,2776],{},"インポート文の実行は防げません","。ブラウザAPIに依存するライブラリは動的インポートが必要です。",[74,2779,2781],{"className":76,"code":2780,"language":78,"meta":79,"style":79},"// ❌ 間違い: インポート時にSSRでエラー\nimport DrawioLib from 'window-dependent-lib'\n\n// ✅ 正解: onMountedで動的インポート\nonMounted(async () => {\n const { default: DrawioLib } = await import('window-dependent-lib')\n // ライブラリを使用\n})\n",[81,2782,2783,2788,2804,2808,2813,2827,2859,2864],{"__ignoreMap":79},[84,2784,2785],{"class":86,"line":87},[84,2786,2787],{"class":90},"// ❌ 間違い: インポート時にSSRでエラー\n",[84,2789,2790,2792,2795,2797,2799,2802],{"class":86,"line":94},[84,2791,653],{"class":97},[84,2793,2794],{"class":112}," DrawioLib",[84,2796,670],{"class":97},[84,2798,264],{"class":144},[84,2800,2801],{"class":148},"window-dependent-lib",[84,2803,329],{"class":144},[84,2805,2806],{"class":86,"line":125},[84,2807,240],{"emptyLinePlaceholder":239},[84,2809,2810],{"class":86,"line":141},[84,2811,2812],{"class":90},"// ✅ 正解: onMountedで動的インポート\n",[84,2814,2815,2817,2819,2821,2823,2825],{"class":86,"line":168},[84,2816,717],{"class":104},[84,2818,131],{"class":108},[84,2820,722],{"class":260},[84,2822,725],{"class":108},[84,2824,119],{"class":108},[84,2826,122],{"class":108},[84,2828,2829,2831,2834,2836,2838,2840,2842,2844,2846,2849,2851,2853,2855,2857],{"class":86,"line":189},[84,2830,735],{"class":260},[84,2832,2833],{"class":108},"{",[84,2835,101],{"class":112},[84,2837,2083],{"class":108},[84,2839,2794],{"class":112},[84,2841,667],{"class":108},[84,2843,297],{"class":108},[84,2845,743],{"class":97},[84,2847,2848],{"class":260}," import",[84,2850,131],{"class":108},[84,2852,152],{"class":144},[84,2854,2801],{"class":148},[84,2856,152],{"class":144},[84,2858,701],{"class":108},[84,2860,2861],{"class":86,"line":210},[84,2862,2863],{"class":90}," // ライブラリを使用\n",[84,2865,2866],{"class":86,"line":230},[84,2867,354],{"class":108},[61,2869,2870],{"id":2870},"publicディレクトリの正しい使用方法",[17,2872,2873,2874,2877],{},"Draw.ioファイルは",[20,2875,2876],{},"publicディレクトリ","に配置します。assetsディレクトリではViteが処理してしまい不要なオーバーヘッドが発生します。",[74,2879,2883],{"className":2880,"code":2882,"language":780},[2881],"language-text","プロジェクト構造:\n/public\n /diagrams\n architecture.drawio\n flowchart.drawio\n/components\n DrawioViewer.vue\n",[81,2884,2882],{"__ignoreMap":79},[17,2886,2887],{},[20,2888,2889],{},"アクセス方法:",[74,2891,2893],{"className":516,"code":2892,"language":518,"meta":79,"style":79},"\u003C!-- ❌ 間違い: /publicは不要 -->\n\u003Ciframe src=\"/public/diagrams/architecture.drawio\" />\n\n\u003C!-- ✅ 正解: ルートから直接 -->\n\u003Ciframe src=\"/diagrams/architecture.drawio\" />\n",[81,2894,2895,2900,2921,2925,2930],{"__ignoreMap":79},[84,2896,2897],{"class":86,"line":87},[84,2898,2899],{"class":90},"\u003C!-- ❌ 間違い: /publicは不要 -->\n",[84,2901,2902,2904,2907,2910,2912,2914,2917,2919],{"class":86,"line":94},[84,2903,525],{"class":108},[84,2905,2906],{"class":97},"iframe",[84,2908,2909],{"class":112}," src",[84,2911,557],{"class":108},[84,2913,560],{"class":144},[84,2915,2916],{"class":148},"/public/diagrams/architecture.drawio",[84,2918,560],{"class":144},[84,2920,2747],{"class":108},[84,2922,2923],{"class":86,"line":125},[84,2924,240],{"emptyLinePlaceholder":239},[84,2926,2927],{"class":86,"line":141},[84,2928,2929],{"class":90},"\u003C!-- ✅ 正解: ルートから直接 -->\n",[84,2931,2932,2934,2936,2938,2940,2942,2944,2946],{"class":86,"line":168},[84,2933,525],{"class":108},[84,2935,2906],{"class":97},[84,2937,2909],{"class":112},[84,2939,557],{"class":108},[84,2941,560],{"class":144},[84,2943,753],{"class":148},[84,2945,560],{"class":144},[84,2947,2747],{"class":108},[61,2949,2950],{"id":2950},"動的インポートの戦略",[17,2952,2953,2954,2957],{},"Nuxt 3では、コンポーネントに",[81,2955,2956],{},"Lazy","プレフィックスを付けることで自動的にコード分割されます。",[74,2959,2961],{"className":516,"code":2960,"language":518,"meta":79,"style":79},"\u003Ctemplate>\n \u003Cbutton @click=\"showViewer = true\">図を表示\u003C/button>\n\n \u003CClientOnly>\n \u003C!-- クリック時のみロード -->\n \u003CLazyDrawioViewer v-if=\"showViewer\" :diagram=\"path\" />\n \u003C/ClientOnly>\n\u003C/template>\n\n\u003Cscript setup>\nconst showViewer = ref(false)\nconst path = '/diagrams/large-diagram.drawio'\n\u003C/script>\n",[81,2962,2963,2971,3003,3007,3015,3020,3053,3061,3069,3073,3083,3101,3117],{"__ignoreMap":79},[84,2964,2965,2967,2969],{"class":86,"line":87},[84,2966,525],{"class":108},[84,2968,528],{"class":97},[84,2970,531],{"class":108},[84,2972,2973,2975,2978,2981,2983,2985,2988,2990,2993,2997,2999,3001],{"class":86,"line":94},[84,2974,536],{"class":108},[84,2976,2977],{"class":97},"button",[84,2979,2980],{"class":112}," @click",[84,2982,557],{"class":108},[84,2984,560],{"class":144},[84,2986,2987],{"class":148},"showViewer = true",[84,2989,560],{"class":144},[84,2991,2992],{"class":108},">",[84,2994,2996],{"class":2995},"sG7-3","図を表示",[84,2998,616],{"class":108},[84,3000,2977],{"class":97},[84,3002,531],{"class":108},[84,3004,3005],{"class":86,"line":125},[84,3006,240],{"emptyLinePlaceholder":239},[84,3008,3009,3011,3013],{"class":86,"line":141},[84,3010,536],{"class":108},[84,3012,539],{"class":97},[84,3014,531],{"class":108},[84,3016,3017],{"class":86,"line":168},[84,3018,3019],{"class":90}," \u003C!-- クリック時のみロード -->\n",[84,3021,3022,3024,3027,3030,3032,3034,3037,3039,3042,3044,3046,3049,3051],{"class":86,"line":189},[84,3023,546],{"class":108},[84,3025,3026],{"class":97},"LazyDrawioViewer",[84,3028,3029],{"class":112}," v-if",[84,3031,557],{"class":108},[84,3033,560],{"class":144},[84,3035,3036],{"class":148},"showViewer",[84,3038,560],{"class":144},[84,3040,3041],{"class":112}," :diagram",[84,3043,557],{"class":108},[84,3045,560],{"class":144},[84,3047,3048],{"class":148},"path",[84,3050,560],{"class":144},[84,3052,2747],{"class":108},[84,3054,3055,3057,3059],{"class":86,"line":210},[84,3056,607],{"class":108},[84,3058,539],{"class":97},[84,3060,531],{"class":108},[84,3062,3063,3065,3067],{"class":86,"line":230},[84,3064,616],{"class":108},[84,3066,528],{"class":97},[84,3068,531],{"class":108},[84,3070,3071],{"class":86,"line":236},[84,3072,240],{"emptyLinePlaceholder":239},[84,3074,3075,3077,3079,3081],{"class":86,"line":243},[84,3076,525],{"class":108},[84,3078,631],{"class":97},[84,3080,634],{"class":112},[84,3082,531],{"class":108},[84,3084,3085,3088,3091,3093,3095,3097,3099],{"class":86,"line":276},[84,3086,3087],{"class":260},"const",[84,3089,3090],{"class":112}," showViewer",[84,3092,297],{"class":108},[84,3094,693],{"class":104},[84,3096,131],{"class":108},[84,3098,1353],{"class":97},[84,3100,701],{"class":108},[84,3102,3103,3105,3108,3110,3112,3115],{"class":86,"line":304},[84,3104,3087],{"class":260},[84,3106,3107],{"class":112}," path",[84,3109,297],{"class":108},[84,3111,264],{"class":144},[84,3113,3114],{"class":148},"/diagrams/large-diagram.drawio",[84,3116,329],{"class":144},[84,3118,3119,3121,3123],{"class":86,"line":332},[84,3120,616],{"class":108},[84,3122,631],{"class":97},[84,3124,531],{"class":108},[17,3126,3127],{},[20,3128,3129],{},"クライアント専用プラグインの作成:",[74,3131,3133],{"className":76,"code":3132,"language":78,"meta":79,"style":79},"// plugins/drawio.client.ts\n// .client.ts拡張子により自動的にクライアントのみで実行\nexport default defineNuxtPlugin((nuxtApp) => {\n return {\n provide: {\n drawio: {\n viewerUrl: 'https://viewer.diagrams.net/',\n embedUrl: 'https://embed.diagrams.net/'\n }\n }\n }\n})\n",[81,3134,3135,3140,3145,3164,3170,3177,3184,3200,3214,3218,3222,3226],{"__ignoreMap":79},[84,3136,3137],{"class":86,"line":87},[84,3138,3139],{"class":90},"// plugins/drawio.client.ts\n",[84,3141,3142],{"class":86,"line":94},[84,3143,3144],{"class":90},"// .client.ts拡張子により自動的にクライアントのみで実行\n",[84,3146,3147,3149,3151,3153,3155,3158,3160,3162],{"class":86,"line":125},[84,3148,98],{"class":97},[84,3150,101],{"class":97},[84,3152,931],{"class":104},[84,3154,109],{"class":108},[84,3156,3157],{"class":112},"nuxtApp",[84,3159,116],{"class":108},[84,3161,119],{"class":108},[84,3163,122],{"class":108},[84,3165,3166,3168],{"class":86,"line":141},[84,3167,1465],{"class":97},[84,3169,122],{"class":108},[84,3171,3172,3175],{"class":86,"line":168},[84,3173,3174],{"class":386}," provide",[84,3176,390],{"class":108},[84,3178,3179,3182],{"class":86,"line":189},[84,3180,3181],{"class":386}," drawio",[84,3183,390],{"class":108},[84,3185,3186,3189,3191,3193,3196,3198],{"class":86,"line":210},[84,3187,3188],{"class":386}," viewerUrl",[84,3190,155],{"class":108},[84,3192,152],{"class":144},[84,3194,3195],{"class":148},"https://viewer.diagrams.net/",[84,3197,152],{"class":144},[84,3199,165],{"class":108},[84,3201,3202,3205,3207,3209,3212],{"class":86,"line":230},[84,3203,3204],{"class":386}," embedUrl",[84,3206,155],{"class":108},[84,3208,152],{"class":144},[84,3210,3211],{"class":148},"https://embed.diagrams.net/",[84,3213,329],{"class":144},[84,3215,3216],{"class":86,"line":236},[84,3217,480],{"class":108},[84,3219,3220],{"class":86,"line":243},[84,3221,485],{"class":108},[84,3223,3224],{"class":86,"line":276},[84,3225,348],{"class":108},[84,3227,3228],{"class":86,"line":304},[84,3229,354],{"class":108},[46,3231,3232],{"id":3232},"代替実装方法の比較",[61,3234,3235],{"id":3235},"npmライブラリの選択肢",[17,3237,3238],{},[20,3239,3240],{},"react-drawio（最も活発に開発中）:",[3242,3243,3244,3248,3251,3254],"ul",{},[3245,3246,3247],"li",{},"最終更新: 2024年11月",[3245,3249,3250],{},"週間ダウンロード: 約2,000",[3245,3252,3253],{},"状態: ✅ アクティブ",[3245,3255,3256],{},"特徴: iframe embedの実装パターン、TypeScript対応",[74,3258,3260],{"className":2149,"code":3259,"language":2151,"meta":79,"style":79},"npm install react-drawio\n",[81,3261,3262],{"__ignoreMap":79},[84,3263,3264,3266,3268],{"class":86,"line":87},[84,3265,2158],{"class":104},[84,3267,2161],{"class":148},[84,3269,3270],{"class":148}," react-drawio\n",[17,3272,3273],{},"React向けですが、パターンはVue/Nuxt 3でも適用可能（上記のembed mode実装例を参照）。",[17,3275,3276],{},[20,3277,3278],{},"maxGraph（mxGraphの後継、推奨）:",[3242,3280,3281,3284,3287],{},[3245,3282,3283],{},"最終更新: 2025年7月（v0.21.0）",[3245,3285,3286],{},"状態: ✅ アクティブ開発中",[3245,3288,3289],{},"特徴: TypeScript、Tree-shaking対応、mxGraphの公式後継",[74,3291,3293],{"className":2149,"code":3292,"language":2151,"meta":79,"style":79},"npm install @maxgraph/core\n",[81,3294,3295],{"__ignoreMap":79},[84,3296,3297,3299,3301],{"class":86,"line":87},[84,3298,2158],{"class":104},[84,3300,2161],{"class":148},[84,3302,3303],{"class":148}," @maxgraph/core\n",[17,3305,3306],{},[20,3307,3308],{},"使用例:",[74,3310,3312],{"className":516,"code":3311,"language":518,"meta":79,"style":79},"\u003Ctemplate>\n \u003CClientOnly>\n \u003Cdiv ref=\"containerRef\" class=\"graph-container\" />\n \u003C/ClientOnly>\n\u003C/template>\n\n\u003Cscript setup lang=\"ts\">\nimport { ref, onMounted } from 'vue'\n\nconst containerRef = ref\u003CHTMLDivElement>()\n\nonMounted(async () => {\n if (!containerRef.value) return\n\n // SSRを回避する動的インポート\n const { Graph } = await import('@maxgraph/core')\n\n const graph = new Graph(containerRef.value)\n const parent = graph.getDefaultParent()\n\n graph.batchUpdate(() => {\n const v1 = graph.insertVertex(parent, null, 'Node 1', 20, 20, 80, 30)\n const v2 = graph.insertVertex(parent, null, 'Node 2', 200, 20, 80, 30)\n graph.insertEdge(parent, null, 'Edge', v1, v2)\n })\n})\n\u003C/script>\n\n\u003Cstyle scoped>\n.graph-container {\n width: 100%;\n height: 600px;\n border: 1px solid #ccc;\n}\n\u003C/style>\n",[81,3313,3314,3322,3330,3363,3371,3379,3383,3403,3425,3429,3447,3451,3465,3483,3487,3492,3520,3524,3548,3567,3571,3587,3641,3692,3731,3735,3739,3747,3751,3761,3769,3784,3798,3817,3821],{"__ignoreMap":79},[84,3315,3316,3318,3320],{"class":86,"line":87},[84,3317,525],{"class":108},[84,3319,528],{"class":97},[84,3321,531],{"class":108},[84,3323,3324,3326,3328],{"class":86,"line":94},[84,3325,536],{"class":108},[84,3327,539],{"class":97},[84,3329,531],{"class":108},[84,3331,3332,3334,3336,3338,3340,3342,3345,3347,3349,3351,3353,3356,3358,3361],{"class":86,"line":125},[84,3333,546],{"class":108},[84,3335,1082],{"class":97},[84,3337,693],{"class":112},[84,3339,557],{"class":108},[84,3341,560],{"class":144},[84,3343,3344],{"class":148},"containerRef",[84,3346,560],{"class":144},[84,3348,1085],{"class":112},[84,3350,557],{"class":108},[84,3352,560],{"class":144},[84,3354,3355],{"class":148},"graph-container",[84,3357,560],{"class":144},[84,3359,3360],{"class":599}," /",[84,3362,531],{"class":108},[84,3364,3365,3367,3369],{"class":86,"line":141},[84,3366,607],{"class":108},[84,3368,539],{"class":97},[84,3370,531],{"class":108},[84,3372,3373,3375,3377],{"class":86,"line":168},[84,3374,616],{"class":108},[84,3376,528],{"class":97},[84,3378,531],{"class":108},[84,3380,3381],{"class":86,"line":189},[84,3382,240],{"emptyLinePlaceholder":239},[84,3384,3385,3387,3389,3391,3393,3395,3397,3399,3401],{"class":86,"line":210},[84,3386,525],{"class":108},[84,3388,631],{"class":97},[84,3390,634],{"class":112},[84,3392,637],{"class":112},[84,3394,557],{"class":108},[84,3396,560],{"class":144},[84,3398,644],{"class":148},[84,3400,560],{"class":144},[84,3402,531],{"class":108},[84,3404,3405,3407,3409,3411,3413,3415,3417,3419,3421,3423],{"class":86,"line":230},[84,3406,653],{"class":97},[84,3408,656],{"class":108},[84,3410,693],{"class":112},[84,3412,136],{"class":108},[84,3414,664],{"class":112},[84,3416,667],{"class":108},[84,3418,670],{"class":97},[84,3420,264],{"class":144},[84,3422,518],{"class":148},[84,3424,329],{"class":144},[84,3426,3427],{"class":86,"line":236},[84,3428,240],{"emptyLinePlaceholder":239},[84,3430,3431,3433,3435,3437,3439,3441,3444],{"class":86,"line":243},[84,3432,685],{"class":260},[84,3434,3344],{"class":112},[84,3436,297],{"class":108},[84,3438,693],{"class":104},[84,3440,525],{"class":108},[84,3442,3443],{"class":1298},"HTMLDivElement",[84,3445,3446],{"class":108},">()\n",[84,3448,3449],{"class":86,"line":276},[84,3450,240],{"emptyLinePlaceholder":239},[84,3452,3453,3455,3457,3459,3461,3463],{"class":86,"line":304},[84,3454,717],{"class":104},[84,3456,131],{"class":108},[84,3458,722],{"class":260},[84,3460,725],{"class":108},[84,3462,119],{"class":108},[84,3464,122],{"class":108},[84,3466,3467,3469,3471,3473,3475,3477,3479,3481],{"class":86,"line":332},[84,3468,246],{"class":97},[84,3470,249],{"class":108},[84,3472,1538],{"class":260},[84,3474,3344],{"class":112},[84,3476,254],{"class":108},[84,3478,768],{"class":112},[84,3480,116],{"class":108},[84,3482,1565],{"class":97},[84,3484,3485],{"class":86,"line":345},[84,3486,240],{"emptyLinePlaceholder":239},[84,3488,3489],{"class":86,"line":351},[84,3490,3491],{"class":90}," // SSRを回避する動的インポート\n",[84,3493,3494,3496,3498,3501,3503,3505,3507,3509,3511,3513,3516,3518],{"class":86,"line":708},[84,3495,735],{"class":260},[84,3497,2833],{"class":108},[84,3499,3500],{"class":112}," Graph",[84,3502,667],{"class":108},[84,3504,297],{"class":108},[84,3506,743],{"class":97},[84,3508,2848],{"class":260},[84,3510,131],{"class":108},[84,3512,152],{"class":144},[84,3514,3515],{"class":148},"@maxgraph/core",[84,3517,152],{"class":144},[84,3519,701],{"class":108},[84,3521,3522],{"class":86,"line":714},[84,3523,240],{"emptyLinePlaceholder":239},[84,3525,3526,3528,3531,3533,3535,3538,3540,3542,3544,3546],{"class":86,"line":732},[84,3527,735],{"class":260},[84,3529,3530],{"class":112},"graph",[84,3532,297],{"class":108},[84,3534,1387],{"class":260},[84,3536,3537],{"class":104},"Graph",[84,3539,131],{"class":108},[84,3541,3344],{"class":112},[84,3543,254],{"class":108},[84,3545,768],{"class":112},[84,3547,701],{"class":108},[84,3549,3550,3552,3555,3557,3560,3562,3565],{"class":86,"line":760},[84,3551,735],{"class":260},[84,3553,3554],{"class":112},"parent",[84,3556,297],{"class":108},[84,3558,3559],{"class":112}," graph",[84,3561,254],{"class":108},[84,3563,3564],{"class":104},"getDefaultParent",[84,3566,783],{"class":108},[84,3568,3569],{"class":86,"line":786},[84,3570,240],{"emptyLinePlaceholder":239},[84,3572,3573,3576,3578,3581,3583,3585],{"class":86,"line":791},[84,3574,3575],{"class":112}," graph",[84,3577,254],{"class":108},[84,3579,3580],{"class":104},"batchUpdate",[84,3582,807],{"class":108},[84,3584,119],{"class":108},[84,3586,122],{"class":108},[84,3588,3589,3591,3594,3596,3598,3600,3603,3605,3607,3609,3611,3613,3615,3618,3620,3622,3625,3627,3629,3631,3634,3636,3639],{"class":86,"line":796},[84,3590,960],{"class":260},[84,3592,3593],{"class":112},"v1",[84,3595,297],{"class":108},[84,3597,3559],{"class":112},[84,3599,254],{"class":108},[84,3601,3602],{"class":104},"insertVertex",[84,3604,131],{"class":108},[84,3606,3554],{"class":112},[84,3608,136],{"class":108},[84,3610,1329],{"class":260},[84,3612,136],{"class":108},[84,3614,264],{"class":144},[84,3616,3617],{"class":148},"Node 1",[84,3619,152],{"class":144},[84,3621,136],{"class":108},[84,3623,3624],{"class":300}," 20",[84,3626,136],{"class":108},[84,3628,3624],{"class":300},[84,3630,136],{"class":108},[84,3632,3633],{"class":300}," 80",[84,3635,136],{"class":108},[84,3637,3638],{"class":300}," 30",[84,3640,701],{"class":108},[84,3642,3643,3645,3648,3650,3652,3654,3656,3658,3660,3662,3664,3666,3668,3671,3673,3675,3678,3680,3682,3684,3686,3688,3690],{"class":86,"line":822},[84,3644,960],{"class":260},[84,3646,3647],{"class":112},"v2",[84,3649,297],{"class":108},[84,3651,3559],{"class":112},[84,3653,254],{"class":108},[84,3655,3602],{"class":104},[84,3657,131],{"class":108},[84,3659,3554],{"class":112},[84,3661,136],{"class":108},[84,3663,1329],{"class":260},[84,3665,136],{"class":108},[84,3667,264],{"class":144},[84,3669,3670],{"class":148},"Node 2",[84,3672,152],{"class":144},[84,3674,136],{"class":108},[84,3676,3677],{"class":300}," 200",[84,3679,136],{"class":108},[84,3681,3624],{"class":300},[84,3683,136],{"class":108},[84,3685,3633],{"class":300},[84,3687,136],{"class":108},[84,3689,3638],{"class":300},[84,3691,701],{"class":108},[84,3693,3694,3697,3699,3702,3704,3706,3708,3710,3712,3714,3717,3719,3721,3724,3726,3729],{"class":86,"line":839},[84,3695,3696],{"class":112}," graph",[84,3698,254],{"class":108},[84,3700,3701],{"class":104},"insertEdge",[84,3703,131],{"class":108},[84,3705,3554],{"class":112},[84,3707,136],{"class":108},[84,3709,1329],{"class":260},[84,3711,136],{"class":108},[84,3713,264],{"class":144},[84,3715,3716],{"class":148},"Edge",[84,3718,152],{"class":144},[84,3720,136],{"class":108},[84,3722,3723],{"class":112}," v1",[84,3725,136],{"class":108},[84,3727,3728],{"class":112}," v2",[84,3730,701],{"class":108},[84,3732,3733],{"class":86,"line":851},[84,3734,233],{"class":108},[84,3736,3737],{"class":86,"line":863},[84,3738,354],{"class":108},[84,3740,3741,3743,3745],{"class":86,"line":880},[84,3742,616],{"class":108},[84,3744,631],{"class":97},[84,3746,531],{"class":108},[84,3748,3749],{"class":86,"line":895},[84,3750,240],{"emptyLinePlaceholder":239},[84,3752,3753,3755,3757,3759],{"class":86,"line":901},[84,3754,525],{"class":108},[84,3756,2060],{"class":97},[84,3758,2063],{"class":112},[84,3760,531],{"class":108},[84,3762,3763,3765,3767],{"class":86,"line":1442},[84,3764,254],{"class":108},[84,3766,3355],{"class":112},[84,3768,122],{"class":108},[84,3770,3771,3774,3776,3779,3782],{"class":86,"line":1457},[84,3772,3773],{"class":386}," width",[84,3775,2083],{"class":108},[84,3777,3778],{"class":300}," 100",[84,3780,3781],{"class":260},"%",[84,3783,2102],{"class":108},[84,3785,3786,3789,3791,3794,3796],{"class":86,"line":1462},[84,3787,3788],{"class":386}," height",[84,3790,2083],{"class":108},[84,3792,3793],{"class":300}," 600",[84,3795,2089],{"class":260},[84,3797,2102],{"class":108},[84,3799,3800,3802,3804,3806,3808,3810,3812,3815],{"class":86,"line":1493},[84,3801,2080],{"class":386},[84,3803,2083],{"class":108},[84,3805,2086],{"class":300},[84,3807,2089],{"class":260},[84,3809,2093],{"class":2092},[84,3811,2096],{"class":108},[84,3813,3814],{"class":2092},"ccc",[84,3816,2102],{"class":108},[84,3818,3819],{"class":86,"line":1498},[84,3820,1944],{"class":108},[84,3822,3823,3825,3827],{"class":86,"line":1503},[84,3824,616],{"class":108},[84,3826,2060],{"class":97},[84,3828,531],{"class":108},[17,3830,3831],{},[20,3832,3833],{},"⚠️ 避けるべきライブラリ:",[3242,3835,3836,3842],{},[3245,3837,3838,3841],{},[20,3839,3840],{},"mxGraph",": 2020年にEOL（End of Life）宣言、使用しないこと",[3245,3843,3844,3847],{},[20,3845,3846],{},"vue-drawio-preview",": Vue 2専用、4年間更新なし、Nuxt 3非対応",[61,3849,3850],{"id":3850},"ファイル変換アプローチ",[17,3852,3853],{},"ビルド時にDraw.ioファイルをSVG/PNGに変換する方法も有効です。",[74,3855,3857],{"className":2149,"code":3856,"language":2151,"meta":79,"style":79},"npm install -g draw.io-export\n",[81,3858,3859],{"__ignoreMap":79},[84,3860,3861,3863,3865,3868],{"class":86,"line":87},[84,3862,2158],{"class":104},[84,3864,2161],{"class":148},[84,3866,3867],{"class":2092}," -g",[84,3869,3870],{"class":148}," draw.io-export\n",[74,3872,3874],{"className":2149,"code":3873,"language":2151,"meta":79,"style":79},"# ビルドスクリプトに追加\ndrawio architecture.drawio -o architecture.svg\ndrawio flowchart.drawio -o flowchart.png\n",[81,3875,3876,3881,3895],{"__ignoreMap":79},[84,3877,3878],{"class":86,"line":87},[84,3879,3880],{"class":90},"# ビルドスクリプトに追加\n",[84,3882,3883,3886,3889,3892],{"class":86,"line":94},[84,3884,3885],{"class":104},"drawio",[84,3887,3888],{"class":148}," architecture.drawio",[84,3890,3891],{"class":2092}," -o",[84,3893,3894],{"class":148}," architecture.svg\n",[84,3896,3897,3899,3902,3904],{"class":86,"line":125},[84,3898,3885],{"class":104},[84,3900,3901],{"class":148}," flowchart.drawio",[84,3903,3891],{"class":2092},[84,3905,3906],{"class":148}," flowchart.png\n",[17,3908,3909,3911,3912,3914],{},[20,3910,498],{}," ランタイムオーバーヘッドゼロ、標準的なフォーマット\n",[20,3913,502],{}," インタラクティブ機能なし、ビルド時の処理が必要",[46,3916,3917],{"id":3917},"実装方法の総合比較",[3919,3920,3921,3946],"table",{},[3922,3923,3924],"thead",{},[3925,3926,3927,3931,3934,3937,3940,3943],"tr",{},[3928,3929,3930],"th",{},"方法",[3928,3932,3933],{},"複雑さ",[3928,3935,3936],{},"パフォーマンス",[3928,3938,3939],{},"メンテナンス",[3928,3941,3942],{},"外部依存",[3928,3944,3945],{},"推奨度",[3947,3948,3949,3969,3985,4001,4016,4034],"tbody",{},[3925,3950,3951,3954,3957,3960,3963,3966],{},[3952,3953,43],"td",{},[3952,3955,3956],{},"中",[3952,3958,3959],{},"高",[3952,3961,3962],{},"低",[3952,3964,3965],{},"オンライン接続",[3952,3967,3968],{},"⭐⭐⭐⭐⭐",[3925,3970,3971,3974,3976,3978,3980,3983],{},[3952,3972,3973],{},"サーバーミドルウェアCORS",[3952,3975,3962],{},[3952,3977,3959],{},[3952,3979,3956],{},[3952,3981,3982],{},"なし",[3952,3984,3968],{},[3925,3986,3987,3990,3992,3994,3996,3998],{},[3952,3988,3989],{},"Base64埋め込み",[3952,3991,3962],{},[3952,3993,3956],{},[3952,3995,3962],{},[3952,3997,3982],{},[3952,3999,4000],{},"⭐⭐⭐⭐",[3925,4002,4003,4006,4008,4010,4012,4014],{},[3952,4004,4005],{},"maxGraph直接使用",[3952,4007,3959],{},[3952,4009,3959],{},[3952,4011,3959],{},[3952,4013,3982],{},[3952,4015,4000],{},[3925,4017,4018,4021,4023,4026,4028,4031],{},[3952,4019,4020],{},"ファイル変換",[3952,4022,3956],{},[3952,4024,4025],{},"最高",[3952,4027,3956],{},[3952,4029,4030],{},"ビルドツール",[3952,4032,4033],{},"⭐⭐⭐",[3925,4035,4036,4038,4040,4042,4044,4047],{},[3952,4037,2196],{},[3952,4039,3956],{},[3952,4041,3959],{},[3952,4043,3956],{},[3952,4045,4046],{},"モジュール",[3952,4048,4000],{},[46,4050,4051],{"id":4051},"完全な動作コンポーネント例",[17,4053,4054],{},"以下は、エラーハンドリング、ローディング状態、TypeScript対応を含む本番レベルのコンポーネントです。",[61,4056,4058],{"id":4057},"componentsdrawioviewervue閲覧専用","components/DrawioViewer.vue（閲覧専用）",[74,4060,4062],{"className":516,"code":4061,"language":518,"meta":79,"style":79},"\u003Ctemplate>\n \u003Cdiv class=\"drawio-viewer-container\">\n \u003Cdiv v-if=\"isLoading\" class=\"loading-state\">\n \u003Cdiv class=\"spinner\">\u003C/div>\n \u003Cp>図を読み込み中...\u003C/p>\n \u003C/div>\n\n \u003Cdiv v-if=\"error\" class=\"error-state\">\n \u003Cp>{{ error }}\u003C/p>\n \u003Cbutton @click=\"reload\">再試行\u003C/button>\n \u003C/div>\n\n \u003Cdiv\n v-show=\"!isLoading && !error\"\n ref=\"diagramContainer\"\n class=\"diagram-content\"\n >\u003C/div>\n \u003C/div>\n\u003C/template>\n\n\u003Cscript setup lang=\"ts\">\nimport { ref, onMounted, watch } from 'vue'\n\ninterface Props {\n source: string\n sourceType?: 'url' | 'xml'\n width?: string\n height?: string\n toolbar?: string\n}\n\nconst props = withDefaults(defineProps\u003CProps>(), {\n sourceType: 'url',\n width: '100%',\n height: '500px',\n toolbar: 'zoom layers lightbox'\n})\n\nconst isLoading = ref(true)\nconst error = ref\u003Cstring | null>(null)\nconst diagramContainer = ref\u003CHTMLElement | null>(null)\n\nconst loadViewerScript = (): Promise\u003Cvoid> => {\n return new Promise((resolve, reject) => {\n if ((window as any).GraphViewer) {\n resolve()\n return\n }\n\n const script = document.createElement('script')\n script.src = 'https://viewer.diagrams.net/js/viewer-static.min.js'\n script.async = true\n script.onload = () => resolve()\n script.onerror = () => reject(new Error('Failed to load viewer script'))\n document.head.appendChild(script)\n })\n}\n\nconst fetchDiagramData = async (): Promise\u003Cstring> => {\n if (props.sourceType === 'xml') {\n return props.source\n }\n\n try {\n const response = await fetch(props.source)\n if (!response.ok) {\n throw new Error(`Failed to fetch: ${response.statusText}`)\n }\n return await response.text()\n } catch (e: any) {\n throw new Error(`Error loading diagram: ${e.message}`)\n }\n}\n\nconst initializeDiagram = async () => {\n isLoading.value = true\n error.value = null\n\n try {\n await loadViewerScript()\n const xmlData = await fetchDiagramData()\n\n if (diagramContainer.value) {\n diagramContainer.value.innerHTML = ''\n\n const diagramDiv = document.createElement('div')\n diagramDiv.className = 'mxgraph'\n diagramDiv.style.maxWidth = '100%'\n diagramDiv.style.border = '1px solid transparent'\n\n const config = {\n highlight: '#0000ff',\n nav: true,\n resize: true,\n toolbar: props.toolbar,\n edit: '_blank',\n xml: xmlData\n }\n\n diagramDiv.setAttribute('data-mxgraph', JSON.stringify(config))\n diagramContainer.value.appendChild(diagramDiv)\n\n if ((window as any).GraphViewer) {\n (window as any).GraphViewer.processElements()\n }\n }\n\n isLoading.value = false\n } catch (e: any) {\n error.value = e.message\n isLoading.value = false\n }\n}\n\nconst reload = () => {\n initializeDiagram()\n}\n\nonMounted(() => {\n initializeDiagram()\n})\n\nwatch(() => props.source, () => {\n initializeDiagram()\n})\n\u003C/script>\n\n\u003Cstyle scoped>\n.drawio-viewer-container {\n position: relative;\n width: 100%;\n}\n\n.loading-state,\n.error-state {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n min-height: 200px;\n padding: 2rem;\n}\n\n.spinner {\n width: 40px;\n height: 40px;\n border: 4px solid #f3f3f3;\n border-top: 4px solid #3498db;\n border-radius: 50%;\n animation: spin 1s linear infinite;\n margin-bottom: 1rem;\n}\n\n@keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}\n\n.error-state {\n color: #e74c3c;\n}\n\n.error-state button {\n margin-top: 1rem;\n padding: 0.5rem 1rem;\n background-color: #3498db;\n color: white;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n}\n\n.error-state button:hover {\n background-color: #2980b9;\n}\n\n.diagram-content {\n width: 100%;\n overflow: auto;\n}\n\n.diagram-content :deep(.mxgraph) {\n max-width: 100%;\n overflow: auto;\n}\n\u003C/style>\n",[81,4063,4064,4072,4091,4121,4145,4161,4169,4173,4202,4219,4247,4255,4259,4265,4279,4293,4306,4315,4323,4331,4335,4355,4382,4386,4396,4405,4431,4441,4451,4461,4465,4469,4495,4509,4524,4539,4551,4555,4559,4575,4600,4625,4629,4655,4680,4705,4712,4717,4721,4725,4749,4765,4777,4797,4834,4852,4856,4860,4864,4890,4915,4927,4931,4935,4941,4964,4983,5015,5019,5033,5053,5083,5087,5091,5095,5112,5125,5139,5143,5149,5159,5175,5180,5197,5217,5222,5248,5267,5289,5312,5317,5329,5345,5357,5369,5386,5403,5414,5419,5424,5457,5476,5481,5503,5526,5531,5536,5541,5556,5575,5595,5608,5613,5618,5623,5638,5646,5651,5656,5667,5674,5679,5684,5708,5715,5720,5729,5734,5745,5754,5767,5780,5785,5790,5799,5808,5821,5834,5847,5859,5873,5889,5894,5899,5908,5922,5935,5955,5976,5990,6014,6028,6033,6038,6052,6080,6105,6110,6115,6124,6139,6144,6149,6161,6175,6193,6207,6219,6231,6244,6257,6262,6267,6283,6297,6302,6307,6316,6329,6342,6347,6352,6372,6386,6397,6402],{"__ignoreMap":79},[84,4065,4066,4068,4070],{"class":86,"line":87},[84,4067,525],{"class":108},[84,4069,528],{"class":97},[84,4071,531],{"class":108},[84,4073,4074,4076,4078,4080,4082,4084,4087,4089],{"class":86,"line":94},[84,4075,536],{"class":108},[84,4077,1082],{"class":97},[84,4079,1085],{"class":112},[84,4081,557],{"class":108},[84,4083,560],{"class":144},[84,4085,4086],{"class":148},"drawio-viewer-container",[84,4088,560],{"class":144},[84,4090,531],{"class":108},[84,4092,4093,4095,4097,4099,4101,4103,4106,4108,4110,4112,4114,4117,4119],{"class":86,"line":125},[84,4094,546],{"class":108},[84,4096,1082],{"class":97},[84,4098,3029],{"class":112},[84,4100,557],{"class":108},[84,4102,560],{"class":144},[84,4104,4105],{"class":148},"isLoading",[84,4107,560],{"class":144},[84,4109,1085],{"class":112},[84,4111,557],{"class":108},[84,4113,560],{"class":144},[84,4115,4116],{"class":148},"loading-state",[84,4118,560],{"class":144},[84,4120,531],{"class":108},[84,4122,4123,4125,4127,4129,4131,4133,4136,4138,4141,4143],{"class":86,"line":141},[84,4124,1109],{"class":108},[84,4126,1082],{"class":97},[84,4128,1085],{"class":112},[84,4130,557],{"class":108},[84,4132,560],{"class":144},[84,4134,4135],{"class":148},"spinner",[84,4137,560],{"class":144},[84,4139,4140],{"class":108},">\u003C/",[84,4142,1082],{"class":97},[84,4144,531],{"class":108},[84,4146,4147,4149,4151,4153,4155,4157,4159],{"class":86,"line":168},[84,4148,1109],{"class":108},[84,4150,17],{"class":97},[84,4152,2992],{"class":108},[84,4154,2722],{"class":2995},[84,4156,616],{"class":108},[84,4158,17],{"class":97},[84,4160,531],{"class":108},[84,4162,4163,4165,4167],{"class":86,"line":189},[84,4164,1194],{"class":108},[84,4166,1082],{"class":97},[84,4168,531],{"class":108},[84,4170,4171],{"class":86,"line":210},[84,4172,240],{"emptyLinePlaceholder":239},[84,4174,4175,4177,4179,4181,4183,4185,4187,4189,4191,4193,4195,4198,4200],{"class":86,"line":230},[84,4176,546],{"class":108},[84,4178,1082],{"class":97},[84,4180,3029],{"class":112},[84,4182,557],{"class":108},[84,4184,560],{"class":144},[84,4186,1903],{"class":148},[84,4188,560],{"class":144},[84,4190,1085],{"class":112},[84,4192,557],{"class":108},[84,4194,560],{"class":144},[84,4196,4197],{"class":148},"error-state",[84,4199,560],{"class":144},[84,4201,531],{"class":108},[84,4203,4204,4206,4208,4210,4213,4215,4217],{"class":86,"line":236},[84,4205,1109],{"class":108},[84,4207,17],{"class":97},[84,4209,2992],{"class":108},[84,4211,4212],{"class":2995},"{{ error }}",[84,4214,616],{"class":108},[84,4216,17],{"class":97},[84,4218,531],{"class":108},[84,4220,4221,4223,4225,4227,4229,4231,4234,4236,4238,4241,4243,4245],{"class":86,"line":243},[84,4222,1109],{"class":108},[84,4224,2977],{"class":97},[84,4226,2980],{"class":112},[84,4228,557],{"class":108},[84,4230,560],{"class":144},[84,4232,4233],{"class":148},"reload",[84,4235,560],{"class":144},[84,4237,2992],{"class":108},[84,4239,4240],{"class":2995},"再試行",[84,4242,616],{"class":108},[84,4244,2977],{"class":97},[84,4246,531],{"class":108},[84,4248,4249,4251,4253],{"class":86,"line":276},[84,4250,1194],{"class":108},[84,4252,1082],{"class":97},[84,4254,531],{"class":108},[84,4256,4257],{"class":86,"line":304},[84,4258,240],{"emptyLinePlaceholder":239},[84,4260,4261,4263],{"class":86,"line":332},[84,4262,546],{"class":108},[84,4264,549],{"class":97},[84,4266,4267,4270,4272,4274,4277],{"class":86,"line":345},[84,4268,4269],{"class":112}," v-show",[84,4271,557],{"class":108},[84,4273,560],{"class":144},[84,4275,4276],{"class":148},"!isLoading && !error",[84,4278,566],{"class":144},[84,4280,4281,4284,4286,4288,4291],{"class":86,"line":351},[84,4282,4283],{"class":112}," ref",[84,4285,557],{"class":108},[84,4287,560],{"class":144},[84,4289,4290],{"class":148},"diagramContainer",[84,4292,566],{"class":144},[84,4294,4295,4297,4299,4301,4304],{"class":86,"line":708},[84,4296,554],{"class":112},[84,4298,557],{"class":108},[84,4300,560],{"class":144},[84,4302,4303],{"class":148},"diagram-content",[84,4305,566],{"class":144},[84,4307,4308,4311,4313],{"class":86,"line":714},[84,4309,4310],{"class":108}," >\u003C/",[84,4312,1082],{"class":97},[84,4314,531],{"class":108},[84,4316,4317,4319,4321],{"class":86,"line":732},[84,4318,607],{"class":108},[84,4320,1082],{"class":97},[84,4322,531],{"class":108},[84,4324,4325,4327,4329],{"class":86,"line":760},[84,4326,616],{"class":108},[84,4328,528],{"class":97},[84,4330,531],{"class":108},[84,4332,4333],{"class":86,"line":786},[84,4334,240],{"emptyLinePlaceholder":239},[84,4336,4337,4339,4341,4343,4345,4347,4349,4351,4353],{"class":86,"line":791},[84,4338,525],{"class":108},[84,4340,631],{"class":97},[84,4342,634],{"class":112},[84,4344,637],{"class":112},[84,4346,557],{"class":108},[84,4348,560],{"class":144},[84,4350,644],{"class":148},[84,4352,560],{"class":144},[84,4354,531],{"class":108},[84,4356,4357,4359,4361,4363,4365,4367,4369,4372,4374,4376,4378,4380],{"class":86,"line":796},[84,4358,653],{"class":97},[84,4360,656],{"class":108},[84,4362,693],{"class":112},[84,4364,136],{"class":108},[84,4366,664],{"class":112},[84,4368,136],{"class":108},[84,4370,4371],{"class":112}," watch",[84,4373,667],{"class":108},[84,4375,670],{"class":97},[84,4377,264],{"class":144},[84,4379,518],{"class":148},[84,4381,329],{"class":144},[84,4383,4384],{"class":86,"line":822},[84,4385,240],{"emptyLinePlaceholder":239},[84,4387,4388,4391,4394],{"class":86,"line":839},[84,4389,4390],{"class":260},"interface",[84,4392,4393],{"class":1298}," Props",[84,4395,122],{"class":108},[84,4397,4398,4401,4403],{"class":86,"line":851},[84,4399,4400],{"class":112}," source",[84,4402,155],{"class":108},[84,4404,1299],{"class":1298},[84,4406,4407,4410,4413,4415,4417,4420,4422,4425,4427,4429],{"class":86,"line":863},[84,4408,4409],{"class":112}," sourceType",[84,4411,4412],{"class":260},"?",[84,4414,155],{"class":108},[84,4416,152],{"class":144},[84,4418,4419],{"class":148},"url",[84,4421,152],{"class":144},[84,4423,4424],{"class":108}," | ",[84,4426,152],{"class":144},[84,4428,1697],{"class":148},[84,4430,329],{"class":144},[84,4432,4433,4435,4437,4439],{"class":86,"line":880},[84,4434,3773],{"class":112},[84,4436,4412],{"class":260},[84,4438,155],{"class":108},[84,4440,1299],{"class":1298},[84,4442,4443,4445,4447,4449],{"class":86,"line":895},[84,4444,3788],{"class":112},[84,4446,4412],{"class":260},[84,4448,155],{"class":108},[84,4450,1299],{"class":1298},[84,4452,4453,4455,4457,4459],{"class":86,"line":901},[84,4454,866],{"class":112},[84,4456,4412],{"class":260},[84,4458,155],{"class":108},[84,4460,1299],{"class":1298},[84,4462,4463],{"class":86,"line":1442},[84,4464,1944],{"class":108},[84,4466,4467],{"class":86,"line":1457},[84,4468,240],{"emptyLinePlaceholder":239},[84,4470,4471,4473,4475,4477,4480,4482,4485,4487,4490,4493],{"class":86,"line":1462},[84,4472,685],{"class":260},[84,4474,1280],{"class":112},[84,4476,297],{"class":108},[84,4478,4479],{"class":104}," withDefaults",[84,4481,131],{"class":108},[84,4483,4484],{"class":104},"defineProps",[84,4486,525],{"class":108},[84,4488,4489],{"class":1298},"Props",[84,4491,4492],{"class":108},">(),",[84,4494,122],{"class":108},[84,4496,4497,4499,4501,4503,4505,4507],{"class":86,"line":1493},[84,4498,4409],{"class":386},[84,4500,155],{"class":108},[84,4502,152],{"class":144},[84,4504,4419],{"class":148},[84,4506,152],{"class":144},[84,4508,165],{"class":108},[84,4510,4511,4513,4515,4517,4520,4522],{"class":86,"line":1498},[84,4512,3773],{"class":386},[84,4514,155],{"class":108},[84,4516,152],{"class":144},[84,4518,4519],{"class":148},"100%",[84,4521,152],{"class":144},[84,4523,165],{"class":108},[84,4525,4526,4528,4530,4532,4535,4537],{"class":86,"line":1503},[84,4527,3788],{"class":386},[84,4529,155],{"class":108},[84,4531,152],{"class":144},[84,4533,4534],{"class":148},"500px",[84,4536,152],{"class":144},[84,4538,165],{"class":108},[84,4540,4541,4543,4545,4547,4549],{"class":86,"line":1531},[84,4542,866],{"class":386},[84,4544,155],{"class":108},[84,4546,152],{"class":144},[84,4548,873],{"class":148},[84,4550,329],{"class":144},[84,4552,4553],{"class":86,"line":1568},[84,4554,354],{"class":108},[84,4556,4557],{"class":86,"line":1573},[84,4558,240],{"emptyLinePlaceholder":239},[84,4560,4561,4563,4565,4567,4569,4571,4573],{"class":86,"line":1581},[84,4562,685],{"class":260},[84,4564,4105],{"class":112},[84,4566,297],{"class":108},[84,4568,693],{"class":104},[84,4570,131],{"class":108},[84,4572,203],{"class":97},[84,4574,701],{"class":108},[84,4576,4577,4579,4581,4583,4585,4587,4590,4592,4594,4596,4598],{"class":86,"line":1609},[84,4578,685],{"class":260},[84,4580,1903],{"class":112},[84,4582,297],{"class":108},[84,4584,693],{"class":104},[84,4586,525],{"class":108},[84,4588,4589],{"class":1298},"string",[84,4591,1326],{"class":108},[84,4593,1329],{"class":260},[84,4595,1332],{"class":108},[84,4597,1335],{"class":260},[84,4599,701],{"class":108},[84,4601,4602,4604,4606,4608,4610,4612,4615,4617,4619,4621,4623],{"class":86,"line":1614},[84,4603,685],{"class":260},[84,4605,4290],{"class":112},[84,4607,297],{"class":108},[84,4609,693],{"class":104},[84,4611,525],{"class":108},[84,4613,4614],{"class":1298},"HTMLElement",[84,4616,1326],{"class":108},[84,4618,1329],{"class":260},[84,4620,1332],{"class":108},[84,4622,1335],{"class":260},[84,4624,701],{"class":108},[84,4626,4627],{"class":86,"line":1642},[84,4628,240],{"emptyLinePlaceholder":239},[84,4630,4631,4633,4636,4638,4641,4644,4646,4649,4651,4653],{"class":86,"line":1648},[84,4632,685],{"class":260},[84,4634,4635],{"class":104},"loadViewerScript",[84,4637,297],{"class":108},[84,4639,4640],{"class":108}," ():",[84,4642,4643],{"class":1298}," Promise",[84,4645,525],{"class":108},[84,4647,4648],{"class":1298},"void",[84,4650,2992],{"class":108},[84,4652,119],{"class":108},[84,4654,122],{"class":108},[84,4656,4657,4659,4661,4664,4666,4669,4671,4674,4676,4678],{"class":86,"line":1662},[84,4658,1465],{"class":97},[84,4660,1387],{"class":260},[84,4662,4663],{"class":386},"Promise",[84,4665,109],{"class":108},[84,4667,4668],{"class":112},"resolve",[84,4670,136],{"class":108},[84,4672,4673],{"class":112}," reject",[84,4675,116],{"class":108},[84,4677,119],{"class":108},[84,4679,122],{"class":108},[84,4681,4682,4684,4687,4689,4692,4695,4698,4701,4703],{"class":86,"line":1667},[84,4683,1617],{"class":97},[84,4685,4686],{"class":108}," ((",[84,4688,2681],{"class":112},[84,4690,4691],{"class":97}," as",[84,4693,4694],{"class":1298}," any",[84,4696,4697],{"class":108},").",[84,4699,4700],{"class":112},"GraphViewer",[84,4702,116],{"class":108},[84,4704,122],{"class":108},[84,4706,4707,4710],{"class":86,"line":1692},[84,4708,4709],{"class":104}," resolve",[84,4711,783],{"class":108},[84,4713,4714],{"class":86,"line":1712},[84,4715,4716],{"class":97}," return\n",[84,4718,4719],{"class":86,"line":1717},[84,4720,485],{"class":108},[84,4722,4723],{"class":86,"line":1741},[84,4724,240],{"emptyLinePlaceholder":239},[84,4726,4727,4729,4731,4733,4735,4737,4739,4741,4743,4745,4747],{"class":86,"line":1753},[84,4728,960],{"class":260},[84,4730,631],{"class":112},[84,4732,297],{"class":108},[84,4734,967],{"class":112},[84,4736,254],{"class":108},[84,4738,972],{"class":104},[84,4740,131],{"class":108},[84,4742,152],{"class":144},[84,4744,631],{"class":148},[84,4746,152],{"class":144},[84,4748,701],{"class":108},[84,4750,4751,4753,4755,4757,4759,4761,4763],{"class":86,"line":1770},[84,4752,987],{"class":112},[84,4754,254],{"class":108},[84,4756,992],{"class":112},[84,4758,297],{"class":108},[84,4760,264],{"class":144},[84,4762,999],{"class":148},[84,4764,329],{"class":144},[84,4766,4767,4769,4771,4773,4775],{"class":86,"line":1782},[84,4768,987],{"class":112},[84,4770,254],{"class":108},[84,4772,722],{"class":112},[84,4774,297],{"class":108},[84,4776,1014],{"class":97},[84,4778,4779,4781,4783,4786,4788,4790,4792,4795],{"class":86,"line":1793},[84,4780,987],{"class":112},[84,4782,254],{"class":108},[84,4784,4785],{"class":104},"onload",[84,4787,297],{"class":108},[84,4789,725],{"class":108},[84,4791,119],{"class":108},[84,4793,4794],{"class":104}," resolve",[84,4796,783],{"class":108},[84,4798,4799,4801,4803,4806,4808,4810,4812,4814,4816,4819,4822,4824,4826,4829,4831],{"class":86,"line":1799},[84,4800,987],{"class":112},[84,4802,254],{"class":108},[84,4804,4805],{"class":104},"onerror",[84,4807,297],{"class":108},[84,4809,725],{"class":108},[84,4811,119],{"class":108},[84,4813,4673],{"class":104},[84,4815,131],{"class":108},[84,4817,4818],{"class":260},"new ",[84,4820,4821],{"class":104},"Error",[84,4823,131],{"class":108},[84,4825,152],{"class":144},[84,4827,4828],{"class":148},"Failed to load viewer script",[84,4830,152],{"class":144},[84,4832,4833],{"class":108},"))\n",[84,4835,4836,4838,4840,4842,4844,4846,4848,4850],{"class":86,"line":1808},[84,4837,1019],{"class":112},[84,4839,254],{"class":108},[84,4841,1024],{"class":112},[84,4843,254],{"class":108},[84,4845,1029],{"class":104},[84,4847,131],{"class":108},[84,4849,631],{"class":112},[84,4851,701],{"class":108},[84,4853,4854],{"class":86,"line":1814},[84,4855,233],{"class":108},[84,4857,4858],{"class":86,"line":1819},[84,4859,1944],{"class":108},[84,4861,4862],{"class":86,"line":1824},[84,4863,240],{"emptyLinePlaceholder":239},[84,4865,4866,4868,4871,4873,4875,4878,4880,4882,4884,4886,4888],{"class":86,"line":1850},[84,4867,685],{"class":260},[84,4869,4870],{"class":104},"fetchDiagramData",[84,4872,297],{"class":108},[84,4874,1513],{"class":260},[84,4876,4877],{"class":108},"():",[84,4879,4643],{"class":1298},[84,4881,525],{"class":108},[84,4883,4589],{"class":1298},[84,4885,2992],{"class":108},[84,4887,119],{"class":108},[84,4889,122],{"class":108},[84,4891,4892,4894,4896,4898,4900,4903,4905,4907,4909,4911,4913],{"class":86,"line":1881},[84,4893,246],{"class":97},[84,4895,249],{"class":108},[84,4897,1280],{"class":112},[84,4899,254],{"class":108},[84,4901,4902],{"class":112},"sourceType",[84,4904,1628],{"class":260},[84,4906,152],{"class":144},[84,4908,1697],{"class":148},[84,4910,152],{"class":144},[84,4912,116],{"class":108},[84,4914,122],{"class":108},[84,4916,4917,4919,4922,4924],{"class":86,"line":1887},[84,4918,335],{"class":97},[84,4920,4921],{"class":112}," props",[84,4923,254],{"class":108},[84,4925,4926],{"class":112},"source\n",[84,4928,4929],{"class":86,"line":1892},[84,4930,348],{"class":108},[84,4932,4933],{"class":86,"line":1910},[84,4934,240],{"emptyLinePlaceholder":239},[84,4936,4937,4939],{"class":86,"line":1936},[84,4938,1576],{"class":97},[84,4940,122],{"class":108},[84,4942,4943,4945,4947,4949,4951,4953,4955,4957,4959,4962],{"class":86,"line":1941},[84,4944,960],{"class":260},[84,4946,738],{"class":112},[84,4948,297],{"class":108},[84,4950,743],{"class":97},[84,4952,746],{"class":104},[84,4954,131],{"class":108},[84,4956,1280],{"class":112},[84,4958,254],{"class":108},[84,4960,4961],{"class":112},"source",[84,4963,701],{"class":108},[84,4965,4966,4968,4970,4972,4974,4976,4979,4981],{"class":86,"line":1947},[84,4967,1617],{"class":97},[84,4969,249],{"class":108},[84,4971,1538],{"class":260},[84,4973,738],{"class":112},[84,4975,254],{"class":108},[84,4977,4978],{"class":112},"ok",[84,4980,116],{"class":108},[84,4982,122],{"class":108},[84,4984,4985,4988,4990,4992,4994,4997,5000,5002,5004,5006,5009,5011,5013],{"class":86,"line":1952},[84,4986,4987],{"class":97}," throw",[84,4989,1387],{"class":260},[84,4991,4821],{"class":104},[84,4993,131],{"class":108},[84,4995,4996],{"class":144},"`",[84,4998,4999],{"class":148},"Failed to fetch: ",[84,5001,1474],{"class":97},[84,5003,738],{"class":148},[84,5005,254],{"class":108},[84,5007,5008],{"class":148},"statusText",[84,5010,1487],{"class":97},[84,5012,4996],{"class":144},[84,5014,701],{"class":108},[84,5016,5017],{"class":86,"line":1963},[84,5018,485],{"class":108},[84,5020,5021,5023,5025,5027,5029,5031],{"class":86,"line":1990},[84,5022,335],{"class":97},[84,5024,743],{"class":97},[84,5026,775],{"class":112},[84,5028,254],{"class":108},[84,5030,780],{"class":104},[84,5032,783],{"class":108},[84,5034,5035,5037,5039,5041,5044,5046,5049,5051],{"class":86,"line":1995},[84,5036,1895],{"class":108},[84,5038,1898],{"class":97},[84,5040,249],{"class":108},[84,5042,5043],{"class":112},"e",[84,5045,155],{"class":108},[84,5047,5048],{"class":1298},"any",[84,5050,116],{"class":108},[84,5052,122],{"class":108},[84,5054,5055,5058,5060,5062,5064,5066,5069,5071,5073,5075,5077,5079,5081],{"class":86,"line":2000},[84,5056,5057],{"class":97}," throw",[84,5059,1387],{"class":260},[84,5061,4821],{"class":104},[84,5063,131],{"class":108},[84,5065,4996],{"class":144},[84,5067,5068],{"class":148},"Error loading diagram: ",[84,5070,1474],{"class":97},[84,5072,5043],{"class":148},[84,5074,254],{"class":108},[84,5076,1978],{"class":148},[84,5078,1487],{"class":97},[84,5080,4996],{"class":144},[84,5082,701],{"class":108},[84,5084,5085],{"class":86,"line":2012},[84,5086,348],{"class":108},[84,5088,5089],{"class":86,"line":2036},[84,5090,1944],{"class":108},[84,5092,5093],{"class":86,"line":2041},[84,5094,240],{"emptyLinePlaceholder":239},[84,5096,5097,5099,5102,5104,5106,5108,5110],{"class":86,"line":2050},[84,5098,685],{"class":260},[84,5100,5101],{"class":104},"initializeDiagram",[84,5103,297],{"class":108},[84,5105,1513],{"class":260},[84,5107,1484],{"class":108},[84,5109,119],{"class":108},[84,5111,122],{"class":108},[84,5113,5114,5117,5119,5121,5123],{"class":86,"line":2055},[84,5115,5116],{"class":112}," isLoading",[84,5118,254],{"class":108},[84,5120,768],{"class":112},[84,5122,297],{"class":108},[84,5124,1014],{"class":97},[84,5126,5127,5130,5132,5134,5136],{"class":86,"line":2068},[84,5128,5129],{"class":112}," error",[84,5131,254],{"class":108},[84,5133,768],{"class":112},[84,5135,297],{"class":108},[84,5137,5138],{"class":260}," null\n",[84,5140,5141],{"class":86,"line":2077},[84,5142,240],{"emptyLinePlaceholder":239},[84,5144,5145,5147],{"class":86,"line":2105},[84,5146,1576],{"class":97},[84,5148,122],{"class":108},[84,5150,5151,5154,5157],{"class":86,"line":2120},[84,5152,5153],{"class":97}," await",[84,5155,5156],{"class":104}," loadViewerScript",[84,5158,783],{"class":108},[84,5160,5161,5163,5166,5168,5170,5173],{"class":86,"line":2125},[84,5162,960],{"class":260},[84,5164,5165],{"class":112},"xmlData",[84,5167,297],{"class":108},[84,5169,743],{"class":97},[84,5171,5172],{"class":104}," fetchDiagramData",[84,5174,783],{"class":108},[84,5176,5178],{"class":86,"line":5177},82,[84,5179,240],{"emptyLinePlaceholder":239},[84,5181,5183,5185,5187,5189,5191,5193,5195],{"class":86,"line":5182},83,[84,5184,1617],{"class":97},[84,5186,249],{"class":108},[84,5188,4290],{"class":112},[84,5190,254],{"class":108},[84,5192,768],{"class":112},[84,5194,116],{"class":108},[84,5196,122],{"class":108},[84,5198,5200,5203,5205,5207,5209,5212,5214],{"class":86,"line":5199},84,[84,5201,5202],{"class":112}," diagramContainer",[84,5204,254],{"class":108},[84,5206,768],{"class":112},[84,5208,254],{"class":108},[84,5210,5211],{"class":112},"innerHTML",[84,5213,297],{"class":108},[84,5215,5216],{"class":144}," ''\n",[84,5218,5220],{"class":86,"line":5219},85,[84,5221,240],{"emptyLinePlaceholder":239},[84,5223,5225,5227,5230,5232,5234,5236,5238,5240,5242,5244,5246],{"class":86,"line":5224},86,[84,5226,1670],{"class":260},[84,5228,5229],{"class":112},"diagramDiv",[84,5231,297],{"class":108},[84,5233,967],{"class":112},[84,5235,254],{"class":108},[84,5237,972],{"class":104},[84,5239,131],{"class":108},[84,5241,152],{"class":144},[84,5243,1082],{"class":148},[84,5245,152],{"class":144},[84,5247,701],{"class":108},[84,5249,5251,5254,5256,5259,5261,5263,5265],{"class":86,"line":5250},87,[84,5252,5253],{"class":112}," diagramDiv",[84,5255,254],{"class":108},[84,5257,5258],{"class":112},"className",[84,5260,297],{"class":108},[84,5262,264],{"class":144},[84,5264,563],{"class":148},[84,5266,329],{"class":144},[84,5268,5270,5272,5274,5276,5278,5281,5283,5285,5287],{"class":86,"line":5269},88,[84,5271,5253],{"class":112},[84,5273,254],{"class":108},[84,5275,2060],{"class":112},[84,5277,254],{"class":108},[84,5279,5280],{"class":112},"maxWidth",[84,5282,297],{"class":108},[84,5284,264],{"class":144},[84,5286,4519],{"class":148},[84,5288,329],{"class":144},[84,5290,5292,5294,5296,5298,5300,5303,5305,5307,5310],{"class":86,"line":5291},89,[84,5293,5253],{"class":112},[84,5295,254],{"class":108},[84,5297,2060],{"class":112},[84,5299,254],{"class":108},[84,5301,5302],{"class":112},"border",[84,5304,297],{"class":108},[84,5306,264],{"class":144},[84,5308,5309],{"class":148},"1px solid transparent",[84,5311,329],{"class":144},[84,5313,5315],{"class":86,"line":5314},90,[84,5316,240],{"emptyLinePlaceholder":239},[84,5318,5320,5322,5325,5327],{"class":86,"line":5319},91,[84,5321,1670],{"class":260},[84,5323,5324],{"class":112},"config",[84,5326,297],{"class":108},[84,5328,122],{"class":108},[84,5330,5332,5335,5337,5339,5341,5343],{"class":86,"line":5331},92,[84,5333,5334],{"class":386}," highlight",[84,5336,155],{"class":108},[84,5338,152],{"class":144},[84,5340,832],{"class":148},[84,5342,152],{"class":144},[84,5344,165],{"class":108},[84,5346,5348,5351,5353,5355],{"class":86,"line":5347},93,[84,5349,5350],{"class":386}," nav",[84,5352,155],{"class":108},[84,5354,203],{"class":97},[84,5356,165],{"class":108},[84,5358,5360,5363,5365,5367],{"class":86,"line":5359},94,[84,5361,5362],{"class":386}," resize",[84,5364,155],{"class":108},[84,5366,203],{"class":97},[84,5368,165],{"class":108},[84,5370,5372,5375,5377,5379,5381,5384],{"class":86,"line":5371},95,[84,5373,5374],{"class":386}," toolbar",[84,5376,155],{"class":108},[84,5378,1280],{"class":112},[84,5380,254],{"class":108},[84,5382,5383],{"class":112},"toolbar",[84,5385,165],{"class":108},[84,5387,5389,5392,5394,5396,5399,5401],{"class":86,"line":5388},96,[84,5390,5391],{"class":386}," edit",[84,5393,155],{"class":108},[84,5395,152],{"class":144},[84,5397,5398],{"class":148},"_blank",[84,5400,152],{"class":144},[84,5402,165],{"class":108},[84,5404,5406,5409,5411],{"class":86,"line":5405},97,[84,5407,5408],{"class":386}," xml",[84,5410,155],{"class":108},[84,5412,5413],{"class":112},"xmlData\n",[84,5415,5417],{"class":86,"line":5416},98,[84,5418,480],{"class":108},[84,5420,5422],{"class":86,"line":5421},99,[84,5423,240],{"emptyLinePlaceholder":239},[84,5425,5427,5429,5431,5434,5436,5438,5441,5443,5445,5447,5449,5451,5453,5455],{"class":86,"line":5426},100,[84,5428,5253],{"class":112},[84,5430,254],{"class":108},[84,5432,5433],{"class":104},"setAttribute",[84,5435,131],{"class":108},[84,5437,152],{"class":144},[84,5439,5440],{"class":148},"data-mxgraph",[84,5442,152],{"class":144},[84,5444,136],{"class":108},[84,5446,812],{"class":112},[84,5448,254],{"class":108},[84,5450,817],{"class":104},[84,5452,131],{"class":108},[84,5454,5324],{"class":112},[84,5456,4833],{"class":108},[84,5458,5460,5462,5464,5466,5468,5470,5472,5474],{"class":86,"line":5459},101,[84,5461,5202],{"class":112},[84,5463,254],{"class":108},[84,5465,768],{"class":112},[84,5467,254],{"class":108},[84,5469,1029],{"class":104},[84,5471,131],{"class":108},[84,5473,5229],{"class":112},[84,5475,701],{"class":108},[84,5477,5479],{"class":86,"line":5478},102,[84,5480,240],{"emptyLinePlaceholder":239},[84,5482,5484,5487,5489,5491,5493,5495,5497,5499,5501],{"class":86,"line":5483},103,[84,5485,5486],{"class":97}," if",[84,5488,4686],{"class":108},[84,5490,2681],{"class":112},[84,5492,4691],{"class":97},[84,5494,4694],{"class":1298},[84,5496,4697],{"class":108},[84,5498,4700],{"class":112},[84,5500,116],{"class":108},[84,5502,122],{"class":108},[84,5504,5506,5509,5511,5513,5515,5517,5519,5521,5524],{"class":86,"line":5505},104,[84,5507,5508],{"class":108}," (",[84,5510,2681],{"class":112},[84,5512,4691],{"class":97},[84,5514,4694],{"class":1298},[84,5516,4697],{"class":108},[84,5518,4700],{"class":112},[84,5520,254],{"class":108},[84,5522,5523],{"class":104},"processElements",[84,5525,783],{"class":108},[84,5527,5529],{"class":86,"line":5528},105,[84,5530,480],{"class":108},[84,5532,5534],{"class":86,"line":5533},106,[84,5535,485],{"class":108},[84,5537,5539],{"class":86,"line":5538},107,[84,5540,240],{"emptyLinePlaceholder":239},[84,5542,5544,5547,5549,5551,5553],{"class":86,"line":5543},108,[84,5545,5546],{"class":112}," isLoading",[84,5548,254],{"class":108},[84,5550,768],{"class":112},[84,5552,297],{"class":108},[84,5554,5555],{"class":97}," false\n",[84,5557,5559,5561,5563,5565,5567,5569,5571,5573],{"class":86,"line":5558},109,[84,5560,1895],{"class":108},[84,5562,1898],{"class":97},[84,5564,249],{"class":108},[84,5566,5043],{"class":112},[84,5568,155],{"class":108},[84,5570,5048],{"class":1298},[84,5572,116],{"class":108},[84,5574,122],{"class":108},[84,5576,5578,5581,5583,5585,5587,5590,5592],{"class":86,"line":5577},110,[84,5579,5580],{"class":112}," error",[84,5582,254],{"class":108},[84,5584,768],{"class":112},[84,5586,297],{"class":108},[84,5588,5589],{"class":112}," e",[84,5591,254],{"class":108},[84,5593,5594],{"class":112},"message\n",[84,5596,5598,5600,5602,5604,5606],{"class":86,"line":5597},111,[84,5599,5546],{"class":112},[84,5601,254],{"class":108},[84,5603,768],{"class":112},[84,5605,297],{"class":108},[84,5607,5555],{"class":97},[84,5609,5611],{"class":86,"line":5610},112,[84,5612,348],{"class":108},[84,5614,5616],{"class":86,"line":5615},113,[84,5617,1944],{"class":108},[84,5619,5621],{"class":86,"line":5620},114,[84,5622,240],{"emptyLinePlaceholder":239},[84,5624,5626,5628,5630,5632,5634,5636],{"class":86,"line":5625},115,[84,5627,685],{"class":260},[84,5629,4233],{"class":104},[84,5631,297],{"class":108},[84,5633,725],{"class":108},[84,5635,119],{"class":108},[84,5637,122],{"class":108},[84,5639,5641,5644],{"class":86,"line":5640},116,[84,5642,5643],{"class":104}," initializeDiagram",[84,5645,783],{"class":108},[84,5647,5649],{"class":86,"line":5648},117,[84,5650,1944],{"class":108},[84,5652,5654],{"class":86,"line":5653},118,[84,5655,240],{"emptyLinePlaceholder":239},[84,5657,5659,5661,5663,5665],{"class":86,"line":5658},119,[84,5660,717],{"class":104},[84,5662,807],{"class":108},[84,5664,119],{"class":108},[84,5666,122],{"class":108},[84,5668,5670,5672],{"class":86,"line":5669},120,[84,5671,5643],{"class":104},[84,5673,783],{"class":108},[84,5675,5677],{"class":86,"line":5676},121,[84,5678,354],{"class":108},[84,5680,5682],{"class":86,"line":5681},122,[84,5683,240],{"emptyLinePlaceholder":239},[84,5685,5687,5690,5692,5694,5696,5698,5700,5702,5704,5706],{"class":86,"line":5686},123,[84,5688,5689],{"class":104},"watch",[84,5691,807],{"class":108},[84,5693,119],{"class":108},[84,5695,4921],{"class":112},[84,5697,254],{"class":108},[84,5699,4961],{"class":112},[84,5701,136],{"class":108},[84,5703,725],{"class":108},[84,5705,119],{"class":108},[84,5707,122],{"class":108},[84,5709,5711,5713],{"class":86,"line":5710},124,[84,5712,5643],{"class":104},[84,5714,783],{"class":108},[84,5716,5718],{"class":86,"line":5717},125,[84,5719,354],{"class":108},[84,5721,5723,5725,5727],{"class":86,"line":5722},126,[84,5724,616],{"class":108},[84,5726,631],{"class":97},[84,5728,531],{"class":108},[84,5730,5732],{"class":86,"line":5731},127,[84,5733,240],{"emptyLinePlaceholder":239},[84,5735,5737,5739,5741,5743],{"class":86,"line":5736},128,[84,5738,525],{"class":108},[84,5740,2060],{"class":97},[84,5742,2063],{"class":112},[84,5744,531],{"class":108},[84,5746,5748,5750,5752],{"class":86,"line":5747},129,[84,5749,254],{"class":108},[84,5751,4086],{"class":112},[84,5753,122],{"class":108},[84,5755,5757,5760,5762,5765],{"class":86,"line":5756},130,[84,5758,5759],{"class":386}," position",[84,5761,2083],{"class":108},[84,5763,5764],{"class":2092}," relative",[84,5766,2102],{"class":108},[84,5768,5770,5772,5774,5776,5778],{"class":86,"line":5769},131,[84,5771,3773],{"class":386},[84,5773,2083],{"class":108},[84,5775,3778],{"class":300},[84,5777,3781],{"class":260},[84,5779,2102],{"class":108},[84,5781,5783],{"class":86,"line":5782},132,[84,5784,1944],{"class":108},[84,5786,5788],{"class":86,"line":5787},133,[84,5789,240],{"emptyLinePlaceholder":239},[84,5791,5793,5795,5797],{"class":86,"line":5792},134,[84,5794,254],{"class":108},[84,5796,4116],{"class":112},[84,5798,165],{"class":108},[84,5800,5802,5804,5806],{"class":86,"line":5801},135,[84,5803,254],{"class":108},[84,5805,4197],{"class":112},[84,5807,122],{"class":108},[84,5809,5811,5814,5816,5819],{"class":86,"line":5810},136,[84,5812,5813],{"class":386}," display",[84,5815,2083],{"class":108},[84,5817,5818],{"class":2092}," flex",[84,5820,2102],{"class":108},[84,5822,5824,5827,5829,5832],{"class":86,"line":5823},137,[84,5825,5826],{"class":386}," flex-direction",[84,5828,2083],{"class":108},[84,5830,5831],{"class":2092}," column",[84,5833,2102],{"class":108},[84,5835,5837,5840,5842,5845],{"class":86,"line":5836},138,[84,5838,5839],{"class":386}," align-items",[84,5841,2083],{"class":108},[84,5843,5844],{"class":2092}," center",[84,5846,2102],{"class":108},[84,5848,5850,5853,5855,5857],{"class":86,"line":5849},139,[84,5851,5852],{"class":386}," justify-content",[84,5854,2083],{"class":108},[84,5856,5844],{"class":2092},[84,5858,2102],{"class":108},[84,5860,5862,5865,5867,5869,5871],{"class":86,"line":5861},140,[84,5863,5864],{"class":386}," min-height",[84,5866,2083],{"class":108},[84,5868,3677],{"class":300},[84,5870,2089],{"class":260},[84,5872,2102],{"class":108},[84,5874,5876,5879,5881,5884,5887],{"class":86,"line":5875},141,[84,5877,5878],{"class":386}," padding",[84,5880,2083],{"class":108},[84,5882,5883],{"class":300}," 2",[84,5885,5886],{"class":260},"rem",[84,5888,2102],{"class":108},[84,5890,5892],{"class":86,"line":5891},142,[84,5893,1944],{"class":108},[84,5895,5897],{"class":86,"line":5896},143,[84,5898,240],{"emptyLinePlaceholder":239},[84,5900,5902,5904,5906],{"class":86,"line":5901},144,[84,5903,254],{"class":108},[84,5905,4135],{"class":112},[84,5907,122],{"class":108},[84,5909,5911,5913,5915,5918,5920],{"class":86,"line":5910},145,[84,5912,3773],{"class":386},[84,5914,2083],{"class":108},[84,5916,5917],{"class":300}," 40",[84,5919,2089],{"class":260},[84,5921,2102],{"class":108},[84,5923,5925,5927,5929,5931,5933],{"class":86,"line":5924},146,[84,5926,3788],{"class":386},[84,5928,2083],{"class":108},[84,5930,5917],{"class":300},[84,5932,2089],{"class":260},[84,5934,2102],{"class":108},[84,5936,5938,5940,5942,5944,5946,5948,5950,5953],{"class":86,"line":5937},147,[84,5939,2080],{"class":386},[84,5941,2083],{"class":108},[84,5943,2113],{"class":300},[84,5945,2089],{"class":260},[84,5947,2093],{"class":2092},[84,5949,2096],{"class":108},[84,5951,5952],{"class":2092},"f3f3f3",[84,5954,2102],{"class":108},[84,5956,5958,5961,5963,5965,5967,5969,5971,5974],{"class":86,"line":5957},148,[84,5959,5960],{"class":386}," border-top",[84,5962,2083],{"class":108},[84,5964,2113],{"class":300},[84,5966,2089],{"class":260},[84,5968,2093],{"class":2092},[84,5970,2096],{"class":108},[84,5972,5973],{"class":2092},"3498db",[84,5975,2102],{"class":108},[84,5977,5979,5981,5983,5986,5988],{"class":86,"line":5978},149,[84,5980,2108],{"class":386},[84,5982,2083],{"class":108},[84,5984,5985],{"class":300}," 50",[84,5987,3781],{"class":260},[84,5989,2102],{"class":108},[84,5991,5993,5996,5998,6001,6003,6006,6009,6012],{"class":86,"line":5992},150,[84,5994,5995],{"class":386}," animation",[84,5997,2083],{"class":108},[84,5999,6000],{"class":2995}," spin ",[84,6002,1404],{"class":300},[84,6004,6005],{"class":260},"s",[84,6007,6008],{"class":2092}," linear",[84,6010,6011],{"class":2092}," infinite",[84,6013,2102],{"class":108},[84,6015,6017,6020,6022,6024,6026],{"class":86,"line":6016},151,[84,6018,6019],{"class":386}," margin-bottom",[84,6021,2083],{"class":108},[84,6023,2086],{"class":300},[84,6025,5886],{"class":260},[84,6027,2102],{"class":108},[84,6029,6031],{"class":86,"line":6030},152,[84,6032,1944],{"class":108},[84,6034,6036],{"class":86,"line":6035},153,[84,6037,240],{"emptyLinePlaceholder":239},[84,6039,6041,6044,6047,6050],{"class":86,"line":6040},154,[84,6042,6043],{"class":108},"@",[84,6045,6046],{"class":97},"keyframes",[84,6048,6049],{"class":112}," spin",[84,6051,122],{"class":108},[84,6053,6055,6058,6060,6063,6065,6068,6070,6072,6075,6078],{"class":86,"line":6054},155,[84,6056,6057],{"class":104}," 0%",[84,6059,656],{"class":108},[84,6061,6062],{"class":386}," transform",[84,6064,2083],{"class":108},[84,6066,6067],{"class":386}," rotate",[84,6069,131],{"class":108},[84,6071,1166],{"class":300},[84,6073,6074],{"class":260},"deg",[84,6076,6077],{"class":108},");",[84,6079,2412],{"class":108},[84,6081,6083,6086,6088,6090,6092,6094,6096,6099,6101,6103],{"class":86,"line":6082},156,[84,6084,6085],{"class":104}," 100%",[84,6087,656],{"class":108},[84,6089,6062],{"class":386},[84,6091,2083],{"class":108},[84,6093,6067],{"class":386},[84,6095,131],{"class":108},[84,6097,6098],{"class":300},"360",[84,6100,6074],{"class":260},[84,6102,6077],{"class":108},[84,6104,2412],{"class":108},[84,6106,6108],{"class":86,"line":6107},157,[84,6109,1944],{"class":108},[84,6111,6113],{"class":86,"line":6112},158,[84,6114,240],{"emptyLinePlaceholder":239},[84,6116,6118,6120,6122],{"class":86,"line":6117},159,[84,6119,254],{"class":108},[84,6121,4197],{"class":112},[84,6123,122],{"class":108},[84,6125,6127,6130,6132,6134,6137],{"class":86,"line":6126},160,[84,6128,6129],{"class":386}," color",[84,6131,2083],{"class":108},[84,6133,2096],{"class":108},[84,6135,6136],{"class":2092},"e74c3c",[84,6138,2102],{"class":108},[84,6140,6142],{"class":86,"line":6141},161,[84,6143,1944],{"class":108},[84,6145,6147],{"class":86,"line":6146},162,[84,6148,240],{"emptyLinePlaceholder":239},[84,6150,6152,6154,6156,6159],{"class":86,"line":6151},163,[84,6153,254],{"class":108},[84,6155,4197],{"class":112},[84,6157,6158],{"class":97}," button",[84,6160,122],{"class":108},[84,6162,6164,6167,6169,6171,6173],{"class":86,"line":6163},164,[84,6165,6166],{"class":386}," margin-top",[84,6168,2083],{"class":108},[84,6170,2086],{"class":300},[84,6172,5886],{"class":260},[84,6174,2102],{"class":108},[84,6176,6178,6180,6182,6185,6187,6189,6191],{"class":86,"line":6177},165,[84,6179,5878],{"class":386},[84,6181,2083],{"class":108},[84,6183,6184],{"class":300}," 0.5",[84,6186,5886],{"class":260},[84,6188,2086],{"class":300},[84,6190,5886],{"class":260},[84,6192,2102],{"class":108},[84,6194,6196,6199,6201,6203,6205],{"class":86,"line":6195},166,[84,6197,6198],{"class":386}," background-color",[84,6200,2083],{"class":108},[84,6202,2096],{"class":108},[84,6204,5973],{"class":2092},[84,6206,2102],{"class":108},[84,6208,6210,6212,6214,6217],{"class":86,"line":6209},167,[84,6211,6129],{"class":386},[84,6213,2083],{"class":108},[84,6215,6216],{"class":2092}," white",[84,6218,2102],{"class":108},[84,6220,6222,6224,6226,6229],{"class":86,"line":6221},168,[84,6223,2080],{"class":386},[84,6225,2083],{"class":108},[84,6227,6228],{"class":2092}," none",[84,6230,2102],{"class":108},[84,6232,6234,6236,6238,6240,6242],{"class":86,"line":6233},169,[84,6235,2108],{"class":386},[84,6237,2083],{"class":108},[84,6239,2113],{"class":300},[84,6241,2089],{"class":260},[84,6243,2102],{"class":108},[84,6245,6247,6250,6252,6255],{"class":86,"line":6246},170,[84,6248,6249],{"class":386}," cursor",[84,6251,2083],{"class":108},[84,6253,6254],{"class":2092}," pointer",[84,6256,2102],{"class":108},[84,6258,6260],{"class":86,"line":6259},171,[84,6261,1944],{"class":108},[84,6263,6265],{"class":86,"line":6264},172,[84,6266,240],{"emptyLinePlaceholder":239},[84,6268,6270,6272,6274,6276,6278,6281],{"class":86,"line":6269},173,[84,6271,254],{"class":108},[84,6273,4197],{"class":112},[84,6275,6158],{"class":97},[84,6277,2083],{"class":108},[84,6279,6280],{"class":112},"hover",[84,6282,122],{"class":108},[84,6284,6286,6288,6290,6292,6295],{"class":86,"line":6285},174,[84,6287,6198],{"class":386},[84,6289,2083],{"class":108},[84,6291,2096],{"class":108},[84,6293,6294],{"class":2092},"2980b9",[84,6296,2102],{"class":108},[84,6298,6300],{"class":86,"line":6299},175,[84,6301,1944],{"class":108},[84,6303,6305],{"class":86,"line":6304},176,[84,6306,240],{"emptyLinePlaceholder":239},[84,6308,6310,6312,6314],{"class":86,"line":6309},177,[84,6311,254],{"class":108},[84,6313,4303],{"class":112},[84,6315,122],{"class":108},[84,6317,6319,6321,6323,6325,6327],{"class":86,"line":6318},178,[84,6320,3773],{"class":386},[84,6322,2083],{"class":108},[84,6324,3778],{"class":300},[84,6326,3781],{"class":260},[84,6328,2102],{"class":108},[84,6330,6332,6335,6337,6340],{"class":86,"line":6331},179,[84,6333,6334],{"class":386}," overflow",[84,6336,2083],{"class":108},[84,6338,6339],{"class":2092}," auto",[84,6341,2102],{"class":108},[84,6343,6345],{"class":86,"line":6344},180,[84,6346,1944],{"class":108},[84,6348,6350],{"class":86,"line":6349},181,[84,6351,240],{"emptyLinePlaceholder":239},[84,6353,6355,6357,6359,6362,6364,6366,6369],{"class":86,"line":6354},182,[84,6356,254],{"class":108},[84,6358,4303],{"class":112},[84,6360,6361],{"class":2995}," :deep(",[84,6363,254],{"class":108},[84,6365,563],{"class":112},[84,6367,6368],{"class":2995},") ",[84,6370,6371],{"class":108},"{\n",[84,6373,6375,6378,6380,6382,6384],{"class":86,"line":6374},183,[84,6376,6377],{"class":386}," max-width",[84,6379,2083],{"class":108},[84,6381,3778],{"class":300},[84,6383,3781],{"class":260},[84,6385,2102],{"class":108},[84,6387,6389,6391,6393,6395],{"class":86,"line":6388},184,[84,6390,6334],{"class":386},[84,6392,2083],{"class":108},[84,6394,6339],{"class":2092},[84,6396,2102],{"class":108},[84,6398,6400],{"class":86,"line":6399},185,[84,6401,1944],{"class":108},[84,6403,6405,6407,6409],{"class":86,"line":6404},186,[84,6406,616],{"class":108},[84,6408,2060],{"class":97},[84,6410,531],{"class":108},[61,6412,6414],{"id":6413},"使用例pagesdiagramvue","使用例（pages/diagram.vue）",[74,6416,6418],{"className":516,"code":6417,"language":518,"meta":79,"style":79},"\u003Ctemplate>\n \u003Cdiv class=\"page-container\">\n \u003Ch1>システムアーキテクチャ図\u003C/h1>\n\n \u003CClientOnly fallback-tag=\"div\" fallback=\"図を読み込み中...\">\n \u003CDrawioViewer\n source=\"/2025-11-18/freee-ai-system.drawio\"\n :height=\"'800px'\"\n :toolbar=\"'zoom layers lightbox'\"\n @error=\"handleError\"\n />\n \u003C/ClientOnly>\n\n \u003Cdiv v-if=\"errorMessage\" class=\"error-banner\">\n {{ errorMessage }}\n \u003C/div>\n \u003C/div>\n\u003C/template>\n\n\u003Cscript setup lang=\"ts\">\nconst errorMessage = ref\u003Cstring | null>(null)\n\nconst handleError = (error: string) => {\n errorMessage.value = error\n console.error('Diagram error:', error)\n}\n\nuseHead({\n title: 'システムアーキテクチャ図',\n meta: [\n {\n name: 'description',\n content: 'インタラクティブなシステムアーキテクチャ図'\n }\n ]\n})\n\u003C/script>\n\n\u003Cstyle scoped>\n.page-container {\n max-width: 1400px;\n margin: 0 auto;\n padding: 2rem;\n}\n\n.error-banner {\n background: #e74c3c;\n color: white;\n padding: 1rem;\n border-radius: 4px;\n margin-top: 1rem;\n}\n\u003C/style>\n",[81,6419,6420,6428,6447,6464,6468,6496,6503,6517,6531,6545,6559,6564,6572,6576,6606,6611,6619,6627,6635,6639,6659,6683,6687,6709,6723,6747,6751,6755,6762,6777,6784,6789,6805,6819,6823,6828,6832,6840,6844,6854,6862,6875,6889,6901,6905,6909,6917,6930,6940,6952,6964,6976,6980],{"__ignoreMap":79},[84,6421,6422,6424,6426],{"class":86,"line":87},[84,6423,525],{"class":108},[84,6425,528],{"class":97},[84,6427,531],{"class":108},[84,6429,6430,6432,6434,6436,6438,6440,6443,6445],{"class":86,"line":94},[84,6431,536],{"class":108},[84,6433,1082],{"class":97},[84,6435,1085],{"class":112},[84,6437,557],{"class":108},[84,6439,560],{"class":144},[84,6441,6442],{"class":148},"page-container",[84,6444,560],{"class":144},[84,6446,531],{"class":108},[84,6448,6449,6451,6453,6455,6458,6460,6462],{"class":86,"line":125},[84,6450,546],{"class":108},[84,6452,10],{"class":97},[84,6454,2992],{"class":108},[84,6456,6457],{"class":2995},"システムアーキテクチャ図",[84,6459,616],{"class":108},[84,6461,10],{"class":97},[84,6463,531],{"class":108},[84,6465,6466],{"class":86,"line":141},[84,6467,240],{"emptyLinePlaceholder":239},[84,6469,6470,6472,6474,6476,6478,6480,6482,6484,6486,6488,6490,6492,6494],{"class":86,"line":168},[84,6471,546],{"class":108},[84,6473,539],{"class":97},[84,6475,2704],{"class":112},[84,6477,557],{"class":108},[84,6479,560],{"class":144},[84,6481,1082],{"class":148},[84,6483,560],{"class":144},[84,6485,2715],{"class":112},[84,6487,557],{"class":108},[84,6489,560],{"class":144},[84,6491,2722],{"class":148},[84,6493,560],{"class":144},[84,6495,531],{"class":108},[84,6497,6498,6500],{"class":86,"line":189},[84,6499,1109],{"class":108},[84,6501,6502],{"class":97},"DrawioViewer\n",[84,6504,6505,6508,6510,6512,6515],{"class":86,"line":210},[84,6506,6507],{"class":112}," source",[84,6509,557],{"class":108},[84,6511,560],{"class":144},[84,6513,6514],{"class":148},"/2025-11-18/freee-ai-system.drawio",[84,6516,566],{"class":144},[84,6518,6519,6522,6524,6526,6529],{"class":86,"line":230},[84,6520,6521],{"class":112}," :height",[84,6523,557],{"class":108},[84,6525,560],{"class":144},[84,6527,6528],{"class":148},"'800px'",[84,6530,566],{"class":144},[84,6532,6533,6536,6538,6540,6543],{"class":86,"line":236},[84,6534,6535],{"class":112}," :toolbar",[84,6537,557],{"class":108},[84,6539,560],{"class":144},[84,6541,6542],{"class":148},"'zoom layers lightbox'",[84,6544,566],{"class":144},[84,6546,6547,6550,6552,6554,6557],{"class":86,"line":243},[84,6548,6549],{"class":112}," @error",[84,6551,557],{"class":108},[84,6553,560],{"class":144},[84,6555,6556],{"class":148},"handleError",[84,6558,566],{"class":144},[84,6560,6561],{"class":86,"line":276},[84,6562,6563],{"class":108}," />\n",[84,6565,6566,6568,6570],{"class":86,"line":304},[84,6567,1194],{"class":108},[84,6569,539],{"class":97},[84,6571,531],{"class":108},[84,6573,6574],{"class":86,"line":332},[84,6575,240],{"emptyLinePlaceholder":239},[84,6577,6578,6580,6582,6584,6586,6588,6591,6593,6595,6597,6599,6602,6604],{"class":86,"line":345},[84,6579,546],{"class":108},[84,6581,1082],{"class":97},[84,6583,3029],{"class":112},[84,6585,557],{"class":108},[84,6587,560],{"class":144},[84,6589,6590],{"class":148},"errorMessage",[84,6592,560],{"class":144},[84,6594,1085],{"class":112},[84,6596,557],{"class":108},[84,6598,560],{"class":144},[84,6600,6601],{"class":148},"error-banner",[84,6603,560],{"class":144},[84,6605,531],{"class":108},[84,6607,6608],{"class":86,"line":351},[84,6609,6610],{"class":2995}," {{ errorMessage }}\n",[84,6612,6613,6615,6617],{"class":86,"line":708},[84,6614,1194],{"class":108},[84,6616,1082],{"class":97},[84,6618,531],{"class":108},[84,6620,6621,6623,6625],{"class":86,"line":714},[84,6622,607],{"class":108},[84,6624,1082],{"class":97},[84,6626,531],{"class":108},[84,6628,6629,6631,6633],{"class":86,"line":732},[84,6630,616],{"class":108},[84,6632,528],{"class":97},[84,6634,531],{"class":108},[84,6636,6637],{"class":86,"line":760},[84,6638,240],{"emptyLinePlaceholder":239},[84,6640,6641,6643,6645,6647,6649,6651,6653,6655,6657],{"class":86,"line":786},[84,6642,525],{"class":108},[84,6644,631],{"class":97},[84,6646,634],{"class":112},[84,6648,637],{"class":112},[84,6650,557],{"class":108},[84,6652,560],{"class":144},[84,6654,644],{"class":148},[84,6656,560],{"class":144},[84,6658,531],{"class":108},[84,6660,6661,6663,6665,6667,6669,6671,6673,6675,6677,6679,6681],{"class":86,"line":791},[84,6662,685],{"class":260},[84,6664,6590],{"class":112},[84,6666,297],{"class":108},[84,6668,693],{"class":104},[84,6670,525],{"class":108},[84,6672,4589],{"class":1298},[84,6674,1326],{"class":108},[84,6676,1329],{"class":260},[84,6678,1332],{"class":108},[84,6680,1335],{"class":260},[84,6682,701],{"class":108},[84,6684,6685],{"class":86,"line":796},[84,6686,240],{"emptyLinePlaceholder":239},[84,6688,6689,6691,6693,6695,6697,6699,6701,6703,6705,6707],{"class":86,"line":822},[84,6690,685],{"class":260},[84,6692,6556],{"class":104},[84,6694,297],{"class":108},[84,6696,249],{"class":108},[84,6698,1903],{"class":112},[84,6700,155],{"class":108},[84,6702,4589],{"class":1298},[84,6704,116],{"class":108},[84,6706,119],{"class":108},[84,6708,122],{"class":108},[84,6710,6711,6714,6716,6718,6720],{"class":86,"line":839},[84,6712,6713],{"class":112}," errorMessage",[84,6715,254],{"class":108},[84,6717,768],{"class":112},[84,6719,297],{"class":108},[84,6721,6722],{"class":112}," error\n",[84,6724,6725,6728,6730,6732,6734,6736,6739,6741,6743,6745],{"class":86,"line":851},[84,6726,6727],{"class":112}," console",[84,6729,254],{"class":108},[84,6731,1903],{"class":104},[84,6733,131],{"class":108},[84,6735,152],{"class":144},[84,6737,6738],{"class":148},"Diagram error:",[84,6740,152],{"class":144},[84,6742,136],{"class":108},[84,6744,1931],{"class":112},[84,6746,701],{"class":108},[84,6748,6749],{"class":86,"line":863},[84,6750,1944],{"class":108},[84,6752,6753],{"class":86,"line":880},[84,6754,240],{"emptyLinePlaceholder":239},[84,6756,6757,6760],{"class":86,"line":895},[84,6758,6759],{"class":104},"useHead",[84,6761,381],{"class":108},[84,6763,6764,6767,6769,6771,6773,6775],{"class":86,"line":901},[84,6765,6766],{"class":386}," title",[84,6768,155],{"class":108},[84,6770,152],{"class":144},[84,6772,6457],{"class":148},[84,6774,152],{"class":144},[84,6776,165],{"class":108},[84,6778,6779,6782],{"class":86,"line":1442},[84,6780,6781],{"class":386}," meta",[84,6783,2572],{"class":108},[84,6785,6786],{"class":86,"line":1457},[84,6787,6788],{"class":108}," {\n",[84,6790,6791,6794,6796,6798,6801,6803],{"class":86,"line":1462},[84,6792,6793],{"class":386}," name",[84,6795,155],{"class":108},[84,6797,152],{"class":144},[84,6799,6800],{"class":148},"description",[84,6802,152],{"class":144},[84,6804,165],{"class":108},[84,6806,6807,6810,6812,6814,6817],{"class":86,"line":1493},[84,6808,6809],{"class":386}," content",[84,6811,155],{"class":108},[84,6813,152],{"class":144},[84,6815,6816],{"class":148},"インタラクティブなシステムアーキテクチャ図",[84,6818,329],{"class":144},[84,6820,6821],{"class":86,"line":1498},[84,6822,485],{"class":108},[84,6824,6825],{"class":86,"line":1503},[84,6826,6827],{"class":108}," ]\n",[84,6829,6830],{"class":86,"line":1531},[84,6831,354],{"class":108},[84,6833,6834,6836,6838],{"class":86,"line":1568},[84,6835,616],{"class":108},[84,6837,631],{"class":97},[84,6839,531],{"class":108},[84,6841,6842],{"class":86,"line":1573},[84,6843,240],{"emptyLinePlaceholder":239},[84,6845,6846,6848,6850,6852],{"class":86,"line":1581},[84,6847,525],{"class":108},[84,6849,2060],{"class":97},[84,6851,2063],{"class":112},[84,6853,531],{"class":108},[84,6855,6856,6858,6860],{"class":86,"line":1609},[84,6857,254],{"class":108},[84,6859,6442],{"class":112},[84,6861,122],{"class":108},[84,6863,6864,6866,6868,6871,6873],{"class":86,"line":1614},[84,6865,6377],{"class":386},[84,6867,2083],{"class":108},[84,6869,6870],{"class":300}," 1400",[84,6872,2089],{"class":260},[84,6874,2102],{"class":108},[84,6876,6877,6880,6882,6885,6887],{"class":86,"line":1642},[84,6878,6879],{"class":386}," margin",[84,6881,2083],{"class":108},[84,6883,6884],{"class":300}," 0",[84,6886,6339],{"class":2092},[84,6888,2102],{"class":108},[84,6890,6891,6893,6895,6897,6899],{"class":86,"line":1648},[84,6892,5878],{"class":386},[84,6894,2083],{"class":108},[84,6896,5883],{"class":300},[84,6898,5886],{"class":260},[84,6900,2102],{"class":108},[84,6902,6903],{"class":86,"line":1662},[84,6904,1944],{"class":108},[84,6906,6907],{"class":86,"line":1667},[84,6908,240],{"emptyLinePlaceholder":239},[84,6910,6911,6913,6915],{"class":86,"line":1692},[84,6912,254],{"class":108},[84,6914,6601],{"class":112},[84,6916,122],{"class":108},[84,6918,6919,6922,6924,6926,6928],{"class":86,"line":1712},[84,6920,6921],{"class":386}," background",[84,6923,2083],{"class":108},[84,6925,2096],{"class":108},[84,6927,6136],{"class":2092},[84,6929,2102],{"class":108},[84,6931,6932,6934,6936,6938],{"class":86,"line":1717},[84,6933,6129],{"class":386},[84,6935,2083],{"class":108},[84,6937,6216],{"class":2092},[84,6939,2102],{"class":108},[84,6941,6942,6944,6946,6948,6950],{"class":86,"line":1741},[84,6943,5878],{"class":386},[84,6945,2083],{"class":108},[84,6947,2086],{"class":300},[84,6949,5886],{"class":260},[84,6951,2102],{"class":108},[84,6953,6954,6956,6958,6960,6962],{"class":86,"line":1753},[84,6955,2108],{"class":386},[84,6957,2083],{"class":108},[84,6959,2113],{"class":300},[84,6961,2089],{"class":260},[84,6963,2102],{"class":108},[84,6965,6966,6968,6970,6972,6974],{"class":86,"line":1770},[84,6967,6166],{"class":386},[84,6969,2083],{"class":108},[84,6971,2086],{"class":300},[84,6973,5886],{"class":260},[84,6975,2102],{"class":108},[84,6977,6978],{"class":86,"line":1782},[84,6979,1944],{"class":108},[84,6981,6982,6984,6986],{"class":86,"line":1793},[84,6983,616],{"class":108},[84,6985,2060],{"class":97},[84,6987,531],{"class":108},[46,6989,6990],{"id":6990},"必要な設定ファイル",[61,6992,6994],{"id":6993},"nuxtconfigts推奨設定","nuxt.config.ts（推奨設定）",[74,6996,6998],{"className":76,"code":6997,"language":78,"meta":79,"style":79},"// https://nuxt.com/docs/api/configuration/nuxt-config\nexport default defineNuxtConfig({\n compatibilityDate: '2024-11-01',\n devtools: { enabled: true },\n\n // コンポーネントの自動インポート\n components: [\n {\n path: '~/components',\n pathPrefix: false,\n },\n ],\n\n // TypeScript設定\n typescript: {\n strict: true,\n typeCheck: true\n },\n\n // CORSとルート設定\n routeRules: {\n // Draw.ioファイル用のCORS設定\n '/diagrams/**': {\n cors: true,\n headers: {\n 'Access-Control-Allow-Origin': '*',\n 'Access-Control-Allow-Methods': 'GET,OPTIONS',\n 'Cache-Control': 'public, max-age=86400', // 24時間キャッシュ\n }\n }\n },\n\n // Nitro設定（静的ファイル配信）\n nitro: {\n publicAssets: [\n {\n baseURL: '/diagrams',\n dir: 'public/diagrams',\n maxAge: 60 * 60 * 24 * 7 // 7日間\n }\n ]\n },\n\n // セキュリティヘッダー（iframe許可）\n app: {\n head: {\n meta: [\n {\n 'http-equiv': 'Content-Security-Policy',\n content: \"frame-src 'self' https://embed.diagrams.net https://viewer.diagrams.net;\"\n }\n ]\n }\n }\n})\n",[81,6999,7000,7005,7015,7031,7048,7052,7057,7064,7068,7084,7095,7100,7105,7109,7114,7121,7132,7141,7145,7149,7154,7160,7165,7175,7185,7191,7209,7227,7249,7253,7257,7261,7265,7270,7276,7282,7286,7300,7314,7337,7341,7345,7349,7353,7358,7365,7372,7379,7384,7404,7418,7422,7427,7431,7435],{"__ignoreMap":79},[84,7001,7002],{"class":86,"line":87},[84,7003,7004],{"class":90},"// https://nuxt.com/docs/api/configuration/nuxt-config\n",[84,7006,7007,7009,7011,7013],{"class":86,"line":94},[84,7008,98],{"class":97},[84,7010,101],{"class":97},[84,7012,378],{"class":104},[84,7014,381],{"class":108},[84,7016,7017,7020,7022,7024,7027,7029],{"class":86,"line":125},[84,7018,7019],{"class":386}," compatibilityDate",[84,7021,155],{"class":108},[84,7023,152],{"class":144},[84,7025,7026],{"class":148},"2024-11-01",[84,7028,152],{"class":144},[84,7030,165],{"class":108},[84,7032,7033,7036,7038,7041,7043,7045],{"class":86,"line":141},[84,7034,7035],{"class":386}," devtools",[84,7037,2397],{"class":108},[84,7039,7040],{"class":386},"enabled",[84,7042,155],{"class":108},[84,7044,203],{"class":97},[84,7046,7047],{"class":108}," },\n",[84,7049,7050],{"class":86,"line":168},[84,7051,240],{"emptyLinePlaceholder":239},[84,7053,7054],{"class":86,"line":189},[84,7055,7056],{"class":90}," // コンポーネントの自動インポート\n",[84,7058,7059,7062],{"class":86,"line":210},[84,7060,7061],{"class":386}," components",[84,7063,2572],{"class":108},[84,7065,7066],{"class":86,"line":230},[84,7067,6788],{"class":108},[84,7069,7070,7073,7075,7077,7080,7082],{"class":86,"line":236},[84,7071,7072],{"class":386}," path",[84,7074,155],{"class":108},[84,7076,152],{"class":144},[84,7078,7079],{"class":148},"~/components",[84,7081,152],{"class":144},[84,7083,165],{"class":108},[84,7085,7086,7089,7091,7093],{"class":86,"line":243},[84,7087,7088],{"class":386}," pathPrefix",[84,7090,155],{"class":108},[84,7092,1353],{"class":97},[84,7094,165],{"class":108},[84,7096,7097],{"class":86,"line":276},[84,7098,7099],{"class":108}," },\n",[84,7101,7102],{"class":86,"line":304},[84,7103,7104],{"class":108}," ],\n",[84,7106,7107],{"class":86,"line":332},[84,7108,240],{"emptyLinePlaceholder":239},[84,7110,7111],{"class":86,"line":345},[84,7112,7113],{"class":90}," // TypeScript設定\n",[84,7115,7116,7119],{"class":86,"line":351},[84,7117,7118],{"class":386}," typescript",[84,7120,390],{"class":108},[84,7122,7123,7126,7128,7130],{"class":86,"line":708},[84,7124,7125],{"class":386}," strict",[84,7127,155],{"class":108},[84,7129,203],{"class":97},[84,7131,165],{"class":108},[84,7133,7134,7137,7139],{"class":86,"line":714},[84,7135,7136],{"class":386}," typeCheck",[84,7138,155],{"class":108},[84,7140,2312],{"class":97},[84,7142,7143],{"class":86,"line":732},[84,7144,2282],{"class":108},[84,7146,7147],{"class":86,"line":760},[84,7148,240],{"emptyLinePlaceholder":239},[84,7150,7151],{"class":86,"line":786},[84,7152,7153],{"class":90}," // CORSとルート設定\n",[84,7155,7156,7158],{"class":86,"line":791},[84,7157,387],{"class":386},[84,7159,390],{"class":108},[84,7161,7162],{"class":86,"line":796},[84,7163,7164],{"class":90}," // Draw.ioファイル用のCORS設定\n",[84,7166,7167,7169,7171,7173],{"class":86,"line":822},[84,7168,145],{"class":144},[84,7170,397],{"class":148},[84,7172,152],{"class":144},[84,7174,390],{"class":108},[84,7176,7177,7179,7181,7183],{"class":86,"line":839},[84,7178,406],{"class":386},[84,7180,155],{"class":108},[84,7182,203],{"class":97},[84,7184,165],{"class":108},[84,7186,7187,7189],{"class":86,"line":851},[84,7188,417],{"class":386},[84,7190,390],{"class":108},[84,7192,7193,7195,7197,7199,7201,7203,7205,7207],{"class":86,"line":863},[84,7194,424],{"class":144},[84,7196,173],{"class":148},[84,7198,152],{"class":144},[84,7200,155],{"class":108},[84,7202,152],{"class":144},[84,7204,182],{"class":148},[84,7206,152],{"class":144},[84,7208,165],{"class":108},[84,7210,7211,7213,7215,7217,7219,7221,7223,7225],{"class":86,"line":880},[84,7212,424],{"class":144},[84,7214,149],{"class":148},[84,7216,152],{"class":144},[84,7218,155],{"class":108},[84,7220,152],{"class":144},[84,7222,453],{"class":148},[84,7224,152],{"class":144},[84,7226,165],{"class":108},[84,7228,7229,7231,7233,7235,7237,7239,7242,7244,7246],{"class":86,"line":895},[84,7230,424],{"class":144},[84,7232,2518],{"class":148},[84,7234,152],{"class":144},[84,7236,155],{"class":108},[84,7238,152],{"class":144},[84,7240,7241],{"class":148},"public, max-age=86400",[84,7243,152],{"class":144},[84,7245,2235],{"class":108},[84,7247,7248],{"class":90},"// 24時間キャッシュ\n",[84,7250,7251],{"class":86,"line":901},[84,7252,480],{"class":108},[84,7254,7255],{"class":86,"line":1442},[84,7256,485],{"class":108},[84,7258,7259],{"class":86,"line":1457},[84,7260,2282],{"class":108},[84,7262,7263],{"class":86,"line":1462},[84,7264,240],{"emptyLinePlaceholder":239},[84,7266,7267],{"class":86,"line":1493},[84,7268,7269],{"class":90}," // Nitro設定（静的ファイル配信）\n",[84,7271,7272,7274],{"class":86,"line":1498},[84,7273,2562],{"class":386},[84,7275,390],{"class":108},[84,7277,7278,7280],{"class":86,"line":1503},[84,7279,2569],{"class":386},[84,7281,2572],{"class":108},[84,7283,7284],{"class":86,"line":1531},[84,7285,2577],{"class":108},[84,7287,7288,7290,7292,7294,7296,7298],{"class":86,"line":1568},[84,7289,2582],{"class":386},[84,7291,155],{"class":108},[84,7293,152],{"class":144},[84,7295,2589],{"class":148},[84,7297,152],{"class":144},[84,7299,165],{"class":108},[84,7301,7302,7304,7306,7308,7310,7312],{"class":86,"line":1573},[84,7303,2598],{"class":386},[84,7305,155],{"class":108},[84,7307,152],{"class":144},[84,7309,2605],{"class":148},[84,7311,152],{"class":144},[84,7313,165],{"class":108},[84,7315,7316,7318,7320,7322,7324,7326,7328,7330,7332,7334],{"class":86,"line":1581},[84,7317,2614],{"class":386},[84,7319,155],{"class":108},[84,7321,2619],{"class":300},[84,7323,2622],{"class":260},[84,7325,2625],{"class":300},[84,7327,2622],{"class":260},[84,7329,2630],{"class":300},[84,7331,2622],{"class":260},[84,7333,2635],{"class":300},[84,7335,7336],{"class":90}," // 7日間\n",[84,7338,7339],{"class":86,"line":1609},[84,7340,480],{"class":108},[84,7342,7343],{"class":86,"line":1614},[84,7344,2647],{"class":108},[84,7346,7347],{"class":86,"line":1642},[84,7348,2282],{"class":108},[84,7350,7351],{"class":86,"line":1648},[84,7352,240],{"emptyLinePlaceholder":239},[84,7354,7355],{"class":86,"line":1662},[84,7356,7357],{"class":90}," // セキュリティヘッダー（iframe許可）\n",[84,7359,7360,7363],{"class":86,"line":1667},[84,7361,7362],{"class":386}," app",[84,7364,390],{"class":108},[84,7366,7367,7370],{"class":86,"line":1692},[84,7368,7369],{"class":386}," head",[84,7371,390],{"class":108},[84,7373,7374,7377],{"class":86,"line":1712},[84,7375,7376],{"class":386}," meta",[84,7378,2572],{"class":108},[84,7380,7381],{"class":86,"line":1717},[84,7382,7383],{"class":108}," {\n",[84,7385,7386,7388,7391,7393,7395,7397,7400,7402],{"class":86,"line":1741},[84,7387,2479],{"class":144},[84,7389,7390],{"class":148},"http-equiv",[84,7392,152],{"class":144},[84,7394,155],{"class":108},[84,7396,152],{"class":144},[84,7398,7399],{"class":148},"Content-Security-Policy",[84,7401,152],{"class":144},[84,7403,165],{"class":108},[84,7405,7406,7409,7411,7413,7416],{"class":86,"line":1753},[84,7407,7408],{"class":386}," content",[84,7410,155],{"class":108},[84,7412,560],{"class":144},[84,7414,7415],{"class":148},"frame-src 'self' https://embed.diagrams.net https://viewer.diagrams.net;",[84,7417,566],{"class":144},[84,7419,7420],{"class":86,"line":1770},[84,7421,2536],{"class":108},[84,7423,7424],{"class":86,"line":1782},[84,7425,7426],{"class":108}," ]\n",[84,7428,7429],{"class":86,"line":1793},[84,7430,485],{"class":108},[84,7432,7433],{"class":86,"line":1799},[84,7434,348],{"class":108},[84,7436,7437],{"class":86,"line":1808},[84,7438,354],{"class":108},[61,7440,7442],{"id":7441},"packagejson","package.json",[74,7444,7447],{"className":7445,"code":7446,"language":1420,"meta":79,"style":79},"language-json shiki shiki-themes vitesse-light vitesse-light","{\n \"name\": \"nuxt-drawio-app\",\n \"private\": true,\n \"type\": \"module\",\n \"scripts\": {\n \"build\": \"nuxt build\",\n \"dev\": \"nuxt dev\",\n \"generate\": \"nuxt generate\",\n \"preview\": \"nuxt preview\",\n \"postinstall\": \"nuxt prepare\"\n },\n \"dependencies\": {\n \"nuxt\": \"^3.13.0\",\n \"vue\": \"^3.5.0\"\n },\n \"devDependencies\": {\n \"@nuxt/devtools\": \"^1.5.0\",\n \"typescript\": \"^5.6.0\",\n \"vue-tsc\": \"^2.1.0\"\n }\n}\n",[81,7448,7449,7453,7476,7492,7512,7525,7546,7566,7586,7606,7624,7628,7641,7661,7678,7682,7695,7715,7734,7752,7756],{"__ignoreMap":79},[84,7450,7451],{"class":86,"line":87},[84,7452,6371],{"class":108},[84,7454,7455,7459,7462,7464,7466,7469,7472,7474],{"class":86,"line":94},[84,7456,7458],{"class":7457},"sqvqQ"," \"",[84,7460,7461],{"class":386},"name",[84,7463,560],{"class":7457},[84,7465,2083],{"class":108},[84,7467,7468],{"class":144}," \"",[84,7470,7471],{"class":148},"nuxt-drawio-app",[84,7473,560],{"class":144},[84,7475,165],{"class":108},[84,7477,7478,7480,7483,7485,7487,7490],{"class":86,"line":125},[84,7479,7458],{"class":7457},[84,7481,7482],{"class":386},"private",[84,7484,560],{"class":7457},[84,7486,2083],{"class":108},[84,7488,7489],{"class":97}," true",[84,7491,165],{"class":108},[84,7493,7494,7496,7499,7501,7503,7505,7508,7510],{"class":86,"line":141},[84,7495,7458],{"class":7457},[84,7497,7498],{"class":386},"type",[84,7500,560],{"class":7457},[84,7502,2083],{"class":108},[84,7504,7468],{"class":144},[84,7506,7507],{"class":148},"module",[84,7509,560],{"class":144},[84,7511,165],{"class":108},[84,7513,7514,7516,7519,7521,7523],{"class":86,"line":168},[84,7515,7458],{"class":7457},[84,7517,7518],{"class":386},"scripts",[84,7520,560],{"class":7457},[84,7522,2083],{"class":108},[84,7524,122],{"class":108},[84,7526,7527,7530,7533,7535,7537,7539,7542,7544],{"class":86,"line":189},[84,7528,7529],{"class":7457}," \"",[84,7531,7532],{"class":386},"build",[84,7534,560],{"class":7457},[84,7536,2083],{"class":108},[84,7538,7468],{"class":144},[84,7540,7541],{"class":148},"nuxt build",[84,7543,560],{"class":144},[84,7545,165],{"class":108},[84,7547,7548,7550,7553,7555,7557,7559,7562,7564],{"class":86,"line":210},[84,7549,7529],{"class":7457},[84,7551,7552],{"class":386},"dev",[84,7554,560],{"class":7457},[84,7556,2083],{"class":108},[84,7558,7468],{"class":144},[84,7560,7561],{"class":148},"nuxt dev",[84,7563,560],{"class":144},[84,7565,165],{"class":108},[84,7567,7568,7570,7573,7575,7577,7579,7582,7584],{"class":86,"line":230},[84,7569,7529],{"class":7457},[84,7571,7572],{"class":386},"generate",[84,7574,560],{"class":7457},[84,7576,2083],{"class":108},[84,7578,7468],{"class":144},[84,7580,7581],{"class":148},"nuxt generate",[84,7583,560],{"class":144},[84,7585,165],{"class":108},[84,7587,7588,7590,7593,7595,7597,7599,7602,7604],{"class":86,"line":236},[84,7589,7529],{"class":7457},[84,7591,7592],{"class":386},"preview",[84,7594,560],{"class":7457},[84,7596,2083],{"class":108},[84,7598,7468],{"class":144},[84,7600,7601],{"class":148},"nuxt preview",[84,7603,560],{"class":144},[84,7605,165],{"class":108},[84,7607,7608,7610,7613,7615,7617,7619,7622],{"class":86,"line":243},[84,7609,7529],{"class":7457},[84,7611,7612],{"class":386},"postinstall",[84,7614,560],{"class":7457},[84,7616,2083],{"class":108},[84,7618,7468],{"class":144},[84,7620,7621],{"class":148},"nuxt prepare",[84,7623,566],{"class":144},[84,7625,7626],{"class":86,"line":276},[84,7627,2282],{"class":108},[84,7629,7630,7632,7635,7637,7639],{"class":86,"line":304},[84,7631,7458],{"class":7457},[84,7633,7634],{"class":386},"dependencies",[84,7636,560],{"class":7457},[84,7638,2083],{"class":108},[84,7640,122],{"class":108},[84,7642,7643,7645,7648,7650,7652,7654,7657,7659],{"class":86,"line":332},[84,7644,7529],{"class":7457},[84,7646,7647],{"class":386},"nuxt",[84,7649,560],{"class":7457},[84,7651,2083],{"class":108},[84,7653,7468],{"class":144},[84,7655,7656],{"class":148},"^3.13.0",[84,7658,560],{"class":144},[84,7660,165],{"class":108},[84,7662,7663,7665,7667,7669,7671,7673,7676],{"class":86,"line":345},[84,7664,7529],{"class":7457},[84,7666,518],{"class":386},[84,7668,560],{"class":7457},[84,7670,2083],{"class":108},[84,7672,7468],{"class":144},[84,7674,7675],{"class":148},"^3.5.0",[84,7677,566],{"class":144},[84,7679,7680],{"class":86,"line":351},[84,7681,2282],{"class":108},[84,7683,7684,7686,7689,7691,7693],{"class":86,"line":708},[84,7685,7458],{"class":7457},[84,7687,7688],{"class":386},"devDependencies",[84,7690,560],{"class":7457},[84,7692,2083],{"class":108},[84,7694,122],{"class":108},[84,7696,7697,7699,7702,7704,7706,7708,7711,7713],{"class":86,"line":714},[84,7698,7529],{"class":7457},[84,7700,7701],{"class":386},"@nuxt/devtools",[84,7703,560],{"class":7457},[84,7705,2083],{"class":108},[84,7707,7468],{"class":144},[84,7709,7710],{"class":148},"^1.5.0",[84,7712,560],{"class":144},[84,7714,165],{"class":108},[84,7716,7717,7719,7721,7723,7725,7727,7730,7732],{"class":86,"line":732},[84,7718,7529],{"class":7457},[84,7720,78],{"class":386},[84,7722,560],{"class":7457},[84,7724,2083],{"class":108},[84,7726,7468],{"class":144},[84,7728,7729],{"class":148},"^5.6.0",[84,7731,560],{"class":144},[84,7733,165],{"class":108},[84,7735,7736,7738,7741,7743,7745,7747,7750],{"class":86,"line":760},[84,7737,7529],{"class":7457},[84,7739,7740],{"class":386},"vue-tsc",[84,7742,560],{"class":7457},[84,7744,2083],{"class":108},[84,7746,7468],{"class":144},[84,7748,7749],{"class":148},"^2.1.0",[84,7751,566],{"class":144},[84,7753,7754],{"class":86,"line":786},[84,7755,348],{"class":108},[84,7757,7758],{"class":86,"line":791},[84,7759,1944],{"class":108},[46,7761,7762],{"id":7762},"実装推奨順位",[61,7764,7766],{"id":7765},"第1推奨-iframe-embed-mode-base64即座に動作","第1推奨: iframe embed mode + base64（即座に動作）",[17,7768,7769],{},"現在の実装から最も移行しやすく、CORS問題を完全に回避できます。",[74,7771,7773],{"className":76,"code":7772,"language":78,"meta":79,"style":79},"// composables/useDrawio.ts\nexport const useDrawio = () => {\n const loadDiagram = async (path: string) => {\n const response = await fetch(path)\n const xml = await response.text()\n return xml\n }\n\n return {\n loadDiagram\n }\n}\n",[81,7774,7775,7780,7798,7823,7841,7859,7866,7870,7874,7880,7885,7889],{"__ignoreMap":79},[84,7776,7777],{"class":86,"line":87},[84,7778,7779],{"class":90},"// composables/useDrawio.ts\n",[84,7781,7782,7784,7787,7790,7792,7794,7796],{"class":86,"line":94},[84,7783,98],{"class":97},[84,7785,7786],{"class":260}," const ",[84,7788,7789],{"class":104},"useDrawio",[84,7791,297],{"class":108},[84,7793,725],{"class":108},[84,7795,119],{"class":108},[84,7797,122],{"class":108},[84,7799,7800,7802,7805,7807,7809,7811,7813,7815,7817,7819,7821],{"class":86,"line":125},[84,7801,735],{"class":260},[84,7803,7804],{"class":104},"loadDiagram",[84,7806,297],{"class":108},[84,7808,1513],{"class":260},[84,7810,131],{"class":108},[84,7812,3048],{"class":112},[84,7814,155],{"class":108},[84,7816,4589],{"class":1298},[84,7818,116],{"class":108},[84,7820,119],{"class":108},[84,7822,122],{"class":108},[84,7824,7825,7827,7829,7831,7833,7835,7837,7839],{"class":86,"line":141},[84,7826,960],{"class":260},[84,7828,738],{"class":112},[84,7830,297],{"class":108},[84,7832,743],{"class":97},[84,7834,746],{"class":104},[84,7836,131],{"class":108},[84,7838,3048],{"class":112},[84,7840,701],{"class":108},[84,7842,7843,7845,7847,7849,7851,7853,7855,7857],{"class":86,"line":168},[84,7844,960],{"class":260},[84,7846,1697],{"class":112},[84,7848,297],{"class":108},[84,7850,743],{"class":97},[84,7852,775],{"class":112},[84,7854,254],{"class":108},[84,7856,780],{"class":104},[84,7858,783],{"class":108},[84,7860,7861,7863],{"class":86,"line":189},[84,7862,335],{"class":97},[84,7864,7865],{"class":112}," xml\n",[84,7867,7868],{"class":86,"line":210},[84,7869,348],{"class":108},[84,7871,7872],{"class":86,"line":230},[84,7873,240],{"emptyLinePlaceholder":239},[84,7875,7876,7878],{"class":86,"line":236},[84,7877,1465],{"class":97},[84,7879,122],{"class":108},[84,7881,7882],{"class":86,"line":243},[84,7883,7884],{"class":112}," loadDiagram\n",[84,7886,7887],{"class":86,"line":276},[84,7888,348],{"class":108},[84,7890,7891],{"class":86,"line":304},[84,7892,1944],{"class":108},[61,7894,7896],{"id":7895},"第2推奨-サーバーミドルウェアcors設定","第2推奨: サーバーミドルウェアCORS設定",[17,7898,7899,7900,7903],{},"本番環境で最も堅牢な方法です。上記の",[81,7901,7902],{},"server/middleware/cors.ts","を実装するだけで、既存のコードが動作するようになります。",[61,7905,7907],{"id":7906},"第3推奨-maxgraphによる完全制御","第3推奨: maxGraphによる完全制御",[17,7909,7910],{},"高度なカスタマイズが必要な場合や、オフライン動作が必要な場合に最適です。",[46,7912,7913],{"id":7913},"よくある問題と解決策",[61,7915,7917],{"id":7916},"問題1-graphviewer-is-not-definedエラー","問題1: 「GraphViewer is not defined」エラー",[17,7919,7920,7923],{},[20,7921,7922],{},"原因:"," スクリプトのロードが完了する前にコンポーネントが初期化された。",[17,7925,7926],{},[20,7927,7928],{},"解決策:",[74,7930,7932],{"className":76,"code":7931,"language":78,"meta":79,"style":79},"const loadViewerScript = (): Promise\u003Cvoid> => {\n return new Promise((resolve, reject) => {\n if ((window as any).GraphViewer) {\n resolve() // すでにロード済み\n return\n }\n // スクリプトロード処理\n })\n}\n\n// 必ず待機\nawait loadViewerScript()\n",[81,7933,7934,7956,7978,7998,8007,8011,8015,8020,8024,8028,8032,8037],{"__ignoreMap":79},[84,7935,7936,7938,7940,7942,7944,7946,7948,7950,7952,7954],{"class":86,"line":87},[84,7937,685],{"class":260},[84,7939,4635],{"class":104},[84,7941,297],{"class":108},[84,7943,4640],{"class":108},[84,7945,4643],{"class":1298},[84,7947,525],{"class":108},[84,7949,4648],{"class":1298},[84,7951,2992],{"class":108},[84,7953,119],{"class":108},[84,7955,122],{"class":108},[84,7957,7958,7960,7962,7964,7966,7968,7970,7972,7974,7976],{"class":86,"line":94},[84,7959,1465],{"class":97},[84,7961,1387],{"class":260},[84,7963,4663],{"class":386},[84,7965,109],{"class":108},[84,7967,4668],{"class":112},[84,7969,136],{"class":108},[84,7971,4673],{"class":112},[84,7973,116],{"class":108},[84,7975,119],{"class":108},[84,7977,122],{"class":108},[84,7979,7980,7982,7984,7986,7988,7990,7992,7994,7996],{"class":86,"line":125},[84,7981,1617],{"class":97},[84,7983,4686],{"class":108},[84,7985,2681],{"class":112},[84,7987,4691],{"class":97},[84,7989,4694],{"class":1298},[84,7991,4697],{"class":108},[84,7993,4700],{"class":112},[84,7995,116],{"class":108},[84,7997,122],{"class":108},[84,7999,8000,8002,8004],{"class":86,"line":141},[84,8001,4709],{"class":104},[84,8003,1484],{"class":108},[84,8005,8006],{"class":90}," // すでにロード済み\n",[84,8008,8009],{"class":86,"line":168},[84,8010,4716],{"class":97},[84,8012,8013],{"class":86,"line":189},[84,8014,485],{"class":108},[84,8016,8017],{"class":86,"line":210},[84,8018,8019],{"class":90}," // スクリプトロード処理\n",[84,8021,8022],{"class":86,"line":230},[84,8023,233],{"class":108},[84,8025,8026],{"class":86,"line":236},[84,8027,1944],{"class":108},[84,8029,8030],{"class":86,"line":243},[84,8031,240],{"emptyLinePlaceholder":239},[84,8033,8034],{"class":86,"line":276},[84,8035,8036],{"class":90},"// 必ず待機\n",[84,8038,8039,8042,8044],{"class":86,"line":304},[84,8040,8041],{"class":97},"await",[84,8043,5156],{"class":104},[84,8045,783],{"class":108},[61,8047,8049],{"id":8048},"問題2-publicディレクトリのファイルが見つからない404","問題2: publicディレクトリのファイルが見つからない（404）",[17,8051,8052,8054,8055,8058],{},[20,8053,7922],{}," パスに",[81,8056,8057],{},"/public","を含めている。",[17,8060,8061],{},[20,8062,7928],{},[74,8064,8066],{"className":516,"code":8065,"language":518,"meta":79,"style":79},"\u003C!-- ❌ 間違い -->\n\u003CDrawioViewer source=\"/public/diagrams/file.drawio\" />\n\n\u003C!-- ✅ 正解 -->\n\u003CDrawioViewer source=\"/diagrams/file.drawio\" />\n",[81,8067,8068,8073,8093,8097,8102],{"__ignoreMap":79},[84,8069,8070],{"class":86,"line":87},[84,8071,8072],{"class":90},"\u003C!-- ❌ 間違い -->\n",[84,8074,8075,8077,8079,8082,8084,8086,8089,8091],{"class":86,"line":94},[84,8076,525],{"class":108},[84,8078,2733],{"class":97},[84,8080,8081],{"class":112}," source",[84,8083,557],{"class":108},[84,8085,560],{"class":144},[84,8087,8088],{"class":148},"/public/diagrams/file.drawio",[84,8090,560],{"class":144},[84,8092,2747],{"class":108},[84,8094,8095],{"class":86,"line":125},[84,8096,240],{"emptyLinePlaceholder":239},[84,8098,8099],{"class":86,"line":141},[84,8100,8101],{"class":90},"\u003C!-- ✅ 正解 -->\n",[84,8103,8104,8106,8108,8110,8112,8114,8117,8119],{"class":86,"line":168},[84,8105,525],{"class":108},[84,8107,2733],{"class":97},[84,8109,8081],{"class":112},[84,8111,557],{"class":108},[84,8113,560],{"class":144},[84,8115,8116],{"class":148},"/diagrams/file.drawio",[84,8118,560],{"class":144},[84,8120,2747],{"class":108},[61,8122,8124],{"id":8123},"問題3-開発環境で動くが本番で動かない","問題3: 開発環境で動くが本番で動かない",[17,8126,8127,8129],{},[20,8128,7922],{}," 開発用プロキシ設定が本番に適用されていない。",[17,8131,8132,8134],{},[20,8133,7928],{}," 環境別設定を使用（上記の解決策5参照）、または本番環境でもCORSヘッダーを設定。",[61,8136,8138],{"id":8137},"問題4-ハイドレーションミスマッチエラー","問題4: ハイドレーションミスマッチエラー",[17,8140,8141,8143],{},[20,8142,7922],{}," SSR時とクライアント時でHTMLが異なる。",[17,8145,8146,8148,8149,8151],{},[20,8147,7928],{}," 必ず",[81,8150,2772],{},"でラップし、適切なfallbackを設定。",[74,8153,8155],{"className":516,"code":8154,"language":518,"meta":79,"style":79},"\u003CClientOnly fallback-tag=\"div\" fallback=\"読み込み中...\">\n \u003CDrawioViewer :src=\"path\" />\n\u003C/ClientOnly>\n",[81,8156,8157,8186,8191],{"__ignoreMap":79},[84,8158,8159,8161,8163,8165,8167,8169,8171,8173,8175,8177,8179,8182,8184],{"class":86,"line":87},[84,8160,525],{"class":108},[84,8162,539],{"class":97},[84,8164,2704],{"class":112},[84,8166,557],{"class":108},[84,8168,560],{"class":144},[84,8170,1082],{"class":148},[84,8172,560],{"class":144},[84,8174,2715],{"class":112},[84,8176,557],{"class":108},[84,8178,560],{"class":144},[84,8180,8181],{"class":148},"読み込み中...",[84,8183,560],{"class":144},[84,8185,531],{"class":108},[84,8187,8188],{"class":86,"line":94},[84,8189,8190],{"class":2995}," \u003CDrawioViewer :src=\"path\" />\n",[84,8192,8193,8195,8197],{"class":86,"line":125},[84,8194,616],{"class":108},[84,8196,539],{"class":97},[84,8198,531],{"class":108},[46,8200,8201],{"id":8201},"まとめと最終推奨",[17,8203,8204,8205,8208],{},"現在の実装を最速で修正する場合、",[20,8206,8207],{},"サーバーミドルウェアでのCORS設定","（解決策1）を実装してください。これにより、既存のviewer.diagrams.netを使用したコードがそのまま動作します。",[17,8210,8211,8212,8215],{},"より堅牢な実装を目指す場合は、",[20,8213,8214],{},"iframe embed modeへの移行","（解決策3）を推奨します。これはCORS問題が根本的に解決され、フル機能の編集も可能になります。",[17,8217,8218,8219,8222],{},"最も簡単に今すぐ動作させたい場合は、",[20,8220,8221],{},"base64埋め込み","（解決策2）が最速です。サーバー設定不要で、提供したコードをコピー&ペーストするだけで動作します。",[17,8224,8225],{},"すべてのアプローチは実証済みで、2024-2025年の最新情報に基づいており、Nuxt 3と完全に互換性があります。プロジェクトの要件に応じて最適な方法を選択してください。",[2060,8227,8228],{},"html pre.shiki code .sxvE3, html code.shiki .sxvE3{--shiki-default:#A0ADA0;--shiki-dark:#A0ADA0}html pre.shiki code .sHkkW, html code.shiki .sHkkW{--shiki-default:#1E754F;--shiki-dark:#1E754F}html pre.shiki code .senZ8, html code.shiki .senZ8{--shiki-default:#59873A;--shiki-dark:#59873A}html pre.shiki code .shFtX, html code.shiki .shFtX{--shiki-default:#999999;--shiki-dark:#999999}html pre.shiki code .s4oTP, html code.shiki .s4oTP{--shiki-default:#B07D48;--shiki-dark:#B07D48}html pre.shiki code .sMJiu, html code.shiki .sMJiu{--shiki-default:#B5695977;--shiki-dark:#B5695977}html pre.shiki code .sdGka, html code.shiki .sdGka{--shiki-default:#B56959;--shiki-dark:#B56959}html pre.shiki code .stQ0i, html code.shiki .stQ0i{--shiki-default:#AB5959;--shiki-dark:#AB5959}html pre.shiki code .sM54T, html code.shiki .sM54T{--shiki-default:#2F798A;--shiki-dark:#2F798A}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 .sz8Xr, html code.shiki .sz8Xr{--shiki-default:#998418;--shiki-dark:#998418}html pre.shiki code .s5V_Q, html code.shiki .s5V_Q{--shiki-default:#999999;--shiki-default-font-style:italic;--shiki-dark:#999999;--shiki-dark-font-style:italic}html pre.shiki code .sSkh3, html code.shiki .sSkh3{--shiki-default:#2E8F82;--shiki-dark:#2E8F82}html pre.shiki code .snbK4, html code.shiki .snbK4{--shiki-default:#A65E2B;--shiki-dark:#A65E2B}html pre.shiki code .sG7-3, html code.shiki .sG7-3{--shiki-default:#393A34;--shiki-dark:#393A34}html pre.shiki code .sqvqQ, html code.shiki .sqvqQ{--shiki-default:#99841877;--shiki-dark:#99841877}",{"title":79,"searchDepth":94,"depth":94,"links":8230},[8231,8232,8239,8244,8248,8249,8253,8257,8262,8268],{"id":48,"depth":94,"text":49},{"id":59,"depth":94,"text":59,"children":8233},[8234,8235,8236,8237,8238],{"id":63,"depth":125,"text":64},{"id":509,"depth":125,"text":510},{"id":1054,"depth":125,"text":1055},{"id":2142,"depth":125,"text":2143},{"id":2335,"depth":125,"text":2336},{"id":2666,"depth":94,"text":2667,"children":8240},[8241,8242,8243],{"id":2670,"depth":125,"text":2671},{"id":2870,"depth":125,"text":2870},{"id":2950,"depth":125,"text":2950},{"id":3232,"depth":94,"text":3232,"children":8245},[8246,8247],{"id":3235,"depth":125,"text":3235},{"id":3850,"depth":125,"text":3850},{"id":3917,"depth":94,"text":3917},{"id":4051,"depth":94,"text":4051,"children":8250},[8251,8252],{"id":4057,"depth":125,"text":4058},{"id":6413,"depth":125,"text":6414},{"id":6990,"depth":94,"text":6990,"children":8254},[8255,8256],{"id":6993,"depth":125,"text":6994},{"id":7441,"depth":125,"text":7442},{"id":7762,"depth":94,"text":7762,"children":8258},[8259,8260,8261],{"id":7765,"depth":125,"text":7766},{"id":7895,"depth":125,"text":7896},{"id":7906,"depth":125,"text":7907},{"id":7913,"depth":94,"text":7913,"children":8263},[8264,8265,8266,8267],{"id":7916,"depth":125,"text":7917},{"id":8048,"depth":125,"text":8049},{"id":8123,"depth":125,"text":8124},{"id":8137,"depth":125,"text":8138},{"id":8201,"depth":94,"text":8201},null,"viewer.diagrams.netのCORS問題の解決策から実装コード、代替手段まで網羅的に解説。サーバーミドルウェアCORS設定、Base64埋め込み、iframe embed mode、maxGraphなど5つの実装方法を比較。","md",{},"/nuxt3-drawio-complete-guide",false,"2025-11-19T00:00:00.000Z",{"title":5,"description":8270},"2025-11/2025-11-19/nuxt3-drawio-complete-guide",[8279,8280,8281,8282,8283,8284,3840,8285],"Nuxt 3","Draw.io","CORS","Vue","TypeScript","SSR","maxGraph","2025-12-16T00:00:00.000Z","Lkbg_S09XCpw6_y4awfB43cI4liRyWiBQQXwQnnPbnQ",[],[8290,8294,8298,8301,8304],{"title":8291,"path":8292,"publishedAt":8293},"2026年5月3日の開発日記 - case100書籍を1日で79論点パイプライン化、Vue移植まで完走","/2026-05-03-diary","2026-05-03T00:00:00.000Z",{"title":8295,"path":8296,"publishedAt":8297},"2026年4月27日の開発日記 - CFWS v2 順方向化を1日で Phase 1〜8 まで通し、AEHR/Lumentum/AAOI 投資メモも公開","/2026-04-27-diary","2026-04-27T00:00:00.000Z",{"title":8299,"path":8300,"publishedAt":8297},"CFWS v2のクリックでセル単位ハイライト — scrollIntoViewと全navigate型への横展開記録","/cfws-v2-cell-highlight",{"title":8302,"path":8303,"publishedAt":8297},"キャッシュフロー精算表v2: 逆算スクリプトから「取引→仕訳→年次推移→CFWS」順方向ロジックへ全面書き換え（Phase 1〜8一気通貫実装記録）","/cfws-v2-forward-architecture",{"title":8305,"path":8306,"publishedAt":8307},"MillerViewer SSRハイドレーションバグ修正と純粋関数リファクタリング","/miller-viewer-ssr-hydration-fix","2026-03-15T00:00:00.000Z","https://log.eurekapu.com/og/blog/nuxt3-drawio-complete-guide.png?v=2025-12-16T00%3A00%3A00.000Z&title=Nuxt%203%E3%81%A7Draw.io%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%92%E8%A1%A8%E7%A4%BA%E3%81%99%E3%82%8B%E5%AE%8C%E5%85%A8%E3%82%AC%E3%82%A4%E3%83%89&author=Kei%20Komatsu&sig=38f913b4cc99b929",1785654662526]