# כיצד להשתמש ב-Mermaid.js ליצירת גרפי תהליכים ב-NoteRich – הדרכה מלאה ניתוח תהליכים מורכבים, ארכיטקטורות של מערכות או עצות יכולים להיות קשים רק באמצעות טקסט. **Mermaid.js** הוא כלי מצוין ליצירת גרפים, המבוסס על JavaScript, ומאפשר ליצור גרפים באמצעות הגדרות טקסט פשוטות. ב-**NoteRich**, אנו שילבנו את Mermaid.js ישירות בתוך המתקן, מה שמאפשר ליצור גרפי תהליכים מקצועיים, גרפי סדרה ועוד, מבלי לעזוב את ההערות שלכם. המדריך הזה ילווה אתכם בכל מה שצריך לדעת כדי להשתמש בגרפים של Mermaid ב-NoteRich, כולל כיצד להשתמש ב-AI ו-OCR כדי ליצור אותם מיד. --- ## 🚀 מדוע להשתמש ב-Mermaid ב-NoteRich? * **בעל טקסט:** ניתן לגדיר את הגרפים שלכם באמצעות קוד, מה שמקל על שליטה ועריכה שלהם. * **צפייה מיידית:** ניתן לראות את השינויים שלכם מיד כשאתם כותבים. * **מגוון:** תומך בגרפי תהליכים, גרפי סדרה, גרפי מצבים, גרפי גאנט ועוד. * **בעלי AI ו-OCR:** ניתן ליצור גרפים מתיאורים בשפה טבעית או על ידי סריקת תמונות קיימות. * **ראשון במקום מקומי:** הגדרות הגרפים שלכם נשמרות במקום במזכרות שלכם, מה שמבטיח פרטיות וגישה ללא חיבור לאינטרנט. --- ## 📝 התחלה: הכנסת גרף Mermaid יש שלוש דרכים עיקריות להכנסת גרף Mermaid ב-NoteRich: ### שיטה 1: הפקודה `/` 1. מקדדו את העכבר במקום שבו רוצים שהגרף יוצג. 2. כתב `/` כדי לפתוח את מנגנון בחירת הרכיבים. 3. חפשו **"Mermaid"** או **"Diagram"**. 4. בחרו **Mermaid Diagram** מהרשימה. ### שיטה 2: חלון הכלים 1. לחצו על כפתור **Insert** בחלון הכלים. 2. עברו לחלק **Visualization** או **Diagrams**. 3. לחצו על **Mermaid**. ### שיטה 3: עוזר AI 1. פתחו את **AI Assistant** (דרך `/ai` או חלון הכלים). 2. תארו את הגרף שאתם רוצים (למשל, “ליצור גרף תהליך לרישום המשתמש”). 3. ה-AI יגיד לכם את הקוד Mermaid, שניתן להכניסו ישירות להערה שלכם. לאחר הכנסת הגרף, יופיע תצוגה עם מערכת כתיבה וחלון צפייה מיידי. --- ## 🛠️ דפדפן העורך Mermaid עורך Mermaid ב-NoteRich מיועד ליעילות: * **אזור קוד:** אזור טקסט עם מרווחים קבועים, שבו כותבים את הקוד Mermaid שלכם. * **צפייה מיידית:** צג מיידי של הגרף שלכם. אם יש שגיאה בקוד, יופיעה תצוגה של שגיאה כדי לעזור לכם לתקן אותה. * **סימן עזרה:** לחצו על סימן `?` ליד “Diagram Code” כדי לפתוח את המסמך הרשמי של Mermaid.js לקבלת התייחסויות מפורטות לקוד. * **כפתור אישור:** שמור את הגרף שלכם והכניסו אותו להערה. > **טיפ:** ניתן ללחוץ פעמיים על כל גרף Mermaid קיים בהערה שלכם כדי לפתוח שוב את העורך ולעשות שינויים. --- ## 📊 סינטקסט ביסודו של גרף תהליך גרפי תהליכים הם המקרה הנפוץ ביותר ליישום של Mermaid. הנה כיצד לבנות אותם. ### 1. הגדרת כיוון התחילו בהגדרת כיוון התהליך: * `graph TD`: מלמעלה למטה * `graph LR`: משמאל לימין * `graph BT`: מלמטה למעלה * `graph RL`: ימין לשמאל ### 2. הוספת צמתים צמתים מוגדרים על ידי ID וכותרת. ```mermaid graph TD A[Start] --> B[Process] B --> C{Decision} C -->|Yes| D[End] C -->|No| B ``` * `[Text]`: צמת בעל ריבוע. * `(Text)`: ריבוע מעוגל. * `((Text))`: עיגול. * `{Text}`: ריבוע משולש (Decision). * `[[Text]]`: תת-תרגיל. ### 3. חיבור צמתים * `-->`: סימן סימן מוצק. * `-.->`: סימן סימן מקווקו. * `==>`: סימן סימן עבה. * `-- Text -->`: סימן סימן עם כותרת. --- ## 🤖 יצירה של גרפים באמצעות AI אינכם רוצים לכתוב קוד? נסו את AI של NoteRich כדי לעשות זאת עבורכם. 1. פתחו את **AI Assistant**. 2. כתבו פרמטר כמו: *“יצרו גרף סדרה Mermaid עבור לקוח שמזמין באינטרנט.”* 3. ה-AI יחזיר לכם קוד כמו זה: ```mermaid sequenceDiagram participant Customer participant Website participant Database Customer->>Website: Place Order Website->>Database: Check Inventory Database-->>Website: Inventory Available Website-->>Customer: Order Confirmed ``` 4. העתיקו את הקוד או השתמשו בכפתור **Insert** אם הוא זמין בחלון AI כדי להוסיף אותו להערה שלכם. --- ## 📸 OCR: סריקת גרפים כתובים או מודפסים יש לכם תמונה מהלוח לבן או גרף מודפס? **NoteScanner (OCR)** של NoteRich יכול להפוך אותו לקוד Mermaid ניתן לעריכה. 1. פתחו את **AI Assistant** ובחרו **NoteScanner (OCR)**. 2. העלו תמונה של הגרף הכתוב או המודפס שלכם. 3. בפרמטר, ציינו: *“הפוך את התמונה לגרף Mermaid.js.”* 4. ה-AI ינתח את המבנה של התמונה ויצר את הקוד Mermaid המתאים. 5. בדקו את הקוד שנוצר בעורך ותקנו כל שגיאות קלות. > **הערה:** כדי לקבל את התוצאות הטובות ביותר, ודאו שהתמונה ברורה והטקסט נראה. סקיצות כתוב יצירתיים עשויים לדרוש עריכה ידנית לאחר ההפוך. --- ## 🎨 תכונות מתקדמות ### עיצוב צמתים ניתן לעצב את המראה של צמתים ספציפיים באמצעות קלאסים CSS או עיצוב פנימי. ```mermaid graph LR A[Start] --> B[Process] style A fill:#f9f,stroke:#333,stroke-width:4px style B fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5 ``` ### תת-גרפים חבורו צמתים קשורים יחד כדי לאפשר ארגון טוב יותר. ```mermaid graph TD subgraph Frontend A[React App] --> B[UI Components] end subgraph Backend C[API Server] --> D[Database] end B --> C ``` ### גרפי סדרה Mermaid לא מתמחה רק בגרפי תהליכים. ניתן גם ליצור גרפי סדרה כדי לתאר את האינטראקציות בין מערכות. ```mermaid sequenceDiagram participant User participant NoteRich participant Server User->>NoteRich: Edit Note NoteRich->>Server: Save Data Server-->>NoteRich: Confirm Save NoteRich-->>User: Update UI ``` --- ## 💡 טיפים מקצועיים למשתמשי NoteRich 1. **הימנעו מכתיבה של סימנים מיוחדים:** אם טקסט הצמתים שלכם כולל סימנים מיוחדים כמו `[]` או `()`, ארחו את הטקסט בסוגריים. ```mermaid graph TD A["Node with [brackets]"] --> B["Node with (parentheses)"] ``` 2. **העתקה כתמונה:** לאחר שהגרף נוצר, לחצו עליו כדי לחשוף חלון הכלים הצף. השתמשו בכפתור **Copy Image** כדי להעתיק את הגרף לתוכנות אחרות כמו Slack, Notion או אימייל. 3. **הורדה SVG:** משתמשים מקצועיים יכולים להוריד את הגרף כקובץ SVG איכותי לצורך שימוש בהרצאות או פרסומים. --- ## ❓ פתרון בעיות * **הגרף לא מוצג?** בדקו את התצוגה של השגיאות בחלון הצפייה. בעיות נפוצות כוללות חוסר בסוגריים סופיים `]` או סינטקסט לא נכון של סימני סימן. * **שגיאות סינטקסט?** ודאו שאתם משתמשים בסינטקסט הנכון של Mermaid. NoteRich משתמש בגרסה יציבה וחדשה של Mermaid.js. עיינו במסמך הרשמי [https://mermaid.js.org/intro/](https://mermaid.js.org/intro/) אם אינכם בטוחים. * **דיוק OCR?** אם תוצאות OCR אינן מושלמות, השתמשו בעוזר AI כדי לשפר את הקוד. ניתן להעתיק את התוצאות הראשוניות של OCR ולבקש מה-AI לתקן את הקוד Mermaid. --- ## 🏁 סיכום Mermaid.js ב-NoteRich משנה את הדרך בה תציינו תהליכים ומערכות. על ידי שמירה על הגרפים כקוד, אתם מבטיחים שהם תמיד מודרניים, קלים לעריכה ומאוחדים עם בסיס הידע שלכם. עם יצירה באמצעות AI וסריקה באמצעות OCR, יצירת גרפים מורכבים כבר לא קשה כל כך. התחילו לצייר את הרעיונות שלכם היום! --- <div class="flex flex-wrap gap-2 mt-8 mb-12"> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">Mermaid</span> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">גרף תהליך</span> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">עוזר AI</span> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">OCR</span> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">צג מידע</span> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">NoteRich</span> </div>