تصدير مخطط mermaid إلى PNG أو SVG أو Markdown
المخطط مفيد فقط حيث يمكن رؤيته. يمنحك mermaid أربع طرق للخروج — صورة، متجه، المصدر، أو كتلة Markdown تُعرض من تلقاء نفسها — والخيار الصحيح يعتمد كليًا على وجهة المخطط. هذه هي النسخة المختصرة، بالإضافة إلى ما قد يتعطل مع كل خيار.
اختر الصيغة أولًا
| الوجهة | الاستخدام | السبب |
|---|---|---|
| GitHub, GitLab, Notion, Obsidian | كتلة Markdown | تُعرض بشكل أصلي وتبقى قابلة للمقارنة — بلا ملف يجب مزامنته. |
| الشرائح، مواصفة، رسالة دردشة | PNG | يُلصق في أي مكان، لا يحتاج عارضًا، ويبدو متطابقًا في كل مكان. |
| موقع ويب، مستند مطبوع | SVG | متجه — واضح بأي حجم، ويبقى النص قابلًا للتحديد. |
| محرر آخر، مستودع | مصدر .mmd | قابل للتعديل لاحقًا. الصورة طريق مسدود. |
إذا كانت الوجهة تعرض mermaid، فلا تُصدّر على الإطلاق. يمكن مراجعة المخطط الملتزم به كنص سطرًا سطرًا؛ أما المخطط نفسه الملتزم به كـ PNG فلا يمكن إلا استبداله.
التصدير من هذا المحرر
افتح تبويب الكود — أزرار التصدير موجودة في شريط الأدوات، وكل زر يعمل على ما هو معروض حاليًا.
- نسخ SVG — يضع كود
<svg>في الحافظة، جاهزًا للصق مباشرة في ملف HTML أو أداة تصميم. - تنزيل SVG — يحفظ
diagram.svg. - تنزيل PNG — يحفظ
diagram.png، مُصدَّرًا بدقة 2x وبخلفية بيضاء ليبقى حادًا على شاشة عالية الكثافة، ولا ينتهي كبقعة شفافة على شريحة بيضاء. - تنزيل .mmd — يحفظ مصدر mermaid كملف نصي عادي.
- تنزيل .md (Notion) — يحفظ المصدر ملفوفًا في كتلة ```mermaid محاطة، والتي تعرضها Notion وGitHub وObsidian عند اللصق.
لعرض تقديمي، خذ PNG. لأي شيء سيُعاد تحجيمه — عنوان مستند، ملصق، طباعة — خذ SVG؛ فـ PNG المُكبَّر بعد حجم تصديره يفقد وضوحه فورًا.
احتفظ به كنص بدلًا من ذلك
الكتلة المحاطة هي التصدير الوحيد الذي يبقى قابلًا للتعديل في مكانه. ثلاث علامات backtick، كلمة mermaid، مخططك، ثم ثلاث علامات backtick:
```mermaid
flowchart LR
A[Write] --> B[Review]
B --> C[Merge]
```- GitHub — يُعرض في ملفات README والمشكلات وطلبات السحب والتعليقات.
- GitLab — يُعرض في الويكي والمشكلات وطلبات الدمج.
- Notion — الصق في كتلة كود واضبط اللغة على Mermaid.
- Obsidian — يُعرض في المعاينة وفي الملاحظات المنشورة.
- Docusaurus / MkDocs Material / VitePress — تُعرض كتل mermaid في التوثيق المبني.
أشياء قد تسوء
PNG ضبابي
ملف PNG ثابت الدقة: يُصدَّر بحجم بكسل محدد، وأي تكبير بعد ذلك يعتمد على الاستيفاء. لهذا السبب يُصدِّر هذا المحرر بدقة 2x. إذا لم يكن ذلك كافيًا، صدّر SVG وحوّله إلى أي حجم تحتاجه — أو استخدم SVG مباشرة.
SVG بلا خلفية
تصديرات SVG شفافة بالتصميم، لذا يختفي نص العقدة الداكن على شريحة داكنة. إما ضع SVG على بطاقة فاتحة، أو خذ PNG الذي يُصدَّر على خلفية بيضاء.
الخطوط تبدو مختلفة في مكان آخر
يشير SVG إلى عائلات الخطوط بدلًا من تضمينها، لذا يستبدل الجهاز الذي لا يملك ذلك الخط خطًا آخر فتفقد صناديق التسميات محاذاتها. استخدم PNG عندما لا يمكنك التحكم في خطوط جهاز العارض.
المخطط مقطوع
يقرأ التصدير ما هو معروض حاليًا، لذا أعد توسيط العرض قبل تصدير مخطط كبير. إذا كانت تسمية عقدة ضخمة، اقسمها باستخدام <br> — فـ mermaid لا يلف التسميات من تلقاء نفسه.
صدّر بنقرتين
افتح المحرر، الصق مخططك أو ارسمه، وخذ SVG أو PNG أو المصدر. لا شيء خلف حساب.
أسئلة متكررة
كيف أحوّل mermaid إلى PNG؟
ارسم المخطط، ثم استخدم زر تنزيل PNG. يرسم المحرر SVG المعروض على لوحة بمقياس 2x وبخلفية بيضاء ثم يحفظ النتيجة — بلا اتصال بخادم، لذا لا يغادر المخطط متصفحك أبدًا.
هل يمكنني تصدير PNG شفاف؟
ليس من زر PNG — فهو يملأ باللون الأبيض عمدًا، لأن نص المخطط الداكن على خلفية شفافة غير مقروء في معظم الأماكن التي يُلصق فيها PNG. صدّر SVG بدلًا من ذلك؛ فهو شفاف.
هل يوجد حد لحجم المخطط؟
لا يوجد حد ثابت. يحدث التصدير في متصفحك، لذا الحد العملي هو ما يستطيع متصفحك رسمه — وهو أبعد بكثير من النقطة التي يبقى فيها المخطط مقروءًا لإنسان.
كيف أحافظ على قابلية تعديل المخطط بعد التصدير؟
احتفظ بالمصدر. نزّل ملف .mmd أو كتلة Markdown إلى جانب الصورة؛ لا يمكن تحويل PNG أو SVG مرة أخرى إلى mermaid، لكن المصدر يُلصق مباشرة في المحرر مرة أخرى.