Bir jumlalik texnologiyalar stekini arxitektura diagrammasiga aylantiring

stack-diagram nima?

stack-diagram — texnologiyalar steki haqidagi oddiy inglizcha tavsifni arxitektura diagrammasiga aylantiradigan AI agent ko‘nikmasi. Belgilarni joylashtirish va ulanishlarni qo‘lda chizish o‘rniga, xizmatlar, munosabatlar, protokollar va deploy jarayonini bir jumla yoki qisqa paragrafda tasvirlaysiz.

Masalan, quyidagi prompt veb-ilova, uning API’si, ma’lumotlar xizmatlari va deploy pipeline’ini tasvirlaydi:

Stekimiz diagrammasini chizing: Vercel’da Next.js va Hono API. Neon’da Postgres, autentifikatsiya Clerk orqali, to‘lovlar Stripe orqali. GitHub Actions deploy qiladi.

Ko‘nikma Claude Code, Codex, Cursor va Agent Skills formatini qo‘llab-quvvatlaydigan boshqa agentlar bilan ishlaydi.

Asosiy imkoniyatlar

• Oddiy tildagi kiritish: Diagramma sintaksisini yozmasdan arxitekturani tasvirlang.
• Rasmiy logotiplar: Logotiplar SVGL, Devicon, gilbarbara/logos, rasmiy brend repozitoriylari va AWS Architecture Icons paketi kabi manbalardan olinadi.
• Ulanishlarni puxta yo‘naltirish: Chiziqlar yorliqlarni aylanib o‘tadi, shuning uchun strelkalar matn ustidan o‘tmaydi.
• Yorug‘ va qorong‘i mavzular: Har bir diagramma ikkala mavzuda ham render qilinadi. Asl brend ranglarini saqlash uchun logotip plitkalari oq rangda qoladi.
• Bir nechta chiqish formati: O‘zini o‘zi ta’minlaydigan HTML fayl, PNG tasvir, bog‘liqliklarsiz React komponenti yoki ulashish mumkin bo‘lgan Artifact yarating.
• Ko‘chma HTML: Shriftlar va logotiplar ichki joylashtiriladi, shu sababli hosil bo‘lgan HTML fayl tarmoqsiz ham ishlaydi.

Talablar

Ko‘nikmadan foydalanishdan oldin muhitingizda quyidagilar mavjudligiga ishonch hosil qiling:

• Python 3.9 yoki undan yangiroq versiyasi.
• Logotiplar olinayotgan paytda tarmoq ulanishi.
• Diagrammalarni PNG fayllari sifatida eksport qilish uchun Chromium bilan Playwright.
• Ko‘nikmalarni qo‘llab-quvvatlaydigan AI kodlash agenti yoki ilovasi.

Tayyor HTML chiqishi oflayn ishlasa-da, yaratish jarayonida tarmoq ulanishi kerak, chunki logotiplar ko‘nikma bilan birga joylashtirilmaydi, balki build vaqtida yuklab olinadi.

stack-diagram’ni o‘rnatish

Qo‘llab-quvvatlanadigan kodlash agentiga o‘rnatish

Terminalingizdan quyidagi buyruqni bajaring:

npx skills add caru-ini/stack-diagram

Bu ko‘nikmalar ekotizimini qo‘llab-quvvatlaydigan agentlar, jumladan Claude Code, Codex va Cursor uchun ko‘nikmani o‘rnatadi.

Claude ilovasiga o‘rnatish

Yuklangan ko‘nikmalarni qabul qiladigan Claude ilovasida loyihaning so‘nggi relizini oching, stack-diagram.zip faylini yuklab oling va ushbu ZIP faylni ko‘nikma sifatida yuklang.

Birinchi arxitektura diagrammangizni yarating

O‘rnatgandan so‘ng agentingizdan stekni chizishni so‘rang. Foydali prompt asosiy texnologiyalarni, ular qayerda ishlashini va qanday o‘zaro ta’sirlashishini ko‘rsatadi.

