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

محرر مخططات التدفق بـ Mermaid

يبيّن مخطط التدفق كيف تسير عملية ما: ما الخطوات، وأين تتفرع، وأين تلتقي الفروع من جديد. يناسبك حين يكون الموضوع ترتيب القرارات — إصدار برمجي، مسار طلب، دورة اعتماد. أما إذا كان الموضوع من يخاطب من ومتى، فمخطط التسلسل أفضل.

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

خط إصدار بمسارَي فشل

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

flowchart TD
    دفع[دفع إلى الفرع الرئيسي] --> فحص[تحليل ساكن وأنواع]
    فحص --> اختبار{نجحت الاختبارات}
    اختبار -->|لا| تنبيه[أبلغ صاحب الإسهام]
    اختبار -->|نعم| بناء[ابنِ الصورة]
    بناء --> مسح{مسح الأمان نظيف}
    مسح -->|لا| إيقاف["أوقف الإصدار (مراجعة يدوية)"]
    مسح -->|نعم| نشر[انشر إلى الإنتاج]
    نشر --> تحقق[اختبارات سريعة]
    تحقق --> انتهاء[اكتمل الإصدار]
افتح هذا في المحرر
إعلان

أمثلة مشروحة

١. أصغر مخطط تدفق

عقدتان وسهم واحد. الوسم `TD` يسير من الأعلى إلى الأسفل، و`LR` من اليسار إلى اليمين؛ والمخطط الأعرض من ارتفاعه يُقرأ دائمًا تقريبًا بصورة أفضل مع `LR`.

flowchart TD
    استقبال[استقبل الطلب] --> رد[أرسل الرد]
افتح في المحرر

٢. تفرّع بتسميات

الأقواس المعقوفة ترسم معيّنًا. والنص بين الشرطتين الرأسيتين يسمّي الحافة لا العقدة. وسيعود هذا التمييز في قسم الأخطاء أدناه.

flowchart TD
    بداية[استقبل الطلب] --> هوية{الرمز صالح}
    هوية -->|نعم| معالجة[نفّذ المعالج]
    هوية -->|لا| رفض[أعد 401]
    معالجة --> نجاح[أعد 200]
افتح في المحرر

٣. دع الشكل يقول شيئًا

الأشكال أرخص وسيلة لإضافة معلومة إلى مخطط التدفق. الأطراف المستديرة تدل على البداية والنهاية، والمعيّن على قرار، والأسطوانة على مخزن بيانات.

flowchart LR
    ابدأ([ابدأ المهمة]) --> اقرأ[(اقرأ من Postgres)]
    اقرأ --> جديد{توجد صفوف جديدة}
    جديد -->|لا| توقف([أنهِ دون تغيير])
    جديد -->|نعم| تحويل[/حوّل البيانات/]
    تحويل --> اكتب[(اكتب إلى S3)]
    اكتب --> توقف
افتح في المحرر

٤. مجموعات فرعية للتجميع حسب المسؤول

تضع المجموعة الفرعية العقد المترابطة داخل إطار. وأنفع استعمال لها هو التجميع حسب الجهة المسؤولة لا حسب المرحلة: فحين يتضح أي فريق أو أي خدمة تتولى ماذا، تبرز نقاط التسليم من تلقاء نفسها.

flowchart TD
    subgraph client [المتصفح]
        واجهة[أرسل النموذج]
    end
    subgraph api [خدمة الطلبات]
        تحقق[تحقق من المدخلات]
        احفظ[احفظ الطلب]
    end
    subgraph async [مهام الخلفية]
        بريد[أرسل بريد التأكيد]
        فاتورة[أنشئ الفاتورة]
    end
    واجهة --> تحقق
    تحقق --> احفظ
    احفظ --> بريد
    احفظ --> فاتورة
افتح في المحرر

٥. حلقة إعادة محاولة بحدّ أعلى

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

flowchart TD
    أرسل[أرسل الويب هوك] --> نتيجة{وصل 2xx}
    نتيجة -->|نعم| نجح[علّمه مُسلَّمًا]
    نتيجة -->|لا| محاولات{أقل من 5 محاولات}
    محاولات -->|نعم| انتظر[انتظار متزايد]
    انتظر --> أرسل
    محاولات -->|لا| طابور[إلى طابور الإخفاقات]
افتح في المحرر

ملخص صياغة مخطط التدفق

كل ما هنا خاص بمخطط التدفق وحده. والأسهم خصوصًا: لا تنتقل إلى الأنواع الأخرى. فالسهم `->>` الخاص بمخطط التسلسل خطأ صياغي هنا.

