AI एजेंट से कोड लिखवाने के बाद, इंसान का काम है विज़ुअलाइज़ेशन

पिछले हफ़्ते एक एजेंट से पूरी microservices layer को रिफ़ैक्टर करवाया। PR आया, खोला तो सोचा जल्दी review हो जाएगा। लेकिन हुआ ये कि चालीस मिनट लॉग लाइन-बाय-लाइन पढ़ने में लग गए, सर्विसेज़ के बीच का call flow दिमाग में बन ही नहीं रहा था। कोडिंग से ज़्यादा समय review में गया।

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

टर्मिनल ASCII को ब्राउज़र HTML में ले जाना पूरी तस्वीर दिखाता है

एजेंट से आर्किटेक्चर बनवाओ तो monospace बॉक्स और डैश मिलते हैं। तीन नोड तक ठीक है, पाँच के बाद आँखें थक जाती हैं। visual-explainer वही request लेकर एक HTML पेज बनाता है जिसमें embedded Mermaid डायग्राम होते हैं। Dark mode toggle और zoom/pan पहले से मौजूद हैं, कोई build step या external dependency नहीं। बस एक ब्राउज़र चाहिए।

• /diff-review: कोड बदलाव और आर्किटेक्चर तुलना को एक ही व्यू में side by side दिखाता है
• /project-recap: कुछ दिनों बाद प्रोजेक्ट पर लौटने पर context-recovery snapshot बनाता है
• /generate-slides: वही आउटपुट एक presentation deck में बदल देता है
• Auto-switch rendering: जब टेबल में चार से ज़्यादा rows हों, तो टूल अपने आप टर्मिनल ASCII से HTML rendering पर चला जाता है

जो लोग एजेंट-जनरेटेड कोड पर नियमित PR review करते हैं, उनके लिए इस टूल ने मेरे workflow में सबसे तेज़ फ़र्क़ डाला।

चैट के अंदर रियल-टाइम डायग्राम

Excalidraw MCP के लिए बस एक MCP server address register करना होता है। कोई local install नहीं, कोई config files नहीं। पहली बार जब एजेंट बोल रहा था और साथ ही साथ डायग्राम बनता दिखा, तो सच में उम्मीद नहीं थी। Excalidraw hand-drawn स्टाइल इस्तेमाल करता है, कड़े बॉक्स और तीरों की जगह। इसलिए ये स्केच टीम के साथ शेयर करने में हल्के लगते हैं। लोग इन्हें formal spec की तरह नहीं बल्कि बातचीत शुरू करने के लिए treat करते हैं।

• Multi-environment support: Claude Desktop और VS Code दोनों में काम करता है
• Auto-framing: जैसे-जैसे shapes जुड़ती हैं, viewport अपने आप adjust होता है, fullscreen editing mode भी है
• Interactive editing: MCP Apps extension पर बना है, तो चैट विंडो के अंदर ही डायग्राम एडिट कर सकते हैं

एक ईमानदार सीमा बतानी ज़रूरी है: hand-drawn स्टाइल detailed sequence diagrams के लिए कमज़ोर पड़ता है। अगर numbered steps और conditional branches के साथ precise call ordering चाहिए, तो Mermaid syntax बेहतर विकल्प है। Excalidraw आर्किटेक्चर overview और flow explanation के लिए शानदार है, लेकिन बारीक interaction sequences के लिए इसे इस सूची के किसी और टूल के साथ मिलाकर इस्तेमाल करना पड़ेगा।

Mermaid डायग्राम को उनकी default बदसूरती से बचाना

Mermaid का syntax बहुत अच्छा है। उसकी default rendering नहीं। एक रंग बदलने के लिए CSS classes में घुसना पड़ता है, और out-of-the-box palette ऐसा लगता है जैसे random number generator ने चुना हो। beautiful-mermaid इसे ठीक करता है: बस background और foreground color दो, बाकी सब shade और text brightness color-mix() से अपने आप बन जाते हैं। पंद्रह pre-built themes पहले से मौजूद हैं, हर एक को एक ही लाइन में लागू कर सकते हैं।

