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