Diagrams.net Tutorial For Beginners - How To Use Draw.io

Summary

This tutorial introduces diagrams.net, a free and open-source online diagramming tool, formerly known as draw.io. It covers the basics of using the platform, from starting a new diagram to selecting storage options and utilizing shape libraries. The guide explains how to create, edit, and arrange shapes, as well as export and share diagrams in various formats, including a unique URL for viewing without editing capabilities. The video is aimed at beginners, offering a straightforward approach to mastering diagrams.net.

Takeaways

• 🌐 Diagrams.net, formerly known as draw.io, is a free and open-source online diagramming application.
• 📈 It supports the creation of various diagrams such as flowcharts, wireframes, UML diagrams, organizational charts, and network diagrams.
• 📁 The tool offers a drag-and-drop interface and comes with a wide range of pre-built shapes and templates.
• 💻 Available as an online web app, offline desktop application, and browser extension for multiple browsers.
• ☁️ Can be integrated with cloud storage platforms like Google Drive, OneDrive, and Dropbox for easy storage and sharing.
• 👍 No need to create an account or register to start using diagrams.net.
• 📂 Users can choose where to save their diagrams, either on their device or on a cloud storage service.
• 📝 When starting a new diagram, users can select a template or start with a blank canvas.
• 🔍 Shape libraries are organized and can be expanded or collapsed, with a search bar available for quick shape finding.
• 🔄 Multiple methods to add shapes to the canvas, including direct addition, connection arrows, and dragging from the library.
• 🎨 Shapes can be easily moved, resized, rotated, and deleted to fit the user's diagram design.
• 🔗 The ability to export diagrams in various formats and share them as URLs for viewing without editing.

Q & A

What is diagrams.net and what was it formerly known as?

Diagrams.net is a free and open source online diagramming application, formerly known as draw.io, which allows users to create various types of diagrams such as flowcharts, wireframes, UML diagrams, organizational charts, and network diagrams.

What are the key features of diagrams.net's interface?

Diagrams.net offers a simple drag and drop interface for creating and editing diagrams, and it comes with a wide range of pre-built shapes and templates to choose from.

In what formats is diagrams.net available?

Diagrams.net is available as an online web app, an offline desktop application, and a browser extension for Google Chrome, Firefox, Edge, and other browsers.

Can diagrams.net integrate with cloud storage platforms?

Yes, diagrams.net can be integrated with various cloud storage platforms such as Google Drive, OneDrive, and Dropbox, allowing for easy storage and sharing of diagrams.

Is it necessary to create an account to start using diagrams.net?

No, creating an account or going through a registration process is not required to start using diagrams.net. Users can begin creating diagrams right away.

How do you save a diagram file in diagrams.net?

You can save your diagram file on your device or choose another location like Google Drive, OneDrive, Dropbox, GitHub, or GitLab to store your diagram file.

What options are available when creating a new diagram in diagrams.net?

When creating a new diagram, you can either start with a specific template or a blank diagram. You also need to enter a file name for your flowchart.

How are shapes organized in diagrams.net?

Shapes in diagrams.net are organized into various groups called shape libraries. Users can expand or collapse shape libraries in the left panel and access more libraries by clicking on the 'plus more shapes' button.

What are the different ways to add shapes to the drawing canvas in diagrams.net?

Shapes can be added to the drawing canvas by clicking on a shape and adding it directly, double-clicking on an empty area on the canvas and selecting a shape, or dragging a shape from the library and placing it in a specific position.

How can you connect shapes to represent steps in a process in diagrams.net?

You can hover over a shape to see four direction arrows, click on one of these shapes to add it and connect it to the original shape, or drag a shape from the library and hover over an existing shape until the arrows appear, then move and drop the new shape in the selected direction.

What are some editing options available for shapes in diagrams.net?

Editing options include moving shapes to a new position, resizing them, rotating them around their center point, and deleting shapes. These can be done individually or by selecting multiple shapes to manipulate them as a group.

How can you export and share your diagram created in diagrams.net?

You can export your diagram in various formats such as PNG, JPEG, SVG, PDF, and more. Additionally, you can export it as a URL, which encodes the entire diagram in a long URL that can be shared with others for viewing but not editing.

Outlines

00:00

📊 Introduction to Diagrams.net and Its Features