الصياغةالمعنى
flowchart TDمن الأعلى إلى الأسفل. و`TB` مثله. وهو الاتجاه المعتاد لقراءة عملية.
flowchart LRمن اليسار إلى اليمين. ويوجد `RL` أيضًا. للتدفقات العريضة القليلة العمق.
A[نص]مستطيل — خطوة عادية.
A(نص)مستطيل بزوايا مستديرة.
A([نص])شكل الملعب — عرفًا للبداية أو النهاية.
A[(نص)]أسطوانة — مخزن بيانات.
A{نص}معيّن — قرار.
A[/نص/]متوازي أضلاع — دخل أو خرج.
A --> Bسهم.
A --- Bخط بلا رأس.
A -.-> Bسهم منقّط — عرفًا لغير المتزامن أو الاختياري.
A ==> Bسهم غليظ — عرفًا للمسار الرئيسي.
A -->|نص| Bحافة مسمّاة. وإن كانت فيها أقواس فلا بد من علامتَي الاقتباس.
A["نص (بأقواس)"]تسمية بين علامتَي اقتباس — لازمة للأقواس ولعلامات الاقتباس ولكل محرف يُقرأ صياغةَ شكل.
subgraph اسم [عنوان] ... endيجمع العقد داخل إطار. ويُغلق بـ `end`.
%% تعليقسطر تعليق. لا يُرسم.
إعلان

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

أُعيد إنتاجها كلها على المحرك الذي يستعمله هذا الموقع (Mermaid 11.12.2). ألصق النسخة الخاطئة في المحرر تحصل على الخطأ الموصوف تمامًا؛ والنسخة المصححة تُرسم. وأسرع طريقة لقراءة خطأ Mermaid هي النظر إلى آخره: فبعد كلمة `got` يأتي الرمز الذي تعثّر عنده المحلل.

ما تراه

Parse error ينتهي بـ: got 'PS'

لماذا

يوجد قوس دائري مفتوح داخل تسمية بين قوسين مربعين. فالأقواس الدائرية صياغةُ شكل — إذ `A(نص)` تعني عقدة مستديرة — ولذلك يُقرأ القوس المجرد داخل القوسين المربعين بداية شكل جديد.

الحل

ضع التسمية كلها بين علامتَي اقتباس مزدوجتين. فداخلهما يُعدّ كل شيء نصًا.

خطأ
flowchart TD
    A[أعد المحاولة (خمس مرات كحد أقصى)] --> B[انتهى]
صحيح
flowchart TD
    A["أعد المحاولة (خمس مرات كحد أقصى)"] --> B[انتهى]

ما تراه

Parse error في السطر الذي سمّيت فيه العقدة

لماذا

توجد مسافة داخل معرّف العقدة. وتجنّب ذلك في العربية صعب، لأن الأسماء الطبيعية مركّبة من عدة كلمات: «خدمة التوثيق»، «قاعدة بيانات المستخدمين». فالمعرّف هو الرمز السابق للسهم، والمسافة تقطعه فتترك كلمة لا موضع لها.

الحل

امنح العقدة معرّفًا من كلمة واحدة، وضع النص المقروء في التسمية. والحروف العربية تعمل في المعرّفات دون مشكلة — جُرّب: `طلب` و`دفع` تُرسمان معرّفَين صحيحين. المسافة وحدها هي التي تُفسد.

خطأ
flowchart TD
    خدمة التوثيق --> قاعدة البيانات
صحيح
flowchart TD
    توثيق[خدمة التوثيق] --> قاعدة[(قاعدة بيانات المستخدمين)]

ما تراه

Parse error ينتهي بـ: got 'end'

لماذا

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

الحل

اكتبها بحرف كبير، أو امنح العقدة معرّفًا آخر وانقل الكلمة إلى التسمية. و`نهاية` لا تسبب أي إشكال.

خطأ
flowchart TD
    بداية[ابدأ] --> end
صحيح
flowchart TD
    بداية[ابدأ] --> نهاية[اكتمل]

ما تراه

Parse error في تسمية الحافة بين الشرطتين الرأسيتين

لماذا

توجد أقواس داخل تسمية الحافة. فالنص بين `|…|` يخضع للقيد نفسه الذي تخضع له تسمية العقدة: الأقواس هناك أيضًا صياغة لا نص.

الحل

ضع تسمية الحافة كذلك بين علامتَي اقتباس.

خطأ
flowchart TD
    A -->|نعم (دائمًا)| B
صحيح
flowchart TD
    A -->|"نعم (دائمًا)"| B

ما تراه

Lexical error on line N. Unrecognized text. — والمعرّف يبدو سليمًا تمامًا

لماذا

في المعرّف علامة تشكيل. فالشدّة والفتحة والكسرة وأخواتها محارف تركيبية مستقلة، لا جزء من الحرف الذي تعلوه، ولذلك يرفضها المحلل في موضع المعرّف. قِيس: `حوّل` بالشدّة يسقط بهذا الخطأ، بينما `حول` بدونها يعمل ويخرج المعرّف `flowchart-حول`. والفارق بين الكلمتين على الشاشة نقطة صغيرة فوق الحرف قد لا تُلحظ أصلًا. أما في التسميات فالتشكيل مقبول تمامًا: `[/حوّل البيانات/]` تُرسم كما هي.

