¿Cómo se escribe un gráfico circular de Mermaid?

Comienza con `pie title Tu Título` en la primera línea, luego enumera cada sector como `"Etiqueta" : valor` en líneas separadas. Los valores pueden ser cualquier número positivo; Mermaid los convierte automáticamente en porcentajes. Ejemplo: `pie title Cuota de Navegador \n "Chrome" : 65.2 \n "Safari" : 19.1 \n "Firefox" : 4.0`. No necesitas asegurarte de que los valores sumen 100.

¿Puedo controlar el color de cada sector?

Los gráficos circulares de Mermaid utilizan una paleta de colores asignada automáticamente según el tema del diagrama. No puedes especificar directamente los colores por sector en la sintaxis del diagrama. Para personalizar los colores, necesitarías aplicar un tema personalizado de Mermaid o procesar la salida SVG posteriormente. Para presentaciones que requieran colores de marca específicos, editar el SVG exportado en un editor vectorial como Figma o Inkscape es el enfoque más práctico.

¿Hay un número máximo de sectores para un gráfico circular de Mermaid?

No hay un límite estricto, pero los gráficos circulares se vuelven difíciles de leer más allá de 7-8 sectores, ya que los segmentos se vuelven demasiado estrechos para etiquetarlos claramente. La mejor práctica es agrupar categorías pequeñas en un cubo 'Otro' si algún sector individual representa menos del 3-5% del total. Mermaid intentará renderizar cualquier número de sectores, pero la legibilidad se degrada significativamente por encima de 10.

¿Cuándo debo usar un gráfico circular en lugar de un diagrama de Gantt o una línea de tiempo?

Utiliza un gráfico circular cuando quieras mostrar relaciones de parte-a-todo en un momento dado: proporciones, distribuciones, cuotas. Utiliza un diagrama de Gantt cuando necesites mostrar tareas, duraciones y planificación a lo largo de un eje de tiempo. Utiliza una línea de tiempo cuando quieras marcar eventos específicos en orden cronológico. Los gráficos circulares responden a '¿cuánto del total?'; los diagramas de Gantt y de línea de tiempo responden a '¿cuándo?'.

Visor de Gráficos Circulares Mermaid

Renderiza gráficos circulares Mermaid al instante en tu navegador. Visualiza datos proporcionales y exporta a SVG o PNG. Herramienta online gratuita.

Código Mermaid

Vista Previa

Introduce código Mermaid para previsualizar tu diagrama

Los gráficos circulares comunican distribuciones proporcionales de un vistazo: cuota de mercado, asignación presupuestaria, fuentes de tráfico, uso de funcionalidades o resultados de encuestas. La sintaxis `pie` de Mermaid es la más sencilla de todos los tipos de diagramas Mermaid: solo un título y una lista de pares etiqueta-valor. Esta simplicidad hace que los gráficos circulares sean una salida frecuente de los asistentes de IA cuando los usuarios solicitan una visualización rápida de datos. Cuando los gerentes de producto preguntan a Claude o ChatGPT 'Muéstrame un desglose de nuestros canales de adquisición de usuarios' o los desarrolladores preguntan 'Visualiza la distribución de los códigos de error HTTP en los registros de nuestra API', a menudo reciben un gráfico circular de Mermaid. Zolkit renderiza el gráfico inmediatamente para que puedas verificar las etiquetas, las proporciones y la impresión visual general antes de exportarlo para un informe o presentación. Los gráficos circulares de Mermaid calculan automáticamente los porcentajes a partir de los valores brutos y etiquetan cada sector en consecuencia. El visor exporta SVG nítido para incrustar en la web o PNG 2× para incluir en presentaciones, documentos de Word e informes por correo electrónico. Para necesidades de visualización de datos más complejas, considera combinar gráficos circulares con diagramas de Gantt (para distribución de líneas de tiempo) o diagramas de línea de tiempo.

Diagramas Relacionados

← Visor de Diagramas Mermaid Visor de Diagramas de Gantt de Mermaid Visor de Diagramas de Línea de Tiempo Mermaid Visor de Mapas Mentales Mermaid

Visor y Exportador de Diagramas Mermaid Online Gratis

El Visor de Diagramas Mermaid de Zolkit te permite pegar cualquier código Mermaid y ver un diagrama renderizado al instante — sin instalación, sin registro, sin subidas a servidores. Todo se ejecuta en tu navegador, lo que lo convierte en la forma más rápida de verificar diagramas generados por IA desde Claude, ChatGPT o Gemini. Soporta todos los tipos principales de diagramas Mermaid: diagramas de flujo, diagramas de secuencia, diagramas de clases, diagramas ER, diagramas de Gantt, diagramas de estado, mapas mentales, gráficos Git, gráficos circulares y líneas de tiempo.

Vista Previa Instantánea en Vivo

Los diagramas se renderizan automáticamente mientras escribes, con un retardo de 300 ms para que nunca se sienta lento.

100% Privado

Todo el renderizado ocurre en tu navegador usando mermaid.js. Tu código nunca se envía a ningún servidor.

Exportar SVG y PNG

Descarga tu diagrama como un SVG vectorial nítido o un PNG de alta resolución 2× listo para documentos y presentaciones.

Todos los Tipos de Diagramas Mermaid

Soporta diagramas de flujo, diagramas de secuencia, diagramas de clases, diagramas ER, diagramas de Gantt, mapas mentales, gráficos Git y más.

Listo para Diagramas de IA

Construido para la era de la IA — previsualiza directamente diagramas generados por Claude, ChatGPT, Gemini o cualquier LLM.

Siempre Gratis

No se necesita cuenta, sin límites de uso, sin marcas de agua. El visor Mermaid de Zolkit es completamente gratuito para siempre.

Cómo Previsualizar un Diagrama Mermaid

1
Pega tu código Mermaid en el editor de la izquierda — puedes copiarlo desde un asistente de IA o escribirlo manualmente.
2
El diagrama se renderiza instantáneamente en el panel de vista previa de la derecha. Si hay un error de sintaxis, un mensaje explica el problema.
3
Haz clic en 'Exportar SVG' o 'Exportar PNG' para descargar tu diagrama como un archivo listo para documentación, presentaciones o compartir.