Mermaid Diagrams skill

Você explica um processo ou sistema e o Claude devolve o diagrama em Mermaid, pronto pra aparecer no GitHub, no Notion ou no Obsidian.

por softaworks

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

Atualizada no GitHub em 5 de março de 2026. Dados conferidos em 26 de outubro de 2026, no skills.sh e no GitHub.

softaworks
mermaid-diagrams
Você explica um processo ou sistema e o Claude devolve o diagrama em Mermaid, pronto pra aparecer no GitHub, no Notion ou no Obsidian.Auditada5.100 instalações, grátis

O que ela faz

Ensina o Claude a desenhar diagramas com o Mermaid, um jeito de escrever o diagrama em texto que vira imagem. Ele escolhe o tipo certo pra cada caso: fluxograma pra processos e jornadas, sequência pra conversa entre sistemas, ER pra tabelas de banco, C4 pra arquitetura, além de estados, git, gantt e pizza.

A skill traz exemplos prontos e guias de cada tipo, com formas, ligações, cardinalidade e estilos. Ela orienta começar simples, usar nomes claros, fazer um diagrama por assunto e quebrar o que ficar grande demais. Dá pra mudar tema e cores e até deixar com cara de desenho à mão.

O texto vira diagrama sozinho no GitHub, GitLab, Notion, Obsidian e Confluence. Pra tirar um PNG ou SVG, a skill indica o Mermaid Live Editor ou o Mermaid CLI.

Nas palavras de quem fez

Comprehensive guide for creating software diagrams using Mermaid syntax. Use when users need to create, visualize, or document software through diagrams…

softaworks, no SKILL.md

Quando usar

Desenhar o funil de vendas ou a jornada do cliente num fluxograma
Mostrar como o site conversa com o pagamento e o envio de e-mail
Mapear as tabelas do banco de dados de um app
Montar um cronograma de lançamento em gantt
Documentar a arquitetura de um sistema pra quem chega no time

Depois de instalar, é só pedir assim

Desenha em Mermaid o caminho do cliente do anúncio até a compra, com os pontos onde ele pode desistir
Faz um diagrama de sequência de como o site manda o pedido pro pagamento e depois o e-mail de boas-vindas
Monta um gantt do lançamento de 30 dias com as tarefas que te passei

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 Diagrams 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 Diagrams, 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?

Só a skill: o Claude escreve o texto do diagrama. Pra ver como imagem, basta colar no GitHub, no Notion, no Obsidian ou no Mermaid Live Editor. Exportar PNG pelo terminal pede o Mermaid CLI, que se instala com npm.

Roda no Codex e no Antigravity?

Roda. A skill é só texto com a sintaxe e as boas práticas do Mermaid, então qualquer agente que leia skills aproveita.

Ela desenha no Figma ou no PowerPoint?

Não. O resultado é código Mermaid, que vira imagem nas ferramentas que entendem esse formato ou é exportado como PNG e SVG.

Levar essa skill

1x mermaid-diagramsR$ 0,00

TotalR$ 0,00

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

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.