الصق Mermaid وشاهد المخطط. فورًا.

الصق Mermaid، عاين فورًا، صدّر SVG/PNG، ارفع الملفات، اسحب للتحريك، وشارك عبر الرابط.

قوالب سريعة
افتح ملف Mermaidأفلته في أي مكان — .mmd · .mermaid · .md · .txt · كيف تفتح ملف ‎.mmd
جارٍ تحميل Mermaid...سطر 1, عمود 1
نصيحة: في المعاينة، انقر واسحب (أو المس واسحب) للتحريك. أسقط الملفات على المعاينة لتحميلها.

ما هو Mermaid؟

Mermaid أداة للرسم التخطيطي والرسوم البيانية مبنية على JavaScript تستخدم تعريفات نصية مستوحاة من Markdown لإنشاء المخططات وتعديلها ديناميكيًا. وهو مشروع مفتوح المصدر يتيح لك توليد مخططات من أوصاف نصية بسيطة.

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

يتكامل Mermaid بسلاسة مع منصات التوثيق والويكي وملفات Markdown، مما يجعله أداة مفضلة لدى المطورين والكتّاب التقنيين.

لماذا تستخدم Mermaid؟

  • إدارة الإصدارات: المخططات ملفات نصية، لذا يمكن تتبعها في Git إلى جانب الكود
  • تحديثات سريعة: غيّر بضعة أسطر نصية بدلاً من إعادة رسم المخططات كاملة
  • اتساق: يتولى Mermaid التخطيط والتنسيق تلقائيًا ليضمن مخططات متسقة
  • لا حاجة لأدوات تصميم: لا حاجة إلى Visio أو Lucidchart أو أدوات مكلفة أخرى
  • التوثيق ككود: احتفظ بالمخططات في نفس المستودع مع التوثيق
  • متعدد المنصات: يعمل في المتصفحات وNode.js ويتكامل مع العديد من المنصات
  • مجاني ومفتوح المصدر: بلا تكاليف ترخيص ومجتمع نشط
  • أنواع متعددة من المخططات: يدعم المخططات الانسيابية ومخططات التسلسل ومخططات الفئات وغيرها

مخطط انسيابي

أنشئ مخططات انسيابية احترافية باستخدام صيغة نصية بسيطة. معاينة فورية، تصدير إلى SVG/PNG ومشاركة عبر URL - كل ذلك مجاناً.

مخطط التسلسل

صمم مخططات تسلسل UML لتصور التفاعلات بين مكونات النظام. مثالي لتوثيق API وتصميم الأنظمة.

مخطط جانت

خطط وصوّر الجداول الزمنية للمشاريع باستخدام مخططات جانت. تتبع المهام والتبعيات والمعالم باستخدام صيغة نصية بسيطة.

مخطط الفئات

صمم أنظمة كائنية التوجه باستخدام مخططات فئات UML. حدد الفئات والخصائص والأساليب والعلاقات باستخدام نص بسيط.

مخطط الحالة

صوّر آلات الحالة وسلوك النظام باستخدام مخططات الحالة. نمذج الحالات والانتقالات والأحداث باستخدام نص بسيط.

مخطط ER

صمم مخططات قواعد البيانات باستخدام مخططات علاقة الكيانات. حدد الكيانات والخصائص والعلاقات باستخدام صيغة نصية بسيطة.

إعلان

الدليل الكامل لمخططات Mermaid

تعلّم إنشاء مخططات احترافية باستخدام صياغة نصية بسيطة

الأسئلة الشائعة

أسئلة شائعة حول استخدام Mermaid Viewer وإنشاء المخططات

