הגדרה בסיסית
תרשים זרימה מורכב מצמתים (צורות גאומטריות) וקווי חיבור (חצים או קווים). קוד Mermaid מגדיר כיצד לבנות צמתים וקווי חיבור, ותומך במגוון סוגי חצים, חצים רב-כיווניים וחיבורים חופשיים עם תתי-גרפים.
אזהרה אם אתה משתמש במילה "end" בתוך צומת של תרשים זרימה, כתוב את האות הראשונה או את כל המילה באותיות גדולות (למשל: "End" או "END"); הקלדה של "end" באותיות קטנות בלבד תגרום לשגיאה בתרשים הזרימה.
אזהרה אם אתה מחבר צמתים של תרשים זרימה ומשתמש באות "o" או "x" כאות ראשונה, הוסף רווח לפני האות או כתוב אותה באות גדולה (למשל: "dev--- ops", "dev---Ops").
צומת אחד (ברירת מחדל)
העתק
הטמעה
---
title: Node
---
flowchart LR
id
id הוא התוכן המוצג בתיבה.
תחביר יצירת תרשים זרימה: בנוסף לשימוש ב-flowchart, ניתן להשתמש גם ב-graph.
צומת עם טקסט
ניתן גם להגדיר עבור התיבה טקסט השונה מ-id. אם תבצע פעולה זו מספר פעמים, המערכת תאמץ את הטקסט האחרון שהוגדר לצומת. בנוסף, אם מאוחר יותר תוגדר לצומת קו חיבור, ניתן להשמיט את הגדרת הטקסט; בעת רינדור התיבה ישמש הטקסט שהוגדר קודם לכן.
העתק
הטמעה
---
title: Node with text
---
flowchart LR
id1[This is the text in the box]
טקסט Unicode
עטוף טקסט Unicode בגרשיים כפולים.
העתק
הטמעה
flowchart LR
id["This ❤ Unicode"]
תחביר Markdown
עטוף טקסט Markdown בגרשיים כפולים ובגרש אחורי
העתק
הטמעה
flowchart LR
markdown["`This **is** _Markdown_`"]
newLines["`Line1
Line 2
Line 3`"]
markdown --> newLines
כיוון
מצהיר על כיוון תרשים הזרימה
מציין שתרשים הזרימה מסודר מלמעלה למטה (TD או TB)
העתק
הטמעה
flowchart TD
Start --> Stop
כיווני תרשים זרימה כוללים:
- TB - מלמעלה למטה
- TD - מלמעלה למטה (זהה למלמעלה למטה)
- BT - מלמטה למעלה
- RL - מימין לשמאל
- LR - משמאל לימין
צורת צומת
מלבן מעוגל
העתק
הטמעה
flowchart LR
id1(This is the text in the box)
צורת אצטדיון
העתק
הטמעה
flowchart LR
id1([This is the text in the box])
תת-תהליך
העתק
הטמעה
flowchart LR
id1[[This is the text in the box]]
מסד נתונים
העתק
הטמעה
flowchart LR
id1[(Database)]
עיגול
העתק
הטמעה
flowchart LR
id1((This is the text in the circle))
צורה א-סימטרית
העתק
הטמעה
flowchart LR
id1>This is the text in the box]
מעוין
העתק
הטמעה
flowchart LR
id1{This is the text in the box}
משושה
העתק
הטמעה
flowchart LR
id1{{This is the text in the box}}
מקבילית
העתק
הטמעה
flowchart TD
id1[/This is the text in the box/]
מקבילית הפוכה
העתק
הטמעה
flowchart TD
id1[\This is the text in the box\]
טרפז
העתק
הטמעה
flowchart TD
A[/ProcessOn\]
טרפז הפוך
העתק
הטמעה
flowchart TD
B[\ProcessOn/]
עיגול כפול
העתק
הטמעה
flowchart TD
id1(((This is the text in the circle)))
הרחבת צורות צמתים בתרשים זרימה של Mermaid
Mermaid הציגה 30 צורות חדשות כדי לשפר את הגמישות והדיוק של יצירת תרשימי זרימה. צורות חדשות אלו מספקות אפשרויות נוספות לייצוג חזותי של תהליכים, החלטות, אירועים, אחסון נתונים ורכיבים אחרים בתרשים הזרימה, ובכך משפרות את הבהירות והמשמעות הסמנטית.
תחביר חדש להגדרת צורות
Mermaid תומכת כעת בתחביר כללי להגדרת סוגי צורות, כדי להתאים למספר ההולך וגדל של צורות. תחביר זה מאפשר לך לציין צורה מסוימת עבור צומת בפורמט ברור וגמיש.
העתק
הטמעה
A@{ shape: rect }
תחביר זה יוצר את צומת A כמלבן. אופן הרינדור שלו זהה ל-[A] או ל-A.
רשימה מלאה של צורות צמתים
להלן רשימה מלאה של צורות הצמתים החדשות שהוצגו, יחד עם המשמעות, הקיצור והכינויים המתאימים להן:
| שם סמנטי | תחביר גרפי | קיצור תחביר | חלופת תחביר | תיאור מפורט |
|---|---|---|---|---|
| כרטיס | Notched Rectangle | notch-rect | card, notched-rectangle | מייצג כרטיס |
| סידור | Hourglass | hourglass | collate | מייצג פעולת סידור |
| קישור תקשורת | Lightning Bolt | bolt | com-link, lightning-bolt | קישור תקשורת |
| הערה | Curly Brace | brace | brace-l, comment | הוספת הערה |
| הערה בצד ימין | Curly Brace | brace-r | הוספת הערה | |
| הערה עם סוגריים מסולסלים משני הצדדים | Curly Braces | braces | הוספת הערה | |
| קלט או פלט נתונים | Lean Right | lean-r | in-out, lean-right | מייצג קלט או פלט |
| קלט או פלט נתונים | Lean Left | lean-l | lean-left, out-in | מייצג פלט או קלט |
| מסד נתונים | Cylinder | cyl | cylinder, database, db | אחסון מסד נתונים |
| החלטה | Diamond | diam | decision, diamond, question | שלב החלטה |
| השהיה | Half-Rounded Rectangle | delay | half-rounded-rectangle | מייצג השהיה |
| אחסון בגישה ישירה | Horizontal Cylinder | h-cyl | das, horizontal-cylinder | אחסון בגישה ישירה |
| אחסון בדיסק | Lined Cylinder | lin-cyl | disk, lined-cylinder | אחסון בדיסק |
| תצוגה | Curved Trapezoid | curv-trap | curved-trapezoid, display | מייצג הצגת מידע על מסך, מסוף והתקנים אחרים |
| עיבוד מפוצל | Divided Rectangle | div-rect | div-proc, divided-process, divided-rectangle | צורת עיבוד מפוצל |
| מסמך | Document | doc | document | מייצג מסמך |
| אירוע | Rounded Rectangle | rounded | event | מייצג אירוע |
| חילוץ | Triangle | tri | extract, triangle | תהליך חילוץ |
| פיצול/מיזוג | Filled Rectangle | fork | join | פיצול או מיזוג בתרשים זרימה |
| אחסון פנימי | Window Pane | win-pane | internal-storage, window-pane | אחסון פנימי |
| נקודת חיבור | Filled Circle | f-circ | filled-circle, junction | נקודת חיבור |
| מסמך עם קו | Lined Document | lin-doc | lined-document | מסמך עם קו |
| תהליך קו/צל | Lined Rectangle | lin-rect | lin-proc, lined-process, lined-rectangle, shaded-process | צורת תהליך עם קו |
| הגבלת לולאה | Trapezoidal Pentagon | notch-pent | loop-limit, notched-pentagon | שלב הגבלת לולאה |
| קובץ ידני | Flipped Triangle | flip-tri | flipped-triangle, manual-file | פעולת קובץ ידנית |
| קלט ידני | Sloped Rectangle | sl-rect | manual-input, sloped-rectangle | שלב קלט ידני |
| פעולה ידנית | Trapezoid Base Top | trap-t | inv-trapezoid, manual, trapezoid-top | מייצג משימה ידנית |
| ריבוי מסמכים | Stacked Document | docs | documents, st-doc, stacked-document | 多个文档 |
| ריבוי תהליכים | Stacked Rectangle | st-rect | processes, procs, stacked-rectangle | 多个进程 |
| צורה לא סדירה | Odd | odd | צורה לא סדירה | |
| סרט נייר | Flag | flag | paper-tape | סרט נייר |
| תנאי הכנה | Hexagon | hex | hexagon, prepare | שלב הכנה או תנאי |
| פעולה בעדיפות | Trapezoid Base Bottom | trap-b | priority, trapezoid, trapezoid-bottom | פעולה בעדיפות |
| עיבוד | Rectangle | rect | proc, process, rectangle | צורת עיבוד סטנדרטית |
| התחלה | Circle | circle | circ | נקודת התחלה |
| התחלה | Small Circle | sm-circ | small-circle, start | נקודת התחלה בעיגול קטן |
| עצירה | Double Circle | dbl-circ | double-circle | מייצג נקודת עצירה |
| עצירה | Framed Circle | fr-circ | framed-circle, stop | מייצג נקודת עצירה |
| אחסון נתונים | Bow Tie Rectangle | bow-rect | bow-tie-rectangle, stored-data | אחסון נתונים |
| תת-תהליך | Framed Rectangle | fr-rect | framed-rectangle, subproc, subprocess, subroutine | תת-תהליך, תוכנית משנה |
| תקציר | Crossed Circle | cross-circ | crossed-circle, summary | תקציר |
| מסמך מתויג | Tagged Document | tag-doc | tagged-document | מסמך מתויג |
| תהליך מתוקנן | Tagged Rectangle | tag-rect | tag-proc, tagged-process, tagged-rectangle | 已标准进程 |
| נקודת סיום | Stadium | stadium | pill, terminal | נקודת סיום |
| בלוק טקסט | Text Block | text | בלוק טקסט |
להלן דוגמת קוד של תרשים זרימה המשתמשת בצורות החדשות שהוצגו:
העתק
הטמעה
flowchart RL
A@{ shape: manual-file, label: "File Handling"}
B@{ shape: manual-input, label: "User Input"}
C@{ shape: docs, label: "Multiple Documents"}
D@{ shape: procs, label: "Process Automation"}
E@{ shape: paper-tape, label: "Paper Records"}
תהליך
העתק
הטמעה
flowchart TD
A@{ shape: rect, label: "This is a process" }
אירוע
העתק
הטמעה
flowchart TD
A@{ shape: rounded, label: "This is an event" }
תת-תהליך
העתק
הטמעה
flowchart TD
A@{ shape: subproc, label: "This is a subprocess" }
מסד נתונים (גליל)
העתק
הטמעה
flowchart TD
A@{ shape: cyl, label: "Database" }
התחלה (עיגול)
העתק
הטמעה
flowchart TD
A@{ shape: circle, label: "Start" }
צורה לא סדירה
העתק
הטמעה
flowchart TD
A@{ shape: odd, label: "Odd shape" }
החלטה (מעוין)
העתק
הטמעה
flowchart TD
A@{ shape: diamond, label: "Decision" }
תנאי הכנה (משושה)
העתק
הטמעה
flowchart TD
A@{ shape: hex, label: "Prepare conditional" }
קלט/פלט נתונים (מוטה ימינה)
העתק
הטמעה
flowchart TD
A@{ shape: lean-r, label: "Input/Output" }
קלט/פלט נתונים (מוטה שמאלה)
העתק
הטמעה
flowchart TD
A@{ shape: lean-l, label: "Input/Output" }
פעולה בעדיפות (טרפז)
העתק
הטמעה
flowchart TD
A@{ shape: trap-b, label: "Priority action" }
פעולה ידנית (טרפז הפוך)
העתק
הטמעה
flowchart TD
A@{ shape: trap-t, label: "Manual operation" }
עצירה (עיגול כפול)
העתק
הטמעה
flowchart TD
A@{ shape: dbl-circ, label: "Stop" }
בלוק טקסט
העתק
הטמעה
flowchart TD
A@{ shape: text, label: "This is a text block" }
כרטיס (מלבן עם חריץ)
העתק
הטמעה
flowchart TD
A@{ shape: notch-rect, label: "Card" }
תהליך עם קו/צל
העתק
הטמעה
flowchart TD
A@{ shape: lin-rect, label: "Lined process" }
התחלה (עיגול קטן)
העתק
הטמעה
flowchart TD
A@{ shape: sm-circ, label: "Small start" }
עצירה (עיגול עם מסגרת)
העתק
הטמעה
flowchart TD
A@{ shape: framed-circle, label: "Stop" }
פיצול/מיזוג (מלבן ארוך)
העתק
הטמעה
flowchart TD
A@{ shape: fork, label: "Fork or Join" }
סידור (שעון חול)
העתק
הטמעה
flowchart TD
A@{ shape: hourglass, label: "Collate" }
הערה (סוגריים מסולסלים)
העתק
הטמעה
flowchart TD
A@{ shape: comment, label: "Comment" }
הערה בצד ימין (סוגריים מסולסלים ימניים)
העתק
הטמעה
flowchart TD
A@{ shape: brace-r, label: "Comment" }
הערה (עם סוגריים משני הצדדים)
העתק
הטמעה
flowchart TD
A@{ shape: braces, label: "Comment" }
קישור תקשורת (ברק)
העתק
הטמעה
flowchart TD
A@{ shape: bolt, label: "Communication link" }
מסמך
העתק
הטמעה
flowchart TD
A@{ shape: doc, label: "Document" }
השהיה (מלבן בעל פינות מעוגלות למחצה)
העתק
הטמעה
flowchart TD
A@{ shape: delay, label: "Delay" }
直接存取存储（水平圆柱）
העתק
הטמעה
flowchart TD
A@{ shape: das, label: "Direct access to storage" }
אחסון בדיסק (גליל עם חריץ)
העתק
הטמעה
flowchart TD
A@{ shape: lin-cyl, label: "Disk storage" }
תצוגה (צורת תצוגה)
העתק
הטמעה
flowchart TD
A@{ shape: curv-trap, label: "Display" }
עיבוד מפוצל (מלבן מפוצל)
העתק
הטמעה
flowchart TD
A@{ shape: div-rect, label: "Divided process" }
חילוץ (משולש קטן)
העתק
הטמעה
flowchart TD
A@{ shape: tri, label: "Extract" }
אחסון פנימי (פאנל חלון)
העתק
הטמעה
flowchart TD
A@{ shape: win-pane, label: "Internal storage" }
נקודת חיבור (עיגול מלא)
העתק
הטמעה
flowchart TD
A@{ shape: f-circ, label: "Connect" }
מסמך עם קו
העתק
הטמעה
flowchart TD
A@{ shape: lin-doc, label: "Lined document" }
הגבלת לולאה (מחומש עם חריץ)
העתק
הטמעה
flowchart TD
A@{ shape: notch-pent, label: "Loop limit" }
קובץ ידני (משולש הפוך)
העתק
הטמעה
flowchart TD
A@{ shape: flip-tri, label: "Manual file" }
קלט ידני (טרפז ישר-זווית)
העתק
הטמעה
flowchart TD
A@{ shape: sl-rect, label: "Manual input" }
ריבוי מסמכים (מסמכים מוערמים)
העתק
הטמעה
flowchart TD
A@{ shape: docs, label: "Multi-document" }
ריבוי תהליכים (מלבנים מוערמים)
העתק
הטמעה
flowchart TD
A@{ shape: processes, label: "Multiple processes" }
סרט נייר (דגל)
העתק
הטמעה
flowchart TD
A@{ shape: flag, label: "Paper tape" }
אחסון נתונים (מלבן צורת פפיון)
העתק
הטמעה
flowchart TD
A@{ shape: bow-rect, label: "Data stored" }
תקציר (עיגול עם צלב)
העתק
הטמעה
flowchart TD
A@{ shape: cross-circ, label: "Summary" }
מסמך מתויג
העתק
הטמעה
flowchart TD
A@{ shape: tag-doc, label: "Tagged document" }
תהליך מסומן
העתק
הטמעה
flowchart TD
A@{ shape: tag-rect, label: "Tagged process" }
צורות מיוחדות בתרשים זרימה של Mermaid
Mermaid הציגה גם תמונות כדי לשפר את תרשים הזרימה שלך, ומאפשרת לך לכלול תמונות ישירות בתרשים הזרימה, ובכך לספק רקע חזותי ובהירות נוספים.
צורת תמונה
ניתן להשתמש ב-image כדי להוסיף תמונה לתרשים הזרימה; התחביר להגדרת תמונה הוא כדלקמן:
העתק
הטמעה
flowchart TD
A@{ img: "https://www.processon.com/image.png", label: "Image Label", pos: "t", w: 60, h: 60, constraint: "off" }
פרמטר
- img: כתובת ה-URL של התמונה להצגה.
- label: תווית טקסט המשויכת לתמונה, שיכולה להיות כל מחרוזת. אם לא הוגדרה, לא תוצג תווית.
- pos: מיקום התווית. אם לא הוגדר, התווית תוצג כברירת מחדל בתחתית התמונה.
- w: רוחב התמונה. אם לא הוגדר, ייעשה שימוש כברירת מחדל ברוחב הטבעי של התמונה.
- h: גובה התמונה. אם לא הוגדר, ייעשה שימוש כברירת מחדל בגובה הטבעי של התמונה.
- constraint: קובע אם התמונה מגבילה את גודל הצומת. הגדרה זו גם מבטיחה שהתמונה תשמור על יחס הגובה-רוחב המקורי שלה, ותתאים את הגובה בהתאם לרוחב. אם לא הוגדר, ברירת המחדל היא off.
תמונות מספקות לתרשים הזרימה שלך גמישות ואטרקטיביות חזותית נוספות, והופכות אותו לעשיר יותר במידע ולמושך יותר.
חיבורים בין צמתים
ניתן לחבר צמתים באמצעות קווי חיבור וחצים. קיימים סוגים שונים של קישורים, וניתן גם לצרף מחרוזות טקסט לקישורים.
קישור עם חץ
העתק
הטמעה
flowchart LR
A-->B
קישור פתוח
העתק
הטמעה
flowchart LR
A --- B
קישור עם טקסט
העתק
הטמעה
flowchart LR
A-- This is the text! ---B
או
העתק
הטמעה
flowchart LR
A --- | This is the text| B
קישור עם חץ וטקסט
העתק
הטמעה
flowchart LR
A-->|text|B
או
העתק
הטמעה
flowchart LR
A-- text -->B
קישור מקווקו
העתק
הטמעה
flowchart LR
A-.->B;
קישור מקווקו עם טקסט
העתק
הטמעה
flowchart LR
A-. text .->B;
קישור עבה
העתק
הטמעה
flowchart LR
A ==> B
קישור עבה עם טקסט
העתק
הטמעה
flowchart LR
A == |text| ==> B
קישור בלתי נראה
העתק
הטמעה
flowchart LR
A ~~~ B
שרשור קישורים
העתק
הטמעה
flowchart LR
A -- text --> B -- text2 --> C
ניתן גם להצהיר על מספר קישורי צמתים באותה שורה, כפי שמוצג להלן:
העתק
הטמעה
flowchart LR
a --> b & c--> d
ניתן גם לתאר תלות, כמו בקוד שלהלן:
העתק
הטמעה
flowchart LR
a --> b & c--> d & e--> f
אם מתארים את אותו גרף באמצעות התחביר הבסיסי, נדרשות 8 שורות. יש לזכור ששימוש יתר בשיטה זו עלול להקשות על קריאת תרשים זרימה בפורמט Markdown.
העתק
הטמעה
flowchart TB
a --> b
a --> c
b --> d
b --> e
c --> d
c --> e
d --> f
e --> f
הוספת ID לקו חיבור
Mermaid תומכת כעת בהוספת ID לקווי חיבור, בדומה לצירוף ID ומטא-נתונים לצמתים. תכונה זו מניחה את הבסיס לאפשרויות עיצוב, מחלקות ואנימציה מתקדמות יותר על קווי חיבור.
תחביר:כדי להוסיף ID לקו חיבור, יש להוסיף ID לפני תחביר קו החיבור, ומיד אחריו את התו @. לדוגמה:
העתק
הטמעה
flowchart LR
A e1@--> B
בדוגמה זו, e1 הוא ה-ID של קו החיבור המחבר בין A ל-B. ניתן להשתמש ב-ID זה בהגדרות או בהצהרות עיצוב עוקבות, ממש כמו בצומת.
הפעלת אנימציה
לאחר הוספת ID לקו חיבור, ניתן להפעיל אנימציה של קו החיבור על ידי הגדרת מאפיינים של קו החיבור:
העתק
הטמעה
flowchart LR
A e1@==> B
e1@{ animate: true }
הדבר אומר ל-Mermaid שקו החיבור e1 הוא אנימציה.
בחירת סוג אנימציה
בגרסה הראשונית נתמכות שתי מהירויות אנימציה: fast ו-slow. בחירת סוג אנימציה מסוים היא דרך נוחה להפעיל אנימציה ולקבוע את מהירותה בבת אחת.
העתק
הטמעה
flowchart LR
A e1@--> B
e1@{ animation: fast }
这相当于 e1@{ animate: true, animation: fast }。
אנימציה באמצעות הצהרת classDef
ניתן גם להוסיף אנימציה לקו חיבור על ידי הקצאת מחלקה לקו החיבור, ואחר כך הגדרת מאפייני האנימציה בהצהרת classDef. לדוגמה:
העתק
הטמעה
flowchart LR
A e1@--> B
classDef animate stroke-dasharray: 9,5,stroke-dashoffset: 900,animation: dash 25s linear infinite;
class e1 animate
בקוד זה:
- e1@--> 创建了一个 ID 为 e1 的连接线
- classDef animate מגדיר מחלקה בשם animate, בעלת מאפייני סגנון ואנימציה.
- class e1 animate מחיל את מחלקת animate על קו החיבור e1.
הערה לגבי החלפת פסיקים: בעת הגדרת מאפיין stroke-dasharray, זכור להחליף את הפסיק ב-, מכיוון שפסיק משמש כמפריד בהגדרות הסגנון של Mermaid.
סוג חץ חדש
תמיכה בסוגי חצים חדשים
- קו חיבור עם עיגול מלא
- קו חיבור עם סימן הצלבה
קו חיבור עם עיגול מלא
העתק
הטמעה
flowchart LR
A --o B
קו חיבור עם סימן הצלבה
העתק
הטמעה
flowchart LR
A --x B
חץ רב-כיווני
ניתן להשתמש בחצים רב-כיווניים, לדוגמה:
העתק
הטמעה
flowchart LR
A o--o B
B <--> C
C x--x D
אורך קו חיבור
כל צומת בתרשים הזרימה מקבל, בהתאם לצמתים שאליהם הוא מחובר, דרגה בגרף המרונדר, כלומר רמה אנכית או אופקית (בהתאם לכיוון תרשים הזרימה). כברירת מחדל, קישור יכול לפרוס כל מספר של דרגות, אך ניתן לדרוש שקישור מסוים יהיה ארוך יותר מקישורים אחרים על ידי הוספת קווי מקף נוספים בהגדרת החיבור.
בדוגמה זו, בחיבור מהצומת B לצומת E נוספו שני קווי מקף נוספים, כך שהוא פורס שתי דרגות יותר מקישור רגיל:
העתק
הטמעה
flowchart TD
A[Start] --> B{Is it?}
B -->|Yes| C[OK]
C --> D[Rethink]
D --> B
B ---->|No| E[End]
כאשר תווית החיבור נכתבת באמצע החיבור, יש להוסיף קווי מקף נוספים בצד ימין של החיבור. דוגמה זו שקולה לדוגמה הקודמת:
העתק
הטמעה
flowchart TD
A[Start] --> B{Is it?}
B -->|Yes| C[OK]
C --> D[Rethink]
D --> B
B -- No ----> E[End]
עבור קווים מנוקדים או קישורים עבים, התווים שיש להוסיף הם סימני שוויון או נקודות, כפי שמוצג בטבלה שלהלן:
| אורך | 1 | 2 | 3 |
|---|---|---|---|
| חיבור רגיל | --- | ---- | ----- |
| חיבור רגיל עם חץ | --> | ---> | ----> |
| חיבור עבה | === | ==== | ===== |
| חיבור עבה עם חץ | ==> | ===> | ====> |
| קו מנוקד | -.- | -..- | -...- |
| קו מנוקד עם חץ | -.- | -..-> | -...-> |
תווים מיוחדים
ניתן לשים טקסט בתוך מרכאות כדי לרנדר תווים בעייתיים יותר. כפי שמוצג בדוגמה שלהלן:
העתק
הטמעה
flowchart LR
id1["This is the (text) in the box"]
קידוד ישויות להחלפת תווים
ניתן להחליף תווים באמצעות התחביר שבדוגמה.
העתק
הטמעה
flowchart LR
A["A double quote:#quot;"] --> B["A dec char:#9829;"]
המספרים הנתונים הם עשרוניים, לכן # יכול להיות מקודד כ-#35. נתמך גם שימוש בשמות תווי HTML.
תת-גרף
העתק
הטמעה
subgraph title
graph definition
end
להלן דוגמה:
העתק
הטמעה
flowchart TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
ניתן גם להגדיר id עבור תת-גרף.
העתק
הטמעה
flowchart TB
c1-->a2
subgraph ide1 [one]
a1-->a2
end
תרשים זרימה
באמצעות תרשים מסוג תרשים זרימה, ניתן גם להגדיר קווי חיבור אל תת-הגרף וממנו, כפי שמוצג בתרשים הזרימה שלהלן.
העתק
הטמעה
flowchart TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
one --> two
three --> two
two --> c2
כיוון תת-גרף
כאשר משתמשים בסוג תרשים זרימה, ניתן להשתמש בהצהרת כיוון כדי לקבוע את כיוון הרינדור של תת-הגרף, כפי שמוצג להלן:
העתק
הטמעה
flowchart LR
subgraph TOP
direction TB
subgraph B1
direction RL
i1 -->f1
end
subgraph B2
direction BT
i2 -->f2
end
end
A --> TOP --> B
B1 --> B2
מגבלות
אם צומת כלשהו בתת-הגרף מחובר לחוץ, כיוון תת-הגרף ייתעלם. אחרת, תת-הגרף יירש את כיוון הגרף הראשי:
העתק
הטמעה
flowchart LR
subgraph subgraph1
direction TB
top1[top] --> bottom1[bottom]
end
subgraph subgraph2
direction TB
top2[top] --> bottom2[bottom]
end
%% ^ These subgraphs are identical, except for the links to them:
%% Link *to* subgraph1: subgraph1 direction is maintained
outside --> subgraph1
%% Link *within* subgraph2:
%% subgraph2 inherits the direction of the top-level graph (LR)
outside ---> top2
מחרוזת Markdown
מחרוזות Markdown משפרות תרשימי זרימה ומפות חשיבה בכך שהן מספקות סוג מחרוזת גמיש יותר, תומכות באפשרויות עיצוב טקסט כגון מודגש ונטוי, ומאפשרות גלישת טקסט אוטומטית בתוך תוויות.
העתק
הטמעה
flowchart LR
subgraph "One"
a("`The **cat**
in the hat`") -- "edge label" --> b{{"`The **dog** in the hog`"}}
end
subgraph "`**Two**`"
c("`The **cat**
in the hat`") -- "`Bold **edge label**`" --> d("The dog in the hog")
end
- כדי להדגיש טקסט, השתמש בשני כוכביות (**) לפני ואחרי הטקסט.
- נטוי משתמש בכוכבית בודדת (*) לפני ואחרי הטקסט.
- עבור מחרוזות מסורתיות, יש להוסיף תג <br> כדי לגרום לטקסט לגלוש בתוך צומת. לעומת זאת, מחרוזות Markdown גולשות אוטומטית כשהטקסט ארוך מדי, ומספיק להשתמש בתו מעבר שורה במקום בתג <br> כדי להתחיל שורה חדשה.
תכונה זו חלה על תוויות צמתים, תוויות קווי חיבור ותוויות תת-גרפים
ניתן להשבית את גלישת השורות האוטומטית באמצעות תחביר מסוים
העתק
הטמעה
---
config:
markdownAutoWrap: false
---
graph LR
הערה
ניתן להזין הערות בתרשים הזרימה, והעורך יתעלם מהן. ההערה חייבת לתפוס שורה נפרדת, וחייבת להתחיל בשני סימני אחוז (%%). כל טקסט מההערה ועד השורה הבאה ייחשב כהערה, כולל כל תחביר תרשים.
העתק
הטמעה
flowchart LR
%% this is a comment A -- text --> B{node}
A -- text --> B -- text2 --> C
סגנון ומחלקות
סגנון קישור
ניתן להגדיר סגנון קישור. לדוגמה, ייתכן שתרצה לעצב קישור שנע אחורה בתהליך; מכיוון שלקישורים אין ID כמו שלצמתים, יש לקבוע בדרך אחרת את הסגנון שבו אמור להשתמש הקישור. השתמש במספר הסידורי בעת הגדרת הקישור, או השתמש בברירת מחדל שתחול על כל הקישורים.
העתק
הטמעה
linkStyle 3 stroke:#ff3,stroke-width:4px,color:red;
ניתן גם להוסיף סגנון למספר קישורים על ידי הפרדת מספרי הקישורים בפסיקים בהצהרה אחת:
העתק
הטמעה
linkStyle 1,2,7 color:blue;
הגדרת סגנון עקומה לקו חיבור
אם שיטת ברירת המחדל אינה עונה על צרכיך, ניתן להגדיר סגנון עקומה לקווי החיבור בין הפריטים. סגנונות העקומה הזמינים כוללים basis, bumpX, bumpY, cardinal, catmullRom, linear, monotoneX, monotoneY, natural, step, stepAfter ו-stepBefore.
בדוגמה שלהלן, תרשים משמאל לימין משתמש בסגנון העקומה stepBefore.
העתק
הטמעה
%%{ init: { 'flowchart': { 'curve': 'stepBefore' } } }%%
graph LR
הגדרת סגנון צומת
ניתן להגדיר סגנון מסוים לצומת, כגון מסגרת עבה יותר או צבע רקע שונה.
העתק
הטמעה
flowchart LR
id1(Start)-->id2(Stop)
style id1 fill:#f99,stroke:#33d,stroke-width:4px
style id2 fill:#bfc,stroke:#f96,stroke-width:2px,color:#000,stroke-dasharray: 5 5
מחלקה
נוח יותר מלהגדיר סגנון בכל פעם הוא להגדיר מחלקת סגנון ולצרף אותה לצמתים הזקוקים למראה שונה.
הגדרת מחלקה היא כדלקמן:
העתק
הטמעה
classDef className fill:pink,stroke:#333,stroke-width:4px;
בנוסף, ניתן להגדיר סגנון למספר מחלקות בהצהרה אחת:
העתק
הטמעה
classDef firstClassName,secondClassName font-size:12pt;
צירוף מחלקה לצומת מתבצע כדלקמן:
העתק
הטמעה
class nodeId1 className;
ניתן גם לצרף מחלקה לרשימת צמתים בהצהרה אחת:
העתק
הטמעה
class nodeId1,nodeId2 className;
הוספת מחלקה יכולה להשתמש באופרטור ::: כדי לצרף שם מחלקה לצומת, כפי שמוצג להלן:
העתק
הטמעה
flowchart LR
A:::someclass --> B
classDef someclass fill:#f96
ניתן להשתמש בצורה זו בעת הצהרה על מספר קישורים בין צמתים:
העתק
הטמעה
flowchart LR
A:::foo & B:::bar --> C:::foobar
classDef foo stroke:#f00
classDef bar stroke:#0f0
classDef foobar stroke:#00f
- בהצהרת גרף, הצהרות יכולות כעת גם לא להסתיים בנקודה-פסיק. החל מגרסה 0.2.16, סיום הצהרת גרף בנקודה-פסיק הוא אופציונלי בלבד. לכן, הצהרת הגרף שלהלן תקפה בדיוק כמו הצהרת הגרף הישנה.
- בין קודקודים וקישורים מותר רווח אחד. עם זאת, בין קודקוד לטקסט שלו ובין קישור לטקסט שלו לא אמור להיות רווח כלשהו. הצהרת הגרף הישנה גם היא עדיין תקפה, לכן תכונה חדשה זו היא אופציונלית ומטרתה לשפר את הקריאות.
להלן הצהרת קו חיבור חדשה, שתקפה בדיוק כמו הצהרת קו החיבור הישנה.
העתק
הטמעה
flowchart LR
A[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
C -->|Two| E[Result two]
