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 as formas e linhas da Miro. O código Mermaid continua sendo a fonte de verdade, assim você pode mover diagramas entre a Miro, seu 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 evoluindo iterativamente, e algumas funcionalidades descritas abaixo ainda estão sendo implementadas.
NOTA: Se você procura informações sobre o app legado Mermaid, consulte Diagramas Mermaid para Miro (legado).
Por que usar diagramas Mermaid na Miro
- Portá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.
- Exibido como formas da Miro. O código Mermaid é convertido em um Diagram composto por formas e conectores editáveis da Miro, dispostos automaticamente pela Miro, não 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
- Copie o código Mermaid do seu editor, Documentos ou de um chat de IA.
- Cole-o em um board da Miro.
A Miro renderiza o código como um Diagrama formado por formas da Miro.
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.
- Conecte sua ferramenta de IA ao 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 que o diagrama esteja em um board existente.
- Abra o board na Miro para revisar, editar e colaborar no diagrama gerado.
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. Quando um agente edita um diagrama, pode adicionar uma legenda indicando o que foi adicionado, removido ou alterado.
NOTA: Em 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.
Começar 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 é exibido 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, consulte Diagramas da Miro.
Editar um diagrama Mermaid
Você pode editar um diagrama com IA, visualmente no board, ou no código-fonte do 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 se a sintaxe do Mermaid foi atualizada.
Editar o código
- Abra o diagrama em modo foco.
- Abra o painel de código.
- Atualize a sintaxe Mermaid.
O diagrama é renderizado novamente conforme você edita.
Editar com IA
- Copie o link do widget do diagrama.
- Abra o agente de sua preferência, com o Miro MCP autenticado.
- 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 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 é 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.
AVISO: Depois de alternar 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 diagramas suportados
Diagramas de fluxo são renderizados como formas nativas da Miro. Outros tipos de diagramas Mermaid estão sendo adicionados iterativamente:
- Fluxogramas: São renderizados como formas nativas e editáveis da Miro.
- Diagramas de sequência, de classe e de relacionamento entre entidades: São renderizados como formas nativas da Miro; a edição visual estará disponível em breve.
- Outros tipos de diagrama: Se precisar de um tipo de diagrama não listado acima, 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, veja a documentação oficial do Mermaid.
Compartilhar e exportar
- Ler com a 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, em um PR ou em outras ferramentas. O código-fonte Mermaid permanece disponível para ida e volta.
- Compartilhar link. Copie a URL do board ou, no menu Mais (⋯) do diagrama, selecione Copiar link do modo foco para enviar 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). Também é possível copiar o diagrama como imagem do board.
Limitações conhecidas
Como os diagramas Mermaid estruturados estão em Beta, fique atento às 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 formato livre.
- Arrastar e soltar formas estará disponível em breve. 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, tipos de diagramas suportados e exemplos, consulte a documentação oficial do Mermaid.
- Para funcionalidades do formato Diagram, como camadas, contêineres e modo foco, consulte Diagramas da Miro.
- Para conectar ferramentas de IA à Miro, consulte Visão geral do Miro MCP Server.