| 6dd74de | | | 1 | <html> |
| 6dd74de | | | 2 | <head> |
| 6dd74de | | | 3 | <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" /> |
| 6dd74de | | | 4 | <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" /> |
| 6dd74de | | | 5 | <link |
| 6dd74de | | | 6 | rel="stylesheet" |
| 6dd74de | | | 7 | href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css" |
| 6dd74de | | | 8 | /> |
| 6dd74de | | | 9 | <link |
| 6dd74de | | | 10 | href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" |
| 6dd74de | | | 11 | rel="stylesheet" |
| 6dd74de | | | 12 | /> |
| 6dd74de | | | 13 | <style> |
| 6dd74de | | | 14 | body { |
| 6dd74de | | | 15 | /* background: rgb(221, 208, 208); */ |
| 6dd74de | | | 16 | /* background:#333; */ |
| 6dd74de | | | 17 | font-family: 'Arial'; |
| 6dd74de | | | 18 | } |
| 6dd74de | | | 19 | h1 { |
| 6dd74de | | | 20 | color: grey; |
| 6dd74de | | | 21 | } |
| 6dd74de | | | 22 | .mermaid2 { |
| 6dd74de | | | 23 | display: none; |
| 6dd74de | | | 24 | } |
| 6dd74de | | | 25 | </style> |
| 6dd74de | | | 26 | </head> |
| 6dd74de | | | 27 | <body> |
| 6dd74de | | | 28 | <h1>info below</h1> |
| 6dd74de | | | 29 | <div class="flex"> |
| 6dd74de | | | 30 | <pre class="mermaid2" style="width: 50%; height: 20%"> |
| 6dd74de | | | 31 | flowchart BT |
| 6dd74de | | | 32 | subgraph two |
| 6dd74de | | | 33 | b1 |
| 6dd74de | | | 34 | end |
| 6dd74de | | | 35 | subgraph three |
| 6dd74de | | | 36 | c1-->c2 |
| 6dd74de | | | 37 | end |
| 6dd74de | | | 38 | c1 --apa apa apa--> b1 |
| 6dd74de | | | 39 | two --> c2 |
| 6dd74de | | | 40 | </pre> |
| 6dd74de | | | 41 | <pre class="mermaid2" style="width: 50%; height: 200px"> |
| 6dd74de | | | 42 | sequenceDiagram |
| 6dd74de | | | 43 | Alice->>Bob:Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be |
| 6dd74de | | | 44 | Bob->>Alice: I'm short though |
| 6dd74de | | | 45 | </pre> |
| 6dd74de | | | 46 | <pre class="mermaid2" style="width: 50%; height: 200px"> |
| 6dd74de | | | 47 | %%{init: {'securityLevel': 'loose'}}%% |
| 6dd74de | | | 48 | graph TD |
| 6dd74de | | | 49 | A[Christmas] -->|Get money| B(Go shopping) |
| 6dd74de | | | 50 | B --> C{{Let me think...<br />Do I want something for work,<br />something to spend every free second with,<br />or something to get around?}} |
| 6dd74de | | | 51 | C -->|One| D[Laptop] |
| 6dd74de | | | 52 | C -->|Two| E[iPhone] |
| 6dd74de | | | 53 | C -->|Three| F[Car] |
| 6dd74de | | | 54 | click A "index.html#link-clicked" "link test" |
| 6dd74de | | | 55 | click B callback "click test" |
| 6dd74de | | | 56 | classDef someclass fill:#f96; |
| 6dd74de | | | 57 | class A someclass; |
| 6dd74de | | | 58 | class C someclass; |
| 6dd74de | | | 59 | </pre> |
| 6dd74de | | | 60 | <pre class="mermaid2" style="width: 50%; height: 200px"> |
| 6dd74de | | | 61 | |
| 6dd74de | | | 62 | flowchart BT |
| 6dd74de | | | 63 | subgraph a |
| 6dd74de | | | 64 | b1 -- ok --> b2 |
| 6dd74de | | | 65 | end |
| 6dd74de | | | 66 | a -- sert --> c |
| 6dd74de | | | 67 | c --> d |
| 6dd74de | | | 68 | b1 --> d |
| 6dd74de | | | 69 | a --asd123 --> d |
| 6dd74de | | | 70 | </pre> |
| 6dd74de | | | 71 | <pre class="mermaid2" style="width: 50%; height: 20%"> |
| 6dd74de | | | 72 | stateDiagram-v2 |
| 6dd74de | | | 73 | state A { |
| 6dd74de | | | 74 | B1 --> B2: ok |
| 6dd74de | | | 75 | } |
| 6dd74de | | | 76 | A --> C: sert |
| 6dd74de | | | 77 | C --> D |
| 6dd74de | | | 78 | B1 --> D |
| 6dd74de | | | 79 | A --> D: asd123 |
| 6dd74de | | | 80 | </pre> |
| 6dd74de | | | 81 | </div> |
| 6dd74de | | | 82 | <pre class="mermaid2" style="width: 50%; height: 20%"> |
| 6dd74de | | | 83 | %%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ff0000'}}}%% |
| 6dd74de | | | 84 | flowchart LR |
| 6dd74de | | | 85 | a -->b |
| 6dd74de | | | 86 | subgraph A |
| 6dd74de | | | 87 | B |
| 6dd74de | | | 88 | end |
| 6dd74de | | | 89 | subgraph B |
| 6dd74de | | | 90 | b |
| 6dd74de | | | 91 | end |
| 6dd74de | | | 92 | </pre> |
| 6dd74de | | | 93 | <pre class="mermaid" style="width: 50%; height: 20%"> |
| 6dd74de | | | 94 | flowchart TB |
| 6dd74de | | | 95 | subgraph A |
| 6dd74de | | | 96 | b-->B |
| 6dd74de | | | 97 | a-->c |
| 6dd74de | | | 98 | end |
| 6dd74de | | | 99 | subgraph B |
| 6dd74de | | | 100 | c |
| 6dd74de | | | 101 | end |
| 6dd74de | | | 102 | </pre> |
| 6dd74de | | | 103 | <pre class="mermaid2" style="width: 50%; height: 20%"> |
| 6dd74de | | | 104 | sequenceDiagram |
| 6dd74de | | | 105 | Alice->Bob: Hello Bob, how are you? |
| 6dd74de | | | 106 | Note over Alice,Bob: Looks |
| 6dd74de | | | 107 | Note over Bob,Alice: Looks back |
| 6dd74de | | | 108 | </pre> |
| 6dd74de | | | 109 | |
| 6dd74de | | | 110 | <script type="module"> |
| 6dd74de | | | 111 | import mermaid from './mermaid.esm.mjs'; |
| 6dd74de | | | 112 | mermaid.parseError = function (err, hash) { |
| 6dd74de | | | 113 | // console.error('Mermaid error: ', err); |
| 6dd74de | | | 114 | }; |
| 6dd74de | | | 115 | mermaid.initialize({ |
| 6dd74de | | | 116 | // theme: 'forest', |
| 6dd74de | | | 117 | // themeVariables:{primaryColor: '#ff0000'}, |
| 6dd74de | | | 118 | // arrowMarkerAbsolute: true, |
| 6dd74de | | | 119 | // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}', |
| 6dd74de | | | 120 | logLevel: 0, |
| 6dd74de | | | 121 | flowchart: { curve: 'cardinal', htmlLabels: false }, |
| 6dd74de | | | 122 | // gantt: { axisFormat: '%m/%d/%Y' }, |
| 6dd74de | | | 123 | sequence: { actorMargin: 50, showSequenceNumbers: true }, |
| 6dd74de | | | 124 | // sequenceDiagram: { actorMargin: 300 } // deprecated |
| 6dd74de | | | 125 | fontFamily: '"arial", sans-serif', |
| 6dd74de | | | 126 | curve: 'cardinal', |
| 6dd74de | | | 127 | securityLevel: 'strict', |
| 6dd74de | | | 128 | }); |
| 6dd74de | | | 129 | function callback() { |
| 6dd74de | | | 130 | alert('It worked'); |
| 6dd74de | | | 131 | } |
| 6dd74de | | | 132 | </script> |
| 6dd74de | | | 133 | </body> |
| 6dd74de | | | 134 | </html> |