Mermaid 11.15.0
Quadrantes posicionam itens em duas dimensões normalizadas. Use pizza para partes de um total ou Gantt para tarefas com datas e duração.
Criar com o Editor Mermaid →Coordenadas vão de 0 a 1: X cresce para a direita e Y para cima.
quadrantChart
title Prioridades editoriais
x-axis Pouco esforço --> Muito esforço
y-axis Pouco valor --> Muito valor
quadrant-1 Planejar
quadrant-2 Fazer primeiro
quadrant-3 Adiar
quadrant-4 Reconsiderar
Corrigir links: [0.2, 0.8]
Reescrever guia: [0.8, 0.7]
Mudança estética: [0.6, 0.2]Carregando…
| Sintaxe | Significado |
|---|---|
| quadrantChart / title Text | Declara o gráfico e um título opcional. |
| x-axis Left --> Right / x-axis Left | Rotula as duas pontas horizontais ou apenas a esquerda. |
| y-axis Bottom --> Top / y-axis Bottom | Rotula as duas pontas verticais ou apenas a inferior. |
| quadrant-1 / quadrant-2 / quadrant-3 / quadrant-4 | 1: superior direito; 2: superior esquerdo; 3: inferior esquerdo; 4: inferior direito. |
| Name: [0.25, 0.75] | Coordenadas x,y normalizadas no intervalo inclusivo 0–1. |
| radius: 8 / color: #0070f3 / stroke-color: #171717 / stroke-width: 2px | Estiliza pontos; a cor de borda precisa de espessura visível. |
| classDef focus color: #0070f3 / Name:::focus: [x, y] | Classes reutilizáveis; estilo direto prevalece sobre classe e tema. |
| config.quadrantChart.chartWidth / chartHeight / pointRadius / pointTextPadding | Configura tamanho, raio e distância dos rótulos. |
| quadrantPadding / quadrantTextTopPadding / quadrantLabelFontSize / quadrantInternalBorderStrokeWidth / quadrantExternalBorderStrokeWidth | Configura preenchimento, posição do texto e espessura de bordas dos quadrantes. |
| xAxisLabelPadding / xAxisLabelFontSize / xAxisPosition / yAxisLabelPadding / yAxisLabelFontSize / yAxisPosition | Configura eixos; com pontos, o eixo horizontal fica embaixo. |
| titleFontSize / titlePadding / pointTextPadding / pointLabelFontSize | Configura tamanho e espaçamento de títulos e rótulos de pontos. |
| quadrant1Fill…quadrant4Fill / quadrant1TextFill…quadrant4TextFill | Cores de fundos e rótulos de quadrantes. |
| quadrantPointFill / quadrantPointTextFill | Cores padrão de pontos, texto e bordas. |
| quadrantXAxisTextFill / quadrantYAxisTextFill / quadrantInternalBorderStrokeFill / quadrantExternalBorderStrokeFill / quadrantTitleFill | Cores de eixos, bordas e título. |
| %% / accTitle: / accDescr: | Comentários e descrições acessíveis. |
Leia Y de baixo para cima. Os números avançam no sentido anti-horário a partir do superior direito. Um eixo com um rótulo não muda o intervalo.
quadrantChart
title Duas dimensões
x-axis Esforço
y-axis Valor
quadrant-1 Superior direito
quadrant-2 Superior esquerdo
quadrant-3 Inferior esquerdo
quadrant-4 Inferior direito
Opção: [0.3, 0.7]Carregando…
Normalize as medidas antes de inserir. radius é medido em pixels; explique seu significado se a área representar uma terceira variável.
quadrantChart
title Trabalho selecionado
x-axis Baixo --> Alto
y-axis Baixo --> Alto
Rascunho: [0.25, 0.65] radius: 7, color: #0070f3, stroke-color: #171717, stroke-width: 2px
Revisão: [0.7, 0.4] radius: 5Carregando…
Adicione ::: após o nome e antes das coordenadas. Estilo direto supera classe, que supera tema; só a cor não cria um contorno visível.
quadrantChart
title Candidatos à revisão
x-axis Pouco esforço --> Muito esforço
y-axis Pouco valor --> Muito valor
Links:::focus: [0.2, 0.8]
Reescrita:::focus: [0.8, 0.7]
classDef focus color: #0070f3, radius: 6, stroke-color: #171717, stroke-width: 2pxCarregando…
Use quadrantChart para geometria e themeVariables para cores. Amplie o gráfico quando os rótulos estiverem juntos; pointTextPadding não evita todas as sobreposições.
---
config:
theme: base
quadrantChart:
chartWidth: 420
chartHeight: 360
pointRadius: 6
pointTextPadding: 8
themeVariables:
quadrant1Fill: "#d3e5ff"
quadrant2Fill: "#f5f5f5"
quadrantPointFill: "#0070f3"
---
quadrantChart
title Trabalho planejado
x-axis Esforço
y-axis Valor
Guia: [0.65, 0.8]Carregando…
Converta 80 em 0.8 antes de inserir.
Sintaxe inválida: veja a correção abaixo
quadrantChart
Guia: [80, 60]quadrantChart
Guia: [0.8, 0.6]Carregando…
O primeiro rótulo de y-axis é o inferior; quadrant-1 fica no superior direito.