SI skill'lar, saytlar va ilovalar katalogiKutubxonam+ Taklif qilishTaklif

Diagram Design skill

Agentga oddiy so'z bilan diagramma buyuring: 45 turdagi, brendingizga mos, bitta HTML + SVG fayl. Soyasiz, editorial uslub. MIT litsenziya.

DizaynClaude CodeCodexGitHub CopilotCursorFactory DroidQoderPiGemini CLIClineWindsurfAmpMITHTML★ 66 271
GitHub'da ochish ↗

Tezkor o'rnatish

npx skills add https://github.com/cathrynlavery/diagram-design

Terminalda ishga tushiring. npx uchun Node.js kerak. Boshqa usullar quyidagi qo'llanmada.

Diagram Design nima

Diagram Design — agent skill bo'lib, diagrammalarni bitta mustaqil HTML fayl (ichida inline SVG) ko'rinishida chizadi. Jami 45 ta diagramma turi bor: architecture, flowchart, sequence, quadrant, Gantt, Sankey, Wardley map va boshqalar. Uslub editorial: soyalar yo'q, 1px chiziqlar, hamma koordinata 4px to'rda. Blog, hujjat yoki taqdimotga chop etiladigan diagramma kerak bo'lgan kishilarga mos. Litsenziya: MIT.

O'rnatish

Usul Buyruq Natija
Ko'pchilik agentlar (Cursor, Claude Code, Codex, Qoder, Copilot, Gemini CLI, Cline, Windsurf, Amp) npx skills add cathrynlavery/diagram-design Skill tanlangan agent papkalariga o'rnatiladi
Claude Code plagin /plugin marketplace add cathrynlavery/diagram-design va /plugin install diagram-design@diagram-design Yangilanishlar va slash buyruqlar
Codex codex plugin marketplace add cathrynlavery/diagram-design va codex plugin add diagram-design@diagram-design Codex plagini
GitHub Copilot copilot plugin marketplace add cathrynlavery/diagram-design va copilot plugin install diagram-design@diagram-design Skill va qo'shimcha imkoniyatlar
Factory Droid droid plugin marketplace add https://github.com/cathrynlavery/diagram-design va droid plugin install diagram-design@diagram-design --scope user Droid plagini
Pi pi install https://github.com/cathrynlavery/diagram-design Skill; keyin /reload
Qoder git clone qiling, so'ng qoder plugins validate ./diagram-design va qoder plugins install ./diagram-design Lokal plagin

Qo'shimcha:

  • Kiro uchun https://github.com/cathrynlavery/diagram-design/tree/main/skills/diagram-design manzilini import qiling.
  • OpenCode uchun skills/diagram-design/ papkasini .opencode/skills/diagram-design ga ko'chiring yoki symlink qiling.
  • Uslub qo'llanmasini o'zingiz tahrirlamoqchi bo'lsangiz, repoyi klonlab lokal yo'lni o'rnating (editable install).
  • Yangilash: npx skills update diagram-design.

Ish jarayoni

  1. Agentga kerakli diagrammani oddiy so'z bilan ayting.
  2. Agent turini tanlaydi va rejasini aytadi.
  3. Bitta .html fayl yoziladi. Uni ikki marta bosib brauzerda oching.
  4. Kerak bo'lsa, agentdan o'zgartirishni qayta so'rang yoki SVG'ni tahrirlang.

Amaliy misol

README'dagi so'rov namunalari:

  • "Make me an architecture diagram of my app: frontend, backend, database, Redis cache."
  • "I need a quadrant showing Q2 projects by impact vs effort."
  • "Give me a sequence of a bearer call with token refresh on 401."

Brendga moslash uchun:

  1. Agentga yozing: "Onboard diagram-design to https://yoursite.com".
  2. Agent saytdan palitra va shriftlarni oladi, ularni paper, ink, muted, accent, link rollariga bog'laydi.
  3. U o'zgarishlar farqini (diff) ko'rsatadi. Siz "yes, apply it" deb tasdiqlaysiz.
  4. Tokenlar references/style-guide.md ga yoziladi va keyingi barcha diagrammalar shu uslubda chiqadi.

Tokenlarni qo'lda ham o'zgartirsa bo'ladi: skills/diagram-design/references/style-guide.md jadvalini tahrirlang.

Muhim imkoniyatlar

  • Import: Mermaid, draw.io, Excalidraw va PlantUML fayllarini qayta chizadi.
  • Eksport: SVG yoki PNG ga eksport qilinadi.
  • Standart palitra: jet-black + tangerine. Brend moslanmasa, shu ishlatiladi.
  • Birinchi ishga tushirish: agar style-guide.md hali standart holatda bo'lsa, skill to'xtab so'raydi: onboarding, tokenlarni qo'lda kiritish yoki standartni qoldirish.
  • Kontrast tekshiruvi: ink ning paper ustidagi WCAG AA kontrasti tekshiriladi. Yetarli bo'lmasa, tuzatilgan qiymat taklif qilinadi.
  • Qulaylik: SVG'larda role="img", <title> va <desc> bor.
  • Oflayn shriftlar: odatda Google Fonts'dan Instrument Serif, Geist va Geist Mono yuklanadi, bu yagona tarmoq so'rovi. system fonts so'ralsa, hech qanday tarmoq so'rovi bo'lmaydi.
  • Slash buyruqlar: /export-diagram, /import-mermaid, /import-plantuml, /profile, /doctor (native paketlarda; Pi'da /import-excalidraw ham bor). npx skills add faqat skill'ning o'zini o'rnatadi.

Cheklovlar va maslahatlar

  • Natija sifati modelga bog'liq. Bir xil so'rov ikki marta turlicha joylashuv berishi mumkin.
  • Chiqish tahrirlanadigan manba format emas: PR'da diff qilib bo'lmaydi va canvas'da qutini sudrab bo'lmaydi.
  • Git'da yashaydigan, har sprintda o'zgaradigan hujjatlar uchun Mermaid qulayroq. Bu skill chop etiladigan diagramma uchun.
  • Falsafa: "eng yaxshi harakat — o'chirish". Bir diagrammada taxminan 9 tadan ortiq tugun bo'lsa, uni ikkiga bo'ling. Accent rangi faqat 1–2 asosiy elementga ishlatiladi.
  • Faqat ro'yxat yoki atribut taqqoslash uchun diagramma shart emas, jadval yetadi.
  • Yangi loyihada brendni bir marta moslab, keyin profil sifatida saqlash mumkin (references/profiles.md).
  • Rasmiy versiyalar faqat shu repodan keladi. Tarmoqqa nima yuborilishi PRIVACY.md da yozilgan.

Manba

github.com/cathrynlavery/diagram-design · Galereya · Sayt