diff --git a/cypress/platform/knsv-dark.html b/cypress/platform/knsv-dark.html
new file mode 100644
index 000000000..1f2ed5c32
--- /dev/null
+++ b/cypress/platform/knsv-dark.html
@@ -0,0 +1,158 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+flowchart
+ A --> B & C
+ subgraph apa
+ D --> E
+ end
+
+
+flowchart LR
+ id1(Start)-->id2(Stop)
+ style id1 fill:#f9f,stroke:#333,stroke-width:4px
+ style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
+
+
+
+
+
+ flowchart LR
+ A:::foo & B:::bar --> C:::foobar
+ classDef foo stroke:#f00
+ classDef bar stroke:#0f0
+ classDef ash color:red
+ class C ash
+ style C stroke:#00f, fill:black
+
+
+
+
+ stateDiagram
+ A:::foo
+ B:::bar --> C:::foobar
+ classDef foo stroke:#f00
+ classDef bar stroke:#0f0
+ style C stroke:#00f, fill:black, color:white
+
+
+
+
+
+
diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
index 91414e689..c77e7ec57 100644
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@@ -54,47 +54,38 @@
10px 10px;
background-repeat: repeat; */
}
- .malware {
- position: fixed;
- bottom: 0;
- left: 0;
- right: 0;
- height: 150px;
- background: red;
- color: black;
- display: flex;
- display: flex;
- justify-content: center;
- align-items: center;
- font-family: monospace;
- font-size: 72px;
- }
- /* tspan {
- font-size: 6px !important;
- } */
+ %%{init: {"look": "neo", "theme": "neo","fontFamily": "Arial"} }%%
flowchart
- 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" "bookmark"
- click c_c callback "new tooltip"
+ A[A really really really super long node] --> B & C
+ subgraph apa
+ D --> E
+ end
-
+
+%%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial", "themeVariables": {
+ "useGradient": true,
+ "gradientStart": '#fff',
+ "gradientStop": '#ccc'
+ }} }%%
+stateDiagram-v2
+ stateId
+
+
flowchart LR
id1(Start)-->id2(Stop)
style id1 fill:#f9f,stroke:#333,stroke-width:4px
style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
-
+
-
+
flowchart LR
A:::foo & B:::bar --> C:::foobar
classDef foo stroke:#f00
@@ -105,9 +96,9 @@ flowchart LR
-
+
stateDiagram
- A:::foo
+ A:::foo
B:::bar --> C:::foobar
classDef foo stroke:#f00
classDef bar stroke:#0f0
@@ -126,15 +117,17 @@ flowchart LR
alert('A callback was triggered');
};
mermaid.initialize({
- theme: 'neo',
+ theme: 'forest',
+
// handdrawnSeed: 12,
- // look: 'handdrawn',
+ look: 'neo',
// 'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX',
// layout: 'dagre',
// layout: 'elk',
// layout: 'fixed',
// htmlLabels: false,
flowchart: { titleTopMargin: 10 },
+
// fontFamily: 'Caveat',
// fontFamily: 'Kalam',
// fontFamily: 'courier',
diff --git a/cypress/platform/neo-test.html b/cypress/platform/neo-test.html
index 4d5794e43..bf23fee02 100644
--- a/cypress/platform/neo-test.html
+++ b/cypress/platform/neo-test.html
@@ -1979,7 +1979,7 @@ direction LR
mermaid.initialize({
handdrawn: false,
mergeEdges: true,
- layout: 'dagre',
+ layout: 'elk',
flowchart: { titleTopMargin: 10 },
// fontFamily: 'Caveat',
fontFamily: 'Kalam',
diff --git a/packages/mermaid/src/mermaidAPI.ts b/packages/mermaid/src/mermaidAPI.ts
index 45d284b8a..af12b9392 100644
--- a/packages/mermaid/src/mermaidAPI.ts
+++ b/packages/mermaid/src/mermaidAPI.ts
@@ -197,7 +197,7 @@ export const createUserStyles = (
svgId: string
): string => {
const userCSSstyles = createCssStyles(config, classDefs);
- const allStyles = getStyles(graphType, userCSSstyles, config.themeVariables);
+ const allStyles = getStyles(graphType, userCSSstyles, config.themeVariables, svgId);
// Now turn all of the styles into a (compiled) string that starts with the id
// use the stylis library to compile the css, turn the results into a valid CSS string (serialize(...., stringify))
@@ -534,7 +534,7 @@ function initialize(options: MermaidConfig = {}) {
const config =
typeof options === 'object' ? configApi.setSiteConfig(options) : configApi.getSiteConfig();
-
+ console.log('IPI config', config.themeVariables.useGradient);
setLogLevel(config.logLevel);
addDiagrams();
}
diff --git a/packages/mermaid/src/rendering-util/render.ts b/packages/mermaid/src/rendering-util/render.ts
index 03a12ed12..8fd3b00ea 100644
--- a/packages/mermaid/src/rendering-util/render.ts
+++ b/packages/mermaid/src/rendering-util/render.ts
@@ -47,11 +47,13 @@ export const render = async (data4Layout: any, svg: any, element: any, positions
const { useGradient, gradientStart, gradientStop } = data4Layout.config.themeVariables;
+ // console.log('IPI data4Layout', svg.attr('id'));
+
if (useGradient) {
const gradient = svg.append('linearGradient');
gradient
- .attr('id', 'gradient')
+ .attr('id', svg.attr('id') + '-gradient')
.attr('gradientUnits', 'userSpaceOnUse')
.attr('spreadMethod', 'pad');
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/cylinder.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/cylinder.ts
index 1674b4245..3166daea7 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/cylinder.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/cylinder.ts
@@ -51,10 +51,12 @@ export const createInnerCylinderPathD = (
export const cylinder = async (parent: SVGAElement, node: Node) => {
const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
- const w = bbox.width + node.padding;
+ const labelPaddingX = node.look === 'neo' ? node.padding * 2 : node.padding;
+ const labelPaddingY = node.look === 'neo' ? node.padding * 1 : node.padding;
+ const w = bbox.width + labelPaddingY;
const rx = w / 2;
const ry = rx / (2.5 + w / 50);
- const h = bbox.height + ry + node.padding;
+ const h = bbox.height + ry + labelPaddingX;
let cylinder: d3.Selection;
const { cssStyles } = node;
diff --git a/packages/mermaid/src/styles.spec.ts b/packages/mermaid/src/styles.spec.ts
index 698b2beaf..c03b6d8c7 100644
--- a/packages/mermaid/src/styles.spec.ts
+++ b/packages/mermaid/src/styles.spec.ts
@@ -73,7 +73,7 @@ describe('styles', () => {
addStylesForDiagram(diagramType, myTypeGetStylesFunc);
- const styles = getStyles(diagramType, '', getConfig().themeVariables);
+ const styles = getStyles(diagramType, '', getConfig().themeVariables, '');
await checkValidStylisCSSStyleSheet(styles);
});
@@ -107,7 +107,8 @@ describe('styles', () => {
diagramId,
'',
// @ts-expect-error This will probably be broken until we create a proper Themes type.
- themes[themeId].getThemeVariables()
+ themes[themeId].getThemeVariables(),
+ ''
);
await checkValidStylisCSSStyleSheet(styles);
diff --git a/packages/mermaid/src/styles.ts b/packages/mermaid/src/styles.ts
index 959bcba0d..34a5d5b13 100644
--- a/packages/mermaid/src/styles.ts
+++ b/packages/mermaid/src/styles.ts
@@ -15,7 +15,8 @@ const getStyles = (
errorTextColor: string;
lineColor: string;
useGradient: boolean;
- } & FlowChartStyleOptions
+ } & FlowChartStyleOptions,
+ svgId: string
) => {
let diagramStyles = '';
if (type in themes && themes[type as keyof typeof themes]) {
@@ -75,18 +76,19 @@ const getStyles = (
}
[data-look="neo"].node rect, [data-look="neo"].cluster rect, [data-look="neo"].node polygon {
- stroke: ${options.useGradient ? 'url(#gradient)' : options.nodeBorder};
+ stroke: ${options.useGradient ? 'url(' + svgId + '-gradient)' : options.nodeBorder};
filter: ${options.dropShadow};
}
- [data-look="neo"].node rect, [data-look="neo"].node circle, [data-look="neo"].node polygon {
- stroke: ${options.useGradient ? 'url(#gradient)' : options.nodeBorder};
+
+ [data-look="neo"].node rect, [data-look="neo"].node circle, [data-look="neo"].node polygon , [data-look="neo"].node path {
+ stroke: ${options.useGradient ? 'url(' + svgId + '-gradient)' : options.nodeBorder};
filter: ${options.dropShadow};
}
[data-look="neo"].node circle{
stroke: $(options.nodeBorder);
- stroke: ${options.useGradient ? 'url(#gradient)' : options.nodeBorder};
+ stroke: ${options.useGradient ? 'url(' + svgId + '-gradient)' : options.nodeBorder};
filter: ${options.dropShadow};
}
@@ -98,7 +100,8 @@ const getStyles = (
[data-look="neo"].statediagram-cluster rect {
fill: ${options.compositeTitleBackground};
- stroke: ${options.useGradient ? 'url(#gradient)' : options.nodeBorder};
+ stroke: ${options.useGradient ? 'url(' + svgId + '-gradient)' : options.nodeBorder};
+ //stroke: none;
stroke-width: 1px;
}