Saltar al contenido principal

Mermaid 11.15.0

Guía rápida de gráficos circulares en Mermaid

Un gráfico circular compara pocas partes positivas de un total. Elige barras para muchas categorías o valores próximos y cuadrantes para dos dimensiones independientes.

Crear con el Creador de gráficos circulares →

Inicio rápido

Los valores son pesos: no necesitan sumar 100; Mermaid calcula las proporciones.

Mermaid
Abrir en el editor → 
pie showData
  title Esfuerzo de documentación
  "Redacción" : 48
  "Revisión" : 32
  "Publicación" : 20

Cargando…

Referencia de sintaxis

Referencia de sintaxis
SintaxisSignificado
pie / pie showDataDeclara el gráfico; showData añade valores a la leyenda.
title TextAñade un título opcional.
"Label" : 12.75Usa etiquetas entre comillas y pesos positivos; la precisión documentada es de dos decimales.
config.pie.textPosition: 0.75Posición radial: 0 es el centro y 1 el borde.
themeVariables.pieOuterStrokeWidth: "2px"Grosor del borde exterior.
themeVariables.pie1…pie12Colores de las porciones con theme base.
pieTitleTextSize / pieTitleTextColor / pieSectionTextSize / pieSectionTextColorVariables del tema para título y etiquetas.
pieLegendTextSize / pieLegendTextColor / pieStrokeColor / pieStrokeWidth / pieOuterStrokeColor / pieOpacityVariables del tema para leyenda, bordes y opacidad.
%% / accTitle: / accDescr:Comentarios y descripciones accesibles.

Decimales y proporciones

Usa pesos positivos y un punto decimal incluso si tu idioma usa coma. showData muestra los pesos originales; las etiquetas redondean los porcentajes a números enteros. En Mermaid 11.15 se ocultan las porciones inferiores al 1%, pero permanecen en la leyenda.

Mermaid
Abrir en el editor → 
pie showData
  title Horas de edición
  "Redacción" : 12.75
  "Comprobación de datos" : 6.25
  "Corrección" : 3.50

Cargando…

Etiquetas y leyenda

Usa nombres breves. Sin showData, la leyenda muestra nombres y las porciones siguen mostrando proporciones; evita categorías diminutas.

Mermaid
Abrir en el editor → 
pie
  title Resultados de revisión
  "Aceptado" : 18
  "Revisado" : 7
  "Pospuesto" : 3

Cargando…

Posición del texto

textPosition es una proporción radial. Un valor menor acerca el texto al centro; simplifica los datos si las etiquetas se solapan.

Mermaid
Abrir en el editor → 
---
config:
  pie:
    textPosition: 0.6
---
pie showData
  title Reparto de revisión
  "Técnica" : 60
  "Editorial" : 40

Cargando…

Colores y borde exterior

Usa theme base y pie1…pie12. pieOuterStrokeWidth recibe una longitud CSS; adapta contraste y bordes al fondo.

Mermaid
Abrir en el editor → 
---
config:
  theme: base
  themeVariables:
    pie1: "#d3e5ff"
    pie2: "#50e3c2"
    pie3: "#f5f5f5"
    pieOuterStrokeWidth: "2px"
    pieSectionTextColor: "#171717"
---
pie showData
  title Distribución del trabajo
  "Investigación" : 45
  "Redacción" : 35
  "Revisión" : 20

Cargando…

Errores frecuentes

Usar un peso negativo

Los negativos se rechazan; usa un valor positivo y otro gráfico para pérdidas netas.

Sintaxis incorrecta: ejemplo corregido abajo

pie
  "Revisión" : -2

Usar coma decimal

Escribe 12.75, no 12,75; redondea a dos decimales según la notación documentada.

Limitaciones

  • Usa pesos positivos para las porciones visibles. El cero se acepta, pero no dibuja una porción; los negativos se rechazan.
  • Se documentan dos decimales para los valores originales, pero los porcentajes se redondean a enteros. Se ocultan las porciones inferiores al 1%.
  • Muchas categorías o valores próximos se comparan mejor con barras.

Preguntas frecuentes

¿Deben sumar 100 los valores?
No: cada peso positivo se divide por el total.
¿Qué cambia showData?
Añade los valores originales a la leyenda sin cambiar la geometría.
¿Cómo cambio los colores?
Usa theme base y define pie1…pie12 en themeVariables.