drawio.svgファイル内にインポートした画像が含まれるとGitLabで正しく描画されない件

GitLabでdrawioで作成した画像ファイルを扱うのであれば、拡張子をdrawio.pngにするのが無難かも
2022.08.31

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

何だか正しく描画されないな

こんにちは、のんピ(@non____97)です。

皆さんはdrawio.svgは好きですか? 私は好きです。

drawioの画像ファイルの拡張子をdrawio.svgにすることで、作成した画像をMarkdownファイルで表示するときにいちいちsvgやpngにエクスポートする必要がなくなります。

ただし、GitLabの場合drawioの画像ファイルの拡張子をdrawio.svgにすることで、正しく描画されないことがあることをご存知でしょうか。

今回は、そんな事象について紹介します。

いきなりまとめ

  • GitLabの場合、drawio.svgのファイル内にインポートした画像が含まれると正しく描画されない
  • GitHubではdrawio.svgのファイル内にインポートした画像が含まれていても正しく描画される
  • GitLabでdrawioで作成した画像ファイルを扱うのであれば、拡張子をdrawio.pngにするのが無難かも

画像ファイルの用意

それでは検証用の画像ファイルを用意します。

今回は以下の3つの画像ファイルを用意します。

  1. drawio内で描画した図形のみのdrawio.svgファイル (drawio-shape-only.drawio.svg) drawio-shape-only_drawio_svg_—_images
  2. drawio内で描画した図形とインポートされた画像が含まれるdrawio.svgファイル (drawio-shape-and-imported-image.drawio.svg) drawio-shape-and-imported-image_drawio_svg_—_images
  3. インポートされた画像のみのdrawio.svgファイル (imported-image.drawio.svg) imported-image_drawio_svg_—_images

ちなみに画像のインポートはdrawioのエディター内のファイル-Import...から行えます。

画像のインポート

GitLabの場合

それでは、画像をGitLabにアップロードして正しく表示されるか確認してみましょう。

GitLabのリポジトリ上に画像ファイルをアップロードして、README.mdに表示させてみます。

使用するREADME.mdは以下の通りです。

# svg-file-display-test

## drawio-shape-only.drawio.svg

![drawio-shape-only.drawio.svg](./drawio-shape-only.drawio.svg)

## drawio-shape-and-imported-image.drawio.svg

![drawio-shape-and-imported-image.drawio.svg](./drawio-shape-and-imported-image.drawio.svg)

## imported-image.drawio.svg

![imported-image.drawio.svg](./imported-image.drawio.svg)

README.mdを表示すると以下のようになりました。

gitlab_README_md

drawio内で描画した図形とインポートされた画像が含まれるdrawio.svgファイル (drawio-shape-and-imported-image.drawio.svg)と、インポートされた画像のみのdrawio.svgファイル (imported-image.drawio.svg)が表示されませんね。

drawio.svgファイルの実体はテキストです。そのため、悪意あるコードを埋め込むこともできます。もしかしたらGitHub側でセキュリティ対策としてimageやscriptタグなどを含む場合は描画しないようにしているのかもしれませんね。

GitHubの場合

次にGitHubでも同じことを試してみます。

同じ画像ファイル、README.mdをGitHubのリポジトリにアップロードします。

README.mdを表示すると以下のようになりました。github_README_md

GitHubの場合は正しく表示されました。

drawio.pngを試してみる

GitLabの場合はインポートされた画像が含まれるdrawio.svgは正しく描画されないことが分かりました。

ということで拡張子をdrawio.pngに変更したときには正しく描画されるのかを確認します。

まず、drawio.svgからdrawio.pngへの変更を行います。

drawioのエディター内のファイル-Convert...をクリックします。

convert_drawio-shape-and-imported-image_drawio_svg_—_images

すると、drawioにするかdrawio.pngにするか聞かれます。drawio.pngをクリックします。

drawio.png

これでdrawio.svgからdrawio.pngに変換されます。

pngということでテキストではなくバイナリファイルになります。VS Codeの場合、普通に開くとこのファイルはバイナリか、サポートされていないテキストエンコードを使用しているため、エディターに表示されません。と表示されます。

このファイルはバイナリ

開く際には開くからDraw.io (Binary)を選択してください。(要Draw.io Integration)

Draw.io (Binary)

これで、drawio.pngの画像も編集できます。

drawio-shape-and-imported-image_drawio_png_—_images

drawio.pngの画像ファイルをアップロードして、README.mdをdrawio.pngを参照するように変更します。README.mdを確認すると以下のように表示されました。

gitlab_drawio.png_README.md

正しく描画されていますね。

GitHubでも同じdrawio.pngファイル、README.mdにしてみました。こちらも正しく描画されています。

github_drawio.png_README.md

GitLabでdrawioで作成した画像ファイルを扱うのであれば、拡張子をdrawio.pngにするのが無難かも

drawio.svgのファイル内にインポートした画像が含まれるとGitLabで正しく描画されないという事象を紹介しました。

GitLabでdrawioで作成した画像ファイルを扱うのであれば、拡張子をdrawio.pngにするのが無難かもしれませんね。

この記事が誰かの助けになれば幸いです。

以上、AWS事業本部 コンサルティング部の のんピ(@non____97)でした!