VSCode設定#5　Draw.io環境構築編

前回に引き続き、VSCode設定（Draw.io環境構築編）です。
ちなみに前回の記事はこちら。

私はインフラ屋さんをやっているので、ポンチ絵を書くことが非常に多いです。
基本的にはパワーポイントで素材集めて作成することが多かったのですが、
Draw.ioを使って作成してみたいと思います

今回参考にさせて頂いたサイトはこちら。ありがとうございます！

VSCodeでDraw.ioが使えるようになったらしい！ - Qiita

では早速実施してみたいと思います！

(1) Draw.ioをインストールする

VSCodeを立ち上げて、拡張機能（Command + Shift + X）を選択！
Draw.io Integrationを探して、いざインストールです。

参考サイト様にVSCodeを再起動することが推奨されていたので、
再起動も実施しました。

(2) Draw.ioで図形を描いてみる

どうやらpng拡張子でファイルを作成するとDraw.ioで書けるとのことなので、
実際にやってみます。

あれ、うまく出来なかった。
結果やってみた結果、以下の様な結果になりました。

demo2.drawio.png　→　NG
demo3.drawio　　　→　OK
demo4.drawio.svg　→　OK

なぜdrawio.pngがうまく動いてくれないのかは後で調べるとして、
まずは使い勝手を見てみたいと思います。

いい感じにDraw.ioの画面が表示できました。
実際にお絵描きしてみた結果はこちら（センスはないです）

これで構成図を書くVSCode環境は作れたので、以前作成していたお遊び環境を
表現してみたいと思います。
　※ただDockerをDockerとして正しく使っていないことはご愛嬌です。

それではまた次回！

( ✌︎'ω')✌︎