[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-cathrynlavery-diagram-design":3},{"slug":4,"name":5,"summary":6,"owner":7,"repo":8,"repo_url":9,"avatar_url":10,"stars":11,"views":12,"language":13,"license":14,"ai_tools":15,"topics":27,"published_at":36,"updated_at":37,"category":38,"category_slug":39,"description":40,"github_synced_at":41,"install":42,"guide_html":45,"toc":46},"cathrynlavery-diagram-design","Diagram Design skill","Agentga oddiy so'z bilan diagramma buyuring: 45 turdagi, brendingizga mos, bitta HTML + SVG fayl. Soyasiz, editorial uslub. MIT litsenziya.","cathrynlavery","diagram-design","https:\u002F\u002Fgithub.com\u002Fcathrynlavery\u002Fdiagram-design","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F50469282?v=4",66271,0,"HTML","MIT",[16,17,18,19,20,21,22,23,24,25,26],"Claude Code","Codex","GitHub Copilot","Cursor","Factory Droid","Qoder","Pi","Gemini CLI","Cline","Windsurf","Amp",[28,29,30,31,32,33,34,35],"agent-skills","claude-code","codex","data-visualization","diagrams","drawio","mermaid","svg","2026-11-10T16:17:14.000000Z","2026-11-10T16:18:06.000000Z","Dizayn","dizayn","Editorial diagram design for Claude Code, Codex, GitHub Copilot, Cursor, Factory Droid, Qoder, and Pi. 45 diagram types. Self-contained HTML + SVG. No shadows. No Mermaid slop.","2026-11-10T16:17:40.000000Z",{"repo_url":9,"skills":43,"custom":44},[8],null,"\u003Ch2 id=\"diagram-design-nima\">Diagram Design nima\u003C\u002Fh2>\n\u003Cp>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.\u003C\u002Fp>\n\u003Ch2 id=\"ornatish\">O'rnatish\u003C\u002Fh2>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>Usul\u003C\u002Fth>\n\u003Cth>Buyruq\u003C\u002Fth>\n\u003Cth>Natija\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\n\u003Ctr>\n\u003Ctd>Ko'pchilik agentlar (Cursor, Claude Code, Codex, Qoder, Copilot, Gemini CLI, Cline, Windsurf, Amp)\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>npx skills add cathrynlavery\u002Fdiagram-design\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>Skill tanlangan agent papkalariga o'rnatiladi\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Claude Code plagin\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>\u002Fplugin marketplace add cathrynlavery\u002Fdiagram-design\u003C\u002Fcode> va \u003Ccode>\u002Fplugin install diagram-design@diagram-design\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>Yangilanishlar va slash buyruqlar\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Codex\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>codex plugin marketplace add cathrynlavery\u002Fdiagram-design\u003C\u002Fcode> va \u003Ccode>codex plugin add diagram-design@diagram-design\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>Codex plagini\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>GitHub Copilot\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>copilot plugin marketplace add cathrynlavery\u002Fdiagram-design\u003C\u002Fcode> va \u003Ccode>copilot plugin install diagram-design@diagram-design\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>Skill va qo'shimcha imkoniyatlar\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Factory Droid\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>droid plugin marketplace add https:\u002F\u002Fgithub.com\u002Fcathrynlavery\u002Fdiagram-design\u003C\u002Fcode> va \u003Ccode>droid plugin install diagram-design@diagram-design --scope user\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>Droid plagini\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Pi\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>pi install https:\u002F\u002Fgithub.com\u002Fcathrynlavery\u002Fdiagram-design\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>Skill; keyin \u003Ccode>\u002Freload\u003C\u002Fcode>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Qoder\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>git clone\u003C\u002Fcode> qiling, so'ng \u003Ccode>qoder plugins validate .\u002Fdiagram-design\u003C\u002Fcode> va \u003Ccode>qoder plugins install .\u002Fdiagram-design\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>Lokal plagin\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n\u003Cp>Qo'shimcha:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>Kiro uchun \u003Ccode>https:\u002F\u002Fgithub.com\u002Fcathrynlavery\u002Fdiagram-design\u002Ftree\u002Fmain\u002Fskills\u002Fdiagram-design\u003C\u002Fcode> manzilini import qiling.\u003C\u002Fli>\n\u003Cli>OpenCode uchun \u003Ccode>skills\u002Fdiagram-design\u002F\u003C\u002Fcode> papkasini \u003Ccode>.opencode\u002Fskills\u002Fdiagram-design\u003C\u002Fcode> ga ko'chiring yoki symlink qiling.\u003C\u002Fli>\n\u003Cli>Uslub qo'llanmasini o'zingiz tahrirlamoqchi bo'lsangiz, repoyi klonlab lokal yo'lni o'rnating (editable install).\u003C\u002Fli>\n\u003Cli>Yangilash: \u003Ccode>npx skills update diagram-design\u003C\u002Fcode>.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch2 id=\"ish-jarayoni\">Ish jarayoni\u003C\u002Fh2>\n\u003Col>\n\u003Cli>Agentga kerakli diagrammani oddiy so'z bilan ayting.\u003C\u002Fli>\n\u003Cli>Agent turini tanlaydi va rejasini aytadi.\u003C\u002Fli>\n\u003Cli>Bitta \u003Ccode>.html\u003C\u002Fcode> fayl yoziladi. Uni ikki marta bosib brauzerda oching.\u003C\u002Fli>\n\u003Cli>Kerak bo'lsa, agentdan o'zgartirishni qayta so'rang yoki SVG'ni tahrirlang.\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Ch2 id=\"amaliy-misol\">Amaliy misol\u003C\u002Fh2>\n\u003Cp>README'dagi so'rov namunalari:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cem>"Make me an architecture diagram of my app: frontend, backend, database, Redis cache."\u003C\u002Fem>\u003C\u002Fli>\n\u003Cli>\u003Cem>"I need a quadrant showing Q2 projects by impact vs effort."\u003C\u002Fem>\u003C\u002Fli>\n\u003Cli>\u003Cem>"Give me a sequence of a bearer call with token refresh on 401."\u003C\u002Fem>\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>Brendga moslash uchun:\u003C\u002Fp>\n\u003Col>\n\u003Cli>Agentga yozing: \u003Cem>"Onboard diagram-design to \u003Ca href=\"https:\u002F\u002Fyoursite.com\" rel=\"noopener nofollow ugc\" target=\"_blank\">https:\u002F\u002Fyoursite.com\u003C\u002Fa>"\u003C\u002Fem>.\u003C\u002Fli>\n\u003Cli>Agent saytdan palitra va shriftlarni oladi, ularni \u003Ccode>paper\u003C\u002Fcode>, \u003Ccode>ink\u003C\u002Fcode>, \u003Ccode>muted\u003C\u002Fcode>, \u003Ccode>accent\u003C\u002Fcode>, \u003Ccode>link\u003C\u002Fcode> rollariga bog'laydi.\u003C\u002Fli>\n\u003Cli>U o'zgarishlar farqini (diff) ko'rsatadi. Siz \u003Cem>"yes, apply it"\u003C\u002Fem> deb tasdiqlaysiz.\u003C\u002Fli>\n\u003Cli>Tokenlar \u003Ccode>references\u002Fstyle-guide.md\u003C\u002Fcode> ga yoziladi va keyingi barcha diagrammalar shu uslubda chiqadi.\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Cp>Tokenlarni qo'lda ham o'zgartirsa bo'ladi: \u003Ccode>skills\u002Fdiagram-design\u002Freferences\u002Fstyle-guide.md\u003C\u002Fcode> jadvalini tahrirlang.\u003C\u002Fp>\n\u003Ch2 id=\"muhim-imkoniyatlar\">Muhim imkoniyatlar\u003C\u002Fh2>\n\u003Cul>\n\u003Cli>\u003Cstrong>Import:\u003C\u002Fstrong> Mermaid, draw.io, Excalidraw va PlantUML fayllarini qayta chizadi.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Eksport:\u003C\u002Fstrong> SVG yoki PNG ga eksport qilinadi.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Standart palitra:\u003C\u002Fstrong> jet-black + tangerine. Brend moslanmasa, shu ishlatiladi.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Birinchi ishga tushirish:\u003C\u002Fstrong> agar \u003Ccode>style-guide.md\u003C\u002Fcode> hali standart holatda bo'lsa, skill to'xtab so'raydi: onboarding, tokenlarni qo'lda kiritish yoki standartni qoldirish.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Kontrast tekshiruvi:\u003C\u002Fstrong> \u003Ccode>ink\u003C\u002Fcode> ning \u003Ccode>paper\u003C\u002Fcode> ustidagi WCAG AA kontrasti tekshiriladi. Yetarli bo'lmasa, tuzatilgan qiymat taklif qilinadi.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Qulaylik:\u003C\u002Fstrong> SVG'larda \u003Ccode>role="img"\u003C\u002Fcode>, \u003Ccode><title>\u003C\u002Fcode> va \u003Ccode><desc>\u003C\u002Fcode> bor.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Oflayn shriftlar:\u003C\u002Fstrong> odatda Google Fonts'dan Instrument Serif, Geist va Geist Mono yuklanadi, bu yagona tarmoq so'rovi. \u003Cstrong>system fonts\u003C\u002Fstrong> so'ralsa, hech qanday tarmoq so'rovi bo'lmaydi.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Slash buyruqlar:\u003C\u002Fstrong> \u003Ccode>\u002Fexport-diagram\u003C\u002Fcode>, \u003Ccode>\u002Fimport-mermaid\u003C\u002Fcode>, \u003Ccode>\u002Fimport-plantuml\u003C\u002Fcode>, \u003Ccode>\u002Fprofile\u003C\u002Fcode>, \u003Ccode>\u002Fdoctor\u003C\u002Fcode> (native paketlarda; Pi'da \u003Ccode>\u002Fimport-excalidraw\u003C\u002Fcode> ham bor). \u003Ccode>npx skills add\u003C\u002Fcode> faqat skill'ning o'zini o'rnatadi.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch2 id=\"cheklovlar-va-maslahatlar\">Cheklovlar va maslahatlar\u003C\u002Fh2>\n\u003Cul>\n\u003Cli>Natija sifati modelga bog'liq. Bir xil so'rov ikki marta turlicha joylashuv berishi mumkin.\u003C\u002Fli>\n\u003Cli>Chiqish tahrirlanadigan manba format emas: PR'da diff qilib bo'lmaydi va canvas'da qutini sudrab bo'lmaydi.\u003C\u002Fli>\n\u003Cli>Git'da yashaydigan, har sprintda o'zgaradigan hujjatlar uchun Mermaid qulayroq. Bu skill chop etiladigan diagramma uchun.\u003C\u002Fli>\n\u003Cli>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.\u003C\u002Fli>\n\u003Cli>Faqat ro'yxat yoki atribut taqqoslash uchun diagramma shart emas, jadval yetadi.\u003C\u002Fli>\n\u003Cli>Yangi loyihada brendni bir marta moslab, keyin profil sifatida saqlash mumkin (\u003Ccode>references\u002Fprofiles.md\u003C\u002Fcode>).\u003C\u002Fli>\n\u003Cli>Rasmiy versiyalar faqat shu repodan keladi. Tarmoqqa nima yuborilishi \u003Ccode>PRIVACY.md\u003C\u002Fcode> da yozilgan.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch2 id=\"manba\">Manba\u003C\u002Fh2>\n\u003Cp>\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fcathrynlavery\u002Fdiagram-design\" rel=\"noopener nofollow ugc\" target=\"_blank\">github.com\u002Fcathrynlavery\u002Fdiagram-design\u003C\u002Fa> · \u003Ca href=\"https:\u002F\u002Fcathrynlavery.github.io\u002Fdiagram-design\u002F\" rel=\"noopener nofollow ugc\" target=\"_blank\">Galereya\u003C\u002Fa> · \u003Ca href=\"https:\u002F\u002Fdiagramdesign.dev\" rel=\"noopener nofollow ugc\" target=\"_blank\">Sayt\u003C\u002Fa>\u003C\u002Fp>\n",[47,50,53,56,59,62,65],{"id":48,"title":49},"diagram-design-nima","Diagram Design nima",{"id":51,"title":52},"ornatish","O'rnatish",{"id":54,"title":55},"ish-jarayoni","Ish jarayoni",{"id":57,"title":58},"amaliy-misol","Amaliy misol",{"id":60,"title":61},"muhim-imkoniyatlar","Muhim imkoniyatlar",{"id":63,"title":64},"cheklovlar-va-maslahatlar","Cheklovlar va maslahatlar",{"id":66,"title":67},"manba","Manba"]