Как сохранить файл draw io в jpeg

Обновлено: 07.07.2024

Экспортировано из draw.io как SVG

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

Обработано в INSTAD.IO

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

Построено в GoogleSheets, обработано в INSTAD.IO Построено в GoogleSheets, обработано в INSTAD.IO

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

Загружаем готовый векторный SVG-рисунок со схемой, графиком или диаграммой. Его можно нарисовать в draw.io или даже в GoogleSheets.

Заменяем в исходном SVG все примитивы типа <rect>, <circle>, <path> и пр. на <path>, который генерирует roughjs.

Примеряем к надписям рисованные шрифты (мне понравились бесплатные гарнитуры XKCD, Indie, Caveat и Pangolin), после чего подгоняем размеры надписей, чтобы высота и ширина не отличалась от исходных, и при этом надписи читались.

Меняем цвета на приятные, переносим часть стилей и фильтров из оригинального SVG, чтобы диаграмма максимально сохраняла пропорции, позиции элементов и свойства фигур.

Экспортируем в PNG в высоком разрешении или сохраняем обратно в SVG.

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

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

Пришлось повозиться и с рендерингом текста. Так, например, файл, экспортированный из draw.io, сохраняет большую часть данных не в каноническом SVG, а как контейнеры <foreignObject> внутри который <DIV> с обычным 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-графиком или диаграммой). А результат можно скопировать в буфер и затем вставить в документ.

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

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

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

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

Программа Draw io, что это такое

Для работы с Draw io, вам необходимо ее скачать и установить на компьютер. Далее запускаете программу и создаете блок-схему из готовых шаблонов. Эти шаблоны достаточно быстро редактируются – есть удобная панель управления.

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

Как скачать и установить программу Draw io

Чтобы установить утилиту, нажмите по установщику несколько раз левой кнопкой мыши. Далее выберите место сохранения программы и жмите кнопку «Установить».

Когда программа установится, нажимаете кнопку «Готово», после чего она должна запуститься.

Как создавать блок схемы в программе Draw io

Как создать блок схемы? Для этого запускаете установленную выше программу и нажимаете кнопку «Создать новую диаграмму».

Далее выбираете шаблоны схем слева и нажимаете по кнопке «Создать». Также вы можете добавить имя к файлу в разделе «Имя файла».

После чего будет открыт шаблон схемы, который можно отредактировать.

Для этого достаточно нажать два раза левой кнопкой мыши, например, по квадратику и убрать текст с помощью кнопки «Delete» на клавиатуре, затем напишите свой вариант. Если нужно передвинуть стрелку, по ней так же кликаете левой кнопкой мыши и удерживая клавишу мыши, проводите в нужную сторону.

Что касается дополнительных элементов, можно слева выбрать общие символы и перетащить их в поле программы.

Здесь есть квадраты, круг, стрелки, прямоугольник и другие варианты символов.

Как сохранить блок-схему на компьютер

Когда ваша блок-схема будет готова, ее можно сохранить. Для этого кликните кнопку «Файл» в программе, затем «Экспортировать как».

Выбираете справа формат, например, PNG, JPEG, SVG и так далее. Затем еще раз нажмите «Экспортировать». Далее откроется проводник Виндовс, где нужно выбрать место для сохранения блок-схемы и нажмите «Сохранить». На рабочем столе компьютера схема будет под названием – «Диаграмма без названия».

Есть ли сервис у программы Draw io

Сервис вам пригодится, поскольку эта хорошая возможность не устанавливать программу.

Заключение

Сегодня мы рассмотрели, как создавать блок-схемы с помощью программы Draw io. Она позволит вам быстро отредактировать любые варианты схем. Если вы хотите более умную интеллект карту – можете использовать программу Xmind.

Итак, у вас есть длинные лабораторки, которые делаются уже не одну неделю. Каждый день вы что-то добавляте и вам уже достаточно трудно сориентироваться: что и на каком этапе было добавлено, как называются те или иные устройства. Конечно у вас уже есть копия вашего GIT, и часто приходится прыгать между лабами/конфигами и т.п. И вдруг вам надо добавить на похожие хосты похожие куски конфигов, но вы уже подзапутались какое имя было у того верхнего левого роутера или нижнего правого ACCESS свича. Если знакомая ситуация - читайте дальше, Шура.

