المخططات

يدعم Markdown إنشاء مخططات متنوعة باستخدام Mermaid لإضافة تعبير بصري قوي للوثائق.

لمحة عن Mermaid

Mermaid أداة توليد مخططات نصية تدعم أنواعاً عديدة:

Flowchart (مخطط تدفق)
Sequence Diagram (مخطط تسلسل)
Gantt (مخطط جانت)
Class Diagram (مخطط فئات)
State Diagram (مخطط حالات)
Pie (مخطط دائري)
User Journey (رحلة المستخدم)
Git Graph (مخطط Git)

الصياغة الأساسية

Flowchart (مخطط تدفق)

markdown

```mermaid
flowchart TD
    A[بدء] --> B{هل تم تسجيل الدخول?}
    B -->|نعم| C[عرض الصفحة الرئيسية]
    B -->|لا| D[عرض صفحة تسجيل الدخول]
    C --> E[نهاية]
    D --> F[تسجيل دخول المستخدم]
    F --> G{نجح تسجيل الدخول?}
    G -->|نعم| C
    G -->|لا| H[عرض رسالة خطأ]
    H --> D


**العرض**:

```mermaid
flowchart TD
    A[بدء] --> B{هل تم تسجيل الدخول?}
    B -->|نعم| C[عرض الصفحة الرئيسية]
    B -->|لا| D[عرض صفحة تسجيل الدخول]
    C --> E[نهاية]
    D --> F[تسجيل دخول المستخدم]
    F --> G{نجح تسجيل الدخول?}
    G -->|نعم| C
    G -->|لا| H[عرض رسالة خطأ]
    H --> D

Sequence Diagram (مخطط تسلسل)

markdown

```mermaid
sequenceDiagram
    participant المستخدم
    participant الواجهة_الأمامية
    participant الخادم_الخلفي
    participant قاعدة_البيانات
    
    المستخدم->>الواجهة_الأمامية: طلب تسجيل الدخول
    الواجهة_الأمامية->>الخادم_الخلفي: التحقق من معلومات المستخدم
    الخادم_الخلفي->>قاعدة_البيانات: استعلام بيانات المستخدم
    قاعدة_البيانات-->>الخادم_الخلفي: إرجاع معلومات المستخدم
    الخادم_الخلفي-->>الواجهة_الأمامية: نتيجة التحقق
    الواجهة_الأمامية-->>المستخدم: استجابة تسجيل الدخول


**العرض**:

```mermaid
sequenceDiagram
    participant المستخدم
    participant الواجهة_الأمامية
    participant الخادم_الخلفي
    participant قاعدة_البيانات
    
    المستخدم->>الواجهة_الأمامية: طلب تسجيل الدخول
    الواجهة_الأمامية->>الخادم_الخلفي: التحقق من معلومات المستخدم
    الخادم_الخلفي->>قاعدة_البيانات: استعلام بيانات المستخدم
    قاعدة_البيانات-->>الخادم_الخلفي: إرجاع معلومات المستخدم
    الخادم_الخلفي-->>الواجهة_الأمامية: نتيجة التحقق
    الواجهة_الأمامية-->>المستخدم: استجابة تسجيل الدخول

شرح تفصيلي لمخططات التدفق

أنواع العقد

markdown

```mermaid
flowchart LR
    A[عقدة مربعة]
    B(عقدة مستديرة الزوايا)
    C((عقدة دائرية))
    D{عقدة معينية}
    E[[برنامج فرعي]]
    F[(قاعدة بيانات)]
    G>عقدة ملصق]


**العرض**:

```mermaid
flowchart LR
    A[عقدة مربعة]
    B(عقدة مستديرة الزوايا)
    C((عقدة دائرية))
    D{عقدة معينية}
    E[[برنامج فرعي]]
    F[(قاعدة بيانات)]
    G>عقدة ملصق]

أنواع الخطوط

markdown

```mermaid
flowchart TD
    A --> B
    C --- D
    E -.-> F
    G ==> H
    I --o J
    K --x L


**العرض**:

```mermaid
flowchart TD
    A --> B
    C --- D
    E -.-> F
    G ==> H
    I --o J
    K --x L

التحكم بالاتجاه

markdown

