Cách vẽ Sơ Đồ Tư Duy và Lưu Đồ Chuyên Nghiệp trong Notion với Mermaid.js

Table of Contents

Đối với những người thường xuyên làm việc với các ý tưởng, dự án, hay đơn giản là cần sắp xếp suy nghĩ, việc trực quan hóa thông tin qua sơ đồ tư duy (mind map) hoặc lưu đồ (flowchart) là vô cùng hữu ích. Mặc dù Notion là một ứng dụng đa năng và được nhiều người dùng ưa chuộng để quản lý công việc, ghi chú và tổ chức thông tin, nó lại không tích hợp sẵn công cụ vẽ biểu đồ chuyên dụng. Điều này đôi khi gây khó khăn cho người dùng muốn thể hiện các luồng công việc phức tạp hay cấu trúc ý tưởng một cách trực quan ngay trong không gian làm việc của mình. Tuy nhiên, một “viên ngọc ẩn” mang tên Mermaid.js đã xuất hiện và trở thành giải pháp lý tưởng. Mermaid.js 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, cho phép bạn nhanh chóng tạo ra các lưu đồ và sơ đồ tư duy một cách tối giản và hiệu quả.

Tại sao nên dùng Mermaid.js để vẽ sơ đồ trong Notion?

Notion nổi tiếng với khả năng tùy biến cao, cho phép bạn linh hoạt sử dụng cho 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, nền tảng này không có công cụ vẽ lưu đồ hoặc sơ đồ tư duy tích hợp sẵn. Mặc dù bạn có thể cố gắng mô phỏng chúng bằng cách tận dụng các tính năng cơ sở dữ liệu, nhưng trải nghiệm đó thường không lý tưởng và khá phức tạp. Đây chính là lúc Mermaid.js phát huy vai trò của mình.

Dễ dàng tiếp cận ngay cả khi không biết code

Điểm mạnh lớn nhất của Mermaid.js là sự đơn giản trong việc sử dụng. Ngay cả khi bạn không có kinh nghiệm về lập trình, cú pháp của Mermaid cũng cực kỳ dễ hiểu và dễ làm quen. Các câu lệnh được thiết kế trực quan, cho phép bạn mô tả các yếu tố của biểu đồ bằng văn bản thuần túy. Điều này biến việc tạo biểu đồ từ một tác vụ kỹ thuật thành một quá trình gần gũi và thân thiện hơn với người dùng phổ thông.

Tích hợp liền mạch trong Notion

Mermaid.js được tích hợp trực tiếp vào các khối code của Notion. Điều này có nghĩa là bạn không cần phải sử dụng thêm bất kỳ ứng dụng bên thứ ba nào hay thực hiện các thao tác xuất/nhập phức tạp. Mọi thứ diễn ra ngay trong môi trường Notion quen thuộc, giúp duy trì sự liền mạch trong quy trình làm việc và giữ tất cả thông tin liên quan tại một nơi duy nhất.

Xem trước trực tiếp tiện lợi

Một tính năng nổi bật giúp quá trình tạo biểu đồ trở nên dễ dàng hơn nữa là khả năng xem trước trực tiếp mà Notion cung cấp. Khi bạn gõ cú pháp Mermaid vào khối code, Notion sẽ hiển thị ngay hình ảnh biểu đồ mà đoạn mã đó tạo ra. Điều này cho phép bạn kiểm tra và điều chỉnh biểu đồ theo thời gian thực, giúp tiết kiệm thời gian và đảm bảo rằng biểu đồ cuối cùng trông chính xác như ý muốn.

Hướng dẫn từng bước thêm khối code Mermaid vào Notion

Việc bắt đầu sử dụng Mermaid.js trong Notion vô cùng đơn giản. Bạn chỉ cần thực hiện theo các bước sau để thêm khối code và bắt đầu tạo biểu đồ của mình:

Mở trang Notion mới hoặc trang hiện có: Hãy đảm bảo bạn đang ở trên trang Notion mà bạn muốn chèn biểu đồ.
Chèn khối code Mermaid:
- Gõ dấu gạch chéo / vào bất kỳ vị trí nào trên trang.
- Trong danh sách các khối (block) hiện ra, bắt đầu gõ “code”.
- Bạn sẽ thấy tùy chọn “Code – Mermaid” xuất hiện trong danh sách thả xuống. Chọn tùy chọn này.
- Một khối code sẽ được tạo ra, sẵn sàng cho bạn nhập cú pháp Mermaid.
Hiểu các tùy chọn hiển thị khối code:
- Ở 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ữ”, nó sẽ được tự động đặt là “Mermaid”.
- Menu thứ hai cho phép bạn chuyển đổi giữa các chế độ hiển thị:
  - Code: Chỉ hiển thị phần cú pháp văn bản bạn đã viết.
  - Preview: Chỉ hiển thị hình ảnh biểu đồ mà cú pháp của bạn tạo ra.
  - Split: Hiển thị cả phần cú pháp (ở một bên) và hình ảnh biểu đồ (ở bên còn lại), giúp bạn dễ dàng theo dõi quá trình tạo biểu đồ theo thời gian thực. Đây là chế độ khuyến nghị cho việc tạo và chỉnh sửa.

Viết cú pháp Mermaid để tạo lưu đồ (Flowchart)

Sau khi đã tạo khối code Mermaid, bạn có thể bắt đầu viết cú pháp để tạo lưu đồ. Cú pháp cơ bản của Mermaid rất trực quan. Dưới đây là cách tôi sử dụng nó để xây dựng một lưu đồ đơn giản:

Xác định loại biểu đồ và hướng dòng chảy:
- Dòng đầu tiên của cú pháp phải là loại biểu đồ bạn muốn tạo, ví dụ: flowchart.
- Tiếp theo là thẻ chỉ định hướng của dòng chảy:
  - TD: Top-Down (từ trên xuống dưới).
  - LR: Left-Right (từ trái sang phải).
- Ví dụ: flowchart TD sẽ tạo một lưu đồ chạy từ trên xuống.
Định nghĩa các nút (Node) trong lưu đồ:
- Mỗi “ô” hoặc “bong bóng” trong lưu đồ được gọi là một “nút” (node).
- Mỗi nút cần một ID duy nhất, theo sau là tên của nút đặt trong ngoặc đơn ().
- Ví dụ: A(Chủ đề chính) định nghĩa một nút có ID là A và tên hiển thị là “Chủ đề chính”. Việc sử dụng ID giúp bạn tham chiếu nhanh đến nút đó mà không cần gõ lại toàn bộ tên.
Tạo kết nối giữa các nút:
- Để tạo kết nối từ một nút này sang một nút khác, bạn sẽ sử dụng ID của nút nguồn, theo sau là dấu gạch ngang -- (hoặc các ký hiệu khác cho các kiểu đường kẻ khác nhau) và sau đó là ID hoặc định nghĩa của nút đích.
- Nếu bạn muốn nhiều nút nhánh ra từ một nút nguồn, bạn có thể thêm ID của nút nguồn trên một dòng mới, theo sau là các dấu gạch ngang --- (đại diện cho đường kết nối), và sau đó là các khối mới được phân tách bằng ký tự &.

Dưới đây là một ví dụ cú pháp đơn giản, bạn có thể sao chép và chỉnh sửa chi tiết để tạo cấu trúc tương tự:

flowchart TD
A(Chủ đề 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)

Cấu trúc trên tạo một lưu đồ từ trên xuống (TD) với một chủ đề chính (A) và năm danh mục con (B đến F) phân nhánh từ đó. Mỗi danh mục con lại có thêm ba mục nhỏ hơn phân nhánh tiếp. Việc đơn giản hóa cú pháp này giúp bạn nhanh chóng hình dung cấu trúc luồng công việc hoặc ý tưởng của mình.

Lưu đồ công việc hoàn chỉnh được tạo trong Notion bằng Mermaid.js

Tùy chỉnh lưu đồ của bạn với cú pháp nâng cao

Mermaid.js không chỉ dừng lại ở việc tạo các nút và đường kết nối cơ bản. Nó còn cho phép bạn tùy chỉnh biểu đồ để làm nổi bật các thông tin quan trọng hoặc tạo phong cách riêng. Để hiểu rõ hơn về các tùy chọn tùy chỉnh, bạn có thể tham khảo tài liệu chính thức của Mermaid. Dưới đây là một số tùy chỉnh phổ biến mà tôi thường sử dụng:

Thêm chú thích vào đường kết nối

