/ الدليل / الملعب / mermaid-skill
← كل الخوادم ↗ GitHub
● مجتمع Agents365-ai ⚡ فوري

mermaid-skill

بواسطة Agents365-ai · Agents365-ai/mermaid-skill

قم بإنشاء مخططات Mermaid (.mmd) داخل Claude Code وحولها إلى PNG/SVG/PDF عبر mmdc — أكثر من 10 أنواع مخطط، تخطيط تلقائي.

Skill لـ Claude Code يتولى حلقة Mermaid الكاملة: كتابة مصدر .mmd، استدعاء mmdc للتحويل، دعم أنواع Mermaid الرئيسية (flowchart, sequence, class, state, ERD, gantt, git graph, journey, mindmap, C4). لا حاجة للصق الكود في محرر Mermaid المباشر.

▶ شاهد العرض 📦 التثبيت 💡 حالات الاستخدام

لماذا تستخدمه

الميزات الأساسية

عرض مباشر

كيف يبدو في الممارسة

mermaid-skill.replay ▶ جاهز
0/0

التثبيت

اختر العميل

~/Library/Application Support/Claude/claude_desktop_config.json  · Windows: %APPDATA%\Claude\claude_desktop_config.json
{
  "mcpServers": {
    "mermaid-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/Agents365-ai/mermaid-skill",
        "~/.claude/skills/mermaid-skill"
      ],
      "_inferred": true
    }
  }
}

افتح Claude Desktop → Settings → Developer → Edit Config. أعد التشغيل بعد الحفظ.

~/.cursor/mcp.json · .cursor/mcp.json
{
  "mcpServers": {
    "mermaid-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/Agents365-ai/mermaid-skill",
        "~/.claude/skills/mermaid-skill"
      ],
      "_inferred": true
    }
  }
}

يستخدم Cursor نفس مخطط mcpServers مثل Claude Desktop. إعدادات المشروع أولى من الإعدادات العامة.

VS Code → Cline → MCP Servers → Edit
{
  "mcpServers": {
    "mermaid-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/Agents365-ai/mermaid-skill",
        "~/.claude/skills/mermaid-skill"
      ],
      "_inferred": true
    }
  }
}

انقر على أيقونة MCP Servers في شريط Cline الجانبي، ثم "Edit Configuration".

~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "mermaid-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/Agents365-ai/mermaid-skill",
        "~/.claude/skills/mermaid-skill"
      ],
      "_inferred": true
    }
  }
}

نفس الصيغة مثل Claude Desktop. أعد تشغيل Windsurf لتطبيق التغييرات.

~/.continue/config.json
{
  "mcpServers": [
    {
      "name": "mermaid-skill",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/Agents365-ai/mermaid-skill",
        "~/.claude/skills/mermaid-skill"
      ]
    }
  ]
}

يستخدم Continue مصفوفة من كائنات الخادم بدلاً من خريطة.

~/.config/zed/settings.json
{
  "context_servers": {
    "mermaid-skill": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/Agents365-ai/mermaid-skill",
          "~/.claude/skills/mermaid-skill"
        ]
      }
    }
  }
}

أضف إلى context_servers. يعيد Zed التحميل تلقائيًا عند الحفظ.

claude mcp add mermaid-skill -- git clone https://github.com/Agents365-ai/mermaid-skill ~/.claude/skills/mermaid-skill

أمر من سطر واحد. تحقق باستخدام claude mcp list. احذف باستخدام claude mcp remove.

حالات الاستخدام

استخدامات عملية: mermaid-skill

رسم مخطط معماري لمشروعك الحالي

👤 المطورون الذين يكتبون الوثائق أو أدلة المعمارية أو أدلة التوظيف ⏱ ~20 min beginner

متى تستخدمه: تقضي وقتاً طويلاً في شرح المعمارية على Slack وتريد صورة توضيحية.

المتطلبات الأساسية
  • تثبيت mmdc — npm i -g @mermaid-js/mermaid-cli
  • تثبيت Skill — git clone https://github.com/Agents365-ai/mermaid-skill ~/.claude/skills/mermaid-skill
الخطوات
  1. وصف النظام
    استخدم mermaid-skill. رسم مخطط انسيابي للخدمة: client → API gateway → (auth / orders / payments) → Postgres / Redis / Stripe.✓ تم النسخ
    → مصدر .mmd مع أسماء عُقد ذات معنى، محول إلى PNG في docs/
  2. إضافة التفاصيل
    أضف تسميات على كل حافة تظهر البروتوكول (HTTPS, gRPC, TCP) ونوع المصادقة.✓ تم النسخ
    → مصدر محدث وإعادة تحويل
  3. حفظ التغييرات
    حفظ docs/architecture.mmd وصورة PNG الخاصة به.✓ تم النسخ
    → تشغيل git add و commit

النتيجة: مخطط حي في المستودع، وليس شريحة قديمة في Confluence.

