Diagram Design
Collection de 39 types de diagrammes éditoriaux pour Claude Code, Codex, Factory Droid et Pi : architecture, flowchart, séquence, state machine, swimlane, Venn, pyramide, Gantt, Sankey, Wardley map, carte de parcours, schéma de base de données… Génère des fichiers HTML+SVG self-contained sans JavaScript externe, sans build step, sans dépendances, avec export PNG. 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. Elle sait aussi reprendre un diagramme Mermaid ou draw.io existant et le redessiner dans ce système visuel.
Forces
- 39 types de diagrammes couverts (séquence, state machine, swimlane, ER, quadrant, Venn, pyramide, Gantt, Sankey…), 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
- Vit dans ton agent de code (Claude Code, Codex, Factory Droid, Pi) : pas de MCP ni d'API, rien pour qui ne travaille pas avec un agent
- 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