vscode-drawio

# Draw.io VS Code統合 この非公式拡張機能は、[Draw.io](https://app.diagrams.net/)（[diagrams.net](https://www.diagrams.net/)としても知られる）をVisual Studio Codeに統合します。公式のdiagrams.netブログで言及されています。 ## 機能 - **図ファイルの編集**: `.drawio`、`.dio`、`.drawio.svg`、または`.drawio.png`ファイルをDraw.ioエディタインターフェースで編集します。 - 新しい図を作成するには、これらの拡張子のいずれかで空のファイルを作成し、開くだけです。 - `.drawio.svg`ファイルは有効なSVGであり、エクスポートせずにGitHub READMEに直接埋め込むことができます。 - `.drawio.png`ファイルは有効なPNG画像です。サポートされていますが、品質の点でSVGが推奨されます。 - `Draw.io: Convert To...`コマンドを使用して、形式を切り替えます。 - **オフラインモード**: デフォルトでオフライン版のDraw.ioを使用し、編集時のプライバシーと外部依存関係のないことを保証します。 - **テーマ**: 「atlas」、「Kennedy」、「min」、「dark」など、複数のDraw.ioテーマが利用可能です。 - **コラボレーション**: [VS Code Liveshare](https://visualstudio.microsoft.com/de/services/live-share/)を完全サポート。リモートで図を共同編集またはプレゼンテーションし、各参加者のカーソルと選択範囲を確認できます。リモートでのコード面接、ブレインストーミング、レビューに適しています。注: Liveshareはテキストドキュメントを同期するため、同時変更は競合を引き起こす可能性があります。 - **コードリンク機能**: ステータスバーでこの機能を有効にします。`#`（例: `#MyClass`）でラベル付けされたノードをダブルクリックすると、対応するシンボルのワークスペース検索が実行され、そのソースコードにジャンプします。シンボルを含むプロジェクトのファイルが少なくとも1つ開いている必要があります。 - **Markdown内のインライン図（実験的）**: VS Code Insidersでは、`drawio`タグ付きのフェンスコードブロックが、Markdownプレビュー内でライブでリサイズ可能なエディタとしてレンダリングされます。編集内容はソースブロックに書き戻されます。`locked`や`height=N`などの属性がサポートされています。 - **並べて編集**: 同じ`.drawio`ファイルを、ビジュアルなDraw.ioエディタと生のXMLの両方で開きます。これらは同期されたままなので、VS Codeの検索/置換やその他のテキスト機能を使用して、図の作成を高速化できます。 ## 設定 ### `.svg`ファイルの関連付け デフォルトでは、拡張機能は`*.drawio.svg`ファイルのみを処理します。すべての`.svg`ファイルをDraw.ioエディタに関連付けるには、`settings.json`に以下を追加します。 ```json "workbench.editorAssociations": { "*.svg": "hediet.vscode-drawio-text" } ``` *注: Draw.ioまたはこの拡張機能で作成されたSVGのみをこの方法で編集する必要があります。* ## 貢献者 - Henning Dieterichs（[hediet](https://github.com/hediet)）- 主な貢献者/著者 - Vincent Rouillé（[Speedy37](https://github.com/Speedy37)） ## 関連項目 - [Draw.io](https://app.diagrams.net/): この拡張機能を支えるコアエンジン。 - [vscode-drawio](https://github.com/eightHundreds/vscode-drawio): eightHundredsによる類似の拡張機能。