TikZ Editor: โปรแกรมแก้ไขแบบ WYSIWYG สำหรับภาพ LaTeX

• TikZ Editor v0.4.0 เป็นแอปโอเพนซอร์สฟรีภายใต้ไลเซนส์ MIT สำหรับแก้ไขไดอะแกรม TikZ ของ LaTeX ด้วยการปรับแก้โดยตรง ใช้งานได้ทั้งบนเว็บและเดสก์ท็อป
• สามารถเปิดภาพ TikZ เดิมหรือไฟล์วิทยานิพนธ์ .tex ทั้งไฟล์ แล้วลากองค์ประกอบเพื่อให้ โค้ด TikZ อัปเดตทันที โดยยังคงรูปแบบเดิมอย่างการขึ้นบรรทัดใหม่และช่องว่างไว้
• สามารถแก้ไของค์ประกอบ TikZ ที่ใช้บ่อยแบบเห็นภาพได้ เช่น โหนด พาธ ลูกศร รูปร่าง เมทริกซ์ ลูป \foreach เลเบล pin และ edge label
• ตัวแก้ไขซอร์สมีการไฮไลต์ไวยากรณ์ การพับโค้ด การเติมข้อความอัตโนมัติ การค้นหา การวินิจฉัยข้อผิดพลาด แถบสีในบรรทัด ตัวเลือกสี และการ scrub ตัวเลข พร้อมวิเคราะห์ข้อผิดพลาดได้โดยไม่ต้องใช้คอมไพเลอร์ TeX
• พัฒนาด้วย TypeScript และ Tauri และใช้การแก้ไขแบบแพตช์ขนาดเล็กแทนการเขียนโค้ด TikZ ใหม่ทั้งหมด เพื่อคง การเยื้องและการขึ้นบรรทัดใหม่ ของผู้ใช้ไว้

---

โปรแกรมแก้ไขที่ปรับภาพ TikZ ได้โดยตรง

• TikZ Editor v0.4.0 เป็นโปรแกรมแก้ไขแบบ WYSIWYG สำหรับไดอะแกรม TikZ ของ LaTeX
• สามารถสร้างภาพใหม่ตั้งแต่ต้นหรือแก้ไขภาพ TikZ ที่มีอยู่แล้ว และยังเปิดไฟล์บทความ .tex ทั้งไฟล์เพื่อแก้ไขภาพภายในได้
• เมื่อย้ายองค์ประกอบ โค้ด TikZ จะอัปเดตทันที และรูปแบบอย่าง การขึ้นบรรทัดใหม่และช่องว่าง ในโค้ดเดิมจะไม่เสีย
• ปรับตำแหน่งละเอียดได้และเห็นผลทันทีโดยไม่ต้องคอมไพล์ใหม่
• แอปนี้เผยแพร่เป็นโอเพนซอร์สฟรีภายใต้ไลเซนส์ MIT และโค้ดอยู่บน GitHub
• ใช้งานได้บนเว็บ และยังมีแอปเดสก์ท็อปขนาดเบาที่มีฟีเจอร์เพิ่มเติมบางส่วนด้วย

การแก้ไขแบบเห็นภาพและการซิงก์กับโค้ด TikZ

• แทนที่จะต้องแก้พิกัดโดยตรง สามารถลาก พาธและโหนด ไปยังตำแหน่งที่ต้องการแล้วโค้ดจะอัปเดตทันที
• เครื่องมือเพิ่มองค์ประกอบใหม่สามารถแทรกรายการต่อไปนี้ได้
  • เส้น ลูกศร และพาธหลายช่วง
  • โหนด สี่เหลี่ยม และวงกลม
• องค์ประกอบใหม่จะถูกแทรกไว้ท้ายโค้ด และหลังจากเพิ่มแล้วสามารถย้ายหรือปรับขนาดได้ทันที
• สามารถใช้ rounded corners กับมุมโค้งและการเชื่อมพาธได้ และใช้พร้อมค่ากำกับอย่าง rounded corners=2pt ได้

ตัวแก้ไขซอร์สที่ออกแบบมาสำหรับ TikZ

