‏Visual Explainer: خداحافظ با ASCII Art در ترمینال!

وقتی از ایجنت‌های کدنویسی مثل Claude Code یا Codex می‌خوای یه دیاگرام رسم کنه، معمولاً یه چیزی دریافت می‌کنی که از کاراکترهای |، - و + ساخته شده. برای معماری‌های ساده شاید بشه تحملش کرد، ولی به محض اینکه سیستم کمی پیچیده بشه، خروجی ترمینال تبدیل به یه دیوار ناخوانا از کاراکترها می‌شه. Visual Explainer برای حل همین مشکل ساخته شده.

این ابزار به عنوان یه agent skill (مهارت افزودنی به ایجنت) عمل می‌کنه. یعنی ایجنت هوش مصنوعی‌ات یاد می‌گیره که به جای رسم ASCII Art، یه فایل HTML خودکفا بسازه و مستقیماً تو مرورگر باز کنه. هیچ build step، سرور، یا وابستگی خارجی‌ای لازم نیست — فقط یه مرورگر کافیه.

این اسکیل با ابزارهای مختلف سازگاره: Claude Code (از طریق Marketplace)، Pi، Codex CLI، OpenCode و Cursor. هر کدوم مسیر نصب خودشون رو دارن. مثلاً برای Claude Code:

خروجی‌ها به صورت خودکار در ~/.agent/diagrams/ ذخیره می‌شن و بلافاصله تو مرورگر باز می‌شن. ایجنت هم هوشمندانه تکنولوژی مناسب رو انتخاب می‌کنه: Mermaid برای فلوچارت‌ها و دیاگرام‌های جریان (با قابلیت zoom و pan)، CSS Grid برای نمای معماری، HTML Table برای داده‌های جدولی، و Chart.js برای داشبوردها.

چند دستور از پیش آماده هم داره که کارها رو خیلی راحت‌تر می‌کنه: /diff-review برای مقایسه بصری تغییرات کد، /plan-review برای بررسی یه plan در مقابل کدبیس واقعی، /project-recap برای گرفتن یه snapshot ذهنی از پروژه، و /generate-slides برای ساختن یه اسلایدشو با کیفیت مجله. جالب‌تر اینکه اگه ایجنت بخواد یه جدول با ۴+ سطر یا ۳+ ستون نشون بده، به طور خودکار به جای ترمینال، HTML رندر می‌کنه.

یه قابلیت جالب دیگه --slides هست که می‌شه به اکثر دستورها اضافه کرد تا خروجی scrollable به یه slide deck تبدیل بشه. همچنین /share-page هم هست که صفحه HTML رو روی Vercel دپلوی می‌کنه و یه لینک زنده می‌ده (البته این قابلیت به یه اسکیل vercel-deploy مجزا نیاز داره).

نکات کلیدی:

• به جای ASCII Art، صفحات HTML شیک با تایپوگرافی واقعی و تم روشن/تاریک تولید می‌کنه
• با Claude Code، Pi، Codex CLI، OpenCode و Cursor سازگاره
• دیاگرام‌های Mermaid تعاملی‌ان (zoom و pan دارن)
• اگه جدول بزرگ باشه، ایجنت خودکار به HTML سوئیچ می‌کنه
• با --slides می‌شه خروجی رو به اسلایدشو تبدیل کرد
• هیچ build step یا وابستگی خارجی‌ای نداره