HN प्रस्तुति: Mermaid class diagram एडिटिंग के लिए GUI

Mermaid class diagram एडिट करने के लिए GUI

• Mermaid chart के फायदे: जटिल diagrams को तेज़ी से व्यक्त करने वाले Mermaid charts हालिया updates के कारण अब class diagram एडिटिंग को और अधिक सहज और आसान बनाते हैं। नया फीचर visual editor का विस्तार करता है ताकि class diagrams के साथ direct interaction संभव हो सके, और यह users को diagram अनुभव बेहतर बनाने के लिए कई तरह के tools देता है.

Class diagram क्या है?

• Class diagram की परिभाषा: यह UML (Unified Modeling Language) का एक प्रकार है, जो system की structure को model करके classes, attributes, methods और objects के बीच के relationships दिखाता है। यह object-oriented design में एक आवश्यक tool है और system के अलग-अलग हिस्से कैसे interact करते हैं, इसे visualize करने में मदद करता है.
• मूल तत्व:
  • Class: किसी object या concept को दर्शाता है.
  • Attribute: class की विशेषता या property.
  • Method: वह काम या operation जो class कर सकती है.
  • Relationship: classes के बीच connection या interaction को दर्शाता है.

नए visual editor tools

• Tool परिचय: visual editor toolbar class diagrams के लिए कई नए tools पेश करता है.
  • Diagram rendering direction बदलना: diagram के layout को adjust करता है.
  • नई class जोड़ना: diagram में आसानी से नई class जोड़ें.
  • Title और note जोड़ना: diagram में title जोड़ें या ऐसा note insert करें जो किसी specific class से जुड़ा न हो.
  • Empty namespace जोड़ना: किसी specific namespace से संबंधित classes के लिए placeholder define करता है.
  • Diagram configuration update: empty member boxes की visibility जैसे options को toggle करके साफ-सुथरा appearance बनाए रखता है.
  • Theme और layout बदलना: अलग-अलग themes चुनें और diagram का appearance adjust करें.

नई classes और relationships बनाना

• Classes और relationships बनाने का तरीका:
  • मौजूदा relationship से नई class बनाना: diagram की किसी existing class पर क्लिक करें, फिर खाली जगह तक drag करें ताकि नई class बन जाए और original class के साथ direct relationship सेट हो जाए.
  • मौजूदा classes के बीच relationship बनाना: एक class से दूसरी class तक relationship line drag करके जल्दी से relationship सेट करें.

Class details एडिट करना

• Class properties संशोधित करना: visual editor code के बिना class properties बदलने के लिए एक शक्तिशाली interactive interface देता है। class की हर property को बारीकी से configure किया जा सकता है.
  • Attributes: visibility modifier define करें, data type सेट करें, attribute name तय करें.
  • Methods: method visibility सेट करें, return type define करें, method name और parameters तय करें.

Diagram optimization के लिए अतिरिक्त tips

• अलग-अलग layouts आज़माएँ: layout और theme options का उपयोग करके diagram का सबसे उपयुक्त appearance खोजें.
• Notes से context जोड़ें: note feature का उपयोग करके diagram के हिस्सों की व्याख्या करें और जटिल relationships को स्पष्ट करें.

शुरुआत करें

• Mermaid visual editor tools का उपयोग: नए features को explore करके class diagrams को अधिक efficient और accessible बनाएं। चाहे आप नया diagram शुरू से बना रहे हों या किसी मौजूदा diagram को बेहतर कर रहे हों, ये updates समय और मेहनत बचाते हैं और आपको system के design और structure पर ध्यान केंद्रित करने देते हैं.

[GN⁺]

Hacker News की राय

