Архитектура и системы
Граф зависимостей онлайн
«Граф зависимостей» показывает, что от чего зависит в монорепозитории или между сервисами. Ранги расставляются автоматически: точки входа сверху, листья снизу, у общих зависимостей появляется счётчик входящих связей, а единственный цикл выделен и обведён снаружи.
Когда использовать
- Найти общий пакет, от которого зависит половина монорепозитория
- Показать циклическую зависимость, которую нужно разорвать
- Объяснить новичку, как устроены пакеты и внешние библиотеки проекта
- Оценить последствия обновления внешней зависимости
Как с ней работать в Dele
- Узлов (nodes) — не больше 9, по одному на пакет, а не на файл. Подстрочник — путь для внутренних («packages/ui-kit») или версия и реестр для внешних («v3.23 · npm»).
- Тег (tag) — APP, SVC, PKG или EXT; вид (kind) — внутренний или внешний. Листья и бейджи вроде «4 in» вычисляются сами.
- Рёбер (edges) — до 14: «от» зависит от «к». Рангов не больше 4, при необходимости ранг узла можно задать вручную.
- Единственный акцент — обратное ребро, замыкающее цикл: оно становится коралловым, пунктирным, обходит граф снаружи и получает подпись CYCLE. Узлы цикла остаются обычными.
- Не влезает в бюджет — сверните кластер листьев в один узел вроде «+6 leaves» и скажите об этом.
Три способа собрать диаграмму
Словами. Откройте ИИ-ассистента в редакторе или подключите своего агента по MCP и опишите задачу, например:
«Нарисуй граф зависимостей монорепы: web и admin зависят от ui-kit и api-client, api-client от shared, shared случайно импортирует ui-kit. Выдели цикл.»
В редакторе. Создайте диаграмму из шаблона «Граф зависимостей», меняйте элементы на холсте и в панели справа — раскладка пересчитывается сама.
Кодом. Диаграмма — это JSON-спецификация. Её можно править в панели «Спецификация», генерировать скриптом и хранить в git.
Спецификация примера (JSON)
{
"type": "dependency",
"title": "Граф зависимостей монорепозитория",
"description": "Пакеты монорепозитория по глубине зависимостей: shared-types — общая зависимость четырёх пакетов, utils замыкает цикл обратно на shared-types.",
"ranks": true,
"nodes": [
{
"id": "web",
"label": "web",
"sublabel": "apps/web",
"tag": "APP"
},
{
"id": "admin",
"label": "admin",
"sublabel": "apps/admin",
"tag": "APP"
},
{
"id": "api",
"label": "api",
"sublabel": "services/api",
"tag": "SVC"
},
{
"id": "ui-kit",
"label": "ui-kit",
"sublabel": "packages/ui-kit",
"tag": "PKG"
},
{
"id": "shared-types",
"label": "shared-types",
"sublabel": "packages/shared-types",
"tag": "PKG"
},
{
"id": "db",
"label": "db",
"sublabel": "services/db",
"tag": "SVC"
},
{
"id": "tokens",
"label": "tokens",
"sublabel": "packages/tokens",
"tag": "PKG"
},
{
"id": "utils",
"label": "utils",
"sublabel": "packages/utils",
"tag": "PKG"
},
{
"id": "zod",
"label": "zod",
"sublabel": "v3.23 · npm",
"tag": "EXT",
"kind": "external"
}
],
"edges": [
{
"from": "web",
"to": "api"
},
{
"from": "web",
"to": "ui-kit"
},
{
"from": "admin",
"to": "api"
},
{
"from": "admin",
"to": "ui-kit"
},
{
"from": "api",
"to": "shared-types"
},
{
"from": "api",
"to": "db"
},
{
"from": "ui-kit",
"to": "shared-types"
},
{
"from": "ui-kit",
"to": "tokens"
},
{
"from": "db",
"to": "shared-types"
},
{
"from": "shared-types",
"to": "utils"
},
{
"from": "shared-types",
"to": "zod"
},
{
"from": "utils",
"to": "shared-types",
"focal": true
}
],
"legendNote": "Бейдж — число входящих: дерево не покажет схождение."
}Когда выбрать другой формат
- У каждого узла один родитель и циклов нет — это дерево → Дерево
- Вызовы и потоки данных между сервисами — архитектурная схема → Архитектура
- Связи классов и наследование — диаграмма классов UML → UML: диаграмма классов
Вопросы о формате
Можно ли показать несколько циклов?
Нет, акцентом выделяется только один цикл. Если их несколько, сделайте по диаграмме на каждый или начните с самого важного.
Что делать, если пакетов больше девяти?
Сверните группу листьев в один агрегированный узел или разбейте граф по подсистемам.