مجاني · بدون تسجيل · يدعم ملفات ‎.mmd

محرر مخططات التسلسل بـ Mermaid

يبيّن مخطط التسلسل من يخاطب من وبأي ترتيب. يناسبك حين يكون تبادل الرسائل بين عدة أطراف هو الموضوع — توثيق الهوية، الدفع، التكامل بين الخدمات. أما إن كان المشارك واحدًا وكان المهم هو التفرعات، فمخطط التدفق يقول الشيء نفسه بضجيج أقل.

افتح هذا في المحرر →اقرأ الدليل

دفع ببطاقة مع تحقق إضافي

قيمة هذا المخطط في كتلة `alt`: فهي تبيّن أن التحقق الإضافي لا يحدث دائمًا وأن للعملية نهايتين مختلفتين. ولاحظ كذلك أن بوابة الدفع هي التي تخاطب البنك المُصدِر، والمتجر لا يعلم بذلك. وهذا بالضبط ما يُظهره مخطط التسلسل ويخفيه مخطط التدفق.

sequenceDiagram
    autonumber
    participant ع as العميل
    participant م as المتجر
    participant ب as بوابة الدفع
    participant ص as البنك المُصدِر

    ع->>م: أكّد الطلب
    م->>ب: اطلب التفويض
    ب->>ص: مرّر العملية
    ص-->>ب: مطلوب تحقق إضافي

    alt البنك يطلب تحققًا إضافيًا
        ب-->>ع: حوّله إلى صفحة البنك
        ع->>ص: أدخل رمز التحقق
        ص-->>ب: نجح التحقق
    else البنك لا يطلب تحققًا
        ص-->>ب: تفويض مباشر
    end

    ب-->>م: مُنح التفويض
    م-->>ع: تأكّد الطلب
    م->>م: سجّل عملية البيع

افتح هذا في المحرر

أمثلة مشروحة

١. مشاركان ورسالة واحدة

الرمز `->>` سهم برأس ممتلئ، أي نداء. و`-->>` منقّط ويعني الرد. وهذا الزوج يكفي في أغلب المخططات.

sequenceDiagram
    العميل->>الواجهة: أنشئ طلبًا
    الواجهة-->>العميل: 201 Created

افتح في المحرر

٢. أسماء مختصرة للأسماء الطويلة

يمنحك `participant X as اسم طويل` معرّفًا قصيرًا للكتابة واسمًا مقروءًا للقراءة. والتصريح بالمشاركين في الأعلى يثبّت كذلك ترتيب أعمدتهم في الرسم؛ وبدون تصريح يحدّد الترتيبَ أولُ ظهور.

sequenceDiagram
    participant ت as المتصفح
    participant ط as خدمة الطلبات
    participant خ as خدمة المخزون

    ت->>ط: POST /orders
    ط->>خ: احجز القطع
    خ-->>ط: تأكّد الحجز
    ط-->>ت: 201 Created

افتح في المحرر

٣. التنشيط والنداء الذاتي

يرسم `activate` و`deactivate` شريطًا يبيّن أن المشارك يعمل. واللاحقتان `+` و`-` على السهم تؤديان الغرض نفسه بكتابة أقل. والسهم من مشارك إلى نفسه يعني عملًا داخليًا.

sequenceDiagram
    participant و as الواجهة
    participant ق as قاعدة البيانات

    العميل->>+و: GET /invoice/42
    و->>+ق: SELECT invoice
    ق-->>-و: وُجد السجل
    و->>و: احسب الضريبة
    و-->>-العميل: 200 OK

افتح في المحرر

٤. البدائل والاختيارات والحلقات

الكتلة `alt`/`else` مسارات يقصي بعضها بعضًا، و`opt` كتلة قد لا تحدث، و`loop` تكرار. وتُغلق ثلاثتها بـ `end`، ونسيان ذلك هو أشيع أخطاء هذا النوع.

