Tạo Lưu đồ từ Văn bản
Nhập cú pháp Mermaid và tạo ngay các lưu đồ, biểu đồ. Không sử dụng máy chủ — xử lý cục bộ 100%.
Lỗi Cú pháp
Bạn cũng có thể thích
Tổng quan
Trình tạo Lưu đồ từ Văn bản là một công cụ trình duyệt miễn phí, tự động tạo lưu đồ, biểu đồ tuần tự và nhiều loại biểu đồ khác từ văn bản thuần túy bằng cú pháp Mermaid.
Tất cả quá trình kết xuất đều được thực hiện cục bộ bằng Mermaid.js — không có dữ liệu nào bị gửi đến máy chủ bên ngoài, đảm bảo an toàn cho các quy trình làm việc và thiết kế hệ thống bảo mật.
Xuất biểu đồ của bạn dưới dạng SVG (vector) hoặc PNG (raster) ngay lập tức. Không cần cài đặt ứng dụng — chỉ cần mở trình duyệt và bắt đầu vẽ biểu đồ.
Cách sử dụng
Nhập mã của bạn
Nhập cú pháp Mermaid vào trình soạn thảo bên trái. Một biểu đồ mẫu đã được điền sẵn để giúp bạn bắt đầu nhanh chóng.
Xem trực tiếp
Bản xem trước ở bên phải tự động cập nhật theo thời gian thực. Nếu có lỗi cú pháp, một thông báo lỗi sẽ hiển thị để hỗ trợ.
Lưu dưới dạng SVG hoặc PNG
Nhấn "Lưu SVG" hoặc "Lưu PNG" để tải biểu đồ trực tiếp về thiết bị của bạn.
Thuật ngữ
- Mermaid.js
- Một thư viện JavaScript chuyên tạo biểu đồ từ cú pháp dạng văn bản. Được hỗ trợ chính thức trong GitHub Markdown.
- Lưu đồ (Flowchart)
- Biểu đồ thể hiện một quá trình hoặc quy trình làm việc. Được tạo trong Mermaid bằng
graph TD(trên-xuống) hoặcgraph LR(trái-phải). - SVG (Đồ họa Vector có thể Thu phóng)
- Định dạng hình ảnh vector độc lập với độ phân giải. SVG có thể được thu phóng đến bất kỳ kích thước nào mà không bị giảm chất lượng, lý tưởng cho thuyết trình và in ấn.
- Nút (Node)
- Mỗi thành phần trong một biểu đồ (hình chữ nhật, hình tròn, hình thoi, v.v.). Được định nghĩa trong Mermaid dưới dạng
A[Nhãn]. - Cạnh (Edge)
- Mũi tên hoặc đường nối giữa các nút. Được biểu thị bằng
-->(mũi tên) hoặc---(đường) trong Mermaid. - Biểu đồ Tuần tự (Sequence Diagram)
- Biểu đồ hiển thị các tương tác giữa các tác nhân theo thời gian. Được tạo bằng
sequenceDiagramtrong Mermaid.
FAQ
- Q.Tôi có thể sử dụng văn bản không phải tiếng Anh trong các nút (node) không?
- Có. Mermaid.js hỗ trợ Unicode, vì vậy bạn có thể sử dụng bất kỳ ngôn ngữ nào bao gồm tiếng Việt, tiếng Nhật hoặc tiếng Ả Rập bên trong các nút của mình.
- Q.Điều gì xảy ra nếu biểu đồ tràn ra ngoài khu vực xem trước?
- Khu vực xem trước hỗ trợ cuộn theo chiều ngang và chiều dọc. Bạn cũng có thể thử thay đổi hướng bố cục từ "graph TD" (trên-xuống) thành "graph LR" (trái-phải) để biểu đồ vừa vặn hơn.
- Q.Biểu đồ của tôi có bị gửi đến máy chủ không?
- Không. Toàn bộ quá trình kết xuất (rendering) diễn ra cục bộ trong trình duyệt của bạn bằng Mermaid.js. Nội dung biểu đồ không bao giờ bị truyền tới bất kỳ máy chủ bên ngoài nào.
- Q.Sự khác biệt giữa SVG và PNG là gì?
- SVG là định dạng vector có thể thay đổi kích thước mà không bị giảm chất lượng — lý tưởng cho bài thuyết trình, in ấn hoặc nhúng vào trang web. PNG là định dạng điểm ảnh (raster), thuận tiện khi bạn cần sao chép và dán hình ảnh trực tiếp.
- Q.Tôi có thể tạo các biểu đồ khác ngoài lưu đồ không?
- Có. Mermaid.js hỗ trợ biểu đồ tuần tự (sequenceDiagram), biểu đồ lớp (classDiagram), biểu đồ Gantt (gantt), và nhiều hơn nữa.
- Q.Tôi có thể lưu mã và quay lại sau không?
- Phiên bản hiện tại không lưu mã giữa các phiên làm việc. Để chỉnh sửa sau này, hãy sao chép mã Mermaid của bạn từ vùng nhập văn bản và lưu cục bộ.
Ứng dụng
Tài liệu thiết kế hệ thống
Lập tài liệu luồng gọi API hoặc lược đồ cơ sở dữ liệu bằng Mermaid và nhúng trực tiếp vào các tài liệu kỹ thuật.
Ghi chú cuộc họp & quy trình làm việc
Nhanh chóng trực quan hóa các quy trình làm việc hoặc luồng phê duyệt từ cuộc họp và chia sẻ với nhóm.
Trang trình chiếu
Khi vẽ biểu đồ trong PowerPoint quá mất thời gian, hãy tạo bằng Mermaid, xuất dưới dạng PNG và dán vào slide.
Tài liệu giáo dục & học tập
Trực quan hóa các bước thuật toán hoặc mốc thời gian bằng lưu đồ để tạo ra các tài liệu học tập dễ hiểu hơn.
Cú pháp Mermaid
Lưu đồ Cơ bản (graph)
graph TD
A[Bắt đầu] --> B{Điều kiện}
B -->|Đúng| C[Xử lý A]
B -->|Sai| D[Xử lý B]
C --> E[Kết thúc]
D --> E Biểu đồ Tuần tự (sequenceDiagram)
sequenceDiagram User->>Server: Yêu cầu Đăng nhập Server->>DB: Xác minh thông tin DB-->>Server: Trả kết quả Server-->>User: Đăng nhập thành công
Tham khảo hình dạng nút (Node)
A[Text] — Hình chữ nhậtB(Text) — Bo gócC{Text} — Hình thoiD((Text)) — Hình trònE>Text] — Bất đối xứngF[(DB)] — Cơ sở dữ liệuGửi phản hồi
Vui lòng cho chúng tôi biết suy nghĩ của bạn để giúp chúng tôi cải thiện công cụ.
Feedback is temporarily suspended
The server is busy or spam protection is active. Please try again later.