-
Notifications
You must be signed in to change notification settings - Fork 0
/
mermaid-wrapper.html
49 lines (48 loc) · 1.58 KB
/
mermaid-wrapper.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link href="//solome.js.org/static/fonts/style.css" rel="stylesheet">
<style>#loading #root {opacity:0;}.wrapper{opacity:1;transition:all .45s;}#loading::after{opacity:1;}.wrapper::after{opacity:0;transition:all .25s;content:'';position:absolute;left:50%;top:25%;width:50px;padding:8px;aspect-ratio:1;border-radius:50%;background:#2bb8aa;--_m:conic-gradient(#0000 10%,#000),linear-gradient(#000 0 0) content-box;-webkit-mask:var(--_m);mask:var(--_m);-webkit-mask-composite:source-out;mask-composite:subtract;animation:l3 1s infinite linear;}@keyframes l3{to{transform:rotate(1turn)}}</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<div class="wrapper" id="loading"><div id="root"><pre class="mermaid">
graph LR
A --- B
B-->C[fa:fa-ban forbidden]
B-->D(fa:fa-spinner);
</pre>
<pre class="mermaid">
journey
title My working day
section Go to work
Make tea: 5: Me
Go upstairs: 3: Me
Do work: 1: Me, Cat
section Go home
Go downstairs: 5: Me
Sit down: 5: Me
</pre>
<pre class="mermaid">
gitGraph:
commit "Ashish"
branch newbranch
checkout newbranch
commit id:"1111"
commit tag:"test"
checkout main
commit type: HIGHLIGHT
commit
merge newbranch
commit
branch b2
commit
</pre>
</div>
</div>
<script type="module" src="//solome.js.org/static/mermaid-wrapper.js?v4=2"></script>
<!-- <script type="module" src="/stories/components/MermaidWrapper/main.tsx"></script> -->
<script>console.log(window.$mermaid);</script>
</body>
</html>