Là một người có xu hướng tư duy trực quan, tôi thường tìm đến các công cụ như sơ đồ tư duy (mind map) và biểu đồ luồng (flowchart) mỗi khi động não ý tưởng hay 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ụ tạo sơ đồ tư duy 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 nó chính xác là thứ tôi cần – một công cụ tối giản và nhanh chóng để kiến tạo flowchart và mind map.
Mermaid.js là tính năng ẩn mạnh mẽ giúp trực quan hóa dữ liệu trong các ứng dụng ghi chú như Notion và Obsidian
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 ứng dụng vào mọi khía cạnh của công việc hay đời sống cá nhân. Tuy nhiên, một điểm yếu cố hữu của Notion là thiếu công cụ tích hợp sẵn để tạo flowchart hoặc mind map. 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 (databases) của Notion, nhưng phương pháp này thường không lý tưởng và khá cồng kềnh.
Đây chính là lúc Mermaid.js phát huy vai trò của mình. Điều tôi yêu thích nhất ở công cụ này là sự dễ dàng trong việc sử dụng. Bản thân tôi không phải là một lập trình viên chuyên nghiệp, nhưng cú pháp của Mermaid.js vô cùng đơn giản và dễ hiểu. Thậm chí, Notion còn giúp trải nghiệm này trở nên thuận tiện hơn bằng cách cho phép bạn xem bản xem trước trực tiếp của biểu đồ được tạo ra từ code ngay khi bạn gõ. Dưới đây là cách tôi sử dụng nó để xây dựng flowchart và mind map trong Notion.
Ai cũng có thể viết code Mermaid
Sơ đồ flowchart hoàn chỉnh được tạo bằng cú pháp Mermaid.js trong Notion, minh họa khả năng trực quan hóa ý tưởng
Hướng dẫn thêm khối Code Mermaid vào Notion
Để bắt đầu tạo sơ đồ với Mermaid.js, việc đầu tiên bạn cần làm là thêm một khối code (code block) chuyên dụng.
Khởi tạo khối code để bắt đầu viết cú pháp Mermaid
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 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ở một khối code, nơi bạn sẽ bắt đầu tạo biểu đồ của mình bằng cách viết cú pháp 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ỏ. Menu đầu tiên là language (ngôn ngữ), mặc định sẽ được đặt là Mermaid. Menu thứ hai cho phép bạn chuyển đổi giữa các chế độ xem: Code (chỉ hiển thị văn bản code), Preview (chỉ hiển thị hình ảnh biểu đồ mà code của bạn tạo ra), và Split (hiển thị cả code và bản xem trước đồng thời). Chế độ Split đặc biệt hữu ích khi bạn đang làm việc, giúp bạn điều chỉnh code và xem kết quả ngay lập tức.
Giao diện Notion cho phép thiết lập Wiki nội bộ để quản lý dự án hiệu quả
Hướng dẫn viết cú pháp Mermaid cơ bản
Cách viết cú pháp Mermaid sẽ hoàn toàn phụ thuộc vào loại flowchart mà bạn muốn tạo. Để có cái nhìn đầy đủ về cú pháp chi tiết, bạn có thể tham khảo tài liệu chính thức của Mermaid. Trong ví dụ của tôi, tôi muốn có 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à nhiều danh mục nhỏ hơn phân nhánh từ các danh mục phụ.
Bắt đầu với sơ đồ flowchart đơn giản
Dòng đầu tiên của code sẽ chỉ định loại biểu đồ bạn muốn tạo, ví dụ “flowchart”, tiếp theo là một thẻ để chỉ hướng của luồng – TD cho từ trên xuống (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 cấu trúc biểu đồ của mình. Mỗi nút (node) hoặc “bong bóng” của flowchart cần một ID riêng, theo sau là tên của nút đó trong dấu ngoặc vuông. Ví dụ, nút trên cùng của tôi là “How to Process Anxiety”, mà tôi gán ID là “P”.
Mục đích của ID là để bạn có thể tham chiếu nhanh đến nút đó mà không cần gõ đầy đủ tên của nó. Ví dụ, nếu tôi muốn nhiều nút phân nhánh từ nút P, tôi sẽ thêm “P” trên một dòng mới, theo sau là các dấu gạch ngang (—) đóng vai trò là đường kết nối, và cuối cùng là các khối mới của tôi được phân cách bằng ký tự “&”.
Bạn có thể sao chép đoạn code mẫu dưới đây và điền thông tin chi tiết của riêng mình nếu bạn muốn một cấu trúc tương tự:
flowchart TD
A(main topic) --> B(category) & C(category) & D(category) & E(category) & F(category)
B --- G(item) & H(item) & I(item)
C --- J(item) & K(item) & L(item)
D --- M(item) & N(item) & O(item)
E --- P(item) & Q(item) & R(item)
F --- S(item) & T(item) & V(item)
Minh họa sơ đồ tư duy (mind map) giúp sắp xếp ý tưởng và thông tin một cách trực quan
Tùy chỉnh và tinh chỉnh cú pháp Mermaid
Mermaid cho phép bạn tùy chỉnh code sâu hơn ngoài các nút 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 nút, và thậm chí thay đổi kiểu đườ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.
Cá nhân hóa sơ đồ flowchart của bạn
Đầu tiên, tôi muốn thêm một vài 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 đứng (|) sau mũi tên và đưa văn bản tôi muốn hiển thị vào giữa chúng. Nó sẽ trông giống như thế này:
A(main topic) --> |comment| B(category)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 đậm một số đường nối. Cú pháp sẽ như sau:
B --o G(item) & H(item) & I(item)
C --x J(item) & K(item) & L(item)
D ==== M(item) & N(item) & O(item)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 flowchart. Thay đổi cuối cùng mà 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, tôi thêm đoạn “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 được định nghĩa, tôi áp dụng nó cho các nút có liên quan bằng cú pháp ba dấu hai chấm (:::).
Dưới đây là ví dụ về màu tôi đã sử dụng, nhưng bạn có thể điền vào với màu sắc hoặc mã hex bạn muốn:
classDef green fill:green
A(main topic):::green --> B(category)
So sánh các công cụ vẽ biểu đồ mã nguồn mở có thể thay thế Microsoft Visio
Thử nghiệm tạo Mind Map với Mermaid.js trong Notion
Hiện tại, khi bài viết này được thực hiện, Mermaid.js 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à các 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 nút 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.
Ưu và nhược điểm khi tạo Mind Map
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 (branch1). Bạn có thể sao chép đoạn code này và điền văn bản của riêng mình để tạo một sơ đồ tư duy tương tự:
mindmap
root((center idea))
(branch1)
(sub1)
(sub2)
(sub3)
(branch2)
(sub1)
(sub2)
(sub3)Bạn có thể tiếp tục mở rộng sơ đồ tư duy của mình lớn đến mức cần thiết. 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ỗi nhỏ trong việc đặt dấu cách 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ì tính nhất quán. Ví dụ, hai khoảng trắng trước mỗi “branch” và bốn khoảng trắng trước mỗi “sub”.
Giao diện ứng dụng lý tưởng để xây dựng cơ sở kiến thức trực quan và quản lý thông tin hiệu quả
Notion không chỉ là ứng dụng ghi chú
Ban đầu, tôi chủ yếu sử dụng Notion để quản lý các danh sách công việc. Nhưng nhờ có Mermaid.js, Notion đã trở thành một công cụ trực quan mạnh mẽ giúp tăng cường năng suất. Việc tạo code cho các nút và kết nối mà 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 code đơn giản hóa của tôi), và bạn sẽ nhanh chóng có được một cái nhìn trực quan, liền mạch về các dự án của mình. Hãy thử nghiệm ngay Mermaid.js trong Notion để khám phá tiềm năng sáng tạo và quản lý công việc hiệu quả hơn!
