Diagram Design
Collection de 13 types de diagrammes éditoriaux pour Claude Code, architecture, flowchart, séquence, state machine, swimlane, Venn, pyramide… Génère des fichiers HTML+SVG self-contained sans JavaScript externe, sans build step, sans dépendances. Design system intégré (Instrument Serif + Geist, palette stone/rust, coordonnées 4px-grid, validation WCAG AA automatique). Au premier lancement, la skill fetch ton site pour extraire ta palette et tes fonts et les applique à tous tes diagrammes.
Forces
- 13 types structurels couverts (séquence, state machine, swimlane, ER, quadrant, Venn, pyramide…), un seul outil pour tous tes schémas
- Zéro dépendance externe : HTML+SVG self-contained, ouvre dans le browser directement sans build
- Onboarding par URL : la skill fetch ton site au premier lancement, extrait ta palette + fonts, valide le contraste WCAG AA, ton diagramme respecte ta charte dès la première génération
- Design system opinioné (no shadows, no rounded corners > 10px, coordonnées 4px-grid), résultat propre même sans designer dans la boucle
Limites
- Projet jeune, maintenu par une seule personne, bus factor faible, pérennité à surveiller
- Claude Code only (pas de MCP/API), exclusif à l'écosystème agent Claude
- L'onboarding URL ne fonctionne que si ton site public est accessible, sites privés ou localhost exclus
Pour qui
- Esquisses d'architecture système rapides sans ouvrir Figma, séquences d'API, state machines, swimlanes cross-équipes
- Documentation technique screenshot-ready (README, slides, Notion), rendu éditorial digne dès la première génération
- Schémas à charte : si ton produit a une identité visuelle, la skill applique ta palette automatiquement via URL onboarding