Diagram types and their use cases

    integrations   features   use cases   import

    Mermaid in draw.io updated to support ELK layout

    Mermaid is a text-based syntax that you can use to describe a diagram, and automatically lay it out neatly on the diagram canvas. Enter your Mermaid diagram description in draw.io via Arrange > Insert > Advanced > Mermaid in the draw.io menu or + > Advanced > Mermaid from the toolbar. draw.io has updated to Mermaid version 10.9.1 to support the new ELK automatic layout.
    Tell the Mermaid diagram generation tool to use the ELK layout option in your text diagram description

    11 Jun 2024
    features   use cases

    Case study - Requirements flows for a new website

    When you contract an external company to create a website, a mobile app or a program interface, you need to provide clear requirements - user interface specifications and mock-ups, user flows and use cases, as well as data structures and note the various rules that must be followed. You could draw a set of technical diagrams for each context, or you could put it all into one diagram.
    A requirements flow for a website that is a mixture of a flow chart, entity relation, and interface mockup
    Part flowchart, mockup and data - documenting the requirements of a website

    21 May 2024
    use cases

    Draw tree diagrams to show hierarchies

    Tree diagrams are used to show hierarchies, to categorise something or show decisions. They are commonly used in computer science for binary search trees, red-black trees, and more, and to show directory structures on computers or a website navigation structure. Tree diagrams are quick and easy to create in draw.io.

    05 Jan 2024
    features   use cases

    The many types of technical diagrams

    Technical diagrams are used throughout many different professions and industries, both for internal documentation and to help customers or provide training. Many of these fields have their own specific types of technical diagrams.
    Activity diagrams are used to model workflows in various ways

    08 Dec 2023
    features   use cases

    Can you draw graphs and charts in draw.io?

    draw.io is not a spreadsheet program - there are no figures from which to draw charts and graphs automatically. But there are plenty of useful shapes in draw.io, so you can easily create attractive charts and graphs for presentations and infographics.

    24 Nov 2023
    features   use cases

    Useful medical diagrams for patients

    Diagrams for the medical industry are often described from the perspective of an organisation or hospital, but how can the most important people in medicine - the patients - use diagrams themselves to get better treatment outcomes?
    Add your name, date of birth, and the date you updated each diagram on the three labels of a plain connector

    10 Nov 2023
    features   use cases

    Diagramming tools from simple to complex

    Humans understand information faster and more easily in diagrams. This is why there are many visualisation tools, from simple sketching apps, to single-purpose diagramming tools and whiteboarding apps, through to technical drawing applications like draw.io and hyper-specialised CAD and architectural tools for precision drawings.

    03 Nov 2023
    use cases   templates   shape libraries

    UML component diagrams show the structure of a system

    UML component diagrams are used to model the high-level software components and subsystems in service-oriented architectures and component-based development projects, and more importantly, define the interfaces between those components. As component diagrams provide a clear visual overview of a system, they are drawn early in a project as they are useful both to seek approval from stakeholders and to develop an implementation roadmap.
    Component diagrams show the dependencies between the components of a system.

    30 Aug 2023
    use cases

    Create a variety of T-charts in draw.io

    T-charts are a type of graphic organiser or concept map that helps you to evaluate the advantages and disadvantages of anything. They can also be used to contrast two things of the same type, such as physical products, services, processes or data structures, business models, applications, situations, etc.
    Build a t-chart diagram quickly in draw.io using list shapes

    24 Aug 2023
    features   use cases

    Draw freehand infographics in draw.io

    While the shape libraries in draw.io have a vast array of shapes for technical diagrams, there are relatively few illustrations for use in infographic diagrams. You can create your own illustration shapes easily using draw.io on a tablet. For example, all of the illustrations in this tidal pool infographic were drawn as freehand shapes in draw.io.
    An infographic created in draw.io composed mostly of freehand shapes

    09 Aug 2023
    use cases

    How to create data flow diagrams in draw.io

    Data flow diagrams (DFDs) are common diagrams used in structured analyses and data modelling to document the data flows between entities, processes and data stores. For example, the following DFD documents the main data flows in a large language model that allows user queries such as ChatGPT.
    Data flow diagrams are simple to draw and show how data moves around in a system

    27 Jul 2023
    use cases

    Explain system roles and responsibilities in diagrams

    There are many systems where you need to describe the different roles that interact with it, and what their responsibilities are. As they can be quite complex, diagrams help you to explain how it works to both customers and colleagues.
    A roles and responsibilities diagram is ideal to onboard new colleagues or customers to a complex system

    21 Jul 2023
    use cases   templates

    How to draw and use concept maps

    Concept maps are a broad category of diagrams that are useful for brainstorming with teams, learning and training, showing hierarchical information, planning events or product campaigns, and exploring solutions to problems. They are widely used throughout all industries, especially in medicine and education.
    A concept map detailing the factors that drive a customer to purchase a product and how they are interrelated

    17 May 2023
    use cases   templates

    Diagrams for teachers

    Diagrams are an effective way of teaching and learning because we all understand complex information more easily when it is visualised. Graphic organisers, mindmaps, timelines, cause and effect charts, Venn diagrams, flowcharts, scientific illustrations - all of these can created in draw.io.
    Taking notes graphically helps with understanding and remembering the information more clearly

    31 Mar 2023
    integrations   features   use cases   atlassian

    Use PlantUML in draw.io

    With PlantUML in draw.io using our web application (app.diagrams.net) you can quickly draw UML diagrams from a text description. When you input your PlantUML text, the diagram editor will automatically layout and arrange the diagram for you, based on your description and the style of output you select. It supports many different types of UML diagrams, as well as mindmaps, tree diagrams, flowcharts, network diagrams, Gantt charts, ER diagrams and more.
    When you input PlantUML into a draw.io diagram, choose which type of diagram style you want - SVG, PNG or TXT

    16 Feb 2023
    use cases

    Feature flag development with tags in gitflow diagrams

    Feature-based development and lean release cycles are becoming more common in online software services (SaaS products), where continuous development and continuous deployment are required. Feature flags give administrators and developers fine control over what features are available to which customer segments on release.
    Trunk-based development with feature branches works well with feature flags on release - apply tags to shapes to visualise this in draw.io

    20 Jan 2023
    use cases   templates   shape libraries

    Draw UML activity diagrams

    UML activity diagrams show the sequence of actions and the flow of control in a system or a process. You can model the behaviour of physical and digital systems, as well as business process flows with activity diagrams.
    UML activity diagrams are used to model the flow of control and sequence of actions in a process or system
    UML activity diagram template in draw.io

    23 Nov 2022
    features   use cases   import

    Generate diagrams from code

    Documenting software costs developers time and becomes outdated quickly. A code-first diagramming approach - describing the diagram in code or text while programming - works well for entity models (SQL database code), and class descriptions (PlantUML and Mermaid syntax).
    An example sequence diagram inserted from Mermaid code

    21 Oct 2022
    use cases

    Diagrams for a better incident response

    Industries and services need to plan for when an incident happens, both to provide good customer service and ensure the safety of all those affected. When responding quickly to an incident, diagrams are easier to read and put into action than paragraphs of text.
    There are two main frameworks for incident response in the IT industry

    14 Oct 2022
    use cases   templates   shape libraries

    Draw a UML use case diagram

    UML use case diagrams show all of the ways an end-user interacts with your systems, with all of its pre- and post-conditions, exceptions and alternate paths. These diagrams are used to establish your system requirements, whether that be a software system or an interaction with another person or team.
    An example of a use case diagram

    26 Sep 2022
    use cases

    SysML vs UML - what's the difference?

    Systems modelling language (SysML), is an extension of UML that has been modified for systems engineering. While both can document software, information and processes, SysML diagrams also document the hardware, humans, physical components, and facilities in the system.
    The diagram types in SysML vs UML

    02 Sep 2022
    integrations   features   use cases   import

    Create a mindmap from text with PlantUML

    Mindmaps are useful to quickly capture ideas, and are easy to draw in draw.io and our draw.io branded apps. But some people prefer to work from text lists when brainstorming. Drop a text list into the PlantUML import tool and draw.io will generate your mindmap for you - no need to fuss with connectors or layouts.
    Generate a mindmap from text in draw.io by inserting PlantUML in arithmetic notation via Arrange > Insert > Advanced > PlantUML

    30 May 2022
    use cases   templates   shape libraries

    Create a sequence diagram

    Sequence diagrams show the order of messages that are passed between elements of a system to complete a particular task or use case. The events that cross system boundaries are used by objects and people (actors) to complete their processes.
    draw.io contains several examples of UML sequence diagrams in its template library

    16 May 2022
    use cases   shape libraries

    Draw structural formulas in draw.io

    Represent the three-dimensional molecular shape of a chemical by drawing a structural or skeletal formula in draw.io with the two new connector shapes in the Arrows shape library - the solid wedge and the dashed wedge.

    28 Mar 2022
    use cases   templates   shape libraries

    Create UML class diagrams

    UML class diagrams are used to illustrate the structure of a computer program. They detail the types of data or attributes stored within each ‘class’, the methods (operations or functions) that each class provides, and the relationships between the classes.
    A class diagram based on the basic class diagram template in draw.io

    22 Mar 2022
    use cases   shapes   templates

    Draw timelines and roadmaps in draw.io

    Timelines, roadmap and milestone diagrams feature in a range of documentation - project development documents, infographics and presentations being some of the most common. There are many shapes and templates in draw.io and our draw.io branded apps that you can use to quickly draw an attractive diagram that you can embed in your presentation or documentation.
    Draw timelines, roadmaps and milestone diagrams easily with draw.io

    14 Feb 2022
    templates   use cases   shapes

    Draw circular flowcharts

    Flowcharts are one of the most used types of diagrams in all teams. But some process flows are circular or cyclical rather than a series of steps with a start and end. You can create circular flowcharts in the draw.io editor in a number of ways.
    Create a circular flowchart using basic shapes in draw.io

    31 Jan 2022
    use cases

    Reviews from real draw.io users

    The barrier to anyone diagramming and whiteboarding with draw.io is lower compared to many other SaaS applications. From reviews and customer feedback, some of the things they like the most include:

    • you don’t need to register and it costs nothing
    • you can diagram in all major operating systems
    • there is an offline desktop version
    • you can give your diagram to anyone else and they will be able to load and edit it freely
    • you can store unlimited diagram files wherever you prefer
    • project development is in the open and anyone can take part

    10 Jan 2022
    use cases   templates

    Ishikawa diagrams for root cause analyses

    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.
    An example of an manufacturing Ishikawa diagram for a defective part

    01 Dec 2021
    atlassian   use cases

    Flowcharts in Confluence

    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.

    19 Nov 2021
    features   use cases

    How to use sketch.diagrams.net as an online whiteboard

    The draw.io editor online at can use the Sketch editor theme which has an endless whiteboard-style canvas and simple toolbar. This theme 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.

    18 Aug 2021
    use cases   templates

    Draw dependency graphs in draw.io

    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.
    A PERT diagram template that is available in draw.io

    09 Jul 2021
    use cases   templates

    Create a remote kanban board with draw.io

    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.
    The kanban template in draw.io automatically updates colours and labels when you move tasks to another column

    21 May 2021
    features   use cases   templates

    Use swimlanes with flowcharts to show who does each step

    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.
    The basic cross-functional flowchart template after being styled, as provided in the draw.io template manager

    09 Mar 2021
    use cases

    Story mapping

    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.
    An example of a use case diagram

    24 Feb 2021
    features   use cases

    UML 2.5 shape library with updated shapes

    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.
    Activity diagrams are used to model workflows in various ways

    21 Jan 2021
    use cases

    Create C4 models and diagrams

    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.
    An example C4 system container diagram

    29 Jul 2020
    use cases   integrations

    Create diagrams directly in VS Code

    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.

    01 Jun 2020
    use cases   templates

    Create a rack diagram in draw.io

    draw.io 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.
    An electronics cabinet diagram, created at draw.io A simple rack diagram, created with draw.io An Arista rack diagram layout, created with draw.io

    27 May 2020
    use cases   integrations   atlassian

    Team diagramming in all departments

    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.

    13 May 2020
    use cases

    Use org charts to categorise data and show hierarchies

    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.

    16 Mar 2020
    use cases   templates

    Create floorplans and layouts

    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.
    A ground floor apartment floorplan created in draw.io The second floor of an apartment floorplan created in draw.io

    02 Mar 2020
    use cases   templates

    How to create a gitflow 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.
    An example gitflow diagram

    07 Feb 2020
    use cases

    Analysing vulnerabilities with threat modelling using draw.io

    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.
    Data flow diagram for threat modelling

    18 Nov 2019
    integrations   use cases   import

    Export from Cloudockit to a .drawio diagram

    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.
    A basic AWS diagram in 3D

    18 Apr 2019
    features   use cases   import

    Insert from SQL to create an ER diagram

    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.

    08 Apr 2019
    integrations   use cases   import

    Use Cloudcraft to export your AWS architecture to a .drawio 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.
    Examples of Cloudcraft infrastructure diagrams exported to draw.io

    27 Feb 2019
    use cases

    draw.io supports Veeam stencils

    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.
    A simple network using the Veeam shape library

    26 Jan 2019