• แผงซอร์สจะแสดงซอร์สปัจจุบันตลอดเวลาและมี การไฮไลต์ไวยากรณ์ของ TikZ
• รองรับการพับโค้ดเพื่อซ่อนรายละเอียดของสโคป
• เมื่อเอาเมาส์ไปชี้ สามารถดู snippet ที่เกี่ยวข้องจากคู่มือ TikZ ได้
• ข้อผิดพลาดจะถูกไฮไลต์พร้อมคำอธิบายเพื่อให้รู้ว่าเกิดอะไรผิด
  • เป็นฟีเจอร์ที่ทำได้เพราะแอปเข้าใจโค้ดโดยไม่ต้องใช้คอมไพเลอร์ TeX
• สามารถปรับ สีและตัวเลข ได้โดยไม่ต้องพิมพ์ตรงในมุมมองซอร์ส
  • รองรับตัวเลือกสี
  • รองรับการ scrub ตัวเลข

การจัดแนว การจัดกลุ่ม และการแก้ไขหลายภาพ

• มีฟีเจอร์ snap เพื่อจัดองค์ประกอบให้ตรงแนวตั้ง แนวนอน หรือวางด้วยระยะห่างเท่ากัน
• มีไม้บรรทัด ไกด์ไลน์แบบกำหนดเอง การซูม และเครื่องมือแว่นขยาย
• สามารถเลือกหลายวัตถุแล้วจัดกลุ่มได้ โดยการจัดกลุ่มถูกทำเป็น TikZ scope
• ในสถานะเลือกหลายรายการ สามารถทำ งานจัดเลย์เอาต์ เช่น การจัดแนวและการกระจายระยะได้
• เมื่อเปิดไฟล์บทความ .tex ทั้งไฟล์ สามารถสลับระหว่างสภาพแวดล้อม tikzpicture หลายอันได้จากภาพพรีวิวด้านล่างของแอป
• แอปรองรับแมโครแบบกำหนดเองของผู้ใช้จำนวนมาก

ฟีเจอร์และเครื่องมือ TikZ ที่รองรับ

• แอปถูกออกแบบมาเพื่อสร้างภาพ TikZ แบบที่ใช้งานกันทั่วไปได้อย่างเป็นธรรมชาติ
• สามารถวาดพาธให้ยึดกับ anchor ของโหนดได้ง่าย
• รองรับการแก้ไข node label, pin และ edge label
• เครื่องมือที่มีให้ได้แก่
  • Select: ย้ายวัตถุ ปรับขนาด หมุน แก้ไขพาธ และแก้ไขการเลือกหลายรายการ
  • Magnify: แว่นขยายเสมือนคล้ายกับ TeXstudio
  • Node: เพิ่มข้อความด้วย TikZ \node
  • Shape: เพิ่มโหนดจากไลบรารี shape รองรับเพชร รูปหลายเหลี่ยม ดาว เมฆ ลูกศร และอื่น ๆ
  • Matrix: แทรกเมทริกซ์ของโหนดโดยกำหนดจำนวนแถวและคอลัมน์
  • Line, Arrow, Bezier, Path, Freehand: สร้างเส้นตรง ลูกศร เส้นโค้ง พาธหลายช่วง และเส้นอิสระแบบลื่น
  • Grid, Rectangle, Ellipse, Circle: สร้างพาธกริดและรูปทรงพื้นฐาน
  • Bucket: เติมสีให้พื้นที่ปิดที่มีอยู่แล้ว

ไฟล์ การส่งออก และความสามารถของแผงต่าง ๆ

• ความสามารถด้านไฟล์และการส่งออกประกอบด้วย
  • เปิดและแก้ไขไฟล์ .tex และ .tikz
  • นำเข้าภาพจาก SVG, Ipe .ipe, PowerPoint .pptx
  • ส่งออกเป็น SVG, PNG, PDF และ LaTeX แบบ standalone
  • ทำงานหลายเอกสารพร้อมกันผ่านแท็บ
• ความสามารถในการแก้ไขบทความและภาพประกอบด้วย
  • เปิดบทความทั้งไฟล์ที่มีหลายภาพ
  • ย้ายไปมาระหว่างภาพด้วยพรีวิวแบบภาพขนาดย่อ
  • วาดโหนด รูปร่าง เมทริกซ์ ลูกศร พาธ เส้นโค้ง กริด สี่เหลี่ยม วงรี และวงกลม
  • แก้ไขข้อความและสมการภายในภาพได้โดยตรง
