Examples 2017-11-17T00:07:28+00:00

Examples

The ways in which diagrams are used in Confluence are endless

BPMN Diagrams

Complex business processes and workflows are much easier to understand when presented in diagram form. The shape library includes all the components you need to build your BPMN diagrams.

These diagrams are especially useful for when your business processes need to be audited or for onboarding new employees.

Live example

BPMN diagram

BPMN Diagrams

BPMN diagram

Complex business processes and workflows are much easier to understand when presented in diagram form. The shape library includes all the components you need to build your BPMN diagrams.

These diagrams are especially useful for when your business processes need to be audited or for onboarding new employees.

Live example

UML diagram

UML Diagrams

You can’t avoid documentation when programming in teams, and UML diagrams make it easy to document all aspects of your software engineering projects – both behavioural and structural. Create use case, communication, sequence, interaction, class, object and package diagrams with ease with the UML components in the extensive shape library.

Live example

UML Diagrams

UML diagram example

You can’t avoid documentation when programming in teams, and UML diagrams make it easy to document all aspects of your software engineering projects – both behavioural and structural. Create use case, communication, sequence, interaction, class, object and package diagrams with ease with the UML components in the extensive shape library.

Live example

Flow Charts

Do you have a workflow that you want to improve or document, but you don’t want to use the strict BPMN notation? No problems! draw.io supports all of the shapes used in flow charts of various types.

Because we learn visually, complex workflows are ideally presented as diagrams. Use draw.io’s drag & drop interface or the automatic layout function to create your flow charts quickly and easily.

Live example

Flow chart

Flow Charts

Flow chart

Do you have a workflow that you want to improve or document, but you don’t want to use the strict BPMN notation? No problems! draw.io supports all of the shapes used in flow charts of various types.

Because we learn visually, complex workflows are ideally presented as diagrams. Use draw.io’s drag & drop interface or the automatic layout function to create your flow charts quickly and easily.

Live example

Org chart

Tree Diagrams

Tree diagrams are one of the most commonly used diagrams to illustrate any situation where there is a hierarchy of elements. Organization charts, the content structure of a training document or book, a breakdown of components within components – you’ll find many uses for tree diagrams in your organization.

Take advantage of the automatic layout feature and keyboard shortcuts to quickly create an org chart or any other tree diagram.

Live example

Tree Diagrams

Org chart

Tree diagrams are one of the most commonly used diagrams to illustrate any situation where there is a hierarchy of elements. Organization charts, the content structure of a training document or book, a breakdown of components within components – you’ll find many uses for tree diagrams in your organization.

Take advantage of the automatic layout feature and keyboard shortcuts to quickly create an org chart or any other tree diagram.

Live example

Mind Maps

If you are like the majority, you prefer to brainstorm visually. Mind maps are ideal for quickly jotting down your thoughts about a concept or problem, and organizing the information into related topics. Use mind maps to help you remember information that you are studying, solve problems, make decisions and prepare for writing a complex document.

Use keyboard shortcuts to navigate around, connect and add new elements to your mind map quickly.

Live example

Mindmap

Mind Maps

Mindmap

If you are like the majority, you prefer to brainstorm visually. Mind maps are ideal for quickly jotting down your thoughts about a concept or problem, and organizing the information into related topics. Use mind maps to help you remember information that you are studying, solve problems, make decisions and prepare for writing a complex document.

Use keyboard shortcuts to navigate around, connect and add new elements to your mind map quickly.

Live example

Network diagram

Network Diagrams

The network of connected devices in companies are becoming increasingly complex. With a wide variety of both generic and specific diagram elements commonly used for visualizing your IT infrastructure, you can create a detailed illustration of your network with all of its devices quickly and easily with draw.io, making network administration much less frustrating.

Live example

Network Diagrams

Network diagram

The network of connected devices in companies are becoming increasingly complex. With a wide variety of both generic and specific diagram elements commonly used for visualizing your IT infrastructure, you can create a detailed illustration of your network with all of its devices quickly and easily with draw.io, making network administration much less frustrating.

Live example

Wireframe Models

