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

Для движков с этого сайта есть расширение для VSCode - Markdown Kroki. С его помощью удобно рисовать схемы, так как тут же в соседнем окне можно открыть preview в режиме реального времени. Я попробовал, как это работает на наиболее актуальном по моему мнению движку для рисования схем сети - nwdiag.

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

Впечатления о nwdiag следующие. Это простой движок разметки. Не нужно ничего учить, можно сразу брать и делать. Я даже документацию не смог к нему найти. Есть ли она вообще? Просто посмотрел готовые примеры и начал пробовать.

Из-за его простоты ограничены возможности. Например, нельзя указать цвет фона. Из-за этого пришлось изменить тему VSCode с тёмной на светлую, иначе на тёмном фоне не видно чёрный шрифт, для которого тоже нельзя изменить ни размер, ни цвет. Это возможно только при экспорте в формат SVG. Там уже можно свои стили использовать.

Также нельзя задать координаты элементов, как-то подвигать их. Они отображаются в том порядке, как описаны в коде. Для маленьких схем некритично, а вот в больших захочется как-то скомпоновать элементы для наглядного представления, но не получится. Придётся изменением порядка в описании пытаться что-то изобразить.

Расширение только отображает схему в preview. Экспорт в картинку не делает, так что не получится её положить рядом с кодом. Смотреть придётся в редакторе или делать простенький пайплайн, создавай картинку на каком-то своём сервер с загрузкой в репозиторий.

Nwdiag можно установить через pip:

# pip install nwdiag

И потом из кода рисовать картинки:

# nwdiag diagram.diag

При коммите нужно будет забрать код md файла, обрезать первую и последнюю строки, где указан тип движка для расширения. То есть убрать нужно строки:

```nwdiag

и

```

А потом уже рисовать картинку через nwdiag. Можно там же и некоторую красоту навести, например, сразу изменяя шрифт:

# nwdiag -f /usr/share/fonts/truetype/ttf-dejavu/DejaVuSerif.ttf diagram.diag

Из подобных сервисов есть Graphviz и Mermaid, но они более сложные в освоении и без акцента на сети. Там нужно будет заморочиться, чтобы оформить такую же наглядную схему сети, которая в nwdiag создаётся за 10 минут.

Ещё отдельно напомню, что схемы, нарисованные вручную в excalidraw тоже могут храниться в git репозитории и автоматически рендериться в картинки, на которые можно указывать ссылки в различных документах.

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

#схемы