<!-- من الأعلى إلى الأسفل -->
```mermaid
flowchart TD
    A --> B

mermaid

flowchart BT
    A --> B

mermaid

flowchart LR
    A --> B

mermaid

flowchart RL
    A --> B


### مثال معقّد لمخطط تدفق

```markdown
```mermaid
flowchart TD
    Start([بدء المشروع]) --> Analysis[تحليل المتطلبات]
    Analysis --> Design[تصميم النظام]
    Design --> Dev{مرحلة التطوير}
    
    Dev --> Frontend[تطوير الواجهة الأمامية]
    Dev --> Backend[تطوير الخادم الخلفي]
    Dev --> Database[تصميم قاعدة البيانات]
    
    Frontend --> FrontTest[اختبار الواجهة الأمامية]
    Backend --> BackTest[اختبار الخادم الخلفي]
    Database --> DataTest[اختبار البيانات]
    
    FrontTest --> Integration[اختبار التكامل]
    BackTest --> Integration
    DataTest --> Integration
    
    Integration --> Deploy{التحضير للنشر}
    Deploy -->|نجح| Production[بيئة الإنتاج]
    Deploy -->|فشل| Bug[إصلاح المشاكل]
    Bug --> Integration
    
    Production --> Monitor[مراقبة وصيانة]
    Monitor --> End([اكتمال المشروع])
    
    style Start fill:#e1f5fe
    style End fill:#e8f5e8
    style Bug fill:#ffebee


**العرض**:

```mermaid
flowchart TD
    Start([بدء المشروع]) --> Analysis[تحليل المتطلبات]
    Analysis --> Design[تصميم النظام]
    Design --> Dev{مرحلة التطوير}
    
    Dev --> Frontend[تطوير الواجهة الأمامية]
    Dev --> Backend[تطوير الخادم الخلفي]
    Dev --> Database[تصميم قاعدة البيانات]
    
    Frontend --> FrontTest[اختبار الواجهة الأمامية]
    Backend --> BackTest[اختبار الخادم الخلفي]
    Database --> DataTest[اختبار البيانات]
    
    FrontTest --> Integration[اختبار التكامل]
    BackTest --> Integration
    DataTest --> Integration
    
    Integration --> Deploy{التحضير للنشر}
    Deploy -->|نجح| Production[بيئة الإنتاج]
    Deploy -->|فشل| Bug[إصلاح المشاكل]
    Bug --> Integration
    
    Production --> Monitor[مراقبة وصيانة]
    Monitor --> End([اكتمال المشروع])
    
    style Start fill:#e1f5fe
    style End fill:#e8f5e8
    style Bug fill:#ffebee

شرح تفصيلي لمخططات التسلسل

الصياغة الأساسية

markdown

```mermaid
sequenceDiagram
    Alice->>Bob: مرحباً Bob، كيف حالك؟
    Bob-->>Alice: بخير، شكراً!
    Alice-)Bob: وداعاً!


**العرض**:

```mermaid
sequenceDiagram
    Alice->>Bob: مرحباً Bob، كيف حالك؟
    Bob-->>Alice: بخير، شكراً!
    Alice-)Bob: وداعاً!

صناديق التفعيل وخط الحياة

markdown

```mermaid
sequenceDiagram
    participant A as العميل
    participant B as الخادم
    
    A->>+B: طلب بيانات
    Note right of B: معالجة الطلب
    B-->>-A: إرجاع البيانات
    
    A->>+B: طلب آخر
    B->>+B: معالجة داخلية
    B-->>-B: اكتملت المعالجة
    B-->>-A: إرجاع النتيجة


**العرض**:

```mermaid
sequenceDiagram
    participant A as العميل
    participant B as الخادم
    
    A->>+B: طلب بيانات
    Note right of B: معالجة الطلب
    B-->>-A: إرجاع البيانات
    
    A->>+B: طلب آخر
    B->>+B: معالجة داخلية
    B-->>-B: اكتملت المعالجة
    B-->>-A: إرجاع النتيجة

الحلقات والشروط

markdown

```mermaid
sequenceDiagram
    participant U as المستخدم
    participant S as النظام
    
    U->>S: طلب تسجيل الدخول
    
    alt اسم المستخدم موجود
        S->>S: التحقق من كلمة المرور
        alt كلمة المرور صحيحة
            S-->>U: نجح تسجيل الدخول
        else كلمة المرور خاطئة
            S-->>U: كلمة المرور خاطئة
        end
    else اسم المستخدم غير موجود
        S-->>U: المستخدم غير موجود
    end
    
    opt تذكر كلمة المرور
        S->>S: حفظ حالة تسجيل الدخول
    end


**العرض**:

```mermaid
sequenceDiagram
    participant U as المستخدم
    participant S as النظام
    
    U->>S: طلب تسجيل الدخول
    
    alt اسم المستخدم موجود
        S->>S: التحقق من كلمة المرور
        alt كلمة المرور صحيحة
            S-->>U: نجح تسجيل الدخول
        else كلمة المرور خاطئة
            S-->>U: كلمة المرور خاطئة
        end
    else اسم المستخدم غير موجود
        S-->>U: المستخدم غير موجود
    end
    
    opt تذكر كلمة المرور
        S->>S: حفظ حالة تسجيل الدخول
    end

