स्पॉइलर: DOT भाषा में लिखे गए DAG को प्रस्तुत करने के लिए Vizdom.dev का उपयोग करें

एक सॉफ्टवेयर डेवलपर के रूप में, मैंने कभी-कभी डीएजी के साथ काम किया है - जिनमें से अधिकांश में उन्हें विज़ुअलाइज़ करना शामिल है। कई मामलों में, मुझे त्वरित प्रतिपादन प्राप्त करने में कठिनाई हुई और मुझे टूलींग की तलाश करनी पड़ी।

सौभाग्य से, वहाँ भरोसेमंद है ग्राफ़विज़ उपकरण जो डीओटी भाषा में लिखे गए ग्राफ़ को प्रस्तुत कर सकता है - बिल्कुल सही!

के अलावा…

• यह वेब पर ठीक से काम नहीं करता*
• मुझे इसे इंस्टॉल करना होगा
• यह डीओटी/जीवी फाइलों को ऑनलाइन प्रबंधित नहीं करता है

विचार

*ठीक है, तकनीकी रूप से ग्राफ़विज़ को वेबअसेंबली में संकलित किया जा सकता है, और कुछ प्रतिभाशाली लोग ड्रीमपफ जैसे कुछ साफ-सुथरे प्रोजेक्ट बनाने में कामयाब रहे संपादक , नाइकी का edotor.net , और मैगजैक संपादक - प्रत्येक का अपना मोड़ है। मैं अभी भी इन रेंडरिंग को एसवीजी (या अन्य माध्यम) में निर्यात किए बिना एम्बेड करने के लिए संघर्ष कर रहा हूं।

उदाहरण के लिए, मैं अपना ग्राफ़ संग्रहीत करना चाहता हूं धारणा.तो बस एक लिंक चिपकाकर जो ग्राफ़ को स्वचालित रूप से प्रस्तुत करता है।

मैं इस्तेमाल कर सकता हूँ मरमेडजेएस जो ग्राफ़ को बहुत साफ़ तरीके से प्रस्तुत करता है और आश्चर्यजनक रूप से अच्छी तरह से काम करता है - यह इसके कई कारणों में से एक है 64k+ GitHub पर शुरू होता है . मैं मार्कडाउन, स्वीट का उपयोग करके नोशन/गिटहब में ग्राफ़ भी एम्बेड कर सकता हूं!

दुर्भाग्य से, मुझे डीओटी को मार्कडाउन के उस स्वाद में अनुवाद करना होगा जिसकी मरमेड को आवश्यकता है। छोटे पाठ्य प्रस्तुतियों के लिए, मैं उन्हें अपने लिए परिवर्तित करने के लिए ChatGPT का उपयोग कर सकता हूं, लेकिन यह अक्सर व्याकरण संबंधी गलतियाँ करता है, और ग्राफ़ प्रस्तुत करने से इनकार कर देगा - जिससे यह स्वचालन के स्रोत के रूप में अविश्वसनीय हो जाएगा।

फिर वहाँ है टेरास्ट्रक्चर.कॉम जो हाथ से निर्मित आरेखों को प्रबंधित करने के लिए अद्भुत है, लेकिन मेरी मरमेड समस्याओं की तरह, मैं डीओटी को विश्वसनीय रूप से डी2 में परिवर्तित नहीं कर सकता। मेरा मानना है कि यदि आप हाथ से चित्र बनाने जा रहे हैं तो यह एक स्वीकार्य, एक बार की लागत है। सामान्य तौर पर, यह एक शानदार उपकरण है. प्रशंसा!

समस्या

• मैं प्रोग्रामेटिक रूप से जेनरेट किए गए डीओटी आउटपुट प्रस्तुत करना चाहता हूं - कोई भी टूलिंग मुझे उस लक्ष्य को प्राप्त करने में मदद नहीं करती है।

• मैं ग्राफ़ प्रस्तुत करने वाले लिंक एम्बेड करना चाहता हूं।

• मैं अपडेट के लिए रेंडरिंग को ऑनलाइन संग्रहीत करना चाहता हूं या अन्य ग्राफ़ के साथ इसकी तुलना करना चाहता हूं।

समाधान

हाँ - मैंने एक बनाया अनुप्रयोग उसके लिए 🎉

...और यह पूरी तरह से रस्ट में बनाया गया है 🦀 बहुत-बहुत धन्यवाद लेप्टोस

tl;dr - डीएजी को तेजी से ऑनलाइन प्रस्तुत करने के लिए एक सरल, उद्देश्य-निर्मित ऐप

