Конструктор схем и блок-схем

Работает офлайнНичего не загружаетсяБесплатно, без регистрации
Готово

Рисуйте блок-схему, расставляя блоки и соединяя их. Стрелки сами прокладывают путь и перестраиваются, когда блок сдвинули, а одна кнопка раскладывает всю схему по рядам. Всё происходит в странице, ничего никуда не отправляется, а выгружаемый SVG — настоящая векторная графика.

Самое интересное здесь — что происходит, когда в схеме есть цикл. Послойная раскладка ставит каждый блок ниже всего, что на него указывает, а это становится невозможным, как только стрелки замыкаются в кольцо, — и обычный сбой тут не плохая картинка, а программа, которая никогда не заканчивается. Здесь замыкающие стрелки находятся первыми и откладываются на время расчёта рядов; их по-прежнему рисуют, они просто не участвуют в решении, что где стоит.

Частые вопросы

Как работает автоматическая раскладка?

Это послойная раскладка — стандартный подход для всего, что течёт в одном направлении. Каждый блок ставится на ряд ниже всего, что на него указывает, поэтому каждая стрелка идёт вперёд; затем порядок внутри рядов несколько раз перемешивается, чтобы связанные блоки оказались рядом, и это убирает большую часть пересечений. Если в схеме есть цикл — а в настоящих он обычно есть, — стрелки, замыкающие цикл, откладываются в сторону на время расчёта рядов: для графа с циклом у послойной раскладки ответа попросту нет.

Почему стрелки двигаются, когда я тащу блок?

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

Можно ли задать, с какой стороны выходит стрелка?

По умолчанию выбирается сторона, обращённая к нужному блоку, — именно поэтому ряд блоков читается как ряд. Модель позволяет закрепить сторону, и если закреплённая сторона смотрит в противоположную от цели сторону, стрелка обходит оба блока, а не режет их насквозь.

Зачем нужен SVG?

Это настоящая векторная графика — блоки, контуры и текст, а не их картинка. Он остаётся чётким в любом размере, нормально печатается и открывается в Illustrator, Figma, Inkscape или браузере для дальнейшей правки. PNG нужен для вставки в чат или документ, где SVG неудобен.

Что-нибудь загружается на сервер?

Нет. Схема живёт в странице, экспорт собирается в браузере. Закрытие вкладки её теряет — сохраняйте файл на устройство кнопкой «Сохранить», «Открыть» читает его обратно.

Похожие инструменты