mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-11-04 04:44:08 +01:00
338 lines
10 KiB
HTML
338 lines
10 KiB
HTML
<html>
|
|
<body>
|
|
<h1 class="header">Nodes</h1>
|
|
<div class="node-showcase">
|
|
<div class="test">
|
|
<h2>Basic ErNode</h2>
|
|
<pre class="mermaid">
|
|
---
|
|
config:
|
|
htmlLabels: false
|
|
look: handDrawn
|
|
theme: forest
|
|
---
|
|
erDiagram
|
|
_**hiØ**_[*test*] {
|
|
*__List~List~int~~sdfds__* __driversLicense__ PK "***The l😀icense #***"
|
|
*string(99)~T~~~~~~* firstName "Only 99 <br>characters are a<br>llowed dsfsdfsdfsdfs"
|
|
~str ing~ lastName
|
|
string phone UK
|
|
int age
|
|
}
|
|
style PERSON color:red, stroke:blue,fill:#f9f
|
|
classDef test,test2 stroke:red
|
|
class PERSON test,test2
|
|
</pre>
|
|
</div>
|
|
<div class="test">
|
|
<h2>Basic ErNode</h2>
|
|
<pre class="mermaid">
|
|
erDiagram
|
|
CAR {
|
|
string registrationNumber
|
|
string make
|
|
string model
|
|
}
|
|
PERSON {
|
|
string firstName
|
|
string lastName
|
|
int age
|
|
}
|
|
|
|
CAR:::someclass
|
|
PERSON:::anotherclass,someclass
|
|
|
|
classDef someclass fill:#f96
|
|
classDef anotherclass color:blue
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
<h1 class="header">Diagram Testing</h1>
|
|
<div class="diagram-showcase">
|
|
<div class="test">
|
|
<h2>Basic Relationship</h2>
|
|
<pre class="mermaid">
|
|
---
|
|
config:
|
|
htmlLabels: false
|
|
layout: elk
|
|
look: handDrawn
|
|
theme: forest
|
|
---
|
|
erDiagram
|
|
"hi" }o..o{ ORDER : places
|
|
style hi fill:lightblue
|
|
</pre>
|
|
</div>
|
|
<div class="test">
|
|
<h2>Basic Relationship</h2>
|
|
<pre class="mermaid">
|
|
---
|
|
config:
|
|
htmlLabels: false
|
|
look: handDrawn
|
|
layout: elk
|
|
---
|
|
erDiagram
|
|
CAR ||--|{ NAMED-DRIVER : allows
|
|
PERSON ||..o{ NAMED-DRIVER : is
|
|
</pre>
|
|
</div>
|
|
<div class="test">
|
|
<h2>Basic Relationship</h2>
|
|
<pre class="mermaid">
|
|
---
|
|
config:
|
|
htmlLabels: true
|
|
look: handDrawn
|
|
theme: forest
|
|
---
|
|
erDiagram
|
|
CAR ||--o{ NAMED-DRIVER : allows
|
|
CAR {
|
|
text text PK "comment"
|
|
string make
|
|
string model
|
|
string[] parts
|
|
}
|
|
PERSON ||--o{ NAMED-DRIVER : is
|
|
PERSON ||--o{ CAR : is
|
|
PERSON {
|
|
string driversLicense PK "The license #"
|
|
string(99) firstName "Only 99 characters are allowed"
|
|
string lastName
|
|
string phone UK
|
|
int age
|
|
}
|
|
NAMED-DRIVER {
|
|
string carRegistrationNumber PK, FK
|
|
string driverLicence PK, FK
|
|
}
|
|
MANUFACTURER only one to zero or more CAR : makes
|
|
</pre>
|
|
</div>
|
|
<div class="test">
|
|
<h2>Basic Relationship</h2>
|
|
<pre class="mermaid">
|
|
---
|
|
title: simple ER diagram
|
|
config:
|
|
theme: forest
|
|
---
|
|
erDiagram
|
|
direction TB
|
|
p[Pers😀on] {
|
|
string firstName
|
|
string lastName
|
|
}
|
|
a["Customer Account"] {
|
|
string email
|
|
}
|
|
p ||--o| a : has
|
|
|
|
</pre>
|
|
</div>
|
|
<div class="test">
|
|
<h2>Basic Relationship</h2>
|
|
<pre class="mermaid">
|
|
---
|
|
config:
|
|
layout: elk
|
|
---
|
|
erDiagram
|
|
CUSTOMER }|..|{ DELIVERY-ADDRESS : has
|
|
CUSTOMER ||--o{ ORDER : places
|
|
CUSTOMER ||--o{ INVOICE : "liable for"
|
|
DELIVERY-ADDRESS ||--o{ ORDER : receives
|
|
INVOICE ||--|{ ORDER : covers
|
|
ORDER ||--|{ ORDER-ITEM : includes
|
|
PRODUCT-CATEGORY ||--|{ PRODUCT : contains
|
|
PRODUCT ||--o{ ORDER-ITEM : "ordered in"
|
|
</pre>
|
|
</div>
|
|
<div class="test">
|
|
<h2>Basic Relationship</h2>
|
|
<pre class="mermaid">
|
|
---
|
|
config:
|
|
layout: elk
|
|
---
|
|
erDiagram
|
|
rental{
|
|
~timestamp with time zone~ rental_date "NN"
|
|
~integer~ inventory_id "NN"
|
|
~integer~ customer_id "NN"
|
|
~timestamp with time zone~ return_date
|
|
~integer~ staff_id "NN"
|
|
~integer~ rental_id "NN"
|
|
~timestamp with time zone~ last_update "NN"
|
|
}
|
|
film_actor{
|
|
~integer~ actor_id "NN"
|
|
~integer~ film_id "NN"
|
|
~timestamp with time zone~ last_update "NN"
|
|
}
|
|
film{
|
|
~text~ title "NN"
|
|
~text~ description
|
|
~public.year~ release_year
|
|
~integer~ language_id "NN"
|
|
~integer~ original_language_id
|
|
~smallint~ length
|
|
~text[]~ special_features
|
|
~tsvector~ fulltext "NN"
|
|
~integer~ film_id "NN"
|
|
~smallint~ rental_duration "NN"
|
|
~numeric(4,2)~ rental_rate "NN"
|
|
~numeric(5,2)~ replacement_cost "NN"
|
|
~public.mpaa_rating~ rating
|
|
~timestamp with time zone~ last_update "NN"
|
|
}
|
|
customer{
|
|
~integer~ store_id "NN"
|
|
~text~ first_name "NN"
|
|
~text~ last_name "NN"
|
|
~text~ email
|
|
~integer~ address_id "NN"
|
|
~integer~ active
|
|
~integer~ customer_id "NN"
|
|
~boolean~ activebool "NN"
|
|
~date~ create_date "NN"
|
|
~timestamp with time zone~ last_update
|
|
}
|
|
film_category{
|
|
~integer~ film_id "NN"
|
|
~integer~ category_id "NN"
|
|
~timestamp with time zone~ last_update "NN"
|
|
}
|
|
actor{
|
|
~text~ first_name "NN"
|
|
~text~ last_name "NN"
|
|
~integer~ actor_id "NN"
|
|
~timestamp with time zone~ last_update "NN"
|
|
}
|
|
store{
|
|
~integer~ manager_staff_id "NN"
|
|
~integer~ address_id "NN"
|
|
~integer~ store_id "NN"
|
|
~timestamp with time zone~ last_update "NN"
|
|
}
|
|
city{
|
|
~text~ city "NN"
|
|
~integer~ country_id "NN"
|
|
~integer~ city_id "NN"
|
|
~timestamp with time zone~ last_update "NN"
|
|
}
|
|
language{
|
|
~character(20)~ name "NN"
|
|
~integer~ language_id "NN"
|
|
~timestamp with time zone~ last_update "NN"
|
|
}
|
|
payment{
|
|
~integer~ customer_id "NN"
|
|
~integer~ staff_id "NN"
|
|
~integer~ rental_id "NN"
|
|
~numeric(5,2)~ amount "NN"
|
|
~timestamp with time zone~ payment_date "NN"
|
|
~integer~ payment_id "NN"
|
|
}
|
|
category{
|
|
~text~ name "NN"
|
|
~integer~ category_id "NN"
|
|
~timestamp with time zone~ last_update "NN"
|
|
}
|
|
inventory{
|
|
~integer~ film_id "NN"
|
|
~integer~ store_id "NN"
|
|
~integer~ inventory_id "NN"
|
|
~timestamp with time zone~ last_update "NN"
|
|
}
|
|
address{
|
|
~text~ address "NN"
|
|
~text~ address2
|
|
~text~ district "NN"
|
|
~integer~ city_id "NN"
|
|
~text~ postal_code
|
|
~text~ phone "NN"
|
|
~integer~ address_id "NN"
|
|
~timestamp with time zone~ last_update "NN"
|
|
}
|
|
staff{
|
|
~text~ first_name "NN"
|
|
~text~ last_name "NN"
|
|
~integer~ address_id "NN"
|
|
~text~ email
|
|
~integer~ store_id "NN"
|
|
~text~ username "NN"
|
|
~text~ password
|
|
~bytea~ picture
|
|
~integer~ staff_id "NN"
|
|
~boolean~ active "NN"
|
|
~timestamp with time zone~ last_update "NN"
|
|
}
|
|
country{
|
|
~text~ country "NN"
|
|
~integer~ country_id "NN"
|
|
~timestamp with time zone~ last_update "NN"
|
|
}
|
|
film_actor }|..|| film : film_actor_film_id_fkey
|
|
film_actor }|..|| actor : film_actor_actor_id_fkey
|
|
address }|..|| city : address_city_id_fkey
|
|
city }|..|| country : city_country_id_fkey
|
|
customer }|..|| store : customer_store_id_fkey
|
|
customer }|..|| address : customer_address_id_fkey
|
|
film }|..|| language : film_original_language_id_fkey
|
|
film }|..|| language : film_language_id_fkey
|
|
film_category }|..|| film : film_category_film_id_fkey
|
|
film_category }|..|| category : film_category_category_id_fkey
|
|
inventory }|..|| store : inventory_store_id_fkey
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="module">
|
|
import mermaid from './mermaid.esm.mjs';
|
|
import layouts from './mermaid-layout-elk.esm.mjs';
|
|
mermaid.registerLayoutLoaders(layouts);
|
|
mermaid.parseError = function (err, hash) {
|
|
console.error('Mermaid error: ', err);
|
|
};
|
|
mermaid.initialize();
|
|
mermaid.parseError = function (err, hash) {
|
|
console.error('In parse error:');
|
|
console.error(err);
|
|
};
|
|
</script>
|
|
</body>
|
|
<style>
|
|
.header {
|
|
text-decoration: underline;
|
|
text-align: center;
|
|
}
|
|
.node-showcase {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
.test {
|
|
flex-grow: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 0.4rem;
|
|
}
|
|
.test > h2 {
|
|
margin: 0;
|
|
text-align: center;
|
|
}
|
|
.test > p {
|
|
margin-top: -6px;
|
|
color: gray;
|
|
}
|
|
|
|
.diagram-showcase {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
}
|
|
</style>
|
|
</html>
|