diagram-design

Pegue a skill

Por que eu uso: Faz diagramas claros para explicar processos em reuniões.

Versão adaptada para o português, resumida, de uma skill de Cathryn Lavery. O texto traz o crédito, o link do original e a licença completa.

Onde colar

Quando usar

• Explicar um processo ou uma estrutura melhor com imagem do que com texto
• Montar diagrama para reunião, documento ou apresentação

Texto da skill, com crédito e licença

---
name: diagram-design
description: Cria diagramas em HTML com SVG: fluxogramas, linhas do tempo, organogramas, funis, matrizes e mais 40 tipos.
---

# diagram-design

Cria diagramas em HTML com SVG: fluxogramas, linhas do tempo, organogramas, funis, matrizes e mais 40 tipos.

## Quando usar
- Explicar um processo ou uma estrutura melhor com imagem do que com texto
- Montar diagrama para reunião, documento ou apresentação

## O que faz
Gera o diagrama como um arquivo HTML com SVG embutido e um sistema visual editorial. São 45 tipos de visual: fluxograma, sequência, linha do tempo, raias, quadrante, organograma, pirâmide e funil, Venn, Gantt, cascata, mapa de calor, entre outros.

## Antes do primeiro diagrama
- Em projeto com marca, confira se o guia de estilo foi personalizado. Não entregue diagrama com o visual padrão num projeto que tem identidade própria.

## Regra principal
- O melhor movimento quase sempre é cortar. Menos caixas, menos setas, menos texto.
- Use diagrama só quando quem lê vai entender mais com a imagem do que com texto, tabela ou lista.

## Como escolher o tipo
1. Se o que importa é comportamento, estado ou risco, escolha primeiro o padrão de comportamento e depois o tipo de visual mais próximo.
2. Se não, escolha direto pelo que você quer mostrar (sequência, hierarquia, comparação, proporção, tempo).
3. Antes de desenhar, diga numa mensagem curta: o tipo escolhido, o tamanho e o que vai ficar de fora. Espere o ok.

## Regras de desenho
- Conectores só em ângulo reto, com cantos arredondados. Nada de linha diagonal entre caixas fora do eixo.
- Tudo numa grade de 4 px: posições, larguras, alturas, espaços.
- Respeite o limite de complexidade por diagrama. Se passou, divida em dois.
- Cores e fontes vêm do guia de estilo, nunca escritas soltas no código.

## Evite (cara de diagrama feito por IA)
- Caixas decorativas sem função, sombras e gradientes, setas cruzando, legenda que repete o que já está escrito.

Os guias de referência (tipos, primitivas, guia de estilo) estão no repositório original.

---

## Crédito e licença

Adaptado de Cathryn Lavery. Original: https://github.com/cathrynlavery/diagram-design/tree/HEAD/skills/diagram-design

Aviso de modificação: Esta é uma versão adaptada da skill original: traduzida para o português do Brasil, resumida e reescrita por Bruno Silva em 29/10/2026. Partes do original foram cortadas ou mudadas. O original continua disponível no link acima.

Licença do original: MIT. Texto completo abaixo, como está no repositório original.

## Licença (MIT)

MIT License

Copyright (c) 2025 Cathryn Lavery

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

Instalar o original

No terminal, com Node.js instalado:

npx skills add cathrynlavery/diagram-design --skill diagram-design