Markdown: الميزات المتق��مة والرسوم البيانية في Markdown

عندما لا تكون الصيغة الأساسية كافية، تمنح امتدادات Markdown المتقدمة مستنداتك قدرات تنافس أدوات التنضيد الاحترافية.

1. ما ستتعلمه

• رس�� المخططات الانسيابية والرسوم البيانية باستخدام Mermaid
• تضمين الصيغ الرياضية في Markdown
• إدارة بيانات المستند الوصفية باستخدام واجهة YAML الأمامية
• استخدام Markdown في ال��واقع الثابتة
• الامتدادات الشائعة والنظام البيئي للأدوات

2. قصة حقيقية لقائد فريق تقني

(1) نقطة الألم: أوصاف البنية النصية فقط غير فعالة

وصف سام تغييرات بنية الخدمات الصغرى في تقارير الفريق الأسبوعية بنص عادي: "هناك ثلاث خدمات: خدمة المستخدم تستقبل الطلب، ثم تستدعي خدمة الطلب، التي تستدعي خدمة الدفع..." استغرقت كتابة هذا الوصف 10 دقائق كل مرة، وقال أعضاء الفريق "اضطررنا لقراءته عدة مرات لفهمه." الأسوأ من ذلك، كان رسم البنية مرسومًا في Visio، مما يتطلب تطبيقًا متخصصًا لكل تعديل.

(2) الحل: تضمين رسوم Mermaid البيانية في المستندات

اكتشف سام أن Markdown يدعم صيغة رسوم Mermaid البيانية — يمكنك توليد رسوم البنية بكتابة التعليمات البرمجية مباشرة في المستند:

graph LR
    A[العميل] --> B[خدمة المستخدم]
    B --> C[خدمة الطلب]
    C --> D[خدمة الدفع]
    D --> E[API البنك]

graph LR
    A[العميل] --> B[خدمة المستخدم]
    B --> C[خدمة الطلب]
    C --> D[خدمة الدفع]
    D --> E[API البنك]

عدل بضعة أسطر من التعليمات البرمجية عند تغير البنية — لا مزيد من فتح Visio. ارتفعت معدلات إكمال قراءة التقارير الأسبوعية للفريق من 60% إلى 92%.

3. رسوم Mermaid البيانية

