Creando diagramas con ChatGPT y Mermaid js

Rodney Guillen — Sun, 18 Jun 2023 21:55:49 +0000

Que es Mermaid JS?
Mermaid JS es una biblioteca JavaScript de código abierto que permite crear diagramas y gráficos de manera sencilla y elegante. Esta herramienta se utiliza ampliamente para representar visualmente información compleja, como diagramas de flujo, diagramas de secuencia, diagramas de entidad-relación y muchos otros tipos de diagramas.

Podemos sacar todo el potencial a ChatGPT pidiendole que nos genere un codigo listo para copiar y pegar en el visor de mermaid https://mermaid.live/

Aca les dejo unos ejemplos:

Diagrama de Flujo

Prompt

generar un codigo de mermaid js de un flujo de compras de tomates, transporte y entrega de mercancia en los supermercados

Mermaid



graph TD
  A[Cliente] -- Realiza pedido --> B((Supermercado))
  B -- Procesa pedido --> C{Hay suficiente stock?}
  C -- Sí --> D[Preparación del pedido]
  D -- Empaqueta --> E[Transportista]
  E -- Transporta --> F((Centro de distribución))
  F -- Almacena --> G[Supermercado]
  G -- Entrega --> H[Cliente]
  C -- No --> I[Notificación de falta de stock]
  I -- Solicita reposición --> J[Proveedor de tomates]
  J -- Suministra tomates --> F

Diagrama de secuencia

Prompt

podrias transformalo en diagrama de secuencia

Mermaid



sequenceDiagram
  participant Cliente
  participant Supermercado
  participant Transportista
  participant CentroDistribucion
  participant Proveedor

  Cliente->>Supermercado: Realiza pedido
  Supermercado->>Cliente: Procesa pedido
  Note over Supermercado: ¿Hay suficiente stock?
  Supermercado-->>Cliente: Sí, Preparación del pedido
  Supermercado-->>Transportista: Empaqueta y envía pedido
  Transportista->>CentroDistribucion: Transporta pedido
  CentroDistribucion->>Supermercado: Almacena pedido
  Supermercado->>Cliente: Entrega pedido

  Supermercado-->>Cliente: No, Notificación de falta de stock
  Cliente->>Proveedor: Solicita reposición
  Proveedor->>CentroDistribucion: Suministra tomates
  CentroDistribucion->>Supermercado: Almacena tomates
  Supermercado->>Cliente: Entrega pedido

Diagrama de Clases

Prompt

podras generar un diagrama de clases para este proceso

Mermaid



classDiagram
  class Cliente {
    + realizarPedido()
    + recibirPedido()
  }
  class Supermercado {
    - stockDisponible
    + procesarPedido()
    + prepararPedido()
    + entregarPedido()
    + notificarFaltaStock()
  }
  class Transportista {
    + transportarPedido()
  }
  class CentroDistribucion {
    + almacenarMercancia()
  }
  class Proveedor {
    + suministrarTomates()
  }

  Cliente "1" --> "1" Supermercado
  Supermercado "1" --> "1" Transportista
  Transportista "1" --> "1" CentroDistribucion
  CentroDistribucion "1" --> "1" Supermercado
  Supermercado "1" --> "1" Proveedor

Estos solo fue un caso de uso de ejemplo y estoy seguro que tienes en mente muchas mas ideas para aprovechar al maximo todo el potencial que ofrece chatGPT y generar tus diagramas mucho mas rapido.

Todo el codigo puedes encontrarlo en mi gist de github:
https://gist.github.com/infrony/acf8d05d7ae86efcb602bb129a5922dc

Forem: Rodney Guillen

Creando diagramas con ChatGPT y Mermaid js

Diagrama de Flujo

Prompt

Mermaid

Diagrama de secuencia

Prompt

Mermaid

Diagrama de Clases

Prompt

Mermaid