Stekimiz diagrammasini chizing: Vercel’da Next.js va Hono API.
Neon’da Postgres, autentifikatsiya Clerk orqali, to‘lovlar Stripe orqali.
GitHub Actions deploy qiladi.

Bu tavsif agentga frontend, API, ma’lumotlar bazasi, autentifikatsiya provayderi, to‘lov provayderi va deploy jarayonini ifodalash uchun yetarli ma’lumot beradi.

Munosabatlarni aniq ko‘rsating

Aniqroq natijalar uchun muhim bo‘lganda protokollar yoki o‘zaro ta’sir turlarini ham kiriting. Brauzer ilovaga HTTPS orqali murojaat qilishini, API ma’lumotlar bazasini SQL orqali so‘rashini yoki bir xizmat RPC chaqiruvini amalga oshirishini ko‘rsatishingiz mumkin.

Foydalanuvchi Vercel’dagi Next.js’ga HTTPS orqali murojaat qiladigan diagramma chizing.
Next.js Hono API’sini RPC orqali chaqiradi.
API Neon’ni SQL orqali so‘raydi va sessiyalar uchun Clerk’dan foydalanadi.
GitHub Actions ilovani deploy qiladi.

Loyiha natijani render qiladi va qaytarishdan oldin diagrammani tekshiradi. Bu ulanishlarning yorliqlar ustidan kesib o‘tishining oldini olishga yordam beradi.

Diagramma ishlab chiqish vositalari

stack-diagram faqat bulut infratuzilmasi bilan cheklanmaydi. U monorepolar, lokal vositalar, test runner’lari, commit hook’lari, uzluksiz integratsiya va paketlarni nashr qilish jarayonlarini ham vizuallashtira oladi.

Monorepo vositalarimizni chizing: Turborepo, Biome, Vitest va Lefthook’ga ega pnpm workspace. GitHub Actions CI’ni ishga tushiradi va npm’ga nashr qiladi.

Bunday prompt workspace chegarasini, uning ichida ishlaydigan vositalarni hamda CI va nashr qilish uchun mas’ul tashqi avtomatlashtirishni ko‘rsatadi.

AI ilovasini diagrammada ko‘rsating

AI ilovalari diagrammalari veb-framework’lar, model provayderlari, vektor ma’lumotlar bazalari, fon vazifalari va kontent manbalarini birlashtirishi mumkin. Interaktiv so‘rov yo‘lini ham, rejalashtirilgan ma’lumot qabul qilish jarayonini ham tasvirlang.

Hujjatlar chatbotimizni chizing: Vercel’dagi Next.js Supabase pgvector’da qidiradi va Claude yordamida javob beradi. Inngest har kecha Notion’ni sinxronlaydi.

Bu yerda prompt foydalanuvchiga ko‘rinadigan savol-javob oqimini tungi sinxronlash jarayonidan ajratib ko‘rsatadi.

AWS infratuzilmasini diagrammada ko‘rsating

AWS arxitekturalari uchun xizmatlar va tarmoq chegaralarini bevosita nomlang. stack-diagram AWS’ning rasmiy arxitektura belgilaridan foydalanadi.

AWS’dagi ilovamizni chizing: umumiy subnetdagi S3 va ALB oldida CloudFront. Fargate, RDS va ElastiCache xususiy subnetda joylashgan.

Bu tavsif marshrutlash qatlami, statik saqlash, load balancer hamda umumiy va xususiy subnetlar o‘rtasidagi ajratishni ifodalaydi.

Chiqish formatini tanlang

Standart natija o‘z ichiga barcha kerakli ma’lumotlarni olgan HTML faylidir. Shuningdek, so‘rovingizda qo‘llab-quvvatlanadigan boshqa formatni bevosita so‘rashingiz mumkin:

• HTML: Repozitoriylar, ichki hujjatlar va vikilar uchun eng yaxshi tanlov. Shriftlar va logotiplar bitta faylga joylashtiriladi.
• PNG: Taqdimotlar va hujjatlar uchun foydali. PNG eksporti Chromium bilan Playwright o‘rnatilgan bo‘lishini talab qiladi.
• React komponenti: React loyihasiga integratsiya qilish uchun mos, qo‘shimcha bog‘liqliklarsiz komponent.
• Artifact: Claude orqali nashr etish va ulashish uchun mos.

