এক বাক্যের টেক স্ট্যাককে আর্কিটেকচার ডায়াগ্রামে রূপান্তর করুন

stack-diagram কী?

stack-diagram হলো একটি AI এজেন্ট স্কিল, যা প্রযুক্তি স্ট্যাকের সাধারণ ইংরেজি বর্ণনাকে একটি আর্কিটেকচার ডায়াগ্রামে রূপান্তর করে। আইকন বসানো ও সংযোগগুলো ম্যানুয়ালি আঁকার পরিবর্তে, আপনি একটি বাক্য বা ছোট অনুচ্ছেদে সার্ভিস, সম্পর্ক, প্রোটোকল এবং ডিপ্লয়মেন্ট প্রবাহ বর্ণনা করেন।

উদাহরণস্বরূপ, নিচের প্রম্পটটি একটি ওয়েব অ্যাপ্লিকেশন, এর API, ডেটা সার্ভিস এবং ডিপ্লয়মেন্ট পাইপলাইন বর্ণনা করে:

আমাদের স্ট্যাকের ডায়াগ্রাম আঁকুন: Vercel-এ Next.js এবং একটি Hono API। Neon-এ Postgres, Clerk দিয়ে অথেনটিকেশন, Stripe দিয়ে পেমেন্ট। GitHub Actions ডিপ্লয় করে।

এই স্কিলটি Claude Code, Codex, Cursor এবং Agent Skills ফরম্যাট সমর্থনকারী অন্যান্য এজেন্টের সঙ্গে কাজ করে।

প্রধান বৈশিষ্ট্য

• সাধারণ ভাষায় ইনপুট: ডায়াগ্রাম সিনট্যাক্স না লিখেই একটি আর্কিটেকচার বর্ণনা করুন।
• অফিশিয়াল লোগো: SVGL, Devicon, gilbarbara/logos, অফিশিয়াল ব্র্যান্ড রিপোজিটরি এবং AWS Architecture Icons প্যাকেজের মতো উৎস থেকে লোগো সংগ্রহ করা হয়।
• সতর্ক কানেক্টর রাউটিং: লেবেল এড়িয়ে লাইন রাউট করা হয়, যাতে তীরগুলো লেখার মধ্য দিয়ে না যায়।
• হালকা ও ডার্ক থিম: প্রতিটি ডায়াগ্রাম উভয় থিমে রেন্ডার করা হয়। আসল ব্র্যান্ডের রং অক্ষুণ্ণ রাখতে লোগোর টাইলগুলো সাদা থাকে।
• একাধিক আউটপুট ফরম্যাট: স্বয়ংসম্পূর্ণ HTML ফাইল, PNG ছবি, ডিপেন্ডেন্সিবিহীন React কম্পোনেন্ট অথবা শেয়ারযোগ্য Artifact তৈরি করুন।
• পোর্টেবল HTML: ফন্ট ও লোগো ইনলাইন করা থাকে, ফলে নেটওয়ার্ক অ্যাক্সেস ছাড়াই তৈরি HTML ফাইল রেন্ডার হয়।

প্রয়োজনীয়তা

স্কিলটি ব্যবহারের আগে নিশ্চিত করুন যে আপনার পরিবেশে রয়েছে:

• Python 3.9 বা পরবর্তী সংস্করণ।
• লোগো সংগ্রহের সময় নেটওয়ার্ক অ্যাক্সেস।
• ডায়াগ্রাম PNG ফাইল হিসেবে এক্সপোর্ট করার সময় Chromium-সহ Playwright।
• স্কিল সমর্থনকারী একটি AI কোডিং এজেন্ট বা অ্যাপ্লিকেশন।

চূড়ান্ত HTML আউটপুট অফলাইনে কাজ করলেও তৈরির সময় নেটওয়ার্ক অ্যাক্সেস প্রয়োজন, কারণ লোগোগুলো স্কিলের সঙ্গে বান্ডেল না করে বিল্ডের সময় ডাউনলোড করা হয়।

stack-diagram ইনস্টল করুন

সমর্থিত কোডিং এজেন্টে ইনস্টল করুন

টার্মিনাল থেকে নিচের কমান্ডটি চালান:

