3 पॉइंट द्वारा GN⁺ 2025-10-27 | 1 टिप्पणियां | WhatsApp पर शेयर करें
  • D2 एक टेक्स्ट-आधारित स्क्रिप्टिंग भाषा है, जिसके ज़रिए डायग्राम बनाए जा सकते हैं, और कोड से विज़ुअल सामग्री अपने-आप जनरेट करने का तरीका मिलता है
  • उपयोगकर्ता सरल सिंटैक्स से nodes और relationships को परिभाषित करते हैं, और automatic layout engine उन्हें विज़ुअल रूप से व्यवस्थित कर देता है
  • दस्तावेज़ के हर code snippet को Playground में सीधे चलाया और संशोधित किया जा सकता है, इसलिए नतीजे तुरंत देखे जा सकते हैं
  • हालांकि, import का उपयोग करने वाले कुछ उदाहरण Playground में तुरंत नहीं चलते, ऐसे अपवाद मौजूद हैं
  • डेवलपर्स के लिए यह विज़ुअल डॉक्यूमेंटेशन ऑटोमेशन और collaboration efficiency बढ़ाने वाला एक महत्वपूर्ण टूल है

D2 परिचय

  • D2 एक declarative scripting language है, जिसमें डायग्राम को code के रूप में लिखा जा सकता है; यह जटिल संरचनाओं को टेक्स्ट में परिभाषित करके उन्हें अपने-आप विज़ुअलाइज़ करने की सुविधा देती है
    • उपयोगकर्ता nodes, edges, groups आदि को सरल सिंटैक्स में लिख सकते हैं
    • परिणाम अपने-आप व्यवस्थित हो जाते हैं, और उन पर कई तरह की styles लागू की जा सकती हैं
  • यह भाषा version control और collaboration के लिए फायदेमंद है, और code review या document automation pipeline में आसानी से जोड़ी जा सकती है

Playground फीचर

  • D2 दस्तावेज़ के हर code snippet के लिए Playground में तुरंत खोलकर संशोधित और चलाने की इंटरैक्टिव सुविधा मिलती है
    • उपयोगकर्ता snippet पर mouse ले जाने पर Playground link को सक्रिय देख सकते हैं
    • इसके ज़रिए डायग्राम को real time में समायोजित करके परिणाम को विज़ुअल रूप से देखा जा सकता है
  • लेकिन, import statements का उपयोग करने वाले snippets को बाहरी resources की ज़रूरत होती है, इसलिए वे Playground में तुरंत नहीं चलते

उपयोग का महत्व

  • D2 विज़ुअल डॉक्यूमेंटेशन ऑटोमेशन को समर्थन देता है, जिससे system design या data flow को code के साथ मिलाकर प्रबंधित किया जा सकता है
  • डेवलपर्स और डिज़ाइनर्स एक ही भाषा में डायग्राम परिभाषित कर सकते हैं, जिससे collaboration efficiency बेहतर होती है
  • open source ecosystem में इसे code-based diagram authoring के standardization को बढ़ावा देने वाले टूल के रूप में देखा जाता है

