Repolode
Enviar
coleam00

coleam00/excalidraw-diagram-skill

Skill de programação que permite ao Claude Code e a agentes semelhantes gerar diagramas do Excalidraw a partir de descrições em linguagem natural.

Alternativa open source a:Lucidchart

Ver no GitHub
Estrelas
5,043
Forks
584
Issues abertas
34
Último commit
há 8 meses

O que é?

Este skill permite que agentes de programação, como Claude Code e OpenCode, criem diagramas do Excalidraw a partir de descrições em linguagem natural. O agente cuida do mapeamento de conceitos, do layout, da geração de JSON e da renderização. Assim, o usuário pode pedir um diagrama de um sistema ou protocolo e receber um arquivo editável do Excalidraw.

O projeto prioriza a estrutura dos diagramas, em vez de usar apenas caixas e setas. As formas são organizadas para representar o conceito, como ramificações para relações de um para muitos, linhas do tempo para sequências e convergências para agregações. Diagramas técnicos também podem incluir trechos de código e exemplos de payloads JSON.

Um pipeline de renderização baseado em Playwright permite que o agente visualize o próprio resultado, verifique se há texto sobreposto ou setas desalinhadas e faça ajustes antes de entregar o diagrama. As cores e os estilos de marca ficam definidos em um único arquivo de paleta, que pode ser substituído.

Recursos principais

  • 01Gera diagramas do Excalidraw a partir de descrições em linguagem natural.
  • 02Organiza as formas de acordo com o conceito, com ramificações, linhas do tempo e convergências, por exemplo.
  • 03Renderiza o resultado com Playwright para que o agente possa verificar e corrigir problemas de layout.
  • 04Inclui trechos de código e exemplos de payloads JSON em diagramas técnicos.
  • 05Centraliza as cores da marca em um único arquivo de paleta, facilitando a personalização.

Casos de uso

  • Documentar a arquitetura de um sistema ou o fluxo de dados durante uma sessão com um agente de programação.
  • Ilustrar a sequência de uma API ou de um protocolo para um documento de design.
  • Criar diagramas alinhados à identidade visual da marca editando o arquivo de paleta de cores.

Início rápido

  1. 1

    Clone o repositório

    git clone https://github.com/coleam00/excalidraw-diagram-skill.git
  2. 2

    Copie a skill para o diretório skills do seu projeto

    cp -r excalidraw-diagram-skill .claude/skills/excalidraw-diagram
  3. 3

    Instale as dependências do renderizador e o Chromium

    cd .claude/skills/excalidraw-diagram/references && uv sync && uv run playwright install chromium
  4. 4

    Peça ao seu agente de programação para criar um diagrama

Antes de usar

  • O README não informa uma licença, então os direitos de uso não estão claros.
  • O pipeline de renderização requer uv e Playwright com o Chromium instalado.

Tópicos

#excalidraw#diagrams#claude-code#agent-skills#playwright#visualization

Perguntas frequentes

O que é excalidraw-diagram-skill?
Skill de programação que permite ao Claude Code e a agentes semelhantes gerar diagramas do Excalidraw a partir de descrições em linguagem natural. Este skill permite que agentes de programação, como Claude Code e OpenCode, criem diagramas do Excalidraw a partir de descrições em linguagem natural. O agente cuida do mapeamento de conceitos, do layout, da geração de JSON e da renderização. Assim, o usuário pode pedir um diagrama de um sistema ou protocolo e receber um arquivo editável do Excalidraw.
excalidraw-diagram-skill é gratuito? Qual é a licença?
excalidraw-diagram-skill não declara licença. O código é público, mas sem licença você não tem permissão explícita para reutilizá-lo; fale com o autor antes de depender dele.
excalidraw-diagram-skill ainda é mantido?
Sem commits há mais de 6 meses. O último commit de excalidraw-diagram-skill foi em 1 de mar. de 2026.
Para que posso usar excalidraw-diagram-skill?
Documentar a arquitetura de um sistema ou o fluxo de dados durante uma sessão com um agente de programação. Ilustrar a sequência de uma API ou de um protocolo para um documento de design. Criar diagramas alinhados à identidade visual da marca editando o arquivo de paleta de cores.
Como instalar excalidraw-diagram-skill?
Clone o repositório: git clone https://github.com/coleam00/excalidraw-diagram-skill.git Copie a skill para o diretório skills do seu projeto: cp -r excalidraw-diagram-skill .claude/skills/excalidraw-diagram Instale as dependências do renderizador e o Chromium: cd .claude/skills/excalidraw-diagram/references && uv sync && uv run playwright install chromium Peça ao seu agente de programação para criar um diagrama
Onde consigo excalidraw-diagram-skill?
O código-fonte e as instruções de instalação estão no GitHub: https://github.com/coleam00/excalidraw-diagram-skill

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

Projetos relacionados