MonoSketch - เครื่องมือสร้างไดอะแกรมแบบอิง ASCII

 (monosketch.io)
17 คะแนน โดย GN⁺ 2026-02-14 | 1 ความคิดเห็น | แชร์ทาง WhatsApp
  • เว็บแอปพลิเคชันแบบ client-only ที่เปลี่ยนไอเดียให้เป็นแบบร่างเชิงภาพได้ด้วยข้อความล้วน
  • โอเพนซอร์สที่ เขียนด้วย Kotlin แล้วคอมไพล์เป็น JS ใช้ SASS/Tailwind
  • สามารถผสาน บล็อกรูปร่างพื้นฐาน เช่น สี่เหลี่ยม เส้น และกล่องข้อความ เพื่อแสดงโครงสร้างซับซ้อนหรือไดอะแกรมระบบ
  • ผ่าน ความสามารถด้านการจัดรูปแบบ ที่เปลี่ยนอักขระ ASCII ธรรมดาให้เป็นองค์ประกอบภาพในสไตล์ต่าง ๆ
  • เป็นเครื่องมือที่ช่วยให้ สร้างงานนำเสนอและอธิบายภาพได้ โดยไม่ต้องใช้ PowerPoint หรือ Google Slides

ภาพรวม

  • MonoSketch คือ แอปสำหรับสเก็ตช์และสร้างไดอะแกรมแบบ ASCII เป็นเครื่องมือสำหรับแสดงไอเดียในรูปแบบภาพ
    • ผ่านอินเทอร์เฟซแบบข้อความ ผู้ใช้สามารถประกอบแผนผังวงจร โครงสร้างระบบ หรือโฟลว์เครือข่ายที่ซับซ้อนด้วยอักขระ ASCII
    • ภายใต้สโลแกน “Unleash your ideas with ASCII” ทำให้การออกแบบเชิงภาพเป็นไปได้แม้ใช้เพียงข้อความธรรมดา

องค์ประกอบพื้นฐาน

  • มีฟังก์ชันวาดพื้นฐาน เช่น Rectangle, Line, Text box
    • รองรับ รูปแบบเส้นขอบ ที่หลากหลาย, อักขระเติมพื้น, และ ลูกศรตกแต่ง
    • รองรับ มุมโค้งมน เพื่อเพิ่มความสมบูรณ์ของงานภาพ
  • สภาพแวดล้อมแบบโต้ตอบที่เน้น ความสามารถในการแก้ไข
    • มี ผืนผ้าใบไม่สิ้นสุด รองรับการเลื่อนและซูมได้อย่างอิสระ
    • มี บันทึกอัตโนมัติ และ จัดการหลายโปรเจกต์
    • รองรับ คำสั่งแก้ไขมาตรฐาน เช่น คัดลอก ตัด วาง และทำซ้ำ
    • มี การจัดการเลเยอร์ และ smart snapping เพื่อจัดแนวรูปร่างได้อย่างแม่นยำ
    • รองรับ โหมดมืด
  • ความสามารถในการส่งออก
    • คัดลอกพื้นที่ที่เลือกหรือทั้งไดอะแกรมเป็น ข้อความได้ทันที
    • รองรับคีย์ลัด: macOS Cmd + Shift + C, Windows/Linux Ctrl + Shift + C
  • โรดแมปในอนาคต
    • ฟังก์ชันจัดกลุ่ม เพื่อจัดการรูปร่างในโครงสร้างที่ซับซ้อน
    • เครื่องมือระบายสี สำหรับวาดเส้นโค้งอิสระและการวาดแบบใช้อักขระ
    • มีแผนขยายฟีเจอร์ทำงานร่วมกัน เช่น การแชร์ผ่าน GitHub Gist และการโหลดผ่าน URL

แอปพลิเคชันและ UI

  • ใช้งานผ่านเว็บได้ที่ app.monosketch.io
    • มีม็อกอัปที่แสดงองค์ประกอบ UI เช่น ช่องค้นหา ปุ่ม เวิร์กสเปซ และแผงต่าง ๆ ในรูปแบบ ASCII
    • หน้าล็อกอินและฟอร์มสมัครสมาชิกก็ถูกแสดงภาพในรูปแบบ ASCII เช่นกัน
  • ด้วย ฟังก์ชันสร้างงานนำเสนอ จึงสามารถจัดทำสไลด์นำเสนอได้โดยไม่ต้องใช้ PowerPoint หรือ Google Slides

เทคโนโลยีสแตกและไลเซนส์

  • แอปทั้งหมดพัฒนาด้วย Kotlin/JS (พัฒนาด้วย Kotlin แล้วคอมไพล์เป็น JS)
  • ใช้ SASS และ Tailwind CSS สำหรับการจัดสไตล์
  • ใช้ระบบบิลด์ Gradle (รองรับโหมดพัฒนาแบบ hot reload)
  • มีตัวเลือกเซิร์ฟเวอร์พัฒนาแบบทางเลือกผ่าน Python 3.11+ และ Pipenv
  • โอเพนซอร์สภายใต้ Apache License 2.0

บทความที่เกี่ยวข้อง

