مهارة ترسم 45 نوعًا من المخطّطات في ملف HTML وSVG واحد مستقل.
تتيح Diagram Design لوكيلك إنتاج مخطّطات بأسلوب تحريري: بنية أنظمة ومربّعات تحليل وتسلسلات وأنواع كثيرة غيرها. كل ناتج ملف .html واحد تفتحه بنقرتين. ويمكنها جلب ألوان موقعك وخطوطه لتطابق المخطّطات هويتك، والاستيراد من draw.io وMermaid وExcalidraw، والتصدير إلى PNG أو SVG.
Dans Claude Code, tapez ces commandes l’une après l’autre :
/plugin marketplace add cathrynlavery/diagram-designOu collez ce prompt dans Claude Code, qui s’occupe de l’installation avec vous :
Installe dans Claude Code les skills de « Diagram Design » (https://github.com/cathrynlavery/diagram-design). - Lis le README et suis la méthode d'installation qu'il recommande. Le README indique cette commande : `npx skills add cathrynlavery/diagram-design`. - Si l'installation passe par des commandes /plugin, donne-les-moi pour que je les tape ; sinon copie chaque dossier de skill (celui qui contient un SKILL.md) dans ~/.claude/skills. - Dis-moi ce que fait chaque commande avant de la lancer. - À la fin, liste les skills installées et propose-moi une première demande pour les essayer.
Une fois installé, essayez par exemple :
Make an architecture diagram of my app: frontend, backend, database, Redis cache.
I need a quadrant of Q2 projects by impact versus effort.
Give me a sequence diagram of a bearer-token call with refresh on 401.
Onboard diagram-design to https://yoursite.com.
1.0.0