Dibujar diagramas con PlantUML

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.

Indentar el código en Visual studio Code

La herramienta de edición de código Visual studio code o más conocido como VSCode proporciona multitud de atajos de teclado y herramientas para hacer el trabajo de codificación más sencillo.

Ya vimos lo importante que es indentar bien el código fuente para que nuestro código sea más limpio y legible.

Una buena herramienta de edición de código debe incorporar algún mecanismo que nos permita corregir los errores de indentación de nuestro código y VSCode incorpora un atajo de teclado para ello.

Primero deberíamos seleccionar todo el código de nuestro fichero y luego pulsar el atajo de teclado correspondiente.

En el caso de Windows este atajo es Mayúsculas+Alt+F.

En el caso de MacOS el atajo es Mayúsculas+Opción+F.

Por último en el caso de Linux es Control+Mayúsculas+I.

Si tomamos como hábito antes de cerrar un fichero de código el corregir el nivel de indentación del mismo nos aseguraremos que todo nuestro código posee una buena indentación que mejora su legibilidad.

Dibujar diagramas para tareas de ingeniería con Mermaid

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.

Conoce el nivel de indentación del texto con VoiceOver de forma automática

VoiceOver para MacOS es incapaz de conocer y notificar el nivel de indentación del texto. Por esa razón en su día desarrollé un script que puede averiguar y verbalizar esta información. 

Este script está disponible en el repositorio de Indentation line for VoiceOver.

Usando el script manual

En este repositorio está el fichero speakIndentationLine que contiene el AppleScript para que VoiceOver verbalice el nivel de indentación del último texto verbalizado por el lector de pantallas.

Este script debía asociarse a un atajo de teclado de VoiceOver para poderlo utilizar de forma cómoda pero incluso así existía la posibilidad de perdernos un cambio de indentación debido a que debíamos revisar manualmente cada línea de un texto para conocer si había algún cambio en el nivel de indentación.

Automatizando la funcionalidad

Para solucionar el problema se ha creado un nuevo script en el repositorio llamado checkIndentationService que ejecuta la función de verificar el nivel de indentación de forma automática y sólo se verbaliza cuando se han producido cambios en el nivel de indentación.

Para que este script se ejecute de forma apropiada es necesario exportar el script como aplicación y asegurarnos que en la conversión esté marcada la opción Permanecer abierto tras el gestor de ejecución. Puedes leer sobre el proceso en el artículo Convertir un AppleScript en una aplicación para MacOS.

Una vez convertido tendremos la opción de abrir la aplicación checkIndentationService y VoiceOver verbalizará cada nuevo cambio de nivel de indentación de un texto.

Recuerda leer el fichero Readme.md del repositorio para saber cómo cambiar la voz que se utiliza para hacer las notificaciones.

Código limpio con comentarios útiles

Un código con buenos comentarios ayuda a su legibilidad como vimos en el artículo sobre cómo escribir código limpio y legible.

Cada bloque de código tiene un propósito, puede recibir parámetros y puede devolver un resultado. Toda esta información debería estar explicada brevemente en un bloque comentado, preferentemente antes de los bloques de ejecución. Por ejemplo:

// Función calculaPrecioFinalDeCarrito

//    Calcula el precio final del carrito ajustando impuestos y conversión de moneda

//

// Entrada:

//    lista de productos, tipo de impuestos, tipo de moneda

// Salida:

//    precio final a pagar por el cliente

function calculaPrecioFinalDeCarrito(listaProductos, tipoDeImpuestos, tipoMoneda) {

    var precioSinImpuestos = calculaPrecioDeListaDeProductos(listaProductos)

    var precioConImpuestos = calculaImpuestos(precioSinImpuestos, tipoDeImpuestos)

    var precioFinal = convierteAMoneda(precioConImpuestos, tipoMoneda)

    return precioFinal

}

Pero se debe ser breve y evitar comentar todo lo que hace el código línea a línea explicando sólo lo esencial.

Se debe explicar el porqué de las cosas y no cómo se hacen. Un buen código se da a entender por sí solo y no necesita extensos comentarios para ello.

Consistencia y legibilidad para un código limpio

En el artículo sobre cómo escribir código limpio y legible hablamos de la necesidad de coherencia cuando escribimos código.

Legibilidad por encima de la simplicidad

Algunos lenguajes de programación permiten realizar varias operaciones en una sola línea de código. Por ejemplo en Swift, Java o C++ podemos crear una instancia de clase, llamar a uno de sus métodos y realizar una comparación dependiendo del resultado de esa llamada todo en una sola línea de código. Esto reduce el número de líneas que pueda tener una función pero no mejora la legibilidad del código ya que quizás esas características del lenguaje de programación no son conocidas por todos los programadores.

Recuerda escribir el código para que lo pueda leer otra persona, porque incluso hay altas probabilidades que esa otra persona seas tú y puede que no entiendas tu propio código pasado unos meses o años.

Consistencia en la arquitectura de un proyecto

Una de las decisiones principales a tomar cuando empezamos un proyecto software es la de qué patrón de diseño utilizaremos para la arquitectura de nuestra aplicación.

Una vez tomada esta decisión debemos evitar mezclar arquitecturas ya que aumentamos la complejidad a la hora de entender cómo se organiza nuestro proyecto.