Fluxograma
Represente decisões e processos com nós, setas e formas Mermaid: caixas arredondadas, losangos…
Mermaid Viewer online
Cole seu código Mermaid à esquerda e veja o diagrama ser renderizado instantaneamente à direita. Analise e corrija a sintaxe Mermaid com um clique, otimize o código e exporte o resultado em PNG, SVG ou PDF — grátis, privado, sem cadastro.
- 100 % grátis
- Sem cadastro
- Tudo roda no seu navegador
- Mais de 12 tipos de diagramas
Editor Mermaid ao vivo & visualizador de gráficos
Este visualizador Mermaid atualiza a pré-visualização sempre que você para de digitar, então desenhar um diagrama Mermaid simples fica tão fácil quanto escrever um texto. Quando algo quebra, o corretor Mermaid integrado localiza o problema e repara os erros de sintaxe mais comuns — pontuação de largura total, caracteres invisíveis, aspas tipográficas — com uma explicação clara de cada mudança.
–
Diagnostics
Your diagram renders here as you type.
Could not render this diagram
100%
Everything runs locally in your browser — your diagram code never leaves this page.
Tipos de diagramas Mermaid que você pode renderizar
De fluxogramas a linhas do tempo, todo tipo de diagrama Mermaid funciona de imediato — a maneira mais fácil de desenhar diagramas Mermaid sem instalar nada. Cada pré-visualização abaixo é gerada ao vivo pelo mesmo motor do visualizador; carregue qualquer modelo para continuar editando.
Diagrama de sequência
Mostre como participantes trocam mensagens ao longo do tempo, com laços, alternativas e ativações.
Diagrama ER
Modele entidades, atributos e relacionamentos de banco de dados na notação pé-de-galinha.
Diagrama de classes
Descreva classes, interfaces, membros e herança para o design de software.
Diagrama de estados
Acompanhe os estados de um sistema e as transições entre eles.
Diagrama de Gantt
Planeje projetos com tarefas, marcos, dependências e datas.
Gráfico de pizza
Transforme alguns números em um gráfico de pizza de proporções.
Jornada do usuário
Mapeie a jornada de um usuário com tarefas e notas de satisfação.
Linha do tempo
Registre eventos em uma linha vertical — perfeita para histórias e roadmaps.
Mapa mental
Brainstorm em um mapa ramificado: texto simples na entrada, hierarquia na saída.
Grafo Git
Visualize branches, commits e merges de um repositório Git.
Matriz de quadrantes
Posicione itens em dois eixos e quatro quadrantes, ex. prioridade vs. esforço.
Essenciais da sintaxe Mermaid
A sintaxe Mermaid é texto puro: uma instrução por linha, nós unidos por setas. Estas formas Mermaid cobrem a maioria dos diagramas — clique em qualquer exemplo para abri-lo no visualizador e continuar editando.
| Sintaxe | Desenha |
|---|---|
A[Rótulo] | Retângulo (processo) |
A(Rótulo) | Caixa arredondada |
A{Rótulo} | Losango (decisão) |
A([Rótulo]) | Forma de estádio |
A[(Rótulo)] | Cilindro (banco de dados) |
A((Rótulo)) | Círculo |
A-->B | Seta (ligação) |
A-->|texto|B | Seta com rótulo |
A---B | Linha simples |
subgraph Título … end | Grupo de nós |
Minimodelos
Converter um diagrama Mermaid em imagem online
Quer saber como converter um diagrama Mermaid em imagem online? Três passos: cole o código, deixe a pré-visualização renderizar e clique em PNG, SVG ou PDF na barra de ferramentas. Tudo acontece no seu navegador — sem upload de arquivos.
De Mermaid para PNG
Exporte com até 4× de resolução — diagramas nítidos para slides, documentos e chats.
De Mermaid para SVG
Um arquivo vetorial de verdade: zoom infinito, editável no Figma ou Illustrator, perfeito para impressão e telas de alta densidade.
De Mermaid para PDF
Um clique gera uma página PDF do tamanho exato do diagrama — ideal para relatórios, tickets e arquivos.
Perguntas frequentes
O que é um visualizador Mermaid?
Um visualizador Mermaid pega código de diagrama escrito em sintaxe Mermaid e o renderiza como um diagrama de verdade. Este reúne visualizador, criador e corretor em uma única página: renderização ao vivo enquanto você digita, detecção de problemas de sintaxe, reparo automático e exportação em PNG, SVG ou PDF.
Como corrigir sintaxe Mermaid inválida?
Cole o código e clique em Corrigir. O corretor Mermaid repara aspas tipográficas e caracteres Unicode invisíveis, pontuação CJK de largura total, colchetes não pareados, palavras reservadas como «end», «end» ausentes em subgraphs e laços, cercas de Markdown coladas por engano e muito mais. Cada mudança é explicada na lista de diagnóstico.
Como converter Mermaid em PNG, SVG ou PDF?
Renderize o diagrama no visualizador acima e clique em PNG, SVG ou PDF na barra da pré-visualização. O PNG baixa um bitmap de alta resolução, o SVG um arquivo vetorial e o PDF um documento pronto para impressão. Grátis, ilimitado e tudo no navegador.
PlantUML ou Mermaid — qual usar?
O Mermaid é renderizado direto no navegador, por isso GitHub, GitLab e a maioria dos wikis Markdown oferecem suporte nativo; é a escolha leve para documentação. O PlantUML cobre mais da especificação UML 2, mas precisa de Java ou de um servidor para renderizar. Para diagramas «text-first» em documentos e páginas web, o Mermaid costuma ser o caminho mais fácil.
O que «Mermaid» representa — qual o significado do nome?
A ferramenta leva o nome da sereia mitológica: a ideia de que um texto simples pode, como o canto de uma sereia, fazer nascer um diagrama lindo. No mundo dos diagramas, Mermaid representa o «diagram-as-code»: você descreve nós e setas em texto, e a biblioteca desenha o gráfico por você.
Quais são os diferentes tipos de diagramas Mermaid?
Os mais usados: fluxogramas, diagramas de sequência, ER, de classes, de estados, de Gantt, de pizza, jornadas de usuário, linhas do tempo e mapas mentais — a galeria completa está logo acima. Cada tipo começa com uma linha-chave como «flowchart TD» ou «sequenceDiagram», seguida de uma instrução por linha.
Meu código de diagrama é enviado para algum lugar?
Não. Renderização, correção, otimização e exportação rodam localmente no seu navegador. Nada é enviado ou armazenado em servidor — você pode até usar o visualizador offline depois que a página carregar.