Inserindo um Diagrama Mermaid
Adicione um diagrama Mermaid usando um destes métodos:- Digite
/mermaide selecione Diagrama Mermaid - Escolha Diagrama Mermaid no painel Inserir na barra lateral (em Blocos Avançados)
- Cole um markdown contendo um bloco de código
```mermaid— o Craft converte automaticamente
Edição
Ao abrir um bloco Mermaid, ele exibe uma visualização dividida — o diagrama renderizado na parte superior e o código na parte inferior. A prévia é atualizada em tempo real enquanto você digita.- macOS
- iOS / iPad
- Web / Windows
Clique no bloco Mermaid para abri-lo na visualização dividida. A prévia do diagrama aparece na parte superior, com o editor de código abaixo. Dê um duplo clique na prévia para ampliar.
Tipos de Diagramas Suportados
Fluxogramas
Mapeie processos, decisões e fluxos de trabalho. Usegraph TD para layouts de cima para baixo ou graph LR para layouts da esquerda para a direita.
Diagramas de Sequência
Mostre interações entre pessoas ou sistemas ao longo do tempo.Diagramas de Estado
Visualize como algo transita entre estados — perfeito para rastreamento de pedidos, fluxos de trabalho ou processos.Diagramas de Classes
Mostre a estrutura de um sistema — o que existe, suas propriedades e como se relacionam.Diagramas ER
Modele relacionamentos entre dados — ótimo para design de banco de dados e planejamento.Gráficos
Crie gráficos de barras, gráficos de linhas ou uma combinação dos dois.Alterando o Tema
Os diagramas Mermaid se adaptam ao tema do seu editor de código. Para mudar a aparência, toque no ícone de pincel na barra de ferramentas e escolha um tema — as opções incluem Tokyo Night, Dracula, Nord, GitHub e mais. O diagrama é atualizado instantaneamente. Os diagramas também respeitam o modo claro ou escuro do seu documento.Compartilhamento e Publicação
Os diagramas Mermaid são renderizados em páginas compartilhadas e publicadas — qualquer pessoa que acessar o link verá o diagrama renderizado, não o código. Nenhuma configuração especial é necessária.Importação e Exportação
- Importação de markdown: Cole ou importe markdown com blocos de código
```mermaide o Craft cria blocos Mermaid automaticamente. - Exportação de markdown: Os blocos Mermaid são exportados como blocos de código
```mermaidpadrão, compatíveis com outras ferramentas.
Dicas
O que fazer se meu diagrama mostrar 'Invalid Mermaid diagram'?
O que fazer se meu diagrama mostrar 'Invalid Mermaid diagram'?
Isso geralmente indica um erro de sintaxe no seu código. Verifique se há erros de digitação ou setas ausentes. Se você estiver copiando a sintaxe de outra ferramenta, note que o Craft suporta fluxogramas, diagramas de sequência, diagramas de estado, diagramas de classes, diagramas ER e gráficos XY — outros tipos como gráficos de pizza, gráficos de Gantt ou mapas mentais não são suportados no momento.
O Assistente de IA pode ajudar a criar diagramas Mermaid?
O Assistente de IA pode ajudar a criar diagramas Mermaid?
Sim. Descreva o diagrama que você quer e o Assistente de IA do Craft vai gerar o código Mermaid para você. Você também pode pedir que ele modifique ou expanda um diagrama existente.
Posso ampliar um diagrama grande?
Posso ampliar um diagrama grande?
No Mac e no iPad, dê um duplo toque na prévia do diagrama para ampliar. Na web, use a visualização em tela cheia para diagramas maiores.
O Mermaid é um padrão aberto usado em diversas ferramentas. Acesse mermaid.js.org para aprender a sintaxe completa de cada tipo de diagrama.