T03_G02

Our team aims to develop an AI tool - DiagramIt for requirements engineering that automates the creation of graphs and diagrams. This tool will use AI to streamline the visualization of complex system requirements.

Vision

DiagramIt seeks to transform requirements engineering by offering a highly intuitive, AI-powered platform where users can convey their needs for diagrams and visual structures through natural language. Users will be able to specify the diagram type—such as flowcharts, sequence diagrams, class diagrams, or other UML formats—and the AI will instantly generate accurate, high-quality visualizations. These diagrams can be rendered as static images or interactive models, depending on user preferences.

The platform will include intelligent feedback mechanisms, helping users refine diagram elements as requirements evolve. By automating the technical aspects of diagram creation, DiagramIt aims to simplify complex visual documentation, allowing users to concentrate on project logic and strategic planning. This approach will streamline development workflows, minimize errors related to manual diagramming, and foster real-time collaboration across teams, making system design and documentation faster, more accessible, and more accurate for both technical and non-technical stakeholders.

Our vision is to make DiagramIt the go-to tool for seamless project planning and visual communication, empowering users of all technical levels to generate meaningful diagrams effortlessly, boosting productivity and clarity throughout the software development lifecycle.

Research

Our research involved examining similar projects and platforms that offer diagram generation tools. We explored five key platforms:

Graphviz:

Graphviz is an open-source tool for creating diagrams, such as flowcharts and graphs, using the DOT language—a text-based format that specifies relationships between elements. Widely used for automating diagrams in technical workflows, Graphviz is a versatile solution with an API for generating diagrams programmatically.

Pros:

• Robust and flexible;
• Extensive support for complex graphs;
• Customizable through DOT scripting.

Cons:

• Requires knowledge of DOT language;
• Limited visual styling options compared to GUI tools.

MermaidJS:

MermaidJS is a JavaScript-based library that generates diagrams from plain text, making it highly popular in technical documentation for creating UML diagrams, Gantt charts, and flowcharts. It integrates seamlessly into web pages and documentation platforms, making it accessible for developers.

Pros:

• Easy to integrate into web applications;
• Supports various diagram types;
• Ideal for live documentation.

Cons:

• Limited customization options;
• Requires embedding into a web environment to run.

Lucidchart:

Lucidchart is a web-based, commercial tool known for creating UML diagrams, flowcharts, and more. With real-time collaboration features and a RESTful API, it suits team projects needing interactive feedback and integration with other systems.

Pros:

• Highly user-friendly;
• Offers a rich library of shapes and templates;
• Strong collaboration features for teams.

Cons:

• Subscription-based pricing;
• API access and some features are limited to premium tiers.

Diagrams.net (Draw.io):

Diagrams.net, also known as Draw.io, is a free, web-based tool that supports UML diagrams, flowcharts, and wireframes. It integrates with Google Drive, GitHub, and other platforms, with an API allowing automation of diagram generation.

Pros:

• Free to use;
• Seamless integration with cloud storage and repositories;
• Intuitive interface.

Cons:

• Lacks advanced diagramming capabilities found in specialized tools;
• Limited support for complex UML diagrams.

Nomnoml:

Nomnoml is a lightweight JavaScript library focused on UML class diagrams, allowing developers to quickly generate diagrams from text for basic documentation purposes. It is known for its simplicity and ease of integration into JavaScript projects.

Pros:

• Simple and fast for basic UML class diagrams;
• Easy to implement in JavaScript applications.

Cons:

• Limited to class diagrams;
• Minimal customization options;
• Lacks features for other UML types.

These platforms informed our approach to designing a solution for our simulator project.

Domain Analysis

This domain analysis provides an overview of the system's interactions, allowing for diagram generation and customization based on user inputs. It explains how specifications are translated into PlantUML code and graphics, making dependencies and user interaction flow more clear. Include high-level class diagram with key domain concepts. Complement this diagram with other high-level diagrams has appropriate (activity, sequence, etc.).

Architecture and design

This overview of the architecture and design demonstrates the modular structure of the system and how the Frontend, Backend, and External Services components all work together.

Technologies

