🔰

VS Code Drawio - 小ネタその2

2025/01/26に公開

私が良く使用している[ VS Code ] の 拡張機能[ drawio ]の小ネタをご紹介いたします

前回(小ネタ1)の記事については、以下を参照ください。

※ 前回から見ていただければ理解も深まります。
https://zenn.dev/yatuba_m/articles/c5ee8eef4bf73a

今回は、以下をご紹介いたします

1.Drawioって何?
2.Drawioのメリット/デメリット
3.Drawioの基本操作 - サイドバー「図形」の表示 / 非表示
4.Drawioの基本操作 - 図形の挿入・変更
5.Drawioの基本操作 - サイドバー「フォーマット」の表示 / 非表示
6.Drawioの基本操作 - 線の引き方

1.Drawioって何?

そもそもDrawioがどういうものなのか?

理解していない方もいるかもしれませんので、改めてご説明いたします。

Draw.ioは、
\textcolor{blue}{ダイアグラムやフローチャートを簡単に作成できるツール}
\textcolor{blue}{つまり、図解作成ツール!}
と理解してもらえればOKです。

VSCodeの拡張機能「Draw.io」を使用すると、VSCodeのエディタ内で直接図を作成・編集できるようになります。


2.Drawioのメリット/デメリット

もちろんDrawioにもメリット / デメリットが存在しております。

機能自体はシンプルで使いやすいですが、以下の点で注意が必要です。

\textcolor{red}{1.操作に慣れていないと、使いにくいと感じる人もいる}

\textcolor{red}{2.複雑な図を作る場合は、Visioなど他のツールを使った方が良いこともある}

ただし、私個人としては、汎用性が高く、図も作りやすいため、非常に重宝しています。


3.Drawioの基本操作 - サイドバー「図形」の表示 / 非表示

新規ファイルを作成します。
本記事では「test.drawio」というファイル名で作成しました。

作成したファイルを選択すると以下のような画面が表示されます。

場合によっては、サイドバー「図形」が表示されない方がいるかもしれませんので、サイドバー「図形」の表示についてもご説明いたします。

手順1.ツールバーから以下のアイコンを選択

手順2.表示されたドロップダウンリストから「図形」を選択

以上で、サイドバー「図形」が表示されます。
 ※ 非表示にしたい場合は、同様の手順を実施してください。


4.Drawioの基本操作 - 図形の挿入・変更

では、実際に図形を挿入してみましょう。

※ 本記事では、「一般」ー「四角形」で実施いたします。

4-1.図形の挿入

と言っても図形の挿入方法は、至ってシンプルです。

下記の画像のように

\textcolor{blue}{挿入したい図形を選択するだけ}

です。

4-2.図形の変更(移動)

移動したい図形「ドラッグアンドドロップ」することで図形を移動することができます。
 ※ 図形にアイコンを近づけると「上下左右」矢印のアイコンが表示されたら移動可

4-3.図形の変更(サイズ)

移動したい図形「ドラッグアンドドロップ」することで図形サイズを変更することができます
 ※ 図形にアイコンを近づけると「左右」矢印のアイコンが表示されたらサイズ変更可


5.Drawioの基本操作 - サイドバー「フォーマット」の表示 / 非表示

上記の図形、位置やサイズなどを数値で細かく変更したい方はサイドバー「フォーマット」から変更することを可能です。
 ※ 位置やサイズ以外にも線の種類、背景色、文字色などもこちらから変更可能です。

サイドバー「フォーマット」の表示についてもご説明いたします。

手順1.ツールバーから以下のアイコンを選択

※ 非表示にしたい場合は、同様の手順を実施してください。


6.Drawioの基本操作 - 線の引き方

図形を挿入したら次は、線を引いてみましょう

線の引き方は、主に2つ方法が存在します。

6-1.図形の接続ポイントから直接

下記の図のように、マウスを図形の枠辺りに近づけると「×」が枠線上に表示されます。
この「×」は図形の線の始点と終点を決める接続ポイントです。

この接続ポイントから「ドラッグアンドドロップ」することで直接線を引くことができます。

6-2.図形から線(もしくは矢印線)を選択し挿入、線を図形に接続

手順1.上記の「4-1.図形の挿入」の手順から「線」もしくは「矢印線」を挿入

手順2.挿入した線を「ドラッグアンドドロップ」で図形の接続ポイントに接続


まとめ

本記事では、VS Code の Drawio 拡張機能を使用した基本的な操作として、図形の追加、図形の移動・変更、線の引き方について解説しました。
これらの基礎的な操作をマスターすることで、Drawio を使った簡単な図表作成が可能になり、情報の視覚化がスムーズに行えるようになります。

図形を自由に追加してレイアウトを整えたり、線を引いて図形同士をつなげたりすることで、作業効率を向上させることができます。
今後も引き続きこれらの基本操作を活用し、様々な図の作成に挑戦してみてください。


Discussion