design-doc-mermaid: desenhar Mermaid e documentos de desenho no Claude Code

Para quem

Encaixa se quiser desenhar diagramas Mermaid e escrever documentos de desenho no Claude Code. Oficialmente: é um conjunto poderoso de competências Claude Code que cria diagramas Mermaid e documentos de desenho com guias carregados a pedido, diagramas gerados a partir de código e ferramentas Python.

Encaixa melhor se já tem um fluxo (por exemplo registo mais verificação de e-mail) ou já tem código e quer ver um diagrama primeiro. Não encaixa se ainda não está pronto para clonar o repositório para ~/.claude/skills.

Antes de começar tem de conseguir usar git clone e aceitar este único caminho oficial de instalação manual. Não misture outro comando de mercado à primeira.

Primeira tentativa em 3 minutos

Siga apenas a instalação por clone do original. Na primeira vez, produza um diagrama na conversa; ainda não escreva um documento de desenho no repositório.

Pré-requisitos: esta máquina já tem git e o Claude Code carrega competências de ~/.claude/skills. Na primeira vez, não sobrescreva documentos de produção.

Local de instalação: entre primeiro no diretório de competências e depois clone o repositório oficial.

cd ~/.claude/skills
git clone https://github.com/SpillwaveSolutions/design-doc-mermaid.git

Página do repositório oficial:

https://github.com/spillwavesolutions/design-doc-mermaid

Disparo de baixo risco: após instalar, use a frase de exemplo do original na conversa: Create an activity diagram for user registration with email verification. Primeiro peça Mermaid só na conversa, sem escrever ficheiro. Oficialmente SKILL.md é o coordenador principal com árvore de decisão; se o assistente começar a chamar scripts não nomeados, confirme primeiro os efeitos secundários.

Sinal de sucesso: ~/.claude/skills/design-doc-mermaid existe e contém SKILL.md, e na conversa aparece Mermaid de um diagrama de atividade. Se o for guardar como documento, confirme o caminho antes de escrever.

Exemplos de uso

Exemplo 1: desenhar um diagrama de atividade com o exemplo oficial. Diga ao assistente Create an activity diagram for user registration with email verification. Encaixa se quiser descrever um fluxo de registo e verificação de e-mail. A evidência só dá esta frase de utilizador; não nomeia um ficheiro de guia. Veja primeiro o diagrama na conversa e depois decida se o escreve em disco.

Exemplo 2: gerar um diagrama a partir de código existente. As capacidades oficiais incluem code-to-diagram generation. Encaixa se já tem código e quer ver um diagrama primeiro. A evidência não diz que línguas são suportadas nem se a origem é alterada. Gere em só leitura a partir do seu próprio código; se uma ferramenta Python for escrever um ficheiro, confirme primeiro o local de saída.

Limites

O caminho principal é clonar para ~/.claude/skills. O original também tem skilz install SpillwaveSolutions_design-doc-mermaid/design-doc-mermaid. Na primeira vez não faça os dois e não aplique um comando de mercado a um ambiente não escrito.

O único ficheiro nomeado é SKILL.md (coordenador principal, com árvore de decisão). Não complete por si outros nomes de guia, de script ou caminhos de competência.

Guias carregados a pedido e ferramentas Python são mencionados, mas sem inventário. Não assuma que instala sozinho um runtime Mermaid ou envia documentos.

Oficialmente este conjunto está escrito só como competência Claude Code; não há passos para outros ambientes.