Diagramas de flujo a través de ficheros de texto o XML

Hi folks,

el año pasado cree un hilo “De UML a código”, donde buscaba algún programa que me generara código a partir de diagramas UML. De ese hilo saqué el sw Día, el cual uso mucho y me encanta.

OJO: No uso/hablo ahora de diagramas UML, sino diagramas de flujo normales y corrientes.

El caso es que últimamente me apoyo mucho en mis diagramas de flujo y van cogiendo un tamaño considerable. Cada nuevo “añadido” que tengo que hacerle al flujo del programa se me lleva mucho tiempo en modificarlo.

Me gustaría saber si conocéis algún sw que genere diagramas de flujo a través de XML o algun documento de marcado texto. Ya que esto agilizaría mucho el proceso de añadirle cosas. El resultado sería poder hacer algo así por ejemplo:

  • Inicio
    • Paso 1
      • ¿Paso 1 OK?
        • Si -> Paso 2
          • Fin
        • No -> Paso 3
          • Paso 2

Y genere

3 Me gusta

Yo para algunas pruebas rápidas he usado algún generador “online” (si , ya sé que aquí si no tenéis el código para compilarlo y no se ejecuta en vuestro PC no os gusta) . Para UML los hay patadas, así que supongo que para diagramas de flujo deben existir similares.

