Конструктор схем и блок-схем
Рисуйте блок-схему, расставляя блоки и соединяя их. Стрелки сами прокладывают путь и перестраиваются, когда блок сдвинули, а одна кнопка раскладывает всю схему по рядам. Всё происходит в странице, ничего никуда не отправляется, а выгружаемый SVG — настоящая векторная графика.
Частые вопросы
Как работает автоматическая раскладка?
Это послойная раскладка — стандартный подход для всего, что течёт в одном направлении. Каждый блок ставится на ряд ниже всего, что на него указывает, поэтому каждая стрелка идёт вперёд; затем порядок внутри рядов несколько раз перемешивается, чтобы связанные блоки оказались рядом, и это убирает большую часть пересечений. Если в схеме есть цикл — а в настоящих он обычно есть, — стрелки, замыкающие цикл, откладываются в сторону на время расчёта рядов: для графа с циклом у послойной раскладки ответа попросту нет.
Почему стрелки двигаются, когда я тащу блок?
Потому что они пересчитываются, а не хранятся. Путь стрелки зависит от положения обоих её блоков, так что кеширование означало бы, что каждое перемещение обязано помнить, какие стрелки перерисовать, — а сбой выглядит как стрелка, указывающая туда, где блок был раньше. Пересчёт на таких размерах ничего не стоит и не может устареть.
Можно ли задать, с какой стороны выходит стрелка?
По умолчанию выбирается сторона, обращённая к нужному блоку, — именно поэтому ряд блоков читается как ряд. Модель позволяет закрепить сторону, и если закреплённая сторона смотрит в противоположную от цели сторону, стрелка обходит оба блока, а не режет их насквозь.
Зачем нужен SVG?
Это настоящая векторная графика — блоки, контуры и текст, а не их картинка. Он остаётся чётким в любом размере, нормально печатается и открывается в Illustrator, Figma, Inkscape или браузере для дальнейшей правки. PNG нужен для вставки в чат или документ, где SVG неудобен.
Что-нибудь загружается на сервер?
Нет. Схема живёт в странице, экспорт собирается в браузере. Закрытие вкладки её теряет — сохраняйте файл на устройство кнопкой «Сохранить», «Открыть» читает его обратно.
Похожие инструменты
- Генератор паролейСоздавайте надёжные пароли криптографическим генератором браузера с оценкой стойкости.
- HTML-сущностиКодируйте текст для HTML или декодируйте сущности обратно — ломающие разметку знаки, именованные наборы, числовые ссылки до эмодзи. Ровно один проход.
- Тестер Регулярных ВыраженийПроверяйте регулярные выражения с живой подсветкой, группами и предпросмотром замены — движок JavaScript, рубильник для катастрофических паттернов.