diff --git a/demos/flowchart.html b/demos/flowchart.html index 036ce272c..cea036bf4 100644 --- a/demos/flowchart.html +++ b/demos/flowchart.html @@ -1,24 +1,22 @@ - - - - - Mermaid Quick Flowchart Test Page - - - - - -

Comparison "graph vs. flowchart"

-

Sample 1

-

graph

- 
+  
+    
+    
+    Mermaid Quick Flowchart Test Page
+    
+    
+  
+  
+    
Comparison "graph vs. flowchart"

+    
Sample 1

+    
graph

+    
     ---
     title: This is a complicated flow
     ---
@@ -121,10 +119,10 @@
     sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
     sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4FC27B48-A6F9-460A-A675-021F5854FE22;
     

-  

+    

 
-  
flowchart

-  
+    
flowchart

+    
     flowchart LR
     sid-B3655226-6C29-4D00-B685-3D5C734DC7E1["
 
@@ -221,11 +219,11 @@
     sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
     sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4FC27B48-A6F9-460A-A675-021F5854FE22;
     

-  

+    

 
-  
Sample 2

-  
graph

-  
+    
Sample 2

+    
graph

+    
     ---
     title: What to buy
     ---
@@ -238,10 +236,10 @@
       C -->|Two| E[iPhone]
       C -->|Three| F[Car]
   

-  

+    

 
-  
flowchart

-  
+    
flowchart

+    
     flowchart TD
       accTitle: What to buy
       accDescr: Options of what to buy with Christmas money
@@ -251,11 +249,11 @@
       C -->|Two| E[iPhone]
       C -->|Three| F[Car]
   

-  

+    

 
-  
Sample 3

-  
graph

-  
+    
Sample 3

+    
graph

+    
     graph TD
     A[/Christmas\]
     A -->|Get money| B[\Go shopping/]
@@ -264,10 +262,10 @@
     C -->|Two| E[\iPhone\]
     C -->|Three| F[Car]
   

-  

+    

 
-  
flowchart

-  
+    
flowchart

+    
     flowchart TD
     A[/Christmas\]
     A -->|Get money| B[\Go shopping/]
@@ -276,11 +274,11 @@
     C -->|Two| E[\iPhone\]
     C -->|Three| F[Car]
   

-  

+    

 
-  
Sample 4

-  
graph

-  
+    
Sample 4

+    
graph

+    
     graph LR
     47(SAM.CommonFA.FMESummary)-->48(SAM.CommonFA.CommonFAFinanceBudget)
     37(SAM.CommonFA.BudgetSubserviceLineVolume)-->48(SAM.CommonFA.CommonFAFinanceBudget)
@@ -303,10 +301,10 @@
     35(SAM.CommonFA.PopulationFME)-->39(SAM.CommonFA.ChargeDetails)
     36(SAM.CommonFA.PremetricCost)-->39(SAM.CommonFA.ChargeDetails)
     

-  

+    

 
-  
flowchart

-  
+    
flowchart

+    
     flowchart LR
     47(SAM.CommonFA.FMESummary)-->48(SAM.CommonFA.CommonFAFinanceBudget)
     37(SAM.CommonFA.BudgetSubserviceLineVolume)-->48(SAM.CommonFA.CommonFAFinanceBudget)
@@ -329,11 +327,11 @@
     35(SAM.CommonFA.PopulationFME)-->39(SAM.CommonFA.ChargeDetails)
     36(SAM.CommonFA.PremetricCost)-->39(SAM.CommonFA.ChargeDetails)
     

-  

+    

 
-  
Sample 5

-  
graph

-  
+    
Sample 5

+    
graph

+    
     graph TD
     9e122290_1ec3_e711_8c5a_005056ad0002("fa:fa-creative-commons My System | Test Environment")
     82072290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Business Logic Server:Service 1")
@@ -398,10 +396,10 @@
     9a072290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
     9a072290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
     

-  

+    

 
-  
flowchart

-  
+    
flowchart

+    
     flowchart TD
     9e122290_1ec3_e711_8c5a_005056ad0002("fa:fa-creative-commons My System | Test Environment")
     82072290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Business Logic Server:Service 1")
@@ -466,30 +464,30 @@
     9a072290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
     9a072290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
     

-  

+    

 
-  
Sample 6

-  
graph

-  
+    
Sample 6

+    
graph

+    
     graph TB
     subgraph One
       a1-->a2
     end
     

-  

+    

 
-  
flowchart

-  
+    
flowchart

+    
     flowchart TB
     subgraph One
       a1-->a2
     end
     

-  

+    

 
-  
Sample 7

-  
graph

-  
+    
Sample 7

+    
graph

+    
     graph TB
     A
     B
@@ -518,10 +516,10 @@
     style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
     style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue
     

-  

+    

 
-  
flowchart

-  
+    
flowchart

+    
     flowchart TB
     A
     B
@@ -550,11 +548,11 @@
     style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
     style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue
     

-  

+    

 
-  
Sample 8

-  
graph

-  
+    
Sample 8

+    
graph

+    
     graph LR
     456ac9b0d15a8b7f1e71073221059886[1051 AAA fa:fa-check]
     f7f580e11d00a75814d2ded41fe8e8fe[1141 BBB fa:fa-check]
@@ -569,10 +567,10 @@
     3000"
     style 456ac9b0d15a8b7f1e71073221059886 fill:#f9f,stroke:#333,stroke-width:4px
     

-  

+    

 
-  
flowchart

-  
+    
flowchart

+    
     flowchart LR
     456ac9b0d15a8b7f1e71073221059886[1051 AAA fa:fa-check]
     f7f580e11d00a75814d2ded41fe8e8fe[1141 BBB fa:fa-check]
@@ -587,11 +585,11 @@
     3000"
     style 456ac9b0d15a8b7f1e71073221059886 fill:#f9f,stroke:#333,stroke-width:4px
     

-  

+    

 
-  
Sample 9

-  
graph

-  
+    
Sample 9

+    
graph

+    
     graph TD
     A[Christmas] -->|Get money| B(Go shopping)
     B --> C{{Let me think...
Do I want something for work,
something to spend every free second with,
or something to get around?}}
@@ -604,10 +602,10 @@
     class A someclass;
     class C someclass;
   

-  

+    

 
-  
flowchart

-  
+    
flowchart

+    
     flowchart TD
     A[Christmas] -->|Get money| B(Go shopping)
     B --> C{{Let me think...
Do I want something for work,
something to spend every free second with,
or something to get around?}}
@@ -620,11 +618,11 @@
     class A someclass;
     class C someclass;
   

-  

+    

 
-  
Sample 10

-  
graph

-  
+    
Sample 10

+    
graph

+    
     graph TD
     A([stadium shape test])
     A -->|Get money| B([Go shopping])
@@ -638,10 +636,10 @@
     class A someclass;
     class C someclass;
   

-  

+    

 
-  
flowchart

-  
+    
flowchart

+    
     flowchart TD
     A([stadium shape test])
     A -->|Get money| B([Go shopping])
@@ -655,11 +653,11 @@
     class A someclass;
     class C someclass;
   

-  

+    

 
-  
Sample 11

-  
graph

-  
+    
Sample 11

+    
graph

+    
     graph LR
     A[[subroutine shape test]]
     A -->|Get money| B[[Go shopping]]
@@ -673,10 +671,10 @@
     class A someclass;
     class C someclass;
   

-  

+    

 
-  
flowchart

-  
+    
flowchart

+    
     flowchart LR
     A[[subroutine shape test]]
     A -->|Get money| B[[Go shopping]]
@@ -690,11 +688,11 @@
     class A someclass;
     class C someclass;
   

-  

+    

 
-  
Sample 12

-  
graph

-  
+    
Sample 12

+    
graph

+    
     graph LR
     A[(cylindrical
shape
test)]
     A -->|Get money| B1[(Go shopping 1)]
@@ -712,10 +710,10 @@
     classDef someclass fill:#f96;
     class A someclass;
   

-  

+    

 
-  
flowchart

-  
+    
flowchart

+    
     flowchart LR
     A[(cylindrical
shape
test)]
     A -->|Get money| B1[(Go shopping 1)]
@@ -733,11 +731,11 @@
     classDef someclass fill:#f96;
     class A someclass;
   

-  

+    

 
-  
Sample 13

-  
graph

-  
+    
Sample 13

+    
graph

+    
     graph LR
     A1[Multi
Line] -->|Multi
Line| B1(Multi
Line)
     C1[Multi
Line] -->|Multi
Line| D1(Multi
Line)
@@ -749,10 +747,10 @@
     linkStyle 1 stroke:DarkGray,stroke-width:2px
     linkStyle 2 stroke:DarkGray,stroke-width:2px
   

-  

+    

 
-  
flowchart

-  
+    
flowchart

+    
     flowchart LR
     A1[Multi
Line] -->|Multi
Line| B1(Multi
Line)
     C1[Multi
Line] -->|Multi
Line| D1(Multi
Line)
@@ -764,11 +762,11 @@
     linkStyle 1 stroke:DarkGray,stroke-width:2px
     linkStyle 2 stroke:DarkGray,stroke-width:2px
   

-  

+    

 
-  
Sample 14

-  
graph

-  
+    
Sample 14

+    
graph

+    
     graph LR
     A(( )) -->|step 1| B(( ))
     B(( )) -->|step 2| C(( ))
@@ -776,10 +774,10 @@
     linkStyle 1 stroke:greenyellow,stroke-width:2px
     style C fill:greenyellow,stroke:green,stroke-width:4px
     

-  

+    

 
-  
flowchart

-  
+    
flowchart

+    
     flowchart LR
     A(( )) -->|step 1| B(( ))
     B(( )) -->|step 2| C(( ))
@@ -787,11 +785,11 @@
     linkStyle 1 stroke:greenyellow,stroke-width:2px
     style C fill:greenyellow,stroke:green,stroke-width:4px
     

-  

+    

 
-  
Sample 15

-  
graph

-  
+    
Sample 15

+    
graph

+    
     graph TB
     TITLE["Link Click Events
(click the nodes below)"]
     A["link test (open in same tab)"]
@@ -808,10 +806,10 @@
     click E "notes://do-your-thing/id" "other protocol test"
     click F "javascript:alert('test')" "script test"
   

-  

+    

 
-  
flowchart

-  
+    
flowchart

+    
     flowchart TB
     TITLE["Link Click Events
(click the nodes below)"]
     A["link test (open in same tab)"]
@@ -828,11 +826,11 @@
     click E "notes://do-your-thing/id" "other protocol test"
     click F "javascript:alert('test')" "script test"
   

-  

+    

 
-  
Sample 16

-  
graph

-  
+    
Sample 16

+    
graph

+    
     graph LR
     A[red
text] -->|red
text| B(blue
text)
     C[/red
text/] -->|blue
text| D{blue
text}
@@ -847,10 +845,10 @@
     click B "flowchart.html#link-clicked" "link test"
     click D testClick "click test"
   

-  

+    

 
-  
flowchart

-  
+    
flowchart

+    
     flowchart LR
     A[red
text] -->|red
text| B(blue
text)
     C[/red
text/] -->|blue
text| D{blue
text}
@@ -865,11 +863,11 @@
     click B "flowchart.html#link-clicked" "link test"
     click D testClick "click test"
   

-  

+    

 
-  
Sample 17

-  
graph

-  
+    
Sample 17

+    
graph

+    
     graph TD
     A[myClass1] --> B[default] & C[default]
     B[default] & C[default] --> D[myClass2]
@@ -880,10 +878,10 @@
     class A myClass1
     class D myClass2
     

-  

+    

 
-  
flowchart

-  
+    
flowchart

+    
     flowchart TD
     A[myClass1] --> B[default] & C[default]
     B[default] & C[default] --> D[myClass2]
@@ -894,11 +892,11 @@
     class A myClass1
     class D myClass2
     

-  

+    

 
-  
Sample 18

-  
graph

-  
+    
Sample 18

+    
graph

+    
     graph LR
     A1[red text] -->|default style| A2[blue text]
     B1(red text) -->|default style| B2(blue text)
@@ -944,10 +942,10 @@
     style M2 stroke:#0000ff,fill:#ccccff,color:#0000ff
     style N2 stroke:#0000ff,fill:#ccccff,color:#0000ff
     

-  

+    

 
-  
flowchart

-  
+    
flowchart

+    
     flowchart LR
     A1[red text] <-->|default style| A2[blue text]
     B1(red text) <-->|default style| B2(blue text)
@@ -993,11 +991,11 @@
     style M2 stroke:#0000ff,fill:#ccccff,color:#0000ff
     style N2 stroke:#0000ff,fill:#ccccff,color:#0000ff
     

-  

+    

 
-  
Sample 19

-  
graph

-  
+    
Sample 19

+    
graph

+    
     graph TB
     A1[red text] -->|default style| A2[blue text]
     B1(red text) -->|default style| B2(blue text)
@@ -1043,10 +1041,10 @@
     style M2 stroke:#0000ff,fill:#ccccff,color:#0000ff
     style N2 stroke:#0000ff,fill:#ccccff,color:#0000ff
     

-  

+    

 
-  
flowchart

-  
+    
flowchart

+    
     flowchart TB
     A1[red text] <-->|default style| A2[blue text]
     B1(red text) <-->|default style| B2(blue text)
@@ -1094,92 +1092,63 @@
     style M2 stroke:#0000ff,fill:#ccccff,color:#0000ff
     style N2 stroke:#0000ff,fill:#ccccff,color:#0000ff
     style O2 stroke:#0000ff,fill:#ccccff,color:#0000ff
-  

-
-  
Sample 20

-  
graph

-  
-    graph LR
-    A["$$f(\relax{x}) = \int_{-\infty}^\infty \hat{f}(\xi)\,e^{2 \pi i \xi x}\,d\xi$$"] -->|"$$\Bigg(\bigg(\Big(\big((\frac{-b\pm\sqrt{b^2-4ac}}{2a})\big)\Big)\bigg)\Bigg)$$"| B("$$1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}} {1+\frac{e^{-8\pi}} {1+\cdots}}}}$$")
-    A -->|"$$\overbrace{a+b+c}^{\text{note}}$$"| C("$$\phase{-78^\circ}$$")
-    B --> D("$$x = \begin{cases} a &\text{if } b \\ c &\text{if } d \end{cases}$$")
-    C --> E("$$x(t)=c_1\begin{bmatrix}-\cos{t}+\sin{t}\\ 2\cos{t} \end{bmatrix}e^{2t}$$")
-  

-  

-
-
-  
flowchart

-  
-    flowchart LR
-    A["$$f(\relax{x}) = \int_{-\infty}^\infty \hat{f}(\xi)\,e^{2 \pi i \xi x}\,d\xi$$"] -->|"$$\Bigg(\bigg(\Big(\big((\frac{-b\pm\sqrt{b^2-4ac}}{2a})\big)\Big)\bigg)\Bigg)$$"| B("$$1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}} {1+\frac{e^{-8\pi}} {1+\cdots}}}}$$")
-    A -->|"$$\overbrace{a+b+c}^{\text{note}}$$"| C("$$\phase{-78^\circ}$$")
-    B --> D("$$x = \begin{cases} a &\text{if } b \\ c &\text{if } d \end{cases}$$")
-    C --> E("$$x(t)=c_1\begin{bmatrix}-\cos{t}+\sin{t}\\ 2\cos{t} \end{bmatrix}e^{2t}$$")
-  

-  

-
-  
Sample 21

-  
graph

-  
-    graph LR
-    A["$$\alpha\beta\gamma\delta\epsilon\zeta\eta\theta\iota\kappa\lambda\mu\nu\xi\omicron\pi\rho\sigma\tau\upsilon\phi\chi\psi\omega$$"] --> B["$$\Alpha\Beta\Gamma\Delta\Epsilon\Zeta\Eta\Theta\Iota\Kappa\Lambda\Mu\Nu\Xi\Omicron\Pi\Rho\Sigma\Tau\Upsilon\Phi\Chi\Psi\Omega$$"]
-  

-  

-
-
-  
flowchart

-  
-    graph LR
-    A["$$\alpha\beta\gamma\delta\epsilon\zeta\eta\theta\iota\kappa\lambda\mu\nu\xi\omicron\pi\rho\sigma\tau\upsilon\phi\chi\psi\omega$$"] --> B["$$\Alpha\Beta\Gamma\Delta\Epsilon\Zeta\Eta\Theta\Iota\Kappa\Lambda\Mu\Nu\Xi\Omicron\Pi\Rho\Sigma\Tau\Upsilon\Phi\Chi\Psi\Omega$$"]
-  

-  

-
-  
Sample 22

-  
graph

-  
-    graph LR
-    A["$$\forall\complement\therefore\emptyset\exists\subset\because\empty\exist\supset\mapsto\varnothing\nexists\mid\to\implies\in\land\gets\impliedby\isin\lor\leftrightarrow\iff\notin\ni\notni\lnot$$"] --> B["$$\nabla\Im\Reals\jmath\partial\image\wp\aleph\Game\weierp\alef\Finv\N\Z\alefsym\cnums\natnums\beth\Complex\R\gimel\ell\Re\daleth\hbar\real\eth\hslash\reals$$"]
-  

-  

-
-
-  
flowchart

-  
-    graph LR
-    A["$$\forall\complement\therefore\emptyset\exists\subset\because\empty\exist\supset\mapsto\varnothing\nexists\mid\to\implies\in\land\gets\impliedby\isin\lor\leftrightarrow\iff\notin\ni\notni\lnot$$"] --> B["$$\nabla\Im\Reals\jmath\partial\image\wp\aleph\Game\weierp\alef\Finv\N\Z\alefsym\cnums\natnums\beth\Complex\R\gimel\ell\Re\daleth\hbar\real\eth\hslash\reals$$"]
-  

-  

-
-
-
-  
Anchor for "link-clicked" test

-
-  
-  
-  
-
     

-  

+    

 
-  

+    
Sample 20

+    
graph

+    
+      graph LR
+      A["$$f(\relax{x}) = \int_{-\infty}^\infty \hat{f}(\xi)\,e^{2 \pi i \xi x}\,d\xi$$"] -->|"$$\Bigg(\bigg(\Big(\big((\frac{-b\pm\sqrt{b^2-4ac}}{2a})\big)\Big)\bigg)\Bigg)$$"| B("$$1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}} {1+\frac{e^{-8\pi}} {1+\cdots}}}}$$")
+      A -->|"$$\overbrace{a+b+c}^{\text{note}}$$"| C("$$\phase{-78^\circ}$$")
+      B --> D("$$x = \begin{cases} a &\text{if } b \\ c &\text{if } d \end{cases}$$")
+      C --> E("$$x(t)=c_1\begin{bmatrix}-\cos{t}+\sin{t}\\ 2\cos{t} \end{bmatrix}e^{2t}$$")
+    

+    

 
-  
+    
flowchart

+    
+      flowchart LR
+      A["$$f(\relax{x}) = \int_{-\infty}^\infty \hat{f}(\xi)\,e^{2 \pi i \xi x}\,d\xi$$"] -->|"$$\Bigg(\bigg(\Big(\big((\frac{-b\pm\sqrt{b^2-4ac}}{2a})\big)\Big)\bigg)\Bigg)$$"| B("$$1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}} {1+\frac{e^{-8\pi}} {1+\cdots}}}}$$")
+      A -->|"$$\overbrace{a+b+c}^{\text{note}}$$"| C("$$\phase{-78^\circ}$$")
+      B --> D("$$x = \begin{cases} a &\text{if } b \\ c &\text{if } d \end{cases}$$")
+      C --> E("$$x(t)=c_1\begin{bmatrix}-\cos{t}+\sin{t}\\ 2\cos{t} \end{bmatrix}e^{2t}$$")
+    

+    

+
+    
Sample 21

+    
graph

+    
+      graph LR
+      A["$$\alpha\beta\gamma\delta\epsilon\zeta\eta\theta\iota\kappa\lambda\mu\nu\xi\omicron\pi\rho\sigma\tau\upsilon\phi\chi\psi\omega$$"] --> B["$$\Alpha\Beta\Gamma\Delta\Epsilon\Zeta\Eta\Theta\Iota\Kappa\Lambda\Mu\Nu\Xi\Omicron\Pi\Rho\Sigma\Tau\Upsilon\Phi\Chi\Psi\Omega$$"]
+    

+    

+
+    
flowchart

+    
+      graph LR
+      A["$$\alpha\beta\gamma\delta\epsilon\zeta\eta\theta\iota\kappa\lambda\mu\nu\xi\omicron\pi\rho\sigma\tau\upsilon\phi\chi\psi\omega$$"] --> B["$$\Alpha\Beta\Gamma\Delta\Epsilon\Zeta\Eta\Theta\Iota\Kappa\Lambda\Mu\Nu\Xi\Omicron\Pi\Rho\Sigma\Tau\Upsilon\Phi\Chi\Psi\Omega$$"]
+    

+    

+
+    
Sample 22

+    
graph

+    
+      graph LR
+      A["$$\forall\complement\therefore\emptyset\exists\subset\because\empty\exist\supset\mapsto\varnothing\nexists\mid\to\implies\in\land\gets\impliedby\isin\lor\leftrightarrow\iff\notin\ni\notni\lnot$$"] --> B["$$\nabla\Im\Reals\jmath\partial\image\wp\aleph\Game\weierp\alef\Finv\N\Z\alefsym\cnums\natnums\beth\Complex\R\gimel\ell\Re\daleth\hbar\real\eth\hslash\reals$$"]
+    

+    

+
+    
flowchart

+    
+      graph LR
+      A["$$\forall\complement\therefore\emptyset\exists\subset\because\empty\exist\supset\mapsto\varnothing\nexists\mid\to\implies\in\land\gets\impliedby\isin\lor\leftrightarrow\iff\notin\ni\notni\lnot$$"] --> B["$$\nabla\Im\Reals\jmath\partial\image\wp\aleph\Game\weierp\alef\Finv\N\Z\alefsym\cnums\natnums\beth\Complex\R\gimel\ell\Re\daleth\hbar\real\eth\hslash\reals$$"]
+    

+    

+
+    

+
+    
     graph LR
     sid-B3655226-6C29-4D00-B685-3D5C734DC7E1["
 
@@ -1276,9 +1245,9 @@
     sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
     sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4FC27B48-A6F9-460A-A675-021F5854FE22;
     

-  

+    

 
-  
+    
     graph TD
     A[Christmas] -->|Get money| B(Go shopping)
     B --> C{Let me thinksssssx
sssssssssssssssssssuuu
tttsssssssssssssssssssssss}
@@ -1286,9 +1255,9 @@
     C -->|Two| E[iPhone]
     C -->|Three| F[Car]
     

-  

+    

 
-  
+    
     graph TD
     A[/Christmas\]
     A -->|Get money| B[\Go shopping/]
@@ -1297,9 +1266,9 @@
     C -->|Two| E[\iPhone\]
     C -->|Three| F[Car]
     

-  

+    

 
-  
+    
     graph LR
     47(SAM.CommonFA.FMESummary)-->48(SAM.CommonFA.CommonFAFinanceBudget)
     37(SAM.CommonFA.BudgetSubserviceLineVolume)-->48(SAM.CommonFA.CommonFAFinanceBudget)
@@ -1322,9 +1291,9 @@
     35(SAM.CommonFA.PopulationFME)-->39(SAM.CommonFA.ChargeDetails)
     36(SAM.CommonFA.PremetricCost)-->39(SAM.CommonFA.ChargeDetails)
     

-  

+    

 
-  
+    
     graph TD
     9e122290_1ec3_e711_8c5a_005056ad0002("fa:fa-creative-commons My System | Test Environment")
     82072290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Business Logic Server:Service 1")
@@ -1389,17 +1358,17 @@
     9a072290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
     9a072290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
     

-  

+    

 
-  
+    
     graph TB
     subgraph One
     a1-->a2
     end
     

-  

+    

 
-  
+    
     graph TB
     A
     B
@@ -1428,9 +1397,9 @@
     style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
     style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue
     

-  

+    

 
-  
+    
     graph LR
     456ac9b0d15a8b7f1e71073221059886[1051 AAA fa:fa-check]
     f7f580e11d00a75814d2ded41fe8e8fe[1141 BBB fa:fa-check]
@@ -1445,9 +1414,9 @@
     3000"
     style 456ac9b0d15a8b7f1e71073221059886 fill:#f9f,stroke:#333,stroke-width:4px
     

-  

+    

 
-  
+    
     graph TD
     A[Christmas] -->|Get money| B(Go shopping)
     B --> C{{Let me think...
Do I want something for work,
something to spend every free second with,
or something to get around?}}
@@ -1460,9 +1429,9 @@
     class A someclass;
     class C someclass;
     

-  

+    

 
-  
+    
     graph TD
     A([stadium shape test])
     A -->|Get money| B([Go shopping])
@@ -1476,9 +1445,9 @@
     class A someclass;
     class C someclass;
     

-  

+    

 
-  
+    
     graph LR
     A[[subroutine shape test]]
     A -->|Get money| B[[Go shopping]]
@@ -1492,9 +1461,9 @@
     class A someclass;
     class C someclass;
     

-  

+    

 
-  
+    
     graph LR
     A[(cylindrical
shape
test)]
     A -->|Get money| B1[(Go shopping 1)]
@@ -1512,9 +1481,9 @@
     classDef someclass fill:#f96;
     class A someclass;
     

-  

+    

 
-  
+    
     graph LR
     A1[Multi
Line] -->|Multi
Line| B1(Multi
Line)
     C1[Multi
Line] -->|Multi
Line| D1(Multi
Line)
@@ -1526,9 +1495,9 @@
     linkStyle 1 stroke:DarkGray,stroke-width:2px
     linkStyle 2 stroke:DarkGray,stroke-width:2px
     

-  

+    

 
-  
+    
     graph LR
     A(( )) -->|step 1| B(( ))
     B(( )) -->|step 2| C(( ))
@@ -1536,9 +1505,9 @@
     linkStyle 1 stroke:greenyellow,stroke-width:2px
     style C fill:greenyellow,stroke:green,stroke-width:4px
     

-  

+    

 
-  
+    
     graph TB
     TITLE["Link Click Events
(click the nodes below)"]
     A["link test (open in same tab)"]
@@ -1555,9 +1524,9 @@
     click E "notes://do-your-thing/id" "other protocol test"
     click F "javascript:alert('test')" "script test"
     

-  

+    

 
-  
+    
     graph LR
     A[red
text] -->|red
text| B(blue
text)
     C[/red
text/] -->|blue
text| D{blue
text}
@@ -1572,9 +1541,9 @@
     click B "index.html#link-clicked" "link test"
     click D testClick "click test"
     

-  

+    

 
-  
+    
     graph TD
     A[myClass1] --> B[default] & C[default]
     B[default] & C[default] --> D[myClass2]
@@ -1585,29 +1554,28 @@
     class A myClass1
     class D myClass2
     

-  

+    

 
-  
Anchor for "link-clicked" test

-
-  
-  
-  
-
+    
Anchor for "link-clicked" test

 
+    
+    
+    
+