Geuza Mkusanyiko wa Teknolojia wa Sentensi Moja Kuwa Mchoro wa Usanifu

stack-diagram ni nini?

stack-diagram ni ujuzi wa wakala wa AI unaobadilisha maelezo ya kawaida ya Kiingereza kuhusu stack ya teknolojia kuwa mchoro wa usanifu. Badala ya kupanga aikoni na kuchora miunganisho wewe mwenyewe, unaeleza huduma, mahusiano, itifaki na mtiririko wa uwekaji katika sentensi au aya fupi.

Kwa mfano, kidokezo kifuatacho kinaeleza programu ya wavuti, API yake, huduma za data na mchakato wa uwekaji:

Chora stack yetu: Next.js na API ya Hono kwenye Vercel. Postgres kwenye Neon, uthibitishaji kwa Clerk, malipo kwa Stripe. GitHub Actions hufanya uwekaji.

Ujuzi huu hufanya kazi na Claude Code, Codex, Cursor na mawakala wengine wanaotumia muundo wa Agent Skills.

Vipengele muhimu

• Ingizo la lugha ya kawaida: Eleza usanifu bila kuandika sintaksia ya michoro.
• Nembo rasmi: Nembo hupatikana kutoka vyanzo kama SVGL, Devicon, gilbarbara/logos, hazina rasmi za chapa na kifurushi cha AWS Architecture Icons.
• Upitishaji makini wa viunganishi: Mistari hupitishwa kuzunguka lebo ili mishale isipitie kwenye maandishi.
• Mandhari nyepesi na nyeusi: Kila mchoro huonyeshwa katika mandhari zote mbili. Vigae vya nembo hubaki vyeupe ili kuhifadhi rangi asili za chapa.
• Miundo mbalimbali ya matokeo: Tengeneza faili ya HTML inayojitosheleza, picha ya PNG, kijenzi cha React kisichohitaji vitegemezi, au Artifact inayoweza kushirikiwa.
• HTML inayoweza kuhamishwa: Fonti na nembo huwekwa ndani ya faili, hivyo faili ya HTML inayotokana inaweza kuonyeshwa bila ufikiaji wa mtandao.

Mahitaji

Kabla ya kutumia ujuzi huu, hakikisha mazingira yako yanatoa:

• Python 3.9 au toleo jipya zaidi.
• Ufikiaji wa mtandao wakati nembo zinapakuliwa.
• Playwright yenye Chromium wakati wa kuhamisha michoro kuwa faili za PNG.
• Wakala wa programu wa AI au programu inayotumia ujuzi.

Ingawa matokeo ya mwisho ya HTML hufanya kazi bila mtandao, ufikiaji wa mtandao unahitajika wakati wa utengenezaji kwa sababu nembo hupakuliwa wakati wa kujenga badala ya kujumuishwa kwenye ujuzi.

Sakinisha stack-diagram

Sakinisha katika wakala wa programu unaotumika

Tekeleza amri ifuatayo kutoka kwenye terminal yako:

npx skills add caru-ini/stack-diagram

Hii husakinisha ujuzi kwa mawakala wanaotumia mfumo ikolojia wa skills, wakiwemo Claude Code, Codex na Cursor.

Sakinisha katika programu ya Claude

Kwa programu ya Claude inayokubali ujuzi uliopakiwa, fungua toleo jipya zaidi la mradi, pakua stack-diagram.zip, kisha pakia faili hiyo ya ZIP kama ujuzi.

Unda mchoro wako wa kwanza wa usanifu

Baada ya usakinishaji, mwambie wakala wako achore stack. Kidokezo muhimu hutaja teknolojia kuu, zinapoendeshwa na jinsi zinavyoingiliana.

Chora stack yetu: Next.js na API ya Hono kwenye Vercel.
Postgres kwenye Neon, uthibitishaji kwa Clerk, malipo kwa Stripe.
GitHub Actions hufanya uwekaji.

Maelezo haya yanampa wakala taarifa za kutosha kuwakilisha kiolesura cha mbele, API, hifadhidata, mtoa huduma wa uthibitishaji, mtoa huduma wa malipo na mtiririko wa uwekaji.

Fanya mahusiano yawe wazi

Kwa matokeo sahihi zaidi, jumuisha itifaki au aina za mwingiliano zinapokuwa muhimu. Unaweza kusema kuwa kivinjari hufikia programu kupitia HTTPS, API huuliza hifadhidata kupitia SQL, au huduma moja hufanya mwito wa RPC.

Chora mtumiaji akifikia Next.js kwenye Vercel kupitia HTTPS.
Next.js huita API ya Hono kupitia RPC.
API huuliza Neon kupitia SQL na hutumia Clerk kwa vipindi vya watumiaji.
GitHub Actions huweka programu.

Mradi huonyesha matokeo na kukagua mchoro kabla ya kuurejesha, jambo linalosaidia kuzuia viunganishi kuvuka lebo.

Zana za kutengeneza michoro

stack-diagram haiishii kwenye miundombinu ya wingu. Pia inaweza kuonyesha monorepo, zana za ndani, waendeshaji wa majaribio, hooks za commit, ujumuishaji endelevu na uchapishaji wa vifurushi.

Chora zana za monorepo yetu: workspace ya pnpm yenye Turborepo, Biome, Vitest na Lefthook. GitHub Actions huendesha CI na kuchapisha kwenye npm.

