Archivo de la etiqueta: everything as code

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

Getting Things Done: versión Miguel

Ya hace años de la charleta Getting Things Done sobre  de Netskaven en el Hacklab de Vallekas llamado La brecha digital. No se si yo estaba viviendo buenos tiempos, que me daba tiempo a tener un tiempo personal pleno…y por eso no la vi como un rollo para la vida personal mas plena, si no la tontería de los pringados con ordenador de manzanita que se autoexplotan en los curros de informática (manda cojones, la gilipollez máxima). Pero es que el señor Netskaven tenia razón…cuando te falta tiempo en las horas importantes de tu día, las tuyas, no las que das mal pagadas por el empresario. A parte creo que no entendí lo de que podía haber varias listas de to-do y que iba a ser todo un batiburrillo, mil perdones Netskaven.

Pregunta:

¿No os ha pasado alguna vez que estando ya ha ultimas horas de la noche en ese momento libre que le robas a Morpheo…que estas con el run-run de querer hacer algo productivo y no desperdiciar esas pocas horas jugando a un videojuego…pero no sabes en que jaleo de los miles que tienes abierto meterte?

¿No tenéis algunas veces cansancio mental de llevar tantas cosas personales que te alegran mientras estas esclavizado en la cabeza ocupando sitio mientras pasas las horas esclavizado?

Pues ahí es donde entra el GTD.

Después de leer de todo por internet, hacer memoria de la charleta de Netskaven (porque el git de las charlas de LabrechaDigital esta caído) y cagarme en todo con la mierda de articulo de la wikipedia española y la mierda de diagrama…parecería si fuera paranoico que lo ha escrito alguien que quiere fomentar la venta del libro…al contrario que algunos juegos de mesa que el articulo de la wikipedia te da el reglamento….y con un poco de maña, tijeras, pegamento  o si eres pro una impresora 3D, te haces con tu versión del juego de mesa.

He hecho un compendio, del diagrama GTD, por eso le he dado la versión miguel, es un diagrama de flujo (para diagrama de flujo cañero los diagrama Drakon de la Unión Soviética mas o menos al uso que se usaban mucho en los 80 cuando los Spectrum. Y esta hecho con mi querido PlantUML por el rollo de que paso andar ahí perdiendo el tiempo colocando las cosas, la vida es mejor en Everything-as-Code .

Os pego el código.

@startuml
title Get Things Done (Miguel version)

legend top right
  * Revisar Periodicamente (diario, semanas, cada hora)
  * Tipos de Bandejas
  ** Calendario
  ** Ejemplos:
  *** Prioritario
  *** Personal
  *** Trabajo
  *** Familia
  *** Proyecto X
  * El orden de revisón de bandejas lo eliges tu,
  salvo calendario que es la primera.
  * Tener las bandejas y calendario en el móvil.
  * Nuevo proyecto sera tareas: crear bandeja, listar subtareas, ...
  * Metodología:
  ** Recopilar
  ** Procesar
  ** Organizar
  ** Revisas
  ** Hacer
  * Evitar complejas relaciones de tareas
    (intentar que sean atómicas).
endlegend

:Recopilar;
split
  :Cosas;
split again
  :Notas;
split again
  :Emails;
split again
  :Bandeja X]
split again
  :Bandeja Y]
endsplit
->Procesar;
:¿Qué es?;
if (¿Se puede hacer?) then (SI)
  if (¿En un paso?) then (NO)
    split
      ->Nueva tarea;
      :Nuevo proyecto|
    endsplit
    detach
  else (SI)
    if (¿Se tarda +2 min?) then (SI)
      :¡Hazlo!>
      detach
    else (NO)

      if (¿Es mio?) then (NO)
        split
          ->Nueva tarea;
          :Esperando por "X"|
        endsplit
        detach
      else (SI)
        if (¿Tiene fecha?) then (SI)
          split
            ->Nueva tarea;
            :Meterla calendario]
          endsplit
          detach
        else (NO)
          split
            ->Nueva tarea;
            :Bandeja: XXX]
          endsplit
          detach
        endif
      endif
    endif
  endif
else (NO)
  split
    ->Eliminar;
    :Papelera/
    detach
  split again
    ->Conservar/Incubar;
    :Bandeja: Algún día / quizá]
    detach
  split again
    ->Archivar;
    :Referencia;
    detach
  endsplit
endif
@enduml

Y os pego una imágen svg…que he retocado un poquito.

Y la herramienta para llevarlo acabo pues voy a probar con
Simpletask, app software libre que esta en fdroid de mis amores. Y tener el diagrama en escritorio principal del móvil (cómo icono).