ویرایشگر زنده mermaid، بصری و کد در یک جا

بیشتر ویرایشگرهای mermaid فقط یک کادر متنی و یک پیش‌نمایش می‌دهند. این یکی یک بوم هم دارد: کلیک کنید تا بلوکی اضافه شود، پیکانی بکشید، چیزها را در ناحیه‌ها گروه‌بندی کنید — و کد mermaid خودش نوشته می‌شود. به تب کد بروید و آن را دستی ویرایش کنید؛ بوم هم دنبالش می‌آید.

  • همان‌طور که تایپ می‌کنید رندر می‌شود

    موتور واقعی mermaid، چند صد میلی‌ثانیه پس از آخرین دکمه‌ای که فشار داده‌اید، دوباره رسم می‌شود.

  • کد و بوم هم‌زمان

    هر طرف را ویرایش کنید. طرف دیگر خودش را می‌رساند — بدون کپی‌پیست بین دو ابزار.

  • ۱۴ شکل گره

    مستطیل، گرد، قرصی، دایره، لوزی، پایگاه‌داده، شش‌ضلعی و بقیه، هرکدام با یک کلیک.

  • رایگان، بدون ثبت‌نام

    بدون دوره آزمایشی و بدون واترمارک — ویرایشگر بی‌درنگ باز می‌شود. فقط اگر بیش از یک نمودار می‌خواهید وارد شوید.

یک بوم واقعی، نه فقط یک کادر متنی

تب بصری یک ویرایشگر واقعی روی نمودار رندرشده است: روی یک گره کلیک کنید تا انتخاب شود، دوبار کلیک کنید تا همان‌جا نامش را عوض کنید، هر جا بکشید تا جابه‌جا شوید.

  • با کلیک بسازیدیک بلوک اضافه کنید، پیکانی به سمت بلوک دیگر بکشید و روی آن برچسب بگذارید. قبل از شروع نیازی به یادگیری هیچ نحوی نیست.

  • یک شکل انتخاب کنیدچهارده شکل فلوچارت mermaid — لوزی‌های تصمیم، استوانه‌های پایگاه‌داده، زیرروال‌ها — از یک انتخابگر.

  • هر چیزی را رنگ کنیدهشت پیش‌تنظیم به‌علاوه یک انتخابگر رنگ، قابل اعمال روی یک گره یا روی کل یک ناحیه.

کد mermaid که مال خودتان می‌ماند

تب متن، mermaid خالص است — همان نحوی که GitHub، GitLab، Notion و Obsidian از پیش رندر می‌کنند. اینجا چیزی فرمت اختصاصی نیست.

  • دستی بنویسیدشمستقیم mermaid تایپ کنید و رندر شدنش را ببینید. شش نمونه آماده برای شروع.

  • رفت‌وبرگشت داردفلوچارت‌هایی که پیست می‌کنید دوباره روی بوم تجزیه می‌شوند — گره‌ها، شکل‌ها، رنگ‌ها، زیرگراف‌ها و همه‌چیز.

  • هر نوع نموداریفلوچارت، توالی، کلاس، حالت، ER، گانت، نمودار git، دایره‌ای — پیش‌نمایش هرچه mermaid پشتیبانی کند را رندر می‌کند.

نمودارهای بزرگ خوانا می‌مانند

نمودارهای معماری خیلی زود از یک صفحه بزرگ‌تر می‌شوند. جابه‌جایی، بزرگ‌نمایی و گروه‌بندی برای همین ساخته شده‌اند، نه اینکه با آن بجنگید.

  • ناحیه‌ها و تودرتوییبلوک‌ها را در زیرگراف‌ها گروه‌بندی کنید، یک ناحیه را داخل ناحیه دیگر بگذارید، کل یک زیردرخت را با یک حرکت جابه‌جا کنید.

  • بزرگ‌نمایی از ۲٪ تا ۱۶۰۰٪برای جابه‌جایی اسکرول کنید، برای بزرگ‌نمایی ctrl+اسکرول، یا با یک دکمه دوباره وسط‌چین کنید.

  • همراه با کارتان ذخیره می‌شودنمودار شما هنگام ویرایش به‌طور خودکار در مرورگر ذخیره می‌شود. اگر وارد شوید، در حساب شما ذخیره می‌شود و در هر دستگاهی همراهتان است.

خروجی بگیرید و کارتان را ادامه دهید

چیزی قفل‌شده نیست. تصویر را بردارید، سورس را بردارید یا یک بلوک Markdown آماده برای پیست در سند را بردارید.

  • بدون محدودیت پولیهمه امکانات، از جمله خروجی گرفتن، رایگان است. هیچ سطح پولی برای ارتقا وجود ندارد.

  • در مرورگر شما رندر می‌شودرندر در مرورگر شما انجام می‌شود؛ بدون حساب، نمودار هرگز از آن خارج نمی‌شود و با حساب، سند ذخیره‌شده در هر دستگاهی همراهتان است.

  • SVG، PNG، ‎.mmd، ‎.mdکد SVG را کپی کنید، یک PNG با کیفیت ۲برابر دانلود کنید، سورس mermaid را ذخیره کنید یا یک بلوک Markdown با حصار بردارید.

مقایسه با گزینه‌های معمول

