Gráfico circular
Muestra las proporciones de un vistazo
¿Qué es un Gráfico circular?
Un gráfico circular muestra cómo un total se descompone en partes: asignación de presupuesto, cuota de mercado, respuestas de encuestas, distribución del tiempo. En Mermaid bastan cuatro líneas de texto — perfecto para docs e informes.
Los gráficos circulares aparecen en presentaciones de presupuesto, revisiones de coste y resúmenes de encuestas — allí donde un total debe repartirse en partes para un público no técnico. Escrito en Mermaid, el gráfico son cuatro líneas que viven dentro del documento en lugar de una captura de una hoja de cálculo que nadie vuelve a encontrar. El límite es estricto: un total, un momento. Comparar periodos, o mostrar una categoría diminuta, pide otra cosa.
Ejemplo en directo
pie showData
title Cloud spend by service
"Compute" : 42
"Storage" : 23
"Network" : 18
"Databases" : 12
"Other" : 5Cuándo usarlo
Errores frecuentes
Etiquetas de porción sin comillas
Escribir Compute : 42 falla: la etiqueta tiene que ser una cadena entrecomillada, incluso cuando es una sola palabra sin espacios. Es con diferencia el motivo más frecuente de que un gráfico circular no se renderice.
Las porciones se reordenan por tamaño
Mermaid dibuja primero las porciones más grandes, escribas el orden que escribas, mientras la leyenda conserva el tuyo. Nunca confíes en la posición de una porción para transmitir un significado: etiquétala, o asume el desajuste.
Valores que ya son porcentajes
Mermaid calcula por su cuenta la parte de cada porción sobre el total. Darle porcentajes que suman 98 o 103 tras redondear reescala en silencio todas las porciones, y el gráfico deja de coincidir con la tabla contigua.
Sintaxis básica
pie title Budget
"Engineering" : 50
"Marketing" : 30
"Operations" : 20pie showData title Cloud spend by serviceshowData imprime el valor bruto junto a cada etiqueta de la leyenda, al lado del porcentaje que calcula Mermaid. El título es opcional y también cabe en la línea pie.
"Compute" : 42Cada porción es una etiqueta entrecomillada, dos puntos y un número. Se admiten decimales, y Mermaid calcula los porcentajes, así que los valores no tienen por qué sumar nada concreto.
%%{init: {"themeVariables": {"pie1": "#4f46e5"}}}%%Los colores de las porciones vienen del tema. Una directiva init en la primerísima línea los sobrescribe uno a uno, de pie1 a pie12, para ajustarlos a una paleta de marca.
%% Q3 figures, source: finance exportDos signos de porcentaje inician un comentario. Anotar de dónde salen las cifras, justo al lado de las cifras, es lo que mantiene fiable un gráfico seis meses después.
Preguntas sobre este diagrama
¿Puedo mostrar los valores reales en el gráfico?
Sí — añade showData tras la palabra clave pie y Mermaid muestra el valor junto a cada etiqueta, además del porcentaje.
¿Cuántas porciones debe tener un gráfico circular?
Entre cinco y siete como máximo para que sea legible. Agrupa las categorías pequeñas en «Otros» — siempre puedes enlazar a una tabla detallada.
¿Puedo poner un gráfico circular de Mermaid en un informe en Markdown?
Sí. GitHub y GitLab renderizan gráficos circulares desde un bloque delimitado con la etiqueta mermaid, y las cifras siguen siendo editables en el código. Para un PDF o una diapositiva, exporta SVG y las etiquetas se mantendrán nítidas.
¿Puede un solo gráfico circular comparar dos periodos?
No. Mermaid admite una sola serie: sin porciones agrupadas, sin anillo, sin segundo aro. Dibuja dos gráficos uno al lado del otro, o usa una tabla cuando quien lee necesite comparar valores en lugar de ver proporciones.
¿Cómo cambio los colores de las porciones?
Define las variables de tema pie1 a pie12 en una directiva init en la primera línea, o cambia de tema por completo. Una porción no puede colorearse desde su propia línea, lo que mantiene toda la paleta definida en un solo sitio.
¿Por qué mi gráfico circular se ve pequeño en la página?
El gráfico se ajusta al ancho de su contenedor, así que una columna estrecha encoge también las etiquetas. Dale más ancho en la página, o exporta un PNG a 2× cuando el gráfico deba leerse desde un proyector.
¿Gráfico circular u otro tipo de diagrama?
¿Gráfico circular o gráfico de cuadrantes?
El circular solo es honesto cuando las partes pertenecen a un mismo todo y la lista es exhaustiva: el mismo presupuesto, la misma población. Si mediste los elementos por separado, o te quedaste solo con los interesantes, los porcentajes que imprime Mermaid no significan nada — colócalos en un gráfico de cuadrantes.
¿Gráfico circular o diagrama de Gantt?
Los dos se usan para responder a «adónde va el esfuerzo». El circular reparte un total en un momento dado — el 40 % del trimestre en trabajo de plataforma. El Gantt extiende ese mismo trabajo sobre un calendario. Elige el circular cuando la decisión sea el reparto, y el Gantt cuando sea la secuencia.
Crea tu Gráfico circular ahora
Descríbelo en lenguaje natural — la IA escribe el código Mermaid por ti.
Abrir Mermaid Studio