Diagramas Mermaid para Miro

Pessoas: Todos os usuários
Planos: Todos os planos
Plataformas: Navegador, Desktop

Com o aplicativo Mermaid, você pode facilmente criar e incorporar diagramas ricos em código diretamente nos seus boards da Miro. Isso permite que você visualize sistemas complexos, fluxos de trabalho ou estruturas de dados usando uma sintaxe simples baseada em texto, aprimorando a colaboração e a compreensão.

Alterando o código de um diagrama e vendo a atualização da pré-visualização em tempo real

Instale o aplicativo Mermaid

Você pode instalar o aplicativo Mermaid do Marketplace da Miro ou diretamente da barra de ferramentas Criação dentro de um board da Miro.

Para instalar a partir do Marketplace da Miro:

1. Navegue até o Marketplace da Miro ou siga este link direto para o aplicativo Mermaid.
2. Selecione um time na Miro para completar a instalação.

Você também pode instalar o aplicativo a partir da barra de ferramentas Criação:

1. Na barra de criação à esquerda do seu board, selecione Ferramentas, Mídia e Integrações (+). O painel de Ferramentas, Mídia e Integrações será aberto.
2. Na guia Ferramentas, procure e selecione Diagramas Mermaid.
3. O painel do app Diagramas Mermaid será aberto, e o app será adicionado à sua barra de ferramentas.

✏️ Nota: Usuários que não são admins não podem instalar apps se a instalação de apps for restrita nas configurações do time.

Crie e adicione diagramas aos boards da Miro

Depois de instalado, o aplicativo Mermaid permite gerar diagramas usando código baseado em texto e adicioná-los ao seu board como imagens.

Após a instalação, você encontrará o aplicativo Mermaid na sua barra de Ferramentas de Criação. O aplicativo abre com um código de exemplo padrão. Ao modificar o código para construir seu diagrama, ele se atualiza na área de visualização à direita, permitindo ver suas alterações em tempo real.

O aplicativo Mermaid inclui vários diagramas de exemplo, acessíveis no canto inferior esquerdo do painel do aplicativo. Você pode selecionar um desses exemplos e, em seguida, personalizá-lo conforme suas necessidades.

Você pode alterar o tamanho do painel do editor de código arrastando a borda à direita.

Alterando o tamanho do painel do editor de código

Quando terminar de criar seu diagrama, clique em Adicionar ao board. O diagrama será adicionado ao seu board como uma imagem.

Adicionando um diagrama ao board

Editar diagramas existentes

Você pode também modificar diagramas Mermaid que já estão no seu board da Miro.

1. Clique na imagem do diagrama Mermaid no seu board para selecioná-la.
2. Clique no ícone do Mermaid no menu de contexto que aparece (ou encontre-o na barra de ferramentas de Criação).
3. O editor do Mermaid será aberto com o código do diagrama. Faça suas alterações no editor de código.
4. Clique em Atualizar Diagrama.
5. Você retornará ao seu board da Miro, e o diagrama no board será atualizado com suas alterações.

Informações adicionais

Aqui estão alguns recursos adicionais e detalhes para trabalhar com diagramas Mermaid na Miro.

Sintaxe e documentação do Mermaid

O aplicativo Mermaid usa uma sintaxe específica para gerar diagramas a partir de texto. Para informações detalhadas sobre a sintaxe, incluindo os tipos de diagramas suportados e opções, consulte a documentação oficial do Mermaid. Você também pode acessar um link para esta documentação no canto inferior esquerdo do painel do aplicativo Mermaid dentro da Miro.

Compartilhamento e exportação de diagramas

Uma vez que um diagrama do Mermaid é adicionado ao seu board, ele funciona como uma imagem. Você pode baixar essa imagem diretamente do board, se necessário. Para colaborar com outros, você pode compartilhar o board da Miro contendo o diagrama.