You can use wireframe models, also known as page schematics, to plan the layout of your website or user interface. A wide variety of professions work with wireframes on a daily basis: developers, user experience designers, business analysts, visual designers and graphic artists. They have become more important with the rise of mobile interfaces – wireframe models help you simplify your interface and make it easy for users to use your application or website.

Live example

Wireframe model

Wireframe Models

Wireframe model

You can use wireframe models, also known as page schematics, to plan the layout of your website or user interface. A wide variety of professions work with wireframes on a daily basis: developers, user experience designers, business analysts, visual designers and graphic artists. They have become more important with the rise of mobile interfaces – wireframe models help you simplify your interface and make it easy for users to use your application or website.

Live example

Mockup

Mockups

In a similar way to wireframe models, mockups are used to quickly prototype a user interface during application development. These days, they are most often used when creating mobile websites and app interfaces, and include more of the graphic design elements than wireframe models. They are also used to visualize physical products before committing to a final design.

Use draw.io to create mockups of your application interfaces and mobile websites to optimize their usability, and keep your customers happy.

Live example

Mockups

Mockup

In a similar way to wireframe models, mockups are used to quickly prototype a user interface during application development. These days, they are most often used when creating mobile websites and app interfaces, and include more of the graphic design elements than wireframe models. They are also used to visualize physical products before committing to a final design.

Use draw.io to create mockups of your application interfaces and mobile websites to optimize their usability, and keep your customers happy.

Live example

Venn Diagrams

Venn diagrams show the possible logical relationships between two or more groups of ‘things’ or sets. They are often used to organize groups of elements and show how they are similar or different. You will use them in scientific fields especially when classifying things, but they are also widely used in teaching, mathematics, linguistics, computer science and business.

Use draw.io to help you classify your business plans, for illustrating the grouping of use cases, or for visually showing user access permissions in your IT infrastructure.

Live example

Venn diagram

Venn Diagrams

Venn diagram

Venn diagrams show the possible logical relationships between two or more groups of ‘things’ or sets. They are often used to organize groups of elements and show how they are similar or different. You will use them in scientific fields especially when classifying things, but they are also widely used in teaching, mathematics, linguistics, computer science and business.

Use draw.io to help you classify your business plans, for illustrating the grouping of use cases, or for visually showing user access permissions in your IT infrastructure.

Live example

Gantt chart

Gantt Charts

A Gantt chart is a bar chart used when planning projects to show dependencies, resources, deliverables and due dates. Project managers use them to break down and detail the structure of their projects and are typically made before a project starts. This means you can see when your project is ahead of or behind schedule, or where possible delays and bottlenecks may occur.

To create a Gantt chart in draw.io, you’ll need to know all of your project’s tasks, dependencies, durations, and deadlines.

Live example

Gantt Charts

Gantt chart

A Gantt chart is a bar chart used when planning projects to show dependencies, resources, deliverables and due dates. Project managers use them to break down and detail the structure of their projects and are typically made before a project starts. This means you can see when your project is ahead of or behind schedule, or where possible delays and bottlenecks may occur.

To create a Gantt chart in draw.io, you’ll need to know all of your project’s tasks, dependencies, durations, and deadlines.

Live example

Rack Diagrams

Rack diagrams are created by IT support personnel to visualize the rack mounting of computer and network equipment so they can plan and organize the equipment’s arrangement before they actually buy or install anything. They show what the front (or rear) of the rack will look like and are drawn to scale.

Make sure you have enough room for cabling, equipment and airflow by planning ahead with a rack diagram in draw.io.

Live example

Rack diagram

Rack Diagrams

Rack diagram

Rack diagrams are created by IT support personnel to visualize the rack mounting of computer and network equipment so they can plan and organize the equipment’s arrangement before they actually buy or install anything. They show what the front (or rear) of the rack will look like and are drawn to scale.

Make sure you have enough room for cabling, equipment and airflow by planning ahead with a rack diagram in draw.io.

Live example

Sequence diagram

Sequence Diagrams

