Trình Soạn Mermaid Trực Tiếp

Trình Soạn Mermaid Trực Tiếp

Gõ cú pháp Mermaid bên trái và xem sơ đồ cập nhật bên phải theo thời gian thực. Hỗ trợ mười một loại sơ đồ của Mermaid — flowchart, sequence, class, state, ER, Gantt, pie, mindmap, timeline, user journey và quadrant chart — với năm chủ đề (default, dark, forest, neutral, base). Xuất sơ đồ thành SVG vector sạch hoặc PNG độ phân giải cao. Mọi xử lý chạy trên trình duyệt, không upload gì.

Mermaid là gì và có thể vẽ gì?

Mermaid là ngôn ngữ tạo sơ đồ dựa trên JavaScript cho phép mô tả sơ đồ bằng văn bản thuần. Khởi đầu là giải pháp thay thế cho công cụ kiểu Visio đắt đỏ, nay đã thành chuẩn de facto trong tài liệu dev — được hỗ trợ native bởi GitHub, GitLab, Notion, Obsidian, VS Code và nhiều bộ tạo trang tĩnh.

Trình soạn này hỗ trợ tất cả các loại sơ đồ Mermaid 10 cung cấp:

- Flowchart — hộp, quyết định, mũi tên. Dùng nhiều nhất.
- Sequence — trao đổi tin nhắn giữa các participant theo thời gian.
- Class — sơ đồ UML lớp với kế thừa, composition, method, attribute.
- State — máy trạng thái hữu hạn với transition và substate.
- Entity-Relationship — bảng database và quan hệ.
- Gantt — timeline dự án với task, dependency, milestone.
- Pie — biểu đồ tỉ lệ.
- Mindmap — phân cấp ý tưởng theo hình toả.
- Timeline — sự kiện dọc trục thời gian ngang.
- User journey — luồng UX kèm điểm cảm xúc.
- Quadrant chart — lưới 2×2 để ưu tiên hoá.

Chọn một từ dropdown Ví Dụ để bắt đầu, sau đó chỉnh mã theo dữ liệu của bạn.

Khác gì so với Mermaid Live Editor chính thức?

Mermaid.live chính thức rất tốt — và tool này dùng đúng engine render (mermaid-js v10.9). Khác biệt:

- Trang này là một trong khoảng 1.400 tool trên cùng tên miền, nên trình soạn dùng chung UI, dark mode và chuyển ngôn ngữ (English/Spanish/Vietnamese/French/Portuguese).
- Không tài khoản, không canvas Pan/Zoom, không URL chia sẻ: thiết kế đơn giản hơn. Nếu cần chia sẻ link hoặc sơ đồ lưu trữ, mermaid.live hoặc GitHub Gist hợp hơn.
- Dùng UMD bundle từ cdn.jsdelivr.net nên sơ đồ render sau khi trang tải. Không cần bước build hay gói trả phí.
- Mọi xử lý cục bộ. Mermaid render SVG hoàn toàn bằng JavaScript; không gửi gì lên server.

Nếu cần nhúng Mermaid trong môi trường riêng tư/offline, cùng đoạn mã hoạt động ở đó — chỉ cần tự host mermaid.min.js và gọi đúng lệnh render.

Cách tạo flowchart?

Flowchart là loại dễ nhất. Bắt đầu bằng khai báo hướng, sau đó liệt kê node và cạnh:

flowchart TD
A[Start] --> B{Quyết định?}
B -- Có --> C[Làm việc này]
B -- Không --> D[Bỏ qua]
C --> E[Kết thúc]
D --> E

Hướng: TD (top-down), LR (left-right), BT, RL.

Hình node theo loại ngoặc:
- [Chữ nhật]
- (Bo tròn)
- ((Hình tròn))
- {Hình thoi / quyết định}
- [/Hình bình hành/]
- [\Hình thang\]
- [(Hình trụ)]

Kiểu cạnh:
- --> mũi tên
- --- đường thẳng
- -. chấm chấm .->
- ==> mũi tên đậm
- -- văn bản -->

Tải ví dụ Flowchart và chơi với các hình để cảm cú pháp.

Cách tạo sequence diagram cho API hoặc luồng chat?

Sequence diagram thể hiện thứ tự tin nhắn giữa các participant:

sequenceDiagram
participant Browser
participant API
participant DB
Browser->>API: POST /login {email, password}
API->>DB: SELECT user WHERE email=?
DB-->>API: row(id, hash)
API->>API: bcrypt.compare()
API-->>Browser: 200 OK + token
Note over Browser,API: Request tiếp theo<br>gửi kèm token
Browser->>API: GET /profile (Bearer token)
API-->>Browser: 200 OK + profile JSON

Mũi tên: ->> liền có đầu; -->> đứt nét reply; -> mảnh; --> đứt nét.

Ghi chú: Note over X,Y: text — thêm ghi chú vàng bao quanh participant.

Hỗ trợ loops, alt blocks, parallel (par) và critical section. Cú pháp đầy đủ tại mermaid.js.org/syntax/sequenceDiagram.

Cách mô hình hoá database bằng ER diagram?

Dùng erDiagram và một ký tự cardinality cho mỗi đầu quan hệ:

