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

А рассказать я хотел про сервис draw.io, который позволяет рисовать красивые карты сетей прямо в браузере. Там есть куча готовых шаблонов, которые можно открыть и редактировать на свой вкус. Сервис достаточно удобный, насколько может быть удобным редактирование в браузере. Если надо быстро что-то нарисовать, то в самый раз.

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

Подозреваю, что есть что-то еще более удобное и функциональное. Расскажите, чем рисуете схемы сети?

#схемы

​​У меня на канале уже как-то была заметка про 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 рисовал.

#схемы

Я неоднократно в заметках обозревал инструменты для ведения документации. Вот примеры продуктов:
▪️ MkDocs - инструмент для генерации документации в виде статического сайта на базе текстовых файлов в формате markdown.
▪️ BookStack - open source платформа для создания документации и вики-контента.
▪️ Wiki.js - готовая wiki платформа с поддержкой редакторов wiki, markdown, wysiwyg.

Сегодня хочу рассказать про ещё один инструмент для автоматизации написания документации. А конкретно по её визуализации с помощью схем и диаграмм. Речь пойдёт про Mermaid. Это известный и популярный инструмент для создания визуализаций и диаграмм на основе написанного кода.

Основная идея Mermaid в том, что вы пишите текст, а на выходе получаете визуализацию. Это позволяет решать целый спектр задач, таких как:
1️⃣ Автоматизация создания контента.
2️⃣ Совместная работа с контентом.
3️⃣ Простая и понятная схема сохранения истории изменений.

Для понимания наглядный пример. Вот такой текст:
graph TD;
  A-->B;
  A-->C;
  B-->D;
  C-->D;
Превращается в картинку с блок схемой и стрелочками. Посмотрите остальные примеры на главной странице проекта, чтобы сразу понять, какой это инструмент и что с его помощью можно нарисовать.

С помощью Mermaid можно автоматизировать создание и изменение схем, редактируя текст после изменения структуры объектов. Автоматически будет меняться и картинка. История изменений отслеживается, всегда можно посмотреть прошлый вариант.

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

На практике применение выглядит следующим образом. К примеру, github нативно поддерживает диаграммы Mermaid.js в README-файлах. Можно прямо в них писать код и он будет отрисовываться в картинки. Также Mermaid.js нативно интегрирована в GitLab, Gitea, Joplin и Notion. Для многих сервисов есть плагины. А в общем случае это пакет для nodejs, который можно поставить локально через nmp, запускать как сервис и обращаться к нему или с помощью CLI прогонять через него текстовые данные:
# npm install -g mermaid
# npm install -g @mermaid-js/mermaid-cli
# mmdc -i scheme.mmd -o scheme.png -w 1024 -H 768
Или с помощью Docker:
# docker run -it -v ~/diagrams:/data minlag/mermaid-cli \
-i /data/diagram.mmd

Попробовать Mermaid можно в онлайн редакторе https://mermaid.live. Итоговый результат можно кому-то отправить в виде ссылки.

Сайт - https://mermaid-js.github.io
Исходники - https://github.com/mermaid-js/mermaid

#схемы

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

🔹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

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

#схемы

Для рисования схем существует много различных программ. Причём этот вопрос хорошо закрывается полностью бесплатным ПО. Его можно разделить на 2 категории: ручное рисование и автоматическое на основе текстового описания. Сегодня речь пойдёт про ручное рисование.

Наиболее популярные инструменты - draw.io и excalidraw.com. Оба сервиса представляют собой веб приложение, которое можно в том числе развернуть у себя на веб сервере. Результатом работы в браузере будет обычный файл, который можно сохранить к себе на компьютер. Это удобно. Не нужно ничего устанавливать локально, но при этом все схемы у тебя всегда под рукой. Можно воспользоваться как своим сервисом, так и публичным.

Я одно время пользовался draw.io и думал, что ничего другого и не надо. Вроде всё и так есть. Потом кто-то посоветовал посмотреть excalidraw. Он мне понравился. Там по умолчанию нет специальных иконок и прочих красивостей, но на деле оказалось, что простыми прямоугольниками и прочими геометрическими фигурами со стрелками нарисовать схему быстрее и проще. И выглядит она нагляднее. Так что теперь рисую там. При желании туда тоже можно импортировать готовые наборы иконок, но я без них обхожусь.

Видел не раз в комментариях упоминание lucidchart. Про него есть подробное видео на ютубе на канале ADV-IT. Автор нарисовал для примера пару схем и показал процесс. Изначально думал, что это наподобие описанных выше программ, где так же есть open source версия, но нет. Lucidchart полностью коммерческий продукт с бесплатным тарифным планом, в котором основное ограничение - 60 объектов на схему. Сайт использует какую-то хитрую блокировку по странам, так что я не смог зарегистрироваться даже через американский VPN. Так что можно смело про него забыть. Lucidchart у меня год в закладках висел, ждал своего часа и вот дождался.

☝️ Вернусь ещё раз к draw и excalidraw и расскажу об одной особенности, которая может быть кому-то незнакома. Для этих сервисов есть плагины для популярной IDE - VSCode. С помощью этих плагинов вы можете хранить схемы в репозиториях и изменять их прямо в редакторе. После изменения схемы автоматически рендерятся в картинки. То есть для вас это редактируемые объекты, которые легко изменяются, а для тех, кто будет смотреть этот репозиторий, это будут статические png картинки. Вот тут подробно показано, как это работает:

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

Ну и отдельно перечислю бесплатные сервисы, где можно автоматически создавать блок схемы на основе описания с помощью кода:

◽️Graphviz - ветеран подобных сервисов, очень старый продукт, который развивается и использует по сей день.
◽️Mermaid - более современный сервис, много где имеет встроенную поддержку (GitLab, Gitea, Joplin, Notion и т.д.), наиболее популярный на сегодняшний день.

Таких движков для описания кода очень много. У них довольно высокий порог вхождения. Используется свой язык разметки, так что придётся немного поразбираться.

#схемы

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

Это open source проект, который есть в редакции self-managed, то есть можно развернуть у себя. Он объединяет в себе все доступные библиотеки open source движков для рисования графиков из текстового описания. На сайте есть форма, где можно выбрать из выпадающего списка желаемый движок диаграмм, посмотреть пример текстового описания и тут же графическое отображение.

Если вы подбираете себе подобный инструмент для рисования схем, то можете очень быстро выбрать и попробовать то, что вам понравится больше всего. Кто-то прям неслабо заморочился и объединил в одном месте 27 доступных движков, в том числе Mermaid, GraphViz, Excalidraw и другие.

Я, кстати, именно тут впервые увидел, что Excalidraw, оказывается, тоже может рисовать схемы на основе текстового описания. Изначально думал, что это только графический редактор. Язык у него не сказать, что простой. Немного посмотрел представленные примеры. Стало понятно, почему Mermaid такой популярный. С ним реально проще работать, чем с другими. Синтаксис наиболее простой и интуитивный.

На сайте kroki.io есть небольшая шпаргалка в виде pdf с картинками, где представлены различные форматы визуализаций и движки, с помощью которых они нарисованы. Можно быстро прикинуть, что вам больше всего подойдёт. Примеры:

◽️Схема сети - NwDiag
◽️Детали сетевого пакета - PacketDiag
◽️Схемы стоек - RackDiag
◽️Диаграммы из блоков - BlockDiag, Ditaa
◽️Столбчатая диаграмма - Vega-lite
и т.д.

⇨ 🌐 Сайт / Исходники

❗️Если заметка вам полезна, не забудьте 👍 и забрать в закладки.

#схемы