It seems that VSCode is now able to use Draw.io!

2,237

postscript

Depending on the version, it seems that export can not be done without changing the setting. If you can not export, you may be able to export it by setting it as a reference in this article. In the current version 0.4, this setting is required. Addressing issues where VSCode may not be able to export when using Draw.io Integration.

2020/10/18 Update

In the current version 0.7 it seems that exporting the drawio extension does not work. In that case, you can change to shift to offline mode, or you can edit it directly by having the file created with the drawio .png or drawio .svg extension, and you can use it as the last extension file instead of exporting.

At first

It seems that VSCode has made it easy to draw in Draw.io, We will leave the introduction method and usage as a memoir.

What is Draw.io?

Draw.io is a service that allows you to easily draw using a wealth of templates such as flowcharts, network diagrams, and ER diagrams just by accessing the draw.io. Figures created in Draw.io can be exported not only in image formats such as PNG and JPEG, but also in a variety of extensions such as SVG and XML. You can draw specifically like this.スクリーンショット 2020-05-14 20.03.52.png

It seems that it can now be used with VSCode!

Now that I know Draw.io, I will return to the main subject. It seems that this Draw.io is now available on VSCode! Github: https://github.com/hediet/vscode-drawio MarketPlace: Draw.io VS Code Integration

It seems that you can use it easily at hand and GUI based, and you can draw intuitively without getting lost in how to use it! I didn't have any trouble creating it on the browser, but it's pretty nice to be able to do it with VSCode!

Implementation method

Draw.io Press the install button in Integration, or Just search for "Draw.io Integration" in the VSCode extension search window and install it!

I think that it is better to re-launch VSCode once to reflect it again.

use

Just create a file with .drawio or .dio extension and you will be able to use it immediately.

(Added: 2021/02/19) If you generate a file with .drawio.png or drawio.svg, you can use it as it is as an image without the need for import or export, and it is possible to edit it, so we recommend this one.

As soon as you create and open a file, you will be on the drawing screen.drawiovscode.mov.gif

How to operate

I think it can be operated fairly intuitively, so I think the explanation is probably unnecessary, but You can draw quickly by simply dragging and dropping whatever you want from the shape on the left.

Also, when you mouse over the drawn figure, an arrow will appear, so you can write a relation by clicking and holding it and extending it to another Shape.

drawio2.mov.gif

Add an icon

You can use additional icons for various services! Under Shapes [+ More Shapes...] You can select additional icons by selecting them. You can also use AWS, GCP, Azure icons and Kubernetes icons!draw4.mov.gif

How to export

When exporting the diagram created above above, From the menu bar above [File]→[Export as]→ (any extension) It is possible to export easily by selecting in the order of .draw3.mov.gif

(Added: 2021/02/19) If you generate a file with .drawio.png or drawio.svg, you can use it as an image as it is without the need for export.

At last

It was easy to do from introduction to use! I think that engineers often draw diagrams, so I think it is a good idea to use it at that time!

reference

Github: https://github.com/hediet/vscode-drawio MarketPlace: Draw.io VS Code Integration

Share:
2,237
りくしる
Author by

りくしる

普段はキーボードをぽちぽちしています。バックエンドエンジニア👨‍💻

Updated on February 19, 2021