10.1 KB338 lines
Blame
1<html>
2 <body>
3 <h1 class="header">Nodes</h1>
4 <div class="node-showcase">
5 <div class="test">
6 <h2>Basic ErNode</h2>
7 <pre class="mermaid">
8 ---
9 config:
10 htmlLabels: false
11 look: handDrawn
12 theme: forest
13 ---
14 erDiagram
15 _**hiØ**_[*test*] {
16 *__List~List~int~~sdfds__* __driversLicense__ PK "***The l😀icense #***"
17 *string(99)~T~~~~~~* firstName "Only 99 <br>characters are a<br>llowed dsfsdfsdfsdfs"
18 ~str ing~ lastName
19 string phone UK
20 int age
21 }
22 style PERSON color:red, stroke:blue,fill:#f9f
23 classDef test,test2 stroke:red
24 class PERSON test,test2
25 </pre>
26 </div>
27 <div class="test">
28 <h2>Basic ErNode</h2>
29 <pre class="mermaid">
30 erDiagram
31 CAR {
32 string registrationNumber
33 string make
34 string model
35 }
36 PERSON {
37 string firstName
38 string lastName
39 int age
40 }
41
42 CAR:::someclass
43 PERSON:::anotherclass,someclass
44
45 classDef someclass fill:#f96
46 classDef anotherclass color:blue
47 </pre>
48 </div>
49 </div>
50 <h1 class="header">Diagram Testing</h1>
51 <div class="diagram-showcase">
52 <div class="test">
53 <h2>Basic Relationship</h2>
54 <pre class="mermaid">
55 ---
56 config:
57 htmlLabels: false
58 layout: elk
59 look: handDrawn
60 theme: forest
61 ---
62 erDiagram
63 "hi" }o..o{ ORDER : places
64 style hi fill:lightblue
65 </pre>
66 </div>
67 <div class="test">
68 <h2>Basic Relationship</h2>
69 <pre class="mermaid">
70 ---
71 config:
72 htmlLabels: false
73 look: handDrawn
74 layout: elk
75 ---
76 erDiagram
77 CAR ||--|{ NAMED-DRIVER : allows
78 PERSON ||..o{ NAMED-DRIVER : is
79 </pre>
80 </div>
81 <div class="test">
82 <h2>Basic Relationship</h2>
83 <pre class="mermaid">
84 ---
85 config:
86 htmlLabels: true
87 look: handDrawn
88 theme: forest
89 ---
90 erDiagram
91 CAR ||--o{ NAMED-DRIVER : allows
92 CAR {
93 text text PK "comment"
94 string make
95 string model
96 string[] parts
97 }
98 PERSON ||--o{ NAMED-DRIVER : is
99 PERSON ||--o{ CAR : is
100 PERSON {
101 string driversLicense PK "The license #"
102 string(99) firstName "Only 99 characters are allowed"
103 string lastName
104 string phone UK
105 int age
106 }
107 NAMED-DRIVER {
108 string carRegistrationNumber PK, FK
109 string driverLicence PK, FK
110 }
111 MANUFACTURER only one to zero or more CAR : makes
112 </pre>
113 </div>
114 <div class="test">
115 <h2>Basic Relationship</h2>
116 <pre class="mermaid">
117 ---
118 title: simple ER diagram
119 config:
120 theme: forest
121 ---
122 erDiagram
123 direction TB
124 p[Pers😀on] {
125 string firstName
126 string lastName
127 }
128 a["Customer Account"] {
129 string email
130 }
131 p ||--o| a : has
132
133 </pre>
134 </div>
135 <div class="test">
136 <h2>Basic Relationship</h2>
137 <pre class="mermaid">
138 ---
139 config:
140 layout: elk
141 ---
142 erDiagram
143 CUSTOMER }|..|{ DELIVERY-ADDRESS : has
144 CUSTOMER ||--o{ ORDER : places
145 CUSTOMER ||--o{ INVOICE : "liable for"
146 DELIVERY-ADDRESS ||--o{ ORDER : receives
147 INVOICE ||--|{ ORDER : covers
148 ORDER ||--|{ ORDER-ITEM : includes
149 PRODUCT-CATEGORY ||--|{ PRODUCT : contains
150 PRODUCT ||--o{ ORDER-ITEM : "ordered in"
151 </pre>
152 </div>
153 <div class="test">
154 <h2>Basic Relationship</h2>
155 <pre class="mermaid">
156---
157 config:
158 layout: elk
159---
160 erDiagram
161 rental{
162 ~timestamp with time zone~ rental_date "NN"
163 ~integer~ inventory_id "NN"
164 ~integer~ customer_id "NN"
165 ~timestamp with time zone~ return_date
166 ~integer~ staff_id "NN"
167 ~integer~ rental_id "NN"
168 ~timestamp with time zone~ last_update "NN"
169 }
170 film_actor{
171 ~integer~ actor_id "NN"
172 ~integer~ film_id "NN"
173 ~timestamp with time zone~ last_update "NN"
174 }
175 film{
176 ~text~ title "NN"
177 ~text~ description
178 ~public.year~ release_year
179 ~integer~ language_id "NN"
180 ~integer~ original_language_id
181 ~smallint~ length
182 ~text[]~ special_features
183 ~tsvector~ fulltext "NN"
184 ~integer~ film_id "NN"
185 ~smallint~ rental_duration "NN"
186 ~numeric(4,2)~ rental_rate "NN"
187 ~numeric(5,2)~ replacement_cost "NN"
188 ~public.mpaa_rating~ rating
189 ~timestamp with time zone~ last_update "NN"
190 }
191 customer{
192 ~integer~ store_id "NN"
193 ~text~ first_name "NN"
194 ~text~ last_name "NN"
195 ~text~ email
196 ~integer~ address_id "NN"
197 ~integer~ active
198 ~integer~ customer_id "NN"
199 ~boolean~ activebool "NN"
200 ~date~ create_date "NN"
201 ~timestamp with time zone~ last_update
202 }
203 film_category{
204 ~integer~ film_id "NN"
205 ~integer~ category_id "NN"
206 ~timestamp with time zone~ last_update "NN"
207 }
208 actor{
209 ~text~ first_name "NN"
210 ~text~ last_name "NN"
211 ~integer~ actor_id "NN"
212 ~timestamp with time zone~ last_update "NN"
213 }
214 store{
215 ~integer~ manager_staff_id "NN"
216 ~integer~ address_id "NN"
217 ~integer~ store_id "NN"
218 ~timestamp with time zone~ last_update "NN"
219 }
220 city{
221 ~text~ city "NN"
222 ~integer~ country_id "NN"
223 ~integer~ city_id "NN"
224 ~timestamp with time zone~ last_update "NN"
225 }
226 language{
227 ~character(20)~ name "NN"
228 ~integer~ language_id "NN"
229 ~timestamp with time zone~ last_update "NN"
230 }
231 payment{
232 ~integer~ customer_id "NN"
233 ~integer~ staff_id "NN"
234 ~integer~ rental_id "NN"
235 ~numeric(5,2)~ amount "NN"
236 ~timestamp with time zone~ payment_date "NN"
237 ~integer~ payment_id "NN"
238 }
239 category{
240 ~text~ name "NN"
241 ~integer~ category_id "NN"
242 ~timestamp with time zone~ last_update "NN"
243 }
244 inventory{
245 ~integer~ film_id "NN"
246 ~integer~ store_id "NN"
247 ~integer~ inventory_id "NN"
248 ~timestamp with time zone~ last_update "NN"
249 }
250 address{
251 ~text~ address "NN"
252 ~text~ address2
253 ~text~ district "NN"
254 ~integer~ city_id "NN"
255 ~text~ postal_code
256 ~text~ phone "NN"
257 ~integer~ address_id "NN"
258 ~timestamp with time zone~ last_update "NN"
259 }
260 staff{
261 ~text~ first_name "NN"
262 ~text~ last_name "NN"
263 ~integer~ address_id "NN"
264 ~text~ email
265 ~integer~ store_id "NN"
266 ~text~ username "NN"
267 ~text~ password
268 ~bytea~ picture
269 ~integer~ staff_id "NN"
270 ~boolean~ active "NN"
271 ~timestamp with time zone~ last_update "NN"
272 }
273 country{
274 ~text~ country "NN"
275 ~integer~ country_id "NN"
276 ~timestamp with time zone~ last_update "NN"
277 }
278 film_actor }|..|| film : film_actor_film_id_fkey
279 film_actor }|..|| actor : film_actor_actor_id_fkey
280 address }|..|| city : address_city_id_fkey
281 city }|..|| country : city_country_id_fkey
282 customer }|..|| store : customer_store_id_fkey
283 customer }|..|| address : customer_address_id_fkey
284 film }|..|| language : film_original_language_id_fkey
285 film }|..|| language : film_language_id_fkey
286 film_category }|..|| film : film_category_film_id_fkey
287 film_category }|..|| category : film_category_category_id_fkey
288 inventory }|..|| store : inventory_store_id_fkey
289 </pre>
290 </div>
291 </div>
292
293 <script type="module">
294 import mermaid from './mermaid.esm.mjs';
295 import layouts from './mermaid-layout-elk.esm.mjs';
296 mermaid.registerLayoutLoaders(layouts);
297 mermaid.parseError = function (err, hash) {
298 console.error('Mermaid error: ', err);
299 };
300 mermaid.initialize();
301 mermaid.parseError = function (err, hash) {
302 console.error('In parse error:');
303 console.error(err);
304 };
305 </script>
306 </body>
307 <style>
308 .header {
309 text-decoration: underline;
310 text-align: center;
311 }
312 .node-showcase {
313 display: grid;
314 grid-template-columns: 1fr 1fr;
315 }
316 .test {
317 flex-grow: 1;
318 display: flex;
319 flex-direction: column;
320 align-items: center;
321 gap: 0.4rem;
322 }
323 .test > h2 {
324 margin: 0;
325 text-align: center;
326 }
327 .test > p {
328 margin-top: -6px;
329 color: gray;
330 }
331
332 .diagram-showcase {
333 display: grid;
334 grid-template-columns: 1fr;
335 }
336 </style>
337</html>
338