Диаграмма последовательности онлайн

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

• Вход через OAuth или SSO
• Трассировка API-запроса через несколько сервисов
• Протокол обмена между клиентом и сервером
• Разбор инцидента: в каком порядке сервисы обменялись вызовами

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

• Держитесь бюджета: до 5 участников и до 12 сообщений. Время идёт сверху вниз в порядке списка.
• Тип сообщения (kind): вызов — сплошная линия, ответ — пунктир с закрашенной стрелкой, асинхронное — пунктир с открытой стрелкой. Сообщение участника самому себе — когда отправитель и получатель совпадают.
• Акцент (style accent) ставьте на один главный успешный ответ; стиль link — для HTTP-вызовов.
• Фрагмент alt, opt или loop с условием охватывает диапазон сообщений; обычно хватает одного, максимум двух простых. Ветку «иначе» в alt задаёт elseAt.
• Не вкладывайте alt в alt — разбейте сценарий на две диаграммы.

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

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

«Нарисуй диаграмму последовательности входа через OAuth: пользователь, приложение, сервер авторизации, API. Выдели ответ с токеном доступа.»

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

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

{
  "type": "sequence",
  "title": "Запрос с обновлением токена",
  "description": "Диаграмма последовательности: вызов API обновляет истёкший access-токен и повторяет запрос.",
  "actors": [
    {
      "id": "app",
      "label": "Клиент",
      "sublabel": "SPA",
      "tag": "UI"
    },
    {
      "id": "api",
      "label": "API Gateway",
      "sublabel": "/v1",
      "tag": "API",
      "focal": true
    },
    {
      "id": "auth",
      "label": "Auth-сервер",
      "sublabel": "OAuth 2.1",
      "tag": "IDP"
    }
  ],
  "messages": [
    {
      "from": "app",
      "to": "api",
      "label": "GET /orders",
      "kind": "call",
      "style": "link"
    },
    {
      "from": "api",
      "to": "api",
      "label": "проверка JWT",
      "kind": "call"
    },
    {
      "from": "api",
      "to": "app",
      "label": "200 заказы",
      "kind": "return",
      "style": "accent"
    },
    {
      "from": "api",
      "to": "app",
      "label": "401 истёк",
      "kind": "return"
    },
    {
      "from": "app",
      "to": "auth",
      "label": "обновить токен",
      "kind": "call"
    },
    {
      "from": "auth",
      "to": "app",
      "label": "новый токен",
      "kind": "return"
    },
    {
      "from": "app",
      "to": "api",
      "label": "событие аудита",
      "kind": "async"
    }
  ],
  "fragments": [
    {
      "op": "alt",
      "guard": "токен валиден",
      "start": 1,
      "end": 5,
      "elseAt": 3,
      "elseGuard": "истёк"
    }
  ]
}

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

• Общая картина системы без порядка во времени → Архитектура
• Жизненный цикл одного объекта и его статусы → Состояния
• Передачи работы между командами, а не между сервисами → Дорожки