محرر مخططات Mermaid
اكتب Mermaid في جانب، ويُرسم المخطط في الجانب الآخر أولًا بأول. يُميَّز الخطأ على سطره، بينما تبقى آخر نسخة سليمة ظاهرة على الشاشة. كل شيء يجري داخل تبويب المتصفح هذا.
كيف يعمل
Mermaid طريقة لكتابة المخطط نصًا. بضعة أسطر مثل «A --> B» تصير مخططًا انسيابيًا أو مخططًا تسلسليًا أو مخطط فئات أو قاعدة بيانات أو مخطط جانت أو خريطة ذهنية. تعرضه GitHub وGitLab وNotion ومعظم أدوات التوثيق مرسومًا في مكانه، ولهذا كثيرًا ما تكون المخططات في ملفات README والتوثيق مكتوبة بـ Mermaid. أما ما لا تقدمه لك فهو مكان جيد لكتابته.
يرسم هذا المحرر المخطط أثناء الكتابة. حين يكون سطر ما خاطئًا، يوضع تحته خط وتقول الرسالة ما كان Mermaid يتوقعه، بينما تبقى آخر نسخة سليمة على الشاشة باهتة، كي لا تختفي الصورة كلما كنت في منتصف كتابة سهم. ويمكن سحب المخططات الكبيرة وتكبيرها.
حين يبدو صحيحًا، احفظه بصيغة SVG، أو PNG بحجم يناسب وجهته: مستند أو شريحة أو صفحة مطبوعة. ويمكنك أيضًا نسخه مباشرة إلى الحافظة. تبقى مسودتك في هذا المتصفح بين الزيارات، ورابط المشاركة يحمل المخطط داخل الرابط نفسه، فلا يُخزَّن شيء منه على خادم أبدًا.
طريقة الاستخدام
- 1 اكتب Mermaid أو ألصقه، أو افتح ملف .mmd أو Markdown، أو ابدأ من مثال.
- 2 راقب المعاينة. إن كان تحت سطر خط، فأصلحه؛ الرسالة تقول ما كان Mermaid يتوقعه.
- 3 اختر مظهرًا، واسحب المعاينة أو كبّرها لتتحقق من التفاصيل.
- 4 نزِّل SVG أو PNG، أو انسخ الصورة، أو انسخ رابطًا لمشاركة المخطط.
معلومات مفيدة
- فتح ملف Markdown يفتح أول كتلة ```mermaid فيه، فيمكن تحرير مخطط ملف README وحده.
- اختيار مثال يستبدل ما في المحرر، وCtrl+Z يعيد مخططك.
- يبقى SVG حادًا بأي حجم، وهو ما يُستعمل على الويب. أما PNG فهو ما تقبله الشرائح وتطبيقات المحادثة ومعالجات النصوص بأكبر قدر من الموثوقية.
- السمة المضبوطة داخل المخطط بسطر %%{init}%% تتقدم على إعداد «المظهر».
- لا يُرفع أي شيء. يُرسم المخطط في هذا التبويب، وروابط المشاركة تحفظه في جزء العنوان الذي لا يرسله المتصفح إلى أي خادم أبدًا.
دعم المتصفحات
- Chrome 94 وما بعدها
- Firefox 93 وما بعدها · بالسرعة الكاملة من 113
- Safari 16.4 وما بعدها
- Edge 94 وما بعدها
هذه أقدم الإصدارات التي تملك كل ما تستخدمه الأداة. تُحسب من الأداة نفسها، فتتغير كلما تغيّرت.
جرى التحقق من أرقام الإصدارات في 2026-09-04.
الأسئلة الشائعة
هل يُرفع مخططي إلى أي مكان؟
لا. يعمل Mermaid داخل تبويب المتصفح هذا، ومسودتك تُحفظ في هذا المتصفح فقط. يمكنك التحقق من ذلك في أدوات المطوّر في متصفحك، في تبويب «الشبكة»: الكتابة لا ترسل شيئًا.
كيف تعمل روابط المشاركة من دون خادم؟
يُضغط المخطط ويُكتب في جزء الرابط الذي يلي علامة #. والمتصفحات لا ترسل هذا الجزء إلى الموقع أبدًا، فيفتح الرابط المخطط على جهاز أي شخص بينما لا يتلقاه الموقع نفسه. والمخطط الطويل يصنع رابطًا طويلًا.
ما أنواع المخططات التي يدعمها؟
كل ما يرسمه Mermaid 12: المخططات الانسيابية، ومخططات التسلسل والفئات والحالات والكيانات والعلاقات، ومخططات جانت، والمخططات الدائرية، والخرائط الذهنية، والخطوط الزمنية، ورحلات المستخدم، ورسوم Git، ومخططات الأرباع، ومخططات Sankey وXY، والمخططات الأحدث: block وpacket وarchitecture وkanban وradar وtreemap.
لماذا يوجد خط تحت أحد الأسطر؟
هناك توقف Mermaid عن فهم المخطط. والرسالة بجانبه رسالة Mermaid نفسه، وتسمّي ما كان يتوقع أن يجده. وكثيرًا ما يكون الخطأ الحقيقي قبله مباشرة، مثل قوس أو علامة اقتباس لم تُغلق.
ما حجم صورة PNG التي سأحصل عليها؟
يتوقف ذلك على الغرض منها. للمستند، ضعف الحجم الذي يُرسم به المخطط، فيبقى حادًا على الشاشات عالية الكثافة. للشرائح، أكبر ما يتسع في شاشة 4K. للطباعة، أكبر ما يتسع في صفحة A4 بدقة 300 dpi. ويعرض الزر الحجم الدقيق بالبكسل قبل أن تنزِّل.
هل أستطيع تحرير مخطط من ملف README الخاص بي؟
نعم. افتح ملف Markdown فتُفتح أول كتلة Mermaid فيه في المحرر. وحين تنتهي، انسخ النص وأعده إلى الملف.
هل من الآمن فتح مخطط أرسله إليّ شخص آخر؟
تُرسم المخططات في الوضع الصارم لـ Mermaid. يُزال كل ما قد يشغّل شيفرة، ولا يستطيع سطر داخل المخطط إيقاف هذا الوضع.
أدوات ذات صلة
تُعالَج ملفاتك على جهازك ولا تُرفع، ويمكنك التحقق من ذلك في أدوات المطور بمتصفحك ضمن تبويب «الشبكة».