هل هذا المحرر مجاني فعلًا؟
نعم، مجاني بالكامل. يمكنك إنشاء عدد غير محدود من المخططات، والتصدير إلى SVG/PNG، والمشاركة عبر الرابط، واستخدام جميع الميزات دون تسجيل أو دفع. الأداة مدعومة بإعلانات غير مزعجة.
هل أحتاج إلى تثبيت أي شيء؟
لا، لا تحتاج إلى تثبيت أي شيء. هذه أداة ويب تعمل بالكامل داخل المتصفح. افتح الموقع وابدأ فوراً على الكمبيوتر أو الجهاز اللوحي أو الهاتف.
كيف أحفظ المخططات؟
يمكنك حفظ عملك بعدة طرق: 1) التصدير كـ SVG أو PNG، 2) المشاركة عبر URL حيث يتم ترميز الكود داخل الرابط، 3) نسخ كود Mermaid إلى ملفاتك، 4) رفع/تنزيل ملفات .mmd أو .mermaid.
هل يمكنني استخدام المخططات في التوثيق؟
بالتأكيد. صدّر مخططاتك بصيغة SVG (قابلة للتكبير) أو PNG واستخدمها في التوثيق أو العروض أو المواقع. ويمكنك أيضاً تضمين كود Mermaid مباشرة في منصات مثل GitHub وGitLab وNotion.
ما الفرق بين SVG وPNG؟
صيغة SVG متجهية وتحافظ على الجودة بأي حجم، لذا هي الأفضل للويب والتوثيق. أما PNG فهي نقطية ومناسبة للمشاركة السريعة لكنها تفقد الجودة عند تغيير الحجم.
لماذا لا يتم عرض المخطط؟
تحقق من أخطاء الصياغة في كود Mermaid. من الأخطاء الشائعة: علامات اقتباس غير مغلقة، نقطتان أو فاصلة منقوطة مفقودة، معرّفات عقد خاطئة، أو صياغة غير مدعومة. جرّب تبسيط المخطط لتحديد المشكلة.
هل يمكنني التعاون مع الآخرين؟
لا توجد ميزة تعاون لحظي مدمجة، لكن يمكنك مشاركة المخططات بسهولة عبر الرابط. يمكن للآخرين فتحها وتعديلها ثم مشاركة نسختهم. وطبيعة Mermaid النصية تجعلها مناسبة جداً للعمل مع Git.
هل يعمل بدون إنترنت؟
التحميل الأول يحتاج اتصالاً بالإنترنت. بعد ذلك، غالباً تعمل ميزات التحرير الأساسية بدون اتصال. لكن بعض الميزات مثل التصدير قد تحتاج اتصالاً.
كيف أتعلم صياغة Mermaid؟
ابدأ بدليل Mermaid الشامل لدينا الذي يغطي جميع أنواع المخططات مع أمثلة. استخدم القوالب للبداية السريعة، وارجع أيضاً إلى التوثيق الرسمي في mermaid.js.org.
هل يمكن تخصيص المظهر؟
نعم. تتبع المخططات سمة الموقع: بدّل بين الوضع الفاتح والداكن عبر زر السمة في الشريط العلوي، فيُعاد رسم المخطط بسمة Mermaid المطابقة. وللتخصيص المتقدم، استخدم توجيه %%{init:...}%% لتحديد الألوان والخطوط والخصائص البصرية الأخرى.
ما أنواع المخططات المدعومة؟
يدعم هذا المحرر الأنواع الرئيسية من مخططات Mermaid: Flowcharts، وSequence، وClass، وState، وER، وGantt، وPie، وGit Graphs، وUser Journey وغيرها.
هل بيانات المخطط خاصة؟
لا يتم إرسال كود المخطط إلى خوادمنا. تتم عملية العرض بالكامل داخل متصفحك. وعند المشاركة عبر الرابط يكون الكود مشفراً داخل URL نفسه؛ نحن لا نخزن محتوى مخططاتك ولا نتتبعه.
لماذا أستخدم مخططات نصية؟
المخططات النصية توفر مزايا مهمة: التحكم بالإصدارات (ممتاز مع Git)، سرعة التعديل، اتساق النمط، سهولة البحث، وخفة الحجم، وإمكانية التوليد البرمجي. كما أنها أسهل للمراجعة في طلبات السحب.
هل يمكن تضمين Mermaid في موقعي؟
نعم. يمكنك تضمين مكتبة Mermaid JavaScript في موقعك وإضافة كتل كود Mermaid. كثير من المنصات تدعم Mermaid أصلاً مثل GitHub وGitLab وNotion وObsidian.
ما الحجم الأقصى الموصى به للمخطط؟
لا يوجد حد صارم، لكن المخططات الكبيرة جداً (أكثر من نحو 100 عقدة) قد تُعرض ببطء حسب جهازك. للأنظمة المعقدة، الأفضل تقسيمها إلى عدة مخططات أصغر وأكثر تركيزاً.