Mermaid Skill

O Claude escreve o diagrama em texto, valida, confere a imagem e entrega PNG ou SVG, sem você posicionar caixa nenhuma.

instalações: 573
estrelas no GitHub: 91
No skills.sh desde: setembro de 2026
Licença: Sem licença declarada

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

agents365-ai
mermaid-skill
O Claude escreve o diagrama em texto, valida, confere a imagem e entrega PNG ou SVG, sem você posicionar caixa nenhuma.Auditada573 instalações, grátis

O que ela faz

Gera arquivos .mmd, o formato de texto do Mermaid, e exporta em PNG, SVG ou PDF. O posicionamento é automático, ninguém mexe em coordenada. São 17 tipos, entre fluxograma, sequência, classes, banco de dados (ER), estados, Gantt, mapa mental, jornada do usuário e arquitetura de nuvem.

Antes de exportar, valida a sintaxe no Kroki, um serviço online que só pede curl. Depois olha a imagem gerada, corrige texto cortado, diagrama apertado ou orientação errada e mostra pra você pedir ajustes. Quando você aprova, ou depois de cinco rodadas, gera um link do mermaid.live pra mexer no navegador.

No modo repositório, varre o código atrás de tabelas, rotas de API e ciclos de status, propõe um diagrama pra cada achado e junta todos numa página index.html única.

Nas palavras de quem fez

Generate Mermaid diagrams (.mmd) and export to PNG/SVG/PDF using mmdc CLI or Kroki API. USE THIS SKILL when user mentions diagram, flowchart, sequence diagram,…

agents365-ai, no SKILL.md

Quando usar

Explicar um processo da empresa num fluxograma
Mostrar o cronograma de um projeto em Gantt
Desenhar o banco de dados de um app antes de construir
Mapear a arquitetura de um código que você herdou

Depois de instalar, é só pedir assim

/mermaid-skill faz um fluxograma do meu funil: anúncio, página, checkout e e-mail de boas-vindas
/mermaid-skill desenha o diagrama do banco de dados desse projeto e exporta em PNG
/mermaid-skill mapeia a arquitetura desse repositório e junta tudo numa página só

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
SocketPassou
SnykPassou

Perguntas

Como instalar a Mermaid Skill 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 Mermaid Skill, 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.

Precisa instalar alguma coisa?

Não necessariamente. Pelo Kroki basta curl e internet, e sai PNG ou SVG. Pra PDF ou pra exportar sem internet, precisa do mmdc (npm install -g @mermaid-js/mermaid-cli) e de um Chrome headless.

Ela entra sozinha quando falo de diagrama?

Não. Ela vem marcada pra não ser chamada automaticamente, então você chama pelo nome, com /mermaid-skill.

Quando é melhor outra ferramenta?

Pra posição exata, ícone de marca ou muito estilo, o próprio SKILL.md manda usar draw.io. Pra visual de rabisco à mão, Excalidraw ou tldraw. Pra UML rígido, PlantUML.

Levar essa skill

1x mermaid-skillR$ 0,00

TotalR$ 0,00

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

Aprenda a usar

Proposta Comercial de Site: modelo que fecha
Como montar uma proposta comercial de criação de site que o cliente aprova no WhatsApp: por que mostrar o site pronto vende mais que PDF de 15 páginas.