Mermaid Design

Primeiros passos

mermaid.design é um editor de diagramas Mermaid online e gratuito. Escreva a sintaxe Mermaid à esquerda e veja o diagrama renderizado em tempo real à direita. Tudo é executado inteiramente no seu navegador — os seus diagramas nunca saem do seu dispositivo.

O seu primeiro diagrama

  1. Abra mermaid.design — o editor carrega com um fluxograma de exemplo.
  2. Edite o código Mermaid no painel esquerdo, por exemplo:
flowchart TD
    A[Início] --> B{Pronto?}
    B -- Sim --> C[Publicar]
    B -- Não --> D[Continuar a programar]
  1. A pré-visualização é renderizada novamente automaticamente à medida que escreve (com um pequeno debounce). Se a sintaxe for inválida, o último diagrama válido permanece visível atrás de um aviso de erro, e o editor de código assinala a linha com problemas.

A bancada de trabalho

O editor é uma bancada de trabalho com três painéis:

  • Editor de código (esquerda) — um editor Monaco (o mesmo motor do VS Code) com realce de sintaxe Mermaid, marcadores de erro inline e uma barra de ferramentas para formatar/copiar/limpar. Pode recolhê-lo numa faixa fina de ícones ou arrastar o divisor para redimensioná-lo.
  • Pré-visualização (centro) — o diagrama renderizado em tempo real. Arraste para mover, Ctrl/⌘ + rolagem para ampliar, duplo clique para ajustar. Uma barra de ferramentas flutuante oferece controlos de zoom e um seletor de fundo da tela (pontos / branco / xadrez).
  • Painel de tema (direita) — predefinições com um clique, variáveis de tema detalhadas e geração de temas a partir de uma cor-base. Ver abaixo.

Em ecrãs estreitos, a bancada torna-se um painel único com uma barra de separadores inferior Código / Pré-visualização / Tema.

Modos de renderização

Use o controlo segmentado na barra de navegação para mudar a forma como o diagrama é renderizado:

  • Oficial — a saída SVG padrão do Mermaid, exatamente como o motor Mermaid a renderiza.
  • ASCII — o seu diagrama convertido em arte de texto que pode colar em comentários de código, documentação ou terminais. Veja Renderização ASCII.

O modo faz parte do URL, pelo que pode guardar nos favoritos ou partilhar uma ligação para um modo específico.

Temas

Cada diagrama é renderizado com o tema base mais um conjunto de mais de 70 variáveis de tema editáveis:

  • Predefinições — os 11 temas incorporados do Mermaid (Default, Neutral, Forest, Dark, Base e mais) além de predefinições de designer, cada uma com uma mini pré-visualização.
  • Variáveis do tema — ajuste cores, bordas e tipos de letra individuais por grupo, com pesquisa.
  • Gerar — derive um tema completo a partir de uma única cor-base, claro ou escuro.

O seu trabalho é guardado automaticamente

O editor guarda o seu código, tema e layout no armazenamento local do navegador. Feche o separador e volte mais tarde — o seu diagrama continua lá. Nada é enviado para um servidor.

Próximos passos