Фронтенд ↔️ Бэкенд

Диаграмма последовательности отлично подходит для отображения реакции фронтенда на ответы от бэкенда.

📌 Пример: как фронт обрабатывает разные коды ответа после сохранения ресурса.

Диаграмма сделана в PlantUML. Хотите увидеть её визуально?
1️⃣ Зайдите на plantuml.com
2️⃣ Вставьте код👇
3️⃣ Нажмите Submit

@startuml
actor User
participant Frontend
participant Backend
User -> Frontend: Нажимает «Сохранить»
Frontend -> Backend: POST /resources
alt Ответ 200 OK
Backend --> Frontend: {«id», «data»}
Frontend -> Frontend: Отображает сущность в режиме ред-я
else Ответ 500 Internal Server Error
Backend --> Frontend: {«error»: «Server error»}
Frontend -> Frontend: Показывает универсальное сообщение об ошибке
else Ответ 401 Unauthorized
Backend --> Frontend: {«error»: «Unauthorized»}
Frontend -> Frontend: Редирект на страницу авторизации
else Ответ 422
alt Ошибка формата
Backend --> Frontend: {«error»: «Invalid data format», «details»}
Frontend -> Frontend: Показывает сообщение об ошибке из «details»
else Ошибка бизнес-логики
Backend --> Frontend: {«error»: «Business logic error», «details»}
Frontend -> Frontend: Показывает сообщение об ошибке из «details»
end
end
@enduml

Попробуйте построить свою диаграмму и протестировать разные кейсы! 😉

#uml #sequence #diagrams

Что сейчас происходит в нашем втором канале? 🚀

Привет! 👋
В этом канале мы в ближайшее время будем обсуждать схемы, которые помогают системному аналитику показывать взаимодействия, процессы и алгоритмы. Но это полезно только в том случае, если вы уже понимаете, что там должно быть нарисовано.

Если вы не уверены, как составить схему, откуда берутся шаги, кто их диктует — это сигнал взяться за обучение более фундаментально.

На нашем втором канале Старт карьеры мы как раз сейчас учимся:
📌 Строить технические процессы, бизнес-процессы и алгоритмы.
📌 Мыслить системно: откуда берутся шаги? Как их находить?
📌 Работать с основами системного анализа.

Если вам трудно сориентироваться, что рисовать в схемах — начните с базы. Это поможет уверенно строить диаграммы и прокачает ваши аналитические навыки.

👉 Переходите в канал Старт карьеры.

С вами Вера и Юрий,
основатели AnalystCore ❤️

Система ↔️ Внешние API

Ещё один пример применения диаграммы последовательности. На этот раз — взаимодействие системы с внешним API для отображения подсказок адресов.

Диаграмма показывает процесс:
1️⃣ Пользователь вводит текст в поле «Адрес».
2️⃣ Система отправляет запрос к внешнему API.
3️⃣ Варианты сценариев: успешный ответ с подсказками, успешный, но пустой ответ или ошибка.

Попробуйте сами!
Заходите на plantuml.com.
Вставьте код👇

