diff --git a/.changeset/curly-coats-tell.md b/.changeset/curly-coats-tell.md new file mode 100644 index 000000000..65672267c --- /dev/null +++ b/.changeset/curly-coats-tell.md @@ -0,0 +1,5 @@ +--- +'mermaid': patch +--- + +Fix stroke styles for ER diagram to correctly apply path and row-specific styles diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/erBox.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/erBox.ts index 23c6fb091..9dd4c90e2 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/erBox.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/erBox.ts @@ -40,7 +40,7 @@ export async function erBox(parent: D3Selection let TEXT_PADDING = config.er?.entityPadding ?? 6; const { cssStyles } = node; - const { labelStyles } = styles2String(node); + const { labelStyles, nodeStyles } = styles2String(node); // Draw rect if no attributes are found if (entityNode.attributes.length === 0 && node.label) { @@ -295,6 +295,18 @@ export async function erBox(parent: D3Selection updateNodeBounds(node, rect); + if (nodeStyles && node.look !== 'handDrawn') { + const allStyle = nodeStyles.split(';'); + const strokeStyles = allStyle + ?.filter((e) => { + return e.includes('stroke'); + }) + ?.map((s) => `${s}`) + .join('; '); + shapeSvg.selectAll('path').attr('style', strokeStyles ?? ''); + shapeSvg.selectAll('.row-rect-even path').attr('style', nodeStyles); + } + node.intersect = function (point) { return intersect.rect(node, point); }; diff --git a/packages/tiny/README.md b/packages/tiny/README.md index a877a95da..707cc4307 100644 --- a/packages/tiny/README.md +++ b/packages/tiny/README.md @@ -23,14 +23,6 @@ If you need to use mermaid in your project, please install the full [`mermaid` p ## Usage via CDN -### Latest version - -```html - -``` - -### Specific version - ```html