Trong thế giới làm việc hiện đại, việc trình bày ý tưởng và quy trình một cách trực quan là chìa khóa để nâng cao năng suất và hiệu quả giao tiếp. Notion, với khả năng linh hoạt vượt trội, đã trở thành công cụ không thể thiếu cho nhiều cá nhân và đội nhóm. Tuy nhiên, một trong những tính năng mà Notion chưa tích hợp sẵn là khả năng tạo sơ đồ tư duy (mind map) hay biểu đồ dòng chảy (flowchart) một cách trực tiếp. Đó là lúc Mermaid.js, một công cụ tạo biểu đồ dựa trên văn bản mạnh mẽ, xuất hiện như một giải pháp hoàn hảo. Bằng cách tận dụng các khối mã (code block) trong Notion, bạn có thể biến những dòng văn bản đơn giản thành các biểu đồ trực quan, giúp bạn phác thảo ý tưởng, lên kế hoạch dự án hoặc ghi chú thông tin một cách mạch lạc và chuyên nghiệp.
Mermaid.js – Vì sao là lựa chọn tối ưu cho Notion?
Notion nổi tiếng với tính linh hoạt và khả năng tùy biến cao, cho phép người dùng ứng dụng vào mọi khía cạnh trong công việc và cuộc sống cá nhân. Tuy nhiên, như đã đề cập, Notion không có công cụ tạo flowchart hay mind map bản địa. Mặc dù có thể tìm cách mô phỏng bằng cách sử dụng các cơ sở dữ liệu (databases), nhưng đó không phải là giải pháp lý tưởng.
Mermaid.js lấp đầy khoảng trống này một cách xuất sắc. Điều làm tôi yêu thích nhất ở Mermaid.js là sự dễ sử dụng của nó. Ngay cả khi không có kiến thức chuyên sâu về lập trình, bạn vẫn có thể dễ dàng nắm bắt cú pháp Mermaid. Điều khiến việc này trở nên dễ dàng hơn nữa là Notion cho phép bạn xem trước trực tiếp hình ảnh mà mã của bạn tạo ra ngay khi bạn viết. Đây chính là cách tôi sử dụng nó để xây dựng các biểu đồ dòng chảy và sơ đồ tư duy.
Giao diện Notion hiển thị biểu đồ dòng chảy hoàn chỉnh từ Mermaid
Cú pháp đơn giản, dễ tiếp cận
Một trong những ưu điểm lớn nhất của Mermaid.js là cú pháp đơn giản và dễ học. Thay vì phải kéo thả các đối tượng đồ họa phức tạp, bạn chỉ cần gõ các dòng văn bản theo một cấu trúc nhất định. Điều này không chỉ giúp việc tạo biểu đồ trở nên nhanh chóng hơn mà còn cho phép bạn dễ dàng chỉnh sửa và cập nhật chúng chỉ bằng cách chỉnh sửa các dòng mã. Đối với những người muốn tạo biểu đồ một cách hiệu quả mà không cần cài đặt thêm phần mềm phức tạp, Mermaid.js trong Notion là một lựa chọn lý tưởng.
Hướng dẫn thêm khối code Mermaid vào Notion
Để bắt đầu tạo biểu đồ Mermaid trong Notion, bạn cần thêm một khối mã Mermaid vào trang của mình. Quy trình thực hiện rất đơn giản:
- Mở một trang Notion trống hoặc trang bạn muốn chèn biểu đồ vào.
- Gõ dấu gạch chéo tới (/) để mở menu các khối (block).
- Trong thanh tìm kiếm, gõ “code” và chọn tùy chọn Code – Mermaid từ danh sách thả xuống.
Thao tác này sẽ mở một khối mã đặc biệt, nơi bạn sẽ nhập cú pháp Mermaid để tạo biểu đồ của mình. Ở phía trên cùng của khối mã, bạn sẽ thấy hai menu thả xuống nhỏ. Menu đầu tiên là ngôn ngữ mã, đã được đặt sẵn là “Mermaid”. Menu thứ hai cho phép bạn chuyển đổi giữa các chế độ xem: Code (chỉ hiển thị văn bản mã), Preview (chỉ hiển thị hình ảnh biểu đồ mà mã của bạn tạo ra), và Split (hiển thị cả mã và bản xem trước cùng lúc). Chế độ Split là lựa chọn tốt nhất để bạn có thể vừa viết mã vừa theo dõi kết quả một cách trực quan.
Viết cú pháp Mermaid cơ bản cho Flowchart
Cú pháp để tạo flowchart sẽ phụ thuộc hoàn toàn vào loại biểu đồ bạn muốn tạo. Bạn có thể tham khảo tài liệu chính thức của Mermaid.js để biết đầy đủ cú pháp. Dưới đây là cách để tạo một cấu trúc đơn giản với ý tưởng chính ở trên cùng, năm danh mục con phân nhánh từ ý tưởng đó, và sau đó là nhiều danh mục nhỏ hơn nữa phân nhánh từ các danh mục con đó.
Dòng đầu tiên của cú pháp sẽ là loại biểu đồ bạn muốn tạo, ví dụ: “flowchart”, tiếp theo là một thẻ để chỉ định hướng của dòng chảy — TD (top-down, từ trên xuống dưới) hoặc LR (left-right, từ trái sang phải).
Dòng tiếp theo là nơi bạn bắt đầu xây dựng biểu đồ của mình. Mỗi node (hay còn gọi là “bong bóng”) của flowchart cần có một ID duy nhất, theo sau là tên của node trong dấu ngoặc đơn. Ví dụ, node trên cùng của tôi là “Quy trình Phát triển Phần mềm”, tôi đã gán ID là “P”.
Mục đích của ID là để tham chiếu nhanh chóng đến node đó mà không cần gõ đầy đủ tên của nó. Ví dụ, nếu tôi muốn nhiều node phân nhánh từ node “P”, tôi sẽ thêm “P” vào một dòng mới, theo sau là các dấu gạch ngang --- hoạt động như đường kết nối, và theo sau là các khối mới của tôi được phân tách bằng dấu &.
Bạn có thể sao chép mã này và điền thông tin chi tiết của riêng bạn nếu bạn muốn một cấu trúc tương tự:
flowchart TD
A(Ý tưởng chính) --> B(Danh mục 1) & C(Danh mục 2) & D(Danh mục 3) & E(Danh mục 4) & F(Danh mục 5)
B --- G(Mục con 1.1) & H(Mục con 1.2) & I(Mục con 1.3)
C --- J(Mục con 2.1) & K(Mục con 2.2) & L(Mục con 2.3)
D --- M(Mục con 3.1) & N(Mục con 3.2) & O(Mục con 3.3)
E --- P(Mục con 4.1) & Q(Mục con 4.2) & R(Mục con 4.3)
F --- S(Mục con 5.1) & T(Mục con 5.2) & V(Mục con 5.3)Tùy chỉnh nâng cao cú pháp Mermaid để tăng tính thẩm mỹ
Mermaid cho phép bạn tùy chỉnh mã của mình ngoài các node và đường nối cơ bản. Ví dụ, bạn có thể thêm các bình luận giữa các đường kết nối, thay đổi hình dạng hoặc màu sắc của node, và thay đổi kiểu đường nối. Dưới đây là một vài tùy chỉnh phổ biến để làm cho biểu đồ của bạn trở nên sinh động và dễ hiểu hơn.
Đầu tiên, để thêm bình luận trên các đường nối, bạn chỉ cần chèn hai dấu gạch đứng || sau mũi tên và bao gồm văn bản bạn muốn hiển thị giữa chúng. Ví dụ:
A(Chủ đề chính) --> |Ghi chú quan trọng| B(Danh mục)Tiếp theo, bạn có thể thay đổi một số mũi tên thành dấu chấm hoặc dấu chéo, hoặc làm cho một số đường nối trở nên đậm hơn, giúp nhấn mạnh các mối quan hệ khác nhau giữa các node:
B --o G(Mục) & H(Mục) & I(Mục)
C --x J(Mục) & K(Mục) & L(Mục)
D ==== M(Mục) & N(Mục) & O(Mục)Bạn có thể thử nghiệm với các tùy chỉnh này cho đến khi bạn hài lòng với bố cục và hình thức của biểu đồ dòng chảy của mình. Thay đổi cuối cùng để tăng tính trực quan là đổi màu sắc của các node. Trên một dòng riêng biệt, bạn thêm đoạn mã “classDef” để định nghĩa màu sắc, sau đó viết tên màu (hoặc sử dụng mã hex cụ thể). Khi đã định nghĩa xong, bạn thêm nó vào các node liên quan bằng cú pháp ba dấu hai chấm :::.
Dưới đây là ví dụ về cách định nghĩa và áp dụng màu xanh lá cây cho một node:
classDef green fill:green
A(Chủ đề chính):::green --> B(Danh mục)Bạn có thể thay đổi “green” thành bất kỳ màu nào khác hoặc mã hex mà bạn muốn.
Thử nghiệm tạo Mind Map với Mermaid trong Notion
Tại thời điểm bài viết này được thực hiện, Mermaid.js chưa hỗ trợ đầy đủ cú pháp “mindmap” trong Notion. Điều này có nghĩa là một số tính năng như classDef (định nghĩa màu sắc) và kiểu mũi tên không tương thích hoàn toàn. Tuy nhiên, nó vẫn cho phép bạn xây dựng một sơ đồ tư duy rất đơn giản với các node bằng cách sử dụng dấu ngoặc đơn và khoảng trắng.
Bạn sẽ bắt đầu với ý tưởng trung tâm được đặt trong dấu ngoặc kép ((center idea)), và tiếp tục mở rộng bằng cách sử dụng một dòng mới cho mỗi kết nối mới trong dấu ngoặc đơn (branch). Bạn có thể sao chép mã này và điền văn bản của riêng bạn để tạo một sơ đồ tư duy tương tự:
mindmap
root((Ý tưởng Trung tâm))
(Nhánh 1)
(Mục con 1.1)
(Mục con 1.2)
(Mục con 1.3)
(Nhánh 2)
(Mục con 2.1)
(Mục con 2.2)
(Mục con 2.3)Bạn có thể tiếp tục mở rộng sơ đồ tư duy của mình lớn đến mức cần thiết. Hãy lưu ý rằng cú pháp mindmap rất nhạy cảm với khoảng trắng. Một khoảng trắng sai vị trí có thể làm hỏng toàn bộ sơ đồ. Hãy sử dụng hai khoảng trắng cho mỗi cấp độ và duy trì sự nhất quán. Ví dụ, hai khoảng trắng trước mỗi “nhánh” và bốn khoảng trắng trước mỗi “mục con”.
Notion: Hơn cả một ứng dụng ghi chú thông thường
Ban đầu, Notion được biết đến chủ yếu như một công cụ ghi chú và quản lý danh sách mạnh mẽ. Tuy nhiên, nhờ vào sự tích hợp của Mermaid.js, Notion đã vượt xa vai trò đó để trở thành một công cụ trực quan hóa mạnh mẽ, giúp nâng cao năng suất làm việc. Việc tạo mã cho các node và kết nối cần thiết không hề phức tạp — chỉ cần bám sát tài liệu hướng dẫn (hoặc các đoạn mã mẫu trong bài viết này, vốn đã được đơn giản hóa), bạn sẽ nhanh chóng có được một cái nhìn tổng quan trực quan và mạch lạc về các dự án hoặc ý tưởng của mình. Đừng ngần ngại thử nghiệm tính năng này để khám phá tiềm năng thực sự của Notion trong việc biến ý tưởng thành hình ảnh một cách dễ dàng và hiệu quả.
