O mermaid.design é um editor de diagramas Mermaid online. Escreva a sintaxe mermaid em texto simples e veja-a transformar-se em fluxogramas, diagramas de sequência, diagramas ER, gráficos de Gantt e muito mais — renderizados ao vivo enquanto escreve.
Tudo é executado localmente no seu navegador: sem conta, sem carregamentos, sem idas e vindas ao servidor. O código dos seus diagramas fica no seu dispositivo e cada exportação é gerada exatamente onde trabalha.
Mais do que uma ferramenta de colar e visualizar — um ambiente completo para desenhar, estilizar e exportar diagramas como código.
Um editor CodeMirror leve com destaque de sintaxe Mermaid, erros inline e seleção sincronizada com o canvas, combinado com uma pré-visualização ao vivo com pan e zoom.
Edite etiquetas e elementos do diagrama diretamente no canvas. As alterações são sincronizadas com o código-fonte Mermaid, com seleção e desfazer/refazer partilhados entre o código e a pré-visualização.
Escreva Mermaid mais rapidamente com preenchimento automático contextual, snippets prontos a usar, pesquisa e substituição, formatação com um clique e diagnósticos de sintaxe inline.
Alterne entre a saída SVG oficial do mermaid e um motor ASCII que desenha o seu diagrama em texto simples — perfeito para terminais, comentários de código e documentação.
Ajuste as 73 variáveis de tema do mermaid, comece por mais de 20 predefinições integradas e de designer, ou derive uma paleta completa a partir de uma única cor semente — e depois exporte o tema como JSON ou frontmatter.
Ajuste 438 opções de renderização do Mermaid organizadas em 33 grupos, do layout e espaçamento ao comportamento específico de cada diagrama, sem editar manualmente o JSON de configuração.
Comece a partir de uma galeria de modelos de fluxograma, sequência, estado, ER, Gantt e outros — cada um renderizado ao vivo com o seu tema atual antes de ser aplicado.
Descarregue o seu diagrama como SVG, PNG, JPG ou WebP — com fundo transparente opcional — ou copie a renderização ASCII diretamente para o seu README.
Sem registo e sem backend: a análise, a renderização e a exportação acontecem do lado do cliente, por isso os diagramas de arquitetura sensíveis nunca saem da sua máquina.
O mesmo código mermaid, renderizado à sua maneira — mude de motor na barra de navegação a qualquer momento.
A renderização SVG clássica do mermaid que conhece da documentação, com controlo total sobre cada variável de tema e campo de configuração.
Abrir o editor oficial →Renderize diagramas como arte ASCII para terminais, comentários de código e documentos de texto simples, com conjunto de caracteres e tamanho de letra ajustáveis.
Experimentar o modo ASCII →Descreva um diagrama em linguagem natural e deixe a IA redigir o código mermaid por si. Este modo está a caminho.
Ver o que está planeado →De fluxogramas a diagramas de arquitetura C4 — se o mermaid suporta, pode desenhá-lo aqui.
Comece do zero, cole código existente ou escolha um dos 31 modelos da galeria.
Ajuste as variáveis de tema, aplique uma predefinição ou mude para o motor Styled para sombras e traços personalizados — sem uma linha de CSS.
Descarregue SVG, PNG, JPG ou WebP para documentos e slides, ou TXT para a renderização ASCII. O seu tema viaja como JSON ou frontmatter.
Não. O mermaid.design corre inteiramente no seu navegador — abra a página e comece a escrever sintaxe mermaid. Não há nada para instalar nem onde se registar.
Não. A análise, a renderização e a exportação acontecem localmente no seu navegador. O código dos seus diagramas fica guardado no armazenamento local do seu navegador e nunca sai do seu dispositivo.
Todos os tipos suportados pelo mermaid 12, incluindo fluxogramas, diagramas de sequência, de classes, de estado, ER, gráficos de Gantt, mapas mentais, linhas do tempo, diagramas de Sankey, diagramas C4 e mais.
Pode descarregar diagramas como SVG, PNG, JPG ou WebP (com fundo transparente opcional), exportar renderizações ASCII como texto simples e copiar a configuração do tema como JSON ou frontmatter mermaid.
Sim. Os diagramas que cria e exporta são seus — use-os em documentação, apresentações, artigos de blog ou produtos, comerciais ou não.
Sem registo — o editor acima já está à sua espera.