Swap shapes and connectors in draw.io
You can swap shapes on the drawing canvas in draw.io via the Arrange tab of the format panel, or by dropping a new shape from the shape libraries on top of an existing shape. You can also reverse the arrows on a connector easily via the Arrange tab.
Connectors to and from a swapped shape will move with it, staying attached and automatically updating its path.
If you want to swap the direction of the connector as well, select the connector after you swap the shapes, then click Reverse on the Arrange tab of the format panel.
Replace an existing shape with a different shape
Drag a shape from the shape libraries and hover over an existing shape on the drawing canvas until the replace symbol appears, then drop the shape.
Alternatively, double-click on an empty spot on the drawing canvas to open the quick selection box and drag a shape from there over an existing shape, and drop it when the replace symbol appears.
Do more with shapes in draw.io
There are many more ways you can quickly work with shapes in draw.io. Use these FAQs, tutorials and blog posts to learn how to diagram faster and easier.
Use the Arrange tab tools on shapes and connectors — move shapes forwards and backwards, group multiple shapes, resize shapes and groups of shapes, reposition shapes, rotate shapes and groups of shapes, and work with connector waypoints to perfectly path your connectors.
Style shapes using the Style tab in the format panel. The styles that are available will depend on the shapes you have selected.
See how you can modify the shape properties in the Style tab of a selected shape to turn a shape into a container, change the perimeter, disallow connectors, prevent it from being deleted or clones, and much more. Select a shape and click on Properties at the bottom of the style tab.
And finally, print out these draw.io keyboard shortcuts for easy reference.
Отражение или переворот фигуры
Visio, план 2 Visio профессиональный 2021 Visio стандартный 2021 Visio профессиональный 2019 Visio стандартный 2019 Visio профессиональный 2016 Visio стандартный 2016 Visio профессиональный 2013 Visio 2013 Visio премиум 2010 Visio 2010 Visio стандартный 2010 Visio 2007 Visio стандартный 2007 Еще. Меньше
Вы легко можете перевернуть или отразить фигуру.
- Щелкните инструмент Указатель и выполните одно из указанных ниже действий.
- Обведите рамкой выделения все фигуры, которые нужно перевернуть.
- Нажмите и удерживайте клавишу SHIFT, а затем щелкните все фигуры, которые нужно перевернуть.
- На вкладке Главная в группе Упорядочение нажмите Положение, затем выберите Повернуть фигуры и щелкните Отразить сверху вниз или Отразить слева направо.
- Щелкните инструмент Указатель и выполните одно из указанных ниже действий.
- Обведите рамкой выделения все фигуры, которые нужно перевернуть.
- Нажмите и удерживайте клавишу SHIFT, а затем щелкните все фигуры, которые нужно перевернуть.
- В группе Упорядочить в меню Положение наведите указатель на элемент Повернуть/отразить и выберите команду Отразить сверху вниз или Отразить слева направо.
Нужна дополнительная помощь?
Нужны дополнительные параметры?
Изучите преимущества подписки, просмотрите учебные курсы, узнайте, как защитить свое устройство и т. д.
В сообществах можно задавать вопросы и отвечать на них, отправлять отзывы и консультироваться с экспертами разных профилей.
Обзор сервиса draw.io
Работа любого инженера, IT-специалиста, маркетолога, бизнес-аналитика, менеджера связано с необходимостью создания различных диаграмм, блок-схем и графиков. Для данных целей замечательно подойдет сервис «draw», доступный по ссылке.
Его главное достоинство – бесплатность. За пользование ресурсом не взнимается плата, что делает его ещё более приятным. Кроме того, для полноценной работы не нужно проходить регистрацию и проходить нудный процесс авторизации на сайте.
При входе на главную страницу предстоит выбрать путь для сохранения проекта. Конечные результаты можно хранить на удаленном хранилище – «облаках» («Google Drive», «Dropbox», «OneDrive») , на ресурсе «GitHub», на жёстком диске устройства «Device» или непосредственно в среду для управления разработкой веб-приложений и программ «Trello».
По умолчанию, стоит включённой галочка для сохранения выбранных настроек в дальнейшем.
Чтобы упростить задачу по ознакомлению с возможностями онлайн-сервиса, изменим язык интерфейса, нажав на «Language».
После установки необходимого языка, потребуется перезагрузить страницу для того, чтобы изменения вступили в силу.
Теперь перейдем к созданию нового проекта, для чего нажмем на кнопку «Создать новую диаграмму», после чего осуществиться переход к графической части работы.
Можно открыть пустое поле и создать схему самостоятельно или воспользоваться библиотекой различных графических шаблонов. «Диаграммы Исикавы» (она же «рыбий хвост»), «Схемы для описания бизнес-процессов», «Структурные графики», «Блок-схемы», «Электрические схемы», «Программные блоки» — это лишь малая часть того, что уже присутствует в качестве заготовок.
Большой интерес пользователей вызывает возможность описание бизнес-процессов с помощью сервиса draw.io.
Для начала работы выберем «Пустую диаграмму» среди категории шаблонов «Базовый».
В качестве примера опишем основные бизнес-процессы, связанные с работой современного не крупного интернет-магазина.
Для графической части работы нам потребуются разделы «BPMN Общие» и «BPMN Events».
При рассмотрении примера не будем углубляться в узкую специфику продвижения магазина, работу директолога, поискового оптимизатора, контент-менеджера, системного администратора, которые также принимают непосредственное участие в жизни предприятия, а за начальную точку будем считать поступление заказа от клиента и те шаги, которые необходимо будет сделать на обрабатывающей стороне.
Создадим на схеме событие – поступление заявки менеджеру, который занимается обслуживанием интернет-магазина, для чего перетянем мышкой значок конверта, символизирующий поступление заявки (входящего сообщения) и контейнера «Задачи», описывающий реакцию на обращение.
Установим связь, поставив для этого стрелку между двумя блоками.
Для удобства использования онлайн-инструмента draw.io, имеется верхняя панель управления, содержащая кнопки отмены действий, масштаба, прокрутки и управления слоями, а также наиболее используемые элементы (опорные точки, стрелки установления связей).
Двойным щелчком левой кнопки мышки отредактируем текст на блоке, переименовав «Task» в «Проверка наличия заказанных товаров на складе». Именно с этого шага, менеджер интернет-магазина должен начинать анализ заказа, так как от него зависит дальнейшие шаги по коммуникации с клиентом.
Логично предположить, что следующим блоком должно быть условие, которое определяет последовательность действий при различных результатах проверки складских остатков.
* Важно помнить, что бизнес-процессы пишутся не для бумаги, а для обычных людей, работников компании. Чем детальнее и подробнее будет произведена проработка, тем меньше ошибок, будет происходить в будущем. От постановки задачи зависит 80% успеха её выполнения.
При наличии товара на складе можно перейти к «Проверке корректности заполненных данных пользователем», при отсутствии к «Уточнению точной даты поставки». Для того, чтобы написать комментарий над каким-либо блоком или стрелкой нужно выбрать вкладку «Общие» и элемент «Text». В рассматриваемом случае это указания направлений «Да/нет».
Разберем отрицательную ветку и нанесем на схему все дальнейшие шаги действий.
Добавятся один вспомогательный блок «Связаться с поставщиком, запросить точные сроки отправки», два основных «Подобрать альтернативные варианты товаров, которые есть в наличии и можно предложить, как замену», «Проверка корректности заполненных данных пользователя» и блок связи с клиентом «Связаться по телефону и обсудить детали доставки». Важно быть заранее подготовленным к любому исходу и потому прорабатывать альтернативы. В нашем случае мы создали бизнес-процесс в сервисе draw.io, связанный с подборкой альтернатив, что поможет удержать клиента в случае его несогласия со сроками доставки. Вспомогательные блоки изображаются в виде пунктира, доступны во вкладке «BPMN Общие».
Если магазин работает над лояльностью своих клиентов, то возможно добавить ещё один блок, связанный с предоставлением персональной скидки на альтернативный товар, в случае если сроки затягиваются по вине интернет-магазина (например, некорректно отобразились остатки товара (на сайте «в наличии», а по факту товар закончился)).
Теперь осталось добавить ещё одно условие: «Клиент согласен на заказ». На данном этапе решается исход всей деятельности, либо заказ переходит в оформление и далее поступает в «Службу снабжения», либо менеджер закрывает заказ, предложив получить оставившему заявку посетителю сайта уведомление о поступлении товара в наличии.
Таким образом, потратив всего 5 минут времени, мы проработали бизнес-процессы в сервисе draw.io, относящиеся к менеджеру по продажам. Аналогичным образом можно составить на отдельных листах схемы для остальных подразделениях, участвующих в деятельности интернет-магазина, а также произвести обобщение всех служб компании в целом.
Остаётся лишь только сохранить результат, для чего необходимо нажать «Файл» -> «Сохранить». При сохранении на жесткий диск файл просто скачается в формате .xml (по умолчанию в папку «Загрузки»).
Чтобы открыть документ в будущем, достаточно просто зайти на сайт сервиса, и, выбрав «Открыть существующую диаграмму», найти сохраненный ранее xml-проект.
Кроме конечных результатов в указанном ранее формате, возможно экспортировать диаграммы и схемы как pdf и html документы, а также в виде картинок и векторной графики (SVG).
С недавнего времени появилась возможность скачать draw.io в виде программы на ПК (работает на операционных системах Windows, MacOs, Chrome OS, Linux), а также установить как мобильное приложение, работающее, как на iOS, так и на Android.
Для данных целей необходимо на панели управления нажать кнопку «Дополнительно» и в раскрывшемся меню выбрать «Скачать».
Представленной в обзоре информации вполне достаточно, чтобы начать работу над своим проектом, вне зависимости от того, к какой отрасли, сфере деятельности или производства он относится, будь-то программирование, администрирование, проектирование, управление, распределение или снабжение и т. п.
При возникновении трудностей, всегда можно ознакомиться с инструкциями и официальной документацией, представленной на сайте онлайн-сервиса.
Features of draw.io
Our draw.io diagramming applications are the leading solutions for web based sketching and diagramming functionality.
- Keep your diagram data secure
- Diagram wherever you want
- Integrate diagrams with other software
Keep your diagram data secure
All of our draw.io applications and integrations with various platforms, as well as our free online diagram editor at app.diagrams.net do not store your diagram data — draw.io is a unique security-first diagramming tool.
- Set data governance options for fine control over extended features.
- Install our offline desktop app, available on Windows, MacOS and Linux.
Diagram wherever you want
Use whichever cloud platform you prefer to store your diagram files: Google Drive, Microsoft OneDrive, DropBox, GitHub/GitLab, in your browser, or on your device.
No account needed — your diagrams are not locked behind an account.
Integrate diagrams with other software
Store and work with diagrams in Atlassian Confluence and Jira with our draw.io apps, available from the Atlassian Marketplace. External collaborators don’t need to join your instance, they can view and edit diagram files that you share with them using our online editor — no account or diagram format conversion is needed.
Embed diagrams in other applications with our draw.io add-ons:
- Microsoft Office 365 apps and Microsoft Teams
- Google Workplace apps and Google Classroom
- Notion and NextCloud
Plus, many more 3rd-party integrations are available because we are open source.
Advanced: See how to embed the draw.io editor in your own application.
Collaborate in real-time with shared cursors
Multiple editors see changes synchronised in real time using Google Drive or Microsoft OneDrive, DropBox, and draw.io in Confluence.
Everyone collaborating on a diagram can see exactly what everyone else is doing.
Easy-to-use diagram editor
The draw.io apps work just like the office and drawing tools you are used to using.
- Drag and drop shapes from the shape libraries and drag to draw connectors between them.
- Drag connectors to add waypoints and set a precise shape and position, or let them reroute automatically.
- Double click and start typing to add a label to anything.
- Create tables and swimlane flows with a familiar tool.
- Style shapes and connectors with customisable palettes, sketch options, fonts and text formatting tools.
- Search for shapes, including in open-source icon libraries.
- Use our vast libraries of shapes and templates, organised into logical categories, to create a range of diagrams and infographics.
- Generate diagrams from text descriptions using our smart templates.
- Diagram faster with keyboard shortcuts.
Diagram your way: Find your favourite editor theme — a simple online whiteboard, floating tool panels, dark mode, or the standard diagramming software layout. You can also switch the editor to use your language.
Import and export: Drag and drop a file to import a diagram, including many other diagram formats and continue editing. Publish and export to many formats.
Many advanced tools
Many advanced and helpful tools are built into the diagram editor.
- Use the infinite canvas, rulers, customisable grid and positioning guidelines to help you diagram faster.
- Let auto-layouts format flowcharts and tree diagrams for you.
- Organise your diagram with layers and tags. Set shape properties, metadata and placeholders to add translations, tooltips, links, and interactive actions.
- Sketch and comment with freehand shapes.
- Create your own custom shapes and custom shape libraries.
- Format text with HTML and use mathematics typesetting in labels.
- Generate diagrams text using PlantUML or Mermaid code, CSV spreadsheet data and formatting information, or SQL code.
- Customise the editor to set a specific palette, custom fonts, templates, shape libraries, and more.
Tip: If you use draw.io in Confluence, you can mass import all the Gliffy diagrams in your instance in one step.
Create a wide range of diagrams
Our shape libraries let you create whatever type of diagram you need:
- floorplans, org charts, process flows and network infrastructures
- infographics, mindmaps, story maps and timelines
- UML diagrams, kanban boards, entity relationship models and fishbone diagrams
- circuit diagrams, rack diagrams, attack trees and dependency graphs
- … and many more
Browse our example diagram and template gallery for more diagram types.