NoteRich میں Mermaid.js سے فلو چارٹس کیسے بنائیں – مکمل ٹیوٹوریل

# Mermaid.js کا استعمال نوٹریچ میں فلوچارٹس بنانے کے لئے – مکمل تعلیمی دستاویز پیچیدہ عملیات، سسٹم آرکیٹیکچرز، یا فیصلہ کن درختوں کو صرف متن کے ذریعہ واضح کرنا چیلنجنگ ہے۔ **Mermaid.js** ایک طاقتور جاوا اسکرپٹ بیسڈ ڈایاگرام اور چارٹنگ ٹول ہے، جو آپ کو سادہ متن کی وضاحت کے ذریعہ ڈایاگرام بنانے کی سہولت دیتا ہے۔ **NoteRich** میں، ہم نے Mermaid.js کو براہ راست ایڈیٹر میں شامل کیا ہے، تاکہ آپ نوٹس سے باہر نہ جاتے ہوئے پیشہ ورانہ فلوچارٹس، سیکوینشن ڈایاگرامز، اور بہت کچھ تخلیق کر سکتے ہیں۔ یہ گائیڈ آپ کو NoteRich میں Mermaid ڈایاگرامز کو بہتر طریقے سے استعمال کرنے کے لئے تمام تفصیلات دکھائے گا، بشمول AI اور OCR کا استعمال کرتے ہوئے ان ڈایاگرامز کو فوری طور پر تخلیق کرنے کا طریقہ۔ --- ## 🚀 NoteRich میں Mermaid کا استعمال کیوں کریں؟ * **متن بیسڈ:** آپ اپنے ڈایاگرامز کو کوڈ کے ذریعہ متعین کر سکتے ہیں، جس سے ان کی ورژن کنٹرول اور ایڈیٹنگ آسان ہو جاتی ہے۔ * **لائیو پروسیس:** آپ اپنے تبدیلیوں کو فوری طور پر دیکھ سکتے ہیں، جب آپ لکھتے ہیں۔ * **تنوع:** فلوچارٹس، سیکوینشن ڈایاگرامز، کلاس ڈایاگرامز، اسٹیٹ ڈایاگرامز، گانٹنٹ چارٹس، اور بہت کچھ سپورٹ کرتا ہے۔ * **AI اور OCR کی مدد سے:** ڈایاگرامز کو قدرتی زبان کی وضاحت سے یا موجودہ تصاویر کو اسکین کرکے تخلیق کیا جا سکتا ہے۔ * **لوکل-فرسٹ:** آپ کے ڈایاگرام کی وضاحتیں آپ کے نوٹس میں مقامی طور پر محفوظ ہوتی ہیں، جس سے پرائویسی اور آف لوڈ اکسیسمنٹ کو یقینی بنایا جاتا ہے۔ --- ## 📝 شروع کرنے کا طریقہ: Mermaid ڈایاگرام کی شاملی NoteRich میں Mermaid ڈایاگرام کی شاملی کے تین بنیادی طریقے ہیں: ### طریقہ 1: Slash کمانڈ (`/`) 1. آپ کرسر کو اس جگہ رکھیں جہاں آپ ڈایاگرام چاہتے ہیں۔ 2. `/` کو ٹائپ کریں تاکہ کمپوننٹ پکڑا جا سکے۔ 3. **"Mermaid"** یا **"Diagram"** کی تلاش کریں۔ 4. لسٹ سے **Mermaid Diagram** کو منتخب کریں۔ ### طریقہ 2: ٹول بار 1. ٹول بار میں **Insert** بٹن پر کلک کریں۔ 2. **Visualization** یا **Diagrams** سیکشن میں جائیں۔ 3. **Mermaid** پر کلک کریں۔ ### طریقہ 3: AI اسسٹنس 1. **AI Assistant** کو کھولیں ( `/ai` کے ذریعہ یا ٹول بار کے ذریعہ)۔ 2. آپ کے ڈایاگرام کی وضاحت لکھیں (مثلاً، “ایک یوزر لوگن پروسیس کے لئے فلوچارٹ بنائیں”)۔ 3. AI آپ کے لئے Mermaid کوڈ تخلیق کر دے گا، جسے آپ براہ راست اپنے نوٹ میں شامل کر سکتے ہیں۔ ایک بار شامل ہونے کے بعد، ایک کنفیگریشن موڈل ظاہر ہوگا، جس میں ایک کوڈ ایڈیٹر اور لائیو پروسیس ونڈو ہوگی۔ --- ## 🛠️ Mermaid ایڈیٹر انٹرفیس NoteRich میں Mermaid ایڈیٹر تیزی سے کام کرنے کے لئے ڈیزائن کیا گیا ہے: * **کوڈ ایریا:** ایک مونوسپیسٹک ٹیکسٹ ایریا، جہاں آپ Mermaid سینٹکس لکھتے ہیں۔ * **لائیو پروسیس:** آپ کے ڈایاگرام کا ریئل ٹائم رینڈرنگ۔ اگر کوڈ میں کوئی غلطی ہے، تو ایک ایرورک ایسکی اویئر ظاہر ہوگا، جو آپ کو ڈیبگیش کرنے میں مدد دے گا۔ * **ہیلپ آئکن:** “Diagram Code” کے برابر میں `?` آئکن پر کلک کریں تاکہ [Mermaid.js داکیومنٹیشن](https://mermaid.js.org/intro/) کھل جائے، جہاں آپ کو تفصیلی سینٹکس ریفرنسز مل جائیں گی۔ * **کنفرم بٹن:** آپ کے ڈایاگرام کو سیٹ کریں اور اسے نوٹ میں شامل کریں۔ > **نوٹ:** آپ اپنے نوٹ میں کسی بھی موجود Mermaid ڈایاگرام کو ڈبل کلک کرکے ایڈیٹر کو دوبارہ کھول سکتے ہیں، اور تبدیلیاں کر سکتے ہیں۔ --- ## 📊 بیسک فلوچارٹ سینٹکس فلوچارٹس Mermaid کے سب سے عام استعمال ہیں۔ یہاں ان کی تخلیق کرنے کا طریقہ ہے۔ ### 1. سمت کی وضاحت کریں پہلے فلوچارٹ کی سمت کی وضاحت کریں: * `graph TD`: اوپر سے نیچے * `graph LR`: بائیں سے دائیں * `graph BT`: نیچے سے اوپر * `graph RL`: دائیں سے بائیں ### 2. نوڈز شامل کریں نوڈز کو ایک آئی ڈی اور لیبل کے ذریعہ واضح کیا جاتا ہے۔ ```mermaid graph TD A[Start] --> B[Process] B --> C{Decision} C -->|Yes| D[End] C -->|No| B ``` * `[Text]`: ریکٹنگ نوڈ۔ * `(Text)`: راؤنڈنگ ریکٹنگ نوڈ۔ * `((Text))`: سیکٹر۔ * `{Text}`: رومبس (فیصلہ کن نوڈز)۔ * `[[Text]]`: سب روٹینیوں کے لئے۔ ### 3. نوڈز کو جوڑیں * `-->`: سلڑھا شارٹر۔ * `-.->`: ڈاٹڈ شارٹر۔ * `==>`: موٹی شارٹر۔ * `-- Text -->`: لیبل والا شارٹر۔ --- ## 🤖 AI پر مبنی ڈایاگرام تخلیق کوڈ لکھنا نہیں چاہتے؟ NoteRich کے AI کو اس کام کرنے دیں۔ 1. **AI Assistant** کو کھولیں۔ 2. ایک پرومپٹ لکھیں جیسے: “ایک Mermaid سیکوینشن ڈایاگرام تخلیق کریں، جو ایک صارف آن لائن آرڈر دیتا ہے۔” 3. AI اسکرپٹ کو اس طرح کا کوڈ واپس کرے گا: ```mermaid sequenceDiagram participant Customer participant Website participant Database Customer->>Website: Place Order Website->>Database: Check Inventory Database-->>Website: Inventory Available Website-->>Customer: Order Confirmed ``` 4. کوڈ کو کاپی کریں، یا اگر آپ کے AI انٹرفیس میں “Insert” بٹن موجود ہے، تو اسے استعمال کریں تاکہ آپ اسے اپنے نوٹ میں شامل کر سکیں۔ --- ## 📸 OCR: ہینڈرڈ یا پرنٹڈ ڈایاگراموں کو اسکین کریں کیا آپ کے پاس ایک وائٹ بورڈ کی تصویر یا پرنٹڈ فلوچارٹ ہے؟ NoteRich کا **Note Scanner (OCR)** اسے ایڈیٹیبل Mermaid کوڈ میں تبدیل کر سکتا ہے۔ 1. **AI Assistant** کو کھولیں اور **Note Scanner (OCR)** کو منتخب کریں۔ 2. اپنے ہینڈرڈ یا پرنٹڈ ڈایاگرام کی تصویر اپلائی کریں۔ 3. پرومپٹ میں لکھیں: “اس تصویر کو Mermaid.js فلوچارٹ کوڈ میں تبدیل کریں۔” 4. AI تصویر کی ساخت کا تجزیہ کرے گا اور مطابقتی Mermaid سینٹکس تخلیق کرے گا۔ 5. ایڈیٹر میں تخلیق کردہ کوڈ کا جائزہ لیں اور کم سے کم ریکگنیشن غلطیوں کو درست کریں۔ > **نوٹ:** بہترین نتائج کے لئے، یقین کریں کہ تصویر واضح ہے اور ٹیکسٹ قابل فہرست ہے۔ پیچیدہ ہینڈرڈ اسکیلپس کو تبدیلی کے بعد مزید ہمت کرنے کی ضرورت ہوسکتی ہے۔ --- ## 💡 پروٹوکولی ٹپس نوٹریچ صارفین کے لئے 1. **خصوصی کیریکٹرز کو ایکسچینج کریں:** اگر آپ کے نوڈز میں `[]` یا `()` جیسے خصوصی کیریکٹر ہیں، تو ٹیکسٹ کو قواعد میں لپیٹیں۔ ```mermaid graph TD A["Node with [brackets]"] --> B["Node with (parentheses)"] ``` 2. **کوڈ کو تصویر کی شکل میں کاپی کریں:** جب آپ کے ڈایاگرام رینڈر ہو جائے، تو فلوٹنگ ٹول بار کو کلک کریں۔ “کوڈ کو کاپی کریں” بٹن کا استعمال کریں تاکہ ڈایاگرام کو سلیکٹ، نوٹس، یا ای میل میں پیپاس کیا جا سکے۔ 3. **SVG ڈاؤن لوڈ کریں:** پرو صارفین SVG فائل کو ڈاؤن لوڈ کر سکتے ہیں، جو پریزنٹیشنز یا پبلیکیشنز میں استعمال کیا جا سکتا ہے۔ --- ## ❓ تھروولیجنگ * **ڈایاگرام رینڈر نہیں کر رہا؟** پروسیس ونڈو میں ایرورک ایسکی اویئر کو چیک کریں۔ عام مسائل میں کوڈ میں کوئی کلنگس فریمز نہ ہونا یا غلط شارٹر سینٹکس ہوتا ہے۔ * **سینٹکس غلطیاں؟** یقین کریں کہ آپ درست Mermaid ورژن سینٹکس استعمال کر رہے ہیں۔ NoteRich، Mermaid.js کی سب سے جدید سٹیٹ مارکیٹ ورژن کا استعمال کرتا ہے۔ اگر آپ کو یقین نہیں ہے، تو [ریکنی داکیومنٹیشن](https://mermaid.js.org/intro/) کو دیکھیں۔ * **OCR درستگی؟** اگر OCR کا نتیجہ بہترین نہیں ہے، تو AI اسسٹنس کا استعمال کریں تاکہ کوڈ کو درست کیا جا سکے۔ آپ کوچھوں کو OCR کی شکل میں پیپاس کریں اور AI سے کہیں کہ “Mermaid سینٹکس کو درست کریں۔” --- ## 🏁 نتیجہ NoteRich میں Mermaid.js، آپ کے عملیات اور سسٹمز کو دستاویز کرنے کا طریقہ بدل دیتا ہے۔ جب آپ کے ڈایاگرام کو کوڈ کی شکل میں رکھتے ہیں، تو آپ یقین کر سکتے ہیں کہ یہ ہمیشہ اپ ڈیٹ رہتا ہے، آسانی سے تبدیل کیا جا سکتا ہے، اور آپ کے علم بیسڈ سے بہتر طریقے سے جڑ جاتا ہے۔ AI جینریشن اور OCR اسکیننگ کے ساتھ، پیچیدہ ویژنز کو تخلیق کرنا اب پہلے کی طرح آسان ہے۔ آج سے اپنے خیالات کو ویژن کریں! ---