Editor Mermaid
Crie fluxogramas, diagramas de sequência, Gantt e mais a partir de texto com o editor Mermaid. Renderize, dê zoom e exporte SVG ou PNG no seu navegador.
O que é Mermaid?
Mermaid é uma linguagem de diagramação de código aberto que permite criar diagramas a partir de texto puro, semelhante ao Markdown. Você descreve nós e conexões numa sintaxe simples e o renderizador desenha o diagrama automaticamente.
Quais tipos de diagrama são suportados?
O editor traz exemplos de fluxogramas, diagramas de sequência, classes, estados, ER, Gantt, gráficos de pizza, mapas mentais e linhas do tempo. O Mermaid 11 suporta muitos outros tipos que você pode digitar manualmente.
Como crio um diagrama?
Escolha um exemplo no menu ou digite seu código no editor à esquerda. A prévia é renderizada novamente cerca de 350 ms após parar de digitar; se a sintaxe for inválida, um painel vermelho mostra o erro exato.
Meu código é enviado para algum lugar?
Não. Tudo é renderizado localmente no seu navegador com JavaScript. Seu código nunca sai do seu dispositivo.
Como exporto o diagrama?
Use Baixar SVG para um vetor escalável ou Baixar PNG para uma imagem com o dobro da resolução, com fundo transparente opcional. Copiar código envia o fonte Mermaid para a área de transferência.
Por que a exportação PNG às vezes falha?
Alguns recursos do Mermaid são renderizados via foreignObject, que o navegador pode se recusar a rasterizar. Nesse caso o PNG mostra um erro, mas o download SVG sempre funciona por não exigir rasterização.
Como funciona o zoom?
A prévia suporta escala de 0,5x a 2x. Os botões +/- avançam 10% por clique, Ajustar dimensiona o diagrama à área de visualização e 100% restaura o tamanho original.
Posso usar Mermaid na minha documentação?
Sim. GitHub, GitLab e muitas ferramentas de documentação renderizam blocos Mermaid nativamente: envolva o código num bloco cercado mermaid e ele é desenhado automaticamente.
O editor suporta modo escuro?
Sim. O diagrama segue o tema da plataforma: ao mudar para o modo escuro ele é renderizado novamente com o tema dark do Mermaid automaticamente.
Dicas para diagramas legíveis?
Use rótulos curtos, escolha a direção adequada (TD vertical ou LR horizontal), divida grafos muito grandes em subgrafos e use os exemplos integrados como modelo para cada tipo.
Como usar Editor Mermaid
O Mermaid transforma texto simples em fluxogramas, diagramas de sequência, gráficos de Gantt e muito mais. Este editor ao vivo renderiza seu código enquanto você digita, inteiramente no navegador — nada sai do seu dispositivo.
- Escolha um ponto de partida no menu suspenso «Exemplo» — nove diagramas prontos cobrem fluxograma, sequência, classes, estados, ER, Gantt, pizza, mapa mental e linha do tempo, e selecionar um carrega o código no editor.
- Edite o código Mermaid no painel esquerdo; a pré-visualização à direita é renderizada de novo cerca de um terço de segundo depois que você para de digitar. Quando um erro de sintaxe aparece no painel vermelho, o último diagrama válido continua visível enquanto você corrige.
- Aproxime ou afaste entre 50% e 200% com os botões de mais e menos, clique em «Ajustar» para escalar o diagrama na caixa de pré-visualização ou em «100%» para voltar ao tamanho real.
- Marque «Fundo transparente» se quiser o PNG sem fundo branco e clique em «Baixar SVG» ou «Baixar PNG» — o PNG é exportado em resolução dobrada para continuar nítido quando incorporado.
- Clique em «Copiar código» para levar o código-fonte Mermaid à área de transferência e colá-lo em documentação, wikis ou repositórios.
Quando um diagrama não renderiza, comente as linhas alteradas recentemente para isolar o erro — a mensagem indica a linha problemática, e a pré-visualização mantém sua última versão válida até a sintaxe voltar a estar correta.
Ferramentas relacionadas
- Código para Imagem Converta trechos de código em imagens compartilháveis com destaque de sintaxe, temas personalizados e decorações de janela. 100% privacidade, tudo no seu navegador.
- Visualizador Markdown Editor Markdown online gratuito com pré-visualização ao vivo. Escreva, renderize e exporte Markdown com suporte GFM completo.
- Visualizador e Editor SVG Visualize, edite e otimize arquivos SVG online. Visualização em tempo real, edição de código e ferramentas de otimização.
- Visualizador de árvore JSON Visualize dados JSON como uma árvore recolhível interativa. Pesquise chaves e valores, rastreie JSONPath ao passar o cursor e manipule arquivos grandes com carregamento preguiçoso. Suporta arrastar e soltar arquivos .json.
- Verificador de Hash Calcule e verifique hashes MD5, SHA-1, SHA-256, SHA-512 localmente
- Calculadora Chmod Calculadora chmod online gratuita para visualizar e calcular permissões de arquivo Linux com caixas de seleção. Converta instantaneamente entre notação numérica (755, 644) e simbólica (rwxr-xr-x). Suporta permissões especiais como setuid, setgid, sticky bit.
- Tabela ASCII Referência completa de codificação de caracteres ASCII com códigos decimais, hexadecimais, octais, binários, entidades HTML e descrições. Pesquisa e filtro instantâneos.
- Visualizador Hexadecimal Visualize o conteúdo de arquivos em formato hexadecimal com busca, navegação por deslocamento e rolagem virtual