TikZ Editor: Trình chỉnh sửa WYSIWYG cho hình vẽ LaTeX

 (tikz.dev)
1 điểm bởi GN⁺ 5 giờ trước | 1 bình luận | Chia sẻ qua WhatsApp
  • TikZ Editor v0.4.0 là ứng dụng mã nguồn mở miễn phí theo giấy phép MIT cho phép chỉnh sửa sơ đồ TikZ của LaTeX bằng cách thao tác trực tiếp, có thể dùng trên web và desktop
  • Có thể mở hình TikZ sẵn có hoặc toàn bộ tệp bài báo .tex, rồi kéo các phần tử để mã TikZ được cập nhật ngay lập tức, đồng thời giữ nguyên định dạng hiện có như xuống dòng và khoảng trắng
  • Có thể chỉnh sửa trực quan các thành phần TikZ thường dùng như node, path, mũi tên, hình dạng, ma trận, vòng lặp \foreach, nhãn, pin và nhãn cạnh
  • Trình soạn thảo mã nguồn cung cấp tô sáng cú pháp, gập mã, tự động hoàn thành, tìm kiếm, chẩn đoán, mẫu màu nội tuyến, bộ chọn màu và chỉnh số bằng kéo chuột, đồng thời phân tích lỗi mà không cần trình biên dịch TeX
  • Được xây dựng trên TypeScript và Tauri, và chỉ áp dụng các bản vá nhỏ thay vì viết lại toàn bộ mã TikZ nên vẫn giữ nguyên thụt lề và xuống dòng của người dùng

Trình chỉnh sửa thao tác trực tiếp với hình TikZ

  • TikZ Editor v0.4.0 là trình chỉnh sửa WYSIWYG dành cho sơ đồ TikZ của LaTeX
  • Có thể tạo hình mới từ đầu hoặc chỉnh sửa hình TikZ hiện có, đồng thời có thể mở toàn bộ tệp bài báo .tex để sửa hình ảnh bên trong
  • Khi di chuyển phần tử, mã TikZ được cập nhật ngay lập tức và định dạng của mã hiện có như xuống dòng và khoảng trắng không bị xáo trộn
  • Có thể tinh chỉnh vị trí và xem kết quả ngay mà không cần biên dịch lại
  • Ứng dụng được phát hành là mã nguồn mở miễn phí theo giấy phép MIT, mã nguồn có trên GitHub
  • Có thể dùng trên web, đồng thời cũng có ứng dụng desktop nhẹ đi kèm một số tính năng bổ sung

Đồng bộ giữa chỉnh sửa trực quan và mã TikZ

  • Thay vì sửa tọa độ trực tiếp, chỉ cần kéo path và node đến vị trí mong muốn thì mã sẽ được cập nhật ngay
  • Công cụ thêm phần tử mới có thể chèn các mục sau
    • Đường thẳng, mũi tên, path gồm nhiều đoạn
    • Node, hình chữ nhật, hình tròn
  • Phần tử mới được chèn vào cuối mã, và sau khi thêm có thể di chuyển hoặc đổi kích thước ngay
  • Có thể áp dụng rounded corners cho góc bo tròn và nối path, cũng như dùng kèm giá trị như rounded corners=2pt

Trình soạn thảo mã nguồn tối ưu cho TikZ

  • Bảng mã nguồn luôn hiển thị mã hiện tại và cung cấp tô sáng cú pháp TikZ
  • Hỗ trợ gập mã để ẩn chi tiết của scope
  • Khi di chuột lên, có thể xem snippet liên quan từ sổ tay TikZ
  • Lỗi được tô sáng kèm giải thích để biết chính xác vấn đề là gì
    • Đây là tính năng khả thi vì ứng dụng hiểu mã mà không cần trình biên dịch TeX
  • Có thể điều chỉnh màu sắc và con số mà không cần gõ trực tiếp trong chế độ xem mã nguồn
    • Hỗ trợ bộ chọn màu
    • Hỗ trợ chỉnh số bằng kéo chuột