erDiagram
USER ||--o{ ORDER : đặt
ORDER ||--|{ LINE_ITEM : chứa
USER {
int id PK
string email
string name
}
ORDER {
int id PK
int user_id FK
date created_at
}

Ký hiệu cardinality (trái sang phải):
- |o zero hoặc một
- || đúng một
- }o zero hoặc nhiều
- }| một hoặc nhiều

Nên USER ||--o{ ORDER đọc là 'một user có zero hoặc nhiều đơn hàng'.

Bên trong khối {} liệt kê cột dạng type name modifier — modifier là PK (primary key) hoặc FK (foreign key). Tuyệt vời để nhúng schema nhỏ trong README mà không cần dựng schema viewer thật.

Cú pháp Gantt chart hoạt động thế nào?

Cú pháp Gantt mô tả task theo section, với ngày, thời lượng và dependency:

gantt
title Kế hoạch dự án
dateFormat YYYY-MM-DD
section Thiết kế
Wireframe :done, w1, 2026-05-01, 5d
Mockup :active, m1, after w1, 7d
section Phát triển
Backend :b1, 2026-05-13, 14d
Frontend :f1, after b1, 10d
section Ra mắt
QA :q1, after f1, 3d
Release :milestone, after q1, 0d

Format task: 'Tên : [status], task-id, ngày-bắt-đầu | after task-id, thời lượng | ngày-kết-thúc'

Status: done, active, crit (đường găng).

Milestone: kết thúc bằng 0d để render hình thoi.

Dependency: 'after task-id' xâu chuỗi task để chỉnh task trước tự dịch các task sau. Với lịch trình phức tạp, công cụ chuyên như Smartsheet hay MS Project tốt hơn — nhưng với tài liệu và đề xuất nhanh, Mermaid Gantt rất khó bị thay thế.

Có xuất được sơ đồ không?

Có — hai định dạng:

- SVG: vector, co giãn vô hạn, nhúng trực tiếp vào HTML/Markdown/PDF, và văn bản bên trong vẫn chọn và tìm kiếm được. File tải về chứa đúng XML đã render mà bạn thấy trong DevTools.
- PNG: raster ở độ phân giải 2× mặc định. Mỗi pixel sơ đồ thành 4 pixel trên màn hình mật độ cao. Thêm nền trắng để ảnh trông đúng trên Slack/Discord/email. Dùng khi đích đến không nhận SVG (vd một số dịch vụ chia sẻ ảnh hoặc Slack cũ).

Cả hai xuất đều xảy ra hoàn toàn trên trình duyệt. PNG dùng HTMLCanvasElement để rasterise SVG; SVG là tải trực tiếp XML đã render. Không có roundtrip server ở cả hai.

Với sơ đồ kiến trúc sẽ sống trong Git repo, ưu tiên SVG: nó diff được trong pull request và là định dạng GitHub render inline.

Có highlight lỗi cú pháp không?

Khi Mermaid không parse được mã (typo từ khoá, ngoặc thiếu đầu thiếu cuối, hình lạ), thông báo lỗi từ parser hiện bên dưới editor. Sơ đồ render thành công cuối cùng vẫn hiển thị bên phải — nên bạn có thể so sánh mã hiện tại với phiên bản hợp lệ trước trong khi sửa.

Thông báo lỗi của Mermaid đôi khi khó hiểu. Sửa thường gặp:
- 'Parse error on line N' — xem dòng được chỉ và dòng phía trên; thường thiếu mũi tên hoặc ngoặc.
- 'Lexical error' — ký tự bất hợp pháp, thường là dấu nháy Unicode (“ ”) khi bạn định gõ ASCII (").
- Từ khoá loại sơ đồ (flowchart, sequenceDiagram, ...) phải là dòng đầu tiên không rỗng; khoảng trắng phía trước phá vỡ phân tích cú pháp.

Để debug trực tiếp, dán đoạn ngắn rồi thêm dòng tăng dần — Mermaid render mọi phím gõ (có debounce nhỏ) nên edit hỏng đầu tiên dễ phát hiện.

Tính Năng Nổi Bật

• Render sơ đồ trực tiếp mỗi lần gõ phím (có debounce)
• Mười một loại sơ đồ: flowchart, sequence, class, state, ER, gantt, pie, mindmap, timeline, journey, quadrant
• Năm chủ đề: default, dark, forest, neutral, base
• Tải nhanh mẫu đầy đủ cho từng loại sơ đồ
• Xuất SVG (vector) hoặc PNG (2× retina)
• Debounce mỗi phím gõ giúp UI mượt cả với sơ đồ lớn
• Giữ sơ đồ tốt cuối cùng khi mã hiện tại có lỗi parse
• Nút zoom in/out và reset cho khung preview
• Sao chép mã nguồn Mermaid vào clipboard
• Dùng [email protected] từ jsDelivr CDN (URL đã test)
• 100% phía client — mã nguồn sơ đồ không rời trình duyệt
• Bố cục responsive thân thiện di động
• Hỗ trợ dark mode, tự đổi theme
• Mức bảo mật nghiêm ngặt — sơ đồ không thực thi HTML tuỳ ý
• Hoạt động trên mọi trình duyệt hiện đại; không cần bước build