excalidraw-diagram-skill

Excalidraw Diagram Skill est un package de compétences pour agents de codage qui génère des diagrammes Excalidraw à partir de descriptions en langage naturel. Il est conçu pour les agents qui chargent des compétences depuis un répertoire `.claude/skills/`, comme Claude Code et OpenCode, et peut être copié dans un projet pour activer la génération de diagrammes. Le projet met l'accent sur des diagrammes qui « argumentent visuellement » plutôt que de simplement afficher des informations. Selon le README, les formes et les groupes de formes sont choisis pour refléter le concept représenté, comme des éventails pour les relations un-à-plusieurs, des frises chronologiques pour les séquences et la convergence pour l'agrégation, au lieu de grilles de cartes uniformes. Les diagrammes techniques peuvent inclure de vrais extraits de code et des charges utiles JSON comme preuves. Une caractéristique notable est la validation visuelle intégrée. Un pipeline de rendu basé sur Playwright permet à l'agent de voir sa propre sortie, de détecter des problèmes de mise en page tels que du texte qui se chevauche, des flèches mal alignées ou un espacement déséquilibré, et d'itérer avant de livrer le diagramme final. Les couleurs et le style de marque sont centralisés dans `references/color-palette.md`, donc remplacer ce fichier fait suivre à tous les diagrammes une palette différente. L'installation implique de cloner le dépôt et de le copier dans `.claude/skills/excalidraw-diagram`. La configuration du pipeline de rendu peut être déléguée à l'agent de codage en le pointant vers SKILL.md, ou effectuée manuellement avec `uv sync` et `uv run playwright install chromium` dans le répertoire des références. L'utilisation est ensuite aussi simple que de demander à l'agent de créer un diagramme, par exemple un montrant comment le protocole AG-UI diffuse des événements d'un agent IA vers une interface frontend ; la compétence gère le mappage des concepts, la mise en page, la génération JSON, le rendu et la validation visuelle. La structure du dépôt comprend SKILL.md pour la méthodologie de conception et le flux de travail, plus des références contenant la palette de couleurs, des modèles d'éléments, la documentation du schéma JSON, un rendu Python pour convertir les fichiers `.excalidraw` en PNG, un modèle de rendu HTML et des dépendances Python pour Playwright.