wip

markdown-mermaid edit

Reference

• Mermaid Live Editor Example
• Mermaid Home Assistant Live Network
• Mermaid js converter github and Mermaid Converter how-to
• Mermaid cli
• Mermaid github include markdown files
• tbd

nested tables

	ASCII	HTML
Single backticks	'Isn't this fun?'	‘Isn’t this fun?’
Quotes	"Isn't this fun?"	<table> <thead> <tr> <th></th> <th>ASCII</th> <th>HTML</th> </tr> </thead> <tbody> <tr> <td>Single backticks</td> <td>'Isn't this fun?'</td> <td>‘Isn’t this fun?’</td> </tr> <tr> <td>Quotes</td> <td>"Isn't this fun?"</td> <td>“Isn’t this fun?”</td> </tr> <tr> <td>Dashes</td> <td>-- is en-dash, --- is em-dash</td> <td>– is en-dash, — is em-dash</td> </tr> </tbody> </table>
Dashes	-- is en-dash, --- is em-dash	– is en-dash, — is em-dash

|                |ASCII                          |HTML                         |
|----------------|-------------------------------|-----------------------------|
|Single backticks|`'Isn't this fun?'`            |'Isn't this fun?'            |
|Quotes          |`"Isn't this fun?"`            |<table>  <thead>  <tr>  <th></th>  <th>ASCII</th>  <th>HTML</th>  </tr>  </thead>  <tbody>  <tr>  <td>Single backticks</td>  <td><code>'Isn't this fun?'</code></td>  <td>‘Isn’t this fun?’</td>  </tr>  <tr>  <td>Quotes</td>  <td><code>"Isn't this fun?"</code></td>  <td>“Isn’t this fun?”</td>  </tr>  <tr>  <td>Dashes</td>  <td><code>-- is en-dash, --- is em-dash</code></td>  <td>– is en-dash, — is em-dash</td>  </tr>  </tbody>  </table>      |
|Dashes          |`-- is en-dash, --- is em-dash`|-- is en-dash, --- is em-dash|

---

• mermaid cheatsheet https://jojozhuang.github.io/tutorial/mermaid-cheat-sheet/

  graph TD; 
  A(Start)-->B(Do some stuff); 
  B(Take some rest)-->C(do more);
  click B "http://www.github.com" "This is a link"
  

Charts in markdown mermaid

• https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/

  graph TD;
      A-->B;
      A-->C;
      B-->D;
      C-->D;
  

sequenceDiagram
    participant dotcom
    participant iframe
    participant viewscreen
    dotcom->>iframe: loads html w/ iframe url
    iframe->>viewscreen: request template
    viewscreen->>iframe: html & javascript
    iframe->>dotcom: iframe ready
    dotcom->>iframe: set mermaid data on iframe
    iframe->>iframe: render mermaid

stateDiagram
    [*] --> New
    New --> Active : Activate
    New --> Closed : Close
    Active --> Inactive : Deactivate
    Active --> Closed : Close
    Inactive --> Active: Activate
    Inactive --> Closed : Close