Michigan State University’s Department of Computer Science and Engineering (CSE) delivers acclaimed courses to over 2,000 students every semester in various computer science-related disciplines. Some of these courses use a system of in-house software called CourseLib to build custom websites.

Students taking the department’s software design course use Unified Modeling Language (UML) diagrams to visualize the structure of their software, which is a crucial step in the design process. Until now, CSE has relied on a third-party desktop application called Visual Paradigm to create UML diagrams.

clUML is a browser-based UML editor. This eliminates the department’s dependency on Visual Paradigm and provides a practical way for students and instructors to create and edit UML diagrams directly on the course website, using any modern web browser.

Students can check their diagrams for redundancy, improve their solutions based on instant feedback, and submit diagrams to be graded. Instructors can embed UML diagrams in assignment pages and quizzes, enabling more efficient grading and reducing the workload for course staff.

clUML supports editing multiple diagrams simultaneously in separate tabs. When creating a new tab, the user specifies whether it should hold a class or object diagram. This determines which components are available.

The front-end interface is implemented in JavaScript, HTML and Sass and works in all modern web browsers. The back end is a PHP package that the owner of a CourseLib website can install using Composer. We use DOMPurify to sanitize user input, Jasmine for JavaScript unit testing, and Karma to facilitate testing the user interface across multiple browsers.