Diagramas Mermaid para Miro (legado)

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

NOTA: Os diagramas Mermaid agora são nativos na Miro. Consulte Criar diagramas Mermaid

Com o aplicativo Mermaid, você pode criar e inserir facilmente diagramas ricos, baseados 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, facilitando a colaboração e a compreensão.

Alterar o código do diagrama e ver a pré-visualização atualizar em tempo real

Instalar o app Mermaid

Você pode instalar o app Mermaid no Marketplace da Miro ou diretamente na barra de ferramentas de criação em um board da Miro.

Para instalar pelo Marketplace da Miro:

1. Acesse o Marketplace da Miro ou siga este link direto para o aplicativo Mermaid.
2. Selecione um time da Miro para concluir a instalação.

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

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

✏️ Observação: Usuários não admin não podem instalar apps se a instalação de apps estiver restrita nas configurações do time.

Crie e adicione diagramas aos boards da Miro

Uma vez 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 barra de criação. O aplicativo abre com um código de exemplo padrão. Conforme você modifica o código para construir seu diagrama, ele é atualizado na área de visualização à direita, permitindo ver as 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 personalizá-lo conforme necessário.

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

Como alterar o tamanho 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.

Como adicionar um diagrama ao board

Editar diagramas existentes

Você também pode editar 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 Mermaid no menu de contexto que aparece (ou encontre-o na barra de ferramentas 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 será atualizado com suas alterações.

Outras informações

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

Sintaxe e documentação do Mermaid

O app Mermaid usa uma sintaxe específica para gerar diagramas a partir de texto. Para obter informações detalhadas sobre a sintaxe, inclusive os tipos de diagrama e as opções suportadas, 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 app Mermaid na Miro.

Compartilhar e exportar diagramas

Depois que um diagrama Mermaid é adicionado ao seu board, ele funciona como uma imagem. Você pode baixar essa imagem diretamente do board, se necessário. Para colaborar com outras pessoas, você pode compartilhar o board da Miro que contém o diagrama.