Căn chỉnh, nhóm và chỉnh sửa nhiều hình

  • Tính năng snap giúp căn phần tử theo chiều dọc hoặc ngang, hoặc bố trí với khoảng cách bằng nhau
  • Cung cấp thước, đường dẫn tùy chỉnh, phóng to/thu nhỏ và công cụ kính lúp
  • Có thể chọn nhiều đối tượng để nhóm lại, và việc nhóm được triển khai bằng TikZ scope
  • Khi chọn nhiều phần tử, có thể thực hiện các tác vụ bố cục như căn chỉnh và phân bố
  • Khi mở toàn bộ tệp bài báo .tex, có thể chuyển giữa nhiều môi trường tikzpicture bằng phần xem trước hình ở cuối ứng dụng
  • Ứng dụng hiểu được nhiều macro tùy chỉnh của người dùng

Các tính năng TikZ và công cụ được hỗ trợ

  • Ứng dụng được thiết kế để tạo ra các hình TikZ theo phong cách quen thuộc
  • Có thể dễ dàng vẽ path bám vào anchor của node
  • Hỗ trợ chỉnh sửa nhãn node, pin và nhãn cạnh
  • Các công cụ được cung cấp gồm
    • Select: di chuyển đối tượng, đổi kích thước, xoay, chỉnh path, chỉnh sửa khi chọn nhiều đối tượng
    • Magnify: kính lúp ảo tương tự TeXstudio
    • Node: thêm văn bản bằng TikZ \node
    • Shape: thêm node dựa trên thư viện shape, hỗ trợ hình thoi, đa giác, ngôi sao, đám mây, mũi tên v.v.
    • Matrix: chèn ma trận node bằng cách chỉ định số hàng và cột
    • Line, Arrow, Bezier, Path, Freehand: tạo đường thẳng, mũi tên, đường cong, path nhiều đoạn và đường cong tự do được làm mượt
    • Grid, Rectangle, Ellipse, Circle: tạo lưới và path hình cơ bản
    • Bucket: áp dụng màu tô cho vùng kín hiện có

Tệp, xuất và tính năng panel

  • Các tính năng tệp và xuất gồm
    • Mở và chỉnh sửa tệp .tex và .tikz
    • Nhập hình từ SVG, Ipe .ipe, PowerPoint .pptx
    • Xuất sang SVG, PNG, PDF, LaTeX độc lập
    • Làm việc đồng thời với nhiều tài liệu bằng tab
  • Các tính năng chỉnh sửa bài báo và hình gồm
    • Mở toàn bộ bài báo có nhiều hình
    • Di chuyển giữa các hình bằng xem trước thumbnail
    • Vẽ node, hình dạng, ma trận, mũi tên, path, đường cong, lưới, hình chữ nhật, hình elip, hình tròn
    • Chỉnh sửa trực tiếp văn bản và công thức trong hình
  • Các tính năng chỉnh sửa trực tiếp gồm
    • Di chuyển, đổi kích thước, xoay, nhân bản, nhóm, căn chỉnh, phân bố, lật, đổi thứ tự
    • Chỉnh path bằng point handle
    • Chia tách/kết hợp, đảo chiều, mở/đóng, lệnh góc và điểm mượt
    • Snap vào lưới, guide, điểm đối tượng và khoảng cách giữa các đối tượng
  • Các tính năng panel gồm
    • Trong Inspector có thể chỉnh đường viền, màu tô, mũi tên, văn bản, biến đổi, hình dạng, style
    • Trong panel Objects có thể quản lý hiển thị đối tượng, nhóm, đổi tên và thứ tự layer
    • Trong panel Styles có thể chỉnh style TikZ tương tự như chỉnh CSS trong công cụ dành cho nhà phát triển của trình duyệt

