hediet/vscode-drawio

これは何？

主な機能

• 01.drawio、.dio、.drawio.svg、.drawio.pngファイルをDraw.ioエディターで編集できます。
• 02デフォルトでDraw.ioのオフライン版が同梱されています。
• 03保存時に、埋め込まれたSVG画像やPNG画像を最新の状態に保ちます。
• 04図をプレーンなXMLとして保存するため、gitで差分を確認しやすくなります。
• 05共同編集やプレゼンに使えるLive Shareに対応しています。
• 06図のノードをコードシンボルにリンクし、ソースへ移動できます。

ユースケース

• 説明対象のコードと同じリポジトリでアーキテクチャ図を管理する。
• GitHubのREADMEにSVG形式の図を埋め込み、そのまま表示する。
• 読みやすいXMLの差分を使って、プルリクエストで図の変更をレビューする。
• Live Shareを使い、チームメイトと共同で図を描く。

クイックスタート

1. 1

   VS Code Marketplaceから拡張機能をインストールします

2. 2

   末尾が .drawio、.drawio.svg、または .drawio.png の空ファイルを作成して開きます

使う前に知っておきたいこと

• !diagrams.netチームが開発したものではない非公式の拡張機能です。
• !コピーレフトライセンスであるGPL-3.0の下でライセンスされています。
• !Markdownのインライン編集にはVS Code Insidersが必要で、実験的な機能です。

トピック

よくある質問

vscode-drawio とは？

Draw.io（diagrams.net）の図をVS Code内で作成・編集できる非公式拡張機能。 この拡張機能では、.drawio、.dio、.drawio.svg、.drawio.png ファイルをVS Code内のDraw.ioエディターで開けます。デフォルトでDraw.ioのオフライン版が同梱されているため、ネットワークに接続していなくても図を編集できます。これらの拡張子が付いた空のファイルを開いて新しい図を作成でき、convertコマンドで形式を切り替えられます。

vscode-drawio は無料で使えますか？ライセンスは？

vscode-drawio は GPL-3.0 ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

vscode-drawio は今もメンテナンスされていますか？

活発にメンテナンス中。vscode-drawio の最終コミットは 2026年11月6日 です。

vscode-drawio は何に使えますか？

説明対象のコードと同じリポジトリでアーキテクチャ図を管理する。 GitHubのREADMEにSVG形式の図を埋め込み、そのまま表示する。 読みやすいXMLの差分を使って、プルリクエストで図の変更をレビューする。 Live Shareを使い、チームメイトと共同で図を描く。

vscode-drawio のインストール方法は？

VS Code Marketplaceから拡張機能をインストールします 末尾が .drawio、.drawio.svg、または .drawio.png の空ファイルを作成して開きます

vscode-drawio はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/hediet/vscode-drawio