mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-08-15 06:19:24 +02:00
Merge branch 'develop' into feature/3508_color-user-journey-title
This commit is contained in:
Shahir Ahmed
652
cypress/integration/rendering/erDiagram-unified.spec.js
Normal file
652
cypress/integration/rendering/erDiagram-unified.spec.js
Normal file
@@ -0,0 +1,652 @@
|
||||
import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
|
||||
|
||||
const testOptions = [
|
||||
{ description: '', options: { logLevel: 1 } },
|
||||
{ description: 'ELK: ', options: { logLevel: 1, layout: 'elk' } },
|
||||
{ description: 'HD: ', options: { logLevel: 1, look: 'handDrawn' } },
|
||||
];
|
||||
|
||||
describe('Entity Relationship Diagram Unified', () => {
|
||||
testOptions.forEach(({ description, options }) => {
|
||||
it(`${description}should render a simple ER diagram`, () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
erDiagram
|
||||
CUSTOMER ||--o{ ORDER : places
|
||||
ORDER ||--|{ LINE-ITEM : contains
|
||||
`,
|
||||
options
|
||||
);
|
||||
});
|
||||
|
||||
it(`${description}should render a simple ER diagram without htmlLabels`, () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
erDiagram
|
||||
CUSTOMER ||--o{ ORDER : places
|
||||
ORDER ||--|{ LINE-ITEM : contains
|
||||
`,
|
||||
{ ...options, htmlLabels: false }
|
||||
);
|
||||
});
|
||||
|
||||
it(`${description}should render an ER diagram with a recursive relationship`, () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
erDiagram
|
||||
CUSTOMER ||..o{ CUSTOMER : refers
|
||||
CUSTOMER ||--o{ ORDER : places
|
||||
ORDER ||--|{ LINE-ITEM : contains
|
||||
`,
|
||||
options
|
||||
);
|
||||
});
|
||||
|
||||
it(`${description}should render an ER diagram with multiple relationships between the same two entities`, () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
erDiagram
|
||||
CUSTOMER ||--|{ ADDRESS : "invoiced at"
|
||||
CUSTOMER ||--|{ ADDRESS : "receives goods at"
|
||||
`,
|
||||
options
|
||||
);
|
||||
});
|
||||
|
||||
it(`${description}should render a cyclical ER diagram`, () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
erDiagram
|
||||
A ||--|{ B : likes
|
||||
B ||--|{ C : likes
|
||||
C ||--|{ A : likes
|
||||
`,
|
||||
options
|
||||
);
|
||||
});
|
||||
|
||||
it(`${description}should render a not-so-simple ER diagram`, () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
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"
|
||||
`,
|
||||
options
|
||||
);
|
||||
});
|
||||
|
||||
it(`${description}should render a not-so-simple ER diagram without htmlLabels`, () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
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"
|
||||
`,
|
||||
{ ...options, htmlLabels: false }
|
||||
);
|
||||
});
|
||||
|
||||
it(`${description}should render multiple ER diagrams`, () => {
|
||||
imgSnapshotTest(
|
||||
[
|
||||
`
|
||||
erDiagram
|
||||
CUSTOMER ||--o{ ORDER : places
|
||||
ORDER ||--|{ LINE-ITEM : contains
|
||||
`,
|
||||
`
|
||||
erDiagram
|
||||
CUSTOMER ||--o{ ORDER : places
|
||||
ORDER ||--|{ LINE-ITEM : contains
|
||||
`,
|
||||
],
|
||||
options
|
||||
);
|
||||
});
|
||||
|
||||
it(`${description}should render an ER diagram with blank or empty labels`, () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
erDiagram
|
||||
BOOK }|..|{ AUTHOR : ""
|
||||
BOOK }|..|{ GENRE : " "
|
||||
AUTHOR }|..|{ GENRE : " "
|
||||
`,
|
||||
options
|
||||
);
|
||||
});
|
||||
|
||||
it(`${description}should render entities that have no relationships`, () => {
|
||||
renderGraph(
|
||||
`
|
||||
erDiagram
|
||||
DEAD_PARROT
|
||||
HERMIT
|
||||
RECLUSE
|
||||
SOCIALITE }o--o{ SOCIALITE : "interacts with"
|
||||
RECLUSE }o--o{ SOCIALITE : avoids
|
||||
`,
|
||||
options
|
||||
);
|
||||
});
|
||||
|
||||
it(`${description}should render entities with and without attributes`, () => {
|
||||
renderGraph(
|
||||
`
|
||||
erDiagram
|
||||
BOOK { string title }
|
||||
AUTHOR }|..|{ BOOK : writes
|
||||
BOOK { float price }
|
||||
`,
|
||||
options
|
||||
);
|
||||
});
|
||||
|
||||
it(`${description}should render entities with generic and array attributes`, () => {
|
||||
renderGraph(
|
||||
`
|
||||
erDiagram
|
||||
BOOK {
|
||||
string title
|
||||
string[] authors
|
||||
type~T~ type
|
||||
}
|
||||
`,
|
||||
options
|
||||
);
|
||||
});
|
||||
|
||||
it(`${description}should render entities with generic and array attributes without htmlLabels`, () => {
|
||||
renderGraph(
|
||||
`
|
||||
erDiagram
|
||||
BOOK {
|
||||
string title
|
||||
string[] authors
|
||||
type~T~ type
|
||||
}
|
||||
`,
|
||||
{ ...options, htmlLabels: false }
|
||||
);
|
||||
});
|
||||
|
||||
it(`${description}should render entities with length in attributes type`, () => {
|
||||
renderGraph(
|
||||
`
|
||||
erDiagram
|
||||
CLUSTER {
|
||||
varchar(99) name
|
||||
string(255) description
|
||||
}
|
||||
`,
|
||||
options
|
||||
);
|
||||
});
|
||||
|
||||
it(`${description}should render entities with length in attributes type without htmlLabels`, () => {
|
||||
renderGraph(
|
||||
`
|
||||
erDiagram
|
||||
CLUSTER {
|
||||
varchar(99) name
|
||||
string(255) description
|
||||
}
|
||||
`,
|
||||
{ ...options, htmlLabels: false }
|
||||
);
|
||||
});
|
||||
|
||||
it(`${description}should render entities and attributes with big and small entity names`, () => {
|
||||
renderGraph(
|
||||
`
|
||||
erDiagram
|
||||
PRIVATE_FINANCIAL_INSTITUTION {
|
||||
string name
|
||||
int turnover
|
||||
}
|
||||
PRIVATE_FINANCIAL_INSTITUTION ||..|{ EMPLOYEE : employs
|
||||
EMPLOYEE { bool officer_of_firm }
|
||||
`,
|
||||
options
|
||||
);
|
||||
});
|
||||
|
||||
it(`${description}should render entities and attributes with big and small entity names without htmlLabels`, () => {
|
||||
renderGraph(
|
||||
`
|
||||
erDiagram
|
||||
PRIVATE_FINANCIAL_INSTITUTION {
|
||||
string name
|
||||
int turnover
|
||||
}
|
||||
PRIVATE_FINANCIAL_INSTITUTION ||..|{ EMPLOYEE : employs
|
||||
EMPLOYEE { bool officer_of_firm }
|
||||
`,
|
||||
{ ...options, htmlLabels: false }
|
||||
);
|
||||
});
|
||||
|
||||
it(`${description}should render entities with attributes that begin with asterisk`, () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
erDiagram
|
||||
BOOK {
|
||||
int *id
|
||||
string name
|
||||
varchar(99) summary
|
||||
}
|
||||
BOOK }o..o{ STORE : soldBy
|
||||
STORE {
|
||||
int *id
|
||||
string name
|
||||
varchar(50) address
|
||||
}
|
||||
`,
|
||||
options
|
||||
);
|
||||
});
|
||||
|
||||
it(`${description}should render entities with attributes that begin with asterisk without htmlLabels`, () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
erDiagram
|
||||
BOOK {
|
||||
int *id
|
||||
string name
|
||||
varchar(99) summary
|
||||
}
|
||||
BOOK }o..o{ STORE : soldBy
|
||||
STORE {
|
||||
int *id
|
||||
string name
|
||||
varchar(50) address
|
||||
}
|
||||
`,
|
||||
{ ...options, htmlLabels: false }
|
||||
);
|
||||
});
|
||||
|
||||
it(`${description}should render entities with keys`, () => {
|
||||
renderGraph(
|
||||
`
|
||||
erDiagram
|
||||
AUTHOR_WITH_LONG_ENTITY_NAME {
|
||||
string name PK
|
||||
}
|
||||
AUTHOR_WITH_LONG_ENTITY_NAME }|..|{ BOOK : writes
|
||||
BOOK {
|
||||
float price
|
||||
string author FK
|
||||
string title PK
|
||||
}
|
||||
`,
|
||||
options
|
||||
);
|
||||
});
|
||||
|
||||
it(`${description}should render entities with keys without htmlLabels`, () => {
|
||||
renderGraph(
|
||||
`
|
||||
erDiagram
|
||||
AUTHOR_WITH_LONG_ENTITY_NAME {
|
||||
string name PK
|
||||
}
|
||||
AUTHOR_WITH_LONG_ENTITY_NAME }|..|{ BOOK : writes
|
||||
BOOK {
|
||||
float price
|
||||
string author FK
|
||||
string title PK
|
||||
}
|
||||
`,
|
||||
{ ...options, htmlLabels: false }
|
||||
);
|
||||
});
|
||||
|
||||
it(`${description}should render entities with comments`, () => {
|
||||
renderGraph(
|
||||
`
|
||||
erDiagram
|
||||
AUTHOR_WITH_LONG_ENTITY_NAME {
|
||||
string name "comment"
|
||||
}
|
||||
AUTHOR_WITH_LONG_ENTITY_NAME }|..|{ BOOK : writes
|
||||
BOOK {
|
||||
string author
|
||||
string title "author comment"
|
||||
float price "price comment"
|
||||
}
|
||||
`,
|
||||
options
|
||||
);
|
||||
});
|
||||
|
||||
it(`${description}should render entities with comments without htmlLabels`, () => {
|
||||
renderGraph(
|
||||
`
|
||||
erDiagram
|
||||
AUTHOR_WITH_LONG_ENTITY_NAME {
|
||||
string name "comment"
|
||||
}
|
||||
AUTHOR_WITH_LONG_ENTITY_NAME }|..|{ BOOK : writes
|
||||
BOOK {
|
||||
string author
|
||||
string title "author comment"
|
||||
float price "price comment"
|
||||
}
|
||||
`,
|
||||
{ ...options, htmlLabels: false }
|
||||
);
|
||||
});
|
||||
|
||||
it(`${description}should render entities with keys and comments`, () => {
|
||||
renderGraph(
|
||||
`
|
||||
erDiagram
|
||||
AUTHOR_WITH_LONG_ENTITY_NAME {
|
||||
string name PK "comment"
|
||||
}
|
||||
AUTHOR_WITH_LONG_ENTITY_NAME }|..|{ BOOK : writes
|
||||
BOOK {
|
||||
string description
|
||||
float price "price comment"
|
||||
string title PK "title comment"
|
||||
string author FK
|
||||
}
|
||||
`,
|
||||
options
|
||||
);
|
||||
});
|
||||
|
||||
it(`${description}should render entities with keys and comments without htmlLabels`, () => {
|
||||
renderGraph(
|
||||
`
|
||||
erDiagram
|
||||
AUTHOR_WITH_LONG_ENTITY_NAME {
|
||||
string name PK "comment"
|
||||
}
|
||||
AUTHOR_WITH_LONG_ENTITY_NAME }|..|{ BOOK : writes
|
||||
BOOK {
|
||||
string description
|
||||
float price "price comment"
|
||||
string title PK "title comment"
|
||||
string author FK
|
||||
}
|
||||
`,
|
||||
{ ...options, htmlLabels: false }
|
||||
);
|
||||
});
|
||||
|
||||
it(`${description}should render entities with aliases`, () => {
|
||||
renderGraph(
|
||||
`
|
||||
erDiagram
|
||||
T1 one or zero to one or more T2 : test
|
||||
T2 one or many optionally to zero or one T3 : test
|
||||
T3 zero or more to zero or many T4 : test
|
||||
T4 many(0) to many(1) T5 : test
|
||||
T5 many optionally to one T6 : test
|
||||
T6 only one optionally to only one T1 : test
|
||||
T4 0+ to 1+ T6 : test
|
||||
T1 1 to 1 T3 : test
|
||||
`,
|
||||
options
|
||||
);
|
||||
});
|
||||
|
||||
it(`${description}should render a simple ER diagram with a title`, () => {
|
||||
imgSnapshotTest(
|
||||
`---
|
||||
title: simple ER diagram
|
||||
---
|
||||
erDiagram
|
||||
CUSTOMER ||--o{ ORDER : places
|
||||
ORDER ||--|{ LINE-ITEM : contains
|
||||
`,
|
||||
options
|
||||
);
|
||||
});
|
||||
|
||||
it(`${description}should render entities with entity name aliases`, () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
erDiagram
|
||||
p[Person] {
|
||||
varchar(64) firstName
|
||||
varchar(64) lastName
|
||||
}
|
||||
c["Customer Account"] {
|
||||
varchar(128) email
|
||||
}
|
||||
p ||--o| c : has
|
||||
`,
|
||||
options
|
||||
);
|
||||
});
|
||||
|
||||
it(`${description}should render relationship labels with line breaks`, () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
erDiagram
|
||||
p[Person] {
|
||||
string firstName
|
||||
string lastName
|
||||
}
|
||||
a["Customer Account"] {
|
||||
string email
|
||||
}
|
||||
|
||||
b["Customer Account Secondary"] {
|
||||
string email
|
||||
}
|
||||
|
||||
c["Customer Account Tertiary"] {
|
||||
string email
|
||||
}
|
||||
|
||||
d["Customer Account Nth"] {
|
||||
string email
|
||||
}
|
||||
|
||||
p ||--o| a : "has<br />one"
|
||||
p ||--o| b : "has<br />one<br />two"
|
||||
p ||--o| c : "has<br />one<br/>two<br />three"
|
||||
p ||--o| d : "has<br />one<br />two<br/>three<br />...<br/>Nth"
|
||||
`,
|
||||
options
|
||||
);
|
||||
});
|
||||
|
||||
it(`${description}should render an ER diagram with unicode text`, () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
erDiagram
|
||||
_**testẽζ➕Ø😀㌕ぼ**_ {
|
||||
*__List~List~int~~sdfds__* **driversLicense** PK "***The l😀icense #***"
|
||||
*string(99)~T~~~~~~* firstName "Only __99__ <br>characters are a<br>llowed dsfsdfsdfsdfs"
|
||||
string last*Name*
|
||||
string __phone__ UK
|
||||
int _age_
|
||||
}
|
||||
`,
|
||||
options
|
||||
);
|
||||
});
|
||||
|
||||
it(`${description}should render an ER diagram with unicode text without htmlLabels`, () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
erDiagram
|
||||
_**testẽζ➕Ø😀㌕ぼ**_ {
|
||||
*__List~List~int~~sdfds__* **driversLicense** PK "***The l😀icense #***"
|
||||
*string(99)~T~~~~~~* firstName "Only __99__ <br>characters are a<br>llowed dsfsdfsdfsdfs"
|
||||
string last*Name*
|
||||
string __phone__ UK
|
||||
int _age_
|
||||
}
|
||||
`,
|
||||
{ ...options, htmlLabels: false }
|
||||
);
|
||||
});
|
||||
|
||||
it(`${description}should render an ER diagram with relationships with unicode text`, () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
erDiagram
|
||||
person[😀] {
|
||||
string *first*Name
|
||||
string _**last**Name_
|
||||
}
|
||||
a["*Customer Account*"] {
|
||||
**string** ema*i*l
|
||||
}
|
||||
person ||--o| a : __hẽ😀__
|
||||
`,
|
||||
options
|
||||
);
|
||||
});
|
||||
|
||||
it(`${description}should render an ER diagram with relationships with unicode text without htmlLabels`, () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
erDiagram
|
||||
person[😀] {
|
||||
string *first*Name
|
||||
string _**last**Name_
|
||||
}
|
||||
a["*Customer Account*"] {
|
||||
**string** ema*i*l
|
||||
}
|
||||
person ||--o| a : __hẽ😀__
|
||||
`,
|
||||
{ ...options, htmlLabels: false }
|
||||
);
|
||||
});
|
||||
|
||||
it(`${description}should render an ER diagram with TB direction`, () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
erDiagram
|
||||
direction TB
|
||||
CAR ||--|{ NAMED-DRIVER : allows
|
||||
PERSON ||..o{ NAMED-DRIVER : is
|
||||
`,
|
||||
options
|
||||
);
|
||||
});
|
||||
|
||||
it(`${description}should render an ER diagram with BT direction`, () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
erDiagram
|
||||
direction BT
|
||||
CAR ||--|{ NAMED-DRIVER : allows
|
||||
PERSON ||..o{ NAMED-DRIVER : is
|
||||
`,
|
||||
options
|
||||
);
|
||||
});
|
||||
|
||||
it(`${description}should render an ER diagram with LR direction`, () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
erDiagram
|
||||
direction LR
|
||||
CAR ||--|{ NAMED-DRIVER : allows
|
||||
PERSON ||..o{ NAMED-DRIVER : is
|
||||
`,
|
||||
options
|
||||
);
|
||||
});
|
||||
|
||||
it(`${description}should render an ER diagram with RL direction`, () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
erDiagram
|
||||
direction RL
|
||||
CAR ||--|{ NAMED-DRIVER : allows
|
||||
PERSON ||..o{ NAMED-DRIVER : is
|
||||
`,
|
||||
options
|
||||
);
|
||||
});
|
||||
|
||||
it(`${description}should render entities with styles applied from style statement`, () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
erDiagram
|
||||
c[CUSTOMER]
|
||||
p[PERSON]
|
||||
style c,p fill:#f9f,stroke:blue, color:grey, font-size:24px,font-weight:bold
|
||||
`,
|
||||
options
|
||||
);
|
||||
});
|
||||
|
||||
it(`${description}should render entities with styles applied from style statement without htmlLabels`, () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
erDiagram
|
||||
c[CUSTOMER]
|
||||
p[PERSON]
|
||||
style c,p fill:#f9f,stroke:blue, color:grey, font-size:24px,font-weight:bold
|
||||
`,
|
||||
{ ...options, htmlLabels: false }
|
||||
);
|
||||
});
|
||||
|
||||
it(`${description}should render entities with styles applied from class statement`, () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
erDiagram
|
||||
c[CUSTOMER]
|
||||
p[PERSON]:::blue
|
||||
classDef bold font-size:24px, font-weight: bold
|
||||
classDef blue stroke:lightblue, color: #0000FF
|
||||
class c,p bold
|
||||
`,
|
||||
options
|
||||
);
|
||||
});
|
||||
|
||||
it(`${description}should render entities with styles applied from class statement without htmlLabels`, () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
erDiagram
|
||||
c[CUSTOMER]
|
||||
p[PERSON]:::blue
|
||||
classDef bold font-size:24px, font-weight: bold
|
||||
classDef blue stroke:lightblue, color: #0000FF
|
||||
class c,p bold
|
||||
`,
|
||||
{ ...options, htmlLabels: false }
|
||||
);
|
||||
});
|
||||
|
||||
it(`${description}should render entities with styles applied from the default class and other styles`, () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
erDiagram
|
||||
c[CUSTOMER]
|
||||
p[PERSON]:::blue
|
||||
classDef blue stroke:lightblue, color: #0000FF
|
||||
classDef default fill:pink
|
||||
style c color:green
|
||||
`,
|
||||
{ ...options }
|
||||
);
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -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);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -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');
|
||||
});
|
||||
|
||||
@@ -895,7 +895,7 @@ graph TD
|
||||
imgSnapshotTest(
|
||||
`
|
||||
graph TD
|
||||
classDef default fill:#a34,stroke:#000,stroke-width:4px,color:#fff
|
||||
classDef default fill:#a34,stroke:#000,stroke-width:4px,color:#fff
|
||||
hello --> default
|
||||
`,
|
||||
{ htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
|
||||
@@ -917,4 +917,21 @@ graph TD
|
||||
}
|
||||
);
|
||||
});
|
||||
it('#6369: edge color should affect arrow head', () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
flowchart LR
|
||||
A --> B
|
||||
A --> C
|
||||
C --> D
|
||||
|
||||
linkStyle 0 stroke:#D50000
|
||||
linkStyle 2 stroke:#D50000
|
||||
`,
|
||||
{
|
||||
flowchart: { htmlLabels: true },
|
||||
securityLevel: 'loose',
|
||||
}
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
337
cypress/platform/yari2.html
Normal file
337
cypress/platform/yari2.html
Normal file
@@ -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>
|
||||
Reference in New Issue
Block a user