Skip to content

Diagramas Mermaid

rgdevment edited this page Oct 10, 2026 · 1 revision

Diagramas (Mermaid)

Un bloque de código cuyo lenguaje es mermaid deja de ser código y se dibuja debajo, con Mermaid. Se vuelve a dibujar al cambiar entre modo claro y oscuro, llega al PDF y lo dibuja código que va dentro de Tisty: no se descarga nada, así que funciona sin conexión.

GitHub también dibuja Mermaid, así que cada ejemplo de esta página se ve funcionando, aquí y en tu archivo en GitHub.

Un esquema

graph TD
  R[Rina] --> V[Vacunas]
  R --> P[Paseos]
  R --> C[Veterinario]
Loading
```mermaid
graph TD
  R[Rina] --> V[Vacunas]
  R --> P[Paseos]
  R --> C[Veterinario]
```

Una decisión

flowchart TD
  A[Rina te mira fijo] --> B{¿Salió hoy?}
  B -- No --> C[Sácala]
  B -- Sí --> D{¿Sigue mirando?}
  D -- Sí --> C
  D -- No --> E[Era hambre]
Loading

Repartir un total

pie title Paseos de la semana
  "Mañana" : 7
  "Tarde" : 5
  "Los dos" : 2
Loading

Quién habla con quién

sequenceDiagram
  Tú->>Tisty: escribo una tarea
  Tisty->>Disco: la anoto en el registro
  Disco-->>Tisty: guardada
Loading

Escribir uno

Escribe / y elige el bloque de diagrama, o escribe la valla a mano. Un bloque también puede llevar nombre, como cualquier bloque de código: ```mermaid title="Flujo de la versión".

Clone this wiki locally