@startuml
actor User
participant Frontend
participant Backend
participant DaDataAPI
User -> Frontend: Вводит текст в поле «Адрес»
Frontend -> Backend: POST /suggestions (текст)
Backend -> DaDataAPI: POST /suggestions (текст)
alt Успешный ответ с подсказками
DaDataAPI --> Backend: «suggestions»: [{"value», «unrestricted_value»,"data"}]
Backend --> Frontend: «suggestions»: [«value», «id»]
Frontend -> Frontend: Отображает список подсказок
else Успешный ответ, но пустой массив
DaDataAPI --> Backend: «suggestions»: []
Backend --> Frontend: «suggestions»: []
Frontend -> Frontend: Отображает сообщение «Адрес не найден»
else Ошибка от DaDataAPI (код != 200)
DaDataAPI --> Backend: «error»
Backend -> Backend: Логирует ошибку
Backend --> Frontend: «error»
Frontend -> Frontend: Отображает сообщение «Что-то пошло не так. Попробуйте позже»
end
@enduml

#uml #sequence #diagrams

Система ↔️ Система

Нарисовали сиквенс-диаграмму на взаимодействие между двумя сервисами.

Кстати, этот пример демонстрирует, что не только «человек» инициирует какой-то процесс. В нашем примере процесс запускается автоматически, по триггеру — в 01:00.

Хотите нарисовать такую же схему?
Заходите на plantuml.com
Вставьте код👇

@startuml
actor TimeTrigger as «Триггер времени»
participant ReportService as «Сервис отчетности»
participant Kafka as «Kafka»
participant NotificationService as «Сервис уведомлений»

TimeTrigger -> ReportService: Наступило 01:00
ReportService -> ReportService: Генерирует отчет
ReportService -> Kafka: Публикует событие «Отчет готов»

NotificationService -> Kafka: Pull сообщения из топика
NotificationService -> NotificationService: Отправляет письмо, что отчет готов
@enduml

#uml #sequence #diagrams

Sequence Diagram: базовые элементы. Часть 1

Всем привет! 👋
По итогам опроса большинство выбрало разобрать элементы сиквенс-диаграммы в PlantUML. Начнём с основ — без них никуда:

1️⃣ Участники

Это всё, что взаимодействует в рамках процесса: пользователь (включая разные роли), микросервис, внешняя система, брокер и пр.
Если нужно визуально отделить участников (participant), используйте типы:
* actor
* boundary
* control
* entity
* database
* collections
* queue

Объявляем участников на PlantUML так:

participant Participant
actor Actor
boundary Boundary
control Control
entity Entity
database Database
collections Collections
queue Queue

2️⃣ Линии жизни
Они отображаются автоматически после объявления участника и показывают период, в течение которого объект «живёт» в процессе. Проще говоря, это визуализация начала и завершения активности объекта, чтобы было понятно, когда и как он участвует во взаимодействии.

3️⃣ Сообщения
Отображаются в виде стрелок, показывают, кто инициирует вызов, и кто отвечает:

User -> System: Запрос
System --> User: Ответ

Попробуйте прямо сейчас на plantuml.com: вставьте этот код и посмотрите, как всё визуализируется.

В следующих постах поговорим о ветвлениях (alt, opt), других полезных конструкциях и хорошем стиле.

#sequence #plantuml #diagrams

Когда открыл PlantUML и видишь, что всё пишется в виде кода:

💬 Да это же просто! Сейчас нарисую!
…через 10 минут…
🤔 А как там создать notebox? И где подключить стили? Кто-нибудь, спасите!

💡 Лайфхак: Начните с самых простых элементов из прошлого поста. А украшение диаграммы (note, цвет, стили) добавьте потом, когда логика на диаграмме будет выстроена правильно — ведь это самое главное.

#plantuml #sequence #diagrams

Sequence Diagram: ветвления и циклы. Часть 2

Всем привет! 👋
Продолжаем разбирать конструкции PlantUML, которые помогают точно описать логику взаимодействия. Сегодня расскажем, когда применять alt, opt и loop на практике.

1️⃣ alt — альтернативные сценарии
Блок alt используется, чтобы показать разные варианты развития событий. Например, при обработке HTTP-запроса можно явно указать, как реагировать на успешный и неудачный ответ:

Service_A -> Service_B: Отправить запрос
alt HTTP 200 OK
Service_B --> Service_A: Данные
else HTTP 500 Internal Server Error
Service_B --> Service_A: Сообщение об ошибке
end

Такой блок позволяет визуально отделить «успешный сценарий» от альтернативных.

2️⃣ opt — опциональные действия
Опциональные шаги выполняются только при соблюдении условия. Например, при авторизации, если включена двухфакторная аутентификация, система отправляет дополнительный код в SMS:

Front -> Back: Запрос авторизации
alt Успешная авторизация
Back --> Front: Токен
opt Если включена 2FA
Back -> SMS_Service: Отправить код подтверждения
end
else Неуспешная авторизация
Back --> Front: Ошибка
end

Здесь блок opt выполняется только если у пользователя активирована двухфакторная аутентификация.

3️⃣ loop — повторяющиеся действия
Цикл loop применяется, когда действие нужно повторить несколько раз. Например, попытка получения данных при временной недоступности сервиса:

loop Повторить до 3 раз, пока не получен ответ
Front -> Back: Запрос данных
alt Получен ответ
Back --> Front: Данные
else Нет ответа
Back --> Logger: Логирование ошибки
end
end

В этом примере система делает до 3 попыток отправить запрос, и если ни одна не приводит к получению ответа, логируется ошибка.

Попробуйте применить эти конструкции на plantuml.com.

#sequence #plantuml #diagrams

Sequence Diagram: красивое оформление (бантики 🎀). Часть 3

Продолжаем разбираться с PlantUML. Сегодня посмотрим фишки, которые делают диаграммы ещё нагляднее:

1️⃣ Нумерация сообщений
autonumber
Чтобы не прописывать номера шагов вручную, используйте ключевое слово autonumber. Оно автоматически пронумерует все сообщения, что удобно при изменениях в диаграмме.
Пример:

@startuml
autonumber
User -> System: Запрос данных
System --> User: Ответ
@enduml

В результате каждый вызов будет отображаться со своим порядковым номером.

2️⃣ Перенос текста
Если шаг слишком длинный, используйте \n для переноса строки и улучшения читаемости.
Пример:

User -> System: Запрос на получение\nданных о пользователе

3️⃣ Примечания
Добавляйте поясняющие примечания, чтобы выделить важные детали или уточнить логику.
Пример:

@startuml
autonumber
User -> System: Запрос данных
note right of User: Какое-то примечание
System --> User: Ответ
@enduml

Попробуйте применить эти возможности в своих диаграммах на plantuml.com — они помогут сделать описание процессов ещё понятнее!

#sequence #plantuml #diagrams

Последнее время часто слышим от разных спикеров, что:

Системный аналитик — это про интеграции, БД, REST API и кафку.

❓ Что думаете? Напишите своё мнение в комментариях
👇👇👇👇👇

Суббота — самое время повторить изученное! За последние две недели мы много говорили о Sequence Diagram. Давайте освежим в памяти, как с помощью этой диаграммы можно показать взаимодействие между:

✅ Пользователь ↔️ Система
✅ Фронтенд ↔️ Бэкенд
✅ Система ↔️ Внешние API
✅ Система ↔️ Система

А ещё нет ничего удобнее, чем написать диаграмму текстом, вместо того чтобы вручную рисовать идеальные стрелки.

Мы разобрали в трёх частях полезные элементы PlantUML. Переходите к постам, копируйте код и смотрите, как он отрендерится на plantuml.com.

🔗 Sequence Diagram — полезные элементы:
📌 Часть 1
📌 Часть 2
📌 Часть 3 про бантики на диаграмме 🎀

Хороших выходных!

С вами Вера и Юрий,
Основатели AnalystCore

Что происходит после нажатия на кнопку «Войти»? 🤔

Недавно на собеседовании мы обсуждали диаграммы и процессы, и мне задали интересный вопрос:

💬 «Расскажите последовательно, что происходит после нажатия на кнопку Войти?»

❓ Цель такого вопроса — проверить, насколько глубоко кандидат понимает процессы. Мыслите ли вы только на уровне фронта? Или заглядываете в бэкенд? Понимаете ли архитектуру, безопасность, работу сессий, что там с паролями?

🔍 Разобрали бы несколько таких задач и вопросов, которые реально встречаются на интервью?
Голосуйте в опросе ниже
👇👇👇👇👇

#interview