• ความสามารถในการแก้ไขโดยตรงประกอบด้วย
  • ย้าย ปรับขนาด หมุน ทำสำเนา จัดกลุ่ม จัดแนว กระจายระยะ พลิก และเปลี่ยนลำดับ
  • แก้ไขพาธด้วย point handle
  • คำสั่งแยก-รวม กลับทิศ เปิด-ปิด มุม และจุดโค้งลื่น
  • snap เข้ากับกริด ไกด์ จุดของวัตถุ และระยะห่างระหว่างวัตถุ
• ความสามารถของแผงต่าง ๆ ประกอบด้วย
  • ใน Inspector สามารถแก้ไขเส้น สีเติม ลูกศร ข้อความ การแปลง รูปร่าง และสไตล์
  • ในแผง Objects สามารถจัดการการแสดง/ซ่อนวัตถุ กลุ่ม การเปลี่ยนชื่อ และลำดับเลเยอร์
  • ในแผง Styles สามารถแก้ไขสไตล์ TikZ คล้ายกับการแก้ไข CSS ใน developer tools ของเบราว์เซอร์

ลูป โครงสร้าง และผู้ช่วย AI

• สามารถเพิ่มลูป \foreach ที่คัดลอกพื้นที่ที่เลือกเป็นหลายแถวหลายคอลัมน์ได้ผ่านกล่องโต้ตอบ Repeat
• ยังสามารถเปิดและแก้ไขภาพที่ใช้ \foreach อยู่แล้วได้ รวมถึงลูปแบบซ้อนกัน
• ไดอะแกรมต้นไม้สามารถแก้ไขได้ด้วยวิธีเพิ่มโหนดลูก
• เมทริกซ์สามารถแก้ไขได้ด้วยคำสั่งแถว-คอลัมน์และคำสั่ง transpose
• หากติดตั้ง OpenAI Codex ในเวอร์ชันเดสก์ท็อป จะสามารถสั่งให้แอปช่วยแก้ไขภาพจากภายในแอปได้
  • ผู้ช่วยสามารถเข้าถึงเครื่องมือเฉพาะสำหรับ TikZ หลายตัว
  • การใช้งานจะถูกหักจากบัญชี ChatGPT ของผู้ใช้
  • รองรับการช่วยแก้ไขพร้อมแนบรูปภาพด้วย

วิธีการทำงานภายใน

• แอปเขียนด้วย TypeScript
• เวอร์ชันเดสก์ท็อปใช้ Tauri และมีแบ็กเอนด์ Rust ขนาดเบา
• โค้ดเบสระยะแรกถูกเขียนโดย Codex ตลอด 3 เดือน โดยโมเดลที่ใช้คือ gpt-5-3-codex, gpt-5-4, gpt-5-4-mini และ gpt-5-5
• มีส่วนที่ Claude ช่วยพัฒนาด้วยเช่นกัน
• การพาร์สโค้ด TeX เป็นเรื่องยากมาก แต่ TikZ Editor ไม่ได้พาร์ส TeX ทั้งหมดตามอำเภอใจ แต่พาร์สเฉพาะคำสั่งที่ใช้บ่อยในการสร้างภาพ TikZ
  • โค้ดที่ “hacky” มากอาจตีความได้ไม่ถูกต้อง
  • ขอบเขตการรองรับค่อนข้างดีและเพิ่มขึ้นเรื่อย ๆ ตามเวลา
• แอปจะพาร์สโค้ด TikZ เพื่อสร้างตัวแทนภายใน และใช้ตัวแทนนี้ตีความพิกัด สไตล์ การแปลง ลูป โหนด พาธ และข้อความเป็นองค์ประกอบฉากที่แก้ไขได้
• ตัวแทนภายในเชื่อมโยงกับอินพุตเชิงไวยากรณ์อย่างใกล้ชิดด้วยแท็กช่วงบรรทัดและช่วงอักขระ
• เนื่องจากแก้ไขเพียงบางส่วนด้วยแพตช์ขนาดเล็กแทนการเขียนโค้ดทั้งหมดใหม่ จึงสามารถคง การเยื้องและการขึ้นบรรทัดใหม่ ของผู้ใช้ไว้ได้อย่างแม่นยำ
• ฉากถูกเรนเดอร์เป็น SVG

