「Draw.io Integration」は、VSCode内でフローチャートやUML図、ネットワーク図、ER図などの作図ができる拡張機能です。Webの図形作成サービスで有名なあの「Draw.io」がVSCodeで使えるプラグインとなって登場しました。VSCodeでもGUIベースで使うことができ、Web版と比べても遜色のない快適な操作が可能です。テンプレートも豊富に用意されており、パーツを組み合わせるだけであっという間にハイクオリティなシーケンス図が出来上がります。
インストール方法
- Visual Studio Code を起動します。
- メニューの「表示」 > 「拡張機能」を選択します。
- 検索窓に「Draw.io Integration」と入れて検索します。
- 「インストール」をクリックします。
Draw.io Integration の使い方・作図方法
ファイルを新規作成する際、拡張子を「.drawio」もしくは「.dio」とすることで利用が可能です。すぐに編集画面が立ち上がります。
以下、編集画面です。ほとんどWeb版と同様の編集画面になります。左側のメニューには図形やアイコンのパーツ（ステンシル）がカテゴリごとに用意されているので、ドラッグアンドドロップで利用が可能です。
配置した図形は、色やサイズ、位置、テキストを入力したりと調整ができます。図形同士を線で繋いだりすることも容易です。線の種類も直線やカギ線・曲線など色々用意されています。直感的に編集できるので操作に困ることはないでしょう。
作成した作図を保存する方法
ファイルを保存するには、「File」 > 「Export as」 > 「任意の形式」を選択します。ダイアログが立ち上がるので出力先を選択して保存できます。出力形式は、PNGやJPEG、SVG、PDF、XMLなどの様々なフォーマットに対応しています。
エディター内で簡単にフローチャートなど作図ができて便利ですね。特にXMLを編集の際にはリアルタイムでコード側と図側にも連動して反映されるので便利です。コードを書いたり図を描く機会が多い方には嬉しい拡張機能なのではないでしょうか。ぜひお試しあれ。
コメント