Etiqueta: diagramas

Dibujar diagramas con PlantUML

Publicado el

El proyecto de software libre PlantUML busca proporcionar un mecanismo para dibujar diagramas mediante un código sencillo en texto.

PlantUML utiliza la plataforma Java para su herramienta de generación de diagramas. Esto a diferencia de Mermaid facilita que la herramienta  pueda ejecutarse localmente aunque también se dispone de un servicio de PlantUML onLine.

Instalación de PlantUML

La instalación de PlantUML en sistemas MacOS y Linux es muy sencilla ya que se encuentra disponible en varios repositorios.

Por ejemplo instalar PlantUML en MacOS es muy sencillo si ya se posee la herramienta HomeBrew. Sería tan sencillo como ejecutar el siguiente comando en la Terminal de Mac:

brew install plantuml
Una vez instalada simplemente en la Terminal ejecutaríamos el comando plantuml pasando como parámetro el fichero de texto con la información de nuestro diagrama.

Ejemplo de diagrama de estado

Como vimos en el artículo sobre dibujar diagramas con Mermaid tenemos un diagrama de estado que representa los posibles estados de un ser vivo.

En PlantUML el código sería algo como:

@startuml
[*] --> Nacer
Nacer -> Crecer
Crecer -> Reproducirse
Reproducirse -> Envejecer
Envejecer -> Morir
Morir --> [*]
@enduml

El diagrama generado tiene el siguiente aspecto:

Diagrama de estados generado con PlantUML

Además PlantUML permite exportar a un formato ASCII en texto que puede resultar interesante para leer con líneas braille.

El anterior diagrama tiene el siguiente aspecto en ASCII:

,------.                                                  
|*start| 
|------| 
`------' 
| 
| 
,-----. ,------. ,------------. ,---------. ,-----.
|Nacer| |Crecer| |Reproducirse| |Envejecer| |Morir|
|-----|---|------|---|------------|---|---------|--|-----|
`-----' `------' `------------' `---------' `-----'
| 
,----.
|*end|
|----|
`----'

Conclusiones

En conclusión podemos indicar que PlantUML proporciona una herramienta local sencilla y rápida para generar cierto tipo de diagramas. Proporciona algunos mecanismos de personalización que la hacen interesante para usuarios ciegos que dispongan de línea braille aunque su sintaxis quizás pueda ser más engorrosa que Mermaid para algunos tipos de diagramas de ingeniería.

Dibujar diagramas para tareas de ingeniería con Mermaid

Publicado el

A la hora de que una persona ciega pueda integrarse en un equipo técnico uno de los problemas más habituales es poder utilizar un lenguaje común entre todos los miembros del equipo. En muchas tareas y etapas de un proyecto técnico un diagrama puede ser indispensable para que todos los miembros del equipo entiendan el contexto y el momento del proyecto.

El dibujar un diagrama para una persona ciega puede ser una tarea muy compleja pero además entender el diagrama dibujado puede ser aún más complicado ya que los sistemas de reconocimiento de imagen aún no saben interpretar ese tipo de dibujos.

El software libre nos ofrece una solución para todo esto con el proyecto Mermaid.

¿Qué es Mermaid?

Mermaid es un proyecto de código abierto que utiliza tecnología Javascript para interpretar código y texto para obtener el dibujo de un diagrama.

Esta herramienta permite crear diagramas y visualizaciones usando texto y código.

Mermaid se inspira en la gramática de Markdown para que la creación de diagramas sea lo más sencilla posible.

El propósito inicial de Mermaid es conseguir que la documentación técnica de un proyecto pueda ser actualizada por completo, incluido sus diagramas, de forma rápida y eficiente.

Mermaid permite dibujar diagramas de estado, diagramas de clase, diagramas de Gantt, diagramas entidad/relación, diagramas de secuencia y diagramas de barras. Incluso permite incorporar nuevos tipos de diagramas.

Ejemplo de diagrama

Con Mermaid dibujar por ejemplo un diagrama de los estados vitales es tan sencillo como escribir un texto como el siguiente:

stateDiagram-v2
accDescr: Diagrama de estados vitales
[*] --> Nacer
Nacer --> Crecer
Crecer --> Reproducirse
Reproducirse --> Envejecer
Envejecer --> Morir
Morir --> [*]

El diagrama obtenido es el siguiente:

Diagrama de estados vitales dibujado por Mermaid

Con muy pocas líneas de texto bastante comprensible una persona ciega y otra persona que interprete mejor la información en diagramas pueden comunicarse y trabajar juntas.