English
EspañolEditor Mermaid online (diagramas por texto)
Cole ou escreva o código Mermaid. A prévia atualiza enquanto você digita e os exemplos mostram os tipos de diagrama.
Como usarEscreva o diagrama, veja o desenho
flowchart LR
A[Ideia] --> B{Vale a pena?}
B -- sim --> C[Planejar]
B -- não --> D[Arquivar]
C --> E[Executar] --> F((Pronto))sequenceDiagram
Cliente->>Loja: Faz o pedido
Loja-->>Cliente: Confirma por e-mailpie title Para onde vai o orçamento
"Aluguel" : 35
"Equipe" : 40
"Marketing" : 15
"Outros" : 10journey
title Compra no site
section Descoberta
Acha a loja no Google: 4: Cliente
Vê os produtos: 5: Cliente
section Compra
Preenche o endereço: 2: Cliente
Paga: 3: ClientequadrantChart
title Prioridade das tarefas
x-axis Pouco esforço --> Muito esforço
y-axis Pouco impacto --> Muito impacto
quadrant-1 Planejar
quadrant-2 Fazer já
quadrant-3 Deixar para depois
quadrant-4 Repensar
Novo site: [0.7, 0.85]
Post no Instagram: [0.2, 0.6]
Trocar o logo: [0.6, 0.3]gitGraph
commit
branch nova-tela
checkout nova-tela
commit
commit
checkout main
merge nova-tela
commit
Disponível em: 
Editor Mermaid online (diagramas por texto): para que serve
Escreva ou cole código Mermaid e veja o diagrama atualizar enquanto digita. Os botões de exemplo mostram fluxograma, sequência, gráfico de pizza, jornada do usuário, quadrante e gráfico de git, e o editor aceita os outros tipos do Mermaid, como classes, estados, ER, Gantt, mapa mental e linha do tempo.
O código fica salvo no seu navegador e o desenho sai em PNG ou SVG.
Como usar
- Escreva o código Mermaid ou escolha um exemplo.
- Ajuste o texto e veja a prévia.
- Baixe em PNG ou SVG ou copie o código.
Quando usar
- Testar um diagrama antes de pôr no GitHub.
- Documentação técnica.
- Fazer gráficos rápidos para apresentação.
Perguntas frequentes
O que é Mermaid?
É uma linguagem aberta para descrever diagramas em texto. O GitHub, o GitLab, o Notion e vários editores de documentação desenham blocos Mermaid automaticamente, por isso o mesmo código serve na documentação do projeto.
Que tipos de diagrama dá para fazer?
Fluxograma (flowchart), sequência, classes, estados, entidade-relacionamento, Gantt, pizza, jornada do usuário, quadrante, gráfico de git, mapa mental, linha do tempo e outros. Cada tipo começa com uma palavra na primeira linha, como flowchart, sequenceDiagram ou pie.
O código fica salvo?
Sim, no armazenamento do seu navegador, neste aparelho. Ao voltar, o último diagrama aparece de novo. Nada é enviado para servidores.
É grátis mesmo?
Sim, 100% grátis. Sem cadastro, sem assinatura e sem limite de uso. Todas as ferramentas do Ferramentas123 são gratuitas e rodam direto no seu navegador.