\n
\n\n## Associate `.svg` Files With The Draw.io Editor\n\nBy default, this extension only handles `*.drawio.svg` files.\nAdd this to your VS Code `settings.json` file if you want to associate it with `.svg` files:\n\n```json\n\"workbench.editorAssociations\": {\n \"*.svg\": \"hediet.vscode-drawio-text\",\n}\n```\n\nYou won't be able to edit arbitrary SVG files though - only those that have been created with Draw.io or this extension!\n\n## Editing the Diagram and its XML Side by Side\n\nYou can open the same `*.drawio` file with the Draw.io editor and as xml file.\nThey are synchronized, so you can switch between them as you like it.\nThis is super practical if you want to use find/replace to rename text or other features of VS Code to speed up your diagram creation/edit process.\nUse the `View: Reopen Editor With...` command to toggle between the text or the Draw.io editor. You can open multiple editors for the same file.\nThis does not make much sense for SVG files though, as the draw.io diagram is stored in its metadata.\n\n\n\n## Contributors\n\n- Henning Dieterichs, [hediet](https://github.com/hediet) on Github (Main Contributor / Author)\n- Vincent Rouillé, [Speedy37](https://github.com/Speedy37) on Github\n\n## See Also / Similar Extensions\n\n- [Draw.io](https://app.diagrams.net/) - This extension relies on the giant work of Draw.io. Their embedding feature enables this extension! This extension bundles a recent version of Draw.io.\n- [vscode-drawio](https://github.com/eightHundreds/vscode-drawio) by eightHundreds.\n\n## Other Cool Extensions\n\nIf you like this extension, you might like [my other extensions](https://marketplace.visualstudio.com/search?term=henning%20dieterichs&target=VSCode) too:\n\n- **[Debug Visualizer](https://marketplace.visualstudio.com/items?itemName=hediet.debug-visualizer)**: An extension for visualizing data structures while debugging.\n- **[Real-Time Debugging](https://marketplace.visualstudio.com/items?itemName=hediet.realtime-debugging)**: This extension visualizes how your code is being executed.\n"
},
{
"path": "docs/code-link.md",
"content": "# VS Code Draw.io Integration - Code Links (Since 0.7.2)\n\nThe Code Link feature lets you link Draw.io nodes and edges to source code symbols.\nJust name a node or edge `#MySymbol` where `MySymbol` is the name of the symbol you want to link to.\nWhen code link is enabled (see the status bar) and you double click on a node or edge whith such a label, you will jump to the symbol definition.\n\n\n\nDisable Code Link or select a node and press F2 if you want to change the label.\n\nThis feature works with any programming language that implements the VS Code workspace symbol search.\nIn TypeScript, symbols are functions, classes, consts, interfaces, ...\n\nCode Links also work for `*.drawio.png` and `*.drawio.svg` files which are plain `*.png` and `*.svg` files with embedded Draw.io metadata that can be put on Github.\nThe Code Link Feature does not work on Github though.\n\n## Link Document Symbols\n\n\n\nCode Link supports hierarchical document symbols. First, select the node, then navigate to the document and run the \"Link Symbol With Selected Node\" command. Select your symbol from the dropdown. This will link the node to a symbol as well as the current docment URI.\n\nHierarchy levels are delimited by the dot \"`.`\" and you can choose to edit the paths by pressing \"Ctrl+M\" within the Draw.io editor.\n\nYou can also run \"Link Workspace Symbol With Selected Node\" to link a symbol path without linking to the specific docment URI. This way, documents can be moved freely without breaking the code link. However, some symbol providers don't cooperate with exporting workspace symbols -- when this occurs, a warning will be shown.\n\n## Link Screenshots with Symbols\n\nSince you can directly paste images into Draw.io diagrams, you can use this feature to connect\nscreenshots of react components to their source:\n\n\n\n## Applications\n\nThis feature can be used in many ways:\n\n- for documentation\n- for quick code navigation (like visual bookmarks)\n- for diagram based code tours\n\n## Thank You\n\nThank you to Draw.io for being so open and enabling this kind of stuff, thank you to all the Contributors of this extension and thank you so much for my Sponsors on Github that really motivate me implementing features like this!\n"
},
{
"path": "docs/plugins.md",
"content": "# VS Code Draw.io Integration - plugins\n\nThe plugins feature lets you load Draw.io plugins, just as you can by opening\nthe online version of Draw.io with the `?p=svgdata` query parameter:\nAvailable Draw.io Themes
\n \n- \n
Theme \"atlas\"
![\"atlas\"](\"docs/theme-atlas.png\")
\n Theme \"Kennedy\"
![\"Kennedy\"](\"docs/theme-Kennedy.png\")
\n Theme \"min\"
![\"min\"](\"docs/theme-min.png\")
\n Theme \"dark\"
![\"dark\"](\"docs/theme-dark.png\")
\n