Ushbu stek diagrammasini o‘z ichiga barcha kerakli ma’lumotlarni olgan HTML fayli sifatida yarating:
Vercel’dagi Next.js Hono API’ga murojaat qiladi, u esa ma’lumotlarni Neon’da saqlaydi.

PNG fayllari va React komponenti bir xil asosiy HTML faylidan yaratiladi, bu chiqish formatlari izchil bo‘lishiga yordam beradi.

Yorug‘ va qorong‘i mavzulardan foydalaning

Har bir diagramma yorug‘ va qorong‘i mavzularda yaratiladi. Rasmiy logotiplar asl ranglarini saqlab qolishi uchun texnologiya katakchalari oq rangda qoladi, guruh yorliqlari esa qorong‘i mavzuga mos rasmiy logotipga almashtirilishi mumkin.

Natijani repozitoriy yoki vikida nashr etishda, agar o‘quvchilar turli interfeys rang sxemalaridan foydalanishi mumkin bo‘lsa, ikkala mavzuni ham saqlang.

Ilg‘or prompt yozish bo‘yicha maslahatlar

Traffik yo‘nalishini tasvirlang

Mahsulotlar ro‘yxati stek tarkibini tushuntiradi, ammo yo‘nalishni bildiruvchi iboralar uning qanday ishlashini tushuntiradi. murojaat qiladi, so‘rov yuboradi, xizmat ko‘rsatadi, nashr etadi, joylashtiradi va sinxronlaydi kabi fe’llardan foydalaning.

Chegaralar va joylashuvlarni ko‘rsating

Komponentlar birgalikda joylashtirilganini, ish maydoniga tegishli ekanini yoki ochiq va yopiq subnetlarda joylashganini ayting. Bu tafsilotlar diagrammaga bog‘liq komponentlarni to‘g‘ri guruhlashga yordam beradi.

Jadvallar va avtomatlashtirishni kiriting

Agar jarayon har kecha, har bir commit’da yoki joylashtirish vaqtida ishga tushsa, bu ma’lumotni ham kiriting. Bu fon jarayonlarini asosiy so‘rov yo‘lidan ajratishga yordam beradi.

Kerakli natijani so‘rang

Standart HTML formati sizga mos kelmasa, HTML, PNG, React yoki Artifact chiqishini belgilang. Ulashish mumkin bo‘lgan va oflayn ishlaydigan natija uchun barcha kerakli ma’lumotlarni o‘z ichiga olgan HTML faylini so‘rang.

Brend materiallarini o‘zgartirmang

Loyiha logotiplarning rangini o‘zgartirmaydi yoki ularni qayta chizmaydi. Brend nomlari va logotiplar tegishli egalarining savdo belgilaridir; ularning diagrammada mavjudligi homiylikni anglatmaydi.

Litsenziyalash masalalari

Loyiha kodi va hujjatlari MIT litsenziyasidan foydalanadi. Birga taqdim etiladigan shriftlar SIL Open Font License 1.1 litsenziyasidan foydalanadi. Logotiplar birga taqdim etilmaydi; ular yaratish vaqtida qo‘llab-quvvatlanadigan logotip to‘plamlaridan, AWS, Lucide yoki rasmiy brend manbalari va repozitoriylaridan yuklab olinadi.

Xulosa

stack-diagram qisqa arxitektura tavsifini rasmiy logotiplar, tushunarli yo‘nalishlar, mavzularni qo‘llab-quvvatlash va bir nechta eksport imkoniyatlariga ega puxta vizualga aylantirishning tezkor usulini taqdim etadi. Skill’ni o‘rnating, komponentlar va ular o‘rtasidagi munosabatlarni aniq tasvirlang hamda hujjatlashtirish yoki ulashish jarayoningizga mos chiqish formatini so‘rang.