Beautiful Mermaid skill

Você descreve o fluxo, o processo ou o banco de dados e recebe o diagrama pronto em SVG e em PNG de alta resolução, no tema que escolher.

por intellectronica

instalações: 1.800
estrelas no GitHub: 297
No skills.sh desde: janeiro de 2026
Licença: CC0-1.0

Atualizada no GitHub em 25 de abril de 2026. Dados conferidos em 26 de outubro de 2026, no skills.sh e no GitHub.

intellectronica
beautiful-mermaid
Você descreve o fluxo, o processo ou o banco de dados e recebe o diagrama pronto em SVG e em PNG de alta resolução, no tema que escolher.1.800 instalações, grátis

O que ela faz

Se você manda só a descrição, o agente escreve o código Mermaid; se manda o código, ele confere. Depois um script gera o SVG com a biblioteca Beautiful Mermaid. Funciona com fluxograma, diagrama de sequência, de estados, de classes e entidade-relacionamento, que é o desenho das tabelas de um banco de dados.

Pro PNG, a skill monta uma página HTML com o SVG, abre num navegador controlado pela skill agent-browser, numa tela de 4K, e tira o print. No fim apaga os arquivos intermediários e deixa só o .svg e o .png na pasta.

São 13 temas, entre eles Dracula, Tokyo Night, Nord, GitHub claro e escuro, Solarized e One Dark. A skill também traz os cuidados de sintaxe que evitam diagrama cortado, como pôr entre aspas o rótulo com parênteses ou barra e escrever a seta com rótulo no formato -->|texto|.

Nas palavras de quem fez

Render Mermaid diagrams as SVG and PNG using the Beautiful Mermaid library. Use when the user asks to render a Mermaid diagram.

intellectronica, no SKILL.md

Quando usar

Desenhar o fluxo de vendas ou de atendimento pra mostrar pro time
Transformar o passo a passo de um processo em fluxograma pra apostila ou post
Mostrar as tabelas de um banco de dados e como elas se ligam
Ilustrar o caminho de um login ou de um pagamento entre sistemas

Depois de instalar, é só pedir assim

Faz um fluxograma do meu funil: anúncio, página de vendas, checkout e e-mail de boas-vindas. Tema tokyo-night, em SVG e PNG
Pega esse código Mermaid e gera a imagem em PNG no tema github-light
Desenha um diagrama de sequência de como o cliente paga no Pix e recebe o acesso por e-mail

Segurança

Gen Agent Trust Hub, Socket e Snyk leem o código da skill atrás de comando perigoso, dado vazando e instrução escondida. Alerta não é reprovação: quer dizer que vale ler o que a skill faz antes de instalar.

Gen Agent Trust HubAlerta
SocketAlerta
SnykPassou

Perguntas

Como instalar a Beautiful Mermaid no Claude Code?

Toca em Levar, aqui nesta página, e deixa seu nome, e-mail e WhatsApp (é uma vez só). Aparece uma frase pronta: cola ela no Claude Code, que ele mesmo instala a Beautiful Mermaid, e a skill passa a valer na próxima conversa. A mesma frase serve no Codex. Se preferir fazer na mão, o passo a passo está em como instalar skills no Claude Code.

O que precisa pra funcionar?

Um jeito de rodar TypeScript no computador (Bun, Node com npx tsx ou Deno) pro script que gera o SVG, e a skill agent-browser instalada pra tirar o PNG. Não pede chave de API nem conta paga.

Roda no Codex e no Antigravity?

Roda. São instruções e scripts de linha de comando, e qualquer agente que execute comandos no terminal consegue seguir. O PNG continua dependendo da agent-browser.

Ela faz qualquer tipo de diagrama?

Não. A skill cobre cinco tipos: fluxograma, sequência, estados, classes e entidade-relacionamento. Gráfico de pizza, linha do tempo e mapa mental do Mermaid ficam de fora da lista.

Levar essa skill

1x beautiful-mermaidR$ 0,00

TotalR$ 0,00

Levar precisa do JavaScript ligado. O código da skill está no GitHub: github.com/intellectronica/agent-skills

Aprenda a usar

Social media: o que faz, curso e o pacote com IA
Social media cuida das redes sociais de empresas. Veja o que faz, qual curso vale a pena e como sair do post barato para pacotes de R$ 2.500 a R$ 6.000.