VSCode拡張機能~Draw.io~

こんにちは！ポテトヘッド(@potato_head0809)です！

今回はVSCodeの便利な拡張機能「Draw.io」について紹介します。

では、早速始めましょう！

Draw.io

Draw.ioとはどんなものか。

簡単に説明しますと、図を書いたりできます。

こんな感じです。

データベースを作っていくときなど、

情報を整理したい場合などにとても役立ちます！

そして、作成したものをPNG等に変換したりすることができるので便利です！

インストールしよう！

では、まずは下の画像の赤枠で囲まれている場所をクリックします。

その次に、以下のような画面になると思います。

そして、検索のところで「Draw.io Integration」と検索してください。

検索に出てきた「Draw.io Integration」をクリックします。

そうしたら次にすることはインストールです！

(注)　私はインストール済なので「Uninstall」と表示されています。

念のためですが、ここで一度VSCodeを再起動してください。

インストールはここまでで終了です！

使い方

ファイルの作成も簡単です。

拡張子に「.drawio」もしくは「.dio」を付けるだけです！

その後の操作も何も難しいことはありません。

遊ぶつもりで触っていれば慣れます。本当です。笑

例えば、左側の赤枠から使いたい図を選択すると、

右側の赤枠に表示されます。

そこから図を大きくしたり、横長にしたり、矢印を付けたり...。

できることがたくさんあります！

アイコンを追加しよう！

次にアイコンの追加方法を紹介します。

まずは以下の画像の左下にある赤枠の「+ More Shapes...」をクリック！

そうすると、以下のような画面が出てきます。

なんでもいいですが、何か一つを押してみてください。

今回は「Arrows」を押してみました。

これで、左上の「Search Shapes」から検索ができるようになりました！

実際にやってみましょう！

以下の画像の赤枠の中に先ほど追加した「Arrows」と検索してみてください！

すると、次のように「Arrows」に関するものがたくさん出てきます！

このようにして追加できるので、自分の使いたいものを探して追加してみてください！

PNGに変換してみよう！

では最後に、PNGファイルに変換してみましょう！

順を追って説明します。

まずはFileをクリックします。

その後は「Export as」> 「PNG...」の順にクリックします。

すると、次の画面が出てきます。

私は白背景で使いたいので、「Dark」のチェックを外して使用しています。

そして右下の「Export」をクリックすると、

保存するファイル名を決まる画面が出てくるので

任意の名前を決めて、「Download」をクリック。

そして最後は保存先のディレクトリを指定して、保存完了です！！

最後に。

どうだったでしょうか。

このDraw.ioを使いこなせば、情報の整理やアウトプットの為の

資料作りに役立ちます！

VSCodeを使っている方はぜひインストールして使ってみてください！