preface

Those of you who have read my past posts may have noticed that most of my posts have many illustrations. My essay style is a combination of text and text, easier for everyone to understand.

Recently, many friends sent me private messages asking me what tools were used to draw the pictures in the article. They think my drawing style is small and fresh, which can make people’s eyes shine.

Here are a few images to show you how it looks: To be honest, there are so many people asking me that I really can’t respond to them all. At the same time, many people ask me, which also shows the excellence of this tool.

Recently, I accidentally got a copy of the notes written by a big boss of BAT factory. All of a sudden, I got through to both my supervisor and my supervisor. I felt that the algorithm was not as difficult as I imagined.

BAT boss wrote the brush notes, let me get the offer soft

Today specially write an introduction drawing tool article, to have a friend in need of a reference.

1. What are the pictures drawn with?

For drawing flow chart tools, before we used more may be: Visio and Process on.

Visio is a Microsoft graphics program that needs to be installed on a computer. Legal versions are available for a fee, but there are many cracked versions available online. It is the earliest flowchart drawing tool I have ever used, but I have not used it since I started working on a MAC computer. Before, I found it a little inconvenient to work across computers.

Process on is a free and powerful online drawing tool. In addition to the normal flow charts, mind mapping support is also very friendly. One drawback is that you can only save the last 9 images for free, and you have to pay for upgrades to keep more images.

In front of the two drawing tools, in the final analysis or charge, for like white piao for us, a little unacceptable. So, is there a free, online, powerful tool for flowchart drawing?

A: Yes, you can use the diagrams.

Yes, the diagrams in my article are drawn using Diagrams, or draw. IO, which has become my preferred tool for drawing diagrams.

Diagrams.net /. Its predecessor is: HTTP…

And it also provides an offline version of diagrams, so you can download the Diagrams installation software for yourself, but the downside is that they charge for it.

So, the one I use the most is the online version.

2. How do I access the drawing page?

As you know, diagrams are used in my article.

But how do you get to the diagram interface?

So in my browser, I type in the diagrams website, and I like to type https://draw.io/ because it’s easy to remember.

The first access was a little slow because it had to initialize something.

Next, a window will pop up allowing us to select the drawing and where we want to save it.It supports four main types:

  1. OneDrive: cloud
  2. Device: indicates a Device
  3. Github
  4. Gitlab

At present, for the convenience of drawing, I use Device most, which can save the drawing to the local computer, or import the existing drawing from the local computer.

It’s also a good idea to save the image to Github if you can.

Next, a window will pop up, giving you the option to Create a New Diagram or Open Existing Diagram.The first time we came in, of course, we chose to create a new flowchart.

Then, enter the main interface of flowchart drawing:

3 Components of drawing interface

Diagrams The working interface is mainly composed of the following parts:Also, by the way, if you want to change the name of the flowchart, you can double click in the upper left corner:Untitled Diagram.drawioThe following window will pop up:In this window you can modify the name and file type of the flowchart. The default is.drawioFormat.

The following diagram summarizes the main components of the working interface:

3.1 the menu bar

  • FileMenu: contains a series of file operations, including: Create a file, open a file, open the latest file, save a file, save as a file, share a file, rename a file, copy a file, import, export, print, and close a file.
  • EditMenu: contains a series of workspace operations, including: Back, Withdraw, cut, copy, paste, delete, find, replace, edit, Edit properties, Select, select all, etc.
  • ViewMenu: Contains a series of view actions, including: restore default layout, outline view, Layers, labels, grids, scrollbars, full screen, etc.
  • ArrangeMenu: contains a series of graphic arrangement operations, including: in front, behind, insert graphics, align, etc.
  • ExtrasMenu: contains a series of additional operations, including: theme, expand, shrink, plug-in, edit drawing area, configuration, etc.
  • HelpMenu: contains a series of global operations, including: search, shortcut keys, about, etc.

3.2 the toolbar

The toolbar contains some common functions, such as: picture size, enlarge, shrink, back, Undo, delete, before, after, background color, font color, connect, Shadow, Add table, Add graphics, full screen, expand, shrink, etc.

These features are really useful.

3.3 Left graphic area

This area can select the graphics that we need to draw, and by default there are 7 types of graphics.If not, click the More Shapes button to select More types.

In the figure above I have addedIOSClass graph.

I personally like to use itGeneralClass graph:

There are commonly used graphics inside, drawing general flow chart is enough. Of course, you can also choose more types of drawing according to your personal preference.

3.4 drawing area

The drawing area is the most important area where your flow chart is done.

You can select the graphics in the left area and drag it to the drawing area with the mouse. You can also copy existing graphics directly in the drawing area.

You can also add a grid:

Right-click on the blank space and a few action options appear:

Right-click on a specific graph and a number of graphics-related options appear:

3.5 Style area on the right

The right-hand style area is kind of the soul of the Diagrams.

The default for the selected graphic in the drawing area is this:At first glance, it looks very monotonous. But if I go to the style area on the right, and I add some styles, it immediately changes.

There are also a number of options for setting text styles:

3.6 at the bottom of the

The bottom shows the name of each page.

Click the three dots on the left:You can switch, insert, delete, and rename pages.

Click the plus sign on the right:You can add pages immediately.

We need to operate on a page every time we draw. But if you need to draw a lot of pictures, you can use pages to categorize, aspects of future maintenance. Not really, too many pictures on one page, otherwise it will be very hard to draw.

conclusion

Diagrams This article describes diagrams tool, a free online mapping tool, also known as Draw.io. Its functions are very powerful, including: menu bar, toolbar, left graphics area, drawing area, right style area, bottom and so on.

It also introduces how to enter the drawing area.

Of course, this article just introduces you to a small part of the functions of Diagrams. Its powerful place, we need to begin to explore more.

So here’s a diagram to show you how I use diagrams:Well, that’s it for today, and I’ll see you next time.

Recently, I accidentally got a copy of the notes written by a big boss of BAT factory. All of a sudden, I got through to both my supervisor and my supervisor. I felt that the algorithm was not as difficult as I imagined.

BAT boss wrote the brush notes, let me get the offer soft

Please give me a thumbs up if you think this tool is good, or if you get something from my sharing.

I wish you a happy New Year in advance, happy New Year, bonanza, horse, good health, all the best.