محرر مخططات UML (Mermaid)

لماذا تكتب المخططات كنص

• سهلة التغيير. إعادة تسمية صنف أو إضافة خطوة تعديل من سطر واحد، والتخطيط يضبط نفسه.
• تناسب أنظمة إدارة الإصدارات. المخطط بضعة أسطر من النص العادي، فتظهر التغييرات بوضوح في المقارنة.
• تعمل في أماكن أخرى أيضًا. GitHub وGitLab وNotion وObsidian وأدوات توثيق كثيرة تعرض Mermaid مباشرة، فيعمل النص نفسه في README.

مخططات الأصناف

تُظهر مخططات الأصناف بنية النظام: الأصناف، وما تحتويه، وكيف ترتبط.

classDiagram
    class Order {
      +int id
      +Date created
      +addItem(Product p)
      +total() double
    }
    class Customer {
      +String name
      +String email
    }
    Customer "1" --> "*" Order : places
    Order *-- LineItem : contains
    LineItem --> Product

علامة + تعني عضوًا عامًا و- عضوًا خاصًا. والعضو ذو الأقواس دالة؛ والنص بعد القوس الختامي نوع القيمة المعادة.

العلاقات

الواجهات والأصناف المجردة

classDiagram
    class PaymentGateway {
      <<interface>>
      +charge(int cents) bool
    }
    class StripeGateway
    PaymentGateway <|.. StripeGateway

مخططات التسلسل

تُظهر مخططات التسلسل الرسائل المتبادلة بين المشاركين عبر الزمن، من الأعلى إلى الأسفل.

sequenceDiagram
    participant U as User
    participant W as Web app
    participant D as Database
    U->>W: Submit form
    W->>D: INSERT order
    D-->>W: OK
    W-->>U: Order confirmed

->> طلب و-->> (المتقطع) رد. واستخدم كتل loop وalt/else وopt للتكرار والتفرعات:

sequenceDiagram
    Client->>Server: Login
    alt valid password
        Server-->>Client: Token
    else wrong password
        Server-->>Client: 401 Unauthorized
    end

مخططات الحالات

تُظهر مخططات الحالات الحالات التي يمكن أن يكون فيها شيء ما وما الذي ينقله بينها. و[*] هي البداية أو النهاية.

stateDiagram-v2
    [*] --> Draft
    Draft --> Submitted : submit
    Submitted --> Approved : approve
    Submitted --> Rejected : reject
    Rejected --> Draft : edit
    Approved --> Published
    Published --> [*]

مخططات الكيانات والعلاقات

تمثّل مخططات ER جداول قاعدة البيانات وكيف ترتبط. والرموز على طرفي الخط تعطي العددية: || واحد بالضبط، وo{ صفر أو أكثر، و|{ واحد أو أكثر.

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE_ITEM : contains
    PRODUCT ||--o{ LINE_ITEM : "appears in"
    CUSTOMER {
      int id PK
      string email
    }
    ORDER {
      int id PK
      int customer_id FK
      date created
    }

المخططات الانسيابية

ليست UML بالمعنى الدقيق، لكنها غالبًا ما تحتاجه لعملية أو حالة استخدام. LR يرسمها من اليسار إلى اليمين، وTD من الأعلى إلى الأسفل، وRL من اليمين إلى اليسار. والتسميات العربية تعمل بين علامتي اقتباس.

flowchart TD
    A["وصل الطلب"] --> B{"مسجّل الدخول؟"}
    B -- نعم --> C["اعرض لوحة التحكم"]
    B -- لا --> D["اعرض صفحة الدخول"]
    D --> B

نصائح

• ابدأ صغيرًا. اعرض المخطط بعد كل بضعة أسطر، فإذا انكسر شيء عرفت أي سطر سببه.
• سمِّ الأشياء كما تسميها شيفرتك. فيصبح المخطط توثيقًا يمكن البحث فيه.
• فكرة واحدة لكل مخطط. مخططان واضحان أفضل من مخطط مزدحم.
• استخدم SVG للمستندات. تبقى حادة عند التكبير أو الطباعة وأصغر عادةً من PNG.

حين لا يُرسم المخطط

يعرض المحرر رسالة خطأ Mermaid تحت المعاينة. والأسباب المعتادة:

تغطي وثائق Mermaid كل أنواع المخططات بالتفصيل، ومنها المخططات الدائرية ومخططات Gantt والخطوط الزمنية والخرائط الذهنية، التي يرسمها المحرر أيضًا.