Aina hii ya kidokezo hutaja mipaka ya workspace, zana zinazofanya kazi ndani yake na uendeshaji wa nje unaohusika na CI na uchapishaji.

Chora programu ya AI

Michoro ya programu za AI inaweza kuchanganya mifumo ya wavuti, watoa huduma wa modeli, hifadhidata za vekta, kazi za chinichini na vyanzo vya maudhui. Eleza njia ya ombi shirikishi pamoja na mchakato wowote wa uingizaji wa data uliopangwa.

Chora chatbot ya nyaraka zetu: Next.js kwenye Vercel hutafuta Supabase pgvector na kujibu kwa Claude. Inngest husawazisha Notion kila usiku.

Hapa, kidokezo kinatofautisha mtiririko wa maswali na majibu unaomlenga mtumiaji na mchakato wa usawazishaji wa kila usiku.

Chora miundombinu ya AWS

Kwa usanifu wa AWS, taja huduma na mipaka ya mtandao moja kwa moja. stack-diagram hutumia aikoni rasmi za usanifu za AWS.

Chora programu yetu kwenye AWS: CloudFront mbele ya S3 na ALB kwenye subnet ya umma. Fargate, RDS na ElastiCache ziko kwenye subnet ya faragha.

Maelezo haya yanaonyesha safu ya uelekezaji, hifadhi tuli, kisawazisha mizigo na utenganishaji kati ya subnet za umma na za faragha.

Chagua muundo wa matokeo

Matokeo chaguo-msingi ni faili la HTML linalojitosheleza. Unaweza pia kuomba umbizo jingine linalotumika moja kwa moja katika ombi lako:

• HTML: Bora kwa hazina za msimbo, nyaraka za ndani, na wiki. Fonti na nembo zimewekwa ndani ya faili moja.
• PNG: Muhimu kwa mawasilisho na nyaraka. Uhamishaji wa PNG unahitaji Playwright yenye Chromium.
• React component: Kipengele kisichohitaji utegemezi, kinachofaa kuunganishwa katika mradi wa React.
• Artifact: Kinafaa kwa kuchapisha na kushiriki kupitia Claude.

Create a diagram of this stack as a self-contained HTML file:
Next.js on Vercel calls a Hono API, which stores data in Neon.

Faili za PNG na kipengele cha React hutolewa kutoka faili ileile ya msingi ya HTML, jambo linalosaidia kudumisha uwiano wa miundo ya matokeo.

Tumia mandhari nyepesi na nyeusi

Kila mchoro hutolewa katika mandhari nyepesi na nyeusi. Vigae vya teknolojia hubaki vyeupe ili nembo rasmi zidumishe rangi zake za awali, huku lebo za vikundi zikibadilika kuwa nembo ya chapa inayofaa kwa mandhari nyeusi.

Unapochapisha matokeo katika hazina ya msimbo au wiki, weka mandhari zote mbili ikiwa wasomaji wanaweza kutumia mipangilio tofauti ya rangi ya kiolesura.

Vidokezo vya hali ya juu vya kuandika maombi

Eleza mwelekeo wa trafiki

Orodha ya bidhaa inaeleza kile ambacho stack ina, lakini lugha ya mwelekeo inaeleza jinsi inavyofanya kazi. Tumia vitenzi kama vile calls, queries, serves, publishes, deploys, na syncs.

Taja mipaka na maeneo

Eleza ikiwa vipengele vinashiriki uenezaji mmoja, ni vya workspace moja, au viko katika subnet za umma na za faragha. Maelezo haya husaidia mchoro kupanga kwa usahihi vipengele vinavyohusiana.

Jumuisha ratiba na uwekaji otomatiki

Ikiwa mchakato huendeshwa kila usiku, kwenye kila commit, au wakati wa uenezaji, jumuisha maelezo hayo. Husaidia kutofautisha michakato ya nyuma na njia kuu ya ombi.

Omba matokeo yanayohitajika

Specify HTML, PNG, React, or Artifact output when the default HTML format is not what you need. For a shareable, offline-friendly result, request a self-contained HTML file.

Weka vipengee vya chapa bila kubadilishwa

Mradi haupaki rangi upya wala kuchora upya nembo. Majina na nembo za chapa zinaendelea kuwa alama za biashara za wamiliki wao husika, na kuwepo kwake katika mchoro hakumaanishi uidhinishaji.

Mazingatio ya leseni

Msimbo na nyaraka za mradi hutumia Leseni ya MIT. Fonti zilizojumuishwa hutumia SIL Open Font License 1.1. Nembo hazijajumuishwa; hupakuliwa wakati wa uundaji kutoka kwenye mikusanyo ya nembo inayotumika, AWS, Lucide, au vyanzo na hazina rasmi za chapa.

Hitimisho

stack-diagram hutoa njia ya haraka ya kubadilisha maelezo mafupi ya usanifu kuwa mchoro ulioboreshwa wenye nembo rasmi, uelekezaji unaosomeka, usaidizi wa mandhari, na chaguo kadhaa za uhamishaji. Sakinisha skill, eleza vipengele na uhusiano kwa uwazi, kisha omba umbizo la matokeo linalofaa mtiririko wako wa nyaraka au kushiriki.