Escreva sintaxe Mermaid e veja o diagrama renderizado ao vivo, com exemplos prontos e exportação em SVG ou PNG.
O Editor de Diagramas Mermaid transforma texto simples em diagramas visuais em tempo real, usando a biblioteca mermaid.js diretamente no navegador. Você escreve a sintaxe no editor à esquerda (por exemplo, flowchart TD para um fluxograma ou sequenceDiagram para um diagrama de sequência) e o preview à direita atualiza automaticamente, com um pequeno atraso para não travar a digitação. A ferramenta cobre fluxogramas, diagramas de sequência, gráficos de Gantt, gráficos de pizza, mapas mentais e diagramas de classe, com um exemplo pronto para cada tipo. Se houver um erro de sintaxe, a mensagem original do mermaid.js aparece abaixo do editor e o último diagrama válido continua visível, então um erro de digitação nunca apaga o que já estava funcionando. O resultado pode ser exportado como arquivo SVG (vetorial, ideal para documentação e impressão) ou PNG (imagem rasterizada em resolução dobrada, pronta para colar em apresentações). Todo o processamento acontece localmente: nenhum código ou diagrama é enviado a um servidor.
O mermaid.js interpreta a primeira palavra-chave do código para decidir o tipo de diagrama: flowchart inicia um fluxograma, sequenceDiagram um diagrama de sequência, gantt um cronograma, pie um gráfico de pizza, mindmap um mapa mental e classDiagram um diagrama de classes orientado a objetos. A partir daí, cada linha descreve nós, participantes, tarefas, fatias ou classes e como eles se conectam, usando uma sintaxe própria para cada tipo (setas como --> em fluxogramas, ->> e -->> em sequências, ou dois pontos e datas em Gantt).
O editor renderiza o diagrama a cada pausa curta na digitação, sem precisar clicar em nenhum botão de atualizar. Se a sintaxe tiver um erro, como uma seta mal formada ou uma palavra-chave errada, o mermaid.js recusa o parse e devolve uma mensagem apontando a linha do problema, exibida diretamente abaixo do editor.
No exemplo de fluxograma, a linha B -->|Sim| C cria uma seta rotulada 'Sim' saindo da decisão B até o passo C, e o mesmo nó B pode ter outra seta rotulada 'Não' apontando para um caminho diferente, formando ramificações condicionais sem nenhuma configuração extra. No exemplo de sequência, Cliente->>API: Solicita dados desenha uma seta sólida do participante Cliente até API com o texto da mensagem, enquanto API-->>Cliente: Responde JSON usa uma seta tracejada para representar a resposta.
No gráfico de Gantt, a linha Design :a2, after a1, 5d cria uma tarefa chamada 'Design' que começa automaticamente quando a tarefa de id a1 termina e dura 5 dias, o que evita ter que recalcular datas manualmente ao reordenar o cronograma. No gráfico de pizza, cada linha "Rótulo" : valor vira uma fatia proporcional ao valor informado, com o rótulo e o percentual calculado automaticamente.
Diagramas Mermaid são úteis em documentação técnica, descrições de arquitetura, fluxos de processo, cronogramas de projeto e apresentações, porque o diagrama vive junto com o texto (versionável em Git, revisável em um pull request) em vez de ser uma imagem solta. GitHub, GitLab e Notion, entre outras plataformas, já renderizam blocos de código Mermaid nativamente em Markdown, então a mesma sintaxe escrita aqui costuma funcionar direto nesses lugares, sem nenhuma adaptação.
Sobre os limites: diagramas muito grandes (dezenas de nós ou uma linha do tempo com muitas tarefas) ficam mais difíceis de ler e podem exigir rolagem lateral tanto aqui quanto em outros renderizadores; e como o mermaid.js segue sua própria implementação da linguagem, pequenas variações de comportamento entre versões da biblioteca são esperadas, então vale conferir o resultado na plataforma final antes de publicar algo crítico.
Cole o código no seu HTML e a ferramenta aparece na sua página, sem a navegação e sem os anúncios do J-Kit. Ela continua rodando no navegador de quem visita o seu site.
<iframe
src="https://jkit.tools/embed/pt-BR/editor-de-diagramas-mermaid"
width="100%"
height="600"
style="border:0"
loading="lazy"
title="Editor de Diagramas Mermaid"
></iframe>Estas referências ajudam a contextualizar fórmulas, padrões, APIs e limitações usadas nesta página. Elas não substituem validação profissional quando o resultado tiver impacto jurídico, financeiro, médico ou operacional.
Mermaid é uma biblioteca JavaScript de código aberto que transforma texto simples, escrito em uma sintaxe própria parecida com Markdown, em diagramas renderizados como SVG. Em vez de desenhar caixas e setas manualmente em uma ferramenta gráfica, você descreve a estrutura do diagrama em algumas linhas de texto e a biblioteca calcula o layout e desenha o resultado.
Carregando o motor de renderização...
O código Mermaid e o diagrama renderizado ficam só no seu navegador, processados pela biblioteca mermaid.js. Nada é enviado a servidores.