Bạn có thể thêm các bình luận hoặc chú thích ngắn gọn trực tiếp lên các đường kết nối giữa các nút. Điều này giúp làm rõ mối quan hệ hoặc luồng logic giữa các bước. Để làm điều này, bạn chỉ cần chèn hai dấu gạch đứng || sau mũi tên và đặt văn bản chú thích của bạn vào giữa chúng.

Ví dụ:

A(Chủ đề chính) --> |Bình luận về kết nối| B(Danh mục)

Thay đổi kiểu mũi tên và đường kẻ

Mermaid cung cấp nhiều kiểu đường kẻ và mũi tên khác nhau để bạn biểu diễn các mối quan hệ đa dạng.

Thay đổi mũi tên thành dấu chấm tròn o hoặc dấu x: Sử dụng --o hoặc --x.
Làm đậm đường kẻ: Sử dụng ==== thay vì ---.

Ví dụ:

B --o G(Mục con 1.1) & H(Mục con 1.2) & I(Mục con 1.3)
C --x 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)

Bạn có thể thử nghiệm các kiểu này cho đến khi bạn hài lòng với cách bố cục và diện mạo của lưu đồ.

Thay đổi màu sắc và hình dạng của Node

Để làm cho các nút trong lưu đồ trở nên sinh động và dễ nhận biết hơn, bạn có thể tùy chỉnh màu sắc của chúng. Bạn sẽ sử dụng cú pháp classDef để định nghĩa một lớp màu, sau đó áp dụng lớp đó cho các nút mong muốn bằng cú pháp ba dấu hai chấm :::.

Ví dụ, để định nghĩa màu xanh lá cây và áp dụng nó cho một nút:

classDef green fill:#90EE90,stroke:#3CB371,stroke-width:2px;
A(Chủ đề chính):::green --> B(Danh mục)

Trong ví dụ trên, fill:#90EE90 là màu nền, stroke:#3CB371 là màu viền, và stroke-width:2px; là độ dày của viền. Bạn có thể thay thế green bằng bất kỳ tên lớp nào bạn muốn và #90EE90, #3CB371 bằng mã hex của màu sắc mong muốn.

Khám phá khả năng tạo sơ đồ tư duy (Mindmap) trong Notion

Tại thời điểm hiện tại, Mermaid.js chưa hỗ trợ đầy đủ cú pháp “mindmap” trong Notion với tất cả các tính năng nâng cao như classDef (đổi màu nút) hay arrow styles (kiểu mũi tên). Tuy nhiên, bạn vẫn có thể tạo một sơ đồ tư duy rất cơ bản và đơn giản bằng cách sử dụng cú pháp node và khoảng trắng.

Tôi bắt đầu với ý tưởng trung tâm được đặt 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 hoặc nhánh mới trong 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 để có một sơ đồ tư duy tương tự:

mindmap
  root((Ý tưởng trung tâm))
    (Nhánh 1)
      (Ý con 1.1)
      (Ý con 1.2)
      (Ý con 1.3)
    (Nhánh 2)
      (Ý con 2.1)
      (Ý con 2.2)
      (Ý con 2.3)

Bạn có thể tiếp tục mở rộng sơ đồ tư duy của mình lớn tùy thích. Điều quan trọng cần lưu ý là cú pháp mindmap trong Mermaid rất nhạy cảm với khoảng trắng. Một khoảng trắng đặt sai vị trí có thể làm hỏng toàn bộ cấu trúc. 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 “ý con”.

Kết luận

Notion không chỉ là một ứng dụng ghi chú hay quản lý dự án thông thường, mà nhờ sự hỗ trợ của Mermaid.js, nó còn có thể trở thành một công cụ trực quan mạnh mẽ giúp bạn tổ chức và trình bày ý tưởng. Với khả năng tạo lưu đồ và sơ đồ tư duy ngay trong các khối code, bạn có thể biến những luồng suy nghĩ phức tạp thành những biểu đồ rõ ràng, mạch lạc mà không cần phải rời khỏi không gian làm việc của mình.

Việc tạo mã cho các nút và kết nối bạn cần không hề khó. Chỉ cần bám sát tài liệu Mermaid chính thức hoặc tham khảo các ví dụ cú pháp đơn giản đã được đề cập trong bài viết này, bạn sẽ nhanh chóng có được cái nhìn tổng quan trực quan, dễ hiểu về các dự án và ý tưởng của mình. Hãy thử nghiệm Mermaid.js trong Notion ngay hôm nay để tối ưu hóa khả năng sáng tạo và năng suất của bạn!