Anúncios incomodam? Ir Sem anúncios Hoje 

Renderizador de Diagrama Mermaid

DesenvolvedorImagemTexto

ANUNCIADO Remover?

ENTRADA

Processo Automático

SAÍDA

Lado cliente

ANUNCIADO Remover?

Guia

Renderizador de Diagrama Mermaid

Cole o código mermaid.js e veja imediatamente um diagrama interativo, que você pode copiar ou baixar. Suporta fluxogramas, diagramas de sequência, gráficos de Gantt, gráficos de fatias, diagramas de classes e mais — todos renderizados no cliente, no seu navegador, sem servidores, contas ou instalações necessárias.

O Mermaid é ótimo para "diagramas como código": seu diagrama fica ao lado do seu projeto como texto simples, mas os humanos precisam de um renderer para realmente ver a imagem. Este ferramenta preenche essa lacuna — basta colar qualquer snippet de mermaid, trocar os temas e exportar o resultado como SVG ou PNG.

Como usar

Cole seu código mermaid no editor — ou clique Flowchart, Séquence, Gantt, Pie, ou Aula para carregar um exemplo inicial.
Escolha um tema (Padrão, Escuro, Floresta, Neutro, Base) e um fundo (Transparente, Branco, Cinza claro, Escuro) para se adaptar ao seu slide ou documento.
Observe o diagrama atualizando em tempo real enquanto você digita. Se houver erro na sintaxe, você verá exatamente a mensagem de erro do mermaid diretamente abaixo da prévia.
Quando estiver certo, clique em Baixar SVG para obter um vetor perfeitamente escalável, Baixar PNG para um screenshot raster, ou cópia de para obter a fonte SVG para incorporação.

Características

Pré-visualização em tempo real – o diagrama é re-renderizado enquanto você edita, com um debounce para que diagramas grandes permaneçam fluidos.
Todos os tipos principais de mermaid – fluxogramas, sequência, Gantt, fatias, classes, ER, estado, jornada e qualquer outra sintaxe suportada pelo mermaid v11.
5 temas integrados – Padrão, Escuro, Floresta, Neutro e Base, mais fundos de prévia configuráveis para transparente, branco, claro ou escuro.
Exportação SVG e PNG – baixe um SVG de vetor nítido ou um PNG em escala 2x sem sair da página.
Fonte SVG pronta para copiar – pegue o markup original para colar em um README, documento ou página web.
Relatório de erro em tempo real – erros de sintaxe do mermaid são exibidos claramente para que você possa corrigi-los em segundos.
Primeiro privacidade – tudo é executado no seu navegador. Seus diagramas nunca chegam aos nossos servidores.

ANUNCIADO Remover?

 Perguntas frequentes

O que é o mermaid.js?

O mermaid é uma biblioteca JavaScript de código aberto que transforma definições de diagrama em texto simples em diagramas SVG. Foi criado para que engenheiros, escritores técnicos e equipes de produto pudessem manter os diagramas sob controle de versão junto com o código, em vez de manter arquivos binários em ferramentas de design separadas. O mermaid suporta muitos tipos de diagrama, desde fluxogramas simples até diagramas de entidade-relação e de Gantt.
Por que usar diagramas como código em vez de um aplicativo de desenho?

Os diagramas escritos em texto ficam no seu repositório, atualizam com clareza em solicitações de pull e atualizam instantaneamente quando as ideias subjacentes mudam. São indexáveis, scriptáveis e nunca ficam fora de sincronia com o códigobase, como uma imagem em um wiki. Ferramentas de desenho visual são ótimas para apresentações rápidas, mas para documentação ativa, um formato baseado em texto se adapta melhor à sua equipe.
Qual a diferença entre SVG e PNG ao exportar um diagrama?

O SVG é um formato vetorial — armazena formas e texto como matemática, então permanece nítido em qualquer tamanho e é pequeno em tamanho de arquivo para diagramas típicos. O PNG é um formato raster que armazena uma grade fixa de pixels, o que o torna uma escolha segura para ferramentas que não suportam SVG (apresentações antigas, alguns aplicativos de chat, plataformas que só aceitam imagens). Para documentos, páginas web e ferramentas modernas de apresentação, o SVG é quase sempre a melhor escolha.
Como os temas do mermaid afetam a renderização?

Um tema do mermaid é um conjunto de regras padrão de cores e tipografia aplicadas ao diagrama renderizado. O tema Padrão é claro e funciona bem em fundos claros, o Escuro inverte cores para interfaces escuras, o Floresta usa tons verdes, o Neutro é em tons de cinza e o Base é um baseline simplificado que pode ser sobrescrito com variáveis de tema. Trocar de tema altera apenas a aparência do SVG — a estrutura do diagrama permanece inalterada.
A renderização é feita localmente ou em um servidor?

A renderização ocorre inteiramente no seu navegador usando o motor JavaScript do mermaid. Nada é enviado, enviado para um servidor ou armazenado remotamente. Isso mantém os diagramas de arquitetura confidenciais e significa que a ferramenta continua funcionando mesmo em conexão lenta ou sem internet.