ויזואליזציית קוד

קלוד הופך הסבר קוד מורכב לעמוד HTML אינטראקטיבי עם תרשימים, במקום פסקת טקסט ארוכה.

מה זה עושה

כשקלוד עומד להסביר אלגוריתם עם כמה שלבים, ארכיטקטורת מערכת, זרימת דיבאג עם שינויי מצב, או ביקורת קוד - הוא בונה עמוד HTML עצמאי עם הדגשת תחביר, תרשימי Mermaid והליכה שלב-אחר-שלב, במקום רק לכתוב טקסט.

העמוד עובד אופליין בלחיצה כפולה, בעל עיצוב כהה (Dracula) ברירת מחדל עם אפשרות בהיר, וניווט במקלדת (חצים לשלבים, F למסך מלא). יש שישה תבניות מוכנות: הליכת אלגוריתם, סקירת ארכיטקטורה, ביקורת קוד, זרימת דיבאג, זרימת נתונים, ומצגת שקפים.

לניתוח ברמת repo שלם (קשרים בין קבצים, מפת תלויות) הסקיל יכול גם לפתוח כלי חיצוני ל-GitHub בשם Rift Code בדפדפן, בנוסף להסברי HTML נקודתיים.

מתי זה שימושי

מסבירים אלגוריתם או פונקציה מורכבת ורוצים שהמשתמש יראה את זה ויזואלית, לא רק יקרא
עושים code review ורוצים הערות עם רמת חומרה מסומנת ויזואלית לצד הקוד
מדבגים בעיה עם כמה שינויי מצב ורוצים להראות את הזרימה שלב-אחר-שלב
צריך להציג ארכיטקטורת מערכת עם כמה רכיבים למישהו שלא קורא קוד

מה אומרים לקלוד

אין פקודות ללמוד. אחרי ההתקנה פשוט כותבים לקלוד משפט כמו:

"תראה לי את זה ויזואלית"
"הסבר קוד עם תרשים"
"תעשה לי ויזואליזציה של האלגוריתם הזה"
"איך זה עובד? תראה לי גרפית"

דוגמה

מה נותנים

תסביר לי איך הפונקציה הזאת ממיינת את הרשימה, עם תרשים

מה מקבלים

נוצר קובץ HTML עצמאי עם קוד מודגש, תרשים Mermaid של זרימת הנתונים, והליכה שלב-אחר-שלב - נפתח בדפדפן ועובד גם אופליין

מה צריך שיהיה מותקן

מה	למה / הערה
דפדפן	לפתיחת קובצי ה-HTML שנוצרים; שימוש ב-Rift Code דורש חשבון GitHub לאימות

לתשומת לבך: כשמבקשים תרשים עצמאי בלי הקשר קוד (למשל דיאגרמת זרימת עסקים), עדיף כלי ייעודי לדיאגרמות - זה נועד ספציפית להסברי קוד.

התקנה בהדבקה אחת

פותחים את Claude Code, מדביקים את הבלוק הבא, והוא מתקין הכול לבד:

הי קלוד! התקן לי בבקשה את הסקיל "ויזואליזציית קוד" (code-visualizer).
1. זהה את מערכת ההפעלה שלי ואת התיקייה ~/.claude/skills/ (ב-Windows: C:\Users\<user>\.claude\skills\). צור אותה אם אינה קיימת.
2. הורד את החבילה: https://hiyabh.github.io/claude-skills/dl/code-visualizer.tar.gz
3. חלץ ממנה את התיקייה skills/code-visualizer אל ~/.claude/skills/code-visualizer. אם כבר קיים סקיל בשם הזה - שאל אותי לפני שאתה דורס.
4. בדוק אם מותקנים אצלי: דפדפן. אם חסר משהו - תגיד לי בדיוק מה להתקין ותציע להתקין בעצמך.
5. הסבר לי בקצרה איך מפעילים - למשל שאני פשוט אומר: "תראה לי את זה ויזואלית".

מעדיף טרמינל? (Git Bash / Mac / Linux)

curl -fsSL https://hiyabh.github.io/claude-skills/install.sh | bash -s -- code-visualizer

או הורדה ידנית של החבילה וחילוץ אל ~/.claude/skills/.