{"id":2108,"date":"2026-05-26T08:05:44","date_gmt":"2026-05-26T08:05:44","guid":{"rendered":"https:\/\/www.vpascode.com\/es\/docs\/uncategorized\/mermaid-js-quadrant-syntax-guide\/"},"modified":"2026-05-26T08:05:44","modified_gmt":"2026-05-26T08:05:44","slug":"mermaid-js-quadrant-syntax-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/mermaid-js-quadrant-syntax-guide\/","title":{"rendered":"Gu\u00eda de sintaxis del gr\u00e1fico de cuadrantes de Mermaid.js"},"content":{"rendered":"

\u00bfQu\u00e9 es un gr\u00e1fico de cuadrantes?<\/h2>\n

Un gr\u00e1fico de cuadrantes<\/strong>es una herramienta de visualizaci\u00f3n estrat\u00e9gica 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\u00e1pidas” de alta prioridad de las “distracciones” de baja prioridad o las “apuestas estrat\u00e9gicas a largo plazo”.<\/p>\n

Con Mermaid.js<\/strong>, puedes definir tus cuadrantes, t\u00edtulos de ejes y posiciones de puntos de datos utilizando un bloque declarativo sencillo, lo que te permite generar matrices de decisi\u00f3n profesionales de inmediato.<\/p>\n

Gu\u00eda de sintaxis principal: Elementos y construcciones<\/h2>\n

Para dise\u00f1ar un gr\u00e1fico de cuadrantes v\u00e1lido y completamente ejecutable en Mermaid, debes dominar el sistema de coordenadas, la etiquetaci\u00f3n de ejes y la colocaci\u00f3n de puntos de datos.<\/p>\n

1. Inicializar el lienzo del cuadrante<\/h3>\n

Inicializas un lienzo de gr\u00e1fico de cuadrantes en la primera l\u00ednea utilizando la palabra clave quadrantChart<\/code>palabra clave. Luego defines las etiquetas para tus cuatro cuadrantes y los t\u00edtulos para los ejes X e Y.<\/p>\n

\n
\nMermaid<\/span>
\n
\n<\/path><\/path><\/svg>
\nEditar Mermaid en VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n
\r\n
\r\n Mermaid<\/span>\r\n \r\n <\/path><\/path><\/svg>\r\n Edit Mermaid in VPasCode<\/span>\r\n <\/a>\r\n <\/div>\r\n
\r\n 
quadrantChart\r\n    t\u00edtulo Matriz de priorizaci\u00f3n de proyectos\r\n    eje-x \"Bajo esfuerzo\" --> \"Alto esfuerzo\"\r\n    eje-y \"Bajo impacto\" --> \"Alto impacto\"\r\n    cuadrante-1 \"Apuestas estrat\u00e9gicas\"\r\n    cuadrante-2 \"Ganancias r\u00e1pidas\"\r\n    cuadrante-3 \"Distracciones\"\r\n    cuadrante-4 \"Proyectos principales\"<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nEditar Mermaid en VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
2. Colocar puntos de datos<\/h3>\n
Agregas elementos al gr\u00e1fico proporcionando su nombre de visualizaci\u00f3n seguido de sus coordenadas X e Y (normalizadas entre 0 y 1).<\/p>\n