🧜

Mermaid Live Editor (flowchart, sequence, ER…)

Soạn diagram Mermaid với preview real-time. 6 template sẵn (flowchart, sequence, ER, class, gantt, state). Export SVG hoặc PNG. Phù hợp viết README, docs kỹ thuật, planning sprint.

Tất cả công cụ Browser-only

Template:

Mermaid source

Preview

Đang tải Mermaid…

Editor Mermaid với preview real-time. Thư viện Mermaid load từ jsDelivr (1 lần). Sau khi load, mọi xử lý 100% client-side.

Khi nào dùng?

Viết README có diagram: GitHub render Mermaid native trong file .md — paste source vào code block ```mermaid là xong.
Docs kiến trúc: vẽ flow request, ERD database, sequence diagram cho API — version control được vì source là text.
Sprint planning: Gantt chart timeline nhanh, không cần Microsoft Project.
Notion / Obsidian / VS Code: đều hỗ trợ Mermaid block — paste source qua lại được.

6 loại diagram được hỗ trợ

Flowchart — sơ đồ logic, decision tree. Hướng TD (top-down) hoặc LR (left-right).
Sequence — giao tiếp giữa actor (user, service, DB). Mũi tên ->> (sync) vs -->> (response).
ER Diagram — schema database. Cardinality: ||--o{ (1-N), }o--o{ (N-M).
Class — UML class với attribute, method, inheritance.
Gantt — timeline dự án theo ngày, dependency giữa task.
State — state machine, FSM workflow.

Mẹo

Theme tự đổi theo dark mode của trang — chuyển tối/sáng để xem cả 2 style trước khi screenshot.
SVG vs PNG: SVG vector, file nhỏ, scale vô hạn — phù hợp dán vào README. PNG khi cần share Slack/Telegram (xem nhanh được).
Hết chỗ? Đổi flowchart TD thành flowchart LR để xếp ngang, đỡ tràn.

Phù hợp với ai

Lập trình viên fullstack/backend/devops — debug JWT, format JSON/SQL, parse cURL, tính subnet CIDR, vẽ diagram Mermaid, viết commit chuẩn… Toolkit dùng hằng ngày trong terminal & code editor.

Câu hỏi thường gặp

Code/token tôi paste có gửi đi đâu không?

Không. Tất cả công cụ dev của TopDev chạy 100% client-side — JWT, SQL, JSON, cURL, regex… đều xử lý trong trình duyệt. Bạn có thể tắt mạng để kiểm chứng. Phù hợp để paste token nội bộ, query database production, key API.

Có hỗ trợ offline / cài thành PWA không?

Tool đã chạy được offline sau lần load đầu tiên. PWA installable đang nằm trong roadmap — hiện tại bạn có thể bookmark trang và dùng khi mất mạng.