sequenceDiagram
    participant م as المستخدم
    participant و as الواجهة
    participant ر as خدمة البريد

    م->>و: اطلب فتح حساب
    alt العنوان مسجّل مسبقًا
        و-->>م: 409 Conflict
    else العنوان متاح
        و-->>م: 201 Created
        و->>ر: أرسل رسالة التحقق
        loop حتى ثلاث محاولات
            ر->>ر: أعد الإرسال عند الفشل
        end
    end
    opt وافق المستخدم على النشرة
        و->>ر: أضفه إلى القائمة
    end

افتح في المحرر

٥. الملاحظات والمعالجة المتوازية

تُظهر `par` فروعًا تجري في وقت واحد، وهو ما لا يستطيع مخطط التدفق إلا التلميح إليه دون أن يصرّح به قط. والملاحظات هي الموضع الصحيح للتفصيل الذي لا يتسع له نص الرسالة.

sequenceDiagram
    participant ط as خدمة الطلبات
    participant ف as الفوترة
    participant ش as الشحن

    Note over ط: الطلب مدفوع بالفعل

    par أبلغ الفوترة
        ط->>ف: أصدر الفاتورة
        ف-->>ط: فاتورة 2026/0431
    and أبلغ الشحن
        ط->>ش: جهّز الشحنة
        ش-->>ط: أُنشئ رقم التتبع
    end

    Note over ف,ش: كل منهما يمضي بوتيرته

افتح في المحرر

ملخص صياغة مخطط التسلسل

ما يستحق الحفظ هو الأسهم، وهي خاصة بهذا النوع وحده: فالسهم `-->` الخاص بمخطط التدفق يعني هنا شيئًا آخر، والسهم `->>` الذي هنا خطأ في مخطط الأصناف.

الصياغة	المعنى
sequenceDiagram	يفتح المخطط. حساس لحالة الأحرف: `sequencediagram` لا يعمل.
participant A	يصرّح بمشارك ويثبّت موضعه.
participant A as اسم	معرّف قصير مع اسم مقروء.
actor A	مثل participant، لكنه يرسم شكل إنسان.
A->>B: نص	رسالة برأس ممتلئ — نداء.
A-->>B: نص	خط منقّط — رد.
A-)B: نص	رأس مفتوح — رسالة غير متزامنة.
A->>A: نص	المشارك ينادي نفسه.
activate A / deactivate A	يؤشّر المدة التي يعمل فيها A.
A->>+B: / B-->>-A:	الشيء نفسه بصيغة مختصرة على السهم مباشرة.
alt شرط ... else ... end	مسارات يقصي بعضها بعضًا.
opt شرط ... end	كتلة قد لا تحدث.
loop نص ... end	تكرار.
par ... and ... end	فروع متوازية.
Note over A,B: نص	ملاحظة فوق مشارك أو أكثر. ويوجد `Note left of` و`Note right of`.
autonumber	يرقّم الرسائل تلقائيًا.

الأخطاء الستة التي تُفسد مخطط التسلسل

أُعيد إنتاجها على Mermaid 11.12.2. والأول أشيعها بفارق كبير، ورسالته من أسوأ الرسائل دلالةً على موضع المشكلة.

ما تراه

Parse error يشير إلى السطر الأخير من المخطط

لماذا

كتلة فُتحت ولم تُغلق قط. فـ `alt` و`opt` و`loop` و`par` يطلب كل منها `end` الخاص به. ويبلّغ Mermaid عن الخطأ عند نفاد المدخل، فيشير رقم السطر إلى نهاية الملف لا إلى الكتلة المفتوحة. ومع كتلتين متداخلتين يصير اكتشافه صعبًا فعلًا.

الحل

عُدّ الكتل المفتوحة وعُدّ ما كتبته من `end`. فإن أشار الخطأ إلى السطر الأخير فهذا هو السبب دائمًا تقريبًا.

خطأ

sequenceDiagram
    العميل->>الواجهة: طلب
    alt كل شيء سليم
        الواجهة-->>العميل: 200 OK

صحيح

sequenceDiagram
    العميل->>الواجهة: طلب
    alt كل شيء سليم
        الواجهة-->>العميل: 200 OK
    end

ما تراه

No diagram type detected matching given configuration

