Với vai trò là một người làm việc với các ý tưởng và dự án, tôi thường tìm đến bản đồ tư duy (mind map) và lưu đồ (flowchart) để sắp xếp và trực quan hóa mọi suy nghĩ. Chúng giúp tôi có cái nhìn tổng quan toàn diện về các ý tưởng và thông tin đã thu thập được. Mặc dù Notion không phải là một công cụ bản đồ tư duy hay lưu đồ chuyên dụng, tôi đã khám phá ra một “viên ngọc ẩn” thực sự hữu ích: Mermaid.js. Đây là một công cụ vẽ biểu đồ dựa trên văn bản, hoạt động hoàn hảo ngay trong các khối mã (code block) của Notion. Nó thực sự là thứ tôi cần – một công cụ tối giản và nhanh chóng để tạo ra lưu đồ và sơ đồ tư duy một cách hiệu quả.
Tại sao Mermaid.js là lựa chọn lý tưởng để vẽ sơ đồ trong Notion?
Đơn giản hóa việc tạo sơ đồ mà không cần biết code
Notion là một ứng dụng vô cùng linh hoạt, có thể được tận dụng cho mọi khía cạnh trong công việc và cuộc sống cá nhân của bạn. Tuy nhiên, một điểm hạn chế của Notion là không có công cụ tạo lưu đồ hay sơ đồ tư duy tích hợp sẵn. Bạn có thể thử mô phỏng chúng bằng cách sử dụng các cơ sở dữ liệu, nhưng điều đó không thực sự tối ưu.
Đây chính là lúc Mermaid.js phát huy tác dụng. Điều tôi yêu thích nhất ở nó là sự dễ dàng trong việc sử dụng. Bản thân tôi không biết lập trình, nhưng cú pháp của Mermaid.js lại cực kỳ đơn giản. Hơn nữa, Notion còn giúp việc này trở nên dễ dàng hơn khi cho phép bạn xem trước trực tiếp “hình ảnh” mà đoạn mã của bạn tạo ra ngay khi bạn đang viết. Dưới đây là cách tôi sử dụng nó để xây dựng các lưu đồ và sơ đồ tư duy.
Lưu đồ hoàn chỉnh được tạo bằng Mermaid.js trong Notion
Hướng dẫn từng bước thêm khối mã Mermaid vào Notion
Khởi tạo khối mã Mermaid để bắt đầu vẽ biểu đồ
Để bắt đầu, tôi mở một trang Notion trống. Để chèn một biểu đồ Mermaid, tôi nhấn phím dấu gạch chéo (/), gõ “code” và chọn Code – Mermaid từ danh sách thả xuống. Thao tác này sẽ mở ra một khối mã, nơi bạn sẽ tạo 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ỏ. Đầu tiên là ngôn ngữ của mã, thường đã được đặt mặc định là Mermaid. Menu thứ hai cho phép bạn chuyển đổi giữa các chế độ 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 mà mã của bạn tạo ra, còn “Split” hiển thị cả hai chế độ cùng lúc.
Viết cú pháp Mermaid để tạo lưu đồ (Flowchart) hiệu quả
Xây dựng cấu trúc lưu đồ cơ bản với ID và kết nối
Việc này 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 để biết đầy đủ cú pháp. Trong trường hợp của tôi, tôi muốn ý tưởng chính nằm ở 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 nữa phân nhánh từ các danh mục phụ này.
Dòng đầu tiên sẽ là loại biểu đồ bạn muốn, ví dụ “flowchart”, tiếp theo là một thẻ để chỉ hướng của luồng – 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 biểu đồ của mình. Mỗi node (hay “ô”) nhỏ của lưu đồ cần một ID, theo sau là tên của node trong dấu ngoặc đơn. Node trên cùng của tôi là “How to Process Anxiety” (Cách xử lý lo âu), và tôi đã gán ID là “P” cho nó.
Mục đích của ID là để tham chiếu nhanh đế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 của mình, 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 nối, và 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 đoạn mã này và điền thông tin của riêng mình nếu muốn cấu trúc tương tự như ví dụ của tôi:
flowchart TD
A(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) & H(mục) & I(mục)
C --- J(mục) & K(mục) & L(mục)
D --- M(mục) & N(mục) & O(mục)
E --- P(mục) & Q(mục) & R(mục)
F --- S(mục) & T(mục) & V(mục)Tùy biến và nâng cao lưu đồ của bạn với Mermaid.js
Thêm chú thích vào các đường nối để làm rõ nội dung
Mermaid cho phép bạn tùy chỉnh mã biểu đồ của mình không chỉ dừng lại ở các node và đường nối. Ví dụ, nó cho phép bạn thêm chú thích giữa các đường 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. Tôi sẽ thêm một vài tùy chỉnh này vào đoạn mã của mình.
Đầu tiên là thêm một vài chú thích trên các đường nối của tôi. Tất cả những gì tôi làm là 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 giống như thế này:
A(chủ đề chính) --> |bình luận| B(danh mục)Biến hóa kiểu đường nối và màu sắc của các node
Tôi cũng muốn thay đổi một số mũi tên thành dấu chấm và dấu gạch chéo, cũng như làm một số đường nối đậm hơn, trông như sau:
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à giao diện của lưu đồ của mình. Thay đổi cuối cùng tôi muốn thực hiện là thay đổi màu sắc của các node. 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 thêm nó vào các node có 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 vào các màu hoặc mã hex mà bạn muốn:
classDef green fill:green
A(chủ đề chính):::green --> B(danh mục)Khám phá tiềm năng tạo sơ đồ tư duy (Mind Map) trong Notion
Tạo sơ đồ tư duy đơn giản dù có một số hạn chế
Tại thời điểm viết bài này, Mermaid chưa hoàn toàn hỗ trợ cú pháp “mindmap” đầy đủ trong Notion. Nó không tương thích với các tính năng như classDef và kiểu mũi tê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 và khoảng trắng, và đó là những gì tôi đã thực hiện.
Tôi bắt đầu với ý tưởng trung tâm trong dấu ngoặc kép 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. Bạn có thể sao chép đoạn mã này và điền văn bản của riêng mình để tạo một sơ đồ tương tự như của tôi:
mindmap
root((ý tưởng trung tâm))
(nhánh 1)
(mục con 1)
(mục con 2)
(mục con 3)
(nhánh 2)
(mục con 1)
(mục con 2)
(mục con 3)Và tiếp tục mở rộng nó cho đến khi sơ đồ tư duy của bạn đạt được kích thước cần thiết. Lưu ý rằng cú pháp mindmap rất nhạy cảm với khoảng trắng, vì vậy chỉ một vị trí khoảng trắng sai cũng 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 không chỉ đơn thuần là một ứng dụng ghi chú. Nhờ có Mermaid.js, nó còn trở thành một công cụ trực quan mạnh mẽ để tăng cường năng suất. Việc tạo mã cho các node 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 đoạn mã rút gọn của tôi), và bạn sẽ có một cái nhìn tổng quan trực quan, mạch lạc về các dự án của mình trong tích tắc.
