Notion từ lâu đã khẳng định vị thế là một công cụ đa năng, hỗ trợ tối ưu hóa quy trình làm việc và quản lý thông tin cá nhân. Với khả năng tùy biến linh hoạt, Notion có thể trở thành trung tâm chỉ huy cho mọi dự án, từ ghi chú cá nhân, quản lý công việc đến xây dựng wiki nội bộ. Tuy nhiên, một điểm còn thiếu sót là Notion không tích hợp sẵn công cụ vẽ sơ đồ tư duy (mind map) hay lưu đồ (flowchart), điều mà nhiều người dùng tư duy hình ảnh thường tìm kiếm để trực quan hóa ý tưởng và kế hoạch. May mắn thay, một “viên ngọc ẩn” mang tên Mermaid.js đã xuất hiện, biến những khối mã đơn giản trong Notion thành các biểu đồ trực quan, mạch lạc và dễ hiểu.
Mermaid.js là một công cụ tạo biểu đồ dựa trên văn bản, cho phép bạn biến cú pháp đơn giản thành các sơ đồ phức tạp ngay trong các khối mã của Notion. Đối với những người như tôi, vốn quen với việc phác thảo ý tưởng bằng sơ đồ tư duy và lưu đồ, Mermaid.js chính là giải pháp lý tưởng. Nó cung cấp một phương pháp nhanh chóng, tối giản và hiệu quả để trực quan hóa mọi thứ, từ quá trình xử lý thông tin đến cấu trúc dự án.
Tại sao nên dùng Mermaid.js để trực quan hóa trong Notion?
Cú pháp dễ hiểu, ai cũng có thể viết code
Mặc dù Notion sở hữu tính linh hoạt đáng kinh ngạc và có thể được sử dụng cho mọi khía cạnh trong công việc lẫn đời sống cá nhân, nhưng việc thiếu đi một công cụ vẽ sơ đồ hay lưu đồ gốc là một hạn chế rõ ràng. Bạn có thể cố gắng tái tạo chúng bằng cách sử dụng các cơ sở dữ liệu (database) có sẵn, nhưng hiệu quả không cao và tốn thời gian.
Đây chính là lúc Mermaid.js phát huy tác dụng. Điều tuyệt vời nhất về Mermaid.js là sự dễ dàng trong việc sử dụng. Ngay cả khi bạn không phải là một lập trình viên chuyên nghiệp, cú pháp của Mermaid cũng vô cùng đơn giản và dễ hiểu. Hơn nữa, Notion còn hỗ trợ 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, giúp quá trình sáng tạo trở nên trực quan và nhanh chóng hơn bao giờ hết.
Minh họa Mermaid.js là tính năng ẩn hữu ích giúp trực quan hóa trong các ứng dụng như Notion.
Hướng dẫn thêm khối mã (code block) Mermaid vào Notion
Khởi tạo khối mã để bắt đầu viết cú pháp Mermaid
Để bắt đầu, hãy mở một trang Notion trống. Để chèn một sơ đồ Mermaid, bạn chỉ cần gõ dấu gạch chéo (/), sau đó nhập “code” và chọn Code – Mermaid từ danh sách thả xuống. Thao tác này sẽ mở một khối mã, nơi bạn sẽ bắt đầu xây dựng biểu đồ của mình bằng văn bản.
Ở 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ã (code language), thường đã được đặt mặc định là Mermaid. Menu thứ hai cho phép bạn chuyển đổi giữa ba chế độ hiển thị: Code, Preview và Split. Chế độ “Code” chỉ hiển thị văn bản mã của bạn; “Preview” chỉ hiển thị hình ảnh biểu đồ được tạo ra từ mã; và “Split” hiển thị cả hai cùng lúc, rất tiện lợi cho việc chỉnh sửa và theo dõi kết quả.
Giao diện Notion, nơi bạn sẽ thêm khối mã Mermaid để bắt đầu tạo sơ đồ.
Viết cú pháp Mermaid cho lưu đồ (Flowchart)
Bắt đầu với cấu trúc lưu đồ đơn giản
Việc viết cú pháp sẽ hoàn toàn phụ thuộc vào loại lư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 để có cái nhìn đầy đủ về cú pháp. Với mục đích minh họa, tôi sẽ tạo một lưu đồ có ý tưởng chính ở trên cùng, với năm danh mục phụ phân nhánh từ ý tưởng đó, và sau đó là nhiều danh mục nhỏ hơn phân nhánh từ các danh mục phụ này.
Dòng đầu tiên của mã sẽ là loại biểu đồ bạn muốn, ví dụ “flowchart”, tiếp theo là một thẻ để chỉ định hướng của dòng chảy — TD cho từ trên xuống dưới (Top-Down) hoặc LR cho từ trái sang phải (Left-Right). Dòng tiếp theo là nơi bạn sẽ bắt đầu viết sơ đồ của mình. Mỗi nút nhỏ (hoặc “bong bóng”) của lưu đồ cần một ID duy nhất, theo sau là tên của nút đó trong dấu ngoặc đơn. Ví dụ, nút cấp cao nhất của tôi là “How to Process Anxiety”, tôi gán cho nó ID là “P”.
Mục đích của ID là để tham chiếu nhanh đến nút đó mà không cần phải gõ lại toàn bộ tên của nó. Chẳng hạn, nếu tôi muốn nhiều nút phân nhánh từ nút 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à tiếp theo là các khối mới được phân tách bằng ký hiệu &.
Bạn có thể sao chép đoạn mã dưới đây và điền thông tin của riêng mình nếu muốn có một cấu trúc tương tự:
flowchart TDA(chủ đề chính) --> B(danh mục) & C(danh mục) & D(danh mục) & E(danh mục) & F(danh mục)B --- G(mục con) & H(mục con) & I(mục con)C --- J(mục con) & K(mục con) & L(mục con)D --- M(mục con) & N(mục con) & O(mục con)E --- P(mục con) & Q(mục con) & R(mục con)F --- S(mục con) & T(mục con) & V(mục con)
Minh họa các loại sơ đồ trực quan hóa, bao gồm sơ đồ tư duy, mà Mermaid.js có thể hỗ trợ.
Tùy chỉnh và nâng cao lưu đồ với cú pháp Mermaid
Cá nhân hóa lưu đồ của bạn
Mermaid cho phép bạn tùy chỉnh mã vượt ra ngoài các nút 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 nút, và thay đổi kiểu đường. Tôi sẽ thêm một vài tùy chỉnh này vào mã của mình.
Đầu tiên, để thêm một vài bình luận trên các đường kết nối, tôi chỉ cần chèn hai dấu gạch dọc sau mũi tên và bao gồm văn bản tôi muốn hiển thị giữa chúng. Nó sẽ trông như thế này:
A(chủ đề chính) --> |bình luận| B(danh mục)Tôi cũng muốn thay đổi một số mũi tên thành dấu chấm và dấu chéo, đồng thời làm cho một số đường nối đậm hơn. Cú pháp sẽ như sau:
B --o G(mục con) & H(mục con) & I(mục con)C --x J(mục con) & K(mục con) & L(mục con)D ==== M(mục con) & N(mục con) & O(mục con)Bạn có thể thử nghiệm với các tùy chỉnh này cho đến khi hài lòng với bố cục và giao diện của lưu đồ. Thay đổi cuối cùng tôi muốn thực hiện là màu sắc của các nút. Trên một dòng riêng biệt, tôi thêm đoạn mã “classDef” để định nghĩa màu sắc, sau đó viết tên màu (bạn cũng có thể sử dụng mã hex cụ thể). Sau khi đã định nghĩa, tôi áp dụng nó cho các nút liên quan bằng cú pháp ba dấu hai chấm.
Dưới đây là màu tôi đã sử dụng, nhưng bạn có thể điền màu hoặc mã hex bạn muốn:
classDef green fill:greenA(chủ đề chính):::green --> B(danh mục)
Sơ đồ ví dụ với các tùy chỉnh màu sắc và kiểu đường nối được áp dụng bằng cú pháp Mermaid.js.
Thử nghiệm tạo sơ đồ tư duy (Mind Map) bằng Mermaid trong Notion
Các hạn chế và cách thực hiện cơ bản
Tại thời điểm hiện tại, Mermaid chưa hỗ trợ đầy đủ cú pháp “mindmap” trong Notion. Nó không tương thích với các tính năng như classDef hay các kiểu mũi tên khác nhau. 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 nút bằng cách sử dụng dấu ngoặc đơn và khoảng trắng, và đó là những gì tôi đã làm.
Tôi bắt đầu với ý tưởng trung tâm 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 đoạn mã này và điền văn bản của riêng bạn để tạo ra một sơ đồ tương tự như của tôi:
mindmap
root((ý tưởng trung tâm))
(nhánh1)
(mục con1)
(mục con2)
(mục con3)
(nhánh2)
(mục con1)
(mục con2)
(mục con3)Và tiếp tục mở rộng nó tùy theo quy mô sơ đồ tư duy của bạn. Hãy nhớ rằng cú pháp sơ đồ tư duy rất nhạy cảm với khoảng trắng, vì vậy một lần đặt phím cách sai 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”.
Một ví dụ về sơ đồ tư duy đơn giản được tạo bằng Mermaid.js, thể hiện cấu trúc phân cấp.
Kết luận: Notion mạnh mẽ hơn với Mermaid.js
Ban đầu, tôi chủ yếu dùng Notion để theo dõi mọi thứ bằng danh sách, nhưng nhờ có Mermaid.js, nó đã trở thành một công cụ trực quan hóa năng suất thực sự mạnh mẽ. Việc tạo mã cho các nút và kết nối bạn cần không hề khó khăn — chỉ cần tuân thủ tài liệu hướng dẫn (hoặc các ví dụ mã đơn giản tôi đã cung cấp), và bạn sẽ nhanh chóng có được một cái nhìn tổng quan trực quan, sinh động về các dự án và ý tưởng của mình.
Hãy thử nghiệm ngay Mermaid.js trong Notion để khám phá tiềm năng trực quan hóa mà nó mang lại. Đừng quên chia sẻ những sơ đồ độc đáo của bạn hoặc những mẹo hữu ích khác trong phần bình luận bên dưới nhé!