• Mermaid के फ्रंटएंड के तौर पर मैं आम तौर पर Claude इस्तेमाल करता/करती हूँ। जब जटिल ideas समझाने होते हैं, Claude के जल्दी बनाए diagrams समझाना कहीं आसान बना देते हैं
  मेरे पास Mermaid का paid account भी है, लेकिन वैसे भी Claude का सबसे ज़्यादा इस्तेमाल करता/करती हूँ, इसलिए पहला entry point अभी भी Claude ही है। GUI से मेरी उम्मीद यह है कि ऐसे जल्दी बनाए diagrams में style और colors लगाए जा सकें, और automatic layout से बेहतर arrows दिखें इसलिए boxes को थोड़ा move किया जा सके
  ब्लॉग देखकर लगता है कि अलग-अलग boxes का color और styling बदलने की सुविधा शायद न भी हो, जबकि code में manually करने पर इसी हिस्से में सबसे ज़्यादा समय लगता है, इसलिए rich tools हों तो अच्छा होगा

  • दिलचस्प है, लेकिन जानना चाहूँगा/चाहूँगी कि कोई रुकावट तो नहीं आई? पिछले हफ्ते Claude से एक toy grammar का syntax diagram बनवाया था, तो unescaped special characters की वजह से Mermaid source में syntax error आ गया था
    Claude का अपना Mermaid widget होने के बावजूद मैं उससे अपने code की गलती ठीक नहीं करवा पाया/पाई

