Publication Date

2025

Advisor(s) - Committee Chair

Guangming Xing, Zhonghang Xia, Huanjing Wang

Degree Program

School of Engineering and Applied Sciences

Degree Type

Master of Science

Abstract

This thesis introduces an interactive educational framework for teaching object-oriented design through UML class diagrams. The framework implements a dual-approach methodology: code-based generation, where students write Java code that automatically transforms into UML diagrams, and direct diagram manipulation, where students build diagrams by interacting with highlighted terms in problem descriptions. This approach addresses common challenges in teaching UML, including cognitive load difficulties, visualization problems, and the disconnect between code implementation and visual design. Built on the Mermaid diagramming framework, the system features a React frontend for diagram creation and manipulation, and a Flask backend that handles some code parsing and assessment. The framework parses object-oriented structures from student code, transforming them into standardized UML diagrams, while also enabling direct interaction with diagram elements through an intuitive interface. A built-in assessment system compares student diagrams against reference solutions, providing immediate feedback. Consultations with educators and professionals in the field suggest that this approach has the potential to enhance student engagement, accelerate UML skill acquisition, and improve integration of code and design concepts. This research contributes to computer science education by providing multiple learning pathways that accommodate different learning styles while reinforcing core object-oriented design principles.

Disciplines

Computer Sciences | Curriculum and Instruction | Education | Physical Sciences and Mathematics

Download

Share

COinS