مخطط كتلي
يتكوّن المخطط الصنفي من مربعات وموصّلات لتمثيل الأنظمة أو العمليات أو الهياكل المعقّدة بصورة مرئية. وتمثّل المربعات المكوّنات أو الوظائف الأساسية، وتُظهر الموصّلات العلاقات أو المسار بين هذه المكوّنات، ويكون المخطط الصنفي بالغ الأهمية في مختلف المجالات مثل الهندسة وتطوير البرمجيات وإدارة العمليات.
نسخ
تضمين
block-beta
columns 1
db(("DB"))
blockArrowId6<[" "]>(down)
block:ID
A
B["A wide one in the middle"]
C
end
space
D
ID --> D
C --> D
style B fill:#f96,stroke:#333,stroke-width:4px
استخدامات المخطط الصنفي
الغرض الرئيسي من المخطط الصنفي هو توفير نظرة عالية المستوى للنظام، ليتمكّن الناس من فهمه وتحليله بسهولة دون الحاجة إلى الخوض في التفاصيل المعقّدة لكل مكوّن. وهذا يجعل المخطط الصنفي مفيدًا بصفة خاصة لتبسيط الأنظمة المعقّدة وشرح البنية العامة والتفاعل بين المكوّنات داخل النظام.
سيناريوهات الاستخدام
تُستخدم المخططات الصنفية على نطاق واسع في مختلف الصناعات والتخصصات، وتشمل بشكل رئيسي:
- بنية البرمجيات: في تطوير البرمجيات، يمكن استخدام المخطط الصنفي لتوضيح بنية تطبيق برمجي. ويشمل ذلك عرض كيفية تفاعل الوحدات أو الخدمات المختلفة، وتدفّق البيانات، وتفاعل المكوّنات عالية المستوى.
- مخطط طوبولوجيا الشبكة: تناسب المخططات الصنفية بصفة خاصة تمثيل بنية الشبكات في تقنية المعلومات والاتصالات. ويمكنها عرض كيفية ترابط أجهزة وخدمات الشبكة المختلفة، بما في ذلك الموجهات والمبدّلات والجدران النارية وتدفّق البيانات في الشبكة.
- مخطط سير العمليات: في الأعمال والتصنيع، يمكن استخدام المخططات الصنفية لإنشاء مخططات سير العمليات. وتمثّل هذه المخططات مراحل عملية الأعمال أو التصنيع، وتُساعد على تصوير ترتيب الخطوات ونقاط القرار وتدفّق التحكم.
- الأنظمة الكهربائية: يستخدم المهندسون المخططات الصنفية لتمثيل الأنظمة والدوائر الكهربائية. ويمكنها توضيح البنية عالية المستوى للنظام الكهربائي، والتفاعل بين مكوّناته الكهربائية المختلفة، وتدفّق التيار.
- الأغراض التعليمية: تُستخدم المخططات الصنفية على نطاق واسع أيضًا في المواد التعليمية لشرح المفاهيم والأنظمة المعقّدة بصورة مبسّطة. وتُساعد على تفكيك وتصوير النظريات العلمية والمبادئ الهندسية والأنظمة التقنية.
بعد ذلك، سنتعمّق في طرق إنشاء المخططات الصنفية والتعامل معها باستخدام Mermaid، ونغطّي كل شيء من الصيغة الأساسية إلى التكوين المتقدّم والتنسيق.
مخطط صنفي بسيط
البنية الأساسية
يتكوّن المخطط الصنفي من مربعات تمثّل كيانات أو مكوّنات مختلفة، ويمكن في Mermaid إنشاء المربعات بسهولة باستخدام تسميات نصية بسيطة. وأبسط شكل للمخطط الصنفي يمكن أن يكون سلسلة مربعات دون أي خطوط توصيل.
مثال على مخطط صنفي بسيط: لإنشاء مخطط صنفي بسيط يحتوي على ثلاثة مربعات موسومة a و b و c، تكون الصيغة كما يلي:
نسخ
تضمين
block-beta
a b c
سيُنشئ هذا الكود ثلاثة مربعات مرتّبة أفقيًا، وسيُباعد بين كل مربع ويُحاذيه تلقائيًا لتحقيق أفضل قابلية للقراءة.
تعريف عدد الأعمدة المراد استخدامها
مخطط متعدد الأعمدة
رغم أن المخطط الصنفي البسيط خطي وبسيط، فقد تتطلّب الأنظمة الأكثر تعقيدًا تخطيطًا منظمًا. وتتيح Mermaid تنظيم المربعات في أعمدة متعددة، مما يساعد على إنشاء مخططات أكثر تعقيدًا وتفصيلًا.
مثال على مخطط متعدد الأعمدة: عند الحاجة إلى توزيع المربعات على عدة أعمدة، يمكن تحديد عدد الأعمدة وترتيب المربعات وفق ذلك. وفيما يلي كيفية إنشاء مخطط صنفي بثلاثة أعمدة وأربعة مربعات، حيث يظهر المربع الرابع في السطر الثاني:
نسخ
تضمين
block-beta
columns 3
a b c d
بهذه الصيغة ترتّب Mermaid المربعات a و b و c و d في ثلاثة أعمدة، وتنتقل إلى السطر التالي عند الحاجة. وهذه الميزة مفيدة بصفة خاصة لتمثيل الأنظمة الهرمية أو متعددة الطبقات.
تكوين المربعات المتقدّم
تتيح صيغة Mermaid المتقدمة مرونة وتعقيدًا أكبر في تصميم المخططات، لتواكب حالات وسيناريوهات استخدام أوسع.
ضبط عرض المربع
الامتداد عبر أعمدة متعددة
في المخططات الأكثر تعقيدًا، قد تحتاج إلى مربعات تمتد عبر أعمدة متعددة للتأكيد على بعض المكوّنات أو لتمثيل كيانات أكبر. وتتيح Mermaid ضبط عرض المربع ليشمل عدة أعمدة، مما يعزّز قابلية قراءة المخطط وبنائيته.
مثال: لإنشاء مربع يمتد عبر عمودين، يمكنك تحديد العرض المطلوب لكل مربع:
نسخ
تضمين
block-beta
columns 3
a["A label"] b:2 c:2 d
في هذا المثال، يشغل المربع الموسوم A label عمودًا واحدًا، بينما يمتد المربعان b و c عبر عمودين، ويُخصَّص المربع d لعموده الخاص. وهذه المرونة في حجم المربعات ضرورية لتمثيل الأنظمة التي تتضمّن مكوّنات ذات أهمية أو حجم مختلف تمثيلًا دقيقًا.
إنشاء مربعات مركّبة
مربعات متداخلة
تتيح المربعات المركّبة تمثيل الأنظمة المتداخلة أو الهرمية، حيث يحتوي أحد المكوّنات على عدة مكوّنات فرعية.
مثال: يتضمّن إنشاء مربع مركّب تعريف مربع أصل ثم تضمين مربعات فرعية داخله. وفيما يلي صيغة تعريف مربع مركّب يحتوي على عناصر متداخلة:
نسخ
تضمين
block-beta
block
D
end
A["A: I am a wide one"]
في هذه الصيغة، D مربع فرعي متداخل داخل مربع أصل أكبر. وهذه الميزة مفيدة بصفة خاصة لوصف الهياكل المعقّدة، مثل خادم يحتوي على خدمات متعددة أو قسم داخل إطار تنظيمي أكبر.
عرض الأعمدة التلقائي
ضبط العرض
تتيح Mermaid ضبط عرض الأعمدة ديناميكيًا وفق محتوى المربعات. ويُحدَّد عرض العمود بأعرض مربع فيه، لضمان بقاء المخطط متوازنًا وقابلًا للقراءة.
مثال: في مخطط بأحجام مربعات مختلفة، تضبط Mermaid عرض الأعمدة تلقائيًا لتناسب أكبر كتلة في كل عمود.
نسخ
تضمين
block-beta
columns 3
a:3
block:group1:2
columns 2
h i j k
end
g
block:group2:3
%% columns auto (default)
l m n o p q r
end
يوضّح هذا كيف تضبط Mermaid عرض الأعمدة ديناميكيًا لتناسب أعرض كتلة.
دمج المربعات أفقيًا: عند الحاجة إلى تكديس المربعات أفقيًا، يمكن إتمام المهمة باستخدام عرض العمود. وفيما يلي صيغة مخطط صنفي لإنشاء 4 مربعات مكدّسة معًا:
نسخ
تضمين
block-beta
block
columns 1
a["A label"] b c d
end
في هذا المثال، يُضبط عرض المربع المدمج تلقائيًا ليكون بعرض أكبر مربع فرعي.
أنواع المربعات وأشكالها
لا يقتصر المخطط الصنفي في Mermaid على الشكل المستطيل القياسي. وتوفّر Mermaid أشكالًا متعددة للمربعات، مما يتيح تمثيلًا أكثر تفصيلًا وتخصيصًا لأنواع مختلفة من المعلومات أو الكيانات.
أشكال المربعات القياسية
مستطيل بزوايا دائرية
ينشئ مربعًا مستطيلًا بزوايا دائرية، ويمكن استخدامه لتمثيل مكوّن أكثر مرونة أو ليونة:
نسخ
تضمين
block-beta
id1("This is the text in the box")
شكل الملعب
يمكن استخدام مربع بشكل الملعب لتمثيل مكوّنات موجّهة نحو العمليات:
نسخ
تضمين
block-beta
id1(["This is the text in the box"])
شكل المخطط الفرعي
يُستخدم لتمثيل عملية فرعية أو عملية متضمَّنة، ويُمثَّل بمربع مستطيل يحتوي على خطين رأسيين:
نسخ
تضمين
block-beta
id1[["This is the text in the box"]]
أسطواني
تناسب الأسطوانة بصفة خاصة تمثيل قاعدة بيانات أو مكوّن تخزين:
نسخ
تضمين
block-beta
id1[("Database")]
دائري
يمكن استخدام الدائرة لتمثيل مكوّن مركزي أو حرج:
نسخ
تضمين
block-beta
id1(("This is the text in the circle"))
الشكل غير المتماثل والمعين والسُداسي
استخدم المعين للقرارات، وبالنسبة للعمليات الفريدة أو المتخصّصة يمكن استخدام الشكل غير المتماثل والسُداسي:
شكل غير متماثل
نسخ
تضمين
block-beta
id1>"This is the text in the box"]
نسخ
تضمين
block-beta
id1{"This is the text in the box"}
نسخ
تضمين
block-beta
id1{{"This is the text in the box"}}
متوازي الأضلاع وشبه المنحرف
يناسب متوازي الأضلاع وشبه المنحرف بصفة خاصة عمليات الإدخال / الإخراج والانتقال
نسخ
تضمين
block-beta
id1[/"This is the text in the box"/]
id2["This is the text in the box"]
A[/"Christmas"]
B["Go shopping"/]
دائرة مزدوجة
لإبراز المكوّنات الحرجة أو عالية الأولوية، يكون استخدام الدائرة المزدوجة فعّالًا:
نسخ
تضمين
block-beta
id1((("This is the text in the circle")))
مربع السهم والمربع الفارغ
مربع سهم
يمكن لمربع السهم عرض الاتجاه أو التدفّق داخل المسار بصورة مرئية:
نسخ
تضمين
block-beta
blockArrowId<["Label"]>(right)
blockArrowId2<["Label"]>(left)
blockArrowId3<["Label"]>(up)
blockArrowId4<["Label"]>(down)
blockArrowId5<["Label"]>(x)
blockArrowId6<["Label"]>(y)
blockArrowId6<["Label"]>(x, down)
مربع فارغ
يمكن استخدام المربع الفارغ لإنشاء فراغ، وهو أمر مفيد للتخطيط وقابلية القراءة:
نسخ
تضمين
block-beta
columns 3
a space b
c d e
نسخ
تضمين
block-beta
ida space:3 idb idc
لاحظ أنك يمكنك استخدام الرمز الرقمي space:num لتعيين عدد الأعمدة التي يشغلها المربع الفارغ، حيث يمثّل num عرض العمود. ويمكنك أيضًا استخدام space، والافتراضي عمود واحد.
تعزّز الأشكال القياسية والأشكال الخاصة في Mermaid القدرة التعبيرية للمخطط الصنفي، مما يتيح تمثيلًا أكثر دقة وأكثر سياقية.
ربط المربعات بالخطوط
من الخصائص الرئيسية للمخطط الصنفي في Mermaid القدرة على ربط المربعات باستخدام أنواع مختلفة من الخطوط أو الروابط.
الربط الأساسي وأنواع الأسهم
يتطلب ربط المربعات استخدام أسهم أو خطوط. وتصف هذه الموصّلات العلاقات أو تدفّق المعلومات بين المربعات. وتوفّر Mermaid مجموعة من أنواع الأسهم لتلبية احتياجات المخططات المختلفة.
الرابط الأساسي
إنشاء رابط بسيط مع سهم، يعرض الاتجاه أو التدفّق من كتلة إلى أخرى:
نسخ
تضمين
block-beta
A space B
A-->B
يوضّح هذا المثال الربط المباشر من المربع A إلى المربع B.
النص على الرابط
إلى جانب ربط المربعات، غالبًا ما تحتاج أيضًا إلى وصف العلاقة أو وسمها. وتتيح Mermaid إضافة نص على الرابط لتوفير سياق للرابط.
لإضافة نص إلى الرابط، تكون الصيغة بتضمين هذا النص في تعريف الرابط:
نسخ
تضمين
block-beta
A space:2 B
A-- "X" -->B
نسخ
تضمين
block-beta
columns 1
db(("DB"))
blockArrowId6<[" "]>(down)
block:ID
A
B["A wide one in the middle"]
C
end
space
D
ID --> D
C --> D
style B fill:pink,stroke:#333,stroke-width:4px
التنسيق والتخصيص
إلى جانب بنية المخطط الصنفي وتخطيطه، توفّر Mermaid عددًا كبيرًا من خيارات التنسيق، وتتيح هذه الميزات المخصّصة إنشاء مخططات أكثر تميّزًا بصريًا وإفادة.
تنسيق المربع بشكل منفرد
تتيح Mermaid إجراء إعدادات تنسيق تفصيلية لكل مربع، ويمكنك تطبيق خصائص CSS متنوعة، مثل الألوان والحدود وسماكة الإطار.
تخصيص تنسيق مربع واحد
لتطبيق تنسيق مخصّص على مربع، يمكنك استخدام صيغة style متبوعة بمعرّف المربع وخصائص CSS المطلوبة:
نسخ
تضمين
block-beta
id1 space id2
id1("Start")-->id2("Stop")
style id1 fill:pink,stroke:#333,stroke-width:4px
style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
تنسيق الفئة
تدعم Mermaid تطبيق التنسيق على الفئات. وإذا أردت تطبيق مجموعة تنسيقات معيّنة على عدة عناصر، فإن استخدام إعدادات التنسيق يكون أسهل، لأنك تحتاج فقط إلى ربط هذه العناصر بفئة واحدة.
تعيين تنسيق لفئة واحدة
نسخ
تضمين
block-beta
A space B
A-->B
classDef blue fill:pink,stroke:#333,stroke-width:4px;
class A blue
style B fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
هنا، عُرِّفت فئة باسم blue وطُبِّقت على المربع A، بينما يتلقّى المربع B تنسيقًا منفردًا.
حالات الاستخدام
تظهر تعدّدية استخدامات المخطط الصنفي في Mermaid بأجلى صورها عندما تُطبَّق المخططات النمطية على سيناريوهات واقعية.
أمثلة مفصّلة على الوظائف المختلفة
من خلال عناصر البنية والروابط والتنسيق، يمكننا إنشاء مخططات صنفية في Mermaid تؤدي أدوارًا محدّدة في سياقات مختلفة.
بنية النظام
فيما يلي بنية نظام برمجي بسيط بمكوّنات مترابطة:
نسخ
تضمين
block-beta
columns 3
Frontend blockArrowId6<[" "]>(right) Backend
space:2 down<[" "]>(down)
Disk left<[" "]>(left) Database[("Database")]
classDef front fill:pink,stroke:#333;
classDef back fill:#f96,stroke:#333;
class Frontend front
class Backend,Database back
يعرض هذا المثال بنية أساسية تتضمّن الواجهة الأمامية والخلفية وقاعدة بيانات، وتختلف أشكال المربعات لتمييز أنواع المكوّنات المختلفة.
عملية الأعمال
فيما يلي عملية أعمال ذات نقاط قرار ومراحل متعددة:
نسخ
تضمين
block-beta
columns 3
Start(("Start")) space:2
down<[" "]>(down) space:2
Decision{{"Make Decision"}} right<["Yes"]>(right) Process1["Process A"]
downAgain<["No"]>(down) space r3<["Done"]>(down)
Process2["Process B"] r2<["Done"]>(right) End(("End"))
style Start fill:pink;
style End fill:pink;
تُبرز هذه الحالات الواقعية القيمة العملية للمخطط الصنفي في Mermaid من حيث تبسيط المعلومات المعقّدة وتحقيق تواصل فعّال عبر المجالات.
استكشاف الأخطاء وإصلاحها
قد يواجه إنشاء مخططات صنفية معقّدة باستخدام صيغة Mermaid بعض التحديات أحيانًا، ويسرد هذا القسم أخطاء الصيغة الشائعة، ويقدّم نصائح لإدارة هياكل المخططات الأكثر تعقيدًا.
أخطاء صيغة شائعة
يُعدّ تجنّب أخطاء الصيغة الشائعة مفتاحًا لاستخدام المخطط الصنفي في Mermaid بسلاسة.
خطأ في الرابط
قد يؤدي استخدام صيغة رابط غير صحيحة إلى نتائج غير متوقّعة أو مخطط تالف:
نسخ
تضمين
block-beta
A - B
تصحيح: تأكّد من الاستخدام الصحيح للأسهم (--> أو ---) لربط الكتل لتحديد اتجاه الربط ونوعه. بالإضافة إلى ذلك، من المبادئ الأساسية للمخطط الصنفي أن يتحكّم المؤلف بالكامل في مواضع المربعات، لذا في الحالة أعلاه يجب إضافة مسافات بين المربعات:
نسخ
تضمين
block-beta
A space B
A --> B
اختلال التنسيق
قد يؤدي تطبيق التنسيق في سياق خاطئ أو بصيغة غير صحيحة إلى عدم إجراء التنسيق كما هو متوقّع:
نسخ
تضمين
block-beta
A
style A fillpink;
تصحيح: تأكّد من فصل خصائص التنسيق بفواصل بصورة صحيحة، واستخدم تنسيق خاصية CSS الصحيح لتصحيح الصيغة:
نسخ
تضمين
block-beta
A
style A fill:pink,stroke:#333;
