תרשימים בדוקומנטציה הם רעיון מצוין עד שרואים את זמני הטעינה של הדף. מי שהטמיע אי פעם תרשימי Mermaid באתר תיעוד מכיר את המחיר: חבילת קוד כבדה של מגהבייט וחצי, עשרות תלויות נסתרות וקפיצות תצוגה מעצבנות בכל פעם שהמשתמש מעביר את המסך למצב כהה. אתמול הושק פתרון שמנסה לגדוע את הבעיה הזו בדיוק מהשורש. סטף אנגו (Steph Ango), מנכ"ל Obsidian, שחרר את Pele כדי לפענח תחביר Mermaid ולפלוט ישירות גרפיקת SVG נקייה.
השם Pele מגיע מהאלופה המיתולוגית של הרי הגעש והאש מהוואי, כקריצה ישירה לזכוכית געשית שממנה נגזר השם Obsidian, ולא על שם כדורגלן העבר. המטרה של הפרויקט ברורה: לחתוך את השומן של Mermaid.js ולהשאיר מנוע רינדור מהיר, קל ונוח לשליטה עיצובית.
בלי מנוע כבד ותלויות
Pele renders Mermaid diagrams to SVG. It is small, synchronous, has no runtime dependencies, and uses CSS variables for colors and fonts.דוקומנטציית הפרויקט ב-GitHub
ההבדל המשמעותי הראשון מול Mermaid.js הרגילה נמצא במשקל החבילה. בעוד שספריית המקור שוקלת כ-1.6 מגהבייט ומביאה איתה 23 תלויות ישירות בצד הלקוח, Pele שוקלת 230 קילובייט בלבד בדחיסת gzip, וכוללת אפס תלויות חיצוניות. כל הקוד נכתב מחדש מאפס כדי לחסוך את שרשרת האספקה המסורבלת של מודולים שאינם בשימוש.
זה שינוי מתבקש.
לפי נתוני הפרויקט, Pele חותכת את משקל החבילה ל-230 קילובייט עם אפס תלויות צד שלישי, ומעבירה את כל ניהול העיצוב למשתני CSS פשוטים. מי שמחזיק אתר תיעוד גדול מרגיש את ההבדל הזה מיד במדדי הביצועים של הדפדפן. בנוסף, מי שמעוניין לחסוך עוד יותר במשקל הטעינה הראשוני יכול לייבא רק את התרשימים הדרושים לו דרך ליבת הספרייה, או להשתמש בטעינה עצלה לפי הצורך.
מצב כהה בלי רינדור
אחד הכאבים המוכרים בעבודה עם תרשימים ברשת הוא התאמת ערכות נושא. ב-Mermaid המסורתית, מעבר בין מצב בהיר לכהה דורש להריץ מחדש את כל פונקציית הרינדור, לבנות מחדש את העץ ולהזריק את התוצאה למסך, פעולה שמייצרת קפיצות תצוגה מעצבנות. ב-Pele הגישה שונה לחלוטין: כל הצבעים, הרדיוסים והגופנים מוגדרים דרך משתני CSS.
כשמשתמש משנה את מצב התאורה במערכת, הדפדפן מעדכן את הצבעים ברמת הסגנון באופן מיידי, בלי חישוב חוזר של מיקומי הקופסאות והקווים. בנוסף, מנוע התצוגה של Pele מתאים את עצמו למסכים צרים בצורה שונה: במקום לכווץ את הדיאגרמה כולה לגודל זעיר ולא קריא כפי שעושה Mermaid, פונקציית mount יודעת לבצע התאמה מבנית של הפריסה לרוחב המיכל בדפדפן.
הבטחות מהירות שדורשות בדיקה
בדף הבית של הפרויקט מוצגים נתוני ביצועים קיצוניים למדי. לפי החברה, זמן הרינדור של Pele עומד על 0.05 עד 0.3 מילישניות, לעומת 6 עד 82 מילישניות בספרייה הוותיקה, פער משמעותי לטובת המנוע החדש. אם המספרים האלה מדויקים, מדובר בהבדל שמאפשר לפתוח דפי תיעוד עמוסים כמעט ללא השהיית ממשק.
לא הייתי ממהר להתרשם רק מהנתונים האלה. הם נשענים כרגע על הצהרות המפתח והדוגמאות בדף המוצר בלבד, ללא מבחני ביצועים בלתי תלויים שנערכו על תרשימי ענק מהעולם האמיתי.
| מאפיין | Pele | Mermaid.js |
|---|---|---|
| גודל חבילה (gzip) | 230 קילובייט | 1.6 מגהבייט |
| תלויות ישירות | 0 | 23 |
| זמן רינדור מוצהר | 0.05 עד 0.3 מילישניות | 6 עד 82 מילישניות |
| התאמה למסכים צרים | התאמת מבנה הפריסה | הקטנת קנה המידה של התרשים |
| ניהול ערכות נושא | משתני CSS | הגדרות תצורה |
מה עדיין שובר את התרשים
למרות ההתלהבות, לא מדובר בתחליף עיוור של אחד לאחד. Pele תומכת בכל סוגי התרשימים המובנים בליבת Mermaid גרסה 12.1.0, אך אינה תומכת כלל בתוספים חיצוניים או בתחביר מותאם אישית כמו ZenUML. אם התרשימים שלכם נשענים על הרחבות של צד שלישי, המעבר לספרייה החדשה פשוט ישבור את התצוגה.
לגבי תמיכה ישראלית, בדוקומנטציה אין התייחסות מיוחדת לעיבוד פונטים עבריים או כיווניות מימין לשמאל (RTL). הספרייה זמינה בקוד פתוח ב-GitHub, ואין מניעה להשתמש בה בארץ, אך בדיקה מקדימה על תרשימים בעברית היא חובה לפני שמשלבים אותה בפרודקשן.
בינתיים, זהירות עדיפה על מהירות.
אם יש לכם אתר דוקומנטציה עם תרשימי זרימה סטנדרטיים, אפשר לנסות את ההתקנה כבר עכשיו. אם המערכת שלכם בנויה על תוספים מותאמים, השאירו את התלויות הישנות במקומן.
מקורות
- Pele – Mermaid diagrams as themeable SVGhttps://pele.run/
- GitHub - obsidianmd/pele: Renders Mermaid diagrams faster than you'd run from a volcano! 🌋 · GitHubhttps://github.com/obsidianmd/pele
- Pele Official – Theminghttps://pele.run/theming
הידיעה נכתבה מהמקורות שלמעלה בתאריך הפרסום, וכל טענה בה נבדקה מולם. מצאתם טעות? כתבו.