¿Qué es un gráfico de cuadrantes?
Un gráfico de cuadranteses una herramienta de visualización estratégica utilizada para categorizar elementos en cuatro zonas distintas basadas en dos variables continuas (por ejemplo, Esfuerzo frente a Impacto, o Importancia frente a Urgencia). Al colocar puntos de datos en un plano de coordenadas bidimensional dividido por los ejes X e Y, puedes distinguir claramente las “ganancias rápidas” de alta prioridad de las “distracciones” de baja prioridad o las “apuestas estratégicas a largo plazo”.
Con Mermaid.js, puedes definir tus cuadrantes, títulos de ejes y posiciones de puntos de datos utilizando un bloque declarativo sencillo, lo que te permite generar matrices de decisión profesionales de inmediato.
Guía de sintaxis principal: Elementos y construcciones
Para diseñar un gráfico de cuadrantes válido y completamente ejecutable en Mermaid, debes dominar el sistema de coordenadas, la etiquetación de ejes y la colocación de puntos de datos.
1. Inicializar el lienzo del cuadrante
Inicializas un lienzo de gráfico de cuadrantes en la primera línea utilizando la palabra clave quadrantChartpalabra clave. Luego defines las etiquetas para tus cuatro cuadrantes y los títulos para los ejes X e Y.
quadrantChart
título Matriz de priorización de proyectos
eje-x "Bajo esfuerzo" --> "Alto esfuerzo"
eje-y "Bajo impacto" --> "Alto impacto"
cuadrante-1 "Apuestas estratégicas"
cuadrante-2 "Ganancias rápidas"
cuadrante-3 "Distracciones"
cuadrante-4 "Proyectos principales"
2. Colocar puntos de datos
Agregas elementos al gráfico proporcionando su nombre de visualización seguido de sus coordenadas X e Y (normalizadas entre 0 y 1).
0.0es el inicio del eje.1.0es el final del eje.
quadrantChart
título Matriz de impacto frente a esfuerzo
eje-x "Bajo esfuerzo" --> "Alto esfuerzo"
eje-y "Bajo impacto" --> "Alto impacto"
cuadrante-1 "Apuestas estratégicas"
cuadrante-2 "Ganancias rápidas"
cuadrante-3 "Distracciones"
cuadrante-4 "Proyectos principales"
"Tarea A": [0.2, 0.8]
"Tarea B": [0.7, 0.2]
Mejores prácticas para el mapeo de matrices
- Normaliza tus datos:Dado que las coordenadas de Mermaid están escaladas de 0.0 a 1.0, convierte tus valores de datos brutos a este rango porcentual antes de insertarlos en el script.
- Etiquetas claras de los ejes:Incluye siempre etiquetas descriptivas en los ejes que definan explícitamente lo que representan los ejes X e Y (por ejemplo, “Costo” frente a “ROI”). Una matriz sin ejes definidos es simplemente un gráfico de dispersión aleatorio.
- Limitar la densidad de puntos:Si tienes más de 15-20 puntos en un gráfico de cuadrantes individual, se volverá confuso e ilegible. Si tienes un conjunto de datos más grande, considera dividirlo en múltiples gráficos temáticos.
Ejemplos reales de gráficos de cuadrantes de Mermaid.js
Ejemplo: Matriz de priorización de características del producto
Este plano funcional ayuda a los equipos de producto a categorizar características según su esfuerzo de desarrollo y su posible impacto comercial.
quadrantChart
título Priorización de características del producto
eje-x "Bajo esfuerzo" --> "Alto esfuerzo"
eje-y "Bajo impacto" --> "Alto impacto"
cuadrante-1 "Apuestas a largo plazo"
cuadrante-2 "Ganancias rápidas"
cuadrante-3 "Baja prioridad"
cuadrante-4 "Iniciativas principales"
"Login API": [0.1, 0.9]
"Personalizador de temas": [0.8, 0.3]
"Pasarela de pagos": [0.6, 0.8]
"Modo oscuro": [0.2, 0.2]
Desglose de sintaxis:Al asignar `[0.1, 0.9]` a “Login API”, la ubicamos en el cuadrante superior izquierdo (alto impacto, bajo esfuerzo), marcándola como una “ganancia rápida”. Esto permite a los interesados visualizar de inmediato las prioridades de la hoja de ruta de desarrollo.