การเรนเดอร์และตัวแปลงไฟล์

• การเรนเดอร์ข้อความและสมการทำด้วย MathJax
• เพื่อรองรับข้อความหลายบรรทัด มีการนำอัลกอริทึมการตัดคำของ TeX และ อัลกอริทึมตัดบรรทัด Knuth-Plass มาเขียนใหม่
• ด้วยการทำงานนี้ ข้อความหลายบรรทัดที่แสดงในแอปจึงมักตรงกับวิธีที่ TeX จะเรนเดอร์ข้อความเดียวกันอย่างแม่นยำ
• ตัวเลือกสีแบบกำหนดเองจะแปลงสี RGB เป็นสีที่ใกล้ที่สุดซึ่งสามารถแสดงด้วยสตริง xcolor แบบสั้นได้
  • ตัวอย่าง: #409a40 จะถูกแปลงเป็น violet!88!white!45!green
  • โค้ดที่เกี่ยวข้องเผยแพร่เป็น npm package xcolor-rgb-convert
• การนำเข้าจากไฟล์หลายรูปแบบอาศัยตัวแปลงที่พัฒนาแยกต่างหาก
  • svg2tikz
  • pptx2tikz, พัฒนาบนพื้นฐานของ pptxtojson
  • ipe2tikz
• แอปเดสก์ท็อปสามารถวางวัตถุจาก PowerPoint และ Keynote ได้โดยตรง
  • การวางจาก Keynote ใช้ตัวแปลความรูปแบบคลิปบอร์ดของ keynote และเผยแพร่เป็น npm package keynote-clipboard
• ความสามารถ AI ของแอปเดสก์ท็อปให้บริการผ่าน Codex App Server
• ตัวแก้ไขซอร์สถูกสร้างบน CodeMirror

[GN⁺]

ความคิดเห็นจาก Hacker News

• ลองใช้มานิดหน่อยแล้ว UI สวยมาก และตัวโปรเจกต์เองก็ดีมากด้วย ยินดีด้วย
  แต่คิดว่า โค้ด TikZ ที่สร้างออกมายังไม่ค่อยดีนัก ทุกอย่างใช้พิกัดสัมบูรณ์ ทั้งที่ใน TikZ แทบไม่จำเป็นต้องทำแบบนั้น
  เช่น แค่วางโหนดเดียวก็มีพิกัดสัมบูรณ์แล้ว ทั้งที่ถ้าเขียนแค่ \node {Hello}; TikZ ก็จะวางไว้กลางกรอบขอบเขตเอง ไม่จำเป็นต้องระบุว่าอยู่ที่ (0.5,2.91) แบบเคสทดสอบ
  ตอนเลือกหลายโหนดแล้วใช้ฟีเจอร์อย่าง “จัดแนวล่าง” ก็น่าจะใช้ความสามารถด้านการจัดแนวของ TikZ เช่น anchor แทนการไปแก้พิกัดสัมบูรณ์ เข้าใจนะว่าการสร้างโค้ดแบบนี้ยากกว่า แต่ก็น่าจะเป็นแนวทางที่ควรพิจารณาในเวอร์ชันถัดไป

  • เป็นฟีดแบ็กที่ดีมาก ส่วนที่ยากผมว่ามันไม่ใช่การสร้างโค้ดเสียทีเดียว แต่เป็นการตัดสินว่า ผู้ใช้คาดหวังพฤติกรรมแบบไหน
    เวลากดปุ่ม “จัดแนวล่าง” ถ้าโค้ดอย่าง
    \begin{tikzpicture} \draw (0,2) rectangle (1,1); \draw (1.5,2) rectangle (2.5,1); \end{tikzpicture}
    อยู่ๆ ถูกแปลงเป็น \coordinate ที่ตั้งชื่อแบบสุ่มพร้อมการเขียนพิกัดสัมพัทธ์ ก็คงทำให้ผู้ใช้ตกใจได้
    ในทางกลับกัน ถ้าเริ่มจากโค้ดที่ “สวย” ตั้งแต่แรก แอปก็มักจะไม่สามารถให้ลากวัตถุได้ในหลายกรณี เพราะไม่รู้ว่าการลากนั้นควรหมายถึงอะไร หรือบางครั้งก็ไม่มีทางรู้ได้จริงๆ เช่น จะเป็นการแก้พิกัดที่ตั้งชื่อไว้ หรือแก้ออฟเซ็ตจากพิกัดนั้น
    ในส่วนอื่นของการสนทนานี้ก็มีการพูดถึงวิธีจัดวางแบบ “right of” ด้วย และมีข้อเสนอที่ดีหลายอย่าง: https://news.ycombinator.com/item?id=48647683
  • ฟีเจอร์พวกนี้น่าจะอ้างอิงแนวทางจาก ภาษา scripting ของ CAD ได้