Una búsqueda rápida me lleva a mermaid (https://knsv.github.io/mermaid/live_editor/ ) y parece que hay una librería por detrás así que seguramente puedas tener tu editor también en local.

Lo que no me gusta de todas estas herramientas es que todas se inventan su propio lenguaje en vez de usar YAML/JSON/XML o algún otro estándar.

1 me gusta

Es posible que el propio DIA tenga algo por el estilo. De hecho, DIA guarda los diagramas en formato XML, por lo que no debería ser excesivamente complicado hacer la inversa a base de ingeniería inversa (valga la redundancia).

Por aqui tienes explicaciones sobre como funciona este formato, si encuentro algo más, te lo paso.

https://mail.gnome.org/archives/dia-list/2004-February/msg00088.html

2 Me gusta

Otra opción a considerar es https://www.yworks.com/products/yed
Es Java y no es software libre, pero la verdad que este editor me encanta. Tiene una opción para importar de Excel (no recuerdo si también de csv) muy potente a la que luego puedes aplicar estilos (colores, formas, …). Lo usaba para pintar diagramas en despliegues muy complejos en clientes cutres que no tenían bien inventariados sus máquinas, por lo que al final era más fácil mantener un listado de máquinas y sus relaciones (el servidor se conecta con la bd, el balanceador con los n servidores) . Cambiar algo en la arquitectura era actualizar el listado, importar en yEd, aplicar los estilos y exportar a SVG para tener un diagrama navegable e interactivo.
Creo que valdría igualmente para diagramas de flujo, que no dejan de ser cajitas con flechas entre ellas y títulos , notas y comentarios.

Gracias @sebastian.blanes pero esto no difiere mucho de Dia.

Lo que quiero es poder definir el diagrama yo en un archivo (xml, json, whatever) y que el programa me genere el diagrama de flujo. No quiero diagrama de clases, ni de bbdd, ni nada de eso. Solo poder tener visualmente por donde van las cosas, ya que cuando te piden modificar algo, y tienes muchos casos especiales, es una ayuda de la hostia, porque voy muuuucho más rápido. El problema es que me tiro un cojón de tiempo modificando el diagrama de flujo.

Dia te guarda los proyectos en un fichero .dia. Lo he abierto con ATOM y me dice que es un “mixed XML” pero todos son caracteres en plan emoticonos, parece lengua ENT, no entiendo nada

1 me gusta

Veo muchas diferencias con Dia con las opciones que te he escrito, pero no me sé explicar mejor, en una escribes en un lenguaje de marcado y en la otra un excel.

Otra opción puede ser https://code2flow.com/ donde escribes pseudocódigo y te lo transforma en diagrama.

[…]

Me gustaría saber si conocéis algún sw que genere diagramas de flujo a
través de XML o algun documento de marcado texto. Ya que esto agilizaría
mucho el proceso de añadirle cosas. El resultado sería poder hacer algo
así por ejemplo:

Me empiezo a preguntar si sabes buscar en Internet. :^m

Salud y Revolución.

Lobo.

3 Me gusta

Muchas gracias @Razlobo !!! Parece que ese me puede servir

Pues me vas a tener que dar unas clases porque no atino macho :wink:

Pues si que me explico mal. Ese enlace te lleva a mermaid, que es lo primero que te había comentado.

[sebastian.blanes] sebastian.blanes
http://foro.hacklabalmeria.net/users/sebastian.blanes
15 Junio

klin:

Parece que ese me puede servir

Pues si que me explico mal. Ese enlace te lleva a mermaid, que es lo
primero que te había comentado.

A lo mejor lo que le ha cuadrado a @klin es que el enlace era de un
editor y no de una biblioteca.

En cualquier caso hay opciones para utilizar Mermaid junto a Pandoc así
que cualquier editor te sirve:

https://searx.me/?q=mermaid%20pandoc&categories=general

La duda que me queda es si serviría para generar PDF porque en la
documentación he visto que todo es HTML.

Salud y Revolución.

Lobo.

[…]

Pues me vas a tener que dar unas clases porque no atino macho :wink:

Pues tampoco te creas que soy el más indicado, últimamente hago
búsquedas que me dan resultados en blanco, y creo que estoy muy lejos de
estar en la vanguardia de algo.

Salud y Revolución.

Lobo.

Soy un zote y analfabeto funcional, así que disculpame @sebastian.blanes :pray: , porque el enlace que vi tuyo de mermaid pensaba que era solo para el tipo de diagramas que salen. Pero gracias a la pagina de typora fue donde vi la mayoría de posibilidades.
Después de pelearme ayer por la tarde, me interesan los diagramas que genera con flowchartjs. El problema es que o yo no atino a hacer bien los flujos en markdown, o el editor de typora no los genera.

Probablemente acabe usando FlowChartJS directamente

1 me gusta

Con Pandoc puedes convertir MD a lo que te de la gana (PDF incluido).

¿Pero realmente te vale hacerlo en JavaScript? Que yo no pongo pegas a eso, pero depende de donde vayas a meterlo.

No tienes que hacerlo en JS. Simplemente copias la plantilla que hay, y en modo texto le añades en un campo el flujo que quieres.

Digan lo que digan: despues de “haciendo presentaciones con LaTex via Prosper” (que muchos años despues acabó convirtiendose en “presentaciones desde markdown con reveal.js”), lo de “haciendo gráficos Gantt con markdown” se lleva la palma.

fan, me declaro.

1 me gusta

Yo uso https://www.draw.io/ y siempre me hace el apaño muy bien.

Guarda en formato XML, ya no se a la inversa si es útil

Pues parece que no mucho…

<mxfile userAgent="Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.104 Safari/537.36" version="6.8.3" editor="www.draw.io" type="device">
<diagram id="ef16198a-eb94-94b0-e61c-b80973f99ba3" name="Page-1">
1ZZNc4IwEIZ/DXdJVPRaa9tDe/LQcwor0AaWiYtIf30jWURKv2Y6terBSd5s9uP1YcSTi2x3a1SRPGAE2hOjaOfJa0+IWSDs916onTAeB06ITRo5ye+EVfoKLI5YLdMINr1AQtSUFn0xxDyHkHqaMgarftgadb9qoWIYCKtQ6aH6mEaU8Fgi6PQ7SOOkrexP5+7kSYUvscEy53qekOvm444z1ebiQTeJirA6kuTSkwuDSG6V7Rag99a2trl7N5+cHvo2kNNPLozdha3SJbQdN31R3XoBkbWGt2gowRhzpZedetXMC/uMI7tLKNN26dvlMxDV/OuqktBKXYZ7xILjXM19oU/HYGmDpQk5ilslZWLgKHmw0JIJmAGZ2oYY0IrSbT+7YkbiQ1znk12wVR/bJr63rW9KlaQEq0I1vVf2mekbxenAEOy+tmA4XHtBMlJ1yyTvqw5gv8UuOYJ3Ovq9H9MLxkgOMZqcCCN5fhjJ/8RodsEYTYYYBSfCaHL+GInJCTGaXzBGwRAjcSKMgvPD6P2f2l9iZLfde1dzdvRuK5dv
</diagram>

Es XML, pero un XML que solamente Draw.io puede entender

1 me gusta