This drawing tool, yyds!

Recently, a reader sent me a private message and asked me what tool I used to draw the pictures of the tweets on my official account. It is very beautiful and I want to learn it. Today I will introduce you to this drawing tool - Draw.io

Overview

draw.io is a free web page drawing tool (there is also a desktop version), which supports flowcharts, UML diagrams, architecture diagrams, prototype diagrams, etc. It is simple and easy to use. The following pictures are all made with draw.io :

It looks good, there is wood~

Enter the drawing tool

I personally use the web version more often. https://app.diagrams.net/ , a window will pop up, allowing us to choose where to store the file.

Six storage methods are currently supported:

1. Google Drive
2. OneDrive
3. Device: local
4. Dropbox
5. Github
6. Gitlab

I usually choose to store to Github, and I need to create a new project on Github to store the files of draw.io

After selecting the storage method, you will enter the following page, and select Create New Diagram for the first time.

Then enter the main interface of draw.io

Main interface

The main interface is divided into several areas, menu bar, toolbar, graphics area, canvas, and drawing style setting area.

quick start

Next, we will show you how to use it!

The first is to switch languages. Click the globe in the upper right corner to switch languages.

There are eight options in the graphics area, where you can usually find the desired graphics.

The first is a scratch pad, which can store custom graphics. We can drag external graphics to this area, save them, and then use these custom graphics for drawing.

You can also click on more graphics below to unlock richer graphics.

Drag the graphics in the graphics area directly to the canvas, and then you can start creating.

In the style setting area on the right, you can modify the selected graphics, such as using my favorite sketch style, the effect is as follows:

If you think the background is too monotonous, you can add background stripes to the graphics~

The link between graphics and graphics is very convenient. Move the mouse over the graphics and a symbol for linking graphics will appear. Clicking this symbol will automatically link the graphics.

Graphic rotation is also very simple. After selecting a graphic, a small rotation icon will appear in the upper right corner. Press and hold this icon to drag to perform the rotation operation.

These are draw.io basic tutorial, of course draw.io there are many useful features, interested partners can research their own small ~

If you think this drawing tool is good, please give me a like.