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