Vòng lặp, cấu trúc và hỗ trợ AI

  • Có thể dùng hộp thoại Repeat để thêm vòng lặp \foreach nhằm sao chép vùng đã chọn thành nhiều hàng và cột
  • Cũng có thể mở và chỉnh sửa các hình đã dùng \foreach, bao gồm cả vòng lặp lồng nhau
  • Có thể chỉnh sửa sơ đồ cây bằng cách thêm node con
  • Ma trận có thể được chỉnh sửa bằng lệnh hàng-cột và lệnh chuyển vị
  • Nếu OpenAI Codex được cài đặt trong phiên bản desktop, có thể yêu cầu chỉnh sửa hình ngay trong ứng dụng
    • Trợ lý có quyền truy cập vào nhiều công cụ chuyên dụng cho TikZ
    • Mức sử dụng sẽ được trừ vào tài khoản ChatGPT của người dùng
    • Cũng hỗ trợ trợ giúp chỉnh sửa kèm tệp ảnh đính kèm

Cách triển khai bên trong

  • Ứng dụng được viết bằng TypeScript
  • Phiên bản desktop dùng Tauri và đi kèm backend Rust gọn nhẹ
  • Codebase ban đầu được Codex viết trong 3 tháng, với các model được dùng là gpt-5-3-codex, gpt-5-4, gpt-5-4-mini và gpt-5-5
  • Cũng có một phần đóng góp từ Claude
  • Việc phân tích mã TeX là rất khó, nhưng TikZ Editor không phân tích toàn bộ TeX tùy ý mà chỉ phân tích các lệnh thường dùng khi tạo hình TikZ
    • Các đoạn mã rất “hacky” có thể sẽ không được diễn giải đúng
    • Phạm vi hỗ trợ hiện đã khá tốt và vẫn đang mở rộng theo thời gian
  • Ứng dụng phân tích mã TikZ để tạo biểu diễn nội bộ, rồi dùng biểu diễn này để diễn giải tọa độ, style, biến đổi, vòng lặp, node, path và văn bản thành các phần tử cảnh có thể chỉnh sửa
  • Biểu diễn nội bộ được gắn chặt với đầu vào cú pháp thông qua thẻ phạm vi dòng và ký tự
  • Vì chỉ thay đổi một phần bằng các bản vá nhỏ thay vì viết lại toàn bộ mã theo định dạng chuẩn, nên có thể giữ nguyên rất sát thụt lề và xuống dòng của người dùng
  • Cảnh được render bằng SVG

Render và các bộ chuyển đổi

  • Việc render văn bản và công thức được xử lý bằng MathJax
  • Để hỗ trợ văn bản nhiều dòng, ứng dụng đã triển khai lại thuật toán ngắt từ của TeX và thuật toán xuống dòng Knuth-Plass
  • Nhờ vậy, văn bản nhiều dòng hiển thị trong ứng dụng nhìn chung khớp chính xác với cách TeX render cùng nội dung đó
  • Bộ chọn màu tùy chỉnh chuyển màu RGB thành màu gần nhất có thể biểu diễn bằng chuỗi xcolor ngắn
    • Ví dụ: #409a40 được chuyển thành violet!88!white!45!green
    • Mã liên quan được phát hành dưới dạng gói npm xcolor-rgb-convert
  • Việc nhập nhiều định dạng tệp khác nhau dựa trên các bộ chuyển đổi được phát triển riêng
  • Ứng dụng desktop có thể dán trực tiếp đối tượng từ PowerPoint và Keynote
    • Tính năng dán từ Keynote dùng trình thông dịch định dạng clipboard của Keynote, được phát hành dưới dạng gói npm keynote-clipboard
  • Hỗ trợ AI trong ứng dụng desktop được cung cấp qua Codex App Server
  • Trình soạn thảo mã nguồn được xây dựng trên CodeMirror

Bài viết liên quan

