Nomnoml: टेक्स्ट grammar से बनने वाले UML diagrams

 (nomnoml.com)
2 पॉइंट द्वारा GN⁺ 2023-10-03 | 1 टिप्पणियां | WhatsApp पर शेयर करें
  • UML diagrams को code की तरह लिखने वाला एक टूल, जिसमें बाईं ओर की text grammar बदलने पर rendered diagram भी साथ में बदल जाता है
  • class, component, flowchart, usecase, database·table जैसे कई diagram elements और relationship line notation को support करता है
  • एडिट की गई सामग्री browser localStorage में सेव होती है, इसलिए अगली बार आने पर बनी रह सकती है, लेकिन save होना guaranteed नहीं है
  • canvas को दाईं ओर के 1/3 हिस्से में drag और scroll से move·zoom in/out किया जा सकता है, और editor Sublime Text key mapping का कुछ हिस्सा support करता है
  • # directives और . style directives से font, direction, spacing, color, line shape और custom classifier styles को adjust किया जा सकता है

टेक्स्ट grammar से बने diagrams

  • Nomnoml एक ऐसा टूल है जो text-based grammar से diagrams लिखता और render करता है

  • relationship line notation

    • association, dependency, generalization, implementation, composition, aggregation, ball and socket, note, hidden आदि का उपयोग किया जा सकता है
    • उदाहरण: [Car]->[Engine]
    • उदाहरण: [Car] +-> 0..* [RustPatch]
    • उदाहरण: [Car]o->[Manufacturer]
    • उदाहरण: [Car]<:-[Pickup]

  • supported classifiers

    • class diagram में basic class के साथ abstract, instance, reference, package, frame support होते हैं
    • component diagram में socket, lollipop notation का उपयोग किया जा सकता है
    • flowchart elements में start, end, state, choice, sync, input, sender, receiver, transceiver शामिल हैं
    • usecase diagram actor, usecase को support करता है
    • अन्य elements के रूप में note, label, hidden, database, pipe, table का उपयोग किया जा सकता है
      • table का उदाहरण [<table>Fruits| Apples | 17 || Oranges | 4711] के रूप में है

