Volver a Docs

Creando Diagramas

Básicos de Mermaid

Mermaid usa texto simple para crear diagramas. Cada diagrama empieza con una declaración de tipo.

Diagramas de Flujo

El tipo de diagrama más común. Perfecto para procesos y flujos de trabajo.

flowchart TD
    Inicio --> Proceso --> Fin

Opciones de dirección:

  • TD o TB — De arriba a abajo
  • LR — De izquierda a derecha
  • BT — De abajo a arriba
  • RL — De derecha a izquierda

Formas

Diferentes corchetes crean diferentes formas:

  • [texto] — Rectángulo
  • (texto) — Rectángulo redondeado
  • (llaves alrededor del texto) — Diamante
  • ((texto)) — Círculo

Conexiones

Conecta nodos con flechas:

  • --> — Flecha
  • --- — Línea sin flecha
  • -.->- — Flecha punteada
  • ==>> — Flecha gruesa

Agregando etiquetas

Agrega texto a tus conexiones:

A -->|Sí| B
A -->|No| C

Otros tipos de diagramas

MermaidSnap soporta muchos tipos de diagramas:

  • Diagramas de secuencia — Muestran interacciones entre sistemas
  • Diagramas de clases — Muestran estructura de código
  • Diagramas de estado — Muestran estados y transiciones
  • Diagramas ER — Muestran relaciones de base de datos
  • Gráficos Gantt — Muestran líneas de tiempo de proyectos
  • Gráficos circulares — Muestran proporciones
  • Mapas mentales — Organizan ideas
enespt-br