Desenvolvedor / Diagramas
Mermaid Live Editor
Escreva código Mermaid e veja o diagrama enquanto digita: fluxogramas, diagramas de sequência, diagramas de classes, gráficos de Gantt e gráficos de pizza, com downloads em SVG e PNG.
Mermaid Live Editor: O editor desenha diagramas com Mermaid, a biblioteca de código aberto usada pelo GitHub, GitLab e muitas ferramentas de documentação para criar diagramas em texto. Ele funciona no modo estrito, portanto o código de outra pessoa não pode executar scripts nem adicionar manipuladores de clique. Os downloads em SVG continuam nítidos em qualquer tamanho; os downloads em PNG são gerados com o dobro do tamanho exibido na tela, em um fundo branco. Roda 100% localmente no seu navegador, sem enviar nenhum arquivo para o servidor.
- Categoria
- Ferramentas para desenvolvedores
- Execuções
- No seu navegador
- Custo
- Grátis · sem cadastro
- Disponibilidade
- Pronto para usar
Roda inteiramente no seu navegador
Os diagramas são desenhados no seu navegador com o Mermaid, no modo estrito, portanto o código do diagrama não pode executar scripts. Cole o mesmo código no Markdown do GitHub, GitLab ou Notion em um bloco de código mermaid para exibi-lo lá.
Diagramas como texto
Um diagrama desenhado em um programa gráfico fica desatualizado porque alterá-lo exige abrir o arquivo novamente. Um diagrama Mermaid é formado por algumas linhas de texto que ficam ao lado do código ou do documento que descrevem, mudam no mesmo commit e aparecem em uma revisão como um diff legível.
Cada diagrama começa com seu tipo: flowchart com uma direção, como TD (de cima para baixo) ou LR (da esquerda para a direita), sequenceDiagram, classDiagram, gantt ou pie. Os nós são escritos uma vez com seu rótulo, A[Start], e depois referenciados pelo nome, A --> B.
Exportação
SVG mantém linhas e textos nítidos em qualquer tamanho e é a melhor opção para documentos e apresentações; PNG é adequado para aplicativos de conversa e lugares que não aceitam SVG. Para editar manualmente o SVG exportado, abra-o no editor de SVG.
Como usar
- Comece com um exemplo ou cole seu próprio código Mermaid.
- Edite o código; o diagrama é redesenhado enquanto você digita ou exibe o erro.
- Baixe o diagrama em SVG ou PNG ou copie o código.
Privacidade e limitações
Os diagramas são desenhados no seu navegador, e seu código fica armazenado apenas neste navegador para continuar disponível na próxima vez.
Ferramentas relacionadas
Perguntas frequentes
O que é Mermaid?
É uma forma de escrever diagramas como texto. Uma linha como A --> B desenha duas caixas ligadas por uma seta, permitindo manter diagramas em arquivos Markdown e revisões de código e alterá-los editando o texto, em vez de usar uma ferramenta de desenho.
Como mostro o diagrama no GitHub?
Coloque o código em um bloco de código delimitado identificado como mermaid em um arquivo Markdown, issue ou pull request: três crases seguidas da palavra mermaid, o código e depois três crases. GitHub, GitLab e Notion o desenham no próprio local.
Por que meu diagrama exibe um erro?
A mensagem identifica a linha que o Mermaid não conseguiu ler. As causas comuns são a ausência do tipo de diagrama na primeira linha, como flowchart TD, colchetes ou aspas que não foram fechados e texto com caracteres especiais que precisa estar entre aspas.
Quais tipos de diagrama são compatíveis?
Todos os tipos da versão do Mermaid carregada pelo editor, incluindo fluxogramas, diagramas de sequência, classes, estados, entidade-relacionamento, Gantt, pizza, mapas mentais, linhas do tempo e gráficos Git. Os exemplos abrangem os cinco tipos mais comuns.
Ferramenta grátis · no seu navegador execuções · não precisa de conta