TXGram App

Txgram is an application that generates UML diagrams from user-provided textual descriptions and, conversely, converts UML diagrams back into textual descriptions. It follows a Model-Driven Engineering (MDE) approach and operates through several key stages :

• User Input: The user provides a description in natural language.
• LLM Transformation: A Large Language Model (LLM) interprets the input and produces a structured script in the form of user stories.
• DSL Conversion: The script is then transformed into a Domain-Specific Language (DSL).
• UML Diagram Generation: The DSL is converted into a format compatible with the PlantUML API, which is then used to generate the corresponding UML diagram.

Features

1. Natural Language Text Input

• Allow users to input system or process descriptions in natural language.

2. Voice Command Input

• Integrate a speech-to-text API to enable users to dictate their descriptions vocally.

3. Interpretation via LLM

• Use a Large Language Model (LLM) to analyze and structure the textual descriptions into user stories, ready for diagram generation.

4. DSL Conversion

• Convert user stories into a Domain-Specific Language (DSL) to standardize and structure the information for further processing.

5. Automatic UML Diagram Generation

• Transform the DSL into UML diagrams using visualization APIs such as PlantUML.

6. Reverse Conversion: Diagram to Text

• Use an image-to-text API to analyze UML diagrams and extract understandable textual descriptions from them.

7. Diagram Export and Sharing

• Enable users to download or share the generated UML diagrams in multiple formats (e.g., image, PDF).

8. Versioning and History Management

• Allow users to track versions and history of their diagrams, with the ability to revert to previous versions.

Overview

1. Langium-Based DSL Development

• Function: Defines a custom textual Domain-Specific Language (DSL) used to structurally represent UML concepts based on user input.
• Tech Stack: TypeScript, Langium, Node.js.
• Key Features:
  • Custom grammar design for describing systems using a structured DSL.
  • Validation rules to ensure the correctness and consistency of the models.
  • Automatic generation of diagram-compatible output (PlantUML syntax).

2. Next.js Frontend

• Function: Serves as the user-facing platform where users input descriptions, view generated diagrams, and interact with various features like import/export and reverse conversion.
• Tech Stack: TypeScript, Next.js, Tailwind CSS, Figma.
• Key Features:
  • Natural language input interface and diagram preview window.
  • Text-to-diagram and diagram-to-text workflows.
  • Integration with PlantUML for live rendering of UML diagrams.
  • Export options (PNG, PDF) and diagram sharing functionality.

3. LLM-Powered Input & Conversion Services

• Function: Enhances the user experience by allowing voice input and reverse diagram recognition, using AI-driven services.
• Tech Stack: Llama 3.2-Vision, Whisper API.
• Key Features:
  • Speech-to-text input for generating textual system descriptions from voice commands.
  • Image-to-text conversion to extract structured descriptions from UML diagram images.
  • Natural language interpretation of input using a Large Language Model (LLM).

Setup and Installation

1. Prerequisites

• Node.js
• npm or yarn

2. Setup

• Clone the repository.
• Install the dependencies using npm or yarn.
• Configure the environment variables.
• Run the application.