.drawio.png で保存するときの画像のサイズをでかくする

はじめに

みなさん、drawio 使ってますか？ そして、VSCode の drawio 拡張機能 Draw.io Integration - Visual Studio Marketplace は使ってますか？

https://marketplace.visualstudio.com/items?itemName=hediet.vscode-drawio

この拡張機能には、drawio で編集可能なファイル形式のまま、外部アプリからはそのまま画像として読み込むことができる便利機能が存在します。
拡張子を .drawio.png や .drawio.svg という形式で作成されたファイルは、 VSCode 上では drawio として編集可能な状態を保ちつつ、png や svg の画像としてもそのまま読めてしまいます^[1]。

たとえば以下のようなファイルを作成すると、

このファイルをそのまま画像として読み込むことができます。

ただ、ここで画像として読み込めるサイズはデフォルトでかなり小さい解像度で、ちょっと拡大すると画像の粗さが目立ちます。目立ちますよね？^[2]
文字サイズとオブジェクトのサイズを大きくすることでも解決できるかもしれませんが、できれば何も考えずにデフォルトのサイズのまま作業したいです。
設定をいろいろ見てたらこのサイズを変更する方法があったので紹介します。小ネタです。

設定方法

環境

• Windows 11 22H2 (OSは関係ないはず)
• VSCode 1.82.1
• Draw.io Integration 1.6.6

手順

1. VSCode で .drawio.png ファイルを開きます
2. Diagram > File > Properties を選択します(このあたりの文言はスキンによって異なるかも)
   
3. Zoom という項目がありデフォルトが 100% になっていると思うのでここの値を適当に大きくします。
   

結果

でかくなりました

png 画像を export する場合の設定と似たような方法で .drawio.png の出力サイズも指定できるようです。

https://qiita.com/ganyariya/items/80e468d6a1e961347af4

https://yayuyota.jp/draw-io-image-output/

おわりに

これで、デフォルトのまま作業を進めたとしてもレイアウトとか文字サイズを変更したりする必要がなくなりました。でかい画像を作成していきましょう。

脚注

1. この機能がどのように実現されているかについては *.drawio.png と *.drawio.svg とはなんなのか にわかりやすく書いてありました。

2. なぜベクターである svg にするのではなく png のままやりたかったか。Discordにそのまま貼りたかったからです。svgファイルを Discord に貼ると Discord 上に SVG ソースコードが展開されて画像として見えないんですよね。