O que é um Gráfico de Quadrantes?
Um Gráfico de Quadrantesé uma ferramenta de visualização estratégica usada para categorizar itens em quatro zonas distintas com base em duas variáveis contínuas (por exemplo, Esforço vs. Impacto, ou Importância vs. Urgência). Ao posicionar pontos de dados em um plano de coordenadas bidimensional dividido pelos eixos X e Y, você pode distinguir claramente os “ganhos rápidos” de alta prioridade dos “distrações” de baixa prioridade ou das “apostas estratégicas” de longo prazo.
Com Mermaid.js, você pode definir seus quadrantes, títulos dos eixos e posições dos pontos de dados usando um bloco declarativo simples, permitindo que você gere matrizes de decisão profissionais instantaneamente.
Guia de Sintaxe Principal: Elementos e Construções
Para criar um gráfico de quadrantes válido e totalmente funcional no Mermaid, você deve dominar o sistema de coordenadas, a rotulagem dos eixos e a colocação dos pontos de dados.
1. Inicializando a Tela de Quadrantes
Você inicializa uma tela de gráfico de quadrantes na primeira linha usando a quadrantChartpalavra-chave. Em seguida, você define os rótulos para os seus quatro quadrantes e os títulos para os eixos X e Y.
quadrantChart
título Matriz de Priorização de Projetos
eixo-x "Baixo Esforço" --> "Alto Esforço"
eixo-y "Baixo Impacto" --> "Alto Impacto"
quadrante-1 "Apostas Estratégicas"
quadrante-2 "Ganhos Rápidos"
quadrante-3 "Distrações"
quadrante-4 "Projetos Principais"
2. Posicionando Pontos de Dados
Você adiciona itens ao gráfico fornecendo seu nome de exibição seguido de suas coordenadas X e Y (normalizadas entre 0 e 1).
0.0é o início do eixo.1.0é o final do eixo.
quadrantChart
título Matriz de Impacto vs Esforço
eixo-x "Baixo Esforço" --> "Alto Esforço"
eixo-y "Baixo Impacto" --> "Alto Impacto"
quadrante-1 "Apostas Estratégicas"
quadrante-2 "Ganhos Rápidos"
quadrante-3 "Distrações"
quadrante-4 "Projetos Principais"
"Tarefa A": [0.2, 0.8]
"Tarefa B": [0.7, 0.2]
Melhores Práticas para Mapeamento de Matrizes
- Normalize Seus Dados: Como as coordenadas do Mermaid são escaladas de 0,0 a 1,0, mapeie seus valores de dados brutos para esta faixa percentual antes de inseri-los no script.
- Rótulos Claros dos Eixos: Sempre inclua rótulos descritivos nos eixos que definam explicitamente o que os eixos X e Y representam (por exemplo, “Custo” versus “ROI”). Uma matriz sem eixos definidos é apenas um gráfico de dispersão aleatório.
- Limitar a Densidade dos Pontos: Se você tiver mais de 15-20 pontos em um único gráfico de quadrantes, ele ficará cheio e ilegível. Se tiver um conjunto de dados maior, considere dividir em múltiplos gráficos temáticos.
Exemplos Reais de Gráficos de Quadrantes do Mermaid.js
Exemplo: Matriz de Priorização de Recursos do Produto
Este plano funcional ajuda as equipes de produto a categorizar recursos com base no esforço de desenvolvimento e no potencial impacto comercial.
quadrantChart
título Priorização de Recursos do Produto
eixo-x "Baixo Esforço" --> "Alto Esforço"
eixo-y "Baixo Impacto" --> "Alto Impacto"
quadrante-1 "Apostas de Longo Prazo"
quadrante-2 "Ganhos Rápidos"
quadrante-3 "Baixa Prioridade"
quadrante-4 "Iniciativas Principais"
"Login API": [0,1, 0,9]
"Personalizador de Tema": [0,8, 0,3]
"Gateway de Pagamento": [0,6, 0,8]
"Modo Escuro": [0,2, 0,2]
Análise da Sintaxe: Ao atribuir `[0,1, 0,9]` a “Login API”, a posicionamos no quadrante superior esquerdo (alto impacto, baixo esforço), marcando-a como um “Ganho Rápido”. Isso permite que os interessados visualizem instantaneamente as prioridades da roadmap de desenvolvimento.