Veja o resultado na hora
Mudou o código? O diagrama acompanha a alteração, para você conferir a sintaxe e ajustar o layout.
Crie diagramas online
Crie fluxogramas, diagramas de sequência e ER com o editor Mermaid online. Cole o código e veja o resultado na hora. Use modelos, baixe PNG, SVG ou PDF e compartilhe por link. Sem instalar nada.
Grátis e sem instalar nada
Crie fluxogramas e diagramas com Mermaid online
Cole seu código ou escolha um modelo e veja o diagrama enquanto edita. Monte fluxogramas, diagramas de sequência e modelos de banco de dados. Depois, baixe em PNG, SVG ou PDF ou compartilhe por link.
- 100% grátis
- 33 tipos de diagrama
- Processamento no navegador
- 4 formatos de exportação
Tudo o que você precisa para criar diagramas com Mermaid
Escreva o código, confira o resultado e use o diagrama na documentação ou na sua próxima apresentação.
Modelos e exemplos
Comece com um fluxograma, um diagrama de sequência, um modelo ER ou um gráfico de Gantt e adapte ao seu projeto.
33 tipos de diagramas
Além de fluxogramas e mapas mentais, você pode criar diagramas C4, Sankey e quadros Kanban.
Baixe imagens, PDF e código
Salve o diagrama em PNG, SVG ou PDF. Para editar de novo depois, baixe o código em MMD.
Compartilhe por link
Envie um link para outra pessoa abrir o mesmo diagrama no navegador.
Edite no navegador
Você não precisa enviar o código do diagrama ao servidor para editar ou exportar.
Interface em 11 idiomas
Use em português do Brasil ou escolha outro idioma disponível.
Versione os diagramas com Git
Como o diagrama é texto, fica fácil copiar, revisar alterações e manter o histórico junto ao código.
Seu diagrama em três passos
- 01
Cole o código ou escolha um modelo
Use seu código Mermaid ou abra um exemplo e troque o conteúdo.
- 02
Confira o resultado
Ajuste os textos e as conexões enquanto acompanha as mudanças no diagrama.
- 03
Salve ou compartilhe
Baixe uma imagem, um PDF ou o código em MMD, ou crie um link para compartilhar.
33 tipos de diagramas para escolher
Escolha o diagrama que melhor explica um processo, a comunicação entre serviços, um banco de dados ou o plano de um projeto.
- Fluxograma
- Diagrama de classes
- Diagrama de sequência
- Diagrama entidade-relacionamento
- Diagrama de estados
- Mapa mental
- Diagrama de arquitetura
- Diagrama de blocos
- Diagrama C4
- Framework Cynefin
- Modelagem de eventos
- Gráfico de Gantt
- Grafo Git
- Diagrama de Ishikawa (espinha de peixe)
- Quadro Kanban
- Diagrama de pacote de rede
- Gráfico de pizza
- Gráfico de quadrantes
- Gráfico radar
- Diagrama de sintaxe (ABNF)
- Diagrama de sintaxe (EBNF)
- Diagrama de sintaxe (IR)
- Diagrama de sintaxe (PEG)
- Diagrama de requisitos
- Diagrama de Sankey
- Linha do tempo
- Visualização em árvore
- Mapa de árvore
- Jornada do usuário
- Diagrama de Venn
- Mapas de Wardley
- Gráfico XY
- ZenUML
Para seus projetos, documentos e aulas
Desenvolvedores
Documente APIs, serviços, modelos de dados, transições de estado, fluxos Git, pacotes de rede e arquitetura.
Equipes de produto e projeto
Mapeie jornadas, processos, roadmaps, Kanban, cronogramas, requisitos e planos de projeto.
Redatores técnicos
Crie visuais fáceis de manter para READMEs, bases de conhecimento, especificações, tutoriais e documentos internos.
Estudantes e educadores
Explique sistemas complexos, compare conceitos, monte mapas mentais e transforme anotações em diagramas claros.
Qual formato você quer baixar?
Use PNG em apresentações, SVG para ampliar sem perder qualidade e PDF para imprimir. Salve o código em MMD para continuar editando depois.
- PNG
- Imagem raster de alta qualidade para slides, documentos, chats e compartilhamento rápido.
- SVG
- Vetor escalável que permanece nítido na web, em ferramentas de design e em qualquer zoom.
- Formato portátil para impressão, relatórios, revisões e arquivamento.
- MMD
- Código-fonte Mermaid original para editar, reutilizar e versionar.
O código é processado no seu navegador
Durante a edição e a exportação, o código Mermaid é processado no navegador, sem envio ao servidor. O link de compartilhamento contém o diagrama: envie apenas para quem você quer que veja o conteúdo.
Perguntas frequentes
O editor Mermaid online é realmente grátis?
Sim. Editor, modelos, exemplos, pré-visualização, compartilhamento por link e exportações PNG, SVG, PDF e MMD são gratuitos.
O que é Mermaid?
Mermaid permite criar diagramas escrevendo texto. Você descreve os elementos e as conexões em código e vê o resultado como fluxograma, diagrama de sequência ou outro tipo de diagrama.
Quais tipos de diagrama são suportados?
São 33 categorias, incluindo fluxograma, classes, sequência, ER, estados, mapa mental, arquitetura, C4, Gantt, Git, Kanban, Sankey, linha do tempo, jornada do usuário, Venn, Wardley Maps, XY, ZenUML e outras.
Posso exportar para PNG, SVG, PDF e MMD?
Sim. PNG serve para imagens comuns, SVG para vetores escaláveis, PDF para impressão e documentos formais, e MMD para manter o código editável.
Meu código Mermaid é enviado para um servidor?
O site foi projetado para processar os dados no navegador; o conteúdo de trabalho permanece no cliente durante edição e exportação normais.
Como funciona o compartilhamento por link?
Gere um link no editor e envie para outra pessoa. Ela poderá abrir o diagrama diretamente no navegador.
Preciso instalar Mermaid ou outro programa?
Não. Basta abrir o site em um navegador moderno.
Posso começar com um modelo ou exemplo?
Sim. Os modelos ajudam a aprender a sintaxe e criar diagramas comuns sem começar do zero.
Posso colar código Mermaid gerado por ChatGPT ou Claude?
Sim. Cole o código, revise a pré-visualização, corrija eventuais erros e exporte ou compartilhe.
Por que usar Mermaid em vez de uma ferramenta de arrastar e soltar?
Diagramas em texto são rápidos de editar, fáceis de copiar, adequados ao Git e a code review e mais fáceis de manter alinhados à documentação.
Comece por um exemplo
Abra o editor, escolha um modelo ou cole seu código Mermaid.
Criar um diagrama