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

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

تحقّق من أداة العرض المثبّتة لديك قبل اختيار الإعدادات

اعثر على إصدارك ضمن Settings → About → App → Current version، وهو الموضع المذكور في مساعدة إصدارات الوصول المبكر من Obsidian. سجّل هذا الإصدار قبل استكشاف مشكلات التنسيق.

هناك حد فاصل مهم: ملاحظات إصدار 22 أكتوبر 2026 لـ Obsidian 1.15.0 Desktop، والموسوم بإصدار وصول مبكر، تقدّم Pele لعرض مخططات Mermaid. وتذكر الملاحظات أنه يدعم صياغة Mermaid 12.1.0، ويستخدم ألوان السمات وخطوطها، وينتج أصناف SVG مختلفة. تصف ملاحظات الإصدار ذلك الإصدار بعينه، ولا تحدد أداة العرض المثبّتة على جهاز Mac لديك. راجع Obsidian 1.15.0 Desktop.

استخدم جدول القرار هذا قبل نسخ إعدادات من دليل آخر:

بيئة العرض لديك ابدأ بـ الحد الذي ينبغي تذكّره
Obsidian الذي يستخدم Mermaid نفسها أصناف المخطط الانسيابي في المصدر؛ ويمكن إضافة الترويسة التمهيدية للمخطط تعتمد ميزات الإعداد على إصدار Mermaid المثبّت.
Obsidian الذي يستخدم Pele الأنماط المحددة في المصدر؛ ويمكن إضافة متغيرات CSS الخاصة بـ Pele لا تنطبق سمات Mermaid ولا ألوان themeVariables.
مكوّن إضافي يستبدل عرض المخططات أداة العرض وإعداداتها الموثّقة للمكوّن الإضافي لا يكفي سلوك أداة العرض المضمّنة وحده لإثبات التوافق.

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

أنشئ نمطًا قابلًا لإعادة الاستخدام للمخطط الانسيابي داخل الملاحظة

أنشئ ملاحظة جديدة والصق الكتلة الكاملة أدناه، مع سياجي الشيفرة الافتتاحي والختامي. تحدد وثائق صياغة التنسيق المتقدم في Obsidian كتلة شيفرة محاطة بأسوار وموسومة بـ mermaid للمخططات.

```mermaid
flowchart TD
    A[Item A] --> B[Step B]
    B --> C[Result C]
    B --> D[Option D]

    classDef standard fill:#edf2f7,stroke:#475569,color:#172033,stroke-width:2px;
    classDef alternate fill:#e0f2fe,stroke:#0369a1,color:#172033,stroke-width:2px;
    class A,B,C standard;
    class D alternate;
```

تعرّف صياغة Mermaid الموثّقة classDef مظهرًا قابلًا لإعادة الاستخدام؛ وتُسنِد class هذا المظهر إلى العُقد المسماة. هنا، تستخدم ثلاث عُقد النمط standard، وتستخدم واحدة النمط alternate. أبقِ معرّفات العُقد منفصلة عن التسميات الظاهرة لتسهيل تتبّع تغييرات الصياغة. ترد هذه الآليات في المخططات الانسيابية — الصياغة الأساسية.

لوحة الألوان خيار تصميمي توضيحي. فهي تجمع بين حشوات فاتحة ونص داكن وحدود أوضح. كما تحدد التسمية Option D الخطوة البديلة، لذلك لا يعتمد معناها على الحشوة الزرقاء وحدها.

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

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

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

استخدم الترويسة التمهيدية للمخطط فقط عندما تعرض Mermaid المخطط

إذا كانت بيئتك المثبّتة تستخدم Mermaid نفسها وتدعم الترويسة التمهيدية للمخطط، فيمكنك ضبط لوحة الألوان العامة للمخطط والخطوط معًا. توثّق Mermaid إعدادات الترويسة التمهيدية ابتداءً من الإصدار 10.5.0. وتكون تهيئة مستوى الموقع من مسؤولية التطبيق المدمج؛ أما كاتب الملاحظة فيمكنه استخدام إعدادات محلية للمخطط. راجع إعدادات Mermaid.

هذا بديل كامل يضبط مظهرًا مشتركًا للعُقد الثلاث. جرّبه أولًا في كتلة اختبار منفصلة:

```mermaid
---
config:
  theme: base
  themeVariables:
    primaryColor: "#edf2f7"
    primaryTextColor: "#172033"
    primaryBorderColor: "#475569"
    lineColor: "#64748b"
    fontFamily: "Arial, sans-serif"
    fontSize: "16px"
---
flowchart TD
    A[Item A] --> B[Step B]
    B --> C[Result C]
```

يجب أن تكون YAML داخل سياج mermaid، قبل flowchart TD. هذه إعدادات للمخطط، وهي منفصلة عن خصائص الملاحظة الموجودة في أعلى ملف Markdown.

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

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

أضف إعدادات افتراضية مشتركة لـ Pele باستخدام مقتطف CSS صغير

