Testando Diagramas Mermaid

Este post demonstra como usar diagramas Mermaid diretamente em arquivos markdown. Agora você pode criar diagramas incríveis usando apenas texto!

Fluxograma Simples

flowchart TD
    A[Início] --> B{Decisão}
    B -->|Sim| C[Ação 1]
    B -->|Não| D[Ação 2]
    C --> E[Final]
    D --> E

Diagrama de Sequência

sequenceDiagram
    participant U as Usuário
    participant B as Browser
    participant S as Servidor
    participant D as Database
    
    U->>B: Acessa página
    B->>S: Requisita dados
    S->>D: Query no banco
    D-->>S: Retorna dados
    S-->>B: Envia resposta
    B-->>U: Renderiza página

Diagrama de Classes

classDiagram
    class Usuario {
        +id: number
        +nome: string
        +email: string
        +login()
        +logout()
        +atualizarPerfil()
    }
    
    class Post {
        +id: number
        +titulo: string
        +conteudo: string
        +data: Date
        +publicar()
        +editar()
        +excluir()
    }
    
    class Comentario {
        +id: number
        +conteudo: string
        +data: Date
        +criar()
        +editar()
        +excluir()
    }
    
    Usuario --> Post : cria
    Post --> Comentario : tem
    Usuario --> Comentario : faz

Diagrama de Estado

stateDiagram-v2
    [*] --> Idle
    Idle --> Loading : início
    Loading --> Success : dados carregados
    Loading --> Error : erro na requisição
    Success --> Idle : reset
    Error --> Idle : retry
    Error --> Loading : retry automático

Gráfico de Gantt

gantt
    title Cronograma do Projeto
    dateFormat  YYYY-MM-DD
    section Planejamento
    Definir requisitos       :done,    des1, 2025-02-01,2025-02-07
    Criar mockups           :done,    des2, 2025-02-05, 2025-02-12
    section Desenvolvimento
    Setup inicial           :done,    dev1, 2025-02-08, 2025-02-10
    Funcionalidades core    :active,  dev2, 2025-02-10, 2025-03-01
    Testes                  :         dev3, 2025-02-25, 2025-03-05
    section Deploy
    Preparar produção       :         deploy1, 2025-03-01, 2025-03-03
    Deploy final            :         deploy2, 2025-03-03, 2025-03-05

Diagrama de Jornada do Usuário

journey
    title Jornada do Usuário no Blog
    section Descoberta
      Encontrar blog via Google    : 5: Usuário
      Ler primeiro post           : 4: Usuário
      Navegar entre posts         : 4: Usuário
    section Engajamento
      Comentar em post            : 3: Usuário
      Compartilhar conteúdo       : 5: Usuário
      Inscrever-se newsletter     : 3: Usuário
    section Fidelização
      Retornar regularmente       : 5: Usuário
      Recomendar para amigos      : 5: Usuário
      Interagir nas redes sociais : 4: Usuário

Git Graph

gitGraph:
    commit id: "Initial commit"
    branch develop
    checkout develop
    commit id: "Add features"
    commit id: "Fix bugs"
    checkout main
    merge develop
    commit id: "Release v1.0"
    branch hotfix
    checkout hotfix
    commit id: "Critical fix"
    checkout main
    merge hotfix
    commit id: "v1.0.1"

Mindmap

mindmap
  root)Blog Development(
    Content
      Writing
      SEO
      Images
    Design
      Layout
      Colors
      Typography
    Development
      Frontend
        HTML
        CSS
        JavaScript
      Backend
        Server
        Database
        API
    Deployment
      Hosting
      CI/CD
      Monitoring

Conclusão

Como você pode ver, o suporte a Mermaid está funcionando perfeitamente! Agora você pode:

1. Criar diagramas de fluxo para explicar processos
2. Documentar APIs com diagramas de sequência
3. Modelar dados usando diagramas de classe
4. Planejar projetos com gráficos de Gantt
5. Mapear jornadas de usuário
6. Visualizar Git workflows com git graphs

Todos os diagramas são responsivos, suportam tema escuro e claro, e são renderizados dinamicamente no cliente!