• मैं Mermaid product team से Dominic हूँ। अगर मौजूदा product issues, improvement requests, या कोई बात करना चाहें, तो [e-mail] पर email करें या calendar में समय बुक करें: https://calendly.com/dominic-01w/mermaid-shapers-product-int...

  • मैं जानना चाहता/चाहती हूँ कि Mermaid diagrams web browser के बाहर render कब होंगे: https://github.com/mermaid-js/mermaid/issues/2485
    मैंने KeenWrite(https://keenwrite.com/) नाम का Markdown editor बनाया है, और triple backtick syntax से diagrams embed करने की सुविधा दी है। यह diagram- prefix parse करके graphviz जैसे words Kroki(https://kroki.io/) को पास करता है, और Kroki Mermaid सहित कई ASCII diagrams render करता है
    Markdown में source code snippets आम तौर पर triple backticks के बाद language identifier लगाकर fixed-width font में दिखाए जाते हैं, लेकिन GitHub ने Mermaid diagrams के लिए de facto standard बनाते हुए इस convention को तोड़ दिया—यह फैसला अफसोसजनक है
  • browserless rendering वाले सवाल से सहमत हूँ। अब तक मैंने Selenium setup को headless builds के लिए adjust करने की कोशिश की और असफल रहा/रही, और text भी गलत render हुआ
    अगर कोई tool व्यापक रूप से अपनाया जाना चाहता है, तो PoC से आगे की basic feature के तौर पर browserless rendering सर्वोच्च प्राथमिकता होनी चाहिए
  • अच्छा होगा अगर diagram components एक-दूसरे से न टकराएँ, इसके लिए layout control और बेहतर हो। मांग आसान नहीं होगी, लेकिन गलत जगह रखे गए components काफी बार दिखते हैं, और इसे हल करना Mermaid की बड़ी ताकत बन सकता है

• हाल में इसे इस्तेमाल किया और शुरुआत में अच्छा लगा। ChatGPT ने भी Mermaid diagrams काफी अच्छे generate किए, लेकिन इसके अपने AI features मैंने try नहीं किए
  हालांकि, medium complexity का diagram बनाने के बाद Whiteboard feature से manually drag करके layout सुधारने की कोशिश की, तो experience काफी डगमगा गया। मनचाही जगह पर arrange करना या drag करना ठीक से नहीं हो रहा था, और overlaps भी solve करना मुश्किल था। कुछ diagram types में Whiteboard support न होना भी खटका
  mermaidchart.com और mermaid.live के feature differences भी confusing हैं। यह समझ नहीं आता कि ये competing products हैं या मिलते-जुलते apps के variants, और “Playground” और “Live Editor” नाम भी confusing हैं। फिर भी इसका होना अच्छा है और उम्मीद है कि यह लगातार improve होगा

  • मैं Mermaid CEO हूँ। Whiteboard अभी शुरुआती stage में है, इसलिए आने वाले कुछ महीनों में इसमें काफी सुधार होने वाला है
    mermaidchart.com और mermaid.live एक ही team चलाती है। Mermaid.live 10 साल पुराने open-source project का original editor और पूरी तरह open-source hosted editor है
    Mermaid के creator ने हाल में GitLab CEO के venture studio के साथ मिलकर mermaidchart.com बनाया, और इसे अधिक users और enterprise-grade features के लिए expand किया जा रहा है। कंपनी open core है और venture funding मिली है, लेकिन Mermaid project open source ही रहेगा और उसमें investment जारी रहेगा
  • शायद Mermaid की मूल समस्या यही है कि layout आपकी चाही हुई तरह नहीं, बल्कि Mermaid की “चाही हुई” तरह से ही होता है। लंबे समय से बहुत बड़े खाली spaces बनते रहे हैं, और मनचाहा layout बनाना मुश्किल रहा है

• auto-layout algorithm वाले diagram tools मैं मुख्यतः सिर्फ तब इस्तेमाल करता/करती हूँ जब debugging के लिए visualizations को programmatically बनाना हो। Documentation के लिए मैं OmniGraffle में हाथ से ड्रॉ करना पसंद करता/करती हूँ
  graphviz जैसे tools से graph को सुंदर बनाना बहुत जटिल है, और आखिर में मनचाहा रूप पाने के लिए features को workaround की तरह abuse करना पड़ता है
  मुझे लगता है कि सच में जिसकी जरूरत है, वह है readability और aesthetics को ध्यान में रख सकने वाला machine learning आधारित graph layout algorithm। अब तक जो मिले, वे बड़े graphs दिखाने की तरफ ज्यादा झुके हुए थे, इसलिए लगभग किसी दूसरे क्षेत्र जैसे लगे
  अगर Mermaid UI में होने वाले सारे edit points collect कर रहा है, तो यह काफी अच्छा dataset बन सकता है

  • हम ऐसा layout engine बना रहे हैं और बेच रहे हैं, और इसे यहाँ आजमा सकते हैं: https://play.d2lang.com/?script=qlDQtVOo5AIEAAD__w%3D%3D&lay...
    बड़ा example यहाँ है: https://play.d2lang.com/?script=rJLfavMwDMXv_RR6gYbvo3ce7FWG...
    competitor के लेख में self-promotion करना मुझे पसंद नहीं है, लेकिन Mermaid के अपने layout engine बनाने से हमारी सीधी competition नहीं है, इसलिए इस context में यह relevant लगता है
  • इस क्षेत्र को देखते समय मिले कुछ दिलचस्प links ये हैं। Graphviz जैसी general-purpose graph drawing library, लेकिन ज्यादा options और control के साथ ELK: https://eclipse.dev/elk/
    ELK विकसित करने वाली Kiel University team का experiment: https://github.com/kieler/KLighD
    Kieler project wiki: https://rtsys.informatik.uni-kiel.de/confluence/display/KIEL...
    constraint-based graph drawing library: https://www.adaptagrams.org/, JS implementation: https://ialab.it.monash.edu/webcola/
    इसके अलावा HOLA paper https://ialab.it.monash.edu/~dwyer/papers/hola2015.pdf, Confluent Graphs demo https://www.aviz.fr/~bbach/confluentgraphs/, orthogonal layout paper https://arxiv.org/pdf/1408.4626.pdf, power graph compression paper https://arxiv.org/pdf/1311.6996v1.pdf भी देखने लायक हैं
  • मैं Mermaid product team से Dominic हूँ। Whiteboard हमने इसलिए launch किया था ताकि users को exact वही layout पाने में मदद मिले जो वे चाहते हैं, लेकिन यह अभी शुरुआती stage में है, इसलिए इसमें काफी सुधार कर रहे हैं
    मैं समझता हूँ कि auto-layout algorithms Mermaid की एक बड़ी appeal हैं क्योंकि वे speed देते हैं, लेकिन current layout कभी-कभी थोड़ा ज्यादा उलझ सकता है
    machine learning model का idea दिलचस्प है, और मुझे जानना है कि readable और visually अच्छे diagrams की basic requirements क्या हैं। जैसे, edges right-angled होने चाहिए या rounded—ऐसे criteria हो सकते हैं। अगर आप अपने thoughts share कर सकें तो कृपया [e-mail] पर mail करें
  • मैं ऐसा tool बना रहा/रही हूँ जो diagrams को code के रूप में लिखने वाली syntax के साथ rendering constraints define करने वाली syntax जोड़ता है। उदाहरण के लिए, यह हिस्सा उस हिस्से के बाईं तरफ होना चाहिए, या यह arrow उस arrow से cross नहीं होना चाहिए
    उम्मीद है कि इससे consistent diagram rendering और last-pixel-level polishing बहुत आसान हो जाएगी। अभी Cassowary इस्तेमाल करने वाले renderer का बहुत शुरुआती alpha version काम कर रहा है, और एक अच्छा GUI बना रहा/रही हूँ

• “Create your account” पर ही दिलचस्पी खत्म हो गई। Account बनाने से पहले editor आजमा सकूँ, और जब तक पसंद न आए तब तक browser local storage में save कर सकूँ, तो अच्छा होगा

• मुझे अच्छा लगता है कि Mermaid लगातार बेहतर हो रहा है। sequence diagrams के लिए https://sequencediagram.org/ मेरे हिसाब से सबसे अच्छा है। मैं इससे जुड़ा नहीं हूँ, बस एक संतुष्ट user हूँ

  • पहले collaborative diagram session में इसे इस्तेमाल किया था और यह आसान व simple लगा। हालांकि Mermaid की core बात portability है। Markdown documents में embed करना और कई editors व platforms पर देख पाना महत्वपूर्ण है
  • Mermaid Chart product team के नजरिए से, मुझे लगता है कि Mermaid की sequence diagram functionality भी काफी चमकती है। जानना चाहूँगा कि https://sequencediagram.org/ Mermaid sequence diagrams से किस तरह बेहतर है
  • दूसरे editors भी आजमाए, लेकिन आखिर में हमेशा sequencediagram.org पर लौट आया/आई। यह बस अच्छे से काम करता है और झंझट कम है
  • MermaidChart का sequence diagram editor मुझे sequencediagram.org से बेहतर लगता है
  • sequencediagram.org शायद PlantUML इस्तेमाल करता है, इसलिए website के बिना local में भी वही काम किया जा सकता है

• दर्शन अलग है, यह समझता/समझती हूँ, लेकिन अच्छा होगा अगर कभी Mermaid को LaTeX के अंदर इस्तेमाल किया जा सके। कम-से-कम Mermaid को TikZ में भरोसेमंद ढंग से बदलने वाला कोई टूल भी हो, तो slides तैयार करना कहीं आसान हो जाएगा
  PNG/JPG में export करना भी संभव है, लेकिन आम तौर पर काफी customization खो जाती है, और पेज में fit करने के लिए size बढ़ाने या घटाने भर तक ही बात रह जाती है
  कल इसे देखते-देखते इस पोस्ट में पेश किया गया नया GUI भी दिखा, और आखिर में PNG export करके उसे Beamer page layout में fit कराने में काफी मशक्कत करनी पड़ी

• Draw.io Mermaid diagrams embed करता है और VSCode व कई IDE plugins भी हैं; तो यह खास क्यों है, यह जानना चाहूँगा/चाहूँगी

  • Draw.io का Mermaid integration और VSCode/IDE plugins अच्छे हैं, लेकिन वे मुख्यतः diagram की programmatic editing को support करते हैं
    Mermaid Chart की अलग बात bidirectional editing है। आप code बदलकर diagram बदल सकते हैं, और diagram को सीधे बदलने पर वह बदलाव अपने-आप code में reflect हो जाता है
    फिलहाल यह bidirectional editing class diagrams और flowcharts में उपलब्ध है, और आगे इसे दूसरे लोकप्रिय diagram types तक बढ़ाने की योजना है
  • प्रतिस्पर्धा innovation के लिए अच्छी है और options सभी के लिए अच्छे हैं। क्या इसका खास होना ज़रूरी है?

• “Theme Customization in Toolbar” image render नहीं हो रही

• Project अपने-आप में शानदार है, लेकिन दार्शनिक तौर पर मुझे संदेह है
  Mermaid diagrams का Markdown बनने की कोशिश है, इसलिए plain text में edit और consume किया जा सकना सबसे अहम है। अगर visual editor इस्तेमाल करना ही पड़े, तो फिर कोई ज्यादा powerful tool लेकर restrictive format से बाहर क्यों न निकलें, यह समझ नहीं आता
  यह WYSIWYG Markdown editor जैसा है। बेशक इसका niche market होगा, लेकिन अगर ऐसा ही करना है तो Google Docs या MS Word इस्तेमाल कर लेना चाहिए, ऐसा लगता है