Guqula Isitaki Sobuchwepheshe Esinomusho Owodwa Sibe Umdwebo Wesakhiwo

Yini i-stack-diagram?

stack-diagram iyikhono le-ejenti ye-AI eliguqula incazelo ebhalwe ngesiNgisi esijwayelekile yesitaki sobuchwepheshe ibe umdwebo wokwakheka kwesistimu. Esikhundleni sokubeka izithonjana nokudweba ukuxhumana ngesandla, uchaza izinsizakalo, ubudlelwano, amaphrothokholi, kanye nokugeleza kokuphakela ngohlelo emshweni noma esigabeni esifushane.

Isibonelo, umyalo olandelayo uchaza uhlelo lwewebhu, i-API yalo, izinsizakalo zedatha, kanye nepayipi lokuphakela:

Dweba isitaki sethu: i-Next.js ne-Hono API ku-Vercel. I-Postgres ku-Neon, ukuqinisekiswa nge-Clerk, izinkokhelo nge-Stripe. I-GitHub Actions iyaphakela.

Ikhono lisebenza ne-Claude Code, Codex, Cursor, namanye ama-ejenti asekela ifomethi ye-Agent Skills.

Izici ezibalulekile

• Okufakwayo ngolimi olujwayelekile: Chaza ukwakheka kwesistimu ngaphandle kokubhala i-syntax yomdwebo.
• Amalogo asemthethweni: Amalogo atholwa emithonjeni efana ne-SVGL, Devicon, gilbarbara/logos, izinqolobane zamabhendi asemthethweni, kanye nephakheji ye-AWS Architecture Icons.
• Ukuqondiswa ngokucophelela kwezixhumanisi: Imigqa iqondiswa izungeze amalebula ukuze imicibisholo ingadluli embhalweni.
• Amatimu akhanyayo namnyama: Umdwebo ngamunye uboniswa kuwo womabili amatimu. Amathayela amalogo ahlala emhlophe ukuze kugcinwe imibala yebhendi yoqobo.
• Amafomethi amaningi okukhishwa: Khiqiza ifayela le-HTML elizimele, isithombe se-PNG, i-React component engenakho ukuncika, noma i-Artifact okwabelwana ngayo.
• I-HTML ephathekayo: Amafonti namalogo afakwa ngaphakathi, okwenza ifayela le-HTML eliwumphumela liboniswe ngaphandle kokufinyelela kunethiwekhi.

Izidingo

Ngaphambi kokusebenzisa ikhono, qinisekisa ukuthi indawo yakho inikeza:

• I-Python 3.9 noma entsha.
• Ukufinyelela kunethiwekhi ngesikhathi kulandwa amalogo.
• I-Playwright ene-Chromium lapho ukhipha imidwebo njengamafayela e-PNG.
• I-ejenti yokubhala ikhodi ye-AI noma uhlelo olusekela amakhono.

Nakuba okukhiphayo kwe-HTML okuphelile kusebenza ngaphandle kwe-inthanethi, ukufinyelela kunethiwekhi kuyadingeka ngesikhathi sokukhiqiza ngoba amalogo alandwa ngesikhathi sokwakha esikhundleni sokuhlanganiswa nekhono.

Faka i-stack-diagram

Faka ku-ejenti yokubhala ikhodi esekelwayo

Qalisa umyalo olandelayo kutheminali yakho:

npx skills add caru-ini/stack-diagram

Lokhu kufaka ikhono kuma-ejenti asekela i-ecosystem yamakhono, okuhlanganisa i-Claude Code, Codex, ne-Cursor.

Faka kuhlelo lokusebenza lwe-Claude

Ohlelweni lokusebenza lwe-Claude olwamukela amakhono alayishiwe, vula ukukhishwa kwakamuva kwephrojekthi, landa stack-diagram.zip, bese ulayisha lelo fayela le-ZIP njengekhono.

Dala umdwebo wakho wokuqala wokwakheka kwesistimu

Ngemva kokufaka, cela i-ejenti yakho ukuthi idwebe isitaki. Umyalo owusizo ukhomba ubuchwepheshe obuyinhloko, indawo obusebenza kuyo, kanye nendlela obusebenzisana ngayo.

