Softonic

مُعايِن مخططات Mermaid

Mermaid لغة لرسم المخططات تعتمد على النص: تكتب بنصٍّ عادي الشكل الذي تريده للمخطط، فيُعرَض بصيغة SVG. وهي تدعم المخططات الانسيابية والمخططات التسلسلية ومخططات الفئات وآلات الحالة ومخططات ER (الكيانات والعلاقات) ومخططات جانت والمخططات الدائرية والخرائط الذهنية ومخططات فروع Git. يشغّل هذا المُعايِن مُحلِّل Mermaid الرسمي داخل المتصفح، ويُحدِّث ملف SVG مع كل حرف تكتبه، فتُجرِّب وتُعدِّل بحرية قبل أن تدفع مخططًا نصف مكسور إلى ملف README.

كيف تعايِن مخطط Mermaid

  1. 1

    اختر نوع المخطط

    انسيابي، تسلسلي، فئات، حالة، ER، جانت، دائري، مخطط Git، خريطة ذهنية.

  2. 2

    اكتب صيغة Mermaid

    في اللوحة اليمنى. يُحدِّث المُحلِّل المعاينة مع كل ضغطة مفتاح.

  3. 3

    راقب عرض SVG

    في اللوحة الأخرى. تظهر الأخطاء مباشرةً مع تحديد السطر المسبِّب لها.

  4. 4

    صدِّر النتيجة

    انسخ SVG أو نزِّل PNG أو انسخ شفرة Mermaid لِلَصْقها في GitHub أو MkDocs.

أنواع المخططات التسعة في لمحة

النوع بادئة الصيغة يُستخدَم في
مخطط انسيابي flowchart TD أشجار القرار وسير العمليات
مخطط تسلسلي sequenceDiagram استدعاءات واجهات API والتفاعلات بين الأنظمة عبر الزمن
مخطط فئات classDiagram معمارية البرمجة كائنية التوجه ونماذج المجال
مخطط حالة stateDiagram-v2 آلات الحالة المحدودة
مخطط ER erDiagram مخططات قواعد البيانات
مخطط جانت gantt الجداول الزمنية للمشاريع
مخطط دائري pie النسب المئوية من الكل
مخطط Git gitGraph تصوير بنية الفروع
خريطة ذهنية mindmap العصف الذهني الهرمي

بداية سريعة مع المخطط الانسيابي

flowchart LR
    A[Start] --> B{Is it working?}
    B -- Yes --> C[Great]
    B -- No --> D[Debug]
    D --> B

كلمات الاتجاه المفتاحية: TD من الأعلى إلى الأسفل، LR من اليسار إلى اليمين، RL من اليمين إلى اليسار، BT من الأسفل إلى الأعلى.

أشكال العُقَد: [rect] مستطيل، (rounded) مستطيل بزوايا دائرية، {diamond} مُعيَّن، ((circle)) دائرة، >flag] راية، [[subroutine]] روتين فرعي.

بداية سريعة مع المخطط التسلسلي

sequenceDiagram
    participant U as User
    participant API
    participant DB
    U->>API: POST /login
    API->>DB: SELECT user
    DB-->>API: record
    API-->>U: 200 + token

الرمز ->> سهم متصل (طلب)، و-->> سهم متقطع (استجابة). أما participant X as Label فيربط اسمًا مختصرًا بتسمية تظهر في المخطط.

أخطاء شائعة

  • سطر جديد ناقص بعد البادئة. يجب أن يكون السطر الأول flowchart TD أو ما يماثله، وأن يقف وحده.
  • محارف محجوزة داخل تسميات العُقَد. الأقواس بأنواعها وعلامات الاقتباس داخل التسمية تحتاج إلى تهريب أو إحاطة بعلامتَي اقتباس مزدوجتين: A["Node (v2)"].
  • رموز مخطط الفئات. البادئات +public عام و-private خاص و#protected محمي و~package على مستوى الحزمة، والنمط <<interface>>، والوراثة <|--، والتركيب *--، والتجميع o--.
  • صيغة تواريخ جانت. الصيغة الافتراضية هي YYYY-MM-DD، وإن اختلفت فغيِّرها بالسطر dateFormat YYYY-MM-DD في أعلى المخطط.

أين يُعرَض Mermaid فعليًا

  • GitHub يعرض كتل الشفرة المُعلَّمة بـ mermaid في المسائل وطلبات الدمج وملف README.md.
  • GitLab كذلك، بدعم أصلي منذ عام 2022.
  • MkDocs عبر إضافة pymdown-extensions.
  • Docusaurus وHugo عبر الإضافات.
  • Obsidian بمُعارِض مدمج.
  • VS Code عبر إضافة معاينة Mermaid.

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

يدعم GitHub معظم الأنواع: المخطط الانسيابي والتسلسلي ومخطط الفئات والحالة وER وجانت والدائري. أما الإضافات الأحدث (مثل رحلة المستخدم والخريطة الذهنية) فقد تتأخر. جرِّب المخطط في مسألة مسوَّدة قبل إدراجه في ملف README.

استخدم تعليمتَي classDef وclass لإسناد أصناف CSS إلى العُقَد. كما يدعم Mermaid تخصيص السمة عبر كتلة توجيه في أعلى الشفرة: %%{init: {"theme": "dark"}}%%.

نعم. تُعرَض المعاينة بصيغة SVG، فيمكنك تنزيل SVG مباشرةً (يتمدد بلا حدود من غير فقدان جودة) أو تصدير PNG بدقة 1x أو 2x أو 3x.

السبب الأشيع محرف محجوز داخل تسمية عقدة. أحِط أي تسمية تحتوي أقواسًا أو علامات اقتباس بعلامتَي اقتباس مزدوجتين: A["Node name (v2)"]. ورسالة الخطأ تشير إلى السطر المسبِّب للمشكلة.

لا. تعمل مكتبة Mermaid بالكامل داخل متصفحك وتعرض المخطط محليًا. لا يُرسَل أي شيء إلى أي خادم.

أدوات ذات صلة

مرجع جدول ASCII

جدول ASCII كامل من 0 إلى 127 مع التمثيل العشري والست عشري والثماني والثنائي والمرجع الرقمي في HTML لكل محرف، بما في ذلك أكواد التحكم مثل NUL وLF وDEL.

مرجع أحرف HTML

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

عدّاد FPS

قِس معدل الإطارات FPS في المتصفح عبر requestAnimationFrame: تنعيم، وأدنى وأقصى معدل إطارات، وحد تنبيه، ورسم بياني اختياري. يعمل محليًا بلا رفع ملفات وبلا API.

منسق JSON

الصق JSON لتنسيقه بمسافتين أو أربع مسافات، أو تصغيره إلى ناتج مضغوط، أو فحص بنيته بسرعة قبل نسخ النتيجة.

محول الثنائي إلى الست عشري

حوّل الإدخال الثنائي إلى قيمة ست عشرية بأحرف كبيرة. يتم تجاهل غير 0 و1 ولا تُحفظ الأصفار البادئة.

محول ASCII إلى Hex

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