From 9fca13ca19aaad20a252011148cbb45478531a05 Mon Sep 17 00:00:00 2001 From: Per Brolin Date: Mon, 3 Jun 2024 13:10:05 +0200 Subject: [PATCH 01/12] Added first initial styling for neo for state diagrams --- cypress/platform/per.html | 101 ++++- packages/mermaid/src/diagrams/state/styles.js | 10 +- .../rendering-elements/shapes/drawRect.ts | 33 +- .../rendering-elements/shapes/roundedRect.ts | 8 +- .../rendering-elements/shapes/state.ts | 6 +- .../mermaid/src/rendering-util/types.d.ts | 2 + packages/mermaid/src/styles.ts | 4 +- packages/mermaid/src/themes/index.js | 4 + packages/mermaid/src/themes/theme-base.js | 2 +- packages/mermaid/src/themes/theme-dark.js | 1 + packages/mermaid/src/themes/theme-default.js | 1 + packages/mermaid/src/themes/theme-forest.js | 1 + packages/mermaid/src/themes/theme-neo.js | 368 ++++++++++++++++++ packages/mermaid/src/themes/theme-neutral.js | 1 + 14 files changed, 504 insertions(+), 38 deletions(-) create mode 100644 packages/mermaid/src/themes/theme-neo.js diff --git a/cypress/platform/per.html b/cypress/platform/per.html index e84cea2d0..4572250ed 100644 --- a/cypress/platform/per.html +++ b/cypress/platform/per.html @@ -4,16 +4,35 @@ + + + + + + + -
Security check
- 
-flowchart LR
-A-->B
-        
-            mindmap
-          root
-            ch1
-            ch2
-
Active + + state Active { + direction BT + [*] --> Inner + Inner --> NumLockOn : EvNumLockPressed + } + %% Outer --> Inner + - - - - diff --git a/packages/mermaid/src/diagrams/state/styles.js b/packages/mermaid/src/diagrams/state/styles.js index fe3d7078b..b5bfd2a54 100644 --- a/packages/mermaid/src/diagrams/state/styles.js +++ b/packages/mermaid/src/diagrams/state/styles.js @@ -151,9 +151,15 @@ g.stateGroup line { } .statediagram-state rect.basic { - rx: 5px; - ry: 5px; + rx: ${options.radius}px; + ry: ${options.radius}px; } + +.state-shadow { + filter: drop-shadow( 3px 3px 2px rgba(0,0,0,.7) ); +} + + .statediagram-state rect.divider { stroke-dasharray: 10,10; fill: ${options.altBackground ? options.altBackground : '#efefef'}; diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/drawRect.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/drawRect.ts index e8355e1a8..908af30b8 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/drawRect.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/drawRect.ts @@ -5,35 +5,37 @@ import type { Node, RectOptions } from '$root/rendering-util/types.d.ts'; import { createRoundedRectPathD } from './roundedRectPath.js'; import { userNodeOverrides } from '$root/rendering-util/rendering-elements/shapes/handdrawnStyles.js'; import rough from 'roughjs'; +import { getConfig } from '$root/diagram-api/diagramAPI.js'; export const drawRect = async (parent: SVGAElement, node: Node, options: RectOptions) => { + const { themeVariables, handdrawnSeed } = getConfig(); + const { nodeBorder, mainBkg } = themeVariables; + const { shapeSvg, bbox, halfPadding } = await labelHelper( parent, node, getNodeClasses(node), true ); - - const totalWidth = bbox.width + node.padding; - const totalHeight = bbox.height + node.padding; - const x = -bbox.width / 2 - halfPadding; - const y = -bbox.height / 2 - halfPadding; + const totalWidth = bbox.width + options.labelPaddingX * 2; + const totalHeight = bbox.height + options.labelPaddingY * 2; + const x = -bbox.width / 2 - options.labelPaddingX; + const y = -bbox.height / 2 - options.labelPaddingY; let rect; - let { rx, ry, cssStyles, useRough } = node; + let { rx, ry } = node; + const { cssStyles, useRough } = node; //use options rx, ry overrides if present if (options && options.rx && options.ry) { rx = options.rx; ry = options.ry; } - if (useRough) { // @ts-ignore TODO: Fix rough typings const rc = rough.svg(shapeSvg); const options = userNodeOverrides(node, {}); - console.log('rect options: ', options); const roughNode = rx || ry ? rc.path(createRoundedRectPathD(x, y, totalWidth, totalHeight, rx || 0), options) @@ -41,6 +43,21 @@ export const drawRect = async (parent: SVGAElement, node: Node, options: RectOpt rect = shapeSvg.insert(() => roughNode, ':first-child'); rect.attr('class', 'basic label-container').attr('style', cssStyles); + } else if (node.look === 'neo') { + // TODO: Take theme and look into account + rect = shapeSvg.insert('rect', ':first-child'); + + rect + .attr('class', 'basic label-container neo-node state-shadow') + .attr('style', cssStyles) + .attr('rx', rx) + .attr('data-id', 'abc') + .attr('data-et', 'node') + .attr('ry', ry) + .attr('x', x) + .attr('y', y) + .attr('width', totalWidth) + .attr('height', totalHeight); } else { rect = shapeSvg.insert('rect', ':first-child'); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/roundedRect.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/roundedRect.ts index aa254c000..c5066bd22 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/roundedRect.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/roundedRect.ts @@ -2,12 +2,14 @@ import type { Node, RectOptions } from '$root/rendering-util/types.d.ts'; import { drawRect } from './drawRect.js'; export const roundedRect = async (parent: SVGAElement, node: Node) => { + node.look = 'neo'; const options = { - rx: 5, - ry: 5, + rx: node.look === 'neo' ? 1 : 1, + ry: node.look === 'neo' ? 1 : 1, + labelPaddingX: node.padding * 2, + labelPaddingY: node.padding * 1, classes: '', } as RectOptions; - console.log('roundedRect XDX'); return drawRect(parent, node, options); }; diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/state.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/state.ts index 73d119045..991e7aed0 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/state.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/state.ts @@ -2,9 +2,11 @@ import type { Node } from '$root/rendering-util/types.d.ts'; import { drawRect } from './drawRect.js'; export const state = async (parent: SVGAElement, node: Node) => { + node.look = 'neo'; + const options = { - rx: 5, - ry: 5, + rx: node.look === 'neo' ? 2 : 5, + ry: node.look === 'neo' ? 2 : 5, classes: 'flowchart-node', }; return drawRect(parent, node, options); diff --git a/packages/mermaid/src/rendering-util/types.d.ts b/packages/mermaid/src/rendering-util/types.d.ts index 4b8750725..5eb2635b4 100644 --- a/packages/mermaid/src/rendering-util/types.d.ts +++ b/packages/mermaid/src/rendering-util/types.d.ts @@ -97,6 +97,8 @@ interface Edge { interface RectOptions { rx: number; ry: number; + labelPaddingX: number; + labelPaddingY: number; classes: string; } diff --git a/packages/mermaid/src/styles.ts b/packages/mermaid/src/styles.ts index fde079450..b72fc0a55 100644 --- a/packages/mermaid/src/styles.ts +++ b/packages/mermaid/src/styles.ts @@ -69,7 +69,9 @@ const getStyles = ( } ${diagramStyles} - + .node .neo-node { + stroke: red; + } ${userStyles} `; }; diff --git a/packages/mermaid/src/themes/index.js b/packages/mermaid/src/themes/index.js index 6ffe6274d..979d83bfa 100644 --- a/packages/mermaid/src/themes/index.js +++ b/packages/mermaid/src/themes/index.js @@ -3,6 +3,7 @@ import { getThemeVariables as darkThemeVariables } from './theme-dark.js'; import { getThemeVariables as defaultThemeVariables } from './theme-default.js'; import { getThemeVariables as forestThemeVariables } from './theme-forest.js'; import { getThemeVariables as neutralThemeVariables } from './theme-neutral.js'; +import { getThemeVariables as neoThemeVariables } from './theme-neo.js'; export default { base: { @@ -20,4 +21,7 @@ export default { neutral: { getThemeVariables: neutralThemeVariables, }, + neo: { + getThemeVariables: neoThemeVariables, + }, }; diff --git a/packages/mermaid/src/themes/theme-base.js b/packages/mermaid/src/themes/theme-base.js index dde3b9ecf..f06ab80b1 100644 --- a/packages/mermaid/src/themes/theme-base.js +++ b/packages/mermaid/src/themes/theme-base.js @@ -20,7 +20,7 @@ class Theme { this.noteTextColor = '#333'; this.THEME_COLOR_LIMIT = 12; - + this.radius = 5; // dark this.fontFamily = '"trebuchet ms", verdana, arial, sans-serif'; diff --git a/packages/mermaid/src/themes/theme-dark.js b/packages/mermaid/src/themes/theme-dark.js index 24ba128b5..e06de0453 100644 --- a/packages/mermaid/src/themes/theme-dark.js +++ b/packages/mermaid/src/themes/theme-dark.js @@ -29,6 +29,7 @@ class Theme { this.labelBackground = '#181818'; this.textColor = '#ccc'; this.THEME_COLOR_LIMIT = 12; + this.radius = 5; /* Flowchart variables */ this.nodeBkg = 'calculated'; diff --git a/packages/mermaid/src/themes/theme-default.js b/packages/mermaid/src/themes/theme-default.js index d95ccf59e..858a6ad41 100644 --- a/packages/mermaid/src/themes/theme-default.js +++ b/packages/mermaid/src/themes/theme-default.js @@ -37,6 +37,7 @@ class Theme { this.labelBackground = '#e8e8e8'; this.textColor = '#333'; this.THEME_COLOR_LIMIT = 12; + this.radius = 5; /* Flowchart variables */ diff --git a/packages/mermaid/src/themes/theme-forest.js b/packages/mermaid/src/themes/theme-forest.js index 4bb7d2441..0e85c6f2c 100644 --- a/packages/mermaid/src/themes/theme-forest.js +++ b/packages/mermaid/src/themes/theme-forest.js @@ -31,6 +31,7 @@ class Theme { this.lineColor = invert(this.background); this.textColor = invert(this.background); this.THEME_COLOR_LIMIT = 12; + this.radius = 5; /* Flowchart variables */ this.nodeBkg = 'calculated'; diff --git a/packages/mermaid/src/themes/theme-neo.js b/packages/mermaid/src/themes/theme-neo.js new file mode 100644 index 000000000..94843e67c --- /dev/null +++ b/packages/mermaid/src/themes/theme-neo.js @@ -0,0 +1,368 @@ +import { darken, lighten, adjust, invert, isDark, toRgba } from 'khroma'; +import { mkBorder } from './theme-helpers.js'; +import { + oldAttributeBackgroundColorEven, + oldAttributeBackgroundColorOdd, +} from './erDiagram-oldHardcodedValues.js'; + +class Theme { + constructor() { + /** # Base variables */ + /** + * - Background - used to know what the background color is of the diagram. This is used for + * deducing colors for instance line color. Default value is #f4f4f4. + */ + this.background = '#f4f4f4'; + + this.primaryColor = '#cccccc'; + this.mainBkg = '#f4f4f4'; + + this.noteBkgColor = '#fff5ad'; + this.noteTextColor = '#333'; + + this.THEME_COLOR_LIMIT = 12; + this.radius = 2; + // dark + + this.fontFamily = '"trebuchet ms", verdana, arial, sans-serif'; + this.fontSize = '16px'; + } + updateColors() { + // The || is to make sure that if the variable has been defined by a user override that value is to be used + + /* Main */ + 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 }); + + this.primaryBorderColor = this.primaryBorderColor || mkBorder(this.primaryColor, this.darkMode); + this.secondaryBorderColor = + this.secondaryBorderColor || mkBorder(this.secondaryColor, this.darkMode); + this.tertiaryBorderColor = + this.tertiaryBorderColor || mkBorder(this.tertiaryColor, this.darkMode); + this.noteBorderColor = this.noteBorderColor || mkBorder(this.noteBkgColor, this.darkMode); + this.noteBkgColor = this.noteBkgColor || '#fff5ad'; + this.noteTextColor = this.noteTextColor || '#333'; + + this.secondaryTextColor = this.secondaryTextColor || invert(this.secondaryColor); + this.tertiaryTextColor = this.tertiaryTextColor || invert(this.tertiaryColor); + this.lineColor = this.lineColor || invert(this.background); + this.arrowheadColor = this.arrowheadColor || invert(this.background); + this.textColor = this.textColor || this.primaryTextColor; + + // TODO: should this instead default to secondaryBorderColor? + this.border2 = this.border2 || this.tertiaryBorderColor; + + /* Flowchart variables */ + this.nodeBkg = this.nodeBkg || this.primaryColor; + this.mainBkg = this.mainBkg || this.primaryColor; + this.nodeBorder = this.nodeBorder || this.primaryBorderColor; + this.clusterBkg = this.clusterBkg || this.tertiaryColor; + this.clusterBorder = this.clusterBorder || this.tertiaryBorderColor; + this.defaultLinkColor = this.defaultLinkColor || this.lineColor; + this.titleColor = this.titleColor || this.tertiaryTextColor; + this.edgeLabelBackground = + this.edgeLabelBackground || + (this.darkMode ? darken(this.secondaryColor, 30) : this.secondaryColor); + this.nodeTextColor = this.nodeTextColor || this.primaryTextColor; + /* Sequence Diagram variables */ + + // this.actorBorder = lighten(this.border1, 0.5); + this.actorBorder = this.actorBorder || this.primaryBorderColor; + this.actorBkg = this.actorBkg || this.mainBkg; + this.actorTextColor = this.actorTextColor || this.primaryTextColor; + this.actorLineColor = this.actorLineColor || this.actorBorder; + this.labelBoxBkgColor = this.labelBoxBkgColor || this.actorBkg; + this.signalColor = this.signalColor || this.textColor; + this.signalTextColor = this.signalTextColor || this.textColor; + this.labelBoxBorderColor = this.labelBoxBorderColor || this.actorBorder; + this.labelTextColor = this.labelTextColor || this.actorTextColor; + this.loopTextColor = this.loopTextColor || this.actorTextColor; + this.activationBorderColor = this.activationBorderColor || darken(this.secondaryColor, 10); + this.activationBkgColor = this.activationBkgColor || this.secondaryColor; + this.sequenceNumberColor = this.sequenceNumberColor || invert(this.lineColor); + + /* Gantt chart variables */ + + this.sectionBkgColor = this.sectionBkgColor || this.tertiaryColor; + this.altSectionBkgColor = this.altSectionBkgColor || 'white'; + this.sectionBkgColor = this.sectionBkgColor || this.secondaryColor; + this.sectionBkgColor2 = this.sectionBkgColor2 || this.primaryColor; + this.excludeBkgColor = this.excludeBkgColor || '#eeeeee'; + this.taskBorderColor = this.taskBorderColor || this.primaryBorderColor; + this.taskBkgColor = this.taskBkgColor || this.primaryColor; + this.activeTaskBorderColor = this.activeTaskBorderColor || this.primaryColor; + this.activeTaskBkgColor = this.activeTaskBkgColor || lighten(this.primaryColor, 23); + this.gridColor = this.gridColor || 'lightgrey'; + this.doneTaskBkgColor = this.doneTaskBkgColor || 'lightgrey'; + this.doneTaskBorderColor = this.doneTaskBorderColor || 'grey'; + this.critBorderColor = this.critBorderColor || '#ff8888'; + this.critBkgColor = this.critBkgColor || 'red'; + this.todayLineColor = this.todayLineColor || 'red'; + this.taskTextColor = this.taskTextColor || this.textColor; + this.taskTextOutsideColor = this.taskTextOutsideColor || this.textColor; + this.taskTextLightColor = this.taskTextLightColor || this.textColor; + this.taskTextColor = this.taskTextColor || this.primaryTextColor; + this.taskTextDarkColor = this.taskTextDarkColor || this.textColor; + this.taskTextClickableColor = this.taskTextClickableColor || '#003163'; + + /* Sequence Diagram variables */ + + this.personBorder = this.personBorder || this.primaryBorderColor; + this.personBkg = this.personBkg || this.mainBkg; + + /* state colors */ + this.transitionColor = this.transitionColor || this.lineColor; + this.transitionLabelColor = this.transitionLabelColor || this.textColor; + /* The color of the text tables of the states*/ + this.stateLabelColor = this.stateLabelColor || this.stateBkg || this.primaryTextColor; + + this.stateBkg = this.stateBkg || this.mainBkg; + this.labelBackgroundColor = this.labelBackgroundColor || this.stateBkg; + this.compositeBackground = this.compositeBackground || this.background || this.tertiaryColor; + this.altBackground = this.altBackground || this.tertiaryColor; + this.compositeTitleBackground = this.compositeTitleBackground || this.mainBkg; + this.compositeBorder = this.compositeBorder || this.nodeBorder; + this.innerEndBackground = this.nodeBorder; + this.errorBkgColor = this.errorBkgColor || this.tertiaryColor; + this.errorTextColor = this.errorTextColor || this.tertiaryTextColor; + this.transitionColor = this.transitionColor || this.lineColor; + this.specialStateColor = this.lineColor; + + /* Color Scale */ + /* Each color-set will have a background, a foreground and a border color */ + this.cScale0 = this.cScale0 || this.primaryColor; + this.cScale1 = this.cScale1 || this.secondaryColor; + this.cScale2 = this.cScale2 || this.tertiaryColor; + this.cScale3 = this.cScale3 || adjust(this.primaryColor, { h: 30 }); + this.cScale4 = this.cScale4 || adjust(this.primaryColor, { h: 60 }); + this.cScale5 = this.cScale5 || adjust(this.primaryColor, { h: 90 }); + this.cScale6 = this.cScale6 || adjust(this.primaryColor, { h: 120 }); + this.cScale7 = this.cScale7 || adjust(this.primaryColor, { h: 150 }); + this.cScale8 = this.cScale8 || adjust(this.primaryColor, { h: 210, l: 150 }); + this.cScale9 = this.cScale9 || adjust(this.primaryColor, { h: 270 }); + this.cScale10 = this.cScale10 || adjust(this.primaryColor, { h: 300 }); + this.cScale11 = this.cScale11 || adjust(this.primaryColor, { h: 330 }); + if (this.darkMode) { + for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) { + this['cScale' + i] = darken(this['cScale' + i], 75); + } + } else { + for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) { + this['cScale' + i] = darken(this['cScale' + i], 25); + } + } + + // Setup the inverted color for the set + for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) { + this['cScaleInv' + i] = this['cScaleInv' + i] || invert(this['cScale' + i]); + } + // Setup the peer color for the set, useful for borders + for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) { + if (this.darkMode) { + this['cScalePeer' + i] = this['cScalePeer' + i] || lighten(this['cScale' + i], 10); + } else { + this['cScalePeer' + i] = this['cScalePeer' + i] || darken(this['cScale' + i], 10); + } + } + + // Setup the label color for the set + this.scaleLabelColor = this.scaleLabelColor || this.labelTextColor; + + for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) { + this['cScaleLabel' + i] = this['cScaleLabel' + i] || this.scaleLabelColor; + } + + const multiplier = this.darkMode ? -4 : -1; + for (let i = 0; i < 5; i++) { + this['surface' + i] = + this['surface' + i] || + adjust(this.mainBkg, { h: 180, s: -15, l: multiplier * (5 + i * 3) }); + this['surfacePeer' + i] = + this['surfacePeer' + i] || + adjust(this.mainBkg, { h: 180, s: -15, l: multiplier * (8 + i * 3) }); + } + + /* class */ + this.classText = this.classText || this.textColor; + + /* user-journey */ + this.fillType0 = this.fillType0 || this.primaryColor; + this.fillType1 = this.fillType1 || this.secondaryColor; + this.fillType2 = this.fillType2 || adjust(this.primaryColor, { h: 64 }); + this.fillType3 = this.fillType3 || adjust(this.secondaryColor, { h: 64 }); + this.fillType4 = this.fillType4 || adjust(this.primaryColor, { h: -64 }); + this.fillType5 = this.fillType5 || adjust(this.secondaryColor, { h: -64 }); + this.fillType6 = this.fillType6 || adjust(this.primaryColor, { h: 128 }); + this.fillType7 = this.fillType7 || adjust(this.secondaryColor, { h: 128 }); + + /* pie */ + this.pie1 = this.pie1 || this.primaryColor; + this.pie2 = this.pie2 || this.secondaryColor; + this.pie3 = this.pie3 || this.tertiaryColor; + this.pie4 = this.pie4 || adjust(this.primaryColor, { l: -10 }); + this.pie5 = this.pie5 || adjust(this.secondaryColor, { l: -10 }); + this.pie6 = this.pie6 || adjust(this.tertiaryColor, { l: -10 }); + this.pie7 = this.pie7 || adjust(this.primaryColor, { h: +60, l: -10 }); + this.pie8 = this.pie8 || adjust(this.primaryColor, { h: -60, l: -10 }); + this.pie9 = this.pie9 || adjust(this.primaryColor, { h: 120, l: 0 }); + this.pie10 = this.pie10 || adjust(this.primaryColor, { h: +60, l: -20 }); + this.pie11 = this.pie11 || adjust(this.primaryColor, { h: -60, l: -20 }); + this.pie12 = this.pie12 || adjust(this.primaryColor, { h: 120, l: -10 }); + this.pieTitleTextSize = this.pieTitleTextSize || '25px'; + this.pieTitleTextColor = this.pieTitleTextColor || this.taskTextDarkColor; + this.pieSectionTextSize = this.pieSectionTextSize || '17px'; + this.pieSectionTextColor = this.pieSectionTextColor || this.textColor; + this.pieLegendTextSize = this.pieLegendTextSize || '17px'; + this.pieLegendTextColor = this.pieLegendTextColor || this.taskTextDarkColor; + this.pieStrokeColor = this.pieStrokeColor || 'black'; + this.pieStrokeWidth = this.pieStrokeWidth || '2px'; + this.pieOuterStrokeWidth = this.pieOuterStrokeWidth || '2px'; + this.pieOuterStrokeColor = this.pieOuterStrokeColor || 'black'; + this.pieOpacity = this.pieOpacity || '0.7'; + + /* quadrant-graph */ + this.quadrant1Fill = this.quadrant1Fill || this.primaryColor; + this.quadrant2Fill = this.quadrant2Fill || adjust(this.primaryColor, { r: 5, g: 5, b: 5 }); + this.quadrant3Fill = this.quadrant3Fill || adjust(this.primaryColor, { r: 10, g: 10, b: 10 }); + this.quadrant4Fill = this.quadrant4Fill || adjust(this.primaryColor, { r: 15, g: 15, b: 15 }); + this.quadrant1TextFill = this.quadrant1TextFill || this.primaryTextColor; + this.quadrant2TextFill = + this.quadrant2TextFill || adjust(this.primaryTextColor, { r: -5, g: -5, b: -5 }); + this.quadrant3TextFill = + this.quadrant3TextFill || adjust(this.primaryTextColor, { r: -10, g: -10, b: -10 }); + this.quadrant4TextFill = + this.quadrant4TextFill || adjust(this.primaryTextColor, { r: -15, g: -15, b: -15 }); + this.quadrantPointFill = + this.quadrantPointFill || isDark(this.quadrant1Fill) + ? lighten(this.quadrant1Fill) + : darken(this.quadrant1Fill); + this.quadrantPointTextFill = this.quadrantPointTextFill || this.primaryTextColor; + this.quadrantXAxisTextFill = this.quadrantXAxisTextFill || this.primaryTextColor; + this.quadrantYAxisTextFill = this.quadrantYAxisTextFill || this.primaryTextColor; + this.quadrantInternalBorderStrokeFill = + this.quadrantInternalBorderStrokeFill || this.primaryBorderColor; + this.quadrantExternalBorderStrokeFill = + this.quadrantExternalBorderStrokeFill || this.primaryBorderColor; + this.quadrantTitleFill = this.quadrantTitleFill || this.primaryTextColor; + + /* xychart */ + this.xyChart = { + backgroundColor: this.xyChart?.backgroundColor || this.background, + titleColor: this.xyChart?.titleColor || this.primaryTextColor, + xAxisTitleColor: this.xyChart?.xAxisTitleColor || this.primaryTextColor, + xAxisLabelColor: this.xyChart?.xAxisLabelColor || this.primaryTextColor, + xAxisTickColor: this.xyChart?.xAxisTickColor || this.primaryTextColor, + xAxisLineColor: this.xyChart?.xAxisLineColor || this.primaryTextColor, + yAxisTitleColor: this.xyChart?.yAxisTitleColor || this.primaryTextColor, + yAxisLabelColor: this.xyChart?.yAxisLabelColor || this.primaryTextColor, + yAxisTickColor: this.xyChart?.yAxisTickColor || this.primaryTextColor, + yAxisLineColor: this.xyChart?.yAxisLineColor || this.primaryTextColor, + plotColorPalette: + this.xyChart?.plotColorPalette || + '#FFF4DD,#FFD8B1,#FFA07A,#ECEFF1,#D6DBDF,#C3E0A8,#FFB6A4,#FFD74D,#738FA7,#FFFFF0', + }; + + /* requirement-diagram */ + this.requirementBackground = this.requirementBackground || this.primaryColor; + this.requirementBorderColor = this.requirementBorderColor || this.primaryBorderColor; + this.requirementBorderSize = this.requirementBorderSize || '1'; + this.requirementTextColor = this.requirementTextColor || this.primaryTextColor; + this.relationColor = this.relationColor || this.lineColor; + this.relationLabelBackground = + this.relationLabelBackground || + (this.darkMode ? darken(this.secondaryColor, 30) : this.secondaryColor); + 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 = this.gitInv0 || invert(this.git0); + this.gitInv1 = this.gitInv1 || invert(this.git1); + this.gitInv2 = this.gitInv2 || invert(this.git2); + this.gitInv3 = this.gitInv3 || invert(this.git3); + this.gitInv4 = this.gitInv4 || invert(this.git4); + this.gitInv5 = this.gitInv5 || invert(this.git5); + this.gitInv6 = this.gitInv6 || invert(this.git6); + this.gitInv7 = 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; + + this.tagLabelColor = this.tagLabelColor || this.primaryTextColor; + this.tagLabelBackground = this.tagLabelBackground || this.primaryColor; + this.tagLabelBorder = this.tagBorder || this.primaryBorderColor; + this.tagLabelFontSize = this.tagLabelFontSize || '10px'; + this.commitLabelColor = this.commitLabelColor || this.secondaryTextColor; + this.commitLabelBackground = this.commitLabelBackground || this.secondaryColor; + this.commitLabelFontSize = this.commitLabelFontSize || '10px'; + + /* -------------------------------------------------- */ + /* EntityRelationship diagrams */ + + this.attributeBackgroundColorOdd = + this.attributeBackgroundColorOdd || oldAttributeBackgroundColorOdd; + this.attributeBackgroundColorEven = + this.attributeBackgroundColorEven || oldAttributeBackgroundColorEven; + /* -------------------------------------------------- */ + } + calculate(overrides) { + if (typeof overrides !== 'object') { + // Calculate colors form base colors + this.updateColors(); + return; + } + + const keys = Object.keys(overrides); + + // Copy values from overrides, this is mainly for base colors + keys.forEach((k) => { + this[k] = overrides[k]; + }); + + // Calculate colors form base colors + this.updateColors(); + // Copy values from overrides again in case of an override of derived value + keys.forEach((k) => { + this[k] = overrides[k]; + }); + } +} + +export const getThemeVariables = (userOverrides) => { + const theme = new Theme(); + theme.calculate(userOverrides); + return theme; +}; diff --git a/packages/mermaid/src/themes/theme-neutral.js b/packages/mermaid/src/themes/theme-neutral.js index 4134a985b..323cf4444 100644 --- a/packages/mermaid/src/themes/theme-neutral.js +++ b/packages/mermaid/src/themes/theme-neutral.js @@ -42,6 +42,7 @@ class Theme { this.fontFamily = '"trebuchet ms", verdana, arial, sans-serif'; this.fontSize = '16px'; this.THEME_COLOR_LIMIT = 12; + this.radius = 5; /* Flowchart variables */ From 03ba130764d5634763e3310bc98ebd881edfdaa4 Mon Sep 17 00:00:00 2001 From: Per Brolin Date: Mon, 3 Jun 2024 15:42:49 +0200 Subject: [PATCH 02/12] Made drop-shadow less prominent and set new arrow-type --- cypress/platform/per.html | 2 +- packages/mermaid/src/diagrams/state/styles.js | 2 +- .../rendering-util/rendering-elements/markers.js | 16 +++++++++++++++- 3 files changed, 17 insertions(+), 3 deletions(-) diff --git a/cypress/platform/per.html b/cypress/platform/per.html index 4572250ed..6333c111f 100644 --- a/cypress/platform/per.html +++ b/cypress/platform/per.html @@ -92,7 +92,7 @@ stateDiagram-v2 
       stateDiagram-v2
           direction LR
-          Active
+          Active --> Passive
 
 
 
diff --git a/packages/mermaid/src/diagrams/state/styles.js b/packages/mermaid/src/diagrams/state/styles.js
index b5bfd2a54..0b19ce763 100644
--- a/packages/mermaid/src/diagrams/state/styles.js
+++ b/packages/mermaid/src/diagrams/state/styles.js
@@ -156,7 +156,7 @@ g.stateGroup line {
 }
 
 .state-shadow {
-  filter: drop-shadow( 3px 3px 2px rgba(0,0,0,.7) );
+  filter: drop-shadow( 1px 1px 2px rgba(0,0,0,.7) );
 }
 
 
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/markers.js b/packages/mermaid/src/rendering-util/rendering-elements/markers.js
index c7cfcfe7f..da733e325 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/markers.js
+++ b/packages/mermaid/src/rendering-util/rendering-elements/markers.js
@@ -263,6 +263,20 @@ const cross = (elem, type, id) => {
     .style('stroke-width', 2)
     .style('stroke-dasharray', '1,0');
 };
+// const barb = (elem, type, id) => {
+//   elem
+//     .append('defs')
+//     .append('marker')
+//     .attr('id', id + '_' + type + '-barbEnd')
+//     .attr('refX', 19)
+//     .attr('refY', 7)
+//     .attr('markerWidth', 20)
+//     .attr('markerHeight', 14)
+//     .attr('markerUnits', 'strokeWidth')
+//     .attr('orient', 'auto')
+//     .append('path')
+//     .attr('d', 'M 19,7 L9,13 L14,7 L9,1 Z');
+// };
 const barb = (elem, type, id) => {
   elem
     .append('defs')
@@ -275,7 +289,7 @@ const barb = (elem, type, id) => {
     .attr('markerUnits', 'strokeWidth')
     .attr('orient', 'auto')
     .append('path')
-    .attr('d', 'M 19,7 L9,13 L14,7 L9,1 Z');
+    .attr('d', 'M 19,7 L13,13 L15,7 L13,1 Z');
 };
 
 // TODO rename the class diagram markers to something shape descriptive and semantic free

From ce6aa48511e90026964e208cbd9f27700108e4be Mon Sep 17 00:00:00 2001
From: Per Brolin 
Date: Tue, 4 Jun 2024 12:17:27 +0200
Subject: [PATCH 03/12] WIP: Changed drop-shadow and background of states and
 composite-states

---
 cypress/platform/per.html                     | 11 +++++++++--
 packages/mermaid/src/diagrams/state/styles.js |  2 +-
 packages/mermaid/src/themes/theme-neo.js      |  4 ++--
 3 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/cypress/platform/per.html b/cypress/platform/per.html
index 6333c111f..2cd81c070 100644
--- a/cypress/platform/per.html
+++ b/cypress/platform/per.html
@@ -90,9 +90,16 @@ stateDiagram-v2
     >
 
     
-      stateDiagram-v2
+      stateDiagram
+        direction LR
+        [*] --> A
+        A --> B
+        B --> C
+        state B {
           direction LR
-          Active --> Passive
+          a --> b
+        }
+        B --> D
 
 
 
diff --git a/packages/mermaid/src/diagrams/state/styles.js b/packages/mermaid/src/diagrams/state/styles.js
index 0b19ce763..7aa280afa 100644
--- a/packages/mermaid/src/diagrams/state/styles.js
+++ b/packages/mermaid/src/diagrams/state/styles.js
@@ -156,7 +156,7 @@ g.stateGroup line {
 }
 
 .state-shadow {
-  filter: drop-shadow( 1px 1px 2px rgba(0,0,0,.7) );
+  filter: drop-shadow( 0px 1px 1px rgba(0,0,0,.7) );
 }
 
 
diff --git a/packages/mermaid/src/themes/theme-neo.js b/packages/mermaid/src/themes/theme-neo.js
index 94843e67c..efd24f47e 100644
--- a/packages/mermaid/src/themes/theme-neo.js
+++ b/packages/mermaid/src/themes/theme-neo.js
@@ -12,10 +12,10 @@ class Theme {
      * - Background - used to know what the background color is of the diagram. This is used for
      *   deducing colors for instance line color. Default value is #f4f4f4.
      */
-    this.background = '#f4f4f4';
+    this.background = '#ffffff';
 
     this.primaryColor = '#cccccc';
-    this.mainBkg = '#f4f4f4';
+    this.mainBkg = '#ffffff';
 
     this.noteBkgColor = '#fff5ad';
     this.noteTextColor = '#333';

From 544d17db95be7d1f9b0c4a2a1095c83228e8c83a Mon Sep 17 00:00:00 2001
From: Per Brolin 
Date: Tue, 4 Jun 2024 15:11:13 +0200
Subject: [PATCH 04/12] WIP:Updated edge-arrow and correct styling pars from
 figma

---
 cypress/platform/per.html                                 | 8 ++++----
 packages/mermaid/src/diagrams/state/styles.js             | 8 +++++---
 .../src/rendering-util/rendering-elements/markers.js      | 2 +-
 packages/mermaid/src/styles.ts                            | 2 +-
 4 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/cypress/platform/per.html b/cypress/platform/per.html
index 2cd81c070..74487e762 100644
--- a/cypress/platform/per.html
+++ b/cypress/platform/per.html
@@ -123,11 +123,11 @@ stateDiagram-v2
         flowchart: { titleTopMargin: 10 },
         // fontFamily: 'Caveat',
         // fontFamily: 'Kalam',
-        fontFamily: 'courier',
+        fontFamily: 'arial',
         sequence: {
-          actorFontFamily: 'courier',
-          noteFontFamily: 'courier',
-          messageFontFamily: 'courier',
+          actorFontFamily: 'arial',
+          noteFontFamily: 'arial',
+          messageFontFamily: 'arial',
         },
         fontSize: 12,
         logLevel: 0,
diff --git a/packages/mermaid/src/diagrams/state/styles.js b/packages/mermaid/src/diagrams/state/styles.js
index 7aa280afa..595f6b7d4 100644
--- a/packages/mermaid/src/diagrams/state/styles.js
+++ b/packages/mermaid/src/diagrams/state/styles.js
@@ -127,8 +127,9 @@ g.stateGroup line {
 }
 
 .statediagram-cluster rect.outer {
-  rx: 5px;
-  ry: 5px;
+  rx: 2px;
+  ry: 2px;
+  filter: drop-shadow( 1px 2px 2px rgba(185,185,185,1.0) );
 }
 .statediagram-state .divider {
   stroke: ${options.stateBorder || options.nodeBorder};
@@ -143,6 +144,7 @@ g.stateGroup line {
 }
 .statediagram-cluster.statediagram-cluster-alt .inner {
   fill: ${options.altBackground ? options.altBackground : '#efefef'};
+
 }
 
 .statediagram-cluster .inner {
@@ -156,7 +158,7 @@ g.stateGroup line {
 }
 
 .state-shadow {
-  filter: drop-shadow( 0px 1px 1px rgba(0,0,0,.7) );
+  filter: drop-shadow( 1px 2px 2px rgba(185,185,185,1.0) );
 }
 
 
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/markers.js b/packages/mermaid/src/rendering-util/rendering-elements/markers.js
index da733e325..893f1157b 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/markers.js
+++ b/packages/mermaid/src/rendering-util/rendering-elements/markers.js
@@ -289,7 +289,7 @@ const barb = (elem, type, id) => {
     .attr('markerUnits', 'strokeWidth')
     .attr('orient', 'auto')
     .append('path')
-    .attr('d', 'M 19,7 L13,13 L15,7 L13,1 Z');
+    .attr('d', 'M 19,7 L11,14 L13,7 L11,0 Z');
 };
 
 // TODO rename the class diagram markers to something shape descriptive and semantic free
diff --git a/packages/mermaid/src/styles.ts b/packages/mermaid/src/styles.ts
index b72fc0a55..d106971ad 100644
--- a/packages/mermaid/src/styles.ts
+++ b/packages/mermaid/src/styles.ts
@@ -70,7 +70,7 @@ const getStyles = (
 
   ${diagramStyles}
   .node .neo-node {
-    stroke: red;
+    stroke: ${options.nodeBorder};
   }
   ${userStyles}
 `;

From 51da34b8310c1a4492591e4f2755c4477f96c564 Mon Sep 17 00:00:00 2001
From: Per Brolin 
Date: Fri, 7 Jun 2024 15:14:26 +0200
Subject: [PATCH 05/12] Replaced hard-coded node.look by checking diagram
 config and cleanup styling a bit

---
 packages/mermaid/src/config.type.ts           |  2 +-
 .../mermaid/src/dagre-wrapper/edgeMarker.ts   |  1 +
 .../state/stateRenderer-v3-unified.ts         |  7 ++++-
 packages/mermaid/src/diagrams/state/styles.js |  1 -
 .../rendering-elements/clusters.js            | 10 +++++--
 .../rendering-elements/markers.js             | 29 ++++++++++---------
 .../rendering-elements/shapes/drawRect.ts     |  4 +--
 .../rendering-elements/shapes/roundedRect.ts  |  4 ++-
 .../rendering-elements/shapes/state.ts        |  4 ++-
 .../mermaid/src/rendering-util/types.d.ts     |  3 ++
 10 files changed, 42 insertions(+), 23 deletions(-)

diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts
index 4749d7c70..2020acdc8 100644
--- a/packages/mermaid/src/config.type.ts
+++ b/packages/mermaid/src/config.type.ts
@@ -68,7 +68,7 @@ export interface MermaidConfig {
    * Defines which main look to use for the diagram.
    *
    */
-  look?: 'classic' | 'handdrawn' | 'slick';
+  look?: 'classic' | 'handdrawn' | 'slick' | 'neo';
   /**
    * Defines the seed to be used when using handdrawn look. This is important for the automated tests as they will always find differences without the seed. The default value is 0 which gives a random seed.
    *
diff --git a/packages/mermaid/src/dagre-wrapper/edgeMarker.ts b/packages/mermaid/src/dagre-wrapper/edgeMarker.ts
index 778a7708d..fdd19dc72 100644
--- a/packages/mermaid/src/dagre-wrapper/edgeMarker.ts
+++ b/packages/mermaid/src/dagre-wrapper/edgeMarker.ts
@@ -29,6 +29,7 @@ const arrowTypesMap = {
   arrow_cross: 'cross',
   arrow_point: 'point',
   arrow_barb: 'barb',
+  arrow_neo: 'barbNeo',
   arrow_circle: 'circle',
   aggregation: 'aggregation',
   extension: 'extension',
diff --git a/packages/mermaid/src/diagrams/state/stateRenderer-v3-unified.ts b/packages/mermaid/src/diagrams/state/stateRenderer-v3-unified.ts
index d3b13473a..a0b9f92ef 100644
--- a/packages/mermaid/src/diagrams/state/stateRenderer-v3-unified.ts
+++ b/packages/mermaid/src/diagrams/state/stateRenderer-v3-unified.ts
@@ -79,7 +79,12 @@ export const draw = async function (
   data4Layout.nodeSpacing = conf?.nodeSpacing || 50;
   // @ts-expect-error TODO: Will be fixed after config refactor
   data4Layout.rankSpacing = conf?.rankSpacing || 50;
-  data4Layout.markers = ['barb'];
+  const config = getConfig();
+  if (config.look === 'neo') {
+    data4Layout.markers = ['barbNeo'];
+  } else {
+    data4Layout.markers = ['barb'];
+  }
   data4Layout.diagramId = id;
   // console.log('REF1:', data4Layout);
   await render(data4Layout, svg, element, positions);
diff --git a/packages/mermaid/src/diagrams/state/styles.js b/packages/mermaid/src/diagrams/state/styles.js
index 595f6b7d4..a7b87f561 100644
--- a/packages/mermaid/src/diagrams/state/styles.js
+++ b/packages/mermaid/src/diagrams/state/styles.js
@@ -129,7 +129,6 @@ g.stateGroup line {
 .statediagram-cluster rect.outer {
   rx: 2px;
   ry: 2px;
-  filter: drop-shadow( 1px 2px 2px rgba(185,185,185,1.0) );
 }
 .statediagram-state .divider {
   stroke: ${options.stateBorder || options.nodeBorder};
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/clusters.js b/packages/mermaid/src/rendering-util/rendering-elements/clusters.js
index a4b8f896d..754a671ab 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/clusters.js
+++ b/packages/mermaid/src/rendering-util/rendering-elements/clusters.js
@@ -187,7 +187,7 @@ const roundedWithTitle = (parent, node) => {
   const innerY = node.y - node.height / 2 - halfPadding + bbox.height - 1;
   const height = node.height + padding;
   const innerHeight = node.height + padding - bbox.height - 3;
-
+  const look = siteConfig.look;
   // add the rect
   let rect;
   if (node.useRough) {
@@ -216,9 +216,15 @@ const roundedWithTitle = (parent, node) => {
     innerRect = shapeSvg.insert(() => roughInnerNode);
   } else {
     rect = outerRectG.insert('rect', ':first-child');
+    let outerRectClass = 'outer';
+    if (look === 'neo') {
+      outerRectClass = 'outer state-shadow';
+    } else {
+      outerRectClass = 'outer';
+    }
     // center the rect around its coordinate
     rect
-      .attr('class', 'outer')
+      .attr('class', outerRectClass)
       .attr('x', x)
       .attr('y', y)
       .attr('width', width)
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/markers.js b/packages/mermaid/src/rendering-util/rendering-elements/markers.js
index 893f1157b..55716613b 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/markers.js
+++ b/packages/mermaid/src/rendering-util/rendering-elements/markers.js
@@ -263,21 +263,21 @@ const cross = (elem, type, id) => {
     .style('stroke-width', 2)
     .style('stroke-dasharray', '1,0');
 };
-// const barb = (elem, type, id) => {
-//   elem
-//     .append('defs')
-//     .append('marker')
-//     .attr('id', id + '_' + type + '-barbEnd')
-//     .attr('refX', 19)
-//     .attr('refY', 7)
-//     .attr('markerWidth', 20)
-//     .attr('markerHeight', 14)
-//     .attr('markerUnits', 'strokeWidth')
-//     .attr('orient', 'auto')
-//     .append('path')
-//     .attr('d', 'M 19,7 L9,13 L14,7 L9,1 Z');
-// };
 const barb = (elem, type, id) => {
+  elem
+    .append('defs')
+    .append('marker')
+    .attr('id', id + '_' + type + '-barbEnd')
+    .attr('refX', 19)
+    .attr('refY', 7)
+    .attr('markerWidth', 20)
+    .attr('markerHeight', 14)
+    .attr('markerUnits', 'strokeWidth')
+    .attr('orient', 'auto')
+    .append('path')
+    .attr('d', 'M 19,7 L9,13 L14,7 L9,1 Z');
+};
+const barbNeo = (elem, type, id) => {
   elem
     .append('defs')
     .append('marker')
@@ -303,5 +303,6 @@ const markers = {
   circle,
   cross,
   barb,
+  barbNeo,
 };
 export default insertMarkers;
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/drawRect.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/drawRect.ts
index facd3e54b..0f4f19925 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/drawRect.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/drawRect.ts
@@ -1,4 +1,3 @@
-import { log } from '$root/logger.js';
 import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js';
 import intersect from '../intersect/index.js';
 import type { Node, RectOptions } from '$root/rendering-util/types.d.ts';
@@ -8,7 +7,7 @@ import rough from 'roughjs';
 import { getConfig } from '$root/diagram-api/diagramAPI.js';
 
 export const drawRect = async (parent: SVGAElement, node: Node, options: RectOptions) => {
-  const { themeVariables, handdrawnSeed } = getConfig();
+  const { themeVariables, handdrawnSeed, look } = getConfig();
   const { nodeBorder, mainBkg } = themeVariables;
 
   const { shapeSvg, bbox, halfPadding } = await labelHelper(
@@ -24,6 +23,7 @@ export const drawRect = async (parent: SVGAElement, node: Node, options: RectOpt
   const y = -totalHeight / 2;
 
   let rect;
+  node.look = look;
   let { rx, ry } = node;
   const { cssStyles, useRough } = node;
 
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/roundedRect.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/roundedRect.ts
index c5066bd22..399c674aa 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/roundedRect.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/roundedRect.ts
@@ -1,8 +1,10 @@
 import type { Node, RectOptions } from '$root/rendering-util/types.d.ts';
 import { drawRect } from './drawRect.js';
+import { getConfig } from '$root/diagram-api/diagramAPI.js';
 
 export const roundedRect = async (parent: SVGAElement, node: Node) => {
-  node.look = 'neo';
+  const { look } = getConfig();
+  node.look = look;
   const options = {
     rx: node.look === 'neo' ? 1 : 1,
     ry: node.look === 'neo' ? 1 : 1,
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/state.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/state.ts
index 991e7aed0..f1bc733d6 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/state.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/state.ts
@@ -1,8 +1,10 @@
 import type { Node } from '$root/rendering-util/types.d.ts';
 import { drawRect } from './drawRect.js';
+import { getConfig } from '$root/diagram-api/diagramAPI.js';
 
 export const state = async (parent: SVGAElement, node: Node) => {
-  node.look = 'neo';
+  const { look } = getConfig();
+  node.look = look;
 
   const options = {
     rx: node.look === 'neo' ? 2 : 5,
diff --git a/packages/mermaid/src/rendering-util/types.d.ts b/packages/mermaid/src/rendering-util/types.d.ts
index 5eb2635b4..0eb740a1c 100644
--- a/packages/mermaid/src/rendering-util/types.d.ts
+++ b/packages/mermaid/src/rendering-util/types.d.ts
@@ -61,6 +61,9 @@ interface Node {
   // Flowchart specific properties
   x?: number;
   y?: number;
+
+  // Added look to handle
+  look?: string;
 }
 
 // Common properties for any edge in the system

From 36de3dca62b3f440dd509a031e11b17f897b9b18 Mon Sep 17 00:00:00 2001
From: Per Brolin 
Date: Sun, 9 Jun 2024 17:33:58 +0200
Subject: [PATCH 06/12] Added fix for handling y-alignment of labels of
 different font-sizes for composite states

---
 .../rendering-elements/clusters.js             | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/packages/mermaid/src/rendering-util/rendering-elements/clusters.js b/packages/mermaid/src/rendering-util/rendering-elements/clusters.js
index 754a671ab..014fc9235 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/clusters.js
+++ b/packages/mermaid/src/rendering-util/rendering-elements/clusters.js
@@ -9,6 +9,11 @@ import intersectRect from '../rendering-elements/intersect/intersect-rect.js';
 import createLabel from './createLabel.js';
 import { createRoundedRectPathD } from './shapes/roundedRectPath.ts';
 
+// Helper function to calculate the offset correction for the label
+const calcLabelOffsetCorrection = (diff) => {
+  return diff * 0.75 - 6;
+};
+
 const rect = (parent, node) => {
   log.info('Creating subgraph rect for ', node.id, node);
   const siteConfig = getConfig();
@@ -222,6 +227,7 @@ const roundedWithTitle = (parent, node) => {
     } else {
       outerRectClass = 'outer';
     }
+
     // center the rect around its coordinate
     rect
       .attr('class', outerRectClass)
@@ -237,16 +243,12 @@ const roundedWithTitle = (parent, node) => {
       .attr('height', innerHeight);
   }
 
-  // Center the label
+  let diff = bbox.height - (innerY - y) / 2;
+  let correction = calcLabelOffsetCorrection(diff, bbox.height);
+
   label.attr(
     'transform',
-    `translate(${node.x - bbox.width / 2}, ${
-      node.y -
-      node.height / 2 -
-      node.padding +
-      bbox.height / 2 -
-      (evaluate(siteConfig.flowchart.htmlLabels) ? 5 : 3)
-    })`
+    `translate(${node.x - bbox.width / 2}, ${(innerY - y) / 2 - correction})`
   );
 
   const rectBox = rect.node().getBBox();

From 4fe7e062b591b5480163ce872c3b9db7ace84154 Mon Sep 17 00:00:00 2001
From: Per Brolin 
Date: Mon, 10 Jun 2024 12:02:15 +0200
Subject: [PATCH 07/12] Removed some hard coding form review

---
 packages/mermaid/src/diagrams/state/stateRenderer-v2.js | 2 +-
 packages/mermaid/src/diagrams/state/styles.js           | 8 ++++----
 packages/mermaid/src/themes/theme-neo.js                | 2 +-
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/mermaid/src/diagrams/state/stateRenderer-v2.js b/packages/mermaid/src/diagrams/state/stateRenderer-v2.js
index 0ecc0a73a..02ee6b2d2 100644
--- a/packages/mermaid/src/diagrams/state/stateRenderer-v2.js
+++ b/packages/mermaid/src/diagrams/state/stateRenderer-v2.js
@@ -333,7 +333,7 @@ const setupDoc = (g, parentParsedItem, doc, diagramStates, diagramDb, altFlag) =
               counter: graphItemCount,
             }),
             arrowhead: 'normal',
-            arrowTypeEnd: 'arrow_barb',
+            arrowTypeEnd: 'arrow_neo',
             style: G_EDGE_STYLE,
             labelStyle: '',
             label: common.sanitizeText(item.description, getConfig()),
diff --git a/packages/mermaid/src/diagrams/state/styles.js b/packages/mermaid/src/diagrams/state/styles.js
index a7b87f561..a6b4a6980 100644
--- a/packages/mermaid/src/diagrams/state/styles.js
+++ b/packages/mermaid/src/diagrams/state/styles.js
@@ -127,16 +127,16 @@ g.stateGroup line {
 }
 
 .statediagram-cluster rect.outer {
-  rx: 2px;
-  ry: 2px;
+  rx: ${options.radius}px;
+  ry: ${options.radius}px;
 }
 .statediagram-state .divider {
   stroke: ${options.stateBorder || options.nodeBorder};
 }
 
 .statediagram-state .title-state {
-  rx: 5px;
-  ry: 5px;
+  rx: ${options.radius}px;
+  ry: ${options.radius}px;
 }
 .statediagram-cluster.statediagram-cluster .inner {
   fill: ${options.compositeBackground || options.background};
diff --git a/packages/mermaid/src/themes/theme-neo.js b/packages/mermaid/src/themes/theme-neo.js
index efd24f47e..68dbcdbab 100644
--- a/packages/mermaid/src/themes/theme-neo.js
+++ b/packages/mermaid/src/themes/theme-neo.js
@@ -25,7 +25,7 @@ class Theme {
     // dark
 
     this.fontFamily = '"trebuchet ms", verdana, arial, sans-serif';
-    this.fontSize = '16px';
+    this.fontSize = '10px';
   }
   updateColors() {
     // The || is to make sure that if the variable has been defined by a user override that value is to be used

From 8b7001b8e3087f363e43562e66e0180cfb15de6e Mon Sep 17 00:00:00 2001
From: Per Brolin 
Date: Mon, 10 Jun 2024 13:55:08 +0200
Subject: [PATCH 08/12] Removed useRough in favor of node.look

---
 .../mermaid/src/diagrams/flowchart/flowDb.ts  | 19 ++++----
 .../mermaid/src/diagrams/state/dataFetcher.js | 48 ++++---------------
 .../mermaid/src/diagrams/state/stateDb.js     |  4 +-
 .../rendering-elements/clusters.js            |  7 ++-
 .../rendering-elements/edges.js               |  3 +-
 .../rendering-elements/shapes/choice.ts       |  2 +-
 .../rendering-elements/shapes/circle.ts       |  4 +-
 .../rendering-elements/shapes/cylinder.ts     |  4 +-
 .../rendering-elements/shapes/doubleCircle.ts |  4 +-
 .../rendering-elements/shapes/drawRect.ts     |  4 +-
 .../rendering-elements/shapes/forkJoin.ts     |  2 +-
 .../rendering-elements/shapes/hexagon.ts      |  4 +-
 .../shapes/invertedTrapezoid.ts               |  4 +-
 .../rendering-elements/shapes/leanLeft.ts     |  4 +-
 .../rendering-elements/shapes/leanRight.ts    |  4 +-
 .../rendering-elements/shapes/note.ts         |  4 +-
 .../rendering-elements/shapes/question.ts     |  4 +-
 .../shapes/rectLeftInvArrow.ts                |  4 +-
 .../rendering-elements/shapes/stadium.ts      |  4 +-
 .../rendering-elements/shapes/stateEnd.ts     |  2 +-
 .../rendering-elements/shapes/stateStart.ts   |  2 +-
 .../rendering-elements/shapes/subroutine.ts   |  4 +-
 .../rendering-elements/shapes/trapezoid.ts    |  6 +--
 .../mermaid/src/rendering-util/types.d.ts     |  4 +-
 24 files changed, 58 insertions(+), 93 deletions(-)

diff --git a/packages/mermaid/src/diagrams/flowchart/flowDb.ts b/packages/mermaid/src/diagrams/flowchart/flowDb.ts
index b2c38efe8..8bb3d0778 100644
--- a/packages/mermaid/src/diagrams/flowchart/flowDb.ts
+++ b/packages/mermaid/src/diagrams/flowchart/flowDb.ts
@@ -775,12 +775,12 @@ const addNodeFromVertex = (
   parentDB: Map,
   subGraphDB: Map,
   config: any,
-  useRough: boolean
+  look: string
 ): Node => {
-  let parentId = parentDB.get(vertex.id);
-  let isGroup = subGraphDB.get(vertex.id) || false;
+  const parentId = parentDB.get(vertex.id);
+  const isGroup = subGraphDB.get(vertex.id) || false;
 
-  let node = findNode(nodes, vertex.id);
+  const node = findNode(nodes, vertex.id);
   if (!node) {
     nodes.push({
       id: vertex.id,
@@ -795,7 +795,7 @@ const addNodeFromVertex = (
       domId: vertex.domId,
       type: isGroup ? 'group' : undefined,
       isGroup,
-      useRough,
+      look,
     });
   }
 };
@@ -807,7 +807,6 @@ export const getData = () => {
 
   // extract(getRootDocV2());
   // const diagramStates = getStates();
-  const useRough = config.look === 'handdrawn';
   const subGraphs = getSubGraphs();
   log.info('Subgraphs - APA12', subGraphs);
   const parentDB = new Map();
@@ -834,14 +833,14 @@ export const getData = () => {
       domId: subGraph.domId,
       type: 'group',
       isGroup: true,
-      useRough,
+      look: config.look,
     });
   }
   console.log('APA12 nodes - 1', nodes.length);
 
   const n = getVertices();
   n.forEach((vertex) => {
-    const node = addNodeFromVertex(vertex, nodes, parentDB, subGraphDB, config, useRough);
+    const node = addNodeFromVertex(vertex, nodes, parentDB, subGraphDB, config, config.look);
     if (node) {
       nodes.push(node);
     }
@@ -874,14 +873,12 @@ export const getData = () => {
       //   domId: verawEdgertex.domId,
       //   rawEdge: undefined,
       //   isGroup: false,
-      useRough,
+      look: config.look,
     };
     // console.log('rawEdge SPLIT', rawEdge, index);
     edges.push(edge);
   });
 
-  //const useRough = config.look === 'handdrawn';
-
   return { nodes, edges, other: {}, config };
 };
 
diff --git a/packages/mermaid/src/diagrams/state/dataFetcher.js b/packages/mermaid/src/diagrams/state/dataFetcher.js
index 3bdf1abe0..6e4738038 100644
--- a/packages/mermaid/src/diagrams/state/dataFetcher.js
+++ b/packages/mermaid/src/diagrams/state/dataFetcher.js
@@ -54,39 +54,23 @@ export function stateDomId(itemId = '', counter = 0, type = '', typeSpacer = DOM
   return `${DOMID_STATE}-${itemId}${typeStr}-${counter}`;
 }
 
-const setupDoc = (parentParsedItem, doc, diagramStates, nodes, edges, altFlag, useRough, look) => {
+const setupDoc = (parentParsedItem, doc, diagramStates, nodes, edges, altFlag, look) => {
   // graphItemCount = 0;
   log.trace('items', doc);
   doc.forEach((item) => {
     switch (item.stmt) {
       case STMT_STATE:
-        dataFetcher(parentParsedItem, item, diagramStates, nodes, edges, altFlag, useRough, look);
+        dataFetcher(parentParsedItem, item, diagramStates, nodes, edges, altFlag, look);
+
         break;
       case DEFAULT_STATE_TYPE:
-        dataFetcher(parentParsedItem, item, diagramStates, nodes, edges, altFlag, useRough, look);
+        dataFetcher(parentParsedItem, item, diagramStates, nodes, edges, altFlag, look);
+
         break;
       case STMT_RELATION:
         {
-          dataFetcher(
-            parentParsedItem,
-            item.state1,
-            diagramStates,
-            nodes,
-            edges,
-            altFlag,
-            useRough,
-            look
-          );
-          dataFetcher(
-            parentParsedItem,
-            item.state2,
-            diagramStates,
-            nodes,
-            edges,
-            altFlag,
-            useRough,
-            look
-          );
+          dataFetcher(parentParsedItem, item.state1, diagramStates, nodes, edges, altFlag, look);
+          dataFetcher(parentParsedItem, item.state2, diagramStates, nodes, edges, altFlag, look);
           const edgeData = {
             id: 'edge' + graphItemCount,
             start: item.state1.id,
@@ -101,7 +85,6 @@ const setupDoc = (parentParsedItem, doc, diagramStates, nodes, edges, altFlag, u
             labelType: G_EDGE_LABELTYPE,
             thickness: G_EDGE_THICKNESS,
             classes: CSS_EDGE,
-            useRough,
             look,
           };
           edges.push(edgeData);
@@ -225,16 +208,7 @@ function getClassesFromDbInfo(dbInfoItem) {
     }
   }
 }
-export const dataFetcher = (
-  parent,
-  parsedItem,
-  diagramStates,
-  nodes,
-  edges,
-  altFlag,
-  useRough,
-  look
-) => {
+export const dataFetcher = (parent, parsedItem, diagramStates, nodes, edges, altFlag, look) => {
   const itemId = parsedItem.id;
   const classStr = getClassesFromDbInfo(diagramStates.get(itemId));
 
@@ -324,7 +298,6 @@ export const dataFetcher = (
       padding: 8,
       rx: 10,
       ry: 10,
-      useRough,
       look,
     };
 
@@ -354,7 +327,6 @@ export const dataFetcher = (
         type: newNode.type,
         isGroup: newNode.type === 'group',
         padding: 0, //getConfig().flowchart.padding
-        useRough,
         look,
         position: parsedItem.note.position,
       };
@@ -369,7 +341,6 @@ export const dataFetcher = (
         type: 'group',
         isGroup: true,
         padding: 16, //getConfig().flowchart.padding
-        useRough,
         look,
         position: parsedItem.note.position,
       };
@@ -410,7 +381,6 @@ export const dataFetcher = (
         labelpos: G_EDGE_LABELPOS,
         labelType: G_EDGE_LABELTYPE,
         thickness: G_EDGE_THICKNESS,
-        useRough,
         look,
       });
     } else {
@@ -419,7 +389,7 @@ export const dataFetcher = (
   }
   if (parsedItem.doc) {
     log.trace('Adding nodes children ');
-    setupDoc(parsedItem, parsedItem.doc, diagramStates, nodes, edges, !altFlag, useRough, look);
+    setupDoc(parsedItem, parsedItem.doc, diagramStates, nodes, edges, !altFlag, look);
   }
 };
 
diff --git a/packages/mermaid/src/diagrams/state/stateDb.js b/packages/mermaid/src/diagrams/state/stateDb.js
index f6bddf0ea..2d8ae7c3e 100644
--- a/packages/mermaid/src/diagrams/state/stateDb.js
+++ b/packages/mermaid/src/diagrams/state/stateDb.js
@@ -581,10 +581,10 @@ export const getData = () => {
   // }
   const diagramStates = getStates();
   const config = getConfig();
-  const useRough = config.look === 'handdrawn';
   const look = config.look;
   resetDataFetching();
-  dataFetcher(undefined, getRootDocV2(), diagramStates, nodes, edges, true, useRough, look);
+  dataFetcher(undefined, getRootDocV2(), diagramStates, nodes, edges, true, look);
+
   return { nodes, edges, other: {}, config };
 };
 
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/clusters.js b/packages/mermaid/src/rendering-util/rendering-elements/clusters.js
index d0133f7d6..344de8919 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/clusters.js
+++ b/packages/mermaid/src/rendering-util/rendering-elements/clusters.js
@@ -20,7 +20,6 @@ const rect = (parent, node) => {
   const siteConfig = getConfig();
   const { themeVariables, handdrawnSeed } = siteConfig;
   const { clusterBkg, clusterBorder } = themeVariables;
-  let { useRough } = node;
 
   // Add outer g element
   const shapeSvg = parent.insert('g').attr('class', 'cluster').attr('id', node.id);
@@ -65,7 +64,7 @@ const rect = (parent, node) => {
 
   log.trace('Data ', node, JSON.stringify(node));
   let rect;
-  if (useRough) {
+  if (node.look === 'handdrawn') {
     // @ts-ignore TODO: Fix rough typings
     const rc = rough.svg(shapeSvg);
     const options = userNodeOverrides(node, {
@@ -223,7 +222,7 @@ const roundedWithTitle = (parent, node) => {
   const look = siteConfig.look;
   // add the rect
   let rect;
-  if (node.useRough) {
+  if (node.look === 'handdrawn') {
     const isAlt = node.cssClasses.includes('statediagram-cluster-alt');
     const rc = rough.svg(shapeSvg);
     const roughOuterNode =
@@ -308,7 +307,7 @@ const divider = (parent, node) => {
   const y = node.y - node.height / 2;
   const width = node.width + padding;
   const height = node.height + padding;
-  if (node.useRough) {
+  if (node.look === 'handdrawn') {
     const rc = rough.svg(shapeSvg);
     const roughNode = rc.rectangle(x, y, width, height, {
       fill: 'lightgrey',
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/edges.js b/packages/mermaid/src/rendering-util/rendering-elements/edges.js
index c8e9a948a..68bb061ec 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/edges.js
+++ b/packages/mermaid/src/rendering-util/rendering-elements/edges.js
@@ -594,11 +594,10 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod
     default:
       strokeClasses += ' edge-pattern-solid';
   }
-  let useRough = edge.useRough;
   let svgPath;
   let path = '';
   let linePath = lineFunction(lineData);
-  if (useRough) {
+  if (edge.look === 'handdrawn') {
     const rc = rough.svg(elem);
     const ld = Object.assign([], lineData);
     // const svgPathNode = rc.path(lineFunction(ld.splice(0, ld.length-1)), {
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/choice.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/choice.ts
index 8248f3ddd..809b543ed 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/choice.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/choice.ts
@@ -22,7 +22,7 @@ export const choice = (parent: SVG, node: Node) => {
   ];
 
   let choice;
-  if (node.useRough) {
+  if (node.look === 'handdrawn') {
     // @ts-ignore TODO: Fix rough typings
     const rc = rough.svg(shapeSvg);
     const pointArr = points.map(function (d) {
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/circle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/circle.ts
index 48054cce3..1b3fdf47a 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/circle.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/circle.ts
@@ -15,9 +15,9 @@ export const circle = async (parent: SVGAElement, node: Node): Promise {
   const h = bbox.height + ry + node.padding;
 
   let cylinder: d3.Selection;
-  const { cssStyles, useRough } = node;
+  const { cssStyles } = node;
 
-  if (useRough) {
+  if (node.look === 'handdrawn') {
     // @ts-ignore
     const rc = rough.svg(shapeSvg);
     const outerPathData = createOuterCylinderPathD(0, 0, w, h, rx, ry);
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/doubleCircle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/doubleCircle.ts
index d3bda9c86..8cbbe75ff 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/doubleCircle.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/doubleCircle.ts
@@ -18,9 +18,9 @@ export const doublecircle = async (parent: SVGAElement, node: Node): Promise {
   const y = (-1 * height) / 2;
 
   let shape;
-  if (node.useRough) {
+  if (node.look === 'handdrawn') {
     // @ts-ignore TODO: Fix rough typings
     const rc = rough.svg(shapeSvg);
     const roughNode = rc.rectangle(x, y, width, height, solidStateFill(lineColor));
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/hexagon.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/hexagon.ts
index 0678e6013..2a05ac4cf 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/hexagon.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/hexagon.ts
@@ -56,9 +56,9 @@ export const hexagon = async (parent: SVGAElement, node: Node): Promise;
-  const { cssStyles, useRough } = node;
+  const { cssStyles } = node;
 
-  if (useRough) {
+  if (node.look === 'handdrawn') {
     // @ts-ignore
     const rc = rough.svg(shapeSvg);
     const options = userNodeOverrides(node, {});
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/invertedTrapezoid.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/invertedTrapezoid.ts
index 2f5e2796d..e6a547f20 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/invertedTrapezoid.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/invertedTrapezoid.ts
@@ -43,9 +43,9 @@ export const inv_trapezoid = async (parent: SVGAElement, node: Node): Promise;
-  const { cssStyles, useRough } = node;
+  const { cssStyles } = node;
 
-  if (useRough) {
+  if (node.look === 'handdrawn') {
     // @ts-ignore
     const rc = rough.svg(shapeSvg);
     const options = userNodeOverrides(node, {});
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/leanLeft.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/leanLeft.ts
index dad213357..81a317e88 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/leanLeft.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/leanLeft.ts
@@ -42,9 +42,9 @@ export const lean_left = async (parent: SVGAElement, node: Node): Promise;
-  const { cssStyles, useRough } = node;
+  const { cssStyles } = node;
 
-  if (useRough) {
+  if (node.look === 'handdrawn') {
     // @ts-ignore
     const rc = rough.svg(shapeSvg);
     const options = userNodeOverrides(node, {});
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/leanRight.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/leanRight.ts
index c1dfbdbac..bb49621f6 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/leanRight.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/leanRight.ts
@@ -42,9 +42,9 @@ export const lean_right = async (parent: SVGAElement, node: Node): Promise;
-  const { cssStyles, useRough } = node;
+  const { cssStyles } = node;
 
-  if (useRough) {
+  if (node.look === 'handdrawn') {
     // @ts-ignore
     const rc = rough.svg(shapeSvg);
     const options = userNodeOverrides(node, {});
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/note.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/note.ts
index 5843f558b..79c7129a1 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/note.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/note.ts
@@ -21,14 +21,14 @@ export const note = async (parent: SVGAElement, node: Node) => {
   );
 
   log.info('Classes = ', node.cssClasses);
-  const { cssStyles, useRough } = node;
+  const { cssStyles } = node;
   let rect;
   const totalWidth = bbox.width + node.padding;
   const totalHeight = bbox.height + node.padding;
   const x = -bbox.width / 2 - halfPadding;
   const y = -bbox.height / 2 - halfPadding;
 
-  if (useRough) {
+  if (node.look === 'handdrawn') {
     // add the rect
     // @ts-ignore TODO: Fix rough typings
     const rc = rough.svg(shapeSvg);
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/question.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/question.ts
index c72e567cf..274ccc398 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/question.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/question.ts
@@ -38,9 +38,9 @@ export const question = async (parent: SVGAElement, node: Node): Promise;
-  const { cssStyles, useRough } = node;
+  const { cssStyles } = node;
 
-  if (useRough) {
+  if (node.look === 'handdrawn') {
     // @ts-ignore
     const rc = rough.svg(shapeSvg);
     const options = userNodeOverrides(node, {});
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/rectLeftInvArrow.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/rectLeftInvArrow.ts
index c73e00b37..b7b8fafa7 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/rectLeftInvArrow.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/rectLeftInvArrow.ts
@@ -42,9 +42,9 @@ export const rect_left_inv_arrow = async (
   ];
 
   let polygon;
-  const { cssStyles, useRough } = node;
+  const { cssStyles } = node;
 
-  if (useRough) {
+  if (node.look === 'handdrawn') {
     // @ts-ignore
     const rc = rough.svg(shapeSvg);
     const options = userNodeOverrides(node, {});
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/stadium.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/stadium.ts
index 102e49069..e1155082c 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/stadium.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/stadium.ts
@@ -58,8 +58,8 @@ export const stadium = async (parent: SVGAElement, node: Node) => {
   const w = bbox.width + h / 4 + node.padding;
 
   let rect;
-  const { cssStyles, useRough } = node;
-  if (useRough) {
+  const { cssStyles } = node;
+  if (node.look === 'handdrawn') {
     // @ts-ignore
     const rc = rough.svg(shapeSvg);
     const options = userNodeOverrides(node, {});
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateEnd.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateEnd.ts
index 5f93d7a41..4d4d21d86 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateEnd.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateEnd.ts
@@ -17,7 +17,7 @@ export const stateEnd = (parent: SVG, node: Node) => {
 
   let circle;
   let innerCircle;
-  if (node.useRough) {
+  if (node.look === 'handdrawn') {
     // @ts-ignore TODO: Fix rough typings
     const rc = rough.svg(shapeSvg);
     const roughNode = rc.circle(0, 0, 14, { ...solidStateFill(lineColor), roughness: 0.5 });
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateStart.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateStart.ts
index c045266fd..575e7d2b0 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateStart.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateStart.ts
@@ -17,7 +17,7 @@ export const stateStart = (parent: SVG, node: Node) => {
     .attr('id', node.domId || node.id);
 
   let circle;
-  if (node.useRough) {
+  if (node.look === 'handdrawn') {
     // @ts-ignore TODO: Fix rough typings
     const rc = rough.svg(shapeSvg);
     const roughNode = rc.circle(0, 0, 14, solidStateFill(lineColor));
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/subroutine.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/subroutine.ts
index 4046cfcc9..0bdf0e019 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/subroutine.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/subroutine.ts
@@ -40,7 +40,7 @@ export const subroutine = async (parent: SVGAElement, node: Node) => {
   const x = -bbox.width / 2 - halfPadding;
   const y = -bbox.height / 2 - halfPadding;
   let rect;
-  const { cssStyles, useRough } = node;
+  const { cssStyles } = node;
   const points = [
     { x: 0, y: 0 },
     { x: w, y: 0 },
@@ -54,7 +54,7 @@ export const subroutine = async (parent: SVGAElement, node: Node) => {
     { x: -8, y: 0 },
   ];
 
-  if (useRough) {
+  if (node.look === 'handdrawn') {
     // @ts-ignore
     const rc = rough.svg(shapeSvg);
     const options = userNodeOverrides(node, {});
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/trapezoid.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/trapezoid.ts
index 1a6a2d1c2..61cc030ad 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/trapezoid.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/trapezoid.ts
@@ -42,10 +42,10 @@ export const trapezoid = async (parent: SVGAElement, node: Node): Promise;
-  const { cssStyles, useRough } = node;
+  const { cssStyles } = node;
 
-  if (useRough) {
-    console.log('Trapezoid: Inside use useRough');
+  if (node.look === 'handdrawn') {
+    console.log('Trapezoid: Inside use handdrawn');
     // @ts-ignore
     const rc = rough.svg(shapeSvg);
     const options = userNodeOverrides(node, {});
diff --git a/packages/mermaid/src/rendering-util/types.d.ts b/packages/mermaid/src/rendering-util/types.d.ts
index b4c1c0f68..949928a82 100644
--- a/packages/mermaid/src/rendering-util/types.d.ts
+++ b/packages/mermaid/src/rendering-util/types.d.ts
@@ -46,7 +46,6 @@ interface Node {
   rx?: number; // Used for rounded corners in Rect, Ellipse, etc.Maybe it to specialized RectNode, EllipseNode, etc.
   ry?: number;
 
-  useRough?: boolean;
   useHtmlLabels?: boolean;
   centerLabel?: boolean; //keep for now.
   //Candidate for removal, maybe rely on labelStyle or a specific property labelPosition: Top, Center, Bottom
@@ -94,7 +93,8 @@ interface Edge {
   minlen?: number;
   pattern?: string;
   thickness?: 'normal' | 'thick' | 'invisible';
-  useRough?: boolean;
+
+  look?: string;
 }
 
 interface RectOptions {

From 15d35387a0045590c469d15978bda52f681857a7 Mon Sep 17 00:00:00 2001
From: Per Brolin 
Date: Mon, 10 Jun 2024 13:56:21 +0200
Subject: [PATCH 09/12] Removed slick

---
 packages/mermaid/src/config.type.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts
index 2020acdc8..88897345f 100644
--- a/packages/mermaid/src/config.type.ts
+++ b/packages/mermaid/src/config.type.ts
@@ -68,7 +68,7 @@ export interface MermaidConfig {
    * Defines which main look to use for the diagram.
    *
    */
-  look?: 'classic' | 'handdrawn' | 'slick' | 'neo';
+  look?: 'classic' | 'handdrawn' | 'neo';
   /**
    * Defines the seed to be used when using handdrawn look. This is important for the automated tests as they will always find differences without the seed. The default value is 0 which gives a random seed.
    *

From 4eea7ff5da40247f35d14fbb8bdcc76edbf2b28e Mon Sep 17 00:00:00 2001
From: Per Brolin 
Date: Mon, 10 Jun 2024 14:15:43 +0200
Subject: [PATCH 10/12] Corrected options rx,ry for roundedRect when not neo

---
 .../rendering-util/rendering-elements/shapes/roundedRect.ts   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/roundedRect.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/roundedRect.ts
index 399c674aa..32d4d7a4f 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/roundedRect.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/roundedRect.ts
@@ -6,8 +6,8 @@ export const roundedRect = async (parent: SVGAElement, node: Node) => {
   const { look } = getConfig();
   node.look = look;
   const options = {
-    rx: node.look === 'neo' ? 1 : 1,
-    ry: node.look === 'neo' ? 1 : 1,
+    rx: node.look === 'neo' ? 1 : 5,
+    ry: node.look === 'neo' ? 1 : 5,
     labelPaddingX: node.padding * 2,
     labelPaddingY: node.padding * 1,
     classes: '',

From 6dcdec01269366ed28f54771e749de0a9d81672b Mon Sep 17 00:00:00 2001
From: Per Brolin 
Date: Mon, 10 Jun 2024 15:26:20 +0200
Subject: [PATCH 11/12] Removed border for neo as UX-design by steph

---
 packages/mermaid/src/diagrams/state/styles.js                 | 3 ++-
 .../mermaid/src/rendering-util/rendering-elements/clusters.js | 2 +-
 .../src/rendering-util/rendering-elements/shapes/drawRect.ts  | 2 +-
 .../rendering-util/rendering-elements/shapes/roundedRect.ts   | 1 +
 packages/mermaid/src/themes/theme-neo.js                      | 4 +++-
 5 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/packages/mermaid/src/diagrams/state/styles.js b/packages/mermaid/src/diagrams/state/styles.js
index a6b4a6980..16f769506 100644
--- a/packages/mermaid/src/diagrams/state/styles.js
+++ b/packages/mermaid/src/diagrams/state/styles.js
@@ -156,7 +156,8 @@ g.stateGroup line {
   ry: ${options.radius}px;
 }
 
-.state-shadow {
+
+.state-shadow-neo {
   filter: drop-shadow( 1px 2px 2px rgba(185,185,185,1.0) );
 }
 
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/clusters.js b/packages/mermaid/src/rendering-util/rendering-elements/clusters.js
index 344de8919..0c96868a7 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/clusters.js
+++ b/packages/mermaid/src/rendering-util/rendering-elements/clusters.js
@@ -250,7 +250,7 @@ const roundedWithTitle = (parent, node) => {
     rect = outerRectG.insert('rect', ':first-child');
     let outerRectClass = 'outer';
     if (look === 'neo') {
-      outerRectClass = 'outer state-shadow';
+      outerRectClass = 'outer state-shadow-neo';
     } else {
       outerRectClass = 'outer';
     }
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/drawRect.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/drawRect.ts
index e54d46bcf..a904fb954 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/drawRect.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/drawRect.ts
@@ -49,7 +49,7 @@ export const drawRect = async (parent: SVGAElement, node: Node, options: RectOpt
     rect = shapeSvg.insert('rect', ':first-child');
 
     rect
-      .attr('class', 'basic label-container neo-node state-shadow')
+      .attr('class', 'basic label-container state-shadow-neo')
       .attr('style', cssStyles)
       .attr('rx', rx)
       .attr('data-id', 'abc')
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/roundedRect.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/roundedRect.ts
index 32d4d7a4f..5229b606c 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/roundedRect.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/roundedRect.ts
@@ -8,6 +8,7 @@ export const roundedRect = async (parent: SVGAElement, node: Node) => {
   const options = {
     rx: node.look === 'neo' ? 1 : 5,
     ry: node.look === 'neo' ? 1 : 5,
+
     labelPaddingX: node.padding * 2,
     labelPaddingY: node.padding * 1,
     classes: '',
diff --git a/packages/mermaid/src/themes/theme-neo.js b/packages/mermaid/src/themes/theme-neo.js
index 68dbcdbab..1b8df789b 100644
--- a/packages/mermaid/src/themes/theme-neo.js
+++ b/packages/mermaid/src/themes/theme-neo.js
@@ -15,7 +15,8 @@ class Theme {
     this.background = '#ffffff';
 
     this.primaryColor = '#cccccc';
-    this.mainBkg = '#ffffff';
+    //this.mainBkg = '#ffffff';
+    this.mainBkg = '#ecedfe';
 
     this.noteBkgColor = '#fff5ad';
     this.noteTextColor = '#333';
@@ -57,6 +58,7 @@ class Theme {
     this.nodeBkg = this.nodeBkg || this.primaryColor;
     this.mainBkg = this.mainBkg || this.primaryColor;
     this.nodeBorder = this.nodeBorder || this.primaryBorderColor;
+    this.nodeBorder = 'none';
     this.clusterBkg = this.clusterBkg || this.tertiaryColor;
     this.clusterBorder = this.clusterBorder || this.tertiaryBorderColor;
     this.defaultLinkColor = this.defaultLinkColor || this.lineColor;

From a9aa8b7f1af532e64e17da328e5bd2c645238deb Mon Sep 17 00:00:00 2001
From: Per Brolin 
Date: Tue, 11 Jun 2024 13:43:54 +0200
Subject: [PATCH 12/12] Commit prior work by knsv

---
 cypress/platform/per.html                | 2 +-
 packages/mermaid/src/themes/theme-neo.js | 7 +++++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/cypress/platform/per.html b/cypress/platform/per.html
index 74487e762..e6a88642a 100644
--- a/cypress/platform/per.html
+++ b/cypress/platform/per.html
@@ -123,7 +123,7 @@ stateDiagram-v2
         flowchart: { titleTopMargin: 10 },
         // fontFamily: 'Caveat',
         // fontFamily: 'Kalam',
-        fontFamily: 'arial',
+        fontFamily: 'Arial',
         sequence: {
           actorFontFamily: 'arial',
           noteFontFamily: 'arial',
diff --git a/packages/mermaid/src/themes/theme-neo.js b/packages/mermaid/src/themes/theme-neo.js
index 1b8df789b..01b8aaf5c 100644
--- a/packages/mermaid/src/themes/theme-neo.js
+++ b/packages/mermaid/src/themes/theme-neo.js
@@ -22,11 +22,15 @@ class Theme {
     this.noteTextColor = '#333';
 
     this.THEME_COLOR_LIMIT = 12;
-    this.radius = 2;
+    this.radius = 3;
     // dark
 
     this.fontFamily = '"trebuchet ms", verdana, arial, sans-serif';
     this.fontSize = '10px';
+
+    // Neo-specific
+    this.nodeBorder = 'none';
+    this.stateBorder = 'none';
   }
   updateColors() {
     // The || is to make sure that if the variable has been defined by a user override that value is to be used
@@ -58,7 +62,6 @@ class Theme {
     this.nodeBkg = this.nodeBkg || this.primaryColor;
     this.mainBkg = this.mainBkg || this.primaryColor;
     this.nodeBorder = this.nodeBorder || this.primaryBorderColor;
-    this.nodeBorder = 'none';
     this.clusterBkg = this.clusterBkg || this.tertiaryColor;
     this.clusterBorder = this.clusterBorder || this.tertiaryBorderColor;
     this.defaultLinkColor = this.defaultLinkColor || this.lineColor;