Draw io как пользоваться

Как я «напрограммировал» себе скилл рисования диаграмм в скетч-стиле

По работе мне часто приходится рисовать разные схемы, диаграммы процессов и графики, в том числе и те, которые потом используются в качестве иллюстраций для сайта, статей и презентаций. Диаграммы я привык рисовать в app.diagrams.net (бывший draw.io), а графики — в datawrapper.de. Всё бы ничего, но есть у диаграмм, сделанных в draw.io, lucidcharts или visio и графиков, построенных в аналитических сервисах одна беда — они выглядят как-то слишком уныло и «олдскульно», в духе «90-х».

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

Сначала я пробовал перерисовывать диаграммы руками на листе бумаги и сканировать, потом пытался отрисовывать их в векторном редакторе, используя разные кисти. Наконец, экспериментировал со стилусом на планшете — во всех случаях получалась какая-то непотребщина, на которую ещё и уходило много времени. Благо, программирую я чуть лучше, чем рисую — то даёт шанс компенсировать недостаток одного навыка другим. Так у меня возникла идея создания инструмента для отрисовки диаграмм и графиков в стиле «нарисовано от руки».

Поскольку в стеке технологий у меня в основном javascript и php, я начал смотреть, какие есть библиотеки для рендеринга скетчей. Вариантов оказалось немного — выбор пал на крутую библиотеку roughjs, которая как раз умела генерировать графические примитивы (от прямоугольников до кривых) в нужном «рисованном» стиле и была написана на JS. Если в ней хорошенько покрутить параметры, можно было получить достойный результат. Оставалось только придумать, где брать исходный материал для отрисовки, потому что каждый график или UML-диаграмму рисовать на JS непрактично. Нужен был какой-то векторный редактор для генерирования диаграм. Изобретать diagrams.net и datawrapper.de не хотелось, поэтому решил стилизовать готовое SVG-изображение, сгенерированное в любом из этих сервисов. То есть нужно было парсить SVG с графиком или диаграммой и конвертировать каждый примитив (, , , , …) или путь () в аналогичный, но сгенерированный уже библиотекой roughjs. Так от идеи инструмента для генерации рисованных диаграм я пришёл к сервису стилизации векторных изображений.

В итоге придумалась следующая схема:

• Загружаем готовый векторный SVG-рисунок со схемой, графиком или диаграммой. Его можно нарисовать в draw.io или даже в GoogleSheets.
• Заменяем в исходном SVG все примитивы типа , , и пр. на , который генерирует roughjs.
• Примеряем к надписям рисованные шрифты (мне понравились бесплатные гарнитуры XKCD, Indie, Caveat и Pangolin), после чего подгоняем размеры надписей, чтобы высота и ширина не отличалась от исходных, и при этом надписи читались.
• Меняем цвета на приятные, переносим часть стилей и фильтров из оригинального SVG, чтобы диаграмма максимально сохраняла пропорции, позиции элементов и свойства фигур.
• Экспортируем в PNG в высоком разрешении или сохраняем обратно в SVG.
• .
• Профит.

Вернее, профита с ней не получилось, так как для сервиса найти product-market fit пока не удалось. Как говорится, «все пробуют, хвалят, но замуж не берут».

Но вернёмся к технической стороне вопроса. Несмотря на очевидность и простоту подхода, пришлось решить достаточно много технических нюансов. Например, учесть то, что SVG — это достаточно вольный формат, который позволяет один и тот же прямоугольник нарисовать десятком разных способов. Иногда попадались SVG-изображения, где прямоугольник — это классический с атрибутами fill и stroke. В других — с CSS-стилями. А в каких-то случаях это вообще с фильтрами. Всё это пришлось учитывать при отрисовке: парсить стили, фильтры, атрибуты и некоторые добавлять после конвертации в roughjs .

Пришлось повозиться и с рендерингом текста. Так, например, файл, экспортированный из draw.io, сохраняет большую часть данных не в каноническом SVG, а как контейнеры внутри который с обычным HTML-кодом. А там всё в кучу:

Ещё оказалось непросто поддерживать правильные цвета контура и заливки для фигур, поскольку они не всегда заданы SVG-атрибутами fill / stroke внутри примитива. Иногда цвета наследуются от родительского элемента, иногда объявлены в локальном стиле через style, а иногда — в глобальном стиле или даже в фильтре. Одним словом — бардак ).

