Softonic

Visualizador de Diagrama Mermaid

Mermaid é uma linguagem de diagramas baseada em texto: você descreve em texto simples como o diagrama deve ficar, e ele é renderizado como SVG. Fluxogramas, diagramas de sequência, diagramas de classe, máquinas de estado, diagramas ER, gráficos de Gantt, gráficos de pizza, mapas mentais e grafos de ramificações do Git são todos suportados. Este visualizador executa o parser oficial do Mermaid direto no navegador e atualiza o SVG conforme você digita, para você refinar o diagrama sem precisar dar commit de uma versão meio quebrada no seu README.

Como visualizar um diagrama Mermaid

  1. 1

    Escolha um tipo de diagrama

    Fluxograma, sequência, classe, estado, ER, Gantt, pizza, grafo Git ou mapa mental.

  2. 2

    Escreva a sintaxe Mermaid

    Painel esquerdo. O parser atualiza a visualização a cada tecla pressionada.

  3. 3

    Veja o SVG renderizado

    Painel direito. Erros são mostrados inline com a linha problemática.

  4. 4

    Exportar

    Copie SVG, baixe PNG ou copie a fonte Mermaid para colar no GitHub ou MkDocs.

Os nove tipos de diagrama em um relance

Tipo Abertura de sintaxe Usar para
Fluxograma flowchart TD Árvores de decisão, fluxos de processo
Sequência sequenceDiagram Chamadas de API, interações de sistema ao longo do tempo
Classe classDiagram Arquitetura OOP, modelos de domínio
Estado stateDiagram-v2 Máquinas de estado finitas
ER erDiagram Esquemas de banco de dados
Gantt gantt Cronogramas de projetos
Pizza pie Porcentagens de um todo
Grafo Git gitGraph Visualização da topologia de ramificações
Mapa mental mindmap Brainstorming hierárquico

Início rápido do fluxograma

flowchart LR
    A[Início] --> B{Está funcionando?}
    B -- Sim --> C[Ótimo]
    B -- Não --> D[Depurar]
    D --> B

Palavras-chave de direção: TD de cima para baixo, LR da esquerda para a direita, RL da direita para a esquerda, BT de baixo para cima.

Formas de nó: [rect] retângulo, (rounded) cantos arredondados, {diamond} losango, ((circle)) círculo, >flag] bandeira, [[subroutine]] sub-rotina.

Início rápido do diagrama de sequência

sequenceDiagram
    participant U as Usuário
    participant API
    participant DB
    U->>API: POST /login
    API->>DB: SELECT usuário
    DB-->>API: registro
    API-->>U: 200 + token

->> é uma seta contínua (requisição) e -->> é tracejada (resposta). participant X as Label associa um nome curto ao rótulo exibido no diagrama.

Erros comuns

  • Falta de quebra de linha após a palavra-chave inicial. A primeira linha deve conter apenas flowchart TD ou palavra-chave equivalente.
  • Caracteres reservados em rótulos de nó. Parênteses, colchetes e aspas dentro de um rótulo precisam de escape ou devem ser envolvidos em aspas duplas: A["Nó (v2)"].
  • Notação do diagrama de classe. Os prefixos +public, -private, #protected, ~package; o estereótipo <<interface>>; herança <|--, composição *--, agregação o--.
  • Formato de data do Gantt. O padrão é YYYY-MM-DD (ou seja, ano-mês-dia); se você usa outro formato, acrescente a linha dateFormat YYYY-MM-DD no topo.

Onde o Mermaid é realmente renderizado

  • GitHub renderiza blocos de código marcados com mermaid em issues, pull requests e no README.md.
  • GitLab faz o mesmo: suporte nativo desde 2022.
  • MkDocs com o plugin pymdown-extensions.
  • Docusaurus e Hugo via plugins.
  • Obsidian com renderizador embutido.
  • VS Code com a extensão de visualização do Mermaid.

Perguntas frequentes

O GitHub suporta a maioria dos tipos: fluxograma, sequência, classe, estado, ER, Gantt e pizza. Alguns tipos mais recentes (journey, mindmap) podem demorar a ser suportados. Teste em uma issue de rascunho antes de dar commit no README.

Use as instruções classDef e class para atribuir classes CSS aos nós. O Mermaid também permite personalizar o tema com um bloco de diretiva no topo do código: %%{init: {"theme": "dark"}}%%.

Sim. A prévia é renderizada como SVG, então você pode baixar o SVG direto (ele amplia sem perder qualidade) ou exportar um PNG em resolução 1x, 2x ou 3x.

Na maioria das vezes é um caractere reservado em um rótulo de nó. Envolva em aspas duplas os rótulos que contenham parênteses, colchetes ou aspas: A["Nome do nó (v2)"]. A mensagem de erro aponta a linha que está causando o problema.

Não. A biblioteca Mermaid roda inteiramente no seu navegador e renderiza o diagrama localmente. Nenhum dado é enviado para servidor algum.

Ferramentas relacionadas

Gerador de cards CSS

Crie um card com seu título, texto e link opcional. Ajuste cores, borda, espaçamento, sombra e efeito ao passar o mouse. Depois copie ou baixe o HTML e o CSS.

Gerador de Docker Compose

Gere um docker-compose.yml a partir de definições de serviços com imagem, portas e volumes, com padrões de boas práticas.

Conversor de base numérica

Converta números entre binário, octal, decimal, hexadecimal e qualquer base personalizada de 2 a 36, com o detalhamento posicional.

Conversor de Tamanho de Arquivo

Converta entre bytes, KB, MB, GB, TB e as unidades binárias IEC (KiB, MiB, GiB, TiB), combinando decimal e binário como preferir.

Gerador de README

Gere um README.md estruturado a partir de alguns campos: nome do projeto, tagline, recursos, comando de instalação, trecho de início rápido, autor e licença. Cole direto no seu repositório.

Ofuscador de JavaScript

Ofusque JavaScript com codificação de array de strings, renomeação de variáveis, achatamento de fluxo de controle e injeção de código morto para proteção do front-end.

Ferramenta disponível em outros idiomas