Mermaid Diagrams

Mermaid Là Gì?

Mermaid là ngôn ngữ sơ đồ dựa trên text. Thay vì kéo shapes quanh công cụ trực quan, bạn viết mô tả ngắn về sơ đồ và Mermaid render nó thành graphic trực quan. Nó được thiết kế để sống cùng code — bên trong file Markdown, wikis, hoặc documentation — nên sơ đồ của bạn luôn được version-controlled và dễ cập nhật.

Mermaid hỗ trợ nhiều loại sơ đồ:

• Flowcharts — cây quyết định và quy trình
• Sequence diagrams — cách các hệ thống hoặc services gọi nhau theo thời gian
• Entity-relationship (ER) diagrams — database schemas
• Architecture diagrams — components và relationships của chúng
• Gantt charts — timelines và lịch trình project

Render Sơ Đồ Trực Tiếp

Mở bất kỳ file .md nào trong IDE Strip chứa khối code Mermaid. Khối Mermaid trông như thế này:

```mermaid graph TD A[User] --> B[API Gateway] B --> C[Auth Service] B --> D[User Service] D --> E[(Database)] ```

Khi IDE Strip phát hiện khối Mermaid, nó render panel sơ đồ trực quan cạnh nguồn. Bạn thấy cả hai cùng lúc: mô tả text bên trái và sơ đồ render bên phải. Chỉnh sửa text và sơ đồ cập nhật ngay lập tức — không cần bước lưu-và-reload.

Chỉnh Sửa Tương Tác

Đây là nơi hỗ trợ Mermaid của 1DevTool vượt xa renderer tiêu chuẩn. Bạn có thể kéo nodes trong sơ đồ trực quan, và source code tự động cập nhật để phản ánh layout mới. Điều này hoạt động hai chiều:

• Sửa text → sơ đồ cập nhật — thay đổi label hoặc thêm connection mới trong nguồn và xem sơ đồ vẽ lại.
• Kéo node → source cập nhật — di chuyển node trong sơ đồ trực quan và dữ liệu vị trí tương ứng trong source code điều chỉnh để khớp.

Bạn cũng có thể resize nodes và reconnect edges bằng cách kéo từ edge của node này sang node khác. Source luôn đồng bộ xuyên suốt.

Điều này làm cho Mermaid diagrams cảm giác ít giống trải nghiệm "viết nó và hy vọng tốt nhất" hơn nhiều. Bạn có thể lấy cấu trúc大致 đúng trong text, sau đó tinh chỉnh layout trực quan.

Dùng Với AI Agents

Một trong những kết hợp mạnh mẽ nhất trong 1DevTool là yêu cầu AI agent tạo Mermaid diagram và sau đó sắp xếp lại kết quả trực quan. Ví dụ, mở terminal Claude Code và yêu cầu:

"Tạo Mermaid diagram hiển thị cách các component chính trong codebase này tương tác với nhau."

Agent đọc codebase của bạn và viết file .md chứa Mermaid diagram. Mở file đó trong IDE Strip, và sơ đồ render trực quan. Nếu layout khó đọc, kéo nodes thành sắp xếp rõ ràng hơn. Source tự động cập nhật, nên bạn có thể commit sơ đồ đã cải thiện.

Điều này cũng hoạt động tốt cho database schemas, API call sequences, và sơ đồ deployment architecture.

Mẹo: Yêu cầu Claude Code: "Vẽ Mermaid diagram hiển thị cách các components trong repo này tương tác." Sau đó mở file .md được tạo để xem và sắp xếp lại sơ đồ trực quan.