D2 (เครื่องมือแปลงข้อความเป็นไดอะแกรม) รองรับการเรนเดอร์แบบ ASCII แล้ว

• เพิ่มความสามารถในการเรนเดอร์ไดอะแกรมข้อความเป็น ASCII ใน D2 เวอร์ชัน 0.7.1
• สามารถใช้ ไดอะแกรม ASCII แบบเรียบง่าย ในคอมเมนต์ของโค้ดเพื่ออธิบายลำดับการทำงานของฟังก์ชันหรือคลาสได้
• โดยค่าเริ่มต้นจะใช้ อักขระ Unicode แต่สามารถเลือกใช้ ASCII มาตรฐานได้ด้วย option flag
• ฟีเจอร์นี้ยังอยู่ใน ขั้นอัลฟา จึงยังไม่รองรับบางสไตล์ อักขระพิเศษ และรูปทรงบางชนิด
• สามารถ ทดลองเรนเดอร์ ASCII ได้โดยตรง ใน D2 Playground และส่วนขยาย Vim เป็นต้น

---

แนะนำการเรนเดอร์ ASCII ของ D2

ตั้งแต่รีลีสล่าสุดของ D2 (เวอร์ชัน 0.7.1) ได้เพิ่ม ความสามารถในการส่งออกเป็น ASCII สำหรับไดอะแกรมข้อความ
ไฟล์เอาต์พุตที่มีนามสกุล .txt จะถูกเรนเดอร์ด้วยตัวเรนเดอร์ ASCII โดยอัตโนมัติ
สามารถดูตัวอย่างได้ใน ส่วนขยาย D2 สำหรับ Vim โดยเมื่อเปิดไฟล์ .d2 และดูผ่านหน้าต่างพรีวิว ก็สามารถตรวจสอบสถานะเอาต์พุตไดอะแกรม ASCII แบบเรียลไทม์ทุกครั้งที่บันทึกได้

การใช้งานในการจัดทำเอกสารโค้ด

ไดอะแกรม ASCII มีประโยชน์มากที่สุดเมื่อแทรกไว้ใน คอมเมนต์ของซอร์สโค้ด

• หากเพิ่มไดอะแกรมแบบง่ายไว้ข้างฟังก์ชันหรือคลาสขนาดเล็ก ก็จะช่วยให้เข้าใจโค้ดได้อย่างเป็นธรรมชาติมากกว่าการอธิบายลำดับการทำงานด้วยข้อความเพียงอย่างเดียว
• ในส่วนขยาย Vim สามารถเขียนโค้ด D2 แล้วแปลงส่วนที่เลือกให้เป็นไดอะแกรม ASCII ได้ทันที

การเลือกระหว่าง Unicode และ ASCII มาตรฐาน

การเรนเดอร์ ASCII แบบดีฟอลต์จะใช้อักขระวาดกรอบของ Unicode เพื่อให้เอาต์พุตดูสวยงามกว่า

• หากต้องการ ความเข้ากันได้สูงสุด ก็สามารถเรนเดอร์ด้วยอักขระ ASCII ปกติได้ผ่าน option flag --ascii-mode=standard

ข้อจำกัดในปัจจุบัน

ฟีเจอร์การเรนเดอร์ ASCII นี้ยังอยู่ใน ขั้นอัลฟา

• อาจยังมีเคสขอบ ความจุดที่ควรปรับปรุง และบั๊กอีกจำนวนมาก
• ผู้พัฒนาสนับสนุนให้ส่งรายงานบั๊กหรือฟีดแบ็กผ่านเว็บไซต์

ข้อจำกัดหลัก

• ยังไม่รองรับสไตล์
  • แอนิเมชัน ฟอนต์ เป็นต้น ไม่มีความหมายใน ASCII
  • มีแผนพิจารณารองรับสไตล์แบบจำกัดบางส่วนในอนาคต เช่น สีของเทอร์มินัล
  • ธีมก็ยังไม่รองรับ
  • double-border, multiple เป็นต้น อยู่ในรายการที่จะปรับปรุงในอนาคต
