Pretty Mermaid skill

Fluxo, processo ou estrutura de sistema descritos em palavras viram um diagrama bonito, pronto pra documentação, apresentação ou chat.

por imxv

instalações: 4.500
estrelas no GitHub: 1.542
No skills.sh desde: janeiro de 2026
Licença: MIT

Atualizada no GitHub em 22 de agosto de 2026. Dados conferidos em 26 de outubro de 2026, no skills.sh e no GitHub.

imxv
pretty-mermaid
Fluxo, processo ou estrutura de sistema descritos em palavras viram um diagrama bonito, pronto pra documentação, apresentação ou chat.4.500 instalações, grátis

O que ela faz

Transforma uma descrição em texto, ou um código Mermaid pronto, num diagrama renderizado. Cobre fluxograma, diagrama de sequência, de estados, de classes, de banco de dados (ER) e gráfico de barras e linhas. Roda no seu computador, com Node.js, sem precisar de navegador.

Entrega em SVG, que não perde qualidade, pra documentação e slides; em PNG pra mandar em chat; e em desenho de texto (Unicode ou ASCII) pro terminal. Tem 15 temas, como tokyo-night, github-light e dracula, e aceita as cores da sua marca no fundo, nas linhas e nos blocos.

Salva o código do diagrama num arquivo .mmd, renderiza, confere o resultado e ajusta se algum rótulo ficou cortado ou apertado. Com três ou mais diagramas, converte a pasta inteira de uma vez.

Nas palavras de quem fez

Generate and render Mermaid diagrams for architecture docs, READMEs, PRs, terminals, chats, and CI as themed SVG, PNG, or ASCII/Unicode art. Use this skill…

imxv, no SKILL.md

Quando usar

Desenhar o fluxo de atendimento ou de vendas do seu negócio
Mostrar como as partes de um sistema conversam
Ilustrar o README ou a documentação de um projeto
Transformar uma tabela de números num gráfico rápido
Converter uma pasta de diagramas pro mesmo tema

Depois de instalar, é só pedir assim

Desenha um fluxograma do meu funil: anúncio, página, checkout e e-mail de boas-vindas. Tema github-light, em PNG
Faz um diagrama de banco de dados com clientes, pedidos e produtos e salva em SVG
Converte todos os .mmd da pasta diagramas pra SVG com o tema tokyo-night

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 HubPassou
SocketAlerta
SnykAlerta

Perguntas

Como instalar a Pretty 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 Pretty 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?

Node.js no computador. Na primeira vez a skill tenta instalar as dependências sozinha; se não der, é rodar npm install na pasta dela. Não pede chave de API, conta nem navegador.

Roda no Codex e no Antigravity?

Sim. São scripts Node.js chamados pelo terminal, então qualquer assistente que lê skills e roda comandos consegue usar.

Desenha qualquer tipo de diagrama Mermaid?

Não. Trabalha com fluxograma, sequência, estados, classes, ER e gráfico XY. Se o renderizador não suportar alguma sintaxe, a skill avisa em vez de deixar a parte de fora sem dizer nada.

Levar essa skill

1x pretty-mermaidR$ 0,00

TotalR$ 0,00

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

Aprenda a usar

O que é o Claude Code (Claude CLI) e como começar
O que é o Claude Code (Claude CLI), pra que serve pra quem não programa, o que ele pede pra rodar e como se compara ao Codex, ao Antigravity e ao Cursor.