はじめに
VS CodeでDraw.io（diagrams.net）の拡張機能を使って図を作成した際、PNGをエクスポートすると色が白黒反転してしまう現象に悩んでいませんか？
私も同じ問題に直面しましたが、簡単な設定変更で解決できたので、その方法を紹介します。
原因
この問題は、Draw.ioのテーマ設定が影響している可能性があります。VS Codeのダークモードを使用していると、PNG出力時に色が反転してしまうことがあります。
また、エクスポート時のオプションが適切でない場合にも、色が正しく表示されないことがあります。
解決方法
※私は1のみで問題は解決しました。
1. Draw.ioのテーマ設定を変更する
.drawioまたは.dioファイルを開くCtrl + Shift + P（Macの場合はCmd + Shift + P）を押してコマンドパレットを開くthemeと入力し、「Theme: Select Theme」を選択Lightを選択- PNGを再度エクスポートして、正しい色で出力されるか確認
2. PNGエクスポート時の設定を確認する
File→Export As→PNGを選択- 「Transparent Background（透過背景）」にチェックを入れる
- 「Black and White（白黒）」のオプションが無効になっていることを確認
- エクスポートを実行
うまくいかない場合の対策
もし上記の方法で解決しない場合は、以下の方法も試してみてください。
- Web版Draw.ioを使用する
- https://app.diagrams.net/ で
.drawioファイルを開く - テーマを「Light」に設定し、PNGをエクスポートする
- https://app.diagrams.net/ で
- VS CodeのDraw.io拡張機能を更新する
Ctrl + Shift + X（拡張機能パネルを開く）- 「Draw.io Integration」を検索し、最新バージョンに更新
まとめ
VS CodeでDraw.ioを使っていると、PNGエクスポート時に色が反転してしまう問題が発生することがあります。この問題は、Draw.ioテーマを「Light」に変更することで簡単に解決できます。
もしうまくいかない場合は、エクスポート設定やWeb版の利用も試してみてください。これで、正しい色のPNGを出力できるようになります！
この記事が、同じ問題で困っている方の助けになれば幸いです。
