Diagram Design

cathrynlavery/diagram-designRevisado por IA

O que faz

Uma skill que você instala dentro de um assistente de IA para programação (Claude Code, Codex, Cursor, Copilot e outros). Você descreve o diagrama com suas próprias palavras e o assistente escreve um único arquivo HTML autocontido com o desenho dentro, em um estilo editorial consistente: 45 tipos, de arquitetura e fluxogramas a Gantt, Sankey e organogramas. Ele pode copiar as cores e fontes do seu site para que os diagramas combinem com sua marca, redesenhar arquivos já existentes do draw.io, Mermaid ou Excalidraw, e salvar o resultado como SVG ou PNG. É preciso ter um assistente de IA, que normalmente exige um plano pago.

Facilidade de instalação

C · instalar 1 ou 2 ferramentas · Windows

Windows C
macOS C
Linux C

Em qualquer um dos três sistemas, primeiro é preciso ter um assistente de IA instalado, e depois um ou dois comandos: `npx skills add cathrynlavery/diagram-design` (que precisa do Node) ou, no Claude Code, `/plugin marketplace add` mais `/plugin install`. Os diagramas prontos são arquivos HTML simples que abrem com duplo clique. No Windows o README avisa que os links simbólicos precisam do Modo de Desenvolvedor, caso contrário o instalador faz cópias, e a exportação em PNG exige uma instalação extra (`pip install playwright && playwright install chromium`).

Números no GitHub

Estrelas: 63.485em 31 de out. de 2026
Downloads: —todas as versões
Crescimento: +2.107estrelas em 5 dias

Estrelas ao longo do tempo

Fatos

Roda em: Windows, macOS, Linux
Você precisa instalar: Outras ferramentas, Node.js
Espaço em disco: não determinado
Contas ou chaves: Nenhuma
Custo: Grátis, a API é paga · A skill é gratuita (MIT). Ela só funciona dentro de um assistente de IA, que normalmente exige um plano pago ou uso pago de API, e cada diagrama consome parte dessa cota.
Licença: MIT (Permissiva)
Pode substituir: Lucidchart, Visio, Figma
Última atualização: 27 de out. de 2026

Sinais de risco (4)

InfoLê o seu site para extrair a identidade visual
Fluxo de integração do README: "onboard diagram-design to https://yoursite.com" → "fetches the homepage → extracts the dominant palette + font stack". O assistente visita um site que você indica e grava as cores em references/style-guide.md. O README aponta para o PRIVACY.md para saber o que a skill envia pela rede.
revisão por IA
InfoOs diagramas baixam o Google Fonts
README, Offline fonts: "By default a diagram loads Instrument Serif, Geist and Geist Mono from Google Fonts, the only network request it makes." Se você pedir fontes do sistema, o arquivo fica totalmente offline.
revisão por IA
InfoAviso sobre listagens copiadas
README Install: "Official builds come only from this repository. LittleMight, Cathryn Lavery's company, publishes the plugin directory listings; a listing under any other name is an unofficial copy."
revisão por IA
InfoOs resultados variam entre execuções
README, How it compares: "The downsides are real. Output quality depends on the model you run it with, and the same prompt can lay out differently twice. The result is not an editable source format: there is no text to diff in a pull request and no canvas to drag a box on."
revisão por IA

As evidências aparecem no idioma original.

O que o Radar não conseguiu verificar

O quão bons são os diagramas com seu próprio assistente e modelo, já que o autor diz que o resultado depende dos dois
Se a configuração de marca realmente identifica as cores e fontes certas de um site informado
O que a skill e os arquivos gerados enviam pela rede, além da solicitação ao Google Fonts
Se cada ambiente listado (Cursor, Copilot, Qoder, Pi, Kiro e os demais) instala como descrito, especialmente no Windows
Quanto do seu plano de IA um diagrama consome