Editor Mermaid
Escreva sintaxe Mermaid e veja uma visualização ao vivo de fluxogramas, diagramas de sequência ou diagramas de classe. Exporte como SVG, PNG ou JPEG.
Sobre o Editor de Fluxograma Mermaid
Escreva sintaxe de diagramas Mermaid no editor e veja o fluxograma renderizado, diagrama de sequência, diagrama de classe ou outros tipos de diagramas atualizarem instantaneamente. Carregue um modelo para começar rapidamente, então exporte seu diagrama como SVG, PNG ou JPEG ou copie a sintaxe para edição posterior.
O Que É Esta Ferramenta?
Um editor de diagrama Mermaid ao vivo que renderiza fluxogramas, diagramas de sequência, diagramas de classe e muito mais conforme você digita. Escreva diagramas como texto usando sintaxe Mermaid e veja instantaneamente o resultado renderizado, depois exporte como imagem.
Como Usar
- Escolha um modelo (Fluxograma, Sequência, Classe, etc.) para carregar exemplo de sintaxe Mermaid, ou escreva o seu próprio.
- Observe a visualização do diagrama atualizar automaticamente enquanto você edita a sintaxe.
- Clique em Exportar Imagem para baixar o diagrama como SVG, PNG ou JPEG, ou Copiar Sintaxe para copiar o código Mermaid.
- Se a sintaxe tiver um erro, o último diagrama válido permanece visível enquanto você o corrige.
Casos de Uso Comuns
- Esboço de um fluxograma para um processo ou árvore de decisão
- Documentação de uma sequência de chamadas API ou interação do sistema
- Desenho de um diagrama de classe ou diagrama entidade-relacionamento para design de software
- Incorporação de diagrama como código em documentação ou arquivos README
Dicas e Truques
- A sintaxe Mermaid é texto simples, portanto os diagramas podem ser controlados por versão junto com seu código.
- Use a exportação SVG para diagramas nítidos na documentação, e PNG ou JPEG para compartilhamento rápido em chat ou slides.
Perguntas frequentes
Quais tipos de diagramas a sintaxe Mermaid suporta?
Fluxogramas, diagramas de sequência, diagramas de classe, diagramas de estado, diagramas entidade-relacionamento e vários outros tipos de diagramas — escolha um modelo para carregar sintaxe de exemplo para cada um.
O que acontece se faço um erro de sintaxe enquanto edito?
O editor mantém mostrando o último diagrama válido renderizado para que seu trabalho em progresso permanece visível, em vez de limpar a pré-visualização — corrija o erro de sintaxe e o diagrama é atualizado automaticamente.
Qual formato de exportação devo escolher: SVG, PNG ou JPEG?
SVG é baseado em vetor e permanece nítido em qualquer nível de zoom, ideal para documentação. PNG e JPEG são formatos raster mais adequados para compartilhamento rápido em aplicativos de chat ou decks de slides onde suporte a SVG pode ser limitado.
Posso armazenar meus diagramas em controle de versão junto com meu código?
Sim. Como diagramas Mermaid são escritos como sintaxe de texto simples, você pode fazer commit da fonte .mmd diretamente no git e rastrear mudanças no diagrama assim como qualquer outro arquivo de código.
Minha sintaxe de diagrama é enviada a um servidor para renderizar?
Não. Diagramas são renderizados inteiramente do lado do cliente no seu navegador — sua sintaxe e conteúdo de diagrama nunca são carregados a qualquer lugar.
Escreva sintaxe Mermaid e veja uma visualização ao vivo de fluxogramas, diagramas de sequência ou diagramas de classe. Exporte gratis como SVG, PNG ou JPEG, sem registro necessário.