टिप्पणी के रूप में आरेख के साथ एनोटेट स्रोत कोड

Question

मैं बहुत सारे (मुख्य रूप से सी ++ और जावास्क्रिप्ट) कोड लिखता हूं जो कम्प्यूटेशनल ज्यामिति और ग्राफिक्स और उन प्रकार के विषयों पर छूता है, इसलिए मैंने पाया है कि दृश्य आरेख समस्याओं को हल करने की प्रक्रिया का एक अनिवार्य हिस्सा रहा है।

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

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

इसलिए...

मेरी जानकारी के लिए कोई आईडीई आपको कोड के लिए एक टिप्पणी के रूप में एक तस्वीर को बचाने की अनुमति नहीं देता है।

मेरी सोच यह थी कि मैं या कोई और कुछ उचित उपयोग में आने वाला उपकरण ले सकता है जो एक छवि को एक बेस 64 बाइनरी स्ट्रिंग में बदल सकता है जिसे मैं अपने कोड में सम्मिलित कर सकता हूं।

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

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

लोग क्या सोचते हैं? क्या कोई इसके लिए भुगतान करेगा? मैं। लेकिन मैं शायद इस ओर भी ध्यान दिलाऊंगा कि मैं या मेरे कुछ महत्वपूर्ण साथी इस तरह की चीज के लिए भुगतान करेंगे या नहीं, लेकिन इस तरह के काम के सफल होने की संभावना केवल एक ओपन सोर्स रिलीज के जरिए होगी।

Comments

एक विकल्प: स्थानीय छवि फ़ाइल के लिंक में टिप्पणी करें जो डिफ़ॉल्ट छवि दर्शक में खुलती है।

— हाथ-ई-फूड

मेरा सबसे बड़ा डर सिस्टम का दुरुपयोग होगा। यकीन है कि यह एक जटिल एल्गोरिथ्म के लिए एक सार्थक आरेख के साथ शुरू होता है, लेकिन जब तक कोई वर्ग के लिए टिप्पणियों में भड़कीले विनिर्देशन दस्तावेज़ अपलोड नहीं कर रहा है? इससे पहले कि आप इसे जानें, सब कुछ परियोजना + डेवलपर से संबंधित कोड टिप्पणियों में ब्लॉब किया गया है। बेशक, किसी भी शक्तिशाली प्रणाली का दुरुपयोग करने के लिए खुला है। मुझे लगता है कि जरूरत एक आला है, लेकिन अगर आप उस जगह में हैं तो यह एक बहुत ही उपयोगी उपकरण होगा।

— स्निक्सटर

@ हाथ-ई-फूड अच्छा लगा! एक टिप्पणी में एक फ़ाइल URL बॉक्स से बाहर Xcode में एक क्लिक करने योग्य लिंक के रूप में दिखाई देता है। इसके साथ मेरी एकमात्र शिकायत यह है कि सापेक्ष-पथ फ़ाइल URL बनाना असंभव लगता है, इसलिए सिस्टम स्विच करते समय क्लिक करने योग्य लिंक पहलू टूट जाता है (सभी संभावना में)।

— स्टीवन लू

आप

— असीसी

मैं javadoc करता हूं जो एचएमटीएल उत्पन्न करेगा, छवियों के साथ। या SimpleDocBook, अलग प्रलेखन, XML आधारित, एक व्यावसायिक नियमों के लिए कोड में संदर्भित / करना चाहिए। यह अच्छा गद्य प्रदान करता है, और सिस्टम को सभी व्यावसायिक तर्क के परिप्रेक्ष्य से ढँक देता है, बजाय सॉफ्टवेयर घटकों और परतों (कक्षाओं) के वितरित किए। प्रत्येक परिवर्तन अनुरोध, डॉकबुक + संस्करण / टिकट संख्या के संदर्भ के साथ कोड जोड़ता है, और डॉकबुक में परिवर्तन + टिकट संख्या की एक सूची है। यह अपने पूर्ण कवरेज के कारण काम करता है। निश्चित नहीं है कि यह आपकी स्थिति के अनुरूप कैसे होगा।

— जोप इगेन

Answer 1

