Renderizador de diagramas Mermaid

Renderize diagramas Mermaid (fluxo, sequência, gantt) em SVG no seu navegador.

Seu código Mermaid é renderizado localmente no seu navegador e nada é enviado para um servidor.

Precisa reduzir um diagrama exportado? Experimente o SVG Optimizer.

Sobre Renderizador de diagramas Mermaid

Este editor mermaid ao vivo transforma código Mermaid simples em diagramas renderizados enquanto você digita, com a renderização começando no momento em que você cola. Insira um fluxograma, diagrama de sequência, gráfico de gantt, diagrama de classes ou diagrama de estados e veja o SVG aparecer instantaneamente ao lado da sua origem. Foi feito para desenvolvedores, redatores técnicos e arquitetos que mantêm diagramas em documentos, arquivos README ou notas de design e querem uma forma rápida de visualizá-los e exportá-los. O renderizador de diagramas mermaid detecta automaticamente temas claro e escuro para combinar com sua visualização, reporta erros de sintaxe inline para você corrigi-los rapidamente, e permite baixar o resultado como um SVG limpo. Como tudo é processado localmente no seu navegador, a origem do seu diagrama nunca sai do seu dispositivo e nada é enviado para um servidor.

Recursos

Como usar Renderizador de diagramas Mermaid

  1. Cole ou digite seu código Mermaid na caixa de entrada.
  2. Veja o diagrama renderizar automaticamente no painel de saída.
  3. Corrija quaisquer mensagens de erro de sintaxe inline, se aparecerem.
  4. Alterne o tema do seu navegador ou aplicativo para visualizar o estilo claro ou escuro.
  5. Clique em baixar para salvar o resultado como diagram.svg.

Exemplo

Entrada

graph TD
  A[Início] --> B{Funciona?}
  B -->|Sim| C[Publicar]
  B -->|Não| D[Corrigir]
  D --> B

Saída

Um fluxograma SVG renderizado: uma caixa Início flui para um losango de decisão Funciona?, o ramo Sim aponta para Publicar, o ramo Não aponta para Corrigir, e Corrigir volta para a decisão.

Um fluxograma simples renderizado em SVG que pode ser baixado.

Erros comuns e solução de problemas

Perguntas frequentes

O que é o editor Mermaid ao vivo?
É uma ferramenta no navegador que converte código Mermaid em um diagrama renderizado em tempo real, para você visualizar fluxogramas, diagramas de sequência e mais ao lado da sua origem e exportá-los como SVG.
Quais tipos de diagrama o editor Mermaid ao vivo suporta?
Ele renderiza a sintaxe padrão do Mermaid, incluindo fluxogramas, diagramas de sequência, gráficos de gantt, diagramas de classes e diagramas de estados, a mesma sintaxe usada no GitHub e em muitas ferramentas de documentação.
Como exporto um diagrama Mermaid como imagem?
Assim que seu diagrama renderizar, clique em baixar para salvá-lo como um arquivo SVG que você pode inserir em documentos ou abrir em qualquer editor vetorial.
Por que meu diagrama Mermaid mostra um erro de sintaxe?
O renderizador valida o código Mermaid e mostra a mensagem do parser inline; a maioria dos erros vem de uma declaração de tipo de diagrama faltando ou de colchetes e setas desbalanceados.
O diagrama renderizado combina com meu modo escuro?
Sim. O editor Mermaid ao vivo detecta se você está visualizando em modo claro ou escuro e aplica o tema Mermaid correspondente automaticamente.
O código do meu diagrama Mermaid é mantido privado?
Sim. A origem do seu Mermaid é renderizada localmente no seu navegador e nunca sai do seu dispositivo, então nada é enviado para um servidor.

Ferramentas relacionadas

Todas as ferramentas de ArrayKit