Q&A
ちょっと試してみたいことを思いついたのでやってみた結果も追記します。
VSCode拡張のdrawioが出力したSVGファイルはxmlが改行されていてさらに整形されてネストも付いていました。
改行はそのままでネストのブランクだけ取ってみたらかなり改善しました。SVGの仕様を見れるサイトとかわからないのですが、xmlはネストや改行が悪さするのでしょうかね。。。
前提
VSCode拡張のAsciidocとDraw.io Integrationを導入。
VSCodeでdrawioにてフローチャートを作成してSVG形式で保存。
Asciidocでドキュメントを作成してその中で上記のSVGファイルをimageで取り込む。
発生している問題・エラーメッセージ
図形が崩れてしまう。
※そもそもブラウザーでSVGファイル単体で表示しても図が崩れる。drawioの中だと正常に表示されるのだが。。。
(図で見せたいのですがテラテイル側が画像の挿入を受け付けてくれないのでお察しください)
該当のソースコード
サンプル.adoc
=== 概要図 image::サンプル.drawio.svg[width=70%, align=center] === 説明 本アプリケーションは、テラテイルに質問するためのサンプルとして作成した図であり、内容に意味はない。図が崩れる様子を再現するためだけに作成したものである。
サンプル.drawio.svg
<svg host="65bd71144e" xmlns="http://www.w3.org/2000/svg" style="background: #ffffff; background-color: light-dark(#ffffff, #121212); color-scheme: light;" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="309px" height="99px" viewBox="0 0 309 99" content="<mxfile host="embed.diagrams.net" agent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Code/1.105.1 Chrome/138.0.7204.251 Electron/37.6.0 Safari/537.36" scale="1" border="0" version="28.2.9"><diagram id="JEtDBU3mIkF1rUYPf20s" name="ページ1">1VZdb5swFP01ltaHTIDzxSMkaTup1Tr1YW1fJgc88GowNSYf+/Wz4TpASKZOayetD831uRf7+vgcA8KLbHclSZHeiphy5DnxDuEl8jzsYv3fAPsGGE+dBkgkixvIbYF79pMCaMsqFtOyV6iE4IoVfTASeU4j1cOIlGLbL/sueH/VgiR0ANxHhA/RryxWaYPOvVmLX1OWpHZld+o3mYzYYthJmZJYbHsQiUmh2IYuBBcSGs1FTk0WrxBeSCFUE2W7BeWGWctaM8XlmeyhbUlz9ZoHnCRYisdP3xblzdPLU/l5Of5yO7KHUKq95YPGmh4YCqlSkYic8FWLhlJUeUzNtI4etTU3QhQadDX4gyq1h7MmlRIaSlXGIUt3TD104kcz1Ud89AfJ5Q4Wqgf7zuCOSpZRRaXFciX3D91BM/HEDtup6pGda8gkkFuKSkZAiwfSJDKhUAXCN4R1HgP2r6jQvcm9LpCUEyOCvnRBDcmhrj07HcDxnT5K6GVDeAWTohVGcw8Fh+ASgrAJMAoXg5PWei1MWGU8iJTQNIYbKhXT3rgha8rvRMkUE7kuWQulRNYpCDhLTEKZI++eragUZ7kWvHWrM1DMWb7N5HT3Wy4hOwHd7q0pwa3b1sEYStKOee3V9Dfk4yH53pTrBcKYbXoET18qY+5wTaLnpKZgFJl7AOHAqCJZf/AmE+TpFZ1ucFFTpC+yXI3K2kKm3B0XuyZh6B3ZXdUp36a2KVN0VBYkgqcKSeuMbUVHCfzWLZtFTvZ81KjTdGd/Lk5PCpKbWMlhCPwZBIGumaD5DAVTtJoh30HzqW1F89500+9QwzWvffR/ohq27lprjlt6zuzxyKd999QL3zfrLrf6ldz3n9nLJckYN9a4pnxDjV/fxnUHT1nbOc7Adq73Tr47/f46cRW+i0TeUAm+ayXh97VRX9LDa9sELvKXEAQrtBqjMET+9J/qxyTgje6awlJJ8dx82Gio/qjRRYzzI+gNdOfjo9v+lbLz/lx2eth+ktW5zlcvXv0C</diagram></mxfile>"> <defs/> <rect fill="#ffffff" width="100%" height="100%" x="0" y="0" style="fill: light-dark(rgb(255, 255, 255), rgb(18, 18, 18));"/> <g> <g data-cell-id="0"> <g data-cell-id="1"> <g data-cell-id="0gADoYI_CsLZqZsOD4QM-10"> <g transform="translate(0.5,0.5)"> <path d="M 38 37 L 113 37 L 113 30 L 181.63 30" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke" style="stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/> <path d="M 186.88 30 L 179.88 33.5 L 181.63 30 L 179.88 26.5 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all" style="fill: light-dark(rgb(0, 0, 0), rgb(255, 255, 255)); stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/> </g> </g> <g data-cell-id="2"> <g transform="translate(0.5,0.5)"> <ellipse cx="23" cy="24.5" rx="7.5" ry="7.5" fill="#ffffff" stroke="#000000" pointer-events="all" style="fill: light-dark(#ffffff, var(--ge-dark-color, #121212)); stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/> <path d="M 23 32 L 23 57 M 23 37 L 8 37 M 23 37 L 38 37 M 23 57 L 8 77 M 23 57 L 38 77" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="all" style="stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/> </g> <g> <g> <switch> <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"> <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 84px; margin-left: 23px;"> <div style="box-sizing: border-box; font-size: 0; text-align: center; color: #000000; "> <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; white-space: nowrap; "> アクター </div> </div> </div> </foreignObject> <text x="23" y="96" fill="light-dark(#000000, #ffffff)" font-family="Helvetica" font-size="12px" text-anchor="middle"> アクター </text> </switch> </g> </g> </g> <g data-cell-id="3"> <g transform="translate(0.5,0.5)"> <rect x="188" y="0" width="120" height="60" fill="#ffffff" stroke="#000000" pointer-events="all" style="fill: light-dark(#ffffff, var(--ge-dark-color, #121212)); stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/> </g> <g> <g> <switch> <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"> <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 30px; margin-left: 189px;"> <div style="box-sizing: border-box; font-size: 0; text-align: center; color: #000000; "> <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; "> <div style="background-color: light-dark(rgb(255, 255, 255), rgb(18, 18, 18)); font-size: 14px; line-height: 19px; white-space: pre;"> <font style="color: light-dark(rgb(0, 0, 0), rgb(237, 237, 237));"> サンプル処理 </font> </div> <div style="background-color: light-dark(rgb(255, 255, 255), rgb(18, 18, 18)); font-size: 14px; line-height: 19px; white-space: pre;"> メイン </div> </div> </div> </div> </foreignObject> <text x="248" y="34" fill="light-dark(#000000, #ffffff)" font-family="Helvetica" font-size="12px" text-anchor="middle"> サンプル処理
メイン </text> </switch> </g> </g> </g> <g data-cell-id="0gADoYI_CsLZqZsOD4QM-12"> <g transform="translate(0.5,0.5)"> <rect x="51" y="10" width="120" height="20" fill="none" stroke="none" pointer-events="all"/> </g> <g> <g> <switch> <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"> <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 20px; margin-left: 52px;"> <div style="box-sizing: border-box; font-size: 0; text-align: center; color: #000000; "> <div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; "> <div style="background-color: light-dark(rgb(255, 255, 255), rgb(18, 18, 18)); line-height: 19px; white-space: pre;"> パラメーターその他 </div> </div> </div> </div> </foreignObject> <text x="111" y="23" fill="light-dark(#000000, #ffffff)" font-family="Helvetica" font-size="11px" text-anchor="middle"> パラメーターその他 </text> </switch> </g> </g> </g> </g> </g> </g> <switch> <g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/> <a transform="translate(0,-5)" xlink:href="https://www.drawio.com/doc/faq/svg-export-text-problems" target="_blank"> <text text-anchor="middle" font-size="10px" x="50%" y="100%"> Text is not SVG - cannot display </text> </a> </switch> </svg>
試したこと
サンプル.drawio.svgをデスクトップ版draw.ioアプリで作成すると図は崩れなかった。
テキストエディターで見てみるとxmlが改行されずに1行ベタ打ちで作成されていた。
試しにこの1行ベタ打ちを改行して見やすくネストさせてみたら図は崩れた。
質問
試してわかったのはVSCodeのdrawio拡張がSVGのxmlを改行して出力してしまうことが原因とわかったのですが、これって回避策はあったりするのでしょうか?
- 改行されたxmlを正しく解釈してくれないAsciidoc側の問題? (どこかに要望を出す話?)
- 改行しないxmlをdrawio拡張で出力するオプションがないのが問題? (どこかに要望を出す話?)
回答1件
0
自己解決
すいません、自己解決しました。xmlに罪はありませんでした。
一から落ち着いてVSCode拡張で作図し直したら崩れは直りました。
人が作ったものが取り込んで崩れていたのでよくわからなかったのですが、どうやらデスクトップ版で途中まで書いたものをVSCodeで続きを作ったみたいです。
それの何が悪いのかわからないのですが、(ここから勝手な予想ですが)ソースのxmlが錯綜して作られてしまっていたと推測しています。何せちょっと図を書いただけで長いxmlが作られてしまうので、xmlをつぶさに読む余裕もなく、ただ違和感を感じてはいたので作者に勝手にSVGを自分で落ち着いて作り直してみたのです。それで崩れはなくなりました。
あとで修正前後のxmlのコンペアしてみようと思います。
投稿2025/11/08 12:07
総合スコア24
あなたの回答
tips
プレビュー