विज़ुअल स्टूडियो के लिए इमेज इंसर्शन प्लगइन के बारे में क्या ?

यदि आप एक अलग आईडीई का उपयोग कर रहे हैं और या तो यह एम्बेडेड छवियों का समर्थन नहीं करता है या आपके पास इसे विस्तारित करने का समय नहीं है, तो टिप्पणियों में एक छवि के लिए लिंक डालने के बारे में क्या है, जबकि छवि रिपॉजिटरी में कहीं निवास करेगी ?

Comments

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

— स्टीवन लू

रेपो में चित्रों को सहेजना रेपो-ब्राउजिंग के अधिकांश तरीकों के साथ भी काम करेगा (जैसे VCS रेपो वेब इंटरफ़ेस)

— स्टीवन लू

Answer 2

यदि आप ASCII कलाकार नहीं हैं , तो आप डॉक्स ऑक्सीजन को डॉट / ग्रेविज़ के साथ प्रलेखन उपकरण के रूप में उपयोग कर सकते हैं ।

यह आलेखों का पाठ विवरण लिखने और उन्हें प्रलेखन में प्रस्तुत करने की अनुमति देता है।

उदाहरण के लिए, यह विवरण:

digraph finite_state_machine {
    rankdir=LR;
    size="8,5"
    node [shape = doublecircle]; LR_0 LR_3 LR_4 LR_8;
    node [shape = circle];
    LR_0 -> LR_2 [ label = "SS(B)" ];
    LR_0 -> LR_1 [ label = "SS(S)" ];
    LR_1 -> LR_3 [ label = "S($end)" ];
    LR_2 -> LR_6 [ label = "SS(b)" ];
    LR_2 -> LR_5 [ label = "SS(a)" ];
    LR_2 -> LR_4 [ label = "S(A)" ];
    LR_5 -> LR_7 [ label = "S(b)" ];
    LR_5 -> LR_5 [ label = "S(a)" ];
    LR_6 -> LR_6 [ label = "S(b)" ];
    LR_6 -> LR_5 [ label = "S(a)" ];
    LR_7 -> LR_8 [ label = "S(b)" ];
    LR_7 -> LR_5 [ label = "S(a)" ];
    LR_8 -> LR_6 [ label = "S(b)" ];
    LR_8 -> LR_5 [ label = "S(a)" ];
}

रेंडरर्स के रूप में:

Comments

वह शांत है! जावा वातावरण के लिए कोई टूल सपोर्ट? मैं उदाहरण के लिए इस मोजो में इसके लिए समर्थन जैसा कुछ भी नहीं देख सकता: graphviz-maven-plugin.bryon.us/dot-mojo.html । अन्य सभी ने भी .dot फ़ाइलों के लिए समर्थन किया है।

— oligofren

Answer 3

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

यहां कलाकार मोड का उपयोग किया जा रहा है, इसलिए आप रुचि रखते हैं या नहीं, इसका अंदाजा लगा सकते हैं।

Emacs में कलाकार मोड शुरू करने के लिए, Alt-x करें, कलाकार-मोड टाइप करें, और वापसी लौटें। मध्य माउस बटन मेनू लाता है। कट और पेस्ट के लिए कीबाइंडिंग डिफ़ॉल्ट रूप से सामान्य विंडोज़ वाले नहीं हैं, लेकिन आप इसे बदलने के लिए CUA मोड चालू कर सकते हैं।

Comments

वाह ... प्रभावशाली है। मेरे पास वास्तव में मेरे कोड में कुछ ASCII आरेख शैली टिप्पणियां हैं। अभी बहुत समय है। मैं बेहतर उपकरण का उपयोग करना चाहता हूं क्योंकि तकनीक पहले से ही यहां है। मैं कभी-कभी विम में कोड लिखता था, लेकिन वास्तविक आईडीई की तुलना में मेरे पास कौन सी कोड-जागरूकता स्क्रिप्ट कम थी। लेकिन मुझे इस पुरानी स्कूल तकनीक को दिखाने के लिए धन्यवाद!

— स्टीवन लू

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

— स्टीवन लू

Answer 4