لماذا

حالة أحرف خاطئة في الكلمة المفتاحية. فـ `sequenceDiagram` يعمل؛ و`sequencediagram` و`SequenceDiagram` لا يعملان. وMermaid حساس لحالة الأحرف في كل كلماته المفتاحية.

الحل

حرف D كبير وما عداه صغير.

خطأ

sequencediagram
    العميل->>الواجهة: مرحبًا

صحيح

sequenceDiagram
    العميل->>الواجهة: مرحبًا

ما تراه

يُرسم المخطط، لكن الرسالة تخرج بلا نص

لماذا

لا نص بعد النقطتين. قِيس: لا يرفض Mermaid ذلك — بل يرسم الرسالة بتسمية فارغة، فيبقى السهم بلا تفسير. والذي يسقط فعلًا هو حذف النقطتين أصلًا: فـ `العميل->>الواجهة` وحدها تعطي `Expecting 'TXT', got 'NEWLINE'`. إذن النقطتان إلزاميتان والنص ليس كذلك، وهو عكس ما يُتوقع تمامًا.

الحل

اكتب شيئًا بعد النقطتين، ولو كلمة واحدة. فالسهم بلا تسمية لا يكاد يكون قط ما قصدته.

خطأ

sequenceDiagram
    العميل->>الواجهة:
    الواجهة-->>العميل: 200

صحيح

sequenceDiagram
    العميل->>الواجهة: أنشئ طلبًا
    الواجهة-->>العميل: 200

ما تراه

Parse error بعد `alt` بشرط طويل

لماذا

كسر سطر داخل شرط الكتلة. فشرط `alt` أو `opt` أو `loop` يجب أن يسع سطرًا واحدًا؛ وإن كسرته فُسِّر نصفه الثاني رسالةً ولم يوافق شيئًا.

الحل

أبقِ الشرط في سطر واحد. وإن طال فاختصره وانقل التفصيل إلى ملاحظة.

خطأ

sequenceDiagram
    alt لدى العميل رصيد
    كافٍ في حسابه
        A-->>B: تمام
    end

صحيح

sequenceDiagram
    alt لدى العميل رصيد كافٍ
        A-->>B: تمام
    end
    Note over A,B: يُقاس الرصيد على الحد اليومي

ما تراه

يُرسم المخطط، لكن يظهر مشارك لم تصرّح به

لماذا

خطأ مطبعي في اسم مشارك. فـ Mermaid ينشئ المشارك أول مرة يصادف فيها اسمه، فيصير `الشحن` و`الشخن` عمودين منفصلين ولا شيء ينبّهك. وفي العربية أشيع مصدر لذلك هو الهمزات وحرفا التاء المربوطة والهاء: كتابة `الفاتورة` مرة `الفاتوره` تولّد عمودًا زائدًا.

الحل

صرّح بالمشاركين بـ `participant` في الأعلى. لن يمنع ذلك الخطأ المطبعي، لكنه يُظهر أي الأسماء هو الصحيح، فيلفت العمود الزائد النظر فورًا.

خطأ

sequenceDiagram
    الطلب->>الفاتورة: أصدر الفاتورة
    الفاتوره-->>الطلب: صدرت

صحيح

sequenceDiagram
    participant ط as الطلب
    participant ف as الفاتورة
    ط->>ف: أصدر الفاتورة
    ف-->>ط: صدرت

ما تراه

يُرسم المخطط، لكن ترتيب الأعمدة ليس ما أردته

لماذا

لم تصرّح بالمشاركين. فبدون تصريح يحدّد الترتيبَ أولُ ظهور لكل اسم، ولذلك قد تعيد رسالةٌ مضافة في أعلى المخطط ترتيبَ الأعمدة كلها وتجعل الأسهم تتقاطع. ويبقى المخطط صحيحًا لكن قراءته تسوء كثيرًا.

الحل

صرّح بكل المشاركين في الترويسة، بالترتيب الذي تريد رؤيتهم به.

خطأ

