Repolode
Enviar
cathrynlavery

cathrynlavery/diagram-design

Uma skill de agente que cria diagramas editoriais em um único arquivo HTML + SVG autocontido, com 45 tipos de diagrama e correspondência com a identidade da marca.

Alternativa open source a:FigmaLucidchart

Ver no GitHubSite
Estrelas
58,066
Forks
3,725
Issues abertas
47
Último commit
há 4 dias

O que é?

Diagram Design é uma skill de agente para agentes de programação como Claude Code, Codex, GitHub Copilot, Cursor e Pi. Você descreve o diagrama em linguagem simples, e o agente escolhe um entre 45 tipos de diagrama e cria um único arquivo HTML com SVG inline, que abre diretamente no navegador, sem etapa de build nem JavaScript.

A skill aplica um estilo editorial bem definido: uma cor de destaque discreta, linhas finas de 1 px, sem sombras e coordenadas em uma grade de 4 px. Durante a configuração inicial, ela pode ler as cores e as fontes do seu site para que todos os diagramas posteriores sigam a identidade da sua marca, e verifica o contraste WCAG AA antes de definir os tokens.

O projeto também pode redesenhar arquivos existentes do draw.io, Mermaid e Excalidraw nesse estilo e exportar diagramas para SVG ou PNG. O agente decide o layout, em vez de um mecanismo automático, então o resultado pode variar entre execuções.

Recursos principais

  • 01Gera um único arquivo HTML autocontido com SVG inline, que abre em qualquer navegador.
  • 02Oferece suporte a 45 tipos de diagrama, incluindo arquitetura, sequência, fluxograma, ER, Gantt e gráficos.
  • 03Extrai a paleta de cores e as fontes de um site para aplicar a identidade da marca a todos os diagramas.
  • 04Redesenha arquivos existentes do draw.io, Mermaid e Excalidraw no mesmo estilo.
  • 05Exporta diagramas para SVG ou PNG, com um modo opcional de fontes offline.

Casos de uso

  • Criar diagramas de arquitetura ou sequência para uma postagem técnica em blog ou página de documentação.
  • Transformar um diagrama do Mermaid ou draw.io em um visual refinado para slides.
  • Manter os diagramas de um projeto alinhados à identidade da marca no site da empresa.
  • Criar gráficos de quadrantes, Venn ou linhas do tempo para apresentações.

Início rápido

  1. 1

    Instale a skill com o skills CLI

    npx skills add cathrynlavery/diagram-design
  2. 2

    No Claude Code, adicione o marketplace de plugins (opcional)

    /plugin marketplace add cathrynlavery/diagram-design
  3. 3

    No Claude Code, instale o plugin (opcional)

    /plugin install diagram-design@diagram-design
  4. 4

    Peça ao seu agente, com palavras simples, para criar um diagrama; ele vai gerar um único arquivo .html que você pode abrir no navegador

Antes de usar

  • A qualidade do resultado depende do modelo usado, e o mesmo prompt pode gerar layouts diferentes.
  • O resultado não está em um formato-fonte editável, então não há texto para comparar diferenças nem um canvas para editar diretamente.
  • Segundo o README, as atualizações do pacote podem substituir o guia de estilo da skill se você personalizá-lo por meio de uma instalação gerenciada.

Tópicos

#agent-skills#diagrams#svg#data-visualization#claude-code#html#mermaid#codex#drawio

Perguntas frequentes

O que é diagram-design?
Uma skill de agente que cria diagramas editoriais em um único arquivo HTML + SVG autocontido, com 45 tipos de diagrama e correspondência com a identidade da marca. Diagram Design é uma skill de agente para agentes de programação como Claude Code, Codex, GitHub Copilot, Cursor e Pi. Você descreve o diagrama em linguagem simples, e o agente escolhe um entre 45 tipos de diagrama e cria um único arquivo HTML com SVG inline, que abre diretamente no navegador, sem etapa de build nem JavaScript.
diagram-design é gratuito? Qual é a licença?
diagram-design é open source sob a licença MIT. Confira os termos da licença antes de usá-lo em produtos comerciais.
diagram-design ainda é mantido?
Manutenção ativa. O último commit de diagram-design foi em 16 de out. de 2026.
Para que posso usar diagram-design?
Criar diagramas de arquitetura ou sequência para uma postagem técnica em blog ou página de documentação. Transformar um diagrama do Mermaid ou draw.io em um visual refinado para slides. Manter os diagramas de um projeto alinhados à identidade da marca no site da empresa. Criar gráficos de quadrantes, Venn ou linhas do tempo para apresentações.
Como instalar diagram-design?
Instale a skill com o skills CLI: npx skills add cathrynlavery/diagram-design No Claude Code, adicione o marketplace de plugins (opcional): /plugin marketplace add cathrynlavery/diagram-design No Claude Code, instale o plugin (opcional): /plugin install diagram-design@diagram-design Peça ao seu agente, com palavras simples, para criar um diagrama; ele vai gerar um único arquivo .html que você pode abrir no navegador
Onde consigo diagram-design?
O código-fonte e as instruções de instalação estão no GitHub: https://github.com/cathrynlavery/diagram-design

Resumo gerado por IA a partir do README do projeto. As estatísticas do GitHub são atualizadas diariamente.

Projetos relacionados