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

#1542 Theme variables setup

Browse Source
This commit is contained in:
Knut Sveidqvist
2020-07-17 09:16:39 +02:00
parent fd4240b774
commit 030b945828
8 changed files with 326 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files

124
cypress/platform/current.html
View File

@@ -24,62 +24,77 @@
</head> </head>
<body> <body>
<h1>info below</h1> <h1>info below</h1>
<div class="flex"> <div class="flex flex-wrap">
<div class="mermaid2" style="width: 50%; height: 20%;"> <div class="mermaid" style="width: 50%; height: 20%;">
flowchart BT %%{init: {"theme": forest, "logLevel": 1 }}%%
subgraph two
b1 graph TD
end A[Christmas] -->|Get money| B(Go shopping)
subgraph three B --> C{Let me think}
c1-->c2 B --> G[/Another/]
end C ==>|One| D[Laptop]
c1 --apa apa apa--> b1 C -->|Two| E[iPhone]
two --> c2 C -->|Three| F[fa:fa-car Car]
subgraph section
C
D
E
F
G
end
</div> </div>
<div class="mermaid2" style="width: 50%; height: 200px;"> <div class="mermaid" style="width: 50%; height: 20%;">
sequenceDiagram %%{init: {"theme": forest, "logLevel": 1 }}%%
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;">
%%{init: {'securityLevel': 'loose'}}%%
graph TD graph TD
A[Christmas] -->|Get money| B(Go shopping) A[Christmas] -->|Get money| B(Go shopping)
B --> C{{Let me think...<br />Do I want something for work,<br />something to spend every free second with,<br />or something to get around?}} B --> C{Let me think}
C -->|One| D[Laptop] B --> G[/Another/]
C -->|Two| E[iPhone] C ==>|One| D[Laptop]
C -->|Three| F[Car] C -->|Two| E[iPhone]
click A "index.html#link-clicked" "link test" C -->|Three| F[fa:fa-car Car]
click B callback "click test" subgraph section
classDef someclass fill:#f96; C
class A someclass; D
class C someclass; E
F
G
end
</div> </div>
<div class="mermaid2" style="width: 50%; height: 200px;"> <div class="mermaid" style="width: 50%; height: 20%;">
%%{init: {"theme": neutral, "logLevel": 1 }}%%
flowchart BT graph TD
subgraph a A[Christmas] -->|Get money| B(Go shopping)
b1 -- ok --> b2 B --> C{Let me think}
end B --> G[/Another/]
a -- sert --> c C ==>|One| D[Laptop]
c --> d C -->|Two| E[iPhone]
b1 --> d C -->|Three| F[fa:fa-car Car]
a --asd123 --> d subgraph section
C
D
E
F
G
end
</div> </div>
<div class="mermaid2" style="width: 50%; height: 20%;"> <div class="mermaid" style="background: #3f3f3f; width: 50%; height: 20%;">
stateDiagram-v2 %%{init: {"theme": dark, "logLevel": 1 }}%%
state A { graph TD
B1 --> B2: ok A[Christmas] -->|Get money| B(Go shopping)
} B --> C{Let me think}
A --> C: sert B --> G[/Another/]
C --> D C ==>|One| D[Laptop]
B1 --> D C -->|Two| E[iPhone]
A --> D: asd123 C -->|Three| F[fa:fa-car Car]
</div> subgraph section
</div> C
<div class="mermaid2" style="width: 50%; height: 20%;"> D
E
F
G
end
</div> </div>
</div>
<script src="./mermaid.js"></script> <script src="./mermaid.js"></script>
<script> <script>
@@ -88,17 +103,18 @@ stateDiagram-v2
}; };
mermaid.initialize({ mermaid.initialize({
// theme: 'dark', // theme: 'dark',
theme: 'forest', theme: 'dark',
// arrowMarkerAbsolute: true, // arrowMarkerAbsolute: true,
// themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}', // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
logLevel: 0, logLevel: 0,
flowchart: { curve: 'cardinal', "htmlLabels": false }, flowchart: { useMaxWidth: true },
graph: { curve: 'cardinal', "htmlLabels": false },
// gantt: { axisFormat: '%m/%d/%Y' }, // gantt: { axisFormat: '%m/%d/%Y' },
sequence: { actorMargin: 50, showSequenceNumbers: true }, sequence: { actorMargin: 50, showSequenceNumbers: true },
// sequenceDiagram: { actorMargin: 300 } // deprecated // sequenceDiagram: { actorMargin: 300 } // deprecated
fontFamily: '"arial", sans-serif', fontFamily: '"arial", sans-serif',
curve: 'cardinal', curve: 'cardinal',
securityLevel: 'strict' securityLevel: 'strict',
}); });
function callback(){alert('It worked');} function callback(){alert('It worked');}
</script> </script>

