סקיל · קלוד קוד
יצירת תרשים זרימה עם AI: מתארים במילים, מקבלים תרשים מעוצב
fireworks-tech-graph הוא סקיל חינמי בקוד פתוח לקלוד קוד ולקודקס. כותבים לו איך תהליך או מערכת עובדים, והוא מצייר תרשים מעוצב באחד מ-12 סגנונות, בודק שאין חצים שחוצים טקסט, ומוציא קובץ SVG לעריכה, תמונת PNG ברוחב 1920 פיקסלים, ואם רוצים גם גיף שהחצים בו זזים.
מה הסקיל fireworks-tech-graph עושה?
כל מי שמסביר תהליך במצגת, באתר או בפוסט מכיר את השעה הזו בקנבה או בפאואר פוינט: מזיזים קופסאות, מיישרים חצים, ובסוף זה עדיין נראה חובבני. fireworks-tech-graph הוא סקיל שמעביר את העבודה הזו לקלוד קוד. אתם כותבים במילים מה קורה בתהליך, והוא מצייר.

לפי ה-README, מאחורי כל תרשים רצה לולאה קצרה: הסקיל מסווג איזה סוג תרשים ביקשתם, בונה SVG, בודק את המבנה, מייצא PNG, מסתכל על התמונה שיצאה ומתקן רק מה שצריך, עד שני סבבי תיקון. בסוף הוא כותב לכם אם הבדיקה עברה. אם הכלי לא יכול לקרוא תמונות, הוא אומר את זה במפורש במקום להעמיד פנים.
נכון ל-31 באוקטובר 2026 לריפו יש 11,899 כוכבים בגיטהאב ו-934 פורקים, ברישיון MIT. הסקיל עובד בלי שינוי גם בקלוד קוד וגם בקודקס.
למי זה מתאים? לבעלי עסקים שמסבירים ללקוחות איך העבודה איתם נראית, ליוצרים שבונים קרוסלות ומצגות, ולכל מי שבונה אוטומציות ורוצה להראות ללקוח מה מחובר למה. אתם לא צריכים לדעת לעצב, רק לדעת לתאר את התהליך שלכם בכמה שורות.
אילו סגנונות וסוגי תרשימים יש?
ה-README מציג 12 סגנונות חזותיים, כל אחד עם דוגמה מונפשת:

- בהירים ונקיים: Flat Icon (ברירת המחדל), Notion Clean, Claude Official, OpenAI Official. מתאימים למצגת ללקוח ולאתר.
- כהים: Dark Terminal, Blueprint, Dark Luxury. טובים לפוסטים ולשקפים על רקע כהה.
- מיוחדים: Glassmorphism, ועוד ארבעה סגנונות הנדסיים (C4 Review Canvas, Cloud Fabric, Event Transit, Ops Pulse) שמיועדים בעיקר לצוותי פיתוח.
ויש 14 סוגי תרשימים בתקן UML, ביניהם תרשים פעילות, תרשים רצף, תרשים מצבים, Use Case ותרשים ישויות של מסד נתונים, ועוד תבניות מוכנות לעולם הסוכנים: RAG, זיכרון, כמה סוכנים שעובדים יחד. בשפה של עסק: תהליך מכירה, מסלול לקוח, מי מעביר מה למי, ואיך המערכות שלכם מחוברות.

איך מתקינים את הסקיל בקלוד קוד?
ההתקנה המומלצת ב-README מתקינה עותק מלא של הסקיל גם לקלוד קוד וגם לקודקס:
npx -y skills@1.5.17 add \
yizhiyanhua-ai/fireworks-tech-graph/skills/fireworks-tech-graph \
--agent codex claude-code -g -y --copyהקבצים נכנסים ל-~/.claude/skills/fireworks-tech-graph. הסוף של הנתיב, /skills/fireworks-tech-graph, חובה: לפי ה-README, התקנה מהריפו בלי הנתיב הזה עלולה לקחת רק חלק מהסקיל. רק לקלוד קוד, אפשר גם לשכפל ישר:
mkdir -p ~/.claude/skills
git clone https://github.com/yizhiyanhua-ai/fireworks-tech-graph.git ~/.claude/skills/fireworks-tech-graphאחרי ההתקנה פותחים מחדש את קלוד קוד. בשביל הייצוא ל-PNG צריך Python 3.9 ומעלה ואחת משתי ספריות ציור, cairosvg (המומלצת) או rsvg-convert. אם אתם לא בטוחים מה מותקן אצלכם, תכתבו לקלוד קוד: "תבדוק שיש לי את כל מה שהסקיל fireworks-tech-graph צריך, ותתקין מה שחסר". הסקיל כולל גם פקודת doctor שבודקת בדיוק את זה.
איזה פרומפט כותבים כדי לקבל תרשים של תהליך בעסק?
הסקיל נדלק לבד כשאתם מבקשים תרשים, flowchart או diagram. ככה נראית בקשה טובה לתהליך עסקי. תחליפו את השלבים בשלכם:
Draw a flowchart of my sales process, Notion clean style:
Lead fills the form on the site → WhatsApp auto-reply →
Discovery call → Proposal sent → Decision?
yes → Payment link → Onboarding call
no → Follow-up after 7 days → back to Proposal
Export SVG and PNG to ~/Desktop/diagrams/ואותו דבר בעברית, אם נוח לכם יותר לתאר את התהליך בעברית:
תצייר תרשים זרימה של תהליך המכירה שלי, בסגנון Notion clean.
השלבים: ליד ממלא טופס באתר, תשובה אוטומטית בוואטסאפ, שיחת היכרות, שליחת הצעת מחיר, ואז החלטה.
אם כן: לינק לתשלום ושיחת פתיחה.
אם לא: פולואפ אחרי 7 ימים וחזרה להצעת המחיר.
את הטקסט בתוך התרשים תכתוב באנגלית.
תשמור SVG ו-PNG בתיקייה diagrams על שולחן העבודה.השורה "את הטקסט בתוך התרשים תכתוב באנגלית" שם בכוונה. ה-README מדבר על אנגלית וסינית, ותוויות בעברית לא נבדקו. אם אתם רוצים עברית בתוך התרשים, תנסו פעם אחת ותבדקו שהמילים לא יצאו הפוכות לפני שאתם מעלים לאתר.
עוד רעיונות לבקשות: מסלול לקוח מהמודעה ועד התשלום, מי אחראי על מה בצוות, איך הכלים בעסק מחוברים (אתר, CRM, וואטסאפ, מייל), או השוואה בין שלוש חבילות שירות בטבלה. אפשר גם לבקש סגנון לפי מספר, למשל "style 2", או לבקש תיקייה מסוימת לשמירה.

