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

https://github.com/jgraph/docker-drawio

Запускаем его у себя и пользуемся локально:

docker run -it --rm --name="draw" \
-p 8080:8080 -p 8443:8443 jgraph/drawio

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

Если нет большой нужды, то постоянно держать контейнер запущенным не обязательно. Можно останавливать или прибивать после того, как всё нарисуешь.

Надо будет отдельную рубрику завести под софт для рисования схем. Есть большой простор для творчества и выбора инструментов. Вы где схемы рисуете? Я, как уже сказал, в основном в Draw.io, раньше в Dia рисовал.

#схемы

​​На днях нужно было нарисовать схему небольшой сети. Решил по этому поводу составить список продуктов, где это можно сделать. Не разбирал ни разу подробно эту тему.

🔹Dia - бесплатная open source кроссплатформенная программа. Не отличается особыми красивостями, зато удобная и наглядная. Нарисовать на ней любую схему не занимает много времени. За счёт того, что она кроссплатформенная, удобно пользоваться разным людям с разными системами. Линуксоиды спокойно работают с одними и те ми же схемами с виндузятниками. К сожалению, программа давно не развивается (последняя версия от 2014 года).

🔹Draw.io - это тоже бесплатная одноимённая программа и сервис. Можно пользоваться как публичным сервисом через браузер, сохраняя схемы у себя локально, так и собственной установкой или локальным приложением. Формат файлов у них одинаковый. На текущий момент, как мне кажется, это наиболее универсальное и доступное решение, хотя и не скажу, что мне там нравится рисовать. На картинке снизу пример нарисованной мной небольшой схемы.

🔹Microsoft Visio - этот продукт в представлении не нуждается. Если заморочиться, на нём получаются самые красивые схемы. Для него много готовых шаблонов и иконок. Возможности по визуализации огромные. Продукт платный, только под Windows, либо онлайн сервис в облаке. Я немного рисовал схемы в Visio, но процесс занимал много времени, быстро надоело.

🔹yEd - Graph Editor - ещё одна бесплатная, но проприетарная система. Как и Dia, она кроcсплатформенная, написана на Java. У программы простой и интуитивно понятный интерфейс. При этом, если разобраться с возможностями, там можно очень навороченные вещи делать, типа автоматического импорта данных и создания на основе них готовых диаграмм или блок-схем.

🔹LibreOffice Draw - часть open source проекта LibreOffice. Сам никогда не использовал и схемы там не рисовал, но видел упоминания. Инструмент универсальный, где в том числе можно рисовать блок-схемы или схемы сетей. Я немного посмотрел, как выглядят схемы, нарисованные в Draw. Мне не очень понравилось. Наверное подойдёт тем, кто использует LibreOffice. А если ставить только для схем, я бы выбрал что-то другое.

Я ещё использовал одно время Edraw Max, но программа полностью платная, так что не буду её добавлять в список. Я уже давно стараюсь ломаное не использовать, особенно, когда есть бесплатные аналоги.

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

#схемы #подборка

​​В заметке про программы для рисования схем инфраструктуры посоветовали сервис excalidraw.com. Я про него не знал, но когда посмотрел, увидел, что подобные схемы мне знакомы. Я видел этот стиль, но не знал, где они нарисованы.

Мне понравилось, как выглядят схемы, нарисованные в excalidraw.com. Сразу решил попробовать в деле и нарисовал частичную схему одного из проектов. Результат смотрите в приложенной картинке. Мне лично нравится, как получилось. Возможно кому-то покажется это несерьёзной, мультяшной стилистикой. Дело вкуса и места применения. Для моих задач такие схемы вполне уместны.

Результат рисования можно как и в draw.io сохранить к себе локально в виде файла и потом загрузить для редактирования. Разбираться в программе почти не пришлось. Просто зашёл и нарисовал. Никаких готовых иконок нет, только геометрические фигуры. Но свои картинки в фон или для иконок можно использовать.

