# Cách sử dụng Mermaid.js trong NoteRich – Hướng dẫn chi tiết Việc trực quan hóa các quy trình phức tạp, kiến trúc hệ thống hoặc cây quyết định có thể khó khăn khi chỉ sử dụng văn bản. **Mermaid.js** là công cụ lập dạng và biểu đồ dựa trên JavaScript mạnh mẽ, cho phép bạn tạo dạng biểu đồ bằng cách sử dụng các định nghĩa văn bản đơn giản. Trong **NoteRich**, chúng tôi đã tích hợp Mermaid.js trực tiếp vào trình soạn thảo, giúp bạn tạo ra các sơ đồ dòng chảy, sơ đồ trình tự và nhiều loại biểu đồ khác mà không cần rời khỏi ghi chú của bạn. Hướng dẫn này sẽ hướng dẫn bạn tất cả những gì bạn cần biết để thành thạo việc sử dụng Mermaid trong NoteRich, bao gồm cách sử dụng AI và OCR để tạo ra các biểu đồ ngay lập tức. --- ## 🚀 Tại sao nên sử dụng Mermaid trong NoteRich? * **Dựa trên văn bản:** Định nghĩa các biểu đồ của bạn bằng mã, giúp việc kiểm soát và chỉnh sửa dễ dàng hơn. * **Trực quan hóa ngay lập tức:** Nhìn thấy những thay đổi của bạn ngay khi bạn gõ. * **Đa năng:** Hỗ trợ sơ đồ dòng chảy, sơ đồ trình tự, sơ đồ lớp, sơ đồ trạng thái, sơ đồ Gantt và nhiều loại biểu đồ khác. * **Hỗ trợ AI và OCR:** Tạo ra các biểu đồ từ các mô tả ngôn ngữ tự nhiên hoặc từ việc quét các hình ảnh hiện có. * **Lưu trữ cục bộ:** Các định nghĩa biểu đồ của bạn được lưu trữ cục bộ trong ghi chú của bạn, đảm bảo tính bảo mật và khả năng truy cập ngoại tuyến. --- ## 📝 Bắt đầu: Chèn biểu đồ Mermaid Có ba cách chính để chèn biểu đồ Mermaid vào NoteRich: ### Phương pháp 1: Lệnh slash (`/`) 1. Đặt con trỏ vào nơi bạn muốn chèn biểu đồ. 2. Gõ `/` để mở trình chọn thành phần. 3. Tìm kiếm **"Mermaid"** hoặc **"Diagram"**. 4. Chọn **Mermaid Diagram** từ danh sách. ### Phương pháp 2: Bàn công cụ 1. Nhấp vào nút **Chèn** trong bàn công cụ. 2. Di chuyển đến mục **Trực quan hóa** hoặc **Biểu đồ**. 3. Nhấp vào **Mermaid**. ### Phương pháp 3: Trợ lý AI 1. Mở **Trợ lý AI** (qua `/ai` hoặc bàn công cụ). 2. Mô tả biểu đồ bạn muốn (ví dụ: “Tạo sơ đồ dòng chảy cho quy trình đăng nhập người dùng”). 3. AI sẽ tạo ra mã Mermaid cho bạn, bạn có thể chèn nó trực tiếp vào ghi chú của mình. Khi được chèn vào, một cửa sổ cấu hình sẽ xuất hiện với trình soạn thảo mã và cửa sổ trực quan hóa ngay lập tức. --- ## 🛠️ Giao diện trình soạn thảo Mermaid Trình soạn thảo Mermaid trong NoteRich được thiết kế để hiệu quả: * **Phần mã:** Một khu vực văn bản có kích thước cố định, nơi bạn viết mã Mermaid của mình. * **Trực quan hóa ngay lập tức:** Hiển thị biểu đồ của bạn trong thời gian thực. Nếu có lỗi mã, một bảng hiển thị lỗi sẽ xuất hiện để giúp bạn gỡ lỗi. * **Ứng dụng hỗ trợ:** Nhấp vào biểu tượng `?` bên cạnh “Mã biểu đồ” để mở tài liệu chính thức của [Mermaid.js](https://mermaid.js.org/intro/) để xem các định nghĩa mã chi tiết. * **Nhấn nút xác nhận:** Lưu biểu đồ của bạn và chèn nó vào ghi chú. > **Mẹo:** Bạn có thể nhấp đúp vào bất kỳ biểu đồ Mermaid nào trong ghi chú của mình để mở lại trình soạn thảo và thực hiện thay đổi. --- ## 📊 Cú pháp sơ đồ dòng chảy cơ bản Sơ đồ dòng chảy là trường hợp sử dụng phổ biến nhất của Mermaid. Dưới đây là cách tạo chúng. ### 1. Định nghĩa hướng di chuyển Bắt đầu bằng việc định nghĩa hướng di chuyển của dòng chảy: * `graph TD`: Từ trên xuống dưới * `graph LR`: Từ trái sang phải * `graph BT`: Từ dưới lên trên * `graph RL`: Từ phải sang trái ### 2. Thêm nút Các nút được định nghĩa bằng ID và nhãn. ```mermaid graph TD A[Khởi tạo] --> B[Quá trình] B --> C{Quyết định} C -->|Đúng| D[Kết thúc] C -->|Không| B ``` * `[Văn bản]`: Nút hình chữ nhật. * `(Văn bản)`: Nút hình chữ nhật vuông. * `((Văn bản))`: Nút hình tròn. * `{Văn bản}`: Nút hình lục giác (Quyết định). * `[[Văn bản]]`: Nút hàm. ### 3. Nối các nút * `-->`: Dấu thẳng. * `-.->`: Dấu nét. * `==>`: Dấu thẳng dày. * `-- Văn bản -->`: Dấu với nhãn. --- ## 🤖 Tạo biểu đồ bằng AI Không muốn viết mã? Hãy để NoteRich sử dụng AI giúp bạn. 1. Mở **Trợ lý AI**. 2. Gõ một câu hỏi như: “Tạo sơ đồ trình tự cho quy trình đặt đơn hàng trực tuyến của khách hàng.” 3. AI sẽ trả về một đoạn mã như sau: ```mermaid sequenceDiagram participant Khách hàng participant Trang web participant Cơ sở dữ liệu Khách hàng->>Trang web: Đặt đơn hàng Trang web->>Cơ sở dữ liệu: Kiểm tra hàng tồn kho Cơ sở dữ liệu-->>Trang web: Hàng có sẵn Trang web-->>Khách hàng: Xác nhận đơn hàng ``` 4. Sao chép mã hoặc sử dụng nút “Chèn” nếu có trong giao diện AI để chèn nó vào ghi chú của bạn. --- ## 📸 OCR: Quét biểu đồ viết tay hoặc in Có hình ảnh bảng đen hoặc sơ đồ dòng chảy in? **NoteRich’s Note Scanner (OCR)** có thể chuyển nó thành mã Mermaid có thể sửa đổi. 1. Mở **Trợ lý AI** và chọn **Note Scanner (OCR)**. 2. Tải hình ảnh của biểu đồ viết tay hoặc in của bạn. 3. Trong câu hỏi, chỉ định: “Chuyển hình ảnh này thành mã sơ đồ dòng chảy của Mermaid.js.” 4. AI sẽ phân tích cấu trúc hình ảnh và tạo ra mã Mermaid tương ứng. 5. Xem lại mã được tạo ra trong trình soạn thảo và điều chỉnh bất kỳ lỗi nhận diện nào. > **Lưu ý:** Để đạt kết quả tốt nhất, đảm bảo hình ảnh rõ ràng và văn bản đọc được. Các bản vẽ viết tay phức tạp có thể cần điều chỉnh thủ công sau khi chuyển đổi. --- ## 🎨 Tính năng nâng cao ### Styling các nút Bạn có thể tùy chỉnh hình dáng của các nút cụ thể bằng cách sử dụng lớp CSS hoặc kiểu dáng trong lồng ```mermaid graph LR A[Khởi tạo] --> B[Quá trình] style A fill:#f9f,stroke:#333,stroke-width:4px style B fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5 ``` ### Subgraph Grupp các nút liên quan lại với nhau để tổ chức tốt hơn. ```mermaid graph TD subgraph Frontend A[Ứng dụng React] --> B[Thành phần giao diện người dùng] end subgraph Backend C[Server API] --> D[Cơ sở dữ liệu] end B --> C ``` ### Sơ đồ trình tự Mermaid không chỉ dùng cho sơ đồ dòng chảy. Bạn cũng có thể tạo sơ đồ trình tự để trực quan hóa sự tương tác giữa các hệ thống. ```mermaid sequenceDiagram participant Người dùng participant NoteRich participant Server Người dùng->>NoteRich: Sửa ghi chú NoteRich->>Server: Lưu dữ liệu Server-->>NoteRich: Xác nhận lưu NoteRich-->>Người dùng: Cập nhật giao diện ``` --- ## 💡 Mẹo cho người dùng NoteRich 1. **Tránh ký tự đặc biệt:** Nếu văn bản nút của bạn chứa ký tự đặc biệt như `[]` hoặc `()`, hãy bao bọc văn bản trong dấu ngoặc. ```mermaid graph TD A["Nút với [dấu ngoặc]"] --> B["Nút với (dấu ngoặc)"] ``` 2. **Sao chép thành hình ảnh:** Khi biểu đồ được hiển thị, nhấp vào nó để hiển thị bàn công cụ. Sử dụng nút **Sao chép hình ảnh** để sao chép biểu đồ vào các ứng dụng khác như Slack, Notion hoặc email. 3. **Tải xuống SVG:** Người dùng chuyên nghiệp có thể tải xuống biểu đồ dưới dạng tệp SVG chất lượng cao để sử dụng trong bài thuyết trình hoặc tài liệu. --- ## ❓ Khắc phục lỗi * **Biểu đồ không được hiển thị?** Kiểm tra bảng hiển thị lỗi trong cửa sổ trực quan hóa. Các vấn đề phổ biến bao gồm việc thiếu dấu ngoặc `]` hoặc cú pháp dấu thẳng không đúng. * **Lỗi mã?** Đảm bảo bạn đang sử dụng cú pháp mã Mermaid chính xác. NoteRich sử dụng phiên bản Mermaid.js ổn định nhất. Nếu bạn không chắc chắn, hãy tham khảo tài liệu chính thức của [Mermaid.js](https://mermaid.js.org/intro/). * **Độ chính xác của OCR?** Nếu kết quả OCR không hoàn hảo, hãy sử dụng Trợ lý AI để điều chỉnh mã. Bạn có thể sao chép kết quả OCR và yêu cầu AI “Sửa mã Mermaid”. --- ## 🏁 Kết luận Mermaid.js trong NoteRich giúp bạn biểu diễn quy trình và hệ thống một cách hiệu quả. Bằng cách giữ biểu đồ của bạn dưới dạng mã, bạn đảm bảo chúng luôn được cập nhật, dễ sửa đổi và được tích hợp liền mạch với cơ sở kiến thức của bạn. Với AI tạo mã và OCR quét, việc tạo các hình ảnh phức tạp không bao giờ dễ dàng hơn. Hãy bắt đầu hình dung ý tưởng của bạn ngay hôm nay! ---