diff --git a/cypress/platform/knsv.html b/cypress/platform/knsv.html
index dd4775f274..512333c010 100644
--- a/cypress/platform/knsv.html
+++ b/cypress/platform/knsv.html
@@ -42,6 +42,24 @@
+
+ %%{init: {"flowchart": {"htmlLabels": true}} }%%
+ flowchart LR
+ b("`The dog in **the** hog.(1).. a a a a *very long text* about it
+ Word!
+
+ Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words.`") --apa--> c
+
+
+
+ classDiagram-v2
+
+ classA -- classB : Inheritance
+ classA -- classC : link
+ classC -- classD : link
+ classB -- classD
+
sequenceDiagram
Alice->>Bob: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
diff --git a/package.json b/package.json
index fe7a3ba006..b3be538dac 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
{
"name": "mermaid-monorepo",
"private": true,
- "version": "10.1.0",
+ "version": "10.2.0-rc.1",
"description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
"type": "module",
"packageManager": "pnpm@8.4.0",
diff --git a/packages/mermaid/src/diagrams/flowchart/styles.ts b/packages/mermaid/src/diagrams/flowchart/styles.ts
index 62ec1177e5..d0c3c77c6c 100644
--- a/packages/mermaid/src/diagrams/flowchart/styles.ts
+++ b/packages/mermaid/src/diagrams/flowchart/styles.ts
@@ -1,3 +1,6 @@
+// import khroma from 'khroma';
+import * as khroma from 'khroma';
+
/** Returns the styles given options */
export interface FlowChartStyleOptions {
arrowheadColor: string;
@@ -15,6 +18,18 @@ export interface FlowChartStyleOptions {
titleColor: string;
}
+const fade = (color: string, opacity: number) => {
+ // @ts-ignore TODO: incorrect types from khroma
+ const channel = khroma.channel;
+
+ const r = channel(color, 'r');
+ const g = channel(color, 'g');
+ const b = channel(color, 'b');
+
+ // @ts-ignore incorrect types from khroma
+ return khroma.rgba(r, g, b, opacity);
+};
+
const getStyles = (options: FlowChartStyleOptions) =>
`.label {
font-family: ${options.fontFamily};
@@ -84,15 +99,8 @@ const getStyles = (options: FlowChartStyleOptions) =>
/* For html labels only */
.labelBkg {
- background-color: ${options.edgeLabelBackground};
- background-color: ${options.edgeLabelBackground};
- opacity: 0.5;
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- z-index: -1;
+ background-color: ${fade(options.edgeLabelBackground, 0.5)};
+ // background-color:
}
.cluster rect {
diff --git a/packages/mermaid/src/rendering-util/createText.js b/packages/mermaid/src/rendering-util/createText.js
index 43869f3f2f..1216217750 100644
--- a/packages/mermaid/src/rendering-util/createText.js
+++ b/packages/mermaid/src/rendering-util/createText.js
@@ -29,15 +29,13 @@ function addHtmlSpan(element, node, width, classes, addBackground = false) {
const label = node.label;
const labelClass = node.isNode ? 'nodeLabel' : 'edgeLabel';
- const bkgHtml = addBackground ? '' : '';
div.html(
- `
- ${bkgHtml}
+ `
' +
label +
- ''
+ ''
);
applyStyle(div, node.labelStyle);
@@ -45,6 +43,9 @@ function addHtmlSpan(element, node, width, classes, addBackground = false) {
div.style('white-space', 'nowrap');
div.style('max-width', width + 'px');
div.attr('xmlns', 'http://www.w3.org/1999/xhtml');
+ if (addBackground) {
+ div.attr('class', 'labelBkg');
+ }
let bbox = div.node().getBoundingClientRect();
if (bbox.width === width) {
diff --git a/packages/mermaid/src/themes/theme-base.js b/packages/mermaid/src/themes/theme-base.js
index 495df2e415..ce1700d0b0 100644
--- a/packages/mermaid/src/themes/theme-base.js
+++ b/packages/mermaid/src/themes/theme-base.js
@@ -1,4 +1,4 @@
-import { darken, lighten, adjust, invert, isDark } from 'khroma';
+import { darken, lighten, adjust, invert, isDark, toRgba } from 'khroma';
import { mkBorder } from './theme-helpers.js';
import {
oldAttributeBackgroundColorEven,
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d021684f99..1ec7f3a7b2 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -425,58 +425,6 @@ importers:
specifier: ^6.5.4
version: 6.5.4
- packages/mermaid/src/vitepress:
- dependencies:
- '@vueuse/core':
- specifier: ^10.1.0
- version: 10.1.0(vue@3.2.47)
- jiti:
- specifier: ^1.18.2
- version: 1.18.2
- vue:
- specifier: ^3.2.47
- version: 3.2.47
- devDependencies:
- '@iconify-json/carbon':
- specifier: ^1.1.16
- version: 1.1.16
- '@unocss/reset':
- specifier: ^0.51.8
- version: 0.51.8
- '@vite-pwa/vitepress':
- specifier: ^0.0.5
- version: 0.0.5(vite-plugin-pwa@0.14.7)
- '@vitejs/plugin-vue':
- specifier: ^4.2.1
- version: 4.2.1(vite@4.3.3)(vue@3.2.47)
- fast-glob:
- specifier: ^3.2.12
- version: 3.2.12
- https-localhost:
- specifier: ^4.7.1
- version: 4.7.1
- pathe:
- specifier: ^1.1.0
- version: 1.1.0
- unocss:
- specifier: ^0.51.8
- version: 0.51.8(postcss@8.4.23)(rollup@2.79.1)(vite@4.3.3)
- unplugin-vue-components:
- specifier: ^0.24.1
- version: 0.24.1(rollup@2.79.1)(vue@3.2.47)
- vite:
- specifier: ^4.3.3
- version: 4.3.3(@types/node@18.16.0)
- vite-plugin-pwa:
- specifier: ^0.14.7
- version: 0.14.7(vite@4.3.3)(workbox-build@6.5.4)(workbox-window@6.5.4)
- vitepress:
- specifier: 1.0.0-alpha.74
- version: 1.0.0-alpha.74(@algolia/client-search@4.14.2)(@types/node@18.16.0)
- workbox-window:
- specifier: ^6.5.4
- version: 6.5.4
-
tests/webpack:
dependencies:
'@mermaid-js/mermaid-example-diagram':