پرش به محتوای اصلی
LibraTool logoLibraTool

ویرایشگر نمودار Mermaid رایگان

فلوچارت‌ها، نمودارهای توالی، نمودارهای Gantt و موارد بیشتر را با نحو Mermaid و پیش‌نمایش زنده بنویسید. به صورت SVG یا PNG صادر کنید. کاملاً در مرورگر شما اجرا می‌شود.

💡 نمودارها را با نحو Mermaid بنویسید — فلوچارت، نمودار توالی، گانت، نمودار کلاس و بیشتر — و خروجی SVG یا PNG بگیرید. همه‌چیز در مرورگر شما اجرا می‌شود: متن نمودارتان هرگز آپلود نمی‌شود و موتور رندر Mermaid به‌جای CDN شخص ثالث از همین سایت سرو می‌شود.

کاربردهای رایج

  • ایجاد نمودار جریانایجاد نمودار جریان از متن و صادر کردن به عنوان تصویر.
  • نقاشی نمودار توالینمودار نحوه تعامل سیستم‌ها یا افراد در طول زمان.
  • افزودن نمودار به READMEایجاد نمودارهایی که GitHub در README خود بومی ارائه می‌دهد.
  • ساخت نمودار گانتتعیین جدول زمانی پروژه به عنوان نمودار گانت از متن.
  • ایجاد نمودار کلاسنمودار کلاس‌ها و روابط آنها برای طراحی نرم‌افزار.

نحوه کار

Mermaid به شما اجازه می‌دهد نمودارها را به‌صورت متن بنویسید و به‌طور خودکار رندر شوند — برای نگه‌داشتن نمودارها در کنترل نسخه عالی است. این یک ویرایشگر زنده است که هنگام تایپ رندر می‌کند.

  1. 1
    موتور Mermaid بارگذاری می‌شود
    کتابخانهٔ Mermaid اولین باری که از ابزار استفاده می‌کنید از LibraTool بارگیری می‌شود و سپس مرورگر آن را در حافظهٔ پنهان نگه می‌دارد.
  2. 2
    شما کد نمودار می‌نویسید
    نمودارهای جریان، نمودارهای توالی، نمودارهای Gantt، نمودارهای کلاس، نمودارهای دایره‌ای و بیشتر — با استفاده از نحو متنی Mermaid.
  3. 3
    به‌صورت زنده رندر می‌شود
    کد شما تجزیه و به SVG در مرورگر شما رندر می‌شود هنگام تایپ، با تم روشن و تاریک.
  4. 4
    SVG یا PNG صادر کنید
    نمودار را به‌صورت SVG مقیاس‌پذیر یا PNG با اندازه 2× دانلود کنید تا در اسناد، اسلایدها یا README قرار دهید.

کد نمودار شما — که ممکن است سیستم‌های داخلی را توصیف کند — کاملاً در مرورگر شما رندر می‌شود و هرگز آپلود نمی‌شود.

ابزارهای مرتبط

📝

ویرایشگر Markdown

Markdown را در زمان واقعی بنویسید و پیش‌نمایش بگیرید. از عنوان‌ها، پررنگ، ایتالیک، بلوک‌های کد، جداول و لیست‌ها پشتیبانی می‌کند.

امتحان کنید
🟦

تولیدکننده CSS Grid

یک CSS grid را بصری طراحی کنید — مسیرها، واحدها و شکاف‌ها — و CSS و HTML تولیدشده را کپی کنید.

امتحان کنید
🌳

تولید درخت ASCII

یک لیست با تورفتگی را به درخت پوشه‌ای تمیز (├── └──) برای READMEها و مستندات تبدیل کنید. خروجی Unicode یا ASCII خالص. کاملاً در مرورگر شما اجرا می‌شود.

امتحان کنید

سؤالات متداول