Saltar al contenido principal
Craft admite diagramas Mermaid, una forma de crear diagramas visuales escribiendo una sintaxis de texto sencilla. Escribe unas pocas líneas de código y Craft lo renderiza como un diagrama nítido y preciso directamente en tu documento. Los diagramas se actualizan en tiempo real mientras escribes, funcionan en todas las plataformas y se muestran correctamente en páginas compartidas y publicadas. Un diagrama de flujo Mermaid renderizado en un documento de Craft

​
Insertar un diagrama Mermaid

Puedes añadir un diagrama Mermaid de las siguientes maneras:
  • Escribe /mermaid y selecciona Diagrama Mermaid
  • Elige Diagrama Mermaid desde el panel Insertar en la barra lateral (en la sección Bloques enriquecidos)
  • Pega markdown que contenga una cerca de código ```mermaid — Craft la convierte automáticamente

​
Edición

Al abrir un bloque Mermaid, verás una vista dividida: el diagrama renderizado en la parte superior y el código en la parte inferior. La vista previa se actualiza en tiempo real mientras escribes. Vista dividida con la vista previa del diagrama arriba y el editor de código abajo
Haz clic en el bloque Mermaid para abrirlo en vista dividida. La vista previa del diagrama aparece en la parte superior y el editor de código en la parte inferior. Haz doble clic en la vista previa para ampliarla.
No necesitas memorizar la sintaxis de Mermaid: el Asistente de IA de Craft puede generar los diagramas por ti. Simplemente describe lo que necesitas y él escribirá el código.

​
Tipos de diagramas compatibles

​
Diagramas de flujo

Representa procesos, decisiones y flujos de trabajo. Usa graph TD para un diseño de arriba hacia abajo o graph LR para uno de izquierda a derecha. 
graph TD
    A[Start] --> B{Decision}
    B -->|Yes| C[Do This]
    B -->|No| D[Do That]
    C --> E[Done]
    D --> E

​
Diagramas de secuencia

Muestra las interacciones entre personas o sistemas a lo largo del tiempo. Un diagrama de secuencia que muestra un flujo de entrega de comida 
sequenceDiagram
    User->>App: Place order
    App->>Payment: Charge card
    Payment-->>App: Confirmed
    App-->>User: Order placed

​
Diagramas de estado

Visualiza cómo algo pasa de un estado a otro; ideal para el seguimiento de pedidos, flujos de trabajo o procesos. Un diagrama de estado que muestra el ciclo de vida de un pedido 
stateDiagram-v2
    [*] --> Draft
    Draft --> Review
    Review --> Published
    Review --> Draft : Needs changes
    Published --> [*]

​
Diagramas de clases

Muestra la estructura de un sistema: qué elementos existen, sus propiedades y cómo se relacionan entre sí. 
classDiagram
    class Document {
        +String title
        +Date created
        +publish()
    }
    class Folder {
        +String name
        +getDocuments()
    }
    Folder "1" --> "*" Document : contains

​
Diagramas ER

Modela relaciones entre datos; muy útil para diseño y planificación de bases de datos. 
erDiagram
    AUTHOR ||--o{ POST : writes
    POST ||--o{ COMMENT : has

​
Gráficos

Crea gráficos de barras, gráficos de líneas o una combinación de ambos. 
xychart-beta
    title "Monthly Revenue ($K)"
    x-axis [Jan, Feb, Mar, Apr, May, Jun]
    y-axis "Revenue" 0 --> 120
    bar [45, 62, 78, 55, 89, 105]

​
Cambiar el tema

Los diagramas Mermaid se adaptan al tema de tu editor de código. Para cambiar el aspecto, toca el icono de pincel en la barra de herramientas y elige un tema; las opciones incluyen Tokyo Night, Dracula, Nord, GitHub y más. El diagrama se actualiza al instante. Los diagramas también respetan el modo claro u oscuro de tu documento. Diagrama Mermaid en tema claro Diagrama Mermaid en tema oscuro

​
Compartir y publicar

Los diagramas Mermaid se renderizan en páginas compartidas y publicadas: cualquier persona que acceda al enlace verá el diagrama renderizado, no el código. No se necesita ninguna configuración adicional.

​
Importar y exportar

  • Importación de markdown: Pega o importa markdown con cercas de código ```mermaid y Craft creará bloques Mermaid automáticamente.
  • Exportación de markdown: Los bloques Mermaid se exportan como cercas de código estándar ```mermaid, compatibles con otras herramientas.

​
Consejos

Esto suele indicar un error de sintaxis en el código. Comprueba si hay erratas o flechas que faltan. Si estás copiando sintaxis desde otra herramienta, ten en cuenta que Craft admite diagramas de flujo, diagramas de secuencia, diagramas de estado, diagramas de clases, diagramas ER y gráficos XY; otros tipos como gráficos circulares, diagramas de Gantt o mapas mentales no están disponibles por el momento.
Sí. Describe el diagrama que necesitas y el Asistente de IA de Craft generará el código Mermaid por ti. También puedes pedirle que modifique o amplíe un diagrama existente.
En Mac y iPad, haz doble toque en la vista previa del diagrama para ampliarla. En la web, usa la vista en pantalla completa para diagramas de mayor tamaño.
Mermaid es un estándar abierto utilizado en muchas herramientas. Visita mermaid.js.org para aprender la sintaxis completa de cada tipo de diagrama.