Схема архитектуры системы онлайн

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

• Обзор системы для онбординга нового инженера
• Карта интеграций с внешними сервисами и платёжными провайдерами
• Топология инфраструктуры: CDN, балансировщик, API, базы и кеши
• Раздел архитектуры в дизайн-доке или RFC
• Границы доверия для обсуждения безопасности

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

• Задайте тип каждого узла (kind): сервис, хранилище (БД, очередь, кеш), внешний сервис, клиент, необязательный компонент или контроль безопасности — тип определяет форму и цвет, а не произвольная раскраска.
• Короткий тег из 2–5 заглавных букв (API, DB, CDN) подписывает роль узла и экономит место в названии.
• Акцент — на 1–2 узлах и 1–2 связях: главный путь запроса, а не каждый важный блок. Асинхронные и обратные потоки рисуйте пунктиром.
• Не больше трёх зон — границ доверия или уровней (VPC, PRIVATE). Если зон больше, разбейте схему на несколько.
• Направление слева направо подходит для потока запросов, сверху вниз — для слоистого стека.
• Не рисуйте двунаправленные стрелки там, где направление и так очевидно.

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

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

«Нарисуй архитектуру интернет-магазина: веб-клиент, CDN, API-шлюз, сервис заказов, Postgres, очередь, внешний платёжный провайдер. Выдели путь оплаты.»

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

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

{
  "type": "architecture",
  "title": "Контентный сайт в продакшене",
  "description": "Архитектурная схема: запросы читателя проходят через Cloudflare к origin-серверу на Astro, бандлу MDX и CMS с контентом.",
  "direction": "LR",
  "nodes": [
    {
      "id": "reader",
      "label": "Читатель",
      "sublabel": "браузер",
      "tag": "EXT",
      "kind": "input"
    },
    {
      "id": "cdn",
      "label": "Cloudflare",
      "sublabel": "Pages · кэш",
      "tag": "EDGE",
      "kind": "external",
      "index": "01"
    },
    {
      "id": "origin",
      "label": "Astro Origin",
      "sublabel": "SSR + MDX",
      "tag": "ORIG",
      "kind": "focal",
      "index": "02"
    },
    {
      "id": "mdx",
      "label": "Бандл MDX",
      "sublabel": "src/content/*.mdx",
      "tag": "BUN",
      "kind": "backend"
    },
    {
      "id": "cms",
      "label": "CMS контента",
      "sublabel": "headless",
      "tag": "CMS",
      "kind": "store"
    }
  ],
  "edges": [
    {
      "from": "reader",
      "to": "cdn",
      "label": "HTTPS",
      "style": "link"
    },
    {
      "from": "cdn",
      "to": "origin",
      "label": "SSR",
      "style": "accent"
    },
    {
      "from": "origin",
      "to": "mdx",
      "label": "Чтение MDX"
    },
    {
      "from": "origin",
      "to": "cms",
      "label": "Запрос"
    }
  ],
  "zones": [
    {
      "id": "content",
      "label": "Контент",
      "nodes": [
        "mdx",
        "cms"
      ]
    }
  ]
}

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

• Порядок сообщений в одном запросе во времени → Последовательность
• Где физически развёрнуты сервисы: узлы, кластеры, регионы → Развёртывание
• Что меняется в системе между «было» и «станет» → Архитектура: до и после