الحل

اترك المعرّفات بلا تشكيل وضع المشكول في التسمية. وهذا ليس تنازلًا يُذكر، لأن المعرّف لا يُعرض أصلًا.

خطأ
flowchart TD
    حوّل[تحويل البيانات] --> B[انتهى]
صحيح
flowchart TD
    تحويل[حوّل البيانات] --> B[انتهى]

ما تراه

Lexical error on line 1. Unrecognized text.

لماذا

الاتجاه غير صالح. لا يقبل مخطط التدفق إلا TB وTD وBT وLR وRL؛ وأي شيء غيرها يسقط في التحليل المعجمي قبل قراءة عقدة واحدة. ولذلك يشير الخطأ إلى السطر الأول لا إلى موضع الخطأ المطبعي.

الحل

استعمل واحدًا من الخمسة. و‏TD وLR يغطيان كل شيء تقريبًا.

خطأ
flowchart أعلى_أسفل
    A --> B
صحيح
flowchart TD
    A --> B

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

لا شيء هنا منقول من التوثيق: كله مقيس على Mermaid 11.12.2، وهي النسخة التي يستعملها هذا الموقع. وهذه هي السلوكيات التي تبدأ بالأهمية حين يكفّ المخطط عن كونه لعبة.

الحروف العربية تعمل معرّفات، لكن Mermaid لا يعكس التخطيط للكتابة من اليمين

جُرّب: `طلب` و`دفع` تعملان معرّفَي عقدة في مخطط التدفق، و`معلق` و`مشحون` تعملان اسمَي حالة، و`class طلب` يُرسم، بل إن `+مبلغ الإجمالي()` تنتقل إلى خانة الدوال كما ينبغي. فلا حاجة إلى الكتابة بحروف لاتينية كي يُرسم المخطط. لكن هناك أمرًا يجب توقّعه: لا يعكس Mermaid اتجاه التخطيط. فمع `flowchart LR` تسير الأسهم من اليسار إلى اليمين وإن كان النص عربيًا، ومع `TD` تنزل من الأعلى إلى الأسفل. والاتجاه الأنسب للقراءة العربية هو `RL`، وهو مدعوم فعلًا.

الملف نفسه ثنائي الاتجاه، وهذه مشكلة تحرير لا مشكلة رسم

الكلمات المفتاحية والأسهم في Mermaid لاتينية تُكتب من اليسار، والتسميات عربية تُكتب من اليمين، فالسطر الواحد يخلط الاتجاهين. والنتيجة أن موضع المؤشر في المحرر قد لا يوافق ما تراه العين، وأن نقل قوس أو شرطة قد يبدو قافزًا. لا أثر لذلك في الرسم إطلاقًا — المخطط يخرج صحيحًا — لكنه يجعل تحرير الأسطر الطويلة أبطأ. وتقصير التسميات ووضع التفاصيل في تعليق `%%` يخفف من هذا كثيرًا.

التسميات العربية أضيق من الإنجليزية

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

الارتفاع يزيد نحو 105 بكسل لكل عقدة، والعرض يكاد يتوقف

في مخطط من الأعلى إلى الأسفل تعطي ثلاث عقد إطارًا يقارب 126×278. وعند أربعين عقدة يصير 135×4126: ازداد العرض 9 بكسلات وتضاعف الارتفاع خمس عشرة مرة. فالمخطط الطويل شريط ضيق لا تسعه شاشة. ولهذا وُجد زر التوسيط في المعاينة. وحين يتجاوز الحدّ، فالانتقال إلى `flowchart LR` أو `RL` كثيرًا ما يقارب تنصيف نسبة الضلعين.

تصدير PNG كان معطلًا لأن التسميات HTML

تُرسم تسميات مخطط التدفق بوصفها HTML حقيقيًا داخل `<foreignObject>` في ملف SVG. ولهذا تعمل `<br>` وشيء من Markdown داخل التسميات. وللسبب نفسه يرفض المتصفح رسم هذا الـ SVG على لوحة canvas: فظل تصدير PNG في هذا الموقع مدة طويلة يعيد ملف SVG بصمت. أما الآن فيُعاد رسم المخطط قبل التصدير بتسميات نصية SVG صِرفة فيخرج الـ PNG صحيحًا. والثمن أن تنضيد الـ PNG المصدَّر يختلف اختلافًا يسيرًا جدًا عما على الشاشة.

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

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

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

وبعد أربعين عقدة، بصراحة، لا ينقذ الموقفَ أي مخطط. فإما أن تقسمه إلى عدة مخططات تشترك في مدخل واحد، وإما أن تقبل أن ما تحاول روايته أعقد من أن يسعه رسم واحد. وهذه بحد ذاتها معلومة نافعة.

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

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

افتح المحرر ←