↓Skip to main content
CodeBytes - The Curious Engineer
  1. Posts/

Embedding Draw.io Diagrams in VSCode

·942 words·5 mins
Tools VSCode Draw.io Markdown Speaking Tools
Chris Ayers
Author
Chris Ayers
I am a father, nerd, gamer, and speaker.
Table of Contents

If you’re like me, you love discovering new ways to boost your productivity and workflows. One of my favorite tools is Draw.io. I’ve used the desktop tool and the site, but I found a new integration that has significantly elevated my VSCode experience: the Draw.io Integration extension.

draw.io logo

Draw.io
#

In the world of diagramming software, Draw.io really shines. It enables users to convert complex concepts and detailed workflows into clear, easy-to-understand diagrams. Its user-friendly interface combined with a wide-ranging set of features makes it an ideal choice for anyone needing to visually represent information.

Draw.io provides a wide variety of diagramming options. Whether you’re creating a basic flowchart, process diagram, org chart, UML, ER diagram, or network diagram, Draw.io has got you covered. Its versatility is one of the many reasons why it’s a reliable tool for users with diverse needs.

Draw.io is also incredibly user-friendly. Regardless of whether you’re new to diagramming or a seasoned pro, Draw.io is accessible and straightforward to navigate. It’s designed to help you quickly and accurately capture your ideas without requiring extensive training or having to navigate a steep learning curve.

Another significant aspect of Draw.io is its collaborative capabilities. It’s a fantastic choice for team projects as it allows you to share your diagrams and collaborate with others, fostering a cooperative environment and ensuring everyone stays on the same page.

And the cherry on top? All these fantastic features come at no cost. Draw.io is free to use, making it a universally accessible tool for individuals and teams.

The Draw.io Integration Extension by Henning Dieterichs
#

Draw.io’s reputation for ease of use and an extensive set of features is well-deserved. The Draw.io Integration extension brings this powerful functionality right into your VSCode environment, allowing you to create and edit diagrams without needing to switch back and forth between your code editor and a separate diagramming tool. This integration is a productivity booster, maintaining the flow of your workflow.

A standout feature of the Draw.io Integration extension is its unique approach to saving diagrams. You can save diagrams as drawio.png or drawio.svg files. These formats not only store the diagram as an image but also preserve the diagram data within the image metadata. This innovative feature means you can share diagrams as images viewable in any standard image viewer. If the recipients also use Draw.io or the hediet.vscode-drawio extension, they can even edit the diagrams, thanks to the original diagram data preserved in the image file.

Tips
#

To truly maximize the use of Draw.io within VSCode, you should not only leverage the diagramming functionality but also manage and integrate your diagrams effectively into your projects. Here are a few tips and tricks:

  • Save diagrams as drawio.png or drawio.svg files: Regularly saving your diagrams in these formats ensures you don’t lose your work. These formats also allow you (or others) to edit the diagrams later, courtesy of the diagram data stored within the image metadata.

  • Integrate diagrams into your Git repository: After saving your diagrams as drawio.png or drawio.svg files, you can conveniently add them to your Git repository. This integration allows you to version control your diagrams alongside your code and share them with others through the repository.

  • Reference diagrams directly in your Markdown files: Once your diagrams are stored in your Git repository, they can be directly referenced in your Markdown files. This includes README files, blog posts, or MARP presentations. To do this, use the standard Markdown image syntax, ![Alt text](url), where url is the path to your drawio.png or drawio.svg file in the repository. This technique enables a seamless integration of visual content into your written material.

  • Explore Draw.io’s extensive shape and icon libraries: Draw.io provides a vast library of shapes and icons that can help make your diagrams visually appealing and intuitive. Different shapes can represent various elements in your diagrams, enhancing their readability.

  • Use color and style strategically: Utilizing different colors and styles can aid in distinguishing between different elements in your diagrams. Strategic use of these features can improve the clarity of your diagrams and make them easier to interpret.

By adopting these tips and tricks, you can effectively manage your diagrams and seamlessly integrate them into your development workflow. This not only enhances communication within your team but also promotes a better understanding of the concepts you’re working with.

Other Features
#

