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 código Mermaid continua sendo a fonte de verdade, permitindo que você mova diagramas entre a Miro, seu repositório 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 sendo lançadas.
NOTA: Se você procura informações sobre o aplicativo Mermaid legado, consulte Diagramas Mermaid para 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á escreve em Documentos, PRs e chats de IA. Com Miro MCP, agentes podem criar, ler, atualizar e editar diagramas Mermaid nos seus boards.
- Renderizado como formas da Miro. O código Mermaid vira um Diagram composto por formas e conectores editáveis da Miro, posicionados automaticamente pela Miro, não uma imagem estática.
- Edição bidirecional. Ao alterar o diagrama visualmente no board, o código Mermaid é atualizado. Ao editar o código, o diagrama é renderizado novamente.
- Feito 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
- Copie o código Mermaid do seu editor, dos Documentos ou de um chat de IA.
- Cole-o em um board da Miro.
A Miro renderiza o código como um Diagram composto por formas e conectores 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.
- Conecte sua ferramenta de IA à Miro MCP. Para as etapas de configuração, consulte Miro MCP.
- Peça ao agente para criar um diagrama Mermaid em um board específico. Inclua a URL do board no seu prompt quando quiser o diagrama em um board existente.
- 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 os diagramas diretamente nele, para que você possa continuar iterando entre sua base de código e a Miro. Quando um agente editar um diagrama, ele pode adicionar uma legenda que indica o que foi adicionado, removido ou alterado.
OBSERVAÇÃO: Nos planos Enterprise, um Admin da empresa deve ativar a Miro MCP antes que os usuários possam se conectar. Consulte o guia do Admin da empresa do Miro MCP Server.
Comece pelo formato Diagram
- Em um board da Miro, abra a Barra de criação e selecione Formatos > Diagrama.
- Clique em Começar com código.
- Escolha um template Mermaid ou cole seu próprio código Mermaid no painel de código.
O diagrama é renderizado como formas da Miro. - 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 um diagrama com IA, visualmente no board ou no código-fonte Mermaid. As alterações permanecem sincronizadas.
Editar visualmente
- Abra o diagrama no modo foco.
- Adicione ou remova formas e conectores como faria em qualquer diagrama do Miro.
- Altere o layout: de cima para baixo, da esquerda para a direita.
- Abra o painel de código para confirmar que a sintaxe Mermaid foi atualizada para corresponder.
Editar o código
- Abra o diagrama no modo foco.
- Abra o painel de código.
- Atualize a sintaxe do Mermaid.
O diagrama é renderizado novamente enquanto você edita.
Editar com IA
- Copie o link do widget do diagrama.
- Abra o agente de sua preferência, com a Miro MCP autenticada.
- Peça ao agente para fazer suas alterações, colando o link do widget do diagrama que você quer que o agente edite.
O diagrama é renderizado novamente 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 visualização dividida diretamente no canvas não é suportada.
Mais funcionalidades de edição
Se precisar de mais formas ou quiser mover as formas livremente, use um dos pontos de entrada no painel de formas ou no painel de layout para alternar o diagrama para o modo livre.
ATENÇÃO: Depois de alternar um diagrama para o modo livre, ele deixa de estar sincronizado com o código Mermaid e não poderá mais ser editado via MCP.
Tipos de diagramas compatíveis
Fluxogramas são renderizados como formas nativas da Miro. Outros tipos de diagramas Mermaid estão sendo adicionados iterativamente:
- Fluxogramas: Renderizam como formas nativas e editáveis da Miro.
- Diagramas de sequência, de classe e de relacionamento entre entidades: Renderizam como formas nativas da Miro; edição visual em breve.
- Outros tipos de diagrama: Se precisar de um tipo de diagrama não listado acima, envie seu feedback em este 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 a Miro MCP. Peça a um agente conectado para ler o diagrama pela URL do board, para que você possa documentá-lo em um repositório de código, PR ou em outras ferramentas. A sintaxe Mermaid permanece disponível como fonte de verdade para sincronização bidirecional.
- Compartilhar um link. Copie a URL do board ou, a partir do menu Mais do diagrama (⋯), selecione Copiar link do modo foco para enviar colaboradores diretamente ao 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.
Limitações conhecidas
Como os diagramas Mermaid estruturados estão em Beta, tenha em mente as seguintes limitações atuais:
- 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 auto-layout nativo da Miro. Para mover formas livremente, ou usar um layout que o Mermaid não suporta, converta o diagrama para o modo livre.
- Arrastar e soltar formas estará disponível em breve. Por enquanto, adicione formas com o botão + em uma forma, ou com copiar e colar ou duplicar.
Outras informações
- Para a sintaxe do Mermaid, tipos de diagrama suportados e exemplos, consulte a documentação oficial do Mermaid.
- Para recursos do formato Diagram, como camadas, contêineres e modo foco, consulte Diagramas da Miro.
- Para conectar ferramentas de IA à Miro, consulte a Visão geral do Miro MCP Server.