Mermaid 11.15.0
Los cuadrantes sitúan elementos según dos dimensiones normalizadas. Usa un gráfico circular para partes de un total o Gantt para tareas con fechas.
Crear con el Editor de Mermaid →Las coordenadas van de 0 a 1: X crece hacia la derecha y Y hacia arriba.
quadrantChart
title Prioridades editoriales
x-axis Poco esfuerzo --> Mucho esfuerzo
y-axis Poco valor --> Mucho valor
quadrant-1 Planificar
quadrant-2 Hacer primero
quadrant-3 Posponer
quadrant-4 Reconsiderar
Corregir enlaces: [0.2, 0.8]
Reescribir guía: [0.8, 0.7]
Cambio estético: [0.6, 0.2]Cargando…
| Sintaxis | Significado |
|---|---|
| quadrantChart / title Text | Declara el gráfico y un título opcional. |
| x-axis Left --> Right / x-axis Left | Etiqueta ambos extremos horizontales o solo el izquierdo. |
| y-axis Bottom --> Top / y-axis Bottom | Etiqueta ambos extremos verticales o solo el inferior. |
| quadrant-1 / quadrant-2 / quadrant-3 / quadrant-4 | 1: arriba derecha; 2: arriba izquierda; 3: abajo izquierda; 4: abajo derecha. |
| Name: [0.25, 0.75] | Coordenadas x,y normalizadas en el intervalo inclusivo 0–1. |
| radius: 8 / color: #0070f3 / stroke-color: #171717 / stroke-width: 2px | Estiliza puntos; el color de borde necesita un grosor visible. |
| classDef focus color: #0070f3 / Name:::focus: [x, y] | Define clases reutilizables; el estilo directo prevalece sobre la clase y el tema. |
| config.quadrantChart.chartWidth / chartHeight / pointRadius / pointTextPadding | Configura tamaño del gráfico, radio y separación de etiquetas. |
| quadrantPadding / quadrantTextTopPadding / quadrantLabelFontSize / quadrantInternalBorderStrokeWidth / quadrantExternalBorderStrokeWidth | Configura relleno, ubicación del texto y grosores de bordes de cuadrantes. |
| xAxisLabelPadding / xAxisLabelFontSize / xAxisPosition / yAxisLabelPadding / yAxisLabelFontSize / yAxisPosition | Configura ejes; cuando hay puntos, el eje horizontal se coloca abajo. |
| titleFontSize / titlePadding / pointTextPadding / pointLabelFontSize | Configura tamaños y separaciones de título y texto de puntos. |
| quadrant1Fill…quadrant4Fill / quadrant1TextFill…quadrant4TextFill | Colores de fondos y etiquetas de cuadrantes. |
| quadrantPointFill / quadrantPointTextFill | Colores predeterminados de puntos, texto y bordes. |
| quadrantXAxisTextFill / quadrantYAxisTextFill / quadrantInternalBorderStrokeFill / quadrantExternalBorderStrokeFill / quadrantTitleFill | Colores de ejes, bordes y título. |
| %% / accTitle: / accDescr: | Comentarios y descripciones accesibles. |
Lee Y de abajo arriba. Los números avanzan en sentido antihorario desde arriba derecha. Un eje con una etiqueta no cambia el rango.
quadrantChart
title Dos dimensiones
x-axis Esfuerzo
y-axis Valor
quadrant-1 Arriba derecha
quadrant-2 Arriba izquierda
quadrant-3 Abajo izquierda
quadrant-4 Abajo derecha
Opción: [0.3, 0.7]Cargando…
Normaliza tus medidas antes de introducirlas. radius se mide en píxeles; explica su significado si utilizas el área como tercera variable.
quadrantChart
title Trabajo seleccionado
x-axis Bajo --> Alto
y-axis Bajo --> Alto
Borrador: [0.25, 0.65] radius: 7, color: #0070f3, stroke-color: #171717, stroke-width: 2px
Revisión: [0.7, 0.4] radius: 5Cargando…
Añade ::: después del nombre y antes de las coordenadas. El estilo directo domina la clase, y esta domina el tema; un color de borde solo no basta.
quadrantChart
title Candidatos a revisión
x-axis Poco esfuerzo --> Mucho esfuerzo
y-axis Poco valor --> Mucho valor
Enlaces:::focus: [0.2, 0.8]
Reescritura:::focus: [0.8, 0.7]
classDef focus color: #0070f3, radius: 6, stroke-color: #171717, stroke-width: 2pxCargando…
Usa quadrantChart para geometría y themeVariables para colores. Aumenta el tamaño cuando las etiquetas estén demasiado juntas; pointTextPadding no evita todos los solapamientos.
---
config:
theme: base
quadrantChart:
chartWidth: 420
chartHeight: 360
pointRadius: 6
pointTextPadding: 8
themeVariables:
quadrant1Fill: "#d3e5ff"
quadrant2Fill: "#f5f5f5"
quadrantPointFill: "#0070f3"
---
quadrantChart
title Trabajo previsto
x-axis Esfuerzo
y-axis Valor
Guía: [0.65, 0.8]Cargando…
Convierte 80 en 0.8 antes de introducirlo.
Sintaxis incorrecta: ejemplo corregido abajo
quadrantChart
Guía: [80, 60]quadrantChart
Guía: [0.8, 0.6]Cargando…
La primera etiqueta de y-axis es la inferior; quadrant-1 está arriba a la derecha.