مطور / مخططات
محرر Mermaid المباشر
اكتب تعليمات Mermaid البرمجية وشاهد المخطط أثناء الكتابة: مخططات انسيابية، ومخططات تسلسل، ومخططات فئات، ومخططات Gantt، ومخططات دائرية، مع إمكانية تنزيلها بصيغة SVG وPNG.
محرر Mermaid المباشر: يرسم المحرر المخططات باستخدام Mermaid، وهي مكتبة مفتوحة المصدر تستخدمها GitHub وGitLab والعديد من أدوات التوثيق لإنشاء مخططات مكتوبة كنص. يعمل المحرر في الوضع الصارم، لذلك لا يمكن للتعليمات البرمجية من مصدر آخر تشغيل نصوص برمجية أو إضافة معالجات للنقر. تظل تنزيلات SVG واضحة بأي حجم، بينما تُرسم تنزيلات PNG بضعف الحجم الظاهر على الشاشة، وبخلفية بيضاء. يعمل 100% محليًا في المتصفح، من دون رفع أي ملفات إلى الخادم.
- الفئة
- أدوات المطورين
- مرات التشغيل
- في المتصفح
- التكلفة
- مجاني · بلا تسجيل
- التوفر
- جاهز للاستخدام
تعمل بالكامل في المتصفح
تُرسَم المخططات في المتصفح باستخدام Mermaid، في الوضع الصارم، لذلك لا يمكن لتعليمات المخطط البرمجية تشغيل نصوص برمجية. الصق التعليمات البرمجية نفسها في GitHub أو GitLab أو Notion Markdown داخل كتلة تعليمات mermaid البرمجية لعرضها هناك.
المخططات كنص
يصبح المخطط المرسوم في برنامج رسومات قديماً لأن تغييره يتطلب فتح الملف مجدداً. أما مخطط Mermaid فهو بضعة أسطر من النص توضع بجوار الكود أو المستند الذي تصفه، وتتغير في الالتزام نفسه، وتظهر في المراجعة على شكل فرق قابل للقراءة.
يبدأ كل مخطط بنوعه: flowchart مع اتجاه مثل TD (من الأعلى إلى الأسفل) أو LR (من اليسار إلى اليمين)، أو sequenceDiagram، أو classDiagram، أو gantt، أو pie. تُكتب العقدة مرة واحدة مع تسميتها، A[Start]، ثم يُشار إليها باسمها، A --> B.
التصدير
يحافظ SVG على وضوح الخطوط والنص بأي حجم، وهو الخيار الأفضل للمستندات والعروض التقديمية؛ أما PNG فيناسب تطبيقات الدردشة والأماكن التي لا تقبل SVG. لتحرير SVG المُصدّر يدوياً، افتحه في محرّر SVG.
طريقة الاستخدام
- ابدأ من مثال أو ألصق تعليمات Mermaid البرمجية الخاصة بك.
- عدّل التعليمات البرمجية؛ يُعاد رسم المخطط أثناء الكتابة، أو تظهر رسالة الخطأ.
- نزّل المخطط بصيغة SVG أو PNG، أو انسخ التعليمات البرمجية.
الخصوصية والقيود
تُرسم المخططات في المتصفح، ولا تُحفظ التعليمات البرمجية إلا في هذا المتصفح، لذلك تظل متاحة في المرة التالية.
أدوات ذات صلة
الأسئلة الشائعة
ما هي Mermaid؟
طريقة لكتابة المخططات كنص. فسطر مثل A --> B يرسم مربعين متصلين بسهم، ما يتيح حفظ المخططات في ملفات Markdown ومراجعات التعليمات البرمجية وتغييرها بتعديل نصي بدلًا من استخدام أداة رسم.
كيف أعرض المخطط على GitHub؟
ضع التعليمات البرمجية داخل كتلة تعليمات برمجية محاطة بعلامات في ملف Markdown أو مسألة أو طلب سحب، وحدد اللغة بالرمز mermaid: ثلاث علامات backtick، تليها كلمة mermaid، ثم التعليمات البرمجية، ثم ثلاث علامات backtick. يعرضها GitHub وGitLab وNotion في موضعها.
لماذا يظهر خطأ في المخطط؟
تحدد الرسالة السطر الذي تعذّر على Mermaid قراءته. من الأسباب الشائعة عدم تحديد نوع المخطط في السطر الأول، مثل flowchart TD، أو عدم إغلاق الأقواس أو علامات الاقتباس، أو وجود نص يحتوي على أحرف خاصة ويحتاج إلى وضعه بين علامتي اقتباس.
ما أنواع المخططات المدعومة؟
كل نوع يدعمه إصدار Mermaid الذي يحمّله المحرر، بما في ذلك المخططات الانسيابية، ومخططات التسلسل، والفئات، والحالات، وعلاقات الكيانات، وGantt، والدائرية، والخرائط الذهنية، والخطوط الزمنية، والمخططات البيانية لـ git. تغطي الأمثلة الأنواع الخمسة الأكثر شيوعًا.
أداة مجانية · عدد مرات الاستخدام في المتصفح · لا يتطلب حسابًا