The Department of Computer Science and Engineering at Michigan State University provides world-renowned courses for over 2,000 students in computer science-related fields. These courses utilize several custom-made software applications developed in-house to facilitate student learning.

One of the skills that all computer science students must learn is the creation and usage of UML diagrams. Such models aid in the visualization of the connectivity between individual components in software systems. Students can make a more informed plan when developing the software structure and easily communicate that structure to other programmers using UML diagrams.

Students currently utilize a third-party program, Visual Paradigm, to create UML diagrams in their classes. Our clUML: Browser-Based UML Editor removes the department’s dependency on third-party software.

Based on Cirsim, a university-developed circuit diagramming tool, our system provides students an approach to creating UML diagrams in a familiar format.

Our software features a palette of tools for adding UML components to a central diagram, as shown on the right. Components can be edited and moved directly on the diagram using a mouse or a touchscreen. Connections between classes are easily drawn and edited for placement and multiplicity.

Several quality of life features, such as saved states and diagram sanity checking, enable students to quickly and easily design UML diagrams, saving time and resources for students and instructors alike.

Our software runs on all modern internet browsers, utilizing Node.js/JavaScript, HTML, and Sass/CSS. Our software employs many JavaScript packages, such as DOMPurify for sanitizing user input and Jasmine and Karma for testing.