GraphvizOnline - код в блок-схемы

Есть два типа людей: те, кто рисует схемы мышкой в Paint или Visio, и те, кто пишет код, а схема рисуется сама. Если вы из вторых - вам сюда.

GraphvizOnline - это бесплатный онлайн-редактор, который превращает текстовое описание графа в готовую картинку. Никаких установок, никаких танцев с бубном. Просто открыл сайт, написал код - получил схему.

Graphviz Onlinedreampuf.github.io

GraphvizOnline сделал пользователь GitHub с ником dreampuf. Это такая интерактивная песочница для языка DOT - на нём «разговаривают» графы и блок-схемы.

Слева ты пишешь код, справа - сразу видишь, что получилось. И так с каждой буквой: изменил текст - схема перерисовалась.

Разбираем на примере

Когда заходишь на сайт, там уже есть готовый пример. Выглядит он страшно, но на самом деле всё просто:

digraph G {
  subgraph cluster_0 {
    style=filled;
    color=lightgrey;
    node [style=filled,color=white];
    a0 -> a1 -> a2 -> a3;
    label = "process #1";
  }
  subgraph cluster_1 {
    node [style=filled];
    b0 -> b1 -> b2 -> b3;
    label = "process #2";
    color=blue
  }
  start -> a0;
  start -> b0;
  a1 -> b3;
  b2 -> a3;
  a3 -> a0;
  a3 -> end;
  b3 -> end;
  start [shape=Mdiamond];
  end [shape=Msquare];
}

А справа — схема с цветными блоками, стрелочками и подписями.

Что тут происходит

• digraph G — говорим, что граф будет ориентированным (со стрелками).

• subgraph cluster_0 — отдельная группа узлов (кластер) с серым фоном и подписью "process #1".

• subgraph cluster_1 — ещё одна группа, уже с синей рамкой.

• a0 -> a1 -> a2 -> a3 — цепочка узлов, соединённых стрелками.

• start [shape=Mdiamond] — делаем узел start в виде ромба.

• end [shape=Msquare] — узел end в виде квадрата.

Всё остальное — стрелки, которые показывают, как эти кусочки друг с другом связаны.

Зачем это нужно

GraphvizOnline пригождается в куче мест:

• Документация — когда нужно быстро вставить блок-схему алгоритма.

• Учёба — для лабораторных по дискретной математике, базам данных или теории графов.

• Программирование — чтобы визуализировать зависимости в коде или архитектуру проекта.

• Лень — потому что рисовать мышкой долго, а написать пару строчек кода — быстро.

Что можно вытащить

Готовую схему можно сохранить как картинку:

• PNG — для вставки в статью или отчёт.

• SVG — если нужно масштабировать без потери качества.

• Можно просто скопировать код и вставить куда надо — например, в GitBook или GitHub (они умеют показывать DOT-схемы).

Плюсы и минусы

Плюсы:

• Не надо ставить — работает в браузере.

• Мгновенная отрисовка — видишь результат сразу.

• Подсветка синтаксиса — глаза не вытекают.

• Экспорт в нормальные форматы.

• Открытый код — можно глянуть, как устроено.

Минусы:

• Надо знать DOT-синтаксис (но учится за 10 минут).

• Сложные схемы превращаются в простыню кода.

• Требуется интернет — офлайн не работает.