UML Lab

Overview

UML Lab is an innovative tool that enables users to create, modify, and refine UML diagrams through a combination of AI-powered interactions and manual editing. By leveraging OpenAI's capabilities, the application allows users to generate PlantUML code from natural language queries, as well as ask questions or request modifications. The system does not provide immediate feedback; instead, users can iteratively refine their diagrams by either interacting with the AI or manually editing the code.

Key Features

  • AI-Driven UML Generation: Users can input queries to generate UML diagrams, which are processed by an OpenAI-powered LLM. The AI translates the queries into PlantUML code, enabling users to create diagrams with minimal manual coding.
  • Interactive Refinement: Users can interact with the LLM to request changes or ask questions about the existing PlantUML code. This feature supports an iterative design process, where users can refine their diagrams based on the AI's responses or through manual adjustments to the code.
  • Manual Code Editing: In addition to AI-driven modifications, users have full control over the PlantUML code, allowing for manual tweaks and adjustments. This ensures that users can fine-tune their diagrams to meet specific requirements or preferences.
  • Visualization of UML Diagrams: Once the PlantUML code is finalized, it is converted into a visual diagram using the PlantUML API. The application provides a clear representation of the diagram based on the code, although feedback is not immediate, emphasizing an iterative approach to design.

Technologies Used

  • React: Front-end framework for building the user interface.
  • OpenAI API: Powers the LLM for generating and refining PlantUML code based on user input.
  • PlantUML API: Converts PlantUML code into visual diagrams.
  • MUI (Material-UI): Provides a set of UI components for React, used for building the application's user interface.

AI Integration

The integration with OpenAI enables a conversational interface that simplifies the process of diagram creation and refinement. Users can engage with the AI to generate UML diagrams or ask it to make specific changes, all while retaining the ability to manually edit the underlying PlantUML code. This combination of AI-driven and manual processes allows for a flexible and powerful design experience.

Demo

In this example, I am prompting UML Lab to create a class diagram for a car dealership. As you can see, it generated PlantUML code, and using that code generated an equivalent UML diagram representation.

UML Lab Interface

UML Lab Interface

Generated PlantUML Code

Generated PlantUML Code

UML Diagram Visualization

UML Diagram Visualization

Explore the source code on GitHub:

GitHub Repository