Concept Diagrams — Generate flat, minimal educational SVG visuals as HTML
Concept Diagrams — Generate flat, minimal educational SVG visuals as HTML
ابدأ بالمعنى، ثم انتقل إلى التفاصيل.
هذا الدرس يشرح Concept Diagrams — Generate flat, minimal educational SVG visuals as HTML ضمن موضوع توسيع Hermes وربطه بأدوات أخرى. ستعرف ما الذي يفعله هذا الجزء، متى تحتاجه، وما أصغر خطوة آمنة للتأكد أنه يعمل.
إن كنت جديدًا: لا تحفظ الأسماء. ركّز على ثلاثة أسئلة: ما المشكلة التي يحلها هذا الجزء؟ ما البيانات أو الصلاحيات التي يحتاجها؟ وكيف أعرف أن النتيجة صحيحة؟
للتطبيق: اقرأ المثال الأول، حدّد ما سيغيّره، نفّذه على بيانات تجريبية، ثم قارن الناتج بما وعد به المصدر.
للمتخصص: راجع Skill metadata، Reference: full SKILL.md، Scope، ثم افحص حالات الفشل والتوافق مع إصدارك.
أكمل التثبيت وأول مهمة قبل إضافة قدرات جديدة.
نتيجة واضحة قبل أن تقرأ.
- تفهم Concept Diagrams — Generate flat, minimal educational SVG visuals as HTML من دون افتراض معرفة سابقة.
- تفرّق بين الوصف والمعلومة التي تحتاج إلى اختبار في بيئتك.
- اقرأ الأمر الأول وحدد المدخلات والمخرجات قبل نسخه.
تعريفات قصيرة قبل التفاصيل.
- Skill
- حزمة تعليمات تعلّم Hermes طريقة عمل متكررة من دون إضافة خدمة خارجية بالضرورة.
Generate flat, minimal educational SVG visuals as HTML
ما الذي يقوله المصدر، وبأي ترتيب؟
- 01Skill metadata
ابدأ بهذا القسم لتفهم الفكرة أو البنية الأساسية.
- 02Reference: full SKILL.md
اقرأه بعد الأساسيات، ثم اربطه بالخطوة السابقة قبل المتابعة.
- 03Scope
اقرأه بعد الأساسيات، ثم اربطه بالخطوة السابقة قبل المتابعة.
- 04Workflow
اقرأه بعد الأساسيات، ثم اربطه بالخطوة السابقة قبل المتابعة.
- 05Design System
اقرأه بعد الأساسيات، ثم اربطه بالخطوة السابقة قبل المتابعة.
- 06Philosophy
اقرأه بعد الأساسيات، ثم اربطه بالخطوة السابقة قبل المتابعة.
- 07Color Palette
اقرأه بعد الأساسيات، ثم اربطه بالخطوة السابقة قبل المتابعة.
- 08Color Assignment Rules
اقرأه بعد الأساسيات، ثم اربطه بالخطوة السابقة قبل المتابعة.
- 09Typography
اقرأه بعد الأساسيات، ثم اربطه بالخطوة السابقة قبل المتابعة.
- 10Spacing & Layout
اختم بهذا القسم لتفحص النتيجة والحالات الخاصة.
انسخ بعد أن تفهم الأثر.
skill_view(name="concept-diagrams", file_path="templates/template.html")Use `marker-end="url(#arrow)"` on lines. The arrowhead inherits the line color via `context-stroke`.
### CSS Classes (Provided by the Template)
The template page provides:
- Text: `.t`, `.ts`, `.th`
- Neutral: `.box`, `.arr`, `.leader`, `.node`
- Color ramps: `.c-purple`, `.c-teal`, `.c-coral`, `.c-pink`, `.c-gray`, `.c-blue`, `.c-green`, `.c-amber`, `.c-red` (all with automatic light/dark mode)
You do **not** need to redefine these — just apply them in your SVG. The template file contains the full CSS definitions.
---
## SVG Boilerplate
Every SVG inside the template page starts with thReplace `{HEIGHT}` with the actual computed height (last element bottom + 40px).
### Node Patterns
**Single-line node (44px):**اقرأ الأمر الأول وحدد المدخلات والمخرجات قبل نسخه.
طابق أي أمر مع إصدار Hermes المثبّت، وراجع الملفات والحسابات التي قد يصل إليها، واستخدم بيانات غير حساسة في أول اختبار. إذا اختلف الشرح عن المصدر، فالمصدر الرسمي هو المرجع النهائي.