Для тех кому лень читать - видео на 8 минут под музыку ))

Итак, рассказываю что же тут происходит:

Есть лабораторки по настройке сети в несколько этапов

У каждой лабораторки есть своя папка с конфигами всех устройств

Draw.io, в котором уже нарисована вся схема с указанием интерфейсов, адресов.

Для себя я решил что нужен порядок в названиях устройств, в названиях каталогов, поэтому в каждой из лекций у меня есть обязательно 2 папки pictures и labs, ну и обязательная подпапка configs. Плюсы от такой организации - становятся очевидны, если вы используете какой-то редактор для оформления вашего GIT.

Итак, структура каталогов есть, заготовки под конфиги первой лабы - есть, пришла пора замапить конфиги на конкретную ноду Лабы из 10-й лекции в DRAW.io

Делаем "раз-два-три" по пунктам:

Вызываем соответствующий лист DRAW.io

Переходим на соответствующую ноду

задаем свойства LINK объекта: cтавим галочку "Open in new Window" и задаем линк в виде ссылки на локальную файловую систему в виде: file://E:\Study\GIT\XXXXX-networks\LECTURES\MODULE02\Lecture10\labs\configs\04-R23.txt

Добавление свойства link нужного объекта приведет к тому, что при выделении какого-либо роутера или свича появится ссылка, при клике на которую - откроется сам файл в заранее определенном редакторе. Я не заморачивался, поэтому у меня все открывается в notepad

Рассказать читателям просто о сложном — одна из основных задач журналистики. Если вы рассказываете о новых законах, лучше всего подойдут карточки. Если же ваша задача объяснить какой-то простой алгоритм действий, удобнее всего создать пошаговую инструкцию.

О том, как легко и быстро создать разъясняющую картинку, рассказал Юрий Звягинцев, редактор, издатель, медиатренер из России. До этого эксперт рассказал о создании интерактивных фотографий в сервисе ThingLink. «Новый репортёр» собрал гайд по созданию пошаговых инструкций в бесплатном сервисе Draw.io.

Почему стоит развивать этот формат

Реальная польза для читателя. Мы действительно помогаем разобраться в каком-то сложном вопросе.
Формирует лояльностью аудитории. Люди лояльны к нам, мы лояльны к нашим читателям.
Долгоиграющий формат. Особенно если вы придумали хороший, правильный заголовок, который будет соответствовать поисковому запросу.
Хорошо индексируется.
Возможность брендирования.
Вирусный эффект.

Для сложных алгоритмов формат не подходит. Например, вы можете рассказать, как подать налоговую декларацию, но не сможете рассказать, как подать в суд на компанию. Если это простой пошаговый алгоритм — делаем. Если вариативный — не делаем.

Несколько важных правил

Пример удачной пошаговой инструкции из презентации Юрия Звягинцева

Тема должна быть важной и актуальной, не нужно делать пошаговые инструкции на то, как самому забить гвоздь, на очевидные вещи.
Инструкция должна реально помочь решить проблему.
Инструкция должна быть максимально понятной. Минимум сложной лексики.
Используем минимально возможный объём текста.
Дизайн инструкции должен вписываться в дизайн СМИ.
В идеале стиль и дизайн должны соответствовать теме.
Проведите фактчекинг и проверьте актуальность данных.
Обязательно укажите источник и дайте ссылку.

Распространённые ошибки

Пример неудачной инструкции из презентации Юрия Звягинцева. Вопросы появляются уже с первого пункта: где выбрать свой регион?

Неконкретные или вариативные рекомендации. Например, «отнесите пакет документов в органы власти». Какой пакет? В какие органы?
В алгоритме действий пропущены важные шаги. То, что очевидно для вас, не всегда очевидно для ваших читателей.
В простой формат упакованы сложные алгоритмы.
Автор пытается впихнуть невпихуемое.
Много лишних элементов и украшательства.
На последнем шаге цель не достигнута.

Создаём пошаговую инструкцию в сервисе Draw.io

Интересные и эффективные мультимедийные форматы можно делать без дизайнера.

Читайте также: