Diagrama como código
Diagram as Code
Renderiza fluxogramas, diagramas de sequência e gráficos de pizza do Mermaid enquanto você digita, com parser e layout próprios, lista exatamente qual sintaxe suporta e exporta SVG ou PNG.
Texto Mermaid à esquerda, o desenho à direita, atualizando enquanto você digita. O parser, o layout e o renderizador são deste site, e não a biblioteca Mermaid, e é por isso que a gramática suportada está listada na página por inteiro — três tipos de diagrama, e para cada um exatamente as construções que são lidas.
Código Mermaid
Prévia
Gramática suportada (qualquer outra coisa vira um erro com o número da linha)
Fluxograma — graph / flowchart
- Direções TD, TB, LR, RL, BT
- Formas [ ], ( ), ([ ]), [[ ]], [( )], (( )), > ], { }, {{ }}
- Linhas -->, ---, -.->, -.-, ==>, ===
- Rótulos -->|texto|, -- texto -->, -. texto .->, == texto ==>
- A --> B --> C, A & B --> C
- subgraph nome [título] … end (pode aninhar)
- style, classDef, class, :::nomeDaClasse
- %% comentários, ; separadores
Não suportado: click, linkStyle, direction, as setas <-->, --o e --x, strings Markdown
Sequência — sequenceDiagram
- participant A as Nome, actor B
- ->>, -->>, ->, -->, -x, --x, -), --)
- ->>+B / ->>-B, activate / deactivate
- Note left of · right of · over A,B
- loop, alt / else, opt … end
- autonumber
Não suportado: par, critical, break, rect, box, create/destroy, links
Pizza — pie
- pie [showData] [title Alguma coisa]
- "nome" : valor
Diagramas de classe, de estado, ER, de Gantt, mapas mentais e os outros tipos ainda não são desenhados. Para gráficos de Gantt existe uma ferramenta separada.
Como usar
Comece por um exemplo
Fluxograma, sequência e pizza têm cada um uma amostra que usa a maior parte do que o parser entende. Editar uma é mais rápido do que escrever a partir da lista de sintaxe.
Leia o erro pelo número da linha
Qualquer coisa fora da gramática suportada é recusada com a linha e o que estava errado, em vez de deixar uma tela em branco para você bissecar.
Exporte ou imprima
O SVG mantém o texto selecionável e escala limpo; o PNG a 2× é a escolha segura para uma apresentação ou uma mensagem de chat.
Perguntas frequentes
Quais tipos de diagrama funcionam?
Fluxograma (graph / flowchart), sequenceDiagram e pie. Class, state, ER, gantt, gitGraph, mindmap e o resto são nomeados no erro em vez de falharem vagamente — para um gráfico de Gantt há uma ferramenta à parte neste site.
Meu diagrama funciona no mermaid.live, mas não aqui
Provavelmente uma construção fora da lista da página — `click`, `linkStyle`, `direction` dentro de um subgraph, as setas `<-->`, `--o` e `--x`, front matter YAML, ou strings Markdown. O erro nomeia qual, e a lista é o contrato inteiro.
Texto com acento ou em coreano fica bem posicionado?
Sim. As larguras das caixas são medidas contando cada caractere CJK com largura inteira e cada letra latina, acentuada ou não, com uma largura menor, então um rótulo em coreano não transborda o nó como acontece em renderizadores que presumem que todo caractere tem meia largura. A medida é por ponto de código, sem normalizar: um “ã” decomposto, como vem de um Mac, conta como duas letras.
Meu diagrama é enviado para algum lugar?
Não. A análise e a renderização acontecem na página, e o rascunho fica neste navegador. Nada é enviado, o que importa quando o diagrama é a sua arquitetura interna.
Pode receber de
Criador de gráfico de Gantt
Gantt Chart Builder
Transforma uma tabela de tarefas — digitada ou colada como CSV — num gráfico de Gantt em escala de dia, semana ou mês com setas de dependência, marcos, linha de hoje e fins de semana sombreados, exportado como SVG ou PNG ou impresso.
Lista de tarefas
Todo List
Mantém uma lista de tarefas no seu navegador com prazos, etiquetas e edição pelo teclado, exportável como Markdown.
Bloco de notas
Scratch Notepad
Um bloco de notas em texto puro que salva enquanto você digita e sobrevive a um recarregamento, com contagem de palavras.
Empacotador de sprite sheet
Sprite Sheet Packer
Junta muitas imagens num único atlas e gera junto o mapa de quadros em CSS ou JSON.
Em seguida
Estas aceitam o que esta ferramenta produz, então o resultado pode ir direto.
Criador de gráfico de Gantt
Gantt Chart Builder
Transforma uma tabela de tarefas — digitada ou colada como CSV — num gráfico de Gantt em escala de dia, semana ou mês com setas de dependência, marcos, linha de hoje e fins de semana sombreados, exportado como SVG ou PNG ou impresso.
Editor de Markdown
Markdown Editor
Edita Markdown com prévia ao vivo e exporta o HTML renderizado, com tabelas e listas de tarefas do GFM.
Otimizador de SVG
SVG Optimiser
Remove sobras de editor, achata transformações e arredonda a precisão dos caminhos, mostrando a diferença renderizada.
Lista de tarefas
Todo List
Mantém uma lista de tarefas no seu navegador com prazos, etiquetas e edição pelo teclado, exportável como Markdown.
Codificar e decodificar Base64
Base64 Encoder & Decoder
Codifica e decodifica Base64 e Base64URL para texto ou arquivos, tratando UTF-8 corretamente.
Remover fundo de imagem
Background Remover
Recorta um fundo liso ou de cor única em OKLab e devolve um PNG transparente, com um pincel para corrigir as bordas.