• ระยะห่างไม่สม่ำเสมอ
  • ในกระบวนการแปลงเป็น ASCII การจัดวางกล่องอาจไม่สม่ำเสมอเมื่อเทียบกับ SVG
• สิ่งที่ยังเรนเดอร์ไม่ได้
  • ยังไม่รองรับข้อความพิเศษ เช่น Markdown, Latex และโค้ด
  • ไม่สามารถเรนเดอร์รูปภาพ ไอคอน UML class และ SQL table ได้
  • สำหรับรายการเหล่านี้ จะตัดออกหรือแสดงเป็น placeholder จะตัดสินใจภายหลัง
• ยังไม่รองรับรูปทรงบางชนิด
  • รูปทรงเส้นโค้ง เช่น cloud หรือวงกลม แสดงผลใน ASCII ได้ไม่ดี
  • รูปทรงเหล่านี้จะถูกแทนด้วยสี่เหลี่ยม และเพิ่มไอคอนขนาดเล็กที่มุมซ้ายบนเพื่อแยกประเภท

ลองใช้งานด้วยตัวเอง

ฟีเจอร์นี้สามารถใช้งานได้ทันทีใน D2 Playground

• สามารถเปิดโค้ดบล็อกที่ให้มาแล้วทดลองเรนเดอร์ ASCII ได้ด้วยตัวเอง

[GN⁺]

ความเห็นใน Hacker News

• สวัสดีนักพัฒนาทุกคน อยากมาแชร์ฟีเจอร์ใหม่ที่เพิ่มเข้ามาเมื่อเช้านี้ ตอนนี้ยังอยู่ในช่วงอัลฟา และก็มี github issue ขึ้นมาแล้วหนึ่งรายการ ถ้าอยากข้ามบทความบล็อกไปลองดูเลย ก็เข้าไปดูได้ที่นี่ และตัวอย่างที่ใหญ่ขึ้นก็มีลิงก์นี้

  • ใน playground มันเรนเดอร์เป็นตัวอักษรสีดำบนพื้นหลังสีดำ เลยนึกว่าใช้ไม่ได้ น่าจะเป็นเพราะฉันเปิด dark mode อยู่ เรนเดอร์แบบอื่นปกติดี แต่ ascii มองไม่เห็น
  • ใน TFA หมายถึงแค่ถูก downscale จาก ELK อย่างเดียวหรือเปล่า อยากรู้ว่าถ้าจะใช้ฟีเจอร์นี้ต้องตั้งค่า ELK แบบ explicit หรือว่าจะเปิดให้อัตโนมัติเมื่อ output เป็น .txt อยู่แล้ว ปกติฉันก็ใช้ ELK กับไดอะแกรม d2 อยู่แล้วเป็นหลัก

• อยากรู้ว่าเมื่อเทียบกับ mermaid แล้วมันมีคุณค่าอย่างไรบ้าง ฉันชอบทั้งดีไซน์และวิธีการทำงานของมัน แต่อยากถามว่ามีเหตุผลเชิงปฏิบัติอะไรที่ทำให้ย้ายมาจาก mermaid ไหม อีกอย่างฉันรู้สึกว่าเครื่องมือแนวนี้มักขาดฟีเจอร์ให้ปรับตำแหน่งและขนาดของกล่องด้วยค่า x/y แบบ manual ในผลลัพธ์ที่สร้างอัตโนมัติ

  • ก็ขึ้นอยู่กับว่าคุณให้คุณค่ากับอะไร บางคนสองอย่างที่คุณพูดมาก็เพียงพอแล้ว และสำหรับคนอย่างพวกเรา จุดสำคัญคือเวลาเรนเดอร์ SVG จาก CLI ไม่ต้องใช้เบราว์เซอร์ chromium(กรณีที่เกี่ยวข้อง) แม้จะไม่ได้แสดงความต่างทั้งหมด แต่ก็มีเว็บเปรียบเทียบแบบย่ออยู่ด้วย และก็ไม่อยากโฆษณาสินค้าแบบเสียเงิน แต่ถ้าต้องการฟีเจอร์ปรับตำแหน่งและขนาดแบบ manual ที่ตรึงค่าไว้ได้ ก็มีให้ในIDE

