Diagrams net что это
About diagrams.net
diagrams.net/draw.io is an open source technology stack for building diagramming applications, and the world’s most widely used browser-based end-user diagramming software.
diagrams.net is a trademark and draw.io is a registered trademark of JGraph Ltd. JGraph Ltd is a company registered in England that develops and owns the software, runs the diagrams.net and draw.io sites and owns the diagrams.net and draw.io brands.
We promise you we won’t hide your data from you and will always give you some way to open and edit that data, at no cost. When companies pay us money it should be because we add value, not because they are locked in.
We are disrupting the industry with a new business model that makes reasonable profits to pay a dedicated, professional software team, but doesn’t use artificial scarcity to produce a bloated sales-centric company with matching revenues.
Our mission statement is “provide free, high quality diagramming software for everyone”.
SaaS apps have a trust problem. Currently, vendors provide both the application and store your data, then charge you monthly to access it. They try to make sure the cost of leaving is more than the cost of renewal (not in a good way).
As with most proprietary software, the revenue is generated by artificial scarcity, pushy sales and de facto file formats forcing companies to buy the product for which that format is native.
Our model is based on the viral effect of a free, open source application. When you share a diagrams.net diagram, you know anyone can open and edit it.
By allowing you to build on the software for free, not just use it. Replacement proprietary software with a single open source application isn’t helpful, either. You can take the existing diagrams.net base and build for specific vertical markets, add and improve on features. Competition is good.
By picking one commercial ecosystem to charge for the application where the host product is pay-for and the profit margins greatest, and that was the Atlassian ecosystem. Note that you still control access to your data on Confluence and Jira, we don’t resort to locking your data away, just because it’s a commercial platform.
JGraph Ltd
Artisans’ House,
7 Queensbridge
NN4 7BF
Northampton
UK
JGraph Ltd is a private limited company registered in England #04051179
Tel : +44 20 8191 1310
Use the diagrams.net editor
diagrams.net is a free and open source diagramming app that you can use online, offline (desktop).
As a security-first diagramming app for teams, we provide the diagramming functionality, and you choose where to keep your diagram data. There are many different integrations with other platforms and applications, including Atlassian Confluence Cloud, Google Documents, GitHub, Microsoft Word.
The diagram editor looks the same and offers the same main features no matter where you are using it. You can open a diagram created in one integration in another.
The diagrams.net editor
Like most diagramming apps, the items you see in the toolbar and the panels around the drawing canvas in diagrams.net are context sensitive. Tools and options will be displayed depending on the type of element(s) you have selected on the drawing canvas.
If you have used diagramming tools before, you will be familiar with the diagram editor layout.
Tip: Hover your mouse over any button, tool or option in the diagrams.net editor to see a tooltip that says what it is used for.
The sections below cover all of the main diagrams.net editor features.
The menu in diagrams.net works in the same way as other applications. Features are arranged into the following menus.
Depending on what you have selected in your diagram, some of the menu entries will not be selectable. For example, you can’t edit a shape’s style if you haven’t selected a shape.
Tip: To the right of the menu is a status message showing if there are unsaved edits or if your diagram has been autosaved.
Toolbar
Some of the tools in the toolbar need to have the right elements in your diagram selected. For example, the Delete tool will be light grey and not enabled if you haven’t selected a shape, connector or text.
In order from left to right:
At the right end of the toolbar are three view options:
Shapes and shape libraries
Shapes are arranged into logical groups, called shape libraries. Not all of the shape libraries are shown at once as there are simply too many of them.
Tip: Expand or collapse each shape library in the left panel by clicking on its name.
Enable/disable shape libraries
To make creating a diagram easier, enable only the shape libraries that you need for the particular diagram you are working on.
Scratchpad
The scratchpad is your personal shape library where you can add the shapes or groups of shapes that you use the most often.
Search shapes
There are so many shapes organised into so many libraries, that they can be hard to find. Type the name of a shape into the shape search field, and you’ll get a number of matches. This also finds matching clipart shapes if you are online.
Tip: If you don’t find the shape you are looking for, try searching for a related word.
Drawing canvas
Draw your diagram by placing, connecting and styling shapes on the drawing canvas in the middle of the editor. The drawing canvas displays a grid by default to help you align and space shapes neatly.
Tip: Enable the rulers via the View menu.
Page tabs
Organise complex diagrams into multiple pages.
Format panel
The format panel on the right contains options and properties that you can change to arrange and style your shapes, connectors, text and diagram.
What you see is context sensitive. For example, when you click on a connector, you will see additional styling options that can only be applied to connectors. If you select only text and no shapes or connectors, you’ll see only the text styling options.
Style tab
Compare the different style options below when a shape is selected (left) and when a connector is selected (right).
To learn how to work with styles, follow our basic flow chart tutorial.
Text tab
Change the font, size and style of your labels using the Text tab of the format panel on the right. You can also change the vertical and horizontal alignment of the text, the writing direction, the font and background colour and opacity, and add spacing around the text.
Word Wrap and Formatted Text are enabled by default. This lets you style characters and words inside the label text as if it were HTML, which also supports hyperlinks.
Tip: Double click on text to edit the text and select part of a label. Then, only the Text tab is displayed (right) as you are not editing a shape.
Compare the different style options below when a shape is selected (left) and when a connector is selected (right).
Arrange tab
Change the position of shapes and connectors, send them to the front or the back behind other shapes, change their size, or rotate them via the Arrange tab on the format panel.
Click Edit Data to manually edit the selected shape’s metadata, or Edit Link to add a hyperlink.
Note: The Arrange tab shows fewer options when you select a connector (right) than when you select a shape (left).
Global diagram options
If you have nothing selected, you’ll see the options that apply to the entire diagram and the drawing canvas.
Introduction to diagrams.net and types of diagrams
diagrams.net and the draw.io branded Atlassian integrations are the leading solution for web based sketching and diagramming functionality. You can use diagrams.net online with a number of storage platforms, and offline with a standalone desktop app.
Diagramming is not like painting with brushes as if you were editing a photo. It’s also not charting numerical data from a spreadsheet.
Instead, you place a number of diagram elements, connect them together, add descriptive text, and style the elements to convey more complex information visually.
diagrams.net gives you the tools to create a wide variety of diagrams: flow charts, mind maps, org charts, Venn diagrams, infographics, network and architecture diagrams, floor plans, electrical and rack diagrams, UML diagrams, and more.
Diagram examples
Follow the links below to learn more about specific types of diagrams and how to create them in diagrams.net.
Business and project management
Software development
IT and infrastructure
You can also find many example diagrams and templates in our drawio-diagrams repository on GitHub.
Обзор сервиса draw.io
Работа любого инженера, IT-специалиста, маркетолога, бизнес-аналитика, менеджера связано с необходимостью создания различных диаграмм, блок-схем и графиков. Для данных целей замечательно подойдет сервис «draw», доступный по ссылке.
Его главное достоинство – бесплатность. За пользование ресурсом не взнимается плата, что делает его ещё более приятным. Кроме того, для полноценной работы не нужно проходить регистрацию и проходить нудный процесс авторизации на сайте.
По умолчанию, стоит включённой галочка для сохранения выбранных настроек в дальнейшем.
Чтобы упростить задачу по ознакомлению с возможностями онлайн-сервиса, изменим язык интерфейса, нажав на «Language».
После установки необходимого языка, потребуется перезагрузить страницу для того, чтобы изменения вступили в силу.
Теперь перейдем к созданию нового проекта, для чего нажмем на кнопку «Создать новую диаграмму», после чего осуществиться переход к графической части работы.
Большой интерес пользователей вызывает возможность описание бизнес-процессов с помощью сервиса draw.io.
Для начала работы выберем «Пустую диаграмму» среди категории шаблонов «Базовый».
В качестве примера опишем основные бизнес-процессы, связанные с работой современного не крупного интернет-магазина.
Для графической части работы нам потребуются разделы «BPMN Общие» и «BPMN Events».
При рассмотрении примера не будем углубляться в узкую специфику продвижения магазина, работу директолога, поискового оптимизатора, контент-менеджера, системного администратора, которые также принимают непосредственное участие в жизни предприятия, а за начальную точку будем считать поступление заказа от клиента и те шаги, которые необходимо будет сделать на обрабатывающей стороне.
Создадим на схеме событие – поступление заявки менеджеру, который занимается обслуживанием интернет-магазина, для чего перетянем мышкой значок конверта, символизирующий поступление заявки (входящего сообщения) и контейнера «Задачи», описывающий реакцию на обращение.
Установим связь, поставив для этого стрелку между двумя блоками.
Для удобства использования онлайн-инструмента draw.io, имеется верхняя панель управления, содержащая кнопки отмены действий, масштаба, прокрутки и управления слоями, а также наиболее используемые элементы (опорные точки, стрелки установления связей).
Двойным щелчком левой кнопки мышки отредактируем текст на блоке, переименовав «Task» в «Проверка наличия заказанных товаров на складе». Именно с этого шага, менеджер интернет-магазина должен начинать анализ заказа, так как от него зависит дальнейшие шаги по коммуникации с клиентом.
Логично предположить, что следующим блоком должно быть условие, которое определяет последовательность действий при различных результатах проверки складских остатков.
* Важно помнить, что бизнес-процессы пишутся не для бумаги, а для обычных людей, работников компании. Чем детальнее и подробнее будет произведена проработка, тем меньше ошибок, будет происходить в будущем. От постановки задачи зависит 80% успеха её выполнения.
При наличии товара на складе можно перейти к «Проверке корректности заполненных данных пользователем», при отсутствии к «Уточнению точной даты поставки». Для того, чтобы написать комментарий над каким-либо блоком или стрелкой нужно выбрать вкладку «Общие» и элемент «Text». В рассматриваемом случае это указания направлений «Да/нет».
Разберем отрицательную ветку и нанесем на схему все дальнейшие шаги действий.
Добавятся один вспомогательный блок «Связаться с поставщиком, запросить точные сроки отправки», два основных «Подобрать альтернативные варианты товаров, которые есть в наличии и можно предложить, как замену», «Проверка корректности заполненных данных пользователя» и блок связи с клиентом «Связаться по телефону и обсудить детали доставки». Важно быть заранее подготовленным к любому исходу и потому прорабатывать альтернативы. В нашем случае мы создали бизнес-процесс в сервисе draw.io, связанный с подборкой альтернатив, что поможет удержать клиента в случае его несогласия со сроками доставки. Вспомогательные блоки изображаются в виде пунктира, доступны во вкладке «BPMN Общие».
Если магазин работает над лояльностью своих клиентов, то возможно добавить ещё один блок, связанный с предоставлением персональной скидки на альтернативный товар, в случае если сроки затягиваются по вине интернет-магазина (например, некорректно отобразились остатки товара (на сайте «в наличии», а по факту товар закончился)).
Теперь осталось добавить ещё одно условие: «Клиент согласен на заказ». На данном этапе решается исход всей деятельности, либо заказ переходит в оформление и далее поступает в «Службу снабжения», либо менеджер закрывает заказ, предложив получить оставившему заявку посетителю сайта уведомление о поступлении товара в наличии.
Таким образом, потратив всего 5 минут времени, мы проработали бизнес-процессы в сервисе draw.io, относящиеся к менеджеру по продажам. Аналогичным образом можно составить на отдельных листах схемы для остальных подразделениях, участвующих в деятельности интернет-магазина, а также произвести обобщение всех служб компании в целом.
Чтобы открыть документ в будущем, достаточно просто зайти на сайт сервиса, и, выбрав «Открыть существующую диаграмму», найти сохраненный ранее xml-проект.
Кроме конечных результатов в указанном ранее формате, возможно экспортировать диаграммы и схемы как pdf и html документы, а также в виде картинок и векторной графики (SVG).
С недавнего времени появилась возможность скачать draw.io в виде программы на ПК (работает на операционных системах Windows, MacOs, Chrome OS, Linux), а также установить как мобильное приложение, работающее, как на iOS, так и на Android.
Для данных целей необходимо на панели управления нажать кнопку «Дополнительно» и в раскрывшемся меню выбрать «Скачать».
Представленной в обзоре информации вполне достаточно, чтобы начать работу над своим проектом, вне зависимости от того, к какой отрасли, сфере деятельности или производства он относится, будь-то программирование, администрирование, проектирование, управление, распределение или снабжение и т. п.
При возникновении трудностей, всегда можно ознакомиться с инструкциями и официальной документацией, представленной на сайте онлайн-сервиса.
Diagrams net что это
The offical blog of the diagrams.net project
New features and updates in 2021 in diagrams.net and draw.io
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.
Clear the diagrams.net cache to use the newest build
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 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.
Select shapes and connectors with keyboard shortcuts
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.
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.
Diagram only in selected GitHub repositories
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.
draw.io for Notion Chrome extension
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.
Enhanced security with Google Workplace and se.diagrams.net
Complex diagramming on an online whiteboard
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.
Import diagrams from Lucidchart EDU to diagrams.net
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.
What can you do with shape data in diagrams?
Import diagrams from Gliffy Online to diagrams.net
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.
Edit diagrams directly in GitHub with diagrams.net and github.dev
Use tags in diagrams to select, hide and display related shapes and connectors
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.
Embed diagrams in WordPress as SVG
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.
Using pages as backgrounds
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.
How to use sketch.diagrams.net as an online whiteboard
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.
Plan, design and track projects with diagrams in remote teams
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.
End of support for IE 11
In line with Microsoft’s end of life date of Internet Explorer 11, we will end support for IE 11 on 15th June 2022.
Differences between draw.io for Confluence Cloud and Data Center/Server
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!
An online whiteboard for Confluence with draw.io
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.
draw.io is now an Atlassian Cloud Fortified app
JGraph is pleased to announce that draw.io is the only secure diagramming application to meet Atlassian’s new Cloud Fortified standard.
Export images of diagrams directly from the lightbox viewer
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.
Draw dependency graphs in diagrams.net
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.
Move shapes forwards and backwards on the drawing canvas
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.
Change the drawing canvas grid
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.
Diagramming in a free Confluence Cloud instance
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.
Template diagrams with previews, subcategories and search
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.
Embed Confluence diagrams in Jira Cloud with the draw.io app
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.
Draw freehand shapes and annotate diagrams
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.
New draw.io Board macro for whiteboard-style diagrams in Confluence Cloud
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.
Create a remote kanban board with diagrams.net
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 diagrams in PowerPoint
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.
Join connectors with the waypoint shape
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.
BPMN 2.0 shapes for detailed process flows and choreography models
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.
Choose a different diagrams.net UI theme
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.
Draw and style connectors in diagrams.net
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.
Work with entity relationship table shapes in diagrams.net
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.
Use swimlanes with flowcharts to show who does each step
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.
Use diagrams.net with Google Classroom
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.
Introducing data governance and lockdown configuration options
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.
Advantages of a bring-your-own-storage model
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.
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.
Create an interactive diagram and toggle layers with custom links
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.
Embed diagrams into Notion from diagrams.net
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.
Insert a diagram from specially formatted CSV data
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.
Embed diagrams in Confluence Data Center and Server
Align text labels inside and outside shapes
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.
Rotate shapes, connectors and connector labels
Shapes are placed on the drawing canvas in diagrams.net using a default orientation. You can rotate shapes into another position as you need.
Manage your budget moving to Confluence Cloud
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.
Search for diagrams in Confluence Cloud and Server
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.
How to install and insert a diagram in Confluence Cloud
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.
Automatic layout shapes for flow charts, tree diagrams and mind maps
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.
Collaborative editing in draw.io for Confluence Cloud
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.
Use AWS icons to create a free Amazon architecture diagram
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.
Embed a diagram in GitHub markdown
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.
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.
Maths equations in diagrams
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.
Double click and select a shape to add it
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.
Work faster with the shape libraries using keyboard shortcuts
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.
Support for hand-drawn diagrams with rough.js
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.
Improved table shapes
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.
Work with waypoints on connectors
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.
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.
Create a rack diagram in diagrams.net
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.
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.
Go to diagram.new to create a new diagram
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.
Simple draw.io embedding walk-through
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.
Embedded XML in PNG image files
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.
Export diagrams to PDF files
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.
Use Mermaid syntax to create diagrams
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.
Work with custom shape libraries
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 and infrastructure diagrams
Network diagrams, or infrastructure diagrams, let you understand a computer network quickly.
Use keyboard shortcuts to work faster with styles
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.
Use org charts to categorise data and show hierarchies
Create floorplans and layouts
Open source diagramming is moving to diagrams.net, slowly
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.
Diagrams attached to Jira Server issues are now versioned
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.
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.
How to use diagrams in Google Docs
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.
Insert from text to create tree and entity diagrams
Several features in our diagram editor let you create diagrams automatically from simple text statements.
Work with placeholders in labels and tooltips
Using external or custom fonts in diagrams.net
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.
diagrams.net in many languages = diagramming for everyone
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.
Analysing vulnerabilities with threat modelling using diagrams.net
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.
We are sponsoring FOSDEM 2020
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.
Add multiple pages to your diagrams
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.
Use diagrams.net desktop to diagram offline
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.
Updates to the diagrams.net desktop app
DESKTOP VERSIONS PRE 10.7.5 ARE STRONGLY RECOMMEND TO DOWNLOAD AND INSTALL A NEW DESKTOP BUILD
Secure GitLab support with direct client authorisation
Secure GitHub support via OAuth
Share diagrams via Google public links
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.
Example diagrams are on GitHub
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.
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.
Your diagram data is secure and private
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.
diagrams.net 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.
Several ways to connect shapes
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.
Placeholder labels respect scope
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.
Ctrl+Shift+drag to move an area of your diagram
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.
diagrams.net import formats and sources
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.
Alt+Shift+Select to deselect shapes
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.
Disable resize children to resize grouped shapes individually
Normally, when you resize a group of shapes, all of the shapes are resized proportionally, and maintain their positions in relation to each other.
Export diagrams as SVG images
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.
Snap connectors to an anchor point
Export a diagram to HTML
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.
Publish a diagram as a link from Google Drive
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.
Using the diagrams.net Chrome app
Click to add shapes to the drawing canvas
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.
Export a diagram to a URL
Alt+shift+arrow keys to clone and connect shapes
You can quickly build flow charts, mind maps or tree diagrams using shortcut key combinations.
Diagrams in Google Docs now support high resolution images
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.
Alt+drop to overlay shapes on containers
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.
diagrams.net supports Google shared drives (Team Drives)
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.
Data privacy and Google Analytics
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.
Shift+toolbar delete to delete shapes and their connections
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.