Besides the features I’ve covered so far, the Draw.io Integration extension also provides a host of other functionalities. These include:

  • Offline support: By default, the extension uses an offline version of Draw.io.
  • Themes: Multiple Draw.io themes are available for users to choose from.
  • Collaboration: The extension supports collaborative editing of diagrams using VS Code Liveshare. Users can edit and present diagrams remotely, with participants able to see each other’s cursors and selections.
  • Code link feature: The extension includes a code link feature where users can enable or disable linking nodes/edges with code spans. Double-clicking on a node with a label starting with “#” performs a workspace search for a matching symbol, allowing users to jump to its source code.

Conclusion
#

The Draw.io Integration extension supports the integration of Draw.io into VSCode, providing a powerful and efficient way to create and manipulate diagrams. This feature-rich extension enables developers and other professionals to visualize their ideas and workflows without leaving their coding environment. Furthermore, the unique drawio.png and drawio.svg file formats ensure that your diagrams remain visually accessible and editable, making sharing and collaboration easier. This integration is a shining example of the flexibility and extensibility of the VSCode platform, demonstrating its ability to cater to a wide range of user needs, well beyond just writing code.

Related

Marp - Create Presentations with Markdown

·1020 words·5 mins
Tools Tools VSCode Marp GitHub Markdown
This is part 1 of the MARP series. You can read the series of articles here: Marp - Create Presentations with Markdown Unleash Your Creativity with Marp Presentation Customization Introduction # Marp is a powerful and user-friendly presentation framework that simplifies the process of creating visually appealing slide decks using Markdown. In this blog post, we’ll explore what Marp is, why you might want to use it, how to get started. I’ll share my process and show you how you can automate hosting your presentations on GitHub Pages using GitHub Actions.

Presenting with VS Code - Screencast mode

·243 words·2 mins
Tools Code Speaking VSCode
I have been starting to speak and present a lot more, and was looking into great tools like Carnac and KeyPosé. But I just found out today about a feature I didn’t know existed inside Visual Studio Code, Screencast mode. This was introduced in January 2019. How did I miss it? To enable and use Screencast mode, Open the command palette, Ctrl + Shift + P. When first enabled, Screencast Mode is not what I wanted. It shows EVERY keypress. It also shows a little higher on the screen that I prefer. It also puts a little red circle everywhere I click the mouse, which is nice. Let’s configure it and see if we can clean up some of that. Open the command palette again (Ctrl + Shift + P) and go to the user settings.

Optimizing VSCode Startup Time with Profiles

·809 words·4 mins
Tools VSCode Tools
Visual Studio Code (VS Code) is a popular code editor that offers a wide range of extensions to enhance its functionality. However, having too many extensions installed can increase the startup time of the editor, which can be very annoying. In this blog post, we’ll explore how to optimize the startup time of VS Code by using profiles, a feature introduced in VS Code earlier this year.

Unleash Your Creativity with Marp Presentation Customization

·1338 words·7 mins
Tools VSCode Marp Markdown Mermaid
This is part 2 of the MARP series. You can read the series of articles here: Marp - Create Presentations with Markdown Unleash Your Creativity with Marp Presentation Customization Introduction # Marp is a powerful Markdown presentation framework that enables you to create stunning slides effortlessly. By using simple text-based formatting, you can easily customize your presentations to suit your unique needs and style. Although Marp provides built-in themes and configurations, the true potential of this framework can be realized by customizing your presentations to suit your unique needs and style. In this blog post, we will delve into some of the key customization options available in Marp and guide you through the process of creating a truly standout presentation.

Secure Terraform - Part 4 - checkov

·798 words·4 mins
DevOps Terraform Security Tools VSCode Checkov GitHub
This is part 4 of the Secure Terraform series. You can read the series of articles here: Secure Terraform - Part 1 - tfsec Secure Terraform - Part 2 - tfsec customization Secure Terraform - Part 3 - terrascan Secure Terraform - Part 4 - checkov Secure Terraform - Part 5 - terraform state Introduction # In this fourth installment of our Secure Terraform series, we’ll discuss Checkov, a powerful open-source static code analysis tool supported by Bridgecrew. Checkov supports Terraform, Kubernetes, Dockerfiles, AWS CloudFormation, and other Infrastructure as Code (IaC) frameworks. It focuses on security best practices, policy compliance, and industry standards. You can find Checkov’s documentation and samples at https://www.checkov.io/.