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

mcp-mermaid

بواسطة hustcc · hustcc/mcp-mermaid

إنشاء مخططات ورسوم بيانية Mermaid محققة من الصحة — بصيغ SVG أو PNG أو عنوان URL مستضاف — مباشرة من المحادثة. لا حاجة إلى برنامج عرض منفصل.

mcp-mermaid ينشئ مخططات Mermaid بشكل ديناميكي ويعيدها كـ base64 أو نص SVG أو ملف محفوظ أو عنوان URL مستضاف. يتضمن التحقق من الصيغة والتصحيح متعدد الجولات بحيث يتم إصلاح Mermaid المشوه تلقائياً. يدعم أيضاً الرسوم البيانية (المخطط الزمني والمقارنة والعملية).

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

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

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

عرض مباشر

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

mermaid.replay ▶ جاهز
0/0

التثبيت

اختر العميل

~/Library/Application Support/Claude/claude_desktop_config.json  · Windows: %APPDATA%\Claude\claude_desktop_config.json
{
  "mcpServers": {
    "mermaid": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-mermaid"
      ],
      "_inferred": true
    }
  }
}

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

~/.cursor/mcp.json · .cursor/mcp.json
{
  "mcpServers": {
    "mermaid": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-mermaid"
      ],
      "_inferred": true
    }
  }
}

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

VS Code → Cline → MCP Servers → Edit
{
  "mcpServers": {
    "mermaid": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-mermaid"
      ],
      "_inferred": true
    }
  }
}

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

~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "mermaid": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-mermaid"
      ],
      "_inferred": true
    }
  }
}

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

~/.continue/config.json
{
  "mcpServers": [
    {
      "name": "mermaid",
      "command": "npx",
      "args": [
        "-y",
        "mcp-mermaid"
      ]
    }
  ]
}

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

~/.config/zed/settings.json
{
  "context_servers": {
    "mermaid": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "mcp-mermaid"
        ]
      }
    }
  }
}

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

claude mcp add mermaid -- npx -y mcp-mermaid

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

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

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

إنشاء مخطط معماري للنظام من النصوص

👤 المهندسون الذين يكتبون وثائق التصميم ⏱ ~10 min beginner

متى تستخدمه: لقد وصفت معمارية في وثيقة وتريد مخططاً دون مغادرة المحادثة.

المتطلبات الأساسية
  • تثبيت mcp-mermaid — npx -y mcp-mermaid في إعداد عميل MCP الخاص بك
الخطوات
  1. وصف النظام
    إليك معمارتي: Cloudflare → API (Node) → Postgres + Redis → Worker (Go). أنشئ مخطط تدفق Mermaid يوضح هذا.✓ تم النسخ
    → مصدر Mermaid صحيح مرسوم كـ SVG
  2. تكرار الأنماط
    اجعل Cloudflare أزرق وPostgres أخضر وRedis أحمر. استخدم حواف متقطعة للعمليات غير المتزامنة.✓ تم النسخ
    → مخطط معدل
  3. حفظ في ملف
    أخرج كملف PNG في ./docs/arch.png بخلفية بيضاء.✓ تم النسخ
    → ملف على القرص

النتيجة: صورة معماري PNG يمكنك وضعها في وثيقة التصميم.

المزالق
  • المخططات المعقدة جداً تصل إلى حدود التخطيط في Mermaid — قسمها إلى مخططات متعددة أو انتقل إلى تجميع subgraph
  • ألوان المظهر لا تطابق وثيقتك — مرر إعداد المظهر بشكل صريح بدلاً من الاعتماد على الإعدادات الافتراضية
اجمعها مع: filesystem

صياغة مخطط تسلسلي في تقرير الخطأ

👤 المهندسون الذين يقدمون تقارير عن أخطاء الحالات المتنافسة الصعبة ⏱ ~5 min beginner

متى تستخدمه: وصف نصي لمن يستدعي من متى يكون من الصعب قراءته.

