Баннер мобильный (3) Пройти тест

Draw.io, или рисование схем без регистрации и sms

Удобный и бесплатный сервис для создания диаграмм

Инструменты

29 мая 2024

Поделиться

Скопировано
Draw.io, или рисование схем без регистрации и sms

Содержание

    Графики, диаграммы, блок-схемы — неотъемлемая часть работы в IT. Нужно спроектировать архитектуру приложения или смоделировать рабочий процесс — нарисуем блок-схему, нужно наглядно представить результаты для отчета — нарисуем диаграмму. К счастью, уже давно не нужно делать это от руки в блокноте: существует удобный сервис-помощник Draw.io. Рассказываем, как он работает.

    Что такое Draw.io

    Draw.io — это бесплатный онлайн-сервис, который позволяет создавать и совместно редактировать диаграммы, различные схемы и прочие визуальные представления данных. Он работает в браузере, поэтому доступен с любого устройства, нужен только интернет. 

    Так выглядит Draw.io
    Интерфейс Draw.io Источник

    Чаще всего Draw.io используют для построения диаграмм: буквально за несколько минут пользователь может создать диаграмму любого типа и наглядно представить информацию. В какой-то момент сервис даже переименовали из draw.io в diagrams.net, но старое и привычное название все равно встречается часто.

    В чем преимущества Draw.io

    • Бесплатно: никаких «pro» и «premium» — просто заходите на сайт, выбираете, куда сохранить ваш проект, и начинаете рисовать — все функции доступны сразу.
    • Просто: чтобы воспользоваться сервисом, не нужно быть дизайнером или иметь специальные навыки. Draw.io интуитивно понятен, имеет качественный и продуманный UX.
    • Можно использовать по-разному: зайти на сайт, добавить расширение в браузер Chrome или установить приложение.
    • Подходит для команд: можно редактировать блок-схемы и диаграммы одновременно с коллегами. Для этого нужно сохранить проект и нажать на кнопку «Общий доступ». Также, если необходимо, сервис можно интегрировать с другими популярными рабочими инструментами — Jira и Confluence, но настройка потребует некоторых финансовых вложений.
    • Разнообразно и быстро: в сервисе есть множество готовых элементов, шаблонов, заготовок, которые упростят вам создание визуализаций. Пользователям доступны более 500 вариантов 2D- и 3D-объектов, также есть возможность экспорта изображений и объектов извне в различных форматах.
    • Можно интегрировать с сервисами Google: диском, документами, таблицами, презентациями. Например, без лишних сложностей можно встраивать объекты из сервиса Draw.io в презентацию в онлайн-редакторе.

    Но у сервиса есть и недостатки

    • Общий доступ возможен только для файлов, сохраненных на Google Диске и OneDrive.
    • Если вы работаете с редактором Microsoft Word, то автоматически экспортировать проект в него не удастся.
    • Пользователи отмечают периодические сбои в desktop-версии сервиса, поэтому проект стоит почаще сохранять.
    • Небольшая путаница с элементами: например, есть элементы, в которые по умолчанию можно добавлять текст и он становится частью объекта, а есть отдельный элемент «Текст». При редактировании и перетаскивании с непривычки можно не понять, с чем именно вы имеете дело.

    У Draw.io достаточно аналогов: это и сервис Miro, LucidChart, Visio от Microsoft. Но все чаще разработчики и бизнес-аналитики выбирают именно Draw.io, потому что это быстро, просто и бесплатно.

    Как работать с Draw.io

    Очень просто!

    1. Перейдите на сайт.

    2. Нажмите кнопку «Создать новую диаграмму» или «Открыть существующую диаграмму», если уже работали с сервисом и хотите отредактировать старый проект.

    Создание новой диаграммы
    Создание новой диаграммы. Источник: автор статьи

    3. Перетащите фигуры из библиотеки в рабочее пространство, расположите их в нужной комбинации, соедините линиями и стрелками.

    Выбор фигур
    Выбор фигур. Источник: автор статьи

    4. Добавьте текст, изображения и другие элементы, чтобы создать информативную и наглядную диаграмму или блок-схему.

    5. Сохраните свой проект в облаке или экспортируйте его в выбранный формат: PNG, JPEG, WebP, SVG, PDF, HTML, XML.

    Сохранение диаграммы drawio
    Сохранение диаграммы. Источник: автор статьи

    Какие инструменты есть в Draw.io

    В веб-сервисе Draw.io три основных рабочих области. Слева расположены наборы компонентов — геометрических фигур, стрелок, специальных символов, которые нужны для построения блок-схем и различных диаграмм. Они сгруппированы в восемь разделов-списков. Чтобы просмотреть каждый из них, нажмите на название — все элементы откроются. Можно создать собственный список, добавляя наиболее часто используемые элементы в «Избранное». 

    Всего в сервисе более 500 самых разных объектов — хватит для решения множества задач. С помощью кнопки «Больше фигур», расположенной под списками, можно выбрать дополнительные специализированные наборы объектов и использовать их в своем проекте.

    Также в сервисе есть большое количество заготовок и шаблонов — выбрать их можно при создании нового проекта: откроется окно с иконками разных типов диаграмм. Это существенно ускоряет и упрощает создание визуального контента. Например, если вы выбираете UML-диаграмму, то у вас сразу будет «под рукой» весь набор инструментов для создания проекта на этом графическом языке.

    Виды UML диаграмм
    Типы UML диаграмм. Источник

    В центре находится основное поле — сюда нужно перенести необходимые элементы, чтобы составить из них комбинации. Справа располагаются инструменты для редактирования объектов, которые уже находятся в рабочем поле, и самого поля — цвета, ориентации и других параметров. А сверху — меню и основная панель инструментов. Например, открыв раздел «Дополнительно» можно изменить внешний вид редактора или выбрать тему — темную или светлую, а в разделе «Вид» — управлять отображаемыми панелями инструментов.

    Проект в Draw.io может состоять из нескольких листов, переключение между ними происходит с помощью кнопок в нижнем левом углу экрана. Это удобно для сложных рабочих задач, взаимосвязанных бизнес-процессов.

    Какие проекты можно создавать в Draw.io

    Графики, макеты, диаграммы, любая инфографика и многое другое — функционал сервиса широк и позволяет создавать визуальные материалы для разных бизнес-целей. Вот несколько примеров.

    Визуализация бизнес-процессов

    Визуализация процесса найма
    Визуализация процесса найма в Draw.io Источник

    Бизнес-процессы — это строгие алгоритмы действий сотрудников, которые приводят к созданию ценного для клиента продукта. В каждой компании существует множество рабочих задач, которые решаются по определенной схеме, многие из них взаимосвязаны друг с другом. Чтобы навести порядок в работе организации, все это стоит четко описать и формализовать. И здесь поможет Draw.io: в нем удобно создавать схемы, выстраивать логику процесса, последовательность действий, редактировать их вместе с командой.

    Работа над архитектурой веб-сервисов и мобильных приложений

    Схема инфраструктуры в Draw.io
    Схема облачной инфраструктуры в Draw.io. Источник

    Draw.io отлично подходит для создания технических заданий, например когда аналитик готовит задачу для разработчика. В Draw.io можно выделять основной функционал, простраивать иерархию, отображать связи между элементами. Можно составить полноценный макет будущего IT-решения, а также дать доступ заказчику, project-менеджеру и другим участникам для совместного редактирования.

    Создание прототипов

    Визуализация приложения в Draw.io
    Визуализация мобильного приложения в Draw.io Источник

    Да, сервис Draw.io в этом не так эффективен, как Figma или другие инструменты профессиональных UX/UI-дизайнеров, но в нем можно создавать черновики, отталкиваясь от необходимого функционала будущего сайта. Для этого в сервисе есть разнообразные значки, иконки, ползунки.

    Создание диаграмм Ганта

    Диаграмма Ганта Draw.io
    Диаграмма Ганта в Draw.io Источник

    Диаграммы Ганта — удобный инструмент для управления проектами. В такой диаграмме отображается прогресс выполнения задач с течением времени. Она также может включать исполнителей, даты начала и завершения отдельных подзадач, связи между рабочими процессами, контрольные точки. 

    Выглядит это как разноцветные горизонтальные полосы, расположенные в пространстве с двумя осями, и немного напоминает таблицу. Draw.io позволяет создавать такие диаграммы и вносить изменения по ходу выполнения задач — для этого можно дать доступы всем ответственным сотрудникам.

    Создание UML-диаграмм

    Пример UML-диаграммы
    Пример UML-диаграммы. Источник

    UML, или Unified Modeling Language — унифицированный язык моделирования. Он един для всего мира, и поэтому диаграмма или схема, созданные с его помощью, будут понятны любому человеку, который знает его. В UML каждый символ, геометрическая фигура, стрелка или комбинация этих объектов имеет строго определенное значение. И в Draw.io есть все необходимые компоненты для создания такой схемы.

    Mindmap

    Ментальная карта
    Ментальная карта в Draw.io Источник

    Майндмэп, или ментальная карта — способ визуального представления и упорядочивания информации, который помогает установить связи между разными частями данных и найти решение задачи. Часто такая карта — результат командного мозгового штурма, когда все сотрудники «накидывают» свои мысли, варианты решения задачи, а потом вместе анализируют. Draw.io позволяет нескольким сотрудникам одновременно редактировать проект онлайн, добавлять элементы, подписи — а значит, отлично подходит для брейншторминга и создания интеллект-карт.

    Проектирование интерьера

    Пример планировки
    Пример планировки, созданной в Draw.io Источник

    И такое возможно! В сервисе Draw.io можно выстроить планировку помещения, размещение мебели и разрешить клиенту оставить комментарии онлайн. Поэтому сервис имеет популярность среди дизайнеров интерьеров.

    И это далеко не все варианты использования Draw.io. Широкий функционал и гибкость продукта позволяют применять его для решения самых разных задач — все зависит только от фантазии пользователя и его потребностей.

    Подведем итог

    Несмотря на большое количество аналогов, сервис Draw.io собрал большую аудиторию пользователей — его любят за бесплатный доступ и просту использования. Чтобы строить схемы, рисовать диаграммы и визуализировать данные в этой программе, не нужно никаких специальных навыков: все понятно без дополнительных инструкций.

    Но на просторах интернета их достаточно, чтобы точно разобраться во всех тонкостях и сделать крутой проект!

    Сервисом пользуются разные специалисты в IT-сфере и не только, например:

    • разработчики;
    • дизайнеры, в том числе интерьеров;
    • аналитики, бизнес-аналитики;
    • менеджеры.

    Также Draw.io используют студенты: благодаря совместному доступу он очень удобен для создания групповых проектов, брейншторминга, выполнения различных заданий.

    Если вам нужен надежный помощник для визуализации любой информации, можно  выбрать Draw.io. Вы получите инструмент, с которым можно за короткое время создать майндмэп, блок-схему приложения, визуализацию структуры сайта, диаграмму для презентации или UML-диаграмму для управления процессами. Проекты можно сохранять в облако или на жесткий диск устройства. Импортировать готовую диаграмму или схему можно в PNG, SVG, PDF и другие форматы.

    Полезные ссылки

    Инструменты

    Поделиться

    Скопировано
    0 комментариев
    Комментарии