Nomnoml: ไดอะแกรม UML ที่วาดด้วยไวยากรณ์แบบข้อความ

 (nomnoml.com)
2 คะแนน โดย GN⁺ 2023-10-03 | 1 ความคิดเห็น | แชร์ทาง WhatsApp
  • เครื่องมือสำหรับเขียนไดอะแกรม UML ราวกับเขียนโค้ด โดยเมื่อแก้ไข ไวยากรณ์แบบข้อความ ทางด้านซ้าย ไดอะแกรมที่เรนเดอร์แล้วก็จะเปลี่ยนตามไปด้วย
  • รองรับ องค์ประกอบของไดอะแกรม และการแสดงเส้นความสัมพันธ์หลายแบบ เช่น class, component, flowchart, use case, database และ table
  • เนื้อหาที่แก้ไขจะถูกบันทึกไว้ใน localStorage ของเบราว์เซอร์ และอาจยังคงอยู่เมื่อกลับมาเยี่ยมชมครั้งถัดไป แต่ไม่ได้รับประกันว่าจะถูกเก็บไว้เสมอ
  • แคนวาสสามารถ เลื่อนและซูมเข้า/ออก ได้ด้วยการลากและสกรอลล์ในพื้นที่ 1/3 ด้านขวา และตัวแก้ไขรองรับคีย์แมปบางส่วนของ Sublime Text
  • สามารถปรับฟอนต์ ทิศทาง ระยะห่าง สี รูปแบบเส้น และ สไตล์ classifier แบบกำหนดเอง ได้ด้วย directive # และ directive สไตล์ .

ไดอะแกรมที่ประกอบด้วยไวยากรณ์แบบข้อความ

  • Nomnoml เป็นเครื่องมือสำหรับเขียนและเรนเดอร์ไดอะแกรมด้วย ไวยากรณ์แบบข้อความ

  • การเขียนเส้นความสัมพันธ์

    • สามารถใช้ association, dependency, generalization, implementation, composition, aggregation, ball and socket, note, hidden เป็นต้น
    • ตัวอย่าง: [Car]->[Engine]
    • ตัวอย่าง: [Car] +-> 0..* [RustPatch]
    • ตัวอย่าง: [Car]o->[Manufacturer]
    • ตัวอย่าง: [Car]<:-[Pickup]

  • classifier ที่รองรับ

    • ไดอะแกรมคลาสรองรับ abstract, instance, reference, package, frame นอกเหนือจากคลาสพื้นฐาน
    • ในไดอะแกรม component สามารถใช้รูปแบบ socket, lollipop ได้
    • องค์ประกอบของ flowchart ได้แก่ start, end, state, choice, sync, input, sender, receiver, transceiver
    • ไดอะแกรม use case รองรับ actor, usecase
    • องค์ประกอบอื่น ๆ ที่ใช้ได้คือ note, label, hidden, database, pipe, table
      • ตัวอย่างตารางอยู่ในรูปแบบ [<table>Fruits| Apples | 17 || Oranges | 4711]

