Диаграмма слоёв архитектуры онлайн

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

• Стек платформы: от UI до инфраструктуры
• Уровни абстракции в архитектуре
• Каталог контролей по точкам применения: разработка, CI, деплой, рантайм
• Компенсирующие меры: защита и остаточный риск на каждом уровне

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

• От 3 до 6 слоёв, верхний первым. У каждого — название, необязательная подпись (sublabel), заметка справа (note) и индекс (по умолчанию L1…).
• Направление: down — запрос идёт вниз, up — система строится снизу вверх. Стрелка рисуется на полях.
• Один фокусный слой — тот, на который читатель должен посмотреть.
• Для каталога контролей делайте по слою на каждую точку применения (авторинг, рабочее пространство, merge/CI, деплой, рантайм), а в заметке пишите сам контроль.
• Для компенсирующих мер заметка слоя — «мера · остаточный риск».

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

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

«Нарисуй диаграмму слоёв нашей платформы: веб и мобильные клиенты, API-шлюз, доменные сервисы, данные, инфраструктура в Kubernetes. Справа — технологии, фокус на доменных сервисах.»

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

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

{
  "type": "layers",
  "title": "Где срабатывают меры контроля",
  "description": "Стек слоёв: меры безопасности сгруппированы по месту, где они применяются, — от написания кода до рантайма.",
  "direction": "down",
  "layers": [
    {
      "label": "Разработка",
      "note": "pre-commit · поиск секретов",
      "sublabel": "ноутбук разработчика"
    },
    {
      "label": "Репозиторий",
      "note": "защита веток",
      "sublabel": "организация GitHub"
    },
    {
      "label": "Merge / CI",
      "note": "SAST · 2 ревьюера",
      "sublabel": "пайплайн",
      "focal": true
    },
    {
      "label": "Деплой",
      "note": "подписанные образы",
      "sublabel": "Argo CD"
    },
    {
      "label": "Рантайм",
      "note": "WAF · журнал аудита",
      "sublabel": "Kubernetes"
    }
  ]
}

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

• Связи и потоки запросов между компонентами → Архитектура
• Уровни, где важна иерархия по объёму или значимости → Пирамида / воронка
• Вложенные контексты и границы → Вложенность