Skip to main content

VS Code and drawio

Visual Studio Code, commonly referred to as VS Code, is a popular code editor developed by Microsoft. It is available for Windows, macOS, and Linux and is free and open-source software. VS Code provides a user-friendly interface and supports a wide range of programming languages, making it a versatile tool for developers of all levels. It includes features such as syntax highlighting, code completion, debugging, version control, and extensions, which can be downloaded from the Visual Studio Code Marketplace to customize and enhance the editor's functionality. Overall, VS Code is a powerful and popular code editor that has become a favorite among developers for its flexibility, ease of use, and rich feature set.

VS Code extension "Draw.io Integration"

The VS Code extension "Draw.io Integration" by hediet allows users to create diagrams and flowcharts directly within the code editor. With this extension, developers can create and edit diagrams using Draw.io's intuitive interface, which includes a wide range of shapes, arrows, and connectors. The extension seamlessly integrates with VS Code's interface, allowing for easy diagram creation and editing without leaving the editor. The Draw.io Integration extension supports a variety of file formats, including XML, PNG, and SVG, and enables easy export and import of diagrams. Overall, this extension is a great tool for developers who need to create and document complex systems or processes, and it can greatly improve workflow and productivity by allowing for diagram creation and editing without leaving the code editor.

You can find the extension here: https://marketplace.visualstudio.com/items?itemName=hediet.vscode-drawio

Editing .drawio.svg/ Files

You can directly edit and save .drawio.svg and .drawio.png files. These files are perfectly valid svg/png-images that contain an embedded Draw.io diagram. Whenever you edit such a file, the svg/png part of that file is kept up to date.