Alterfo

Appearance

IDEF0 Editor — функциональное моделирование в браузере ​

IDEF0 Editor — это редактор функциональных диаграмм, который целиком работает в браузере: ничего не нужно ставить, регистрироваться или загружать на чужой сервер. Вы рисуете блоки-функции, тянете между ними стрелки, разбиваете крупную функцию на подфункции — и всё это сохраняется прямо на вашем устройстве.

→ Открыть редактор

Что такое IDEF0 ​

IDEF0 — это стандарт описания процессов через функциональные блоки. Каждый блок — это действие («Обработать заявку», «Собрать отчёт»), а стрелки вокруг него — это ICOM: Input (вход слева), Control (управление сверху), Output (выход справа) и Mechanism (механизм снизу). Сложную функцию можно «провалить» в дочернюю диаграмму и расписать подробнее — так строится иерархия от общего к частному. Редактор следует американскому федеральному стандарту FIPS 183, поэтому диаграммы получаются формально корректными, а не просто «коробочки со стрелочками».

Зачем браузерный и локальный ​

Большинство инструментов моделирования — это либо тяжёлые десктопные программы, либо облачные сервисы, куда схема процессов утекает на чужие серверы. А диаграмма процессов часто описывает внутреннюю кухню компании — то, что не хочется отдавать наружу. Отсюда два принципа: никакой установки (открыл вкладку — работаешь) и данные не покидают устройство (всё лежит в IndexedDB браузера, синхронизация между вкладками идёт локально). Бонусом — никакого CDN и сторонних API: редактор построен на нативных браузерных возможностях.

Как это устроено ​

Я переписал редактор с canvas на связку SVG + Vue 3, строго по FIPS 183. Архитектура разбита на независимые модули с чистыми функциями — так логику легко тестировать и менять.

Реактивная модель ​

Всё состояние — проект, диаграммы, блоки и стрелки — живёт в реактивных структурах Vue 3 (ref/reactive). Любое изменение модели автоматически перерисовывает SVG, без ручного обновления DOM. Рендер — это набор чистых функций, которые по данным блока или стрелки отдают объект SVG-атрибутов; сам Vue уже превращает их в элементы.

Стрелки с манхэттенской маршрутизацией ​

Стрелки рисуются не по прямой, а под прямыми углами (манхэттенская маршрутизация): минимум два сегмента, повороты только на 90°, наконечник — залитый треугольник. Внутренние связи сплошные, граничные (выходящие за пределы диаграммы) — пунктирные, с подписью кода ICOM (I1, C1, O1, M1) в точке привязки к краю. Когда блок перетаскивают, маршрут стрелки пересчитывается на лету.

Хранение и синхронизация ​

Проект автосохраняется в IndexedDB с дебаунсом 300 мс — частые правки не молотят диск зря. Если открыто несколько вкладок, изменения разъезжаются между ними через событие localStorage, так что вторая вкладка подхватывает свежую версию. Экспорт — в SVG, PNG (×2) и JSON; импорт JSON восстанавливает проект целиком.

Что было интересно решить ​

  • Маршрутизация стрелок. Заставить L-образные стрелки выглядеть аккуратно при любом расположении блоков и честно перестраиваться при перетаскивании — это отдельная пачка геометрии, вынесенная в чистый модуль рендера.
  • Иерархия и декомпозиция. Блок можно «провалить» в дочернюю диаграмму, и у неё своя схема нумерации узлов (A0 → A1 → A11…), хлебные крошки для навигации и обратный путь наверх. Удаление декомпозиции рекурсивно вычищает всё поддерево дочерних диаграмм, а не оставляет висячие ссылки.
  • Валидация ICOM по FIPS 183. Стандарт задаёт жёсткие правила: вход входит слева, выход выходит справа, управление — сверху, механизм — снизу, вызов (CALL) — снизу наружу. Отдельный модуль проверяет диаграмму на эти правила и подсвечивает нарушившие блоки красной рамкой, а список ошибок показывает в боковой панели.
  • Отмена/повтор. Undo/redo построены на снимках состояния (до 50 шагов, Ctrl+Z / Ctrl+Y) и сбрасываются при переходе между диаграммами, чтобы история не путалась между уровнями иерархии.

Текущее состояние ​

Работает полный цикл: автораскладка по диагонали (FIPS 183), drag-and-drop блоков, рисование стрелок через всплывающие «ручки» на сторонах блока с выбором типа ICOM, инлайн-редактирование подписей по двойному клику, декомпозиция с навигацией по хлебным крошкам, панель валидации, отмена/повтор, автосохранение с межвкладочной синхронизацией и экспорт в SVG/PNG/JSON. Логика модели покрыта юнит-тестами; визуальная часть проверяется вручную в браузере.

→ Попробовать самому: /idef0

Из блога ​