← Back to Home

Text2UML

JavaTypeScriptReactD3.jsELKJSMontiCoreLSPVS-Code Extension

I developed the Text2UML tool for my bachelor's thesis titled 'Generating Graphical Representations for UML Sequence and Activity Diagrams from Textual Variants'. This thesis presents a tool that automates the generation of graphical representations from textual variants of UML sequence diagrams (SDs) and activity diagrams (ADs), utilizing the MontiCore language workbench. Designed to enhance model-driven software engineering (MDSE) methodologies, this tool is integrated into the Visual Studio Code (VS Code) environment through an extension.

The tool employs the Language Server Protocol (LSP) to extract diagram data from MontiCore DSLs, enabling synchronized visualization alongside the textual model. A key feature of this tool is the bidirectional navigation between textual and visual representations, allowing users to transition from code to diagram and vice versa. This functionality improves the accessibility and utility of MDSE visualizations and facilitates a deeper understanding of UML diagrams.

The main goal of the tool is to provide direct visualization inside VS Code, allowing for a side-by-side view with the textual model on one side and the visualization on the other. The extension dynamically generates and updates visualizations based on any modifications within the text document.

The tool uses Java for the backend (LSP server) and TypeScript for the VS Code extension backend and frontend. React and D3.js are used for rendering the diagrams. The visualization process is separated into layout algorithms and rendering logic. We use ELKJS for the AD renderer and developed a custom layout algorithm for SDs.

This project not only showcases advanced integration techniques and synchronized data visualization but also contributes to the broader MDSE field by improving the interaction between textual and graphical models.

Architectural Overview of Text2UML Tool Communication Flow

Project content

Visualization Workflow

Project content

Example Videos of the Tool in Action