Draw.io User Guide

Posted on Edited on Word count in article: 1.7k Reading time ≈ 3 mins.
This article is the author's introduction to the Draw.io user guide, including the advantages, implementation details, and related resources of the Draw.io user guide. These steps can help the author improve the efficiency of using Draw.io.

Technical reviews are required for functions that take more than three days to develop, so drawing skills are essential.

My company encourages the use of draw.io for drawing, and the more I use it, the more amazing I find this tool. So, regarding its usage, here’s a basic explanation for marking.

https://www.drawio.com/assets/img/blog/connector-flow-animation.svg

Platform

Draw.io is free and cross-platform.

  • Web

  • App

    It uses Electron, so it supports various OS.

Open Source?

  • Draw.io is an open-source project that can be commercialized and redeveloped. Draw.io uses the Apache2 license, which is relatively permissive.

  • Internally, my company uses Draw.io integrated with Confluence, making creating drawings directly in Wiki convenient.

Project link, click here

Usage

For specific usage, it is recommended to watch the official video tutorials. Here are some tips:

  1. Pay attention to the use of hotkeys.

    Draw.io has a set of intuitive hotkeys, and it is recommended that you practice them deliberately. This can improve drawing efficiency.

    https://drawio-app.com/tutorials/shortcuts/

  2. Draw.io supports animated connectors, just like the image at the beginning of the article, which looks fantastic.

  3. It supports cross-line settings, so even intersecting lines can remain clear.

  4. Make good use of the search function on the left.

  5. When exporting, if you want to keep the connector animation, you can choose SVG and then convert it to GIF.

  6. Use templates when creating diagrams. I use them less, but templates are a great way to learn.

There are many more tips, but they won’t be covered here.

Learning Channels

How to learn tips and tricks? The following channels are recommended:

QuickView Support?

It is not supported. So, if you want to preview locally, there are the following two methods:

  1. Install plugins in IDEs like VSC/JB to open it.
  2. Open it with the local Draw.io app.
  3. Directly export as an image to open.

At the end

Draw.io is a free and excellent drawing software, and I recommend that everyone try it.