[{"data":1,"prerenderedAt":2041},["ShallowReactive",2],{"content-/drawio-dynamic-embedding-research":3,"all-pages-for-dir":2020,"related-/drawio-dynamic-embedding-research":2021,"og-image-/drawio-dynamic-embedding-research":2040},{"id":4,"title":5,"body":6,"category":2005,"concepts":2005,"description":2006,"extension":2007,"meta":2008,"navigation":326,"ogImage":2005,"path":2009,"project_name":2005,"published":2010,"publishedAt":2011,"seo":2012,"source":2005,"stem":2013,"tags":2014,"todo":2005,"unpublished":2010,"updatedAt":2005,"__hash__":2019},"pages/2025-11/2025-11-19/drawio-dynamic-embedding-research.md","Draw.ioファイルの動的埋め込み調査レポート",{"type":7,"value":8,"toc":1968},"minimark",[9,13,17,21,24,30,37,41,66,69,73,79,138,144,152,156,160,221,225,233,237,241,694,699,710,713,716,723,915,918,989,992,1135,1139,1142,1171,1174,1192,1195,1199,1205,1209,1217,1221,1232,1236,1241,1245,1253,1257,1265,1268,1275,1278,1292,1295,1298,1318,1321,1324,1330,1335,1351,1356,1361,1462,1466,1536,1540,1680,1685,1700,1703,1707,1712,1728,1732,1820,1824,1832,1835,1838,1842,1845,1849,1862,1866,1869,1873,1881,1885,1888,1892,1900,1903,1933,1936,1942,1945,1959,1964],[10,11,5],"h1",{"id":12},"drawioファイルの動的埋め込み調査レポート",[14,15,16],"h2",{"id":16},"調査目的",[18,19,20],"p",{},"Draw.ioファイル（.drawio）をVueコンポーネント内で動的に読み込み、ページをリロードするだけで最新の図が反映される仕組みを実現する。",[14,22,23],{"id":23},"調査結果サマリー",[18,25,26],{},[27,28,29],"strong",{},"結論：成功 ✓",[18,31,32,36],{},[33,34,35],"code",{},"viewer-static.min.js","を使用することで、Draw.ioファイルを動的に読み込んで表示できることを確認した。",[38,39,40],"h3",{"id":40},"成功した方法",[42,43,44,54,60],"ul",{},[45,46,47,50,51],"li",{},[27,48,49],{},"使用ライブラリ",": ",[33,52,53],{},"https://viewer.diagrams.net/js/viewer-static.min.js",[45,55,56,59],{},[27,57,58],{},"実装方法",": data-mxgraph属性を持つdiv要素にXMLデータをJSONで渡す",[45,61,62,65],{},[27,63,64],{},"CORS問題",": 解決済み（ローカルファイルを直接読み込むため、CORSエラーなし）",[14,67,68],{"id":68},"調査プロセス",[38,70,72],{"id":71},"試行1-iframe-url指定失敗","試行1: iframe + URL指定（失敗）",[18,74,75,78],{},[27,76,77],{},"方法",":",[80,81,86],"pre",{"className":82,"code":83,"language":84,"meta":85,"style":85},"language-javascript shiki shiki-themes vitesse-light vitesse-light","viewerUrl.value = `https://viewer.diagrams.net/?url=${encodeURIComponent(fileUrl)}`\n","javascript","",[33,87,88],{"__ignoreMap":85},[89,90,93,97,101,104,107,111,115,119,123,126,129,132,135],"span",{"class":91,"line":92},"line",1,[89,94,96],{"class":95},"s4oTP","viewerUrl",[89,98,100],{"class":99},"shFtX",".",[89,102,103],{"class":95},"value",[89,105,106],{"class":99}," =",[89,108,110],{"class":109},"sMJiu"," `",[89,112,114],{"class":113},"sdGka","https://viewer.diagrams.net/?url=",[89,116,118],{"class":117},"sHkkW","${",[89,120,122],{"class":121},"senZ8","encodeURIComponent",[89,124,125],{"class":99},"(",[89,127,128],{"class":113},"fileUrl",[89,130,131],{"class":99},")",[89,133,134],{"class":117},"}",[89,136,137],{"class":109},"`\n",[18,139,140,143],{},[27,141,142],{},"結果",": ❌ 失敗",[42,145,146,149],{},[45,147,148],{},"Draw.ioビューアーはlocalhostのURLを読み込めない（CORS制限）",[45,150,151],{},"エラー: \"ファイルが見つかりません\"",[38,153,155],{"id":154},"試行2-iframe-base64エンコード失敗","試行2: iframe + Base64エンコード（失敗）",[18,157,158,78],{},[27,159,77],{},[80,161,163],{"className":82,"code":162,"language":84,"meta":85,"style":85},"const base64 = btoa(unescape(encodeURIComponent(text)))\nviewerUrl.value = `https://viewer.diagrams.net/#R${base64}`\n",[33,164,165,196],{"__ignoreMap":85},[89,166,167,171,174,176,179,181,184,186,188,190,193],{"class":91,"line":92},[89,168,170],{"class":169},"stQ0i","const",[89,172,173],{"class":95}," base64",[89,175,106],{"class":99},[89,177,178],{"class":121}," btoa",[89,180,125],{"class":99},[89,182,183],{"class":121},"unescape",[89,185,125],{"class":99},[89,187,122],{"class":121},[89,189,125],{"class":99},[89,191,192],{"class":95},"text",[89,194,195],{"class":99},")))\n",[89,197,199,201,203,205,207,209,212,214,217,219],{"class":91,"line":198},2,[89,200,96],{"class":95},[89,202,100],{"class":99},[89,204,103],{"class":95},[89,206,106],{"class":99},[89,208,110],{"class":109},[89,210,211],{"class":113},"https://viewer.diagrams.net/#R",[89,213,118],{"class":117},[89,215,216],{"class":113},"base64",[89,218,134],{"class":117},[89,220,137],{"class":109},[18,222,223,143],{},[27,224,142],{},[42,226,227,230],{},[45,228,229],{},"エラー: \"invalid code lengths set\"",[45,231,232],{},"Draw.ioビューアーが期待する圧縮形式と不一致",[38,234,236],{"id":235},"試行3-viewer-staticminjs成功","試行3: viewer-static.min.js（成功）",[18,238,239,78],{},[27,240,77],{},[80,242,246],{"className":243,"code":244,"language":245,"meta":85,"style":85},"language-vue shiki shiki-themes vitesse-light vitesse-light","\u003Ctemplate>\n  \u003Cdiv\n    class=\"mxgraph\"\n    :data-mxgraph=\"diagramData\"\n  >\u003C/div>\n\u003C/template>\n\n\u003Cscript setup>\nconst diagramData = ref('')\n\nasync function loadDiagram() {\n  const response = await fetch('/2025-11-18/freee-ai-system.drawio')\n  const xml = await response.text()\n\n  diagramData.value = JSON.stringify({\n    highlight: '#0000ff',\n    nav: true,\n    resize: true,\n    toolbar: 'zoom layers tags lightbox',\n    edit: '_blank',\n    xml: xml\n  })\n\n  loadViewerScript()\n}\n\nfunction loadViewerScript() {\n  const script = document.createElement('script')\n  script.src = 'https://viewer.diagrams.net/js/viewer-static.min.js'\n  script.async = true\n  document.body.appendChild(script)\n}\n\u003C/script>\n","vue",[33,247,248,259,267,285,300,311,321,328,341,362,367,385,414,435,440,463,483,496,508,525,542,553,559,564,572,578,583,596,624,644,658,680,685],{"__ignoreMap":85},[89,249,250,253,256],{"class":91,"line":92},[89,251,252],{"class":99},"\u003C",[89,254,255],{"class":117},"template",[89,257,258],{"class":99},">\n",[89,260,261,264],{"class":91,"line":198},[89,262,263],{"class":99},"  \u003C",[89,265,266],{"class":117},"div\n",[89,268,270,273,276,279,282],{"class":91,"line":269},3,[89,271,272],{"class":95},"    class",[89,274,275],{"class":99},"=",[89,277,278],{"class":109},"\"",[89,280,281],{"class":113},"mxgraph",[89,283,284],{"class":109},"\"\n",[89,286,288,291,293,295,298],{"class":91,"line":287},4,[89,289,290],{"class":95},"    :data-mxgraph",[89,292,275],{"class":99},[89,294,278],{"class":109},[89,296,297],{"class":113},"diagramData",[89,299,284],{"class":109},[89,301,303,306,309],{"class":91,"line":302},5,[89,304,305],{"class":99},"  >\u003C/",[89,307,308],{"class":117},"div",[89,310,258],{"class":99},[89,312,314,317,319],{"class":91,"line":313},6,[89,315,316],{"class":99},"\u003C/",[89,318,255],{"class":117},[89,320,258],{"class":99},[89,322,324],{"class":91,"line":323},7,[89,325,327],{"emptyLinePlaceholder":326},true,"\n",[89,329,331,333,336,339],{"class":91,"line":330},8,[89,332,252],{"class":99},[89,334,335],{"class":117},"script",[89,337,338],{"class":95}," setup",[89,340,258],{"class":99},[89,342,344,346,349,351,354,356,359],{"class":91,"line":343},9,[89,345,170],{"class":169},[89,347,348],{"class":95}," diagramData",[89,350,106],{"class":99},[89,352,353],{"class":121}," ref",[89,355,125],{"class":99},[89,357,358],{"class":109},"''",[89,360,361],{"class":99},")\n",[89,363,365],{"class":91,"line":364},10,[89,366,327],{"emptyLinePlaceholder":326},[89,368,370,373,376,379,382],{"class":91,"line":369},11,[89,371,372],{"class":169},"async",[89,374,375],{"class":169}," function",[89,377,378],{"class":121}," loadDiagram",[89,380,381],{"class":99},"()",[89,383,384],{"class":99}," {\n",[89,386,388,391,394,396,399,402,404,407,410,412],{"class":91,"line":387},12,[89,389,390],{"class":169},"  const",[89,392,393],{"class":95}," response",[89,395,106],{"class":99},[89,397,398],{"class":117}," await",[89,400,401],{"class":121}," fetch",[89,403,125],{"class":99},[89,405,406],{"class":109},"'",[89,408,409],{"class":113},"/2025-11-18/freee-ai-system.drawio",[89,411,406],{"class":109},[89,413,361],{"class":99},[89,415,417,419,422,424,426,428,430,432],{"class":91,"line":416},13,[89,418,390],{"class":169},[89,420,421],{"class":95}," xml",[89,423,106],{"class":99},[89,425,398],{"class":117},[89,427,393],{"class":95},[89,429,100],{"class":99},[89,431,192],{"class":121},[89,433,434],{"class":99},"()\n",[89,436,438],{"class":91,"line":437},14,[89,439,327],{"emptyLinePlaceholder":326},[89,441,443,446,448,450,452,455,457,460],{"class":91,"line":442},15,[89,444,445],{"class":95},"  diagramData",[89,447,100],{"class":99},[89,449,103],{"class":95},[89,451,106],{"class":99},[89,453,454],{"class":95}," JSON",[89,456,100],{"class":99},[89,458,459],{"class":121},"stringify",[89,461,462],{"class":99},"({\n",[89,464,466,470,472,475,478,480],{"class":91,"line":465},16,[89,467,469],{"class":468},"sz8Xr","    highlight",[89,471,78],{"class":99},[89,473,474],{"class":109}," '",[89,476,477],{"class":113},"#0000ff",[89,479,406],{"class":109},[89,481,482],{"class":99},",\n",[89,484,486,489,491,494],{"class":91,"line":485},17,[89,487,488],{"class":468},"    nav",[89,490,78],{"class":99},[89,492,493],{"class":117}," true",[89,495,482],{"class":99},[89,497,499,502,504,506],{"class":91,"line":498},18,[89,500,501],{"class":468},"    resize",[89,503,78],{"class":99},[89,505,493],{"class":117},[89,507,482],{"class":99},[89,509,511,514,516,518,521,523],{"class":91,"line":510},19,[89,512,513],{"class":468},"    toolbar",[89,515,78],{"class":99},[89,517,474],{"class":109},[89,519,520],{"class":113},"zoom layers tags lightbox",[89,522,406],{"class":109},[89,524,482],{"class":99},[89,526,528,531,533,535,538,540],{"class":91,"line":527},20,[89,529,530],{"class":468},"    edit",[89,532,78],{"class":99},[89,534,474],{"class":109},[89,536,537],{"class":113},"_blank",[89,539,406],{"class":109},[89,541,482],{"class":99},[89,543,545,548,550],{"class":91,"line":544},21,[89,546,547],{"class":468},"    xml",[89,549,78],{"class":99},[89,551,552],{"class":95}," xml\n",[89,554,556],{"class":91,"line":555},22,[89,557,558],{"class":99},"  })\n",[89,560,562],{"class":91,"line":561},23,[89,563,327],{"emptyLinePlaceholder":326},[89,565,567,570],{"class":91,"line":566},24,[89,568,569],{"class":121},"  loadViewerScript",[89,571,434],{"class":99},[89,573,575],{"class":91,"line":574},25,[89,576,577],{"class":99},"}\n",[89,579,581],{"class":91,"line":580},26,[89,582,327],{"emptyLinePlaceholder":326},[89,584,586,589,592,594],{"class":91,"line":585},27,[89,587,588],{"class":169},"function",[89,590,591],{"class":121}," loadViewerScript",[89,593,381],{"class":99},[89,595,384],{"class":99},[89,597,599,601,604,606,609,611,614,616,618,620,622],{"class":91,"line":598},28,[89,600,390],{"class":169},[89,602,603],{"class":95}," script",[89,605,106],{"class":99},[89,607,608],{"class":95}," document",[89,610,100],{"class":99},[89,612,613],{"class":121},"createElement",[89,615,125],{"class":99},[89,617,406],{"class":109},[89,619,335],{"class":113},[89,621,406],{"class":109},[89,623,361],{"class":99},[89,625,627,630,632,635,637,639,641],{"class":91,"line":626},29,[89,628,629],{"class":95},"  script",[89,631,100],{"class":99},[89,633,634],{"class":95},"src",[89,636,106],{"class":99},[89,638,474],{"class":109},[89,640,53],{"class":113},[89,642,643],{"class":109},"'\n",[89,645,647,649,651,653,655],{"class":91,"line":646},30,[89,648,629],{"class":95},[89,650,100],{"class":99},[89,652,372],{"class":95},[89,654,106],{"class":99},[89,656,657],{"class":117}," true\n",[89,659,661,664,666,669,671,674,676,678],{"class":91,"line":660},31,[89,662,663],{"class":95},"  document",[89,665,100],{"class":99},[89,667,668],{"class":95},"body",[89,670,100],{"class":99},[89,672,673],{"class":121},"appendChild",[89,675,125],{"class":99},[89,677,335],{"class":95},[89,679,361],{"class":99},[89,681,683],{"class":91,"line":682},32,[89,684,577],{"class":99},[89,686,688,690,692],{"class":91,"line":687},33,[89,689,316],{"class":99},[89,691,335],{"class":117},[89,693,258],{"class":99},[18,695,696,698],{},[27,697,142],{},": ✅ 成功",[42,700,701,704,707],{},[45,702,703],{},"Draw.ioファイルが正常に表示される",[45,705,706],{},"インタラクティブな操作（ズーム、レイヤー表示など）が可能",[45,708,709],{},"CORSエラーなし",[14,711,712],{"id":712},"実装の詳細",[38,714,715],{"id":715},"前提条件",[18,717,718,719,722],{},"Nuxtサーバーミドルウェアで",[33,720,721],{},".drawio","ファイルを提供できるように設定：",[80,724,728],{"className":725,"code":726,"language":727,"meta":85,"style":85},"language-typescript shiki shiki-themes vitesse-light vitesse-light","// server/middleware/content-images.ts\nconst match = url.match(/^\\/(\\d{4}-\\d{2}-\\d{2})\\/([^/]+\\.(png|jpg|jpeg|gif|webp|svg|drawio))$/i)\n\nconst mimeTypes: Record\u003Cstring, string> = {\n  // ...\n  drawio: 'application/xml'\n}\n","typescript",[33,729,730,736,860,864,892,897,911],{"__ignoreMap":85},[89,731,732],{"class":91,"line":92},[89,733,735],{"class":734},"sxvE3","// server/middleware/content-images.ts\n",[89,737,738,741,744,746,749,751,753,755,758,761,765,767,771,775,779,781,784,786,788,790,792,794,797,799,802,805,808,811,813,816,819,822,824,827,829,832,834,837,839,842,844,847,850,853,855,858],{"class":91,"line":198},[89,739,740],{"class":169},"const ",[89,742,743],{"class":95},"match",[89,745,106],{"class":99},[89,747,748],{"class":95}," url",[89,750,100],{"class":99},[89,752,743],{"class":121},[89,754,125],{"class":99},[89,756,757],{"class":109},"/",[89,759,760],{"class":117},"^",[89,762,764],{"class":763},"svWSF","\\/",[89,766,125],{"class":99},[89,768,770],{"class":769},"she3A","\\d",[89,772,774],{"class":773},"sM54T","{4}",[89,776,778],{"class":777},"sLkVR","-",[89,780,770],{"class":769},[89,782,783],{"class":773},"{2}",[89,785,778],{"class":777},[89,787,770],{"class":769},[89,789,783],{"class":773},[89,791,131],{"class":99},[89,793,764],{"class":763},[89,795,796],{"class":99},"([",[89,798,760],{"class":169},[89,800,757],{"class":801},"snbK4",[89,803,804],{"class":99},"]",[89,806,807],{"class":773},"+",[89,809,810],{"class":763},"\\.",[89,812,125],{"class":99},[89,814,815],{"class":777},"png",[89,817,818],{"class":169},"|",[89,820,821],{"class":777},"jpg",[89,823,818],{"class":169},[89,825,826],{"class":777},"jpeg",[89,828,818],{"class":169},[89,830,831],{"class":777},"gif",[89,833,818],{"class":169},[89,835,836],{"class":777},"webp",[89,838,818],{"class":169},[89,840,841],{"class":777},"svg",[89,843,818],{"class":169},[89,845,846],{"class":777},"drawio",[89,848,849],{"class":99},"))",[89,851,852],{"class":117},"$",[89,854,757],{"class":109},[89,856,857],{"class":117},"i",[89,859,361],{"class":99},[89,861,862],{"class":91,"line":269},[89,863,327],{"emptyLinePlaceholder":326},[89,865,866,868,871,873,877,879,882,885,887,890],{"class":91,"line":287},[89,867,740],{"class":169},[89,869,870],{"class":95},"mimeTypes",[89,872,50],{"class":99},[89,874,876],{"class":875},"sSkh3","Record",[89,878,252],{"class":99},[89,880,881],{"class":875},"string",[89,883,884],{"class":99},", ",[89,886,881],{"class":875},[89,888,889],{"class":99},"> =",[89,891,384],{"class":99},[89,893,894],{"class":91,"line":302},[89,895,896],{"class":734},"  // ...\n",[89,898,899,902,904,906,909],{"class":91,"line":313},[89,900,901],{"class":468},"  drawio",[89,903,50],{"class":99},[89,905,406],{"class":109},[89,907,908],{"class":113},"application/xml",[89,910,643],{"class":109},[89,912,913],{"class":91,"line":323},[89,914,577],{"class":99},[38,916,917],{"id":917},"データフロー",[80,919,923],{"className":920,"code":921,"language":922,"meta":85,"style":85},"language-mermaid shiki shiki-themes vitesse-light vitesse-light","sequenceDiagram\n    participant Vue as Vueコンポーネント\n    participant Server as Nuxtサーバー\n    participant Viewer as viewer-static.min.js\n    participant DOM as ブラウザDOM\n\n    Vue->>Server: fetch('/2025-11-18/freee-ai-system.drawio')\n    Server-->>Vue: XMLデータ\n    Vue->>Vue: JSON形式に変換\n    Vue->>DOM: data-mxgraph属性を設定\n    Vue->>DOM: viewer-static.min.jsをロード\n    Viewer->>DOM: class=\"mxgraph\"要素を検出\n    Viewer->>DOM: 図を描画\n","mermaid",[33,924,925,930,935,940,945,950,954,959,964,969,974,979,984],{"__ignoreMap":85},[89,926,927],{"class":91,"line":92},[89,928,929],{},"sequenceDiagram\n",[89,931,932],{"class":91,"line":198},[89,933,934],{},"    participant Vue as Vueコンポーネント\n",[89,936,937],{"class":91,"line":269},[89,938,939],{},"    participant Server as Nuxtサーバー\n",[89,941,942],{"class":91,"line":287},[89,943,944],{},"    participant Viewer as viewer-static.min.js\n",[89,946,947],{"class":91,"line":302},[89,948,949],{},"    participant DOM as ブラウザDOM\n",[89,951,952],{"class":91,"line":313},[89,953,327],{"emptyLinePlaceholder":326},[89,955,956],{"class":91,"line":323},[89,957,958],{},"    Vue->>Server: fetch('/2025-11-18/freee-ai-system.drawio')\n",[89,960,961],{"class":91,"line":330},[89,962,963],{},"    Server-->>Vue: XMLデータ\n",[89,965,966],{"class":91,"line":343},[89,967,968],{},"    Vue->>Vue: JSON形式に変換\n",[89,970,971],{"class":91,"line":364},[89,972,973],{},"    Vue->>DOM: data-mxgraph属性を設定\n",[89,975,976],{"class":91,"line":369},[89,977,978],{},"    Vue->>DOM: viewer-static.min.jsをロード\n",[89,980,981],{"class":91,"line":387},[89,982,983],{},"    Viewer->>DOM: class=\"mxgraph\"要素を検出\n",[89,985,986],{"class":91,"line":416},[89,987,988],{},"    Viewer->>DOM: 図を描画\n",[38,990,991],{"id":991},"data-mxgraph属性の構造",[80,993,997],{"className":994,"code":995,"language":996,"meta":85,"style":85},"language-json shiki shiki-themes vitesse-light vitesse-light","{\n  \"highlight\": \"#0000ff\",    // ハイライト色\n  \"nav\": true,                // ナビゲーション表示\n  \"resize\": true,             // リサイズ可能\n  \"toolbar\": \"zoom layers tags lightbox\",  // ツールバー機能\n  \"edit\": \"_blank\",          // 編集ボタンで新しいタブで開く\n  \"xml\": \"\u003Cmxfile>...\u003C/mxfile>\"  // Draw.io XML データ\n}\n","json",[33,998,999,1004,1030,1048,1066,1088,1110,1131],{"__ignoreMap":85},[89,1000,1001],{"class":91,"line":92},[89,1002,1003],{"class":99},"{\n",[89,1005,1006,1010,1013,1015,1017,1020,1022,1024,1027],{"class":91,"line":198},[89,1007,1009],{"class":1008},"sqvqQ","  \"",[89,1011,1012],{"class":468},"highlight",[89,1014,278],{"class":1008},[89,1016,78],{"class":99},[89,1018,1019],{"class":109}," \"",[89,1021,477],{"class":113},[89,1023,278],{"class":109},[89,1025,1026],{"class":99},",",[89,1028,1029],{"class":734},"    // ハイライト色\n",[89,1031,1032,1034,1037,1039,1041,1043,1045],{"class":91,"line":269},[89,1033,1009],{"class":1008},[89,1035,1036],{"class":468},"nav",[89,1038,278],{"class":1008},[89,1040,78],{"class":99},[89,1042,493],{"class":117},[89,1044,1026],{"class":99},[89,1046,1047],{"class":734},"                // ナビゲーション表示\n",[89,1049,1050,1052,1055,1057,1059,1061,1063],{"class":91,"line":287},[89,1051,1009],{"class":1008},[89,1053,1054],{"class":468},"resize",[89,1056,278],{"class":1008},[89,1058,78],{"class":99},[89,1060,493],{"class":117},[89,1062,1026],{"class":99},[89,1064,1065],{"class":734},"             // リサイズ可能\n",[89,1067,1068,1070,1073,1075,1077,1079,1081,1083,1085],{"class":91,"line":302},[89,1069,1009],{"class":1008},[89,1071,1072],{"class":468},"toolbar",[89,1074,278],{"class":1008},[89,1076,78],{"class":99},[89,1078,1019],{"class":109},[89,1080,520],{"class":113},[89,1082,278],{"class":109},[89,1084,1026],{"class":99},[89,1086,1087],{"class":734},"  // ツールバー機能\n",[89,1089,1090,1092,1095,1097,1099,1101,1103,1105,1107],{"class":91,"line":313},[89,1091,1009],{"class":1008},[89,1093,1094],{"class":468},"edit",[89,1096,278],{"class":1008},[89,1098,78],{"class":99},[89,1100,1019],{"class":109},[89,1102,537],{"class":113},[89,1104,278],{"class":109},[89,1106,1026],{"class":99},[89,1108,1109],{"class":734},"          // 編集ボタンで新しいタブで開く\n",[89,1111,1112,1114,1117,1119,1121,1123,1126,1128],{"class":91,"line":323},[89,1113,1009],{"class":1008},[89,1115,1116],{"class":468},"xml",[89,1118,278],{"class":1008},[89,1120,78],{"class":99},[89,1122,1019],{"class":109},[89,1124,1125],{"class":113},"\u003Cmxfile>...\u003C/mxfile>",[89,1127,278],{"class":109},[89,1129,1130],{"class":734},"  // Draw.io XML データ\n",[89,1132,1133],{"class":91,"line":330},[89,1134,577],{"class":99},[14,1136,1138],{"id":1137},"メリットデメリット","メリット・デメリット",[38,1140,1141],{"id":1141},"メリット",[18,1143,1144,1145,1147,1148,1151,1152,1155,1156,1158,1159,1162,1163,1166,1167,1170],{},"✅ ",[27,1146,709],{},": ローカルファイルを直接読み込むため、localhostでも動作\n✅ ",[27,1149,1150],{},"iframeなし",": ページに直接埋め込まれるため、スタイリングが容易\n✅ ",[27,1153,1154],{},"公式ライブラリ",": Draw.io公式の",[33,1157,35],{},"を使用\n✅ ",[27,1160,1161],{},"インタラクティブ",": ズーム、レイヤー表示などの操作が可能\n✅ ",[27,1164,1165],{},"動的更新",": ファイルを編集してページをリロードするだけで反映\n✅ ",[27,1168,1169],{},"Gitで管理",": .drawioファイルはテキストベースのXMLなので、バージョン管理が容易",[38,1172,1173],{"id":1173},"デメリット",[18,1175,1176,1177,50,1180,1183,1184,1187,1188,1191],{},"⚠️ ",[27,1178,1179],{},"外部依存",[33,1181,1182],{},"viewer.diagrams.net","のCDNに依存\n⚠️ ",[27,1185,1186],{},"初回ロード時間",": JavaScriptライブラリのロードに若干時間がかかる\n⚠️ ",[27,1189,1190],{},"ビルド時非レンダリング",": SSR/SSGでは描画されない（クライアントサイドのみ）",[14,1193,1194],{"id":1194},"代替案の検討",[38,1196,1198],{"id":1197},"代替案1-svg自動変換","代替案1: SVG自動変換",[18,1200,1201,1204],{},[27,1202,1203],{},"概要",": Draw.ioファイルの変更を監視して、自動的にSVGに変換するスクリプトを作成",[18,1206,1207,78],{},[27,1208,1141],{},[42,1210,1211,1214],{},[45,1212,1213],{},"SSR/SSGで描画可能",[45,1215,1216],{},"CDN依存なし",[18,1218,1219,78],{},[27,1220,1173],{},[42,1222,1223,1226,1229],{},[45,1224,1225],{},"ビルドプロセスが複雑化",[45,1227,1228],{},"インタラクティブ性なし",[45,1230,1231],{},"変換スクリプトの保守が必要",[38,1233,1235],{"id":1234},"代替案2-nuxtサーバーサイドプロキシ","代替案2: Nuxtサーバーサイドプロキシ",[18,1237,1238,1240],{},[27,1239,1203],{},": Nuxtサーバー経由でDraw.ioビューアーにファイルを提供",[18,1242,1243,78],{},[27,1244,1141],{},[42,1246,1247,1250],{},[45,1248,1249],{},"CORS問題を回避可能",[45,1251,1252],{},"iframe方式でも動作",[18,1254,1255,78],{},[27,1256,1173],{},[42,1258,1259,1262],{},[45,1260,1261],{},"サーバーサイドの実装が必要",[45,1263,1264],{},"プロキシ経由の通信がオーバーヘッド",[14,1266,1267],{"id":1267},"推奨実装",[18,1269,1270,1271,1274],{},"現時点では",[27,1272,1273],{},"viewer-static.min.js方式","を推奨する。",[18,1276,1277],{},"理由：",[1279,1280,1281,1284,1286,1289],"ol",{},[45,1282,1283],{},"実装がシンプル",[45,1285,709],{},[45,1287,1288],{},"インタラクティブ性あり",[45,1290,1291],{},"公式ライブラリで安定",[14,1293,1294],{"id":1294},"実装例",[18,1296,1297],{},"実際の動作例は以下で確認できます：",[42,1299,1300,1306,1312],{},[45,1301,1302,1303],{},"デモページ: ",[33,1304,1305],{},"/blog/drawio-viewer-test",[45,1307,1308,1309],{},"ソースコード: ",[33,1310,1311],{},"apps/web/app/pages/blog/drawio-viewer-test.vue",[45,1313,1314,1315],{},"Draw.ioファイル: ",[33,1316,1317],{},"apps/web/content/2025-11-18/freee-ai-system.drawio",[14,1319,1320],{"id":1320},"課題と解決",[38,1322,1323],{"id":1323},"キャッシュ問題による動的更新の遅延",[18,1325,1326,1329],{},[27,1327,1328],{},"問題",":\n初期実装では、.drawioファイルを編集してページをリロードしても、変更が即座に反映されなかった。サーバーを再起動する必要があった。",[18,1331,1332,78],{},[27,1333,1334],{},"原因",[1279,1336,1337,1348],{},[45,1338,1339,1340,1343,1344,1347],{},"サーバーミドルウェア（",[33,1341,1342],{},"server/middleware/content-images.ts","）が全てのファイルに",[33,1345,1346],{},"cache-control: public, max-age=31536000","（1年間のキャッシュ）を設定",[45,1349,1350],{},"ブラウザのfetchがキャッシュを使用",[18,1352,1353,78],{},[27,1354,1355],{},"解決策",[1357,1358,1360],"h4",{"id":1359},"_1-サーバーミドルウェアでの開発環境用キャッシュ制御","1. サーバーミドルウェアでの開発環境用キャッシュ制御",[80,1362,1364],{"className":725,"code":1363,"language":727,"meta":85,"style":85},"// server/middleware/content-images.ts\nconst isDev = process.env.NODE_ENV === 'development'\nconst cacheControl = (ext === 'drawio' && isDev)\n  ? 'no-cache, no-store, must-revalidate'  // 開発環境では即座に反映\n  : 'public, max-age=31536000'              // 本番環境では長期キャッシュ\n",[33,1365,1366,1370,1402,1432,1447],{"__ignoreMap":85},[89,1367,1368],{"class":91,"line":92},[89,1369,735],{"class":734},[89,1371,1372,1374,1377,1379,1382,1384,1387,1389,1392,1395,1397,1400],{"class":91,"line":198},[89,1373,740],{"class":169},[89,1375,1376],{"class":95},"isDev",[89,1378,106],{"class":99},[89,1380,1381],{"class":95}," process",[89,1383,100],{"class":99},[89,1385,1386],{"class":95},"env",[89,1388,100],{"class":99},[89,1390,1391],{"class":95},"NODE_ENV",[89,1393,1394],{"class":169}," === ",[89,1396,406],{"class":109},[89,1398,1399],{"class":113},"development",[89,1401,643],{"class":109},[89,1403,1404,1406,1409,1411,1414,1417,1419,1421,1423,1425,1428,1430],{"class":91,"line":269},[89,1405,740],{"class":169},[89,1407,1408],{"class":95},"cacheControl",[89,1410,106],{"class":99},[89,1412,1413],{"class":99}," (",[89,1415,1416],{"class":95},"ext",[89,1418,1394],{"class":169},[89,1420,406],{"class":109},[89,1422,846],{"class":113},[89,1424,406],{"class":109},[89,1426,1427],{"class":169}," && ",[89,1429,1376],{"class":95},[89,1431,361],{"class":99},[89,1433,1434,1437,1439,1442,1444],{"class":91,"line":287},[89,1435,1436],{"class":169},"  ?",[89,1438,474],{"class":109},[89,1440,1441],{"class":113},"no-cache, no-store, must-revalidate",[89,1443,406],{"class":109},[89,1445,1446],{"class":734},"  // 開発環境では即座に反映\n",[89,1448,1449,1452,1454,1457,1459],{"class":91,"line":302},[89,1450,1451],{"class":169},"  :",[89,1453,474],{"class":109},[89,1455,1456],{"class":113},"public, max-age=31536000",[89,1458,406],{"class":109},[89,1460,1461],{"class":734},"              // 本番環境では長期キャッシュ\n",[1357,1463,1465],{"id":1464},"_2-vueコンポーネントでのキャッシュバスティング","2. Vueコンポーネントでのキャッシュバスティング",[80,1467,1469],{"className":725,"code":1468,"language":727,"meta":85,"style":85},"// pages/blog/drawio-viewer-test.vue\nconst response = await fetch(`/2025-11-18/freee-ai-system.drawio?t=${Date.now()}`, {\n  cache: 'no-store'\n})\n",[33,1470,1471,1476,1517,1531],{"__ignoreMap":85},[89,1472,1473],{"class":91,"line":92},[89,1474,1475],{"class":734},"// pages/blog/drawio-viewer-test.vue\n",[89,1477,1478,1480,1483,1485,1487,1489,1491,1494,1497,1499,1502,1504,1507,1509,1511,1513,1515],{"class":91,"line":198},[89,1479,740],{"class":169},[89,1481,1482],{"class":95},"response",[89,1484,106],{"class":99},[89,1486,398],{"class":117},[89,1488,401],{"class":121},[89,1490,125],{"class":99},[89,1492,1493],{"class":109},"`",[89,1495,1496],{"class":113},"/2025-11-18/freee-ai-system.drawio?t=",[89,1498,118],{"class":117},[89,1500,1501],{"class":113},"Date",[89,1503,100],{"class":99},[89,1505,1506],{"class":121},"now",[89,1508,381],{"class":99},[89,1510,134],{"class":117},[89,1512,1493],{"class":109},[89,1514,1026],{"class":99},[89,1516,384],{"class":99},[89,1518,1519,1522,1524,1526,1529],{"class":91,"line":269},[89,1520,1521],{"class":468},"  cache",[89,1523,50],{"class":99},[89,1525,406],{"class":109},[89,1527,1528],{"class":113},"no-store",[89,1530,643],{"class":109},[89,1532,1533],{"class":91,"line":287},[89,1534,1535],{"class":99},"})\n",[1357,1537,1539],{"id":1538},"_3-サーバーミドルウェアでクエリパラメータ対応","3. サーバーミドルウェアでクエリパラメータ対応",[80,1541,1543],{"className":725,"code":1542,"language":727,"meta":85,"style":85},"// server/middleware/content-images.ts\nconst pathname = url.split('?')[0]  // クエリパラメータを除去\nconst match = pathname.match(/^\\/(\\d{4}-\\d{2}-\\d{2})\\/([^/]+\\.(png|jpg|jpeg|gif|webp|svg|drawio))$/i)\n",[33,1544,1545,1549,1585],{"__ignoreMap":85},[89,1546,1547],{"class":91,"line":92},[89,1548,735],{"class":734},[89,1550,1551,1553,1556,1558,1560,1562,1565,1567,1569,1572,1574,1577,1580,1582],{"class":91,"line":198},[89,1552,740],{"class":169},[89,1554,1555],{"class":95},"pathname",[89,1557,106],{"class":99},[89,1559,748],{"class":95},[89,1561,100],{"class":99},[89,1563,1564],{"class":121},"split",[89,1566,125],{"class":99},[89,1568,406],{"class":109},[89,1570,1571],{"class":113},"?",[89,1573,406],{"class":109},[89,1575,1576],{"class":99},")[",[89,1578,1579],{"class":773},"0",[89,1581,804],{"class":99},[89,1583,1584],{"class":734},"  // クエリパラメータを除去\n",[89,1586,1587,1589,1591,1593,1596,1598,1600,1602,1604,1606,1608,1610,1612,1614,1616,1618,1620,1622,1624,1626,1628,1630,1632,1634,1636,1638,1640,1642,1644,1646,1648,1650,1652,1654,1656,1658,1660,1662,1664,1666,1668,1670,1672,1674,1676,1678],{"class":91,"line":269},[89,1588,740],{"class":169},[89,1590,743],{"class":95},[89,1592,106],{"class":99},[89,1594,1595],{"class":95}," pathname",[89,1597,100],{"class":99},[89,1599,743],{"class":121},[89,1601,125],{"class":99},[89,1603,757],{"class":109},[89,1605,760],{"class":117},[89,1607,764],{"class":763},[89,1609,125],{"class":99},[89,1611,770],{"class":769},[89,1613,774],{"class":773},[89,1615,778],{"class":777},[89,1617,770],{"class":769},[89,1619,783],{"class":773},[89,1621,778],{"class":777},[89,1623,770],{"class":769},[89,1625,783],{"class":773},[89,1627,131],{"class":99},[89,1629,764],{"class":763},[89,1631,796],{"class":99},[89,1633,760],{"class":169},[89,1635,757],{"class":801},[89,1637,804],{"class":99},[89,1639,807],{"class":773},[89,1641,810],{"class":763},[89,1643,125],{"class":99},[89,1645,815],{"class":777},[89,1647,818],{"class":169},[89,1649,821],{"class":777},[89,1651,818],{"class":169},[89,1653,826],{"class":777},[89,1655,818],{"class":169},[89,1657,831],{"class":777},[89,1659,818],{"class":169},[89,1661,836],{"class":777},[89,1663,818],{"class":169},[89,1665,841],{"class":777},[89,1667,818],{"class":169},[89,1669,846],{"class":777},[89,1671,849],{"class":99},[89,1673,852],{"class":117},[89,1675,757],{"class":109},[89,1677,857],{"class":117},[89,1679,361],{"class":99},[18,1681,1682,1684],{},[27,1683,142],{},": ✅ 解決済み",[42,1686,1687,1690,1697],{},[45,1688,1689],{},".drawioファイルを編集",[45,1691,1692,1693,1696],{},"ページをリロード（",[27,1694,1695],{},"サーバー再起動不要","）",[45,1698,1699],{},"変更が即座に反映される",[18,1701,1702],{},"開発環境で真の「動的埋め込み」が実現した。",[38,1704,1706],{"id":1705},"本番環境でのnot-a-diagram-fileエラー","本番環境での「Not a diagram file」エラー",[18,1708,1709,1711],{},[27,1710,1328],{},":\nCloudflare Pagesにデプロイすると「Not a diagram file」エラーが発生",[18,1713,1714,1716,1717,1720,1721,1724,1725,1727],{},[27,1715,1334],{},":\n",[33,1718,1719],{},"nuxt.config.ts","のNitroフックで、画像ファイル（png, jpg等）のみを",[33,1722,1723],{},"public/","ディレクトリにコピーしており、",[33,1726,721],{},"ファイルが本番ビルドに含まれていなかった",[18,1729,1730,78],{},[27,1731,1355],{},[80,1733,1735],{"className":725,"code":1734,"language":727,"meta":85,"style":85},"// nuxt.config.ts\n} else if (/\\.(png|jpg|jpeg|gif|webp|svg|drawio)$/i.test(entry.name)) {\n  // .drawioを正規表現に追加\n",[33,1736,1737,1742,1815],{"__ignoreMap":85},[89,1738,1739],{"class":91,"line":92},[89,1740,1741],{"class":734},"// nuxt.config.ts\n",[89,1743,1744,1748,1751,1754,1756,1758,1760,1762,1764,1766,1768,1770,1772,1774,1776,1778,1780,1782,1784,1786,1788,1790,1792,1794,1796,1798,1801,1803,1806,1808,1811,1813],{"class":91,"line":198},[89,1745,1747],{"class":1746},"sG7-3","} ",[89,1749,1750],{"class":117},"else",[89,1752,1753],{"class":117}," if",[89,1755,1413],{"class":99},[89,1757,757],{"class":109},[89,1759,810],{"class":763},[89,1761,125],{"class":99},[89,1763,815],{"class":777},[89,1765,818],{"class":169},[89,1767,821],{"class":777},[89,1769,818],{"class":169},[89,1771,826],{"class":777},[89,1773,818],{"class":169},[89,1775,831],{"class":777},[89,1777,818],{"class":169},[89,1779,836],{"class":777},[89,1781,818],{"class":169},[89,1783,841],{"class":777},[89,1785,818],{"class":169},[89,1787,846],{"class":777},[89,1789,131],{"class":99},[89,1791,852],{"class":117},[89,1793,757],{"class":109},[89,1795,857],{"class":117},[89,1797,100],{"class":99},[89,1799,1800],{"class":121},"test",[89,1802,125],{"class":99},[89,1804,1805],{"class":95},"entry",[89,1807,100],{"class":99},[89,1809,1810],{"class":95},"name",[89,1812,849],{"class":99},[89,1814,384],{"class":99},[89,1816,1817],{"class":91,"line":269},[89,1818,1819],{"class":734},"  // .drawioを正規表現に追加\n",[18,1821,1822,1684],{},[27,1823,142],{},[42,1825,1826,1829],{},[45,1827,1828],{},"ビルド時に.drawioファイルもpublicディレクトリにコピー",[45,1830,1831],{},"本番環境でも正常に表示",[1833,1834],"hr",{},[14,1836,1837],{"id":1837},"今後の課題",[38,1839,1841],{"id":1840},"_1-オフライン対応","1. オフライン対応",[18,1843,1844],{},"CDNに依存しているため、オフライン環境では動作しない。",[18,1846,1847,78],{},[27,1848,1355],{},[42,1850,1851,1856],{},[45,1852,1853,1855],{},[33,1854,35],{},"をローカルにホスト",[45,1857,1858,1861],{},[33,1859,1860],{},"public/js/viewer-static.min.js","に配置して参照",[38,1863,1865],{"id":1864},"_2-ssrssg対応","2. SSR/SSG対応",[18,1867,1868],{},"現在はクライアントサイドのみで描画される。",[18,1870,1871,78],{},[27,1872,1355],{},[42,1874,1875,1878],{},[45,1876,1877],{},"サーバーサイドでSVGに変換してレンダリング",[45,1879,1880],{},"または、静的ビルド時にSVGを生成",[38,1882,1884],{"id":1883},"_3-パフォーマンス最適化","3. パフォーマンス最適化",[18,1886,1887],{},"大きな図ではロード時間がかかる可能性がある。",[18,1889,1890,78],{},[27,1891,1355],{},[42,1893,1894,1897],{},[45,1895,1896],{},"遅延ロード（Intersection Observer）",[45,1898,1899],{},"複数の図がある場合は、1つのviewer-static.min.jsを共有",[14,1901,1902],{"id":1902},"参考資料",[42,1904,1905,1914,1921,1926],{},[45,1906,1907],{},[1908,1909,1913],"a",{"href":1910,"rel":1911},"https://www.drawio.com/doc/faq/embed-mode",[1912],"nofollow","Draw.io Embed Mode Documentation",[45,1915,1916],{},[1908,1917,1920],{"href":1918,"rel":1919},"https://www.drawio.com/blog/embedding-walkthrough",[1912],"Draw.io Embedding Walk-through",[45,1922,1923],{},[1908,1924,35],{"href":53,"rel":1925},[1912],[45,1927,1928],{},[1908,1929,1932],{"href":1930,"rel":1931},"https://github.com/jgraph/drawio/discussions/3430",[1912],"GitHub Discussion: Viewing a .drawio file in an HTML document",[14,1934,1935],{"id":1935},"まとめ",[18,1937,1938,1939,1941],{},"Draw.ioファイルをVueコンポーネント内で動的に読み込む方法として、",[33,1940,35],{},"を使用する実装が最も実用的であることが確認できた。",[18,1943,1944],{},"この方法により：",[42,1946,1947,1950,1953,1956],{},[45,1948,1949],{},"✅ Draw.ioファイルを編集したら、ページをリロードするだけで反映",[45,1951,1952],{},"✅ CORSエラーなしでlocalhostでも動作",[45,1954,1955],{},"✅ SVG/PNGへのエクスポート不要",[45,1957,1958],{},"✅ Gitで履歴管理可能",[18,1960,1961],{},[27,1962,1963],{},"動的埋め込みは可能であり、実用的な実装方法が確立された。",[1965,1966,1967],"style",{},"html pre.shiki code .s4oTP, html code.shiki .s4oTP{--shiki-default:#B07D48;--shiki-dark:#B07D48}html pre.shiki code .shFtX, html code.shiki .shFtX{--shiki-default:#999999;--shiki-dark:#999999}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 .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 .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 .stQ0i, html code.shiki .stQ0i{--shiki-default:#AB5959;--shiki-dark:#AB5959}html pre.shiki code .sz8Xr, html code.shiki .sz8Xr{--shiki-default:#998418;--shiki-dark:#998418}html pre.shiki code .sxvE3, html code.shiki .sxvE3{--shiki-default:#A0ADA0;--shiki-dark:#A0ADA0}html pre.shiki code .svWSF, html code.shiki .svWSF{--shiki-default:#BDA437;--shiki-dark:#BDA437}html pre.shiki code .she3A, html code.shiki .she3A{--shiki-default:#5A6AA6;--shiki-dark:#5A6AA6}html pre.shiki code .sM54T, html code.shiki .sM54T{--shiki-default:#2F798A;--shiki-dark:#2F798A}html pre.shiki code .sLkVR, html code.shiki .sLkVR{--shiki-default:#AB5E3F;--shiki-dark:#AB5E3F}html pre.shiki code .snbK4, html code.shiki .snbK4{--shiki-default:#A65E2B;--shiki-dark:#A65E2B}html pre.shiki code .sSkh3, html code.shiki .sSkh3{--shiki-default:#2E8F82;--shiki-dark:#2E8F82}html pre.shiki code .sqvqQ, html code.shiki .sqvqQ{--shiki-default:#99841877;--shiki-dark:#99841877}html pre.shiki code .sG7-3, html code.shiki .sG7-3{--shiki-default:#393A34;--shiki-dark:#393A34}",{"title":85,"searchDepth":198,"depth":198,"links":1969},[1970,1971,1974,1979,1984,1988,1992,1993,1994,1998,2003,2004],{"id":16,"depth":198,"text":16},{"id":23,"depth":198,"text":23,"children":1972},[1973],{"id":40,"depth":269,"text":40},{"id":68,"depth":198,"text":68,"children":1975},[1976,1977,1978],{"id":71,"depth":269,"text":72},{"id":154,"depth":269,"text":155},{"id":235,"depth":269,"text":236},{"id":712,"depth":198,"text":712,"children":1980},[1981,1982,1983],{"id":715,"depth":269,"text":715},{"id":917,"depth":269,"text":917},{"id":991,"depth":269,"text":991},{"id":1137,"depth":198,"text":1138,"children":1985},[1986,1987],{"id":1141,"depth":269,"text":1141},{"id":1173,"depth":269,"text":1173},{"id":1194,"depth":198,"text":1194,"children":1989},[1990,1991],{"id":1197,"depth":269,"text":1198},{"id":1234,"depth":269,"text":1235},{"id":1267,"depth":198,"text":1267},{"id":1294,"depth":198,"text":1294},{"id":1320,"depth":198,"text":1320,"children":1995},[1996,1997],{"id":1323,"depth":269,"text":1323},{"id":1705,"depth":269,"text":1706},{"id":1837,"depth":198,"text":1837,"children":1999},[2000,2001,2002],{"id":1840,"depth":269,"text":1841},{"id":1864,"depth":269,"text":1865},{"id":1883,"depth":269,"text":1884},{"id":1902,"depth":198,"text":1902},{"id":1935,"depth":198,"text":1935},null,"Draw.ioファイルをVueコンポーネント内で動的に読み込んで表示する方法の調査結果と実装方法","md",{},"/drawio-dynamic-embedding-research",false,"2025-11-18T00:00:00.000Z",{"title":5,"description":2006},"2025-11/2025-11-19/drawio-dynamic-embedding-research",[2015,245,2016,2017,2018],"draw.io","nuxt","diagram","調査レポート","UBQ_KYjHDBr3-D_BWfyqiXBm-i_imXLmMvo9Y6Xoa4A",[],[2022,2025,2029,2032,2036],{"title":2023,"path":2024,"publishedAt":2011},"Draw.io動的埋め込み：採用した実装方法","/drawio-embedding-implementation",{"title":2026,"path":2027,"publishedAt":2028},"全18講に触って動くシミュレーターを入れた日 — PR12本のレビューから講座導線の作り直しまで","/code-course-interactive-rollout","2026-07-26T00:00:00.000Z",{"title":2030,"path":2031,"publishedAt":2028},"インタラクティブ教材を1枚に集約し、本文の線を減らした日","/interactive-content-consolidation",{"title":2033,"path":2034,"publishedAt":2035},"Webサービスの技術構成 2026年版 — Vue.js/Nuxt/Astroの使い分けとその理由","/web-tech-stack-2026","2026-07-22T00:00:00.000Z",{"title":2037,"path":2038,"publishedAt":2039},"英語の図解Artifactを日本語化して単独Vueページで公開するまで - AI導入5ステップの移植記録","/ai-adoption-steps-page","2026-07-17T00:00:00.000Z","https://log.eurekapu.com/og/blog/drawio-dynamic-embedding-research.png?v=2025-11-18T00%3A00%3A00.000Z&title=Draw.io%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%AE%E5%8B%95%E7%9A%84%E5%9F%8B%E3%82%81%E8%BE%BC%E3%81%BF%E8%AA%BF%E6%9F%BB%E3%83%AC%E3%83%9D%E3%83%BC%E3%83%88&author=Kei%20Komatsu&sig=c2f276b6a8880588",1785654662053]