تضمين مخططات Mermaid
أنشئ مخطط Mermaid واحصل على كود iframe قابل للمشاركة يمكنك تضمينه في أي موقع ويب. مجاني، فوري، لا يتطلب حسابًا.
تضمين مخططات Mermaid
أنشئ مخطط Mermaid واحصل على كود iframe قابل للمشاركة يمكنك تضمينه في أي موقع ويب. مجاني، فوري، لا يتطلب حسابًا.
كود Mermaid الخاص بك
معاينة مباشرة
كود التضمين
<iframe
src="https://mermaideditor.com/embed?code=Z3JhcGglMjBURCUwQSUyMCUyMCUyMCUyMEElNUJTdGFydCU1RCUyMC0tJTNFJTIwQiU3QklzJTIwaXQlMjB3b3JraW5nJTNGJTdEJTBBJTIwJTIwJTIwJTIwQiUyMC0tJTIwWWVzJTIwLS0lM0UlMjBDJTVCU2hpcCUyMGl0JTVEJTBBJTIwJTIwJTIwJTIwQiUyMC0tJTIwTm8lMjAtLSUzRSUyMEQlNUJEZWJ1ZyU1RCUwQSUyMCUyMCUyMCUyMEQlMjAtLSUzRSUyMEI=&theme=default"
width="100%"
height="400"
frameborder="0"
style="border-radius:8px;overflow:hidden"
></iframe>Example
Embedded Mermaid diagram example
A simple Mermaid flowchart showing how code becomes a live preview and exportable PNG.
Mermaid code
graph TD
A[User opens Mermaid Editor] --> B[Write Mermaid code]
B --> C{Preview looks right?}
C -- Yes --> D[Export PNG]
C -- No --> E[Edit diagram]
E --> Bللمطورين
يمكنك إنشاء روابط التضمين برمجيًا دون استخدام هذا المحرر. يتم ترميز كود المخطط بتنسيق base64 آمن لعناوين URL.
تنسيق URL
https://mermaideditor.com/embed?code={encoded}&theme={theme}كيفية الترميز
// JavaScript const encoded = btoa(encodeURIComponent(mermaidCode)) const embedUrl = `https://mermaideditor.com/embed?code=${encoded}&theme=default` // Python import base64, urllib.parse encoded = base64.b64encode(urllib.parse.quote(mermaid_code).encode()).decode() embed_url = f"https://mermaideditor.com/embed?code={encoded}&theme=default"السمات المدعومة: default · dark · forest · neutral
كيفية تضمين مخطط Mermaid
اكتب كود مخطط Mermaid في المحرر أعلاه
انسخ كود iframe المُولَّد بنقرة واحدة
الصقه في أي موقع ويب أو منشور مدونة أو صفحة وثائق
أين تستخدمه
GitHub و GitLab
ضمّن مخططات مباشرة في صفحات الويكي أو أوصاف المشكلات أو وثائق المشروع.
مواقع الوثائق
أضف مخططات تفاعلية إلى Confluence أو Notion أو أي منصة وثائق تعتمد على HTML.
منشورات المدونة
أثرِ المقالات التقنية بمخططات المعمارية والرسوم البيانية ومخططات التسلسل.
الويكي الداخلي
حافظ على قواعد المعرفة للفريق مرئية ومحدثة بالمخططات المضمنة.
الأسئلة الشائعة
هل ميزة التضمين مجانية؟
نعم، مجانية تمامًا. لا توجد حدود للاستخدام، ولا يُطلب حساب، وتعمل روابط iframe المُولَّدة إلى أجل غير مسمى.
ما المتصفحات التي تدعم المخطط المضمن؟
يعمل عارض التضمين في جميع المتصفحات الحديثة بما في ذلك Chrome و Firefox و Safari و Edge. يستخدم HTML5 و JavaScript القياسية.
هل يمكنني تخصيص حجم iframe؟
نعم — ما عليك سوى تعديل سمتَي width و height في كود iframe المُولَّد لتناسب تخطيطك. يمكنك أيضًا إضافة CSS لجعله متجاوبًا.