Noterich-এ ফ্লোচার্টের জন্য Mermaid.js কীভাবে ব্যবহার করবেন – সম্পূর্ণ টিউটোরিয়াল

# NoteRich-তে ফ্লোচার তৈরি করার জন্য 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 Assistant 1. **AI Assistant** খুলুন (`/ai` দিয়ে বা টুলবারে)। 2. আপনি যে ডায়াগ্রামটি তৈরি করতে চান সেটি বর্ণনা করুন (যেমন, “ইউজার লগইন প্রক্রিয়ার জন্য ফ্লোচার তৈরি করুন”)। 3. AI আপনার জন্য Mermaid কোড তৈরি করবে; আপনি সেটি সরাসরি নোটে যোগ করতে পারেন। একবার যোগ করার পর, কোড এডিটর ও লাইভ প্রিভিউ উইন্ডো দেওয়া হবে। --- ## 🛠️ Mermaid Editor ইন্টারফেস 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. এডিটরে তৈরি কোডটি পর্যালোচনা করুন এবং যেসব কোডে সমস্যা আছে সেগুলো সংশোধন করুন। > **নোট:** সর্বোত্তম ফলাফলের জন্য, ছবিটি স্পষ্ট ও টেক্সটটি পঠনযোগ্য হওয়া উচিত। জটিল হ্যান্ডরাইডড স্কেচগুলো রূপান্তরের পর আরও কিছু ম্যানুয়াল সংশোধন প্রয়োজন হতে পারে। --- ## 🎨 অ্যাডভান্সড ফিচারস ### নোডগুলো স্টাইল করুন আপনি 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** বাটন ব্যবহার করে ডায়াগ্রামটিকে অন্যান্য অ্যাপ্লিকেশনে কপি করুন। 3. **SVG ডাউনলোড করুন:** প্রো ইউজাররা ডায়াগ্রামটিকে উচ্চমানের SVG ফাইল আকারে ডাউনলোড করতে পারেন; এটি প্রেজেন্ট বা প্রকাশনার জন্য ব্যবহৃত হয়। --- ## ❓ ট্রাবললেসমেন্ট * **ডায়াগ্রাম রেন্ডার হচ্ছে না?** প্রিভিউ উইন্ডোতে ত্রুটি চেক করুন। সাধারণ সমস্যাগুলো হলো ফাইলের শেষ স্পেসটি না থাকা বা আর্ক ভুল থাকা। * **সিনট্যাক্স ভুল?** নিশ্চিত হয়ে নিন যে আপনি সঠিক Mermaid সিনট্যাক্স ব্যবহার করছেন। NoteRich Mermaid.js-এর সর্বশেষ স্টেবল ভার্সন ব্যবহার করে। নিশ্চিত না হলে [অফিসিয়াল ডকুমেন্টেশন](https://mermaid.js.org/intro/) দেখুন। * **OCR ঠিকত্ব?** যদি OCR ফলাফল ঠিক না হয়, তবে AI Assistant ব্যবহার করে কোডটি সংশোধন করুন। আপনি OCR আউটপুটটি কপি করে AI-কে “Mermaid সিনট্যাক্স ঠিক করতে” বলতে পারেন। --- ## 🏁 সার্থেন্ডিয়ন NoteRich-তে Mermaid.js আপনার প্রক্রিয়া ও সিস্টেমগুলো লেখার পদ্ধতিকে পরিবর্তন করে দেয়। আপনার ডায়াগ্রামগুলোকে কোড হিসেবে সংরক্ষণ করলে, সেগুলো সর্বদা আধুণা থাকে, পরিবর্তন করা সহজ হয় এবং আপনার জ্ঞান বেস দ্বারা সুইচ হয়। AI জেনারেশন ও OCR স্ক্যানিং দিয়ে জটিল ভিজ্যুয়াল ইমেজ তৈরি করা আর কখনো সহজ হয়নি। আজই আপনার ধারণাগুলো ভিজ্যুয়ালাইজ করুন! ---