Dweba isitaki sethu: i-Next.js ne-Hono API ku-Vercel.
I-Postgres ku-Neon, ukuqinisekiswa nge-Clerk, izinkokhelo nge-Stripe.
I-GitHub Actions iyaphakela.

Le ncazelo inikeza i-ejenti ulwazi olwanele lokumela i-frontend, i-API, isizindalwazi, umhlinzeki wokuqinisekisa, umhlinzeki wezinkokhelo, kanye nokugeleza komsebenzi wokuphakela.

Yenza ubudlelwano bucace

Ukuze uthole imiphumela enembe kakhudlwana, faka amaphrothokholi noma izinhlobo zokusebenzisana lapho kubalulekile. Ungasho ukuthi isiphequluli sifinyelela uhlelo nge-HTTPS, i-API ibuza isizindalwazi nge-SQL, noma insizakalo eyodwa yenza ucingo lwe-RPC.

Dweba umsebenzisi ofinyelela ku-Next.js ku-Vercel nge-HTTPS.
I-Next.js ibiza i-Hono API nge-RPC.
I-API ibuza i-Neon nge-SQL futhi isebenzisa i-Clerk kumaseshini.
I-GitHub Actions iphakela uhlelo.

Iphrojekthi ibonisa umphumela futhi ihlole umdwebo ngaphambi kokuwubuyisa, okusiza ukuvimbela izixhumanisi ukuthi ziwele amalebula.

Amathuluzi okuthuthukisa imidwebo

i-stack-diagram ayigcini kungqalasizinda yamafu kuphela. Ingabonisa futhi ama-monorepo, amathuluzi endawo, iziqalisi zokuhlola, ama-commit hook, ukuhlanganiswa okuqhubekayo, kanye nokushicilelwa kwamaphakheji.

Dweba amathuluzi e-monorepo yethu: indawo yokusebenza ye-pnpm ene-Turborepo, Biome, Vitest ne-Lefthook. I-GitHub Actions iqhuba i-CI futhi ishicilela ku-npm.

Lolu hlobo lomyalo lukhomba umngcele wendawo yokusebenza, amathuluzi asebenza ngaphakathi kuyo, kanye ne-automation yangaphandle enesibopho se-CI nokushicilela.

Dweba uhlelo lokusebenza lwe-AI

Imidwebo yezinhlelo zokusebenza ze-AI ingahlanganisa ama-web framework, abahlinzeki bamamodeli, izizindalwazi zama-vector, imisebenzi yangemuva, kanye nemithombo yokuqukethwe. Chaza kokubili indlela yesicelo esisebenzisanayo nanoma iyiphi inqubo yokungenisa ehleliwe.

Dweba i-chatbot yamadokhumenti yethu: i-Next.js ku-Vercel isesha i-Supabase pgvector bese iphendula nge-Claude. I-Inngest ivumelanisa i-Notion njalo ebusuku.

Lapha, umyalo uhlukanisa ukugeleza kwemibuzo nezimpendulo okubhekene nomsebenzisi kunqubo yokuvumelanisa yasebusuku.

Dweba ingqalasizinda ye-AWS

Ezakhiweni ze-AWS, qamba izinsizakalo nemingcele yenethiwekhi ngokuqondile. i-stack-diagram isebenzisa izithonjana ezisemthethweni zokwakheka kwe-AWS.

Dweba uhlelo lwethu ku-AWS: i-CloudFront phambi kwe-S3 ne-ALB ku-subnet yomphakathi. I-Fargate, RDS ne-ElastiCache ziku-subnet eyimfihlo.

Le ncazelo idlulisa ungqimba lokuqondisa, isitoreji esimile, i-load balancer, kanye nokwehlukaniswa phakathi kwama-subnet omphakathi nawemfihlo.

Khetha ifomethi yokukhishwa

Umphumela ozenzakalelayo uyifayela le-HTML elizimele ngokuphelele. Ungacela futhi enye ifomethi esekelwayo ngokuqondile ku-prompt yakho:

