مهارة ترسم 45 نوعًا من المخطّطات في ملف HTML وSVG واحد مستقل.
تتيح Diagram Design لوكيلك إنتاج مخطّطات بأسلوب تحريري: بنية أنظمة ومربّعات تحليل وتسلسلات وأنواع كثيرة غيرها. كل ناتج ملف .html واحد تفتحه بنقرتين. ويمكنها جلب ألوان موقعك وخطوطه لتطابق المخطّطات هويتك، والاستيراد من draw.io وMermaid وExcalidraw، والتصدير إلى PNG أو SVG.
In Claude Code, type these commands one after the other:
/plugin marketplace add cathrynlavery/diagram-designOr paste this prompt into Claude Code and let it handle the installation with you:
Install the agent skills of “Diagram Design” (https://github.com/cathrynlavery/diagram-design) in Claude Code. - Read the README and follow the installation method it recommends. The README documents this command: `npx skills add cathrynlavery/diagram-design`. - If it requires /plugin commands, give them to me to type myself; otherwise copy each skill folder (the one containing a SKILL.md) into ~/.claude/skills. - Tell me what each command does before running it. - When done, list the installed skills and suggest a first request to try them.
Once installed, try for example:
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