خروجی گرفتن از نمودار 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را ذخیره میکند، با کیفیت ۲برابر و پسزمینه سفید رندر شده تا روی صفحه‌نمایش با تراکم بالا شارپ بماند و هرگز به‌صورت لکه‌ای شفاف روی یک اسلاید سفید ننشیند. - دانلود .mmd — سورس mermaid را به‌صورت یک فایل متنی ساده ذخیره میکند.
- دانلود .md (Notion) — سورس را در یک بلوک حصاردار ```mermaid می‌پیچد و ذخیره میکند، که Notion، GitHub و Obsidian هنگام پیست آن را رندر می‌کنند.
برای یک مجموعه اسلاید، PNG را بردارید. برای هرچیزی که قرار است تغییر اندازه بدهد — عنوان یک سند، یک پوستر، یک چاپ — SVG را بردارید؛ یک PNG که بزرگ‌تر از اندازه خروجی‌اش کشیده شود، فوراً محو میشود.
بهجایش به‌صورت متن نگهش دارید
بلوک حصاردار تنها خروجی است که سرجایش قابل ویرایش می‌ماند. سه بک‌تیک، کلمه mermaid، نمودار شما، سه بک‌تیک:
```mermaid
flowchart LR
A[Write] --> B[Review]
B --> C[Merge]
```- GitHub — در فایل‌های README، ایشوها، pull requestها و کامنت‌ها رندر میشود.
- GitLab — در ویکی، ایشوها و merge requestها رندر میشود.
- Notion — در یک بلوک کد پیست کنید و زبان را روی Mermaid بگذارید.
- Obsidian — در پیش‌نمایش و در یادداشت‌های منتشرشده رندر میشود.
- Docusaurus / MkDocs Material / VitePress — بلوک‌های mermaid در مستندات ساخته‌شده رندر می‌شوند.
چیزهایی که خراب می‌شوند
PNG تار است
یک PNG رزولوشن ثابت دارد: با یک اندازه پیکسلی مشخص خروجی گرفته میشود و بزرگ‌نمایی بیشتر از آن درون‌یابی میکند. این ویرایشگر به همین دلیل با کیفیت ۲برابر خروجی می‌گیرد. اگر باز هم کافی نبود، SVG را خروجی بگیرید و در هر اندازهای که نیاز دارید تبدیلش کنید — یا فقط از SVG استفاده کنید.
SVG پسزمینه ندارد
خروجی‌های SVG عمداً شفاف هستند، پس متن تیره گره روی یک اسلاید تیره ناپدید میشود. یا SVG را روی یک کارت روشن بگذارید، یا PNG را بردارید که روی سفید خروجی گرفته میشود.
فونت‌ها جای دیگر متفاوت به نظر می‌رسند
یک SVG به خانواده‌های فونت ارجاع می‌دهد نه اینکه آن‌ها را جاسازی کند، پس دستگاهی بدون آن فونت، فونت دیگری جایگزین میکند و جعبه‌های برچسب دیگر هم‌ردیف نمی‌مانند. وقتی نمی‌توانید فونت‌های بیننده را کنترل کنید، از PNG استفاده کنید.
نمودار بریده شده است
خروجی گرفتن هرچه را در حال حاضر رندر شده می‌خواند، پس قبل از خروجی گرفتن یک نمودار بزرگ، نما را دوباره وسط‌چین کنید. اگر برچسب یک گره خیلی بزرگ است، آن را با <br> بشکنید — mermaid برچسب‌ها را خودش نمی‌شکند.
در دو کلیک خروجی بگیرید
ویرایشگر را باز کنید، نمودارتان را پیست یا رسم کنید، و SVG، PNG یا سورس را بردارید. چیزی پشت یک حساب کاربری نیست.
سوالات متداول
چطور mermaid را به PNG تبدیل کنم؟
نمودار را رندر کنید، سپس از دانلود PNG استفاده کنید. ویرایشگر SVG رندرشده را با کیفیت ۲برابر و پسزمینه سفید روی یک کانواس می‌کشد و نتیجه را ذخیره میکند — بدون رفت‌وبرگشت به سرور، پس نمودار هرگز از مرورگرتان خارج نمیشود.
میتوانم یک PNG شفاف خروجی بگیرم؟
نه از دکمه PNG — آن عمداً سفید را پر میکند، چون متن تیره نمودار روی پسزمینه شفاف در بیشتر جاهایی که یک PNG پیست میشود ناخوانا است. بهجایش SVG را خروجی بگیرید؛ آن شفاف است.
محدودیت اندازهای هست؟
محدودیت ثابتی نیست. خروجی گرفتن در مرورگر شما اتفاق میافتد، پس محدودیت واقعی همان چیزی است که مرورگرتان رندر میکند — که خیلی فراتر از نقطهای است که یک نمودار هنوز برای انسان خوانا باشد.
چطور بعد از خروجی گرفتن نمودار را قابل ویرایش نگه دارم؟
سورس را نگه دارید. فایل .mmd یا بلوک Markdown را کنار تصویر دانلود کنید؛ یک PNG یا SVG را نمیشود دوباره به mermaid تبدیل کرد، اما سورس مستقیم دوباره در ویرایشگر پیست میشود.