About this project

# Draw.io VS Code Integration This unofficial extension integrates [Draw.io](https://app.diagrams.net/) (also known as [diagrams.net](https://www.diagrams.net/)) into Visual Studio Code. It is mentioned in the official diagrams.net blog. ## Features - **Edit Diagram Files**: Edit `.drawio`, `.dio`, `.drawio.svg`, or `.drawio.png` files using the Draw.io editor interface. - To create a new diagram, simply create an empty file with one of these extensions and open it. - `.drawio.svg` files are valid SVGs that can be embedded directly in GitHub READMEs without exporting. - `.drawio.png` files are valid PNG images. While supported, SVG is recommended for better quality. - Use the `Draw.io: Convert To...` command to switch between formats. - **Offline Mode**: Uses an offline version of Draw.io by default, ensuring privacy and no external dependencies during editing. - **Themes**: Multiple Draw.io themes are available, including "atlas", "Kennedy", "min", and "dark". - **Collaboration**: Full support for [VS Code Liveshare](https://visualstudio.microsoft.com/de/services/live-share/). Collaboratively edit or present diagrams remotely, seeing each participant's cursor and selection. This makes it suitable for remote code interviews, brainstorming, and reviews. Note: Simultaneous modifications may cause conflicts as Liveshare synchronizes text documents. - **Code Link Feature**: Enable this feature in the status bar. Double-clicking a node labeled with `#` (e.g., `#MyClass`) performs a workspace search for the corresponding symbol and jumps to its source code. Requires at least one file from the project containing the symbol to be open. - **Inline Diagrams in Markdown (Experimental)**: In VS Code Insiders, fenced code blocks tagged `drawio` render as live, resizable editors within the Markdown preview. Edits are written back to the source block. Attributes like `locked` and `height=N` are supported. - **Side-by-Side Editing**: Open the same `.drawio` file in both the visual Draw.io editor and as raw XML. They remain synchronized, allowing you to use VS Code's find/replace or other text features to speed up diagram creation. ## Configuration ### Associate `.svg` Files By default, the extension handles only `*.drawio.svg` files. To associate all `.svg` files with the Draw.io editor, add the following to your `settings.json`: ```json "workbench.editorAssociations": { "*.svg": "hediet.vscode-drawio-text" } ``` *Note: Only SVGs created with Draw.io or this extension should be edited this way.* ## Contributors - Henning Dieterichs ([hediet](https://github.com/hediet)) - Main Contributor / Author - Vincent Rouillé ([Speedy37](https://github.com/Speedy37)) ## See Also - [Draw.io](https://app.diagrams.net/): The core engine powering this extension. - [vscode-drawio](https://github.com/eightHundreds/vscode-drawio): A similar extension by eightHundreds.