Microsoft Visio
Visio is Microsoft’s diagramming tool. It is very powerful, but it is paid, and it only runs on Windows, with no support for Mac or Linux. Although Microsoft has released Visio Online, its features are still fairly limited, and it is also paid.
The Open-Source Drawio Tool
Drawio is an open-source diagramming tool. It supports both online and desktop use, multiple formats, multiple platforms, multiple languages, many kinds of shapes, many export formats, many plugins, and many integration options. It also supports diagramming in Visual Studio Code via a plugin.
Vector Graphics and Bitmaps
Vector graphics are shapes described by mathematical formulas; they can be scaled up infinitely without losing fidelity. Bitmaps are images described by pixels and become distorted when enlarged.
Where to Start Drawing
Containers and Container Resize Scaling
Setting a shape’s Container property to true combines multiple shapes into a single shape, which you can then scale. Setting the Collapsed property to true collapses the shape so that only its title is shown. Setting the Resizable property to false prevents child shapes of the container from being resized.
Floating Links and Fixed Links
A floating link is one whose position moves as the shape moves; a fixed link is one whose position stays put when the shape moves. You can also add custom connection points.
Dragging Connection Line Labels
Labels on connection lines can be made draggable, so you can drag a connection line’s label to any position along the line, and you can customize the position of connection points.
Connection Line Styles and Reversal
You can set the style of a connection line, reverse a connection line, and adjust how much a connection line bends.
Text Position of Shapes and Connection Lines
By setting the text position, you can place text at the top-left corner of a shape or connection line; by setting the text position to center, you can place the text in the middle of the shape.
Adding Waypoints to Connection Lines
You can add waypoints to connection lines, add arrows to connection lines, and add labels to connection lines.
Any Target Can Be Given a Link
You can set a hyperlink on any object: on a connection line, or on a shape.
Replacing Shapes
You can drag a new shape onto an existing shape to replace it; after replacement, the shape’s properties and its connection lines are preserved.
Alignment and Distribution
You can set how shapes are aligned, and how they are distributed.
Drawing with Styles
You can draw with styles active, apply a style to shapes, or clear the default style.
Embedded Images and Online Images
Understand the differences between geometric shapes, shape library shapes, embedded images, and online images.
Modifying Styles of Embedded SVG Images
Use the Alibaba icon library iconfont to find icons, download the SVG image, and embed it into Drawio. You can modify the style of the SVG image, but you need to configure a rule, as in the code below.
<svg>
<style type="text/css">
.st1{fill:#ffffff;stroke:#ffffff;}
</style>
<path class="st1" d="points"/>
</svg>
editableCssRules=.*;
SVG Export Format Options
Set the zoom factor, border, background color, image copies, embedded images, and link open behavior.
Connection Line Flow Animation
Set the Flow Animation property to true to enable a flow animation on the connection line. This feature is built on CSS animation capabilities — simple to use and sufficient for most needs.
Custom Complex SVG Animations
With SVG you can create custom animations, setting the start time, duration, repeat count, animation type, animation attributes, animation values, animation path, animation direction, animation speed, animation delay, animation fill, and the state after the animation ends.
W3C animation standard for SVG
Define a simple path animation.
<circle r="3.5" fill="#00aa9e">
<animateMotion dur="5s" repeatCount="indefinite" path="points"/>
</circle>
Elegantly connect animations using XLINK
<path id="stage1-1" d="points"/>
<circle r="3" fill="red">
<animateMotion dur="5s" repeatCount="indefinite">
<mpath xlink:href="#stage1-1"/>
</animateMotion>
</circle>