4.1 KB142 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://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
11 rel="stylesheet"
12 />
13 <link
14 href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
15 rel="stylesheet"
16 />
17 <link rel="preconnect" href="https://fonts.googleapis.com" />
18 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
19 <link
20 href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap"
21 rel="stylesheet"
22 />
23 <link
24 href="https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
25 rel="stylesheet"
26 />
27 <link
28 href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
29 rel="stylesheet"
30 />
31
32 <style>
33 body {
34 /* background: rgb(221, 208, 208); */
35 /* background: #333; */
36 font-family: 'Arial';
37 /* font-size: 18px !important; */
38 }
39
40 h1 {
41 color: grey;
42 }
43
44 .mermaid2 {
45 display: none;
46 }
47
48 .mermaid svg {
49 /* font-size: 18px !important; */
50
51 /* background-color: #efefef;
52 background-image: radial-gradient(#fff 51%, transparent 91%),
53 radial-gradient(#fff 51%, transparent 91%);
54 background-size: 20px 20px;
55 background-position:
56 0 0,
57 10px 10px;
58 background-repeat: repeat; */
59 }
60 </style>
61 </head>
62
63 <body style="display: flex; gap: 2rem; flex-direction: row">
64 <pre id="diagram4" class="mermaid">
65 flowchart
66 A --> A
67 subgraph B
68 B1 --> B1
69 end
70 subgraph C
71 subgraph C1
72 C2 --> C2
73 subgraph D
74 D1 --> D1
75 end
76 D --> D
77 end
78 C1 --> C1
79 end
80
81 </pre>
82 <script type="module">
83 import mermaid from './mermaid.esm.mjs';
84 import layouts from './mermaid-layout-elk.esm.mjs';
85 mermaid.registerLayoutLoaders(layouts);
86 mermaid.registerIconPacks([
87 {
88 name: 'logos',
89 loader: () =>
90 fetch('https://unpkg.com/@iconify-json/logos/icons.json').then((res) => res.json()),
91 },
92 {
93 name: 'fa',
94 loader: () =>
95 fetch('https://unpkg.com/@iconify-json/fa6-solid/icons.json').then((res) => res.json()),
96 },
97 ]);
98 mermaid.parseError = function (err, hash) {
99 console.error('Mermaid error: ', err);
100 };
101 window.callback = function () {
102 alert('A callback was triggered');
103 };
104 mermaid.initialize({
105 // theme: 'base',
106 // handdrawnSeed: 12,
107 look: 'classic',
108 // 'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX',
109 // 'elk.nodePlacement.strategy': 'SIMPLE',
110 // 'elk.nodePlacement.strategy': 'LAYERED',
111 // 'elk.mergeEdges': true,
112 // layout: 'dagre',
113 // layout: 'elk',
114 // layout: 'fixed',
115 // htmlLabels: false,
116 flowchart: { titleTopMargin: 10, padding: 0, htmlLabels: true },
117 // fontFamily: 'Caveat',
118 // fontFamily: 'Kalam',
119 fontFamily: 'courier',
120 sequence: {
121 actorFontFamily: 'courier',
122 noteFontFamily: 'courier',
123 messageFontFamily: 'courier',
124 },
125 themeVariables: {
126 fontSize: 50,
127 fontFamily: 'courier',
128 },
129 logLevel: 0,
130 securityLevel: 'loose',
131 });
132 function callback() {
133 alert('It worked');
134 }
135 mermaid.parseError = function (err, hash) {
136 console.error('In parse error:');
137 console.error(err);
138 };
139 </script>
140 </body>
141</html>
142