Cada vez estamos más acostumbrados a usar código para generar la infraestructura (IaC), documentar nuestro código (Gherkin) y multitud de tareas más, así que los diagramas no se pueden quedar atrás. Esto es debido a que usar código nos permite versionar los ficheros de manera muy fácil, ver los cambios y tener el fichero fuente para poder realizar modificaciones. Además este tipo de modelos se integran de forma perfecta con el modelo de trabajo habitual de un desarrollador, por lo que no es algo que necesite una nueva infraestructura, ni forma de proceder.
Diagramas UML
UML, acrónimo de Lenguaje Unificado de Modelado, es un estándar para esquematizar y realizar diagramas de características del software. En mi caso particular, sobre UML tuve un par de asignaturas en la carrera de Ingeniería Informática, pero el tema es demasiado extenso como para dominarlo aún después de cursarlas. En definitiva cada tipo de flecha, color, grosor y forma tiene una connotación específica que seguramente a la mayoría se nos escape, por ello os recomiendo que os centréis en los aspectos fundamentales, si vuestro trabajo no requiere de tal rigurosidad. Al final lo importante es que todos entendamos lo mismo al leer el diagrama.
Desde mi punto de vista, el tipo de diagrama más importante y que aporta más valor es el diagrama de secuencia, por los siguientes motivos:
- Representa todos los actores involucrados
- Muestra el orden en el que se producen las acciones
- Define quién es el origen de la acción y cuál es el destino
- Permite un gran nivel de detalle
- Se adapta muy bien a multitud de ambientes (desarrollo web, móvil, de escritorio, etc.)
Diagramas de secuencia con Draw.io
Una de las mejores y más polifacéticas herramientas que conozco para realizar diagramas es Draw.io, esta web permite:
- Realizar multitud de diagramas
- Personalizar cada diagrama de manera única
- Exportar los diagramas generados en múltiples formatos; imágenes, vectoriales, texto, etc.
- Sincronizar el trabajo realizado con un servicio de cloud
Un ejemplo de uso de esta web para generar un diagrama muy simple de secuencia sería el siguiente, relativo a la creación de un objeto y su almacenamiento en una base de datos.
La parte negativa de usar esta herramienta es que se tarda bastante en conseguir un estilo cuidado, donde todas las líneas vayan rectas y estén perfectamente alineadas.
Diagramas de secuencia con PlantUml
La gran ventaja de PlantUml respecto a otros sistemas es que sólo hay que preocuparse de escribir el código que generará el diagrama, de todo lo demás: estilo, formas, alineamiento, renderización, etc. se ocupará esta librería.
Para realizar el diagrama anterior sólo he tenido que escribir el siguiente código:
@startuml
actor Alice
participant Web
participant DB
activate Web
Alice -> Web: Create item
activate DB
Web -> DB: Store item
DB --> Web: return stored item
deactivate DB
Web --> Alice: return new item id
deactivate Web
@endumlComo puedes ver, con unas pocas líneas y definiendo cuatro cosillas se puede hacer un diagrama tan resultón como el anterior. El resultado conseguido es de muy alta calidad y las opciones de personalización son muchas. Seguramente esto puede que te recuerde a LaTeX, pero en mi opinión, este lenguaje de marcado es mucho más complejo.
Utilizar esta plataforma podría ser complejo sin no hubiera alguna manera de ver en tiempo real la visualización del diagrama que produciría el código que se ha escrito para ese diagrama. Para ello existe una maravillosa extensión de Visual Studio Code, que nos permite lo anterior. La extensión se llama PlantUML, como no podría ser de otra manera.
En la captura superior puedes comprobar cómo se puede trabajar fácilmente con esta herramienta debido a su sencillo, pero potente, lenguaje de marcado, para generar un diagrama. Una vez escrito el código del diagrama, se puede commitear, generar las imágenes en el proceso de CI, importar los diagramas en otros sistemas, etc.
Espero que esta herramienta os resulte tan interesante y útil como a mí.