• เผื่อมีคนสงสัย โปรเจกต์นี้ทำมาอย่างค่อนข้างสม่ำเสมอตั้งแต่ กุมภาพันธ์ 2026
  ตลอดเวลาที่ผ่านมาใช้โทเคนกับโปรเจกต์นี้ผ่าน Codex ไปประมาณ 700 ล้านโทเคน และตัวเลขนี้ยังไม่รวมการอ่านจากแคช ถ้าคิดเป็นค่า API ก็น่าจะราว 15,000 ดอลลาร์ แต่ที่จ่ายจริงมีแค่ค่าสมาชิก ChatGPT ประมาณ 500 ดอลลาร์

• ผมชอบ CircuitiTikZ มาก มันแทบจะเป็นวิธีเดียวสำหรับการวาด แผนผังวงจรแบบข้อความ ที่ใช้งานง่าย
  https://ctan.org/pkg/circuitikz?lang=en
  https://github.com/circuitikz/circuitikz
  เมื่อหลายปีก่อนผมเอามันไปเชื่อมกับ asciidoctor-diagram เพื่อให้ใส่วงจรง่ายๆ ลงในคู่มือบำรุงรักษา Asciidoc ได้ พวกช่างภาคสนามชอบกันมาก และช่วยให้ทำงานร่วมกันใน ecosystem ของการควบคุมเวอร์ชันด้วย Git ได้ แทนที่จะต้องเจอเครื่องมือสุดโหดร้ายที่ PDM/ERP โยนมาให้
  มันยังเป็นตัวเสริมที่ดีมากของ WireViz ที่ยอดเยี่ยมอยู่แล้วด้วย: https://github.com/wireviz/WireViz

• เจ๋งมาก https://q.uiver.app/ ก็ดีเหมือนกัน เป็นเครื่องมือที่เฉพาะทางกว่านี้ซึ่งสร้างโดย https://github.com/varkor

  • ใช่แล้ว มีเอดิเตอร์ที่เฉพาะทางกว่านี้อยู่หลายตัว ตัวอย่างที่ดีคือ https://tikzit.github.io/, https://www.circuit2tikz.tf.fau.de/designer/, https://tikzcd.yichuanshen.de/
  • ตอนเรียนมหาวิทยาลัยผมใช้ LyX และพอใจมาก ทุกวันนี้ก็ยังมีการบ้านกับโน้ตเลกเชอร์เก็บไว้อยู่ครบ
    https://www.lyx.org/

• สวยมาก แต่ขอถามคำถามที่ต้องโผล่มาแน่ๆ ว่า การรองรับ cetz จะยากแค่ไหน?
  ถ้าเลี่ยงได้ก็ไม่อยากแตะ LaTeX และตอนนี้ผมใช้ Typst ตลอด

  • ถ้าใช้ coding agent ก็น่าจะพอเป็นไปได้มากทีเดียว
    ตอนนี้มีซอฟต์แวร์ทำพรีเซนเทชันแบบ WYSIWYG เต็มรูปแบบบน Typst อยู่แล้ว ซึ่งสร้างด้วย vibe coding และบางตัวก็ทำฟีเจอร์แบบนั้นได้ตรงๆ
    https://codeberg.org/presenst/presenst

• ตอนเป็นนักเรียนผมอยากได้อะไรแบบนี้มาก ขอบคุณที่ทำเป็น โอเพนซอร์ส
  บังเอิญว่าอาจารย์ทฤษฎีวิทยาการคอมพิวเตอร์ของผมคือ Till Tantau ผู้สร้าง TikZ เขาอธิบายเก่งมากจริงๆ

  • คนจาก Schleswig-Holstein อยู่ทุกที่เลย :) Till Tantau ยังเป็นคนเริ่มทำ แพ็กเกจ beamer สำหรับสร้างสไลด์นำเสนอด้วย LaTeX ด้วย
    ทั้ง beamer และ TikZ ถือเป็นผลงานสำคัญมากต่อการสื่อสารทางวิทยาศาสตร์

