Diagramas Mermaid

O Craft suporta diagramas Mermaid — uma forma de criar diagramas visuais escrevendo uma sintaxe de texto simples. Digite algumas linhas de código e o Craft renderiza um diagrama nítido e preciso diretamente no seu documento. Os diagramas são atualizados em tempo real enquanto você digita, funcionam em todas as plataformas e são exibidos em páginas compartilhadas e publicadas.

Um fluxograma Mermaid renderizado em um documento do Craft

Inserindo um Diagrama Mermaid

Adicione um diagrama Mermaid usando um destes métodos:

Digite /mermaid e 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.

Visualização dividida com a prévia do diagrama acima e o editor de código abaixo

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.

Você não precisa decorar a sintaxe do Mermaid — o Assistente de IA do Craft pode gerar diagramas para você. Basta descrever o que você quer e ele escreve o código.

Tipos de Diagramas Suportados

Fluxogramas

Mapeie processos, decisões e fluxos de trabalho. Use graph TD para layouts de cima para baixo ou graph LR para layouts da esquerda para a direita.

graph TD
    A[Start] --> B{Decision}
    B -->|Yes| C[Do This]
    B -->|No| D[Do That]
    C --> E[Done]
    D --> E

Diagramas de Sequência

Mostre interações entre pessoas ou sistemas ao longo do tempo.

Um diagrama de sequência mostrando um fluxo de entrega de comida

sequenceDiagram
    User->>App: Place order
    App->>Payment: Charge card
    Payment-->>App: Confirmed
    App-->>User: Order placed

Diagramas de Estado

Visualize como algo transita entre estados — perfeito para rastreamento de pedidos, fluxos de trabalho ou processos.

Um diagrama de estado mostrando o ciclo de vida de um pedido

stateDiagram-v2
    [*] --> Draft
    Draft --> Review
    Review --> Published
    Review --> Draft : Needs changes
    Published --> [*]

Diagramas de Classes

Mostre a estrutura de um sistema — o que existe, suas propriedades e como se relacionam.

classDiagram
    class Document {
        +String title
        +Date created
        +publish()
    }
    class Folder {
        +String name
        +getDocuments()
    }
    Folder "1" --> "*" Document : contains

Diagramas ER

Modele relacionamentos entre dados — ótimo para design de banco de dados e planejamento.

erDiagram
    AUTHOR ||--o{ POST : writes
    POST ||--o{ COMMENT : has

Gráficos

Crie gráficos de barras, gráficos de linhas ou uma combinação dos dois.

xychart-beta
    title "Monthly Revenue ($K)"
    x-axis [Jan, Feb, Mar, Apr, May, Jun]
    y-axis "Revenue" 0 --> 120
    bar [45, 62, 78, 55, 89, 105]

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 ```mermaid e o Craft cria blocos Mermaid automaticamente.
Exportação de markdown: Os blocos Mermaid são exportados como blocos de código ```mermaid padrão, compatíveis com outras ferramentas.

Dicas

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?

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?

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.

Write & Edit

Organize & Find

Plan & Do

Share & Publish

AI Assistant

Inserindo um Diagrama Mermaid

Edição

Tipos de Diagramas Suportados

Fluxogramas

Diagramas de Sequência

Diagramas de Estado

Diagramas de Classes

Diagramas ER

Gráficos

Alterando o Tema

Compartilhamento e Publicação

Importação e Exportação

Dicas

​Inserindo um Diagrama Mermaid

​Edição

​Tipos de Diagramas Suportados

​Fluxogramas

​Diagramas de Sequência

​Diagramas de Estado

​Diagramas de Classes

​Diagramas ER

​Gráficos

​Alterando o Tema

​Compartilhamento e Publicação

​Importação e Exportação

​Dicas

Inserindo um Diagrama Mermaid

Edição

Tipos de Diagramas Suportados

Fluxogramas

Diagramas de Sequência

Diagramas de Estado

Diagramas de Classes

Diagramas ER

Gráficos

Alterando o Tema

Compartilhamento e Publicação

Importação e Exportação

Dicas