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

Added theming support for gitgraph

Browse Source
This commit is contained in:
Knut Sveidqvist
2022-03-17 20:07:27 +01:00
parent 9f7130a3e6
commit b78b371025
14 changed files with 456 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
cypress/platform/gitgraph.html
View File

@@ -9,6 +9,7 @@
<style>
body {
/* background: rgb(221, 208, 208); */
background:#111;
/* background:#333; */
font-family: 'Arial';
}
@@ -103,6 +104,20 @@
};
mermaid.initialize({
theme: 'base',
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,

45
cypress/platform/showcase_base.html
View File

@@ -264,6 +264,51 @@ 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:"ash" tag:"abc"
branch featureB
checkout featureB
commit type:HIGHLIGHT
checkout master
branch hotfix
checkout hotfix
commit type:NORMAL
checkout develop
commit type:REVERSE
checkout featureB
commit
checkout master
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 master
commit
checkout release
merge master
checkout develop
merge release
</div>
<script src="./mermaid.js"></script>
<script>
mermaid.parseError = function (err, hash) {

47
cypress/platform/showcase_base_dark.html
View File

@@ -258,7 +258,52 @@ requirementDiagram
test_req - contains -> test_req3
test_req <- copies - test_entity2
</div>
<div class="mermaid" class="width height">
%%{init:{"theme":"base", "themeVariables": {"primaryColor":"#411d4e", "darkMode":true}}}%%
gitGraph:
commit
branch hotfix
checkout hotfix
commit
branch develop
checkout develop
commit id:"ash" tag:"abc"
branch featureB
checkout featureB
commit type:HIGHLIGHT
checkout master
branch hotfix
checkout hotfix
commit type:NORMAL
checkout develop
commit type:REVERSE
checkout featureB
commit
checkout master
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 master
commit
checkout release
merge master
checkout develop
merge release
</div>
<script src="./mermaid.js"></script>
<script>
mermaid.parseError = function (err, hash) {

45
cypress/platform/showcase_dark.html
View File

@@ -256,6 +256,51 @@ 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:"ash" tag:"abc"
branch featureB
checkout featureB
commit type:HIGHLIGHT
checkout master
branch hotfix
checkout hotfix
commit type:NORMAL
checkout develop
commit type:REVERSE
checkout featureB
commit
checkout master
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 master
commit
checkout release
merge master
checkout develop
merge release
</div>
<script src="./mermaid.js"></script>
<script>
mermaid.parseError = function (err, hash) {

45
cypress/platform/showcase_default.html
View File

@@ -251,6 +251,51 @@ 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:"ash" tag:"abc"
branch featureB
checkout featureB
commit type:HIGHLIGHT
checkout master
branch hotfix
checkout hotfix
commit type:NORMAL
checkout develop
commit type:REVERSE
checkout featureB
commit
checkout master
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 master
commit
checkout release
merge master
checkout develop
merge release
</div>
<script src="./mermaid.js"></script>
<script>
mermaid.parseError = function (err, hash) {

45
cypress/platform/showcase_forest.html
View File

@@ -255,6 +255,51 @@ 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:"ash" tag:"abc"
branch featureB
checkout featureB
commit type:HIGHLIGHT
checkout master
branch hotfix
checkout hotfix
commit type:NORMAL
checkout develop
commit type:REVERSE
checkout featureB
commit
checkout master
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 master
commit
checkout release
merge master
checkout develop
merge release
</div>
<script src="./mermaid.js"></script>
<script>
mermaid.parseError = function (err, hash) {

47
cypress/platform/showcase_neutral.html
View File

@@ -254,6 +254,53 @@ 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:"ash" tag:"abc"
branch featureB
checkout featureB
commit type:HIGHLIGHT
checkout master
branch hotfix
checkout hotfix
commit type:NORMAL
checkout develop
commit type:REVERSE
checkout featureB
commit
checkout master
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 master
commit
checkout release
merge master
checkout develop
merge release
</div>
<script src="./mermaid.js"></script>
<script>
mermaid.parseError = function (err, hash) {

2
src/diagrams/git/gitGraphRenderer.js
View File

@@ -358,7 +358,7 @@ const drawBranches = (svg, branches) => {
const branchLabel = g.insert('g').attr('class', 'branchLabel');
// Create inner g, label, this will be positioned now for centering the text
const label = branchLabel.insert('g').attr('class', 'label');
const label = branchLabel.insert('g').attr('class', 'label branch-label'+index);
label.node().appendChild(labelElement);
let bbox = labelElement.getBBox();
bkg.attr('class', 'branchLabelBkg label' + index)

59
src/diagrams/git/styles.js
View File

@@ -8,28 +8,25 @@ const getStyles = (options) =>
font-family: 'trebuchet ms', verdana, arial, sans-serif;
font-family: var(--mermaid-font-family);
}
${[0, 1, 2, 3, 4, 5, 6, 7]
.map(
(i) =>
`
.branch-label${i} { fill: ${options['gitBranchLabel' + i]}; }
.commit${i} { stroke: ${options['git' + i]}; fill: ${options['git' + i]}; }
.commit-highlight${i} { stroke: ${options['gitInv' + i]}; fill: ${options['gitInv' + i]}; }
.label${i} { fill: ${options['git' + i]}; }
.arrow${i} { stroke: ${options['git' + i]}; }
`
)
.join('\n')}
.branch {
stroke-width: 1;
stroke: black;
stroke-dasharray: 2;
}
.commit-labels { font-size: 10px; }
.commit0 { stroke: ${options.git0}; fill: ${options.git0}; }
.commit1 { stroke: ${options.git1}; fill: ${options.git1}; }
.commit2 { stroke: ${options.git2}; fill: ${options.git2}; }
.commit3 { stroke: ${options.git3}; fill: ${options.git3}; }
.commit4 { stroke: ${options.git4}; fill: ${options.git4}; }
.commit5 { stroke: ${options.git5}; fill: ${options.git5}; }
.commit6 { stroke: ${options.git6}; fill: ${options.git6}; }
.commit7 { stroke: ${options.git7}; fill: ${options.git7}; }
.commit-highlight0 { stroke: ${options.gitInv0}; fill: ${options.gitInv0}; }
.commit-highlight1 { stroke: ${options.gitInv1}; fill: ${options.gitInv1}; }
.commit-highlight2 { stroke: ${options.gitInv2}; fill: ${options.gitInv2}; }
.commit-highlight3 { stroke: ${options.gitInv3}; fill: ${options.gitInv3}; }
.commit-highlight4 { stroke: ${options.gitInv4}; fill: ${options.gitInv4}; }
.commit-highlight5 { stroke: ${options.gitInv5}; fill: ${options.gitInv5}; }
.commit-highlight6 { stroke: ${options.gitInv6}; fill: ${options.gitInv6}; }
.commit-highlight7 { stroke: ${options.gitInv7}; fill: ${options.gitInv7}; }
.commit-labels { font-size: 10px; fill: ${options.textColor};}
.commit-merge {
stroke: ${options.primaryColor};
@@ -47,35 +44,7 @@ const getStyles = (options) =>
fill: ${options.primaryColor};
}
// .branch0 { stroke: ${options.git0}; }
// .branch1 { stroke: ${options.git1}; }
// .branch2 { stroke: ${options.git2}; }
// .branch3 { stroke: ${options.git3}; }
// .branch4 { stroke: ${options.git4}; }
// .branch5 { stroke: ${options.git5}; }
// .branch6 { stroke: ${options.git6}; }
// .branch7 { stroke: ${options.git7}; }
.label0 { fill: ${options.git0}; }
.label1 { fill: ${options.git1}; }
.label2 { fill: ${options.git2}; }
.label3 { fill: ${options.git3}; }
.label4 { fill: ${options.git4}; }
.label5 { fill: ${options.git5}; }
.label6 { fill: ${options.git6}; }
.label7 { fill: ${options.git7}; }
// .arrow { stroke : ${options.tertiaryColor}; stroke-width: 8; stroke-linecap: round; }
.arrow { stroke-width: 8; stroke-linecap: round; fill: none}
.arrow0 { stroke: ${options.git0}; }
.arrow1 { stroke: ${options.git1}; }
.arrow2 { stroke: ${options.git2}; }
.arrow3 { stroke: ${options.git3}; }
.arrow4 { stroke: ${options.git4}; }
.arrow5 { stroke: ${options.git5}; }
.arrow6 { stroke: ${options.git6}; }
.arrow7 { stroke: ${options.git7}; }
#arrowhead { fill: #990099;}
.branchLabel { }
}
`;

12
src/themes/theme-base.js
View File

@@ -42,7 +42,7 @@ class Theme {
// The || is to make sure that if the variable has been defiend by a user override that value is to be used
/* Main */
this.primaryTextColor = this.primaryTextColor || (this.darkMode ? '#ddd' : '#333'); // invert(this.primaryColor);
this.primaryTextColor = this.primaryTextColor || (this.darkMode ? '#eee' : '#333'); // invert(this.primaryColor);
this.secondaryColor = this.secondaryColor || adjust(this.primaryColor, { h: -120 });
this.tertiaryColor = this.tertiaryColor || adjust(this.primaryColor, { h: 180, l: 5 });
@@ -214,6 +214,16 @@ class Theme {
this.gitInv5 = invert(this.git5);
this.gitInv6 = invert(this.git6);
this.gitInv7 = invert(this.git7);
this.branchLabelColor =
this.branchLabelColor || (this.darkMode ? 'black' : this.labelTextColor);
this.gitBranchLabel0 = this.gitBranchLabel0 || this.branchLabelColor;
this.gitBranchLabel1 = this.gitBranchLabel1 || this.branchLabelColor;
this.gitBranchLabel2 = this.gitBranchLabel2 || this.branchLabelColor;
this.gitBranchLabel3 = this.gitBranchLabel3 || this.branchLabelColor;
this.gitBranchLabel4 = this.gitBranchLabel4 || this.branchLabelColor;
this.gitBranchLabel5 = this.gitBranchLabel5 || this.branchLabelColor;
this.gitBranchLabel6 = this.gitBranchLabel6 || this.branchLabelColor;
this.gitBranchLabel7 = this.gitBranchLabel7 || this.branchLabelColor;
}
calculate(overrides) {
if (typeof overrides !== 'object') {

18
src/themes/theme-dark.js
View File

@@ -187,6 +187,24 @@ class Theme {
this.relationLabelBackground ||
(this.darkMode ? darken(this.secondaryColor, 30) : this.secondaryColor);
this.relationLabelColor = this.relationLabelColor || this.actorTextColor;
/* git */
this.git0 = lighten(this.secondaryColor, 20);
this.git1 = lighten(this.pie2 || this.secondaryColor, 20);
this.git2 = lighten(this.pie3 || this.tertiaryColor, 20);
this.git3 = lighten(this.pie4 || adjust(this.primaryColor, { h: -30 }), 20);
this.git4 = lighten(this.pie5 || adjust(this.primaryColor, { h: -60 }), 20);
this.git5 = lighten(this.pie6 || adjust(this.primaryColor, { h: -90 }), 10);
this.git6 = lighten(this.pie7 || adjust(this.primaryColor, { h: +60 }), 10);
this.git7 = lighten(this.pie8 || adjust(this.primaryColor, { h: +120 }), 20);
this.gitInv0 = invert(this.git0);
this.gitInv1 = invert(this.git1);
this.gitInv2 = invert(this.git2);
this.gitInv3 = invert(this.git3);
this.gitInv4 = invert(this.git4);
this.gitInv5 = invert(this.git5);
this.gitInv6 = invert(this.git6);
this.gitInv7 = invert(this.git7);
}
calculate(overrides) {
if (typeof overrides !== 'object') {

47
src/themes/theme-default.js
View File

@@ -1,4 +1,4 @@
import { invert, lighten, rgba, adjust } from 'khroma';
import { invert, lighten, rgba, adjust, darken } from 'khroma';
import { mkBorder } from './theme-helpers';
class Theme {
@@ -199,6 +199,51 @@ class Theme {
this.relationColor = this.relationColor || this.lineColor;
this.relationLabelBackground = this.relationLabelBackground || this.labelBackground;
this.relationLabelColor = this.relationLabelColor || this.actorTextColor;
/* git */
this.git0 = this.git0 || this.primaryColor;
this.git1 = this.git1 || this.secondaryColor;
this.git2 = this.git2 || this.tertiaryColor;
this.git3 = this.git3 || adjust(this.primaryColor, { h: -30 });
this.git4 = this.git4 || adjust(this.primaryColor, { h: -60 });
this.git5 = this.git5 || adjust(this.primaryColor, { h: -90 });
this.git6 = this.git6 || adjust(this.primaryColor, { h: +60 });
this.git7 = this.git7 || adjust(this.primaryColor, { h: +120 });
if (this.darkMode) {
this.git0 = lighten(this.git0, 25);
this.git1 = lighten(this.git1, 25);
this.git2 = lighten(this.git2, 25);
this.git3 = lighten(this.git3, 25);
this.git4 = lighten(this.git4, 25);
this.git5 = lighten(this.git5, 25);
this.git6 = lighten(this.git6, 25);
this.git7 = lighten(this.git7, 25);
} else {
this.git0 = darken(this.git0, 25);
this.git1 = darken(this.git1, 25);
this.git2 = darken(this.git2, 25);
this.git3 = darken(this.git3, 25);
this.git4 = darken(this.git4, 25);
this.git5 = darken(this.git5, 25);
this.git6 = darken(this.git6, 25);
this.git7 = darken(this.git7, 25);
}
this.gitInv0 = invert(this.git0);
this.gitInv1 = invert(this.git1);
this.gitInv2 = invert(this.git2);
this.gitInv3 = invert(this.git3);
this.gitInv4 = invert(this.git4);
this.gitInv5 = invert(this.git5);
this.gitInv6 = invert(this.git6);
this.gitInv7 = invert(this.git7);
this.gitBranchLabel0 = invert(this.labelTextColor);
this.gitBranchLabel1 = this.labelTextColor;
this.gitBranchLabel2 = this.labelTextColor;
this.gitBranchLabel3 = invert(this.labelTextColor);
this.gitBranchLabel4 = this.labelTextColor;
this.gitBranchLabel5 = this.labelTextColor;
this.gitBranchLabel6 = this.labelTextColor;
this.gitBranchLabel7 = this.labelTextColor;
}
calculate(overrides) {
if (typeof overrides !== 'object') {

37
src/themes/theme-forest.js
View File

@@ -169,6 +169,43 @@ class Theme {
this.relationColor = this.relationColor || this.lineColor;
this.relationLabelBackground = this.relationLabelBackground || this.edgeLabelBackground;
this.relationLabelColor = this.relationLabelColor || this.actorTextColor;
/* git */
this.git0 = this.git0 || this.primaryColor;
this.git1 = this.git1 || this.secondaryColor;
this.git2 = this.git2 || this.tertiaryColor;
this.git3 = this.git3 || adjust(this.primaryColor, { h: -30 });
this.git4 = this.git4 || adjust(this.primaryColor, { h: -60 });
this.git5 = this.git5 || adjust(this.primaryColor, { h: -90 });
this.git6 = this.git6 || adjust(this.primaryColor, { h: +60 });
this.git7 = this.git7 || adjust(this.primaryColor, { h: +120 });
if (this.darkMode) {
this.git0 = lighten(this.git0, 25);
this.git1 = lighten(this.git1, 25);
this.git2 = lighten(this.git2, 25);
this.git3 = lighten(this.git3, 25);
this.git4 = lighten(this.git4, 25);
this.git5 = lighten(this.git5, 25);
this.git6 = lighten(this.git6, 25);
this.git7 = lighten(this.git7, 25);
} else {
this.git0 = darken(this.git0, 25);
this.git1 = darken(this.git1, 25);
this.git2 = darken(this.git2, 25);
this.git3 = darken(this.git3, 25);
this.git4 = darken(this.git4, 25);
this.git5 = darken(this.git5, 25);
this.git6 = darken(this.git6, 25);
this.git7 = darken(this.git7, 25);
}
this.gitInv0 = invert(this.git0);
this.gitInv1 = invert(this.git1);
this.gitInv2 = invert(this.git2);
this.gitInv3 = invert(this.git3);
this.gitInv4 = invert(this.git4);
this.gitInv5 = invert(this.git5);
this.gitInv6 = invert(this.git6);
this.gitInv7 = invert(this.git7);
}
calculate(overrides) {
if (typeof overrides !== 'object') {

29
src/themes/theme-neutral.js
View File

@@ -219,6 +219,35 @@ class Theme {
this.relationColor = this.relationColor || this.lineColor;
this.relationLabelBackground = this.relationLabelBackground || this.edgeLabelBackground;
this.relationLabelColor = this.relationLabelColor || this.actorTextColor;
/* git */
this.git0 = darken(this.pie1, 25) || this.primaryColor;
this.git1 = this.pie2 || this.secondaryColor;
this.git2 = this.pie3 || this.tertiaryColor;
this.git3 = this.pie4 || adjust(this.primaryColor, { h: -30 });
this.git4 = this.pie5 || adjust(this.primaryColor, { h: -60 });
this.git5 = this.pie6 || adjust(this.primaryColor, { h: -90 });
this.git6 = this.pie7 || adjust(this.primaryColor, { h: +60 });
this.git7 = this.pie8 || adjust(this.primaryColor, { h: +120 });
this.gitInv0 = invert(this.git0);
this.gitInv1 = invert(this.git1);
this.gitInv2 = invert(this.git2);
this.gitInv3 = invert(this.git3);
this.gitInv4 = invert(this.git4);
this.gitInv5 = invert(this.git5);
this.gitInv6 = invert(this.git6);
this.gitInv7 = invert(this.git7);
this.branchLabelColor = this.branchLabelColor || this.labelTextColor;
this.gitBranchLabel0 = this.branchLabelColor;
this.gitBranchLabel1 = 'white';
this.gitBranchLabel2 = this.branchLabelColor;
this.gitBranchLabel3 = 'white';
this.gitBranchLabel4 = this.branchLabelColor;
this.gitBranchLabel5 = this.branchLabelColor;
this.gitBranchLabel6 = this.branchLabelColor;
this.gitBranchLabel7 = this.branchLabelColor;
}
calculate(overrides) {
if (typeof overrides !== 'object') {