• เยี่ยมมาก
  ผมรู้ว่าหลายคนชอบ แต่ผมเกลียดการเขียน TikZ ตรงๆ มาก เลยย้ายภาพเชิงเทคนิคส่วนใหญ่ไปทำใน draw.io/diagrams.net แล้ว export เป็น PNG แทน มันอาจไม่หรูมากแต่ใช้งานได้ดีพอ และทำผลงานที่ดูดีได้ง่าย ปกติแล้วผมมักชอบสิ่งที่นิยามด้วยข้อความมากกว่า
  ถ้าเป็นรูปที่อยู่ใน Markdown ผมก็ย้ายบางส่วนไปใช้ Mermaid แต่ยังไม่เคยลองให้มันทำงานใน TeX
  ถึงอย่างนั้น วิธีที่เป็นธรรมเนียมในการทำไดอะแกรมใน LaTeX ก็ยังใกล้กับ TikZ อยู่ดี ดังนั้นการมี เอดิเตอร์แบบ WYSIWYG ก็น่าจะมีประโยชน์
  ขอเสนออย่างหนึ่งคือ ถ้าให้ลูกศร “ติด” กับกล่องได้ก็น่าจะดี คือพอย้ายกล่องแล้วปลายลูกศรก็ย้ายตามไปด้วย draw.io ทำแบบนั้นได้

  • สำหรับ text node มี anchor อยู่แล้ว ดังนั้นการ เชื่อมติด จึงทำงานได้ ตอนวาดเส้นใหม่หรือขยับเส้นเดิม คุณน่าจะเห็นจุดเชื่อมสีเขียว
    ถ้าใช้ draw.io ผมแนะนำให้ export เป็น PDF แทน PNG เพื่อให้ยังคงเป็นกราฟิกแบบเวกเตอร์
  • ไฟล์ draw.io เซฟเป็น .drawio.svg ได้ไม่ใช่เหรอ?
    ผมเคยทำไดอะแกรมแบบนั้นมาสองสามครั้ง แล้วใช้ Computer Modern เพื่อให้ภาพดูกลมกลืนกับเนื้อความ เท่านั้นก็เพียงพอแล้ว

• หน้าตาดีมาก น่าจะเพิ่ม preset สักสองสามแบบเพื่อให้เริ่มต้นได้ง่ายขึ้น เช่นโครงสร้าง neural network ที่พบบ่อย หรือ use case อื่นๆ ของ TikZ

  • เป็นความคิดที่ดี ตอนนี้มี File > Open Example อยู่แล้ว แต่ก็ยังมีพื้นที่ให้ขยายได้อีกชัดเจน บนเดสก์ท็อปยังเปิด paper จาก arXiv ได้โดยตรงด้วย

• โอ้โห น่าทึ่งจริงๆ ผมใช้ ChatGPT ทำไดอะแกรม TikZ มาสักพักแล้ว และพูดตรงๆ ว่าการทำไดอะแกรม TikZ ไม่ใช่เรื่องง่าย แต่ถ้าทำได้ดีผลลัพธ์ก็สวยมาก
  เพียงแต่การให้ ChatGPT ช่วยปรับแก้ไดอะแกรมแบบละเอียดนั้นค่อนข้างยาก เพราะความรู้ของผมเกี่ยวกับไวยากรณ์และการทำงานของ TikZ ไม่ได้ละเอียดพอเสมอไป เลยทำให้ได้ผลลัพธ์ที่ต้องการยากในบางครั้ง ดังนั้นเครื่องมือนี้ดูเหมือนจะเป็นคำตอบพอดี ตั้งตารอที่จะลองใช้
  อนึ่ง ผมยังใช้ ChatGPT สร้างเอกสาร LaTeX สำหรับบล็อก แล้วไป render ฝั่งเซิร์ฟเวอร์ด้วย ซึ่ง workflow นั้นเข้าท่ามาก