marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-20 15:59:51 +02:00
Code Issues Packages Projects Releases Wiki Activity

#1542 Making sure config and directives works for overriding theme variables using initialize call or directives + tests

Browse Source
This commit is contained in:
Knut Sveidqvist
2020-07-29 18:38:59 +02:00
parent b23988c947
commit a4bf85b1b6
36 changed files with 5463 additions and 314097 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();
});
});
});

32
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)
@@ -75,11 +75,28 @@ stateDiagram-v2
</div>
</div>
<div class="mermaid" style="width: 50%; height: 20%;">
%%{init: {'theme': 'base', 'themeVariables':{ 'primaryColor': '#ff0000'}}}%%
classDiagram
Customer "1" --> "*" Ticket
Student "1" --> "1..*" Course
Galaxy --> "many" Star : Contains
graph 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="mermaid" 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 +105,8 @@ stateDiagram-v2
// console.error('Mermaid error: ', err);
};
mermaid.initialize({
// theme: 'dark',
theme: 'base',
// themeVariables:{primaryColor: '#ff0000'},
// arrowMarkerAbsolute: true,
// themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
logLevel: 0,

4
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}
@@ -197,7 +197,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,

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 },