marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-10-06 07:39:48 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1586 from mermaid-js/1542_take_two

Browse Source 
1542 take two
This commit is contained in:
Knut Sveidqvist
2020-07-30 08:58:56 +02:00
committed by GitHub
parent 4e3bdf0925 a5b01c3f6f
commit 36e421eb5f
41 changed files with 5632 additions and 314100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

141
cypress/integration/rendering/conf-and-directives.spec.js Normal file
View File

@@ -0,0 +1,141 @@
/* eslint-env jest */
import { imgSnapshotTest } from '../../helpers/util.js';
describe('Configuration and directives - nodes should be light blue', () => {
it('No config - use default', () => {
imgSnapshotTest(
`
graph TD
A(Default) --> B[/Another/]
A --> C[End]
subgraph section
B
C
end
`,
{}
);
cy.get('svg');
});
it('Settigns from intitialize - nodes should be green', () => {
imgSnapshotTest(
`
graph TD
A(Forest) --> B[/Another/]
A --> C[End]
subgraph section
B
C
end `,
{theme:'forest'}
);
cy.get('svg');
});
it('Settings from initialize overriding themeVariable - nodes shold be red', () => {
imgSnapshotTest(
`
%%{init: { 'theme': 'base', 'themeVariables':{ 'primaryColor': '#ff0000'}}}%%
graph TD
A(Start) --> B[/Another/]
A[/Another/] --> C[End]
subgraph section
B
C
end
`,
{theme:'base', themeVariables:{ primaryColor: '#ff0000'}, logLevel: 0}
);
cy.get('svg');
});
it('Settings from directive - nodes should be grey', () => {
imgSnapshotTest(
`
%%{init: { 'logLevel': 0, 'theme': 'neutral'} }%%
graph TD
A(Start) --> B[/Another/]
A[/Another/] --> C[End]
subgraph section
B
C
end
`,
{}
);
cy.get('svg');
});
it('Settings from directive overriding theme variable - nodes should be red', () => {
imgSnapshotTest(
`
%%{init: {'theme': 'base', 'themeVariables':{ 'primaryColor': '#ff0000'}}}%%
graph TD
A(Start) --> B[/Another/]
A[/Another/] --> C[End]
subgraph section
B
C
end
`,
{}
);
cy.get('svg');
});
it('Settings from initialize and directive - nodes should be grey', () => {
imgSnapshotTest(
`
%%{init: { 'logLevel': 0, 'theme': 'neutral'} }%%
graph TD
A(Start) --> B[/Another/]
A[/Another/] --> C[End]
subgraph section
B
C
end
`,
{theme:'forest'}
);
cy.get('svg');
});
it('Theme from initialize, directive overriding theme variable - nodes should be red', () => {
imgSnapshotTest(
`
%%{init: {'theme': 'base', 'themeVariables':{ 'primaryColor': '#ff0000'}}}%%
graph TD
A(Start) --> B[/Another/]
A[/Another/] --> C[End]
subgraph section
B
C
end
`,
{theme:'base'}
);
cy.get('svg');
});
it('Theme variable from initialize, theme from directive - nodes should be red', () => {
imgSnapshotTest(
`
%%{init: { 'logLevel': 0, 'theme': 'base'} }%%
graph TD
A(Start) --> B[/Another/]
A[/Another/] --> C[End]
subgraph section
B
C
end
`,
{themeVariables:{primaryColor: '#ff0000'}}
);
cy.get('svg');
});
describe('when rendering several diagrams', () => {
it('diagrams should not taint later diagrams', () => {
const url = 'http://localhost:9000/theme-directives.html';
cy.visit(url);
cy.get('svg');
cy.percySnapshot();
});
});
});

33
cypress/platform/current.html
View File