Class Diagram (مخطط فئات)

markdown

```mermaid
classDiagram
    class Animal {
        +String name
        +int age
        +eat()
        +sleep()
    }
    
    class Dog {
        +String breed
        +bark()
        +wagTail()
    }
    
    class Cat {
        +String color
        +meow()
        +purr()
    }
    
    Animal <|-- Dog
    Animal <|-- Cat
    
    class Owner {
        +String name
        +feedPet()
    }
    
    Owner --> Animal : owns


**العرض**:

```mermaid
classDiagram
    class Animal {
        +String name
        +int age
        +eat()
        +sleep()
    }
    
    class Dog {
        +String breed
        +bark()
        +wagTail()
    }
    
    class Cat {
        +String color
        +meow()
        +purr()
    }
    
    Animal <|-- Dog
    Animal <|-- Cat
    
    class Owner {
        +String name
        +feedPet()
    }
    
    Owner --> Animal : owns

State Diagram (مخطط حالات)

markdown

```mermaid
stateDiagram-v2
    [*] --> خالٍ
    خالٍ --> تشغيل : بدء
    تشغيل --> إيقاف_مؤقت : إيقاف مؤقت
    تشغيل --> اكتمال : إنهاء
    إيقاف_مؤقت --> تشغيل : متابعة
    إيقاف_مؤقت --> إيقاف : إيقاف
    إيقاف --> خالٍ : إعادة تعيين
    اكتمال --> خالٍ : إعادة تعيين
    اكتمال --> [*]
    
    state تشغيل {
        [*] --> تهيئة
        تهيئة --> معالجة
        معالجة --> التحقق
        التحقق --> [*]
    }


**العرض**:

```mermaid
stateDiagram-v2
    [*] --> خالٍ
    خالٍ --> تشغيل : بدء
    تشغيل --> إيقاف_مؤقت : إيقاف مؤقت
    تشغيل --> اكتمال : إنهاء
    إيقاف_مؤقت --> تشغيل : متابعة
    إيقاف_مؤقت --> إيقاف : إيقاف
    إيقاف --> خالٍ : إعادة تعيين
    اكتمال --> خالٍ : إعادة تعيين
    اكتمال --> [*]
    
    state تشغيل {
        [*] --> تهيئة
        تهيئة --> معالجة
        معالجة --> التحقق
        التحقق --> [*]
    }

Gantt (مخطط جانت)

markdown

```mermaid
gantt
    title الجدول الزمني لتطوير المشروع
    dateFormat  YYYY-MM-DD
    section تحليل المتطلبات
    جمع المتطلبات          :done,    des1, 2024-01-01,2024-01-05
    تحليل المتطلبات          :done,    des2, after des1, 5d
    مراجعة المتطلبات          :done,    des3, after des2, 2d
    
    section مرحلة التصميم
    تصميم النظام          :active,  design1, 2024-01-12, 7d
    تصميم واجهة المستخدم           :         design2, after design1, 5d
    تصميم قاعدة البيانات        :         design3, after design1, 3d
    
    section مرحلة التطوير
    تطوير الواجهة الأمامية          :         dev1, after design2, 10d
    تطوير الخادم الخلفي          :         dev2, after design3, 12d
    الاختبار              :         test1, after dev1, 5d


**العرض**:

```mermaid
gantt
    title الجدول الزمني لتطوير المشروع
    dateFormat  YYYY-MM-DD
    section تحليل المتطلبات
    جمع المتطلبات          :done,    des1, 2024-01-01,2024-01-05
    تحليل المتطلبات          :done,    des2, after des1, 5d
    مراجعة المتطلبات          :done,    des3, after des2, 2d
    
    section مرحلة التصميم
    تصميم النظام          :active,  design1, 2024-01-12, 7d
    تصميم واجهة المستخدم           :         design2, after design1, 5d
    تصميم قاعدة البيانات        :         design3, after design1, 3d
    
    section مرحلة التطوير
    تطوير الواجهة الأمامية          :         dev1, after design2, 10d
    تطوير الخادم الخلفي          :         dev2, after design3, 12d
    الاختبار              :         test1, after dev1, 5d

Pie (مخطط دائري)

markdown

```mermaid
pie title مصادر زيارة الموقع
    "محركات البحث" : 45
    "وسائل التواصل الاجتماعي" : 25
    "الوصول المباشر" : 20
    "التسويق عبر البريد" : 7
    "أخرى" : 3


**العرض**:

```mermaid
pie title مصادر زيارة الموقع
    "محركات البحث" : 45
    "وسائل التواصل الاجتماعي" : 25
    "الوصول المباشر" : 20
    "التسويق عبر البريد" : 7
    "أخرى" : 3

User Journey (رحلة المستخدم)

markdown

```mermaid
journey
    title رحلة تسوق المستخدم
    section الاكتشاف
      زيارة الصفحة الرئيسية: 3: المستخدم
      تصفح المنتجات: 4: المستخدم
      بحث عن منتج: 4: المستخدم
    section التفكير
      عرض التفاصيل: 4: المستخدم
      مقارنة الأسعار: 3: المستخدم
      قراءة التقييمات: 5: المستخدم
    section الشراء
      إضافة إلى سلة التسوق: 4: المستخدم
      الدفع: 3: المستخدم
      الإتمام: 2: المستخدم
    section الاستخدام
      استلام المنتج: 5: المستخدم
      استخدام المنتج: 4: المستخدم
      كتابة تقييم: 4: المستخدم


**العرض**:

```mermaid
journey
    title رحلة تسوق المستخدم
    section الاكتشاف
      زيارة الصفحة الرئيسية: 3: المستخدم
      تصفح المنتجات: 4: المستخدم
      بحث عن منتج: 4: المستخدم
    section التفكير
      عرض التفاصيل: 4: المستخدم
      مقارنة الأسعار: 3: المستخدم
      قراءة التقييمات: 5: المستخدم
    section الشراء
      إضافة إلى سلة التسوق: 4: المستخدم
      الدفع: 3: المستخدم
      الإتمام: 2: المستخدم
    section الاستخدام
      استلام المنتج: 5: المستخدم
      استخدام المنتج: 4: المستخدم
      كتابة تقييم: 4: المستخدم

Git Graph (مخطط Git)

markdown

```mermaid
gitgraph
    commit id: "الالتزام الأولي"
    commit id: "إضافة وحدة المستخدم"
    branch feature/auth
    commit id: "إضافة وظيفة تسجيل الدخول"
    commit id: "إضافة وظيفة التسجيل"
    checkout main
    commit id: "إصلاح خطأ الصفحة الرئيسية"
    merge feature/auth
    commit id: "الإصدار v1.0"
    branch hotfix
    commit id: "إصلاح عاجل"
    checkout main
    merge hotfix
    commit id: "الإصدار v1.0.1"


**العرض**:

```mermaid
gitgraph
    commit id: "الالتزام الأولي"
    commit id: "إضافة وحدة المستخدم"
    branch feature/auth
    commit id: "إضافة وظيفة تسجيل الدخول"
    commit id: "إضافة وظيفة التسجيل"
    checkout main
    commit id: "إصلاح خطأ الصفحة الرئيسية"
    merge feature/auth
    commit id: "الإصدار v1.0"
    branch hotfix
    commit id: "إصلاح عاجل"
    checkout main
    merge hotfix
    commit id: "الإصدار v1.0.1"

سيناريوهات عملية

مخطط بنية النظام

markdown

```mermaid
flowchart TB
    subgraph "طبقة المستخدم"
        Web[متصفح الويب]
        Mobile[التطبيق المحمول]
        API[عميل API]
    end
    
    subgraph "طبقة البوابة"
        Gateway[بوابة API]
        Auth[خدمة المصادقة]
    end
    
    subgraph "طبقة الخدمات"
        UserService[خدمة المستخدم]
        OrderService[خدمة الطلبات]
        PaymentService[خدمة الدفع]
        NotificationService[خدمة الإشعارات]
    end
    
    subgraph "طبقة البيانات"
        UserDB[(قاعدة بيانات المستخدم)]
        OrderDB[(قاعدة بيانات الطلبات)]
        Cache[(ذاكرة Redis المؤقتة)]
        Queue[قائمة الرسائل]
    end
    
    Web --> Gateway
    Mobile --> Gateway
    API --> Gateway
    
    Gateway --> Auth
    Gateway --> UserService
    Gateway --> OrderService
    Gateway --> PaymentService
    
    UserService --> UserDB
    OrderService --> OrderDB
    PaymentService --> Queue
    NotificationService --> Queue
    
    UserService --> Cache
    OrderService --> Cache
    
    style Gateway fill:#e1f5fe
    style Auth fill:#fff3e0
    style Cache fill:#f3e5f5


### تدفق استدعاءات API

```markdown
```mermaid
sequenceDiagram
    participant C as العميل
    participant G as بوابة API
    participant A as خدمة المصادقة
    participant U as خدمة المستخدم
    participant D as قاعدة البيانات
    participant R as Redis
    
    C->>G: طلب معلومات المستخدم
    G->>A: التحقق من الرمز المميز
    A->>R: فحص ذاكرة التخزين المؤقت للرمز
    R-->>A: الرمز صالح
    A-->>G: نجحت المصادقة
    
    G->>U: الحصول على معلومات المستخدم
    U->>R: فحص ذاكرة التخزين المؤقت للمستخدم
    alt الذاكرة المؤقتة موجودة
        R-->>U: إرجاع بيانات المستخدم
    else الذاكرة المؤقتة غير موجودة
        U->>D: استعلام قاعدة البيانات
        D-->>U: إرجاع معلومات المستخدم
        U->>R: تحديث الذاكرة المؤقتة
    end
    
    U-->>G: إرجاع معلومات المستخدم
    G-->>C: استجابة بيانات المستخدم


### مخطط تدفّق الأعمال

```markdown
```mermaid
flowchart TD
    Start([طلب المستخدم]) --> Check{فحص المخزون}
    Check -->|يوجد مخزون| Reserve[حجز المخزون]
    Check -->|لا يوجد مخزون| OutOfStock[نفاد المخزون]
    OutOfStock --> Notify[إشعار المستخدم]
    Notify --> End1([انتهاء])
    
    Reserve --> Payment{معالجة الدفع}
    Payment -->|نجح| ConfirmOrder[تأكيد الطلب]
    Payment -->|فشل| ReleaseStock[تحرير المخزون]
    ReleaseStock --> PaymentFailed[فشل الدفع]
    PaymentFailed --> End2([انتهاء])
    
    ConfirmOrder --> UpdateInventory[تحديث المخزون]
    UpdateInventory --> SendNotification[إرسال إشعار]
    SendNotification --> Logistics[ترتيب الشحن]
    Logistics --> End3([اكتمال الطلب])
    
    style Start fill:#e8f5e8
    style End1 fill:#ffebee
    style End2 fill:#ffebee
    style End3 fill:#e8f5e8
    style OutOfStock fill:#ffebee
    style PaymentFailed fill:#ffebee


## الأنماط والسمات

### أنماط العقد

```markdown
```mermaid
flowchart LR
    A[النمط الافتراضي] --> B[النمط 1]
    A --> C[النمط 2]
    A --> D[النمط 3]
    
    style B fill:#f9f,stroke:#333,stroke-width:4px
    style C fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
    style D fill:#f96,stroke:#333,stroke-width:4px,color:#fff


### أنماط الفئات

```markdown
```mermaid
flowchart LR
    A[العقدة أ]:::classA --> B[العقدة ب]:::classB
    A --> C[العقدة ج]:::classC
    
    classDef classA fill:#e1f5fe,stroke:#01579b,stroke-width:2px
    classDef classB fill:#f3e5f5,stroke:#4a148c,stroke-width:2px
    classDef classC fill:#e8f5e8,stroke:#1b5e20,stroke-width:2px


## الإعداد والتوافقية

### إعداد VitePress

```javascript
// .vitepress/config.js
export default {
  markdown: {
    mermaid: true
  }
}

دعم GitHub

يدعم GitHub Mermaid بشكل أصيل، ويمكن استخدامه مباشرة في ملفات Markdown:

markdown

```mermaid
graph LR
    A --> B


### دعم منصات أخرى

| المنصة | حالة الدعم | المتطلبات |
|--------|-----------|-----------|
| **GitHub** | ✅ دعم أصيل | لا شيء |
| **GitLab** | ✅ دعم أصيل | لا شيء |
| **VitePress** | ✅ دعم إضافة | إعداد مطلوب |
| **Jekyll** | ✅ دعم إضافة | تثبيت إضافة |
| **Hugo** | ✅ دعم من القالب | يعتمد على الثيم |

## أفضل الممارسات

### نصائح التصميم

```markdown
✅ ممارسات مُوصى بها:

1. **الحفاظ على البساطة**:
   - تجنب المخططات المعقدة للغاية
   - استخدم تسميات وروابط واضحة

2. **تخطيط معقول**:
   - اختر اتجاه المخطط المناسب
   - حافظ على وضوح التدفق المنطقي

3. **توحيد الأنماط**:
   - استخدم موضوع ألوان متسق
   - حافظ على توحيد أسلوب المخططات

4. **إضافة الشروحات**:
   - أضف عناوين للمخططات المعقدة
   - قدم شروحات نصية ضرورية

❌ تجنب:

1. مخططات معقدة جداً يصعب فهمها
2. تقاطعات زائدة في خطوط الاتصال
3. تسميات غامضة وغير واضحة
4. نقص الأسطورة الضرورية

اعتبارات الأداء

markdown

- **تحسين المخططات الكبيرة**:
  - فكر في تقسيم المخططات المعقدة
  - استخدم المخططات الفرعية لتنظيم البنية

- **أداء التحميل**:
  - تجنب استخدام عدد كبير من المخططات في صفحة واحدة
  - فكر في تطبيق التحميل الكسول

- **التكيف مع الجوال**:
  - تأكد من إمكانية قراءة المخططات على الشاشات الصغيرة
  - فكر في تصميم التمرير الأفقي

قواعد ذات صلة

تضمين HTML - ميزات HTML
الصيغ الرياضية - تعبيرات LaTeX
أفضل الممارسات - نصائح كتابة

أدوات وموارد

محررات على الإنترنت

Mermaid Live Editor: المحرر الرسمي
Draw.io: أداة رسم عامة
Lucidchart: منصة احترافية للرسم
Excalidraw: رسومات بأسلوب يدوي

أدوات التطوير

Mermaid CLI: أداة سطر أوامر
VS Code Mermaid: إضافة VS Code
Atom Mermaid: إضافة Atom
IntelliJ Mermaid: إضافة JetBrains

مراجع

توثيق Mermaid الرسمي: مرجع كامل للصياغة
مكتبة أمثلة Mermaid: أمثلة متنوعة
Mermaid على GitHub: الاستخدام ضمن GitHub
Awesome Mermaid: مجموعات موارد

بإتقان صياغة المخططات ستنشئ رسوماً احترافية تعزز وضوح المحتوى وفهمه.

المخططات ​

لمحة عن Mermaid ​

الصياغة الأساسية ​

Flowchart (مخطط تدفق) ​

Sequence Diagram (مخطط تسلسل) ​

شرح تفصيلي لمخططات التدفق ​

أنواع العقد ​

أنواع الخطوط ​

التحكم بالاتجاه ​

شرح تفصيلي لمخططات التسلسل ​

الصياغة الأساسية ​

صناديق التفعيل وخط الحياة ​

الحلقات والشروط ​

Class Diagram (مخطط فئات) ​

State Diagram (مخطط حالات) ​

Gantt (مخطط جانت) ​

Pie (مخطط دائري) ​

User Journey (رحلة المستخدم) ​

Git Graph (مخطط Git) ​

سيناريوهات عملية ​

مخطط بنية النظام ​

دعم GitHub ​

اعتبارات الأداء ​

قواعد ذات صلة ​

أدوات وموارد ​

محررات على الإنترنت ​

أدوات التطوير ​

مراجع ​

المخططات

لمحة عن Mermaid

الصياغة الأساسية

Flowchart (مخطط تدفق)

Sequence Diagram (مخطط تسلسل)

شرح تفصيلي لمخططات التدفق

أنواع العقد

أنواع الخطوط

التحكم بالاتجاه

شرح تفصيلي لمخططات التسلسل

الصياغة الأساسية

صناديق التفعيل وخط الحياة

الحلقات والشروط

Class Diagram (مخطط فئات)

State Diagram (مخطط حالات)

Gantt (مخطط جانت)

Pie (مخطط دائري)

User Journey (رحلة المستخدم)

Git Graph (مخطط Git)

سيناريوهات عملية

مخطط بنية النظام

دعم GitHub

اعتبارات الأداء

قواعد ذات صلة

أدوات وموارد

محررات على الإنترنت

أدوات التطوير

مراجع