This paragraph introduces the video and its purpose: guiding viewers through a basic tutorial on using Diagrams.net (formerly known as Draw.io). It highlights that Diagrams.net is a free, open-source diagramming tool that supports creating various types of diagrams like flowcharts, wireframes, UML diagrams, and organizational charts. The tool offers an easy drag-and-drop interface, numerous pre-built shapes and templates, and is accessible as an online app, desktop application, and browser extension. Additionally, it integrates with cloud storage platforms like Google Drive, OneDrive, and Dropbox.

05:00

🚀 Getting Started with Diagrams.net

This section details the steps to start using Diagrams.net. It emphasizes the simplicity of the process, including not needing to create an account. The user is guided to visit the Diagrams.net website, click the start button, and choose where to save the diagram file. Storage options include local devices or cloud platforms like Google Drive, OneDrive, and Dropbox. The user is prompted to grant permission if choosing cloud storage. Finally, the paragraph explains how to create a new diagram or open an existing one.

🎨 Setting Up and Navigating the Diagrams.net Interface

This paragraph describes how to start a new diagram in Diagrams.net. It explains the process of selecting a template or starting with a blank diagram, and how to save the file if storing it locally. The interface overview includes the blank canvas where the diagram is created, and the left panel where shape libraries are located. Users can expand or collapse these libraries to access various shapes and use the search bar for quick shape selection. The importance of creatively combining different shapes to effectively communicate ideas is also mentioned.

📐 Adding and Manipulating Shapes in Diagrams.net

This part focuses on the different methods for adding shapes to the canvas, such as dragging them from the shape library or using directional arrows to connect shapes. It also covers how to move, resize, and rotate shapes. The paragraph provides tips on how to group multiple shapes for simultaneous manipulation and explains how to delete shapes individually or as a group. These tools are crucial for creating complex diagrams efficiently and maintaining organization.

🔗 Exporting and Sharing Diagrams

This final paragraph discusses how to export and share diagrams created in Diagrams.net. Users can export diagrams in various formats like PNG, JPEG, SVG, and PDF. Additionally, it introduces the option to export the diagram as a URL, allowing others to view the diagram without editing it. The paragraph concludes with a call to action, encouraging viewers to like the video if they found it helpful and to leave comments if they have questions.

Keywords

💡diagrams.net

Diagrams.net, previously known as draw.io, is a free and open-source online diagramming application. It is the central focus of the video, which aims to guide users on how to utilize this tool for creating various types of diagrams. The script mentions its capabilities and ease of use, emphasizing that it does not require an account or registration to start creating diagrams.

💡diagramming application

A diagramming application is software used to create visual representations of information, such as flowcharts, wireframes, UML diagrams, and more. In the context of the video, diagrams.net is highlighted as an example of such an application, offering a wide range of pre-built shapes and templates for users to create their diagrams.

💡drag and drop interface

The drag and drop interface is a user interaction paradigm used in diagrams.net, allowing users to create and edit diagrams by simply dragging shapes and dropping them onto the canvas. The script praises this feature for its simplicity, making the process of diagram creation more accessible and intuitive.

💡shape libraries

Shape libraries in diagrams.net are collections of pre-built shapes categorized for specific purposes, such as flowcharts or UML. The script explains that these libraries can be expanded or collapsed, and users can select from a variety of shapes to build their diagrams, emphasizing the tool's versatility and customization options.

💡cloud storage integration

The video mentions that diagrams.net can integrate with cloud storage platforms like Google Drive, OneDrive, and Dropbox. This feature allows for easy storage and sharing of diagrams, which is beneficial for collaboration and accessibility across different devices and platforms.

💡flowchart

A flowchart is a type of diagram that represents a workflow or process through the use of shapes and arrows. The script uses the creation of a flowchart as an example of how to use diagrams.net, illustrating the step-by-step process of adding and connecting shapes to represent different stages of a process.

💡template

A template in diagrams.net is a pre-designed diagram that users can start with to create their own customized diagrams. The script explains that users have the option to begin with a specific template or a blank diagram, providing flexibility in how they start their diagramming project.

💡exporting

Exporting in the context of diagrams.net refers to the process of saving a diagram in various formats such as PNG, JPEG, SVG, PDF, etc. The script also mentions the ability to export a diagram as a URL, which allows others to view the diagram without editing capabilities, highlighting the tool's functionality for sharing.

