Aguardando entrada
O que é o editor de diagramas Mermaid?
O Mermaid é uma ferramenta de criação de diagramas baseada em JavaScript que utiliza uma sintaxe textual semelhante ao Markdown para gerar diversos diagramas. Sem necessidade de arrastar formas manualmente, basta escrever uma simples descrição textual para gerar automaticamente fluxogramas, diagramas de sequência, diagramas de classes e muito mais.
Esta ferramenta oferece um ambiente de edição Mermaid online com visualização em tempo real, zoom por arrastar e funções de exportação, ajudando desenvolvedores a criar e compartilhar diagramas rapidamente.
Como usar
Uso básico
- Digite a sintaxe Mermaid no editor à esquerda
- O diagramma será renderizado em tempo real à direita
- Use o mouse para arrastar e mover o diagrama, a rola para ampliar/reduzir
- Clique no botão de exportação para salvar no formato PNG ou SVG
Tipos de diagramas suportados
Exemplos
Fluxograma
graph TD
A[Start] --> B{Decision}
B -->|Yes| C[Action A]
B -->|No| D[Action B]
C --> E[End]
D --> EDiagrama de sequência
sequenceDiagram
participant Client
participant Server
participant Database
Client->>Server: Send Request
Server->>Database: Query Data
Database-->>Server: Return Results
Server-->>Client: Send ResponseDiagrama de classes
classDiagram
class Animal {
+String name
+int age
+makeSound()
}
class Dog {
+fetch()
}
class Cat {
+purr()
}
Animal <|-- Dog
Animal <|-- CatPerguntas frequentes
Quais tipos de diagramas são suportados?
Fluxogramas (graph/flowchart), diagramas de sequência (sequenceDiagram), diagramas de classes (classDiagram), diagramas de estados (stateDiagram), diagramas ER (erDiagram), diagramas de Gantt (gantt), gráficos de pizza (pie), mapas mentais (mindmap) e mapas de jornada (journey) — totalizando 9 tipos de diagramas.
Como exportar um diagrama?
Clique no botão "Exportar PNG" ou "Exportar SVG" no painel à direita para baixar o diagrama. O formato PNG é ideal para inserção em documentos, o formato SVG é adequado para edição vetorial e impressão.
É possível ampliar, reduzir e mover o diagrama?
Sim. Use a rola do mouse para ampliar/reduzir, pressione e segure o botão esquerdo do mouse para arrastar e mover o diagrama. Clique duas vezes na área de visualização para redefinir a visualização ao estado inicial.
Os dados são enviados para o servidor?
Não. A análise da sintaxe Mermaid e a renderização dos diagramas são realizadas localmente no seu navegador. Seus dados nunca saem do seu dispositivo, garantindo total privacidade.