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

Merge branch 'develop' of https://github.com/mermaid-js/mermaid into feature/2776_katex_math

Browse Source
This commit is contained in:
Nicolas Newman
2022-04-02 08:09:11 -09:00
parent cc2c828e78 44877545e5
commit f67254cdc7
132 changed files with 168767 additions and 4418 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
cypress/fixtures/example.json
View File

@@ -1,5 +1,5 @@
{
"name": "Using fixtures to represent data",
"email": "hello@cypress.io",
"body": "Fixtures are a great way to mock data for responses to routes"
{
"name": "Using fixtures to represent data",
"email": "hello@cypress.io",
"body": "Fixtures are a great way to mock data for responses to routes"
}

6
cypress/helpers/util.js
View File

@@ -47,7 +47,11 @@ export const imgSnapshotTest = (graphStr, _options, api) => {
cy.visit(url);
cy.get('svg');
cy.percySnapshot();
// cy.percySnapshot();
// Default name to test title
const name = (options.name || cy.state('runnable').fullTitle()).replace(/\s+/g, '-');
cy.matchImageSnapshot(name);
};
export const renderGraph = (graphStr, options, api) => {

4
cypress/integration/other/configuration.spec.js
View File

@@ -111,7 +111,9 @@ describe('Configuration', () => {
cy.visit(url);
cy.get('svg');
cy.percySnapshot();
cy.matchImageSnapshot(
'configuration.spec-should-not-taint-initial-configuration-when-using-multiple-directives'
);
});
});
});

2
cypress/integration/rendering/conf-and-directives.spec.js
View File

@@ -134,7 +134,7 @@ graph TD
const url = 'http://localhost:9000/theme-directives.html';
cy.visit(url);
cy.get('svg');
cy.percySnapshot();
cy.matchImageSnapshot('conf-and-directives.spec-when-rendering-several-diagrams-diagram-1');
});
});
});

119
cypress/integration/rendering/gitGraph.spec.js
View File

