Exemplos Avançados de Mermaid

← Voltar aos exemplos de Markdown

Use estes modelos como ponto de partida para seus próprios diagramas.

Fluxograma de decisão

flowchart TD
    Start([Início]) --> Input[/Entrada de dados/]
    Input --> Process{Processar?}
    Process -->|Sim| Execute[Executar tarefa]
    Process -->|Não| Skip[Pular]
    Execute --> Check{Sucesso?}
    Check -->|Sim| Success[✅ Sucesso]
    Check -->|Não| Retry{Tentar novamente?}
    Retry -->|Sim| Execute
    Retry -->|Não| Fail[❌ Falha]
    Skip --> End([Fim])
    Success --> End
    Fail --> End

Diagrama de estados

stateDiagram-v2
    [*] --> Ocioso
    Ocioso --> Carregando: Upload
    Carregando --> Processando: Arquivos carregados
    Processando --> Salvando: Validados
    Salvando --> Sucesso: Salvos
    Salvando --> Erro: Falha
    Sucesso --> Ocioso: Concluir
    Erro --> Ocioso: Tentar novamente
    Erro --> [*]: Cancelar

Linha do tempo

timeline
    title Desenvolvimento do projeto
    section Fase 1
        Preparação : Configuração do projeto
                   : Instalação de dependências
    section Fase 2
        IndexedDB : Implementação do banco
                  : Testes de persistência
    section Fase 3
        Componentes : Criação dos componentes
                    : Integração da interface
    section Fase 4
        Testes : Testes funcionais
               : Testes offline
    section Fase 5
        Publicação : Build de produção
                   : Distribuição

Diagrama entidade-relacionamento

erDiagram
    FILE ||--o{ FOLDER : pertence_a
    FILE {
        int id PK
        string path
        string name
        text content
        datetime createdAt
        datetime updatedAt
    }
    FOLDER {
        int id PK
        string path
        string name
    }
    USER ||--o{ FILE : cria
    USER {
        int id PK
        string name
    }

Diagrama de Gantt

gantt
    title Cronograma do projeto
    dateFormat YYYY-MM-DD
    section Planejamento
    Definir requisitos       :a1, 2025-10-01, 3d
    Criar protótipo          :a2, after a1, 2d
    section Desenvolvimento
    Preparar projeto         :b1, 2025-10-06, 1d
    Implementar IndexedDB    :b2, after b1, 2d
    Criar componentes        :b3, after b2, 3d
    Fazer integração         :b4, after b3, 2d
    section Testes
    Testes unitários         :c1, after b4, 2d
    Testes de integração     :c2, after c1, 2d
    section Publicação
    Build de produção        :d1, after c2, 1d
    Distribuição             :d2, after d1, 1d

Mapa mental

mindmap
  root((Raziel.MD))
    Recursos
      Upload
        Arrastar e soltar
        Selecionar arquivo
        Selecionar pasta
      Leitura
        Markdown
        Diagramas Mermaid
        Destaque de sintaxe
      Armazenamento
        IndexedDB
        Uso offline
        PWA
    Tecnologia
      Interface
        Vue 3
        TypeScript
        TailwindCSS
      Bibliotecas
        Marked.js
        Mermaid.js
        Dexie.js
    Experiência
      Modo escuro
      Busca
      Navegação
      Layout responsivo

Tipos de diagramas

Mermaid oferece vários tipos:

• ✅ Fluxograma
• ✅ Diagrama de sequência
• ✅ Diagrama de classes
• ✅ Diagrama de estados
• ✅ Diagrama entidade-relacionamento
• ✅ Gráfico de Gantt
• ✅ Gráfico de pizza
• ✅ Gráfico Git
• ✅ Linha do tempo
• ✅ Mapa mental

Experimente criar seus próprios diagramas.

Continue explorando

• Exemplo completo de Markdown
• Voltar aos exemplos de Markdown