في التثبيتات التي تعتمد على Pele، توفر متغيرات CSS مسارًا آخر مدعومًا. يفيد ذلك عندما تريد أن تشترك عدة مخططات في إعدادات افتراضية وتفضّل تعديل ورقة أنماط واحدة بدلًا من تحرير كل كتلة.

يستهدف المقتطف الكامل التالي المخططات الانسيابية في Pele. ويضبط النص والحشوات والحدود وألوان الوصلات، مع إبقاء الملاحظة المحيطة وسمة التطبيق كما هما. يرد المحدد والمتغيرات في تنسيق Pele للسمات.

.pele-flowchart {
  --pele-bg: #ffffff;
  --pele-fg: #172033;
  --pele-line: #64748b;
  --pele-surface: #edf2f7;
  --pele-surface-alt: #e2e8f0;
  --pele-border: #475569;
}

ثبّته باتباع خطوات سطح المكتب الموثّقة في Obsidian:

  1. افتح Settings.
  2. ضمن Appearance → CSS snippets، اختر Open snippets folder.
  3. أنشئ ملفًا نصيًا عاديًا باسم diagram-defaults.css في ذلك المجلد، والصق CSS فيه.
  4. عُد إلى Appearance → CSS snippets واختر Reload snippets.
  5. فعّل diagram-defaults.

ترد هذه الخيارات وتطبيق التغييرات المحفوظة في المقتطف تلقائيًا في مقتطفات CSS — مساعدة Obsidian. على Mac، تحقّق من أن المحرر حفظ اسم الملف بامتداد .css.

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

يستخدم هذا المقتطف عمدًا لوحة ألوان فاتحة وثابتة. إذا كان إعداد القراءة المفضل لديك يحتاج إلى لوحة أخرى، فغيّر ألوان النص والأسطح والحدود والخطوط معًا، ثم افحص النتيجة. يخدم المتغير --pele-bg عناصر الخلفية؛ ولا يضمن وجود لوحة معتمة خلف المخطط بأكمله.

اجعل هذا المقتطف خاصًا بـ Pele. توصي وثائق المخططات الانسيابية في Mermaid باستخدام classDef لتنسيق العُقد، وتحذّر من أن CSS الخارجي قد لا يتغلب على الأنماط الداخلية لـ Mermaid. لا تفترض أن ورقة أنماط تستهدف أداة عرض واحدة ستعمل مع الأخرى. راجع إرشادات أصناف CSS في Mermaid.

شخّص المخططات غير المقروءة بترتيب قابل للتكرار

اتبع التسلسل التالي عندما يُعرض المخطط لكن مظهره غير متناسق. فهو يفصل بين الصياغة ونطاق التنسيق والمساحة المتاحة دون تغيير سمة التطبيق.

  1. قلّص نطاق الاختبار. انسخ مخطط الملاحظة إلى ملاحظة مؤقتة، وأبقِ على ثلاث تسميات قصيرة. إذا أخفق المثال الصغير أيضًا، فتحقّق من دعم الصياغة أو أداة العرض قبل تحسين الألوان.
  2. اختر آلية تنسيق واحدة. اختبر الأصناف المحددة في المصدر وحدها، أو الترويسة التمهيدية لـ Mermaid وحدها، أو متغيرات Pele وحدها. فجمعها فورًا يصعّب تحديد الإعدادات التي تتغلب على غيرها.
  3. تحقّق من تناسق الألوان. افحص النص مقابل حشوة العقدة، ثم الحدود والأسهم مقابل الملاحظة المحيطة. أصلح الزوج غير المقروء قبل إضافة لون إبراز آخر.
  4. تحقّق من عرض مساحة القراءة. عاين المخطط بعرض اللوحة الذي تستخدمه عادةً. قصّر التسميات أو جرّب تخطيطًا رأسيًا إذا أصبح المخطط عريضًا جدًا.
  5. أعِد التعقيد تدريجيًا. أضف بقية العُقد والأنماط البديلة وتسميات الوصلات في مجموعات صغيرة. واحتفظ بآخر نسخة مقروءة للمقارنة.

للتحقق من الاتجاه، توثّق Mermaid TD على أنه من الأعلى إلى الأسفل وLR على أنه من اليسار إلى اليمين. جرّب تغيير هذا التصريح وحده قبل إعادة كتابة المخطط. راجع اتجاه المخطط الانسيابي.

قيّم النتيجة النهائية في أداة عرض Obsidian المثبّتة لديك. يمكن لمحرر خارجي المساعدة في فحص الصياغة، لكن Pele توثّق اختلاف مواضع العُقد والمسافات ومسارات الحواف عن Mermaid. تطابق المصدر لا يستلزم تطابق التخطيط الهندسي.

احتفظ بمخطط مرجعي صغير إلى جانب لوحة الألوان القابلة لإعادة الاستخدام. بعد أن تصبح تسمياته وعُقده ووصلاته واضحة عند عرض اللوحة المعتاد لديك، طبّق الأسلوب نفسه على ملاحظات عملك. يتحقق الاتساق من خلال نمط متكرر وحدود معروفة لأداة العرض؛ ويمكن أن تظل سمة Obsidian كما هي.

المصادر