ابزارهای «نمودار به‌عنوان کد» شما را مجبور می‌کنند همه‌چیز را دستی بنویسید. ابزارهای بکش‌و‌رها یک تصویر به شما می‌دهند که نمی‌توانید دیف بگیرید. این یکی حاضر نیست یک طرف را انتخاب کند.

شروع کار

IQ Mermaid: روی بوم دوبار کلیک کنید و یک گره ظاهر می‌شود. نحو را می‌توانید بعداً یاد بگیرید، یا هرگز.

ابزار معمولی: اول باید مرجع نحو را بخوانید، یا یک ابزار ترسیمی بدون هیچ نمایش متنی را بپذیرید.

فرمت خروجی

IQ Mermaid: mermaid خالص — همان متنی که GitHub، GitLab و Notion به‌طور بومی رندر می‌کنند.

ابزار معمولی: یک فایل اختصاصی که فقط در همان ابزاری که ساخته باز می‌شود.

ویرایش بعدی

IQ Mermaid: کد را تغییر دهید یا بلوک‌ها را جابه‌جا کنید. هر دو جهت روی همان نمودار کار می‌کنند.

ابزار معمولی: فقط یک جهت: ابزارهای کد-محور بوم ندارند، ابزارهای بوم‌محور سورس ندارند.

قیمت

IQ Mermaid: رایگان — حتی ایمیل هم لازم نیست.

ابزار معمولی: سطح رایگان محدود به چند نمودار، با خروجی یا همکاری پشت یک اشتراک پولی.

داده کجا زندگی می‌کند

IQ Mermaid: در مرورگر شما، یا در حسابتان اگر می‌خواهید در هر دستگاهی همراهتان باشد.

ابزار معمولی: حسابی روی سرور یک نفر دیگر، که نمودارهای شما به آن وصل است.

سوالات ویرایشگر mermaid

برای شروع فقط کافی است صفحه را باز کنید.

mermaid چیست؟

mermaid یک نحو متنی برای نمودار است: گره‌ها و پیکان‌ها را در چند خط توصیف می‌کنید و یک رندرکننده تصویر را می‌کشد. GitHub، GitLab، Notion و Obsidian آن را داخل Markdown رندر می‌کنند، بنابراین یک بلوک mermaid در یک pull request یا یک صفحه ویکی خوانا می‌ماند.

آیا این ویرایشگر mermaid واقعاً رایگان است؟

بله. همه امکانات، از جمله خروجی SVG و PNG، رایگان است و می‌توانید بدون ساختن چیزی از ویرایشگر استفاده کنید. یک حساب رایگان اختیاری نمودارهای ذخیره‌شده بیشتر و همگام‌سازی بین دستگاه‌ها را اضافه می‌کند — طرح پولی وجود ندارد و چیزی پنهان نمی‌شود.

آیا باید نحو mermaid را بلد باشم؟

نه. از تب بصری شروع کنید: روی بوم دوبار کلیک کنید تا بلوکی اضافه شود، آن را انتخاب کنید و پیکانی به سمت بلوک دیگر بکشید. کد mermaid برایتان تولید می‌شود و هر وقت خواستید نحو را یاد بگیرید می‌توانید آن را بخوانید.

چه نوع نمودارهایی پشتیبانی می‌شوند؟

تب کد هرچه mermaid پشتیبانی کند را رندر می‌کند — فلوچارت، توالی، کلاس، حالت، رابطه موجودیت، گانت، نمودار git، دایره‌ای و بیشتر. بوم بصری مشخصاً فلوچارت‌ها را ویرایش می‌کند، که بیشتر نمودارها همین هستند.

می‌توانم خروجی PNG یا SVG بگیرم؟

بله. کد SVG را در کلیپ‌بورد کپی کنید، فایل SVG را دانلود کنید یا یک PNG با کیفیت ۲برابر برای اسلایدها و اسناد دانلود کنید. همچنین می‌توانید سورس mermaid را به‌صورت ‎.mmd یا یک بلوک Markdown با حصار ذخیره کنید.

نمودار من کجا ذخیره می‌شود؟

بدون حساب، تنها نمودار شما در مرورگر ذخیره می‌شود، پس وقتی با همان دستگاه برگردید همان‌جاست. اگر وارد شوید، در حساب شما ذخیره می‌شود و می‌تواند در دستگاه دیگری همراهتان باشد. اگر نسخه خودتان را می‌خواهید منبع را خروجی بگیرید.

می‌توانم یک نمودار mermaid موجود را پیست کنم؟

بله. آن را در تب کد پیست کنید؛ یک فلوچارت با گره‌ها، شکل‌ها، رنگ‌ها و زیرگراف‌های دست‌نخورده دوباره روی بوم بصری تجزیه می‌شود. سایر انواع نمودار در پیش‌نمایش رندر می‌شوند اما فقط کدی باقی می‌مانند.

بدون اینترنت هم کار می‌کند؟

رندر کاملاً در مرورگر شما انجام می‌شود؛ پس از بارگذاری صفحه، ویرایشگر بدون اتصال هم کار می‌کند.

ویرایشگر را باز کنید. رایگان — بدون ثبت‌نام.

یک بوم خالی، یک تب کد و همه گزینه‌های خروجی — رایگان، در مرورگرتان، همین حالا.