लोग क्या सोचते हैं? क्या कोई इसके लिए भुगतान करेगा? मैं।

ZOMG, मैं आपके जैसी ही श्रेणी में आता हूं और इस तरह की सुविधा सीधे आईडीई को पसंद आएगी।

अभी के लिए मैं इस तरह से बहुत सारे ASCII "कला" कर रहा हूं:

// ******************************************************
// *v3            |e5          v4*           |e6      v6*
// *              |              *           |          *
// *              |              *           |          *
// *              |              *           |          *
// *              |              *           |p1        *
// *              |            e1*-----------~----------*
// *              |              *           |          *
// *              |              *           |          *
// *              |              *           |          *
// *              |              *           |          *
// *cen           |p0          v0*           |        v5*
// *--------------~--------------************************
// *e4            |              *           |e7        *
// *              |              *           |          *
// *              |              *           |          *
// *              |              *           |          *
// *              |              *           |p2        *
// *              |            e2*-----------~----------*
// *              |              *           |          *
// *              |              *           |          *
// *              |              *           |          *
// *              |              *           |          *
// *v2            |e3          v1*           |e8      v7*
// ******************************************************

मुख्य मूल्य जो मुझे लगता है कि दृश्य आरेख के अनुरूप चर नाम देख रहा है, खासकर जब हम नए जाल एल्गोरिदम के लिए जाल और ऐसे जटिल ट्रैवर्सल्स का उपयोग कर रहे हैं। उत्तरों में से एक में दिखाया गया यह डॉक्सीजीन ग्राफ-जनरेटिंग ट्रिक सुपर कूल है - मुझे यह कोशिश करनी चाहिए।

ऐसी बहुत सी चीजें हैं जो नेत्रहीन रूप से भी संवाद करना आसान हैं, जरूरी नहीं कि ग्राफ का उपयोग भी हो। उदाहरण:

... या यह (मेरे एल्गोरिथ्म की तुलना में मैं "हुक उपखंड" को मानक CC उपखंड के रूप में कह रहा हूं जो पिक्सर द्वारा उपयोग किया जाता है):

यह कोड को इतना संदर्भ देगा कि यह देखने के लिए कि ये ऑपरेशन क्या करते हैं और वे कोड के अंदर कैसे भिन्न हैं क्योंकि कुछ चीजें केवल दृष्टिगत रूप से दिखाई जाती हैं। चित्र वास्तव में एक हजार शब्दों को पकड़ सकते हैं।

इसलिए यह मेरे लिए पूरी तरह से स्वप्नदोष होगा कि एक आईडीई है जो मुझे कोड और छवियों को एक साथ देखने देता है, जिससे मुझे स्रोत कोड में छवियों को एम्बेड करने की अनुमति मिलती है।

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

एक और चीज़ जो मैं सपने में देखता हूं वह एक दृश्य डिबगर है जो मुझे इसे प्रोग्राम करने देता है ताकि मैं अपने कुछ डेटा प्रकारों को डिबगर में एक छवि बना सकूं, उदाहरण के लिए, परिणाम को देखने के लिए नेत्रहीन रूप से मैं कोड के माध्यम से कदम बढ़ा रहा हूं और एल्गोरिदम सुनिश्चित कर रहा हूं। मैं आविष्कार करने की कोशिश कर रहा हूं हर कदम पर सही ढंग से काम कर रहा हूं और मेल कर रहा हूं कि मैंने इसे कागज पर कैसे आकर्षित किया। उदाहरण के लिए, मेरी जाली डेटा संरचना आउटपुट को डिबगर वॉच विंडो में एक प्रदान की गई छवि बनाएं - आदर्श यदि मैं दृश्य को घुमा सकता हूं और ऐसा सही तब और वहां।