1 ความคิดเห็น

 
GN⁺ 2026-02-14
ความคิดเห็นบน Hacker News

  • ฉันใช้ Monodraw อยู่
    เป็นการซื้อที่ คุ้มที่สุดครั้งหนึ่ง เท่าที่เคยมีมา

    • ฉันก็ใช้ Monodraw เหมือนกัน แต่มีจุดที่น่าเสียดายอยู่อย่างหนึ่ง
      คือจนถึงตอนนี้ก็ยังไม่มีฟังก์ชัน ปิดป๊อปอัปแก้ไขข้อความด้วยปุ่ม ESC
      ฉันเผลอกด ESC ทุกครั้ง แต่ไม่มีอะไรเกิดขึ้น เลยหงุดหงิดมาก
      เคยพยายามแพตช์ไบนารีเอง แต่กลไกอัปเดตพัง เลยยอมแพ้ไป
    • หลังจากย้ายจาก Mac ไป Windows แอปที่คิดถึงที่สุดคือ Monodraw
      แต่เครื่องมือตัวใหม่นี้ดูจะเป็น ตัวแทนที่ใช้ได้ดี มาก เลยตั้งใจว่าจะลองใช้แน่นอน
    • ตอนทำไดอะแกรม วาดเล่น หรือแต่งส่วนหัวของไฟล์คอนฟิก การเอา fig มาผสมกับกรอบและเงานั้นใช้งานสะดวกมาก
    • แม้จะเลิกใช้ Mac แล้ว มันก็ยังเป็นหนึ่งใน แอปที่คิดถึง อยู่ดี
    • สมัยก่อนฉันชอบ Monodraw บน Mac มาก
      ตอนนี้ใช้ Linux เป็นหลัก เลยกำลังหาแอปทดแทนอยู่ และเครื่องมือที่เห็นครั้งนี้ก็ดูเป็น ทางเลือกที่ใกล้เคียงที่สุด เท่าที่เคยเจอมา

  • เครื่องมือคล้ายกันก็มี TextPaint, Archetype (archive), Textik, Asciiflow, Fsymbols Draw เป็นต้น

    • แล้วก็อย่าลืม JavE ด้วย

  • แผนผังวงจรในส่วนหัวดูหยาบมาก จนเหมือน วงจรที่ AI สร้างผิดๆ
    สไตล์ของสัญลักษณ์ก็ไม่เหมือนกัน ป้ายกำกับขาก็ไม่มี และคาปาซิเตอร์มุมซ้ายบนก็ช็อตอยู่

    • ปัญหาไม่ใช่แค่ว่าผู้เชี่ยวชาญจะมองออกทันทีว่าอะไรผิด แต่คือ มือใหม่จะเรียนรู้ผิดๆ
      ถ้าเรียนจากของแบบนี้ ผู้เชี่ยวชาญในอนาคตก็จะเติบโตมาบนพื้นฐานที่ผิด
    • ฉันไม่ทันสังเกตว่าคาปาซิเตอร์ช็อตอยู่ แต่กลับตกใจที่มีการทำเส้นสั้นกว่า (ซึ่งปกติคือขั้วลบ) เป็นเครื่องหมาย “+” แล้วต่อเข้ากับ GND ตรงๆ

  • อยากพูดกับคนที่ใช้คำว่า ‘ASCII’ สักหน่อย
    จริงๆ แล้ว Monosketch ไม่ได้ใช้แค่ ASCII เท่านั้น
    ตัวอย่างเช่นมันใช้ อักขระยูนิโค้ด อย่าง “◎”(U+25CE)

    • ถึงอย่างนั้นบนหน้าแลนดิ้งเพจก็ยังเขียนตัวใหญ่ว่า “Unleash your ideas with ASCII” เลยอดขำไม่ได้ :-)
    • ถ้ามองในเชิงประวัติศาสตร์ อักขระสำหรับวาดเส้นหรือกรอบนั้นถูกเพิ่มเข้ามาใน Code page 437 สมัย IBM PC ไม่ใช่ ASCII แท้
      ถ้าจะวาดกรอบด้วย ASCII จริงๆ ก็ต้องใช้แค่ | กับ - เท่านั้น

  • ถ้าใช้ Emacs แพ็กเกจ uniline ก็มีประโยชน์มาก

  • Markdeep ก็สามารถวาดไดอะแกรมด้วย ASCII art ได้
    เป็น เครื่องมือที่สมบูรณ์ดีมาก ตัวหนึ่ง

  • แนะนำให้ตั้งค่าแอตทริบิวต์ spellcheck ใน HTML เป็น false
    ไม่อย่างนั้นป้ายกำกับอย่าง “GND”, “uF” จะมีเส้นใต้สีแดงเต็มไปหมด ทำให้ดูรกสายตา

  • Graph-Easy สร้าง ASCII เป็นค่าเริ่มต้น แต่ก็รองรับรูปแบบผลลัพธ์หลายแบบ เช่น อักขระกรอบ, SVG, PNG
    มันไม่ใช่แบบ WYSIWYG แต่เป็นรูปแบบที่ให้เขียนไดอะแกรมเป็นข้อความแล้วค่อยสร้างผลลัพธ์ออกมา

  • เพิ่งลองใช้เครื่องมือนี้ทำไดอะแกรมง่ายๆ ไปไม่กี่อัน ใช้งานง่ายและ คุณภาพการส่งออก ก็ดี
    แต่ก็มีจุดที่น่าจะปรับปรุงได้

    1. เวลาย้ายสี่เหลี่ยมเล็กๆ อยากให้มีฟีดแบ็กของ UI ที่ชัดกว่านี้ เพื่อให้รู้ว่ากำลังย้าย ไม่ใช่ซูม
    2. ถ้าเปิด Monosketch ในแท็บอื่น จะ สร้างไดอะแกรมใหม่พร้อมกันไม่ได้ — ดูเหมือนว่าจะใช้คอนเท็กซ์ร่วมกันระหว่างแท็บ

  • สำหรับแอปเนทีฟบน macOS ก็มี Monodraw เช่นกัน

    • แต่ตอนนี้ Monodraw อยู่ในสถานะ maintenance mode และเป็นแอปเสียเงิน
      จากชื่อแล้ว Monosketch ก็ดูเหมือนจะเป็น ตัวแทนที่ชัดเจน ของมัน