aculich · January 22, 2025 11:32 · Mar 29, 2022 · Mar 29, 2022 · Mar 29, 2022 · Mar 29, 2022
diff --git a/Mermaid_on_Github_Examples.md b/Mermaid_on_Github_Examples.md
@@ -166,6 +166,25 @@ graph TB
     end
 ```
 
+### Themed Subgraph
+
+```mermaid
+graph LR
+    subgraph 1[System Flow]
+        CP([Command Palette])
+        subgraph 2[Black Box]
+            QA(Quick Addition)
+            QM(Macro)
+        end
+        B[Call Script]
+        C[Open URI]
+        D[Load Workspace]
+        CP --> QA --> QM --> B --> C --> D
+    end
+style 1 fill:#333333,stroke:#FFFFFF,stroke-width:2px
+style 2 fill:#222222,stroke:#FFFFFF,stroke-width:1px
+```
+
 ### Flowchart with Styling
 
 ```mermaid

diff --git a/Mermaid_on_Github_Examples.md b/Mermaid_on_Github_Examples.md
@@ -117,7 +117,7 @@ Notes:
 flowchart LR;
     A-->B["B#dagger; (internal link)"];
     B-->C;
-    C-->D["D#ddagger; (exterinal link)"];
+    C-->D["D#ddagger; (external link)"];
     click B "https://gist.github.com/ChristopherA/bffddfdf7b1502215e44cec9fb766dfd/#flowchart-with-hyperlinks"
     click D "https://gist.github.com/ChristopherA/"
 ``` 

diff --git a/Mermaid_on_Github_Examples.md b/Mermaid_on_Github_Examples.md
@@ -112,7 +112,7 @@ Notes:
 * Relative and internal hyperlinks do not seem to function properly in Github's Mermaid, they must be full links.
 * To be safe, you should use quote around any label text that have symbols in them, in particular parathesis & various brackets `A-->B["This is a (test).]"` and any non-ASCII characters (use HTML Entities instead such as `&dagger;` is † `&#128279;` is 🔗.
 * TBD: Create a better example and document how to make hyperlinks work better within the limits of what GitHub's Mermaid supports, and come up some work-arounds for best practices (maybe some Mermaid styling trick like underlines. (see https://github.com/mermaid-js/mermaid/issues/2870 ).
-* 
+
 ```mermaid
 flowchart LR;
     A-->B["B#dagger; (internal link)"];

diff --git a/Mermaid_on_Github_Examples.md b/Mermaid_on_Github_Examples.md
@@ -110,16 +110,14 @@ Notes:
 * Hyperlinks in labels while using Github's Mermaid are not by default visually different.
 * Tooltips, callbacks and other [interaction features](https://mermaid-js.github.io/mermaid/#/flowchart?id=interaction) of Mermaid do not seem to function Github's Mermaid.
 * Relative and internal hyperlinks do not seem to function properly in Github's Mermaid, they must be full links.
-* To be safe, you should use quote around any label text that have symbols in them, in particular various brackets `A-->B["This is a (test).]"` and non ASCII characters (use HTML Entities instead `&dagger;` is † `&#128279;` is 🔗.. 
-
-* * https://github.com/mermaid-js/mermaid/issues/2869 & https://github.com/mermaid-js/mermaid/issues/2870 )
-* TBD: Create a better example and document how Mermaid hyperlinks function better with what GitHub supports, and come up some work-arounds for best practices (maybe some Mermaid styling trick).
-   * It looks like you can put quotes and then HTML entities into labels: for instance 
+* To be safe, you should use quote around any label text that have symbols in them, in particular parathesis & various brackets `A-->B["This is a (test).]"` and any non-ASCII characters (use HTML Entities instead such as `&dagger;` is † `&#128279;` is 🔗.
+* TBD: Create a better example and document how to make hyperlinks work better within the limits of what GitHub's Mermaid supports, and come up some work-arounds for best practices (maybe some Mermaid styling trick like underlines. (see https://github.com/mermaid-js/mermaid/issues/2870 ).
+* 
 ```mermaid
 flowchart LR;
-    A-->B["B#dagger;"];
+    A-->B["B#dagger; (internal link)"];
     B-->C;
-    C-->D["d#ddagger;"];
+    C-->D["D#ddagger; (exterinal link)"];
     click B "https://gist.github.com/ChristopherA/bffddfdf7b1502215e44cec9fb766dfd/#flowchart-with-hyperlinks"
     click D "https://gist.github.com/ChristopherA/"
 ``` 

diff --git a/Mermaid_on_Github_Examples.md b/Mermaid_on_Github_Examples.md
@@ -106,20 +106,22 @@ graph TD
 ```
 ### Flowchart with Hyperlinks
 
-* Hyperlinks in Github Mermaid are not by default visually different.
-* I've tried adding a non-emoji unicode symbols, and even extended ASCII B† to signify a hyperlinks, they do not work. (See issues https://github.com/mermaid-js/mermaid/issues/2869 & https://github.com/mermaid-js/mermaid/issues/2870 )
-* Note that tooltips feature of Mermaid does not seem to function.
+Notes:
+* Hyperlinks in labels while using Github's Mermaid are not by default visually different.
+* Tooltips, callbacks and other [interaction features](https://mermaid-js.github.io/mermaid/#/flowchart?id=interaction) of Mermaid do not seem to function Github's Mermaid.
+* Relative and internal hyperlinks do not seem to function properly in Github's Mermaid, they must be full links.
+* To be safe, you should use quote around any label text that have symbols in them, in particular various brackets `A-->B["This is a (test).]"` and non ASCII characters (use HTML Entities instead `&dagger;` is † `&#128279;` is 🔗.. 
+
+* * https://github.com/mermaid-js/mermaid/issues/2869 & https://github.com/mermaid-js/mermaid/issues/2870 )
 * TBD: Create a better example and document how Mermaid hyperlinks function better with what GitHub supports, and come up some work-arounds for best practices (maybe some Mermaid styling trick).
-   * It looks like you can put quotes and then HTML entities into labels: for instance `&dagger;` is † `&#128279;` is 🔗.
+   * It looks like you can put quotes and then HTML entities into labels: for instance 
 ```mermaid
 flowchart LR;
     A-->B["B#dagger;"];
     B-->C;
     C-->D["d#ddagger;"];
-    click B "../#flowchart-with-hyperlinks"
+    click B "https://gist.github.com/ChristopherA/bffddfdf7b1502215e44cec9fb766dfd/#flowchart-with-hyperlinks"
     click D "https://gist.github.com/ChristopherA/"
-
-    
 ``` 
 
 ### More Complex Example

diff --git a/Mermaid_on_Github_Examples.md b/Mermaid_on_Github_Examples.md
@@ -115,8 +115,11 @@ graph TD
 flowchart LR;
     A-->B["B#dagger;"];
     B-->C;
-    C-->D;
-    click B "https://gist.github.com/ChristopherA/bffddfdf7b1502215e44cec9fb766dfd#flowchart-with-hyperlinks" "Internal Link to #flowchart-with-hyperlinks"
+    C-->D["d#ddagger;"];
+    click B "../#flowchart-with-hyperlinks"
+    click D "https://gist.github.com/ChristopherA/"
+
+    
 ``` 
 
 ### More Complex Example

diff --git a/Mermaid_on_Github_Examples.md b/Mermaid_on_Github_Examples.md
@@ -116,8 +116,7 @@ flowchart LR;
     A-->B["B#dagger;"];
     B-->C;
     C-->D;
-    click B "#flowchart-with-hyperlinks" "Internal Link"
-    click B href "#flowchart-with-hyperlinks" "Internal Link"
+    click B "https://gist.github.com/ChristopherA/bffddfdf7b1502215e44cec9fb766dfd#flowchart-with-hyperlinks" "Internal Link to #flowchart-with-hyperlinks"
 ``` 
 
 ### More Complex Example

diff --git a/Mermaid_on_Github_Examples.md b/Mermaid_on_Github_Examples.md
@@ -116,10 +116,8 @@ flowchart LR;
     A-->B["B#dagger;"];
     B-->C;
     C-->D;
-    click A callback "Tooltip for a callback"
-    click B "http://www.github.com" "This is a tooltip for a link"
-    click A call callback() "Tooltip for a callback"
-    click B† href "http://www.github.com" "This is a tooltip for a link"
+    click B "#flowchart-with-hyperlinks" "Internal Link"
+    click B href "#flowchart-with-hyperlinks" "Internal Link"
 ``` 
 
 ### More Complex Example

diff --git a/Mermaid_on_Github_Examples.md b/Mermaid_on_Github_Examples.md
@@ -110,10 +110,10 @@ graph TD
 * I've tried adding a non-emoji unicode symbols, and even extended ASCII B† to signify a hyperlinks, they do not work. (See issues https://github.com/mermaid-js/mermaid/issues/2869 & https://github.com/mermaid-js/mermaid/issues/2870 )
 * Note that tooltips feature of Mermaid does not seem to function.
 * TBD: Create a better example and document how Mermaid hyperlinks function better with what GitHub supports, and come up some work-arounds for best practices (maybe some Mermaid styling trick).
-* 
+   * It looks like you can put quotes and then HTML entities into labels: for instance `&dagger;` is † `&#128279;` is 🔗.
 ```mermaid
 flowchart LR;
-    A-->B["B&#128279;"];
+    A-->B["B#dagger;"];
     B-->C;
     C-->D;
     click A callback "Tooltip for a callback"

diff --git a/Mermaid_on_Github_Examples.md b/Mermaid_on_Github_Examples.md
@@ -113,7 +113,7 @@ graph TD
 * 
 ```mermaid
 flowchart LR;
-    A-->B["B&dagger;"];
+    A-->B["B&#128279;"];
     B-->C;
     C-->D;
     click A callback "Tooltip for a callback"

diff --git a/Mermaid_on_Github_Examples.md b/Mermaid_on_Github_Examples.md
@@ -113,7 +113,7 @@ graph TD
 * 
 ```mermaid
 flowchart LR;
-    A-->B["B#&dagger;"];
+    A-->B["B&dagger;"];
     B-->C;
     C-->D;
     click A callback "Tooltip for a callback"

diff --git a/Mermaid_on_Github_Examples.md b/Mermaid_on_Github_Examples.md
@@ -113,7 +113,7 @@ graph TD
 * 
 ```mermaid
 flowchart LR;
-    A["A double quote:#quot;"] -->B["A dec char:#9829;"]
+    A-->B["B#&dagger;"];
     B-->C;
     C-->D;
     click A callback "Tooltip for a callback"

diff --git a/Mermaid_on_Github_Examples.md b/Mermaid_on_Github_Examples.md
@@ -113,7 +113,7 @@ graph TD
 * 
 ```mermaid
 flowchart LR;
-    A-->B[B&dagger;];
+    A["A double quote:#quot;"] -->B["A dec char:#9829;"]
     B-->C;
     C-->D;
     click A callback "Tooltip for a callback"

diff --git a/Mermaid_on_Github_Examples.md b/Mermaid_on_Github_Examples.md
@@ -113,7 +113,7 @@ graph TD
 * 
 ```mermaid
 flowchart LR;
-    A-->B;
+    A-->B[B&dagger;];
     B-->C;
     C-->D;
     click A callback "Tooltip for a callback"
@@ -624,11 +624,3 @@ commit
 commit
 merge newbranch
 ```
-
-## Testing Odd Stuff
-
- ```mermaid 
- %%{init: { 'theme':'dark', 'sequence': {'useMaxWidth':false} } }%%
- sequenceDiagram 
-   alice ->> mark: Sent a flower
- ```
diff --git a/Mermaid_on_Github_Examples.md b/Mermaid_on_Github_Examples.md
@@ -624,3 +624,11 @@ commit
 commit
 merge newbranch
 ```
+
+## Testing Odd Stuff
+
+ ```mermaid 
+ %%{init: { 'theme':'dark', 'sequence': {'useMaxWidth':false} } }%%
+ sequenceDiagram 
+   alice ->> mark: Sent a flower
+ ```
diff --git a/Mermaid_on_Github_Examples.md b/Mermaid_on_Github_Examples.md
@@ -220,7 +220,7 @@ E--No-->C
 
 ### Styled Links
 
-(from [StackOverflow](https://stackoverflow.com/questions/68452674/style-multiple-links-mermaid-js)
+(from [StackOverflow](https://stackoverflow.com/questions/68452674/style-multiple-links-mermaid-js))
 
 ```mermaid
 graph TD
@@ -259,15 +259,15 @@ graph TD
     linkStyle 0,1,2,4,5,8,9 stroke-width:2px,fill:none,stroke:red;
     linkStyle 3,6,7 stroke-width:2px,fill:none,stroke:black;
     linkStyle 10 stroke-width:2px,fill:none,stroke:red;
-    linkStyle 11 stroke-width:2px,fill:none,stroke:black;
+    linkStyle 11 stroke-width:2px,fill:none,stroke:green;
     linkStyle 12 stroke-width:2px,fill:none,stroke:red;
-    linkStyle 13 stroke-width:2px,fill:none,stroke:black;
+    linkStyle 13 stroke-width:2px,fill:none,stroke:green;
     linkStyle 14 stroke-width:2px,fill:none,stroke:red;
-    linkStyle 15 stroke-width:2px,fill:none,stroke:black;
-    linkStyle 16 stroke-width:2px,fill:none,stroke:black;
+    linkStyle 15 stroke-width:2px,fill:none,stroke:green;
+    linkStyle 16 stroke-width:2px,fill:none,stroke:green;
     linkStyle 17 stroke-width:2px,fill:none,stroke:red;
-    linkStyle 18 stroke-width:2px,fill:none,stroke:black;
-    linkStyle 19 stroke-width:2px,fill:none,stroke:black;
+    linkStyle 18 stroke-width:2px,fill:none,stroke:green;
+    linkStyle 19 stroke-width:2px,fill:none,stroke:green;
 ```
 
 ### Styled Flowchart with Titles

diff --git a/Mermaid_on_Github_Examples.md b/Mermaid_on_Github_Examples.md
@@ -218,6 +218,58 @@ E--Yes-->F
 E--No-->C
 ```
 
+### Styled Links
+
+(from [StackOverflow](https://stackoverflow.com/questions/68452674/style-multiple-links-mermaid-js)
+
+```mermaid
+graph TD
+    Bat(fa:fa-car-battery Batteries) -->|150a 50mm| ShutOff
+    Bat -->|150a 50mm| Shunt
+
+    ShutOff[Shut Off] -->|150a 50mm| BusPos[Bus Bar +]
+
+    Shunt -->|150a 50mm| BusNeg[Bus Bar -]
+
+    BusPos -->|40a| Fuse[Fuse Box]
+    BusPos -->|?a| Old{Old Wiring}
+
+    BusNeg -->|40a| Fuse
+
+    Fuse -->|10a| USB(USB-C)
+    Fuse -->|10a| USB
+    Fuse -->|1.5a| Switch -->|1.5a| Wifi
+
+    Wifi -->|1.5a| Fuse
+
+    Fuse -->|10a| Cig1[Cigarette Lighter]
+    Fuse -->|10a| Cig1 
+
+    Fuse -->|10a| Cig2[Cigarette Lighter Near Bed]
+    Fuse -->|10a| Cig2 
+
+    BusNeg -->|?a| Old
+
+    Solar --> SolarCont[Solar Controller]
+    Solar --> SolarCont
+
+    SolarCont --> BusNeg
+    SolarCont --> BusPos
+
+    linkStyle 0,1,2,4,5,8,9 stroke-width:2px,fill:none,stroke:red;
+    linkStyle 3,6,7 stroke-width:2px,fill:none,stroke:black;
+    linkStyle 10 stroke-width:2px,fill:none,stroke:red;
+    linkStyle 11 stroke-width:2px,fill:none,stroke:black;
+    linkStyle 12 stroke-width:2px,fill:none,stroke:red;
+    linkStyle 13 stroke-width:2px,fill:none,stroke:black;
+    linkStyle 14 stroke-width:2px,fill:none,stroke:red;
+    linkStyle 15 stroke-width:2px,fill:none,stroke:black;
+    linkStyle 16 stroke-width:2px,fill:none,stroke:black;
+    linkStyle 17 stroke-width:2px,fill:none,stroke:red;
+    linkStyle 18 stroke-width:2px,fill:none,stroke:black;
+    linkStyle 19 stroke-width:2px,fill:none,stroke:black;
+```
+
 ### Styled Flowchart with Titles
 
 From [Com Powys-Lybbe's blog](https://dompl.medium.com/produce-great-looking-flowcharts-in-seconds-7f3bea64f2e2), this examples shows some best practices of comments to seperate nodes, links, and styles.

diff --git a/Mermaid_on_Github_Examples.md b/Mermaid_on_Github_Examples.md
@@ -192,6 +192,32 @@ graph TB
      class di orange
 ```
 
+### Decision Tree
+
+(from: https://bionicteaching.com/gravity-forms-mermaid-decision-flowcharts/ )
+```mermaid
+graph TB
+A("Do you think online service
+learning is right for you?")
+B("Do you have time to design
+a service learning component?")
+C("What is the civic or public purpose of your discipline?
+How do you teach that without service learning?")
+D("Do you have departmental or school
+support to plan and implement service learning?")
+E["Are you willing to be a trailblazer?"]
+F["What type of service learning to you want to plan?"]
+
+A==Yes==>B
+A--No-->C
+B==Yes==>D
+B--No-->E
+D--Yes-->F
+D--No-->E
+E--Yes-->F
+E--No-->C
+```
+
 ### Styled Flowchart with Titles
 
 From [Com Powys-Lybbe's blog](https://dompl.medium.com/produce-great-looking-flowcharts-in-seconds-7f3bea64f2e2), this examples shows some best practices of comments to seperate nodes, links, and styles.

diff --git a/Mermaid_on_Github_Examples.md b/Mermaid_on_Github_Examples.md
@@ -19,6 +19,7 @@ Docs & Tools:
 
 Some real-world examples of Mermaid Diagrams in Github:
 * [Pattern: AppDelegate -> Router -> MVP/C](https://gist.github.com/vtsoup/f1f79d19d6f8e58396bde8847c09a62e)
+* [Navigation(*italian*)](https://gist.github.com/balanza/39bd68f3978ae7dd6a486321b2251ce7)
 
 ## [Graph (aka Flowchart)](https://mermaid-js.github.io/mermaid/#/flowchart)
 

diff --git a/Mermaid_on_Github_Examples.md b/Mermaid_on_Github_Examples.md
@@ -268,6 +268,15 @@ sequenceDiagram
   note over c, s: SEQ3 = 101<br>ACK3 = 300+1 = 301
 ```
 
+```mermaid
+sequenceDiagram
+A->> B: Query
+B->> C: Forward query
+Note right of C: Thinking...
+C->> B: Response
+B->> A: Forward response
+```
+
 ### How mermaid is generated by Github
 
 ```mermaid

diff --git a/Mermaid_on_Github_Examples.md b/Mermaid_on_Github_Examples.md
@@ -106,7 +106,7 @@ graph TD
 ### Flowchart with Hyperlinks
 
 * Hyperlinks in Github Mermaid are not by default visually different.
-* I've tried adding a non-emoji unicode symbols, and even extended ASCII B† to signify a hyperlinks, they do not work. (See issue https://github.com/mermaid-js/mermaid/issues/2869 )
+* I've tried adding a non-emoji unicode symbols, and even extended ASCII B† to signify a hyperlinks, they do not work. (See issues https://github.com/mermaid-js/mermaid/issues/2869 & https://github.com/mermaid-js/mermaid/issues/2870 )
 * Note that tooltips feature of Mermaid does not seem to function.
 * TBD: Create a better example and document how Mermaid hyperlinks function better with what GitHub supports, and come up some work-arounds for best practices (maybe some Mermaid styling trick).
 * 

diff --git a/Mermaid_on_Github_Examples.md b/Mermaid_on_Github_Examples.md
@@ -58,6 +58,21 @@ graph TB
     A & B--> C & D
 ```
 
+### Binary Tree
+
+```mermaid
+graph TB
+    A((1))-->B((2))
+    A-->C((3))
+    B-->D((4))
+    B-->E((5))
+    C-->F((6))
+    C-->G((7))
+    D-->H((8))
+    D-->I((9))
+    E-->J((10))
+```
+
 ### Graph Shape & Link Variants
 
 ```mermaid

diff --git a/Mermaid_on_Github_Examples.md b/Mermaid_on_Github_Examples.md
@@ -93,7 +93,8 @@ graph TD
 * Hyperlinks in Github Mermaid are not by default visually different.
 * I've tried adding a non-emoji unicode symbols, and even extended ASCII B† to signify a hyperlinks, they do not work. (See issue https://github.com/mermaid-js/mermaid/issues/2869 )
 * Note that tooltips feature of Mermaid does not seem to function.
-* TBD: Create a better example and cocument hyperlinks better with what GitHub supports, and come up some work-arounds for best practices (maybe some Mermaid styling trick).
+* TBD: Create a better example and document how Mermaid hyperlinks function better with what GitHub supports, and come up some work-arounds for best practices (maybe some Mermaid styling trick).
+* 
 ```mermaid
 flowchart LR;
     A-->B;

diff --git a/Mermaid_on_Github_Examples.md b/Mermaid_on_Github_Examples.md
@@ -90,9 +90,10 @@ graph TD
 ```
 ### Flowchart with Hyperlinks
 
-* Links are not by default visually different.
-* I've tried adding a non-emoji unicode symbol B† to signify a hyperlink, it does not work.
+* Hyperlinks in Github Mermaid are not by default visually different.
+* I've tried adding a non-emoji unicode symbols, and even extended ASCII B† to signify a hyperlinks, they do not work. (See issue https://github.com/mermaid-js/mermaid/issues/2869 )
 * Note that tooltips feature of Mermaid does not seem to function.
+* TBD: Create a better example and cocument hyperlinks better with what GitHub supports, and come up some work-arounds for best practices (maybe some Mermaid styling trick).
 ```mermaid
 flowchart LR;
     A-->B;

diff --git a/Mermaid_on_Github_Examples.md b/Mermaid_on_Github_Examples.md
@@ -8,8 +8,8 @@ Pros & Cons:
 
 Notes:
 * Not all the features of Mermaid (in particular symbols `B-->C[fa:fa-ban forbidden]`, hyperlink and tooltips) are supported by Github.
-* A number of other Markdown features don't work within Mermaid labels `:grinning:`=😀, `*italic*`=*italic*, mathjax `n<sup>2</sup>`=n<sup>2</sup> (but don't break Mermaid).
-* Many characters, in paricular emoji `😀` & unicode `†`, break Mermaid with errors.
+* A number of other Markdown features don't work within Mermaid labels but don't break it: `:grinning:`=😀, `*italic*`=*italic*, mathjax `n<sup>2</sup>`=n<sup>2</sup>.
+* Many characters, in paricular emoji `😀` & some extended ASCII `†¶` (but oddly, not extended ASCII `²`), break Mermaid with errors.
 * Some embed GitHub gists and pages into other pages, and this doesn't seem to work (yet).
 
 Docs & Tools:
@@ -35,7 +35,7 @@ C-->D;
 
 ```mermaid
 flowchart LR
-    a[Chapter 1²] --> b[Chapter 2¶] --> c[Chapter 3†]
+    a[Chapter 1] --> b[Chapter 2] --> c[Chapter 3]
     c-->d[Using Ledger]
     c-->e[Using Trezor]
     d-->f[Chapter 4]

diff --git a/Mermaid_on_Github_Examples.md b/Mermaid_on_Github_Examples.md
@@ -35,7 +35,7 @@ C-->D;
 
 ```mermaid
 flowchart LR
-    a[Chapter 1] --> b[Chapter 2] --> c[Chapter 3]
+    a[Chapter 1²] --> b[Chapter 2¶] --> c[Chapter 3†]
     c-->d[Using Ledger]
     c-->e[Using Trezor]
     d-->f[Chapter 4]
@@ -68,11 +68,6 @@ graph LR
     C --> D
 ```
 
-```mermaid
-flowchart LR
-    a[*italic*] --> b[*_bold-italic_*]
-```
-
 ### Basic Flowchart
 ```mermaid
 graph TB

diff --git a/Mermaid_on_Github_Examples.md b/Mermaid_on_Github_Examples.md
@@ -8,7 +8,7 @@ Pros & Cons:
 
 Notes:
 * Not all the features of Mermaid (in particular symbols `B-->C[fa:fa-ban forbidden]`, hyperlink and tooltips) are supported by Github.
-* A number of other Markdown features don't work in Mermaid labels `:grinning:` , `*italic*` *italic* (but don't break it)
+* A number of other Markdown features don't work within Mermaid labels `:grinning:`=😀, `*italic*`=*italic*, mathjax `n<sup>2</sup>`=n<sup>2</sup> (but don't break Mermaid).
 * Many characters, in paricular emoji `😀` & unicode `†`, break Mermaid with errors.
 * Some embed GitHub gists and pages into other pages, and this doesn't seem to work (yet).
 
@@ -35,7 +35,7 @@ C-->D;
 
 ```mermaid
 flowchart LR
-    a[n<sup>2</sup>] --> b[Chapter 2] --> c[Chapter 3]
+    a[Chapter 1] --> b[Chapter 2] --> c[Chapter 3]
     c-->d[Using Ledger]
     c-->e[Using Trezor]
     d-->f[Chapter 4]

diff --git a/Mermaid_on_Github_Examples.md b/Mermaid_on_Github_Examples.md
@@ -35,7 +35,7 @@ C-->D;
 
 ```mermaid
 flowchart LR
-    a[Chapter 1] --> b[Chapter 2] --> c[Chapter 3]
+    a[n<sup>2</sup>] --> b[Chapter 2] --> c[Chapter 3]
     c-->d[Using Ledger]
     c-->e[Using Trezor]
     d-->f[Chapter 4]

diff --git a/Mermaid_on_Github_Examples.md b/Mermaid_on_Github_Examples.md
@@ -7,8 +7,9 @@ Pros & Cons:
 * Con: You cannot control the layout.
 
 Notes:
-* Not all the features of Mermaid (in particular icons `B-->C[fa:fa-ban forbidden]`, hyperlink and tooltips) are supported by Github.
-* A number of other Markdown features don't work in Mermaid labels `:grinning:`.
+* Not all the features of Mermaid (in particular symbols `B-->C[fa:fa-ban forbidden]`, hyperlink and tooltips) are supported by Github.
+* A number of other Markdown features don't work in Mermaid labels `:grinning:` , `*italic*` *italic* (but don't break it)
+* Many characters, in paricular emoji `😀` & unicode `†`, break Mermaid with errors.
 * Some embed GitHub gists and pages into other pages, and this doesn't seem to work (yet).
 
 Docs & Tools:
@@ -67,13 +68,6 @@ graph LR
     C --> D
 ```
 
-### Testing Markdown Special , Unicode & 
-
-* NO: `:grinning:` :grinning:
-* `*italic*`  *italic*
-* NO: unicode: 😀
-* NO: special character: †
-
 ```mermaid
 flowchart LR
     a[*italic*] --> b[*_bold-italic_*]

diff --git a/Mermaid_on_Github_Examples.md b/Mermaid_on_Github_Examples.md
@@ -70,13 +70,13 @@ graph LR
 ### Testing Markdown Special , Unicode & 
 
 * NO: `:grinning:` :grinning:
-* `*italics*`  *italics*
+* `*italic*`  *italic*
 * NO: unicode: 😀
-* special character: †
+* NO: special character: †
 
 ```mermaid
 flowchart LR
-    a[*italics*] --> b[†]
+    a[*italic*] --> b[*_bold-italic_*]
 ```
 
 ### Basic Flowchart