Project Master: aplicación para la visualización, edición y mejora de diagramas Mermaid

Abstract

En este documento se presenta una herramienta orientada a la visualización y edición de diagramas de flujo, como trabajo fin de grado. El propósito de esta herramienta es facilitar el seguimiento del desarrollo de proyectos y documentar de forma clara las decisiones tomadas a lo largo del ciclo de vida del mismo. Esta herramienta está especialmente pensada para entornos colaborativos, donde la trazabilidad de las decisiones y la comprensión visual de los procesos son elementos clave para la eficiencia y la transparencia. La aplicación incorpora dos funcionalidades principales. por un lado ofrece una interfaz basada en la vista de diagramas, permitiendo seleccionar el diagrama al que se quiere acceder para que posteriormente el usuario puede explorar el diagrama generado y completar las tareas asociadas a cada nodo, facilitando así el seguimiento del progreso y la trazabilidad de los procesos representados. Por otro lado la aplicación incorpora un modo de edición dinámico que permite al usuario generar diagramas utilizando Mermaid, el cual es un lenguaje de marcado ligero que facilita la generación automática de distintos tipos de diagrama.Este editor dinámico se ha construido usando Monaco, el mismo editor utilizado en Visual Studio Code, que proporciona una experiencia avanzada de escritura con funcionalidades como resaltado de sintaxis, autocompletado y manejo eficiente del código. El proyecto ha sido desarrollado como una aplicación web de página única, utilizando TypeScript como lenguaje de programación principal y el framework React para la construcción de la interfaz de usuario. Se ha optado por una arquitectura de software que combina elementos de metodologías ágiles,para adaptarse de forma rápida a los cambios de requisitos por parte del Product Owner y con un enfoque más clásico en cuanto al diseño del software, lo que ha permitido establecer una base sólida y mantenible para el sistema. Este trabajo ha sido desarrollado en colaboración con la empresa AVL Ibérica, en el marco de un proyecto que partía de una base inicial mínima, tanto a nivel funcional como estructural. A partir de esta base, se ha diseñado y construido una solución completa, incorporando nuevas funcionalidades, refinando el diseño existente y aplicando buenas prácticas de Ingeniería del Software. Esta colaboración ha permitido aplicar los conocimientos adquiridos en el ámbito académico a un entorno profesional real, integrando el trabajo en equipo, la comunicación con stakeholders y la entrega de valor continuo.

The main objective of this project is the development of an interactive web application designed to visualize and edit flowcharts. The tool aims to facilitate the tracking of project development and the documentation of key decisions made throughout its lifecycle. It is especially useful in collaborative environments, where visual clarity and traceability of decisions are essential for effective communication and transparency. The application includes a dynamic editing mode that enables users to generate diagrams using Mermaid syntax, a text-based diagramming language widely adopted in technical documentation. To enhance the editing experience, the Monaco Editor has been integrated, providing features such as syntax highlighting, autocompletion, and efficient code handling. The project was developed as a single-page application (SPA) using TypeScript as the primary programming language and React as the framework for building the user interface. A hybrid development approach was adopted that combined agile methodologies, to accommodate evolving requirements from the product owner, with more traditional software design practices to ensure a robust and maintainable architecture. This work was carried out in collaboration with AVL Ibérica, as part of a project that began with a minimal functional and structural base. From this starting point, a complete and functional solution was developed, expanding features, refining the user experience, and applying software engineering best practices in a real-world professional context.