Criar diagramas Mermaid (Beta)

Quem pode usar: 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 Mermaid continua sendo a fonte da verdade, então você pode mover os diagramas entre a Miro, sua base de código e ferramentas de IA sem perder a estrutura.

NOTA: Os diagramas Mermaid estruturados estão em Beta. Os tipos de diagrama suportados e as funcionalidades de edição estão sendo aprimorados iterativamente, e algumas funcionalidades descritas abaixo ainda estão em processo de lançamento.

NOTA: Se estiver procurando informações sobre o app Mermaid legado, consulte Diagramas Mermaid na Miro (legado).

Por que usar diagramas Mermaid na Miro

• Compatível 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 o Miro MCP, agentes podem criar, ler, atualizar e editar diagramas Mermaid nos seus boards.
• Renderizado como formas da Miro. O código Mermaid se transforma em um Diagram composto por formas e conectores editáveis da Miro, organizados automaticamente pela Miro, e não em uma imagem estática.
• Edição bidirecional. Altere o diagrama visualmente no board e o código Mermaid é atualizado. Edite o código e o diagrama é renderizado novamente.
• Projetado para colaboração. Como os diagramas são conteúdo nativo da Miro, seu time pode comentar, coeditar e iterar no mesmo board em tempo real.

Criar um diagrama Mermaid

Você pode adicionar diagramas Mermaid de três maneiras.

Colar código Mermaid no board

1. Copie o código Mermaid do seu editor, Documentos ou de um chat com IA.
2. Cole-o em um board da Miro.
   Miro renderiza o código como um diagrama com formas da Miro.

Criar um diagrama com 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 ao Miro MCP.
2. Peça ao agente para criar um diagrama Mermaid em um board específico. Inclua a URL do board no seu prompt quando quiser que o diagrama seja criado 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 código Mermaid do board e atualizar diagramas diretamente no board, permitindo que você continue iterando entre sua base de código e a Miro. Ao editar um diagrama, o agente pode adicionar uma legenda que indica o que foi adicionado, removido ou alterado.

NOTA: Nos planos Enterprise, o Admin da empresa deve ativar o Miro MCP antes que os usuários possam se conectar. Consulte o guia do admin do Miro MCP Server.

Comece pelo formato Diagram

1. No 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 da Miro.
4. Continue a editar no modo foco ou no canvas.

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

Editar um diagrama Mermaid

Você pode editar visualmente no board, no código Mermaid ou editar um diagrama com IA. As alterações permanecem sincronizadas.

Editar visualmente

1. Abra o diagrama no modo foco.
2. Selecione uma forma, linha ou etiqueta de texto para editá-la diretamente no diagrama. Uma barra de ferramentas é exibida 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. Defina a direção do layout. Clique no controle de direção na barra de ferramentas Diagram e escolha De cima para baixo, De baixo para cima, Da esquerda para a direita ou Da direita para a esquerda.
   
4. Ajuste o espaçamento. Abra o controle de layout e escolha Compacto para um espaçamento mais enxuto, Regular para espaçamento equilibrado, ou Espaçado para um layout mais arejado, mais fácil de percorrer.
   
5. Abra o painel de código para confirmar que a sintaxe Mermaid foi atualizada.

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 em tempo real enquanto você edita.

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: Quebrar linhas longas para ajustar à largura do painel em vez de rolar horizontalmente.

Editar com IA

1. Copie o link do widget de diagrama.
2. Abra a ferramenta de IA de sua preferência, com o Miro MCP autenticado.
3. Peça ao agente que faça as alterações, colando o link do widget de diagrama que será editado.
   O diagrama é atualizado no local enquanto o agente edita.

NOTA: 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. Você pode iniciar isso a partir do painel de formas, do painel de layout, ou tentando mover uma forma no diagrama.

1. Tente mover uma forma, ou selecione Mudar para free-form no painel de formas ou no painel de layout.
   O modal Mudar para edição free-form é aberto.
2. Escolha como alternar:
   • Converter e substituir: Converter este diagrama para free-form.
   • Criar cópia e converter: Manter a versão atual em Mermaid e converter uma cópia para free-form.

AVISO: Depois de mudar um diagrama para free-form, ele não ficará mais sincronizado com o código Mermaid e não poderá mais ser editado via MCP.

Tipos de diagrama suportados

Fluxogramas são renderizados como formas nativas da Miro. Outros tipos de diagrama Mermaid estão sendo adicionados gradualmente:

Se você 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 e da sintaxe do Mermaid, consulte a documentação oficial do Mermaid.

Compartilhar e exportar

• Ler com o Miro MCP. Peça a um agente conectado para ler o diagrama a partir da URL do board, para que você possa documentá-lo em um repositório de código, PR ou em outras ferramentas. O código-fonte Mermaid permanece disponível para ciclos de ida e volta.
• Compartilhar link. Copie a URL do board ou, no menu Mais do diagrama (⋯), selecione Copiar link do modo foco para enviar os colaboradores diretamente para o diagrama. Veja também Como compartilhar boards e convidar colaboradores.
• Baixar como PDF ou imagem. No menu Mais do diagrama (⋯), 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

Como os diagramas Mermaid estruturados estão em Beta, tenha em mente as seguintes restrições:

• A edição visual está disponível apenas para fluxogramas.
• 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. Para mover as formas livremente, ou usar um layout que a Mermaid não suporta, converta o diagrama para o modo livre.
• Em breve será possível arrastar e soltar formas. Por enquanto, adicione formas com o + botão em uma forma, ou usando copiar e colar ou duplicar.

Outras informações

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