Gráfico circular
Mostre proporções num relance
O que é um Gráfico circular?
Um gráfico circular mostra como um total se decompõe em partes: alocação orçamental, quota de mercado, respostas a inquéritos, distribuição do tempo. No Mermaid bastam quatro linhas de texto — perfeito para docs e relatórios.
Os gráficos circulares aparecem em slides de orçamento, revisões de custos e resumos de inquéritos — onde um total tem de ser repartido em partes para uma audiência não técnica. Escrito em Mermaid, o gráfico são quatro linhas que vivem dentro do documento, em vez de uma captura de ecrã de uma folha de cálculo que ninguém volta a encontrar. O limite é rígido: um total, um momento. Comparar períodos, ou mostrar uma categoria pequena demais para se ver, exige outra coisa.
Exemplo em tempo real
pie showData
title Cloud spend by service
"Compute" : 42
"Storage" : 23
"Network" : 18
"Databases" : 12
"Other" : 5Quando usar
Erros frequentes
Rótulos de fatia sem aspas
Escrever Compute : 42 falha: o rótulo tem de ser uma cadeia entre aspas, mesmo quando é uma palavra única e sem espaços. É de longe a razão mais frequente para um gráfico circular se recusar a renderizar.
As fatias são reordenadas por tamanho
O Mermaid desenha as fatias da maior para a menor, seja qual for a ordem em que as escreveu, enquanto a legenda mantém a sua ordem. Nunca conte com a posição de uma fatia para transmitir sentido — rotule-a, ou aceite a discrepância.
Valores que já são percentagens
O Mermaid calcula ele próprio a quota de cada parte no total. Dar-lhe percentagens que somam 98 ou 103 por arredondamentos feitos noutro sítio reescala todas as fatias em silêncio, e o gráfico deixa de bater certo com a tabela impressa ao lado.
Sintaxe básica
pie title Budget
"Engineering" : 50
"Marketing" : 30
"Operations" : 20pie showData title Cloud spend by serviceO showData imprime o valor bruto ao lado de cada rótulo na legenda, a par da percentagem que o Mermaid calcula. O título é opcional e também pode ficar na própria linha pie.
"Compute" : 42Cada fatia é um rótulo entre aspas, dois pontos e um número. São permitidos decimais, e o Mermaid calcula as percentagens, pelo que os valores não têm de somar nada em particular.
%%{init: {"themeVariables": {"pie1": "#4f46e5"}}}%%As cores das fatias vêm do tema. Uma diretiva init logo na primeira linha substitui-as uma a uma, de pie1 até pie12, para acompanhar uma paleta de marca.
%% Q3 figures, source: finance exportDois sinais de percentagem iniciam um comentário. Registar de onde vieram os números, ao lado dos números, é o que mantém um gráfico credível seis meses depois.
Perguntas sobre este diagrama
Posso mostrar os valores reais no gráfico?
Sim — adicione showData após a palavra-chave pie e o Mermaid apresenta o valor ao lado de cada rótulo, juntamente com a percentagem.
Quantas fatias deve ter um gráfico circular?
Cinco a sete no máximo, para se manter legível. Agrupe as categorias pequenas em «Outros» — pode sempre remeter para uma tabela detalhada.
Posso pôr um gráfico circular Mermaid num relatório em Markdown?
Sim. O GitHub e o GitLab renderizam gráficos circulares a partir de um bloco delimitado com a etiqueta mermaid, e os números continuam editáveis no código. Para um PDF ou um slide, exporte em SVG para os rótulos se manterem nítidos em qualquer tamanho.
Um gráfico circular pode comparar dois períodos?
Não. O Mermaid suporta uma única série — sem fatias agrupadas, sem donut, sem segundo anel. Desenhe dois gráficos lado a lado, ou use uma tabela quando o leitor precisa de comparar valores em vez de ver proporções.
Como mudo as cores das fatias?
Defina as variáveis de tema pie1 a pie12 numa diretiva init na primeira linha, ou mude de tema por completo. Uma fatia não pode ser colorida a partir da sua própria linha, o que mantém a paleta inteira definida num só sítio.
Porque é que o meu gráfico circular fica pequeno na página?
O gráfico ajusta-se à largura do contentor, por isso uma coluna estreita encolhe também os rótulos. Dê-lhe mais largura na página, ou exporte um PNG em 2× quando o gráfico tem de ser lido a partir de um projetor.
Gráfico circular ou outro tipo de diagrama?
Gráfico circular ou gráfico de quadrantes?
O circular só é honesto quando as partes pertencem ao mesmo todo e a lista é exaustiva: o mesmo orçamento, a mesma população. Se os elementos foram medidos separadamente, ou se guardou apenas os interessantes, as percentagens que o Mermaid imprime não querem dizer nada — ponha-os antes num quadrante.
Gráfico circular ou gráfico de Gantt?
Ambos respondem a «para onde está a ir o esforço». O circular reparte um total num único momento — 40 % do trimestre em trabalho de plataforma. O Gantt espalha esse mesmo trabalho por um calendário. Escolha o circular quando a decisão é a repartição, e o Gantt quando é a sequência.
Crie já o seu Gráfico circular
Descreva-o em linguagem natural — a IA escreve o código Mermaid por si.
Abrir o Mermaid Studio