איך מקבלים גיף שהחצים בו זזים?
אחרי שיש תרשים, כותבים לקלוד קוד "Generate a GIF" או "Animate this diagram". לפי ה-README, החצים מצטיירים לפי סדר התהליך, ואז נקודות מידע ממשיכות לזרום עליהם עוד שתי שניות. הגיפים לדוגמה בריפו הם ברוחב 960 פיקסלים, 20 פריימים בשנייה, לולאה של 5.75 שניות. זה פורמט טוב לפוסט, לסטורי או לראש של דף נחיתה.
בשביל הגיף צריך עוד שלושה דברים: FFmpeg, דפדפן Chrome או Chromium, וחבילת puppeteer-core. ב-README יש את פקודות ההתקנה, ושוב, אפשר לבקש מקלוד קוד להתקין אותם. יש גם ייצוא לקובץ HTML אחד שעובד בלי אינטרנט, עם זום, מצב כהה ובהיר, והורדה של PNG, JPEG או WebP עד פי 4 בגודל.
חשוב לדעת
- חינמי, רץ על המנוי שלכם. הסקיל עצמו בקוד פתוח (MIT). הציור עצמו נעשה על ידי קלוד קוד, כך שהוא צורך מהמכסה של התוכנית שלכם.
- עברית בתוך התרשים לא נבדקה. הסקיל תוכנן לאנגלית ולסינית. תבדקו כל תרשים עם עברית לפני שהוא יוצא החוצה.
- מספרים לא תואמים בריפו. התיאור הקצר של הריפו עוד מדבר על 7 סגנונות. ה-README והתגיות שלו מדברים על 12, וזה מה שמופיע כאן.
- עובד על מק, לינוקס ווינדוס. בווינדוס הנתיבים הם בתיקיית המשתמש, וה-README ממליץ על WSL או Git Bash לפקודות.
- לסקיצה מהירה יש כלים אחרים. אם אתם רוצים משהו בסגנון ציור יד שאפשר לגרור ולערוך, תסתכלו על סקיל Excalidraw.
השורה התחתונה
אם אתם מסבירים תהליכים ללקוחות, תרשים אחד טוב חוסך לכם עשר דקות של הסברים בכל שיחה. עכשיו הוא לוקח משפט.
שאלות נפוצות על יצירת תרשימים עם fireworks-tech-graph
איך יוצרים תרשים זרימה עם AI?
מתקינים את הסקיל fireworks-tech-graph בקלוד קוד, ואז כותבים במילים את שלבי התהליך ואת הסגנון שאתם רוצים. הסקיל מצייר SVG, בודק אותו ומייצא PNG ברוחב 1920 פיקסלים.
הסקיל חינמי?
כן, הוא בקוד פתוח ברישיון MIT. הוא רץ בתוך קלוד קוד או קודקס, ולכן צורך מהמכסה של המנוי שלכם.
אפשר לכתוב עברית בתוך התרשים?
ה-README מדבר על אנגלית וסינית, ועברית לא נבדקה. אפשר לתאר את התהליך בעברית ולבקש תוויות באנגלית, או לנסות עברית ולבדוק את התוצאה לפני פרסום.
מה ההבדל בינו לבין Excalidraw?
Excalidraw נותן סקיצה בסגנון ציור יד שעורכים ידנית. fireworks-tech-graph מוציא תרשים מעוצב ומוכן, בדוק מבחינת חצים ומרווחים, בשנים עשר סגנונות, וגם כגיף מונפש.
מה צריך בשביל גיף מונפש?
FFmpeg, דפדפן Chrome או Chromium וחבילת puppeteer-core. אחרי שהם מותקנים כותבים לקלוד קוד Animate this diagram.