• HTML: Ilungele ama-repository, imibhalo yangaphakathi, nama-wiki. Amafonti namalogo afakwe efayeleni elilodwa.
• PNG: Iwusizo ezethulweni nasemibhalweni. Ukukhipha i-PNG kudinga i-Playwright ene-Chromium.
• React component: I-component engenakho ukuncika, efanele ukuhlanganiswa kuphrojekthi ye-React.
• Artifact: Ifanele ukushicilelwa nokwabelwana ngayo nge-Claude.

Dala umdwebo wale stack njengefayela le-HTML elizimele ngokuphelele:
I-Next.js ku-Vercel ibiza i-Hono API, egcina idatha ku-Neon.

Amafayela e-PNG ne-React component akhiqizwa efayeleni le-HTML eliyisisekelo elifanayo, okusiza ukugcina amafomethi aphumayo ehambisana.

Sebenzisa amatimu akhanyayo namnyama

Umdwebo ngamunye ukhiqizwa ngamatimu akhanyayo namnyama. Amathayela obuchwepheshe ahlala emhlophe ukuze amalogo asemthethweni agcine imibala yawo yoqobo, kanti amalebula amaqembu angashintshela kulogo yomkhiqizo efanele yetimu emnyama.

Lapho ushicilela umphumela ku-repository noma ku-wiki, gcina womabili amatimu etholakala uma abafundi bengase basebenzise izikimu zemibala ezihlukene zesixhumi esibonakalayo.

Amathiphu athuthukile okubhala ama-prompt

Chaza indlela ithrafikhi eya ngayo

Uhlu lwemikhiqizo luchaza ukuthi i-stack iquketheni, kodwa ulimi olukhombisa indlela luchaza ukuthi isebenza kanjani. Sebenzisa izenzo ezifana nokuthi ibiza, ibuza, ihlinzeka, ishicilela, iyathumela, kanye nokuthi ivumelanisa.

Yisho imingcele nezindawo

Chaza ukuthi izingxenye zabelana ngokuthunyelwa okukodwa yini, zingaphansi kwe-workspace yini, noma zihlala kuma-subnet omphakathi nawangasese. Le mininingwane isiza umdwebo uhlanganise kahle izingxenye ezihlobene.

Faka amashejuli nokuzenzakalela

Uma inqubo isebenza njalo ebusuku, kukho konke ukuzibophezela, noma ngesikhathi sokuthunyelwa, faka lolo lwazi. Lusiza ukuhlukanisa ukugeleza komsebenzi kwangemuva endleleni eyinhloko yezicelo.

Cel’ umphumela odingekayo

Cacisa ukuthi udinga umphumela we-HTML, PNG, React, noma Artifact lapho ifomethi ezenzakalelayo ye-HTML ingeyona oyidingayo. Ukuze uthole umphumela ongabelwana ngawo futhi osebenza ngaphandle kwe-inthanethi, cela ifayela le-HTML elizimele ngokuphelele.

Gcina izimpahla zomkhiqizo zingashintshiwe

Le phrojekthi ayiwushintshi umbala noma iphinde idwebe amalogo. Amagama emikhiqizo namalogo ahlala eyizimpawu zokuhweba zabanikazi bawo abafanele, futhi ukuba khona kwawo emdwebeni akusho ukugunyazwa.

Okucatshangelwayo mayelana namalayisense

Ikhodi nemibhalo yephrojekthi kusebenzisa i-MIT License. Amafonti ahlanganisiwe asebenzisa i-SIL Open Font License 1.1. Amalogo awahlanganisiwe; alandwa ngesikhathi sokukhiqiza kumaqoqo amalogo asekelwayo, e-AWS, e-Lucide, noma emithonjeni nasezinqolobaneni ezisemthethweni zemikhiqizo.

Isiphetho

i-stack-diagram inikeza indlela esheshayo yokuguqula incazelo emfushane ye-architecture ibe umfanekiso obukeka kahle onamalogo asemthethweni, umzila ofundekayo, ukusekelwa kwamatimu, kanye nezinketho eziningana zokukhipha. Faka i-skill, chaza izingxenye nobudlelwano ngokucacile, bese ucela ifomethi yomphumela ehambisana nemibhalo yakho noma nendlela yakho yokwabelana.