Древовидная диаграмма онлайн

Когда использовать

• Декомпозиция системы или продукта на блоки
• Таксономия и классификация
• Структура сайта или каталога
• Прослеживаемая декомпозиция требований с идентификаторами блоков

Как с ней работать в Dele

• Каждый узел указывает родителя (parent); корень ровно один. Других связей нет — линии строятся по родителям, связей между соседями не бывает.
• Глубина — до 4 уровней, не больше 5 детей у одного родителя. Лишнее выносите в отдельное поддерево.
• Подписи — существительные. Один фокусный узел: корень или критичный лист.
• Направление сверху вниз по умолчанию; слева направо — для глубоких и узких деревьев.
• Для прослеживаемой декомпозиции задайте каждому узлу blockId (например, PAY-001-02) и при необходимости meta: вход, выход, ограничение, допущение, реализация. Эти данные экспортируются реестром блоков и не рисуются.

Три способа собрать диаграмму

Словами. Откройте ИИ-ассистента в редакторе или подключите своего агента по MCP и опишите задачу, например:

«Построй дерево декомпозиции платёжного модуля: приём платежа, антифрод, расчёты, возвраты, у каждого по 2–3 подблока. Фокус — антифрод.»

В редакторе. Создайте диаграмму из шаблона «Дерево», меняйте элементы на холсте и в панели справа — раскладка пересчитывается сама.

Кодом. Диаграмма — это JSON-спецификация. Её можно править в панели «Спецификация», генерировать скриптом и хранить в git.

{
  "type": "tree",
  "title": "Платёжная платформа · декомпозиция на блоки",
  "description": "Декомпозиция платёжной платформы на оформление заказа, учёт и выплаты, у каждого — адресуемые подблоки.",
  "direction": "TB",
  "nodes": [
    {
      "id": "pay",
      "label": "Платежи",
      "blockId": "PAY-000",
      "focal": true
    },
    {
      "id": "checkout",
      "parent": "pay",
      "label": "Оформление",
      "blockId": "PAY-001",
      "meta": {
        "impl": "services/checkout"
      }
    },
    {
      "id": "ledger",
      "parent": "pay",
      "label": "Учёт",
      "blockId": "PAY-002",
      "meta": {
        "impl": "services/ledger"
      }
    },
    {
      "id": "payouts",
      "parent": "pay",
      "label": "Выплаты",
      "blockId": "PAY-003"
    },
    {
      "id": "cart",
      "parent": "checkout",
      "label": "Корзина",
      "blockId": "PAY-001-01"
    },
    {
      "id": "auth",
      "parent": "checkout",
      "label": "Авторизация",
      "blockId": "PAY-001-02",
      "meta": {
        "input": "токен карты",
        "output": "код авторизации"
      }
    },
    {
      "id": "journal",
      "parent": "ledger",
      "label": "Журнал",
      "blockId": "PAY-002-01"
    },
    {
      "id": "recon",
      "parent": "ledger",
      "label": "Сверка",
      "blockId": "PAY-002-02"
    }
  ]
}

Когда выбрать другой формат

• Узлы — ответственные люди, команды или агенты → Оргструктура
• Свободный разброс идей вокруг темы без строгого порядка → Майндмэп
• Иерархия, где важны пропорции частей → Тримэп / маримекко