この非公式の拡張機能は、draw.io(diagrams.netとも呼ばれる)をVSコードに統合します。
公式Diagrams.netブログで言及されています。
.drawio 、 .dio 、 .drawio.svgまたは.drawio.png draw.ioエディターのファイル。*.drawio 、 *.drawio.svgまたは*.drawio.pngファイルを作成して開きます。.drawio.svgは、github readmeファイルに埋め込むことができる有効な.svgファイルです!エクスポートは必要ありません。.drawio.pngは有効な.pngファイルです!エクスポートは必要ありません。可能な限り.svg使用する必要があります - それらははるかに良く見えます!Draw.io: Convert To...使用します。
.drawio.svgおよび.drawio.pngファイルを直接編集および保存できます。これらのファイルは、埋め込まれたdraw.io図を含む完全に有効なSVG/PNGイメージです。そのようなファイルを編集するたびに、そのファイルのSVG/PNG部分が最新の状態に保たれます。
この拡張機能のロゴは、拡張機能自体で作成された.drawio.pngファイルです!

diffがあなたにとって重要な場合は、 .drawio .drawio.png好む必要があります。
この拡張機能のバージョン1.0では、VSコードLiveshareの広範なサポートが追加されました。各参加者のカーソルと選択を見ながら、draw.io図をリモートで編集または表示できるようになりました。これは、図の議論、レビュー、ブレーンストーミングの図に使用できます。 draw.ioのフリーハンド描画ツールと統合されたラテックスサポートにより、この拡張機能はリモートコードインタビューに使用できる高度なホワイトボードソリューションになります!

内部的には、この拡張機能はdraw.io図とテキストドキュメントを同期させます。これらのテキストドキュメントは、Liveshareによって共有されています。 Liveshareにはテキストを理解していないため、同時の変更で修正の競合が発生する可能性があります。
ステータスバーでは、コードリンク機能を有効または無効にできます。有効になり、ラベルが#から始まるノードをダブルクリックすると、ラベルの残りの部分に一致するシンボルのワークスペース検索が実行されます。
#MyClassとMyClass名前のラベルのあるノードがある場合、ノードをダブルクリックすると、そのソースにジャンプします。
シンボルを含むプロジェクトの少なくとも1つのファイルを開く必要があることに注意してください。それ以外の場合、シンボルを検索する際に、VSコードはこのプロジェクトを考慮しません。ただし、このファイル自体はシンボルを含める必要はありません。
私の最新のGithubスポンサーのおかげで、この機能はオープンソースであり、今では自由に利用できます。
ヒント:draw.ioエディターを右側(つまり、2番目のエディター列)に開き、シンボルに移動すると、図が表示されたままになります。

テーマ「アトラス」

テーマ「ケネディ」

テーマ「MIN」

テーマ「ダーク」

.svgファイルを関連付けますデフォルトでは、この拡張機能は*.drawio.svgファイルのみを処理します。 vs code settings.jsonファイルにこれを追加します。SVG .svgに関連付けたい場合は:
"workbench.editorAssociations" : {
"*.svg" : " hediet.vscode-drawio-text " ,
}ただし、任意のSVGファイルを編集することはできません - draw.ioまたはこの拡張機能で作成されたファイルのみです!
draw.ioエディターとxmlファイルとして同じ*.drawioファイルを開くことができます。それらは同期されているので、好きなようにそれらを切り替えることができます。これは、検索/交換を使用してテキストまたはVSコードのその他の機能を変更して、図作成/編集プロセスをスピードアップする場合に非常に実用的です。 View: Reopen Editor With... 。同じファイルの複数のエディターを開くことができます。ただし、draw.io図はメタデータに保存されているため、これはSVGファイルにとってあまり意味がありません。

この拡張機能が気に入ったら、私の他の拡張機能も好きかもしれません: