مخططات Mermaid

حوّل الأفكار المعقدة إلى مخططات بصرية واضحة — مباشرة داخل ملفات Markdown. يدعم Moraya 9 أنواع من مخططات Mermaid مع معاينة فورية، وتحميل كسول للعرض لأداء مثالي، وتكيّف تلقائي مع السمة الفاتحة/الداكنة.

أنواع المخططات المدعومة

1. مخطط التدفق

نمذجة العمليات وأشجار القرار وسير العمل باستخدام الرسوم البيانية الموجهة.

graph TD
    Start([بدء التحضير]) --> CheckCup{هل تم الكشف عن كوب؟}
    CheckCup -- لا --> Alert[الرجاء وضع كوب]
    Alert --> CheckCup
    CheckCup -- نعم --> Choose[اختيار المشروب]

    Choose --> Type{نوع المشروب}
    Type -- إسبريسو --> Brew[استخلاص بالضغط العالي]
    Type -- لاتيه/كابتشينو --> Milk[تسخين ورغوة الحليب]

    Milk --> Brew
    Brew --> Quality{الضغط طبيعي؟}
    Quality -- غير طبيعي --> Error[توقف وتنبيه]
    Quality -- طبيعي --> Pour[صب في الكوب]

    Pour --> Finish([التحضير مكتمل])

2. مخطط التسلسل

تصوّر التفاعلات بين الأنظمة والخدمات والجهات الفاعلة عبر الزمن.

sequenceDiagram
    autonumber
    participant App as تطبيق الهاتف
    participant Cloud as الخادم السحابي
    participant Lock as القفل الذكي

    App->>Cloud: إرسال طلب فتح القفل (رمز مشفر)
    Note over Cloud: التحقق من صلاحية الرمز

    alt التحقق ناجح
        Cloud->>Lock: إرسال أمر فتح القفل (MQTT)
        Lock->>Lock: المحرك يدور
        Lock-->>Cloud: الحالة: مفتوح
        Cloud-->>App: إشعار: تم فتح الباب
    else الرمز منتهي
        Cloud-->>App: خطأ: انتهت الجلسة
    end

3. مخطط غانت

تخطيط الجداول الزمنية والمعالم وجداول المشاريع.

gantt
    title رحلة برية في عطلة مايو 2026
    dateFormat  YYYY-MM-DD
    axisFormat  %m-%d

    section التحضير
    تخطيط المسار                    :done,    p1, 2026-04-20, 3d
    صيانة المركبة                   :active,  p2, 2026-04-23, 2d
    شراء معدات التخييم              :         p3, after p2, 3d

    section الرحلة
    تشنغدو←كانغدينغ                 :milestone, m1, 2026-05-01, 0d
    تصوير جبل جيدو                  :         t1, 2026-05-01, 1d
    جولة شيندوتشياو                 :         t2, after t1, 2d
    رحلة داوتشنغ يادينغ             :crit,    t3, 2026-05-04, 3d

4. مخطط الحالة

رسم خرائط آلات الحالة وتحولات دورة الحياة.

stateDiagram-v2
    [*] --> Draft: إنشاء مسودة
    Draft --> Pending: تقديم للمراجعة
    Pending --> Draft: مرفوض
    Pending --> Published: موافق عليه
    Published --> Hidden: إيقاف النشر
    Hidden --> Published: إعادة النشر
    Published --> Deleted: حذف
    Hidden --> Deleted: حذف
    Deleted --> [*]

5. مخطط الأصناف

تصميم الهياكل والعلاقات الكائنية التوجه.

classDiagram
    class Character {
        +String name
        +int level
        +move()
        +attack()
    }
    class Warrior {
        +int stamina
        +shieldBash()
    }
    class Mage {
        +int mana
        +fireBall()
    }
    class Weapon {
        +int damage
        +upgrade()
    }

    Character <|-- Warrior : وراثة
    Character <|-- Mage : وراثة
    Character "1" *-- "1" Weapon : تكوين المعدات

6. مخطط علاقات الكيانات

نمذجة كيانات قاعدة البيانات وعلاقاتها.

erDiagram
    MEMBER ||--o{ ORDER : "يدفع"
    COACH ||--o{ COURSE : "يُدرّس"
    MEMBER }|--|{ COURSE : "يحجز"

    MEMBER {
        int member_id PK
        string name
        string phone
    }
    COURSE {
        int course_id PK
        string title
        datetime start_time
    }
    ORDER {
        int order_id PK
        float amount
    }

7. المخطط الدائري

عرض البيانات النسبية بنظرة واحدة.

pie title أفضل لغات البرمجة المؤسسية 2026
    "Java" : 30
    "Go" : 25
    "Python" : 20
    "Rust" : 15
    "TypeScript" : 10

8. الخريطة الذهنية

تنظيم الأفكار والمعرفة بشكل هرمي.

mindmap
  root((قاعدة المعرفة الشخصية))
    المدخلات
      ملاحظات القراءة
      مقتطفات البودكاست
      قصاصات الويب
    الاستيعاب
      طريقة زيتلكاستن
      روابط ثنائية الاتجاه
      مراجعة يومية
    المخرجات
      مدونة تقنية
      مشاريع مفتوحة المصدر
      دورات معرفية

9. رحلة المستخدم

رسم خريطة تجارب المستخدم والحالات العاطفية عبر المراحل.

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

وضع التحرير/المعاينة المزدوج

يقدم كل كتلة Mermaid في Moraya وضعين للتفاعل:

• وضع المعاينة — انقر على المخطط لرؤية المخرجات المعروضة مع التحريك والتكبير
• وضع التحرير — انقر على أيقونة القلم لتعديل كود Mermaid المصدري مباشرة

التبديل بين الأوضاع فوري دون مغادرة المستند.

تكيّف السمة

تتكيف مخططات Mermaid تلقائيًا مع السمة الحالية — خلفيات فاتحة للوضع الفاتح، وخلفيات داكنة للوضع الداكن. لا حاجة لأي تكوين يدوي.

التحميل الكسول للعرض

يتم تحميل Mermaid عند الطلب — فقط عندما يحتوي مستندك على كتلة كود Mermaid. هذا يحافظ على بدء تشغيل Moraya الفوري والحد الأدنى من استهلاك الذاكرة.