7.4 KB223 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://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
15 rel="stylesheet"
16 />
17 <link
18 href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
19 rel="stylesheet"
20 />
21 <link rel="preconnect" href="https://fonts.googleapis.com" />
22 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
23 <link
24 href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap"
25 rel="stylesheet"
26 />
27 <link
28 href="https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
29 rel="stylesheet"
30 />
31 <link
32 href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
33 rel="stylesheet"
34 />
35 <link
36 href="https://fonts.googleapis.com/css2?family=Recursive:wght@300..1000&display=swap"
37 rel="stylesheet"
38 />
39
40 <style>
41 .recursive-500 {
42 font-family: 'Recursive', serif;
43 font-optical-sizing: auto;
44 font-weight: 500;
45 font-style: normal;
46 font-variation-settings:
47 'slnt' 0,
48 'CASL' 0,
49 'CRSV' 0.5,
50 'MONO' 0;
51 }
52 body {
53 /* background: rgb(221, 208, 208); */
54 /* background: #333; */
55 /* font-family: 'Arial'; */
56 font-family: 'Recursive', serif;
57 font-optical-sizing: auto;
58 font-weight: 500;
59 font-style: normal;
60 font-variation-settings:
61 'slnt' 0,
62 'CASL' 0,
63 'CRSV' 0.5,
64 'MONO' 0;
65 /* color: white; */
66 /* font-size: 18px !important; */
67 }
68 .gridify.tiny {
69 background-image:
70 linear-gradient(transparent 11px, rgba(220, 220, 200, 0.8) 12px, transparent 12px),
71 linear-gradient(90deg, transparent 11px, rgba(220, 220, 200, 0.8) 12px, transparent 12px);
72 background-size:
73 100% 12px,
74 12px 100%;
75 }
76
77 .gridify.dots {
78 background-image: radial-gradient(
79 circle at center,
80 rgba(220, 220, 200, 0.8) 1px,
81 transparent 1px
82 );
83 background-size: 24px 24px;
84 }
85
86 h1 {
87 color: grey;
88 }
89
90 .mermaid2 {
91 display: none;
92 }
93
94 .mermaid svg {
95 font-size: 16px !important;
96 font-family: 'Recursive', serif;
97 font-optical-sizing: auto;
98 font-weight: 500;
99 font-style: normal;
100 font-variation-settings:
101 'slnt' 0,
102 'CASL' 0,
103 'CRSV' 0.5,
104 'MONO' 0;
105 }
106
107 pre {
108 width: 100%;
109 /*box-shadow: 4px 4px 0px 0px #0000000F;*/
110 }
111 </style>
112 </head>
113
114 <body class="gridify dots">
115 <div class="w-full h-64">
116 <pre id="diagram4" class="mermaid" style="background: rgb(255, 255, 255)">
117 erDiagram
118 CAR ||--o{ NAMED-DRIVER : allows
119 CAR ::: Pine {
120 string registrationNumber PK "Primary Key<br><strong>Unique registration number</strong>"
121 string make "Car make<br><strong>e.g., Toyota</strong>"
122 string model "Model of the car<br><strong>e.g., Corolla</strong>"
123 string[] parts "List of parts<br><strong>Stored as array</strong>"
124 }
125 PERSON ||--o{ NAMED-DRIVER : is
126 PERSON ::: someclass {
127 string driversLicense PK "The license #<br><strong>Primary Key</strong>"
128 string(99) firstName "Only 99 characters <br>are allowed <br> <strong>e.g., Smith</strong>"
129 string lastName "Last name of person<br><strong>e.g., Smith</strong>"
130 string phone UK "Unique phone number<br><strong>Used for contact</strong>"
131 int age "Age of the person<br><strong>Must be numeric</strong>"
132 }
133 NAMED-DRIVER {
134 string carRegistrationNumber PK, FK, UK, PK "Foreign key to CAR<br><strong>Also part of PK</strong>"
135 string driverLicence PK, FK "Foreign key to PERSON<br><strong>Also part of PK</strong>"
136 }
137 MANUFACTURER only one to zero or more CAR : makesx
138 </pre>
139 <hr />
140 <pre class="mermaid">
141 erDiagram
142 _**testẽζ➕Ø😀㌕ぼ**_ {
143 *__List~List~int~~sdfds__* **driversLicense** PK "***The l😀icense #***"
144 string last*Name*
145 string __phone__ UK
146 *string(99)~T~~~~~~* firstName "Only __99__ <br>characters are a<br>llowed dsfsdfsdfsdfs"
147 int _age_
148 }
149 </pre>
150 </div>
151
152 <script type="module">
153 import mermaid from './mermaid.esm.mjs';
154 import layouts from './mermaid-layout-elk.esm.mjs';
155
156 const staticBellIconPack = {
157 prefix: 'fa6-regular',
158 icons: {
159 bell: {
160 body: '<path fill="currentColor" d="M224 0c-17.7 0-32 14.3-32 32v19.2C119 66 64 130.6 64 208v25.4c0 45.4-15.5 89.5-43.8 124.9L5.3 377c-5.8 7.2-6.9 17.1-2.9 25.4S14.8 416 24 416h400c9.2 0 17.6-5.3 21.6-13.6s2.9-18.2-2.9-25.4l-14.9-18.6c-28.3-35.5-43.8-79.6-43.8-125V208c0-77.4-55-142-128-156.8V32c0-17.7-14.3-32-32-32m0 96c61.9 0 112 50.1 112 112v25.4c0 47.9 13.9 94.6 39.7 134.6H72.3c25.8-40 39.7-86.7 39.7-134.6V208c0-61.9 50.1-112 112-112m64 352H160c0 17 6.7 33.3 18.7 45.3S207 512 224 512s33.3-6.7 45.3-18.7S288 465 288 448"/>',
161 width: 448,
162 },
163 },
164 width: 512,
165 height: 512,
166 };
167
168 mermaid.registerIconPacks([
169 {
170 name: 'logos',
171 loader: () =>
172 fetch('https://unpkg.com/@iconify-json/logos@1/icons.json').then((res) => res.json()),
173 },
174 {
175 name: 'fa',
176 loader: () => staticBellIconPack,
177 },
178 ]);
179 mermaid.registerLayoutLoaders(layouts);
180 mermaid.parseError = function (err, hash) {
181 console.error('Mermaid error: ', err);
182 };
183 window.callback = function () {
184 alert('A callback was triggered');
185 };
186 function callback() {
187 alert('It worked');
188 }
189 await mermaid.initialize({
190 startOnLoad: false,
191
192 theme: 'forest',
193 look: 'classic',
194 layout: 'dagre',
195
196 // theme: 'default',
197 // look: 'classic',
198 flowchart: { titleTopMargin: 10 },
199 fontFamily: 'Recursive',
200 sequence: {
201 actorFontFamily: 'courier',
202 noteFontFamily: 'courier',
203 messageFontFamily: 'courier',
204 },
205 kanban: {
206 htmlLabels: false,
207 },
208 fontSize: 16,
209 logLevel: 0,
210 securityLevel: 'loose',
211 callback,
212 });
213 // setTimeout(() => {
214 mermaid.init(undefined, document.querySelectorAll('.mermaid'));
215 // }, 1000);
216 mermaid.parseError = function (err, hash) {
217 console.error('In parse error:');
218 console.error(err);
219 };
220 </script>
221 </body>
222</html>
223