اكتب صياغة Mermaid في اليسار وشاهد المخطط يرسم نفسه في اليمين. عارض ومُصوِّر Mermaid يشغّل محرك Mermaid 12 كاملًا محليًا في متصفحك: الصق تعريف مخطط من توثيقك، أو اختر نموذجًا لتتعلّم عائلة صياغة جديدة، وأعد تنسيقه بإحدى عشرة سمات وثلاثة مظاهر، ثم صدّر SVG أو PNG جاهزًا للإنتاج — أو شارك رابطًا يعيد إنتاج المخطط ذاته تمامًا لزميلك. لا شيء يُرفع: المحرك والمُنقّي والمُصدِّر جميعها تعمل في الصفحة الثابتة نفسها.
ثلاثون عائلة من المخططات في محرر واحد
يفهم Mermaid 12 أكثر بكثير من مخططات التدفق. الكلاسيكيات كلها هنا — مخططات التدفق بكتالوج الأشكال الجديد في v11.3، المخططات التتابعية بالتفعيلات وكتل loop/alt، مخططات الفئات والحالات والكيانات والعلاقات، مخططات جانت، رحلات المستخدم، الخرائط الذهنية، الخطوط الزمنية، مخططات Git ولوحات Kanban. وتضم العائلات الرسومية الدائرية والأرباع والمحاور وSankey وVenn. ويضيف إصدار 12.0 أحدث أفراد العائلة: مخططات حالات الاستخدام UML، وagentflow (من يفعل ماذا، وبأي أداة)، وtreemap، ومخططات الحزم، والرادارات، والمعمارية، وعظمة السمكة Ishikawa، وخرائط Wardley، وCynefin وغيرها — عشرون نموذجًا منتقاً تنتظرك في المنتقي، مجمّعة حسب العائلة حتى تكون الصياغة التالية على بعد نقرة واحدة.
كل نموذج مخطط كامل وصالح يمكن تعديله في مكانه — غيّر اسم عقدة، أضف وصلة، اكسر شيئًا عمدًا لترى كيف تظهر الأخطاء. تتقدم شارة الحالة فوق اللوحة حالات خامل، يحمّل، جاهز، متقادم أو خطأ، ويعرض صف الإحصاءات نوع المخطط المكتشف وزمن التصيير وحجم SVG بعد كل تصيير.
المظهر: سمات ومظاهر ومحركات تخطيط
ثلاثة ضوابط تقابل مباشرةً مخطط إعدادات Mermaid 12. السمة تختار اللوحة الألوانية: الكلاسيكيات الخمس (default وbase وneutral وdark وforest)، أو ثنائية neo المسطحة، أو عائلة redux ب variantاتها الملوّنة redux-color وredux-dark-color التي يستخدمها Mermaid 12 افتراضيًا لمخططات التدفق وحالات الاستخدام. والمظهر يختار أسلوب الرسم: classic لخُطوط Mermaid التقليدية، أو neo للأسلوب العصري الأنعم استدارةً، أو handDrawn لمظهر التخطيط اليدوي بروح rough.js — مع بذرة اختيارية كي يتكرر الاهتزاز نفسه بدقة عبر الأجهزة. ومحرك التخطيط يختار: ELK، نواة Eclipse للتخطيط التي يضمّها Mermaid 12 كافتراضي جديد وتنتج تخطيطات أرتب للمخططات الكبيرة، أو Dagre، الخوارزمية الكلاسيكية التي نظّمت مخططات Mermaid لعقد كامل.
تفضّل إعدادات لكل مخطط على حدة؟ يعمل frontmatter YAML الخاص بـ Mermaid وصياغة %%{directive}%% حرفيًا في المحرر: كتلة --- بمفاتيح config: تتقدم على اللوحة لهذا المخطط وحده، تمامًا كما توثّقه الوثائق الرسمية.
لوحة تتصرف كنافذة عرض
المعاينة نافذة عرض حقيقية لا صورة ساكنة. اسحب للتحريك، وCtrl/⌘ + عجلة الفأرة للتكبير، واضغط بإصبعين على الشاشات اللمسية، وانقر مرتين لإعادة الضبط. يبقى منزلق التكبير وأزرار +/− وأمر احتواء متزامنة — يقيس «احتواء» صندوق viewBox الأصلي للمخطط ويضبطه على مقياس اللوحة تمامًا، وهو ما تريده قبل التصدير. يخفّف التصيير التلقائي الكتابة بثلث ثانية؛ عطّله ويتولى زر صيّر (أو Mod/⌘ + Enter من أي مكان في الأداة) زمام الأمر للمستندات الكبيرة حيث تريد تصييرًا مقصودًا عند الطلب.
الأخطاء مواطن من الدرجة الأولى. حين يرفض المحلل الصياغة، تحل لوحة الخطأ محل المخطط حاملة رسالة تشخيص Mermaid — عادةً السطر والرمز المسبِّب — فيصبح إصلاح end مفقود أو اقتباس غير مغلق مسألة ثوانٍ لا دقائق.
التصدير والمشاركة
انسخ SVG يضع الترميز المستقل كاملًا في حافظتك — الحجم الأصلي مثبَّت، جاهز للتضمين في صفحة HTML أو للصق في أداة تصميم. ونزّل SVG يحفظ المستند نفسه بملف .svg باسم نوع المخطط والتاريخ. ونزّل PNG يُنقّط التصيير الحالي بدقة مضاعفة على خلفية شفافة، كليًا داخل المتصفح — لا خادم يرى مخططك أبدًا. ويكمل انسخ المصدر وشارك الطقم: زر المشاركة ينسخ عنوانًا يحمل شذرةُ المصدر والسمة والمظهر ومحرك التخطيط والتكبير، بحيث تفتحه على جهاز آخر فيعيد إنتاج الصورة ذاتها بلا أي ذهاب وإياب إلى خادم.
الأمان والخصوصية
تهيّئ الأداة Mermaid بمستوى securityLevel: "strict" — افتراض المكتبة — الذي يهرّب HTML في التسميات ويعطّل استدعاءات النقر، ومرور DOMPurify المدمج في Mermaid ينقّي SVG الناتج قبل أن يركّبه العارض عبر DOMParser، لا عبر أي واجهة حقن ترميز. تُحفظ مصدرتك في localStorage متصفحك أنت فقط حتى يستعيدها إعادة التحميل، وتحفظ روابط المشاركة كل شيء في شذرة العنوان التي لا يرسلها المتصفح إلى الخوادم أبدًا. هذا هو موقف كل أدوات Foxipa: صفحة ثابتة، لا قياس بعيد سوى تحليلات مجمّعة مجهولة، ولا شيء يُرسل للخارج.
أسئلة متكررة
ما هو Mermaid؟ محرك مخططات مفتوح المصدر بلغة JavaScript يرسم المخططات من تعريفات نصية مستوحاة من Markdown. يشغّل كتل المخططات في GitHub وGitLab وNotion وObsidian وكثير من أنظمة التوثيق — ولهذا فإن «الصق كتلة ```mermaid من توثيقي» هو سير العمل الأكثر شيوعًا للأداة.
أي إصدار يستخدمه العارض؟ Mermaid 12.0.0، الإصدار الحالي، مثبّت في بناء المشروع. أي أن ELK محرك التخطيط الافتراضي المضمّن، وجيل المظهر redux-color/neo متاح، إلى جانب نوعي المخططات الجديدين: حالات الاستخدام UML وagentflow.
هل يجب أن يكون مخططي كاملًا؟ لا — المصادر الجزئية تصيّر ما تستطيع، والمصادر غير الصالحة تعرض رسالة خطأ المحلل بدل لوحة فارغة. بناء المخطط قطعة قطعة أسلوب عمل طبيعي.
لماذا يبدو PNG الخاص بي مختلفًا قليلًا عن اللوحة؟ تصدير PNG ينقّط SVG نفسه بدقة مضاعفة؛ تموضع النص متطابق، لكن الخطوط ترجع إلى ما يوفره نظامك، والمتصفحات تنقّط تسميات <foreignObject> بفروق صغيرة. متصفحات Chromium تمنح أدق تنقيط.
هل من حد للحجم؟ يقبل المحرر حتى 500,000 محرف — أي maxTextSize الخاص بـ Mermaid — وتحمل روابط المشاركة حتى 24 كيلوبايت من المصدر. المخططات الضخمة جدًا تصير جيدًا لكن أبطأ بطبيعة الحال؛ عطّل التصيير التلقائي واستخدم Mod+Enter أثناء تحريرها.