💡rotation

Rotation is the process of turning a shape or object to a different orientation. In diagrams.net, users can rotate shapes to align them correctly within their diagrams. The script describes how to use the rotate grab handle or the rotation dialog box to achieve this, demonstrating the tool's editing capabilities.

💡deletion

Deletion in diagrams.net involves removing shapes from the canvas. The script explains how to select and delete individual or multiple shapes, which is an important aspect of editing and refining a diagram to ensure it effectively communicates the intended information.

💡multiple selection

Multiple selection allows users to select more than one shape at a time for collective manipulation, such as moving, resizing, or rotating. The script describes this feature as a time-saving tool for managing complex diagrams with many elements, contributing to the overall efficiency of the diagramming process.

Highlights

Introduction to diagrams.net, a free and open source online diagramming application.

diagrams.net enables users to create various types of diagrams including flowcharts, wireframes, UML diagrams, organizational charts, and network diagrams.

The tool offers a simple drag and drop interface for creating and editing diagrams.

diagrams.net comes with a wide range of pre-built shapes and templates.

Available as an online web app, offline desktop application, and browser extension.

Integration with cloud storage platforms like Google Drive, OneDrive, and Dropbox for easy storage and sharing.

No need to create an account or go through registration to start using diagrams.net.

How to get started with diagrams.net by visiting the website and clicking the start button.

Selecting storage location for saving diagram files, including device or cloud storage options.

Creating a new diagram or opening an existing one from the template manager.

Entering a file name for the flowchart and choosing between a specific template or a blank diagram.

Organizing shapes into various groups called shape libraries in diagrams.net.

Accessing more shape libraries by clicking the 'plus more shapes' button.

Dragging and dropping shapes from the libraries onto the canvas to create diagrams.

Using search bar to quickly find specific shapes needed for the diagram.

Adding shapes to the canvas to represent steps in a process using different methods.

Moving, resizing, and rotating shapes within the diagram for precise placement.

Deleting shapes by selecting them and pressing backspace or delete, or using the delete tool.

Selecting multiple shapes to manipulate them as a group for efficiency.

Exporting and sharing diagrams in various formats like PNG, JPEG, SVG, PDF, and more.

Exporting diagrams as a URL to share a view-only copy with others.

Conclusion and invitation for feedback, questions, and likes on the tutorial video.

Transcripts

hey guys welcome to speak about digital

in this video I'm going to guide you on

how you can easily use diagrams.net

formerly known as draw.io I'm going to

cover a very quick basic tutorial to get

you going and understand how

diagrams.net works so if you have no

idea about diagrams.net and how to get

started then this video is for you

diagrams.net formerly known as draw IO

is a free and open source online

diagramming application that enables

users to create different types of

diagrams including flowcharts wireframes

uml diagrams organizational charts and

network diagrams

the tool offers a simple drag and drop

interface for creating and editing

diagrams and comes with a wide range of

pre-built shapes and templates to choose

from

diagrams.net is available as an online

web app an offline desktop application

and a browser extension for Google

Chrome Firefox Edge and other browsers

Additionally the tool can be integrated

with various cloud storage platforms

such as Google Drive OneDrive and

Dropbox which allows for easy storage

and sharing of diagrams

just before we start please consider

giving me a thumbs up otherwise I will

go ahead and jump right into the

diagrams.net tutorial

getting started with diagrams.net is

easy first you need to visit the

diagrams.net website once you're on the

home page you'll see the start button

that you can click to begin using the

tool

one of the benefits of using

diagrams.net is that you don't need to

create an account or go through a

registration process this means that you

can start creating diagrams right away

without having to worry about setting up

an account or providing personal

information

once you click on the start button the

next step is to select where you want to

save your diagram file

you can choose to save it on your device

by selecting device alternatively you

can choose another location like Google

Drive OneDrive Dropbox GitHub or gitlab

to store your diagram file

however if you select a cloud storage

program you may be prompted to Grant

permission to diagrams.net to access

your files

after you have selected your preferred

storage location the next step is to

click on create new diagram if you

already have an existing diagram on your

computer or cloud storage and wish to

continue working on it you can click on

open existing diagram instead however

since we want to create a new diagram

from scratch we will select create new

diagram

