Pré-visualização em tempo real
Veja cada alteração no código renderizada imediatamente e identifique erros de sintaxe ou layout com rapidez.
Crie diagramas online
Crie diagramas Mermaid online com pré-visualização em tempo real, modelos e exemplos. Exporte PNG, SVG, PDF ou MMD, compartilhe por link e mantenha os dados no navegador.
Editor de diagramas gratuito no navegador
Crie diagramas Mermaid online grátis
Digite ou cole código Mermaid, veja as alterações em tempo real, comece com modelos e exporte em PNG, SVG, PDF ou MMD. Seus dados são processados no navegador.
- 100% grátis
- 33 tipos de diagrama
- Processamento no navegador
- 4 formatos de exportação
Tudo para transformar código Mermaid em diagrama
Um fluxo rápido e orientado a código para desenvolvedores, equipes de produto, redatores técnicos, estudantes e professores.
Modelos e exemplos
Comece com exemplos práticos de fluxogramas, sequência, ER, Gantt, arquitetura e muito mais.
33 tipos de diagrama
De fluxogramas e mapas mentais a C4, Sankey, Wardley Maps, diagramas de sintaxe e ZenUML.
Exportação PNG, SVG, PDF e MMD
Baixe imagem raster, vetor escalável, documento para impressão ou o código-fonte Mermaid.
Compartilhamento por link
Gere um link para colegas, clientes ou alunos abrirem o mesmo diagrama rapidamente.
Privacidade no navegador
Edição, renderização e processamento acontecem no navegador, ajudando a manter conteúdo sensível no dispositivo.
11 idiomas de interface
Disponível em English, 简体中文, Tiếng Việt, Русский, Português (Brasil), Español, Français, 日本語, 한국어, Deutsch e العربية.
Feito para diagram as code
Mantenha diagramas editáveis, revisáveis e amigáveis ao controle de versão.
Crie um diagrama em três etapas
- 01
Escreva ou cole o código Mermaid
Escolha um modelo, abra um exemplo ou cole código de documentação, GitHub, ChatGPT, Claude ou outra fonte.
- 02
Visualize enquanto digita
O diagrama é atualizado instantaneamente à medida que você ajusta textos, relações, direção, estilo e layout.
- 03
Exporte ou compartilhe
Baixe PNG, SVG, PDF ou MMD, ou crie um link para compartilhar.
Explore 33 tipos de diagrama Mermaid
Use a visualização certa para software, processos, projetos, modelagem de dados, estratégia, pesquisa e documentação.
- 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
Criado para documentação de verdade
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.
O formato certo para cada uso
Leve o diagrama do navegador para documentos, design, impressão, apresentações ou controle de versão sem redesenhar.
- 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.
Os dados do diagrama ficam no navegador
O conteúdo Mermaid é processado no lado do cliente, uma opção prática para arquitetura, processos internos, modelos de banco de dados e outros diagramas que você não quer enviar a um serviço remoto.
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 é uma sintaxe textual para diagramas. Você descreve nós, relações, eventos ou linhas do tempo em código e o renderizador transforma o texto em visual.
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.
Transforme texto em um diagrama claro agora
Abra o editor, escolha um modelo e exporte seu primeiro diagrama Mermaid em poucos minutos.
Criar diagrama Mermaid