معمارية Hermes Diagram — Dark-themed SVG architecture/cloud/infra diagrams as HTML

الفكرة في دقيقة

ابدأ بالمعنى، ثم انتقل إلى التفاصيل.

هذا الدرس يشرح معمارية Hermes Diagram — Dark-themed SVG architecture/cloud/infra diagrams as HTML ضمن موضوع داخل Hermes وكيف يوسّعه المطور. ستعرف ما الذي يفعله هذا الجزء، متى تحتاجه، وما أصغر خطوة آمنة للتأكد أنه يعمل.

إن كنت مبتدئًا

إن كنت جديدًا: لا تحفظ الأسماء. ركّز على ثلاثة أسئلة: ما المشكلة التي يحلها هذا الجزء؟ ما البيانات أو الصلاحيات التي يحتاجها؟ وكيف أعرف أن النتيجة صحيحة؟

للتطبيق العملي

للتطبيق: اقرأ المثال الأول، حدّد ما سيغيّره، نفّذه على بيانات تجريبية، ثم قارن الناتج بما وعد به المصدر.

للمتخصص

للمتخصص: راجع Skill metadata، Reference: full SKILL.md، Scope، ثم افحص حالات الفشل والتوافق مع إصدارك.

ما الذي تحتاجه قبل البدء؟

اعرف Python وGit وبنية مشروع برمجي قبل تعديل الكود.

ماذا ستعرف؟

نتيجة واضحة قبل أن تقرأ.

تفهم معمارية Hermes Diagram — Dark-themed SVG architecture/cloud/infra diagrams as HTML من دون افتراض معرفة سابقة.
تفرّق بين الوصف والمعلومة التي تحتاج إلى اختبار في بيئتك.
اقرأ الأمر الأول وحدد المدخلات والمخرجات قبل نسخه.

مصطلحات هذا الدرس

تعريفات قصيرة قبل التفاصيل.

Skill: حزمة تعليمات تعلّم Hermes طريقة عمل متكررة من دون إضافة خدمة خارجية بالضرورة.
Automation: تشغيل مهمة لاحقًا أو دوريًا مع شروط نجاح وفشل واضحة.

وصف الصفحة الرسمي

Dark-themed SVG architecture/cloud/infra diagrams as HTML

خريطة الموضوع

ما الذي يقوله المصدر، وبأي ترتيب؟

01
Skill metadata
ابدأ بهذا القسم لتفهم الفكرة أو البنية الأساسية.
02
Reference: full SKILL.md
اقرأه بعد الأساسيات، ثم اربطه بالخطوة السابقة قبل المتابعة.
03
Scope
اقرأه بعد الأساسيات، ثم اربطه بالخطوة السابقة قبل المتابعة.
04
Workflow
اقرأه بعد الأساسيات، ثم اربطه بالخطوة السابقة قبل المتابعة.
05
Output Location
اقرأه بعد الأساسيات، ثم اربطه بالخطوة السابقة قبل المتابعة.
06
Preview
اقرأه بعد الأساسيات، ثم اربطه بالخطوة السابقة قبل المتابعة.
07
Design System & Visual Language
اقرأه بعد الأساسيات، ثم اربطه بالخطوة السابقة قبل المتابعة.
08
Color Palette (Semantic Mapping)
اقرأه بعد الأساسيات، ثم اربطه بالخطوة السابقة قبل المتابعة.
09
Typography & Background
اقرأه بعد الأساسيات، ثم اربطه بالخطوة السابقة قبل المتابعة.
10
Technical Implementation Details
اختم بهذا القسم لتفحص النتيجة والحالات الخاصة.

أمثلة من الصفحة الرسمية

انسخ بعد أن تفهم الأثر.

./[project-name]-architecture.html

# macOS
open ./my-architecture.html
# Linux
xdg-open ./my-architecture.html

## Technical Implementation Details

### Component Rendering
Components are rounded rectangles (`rx="6"`) with 1.5px strokes. To prevent arrows from showing through semi-transparent fills, use a **double-rect masking technique**:
1. Draw an opaque background rect (`#0f172a`)
2. Draw the semi-transparent styled rect on top

### Connection Rules
- **Z-Order:** Draw arrows *early* in the SVG (after the grid) so they render behind component boxes
- **Arrowheads:** Defined via SVG markers
- **Security Flows:** Use dashed lines in rose color (`#fb7185`)
- **Boundaries:**
  - *Security Groups:* Dashe

تطبيق الآن

اقرأ الأمر الأول وحدد المدخلات والمخرجات قبل نسخه.

طابق أي أمر مع إصدار Hermes المثبّت، وراجع الملفات والحسابات التي قد يصل إليها، واستخدم بيانات غير حساسة في أول اختبار. إذا اختلف الشرح عن المصدر، فالمصدر الرسمي هو المرجع النهائي.

اختبار الفهم

ثلاثة قرارات قبل علامة الاكتمال.

1. ما المرجع النهائي عند تغيّر معلومات «شرح Architecture Diagram — Dark-themed SVG architecture/cloud/infra diagrams as HTML»؟منشور غير مؤرخالتوثيق الرسمي ومستودع Hermesنتيجة بحث بلا مصدر

2. ما أفضل طريقة لتطبيق هذا الدرس؟نسخ كل أمر مباشرةتنفيذ خطوة صغيرة ثم التحقق من نتيجتهامنح كل الصلاحيات لتوفير الوقت

3. ماذا تفعل قبل خطوة قد تعدّل ملفات أو حسابًا خارجيًا؟تراجع النطاق والصلاحيات ومسار التراجعتلغي العزلتشارك المفتاح في المحادثة