קורן בן עזרא
muthuishereמה זה Hand-Drawn Diagrams?
Hand-Drawn Diagrams הוא סקיל שמאפשר לבקש מ-Claude תרשים במילים ולקבל תרשים בסגנון כתב יד של Excalidraw, מוכן לעריכה בדפדפן. הוא מתאים להסברים ללקוחות, לתהליכי עבודה ולסקיצות של מסכים, ונותן גם אנימציה שמציירת את התרשים קו אחרי קו.
תרשים טוב חוסך הרבה הסברים, אבל רוב בעלי העסקים לא פותחים תוכנת שרטוט כדי להסביר ללקוח איך עובד התהליך אצלם. Hand-Drawn Diagrams פותר את זה: כותבים ל-Claude מה רוצים לראות, והסקיל בוחר את סוג התרשים, מסדר את הצורות כך שלא יעלו זו על זו, בודק את התוצאה ופותח אותה בדפדפן.
הסגנון הוא של Excalidraw, לוח הציור הפתוח שנראה כמו סקיצה ביד, וברירת המחדל היא שחור לבן נקי. כל תרשים נשמר כקובץ excalidraw רגיל, כך שאפשר לפתוח ולערוך אותו גם בלי הסקיל. מעבר לקישור העריכה אפשר לבקש אנימציה שבה התרשים מצייר את עצמו, קובץ SVG מונפש או תמונת PNG לשמירה בתיקיית הפרויקט.
הסקיל מכיר כמה מסלולים לפי המטרה: הסבר לימודי, סיעור מוחות, זרימת משתמש, משפך מכירות, הסבר טכני, הסבר רפואי למטופלים, תרשים יצירתי וסקיצה של עמוד אינטרנט. הוא עובד עם Claude Code, Codex ועוד סוכנים, והוא דורש Python 3.11 ומעלה והכלי uv על המחשב.
למי זה מתאים
- בעלי עסקים שרוצים להסביר ללקוחות תהליך עבודה בצורה ויזואלית ופשוטה
- סוכנויות ופרילנסרים שמציגים ללקוח משפך מכירות, מבנה אתר או תהליך אוטומציה
- מורים, מרצים ומנחי סדנאות שצריכים מפות מושגים ותרשימי הסבר
- מעצבים ומנהלי מוצר שרוצים סקיצה מהירה של מסך או זרימת משתמש לפני עיצוב מלא
- קליניקות ומטפלים שמסבירים למטופלים תהליך טיפול או הכנה לבדיקה
מה הוא עושה
מטקסט לתרשים בבקשה אחת
מתארים במילים את התהליך או הרעיון, והסקיל בוחר את סוג התרשים, ממקם את הצורות והחיצים וכותב קובץ excalidraw תקין.
קישור עריכה בדפדפן
בסיום נפתח דף עריכה של Excalidraw עם התרשים מוכן. אפשר להזיז, לשנות טקסט ולהוריד את הקובץ, בלי להתקין שום תוכנה.
אנימציה שמציירת את התרשים
בבקשה "פתח את האנימציה" מקבלים תצוגה שבה התרשים מצטייר קו אחרי קו, ואפשר גם לשמור אותה כקובץ SVG מונפש שמתנגן בכל דפדפן.
שמירה כ-PNG וכקובץ מקור
לפי מה שמבקשים, הסקיל שומר תמונת PNG, קובץ SVG מונפש או את קובץ ה-excalidraw עצמו בתיקיית הפרויקט, ואחרת הקבצים נשארים בתיקייה זמנית ולא מלכלכים את סביבת העבודה.
מסלולים לפי מטרה
יש הנחיות נפרדות לתרשים לימודי, מפת רעיונות, זרימת משתמש, משפך מכירות, הסבר טכני, הסבר רפואי, תרשים יצירתי וסקיצת עמוד, כך שכל תרשים נבנה בשפה שמתאימה לו.
בדיקת איכות לפני מסירה
סקריפט בדיקה מוודא שהתרשים לא ריק, שאין צורות שנערמות באותו מקום ושהטקסט לא חורג מהמסגרת. רק אחרי שהבדיקה עוברת נוצר הקישור.
כללי כתיבה קצרים וברורים
כל צורה מקבלת עד חמש מילים וכל מסגרת עד שלוש נקודות קצרות. התוצאה נקייה וקריאה גם כשמציגים אותה במצגת או בטלפון.
דוגמאות שימוש
מה כותבים ל-Claude אחרי ההתקנה, ומה מקבלים.
מסלול מטופל בקליניקה
צייר תרשים בסגנון כתב יד של מסלול המטופל בקליניקה שלי: קביעת תור בוואטסאפ, תזכורת יום לפני, הגעה, טיפול, תשלום ובקשת משוב.מה מקבלים: דף עריכה של Excalidraw נפתח בדפדפן עם תרשים זרימה בשחור לבן, שאפשר לתקן ולהוריד או לשמור כתמונה.
משפך מכירות לסוכנות
תכין תרשים משפך מכירות למשרד פרסום: מודעה במטא, דף נחיתה, השארת פרטים, שיחת היכרות, הצעת מחיר וסגירה. אחר כך פתח את האנימציה.מה מקבלים: תרשים משפך בסגנון סקיצה ותצוגת אנימציה שבה הוא מצטייר שלב אחרי שלב, מתאים לפתיחת פגישה עם לקוח.
מפת מושגים לסדנה
אני מעביר סדנה לבעלי עסקים על אוטומציות. צייר מפת מושגים פשוטה שמסבירה מה זה טריגר, תנאי ופעולה, ושמור אותה כתמונת PNG בתיקייה הנוכחית.מה מקבלים: קובץ PNG בתיקיית העבודה, לצד קובץ ה-excalidraw המקורי למקרה שתרצו לשנות משהו לפני הסדנה.
סקיצה של דף בית למאפייה
צור סקיצה בסגנון כתב יד של דף הבית למאפייה: כותרת עם הלוגו, תמונת מאפים גדולה, שלושה מוצרים מובילים וכפתור הזמנה בולט.מה מקבלים: סקיצת עמוד (wireframe) בסגנון Excalidraw שאפשר לשלוח למעצב או למפתח כבסיס לשיחה.
מה צריך לפני שמתחילים
- Claude Code, Codex או סוכן אחר שתומך בסקילים
- Python בגרסה 3.11 ומעלה, git והכלי uv (מתקינים עם brew install uv או pip install uv)
- חיבור לאינטרנט לפתיחת דף העריכה והאנימציה, שמתארחים ב-GitHub Pages של המפתח
- אופציונלי: Node.js ו-chrome-devtools-mcp לייצוא מהיר של PNG ואנימציות, ובלעדיו הייצוא משתמש ב-Playwright האיטי יותר
- אין צורך במפתח API ואין עלות שימוש
אין עדיין Claude Code? במדריך הזה יש התקנה צעד אחרי צעד.
איך מתקינים את Hand-Drawn Diagrams.
יש 3 דרכים, ומספיקה אחת מהן. הראשונה הכי פשוטה, בלי קוד בכלל.
הכי פשוט: באפליקציה של Claude, בלי שום קוד
מתאים ל-Claude במחשב ובדפדפן. לוקח דקה, ועושים את זה פעם אחת.
- מורידים את הסקילהורדת hand-drawn-diagrams.zip (932 KB)לא פותחים את הקובץ, מעלים אותו כמו שהוא.
- מדליקים פעם אחת את היכולתב-Claude נכנסים ל-Settings, ואז Capabilities, ומדליקים את
Code execution and file creation. - מעלים את הקובץנכנסים ל-Customize, ואז Skills, לוחצים על הפלוס, בוחרים
Create skillואזUpload a skill, ובוחרים את הקובץ שהורדתם. - זהו, עובדיםמבקשים מ-Claude את המשימה במילים רגילות, והוא משתמש בסקיל לבד כשהוא רלוונטי.
ב-Claude Code: מדביקים הודעה אחת
פותחים שיחה חדשה ב-Claude Code, מעתיקים את ההודעה ומדביקים. כש-Claude מבקש אישור להריץ, לוחצים Allow.
התקן בבקשה את הסקיל Hand-Drawn Diagrams ל-Claude Code עם הפקודה הבאה, ואחר כך בדוק שיש לי Python 3.11 ומעלה ואת הכלי uv, ואם uv חסר תגיד לי איך להתקין אותו: D="$(mktemp -d)" && git clone --depth 1 -q https://github.com/muthuishere/hand-drawn-diagrams "$D/repo" && rm -rf "$D/repo/.git" && mkdir -p ~/.claude/skills && rm -rf ~/.claude/skills/hand-drawn-diagrams && cp -R "$D/repo" ~/.claude/skills/hand-drawn-diagrams && rm -rf "$D" && echo "הותקן ✓"
בטרמינל, ידנית
למי שמעדיף להריץ בעצמו. מעתיקים לטרמינל ומריצים.
git clone --depth 1 https://github.com/muthuishere/hand-drawn-diagrams.git /tmp/hand-drawn-diagrams rm -rf /tmp/hand-drawn-diagrams/.git mkdir -p ~/.claude/skills cp -R /tmp/hand-drawn-diagrams ~/.claude/skills/hand-drawn-diagrams rm -rf /tmp/hand-drawn-diagrams
צריך להפעיל מחדש את Claude Code. לפני התרשים הראשון מוודאים ש-python3 --version מחזיר 3.11 ומעלה ושהפקודה uv קיימת. לייצוא מהיר של PNG ואנימציות אפשר להתקין את chrome-devtools-mcp עם npm install -g chrome-devtools-mcp ולהוסיף אותו כשרת MCP בהגדרות של Claude Code, לפי ההוראות בקובץ INSTALL.md בריפו.
- מריצים ls ~/.claude/skills ומוודאים שיש תיקייה בשם hand-drawn-diagrams
- שואלים את Claude: אילו סקילים יש לך? ומחפשים את hand-drawn-diagrams ברשימה
- מבקשים תרשים קטן, למשל "צייר תרשים של שלושה שלבים: הזמנה, תשלום, משלוח", ובודקים שנפתח דף עריכה בדפדפן
מריצים שוב את פקודת ההתקנה, והיא מחליפה את התיקייה בגרסה העדכנית. מי שהתקין עם npx skills add יכול להסיר ולהתקין מחדש באותה פקודה.
rm -rf ~/.claude/skills/hand-drawn-diagrams
איך משתמשים ביום יום
- מבקשים תרשים במילים רגילות, כמו "צייר תרשים", "תכין סקיצה" או "מפת רעיונות", והסקיל נכנס לפעולה לבד.
- ברירת המחדל היא פתיחת דף עריכה בדפדפן. כדי לקבל קובץ, מוסיפים לבקשה "שמור כתמונה", "שמור את האנימציה" או "שמור כקובץ excalidraw".
- קבצי המקור נשמרים בתיקייה זמנית (/tmp/hand-drawn-diagrams), ולכן אם רוצים לשמור אותם לאורך זמן כדאי לבקש במפורש לשמור אותם בתיקיית הפרויקט.
- אפשר לבקש תיקונים באותה שיחה, למשל "תוסיף שלב של תזכורת בין ההזמנה לתשלום", ו-Claude מעדכן את אותו תרשים.
טיפים שימושיים
- תארו את השלבים לפי הסדר ובמשפטים קצרים, כי הסקיל מגביל כל צורה לחמש מילים וקל לו יותר לחלק את הרעיון נכון.
- תוויות בעברית כדאי לבדוק כבר בתרשים הראשון, ואם הגופן או הכיווניות לא נראים טוב, לבקש תוויות קצרות באנגלית.
- התרשים נארז בתוך הקישור עצמו (אחרי הסימן #) ולא נשמר בשרת, אבל כל מי שמקבל את הקישור יכול לראות אותו, ולכן לא מכניסים לתרשים מידע רגיש.
- לפגישה עם לקוח, האנימציה שמציירת את התרשים שלב אחרי שלב עובדת טוב יותר מתמונה סטטית, כי היא מכתיבה קצב להסבר.
תקלות נפוצות
מופיעה השגיאה uv: command not found
מופיעה שגיאה שדורשת Python 3.11 ומעלה
הייצוא ל-PNG איטי מאוד
הסקיל לא מופיע אחרי ההתקנה
שאלות ותשובות
האם צריך חשבון ב-Excalidraw?
האם זה עולה כסף?
אפשר לקבל תרשים צבעוני?
איפה נשמרים הקבצים?
האם יש דרך התקנה נוספת?
כמה פופולרי ומתוחזק הפרויקט?
קרדיט ומקור. Hand-Drawn Diagrams נכתב על ידי muthuishere ונמצא ב-muthuishere/hand-drawn-diagrams ברישיון MIT. את העמוד כתב קורן בן עזרא אחרי בדיקה של המאגר ושל פקודות ההתקנה (29.09.2026). מאגרים מתעדכנים, ולכן אם משהו השתנה, המאגר הוא המקור הקובע.
freshtechbro
Anthropic
meodai