Editor de Diagramas Mermaid: Criar Diagramas como Código

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.

O que é Mermaid?

Mermaid é uma ferramenta de criação de diagramas e gráficos baseada em JavaScript que utiliza definições baseadas em texto para criar diagramas. Em vez de desenhar diagramas manualmente em uma ferramenta de interface gráfica, você escreve uma descrição de texto simples e Mermaid a renderiza como uma imagem SVG. Foi criado por Knut Sveidqvist e agora é mantido pela comunidade de código aberto. Mermaid é amplamente usado em documentação (GitHub, GitLab, Notion), arquivos README e documentação técnica. Suporta fluxogramas, diagramas de sequência, diagramas de classes, diagramas entidade-relação, diagramas de Gantt e muitos outros tipos de diagramas. A sintaxe é intencionalmente simples para que partes interessadas não técnicas possam ler e entender as definições de diagramas sem treinamento especial.

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.