npx skills add caru-ini/stack-diagram

এটি Claude Code, Codex এবং Cursor-সহ skills ecosystem সমর্থনকারী এজেন্টগুলোর জন্য স্কিলটি ইনস্টল করবে।

Claude অ্যাপে ইনস্টল করুন

আপলোড করা স্কিল গ্রহণ করে এমন Claude অ্যাপের জন্য, প্রকল্পের সর্বশেষ রিলিজ খুলুন, stack-diagram.zip ডাউনলোড করুন এবং ওই ZIP ফাইলটি স্কিল হিসেবে আপলোড করুন।

আপনার প্রথম আর্কিটেকচার ডায়াগ্রাম তৈরি করুন

ইনস্টলেশনের পর আপনার এজেন্টকে স্ট্যাকের ডায়াগ্রাম আঁকতে বলুন। একটি কার্যকর প্রম্পটে প্রধান প্রযুক্তিগুলো, সেগুলো কোথায় চলে এবং কীভাবে পরস্পরের সঙ্গে কাজ করে তা উল্লেখ করা থাকে।

আমাদের স্ট্যাকের ডায়াগ্রাম আঁকুন: Vercel-এ Next.js এবং একটি Hono API।
Neon-এ Postgres, Clerk দিয়ে অথেনটিকেশন, Stripe দিয়ে পেমেন্ট।
GitHub Actions ডিপ্লয় করে।

এই বর্ণনা এজেন্টকে ফ্রন্টএন্ড, API, ডেটাবেস, অথেনটিকেশন প্রোভাইডার, পেমেন্ট প্রোভাইডার এবং ডিপ্লয়মেন্ট ওয়ার্কফ্লো উপস্থাপনের জন্য যথেষ্ট তথ্য দেয়।

সম্পর্কগুলো স্পষ্টভাবে উল্লেখ করুন

আরও নির্ভুল ফলাফলের জন্য প্রয়োজন অনুযায়ী প্রোটোকল বা ইন্টারঅ্যাকশনের ধরন অন্তর্ভুক্ত করুন। আপনি বলতে পারেন, ব্রাউজার HTTPS-এর মাধ্যমে একটি অ্যাপ্লিকেশনে পৌঁছায়, API SQL-এর মাধ্যমে ডেটাবেসে কোয়েরি করে, অথবা একটি সার্ভিস RPC কল সম্পাদন করে।

HTTPS-এর মাধ্যমে Vercel-এ থাকা Next.js-এ একজন ব্যবহারকারীর পৌঁছানোর ডায়াগ্রাম আঁকুন।
Next.js RPC-এর মাধ্যমে Hono API-কে কল করে।
API SQL-এর মাধ্যমে Neon-এ কোয়েরি করে এবং সেশনের জন্য Clerk ব্যবহার করে।
GitHub Actions অ্যাপ্লিকেশনটি ডিপ্লয় করে।

ফলাফল ফেরত দেওয়ার আগে প্রকল্পটি সেটি রেন্ডার করে এবং ডায়াগ্রাম পরীক্ষা করে, যা কানেক্টরগুলোকে লেবেলের ওপর দিয়ে যাওয়া ঠেকাতে সাহায্য করে।

ডায়াগ্রাম ডেভেলপমেন্ট টুলিং

stack-diagram শুধু ক্লাউড ইনফ্রাস্ট্রাকচারে সীমাবদ্ধ নয়। এটি মনোরেপো, লোকাল টুলিং, টেস্ট রানার, কমিট হুক, কন্টিনিউয়াস ইন্টিগ্রেশন এবং প্যাকেজ পাবলিশিংও ভিজ্যুয়ালাইজ করতে পারে।

আমাদের মনোরেপো টুলিংয়ের ডায়াগ্রাম আঁকুন: Turborepo, Biome, Vitest এবং Lefthook-সহ একটি pnpm workspace। GitHub Actions CI চালায় এবং npm-এ পাবলিশ করে।

এই ধরনের প্রম্পটে workspace-এর সীমানা, এর ভেতরে কাজ করা টুল এবং CI ও পাবলিশিংয়ের দায়িত্বে থাকা বাহ্যিক অটোমেশন চিহ্নিত করা হয়।

