# نحوه استفاده از Mermaid.js در ایجاد نمودارهای فرایند در NoteRich – دوره آموزشی کامل توصیف فرآیندهای پیچیده، ساختارهای سیستم یا درختهای تصمیمات با تنها استفاده از متن کاری است. **Mermaid.js** یک ابزار قدرتمند بر پایه JavaScript است که به شما امکان ایجاد نمودارها با استفاده از تعریفات ساده متن را می‌دهد. در **NoteRich**، ما Mermaid.js را به طور مستقیم در ویرایشگر وصل کرده‌ایم؛ این امر به شما امکان ایجاد نمودارهای فرایند، نمودارهای توالی و غیره بدون خروج از یادداشت‌های خود را می‌دهد. این راهنما شما را درک کامل مربوط به استفاده از Mermaid نمودارها در NoteRich هدایت خواهد کرد؛ از جمله نحوه استفاده از هوش مصنوعی و OCR برای ایجاد نمودارها در زمان حال. --- ## 🚀 چرا باید از Mermaid در NoteRich استفاده کنیم؟ * **مبتنی بر متن:** نمودارهای خود را با استفاده از کد تعریف کنید؛ این کار باعث می‌شود کنترل و ویرایش نمودارها آسان شود. * **پیش‌نمایش زنده:** تغییرات خود را در حین تایپ، بلافاصله مشاهده کنید. * **پویا:** از نمودارهای فرایند، نمودارهای توالی، نمودارهای کلاس، نمودارهای وضعیت، نمودارهای گانت و غیره پشتیبانی می‌کند. * **مبتنی بر هوش مصنوعی و OCR:** نمودارها را از طریق توصیفات زبان طبیعی یا اسکن تصاویر موجود ایجاد کنید. * **رویکرد محلی:** تعریفات نمودارها در یادداشت‌های شما ذخیره می‌شوند؛ این امر از حفاظت از حریم خصوصی و دسترسی بدون اتصال به اینترنت جلوگیری می‌کند. --- ## 📝 شروع: ایجاد نمودار Mermaid سه روش اصلی برای ایجاد نمودار Mermaid در NoteRich وجود دارد: ### روش ۱: دستور `/` 1. کلید را در جایی که می‌خواهید نمودار را قرار دهید. 2. دکمه `/` را بزنید تا گزینه‌های مربوطه نمایش داده شوند. 3. **"Mermaid"** یا **"Diagram"** را جستجو کنید. 4. از لیست، **"Mermaid Diagram"** را انتخاب کنید. ### روش ۲: دکمه پیستال 1. دکمه **Insert** را در پیستال کلیک کنید. 2. به بخش **Visualization** یا **Diagrams** بروید. 3. روی **Mermaid** کلیک کنید. ### روش ۳: دستیار هوش مصنوعی 1. **AI Assistant** را باز کنید (از طریق `/ai` یا پیستال). 2. نموداری که می‌خواهید را توصیف کنید (مثلاً: “ایجاد نمودار فرایند ورود کاربر”). 3. هوش مصنوعی کد Mermaid را برای شما ایجاد خواهد کرد؛ این کد را می‌توانید مستقیماً در یادداشت خود وارد کنید. پس از وارد کردن، یک پنجره تنظیمات ظاهر خواهد شد؛ در آن، یک ویرایشگر کد و یک پنجره پیش‌نمایش زنده وجود دارد. --- ## 🛠️ رابط ویرایشگر Mermaid ویرایشگر Mermaid در NoteRich برای کارایی طراحی شده است: * **میدان کد:** یک فضای متنی که در آن کد Mermaid را می‌نویسید. * **پیش‌نمایش زنده:** نمایش زنده نمودار شما. اگر همچین اشتباهی در کد وجود داشت، یک نشان اشتباه ظاهر خواهد شد تا بتوانید آن را اصلاح کنید. * **آیکون کمک:** کلیک روی آیکون `?` که در کنار “Diagram Code” قرار دارد؛ این کار باعث باز شدن مستندات رسمی [Mermaid.js](https://mermaid.js.org/intro/) برای اطلاعات دقیق کد می‌شود. * **دکمه تأیید:** نمودار شما را ذخیره کرده و آن را در یادداشت خود وارد می‌کند. > **نکته:** می‌توانید با کلیک دوبار روی هر نمودار Mermaid موجود در یادداشت خود، ویرایشگر را باز کرده و تغییراتی ایجاد کنید. --- ## 📊 سینتکس اصلی نمودار فرایند نمودارهای فرایند رایج‌ترین کاربرد Mermaid هستند. در ادامه نحوه ایجاد آن‌ها توضیح داده شده است. ### ۱. تعریف جهت ابتدا جهت پیمایش را تعریف کنید: * `graph TD`: از بالا به پایین * `graph LR`: از چپ به راست * `graph BT`: از پایین به بالا * `graph RL`: از راست به چپ ### ۲. افزودن گره‌ها گره‌ها با یک شناسه و برچسب تعریف می‌شوند. ```mermaid graph TD A[Start] --> B[Process] B --> C{Decision} C -->|Yes| D[End] C -->|No| B ``` * `[Text]`: گره مستطیلی. * `(Text)`: گره مستطیلی گرد. * `((Text))`: گره دایره‌ای. * `{Text}`: گره رباعی. * `[[Text]]`: گره زیررو. ### ۳. اتصال گره‌ها * `-->`: پیکان مشخص. * `-.->`: پیکان خطی. * `==>`: پیکان ضخیم. * `-- Text -->`: پیکان با برچسب. --- ## 🤖 ایجاد نمودارهای مبتنی بر هوش مصنوعی می‌خواهید خودتان کد ننویسید؟ اجازه دهید هوش مصنوعی NoteRich این کار را برای شما انجام دهد. 1. **AI Assistant** را باز کنید. 2. یک دستور مثل این را تایپ کنید: *“ایجاد نمودار توالی Mermaid برای مشتری که سفارش می‌دهد.”* 3. هوش مصنوعی کد مربوطه را به شما خواهد داد. 4. کد ایجاد شده را می‌توانید مستقیماً در یادداشت خود وارد کنید. --- ## 📸 OCR: اسکن نمودارهای دست‌نویس یا چاپی آیا تصویری از تخته سفید یا نمودار فرایند چاپی دارید؟ NoteRich’s **Note Scanner (OCR)** می‌تواند آن‌ها را به کد Mermaid قابل ویرایش تبدیل کند. 1. **AI Assistant** را باز کنید و **Note Scanner (OCR)** را انتخاب کنید. 2. یک تصویر از نمودار دست‌نویس یا چاپی خود را بارگذاری کنید. 3. در دستور، به صورت دقیق بفرستید: *“این تصویر را به کد نمودار Mermaid تبدیل کنید.”* 4. هوش مصنوعی ساختار تصویر را تحلیل کرده و کد مربوطه را ایجاد خواهد کرد. 5. کد ایجاد شده را در ویرایشگر بررسی کنید و اگر اشتباهات کوچکی وجود داشت، آن‌ها را اصلاح کنید. > **نکته:** برای بهترین نتیجه، مطمئن شوید تصویر و متن شفاف هستند. اگر نمودار دست‌نویس پیچیده باشد، ممکن است پس از تبدیل، نیاز به اصلاحات دستی باشد. --- ## 🎨 ویژگی‌های پیشرفته ### سبک‌سازی گره‌ها می‌توانید ظاهر گره‌های خاص را با استفاده از کلاس‌های CSS یا سبک‌های داخلی تغییر دهید. ```mermaid graph LR A[Start] --> B[Process] style A fill:#f9f,stroke:#333,stroke-width:4px style B fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5 ``` ### زیرگراف‌ها گره‌های مرتبط را گروه‌بندی کنید تا سازماندهی بهتری داشته باشید. ```mermaid graph TD subgraph Frontend A[React App] --> B[UI Components] end subgraph Backend C[API Server] --> D[Database] end B --> C ``` ### نمودارهای توالی Mermaid فقط برای نمودارهای فرایند نیست؛ می‌توانید نمودارهای توالی نیز ایجاد کنید تا تعاملات بین سیستم‌ها را نمایش دهید. ```mermaid sequenceDiagram participant User participant NoteRich participant Server User->>NoteRich: Edit Note NoteRich->>Server: Save Data Server-->>NoteRich: Confirm Save NoteRich-->>User: Update UI ``` --- ## 💡 نکات مهم برای کاربران NoteRich 1. **خلاصه کردن کاراکترهای خاص:** اگر متن گره شما حاوی کاراکترهای خاصی مانند `[]` یا `()` باشد، متن را در پرانتز قرار دهید. ```mermaid graph TD A["Node with [brackets]"] --> B["Node with (parentheses)"] ``` 2. **کپی کردن نمودار:** پس از نمایش نمودار، روی آن کلیک کنید تا پنجره پیستال ظاهر شود؛ از دکمه **Copy Image** برای کپی کردن نمودار به برنامه‌های دیگر مانند Slack، Notion یا ایمیل استفاده کنید. 3. **دانلود SVG:** کاربران حرفه‌ای می‌توانند نمودار را به صورت فایل SVG با کیفیت بالا دانلود کنند؛ این فایل برای استفاده در ارائه‌ها یا منتشرها مناسب است. --- ## ❓ رفع تداخلات * **نمودار نمایش داده نمی‌شود؟** در پنجره پیش‌نمایش، نشانه‌های اشتباه را بررسی کنید. مشکلات رایج شامل عدم وجود پرانتز پایانی `]` یا سینتکس پیکان نادرست هستند. * **اشتباهات سینتکس؟** مطمئن شوید از نسخه صحیح Mermaid استفاده می‌کنید. NoteRich از نسخه استاندارد Mermaid.js استفاده می‌کند؛ اگر مطمئن نیستید، به مستندات رسمی [Mermaid.js](https://mermaid.js.org/intro/) مراجعه کنید. * **دقت OCR؟** اگر نتیجه OCR کامل نبود، از دستیار هوش مصنوعی برای اصلاح کد استفاده کنید؛ می‌توانید نتیجه OCR را کپی کرده و از دستیار هوش مصنوعی بخواهید که کد را اصلاح کند. --- ## 🏁 نتیجه Mermaid.js در NoteRich نحوه مستندسازی فرآیندها و سیستم‌ها را تغییر داده است. با نگه داشتن نمودارها به صورت کد، مطمئن می‌شوید که آن‌ها همیشه به‌روز باشند، به راحتی قابل تغییر باشند و به بانک اطلاعات شما به طور همزمان متصل باشند. با استفاده از هوش مصنوعی و OCR، ایجاد تصاویر پیچیده دیگر هرگز آسان نبوده است. امروز شروع کنید به تصور ایده‌های خود! --- <div class="flex flex-wrap gap-2 mt-8 mb-12"> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">Mermaid</span> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">نمودار فرایند</span> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">دستیار هوش مصنوعی</span> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">OCR</span> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">نمایش</span> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">NoteRich</span> </div>