Nhập công thức LaTeX lên canvas

Bài học này hướng dẫn bạn cách dùng công cụ Math — biểu tượng fx trên thanh công cụ. Bạn sẽ nhập một biểu thức LaTeX, theo dõi preview KaTeX cập nhật ngay dưới con trỏ, đổi màu và cỡ chữ, rồi xuất kết quả sang SVG hoặc PNG. File xuất ra có thể đưa thẳng vào hình minh họa bài báo khoa học, một trang Notion, hay bài viết blog.

Công cụ Math nằm trong bảng trắng vô hạn của drawtonomy, nghĩa là cùng một canvas có thể chứa cả làn đường, phương tiện và người đi bộ — tiện lợi khi bạn cần đặt công thức ngay cạnh sơ đồ mà nó giải thích. Nhưng bạn hoàn toàn có thể dùng công cụ Math độc lập trên canvas trắng mà không cần thêm bất kỳ hình dạng nào khác.

1. Chọn công cụ Math

Mở drawtonomy.com. Trên thanh công cụ phía dưới, nhấp vào biểu tượng fx — nằm giữa công cụ Text (T) và Freehand:

$Công cụ Math (fx) đang được chọn trên thanh công cụ phía dưới$

Mẹo: nếu bạn thích dùng bàn phím, nhấn / — đó là phím tắt kiểu Notion cho công cụ Math.

2. Nhấp vào vị trí cần đặt công thức

Nhấp vào bất kỳ chỗ nào trên canvas. drawtonomy mở trình soạn thảo nội tuyến ngay tại chỗ đó. Nửa trên là ô nhập LaTeX, nửa dưới là preview KaTeX trực tiếp. Một gợi ý mờ hiển thị phương trình bậc hai làm ví dụ.

$Trình soạn thảo Math trống — nửa trên là ô nhập LaTeX, nửa dưới là preview KaTeX trực tiếp, kèm ví dụ gợi ý$

Dòng gợi ý bàn phím phía dưới — Del: delete · Arrows: move · Esc: deselect — cho biết các thao tác có thể thực hiện khi trình soạn thảo đang mở.

3. Gõ biểu thức LaTeX

Nhập một biểu thức thực. Hãy thử công thức kinh điển:

E = mc^2

Khi bạn gõ, khung phía dưới cập nhật ngay lập tức. Không có nút “render” — mỗi lần gõ phím là preview thay đổi theo:

$Trình soạn thảo Math hiển thị E = mc^2 ở ô nhập, phía dưới là kết quả render KaTeX tương ứng$

Tiếp theo, thử thứ gì đó phức tạp hơn. Xóa nội dung cũ và gõ phương trình bậc hai:

x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}

Các lệnh \frac, \sqrt, \pm và ^ đều hiển thị chính xác như trong bài báo:

$Trình soạn thảo Math hiển thị phương trình bậc hai với phân số, căn bậc hai và ± trong preview$

Công cụ Math hỗ trợ toàn bộ từ vựng KaTeX, cộng với extension mhchem cho hóa học — xem tài liệu tham khảo Math để biết danh sách đầy đủ.

4. Xác nhận: nhấn Esc

Nhấn Esc (hoặc nhấp ra ngoài trình soạn thảo) để kết thúc chỉnh sửa. Ô nhập biến mất và chỉ còn công thức đã render trên canvas, với kích thước vừa khít:

$Công thức đã xác nhận trên canvas — chỉ hiển thị công thức đã render, với khung chọn bao quanh$

Đường viền xanh chỉ là khung chọn. Nhấp vào chỗ trống để bỏ chọn.

Để chỉnh sửa lại, nhấp đúp vào công thức. Trình soạn thảo mở lại với mã nguồn LaTeX gốc — drawtonomy lưu mã nguồn chứ không chỉ lưu ảnh render, nên mọi công thức đều có thể chỉnh sửa mãi mãi.

5. Đổi màu và cỡ chữ

Khi công thức đang được chọn, nhìn vào bảng Math (LaTeX) ở góc trên bên phải:

Color — nhấp vào bất kỳ ô màu nào để đổi màu (đen, xám, đỏ/cam/vàng/xanh lá/xanh dương/tím). Với sắc màu theo thương hiệu riêng, nhấp More… để mở bảng màu đầy đủ.
Size — kéo thanh trượt từ 8 px (cỡ chú thích) đến 200 px (tiêu đề poster). Toàn bộ công thức thu phóng theo tỷ lệ.

Đặt màu thành đỏ và cỡ thành 60 px:

$Công thức tương tự màu đỏ ở 60 px, với bảng Math (LaTeX) hiển thị ô màu đỏ được chọn và thanh trượt 60 px$

6. Xuất file

Khi công thức đã ưng ý, xuất file bằng Menu → Export:

Định dạng	Phù hợp nhất
SVG	LaTeX (`\includegraphics`), Notion, website, slide. Vector, phóng to không vỡ.
PNG	Nơi không hỗ trợ SVG (Word, một số ứng dụng chat).
PDF	Bản dựng LaTeX cần hình PDF. Chữ được chuyển thành path, không phụ thuộc font.
EPS	Chuỗi công cụ LaTeX cũ (`latex` + `dvips`). Cũng được chuyển thành path.
.drawtonomy.svg	Định dạng gốc của drawtonomy. Là SVG thông thường, có thể mở lại trong drawtonomy để chỉnh sửa mã LaTeX.

Trong sử dụng hàng ngày, SVG và PNG đủ cho hầu hết mọi trường hợp. Với bài báo LaTeX, PDF cho kết quả ổn định nhất.

Công cụ Math còn làm được gì

Một số tính năng khác đáng biết:

Hóa học (mhchem) — \ce{2 H2 + O2 -> 2 H2O} hiển thị mũi tên phản ứng chuẩn.

$Phương trình hóa học mhchem trong preview trực tiếp$
Hệ phương trình nhiều dòng có đánh số — bọc các khối trong \begin{align} ... \end{align} để lấy số phương trình kiểu bài báo. Nội dung và nhãn (1)(2)(3) đảm bảo không chồng chéo dù ở kích thước lớn.

$Phương trình Maxwell render theo môi trường align với số phương trình (1)–(4)$
Công thức dài — ô nhập tự xuống dòng và khung preview có thể cuộn, nên kể cả những dẫn xuất dài nửa trang vẫn chỉnh sửa được bình thường.
Cmd+A rồi Delete — chọn tất cả hình dạng trên canvas (kể cả Math) và xóa sạch.
Kéo di chuyển ô nhập — trong khi đang soạn thảo, nhấp và kéo (ngưỡng 5 px) để dịch chuyển trình soạn thảo mà không mất vị trí con trỏ.
Undo / Redo — Cmd+Z / Cmd+Shift+Z. Thay đổi màu và cỡ chữ là từng bước undo riêng biệt; kéo thanh trượt cỡ chữ gộp thành một bước duy nhất.