The offical blog of the diagrams.net project
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.
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.
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 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 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 the 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.
There are many different ways to connect shapes - some with the mouse, or a combination of mouse and keyboard shortcut, or even just with the keyboard.
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 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 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.