Criar diagramas Mermaid

Quem pode fazer isso: 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 formas e linhas no Miro. O código Mermaid permanece como fonte de verdade, permitindo mover diagramas entre a Miro, sua base de código e ferramentas de IA sem perder a estrutura.

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

Por que usar diagramas Mermaid na Miro

• Portável dentro do seu fluxo de trabalho com Mermaid. Use a mesma sintaxe Mermaid que já usa em Documentos, PRs e chats de IA. Com a Miro MCP, agentes podem criar, ler, atualizar e editar diagramas Mermaid nos seus boards.
• Renderizado como formas do Miro. O código Mermaid se transforma em um Diagram composto por formas e conectores editáveis do Miro, dispostos 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, dos Documentos ou de um chat de IA.
2. Cole-o em um board da Miro.
   A Miro renderiza o código como um diagrama de 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 à 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 criado em um board existente.
3. Abra o board na Miro para revisar, editar e colaborar no diagrama renderizado.

Agentes também podem ler o código Mermaid do board e atualizar diagramas diretamente nele, para que você possa continuar 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: Em planos Enterprise, o Admin da empresa deve ativar a Miro MCP antes que os usuários possam se conectar. Veja o guia de administração 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 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, consulte os Diagramas da Miro.

Editar um diagrama Mermaid

É possível editar visualmente no board, no código-fonte Mermaid ou editar o 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 editar 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 do 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 Estreito para um layout mais compacto, Regular para espaçamento equilibrado, ou Amplo para um layout mais espaçoso e fácil de visualizar.
   
5. Abra o painel de código para confirmar que a sintaxe Mermaid foi atualizada para corresponder.

Editar o código

1. Abra o diagrama no modo foco.
2. Abra o painel de código.
   
3. Atualize a sintaxe Mermaid.
   O diagrama é renderizado novamente conforme 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 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 do diagrama.
2. Abra a ferramenta de IA de sua preferência, com a Miro MCP autenticada.
3. Peça ao agente para fazer suas alterações, colando o link do widget do diagrama que você quer que ele edite.
   O diagrama é renderizado novamente no local conforme 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, mude o diagrama para o modo livre. Você pode 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.
   Abre o modal Mudar para o modo livre .
2. Escolha como mudar:
   • Mudar e substituir: Converter este diagrama para o modo livre.
   • Criar cópia e depois mudar: Manter a versão atual em Mermaid e converter uma cópia para o modo livre.

AVISO: 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

Fluxogramas são renderizados como formas nativas da Miro. Outros tipos de diagramas Mermaid estão sendo adicionados de forma iterativa:

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

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

Compartilhar e exportar

• Leia 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 de código, em um PR ou em outras ferramentas. A fonte Mermaid permanece disponível para sincronização bidirecional.
• Compartilhe um link. Copie a URL do board, ou no menu Mais do diagrama (⋯) selecione Copiar link do modo foco para enviar colaboradores diretamente ao diagrama. Consulte também Como compartilhar boards e convidar colaboradores.
• Baixe como PDF ou imagem. No menu Mais do diagrama (⋯), selecione Exportar como PDF ou Exportar como imagem (JPG, SVG ou PDF). Também é possível copiar o diagrama como imagem do board.

Restrições conhecidas

Tenha em mente as limitações a seguir:

• 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 do Mermaid suporta.
• Os diagramas usam o layout automático nativo da Miro. Não é possível mover as formas livremente em um diagrama Mermaid.

Avaliamos solicitações de funcionalidades de forma contínua; se alguma dessas limitações for um obstáculo para você, entre em contato conosco pela comunidade ou com seu admin.

Informações adicionais

• Para a sintaxe do Mermaid, tipos de diagrama suportados e exemplos, consulte a documentação oficial do Mermaid.
• Para funcionalidades 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.