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