Creando 图与 ChatGPT 和 Mermaid js

这是美人鱼 JS 吗？
Mermaid JS 是一个 JavaScript 库，允许创建图表和图形，操作简单且优雅。此工具可充分利用代表视觉信息的完整功能，例如流感图表、安全图表、实体关系图表以及许多其他图表技巧。

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

举几个例子：

流体图

迅速的

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

美人鱼



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

安全图

迅速的

podrias transformalo en diagrama de secuencia

美人鱼



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

分类图

迅速的

podras generar un diagrama de clases para este proceso

美人鱼



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

您可以单独使用 ejemplo 和 estoy seguro que tienes en Mente muchas ideas para aprovechar al maximo todo el potencial que ofrece chatGPT y generic tus graphas mucho mas rapido。

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

文章来源：https://dev.to/infrony/creando-diagramas-con-chatgpt-y-mermaid-js-4h6m