mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-09-26 18:59:42 +02:00
Merge remote-tracking branch 'origin/develop' into test-merge
This commit is contained in:
Knut Sveidqvist
@@ -132,3 +132,10 @@ export const verifyScreenshot = (name: string): void => {
|
||||
cy.matchImageSnapshot(name);
|
||||
}
|
||||
};
|
||||
|
||||
export const verifyNumber = (value: number, expected: number, deltaPercent = 10): void => {
|
||||
expect(value).to.be.within(
|
||||
expected * (1 - deltaPercent / 100),
|
||||
expected * (1 + deltaPercent / 100)
|
||||
);
|
||||
};
|
||||
|
||||
@@ -69,7 +69,9 @@ describe('Configuration', () => {
|
||||
.and('include', 'url(#');
|
||||
});
|
||||
});
|
||||
it('should handle arrowMarkerAbsolute explicitly set to "false" as false', () => {
|
||||
// This has been broken for a long time, but something about the Cypress environment was
|
||||
// rewriting the URL to be relative, causing the test to incorrectly pass.
|
||||
it.skip('should handle arrowMarkerAbsolute explicitly set to "false" as false', () => {
|
||||
renderGraph(
|
||||
`graph TD
|
||||
A[Christmas] -->|Get money| B(Go shopping)
|
||||
@@ -112,7 +114,7 @@ describe('Configuration', () => {
|
||||
.first()
|
||||
.should('have.attr', 'marker-end')
|
||||
.should('exist')
|
||||
.and('include', 'url(http://localhost');
|
||||
.and('include', 'url(http\\:\\/\\/localhost');
|
||||
});
|
||||
});
|
||||
it('should not taint the initial configuration when using multiple directives', () => {
|
||||
|
||||
@@ -20,7 +20,7 @@ describe('Interaction', () => {
|
||||
});
|
||||
|
||||
it('Graph: should handle a click on a node with a bound url', () => {
|
||||
// When there is a URL, cy.contains selects the a tag instead of the span. The .node is a child of a, so we have to use find instead of parent.
|
||||
// When there is a URL, `cy.contains()` selects the `a` tag instead of the `span` tag. The .node is a child of `a`, so we have to use `find()` instead of `parent`.
|
||||
cy.contains('URLTest1').find('.node').click();
|
||||
cy.location().should(({ href }) => {
|
||||
expect(href).to.eq('http://localhost:9000/empty.html');
|
||||
@@ -146,7 +146,7 @@ describe('Interaction', () => {
|
||||
});
|
||||
});
|
||||
|
||||
describe('Interaction - security level other, missspelling', () => {
|
||||
describe('Interaction - security level other, misspelling', () => {
|
||||
beforeEach(() => {
|
||||
cy.visit('http://localhost:9000/click_security_other.html');
|
||||
});
|
||||
|
||||
@@ -19,6 +19,25 @@ describe.skip('architecture diagram', () => {
|
||||
`
|
||||
);
|
||||
});
|
||||
it('should render a simple architecture diagram with titleAndAccessibilities', () => {
|
||||
imgSnapshotTest(
|
||||
`architecture-beta
|
||||
title Simple Architecture Diagram
|
||||
accTitle: Accessibility Title
|
||||
accDescr: Accessibility Description
|
||||
group api(cloud)[API]
|
||||
|
||||
service db(database)[Database] in api
|
||||
service disk1(disk)[Storage] in api
|
||||
service disk2(disk)[Storage] in api
|
||||
service server(server)[Server] in api
|
||||
|
||||
db:L -- R:server
|
||||
disk1:T -- B:server
|
||||
disk2:T -- B:db
|
||||
`
|
||||
);
|
||||
});
|
||||
it('should render an architecture diagram with groups within groups', () => {
|
||||
imgSnapshotTest(
|
||||
`architecture-beta
|
||||
@@ -172,7 +191,7 @@ describe.skip('architecture diagram', () => {
|
||||
);
|
||||
});
|
||||
|
||||
it('should render an architecture diagram with a resonable height', () => {
|
||||
it('should render an architecture diagram with a reasonable height', () => {
|
||||
imgSnapshotTest(
|
||||
`architecture-beta
|
||||
group federated(cloud)[Federated Environment]
|
||||
|
||||
@@ -14,7 +14,7 @@ describe('Block diagram', () => {
|
||||
);
|
||||
});
|
||||
|
||||
it('BL2: should handle colums statement in sub-blocks', () => {
|
||||
it('BL2: should handle columns statement in sub-blocks', () => {
|
||||
imgSnapshotTest(
|
||||
`block-beta
|
||||
id1["Hello"]
|
||||
@@ -30,7 +30,7 @@ describe('Block diagram', () => {
|
||||
);
|
||||
});
|
||||
|
||||
it('BL3: should align block widths and handle colums statement in sub-blocks', () => {
|
||||
it('BL3: should align block widths and handle columns statement in sub-blocks', () => {
|
||||
imgSnapshotTest(
|
||||
`block-beta
|
||||
block
|
||||
@@ -46,7 +46,7 @@ describe('Block diagram', () => {
|
||||
);
|
||||
});
|
||||
|
||||
it('BL4: should align block widths and handle colums statements in deeper sub-blocks then 1 level', () => {
|
||||
it('BL4: should align block widths and handle columns statements in deeper sub-blocks then 1 level', () => {
|
||||
imgSnapshotTest(
|
||||
`block-beta
|
||||
columns 1
|
||||
@@ -66,7 +66,7 @@ describe('Block diagram', () => {
|
||||
);
|
||||
});
|
||||
|
||||
it('BL5: should align block widths and handle colums statements in deeper sub-blocks then 1 level (alt)', () => {
|
||||
it('BL5: should align block widths and handle columns statements in deeper sub-blocks then 1 level (alt)', () => {
|
||||
imgSnapshotTest(
|
||||
`block-beta
|
||||
columns 1
|
||||
@@ -236,7 +236,7 @@ describe('Block diagram', () => {
|
||||
);
|
||||
});
|
||||
|
||||
it('BL17: width alignment - blocks shold be equal in width', () => {
|
||||
it('BL17: width alignment - blocks should be equal in width', () => {
|
||||
imgSnapshotTest(
|
||||
`block-beta
|
||||
A("This is the text")
|
||||
|
||||
@@ -429,7 +429,7 @@ describe('Class diagram', () => {
|
||||
classDiagram
|
||||
class \`This\nTitle\nHas\nMany\nNewlines\` {
|
||||
+String Also
|
||||
-Stirng Many
|
||||
-String Many
|
||||
#int Members
|
||||
+And()
|
||||
-Many()
|
||||
@@ -443,7 +443,7 @@ describe('Class diagram', () => {
|
||||
classDiagram
|
||||
class \`This\nTitle\nHas\nMany\nNewlines\` {
|
||||
+String Also
|
||||
-Stirng Many
|
||||
-String Many
|
||||
#int Members
|
||||
+And()
|
||||
-Many()
|
||||
@@ -459,7 +459,7 @@ describe('Class diagram', () => {
|
||||
namespace testingNamespace {
|
||||
class \`This\nTitle\nHas\nMany\nNewlines\` {
|
||||
+String Also
|
||||
-Stirng Many
|
||||
-String Many
|
||||
#int Members
|
||||
+And()
|
||||
-Many()
|
||||
|
||||
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');
|
||||
});
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
|
||||
import { imgSnapshotTest, renderGraph, verifyNumber } from '../../helpers/util.ts';
|
||||
|
||||
describe('Flowchart ELK', () => {
|
||||
it('1-elk: should render a simple flowchart', () => {
|
||||
@@ -109,7 +109,7 @@ describe('Flowchart ELK', () => {
|
||||
const style = svg.attr('style');
|
||||
expect(style).to.match(/^max-width: [\d.]+px;$/);
|
||||
const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
|
||||
expect(maxWidthValue).to.be.within(230 * 0.95, 230 * 1.05);
|
||||
verifyNumber(maxWidthValue, 380);
|
||||
});
|
||||
});
|
||||
it('8-elk: should render a flowchart when useMaxWidth is false', () => {
|
||||
@@ -128,7 +128,7 @@ describe('Flowchart ELK', () => {
|
||||
const width = parseFloat(svg.attr('width'));
|
||||
// use within because the absolute value can be slightly different depending on the environment ±5%
|
||||
// expect(height).to.be.within(446 * 0.95, 446 * 1.05);
|
||||
expect(width).to.be.within(230 * 0.95, 230 * 1.05);
|
||||
verifyNumber(width, 380);
|
||||
expect(svg).to.not.have.attr('style');
|
||||
});
|
||||
});
|
||||
@@ -208,13 +208,13 @@ describe('Flowchart ELK', () => {
|
||||
`flowchart-elk TB
|
||||
internet
|
||||
nat
|
||||
routeur
|
||||
router
|
||||
lb1
|
||||
lb2
|
||||
compute1
|
||||
compute2
|
||||
subgraph project
|
||||
routeur
|
||||
router
|
||||
nat
|
||||
subgraph subnet1
|
||||
compute1
|
||||
@@ -225,8 +225,8 @@ describe('Flowchart ELK', () => {
|
||||
lb2
|
||||
end
|
||||
end
|
||||
internet --> routeur
|
||||
routeur --> subnet1 & subnet2
|
||||
internet --> router
|
||||
router --> subnet1 & subnet2
|
||||
subnet1 & subnet2 --> nat --> internet
|
||||
`,
|
||||
{ htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
|
||||
@@ -443,7 +443,7 @@ flowchart-elk TD
|
||||
{ htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
|
||||
);
|
||||
});
|
||||
it('63-elk: title on subgraphs should be themable', () => {
|
||||
it('63-elk: title on subgraphs should be themeable', () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
%%{init:{"theme":"base", "themeVariables": {"primaryColor":"#411d4e", "titleColor":"white", "darkMode":true}}}%%
|
||||
@@ -692,7 +692,7 @@ A --> B
|
||||
{}
|
||||
);
|
||||
cy.get('svg').should((svg) => {
|
||||
const edges = svg.querySelectorAll('.edges > path');
|
||||
const edges = svg[0].querySelectorAll('.edges > path');
|
||||
edges.forEach((edge) => {
|
||||
expect(edge).to.have.class('flowchart-link');
|
||||
});
|
||||
@@ -739,7 +739,7 @@ NL\`") --"\`1o **bold**\`"--> c
|
||||
{ flowchart: { titleTopMargin: 0 } }
|
||||
);
|
||||
});
|
||||
it('Wrapping long text with a new line', () => {
|
||||
it.skip('Wrapping long text with a new line', () => {
|
||||
imgSnapshotTest(
|
||||
`%%{init: {"flowchart": {"htmlLabels": true}} }%%
|
||||
flowchart-elk LR
|
||||
@@ -841,7 +841,7 @@ end
|
||||
{ flowchart: { titleTopMargin: 0 } }
|
||||
);
|
||||
});
|
||||
it('Sub graphs and markdown strings', () => {
|
||||
it('Sub graphs', () => {
|
||||
imgSnapshotTest(
|
||||
`---
|
||||
config:
|
||||
|
||||
28
cypress/integration/rendering/flowchart-icon.spec.js
Normal file
28
cypress/integration/rendering/flowchart-icon.spec.js
Normal file
@@ -0,0 +1,28 @@
|
||||
import { imgSnapshotTest } from '../../helpers/util.ts';
|
||||
|
||||
const themes = ['default', 'forest', 'dark', 'base', 'neutral'];
|
||||
|
||||
describe('when rendering flowchart with icons', () => {
|
||||
for (const theme of themes) {
|
||||
it(`should render icons from fontawesome library on theme ${theme}`, () => {
|
||||
imgSnapshotTest(
|
||||
`flowchart TD
|
||||
A("fab:fa-twitter Twitter") --> B("fab:fa-facebook Facebook")
|
||||
B --> C("fa:fa-coffee Coffee")
|
||||
C --> D("fa:fa-car Car")
|
||||
D --> E("fab:fa-github GitHub")
|
||||
`,
|
||||
{ theme }
|
||||
);
|
||||
});
|
||||
|
||||
it(`should render registered icons on theme ${theme}`, () => {
|
||||
imgSnapshotTest(
|
||||
`flowchart TD
|
||||
A("fa:fa-bell Bell")
|
||||
`,
|
||||
{ theme }
|
||||
);
|
||||
});
|
||||
}
|
||||
});
|
||||
@@ -99,7 +99,7 @@ describe('Flowchart v2', () => {
|
||||
const style = svg.attr('style');
|
||||
expect(style).to.match(/^max-width: [\d.]+px;$/);
|
||||
const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
|
||||
expect(maxWidthValue).to.be.within(417 * 0.95, 417 * 1.05);
|
||||
expect(maxWidthValue).to.be.within(440 * 0.95, 440 * 1.05);
|
||||
});
|
||||
});
|
||||
it('8: should render a flowchart when useMaxWidth is false', () => {
|
||||
@@ -118,7 +118,7 @@ describe('Flowchart v2', () => {
|
||||
const width = parseFloat(svg.attr('width'));
|
||||
// use within because the absolute value can be slightly different depending on the environment ±5%
|
||||
// expect(height).to.be.within(446 * 0.95, 446 * 1.05);
|
||||
expect(width).to.be.within(417 * 0.95, 417 * 1.05);
|
||||
expect(width).to.be.within(440 * 0.95, 440 * 1.05);
|
||||
expect(svg).to.not.have.attr('style');
|
||||
});
|
||||
});
|
||||
@@ -198,13 +198,13 @@ describe('Flowchart v2', () => {
|
||||
`flowchart TB
|
||||
internet
|
||||
nat
|
||||
routeur
|
||||
router
|
||||
lb1
|
||||
lb2
|
||||
compute1
|
||||
compute2
|
||||
subgraph project
|
||||
routeur
|
||||
router
|
||||
nat
|
||||
subgraph subnet1
|
||||
compute1
|
||||
@@ -215,8 +215,8 @@ describe('Flowchart v2', () => {
|
||||
lb2
|
||||
end
|
||||
end
|
||||
internet --> routeur
|
||||
routeur --> subnet1 & subnet2
|
||||
internet --> router
|
||||
router --> subnet1 & subnet2
|
||||
subnet1 & subnet2 --> nat --> internet
|
||||
`,
|
||||
{ htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
|
||||
@@ -433,7 +433,7 @@ flowchart TD
|
||||
{ htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
|
||||
);
|
||||
});
|
||||
it('63: title on subgraphs should be themable', () => {
|
||||
it('63: title on subgraphs should be themeable', () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
%%{init:{"theme":"base", "themeVariables": {"primaryColor":"#411d4e", "titleColor":"white", "darkMode":true}}}%%
|
||||
@@ -699,7 +699,7 @@ A --> B
|
||||
{ flowchart: { titleTopMargin: 10 } }
|
||||
);
|
||||
});
|
||||
it('3192: It should be possieble to render flowcharts with invisible edges', () => {
|
||||
it('3192: It should be possible to render flowcharts with invisible edges', () => {
|
||||
imgSnapshotTest(
|
||||
`---
|
||||
title: Simple flowchart with invisible edges
|
||||
@@ -1076,4 +1076,41 @@ end
|
||||
);
|
||||
});
|
||||
});
|
||||
describe('New @ syntax for node metadata edge cases', () => {
|
||||
it('should be possible to use @ syntax to add labels on multi nodes', () => {
|
||||
imgSnapshotTest(
|
||||
`flowchart TB
|
||||
n2["label for n2"] & n4@{ label: "label for n4"} & n5@{ label: "label for n5"}
|
||||
`,
|
||||
{}
|
||||
);
|
||||
});
|
||||
it('should be possible to use @ syntax to add labels with trail spaces and &', () => {
|
||||
imgSnapshotTest(
|
||||
`flowchart TB
|
||||
n2["label for n2"] & n4@{ label: "label for n4"} & n5@{ label: "label for n5"}
|
||||
`,
|
||||
{}
|
||||
);
|
||||
});
|
||||
it('should be possible to use @ syntax to add labels with trail spaces', () => {
|
||||
imgSnapshotTest(
|
||||
`flowchart TB
|
||||
n2["label for n2"]
|
||||
n4@{ label: "label for n4"}
|
||||
n5@{ label: "label for n5"}
|
||||
`,
|
||||
{}
|
||||
);
|
||||
});
|
||||
it('should be possible to use @ syntax to add labels with trail spaces and edge/link', () => {
|
||||
imgSnapshotTest(
|
||||
`flowchart TD
|
||||
A["A"] --> B["for B"] & C@{ label: "for c"} & E@{label : "for E"}
|
||||
D@{label: "for D"}
|
||||
`,
|
||||
{}
|
||||
);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -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,60 @@ 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',
|
||||
}
|
||||
);
|
||||
});
|
||||
it('68: should honor subgraph direction when inheritDir is false', () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
%%{init: {"flowchart": { "inheritDir": false }}}%%
|
||||
flowchart TB
|
||||
direction LR
|
||||
subgraph A
|
||||
direction TB
|
||||
a --> b
|
||||
end
|
||||
subgraph B
|
||||
c --> d
|
||||
end
|
||||
`,
|
||||
{
|
||||
fontFamily: 'courier',
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
it('69: should inherit global direction when inheritDir is true', () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
%%{init: {"flowchart": { "inheritDir": true }}}%%
|
||||
flowchart TB
|
||||
direction LR
|
||||
subgraph A
|
||||
direction TB
|
||||
a --> b
|
||||
end
|
||||
subgraph B
|
||||
c --> d
|
||||
end
|
||||
`,
|
||||
{
|
||||
fontFamily: 'courier',
|
||||
}
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -117,7 +117,7 @@ describe('Gantt diagram', () => {
|
||||
{}
|
||||
);
|
||||
});
|
||||
it('should FAIL redering a gantt chart for issue #1060 with invalid date', () => {
|
||||
it('should FAIL rendering a gantt chart for issue #1060 with invalid date', () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
gantt
|
||||
@@ -358,6 +358,23 @@ describe('Gantt diagram', () => {
|
||||
);
|
||||
});
|
||||
|
||||
it('should render a gantt diagram with a vert tag', () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
gantt
|
||||
title A Gantt Diagram
|
||||
dateFormat ss
|
||||
axisFormat %Ss
|
||||
|
||||
section Section
|
||||
A task : a1, 00, 6s
|
||||
Milestone : vert, 01,
|
||||
section Another
|
||||
Task in sec : 06, 3s
|
||||
another task : 3s
|
||||
`
|
||||
);
|
||||
});
|
||||
it('should render a gantt diagram with tick is 2 milliseconds', () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
@@ -573,7 +590,7 @@ describe('Gantt diagram', () => {
|
||||
`
|
||||
);
|
||||
});
|
||||
it('should render a gantt diagram exculding friday and saturday', () => {
|
||||
it('should render a gantt diagram excluding friday and saturday', () => {
|
||||
imgSnapshotTest(
|
||||
`gantt
|
||||
title A Gantt Diagram
|
||||
@@ -584,7 +601,7 @@ describe('Gantt diagram', () => {
|
||||
A task :a1, 2024-02-28, 10d`
|
||||
);
|
||||
});
|
||||
it('should render a gantt diagram exculding saturday and sunday', () => {
|
||||
it('should render a gantt diagram excluding saturday and sunday', () => {
|
||||
imgSnapshotTest(
|
||||
`gantt
|
||||
title A Gantt Diagram
|
||||
@@ -671,7 +688,7 @@ describe('Gantt diagram', () => {
|
||||
title Gantt Digram
|
||||
dateFormat YYYY-MM-DD
|
||||
section Section
|
||||
;A task with a semiclon :a1, 2014-01-01, 30d
|
||||
;A task with a semicolon :a1, 2014-01-01, 30d
|
||||
Another task :after a1 , 20d
|
||||
section Another
|
||||
Task in sec :2014-01-12 , 12d
|
||||
|
||||
@@ -11,7 +11,7 @@ describe('Git Graph diagram', () => {
|
||||
{}
|
||||
);
|
||||
});
|
||||
it('2: should render a simple gitgraph with commit on main branch with Id', () => {
|
||||
it('2: should render a simple gitgraph with commit on main branch with id', () => {
|
||||
imgSnapshotTest(
|
||||
`gitGraph
|
||||
commit id: "One"
|
||||
@@ -253,7 +253,7 @@ describe('Git Graph diagram', () => {
|
||||
`
|
||||
gitGraph
|
||||
checkout main
|
||||
%% Make sure to manually set the ID of all commits, for consistent visual tests
|
||||
%% Make sure to manually set the id of all commits, for consistent visual tests
|
||||
commit id: "1-abcdefg"
|
||||
checkout main
|
||||
branch branch1
|
||||
@@ -343,7 +343,7 @@ gitGraph
|
||||
{}
|
||||
);
|
||||
});
|
||||
it('16: should render a simple gitgraph with commit on main branch with Id | Vertical Branch', () => {
|
||||
it('16: should render a simple gitgraph with commit on main branch with id | Vertical Branch', () => {
|
||||
imgSnapshotTest(
|
||||
`gitGraph TB:
|
||||
commit id: "One"
|
||||
@@ -585,7 +585,7 @@ gitGraph
|
||||
`
|
||||
gitGraph TB:
|
||||
checkout main
|
||||
%% Make sure to manually set the ID of all commits, for consistent visual tests
|
||||
%% Make sure to manually set the id of all commits, for consistent visual tests
|
||||
commit id: "1-abcdefg"
|
||||
checkout main
|
||||
branch branch1
|
||||
@@ -1024,7 +1024,7 @@ gitGraph TB:
|
||||
{}
|
||||
);
|
||||
});
|
||||
it('51: should render a simple gitgraph with commit on main branch with Id | Vertical Branch - Bottom-to-top', () => {
|
||||
it('51: should render a simple gitgraph with commit on main branch with id | Vertical Branch - Bottom-to-top', () => {
|
||||
imgSnapshotTest(
|
||||
`gitGraph BT:
|
||||
commit id: "One"
|
||||
@@ -1266,7 +1266,7 @@ gitGraph TB:
|
||||
`
|
||||
gitGraph BT:
|
||||
checkout main
|
||||
%% Make sure to manually set the ID of all commits, for consistent visual tests
|
||||
%% Make sure to manually set the id of all commits, for consistent visual tests
|
||||
commit id: "1-abcdefg"
|
||||
checkout main
|
||||
branch branch1
|
||||
@@ -1491,7 +1491,7 @@ gitGraph TB:
|
||||
`
|
||||
gitGraph
|
||||
switch main
|
||||
%% Make sure to manually set the ID of all commits, for consistent visual tests
|
||||
%% Make sure to manually set the id of all commits, for consistent visual tests
|
||||
commit id: "1-abcdefg"
|
||||
switch main
|
||||
branch branch1
|
||||
|
||||
@@ -63,4 +63,199 @@ section Checkout from website
|
||||
{ journey: { useMaxWidth: false } }
|
||||
);
|
||||
});
|
||||
|
||||
it('should initialize with a left margin of 150px for user journeys', () => {
|
||||
renderGraph(
|
||||
`
|
||||
---
|
||||
config:
|
||||
journey:
|
||||
maxLabelWidth: 320
|
||||
---
|
||||
journey
|
||||
title User Journey Example
|
||||
section Onboarding
|
||||
Sign Up: 5:
|
||||
Browse Features: 3:
|
||||
Use Core Functionality: 4:
|
||||
section Engagement
|
||||
Browse Features: 3
|
||||
Use Core Functionality: 4
|
||||
`,
|
||||
{ journey: { useMaxWidth: true } }
|
||||
);
|
||||
|
||||
let diagramStartX;
|
||||
|
||||
cy.contains('foreignobject', 'Sign Up').then(($diagram) => {
|
||||
diagramStartX = parseFloat($diagram.attr('x'));
|
||||
expect(diagramStartX).to.be.closeTo(150, 2);
|
||||
});
|
||||
});
|
||||
|
||||
it('should maintain sufficient space between legend and diagram when legend labels are longer', () => {
|
||||
renderGraph(
|
||||
`journey
|
||||
title Web hook life cycle
|
||||
section Darkoob
|
||||
Make preBuilt:5: Darkoob user
|
||||
register slug : 5: Darkoob userf deliberately increasing the size of this label to check if distance between legend and diagram is maintained
|
||||
Map slug to a Prebuilt Job:5: Darkoob user
|
||||
section External Service
|
||||
set Darkoob slug as hook for an Event : 5 : admin Exjjjnjjjj qwerty
|
||||
listen to the events : 5 : External Service
|
||||
call darkoob endpoint : 5 : External Service
|
||||
section Darkoob
|
||||
check for inputs : 5 : DarkoobAPI
|
||||
run the prebuilt job : 5 : DarkoobAPI
|
||||
`,
|
||||
{ journey: { useMaxWidth: true } }
|
||||
);
|
||||
|
||||
let LabelEndX, diagramStartX;
|
||||
|
||||
// Get right edge of the legend
|
||||
cy.contains('tspan', 'Darkoob userf').then((textBox) => {
|
||||
const bbox = textBox[0].getBBox();
|
||||
LabelEndX = bbox.x + bbox.width;
|
||||
});
|
||||
|
||||
// Get left edge of the diagram
|
||||
cy.contains('foreignobject', 'Make preBuilt').then((rect) => {
|
||||
diagramStartX = parseFloat(rect.attr('x'));
|
||||
});
|
||||
|
||||
// Assert right edge of the diagram is greater than or equal to the right edge of the label
|
||||
cy.then(() => {
|
||||
expect(diagramStartX).to.be.gte(LabelEndX);
|
||||
});
|
||||
});
|
||||
|
||||
it('should wrap a single long word with hyphenation', () => {
|
||||
renderGraph(
|
||||
`
|
||||
---
|
||||
config:
|
||||
journey:
|
||||
maxLabelWidth: 100
|
||||
---
|
||||
journey
|
||||
title Long Word Test
|
||||
section Test
|
||||
VeryLongWord: 5: Supercalifragilisticexpialidocious
|
||||
`,
|
||||
{ journey: { useMaxWidth: true } }
|
||||
);
|
||||
|
||||
// Verify that the line ends with a hyphen, indicating proper hyphenation for words exceeding maxLabelWidth.
|
||||
cy.get('tspan').then((tspans) => {
|
||||
const hasHyphen = [...tspans].some((t) => t.textContent.trim().endsWith('-'));
|
||||
return expect(hasHyphen).to.be.true;
|
||||
});
|
||||
});
|
||||
|
||||
it('should wrap text on whitespace without adding hyphens', () => {
|
||||
renderGraph(
|
||||
`
|
||||
---
|
||||
config:
|
||||
journey:
|
||||
maxLabelWidth: 200
|
||||
---
|
||||
journey
|
||||
title Whitespace Test
|
||||
section Test
|
||||
TextWithSpaces: 5: Gustavo Fring is played by Giancarlo Esposito and is a character in Breaking Bad.
|
||||
`,
|
||||
{ journey: { useMaxWidth: true } }
|
||||
);
|
||||
|
||||
// Verify that none of the text spans end with a hyphen.
|
||||
cy.get('tspan').each(($el) => {
|
||||
const text = $el.text();
|
||||
expect(text.trim()).not.to.match(/-$/);
|
||||
});
|
||||
});
|
||||
|
||||
it('should wrap long labels into multiple lines, keep them under max width, and maintain margins', () => {
|
||||
renderGraph(
|
||||
`
|
||||
---
|
||||
config:
|
||||
journey:
|
||||
maxLabelWidth: 320
|
||||
---
|
||||
journey
|
||||
title User Journey Example
|
||||
section Onboarding
|
||||
Sign Up: 5: This is a long label that will be split into multiple lines to test the wrapping functionality
|
||||
Browse Features: 3: This is another long label that will be split into multiple lines to test the wrapping functionality
|
||||
Use Core Functionality: 4: This is yet another long label that will be split into multiple lines to test the wrapping functionality
|
||||
section Engagement
|
||||
Browse Features: 3
|
||||
Use Core Functionality: 4
|
||||
`,
|
||||
{ journey: { useMaxWidth: true } }
|
||||
);
|
||||
|
||||
let diagramStartX, maxLineWidth;
|
||||
|
||||
// Get the diagram's left edge x-coordinate
|
||||
cy.contains('foreignobject', 'Sign Up')
|
||||
.then(($diagram) => {
|
||||
diagramStartX = parseFloat($diagram.attr('x'));
|
||||
})
|
||||
.then(() => {
|
||||
cy.get('text.legend').then(($lines) => {
|
||||
// Check that there are multiple lines
|
||||
expect($lines.length).to.be.equal(9);
|
||||
|
||||
// Check that all lines are under the maxLabelWidth
|
||||
$lines.each((index, el) => {
|
||||
const bbox = el.getBBox();
|
||||
expect(bbox.width).to.be.lte(320);
|
||||
maxLineWidth = Math.max(maxLineWidth || 0, bbox.width);
|
||||
});
|
||||
|
||||
/** The expected margin between the diagram and the legend is 150px, as defined by
|
||||
* conf.leftMargin in user-journey-config.js
|
||||
*/
|
||||
expect(diagramStartX - maxLineWidth).to.be.closeTo(150, 2);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
it('should correctly render the user journey diagram title with the specified styling', () => {
|
||||
renderGraph(
|
||||
`---
|
||||
config:
|
||||
journey:
|
||||
titleColor: "#2900A5"
|
||||
titleFontFamily: "Times New Roman"
|
||||
titleFontSize: "5rem"
|
||||
---
|
||||
|
||||
journey
|
||||
title User Journey Example
|
||||
section Onboarding
|
||||
Sign Up: 5: John, Shahir
|
||||
Complete Profile: 4: John
|
||||
section Engagement
|
||||
Browse Features: 3: John
|
||||
Use Core Functionality: 4: John
|
||||
section Retention
|
||||
Revisit Application: 5: John
|
||||
Invite Friends: 3: John
|
||||
|
||||
size: 2rem
|
||||
`
|
||||
);
|
||||
|
||||
cy.get('text').contains('User Journey Example').as('title');
|
||||
cy.get('@title').then(($title) => {
|
||||
expect($title).to.have.attr('fill', '#2900A5');
|
||||
expect($title).to.have.attr('font-family', 'Times New Roman');
|
||||
expect($title).to.have.attr('font-size', '5rem');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -62,7 +62,7 @@ describe('Kanban diagram', () => {
|
||||
{}
|
||||
);
|
||||
});
|
||||
it('6: should handle assigments', () => {
|
||||
it('6: should handle assignments', () => {
|
||||
imgSnapshotTest(
|
||||
`kanban
|
||||
id1[Todo]
|
||||
@@ -118,7 +118,7 @@ kanban
|
||||
docs[Create Documentation]
|
||||
docs[Create Blog about the new diagram]
|
||||
id7[In progress]
|
||||
id6[Create renderer so that it works in all cases. We also add som extra text here for testing purposes. And some more just for the extra flare.]
|
||||
id6[Create renderer so that it works in all cases. We also add some extra text here for testing purposes. And some more just for the extra flare.]
|
||||
id8[Design grammar]@{ assigned: 'knsv' }
|
||||
id9[Ready for deploy]
|
||||
id10[Ready for test]
|
||||
|
||||
@@ -146,7 +146,7 @@ root
|
||||
shouldHaveRoot
|
||||
);
|
||||
});
|
||||
it('text shouhld wrap with icon', () => {
|
||||
it('text should wrap with icon', () => {
|
||||
imgSnapshotTest(
|
||||
`mindmap
|
||||
root
|
||||
|
||||
@@ -64,7 +64,7 @@ describe('pie chart', () => {
|
||||
});
|
||||
});
|
||||
|
||||
it('should render a pie diagram when textPosition is setted', () => {
|
||||
it('should render a pie diagram when textPosition is set', () => {
|
||||
imgSnapshotTest(
|
||||
`pie
|
||||
"Dogs": 50
|
||||
|
||||
@@ -45,7 +45,7 @@ describe('Quadrant Chart', () => {
|
||||
{}
|
||||
);
|
||||
});
|
||||
it('should able to render y-axix on right side', () => {
|
||||
it('should able to render y-axis on right side', () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
%%{init: {"quadrantChart": {"yAxisPosition": "right"}}}%%
|
||||
@@ -61,7 +61,7 @@ describe('Quadrant Chart', () => {
|
||||
{}
|
||||
);
|
||||
});
|
||||
it('should able to render x-axix on bottom', () => {
|
||||
it('should able to render x-axis on bottom', () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
%%{init: {"quadrantChart": {"xAxisPosition": "bottom"}}}%%
|
||||
@@ -77,7 +77,7 @@ describe('Quadrant Chart', () => {
|
||||
{}
|
||||
);
|
||||
});
|
||||
it('should able to render x-axix on bottom and y-axis on right', () => {
|
||||
it('should able to render x-axis on bottom and y-axis on right', () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
%%{init: {"quadrantChart": {"xAxisPosition": "bottom", "yAxisPosition": "right"}}}%%
|
||||
|
||||
79
cypress/integration/rendering/radar.spec.js
Normal file
79
cypress/integration/rendering/radar.spec.js
Normal file
@@ -0,0 +1,79 @@
|
||||
import { imgSnapshotTest } from '../../helpers/util';
|
||||
|
||||
describe('radar structure', () => {
|
||||
it('should render a simple radar diagram', () => {
|
||||
imgSnapshotTest(
|
||||
`radar-beta
|
||||
title Best Radar Ever
|
||||
axis A, B, C
|
||||
curve c1{1, 2, 3}
|
||||
`
|
||||
);
|
||||
});
|
||||
|
||||
it('should render a radar diagram with multiple curves', () => {
|
||||
imgSnapshotTest(
|
||||
`radar-beta
|
||||
title Best Radar Ever
|
||||
axis A, B, C
|
||||
curve c1{1, 2, 3}
|
||||
curve c2{2, 3, 1}
|
||||
`
|
||||
);
|
||||
});
|
||||
|
||||
it('should render a complex radar diagram', () => {
|
||||
imgSnapshotTest(
|
||||
`radar-beta
|
||||
title My favorite ninjas
|
||||
axis Agility, Speed, Strength
|
||||
axis Stam["Stamina"] , Intel["Intelligence"]
|
||||
|
||||
curve Ninja1["Naruto Uzumaki"]{
|
||||
Agility 2, Speed 2,
|
||||
Strength 3, Stam 5,
|
||||
Intel 0
|
||||
}
|
||||
curve Ninja2["Sasuke"]{2, 3, 4, 1, 5}
|
||||
curve Ninja3 {3, 2, 1, 5, 4}
|
||||
|
||||
showLegend true
|
||||
ticks 3
|
||||
max 8
|
||||
min 0
|
||||
graticule polygon
|
||||
`
|
||||
);
|
||||
cy.get('svg').should((svg) => {
|
||||
expect(svg).to.have.length(1);
|
||||
});
|
||||
});
|
||||
|
||||
it('should render radar diagram with config override', () => {
|
||||
imgSnapshotTest(
|
||||
`radar-beta
|
||||
title Best Radar Ever
|
||||
axis A,B,C
|
||||
curve mycurve{1,2,3}`,
|
||||
{ radar: { marginTop: 100, axisScaleFactor: 0.5 } }
|
||||
);
|
||||
});
|
||||
|
||||
it('should parse radar diagram with theme override', () => {
|
||||
imgSnapshotTest(
|
||||
`radar-beta
|
||||
axis A,B,C
|
||||
curve mycurve{1,2,3}`,
|
||||
{ theme: 'base', themeVariables: { fontSize: 80, cScale0: '#FF0000' } }
|
||||
);
|
||||
});
|
||||
|
||||
it('should handle radar diagram with radar style override', () => {
|
||||
imgSnapshotTest(
|
||||
`radar-beta
|
||||
axis A,B,C
|
||||
curve mycurve{1,2,3}`,
|
||||
{ theme: 'base', themeVariables: { radar: { axisColor: '#FF0000' } } }
|
||||
);
|
||||
});
|
||||
});
|
||||
703
cypress/integration/rendering/requirementDiagram-unified.spec.js
Normal file
703
cypress/integration/rendering/requirementDiagram-unified.spec.js
Normal file
@@ -0,0 +1,703 @@
|
||||
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('Requirement Diagram Unified', () => {
|
||||
testOptions.forEach(({ description, options }) => {
|
||||
it(`${description}should render a simple Requirement diagram`, () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
requirementDiagram
|
||||
requirement test_req {
|
||||
id: 1
|
||||
text: the test text.
|
||||
risk: high
|
||||
verifymethod: test
|
||||
}
|
||||
|
||||
element test_entity {
|
||||
type: simulation
|
||||
}
|
||||
|
||||
test_entity - satisfies -> test_req
|
||||
`,
|
||||
options
|
||||
);
|
||||
});
|
||||
|
||||
it(`${description}should render a simple Requirement diagram without htmlLabels`, () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
requirementDiagram
|
||||
requirement test_req {
|
||||
id: 1
|
||||
text: the test text.
|
||||
risk: high
|
||||
verifymethod: test
|
||||
}
|
||||
|
||||
element test_entity {
|
||||
type: simulation
|
||||
}
|
||||
|
||||
test_entity - satisfies -> test_req
|
||||
`,
|
||||
{ ...options, htmlLabels: false }
|
||||
);
|
||||
});
|
||||
|
||||
it(`${description}should render a not-so-simple Requirement diagram`, () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
requirementDiagram
|
||||
|
||||
requirement test_req {
|
||||
id: 1
|
||||
text: the test text.
|
||||
risk: high
|
||||
verifymethod: test
|
||||
}
|
||||
|
||||
functionalRequirement test_req2 {
|
||||
id: 1.1
|
||||
text: the second test text.
|
||||
risk: low
|
||||
verifymethod: inspection
|
||||
}
|
||||
|
||||
performanceRequirement test_req3 {
|
||||
id: 1.2
|
||||
text: the third test text.
|
||||
risk: medium
|
||||
verifymethod: demonstration
|
||||
}
|
||||
|
||||
interfaceRequirement test_req4 {
|
||||
id: 1.2.1
|
||||
text: the fourth test text.
|
||||
risk: medium
|
||||
verifymethod: analysis
|
||||
}
|
||||
|
||||
physicalRequirement test_req5 {
|
||||
id: 1.2.2
|
||||
text: the fifth test text.
|
||||
risk: medium
|
||||
verifymethod: analysis
|
||||
}
|
||||
|
||||
designConstraint test_req6 {
|
||||
id: 1.2.3
|
||||
text: the sixth test text.
|
||||
risk: medium
|
||||
verifymethod: analysis
|
||||
}
|
||||
|
||||
element test_entity {
|
||||
type: simulation
|
||||
}
|
||||
|
||||
element test_entity2 {
|
||||
type: word doc
|
||||
docRef: reqs/test_entity
|
||||
}
|
||||
|
||||
element test_entity3 {
|
||||
type: "test suite"
|
||||
docRef: github.com/all_the_tests
|
||||
}
|
||||
|
||||
|
||||
test_entity - satisfies -> test_req2
|
||||
test_req - traces -> test_req2
|
||||
test_req - contains -> test_req3
|
||||
test_req3 - contains -> test_req4
|
||||
test_req4 - derives -> test_req5
|
||||
test_req5 - refines -> test_req6
|
||||
test_entity3 - verifies -> test_req5
|
||||
test_req <- copies - test_entity2
|
||||
`,
|
||||
options
|
||||
);
|
||||
});
|
||||
|
||||
it(`${description}should render a not-so-simple Requirement diagram without htmlLabels`, () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
requirementDiagram
|
||||
|
||||
requirement test_req {
|
||||
id: 1
|
||||
text: the test text.
|
||||
risk: high
|
||||
verifymethod: test
|
||||
}
|
||||
|
||||
functionalRequirement test_req2 {
|
||||
id: 1.1
|
||||
text: the second test text.
|
||||
risk: low
|
||||
verifymethod: inspection
|
||||
}
|
||||
|
||||
performanceRequirement test_req3 {
|
||||
id: 1.2
|
||||
text: the third test text.
|
||||
risk: medium
|
||||
verifymethod: demonstration
|
||||
}
|
||||
|
||||
interfaceRequirement test_req4 {
|
||||
id: 1.2.1
|
||||
text: the fourth test text.
|
||||
risk: medium
|
||||
verifymethod: analysis
|
||||
}
|
||||
|
||||
physicalRequirement test_req5 {
|
||||
id: 1.2.2
|
||||
text: the fifth test text.
|
||||
risk: medium
|
||||
verifymethod: analysis
|
||||
}
|
||||
|
||||
designConstraint test_req6 {
|
||||
id: 1.2.3
|
||||
text: the sixth test text.
|
||||
risk: medium
|
||||
verifymethod: analysis
|
||||
}
|
||||
|
||||
element test_entity {
|
||||
type: simulation
|
||||
}
|
||||
|
||||
element test_entity2 {
|
||||
type: word doc
|
||||
docRef: reqs/test_entity
|
||||
}
|
||||
|
||||
element test_entity3 {
|
||||
type: "test suite"
|
||||
docRef: github.com/all_the_tests
|
||||
}
|
||||
|
||||
|
||||
test_entity - satisfies -> test_req2
|
||||
test_req - traces -> test_req2
|
||||
test_req - contains -> test_req3
|
||||
test_req3 - contains -> test_req4
|
||||
test_req4 - derives -> test_req5
|
||||
test_req5 - refines -> test_req6
|
||||
test_entity3 - verifies -> test_req5
|
||||
test_req <- copies - test_entity2
|
||||
`,
|
||||
{ ...options, htmlLabels: false }
|
||||
);
|
||||
});
|
||||
|
||||
it(`${description}should render multiple Requirement diagrams`, () => {
|
||||
imgSnapshotTest(
|
||||
[
|
||||
`
|
||||
requirementDiagram
|
||||
|
||||
requirement test_req {
|
||||
id: 1
|
||||
text: the test text.
|
||||
risk: high
|
||||
verifymethod: test
|
||||
}
|
||||
|
||||
element test_entity {
|
||||
type: simulation
|
||||
}
|
||||
|
||||
test_entity - satisfies -> test_req
|
||||
`,
|
||||
`
|
||||
requirementDiagram
|
||||
|
||||
requirement test_req {
|
||||
id: 1
|
||||
text: the test text.
|
||||
risk: high
|
||||
verifymethod: test
|
||||
}
|
||||
|
||||
element test_entity {
|
||||
type: simulation
|
||||
}
|
||||
|
||||
test_entity - satisfies -> test_req
|
||||
`,
|
||||
],
|
||||
options
|
||||
);
|
||||
});
|
||||
|
||||
it(`${description}should render a Requirement diagram with empty information`, () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
requirementDiagram
|
||||
requirement test_req {
|
||||
}
|
||||
element test_entity {
|
||||
}
|
||||
`,
|
||||
options
|
||||
);
|
||||
});
|
||||
|
||||
it(`${description}should render requirements and elements with and without information`, () => {
|
||||
renderGraph(
|
||||
`
|
||||
requirementDiagram
|
||||
requirement test_req {
|
||||
id: 1
|
||||
text: the test text.
|
||||
risk: high
|
||||
verifymethod: test
|
||||
}
|
||||
element test_entity {
|
||||
}
|
||||
`,
|
||||
options
|
||||
);
|
||||
});
|
||||
|
||||
it(`${description}should render requirements and elements with long and short text`, () => {
|
||||
renderGraph(
|
||||
`
|
||||
requirementDiagram
|
||||
requirement test_req {
|
||||
id: 1
|
||||
text: the test text that is long and takes up a lot of space.
|
||||
risk: high
|
||||
verifymethod: test
|
||||
}
|
||||
element test_entity_name_that_is_extra_long {
|
||||
}
|
||||
`,
|
||||
options
|
||||
);
|
||||
});
|
||||
|
||||
it(`${description}should render requirements and elements with long and short text without htmlLabels`, () => {
|
||||
renderGraph(
|
||||
`
|
||||
requirementDiagram
|
||||
requirement test_req {
|
||||
id: 1
|
||||
text: the test text that is long and takes up a lot of space.
|
||||
risk: high
|
||||
verifymethod: test
|
||||
}
|
||||
element test_entity_name_that_is_extra_long {
|
||||
}
|
||||
`,
|
||||
{ ...options, htmlLabels: false }
|
||||
);
|
||||
});
|
||||
|
||||
it(`${description}should render requirements and elements with quoted text for spaces`, () => {
|
||||
renderGraph(
|
||||
`
|
||||
requirementDiagram
|
||||
requirement "test req name with spaces" {
|
||||
id: 1
|
||||
text: the test text that is long and takes up a lot of space.
|
||||
risk: high
|
||||
verifymethod: test
|
||||
}
|
||||
element "test entity name that is extra long with spaces" {
|
||||
}
|
||||
`,
|
||||
options
|
||||
);
|
||||
});
|
||||
|
||||
it(`${description}should render requirements and elements with markdown text`, () => {
|
||||
renderGraph(
|
||||
`
|
||||
requirementDiagram
|
||||
requirement "__my bolded name__" {
|
||||
id: 1
|
||||
text: "**Bolded text** _italicized text_"
|
||||
risk: high
|
||||
verifymethod: test
|
||||
}
|
||||
element "*my italicized name*" {
|
||||
type: "**Bolded type** _italicized type_"
|
||||
docref: "*Italicized* __Bolded__"
|
||||
}
|
||||
`,
|
||||
options
|
||||
);
|
||||
});
|
||||
|
||||
it(`${description}should render requirements and elements with markdown text without htmlLabels`, () => {
|
||||
renderGraph(
|
||||
`
|
||||
requirementDiagram
|
||||
requirement "__my bolded name__" {
|
||||
id: 1
|
||||
text: "**Bolded text** _italicized text_"
|
||||
risk: high
|
||||
verifymethod: test
|
||||
}
|
||||
element "*my italicized name*" {
|
||||
type: "**Bolded type** _italicized type_"
|
||||
docref: "*Italicized* __Bolded__"
|
||||
}
|
||||
`,
|
||||
{ ...options, htmlLabels: false }
|
||||
);
|
||||
});
|
||||
|
||||
it(`${description}should render a simple Requirement diagram with a title`, () => {
|
||||
imgSnapshotTest(
|
||||
`---
|
||||
title: simple Requirement diagram
|
||||
---
|
||||
requirementDiagram
|
||||
|
||||
requirement test_req {
|
||||
id: 1
|
||||
text: the test text.
|
||||
risk: high
|
||||
verifymethod: test
|
||||
}
|
||||
|
||||
element test_entity {
|
||||
type: simulation
|
||||
}
|
||||
|
||||
test_entity - satisfies -> test_req
|
||||
`,
|
||||
options
|
||||
);
|
||||
});
|
||||
|
||||
it(`${description}should render a Requirement diagram with TB direction`, () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
requirementDiagram
|
||||
direction TB
|
||||
|
||||
requirement test_req {
|
||||
id: 1
|
||||
text: the test text.
|
||||
risk: high
|
||||
verifymethod: test
|
||||
}
|
||||
|
||||
element test_entity {
|
||||
type: simulation
|
||||
}
|
||||
|
||||
test_entity - satisfies -> test_req
|
||||
`,
|
||||
options
|
||||
);
|
||||
});
|
||||
|
||||
it(`${description}should render a Requirement diagram with BT direction`, () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
requirementDiagram
|
||||
direction BT
|
||||
|
||||
requirement test_req {
|
||||
id: 1
|
||||
text: the test text.
|
||||
risk: high
|
||||
verifymethod: test
|
||||
}
|
||||
|
||||
element test_entity {
|
||||
type: simulation
|
||||
}
|
||||
|
||||
test_entity - satisfies -> test_req
|
||||
`,
|
||||
options
|
||||
);
|
||||
});
|
||||
|
||||
it(`${description}should render a Requirement diagram with LR direction`, () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
requirementDiagram
|
||||
direction LR
|
||||
|
||||
requirement test_req {
|
||||
id: 1
|
||||
text: the test text.
|
||||
risk: high
|
||||
verifymethod: test
|
||||
}
|
||||
|
||||
element test_entity {
|
||||
type: simulation
|
||||
}
|
||||
|
||||
test_entity - satisfies -> test_req
|
||||
`,
|
||||
options
|
||||
);
|
||||
});
|
||||
|
||||
it(`${description}should render a Requirement diagram with RL direction`, () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
requirementDiagram
|
||||
direction RL
|
||||
|
||||
requirement test_req {
|
||||
id: 1
|
||||
text: the test text.
|
||||
risk: high
|
||||
verifymethod: test
|
||||
}
|
||||
|
||||
element test_entity {
|
||||
type: simulation
|
||||
}
|
||||
|
||||
test_entity - satisfies -> test_req
|
||||
`,
|
||||
options
|
||||
);
|
||||
});
|
||||
|
||||
it(`${description}should render requirements and elements with styles applied from style statement`, () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
requirementDiagram
|
||||
|
||||
requirement test_req {
|
||||
id: 1
|
||||
text: the test text.
|
||||
risk: high
|
||||
verifymethod: test
|
||||
}
|
||||
|
||||
element test_entity {
|
||||
type: simulation
|
||||
}
|
||||
|
||||
test_entity - satisfies -> test_req
|
||||
|
||||
style test_req,test_entity fill:#f9f,stroke:blue, color:grey, font-weight:bold
|
||||
`,
|
||||
options
|
||||
);
|
||||
});
|
||||
|
||||
it(`${description}should render requirements and elements with styles applied from style statement without htmlLabels`, () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
requirementDiagram
|
||||
|
||||
requirement test_req {
|
||||
id: 1
|
||||
text: the test text.
|
||||
risk: high
|
||||
verifymethod: test
|
||||
}
|
||||
|
||||
element test_entity {
|
||||
type: simulation
|
||||
}
|
||||
|
||||
test_entity - satisfies -> test_req
|
||||
|
||||
style test_req,test_entity fill:#f9f,stroke:blue, color:grey, font-weight:bold
|
||||
`,
|
||||
{ ...options, htmlLabels: false }
|
||||
);
|
||||
});
|
||||
|
||||
it(`${description}should render requirements and elements with styles applied from class statement`, () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
requirementDiagram
|
||||
|
||||
requirement test_req {
|
||||
id: 1
|
||||
text: the test text.
|
||||
risk: high
|
||||
verifymethod: test
|
||||
}
|
||||
|
||||
element test_entity {
|
||||
type: simulation
|
||||
}
|
||||
|
||||
test_entity - satisfies -> test_req
|
||||
classDef bold font-weight: bold
|
||||
classDef blue stroke:lightblue, color: #0000FF
|
||||
class test_entity bold
|
||||
class test_req blue, bold
|
||||
`,
|
||||
options
|
||||
);
|
||||
});
|
||||
|
||||
it(`${description}should render requirements and elements with styles applied from class statement without htmlLabels`, () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
requirementDiagram
|
||||
|
||||
requirement test_req {
|
||||
id: 1
|
||||
text: the test text.
|
||||
risk: high
|
||||
verifymethod: test
|
||||
}
|
||||
|
||||
element test_entity {
|
||||
type: simulation
|
||||
}
|
||||
|
||||
test_entity - satisfies -> test_req
|
||||
classDef bold font-weight: bold
|
||||
classDef blue stroke:lightblue, color: #0000FF
|
||||
class test_entity bold
|
||||
class test_req blue, bold
|
||||
`,
|
||||
{ ...options, htmlLabels: false }
|
||||
);
|
||||
});
|
||||
|
||||
it(`${description}should render requirements and elements with styles applied from classes with shorthand syntax`, () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
requirementDiagram
|
||||
|
||||
requirement test_req:::blue {
|
||||
id: 1
|
||||
text: the test text.
|
||||
risk: high
|
||||
verifymethod: test
|
||||
}
|
||||
|
||||
element test_entity {
|
||||
type: simulation
|
||||
}
|
||||
|
||||
test_entity - satisfies -> test_req
|
||||
classDef bold font-weight: bold
|
||||
classDef blue stroke:lightblue, color: #0000FF
|
||||
test_entity:::bold
|
||||
`,
|
||||
options
|
||||
);
|
||||
});
|
||||
|
||||
it(`${description}should render requirements and elements with styles applied from classes with shorthand syntax without htmlLabels`, () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
requirementDiagram
|
||||
|
||||
requirement test_req:::blue {
|
||||
id: 1
|
||||
text: the test text.
|
||||
risk: high
|
||||
verifymethod: test
|
||||
}
|
||||
|
||||
element test_entity {
|
||||
type: simulation
|
||||
}
|
||||
|
||||
test_entity - satisfies -> test_req
|
||||
classDef bold font-weight: bold
|
||||
classDef blue stroke:lightblue, color: #0000FF
|
||||
test_entity:::bold
|
||||
`,
|
||||
{ ...options, htmlLabels: false }
|
||||
);
|
||||
});
|
||||
|
||||
it(`${description}should render requirements and elements with styles applied from the default class and other styles`, () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
requirementDiagram
|
||||
|
||||
requirement test_req:::blue {
|
||||
id: 1
|
||||
text: the test text.
|
||||
risk: high
|
||||
verifymethod: test
|
||||
}
|
||||
|
||||
element test_entity {
|
||||
type: simulation
|
||||
}
|
||||
|
||||
test_entity - satisfies -> test_req
|
||||
classDef blue stroke:lightblue, color:blue
|
||||
classDef default fill:pink
|
||||
style test_entity color:green
|
||||
`,
|
||||
options
|
||||
);
|
||||
});
|
||||
|
||||
it(`${description}should render requirements and elements with styles applied from the default class and other styles without htmlLabels`, () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
requirementDiagram
|
||||
|
||||
requirement test_req:::blue {
|
||||
id: 1
|
||||
text: the test text.
|
||||
risk: high
|
||||
verifymethod: test
|
||||
}
|
||||
|
||||
element test_entity {
|
||||
type: simulation
|
||||
}
|
||||
|
||||
test_entity - satisfies -> test_req
|
||||
classDef blue stroke:lightblue, color:blue
|
||||
classDef default fill:pink
|
||||
style test_entity color:green
|
||||
`,
|
||||
{ ...options, htmlLabels: false }
|
||||
);
|
||||
});
|
||||
|
||||
it(`${description}should render a Requirement diagram with a theme`, () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
---
|
||||
theme: forest
|
||||
---
|
||||
requirementDiagram
|
||||
|
||||
requirement test_req:::blue {
|
||||
id: 1
|
||||
text: the test text.
|
||||
risk: high
|
||||
verifymethod: test
|
||||
}
|
||||
|
||||
element test_entity {
|
||||
type: simulation
|
||||
}
|
||||
|
||||
test_entity - satisfies -> test_req
|
||||
`,
|
||||
options
|
||||
);
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -138,8 +138,8 @@ describe('State diagram', () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
stateDiagram-v2
|
||||
State1: This a a single line description
|
||||
State2: This a a multi line description
|
||||
State1: This a single line description
|
||||
State2: This a multi line description
|
||||
State2: here comes the multi part
|
||||
[*] --> State1
|
||||
State1 --> State2
|
||||
@@ -345,7 +345,7 @@ stateDiagram
|
||||
}
|
||||
);
|
||||
});
|
||||
it('v2 width of compond state should grow with title if title is wider', () => {
|
||||
it('v2 width of compound state should grow with title if title is wider', () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
stateDiagram-v2
|
||||
@@ -402,8 +402,8 @@ stateDiagram-v2
|
||||
`
|
||||
stateDiagram-v2
|
||||
MyState
|
||||
note left of MyState : I am a leftie
|
||||
note right of MyState : I am a rightie
|
||||
note left of MyState : I am a lefty
|
||||
note right of MyState : I am a righty
|
||||
`,
|
||||
{
|
||||
logLevel: 0,
|
||||
@@ -552,7 +552,7 @@ style AState fill:#636,border:1px solid red,color:white;
|
||||
{ logLevel: 0, fontFamily: 'courier' }
|
||||
);
|
||||
});
|
||||
it(' should let styles take preceedence over classes', () => {
|
||||
it(' should let styles take precedence over classes', () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
stateDiagram-v2
|
||||
@@ -565,7 +565,7 @@ style AState fill:#636,border:1px solid red,color:white;
|
||||
{ logLevel: 0, fontFamily: 'courier' }
|
||||
);
|
||||
});
|
||||
it(' should allow styles to take effect in stubgraphs', () => {
|
||||
it(' should allow styles to take effect in subgraphs', () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
stateDiagram
|
||||
|
||||
@@ -129,8 +129,8 @@ describe('State diagram', () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
stateDiagram
|
||||
State1: This a a single line description
|
||||
State2: This a a multi line description
|
||||
State1: This a single line description
|
||||
State2: This a multi line description
|
||||
State2: here comes the multi part
|
||||
[*] --> State1
|
||||
State1 --> State2
|
||||
|
||||
@@ -7,7 +7,7 @@ describe('Timeline diagram', () => {
|
||||
title History of Social Media Platform
|
||||
2002 : LinkedIn
|
||||
2004 : Facebook : Google
|
||||
2005 : Youtube
|
||||
2005 : YouTube
|
||||
2006 : Twitter
|
||||
`,
|
||||
{}
|
||||
@@ -35,7 +35,7 @@ describe('Timeline diagram', () => {
|
||||
section Stone Age
|
||||
7600 BC : Britain's oldest known house was built in Orkney, Scotland
|
||||
6000 BC : Sea levels rise and Britain becomes an island.<br> The people who live here are hunter-gatherers.
|
||||
section Broze Age
|
||||
section Bronze Age
|
||||
2300 BC : People arrive from Europe and settle in Britain. <br>They bring farming and metalworking.
|
||||
: New styles of pottery and ways of burying the dead appear.
|
||||
2200 BC : The last major building works are completed at Stonehenge.<br> People now bury their dead in stone circles.
|
||||
@@ -51,7 +51,7 @@ describe('Timeline diagram', () => {
|
||||
title History of Social Media Platform
|
||||
2002 : LinkedIn
|
||||
2004 : Facebook : Google
|
||||
2005 : Youtube
|
||||
2005 : YouTube
|
||||
2006 : Twitter
|
||||
`,
|
||||
{}
|
||||
@@ -68,7 +68,7 @@ describe('Timeline diagram', () => {
|
||||
title History of Social Media Platform
|
||||
2002 : LinkedIn
|
||||
2004 : Facebook : Google
|
||||
2005 : Youtube
|
||||
2005 : YouTube
|
||||
2006 : Twitter
|
||||
2007 : Tumblr
|
||||
2008 : Instagram
|
||||
@@ -84,7 +84,7 @@ describe('Timeline diagram', () => {
|
||||
title History of Social Media Platform
|
||||
2002 : LinkedIn
|
||||
2004 : Facebook : Google
|
||||
2005 : Youtube
|
||||
2005 : YouTube
|
||||
2006 : Twitter
|
||||
2007 : Tumblr
|
||||
2008 : Instagram
|
||||
@@ -101,7 +101,7 @@ describe('Timeline diagram', () => {
|
||||
title History of Social Media Platform
|
||||
2002 : LinkedIn
|
||||
2004 : Facebook : Google
|
||||
2005 : Youtube
|
||||
2005 : YouTube
|
||||
2006 : Twitter
|
||||
2007 : Tumblr
|
||||
2008 : Instagram
|
||||
@@ -118,7 +118,7 @@ describe('Timeline diagram', () => {
|
||||
title History of Social Media Platform
|
||||
2002 : LinkedIn
|
||||
2004 : Facebook : Google
|
||||
2005 : Youtube
|
||||
2005 : YouTube
|
||||
2006 : Twitter
|
||||
2007 : Tumblr
|
||||
2008 : Instagram
|
||||
@@ -135,7 +135,7 @@ describe('Timeline diagram', () => {
|
||||
title History of Social Media Platform
|
||||
2002 : LinkedIn
|
||||
2004 : Facebook : Google
|
||||
2005 : Youtube
|
||||
2005 : YouTube
|
||||
2006 : Twitter
|
||||
2007 : Tumblr
|
||||
2008 : Instagram
|
||||
@@ -152,7 +152,7 @@ describe('Timeline diagram', () => {
|
||||
title History of Social Media Platform
|
||||
2002 : LinkedIn
|
||||
2004 : Facebook : Google
|
||||
2005 : Youtube
|
||||
2005 : YouTube
|
||||
2006 : Twitter
|
||||
2007 : Tumblr
|
||||
2008 : Instagram
|
||||
@@ -161,4 +161,68 @@ describe('Timeline diagram', () => {
|
||||
{}
|
||||
);
|
||||
});
|
||||
|
||||
it('11: should render timeline with many stacked events and proper timeline line length', () => {
|
||||
imgSnapshotTest(
|
||||
`timeline
|
||||
title Medical Device Lifecycle
|
||||
section Pre-Development
|
||||
Quality Management System : Regulatory Compliance : Risk Management
|
||||
section Development
|
||||
Management Responsibility : Planning Activities : Human Resources
|
||||
Resource Management : Management Reviews : Infrastructure
|
||||
section Post-Development
|
||||
Product Realization Activities : Planning Activities : Customer-related Processes
|
||||
Post-Production Activities : Feedback : Complaints : Adverse Events
|
||||
: Research and Development : Purchasing Activities
|
||||
: Production Activities : Installation Activities
|
||||
: Servicing Activities : Post-Market Surveillance
|
||||
`,
|
||||
{}
|
||||
);
|
||||
});
|
||||
|
||||
it('12: should render timeline with proper vertical line lengths for all columns', () => {
|
||||
imgSnapshotTest(
|
||||
`---
|
||||
config:
|
||||
theme: base
|
||||
themeVariables:
|
||||
fontFamily: Fira Sans
|
||||
fontSize: 17px
|
||||
cScale0: '#b3cde0'
|
||||
cScale1: '#f49090'
|
||||
cScale2: '#85d5b8'
|
||||
---
|
||||
|
||||
timeline
|
||||
title Medical Device Lifecycle
|
||||
section Planning
|
||||
Quality Management System (4): Regulatory Compliance (4.1.1)
|
||||
: Risk Management (4.1.2)
|
||||
Management Resposibility (5): Planning Activities (5.4)
|
||||
: Management Reviews (5.6)
|
||||
Resource Management (6): Human Resources (6.2)
|
||||
: Infrastructure (6.3)
|
||||
section Realization
|
||||
Research and Development (7.3): RnD Planning (7.3.2)
|
||||
: Inputs (7.3.3)
|
||||
: Outputs (7.3.4)
|
||||
: Review (7.3.5)
|
||||
: Verification (7.3.6)
|
||||
: Validation (7.3.7)
|
||||
Purchasing (7.4): Purchasing Process (7.4.1)
|
||||
: Purchasing Information (7.4.2)
|
||||
Production (7.5): Production Activities (7.5.1)
|
||||
: Production Feedback (8.2.1)
|
||||
Installation (7.5.3): Installation Activities (7.5.3)
|
||||
Servicing (7.5.4): Servicing Activities (7.5.4)
|
||||
section Post-Production
|
||||
Post-Market Activities (8): Feedback (8.2.1)
|
||||
: Complaints (8.2.2)
|
||||
: Adverse Events (8.2.3)
|
||||
`,
|
||||
{}
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -179,6 +179,7 @@ describe('XY Chart', () => {
|
||||
axisLineWidth: 5
|
||||
chartOrientation: horizontal
|
||||
plotReservedSpacePercent: 60
|
||||
showDataLabel: true
|
||||
---
|
||||
xychart-beta
|
||||
title "Sales Revenue"
|
||||
@@ -315,4 +316,516 @@ describe('XY Chart', () => {
|
||||
);
|
||||
cy.get('svg');
|
||||
});
|
||||
|
||||
it('should render vertical bar chart with labels', () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
---
|
||||
config:
|
||||
xyChart:
|
||||
showDataLabel: true
|
||||
---
|
||||
xychart-beta
|
||||
title "Sales Revenue"
|
||||
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
|
||||
y-axis "Revenue (in $)" 4000 --> 11000
|
||||
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
|
||||
`,
|
||||
{}
|
||||
);
|
||||
});
|
||||
|
||||
it('should render horizontal bar chart with labels', () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
---
|
||||
config:
|
||||
xyChart:
|
||||
showDataLabel: true
|
||||
chartOrientation: horizontal
|
||||
---
|
||||
xychart-beta
|
||||
title "Sales Revenue"
|
||||
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
|
||||
y-axis "Revenue (in $)" 4000 --> 11000
|
||||
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
|
||||
`,
|
||||
{}
|
||||
);
|
||||
});
|
||||
|
||||
it('should render vertical bar chart without labels by default', () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
xychart-beta
|
||||
title "Sales Revenue"
|
||||
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
|
||||
y-axis "Revenue (in $)" 4000 --> 11000
|
||||
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
|
||||
`,
|
||||
{}
|
||||
);
|
||||
});
|
||||
|
||||
it('should render horizontal bar chart without labels by default', () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
---
|
||||
config:
|
||||
xyChart:
|
||||
chartOrientation: horizontal
|
||||
---
|
||||
xychart-beta
|
||||
title "Sales Revenue"
|
||||
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
|
||||
y-axis "Revenue (in $)" 4000 --> 11000
|
||||
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
|
||||
`,
|
||||
{}
|
||||
);
|
||||
});
|
||||
|
||||
it('should render multiple bar plots vertically with labels correctly', () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
---
|
||||
config:
|
||||
xyChart:
|
||||
showDataLabel: true
|
||||
---
|
||||
xychart-beta
|
||||
title "Multiple Bar Plots"
|
||||
x-axis Categories [A, B, C]
|
||||
y-axis "Values" 0 --> 100
|
||||
bar [10, 50, 90]
|
||||
`,
|
||||
{}
|
||||
);
|
||||
});
|
||||
|
||||
it('should render multiple bar plots horizontally with labels correctly', () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
---
|
||||
config:
|
||||
xyChart:
|
||||
showDataLabel: true
|
||||
chartOrientation: horizontal
|
||||
---
|
||||
xychart-beta
|
||||
title "Multiple Bar Plots"
|
||||
x-axis Categories [A, B, C]
|
||||
y-axis "Values" 0 --> 100
|
||||
bar [10, 50, 90]
|
||||
`,
|
||||
{}
|
||||
);
|
||||
});
|
||||
|
||||
it('should render a single bar with label for a vertical xy-chart', () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
---
|
||||
config:
|
||||
xyChart:
|
||||
showDataLabel: true
|
||||
---
|
||||
xychart-beta
|
||||
title "Single Bar Chart"
|
||||
x-axis Categories [A]
|
||||
y-axis "Value" 0 --> 100
|
||||
bar [75]
|
||||
`,
|
||||
{}
|
||||
);
|
||||
});
|
||||
|
||||
it('should render a single bar with label for a horizontal xy-chart', () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
---
|
||||
config:
|
||||
xyChart:
|
||||
showDataLabel: true
|
||||
chartOrientation: horizontal
|
||||
---
|
||||
xychart-beta
|
||||
title "Single Bar Chart"
|
||||
x-axis Categories [A]
|
||||
y-axis "Value" 0 --> 100
|
||||
bar [75]
|
||||
`,
|
||||
{}
|
||||
);
|
||||
});
|
||||
|
||||
it('should render negative and decimal values with correct labels for vertical xy-chart', () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
---
|
||||
config:
|
||||
xyChart:
|
||||
showDataLabel: true
|
||||
---
|
||||
xychart-beta
|
||||
title "Decimal and Negative Values"
|
||||
x-axis Categories [A, B, C]
|
||||
y-axis -10 --> 10
|
||||
bar [ -2.5, 0.75, 5.1 ]
|
||||
`,
|
||||
{}
|
||||
);
|
||||
});
|
||||
|
||||
it('should render negative and decimal values with correct labels for horizontal xy-chart', () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
---
|
||||
config:
|
||||
xyChart:
|
||||
showDataLabel: true
|
||||
chartOrientation: horizontal
|
||||
---
|
||||
xychart-beta
|
||||
title "Decimal and Negative Values"
|
||||
x-axis Categories [A, B, C]
|
||||
y-axis -10 --> 10
|
||||
bar [ -2.5, 0.75, 5.1 ]
|
||||
`,
|
||||
{}
|
||||
);
|
||||
});
|
||||
|
||||
it('should render data labels within each bar in the vertical xy-chart', () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
---
|
||||
config:
|
||||
xyChart:
|
||||
showDataLabel: true
|
||||
---
|
||||
xychart-beta
|
||||
title "Sales Revenue"
|
||||
x-axis Months [jan,b,c]
|
||||
y-axis "Revenue (in $)" 4000 --> 12000
|
||||
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000, 3000, 2000, 500, 2000, 3000, 11000, 5000, 6000]
|
||||
`,
|
||||
{}
|
||||
);
|
||||
|
||||
cy.get('g.bar-plot-0').within(() => {
|
||||
cy.get('rect').each(($rect, index) => {
|
||||
// Extract bar properties
|
||||
const barProps = {
|
||||
x: parseFloat($rect.attr('x')),
|
||||
y: parseFloat($rect.attr('y')),
|
||||
width: parseFloat($rect.attr('width')),
|
||||
height: parseFloat($rect.attr('height')),
|
||||
};
|
||||
|
||||
// Get the text element corresponding to this bar by index.
|
||||
cy.get('text')
|
||||
.eq(index)
|
||||
.then(($text) => {
|
||||
const bbox = $text[0].getBBox();
|
||||
const textProps = {
|
||||
x: bbox.x,
|
||||
y: bbox.y,
|
||||
width: bbox.width,
|
||||
height: bbox.height,
|
||||
};
|
||||
|
||||
// Verify that the text label is positioned within the boundaries of the bar.
|
||||
expect(textProps.x).to.be.greaterThan(barProps.x);
|
||||
expect(textProps.x + textProps.width).to.be.lessThan(barProps.x + barProps.width);
|
||||
|
||||
// Check horizontal alignment (within tolerance)
|
||||
expect(textProps.x + textProps.width / 2).to.be.closeTo(
|
||||
barProps.x + barProps.width / 2,
|
||||
5
|
||||
);
|
||||
|
||||
expect(textProps.y).to.be.greaterThan(barProps.y);
|
||||
expect(textProps.y + textProps.height).to.be.lessThan(barProps.y + barProps.height);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
it('should render data labels within each bar in the horizontal xy-chart', () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
---
|
||||
config:
|
||||
xyChart:
|
||||
showDataLabel: true
|
||||
chartOrientation: horizontal
|
||||
---
|
||||
xychart-beta
|
||||
title "Sales Revenue"
|
||||
x-axis Months [jan,b,c]
|
||||
y-axis "Revenue (in $)" 4000 --> 12000
|
||||
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000, 3000, 2000, 500, 2000, 3000, 11000, 5000, 6000]
|
||||
`,
|
||||
{}
|
||||
);
|
||||
|
||||
cy.get('g.bar-plot-0').within(() => {
|
||||
cy.get('rect').each(($rect, index) => {
|
||||
// Extract bar properties
|
||||
const barProps = {
|
||||
x: parseFloat($rect.attr('x')),
|
||||
y: parseFloat($rect.attr('y')),
|
||||
width: parseFloat($rect.attr('width')),
|
||||
height: parseFloat($rect.attr('height')),
|
||||
};
|
||||
|
||||
// Get the text element corresponding to this bar by index.
|
||||
cy.get('text')
|
||||
.eq(index)
|
||||
.then(($text) => {
|
||||
const bbox = $text[0].getBBox();
|
||||
const textProps = {
|
||||
x: bbox.x,
|
||||
y: bbox.y,
|
||||
width: bbox.width,
|
||||
height: bbox.height,
|
||||
};
|
||||
|
||||
// Verify that the text label is positioned within the boundaries of the bar.
|
||||
expect(textProps.x).to.be.greaterThan(barProps.x);
|
||||
expect(textProps.x + textProps.width).to.be.lessThan(barProps.x + barProps.width);
|
||||
|
||||
expect(textProps.y).to.be.greaterThan(barProps.y);
|
||||
expect(textProps.y + textProps.height).to.be.lessThan(barProps.y + barProps.height);
|
||||
expect(textProps.y + textProps.height / 2).to.be.closeTo(
|
||||
barProps.y + barProps.height / 2,
|
||||
5
|
||||
);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
it('should render data labels within each bar in the vertical xy-chart with a lot of bars of different sizes', () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
---
|
||||
config:
|
||||
xyChart:
|
||||
showDataLabel: true
|
||||
---
|
||||
xychart-beta
|
||||
title "Sales Revenue"
|
||||
x-axis Months [jan,a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s]
|
||||
y-axis "Revenue (in $)" 4000 --> 12000
|
||||
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000, 8000, 10000, 5000, 7600, 4999,11000 ,5000,6000]
|
||||
`,
|
||||
{}
|
||||
);
|
||||
|
||||
cy.get('g.bar-plot-0').within(() => {
|
||||
cy.get('rect').each(($rect, index) => {
|
||||
// Extract bar properties
|
||||
const barProps = {
|
||||
x: parseFloat($rect.attr('x')),
|
||||
y: parseFloat($rect.attr('y')),
|
||||
width: parseFloat($rect.attr('width')),
|
||||
height: parseFloat($rect.attr('height')),
|
||||
};
|
||||
|
||||
// Get the text element corresponding to this bar by index.
|
||||
cy.get('text')
|
||||
.eq(index)
|
||||
.then(($text) => {
|
||||
const bbox = $text[0].getBBox();
|
||||
const textProps = {
|
||||
x: bbox.x,
|
||||
y: bbox.y,
|
||||
width: bbox.width,
|
||||
height: bbox.height,
|
||||
};
|
||||
|
||||
// Verify that the text label is positioned within the boundaries of the bar.
|
||||
expect(textProps.x).to.be.greaterThan(barProps.x);
|
||||
expect(textProps.x + textProps.width).to.be.lessThan(barProps.x + barProps.width);
|
||||
|
||||
// Check horizontal alignment (within tolerance)
|
||||
expect(textProps.x + textProps.width / 2).to.be.closeTo(
|
||||
barProps.x + barProps.width / 2,
|
||||
5
|
||||
);
|
||||
|
||||
expect(textProps.y).to.be.greaterThan(barProps.y);
|
||||
expect(textProps.y + textProps.height).to.be.lessThan(barProps.y + barProps.height);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
it('should render data labels within each bar in the horizontal xy-chart with a lot of bars of different sizes', () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
---
|
||||
config:
|
||||
xyChart:
|
||||
showDataLabel: true
|
||||
chartOrientation: horizontal
|
||||
---
|
||||
xychart-beta
|
||||
title "Sales Revenue"
|
||||
x-axis Months [jan,a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s]
|
||||
y-axis "Revenue (in $)" 4000 --> 12000
|
||||
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000, 8000, 10000, 5000, 7600, 4999,11000 ,5000,6000]
|
||||
`,
|
||||
{}
|
||||
);
|
||||
|
||||
cy.get('g.bar-plot-0').within(() => {
|
||||
cy.get('rect').each(($rect, index) => {
|
||||
// Extract bar properties
|
||||
const barProps = {
|
||||
x: parseFloat($rect.attr('x')),
|
||||
y: parseFloat($rect.attr('y')),
|
||||
width: parseFloat($rect.attr('width')),
|
||||
height: parseFloat($rect.attr('height')),
|
||||
};
|
||||
|
||||
// Get the text element corresponding to this bar by index.
|
||||
cy.get('text')
|
||||
.eq(index)
|
||||
.then(($text) => {
|
||||
const bbox = $text[0].getBBox();
|
||||
const textProps = {
|
||||
x: bbox.x,
|
||||
y: bbox.y,
|
||||
width: bbox.width,
|
||||
height: bbox.height,
|
||||
};
|
||||
|
||||
// Verify that the text label is positioned within the boundaries of the bar.
|
||||
expect(textProps.x).to.be.greaterThan(barProps.x);
|
||||
expect(textProps.x + textProps.width).to.be.lessThan(barProps.x + barProps.width);
|
||||
|
||||
expect(textProps.y).to.be.greaterThan(barProps.y);
|
||||
expect(textProps.y + textProps.height).to.be.lessThan(barProps.y + barProps.height);
|
||||
expect(textProps.y + textProps.height / 2).to.be.closeTo(
|
||||
barProps.y + barProps.height / 2,
|
||||
5
|
||||
);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
it('should render data labels correctly for a bar in the vertical xy-chart', () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
---
|
||||
config:
|
||||
xyChart:
|
||||
showDataLabel: true
|
||||
---
|
||||
xychart-beta
|
||||
title "Sales Revenue"
|
||||
x-axis Months [jan]
|
||||
y-axis "Revenue (in $)" 3000 --> 12000
|
||||
bar [4000]
|
||||
`,
|
||||
{}
|
||||
);
|
||||
|
||||
cy.get('g.bar-plot-0').within(() => {
|
||||
cy.get('rect').each(($rect, index) => {
|
||||
// Extract bar properties
|
||||
const barProps = {
|
||||
x: parseFloat($rect.attr('x')),
|
||||
y: parseFloat($rect.attr('y')),
|
||||
width: parseFloat($rect.attr('width')),
|
||||
height: parseFloat($rect.attr('height')),
|
||||
};
|
||||
|
||||
// Get the text element corresponding to this bar by index.
|
||||
cy.get('text')
|
||||
.eq(index)
|
||||
.then(($text) => {
|
||||
const bbox = $text[0].getBBox();
|
||||
const textProps = {
|
||||
x: bbox.x,
|
||||
y: bbox.y,
|
||||
width: bbox.width,
|
||||
height: bbox.height,
|
||||
};
|
||||
|
||||
// Verify that the text label is positioned within the boundaries of the bar.
|
||||
expect(textProps.x).to.be.greaterThan(barProps.x);
|
||||
expect(textProps.x + textProps.width).to.be.lessThan(barProps.x + barProps.width);
|
||||
|
||||
// Check horizontal alignment (within tolerance)
|
||||
expect(textProps.x + textProps.width / 2).to.be.closeTo(
|
||||
barProps.x + barProps.width / 2,
|
||||
5
|
||||
);
|
||||
|
||||
expect(textProps.y).to.be.greaterThan(barProps.y);
|
||||
expect(textProps.y + textProps.height).to.be.lessThan(barProps.y + barProps.height);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
it('should render data labels correctly for a bar in the horizontal xy-chart', () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
---
|
||||
config:
|
||||
xyChart:
|
||||
showDataLabel: true
|
||||
chartOrientation: horizontal
|
||||
---
|
||||
xychart-beta
|
||||
title "Sales Revenue"
|
||||
x-axis Months [jan]
|
||||
y-axis "Revenue (in $)" 3000 --> 12000
|
||||
bar [4000]
|
||||
`,
|
||||
{}
|
||||
);
|
||||
|
||||
cy.get('g.bar-plot-0').within(() => {
|
||||
cy.get('rect').each(($rect, index) => {
|
||||
// Extract bar properties
|
||||
const barProps = {
|
||||
x: parseFloat($rect.attr('x')),
|
||||
y: parseFloat($rect.attr('y')),
|
||||
width: parseFloat($rect.attr('width')),
|
||||
height: parseFloat($rect.attr('height')),
|
||||
};
|
||||
|
||||
// Get the text element corresponding to this bar by index.
|
||||
cy.get('text')
|
||||
.eq(index)
|
||||
.then(($text) => {
|
||||
const bbox = $text[0].getBBox();
|
||||
const textProps = {
|
||||
x: bbox.x,
|
||||
y: bbox.y,
|
||||
width: bbox.width,
|
||||
height: bbox.height,
|
||||
};
|
||||
|
||||
// Verify that the text label is positioned within the boundaries of the bar.
|
||||
expect(textProps.x).to.be.greaterThan(barProps.x);
|
||||
expect(textProps.x + textProps.width).to.be.lessThan(barProps.x + barProps.width);
|
||||
|
||||
expect(textProps.y).to.be.greaterThan(barProps.y);
|
||||
expect(textProps.y + textProps.height).to.be.lessThan(barProps.y + barProps.height);
|
||||
expect(textProps.y + textProps.height / 2).to.be.closeTo(
|
||||
barProps.y + barProps.height / 2,
|
||||
5
|
||||
);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
|
||||
/>
|
||||
<link
|
||||
href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
|
||||
@@ -30,8 +30,8 @@
|
||||
.mermaid svg {
|
||||
/* font-size: 18px !important; */
|
||||
background-color: #eee;
|
||||
background-image: radial-gradient(#fff 1%, transparent 11%),
|
||||
radial-gradient(#fff 1%, transparent 11%);
|
||||
background-image:
|
||||
radial-gradient(#fff 1%, transparent 11%), radial-gradient(#fff 1%, transparent 11%);
|
||||
background-size: 20px 20px;
|
||||
background-position:
|
||||
0 0,
|
||||
@@ -60,7 +60,7 @@
|
||||
<pre id="diagram" class="mermaid2">
|
||||
timeline
|
||||
title My day
|
||||
section section with no tasks
|
||||
section Section with no tasks
|
||||
section Go to work at the dog office
|
||||
1930 : first step : second step is a long step
|
||||
: third step
|
||||
@@ -70,18 +70,18 @@
|
||||
1960 : India fights poverty, looses war to China and gets nuclear weapons from USA and USSR
|
||||
1970 : Green Revolution comes to india
|
||||
section Another section with no tasks
|
||||
I am a big big big tasks
|
||||
I am not so big tasks
|
||||
I am a very, very big task
|
||||
I am not so big task
|
||||
</pre>
|
||||
<pre id="diagram" class="mermaid">
|
||||
timeline
|
||||
title MermaidChart 2023 Timeline
|
||||
section 2023 Q1 <br> Release Personal Tier
|
||||
Buttet 1 : sub-point 1a : sub-point 1b
|
||||
Bullet 1 : sub-point 1a : sub-point 1b
|
||||
: sub-point 1c
|
||||
Bullet 2 : sub-point 2a : sub-point 2b
|
||||
section 2023 Q2 <br> Release XYZ Tier
|
||||
Buttet 3 : sub-point <br> 3a : sub-point 3b
|
||||
Bullet 3 : sub-point <br> 3a : sub-point 3b
|
||||
: sub-point 3c
|
||||
Bullet 4 : sub-point 4a : sub-point 4b
|
||||
|
||||
@@ -93,7 +93,7 @@
|
||||
section Stone Age
|
||||
7600 BC : Britain's oldest known house was built in Orkney, Scotland
|
||||
6000 BC : Sea levels rise and Britain becomes an island. The people who live here are hunter-gatherers.
|
||||
section Broze Age
|
||||
section Bronze Age
|
||||
2300 BC : People arrive from Europe and settle in Britain. They bring farming and metalworking.
|
||||
: New styles of pottery and ways of burying the dead appear.
|
||||
2200 BC : The last major building works are completed at Stonehenge. People now bury their dead in stone circles.
|
||||
@@ -106,7 +106,7 @@
|
||||
title History of Social Media Platform
|
||||
2002 : LinkedIn
|
||||
2004 : Facebook : Google : Pixar
|
||||
2005 : Youtube
|
||||
2005 : YouTube
|
||||
2006 : Twitter
|
||||
2007 : Tumblr
|
||||
2008s : Instagram
|
||||
@@ -122,7 +122,7 @@
|
||||
title History of Social Media Platform
|
||||
2002 : LinkedIn
|
||||
2004 : Facebook : Google : Pixar
|
||||
2005 : Youtube
|
||||
2005 : YouTube
|
||||
2006 : Twitter
|
||||
2007 : Tumblr
|
||||
2008s : Instagram
|
||||
@@ -139,7 +139,7 @@
|
||||
title History of Social Media Platform
|
||||
2002 : LinkedIn
|
||||
2004 : Facebook : Google
|
||||
2005 : Youtube
|
||||
2005 : YouTube
|
||||
2006 : Twitter
|
||||
2007 : Tumblr
|
||||
2008 : Instagram
|
||||
@@ -152,7 +152,7 @@
|
||||
title History of Social Media Platform
|
||||
2002 : LinkedIn
|
||||
2004 : Facebook : Google
|
||||
2005 : Youtube
|
||||
2005 : YouTube
|
||||
2006 : Twitter
|
||||
2007 : Tumblr
|
||||
2008s : Instagram
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
|
||||
@@ -37,7 +37,7 @@
|
||||
+String owner
|
||||
+BigDecimal balance
|
||||
+deposit(amount) bool
|
||||
+withdrawl(amount) int
|
||||
+withdrawal(amount) int
|
||||
}
|
||||
cssClass "BankAccount" customCss
|
||||
|
||||
@@ -56,7 +56,7 @@ classE o-- classF : aggregation
|
||||
+String owner
|
||||
+BigDecimal balance
|
||||
+deposit(amount) bool
|
||||
+withdrawl(amount) int
|
||||
+withdrawal(amount) int
|
||||
}
|
||||
Class01~T~ <|-- AveryLongClass : Cool
|
||||
Class03~T~ *-- Class04~T~
|
||||
|
||||
@@ -77,7 +77,7 @@
|
||||
|
||||
document.getElementsByTagName('body')[0].appendChild(div);
|
||||
}
|
||||
mermaid.initialize({ startOnLoad: true, securityLevel: 'strct', logLevel: 1 });
|
||||
mermaid.initialize({ startOnLoad: true, securityLevel: 'strict_', logLevel: 1 });
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
|
||||
@@ -31,7 +31,7 @@
|
||||
flowchart BT subgraph S1 sub1 -->sub2 end subgraph S2 sub4 end S1 --> S2 sub1 --> sub4
|
||||
</div>
|
||||
<div class="mermaid2" style="width: 50%; height: 200px">
|
||||
sequenceDiagram Alice->>Bob:Extremely utterly long line of longness which had preivously
|
||||
sequenceDiagram Alice->>Bob:Extremely utterly long line of longness which had previously
|
||||
overflown the actor box as it is much longer than what it should be Bob->>Alice: I'm short
|
||||
though
|
||||
</div>
|
||||
@@ -61,9 +61,9 @@
|
||||
#quot;elit#quot;."}}
|
||||
</div>
|
||||
<div class="mermaid2" style="width: 50%; height: 50%">
|
||||
flowchart TB internet nat routeur lb1 lb2 compute1 compute2 subgraph project routeur nat
|
||||
subgraph subnet1 compute1 lb1 end subgraph subnet2 compute2 lb2 end end internet --> routeur
|
||||
routeur --> subnet1 & subnet2 subnet1 & subnet2 --> nat --> internet
|
||||
flowchart TB internet nat router lb1 lb2 compute1 compute2 subgraph project router nat
|
||||
subgraph subnet1 compute1 lb1 end subgraph subnet2 compute2 lb2 end end internet --> router
|
||||
router --> subnet1 & subnet2 subnet1 & subnet2 --> nat --> internet
|
||||
</div>
|
||||
<div class="mermaid2" style="width: 50%; height: 50%">
|
||||
flowchart TD subgraph one[One] subgraph sub_one[Sub One] _sub_one end end subgraph two[Two]
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<style>
|
||||
svg {
|
||||
svg:not(svg svg) {
|
||||
border: 2px solid darkred;
|
||||
}
|
||||
.exClass2 > rect,
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
|
||||
/>
|
||||
<link
|
||||
href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
|
||||
/>
|
||||
<link
|
||||
href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
|
||||
@@ -4,7 +4,7 @@
|
||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
|
||||
@@ -38,7 +38,7 @@
|
||||
+String owner
|
||||
+BigDecimal balance
|
||||
+deposit(amount) bool
|
||||
+withdrawl(amount) int
|
||||
+withdrawal(amount) int
|
||||
}
|
||||
cssClass "BankAccount" customCss
|
||||
</pre>
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
|
||||
/>
|
||||
<link
|
||||
href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
|
||||
@@ -30,8 +30,8 @@
|
||||
.mermaid svg {
|
||||
/* font-size: 18px !important; */
|
||||
background-color: #efefef;
|
||||
background-image: radial-gradient(#fff 51%, transparent 91%),
|
||||
radial-gradient(#fff 51%, transparent 91%);
|
||||
background-image:
|
||||
radial-gradient(#fff 51%, transparent 91%), radial-gradient(#fff 51%, transparent 91%);
|
||||
background-size: 20px 20px;
|
||||
background-position:
|
||||
0 0,
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
|
||||
/>
|
||||
<link
|
||||
href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
|
||||
|
||||
@@ -4,14 +4,14 @@
|
||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
|
||||
/>
|
||||
<link
|
||||
href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link
|
||||
@@ -78,17 +78,46 @@
|
||||
font-family: monospace;
|
||||
font-size: 72px;
|
||||
}
|
||||
|
||||
pre {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* tspan {
|
||||
font-size: 6px !important;
|
||||
} */
|
||||
/* .flowchart-link {
|
||||
stroke-dasharray: 4, 4 !important;
|
||||
animation: flow 1s linear infinite;
|
||||
animation: dashdraw 4.93282s linear infinite;
|
||||
stroke-width: 2px !important;
|
||||
} */
|
||||
|
||||
@keyframes dashdraw {
|
||||
from {
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/*stroke-width:2;stroke-dasharray:10.000000,9.865639;stroke-dashoffset:-198.656393;animation: 4.932820s linear infinite;*/
|
||||
/* stroke-width:2;stroke-dasharray:10.000000,9.865639;stroke-dashoffset:-198.656393;animation: dashdraw 4.932820s linear infinite;*/
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<pre id="diagram4" class="mermaid">
|
||||
---
|
||||
config:
|
||||
layout: elk
|
||||
---
|
||||
flowchart LR
|
||||
D["Use the editor"] -- Mermaid js --> I["fa:fa-code Text"]
|
||||
D --> I & I
|
||||
a["a"]
|
||||
D@{ shape: trap-b}
|
||||
I@{ shape: lean-l}
|
||||
</pre>
|
||||
<pre id="diagram4" class="mermaid2">
|
||||
---
|
||||
config:
|
||||
layout: elk
|
||||
@@ -100,7 +129,7 @@ flowchart LR
|
||||
|
||||
B --> C
|
||||
</pre>
|
||||
<pre id="diagram4" class="mermaid">
|
||||
<pre id="diagram4" class="mermaid2">
|
||||
---
|
||||
config:
|
||||
layout: elk
|
||||
@@ -111,25 +140,27 @@ flowchart LR
|
||||
D --> I((I the Circle))
|
||||
D --> I
|
||||
</pre>
|
||||
<pre id="diagram4" class="mermaid">
|
||||
---
|
||||
config:
|
||||
layout: elk
|
||||
---
|
||||
<pre id="diagram4" class="mermaid2">
|
||||
---
|
||||
config:
|
||||
layout: elk
|
||||
theme: default
|
||||
look: classic
|
||||
---
|
||||
flowchart LR
|
||||
subgraph S2
|
||||
subgraph s1["APA"]
|
||||
D{"Use the editor"}
|
||||
end
|
||||
|
||||
|
||||
D -- Mermaid js --> I(("fa:fa-code Text"))
|
||||
D --> I
|
||||
D --> E --> I
|
||||
|
||||
end
|
||||
subgraph s1["APA"]
|
||||
D{"Use the editor"}
|
||||
end
|
||||
subgraph S2["S2"]
|
||||
s1
|
||||
I>"fa:fa-code Text"]
|
||||
E["E"]
|
||||
end
|
||||
D -- Mermaid js --> I
|
||||
D --> I & E
|
||||
E --> I
|
||||
</pre>
|
||||
<pre id="diagram4" class="mermaid">
|
||||
<pre id="diagram4" class="mermaid2">
|
||||
---
|
||||
config:
|
||||
layout: elk
|
||||
@@ -154,7 +185,7 @@ config:
|
||||
end
|
||||
end
|
||||
</pre>
|
||||
<pre id="diagram4" class="mermaid">
|
||||
<pre id="diagram4" class="mermaid2">
|
||||
---
|
||||
config:
|
||||
layout: elk
|
||||
@@ -167,7 +198,7 @@ config:
|
||||
D-->I
|
||||
D-->I
|
||||
</pre>
|
||||
<pre id="diagram4" class="mermaid">
|
||||
<pre id="diagram4" class="mermaid2">
|
||||
---
|
||||
config:
|
||||
layout: elk
|
||||
@@ -206,7 +237,7 @@ flowchart LR
|
||||
n8@{ shape: rect}
|
||||
|
||||
</pre>
|
||||
<pre id="diagram4" class="mermaid">
|
||||
<pre id="diagram4" class="mermaid2">
|
||||
---
|
||||
config:
|
||||
layout: elk
|
||||
@@ -222,7 +253,7 @@ flowchart LR
|
||||
|
||||
|
||||
</pre>
|
||||
<pre id="diagram4" class="mermaid">
|
||||
<pre id="diagram4" class="mermaid2">
|
||||
---
|
||||
config:
|
||||
layout: elk
|
||||
@@ -231,7 +262,7 @@ flowchart LR
|
||||
A{A} --> B & C
|
||||
</pre
|
||||
>
|
||||
<pre id="diagram4" class="mermaid">
|
||||
<pre id="diagram4" class="mermaid2">
|
||||
---
|
||||
config:
|
||||
layout: elk
|
||||
@@ -243,7 +274,7 @@ flowchart LR
|
||||
end
|
||||
</pre
|
||||
>
|
||||
<pre id="diagram4" class="mermaid">
|
||||
<pre id="diagram4" class="mermaid2">
|
||||
---
|
||||
config:
|
||||
layout: elk
|
||||
@@ -261,7 +292,7 @@ flowchart LR
|
||||
|
||||
|
||||
</pre>
|
||||
<pre id="diagram4" class="mermaid">
|
||||
<pre id="diagram4" class="mermaid2">
|
||||
---
|
||||
config:
|
||||
kanban:
|
||||
@@ -280,81 +311,81 @@ kanban
|
||||
task3[💻 Develop login feature]@{ ticket: 103 }
|
||||
|
||||
</pre>
|
||||
<pre id="diagram4" class="mermaid">
|
||||
<pre id="diagram4" class="mermaid2">
|
||||
flowchart LR
|
||||
nA[Default] --> A@{ icon: 'fa:bell', form: 'rounded' }
|
||||
|
||||
</pre>
|
||||
<pre id="diagram4" class="mermaid">
|
||||
<pre id="diagram4" class="mermaid2">
|
||||
flowchart LR
|
||||
nA[Style] --> A@{ icon: 'fa:bell', form: 'rounded' }
|
||||
style A fill:#f9f,stroke:#333,stroke-width:4px
|
||||
</pre>
|
||||
<pre id="diagram4" class="mermaid">
|
||||
<pre id="diagram4" class="mermaid2">
|
||||
flowchart LR
|
||||
nA[Class] --> A@{ icon: 'fa:bell', form: 'rounded' }
|
||||
A:::AClass
|
||||
classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
|
||||
</pre>
|
||||
<pre id="diagram4" class="mermaid">
|
||||
<pre id="diagram4" class="mermaid2">
|
||||
flowchart LR
|
||||
nA[Class] --> A@{ icon: 'logos:aws', form: 'rounded' }
|
||||
|
||||
</pre>
|
||||
<pre id="diagram4" class="mermaid">
|
||||
<pre id="diagram4" class="mermaid2">
|
||||
flowchart LR
|
||||
nA[Default] --> A@{ icon: 'fa:bell', form: 'square' }
|
||||
|
||||
</pre>
|
||||
<pre id="diagram4" class="mermaid">
|
||||
<pre id="diagram4" class="mermaid2">
|
||||
flowchart LR
|
||||
nA[Style] --> A@{ icon: 'fa:bell', form: 'square' }
|
||||
style A fill:#f9f,stroke:#333,stroke-width:4px
|
||||
</pre>
|
||||
<pre id="diagram4" class="mermaid">
|
||||
<pre id="diagram4" class="mermaid2">
|
||||
flowchart LR
|
||||
nA[Class] --> A@{ icon: 'fa:bell', form: 'square' }
|
||||
A:::AClass
|
||||
classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
|
||||
</pre>
|
||||
<pre id="diagram4" class="mermaid">
|
||||
<pre id="diagram4" class="mermaid2">
|
||||
flowchart LR
|
||||
nA[Class] --> A@{ icon: 'logos:aws', form: 'square' }
|
||||
|
||||
</pre>
|
||||
<pre id="diagram4" class="mermaid">
|
||||
<pre id="diagram4" class="mermaid2">
|
||||
flowchart LR
|
||||
nA[Default] --> A@{ icon: 'fa:bell', form: 'circle' }
|
||||
|
||||
</pre>
|
||||
<pre id="diagram4" class="mermaid">
|
||||
<pre id="diagram4" class="mermaid2">
|
||||
flowchart LR
|
||||
nA[Style] --> A@{ icon: 'fa:bell', form: 'circle' }
|
||||
style A fill:#f9f,stroke:#333,stroke-width:4px
|
||||
</pre>
|
||||
<pre id="diagram4" class="mermaid">
|
||||
<pre id="diagram4" class="mermaid2">
|
||||
flowchart LR
|
||||
nA[Class] --> A@{ icon: 'fa:bell', form: 'circle' }
|
||||
A:::AClass
|
||||
classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
|
||||
</pre>
|
||||
<pre id="diagram4" class="mermaid">
|
||||
<pre id="diagram4" class="mermaid2">
|
||||
flowchart LR
|
||||
nA[Class] --> A@{ icon: 'logos:aws', form: 'circle' }
|
||||
A:::AClass
|
||||
classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
|
||||
</pre>
|
||||
<pre id="diagram4" class="mermaid">
|
||||
<pre id="diagram4" class="mermaid2">
|
||||
flowchart LR
|
||||
nA[Style] --> A@{ icon: 'logos:aws', form: 'circle' }
|
||||
style A fill:#f9f,stroke:#333,stroke-width:4px
|
||||
</pre>
|
||||
<pre id="diagram4" class="mermaid">
|
||||
<pre id="diagram4" class="mermaid2">
|
||||
kanban
|
||||
id2[In progress]
|
||||
docs[Create Blog about the new diagram]@{ priority: 'Very Low', ticket: MC-2037, assigned: 'knsv' }
|
||||
</pre>
|
||||
<pre id="diagram4" class="mermaid">
|
||||
<pre id="diagram4" class="mermaid2">
|
||||
---
|
||||
config:
|
||||
kanban:
|
||||
@@ -366,7 +397,7 @@ kanban
|
||||
[Create Documentation]
|
||||
docs[Create Blog about the new diagram]
|
||||
id7[In progress]
|
||||
id6[Create renderer so that it works in all cases. We also add som extra text here for testing purposes. And some more just for the extra flare.]
|
||||
id6[Create renderer so that it works in all cases. We also add some extra text here for testing purposes. And some more just for the extra flare.]
|
||||
id9[Ready for deploy]
|
||||
id8[Design grammar]@{ assigned: 'knsv' }
|
||||
id10[Ready for test]
|
||||
@@ -414,7 +445,10 @@ kanban
|
||||
window.callback = function () {
|
||||
alert('A callback was triggered');
|
||||
};
|
||||
mermaid.initialize({
|
||||
function callback() {
|
||||
alert('It worked');
|
||||
}
|
||||
await mermaid.initialize({
|
||||
// theme: 'base',
|
||||
// theme: 'default',
|
||||
// theme: 'forest',
|
||||
@@ -426,9 +460,11 @@ kanban
|
||||
// layout: 'fixed',
|
||||
// htmlLabels: false,
|
||||
flowchart: { titleTopMargin: 10 },
|
||||
|
||||
// fontFamily: 'Caveat',
|
||||
// fontFamily: 'Kalam',
|
||||
// fontFamily: 'courier',
|
||||
fontFamily: 'arial',
|
||||
sequence: {
|
||||
actorFontFamily: 'courier',
|
||||
noteFontFamily: 'courier',
|
||||
@@ -440,10 +476,9 @@ kanban
|
||||
fontSize: 12,
|
||||
logLevel: 0,
|
||||
securityLevel: 'loose',
|
||||
callback,
|
||||
});
|
||||
function callback() {
|
||||
alert('It worked');
|
||||
}
|
||||
|
||||
mermaid.parseError = function (err, hash) {
|
||||
console.error('In parse error:');
|
||||
console.error(err);
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
|
||||
/>
|
||||
<link
|
||||
href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
|
||||
@@ -62,56 +62,23 @@
|
||||
|
||||
<body style="display: flex; gap: 2rem; flex-direction: row">
|
||||
<pre id="diagram4" class="mermaid">
|
||||
flowchart LR
|
||||
A@{ icon: "fa:window-minimize", form: circle }
|
||||
E@{ icon: "fa:window-minimize", form: circle }
|
||||
B@{ icon: "fa:bell", form: circle }
|
||||
B2@{ icon: "fa:bell", form: circle }
|
||||
C@{ icon: "fa:address-book", form: square }
|
||||
D@{ icon: "fa:star-half", form: square }
|
||||
A --> E
|
||||
B --> B2
|
||||
|
||||
flowchart
|
||||
A --> A
|
||||
subgraph B
|
||||
B1 --> B1
|
||||
end
|
||||
subgraph C
|
||||
subgraph C1
|
||||
C2 --> C2
|
||||
subgraph D
|
||||
D1 --> D1
|
||||
end
|
||||
D --> D
|
||||
end
|
||||
C1 --> C1
|
||||
end
|
||||
|
||||
</pre>
|
||||
<pre id="diagram4" class="mermaid2">
|
||||
flowchart TB
|
||||
A --test2--> B2@{ icon: "fa:bell", form: "rounded", label: "B2 aiduaid uyawduad uaduabd uyduadb", pos: "b" }
|
||||
B2 --test--> C
|
||||
D --> B2 --> E
|
||||
style B2 fill:#f9f,stroke:#333,stroke-width:4px
|
||||
</pre
|
||||
>
|
||||
<pre id="diagram43" class="mermaid2">
|
||||
flowchart BT
|
||||
A --test2--> B2@{ icon: "fa:bell", form: "square", label: "B2", pos: "t", h: 40, w: 30 }
|
||||
B2 --test--> C
|
||||
D --> B2 --> E
|
||||
</pre
|
||||
>
|
||||
<pre id="diagram4" class="mermaid2">
|
||||
flowchart BT
|
||||
A --test2--> B2@{ icon: "fa:bell", label: "B2 awiugdawu uydgayuiwd wuydguy", pos: "b", h: 40, w: 30 }
|
||||
B2 --test--> C
|
||||
</pre
|
||||
>
|
||||
<pre id="diagram43" class="mermaid2">
|
||||
flowchart BT
|
||||
A --test2--> B2@{ icon: "fa:bell", label: "B2 dawuygd ayuwgd uy", pos: "t", h: 40, w: 30 }
|
||||
B2 --test--> C
|
||||
</pre
|
||||
>
|
||||
<pre id="diagram6" class="mermaid2">
|
||||
flowchart TB
|
||||
A --> B2@{ icon: "fa:bell", form: "circle", label: "test augfuyfavf ydvaubfuac", pos: "t", w: 200, h: 100 } --> C
|
||||
</pre
|
||||
>
|
||||
<pre id="diagram6" class="mermaid2">
|
||||
flowchart TB
|
||||
A --> B2@{ icon: "fa:bell", form: "circle", label: "test augfuyfavf ydvaubfuac", pos: "b", w: 200, h: 100 } --> C
|
||||
D --> B2 --> E
|
||||
</pre
|
||||
>
|
||||
<script type="module">
|
||||
import mermaid from './mermaid.esm.mjs';
|
||||
import layouts from './mermaid-layout-elk.esm.mjs';
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
|
||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css" />
|
||||
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css" rel="stylesheet" />
|
||||
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
|
||||
@@ -14,12 +14,28 @@ function markRendered() {
|
||||
}
|
||||
}
|
||||
|
||||
function loadFontAwesomeCSS() {
|
||||
const link = document.createElement('link');
|
||||
link.rel = 'stylesheet';
|
||||
link.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css';
|
||||
|
||||
document.head.appendChild(link);
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
link.onload = resolve;
|
||||
link.onerror = () => reject(new Error('Failed to load FontAwesome'));
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* ##contentLoaded Callback function that is called when page is loaded. This functions fetches
|
||||
* configuration for mermaid rendering and calls init for rendering the mermaid diagrams on the
|
||||
* page.
|
||||
*/
|
||||
const contentLoaded = async function () {
|
||||
await loadFontAwesomeCSS();
|
||||
await Promise.all(Array.from(document.fonts, (font) => font.load()));
|
||||
|
||||
let pos = document.location.href.indexOf('?graph=');
|
||||
if (pos > 0) {
|
||||
pos = pos + 7;
|
||||
@@ -50,8 +66,13 @@ const contentLoaded = async function () {
|
||||
|
||||
mermaid.registerLayoutLoaders(layouts);
|
||||
mermaid.initialize(graphObj.mermaid);
|
||||
/**
|
||||
* CC-BY-4.0
|
||||
* Copyright (c) Fonticons, Inc. - https://fontawesome.com/license/free
|
||||
* https://fontawesome.com/icons/bell?f=classic&s=regular
|
||||
*/
|
||||
const staticBellIconPack = {
|
||||
prefix: 'fa6-regular',
|
||||
prefix: 'fa',
|
||||
icons: {
|
||||
bell: {
|
||||
body: '<path fill="currentColor" d="M224 0c-17.7 0-32 14.3-32 32v19.2C119 66 64 130.6 64 208v25.4c0 45.4-15.5 89.5-43.8 124.9L5.3 377c-5.8 7.2-6.9 17.1-2.9 25.4S14.8 416 24 416h400c9.2 0 17.6-5.3 21.6-13.6s2.9-18.2-2.9-25.4l-14.9-18.6c-28.3-35.5-43.8-79.6-43.8-125V208c0-77.4-55-142-128-156.8V32c0-17.7-14.3-32-32-32m0 96c61.9 0 112 50.1 112 112v25.4c0 47.9 13.9 94.6 39.7 134.6H72.3c25.8-40 39.7-86.7 39.7-134.6V208c0-61.9 50.1-112 112-112m64 352H160c0 17 6.7 33.3 18.7 45.3S207 512 224 512s33.3-6.7 45.3-18.7S288 465 288 448"/>',
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
|
||||
@@ -105,7 +105,7 @@
|
||||
let diagram = 'graph LR\n';
|
||||
diagram += " B(<a href='<";
|
||||
diagram += 'script></';
|
||||
diagram += "script>Javascript:xssAttack`1`'>Click)";
|
||||
diagram += "script>JavaScript:xssAttack`1`'>Click)";
|
||||
// diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n";
|
||||
console.log(diagram);
|
||||
// document.querySelector('#diagram').innerHTML = diagram;
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
|
||||
|
||||
@@ -50,7 +50,7 @@
|
||||
setPoints(List~int~ points)
|
||||
getPoints() List~int~
|
||||
}
|
||||
|
||||
|
||||
Square : -List~string~ messages
|
||||
Square : +setMessages(List~string~ messages)
|
||||
Square : +getMessages() List~string~
|
||||
@@ -88,7 +88,7 @@
|
||||
---
|
||||
classDiagram
|
||||
class Duck {
|
||||
|
||||
|
||||
}
|
||||
</pre>
|
||||
</div>
|
||||
@@ -127,8 +127,8 @@
|
||||
-attribute:type
|
||||
- attribute : type
|
||||
test
|
||||
|
||||
+ GetAttribute() type
|
||||
|
||||
+ GetAttribute() type
|
||||
+ GetAttribute() type
|
||||
}
|
||||
</pre>
|
||||
@@ -449,7 +449,7 @@
|
||||
---
|
||||
config:
|
||||
theme: forest
|
||||
look: handDrawns
|
||||
look: handDrawn
|
||||
layout: elk
|
||||
---
|
||||
classDiagram
|
||||
|
||||
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 {
|
||||
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>
|
||||
@@ -2,151 +2,215 @@
|
||||
"durations": [
|
||||
{
|
||||
"spec": "cypress/integration/other/configuration.spec.js",
|
||||
"duration": 4989
|
||||
"duration": 6130
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/other/external-diagrams.spec.js",
|
||||
"duration": 1382
|
||||
"duration": 1974
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/other/ghsa.spec.js",
|
||||
"duration": 3178
|
||||
"duration": 3308
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/other/iife.spec.js",
|
||||
"duration": 1372
|
||||
"duration": 1877
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/other/interaction.spec.js",
|
||||
"duration": 8998
|
||||
"duration": 10902
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/other/rerender.spec.js",
|
||||
"duration": 1249
|
||||
"duration": 1836
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/other/xss.spec.js",
|
||||
"duration": 25664
|
||||
"duration": 26467
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/appli.spec.js",
|
||||
"duration": 1928
|
||||
"duration": 3129
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/architecture.spec.ts",
|
||||
"duration": 2330
|
||||
"duration": 104
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/block.spec.js",
|
||||
"duration": 11156
|
||||
"duration": 16230
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/c4.spec.js",
|
||||
"duration": 3418
|
||||
"duration": 5231
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/classDiagram-elk-v3.spec.js",
|
||||
"duration": 38113
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/classDiagram-handDrawn-v3.spec.js",
|
||||
"duration": 36423
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/classDiagram-v2.spec.js",
|
||||
"duration": 14866
|
||||
"duration": 22509
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/classDiagram-v3.spec.js",
|
||||
"duration": 34933
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/classDiagram.spec.js",
|
||||
"duration": 9894
|
||||
"duration": 14681
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/conf-and-directives.spec.js",
|
||||
"duration": 5778
|
||||
"duration": 8877
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/current.spec.js",
|
||||
"duration": 1690
|
||||
"duration": 2517
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/erDiagram-unified.spec.js",
|
||||
"duration": 81226
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/erDiagram.spec.js",
|
||||
"duration": 9144
|
||||
"duration": 14211
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/errorDiagram.spec.js",
|
||||
"duration": 1951
|
||||
"duration": 3355
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/flowchart-elk.spec.js",
|
||||
"duration": 2196
|
||||
"duration": 38857
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/flowchart-handDrawn.spec.js",
|
||||
"duration": 21029
|
||||
"duration": 28570
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/flowchart-icon.spec.js",
|
||||
"duration": 6902
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/flowchart-shape-alias.spec.ts",
|
||||
"duration": 16087
|
||||
"duration": 23075
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/flowchart-v2.spec.js",
|
||||
"duration": 27465
|
||||
"duration": 40514
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/flowchart.spec.js",
|
||||
"duration": 20035
|
||||
"duration": 28611
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/gantt.spec.js",
|
||||
"duration": 11366
|
||||
"duration": 16605
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/gitGraph.spec.js",
|
||||
"duration": 34025
|
||||
"duration": 47636
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/iconShape.spec.ts",
|
||||
"duration": 185902
|
||||
"duration": 262219
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/imageShape.spec.ts",
|
||||
"duration": 41631
|
||||
"duration": 54111
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/info.spec.ts",
|
||||
"duration": 1736
|
||||
"duration": 3006
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/journey.spec.js",
|
||||
"duration": 2247
|
||||
"duration": 6858
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/kanban.spec.ts",
|
||||
"duration": 7281
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/katex.spec.js",
|
||||
"duration": 2144
|
||||
"duration": 3579
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/marker_unique_id.spec.js",
|
||||
"duration": 1646
|
||||
"duration": 2448
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/mindmap.spec.ts",
|
||||
"duration": 6406
|
||||
"duration": 10618
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/newShapes.spec.ts",
|
||||
"duration": 107219
|
||||
"duration": 140874
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/oldShapes.spec.ts",
|
||||
"duration": 108015
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/packet.spec.ts",
|
||||
"duration": 4241
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/pie.spec.ts",
|
||||
"duration": 5645
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/quadrantChart.spec.js",
|
||||
"duration": 8524
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/radar.spec.js",
|
||||
"duration": 5203
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/requirement.spec.js",
|
||||
"duration": 2635
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/requirementDiagram-unified.spec.js",
|
||||
"duration": 50512
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/sankey.spec.ts",
|
||||
"duration": 6692
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/sequencediagram.spec.js",
|
||||
"duration": 34559
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/stateDiagram-v2.spec.js",
|
||||
"duration": 24421
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/stateDiagram.spec.js",
|
||||
"duration": 15834
|
||||
"duration": 15316
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/theme.spec.js",
|
||||
"duration": 33240
|
||||
"duration": 28240
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/timeline.spec.ts",
|
||||
"duration": 7122
|
||||
"duration": 6808
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/xyChart.spec.js",
|
||||
"duration": 11127
|
||||
"duration": 19359
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/zenuml.spec.js",
|
||||
"duration": 2391
|
||||
"duration": 3164
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user