Mermaid Design Mermaid Design

Sobre

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

Principais Funcionalidades

  • Pré-visualização em Tempo Real: Os diagramas são renderizados novamente à medida que escreve, com validação instantânea da sintaxe e indicação de erros
  • Dois Modos de Renderização: Renderize o seu diagrama como um SVG nítido ou como arte ASCII que pode colar em comentários de código, documentação ou terminais
  • Temas de Diagrama: Temas Mermaid com um clique, incluindo Padrão, Neutro, Floresta, Escuro e Base, além de cores de fundo personalizadas ou um fundo transparente
  • Renderização ASCII: Converta fluxogramas e diagramas de sequência em diagramas baseados em texto, com conjuntos de caracteres Unicode ou ASCII simples e tamanho de fonte ajustável
  • Arrastar e Zoom: Arraste para mover e Ctrl/⌘ + rolagem para ampliar, com uma barra de ferramentas flutuante para um controlo preciso
  • Editor de Código: Editor baseado no Monaco (o mesmo motor do VS Code) com realce de sintaxe Mermaid
  • Modelos: Uma galeria integrada de modelos de fluxogramas, diagramas de sequência, classes, estados, ER, Gantt, gráficos circulares, grafos Git, mapas mentais e jornadas do usuário
  • Exportação: Descarregue o seu diagrama em SVG, PNG, JPG ou WebP com resolução de 1x, 2x ou 4x — ou como ASCII em texto simples
  • Apenas no Navegador: Sem servidores, sem envios — tudo funciona localmente no seu navegador

Tipos de Diagrama Suportados

Fluxogramas, diagramas de sequência, diagramas de classes, diagramas de estados, diagramas ER, gráficos de Gantt, gráficos circulares, grafos Git, mapas mentais, jornadas do usuário, diagramas C4, linhas do tempo e diagramas de requisitos — tudo o que o motor Mermaid suporta.

Comentários

Se tiver alguma dúvida ou sugestão sobre a nossa ferramenta, não hesite em contactar-nos.