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 mermaidhttps://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)
For further actions, you may consider blocking this person and/orreporting abuse
