التعريف الأساسي
يتكوّن المخطط الانسيابي من عقد (أشكال هندسية) وخطوط توصيل (أسهم أو خطوط). يحدّد كود Mermaid طريقة إنشاء العقد وخطوط التوصيل، ويدعم أنواعًا متعددة من الأسهم والأسهم متعددة الاتجاهات والربط العشوائي بالمخططات الفرعية.
تحذير إذا استخدمت الكلمة "end" داخل عقدة المخطط الانسيابي، فاكتب الحرف الأول أو الكلمة كاملة بأحرف كبيرة (مثل: "End" أو "END")، فإدخال "end" بالكامل بأحرف صغيرة سيؤدي إلى خطأ في المخطط الانسيابي.
تحذير إذا وصلت عقد المخطط الانسيابي مستخدمًا الحرف "o" أو "x" كحرف أول، فأضف مسافة قبل الحرف أو اكتب الحرف بأحرف كبيرة (مثل: "dev--- ops" أو "dev---Ops").
عقدة واحدة (افتراضي)
نسخ
تضمين
---
title: Node
---
flowchart LR
id
id هو المحتوى المعروض داخل المربع.
صيغة إنشاء المخطط الانسيابي، فإلى جانب استخدام flowchart يمكنك أيضًا استخدام graph .
عقدة مع نص
يمكنك أيضًا تعيين نص مختلف عن id للمربع. إذا كررت هذه العملية، سيعتمد النظام النص المحدَّد أخيرًا لهذه العقدة. بالإضافة إلى ذلك، إذا عرّفت لاحقًا خط توصيل للعقدة، يمكنك حذف تعريف النص؛ وسيُستخدم النص المعرَّف سابقًا عند تصيير المربع.
نسخ
تضمين
---
title: Node with text
---
flowchart LR
id1[This is the text in the box]
نص Unicode
استخدم علامات الاقتباس المزدوجة لتغليف نص Unicode.
نسخ
تضمين
flowchart LR
id["This ❤ Unicode"]
تنسيق Markdown
استخدم علامات الاقتباس المزدوجة والعلامات الخلفية لتغليف نص Markdown
نسخ
تضمين
flowchart LR
markdown["`This **is** _Markdown_`"]
newLines["`Line1
Line 2
Line 3`"]
markdown --> newLines
الاتجاه
يصرّح باتجاه المخطط الانسيابي
يشير إلى أن المخطط الانسيابي مرتّب من الأعلى إلى الأسفل (TD أو TB)
نسخ
تضمين
flowchart TD
Start --> Stop
تشمل اتجاهات المخطط الانسيابي:
- TB - من الأعلى إلى الأسفل
- TD - من الأعلى إلى الأسفل (مثل من الأعلى إلى الأسفل)
- BT - من الأسفل إلى الأعلى
- RL - من اليمين إلى اليسار
- LR - من اليسار إلى اليمين
شكل العقدة
مستطيل بزوايا دائرية
نسخ
تضمين
flowchart LR
id1(This is the text in the box)
شكل الملعب
نسخ
تضمين
flowchart LR
id1([This is the text in the box])
مخطط فرعي
نسخ
تضمين
flowchart LR
id1[[This is the text in the box]]
قاعدة بيانات
نسخ
تضمين
flowchart LR
id1[(Database)]
دائري
نسخ
تضمين
flowchart LR
id1((This is the text in the circle))
شكل غير متماثل
نسخ
تضمين
flowchart LR
id1>This is the text in the box]
معين
نسخ
تضمين
flowchart LR
id1{This is the text in the box}
سُداسي
نسخ
تضمين
flowchart LR
id1{{This is the text in the box}}
متوازي أضلاع
نسخ
تضمين
flowchart TD
id1[/This is the text in the box/]
متوازي أضلاع معكوس
نسخ
تضمين
flowchart TD
id1[\This is the text in the box\]
شبه منحرف
نسخ
تضمين
flowchart TD
A[/ProcessOn\]
شبه منحرف مقلوب
نسخ
تضمين
flowchart TD
B[\ProcessOn/]
دائرة مزدوجة
نسخ
تضمين
flowchart TD
id1(((This is the text in the circle)))
امتداد أشكال عقد المخطط الانسيابي في Mermaid
قدّمت Mermaid ثلاثين شكلًا جديدًا لتعزيز مرونة ودقة إنشاء المخططات الانسيابية. توفّر هذه الأشكال الجديدة خيارات إضافية لتمثيل العمليات والقرارات والأحداث ومخازن البيانات وعناصر أخرى في المخطط الانسيابي بصورة مرئية، مما يعزّز الوضوح والمعنى الدلالي.
صيغة جديدة لتعريف الأشكال
تدعم Mermaid الآن صيغة عامة لتعريف أنواع الأشكال لتواكب تزايد عدد الأشكال. تسمح لك هذه الصيغة بتحديد شكل معيّن لعقدة باستخدام تنسيق واضح ومرن.
نسخ
تضمين
A@{ shape: rect }
تنشئ هذه الصيغة العقدة A كمستطيل. وتُصيَّر بالطريقة نفسها مثل [A] أو A.
القائمة الكاملة لأشكال العقد
فيما يلي القائمة الكاملة لأشكال العقد المُقدَّمة حديثًا مع معانيها المقابلة واختصاراتها وأسمائها البديلة:
| الاسم الدلالي | صيغة الرسم | الاختصار الصيغي | البديل الصيغي | الوصف التفصيلي |
|---|---|---|---|---|
| بطاقة | Notched Rectangle | notch-rect | card, notched-rectangle | يمثّل بطاقة |
| ترتيب | Hourglass | hourglass | collate | يمثّل عملية ترتيب |
| رابط اتصال | Lightning Bolt | bolt | com-link, lightning-bolt | رابط اتصال |
| تعليق | Curly Brace | brace | brace-l, comment | إضافة تعليق |
| تعليق على اليمين | Curly Brace | brace-r | إضافة تعليق | |
| تعليق بأقواس معقوصة على الجانبين | Curly Braces | braces | إضافة تعليق | |
| إدخال أو إخراج البيانات | Lean Right | lean-r | in-out, lean-right | يمثّل الإدخال أو الإخراج |
| إدخال أو إخراج البيانات | Lean Left | lean-l | lean-left, out-in | يمثّل الإخراج أو الإدخال |
| قاعدة بيانات | Cylinder | cyl | cylinder, database, db | تخزين قاعدة البيانات |
| قرار | Diamond | diam | decision, diamond, question | خطوة قرار |
| تأخير | Half-Rounded Rectangle | delay | half-rounded-rectangle | يمثّل تأخيرًا |
| تخزين الوصول المباشر | Horizontal Cylinder | h-cyl | das, horizontal-cylinder | تخزين الوصول المباشر |
| تخزين على القرص | Lined Cylinder | lin-cyl | disk, lined-cylinder | تخزين على القرص |
| عرض | Curved Trapezoid | curv-trap | curved-trapezoid, display | يمثّل عرض المعلومات على الشاشة أو الطرفية أو أجهزة أخرى |
| معالجة مقسّمة | Divided Rectangle | div-rect | div-proc, divided-process, divided-rectangle | شكل المعالجة المقسّمة |
| مستند | Document | doc | document | يمثّل مستندًا |
| حدث | Rounded Rectangle | rounded | event | يمثّل حدثًا |
| استخلاص | Triangle | tri | extract, triangle | عملية الاستخلاص |
| تفرّع/دمج | Filled Rectangle | fork | join | تفرّع أو دمج في المخطط الانسيابي |
| تخزين داخلي | Window Pane | win-pane | internal-storage, window-pane | تخزين داخلي |
| نقطة اتصال | Filled Circle | f-circ | filled-circle, junction | نقطة اتصال |
| مستند مع خط | Lined Document | lin-doc | lined-document | مستند مع خط |
| عملية الخط/الظل | Lined Rectangle | lin-rect | lin-proc, lined-process, lined-rectangle, shaded-process | شكل عملية مع خط |
| حد الحلقة | Trapezoidal Pentagon | notch-pent | loop-limit, notched-pentagon | خطوة حد الحلقة |
| ملف يدوي | Flipped Triangle | flip-tri | flipped-triangle, manual-file | عملية ملف يدوي |
| إدخال يدوي | Sloped Rectangle | sl-rect | manual-input, sloped-rectangle | خطوة إدخال يدوي |
| عملية يدوية | Trapezoid Base Top | trap-t | inv-trapezoid, manual, trapezoid-top | يمثّل مهمة يدوية |
| مستندات متعددة | Stacked Document | docs | documents, st-doc, stacked-document | 多个文档 |
| عمليات متعددة | Stacked Rectangle | st-rect | processes, procs, stacked-rectangle | 多个进程 |
| شكل غير منتظم | Odd | odd | شكل غير منتظم | |
| شريط ورقي | Flag | flag | paper-tape | شريط ورقي |
| شرط تحضيري | Hexagon | hex | hexagon, prepare | خطوة تحضير أو شرط |
| إجراء ذو أولوية | Trapezoid Base Bottom | trap-b | priority, trapezoid, trapezoid-bottom | إجراء ذو أولوية |
| معالجة | Rectangle | rect | proc, process, rectangle | شكل المعالجة القياسي |
| بداية | Circle | circle | circ | نقطة البداية |
| بداية | Small Circle | sm-circ | small-circle, start | نقطة بداية دائرية صغيرة |
| توقف | Double Circle | dbl-circ | double-circle | يمثّل نقطة التوقف |
| توقف | Framed Circle | fr-circ | framed-circle, stop | يمثّل نقطة التوقف |
| تخزين البيانات | Bow Tie Rectangle | bow-rect | bow-tie-rectangle, stored-data | تخزين البيانات |
| مخطط فرعي | Framed Rectangle | fr-rect | framed-rectangle, subproc, subprocess, subroutine | مخطط فرعي، روتين فرعي |
| ملخّص | Crossed Circle | cross-circ | crossed-circle, summary | ملخّص |
| مستند موسوم | Tagged Document | tag-doc | tagged-document | مستند موسوم |
| عملية معيارية | Tagged Rectangle | tag-rect | tag-proc, tagged-process, tagged-rectangle | 已标准进程 |
| نقطة النهاية | Stadium | stadium | pill, terminal | نقطة النهاية |
| كتلة نصية | Text Block | text | كتلة نصية |
فيما يلي مثال على كود مخطط انسيابي يستخدم الأشكال المُقدَّمة حديثًا:
نسخ
تضمين
flowchart RL
A@{ shape: manual-file, label: "File Handling"}
B@{ shape: manual-input, label: "User Input"}
C@{ shape: docs, label: "Multiple Documents"}
D@{ shape: procs, label: "Process Automation"}
E@{ shape: paper-tape, label: "Paper Records"}
العملية
نسخ
تضمين
flowchart TD
A@{ shape: rect, label: "This is a process" }
حدث
نسخ
تضمين
flowchart TD
A@{ shape: rounded, label: "This is an event" }
العملية الفرعية
نسخ
تضمين
flowchart TD
A@{ shape: subproc, label: "This is a subprocess" }
قاعدة بيانات (أسطوانة)
نسخ
تضمين
flowchart TD
A@{ shape: cyl, label: "Database" }
بداية (دائرة)
نسخ
تضمين
flowchart TD
A@{ shape: circle, label: "Start" }
شكل غير منتظم
نسخ
تضمين
flowchart TD
A@{ shape: odd, label: "Odd shape" }
قرار (معين)
نسخ
تضمين
flowchart TD
A@{ shape: diamond, label: "Decision" }
شرط تحضيري (سُداسي)
نسخ
تضمين
flowchart TD
A@{ shape: hex, label: "Prepare conditional" }
إدخال/إخراج البيانات (مائل إلى اليمين)
نسخ
تضمين
flowchart TD
A@{ shape: lean-r, label: "Input/Output" }
إدخال/إخراج البيانات (مائل إلى اليسار)
نسخ
تضمين
flowchart TD
A@{ shape: lean-l, label: "Input/Output" }
إجراء ذو أولوية (شبه منحرف)
نسخ
تضمين
flowchart TD
A@{ shape: trap-b, label: "Priority action" }
عملية يدوية (شبه منحرف مقلوب)
نسخ
تضمين
flowchart TD
A@{ shape: trap-t, label: "Manual operation" }
توقف (دائرة مزدوجة)
نسخ
تضمين
flowchart TD
A@{ shape: dbl-circ, label: "Stop" }
كتلة نصية
نسخ
تضمين
flowchart TD
A@{ shape: text, label: "This is a text block" }
بطاقة (مستطيل بفتحة)
نسخ
تضمين
flowchart TD
A@{ shape: notch-rect, label: "Card" }
عملية بخط/ظل
نسخ
تضمين
flowchart TD
A@{ shape: lin-rect, label: "Lined process" }
بداية (دائرة صغيرة)
نسخ
تضمين
flowchart TD
A@{ shape: sm-circ, label: "Small start" }
توقف (دائرة بإطار)
نسخ
تضمين
flowchart TD
A@{ shape: framed-circle, label: "Stop" }
تفرّع/دمج (مستطيل طويل)
نسخ
تضمين
flowchart TD
A@{ shape: fork, label: "Fork or Join" }
ترتيب (ساعة رملية)
نسخ
تضمين
flowchart TD
A@{ shape: hourglass, label: "Collate" }
تعليق (أقواس معقوصة)
نسخ
تضمين
flowchart TD
A@{ shape: comment, label: "Comment" }
تعليق على اليمين (أقواس معقوصة على اليمين)
نسخ
تضمين
flowchart TD
A@{ shape: brace-r, label: "Comment" }
تعليق (بأقواس على الجانبين)
نسخ
تضمين
flowchart TD
A@{ shape: braces, label: "Comment" }
رابط اتصال (برق)
نسخ
تضمين
flowchart TD
A@{ shape: bolt, label: "Communication link" }
مستند
نسخ
تضمين
flowchart TD
A@{ shape: doc, label: "Document" }
تأخير (مستطيل نصف دائري الزوايا)
نسخ
تضمين
flowchart TD
A@{ shape: delay, label: "Delay" }
直接存取存储（水平圆柱）
نسخ
تضمين
flowchart TD
A@{ shape: das, label: "Direct access to storage" }
تخزين على القرص (أسطوانة بأخاديد)
نسخ
تضمين
flowchart TD
A@{ shape: lin-cyl, label: "Disk storage" }
عرض (شكل العرض)
نسخ
تضمين
flowchart TD
A@{ shape: curv-trap, label: "Display" }
معالجة مقسّمة (مستطيل مقسّم)
نسخ
تضمين
flowchart TD
A@{ shape: div-rect, label: "Divided process" }
استخلاص (مثلث صغير)
نسخ
تضمين
flowchart TD
A@{ shape: tri, label: "Extract" }
تخزين داخلي (لوحة نافذة)
نسخ
تضمين
flowchart TD
A@{ shape: win-pane, label: "Internal storage" }
نقطة اتصال (دائرة ممتلئة)
نسخ
تضمين
flowchart TD
A@{ shape: f-circ, label: "Connect" }
مستند مع خط
نسخ
تضمين
flowchart TD
A@{ shape: lin-doc, label: "Lined document" }
حد الحلقة (خماسي بفتحة)
نسخ
تضمين
flowchart TD
A@{ shape: notch-pent, label: "Loop limit" }
ملف يدوي (مثلث مقلوب)
نسخ
تضمين
flowchart TD
A@{ shape: flip-tri, label: "Manual file" }
إدخال يدوي (شبه منحرف قائم)
نسخ
تضمين
flowchart TD
A@{ shape: sl-rect, label: "Manual input" }
مستندات متعددة (مستندات مكدّسة)
نسخ
تضمين
flowchart TD
A@{ shape: docs, label: "Multi-document" }
عمليات متعددة (مستطيلات مكدّسة)
نسخ
تضمين
flowchart TD
A@{ shape: processes, label: "Multiple processes" }
شريط ورقي (علم)
نسخ
تضمين
flowchart TD
A@{ shape: flag, label: "Paper tape" }
تخزين البيانات (مستطيل بشكل ربطة العنق)
نسخ
تضمين
flowchart TD
A@{ shape: bow-rect, label: "Data stored" }
ملخّص (دائرة بصليب)
نسخ
تضمين
flowchart TD
A@{ shape: cross-circ, label: "Summary" }
مستند موسوم
نسخ
تضمين
flowchart TD
A@{ shape: tag-doc, label: "Tagged document" }
العملية الموسومة
نسخ
تضمين
flowchart TD
A@{ shape: tag-rect, label: "Tagged process" }
أشكال خاصة في المخططات الانسيابية لـ Mermaid
قدّمت Mermaid أيضًا الصور لتعزيز مخططك الانسيابي، مما يسمح لك بتضمين الصور مباشرة في المخطط الانسيابي، وبالتالي توفير خلفية مرئية ووضوح أكبر.
شكل الصورة
يمكنك استخدام image لإدراج صورة في المخطط الانسيابي، وصيغة تعريف الصورة كما يلي:
نسخ
تضمين
flowchart TD
A@{ img: "https://www.processon.com/image.png", label: "Image Label", pos: "t", w: 60, h: 60, constraint: "off" }
معامل
- img: عنوان URL للصورة المراد عرضها.
- label: تسمية نصية مرتبطة بالصورة، ويمكن أن تكون أي سلسلة نصية. إذا لم تُعرَّف، فلن تُعرض أي تسمية.
- pos: موضع التسمية. إذا لم يُعرَّف، فستكون التسمية افتراضيًا أسفل الصورة.
- w: عرض الصورة. إذا لم يُعرَّف، فسيكون افتراضيًا العرض الطبيعي للصورة.
- h: ارتفاع الصورة. إذا لم يُعرَّف، فسيكون افتراضيًا الارتفاع الطبيعي للصورة.
- constraint: يحدّد ما إذا كانت الصورة تقيّد حجم العقدة. يضمن هذا الإعداد أيضًا أن تحافظ الصورة على نسبة العرض إلى الارتفاع الأصلية، ويعدّل الارتفاع وفقًا للعرض. إذا لم يُعرَّف، فسيكون افتراضيًا off .
تمنحك الصور مرونة إضافية وجاذبية بصرية لمخططك الانسيابي، مما يجعله أكثر إفادة وجذبًا.
الروابط بين العقد
يمكن ربط العقد عبر خطوط التوصيل والأسهم. هناك أنواع مختلفة من الروابط، ويمكن أيضًا إرفاق سلسلة نصية بالرابط.
رابط مع سهم
نسخ
تضمين
flowchart LR
A-->B
رابط مفتوح
نسخ
تضمين
flowchart LR
A --- B
رابط مع نص
نسخ
تضمين
flowchart LR
A-- This is the text! ---B
أو
نسخ
تضمين
flowchart LR
A --- | This is the text| B
رابط مع سهم ونص
نسخ
تضمين
flowchart LR
A-->|text|B
أو
نسخ
تضمين
flowchart LR
A-- text -->B
رابط متقطّع
نسخ
تضمين
flowchart LR
A-.->B;
رابط متقطّع مع نص
نسخ
تضمين
flowchart LR
A-. text .->B;
رابط سميك
نسخ
تضمين
flowchart LR
A ==> B
رابط سميك مع نص
نسخ
تضمين
flowchart LR
A == |text| ==> B
رابط غير مرئي
نسخ
تضمين
flowchart LR
A ~~~ B
الربط التسلسلي للروابط
نسخ
تضمين
flowchart LR
A -- text --> B -- text2 --> C
يمكنك أيضًا الإعلان عن روابط عقد متعددة في السطر نفسه، كما يلي:
نسخ
تضمين
flowchart LR
a --> b & c--> d
يمكنك أيضًا وصف التبعية، كما في الكود التالي:
نسخ
تضمين
flowchart LR
a --> b & c--> d & e--> f
إذا وصفت الرسم نفسه باستخدام الصيغة الأساسية، فستحتاج إلى 8 أسطر. وتجدر الإشارة إلى أن الإفراط في استخدام هذه الطريقة قد يجعل مخطط Markdown الانسيابي أصعب في القراءة.
نسخ
تضمين
flowchart TB
a --> b
a --> c
b --> d
b --> e
c --> d
c --> e
d --> f
e --> f
إضافة ID إلى خط التوصيل
تدعم Mermaid الآن إضافة ID إلى خط التوصيل، على غرار إرفاق ID وبيانات وصفية بالعقدة. وتضع هذه الميزة الأساس لميزات أكثر تقدمًا في التنسيق والفئات والرسوم المتحركة على خطوط التوصيل.
الصيغة:لإضافة ID إلى خط التوصيل، ضع ID قبل صيغة خط التوصيل مباشرة متبوعًا بحرف @. على سبيل المثال:
نسخ
تضمين
flowchart LR
A e1@--> B
في هذا المثال، e1 هو الـ ID لخط التوصيل بين A و B. يمكنك استخدام هذا الـ ID في تعريفات أو عبارات تنسيق لاحقة، تمامًا كما تستخدم العقدة.
تشغيل الحركة
بعد إضافة ID إلى خط التوصيل، يمكنك تشغيل حركة خط التوصيل عبر تعريف خصائصه:
نسخ
تضمين
flowchart LR
A e1@==> B
e1@{ animate: true }
يخبر هذا Mermaid بأن خط التوصيل e1 متحرّك.
اختيار نوع الحركة
في الإصدار الأولي، تُدعَم سرعتان للحركة: fast و slow. ويعدّ اختيار نوع حركة معيّن طريقة سهلة لتمكين الحركة وتعيين سرعتها مرة واحدة.
نسخ
تضمين
flowchart LR
A e1@--> B
e1@{ animation: fast }
这相当于 e1@{ animate: true, animation: fast }。
استخدام عبارة classDef للحركة
يمكنك أيضًا إضافة حركة إلى خط التوصيل عبر إسناد فئة إليه، ثم تعريف خصائص الحركة في عبارة classDef. على سبيل المثال:
نسخ
تضمين
flowchart LR
A e1@--> B
classDef animate stroke-dasharray: 9,5,stroke-dashoffset: 900,animation: dash 25s linear infinite;
class e1 animate
في هذا الكود:
- e1@--> 创建了一个 ID 为 e1 的连接线
- classDef animate يعرّف فئة اسمها animate وذات خصائص تنسيق وحركة.
- class e1 animate يطبّق الفئة animate على خط التوصيل e1.
ملاحظة حول إفلات الفاصلة: عند تعيين خاصية stroke-dasharray، تذكّر إفلات الفاصلة، لأن الفاصلة تُستخدم كفاصل في تعريفات التنسيق في Mermaid.
أنواع أسهم جديدة
دعم أنواع أسهم جديدة
- خط توصيل بدائرة ممتلئة
- خط توصيل بعلامة تقاطع
خط توصيل بدائرة ممتلئة
نسخ
تضمين
flowchart LR
A --o B
خط توصيل بعلامة تقاطع
نسخ
تضمين
flowchart LR
A --x B
سهم متعدد الاتجاهات
يمكن استخدام سهم متعدد الاتجاهات، على سبيل المثال:
نسخ
تضمين
flowchart LR
A o--o B
B <--> C
C x--x D
طول خط التوصيل
تُسنَد لكل عقدة في المخطط الانسيابي، وفقًا للعقد المتصلة بها، رتبة في المخطط المُصيَّر، أي مستوى رأسي أو أفقي (حسب اتجاه المخطط الانسيابي). افتراضيًا، يمكن للرابط أن يمتد عبر أي عدد من الرتب، لكن يمكنك طلب أن يكون رابط معيّن أطول من غيره بإضافة شرطات إضافية في تعريف الرابط.
في هذا المثال، أُضيفت شرطتان إضافيتان في الرابط من العقدة B إلى العقدة E، ليمتد عبر رتبتين أكثر من الرابط العادي:
نسخ
تضمين
flowchart TD
A[Start] --> B{Is it?}
B -->|Yes| C[OK]
C --> D[Rethink]
D --> B
B ---->|No| E[End]
عند كتابة تسمية الرابط في وسط الرابط، يجب إضافة شرطات إضافية على الجانب الأيمن من الرابط. هذا المثال مكافئ للمثال السابق:
نسخ
تضمين
flowchart TD
A[Start] --> B{Is it?}
B -->|Yes| C[OK]
C --> D[Rethink]
D --> B
B -- No ----> E[End]
بالنسبة للخط المتقطّع أو الرابط السميك، تكون الأحرف المطلوب إضافتها هي علامة التساوي أو النقطة، كما في الجدول التالي:
| الطول | 1 | 2 | 3 |
|---|---|---|---|
| رابط عادي | --- | ---- | ----- |
| رابط عادي مع سهم | --> | ---> | ----> |
| رابط سميك | === | ==== | ===== |
| رابط سميك مع سهم | ==> | ===> | ====> |
| خط منقّط | -.- | -..- | -...- |
| خط منقّط مع سهم | -.- | -..-> | -...-> |
أحرف خاصة
يمكنك وضع النص داخل علامات الاقتباس لتصيير الأحرف الأكثر إشكالًا. كما في المثال التالي:
نسخ
تضمين
flowchart LR
id1["This is the (text) in the box"]
ترميز الكيانات لإفلات الأحرف
يمكنك إفلات الأحرف باستخدام الصيغة الموضّحة في المثال.
نسخ
تضمين
flowchart LR
A["A double quote:#quot;"] --> B["A dec char:#9829;"]
الأرقام المعطاة عشرية، لذا يمكن ترميز # بالشكل #35. كما يُدعَم استخدام أسماء أحرف HTML.
مخطط فرعي
نسخ
تضمين
subgraph title
graph definition
end
فيما يلي مثال:
نسخ
تضمين
flowchart TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
يمكنك أيضًا تعيين id للمخطط الفرعي.
نسخ
تضمين
flowchart TB
c1-->a2
subgraph ide1 [one]
a1-->a2
end
مخطط انسيابي
باستخدام المخططات من نوع المخطط الانسيابي، يمكنك أيضًا تعيين خطوط توصيل متجهة إلى المخطط الفرعي ومنه، كما في المخطط الانسيابي التالي.
نسخ
تضمين
flowchart TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
one --> two
three --> two
two --> c2
اتجاه المخطط الفرعي
عند استخدام النوع flowchart، يمكنك استخدام عبارة الاتجاه لتعيين اتجاه تصيير المخطط الفرعي، كما يلي:
نسخ
تضمين
flowchart LR
subgraph TOP
direction TB
subgraph B1
direction RL
i1 -->f1
end
subgraph B2
direction BT
i2 -->f2
end
end
A --> TOP --> B
B1 --> B2
القيود
إذا كانت أي عقدة في المخطط الفرعي متصلة بالخارج، فسيُتجاهل اتجاه المخطط الفرعي. وإلا فسيرث المخطط الفرعي اتجاه المخطط الأصل:
نسخ
تضمين
flowchart LR
subgraph subgraph1
direction TB
top1[top] --> bottom1[bottom]
end
subgraph subgraph2
direction TB
top2[top] --> bottom2[bottom]
end
%% ^ These subgraphs are identical, except for the links to them:
%% Link *to* subgraph1: subgraph1 direction is maintained
outside --> subgraph1
%% Link *within* subgraph2:
%% subgraph2 inherits the direction of the top-level graph (LR)
outside ---> top2
سلسلة Markdown
تعزّز سلاسل Markdown المخططات الانسيابية والخرائط الذهنية بتوفير نوع سلسلة نصية أكثر مرونة، يدعم خيارات تنسيق النص مثل العريض والمائل، ويتيح التفاف النص تلقائيًا داخل التسميات.
نسخ
تضمين
flowchart LR
subgraph "One"
a("`The **cat**
in the hat`") -- "edge label" --> b{{"`The **dog** in the hog`"}}
end
subgraph "`**Two**`"
c("`The **cat**
in the hat`") -- "`Bold **edge label**`" --> d("The dog in the hog")
end
- لجعل النص عريضًا، استخدم نجمتين (**) قبل النص وبعده.
- يُستخدم المائل بنجمة واحدة (*) قبل النص وبعده.
- بالنسبة للسلاسل التقليدية، تحتاج إلى إضافة وسم <br> ليتفاف النص في العقدة. أما سلاسل Markdown فتتفاف تلقائيًا عندما يكون النص طويلًا، ويكفي استخدام حرف سطر جديد بدلًا من وسم <br> لبدء سطر جديد.
تنطبق هذه الميزة على تسميات العقد وتسميات خطوط التوصيل وتسميات المخططات الفرعية
يمكن تعطيل التفاف النص التلقائي باستخدام صيغة معيّنة
نسخ
تضمين
---
config:
markdownAutoWrap: false
---
graph LR
تعليق
يمكنك إدخال تعليقات في المخطط الانسيابي، وسيتجاهلها المحرّر. يجب أن يشغل التعليق سطرًا مستقلًا، ويجب أن يبدأ بعلامتي النسبة المئوية المزدوجة (%%). ويُعدّ أي نص من بداية التعليق حتى السطر التالي تعليقًا، بما في ذلك أي صيغة مخطط.
نسخ
تضمين
flowchart LR
%% this is a comment A -- text --> B{node}
A -- text --> B -- text2 --> C
التنسيق والفئات
تنسيق الرابط
يمكنك تعيين تنسيق الرابط. على سبيل المثال، قد ترغب في تصميم رابط يتحرك للخلف في المسار؛ ولأن الروابط لا تملك ID كما العقد، فأنت بحاجة إلى طريقة أخرى لتحديد التنسيق الذي ينبغي أن يستخدمه الرابط. استخدم رقم الترتيب عند تعريف الرابط، أو استخدم القيمة الافتراضية لتطبيقها على جميع الروابط.
نسخ
تضمين
linkStyle 3 stroke:#ff3,stroke-width:4px,color:red;
يمكنك أيضًا إضافة تنسيق إلى روابط متعددة عبر فصل أرقام الروابط بفواصل في عبارة واحدة:
نسخ
تضمين
linkStyle 1,2,7 color:blue;
تعيين نمط انحناء خط التوصيل
إذا لم تلِ الطريقة الافتراضية احتياجاتك، فيمكنك تعيين نمط انحناء لخطوط التوصيل بين العناصر. تشمل أنماط الانحناء المتاحة basis و bumpX و bumpY و cardinal و catmullRom و linear و monotoneX و monotoneY و natural و step و stepAfter و stepBefore.
في المثال التالي، يستخدم مخطط من اليسار إلى اليمين نمط الانحناء stepBefore.
نسخ
تضمين
%%{ init: { 'flowchart': { 'curve': 'stepBefore' } } }%%
graph LR
تعيين تنسيق العقدة
يمكن تعيين تنسيق معيّن للعقدة، مثل إطار أكثر سماكة أو لون خلفية مختلف.
نسخ
تضمين
flowchart LR
id1(Start)-->id2(Stop)
style id1 fill:#f99,stroke:#33d,stroke-width:4px
style id2 fill:#bfc,stroke:#f96,stroke-width:2px,color:#000,stroke-dasharray: 5 5
فئة
بدلًا من تعريف التنسيق في كل مرة، يكون من الأنسب تعريف فئة تنسيق وإرفاقها بالعقد التي تحتاج إلى مظهر مختلف.
تُعرَّف الفئة كما يلي:
نسخ
تضمين
classDef className fill:pink,stroke:#333,stroke-width:4px;
بالإضافة إلى ذلك، يمكن تعريف التنسيق لعدة فئات في عبارة واحدة:
نسخ
تضمين
classDef firstClassName,secondClassName font-size:12pt;
تتم إرفاق الفئة بالعقدة كما يلي:
نسخ
تضمين
class nodeId1 className;
يمكن أيضًا إرفاق فئة بقائمة عقد في عبارة واحدة:
نسخ
تضمين
class nodeId1,nodeId2 className;
لإضافة فئة، يمكنك استخدام المعامل ::: لإرفاق اسم الفئة بالعقدة، كما يلي:
نسخ
تضمين
flowchart LR
A:::someclass --> B
classDef someclass fill:#f96
يمكن استخدام هذا الشكل عند الإعلان عن روابط متعددة بين العقد:
نسخ
تضمين
flowchart LR
A:::foo & B:::bar --> C:::foobar
classDef foo stroke:#f00
classDef bar stroke:#0f0
classDef foobar stroke:#00f
- في إعلانات الرسم، يمكن الآن أن تنتهي العبارات دون فاصلة منقوطة. فبعد الإصدار 0.2.16، أصبح انتهاء عبارات الرسم بفاصلة منقوطة اختياريًا فقط. لذلك، فإن إعلان الرسم التالي صالح تمامًا مثل إعلان الرسم القديم.
- يُسمح بمسافة واحدة بين القمم والروابط. ومع ذلك، لا ينبغي وجود أي مسافة بين القمة ونصها، ولا بين الرابط ونصه. كما يظل إعلان الرسم القديم صالحًا، لذا فهذه الميزة الجديدة اختيارية وتهدف إلى تحسين قابلية القراءة.
فيما يلي الإعلان الجديد لخط التوصيل، وهو صالح تمامًا مثل إعلان خط التوصيل القديم.
نسخ
تضمين
flowchart LR
A[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
C -->|Two| E[Result two]