الخطوات
  1. وصف التسلسل
    يرسل العميل POST، يبدأ API معاملة، يكتب إلى قاعدة البيانات، ينهار قبل الالتزام. وفي الوقت نفسه يأتي إعادة محاولة من العميل. ارسم مخطط تسلسلي.✓ تم النسخ
    → تسلسل واضح مع خطوط حياة متوازية
  2. إدراج في المشكلة
    أعطني مصدر Mermaid حتى أتمكن من لصقه في مشكلة GitHub (التي تعرض Mermaid بشكل أصلي).✓ تم النسخ
    → المصدر جاهز للصق

النتيجة: تقرير خطأ يمكن لمراجعي أن يفهموه في 10 ثوان.

اجمعها مع: github

إنشاء Gantt للمشروع من مخطط زمني

👤 قادة المشاريع الذين لا يريدون الدفع برنامج Gantt لمرة واحدة ⏱ ~5 min beginner

متى تستخدمه: مخطط زمني مخصص لـ PRD أو البدء.

الخطوات
  1. قائمة المراحل
    المراحل: الاستكشاف (أسبوعين)، التصميم (3 أسابيع)، التنفيذ (6 أسابيع)، ضمان الجودة (أسبوعان متداخل مع آخر أسبوعي تنفيذ). بدء من 2026-05-01. إنشاء gantt.✓ تم النسخ
    → مصدر Gantt صحيح
  2. إخراج PNG
    احفظ كـ PNG وأعطني أيضاً عنوان URL يمكنني تضمينه في الـ PRD.✓ تم النسخ
    → مسار PNG + عنوان URL المستضاف

النتيجة: رسم بياني للجدول الزمني لـ PRD الخاص بك في أقل من دقيقة.

التركيبات

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

mermaid + filesystem

احفظ المخططات المُنشأة كأصول مُصدرة

إنشاء مخطط المعمارة v2 باسم ./docs/arch-v2.png وتحديث المرجع في ./docs/README.md.✓ تم النسخ
mermaid + github

ضع مصدر Mermaid في وصف PR — GitHub يعرضه بشكل أصلي

صياغة وصف PR يشرح تغيير تدفق البيانات، قم بتضمين مخطط تسلسل Mermaid مدمجاً.✓ تم النسخ

الأدوات

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

الأداةالمدخلاتمتى تستدعيهاالتكلفة
generate_mermaid source: str (Mermaid DSL), output: base64|svg|mermaid|file|svgUrl|pngUrl, theme?, backgroundColor? أي إنشاء مخطط free (local render) or 1 API call for hosted URLs
validate_mermaid source: str قبل الإنشاء إذا كنت غير متأكداً من الصيغة free

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

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

حصة API
العرض المحلي مجاني؛ إخراج عنوان URL المستضاف يستخدم mermaid.ink وهو مجاني مع الاستخدام المعقول
الرموز لكل استدعاء
صغير — DSL المخطط مضغوط
التكلفة المالية
مجاني
نصيحة
فضّل إخراج 'mermaid' لـ GitHub/docs التي تعرض بشكل أصلي؛ انتقل فقط إلى PNG/SVG عند الحاجة إلى العرض من جانب الخادم.

الأمان

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

تخزين بيانات الاعتماد: لا شيء
نقل البيانات الخارجي: عرض محلي لـ base64/svg؛ mermaid.ink لعناوين URL المستضافة

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

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

خطأ تحليل Mermaid

أصدرت LLM DSL غير صحيح. تحقق عبر validate_mermaid أولاً؛ mcp-mermaid يصحح نفسه أيضاً في الجولة الثانية.

تحقق: validate_mermaid on the source
فشل إخراج PNG في Docker

الصورة تحتاج متصفحاً بدون رأس؛ استخدم صورة Docker الرسمية التي تحزمها.

تحقق: docker run hustcc/mcp-mermaid
المخطط كبير جداً، يتم قطعه

قسمه إلى subgraphs أو قسمه إلى مخططات متعددة.

البدائل

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

البديلمتى تستخدمهاالمقايضة
PlantUML MCPتفضل السطح UML الأعمق في PlantUMLيتطلب وقت تشغيل Java
antv-chart / mcp-server-chartتحتاج إلى مخططات بيانات أكثر من المخططاتشكل إخراج مختلف
Raw Mermaid عبر محرر الويبأنت لست في سير عمل محادثةلا تكامل MCP

المزيد

الموارد

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

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

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