ग्राफ़ निर्माण में एज क्रॉसिंग को कम करना, एक मान्यता प्राप्त एनपी-हार्ड चुनौती दृश्यमान आकर्षक ग्राफ़ बनाने की कुंजी है। टेरास्ट्रक्चर की टीम ने एक उत्कृष्ट प्रकाशित किया है ब्लॉग भेजा इस विषय पर गहराई से विचार करना। DagreJS लेआउट एल्गोरिदम और अंतर्दृष्टिपूर्ण पेपर " ड्राइंग डायरेक्टेड ग्राफ्स के लिए एक तकनीक " से काफी प्रेरित होकर, मैंने रस्ट में एक संस्करण विकसित किया।

यह संस्करण इस समस्या की जटिल जटिलताओं का लाभ उठाते हुए, पदानुक्रमित ग्राफ़ प्रस्तुत करने के लिए विशेष रूप से प्रभावी है।

ग्राफ़विज़ के साथ बड़े डीएजी (500+ नोड्स/किनारों) का प्रतिपादन कुछ हद तक धीमा हो जाता है। डागरे + डी3 ( d3-ग्राफ़विज़ और डेरिवेटिव) काफी तेजी से समाप्त होते हैं और बेहतरीन एनिमेशन/स्टाइलिंग अनुकूलन प्रदान करते हैं। फिर भी, मुझे लगा कि वे डीओटी भाषा द्वारा प्रदान की जाने वाली सुविधाओं से चूक जाते हैं - अर्थात्, स्टाइलिंग विशेषताओं को अक्सर केवल तभी सम्मानित किया जाता है जब आप ग्राफ़विज़ के साथ काम कर रहे हों।

विज़डोम डाग्रे के समान ही परिणाम देगा लेकिन ग्राफ़विज़ के डीओटी विनिर्देश और शैली व्यवहार के अनुरूप होगा। हालाँकि, इसमें ग्राफ़विज़ के साथ फ़ीचर समानता नहीं है, और जो कथन/विशेषताएँ समर्थित नहीं हैं उन्हें आसानी से अनदेखा कर दिया जाता है।

मेरा मानना है कि प्रोग्रामेटिक रूप से उत्पन्न डीओटी द्वारा उपभोग की जाने वाली विशेषताओं के प्रकार के लिए यह एक अच्छा समझौता है।

विज़डोम विशेषताएँ

• 🚀 बहुत तेज़ प्रतिपादन
• 💾 ग्राफ़ को लिंक में संग्रहीत करें
• 0️⃣ शून्य निर्भरता और किसी इंस्टॉलेशन की आवश्यकता नहीं

प्रतिपादन गति

खैर, यह सेब से संतरे की तुलना है। ग्राफ़विज़ अभी भी बेहतरीन विज़ुअलाइज़ेशन उत्पन्न करता है और अधिक का समर्थन करता है लेआउट इंजन , इसलिए मैं व्यक्तिपरक रूप से तुलना कर रहा हूं विज़डोम ग्राफ़विज़ के डीओटी इंजन के विरुद्ध, इसे केवल डीएजी तक सीमित कर दिया गया है, और इससे भी आगे इसे डीओटी भाषा की संकीर्ण विशेषताओं की सूची तक सीमित कर दिया गया है।

हां, मुझे पता है कि ग्राफ़विज़ के 30+ वर्ष की स्ट्रीक के आसपास वर्षों के अनुभव और टूलींग की तुलना करना भयानक है, लेकिन मेरे संकीर्ण उपयोग-मामले के लिए, यह तेजी से पागल हो रहा है। रेंडरिंग के लिए मेरे एम1 मैकबुक प्रो पर कुछ वॉल टाइम यहां दिए गए हैं काफी बड़ा ग्राफ ~400 नोड्स के साथ:

• मूल ग्राफ़विज़: ~30 सेकंड
• क्रोम (WASM) ग्राफ़विज़: क्रैश*
• क्रोम (जावास्क्रिप्ट) डाग्रेजेएस: ~10 सेकंड
• क्रोम (WASM) विज़डोम : ~1 सेकंड**

* यह क्रैश हो जाता है क्योंकि एम्सस्क्रिप्टेन ध्वज, ALLOW_MEMORY_GROWTH=1 सेट नहीं है, इसलिए कुल मेमोरी 16 एमबी तक सीमित है। इसे ठीक किया जा सकता है, लेकिन मुझे ऐसा कोई ऑनलाइन प्रोजेक्ट नहीं मिला है जो संबंधित ग्राफ़ को संभाल सके।

