{"id":13433179,"url":"https://github.com/hediet/vscode-drawio","last_synced_at":"2025-05-12T13:17:32.959Z","repository":{"id":38362834,"uuid":"262369966","full_name":"hediet/vscode-drawio","owner":"hediet","description":"This unofficial extension integrates Draw.io (also known as diagrams.net) into VS Code.","archived":false,"fork":false,"pushed_at":"2025-02-26T10:49:57.000Z","size":11288,"stargazers_count":9260,"open_issues_count":143,"forks_count":436,"subscribers_count":63,"default_branch":"main","last_synced_at":"2025-05-12T13:17:12.974Z","etag":null,"topics":["diagram","drawio","hacktoberfest","vscode-extension"],"latest_commit_sha":null,"homepage":"https://marketplace.visualstudio.com/items?itemName=hediet.vscode-drawio","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hediet.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"hediet"}},"created_at":"2020-05-08T16:14:10.000Z","updated_at":"2025-05-12T11:15:44.000Z","dependencies_parsed_at":"2024-01-06T00:03:38.775Z","dependency_job_id":"fa447ba6-fea3-4e52-a996-9dcb724568f5","html_url":"https://github.com/hediet/vscode-drawio","commit_stats":{"total_commits":276,"total_committers":29,"mean_commits":9.517241379310345,"dds":0.5217391304347826,"last_synced_commit":"716eb7d3a2f659b87196ef314dfbc0fe76cf390d"},"previous_names":[],"tags_count":85,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hediet%2Fvscode-drawio","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hediet%2Fvscode-drawio/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hediet%2Fvscode-drawio/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hediet%2Fvscode-drawio/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hediet","download_url":"https://codeload.github.com/hediet/vscode-drawio/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253745196,"owners_count":21957319,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["diagram","drawio","hacktoberfest","vscode-extension"],"created_at":"2024-07-31T02:01:22.088Z","updated_at":"2025-05-12T13:17:32.927Z","avatar_url":"https://github.com/hediet.png","language":"TypeScript","funding_links":["https://github.com/sponsors/hediet"],"categories":["TypeScript","Architecture and Design","hacktoberfest","HarmonyOS","vscode-extension","编辑器","Awesome Tools","Uncategorized"],"sub_categories":["Windows Manager","资源传输下载","IDEs","Uncategorized"],"readme":"# Draw.io VS Code Integration\n\n[![](https://img.shields.io/twitter/follow/hediet_dev.svg?style=social)](https://twitter.com/intent/follow?screen_name=hediet_dev)\n\nThis unofficial extension integrates [Draw.io](https://app.diagrams.net/) (also known as [diagrams.net](https://www.diagrams.net/)) into VS Code.  \nMentioned in the official diagrams.net [blog](https://www.diagrams.net/blog/embed-diagrams-vscode).\n\n## Features\n\n-   Edit `.drawio`, `.dio`, `.drawio.svg` or `.drawio.png` files in the Draw.io editor.\n    -   To create a new diagram, simply create an empty `*.drawio`, `*.drawio.svg` or `*.drawio.png` file and open it.\n    -   `.drawio.svg` are valid `.svg` files that can be embedded in Github readme files! No export needed.\n    -   `.drawio.png` are valid `.png` files! No export needed. You should use `.svg` though whenever possible - they look much better!\n    -   To convert between different formats, use the `Draw.io: Convert To...` command.\n-   Uses an offline version of Draw.io by default.\n-   Multiple Draw.io themes are available.\n-   Use Liveshare to collaboratively edit a diagram with others.\n-   Nodes/edges can be linked with code spans.\n\n## Demo\n\n![](./docs/demo.gif)\n\n\n## Editing .drawio.svg/.drawio.png Files\n\nYou can directly edit and save `.drawio.svg` and `.drawio.png` files.\nThese files are perfectly valid svg/png-images that contain an embedded Draw.io diagram.\nWhenever you edit such a file, the svg/png part of that file is kept up to date.\n\nThe logo of this extension is such a `.drawio.png` file that has been created with the extension itself!\n\n![](./docs/drawio-png.gif)\n\nIf diffs are important for you, you should prefer `.drawio` and avoid `.drawio.png` diagrams.\n\n## Collaboratively Edit Or Present Diagrams\n\nWith version 1.0 of this extension, extensive support for [VS Code Liveshare](https://visualstudio.microsoft.com/de/services/live-share/) has been added. You can now edit or present your Draw.io diagrams remotely, while seeing each participant's cursor and selection! This can be used for discussing, reviewing or brainstorming diagrams.\nWith Draw.io's freehand drawing tool and integrated LaTeX support, this extension becomes an advanced whiteboard solution that can be used for remote code interviews!\n\n![](./docs/liveshare-demo.gif)\n\n_Internally, this extension synchronizes Draw.io diagrams with text documents.\nThese text documents are shared by Liveshare. As Liveshare has no understanding of the text, modification conflicts might occur on simultaneous modifications._\n\n## Code Link Feature\n\nIn the status bar, you can enable or disable the code link feature.\nIf it is enabled and you double click on a node whose label starts with `#`,\nyou will perform a workspace search for a symbol matching the rest of the label.\n\nIf you have a node labeled `#MyClass` and a class of name `MyClass`, you will jump to its source if you double click the node!\n\n**Please note that you have to open at least one file of the project that contains the symbol.**\nOtherwise, VS Code will not consider this project when searching for symbols.\nThis file itself does not have to contain the symbol though.\n\nThanks to my latest github sponsors, this feature is open source and freely available now.\n\n_TIP_: If you open the draw.io editor to the right side (i.e. the second editor column) and navigate to a symbol,\nthe diagram will stay visible.\n\n![](./docs/demo-code-link.gif)\n\n## Themes\n\n\u003cdetails\u003e\n    \u003csummary\u003e\u003cb\u003eAvailable Draw.io Themes\u003c/b\u003e\u003c/summary\u003e\n    \u003c!-- Please use HTML syntax here so that it works for Github and mkdocs --\u003e\n    \u003cul\u003e\n        \u003cli\u003e\u003cp\u003eTheme \"atlas\"\u003c/p\u003e\u003cimg src=\"docs/theme-atlas.png\" alt=\"atlas\" width=\"800\"\u003e\u003c/li\u003e\n        \u003cli\u003e\u003cp\u003eTheme \"Kennedy\"\u003c/p\u003e\u003cimg src=\"docs/theme-Kennedy.png\" alt=\"Kennedy\" width=\"800\"\u003e\u003c/li\u003e\n        \u003cli\u003e\u003cp\u003eTheme \"min\"\u003c/p\u003e\u003cimg src=\"docs/theme-min.png\" alt=\"min\" width=\"800\"\u003c/li\u003e\n        \u003cli\u003e\u003cp\u003eTheme \"dark\"\u003c/p\u003e\u003cimg src=\"docs/theme-dark.png\" alt=\"dark\" width=\"800\"\u003e\u003c/li\u003e\n    \u003c/ul\u003e\n\u003c/details\u003e\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![](./docs/drawio-xml.gif)\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\u0026target=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","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhediet%2Fvscode-drawio","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhediet%2Fvscode-drawio","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhediet%2Fvscode-drawio/lists"}