Os diagramas Mermaid dos seus agentes,
desenhados, não exibidos como código
Peça um diagrama ao Claude Code ou ao Codex e ele escreve Mermaid: um bloco de texto que um terminal só consegue exibir como está. O AgentsRoom o desenha em todo lugar onde você lê o que um agente escreveu, e deixa o código a um clique.
A vista da conversa, os arquivos Markdown, os planos da Revisão de planos, as notas, o Project Memory e os tickets do backlog: cada bloco de código mermaid vira o seu diagrama, no tema claro ou escuro do app, no macOS, Windows e Linux. Nada para instalar, nenhuma skill, nenhum servidor MCP.
```mermaid
flowchart LR
A[Login] --> B{Token valid?}
B -->|yes| C[Dashboard]
B -->|no| A
```O mesmo bloco mermaid, como um terminal o exibe e como o AgentsRoom o desenha.
Pergunte ao Claude Code como uma requisição percorre o seu aplicativo, ou peça ao Codex um esboço das tabelas de uma migração, e muitas vezes você recebe um bloco que começa com mermaid: um diagrama de fluxo, um diagrama de sequência ou um diagrama entidade-relacionamento, escrito como texto. Um terminal só consegue exibi-lo como está: você lê setas feitas de traços e desenha as caixas na cabeça.
O AgentsRoom lê o mesmo Markdown e o desenha. O bloco vira o seu diagrama quando entra na tela, um botão Ver código ao passar o mouse traz a fonte de volta, e Ver diagrama volta ao desenho. Se o agente cometeu um erro de sintaxe, o código continua na tela com uma linha dizendo que o diagrama não pôde ser desenhado: você nunca perde o que ele escreveu.
O desenho não depende da CLI: quem o faz é o leitor de Markdown do app, a partir do texto. Um diagrama em um README escrito pelo Codex, em um plano escrito pelo Claude Code ou em um ticket escrito por qualquer outro agente é desenhado do mesmo jeito.
O que muda quando você lê um agente
Uma única regra em todo lugar onde o app exibe Markdown: um bloco mermaid aparece como o seu diagrama.
Em todo lugar onde você lê um agente
A vista da conversa, os arquivos Markdown na pré-visualização e nas abas de arquivo, os planos da Revisão de planos, as notas, as notas do Project Memory, os tickets do backlog e seus comentários, e as respostas da Pergunta à parte.
Desenhado enquanto o agente escreve
Um agente escreve um diagrama linha por linha. O AgentsRoom espera o texto ficar parado por um instante antes de desenhar e, enquanto isso, mantém na tela o último diagrama válido, para que o bloco não fique piscando entre código e desenho.
A fonte a um clique
Passe o mouse sobre um diagrama e clique em Ver código para ler o texto Mermaid de onde ele vem, depois em Ver diagrama para voltar. A fonte nunca é substituída, só mostrada de outro jeito.
Um diagrama quebrado continua legível
Quando o Mermaid não consegue analisar o bloco, o código continua na tela com uma linha embaixo: Não foi possível desenhar este diagrama: o código é mostrado no lugar dele. Você pode devolvê-lo ao agente como está.
Todos os diagramas do Mermaid 11
Diagramas de fluxo, de sequência, de classes, de estados e entidade-relacionamento, gráficos de Gantt, mapas mentais, grafos do git: tudo o que o Mermaid 11 sabe desenhar, o AgentsRoom desenha.
Nada é desenhado fora da tela
Um diagrama só é montado quando se aproxima da tela, um de cada vez, e o resultado é guardado. Uma conversa longa cheia de diagramas não custa nada pelos que você ainda não alcançou rolando.
Como usar
Nada para ativar. Quatro etapas da pergunta ao diagrama.
- 1
Peça um diagrama
Em qualquer agente, peça com palavras simples: desenhe o fluxo de login como um diagrama de fluxo Mermaid, ou mostre esta chamada de API como um diagrama de sequência. Dizer Mermaid em geral basta para o agente responder com um bloco mermaid.
- 2
Leia na vista da conversa
Mude o painel do agente para a vista da conversa: o bloco aparece como diagrama dentro da resposta do agente. O terminal por baixo não muda e continua exibindo o texto.
- 3
Ou abra o arquivo que ele escreveu
Quando o agente coloca o diagrama em um arquivo Markdown (um README, uma nota de arquitetura, um plano), abra-o pelo link do arquivo na resposta dele, pela aba Ficheiros do painel direito ou com Arquivo > Abrir arquivo (Cmd O no macOS, Ctrl O no Windows e Linux): a pré-visualização e a aba de arquivo desenham todos os diagramas dele.
- 4
Confira a fonte
Passe o mouse sobre o diagrama e clique em Ver código para ler ou copiar o texto Mermaid, depois em Ver diagrama para voltar ao desenho.
O que um terminal, o GitHub e as skills de Mermaid já fazem
Claude Code e Codex CLI rodam em um terminal, e um terminal exibe caracteres, não desenhos: um bloco mermaid aparece como a sua fonte. Não é uma configuração que falta na CLI, é o que um terminal é.
É por isso que as pessoas procuram uma skill, um plugin ou um servidor MCP de Mermaid para o Claude Code. Eles ajudam o agente a escrever um diagrama válido ou a exportá-lo para um arquivo de imagem. Para ler o diagrama, você ainda precisa colar o código em algum lugar que o desenhe: o GitHub desenha blocos mermaid em arquivos Markdown e em comentários, o mermaid.live desenha tudo o que você cola, e a pré-visualização de Markdown de um editor faz isso com uma extensão de Mermaid.
O AgentsRoom não substitui essas ferramentas. Ele elimina o copiar e colar quando você já está lendo o agente: o diagrama é desenhado na conversa, no plano ou no arquivo que você já tem aberto ao lado do agente.
Limites
- O terminal bruto de um agente continua exibindo a fonte: o desenho acontece na vista da conversa e nos leitores de Markdown, não dentro da grade do terminal.
- A vista da conversa existe para as CLIs cuja transcrição o AgentsRoom sabe ler: Claude Code, Codex, Grok Build, Mistral Vibe, oh-my-pi, Pi e Antigravity CLI. Com as outras, abra o arquivo Markdown que o agente escreveu.
- Os diagramas usam os temas dark e neutral do Mermaid, combinados com o tema claro ou escuro do app. Eles não usam a sua cor de destaque.
- Um link dentro de um diagrama só abre um endereço http ou https, como um link Markdown. Um link para um arquivo local não faz nada.
- Os rótulos são texto simples: HTML e scripts dentro de um diagrama são removidos, e uma linha de configuração escrita no diagrama não consegue mudar isso.
- Não há botão de exportação: para guardar um diagrama como arquivo PNG ou SVG, peça ao agente para exportá-lo com a ferramenta de linha de comando do Mermaid.
Perguntas frequentes
O Claude Code consegue exibir diagramas Mermaid?
Não no terminal. O Claude Code escreve um diagrama Mermaid como um bloco de código, e um terminal só consegue exibi-lo como texto. Execute o mesmo agente no AgentsRoom e mude o painel dele para a vista da conversa: o bloco é desenhado como diagrama dentro da resposta, e um botão Ver código traz a fonte de volta.
Como pré-visualizar um diagrama Mermaid que um agente escreveu em um arquivo Markdown?
Abra o arquivo no AgentsRoom: clique no link do arquivo na resposta do agente, escolha-o na aba Ficheiros do painel direito ou use Arquivo > Abrir arquivo (Cmd O no macOS, Ctrl O no Windows e Linux). A pré-visualização de Markdown, e a aba de arquivo se você abri-lo em uma aba, desenham todos os blocos mermaid do arquivo.
Funciona com o Codex e outras CLIs de agentes?
Sim. O diagrama é desenhado pelo leitor de Markdown do app a partir do texto, qualquer que seja a CLI que o escreveu, então um diagrama do Codex, do Claude Code ou de qualquer outro agente é desenhado do mesmo jeito em arquivos, planos, notas e tickets. A vista da conversa, onde as respostas são desenhadas à medida que chegam, cobre Claude Code, Codex, Grok Build, Mistral Vibe, oh-my-pi, Pi e Antigravity CLI.
Preciso de uma skill ou de um servidor MCP de Mermaid?
Não para ler os diagramas. Uma skill ou um servidor MCP pode ajudar um agente a escrever Mermaid válido ou a exportá-lo como imagem. O AgentsRoom só desenha o que já está escrito, então os dois funcionam juntos: a skill melhora o diagrama, o AgentsRoom o mostra.
Quais tipos de diagrama são desenhados, e se a sintaxe estiver errada?
Tudo o que o Mermaid 11 desenha: diagramas de fluxo, de sequência, de classes, de estados e entidade-relacionamento, gráficos de Gantt, mapas mentais, grafos do git e o resto do catálogo dele. Um bloco que o Mermaid não consegue analisar continua como código, com uma linha embaixo dizendo que o diagrama não pôde ser desenhado. Peça ao agente para corrigi-lo: o bloco corrigido é desenhado.
Você também pode gostar
Vista da conversa
Uma vista de chat para Claude Code, Codex e mais cinco CLIs de agentes: a sessão lida na própria transcrição da CLI, chamadas de ferramentas recolhidas, respostas ao vivo, no computador e no celular.
Revisão de planos
Seu agente propõe um plano: leia-o como um documento, comente, substitua ou exclua qualquer trecho e depois aprove-o ou devolva-o em uma só mensagem. Todas as versões ficam guardadas.
Project Memory
Dê aos seus agentes de codificação IA uma memória de longo prazo. Decisões, arquitetura e armadilhas persistem entre as sessões e são compartilhadas com todos no projeto. Grátis, ilimitado.
Pergunta à parte
Faça uma pergunta a um agente de código IA ocupado sem interrompê-lo. Uma cópia somente leitura da conversa dele responde numa bolha com abas enquanto o terminal continua trabalhando. Claude Code, Codex, Grok, GitHub Copilot CLI, OpenCode, Mistral Vibe, Antigravity CLI e Kimi Code, no computador ou no celular.
Leia os diagramas dos seus agentes como diagramas
Baixe o AgentsRoom para macOS, Windows ou Linux, peça um diagrama Mermaid a um agente e mude o painel dele para a vista da conversa.
App complementar: acompanhe seus agentes em qualquer lugar
Use Claude, Codex, Antigravity CLI ou outro provedor de IA.
Envie bugs e pedidos direto para o seu backlog público.