Anti-NoCodeTools: Diagramas

Bueno aquí un templario que lucha contra la tontería de las no code tools con artículos como:

Porque niños, eso de usar productos comerciales es como ir a la trabajadora sexual mas enferma que encuentres en un sucio callejón a intercambiar fluidos corporales por una pequeña y mal pagada suma de económica.

Pues eso de perder el tiempo con el ratoncito, subiendo un chispi, un poquitin pa’arriba o pa’abajo una caja en un diagrama, pues no se…siempre hay gente en los curros que no son cooperativas que les pagan por perder el tiempo, pero a los demás, no. Y además como en la mierda de sociedad que vivimos que el 8+8+8 es una mentira «asin de gorda» porque no tienes 8 horas para ser un humano con tus aficiones y si tienes que hacer un diagrama para algo, no tienes tiempo para jugar con el ratoncito cambiado la fuente y su tamaño.

Por eso «everything as code» o en español «todo a código», porque perder tiempo y ganar miopías dejando un diagrama bonito, cuando mejor escribirlo y una vez hecho, si acaso darle después cariño vía configuración (o ficheros de estilos que tenga) al diagrama generado.

Bueno pues vamos a hablar de las alternativas en software libre para escribir diagramas.

Empezamos por el mas viejo:

Graphviz

Que comenzó como un proyecto interno de la AT&T y se libero hace 35 años (en 1991), escrito en lenguaje C. Es el mas viejo y el que podemos decir que es un Heartbleed del software libre, porque tiene un bug muy gordo para hacer diagramas verticales (que crezcan en vertical) y como es software libre…todo el mundo lo usa y nadie pone un mísero dolar, euro o peseta para arreglarlo, . Por eso veras en caras herramientas o empresas que ofrecen sus servicios en la nube con algunos diagramas «un poco feos»…pues ahí lo tienes.

Otra cosa que da un poco jaqueca es que tiene dependencias del sistema de X, por lo que si tienes un servidor ahí con poquitos paquetes y limpio, cuando metes graphviz te instala cosas muy bizarras.

No obtante le tengo cariño porque para hacer un diagrama es tan simple como (cojo el diagrama del artículo Tocate los pies: NoCode tools II ):

digraph La_felicidad_de_las_nocode_tools {
  // title
  labelloc="t";
  label="La felicidad de las nocode tools.";

  "Fichero\nproyecto" [shape=box];
  "NoCode\nTool" [shape=box3d];
  "Bonita\nAplicación" [shape=note];
  
  "Usuario feliz" -> "NoCode\nTool"
  "Fichero\nproyecto" -> "NoCode\nTool"
  "NoCode\nTool" -> "Bonita\nAplicación"
}

Y para generarlo es:

dot -Tjpg /tmp/diagrama.gv -o /tmp/diagrama.jpg

Saliendo este bonito diagrama:

PlantUML