একটি AI অ্যাপ্লিকেশনের ডায়াগ্রাম আঁকুন

AI অ্যাপ্লিকেশনের ডায়াগ্রামে ওয়েব ফ্রেমওয়ার্ক, মডেল প্রোভাইডার, ভেক্টর ডেটাবেস, ব্যাকগ্রাউন্ড জব এবং কনটেন্ট সোর্স একসঙ্গে দেখানো যায়। ইন্টারঅ্যাক্টিভ রিকোয়েস্ট প্রবাহ এবং নির্ধারিত ইনজেশন প্রক্রিয়া দুটিই বর্ণনা করুন।

আমাদের ডকস চ্যাটবটের ডায়াগ্রাম আঁকুন: Vercel-এ থাকা Next.js Supabase pgvector-এ অনুসন্ধান করে এবং Claude দিয়ে উত্তর দেয়। Inngest প্রতি রাতে Notion সিঙ্ক করে।

এখানে প্রম্পটটি ব্যবহারকারীর প্রশ্নোত্তর প্রবাহকে রাতের সিঙ্ক্রোনাইজেশন প্রক্রিয়া থেকে আলাদা করে।

AWS ইনফ্রাস্ট্রাকচারের ডায়াগ্রাম আঁকুন

AWS আর্কিটেকচারের জন্য সরাসরি সার্ভিস ও নেটওয়ার্কের সীমানা উল্লেখ করুন। stack-diagram AWS-এর অফিশিয়াল আর্কিটেকচার আইকন ব্যবহার করে।

AWS-এ থাকা আমাদের অ্যাপের ডায়াগ্রাম আঁকুন: একটি পাবলিক সাবনেটে S3 এবং একটি ALB-এর সামনে CloudFront। একটি প্রাইভেট সাবনেটে Fargate, RDS এবং ElastiCache রয়েছে।

এই বর্ণনায় রাউটিং স্তর, স্ট্যাটিক স্টোরেজ, লোড ব্যালান্সার এবং পাবলিক ও প্রাইভেট সাবনেটের বিভাজন স্পষ্ট হয়।

একটি আউটপুট ফরম্যাট বেছে নিন

ডিফল্ট ফলাফল একটি স্বয়ংসম্পূর্ণ HTML ফাইল। আপনি আপনার প্রম্পটে সরাসরি অন্য কোনো সমর্থিত ফরম্যাটও চাইতে পারেন:

• HTML: রিপোজিটরি, অভ্যন্তরীণ ডকুমেন্টেশন এবং উইকির জন্য সেরা। ফন্ট ও লোগো একটি ফাইলেই এমবেড করা থাকে।
• PNG: উপস্থাপনা ও নথির জন্য উপযোগী। PNG এক্সপোর্টের জন্য Chromium-সহ Playwright প্রয়োজন।
• React কম্পোনেন্ট: React প্রকল্পে ইন্টিগ্রেশনের উপযোগী, নির্ভরতামুক্ত একটি কম্পোনেন্ট।
• Artifact: Claude-এর মাধ্যমে প্রকাশ ও শেয়ার করার জন্য উপযোগী।

এই স্ট্যাকের একটি স্বয়ংসম্পূর্ণ HTML ফাইল হিসেবে ডায়াগ্রাম তৈরি করুন:
Vercel-এ চলা Next.js একটি Hono API-কে কল করে, যা Neon-এ ডেটা সংরক্ষণ করে।

PNG ফাইল ও React কম্পোনেন্ট একই অন্তর্নিহিত HTML ফাইল থেকে রেন্ডার করা হয়, ফলে আউটপুট ফরম্যাটগুলোর মধ্যে সামঞ্জস্য বজায় থাকে।

লাইট ও ডার্ক থিম ব্যবহার করুন

প্রতিটি ডায়াগ্রাম লাইট ও ডার্ক থিমে রেন্ডার করা হয়। প্রযুক্তির টাইলগুলো সাদা থাকে, যাতে অফিসিয়াল লোগোগুলো তাদের আসল রং বজায় রাখে; অন্যদিকে গ্রুপের লেবেলগুলো উপযুক্ত ডার্ক-থিম ব্র্যান্ড লোগোতে পরিবর্তিত হতে পারে।