• Zero flicker: SVG rendering synchronous है, इसलिए React useMemo() के अंदर बिना flash के काम करता है जो async renderers में दिखता है
• CLI-embeddable: ASCII और Unicode टर्मिनल आउटपुट सपोर्ट करता है, जिससे CLI टूल में सीधे डायग्राम embed कर सकते हैं
• Server-side compatible: कोई DOM dependency नहीं, तो Node.js server contexts में headless browser के बिना चलता है
• Editor theme sync: Shiki integration से अपनी VS Code theme सीधे डायग्राम स्टाइलिंग पर लगा सकते हैं

अगर एजेंट आउटपुट से पहले ही Mermaid generate कर रहे हैं (और करना भी चाहिए), तो ये library उन डायग्राम को “पढ़ने लायक” से “design doc में डालने लायक” बना देती है।

एजेंट से उसका अपना explainer लिखवाना

Zara Zhang ने एक prompt pattern शेयर किया जिसे वो “Claude Teacher” कहती हैं। Setup बस एक पैराग्राफ़ है जो CLAUDE.md में जोड़ना होता है। ये एजेंट को निर्देश देता है कि हर प्रोजेक्ट के अंत में एक FOR[name].md फ़ाइल बनाए, जिसमें पूरे codebase की सरल भाषा में व्याख्या हो।

ये काम करता है क्योंकि बात सीधी है। एजेंट को पहले से ही आर्किटेक्चर, फ़ैसलों की वजहें, और कोड लिखते समय किए गए tradeoffs पता हैं। आप बस उसे कह रहे हैं कि session ख़त्म होने से पहले ये ज्ञान बाहर निकाल दे।

• Architecture mapping: तकनीकी आर्किटेक्चर codebase structure से कैसे जुड़ता है
• Decision rationale: कौन सी technologies चुनी गईं और विकल्प क्यों छोड़े गए
• Lessons from the trenches: कौन से bugs आए, कैसे ठीक किए, किन गड्ढों से बचना है
• Engineering mindset: एक अच्छा engineer समस्याओं पर कैसे सोचता है, bullet points की बजाय कहानी की तरह लिखा हुआ

मुख्य निर्देश ये है कि इसे analogies और anecdotes के साथ पढ़ने लायक material की तरह लिखो, सूखा technical documentation नहीं। नतीजा ऐसा निकलता है जो किसी नए टीम मेंबर को onboarding material के रूप में सीधे दे सकते हैं।

सिर्फ़ कोड generate मत करो, उसे ख़ुद समझाने दो

ये बात Boris Cherny की है, जो Claude Code के creator हैं और जिन्होंने ये टिप सीधे शेयर की। /config में एक output style setting है जिसका नाम Explanatory है। इसे चालू करो और हर code change के साथ एक inline explanation आती है कि एजेंट ने वो choice क्यों बनाई। Learning style इससे आगे जाता है: कुछ जगहों पर रुकता है और आपसे कहता है कि पहले ख़ुद कोड लिखो, फिर अपना approach दिखाता है।

अनजान codebases के लिए, एजेंट से आर्किटेक्चर की HTML slide deck बनवाना एक presentation-style walkthrough देता है जो मिनटों में skim कर सकते हैं। Spaced-repetition skills भी बना सकते हैं जहाँ आप बताते हैं कि क्या समझ आया और एजेंट बाकी ख़ाली जगह भर देता है।

• पहले: कोड generate हुआ, tests पास हुए, structure अपारदर्शी रहा
• बाद में: कोड generate हुआ, विज़ुअलाइज़ेशन और explanation माँगी, structure समझ आया, patterns अगले प्रोजेक्ट में काम आए

AI एजेंट से बस काम करवाकर आउटपुट स्वीकार कर लेने का दौर पीछे छूट चुका है। अगला क़दम है उनसे विज़ुअलाइज़ और explain करवाना। जिस दुनिया में एजेंट implementation का बड़ा हिस्सा सँभाल रहे हैं, वहाँ इंसान का असली काम समझना है। दृश्य (vision) इंसानों के पास information process करने के सबसे तेज़ माध्यमों में से एक है, और AI आउटपुट को visual representation के साथ जोड़ना उस समझ की गुणवत्ता पूरी तरह बदल देता है।