Criar diagramas Mermaid

Quem pode fazer: Todos os usuários
Quais planos: Free, Starter, Business, Enterprise, Education
Quais plataformas: Navegador, Desktop

Crie diagramas a partir do código Mermaid e edite-os como faria com as formas e linhas da Miro. O código Mermaid continua sendo a fonte da verdade, então você pode mover diagramas entre a Miro, seu repositório de código e ferramentas de IA sem perder a estrutura.

Se estiver procurando informações sobre o aplicativo Mermaid legado, consulte Diagramas Mermaid para a Miro (legado).

Por que usar diagramas Mermaid na Miro

• Portátil com o restante do seu fluxo de trabalho Mermaid. Use a mesma sintaxe Mermaid que você já usa em Documentos, PRs e chats de IA. Com Miro MCP, agentes podem criar, ler, atualizar e editar diagramas Mermaid nos seus boards.
• Renderizados como formas da Miro. O código Mermaid vira um Diagram criado a partir de formas e conectores editáveis da Miro, dispostos automaticamente pela Miro, não uma imagem estática. A Miro oferece suporte às formas das versões 10 e 11 do Mermaid, então diagramas colados do Mermaid Live, Mermaid AI ou de outras ferramentas são renderizados com os tipos de forma previstos.
• Edição bidirecional. Altere o diagrama visualmente no board e o código Mermaid é atualizado. Edite o código e o diagrama é re-renderizado.
• Feito para colaboração. Como os diagramas são conteúdo nativo da Miro, seu time pode comentar, editar em conjunto e iterar no mesmo board em tempo real.

Criar um diagrama Mermaid

Você pode adicionar diagramas Mermaid de várias maneiras.

Cole o código Mermaid no board

1. Copie o código Mermaid do seu editor, Documentos ou de um chat de IA.
2. Cole-o em um board da Miro.
   A Miro renderiza o código como um Diagram formado por formas e conectores da Miro.

Se o código contiver um erro de sintaxe, a Miro mostra feedback no canvas para avisar que é preciso abrir o modo foco e corrigir no painel de código. Depois de corrigir o código, o diagrama é renderizado automaticamente.

Arraste e solte um arquivo Mermaid

1. Arraste um arquivo .mmd ou .mermaid do seu computador para um board na Miro.
   Miro renderiza o arquivo como um Diagram com formas do Miro.

Para a lista completa de formatos que podem ser carregados, veja Formatos de arquivo compatíveis.

Criar um diagrama com o Miro MCP

Use uma ferramenta de IA compatível com MCP (por exemplo, Cursor ou Claude Code) conectada ao Miro MCP Server para gerar um diagrama Mermaid em um board.

1. Conecte sua ferramenta de IA à Miro MCP.
2. Peça ao agente para criar um diagrama Mermaid em um board específico. Inclua a URL do board no prompt quando quiser que o diagrama seja gerado em um board existente.
3. Abra o board na Miro para revisar, editar e colaborar no diagrama renderizado.

Os agentes também podem ler o Mermaid do board e atualizar os diagramas diretamente no board, assim você pode continuar iterando entre sua base de código e a Miro. Quando um agente edita um diagrama, ele pode adicionar uma legenda que indica o que foi adicionado, removido ou alterado.

Em planos Enterprise, um admin da empresa deve ativar a Miro MCP antes que os usuários possam se conectar. Consulte o guia de admin do Miro MCP Server.

Comece pelo formato Diagrama

1. Em um board da Miro, abra a Barra de Criação e selecione Formatos > Diagrama.
2. Clique em Criar com código.
3. Cole seu próprio código Mermaid no painel de código, ou escolha um template Mermaid.
   O diagrama é renderizado como formas nativas da Miro.
4. Continue a editar no modo foco ou no canvas.

Para saber mais sobre o formato Diagrama, o modo foco, camadas e templates, veja Diagramas da Miro.

Editar um diagrama Mermaid

Você pode editar visualmente no board, no código-fonte Mermaid ou com IA (Assistentes de IA, fluxo ou Miro MCP). As alterações permanecem sincronizadas.

Editar visualmente

1. Abra o diagrama no modo foco.
2. Selecione uma forma, linha ou etiqueta de texto para editar diretamente no diagrama. Abre uma barra de ferramentas com controles para o elemento selecionado: por exemplo, alterar o tipo de forma, editar o texto, ajustar o tamanho da fonte, aplicar negrito ou definir a cor do texto, da borda e do preenchimento.
   
3. Abra o painel de código para confirmar que a sintaxe Mermaid foi atualizada para corresponder ao diagrama.

Criar e conectar formas

No modo foco, é possível expandir o diagrama sem editar o código Mermaid:

• Clique para adicionar formas. Abra o painel de formas e clique em uma forma para adicioná-la ao diagrama. O painel inclui formas de fluxograma Mermaid e as formas padrão de fluxograma da Miro.
• Adicionar uma forma conectada. Selecione uma forma e clique no botão + para adicionar uma nova forma conectada a ela.
• Conectar formas. Selecione uma forma e arraste o botão + até outra forma para traçar uma linha entre elas. Também é possível reconectar uma linha existente para alterar o fluxo.

Ajustar o layout

Abra o painel de layout no modo foco para alterar como o diagrama é organizado:

1. Em Direção, clique em uma seta para definir o fluxo do diagrama: da esquerda para a direita, de cima para baixo, de baixo para cima ou da direita para a esquerda.
   
2. Em Espaçamento, arraste os controles deslizantes Horizontal e Vertical para ajustar o espaço entre as formas.
   
