วิธีใช้ Mermaid.js สำหรับแผนผังงานใน NoteRich – บทช่วยสอนฉบับสมบูรณ์

# วิธีใช้ Mermaid.js ใน NoteRich – ครบถ้วนทุกขั้นตอน การแสดงภาพกระบวนการที่ซับซ้อน, สถาปัตยกรรมของระบบ, หรือต้นไม้การตัดสินใจนั้นอาจเป็นเรื่องยากเมื่อใช้เพียงข้อความเท่านั้น **Mermaid.js** เป็นเครื่องมือสร้างแผนภาพและกราฟที่มีประสิทธิภาพ ซึ่งช่วยให้คุณสามารถสร้างแผนภาพได้โดยใช้ข้อความที่เขียนขึ้นมาในรูปแบบง่ายๆ ใน **NoteRich**, เราได้ผสาน Mermaid.js เข้ากับโปรแกรมอย่างตรงไปตรงมา ทำให้คุณสามารถสร้างแผนภาพกระบวนการ, แผนภาพลำดับขั้นตอน, และอื่นๆ ได้โดยไม่ต้องออกจากบันทึกของคุณ คู่มือนี้จะช่วยคุณในทุกขั้นตอนที่จำเป็นในการใช้ Mermaid diagrams ใน NoteRich รวมถึงวิธีการใช้ AI และ OCR เพื่อสร้างแผนภาพได้ทันที --- ## 🚀 ทำไมต้องใช้ Mermaid ใน NoteRich? * **อิงจากข้อความ:** คุณสามารถกำหนดแผนภาพของคุณโดยใช้คำสั่งโค้ด ทำให้การควบคุมและการแก้ไขแผนภาพเป็นเรื่องง่าย * **การดูภาพลายลักษณ์อักษรแบบเรียลไทม์:** คุณสามารถเห็นการเปลี่ยนแปลงของคุณได้ทันทีเมื่อคุณพิมพ์ข้อความ * **ความสามารถหลากหลาย:** รองรับแผนภาพกระบวนการ, แผนภาพลำดับขั้นตอน, แผนภาพคลาส, แผนภาพสถานะ, แผนภาพกังตัต, และอื่นๆ * **AI & OCR:** สามารถสร้างแผนภาพจากคำอธิบายภาษาธรรมชาติ หรือจากการสแกนภาพที่มีอยู่ * **การจัดเก็บข้อมูลในท้องถิ่น:** ข้อมูลของแผนภาพของคุณจะถูกจัดเก็บในท้องถิ่นในบันทึกของคุณ ทำให้คุณสามารถปกปิดข้อมูลและเข้าถึงข้อมูลได้ในขณะที่ไม่มีสัญญาณอินเทอร์เน็ต --- ## 📝 การเริ่มต้น: การแทรกแผนภาพ Mermaid มีสามวิธีหลักในการแทรกแผนภาพ Mermaid ใน NoteRich: ### วิธีที่ 1: คำสั่ง `/` 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 Mermaid Editor ใน NoteRich ถูกออกแบบมาเพื่อความมีประสิทธิภาพ: * **พื้นที่สำหรับโค้ด:** พื้นที่สำหรับเขียนโค้ด Mermaid * **การดูภาพลายลักษณ์อักษรแบบเรียลไทม์:** การแสดงภาพลายลักษณ์อักษรแบบเรียลไทม์ หากมีข้อผิดพลาดในการเขียนโค้ด จะมีหน้าต่างสำหรับการแก้ไขข้อผิดพลาดปรากฏขึ้น * **ไอคอนสำหรับความช่วยเหลือ:** คลิกที่ไอคอน `?` ข้าง “Diagram Code” เพื่อเปิดเอกสาร [Mermaid.js Documentation](https://mermaid.js.org/intro/) เพื่อดูคำอธิบายโค้ดอย่างละเอียด * **ปุ่มสำหรับการยืนยัน:** ใช้ปุ่มนี้เพื่อบันทึกแผนภาพของคุณและแทรกมันเข้าไปในบันทึกของคุณ > **เคล็ดลับ:** คุณสามารถคลิกซ้ำที่แผนภาพ Mermaid ที่มีอยู่ในบันทึกของคุณเพื่อเปิดโปรแกรมและทำการเปลี่ยนแปลงได้ --- ## 📊 สไตล์โค้ดพื้นฐาน แผนภาพกระบวนการเป็นกรณีการใช้งานที่พบบ่อยที่สุดของ Mermaid. นี่คือวิธีในการสร้างแผนภาพกระบวนการ: ### 1. การกำหนดทิศทางของกระบวนการ เริ่มต้นด้วยการกำหนดทิศทางของกระบวนการ: * `graph TD`: จากบนลงล่าง * `graph LR`: จากซ้ายไปขวา * `graph BT`: จากล่างขึ้นบน * `graph RL`: จากขวาไปซ้าย ### 2. การเพิ่มโหนด โหนดจะถูกกำหนดโดย ID และป้ายกำกับ ```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 ไม่ต้องการเขียนโค้ด? ปล่อยให้ AI ของ NoteRich ทำหน้าที่ให้คุณ 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. คัดลอกโค้ดหรือใช้ปุ่ม **Insert** หากมีในอินเทอร์เฟซของ AI เพื่อนำไปใส่ในบันทึกของคุณ --- ## 📸 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** เพื่อคัดลอกแผนภาพไปยังแอปพลิเคชันอื่นๆ เช่น Slack, Notion หรืออีเมล 3. **การดาวน์โหลด SVG:** ผู้ใช้ที่มีความสามารถสูงสามารถดาวน์โหลดแผนภาพเป็นไฟล์ SVG คุณภาพสูงเพื่อใช้ในการนำเสนอหรือการเผยแพร่ --- ## ❓ การแก้ไขปัญหา * **แผนภาพไม่แสดงผล?** ตรวจสอบหน้าต่างสำหรับการดูภาพลายลักษณ์อักษรในหน้าต่างสำหรับการแก้ไขข้อผิดพลาด ข้อผิดพลาดที่พบบ่อยได้แก่การขาดเครื่องหมายปิด `]` หรือโค้ดปากกาที่ไม่ถูกต้อง * **ข้อผิดพลาดในการเขียนโค้ด?** ตรวจสอบให้แน่ใจว่าคุณใช้โค้ด Mermaid.js ฉบับที่ถูกต้อง NoteRich ใช้เวอร์ชันที่มีความเสถียรที่สุดของ Mermaid.js หากคุณไม่แน่ใจ ให้ดูที่ [เอกสารอย่างเป็นทางการ](https://mermaid.js.org/intro/) * **ความแม่นยำของ OCR?** หากผลลัพธ์ของ OCR ไม่สมบูรณ์ ให้ใช้ AI Assistant เพื่อปรับปรุงโค้ดของคุณ คุณสามารถคัดลอกผลลัพธ์ของ OCR และขอให้ AI “แก้ไขโค้ด Mermaid” ได้ --- ## 🏁 สรุป Mermaid.js ใน NoteRich ช่วยให้คุณสามารถจัดทำบันทึกเกี่ยวกับกระบวนการและระบบได้อย่างมีประสิทธิภาพ โดยการเก็บแผนภาพของคุณเป็นโค้ด คุณจะมั่นใจว่าสามารถปรับเปลี่ยนแผนภาพได้ง่าย และสามารถเชื่อมต่อกับฐานข้อมูลของคุณได้อย่างราบรื่น ด้วย AI และ OCR การสร้างภาพที่ซับซ้อนไม่เคยง่ายอย่างนี้มาก่อน เริ่มสร้างภาพลายลักษณ์อักษรของคุณได้เลย! ---