# NoteRich တွင် Mermaid.js ကို အသုံးပြုခြင်း – အပြည့်အစုပြည့်စုံဗျူဟာပြပါ ရှုပ်ထွေးသော လုပ်ငန်းစဉ်များ၊ စနစ်ဖွဲ့စည်းပုံများ သို့မဟုတ် ဆုံးဖြတ်ချက်ပုံစံများကို စာသားတစ်ခုတည်းဖြင့် ပုံဖော်ရန်မှာ ခက်ခဲပါသည်။ **Mermaid.js** သည် JavaScript ကိုအခြေခံထားသော ပုံစံဖော်နည်းကိရိယာတစ်ခုဖြစ်ပြီး၊ ရိုးရှင်းသော စာသားဖြင့် ပုံစံများကို ဖန်တီးနိုင်သည်။ NoteRich တွင် Mermaid.js ကို ပရိုဂရမ်တွင် တရားဝင်ထည့်သွင်းထားသောကြောင့်၊ သင်သည် အသက်မွေးဝမ်းကြောင်းဆိုင်ရာ ပုံစံများ၊ အစီအစဉ်ပုံစံများ စသည်တို့ကို သင့်သင့်မှတ်တမ်းများတွင်ပင် ဖန်တီးနိုင်ပါသည်။ ဤလမ်းညွှန်ချက်သည် NoteRich တွင် Mermaid ပုံစံများကို ကျွမ်းကျင်စွာအသုံးပြုရန်အတွက် သင်လိုအပ်သမျှကို ပြသပေးပါမည်။ AI နှင့် OCR ကိုအသုံးပြုကာ ပုံစံများကို အချက်အလက်များဖြင့် အချက်အလက်များကို အချက်အလက်များဖြင့် ဖန်တီးနိုင်ပါသည်။ --- ## 🚀 NoteRich တွင် Mermaid ကို အဘယ်ကြောင့် အသုံးပြုသနည်း? * **စာသားအခြေခံ:** ကုဒ်ဖြင့် ပုံစံများကို ဖော်ပြပါ။ ထိုသို့ပြုလုပ်ခြင်းဖြင့် ပုံစံများကို ပြုပြင်ပြောင်းလဲရန် လွယ်ကူပါသည်။ * **အချက်အလက်များ:** သင်ရေးသားသည့်အချိန်တွင် ပြောင်းလဲမှုများကို အချက်အလက်များဖြင့် တွေ့မြင်နိုင်ပါသည်။ * **အမျိုးအစားစုံပါ:** ပုံစံများ၊ အစီအစဉ်ပုံစံများ၊ အခြေအနေပုံစံများ၊ Gantt ပုံစံများ စသည်တို့ကို ပါဝင်စေနိုင်ပါသည်။ * **AI နှင့် OCR ဖြင့် ဖန်တီးနိုင်သည်:** သဘာဝဘာသာစကားဖြင့် ဖော်ပြခြင်း သို့မဟုတ် ရှိနှင့်ပြီးသော ပုံစံများကို စကန့်ဖတ်ခြင်းဖြင့် ပုံစံများကို ဖန်တီးနိုင်ပါသည်။ * **ဒေသတွင်းသို့ ဦးတည်ခြင်း:** သင့်ပုံစံများကို သင့်မှတ်တမ်းများတွင် ဒေသတွင်းသို့ သိမ်းဆည်းထားပါသည်။ ထို့ကြောင့် သင်၏ပုံစံများကို လွတ်လပ်စွာသိရှိနိုင်ပါသည်။ --- ## 📝 စတင်လုပ်ဆောင်ခြင်း – Mermaid ပုံစံကို ထည့်သွင်းခြင်း NoteRich တွင် Mermaid ပုံစံကို ထည့်သွင်းရန် နည်းလမ်းသုံးခုရှိပါသည်။ ### နည်းလမ်း ၁: Slash ကုဒ် (`/`) 1. ပုံစံထားလိုသည့်နေရာတွင် ကော်ကလက်ကို ထားပါ။ 2. `/` ကုဒ်ကိုရေးသားကာ ပုံစံရွေးချယ်မှုကို ဖွင့်ပါ။ 3. **"Mermaid"** သို့မဟုတ် **"Diagram"** ကို ရှာပါ။ 4. စာရင်းထဲမှ **Mermaid Diagram** ကို ရွေးပါ။ ### နည်းလမ်း ၂: တူးလ်ဘာတာ 1. တူးလ်ဘာတာရှိ **Insert** ခလုတ်ကို နှိပ်ပါ။ 2. **Visualization** သို့မဟုတ် **Diagrams** အပိုင်းသို့ သွားပါ။ 3. **Mermaid** ကို နှိပ်ပါ။ ### နည်းလမ်း ၃: AI Assistant 1. **AI Assistant** ကို ဖွင့်ပါ (`/ai` သို့မဟုတ် တူးလ်ဘာတာတွင်)။ 2. သင်လိုချင်သော ပုံစံကို ဖော်ပြပါ (ဥပမာ “User login process အတွက် flowchart ဖန်တီးပါ”)။ 3. AI သည် သင်နှစ်သက်သော Mermaid ကုဒ်ကို ဖန်တီးပေးပါမည်။ ထိုကုဒ်ကို သင့်မှတ်တမ်းတွင် ထည့်သွင်းနိုင်ပါသည်။ ထည့်သွင်းပြီးနောက်၊ ကုဒ်ဖြည့်သူအခန်းတစ်ခုကို ပေါ်လာပါမည်။ ထိုအခန်းတွင် ကုဒ်ဖြည့်စက်နှင့် အချက်အလက်များကို တွေ့မြင်နိုင်ပါသည်။ --- ## 🛠️ Mermaid Editor အင်တာနက်အခြေအနေ NoteRich တွင်ရှိသော Mermaid Editor သည် ထိရောက်မှုကို ရည်ရွယ်ထားပါသည်။ * **ကုဒ်ဧရိယာ:** သင်က Mermaid ကုဒ်များကို ရေးသားသည့် စာသားဧရိယာဖြစ်ပါသည်။ * **အချက်အလက်များ:** သင့်ပုံစံများကို အချက်အလက်များဖြင့် ပြသပါသည်။ ကုဒ်အမှားရှိပါက၊ အမှားကို ဖော်ပြပါသည်။ * **အကူအညီအင်္ဂါး:** “Diagram Code” ဘေးရှိ `?` အင်္ဂါးကိုနှိပ်ပါ။ ထိုအင်္ဂါးသည် [Mermaid.js Documentation](https://mermaid.js.org/intro/) တွင် ကုဒ်ဖော်ပြချက်များကို ဖော်ပြပါသည်။ * **အတည်ပြုခလုတ်:** သင့်ပုံစံကို သိမ်းဆည်းပြီး မှတ်တမ်းတွင် ထည့်သွင်းပါ။ > **အကြံပြ:** သင့်မှတ်တမ်းတွင် ရှိနှင့်ပြီးသော Mermaid ပုံစံများကို နှစ်ခါထပ်နှိပ်ပါ။ ထိုသို့ပြုလုပ်ခြင်းဖြင့် ပုံစံများကို ပြန်လည်ဖော်ပြနိုင်ပါသည်။ --- ## 📊 အခြေခံ Flowchart ကုဒ် Flowchart သည် Mermaid အသုံးပြုရန် အတွေ့အကြုံအများဆုံးဖြစ်ပါသည်။ ဘယ်လိုဖန်တီးရမည်ဆိုသည်ကို အောက်ပါအတိုင်း ဖော်ပြပါမည်။ ### ၁. လားရှင်းကို ဖော်ပြခြင်း ပုံစံလားရှင်းကို ဖော်ပြရန် လားရှင်းကို ဖော်ပြပါ။ * `graph TD`: အပေါ်မှအောက်သို့ * `graph LR`: ဘယ်ဘက်မှညာဘက် * `graph BT`: အောက်မှအပေါ်သို့ * `graph RL`: ညာဘက်မှဘယ်ဘက် ### ၂. နုံးများထည့်သွင်းခြင်း နုံးများကို ID နှင့် အမည်ဖြင့် ဖော်ပြပါ။ ```mermaid graph TD A[Start] --> B[Process] B --> C{Decision} C -->|Yes| D[End] C -->|No| B ``` * `[Text]`: စတုရန်းပုံနံပါတ်။ * `(Text)`: လုံးဝန်းသောစတုရန်း။ * `((Text))`: စက်လုံး။ * `{Text}`: အက်စကွီပုံနံပါတ်။ * `[[Text]]`: အတွင်းပိုင်းပုံနံပါတ်။ ### ၃. နုံးများကို ဆက်သွယ်ခြင်း * `-->`: စစ်စခရင်းမျဉ်း။ * `-.->`: အစက်ချမျဉ်း။ * `==>`: ထူသောမျဉ်း။ * `-- Text -->`: အမည်ပါသောမျဉ်း။ --- ## 🤖 AI ဖြင့် ဖန်တီးနိုင်သည် ကုဒ်ရေးရန် မလိုလားပါသလား? NoteRich ၏ AI ကို အသုံးပြုပါ။ 1. **AI Assistant** ကို ဖွင့်ပါ။ 2. “Generate a Mermaid sequence diagram for a customer placing an order online.” စကားလုံးကို ရေးသားပါ။ 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)** ဖြင့် ပုံစံများအဖြစ် ပြောင်းလဲနိုင်ပါသည်။ 1. **AI Assistant** ကို ဖွင့်ပါ။ **Note Scanner (OCR)** ကို ရွေးပါ။ 2. သင်ရေးသားထားသော ပုံစံများ၏ ဓာတ်ပုံကို အင်တာနက်တွင် အတင်းပို့ပါ။ 3. ပရိုဂရမ်တွင် “Convert this image into Mermaid.js flowchart code.” ဟု ဖော်ပြပါ။ 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 ```