Отдельная беда была с производительностью и потреблением памяти. Когда конвертируется график с 30 примитивами — всё работает шустро и незаметно. А вот векторизованное растровое изображение с 10K+ объектами или дашборд из Tableau, сохранённый в PDF, страшно тормозил. Но тут, конечно, всё зависело от производительности компьютера, потому что рендерится оно в браузере на клиенте (привет пользователям новых маков на M1 Max, у которых всё быстро). Первую версию SVG-конвертера я сделал на jQuery, но потом переписал на обычном js и оно стало работать в 2.5 раз быстрее и потреблять процентов на 70 меньше памяти. Такая вот плата за удобство.

После некоторого периода тестирования стало понятно, что не во всех редакторах диаграмм и генерилках графиков есть экспорт в SVG. Или есть, но с побочными эффектами. Например, при сохранении графиков из GoogleSheets в SVG текст переводится в кривые. В этом случае надпись становится картинкой и её уже не поменять. Но том же GoogleSheets можно сохранить график в PDF, где надписи остаются без изменений. Поэтому пришлось прикрутить загрузку других форматов (PDF, EPS) – cпасибо консольному inkscape за возможность конвертации векторных форматов.

Постепенно сервис обрастал всякими фичами, наподобие работы с буфером обмена: можно скопировать в буфер код SVG и вставить его в сервис для рестайлинга (это особенно удобно, если копируете непосредственно со страницы с SVG-графиком или диаграммой). А результат можно скопировать в буфер и затем вставить в документ.

Кроме векторных графиков и диаграмм неплохо получаются рисованные карты и схемы:

В одной из последних версий я даже решил добавить цветной трейсер растровых изображений, чтобы любой JPEG или PNG можно было сконвертировать в векторный SVG и затем применить к нему «скетч-эффект». Готового векторизатора не было (potrace не в счёт), поэтому пришлось написать свой. Но как оказалось, для качественной векторизации нужно трейсить изображение в высоком разрешении, примерно 12000×12000 пикселей (предварительно изображение апскейлится с помощью нейронки). То есть нужны мощные сервера с GPU — на стандартном 8-ядерном железе даже небольшая растровая картинка 2000×2000 векторизуется минуты две (а пользователи не любят ждать). Поэтому в некотором обрезанном виде я оставил векторизатор в сервисе, но никому про него не рассказываю, чтобы не позориться.

Большая часть сервиса сделана на самом обыкновенном Vanilla JS, UI — на Bootstrap + jQuery. Небольшая серверная часть — на PHP. Всё крутится в докере. Для авторизации без регистраций прикрутил Google и Facebook.

Напоследок проиллюстрирую работу сервиса на Хабра-схеме модерации постов из справочного раздела про «Песочницу»:

Сервис INSTAD.IO бесплатный, потестировать его можно здесь. Будет здорово, если вы тоже найдёте ему применение при решении своих повседневных графических задач. За информацию о багах также буду премного благодарен!

Читайте также мой предыдущий пост про историю разработки аналитического сервиса TABLUM.IO.

Draw.io

Draw.io — инструмент для создания диаграмм, блок-схем, интеллект-карт, бизнес-макетов, отношений сущностей, программных блоков и другого. Сервис распространяется на бесплатной основе с открытым исходным кодом. Draw.io обладает богатым набором функций для визуализации большинства задач пользователя.

При входе на сервис пользователь сразу попадает в рабочий интерфейс. У пользователя нет возможности для авторизации или регистрации, есть только опция выбора места для экспорта проекта. Процесс создания проекта выглядит следующим образом: пользователь перетаскивает из левой панели фигуры или элементы на рабочую поверхность, затем изменяет их — изменяет цвет, размер, шрифт текста, свойства фигуры (прозрачность, форма и т. д.). Draw.io позволяет отслеживать и восстанавливать изменения готовых проектов, импортировать и экспортировать в PDF, PNG, XML, VSDX, HTML, а также автоматически публиковать и делиться работами.

Инструмент работает с Google Диск, Google Workspace и Dropbox, глубоко интегрирован и удобен для работы с продуктами Confluence и Jira от Atlassian. Пользователи также могут работать с диаграммами в автономном режиме и сохранять их локально, используя настольное приложение для персональных компьютеров.

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