المزالق
  • يصبح المخطط متاهة من الخطوط — اسمح لـ Claude باستخدام subgraphs وتلميحات الاتجاه؛ لا تضع كل شيء على طبقة واحدة
اجمعها مع: filesystem · git

إنتاج مخطط تسلسلي أثناء تصحيح الأخطاء

👤 المهندسون الذين يتتبعون خطأ متعدد الخدمات ⏱ ~15 min beginner

متى تستخدمه: تحاول فهم تفاعل غير متزامن والشرح باللغة الإنجليزية غير كافٍ.

الخطوات
  1. وصف التدفق
    استخدم mermaid-skill. مخطط تسلسلي: browser → SSR → auth service → session store → page render، مع وضع الفشل عند انقضاء جلسة العمل.✓ تم النسخ
    → مخطط تسلسلي مع الفشل معلق عليه
  2. شرح الخطأ
    حدد السطر الذي يظهر فيه الخطأ.✓ تم النسخ
    → صندوق/ملاحظة معلقة على الرسالة المسيئة

النتيجة: صورة يمكنك لصقها في تذكرة الخطأ.

إنشاء ERD من مخطط قاعدة البيانات الفعلي

👤 مهندسو البيانات، مطورو Backend ⏱ ~20 min intermediate

متى تستخدمه: تريد صورة بصرية للمخطط الخاص بك لمراجعة التصميم.

الخطوات
  1. فحص البنية
    استخدم mermaid-skill. اقرأ schema.sql (أو الاستعلام من قاعدة البيانات المباشرة عبر postgres MCP) وأنتج Mermaid ERD.✓ تم النسخ
    → .mmd ERD مع العلاقات والتعددية
  2. إزالة التفاصيل غير الضرورية
    أزل جداول التدقيق وركز على كيانات المجال الأساسية.✓ تم النسخ
    → ERD مختصر

النتيجة: ERD دقيق بدون رسم يدوي.

المزالق
  • التعددية خاطئة عند الاستنتاج — قدم تعريفات foreign-key الفعلية؛ لا تترك النموذج يخمن
اجمعها مع: postgres

التركيبات

اجمعها مع خوادم MCP أخرى لتحقيق نتائج x10

mermaid-skill + filesystem

احفظ المخططات بجانب الكود الذي تصفه

لكل خدمة في services/، أضف docs/architecture.mmd وحولها.✓ تم النسخ
mermaid-skill + postgres

إنشاء ERDs تلقائياً من قواعد البيانات المباشرة

الاتصال بقاعدة البيانات المرحلية وعرض مخططها كـ Mermaid ERD.✓ تم النسخ
mermaid-skill + git

يبقى المخطط مرسومة مع تغييرات الكود

حفظ المخططات المحدثة في نفس PR حيث تغييرات الكود التي تصفها.✓ تم النسخ

الأدوات

ما يوفره هذا الـ MCP

الأداةالمدخلاتمتى تستدعيهاالتكلفة
write_mermaid description, diagram type أي طلب مخطط 0
render_mmdc .mmd path, output format بعد الانتهاء من المصدر local mmdc
iterate_diagram current diagram + feedback تعليقات المراجع 0

التكلفة والحدود

تكلفة التشغيل

حصة API
لا توجد حصة
الرموز لكل استدعاء
صغيرة — مصدر Mermaid مضغوط
التكلفة المالية
مجاني (mmdc مفتوح المصدر)
نصيحة
للمخططات الكبيرة، قم بإنشاء الرسوم البيانية الفرعية بشكل منفصل لتجنب إعادة محاولة الإعادات الكبيرة.

الأمان

الصلاحيات والأسرار ونطاق الأثر

تخزين بيانات الاعتماد: لا أحد
نقل البيانات الخارجي: لا أحد من Skill نفسه

استكشاف الأخطاء

الأخطاء الشائعة وحلولها

mmdc not found

ثبت عالمياً: npm i -g @mermaid-js/mermaid-cli

تحقق: which mmdc
Render fails with syntax error

Mermaid لها بناء جملة خاص بالإصدار؛ قم بتشغيل mmdc --version وطابق الإصدار المفترض للـ Skill

تحقق: mmdc --version
Diagram is a mess of crossing edges

أضف تلميحات الاتجاه (TD/LR)، اجمع مع subgraphs، أو قسم إلى مخططات متعددة

البدائل

mermaid-skill مقابل البدائل

البديلمتى تستخدمهاالمقايضة
PlantUML / draw.ioتحتاج إلى مزيد من التحكم أو بناء جملة غير Mermaidإعداد أكثر، سلسلة تحويل مختلفة
paperbanana-skillمخططات بجودة المنشور الأكاديميأثقل؛ أهداف جمالية مختلفة

المزيد

الموارد

📖 اقرأ ملف README الرسمي على GitHub

🐙 تصفح القضايا المفتوحة

🔍 تصفح أكثر من 400 خادم MCP و Skills