oxdraw - कोड-आधारित डायग्राम टूल

 (github.com/RohanAdwankar)
25 पॉइंट द्वारा GN⁺ 2025-10-27 | 1 टिप्पणियां | WhatsApp पर शेयर करें
  • oxdraw एक ‘Diagram as Code’ टूल है जो Rust में लिखा गया है, और कोड-आधारित डायग्राम को विज़ुअली एडिट करने तथा उन्हें पुनरुत्पादित किए जा सकने वाले रूप में बनाए रखने के लिए डिज़ाइन किया गया है
  • डायग्राम Mermaid सिंटैक्स में लिखे जाते हैं, और वेब इंटरफ़ेस के माध्यम से नोड की स्थिति, रंग, कनेक्शन लाइन आदि को drag करके समायोजित किया जा सकता है
  • विज़ुअल संशोधनों को Mermaid फ़ाइल के भीतर comments के रूप में सेव किया जाता है, जिससे अन्य Mermaid टूल्स के साथ संगतता बनी रहती है
  • यह CLI और React-आधारित वेब एडिटर से बना है, और command-line rendering तथा real-time editing mode दोनों को सपोर्ट करता है
  • यह कोड-जनरेटेड डायग्राम की उत्पादकता और विज़ुअल एडिटिंग की स्वतंत्रता को जोड़ता है, इसलिए Lucidchart जैसे GUI टूल्स के विकल्प के रूप में ध्यान आकर्षित कर रहा है

प्रोजेक्ट अवलोकन

  • oxdraw का लक्ष्य declarative और reproducible सिंटैक्स के माध्यम से उच्च-गुणवत्ता वाले डायग्राम को आसानी से बनाना और बनाए रखना है
    • डायग्राम Mermaid सिंटैक्स में लिखे जाते हैं, और विज़ुअल समायोजन वेब इंटरफ़ेस में किए जाते हैं
    • उपयोगकर्ता द्वारा विज़ुअली किए गए बदलाव मूल कोड में परिलक्षित होते हैं, जिससे version control और automation संभव होता है
  • संशोधनों को Mermaid फ़ाइल के भीतर comment के रूप में दर्ज किया जाता है, जिससे Mermaid ecosystem के अन्य टूल्स के साथ पूर्ण संगतता बनी रहती है
  • रिपॉज़िटरी Rust-आधारित CLI और React-आधारित वेब इंटरफ़ेस से बनी है, और CLI .mmd फ़ाइलों को इमेज में compile करता है

प्रोजेक्ट विज़न

  • डेवलपर ने पहले Mermaid का उपयोग आर्किटेक्चर डायग्राम या कोडबेस विज़ुअलाइज़ेशन के लिए किया था, लेकिन सूक्ष्म संपादन की सीमाओं के कारण उन्हें Lucidchart जैसे टूल्स पर जाना पड़ता था
  • oxdraw का लक्ष्य Mermaid की कोड-आधारित automation और Lucidchart की विज़ुअल स्वतंत्रता को एक साथ लाना है
  • इसके जरिए कोड-जनरेटेड डायग्राम की reproducibility, collaboration और automation की क्षमता बनाए रखते हुए, विज़ुअल गुणवत्ता को बेहतर बनाने की दिशा में काम किया गया है

उपयोग का तरीका

  • Cargo के माध्यम से इंस्टॉल किया जा सकता है: cargo install oxdraw
  • डायग्राम रेंडरिंग: oxdraw --input flow.mmd
  • interactive editor चलाना: oxdraw --input flow.mmd --edit
  • CLI Mermaid फ़ाइल को इनपुट के रूप में लेकर SVG या PNG आउटपुट बनाता है, और --edit विकल्प के साथ लोकल वेब एडिटर चलाता है

