HN เปิดตัว: GUI สำหรับแก้ไข Mermaid Class Diagram

 (docs.mermaidchart.com)
1 คะแนน โดย GN⁺ 2025-01-19 | 1 ความคิดเห็น | แชร์ทาง WhatsApp

GUI สำหรับแก้ไข Mermaid Class Diagram

  • ข้อดีของ Mermaid chart: Mermaid chart ที่ช่วยแสดงไดอะแกรมซับซ้อนได้อย่างรวดเร็ว ตอนนี้การแก้ไข class diagram ใช้งานได้ตรงไปตรงมาและง่ายขึ้นจากอัปเดตล่าสุด ฟีเจอร์ใหม่นี้ขยาย visual editor ให้รองรับการโต้ตอบกับ class diagram ได้โดยตรง พร้อมมอบเครื่องมือหลากหลายให้ผู้ใช้ยกระดับประสบการณ์การทำไดอะแกรม

Class Diagram คืออะไร?

  • คำจำกัดความของ class diagram: เป็นรูปแบบหนึ่งของ UML (Unified Modeling Language) ที่ใช้จำลองโครงสร้างของระบบ โดยแสดงคลาส แอททริบิวต์ เมธอด และความสัมพันธ์ระหว่างอ็อบเจ็กต์ เป็นเครื่องมือสำคัญในการออกแบบเชิงวัตถุ ช่วยให้มองเห็นได้ว่าชิ้นส่วนต่าง ๆ ของระบบโต้ตอบกันอย่างไร
  • องค์ประกอบพื้นฐาน:
    • คลาส: แทนอ็อบเจ็กต์หรือแนวคิด
    • แอททริบิวต์: คุณลักษณะหรือคุณสมบัติของคลาส
    • เมธอด: งานหรือการดำเนินการที่คลาสสามารถทำได้
    • ความสัมพันธ์: แสดงการเชื่อมโยงหรือการโต้ตอบระหว่างคลาส

เครื่องมือใหม่ใน visual editor

  • แนะนำเครื่องมือ: แถบเครื่องมือของ visual editor เพิ่มเครื่องมือใหม่หลายอย่างสำหรับ class diagram
    • เปลี่ยนทิศทางการเรนเดอร์ไดอะแกรม: ปรับเลย์เอาต์ของไดอะแกรม
    • เพิ่มคลาสใหม่: เพิ่มคลาสใหม่เข้าไปในไดอะแกรมได้อย่างง่ายดาย
    • เพิ่มชื่อเรื่องและโน้ต: เพิ่มชื่อเรื่องให้ไดอะแกรมหรือแทรกโน้ตที่ไม่ได้เชื่อมกับคลาสใดโดยเฉพาะ
    • เพิ่ม namespace ว่าง: กำหนด placeholder สำหรับคลาสที่อยู่ใน namespace เฉพาะ
    • อัปเดตการตั้งค่าไดอะแกรม: สลับตัวเลือกต่าง ๆ เช่น การมองเห็นของ "empty member boxes" เพื่อให้หน้าตาดูสะอาดตา
    • เปลี่ยนธีมและเลย์เอาต์: เลือกธีมได้หลากหลายและปรับรูปลักษณ์ของไดอะแกรม

การสร้างคลาสและความสัมพันธ์ใหม่

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

การแก้ไขรายละเอียดของคลาส

  • ปรับแก้คุณสมบัติของคลาส: visual editor มอบอินเทอร์เฟซแบบโต้ตอบที่ทรงพลังสำหรับแก้ไขคุณสมบัติของคลาสได้โดยไม่ต้องเขียนโค้ด และสามารถปรับรายละเอียดของแต่ละองค์ประกอบในคลาสได้อย่างละเอียด
    • แอททริบิวต์: กำหนด visibility modifier, ตั้งค่า data type, และระบุชื่อแอททริบิวต์
    • เมธอด: ตั้งค่า visibility ของเมธอด, กำหนด return type, และระบุชื่อเมธอดกับพารามิเตอร์

เคล็ดลับเพิ่มเติมเพื่อปรับไดอะแกรมให้เหมาะสม

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

