Графики и данные
Санки-диаграмма онлайн
Санки — диаграмма потоков, где толщина ленты пропорциональна величине: как бюджет расходится по командам, на что уходят минуты CI, куда переходят пользователи. В Dele колонки выводятся из потоков, баланс узлов проверяется, а один путь выделяется кораллом.
Когда использовать
- Бюджет CI: минуты пайплайнов по типам задач и итогу
- Распределение затрат по командам и статьям
- Перераспределение численности между отделами
- Куда уходит трафик после главной страницы
Как с ней работать в Dele
- Узлы (nodes) — до 8, у каждого id и название. Колонки строятся из потоков: источники — первая, их цели — вторая, следующие — третья. Больше трёх стадий не бывает — разбейте на две диаграммы.
- Порядок узлов в списке — порядок сверху вниз: расставьте их так, чтобы ленты не пересекались.
- Потоки (flows) — до 12, каждый «откуда — куда — сколько» между соседними колонками. Вход среднего узла равен выходу, и каждая колонка в сумме даёт один итог.
- Заголовки стадий (stages) — до трёх, единица (unit) печатается после величин узлов. Совсем тонкие потоки объедините в «прочее».
- Один путь в акценте: отметьте focal на каждой ленте этого пути, не больше двух лент.
Три способа собрать диаграмму
Словами. Откройте ИИ-ассистента в редакторе или подключите своего агента по MCP и опишите задачу, например:
«Построй санки бюджета CI за месяц: минуты CI делятся на юнит-тесты, E2E, сборку и линтер, а дальше на «прошло», «упало» и «флак». Выдели путь E2E → флак.»
В редакторе. Создайте диаграмму из шаблона «Санки», меняйте элементы на холсте и в панели справа — раскладка пересчитывается сама.
Кодом. Диаграмма — это JSON-спецификация. Её можно править в панели «Спецификация», генерировать скриптом и хранить в git.
Спецификация примера (JSON)
{
"type": "sankey",
"title": "Бюджет CI: месяц минут пайплайнов",
"description": "12 000 минут CI за месяц расходятся по юнит-тестам, E2E, сборке и линтеру и сходятся в исходы: прошло, упало, флак; путь перезапусков флаков выделен.",
"unit": "мин",
"stages": [
"Бюджет",
"Стадия",
"Исход"
],
"nodes": [
{
"id": "ci",
"label": "Минуты CI"
},
{
"id": "unit",
"label": "Юнит-тесты"
},
{
"id": "e2e",
"label": "E2E"
},
{
"id": "build",
"label": "Сборка"
},
{
"id": "lint",
"label": "Линтер"
},
{
"id": "flaked",
"label": "Флак"
},
{
"id": "passed",
"label": "Прошло"
},
{
"id": "failed",
"label": "Упало"
}
],
"flows": [
{
"from": "ci",
"to": "unit",
"value": 5200
},
{
"from": "ci",
"to": "e2e",
"value": 4000
},
{
"from": "ci",
"to": "build",
"value": 2000
},
{
"from": "ci",
"to": "lint",
"value": 800
},
{
"from": "unit",
"to": "flaked",
"value": 800,
"focal": true
},
{
"from": "unit",
"to": "passed",
"value": 4400
},
{
"from": "e2e",
"to": "flaked",
"value": 200,
"focal": true
},
{
"from": "e2e",
"to": "passed",
"value": 3800
},
{
"from": "build",
"to": "passed",
"value": 800
},
{
"from": "build",
"to": "failed",
"value": 1200
},
{
"from": "lint",
"to": "passed",
"value": 400
},
{
"from": "lint",
"to": "failed",
"value": 400
}
],
"legendNote": "Перезапуски флаков сжигают ~8% месячного бюджета."
}Когда выбрать другой формат
- Одна величина, которая только сужается по этапам → Пирамида / воронка
- Последовательность шагов без разделения потоков → Блок-схема
- Доли одного целого без стадий → Тримэп / маримекко
Вопросы о формате
Сколько стадий может быть у санки-диаграммы?
До трёх колонок. Если потоков больше, разбейте историю на две диаграммы — так ленты остаются читаемыми и не пересекаются.
Что если вход и выход узла не совпадают?
Dele проверяет баланс: вход среднего узла должен равняться выходу, а колонки — давать одинаковый итог. Расхождение покажет доктор.