Как вам такая схема?

#схемы

Я не так давно рассказывал про сервис рисования схем excalidraw.com. Тогда впервые о нём узнал, и он мне очень понравился. В комментариях кто-то упомянул, что у него есть плагин для VSCode, но я не придал значения.

На канале realmanual вышло наглядное видео, где показано, как работает этот плагин. А работает он очень круто. Там идея такая. У вас есть репозиторий, где вы в том числе храните схему в виде картинки. Плагин позволяет рисовать схему прямо в редакторе, управляя изменениями через GIT. Но это не всё. На файл со схемой можно оставить ссылку в другом документе, например README.md и по этой ссылке схема будет автоматически отрисовываться в статичную картинку.

По описанию возможно не очень понятно, как это работает. Лучше посмотреть короткое видео (13 мин):

⇨ Рисуем документацию прямо внутри IDE - excalidraw

Это реально очень удобно. Причём нет никакой привязки к онлайн сервису. Мало того, что вы excalidraw можете развернуть у себя, так в плагине VSCode он уже запускается полностью автономно, без привязки к внешнему сервису.

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

#схемы #devops

​​Есть относительно простой и удобный инструмент для создания различных схем на основе текстового описания в формате определённого языка разметки. Я уже на днях упоминал про этот продукт на примере схемы связей контейнеров в docker-compose файле. Речь идёт про Graphviz. Это очень старый и известный продукт, который развивается и поддерживается по сей день.

Graphviz кто только не использует. Им рисуют и логические блок-схемы, и связи таблиц в СУБД, и связи классов какого-то кода, и схемы сетей. На последней я и остановлюсь, как наиболее близкой к системному администрированию тематике. Сразу покажу пример рисования небольшой схемы сети.

Поставить Graphviz можно через apt, так как он есть в базовых репозиториях:

# apt install graphviz

Теперь подготовим небольшую схему сети с роутером, свитчами, точкой доступа и стойкой.

graph network {

node [
shape=box,
fontname="arial",
fontsize=8,
style=filled,
color="#d3edea"
];
splines="compound"

label="Схема сети\n ";
labelloc="t"
fontname="arial";

sw1 [ label="SW-01\n192.168.1.101" ];
sw2 [ label="SW-02\n192.168.1.102" ];
sw3 [ label="SW-03\n192.168.1.103" ];
sw4 [ label="SW-04\n192.168.1.104" ];
router [ label="Router\nVPN Server\n192.168.1.10" color="#cf7b7b"];
wp1 [ label="WiFi\nWP-01\n192.168.1.200" shape=hexagon color="#a8d1b0"];
servers [ label="Servers" fontsize=14 shape=doubleoctagon color="#FF4500"];
router -- sw1;
sw1 -- sw2 [color="#ffbb00"];
sw1 -- sw3 [color="#ffbb00"];
sw1 -- wp1 [color="#ffbb00"];
sw2 -- sw4 [color="#ffbb00"];
sw3 -- servers [color="#ffbb00"];
}

Создаём картинку:

# dot -Tpng network.dot -o network.png

Смотрим её в браузере:

# python3 -m http.server 80

Посмотрел примеры, почитал документацию. Где-то час поразбирался, попробовал разные свойства, формы объектов, цвета и т.д. В итоге такую схему набросал. Можно в фон ставить разные картинки к объектам. Не стал с этим заморачиваться.

Graphviz позволяет вести схемы в документациях как код. Хранить их в git, изменять, сохранять историю. Подобного рода продуктов сейчас немало. Конкретно этот мне показался простым. Он из стародавних времён, поэтому формат конфига у него простой и логичный. Я быстро уловил суть, а дальше рисование уже дело техники.

Устанавливать локально его не обязательно. Удобнее рисовать в каком-то онлайн редакторе, где сразу виден результат. Например, тут: https://dreampuf.github.io/GraphvizOnline

⇨ Сайт / Исходники / Онлайн редактор

#схемы