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

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

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

{% embed url="<https://dreampuf.github.io/GraphvizOnline/>" %}

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

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

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

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

{% columns %}
{% column %}

```
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];
}
```

{% endcolumn %}

{% column %}

<div data-with-frame="true"><figure><img src="https://2866069703-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJsqE5UhDZkl39PNabEAu%2Fuploads%2FfRPnpI9Klm5NMW1bzuPV%2Fimage.png?alt=media&#x26;token=69978e9e-cbbf-442e-8dfc-8824371f597b" alt=""><figcaption></figcaption></figure></div>
{% endcolumn %}
{% endcolumns %}

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

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

* **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 минут).
* Сложные схемы превращаются в простыню кода.
* Требуется интернет — офлайн не работает.