एडिटिंग, directives, styles

  • लाइन की शुरुआत में // को comment माना जाता है
    • [not //commented] की तरह लाइन के बीच का // comment नहीं है
  • id attribute का उपयोग करने पर एक जैसे display name वाले दो nodes को अलग nodes बनाया जा सकता है
    • उदाहरण: [<actor id=a>User], [<actor id=b>User], [a] -- [b]

  • # directives से layout और rendering control

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

  • . directives से classifier styles define करना

    • उदाहरण: #.box: fill=#8f8 dashed
    • उदाहरण: #.blob: visual=ellipse title=bold
    • fill, stroke, align, direction, visual जैसे key/value उपयोग किए जा सकते हैं
    • title=left,italic,bold, body=center,italic,bold की तरह title और body text style सेट किए जा सकते हैं
    • उपयोग के उदाहरणों में font बदलना, dense layout, table बनाना, custom styles, और कई files में विभाजन शामिल हैं
    • कई files में विभाजन #import: blobby_styles रूप का उपयोग करता है
    • एडिट स्क्रीन के बदलाव browser localStorage में सेव होते हैं, और canvas को दाईं ओर के 1/3 हिस्से में drag और scroll से move·zoom in/out किया जा सकता है
    • editor Sublime Text key mapping का कुछ हिस्सा support करता है, और Nomnoml को GitHub पर host किया गया है

संबंधित पढ़ाई

1 टिप्पणियां

 
GN⁺ 2023-10-03
Hacker News की राय

  • GitHub लिंक: https://github.com/skanaar/nomnoml

  • शुरू में यह काफ़ी उलझाने वाला लगा, और about बटन मिलने के बाद ही समझ आया
    शायद मैं भाग्यशाली रहा हूं कि UML को एक नज़र में पहचान नहीं पाता। पहले लगा कि यह किसी नकली pirate-speak grammar जैसी चीज़ समझा रहा है

    • UML पहचानने का तरीका यह है कि उसमें arrow styles की भरमार होती है जिन्हें कोई याद नहीं रखता। मुझे करीब 90% यकीन है कि यही UML के व्यापक रूप से न जम पाने की मुख्य वजह है
      कभी-कभी UML diagram पढ़ने के लिए 10 तरह के arrows याद करने वाला कोई नहीं है—इस बात को मान लेने वाला ऐसा तरीका मुझे कहीं बेहतर लगता है: https://buck2.build/docs/concepts/concept_map/
    • यह सख्ती से देखें तो शायद standard UML नहीं है
      हालांकि “UML” शब्द इस्तेमाल करने वाले कई tools के साथ ऐसा ही है, और व्यवहार में अक्सर theoretical UML से कम precise और कम verbose किसी चीज़ की ज़रूरत होती है

  • पहले “text to diagram” में बदलने वाले tools की तुलना करने वाली एक open-source site थी: https://text-to-diagram.com/
    nomnoml उस सूची में नहीं है

    • वह site D2 maintainers ने बनाई है, इसलिए bias हो सकता है, लेकिन फिर भी मुझे D2 syntax इस श्रेणी में—nomnoml सहित—सबसे friendly लगता है
      [1]: https://d2lang.com/

  • मुझे Nomnoml पसंद है। हाल में मैं इसे अपने browser-based personal knowledge management (PKM) project में hierarchical tag structure को visualize करने के लिए इस्तेमाल कर रहा हूं
    layout आम तौर पर काफ़ी साफ़-सुथरा निकलता है। उदाहरण: https://imgbox.com/9A1mDyNv

  • mobile side पर कुछ काम करने की ज़रूरत लगती है। फोन पर खोलने पर diagram editor के ऊपर draw हो गया, इसलिए editor इस्तेमाल नहीं कर पाया

    • वह सिर्फ nomnoml demo website का behavior है। सेटअप ऐसा है कि text edit करते ही rendered UML diagram real-time में बदलता दिखे
      नीचे की JavaScript library HTML canvas में या Node.js program से सीधे SVG में render कर सकती है, और चाहें तो command line से भी चला सकते हैं

  • पहले मैंने nomnoml से कुछ tools बनाए थे, जिनमें GPU assembly code के control flow graphs और dependency graphs भी शामिल थे
    यह सच में पसंद आया, लेकिन यह कमी खली कि कुछ खास elements को एक-दूसरे के पास reliably place करने के लिए मजबूर करने का तरीका नहीं था। बहुत बड़े diagrams में यह कभी-कभी खराब choices करके messy हो जाता है
    documentation पूरी नहीं थी, फिर भी code काफ़ी आसानी से modify हो जाता था, इसलिए मैं hover पर tooltip दिखाने और किसी खास box पर click करने से दूसरे diagram पर link करने जैसा hack कर पाया। इतना अच्छा tool open source है, इसके लिए आभारी हूं

  • अच्छा layout पाना definition order पर बहुत ज़्यादा निर्भर करता है। बड़े diagrams में यह user के लिए मुश्किल हो सकता है, लेकिन छोटे diagrams में ठीक लगता है
    उदाहरण के लिए, वही pirate example अलग order में लिखने पर valid होते हुए भी खराब दिखने वाला layout देता है

    • ऐसे tools की समस्या यह है कि documentation में किसी तरह अच्छा layout मिल भी जाए, तो कुछ add/delete/modify करते ही फिर से जूझना पड़ता है
      मैंने ऐसे कई code-based diagram products आज़माए, क्योंकि सपना था कि diagrams समेत technical docs project source code का हिस्सा बनें; लेकिन बाहरी distribution के लिए तो क्या, internal use के लिए भी acceptable layout पाना मुश्किल था
      यह frustration आम तौर पर दो खराब नतीजों में बदलती है: diagram unreadable हो जाता है, या maintain नहीं होता
      सच कहूं तो check-in के समय docs का code review करने का idea भी लगभग myth जैसा है। ऐसे docs के diffs समझना बहुत मुश्किल होता है, और render करके output देखे बिना यह meaningful तरीके से verify करना लगभग असंभव है कि docs सही हैं
      यह ऐसी problem है जिसे मैं सच में solved देखना चाहता हूं, और शायद किसी दिन यह solved problem बन जाए
    • सुधार: मुझे लगा था कि placement ऊपर से नीचे होती है, लेकिन ऐसा नहीं था; order किसी और तरीके से तय होता है
      original Pirate table और parent comment की Pirate table की तुलना करें तो ऊपर-नीचे उलट जाते हैं। beard और parrot को desired display order में पहले define करने पर भी वे उल्टे ही आते हैं
    • एक और tool चाहिए जो resulting diagram में overlaps कम से कम करने के लिए statement permutations को optimize करे
    • यह pirate example समझने में ज़्यादा मदद नहीं करता। सोचता हूं कि क्या इन बेतरतीब शब्दों को अर्थपूर्ण ढंग से arrange करने का कोई तरीका है

  • देखने में अच्छा है, और PlantUML class diagrams से कहीं बेहतर लगता है
    [0]: https://plantuml.com/class-diagram

    • हो सकता है। लेकिन एक और fragmented standard बनाने के बजाय, क्या पहले से काफ़ी supported standard की default style को बेहतर नहीं बनाया जा सकता?
    • PlantUML sequence diagrams support करता है, जो मेरे सबसे ज़्यादा इस्तेमाल होने वाले diagram types में से एक हैं। अफ़सोस, nomnoml यह support नहीं करता

  • graphviz याद आ गया