13
src/config.js
View File

@@ -874,10 +874,6 @@ const currentConfig = assignWithDepth({}, defaultConfig);
export const setSiteConfig = conf => { export const setSiteConfig = conf => {
assignWithDepth(currentConfig, conf, { clobber: true }); assignWithDepth(currentConfig, conf, { clobber: true });
// Set theme variables if user has set the theme option // Set theme variables if user has set the theme option
// if (conf.theme && themes[conf.theme]) {
// conf.themeVariables = themes[conf.theme];
// }
// debugger;
assignWithDepth(siteConfig, conf); assignWithDepth(siteConfig, conf);
return getSiteConfig(); return getSiteConfig();
@@ -912,9 +908,6 @@ export const getSiteConfig = () => {
export const setConfig = conf => { export const setConfig = conf => {
sanitize(conf); sanitize(conf);
// if (conf.theme && themes[conf.theme]) {
// conf.themeVariables = themes[conf.theme];
// }
assignWithDepth(currentConfig, conf); assignWithDepth(currentConfig, conf);
return getConfig(); return getConfig();
}; };
@@ -972,12 +965,6 @@ export const sanitize = options => {
export const reset = (conf = getSiteConfig()) => { export const reset = (conf = getSiteConfig()) => {
Object.keys(siteConfig).forEach(key => delete siteConfig[key]); Object.keys(siteConfig).forEach(key => delete siteConfig[key]);
Object.keys(currentConfig).forEach(key => delete currentConfig[key]); Object.keys(currentConfig).forEach(key => delete currentConfig[key]);
// Set theme variables if user has set the theme option
// if (conf.theme && themes[conf.theme]) {
// conf.themeVariables = themes[conf.theme];
// }
// debugger;
assignWithDepth(siteConfig, conf, { clobber: true }); assignWithDepth(siteConfig, conf, { clobber: true });
assignWithDepth(currentConfig, conf, { clobber: true }); assignWithDepth(currentConfig, conf, { clobber: true });
}; };

4
src/mermaid.js
View File

@@ -129,7 +129,7 @@ const init = function() {
}; };
const initialize = function(config) { const initialize = function(config) {
// mermaidAPI.reset(); mermaidAPI.reset();
if (typeof config.mermaid !== 'undefined') { if (typeof config.mermaid !== 'undefined') {
if (typeof config.mermaid.startOnLoad !== 'undefined') { if (typeof config.mermaid.startOnLoad !== 'undefined') {
mermaid.startOnLoad = config.mermaid.startOnLoad; mermaid.startOnLoad = config.mermaid.startOnLoad;
@@ -139,7 +139,7 @@ const initialize = function(config) {
} }
} }
mermaidAPI.initialize(config); mermaidAPI.initialize(config);
mermaidAPI.reset(); // mermaidAPI.reset();
}; };
/** /**

4
src/mermaidAPI.js
View File

@@ -55,7 +55,8 @@ import getStyles from './styles';
const themes = {}; const themes = {};
for (const themeName of ['default', 'forest', 'dark', 'neutral']) { for (const themeName of ['default', 'forest', 'dark', 'neutral']) {
themes[themeName] = require(`./theme-${themeName}.js`).default; themes[themeName] = require(`./theme-${themeName}.js`);
console.warn(themeName, themes[themeName]);
} }
function parse(text) { function parse(text) {
@@ -540,6 +541,7 @@ function initialize(options) {
// Set default options // Set default options
if (options.theme && themes[options.theme]) { if (options.theme && themes[options.theme]) {
// Todo merge with user options
options.themeVariables = themes[options.theme]; options.themeVariables = themes[options.theme];
} }

83
src/theme-dark.js
View File

@@ -1,21 +1,64 @@
const theme = { export const mainBkg = '#1f2020';
mainBkg: '#ECECFF', export const secondBkg = 'lighten(#1f2020; 16)';
secondBkg: '#ffffde', export const mainContrastColor = 'lightgrey';
lineColor: '#333333', export const darkTextColor = '#323D47';
border1: '#CCCCFF', export const lineColor = mainContrastColor;
border2: '#aaaa33', export const border1 = '#81B1DB';
arrowheadColor: '#333333', export const border2 = 'rgba(255; 255; 255; 0.25)';
labelColor: 'black', export const arrowheadColor = mainContrastColor;
errorBkgColor: '#552222',
errorTextColor: '#552222',
/* Flowchart variables */ /* Flowchart variables */
nodeBkg: 'mainBkg',
nodeBorder: '#9370DB', export const nodeBkg = mainBkg;
clusterBkg: 'secondBkg', export const nodeBorder = border1;
clusterBorder: 'border2', export const clusterBkg = secondBkg;
defaultLinkColor: 'lineColor', export const clusterBorder = border2;
titleColor: '#333', export const defaultLinkColor = lineColor;
edgeLabelBackground: '#e8e8e8' export const titleColor = '#F9FFFE';
}; export const edgeLabelBackground = '#e8e8e8';
export default theme;
/* Sequence Diagram variables */
export const actorBorder = border1;
export const actorBkg = mainBkg;
export const actorTextColor = mainContrastColor;
export const actorLineColor = mainContrastColor;
export const signalColor = mainContrastColor;
export const signalTextColor = mainContrastColor;
export const labelBoxBkgColor = actorBkg;
export const labelBoxBorderColor = actorBorder;
export const labelTextColor = mainContrastColor;
export const loopTextColor = mainContrastColor;
export const noteBorderColor = border2;
export const noteBkgColor = '#fff5ad';
export const noteTextColor = mainBkg;
export const activationBorderColor = border1;
export const activationBkgColor = secondBkg;
export const sequenceNumberColor = 'black';
/* Gantt chart variables */
export const sectionBkgColor = 'rgba(255; 255; 255; 0.3)';
export const altSectionBkgColor = 'white';
export const sectionBkgColor2 = '#EAE8B9';
export const taskBorderColor = 'rgba(255; 255; 255; 0.5)';
export const taskBkgColor = mainBkg;
export const taskTextColor = darkTextColor;
export const taskTextLightColor = mainContrastColor;
export const taskTextOutsideColor = taskTextLightColor;
export const taskTextClickableColor = '#003163';
export const activeTaskBorderColor = 'rgba(255; 255; 255; 0.5)';
export const activeTaskBkgColor = '#81B1DB';
export const gridColor = mainContrastColor;
export const doneTaskBkgColor = mainContrastColor;
export const doneTaskBorderColor = 'grey';
export const critBorderColor = '#E83737';
export const critBkgColor = '#E83737';
export const taskTextDarkColor = darkTextColor;
export const todayLineColor = '#DB5757';
/* state colors */
export const labelColor = 'black';
export const errorBkgColor = '#a44141';
export const errorTextColor = '#ddd';

81
src/theme-default.js
View File

@@ -1,21 +1,62 @@
const theme = { export const mainBkg = '#ECECFF';
mainBkg: '#ECECFF', export const secondBkg = '#ffffde';
secondBkg: '#ffffde', export const lineColor = '#333333';
lineColor: '#333333', export const border1 = '#CCCCFF';
border1: '#CCCCFF', export const border2 = '#aaaa33';
border2: '#aaaa33', export const arrowheadColor = '#333333';
arrowheadColor: '#333333',
labelColor: 'black',
errorBkgColor: '#552222',
errorTextColor: '#552222',
/* Flowchart variables */ /* Flowchart variables */
nodeBkg: 'mainBkg',
nodeBorder: '#9370DB', export const nodeBkg = mainBkg;
clusterBkg: 'secondBkg', export const nodeBorder = '#9370DB';
clusterBorder: 'border2', export const clusterBkg = secondBkg;
defaultLinkColor: 'lineColor', export const clusterBorder = border2;
titleColor: '#333', export const defaultLinkColor = lineColor;
edgeLabelBackground: '#e8e8e8' export const titleColor = '#333';
}; export const edgeLabelBackground = '#e8e8e8';
export default theme;
/* Sequence Diagram variables */
export const actorBorder = border1;
export const actorBkg = mainBkg;
export const actorTextColor = 'black';
export const actorLineColor = 'grey';
export const signalColor = '#333';
export const signalTextColor = '#333';
export const labelBoxBkgColor = actorBkg;
export const labelBoxBorderColor = actorBorder;
export const labelTextColor = actorTextColor;
export const loopTextColor = actorTextColor;
export const noteBorderColor = border2;
export const noteBkgColor = '#fff5ad';
export const noteTextColor = actorTextColor;
export const activationBorderColor = '#666';
export const activationBkgColor = '#f4f4f4';
export const sequenceNumberColor = 'white';
/* Gantt chart variables */
export const sectionBkgColor = 'rgba(102; 102; 255; 0.49)';
export const altSectionBkgColor = 'white';
export const sectionBkgColor2 = '#fff400';
export const taskBorderColor = '#534fbc';
export const taskBkgColor = '#8a90dd';
export const taskTextLightColor = 'white';
export const taskTextColor = taskTextLightColor;
export const taskTextDarkColor = 'black';
export const taskTextOutsideColor = taskTextDarkColor;
export const taskTextClickableColor = '#003163';
export const activeTaskBorderColor = '#534fbc';
export const activeTaskBkgColor = '#bfc7ff';
export const gridColor = 'lightgrey';
export const doneTaskBkgColor = 'lightgrey';
export const doneTaskBorderColor = 'grey';
export const critBorderColor = '#ff8888';
export const critBkgColor = 'red';
export const todayLineColor = 'red';
/* state colors */
export const labelColor = 'black';
export const errorBkgColor = '#552222';
export const errorTextColor = '#552222';

81
src/theme-forest.js
View File

@@ -1,21 +1,62 @@
const theme = { export const mainBkg = '#cde498';
mainBkg: 'red', export const secondBkg = '#cdffb2';
secondBkg: '#ffffde', export const lineColor = 'green';
lineColor: '#333333', export const border1 = '#13540c';
border1: '#CCCCFF', export const border2 = '#6eaa49';
border2: '#aaaa33', export const arrowheadColor = 'green';
arrowheadColor: '#333333',
labelColor: 'black',
errorBkgColor: '#552222',
errorTextColor: '#552222',
/* Flowchart variables */ /* Flowchart variables */
nodeBkg: 'red',
nodeBorder: '#9370DB', export const nodeBkg = mainBkg;
clusterBkg: 'secondBkg', export const nodeBorder = border1;
clusterBorder: 'border2', export const clusterBkg = secondBkg;
defaultLinkColor: 'lineColor', export const clusterBorder = border2;
titleColor: '#333', export const defaultLinkColor = lineColor;
edgeLabelBackground: '#e8e8e8' export const titleColor = '#333';
}; export const edgeLabelBackground = '#e8e8e8';
export default theme;
/* Sequence Diagram variables */
export const actorBorder = border1;
export const actorBkg = mainBkg;
export const actorTextColor = 'black';
export const actorLineColor = 'grey';
export const signalColor = '#333';
export const signalTextColor = '#333';
export const labelBoxBkgColor = actorBkg;
export const labelBoxBorderColor = '#326932';
export const labelTextColor = actorTextColor;
export const loopTextColor = actorTextColor;
export const noteBorderColor = border2;
export const noteBkgColor = '#fff5ad';
export const noteTextColor = actorTextColor;
export const activationBorderColor = '#666';
export const activationBkgColor = '#f4f4f4';
export const sequenceNumberColor = 'white';
/* Gantt chart variables */
export const sectionBkgColor = '#6eaa49';
export const altSectionBkgColor = 'white';
export const sectionBkgColor2 = '#6eaa49';
export const taskBorderColor = border1;
export const taskBkgColor = '#487e3a';
export const taskTextLightColor = 'white';
export const taskTextColor = taskTextLightColor;
export const taskTextDarkColor = 'black';
export const taskTextOutsideColor = taskTextDarkColor;
export const taskTextClickableColor = '#003163';
export const activeTaskBorderColor = taskBorderColor;
export const activeTaskBkgColor = mainBkg;
export const gridColor = 'lightgrey';
export const doneTaskBkgColor = 'lightgrey';
export const doneTaskBorderColor = 'grey';
export const critBorderColor = '#ff8888';
export const critBkgColor = 'red';
export const todayLineColor = 'red';
/* state colors */
export const labelColor = 'black';
export const errorBkgColor = '#552222';
export const errorTextColor = '#552222';

86
src/theme-neutral.js
View File

@@ -1,21 +1,67 @@
const theme = { export const mainBkg = '#eee';
mainBkg: 'yellow', export const contrast = '#26a';
secondBkg: '#ffffde', export const secondBkg = 'lighten(contrast; 55%)';
lineColor: '#333333', export const lineColor = '#666';
border1: '#CCCCFF', export const border1 = '#999';
border2: '#aaaa33', export const border2 = contrast;
arrowheadColor: '#333333', export const note = '#ffa';
labelColor: 'black', export const text = '#333';
errorBkgColor: '#552222', export const critical = '#d42';
errorTextColor: '#552222', export const done = '#bbb';
export const arrowheadColor = '#333333';
/* Flowchart variables */ /* Flowchart variables */
nodeBkg: 'mainBkg',
nodeBorder: '#9370DB', export const nodeBkg = mainBkg;
clusterBkg: 'secondBkg', export const nodeBorder = border1;
clusterBorder: 'border2', export const clusterBkg = secondBkg;
defaultLinkColor: 'lineColor', export const clusterBorder = border2;
titleColor: '#333', export const defaultLinkColor = lineColor;
edgeLabelBackground: '#e8e8e8' export const titleColor = text;
}; export const edgeLabelBackground = 'white';
export default theme;
/* Sequence Diagram variables */
export const actorBorder = border1;
export const actorBkg = mainBkg;
export const actorTextColor = text;
export const actorLineColor = lineColor;
export const signalColor = text;
export const signalTextColor = text;
export const labelBoxBkgColor = actorBkg;
export const labelBoxBorderColor = actorBorder;
export const labelTextColor = text;
export const loopTextColor = text;
export const noteBorderColor = 'darken(note; 60%)';
export const noteBkgColor = note;
export const noteTextColor = actorTextColor;
export const activationBorderColor = '#666';
export const activationBkgColor = '#f4f4f4';
export const sequenceNumberColor = 'white';
/* Gantt chart variables */
export const sectionBkgColor = 'lighten(contrast; 30%)';
export const altSectionBkgColor = 'white';
export const sectionBkgColor2 = 'lighten(contrast; 30%)';
export const taskBorderColor = 'darken(contrast; 10%)';
export const taskBkgColor = contrast;
export const taskTextLightColor = 'white';
export const taskTextColor = taskTextLightColor;
export const taskTextDarkColor = text;
export const taskTextOutsideColor = taskTextDarkColor;
export const taskTextClickableColor = '#003163';
export const activeTaskBorderColor = taskBorderColor;
export const activeTaskBkgColor = mainBkg;
export const gridColor = 'lighten(border1; 30%)';
export const doneTaskBkgColor = done;
export const doneTaskBorderColor = lineColor;
export const critBkgColor = critical;
export const critBorderColor = 'darken(critBkgColor; 10%)';
export const todayLineColor = critBkgColor;
/* state colors */
export const labelColor = 'black';
export const errorBkgColor = '#552222';
export const errorTextColor = '#552222';