next in the template manager you will

need to enter a file name for your

flowchart here you have two options you

can either start with a specific

template or a blank diagram since we

want to create a new blank diagram we

will select blank diagram and then click

on create

if you have selected device as your

storage option A pop-up window will

appear asking you to choose the folder

on your computer where you want to save

your diagram

simply select the desired folder and

click save

after selecting the folder a blank

canvas will open and you can start

designing your diagram

the shapes and diagrams.net are

organized into various groups called

shape libraries however not all shape

libraries are displayed at the same time

because there are too many of them

to expand or collapse a shape library in

the left panel simply click on its name

by default the left panel displays the

general shapes Library which contains

commonly used shapes such as rectangles

circles and arrows there are also many

other shape libraries available such as

flowchart arrows and uml which contain

specific shapes for their respective

purposes

you can access more shape libraries by

clicking on the plus more shapes button

at the bottom of the left panel this

will bring up a menu with a variety of

shape libraries to choose from

once you have selected a shape Library

you can drag and drop shapes onto the

drawing canvas to create your diagram

you can also use the search bar in the

left panel to quickly find the shape you

need

by using the different shape libraries

and combining them creatively you can

create diagrams that effectively

communicate your ideas

there are a number of different ways to

add shapes to the drawing canvas in

diagrams.net one way is to click on a

shape in the general shape library and

add it directly to the canvas another

way is to double click on an empty area

on the canvas and select a shape from

the options that appear

you can also drag a shape from the

general shape library and place it in a

specific position on the canvas

if you want to add more shapes to the

canvas to represent the next steps in

your process there are two methods you

can use the first method is to hover

over the shape you've placed on the

canvas to see four Direction arrows if

you hover your mouse over one of these

arrows additional shapes will appear in

that direction you can then click on one

of these shapes to add it and connect it

to the original shape

alternatively you can drag a shape from

the shape library and hover over an

existing shape until you see the four

Direction arrows once you see the arrows

you can move the shape over one of the

arrows and drop it this will add the new

shape to the drawing canvas and connect

it in the selected Direction these

methods can be used to add as many

shapes as you need to complete your

diagram

and from here you can change the line

selected

to move a shape simply click on it and

drag it to the desired position on the

drawing canvas this is a quick and easy

way to adjust the placement of a shape

within your diagram

if you need to resize the shape the

process is just as simple first select

the shape you want to resize then drag

any of the round grab handles that

appear around the edges of the shape

moving these handles inward will make

the shape smaller while moving them

outward will make it larger if you want

to keep the shape centered while

resizing hold down the Ctrl key while

dragging the handles

to rotate a shape in diagrams.net you

first need to select it once selected a

round Arrow called the rotate grab

handle will appear at the top right

corner of the shape click on the grab

handle and drag it to rotate the shape

around its center point you can also use

the rotation dialog box to specify the

rotation angle

to delete a shape select it by clicking

on it you can also select multiple

shapes by holding down the shift or

command key and clicking on them

once the shape is selected press the

backspace or delete key on your keyboard

or click on the delete tool in the

toolbar the shape will be removed from

the drawing canvas

if you need to select multiple shapes in

your diagram you can hold down the shift

or command key and click on the shapes

you want to select this will allow you

to manipulate them as a group rather

than individually once the shapes are

selected you can move them to a new

position on the drawing canvas resize

them to make them smaller or larger

rotate them around their Center Point or

delete them all together

these tools are particularly useful when

you are creating a complex diagram with

many shapes that need to be removed or

manipulated together by selecting

multiple shapes at once you can save

time and ensure that your diagram

remains organized and coherent

to export and share your flowchart

navigate to the top left corner and

click on file then select export as from

the drop down menu you can export your

diagram in PNG jpeg SVG PDF and more

another option for sharing your diagram

is to export it as a URL this option

encodes your entire diagram in a very

long URL which you can share with others

when someone clicks on this URL they

will be able to view a copy of your

diagram but they will not be able to

edit or modify the original this can be

a convenient way to share your diagram

with others who need to view it but not

necessarily edit it

and there you have it a beginner's guide

to using diagrams.net you can check the

links in the description that helps a

lot thank you

so again if you found this video helpful

please give me a thumbs up and if you

have any questions at all please comment

below I try to answer all the comments

the best I can thanks for watch