Como ler Comece pelo nó onde nenhuma seta chega (ou pelo círculo de início) e siga as setas. A direção geral vem na primeira linha do código: TB de cima para baixo, LR da esquerda para a direita. Em cada losango, escolha uma saída pelo rótulo da seta — cada saída é uma resposta possível à pergunta. As molduras tracejadas agrupam etapas de uma mesma área. Uma seta que atravessa a moldura é uma passagem de uma área para outra. Na tela Etapa. Uma ação ou processo. É a forma padrão. Decisão. Pergunta com mais de uma saída — a única forma em laranja. Início ou fim. Terminal do fluxo: onde ele começa ou termina. Entrada ou saída. Dados que entram no processo ou saem dele. Armazenamento. Banco de dados, fila ou arquivo persistido. Subprocesso. Etapa detalhada em outro lugar. Preparação. Etapa que configura a seguinte. Sequência. O trabalho passa para o próximo nó. Relação secundária. Consulta, telemetria ou efeito assíncrono — não é o caminho principal. Caminho principal. A rota que o autor quis destacar. sim Rótulo. A condição ou o dado que viaja na seta. GRUPO Agrupamento. Subgraph: uma área, equipe ou sistema. Bifurcação ou junção. Caminhos que se dividem para correr em paralelo ou voltam a se juntar. Exemplos schema Plataforma de pedidos schema Galeria de formas schema Plataforma, da esquerda para a direita schema Plataforma, da direita para a esquerda schema Plataforma, de baixo para cima Como ler Leia o título de cada raia antes do conteúdo: ele diz de quem são as etapas dali. Siga as setas como num fluxograma comum. Toda seta que cruza de uma raia para outra é uma passagem de responsabilidade — o ponto onde costumam nascer esperas e retrabalho. Na tela GRUPO Raia. A faixa de um responsável, com o nome no topo. Etapa. Uma ação feita pelo dono da raia. Decisão. Pergunta com mais de uma saída. Sequência. O trabalho segue para a próxima etapa. Relação secundária. Aviso, consulta ou registro fora do caminho principal. sim Rótulo. Condição ou dado que acompanha a passagem. Exemplo schema Aprovação de pedidos Como ler O tempo corre de cima para baixo. Cada coluna é um participante, e a linha tracejada que desce dele é a sua linha da vida. Leia as mensagens em ordem — se houver números nos círculos escuros, eles dão a ordem exata. Molduras com aba preta envolvem trechos especiais: alt (um caminho ou outro), opt (só se), loop (repete), par (ao mesmo tempo), critical e break. Na tela Participante. Sistema, serviço ou componente, com sua linha da vida. Ator. Uma pessoa que participa da conversa. Chamada. Mensagem síncrona: quem chama espera a resposta. Resposta. O retorno de uma chamada. Mensagem assíncrona. Enviada sem esperar resposta. Encerramento. Mensagem que termina ou descarta o destino. Ativação. O participante está processando algo. alt Fragmento. alt, opt, loop, par, critical ou break — o nome vem na aba. Nota. Comentário sobre um ou mais participantes. 1 Número. A ordem da mensagem (autonumber). BOX Box. Participantes que pertencem ao mesmo sistema. Exemplo schema Checkout com concorrência Interação
ZenUML Um diagrama de sequência escrito como código: chamadas de método aninhadas, blocos if, while e try, e o que cada chamada devolve.
Como ler O tempo corre de cima para baixo, como na sequência comum. Cada seta com nome de método é uma chamada. O que está dentro de uma chamada acontece durante ela: a barra cinza no participante mostra esse intervalo. Os números à esquerda (1.2.1) dizem o aninhamento: 1.2.1 acontece dentro de 1.2, que acontece dentro de 1. Na tela Participante. Quem recebe as chamadas, com sua linha da vida. Chamada. Um método invocado no participante de destino. Retorno. O valor que volta ao chamador. Loop Bloco. Alt, Loop, Opt, Par ou Try, com o nome no cabeçalho cinza e a condição entre colchetes. Execução. Enquanto a barra durar, o participante está trabalhando. Exemplo schema Orquestração de pedido Estrutura
Diagrama de classes Descreve a estrutura de um sistema orientado a objetos: as classes, o que cada uma guarda e faz, e como elas se relacionam.
Como ler Cada caixa tem três faixas: o nome, os atributos e os métodos. O símbolo antes de cada item é a visibilidade: + público, - privado, # protegido, ~ pacote. Leia cada ligação pela ponta: triângulo vazio é herança, losango é composição ou agregação, seta tracejada é dependência. Números nas pontas são multiplicidade — quantos de um lado se ligam a quantos do outro (1, 0..*, 1..*). Na tela Classe. Nome, atributos e métodos. «interface» ou «abstract» no topo marcam o tipo. Herança. A classe da ponta é a mais geral; a outra é um caso dela. Realização. A classe implementa a interface da ponta. Composição. O todo (lado do losango cheio) é dono das partes e elas morrem com ele. Agregação. O todo reúne partes que existem por conta própria. Associação. Uma classe conhece ou usa a outra. Dependência. Uso passageiro: mudar a ponta pode afetar quem depende. 1 0..* Multiplicidade. Quantos objetos participam de cada lado. Nota. Comentário do autor. Exemplo schema Domínio de pedidos Comportamento
Diagrama de estados Mostra os estados pelos quais algo passa — um pedido, uma tela, um dispositivo — e os eventos que o fazem mudar de um para outro.
Como ler Comece no ponto preto: é o estado inicial. Cada seta é uma transição; o rótulo diz o evento que a dispara. O alvo (círculo com ponto) é o fim. Um estado grande com outros dentro é composto. Quando ele se divide em regiões tracejadas lado a lado, elas acontecem ao mesmo tempo. Na tela Início. Onde a vida do objeto começa. Fim. Estado final. Estado. Uma situação estável do objeto. sim Transição. A mudança de estado, com o evento que a causa. Escolha. O caminho depende de uma condição. Fork e join. Divide em estados paralelos ou espera todos terminarem. GRUPO Estado composto. Um estado com sub-estados dentro. Nota. Comentário do autor. Exemplo schema Ciclo de vida do pedido Como ler Cada caixa é uma entidade (em geral, uma tabela). As linhas trazem o tipo, o nome e a chave de cada atributo: PK primária, FK estrangeira, UK única. Leia a relação nos dois sentidos, pela ponta de cada lado: a ponta junto de uma entidade diz quantas dela participam. Linha cheia é relação identificadora (a filha depende da mãe para existir); tracejada, não identificadora. Na tela Entidade. Nome no topo e atributos abaixo. Exatamente um. Sempre um, nem zero nem vários. Zero ou um. Pode não existir; se existir, é um. Um ou muitos. Pelo menos um (pé de galinha). Zero ou muitos. Qualquer quantidade, inclusive nenhuma. Não identificadora. As duas entidades existem por conta própria. sim Verbo. Como a relação se lê: "Cliente realiza Pedido". Exemplo schema Comércio eletrônico Experiência
Jornada do usuário Conta, etapa por etapa, a experiência de alguém ao realizar uma tarefa: a satisfação em cada passo e quem participa dele.
Como ler Leia da esquerda para a direita, seção por seção. O rosto abaixo de cada tarefa é a nota de 1 (frustrado) a 5 (satisfeito): quanto mais alto o rosto, melhor a experiência. Os vales são os pontos a melhorar. Os pontos coloridos sobre cada tarefa são os atores envolvidos; a legenda à esquerda diz quem é cada cor. Na tela Seção. Uma fase da jornada. Tarefa. O que a pessoa faz naquele passo. Satisfação. Nota de 1 a 5 — a altura do rosto acompanha a nota. Atores. Quem participa de cada tarefa. Tempo
Cronograma (Gantt) Planeja um projeto no tempo: cada barra é uma tarefa, com início, duração e dependências. Mostra o que corre em paralelo e o que atrasa o todo.
Como ler O eixo de baixo é o calendário. Cada linha é uma tarefa, agrupada pela seção escrita à esquerda. A posição da barra é quando a tarefa acontece; o comprimento, quanto dura. Faixas cinza verticais são dias excluídos (fins de semana, feriados). Tarefas críticas têm contorno vermelho: se atrasarem, o projeto atrasa. Na tela Tarefa. Trabalho planejado. Em andamento. Tarefa ativa agora. Concluída. Já terminou. Crítica. No caminho crítico: não tem folga. Marco. Um momento, sem duração: entrega, aprovação, lançamento. Dia excluído. Não conta no prazo. Hoje. Linha laranja na data atual, quando ativada. Exemplo schema Implantação da plataforma Como ler Cada fatia é uma categoria; o ângulo é a proporção, e a porcentagem vem escrita dentro. A legenda liga cada cor ao nome e ao valor bruto. Fatias de tamanhos parecidos são difíceis de comparar a olho: confira pelos números. Na tela Fatia. Uma categoria; o ângulo é a sua parte do total. Legenda. Cor, nome e valor de cada categoria. Como ler Leia os eixos primeiro: em cada um, o texto da esquerda (ou de baixo) é o valor baixo, e o da direita (ou de cima), o alto. Cada quadrante tem um nome que diz o que fazer com os itens que caem nele. A posição do ponto é a nota do item nos dois critérios ao mesmo tempo. Na tela Eixos. Os dois critérios de avaliação. Quadrante. Uma das quatro combinações, com o nome dela. Item. Um ponto com o nome ao lado. Exemplo schema Priorização de iniciativas Como ler Caixas «Requirement» (e as variações Functional, Performance, Interface, Physical, Design Constraint) trazem id, texto, risco e método de verificação. Caixas «Element» são partes do sistema: documento, componente, teste. O rótulo de cada seta tracejada diz a relação: satisfies, traces, contains, derives, refines, verifies ou copies. Na tela Requisito. O tipo vem entre «» no topo, com id, texto, risco e verificação. Elemento. Uma parte do sistema que se relaciona ao requisito. Relação. O rótulo diz qual: «satisfies», «verifies», «derives»… Como ler Os atores (bonecos) ficam fora da fronteira do sistema; cada elipse dentro dela é um objetivo. A linha liga um ator aos casos de uso que ele aciona. Setas tracejadas «include» dizem que um caso sempre executa o outro; «extend», que o acrescenta só sob condição. Triângulo vazio: um ator é um tipo especial do outro. Na tela Ator. Pessoa ou sistema de fora que usa o sistema. Caso de uso. Um objetivo que o ator alcança. GRUPO Fronteira. O que está dentro é o sistema; o nome vem no topo. Associação. O ator participa do caso de uso. include e extend. Um caso que inclui outro sempre, ou estende sob condição. Generalização. O ator de origem herda tudo o que o da ponta faz. Nota. Comentário do autor. Tempo
Git graph Desenha o histórico de um repositório Git — ramos, commits, merges e tags —, bom para explicar uma estratégia de branches.
Como ler O tempo corre da esquerda para a direita. Cada faixa colorida é um ramo, com o nome na etiqueta à esquerda. Cada círculo é um commit. Uma linha que sai de um ramo e desce para outro é a criação de um ramo; a que volta e se junta é um merge. Etiquetas âmbar são tags, em geral versões publicadas. Na tela Ramo. Uma linha de trabalho com nome próprio. Commit. Um registro de alterações. Merge. O ponto onde outro ramo foi incorporado. Reversão. Commit que desfaz outro. Destaque. Commit que o autor quis ressaltar. Cherry-pick. Cópia de um commit de outro ramo. Tag. Um nome fixo num commit, como uma versão. Arquitetura
Modelo C4 Descreve a arquitetura de um software em níveis de zoom: contexto (o sistema e quem o usa), containers (aplicações e bancos), componentes (partes de um container), dinâmica e implantação.
Como ler Descubra o nível pelo título e pela primeira palavra do código (C4Context, C4Container…): cada nível é um zoom do anterior. Azul é o que está no escopo — quanto mais escuro, mais alto o nível. Cinza é externo: sistemas e pessoas que o diagrama não detalha. Cada seta tem um verbo e, entre colchetes, a tecnologia. Molduras tracejadas são fronteiras — de um sistema, de um container ou de um nó de implantação. Na tela Pessoa. Um usuário ou papel. Sistema. Um sistema de software inteiro. Container ou componente. Aplicação, serviço ou parte dele — o tom clareia a cada nível. Banco de dados. Container ou componente que guarda dados. Externo. Fora do escopo do diagrama. [SIST] Fronteira. Agrupa o que pertence ao mesmo sistema ou nó. Relação. Verbo e [tecnologia] — "Consulta [HTTPS]". Exemplos schema Contexto schema Containers schema Componentes schema Dinâmico schema Implantação Ideias
Mapa mental Organiza ideias a partir de um tema central, em ramos e sub-ramos — bom para explorar um assunto, planejar ou resumir.
Como ler Comece pelo centro: o bloco de tinta é o tema. Cada cor é um ramo principal; tudo o que tem a mesma cor pertence a ele. Quanto mais longe do centro, mais específico. Os galhos afinam a cada nível. Na tela Tema central. A raiz do mapa. Ramo. Um tópico, na cor do seu ramo principal. Galho. Liga o tópico ao de cima; mais grosso perto da raiz. Exemplo schema Organização da plataforma Como ler Leia da esquerda para a direita, ao longo do eixo preto. As faixas coloridas no topo são seções — agrupam períodos da mesma cor. Cada coluna é um período; as caixas abaixo dele são os eventos daquele momento. Na tela Período. Um intervalo de tempo, na cor da sua seção. Evento. O que aconteceu naquele período — um tom mais claro. Eixo. A direção do tempo. Exemplo schema Evolução da plataforma Como ler Leia da esquerda para a direita. Cada barra vertical é um nó; a altura dela é o total que passa por ali, e o número ao lado do nome é esse valor. A largura de cada faixa é a quantidade que flui entre dois nós. O que entra num nó é igual ao que sai. Na tela Nó. Uma origem, etapa ou destino. Fluxo. A quantidade que passa de um nó a outro — mais larga, maior. Exemplo schema Distribuição por canal Como ler O eixo das categorias (ou do tempo) fica embaixo; o dos valores, à esquerda. No modo horizontal, trocam de lugar. Barras comparam quantidades; linhas mostram tendência. Cada cor é uma série. Barras da mesma categoria podem se sobrepor: leia pelo topo de cada uma. Na tela Barra. O valor de uma categoria numa série. Linha. A evolução de uma série ao longo das categorias. Eixos. Categorias e escala de valores, com seus títulos. Exemplos schema Receita e custo por mês schema Barras horizontais Como ler Aqui é o autor quem posiciona cada bloco na grade, não um algoritmo — a posição tem significado (camada, nível). Um bloco que ocupa várias colunas abrange tudo o que está sob ele. Blocos dentro de uma moldura formam um grupo; as setas mostram dependência ou fluxo. Na tela Bloco. Uma parte do sistema. Bloco composto. Um grupo de blocos. Armazenamento. Banco de dados ou fila. Seta. Dependência ou fluxo entre blocos. Exemplo schema Camadas da plataforma Como ler Cada linha tem 32 bits — de 0 a 31, depois de 32 a 63, e assim por diante. Os números pequenos em cima de cada campo são o primeiro e o último bit dele; a largura do campo é o seu tamanho. Campos de um bit só costumam ser flags (liga/desliga). Na tela 0 3 4 15 Campo. Um intervalo de bits com nome, e o primeiro e o último bit em cima. Exemplos schema Cabeçalho de protocolo schema Campos incrementais Como ler Leia as colunas da esquerda para a direita — do que ainda vai ser feito ao que está pronto. O número depois do nome da coluna é quantos cartões há nela. A barra colorida na borda do cartão é a prioridade. O código sublinhado é o ticket; o nome à direita, o responsável. Na tela Coluna. Uma etapa do trabalho. Cartão. Uma tarefa, com ticket e responsável. Prioridade. Vermelho muito alta, laranja alta, azul baixa, azul-claro muito baixa. Arquitetura
Arquitetura Mostra os serviços de uma infraestrutura — servidores, bancos, discos, internet — e como se conectam, agrupados por ambiente ou rede.
Como ler Cada ícone é um serviço, com o nome embaixo; o desenho diz o tipo (servidor, banco, disco, internet, nuvem). Molduras tracejadas com um ícone no canto são grupos: uma nuvem, uma rede, um cluster. As linhas saem de um lado específico de cada serviço; a seta mostra o sentido da comunicação. Na tela Serviço. Um recurso da infraestrutura. Grupo. Ambiente ou rede que contém os serviços. Conexão. Comunicação entre dois serviços. Exemplo schema Plataforma na nuvem Dados
Radar Compara várias séries em muitos critérios de uma vez: cada raio é um critério, e cada polígono, uma série.
Como ler Cada raio que sai do centro é um critério, com o nome na ponta. Quanto mais longe do centro, maior o valor. Os anéis são a escala. Compare as formas: uma série maior em tudo cobre a outra; formas que se cruzam mostram onde cada uma é mais forte. Na tela Série. Um polígono ligando os valores de uma série em cada critério. Legenda. O nome de cada série. Exemplos schema Avaliação de capacidades schema Radar circular Processo
Event Modeling Descreve um sistema como uma linha do tempo de telas, comandos e eventos: o que a pessoa vê, o que ela manda fazer e o que fica registrado.
Como ler O tempo corre da esquerda para a direita. As raias de cima são telas e automações; as do meio, comandos e visões (read models); as de baixo, os eventos gravados — separados por área, como Pedidos ou Pagamentos. Siga o zigue-zague: tela → comando → evento → visão → próxima tela. Um evento sem visão depois dele é informação que ninguém lê. Na tela Tela. O que a pessoa vê (ui). Comando. Uma intenção de mudar algo (cmd). Evento. Um fato registrado, no passado (evt). Visão. Read model: dados montados a partir de eventos (rmo). Automação. Processo que reage a eventos sem pessoa (pcr). Raia. O tipo de peça e a área a que pertence. Exemplo schema Pedido de ponta a ponta Como ler A área é o valor: retângulos grandes pesam mais. Cada moldura é um grupo, com o nome e o total no topo; os retângulos dentro dela são as partes. Compare áreas dentro do mesmo grupo — entre grupos diferentes, compare pelos totais. Na tela A Grupo e partes. A moldura soma as partes que contém. Exemplo schema Orçamento por área Ideias
Diagrama de Venn Mostra conjuntos e o que eles têm em comum: cada círculo é um grupo, e as sobreposições, o que pertence a mais de um.
Como ler Cada círculo é um conjunto, com o nome dentro. A área onde dois círculos se cruzam pertence aos dois; o centro, onde todos se cruzam, é comum a todos. Os itens escritos numa região pertencem exatamente àqueles conjuntos. Na tela Conjuntos. Dois círculos e a interseção entre eles. Exemplo schema Competências da equipe Como ler Comece pela cabeça, à direita: é o problema que se quer explicar. Cada espinha grande é uma categoria de causa — pessoas, processos, tecnologia, materiais, medição, ambiente são as mais comuns (os "6M"). As setas curtas que chegam a uma espinha são as causas daquela categoria. Na tela Efeito. O problema, na cabeça do peixe. Categoria. Um grupo de causas, com o nome na caixa. Causa. Um fator que pode provocar o efeito. Exemplo schema Atraso nas entregas Como ler O topo é o usuário (âncora, em negrito) e a necessidade dele. Descendo, a cadeia de componentes que a atendem: quanto mais baixo, menos visível para ele. O eixo horizontal é a evolução, em quatro estágios: gênese (novo, incerto), sob medida, produto e commodity (padrão, barato). Setas tracejadas vermelhas mostram para onde um componente deve evoluir; uma barra ao lado dele marca inércia — resistência a mudar. Na tela Cliente Âncora. Quem o mapa atende. Componente. Uma capacidade, ligada às que dependem dela. Evolução. Para onde o componente vai. Inércia. Algo segura o componente onde está. Estágios. Gênese, sob medida, produto, commodity. Exemplo schema Estratégia da plataforma Estratégia
Cynefin Classifica situações pelo tipo de relação entre causa e efeito, para escolher como decidir: seguir a prática, analisar, experimentar ou agir primeiro.
Como ler Encontre o domínio de cada item. Claro: sentir, categorizar, responder. Complicado: sentir, analisar, responder. Complexo: sondar, sentir, responder. Caótico: agir, sentir, responder. No centro fica a confusão: situações que ainda não se sabe em que domínio estão. A linha vermelha entre Claro e Caótico é o penhasco — a complacência que transforma rotina em crise. As setas são mudanças de domínio. Na tela Complexo Domínio. Nome, o jeito de decidir e as situações que cabem nele. Confusão. Ainda não se sabe o domínio. Fronteira. Separa o ordenado (Claro, Complicado) do não ordenado (Complexo, Caótico). Penhasco. A queda do Claro direto no Caótico. sim Transição. Uma mudança de domínio e o que a provoca. Exemplo schema Decisões na operação Como ler Cada nível de recuo é um nível abaixo na hierarquia. As linhas em L ligam cada item à pasta que o contém. O texto em itálico à direita é uma descrição; linhas com fundo laranja são destaques do autor. Na tela Pasta. Contém outros itens. Arquivo. Um item final. Guias. Mostram a que pasta cada item pertence. Destaque. Item que o autor quis ressaltar. Exemplos schema Repositório schema Nomes com acentos e símbolos Processo
Fluxo de agentes Descreve um fluxo de trabalho de agentes de IA: as tarefas, as ferramentas que eles chamam, os documentos que consultam e onde decidem.
Como ler Comece pela entrada (o paralelogramo) e siga as setas. Cada moldura é um flow — uma etapa do trabalho, que pode conter outras. Documentos ligados por linha tracejada são consultados, sem passar o controle; a seta que termina em x é o caminho de falha. Na tela Entrada. O dado que inicia o fluxo. Tarefa. Uma unidade de trabalho do agente. Ferramenta. Função ou API chamada, com parâmetros e retorno. Referência. Material que o agente consulta. Decisão. Um ponto de desvio. Ação. Passo com efeito externo: enviar, gravar, publicar. GRUPO Flow. Etapa que agrupa tarefas. Consulta. Linha tracejada sem ponta: a tarefa lê o documento. Falha. O caminho seguido quando algo dá errado. Exemplo schema Revisão de relatório Como ler Cada regra começa no ponto da esquerda e termina no da direita. Siga os trilhos sem voltar para trás. Uma bifurcação é uma escolha: vale qualquer um dos caminhos. Um trilho que volta por cima é repetição; um desvio que pula a caixa, algo opcional. Caixa arredondada laranja é texto literal, escrito exatamente assim; caixa retangular é outra regra — procure-a pelo nome. Na tela Início e fim. Os pontos que delimitam a regra. IF Terminal. Texto literal. expr Não terminal. Referência a outra regra. Especial. Descrição livre, fora da gramática. Escolha. Um dos caminhos. Repetição. Pode passar de novo pelo trecho. Exemplos schema Primitivas de composição schema Gramática EBNF schema Gramática ABNF schema Gramática PEG Guia de leitura
Sem guia para este diagrama
Abra um dos tipos abaixo para ver um exemplo e a explicação de cada peça, ou consulte a documentação do Mermaid.
Todos os tipos 33 Fluxograma Raias Diagrama de sequência ZenUML Diagrama de classes Diagrama de estados Entidade-relacionamento Jornada do usuário Cronograma (Gantt) Gráfico de pizza Quadrante Diagrama de requisitos Casos de uso Git graph Modelo C4 Mapa mental Linha do tempo Sankey Gráfico XY Diagrama de blocos Pacote de bits Kanban Arquitetura Radar Event Modeling Treemap Diagrama de Venn Ishikawa Mapa de Wardley Cynefin Árvore de diretórios Fluxo de agentes Diagrama de sintaxe