For DiagramIt, we will leverage a combination of powerful, efficient technologies: Node.js, MongoDB, React, and Material-UI. Here's why each is ideal for this project:

• Node.js - As a server-side JavaScript runtime, Node.js allows for fast, non-blocking I/O operations, perfect for handling the real-time requirements of diagram generation and AI-driven interactions. Its scalability and large ecosystem of libraries make it an excellent choice for building the backend and managing concurrent user requests effectively.

• MongoDB - A NoSQL database, MongoDB is highly flexible, allowing us to store data in JSON-like format, which aligns well with the unstructured nature of requirements and diagrams. It’s particularly well-suited for rapidly evolving data, enabling seamless handling of diverse diagram attributes and user-generated content, and providing fast, scalable data retrieval.

• React - It is ideal for building a dynamic, responsive user interface that can interact with the backend and update diagrams in real-time. Its component-based structure allows for reusability and maintainability, while React’s virtual DOM optimizes rendering speed, ensuring a smooth user experience when dealing with interactive diagram features and real-time updates.

• Material-UI - It provides a robust set of pre-built, customizable React components, designed with Material Design principles. This helps speed up development while ensuring the application has a modern, consistent, and user-friendly interface. Its responsive design capabilities make it easy to create a polished experience across different devices and screen sizes.

Together, these technologies provide a high-performance, scalable, and user-friendly foundation for DiagramIt, allowing us to efficiently build, deploy, and maintain a powerful AI-driven diagram generation tool.

Development guide

Explain what a new developer to the project should know in order to develop the system, including who to build, run and test it in a development environment.

Document any APIs, formats and protocols needed for development (but don't forget that public APIs should also be accessible from the "How to use" above).

Describe coding conventions and other guidelines adopted by the team(s).

Security concerns

Identify potential security vulnerabilities classes and explain what the team has done to mitigate them.

Quality assurance

Describe which tools are used for quality assurance and link to relevant resources. Namely, provide access to reports for coverage and mutation analysis, static analysis, and other tools that may be used for QA.

How to use

Explain how to use your tool from an user standpoint. This can include short videos, screenshots, or API documentation, depending on what makes sense for your particular software and target users. If needed, link to external resources or additional markdown files with further details (please add them to this wiki).

How to contribute

Explain what a new developer should know in order to develop the tool, including how to build, run and test it in a development environment.

Defer technical details to the technical documentation below, which should include information and decisions on architectural, design and technical aspects of the tool.

---

Here’s a rewritten and completed version of your sprint retrospective:

---

Sprint 1 Retrospective

What Went Well

• Maintain the strong collaboration and teamwork that allowed the successful completion of all planned user stories.
• Maintain the organized approach that kept everyone aligned with sprint goals and expectations.
• Maintain good communication, allowing us to know everything that happens during labs and lectures and be on time when we need to work.

What Could Be Improved

• Communication: Active interactions with other groups were limited, potentially delaying collaborative opportunities.
• Assigning user stories: Instead of waiting for members to complete their current tasks before starting new ones, implement a more balanced allocation method to avoid overloading specific team members.

General Insights

• The sprint's success underlines the effectiveness of the team's collaboration and planning.
• Exploring new methods and refining existing processes will help the team maintain its current state and prepare them for more complex challenges in the coming sprints.

---

Sprint 2 Retrospective

What Went Well

• Maintain the strong collaboration and teamwork that allowed the successful completion of most planned user stories.
• Maintain the focus and determination required to complete tasks on time.
• Preserve the proactive approach to identifying and addressing challenges as they arise.

What Could Be Improved

• Communication: Establish regular check-ins or daily stand-ups to ensure better synchronization across the team and avoid miscommunication.
• Organization: Despite our efforts, the team was unable to fully resolve the integration issues in time, which impacted the completion of certain user stories.

General Insights

• Focusing on continuous learning and knowledge sharing will help the team handle more complex processes in the future.

Sprint 2 Review

Sprint 3 Retrospective

Sprint 3 Planning

Contributions

Team 2

• Hugo Hovhannessian
• Iva Nikolova (PO)
• Maria Carlota Gomes Silva
• Rodrigo de Oliveira Esteves (SM)
• Saghi Virag