Mermaid هي أداة لتحويل النص إلى رسوم بيانية تدعم أنواع متعددة من المخططات. استخدم كتلة التعليمات البرمجية ```mermaid في Markdown:

(1) المخطط الانسيابي

graph TB
    A[بداية] --> B{شرط}
    B -->|نعم| C[معالجة المنطق]
    B -->|لا| D[نهاية]
    C --> D

graph TB
    A[بداية] --> B{شرط}
    B -->|نعم| C[معالجة المنطق]
    B -->|لا| D[نهاية]
    C --> D

graph TB
    A[عقدة مستطيلة] --> B{قرار معين}
    B -->|الشرط 1| C[النتيجة 1]
    B -->|الشرط 2| D[النتيجة 2]

(2) مخطط التتابع

sequenceDiagram
    participant U as المستخدم
    participant F as الواجهة الأمامية
    participant B as الواجهة الخلفية
    U->>F: نقر تسجيل الدخول
    F->>B: POST /api/login
    B-->>F: إرجاع الرمز
    F-->>U: إعادة توجيه إلى الرئيسية

sequenceDiagram
    participant U as المستخدم
    participant F as الواجهة الأمامية
    participant B as الواجهة الخلفية
    U->>F: نقر تسجيل الدخول
    F->>B: POST /api/login
    B-->>F: إرجاع الرمز
    F-->>U: إعادة توجيه إلى الرئيسية

(3) المخطط الدائري

pie title توزيع المكدس التقني
    "الواجهة الأمامية" : 40
    "الواجهة الخلفية" : 35
    "DevOps" : 15
    "البيانات" : 10

pie title توزيع المكدس التقني
    "الواجهة الأمامية" : 40
    "الواجهة الخلفية" : 35
    "DevOps" : 15
    "البيانات" : 10

▶ مثال: رسم بنية المشروع باستخدام Mermaid

graph LR
    subgraph الواجهة الأمامية
        A[Vue.js]
        B[Axios]
    end
    subgraph الواجهة الخلفية
        C[FastAPI]
        D[PostgreSQL]
    end
    subgraph خارجي
        E[Redis Cache]
    end
    A --> B
    B --> C
    C --> D
    C --> E

graph LR
    subgraph الواجهة الأمامية
        A[Vue.js]
        B[Axios]
    end
    subgraph الواجهة الخلفية
        C[FastAPI]
        D[PostgreSQL]
    end
    subgraph خارجي
        E[Redis Cache]
    end
    A --> B
    B --> C
    C --> D
    C --> E

4. واجهة YAML الأمامية

واجهة YAML الأمامية هي كتلة بيانات وصفية في أعلى ملف Markdown، محاطة بـ ---:

---
title: درس Markdown للمبتدئين
description: درس كامل لتعلم صيغة Markdown من الصفر
author: أليكس
date: 2026-06-15
tags: [markdown, توثيق, مبتدئ]
status: منشور
---

(1) حقول الواجهة الأمامية الشائعة

▶ مثال: واجهة أمامية كاملة لمقال

---
title: تحليل البيانات باستخدام Python
description: دليل لتحليل البيانات باستخدام Pandas و Matplotlib
date: 2026-06-15
tags: [python, تحليل-بيانات, pandas]
author: أليكس
draft: false
---

5. الصيغ الرياضية (LaTeX)

بعض محللات Markdown تدعم تضمين الصيغ الرياضية باستخدام صيغة LaTeX:

(1) الصيغ المضمنة

معادلة تكافؤ الكتلة والطاقة لأينشتاين: $E = mc^2$

مساحة الدائرة: $A = \pi r^2$

(2) الصيغ على مستوى الكتلة

$$
\sum_{i=1}^{n} i = \frac{n(n+1)}{2}
$$

$$
f(x) = \int_{-\infty}^{\infty} \hat{f}(\xi) e^{2\pi i \xi x} d\xi
$$

6. مولدات المواقع الثابتة

Markdown + مولد مواقع ثابتة = بناء سريع للمواقع:

graph LR
    A[كتابة محتوى Markdown] --> B[مولد موقع ثابت]
    B --> C[توليد HTML/CSS/JS]
    C --> D[نشر إلى خادم]
    C --> E[نشر إلى GitHub Pages]
    C --> F[نشر إلى Netlify]

graph LR
    A[كتابة محتوى Markdown] --> B[مولد موقع ثابت]
    B --> C[توليد HTML/CSS/JS]
    C --> D[نشر إلى خادم]
    C --> E[نشر إلى GitHub Pages]
    C --> F[نشر إلى Netlify]

▶ مثال: بدء مدونة باستخدام Hugo

خطوات إعداد مدونة Hugo:
1. التثبيت: brew install hugo
2. إنشاء الموقع: hugo new site my-blog
3. إضافة سمة: cd my-blog && git init && git submodule add ...
4. إنشاء محتوى: hugo new posts/my-first-post.md
5. المعاينة: hugo server -D

7. امتدادات مفيدة أخرى

(1) الهوامش

هذا النص يحتاج إلى هامش[^1].

[^1]: هذا هو محتوى الهامش، يُعرض عادةً في أسفل الصفحة.

هذا سطر آخر يحتاج إلى هامش[^ملاحظة-ثانية].

[^ملاحظة-ثانية]: هامش ثانٍ، يدعم المحتوى متعدد الأسطر.
  يجب إزاحة أسطر الاستمرار بمقدار مسافتين.

(2) قوائم التعريفات

Markdown
:   لغة ترميز خفيفة أنشأها جون غروبر.

GFM
:   GitHub Flavored Markdown، نسخة موسعة من Markdown.
:   تضيف جداول وقوائم مهام ومشطوب والمزيد.

▶ مثال: استخدام الهوامش في مقال

تظهر الأبحاث أن الجلوس المطول يؤثر بشكل كبير على الصحة[^1].
30 دقيقة من التمارين المعتدلة يوميًا يمكن أن تقلل من المخاطر[^2].

[^1]: سميث وآخرون. (2024). السلوك الخامل ونتائج الصحة.
[^2]: منظمة الصحة العالمية. (2024). إرشادات النشاط البدني.

8. مثال كامل: مقال Markdown بميزات متقدمة

بيانات المقال الوصفية (واجهة YAML الأمامية):
  العنوان: منشور مدونتي التقنية
  التاريخ: 2026-06-15
  الوسوم: [markdown, درس]

هيكل المحتوى:
1. بنية المشروع — مخطط Mermaid انسيابي: العميل → بوابة API → الخدمات → قاع��ة البيانات
2. الخوارزمية الأساسية — صيغة LaTeX توضح خوارزمية TF-IDF
3. خطوات النشر — قائمة مرتبة: build → scp → reload nginx
4. الهوامش — استشهادات مرجعية

النتيجة المتوقعة: مقال تقني كامل يجمع بين رسوم Mermaid البيانية وصيغ LaTeX وبيانات YAML الوصفية والهوامش.

❓ أسئلة شائعة

📖 ملخص

• Mermaid يدعم المخططات الانسيابية ومخططات التتابع والمخططات الدائرية والمزيد — ولّد رسومًا بيانية بالتعليمات البرمجية
• صيغ LaTeX الرياضية تستخدم $...$ (مضمنة) و $$...$$ (كتلة)
• واجهة YAML الأمامية تدير بيانات المقالات الوصفية (العنوان، التاريخ، الوسوم، إلخ)
• مولدات المواقع الثابتة تصرف Markdown إلى مواقع كاملة
• الهوامش تستخدم مؤشرات [^1]؛ قوائم التعريفات تستخدم تنسيق الإزاحة
• الامتدادات المتقدمة تعتمد على منصات محددة — تحقق من التوافق عند الترحيل بين المنصات

📝 تمارين

1. مبتدئ: باستخدام Mermaid، ارسم مخططًا انسيابيًا لروتينك اليومي (مثلاً "استيقظ → تنقل → عمل → عد إلى المنزل")، مع 5 عقد على الأقل.

2. متوسط: اكتب مسودة منشور مدونة بواجهة YAML أمامية، تتضمن مخطط Mermaid انسيابيًا (بنية المشروع) وه��مشين على الأقل. إذا كنت تستخدم GitHub، تحقق من عرض رسم Mermaid البياني بشكل صحيح.

3. متقدم: قم بإعداد مدونة Hugo أو Hexo محلية، واكتب 3 منشورات Markdown تحتوي على رسوم Mermaid البيانية وجداول وكتل تعليمات برمجية. عاين محليًا باستخدام hugo server أو hexo server.

فريق Web-Tutorial التقني

منصة دروس برمجية يديرها عدة مطورين. كل درس يتم كتابته ومراجعته بواسطة مطورين متخصصين في المجال. نعمل على ضمان دقة وموثوقية المحتوى — إذا لاحظت أي مشكلة، فيرجى إخبارنا.

من نحن