VSCodeでDraw.ioを利用する方法
はじめに
この記事では、VSCodeでDraw.ioを利用する方法を紹介します。
VSCodeで管理することによって、ソースコード上での変更管理ができ、プルリクエストでのレビューも簡単に行えるようになります。
Draw.io とは
Draw.ioは、無料で使えるオンラインのダイアグラム作成ツールです。クラス図やUML図など、さまざまなダイアグラムを簡単に作成できるため、ソフトウェア開発やプロジェクト管理において広く利用されています。
必要な準備
まず、VSCodeにDraw.ioの拡張機能をインストールする必要があります。
VSCodeにDraw.io拡張機能をインストールする
-
VSCodeを開く:
- VSCodeを起動します。
-
拡張機能を検索する:
- 左サイドバーの「拡張機能」アイコンをクリックし、「Marketplace」検索バーに「Draw.io Integration」と入力します。
-
拡張機能をインストールする:
- 「Draw.io Integration」という拡張機能が表示されます。インストールボタンをクリックしてインストールします。
Draw.io拡張機能の設定
インストールが完了したら、Draw.ioの拡張機能を設定します。
-
新しいDraw.ioファイルを作成する:
- VSCodeのエクスプローラーで新しいファイルを作成します。ファイルの拡張子は「.drawio」または「.dio」とします。
-
Draw.ioエディターを開く:
- 作成したファイルをダブルクリックすると、Draw.ioのエディターがVSCode内で開きます。
ダイアグラムの作成
Draw.ioエディターを使って、実際にダイアグラムを作成してみましょう。
-
図形の追加:
- 左サイドバーの「図形」パレットから、ドラッグ＆ドロップでキャンバスに図形を追加します。
-
テキストの追加:
- 図形を選択し、ダブルクリックすることでテキストを追加できます。
-
図形の連結:
- 図形同士を矢印やラインで連結することで、関係性を表現します。
保存とエクスポート
作成したダイアグラムは、VSCode内で簡単に保存・エクスポートすることができます。
-
保存:
- 通常のファイルと同様に、Ctrl + S（またはCmd + S）で保存します。
-
エクスポート:
- Draw.ioエディターのメニューから「ファイル」→「エクスポート」→「PNG」や「PDF」、「SVG」などの形式を選択してエクスポートします。
GitHubでの変更管理
Draw.ioで作成したダイアグラムは、GitHubにSVG形式でアップロードすることで、変更履歴を管理できます。これにより、バージョン管理やコラボレーションが容易になります。
-
SVGファイルのコミット:
- 作成したSVGファイルをGitHubリポジトリにコミットします。
-
変更の追跡:
- GitHubの差分表示機能を使って、ダイアグラムの変更点を確認できます。
まとめ
VSCodeとDraw.ioの連携により、アプリケーション開発の設計やドキュメント作成が非常に効率的になります。
ぜひ、使ってみるといいと思います！