เริ่มต้นใช้งาน

  • ใช้ประโยชน์จากเครื่องมือ visual editor ของ Mermaid: ลองสำรวจฟีเจอร์ใหม่เพื่อทำให้ class diagram มีประสิทธิภาพและเข้าถึงได้ง่ายยิ่งขึ้น ไม่ว่าจะสร้างไดอะแกรมใหม่ตั้งแต่ต้นหรือปรับปรุงไดอะแกรมเดิม อัปเดตเหล่านี้ช่วยประหยัดเวลาและแรงงาน และทำให้คุณโฟกัสกับการออกแบบและโครงสร้างของระบบได้มากขึ้น

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

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

 
GN⁺ 2025-01-19
ความคิดเห็นจาก Hacker News

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

    • น่าสนใจ แต่สงสัยว่าไม่มีอะไรติดขัดบ้างหรือเปล่า สัปดาห์ที่แล้วผมให้ Claude ทำ ไดอะแกรมไวยากรณ์ ของไวยากรณ์เล่น ๆ อันหนึ่ง ปรากฏว่าเกิดข้อผิดพลาดทางไวยากรณ์ในซอร์ส Mermaid เพราะมีอักขระพิเศษที่ไม่ได้ escape
      ทั้งที่ Claude เองมีวิดเจ็ต Mermaid อยู่แล้ว แต่ก็ยังทำให้มันแก้ข้อผิดพลาดในโค้ดของตัวเองไม่ได้

  • ผม Dominic จากทีมผลิตภัณฑ์ Mermaid ถ้ามีปัญหาเกี่ยวกับผลิตภัณฑ์ที่ใช้อยู่ คำขอปรับปรุง หรือเรื่องที่อยากคุยด้วย โปรดส่งอีเมลมาที่ dominic@mermaidchart.com หรือนัดเวลาผ่านปฏิทินได้ที่: https://calendly.com/dominic-01w/mermaid-shapers-product-int...

    • อยากรู้ว่าไดอะแกรม Mermaid จะ เรนเดอร์นอกเว็บเบราว์เซอร์ ได้เมื่อไร: https://github.com/mermaid-js/mermaid/issues/2485
      ผมทำตัวแก้ไข Markdown ชื่อ KeenWrite(https://keenwrite.com/) และทำให้สามารถฝังไดอะแกรมด้วยไวยากรณ์แบ็กทิกสามตัวได้ โดยพาร์สคำนำหน้า diagram- แล้วส่งคำอย่าง graphviz ไปให้ Kroki(https://kroki.io/) และ Kroki จะเรนเดอร์ไดอะแกรม ASCII หลายชนิดรวมถึง Mermaid
      ใน Markdown ชิ้นส่วนซอร์สโค้ดเดิมทีใช้วิธีใส่ตัวระบุภาษาต่อท้ายแบ็กทิกสามตัวเพื่อแสดงด้วยฟอนต์ความกว้างคงที่ แต่เป็นการตัดสินใจที่น่าเสียดายที่ GitHub ทำลายขนบนี้ด้วยการสร้างมาตรฐานโดยพฤตินัยสำหรับไดอะแกรม Mermaid
    • เห็นด้วยกับคำถามเรื่องการเรนเดอร์แบบไม่มีเบราว์เซอร์ จนถึงตอนนี้เคยพยายามปรับการตั้งค่า Selenium สำหรับบิลด์แบบ headless แต่ไม่สำเร็จ และข้อความก็เรนเดอร์ผิดด้วย
      ถ้าเป็นเครื่องมือที่ต้องการให้มีการใช้อย่างแพร่หลาย ผมคิดว่า การเรนเดอร์แบบไม่มีเบราว์เซอร์ ควรเป็นความสามารถพื้นฐานที่สำคัญที่สุด เหนือกว่าระดับ PoC
    • อยากให้ การควบคุมการจัดวาง ดีขึ้นเพื่อไม่ให้องค์ประกอบในไดอะแกรมชนกันเอง คงเป็นคำขอที่ไม่ง่าย แต่ผมเจอองค์ประกอบที่ถูกวางผิดค่อนข้างบ่อย และถ้าแก้จุดนี้ได้ก็อาจเป็นข้อได้เปรียบใหญ่ของ Mermaid

  • ช่วงหลังผมลองใช้สิ่งนี้ และตอนแรกก็ชอบ ChatGPT เองก็สร้างไดอะแกรม Mermaid ได้ค่อนข้างดี แต่ผมยังไม่ได้ลองฟีเจอร์ AI ในตัว
    แต่พอสร้างไดอะแกรมที่มีความซับซ้อนระดับกลางแล้วพยายามลากเองในฟีเจอร์ Whiteboard เพื่อปรับเลย์เอาต์ให้ดีขึ้น มันกลับแกว่งมาก จัดให้อยู่ตำแหน่งที่ต้องการหรือลากไม่ค่อยได้ และแก้ปัญหาการทับซ้อนก็ยาก น่าเสียดายด้วยที่ไดอะแกรมบางประเภทไม่รองรับ Whiteboard
    ความแตกต่างของฟีเจอร์ระหว่าง mermaidchart.com กับ mermaid.live ก็ทำให้งง ไม่รู้ว่าเป็นผลิตภัณฑ์คู่แข่งกันหรือเป็นรูปแบบต่าง ๆ ของแอปที่คล้ายกัน และชื่อ “Playground” กับ “Live Editor” ก็ชวนสับสน แต่ก็ยังดีใจที่มีอยู่ และหวังว่าจะพัฒนาต่อไป

    • ผมเป็น CEO ของ Mermaid Whiteboard ยังอยู่ในช่วงเริ่มต้น ดังนั้นจะมีการปรับปรุงค่อนข้างมากในอีกไม่กี่เดือนข้างหน้า
      mermaidchart.com และ mermaid.live ดำเนินงานโดยทีมเดียวกัน Mermaid.live คือเอดิเตอร์ดั้งเดิมของโปรเจกต์โอเพนซอร์สอายุ 10 ปี และเป็นเอดิเตอร์แบบโฮสต์ที่เป็นโอเพนซอร์สเต็มรูปแบบ
      ผู้สร้าง Mermaid เพิ่งร่วมกับเวนเจอร์สตูดิโอของ CEO GitLab สร้าง mermaidchart.com ขึ้นมา และกำลังขยายเพื่อรองรับผู้ใช้จำนวนมากขึ้นและฟีเจอร์ระดับองค์กร บริษัทเป็นแบบ open core และได้รับเงินลงทุนจาก VC แต่โปรเจกต์ Mermaid จะยังคงเป็นโอเพนซอร์สต่อไปและจะลงทุนต่อเนื่อง
    • การที่มันจัดวางได้เฉพาะในแบบที่ Mermaid “ต้องการ” ไม่ใช่แบบที่ผู้ใช้ต้องการ อาจเป็น ปัญหาพื้นฐานของ Mermaid ก็ได้ ตั้งแต่ก่อนหน้านี้ก็มีพื้นที่ว่างขนาดใหญ่เกิดขึ้น และทำให้ได้เลย์เอาต์ตามที่ต้องการได้ยาก

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

    • เรากำลังสร้างและขายเอนจินจัดวางแบบนั้นอยู่ และลองใช้ได้ที่นี่: https://play.d2lang.com/?script=qlDQtVOo5AIEAAD__w%3D%3D&lay...
      ตัวอย่างที่ใหญ่กว่านี้อยู่ที่นี่: https://play.d2lang.com/?script=rJLfavMwDMXv_RR6gYbvo3ce7FWG...
      ปกติไม่ชอบโปรโมตตัวเองในโพสต์ของคู่แข่ง แต่ในบริบทนี้คิดว่าเกี่ยวข้อง เพราะไม่ได้แข่งขันกับ Mermaid ในด้านการสร้างเอนจินจัดวางของตัวเอง
    • ลิงก์น่าสนใจที่พบระหว่างสำรวจสาขานี้ มี ELK ซึ่งเป็นไลบรารีวาดกราฟทั่วไปคล้าย Graphviz แต่มีตัวเลือกและการควบคุมมากกว่า: https://eclipse.dev/elk/
      การทดลองจากทีม Kiel University ผู้พัฒนา ELK: https://github.com/kieler/KLighD
      วิกิโครงการ Kieler: https://rtsys.informatik.uni-kiel.de/confluence/display/KIEL...
      ไลบรารีวาดกราฟแบบอิงข้อจำกัด: https://www.adaptagrams.org/, ส่วน implementation ใน JS: https://ialab.it.monash.edu/webcola/
      นอกจากนี้ก็น่าอ่านเอกสาร HOLA https://ialab.it.monash.edu/~dwyer/papers/hola2015.pdf, เดโม Confluent Graphs https://www.aviz.fr/~bbach/confluentgraphs/, เอกสารเรื่องการจัดวางแบบมุมฉาก https://arxiv.org/pdf/1408.4626.pdf, และเอกสารเรื่องการบีบอัด power graph https://arxiv.org/pdf/1311.6996v1.pdf
    • ผม Dominic จากทีมผลิตภัณฑ์ Mermaid ครับ เราเปิดตัว Whiteboard เพื่อช่วยให้ผู้ใช้ได้เลย์เอาต์ที่ตรงตามต้องการ แต่ยังอยู่ในช่วงเริ่มต้นและกำลังปรับปรุงอีกมาก
      เข้าใจดีว่าอัลกอริทึมจัดวางอัตโนมัติเป็นเสน่ห์สำคัญของ Mermaid เพราะช่วยให้ทำงานได้เร็ว แต่เลย์เอาต์ปัจจุบันก็มีบางครั้งที่พันกันซับซ้อนเกินไป
      ไอเดียโมเดลแมชชีนเลิร์นนิงน่าสนใจ และผมอยากรู้ว่าเงื่อนไขพื้นฐานของไดอะแกรมที่อ่านง่ายและดูดีคืออะไร เช่น เส้นควรเป็นมุมฉากหรือควรโค้งมน เป็นต้น ถ้าแชร์ความคิดได้ กรุณาอีเมลมาที่ dominic@mermaidchart.com
    • กำลังสร้างเครื่องมือที่ผสาน ไวยากรณ์สำหรับเขียนไดอะแกรมเป็นโค้ด เข้ากับไวยากรณ์สำหรับกำหนดข้อจำกัดในการเรนเดอร์ เช่น ส่วนนี้ต้องอยู่ทางซ้ายของส่วนนั้น หรือ ลูกศรนี้ต้องไม่ตัดกับลูกศรนั้น
      หวังว่าจะช่วยให้การเรนเดอร์ไดอะแกรมอย่างสม่ำเสมอและการเก็บรายละเอียดระดับพิกเซลสุดท้ายง่ายขึ้นมาก ตอนนี้เรนเดอร์เรอร์เวอร์ชันอัลฟ่าช่วงแรกมาก ๆ ที่ใช้ Cassowary ทำงานได้แล้ว และกำลังสร้าง GUI ที่ดีอยู่

  • เห็น “Create your account” แล้วหมดความสนใจทันที อยากให้ลองใช้ตัวแก้ไขได้ก่อนสร้างบัญชี และบันทึกไว้ใน พื้นที่จัดเก็บภายในของเบราว์เซอร์ ได้จนกว่าจะถูกใจ

  • ชอบที่ Mermaid ดีขึ้นเรื่อย ๆ สำหรับ sequence diagram ผมคิดว่า https://sequencediagram.org/ ดีที่สุด ไม่ได้เกี่ยวข้องอะไร เป็นแค่ผู้ใช้ที่พอใจเท่านั้น

    • เคยใช้ในเซสชันทำไดอะแกรมร่วมกันมาก่อน และชอบที่ใช้ง่ายและเรียบง่าย แต่แก่นสำคัญของ Mermaid คือ ความสามารถในการพกพา จุดสำคัญคือสามารถฝังในเอกสาร Markdown และดูได้ในหลาย editor และหลายแพลตฟอร์ม
    • ในมุมของทีมผลิตภัณฑ์ Mermaid Chart ผมมองว่าฟีเจอร์ sequence diagram ของ Mermaid ก็โดดเด่นพอสมควร อยากรู้ว่า https://sequencediagram.org/ ดีกว่า sequence diagram ของ Mermaid ตรงไหน
    • ลองใช้ editor อื่น ๆ มาแล้ว แต่สุดท้ายก็กลับไปที่ sequencediagram.org เสมอ มันใช้งานได้ดีและยุ่งยากน้อย
    • รู้สึกว่า editor สำหรับ sequence diagram ของ MermaidChart ดีกว่า sequencediagram.org
    • sequencediagram.org น่าจะใช้ PlantUML ดังนั้นจึงทำงานแบบเดียวกันในเครื่องได้โดยไม่ต้องใช้เว็บไซต์

  • เข้าใจว่าปรัชญามันต่างกัน แต่ก็อยากให้มีวันที่ใช้ Mermaid ภายใน LaTeX ได้ อย่างน้อยถ้ามีเครื่องมือที่แปลง Mermaid เป็น TikZ ได้อย่างเสถียร ก็น่าจะทำให้การเตรียมสไลด์ง่ายขึ้นมาก
    ส่งออกเป็น PNG/JPG ก็ทำได้ แต่โดยทั่วไปจะเสียความสามารถในการปรับแต่งไปมาก และทำได้แค่ขยายหรือย่อขนาดเพื่อให้พอดีกับหน้าเท่านั้น
    เมื่อวานลองดูเรื่องนี้อยู่ แล้วก็ได้เห็น GUI ใหม่ที่แนะนำในบทความนี้ด้วย สุดท้ายต้องส่งออกเป็น PNG แล้วลำบากกับการปรับให้เข้ากับเลย์เอาต์หน้าของ Beamer

  • Draw.io ก็ฝังไดอะแกรม Mermaid ได้ และ VSCode กับปลั๊กอินของ IDE หลายตัวก็มีอยู่แล้ว เลยสงสัยว่าสิ่งนี้พิเศษตรงไหน

    • การผสาน Mermaid ของ Draw.io และปลั๊กอิน VSCode/IDE นั้นดี แต่ส่วนใหญ่รองรับการแก้ไขไดอะแกรมแบบ เชิงโปรแกรม
      จุดต่างของ Mermaid Chart คือการแก้ไขแบบสองทาง สามารถแก้โค้ดเพื่อเปลี่ยนไดอะแกรมได้ และถ้าแก้ไดอะแกรมโดยตรง การเปลี่ยนแปลงนั้นจะสะท้อนกลับไปในโค้ดโดยอัตโนมัติ
      ตอนนี้การ แก้ไขแบบสองทาง นี้ใช้ได้กับไดอะแกรมคลาสและโฟลว์ชาร์ต และมีแผนจะขยายไปยังประเภทไดอะแกรมยอดนิยมอื่น ๆ ในอนาคต
    • การแข่งขันดีต่อการสร้างนวัตกรรม และตัวเลือกก็ดีต่อทุกคน จำเป็นต้องพิเศษด้วยหรือ?

  • รูป “Theme Customization in Toolbar” ไม่เรนเดอร์

  • ตัวโปรเจกต์เองเจ๋งดี แต่ในแง่ปรัชญาก็ชวนให้ตั้งคำถาม
    Mermaid ตั้งใจจะเป็น Markdown ของไดอะแกรม ดังนั้นสิ่งสำคัญที่สุดคือ แก้ไขและใช้งานได้ด้วยข้อความธรรมดา ถ้าต้องใช้ตัวแก้ไขแบบภาพอยู่แล้ว ก็ไม่เข้าใจว่าทำไมไม่เอาเครื่องมือที่ทรงพลังกว่ามาใช้ แล้วหลุดพ้นจากรูปแบบที่มีข้อจำกัดไปเลย
    เรื่องนี้คล้ายกับตัวแก้ไข Markdown แบบ WYSIWYG แน่นอนว่าอาจมีตลาดเฉพาะอยู่ แต่ถ้าอย่างนั้นใช้ Google Docs หรือ MS Word ไปเลยไม่ดีกว่าหรือ