@@ -1,20 +1,105 @@
import { imgSnapshotTest } from '../../helpers/util.js';
describe('Sequencediagram', () => {
// it('should render a simple git graph', () => {
// imgSnapshotTest(
// `
// gitGraph:
// commit
// branch newbranch
// checkout newbranch
// commit
// commit
// checkout master
// commit
// commit
// merge newbranch`,
// { logLevel: 0 }
// );
// });
describe('Git Graph diagram', () => {
it('1: should render a simple gitgraph with commit on main branch', () => {
imgSnapshotTest(
`gitGraph
commit id: "1"
commit id: "2"
commit id: "3"
`,
{}
);
});
it('2: should render a simple gitgraph with commit on main branch with Id', () => {
imgSnapshotTest(
`gitGraph
commit id: "One"
commit id: "Two"
commit id: "Three"
`,
{}
);
});
it('3: should render a simple gitgraph with different commitTypes on main branch ', () => {
imgSnapshotTest(
`gitGraph
commit id: "Normal Commit"
commit id: "Reverse Commit" type: REVERSE
commit id: "Hightlight Commit" type: HIGHLIGHT
`,
{}
);
});
it('4: should render a simple gitgraph with tags commitTypes on main branch ', () => {
imgSnapshotTest(
`gitGraph
commit id: "Normal Commit with tag" tag: "v1.0.0"
commit id: "Reverse Commit with tag" type: REVERSE tag: "RC_1"
commit id: "Hightlight Commit" type: HIGHLIGHT tag: "8.8.4"
`,
{}
);
});
it('5: should render a simple gitgraph with two branches', () => {
imgSnapshotTest(
`gitGraph
commit id: "1"
commit id: "2"
branch develop
checkout develop
commit id: "3"
commit id: "4"
checkout main
commit id: "5"
commit id: "6"
`,
{}
);
});
it('6: should render a simple gitgraph with two branches and merge commit', () => {
imgSnapshotTest(
`gitGraph
commit id: "1"
commit id: "2"
branch develop
checkout develop
commit id: "3"
commit id: "4"
checkout main
merge develop
commit id: "5"
commit id: "6"
`,
{}
);
});
it('7: should render a simple gitgraph with three branches and merge commit', () => {
imgSnapshotTest(
`gitGraph
commit id: "1"
commit id: "2"
branch nice_feature
checkout nice_feature
commit id: "3"
checkout main
commit id: "4"
checkout nice_feature
branch very_nice_feature
checkout very_nice_feature
commit id: "5"
checkout main
commit id: "6"
checkout nice_feature
commit id: "7"
checkout main
merge nice_feature
checkout very_nice_feature
commit id: "8"
checkout main
commit id: "9"
`,
{}
);
});
});

2
cypress/integration/rendering/sequencediagram.spec.js
View File

@@ -552,7 +552,7 @@ context('Sequence diagram', () => {
}
);
});
it('should override config with directive settings', () => {
it('should override config with directive settings 2', () => {
imgSnapshotTest(
`
%%{init: { "config": { "mirrorActors": false, "wrap": true }}}%%

2
cypress/integration/rendering/stateDiagram-v2.spec.js
View File

@@ -158,7 +158,7 @@ describe('State diagram', () => {
);
cy.get('svg');
});
it('v2 should render a simple state diagrams', () => {
it('v2 should render a simple state diagrams 2', () => {
imgSnapshotTest(
`
stateDiagram-v2

2
cypress/integration/rendering/stateDiagram.spec.js
View File

@@ -148,7 +148,7 @@ describe('State diagram', () => {
);
cy.get('svg');
});
it('should render a simple state diagrams', () => {
it('should render a simple state diagrams 2', () => {
imgSnapshotTest(
`
stateDiagram

104
cypress/platform/e2e.html
View File

@@ -1,52 +1,52 @@
<html>
<head>
<meta charset="utf-8"/>
<!-- <meta charset="iso-8859-15"/> -->
<script src="/e2e.js"></script>
<!-- <link href="https://fonts.googleapis.com/css?family=Mansalva&display=swap" rel="stylesheet" /> -->
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
<style>
body {
/* font-family: 'Mansalva', cursive;*/
/* font-family: 'Mansalva', cursive; */
/* font-family: 'arial'; */
/* font-family: "trebuchet ms", verdana, arial; */
}
/* div {
font-family: 'arial';
} */
/* .mermaid-main-font {
font-family: "trebuchet ms", verdana, arial;
font-family: var(--mermaid-font-family);
} */
/* :root {
--mermaid-font-family: '"trebuchet ms", verdana, arial';
--mermaid-font-family: "Comic Sans MS", "Comic Sans", cursive;
--mermaid-font-family: '"Lucida Console", Monaco, monospace';
} */
svg {
border: 2px solid darkred;
}
.exClass2 > rect, .exClass {
fill: greenyellow !important;
}
</style>
</head>
<body>
<script src="./mermaid.js"></script>
<script>
// Notice startOnLoad=false
// This prevents default handling in mermaid from render before the e2e logic is applied
// mermaid.initialize({
// startOnLoad: false,
// useMaxWidth: true,
// // "themeCSS": ":root { --mermaid-font-family: \"trebuchet ms\", verdana, arial;}",
// // fontFamily: '\"trebuchet ms\", verdana, arial;'
// // fontFamily: '"Comic Sans MS", "Comic Sans", cursive'
// // fontFamily: '"Mansalva", cursive',
// // fontFamily: '"Noto Sans SC", sans-serif'
// fontFamily: '"Noto Sans SC", sans-serif'
// });
</script>
</body>
</html>
<html>
<head>
<meta charset="utf-8"/>
<!-- <meta charset="iso-8859-15"/> -->
<script src="/e2e.js"></script>
<!-- <link href="https://fonts.googleapis.com/css?family=Mansalva&display=swap" rel="stylesheet" /> -->
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
<style>
body {
/* font-family: 'Mansalva', cursive;*/
/* font-family: 'Mansalva', cursive; */
/* font-family: 'arial'; */
/* font-family: "trebuchet ms", verdana, arial; */
}
/* div {
font-family: 'arial';
} */
/* .mermaid-main-font {
font-family: "trebuchet ms", verdana, arial;
font-family: var(--mermaid-font-family);
} */
/* :root {
--mermaid-font-family: '"trebuchet ms", verdana, arial';
--mermaid-font-family: "Comic Sans MS", "Comic Sans", cursive;
--mermaid-font-family: '"Lucida Console", Monaco, monospace';
} */
svg {
border: 2px solid darkred;
}
.exClass2 > rect, .exClass {
fill: greenyellow !important;
}
</style>
</head>
<body>
<script src="./mermaid.js"></script>
<script>
// Notice startOnLoad=false
// This prevents default handling in mermaid from render before the e2e logic is applied
// mermaid.initialize({
// startOnLoad: false,
// useMaxWidth: true,
// // "themeCSS": ":root { --mermaid-font-family: \"trebuchet ms\", verdana, arial;}",
// // fontFamily: '\"trebuchet ms\", verdana, arial;'
// // fontFamily: '"Comic Sans MS", "Comic Sans", cursive'
// // fontFamily: '"Mansalva", cursive',
// // fontFamily: '"Noto Sans SC", sans-serif'
// fontFamily: '"Noto Sans SC", sans-serif'
// });
</script>
</body>
</html>

92
cypress/platform/flow.html
View File

@@ -1,46 +1,46 @@
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
rel="stylesheet"
/>
<style>body {
font-family: 'trebuchet ms', verdana, arial;
}</style>
</head>
<body>
<div class="mermaid">
graph TB
subgraph One
a1-->a2-->a3
end
</div>
<div class="mermaid">
graph TB
a_a --> b_b:::apa --> c_c:::apa
classDef apa fill:#f9f,stroke:#333,stroke-width:4px;
class a_a apa;
</div>
<div class="mermaid">
graph TB
a_a(Aftonbladet) --> b_b[gorilla]:::apa --> c_c{chimp}:::apa -->a_a
a_a --> c --> d_d --> c_c
classDef apa fill:#f9f,stroke:#333,stroke-width:4px;
class a_a apa;
click a_a "http://www.aftonbladet.se" "apa"
</div>
<script src="./mermaid.js"></script>
<script>
mermaid.initialize({
theme: 'forest',
// themeCSS: '.node rect { fill: red; }',
logLevel: 3,
flowchart: { curve: 'linear' },
gantt: { axisFormat: '%m/%d/%Y' },
sequence: { actorMargin: 50 },
// sequenceDiagram: { actorMargin: 300 } // deprecated
});
</script>
</script>
</body>
</html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
rel="stylesheet"
/>
<style>body {
font-family: 'trebuchet ms', verdana, arial;
}</style>
</head>
<body>
<div class="mermaid">
graph TB
subgraph One
a1-->a2-->a3
end
</div>
<div class="mermaid">
graph TB
a_a --> b_b:::apa --> c_c:::apa
classDef apa fill:#f9f,stroke:#333,stroke-width:4px;
class a_a apa;
</div>
<div class="mermaid">
graph TB
a_a(Aftonbladet) --> b_b[gorilla]:::apa --> c_c{chimp}:::apa -->a_a
a_a --> c --> d_d --> c_c
classDef apa fill:#f9f,stroke:#333,stroke-width:4px;
class a_a apa;
click a_a "http://www.aftonbladet.se" "apa"
</div>
<script src="./mermaid.js"></script>
<script>
mermaid.initialize({
theme: 'forest',
// themeCSS: '.node rect { fill: red; }',
logLevel: 3,
flowchart: { curve: 'linear' },
gantt: { axisFormat: '%m/%d/%Y' },
sequence: { actorMargin: 50 },
// sequenceDiagram: { actorMargin: 300 } // deprecated
});
</script>
</script>
</body>
</html>

67
cypress/platform/git-graph.html Normal file
View File

@@ -0,0 +1,67 @@
<html>
<head>
<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/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
<style>
body {
background: rgb(221, 208, 208);
/*background:#333;*/
font-family: 'Arial';
}
h1 { color: white;}
.mermaid2 {
display: none;
}
.customCss > rect, .customCss{
fill:#FF0000 !important;
stroke:#FFFF00 !important;
stroke-width:4px !important;
}
</style>
</head>
<body>
<h1>info below</h1>
<div class="mermaid" style="width: 100%; height: 20%;">
gitGraph
class BankAccount{
+String owner
+BigDecimal balance
+deposit(amount) bool
+withdrawl(amount) int
}
cssClass "BankAccount" customCss
</div>
<script src="./mermaid.js"></script>
<script>
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
};
mermaid.initialize({
theme: 'default',
// arrowMarkerAbsolute: true,
// themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
logLevel: 0,
flowchart: { curve: 'linear', htmlLabels: true },
// gantt: { axisFormat: '%m/%d/%Y' },
sequence: { actorMargin: 50, showSequenceNumbers: true },
// sequenceDiagram: { actorMargin: 300 } // deprecated
// fontFamily: '"arial", sans-serif',
// themeVariables: {
// fontFamily: '"arial", sans-serif',
// },
curve: 'linear',
securityLevel: 'loose',
});
function callback() {
alert('It worked');
}
</script>
</body>
</html>

138
cypress/platform/gitgraph.html Normal file
View File

@@ -0,0 +1,138 @@
<html>
<head>
<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/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
<style>
body {
/* background: rgb(221, 208, 208); */
background:#111;
/* background:#333; */
font-family: 'Arial';
}
/* h1 { color: white;} */
.mermaid2 {
display: none;
}
.customCss > rect, .customCss{
fill:#FF0000 !important;
stroke:#FFFF00 !important;
stroke-width:4px !important;
}
</style>
</head>
<body>
<h1>info below</h1>
<div class="mermaid2" style="width: 100%; height: 20%;">
%%{init: { 'logLevel': 'debug', 'theme': 'neutral' } }%%
gitGraph
commit "Ashish"
branch newbranch
checkout newbranch
commit id:"1111"
commit tag:"test"
checkout main
commit type: HIGHLIGHT
commit
merge newbranch
commit
branch b2
commit
</div>
<div class="mermaid" style="width: 100%; height: 20%;">
gitGraph
commit type:HIGHLIGHT
branch hotfix
checkout hotfix
commit type:HIGHLIGHT
branch develop
checkout develop
commit id:"ash" tag:"abc" type:HIGHLIGHT
branch featureB
checkout featureB
commit type:HIGHLIGHT
checkout main
checkout hotfix
commit type:HIGHLIGHT
checkout develop
commit type:REVERSE
checkout featureB
commit type:HIGHLIGHT
checkout main
merge hotfix
checkout featureB
commit type:HIGHLIGHT
checkout develop
branch featureA
commit type:HIGHLIGHT
checkout develop
checkout featureA
commit
checkout featureB
commit
checkout develop
merge featureA
branch release
checkout release
commit type:HIGHLIGHT
checkout main
commit
checkout release
merge main
checkout develop
merge release
</div>
<div class="mermaid2" style="width: 100%; height: 20%;">
gitGraph:
commit
commit
branch newbranch
commit
merge main
</div>
<script src="./mermaid.js"></script>
<script>
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
};
mermaid.initialize({
theme: 'dark',
// themeVariables: {
// primaryColor: '#9400D3',
// darkMode: true,
// background: '#222',
// // textColor: 'white',
// // primaryTextColor: '#f4f4f4',
// // // nodeBkg: '#ff0000',
// // // mainBkg: '#0000ff',
// // // tertiaryColor: '#ffffcc',
// },
// theme: 'forest',
// theme: 'neutral',
// theme: 'dark',
// arrowMarkerAbsolute: true,
// themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
logLevel: 1,
flowchart: { curve: 'linear', htmlLabels: true },
// gantt: { axisFormat: '%m/%d/%Y' },
sequence: { actorMargin: 50, showSequenceNumbers: true },
// sequenceDiagram: { actorMargin: 300 } // deprecated
// fontFamily: '"arial", sans-serif',
// themeVariables: {
// fontFamily: '"arial", sans-serif',
// },
curve: 'linear',
securityLevel: 'loose',
});
function callback() {
alert('It worked');
}
</script>
</body>
</html>

137
cypress/platform/gitgraph2.html Normal file
View File

@@ -0,0 +1,137 @@
<html>
<head>
<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/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
<style>
body {
/* background: rgb(221, 208, 208); */
background:#111;
/* background:#333; */
font-family: 'Arial';
}
/* h1 { color: white;} */
.mermaid2 {
display: none;
}
.customCss > rect, .customCss{
fill:#FF0000 !important;
stroke:#FFFF00 !important;
stroke-width:4px !important;
}
</style>
</head>
<body>
<h1>info below</h1>
<div class="mermaid2" style="width: 100%; height: 20%;">
gitGraph:
commit "Ashish"
branch newbranch
checkout newbranch
commit id:"1111"
commit tag:"test"
checkout main
commit type: HIGHLIGHT
commit
merge newbranch
commit
branch b2
commit
</div>
<div class="mermaid" style="width: 100%; height: 20%;">
gitGraph
commit
branch hotfix
checkout hotfix
commit
branch develop
checkout develop
commit id:"An id" tag:"A tag"
branch featureB
checkout featureB
commit type:HIGHLIGHT
checkout main
checkout hotfix
commit type:NORMAL
checkout develop
commit type:REVERSE
checkout featureB
commit
checkout main
merge hotfix
checkout featureB
commit
checkout develop
branch featureA
commit
checkout develop
merge hotfix
checkout featureA
commit
checkout featureB
commit
checkout develop
merge featureA
branch release
checkout release
commit
checkout main
commit
checkout release
merge main
checkout develop
merge release
</div>
<div class="mermaid2" style="width: 100%; height: 20%;">
gitGraph:
commit
commit
branch newbranch
commit
merge main
</div>
<script src="./mermaid.js"></script>
<script>
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
};
mermaid.initialize({
theme: 'dark',
themeVariables: {
// primaryColor: '#9400D3',
// darkMode: false,
// background: '#222',
// textColor: 'white',
// primaryTextColor: '#f4f4f4',
// nodeBkg: '#ff0000',
// mainBkg: '#0000ff',
// tertiaryColor: '#ffffcc',
},
// theme: 'forest',
// theme: 'neutral',
// theme: 'dark',
// arrowMarkerAbsolute: true,
// themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
logLevel: 1,
flowchart: { curve: 'linear', htmlLabels: true },
// gantt: { axisFormat: '%m/%d/%Y' },
sequence: { actorMargin: 50, showSequenceNumbers: true },
// sequenceDiagram: { actorMargin: 300 } // deprecated
// fontFamily: '"arial", sans-serif',
// themeVariables: {
// fontFamily: '"arial", sans-serif',
// },
curve: 'linear',
securityLevel: 'loose',
});
function callback() {
alert('It worked');
}
</script>
</body>
</html>

52
cypress/platform/info.html
View File

@@ -1,26 +1,26 @@
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
rel="stylesheet"
/>
</head>
<body>
<h1>info below</h1>
<div class="mermaid">info</div>
<script src="./mermaid.js"></script>
<script>
mermaid.initialize({
theme: 'forest',
// themeCSS: '.node rect { fill: red; }',
logLevel: 3,
flowchart: { curve: 'linear' },
gantt: { axisFormat: '%m/%d/%Y' },
sequence: { actorMargin: 50 },
// sequenceDiagram: { actorMargin: 300 } // deprecated
});
</script>
</script>
</body>
</html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
rel="stylesheet"
/>
</head>
<body>
<h1>info below</h1>
<div class="mermaid">info</div>
<script src="./mermaid.js"></script>
<script>
mermaid.initialize({
theme: 'forest',
// themeCSS: '.node rect { fill: red; }',
logLevel: 3,
flowchart: { curve: 'linear' },
gantt: { axisFormat: '%m/%d/%Y' },
sequence: { actorMargin: 50 },
// sequenceDiagram: { actorMargin: 300 } // deprecated
});
</script>
</script>
</body>
</html>

1
cypress/platform/knsv.html
View File

@@ -66,6 +66,7 @@ merge newbranch
</div>
<div class="mermaid" style="width: 50%;">
sequenceDiagram
title: with colon:
participant a as Alice
participant j as John
note right of a: Hello world!

44
cypress/platform/showcase_base.html
View File

@@ -264,6 +264,50 @@ requirementDiagram
test_req - contains -> test_req3
test_req <- copies - test_entity2
</div>
<div class="mermaid" style="width: 100%; height: 20%;">
gitGraph:
commit
branch hotfix
checkout hotfix
commit
branch develop
checkout develop
commit id:"An id" tag:"A tag"
branch featureB
checkout featureB
commit type:HIGHLIGHT
checkout main
checkout hotfix
commit type:NORMAL
checkout develop
commit type:REVERSE
checkout featureB
commit
checkout main
merge hotfix
checkout featureB
commit
checkout develop
branch featureA
commit
checkout develop
merge hotfix
checkout featureA
commit
checkout featureB
commit
checkout develop
merge featureA
branch release
checkout release
commit
checkout main
commit
checkout release
merge main
checkout develop
merge release
</div>
<script src="./mermaid.js"></script>
<script>
mermaid.parseError = function (err, hash) {

65
cypress/platform/showcase_base_dark.html
View File

@@ -258,8 +258,51 @@ requirementDiagram
test_req - contains -> test_req3
test_req <- copies - test_entity2
</div>
<script src="./mermaid.js"></script>
<div class="mermaid" class="width height">
gitGraph
commit
branch hotfix
checkout hotfix
commit
branch develop
checkout develop
commit id:"An id" tag:"A tag"
branch featureB
checkout featureB
commit type:HIGHLIGHT
checkout main
checkout hotfix
commit type:NORMAL
checkout develop
commit type:REVERSE
checkout featureB
commit
checkout main
merge hotfix
checkout featureB
commit
checkout develop
branch featureA
commit
checkout develop
merge hotfix
checkout featureA
commit
checkout featureB
commit
checkout develop
merge featureA
branch release
checkout release
commit
checkout main
commit
checkout release
merge main
checkout develop
merge release
</div>
<script src="./mermaid.js"></script>
<script>
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
@@ -267,15 +310,15 @@ requirementDiagram
mermaid.initialize({
theme: 'base',
themeVariables: {
primaryColor: '#9400D3',
darkMode: true,
background: '#222',
textColor: 'white',
primaryTextColor: '#f4f4f4',
nodeBkg: '#ff0000',
mainBkg: '#0000ff',
tertiaryColor: '#ffffcc',
},
primaryColor: '#9400D3',
darkMode: true,
background: '#222',
textColor: 'white',
primaryTextColor: '#f4f4f4',
nodeBkg: '#ff0000',
mainBkg: '#0000ff',
tertiaryColor: '#ffffcc',
},
// arrowMarkerAbsolute: true,
// themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
logLevel: 0,

44
cypress/platform/showcase_dark.html
View File

@@ -256,6 +256,50 @@ requirementDiagram
test_req - contains -> test_req3
test_req <- copies - test_entity2
</div>
<div class="mermaid" class="width height">
gitGraph
commit
branch hotfix
checkout hotfix
commit
branch develop
checkout develop
commit id:"An id" tag:"A tag"
branch featureB
checkout featureB
commit type:HIGHLIGHT
checkout main
checkout hotfix
commit type:NORMAL
checkout develop
commit type:REVERSE
checkout featureB
commit
checkout main
merge hotfix
checkout featureB
commit
checkout develop
branch featureA
commit
checkout develop
merge hotfix
checkout featureA
commit
checkout featureB
commit
checkout develop
merge featureA
branch release
checkout release
commit
checkout main
commit
checkout release
merge main
checkout develop
merge release
</div>
<script src="./mermaid.js"></script>
<script>
mermaid.parseError = function (err, hash) {

46
cypress/platform/showcase_default.html
View File

@@ -251,7 +251,51 @@ requirementDiagram
test_req - contains -> test_req3
test_req <- copies - test_entity2
</div>
<script src="./mermaid.js"></script>
<div class="mermaid" style="width: 100%; height: 20%;">
gitGraph
commit
branch hotfix
checkout hotfix
commit
branch develop
checkout develop
commit id:"An id" tag:"A tag"
branch featureB
checkout featureB
commit type:HIGHLIGHT
checkout main
checkout hotfix
commit type:NORMAL
checkout develop
commit type:REVERSE
checkout featureB
commit
checkout main
merge hotfix
checkout featureB
commit
checkout develop
branch featureA
commit
checkout develop
merge hotfix
checkout featureA
commit
checkout featureB
commit
checkout develop
merge featureA
branch release
checkout release
commit
checkout main
commit
checkout release
merge main
checkout develop
merge release
</div>
<script src="./mermaid.js"></script>
<script>
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);

44
cypress/platform/showcase_forest.html
View File

@@ -255,6 +255,50 @@ requirementDiagram
test_req - contains -> test_req3
test_req <- copies - test_entity2
</div>
<div class="mermaid" class="width height">
gitGraph:
commit
branch hotfix
checkout hotfix
commit
branch develop
checkout develop
commit id:"An id" tag:"A tag"
branch featureB
checkout featureB
commit type:HIGHLIGHT
checkout main
checkout hotfix
commit type:NORMAL
checkout develop
commit type:REVERSE
checkout featureB
commit
checkout main
merge hotfix
checkout featureB
commit
checkout develop
branch featureA
commit
checkout develop
merge hotfix
checkout featureA
commit
checkout featureB
commit
checkout develop
merge featureA
branch release
checkout release
commit
checkout main
commit
checkout release
merge main
checkout develop
merge release
</div>
<script src="./mermaid.js"></script>
<script>
mermaid.parseError = function (err, hash) {

46
cypress/platform/showcase_neutral.html
View File

@@ -254,6 +254,52 @@ requirementDiagram
test_req - contains -> test_req3
test_req <- copies - test_entity2
</div>
<div class="mermaid" class="width height">
gitGraph:
commit
branch hotfix
checkout hotfix
commit
branch develop
checkout develop
commit id:"An id" tag:"A tag"
branch featureB
checkout featureB
commit type:HIGHLIGHT
checkout main
checkout hotfix
commit type:NORMAL
checkout develop
commit type:REVERSE
checkout featureB
commit
checkout main
merge hotfix
checkout featureB
commit
checkout develop
branch featureA
commit
checkout develop
merge hotfix
checkout featureA
commit
checkout featureB
commit
checkout develop
merge featureA
branch release
checkout release
commit
checkout main
commit
checkout release
merge main
checkout develop
merge release
</div>
<script src="./mermaid.js"></script>
<script>
mermaid.parseError = function (err, hash) {

82
cypress/platform/user-journey.html
View File

@@ -1,41 +1,41 @@
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
rel="stylesheet"
/>
</head>
<body>
<h1>User Journey</h1>
<div class="mermaid">
journey
title Go shopping
section Get to the shops
Get car keys:5: Dad
Get into car:5: Dad, Mum, Child 1, Child 2
Really drive to supermarket:3: Dad
section Do shopping
Do actual shop:3: Mum
Get in the way:2: Dad, Child 1, Child 2
Pay: 2: Dad
section Go home
Lose keys:3: Dad
Get cross:1: Dad, Child 1
Find keys:4: Mum
Get into car:4: Dad, Mum, Child 1, Child 2
Drive home:3: Dad
</div>
<script src="./mermaid.js"></script>
<script>
mermaid.initialize({
theme: 'forest',
logLevel: 3,
journey: { taskMargin: 30 },
});
</script>
</body>
</html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
rel="stylesheet"
/>
</head>
<body>
<h1>User Journey</h1>
<div class="mermaid">
journey
title Go shopping
section Get to the shops
Get car keys:5: Dad
Get into car:5: Dad, Mum, Child 1, Child 2
Really drive to supermarket:3: Dad
section Do shopping
Do actual shop:3: Mum
Get in the way:2: Dad, Child 1, Child 2
Pay: 2: Dad
section Go home
Lose keys:3: Dad
Get cross:1: Dad, Child 1
Find keys:4: Mum
Get into car:4: Dad, Mum, Child 1, Child 2
Drive home:3: Dad
</div>
<script src="./mermaid.js"></script>
<script>
mermaid.initialize({
theme: 'forest',
logLevel: 3,
journey: { taskMargin: 30 },
});
</script>
</body>
</html>

34
cypress/platform/webpackUsage.html
View File

@@ -1,18 +1,18 @@
<!doctype html>
<html>
<head>
<style>
/* .mermaid {
font-family: "trebuchet ms", verdana, arial;;
} */
/* .mermaid {
font-family: 'arial';
} */
</style>
</head>
<body>
<div id="graph-to-be"></div>
<script src="./bundle-test.js" charset="utf-8"></script>
</body>
<!doctype html>
<html>
<head>
<style>
/* .mermaid {
font-family: "trebuchet ms", verdana, arial;;
} */
/* .mermaid {
font-family: 'arial';
} */
</style>
</head>
<body>
<div id="graph-to-be"></div>
<script src="./bundle-test.js" charset="utf-8"></script>
</body>
</html>

5
cypress/plugins/index.js
View File

@@ -16,7 +16,8 @@
// // `config` is the resolved Cypress config
// }
const { addMatchImageSnapshotPlugin } = require('cypress-image-snapshot/plugin');
module.exports = (on, config) => {
// `on` is used to hook into various events Cypress emits
// `config` is the resolved Cypress config
addMatchImageSnapshotPlugin(on, config);
};

BIN
cypress/screenshots/rendering/sequencediagram.spec.js/Sequence diagram -- svg size -- should render a sequence diagram when useMaxWidth is false (failed).png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 166 KiB

BIN
cypress/screenshots/rendering/sequencediagram.spec.js/Sequence diagram -- svg size -- should render a sequence diagram when useMaxWidth is true (default) (failed).png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 162 KiB

6
cypress/support/commands.js
View File

@@ -24,4 +24,8 @@
// -- This is will overwrite an existing command --
// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
import '@percy/cypress';
// import '@percy/cypress';
import { addMatchImageSnapshotCommand } from 'cypress-image-snapshot/command';
addMatchImageSnapshotCommand();

2
cypress/support/index.js
View File

@@ -15,7 +15,7 @@
// Import commands.js using ES2015 syntax:
import './commands';
import '@percy/cypress';
// import '@percy/cypress';
// Alternatively you can use CommonJS syntax:
// require('./commands')