1 टिप्पणियां

 
GN⁺ 2025-10-27
Hacker News की राय
  • D2 के सह-निर्माता के रूप में, वे हाल में animation feature expansion के विचार पर काम कर रहे हैं
    उन्होंने इस पर चर्चा GitHub Discussion में डाली है और राय जानना चाहते हैं

    • हाल में LLM का उपयोग करके architecture decisions को तेज़ी से visualize कर रहे हैं
      आमतौर पर mermaid का उपयोग करते हैं, लेकिन सोच रहे हैं कि क्या D2 एक अधिक flexible interface दे सकता है
      यह भी जानना चाहते हैं कि LLM से जुड़ने वाले tool calling features या MCP जैसे user-friendly interface की कोई योजना है या नहीं
    • D2 सच में एक शानदार tool है। खासकर AWS network layout automation लागू करते समय यह उपयोगी रहा
      बहुत सारे objects render करते समय engine से लड़ना नहीं पड़ता, यह अच्छी बात लगी
      हालांकि sdk/d2lib का documentation कम होने के कारण शुरुआत में थोड़ा trial and error करना पड़ा
    • कुछ महीनों से D2 का उपयोग कर रहे हैं और यह देखकर हैरान थे कि इसे सीखना आसान है
      लेकिन उन्हें नहीं लगता कि चमकदार animations ज़रूरी हैं। जब emphasis चाहिए होता है, तो सिर्फ रंग बदलना ज़्यादा intuitive लगता है
    • animation का उद्देश्य क्या है, यह जानना चाहते हैं। अगर presentation के दौरान हर click पर elements जुड़ें और connections smoothly highlight हों, तो अच्छा होगा
      लेकिन text बदलने से पूरा diagram हिलने लगे, तो वह उल्टा distract कर सकता है
      साथ ही Swimlane diagrams के लिए आधिकारिक support भी अच्छा रहेगा
    • “Level 4 - dramatic mode ;)” कहते हुए dramatic SVG example साझा किया
  • D2 या Penrose जैसे tools को Python से wrap करके data-driven diagram scripting आज़मा रहे हैं
    लेकिन ज़्यादातर declarative tools “declare, then tweak” workflow support नहीं करते, इसलिए असुविधा होती है
    Penrose में बदलाव करना आसान है, लेकिन उसका परिणाम random और unpredictable हो सकता है

    • D2 में custom layout adjustment सिर्फ proprietary engine में संभव है
      open source engine में यह नहीं हो सकता, लेकिन Freehand feature से कुछ हद तक adjustment संभव है
  • वे सोच रहे थे कि D2 के syntax को किसी सामान्य programming language में कितना क़रीब से लागू किया जा सकता है
    Python में operator overloading की सीमाओं के कारण बिल्कुल वही DSL मुश्किल है, लेकिन string operator overloading से कुछ मिलता-जुलता प्रयास किया जा सकता है

    • Python में भी कुछ tricks से a <- b | "edge" जैसा syntax नकल किया जा सकता है
      लेकिन मज़ाक में कहा कि अगर कोई इसे सच में इस्तेमाल करे, तो वे भूत बनकर परेशान करेंगे
    • Scala में user-defined operators संभव हैं, इसलिए "x" --> "y" | "hello world" जैसा DSL बनाया जा सकता है
      हालांकि इसका ज़्यादा उपयोग करना ठीक नहीं
    • Ruby में भी x >> y << "label" के रूप में एक सरल internal DSL बनाया जा सकता है
      Diagram class में object model बनाकर renderer जोड़ा जा सकता है
  • mgmt project के मुख्य लेखक के रूप में वे DAG के साथ बहुत काम करते हैं
    nodes और edges जोड़ने-हटाने के समय उन्हें ऐसा diagram चाहिए जो visually stable हो और animated transitions दे सके
    Graphviz में हर snapshot पर layout हिल जाता है, जो असुविधाजनक है

    • d2 के watch feature से files को step-by-step बदलने वाली सरल script hack के जरिए ऐसा मिलता-जुलता प्रभाव दिया जा सकता है
  • D2 का Sketch mode और interactive features वास्तव में बहुत उपयोगी हैं
    tooltips और links की वजह से diagrams की उपयोगिता काफ़ी बढ़ जाती है

  • वे लंबे समय से D2 का उपयोग कर रहे हैं और अंदरूनी तौर पर भी इसे सक्रिय रूप से recommend करते हैं
    लेकिन enterprise license cost बहुत ज़्यादा है, इसलिए इसे सिर्फ व्यक्तिगत उपयोग के लिए इस्तेमाल कर रहे हैं
    TALA license सालाना 3000 डॉलर है, और व्यक्तिगत उपयोग के लिए भी 120 डॉलर देना पड़ता है, जो बोझिल है
    Helm chart या system description को LLM में डालकर automatic diagram generation करने वाली क्षमता उन्हें क्रांतिकारी लगती है

    • व्यक्तिगत रूप से उन्हें लगता है कि TALA का output quality सबसे कमज़ोर है। वे ज़्यादातर ELK engine का उपयोग करते हैं
  • हाल में D2 के ASCII rendering support ने काफ़ी ध्यान खींचा
    इससे जुड़ी चर्चा पिछली पोस्ट में जारी रही

  • D2 काफ़ी समय से मौजूद है, लेकिन अभी भी यह mermaid से कम जाना-पहचाना लगता है
    features के लिहाज़ से यह कहीं बेहतर है, इसलिए लोग इसे ज़्यादा जानें, ऐसी उम्मीद है

    • मुझे भी D2 ज़्यादा पसंद है, लेकिन mermaid कई platforms पर default support के साथ आता है, इसलिए वह व्यावहारिक विकल्प है
    • D2 के बारे में अभी पहली बार सुना, mermaid की तुलना में इसमें क्या बेहतर है, यह जानना चाहते हैं
  • हमारे AI platform zo.computer में diagram generation tool के रूप में D2 को अपनाया गया है
    mermaid की तुलना में इसकी expressiveness ज़्यादा है, इसलिए यह AI-based visualization के लिए उपयुक्त है

    • implementation कैसे किया गया, यह जानना चाहते हैं। पूछते हैं कि क्या D2 के लिए MCP server खुद बनाया गया था
    • “Ben, LinkedIn/X को सहने लायक बनाने के लिए धन्यवाद” कहकर अभिवादन किया
  • D2 बेहतरीन है, लेकिन PlantUML या mermaid की तुलना में इसका decisive differentiator अभी कमज़ोर लगता है
    वे अब भी “diagram code का killer app” आने का इंतज़ार कर रहे हैं

    • अगर ऐसे tools से large codebase को visually explore किया जा सके, तो यह बहुत बड़ा फ़ायदा होगा
    • D2 की ताकत यह है कि यह standalone compiler है और ASCII rendering support देता है
      npm install की ज़रूरत न होना भी अच्छा लगता है
      हालांकि mermaid की Obsidian आदि के साथ integration बहुत बेहतर है
    • सवाल उठाया गया: “उस killer program में कौन-सी features होनी चाहिए?”