Soporte Mermaid

Nuestro sitio web soporta la creación de diagramas mermaid. Para crear un diagrama de mermaid, simplemente se debe colocar los comandos de mermaid dentro del siguiente delimitador:

{% mermaid %}

{% endmermaid %}

Mermaid soporta un gran número diferente de diagramas, entre los que se encuentran gráficos de barras, circulares, mapas mentales, diagramas de flujo, de secuencia, de clases, entidad, relación y muchos más.

Consulta la documentación para ver más ejemplos. También puedes probar el editor de diagramas para ver cómo se ven algunos de estos tipos de diagramas.

Ejemplo 1: Diagrama Circular

{% mermaid %}
pie title ¿Qué no tiene Voldemort?
         "Amigos" : 2
         "Familia" : 3
         "Nariz" : 45
{% endmermaid %}

pie title ¿Qué no tiene Voldemort?
         "Amigos" : 2
         "Familia" : 3
         "Nariz" : 45

Loading

Ejemplo 2: Mapa Mental

{% mermaid %}
mindmap
  root((Mapa mental))
    Orígenes
      Larga historia
      Popularización
      El autor británico de psicología popular Tony Buzan
    Investigación
      Sobre efectividad<br/>y características
      Sobre Creación Automática
        Usoss
            Técnicas creativas
            Plenación estratégica
            Mapeo de argumentos
    Herramientas
      Lápiz y papel
      Mermaid
{% endmermaid %}

mindmap
  root((Mapa mental))
    Orígenes
      Larga historia
      Popularización
      El autor británico de psicología popular Tony Buzan
    Investigación
      Sobre efectividad<br/>y características
      Sobre Creación Automática
        Usoss
            Técnicas creativas
            Plenación estratégica
            Mapeo de argumentos
    Herramientas
      Lápiz y papel
      Mermaid

Loading

Ejemplo 3: Diagrama XY

{% mermaid %}
xychart-beta
    title "Ingresos por ventas"
    x-axis [Ene, Feb, Mar, Abr, May, Jun, Jul, Agu, Sep, Oct, Nov, Dic]
    y-axis "Ingresos (en $)" 4000 --> 11000
    bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
    line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
{% endmermaid %}

xychart-beta
    title "Ingresos por ventas"
    x-axis [Ene, Feb, Mar, Abr, May, Jun, Jul, Agu, Sep, Oct, Nov, Dic]
    y-axis "Ingresos (en $)" 4000 --> 11000
    bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
    line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]

Loading