Là một người luôn tư duy bằng hình ảnh, tôi thường tìm đến bản đồ tư duy (mind map) và lưu đồ (flowchart) khi lên ý tưởng hoặc lập kế hoạch dự án. Chúng giúp tôi có cái nhìn tổng quan về tất cả suy nghĩ và những thông tin đã thu thập. Mặc dù Notion không phải là một công cụ tạo mind map hay flowchart chuyên dụng, tôi đã khám phá ra một “viên ngọc ẩn” mang tên Mermaid.js. Đây là một công cụ tạo biểu đồ dựa trên văn bản, hoạt động hoàn hảo trong các khối code của Notion. Và hóa ra, đây chính xác là những gì tôi cần — một công cụ tối giản và nhanh chóng để tạo lưu đồ và bản đồ tư duy.
Tại sao nên sử dụng Mermaid.js trong Notion?
Notion nổi tiếng với tính linh hoạt vượt trội, cho phép người dùng tùy chỉnh cho mọi khía cạnh công việc hoặc cuộc sống cá nhân. Tuy nhiên, một điểm hạn chế của Notion là không tích hợp sẵn công cụ tạo lưu đồ hay bản đồ tư duy. Mặc dù bạn có thể cố gắng mô phỏng chúng bằng cách sử dụng các cơ sở dữ liệu, nhưng trải nghiệm đó 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 ở công cụ này là sự dễ dàng khi sử dụng. Dù không phải là một lập trình viên, nhưng cú pháp Mermaid vô cùng đơn giản và dễ hiểu. Hơn nữa, Notion còn cho phép bạn xem trước trực tiếp hình ảnh biểu đồ được tạo ra từ code ngay khi bạn đang viết, giúp quá trình chỉnh sửa trở nên thuận tiện hơn bao giờ hết. Sau đây là cách tôi sử dụng Mermaid.js để xây dựng lưu đồ và bản đồ tư duy trong Notion.
Lưu đồ hoàn chỉnh được tạo bằng Mermaid.js trong Notion
Cách thêm khối code Mermaid.js vào Notion
Để bắt đầu tạo sơ đồ với Mermaid.js, bước đầu tiên là chèn một khối code chuyên dụng. Tôi thường bắt đầu với một trang trắng trong Notion. Để chèn biểu đồ 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 code, nơi bạn sẽ nhập cú pháp để tạo biểu đồ của mình.
Ở phía trên của khối code, bạn sẽ thấy hai menu thả xuống nhỏ. Menu đầu tiên là ngôn ngữ code, vốn đã được đặt mặc định là Mermaid. Menu thứ hai cho phép bạn chuyển đổi giữa Code, Preview và Split. Chế độ Code chỉ hiển thị văn bản code của bạn, Preview chỉ hiển thị hình ảnh biểu đồ mà code tạo ra, còn Split sẽ hiển thị cả hai cùng lúc, giúp bạn dễ dàng theo dõi quá trình xây dựng biểu đồ.
Hướng dẫn viết cú pháp Mermaid.js cơ bản
Cách 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 để biết toàn bộ cú pháp chi tiết. Với mục đích đơn giản, tôi muốn một ý 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à một số 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 của cú pháp 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 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 biểu đồ của mình. Mỗi node (hoặc “bong bóng”) của lưu đồ cần một ID duy nhất, theo sau là tên của node đó trong dấu ngoặc vuông. Ví dụ, node trên cùng của tôi là “Cách xử lý lo âu”, và tôi gán cho nó ID là “P”.
Mục đích của ID là để tham chiếu nhanh đến node đó mà không cần phải gõ toàn bộ tê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à 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 code này và điền thông tin chi tiết của riêng bạn nếu muốn 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) & 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)
Mermaid.js – tính năng tạo biểu đồ mạnh mẽ trong ứng dụng năng suất
Tùy chỉnh biểu đồ với cú pháp nâng cao
Mermaid cho phép bạn tùy chỉnh code vượt ra ngoài các node và đường nối cơ bản. Ví dụ, bạn có thể thêm chú thích 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 loại đường nối. Tôi sẽ thêm một vài tùy chỉnh này vào code của mình.
Đầu tiên, để thêm chú thích trên các đường kết nố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)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, và làm cho một số đường nét đậm hơn, trông sẽ như thế này:
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 những 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 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 node. Trên một dòng riêng, tôi thêm đoạn classDef để định nghĩa màu sắc, sau đó viết màu (bạn cũng có thể sử dụng mã hex cụ thể). Sau khi đã định nghĩa xong, tôi 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à 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)Thử tạo biểu đồ tư duy (Mind Map) với Mermaid.js
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 và kiểu mũi tên. Tuy nhiên, bạn vẫn có thể xây dựng một bản đồ tư duy rất đơn giản với các node bằng cách sử dụng dấu ngoặc vuông 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 (( )) 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 code này và điền văn bản của riêng bạn để có một sơ đồ tương tự như của tôi:
mindmap root((ý tưởng trung tâm)) (nhánh1) (phụ1) (phụ2) (phụ3) (nhánh2) (phụ1) (phụ2) (phụ3)Và tiếp tục mở rộng tùy theo độ lớn của bản đồ tư duy mà bạn cần. Lưu ý rằng cú pháp mindmap 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à giữ 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 “phụ”.
Ví dụ về biểu đồ tư duy (mind map) giúp sắp xếp ý tưởng
Notion không chỉ đơn thuần là một ứng dụng ghi chú. Tôi chủ yếu sử dụng Notion để theo dõi mọi thứ bằng các danh sách, nhưng nhờ có Mermaid.js, nó cũng đã trở thành một công cụ năng suất trực quan mạnh mẽ. Việc tạo code cho các node và kết nối bạn cần không hề khó – chỉ cần tuân thủ tài liệu hướng dẫn (hoặc các đoạn code đơn giản hóa của tôi), và bạn sẽ nhanh chóng có được cái nhìn tổng quan trực quan và liền mạch về các dự án của mình.