{"id":2104,"date":"2026-05-26T08:05:44","date_gmt":"2026-05-26T08:05:44","guid":{"rendered":"https:\/\/www.vpascode.com\/pt\/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\/pt\/docs\/vpascode-docs\/mermaid-js-quadrant-syntax-guide\/","title":{"rendered":"Guia de Sintaxe do Gr\u00e1fico de Quadrantes do Mermaid.js"},"content":{"rendered":"

O que \u00e9 um Gr\u00e1fico de Quadrantes?<\/h2>\n

Um Gr\u00e1fico de Quadrantes<\/strong>\u00e9 uma ferramenta de visualiza\u00e7\u00e3o estrat\u00e9gica usada para categorizar itens em quatro zonas distintas com base em duas vari\u00e1veis cont\u00ednuas (por exemplo, Esfor\u00e7o vs. Impacto, ou Import\u00e2ncia vs. Urg\u00eancia). Ao posicionar pontos de dados em um plano de coordenadas bidimensional dividido pelos eixos X e Y, voc\u00ea pode distinguir claramente os \u201cganhos r\u00e1pidos\u201d de alta prioridade dos \u201cdistra\u00e7\u00f5es\u201d de baixa prioridade ou das \u201capostas estrat\u00e9gicas\u201d de longo prazo.<\/p>\n

Com Mermaid.js<\/strong>, voc\u00ea pode definir seus quadrantes, t\u00edtulos dos eixos e posi\u00e7\u00f5es dos pontos de dados usando um bloco declarativo simples, permitindo que voc\u00ea gere matrizes de decis\u00e3o profissionais instantaneamente.<\/p>\n

Guia de Sintaxe Principal: Elementos e Constru\u00e7\u00f5es<\/h2>\n

Para criar um gr\u00e1fico de quadrantes v\u00e1lido e totalmente funcional no Mermaid, voc\u00ea deve dominar o sistema de coordenadas, a rotulagem dos eixos e a coloca\u00e7\u00e3o dos pontos de dados.<\/p>\n

1. Inicializando a Tela de Quadrantes<\/h3>\n

Voc\u00ea inicializa uma tela de gr\u00e1fico de quadrantes na primeira linha usando a quadrantChart<\/code>palavra-chave. Em seguida, voc\u00ea define os r\u00f3tulos para os seus quatro quadrantes e os t\u00edtulos para os eixos X e Y.<\/p>\n

\n
\nMermaid<\/span>
\n
\n<\/path><\/path><\/svg>
\nEditar Mermaid no 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 Prioriza\u00e7\u00e3o de Projetos\r\n    eixo-x \"Baixo Esfor\u00e7o\" --> \"Alto Esfor\u00e7o\"\r\n    eixo-y \"Baixo Impacto\" --> \"Alto Impacto\"\r\n    quadrante-1 \"Apostas Estrat\u00e9gicas\"\r\n    quadrante-2 \"Ganhos R\u00e1pidos\"\r\n    quadrante-3 \"Distra\u00e7\u00f5es\"\r\n    quadrante-4 \"Projetos Principais\"<\/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 no VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
2. Posicionando Pontos de Dados<\/h3>\n
Voc\u00ea adiciona itens ao gr\u00e1fico fornecendo seu nome de exibi\u00e7\u00e3o seguido de suas coordenadas X e Y (normalizadas entre 0 e 1).<\/p>\n