Gráfico de cuadrantes
Prioriza con una matriz 2×2
¿Qué es un Gráfico de cuadrantes?
Un gráfico de cuadrantes posiciona elementos sobre dos ejes — esfuerzo vs impacto, urgencia vs importancia, riesgo vs recompensa. Es la herramienta clásica de priorización para producto, estrategia y retrospectivas.
Los gráficos de cuadrantes son artefactos de decisión: la última diapositiva de un taller de priorización, la imagen de un memorándum de estrategia, la retrospectiva en la que un equipo ordena qué conservar. Lo que hacen bien es obligar a tomar posición — nada puede quedarse «más o menos en medio» sin que se note. Lo que esconden es el razonamiento: dos personas colocan el mismo elemento en cuadrantes distintos, y el gráfico registra el resultado, nunca la discusión. Los ejes no llevan números, solo sus dos etiquetas de extremo.
Ejemplo en directo
quadrantChart
title Feature prioritization
x-axis Low effort --> High effort
y-axis Low impact --> High impact
quadrant-1 Plan carefully
quadrant-2 Do first
quadrant-3 Skip
quadrant-4 Quick wins
Public sharing: [0.3, 0.85]
Realtime collab: [0.85, 0.75]
Dark mode: [0.2, 0.4]Cuándo usarlo
Errores frecuentes
Coordenadas fuera del rango 0 a 1
Escribir A: [3, 8] es un error léxico, no un punto recortado: ambos valores deben estar entre 0 y 1. ¿Puntúas los elementos sobre diez? Divide entre diez antes de escribir el gráfico.
La numeración no sigue el orden de lectura
quadrant-1 es el superior derecho, y luego en sentido antihorario: quadrant-2 superior izquierdo, quadrant-3 inferior izquierdo, quadrant-4 inferior derecho. Etiquétalos desde las esquinas de la imagen, no desde el orden en que los leerías.
Un eje sin su flecha
x-axis Effort es válido y dibuja una etiqueta en el extremo izquierdo — sin error, pero con un gráfico que nadie puede interpretar. Escribe x-axis Low effort --> High effort para nombrar ambos extremos.
Sintaxis básica
quadrantChart
x-axis Low --> High
y-axis Low --> High
Item A: [0.3, 0.8]quadrantChart title Feature prioritizationEl gráfico siempre es una división 2×2 en el punto medio de ambos ejes. El título es lo que indica a quien lee qué decisión está registrando esta imagen concreta.
x-axis Low effort --> High effort y-axis Low impact --> High impactCada eje toma una etiqueta de inicio y, tras la flecha, una etiqueta de fin. Pon las dos: con una sola, quien lee tiene que adivinar en qué sentido crece la escala.
Public sharing: [0.3, 0.85] radius: 12, color: #4f46e5Un punto puede llevar su propio radio, relleno y color de trazo después de las coordenadas — suficiente para destacar un elemento sin añadir una leyenda.
classDef hot color: #ff0000, radius: 10 Realtime collab:::hot: [0.85, 0.75]classDef nombra un estilo de punto una sola vez y ::: lo aplica, que es la forma de marcar todo un grupo — elementos comprometidos, competidores, riesgos — de manera coherente.
Preguntas sobre este diagrama
¿Cómo posiciono los elementos con precisión?
Cada elemento toma coordenadas [x, y] entre 0 y 1, de modo que «Feature A: [0.2, 0.9]» cae en el cuadrante de poco esfuerzo y alto impacto.
¿Puedo renombrar los cuadrantes?
Sí — de quadrant-1 a quadrant-4 aceptan etiquetas personalizadas como «Hacer primero» o «Victorias rápidas», y ambos ejes admiten etiquetas de inicio y de fin.
¿Puedo pegar un gráfico de cuadrantes en Google Slides o PowerPoint?
Exporta PNG a 2× o 4× y pégalo, o SVG si la herramienta acepta vectores, ya que así las etiquetas de los ejes se mantienen nítidas a cualquier zoom. Vuelve a exportar tras cada repriorización en lugar de mover los puntos a mano.
¿Puedo mover el punto de cruce de los ejes fuera del centro?
No. La división está siempre en el punto medio de ambos ejes, así que «impacto alto» empieza en 0,5 sean cuales sean tus datos. Reescala tus propias puntuaciones antes de dibujar cuando el umbral interesante esté en otro sitio.
¿Cuántos elementos caben antes de que las etiquetas se solapen?
Mermaid no desplaza las etiquetas para evitar colisiones, así que unos quince puntos son el techo práctico, y bastantes menos si varios comparten esquina. Separa un poco las coordenadas, divide el gráfico por temas o sube chartWidth para ganar sitio sin mover ningún punto.
¿Cómo hago el gráfico más grande?
Pon el tamaño dentro de un bloque quadrantChart en la directiva init de la primera línea: %%{init: {"quadrantChart": {"chartWidth": 600, "chartHeight": 600}}}%%. El valor por defecto es 500 por 500. Fuera de ese bloque, las dos claves se ignoran, y por eso los nombres largos siguen desbordándose.
¿Gráfico de cuadrantes u otro tipo de diagrama?
¿Gráfico de cuadrantes o gráfico circular?
El de cuadrantes registra dónde se sitúa cada elemento en dos escalas y nada más: todos los puntos tienen el mismo tamaño salvo que les fijes un radius, así que un elemento que vale diez veces otro se ve idéntico. Cuando el mensaje sea el tamaño, dibuja un gráfico circular.
¿Gráfico de cuadrantes o recorrido del usuario?
Los dos puntúan, pero no lo mismo. El recorrido puntúa los pasos de un camino, en orden y con un número cada uno; el de cuadrantes puntúa elementos independientes en dos escalas y no tiene orden alguno. Si reordenar tus elementos cambiaría su sentido, necesitas el recorrido.
Crea tu Gráfico de cuadrantes ahora
Descríbelo en lenguaje natural — la IA escribe el código Mermaid por ti.
Abrir Mermaid Studio