Crea diagramas de flujo gratis con ChatGPT y Draw.io

Publicado el

diagrama de flujo con chatgpt

ChatGPT es capaz de hacer muchas cosas, y entre ellas está la posibilidad de crear índices y estructuras que podemos transformar en diagramas de flujo.

Así es, entre sus muchas habilidades, se encuentra la fascinante capacidad de generar índices y estructuras complejas que, con un poco de creatividad, podemos convertir en diagramas de flujo visualmente atractivos y funcionales. Este proceso puede parecer intimidante al principio, pero en realidad, es bastante accesible gracias a algunos trucos simples que estoy emocionado de compartir  en este vídeo de solo un minuto:

Como veis, los pasos son sencillos:

  • Inicio del proceso: Comenzamos solicitando a ChatGPT que nos proporcione la estructura detallada de lo que queremos diagramar. Esta estructura puede ser cualquier cosa, desde un flujo de trabajo de un proyecto hasta el esquema de un programa de software.
  • Generación del código Mermaid: A continuación, pedimos a ChatGPT que nos entregue el código Mermaid correspondiente a esa estructura, teniendo cuidado de especificar que lo haga sin utilizar paréntesis para evitar errores de sintaxis. Este código actúa como el esqueleto de nuestro futuro diagrama.
  • Utilización de Draw.io: Con el código en mano, nos dirigimos a Draw.io (o diagrams.net, su nueva denominación), una herramienta en línea gratuita y poderosa para la creación de diagramas. Aquí, simplemente hacemos clic en el signo «+» para introducir nuestro código Mermaid.
  • Visualización y edición: Instantáneamente, Draw.io transforma el código en un diagrama de flujo completo, listo para ser personalizado y editado según nuestras necesidades. Esta es la etapa donde nuestra creatividad puede brillar, ajustando el diagrama para que se adapte perfectamente a nuestros requisitos específicos.

Como veis, más fácil imposible. Lo ideal, claro, es editar el código Mermaid antes de llevarlo a Draw.io, pero también podemos modificar el diagrama de flujo creado dejando solo los componentes que más nos interesen.

diagrama de flujo

Qué es el código Mermaid

El código Mermaid es una sintaxis especializada utilizada para crear diagramas y visualizaciones gráficas como diagramas de flujo, diagramas de secuencia, diagramas de Gantt, y más, directamente dentro de documentos de texto. Mermaid reduce la necesidad de herramientas externas de diagramación al permitir a los usuarios incorporar diagramas utilizando solo texto en su documentación o notas, facilitando así su creación, mantenimiento y compartición.

La idea detrás de Mermaid es simplificar la creación de diagramas complejos con una sintaxis legible y fácil de escribir, similar a cómo Markdown simplifica la creación de documentos con formato. Puedes escribir código Mermaid en archivos Markdown y, con el soporte adecuado (por ejemplo, en editores de texto que lo soporten, GitHub, GitLab, y otras plataformas de documentación), este código se renderiza automáticamente como un diagrama visual.