** संपादक दृश्य में Example 14 चयन करके उदाहरण ग्राफ़ प्रस्तुत किया गया है । पेज को रिफ्रेश करने से आपको पेज रिफ्रेश हो जाएगा और 414 प्राप्त होगा क्योंकि ग्राफ़ में मौजूद यूआरआई बहुत बड़ा है। मैं बड़े ग्राफ़ संग्रहीत करने के लिए एक बेहतर समाधान पर काम कर रहा हूं।

ग्राफ़ को लिंक में संग्रहीत करें

आप देखेंगे कि जब आप डीओटी फ़ाइल में कोई बदलाव करते हैं, तो यूआरएल ग्राफ़ और लेआउट विकल्पों को संग्रहीत करने के लिए तुरंत कुछ क्वेरी पैरामीटर अपडेट करता है, जिससे आप हमेशा लिंक संग्रहीत करके अपने डेटा की एक प्रति का संदर्भ ले सकते हैं!

एक समस्या है - बड़े-ईश ग्राफ़ URI को AWS के लिए बहुत बड़ा बना देते हैं (जहाँ विज़डोम वर्तमान में होस्ट किया गया है) और अन्य लोड बैलेंसर।

मैं वर्तमान में बड़े ग्राफ़ को संभालने के लिए एक समाधान पर काम कर रहा हूं, लेकिन इस बीच, मैंने ग्राफ़ को बनाए रखने और संग्रहीत करने के कुछ तरीके शामिल किए हैं:

• एक एम्बेड करने योग्य लिंक कॉपी करें जो स्वचालित रूप से एक दृश्य प्रस्तुत करता है जो ग्राफ़ को अधिकतम करता है।

• किसी भी एप्लिकेशन में एम्बेड करने के लिए आईफ्रेम स्निपेट की प्रतिलिपि बनाएँ जो उन्हें रेंडर करने का समर्थन करता है।

• या बस प्रस्तुत एसवीजी डाउनलोड करें।

संपादक का दृष्टिकोण कैसा दिखता है इसका एक उदाहरण यहां दिया गया है डिफ्लेट के लिए पीप्रोफ़ ट्रेस :

संपादक दृश्य पर जाएँ, और Example 42 लोड करें

अंतर दृश्य

कभी-कभी, मैंने पाया कि मैं अपने द्वारा तैयार किए गए दो ग्राफ़ों की तुलना करने की कोशिश कर रहा था, इसलिए जब मैं इस पर था, मैंने एक जोड़ा भिन्न दर्शक दो अलग-अलग ग्राफ़ के बीच परिवर्तनों को दृश्य रूप से देखने के लिए।

रंग किंवदंती:

• लाल: हटाया गया
• नारंगी: संशोधित
• हरा: जोड़ा गया

यहाँ कुछ तस्वीरें हैं:

मुझे क्लिक करें: नोड आईडी को "ई" से "एफ" में बदलना

मुझे क्लिक करें: "क्लस्टर = सत्य" जोड़ना

भविष्य के दिशानिर्देश

विज़डोम अभी भी कार्य प्रगति पर है, और जैसे-जैसे इसका विकास जारी है, मुझे पता है कि इस उपकरण को पूर्ण करने की यात्रा ग्राफ़ विज़ुअलाइज़ेशन के क्षेत्र की तरह ही गतिशील है। जबकि मुझे किस बात का गर्व है विज़डोम अब तक हासिल किया है, मैं इसकी क्षमता को लेकर और भी उत्साहित हूं। यहीं पर आप, पाठक और संभावित उपयोगकर्ता, आते हैं।

यदि आपकी कोई प्रतिक्रिया है, तो कृपया बेझिझक मुझे संदेश भेजें गटर या कलह .

पढ़ने के लिए धन्यवाद - यदि आपको यह लेख अच्छा लगा हो, तो कृपया अनुसरण करें !

[1]: ईआर गैन्सनर, ई. कौट्सोफियोस, एससी नॉर्थ और के. -पी। वीओ, "निर्देशित ग्राफ़ बनाने की एक तकनीक," सॉफ्टवेयर इंजीनियरिंग पर आईईईई लेनदेन में, वॉल्यूम। 19, नहीं. 3, पृ. 214-230, मार्च 1993, डीओआई: 10.1109/32.221135।

यहाँ भी प्रकाशित किया गया