Comece com um exemplo ou cole uma definição Mermaid. Renderize o texto, confira a prévia e exporte o diagrama.
Funciona localmente no seu navegadorUse apenas a sintaxe Mermaid. Os rótulos HTML são sanitizados: scripts e manipuladores de eventos são removidos.
Mantenha a definição Mermaid junto ao código, renderize-a aqui para revisão e baixe o resultado quando precisar de uma imagem portátil. A ferramenta não usa temas remotos, armazenamento em nuvem nem links de rastreamento.
Cole uma definição Mermaid e a página desenha o diagrama com um renderizador Mermaid 11.17.1 incluído; em seguida você pode copiar a marcação SVG ou baixá-la como kivtools-diagram.svg. Os três exemplos integrados (fluxograma, diagrama de sequência e modelo ER) são pontos de partida: nos testes também foram renderizados diagramas de estado, diagramas de classe e gráficos de Gantt, porque o analisador aceita toda a gramática do Mermaid.
A análise, o layout e o estilo rodam nesta aba. O texto do diagrama não é enviado, a renderização funciona offline depois que a página carrega e o SVG exportado traz os próprios estilos, sem referências externas.
A primeira linha escolhe a gramática: flowchart LR, sequenceDiagram, erDiagram, stateDiagram-v2, classDiagram, gantt e os demais tipos do Mermaid 11 foram renderizados nos testes. Uma primeira palavra desconhecida interrompe o analisador na hora, e uma definição copiada de outra ferramenta pode usar sintaxe que esta versão não aceita mais.
O editor é texto simples: não há autocompletar nem prévia ao vivo, então renderize após cada alteração e use a linha de status como único retorno. Recarregar o exemplo é o caminho mais rápido de volta a um documento que se sabe que será analisado.
O renderizador usa o modo estrito do Mermaid. Nos testes, um rótulo com <img src=x onerror=...> voltou com o manipulador de eventos removido, tags script não foram executadas, links javascript: foram descartados e diretivas click não geraram links externos. Os rótulos podem conter HTML seguro, como negrito e quebras de linha.
Entenda isso como garantia de sanitização, não como proibição de HTML: a ferramenta remove conteúdo executável dos rótulos, mas não rejeita a definição. Ainda assim, evite dados sensíveis no texto — a página é local, mas o SVG exportado é um arquivo que você pode compartilhar.
Copiar SVG coloca a marcação SVG na área de transferência; Baixar SVG salva essa mesma marcação como kivtools-diagram.svg. Os dois botões ficam desativados até haver um diagrama renderizado, e Limpar os desativa de novo. O arquivo exportado abre sozinho e pode ser embutido em Markdown, numa página HTML ou num pull request.
Um erro de sintaxe não esvazia o palco: a última prévia bem-sucedida continua visível enquanto a linha de status mostra a mensagem do analisador com o número da linha. Confira essa linha antes de copiar o SVG, principalmente quando o diagrama foi editado com pressa.