Diagramas como código com Mermaid no Lucidchart

Acesse o menu de diagramas como código

Para acessar o menu de diagrama como código no Lucidchart, siga estas etapas:

1. Selecione o ícone "Diagrama como código" na barra de ferramentas principal no lado esquerdo do espaço de trabalho.

Gerar diagrama

Conheça o processo de diagrama como código utilizando um de nossos exemplos para cada tipo suportado de diagrama. Quando estiver pronto, gere um diagrama escrevendo seu próprio código Mermaid.

Use um exemplo fornecido

Para criar um diagrama utilizando os exemplos fornecidos, siga estas etapas a partir do menu de diagrama como código:

1. Selecione +Novo diagrama do Mermaid.
2. Na parte inferior do editor fornecido, clique em uma das opções de exemplo.
3. O código será automaticamente adicionado ao editor para o tipo de exemplo selecionado.
4. Edite o código de exemplo conforme necessário.
5. Clique em Gerar.

O diagrama será gerado na tela.

Criar do zero usando o Mermaid

Para criar um novo diagrama do zero utilizando código Mermaid, siga estas etapas a partir do menu de diagrama como código:

1. Selecione +Novo diagrama do Mermaid.
2. Digite seu código no editor fornecido.
3. Clique em Gerar.

O diagrama será gerado na tela.

Editar um diagrama

Um diagrama gerado a partir do código é exibido como uma imagem na tela e deve ser atualizado abrindo e editando o código. Para fazer isso:

1. Abra o editor de código associado usando um dos seguintes métodos:
   • Clique no diagrama na tela.
   • Navegue até o menu de diagrama como código, role a tela e selecione o diagrama que deseja editar.
2. Clique no editor e faça suas alterações.
   • À medida que você edita, o diagrama na tela será atualizado em tempo real.

O diagrama será atualizado na tela.

Tipos de diagrama suportados

Os seguintes tipos de diagramas são suportados usando o código Mermaid:

• Classe: Mapeia a estrutura de um sistema específico, modelando suas classes, atributos, operações e os relacionamentos entre os objetos.
• C4: aproveita os quatro níveis de modelos (contexto, caixas, componentes e código) conforme o público.
• Entidades e Relacionamentos: representa visualmente um banco de dados para mostrar os relacionamentos entre campos.
• Fluxograma: cria fluxogramas fáceis de seguir que abrangem sistemas e processos complexos.
• Gantt: Represente visualmente o cronograma e o progresso ao gerenciar um projeto.
• Ishikawa: Construa um diagrama de Ishikawa (ou diagrama de espinha de peixe) para mapear visualmente a relação de causa e efeito durante a análise da causa raiz.
• Treemap aninhado: Visualize a estrutura hierárquica de dados usando retângulos aninhados.
• Gráfico de radar: Crie um gráfico para comparar múltiplas variáveis quantitativas em uma grade radial.
• Sequência: representa os processos e objetos que coexistem e as mensagens trocadas entre eles para executar uma função, antes do término da linha de vida.
• Estado: cria um diagrama comportamental para mostrar transições entre vários objetos.
• Gráfico XY: Crie linhas abrangentes, barras ou gráficos de dispersão para visualizar a relação entre os pontos de dados.

Perguntas frequentes

Qual versão do Mermaid é compatível com o Lucidchart? 
O Lucidchart foi otimizado para suportar a versão 11.14 do Mermaid. 

Como estilizar e formatar um diagrama que você gerou usando o código Mermaid?
Quando você gera um diagrama na Lucid usando o código Mermaid, ele é exibido como uma imagem na tela. Para editar o estilo e o formato do seu diagrama, inclua a sintaxe de estilo do Mermaid diretamente no código.

Envie seu feedback sobre este artigo