D2 (टेक्स्ट-से-डायग्राम टूल) में अब ASCII rendering सपोर्ट

• D2 0.7.1 संस्करण में टेक्स्ट डायग्राम को ASCII में render करने की सुविधा जोड़ी गई
• कोड comments में सरल ASCII diagrams का उपयोग करके function या class के flow को समझाया जा सकता है
• डिफ़ॉल्ट रूप से Unicode characters का उपयोग होता है, लेकिन option flag से standard ASCII चुनना संभव है
• यह सुविधा अभी alpha stage में है, इसलिए कुछ styles, special characters और कुछ खास shapes सपोर्ट नहीं होते
• D2 Playground और Vim extension आदि में सीधे ASCII rendering आज़माई जा सकती है

---

D2 ASCII rendering का परिचय

D2 की latest release (संस्करण 0.7.1) से टेक्स्ट डायग्राम के लिए ASCII output feature जोड़ी गई है।
.txt extension वाली output files अपने-आप ASCII renderer से render की जाती हैं।
इसका उदाहरण D2 Vim extension में देखा जा सकता है, जहाँ .d2 file खोलकर preview window के ज़रिए हर save पर ASCII diagram output की स्थिति real time में देखी जा सकती है.

कोड documentation में उपयोग

ASCII diagrams का सबसे व्यावहारिक उपयोग source code comments में insert करने के लिए है

• किसी छोटे function या class के पास एक simple diagram जोड़ने से, flow को सिर्फ़ शब्दों में समझाने की तुलना में कोड को ज़्यादा सहज रूप से समझने में मदद मिलती है
• Vim extension में D2 code लिखकर चुने गए हिस्से को सीधे ASCII diagram में बदला जा सकता है

Unicode और standard ASCII में चयन

डिफ़ॉल्ट ASCII rendering Unicode box-drawing characters का उपयोग करती है, जिससे output अधिक आकर्षक दिखता है

• अगर maximum portability चाहिए, तो --ascii-mode=standard option flag के ज़रिए सामान्य ASCII characters में भी render किया जा सकता है

वर्तमान सीमाएँ

यह ASCII rendering सुविधा अभी alpha stage में है

• कई corner cases, सुधार के बिंदु और bugs मौजूद हो सकते हैं
• वेबसाइट पर bug report या feedback भेजने के लिए प्रोत्साहित किया गया है

मुख्य सीमाएँ

• style support नहीं
  • animation, font आदि का ASCII में कोई अर्थ नहीं है
  • आगे terminal colors जैसी कुछ सीमित style support पर विचार करने की योजना है
  • themes भी supported नहीं हैं
  • double-border, multiple आदि भविष्य में सुधार के लिए सूचीबद्ध हैं
• अनियमित spacing
  • ASCII में बदलने की प्रक्रिया के दौरान box placement, SVG की तुलना में अनियमित हो सकती है
• जिन्हें render नहीं किया जा सकता
  • Markdown, Latex, code जैसे special text का support अभी लागू नहीं है
  • images, icons, UML classes, SQL tables आदि render नहीं किए जा सकते
  • ऐसे elements को हटाया जाए या placeholder दिखाया जाए, इस पर बाद में निर्णय लिया जाएगा
• कुछ shapes unsupported हैं
  • cloud, circle जैसी curved shapes को ASCII में ठीक से दिखाना मुश्किल है
  • ऐसे shapes को rectangle से replace किया जाता है और बाएँ ऊपर एक छोटा icon जोड़कर प्रकार अलग दिखाया जाता है

खुद आज़माएँ

यह सुविधा D2 Playground में तुरंत इस्तेमाल की जा सकती है

• दिए गए code block को खोलकर सीधे ASCII rendering का अनुभव किया जा सकता है

[GN⁺]

Hacker News टिप्पणियाँ

• नमस्ते, डेवलपर्स। आज सुबह जो नया फीचर जोड़ा है, उसे साझा करना चाहता हूँ। यह अभी alpha चरण में है, और इस पर पहले से एक github issue भी आ चुका है। अगर आप ब्लॉग पोस्ट छोड़कर सीधे देखना चाहते हैं, तो यहाँ देख सकते हैं। थोड़ा बड़ा उदाहरण इस लिंक में भी देख सकते हैं

  • playground में यह काली background पर काले text में render हो रहा था, इसलिए लगा कि यह काम नहीं कर रहा। शायद इसलिए कि मैंने dark mode चालू किया हुआ था। दूसरे renderer ठीक चल रहे हैं, लेकिन ascii दिखाई नहीं दे रहा
  • TFA में क्या इसका मतलब सिर्फ इतना है कि यह ELK से downscale होता है? क्या इस फीचर का उपयोग करने के लिए ELK को explicitly सेट करना होगा, या .txt में output देने पर यह अपने आप चालू हो जाएगा? मैं अपने d2 diagrams के लिए पहले से ELK इस्तेमाल करता हूँ

