Презентация_Vision_Diagram1

1.

Интеллектуальный редактор диаграмм и таблиц
в веб-среде
Vision Diagram
Ключевая идея проекта
Пользователь сначала описывает схему текстом, затем получает редактируемый результат.
После генерации диаграмма остается редактируемой: фигуры можно перемещать, связывать, изменять и дополнять вручную.
Автор
Стек проекта
Ибатуллин Рамир Марселович
React + TypeScript + Vite
Группа ПС-42
SVG + Zustand
Руководитель
Node.js + Express
Баев Алексей Александрович
Ollama для AI-модуля

2.

Актуальность и задача
Проект решает проблему долгого ручного построения схем и делает переход от текста к диаграмме заметно быстрее.
• Ручное построение схем требует большого количества
однотипных действий.
• Даже при наличии готового текстового описания пользователь
заново расставляет объекты и связи.
• Исправление структуры после изменений в задаче тоже занимает
заметное время.
Что нужно было решить
1. Текстовое описание
Пользователь формулирует, какую схему нужно получить или изменить.
↓
2. Vision Diagram
Система строит структуру диаграммы и открывает ее в редакторе.
Сделать полноценный браузерный редактор диаграмм.
↓
Добавить AI-модуль, который преобразует текстовый запрос в формальные
действия над схемой.
Сохранить для пользователя возможность точной ручной доработки результата.
3. Редактируемый результат
Полученную схему можно вручную править, дополнять и экспортировать.

3.

Анализ аналогов
Существующие редакторы удобны для ручного построения схем, но не решают задачу локального AI-редактора с
редактируемым результатом.
Что дают готовые решения
Чем отличается Vision Diagram
• draw.io (diagrams.net) — развитый редактор диаграмм с
поддержкой большого набора фигур и формата .drawio.
• Создание и изменение диаграмм по текстовому
запросу, а не только ручное редактирование.
• Lucidchart и Miro — облачные платформы для совместной
работы, шаблонов и командного проектирования.
• Microsoft Visio — профессиональный инструмент для
создания технических и бизнес-диаграмм.
• Результат остаётся полностью редактируемым — все
фигуры, таблицы и связи можно изменять вручную
после генерации.
• Проект ориентирован на локальный запуск,
демонстрацию на защите и учебные сценарии.
• Локальная работа через Ollama без зависимости от
внешних облачных AI-сервисов

4.

Функционал программы
Редактор закрывает базовые сценарии построения и изменения диаграмм, а затем дополняется интеллектуальным
режимом.
• Добавление фигур: прямоугольник, круг, ромб.
• Работа со списками и таблицами как с отдельными
объектами.
• Создание связей между элементами диаграммы.
• Поддержка undo/redo и локального сохранения
состояния.
• Импорт и экспорт диаграмм в формате draw.io.
• Переключение светлой и темной темы интерфейса.
GIF-демо 1: главный экран и ручное редактирование
Сюда удобно вставить анимацию с добавлением фигуры, созданием связи и
редактированием подписи.
Отдельно можно показать переключение светлой и темной темы.

5.

Архитектура проекта
Vision Diagram реализован по клиент-серверной модели: интерфейс и редактирование находятся на клиенте, а
интеллектуальная обработка запросов на сервере.
Пользователь
→
Работает через браузерный
интерфейс
Клиент
React, TypeScript, Vite, SVG, Zustand
→
Сервер
Node.js и Express обрабатывают AIзапросы
→
Ollama
Локальная языковая модель
возвращает JSON-действия
Клиентская часть
Серверная часть
Отрисовка диаграммы на SVG-холсте.
Принимает текстовый запрос и текущее состояние диаграммы.
Хранение текущего состояния и истории изменений в Zustand.
Формирует инструкцию для модели и получает ответ в JSON.
Редактирование фигур, списков, таблиц и связей.
Возвращает клиенту структурированный набор действий: добавить,
обновить, удалить, заменить, проанализировать.
Переключение темы оформления в интерфейсе.

6.

AI-модуль
Главная особенность проекта в том, что модель возвращает не свободный текст, а предсказуемую структуру изменений над диаграммой.
1. Запрос
Пользователь пишет
текстовое описание
→
2. Контекст
Клиент отправляет текущее
состояние схемы
→
3. Сервер
Формирует инструкцию
для модели
→
4. Ollama
→
Возвращает
структурированный JSON
GIF-демо 2: работа AI-модуля
Поддерживаемые действия
Здесь лучше показать запрос вроде «построй схему процесса» или «добавь к
диаграмме еще один шаг».
add - добавление новых объектов
На анимации будет хорошо видно, что результат остается редактируемым.
remove - удаление объектов
5. Результат
Клиент применяет действия к
диаграмме
replace - полная замена схемы
update - изменение существующих элементов
analyze - текстовый разбор текущего содержимого
Главный принцип
Модель не рисует произвольный текстовый ответ.
Она возвращает формальные действия, которые затем
применяются к редактору.

7.

Итоги и перспективы развития
К защите подготовлен рабочий прототип, в котором проверены основные пользовательские сценарии
Что реализовано
Редактор диаграмм и таблиц в браузере.
SVG-холст, состояние на Zustand и история изменений.
Импорт и экспорт draw.io.
AI-модуль на основе Ollama со структурированными
действиями.
Светлая и темная тема интерфейса.
Куда можно развивать проект дальше
Облачное хранение проектов.
Совместная работа нескольких пользователей.
Расширение набора фигур и сценариев AI-обработки.
Экспорт в PNG, PDF и SVG.
Автокомпоновка и более сложные шаблоны диаграмм.
GIF-демо 3: итоговый пользовательский сценарий
Можно показать короткий сквозной сценарий: запрос к AI → правка результата
вручную → экспорт диаграммы.