flowchart.md · grove

51.2 KB2115 lines

1	> Warning
2	>
3	> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
4	>
5	> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/flowchart.md](../../packages/mermaid/src/docs/syntax/flowchart.md).
6
7	# Flowcharts - Basic Syntax
8
9	Flowcharts are composed of nodes (geometric shapes) and edges (arrows or lines). The Mermaid code defines how nodes and edges are made and accommodates different arrow types, multi-directional arrows, and any linking to and from subgraphs.
10
11	> Warning
12	> If you are using the word "end" in a Flowchart node, capitalize the entire word or any of the letters (e.g., "End" or "END"), or apply this [workaround](https://github.com/mermaid-js/mermaid/issues/1444#issuecomment-639528897). Typing "end" in all lowercase letters will break the Flowchart.
13
14	> Warning
15	> If you are using the letter "o" or "x" as the first letter in a connecting Flowchart node, add a space before the letter or capitalize the letter (e.g., "dev--- ops", "dev---Ops").
16	>
17	> Typing "A---oB" will create a [circle edge](#circle-edge-example).
18	>
19	> Typing "A---xB" will create a [cross edge](#cross-edge-example).
20
21	### A node (default)
22
23	```mermaid-example
24	---
25	title: Node
26	---
27	flowchart LR
28	id
29	```
30
31	```mermaid
32	---
33	title: Node
34	---
35	flowchart LR
36	id
37	```
38
39	> Note
40	> The id is what is displayed in the box.
41
42	> 💡 Tip
43	> Instead of `flowchart` one can also use `graph`.
44
45	### A node with text
46
47	It is also possible to set text in the box that differs from the id. If this is done several times, it is the last text
48	found for the node that will be used. Also if you define edges for the node later on, you can omit text definitions. The
49	one previously defined will be used when rendering the box.
50
51	```mermaid-example
52	---
53	title: Node with text
54	---
55	flowchart LR
56	id1[This is the text in the box]
57	```
58
59	```mermaid
60	---
61	title: Node with text
62	---
63	flowchart LR
64	id1[This is the text in the box]
65	```
66
67	#### Unicode text
68
69	Use `"` to enclose the unicode text.
70
71	```mermaid-example
72	flowchart LR
73	id["This ❤ Unicode"]
74	```
75
76	```mermaid
77	flowchart LR
78	id["This ❤ Unicode"]
79	```
80
81	#### Markdown formatting
82
83	Use double quotes and backticks "\` text \`" to enclose the markdown text.
84
85	```mermaid-example
86	---
87	config:
88	htmlLabels: false
89	---
90	flowchart LR
91	markdown["`This is _Markdown_`"]
92	newLines["`Line1
93	Line 2
94	Line 3`"]
95	markdown --> newLines
96	```
97
98	```mermaid
99	---
100	config:
101	htmlLabels: false
102	---
103	flowchart LR
104	markdown["`This is _Markdown_`"]
105	newLines["`Line1
106	Line 2
107	Line 3`"]
108	markdown --> newLines
109	```
110
111	### Direction
112
113	This statement declares the direction of the Flowchart.
114
115	This declares the flowchart is oriented from top to bottom (`TD` or `TB`).
116
117	```mermaid-example
118	flowchart TD
119	Start --> Stop
120	```
121
122	```mermaid
123	flowchart TD
124	Start --> Stop
125	```
126
127	This declares the flowchart is oriented from left to right (`LR`).
128
129	```mermaid-example
130	flowchart LR
131	Start --> Stop
132	```
133
134	```mermaid
135	flowchart LR
136	Start --> Stop
137	```
138
139	Possible FlowChart orientations are:
140
141	- TB - Top to bottom
142	- TD - Top-down/ same as top to bottom
143	- BT - Bottom to top
144	- RL - Right to left
145	- LR - Left to right
146
147	## Node shapes
148
149	### A node with round edges
150
151	```mermaid-example
152	flowchart LR
153	id1(This is the text in the box)
154	```
155
156	```mermaid
157	flowchart LR
158	id1(This is the text in the box)
159	```
160
161	### A stadium-shaped node
162
163	```mermaid-example
164	flowchart LR
165	id1([This is the text in the box])
166	```
167
168	```mermaid
169	flowchart LR
170	id1([This is the text in the box])
171	```
172
173	### A node in a subroutine shape
174
175	```mermaid-example
176	flowchart LR
177	id1[[This is the text in the box]]
178	```
179
180	```mermaid
181	flowchart LR
182	id1[[This is the text in the box]]
183	```
184
185	### A node in a cylindrical shape
186
187	```mermaid-example
188	flowchart LR
189	id1[(Database)]
190	```
191
192	```mermaid
193	flowchart LR
194	id1[(Database)]
195	```
196
197	### A node in the form of a circle
198
199	```mermaid-example
200	flowchart LR
201	id1((This is the text in the circle))
202	```
203
204	```mermaid
205	flowchart LR
206	id1((This is the text in the circle))
207	```
208
209	### A node in an asymmetric shape
210
211	```mermaid-example
212	flowchart LR
213	id1>This is the text in the box]
214	```
215
216	```mermaid
217	flowchart LR
218	id1>This is the text in the box]
219	```
220
221	Currently only the shape above is possible and not its mirror. _This might change with future releases._
222
223	### A node (rhombus)
224
225	```mermaid-example
226	flowchart LR
227	id1{This is the text in the box}
228	```
229
230	```mermaid
231	flowchart LR
232	id1{This is the text in the box}
233	```
234
235	### A hexagon node
236
237	```mermaid-example
238	flowchart LR
239	id1{{This is the text in the box}}
240	```
241
242	```mermaid
243	flowchart LR
244	id1{{This is the text in the box}}
245	```
246
247	### Parallelogram
248
249	```mermaid-example
250	flowchart TD
251	id1[/This is the text in the box/]
252	```
253
254	```mermaid
255	flowchart TD
256	id1[/This is the text in the box/]
257	```
258
259	### Parallelogram alt
260
261	```mermaid-example
262	flowchart TD
263	id1[\This is the text in the box\]
264	```
265
266	```mermaid
267	flowchart TD
268	id1[\This is the text in the box\]
269	```
270
271	### Trapezoid
272
273	```mermaid-example
274	flowchart TD
275	A[/Christmas\]
276	```
277
278	```mermaid
279	flowchart TD
280	A[/Christmas\]
281	```
282
283	### Trapezoid alt
284
285	```mermaid-example
286	flowchart TD
287	B[\Go shopping/]
288	```
289
290	```mermaid
291	flowchart TD
292	B[\Go shopping/]
293	```
294
295	### Double circle
296
297	```mermaid-example
298	flowchart TD
299	id1(((This is the text in the circle)))
300	```
301
302	```mermaid
303	flowchart TD
304	id1(((This is the text in the circle)))
305	```
306
307	## Expanded Node Shapes in Mermaid Flowcharts (v11.3.0+)
308
309	Mermaid introduces 30 new shapes to enhance the flexibility and precision of flowchart creation. These new shapes provide more options to represent processes, decisions, events, data storage visually, and other elements within your flowcharts, improving clarity and semantic meaning.
310
311	New Syntax for Shape Definition
312
313	Mermaid now supports a general syntax for defining shape types to accommodate the growing number of shapes. This syntax allows you to assign specific shapes to nodes using a clear and flexible format:
314
315	```
316	A@{ shape: rect }
317	```
318
319	This syntax creates a node A as a rectangle. It renders in the same way as `A["A"]`, or `A`.
320
321	### Complete List of New Shapes
322
323	Below is a comprehensive list of the newly introduced shapes and their corresponding semantic meanings, short names, and aliases:
324
325	\| Semantic Name \| Shape Name \| Short Name \| Description \| Alias Supported \|
326	\| --------------------------------- \| ---------------------- \| -------------- \| ------------------------------ \| ---------------------------------------------------------------- \|
327	\| Bang \| Bang \| `bang` \| Bang \| `bang` \|
328	\| Card \| Notched Rectangle \| `notch-rect` \| Represents a card \| `card`, `notched-rectangle` \|
329	\| Cloud \| Cloud \| `cloud` \| cloud \| `cloud` \|
330	\| Collate \| Hourglass \| `hourglass` \| Represents a collate operation \| `collate`, `hourglass` \|
331	\| Com Link \| Lightning Bolt \| `bolt` \| Communication link \| `com-link`, `lightning-bolt` \|
332	\| Comment \| Curly Brace \| `brace` \| Adds a comment \| `brace-l`, `comment` \|
333	\| Comment Right \| Curly Brace \| `brace-r` \| Adds a comment \| \|
334	\| Comment with braces on both sides \| Curly Braces \| `braces` \| Adds a comment \| \|
335	\| Data Input/Output \| Lean Right \| `lean-r` \| Represents input or output \| `in-out`, `lean-right` \|
336	\| Data Input/Output \| Lean Left \| `lean-l` \| Represents output or input \| `lean-left`, `out-in` \|
337	\| Database \| Cylinder \| `cyl` \| Database storage \| `cylinder`, `database`, `db` \|
338	\| Decision \| Diamond \| `diam` \| Decision-making step \| `decision`, `diamond`, `question` \|
339	\| Delay \| Half-Rounded Rectangle \| `delay` \| Represents a delay \| `half-rounded-rectangle` \|
340	\| Direct Access Storage \| Horizontal Cylinder \| `h-cyl` \| Direct access storage \| `das`, `horizontal-cylinder` \|
341	\| Disk Storage \| Lined Cylinder \| `lin-cyl` \| Disk storage \| `disk`, `lined-cylinder` \|
342	\| Display \| Curved Trapezoid \| `curv-trap` \| Represents a display \| `curved-trapezoid`, `display` \|
343	\| Divided Process \| Divided Rectangle \| `div-rect` \| Divided process shape \| `div-proc`, `divided-process`, `divided-rectangle` \|
344	\| Document \| Document \| `doc` \| Represents a document \| `doc`, `document` \|
345	\| Event \| Rounded Rectangle \| `rounded` \| Represents an event \| `event` \|
346	\| Extract \| Triangle \| `tri` \| Extraction process \| `extract`, `triangle` \|
347	\| Fork/Join \| Filled Rectangle \| `fork` \| Fork or join in process flow \| `join` \|
348	\| Internal Storage \| Window Pane \| `win-pane` \| Internal storage \| `internal-storage`, `window-pane` \|
349	\| Junction \| Filled Circle \| `f-circ` \| Junction point \| `filled-circle`, `junction` \|
350	\| Lined Document \| Lined Document \| `lin-doc` \| Lined document \| `lined-document` \|
351	\| Lined/Shaded Process \| Lined Rectangle \| `lin-rect` \| Lined process shape \| `lin-proc`, `lined-process`, `lined-rectangle`, `shaded-process` \|
352	\| Loop Limit \| Trapezoidal Pentagon \| `notch-pent` \| Loop limit step \| `loop-limit`, `notched-pentagon` \|
353	\| Manual File \| Flipped Triangle \| `flip-tri` \| Manual file operation \| `flipped-triangle`, `manual-file` \|
354	\| Manual Input \| Sloped Rectangle \| `sl-rect` \| Manual input step \| `manual-input`, `sloped-rectangle` \|
355	\| Manual Operation \| Trapezoid Base Top \| `trap-t` \| Represents a manual task \| `inv-trapezoid`, `manual`, `trapezoid-top` \|
356	\| Multi-Document \| Stacked Document \| `docs` \| Multiple documents \| `documents`, `st-doc`, `stacked-document` \|
357	\| Multi-Process \| Stacked Rectangle \| `st-rect` \| Multiple processes \| `processes`, `procs`, `stacked-rectangle` \|
358	\| Odd \| Odd \| `odd` \| Odd shape \| \|
359	\| Paper Tape \| Flag \| `flag` \| Paper tape \| `paper-tape` \|
360	\| Prepare Conditional \| Hexagon \| `hex` \| Preparation or condition step \| `hexagon`, `prepare` \|
361	\| Priority Action \| Trapezoid Base Bottom \| `trap-b` \| Priority action \| `priority`, `trapezoid`, `trapezoid-bottom` \|
362	\| Process \| Rectangle \| `rect` \| Standard process shape \| `proc`, `process`, `rectangle` \|
363	\| Start \| Circle \| `circle` \| Starting point \| `circ` \|
364	\| Start \| Small Circle \| `sm-circ` \| Small starting point \| `small-circle`, `start` \|
365	\| Stop \| Double Circle \| `dbl-circ` \| Represents a stop point \| `double-circle` \|
366	\| Stop \| Framed Circle \| `fr-circ` \| Stop point \| `framed-circle`, `stop` \|
367	\| Stored Data \| Bow Tie Rectangle \| `bow-rect` \| Stored data \| `bow-tie-rectangle`, `stored-data` \|
368	\| Subprocess \| Framed Rectangle \| `fr-rect` \| Subprocess \| `framed-rectangle`, `subproc`, `subprocess`, `subroutine` \|
369	\| Summary \| Crossed Circle \| `cross-circ` \| Summary \| `crossed-circle`, `summary` \|
370	\| Tagged Document \| Tagged Document \| `tag-doc` \| Tagged document \| `tag-doc`, `tagged-document` \|
371	\| Tagged Process \| Tagged Rectangle \| `tag-rect` \| Tagged process \| `tag-proc`, `tagged-process`, `tagged-rectangle` \|
372	\| Terminal Point \| Stadium \| `stadium` \| Terminal point \| `pill`, `terminal` \|
373	\| Text Block \| Text Block \| `text` \| Text block \| \|
374
375	### Example Flowchart with New Shapes
376
377	Here’s an example flowchart that utilizes some of the newly introduced shapes:
378
379	```mermaid-example
380	flowchart RL
381	A@{ shape: manual-file, label: "File Handling"}
382	B@{ shape: manual-input, label: "User Input"}
383	C@{ shape: docs, label: "Multiple Documents"}
384	D@{ shape: procs, label: "Process Automation"}
385	E@{ shape: paper-tape, label: "Paper Records"}
386	```
387
388	```mermaid
389	flowchart RL
390	A@{ shape: manual-file, label: "File Handling"}
391	B@{ shape: manual-input, label: "User Input"}
392	C@{ shape: docs, label: "Multiple Documents"}
393	D@{ shape: procs, label: "Process Automation"}
394	E@{ shape: paper-tape, label: "Paper Records"}
395	```
396
397	### Process
398
399	```mermaid-example
400	flowchart TD
401	A@{ shape: rect, label: "This is a process" }
402	```
403
404	```mermaid
405	flowchart TD
406	A@{ shape: rect, label: "This is a process" }
407	```
408
409	### Event
410
411	```mermaid-example
412	flowchart TD
413	A@{ shape: rounded, label: "This is an event" }
414	```
415
416	```mermaid
417	flowchart TD
418	A@{ shape: rounded, label: "This is an event" }
419	```
420
421	### Terminal Point (Stadium)
422
423	```mermaid-example
424	flowchart TD
425	A@{ shape: stadium, label: "Terminal point" }
426	```
427
428	```mermaid
429	flowchart TD
430	A@{ shape: stadium, label: "Terminal point" }
431	```
432
433	### Subprocess
434
435	```mermaid-example
436	flowchart TD
437	A@{ shape: subproc, label: "This is a subprocess" }
438	```
439
440	```mermaid
441	flowchart TD
442	A@{ shape: subproc, label: "This is a subprocess" }
443	```
444
445	### Database (Cylinder)
446
447	```mermaid-example
448	flowchart TD
449	A@{ shape: cyl, label: "Database" }
450	```
451
452	```mermaid
453	flowchart TD
454	A@{ shape: cyl, label: "Database" }
455	```
456
457	### Start (Circle)
458
459	```mermaid-example
460	flowchart TD
461	A@{ shape: circle, label: "Start" }
462	```
463
464	```mermaid
465	flowchart TD
466	A@{ shape: circle, label: "Start" }
467	```
468
469	### Odd
470
471	```mermaid-example
472	flowchart TD
473	A@{ shape: odd, label: "Odd shape" }
474	```
475
476	```mermaid
477	flowchart TD
478	A@{ shape: odd, label: "Odd shape" }
479	```
480
481	### Decision (Diamond)
482
483	```mermaid-example
484	flowchart TD
485	A@{ shape: diamond, label: "Decision" }
486	```
487
488	```mermaid
489	flowchart TD
490	A@{ shape: diamond, label: "Decision" }
491	```
492
493	### Prepare Conditional (Hexagon)
494
495	```mermaid-example
496	flowchart TD
497	A@{ shape: hex, label: "Prepare conditional" }
498	```
499
500	```mermaid
501	flowchart TD
502	A@{ shape: hex, label: "Prepare conditional" }
503	```
504
505	### Data Input/Output (Lean Right)
506
507	```mermaid-example
508	flowchart TD
509	A@{ shape: lean-r, label: "Input/Output" }
510	```
511
512	```mermaid
513	flowchart TD
514	A@{ shape: lean-r, label: "Input/Output" }
515	```
516
517	### Data Input/Output (Lean Left)
518
519	```mermaid-example
520	flowchart TD
521	A@{ shape: lean-l, label: "Output/Input" }
522	```
523
524	```mermaid
525	flowchart TD
526	A@{ shape: lean-l, label: "Output/Input" }
527	```
528
529	### Priority Action (Trapezoid Base Bottom)
530
531	```mermaid-example
532	flowchart TD
533	A@{ shape: trap-b, label: "Priority action" }
534	```
535
536	```mermaid
537	flowchart TD
538	A@{ shape: trap-b, label: "Priority action" }
539	```
540
541	### Manual Operation (Trapezoid Base Top)
542
543	```mermaid-example
544	flowchart TD
545	A@{ shape: trap-t, label: "Manual operation" }
546	```
547
548	```mermaid
549	flowchart TD
550	A@{ shape: trap-t, label: "Manual operation" }
551	```
552
553	### Stop (Double Circle)
554
555	```mermaid-example
556	flowchart TD
557	A@{ shape: dbl-circ, label: "Stop" }
558	```
559
560	```mermaid
561	flowchart TD
562	A@{ shape: dbl-circ, label: "Stop" }
563	```
564
565	### Text Block
566
567	```mermaid-example
568	flowchart TD
569	A@{ shape: text, label: "This is a text block" }
570	```
571
572	```mermaid
573	flowchart TD
574	A@{ shape: text, label: "This is a text block" }
575	```
576
577	### Card (Notched Rectangle)
578
579	```mermaid-example
580	flowchart TD
581	A@{ shape: notch-rect, label: "Card" }
582	```
583
584	```mermaid
585	flowchart TD
586	A@{ shape: notch-rect, label: "Card" }
587	```
588
589	### Lined/Shaded Process
590
591	```mermaid-example
592	flowchart TD
593	A@{ shape: lin-rect, label: "Lined process" }
594	```
595
596	```mermaid
597	flowchart TD
598	A@{ shape: lin-rect, label: "Lined process" }
599	```
600
601	### Start (Small Circle)
602
603	```mermaid-example
604	flowchart TD
605	A@{ shape: sm-circ, label: "Small start" }
606	```
607
608	```mermaid
609	flowchart TD
610	A@{ shape: sm-circ, label: "Small start" }
611	```
612
613	### Stop (Framed Circle)
614
615	```mermaid-example
616	flowchart TD
617	A@{ shape: framed-circle, label: "Stop" }
618	```
619
620	```mermaid
621	flowchart TD
622	A@{ shape: framed-circle, label: "Stop" }
623	```
624
625	### Fork/Join (Long Rectangle)
626
627	```mermaid-example
628	flowchart TD
629	A@{ shape: fork, label: "Fork or Join" }
630	```
631
632	```mermaid
633	flowchart TD
634	A@{ shape: fork, label: "Fork or Join" }
635	```
636
637	### Collate (Hourglass)
638
639	```mermaid-example
640	flowchart TD
641	A@{ shape: hourglass, label: "Collate" }
642	```
643
644	```mermaid
645	flowchart TD
646	A@{ shape: hourglass, label: "Collate" }
647	```
648
649	### Comment (Curly Brace)
650
651	```mermaid-example
652	flowchart TD
653	A@{ shape: comment, label: "Comment" }
654	```
655
656	```mermaid
657	flowchart TD
658	A@{ shape: comment, label: "Comment" }
659	```
660
661	### Comment Right (Curly Brace Right)
662
663	```mermaid-example
664	flowchart TD
665	A@{ shape: brace-r, label: "Comment" }
666	```
667
668	```mermaid
669	flowchart TD
670	A@{ shape: brace-r, label: "Comment" }
671	```
672
673	### Comment with braces on both sides
674
675	```mermaid-example
676	flowchart TD
677	A@{ shape: braces, label: "Comment" }
678	```
679
680	```mermaid
681	flowchart TD
682	A@{ shape: braces, label: "Comment" }
683	```
684
685	### Com Link (Lightning Bolt)
686
687	```mermaid-example
688	flowchart TD
689	A@{ shape: bolt, label: "Communication link" }
690	```
691
692	```mermaid
693	flowchart TD
694	A@{ shape: bolt, label: "Communication link" }
695	```
696
697	### Document
698
699	```mermaid-example
700	flowchart TD
701	A@{ shape: doc, label: "Document" }
702	```
703
704	```mermaid
705	flowchart TD
706	A@{ shape: doc, label: "Document" }
707	```
708
709	### Delay (Half-Rounded Rectangle)
710
711	```mermaid-example
712	flowchart TD
713	A@{ shape: delay, label: "Delay" }
714	```
715
716	```mermaid
717	flowchart TD
718	A@{ shape: delay, label: "Delay" }
719	```
720
721	### Direct Access Storage (Horizontal Cylinder)
722
723	```mermaid-example
724	flowchart TD
725	A@{ shape: das, label: "Direct access storage" }
726	```
727
728	```mermaid
729	flowchart TD
730	A@{ shape: das, label: "Direct access storage" }
731	```
732
733	### Disk Storage (Lined Cylinder)
734
735	```mermaid-example
736	flowchart TD
737	A@{ shape: lin-cyl, label: "Disk storage" }
738	```
739
740	```mermaid
741	flowchart TD
742	A@{ shape: lin-cyl, label: "Disk storage" }
743	```
744
745	### Display (Curved Trapezoid)
746
747	```mermaid-example
748	flowchart TD
749	A@{ shape: curv-trap, label: "Display" }
750	```
751
752	```mermaid
753	flowchart TD
754	A@{ shape: curv-trap, label: "Display" }
755	```
756
757	### Divided Process (Divided Rectangle)
758
759	```mermaid-example
760	flowchart TD
761	A@{ shape: div-rect, label: "Divided process" }
762	```
763
764	```mermaid
765	flowchart TD
766	A@{ shape: div-rect, label: "Divided process" }
767	```
768
769	### Extract (Small Triangle)
770
771	```mermaid-example
772	flowchart TD
773	A@{ shape: tri, label: "Extract" }
774	```
775
776	```mermaid
777	flowchart TD
778	A@{ shape: tri, label: "Extract" }
779	```
780
781	### Internal Storage (Window Pane)
782
783	```mermaid-example
784	flowchart TD
785	A@{ shape: win-pane, label: "Internal storage" }
786	```
787
788	```mermaid
789	flowchart TD
790	A@{ shape: win-pane, label: "Internal storage" }
791	```
792
793	### Junction (Filled Circle)
794
795	```mermaid-example
796	flowchart TD
797	A@{ shape: f-circ, label: "Junction" }
798	```
799
800	```mermaid
801	flowchart TD
802	A@{ shape: f-circ, label: "Junction" }
803	```
804
805	### Lined Document
806
807	```mermaid-example
808	flowchart TD
809	A@{ shape: lin-doc, label: "Lined document" }
810	```
811
812	```mermaid
813	flowchart TD
814	A@{ shape: lin-doc, label: "Lined document" }
815	```
816
817	### Loop Limit (Notched Pentagon)
818
819	```mermaid-example
820	flowchart TD
821	A@{ shape: notch-pent, label: "Loop limit" }
822	```
823
824	```mermaid
825	flowchart TD
826	A@{ shape: notch-pent, label: "Loop limit" }
827	```
828
829	### Manual File (Flipped Triangle)
830
831	```mermaid-example
832	flowchart TD
833	A@{ shape: flip-tri, label: "Manual file" }
834	```
835
836	```mermaid
837	flowchart TD
838	A@{ shape: flip-tri, label: "Manual file" }
839	```
840
841	### Manual Input (Sloped Rectangle)
842
843	```mermaid-example
844	flowchart TD
845	A@{ shape: sl-rect, label: "Manual input" }
846	```
847
848	```mermaid
849	flowchart TD
850	A@{ shape: sl-rect, label: "Manual input" }
851	```
852
853	### Multi-Document (Stacked Document)
854
855	```mermaid-example
856	flowchart TD
857	A@{ shape: docs, label: "Multiple documents" }
858	```
859
860	```mermaid
861	flowchart TD
862	A@{ shape: docs, label: "Multiple documents" }
863	```
864
865	### Multi-Process (Stacked Rectangle)
866
867	```mermaid-example
868	flowchart TD
869	A@{ shape: processes, label: "Multiple processes" }
870	```
871
872	```mermaid
873	flowchart TD
874	A@{ shape: processes, label: "Multiple processes" }
875	```
876
877	### Paper Tape (Flag)
878
879	```mermaid-example
880	flowchart TD
881	A@{ shape: flag, label: "Paper tape" }
882	```
883
884	```mermaid
885	flowchart TD
886	A@{ shape: flag, label: "Paper tape" }
887	```
888
889	### Stored Data (Bow Tie Rectangle)
890
891	```mermaid-example
892	flowchart TD
893	A@{ shape: bow-rect, label: "Stored data" }
894	```
895
896	```mermaid
897	flowchart TD
898	A@{ shape: bow-rect, label: "Stored data" }
899	```
900
901	### Summary (Crossed Circle)
902
903	```mermaid-example
904	flowchart TD
905	A@{ shape: cross-circ, label: "Summary" }
906	```
907
908	```mermaid
909	flowchart TD
910	A@{ shape: cross-circ, label: "Summary" }
911	```
912
913	### Tagged Document
914
915	```mermaid-example
916	flowchart TD
917	A@{ shape: tag-doc, label: "Tagged document" }
918	```
919
920	```mermaid
921	flowchart TD
922	A@{ shape: tag-doc, label: "Tagged document" }
923	```
924
925	### Tagged Process (Tagged Rectangle)
926
927	```mermaid-example
928	flowchart TD
929	A@{ shape: tag-rect, label: "Tagged process" }
930	```
931
932	```mermaid
933	flowchart TD
934	A@{ shape: tag-rect, label: "Tagged process" }
935	```
936
937	## Special shapes in Mermaid Flowcharts (v11.3.0+)
938
939	Mermaid also introduces 2 special shapes to enhance your flowcharts: icon and image. These shapes allow you to include icons and images directly within your flowcharts, providing more visual context and clarity.
940
941	### Icon Shape
942
943	You can use the `icon` shape to include an icon in your flowchart. To use icons, you need to register the icon pack first. Follow the instructions to [add custom icons](../config/icons.md). The syntax for defining an icon shape is as follows:
944
945	```mermaid-example
946	flowchart TD
947	A@{ icon: "fa:user", form: "square", label: "User Icon", pos: "t", h: 60 }
948	```
949
950	```mermaid
951	flowchart TD
952	A@{ icon: "fa:user", form: "square", label: "User Icon", pos: "t", h: 60 }
953	```
954
955	#### Parameters
956
957	- icon: The name of the icon from the registered icon pack.
958	- form: Specifies the background shape of the icon. If not defined there will be no background to icon. Options include:
959	- `square`
960	- `circle`
961	- `rounded`
962	- label: The text label associated with the icon. This can be any string. If not defined, no label will be displayed.
963	- pos: The position of the label. If not defined label will default to bottom of icon. Possible values are:
964	- `t`
965	- `b`
966	- h: The height of the icon. If not defined this will default to 48 which is minimum.
967
968	### Image Shape
969
970	You can use the `image` shape to include an image in your flowchart. The syntax for defining an image shape is as follows:
971
972	```
973	flowchart TD
974	A@{ img: "https://example.com/image.png", label: "Image Label", pos: "t", w: 60, h: 60, constraint: "off" }
975	```
976
977	#### Parameters
978
979	- img: The URL of the image to be displayed.
980	- label: The text label associated with the image. This can be any string. If not defined, no label will be displayed.
981	- pos: The position of the label. If not defined, the label will default to the bottom of the image. Possible values are:
982	- `t`
983	- `b`
984	- w: The width of the image. If not defined, this will default to the natural width of the image.
985	- h: The height of the image. If not defined, this will default to the natural height of the image.
986	- constraint: Determines if the image should constrain the node size. This setting also ensures the image maintains its original aspect ratio, adjusting the width (`w`) accordingly to the height (`h`). If not defined, this will default to `off` Possible values are:
987	- `on`
988	- `off`
989
990	If you want to resize an image, but keep the same aspect ratio, set `h`, and set `constraint: on` to constrain the aspect ratio. E.g.
991
992	```mermaid-example
993	flowchart TD
994	%% My image with a constrained aspect ratio
995	A@{ img: "https://mermaid.js.org/favicon.svg", label: "My example image label", pos: "t", h: 60, constraint: "on" }
996	```
997
998	```mermaid
999	flowchart TD
1000	%% My image with a constrained aspect ratio
1001	A@{ img: "https://mermaid.js.org/favicon.svg", label: "My example image label", pos: "t", h: 60, constraint: "on" }
1002	```
1003
1004	## Links between nodes
1005
1006	Nodes can be connected with links/edges. It is possible to have different types of links or attach a text string to a link.
1007
1008	### A link with arrow head
1009
1010	```mermaid-example
1011	flowchart LR
1012	A-->B
1013	```
1014
1015	```mermaid
1016	flowchart LR
1017	A-->B
1018	```
1019
1020	### An open link
1021
1022	```mermaid-example
1023	flowchart LR
1024	A --- B
1025	```
1026
1027	```mermaid
1028	flowchart LR
1029	A --- B
1030	```
1031
1032	### Text on links
1033
1034	```mermaid-example
1035	flowchart LR
1036	A-- This is the text! ---B
1037	```
1038
1039	```mermaid
1040	flowchart LR
1041	A-- This is the text! ---B
1042	```
1043
1044	or
1045
1046	```mermaid-example
1047	flowchart LR
1048	A---\|This is the text\|B
1049	```
1050
1051	```mermaid
1052	flowchart LR
1053	A---\|This is the text\|B
1054	```
1055
1056	### A link with arrow head and text
1057
1058	```mermaid-example
1059	flowchart LR
1060	A-->\|text\|B
1061	```
1062
1063	```mermaid
1064	flowchart LR
1065	A-->\|text\|B
1066	```
1067
1068	or
1069
1070	```mermaid-example
1071	flowchart LR
1072	A-- text -->B
1073	```
1074
1075	```mermaid
1076	flowchart LR
1077	A-- text -->B
1078	```
1079
1080	### Dotted link
1081
1082	```mermaid-example
1083	flowchart LR
1084	A-.->B;
1085	```
1086
1087	```mermaid
1088	flowchart LR
1089	A-.->B;
1090	```
1091
1092	### Dotted link with text
1093
1094	```mermaid-example
1095	flowchart LR
1096	A-. text .-> B
1097	```
1098
1099	```mermaid
1100	flowchart LR
1101	A-. text .-> B
1102	```
1103
1104	### Thick link
1105
1106	```mermaid-example
1107	flowchart LR
1108	A ==> B
1109	```
1110
1111	```mermaid
1112	flowchart LR
1113	A ==> B
1114	```
1115
1116	### Thick link with text
1117
1118	```mermaid-example
1119	flowchart LR
1120	A == text ==> B
1121	```
1122
1123	```mermaid
1124	flowchart LR
1125	A == text ==> B
1126	```
1127
1128	### An invisible link
1129
1130	This can be a useful tool in some instances where you want to alter the default positioning of a node.
1131
1132	```mermaid-example
1133	flowchart LR
1134	A ~~~ B
1135	```
1136
1137	```mermaid
1138	flowchart LR
1139	A ~~~ B
1140	```
1141
1142	### Chaining of links
1143
1144	It is possible declare many links in the same line as per below:
1145
1146	```mermaid-example
1147	flowchart LR
1148	A -- text --> B -- text2 --> C
1149	```
1150
1151	```mermaid
1152	flowchart LR
1153	A -- text --> B -- text2 --> C
1154	```
1155
1156	It is also possible to declare multiple nodes links in the same line as per below:
1157
1158	```mermaid-example
1159	flowchart LR
1160	a --> b & c--> d
1161	```
1162
1163	```mermaid
1164	flowchart LR
1165	a --> b & c--> d
1166	```
1167
1168	You can then describe dependencies in a very expressive way. Like the one-liner below:
1169
1170	```mermaid-example
1171	flowchart TB
1172	A & B--> C & D
1173	```
1174
1175	```mermaid
1176	flowchart TB
1177	A & B--> C & D
1178	```
1179
1180	If you describe the same diagram using the basic syntax, it will take four lines. A
1181	word of warning, one could go overboard with this making the flowchart harder to read in
1182	markdown form. The Swedish word `lagom` comes to mind. It means, not too much and not too little.
1183	This goes for expressive syntaxes as well.
1184
1185	```mermaid-example
1186	flowchart TB
1187	A --> C
1188	A --> D
1189	B --> C
1190	B --> D
1191	```
1192
1193	```mermaid
1194	flowchart TB
1195	A --> C
1196	A --> D
1197	B --> C
1198	B --> D
1199	```
1200
1201	### Attaching an ID to Edges
1202
1203	Mermaid now supports assigning IDs to edges, similar to how IDs and metadata can be attached to nodes. This feature lays the groundwork for more advanced styling, classes, and animation capabilities on edges.
1204
1205	Syntax:
1206
1207	To give an edge an ID, prepend the edge syntax with the ID followed by an `@` character. For example:
1208
1209	```mermaid-example
1210	flowchart LR
1211	A e1@--> B
1212	```
1213
1214	```mermaid
1215	flowchart LR
1216	A e1@--> B
1217	```
1218
1219	In this example, `e1` is the ID of the edge connecting `A` to `B`. You can then use this ID in later definitions or style statements, just like with nodes.
1220
1221	### Turning an Animation On
1222
1223	Once you have assigned an ID to an edge, you can turn on animations for that edge by defining the edge’s properties:
1224
1225	```mermaid-example
1226	flowchart LR
1227	A e1@==> B
1228	e1@{ animate: true }
1229	```
1230
1231	```mermaid
1232	flowchart LR
1233	A e1@==> B
1234	e1@{ animate: true }
1235	```
1236
1237	This tells Mermaid that the edge `e1` should be animated.
1238
1239	### Selecting Type of Animation
1240
1241	In the initial version, two animation speeds are supported: `fast` and `slow`. Selecting a specific animation type is a shorthand for enabling animation and setting the animation speed in one go.
1242
1243	Examples:
1244
1245	```mermaid-example
1246	flowchart LR
1247	A e1@--> B
1248	e1@{ animation: fast }
1249	```
1250
1251	```mermaid
1252	flowchart LR
1253	A e1@--> B
1254	e1@{ animation: fast }
1255	```
1256
1257	This is equivalent to `{ animate: true, animation: fast }`.
1258
1259	### Using classDef Statements for Animations
1260
1261	You can also animate edges by assigning a class to them and then defining animation properties in a `classDef` statement. For example:
1262
1263	```mermaid-example
1264	flowchart LR
1265	A e1@--> B
1266	classDef animate stroke-dasharray: 9,5,stroke-dashoffset: 900,animation: dash 25s linear infinite;
1267	class e1 animate
1268	```
1269
1270	```mermaid
1271	flowchart LR
1272	A e1@--> B
1273	classDef animate stroke-dasharray: 9,5,stroke-dashoffset: 900,animation: dash 25s linear infinite;
1274	class e1 animate
1275	```
1276
1277	In this snippet:
1278
1279	- `e1@-->` creates an edge with ID `e1`.
1280	- `classDef animate` defines a class named `animate` with styling and animation properties.
1281	- `class e1 animate` applies the `animate` class to the edge `e1`.
1282
1283	Note on Escaping Commas:
1284	When setting the `stroke-dasharray` property, remember to escape commas as `\,` since commas are used as delimiters in Mermaid’s style definitions.
1285
1286	## New arrow types
1287
1288	There are new types of arrows supported:
1289
1290	- circle edge
1291	- cross edge
1292
1293	### Circle edge example
1294
1295	```mermaid-example
1296	flowchart LR
1297	A --o B
1298	```
1299
1300	```mermaid
1301	flowchart LR
1302	A --o B
1303	```
1304
1305	### Cross edge example
1306
1307	```mermaid-example
1308	flowchart LR
1309	A --x B
1310	```
1311
1312	```mermaid
1313	flowchart LR
1314	A --x B
1315	```
1316
1317	## Multi directional arrows
1318
1319	There is the possibility to use multidirectional arrows.
1320
1321	```mermaid-example
1322	flowchart LR
1323	A o--o B
1324	B <--> C
1325	C x--x D
1326	```
1327
1328	```mermaid
1329	flowchart LR
1330	A o--o B
1331	B <--> C
1332	C x--x D
1333	```
1334
1335	### Minimum length of a link
1336
1337	Each node in the flowchart is ultimately assigned to a rank in the rendered
1338	graph, i.e. to a vertical or horizontal level (depending on the flowchart
1339	orientation), based on the nodes to which it is linked. By default, links
1340	can span any number of ranks, but you can ask for any link to be longer
1341	than the others by adding extra dashes in the link definition.
1342
1343	In the following example, two extra dashes are added in the link from node _B_
1344	to node _E_, so that it spans two more ranks than regular links:
1345
1346	```mermaid-example
1347	flowchart TD
1348	A[Start] --> B{Is it?}
1349	B -->\|Yes\| C[OK]
1350	C --> D[Rethink]
1351	D --> B
1352	B ---->\|No\| E[End]
1353	```
1354
1355	```mermaid
1356	flowchart TD
1357	A[Start] --> B{Is it?}
1358	B -->\|Yes\| C[OK]
1359	C --> D[Rethink]
1360	D --> B
1361	B ---->\|No\| E[End]
1362	```
1363
1364	> Note Links may still be made longer than the requested number of ranks
1365	> by the rendering engine to accommodate other requests.
1366
1367	When the link label is written in the middle of the link, the extra dashes must
1368	be added on the right side of the link. The following example is equivalent to
1369	the previous one:
1370
1371	```mermaid-example
1372	flowchart TD
1373	A[Start] --> B{Is it?}
1374	B -- Yes --> C[OK]
1375	C --> D[Rethink]
1376	D --> B
1377	B -- No ----> E[End]
1378	```
1379
1380	```mermaid
1381	flowchart TD
1382	A[Start] --> B{Is it?}
1383	B -- Yes --> C[OK]
1384	C --> D[Rethink]
1385	D --> B
1386	B -- No ----> E[End]
1387	```
1388
1389	For dotted or thick links, the characters to add are equals signs or dots,
1390	as summed up in the following table:
1391
1392	\| Length \| 1 \| 2 \| 3 \|
1393	\| ----------------- \| :----: \| :-----: \| :------: \|
1394	\| Normal \| `---` \| `----` \| `-----` \|
1395	\| Normal with arrow \| `-->` \| `--->` \| `---->` \|
1396	\| Thick \| `===` \| `====` \| `=====` \|
1397	\| Thick with arrow \| `==>` \| `===>` \| `====>` \|
1398	\| Dotted \| `-.-` \| `-..-` \| `-...-` \|
1399	\| Dotted with arrow \| `-.->` \| `-..->` \| `-...->` \|
1400
1401	## Special characters that break syntax
1402
1403	It is possible to put text within quotes in order to render more troublesome characters. As in the example below:
1404
1405	```mermaid-example
1406	flowchart LR
1407	id1["This is the (text) in the box"]
1408	```
1409
1410	```mermaid
1411	flowchart LR
1412	id1["This is the (text) in the box"]
1413	```
1414
1415	### Entity codes to escape characters
1416
1417	It is possible to escape characters using the syntax exemplified here.
1418
1419	```mermaid-example
1420	flowchart LR
1421	A["A double quote:#quot;"] --> B["A dec char:#9829;"]
1422	```
1423
1424	```mermaid
1425	flowchart LR
1426	A["A double quote:#quot;"] --> B["A dec char:#9829;"]
1427	```
1428
1429	Numbers given are base 10, so `#` can be encoded as `#35;`. It is also supported to use HTML character names.
1430
1431	## Subgraphs
1432
1433	```
1434	subgraph title
1435	graph definition
1436	end
1437	```
1438
1439	An example below:
1440
1441	```mermaid-example
1442	flowchart TB
1443	c1-->a2
1444	subgraph one
1445	a1-->a2
1446	end
1447	subgraph two
1448	b1-->b2
1449	end
1450	subgraph three
1451	c1-->c2
1452	end
1453	```
1454
1455	```mermaid
1456	flowchart TB
1457	c1-->a2
1458	subgraph one
1459	a1-->a2
1460	end
1461	subgraph two
1462	b1-->b2
1463	end
1464	subgraph three
1465	c1-->c2
1466	end
1467	```
1468
1469	You can also set an explicit id for the subgraph.
1470
1471	```mermaid-example
1472	flowchart TB
1473	c1-->a2
1474	subgraph ide1 [one]
1475	a1-->a2
1476	end
1477	```
1478
1479	```mermaid
1480	flowchart TB
1481	c1-->a2
1482	subgraph ide1 [one]
1483	a1-->a2
1484	end
1485	```
1486
1487	### flowcharts
1488
1489	With the graphtype flowchart it is also possible to set edges to and from subgraphs as in the flowchart below.
1490
1491	```mermaid-example
1492	flowchart TB
1493	c1-->a2
1494	subgraph one
1495	a1-->a2
1496	end
1497	subgraph two
1498	b1-->b2
1499	end
1500	subgraph three
1501	c1-->c2
1502	end
1503	one --> two
1504	three --> two
1505	two --> c2
1506	```
1507
1508	```mermaid
1509	flowchart TB
1510	c1-->a2
1511	subgraph one
1512	a1-->a2
1513	end
1514	subgraph two
1515	b1-->b2
1516	end
1517	subgraph three
1518	c1-->c2
1519	end
1520	one --> two
1521	three --> two
1522	two --> c2
1523	```
1524
1525	### Direction in subgraphs
1526
1527	With the graphtype flowcharts you can use the direction statement to set the direction which the subgraph will render like in this example.
1528
1529	```mermaid-example
1530	flowchart LR
1531	subgraph TOP
1532	direction TB
1533	subgraph B1
1534	direction RL
1535	i1 -->f1
1536	end
1537	subgraph B2
1538	direction BT
1539	i2 -->f2
1540	end
1541	end
1542	A --> TOP --> B
1543	B1 --> B2
1544	```
1545
1546	```mermaid
1547	flowchart LR
1548	subgraph TOP
1549	direction TB
1550	subgraph B1
1551	direction RL
1552	i1 -->f1
1553	end
1554	subgraph B2
1555	direction BT
1556	i2 -->f2
1557	end
1558	end
1559	A --> TOP --> B
1560	B1 --> B2
1561	```
1562
1563	#### Limitation
1564
1565	If any of a subgraph's nodes are linked to the outside, subgraph direction will be ignored. Instead the subgraph will inherit the direction of the parent graph:
1566
1567	```mermaid-example
1568	flowchart LR
1569	subgraph subgraph1
1570	direction TB
1571	top1[top] --> bottom1[bottom]
1572	end
1573	subgraph subgraph2
1574	direction TB
1575	top2[top] --> bottom2[bottom]
1576	end
1577	%% ^ These subgraphs are identical, except for the links to them:
1578
1579	%% Link to subgraph1: subgraph1 direction is maintained
1580	outside --> subgraph1
1581	%% Link within subgraph2:
1582	%% subgraph2 inherits the direction of the top-level graph (LR)
1583	outside ---> top2
1584	```
1585
1586	```mermaid
1587	flowchart LR
1588	subgraph subgraph1
1589	direction TB
1590	top1[top] --> bottom1[bottom]
1591	end
1592	subgraph subgraph2
1593	direction TB
1594	top2[top] --> bottom2[bottom]
1595	end
1596	%% ^ These subgraphs are identical, except for the links to them:
1597
1598	%% Link to subgraph1: subgraph1 direction is maintained
1599	outside --> subgraph1
1600	%% Link within subgraph2:
1601	%% subgraph2 inherits the direction of the top-level graph (LR)
1602	outside ---> top2
1603	```
1604
1605	## Markdown Strings
1606
1607	The "Markdown Strings" feature enhances flowcharts and mind maps by offering a more versatile string type, which supports text formatting options such as bold and italics, and automatically wraps text within labels.
1608
1609	```mermaid-example
1610	---
1611	config:
1612	htmlLabels: false
1613	---
1614	flowchart LR
1615	subgraph "One"
1616	a("`The cat
1617	in the hat`") -- "edge label" --> b{{"`The dog in the hog`"}}
1618	end
1619	subgraph "`Two`"
1620	c("`The cat
1621	in the hat`") -- "`Bold edge label`" --> d("The dog in the hog")
1622	end
1623	```
1624
1625	```mermaid
1626	---
1627	config:
1628	htmlLabels: false
1629	---
1630	flowchart LR
1631	subgraph "One"
1632	a("`The cat
1633	in the hat`") -- "edge label" --> b{{"`The dog in the hog`"}}
1634	end
1635	subgraph "`Two`"
1636	c("`The cat
1637	in the hat`") -- "`Bold edge label`" --> d("The dog in the hog")
1638	end
1639	```
1640
1641	Formatting:
1642
1643	- For bold text, use double asterisks (`**`) before and after the text.
1644	- For italics, use single asterisks (`*`) before and after the text.
1645	- With traditional strings, you needed to add `<br>` tags for text to wrap in nodes. However, markdown strings automatically wrap text when it becomes too long and allows you to start a new line by simply using a newline character instead of a `<br>` tag.
1646
1647	This feature is applicable to node labels, edge labels, and subgraph labels.
1648
1649	The auto wrapping can be disabled by using
1650
1651	```
1652	---
1653	config:
1654	markdownAutoWrap: false
1655	---
1656	graph LR
1657	```
1658
1659	## Interaction
1660
1661	It is possible to bind a click event to a node, the click can lead to either a javascript callback or to a link which will be opened in a new browser tab.
1662
1663	> Note
1664	> This functionality is disabled when using `securityLevel='strict'` and enabled when using `securityLevel='loose'`.
1665
1666	```
1667	click nodeId callback
1668	click nodeId call callback()
1669	```
1670
1671	- nodeId is the id of the node
1672	- callback is the name of a javascript function defined on the page displaying the graph, the function will be called with the nodeId as parameter.
1673
1674	Examples of tooltip usage below:
1675
1676	```html
1677	<script>
1678	window.callback = function () {
1679	alert('A callback was triggered');
1680	};
1681	</script>
1682	```
1683
1684	The tooltip text is surrounded in double quotes. The styles of the tooltip are set by the class `.mermaidTooltip`.
1685
1686	```mermaid-example
1687	flowchart LR
1688	A-->B
1689	B-->C
1690	C-->D
1691	click A callback "Tooltip for a callback"
1692	click B "https://www.github.com" "This is a tooltip for a link"
1693	click C call callback() "Tooltip for a callback"
1694	click D href "https://www.github.com" "This is a tooltip for a link"
1695	```
1696
1697	```mermaid
1698	flowchart LR
1699	A-->B
1700	B-->C
1701	C-->D
1702	click A callback "Tooltip for a callback"
1703	click B "https://www.github.com" "This is a tooltip for a link"
1704	click C call callback() "Tooltip for a callback"
1705	click D href "https://www.github.com" "This is a tooltip for a link"
1706	```
1707
1708	> Success The tooltip functionality and the ability to link to urls are available from version 0.5.2.
1709
1710	?> Due to limitations with how Docsify handles JavaScript callback functions, an alternate working demo for the above code can be viewed at [this jsfiddle](https://jsfiddle.net/yk4h7qou/2/).
1711
1712	Links are opened in the same browser tab/window by default. It is possible to change this by adding a link target to the click definition (`_self`, `_blank`, `_parent` and `_top` are supported):
1713
1714	```mermaid-example
1715	flowchart LR
1716	A-->B
1717	B-->C
1718	C-->D
1719	D-->E
1720	click A "https://www.github.com" _blank
1721	click B "https://www.github.com" "Open this in a new tab" _blank
1722	click C href "https://www.github.com" _blank
1723	click D href "https://www.github.com" "Open this in a new tab" _blank
1724	```
1725
1726	```mermaid
1727	flowchart LR
1728	A-->B
1729	B-->C
1730	C-->D
1731	D-->E
1732	click A "https://www.github.com" _blank
1733	click B "https://www.github.com" "Open this in a new tab" _blank
1734	click C href "https://www.github.com" _blank
1735	click D href "https://www.github.com" "Open this in a new tab" _blank
1736	```
1737
1738	Beginner's tip—a full example using interactive links in a html context:
1739
1740	```html
1741	<body>
1742	<pre class="mermaid">
1743	flowchart LR
1744	A-->B
1745	B-->C
1746	C-->D
1747	click A callback "Tooltip"
1748	click B "https://www.github.com" "This is a link"
1749	click C call callback() "Tooltip"
1750	click D href "https://www.github.com" "This is a link"
1751	</pre>
1752
1753	<script>
1754	window.callback = function () {
1755	alert('A callback was triggered');
1756	};
1757	const config = {
1758	startOnLoad: true,
1759	htmlLabels: true,
1760	flowchart: { useMaxWidth: true, curve: 'cardinal' },
1761	securityLevel: 'loose',
1762	};
1763	mermaid.initialize(config);
1764	</script>
1765	</body>
1766	```
1767
1768	### Comments
1769
1770	Comments can be entered within a flow diagram, which will be ignored by the parser. Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any flow syntax
1771
1772	```mermaid-example
1773	flowchart LR
1774	%% this is a comment A -- text --> B{node}
1775	A -- text --> B -- text2 --> C
1776	```
1777
1778	```mermaid
1779	flowchart LR
1780	%% this is a comment A -- text --> B{node}
1781	A -- text --> B -- text2 --> C
1782	```
1783
1784	## Styling and classes
1785
1786	### Styling links
1787
1788	It is possible to style links. For instance, you might want to style a link that is going backwards in the flow. As links
1789	have no ids in the same way as nodes, some other way of deciding what style the links should be attached to is required.
1790	Instead of ids, the order number of when the link was defined in the graph is used, or use default to apply to all links.
1791	In the example below the style defined in the linkStyle statement will belong to the fourth link in the graph:
1792
1793	```
1794	linkStyle 3 stroke:#ff3,stroke-width:4px,color:red;
1795	```
1796
1797	It is also possible to add style to multiple links in a single statement, by separating link numbers with commas:
1798
1799	```
1800	linkStyle 1,2,7 color:blue;
1801	```
1802
1803	### Styling line curves
1804
1805	It is possible to style the type of curve used for lines between items, if the default method does not meet your needs.
1806	Available curve styles include `basis`, `bumpX`, `bumpY`, `cardinal`, `catmullRom`, `linear`, `monotoneX`, `monotoneY`,
1807	`natural`, `step`, `stepAfter`, and `stepBefore`.
1808
1809	For a full list of available curves, including an explanation of custom curves, refer to
1810	the [Shapes](https://d3js.org/d3-shape/curve) documentation in the [d3-shape](https://github.com/d3/d3-shape/) project.
1811
1812	Line styling can be achieved in two ways:
1813
1814	1. Change the curve style of all the lines
1815	2. Change the curve style of a particular line
1816
1817	#### Diagram level curve style
1818
1819	In this example, a left-to-right graph uses the `stepBefore` curve style:
1820
1821	```
1822	---
1823	config:
1824	flowchart:
1825	curve: stepBefore
1826	---
1827	graph LR
1828	```
1829
1830	#### Edge level curve style using Edge IDs (v11.10.0+)
1831
1832	You can assign IDs to [edges](#attaching-an-id-to-edges). After assigning an ID you can modify the line style by modifying the edge's `curve` property using the following syntax:
1833
1834	```mermaid-example
1835	flowchart LR
1836	A e1@==> B
1837	A e2@--> C
1838	e1@{ curve: linear }
1839	e2@{ curve: natural }
1840	```
1841
1842	```mermaid
1843	flowchart LR
1844	A e1@==> B
1845	A e2@--> C
1846	e1@{ curve: linear }
1847	e2@{ curve: natural }
1848	```
1849
1850	```info
1851	Any edge curve style modified at the edge level overrides the diagram level style.
1852	```
1853
1854	```info
1855	If the same edge is modified multiple times the last modification will be rendered.
1856	```
1857
1858	### Styling a node
1859
1860	It is possible to apply specific styles such as a thicker border or a different background color to a node.
1861
1862	```mermaid-example
1863	flowchart LR
1864	id1(Start)-->id2(Stop)
1865	style id1 fill:#f9f,stroke:#333,stroke-width:4px
1866	style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
1867	```
1868
1869	```mermaid
1870	flowchart LR
1871	id1(Start)-->id2(Stop)
1872	style id1 fill:#f9f,stroke:#333,stroke-width:4px
1873	style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
1874	```
1875
1876	#### Classes
1877
1878	More convenient than defining the style every time is to define a class of styles and attach this class to the nodes that
1879	should have a different look.
1880
1881	A class definition looks like the example below:
1882
1883	```
1884	classDef className fill:#f9f,stroke:#333,stroke-width:4px;
1885	```
1886
1887	Also, it is possible to define style to multiple classes in one statement:
1888
1889	```
1890	classDef firstClassName,secondClassName font-size:12pt;
1891	```
1892
1893	Attachment of a class to a node is done as per below:
1894
1895	```
1896	class nodeId1 className;
1897	```
1898
1899	It is also possible to attach a class to a list of nodes in one statement:
1900
1901	```
1902	class nodeId1,nodeId2 className;
1903	```
1904
1905	A shorter form of adding a class is to attach the classname to the node using the `:::`operator as per below:
1906
1907	```mermaid-example
1908	flowchart LR
1909	A:::someclass --> B
1910	classDef someclass fill:#f96
1911	```
1912
1913	```mermaid
1914	flowchart LR
1915	A:::someclass --> B
1916	classDef someclass fill:#f96
1917	```
1918
1919	This form can be used when declaring multiple links between nodes:
1920
1921	```mermaid-example
1922	flowchart LR
1923	A:::foo & B:::bar --> C:::foobar
1924	classDef foo stroke:#f00
1925	classDef bar stroke:#0f0
1926	classDef foobar stroke:#00f
1927	```
1928
1929	```mermaid
1930	flowchart LR
1931	A:::foo & B:::bar --> C:::foobar
1932	classDef foo stroke:#f00
1933	classDef bar stroke:#0f0
1934	classDef foobar stroke:#00f
1935	```
1936
1937	### CSS classes
1938
1939	It is also possible to predefine classes in CSS styles that can be applied from the graph definition as in the example
1940	below:
1941
1942	Example style
1943
1944	```html
1945	<style>
1946	.cssClass > rect {
1947	fill: #ff0000;
1948	stroke: #ffff00;
1949	stroke-width: 4px;
1950	}
1951	</style>
1952	```
1953
1954	Example definition
1955
1956	```mermaid-example
1957	flowchart LR
1958	A-->B[AAA<span>BBB</span>]
1959	B-->D
1960	class A cssClass
1961	```
1962
1963	```mermaid
1964	flowchart LR
1965	A-->B[AAA<span>BBB</span>]
1966	B-->D
1967	class A cssClass
1968	```
1969
1970	### Default class
1971
1972	If a class is named default it will be assigned to all classes without specific class definitions.
1973
1974	```
1975	classDef default fill:#f9f,stroke:#333,stroke-width:4px;
1976	```
1977
1978	## Basic support for fontawesome
1979
1980	It is possible to add icons from fontawesome.
1981
1982	The icons are accessed via the syntax fa:#icon class name#.
1983
1984	```mermaid-example
1985	flowchart TD
1986	B["fa:fa-twitter for peace"]
1987	B-->C[fa:fa-ban forbidden]
1988	B-->D(fa:fa-spinner)
1989	B-->E(A fa:fa-camera-retro perhaps?)
1990	```
1991
1992	```mermaid
1993	flowchart TD
1994	B["fa:fa-twitter for peace"]
1995	B-->C[fa:fa-ban forbidden]
1996	B-->D(fa:fa-spinner)
1997	B-->E(A fa:fa-camera-retro perhaps?)
1998	```
1999
2000	There are two ways to display these FontAwesome icons:
2001
2002	### Register FontAwesome icon packs (v11.7.0+)
2003
2004	You can register your own FontAwesome icon pack following the ["Registering icon packs" instructions](../config/icons.md).
2005
2006	Supported prefixes: `fa`, `fab`, `fas`, `far`, `fal`, `fad`.
2007
2008	> Note
2009	> Note that it will fall back to FontAwesome CSS if FontAwesome packs are not registered.
2010
2011	### Register FontAwesome CSS
2012
2013	Mermaid supports Font Awesome if the CSS is included on the website.
2014	Mermaid does not have any restriction on the version of Font Awesome that can be used.
2015
2016	Please refer the [Official Font Awesome Documentation](https://fontawesome.com/start) on how to include it in your website.
2017
2018	Adding this snippet in the `<head>` would add support for Font Awesome v6.5.1
2019
2020	```html
2021	<link
2022	href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
2023	rel="stylesheet"
2024	/>
2025	```
2026
2027	### Custom icons
2028
2029	It is possible to use custom icons served from Font Awesome as long as the website imports the corresponding kit.
2030
2031	Note that this is currently a paid feature from Font Awesome.
2032
2033	For custom icons, you need to use the `fak` prefix.
2034
2035	Example
2036
2037	```
2038	flowchart TD
2039	B[fa:fa-twitter] %% standard icon
2040	B-->E(fak:fa-custom-icon-name) %% custom icon
2041	```
2042
2043	And trying to render it
2044
2045	```mermaid-example
2046	flowchart TD
2047	B["fa:fa-twitter for peace"]
2048	B-->C["fab:fa-truck-bold a custom icon"]
2049	```
2050
2051	```mermaid
2052	flowchart TD
2053	B["fa:fa-twitter for peace"]
2054	B-->C["fab:fa-truck-bold a custom icon"]
2055	```
2056
2057	## Graph declarations with spaces between vertices and link and without semicolon
2058
2059	- In graph declarations, the statements also can now end without a semicolon. After release 0.2.16, ending a graph statement with semicolon is just optional. So the below graph declaration is also valid along with the old declarations of the graph.
2060
2061	- A single space is allowed between vertices and the link. However there should not be any space between a vertex and its text and a link and its text. The old syntax of graph declaration will also work and hence this new feature is optional and is introduced to improve readability.
2062
2063	Below is the new declaration of the graph edges which is also valid along with the old declaration of the graph edges.
2064
2065	```mermaid-example
2066	flowchart LR
2067	A[Hard edge] -->\|Link text\| B(Round edge)
2068	B --> C{Decision}
2069	C -->\|One\| D[Result one]
2070	C -->\|Two\| E[Result two]
2071	```
2072
2073	```mermaid
2074	flowchart LR
2075	A[Hard edge] -->\|Link text\| B(Round edge)
2076	B --> C{Decision}
2077	C -->\|One\| D[Result one]
2078	C -->\|Two\| E[Result two]
2079	```
2080
2081	## Configuration
2082
2083	### Renderer
2084
2085	The layout of the diagram is done with the renderer. The default renderer is dagre.
2086
2087	Starting with Mermaid version 9.4, you can use an alternate renderer named elk. The elk renderer is better for larger and/or more complex diagrams.
2088
2089	The _elk_ renderer is an experimental feature.
2090	You can change the renderer to elk by adding this directive:
2091
2092	```
2093	config:
2094	flowchart:
2095	defaultRenderer: "elk"
2096	```
2097
2098	> Note
2099	> Note that the site needs to use mermaid version 9.4+ for this to work and have this featured enabled in the lazy-loading configuration.
2100
2101	### Width
2102
2103	It is possible to adjust the width of the rendered flowchart.
2104
2105	This is done by defining mermaid.flowchartConfig or by the CLI to use a JSON file with the configuration. How to use the CLI is described in the mermaidCLI page.
2106	mermaid.flowchartConfig can be set to a JSON string with config parameters or the corresponding object.
2107
2108	```javascript
2109	mermaid.flowchartConfig = {
2110	width: 100%
2111	}
2112	```
2113
2114	<!--- cspell:ignore lagom --->
2115