• แม้ว่าไวยากรณ์ของ D2 จะน่าดึงดูดมาก แต่ที่ผ่านมาใช้ Mermaid มากกว่าเพราะ tooling ของมัน อย่างไรก็ตาม ฟีเจอร์นี้ถือว่าใหม่แบบใหญ่ ๆ และเป็นสิ่งที่ฉันไม่เคยเห็นใน Mermaid มาก่อน มันยังเชื่อมโยงกับ asciiflow.com ได้ดีด้วย

• ฟีเจอร์แปลงจาก ASCII นั้นดีมาก แต่เวลาต้องอัปเดตไดอะแกรม ฉันสงสัยว่าจะเอา D2 source ต้นฉบับกลับมาได้อย่างไร

• ฉันชอบ D2 มากกว่า mermaid มาโดยตลอด แต่ในความเห็นฉัน grid layout แทบจะไร้ประโยชน์เพราะปัญหานี้(issue ที่เกี่ยวข้อง) ถ้ายังต้องมานั่งจัดหน่วยพิกเซลเอง มันก็แทบไม่ต่างจากทำลายจุดประสงค์ของเครื่องมือประเภทนี้

  • ขอบคุณมาก! ดีใจที่บอกให้รู้ เรื่องนี้จะถูกรวมไว้ใน 0.7.2(รีลีสถัดไป)

• ฉันเคยดูแลรายชื่อเครื่องมือ text-to-diagram แบบเบราว์เซอร์และแชร์มันหลายครั้ง สิ่งที่เพิ่งรู้ไม่นานนี้คือ D2 เวอร์ชันออนไลน์ไม่ได้รันอยู่ในเบราว์เซอร์ล้วน ๆ แต่ใช้เซิร์ฟเวอร์แบ็กเอนด์สร้างไดอะแกรม อยากรู้ว่า D2 สามารถทำงานแบบฝั่งไคลเอนต์(ในเบราว์เซอร์)เพียงอย่างเดียวได้ไหม และส่วนขยายที่พูดถึงในโพสต์นี้จะทำงานแบบออฟไลน์ได้หรือเปล่า

  • ตอนนี้ทำได้แล้ว! (ตั้งแต่สัปดาห์ก่อน) ถ้าลองเปิด network tab ของ d2 playground จะเห็นว่ามันทำงานด้วย d2.js ซึ่งเป็น wrapper ที่ครอบ wasm port ของ D2 ไว้อีกชั้น ตอนนี้ยังไม่เปิดตัวอย่างเป็นทางการ แต่จะมีประกาศแยกในเร็ว ๆ นี้
  • ~~กำลังจะถามว่าขอดูรายชื่อได้ไหม~~ แก้ไข: เจอแล้ว! ขอบคุณ

• อยากให้มี Python repository อย่างเป็นทางการ อยากใช้ใน notebook แต่ตอนนี้เหมือนถูกบังคับให้ใช้ databricks อย่างเดียว เลยไม่ค่อยสะดวก

• หน้าตาดูดีมาก ฉันเคยเห็นโพสต์เรื่องรองรับ C4 ที่เคยลงไว้ก่อนหน้านี้ด้วย ไม่นานนี้ฉันจะต้องทำ C4 modeling เลยตั้งใจว่าจะลองดู

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

  • D2 รองรับการอัปเดต .svg แบบ live ผ่าน real-time HTTP server อยู่แล้วด้วย ถ้าเปิดเบราว์เซอร์คู่กับ vim ก็จะเห็นการอัปเดตแบบเรียลไทม์ได้เลย ฉันเจอ D2 เมื่อปีที่แล้ว และหลังจากนั้นก็ใช้กับไดอะแกรมทั้งหมด
  • ปกติไดอะแกรม ascii จะใช้ Moondraw แต่ถ้าอยู่ในสภาพแวดล้อม vim อยู่แล้ว เครื่องมือนี้ดีกว่ามาก

• extension ของ vim นี่เทพมาก

  • แต่ก็แปลกและน่าเสียดายอยู่นิดหน่อยที่เขียนด้วย vimscript