CLI फ़्लैग विवरण

  • -i, --input : Mermaid source फ़ाइल इनपुट
  • -o, --output : रेंडर किए गए आउटपुट को सेव करने का पथ
  • --png: PNG फ़ॉर्मेट में आउटपुट
  • --scale : PNG rendering scale समायोजित करें (डिफ़ॉल्ट 10.0)
  • --edit: विज़ुअल एडिटर चलाएँ
  • --serve-host / --serve-port : एडिटर सर्वर का पता और पोर्ट निर्धारित करें (डिफ़ॉल्ट 127.0.0.1:5151)
  • -b, --background-color : बैकग्राउंड रंग सेट करें (केवल SVG)
  • -q, --quiet: rendering complete message आदि का आउटपुट दबाएँ

फ़्रंटएंड फीचर्स

  • नोड और edge manipulation
    • चयनित नोड या edge हटाना (Delete/Backspace key सपोर्ट)
    • नोड रंग, बॉर्डर, टेक्स्ट रंग को अलग-अलग सेट और reset करना
    • edge color, line style (solid/dashed), arrow direction सेट करना
    • edge path में drag किए जा सकने वाले control point जोड़ना और हटाना
  • canvas और editor interaction
    • नोड drag करते समय grid snap और alignment guide दिखाना
    • Shift+arrow से नोड को move करना
    • edge handle को drag करके path बदलना, double-click से handle जोड़ना/हटाना
    • subgraph unit movement सपोर्ट — समूह के भीतर नोड और edge साथ में move होते हैं
    • source panel Mermaid फ़ाइल को real-time में reflect करता है, और autosave तथा status display (सेव हो रहा है/त्रुटि आदि) देता है
    • शीर्ष toolbar में वर्तमान फ़ाइल पथ और save status दिखाया जाता है

तकनीकी संरचना और लाइसेंस

  • Rust 55.7% , TypeScript 40.0% , CSS 3.4% , अन्य 0.9% से बना है
  • MIT लाइसेंस के तहत जारी, इसलिए स्वतंत्र रूप से उपयोग और संशोधन किया जा सकता है
  • वर्तमान में 506 Stars और 10 Forks हैं, और इसे समुदाय से सक्रिय रुचि मिल रही है

समग्र मूल्यांकन

  • oxdraw कोड-आधारित डायग्राम प्रबंधन की automation और विज़ुअल एडिटिंग की सहजता को जोड़ने वाला एक नया दृष्टिकोण है
  • यह Mermaid ecosystem के साथ पूर्ण संगतता बनाए रखते हुए Rust की performance और React के interactive UI का उपयोग करता है
  • यह डेवलपर्स और डिज़ाइनर्स दोनों के लिए सहयोग-सक्षम डायग्राम workflow प्रदान करने वाले टूल के रूप में उभर रहा है

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