การแก้ไข, directive และสไตล์

  • // ที่ต้นบรรทัดจะถูกประมวลผลเป็น คอมเมนต์
    • // ที่อยู่กลางบรรทัด เช่น [not //commented] จะไม่ถือเป็นคอมเมนต์
  • หากใช้พร็อพเพอร์ตี id ก็สามารถทำให้โหนดสองตัวที่มีชื่อแสดงผลเหมือนกันเป็น คนละโหนด ได้
    • ตัวอย่าง: [<actor id=a>User], [<actor id=b>User], [a] -- [b]

  • ปรับ layout และการเรนเดอร์ด้วย directive #

    • #import: filename
    • #direction: down | right
    • #edges: hard | rounded
    • #background: transparent
    • #font, #fontSize, #spacing, #padding, #stroke, #fill, #zoom
    • #ranker: network-simplex | tight-tree | longest-path

  • กำหนดสไตล์ classifier ด้วย directive .

    • ตัวอย่าง: #.box: fill=#8f8 dashed
    • ตัวอย่าง: #.blob: visual=ellipse title=bold
    • สามารถใช้คีย์/ค่าอย่าง fill, stroke, align, direction, visual ได้
    • สามารถกำหนดสไตล์ข้อความของหัวเรื่องและเนื้อหาได้ เช่น title=left,italic,bold, body=center,italic,bold
    • ตัวอย่างการใช้งานครอบคลุมการเปลี่ยนฟอนต์, layout แบบกระชับ, การสร้างตาราง, สไตล์กำหนดเอง และการแยกหลายไฟล์
    • การแยกหลายไฟล์ใช้รูปแบบ #import: blobby_styles
    • การเปลี่ยนแปลงในหน้าจอแก้ไขจะถูกบันทึกไว้ใน localStorage ของเบราว์เซอร์ และแคนวาสสามารถเลื่อนกับซูมเข้า/ออกได้ด้วยการลากและสกรอลล์ในพื้นที่ 1/3 ด้านขวา
    • ตัวแก้ไขรองรับคีย์แมปบางส่วนของ Sublime Text และ Nomnoml โฮสต์อยู่บน GitHub

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

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

 
GN⁺ 2023-10-03
ความคิดเห็นจาก Hacker News

  • ลิงก์ GitHub: https://github.com/skanaar/nomnoml

  • ตอนแรกค่อนข้างงง และเพิ่งเข้าใจหลังจากหา ปุ่ม about เจอ
    บางทีอาจโชคดีที่ใช้ชีวิตมาโดยไม่สามารถมอง UML แล้วเข้าใจได้ทันที ตอนแรกนึกว่ากำลังอธิบายไวยากรณ์อะไรสักอย่างที่เป็นภาษาพูดแบบโจรสลัดปลอม ๆ

    • วิธีสังเกตว่าเป็น UML คือมี รูปแบบลูกศร เต็มไปหมด ซึ่งไม่มีใครจำได้ ผมมั่นใจราว 90% ว่านั่นคือเหตุผลหลักที่ UML ไม่ได้ปักหลักแพร่หลาย
      ผมคิดว่าวิธีแบบนี้ดีกว่ามาก เพราะยอมรับความจริงว่าไม่มีใครมานั่งจำลูกศร 10 แบบเพื่ออ่านไดอะแกรม UML เป็นครั้งคราว: https://buck2.build/docs/concepts/concept_map/
    • อันนี้ถ้าพูดให้เคร่งครัด ผมว่าไม่น่าจะใช่ UML มาตรฐาน
      แต่เครื่องมือจำนวนมากที่ใช้คำว่า “UML” ก็เป็นแบบนั้น และในทางปฏิบัติก็มักต้องการอะไรที่แม่นยำน้อยกว่าและเยิ่นเย้อน้อยกว่า UML เชิงทฤษฎี

  • เมื่อก่อนเคยมีไซต์โอเพนซอร์สที่เปรียบเทียบเครื่องมือแปลง “ข้อความเป็นไดอะแกรม”: https://text-to-diagram.com/
    nomnoml ไม่ได้อยู่ในรายการ

    • ไซต์นั้นทำโดย ผู้ดูแล D2 เลยอาจมีอคติได้ แต่ถึงอย่างนั้นผมก็ยังคิดว่าไวยากรณ์ของ D2 เป็นมิตรที่สุดในกลุ่มนี้ รวมถึงเมื่อเทียบกับ nomnoml ด้วย
      [1]: https://d2lang.com/

  • ชอบ Nomnoml ช่วงหลังใช้มันในการแสดงโครงสร้างแท็กแบบลำดับชั้นในโปรเจกต์ การจัดการความรู้ส่วนบุคคล (PKM) บนเบราว์เซอร์ที่กำลังทำอยู่
    เลย์เอาต์ออกมาค่อนข้างเรียบร้อย ตัวอย่าง: https://imgbox.com/9A1mDyNv

  • ฝั่งมือถือดูเหมือนต้องปรับปรุง เปิดบนโทรศัพท์แล้ว ไดอะแกรมถูกวาดทับบนเอดิเตอร์ จนใช้เอดิเตอร์ไม่ได้

    • นั่นเป็นแค่พฤติกรรมของเว็บไซต์เดโมของ nomnoml เท่านั้น เป็นการจัดวางเพื่อแสดงว่าเมื่อแก้ไขข้อความ ไดอะแกรม UML ที่เรนเดอร์แล้วจะเปลี่ยนแบบเรียลไทม์
      ไลบรารี JavaScript ที่อยู่ข้างใต้สามารถเรนเดอร์โดยตรงไปยัง HTML canvas หรือ SVG จากโปรแกรม Node.js ได้ และถ้าต้องการก็รันจาก command line ได้ด้วย

  • เมื่อก่อนเคยสร้างเครื่องมือหลายอย่างด้วย nomnoml รวมถึงกราฟ control flow และกราฟ dependency ของ โค้ดแอสเซมบลี GPU ด้วย
    ชอบมากจริง ๆ แต่เสียดายที่ไม่มีวิธีบังคับอย่างเสถียรให้องค์ประกอบบางอย่างถูกจัดวางไว้ใกล้กัน ในไดอะแกรมขนาดใหญ่มาก ๆ บางครั้งมันเลือกได้ไม่ดีจนดูรก
    ถึงเอกสารจะไม่สมบูรณ์นัก แต่โค้ดก็แก้ค่อนข้างง่าย เลยแฮ็กให้แสดง tooltip เมื่อเอาเมาส์ไปวาง และให้คลิกกล่องบางกล่องแล้วลิงก์ไปยังไดอะแกรมอื่นได้ ขอบคุณที่เครื่องมือดี ๆ แบบนี้เป็นโอเพนซอร์ส

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

    • ปัญหาของเครื่องมือแบบนี้คือ แม้จะหาทางทำให้ได้เลย์เอาต์ดี ๆ ในเอกสารแล้ว ทันทีที่เพิ่ม ลบ หรือแก้อะไรสักอย่าง ก็ต้องกลับมาปล้ำกับมันใหม่
      ผมเคยลองใช้ผลิตภัณฑ์ ไดอะแกรมที่อิงโค้ด หลายตัว เพราะฝันถึงโลกที่เอกสารเทคนิคซึ่งรวมถึงไดอะแกรมกลายเป็นส่วนหนึ่งของซอร์สโค้ดโปรเจกต์ แต่การได้เลย์เอาต์ที่ยอมรับได้ โดยเฉพาะสำหรับเผยแพร่ภายนอก แม้แต่ใช้ภายในก็ยังยาก
      ความหงุดหงิดนั้นมักลงเอยด้วยผลลัพธ์แย่ ๆ สองอย่าง คือไดอะแกรมอ่านไม่ออก หรือไม่ถูกดูแลต่อ
      พูดตรง ๆ ไอเดียที่ว่าเอกสารจะถูก code review ตอนเช็กอินก็แทบจะเป็นตำนาน diff ของเอกสารแบบนี้เข้าใจยากมาก และแทบเป็นไปไม่ได้ที่จะตรวจอย่างมีความหมายว่าเอกสารถูกต้องหรือไม่โดยไม่เรนเดอร์แล้วดูผลลัพธ์
      เป็นปัญหาประเภทที่อยากให้แก้ได้จริง ๆ และสักวันหนึ่งอาจกลายเป็นปัญหาที่ถูกแก้แล้วก็ได้
    • แก้ไข: ตอนแรกนึกว่าจัดจากบนลงล่าง แต่ไม่ใช่ และมันกำหนดลำดับด้วยวิธีอื่น
      ถ้าเทียบตาราง Pirate เดิมกับตาราง Pirate ของคอมเมนต์แม่ จะเห็นว่าบนล่างกลับด้านกัน แม้จะนิยาม beard กับ parrot ก่อนตามลำดับที่อยากให้แสดง ก็ยังออกมากลับด้านอยู่ดี
    • ต้องมีเครื่องมืออีกตัวที่ช่วย ปรับ permutation ของประโยคให้เหมาะสม เพื่อให้ไดอะแกรมผลลัพธ์มีการซ้อนทับกันน้อยที่สุด
    • ตัวอย่างโจรสลัดนี้ไม่ได้ช่วยให้เข้าใจเท่าไร สงสัยว่าจะมีวิธีจัดเรียงคำที่ยุ่งเหยิงพวกนี้ให้สื่อความหมายได้ไหม

  • ดูดี และดูดีกว่า PlantUML class diagram มาก
    [0]: https://plantuml.com/class-diagram

    • อาจเป็นอย่างนั้น แต่ก็อดคิดไม่ได้ว่าแทนที่จะสร้างมาตรฐานที่แตกเป็นชิ้น ๆ อีกอันหนึ่ง เราน่าจะทำให้ สไตล์เริ่มต้น ของมาตรฐานที่มีการรองรับค่อนข้างมากอยู่แล้วดูดีขึ้นได้ไหม
    • PlantUML รองรับ sequence diagram ซึ่งเป็นหนึ่งในไดอะแกรมที่ผมใช้บ่อยที่สุด แต่น่าเสียดายที่ nomnoml ไม่รองรับ

  • นึกถึง graphviz