كيفية كتابة مخطط mermaid تسلسلي

يوضح المخطط التسلسلي من يتحدث إلى من، وبأي ترتيب. في mermaid يستغرق كتابته وقتًا يقارب وصفه بصوت عالٍ، ولهذا يبقى هذا النوع من المخططات الأطول عمرًا في قاعدة الكود. كل ما يلي جاهز للنسخ واللصق في المحرر.

الحد الأدنى

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

sequenceDiagram
  User->>API: POST /orders
  API->>DB: INSERT order
  DB-->>API: order id
  API-->>User: 201 Created

أعلن المشاركين صراحةً باستخدام participant User عندما تريد ترتيبًا محددًا من اليسار إلى اليمين بدلًا من ترتيب أول ذكر.

أنواع الأسهم

الصياغةالمعنى
A->>B: textطلب — خط متصل، رأس سهم مملوء
A-->>B: textاستجابة — خط متقطع، رأس سهم مملوء
A->B: textخط متصل، رأس سهم مفتوح
A-)B: textرسالة غير متزامنة — رأس سهم مفتوح، بلا رد متوقع
A-xB: textرسالة تفشل أو تُفقد

العرف الذي يستحق الحفاظ عليه: خط متصل للاستدعاء، وخط متقطع للعودة. عندها يمكن للقارئ تمييز الطلب من الاستجابة دون قراءة أي تسمية.

المشاركون والأسماء المستعارة

sequenceDiagram
  participant U as Browser
  participant A as API gateway
  participant S as Order service
  U->>A: GET /orders
  A->>S: list(userId)
  S-->>A: orders
  A-->>U: 200 OK

استخدم actor U as Browser بدلًا من participant لرسم شخصية بشرية بسيطة — مفيد للطرف البشري عند حافة تدفق المصادقة.

أشرطة التفعيل

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

sequenceDiagram
  User->>+API: POST /pay
  API->>+Bank: charge
  Bank-->>-API: authorised
  API-->>-User: receipt

الحلقات والشروط والعمل المتوازي

sequenceDiagram
  User->>API: POST /import
  loop every row
    API->>DB: upsert row
  end
  alt all rows valid
    API-->>User: 200 OK
  else some failed
    API-->>User: 422 with errors
  end
  par notify
    API->>Email: send summary
  and audit
    API->>Log: write entry
  end
  • loop <label> … end — تكرار.
  • alt <label> … else <label> … end — فروع متنافية.
  • opt <label> … end — فرع قد لا يحدث ببساطة.
  • par <label> … and <label> … end — أشياء تحدث في الوقت نفسه.
  • critical / break — قسم يجب ألا يُقاطَع، ومخرج مبكر.

الملاحظات

sequenceDiagram
  User->>API: POST /login
  Note right of API: Rate limited<br>5 per minute
  API-->>User: token
  Note over User,API: Token is valid for 30 days

Note over A,B تمتد عبر مشاركين اثنين، وهي المكان المناسب لقيد ينتمي إلى التفاعل نفسه لا إلى أحد طرفيه.

مثال كامل

sequenceDiagram
  actor U as User
  participant A as App
  participant P as Provider
  U->>+A: Click "Sign in"
  A-->>-U: Redirect to provider
  U->>+P: Authorise
  P-->>-U: Redirect back with code
  U->>+A: GET /callback?code=…
  A->>+P: Exchange code for token
  P-->>-A: access token
  Note right of A: Session cookie set here
  A-->>-U: Signed in
تسجيل دخول OAuth، من البداية إلى النهاية.

عدّل هذا المخطط

الصقه في تبويب الكود وغيّر سطرًا — تُعاد المعاينة رسمها أثناء الكتابة.

أسئلة متكررة

كيف أرقّم الرسائل؟

ضع autonumber في السطر الذي يلي sequenceDiagram مباشرة. عندها تحصل كل رسالة على رقم تسلسلي، مما يسهّل الحديث عن المخطط في تعليقات المراجعة.

هل يمكن لمشارك إرسال رسالة إلى نفسه؟

نعم — اكتب الاسم نفسه على الطرفين: API->>API: retry. يرسم mermaid الحلقة عائدة إلى خط الحياة نفسه.

كيف أوضح أن مشاركًا قد أُنهي؟

استخدم destroy <name> قبل الرسالة التي تنهيه، أو create participant <name> لجعله يظهر في منتصف المخطط بدلًا من الأعلى.

هل يمكنني تعديل مخطط تسلسلي على اللوحة البصرية؟

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

المزيد من الأدلة

  1. تصدير mermaid إلى PNG أو SVG

    أربع طرق للخروج من مخطط mermaid — PNG وSVG ومصدر .mmd وكتلة Markdown — ومتى يكون كل خيار هو الصحيح.

  2. ورقة صياغة mermaid المرجعية

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

افتح المحرر. مجاني — بلا تسجيل.

لوحة فارغة، تبويب كود، وكل خيارات التصدير — مجانًا، في متصفحك، الآن.