1 टिप्पणियां

 
GN⁺ 2025-10-27
Hacker News राय

  • यह सच में एक शानदार प्रोजेक्ट है। Mermaid.js पर आधारित होना इस समय की सबसे लोकप्रिय declarative diagram library पर सही चुनाव लगता है।
    अगर और जटिल diagram types को support करना है, तो D2 Language को भी देखना चाहिए। यह कहीं अधिक flexible declarative approach देता है।

  • मैं व्यक्तिगत रूप से इसका MacPorts port बनाकर इस्तेमाल कर रहा हूँ।
    अगर इसका उपयोग बार-बार करने लगा, तो official MacPorts repository में योगदान देने का सोचूँगा।
    लेकिन Cargo release से जुड़े Git tag या GitHub release नहीं हैं, इसलिए packaging असुविधाजनक है।
    अभी के लिए मैं एक खास commit(9ccd9bf53f9a309ccda42b5c17e9c1056493fb90) को 0.1.0 release मानकर अस्थायी रूप से काम चला रहा हूँ।
    संबंधित port यहाँ देखा जा सकता है।

  • यह प्रोजेक्ट सच में वही है जिसकी मैं तलाश कर रहा था। Declarative diagram solution में एक फीचर है जिसे मैं ज़रूर देखना चाहूँगा।
    वह है mouse hover पर additional information या nested diagrams दिखाने वाला popup फीचर।

    • यह दिलचस्प विचार है। क्या वह popup व्यक्तिगत उपयोग के लिए है, या टीम के साथ share करने के लिए?
      उदाहरण के लिए, क्या आप link share करके popup और nesting सहित diagram तुरंत दिखाना चाहते हैं,
      या सिर्फ .mmd file share करके CLI में खोलना पर्याप्त होगा?
      दूसरा वाला जल्दी implement किया जा सकता है, लेकिन पहले वाले के लिए ngrok जैसे self-hosting या cloud deployment की ज़रूरत पड़ सकती है।
      या फिर HTML file में export करने का फीचर जोड़ा जा सकता है ताकि CLI के बिना भी popup काम करे।

  • प्रोजेक्ट सार्वजनिक करने पर बधाई। Declarative syntax से relationships को define करना और मौजूदा auto-layout से संभव न होने वाली fine-grained customization देना प्रभावशाली है।
    लेकिन Cargo.toml में MIT license लिखा है, जबकि repository में license file नहीं है।
    अगर इसे GitHub पर सीधे देखा जा सके, तो अच्छा रहेगा।

    • टूल की adoption बढ़ाने के लिए hosting पर विचार करने की सलाह दूँगा। Server-side code पर निर्भरता अधिक होने के कारण free static hosting मुश्किल लगती है।
    • license file जोड़ दी गई है। बताने के लिए धन्यवाद।

  • यह सच में ज़रूरी प्रोजेक्ट है। मैं मुख्य रूप से PlantUML का उपयोग करता हूँ, लेकिन components की संख्या 5 से ऊपर जाते ही layout ठीक करने में 20~30% समय लग जाता है।
    टिप्पणियों का उपयोग करके layout engine में उन्हें reflect करने वाला approach दिलचस्प है। किसी खास component के coordinates को fixed constraints की तरह रखकर बाकी को auto-place करना उपयोगी लग सकता है।
    अगर code changes के साथ diagram भी version control में शामिल हों, तो code review और architecture management कहीं अधिक स्वाभाविक हो जाते हैं।

    • मैं भी GitLab में PlantUML इस्तेमाल करता हूँ, लेकिन GitHub पर Mermaid इस्तेमाल करना पड़ता है, जो झंझट भरा है।
      Mermaid की layout quality कमज़ोर है, और GitHub का PlantUML support request को नज़रअंदाज़ करना अफसोसजनक है।
      लगता है कि ‘diagrams as code’ की adoption मुख्य platforms द्वारा supported formats पर निर्भर करती है।
      नया standard बनाने के बजाय, element weight-based rendering जैसे सुधार अधिक व्यावहारिक लगते हैं।
      इस पर चर्चा GitHub community discussion में भी हुई है।

  • काश PlantUML इस तरह की समस्या को हल कर पाता।

  • यह मानो Graphviz की dot language का उन्नत संस्करण हो।
    इसमें variables और अधिक साफ syntax है, लेकिन मूल अवधारणा समान है।
    Graphviz documentation देखें।

  • Mermaid.js में layout engine की अवधारणा मौजूद है।
    जैसे @mermaid-js/layout-elk।
    क्या आपने कभी अपने algorithm को Mermaid के लिए auto-layout engine के रूप में implement करने के बारे में सोचा है?

  • शानदार प्रोजेक्ट है। मैंने इसे mobile पर देखा, लेकिन add node button दिखाई नहीं देता।
    एक और फीचर जिसकी इच्छा है, वह है downstream nodes को collapse करने की सुविधा। दायरे से बाहर हो सकता है, लेकिन अच्छा रहेगा।

    • अभी .mmd text को सीधे edit करना पड़ता है। लेकिन यह अच्छा सुझाव है।
      downstream nodes collapse करने का फीचर किसी अन्य उपयोगकर्ता द्वारा मांगे गए animation feature के साथ भी अच्छी तरह मेल खा सकता है।