@@ -33,12 +33,12 @@ flowchart BT
c1 --apa apa apa--> b1
two --> c2
</div>
<div class="mermaid" style="width: 50%; height: 200px;">
<div class="mermaid2" style="width: 50%; height: 200px;">
sequenceDiagram
Alice->>Bob:Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be
Bob->>Alice: I'm short though
</div>
<div class="mermaid" style="width: 50%; height: 200px;">
<div class="mermaid2" style="width: 50%; height: 200px;">
%%{init: {'securityLevel': 'loose'}}%%
graph TD
A[Christmas] -->|Get money| B(Go shopping)
@@ -74,12 +74,30 @@ stateDiagram-v2
A --> D: asd123
</div>
</div>
%%{init: {'theme': 'base', 'themeVariables':{ 'primaryColor': '#ff0000'}}}%%
<div class="mermaid" style="width: 50%; height: 20%;">
%%{init: {'theme': 'base'}}%%
classDiagram
Customer "1" --> "*" Ticket
Student "1" --> "1..*" Course
Galaxy --> "many" Star : Contains
flowchart TB
subgraph apa
a --> A %% comment
a --> a{apa} %% comment
end
</div>
<div class="mermaid2" style="width: 50%; height: 20%;">
graph TD
A(Start) --> B[/Another/]
A[/Another/] --> C[End]
subgraph section
B
C
end
</div>
<div class="mermaid2" style="width: 50%; height: 20%;">
sequenceDiagram
Alice->Bob: Hello Bob, how are you?
Note over Alice,Bob: Looks
Note over Bob,Alice: Looks back
</div>
<script src="./mermaid.js"></script>
@@ -88,7 +106,8 @@ stateDiagram-v2
// console.error('Mermaid error: ', err);
};
mermaid.initialize({
// theme: 'dark',
// theme: 'base',
// themeVariables:{primaryColor: '#0000ff'},
// arrowMarkerAbsolute: true,
// themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
logLevel: 0,

25
cypress/platform/showcase_base.html
View File

@@ -93,6 +93,31 @@
John-->Alice: Great!
end
</div>
<div class="mermaid width height" >
%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
classDiagram
Animal "1" <|-- Duck
Animal <|-- Fish
Animal <--o Zebra
Animal : +int age
Animal : +String gender
Animal: +isMammal()
Animal: +mate()
class Duck{
+String beakColor
+swim()
+quack()
}
class Fish{
-int sizeInFeet
-canEat()
}
class Zebra{
+bool is_wild
+run()
}
</div>
<div class="mermaid width height">
gantt
dateFormat :YYYY-MM-DD

29
cypress/platform/showcase_dark.html
View File

@@ -40,7 +40,7 @@
<h1>Showcases of diagrams</h1>
<div class="flex flex-wrap">
<div class="mermaid width height">
%%{init: {'theme': 'dark'}}%%
%%{init: {'theme': 'base', 'themeVariables':{'primaryColor': '#ff0000'}}%%
graph TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
@@ -88,6 +88,31 @@
loop Every minute
John-->Alice: Great!
end
</div>
<div class="mermaid width height" >
%%{init: {'theme':'dark'}}%%
classDiagram
Animal "1" <|-- Duck
Animal <|-- Fish
Animal <--o Zebra
Animal : +int age
Animal : +String gender
Animal: +isMammal()
Animal: +mate()
class Duck{
+String beakColor
+swim()
+quack()
}
class Fish{
-int sizeInFeet
-canEat()
}
class Zebra{
+bool is_wild
+run()
}
</div>
<div class="mermaid width height">
gantt
@@ -197,7 +222,7 @@ gantt
// console.error('Mermaid error: ', err);
};
mermaid.initialize({
theme: 'forest',
theme: 'dark',
// arrowMarkerAbsolute: true,
// themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
logLevel: 0,

23
cypress/platform/showcase_default.html
View File

@@ -88,6 +88,29 @@
John-->Alice: Great!
end
</div>
<div class="mermaid width height" >
classDiagram
Animal "1" <|-- Duck
Animal <|-- Fish
Animal <--o Zebra
Animal : +int age
Animal : +String gender
Animal: +isMammal()
Animal: +mate()
class Duck{
+String beakColor
+swim()
+quack()
}
class Fish{
-int sizeInFeet
-canEat()
}
class Zebra{
+bool is_wild
+run()
}
</div>
<div class="mermaid width height">
gantt
dateFormat :YYYY-MM-DD

25
cypress/platform/showcase_forest.html
View File

@@ -89,6 +89,31 @@
John-->Alice: Great!
end
</div>
<div class="mermaid width height" >
%%{init: {'theme':'forest'}}%%
classDiagram
Animal "1" <|-- Duck
Animal <|-- Fish
Animal <--o Zebra
Animal : +int age
Animal : +String gender
Animal: +isMammal()
Animal: +mate()
class Duck{
+String beakColor
+swim()
+quack()
}
class Fish{
-int sizeInFeet
-canEat()
}
class Zebra{
+bool is_wild
+run()
}
</div>
<div class="mermaid width height">
gantt
dateFormat :YYYY-MM-DD

25
cypress/platform/showcase_neutral.html
View File

@@ -89,6 +89,31 @@
John-->Alice: Great!
end
</div>
<div class="mermaid width height" >
%%{init: {'theme':'neutral'}}%%
classDiagram
Animal "1" <|-- Duck
Animal <|-- Fish
Animal <--o Zebra
Animal : +int age
Animal : +String gender
Animal: +isMammal()
Animal: +mate()
class Duck{
+String beakColor
+swim()
+quack()
}
class Fish{
-int sizeInFeet
-canEat()
}
class Zebra{
+bool is_wild
+run()
}
</div>
<div class="mermaid width height">
gantt
dateFormat :YYYY-MM-DD

176
cypress/platform/theme-directives.html
View File

@@ -13,105 +13,107 @@
/* background:#333; */
font-family: 'Arial';
}
h1 { color: grey;}
h1 {
color: #333;
font-size: 20px;
text-decoration: underline;
}
.mermaid2 {
display: none;
}
.someClass > * {
/* fill: red !important; */
.dark {
background: #333;
}
.dark h1 {
color: #f4f4f4;
}
.size {
width: 33%;
height: 250px;
}
</style>
</head>
<body>
<h1>info below</h1>
<div class="flex flex-wrap">
<div class="mermaid" style="width: 50%; height: 20%;">
%%{init: { 'logLevel': 0, 'theme': 'default'} }%%
graph TD
A[Default] -->|Get money| B(Go shopping)
B --> C{Let me think}
B --> G[/Another/]
C ==>|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
subgraph section
C
D
E
F
G
end
<div class="size">
<h1>Default</h1>
<div class="mermaid" >
%%{init: { 'logLevel': 0, 'theme': 'default'} }%%
graph TD
A(Start) --> B[/Another/]
A[/Another/] --> C[End]
subgraph section
B
C
end
</div>
</div>
<div class="mermaid" style="width: 50%; height: 20%;">
%%{init: { 'logLevel': 1, 'theme': 'forest'} }%%
graph TD
A[Forest] -->|Get money| B(Go shopping)
B --> C{Let me think}
B --> G[/Another/]
C ==>|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
subgraph section
C
D
E
F
G
end
<div class="size">
<h1>Forest</h1>
<div class="mermaid" >
%%{init: { 'logLevel': 1, 'theme': 'forest'} }%%
graph TD
A(Start) --> B[/Another/]
A[/Another/] --> C[End]
subgraph section
B
C
end
</div>
</div>
<div class="mermaid" style="width: 50%; height: 20%;">
%%{init: { 'logLevel': 1, 'theme': 'neutral'} }%%
<div class="size">
<h1>Neutral</h1>
<div class="mermaid" >
%%{init: { 'logLevel': 1, 'theme': 'neutral'} }%%
graph TD
A(Start) --> B[/Another/]
A[/Another/] --> C[End]
subgraph section
B
C
end
</div>
</div>
<div class="size dark">
<h1>Dark</h1>
<div class="mermaid">
%%{init: { 'logLevel': 1, 'theme': 'dark'} }%%
graph TD
A(Start) --> B[/Another/]
A[/Another/] --> C[End]
subgraph section
B
C
end
</div>
</div>
<div class="size">
<h1>Base with overriding themeVariable</h1>
<div class="mermaid">
%%{init: { 'theme': 'base', 'themeVariables':{ 'primaryColor': '#ff0000'}}}%%
graph TD
A[Neutral] -->|Get money| B(Go shopping)
B --> C{Let me think}
B --> G[/Another/]
C ==>|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
subgraph section
C
D
E
F
G
end
graph TD
A(Start) --> B[/Another/]
A[/Another/] --> C[End]
subgraph section
B
C
end
</div>
</div>
<div class="mermaid" style="background: #3f3f3f; width: 50%; height: 20%;">
%%{init: { 'logLevel': 1, 'theme': 'dark'} }%%
<div class="size">
<h1>Nothing set, should be Default</h1>
<div class="mermaid">
%%{init: { 'logLevel': 1} }%%
graph TD
A[Dark] -->|Get money| B(Go shopping)
B --> C{Let me think}
B --> G[/Another/]
C ==>|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
subgraph section
C
D
E
F
G
end
</div>
<div class="mermaid" style="background: #3f3f3f; width: 50%; height: 20%;">
%%{init: { 'logLevel': 1} }%%
graph TD
A[None set] -->|Get money| B(Go shopping)
B --> C{Let me think}
B --> G[/Another/]
C ==>|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
subgraph section
C
D
E
F
G
end
graph TD
A(Start) --> B[/Another/]
A[/Another/] --> C[End]
subgraph section
B
C
end
</div>
</div>
</div>
@@ -126,7 +128,7 @@ graph TD
// arrowMarkerAbsolute: true,
// themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
logLevel: 0,
flowchart: { useMaxWidth: true },
// flowchart: { useMaxWidth: true },
graph: { curve: 'cardinal', "htmlLabels": false },
// gantt: { axisFormat: '%m/%d/%Y' },
sequence: { actorMargin: 50, showSequenceNumbers: true },