Diagramas Mermaid

Transforme ideias complexas em diagramas visuais claros — diretamente dentro do seu Markdown. O Moraya suporta 9 tipos de diagramas Mermaid com visualização em tempo real, renderização com carregamento preguiçoso para desempenho otimizado e adaptação automática ao tema claro/escuro.

Tipos de diagramas suportados

1. Fluxograma

Modele processos, árvores de decisão e fluxos de trabalho com grafos direcionados.

graph TD
    Start([Iniciar preparo]) --> CheckCup{Xícara detectada?}
    CheckCup -- Não --> Alert[Insira uma xícara]
    Alert --> CheckCup
    CheckCup -- Sim --> Choose[Selecionar bebida]

    Choose --> Type{Tipo de bebida}
    Type -- Espresso --> Brew[Extração em alta pressão]
    Type -- Latte/Cappuccino --> Milk[Aquecer e espumar leite]

    Milk --> Brew
    Brew --> Quality{Pressão normal?}
    Quality -- Anormal --> Error[Parar e alertar]
    Quality -- Normal --> Pour[Servir na xícara]

    Pour --> Finish([Preparo concluído])

2. Diagrama de sequência

Visualize interações entre sistemas, serviços e atores ao longo do tempo.

sequenceDiagram
    autonumber
    participant App as Aplicativo móvel
    participant Cloud as Servidor na nuvem
    participant Lock as Fechadura inteligente

    App->>Cloud: Enviar solicitação de desbloqueio (Token criptografado)
    Note over Cloud: Verificar validade do Token

    alt Verificação aprovada
        Cloud->>Lock: Enviar comando de desbloqueio (MQTT)
        Lock->>Lock: Motor gira
        Lock-->>Cloud: Status: Desbloqueado
        Cloud-->>App: Notificação: Porta desbloqueada
    else Token expirado
        Cloud-->>App: Erro: Sessão expirada
    end

3. Diagrama de Gantt

Planeje cronogramas, marcos e calendários de projetos.

gantt
    title Viagem de carro feriado de maio 2026
    dateFormat  YYYY-MM-DD
    axisFormat  %m-%d

    section Preparação
    Planejamento da rota             :done,    p1, 2026-04-20, 3d
    Manutenção do veículo            :active,  p2, 2026-04-23, 2d
    Compra de equipamento outdoor    :         p3, after p2, 3d

    section Viagem
    Chengdu→Kangding                 :milestone, m1, 2026-05-01, 0d
    Fotografia monte Zheduo          :         t1, 2026-05-01, 1d
    Tour por Xinduqiao               :         t2, after t1, 2d
    Trilha Daocheng Yading           :crit,    t3, 2026-05-04, 3d

4. Diagrama de estados

Mapeie máquinas de estado e transições do ciclo de vida.

stateDiagram-v2
    [*] --> Rascunho: Criar rascunho
    Rascunho --> Pendente: Enviar para revisão
    Pendente --> Rascunho: Rejeitado
    Pendente --> Publicado: Aprovado
    Publicado --> Oculto: Tirar do ar
    Oculto --> Publicado: Republicar
    Publicado --> Excluído: Excluir
    Oculto --> Excluído: Excluir
    Excluído --> [*]

5. Diagrama de classes

Projete estruturas orientadas a objetos e seus relacionamentos.

classDiagram
    class Character {
        +String name
        +int level
        +move()
        +attack()
    }
    class Warrior {
        +int stamina
        +shieldBash()
    }
    class Mage {
        +int mana
        +fireBall()
    }
    class Weapon {
        +int damage
        +upgrade()
    }

    Character <|-- Warrior : Herança
    Character <|-- Mage : Herança
    Character "1" *-- "1" Weapon : Composição de equipamento

6. Diagrama ER

Modele entidades de banco de dados e seus relacionamentos.

erDiagram
    MEMBER ||--o{ ORDER : "paga"
    COACH ||--o{ COURSE : "ensina"
    MEMBER }|--|{ COURSE : "reserva"

    MEMBER {
        int member_id PK
        string name
        string phone
    }
    COURSE {
        int course_id PK
        string title
        datetime start_time
    }
    ORDER {
        int order_id PK
        float amount
    }

7. Gráfico de pizza

Exiba dados proporcionais de forma visual.

pie title Linguagens empresariais mais usadas 2026
    "Java" : 30
    "Go" : 25
    "Python" : 20
    "Rust" : 15
    "TypeScript" : 10

8. Mapa mental

Organize ideias e conhecimento de forma hierárquica.

mindmap
  root((Base de conhecimento pessoal))
    Entrada
      Notas de leitura
      Trechos de podcasts
      Recortes da web
    Internalizar
      Método Zettelkasten
      Links bidirecionais
      Revisão diária
    Saída
      Blog técnico
      Projetos de código aberto
      Cursos de conhecimento

9. Jornada do usuário

Mapeie experiências do usuário e estados emocionais através das etapas.

journey
    title Aprender Python do zero
    section Exploração
      Assistir vídeos introdutórios: 5: Empolgado
      Configurar ambiente de desenvolvimento: 2: Frustrado
    section Aprendizagem
      Escrever o primeiro Hello World: 5: Realizado
      Entender loops e funções: 4: Satisfeito
      Encontrar erros de depuração: 1: Desesperado
    section Aplicação
      Construir o primeiro web scraper: 5: Eufórico
      Conquistar certificado: 5: Satisfeito

Modo duplo edição/visualização

Cada bloco Mermaid no Moraya oferece dois modos de interação:

• Modo visualização — Clique no diagrama para ver o resultado renderizado com panorâmica e zoom
• Modo edição — Clique no ícone de lápis para modificar o código-fonte Mermaid diretamente

Alterne entre modos instantaneamente sem sair do seu documento.

Adaptação de tema

Os diagramas Mermaid se adaptam automaticamente ao seu tema atual — fundos claros para o modo claro, fundos escuros para o modo escuro. Nenhuma configuração manual necessária.

Renderização com carregamento preguiçoso

O Mermaid é carregado sob demanda — apenas quando seu documento contém um bloco de código Mermaid. Isso mantém o tempo de inicialização do Moraya instantâneo e o consumo de memória mínimo.