خادم تطبيق Excalidraw MCP

تطبيق Excalidraw MCP سريع وقابل للبث — قم بإنشاء رسوم بيانية جميلة مرسومة باليد مباشرة داخل عميل الدردشة الخاص بالذكاء الاصطناعي.

---

📌 نظرة عامة

Excalidraw MCP هو خادم بروتوكول سياق النموذج (MCP) مفتوح المصدر تم بناؤه بواسطة فريق Excalidraw. إنه يسد الفجوة بين نماذج لغة الذكاء الاصطناعي ورسم المخططات المرئية من خلال السماح لعملاء الذكاء الاصطناعي (مثل Claude و ChatGPT و VS Code و Goose وما إلى ذلك) بإنشاء وعرض مخططات تفاعلية مرسومة باليد مدعومة بواسطة Excalidraw — كل ذلك ضمن واجهة الدردشة نفسها.

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

• GitHub: https://github.com/excalidraw/excalidraw-mcp
• خادم مباشر: https://excalidraw-mcp-app.vercel.app/mcp
• النجوم: 1.1 ألف+ ⭐
• الترخيص: MIT
• آخر إصدار: v0.3.2 (9 فبراير 2026)

---

✨ الميزات الرئيسية

• مخططات قابلة للبث: يعيد المخططات كـ HTML مباشر وتفاعلي يتم عرضه مباشرة في نافذة الدردشة — وليس صورًا ثابتة.
• جمالية الرسم باليد: يستفيد من أسلوب Excalidraw المميز للرسم اليدوي والغير مكتمل لجميع المخططات التي تم إنشاؤها.
• تحكم سلس بالكاميرا: يدعم تحريك وتكبير/تصغير العرض حتى يتمكن المستخدمون من استكشاف المخططات الكبيرة بشكل مريح.
• تحرير بملء الشاشة: يمكن للمستخدمين فتح المخطط الذي تم إنشاؤه في محرر بملء الشاشة لإجراء تعديلات يدوية بعد إنشاء الذكاء الاصطناعي.
• معيار تطبيقات MCP: مبني على امتداد تطبيقات MCP الرسمي، والذي يمكّن الخوادم من إرجاع مكونات واجهة مستخدم تفاعلية غنية بدلاً من النص العادي.
• دعم عملاء متعددين: يعمل مع أي عميل متوافق مع MCP — Claude و ChatGPT و VS Code Copilot و Goose وغيرها.
• نشر سهل: نشر بنقرة واحدة إلى Vercel دون الحاجة إلى متغيرات بيئة.

---

🏗️ البنية

مطالبة المستخدم (مثل، "ارسم مخططًا معماريًا")
        │
        ▼
  عميل الذكاء الاصطناعي (Claude / ChatGPT / VS Code)
        │  بروتوكول MCP
        ▼
  خادم Excalidraw MCP (Node.js / TypeScript)
        │  يبث HTML تفاعلي
        ▼
  لوحة Excalidraw (معروضة في واجهة الدردشة)
        │
        ▼
  يرى المستخدم المخطط ويحرره مباشرة

الخادم مكتوب بلغة TypeScript، ويتم تقديمه عبر Vercel (بدون خادم)، ويستخدم Vite لتجميع الواجهة الأمامية. يتبع بروتوكول تطبيقات MCP لتضمين لوحة Excalidraw كاملة كاستجابة قطعة أثرية تفاعلية.

---

🚀 البدء

الخيار 1: عن بُعد (موصى به)

لا يلزم التثبيت. أضف عنوان URL التالي كخادم MCP عن بُعد في عميلك:

https://excalidraw-mcp-app.vercel.app/mcp

مثال Claude.ai: الإعدادات → الموصلات → إضافة موصل مخصص → لصق عنوان URL.

الخيار 2: محليًا عبر ملف الامتداد

1. قم بتنزيل excalidraw-mcp-app.mcpb من صفحة الإصدارات.
2. انقر نقرًا مزدوجًا للتثبيت في Claude Desktop.

الخيار 3: البناء من المصدر

git clone https://github.com/excalidraw/excalidraw-mcp.git
cd excalidraw-mcp
npm install && npm run build

ثم أضف إلى تكوين Claude Desktop الخاص بك في ~/Library/Application Support/Claude/claude_desktop_config.json:

{
  "mcpServers": {
    "excalidraw": {
      "command": "node",
      "args": ["/path/to/excalidraw-mcp/dist/index.js", "--stdio"]
    }
  }
}

أعد تشغيل Claude Desktop وستكون جاهزًا للانطلاق.

---

💬 أمثلة على المطالبات

بمجرد الاتصال، يمكنك استخدام مطالبات اللغة الطبيعية مثل:

• "ارسم قطة لطيفة باستخدام Excalidraw"
• "ارسم مخططًا معماريًا يوضح اتصال مستخدم بخادم API يتحدث إلى قاعدة بيانات"
• "أنشئ مخططًا انسيابيًا لخط أنابيب CI/CD"
• "ارسم طوبولوجيا شبكة بثلاثة خوادم وموازن تحميل"

سيقوم الذكاء الاصطناعي باستدعاء خادم MCP، الذي ينشئ المخطط ويبثه مرة أخرى كلوحة قماشية تفاعلية في الدردشة.

---

🛠️ التقنيات المستخدمة

الطبقة	التكنولوجيا
اللغة	TypeScript (90.1%)، JavaScript (4.7%)
الواجهة الأمامية	Excalidraw، Vite، CSS
الواجهة الخلفية	Node.js (خادم بدون خادم بأسلوب Express)
النشر	Vercel
البروتوكول	بروتوكول سياق النموذج (MCP) + امتداد تطبيقات MCP

---

🌐 الاستضافة الذاتية / النشر

يمكنك نشر نسختك الخاصة على Vercel في دقائق:

1. قم بعمل نسخة متفرعة من المستودع.
2. انتقل إلى vercel.com/new واستورد نسختك المتفرعة.
3. لا توجد حاجة لمتغيرات بيئة — فقط انقر فوق Deploy.
4. سيكون خادمك متاحًا على https://your-project.vercel.app/mcp.

---

🤝 المساهمة

نرحب بطلبات السحب (PRs)! يتم صيانة المشروع بنشاط من قبل فريق Excalidraw والمساهمين في المجتمع. للمساهمة:

1. قم بعمل نسخة متفرعة من المستودع واستنسخها محليًا.
2. قم بتشغيل npm install && npm run build لإعداد بيئة التطوير.
3. قم بإجراء تغييراتك وقدم طلب سحب.

---

🔗 موارد ذات صلة

• Excalidraw (المكتبة الأساسية)
• بروتوكول سياق النموذج (MCP)
• وثائق امتداد تطبيقات MCP
• GitHub تطبيقات MCP

---

🏷️ ملخص

MCP — هذا خادم MCP مبني على بروتوكول سياق النموذج، مما يمكّن عملاء الذكاء الاصطناعي من إنشاء مخططات بأسلوب Excalidraw المرسوم باليد والتفاعل معها مباشرة داخل واجهة الدردشة.