Draw.io diagrams into Markdown files using VSCode Extension

Introduction

This tutorial introduces the easy way of creating a draw.io diagram using VSCode and the unofficial Draw.io VSCode extension. This is an easy way to create images in your Markdown documentation.

Installation of Draw.io Vscode Extension

There is already a medium post on how to install Draw.io Extension into VSCode written by Henning Dieterichs, He is the developer of this extension. You can follow the steps given in this article to install the extension. I will concentrate on how to use the Draw.io images in MarkDown files

Create a Sample MarkDown ReadMe file

For this Tutorial, I have created a sample README.md file to show how the extension seamlessly makes you create images, flowchart or another kind of image to be used in the markdown file. Vscode allows you to preview the markdown file as you are editing it. You need to click the Preview icon as highlighted in the figure below

After clicking the Preview icon. the README.md preview is shown as a split tab.