Saltar para o conteúdo principal
LibraTool logoLibraTool

Editor de Diagramas Mermaid grátis

Escreva fluxogramas, diagramas de sequência, gráficos de Gantt e muito mais na sintaxe Mermaid com pré-visualização ao vivo. Exporte como SVG ou PNG. Executa inteiramente no seu navegador.

💡 Escreva diagramas na sintaxe Mermaid — fluxogramas, diagramas de sequência, gráficos de Gantt, diagramas de classe e mais — e exporte em SVG ou PNG. Tudo roda no seu navegador: o texto do diagrama nunca é enviado, e o motor de renderização do Mermaid vem deste site, não de um CDN de terceiros.

Usos comuns

  • Fazer um fluxogramaCrie um fluxograma a partir de texto e exporte-o como imagem.
  • Desenhar um diagrama de sequênciaDiagrama como sistemas ou pessoas interagem ao longo do tempo.
  • Adicione um diagrama a um READMECrie diagramas que o GitHub renderiza nativamente no seu README.
  • Construir um gráfico de GanttApresente uma linha do tempo do projeto como um gráfico de Gantt a partir do texto.
  • Criar um diagrama de classeDiagrama classes e seus relacionamentos para design de software.

Como funciona

Mermaid permite que você escreva diagramas como texto e os tenha renderizados automaticamente — ótimo para manter diagramas no controle de versão. Este é um editor ao vivo que renderiza conforme você digita.

  1. 1
    O mecanismo Mermaid carrega
    A biblioteca Mermaid é carregada da LibraTool na primeira vez que você usa a ferramenta e depois fica no cache do navegador.
  2. 2
    Você escreve código de diagrama
    Fluxogramas, diagramas de sequência, gráficos de Gantt, diagramas de classe, gráficos de pizza e muito mais — usando a sintaxe de texto do Mermaid.
  3. 3
    Ele renderiza em tempo real
    Seu código é analisado e renderizado para um SVG no seu navegador conforme você digita, com temas claros e escuros.
  4. 4
    Exporte SVG ou PNG
    Baixe o diagrama como um SVG escalável ou um PNG 2× para colocar em documentos, slides ou um README.

Seu código de diagrama — que pode descrever sistemas internos — é renderizado inteiramente no seu navegador e nunca carregado.

Ferramentas relacionadas

📝

Editor de Markdown

Escreva e visualize Markdown em tempo real. Suporta títulos, negrito, itálico, blocos de código, tabelas e listas.

Experimentar
🟦

Gerador de CSS Grid

Projete visualmente um CSS grid — faixas, unidades e lacunas — e copie o CSS e HTML gerados.

Experimentar
🌳

Gerador de Árvore ASCII

Transforme uma lista indentada em uma árvore de pastas limpa (├── └──) para READMEs e documentos. Saída em Unicode ou ASCII puro. Executa inteiramente no seu navegador.

Experimentar

Perguntas frequentes