Особенности Draw.io:

• Более 500 шаблонов элементов и фигур;
• Облегчённый интерфейс, в котором за короткий промежуток времени можно создать готовый проект;
• Поддержка горячих клавиш, задействованных в большинстве графических редакторов;
• Экспорт в форматы: JPG, PNG, SVG, VDSX;
• Возможность совместной работы;
• Наличие различных фоновых тем;
• Мультиязычный интерфейс.

Интересные факты

1. Drаw.io декларирует идею, что неправильно хранить данные пользователей и ежемесячно взимать плату за доступ к ним. Вместо этого принципы сервиса — бесплатный и свободный доступ к диаграммам, и отсутствие привязки к экосистемам.
2. Пользователи могут работать с диаграммами в автономном режиме и сохранять их локально, используя настольное приложение для MacOS, Windows и Linux.
3. Удобно сохранять файл в удалённом git-репозитории, что позволяет дать доступ к файлу другим пользователям.
4. Существует игра с названием «Draw.io». Игра была выпущена 29 июля 2018 года компанией Voodoo. По данным аналитики Sensor Tower, на долю Voodoo приходится 24,7 % загрузок мобильных игр в США. За 2020 игры Voodoo скачали млрд раз.
5. В основе инструмента — библиотека mxGraph для работы с векторной графикой. Ёе исходный код есть на GitHub. В примерах использования даже имеется интерфейс Draw.io.

Рекомендуем Мы автоматически подобрали сервисы, которые понравятся вам и сделают вас продуктивнее.
Отмечайте сервисы как используемые, чтобы улучшить рекомендации.

Calltouch

Платформа омниканального маркетинга для привлечения, конверсии и анализа клиентов.

4,4

Использую Отметьте, если используете. Это улучшит ваши персональные рекомендации.

Актуальная информация

Adesk

Сервис финансовой аналитики и управленческого учёта для бизнеса. Помогает найти точки роста и больше зарабатывать.

4,9

Использую Отметьте, если используете. Это улучшит ваши персональные рекомендации.

Актуальная информация

ПланФикс

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

5,0

Использую Отметьте, если используете. Это улучшит ваши персональные рекомендации.

FitBase

Облачный сервис для автоматизации фитнес-клуба или спортивной студии. Решение «всё в одном»: CRM со встроенными воронками и автоматическими задачами, система учёта, виджет онлайн-записи, мобильное приложение для клиентов и приложение для тренеров, система лояльности с элементами геймификации

4,8

Использую Отметьте, если используете. Это улучшит ваши персональные рекомендации.

Контакты Draw.io

Сайт: https://www.draw.io/
Email: support@draw.io
Основан в 2000 г.
Находится в Великобритании

Сервисы, с которыми у Draw.io есть интеграция

Google Диск GitHub Google Документы Jira Confluence

Цены на Draw.io

Пробный период
Бесплатный тариф
Способ оплаты: По подписке
Сервис бесплатен. Платные лишь дополнения к некоторым другим службам.

Возможности Draw.io

Платформы: Веб-приложение Приложение Windows Приложение Mac Приложение Linux
Развёртывание: Облако
Доступные языки: Русский, English, Украинский
Доступ по протоколу
Многофакторная
Резервное копирование в нескольких
Входит в Единый реестр российских

Безопасность и конфиденциальность

Доступ по протоколу
Многофакторная
Резервное копирование в нескольких

Законодательство

Входит в Единый реестр российских

Схемы и диаграммы

Журнал изменений
Совместная работа
Настройка доступа
Импорт / экспорт
Код для встраивания на сайт
Создание презентаций
Вложения файлов
Максимальное число пользователей: Неограниченно

Отзыв на Draw.io

Рекомендую
Внешний вид
Функциональность

Плюсы

Готовые элементы для рисования диаграмм помогают сэкономить кучу времени, которое пришлось бы затратить на отрисовку их вручную.

WYSIWYG интерфейс: нашёл нужный элемент в списке, перетащил на лист, нашёл другой, соединил стрелочкой, подписал, и вуаля!

Минусы

Некоторые элементы блок-схем расположены не в своей категории (как минимум для некоторых UML-диаграмм нужны формы, за которыми приходится лезть в General)