3. Em Formas, escolha como as formas são dimensionadas:
   • Mesma largura: Todas as formas têm a mesma largura para um layout alinhado e organizado.
   • Ajustar ao conteúdo: Cada forma é dimensionada conforme o texto, útil quando algumas formas têm muito mais texto do que outras.
4. Em Texto, escolha como as etiquetas são dispostas:
   • Múltiplas linhas: Etiquetas longas quebram em várias linhas.
   • Linha única: Cada etiqueta fica em uma linha, o que deixa as formas mais largas.

Editar o código

1. Abra o diagrama no modo foco.
2. Abra o painel de código.
   
3. Atualize a sintaxe do Mermaid.
   O diagrama é atualizado enquanto você edita.

Enquanto você edita:

• Forma e código permanecem vinculados. Selecione uma forma no diagrama para destacar o código correspondente, ou selecione o código para ir até a forma correspondente.
• Realce de sintaxe colore os tokens do Mermaid no editor, facilitando a leitura da estrutura.
• É possível redimensionar o painel de código para ter mais espaço ao editar.

Clique no ícone de configurações (engrenagem) no painel de código para ajustar como o editor exibe seu código:

• Números de linha: mostrar ou ocultar os números de linha no editor.
• Quebrar texto: ajustar linhas longas à largura do painel em vez de rolar horizontalmente.

Editar com IA

Você pode iterar em diagramas Mermaid com Assistentes de IA, fluxos, ou um agente conectado via Miro MCP. Agentes leem e editam o código-fonte Mermaid, então podem fazer alterações precisas sem regenerar todo o diagrama.

Com Assistentes de IA ou fluxos:

1. Selecione o diagrama no board, ou copie o link do widget do diagrama.
2. Abra um Assistente de IA ou execute um fluxo.
3. Peça a alteração desejada (por exemplo, “pinte todos os contêineres deste diagrama de vermelho”).
   O diagrama é atualizado no local.

Com Miro MCP:

1. Copie o link do widget de diagrama.
2. Abra sua ferramenta de IA preferida, com o Miro MCP autenticado.
3. Peça ao agente para fazer suas alterações, colando o link do widget de diagrama que você deseja que ele edite.
   O diagrama é renderizado novamente no lugar conforme o agente edita.

A edição visual e o painel de código estão disponíveis apenas no modo foco. A edição em tela dividida diretamente no canvas não é compatível.

Mais funcionalidades de edição

Se precisar de mais formas, ou quiser mover as formas livremente, altere o diagrama para free-form. É possível iniciar isso pelo painel de formas, pelo painel de layout ou tentando mover uma forma no diagrama.

1. Tente mover uma forma, ou selecione Mudar para o modo livre no painel de formas ou no painel de layout.
   O modal Mudar para o modo livre abre.
2. Escolha como alternar:
   • Mudar e substituir: Converter este diagrama para o modo livre.
   • Criar cópia e depois mudar: Mantenha a versão atual em Mermaid e converta uma cópia para o modo livre.

Depois de mudar um diagrama para o modo livre, ele deixa de ficar sincronizado com o código Mermaid e não pode mais ser editado via MCP.

Tipos de diagrama compatíveis

Esta tabela mostra como cada tipo de diagrama Mermaid é renderizado na Miro. A edição visual no modo foco está disponível hoje para fluxogramas; mais tipos estão sendo adicionados iterativamente:

Se precisar de um tipo de diagrama que ainda não seja editável visualmente, envie seu feedback neste formulário. Podemos entrar em contato para uma entrevista.

Para a lista completa de tipos de diagramas do Mermaid e da sintaxe, consulte a documentação oficial do Mermaid.

Compartilhar e exportar

• Ler com a Miro MCP. Peça a um agente conectado que leia o diagrama a partir da URL do board para que você possa documentá-lo em um repositório, PR ou em outras ferramentas. O código-fonte do Mermaid continua disponível para ciclos de ida e volta.
• Compartilhar um link. Copie a URL do board ou, no menu do diagrama Mais (⋯), selecione Copiar link do modo foco para levar colaboradores diretamente ao diagrama. Veja também Como compartilhar boards e convidar colaboradores.
• Baixar como PDF ou imagem. No menu do diagrama Mais (⋯), selecione Exportar como PDF ou Exportar como imagem (JPG, SVG ou PDF). Você também pode copiar o diagrama como imagem do board.

Restrições conhecidas

Tenha em mente as seguintes limitações:

• A edição visual está disponível apenas para fluxogramas. Diagramas de status, sequência, classe e ER são renderizados como formas nativas da Miro, mas a edição visual para esses tipos será disponibilizada posteriormente.
• A edição visual e o painel de código estão disponíveis apenas no modo foco.
• A edição visual de formas, texto e linhas é limitada ao que a sintaxe Mermaid suporta.
• Os diagramas usam o auto layout nativo da Miro. Não é possível mover as formas livremente em um diagrama Mermaid.

Avaliamos solicitações de funcionalidades continuamente; se alguma dessas limitações for um impeditivo para você, entre em contato conosco pela comunidade ou com seu admin.

Informações adicionais

• Para a sintaxe do Mermaid, tipos de diagramas suportados e exemplos, consulte a documentação oficial do Mermaid.
• Para recursos do formato Diagram, como camadas, contêineres e modo foco, consulte os Diagramas da Miro.
• Para conectar ferramentas de IA à Miro, consulte a Visão geral do Miro MCP Server.
• Para Assistentes de IA e fluxo, consulte a Visão geral dos Assistentes de IA e a Visão geral do fluxo.