sequenceDiagram
    البنك-->>البوابة: مُنح التفويض
    العميل->>المتجر: أكّد الطلب
    المتجر->>البوابة: اطلب التفويض

صحيح

sequenceDiagram
    participant العميل
    participant المتجر
    participant البوابة
    participant البنك
    العميل->>المتجر: أكّد الطلب
    المتجر->>البوابة: اطلب التفويض
    البوابة->>البنك: مرّر العملية
    البنك-->>البوابة: مُنح التفويض

ملاحظات على الرسم

مقيس على Mermaid 11.12.2، وهي النسخة التي يستعملها هذا الموقع. ويختلف مخطط التسلسل عن بقية الأنواع في أمرين محددين.

العرض يحدده المشاركون لا الرسائل

قِيس: مشاركان يعطيان إطارًا عرضه 450 بكسل، وستة يعطون 1250، أي نحو 200 بكسل لكل عمود مضاف، بصرف النظر عن محتوى الرسائل. والرسائل لا تضيف إلا ارتفاعًا، نحو 46 بكسل لكل واحدة. مع تحفظ واحد: إن كان نص الرسالة أعرض من الحد الأدنى لعرض العمود فإنه يوسّع المخطط فعلًا — إذ ارتفع الزوج نفسه من 450 إلى 603 بكسل لمجرد أن نص رسالة واحدة طال. والتسميات العربية أضيق من الإنجليزية، فيتأخر هذا قليلًا مقارنة بالإنجليزية.

النوع الوحيد الذي يبدأ إطاره بقيمة سالبة

تخرج مخططات التسلسل بإطار يبدأ من `-50 -10` لا من `0 0`. وليس هذا عيبًا: فـ Mermaid يحجز ذلك الهامش لأطر المشاركين. ولا يهمّ ذلك إلا إن كنت تعالج ملف SVG بأدواتك الخاصة، لأن أي حساب يفترض أن البداية صفر سيقتطع العمود الأول.

الأسماء العربية تعمل معرّفات للمشاركين

جُرّب: `العميل` و`المتجر` يعملان معرّفَي مشارك دون أي التفاف، ويعملان أيضًا داخل `participant ع as العميل`. والقيد الوحيد هو المسافة، وهو أخفّ وطأة هنا منه في أي نوع آخر، لأن `participant ع as بوابة الدفع` صيغة صحيحة تمامًا: فالمعرّف قصير بلا مسافة والاسم المعروض حر تمامًا. وهذا يجعل مخطط التسلسل ألطف الأنواع الستة مع العربية.

هنا تصدير PNG دقيق

بخلاف مخطط التدفق ومخططات الأصناف والحالات والكيانات، يرسم مخطط التسلسل تسمياته نصًا SVG صِرفًا لا داخل `<foreignObject>`. ولذلك يقبل التحويل إلى صورة نقطية مباشرة: فيطابق ملف PNG المصدَّر ما على الشاشة، دون إعادة رسم وسيطة ودون انزياح في التنضيد.

المشارك المصرَّح به وغير المستعمل يُرسم رغم ذلك

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

متى يكون مخطط آخر أنسب

إن كان المشارك واحدًا فلا تسلسل يُعرض. والمخطط ذو العمود الواحد والأسهم المتجهة إلى نفسه إنما هو مخطط تدفق كُتب بطريقة غير مريحة.

وإن أردت وصف الحالات التي يمر بها شيء ما لا محادثة بين أطراف، فاستعمل مخطط الحالات. والإشارة واضحة: حين تجد نفسك تكتب الرسالة نفسها مرارًا بشروط مختلفة، فالذي أمامك آلة حالات.

وإن تجاوز التبادل خمس عشرة رسالة فقسّمه. فمخطط تسلسل بستين رسالة صحيح تقنيًا وعديم النفع إنسانيًا؛ وهو يُقرأ دائمًا تقريبًا بصورة أفضل بوصفه ثلاثة مخططات، واحدًا لكل مرحلة، تربط بينها ملاحظة.

أنواع المخططات الأخرى

بقلم Dominik Malsch · آخر تحديث: 8 سبتمبر 2026

افتح المحرر ←