El siguiente que mas me pegado en un curro (bueno con grapviz también lo he trabajado mucho en una empresa que perdió su espíritu…que destrozo humano fue para mucha gente) que estuve, allí aunque nos trataban como gallinas ponedoras de huevos hacían pero hacían muy bien metodología y usábamos muchos diagramas hechos en plantuml (embebidos en otra herramienta que le cogí cariño (pese a estar hecha en ruby) Redmine.

En si plantuml se invento para hacer los UML (que era la piedra filosofal de los comerciales, CEOs y demás gente que no trabaja directamente en los 90, que creían que a partir de los diagramas UML iba aparecer mágicamente el código sin necesidad de esos melenudos metaleros programadores) pero le han metido mas diagramas y formas de usarlo (hasta un sudoku y el juego de morirse de hambre en USA).

Picado en java, tiene muchas formas de usarlo (en su momento lo usábamos embebido en redmine como dije) desde linea de comando con su cli, ha lanzar un pequeño servidor web con un formulario pequeño para hacer el diagrama ahí en vivo. Tienen un docker para hacer fácil en plantuml/plantuml-server el server web.

Copio el código del articulo anterior que era para plantuml:

@startuml
actor "Usuario feliz" as usuario
file "Fichero\nproyecto" as fichero
node "NoCode\nTool" as nocodetool
artifact "Bonita\nAplicación" as aplicacion

title La felicidad de las nocode tools.

usuario --> nocodetool
fichero --> nocodetool
nocodetool --> aplicacion
@enduml

Y la ejecución en la linea de comando es:

java -jar plantuml.jar /tmp/diagrama.puml -tpng /tmp/diagrama.png

Ofreciendo el bonito diagrama de:

mermaid-cli

Es de los que menos me he pegado, usa un lenguaje de estos novedoso (vamos js con npm y tal), por lo que usarlo en web es relativamente fácil pero ademas tienen un cli.

Y el código del diagrama es:

graph TD

A[Fichero<br />proyecto] --> B{{NoCode<br />tool}}
C([Usuario feliz]) --> B
B --> D[[Bonita<br />Aplicación]]
Y para ejecutarlo…escribo el paso  de instalarlo localmente con npm (es un poco bestia por que instala un chromium headless, la instalación es 358mb en total …lo de siempre con la alegría de npm):
npm install @mermaid-js/mermaid-cli

npx mmdc -i /tmp/diagrama.mermaid -o /tmp/diagrama.png

Y da el siguiente y bonito diagrama:

ditaa

Gracias Swicher por darme lo a conocer, es de agradecer que gente buena lea el blog y encima te ayude a aprender.

Es curioso porque aquí los diagramas «los pintas» en ASCII y ya es algo «legible» para el que no conozca el código. Escrito en Java tiene su herramienta para hacerlo desde la linea de comandos.

Y como en las anteriores herramientas code (because code is the best) para diagramas, os muestro como es con ditaa (obra de Swicher en un gist):

La felicidad de las nocode tools.
+----------------+  +--------+
|👤 Usuario feliz|  |{d}     |
+------------+---+  |Fichero |
             |      |proyecto|
             |   /--+--------+
             |   |
             v   v
           +------+
           |{io}  |
           |NoCode|
           |Tool  |
           +--+---+
              |
              v
        +-----------+
        |Bonita   📜|
        |Aplicación |
        +-----------+

En muchas distribuciones de GNU/Linux que tienen ditaa pero voy a usar la versión jar (standalone ….lo que me costo encontrar una traducción a esta para los juegos libres que empezaron como un mod de quake3 y con la liberación del motor fueron juegos «independientes»).

Y para obtener la imagen es:

(actualmente hay un bug y para que salgan los emoji solo funciona si la salida es svg)

java -jar ditaa-0.11.0-standalone.jar diagrama.ditaa --svg diagrama.svg

Y para PNG (que no salen los emoji)

java -jar ditaa-0.11.0-standalone.jar diagrama.ditaa diagrama.png

Y nos sale el bonito diagrama:

Ya veis que con código se puede hacer casi todo, quizá por ser crítico, lo que echo de menos en muchas de estas herramientas es algún fichero tipo css para configurar estilos por si quieres afinar y sea mas limpio, en plan «fichero diagrama» + «fichero de estilos».

Por cierto mientras escribía estas lineas (que han sido varios días) en uno de los barrapuntos americano ha salido la noticia de graphviz:

Create diagrams with code using Graphviz

4 comentarios sobre “Anti-NoCodeTools: Diagramas”

  1. Sin duda a la herramienta que le he dado mas caña es PlantUML, una delicia solo escribir el código, enfocándome en lo más importante: el contenido, y que el resultado salga tan bello estéticamente, además de ser muy práctico fuera del ámbito del programador para hacer mapas mentales, diagramas de flujo, listas, etc.
    También usé en su tiempo ditaa, la única pega que le tengo es el tedio de «dibujar» el diagrama en sí.

    Tengo compañeros que me preguntan como hago esos dibujos «bonitos», y en cuanto les muestro el código se echan para atrás. Al parecer los que queremos hacer la mayoría de cosas con puro código/comandos/terminales/vim/emacs estamos a otro nivel de frikismo :P

    1. Gracias, jejeje parece que no somos 4 gatos. PlantUML es una delicia.

      La gente, estas cosas les asusta, la adicción de los iconos y los ratones, encontré de xkcd un ejemplo muy gracioso del terminal…lo he buscado y no lo he encontrado, pero era cada viñeta en una época de la informática y el usuario con una terminal siempre alegrandose de lo bueno que va todo en terminal, y la última en el futuro en plan un interfaz en 3D y diciendo que bien va la terminal.

  2. Se agradece por la mención y en cuanto a ditaa y los emojis, en ese gist había especulado con que en mi caso el png se genera sin problemas por que tengo instalado Symbola (quizás no sea tan colorida como otras fuentes del mismo tipo, pero me alcanza para poder ver los emojis y es bastante ligera). Aunque ya que dices que con SVG funciona bien, lo que se podría hacer entonces es convertir primero a ese formato y luego pasarlo a png con algo de lo que se muestra aquí (al menos hasta que arreglen ese bug).
    PlantUML se ve interesante y no es muy difícil comprender el código de los diagramas cuando te tomas un momento para leerlos. Puede que algún día lo pruebe.

    1. PlantUML esta muy bien, creo te resultará fácil de aprender.

      Mola mucho el link, la verdad que inkscape es muy potente, eso de convertir vía terminal es útil para meterlo en un bash y no tener que tirar de ratón.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.