My friends who have read my previous articles may find that , Most of my articles have a lot of pictures . My article style is a combination of graphics and text , Easier for everyone to understand .

Recently, many friends have sent private letters asking me ： What tools are used to draw the pictures in the article . They think my drawing style is very small and fresh , It's going to make people see it .

Let's start with a few pictures to show you the effect ：

Tell the truth , Too many people ask me , I really can't reply one by one . Many people ask me at the same time , It just shows the excellence of this tool .

Today I'm writing an article about drawing tools , Give a reference to friends in need .

1. With what ？

For the tool of drawing flow chart , What we used more before may be ：visio and process on 了 .

visio It is a drawing software of Microsoft , It needs to be installed on the computer , Genuine software is paid , But you can also find many cracked versions on the Internet . It is the earliest flow chart drawing tool I have ever used , Use... In the back mac After computer office , I haven't used it , I thought it was a little inconvenient to work across computers .

process on Is a free online drawing tool , Very powerful . In addition to the conventional flow charts , Support for mind mapping is also very friendly . But one drawback is that you can only save the latest for free 9 Pictures , Want to keep more pictures , You need to pay to upgrade .

The first two drawing tools , After all, it's still a charge , For us who like white whoring , It's a little unacceptable . that , Is there a free 、 On-line 、 Powerful tools for drawing flow charts ？

answer ： Yes , have access to ：diagrams.

you 're right , The pictures in my article are all in diagrams It's drawn , It can also be called ：draw.io, It has become my preferred tool for drawing .

The official website address of this drawing tool is ：https://app.diagrams.net/, Its predecessor is ：https://draw.io/. these two items. url All have access to .

At the same time, it also provides offline drawing software , You can download it yourself diagrams Installation software , But one disadvantage is that it charges .

therefore , What I use most is the online version .

2. How to enter the drawing interface ？

We already know from above , All my articles use diagrams Draw a flow chart .

But how to get into diagrams The drawing interface ？

Type in the browser diagrams Official website , I usually like to input ：https://draw.io/, Because it's easier to remember .

The first visit was a little slow , Because it needs to initialize something .

Next , A window will pop up , Let's choose the drawing , Where do I need to save .

It mainly supports four ：

1. OneDrive： That is, the cloud
2. Device： I.e. equipment
3. Github
4. Gitlab

At present, for the sake of convenience , The most used one is Device, It can save the drawing to the local computer , You can also import existing drawings from your local computer .

In fact, if you can , Save the diagram to Github, It's also a good choice .

Next , A window will pop up , Let you choose to be Create New Diagram（ Create a new flowchart ）, Or choose Open Existing Diagram（ Open the existing flowchart ）.

The first time we came in , Of course, you choose to create a new flowchart .

then , Enter the main interface of drawing flow chart ：

3 Components of the drawing interface

diagrams The working interface of is mainly composed of the following parts ：

Besides , By the way , If you want to change the name of the flowchart , You can double-click the... In the upper left corner ：Untitled Diagram.drawio This a few word , The following window will pop up ：

In this window, you can modify the name and file type of the flowchart , The default is .drawio Format .

Let's summarize with a picture ,diagrams The main components of the working interface ：

3.1 menu bar

• File menu ： Contains a series of file operations , Include ： newly build 、 Open file 、 Open the latest file 、 Save the file 、 Save as file 、 Share files 、 rename 、 Copy files 、 Import 、 export 、 Print 、 Shut down, etc .
• Edit menu ： Contains a series of workspace operations , Include ： Back off 、 withdraw 、 shear 、 Copy 、 Paste 、 Delete 、 lookup 、 Replace 、 edit 、 Edit properties 、 choice 、 Select all, etc .
• View menu ： Contains a series of view operations , Include ： Restore the default layout 、 Outline view 、 Layers 、 label 、 grid 、 Scroll bar 、 Full screen, etc .
• Arrange menu ： Contains a series of graphic arrangement operations , contain ： in front 、 rearwards 、 Insert graphic 、 Alignment, etc .
• Extras menu ： Contains a series of additional operations , contain ： The theme 、 an 、 shrinkage 、 plug-in unit 、 Edit drawing area 、 Configuration etc. .
• Help menu ： It mainly includes a series of global operations , contain ： Search for 、 Shortcut key 、 About etc .

3.2 The toolbar

The toolbar contains some common functions , such as ： Picture size 、 Zoom in 、 narrow 、 return 、 revoke 、 Delete 、 before 、 After 、 Background color 、 The font color 、 Connect 、 shadow 、 Add table 、 Add graphics 、 Full screen 、 an 、 Contraction, etc .

These functions are really very practical .

3.3 Left graphic area

This area can be selected when we draw , Required graphics , This is the default 7 Class graphics .

If the requirements are not met , You can click on the More Shapes Button , Choose more types .

In the figure above, I added IOS Class graph .

I personally like to use General Class graph ：

There are commonly used graphics , It's enough to draw a general flow chart . Of course, you can also according to your personal preference , Choose more types to draw .

3.4 Drawing area

The drawing area is the most important place , Your flowchart is completed in this area .

You can select the graphics in the graphics area on the left , Drag the mouse to the drawing area . You can also directly copy existing graphics in the drawing area .

You can also add grids ：

Right click the blank space , Some operation options will appear ：

Right click a specific figure , Some graphics related options will appear ：

3.5 Right style area

The style area on the right can be said to be diagrams Soul .

Selected graphics , In the drawing area, the default is ：

At a glance , It looks very monotonous . But if it's in the style area on the right , After I added some styles , The graphics immediately became different .

There are also many functions for text styles that can be set ：

3.6 Bottom

The bottom mainly shows the name of each page .

Click the three points on the left ：

Switchable 、 Insert 、 Delete and rename pages .

Click the plus sign on the right ：

You can add a new page right away .

Every time we draw a picture, we need to operate on a certain page . But if you need to draw a lot of pictures , You can use pages to categorize , Convenient for future maintenance . Not very recommended , There are too many pictures on one page , Otherwise, the drawing will be very stuck .

summary

This paper mainly introduces diagrams drawing tools , It is a free online drawing tool , It's also called draw.io. It's very powerful , Include ： menu bar 、 The toolbar 、 Left graphic area 、 Drawing area 、 Right style area 、 Bottom, etc .

It also introduces how to enter the drawing area .

Of course, this article is just a brick to attract jade , I'd like to introduce it to you diagrams A small part of the function of . The strength of it , We need to explore more by ourselves .

Let's use a picture to show you , How I use diagrams Drawing ：

Okay , Today's content is shared here , See you next time .

If you think this tool is good , Or read my share and get some harvest , Please give me a compliment .

author ： Su San said technology | source ：https://mp.weixin.qq.com/s/NELzzbKRUBqAq01TBeekvQ