इसके अलावा जब एक हजार प्लगइन्स जैसी ढीली टीमों द्वारा लिखे गए बहुत बड़े पैमाने के कोडबेस (दसियों लाख की LOC) में काम करते हैं, तो कभी-कभी यह एक बुरा सपना हो सकता है कि कैसे पता लगाया जाए कि जिस कोड को हम कुछ अस्पष्ट देख रहे हैं, उसे कैसे निष्पादित करें। यूआई से शायद ही कभी इस्तेमाल किया प्लगइन। यह उन मामलों में बहुत बढ़िया होगा यदि कोड एक लघु स्क्रीनशॉट एम्बेड कर सकता है जिसमें दिखाया गया है कि उपयोगकर्ता इंटरफ़ेस से वास्तव में उस कोड को कैसे प्राप्त किया जा सकता है (समय-समय पर आउट होने की संभावना हो सकती है, लेकिन आमतौर पर यूआई इतने अस्थिर नहीं होते हैं पूर्व स्क्रीनशॉट को बेकार करने के रूप में संस्करण)।

क्या कोई इसके लिए भुगतान करेगा? मैं।

तो वैसे भी, हाँ, पूरी तरह से! मझे वह चहिए!!!

Comments

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

— स्टीवन लू

@StevenLu मैंने इस तरह की आईडी बनाने का अक्सर सपना देखा है जिसे आप विज़ुअल डीबगर के साथ प्रस्तावित कर रहे हैं (हालांकि मैं इसे ग्राउंड से करने के बारे में सोच रहा था क्योंकि मैं एक प्लगइन समाधान को डीबगर साइड इतनी अच्छी तरह से करने की कल्पना नहीं कर सकता था)। लेकिन हाँ - मुझे लगता है कि जवाब एक टिप्पणी की तरह था ... लेकिन मैं सिर्फ इतना खुश था कि कोई और उसके लिए कामना कर रहा था। अतीत में मेरे सहकर्मी अधिक तकनीकी और गणितीय प्रकार के थे - वे नेत्रहीन रूप से सब कुछ संवाद करने की मेरी इच्छा को नहीं समझते थे।

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

— स्टीवन लू

Answer 5

लिटरेट प्रोग्रामिंग के लिए एक उपयोग-केस की तरह लगता है जहां आप आरेख और जो कुछ भी अपने दस्तावेज़ में जोड़ सकते हैं।

Comments

क्यों होता है पतन?

— मोनिका - एम। श्रोडर

मैंने तुम्हें उकसाया। यह एक बहुत अच्छा अवलोकन है, जिस पर मैं चर्चा कर रहा हूं वह लगभग पूरी तरह से उस छतरी के नीचे है।

— स्टीवन लू

मैं बहुत निराश हूं क्योंकि यह वास्तव में जवाब नहीं देता है। वह स्पष्ट रूप से अपने पूरे कार्यक्रम को एक साक्षर प्रोग्रामिंग शैली पर स्विच नहीं करना चाहता है, और यहां तक ​​कि अगर उसने किया, तो साक्षर प्रोग्रामिंग सिर्फ प्रोग्रामिंग के लिए एक दृष्टिकोण है - इसका मतलब यह नहीं है कि चित्र और चित्र समर्थित हैं।

— टिमम्म

Answer 6

Doxygen आपको इस तरह टिप्पणियों में चित्र सम्मिलित करने की अनुमति देता है :

  /*! Here is a snapshot of my new application:
   *  \image html application.jpg
   */

दुर्भाग्य से ऐसा लगता है कि कोई आईडीई इन छवियों को इनलाइन प्रदर्शित नहीं करेगा, लेकिन मुझे संदेह है कि उदाहरण के लिए ऐसा करने के लिए VSCode एक्सटेंशन लिखना बहुत मुश्किल नहीं होगा।

मुझे एक VSCode एक्सटेंशन भी मिला है जो पहले से ही एक अलग वाक्यविन्यास टिप्पणी के साथ इसका समर्थन करता है । यह एक मंडराने के माध्यम से करता है:

VSCode एक सुविधा जोड़ रहा है जो इनलाइन छवियों - "कोड इनसेट" की अनुमति देता है - लेकिन यह अभी तक तैयार होने के लिए प्रकट नहीं होता है।

यहाँ नमूना विस्तार से एक स्क्रीनशॉट है (जो मुझे वास्तव में नहीं मिला - संभवतः अभी तक जारी नहीं किया गया है क्योंकि कोड इनसेट एपीआई को जारी नहीं किया गया है)