VS Code Drawio - 小ネタその2
私が良く使用している[ VS Code ] の 拡張機能[ drawio ]の小ネタをご紹介いたします
前回(小ネタ1)の記事については、以下を参照ください。
※ 前回から見ていただければ理解も深まります。
今回は、以下をご紹介いたします
1.Drawioって何?
2.Drawioのメリット/デメリット
3.Drawioの基本操作 - サイドバー「図形」の表示 / 非表示
4.Drawioの基本操作 - 図形の挿入・変更
5.Drawioの基本操作 - サイドバー「フォーマット」の表示 / 非表示
6.Drawioの基本操作 - 線の引き方
1.Drawioって何?
そもそもDrawioがどういうものなのか?
理解していない方もいるかもしれませんので、改めてご説明いたします。
Draw.ioは、
と理解してもらえればOKです。
VSCodeの拡張機能「Draw.io」を使用すると、VSCodeのエディタ内で直接図を作成・編集できるようになります。
2.Drawioのメリット/デメリット
もちろんDrawioにもメリット / デメリットが存在しております。
機能自体はシンプルで使いやすいですが、以下の点で注意が必要です。
ただし、私個人としては、汎用性が高く、図も作りやすいため、非常に重宝しています。
3.Drawioの基本操作 - サイドバー「図形」の表示 / 非表示
新規ファイルを作成します。
本記事では「test.drawio」というファイル名で作成しました。
作成したファイルを選択すると以下のような画面が表示されます。
場合によっては、サイドバー「図形」が表示されない方がいるかもしれませんので、サイドバー「図形」の表示についてもご説明いたします。
手順1.ツールバーから以下のアイコンを選択
手順2.表示されたドロップダウンリストから「図形」を選択
以上で、サイドバー「図形」が表示されます。
※ 非表示にしたい場合は、同様の手順を実施してください。
4.Drawioの基本操作 - 図形の挿入・変更
では、実際に図形を挿入してみましょう。
※ 本記事では、「一般」ー「四角形」で実施いたします。
4-1.図形の挿入
と言っても図形の挿入方法は、至ってシンプルです。
下記の画像のように
です。
4-2.図形の変更(移動)
移動したい図形「ドラッグアンドドロップ」することで図形を移動することができます。
※ 図形にアイコンを近づけると「上下左右」矢印のアイコンが表示されたら移動可
4-3.図形の変更(サイズ)
移動したい図形「ドラッグアンドドロップ」することで図形サイズを変更することができます
※ 図形にアイコンを近づけると「左右」矢印のアイコンが表示されたらサイズ変更可
5.Drawioの基本操作 - サイドバー「フォーマット」の表示 / 非表示
上記の図形、位置やサイズなどを数値で細かく変更したい方はサイドバー「フォーマット」から変更することを可能です。
※ 位置やサイズ以外にも線の種類、背景色、文字色などもこちらから変更可能です。
サイドバー「フォーマット」の表示についてもご説明いたします。
手順1.ツールバーから以下のアイコンを選択
※ 非表示にしたい場合は、同様の手順を実施してください。
6.Drawioの基本操作 - 線の引き方
図形を挿入したら次は、線を引いてみましょう
線の引き方は、主に2つ方法が存在します。
6-1.図形の接続ポイントから直接
下記の図のように、マウスを図形の枠辺りに近づけると「×」が枠線上に表示されます。
この「×」は図形の線の始点と終点を決める接続ポイントです。
この接続ポイントから「ドラッグアンドドロップ」することで直接線を引くことができます。
6-2.図形から線(もしくは矢印線)を選択し挿入、線を図形に接続
手順1.上記の「4-1.図形の挿入」の手順から「線」もしくは「矢印線」を挿入
手順2.挿入した線を「ドラッグアンドドロップ」で図形の接続ポイントに接続
まとめ
本記事では、VS Code の Drawio 拡張機能を使用した基本的な操作として、図形の追加、図形の移動・変更、線の引き方について解説しました。
これらの基礎的な操作をマスターすることで、Drawio を使った簡単な図表作成が可能になり、情報の視覚化がスムーズに行えるようになります。
図形を自由に追加してレイアウトを整えたり、線を引いて図形同士をつなげたりすることで、作業効率を向上させることができます。
今後も引き続きこれらの基本操作を活用し、様々な図の作成に挑戦してみてください。
Discussion