> ## Documentation Index
> Fetch the complete documentation index at: https://craft-support.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Diagramas Mermaid

> Use o Mermaid para criar fluxogramas, diagramas de sequência, diagramas ER e outros diagramas baseados em texto no Craft.

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.

<img src="https://mintcdn.com/craft-support/ivoQJBaJTefk9e0t/images/write-and-edit/mermaid-diagrams/en/content/flowchart-preview.png?fit=max&auto=format&n=ivoQJBaJTefk9e0t&q=85&s=db14d9fa849df0904c0cc4c051e19905" alt="Um fluxograma Mermaid renderizado em um documento do Craft" width="1498" height="991" data-path="images/write-and-edit/mermaid-diagrams/en/content/flowchart-preview.png" />

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

<img src="https://mintcdn.com/craft-support/ivoQJBaJTefk9e0t/images/write-and-edit/mermaid-diagrams/en/content/split-view-editing.png?fit=max&auto=format&n=ivoQJBaJTefk9e0t&q=85&s=894c6b5397d22b4673f1aecf7de6e11c" alt="Visualização dividida com a prévia do diagrama acima e o editor de código abaixo" width="1498" height="991" data-path="images/write-and-edit/mermaid-diagrams/en/content/split-view-editing.png" />

<Tabs>
  <Tab title="macOS">
    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.
  </Tab>

  <Tab title="iOS / iPad">
    Toque no bloco para abrir o editor de código com uma prévia ao vivo acima. No iPhone, dispense o teclado para ver o diagrama. Dê um duplo toque na prévia para ampliar.
  </Tab>

  <Tab title="Web / Windows">
    Clique no bloco para editar. Use o menu de modo de visualização no menu de contexto do bloco para alternar entre Editar, Prévia e Visualização Dividida.
  </Tab>
</Tabs>

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

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

<img src="https://mintcdn.com/craft-support/ivoQJBaJTefk9e0t/images/write-and-edit/mermaid-diagrams/en/content/sequence-diagram.png?fit=max&auto=format&n=ivoQJBaJTefk9e0t&q=85&s=f75ca4347237c5fe789fb65a48060ca2" alt="Um diagrama de sequência mostrando um fluxo de entrega de comida" width="1473" height="927" data-path="images/write-and-edit/mermaid-diagrams/en/content/sequence-diagram.png" />

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

<img src="https://mintcdn.com/craft-support/ivoQJBaJTefk9e0t/images/write-and-edit/mermaid-diagrams/en/content/state-diagram.png?fit=max&auto=format&n=ivoQJBaJTefk9e0t&q=85&s=6700ddefd98c2df1c74175826f6d65e4" alt="Um diagrama de estado mostrando o ciclo de vida de um pedido" width="1473" height="927" data-path="images/write-and-edit/mermaid-diagrams/en/content/state-diagram.png" />

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

<img src="https://mintcdn.com/craft-support/ivoQJBaJTefk9e0t/images/write-and-edit/mermaid-diagrams/en/content/theme-light.png?fit=max&auto=format&n=ivoQJBaJTefk9e0t&q=85&s=1d50b09075c75df863b7a97c39a86a9b" alt="Diagrama Mermaid no tema claro" width="1473" height="927" data-path="images/write-and-edit/mermaid-diagrams/en/content/theme-light.png" />

<img src="https://mintcdn.com/craft-support/ivoQJBaJTefk9e0t/images/write-and-edit/mermaid-diagrams/en/content/theme-dark.png?fit=max&auto=format&n=ivoQJBaJTefk9e0t&q=85&s=fb81678ca8d061283a3e7afc87e4a69b" alt="Diagrama Mermaid no tema escuro" width="1473" height="927" data-path="images/write-and-edit/mermaid-diagrams/en/content/theme-dark.png" />

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

<AccordionGroup>
  <Accordion title="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.
  </Accordion>

  <Accordion title="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.
  </Accordion>

  <Accordion title="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.
  </Accordion>
</AccordionGroup>

<Info title="Aprenda a sintaxe do Mermaid">
  O Mermaid é um padrão aberto usado em diversas ferramentas. Acesse [mermaid.js.org](https://mermaid.js.org/intro/) para aprender a sintaxe completa de cada tipo de diagrama.
</Info>