1 bình luận

 
GN⁺ 5 giờ trước
Ý kiến trên Hacker News

  • Tôi đã thử dùng một chút, UI rất đẹp và bản thân dự án cũng rất tốt. Xin chúc mừng
    Chỉ là tôi thấy mã TikZ được tạo ra chưa ổn lắm. Mọi thứ đều dùng tọa độ tuyệt đối, trong khi với TikZ thì gần như không cần như vậy
    Ví dụ, chỉ cần đặt một node thôi mà cũng sinh ra tọa độ tuyệt đối, trong khi chỉ cần viết \node {Hello}; thì TikZ sẽ đặt nó vào giữa hộp bao. Không cần phải chỉ định nó ở (0.5,2.91) như trong bài test
    Ngay cả khi chọn nhiều node rồi dùng chức năng như “căn dưới”, tôi nghĩ cũng nên tận dụng các tính năng căn chỉnh của TikZ, tức là anchor các kiểu, thay vì thao tác với tọa độ tuyệt đối. Tôi hiểu rằng kiểu sinh mã này sẽ khó hơn, nhưng đây có thể là một hướng đáng cân nhắc cho phiên bản sau

    • Đây là phản hồi rất hay. Tôi nghĩ phần khó không hẳn là bản thân việc sinh mã mà là xác định hành vi người dùng mong đợi
      Khi nhấn nút “căn dưới” mà đoạn mã như sau
      \begin{tikzpicture} \draw (0,2) rectangle (1,1); \draw (1.5,2) rectangle (2.5,1); \end{tikzpicture}
      bỗng nhiên bị đổi thành cách viết với \coordinate tên ngẫu nhiên và tọa độ tương đối, thì có lẽ người dùng sẽ thấy bất ngờ
      Ngược lại, nếu ngay từ đầu bắt đầu bằng mã “đẹp”, thì trong nhiều trường hợp ứng dụng sẽ không thể cho phép kéo thả. Vì nó không biết kéo thả ở đây phải hiểu là gì, hoặc thực tế là thường không thể biết được. Ví dụ như là đang sửa tọa độ được đặt tên hay đang sửa offset so với tọa độ đó
      Ở chỗ khác trong cuộc thảo luận này cũng có người nhắc đến cách bố trí kiểu “right of”, và đã có một số gợi ý hay: https://news.ycombinator.com/item?id=48647683
    • Có lẽ có thể tham khảo cách các ngôn ngữ script CAD xử lý chuyện đó

  • Viết ra đây cho ai tò mò: dự án này đã được làm khá đều đặn từ tháng 2 năm 2026
    Trong thời gian đó tôi đã dùng khoảng 700 triệu token cho dự án này qua Codex, chưa tính lượt đọc cache. Nếu tính theo giá API thì chắc vào khoảng 15.000 USD, nhưng thực tế tôi chỉ trả khoảng 500 USD tiền thuê bao ChatGPT

  • Tôi thật sự rất thích CircuitiTikZ. Đây gần như là cách duy nhất để vẽ sơ đồ mạch dạng văn bản một cách đơn giản
    https://ctan.org/pkg/circuitikz?lang=en
    https://github.com/circuitikz/circuitikz
    Vài năm trước tôi đã nối nó với asciidoctor-diagram để có thể chèn các mạch đơn giản vào tài liệu bảo trì Asciidoc. Các kỹ thuật viên hiện trường thực sự rất thích, và chúng tôi có thể cộng tác trong hệ sinh thái quản lý phiên bản Git thay vì phải dùng những công cụ địa ngục mà PDM/ERP ném cho
    Nó cũng là một phần bổ sung rất tốt cho WireViz vốn đã rất tuyệt: https://github.com/wireviz/WireViz

  • Tuyệt. https://q.uiver.app/ cũng hay, nhưng đó là một công cụ chuyên biệt hơn do https://github.com/varkor làm ra

  • Rất hay, nhưng xin hỏi câu hỏi gần như chắc chắn sẽ xuất hiện: hỗ trợ cetz sẽ khó đến mức nào?
    Nếu tránh được thì tôi không muốn đụng vào LaTeX, còn Typst thì tôi dùng suốt

    • Nếu dùng coding agent thì có vẻ khá khả thi
      Đã có phần mềm trình chiếu WYSIWYG hoàn chỉnh dựa trên Typst, được tạo theo kiểu vibe coding, và một số cái trong đó làm đúng kiểu tính năng đó
      https://codeberg.org/presenst/presenst

  • Hồi còn là sinh viên tôi đã thực sự muốn có thứ như thế này. Cảm ơn vì đã làm nó thành mã nguồn mở
    Thầy giáo môn khoa học máy tính lý thuyết của tôi tình cờ lại chính là Till Tantau, người tạo ra TikZ. Ông cũng giải thích cực kỳ dễ hiểu

    • Người Schleswig-Holstein có mặt ở khắp nơi :) Till Tantau cũng là người khởi xướng gói beamer để làm slide LaTeX
      Cả beamer lẫn TikZ đều là những đóng góp rất quan trọng cho truyền thông khoa học

  • Tuyệt thật
    Tôi biết nhiều người thích nó, nhưng tôi thực sự ghét phải viết TikZ trực tiếp, nên đã chuyển phần lớn hình kỹ thuật sang draw.io/diagrams.net rồi xuất ra PNG. Không quá bóng bẩy nhưng hoạt động đủ tốt, và khá dễ để tạo ra kết quả trông ổn. Bình thường tôi vẫn thích những thứ được định nghĩa bằng văn bản hơn
    Với các hình nằm trong Markdown thì tôi đã chuyển một phần sang Mermaid, nhưng chưa thử làm cho nó chạy trong TeX
    Dù vậy, vì cách làm sơ đồ mang tính thành ngữ trong LaTeX vẫn nghiêng về TikZ, nên có một trình biên tập WYSIWYG như thế này sẽ rất hữu ích
    Một đề xuất là sẽ hay hơn nếu mũi tên có thể “dính” vào hộp. Tức là khi di chuyển hộp thì đầu mút của mũi tên cũng đi theo. draw.io hoạt động như vậy

    • Với các node văn bản thì có anchor nên tính năng gắn dính hoạt động. Khi vẽ đường mới hoặc di chuyển đường hiện có, bạn sẽ thấy các điểm kết nối màu xanh lá
      Nếu bạn dùng draw.io thì tôi khuyên nên xuất PDF thay vì PNG. Như vậy sẽ giữ được đồ họa vector
    • Không phải draw.io có thể lưu file thành .drawio.svg sao?
      Tôi đã làm vài sơ đồ như vậy, dùng Computer Modern để hình trông gần giống phần nội dung chính. Với tôi thế là đủ tốt

  • Trông thực sự đẹp. Có lẽ nên thêm vài preset để người dùng dễ bắt đầu hơn, như các kiến trúc mạng nơ-ron phổ biến hay những trường hợp dùng TikZ khác

    • Ý hay đấy. Hiện đã có File > Open Example, nhưng rõ ràng vẫn còn chỗ để mở rộng. Trên desktop còn có thể mở trực tiếp cả bài báo arXiv

  • Wow, thực sự ấn tượng. Tôi đã dùng ChatGPT để tạo sơ đồ TikZ, nhưng nói thật là làm sơ đồ TikZ không hề dễ, còn khi làm tốt thì kết quả lại rất đẹp
    Chỉ là bắt ChatGPT chỉnh sửa chi tiết sơ đồ thì khá khó. Kiến thức của tôi về cú pháp và cách hoạt động của TikZ không phải lúc nào cũng đủ tinh để đạt được đúng kết quả mong muốn. Vì vậy công cụ này trông như câu trả lời cho vấn đề đó. Tôi rất mong được thử
    Nhân tiện, tôi cũng tạo tài liệu LaTeX cho blog bằng ChatGPT rồi render ở phía server. Workflow đó hoạt động rất tốt