Есть некоторая путаница с элементами, в которых можно писать текст, а также стрелочками (подробнее в комментарии)

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

Например, есть элементы, в которых можно писать текст (такие как Process из General). При выделении и перетаскивании таких элементов текст тоже перетаскивается, и всё прекрасно. Но есть и элемент Text, который можно писать где угодно, в том числе и внутри элемента. И если не знать заранее, что можно (и нужно!) писать текст непосредственно в Process, то можно по незнанию попытаться наложить Text на Process. И выглядеть оно будет точно так же, как и Process со своим текстом, и всё вроде как прекрасно. Но — только до того момента, пока не понадобится перетащить Process, после чего новичок с удивлением обнаруживает, что Process перетащился, а Text нет. Ему придётся выделить и Process, и Text, а не только Process, как было бы, если бы он воспользовался встроенным в элемент текстом.

И со стрелочками абсолютно точно такая же ловушка — есть отдельные, вроде Directional Connector, а есть встроенные в сами элементы (тот же Process). И если не знать, что можно просто поставить на лист, условно, два Process и от одного к другому протянуть его же родную, встроенную стрелочку — то можно добавить между ними внешний Directional Connector, с которым придётся сильно повозится при перетаскивании.

Но за исключением этой путаницы (которой легко можно избежать, если знать о ней заранее), в Draw.io всё здорово, рекомендую его всем, у кого возникла задача нарисовать диаграмму. Надеюсь, мои комментарии про стрелочки и текст помогут другим новичкам не наступать на эти грабли. 🙂

Редактор блок-схем draw.io

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

Начало работы

Для начала работы достаточно вбить в браузере адрес: https://draw.io/ в результате чего откроется небольшой диалог с предложением создать новый чертеж либо открыть существующий. Как видим никакой регистрации не требуется. Кстати здесь же можно сразу выбрать язык в нижнем правом углу. После выбора «Create Diagram», откроется еще одно окошко, где надо выбрать тип диаграммы: Здесь можно оставить все по умолчанию и нажать Create после чего открывается окно редактора где можно непосредственно строить диаграммы. На панели слева представлена палитра диаграмм используемых в настоящее время. Если мы говорим программирование, то наверное наиболее часто будут использоваться разделы General и UML. Но по умолчанию представлен далеко не полный перечень доступных разделов. Чтобы настроить палитру с диаграммами под себя можно воспользоваться кнопкой More Shapes расположенной в нижнем правом углу. После чего откроется перечень всех доступных наборов диаграмм. Можно даже нарисовать планировку квартиры. Для построения схем можно использовать несколько листов. Принцип такой же как при работе с листами Excel.

Рисуем блок-схему

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

Сохраняем результаты работы

В процессе работы можно сохранять плоды своего труда в файл в формате xml. Соответственно при начале работы можно загружать ранее сохраненные схемы. Также можно экспортировать схемы в другие популярные форматы файлов. В том числе в .jpg и .pdf.

Установка на компьютер

Если по каким то причинам вам не нравится работать в браузере вы можете установить редактор локально на свой компьютер скачав дистрибутив с сайта. Хотя работа практически ничем не будет отличаться от работы в браузере.

Интеграция с другими приложениями

Огромным плюсом draw.io является возможность интеграции схем нарисованных в ней с такими известными продуктами компании Atlassian как Confluence и Jira. Проще говоря можно непосредственно в документах Jira и Confluence рисовать схемы с использованием draw.io.

Пишу диаграммы последовательностей текстом (кодом). Вы тоже можете

Как и многие, я использую визуальные инструменты для создания диаграмм последовательностей: Visio и Draw.io. С их помощью можно составлять схемы из различных готовых фигур. Именно при таком подходе процесс внесения правок может быть болезненным. Особенно для перфекционистов, которым важно чтобы все на схеме было ровненько до пикселя.

К счастью, я нашел для себя способ, при котором все элементы схемы стоят идеально ровно, а внесение исправлений занимает минимальное количество времени. Теперь я не рисую sequence diagram, а пишу кодом. Это легко, быстро и удобно.

• Процессы взаимодействия систем описываются текстом, а аккуратная картинка (диаграмма) отрисовывается сама.
• Правки вносятся также, как и в любой текст – посредством добавления нужного количества строк. На изображении всё само двигается, подставляется в нужных местах и опять аккуратно выглядит.

