Манджиева А.Р.
РАЗРАБОТКА ВЕБ-ПРИЛОЖЕНИЯ ДЛЯ АВТОМАТИЧЕСКОЙ ГЕНЕРАЦИИ БЛОК-СХЕМ НА ОСНОВЕ ПРОГРАММНОГО КОДА *
Аннотация:
в данной статье рассматривается разработка веб-приложения для автоматического построения блок-схем на основе программного кода. Рассматриваются архитектурные решения, методы анализа кода и преобразования его в визуальные диаграммы. Особое внимание уделено использованию современных технологий и инструментов для обеспечения интерактивности и удобства использования приложения.
Ключевые слова:
генерация блок-схем, анализ кода, визуализация алгоритмов
Анализ и визуализация программного кода являются важными инструментами в разработке программного обеспечения и обучении программированию. Блок-схемы позволяют визуализировать алгоритмическую логику, что значительно упрощает процесс анализа, отладки и оптимизации программ [1]. Однако традиционные методы построения блок-схем зачастую требуют значительных временных затрат и могут быть подвержены ошибкам при ручном выполнении.В данной работе представлено веб-приложение, способное автоматически строить блок-схемы по исходному коду. Основное внимание уделяется алгоритмам анализа программного кода, методам преобразования его в графическое представление, а также архитектурным особенностям системы.Архитектура приложения.Клиентская часть реализована с использованием фреймворка React, что обеспечивает высокую отзывчивость интерфейса. Визуальное представление блок-схем формируется с использованием библиотеки ReactFlow [3]. Пользователь вводит исходный код в текстовое поле, реализованное с помощью компонента TextareaAutosize из MaterialUI. По нажатию кнопки «Создать блок-схему» запускается процесс анализа кода и построения диаграммы, после чего результат отображается в интерактивном компоненте ReactFlow. Это позволяет пользователю не только наблюдать за структурой алгоритма, но и взаимодействовать с диаграммой (масштабировать, перемещать элементы) [3, 4].Процесс преобразования исходного кода в блок-схему состоит из следующих этапов:Разбиение кода на строки.Исходный код, введённый пользователем, разбивается на отдельные строки с удалением лишних пробелов, что обеспечивает корректную интерпретацию каждой логической единицы [1].Классификация операторов.Каждая строка анализируется на наличие ключевых конструкций. Если строка начинается с оператора «if», она трактуется как условное ветвление и преобразуется в узел типа «input». Если строка содержит оператор присваивания, создается узел типа «default». Операторы «print» интерпретируются как узлы типа «output». Такой подход позволяет выделить основные компоненты логики программы [2].Построение графа потока управления.Для каждого узла определяется уникальный идентификатор и его положение на диаграмме. Позиция по оси Y вычисляется исходя из порядкового номера строки, что позволяет избежать наложения узлов. Между последовательными узлами формируются связи (ребра), что визуально отражает поток управления в программе [2, 3].Визуализация диаграммы.Сформированная структура узлов и связей передается в компонент ReactFlow, который отрисовывает блок-схему. Дополнительные элементы управления (Controls, Background) обеспечивают интерактивность и удобство работы с диаграммой, позволяя пользователю масштабировать и перемещать элементы [3, 4].Научная новизна разработанного решения заключается в следующем:Интеграция методов анализа кода с визуальной интерактивностью. В отличие от традиционных систем, автоматическая генерация блок-схем реализована с помощью простого текстового анализа, что позволяет быстро преобразовывать исходный код в наглядное графическое представление без необходимости сложного статического анализа [2].Модульность и расширяемость. Приложение построено с использованием современных веб-технологий, что обеспечивает гибкость и возможность дальнейшего расширения функционала, включая поддержку дополнительных языков программирования и сложных логических конструкций [3].Интерактивность визуализации. Возможность динамического редактирования и масштабирования блок-схем способствует более глубокому пониманию алгоритмической логики, что имеет большое значение для образовательного процесса [4].Практическая значимость разработки состоит в том, что система может быть интегрирована в учебные платформы для автоматизированного анализа и визуализации программного кода. Это позволит студентам получить мгновенную обратную связь о структуре и логике алгоритмов, улучшая процесс обучения [1, 4].В будущих исследованиях планируется расширение поддержки языков программирования, внедрение глубокого синтаксического анализа с использованием AST, а также добавление функционала оптимизации и интерактивного редактирования блок-схем. Эти усовершенствования позволят повысить точность анализа и улучшить качество визуализации, что имеет важное значение для образовательного процесса [2, 3].
Номер журнала Вестник науки №2 (83) том 4
Ссылка для цитирования:
Манджиева А.Р. РАЗРАБОТКА ВЕБ-ПРИЛОЖЕНИЯ ДЛЯ АВТОМАТИЧЕСКОЙ ГЕНЕРАЦИИ БЛОК-СХЕМ НА ОСНОВЕ ПРОГРАММНОГО КОДА // Вестник науки №2 (83) том 4. С. 455 - 458. 2025 г. ISSN 2712-8849 // Электронный ресурс: https://www.вестник-науки.рф/article/21615 (дата обращения: 07.02.2026 г.)
Вестник науки © 2025. 16+