Проектирования веб-сервиса для визуализации и анализа графов

1.

GraphMas ter
В еб-приложение
дл я построения
граф ов
Команда: Зонов Александр Сергеевич, Зиновьев Никита Андреевич
Преподаватель: Гайнетдинова Анастасия Витальевна

2.

Цели и задачи
В рамках проектирования веб-сервиса для визуализации и анализа графов была разработана концептуальная
модель, включающая описание актуальности проекта, постановку цели по методике SMART, а также перечень
ключевых задач, необходимых для реализации задуманного функционала.
Цель SMART
Главные Задачи
Разработать функциональный MVP веб-сервиса
GraphMaster к 17 июля 2025 года, обеспечивающий
визуальное построение, редактирование и анализ
аудиторию.
графов для 100+ активных пользователей из числа
студентов и преподавателей, с точностью анализа
не менее 95% для 3 ключевых алгоритмов.
Исследовать предметную область и целевую
Спроектировать архитектуру и интерфейс
сервиса.
Разработать ключевые модули MVP.
Провести тестирование и стабилизацию.

3.

AI-Инструменты
Для повышения эффективности и качества работы мы активно использовали современные AI-инструменты на всех
этапах проекта.
DevPlan
DeepSeek
Написание промптов
Уточнение терминологии предметной области,
поиск акторов и их взаимосвязей.
Kuse
Gamma AI
Разработка MVP приложения
Автоматизированное создание структуры и
дизайна презентации на основе
предоставленных данных.
Использовались различные техники промптинга: Zero-shot, Chain-of-Thought, Role Prompting.

4.

Концептуальная модель
Актуальность
Современные задачи в таких областях, как
анализ социальных сетей, маршрутизация в
логистике, биоинформатика и
кибербезопасность, требуют активного
использования структуры данных «граф».

5.

Анал из целевой аудитории
Наш сервис ориентирован на широкий круг пользователей, которым необходимо работать с графами.
Сегмент ЦА
Основные потребности
Студенты
Визуализация графов для учебных задач, понимание алгоритмов, удобный инструмент
для курсовых работ.
Преподаватели
Создание наглядных пособий, демонстрация работы алгоритмов, проверка заданий
студентов.
Аналитики данных
Исследование сложных взаимосвязей в данных, построение сетевых моделей,
применение графовых баз данных.
Разработчики ПО
Проектирование архитектуры систем, отладка сетевых взаимодействий,
использование графов для решения специфических задач.
Понимание потребностей каждого сегмента позволяет нам создавать наиболее релевантный и удобный продукт.

6.

Рол и пол ьзователей и их потребности
Каждая роль имеет свои уникальные сценарии использования и требования к функционалу
GraphMaster.
Студент
Легкое построение и модификация графов, запуск основных алгоритмов, экспорт результатов
для отчетов.
Преподаватель
Создание обучающих примеров, демонстрация работы алгоритмов в реальном времени,
загрузка готовых графов.
Анал итик данны х
Импорт больших графов, применение продвинутых алгоритмов, интеграция с другими
инструментами.
Администратор
Управление пользователями, настройка доступов, мониторинг производительности сервиса.

7.

Предметная обл асть

8.

Исследование рынка и конкурентов
Мы проанализировали существующие решения для визуализации и анализа графов.
Инструмент
Плюсы
Минусы
Оценка (1-5)
Вывод
Graphviz
Высокая гибкость,
Сложный синтаксис
3
Для разработчиков, не
открытый исходный код
DOT, отсутствие
для обычных
интерактивности
пользователей.
Gephi
Graph Online
Sigma.js
Мощный функционал,
Десктопное
4
много алгоритмов
приложение, высокая
профессионалов, но не
ресурсоемкость
для веба.
2
Хорош для
Простой веб-
Ограниченный
интерфейс, быстрое
функционал, нет
задач, не для сложных
построение
анализа
графов.
Веб-библиотека,
Требует разработки, нет
кастомизация
готового UI
3
Подходит для простых
Основа для разработки,
не готовый продукт.
Наш GraphMaster призван объединить простоту использования веб-сервисов с глубоким аналитическим функционалом.

9.

Анализ требований

10.

Необходимые ресурсы и
технол огии
Для реализации GraphMaster мы выбрали современный технологический
стек.
Технол огический Стек
Инф раструктура и Данны е
Фронтенд: React.js, D3.js (для
визуализации), Tailwind CSS
AWS/Yandex.Cloud (для
Бэкенд: Node.js (Express),
развертывания)
Python (Flask для алгоритмов)
Форматы данных: JSON (для
База данных: PostgreSQL (для
API), GML/DOT (для
пользовательских данных),
импорта/экспорта графов)
Neo4j (для хранения графов)
Облачные сервисы:
(GitHub)
Библиотеки: NetworkX (Python),
vis.js (альтернатива D3.js)
Система контроля версий: Git
Управление проектом: Jira/Trello

11.

Проектиров ание системы

12.

Демонстрация интерфейса GraphMaster
Ознакомьтесь с ключевыми экранами нашего веб-сервиса.
Интерфейс разработан с акцентом на удобство и интуитивность, чтобы обеспечить максимально комфортную
работу с графами.