You can use a sequence diagram to show how objects interact with each other and the order in which they act. Also known as event diagrams or event scenario, they are commonly used in documenting processes and in software engineering. Dotted lines (lifelines) indicate objects or roles, and arrows indicate messages passed between them. UML extends sequence diagrams to include components for conditional branches, optional processes and parallel processing.

Live example

Sequence Diagrams

Sequence diagram

You can use a sequence diagram to show how objects interact with each other and the order in which they act. Also known as event diagrams or event scenario, they are commonly used in documenting processes and in software engineering. Dotted lines (lifelines) indicate objects or roles, and arrows indicate messages passed between them. UML extends sequence diagrams to include components for conditional branches, optional processes and parallel processing.

Live example

SWOT Diagrams

SWOT diagrams are used to provide an overview of strengths, weaknesses, opportunities, and threats when planning in business or projects. You can use a SWOT analysis to evaluate companies, products, places, industries, or people.

Use draw.io to clearly and visually represent the internal and external positive and negative factors that will influence your objective, be it to improve the performance of a company, to successfully complete a project, or anything else.

Live example

SWOT diagram

SWOT Diagrams

SWOT diagram

SWOT diagrams are used to provide an overview of strengths, weaknesses, opportunities, and threats when planning in business or projects. You can use a SWOT analysis to evaluate companies, products, places, industries, or people.

Use draw.io to clearly and visually represent the internal and external positive and negative factors that will influence your objective, be it to improve the performance of a company, to successfully complete a project, or anything else.

Live example

Floor plan

Floor Plans

Use floor plans to visually organize your office, home or conference space. draw.io provides you with many templates that you can use to quickly draw up your floor plan to scale. Make sure your employees know where to find important things (or people!) in your building and their evacuate paths by creating a floor plan in draw.io. Of course, you can also use floor plans to plan a new kitchen or see how furniture will fit when moving house or renovating.

Live example

Floor Plans

Floor plan

Use floor plans to visually organize your office, home or conference space. draw.io provides you with many templates that you can use to quickly draw up your floor plan to scale. Make sure your employees know where to find important things (or people!) in your building and their evacuate paths by creating a floor plan in draw.io. Of course, you can also use floor plans to plan a new kitchen or see how furniture will fit when moving house or renovating.

Live example

Infographics

People have increasing less time and energy to spend on consuming information. Make it easier and faster for them to remember by presenting your information visually in an infographic.

With a huge clip art library and variety of shapes, you can create useful and memorable infographics quickly and easily.

Live example

Infographic

Infographics

Infographic

People have increasing less time and energy to spend on consuming information. Make it easier and faster for them to remember by presenting your information visually in an infographic.

With a huge clip art library and variety of shapes, you can create useful and memorable infographics quickly and easily.

Live example

Electrical diagram

Electrical Diagrams

You wouldn’t start building an electrical circuit without drafting a diagram first. These diagrams are also known as circuit diagrams, electronic schematics or elementary diagrams and show the components and interconnections of an electronic printed circuit board (PCB) using standardized symbolic representations, but don’t necessarily show the physical layout. draw.io has a complete set of shapes for diagramming electrical circuits.

Live example

Electrical Diagrams

Electrical diagram

You wouldn’t start building an electrical circuit without drafting a diagram first. These diagrams are also known as circuit diagrams, electronic schematics or elementary diagrams and show the components and interconnections of an electronic printed circuit board (PCB) using standardized symbolic representations, but don’t necessarily show the physical layout. draw.io has a complete set of shapes for diagramming electrical circuits.

Live example

AWS Architecture Diagrams

It’s much easier to quickly and easily understand your IT infrastructure and architecture when you see it in a diagram! Use an architecture diagram with Amazon Web Services (AWS) shapes to design and visualize your infrastructure’s design, deployment and topology.

Live example

AWS diagram

AWS Architecture Diagrams

AWS diagram

It’s much easier to quickly and easily understand your IT infrastructure and architecture when you see it in a diagram! Use an architecture diagram with Amazon Web Services (AWS) shapes to design and visualize your infrastructure’s design, deployment and topology.

Live example