بقلم 
الخلاصة أولًا: stack-diagram مهارة (Agent Skill) مفتوحة المصدر برخصة MIT من caru-ini. تصف الستاك بجملة، ويطلع لك مخطط معماري بشعارات رسمية للتقنيات: شبكة، سيرفرات، خدمات سحابية، أو حتى أدوات التطوير داخل المونوريبو. المخرجات HTML مكتفٍ بنفسه، أو PNG، أو مكوّن React، أو Artifact. التثبيت أمر واحد: npx skills add caru-ini/stack-diagram. يعمل مع Claude Code وCodex وCursor ووكلاء آخرين يدعمون skills.
الموقف اللي كثير منّا يعرفه: المدير يطلب رسمة للشبكة أو للسيرفرات «الآن». بدل ما تفتح PowerPoint وتلصق أيقونات يدويًا، تكتب برومبت بسيط وتخلي Claude Code (مع هالمهارة) يرسمها لك بسرعة. هذا اللي خلّاني أهتم بالأداة. توفّر وقت لما الرسمة مستعجلة.
لمن هذا؟
- مطوّر أو مهندس يحتاج مخططًا سريعًا للستاك أو البنية التحتية لعرضه على المدير أو الفريق.
- من يستخدم Claude Code (أو Codex أو Cursor) ويبي مخططات بشعارات رسمية بدون رسم يدوي.
- من يوثّق تطبيقًا في ويكي أو README ويبغى HTML أو PNG جاهز للمشاركة.
ليس لك إذا: ما عندك وكيل يدعم skills، أو تبي رسمة يدوية دقيقة جدًا بمقاسات مؤسسية صارمة (الأداة تساعدك بسرعة، مو بديل كامل لأدوات الرسم الهندسي الثقيلة).
المشكلة اللي تحلّها
الرسمة المعمارية عادة تأخذ وقت. تجمع الأيقونات، ترتّب الصناديق، تسحب الأسهم، وتتأكد إن الشعارات صحيحة. مع stack-diagram تصف التطبيق بجملة أو جملتين، والمهارة تجيب الشعارات الرسمية، ترتّب المجموعات والأسهم، وتسلّمك ملفًا جاهزًا. حسب README الرسمي: «Describe your stack in a sentence. Get an architecture diagram with official logos.»
ماذا ستحتاج؟
- وكيل يدعم Agent Skills: Claude Code أو Codex أو Cursor (أو غيرهم حسب قائمة المشروع).
- Python 3.9 أو أحدث (متطلب المهارة نفسها).
- اتصال إنترنت لجلب الشعارات وقت الرسم.
- لتصدير PNG: Playwright مع Chromium (
pip install playwrightثمpython3 -m playwright install --with-deps chromium). حسب ملف SKILL.md في المستودع. - في تطبيقات Claude (الويب/سطح المكتب): ملف
stack-diagram.zipمن Releases كـ skill مرفوع.
ملاحظة تحقق: ما شغّلت التثبيت على هذا الجهاز أثناء كتابة المسودة. الأوامر أدناه من README وSKILL.md الرسميّين بتاريخ التحقق 10 نوفمبر 2026. راجع الصفحة قبل التنفيذ لأن الإصدارات تتحدث.
النتيجة النهائية
مخطط بأسلوب رسومات الهندسة السحابية: شعارات حقيقية على بلاطات بيضاء، صناديق مجموعات (مثل VPC)، أسهم متعامدة، ونسختان فاتحة وداكنة. الملف الافتراضي HTML فيه الخطوط والشعارات مضمّنة، فيشتغل بدون شبكة. تقدر تنشره كـ Artifact أو تضعه في المستودع أو الويكي. المعرض العام الاختياري: https://stacks.caru.moe (لا يُنشر شيء إلا بعد موافقتك مرتين. البرومبت الأصلي لا يُرسل).
بعد تجربتك: أضف لقطة من مخططك (فاتح أو داكن) كمثال حي.
خطوات التشغيل
1. ثبّت المهارة
حسب README:
npx skills add caru-ini/stack-diagramفي تطبيقات Claude: حمّل stack-diagram.zip من أحدث إصدار (وقت التحقق: v0.4.0) وارفعه كـ skill.
2. اطلب الرسمة بجملة واضحة
ما في أمر سلاش ثابت في README. المهارة تُستدعى لما تطلب مخططًا معماريًا / ستاك / بنية تحتية. مثال من الصفحة الرسمية:
Diagram our stack: Next.js and a Hono API on Vercel. Postgres on Neon, auth with Clerk, payments with Stripe. GitHub Actions deploys.اكتب بالعربية أو الإنجليزية. وصف المهارة يقول إنها تعمل بأي لغة. كن محددًا: التقنيات، أين تعمل (Vercel، AWS، سيرفر خاص)، وما يتصل بماذا.
3. اختر صيغة التسليم
- HTML (الافتراضي): ملف واحد مكتفٍ بنفسه.
- PNG: لقطة من نفس الـ HTML عبر Chromium (فاتح + داكن عادة).
- TSX: مكوّن React بدون اعتماديات خارجية.
- Artifact: إن كانت بيئتك تدعم نشر Artifact.
4. (اختياري) شارك في المعرض
بعد الرسم، الوكيل يعرض مشاركة لمرة واحدة على https://stacks.caru.moe. يظهر لك ماذا سيُنشر (صور فاتحة/داكنة، عنوان إنجليزي، قائمة التقنيات، اسم عرض). النشر فقط بعد موافقتين صريحتين. تسجيل GitHub اختياري ويُستخدم لاحقًا للحذف فقط، ولا يظهر للعامة. برومبتك لا يُرسل.
ثلاثة برومبتات جاهزة (من README + صياغة لسيناريو العمل)
أ) معمارية تطبيق (من README)
Diagram our stack: Next.js and a Hono API on Vercel. Postgres on Neon, auth with Clerk, payments with Stripe. GitHub Actions deploys.ب) شبكة / بنية تحتية على AWS (من README)
Draw our app on AWS: CloudFront in front of S3 and an ALB in a public subnet. Fargate, RDS and ElastiCache sit in a private subnet.ج) سيرفر / خدمات داخلية (صياغة عملية لطلب المدير، مبنية على أسلوب الأمثلة الرسمية، مو مقتبسة حرفياً)
Draw our internal app topology: users hit Nginx on a VPS, then a Node API. Postgres and Redis on the same private network. GitHub Actions builds and deploys over SSH. Show public vs private clearly.إن ظهر شعار ناقص أو خاطئ: README يوضح أن المصادر بالترتيب svgl ثم devicon ثم gilbarbara/logos، مع حزم أيقونات AWS وGoogle Cloud وAzure الرسمية عند الحاجة. يمكنك تمرير رابط شعار رسمي بصيغة
name=URLداخل سير عمل المهارة (تفاصيل في SKILL.md).
نصائح عملية
- ابدأ بجملة واحدة فيها التقنيات + مكان التشغيل + العلاقات الأساسية. لا تكتب رواية طويلة.
- اطلب النسختين الفاتحة والداكنة إذا بتقدّم العرض في شريحة أو وثيقة.
- راجع الـ PNG بعينك قبل ما ترسله للمدير: المهارة نفسها تطلب من الوكيل أن يرندر ويتحقق قبل التسليم.
- لا تشارك مخططًا فيه أسماء داخلية أو IPs أو عملاء قبل ما تنظّفه. المعرض نفسه ينبّهك لهذا.
- الشعارات علامات تجارية لأصحابها. استخدامها في الرسمة لا يعني رعاية أو اعتمادًا رسميًا (نص README).
حدود وتحفظات بصراحة
- المشروع حديث نسبيًا (أُنشئ مطلع نوفمبر 2026 حسب GitHub، آخر دفع تحققنا منه: 9 نوفمبر 2026، الإصدار v0.4.0). الجودة تتحسّن بسرعة، لكن توقّع حواف خشنة أحيانًا.
- يحتاج شبكة وقت جلب الشعارات. بدون إنترنت ما يكتمل الجلب.
- PNG يعتمد على Playwright/Chromium. إن ناقص التثبيت، HTML يبقى متاحًا.
- الرسمة سريعة وجيدة للعرض. مو ضمان مطابقة 100% لمعايير رسم AWS الرسمية في كل تفصيلة. المهارة تتبّع قواعد أيقونات البائعين داخل مجموعاتهم حسب SKILL.md.
- ما اختبرت الأداة يدويًا في هذه الجلسة. اعتمد على README وSKILL.md، وجرّب أنت على ستاك تعرفه قبل عرض مهم.
أسئلة شائعة
هل stack-diagram مجاني؟
الكود والوثائق برخصة MIT حسب المستودع. تدفع فقط اشتراك الوكيل اللي تستخدمه (مثل Claude Code) إن كان مدفوعًا عندك.
هل أحتاج Claude Code تحديدًا؟
لا. README يذكر Claude Code وCodex وCursor ووكلاء آخرين يدعمون skills. في تطبيقات Claude ترفع ملف zip من Releases.
وش الفرق عن رسم ChatGPT العادي أو صورة مولّدة؟
الهدف هنا مخطط هندسي بشعارات رسمية مجلبة من مصادر معروفة، مع HTML مكتفٍ وأسطر لا تمر فوق النصوص. مو صورة ديكور عامة. راجع الناتج دائمًا.
هل يُنشر مخططتي تلقائيًا؟
لا. المشاركة على stacks.caru.moe اختيارية وبعد موافقتين. البرومبت لا يُرسل.
مصطلحات
- Agent Skill: حزمة تعليمات/سكربتات يحمّلها الوكيل لمهمة متكررة (هنا: رسم الستاك).
- Self-contained HTML: ملف HTML فيه الخطوط والشعارات مضمّنة كـ data URI، يشتغل بدون شبكة.
- Official logos: شعارات من مصادر رسمية أو مكتبات معتمدة (svgl، devicon، حزم AWS/GCP/Azure…)، بدون إعادة تلوين.
ماذا بعد؟
- ثبّت المهارة وجرّب برومبت التطبيق (أ) على ستاك تعرفه.
- إذا طلب المدير شبكة سحابية، استخدم مثال AWS أو GCP أو Azure من README.
- للمقارنة مع مهارات Claude Code الأخرى في التخطيط قبل الكود، راجع مقال gstack إن كان منشورًا عندك.
المصادر ونسبة الصور
- المستودع (MIT): https://github.com/caru-ini/stack-diagram
- README: https://github.com/caru-ini/stack-diagram#readme
- SKILL.md: https://github.com/caru-ini/stack-diagram/blob/main/skills/stack-diagram/SKILL.md
- الإصدارات (آخر تحقق: v0.4.0 فيه
stack-diagram.zip): https://github.com/caru-ini/stack-diagram/releases/latest - المعرض: https://stacks.caru.moe
- مواصفات Agent Skills: https://agentskills.io
(تم التحقق من الروابط والـ API في 10 نوفمبر 2026 Asia/Riyadh. النجوم وقت التحقق: 2202. آخر pushed_at: 2026-11-09 09:00 Asia/Riyadh. صورة الغلاف من تصميم أنور پآي. الأسماء والشعارات التجارية لأصحابها، وذكرها للتوضيح دون رعاية.)
كن أول من يعلّق — شارك سؤالك أو تجربتك مع هذا المحتوى.