রিপোজিটরি বা উইকিতে আউটপুট প্রকাশ করার সময়, পাঠকেরা ভিন্ন ইন্টারফেস রঙের স্কিম ব্যবহার করতে পারেন—এমন সম্ভাবনা থাকলে উভয় থিমই উপলভ্য রাখুন।

উন্নত প্রম্পট লেখার টিপস

ট্র্যাফিকের দিক বর্ণনা করুন

পণ্যের একটি তালিকা স্ট্যাকে কী আছে তা ব্যাখ্যা করে, কিন্তু দিকনির্দেশনামূলক ভাষা এটি কীভাবে কাজ করে তা ব্যাখ্যা করে। কল করে, কোয়েরি করে, পরিবেশন করে, প্রকাশ করে, ডিপ্লয় করে এবং সিঙ্ক করে-এর মতো ক্রিয়া ব্যবহার করুন।

সীমানা ও অবস্থানের নাম উল্লেখ করুন

উপাদানগুলো একই ডিপ্লয়মেন্ট ভাগ করে কি না, কোনো ওয়ার্কস্পেসের অন্তর্ভুক্ত কি না, অথবা পাবলিক ও প্রাইভেট সাবনেটে অবস্থান করে কি না তা উল্লেখ করুন। এই বিবরণগুলো ডায়াগ্রামকে সম্পর্কিত উপাদানগুলো সঠিকভাবে গ্রুপ করতে সাহায্য করে।

সময়সূচি ও অটোমেশন অন্তর্ভুক্ত করুন

কোনো প্রক্রিয়া প্রতি রাতে, প্রতিটি কমিটে বা ডিপ্লয়মেন্টের সময় চলে কি না, সেই তথ্য অন্তর্ভুক্ত করুন। এতে ব্যাকগ্রাউন্ড ওয়ার্কফ্লোকে মূল রিকোয়েস্ট পথ থেকে আলাদা করা সহজ হয়।

প্রয়োজনীয় ডেলিভারেবল চাইুন

ডিফল্ট HTML ফরম্যাট আপনার প্রয়োজনের উপযোগী না হলে HTML, PNG, React বা Artifact আউটপুট নির্দিষ্ট করে দিন। শেয়ারযোগ্য ও অফলাইন-সহায়ক ফলাফলের জন্য একটি স্বয়ংসম্পূর্ণ HTML ফাইল চাইুন।

ব্র্যান্ড অ্যাসেট অপরিবর্তিত রাখুন

প্রকল্পটি লোগোর রং পরিবর্তন বা পুনরায় আঁকে না। ব্র্যান্ডের নাম ও লোগো তাদের নিজ নিজ মালিকের ট্রেডমার্ক হিসেবে থাকে, এবং কোনো ডায়াগ্রামে তাদের উপস্থিতি অনুমোদনের ইঙ্গিত দেয় না।

লাইসেন্স সংক্রান্ত বিবেচনা

প্রকল্পটির কোড ও ডকুমেন্টেশন MIT License ব্যবহার করে। বান্ডেল করা ফন্টগুলো SIL Open Font License 1.1 ব্যবহার করে। লোগো বান্ডেল করা হয় না; জেনারেশনের সময় সমর্থিত লোগো সংগ্রহ, AWS, Lucide অথবা অফিসিয়াল ব্র্যান্ড সোর্স ও রিপোজিটরি থেকে সেগুলো ডাউনলোড করা হয়।

উপসংহার

stack-diagram অফিসিয়াল লোগো, পাঠযোগ্য রাউটিং, থিম সমর্থন এবং একাধিক এক্সপোর্ট অপশনসহ সংক্ষিপ্ত আর্কিটেকচার বর্ণনাকে দ্রুত একটি পরিশীলিত ভিজ্যুয়ালে রূপান্তর করার উপায় দেয়। স্কিলটি ইনস্টল করুন, উপাদান ও সম্পর্কগুলো স্পষ্টভাবে বর্ণনা করুন, এবং আপনার ডকুমেন্টেশন বা শেয়ারিং ওয়ার্কফ্লোর উপযোগী আউটপুট ফরম্যাটটি চাইুন।