Mermaid es una herramienta de JavaScript que utiliza una sintaxis basada en Markdown para representar diagramas, gráficos y visualizaciones personalizables.

Para insertar un diagrama Mermaid, rodee el código del diagrama con el marcador ```mermaid.

1. Mermaid puede cargar múltiples diagramas, en la misma página.
2. Algunos diagramas (como el gráfico de git y los diagramas de Gantt) pueden tener problemas de escala, ya que pueden volverse demasiado anchos con facilidad.

Puede jugar con ellos en Mermaid Live Editor.

flowchart

Diagrama de flujo

%%{init: {
   securityLevel: 'loose'
}}%%
flowchart LR
  A[Capture] --> B(Document) --> C{{Review and<br/>Approve}} --> D(Publish) --> E((( )))

graph TD
   B[peace]
   B-->C[fa:fa-ban forbidden]
   B-->D(fa:fa-spinner);
   B-->E(fa:fa-camera-retro perhaps?);

sequenceDiagram

Diagrama de secuencia

sequenceDiagram
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!
    Alice-)John: See you later!

classDiagram

Diagrama de Clases

classDiagram
  direction RL
  class Student {
    -idCard : IdCard
  }
  class IdCard{
    -id : int
    -name : string
  }
  class Bike{
    -id : int
    -name : string
  }
  Student "1" --o "1" IdCard : carries
  Student "1" --o "1" Bike : rides

stateDiagram-v2

Diagrama de estados

---
title: Simple sample
---
stateDiagram-v2
    [*] --> Still
    Still --> [*]

    Still --> Moving
    Moving --> Still
    Moving --> Crash
    Crash --> [*]

erDiagram

Diagrama de Entidad-Relacion - Experimental

erDiagram
    CAR ||--o{ NAMED-DRIVER : allows
    CAR {
        string registrationNumber
        string make
        string model
    }
    PERSON ||--o{ NAMED-DRIVER : is
    PERSON {
        string firstName
        string lastName
        int age
    }

journey

Diagrama de Recorrido de Usuario

journey
   title My working day
   section Go to work
      Make tea: 5: Irving
      Go upstairs: 3: Me
      Do work: 1: Me, Cat
   section Go home
      Go downstairs: 5: Me
      Sit down: 5: Me

1. Variables ; fillType0 a fillType7 para colorear las secciones

pie

Diagrama de Gráficos Circulares

%%{init: {
   'themeVariables': {
      'pie1': '#FFFFFF',
      'pie2': '#FFFF00',
      'pie3': '#00FF00',
      'pie4': '#0000FF',
      'pie5': '#800080',
      'pie6': '#ff0000',
      'pie7': '#FFA500'
   }
}}%%
pie showData
   title Colors
   "White" : 5
   "Yellow" : 20
   "Green" : 30
   "Blue" : 10
   "Purple" : 10
   "Red" : 20
   "Orange" : 5

1. showData para representar los valores de datos reales después del texto de la leyenda,
2. Variables ; pie1 a pie12