Editor de Diagramas Mermaid: Criar Diagramas como Código

Crie fluxogramas, diagramas de sequência, diagramas ER é mais com visualização ao vivo Mermaid. Exporte para SVG ou PNG.

100% no navegador. Seus dados nunca saem do seu computador.

Modelos:

Carregando editor...

A visualização do diagrama aparecerá aqui...

Conversores e Exemplos

Diagrama de Classes Mermaid: Criar Diagramas UML de Classes

Crie diagramas de classes UML com sintaxe Mermaid. Classes, interfaces, herança, composição e modificadores de visibilidade. Visualização ao vivo.

 Gerador de Diagramas ER Mermaid: Diagramas Entidade-Relacionamento

Crie diagramas ER com sintaxe Mermaid. Defina entidades, atributos, tipos e relacionamentos com notação de cardinalidade. Visualização ao vivo.

 Fluxograma Mermaid: Criar Diagramas de Fluxo Online

Crie fluxogramas com sintaxe Mermaid. Nós, arestas, formas, subgrafos e controle de direção. Visualização ao vivo com exportação SVG e PNG.

 Diagrama Gantt Mermaid: Diagramas de Cronograma de Projetos

Crie diagramas Gantt com sintaxe Mermaid. Defina tarefas, durações, dependências, marcos e seções. Visualização ao vivo.

 Gerador de Diagramas de Sequência Mermaid

Crie diagramas de sequência com sintaxe Mermaid. Participantes, mensagens, barras de ativação, loops e blocos alternativos. Visualização ao vivo.

Ferramentas Relacionadas

.md
Pré-visualização Markdown: Converter Markdown para HTML

Converta Markdown para HTML em tempo real. Com suporte GFM para tabelas, listas de tarefas, blocos de código e texto tachado. Copie a saída HTML com um clique.

 </>
Formatador de SQL / CSS / HTML

Formaté e minifique consultas SQL, folhas de estilo CSS e markup HTML com realce de sintaxe. Indente, embeleze ou comprima código no seu navegador.

Editor de Diagramas Mermaid: Crie Diagramas como Código

Mermaid é uma linguagem de criação de diagramas que converte definições de texto em diagramas SVG. Escreva um fluxograma, diagrama de sequência ou diagrama ER como texto plano e veja o resultado renderizado em tempo real. Este editor analisa sua sintaxe Mermaid do lado do cliente usando a biblioteca oficial Mermaid.js é a exibe como uma visualização SVG rolável e ampliável.

Como Usar

  1. Escreva sintaxe Mermaid no editor (com números de linha e correspondência de parênteses) ou clique em um botão de templaté para carregar um ponto de partida
  2. A visualização é atualizada enquanto você escreve com uma breve demora
  3. Arraste o separador entre o editor é a visualização para redimensionar os painéis
  4. Clique e arraste na visualização para rolar, role para ampliar
  5. Selecione um tema de diagrama no menu suspensó (Default, Dark, Forest, Neutral)
  6. Exporte com os botões de download SVG/PNG ou use Copiar PNG para colar em outras aplicações
  7. Clique em Compartilhar para criar um link que codifica seu diagrama e tema no hash

Tipos de Diagramas Suportados

Fluxogramas

O diagrama Mermaid mais comum. Defina a direção com TD (cima para baixo), LR (esquerda para direita), RL ou BT. Os nós usam colchetes para as formas: [retângulo], (arredondado), {losango}, ([estádio]). Conecte nós com setas: -->, -.->, ==>.

Diagramas de Sequência

Modele interações entre participantes ao longo do tempo. As setas mostram mensagens síncronas (->>) e assíncronas (-->>). Adicione blocos activate/deactivate, condições alt/else e seções loop para representar fluxos complexos.

Diagramas Entidade-Relacionamento

Defina esquemas de banco de dados com entidades e relacionamentos. Use a notação padrão de cardinalidade: ||--o{ (um para muitos), }|--|{ (muitos para muitos). Adicione tipos de atributos e marcações PK/FK.

Diagramas de Classes

Documente designs orientados a objetos com classes, interfaces e relacionamentos. Use modificadores de visibilidade (+, -, #), herança (<|--), composição (*--) e agregação (o--).

Diagramas Gantt

Acompanhe cronogramas de projetos com tarefas, dependências, marcos e seções. Use datas explícitas ou dependências com a palavra-chave after.

Compartilhamento de Diagramas

Clique em Compartilhar para codificar seu código Mermaid e tema atual no hash da URL. Qualquer pessoa com o link vê exatamente o mêsmo diagrama. Issó funciona sem um backend: o diagrama é armazenado no hash da URL, não em um servidor.

Diagramas Mermaid funcionam em páginas de documentação, READMEs, wikis e apresentações técnicas.