Pular para o conteúdo principal

Documentation Index

Fetch the complete documentation index at: https://craft-support.mintlify.app/llms.txt

Use this file to discover all available pages before exploring further.

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
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. Diagrama Mermaid no tema claro Diagrama Mermaid no tema escuro

​
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

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.
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.
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.