• mermaid की तुलना में इसकी value क्या है, यह जानना चाहता हूँ। इसका design और काम करने का तरीका मुझे पसंद है, लेकिन mermaid से migrate करने की कोई ठोस वजह है या नहीं, यह पूछना चाहता हूँ। साथ ही, मुझे लगता है कि ऐसे tools में आम तौर पर auto-generated result में boxes की position और size को x/y values से manually adjust करने की सुविधा कम होती है

  • यह इस पर निर्भर करता है कि आप किस value को प्राथमिकता देते हैं। आपके बताए वे दो कारण ही कई लोगों के लिए पर्याप्त हैं, और हमारे जैसे लोगों के लिए CLI से SVG render करते समय chromium browser की जरूरत न पड़ना भी अहम है (संबंधित उदाहरण देखें)। यह पूरी तुलना नहीं दिखाता, लेकिन एक संक्षिप्त comparison site भी है। और, paid product का प्रचार नहीं करना चाहता, लेकिन अगर आपको position और size को fix करने वाली manual adjustment सुविधा चाहिए, तो वह IDE में उपलब्ध है

• D2 syntax काफ़ी आकर्षक है, फिर भी अब तक Mermaid के tooling की वजह से मैं उसे ज़्यादा इस्तेमाल करता रहा हूँ। लेकिन यह फीचर काफ़ी बड़ा और नया लगता है, और Mermaid में मैंने ऐसा नहीं देखा। asciiflow.com से इसका जुड़ाव भी बढ़िया है

• ASCII से conversion होने वाली सुविधा अच्छी है। लेकिन जब diagram को update करना हो, तब original D2 source कैसे मिलेगा, यह जानना चाहता हूँ

• मुझे D2 हमेशा mermaid से ज़्यादा पसंद आया है, लेकिन मेरे हिसाब से अगले issue की वजह से grid layout लगभग बेकार हो जाता है(संबंधित issue)। अगर pixel units खुद manually मिलाने पड़ें, तो ऐसे tool का मकसद ही खत्म हो जाता है

  • धन्यवाद! बताने के लिए अच्छा लगा। इसे 0.7.2 (अगले release) में शामिल करने की योजना है

• मैं browser-based text-to-diagram tools की एक सूची maintain करता हूँ और उसे कई बार साझा कर चुका हूँ। हाल ही में पता चला कि D2 का online version पूरी तरह browser में नहीं चलता, बल्कि backend server diagram generate करता है। जानना चाहता हूँ कि क्या D2 केवल client (browser) पर standalone चल सकता है, और क्या इस पोस्ट में बताई गई extension functionality offline भी काम करती है

  • अब यह संभव है! (एक हफ्ते से) अगर आप d2 playground के network tab को देखें, तो आपको d2.js दिखेगा, जो D2 के wasm port को wrap करने वाले wrapper पर चलता है। अभी official release नहीं हुआ है, लेकिन जल्द ही अलग से घोषणा की जाएगी
  • ~~सूची देख सकता हूँ क्या~~ संपादन: मिल गई! धन्यवाद

• कृपया एक official Python repository बनाइए। मैं इसे notebook में इस्तेमाल करना चाहता हूँ, लेकिन अभी databricks को ज़बरदस्ती इस्तेमाल करना पड़ता है, जो असुविधाजनक है

• देखने में बहुत शानदार है। पहले C4 support पर किया गया आपका पोस्ट भी देखा था! मुझे जल्द ही C4 modeling की जरूरत पड़ेगी, इसलिए इसे ज़रूर देखूँगा

• यह सच में बहुत शानदार फीचर है। D2 के बारे में पहली बार सुन रहा हूँ, लेकिन यह बात बहुत पसंद आई कि terminal में भी सीधे chart बनाया जा सकता है, और उसे सुंदर तरीके से render भी किया जा सकता है। मैं इसे जल्द ही आज़माने वाला हूँ

  • D2 पहले से ही real-time HTTP server के ज़रिए .svg को live update करने की सुविधा देता है। अगर browser और vim को साथ-साथ खोलें, तो real-time updates भी देख सकते हैं। मैंने D2 को एक साल पहले खोजा था, और तब से सभी diagrams में उसी का उपयोग कर रहा हूँ
  • आम तौर पर ascii diagrams के लिए मैं Moondraw इस्तेमाल करता हूँ, लेकिन अगर आप पहले से vim environment में हैं, तो यह tool कहीं बेहतर है

• vim extension वाकई कमाल का फीचर है

  • लेकिन इसका vimscript में लिखा होना थोड़ा अजीब है और थोड़ी निराशा भी होती है