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
Top comments (0)