Diagramas Mermaid

Escreva diagramas como texto em blocos de código cercados. O Jamdesk os renderiza como SVG durante o build.

Uso básico

Use um bloco de código cercado com o identificador de linguagem mermaid:

```mermaid
flowchart LR
    A[Start] --> B[Process] --> C[End]
```

Tipos de diagramas

Fluxogramas

A direção pode ser de cima para baixo (TD), da esquerda para a direita (LR), de baixo para cima (BT) ou da direita para a esquerda (RL).

```mermaid
flowchart TD
    A[User Request] --> B{Valid?}
    B -->|Yes| C[Process]
    B -->|No| D[Error]
    C --> E[Response]
    D --> E
```

Subgrafos

Agrupe nós relacionados usando subgrafos. Isso ajuda a organizar fluxogramas complexos em seções lógicas, como "Frontend" e "Backend", ou diferentes etapas de um pipeline.

```mermaid
flowchart TB
    subgraph Frontend
        A[React App] --> B[Components]
    end
    subgraph Backend
        C[API Server] --> D[(Database)]
    end
    B -->|HTTP| C
```

Diagramas de sequência

Os diagramas de sequência mostram como os componentes interagem ao longo do tempo. Use um diagrama de sequência para fluxos de chamadas de API e processos de autenticação. Os participantes aparecem como linhas de vida verticais, com mensagens fluindo entre eles.

```mermaid
sequenceDiagram
    participant Client
    participant Server
    participant Database

    Client->>Server: Request
    Server->>Database: Query
    Database-->>Server: Results
    Server-->>Client: Response
```

Diagramas de classes

Os diagramas de classes representam a estrutura de sistemas orientados a objetos, como um modelo de dados ou os tipos principais de um serviço. Eles exibem classes com seus atributos, métodos e relações entre si.

```mermaid
classDiagram
    class User {
        +String name
        +String email
        +login()
        +logout()
    }
    class Order {
        +int id
        +Date created
        +addItem()
        +checkout()
    }
    class Item {
        +String name
        +float price
    }
    User "1" --> "*" Order : places
    Order "1" --> "*" Item : contains
```

Diagramas de estado

Os diagramas de estado modelam o ciclo de vida de um objeto ou processo. Eles mostram todos os estados possíveis e as transições entre eles. Status de pedidos e fluxos de aprovação de documentos são exemplos comuns.

```mermaid
stateDiagram-v2
    [*] --> Draft
    Draft --> Review
    Review --> Published
    Review --> Draft
    Published --> [*]
```

Diagramas de entidade e relacionamento

Os diagramas ER documentam esquemas de banco de dados e modelos de dados, mostrando entidades (tabelas), seus atributos (colunas) e as relações entre elas. Os símbolos indicam cardinalidade: um para um, um para muitos ou muitos para muitos.

```mermaid
erDiagram
    USER ||--o{ ORDER : places
    ORDER ||--|{ ITEM : contains
    USER {
        string name
        string email
    }
    ORDER {
        int id
        date created
    }
```

Gráficos de Gantt

Os gráficos de Gantt visualizam cronogramas e linhas do tempo de projetos. As tarefas são exibidas como barras horizontais ao longo de uma linha do tempo, mostrando duração, dependências e trabalho paralelo. Um plano de projeto ou roadmap é um uso natural.

```mermaid
gantt
    title Project Timeline
    dateFormat YYYY-MM-DD
    section Planning
        Research       :a1, 2024-01-01, 7d
        Design         :a2, after a1, 5d
    section Development
        Backend        :b1, after a2, 14d
        Frontend       :b2, after a2, 14d
    section Launch
        Testing        :c1, after b1, 7d
        Deployment     :c2, after c1, 2d
```

Gráficos do Git

Os gráficos do Git visualizam estratégias de ramificação e fluxos de trabalho de controle de versão. Eles mostram commits, branches, merges e o histórico geral de um repositório. Cada branch é codificada por cores para facilitar a identificação.

```mermaid
gitGraph
    commit id: "Initial"
    branch feature
    checkout feature
    commit id: "Add login"
    commit id: "Add auth"
    checkout main
    merge feature id: "v1.0"
    branch release
    checkout release
    commit id: "Prep 1.1"
    checkout main
    branch hotfix
    checkout hotfix
    commit id: "Fix bug"
    checkout main
    merge hotfix id: "v1.0.1"
    checkout release
    commit id: "Final QA"
    checkout main
    merge release id: "v1.1"
```

Diagramas de linha do tempo

As linhas do tempo mostram eventos ao longo de períodos. Comece com a palavra-chave timeline, um title opcional e, em seguida, uma linha por período, com eventos separados por dois-pontos:

```mermaid
timeline
    title Product Launch Timeline
    2024 : Research
         : First prototype
    2025 : Private beta
         : Public beta
    2026 : GA launch
```

Gráficos de pizza

Os gráficos de pizza exibem dados proporcionais como fatias de um círculo. Use um quando as partes formarem um todo, como em participação de mercado ou resultados de pesquisas. Para facilitar a leitura, mantenha no máximo 6 fatias.

```mermaid
pie title Browser Market Share
    "Chrome" : 65
    "Safari" : 19
    "Firefox" : 10
    "Edge" : 4
    "Other" : 2
```

Formas de fluxograma

Diferentes formas transmitem diferentes significados nos fluxogramas:

Tipos de setas

As setas indicam a direção do fluxo e os tipos de relação:

Dimensionar diagramas largos

Para diagramas largos, como gráficos de Gantt ou gráficos complexos do Git, você pode usar o componente Mermaid diretamente com uma propriedade minWidth para garantir que o diagrama não seja comprimido:

<Mermaid minWidth="700px">
gantt
    title Wide Project Timeline
    ...
</Mermaid>

Dicas de estilo

Para criar diagramas eficazes:

• Mantenha a simplicidade: divida fluxos complexos em vários diagramas menores.
• Rotule suas setas para explicar as transições.
• Escolha uma direção: TD (de cima para baixo) para diagramas altos, LR (da esquerda para a direita) para diagramas largos.
• Limite cada diagrama a 10–15 nós para facilitar a compreensão.

Saiba mais

Para consultar a referência completa da sintaxe Mermaid, incluindo recursos avançados como estilização, temas e tipos adicionais de diagramas, consulte a documentação oficial do Mermaid.

O que vem a seguir?