The offical blog of the diagrams.net project
We’ve recently implemented a number of features, most popularly requested via our drawio Github repository. To reach support at JGraph for diagrams.net and our draw.io apps, please read and follow the instructions on our support page.
The barrier to anyone diagramming and whiteboarding with diagrams.net is lower compared to many other SaaS applications. From reviews and customer feedback, some of the things they like the most include:
This past year has seen a number of new features and big updates to diagrams.net and the draw.io apps, now available on a variety of platforms.
Updates, bug fixes and new features are added to diagrams.net and the draw.io apps for various platforms regularly. It is likely that your browser will use a cached older version of the website by default. To use the newest build, you need to clear any features or diagram editor components in your browser that have been cached.
Ishikawa diagrams, also called fishbone, herringbone or cause and effect diagrams, are used to analyse and identify the root causes of defects or negative events. As most problems have multiple causes, Ishikawa diagrams are a useful prompt to look at the many different contributing factors.
Keyboard shortcuts in diagrams.net (and the draw.io apps developed by JGraph) enable you work with shapes and connectors in your diagrams both easier and faster. There are a number of ways you can select shapes and connectors with the keyboard, or when holding down a key and using the mouse.
Steps in business processes and project documentation are easier to understand when visualised. As one of the most common families of diagrams, drawing flowcharts in Confluence lets you present complex information neatly and securely in your team and company knowledge base.
Previously, you could edit your diagram files and use your GitHub repositories as a storage location as an OAuth app, which required access permission to all of your repositories. The new GitHub Apps offer more fine-grained repository access settings. With the upcoming draw.io App for GitHub, you can choose exactly which repositories you want store your diagram files in.
You can now create and store your diagrams directly in Notion pages using the draw.io for Notion extension for the Chrome, Opera and Edge web browsers. The draw.io for Notion extension uses the whiteboard-like simple editor theme, and resizes the embedded image displayed in your Notion page automatically to display your entire diagram.
Many people prefer a minimal interface for diagramming, as there are fewer distractions. While online whiteboard applications often have a limited set of available tools, diagrams.net lets you use its advanced features in a less cluttered diagram editor theme.
Lucidchart recently limited their free education plans, Lucidchart EDU, for students and teachers to only 3 editable diagrams. That means that all of the diagrams after your most recent three diagram files are set to read only, unless you switch to a premium subscription.
The shapes, connectors and text elements in your diagram are described in XML - their sizes, locations, groupings, shape styles, z-order on the drawing canvas, and how they are connected to each other. You can attach much more information than this to create richer diagrams and interactivity, including tags, tooltips, links, custom shape properties and more.
Gliffy recently removed their free tier offering in their online version. This means if your trial version has expired, you will no longer be able to edit up to 5 diagrams that you have created, unless you start a paid subscription.
For developers, github.dev allows you to edit files stored in GitHub repositories in a web-based code editor. It has many of the benefits of Visual Studio Code - search, syntax highlighting, and a source control view. After installing the unofficial draw.io extension for Visual Studio Code into the web-based editor, you can quickly navigate, view and edit diagram files stored in your GitHub repositories without ever leaving your browser.
You can now use tags on shapes and connectors which allows you to select, hide or display multiple elements in your diagram. With tags, you don’t need to group shapes into a fixed combined shape, or place them on one layer before you select, hide or display the tagged shapes.
You can embed SVG versions of your diagrams in a WordPress blog post or page. SVG images are quick to load when compared to other formats, and can include your diagram data if you want to allow viewers to download and view a copy of the diagram in the diagrams.net free editor.
One of the most requested features for diagrams.net and draw.io was the concept of using one or more pages as backgrounds for other pages. This could be a background graphic to provide a consistent branding across your diagrams. Another popular use case is more technical diagrams where each page displays a border with an information block in a specific format and dimensions.
This diagrams.net Sketch editor theme has an endless whiteboard-style canvas and is ideal to use as a collaborative online whiteboard with your remote team. The lack of page and grid lines, along with the simple toolbar, minimised panels and the default hand-drawn rough style for shape outlines, shading, connectors, and text labels feels like an informal physical whiteboard, much less intimidating than traditional diagramming apps.
Teams in different departments use many different methods to plan projects, but most of these plans are initially sketched on a whiteboard. Collaborate in real time and online with distributed team members, customers and stakeholders easily in the diagrams.net whiteboard-like editor theme throughout your project development process.
Related to Microsoft’s end of life date of Internet Explorer 11, we will end support for IE 11 on 21th April 2022.
There are very few differences between the Cloud and Data Center/Server versions of draw.io for Atlassian’s Confluence. If you know how to create diagrams in draw.io on one, you know how to use it on the other!
With remote working on the rise worldwide, online replacements for analog tools like the whiteboard are increasingly needed. With the draw.io app for Confluence, your teams have an easy-to-use, collaborative online whiteboard, directly in Confluence, that can be used for agile brainstorming, story mapping, mockups, project planning and tracking, flowcharting, and more.
JGraph is pleased to announce that draw.io is the only secure diagramming application to meet Atlassian’s new Cloud Fortified standard.
When you look at a diagrams.net or draw.io diagram in the lightbox viewer, and not in the app.diagrams.net editor, hover the mouse over the diagram to see the viewer toolbar. Click on a tool to select which layers to display, zoom in and out, and step through the pages in a multi-page diagram. You can also export your diagram as a PNG image and print the diagram directly from the diagrams.net lightbox viewer using these tools.
As a type of directed graph, dependency graphs visualise processes or situations where there are dependent components such as in decision making, scheduling, product development, IT or telecommunications infrastructure, supply and manufacturing chains, and more. They help you find the optimal order and identify critical paths or weak links that would constain your application, infrastructure or process.
In addition to sending shapes to the back or bringing them to the front, you can now step shapes backwards and forwards when the overlap each other.
The drawing canvas in diagrams.net has a number of features that help you align and space shapes and connectors in your diagram. By default, it also indicates how your diagram will appear when printed across one or more pages, dependent on page size and orientation.
diagrams.net and the draw.io branded Atlassian integrations are the leading solution for web based sketching and diagramming functionality. The article describes the draw.io integration for Confluence that we, JGraph, build, deliver and maintain alongside the online diagrams.net and desktop tools.
You can now search for template diagrams and preview templates in the template library at diagrams.net. The new subcategories make it easier to find a specific template diagram in categories with many diagrams, such as the cloud infrastructure templates.
You can now embed draw.io diagrams stored in Confluence Cloud in your Jira Cloud issues. This is a new feature for our integration with Confluence Cloud, delivered as part of our draw.io brand.
When you draw a freehand shape in diagrams.net, it is saved as an image with a transparent background on the drawing canvas by default. You can change the freehand-drawn shape’s style like you would many other shapes: line colour, fill colour, opacity and more. You can also resize, flip and rotate your freehand drawing.
Embed whiteboard-style diagrams in Confluence Cloud pages with the new draw.io Board macro. The Board macro is a new feature for our integration with Confluence Cloud, delivered as part of our draw.io brand.
Kanban boards show the breakdown of large projects into smaller tasks that you prioritise and track as they are completed. Collaborative projects benefit from a kanban board as it helps everyone visualise workflows, the state of the project, and the current workload.
Embed images of your diagrams in Microsoft PowerPoint slides with the free draw.io branded add-in. The add-ins can be used in all Microsoft 365 Office applications on both Windows and macOS, and in older versions of PowerPoint, Word and Excel.
The waypoint shape allows you to join two or more connectors together. In electrical circuit diagrams or logic gate diagrams, it is essential to show contact points where wires are connected, as opposed to passing each other without connecting. Waypoint shapes help you organise and route connectors neatly in tree diagrams, org charts, gitflow diagrams, hold connector lines together in a fishbone (Ishikawa) diagram, and more.
Business Process Model and Notation (BPMN) is a standardised diagramming system used to visualise business processes. BPMN diagrams are a form of flowchart, similar to UML activity diagrams. While it is typically used by business analysts and managers, its simple and understandable set of shapes and flows makes it a good choice to document processes for stakeholders in any department.
You can customise the diagrams.net editor and choose your preferred theme for the user interface. The UI theme control which editor elements are displayed, minimised or hidden, including the menu, toolbar, panels and dialog boxes.
Connectors are lines that connect your shapes together and may or may not have arrows at one or both ends. In a diagram, connectors provide context information, showing how the various shapes and entities in your diagram are related.
Entity relationship diagrams or ER models in software engineering show the structure of and relationships between database objects. They are used extensively in database modelling to plan new systems, and document existing systems for maintenance and updates.
Flowcharts are one of the most common diagram types, showing all of the steps that must be followed to complete a process. Not many processes are limited to just one person or one team, which is why swimlane diagrams and cross-functional flowcharts are used - these show the flow of data or control across different groups.
User story diagrams are quite strongly related to UML use case diagrams, and both are used in an agile software development context. Both types of diagrams are used to explore and document customer requirements, they identify different groups of users and their goals, but they are used in different ways.
With most teachers and students now working virtually, as schools have been required to close due to the pandemic, the tools that support online teaching have been drastically improved. Many schools are now using Google Classroom to communicate with students, organise curriculum, and assign and submit assessment digitally.
diagrams.net is a unique security-first diagramming tool in that we provide the application platform, but your diagram data only lives in your computer memory while you are working on it. As you can store your diagrams on your preferred enterprise-level cloud storage platforms or on your local device, diagrams.net gives you control over your diagram data.
Increasingly more of the information and data your teams work with is moving into the cloud. This is not a bad thing – there are many advantages to cloud storage, when you are using an experienced, large and trusted provider.
The Unified Modeling Language (UML) is a set of standard symbols and diagram types, commonly used in data modelling, workflow visualisation, and system modelling. UML notation is the defacto industry standard in the fields of software development, IT infrastructure, business systems and other fields. Many languages, such as SysML, SoaML, and a number of architecture frameworks use and extend UML.
Complex diagrams can be made a lot easier to read and understand when you split them up into logical smaller diagrams on multiple pages, or by using a number of layers.
Notion is a collaboration platform with web, desktop and mobile applications, providing individuals and teams with a range of features for collaboration, documentation and personal organisation: notes, databases, kanban boards, wikis, calendars, and reminders.
You can create a diagram automatically from a combination of formatting information and CSV data from a spreadsheet. This may be practical when working with spreadsheet models of various types of data (org charts, attack trees, process flows), or CSV files exported from other programs, for example, modeled network topologies or software dependencies.
There are two ways to display diagrams on Confluence Data Center and Server - either attach the diagram file to the page and use the draw.io diagram macro, or embed a diagram that is stored elsewhere using the Embed draw.io diagram macro. You can embed draw.io diagrams easily from the following locations:
You can change the alignment of text labels in shapes and on connectors in a number of different ways. The options below are available in the Text tab of the format panel on the right.
Shapes are placed on the drawing canvas in diagrams.net using a default orientation. You can rotate shapes into another position as you need.
diagrams.net and the draw.io branded Atlassian integrations are the leading solution for web based sketching and diagramming functionality. The article describes the draw.io integration for Confluence that we, JGraph, build, deliver and maintain along side the online diagrams.net and desktop tools.
You can use the built-in search features to look for draw.io diagrams in Confluence Cloud, as well as Confluence Server and Data Center. In the following examples, you can see a comparison of how Confluence finds draw.io and Gliffy diagrams.
With the draw.io app for Confluence Cloud, you can add diagrams to Confluence Cloud pages and collaboratively edit them. You can reuse one diagram on multiple pages, embed diagrams from cloud storage platforms, and cut down on the time spent maintaining multiple copies of the same diagram.
The automatic layout shapes in the Advanced shape library in diagrams.net organise your flow charts, tree diagrams, org charts, and mind maps for you as you add and connect more shapes. The automated layout ensures that all shapes in your diagram are spaced evenly, either in a horizontal or vertical format, and will automatically increase or decrease the container shape’s size to match the contents.
Confluence allows you to collaboratively edit the content of its pages: You and other Confluence users will see each others’ changes in real-time as you edit the page.
Draw your Amazon Web Services (AWS) infrastructure with diagrams.net for free. You don’t need to register or sign-up, and you can store your diagrams in your favourite cloud storage platforms, like Google Drive, One Drive, and Dropbox.
You can use a versioned diagram in a GitHub README file in a number of different ways, and include links to edit the diagram or use it as a template for a new diagram.
The C4 modelling is used to describe and define architectures in an abstract and simple way. Designed by Simon Brown, C4 is a different way to approach modelling software development which focuses on four c’s: context (people), containers, components, and code.
You can add maths equations to your diagrams by enabling mathematical typesetting via the diagrams.net menu. When you enter an equation into a text shape or label, enabling mathematical typesetting will use MathJax to render your equation. MathJax renders equations neatly and works in all browsers.
The double click behaviour in diagrams.net has been updated in version 13.4.2 to be more convenient. Now, when you double click on the blank drawing canvas, you can quickly add a shape or text from the selector to your diagram.
There are many keyboard shortcuts you can use when working with shapes from the shape libraries on the left of the drawing canvas in diagrams.net.
A more relaxed and informal style for shapes, fills and lines is often used in infographics, teaching materials, maps and reports so that the diagrams are little less sterile and boring. The rough style adds a hand drawn shading options, rough outlines and connectors, and handwritten text labels.
Tables have been overhauled in diagrams.net to be much more flexible and robust than the old HTML tables you previously used. With the new tables, you can choose from various layouts, drag to resize rows and columns, move rows by dragging them, and build cross-functional flowcharts within a table and its cells.
Connectors show how the different shapes in the diagram are related. In complex diagrams, you are likely to have many overlapping connectors. While line jumps are useful when you have one or two connectors that cross but shouldn’t intersect, you can change the path that your connectors take to make your diagram clearer by adding extra waypoints.
Diagrams make coding go a lot smoother, especially when you are programming in teams. Having diagrams version tracked and right with the code they reference, and version tracked similarly in your code editor saves you time. You don’t have to exit your workspace to switch to an external tool, or have to export/import every time you want to update a diagram.
diagrams.net has a number of shape libraries and templates for creating rack diagrams. Both electronics cabinets can be visualised, as well as IT racks with servers and networking hardware, including those provided by specific vendors like APC, Cisco, Dell, F5, HP, IBM and Oracle.
All teams have their own unique needs and particular workflows. Integrating useful collaboration tools seamlessly into that workflow is the key to your team’s success. We offer security-first diagramming for teams working with Atlassian products.
You can now create a new diagram even faster by going to diagram.new or diagrams.new instead of having to remember the full app.diagrams.net address.
You can embed diagrams.net as an application within another app, where you store the diagram data in the host app. It takes around 15 minutes to get a basic example running.
The PNG image file format supports embedded metadata in a number of ways. diagrams.net can export a PNG image of your diagram and include the diagram itself in the image, by including the XML code in the zTxt section of the image file.
There are many reasons why you may want to print a diagram, or save it as a PDF file: floor plans with emergency routes or conference booth layouts, infographics, business plans and BPMN diagrams, or infrastructure and rack diagrams when you don’t have a tablet on hand for easy reference.
Mermaid is a syntax similar to Markdown where you can use text to describe and automatically generate diagrams. With Mermaid’s Markdown-inspired syntax, you can generate flow charts, UML diagrams, pie charts, Gantt charts, and more.
Custom shape libraries let you add the shapes, images, clipart, groups of shapes, custom shapes, and even entire diagrams to your own shape library to make diagramming faster and easier.
Network diagrams, or infrastructure diagrams, let you understand a computer network quickly.
There are a large number of keyboard shortcuts that let you create diagrams faster and more easily with diagrams.net. One of the more common and time-consuming tasks when you create a diagram is styling shapes and connectors.
Org charts, also known as tree diagrams, organisational charts, and organigrams, are used throughout all disciplines and professions. We like to categorise everything as it helps us make sense of how the world works. Species of plants and animals, corporate and military hierarchies, team structures, family trees, language family relationships, even symptoms of illnesses - org charts help us quickly find who to contact, what illness to treat, and so on.
Floorplans aren’t only useful for real-estate agents and people who are moving to a new apartment. You can also plan new office spaces, show emergency routes, create a seating chart, plan a conference or trade show layout - anything where you need to arrange people and furniture in a space.
draw.io will slowly transition to become diagrams.net during 2020 for security reasons. Nothing will change for you, apart from seeing a different URL and logo. www.draw.io will continue to serve the application correctly, we won’t even redirect you.
Versioning is built into Confluence, and diagrams attached to pages using the draw.io app for Confluence takes advantage of this. When you edit a diagram, the draw.io app creates a new page version so you can easily restore an older version of your diagram.
It’s easier to show new development team members your project’s branch structure in your Git repository visually than to describe it in words. Some platforms may illustrate this using built-in tools. If you are using a platform without a convenient visual representation, it’s easy to create your own gitflow diagram.
The free diagrams.net add-on for Google Docs lets you embed your diagrams into your documents. When the diagram files have been updated via your Google Drive, all you need to do is update them inside your document to show those changes.
Several features in our diagram editor let you create diagrams automatically from simple text statements.
Each shape in a diagram can contain metadata or custom properties - extra information about those shapes.
If you don’t want to use the fonts that are available by default in diagrams.net, you can use your own custom fonts or external fonts, such as Google’s fonts or web fonts stored on your own server. This is useful when you need to match the style guide of a publication, your company’s corporate image, or to add interest and emphasis in an infographic.
It’s our mission to provide free, high quality diagramming software for everyone. We want to make diagrams.net as accessible as possible, where everyone is able to share a diagram and know that anyone can open and edit it.
Threat modelling, especially in IT, is becoming more common. Companies are increasingly aware of the risks of having their infrastructure and devices connected to the internet. As more devices, machines, sensors, monitors, and applications are added to a company’s infrastructure, there are potentially many more vulnerabilities.
FOSDEM is a free two-day event held each year, organised by volunteers, to promote the use and development of free and open source software. Open source software developers and users can meet, share ideas, and collaborate.
Some diagrams can get very large and complex, for example, business processes, UML diagrams, floor plans, or even large brainstorm mind maps and hierarchical tree diagrams. These diagrams are often more readable when they are broken into smaller component diagrams.
diagrams.net desktop is a downloadable security-first diagramming application that runs on Windows, MacOS and Linux. Creating diagrams in the desktop app doesn’t need an internet connection. This is useful when you are disconnected or when you must create diagrams in a highly secure environment, where data protection is of the utmost importance.
DESKTOP VERSIONS PRE 10.7.5 ARE STRONGLY RECOMMEND TO DOWNLOAD AND INSTALL A NEW DESKTOP BUILD
You can store your diagrams in GitLab after authorising access to your account and repositories - diagrams.net will never see your GitLab password.
diagrams.net supports GitHub using OAuth - diagrams.net will never see your GitHub password.
You can share and collaborate on diagrams with anyone, either inside or outside of your company, when they are stored as public files in your Google Drive account.
We regularly publish new example diagrams in the jgraph/drawio-diagrams repository on GitHub so they are easy to access. In this repository you’ll find diagram examples that are used in:
Cloudockit is a platform which connects to and monitors your cloud and on-premises environment and automatically generates 2D or 3D diagrams. It works with AWS, Azure, Google Cloud Platform (GCP), VMWare Hyper-V, Alibaba Cloud, IBM Cloud, and your local infrastructure to visualise your network and automatically generate documentation.
Entity relationship diagrams show how data is structured in relational databases. Each entity consists of rows of attributes. ER diagrams are used in software development and by IT workers to design and document database structure.
diagrams.net is a unique security-first diagramming tool in that we provide the application platform, but your diagram data only lives in your browser on your local device while you are working on it. Upon saving, your diagram data will be stored at the location you have chosen: in your cloud platform, on your local device, in GitHub, or to whichever integration you have selected. Your diagram data is never sent to our servers when you save your diagram.
Using Cloudcraft, you can securely connect to cloud environments and infrastructure components via your architecture diagrams where statistics, resource information and more is updated in real time. The 3D isometric view that Cloudcraft uses is familiar to engineers and IT staff as it often matches the tools they learned on. The automatic updates driven from your company’s live systems makes Cloudcraft a fantastic tool for monitoring your AWS cloud infrastructure. The statistics are also helpful to estimate costs when you want to make changes to your system.
Veaam is an online service that visualises and monitors your cloud and network architectures, and provides a number of additional availability services, including deployment, backup, replication and restoration. It supports Amazon AWS, Microsoft Azure, and IBM Cloud, as well as a variety of workloads, apps, and platforms commonly used by businesses.
You can connect shapes using the mouse, or the keyboard, or a combination of mouse and keyboard. By cloning shapes, you can add a shape and automatically connect them.
You can define custom properties for the shapes and connectors in your diagrams. This shape metadata can help explain your diagram to viewers. For example, the tooltips that can appear when you hover over a shape are one such property.
Quickly move an entire area of your diagram: hold down the Control and Shift keys, then click on a blank section of the drawing canvas and drag to move it. You’ll see guide lines appear to show you the origin and displacement of the area you are moving.
As diagrams.net aims to become the de facto diagramming tool, used by everyone around the world, it’s important to be able to import from a variety of file formats and from a number of storage locations.
When you drag a selection box around too many shapes, you can either do it again to include the shapes you wanted to select, or use hold down Alt+Shift and drag a deselection box around those shapes that you don’t want to include in your selection.
Normally, when you resize a group of shapes, all of the shapes are resized proportionally, and maintain their positions in relation to each other.
SVG images load quickly, especially when compared to loading diagram images in other formats. You can embed an SVG image exported from diagrams.net in a website, document or even a WordPress site if you have installed a plugin that support the upload of SVG files.
Floating connectors are easy to create - drag a connector from one shape, hover over another shape until the outline is blue, then release.
You can embed a diagram in a web page or in any online platform that can render HTML. While some third-party integrations can embed diagrams more efficiently (in WordPress, for example), embedding a diagram as HTML may be a good option. You can also share these HTML diagram files with others.
Publishing a diagram that you have saved on Google Drive as a link makes it easy to share them with people on forums, via chat apps or by email.
A Chrome app is a browser-based app that looks like a normal desktop app. The diagrams.net (draw.io) Chrome app runs on Chromebooks using ChromeOS, as well as on the following operating systems: Android, Windows, MacOS, iOS, Linux - in fact, anywhere the Chrome browser can run.
Instead of dragging shapes from the shape library in to the drawing canvas, you can quickly add them by simply clicking on the shape. This makes it faster to add a lot of shapes to the canvas at once, and then place, style and connect them later.
diagrams.net makes it easy to share your diagrams. You can even encode it in an URL if your diagram is smaller than a certain size. When someone clicks on the (very long) URL, they will open the diagram in the diagram viewer. From there, it’s easy to print or edit their own copy of the diagram - your original diagram will not be changed unless you specify otherwise.
You can quickly build flow charts, mind maps or tree diagrams using shortcut key combinations.
When you print a Google Doc, you want images and diagrams to be as clear as possible. Diagrams that have been embedded with the Google Docs add-on can now be printed at a high resolution.
You can share diagrams easily, open and edit them, no matter whether those diagrams are in .drawio, .vsdx, .vdx, .gliffy or .lucid file formats, by using diagrams.net as a free, online diagram viewer.
When you work with container shapes, dropping a shape over that container inserts that shape into that container. While this is useful for adding steps to a flow chart inside a flow lane (e.g. using the flow layout shape), you may not necessarily want to add the shape for the person responsible into the flow lane container, but instead overlay it.
You can store and collaborate on diagrams using your company’s shared drives in G Suite, previously known as Google Team Drives, in the same way as you can use your personal Google Drive with diagrams.net.
With the GDPR enforcement date of 25th May approaching, we’ve decided to make our privacy and data handling process as public and open as possible. Virtually all companies hide behind fuzzy text like “we employ industry standard practices”. They give you no idea whether your personal data is secure or who can use it.
If you want to delete a shape and all of the connections to and from that shape, you can do that with a keyboard + toolbar shortcut.