Scribd
Upload
67 views

Draw - Io Basic Tutorial

Draw. Io

Uploaded by

Alhassan Ali
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
67 views

Draw - Io Basic Tutorial

Draw. Io

Uploaded by

Alhassan Ali
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 19

Introduction to Draw.

io
SE(IT632)
Outline
Introduction
Project Location
Basic Commands
Basic Diagrams
Templates
Layers
Connectors
Example to create a Diagram
Introduction
Draw.io is a fun and easy to get into a tool for drawing diagrams.
Aesthetically pleasing intuitiveness abstracts a lot of powerful
functionalities via css that a user will gradually fall into.
During other mainstream solutions such as Microsoft Visio or yEd merit
consideration on their own, draw.io stands shoulder-to-shoulder with them
with singular merits and a lovable feel.
It allows for adding custom image libraries and can also import
diagrams from other soft such as Visio and Gliffy.
Project Location
Getting started is as simple as accessing https://www.draw.io/.
Immediately, a user can choose where to save the local diagram -
integrating with Google Drive, Dropbox, OneDrive, or locally. Remember
that the integration into confluence allows for a direct use case or
importing from a file.
Basic commands

The initial screen is easy to navigate and boasts the expected


functionalities: a Right-Click drag will pan the screen and hold down
CTRL or SPACE.
Zoom in with a pressed CTRL + mouse scroll, and clone elements like
arrow connectors by pressing CTRL and dragging. A simple cheat sheet
with the keyboard shortcuts can always be consulted in Help->Keyboard
shortcuts.
Basic commands
Basic Diagram

Getting familiar with the initial screen, there are a couple of things that
stand out to take notice of:
Basic Diagram

To note a convenient "search" shape field and a Page indicator at the


bottom.
With very well-populated and up-to-date images, the available libraries
shown on the left can be changed by going into "More Shapes" and
selecting the desired libraries.
Templates

A useful selection of templates is available under the "File->New ", from


Venn diagrams to UML diagrams.
Layers

Layers are an incredibly useful way of manipulating information around


the diagrams. In this manner, a single diagram can contain important
fields of information that relate to each other and not become overly
crowded, preserving its readability.
Connectors

Connecting from the points of a shape is an expected continuous link.


One can even add connection points via css editing or by pressing ALT
when dragging the arrow connector.
Example to create a Diagram
Decide where to save your diagram.
Example to create a Diagram
Click Create New Diagram.
Example to create a Diagram
Double-click Blank Diagram
Example to create a Diagram
Rename your diagram. (Recommendation: Use underscore (= low line) characters as
replacements for spaces in file names.)
Example to create a Diagram
Drag and drop elements from the left bar to your diagram. They are already
automatically selected, and you can directly type some centered text.
Example to create a Diagram
Control-drag clones objects just like in LabVIEW
External images can be copy-pasted or drag-and-dropped onto the diagram.
Example to create a Diagram
Select File -> Save As ... Save your diagram in the documentation folder of your Git/SVN
repo.
Also export the diagram as a png image to the same location to put it in the wiki
documentation.
THANK YOU

You might also like