Creando diagramas con ChatGPT y Mermaid js
Tags: chatgpt, mermaid, diagrams, documentation
Published: 2023-06-18 21:55:49

**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
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hyq5v9406seq0czw7gb0.png)

## 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
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8nvgeub6n2ca9urrfl5v.png)

## 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
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7rupnljfzi2f6fgf6fd8.png)

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