Sơ đồ Mermaid từ các agent của bạn,
được vẽ ra, không in thành code
Nhờ Claude Code hoặc Codex vẽ một sơ đồ và nó sẽ viết Mermaid: một khối văn bản mà terminal chỉ in ra được. AgentsRoom vẽ nó ở bất cứ đâu bạn đọc những gì agent viết, và giữ code chỉ cách một cú nhấp.
Chế độ xem hội thoại, tệp Markdown, kế hoạch trong Duyệt kế hoạch, ghi chú, Project Memory và ticket backlog: mọi khối code mermaid đều thành sơ đồ, theo giao diện sáng hoặc tối của ứng dụng, trên macOS, Windows và Linux. Không cần cài gì, không skill, không server MCP.
```mermaid
flowchart LR
A[Login] --> B{Token valid?}
B -->|yes| C[Dashboard]
B -->|no| A
```Cùng một khối mermaid, khi terminal in ra và khi AgentsRoom vẽ ra.
Hỏi Claude Code một request đi qua ứng dụng của bạn thế nào, hoặc nhờ Codex phác thảo các bảng của một migration, và bạn thường nhận được một khối code bắt đầu bằng mermaid: một lưu đồ, một sơ đồ tuần tự hoặc một sơ đồ thực thể-quan hệ, viết dưới dạng văn bản. Terminal chỉ in được nó ra, nên bạn đọc những mũi tên làm từ dấu gạch và tự vẽ các hộp trong đầu.
AgentsRoom đọc cùng đoạn Markdown đó và vẽ nó ra. Khối code thành sơ đồ khi được cuộn vào màn hình, nút Hiện mã xuất hiện khi rê chuột sẽ đưa mã nguồn trở lại, và Hiện sơ đồ quay về bản vẽ. Nếu agent viết sai cú pháp, code vẫn ở trên màn hình với một dòng báo rằng không thể vẽ sơ đồ, nên bạn không bao giờ mất những gì nó đã viết.
Việc vẽ không phụ thuộc vào CLI: trình đọc Markdown của ứng dụng vẽ từ văn bản. Một sơ đồ trong README do Codex viết, trong kế hoạch do Claude Code viết hay trong ticket do bất kỳ agent nào khác viết đều được vẽ theo cùng một cách.
Điều gì thay đổi khi bạn đọc một agent
Một quy tắc ở mọi nơi ứng dụng hiển thị Markdown: khối mermaid được hiển thị thành sơ đồ.
Ở mọi nơi bạn đọc một agent
Chế độ xem hội thoại, tệp Markdown trong bản xem trước tệp và trong tab tệp, kế hoạch trong Duyệt kế hoạch, ghi chú, ghi chú của Project Memory, ticket backlog cùng bình luận của chúng, và câu trả lời của Hỏi bên lề.
Được vẽ ngay khi agent đang viết
Agent viết sơ đồ từng dòng một. AgentsRoom chờ văn bản đứng yên một lúc rồi mới vẽ, và trong lúc đó giữ sơ đồ hợp lệ gần nhất trên màn hình, nên khối không nhấp nháy qua lại giữa code và bản vẽ.
Mã nguồn chỉ cách một cú nhấp
Rê chuột lên sơ đồ và nhấn Hiện mã để đọc văn bản Mermaid tạo ra nó, rồi nhấn Hiện sơ đồ để quay lại. Mã nguồn không bao giờ bị thay thế, chỉ được hiển thị theo cách khác.
Sơ đồ lỗi vẫn đọc được
Khi Mermaid không phân tích được cú pháp của khối, code vẫn ở trên màn hình với một dòng bên dưới: Không thể vẽ sơ đồ này: mã của sơ đồ được hiển thị thay thế. Bạn có thể gửi nguyên trạng nó lại cho agent.
Mọi sơ đồ của Mermaid 11
Lưu đồ, sơ đồ tuần tự, sơ đồ lớp, sơ đồ trạng thái và sơ đồ thực thể-quan hệ, biểu đồ Gantt, sơ đồ tư duy, đồ thị git: Mermaid 11 vẽ được gì thì AgentsRoom vẽ được nấy.
Không vẽ gì ngoài màn hình
Một sơ đồ chỉ được dàn trang khi nó đến gần màn hình, từng cái một, và kết quả được giữ lại. Một cuộc hội thoại dài đầy sơ đồ không tốn gì cho những sơ đồ bạn chưa cuộn tới.
Cách sử dụng
Không cần bật gì. Bốn bước từ câu hỏi đến sơ đồ.
- 1
Yêu cầu một sơ đồ
Với bất kỳ agent nào, bằng lời đơn giản: vẽ luồng đăng nhập thành lưu đồ Mermaid, hoặc thể hiện lệnh gọi API này thành sơ đồ tuần tự. Thường chỉ cần nói Mermaid là agent sẽ trả lời bằng một khối mermaid.
- 2
Đọc nó trong Chế độ xem hội thoại
Chuyển khung của agent sang Chế độ xem hội thoại: khối xuất hiện thành sơ đồ trong câu trả lời của agent. Terminal bên dưới không đổi và vẫn hiển thị văn bản.
- 3
Hoặc mở tệp mà nó đã viết
Khi agent đặt sơ đồ vào một tệp Markdown (một README, một ghi chú kiến trúc, một kế hoạch), hãy mở nó từ liên kết tệp trong câu trả lời, từ tab Tệp của bảng bên phải hoặc bằng Tệp > Mở tệp (Cmd O trên macOS, Ctrl O trên Windows và Linux): bản xem trước và tab tệp vẽ mọi sơ đồ trong đó.
- 4
Kiểm tra mã nguồn
Rê chuột lên sơ đồ và nhấn Hiện mã để đọc hoặc sao chép văn bản Mermaid, rồi nhấn Hiện sơ đồ để quay lại bản vẽ.
Những gì terminal, GitHub và các skill Mermaid đã làm được
Claude Code và Codex CLI chạy trong terminal, và terminal in ra ký tự, không phải bản vẽ: một khối mermaid hiện ra dưới dạng mã nguồn. Đó không phải một thiết lập mà CLI còn thiếu, đó là bản chất của terminal.
Đó là lý do người ta tìm một skill, plugin hay server MCP Mermaid cho Claude Code. Chúng giúp agent viết sơ đồ hợp lệ hoặc xuất nó ra tệp ảnh. Để đọc sơ đồ, bạn vẫn phải dán code vào nơi nào đó vẽ được nó: GitHub vẽ các khối mermaid trong tệp Markdown và bình luận, mermaid.live vẽ mọi thứ bạn dán vào, và bản xem trước Markdown của trình soạn thảo làm được việc đó với một tiện ích mở rộng Mermaid.
AgentsRoom không thay thế các công cụ đó. Nó bỏ bước sao chép và dán khi đằng nào bạn cũng đang đọc agent: sơ đồ được vẽ trong cuộc hội thoại, trong kế hoạch hoặc trong tệp bạn đã mở sẵn bên cạnh agent.
Giới hạn
- Terminal thô của agent vẫn hiển thị mã nguồn: việc vẽ diễn ra trong Chế độ xem hội thoại và trong các trình đọc Markdown, không phải bên trong lưới ký tự của terminal.
- Chế độ xem hội thoại có cho các CLI mà AgentsRoom đọc được bản ghi hội thoại: Claude Code, Codex, Grok Build, Mistral Vibe, oh-my-pi, Pi và Antigravity CLI. Với các CLI khác, hãy mở tệp Markdown mà agent đã viết.
- Sơ đồ dùng các theme dark và neutral của Mermaid, khớp với giao diện sáng hoặc tối của ứng dụng. Chúng không lấy màu nhấn của bạn.
- Một liên kết trong sơ đồ chỉ mở địa chỉ http hoặc https, giống như liên kết Markdown. Liên kết tới tệp cục bộ không làm gì cả.
- Nhãn là văn bản thuần: HTML và script bên trong sơ đồ bị loại bỏ, và một dòng cấu hình viết trong sơ đồ không thể thay đổi điều đó.
- Không có nút xuất: để giữ sơ đồ thành tệp PNG hoặc SVG, hãy nhờ agent xuất nó bằng công cụ dòng lệnh của Mermaid.
Câu hỏi thường gặp
Claude Code có hiển thị được sơ đồ Mermaid không?
Không phải trong terminal. Claude Code viết sơ đồ Mermaid thành một khối code, và terminal chỉ in được nó ra dưới dạng văn bản. Chạy cùng agent đó trong AgentsRoom và chuyển khung của nó sang Chế độ xem hội thoại: khối được vẽ thành sơ đồ ngay trong câu trả lời, và nút Hiện mã đưa mã nguồn trở lại.
Làm sao xem trước một sơ đồ Mermaid mà agent đã viết trong tệp Markdown?
Mở tệp trong AgentsRoom: nhấp vào liên kết tệp trong câu trả lời của agent, chọn nó trong tab Tệp của bảng bên phải, hoặc dùng Tệp > Mở tệp (Cmd O trên macOS, Ctrl O trên Windows và Linux). Bản xem trước Markdown, và tab tệp nếu bạn mở nó thành tab, vẽ mọi khối mermaid của tệp.
Nó có hoạt động với Codex và các CLI agent khác không?
Có. Sơ đồ được trình đọc Markdown của ứng dụng vẽ từ văn bản, bất kể CLI nào viết ra, nên sơ đồ từ Codex, Claude Code hay bất kỳ agent nào khác đều được vẽ giống nhau trong tệp, kế hoạch, ghi chú và ticket. Chế độ xem hội thoại, nơi câu trả lời được vẽ ngay khi đến, hỗ trợ Claude Code, Codex, Grok Build, Mistral Vibe, oh-my-pi, Pi và Antigravity CLI.
Tôi có cần một skill Mermaid hay một server MCP không?
Không, nếu chỉ để đọc sơ đồ. Một skill hay server MCP có thể giúp agent viết Mermaid hợp lệ hoặc xuất nó ra ảnh. AgentsRoom chỉ vẽ những gì đã được viết, nên hai thứ bổ trợ nhau: skill làm sơ đồ tốt hơn, AgentsRoom hiển thị nó.
Những loại sơ đồ nào được vẽ, và nếu cú pháp sai thì sao?
Mọi thứ Mermaid 11 vẽ được: lưu đồ, sơ đồ tuần tự, sơ đồ lớp, sơ đồ trạng thái và sơ đồ thực thể-quan hệ, biểu đồ Gantt, sơ đồ tư duy, đồ thị git và phần còn lại trong danh mục của nó. Một khối mà Mermaid không phân tích được vẫn giữ nguyên là code, với một dòng bên dưới báo rằng không thể vẽ sơ đồ. Hãy nhờ agent sửa: khối đã sửa của nó sẽ được vẽ.
Bạn cũng có thể thích
Chế độ xem hội thoại
Giao diện chat cho Claude Code, Codex và năm CLI agent khác: phiên làm việc đọc từ bản ghi hội thoại của chính CLI, lệnh gọi công cụ được thu gọn, câu trả lời trực tiếp, trên desktop và điện thoại.
Duyệt kế hoạch
Agent của bạn đề xuất một kế hoạch: đọc nó như một tài liệu, bình luận, thay thế hoặc xóa bất kỳ đoạn nào, rồi phê duyệt hoặc gửi trả lại trong một tin nhắn. Mọi phiên bản đều được lưu.
Project Memory
Cung cấp cho các tác nhân lập trình AI của bạn một bộ nhớ lâu dài. Quyết định, kiến trúc và cạm bẫy tồn tại qua các phiên làm việc và được chia sẻ với tất cả mọi người trong dự án. Miễn phí, không giới hạn.
Hỏi bên lề
Hỏi một agent AI lập trình đang bận mà không làm gián đoạn nó. Một bản sao chỉ đọc của cuộc trò chuyện trả lời trong một bong bóng có tab, trong khi terminal của agent vẫn làm việc. Claude Code, Codex, Grok, GitHub Copilot CLI, OpenCode, Mistral Vibe, Antigravity CLI và Kimi Code, từ máy tính hoặc điện thoại của bạn.
Đọc sơ đồ của các agent dưới dạng sơ đồ
Tải AgentsRoom cho macOS, Windows hoặc Linux, nhờ một agent vẽ sơ đồ Mermaid và chuyển khung của nó sang Chế độ xem hội thoại.
Ứng dụng đồng hành: theo dõi agent khi đi đường
Sử dụng Claude, Codex, Antigravity CLI hoặc nhà cung cấp AI khác.
Gửi lỗi và yêu cầu thẳng vào backlog công khai của bạn.