• Исходники хранятся в виде текстовых файлов которые, по сравнению с картинками, почти ничего не весят. Вы можете подключить Git репозиторий к проекту и хранить там все обновления. Картинка нужной версии диаграммы формируется автоматически из кода за несколько секунд запуском одной команды.

Выглядит как магия. Жаль, что я раньше так не умел.

Недостатки описания диаграмм кодом

Есть свои сложности у этого подхода. Не напрасно визуальный способ создания диаграмм последовательностей так широко распространен. У него низкий порог входа. Просто берешь и делаешь. Проблемы начинаются позже – в процессе использования.

При описании диаграмм кодом все наоборот – сначала немного нужно потрудиться, чтобы потом полегче жилось.

1. Для того, чтобы писать диаграмму кодом необходимо выучить (или знать где подсмотреть) синтаксис описания схемы. Он простой и логичный. Запоминается быстро. Но поначалу может быть сложно.

1. Процесс локальной установки расширения PlantUML неочевиден. Мне пришлось “потанцевать с бубном” некоторое время. Инструкцию прилагаю.

Где писать диаграммы кодом?

В качестве инструмента для создания диаграмм последовательностей кодом я выбрал PlantUML.

Можно использовать онлайн версии данного ПО, представленные на разных площадках:

• https://www.planttext.com/
• https://plantuml-editor.kkeisuke.dev/
• http://www.plantuml.com/plantuml/uml/SyfFKj2rKt3CoKnELR1Io4ZDoSa70000

Можно установить PlantUML локально на свой компьютер.

Как установить PlantUML локально на Mac OS

Я использую связку Visual Studio Code + расширение к нему PlantUML на операционной системе Mac OS (процессор intel).

Для достижения желаемого нужно:

1. Установить редактор Visual Studio Code.
   Просто скачайте VS Code для своей операционной системы, запустите установку, следуйте инструкциям системы.
2. Установить расширение PlantUML для VS Code.
   • Перейдите на вкладку “Расширения” в VS Code
   • В строке поиска найдите PlantUML (автор jebbs)
   • Выбрав расширение нажмите “Установить”

P.S. Пишут, что PlantUML можно установить прописав команду в терминале VS Code ”ext install plantuml”, но я не пробовал 🙂

Также рекомендую установить языковой пакет для русского “Russian Language Pack for Visual Studio Code” от Microsoft.

1. Чтобы PlantUML корректно работал, дополнительно нужно установить:
   • Java
   • Graphviz

Переходим на официальный сайт и устанавливаем Java.
Проблем возникнуть не должно (скачиваете установщик и запускаете процесс).

Для установки Graphviz придется немного постараться.

На официальном сайте Graphviz написано, что для установки на Mac нужно запустить в терминале VS Code команду “sudo port install graphviz”, НО.. команда не сработает, потому что не установлен “пакет” для использования “port” для вашей ОС.

Погуглив “How to Install graphviz on Mac OS” нашел решение.

1. Чтобы решить проблему, возникшую на третьем шаге, необходимо перейти на сайт macports.org и скачать установщик для своей версии операционной системы. Запустить установку. После того, как процесс завершиться удачно можно вернуться к тому, что не удалось на предыдущем этапе. Для этого потребуется в терминале VS Code запустить команду “sudo port install graphviz” и дожидаемся окончания процесса. Он займет несколько минут.

Всё. Установка завершена. Как теперь этим пользоваться?

Как создавать, изменять и сохранять диаграммы в PlantUML

Создание диаграммы последовательностей

Создаем новую папку для проекта.

Создаем новый файл в одном из рекомендуемых расширений *.wsd, *.pu, *.puml, *.plantuml, *.iuml (я использую для наглядности *.plantuml).

Пишем свою первую схему в локальном редакторе:

@startuml test_name autonumber actor Client participant UI participant Back activate Client Client -> UI: Запрос 1 activate UI UI -> Back: Запрос от клиента activate Back Back -> Back: Думает UI 

@startuml test_name autonumber actor Client participant UI participant Back activate Client Client -> UI: Запрос 1 activate UI UI -> Back: Запрос от клиента activate Back note right of UI: важное пояснение Back -> Back: Думает UI