Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update entity relationship diagram to use new renderer #5965

Open
wants to merge 32 commits into
base: develop
Choose a base branch
from
Open

Update entity relationship diagram to use new renderer #5965

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
32 commits
Select commit Hold shift + click to select a range
10562e7
Initial update to new renderer
yari-dewalt Oct 8, 2024
f2f1ad4
Add erBox shape
yari-dewalt Oct 8, 2024
983c286
Register erBox shape in nodes
yari-dewalt Oct 8, 2024
d2892ea
Add erDiagram specific arrow markers
yari-dewalt Oct 8, 2024
d0dd4e6
Fix cyclical / recursive edges to not show duplicated arrow start mar…
yari-dewalt Oct 8, 2024
cba4752
Fix diagram title not being centered
yari-dewalt Oct 8, 2024
6247bd5
Add test html file
yari-dewalt Oct 8, 2024
df110e5
Add default class to nodes and fix styles
yari-dewalt Oct 8, 2024
29c3293
Update documentation
yari-dewalt Oct 15, 2024
0d664b1
Add tests
yari-dewalt Oct 15, 2024
1d4ea56
Support direction data
yari-dewalt Oct 15, 2024
b5da91b
Update
yari-dewalt Oct 15, 2024
8b169f3
Fix issue with text content using < and >
yari-dewalt Oct 15, 2024
49e23c7
Update parser to include changes
yari-dewalt Oct 15, 2024
69e12fd
Merge branch 'develop' into update-er-diagram
yari-dewalt Oct 16, 2024
5be5aa3
Register erBox shape
yari-dewalt Oct 16, 2024
723b8f1
[autofix.ci] apply automated fixes
autofix-ci[bot] Oct 16, 2024
5d2b0f7
Add fix for er markers when using elk layout
yari-dewalt Oct 16, 2024
df22fb5
Merge branch 'update-er-diagram' of github.com:yari-dewalt/mermaid in…
yari-dewalt Oct 16, 2024
1d68c4f
Update to test elk layout
yari-dewalt Oct 18, 2024
c789172
Update tests
yari-dewalt Oct 18, 2024
b67cdb1
Fix for edge markers displaying above nodes when using elk
yari-dewalt Oct 18, 2024
2771b14
Update tests
yari-dewalt Oct 23, 2024
39a6c30
Fix conflict with style statements
yari-dewalt Oct 23, 2024
8ace44b
Add fix for edge markers showing under node if handDrawn
yari-dewalt Oct 23, 2024
b49afee
Cleanup
yari-dewalt Oct 23, 2024
87fa698
Merge branch 'develop' into update-er-diagram
yari-dewalt Oct 23, 2024
1b34077
Adjust tests
yari-dewalt Oct 23, 2024
01e5346
Update handling of classes and add support for default class
yari-dewalt Oct 24, 2024
5ae5a0c
Merge branch 'develop' into update-er-diagram and fix conflicts
yari-dewalt Oct 28, 2024
9854748
Merge branch 'develop' into update-er-diagram
yari-dewalt Oct 29, 2024
5a2a8f9
Fix typos
yari-dewalt Oct 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
652 changes: 652 additions & 0 deletions cypress/integration/rendering/erDiagram-unified.spec.js
View file
Open in desktop

Large diffs are not rendered by default.

8 changes: 4 additions & 4 deletions cypress/integration/rendering/erDiagram.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,8 +109,8 @@ describe('Entity Relationship Diagram', () => {
const style = svg.attr('style');
expect(style).to.match(/^max-width: [\d.]+px;$/);
const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
// use within because the absolute value can be slightly different depending on the environment ±5%
expect(maxWidthValue).to.be.within(140 * 0.95, 140 * 1.05);
// use within because the absolute value can be slightly different depending on the environment ±6%
expect(maxWidthValue).to.be.within(140 * 0.96, 140 * 1.06);
});
});

Expand All @@ -125,8 +125,8 @@ describe('Entity Relationship Diagram', () => {
);
cy.get('svg').should((svg) => {
const width = parseFloat(svg.attr('width'));
// use within because the absolute value can be slightly different depending on the environment ±5%
expect(width).to.be.within(140 * 0.95, 140 * 1.05);
// use within because the absolute value can be slightly different depending on the environment ±6%
expect(width).to.be.within(140 * 0.96, 140 * 1.06);
// expect(svg).to.have.attr('height', '465');
expect(svg).to.not.have.attr('style');
});
Expand Down
337 changes: 337 additions & 0 deletions cypress/platform/yari2.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,337 @@
<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 {
test test 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>
Loading
Loading