From 77999f0b37c02def3deebcb46e94f243924c30b0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Issue=E5=93=A5?= Date: Mon, 10 Apr 2023 18:24:53 +0800 Subject: [PATCH 001/457] fix: adjust piechart viewbox for mobile devices with small width --- .../mermaid/src/diagrams/pie/pieRenderer.js | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/packages/mermaid/src/diagrams/pie/pieRenderer.js b/packages/mermaid/src/diagrams/pie/pieRenderer.js index 1ee34e192a..5c420d3311 100644 --- a/packages/mermaid/src/diagrams/pie/pieRenderer.js +++ b/packages/mermaid/src/diagrams/pie/pieRenderer.js @@ -6,6 +6,12 @@ import * as configApi from '../../config.js'; import { parseFontSize } from '../../utils.js'; let conf = configApi.getConfig(); +// https://stackoverflow.com/a/35373030/3469145 +const getTextWidth = (function () { + const canvas = document.createElement('canvas') + const context = canvas.getContext('2d') + return text => context.measureText(text).width * window.devicePixelRatio +})(); /** * Draws a Pie Chart with the data given in text. @@ -73,6 +79,18 @@ export const draw = (txt, id, _version, diagObj) => { sum += data[key]; }); + const legendShowData = diagObj.db.getShowData() || conf.showData || conf.pie.showData; + const legendTexts = Object.keys(data).map(key => { + if (!legendShowData) { + return key; + } + return key + ' [' + data[key] + ']'; + }) + const legendTextWidths = legendTexts.map(v => getTextWidth(v)).sort((a, b) => a - b); + const longestTextWidth = parseInt(legendTextWidths.pop()); + const newWidth = width + margin + legendRectSize + legendSpacing + longestTextWidth; + elem.setAttribute("viewBox", "0 0 " + newWidth + " " + height); + const themeVariables = conf.themeVariables; var myGeneratedColors = [ themeVariables.pie1, From f211ed686c6deb63481cf3a2a57850fa00ab4fbe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Issue=E5=93=A5?= Date: Tue, 27 Jun 2023 21:56:38 +0800 Subject: [PATCH 002/457] fix: apply suggested changes for PR #4288 --- packages/mermaid/src/diagrams/pie/pieRenderer.js | 14 ++++---------- .../mermaid/src/rendering-util/getTextWidth.js | 7 +++++++ 2 files changed, 11 insertions(+), 10 deletions(-) create mode 100644 packages/mermaid/src/rendering-util/getTextWidth.js diff --git a/packages/mermaid/src/diagrams/pie/pieRenderer.js b/packages/mermaid/src/diagrams/pie/pieRenderer.js index 5c420d3311..06ed541749 100644 --- a/packages/mermaid/src/diagrams/pie/pieRenderer.js +++ b/packages/mermaid/src/diagrams/pie/pieRenderer.js @@ -4,14 +4,9 @@ import { log } from '../../logger.js'; import { configureSvgSize } from '../../setupGraphViewbox.js'; import * as configApi from '../../config.js'; import { parseFontSize } from '../../utils.js'; +import { getTextWidth } from '../../rendering-util/getTextWidth.js'; let conf = configApi.getConfig(); -// https://stackoverflow.com/a/35373030/3469145 -const getTextWidth = (function () { - const canvas = document.createElement('canvas') - const context = canvas.getContext('2d') - return text => context.measureText(text).width * window.devicePixelRatio -})(); /** * Draws a Pie Chart with the data given in text. @@ -79,15 +74,14 @@ export const draw = (txt, id, _version, diagObj) => { sum += data[key]; }); - const legendShowData = diagObj.db.getShowData() || conf.showData || conf.pie.showData; + const legendShowData = diagObj.db.getShowData() || conf.showData || conf.pie.showData || false; const legendTexts = Object.keys(data).map(key => { if (!legendShowData) { return key; } - return key + ' [' + data[key] + ']'; + return `${key} [${data[key]}]`; }) - const legendTextWidths = legendTexts.map(v => getTextWidth(v)).sort((a, b) => a - b); - const longestTextWidth = parseInt(legendTextWidths.pop()); + const longestTextWidth = Math.max(...(legendTexts.map(v => getTextWidth(v)))); const newWidth = width + margin + legendRectSize + legendSpacing + longestTextWidth; elem.setAttribute("viewBox", "0 0 " + newWidth + " " + height); diff --git a/packages/mermaid/src/rendering-util/getTextWidth.js b/packages/mermaid/src/rendering-util/getTextWidth.js new file mode 100644 index 0000000000..f2976a852a --- /dev/null +++ b/packages/mermaid/src/rendering-util/getTextWidth.js @@ -0,0 +1,7 @@ +// https://stackoverflow.com/a/35373030/3469145 +const canvas = document.createElement('canvas'); +const context = canvas.getContext('2d'); + +const getTextWidth = (text) => context.measureText(text).width * window.devicePixelRatio; + +export { getTextWidth }; From a2d1fb5e5468fcb5a51ba081ea90ee999889d60d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Issue=E5=93=A5?= Date: Fri, 7 Jul 2023 15:42:40 +0800 Subject: [PATCH 003/457] use computeWidthOfText --- packages/mermaid/src/diagrams/pie/pieRenderer.js | 10 ++++++---- packages/mermaid/src/rendering-util/createText.js | 2 +- packages/mermaid/src/rendering-util/getTextWidth.js | 7 ------- 3 files changed, 7 insertions(+), 12 deletions(-) delete mode 100644 packages/mermaid/src/rendering-util/getTextWidth.js diff --git a/packages/mermaid/src/diagrams/pie/pieRenderer.js b/packages/mermaid/src/diagrams/pie/pieRenderer.js index 06ed541749..0a36af3c57 100644 --- a/packages/mermaid/src/diagrams/pie/pieRenderer.js +++ b/packages/mermaid/src/diagrams/pie/pieRenderer.js @@ -4,7 +4,7 @@ import { log } from '../../logger.js'; import { configureSvgSize } from '../../setupGraphViewbox.js'; import * as configApi from '../../config.js'; import { parseFontSize } from '../../utils.js'; -import { getTextWidth } from '../../rendering-util/getTextWidth.js'; +import { computeWidthOfText } from '../../rendering-util/createText.js'; let conf = configApi.getConfig(); @@ -74,16 +74,18 @@ export const draw = (txt, id, _version, diagObj) => { sum += data[key]; }); - const legendShowData = diagObj.db.getShowData() || conf.showData || conf.pie.showData || false; + const legendShowData = diagObj.db.getShowData(); const legendTexts = Object.keys(data).map(key => { if (!legendShowData) { return key; } return `${key} [${data[key]}]`; }) - const longestTextWidth = Math.max(...(legendTexts.map(v => getTextWidth(v)))); + const longestTextWidth = Math.max(...(legendTexts.map(text => { + return computeWidthOfText(svg, 1, text) + }))); const newWidth = width + margin + legendRectSize + legendSpacing + longestTextWidth; - elem.setAttribute("viewBox", "0 0 " + newWidth + " " + height); + elem.setAttribute("viewBox", `0 0 ${newWidth} ${height}`); const themeVariables = conf.themeVariables; var myGeneratedColors = [ diff --git a/packages/mermaid/src/rendering-util/createText.js b/packages/mermaid/src/rendering-util/createText.js index 871f3425e2..25a7b0c1a5 100644 --- a/packages/mermaid/src/rendering-util/createText.js +++ b/packages/mermaid/src/rendering-util/createText.js @@ -85,7 +85,7 @@ function createTspan(textElement, lineIndex, lineHeight) { * @param {string} text * @returns {number} */ -function computeWidthOfText(parentNode, lineHeight, text) { +export function computeWidthOfText(parentNode, lineHeight, text) { const testElement = parentNode.append('text'); const testSpan = createTspan(testElement, 1, lineHeight); updateTextContentAndStyles(testSpan, [{ content: text, type: 'normal' }]); diff --git a/packages/mermaid/src/rendering-util/getTextWidth.js b/packages/mermaid/src/rendering-util/getTextWidth.js deleted file mode 100644 index f2976a852a..0000000000 --- a/packages/mermaid/src/rendering-util/getTextWidth.js +++ /dev/null @@ -1,7 +0,0 @@ -// https://stackoverflow.com/a/35373030/3469145 -const canvas = document.createElement('canvas'); -const context = canvas.getContext('2d'); - -const getTextWidth = (text) => context.measureText(text).width * window.devicePixelRatio; - -export { getTextWidth }; From 14e290bf1a2b643cc65c863ea8ebcad93c76feea Mon Sep 17 00:00:00 2001 From: Subhash Halder Date: Sat, 20 May 2023 19:32:20 +0530 Subject: [PATCH 004/457] Added base structure for xychart --- cSpell.json | 1 + demos/index.html | 3 + demos/xychart.html | 33 ++++ .../src/diagram-api/diagram-orchestration.ts | 2 + .../src/diagrams/xychart/parser/xychart.jison | 143 ++++++++++++++++++ .../src/diagrams/xychart/xychartBuilder.ts | 5 + .../mermaid/src/diagrams/xychart/xychartDb.ts | 39 +++++ .../src/diagrams/xychart/xychartDetector.ts | 20 +++ .../src/diagrams/xychart/xychartDiagram.ts | 12 ++ .../src/diagrams/xychart/xychartRenderer.ts | 38 +++++ 10 files changed, 296 insertions(+) create mode 100644 demos/xychart.html create mode 100644 packages/mermaid/src/diagrams/xychart/parser/xychart.jison create mode 100644 packages/mermaid/src/diagrams/xychart/xychartBuilder.ts create mode 100644 packages/mermaid/src/diagrams/xychart/xychartDb.ts create mode 100644 packages/mermaid/src/diagrams/xychart/xychartDetector.ts create mode 100644 packages/mermaid/src/diagrams/xychart/xychartDiagram.ts create mode 100644 packages/mermaid/src/diagrams/xychart/xychartRenderer.ts diff --git a/cSpell.json b/cSpell.json index abcfa03830..a99be67da7 100644 --- a/cSpell.json +++ b/cSpell.json @@ -149,6 +149,7 @@ "vueuse", "xlink", "yash", + "xychart", "yokozuna", "zenuml" ], diff --git a/demos/index.html b/demos/index.html index 24c4fbf3b0..c634aad2d4 100644 --- a/demos/index.html +++ b/demos/index.html @@ -60,6 +60,9 @@

Pie

  • Quadrant charts

    • +
  • +

    XY charts

    +

  • Requirements

    • diff --git a/demos/xychart.html b/demos/xychart.html new file mode 100644 index 0000000000..3fffd379ab --- /dev/null +++ b/demos/xychart.html @@ -0,0 +1,33 @@ + + + + + + Mermaid Quick Test Page + + + + + +

    XY Charts demos

    + 
    +    xychart
+
    + +
    + + + + diff --git a/packages/mermaid/src/diagram-api/diagram-orchestration.ts b/packages/mermaid/src/diagram-api/diagram-orchestration.ts index 9c03e27f31..b4dd2fd958 100644 --- a/packages/mermaid/src/diagram-api/diagram-orchestration.ts +++ b/packages/mermaid/src/diagram-api/diagram-orchestration.ts @@ -7,6 +7,7 @@ import gantt from '../diagrams/gantt/ganttDetector.js'; import { info } from '../diagrams/info/infoDetector.js'; import pie from '../diagrams/pie/pieDetector.js'; import quadrantChart from '../diagrams/quadrant-chart/quadrantDetector.js'; +import xychart from '../diagrams/xychart/xychartDetector.js'; import requirement from '../diagrams/requirement/requirementDetector.js'; import sequence from '../diagrams/sequence/sequenceDetector.js'; import classDiagram from '../diagrams/class/classDetector.js'; @@ -82,5 +83,6 @@ export const addDiagrams = () => { journey, quadrantChart, sankey + xychart ); }; diff --git a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison new file mode 100644 index 0000000000..d8e0d08d08 --- /dev/null +++ b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison @@ -0,0 +1,143 @@ +%lex +%options case-insensitive + +%x string +%x string +%x md_string +%x title +%x open_directive +%x type_directive +%x arg_directive +%x close_directive +%x acc_title +%x acc_descr +%x acc_descr_multiline +%% +\%\%\{ { this.begin('open_directive'); return 'open_directive'; } +((?:(?!\}\%\%)[^:.])*) { this.begin('type_directive'); return 'type_directive'; } +":" { this.popState(); this.begin('arg_directive'); return ':'; } +\}\%\% { this.popState(); this.popState(); return 'close_directive'; } +((?:(?!\}\%\%).|\n)*) return 'arg_directive'; +\%\%(?!\{)[^\n]* /* skip comments */ +[^\}]\%\%[^\n]* /* skip comments */ +[\n\r]+ return 'NEWLINE'; +\%\%[^\n]* /* do nothing */ + +title { this.begin("title");return 'title'; } +(?!\n|;|#)*[^\n]* { this.popState(); return "title_value"; } + +accTitle\s*":"\s* { this.begin("acc_title");return 'acc_title'; } +<acc_title>(?!\n|;|#)*[^\n]* { this.popState(); return "acc_title_value"; } +accDescr\s*":"\s* { this.begin("acc_descr");return 'acc_descr'; } +<acc_descr>(?!\n|;|#)*[^\n]* { this.popState(); return "acc_descr_value"; } +accDescr\s*"{"\s* { this.begin("acc_descr_multiline");} +<acc_descr_multiline>[\}] { this.popState(); } +<acc_descr_multiline>[^\}]* return "acc_descr_multiline_value"; + + +["][`] { this.begin("md_string");} +<md_string>[^`"]+ { return "MD_STR";} +<md_string>[`]["] { this.popState();} +["] this.begin("string"); +<string>["] this.popState(); +<string>[^"]* return "STR"; + +" "*"xychart"" "* return 'XYCHART'; + +[A-Za-z]+ return 'ALPHA'; +":" return 'COLON'; +\+ return 'PLUS'; +"," return 'COMMA'; +"=" return 'EQUALS'; +\= return 'EQUALS'; +"*" return 'MULT'; +\# return 'BRKT'; +[\_] return 'UNDERSCORE'; +"." return 'DOT'; +"&" return 'AMP'; +\- return 'MINUS'; +[0-9]+ return 'NUM'; +\s return 'SPACE'; +";" return 'SEMI'; +[!"#$%&'*+,-.`?\\_/] return 'PUNCTUATION'; +<<EOF>> return 'EOF'; + +/lex + +%start start + +%% /* language grammar */ + +start + : eol start + | SPACE start + | directive start + | XYCHART document + ; + +document + : /* empty */ + | document line + ; + +line + : statement eol + ; + +statement + : + | SPACE statement + | directive + ; + + +directive + : openDirective typeDirective closeDirective + | openDirective typeDirective ':' argDirective closeDirective + ; + +eol + : NEWLINE + | SEMI + | EOF + ; + +openDirective + : open_directive { yy.parseDirective('%%{', 'open_directive'); } + ; + +typeDirective + : type_directive { yy.parseDirective($1, 'type_directive'); } + ; + +argDirective + : arg_directive { $1 = $1.trim().replace(/'/g, '"'); yy.parseDirective($1, 'arg_directive'); } + ; + +closeDirective + : close_directive { yy.parseDirective('}%%', 'close_directive', 'quadrantChart'); } + ; + +text: alphaNumToken + { $$={text:$1, type: 'text'};} + | text textNoTagsToken + { $$={text:$1.text+''+$2, type: $1.type};} + | STR + { $$={text: $1, type: 'text'};} + | MD_STR + { $$={text: $1, type: 'markdown'};} + ; + +alphaNum + : alphaNumToken + {$$=$1;} + | alphaNum alphaNumToken + {$$=$1+''+$2;} + ; + + +alphaNumToken : PUNCTUATION | AMP | NUM| ALPHA | COMMA | PLUS | EQUALS | MULT | DOT | BRKT| UNDERSCORE ; + +textNoTagsToken: alphaNumToken | SPACE | MINUS; + +%% diff --git a/packages/mermaid/src/diagrams/xychart/xychartBuilder.ts b/packages/mermaid/src/diagrams/xychart/xychartBuilder.ts new file mode 100644 index 0000000000..b4bbdc31eb --- /dev/null +++ b/packages/mermaid/src/diagrams/xychart/xychartBuilder.ts @@ -0,0 +1,5 @@ +// @ts-ignore: TODO Fix ts errors +import { scaleLinear } from 'd3'; +import { log } from '../../logger.js'; + +export class XYChartBuilder {} diff --git a/packages/mermaid/src/diagrams/xychart/xychartDb.ts b/packages/mermaid/src/diagrams/xychart/xychartDb.ts new file mode 100644 index 0000000000..968d1390da --- /dev/null +++ b/packages/mermaid/src/diagrams/xychart/xychartDb.ts @@ -0,0 +1,39 @@ +import { log } from '../../logger.js'; +import mermaidAPI from '../../mermaidAPI.js'; +import * as configApi from '../../config.js'; +import { sanitizeText } from '../common/common.js'; +import { + setAccTitle, + getAccTitle, + setDiagramTitle, + getDiagramTitle, + getAccDescription, + setAccDescription, + clear as commonClear, +} from '../../commonDb.js'; + +const config = configApi.getConfig(); + +function textSanitizer(text: string) { + return sanitizeText(text.trim(), config); +} + +export const parseDirective = function (statement: string, context: string, type: string) { + // @ts-ignore: TODO Fix ts errors + mermaidAPI.parseDirective(this, statement, context, type); +}; + +const clear = function () { + commonClear(); +}; + +export default { + parseDirective, + clear, + setAccTitle, + getAccTitle, + setDiagramTitle, + getDiagramTitle, + getAccDescription, + setAccDescription, +}; diff --git a/packages/mermaid/src/diagrams/xychart/xychartDetector.ts b/packages/mermaid/src/diagrams/xychart/xychartDetector.ts new file mode 100644 index 0000000000..d200adc591 --- /dev/null +++ b/packages/mermaid/src/diagrams/xychart/xychartDetector.ts @@ -0,0 +1,20 @@ +import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-api/types.js'; + +const id = 'xychart'; + +const detector: DiagramDetector = (txt) => { + return txt.match(/^\s*xychart/i) !== null; +}; + +const loader = async () => { + const { diagram } = await import('./xychartDiagram.js'); + return { id, diagram }; +}; + +const plugin: ExternalDiagramDefinition = { + id, + detector, + loader, +}; + +export default plugin; diff --git a/packages/mermaid/src/diagrams/xychart/xychartDiagram.ts b/packages/mermaid/src/diagrams/xychart/xychartDiagram.ts new file mode 100644 index 0000000000..590ceed289 --- /dev/null +++ b/packages/mermaid/src/diagrams/xychart/xychartDiagram.ts @@ -0,0 +1,12 @@ +import { DiagramDefinition } from '../../diagram-api/types.js'; +// @ts-ignore: TODO Fix ts errors +import parser from './parser/xychart.jison'; +import db from './xychartDb.js'; +import renderer from './xychartRenderer.js'; + +export const diagram: DiagramDefinition = { + parser, + db, + renderer, + styles: () => '', +}; diff --git a/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts b/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts new file mode 100644 index 0000000000..a4caacf524 --- /dev/null +++ b/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts @@ -0,0 +1,38 @@ +// @ts-ignore: TODO Fix ts errors +import { select } from 'd3'; +import * as configApi from '../../config.js'; +import { log } from '../../logger.js'; +import { configureSvgSize } from '../../setupGraphViewbox.js'; +import { Diagram } from '../../Diagram.js'; + +export const draw = (txt: string, id: string, _version: string, diagObj: Diagram) => { + const conf = configApi.getConfig(); + + log.debug('Rendering xychart chart\n' + txt); + + const securityLevel = conf.securityLevel; + // Handle root and Document for when rendering in sandbox mode + let sandboxElement; + if (securityLevel === 'sandbox') { + sandboxElement = select('#i' + id); + } + const root = + securityLevel === 'sandbox' + ? select(sandboxElement.nodes()[0].contentDocument.body) + : select('body'); + + const svg = root.select(`[id="${id}"]`); + + const group = svg.append('g').attr('class', 'main'); + + const width = 500; + const height = 500; + + configureSvgSize(svg, height, width, true); + + svg.attr('viewBox', '0 0 ' + width + ' ' + height); +}; + +export default { + draw, +}; From 93697b74f44f1b0daf41e0f76373f9a2402ce446 Mon Sep 17 00:00:00 2001 From: Subhash Halder <halder.subhash@gmail.com> Date: Thu, 8 Jun 2023 22:00:02 +0530 Subject: [PATCH 005/457] Generated the base architecture --- demos/xychart.html | 2 +- packages/mermaid/package.json | 2 + .../quadrant-chart/quadrantBuilder.ts | 1 - .../xychart/chartBuilder/Interfaces.ts | 151 ++++++++++++++++++ .../xychart/chartBuilder/Orchestrator.ts | 66 ++++++++ .../chartBuilder/TextDimensionCalculator.ts | 15 ++ .../chartBuilder/components/ChartTitle.ts | 89 +++++++++++ .../chartBuilder/components/Interfaces.ts | 8 + .../chartBuilder/components/axis/BandAxis.ts | 54 +++++++ .../components/axis/LinearAxis.ts | 55 +++++++ .../chartBuilder/components/axis/index.ts | 31 ++++ .../chartBuilder/components/plot/LinePlot.ts | 34 ++++ .../chartBuilder/components/plot/index.ts | 81 ++++++++++ .../diagrams/xychart/chartBuilder/index.ts | 77 +++++++++ .../src/diagrams/xychart/xychartBuilder.ts | 5 - .../mermaid/src/diagrams/xychart/xychartDb.ts | 21 ++- .../src/diagrams/xychart/xychartRenderer.ts | 95 ++++++++++- pnpm-lock.yaml | 62 ++++++- 18 files changed, 835 insertions(+), 14 deletions(-) create mode 100644 packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts create mode 100644 packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts create mode 100644 packages/mermaid/src/diagrams/xychart/chartBuilder/TextDimensionCalculator.ts create mode 100644 packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts create mode 100644 packages/mermaid/src/diagrams/xychart/chartBuilder/components/Interfaces.ts create mode 100644 packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BandAxis.ts create mode 100644 packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/LinearAxis.ts create mode 100644 packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts create mode 100644 packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/LinePlot.ts create mode 100644 packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts create mode 100644 packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts delete mode 100644 packages/mermaid/src/diagrams/xychart/xychartBuilder.ts diff --git a/demos/xychart.html b/demos/xychart.html index 3fffd379ab..6595b56737 100644 --- a/demos/xychart.html +++ b/demos/xychart.html @@ -25,7 +25,7 @@ <h1>XY Charts demos</h1> import mermaid from './mermaid.esm.mjs'; mermaid.initialize({ theme: 'default', - logLevel: 3, + logLevel: 0, securityLevel: 'loose', }); </script> diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json index d04083baac..aa705532cd 100644 --- a/packages/mermaid/package.json +++ b/packages/mermaid/package.json @@ -82,6 +82,8 @@ "@types/d3": "^7.4.0", "@types/d3-sankey": "^0.12.1", "@types/d3-selection": "^3.0.5", + "@types/d3-scale": "^4.0.2", + "@types/d3-shape": "^3.1.0", "@types/dompurify": "^3.0.2", "@types/jsdom": "^21.1.1", "@types/lodash-es": "^4.17.7", diff --git a/packages/mermaid/src/diagrams/quadrant-chart/quadrantBuilder.ts b/packages/mermaid/src/diagrams/quadrant-chart/quadrantBuilder.ts index 9c11627620..388d7a0283 100644 --- a/packages/mermaid/src/diagrams/quadrant-chart/quadrantBuilder.ts +++ b/packages/mermaid/src/diagrams/quadrant-chart/quadrantBuilder.ts @@ -1,4 +1,3 @@ -// @ts-ignore: TODO Fix ts errors import { scaleLinear } from 'd3'; import { log } from '../../logger.js'; import type { BaseDiagramConfig, QuadrantChartConfig } from '../../config.type.js'; diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts new file mode 100644 index 0000000000..767a982627 --- /dev/null +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts @@ -0,0 +1,151 @@ +export enum ChartPlotEnum { + LINE = 'line', +} + +export enum ChartLayoutElem { + NULL = 'null', + CHART = 'chart', + TITLE = 'title', + XAXISLABEL = 'xaxislabel', + XAXISTITLE = 'xaxistitle', + YAXISLABEL = 'yaxislabel', + YAXISTITLE = 'yaxistitle', +} +export enum XYChartYAxisPosition { + LEFT = 'left', + RIGHT = 'right', +} + +export enum OrientationEnum { + VERTICAL = 'vertical', + HORIZONTAL = 'horizontal', +} + +export type ChartLayout = ChartLayoutElem[][]; + +export type VisibilityOption = { + chartTitle: boolean; + xAxisTitle: boolean; + xAxisLabel: boolean; + yAxisTitle: boolean; + yAxisLabel: boolean; +}; + +export interface XYChartConfig { + width: number; + height: number; + fontFamily: string; + titleFontSize: number; + titleFill: string; + titlePadding: number; + xAxisFontSize: number; + xAxisTitleFontSize: number; + yAxisFontSize: number; + yAxisTitleFontSize: number; + yAxisPosition: XYChartYAxisPosition; + showChartTitle: boolean; + showXAxisLable: boolean; + showXAxisTitle: boolean; + showYAxisLabel: boolean; + showYAxisTitle: boolean; + chartOrientation: OrientationEnum; + plotReservedSpacePercent: number; +} + +export type SimplePlotDataType = [string | number, number][]; + +export interface LinePlotData { + type: ChartPlotEnum.LINE; + data: SimplePlotDataType; +} + +export type PlotData = LinePlotData; + +export interface BandAxisDataType { + title: string; + categories: string[]; +} + +export interface LinearAxisDataType{ + title: string; + min: number; + max: number; +} + +export type AxisDataType = LinearAxisDataType | BandAxisDataType; + +export interface XYChartData { + xAxis: AxisDataType; + yAxis: AxisDataType; + title: string; + plots: PlotData[]; +} + +export interface Dimension { + width: number; + height: number; +} + +export interface BoundingRect extends Point, Dimension {} + +export interface XYChartSpaceProperty extends BoundingRect { + orientation: OrientationEnum; +} + +export interface XYChartSpace { + chart: XYChartSpaceProperty; + title: XYChartSpaceProperty; + xAxisLabels: XYChartSpaceProperty; + xAxisTitle: XYChartSpaceProperty; + yAxisLabel: XYChartSpaceProperty; + yAxisTitle: XYChartSpaceProperty; +} + +export interface Point { + x: number; + y: number; +} + +export type TextVerticalPos = 'left' | 'center' | 'right'; +export type TextHorizontalPos = 'top' | 'middle' | 'bottom'; + +export interface RectElem extends Point { + width: number; + height: number; + fill: string; + strokeWidth: number; + strokeFill: string; +} + +export interface TextElem extends Point { + text: string; + fill: string; + verticalPos: TextVerticalPos; + horizontalPos: TextHorizontalPos; + fontSize: number; + rotation: number; +} + +export interface PathElem { + path: string; + fill?: string; + strokeWidth: number; + strokeFill: string; +} + +export type DrawableElem = + | { + groupText: string; + type: 'rect'; + data: RectElem[]; + } + | { + groupText: string; + type: 'text'; + data: TextElem[]; + } + | { + groupText: string; + type: 'path'; + data: PathElem[]; + }; diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts new file mode 100644 index 0000000000..d597569215 --- /dev/null +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts @@ -0,0 +1,66 @@ +import { DrawableElem, XYChartConfig, XYChartData } from './Interfaces.js'; +import { getChartTitleComponent } from './components/ChartTitle.js'; +import { ChartComponent } from './components/Interfaces.js'; +import { IAxis, getAxis } from './components/axis/index.js'; +import { IPlot, getPlotComponent, isTypeIPlot } from './components/plot/index.js'; + +export class Orchestrator { + private componentStore: { + title: ChartComponent, + plot: IPlot, + xAxis: IAxis, + yAxis: IAxis, + }; + constructor(private chartConfig: XYChartConfig, chartData: XYChartData) { + this.componentStore = { + title: getChartTitleComponent(chartConfig, chartData), + plot: getPlotComponent(chartConfig, chartData), + xAxis: getAxis(chartData.xAxis, chartConfig), + yAxis: getAxis(chartData.yAxis, chartConfig), + }; + } + + private calculateSpace() { + let availableWidth = this.chartConfig.width; + let availableHeight = this.chartConfig.height; + let chartX = 0; + let chartY = 0; + const chartWidth = Math.floor((availableWidth * this.chartConfig.plotReservedSpacePercent) / 100); + const chartHeight = Math.floor((availableHeight * this.chartConfig.plotReservedSpacePercent) / 100); + + let spaceUsed = this.componentStore.plot.calculateSpace({ + width: chartWidth, + height: chartHeight, + }); + availableWidth -= spaceUsed.width; + availableHeight -= spaceUsed.height; + + spaceUsed = this.componentStore.title.calculateSpace({ + width: this.chartConfig.width, + height: availableHeight, + }); + chartY = spaceUsed.height; + availableWidth -= spaceUsed.width; + availableHeight -= spaceUsed.height; + // + // spaceUsed = this.componentStore.xAxis.calculateSpace({ + // width: availableWidth, + // height: availableHeight, + // }); + // availableWidth -= spaceUsed.width; + // availableHeight -= spaceUsed.height; + this.componentStore.plot.setBoundingBoxXY({x: chartX, y: chartY}); + this.componentStore.xAxis.setRange([chartX, chartX + chartWidth]); + this.componentStore.yAxis.setRange([chartY, chartY + chartHeight]); + } + + getDrawableElement() { + this.calculateSpace(); + const drawableElem: DrawableElem[] = []; + this.componentStore.plot.setAxes(this.componentStore.xAxis, this.componentStore.yAxis); + for (const component of Object.values(this.componentStore)) { + drawableElem.push(...component.getDrawableElements()); + } + return drawableElem; + } +} diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/TextDimensionCalculator.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/TextDimensionCalculator.ts new file mode 100644 index 0000000000..e83badc353 --- /dev/null +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/TextDimensionCalculator.ts @@ -0,0 +1,15 @@ +import { Dimension } from './Interfaces.js'; + +export interface ITextDimensionCalculator { + getDimension(text: string): Dimension; +} + +export class TextDimensionCalculator implements ITextDimensionCalculator { + constructor(private fontSize: number, private fontFamily: string) {} + getDimension(text: string): Dimension { + return { + width: text.length * this.fontSize, + height: this.fontSize, + }; + } +} diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts new file mode 100644 index 0000000000..de43859c7f --- /dev/null +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts @@ -0,0 +1,89 @@ +import { ITextDimensionCalculator, TextDimensionCalculator } from '../TextDimensionCalculator.js'; +import { + XYChartConfig, + XYChartData, + Dimension, + BoundingRect, + DrawableElem, + Point, + OrientationEnum, +} from '../Interfaces.js'; +import { ChartComponent } from './Interfaces.js'; + +export class ChartTitle implements ChartComponent { + private boundingRect: BoundingRect; + private showChartTitle: boolean; + private orientation: OrientationEnum; + constructor( + private textDimensionCalculator: ITextDimensionCalculator, + private chartConfig: XYChartConfig, + private chartData: XYChartData + ) { + this.boundingRect = { + x: 0, + y: 0, + width: 0, + height: 0, + }; + this.showChartTitle = !!(this.chartData.title && this.chartConfig.showChartTitle); + this.orientation = OrientationEnum.VERTICAL; + } + setOrientation(orientation: OrientationEnum): void { + this.orientation = orientation; + } + setBoundingBoxXY(point: Point): void { + this.boundingRect.x = point.x; + this.boundingRect.y = point.y; + } + calculateSpace(availableSpace: Dimension): Dimension { + const titleDimension = this.textDimensionCalculator.getDimension(this.chartData.title); + const widthRequired = Math.max(titleDimension.width, availableSpace.width); + const heightRequired = titleDimension.height + 2 * this.chartConfig.titlePadding; + if ( + titleDimension.width <= widthRequired && + titleDimension.height <= heightRequired && + this.showChartTitle + ) { + this.boundingRect.width = widthRequired; + this.boundingRect.height = heightRequired; + } + + return { + width: this.boundingRect.width, + height: this.boundingRect.height, + }; + } + getDrawableElements(): DrawableElem[] { + const drawableElem: DrawableElem[] = []; + if (this.boundingRect.height > 0 && this.boundingRect.width > 0) { + drawableElem.push({ + groupText: 'chart-title', + type: 'text', + data: [ + { + fontSize: this.chartConfig.titleFontSize, + text: this.chartData.title, + verticalPos: 'center', + horizontalPos: 'middle', + x: this.boundingRect.x + this.boundingRect.width / 2, + y: this.boundingRect.y + this.boundingRect.height / 2, + fill: this.chartConfig.titleFill, + rotation: 0, + }, + ], + }); + } + return drawableElem; + } +} + +export function getChartTitleComponent( + chartConfig: XYChartConfig, + chartData: XYChartData +): ChartComponent { + const textDimensionCalculator = new TextDimensionCalculator( + chartConfig.titleFontSize, + chartConfig.fontFamily + ); + return new ChartTitle(textDimensionCalculator, chartConfig, chartData); +} diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/Interfaces.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/Interfaces.ts new file mode 100644 index 0000000000..d9644d6af6 --- /dev/null +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/Interfaces.ts @@ -0,0 +1,8 @@ +import { Dimension, DrawableElem, OrientationEnum, Point } from '../Interfaces.js'; + +export interface ChartComponent { + setOrientation(orientation: OrientationEnum): void; + calculateSpace(availableSpace: Dimension): Dimension; + setBoundingBoxXY(point: Point): void; + getDrawableElements(): DrawableElem[]; +} diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BandAxis.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BandAxis.ts new file mode 100644 index 0000000000..dd908e2830 --- /dev/null +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BandAxis.ts @@ -0,0 +1,54 @@ +import { ScaleBand, scaleBand } from 'd3'; +import { + Dimension, + Point, + DrawableElem, + BoundingRect, + OrientationEnum, + XYChartConfig, +} from '../../Interfaces.js'; +import { IAxis } from './index.js'; + +export class BandAxis implements IAxis { + private scale: ScaleBand<string>; + private range: [number, number]; + private boundingRect: BoundingRect; + private orientation: OrientationEnum; + private categories: string[]; + + constructor(private chartConfig: XYChartConfig, categories: string[]) { + this.range = [0, 10]; + this.categories = categories; + this.scale = scaleBand().domain(this.categories).range(this.range); + this.boundingRect = { x: 0, y: 0, width: 0, height: 0 }; + this.orientation = OrientationEnum.VERTICAL; + } + + setRange(range: [number, number]): void { + this.range = range; + this.scale = scaleBand().domain(this.categories).range(this.range); + } + setOrientation(orientation: OrientationEnum): void { + this.orientation = orientation; + } + + getScaleValue(value: string): number { + return this.scale(value) || this.range[0]; + } + + calculateSpace(availableSpace: Dimension): Dimension { + return { + width: availableSpace.width, + height: availableSpace.height, + }; + } + + setBoundingBoxXY(point: Point): void { + this.boundingRect.x = point.x; + this.boundingRect.y = point.y; + } + + getDrawableElements(): DrawableElem[] { + return []; + } +} diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/LinearAxis.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/LinearAxis.ts new file mode 100644 index 0000000000..02c0bd6446 --- /dev/null +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/LinearAxis.ts @@ -0,0 +1,55 @@ +import { scaleLinear, ScaleLinear } from 'd3'; +import { + Dimension, + Point, + DrawableElem, + BoundingRect, + OrientationEnum, + XYChartConfig, +} from '../../Interfaces.js'; +import { IAxis } from './index.js'; + +export class LinearAxis implements IAxis { + private scale: ScaleLinear<number, number>; + private boundingRect: BoundingRect; + private orientation: OrientationEnum; + private domain: [number, number]; + private range: [number, number]; + + constructor(private chartConfig: XYChartConfig, domain: [number, number]) { + this.domain = domain; + this.range = [0, 10]; + this.scale = scaleLinear().domain(this.domain).range(this.range); + this.boundingRect = { x: 0, y: 0, width: 0, height: 0 }; + this.orientation = OrientationEnum.VERTICAL; + } + + setRange(range: [number, number]): void { + this.range = range; + this.scale = scaleLinear().domain(this.domain).range(this.range); + } + + setOrientation(orientation: OrientationEnum): void { + this.orientation = orientation; + } + + getScaleValue(value: number): number { + return this.scale(value); + } + + calculateSpace(availableSpace: Dimension): Dimension { + return { + width: availableSpace.width, + height: availableSpace.height, + }; + } + + setBoundingBoxXY(point: Point): void { + this.boundingRect.x = point.x; + this.boundingRect.y = point.y; + } + + getDrawableElements(): DrawableElem[] { + return []; + } +} diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts new file mode 100644 index 0000000000..f7ff5cc69f --- /dev/null +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts @@ -0,0 +1,31 @@ +import { + AxisDataType, + BandAxisDataType, + BoundingRect, + LinearAxisDataType, + XYChartConfig, + XYChartData, +} from '../../Interfaces.js'; +import { ChartComponent } from '../Interfaces.js'; +import { BandAxis } from './BandAxis.js'; +import { LinearAxis } from './LinearAxis.js'; + +export interface IAxis extends ChartComponent { + getScaleValue(value: string | number): number; + setRange(range: [number, number]): void; +} + +function isLinearAxisData(data: any): data is LinearAxisDataType { + return !(Number.isNaN(data.min) || Number.isNaN(data.max)); +} + +function isBandAxisData(data: any): data is BandAxisDataType { + return data.categories && Array.isArray(data.categories); +} + +export function getAxis(data: AxisDataType, chartConfig: XYChartConfig): IAxis { + if (isBandAxisData(data)) { + return new BandAxis(chartConfig, data.categories); + } + return new LinearAxis(chartConfig, [data.min, data.max]); +} diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/LinePlot.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/LinePlot.ts new file mode 100644 index 0000000000..b60fea9056 --- /dev/null +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/LinePlot.ts @@ -0,0 +1,34 @@ +import { line } from 'd3'; +import { DrawableElem, SimplePlotDataType } from '../../Interfaces.js'; +import { IAxis } from '../axis/index.js'; + +export class LinePlot { + constructor(private data: SimplePlotDataType, private xAxis: IAxis, private yAxis: IAxis) {} + + getDrawableElement(): DrawableElem[] { + const finalData: [number, number][] = this.data.map((d) => [ + this.xAxis.getScaleValue(d[0]), + this.yAxis.getScaleValue(d[1]), + ]); + + const path = line() + .x((d) => d[0]) + .y((d) => d[1])(finalData); + if (!path) { + return []; + } + return [ + { + groupText: 'line-plot', + type: 'path', + data: [ + { + path, + strokeFill: '#0000ff', + strokeWidth: 2, + }, + ], + }, + ]; + } +} diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts new file mode 100644 index 0000000000..5af28127dc --- /dev/null +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts @@ -0,0 +1,81 @@ +import { + XYChartConfig, + XYChartData, + Dimension, + BoundingRect, + DrawableElem, + Point, + OrientationEnum, + ChartPlotEnum, +} from '../../Interfaces.js'; +import { IAxis } from '../axis/index.js'; +import { ChartComponent } from './../Interfaces.js'; +import { LinePlot } from './LinePlot.js'; + + +export interface IPlot extends ChartComponent { + setAxes(xAxis: IAxis, yAxis: IAxis): void +} + +export class Plot implements IPlot { + private boundingRect: BoundingRect; + private orientation: OrientationEnum; + private xAxis?: IAxis; + private yAxis?: IAxis; + + constructor( + private chartConfig: XYChartConfig, + private chartData: XYChartData, + ) { + this.boundingRect = { + x: 0, + y: 0, + width: 0, + height: 0, + }; + this.orientation = OrientationEnum.VERTICAL; + } + setAxes(xAxis: IAxis, yAxis: IAxis) { + this.xAxis = xAxis; + this.yAxis = yAxis; + } + setOrientation(orientation: OrientationEnum): void { + this.orientation = orientation; + } + setBoundingBoxXY(point: Point): void { + this.boundingRect.x = point.x; + this.boundingRect.y = point.y; + } + calculateSpace(availableSpace: Dimension): Dimension { + this.boundingRect.width = availableSpace.width; + this.boundingRect.height = availableSpace.height; + + return { + width: this.boundingRect.width, + height: this.boundingRect.height, + }; + } + getDrawableElements(): DrawableElem[] { + if(!(this.xAxis && this.yAxis)) { + throw Error("Axes must be passed to render Plots"); + } + const drawableElem: DrawableElem[] = []; + for(const plot of this.chartData.plots) { + switch(plot.type) { + case ChartPlotEnum.LINE: { + const linePlot = new LinePlot(plot.data, this.xAxis, this.yAxis); + drawableElem.push(...linePlot.getDrawableElement()) + } + break; + } + } + return drawableElem; + } +} + +export function getPlotComponent( + chartConfig: XYChartConfig, + chartData: XYChartData, +): IPlot { + return new Plot(chartConfig, chartData); +} diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts new file mode 100644 index 0000000000..d307b29579 --- /dev/null +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts @@ -0,0 +1,77 @@ +// @ts-ignore: TODO Fix ts errors +import { defaultConfig } from '../../../config.js'; +import { log } from '../../../logger.js'; +import { + ChartPlotEnum, + DrawableElem, + XYChartConfig, + XYChartData, + OrientationEnum, + XYChartYAxisPosition, +} from './Interfaces.js'; +import { Orchestrator } from './Orchestrator.js'; + +export class XYChartBuilder { + private config: XYChartConfig; + private chartData: XYChartData; + + constructor() { + this.config = { + width: 500, + height: 500, + fontFamily: defaultConfig.fontFamily || 'Sans', + titleFontSize: 16, + titleFill: '#000000', + titlePadding: 5, + xAxisFontSize: 14, + xAxisTitleFontSize: 16, + yAxisFontSize: 14, + yAxisTitleFontSize: 16, + yAxisPosition: XYChartYAxisPosition.LEFT, + showChartTitle: true, + showXAxisLable: true, + showXAxisTitle: true, + showYAxisLabel: true, + showYAxisTitle: true, + chartOrientation: OrientationEnum.HORIZONTAL, + plotReservedSpacePercent: 50, + }; + this.chartData = { + yAxis: { + title: 'yAxis1', + min: 0, + max: 100, + }, + xAxis: { + title: 'xAxis', + categories: ['category1', 'category2', 'category3'], + }, + title: 'this is a sample task', + plots: [ + { + type: ChartPlotEnum.LINE, + data: [ + ['category1', 33], + ['category2', 45], + ['category3', 65], + ], + }, + ], + }; + } + + setWidth(width: number) { + this.config.width = width; + } + + setHeight(height: number) { + this.config.height = height; + } + + build(): DrawableElem[] { + log.trace(`Build start with Config: ${JSON.stringify(this.config, null, 2)}`); + log.trace(`Build start with ChartData: ${JSON.stringify(this.chartData, null, 2)}`); + const orchestrator = new Orchestrator(this.config, this.chartData); + return orchestrator.getDrawableElement(); + } +} diff --git a/packages/mermaid/src/diagrams/xychart/xychartBuilder.ts b/packages/mermaid/src/diagrams/xychart/xychartBuilder.ts deleted file mode 100644 index b4bbdc31eb..0000000000 --- a/packages/mermaid/src/diagrams/xychart/xychartBuilder.ts +++ /dev/null @@ -1,5 +0,0 @@ -// @ts-ignore: TODO Fix ts errors -import { scaleLinear } from 'd3'; -import { log } from '../../logger.js'; - -export class XYChartBuilder {} diff --git a/packages/mermaid/src/diagrams/xychart/xychartDb.ts b/packages/mermaid/src/diagrams/xychart/xychartDb.ts index 968d1390da..dcf66b1b26 100644 --- a/packages/mermaid/src/diagrams/xychart/xychartDb.ts +++ b/packages/mermaid/src/diagrams/xychart/xychartDb.ts @@ -11,6 +11,8 @@ import { setAccDescription, clear as commonClear, } from '../../commonDb.js'; +import { XYChartBuilder } from './chartBuilder/index.js'; +import { DrawableElem } from './chartBuilder/Interfaces.js'; const config = configApi.getConfig(); @@ -18,16 +20,33 @@ function textSanitizer(text: string) { return sanitizeText(text.trim(), config); } -export const parseDirective = function (statement: string, context: string, type: string) { +function parseDirective(statement: string, context: string, type: string) { // @ts-ignore: TODO Fix ts errors mermaidAPI.parseDirective(this, statement, context, type); }; +const xyChartBuilder = new XYChartBuilder(); + +function getDrawableElem(): DrawableElem[] { + return xyChartBuilder.build(); +} + +function setHeight(height: number) { + xyChartBuilder.setHeight(height); +} + +function setWidth(width: number) { + xyChartBuilder.setWidth(width); +} + const clear = function () { commonClear(); }; export default { + setWidth, + setHeight, + getDrawableElem, parseDirective, clear, setAccTitle, diff --git a/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts b/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts index a4caacf524..ee696377ea 100644 --- a/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts +++ b/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts @@ -1,11 +1,27 @@ -// @ts-ignore: TODO Fix ts errors -import { select } from 'd3'; +import { select, scaleOrdinal, scaleLinear, axisBottom, line } from 'd3'; import * as configApi from '../../config.js'; import { log } from '../../logger.js'; import { configureSvgSize } from '../../setupGraphViewbox.js'; import { Diagram } from '../../Diagram.js'; +import { + DrawableElem, + TextElem, + TextHorizontalPos, + TextVerticalPos, +} from './chartBuilder/Interfaces.js'; export const draw = (txt: string, id: string, _version: string, diagObj: Diagram) => { + function getDominantBaseLine(horizontalPos: TextHorizontalPos) { + return horizontalPos === 'top' ? 'hanging' : 'middle'; + } + + function getTextAnchor(verticalPos: TextVerticalPos) { + return verticalPos === 'left' ? 'start' : 'middle'; + } + + function getTextTransformation(data: TextElem) { + return `translate(${data.x}, ${data.y}) rotate(${data.rotation || 0})`; + } const conf = configApi.getConfig(); log.debug('Rendering xychart chart\n' + txt); @@ -17,8 +33,8 @@ export const draw = (txt: string, id: string, _version: string, diagObj: Diagram sandboxElement = select('#i' + id); } const root = - securityLevel === 'sandbox' - ? select(sandboxElement.nodes()[0].contentDocument.body) + sandboxElement + ? sandboxElement : select('body'); const svg = root.select(`[id="${id}"]`); @@ -28,9 +44,80 @@ export const draw = (txt: string, id: string, _version: string, diagObj: Diagram const width = 500; const height = 500; + // @ts-ignore: TODO Fix ts errors configureSvgSize(svg, height, width, true); svg.attr('viewBox', '0 0 ' + width + ' ' + height); + + // @ts-ignore: TODO Fix ts errors + diagObj.db.setHeight(height); + // @ts-ignore: TODO Fix ts errors + diagObj.db.setWidth(width); + + // @ts-ignore: TODO Fix ts errors + const shapes: DrawableElem[] = diagObj.db.getDrawableElem(); + + for (const shape of shapes) { + if (shape.data.length === 0) { + log.trace( + `Skipped drawing of shape of type: ${shape.type} with data: ${JSON.stringify( + shape.data, + null, + 2 + )}` + ); + continue; + } + log.trace( + `Drawing shape of type: ${shape.type} with data: ${JSON.stringify(shape.data, null, 2)}` + ); + + const shapeGroup = group.append('g').attr('class', shape.groupText); + + + switch (shape.type) { + case 'rect': + shapeGroup + .selectAll('rect') + .data(shape.data) + .enter() + .append('rect') + .attr('x', data => data.x) + .attr('y', data => data.y) + .attr('width', data => data.width) + .attr('height', data => data.height) + .attr('fill', data => data.fill) + .attr('stroke', data => data.strokeFill) + .attr('stroke-width', data => data.strokeWidth); + break; + case 'text': + shapeGroup + .selectAll('text') + .data(shape.data) + .enter() + .append('text') + .attr('x', 0) + .attr('y', 0) + .attr('fill', data => data.fill) + .attr('font-size', data => data.fontSize) + .attr('dominant-baseline', data => getDominantBaseLine(data.horizontalPos)) + .attr('text-anchor', data => getTextAnchor(data.verticalPos)) + .attr('transform', data => getTextTransformation(data)) + .text(data => data.text); + break; + case 'path': + shapeGroup + .selectAll('path') + .data(shape.data) + .enter() + .append('path') + .attr('d', data => data.path) + .attr('fill', data => data.fill? data.fill: "none") + .attr('stroke', data => data.strokeFill) + .attr('stroke-width', data => data.strokeWidth) + break; + } + } }; export default { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f258400a6e..1cb943a0c8 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -264,9 +264,15 @@ importers: '@types/d3-sankey': specifier: ^0.12.1 version: 0.12.1 + '@types/d3-scale': + specifier: ^4.0.2 + version: 4.0.2 '@types/d3-selection': - specifier: ^3.0.5 - version: 3.0.5 + specifier: ^3.0.3 + version: 3.0.3 + '@types/d3-shape': + specifier: ^3.1.0 + version: 3.1.0 '@types/dompurify': specifier: ^3.0.2 version: 3.0.2 @@ -472,6 +478,58 @@ importers: specifier: ^7.0.0 version: 7.0.0 + 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.75 + version: 1.0.0-alpha.75(@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': From 183bc0a9783e752779c9c8427d4b7f88b8324aac Mon Sep 17 00:00:00 2001 From: Subhash Halder <halder.subhash@gmail.com> Date: Sat, 10 Jun 2023 17:02:55 +0530 Subject: [PATCH 006/457] Rendered axis with basic line chart --- .../xychart/chartBuilder/Interfaces.ts | 24 +- .../xychart/chartBuilder/Orchestrator.ts | 63 +++-- .../chartBuilder/TextDimensionCalculator.ts | 10 +- .../chartBuilder/components/ChartTitle.ts | 9 +- .../chartBuilder/components/Interfaces.ts | 1 - .../chartBuilder/components/axis/BandAxis.ts | 63 +++-- .../chartBuilder/components/axis/BaseAxis.ts | 217 ++++++++++++++++++ .../components/axis/LinearAxis.ts | 62 ++--- .../chartBuilder/components/axis/index.ts | 21 +- .../diagrams/xychart/chartBuilder/index.ts | 44 ++-- .../src/diagrams/xychart/xychartRenderer.ts | 56 +++-- 11 files changed, 396 insertions(+), 174 deletions(-) create mode 100644 packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts index 767a982627..569a5d11c3 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts @@ -31,6 +31,17 @@ export type VisibilityOption = { yAxisLabel: boolean; }; +export interface AxisConfig { + showLabel: boolean; + labelFontSize: number; + lablePadding: number; + labelColor: string; + showTitle: boolean; + titleFontSize: number; + titlePadding: number; + titleColor: string; +} + export interface XYChartConfig { width: number; height: number; @@ -38,16 +49,9 @@ export interface XYChartConfig { titleFontSize: number; titleFill: string; titlePadding: number; - xAxisFontSize: number; - xAxisTitleFontSize: number; - yAxisFontSize: number; - yAxisTitleFontSize: number; - yAxisPosition: XYChartYAxisPosition; - showChartTitle: boolean; - showXAxisLable: boolean; - showXAxisTitle: boolean; - showYAxisLabel: boolean; - showYAxisTitle: boolean; + showtitle: boolean; + xAxis: AxisConfig; + yAxis: AxisConfig; chartOrientation: OrientationEnum; plotReservedSpacePercent: number; } diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts index d597569215..fdd60d6342 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts @@ -1,22 +1,23 @@ +import { log } from '../../../logger.js'; import { DrawableElem, XYChartConfig, XYChartData } from './Interfaces.js'; import { getChartTitleComponent } from './components/ChartTitle.js'; import { ChartComponent } from './components/Interfaces.js'; import { IAxis, getAxis } from './components/axis/index.js'; -import { IPlot, getPlotComponent, isTypeIPlot } from './components/plot/index.js'; +import { IPlot, getPlotComponent } from './components/plot/index.js'; export class Orchestrator { private componentStore: { - title: ChartComponent, - plot: IPlot, - xAxis: IAxis, - yAxis: IAxis, + title: ChartComponent; + plot: IPlot; + xAxis: IAxis; + yAxis: IAxis; }; constructor(private chartConfig: XYChartConfig, chartData: XYChartData) { this.componentStore = { title: getChartTitleComponent(chartConfig, chartData), plot: getPlotComponent(chartConfig, chartData), - xAxis: getAxis(chartData.xAxis, chartConfig), - yAxis: getAxis(chartData.yAxis, chartConfig), + xAxis: getAxis(chartData.xAxis, chartConfig.xAxis), + yAxis: getAxis(chartData.yAxis, chartConfig.yAxis), }; } @@ -25,9 +26,10 @@ export class Orchestrator { let availableHeight = this.chartConfig.height; let chartX = 0; let chartY = 0; - const chartWidth = Math.floor((availableWidth * this.chartConfig.plotReservedSpacePercent) / 100); - const chartHeight = Math.floor((availableHeight * this.chartConfig.plotReservedSpacePercent) / 100); - + let chartWidth = Math.floor((availableWidth * this.chartConfig.plotReservedSpacePercent) / 100); + let chartHeight = Math.floor( + (availableHeight * this.chartConfig.plotReservedSpacePercent) / 100 + ); let spaceUsed = this.componentStore.plot.calculateSpace({ width: chartWidth, height: chartHeight, @@ -39,19 +41,42 @@ export class Orchestrator { width: this.chartConfig.width, height: availableHeight, }); + log.trace('space used by title: ', spaceUsed); chartY = spaceUsed.height; - availableWidth -= spaceUsed.width; availableHeight -= spaceUsed.height; - // - // spaceUsed = this.componentStore.xAxis.calculateSpace({ - // width: availableWidth, - // height: availableHeight, - // }); - // availableWidth -= spaceUsed.width; - // availableHeight -= spaceUsed.height; - this.componentStore.plot.setBoundingBoxXY({x: chartX, y: chartY}); + this.componentStore.xAxis.setAxisPosition('bottom'); + spaceUsed = this.componentStore.xAxis.calculateSpace({ + width: availableWidth, + height: availableHeight, + }); + log.trace('space used by xaxis: ', spaceUsed); + availableHeight -= spaceUsed.height; + this.componentStore.yAxis.setAxisPosition('left'); + spaceUsed = this.componentStore.yAxis.calculateSpace({ + width: availableWidth, + height: availableHeight, + }); + log.trace('space used by yaxis: ', spaceUsed); + chartX = spaceUsed.width; + availableWidth -= spaceUsed.width; + if (availableWidth > 0) { + chartWidth += availableWidth; + availableWidth = 0; + } + if (availableHeight > 0) { + chartHeight += availableHeight; + availableHeight = 0; + } + + log.trace( + `Final chart dimansion: x = ${chartX}, y = ${chartY}, width = ${chartWidth}, height = ${chartHeight}` + ); + + this.componentStore.plot.setBoundingBoxXY({ x: chartX, y: chartY }); this.componentStore.xAxis.setRange([chartX, chartX + chartWidth]); + this.componentStore.xAxis.setBoundingBoxXY({ x: chartX, y: chartY + chartHeight }); this.componentStore.yAxis.setRange([chartY, chartY + chartHeight]); + this.componentStore.yAxis.setBoundingBoxXY({ x: 0, y: chartY }); } getDrawableElement() { diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/TextDimensionCalculator.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/TextDimensionCalculator.ts index e83badc353..c7a252609d 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/TextDimensionCalculator.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/TextDimensionCalculator.ts @@ -1,15 +1,15 @@ import { Dimension } from './Interfaces.js'; export interface ITextDimensionCalculator { - getDimension(text: string): Dimension; + getDimension(texts: string[], fontSize: number, fontFamily?: string ): Dimension; } export class TextDimensionCalculator implements ITextDimensionCalculator { - constructor(private fontSize: number, private fontFamily: string) {} - getDimension(text: string): Dimension { + constructor() {} + getDimension(texts: string[], fontSize: number): Dimension { return { - width: text.length * this.fontSize, - height: this.fontSize, + width: texts.reduce((acc, cur) => Math.max(cur.length, acc), 0) * fontSize, + height: fontSize, }; } } diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts index de43859c7f..51e27b0cd3 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts @@ -25,7 +25,7 @@ export class ChartTitle implements ChartComponent { width: 0, height: 0, }; - this.showChartTitle = !!(this.chartData.title && this.chartConfig.showChartTitle); + this.showChartTitle = !!(this.chartData.title && this.chartConfig.showtitle); this.orientation = OrientationEnum.VERTICAL; } setOrientation(orientation: OrientationEnum): void { @@ -36,7 +36,7 @@ export class ChartTitle implements ChartComponent { this.boundingRect.y = point.y; } calculateSpace(availableSpace: Dimension): Dimension { - const titleDimension = this.textDimensionCalculator.getDimension(this.chartData.title); + const titleDimension = this.textDimensionCalculator.getDimension([this.chartData.title], this.chartConfig.titleFontSize); const widthRequired = Math.max(titleDimension.width, availableSpace.width); const heightRequired = titleDimension.height + 2 * this.chartConfig.titlePadding; if ( @@ -81,9 +81,6 @@ export function getChartTitleComponent( chartConfig: XYChartConfig, chartData: XYChartData ): ChartComponent { - const textDimensionCalculator = new TextDimensionCalculator( - chartConfig.titleFontSize, - chartConfig.fontFamily - ); + const textDimensionCalculator = new TextDimensionCalculator(); return new ChartTitle(textDimensionCalculator, chartConfig, chartData); } diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/Interfaces.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/Interfaces.ts index d9644d6af6..92f27986be 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/Interfaces.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/Interfaces.ts @@ -1,7 +1,6 @@ import { Dimension, DrawableElem, OrientationEnum, Point } from '../Interfaces.js'; export interface ChartComponent { - setOrientation(orientation: OrientationEnum): void; calculateSpace(availableSpace: Dimension): Dimension; setBoundingBoxXY(point: Point): void; getDrawableElements(): DrawableElem[]; diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BandAxis.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BandAxis.ts index dd908e2830..75a9ab643d 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BandAxis.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BandAxis.ts @@ -1,54 +1,43 @@ import { ScaleBand, scaleBand } from 'd3'; -import { - Dimension, - Point, - DrawableElem, - BoundingRect, - OrientationEnum, - XYChartConfig, -} from '../../Interfaces.js'; -import { IAxis } from './index.js'; +import { AxisConfig } from '../../Interfaces.js'; +import { ITextDimensionCalculator } from '../../TextDimensionCalculator.js'; +import { BaseAxis } from './BaseAxis.js'; +import { log } from '../../../../../logger.js'; -export class BandAxis implements IAxis { +export class BandAxis extends BaseAxis { private scale: ScaleBand<string>; - private range: [number, number]; - private boundingRect: BoundingRect; - private orientation: OrientationEnum; private categories: string[]; - constructor(private chartConfig: XYChartConfig, categories: string[]) { - this.range = [0, 10]; + constructor( + axisConfig: AxisConfig, + categories: string[], + title: string, + textDimensionCalculator: ITextDimensionCalculator + ) { + super(axisConfig, title, textDimensionCalculator); this.categories = categories; - this.scale = scaleBand().domain(this.categories).range(this.range); - this.boundingRect = { x: 0, y: 0, width: 0, height: 0 }; - this.orientation = OrientationEnum.VERTICAL; + this.scale = scaleBand().domain(this.categories).range(this.getRange()); } setRange(range: [number, number]): void { - this.range = range; - this.scale = scaleBand().domain(this.categories).range(this.range); - } - setOrientation(orientation: OrientationEnum): void { - this.orientation = orientation; + super.setRange(range); } - getScaleValue(value: string): number { - return this.scale(value) || this.range[0]; + recalculateScale(): void { + this.scale = scaleBand() + .domain(this.categories) + .range(this.getRange()) + .paddingInner(1) + .paddingOuter(0) + .align(0.5); + log.trace('BandAxis axis final categories, range: ', this.categories, this.getRange()); } - calculateSpace(availableSpace: Dimension): Dimension { - return { - width: availableSpace.width, - height: availableSpace.height, - }; + getTickValues(): (string | number)[] { + return this.categories; } - setBoundingBoxXY(point: Point): void { - this.boundingRect.x = point.x; - this.boundingRect.y = point.y; - } - - getDrawableElements(): DrawableElem[] { - return []; + getScaleValue(value: string): number { + return this.scale(value) || this.getRange()[0]; } } diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts new file mode 100644 index 0000000000..14107da521 --- /dev/null +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts @@ -0,0 +1,217 @@ +import { + Dimension, + Point, + DrawableElem, + BoundingRect, + AxisConfig, +} from '../../Interfaces.js'; +import { AxisPosition, IAxis } from './index.js'; +import { ITextDimensionCalculator } from '../../TextDimensionCalculator.js'; +import { log } from '../../../../../logger.js'; + +export abstract class BaseAxis implements IAxis { + protected boundingRect: BoundingRect = {x: 0, y: 0, width: 0, height: 0}; + protected axisPosition: AxisPosition = 'left'; + private range: [number, number]; + protected showTitle = false; + protected showLabel = false; + protected innerPadding = 0; + + constructor( + protected axisConfig: AxisConfig, + protected title: string, + protected textDimensionCalculator: ITextDimensionCalculator + ) { + this.range = [0, 10]; + this.boundingRect = { x: 0, y: 0, width: 0, height: 0 }; + this.axisPosition = 'left'; + + } + + setRange(range: [number, number]): void { + this.range = range; + this.recalculateScale(); + } + + getRange(): [number, number] { + return [this.range[0] + this.innerPadding, this.range[1] - this.innerPadding]; + } + + setAxisPosition(axisPosition: AxisPosition): void { + this.axisPosition = axisPosition; + } + + abstract getScaleValue(value: number | string): number; + + abstract recalculateScale(): void; + + abstract getTickValues(): Array<string | number>; + + private getLabelDimension(): Dimension { + return this.textDimensionCalculator.getDimension( + this.getTickValues().map((tick) => tick.toString()), + this.axisConfig.labelFontSize + ); + } + + private calculateSpaceIfDrawnVertical(availableSpace: Dimension) { + let availableHeight = availableSpace.height; + if (this.axisConfig.showLabel) { + const spaceRequired = this.getLabelDimension(); + this.innerPadding = spaceRequired.width / 2; + const heightRequired = spaceRequired.height + this.axisConfig.lablePadding * 2; + log.trace('height required for axis label: ', heightRequired); + if (heightRequired <= availableHeight) { + availableHeight -= heightRequired; + this.showLabel = true; + } + } + if (this.axisConfig.showTitle) { + const spaceRequired = this.textDimensionCalculator.getDimension( + [this.title], + this.axisConfig.labelFontSize + ); + const heightRequired = spaceRequired.height + this.axisConfig.titlePadding * 2; + log.trace('height required for axis title: ', heightRequired); + if (heightRequired <= availableHeight) { + availableHeight -= heightRequired; + this.showTitle = true; + } + } + this.boundingRect.width = availableSpace.width; + this.boundingRect.height = availableSpace.height - availableHeight; + } + + private calculateSpaceIfDrawnHorizontally(availableSpace: Dimension) { + let availableWidth = availableSpace.width; + if (this.axisConfig.showLabel) { + const spaceRequired = this.getLabelDimension(); + this.innerPadding = spaceRequired.width / 2; + const widthRequired = spaceRequired.width + this.axisConfig.lablePadding * 2; + log.trace('width required for axis label: ', widthRequired); + if (widthRequired <= availableWidth) { + availableWidth -= widthRequired; + this.showLabel = true; + } + } + if (this.axisConfig.showTitle) { + const spaceRequired = this.textDimensionCalculator.getDimension( + [this.title], + this.axisConfig.labelFontSize + ); + const widthRequired = spaceRequired.height + this.axisConfig.lablePadding * 2; + log.trace('width required for axis title: ', widthRequired); + if (widthRequired <= availableWidth) { + availableWidth -= widthRequired; + this.showTitle = true; + } + } + this.boundingRect.width = availableSpace.width - availableWidth; + this.boundingRect.height = availableSpace.height; + } + + calculateSpace(availableSpace: Dimension): Dimension { + if (!(this.axisConfig.showLabel || this.axisConfig.showTitle)) { + this.recalculateScale(); + return { width: 0, height: 0 }; + } + if (this.axisPosition === 'left') { + this.calculateSpaceIfDrawnHorizontally(availableSpace); + } else { + this.calculateSpaceIfDrawnVertical(availableSpace); + } + this.recalculateScale(); + return { + width: this.boundingRect.width, + height: this.boundingRect.height, + }; + } + + setBoundingBoxXY(point: Point): void { + this.boundingRect.x = point.x; + this.boundingRect.y = point.y; + } + + private getDrawaableElementsForLeftAxis(): DrawableElem[] { + const drawableElement: DrawableElem[] = []; + if (this.showLabel) { + drawableElement.push({ + type: 'text', + groupText: 'left-axis-label', + data: this.getTickValues().map((tick) => ({ + text: tick.toString(), + x: this.boundingRect.x + this.boundingRect.width - this.axisConfig.lablePadding, + y: this.getScaleValue(tick), + fill: this.axisConfig.labelColor, + fontSize: this.axisConfig.labelFontSize, + rotation: 0, + verticalPos: 'right', + horizontalPos: 'middle', + })), + }); + } + if (this.showTitle) { + drawableElement.push({ + type: 'text', + groupText: 'right-axis-label', + data: [{ + text: this.title, + x: this.boundingRect.x + this.axisConfig.titlePadding, + y: this.range[0] + (this.range[1] - this.range[0])/2, + fill: this.axisConfig.titleColor, + fontSize: this.axisConfig.titleFontSize, + rotation: 270, + verticalPos: 'center', + horizontalPos: 'top', + }] + }) + } + return drawableElement; + } + private getDrawaableElementsForBottomAxis(): DrawableElem[] { + const drawableElement: DrawableElem[] = []; + if (this.showLabel) { + drawableElement.push({ + type: 'text', + groupText: 'right-axis-lable', + data: this.getTickValues().map((tick) => ({ + text: tick.toString(), + x: this.getScaleValue(tick), + y: this.boundingRect.y + this.axisConfig.lablePadding, + fill: this.axisConfig.labelColor, + fontSize: this.axisConfig.labelFontSize, + rotation: 0, + verticalPos: 'center', + horizontalPos: 'top', + })), + }); + } + if (this.showTitle) { + drawableElement.push({ + type: 'text', + groupText: 'right-axis-label', + data: [{ + text: this.title, + x: this.range[0] + (this.range[1] - this.range[0])/2, + y: this.boundingRect.y + this.boundingRect.height - this.axisConfig.titlePadding, + fill: this.axisConfig.titleColor, + fontSize: this.axisConfig.titleFontSize, + rotation: 0, + verticalPos: 'center', + horizontalPos: 'bottom', + }] + }) + } + return drawableElement; + } + + getDrawableElements(): DrawableElem[] { + if (this.axisPosition === 'left') { + return this.getDrawaableElementsForLeftAxis(); + } + if (this.axisPosition === 'bottom') { + return this.getDrawaableElementsForBottomAxis(); + } + return []; + } +} diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/LinearAxis.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/LinearAxis.ts index 02c0bd6446..9bf7c33b06 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/LinearAxis.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/LinearAxis.ts @@ -1,55 +1,37 @@ -import { scaleLinear, ScaleLinear } from 'd3'; -import { - Dimension, - Point, - DrawableElem, - BoundingRect, - OrientationEnum, - XYChartConfig, -} from '../../Interfaces.js'; -import { IAxis } from './index.js'; +import { ScaleLinear, scaleLinear } from 'd3'; +import { AxisConfig, Dimension } from '../../Interfaces.js'; +import { ITextDimensionCalculator } from '../../TextDimensionCalculator.js'; +import { BaseAxis } from './BaseAxis.js'; +import { log } from '../../../../../logger.js'; -export class LinearAxis implements IAxis { +export class LinearAxis extends BaseAxis { private scale: ScaleLinear<number, number>; - private boundingRect: BoundingRect; - private orientation: OrientationEnum; private domain: [number, number]; - private range: [number, number]; - constructor(private chartConfig: XYChartConfig, domain: [number, number]) { + constructor( + axisConfig: AxisConfig, + domain: [number, number], + title: string, + textDimensionCalculator: ITextDimensionCalculator + ) { + super(axisConfig, title, textDimensionCalculator); this.domain = domain; - this.range = [0, 10]; - this.scale = scaleLinear().domain(this.domain).range(this.range); - this.boundingRect = { x: 0, y: 0, width: 0, height: 0 }; - this.orientation = OrientationEnum.VERTICAL; + this.scale = scaleLinear().domain(this.domain).range(this.getRange()); } - setRange(range: [number, number]): void { - this.range = range; - this.scale = scaleLinear().domain(this.domain).range(this.range); + getTickValues(): (string | number)[] { + return this.scale.ticks(); } - setOrientation(orientation: OrientationEnum): void { - this.orientation = orientation; + recalculateScale(): void { + if (this.axisPosition === 'left') { + this.domain.reverse(); // since yaxis in svg start from top + } + this.scale = scaleLinear().domain(this.domain).range(this.getRange()); + log.trace('Linear axis final domain, range: ', this.domain, this.getRange()); } getScaleValue(value: number): number { return this.scale(value); } - - calculateSpace(availableSpace: Dimension): Dimension { - return { - width: availableSpace.width, - height: availableSpace.height, - }; - } - - setBoundingBoxXY(point: Point): void { - this.boundingRect.x = point.x; - this.boundingRect.y = point.y; - } - - getDrawableElements(): DrawableElem[] { - return []; - } } diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts index f7ff5cc69f..1972ef2c59 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts @@ -1,17 +1,19 @@ import { - AxisDataType, - BandAxisDataType, - BoundingRect, - LinearAxisDataType, - XYChartConfig, - XYChartData, + AxisConfig, + AxisDataType, + BandAxisDataType, + LinearAxisDataType } from '../../Interfaces.js'; +import { TextDimensionCalculator } from '../../TextDimensionCalculator.js'; import { ChartComponent } from '../Interfaces.js'; import { BandAxis } from './BandAxis.js'; import { LinearAxis } from './LinearAxis.js'; +export type AxisPosition = 'left' | 'bottom'; + export interface IAxis extends ChartComponent { getScaleValue(value: string | number): number; + setAxisPosition(axisPosition: AxisPosition): void; setRange(range: [number, number]): void; } @@ -23,9 +25,10 @@ function isBandAxisData(data: any): data is BandAxisDataType { return data.categories && Array.isArray(data.categories); } -export function getAxis(data: AxisDataType, chartConfig: XYChartConfig): IAxis { +export function getAxis(data: AxisDataType, axisConfig: AxisConfig): IAxis { + const textDimansionCalculator = new TextDimensionCalculator(); if (isBandAxisData(data)) { - return new BandAxis(chartConfig, data.categories); + return new BandAxis(axisConfig, data.categories, data.title, textDimansionCalculator); } - return new LinearAxis(chartConfig, [data.min, data.max]); + return new LinearAxis(axisConfig, [data.min, data.max], data.title, textDimansionCalculator); } diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts index d307b29579..a47074e738 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts @@ -2,12 +2,11 @@ import { defaultConfig } from '../../../config.js'; import { log } from '../../../logger.js'; import { - ChartPlotEnum, - DrawableElem, - XYChartConfig, - XYChartData, - OrientationEnum, - XYChartYAxisPosition, + ChartPlotEnum, + DrawableElem, + OrientationEnum, + XYChartConfig, + XYChartData } from './Interfaces.js'; import { Orchestrator } from './Orchestrator.js'; @@ -17,22 +16,33 @@ export class XYChartBuilder { constructor() { this.config = { - width: 500, + width: 700, height: 500, fontFamily: defaultConfig.fontFamily || 'Sans', titleFontSize: 16, titleFill: '#000000', titlePadding: 5, - xAxisFontSize: 14, - xAxisTitleFontSize: 16, - yAxisFontSize: 14, - yAxisTitleFontSize: 16, - yAxisPosition: XYChartYAxisPosition.LEFT, - showChartTitle: true, - showXAxisLable: true, - showXAxisTitle: true, - showYAxisLabel: true, - showYAxisTitle: true, + showtitle: true, + yAxis: { + showLabel: true, + labelFontSize: 14, + lablePadding: 5, + labelColor: '#000000', + showTitle: true, + titleFontSize: 16, + titlePadding: 5, + titleColor: '#000000', + }, + xAxis: { + showLabel: true, + labelFontSize: 14, + lablePadding: 5, + labelColor: '#000000', + showTitle: true, + titleFontSize: 16, + titlePadding: 5, + titleColor: '#000000', + }, chartOrientation: OrientationEnum.HORIZONTAL, plotReservedSpacePercent: 50, }; diff --git a/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts b/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts index ee696377ea..a871177ce3 100644 --- a/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts +++ b/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts @@ -1,13 +1,13 @@ -import { select, scaleOrdinal, scaleLinear, axisBottom, line } from 'd3'; +import { select } from 'd3'; +import { Diagram } from '../../Diagram.js'; import * as configApi from '../../config.js'; import { log } from '../../logger.js'; import { configureSvgSize } from '../../setupGraphViewbox.js'; -import { Diagram } from '../../Diagram.js'; import { - DrawableElem, - TextElem, - TextHorizontalPos, - TextVerticalPos, + DrawableElem, + TextElem, + TextHorizontalPos, + TextVerticalPos, } from './chartBuilder/Interfaces.js'; export const draw = (txt: string, id: string, _version: string, diagObj: Diagram) => { @@ -16,7 +16,7 @@ export const draw = (txt: string, id: string, _version: string, diagObj: Diagram } function getTextAnchor(verticalPos: TextVerticalPos) { - return verticalPos === 'left' ? 'start' : 'middle'; + return verticalPos === 'left' ? 'start' : verticalPos === 'right' ? 'end' : 'middle'; } function getTextTransformation(data: TextElem) { @@ -32,16 +32,13 @@ export const draw = (txt: string, id: string, _version: string, diagObj: Diagram if (securityLevel === 'sandbox') { sandboxElement = select('#i' + id); } - const root = - sandboxElement - ? sandboxElement - : select('body'); + const root = sandboxElement ? sandboxElement : select('body'); const svg = root.select(`[id="${id}"]`); const group = svg.append('g').attr('class', 'main'); - const width = 500; + const width = 700; const height = 500; // @ts-ignore: TODO Fix ts errors @@ -74,7 +71,6 @@ export const draw = (txt: string, id: string, _version: string, diagObj: Diagram const shapeGroup = group.append('g').attr('class', shape.groupText); - switch (shape.type) { case 'rect': shapeGroup @@ -82,13 +78,13 @@ export const draw = (txt: string, id: string, _version: string, diagObj: Diagram .data(shape.data) .enter() .append('rect') - .attr('x', data => data.x) - .attr('y', data => data.y) - .attr('width', data => data.width) - .attr('height', data => data.height) - .attr('fill', data => data.fill) - .attr('stroke', data => data.strokeFill) - .attr('stroke-width', data => data.strokeWidth); + .attr('x', (data) => data.x) + .attr('y', (data) => data.y) + .attr('width', (data) => data.width) + .attr('height', (data) => data.height) + .attr('fill', (data) => data.fill) + .attr('stroke', (data) => data.strokeFill) + .attr('stroke-width', (data) => data.strokeWidth); break; case 'text': shapeGroup @@ -98,12 +94,12 @@ export const draw = (txt: string, id: string, _version: string, diagObj: Diagram .append('text') .attr('x', 0) .attr('y', 0) - .attr('fill', data => data.fill) - .attr('font-size', data => data.fontSize) - .attr('dominant-baseline', data => getDominantBaseLine(data.horizontalPos)) - .attr('text-anchor', data => getTextAnchor(data.verticalPos)) - .attr('transform', data => getTextTransformation(data)) - .text(data => data.text); + .attr('fill', (data) => data.fill) + .attr('font-size', (data) => data.fontSize) + .attr('dominant-baseline', (data) => getDominantBaseLine(data.horizontalPos)) + .attr('text-anchor', (data) => getTextAnchor(data.verticalPos)) + .attr('transform', (data) => getTextTransformation(data)) + .text((data) => data.text); break; case 'path': shapeGroup @@ -111,10 +107,10 @@ export const draw = (txt: string, id: string, _version: string, diagObj: Diagram .data(shape.data) .enter() .append('path') - .attr('d', data => data.path) - .attr('fill', data => data.fill? data.fill: "none") - .attr('stroke', data => data.strokeFill) - .attr('stroke-width', data => data.strokeWidth) + .attr('d', (data) => data.path) + .attr('fill', (data) => (data.fill ? data.fill : 'none')) + .attr('stroke', (data) => data.strokeFill) + .attr('stroke-width', (data) => data.strokeWidth); break; } } From cc1d6af23208219647c1c9769ee71ed73751026c Mon Sep 17 00:00:00 2001 From: Subhash Halder <halder.subhash@gmail.com> Date: Sat, 10 Jun 2023 22:37:23 +0530 Subject: [PATCH 007/457] Added axis tick and plot border --- .../xychart/chartBuilder/Interfaces.ts | 15 ++- .../xychart/chartBuilder/Orchestrator.ts | 9 ++ .../chartBuilder/components/ChartTitle.ts | 2 +- .../chartBuilder/components/axis/BaseAxis.ts | 120 +++++++++++------- .../components/axis/LinearAxis.ts | 9 +- .../chartBuilder/components/plot/LinePlot.ts | 2 +- .../components/plot/PlotBorder.ts | 21 +++ .../chartBuilder/components/plot/index.ts | 5 +- .../diagrams/xychart/chartBuilder/index.ts | 17 ++- .../src/diagrams/xychart/xychartRenderer.ts | 31 ++++- 10 files changed, 166 insertions(+), 65 deletions(-) create mode 100644 packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/PlotBorder.ts diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts index 569a5d11c3..51350ca258 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts @@ -35,11 +35,15 @@ export interface AxisConfig { showLabel: boolean; labelFontSize: number; lablePadding: number; - labelColor: string; + labelFill: string; showTitle: boolean; titleFontSize: number; titlePadding: number; - titleColor: string; + titleFill: string; + showTick: boolean; + tickLength: number; + tickWidth: number; + tickFill: string; } export interface XYChartConfig { @@ -52,6 +56,7 @@ export interface XYChartConfig { showtitle: boolean; xAxis: AxisConfig; yAxis: AxisConfig; + plotBorderWidth: number; chartOrientation: OrientationEnum; plotReservedSpacePercent: number; } @@ -139,17 +144,17 @@ export interface PathElem { export type DrawableElem = | { - groupText: string; + groupTexts: string[]; type: 'rect'; data: RectElem[]; } | { - groupText: string; + groupTexts: string[]; type: 'text'; data: TextElem[]; } | { - groupText: string; + groupTexts: string[]; type: 'path'; data: PathElem[]; }; diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts index fdd60d6342..dce2cefe9d 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts @@ -67,6 +67,15 @@ export class Orchestrator { chartHeight += availableHeight; availableHeight = 0; } + const plotBorderWidthHalf = this.chartConfig.plotBorderWidth/2; + chartX += plotBorderWidthHalf; + chartY += plotBorderWidthHalf; + chartWidth -= this.chartConfig.plotBorderWidth; + chartHeight -= this.chartConfig.plotBorderWidth; + this.componentStore.plot.calculateSpace({ + width: chartWidth, + height: chartHeight, + }); log.trace( `Final chart dimansion: x = ${chartX}, y = ${chartY}, width = ${chartWidth}, height = ${chartHeight}` diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts index 51e27b0cd3..f02d7b05f1 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts @@ -57,7 +57,7 @@ export class ChartTitle implements ChartComponent { const drawableElem: DrawableElem[] = []; if (this.boundingRect.height > 0 && this.boundingRect.width > 0) { drawableElem.push({ - groupText: 'chart-title', + groupTexts: ['chart-title'], type: 'text', data: [ { diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts index 14107da521..f6ed16cafa 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts @@ -1,20 +1,15 @@ -import { - Dimension, - Point, - DrawableElem, - BoundingRect, - AxisConfig, -} from '../../Interfaces.js'; +import { Dimension, Point, DrawableElem, BoundingRect, AxisConfig } from '../../Interfaces.js'; import { AxisPosition, IAxis } from './index.js'; import { ITextDimensionCalculator } from '../../TextDimensionCalculator.js'; import { log } from '../../../../../logger.js'; export abstract class BaseAxis implements IAxis { - protected boundingRect: BoundingRect = {x: 0, y: 0, width: 0, height: 0}; + protected boundingRect: BoundingRect = { x: 0, y: 0, width: 0, height: 0 }; protected axisPosition: AxisPosition = 'left'; private range: [number, number]; protected showTitle = false; protected showLabel = false; + protected showTick = false; protected innerPadding = 0; constructor( @@ -25,7 +20,6 @@ export abstract class BaseAxis implements IAxis { this.range = [0, 10]; this.boundingRect = { x: 0, y: 0, width: 0, height: 0 }; this.axisPosition = 'left'; - } setRange(range: [number, number]): void { @@ -54,7 +48,7 @@ export abstract class BaseAxis implements IAxis { ); } - private calculateSpaceIfDrawnVertical(availableSpace: Dimension) { + private calculateSpaceIfDrawnHorizontally(availableSpace: Dimension) { let availableHeight = availableSpace.height; if (this.axisConfig.showLabel) { const spaceRequired = this.getLabelDimension(); @@ -66,6 +60,10 @@ export abstract class BaseAxis implements IAxis { this.showLabel = true; } } + if (this.axisConfig.showTick && availableHeight >= this.axisConfig.tickLength) { + this.showTick = true; + availableHeight -= this.axisConfig.tickLength; + } if (this.axisConfig.showTitle) { const spaceRequired = this.textDimensionCalculator.getDimension( [this.title], @@ -82,7 +80,7 @@ export abstract class BaseAxis implements IAxis { this.boundingRect.height = availableSpace.height - availableHeight; } - private calculateSpaceIfDrawnHorizontally(availableSpace: Dimension) { + private calculateSpaceIfDrawnVertical(availableSpace: Dimension) { let availableWidth = availableSpace.width; if (this.axisConfig.showLabel) { const spaceRequired = this.getLabelDimension(); @@ -94,6 +92,10 @@ export abstract class BaseAxis implements IAxis { this.showLabel = true; } } + if (this.axisConfig.showTick && availableWidth >= this.axisConfig.tickLength) { + this.showTick = true; + availableWidth -= this.axisConfig.tickLength; + } if (this.axisConfig.showTitle) { const spaceRequired = this.textDimensionCalculator.getDimension( [this.title], @@ -116,9 +118,9 @@ export abstract class BaseAxis implements IAxis { return { width: 0, height: 0 }; } if (this.axisPosition === 'left') { - this.calculateSpaceIfDrawnHorizontally(availableSpace); - } else { this.calculateSpaceIfDrawnVertical(availableSpace); + } else { + this.calculateSpaceIfDrawnHorizontally(availableSpace); } this.recalculateScale(); return { @@ -137,12 +139,16 @@ export abstract class BaseAxis implements IAxis { if (this.showLabel) { drawableElement.push({ type: 'text', - groupText: 'left-axis-label', + groupTexts: ['left-axis', 'label'], data: this.getTickValues().map((tick) => ({ text: tick.toString(), - x: this.boundingRect.x + this.boundingRect.width - this.axisConfig.lablePadding, + x: + this.boundingRect.x + + this.boundingRect.width - + this.axisConfig.lablePadding - + this.axisConfig.tickLength, y: this.getScaleValue(tick), - fill: this.axisConfig.labelColor, + fill: this.axisConfig.labelFill, fontSize: this.axisConfig.labelFontSize, rotation: 0, verticalPos: 'right', @@ -150,21 +156,35 @@ export abstract class BaseAxis implements IAxis { })), }); } + if (this.showTick) { + const x = this.boundingRect.x + this.boundingRect.width; + drawableElement.push({ + type: 'path', + groupTexts: ['left-axis', 'ticks'], + data: this.getTickValues().map((tick) => ({ + path: `M ${x},${this.getScaleValue(tick)} L ${x - this.axisConfig.tickLength},${this.getScaleValue(tick)}`, + strokeFill: this.axisConfig.tickFill, + strokeWidth: this.axisConfig.tickWidth, + })), + }); + } if (this.showTitle) { drawableElement.push({ type: 'text', - groupText: 'right-axis-label', - data: [{ - text: this.title, - x: this.boundingRect.x + this.axisConfig.titlePadding, - y: this.range[0] + (this.range[1] - this.range[0])/2, - fill: this.axisConfig.titleColor, - fontSize: this.axisConfig.titleFontSize, - rotation: 270, - verticalPos: 'center', - horizontalPos: 'top', - }] - }) + groupTexts: ['left-axis', 'title'], + data: [ + { + text: this.title, + x: this.boundingRect.x + this.axisConfig.titlePadding, + y: this.range[0] + (this.range[1] - this.range[0]) / 2, + fill: this.axisConfig.titleFill, + fontSize: this.axisConfig.titleFontSize, + rotation: 270, + verticalPos: 'center', + horizontalPos: 'top', + }, + ], + }); } return drawableElement; } @@ -173,12 +193,12 @@ export abstract class BaseAxis implements IAxis { if (this.showLabel) { drawableElement.push({ type: 'text', - groupText: 'right-axis-lable', + groupTexts: ['bottom-axis', 'label'], data: this.getTickValues().map((tick) => ({ text: tick.toString(), x: this.getScaleValue(tick), - y: this.boundingRect.y + this.axisConfig.lablePadding, - fill: this.axisConfig.labelColor, + y: this.boundingRect.y + this.axisConfig.lablePadding + this.axisConfig.tickLength, + fill: this.axisConfig.labelFill, fontSize: this.axisConfig.labelFontSize, rotation: 0, verticalPos: 'center', @@ -186,21 +206,35 @@ export abstract class BaseAxis implements IAxis { })), }); } + if (this.showTick) { + const y = this.boundingRect.y; + drawableElement.push({ + type: 'path', + groupTexts: ['bottom-axis', 'ticks'], + data: this.getTickValues().map((tick) => ({ + path: `M ${this.getScaleValue(tick)},${y} L ${this.getScaleValue(tick)},${y + this.axisConfig.tickLength}`, + strokeFill: this.axisConfig.tickFill, + strokeWidth: this.axisConfig.tickWidth, + })), + }); + } if (this.showTitle) { drawableElement.push({ type: 'text', - groupText: 'right-axis-label', - data: [{ - text: this.title, - x: this.range[0] + (this.range[1] - this.range[0])/2, - y: this.boundingRect.y + this.boundingRect.height - this.axisConfig.titlePadding, - fill: this.axisConfig.titleColor, - fontSize: this.axisConfig.titleFontSize, - rotation: 0, - verticalPos: 'center', - horizontalPos: 'bottom', - }] - }) + groupTexts: ['bottom-axis', 'title'], + data: [ + { + text: this.title, + x: this.range[0] + (this.range[1] - this.range[0]) / 2, + y: this.boundingRect.y + this.boundingRect.height - this.axisConfig.titlePadding, + fill: this.axisConfig.titleFill, + fontSize: this.axisConfig.titleFontSize, + rotation: 0, + verticalPos: 'center', + horizontalPos: 'bottom', + }, + ], + }); } return drawableElement; } diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/LinearAxis.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/LinearAxis.ts index 9bf7c33b06..7d46a46b03 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/LinearAxis.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/LinearAxis.ts @@ -1,8 +1,8 @@ import { ScaleLinear, scaleLinear } from 'd3'; -import { AxisConfig, Dimension } from '../../Interfaces.js'; +import { log } from '../../../../../logger.js'; +import { AxisConfig } from '../../Interfaces.js'; import { ITextDimensionCalculator } from '../../TextDimensionCalculator.js'; import { BaseAxis } from './BaseAxis.js'; -import { log } from '../../../../../logger.js'; export class LinearAxis extends BaseAxis { private scale: ScaleLinear<number, number>; @@ -24,10 +24,11 @@ export class LinearAxis extends BaseAxis { } recalculateScale(): void { + const domain = [...this.domain]; // copy the array so if reverse is called twise it shouldnot cancel the reverse effect if (this.axisPosition === 'left') { - this.domain.reverse(); // since yaxis in svg start from top + domain.reverse(); // since yaxis in svg start from top } - this.scale = scaleLinear().domain(this.domain).range(this.getRange()); + this.scale = scaleLinear().domain(domain).range(this.getRange()); log.trace('Linear axis final domain, range: ', this.domain, this.getRange()); } diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/LinePlot.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/LinePlot.ts index b60fea9056..c6bb8e4083 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/LinePlot.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/LinePlot.ts @@ -19,7 +19,7 @@ export class LinePlot { } return [ { - groupText: 'line-plot', + groupTexts: ['plot', 'line-plot'], type: 'path', data: [ { diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/PlotBorder.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/PlotBorder.ts new file mode 100644 index 0000000000..d3eaf118d7 --- /dev/null +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/PlotBorder.ts @@ -0,0 +1,21 @@ +import { BoundingRect, DrawableElem } from '../../Interfaces.js'; +export class PlotBorder { + constructor(private boundingRect: BoundingRect) {} + + getDrawableElement(): DrawableElem[] { + const {x, y, width, height} = this.boundingRect; + return [ + { + groupTexts: ['plot', 'chart-border'], + type: 'path', + data: [ + { + path: `M ${x},${y} L ${x + width},${y} L ${x + width},${y + height} L ${x},${y + height} L ${x},${y}`, + strokeFill: '#000000', + strokeWidth: 1, + }, + ], + }, + ]; + } +} diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts index 5af28127dc..fb91a053a5 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts @@ -11,6 +11,7 @@ import { import { IAxis } from '../axis/index.js'; import { ChartComponent } from './../Interfaces.js'; import { LinePlot } from './LinePlot.js'; +import { PlotBorder } from './PlotBorder.js'; export interface IPlot extends ChartComponent { @@ -59,7 +60,9 @@ export class Plot implements IPlot { if(!(this.xAxis && this.yAxis)) { throw Error("Axes must be passed to render Plots"); } - const drawableElem: DrawableElem[] = []; + const drawableElem: DrawableElem[] = [ + ...new PlotBorder(this.boundingRect).getDrawableElement() + ]; for(const plot of this.chartData.plots) { switch(plot.type) { case ChartPlotEnum.LINE: { diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts index a47074e738..628965d442 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts @@ -23,25 +23,34 @@ export class XYChartBuilder { titleFill: '#000000', titlePadding: 5, showtitle: true, + plotBorderWidth: 2, yAxis: { showLabel: true, labelFontSize: 14, lablePadding: 5, - labelColor: '#000000', + labelFill: '#000000', showTitle: true, titleFontSize: 16, titlePadding: 5, - titleColor: '#000000', + titleFill: '#000000', + showTick: true, + tickLength: 5, + tickWidth: 2, + tickFill: '#000000', }, xAxis: { showLabel: true, labelFontSize: 14, lablePadding: 5, - labelColor: '#000000', + labelFill: '#000000', showTitle: true, titleFontSize: 16, titlePadding: 5, - titleColor: '#000000', + titleFill: '#000000', + showTick: true, + tickLength: 5, + tickWidth: 2, + tickFill: '#000000', }, chartOrientation: OrientationEnum.HORIZONTAL, plotReservedSpacePercent: 50, diff --git a/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts b/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts index a871177ce3..dd9b27583a 100644 --- a/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts +++ b/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts @@ -1,13 +1,13 @@ -import { select } from 'd3'; +import { select, Selection } from 'd3'; import { Diagram } from '../../Diagram.js'; import * as configApi from '../../config.js'; import { log } from '../../logger.js'; import { configureSvgSize } from '../../setupGraphViewbox.js'; import { - DrawableElem, - TextElem, - TextHorizontalPos, - TextVerticalPos, + DrawableElem, + TextElem, + TextHorizontalPos, + TextVerticalPos, } from './chartBuilder/Interfaces.js'; export const draw = (txt: string, id: string, _version: string, diagObj: Diagram) => { @@ -54,6 +54,25 @@ export const draw = (txt: string, id: string, _version: string, diagObj: Diagram // @ts-ignore: TODO Fix ts errors const shapes: DrawableElem[] = diagObj.db.getDrawableElem(); + const groups: Record<string, any> = {}; + + function getGroup(gList: string[]) { + let elem = group; + let prefix = ''; + for (let i = 0; i < gList.length; i++) { + let parent = group; + if (i > 0 && groups[prefix]) { + parent = groups[prefix]; + } + prefix += gList[i]; + elem = groups[prefix]; + if (!elem) { + elem = groups[prefix] = parent.append('g').attr('class', gList[i]); + } + } + return elem; + } + for (const shape of shapes) { if (shape.data.length === 0) { log.trace( @@ -69,7 +88,7 @@ export const draw = (txt: string, id: string, _version: string, diagObj: Diagram `Drawing shape of type: ${shape.type} with data: ${JSON.stringify(shape.data, null, 2)}` ); - const shapeGroup = group.append('g').attr('class', shape.groupText); + const shapeGroup = getGroup(shape.groupTexts); switch (shape.type) { case 'rect': From 547a22edefa60e89ae652428fa22a7c4aa1c397f Mon Sep 17 00:00:00 2001 From: Subhash Halder <halder.subhash@gmail.com> Date: Thu, 15 Jun 2023 00:04:48 +0530 Subject: [PATCH 008/457] Added support for bar plot --- .../xychart/chartBuilder/Interfaces.ts | 29 +++----------- .../xychart/chartBuilder/Orchestrator.ts | 2 +- .../chartBuilder/components/ChartTitle.ts | 2 +- .../chartBuilder/components/Interfaces.ts | 7 ---- .../chartBuilder/components/axis/BaseAxis.ts | 13 +++++- .../chartBuilder/components/axis/index.ts | 5 ++- .../chartBuilder/components/plot/BarPlot.ts | 40 +++++++++++++++++++ .../chartBuilder/components/plot/index.ts | 8 +++- .../diagrams/xychart/chartBuilder/index.ts | 8 ++++ 9 files changed, 77 insertions(+), 37 deletions(-) delete mode 100644 packages/mermaid/src/diagrams/xychart/chartBuilder/components/Interfaces.ts create mode 100644 packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts index 51350ca258..c7a924eddc 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts @@ -1,19 +1,12 @@ export enum ChartPlotEnum { LINE = 'line', + BAR = 'bar', } -export enum ChartLayoutElem { - NULL = 'null', - CHART = 'chart', - TITLE = 'title', - XAXISLABEL = 'xaxislabel', - XAXISTITLE = 'xaxistitle', - YAXISLABEL = 'yaxislabel', - YAXISTITLE = 'yaxistitle', -} -export enum XYChartYAxisPosition { - LEFT = 'left', - RIGHT = 'right', +export interface ChartComponent { + calculateSpace(availableSpace: Dimension): Dimension; + setBoundingBoxXY(point: Point): void; + getDrawableElements(): DrawableElem[]; } export enum OrientationEnum { @@ -21,16 +14,6 @@ export enum OrientationEnum { HORIZONTAL = 'horizontal', } -export type ChartLayout = ChartLayoutElem[][]; - -export type VisibilityOption = { - chartTitle: boolean; - xAxisTitle: boolean; - xAxisLabel: boolean; - yAxisTitle: boolean; - yAxisLabel: boolean; -}; - export interface AxisConfig { showLabel: boolean; labelFontSize: number; @@ -64,7 +47,7 @@ export interface XYChartConfig { export type SimplePlotDataType = [string | number, number][]; export interface LinePlotData { - type: ChartPlotEnum.LINE; + type: ChartPlotEnum.LINE | ChartPlotEnum.BAR; data: SimplePlotDataType; } diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts index dce2cefe9d..25e52cf240 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts @@ -1,7 +1,7 @@ import { log } from '../../../logger.js'; import { DrawableElem, XYChartConfig, XYChartData } from './Interfaces.js'; import { getChartTitleComponent } from './components/ChartTitle.js'; -import { ChartComponent } from './components/Interfaces.js'; +import { ChartComponent } from './Interfaces.js'; import { IAxis, getAxis } from './components/axis/index.js'; import { IPlot, getPlotComponent } from './components/plot/index.js'; diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts index f02d7b05f1..46a1b51d0d 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts @@ -8,7 +8,7 @@ import { Point, OrientationEnum, } from '../Interfaces.js'; -import { ChartComponent } from './Interfaces.js'; +import { ChartComponent } from '../Interfaces.js'; export class ChartTitle implements ChartComponent { private boundingRect: BoundingRect; diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/Interfaces.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/Interfaces.ts deleted file mode 100644 index 92f27986be..0000000000 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/Interfaces.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { Dimension, DrawableElem, OrientationEnum, Point } from '../Interfaces.js'; - -export interface ChartComponent { - calculateSpace(availableSpace: Dimension): Dimension; - setBoundingBoxXY(point: Point): void; - getDrawableElements(): DrawableElem[]; -} diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts index f6ed16cafa..c341bd4512 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts @@ -41,6 +41,11 @@ export abstract class BaseAxis implements IAxis { abstract getTickValues(): Array<string | number>; + getTickInnerPadding(): number { + return this.innerPadding * 2; + // return Math.abs(this.range[0] - this.range[1]) / this.getTickValues().length; + } + private getLabelDimension(): Dimension { return this.textDimensionCalculator.getDimension( this.getTickValues().map((tick) => tick.toString()), @@ -162,7 +167,9 @@ export abstract class BaseAxis implements IAxis { type: 'path', groupTexts: ['left-axis', 'ticks'], data: this.getTickValues().map((tick) => ({ - path: `M ${x},${this.getScaleValue(tick)} L ${x - this.axisConfig.tickLength},${this.getScaleValue(tick)}`, + path: `M ${x},${this.getScaleValue(tick)} L ${ + x - this.axisConfig.tickLength + },${this.getScaleValue(tick)}`, strokeFill: this.axisConfig.tickFill, strokeWidth: this.axisConfig.tickWidth, })), @@ -212,7 +219,9 @@ export abstract class BaseAxis implements IAxis { type: 'path', groupTexts: ['bottom-axis', 'ticks'], data: this.getTickValues().map((tick) => ({ - path: `M ${this.getScaleValue(tick)},${y} L ${this.getScaleValue(tick)},${y + this.axisConfig.tickLength}`, + path: `M ${this.getScaleValue(tick)},${y} L ${this.getScaleValue(tick)},${ + y + this.axisConfig.tickLength + }`, strokeFill: this.axisConfig.tickFill, strokeWidth: this.axisConfig.tickWidth, })), diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts index 1972ef2c59..dafa91878e 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts @@ -5,15 +5,16 @@ import { LinearAxisDataType } from '../../Interfaces.js'; import { TextDimensionCalculator } from '../../TextDimensionCalculator.js'; -import { ChartComponent } from '../Interfaces.js'; +import { ChartComponent } from '../../Interfaces.js'; import { BandAxis } from './BandAxis.js'; import { LinearAxis } from './LinearAxis.js'; -export type AxisPosition = 'left' | 'bottom'; +export type AxisPosition = 'left' | 'bottom' | 'top' | 'bottom'; export interface IAxis extends ChartComponent { getScaleValue(value: string | number): number; setAxisPosition(axisPosition: AxisPosition): void; + getTickInnerPadding(): number; setRange(range: [number, number]): void; } diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts new file mode 100644 index 0000000000..76187466b9 --- /dev/null +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts @@ -0,0 +1,40 @@ +import { line } from 'd3'; +import { BoundingRect, DrawableElem, SimplePlotDataType } from '../../Interfaces.js'; +import { IAxis } from '../axis/index.js'; + +export class BarPlot { + constructor( + private data: SimplePlotDataType, + private boundingRect: BoundingRect, + private xAxis: IAxis, + private yAxis: IAxis + ) {} + + getDrawableElement(): DrawableElem[] { + const finalData: [number, number][] = this.data.map((d) => [ + this.xAxis.getScaleValue(d[0]), + this.yAxis.getScaleValue(d[1]), + ]); + + const barPaddingPercent = 5; + + const barWidth = this.xAxis.getTickInnerPadding() * (1 - barPaddingPercent / 100); + const barWidthHalf = barWidth / 2; + + return [ + { + groupTexts: ['plot', 'bar-plot'], + type: 'rect', + data: finalData.map((data) => ({ + x: data[0] - barWidthHalf, + y: data[1], + width: barWidth, + height: this.boundingRect.y + this.boundingRect.height - data[1], + fill: '#ff0000', + strokeWidth: 0, + strokeFill: '#0000ff', + })), + }, + ]; + } +} diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts index fb91a053a5..1c807276e5 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts @@ -9,9 +9,10 @@ import { ChartPlotEnum, } from '../../Interfaces.js'; import { IAxis } from '../axis/index.js'; -import { ChartComponent } from './../Interfaces.js'; +import { ChartComponent } from '../../Interfaces.js'; import { LinePlot } from './LinePlot.js'; import { PlotBorder } from './PlotBorder.js'; +import { BarPlot } from './BarPlot.js'; export interface IPlot extends ChartComponent { @@ -70,6 +71,11 @@ export class Plot implements IPlot { drawableElem.push(...linePlot.getDrawableElement()) } break; + case ChartPlotEnum.BAR: { + const barPlot = new BarPlot(plot.data, this.boundingRect, this.xAxis, this.yAxis) + drawableElem.push(...barPlot.getDrawableElement()); + } + break; } } return drawableElem; diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts index 628965d442..2b7f59211c 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts @@ -67,6 +67,14 @@ export class XYChartBuilder { }, title: 'this is a sample task', plots: [ + { + type: ChartPlotEnum.BAR, + data: [ + ['category1', 23], + ['category2', 56], + ['category3', 34], + ], + }, { type: ChartPlotEnum.LINE, data: [ From 0a731e1ee10dea19212bfb87ed31f573a305e70c Mon Sep 17 00:00:00 2001 From: Subhash Halder <halder.subhash@gmail.com> Date: Thu, 22 Jun 2023 23:08:08 +0530 Subject: [PATCH 009/457] Added support for horizontal drawing --- .../xychart/chartBuilder/Interfaces.ts | 12 ++- .../xychart/chartBuilder/Orchestrator.ts | 83 ++++++++++++++++++- .../chartBuilder/components/ChartTitle.ts | 5 -- .../chartBuilder/components/axis/BaseAxis.ts | 66 ++++++++++++++- .../chartBuilder/components/axis/index.ts | 3 +- .../chartBuilder/components/plot/BarPlot.ts | 68 ++++++++++----- .../chartBuilder/components/plot/LinePlot.ts | 28 +++++-- .../components/plot/PlotBorder.ts | 21 ++++- .../chartBuilder/components/plot/index.ts | 11 +-- .../diagrams/xychart/chartBuilder/index.ts | 3 + 10 files changed, 247 insertions(+), 53 deletions(-) diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts index c7a924eddc..b7e29eb809 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts @@ -47,11 +47,19 @@ export interface XYChartConfig { export type SimplePlotDataType = [string | number, number][]; export interface LinePlotData { - type: ChartPlotEnum.LINE | ChartPlotEnum.BAR; + type: ChartPlotEnum.LINE; + strokeFill: string, + strokeWidth: number, data: SimplePlotDataType; } -export type PlotData = LinePlotData; +export interface BarPlotData { + type: ChartPlotEnum.BAR; + fill: string, + data: SimplePlotDataType; +} + +export type PlotData = LinePlotData | BarPlotData; export interface BandAxisDataType { title: string; diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts index 25e52cf240..f76ec95608 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts @@ -1,5 +1,5 @@ import { log } from '../../../logger.js'; -import { DrawableElem, XYChartConfig, XYChartData } from './Interfaces.js'; +import { DrawableElem, OrientationEnum, XYChartConfig, XYChartData } from './Interfaces.js'; import { getChartTitleComponent } from './components/ChartTitle.js'; import { ChartComponent } from './Interfaces.js'; import { IAxis, getAxis } from './components/axis/index.js'; @@ -21,7 +21,7 @@ export class Orchestrator { }; } - private calculateSpace() { + private calculateVerticalSpace() { let availableWidth = this.chartConfig.width; let availableHeight = this.chartConfig.height; let chartX = 0; @@ -67,7 +67,7 @@ export class Orchestrator { chartHeight += availableHeight; availableHeight = 0; } - const plotBorderWidthHalf = this.chartConfig.plotBorderWidth/2; + const plotBorderWidthHalf = this.chartConfig.plotBorderWidth / 2; chartX += plotBorderWidthHalf; chartY += plotBorderWidthHalf; chartWidth -= this.chartConfig.plotBorderWidth; @@ -88,6 +88,83 @@ export class Orchestrator { this.componentStore.yAxis.setBoundingBoxXY({ x: 0, y: chartY }); } + private calculateHorizonatalSpace() { + let availableWidth = this.chartConfig.width; + let availableHeight = this.chartConfig.height; + let titleYEnd = 0; + let chartX = 0; + let chartY = 0; + let chartWidth = Math.floor((availableWidth * this.chartConfig.plotReservedSpacePercent) / 100); + let chartHeight = Math.floor( + (availableHeight * this.chartConfig.plotReservedSpacePercent) / 100 + ); + let spaceUsed = this.componentStore.plot.calculateSpace({ + width: chartWidth, + height: chartHeight, + }); + availableWidth -= spaceUsed.width; + availableHeight -= spaceUsed.height; + + spaceUsed = this.componentStore.title.calculateSpace({ + width: this.chartConfig.width, + height: availableHeight, + }); + log.trace('space used by title: ', spaceUsed); + titleYEnd = spaceUsed.height; + availableHeight -= spaceUsed.height; + this.componentStore.xAxis.setAxisPosition('left'); + spaceUsed = this.componentStore.xAxis.calculateSpace({ + width: availableWidth, + height: availableHeight, + }); + availableWidth -= spaceUsed.width; + chartX = spaceUsed.width; + log.trace('space used by xaxis: ', spaceUsed); + this.componentStore.yAxis.setAxisPosition('top'); + spaceUsed = this.componentStore.yAxis.calculateSpace({ + width: availableWidth, + height: availableHeight, + }); + log.trace('space used by yaxis: ', spaceUsed); + availableHeight -= spaceUsed.height; + chartY = titleYEnd + spaceUsed.height; + if (availableWidth > 0) { + chartWidth += availableWidth; + availableWidth = 0; + } + if (availableHeight > 0) { + chartHeight += availableHeight; + availableHeight = 0; + } + const plotBorderWidthHalf = this.chartConfig.plotBorderWidth / 2; + chartX += plotBorderWidthHalf; + chartY += plotBorderWidthHalf; + chartWidth -= this.chartConfig.plotBorderWidth; + chartHeight -= this.chartConfig.plotBorderWidth; + this.componentStore.plot.calculateSpace({ + width: chartWidth, + height: chartHeight, + }); + + log.trace( + `Final chart dimansion: x = ${chartX}, y = ${chartY}, width = ${chartWidth}, height = ${chartHeight}` + ); + + this.componentStore.plot.setBoundingBoxXY({ x: chartX, y: chartY }); + this.componentStore.yAxis.setRange([chartX, chartX + chartWidth]); + this.componentStore.yAxis.setBoundingBoxXY({ x: chartX, y: titleYEnd }); + this.componentStore.xAxis.setRange([chartY, chartY + chartHeight]); + this.componentStore.xAxis.setBoundingBoxXY({ x: 0, y: chartY }); + } + + private calculateSpace() { + if (this.chartConfig.chartOrientation === OrientationEnum.HORIZONTAL) { + this.calculateHorizonatalSpace(); + } else { + this.calculateVerticalSpace(); + } + } + getDrawableElement() { this.calculateSpace(); const drawableElem: DrawableElem[] = []; diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts index 46a1b51d0d..5c60e2a9e4 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts @@ -13,7 +13,6 @@ import { ChartComponent } from '../Interfaces.js'; export class ChartTitle implements ChartComponent { private boundingRect: BoundingRect; private showChartTitle: boolean; - private orientation: OrientationEnum; constructor( private textDimensionCalculator: ITextDimensionCalculator, private chartConfig: XYChartConfig, @@ -26,10 +25,6 @@ export class ChartTitle implements ChartComponent { height: 0, }; this.showChartTitle = !!(this.chartData.title && this.chartConfig.showtitle); - this.orientation = OrientationEnum.VERTICAL; - } - setOrientation(orientation: OrientationEnum): void { - this.orientation = orientation; } setBoundingBoxXY(point: Point): void { this.boundingRect.x = point.x; diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts index c341bd4512..618ac0c9a9 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts @@ -41,6 +41,10 @@ export abstract class BaseAxis implements IAxis { abstract getTickValues(): Array<string | number>; + getTickDistance(): number { + return Math.abs(this.range[0] - this.range[1]) / this.getTickValues().length; + } + getTickInnerPadding(): number { return this.innerPadding * 2; // return Math.abs(this.range[0] - this.range[1]) / this.getTickValues().length; @@ -89,7 +93,7 @@ export abstract class BaseAxis implements IAxis { let availableWidth = availableSpace.width; if (this.axisConfig.showLabel) { const spaceRequired = this.getLabelDimension(); - this.innerPadding = spaceRequired.width / 2; + this.innerPadding = spaceRequired.height / 2; const widthRequired = spaceRequired.width + this.axisConfig.lablePadding * 2; log.trace('width required for axis label: ', widthRequired); if (widthRequired <= availableWidth) { @@ -122,7 +126,7 @@ export abstract class BaseAxis implements IAxis { this.recalculateScale(); return { width: 0, height: 0 }; } - if (this.axisPosition === 'left') { + if (this.axisPosition === 'left' || this.axisPosition === 'right') { this.calculateSpaceIfDrawnVertical(availableSpace); } else { this.calculateSpaceIfDrawnHorizontally(availableSpace); @@ -247,14 +251,72 @@ export abstract class BaseAxis implements IAxis { } return drawableElement; } + private getDrawaableElementsForTopAxis(): DrawableElem[] { + const drawableElement: DrawableElem[] = []; + if (this.showLabel) { + drawableElement.push({ + type: 'text', + groupTexts: ['bottom-axis', 'label'], + data: this.getTickValues().map((tick) => ({ + text: tick.toString(), + x: this.getScaleValue(tick), + y: this.boundingRect.y + this.boundingRect.height - this.axisConfig.lablePadding - this.axisConfig.tickLength, + fill: this.axisConfig.labelFill, + fontSize: this.axisConfig.labelFontSize, + rotation: 0, + verticalPos: 'center', + horizontalPos: 'bottom', + })), + }); + } + if (this.showTick) { + const y = this.boundingRect.y; + drawableElement.push({ + type: 'path', + groupTexts: ['bottom-axis', 'ticks'], + data: this.getTickValues().map((tick) => ({ + path: `M ${this.getScaleValue(tick)},${y + this.boundingRect.height} L ${this.getScaleValue(tick)},${ + y + this.boundingRect.height - this.axisConfig.tickLength + }`, + strokeFill: this.axisConfig.tickFill, + strokeWidth: this.axisConfig.tickWidth, + })), + }); + } + if (this.showTitle) { + drawableElement.push({ + type: 'text', + groupTexts: ['bottom-axis', 'title'], + data: [ + { + text: this.title, + x: this.range[0] + (this.range[1] - this.range[0]) / 2, + y: this.boundingRect.y + this.axisConfig.titlePadding, + fill: this.axisConfig.titleFill, + fontSize: this.axisConfig.titleFontSize, + rotation: 0, + verticalPos: 'center', + horizontalPos: 'top', + }, + ], + }); + } + return drawableElement; + } getDrawableElements(): DrawableElem[] { if (this.axisPosition === 'left') { return this.getDrawaableElementsForLeftAxis(); } + if (this.axisPosition === 'right') { + throw Error("Drawing of right axis is not implemented"); + } if (this.axisPosition === 'bottom') { return this.getDrawaableElementsForBottomAxis(); } + if (this.axisPosition === 'top') { + return this.getDrawaableElementsForTopAxis(); + } return []; } } diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts index dafa91878e..75d1999549 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts @@ -9,12 +9,13 @@ import { ChartComponent } from '../../Interfaces.js'; import { BandAxis } from './BandAxis.js'; import { LinearAxis } from './LinearAxis.js'; -export type AxisPosition = 'left' | 'bottom' | 'top' | 'bottom'; +export type AxisPosition = 'left' | 'right' | 'top' | 'bottom'; export interface IAxis extends ChartComponent { getScaleValue(value: string | number): number; setAxisPosition(axisPosition: AxisPosition): void; getTickInnerPadding(): number; + getTickDistance(): number; setRange(range: [number, number]): void; } diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts index 76187466b9..6d29a81b6d 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts @@ -1,40 +1,66 @@ -import { line } from 'd3'; -import { BoundingRect, DrawableElem, SimplePlotDataType } from '../../Interfaces.js'; +import { + BarPlotData, + BoundingRect, + DrawableElem, + OrientationEnum, + SimplePlotDataType, +} from '../../Interfaces.js'; import { IAxis } from '../axis/index.js'; export class BarPlot { constructor( - private data: SimplePlotDataType, + private barData: BarPlotData, private boundingRect: BoundingRect, private xAxis: IAxis, - private yAxis: IAxis + private yAxis: IAxis, + private orientation: OrientationEnum ) {} getDrawableElement(): DrawableElem[] { - const finalData: [number, number][] = this.data.map((d) => [ + const finalData: [number, number][] = this.barData.data.map((d) => [ this.xAxis.getScaleValue(d[0]), this.yAxis.getScaleValue(d[1]), ]); const barPaddingPercent = 5; - const barWidth = this.xAxis.getTickInnerPadding() * (1 - barPaddingPercent / 100); + const barWidth = + Math.min(this.xAxis.getTickInnerPadding(), this.xAxis.getTickDistance()) * + (1 - barPaddingPercent / 100); const barWidthHalf = barWidth / 2; - return [ - { - groupTexts: ['plot', 'bar-plot'], - type: 'rect', - data: finalData.map((data) => ({ - x: data[0] - barWidthHalf, - y: data[1], - width: barWidth, - height: this.boundingRect.y + this.boundingRect.height - data[1], - fill: '#ff0000', - strokeWidth: 0, - strokeFill: '#0000ff', - })), - }, - ]; + if (this.orientation === OrientationEnum.HORIZONTAL) { + return [ + { + groupTexts: ['plot', 'bar-plot'], + type: 'rect', + data: finalData.map((data) => ({ + x: this.boundingRect.x, + y: data[0] - barWidthHalf, + height: barWidth, + width: data[1] - this.boundingRect.x, + fill: this.barData.fill, + strokeWidth: 0, + strokeFill: this.barData.fill, + })), + }, + ]; + } else { + return [ + { + groupTexts: ['plot', 'bar-plot'], + type: 'rect', + data: finalData.map((data) => ({ + x: data[0] - barWidthHalf, + y: data[1], + width: barWidth, + height: this.boundingRect.y + this.boundingRect.height - data[1], + fill: this.barData.fill, + strokeWidth: 0, + strokeFill: this.barData.fill, + })), + }, + ]; + } } } diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/LinePlot.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/LinePlot.ts index c6bb8e4083..d35722618d 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/LinePlot.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/LinePlot.ts @@ -1,19 +1,31 @@ import { line } from 'd3'; -import { DrawableElem, SimplePlotDataType } from '../../Interfaces.js'; +import { DrawableElem, LinePlotData, OrientationEnum } from '../../Interfaces.js'; import { IAxis } from '../axis/index.js'; export class LinePlot { - constructor(private data: SimplePlotDataType, private xAxis: IAxis, private yAxis: IAxis) {} + constructor( + private plotData: LinePlotData, + private xAxis: IAxis, + private yAxis: IAxis, + private orientation: OrientationEnum + ) {} getDrawableElement(): DrawableElem[] { - const finalData: [number, number][] = this.data.map((d) => [ + const finalData: [number, number][] = this.plotData.data.map((d) => [ this.xAxis.getScaleValue(d[0]), this.yAxis.getScaleValue(d[1]), ]); - const path = line() - .x((d) => d[0]) - .y((d) => d[1])(finalData); + let path: string | null; + if (this.orientation === OrientationEnum.HORIZONTAL) { + path = line() + .y((d) => d[0]) + .x((d) => d[1])(finalData); + } else { + path = line() + .x((d) => d[0]) + .y((d) => d[1])(finalData); + } if (!path) { return []; } @@ -24,8 +36,8 @@ export class LinePlot { data: [ { path, - strokeFill: '#0000ff', - strokeWidth: 2, + strokeFill: this.plotData.strokeFill, + strokeWidth: this.plotData.strokeWidth, }, ], }, diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/PlotBorder.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/PlotBorder.ts index d3eaf118d7..ee5f5e19cd 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/PlotBorder.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/PlotBorder.ts @@ -1,16 +1,31 @@ -import { BoundingRect, DrawableElem } from '../../Interfaces.js'; +import { BoundingRect, DrawableElem, OrientationEnum } from '../../Interfaces.js'; export class PlotBorder { - constructor(private boundingRect: BoundingRect) {} + constructor(private boundingRect: BoundingRect, private orientation: OrientationEnum) {} getDrawableElement(): DrawableElem[] { const {x, y, width, height} = this.boundingRect; + if(this.orientation === OrientationEnum.HORIZONTAL) { return [ { groupTexts: ['plot', 'chart-border'], type: 'path', data: [ { - path: `M ${x},${y} L ${x + width},${y} L ${x + width},${y + height} L ${x},${y + height} L ${x},${y}`, + path: `M ${x},${y} L ${x + width},${y} M ${x + width},${y + height} M ${x},${y + height} L ${x},${y}`, + strokeFill: '#000000', + strokeWidth: 1, + }, + ], + }, + ]; + } + return [ + { + groupTexts: ['plot', 'chart-border'], + type: 'path', + data: [ + { + path: `M ${x},${y} M ${x + width},${y} M ${x + width},${y + height} L ${x},${y + height} L ${x},${y}`, strokeFill: '#000000', strokeWidth: 1, }, diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts index 1c807276e5..92b3668f23 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts @@ -21,7 +21,6 @@ export interface IPlot extends ChartComponent { export class Plot implements IPlot { private boundingRect: BoundingRect; - private orientation: OrientationEnum; private xAxis?: IAxis; private yAxis?: IAxis; @@ -35,15 +34,11 @@ export class Plot implements IPlot { width: 0, height: 0, }; - this.orientation = OrientationEnum.VERTICAL; } setAxes(xAxis: IAxis, yAxis: IAxis) { this.xAxis = xAxis; this.yAxis = yAxis; } - setOrientation(orientation: OrientationEnum): void { - this.orientation = orientation; - } setBoundingBoxXY(point: Point): void { this.boundingRect.x = point.x; this.boundingRect.y = point.y; @@ -62,17 +57,17 @@ export class Plot implements IPlot { throw Error("Axes must be passed to render Plots"); } const drawableElem: DrawableElem[] = [ - ...new PlotBorder(this.boundingRect).getDrawableElement() + ...new PlotBorder(this.boundingRect, this.chartConfig.chartOrientation).getDrawableElement() ]; for(const plot of this.chartData.plots) { switch(plot.type) { case ChartPlotEnum.LINE: { - const linePlot = new LinePlot(plot.data, this.xAxis, this.yAxis); + const linePlot = new LinePlot(plot, this.xAxis, this.yAxis, this.chartConfig.chartOrientation); drawableElem.push(...linePlot.getDrawableElement()) } break; case ChartPlotEnum.BAR: { - const barPlot = new BarPlot(plot.data, this.boundingRect, this.xAxis, this.yAxis) + const barPlot = new BarPlot(plot, this.boundingRect, this.xAxis, this.yAxis, this.chartConfig.chartOrientation) drawableElem.push(...barPlot.getDrawableElement()); } break; diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts index 2b7f59211c..834834f8e1 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts @@ -69,6 +69,7 @@ export class XYChartBuilder { plots: [ { type: ChartPlotEnum.BAR, + fill: '#0000bb', data: [ ['category1', 23], ['category2', 56], @@ -77,6 +78,8 @@ export class XYChartBuilder { }, { type: ChartPlotEnum.LINE, + strokeFill: '#bb0000', + strokeWidth: 2, data: [ ['category1', 33], ['category2', 45], From 29ab2dec597eb6fd7b154f97653351a606a06e2c Mon Sep 17 00:00:00 2001 From: Subhash Halder <halder.subhash@gmail.com> Date: Sat, 1 Jul 2023 20:07:15 +0530 Subject: [PATCH 010/457] Now jison can parse xAxis and yAxis --- .../src/diagrams/xychart/parser/xychart.jison | 65 +++++++- .../xychart/parser/xychart.jison.spec.ts | 140 ++++++++++++++++++ 2 files changed, 201 insertions(+), 4 deletions(-) create mode 100644 packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts diff --git a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison index d8e0d08d08..66e160ac0c 100644 --- a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison +++ b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison @@ -12,6 +12,15 @@ %x acc_title %x acc_descr %x acc_descr_multiline +%x chart_config +%x chart_orientation +%x x_axis +%x y_axis +%x axis_title +%x axis_data +%x axis_data_band +%x axis_data_band_capture +%x axis_data_band_str %% \%\%\{ { this.begin('open_directive'); return 'open_directive'; } <open_directive>((?:(?!\}\%\%)[^:.])*) { this.begin('type_directive'); return 'type_directive'; } @@ -34,6 +43,34 @@ accDescr\s*"{"\s* { this.begin("acc_descr_multiline");} <acc_descr_multiline>[\}] { this.popState(); } <acc_descr_multiline>[^\}]* return "acc_descr_multiline_value"; +" "*"xychart-beta" {this.begin("chart_config"); return 'XYCHART';} +<chart_config>" "+("vertical"|"horizontal") {this.begin("chart_orientation"); return 'chart_orientation';} +<chart_orientation>[\s]* {this.popState(); this.popState(); return 'CHART_CONFIG_END';} +<chart_config>[\s]* {this.popState(); return 'CHART_CONFIG_END';} + +"x-axis"" "* { this.begin("x_axis"); return "X_AXIS";} +"y-axis"" "* { this.begin("y_axis"); return "Y_AXIS";} +<x_axis,y_axis>["] {this.begin("axis_title");} +<axis_title>[^"]+ {return 'AXIS_TITLE';} +<axis_title>["]" "*(\r?\n) {this.popState(); this.popState();} +<axis_title>["]" "* {this.popState(); this.begin("axis_data");} +<x_axis,y_axis>[^\s]+" "*(\r?\n) {this.popState(); return 'AXIS_TITLE';} +<x_axis,y_axis>[^\s]+" "* {this.begin("axis_data"); return 'AXIS_TITLE'; } + +<axis_data>[+-]?\d+(\.\d+)?" "*"-->"" "*[+-]?\d+(\.\d+)?" "* { return 'AXIS_RANGE_DATA';} + +<axis_data>[\[]" "* {this.begin("axis_data_band"); this.begin("axis_data_band_capture")} +<axis_data_band>[,]" "* {this.begin("axis_data_band_capture")} +<axis_data_band_capture>["] {this.begin("axis_data_band_str");} +<axis_data_band_str>[^"]+ {return "AXIS_BAND_DATA";} +<axis_data_band_str>["]" "* {this.popState(); this.popState();} +<axis_data_band_capture>[^\s]+" "* {this.popState(); return "AXIS_BAND_DATA"} +<axis_data_band>[\]]" "* {this.popState(); return "AXIS_BAND_DATA_END"} + + +<axis_data>[\r\n]+ {this.popState(); this.popState();} + + ["][`] { this.begin("md_string");} <md_string>[^`"]+ { return "MD_STR";} @@ -42,8 +79,6 @@ accDescr\s*"{"\s* { this.begin("acc_descr_multiline");} <string>["] this.popState(); <string>[^"]* return "STR"; -" "*"xychart"" "* return 'XYCHART'; - [A-Za-z]+ return 'ALPHA'; ":" return 'COLON'; \+ return 'PLUS'; @@ -72,9 +107,14 @@ start : eol start | SPACE start | directive start - | XYCHART document + | XYCHART chartConfig CHART_CONFIG_END document + | XYCHART CHART_CONFIG_END document ; +chartConfig + : chart_orientation {yy.setOrientation($1.trim());} + ; + document : /* empty */ | document line @@ -88,8 +128,25 @@ statement : | SPACE statement | directive + | X_AXIS parseXAxis + | Y_AXIS parseYAxis ; +parseXAxis + : AXIS_TITLE {yy.setXAxisTitle($1.trim());} + | AXIS_TITLE xAxisBandData {yy.setXAxisTitle($1.trim());} + | AXIS_TITLE AXIS_RANGE_DATA {yy.setXAxisTitle($1.trim()); $$ = $2.split("-->"); yy.setXAxisRangeData(Number($$[0]), Number($$[1]));} + ; + +xAxisBandData + : AXIS_BAND_DATA xAxisBandData {yy.addXAxisBand($1.trim());} + | AXIS_BAND_DATA_END + ; + +parseYAxis + : AXIS_TITLE {yy.setYAxisTitle($1.trim());} + | AXIS_TITLE AXIS_RANGE_DATA {yy.setYAxisTitle($1.trim()); $$ = $2.split("-->"); yy.setYAxisRangeData(Number($$[0]), Number($$[1]));} + ; directive : openDirective typeDirective closeDirective @@ -115,7 +172,7 @@ argDirective ; closeDirective - : close_directive { yy.parseDirective('}%%', 'close_directive', 'quadrantChart'); } + : close_directive { yy.parseDirective('}%%', 'close_directive', 'xychart'); } ; text: alphaNumToken diff --git a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts new file mode 100644 index 0000000000..029e90356a --- /dev/null +++ b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts @@ -0,0 +1,140 @@ +// @ts-ignore: TODO Fix ts errors +import { parser } from './xychart.jison'; +import { Mock, vi } from 'vitest'; + +const parserFnConstructor = (str: string) => { + return () => { + parser.parse(str); + }; +}; + +const mockDB: Record<string, Mock<any, any>> = { + parseDirective: vi.fn(), + setOrientation: vi.fn(), + setXAxisTitle: vi.fn(), + setXAxisRangeData: vi.fn(), + addXAxisBand: vi.fn(), + setYAxisTitle: vi.fn(), + setYAxisRangeData: vi.fn(), + addYAxisBand: vi.fn(), +}; + +function clearMocks() { + for (const key in mockDB) { + mockDB[key].mockRestore(); + } +} + +describe('Testing xychart jison file', () => { + beforeEach(() => { + parser.yy = mockDB; + clearMocks(); + }); + + it('should throw error if xychart-beta text is not there', () => { + const str = 'xychart-beta-1'; + expect(parserFnConstructor(str)).toThrow(); + }); + + it('should not throw error if only xychart is there', () => { + const str = 'xychart-beta'; + expect(parserFnConstructor(str)).not.toThrow(); + }); + + it('should be able to parse directive', () => { + const str = + '%%{init: {"xychart": {"chartWidth": 600, "chartHeight": 600} } }%% \n xychart-beta'; + expect(parserFnConstructor(str)).not.toThrow(); + expect(mockDB.parseDirective.mock.calls[0]).toEqual(['%%{', 'open_directive']); + expect(mockDB.parseDirective.mock.calls[1]).toEqual(['init', 'type_directive']); + expect(mockDB.parseDirective.mock.calls[2]).toEqual([ + '{"xychart": {"chartWidth": 600, "chartHeight": 600} }', + 'arg_directive', + ]); + expect(mockDB.parseDirective.mock.calls[3]).toEqual(['}%%', 'close_directive', 'xychart']); + }); + + it('parse chart orientation', () => { + let str = 'xychart-beta vertical'; + expect(parserFnConstructor(str)).not.toThrow(); + expect(mockDB.setOrientation).toHaveBeenCalledWith('vertical'); + + clearMocks(); + + str = 'xychart-beta horizontal '; + expect(parserFnConstructor(str)).not.toThrow(); + expect(mockDB.setOrientation).toHaveBeenCalledWith('horizontal'); + + str = 'xychart-beta abc'; + expect(parserFnConstructor(str)).toThrow(); + }); + + it('parse x-axis', () => { + let str = 'xychart-beta \nx-axis xAxisName\n'; + expect(parserFnConstructor(str)).not.toThrow(); + expect(mockDB.setXAxisTitle).toHaveBeenCalledWith('xAxisName'); + + clearMocks(); + + str = 'xychart-beta \nx-axis xAxisName \n'; + expect(parserFnConstructor(str)).not.toThrow(); + expect(mockDB.setXAxisTitle).toHaveBeenCalledWith('xAxisName'); + + clearMocks(); + + str = 'xychart-beta \n x-axis "xAxisName has space"\n'; + expect(parserFnConstructor(str)).not.toThrow(); + expect(mockDB.setXAxisTitle).toHaveBeenCalledWith('xAxisName has space'); + + clearMocks(); + + str = 'xychart-beta \n x-axis " xAxisName has space " \n'; + expect(parserFnConstructor(str)).not.toThrow(); + expect(mockDB.setXAxisTitle).toHaveBeenCalledWith('xAxisName has space'); + + clearMocks(); + str = 'xychart-beta \nx-axis xAxisName 45.5 --> 33 \n'; + expect(parserFnConstructor(str)).not.toThrow(); + expect(mockDB.setXAxisTitle).toHaveBeenCalledWith('xAxisName'); + expect(mockDB.setXAxisRangeData).toHaveBeenCalledWith(45.5, 33); + + clearMocks(); + + str = 'xychart-beta \nx-axis xAxisName [ "cat1" , cat2 ] \n'; + expect(parserFnConstructor(str)).not.toThrow(); + expect(mockDB.setXAxisTitle).toHaveBeenCalledWith('xAxisName'); + expect(mockDB.addXAxisBand).toHaveBeenCalledTimes(2); + expect(mockDB.addXAxisBand).toHaveBeenNthCalledWith(1, "cat2"); + expect(mockDB.addXAxisBand).toHaveBeenNthCalledWith(2, "cat1"); + }); + it('parse y-axis', () => { + let str = 'xychart-beta \ny-axis yAxisName\n'; + expect(parserFnConstructor(str)).not.toThrow(); + expect(mockDB.setYAxisTitle).toHaveBeenCalledWith('yAxisName'); + + clearMocks(); + + str = 'xychart-beta \ny-axis yAxisName \n'; + expect(parserFnConstructor(str)).not.toThrow(); + expect(mockDB.setYAxisTitle).toHaveBeenCalledWith('yAxisName'); + + clearMocks(); + + str = 'xychart-beta \n y-axis "yAxisName has space"\n'; + expect(parserFnConstructor(str)).not.toThrow(); + expect(mockDB.setYAxisTitle).toHaveBeenCalledWith('yAxisName has space'); + + clearMocks(); + + str = 'xychart-beta \n y-axis " yAxisName has space " \n'; + expect(parserFnConstructor(str)).not.toThrow(); + expect(mockDB.setYAxisTitle).toHaveBeenCalledWith('yAxisName has space'); + + clearMocks(); + str = 'xychart-beta \ny-axis yAxisName 45.5 --> 33 \n'; + expect(parserFnConstructor(str)).not.toThrow(); + expect(mockDB.setYAxisTitle).toHaveBeenCalledWith('yAxisName'); + expect(mockDB.setYAxisRangeData).toHaveBeenCalledWith(45.5, 33); + + }); +}); From d69a8aeb63e59a04c63d91b6c11c775a7e4f8477 Mon Sep 17 00:00:00 2001 From: Subhash Halder <halder.subhash@gmail.com> Date: Sat, 1 Jul 2023 22:14:33 +0530 Subject: [PATCH 011/457] Added full jison for bar and line chart --- .../src/diagrams/xychart/parser/xychart.jison | 186 +++++++++++------- .../xychart/parser/xychart.jison.spec.ts | 58 +++++- 2 files changed, 167 insertions(+), 77 deletions(-) diff --git a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison index 66e160ac0c..047eeebc53 100644 --- a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison +++ b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison @@ -21,81 +21,107 @@ %x axis_data_band %x axis_data_band_capture %x axis_data_band_str +%x line +%x line_title +%x line_data +%x line_data_entries +%x bar +%x bar_title +%x bar_data +%x bar_data_entries %% -\%\%\{ { this.begin('open_directive'); return 'open_directive'; } -<open_directive>((?:(?!\}\%\%)[^:.])*) { this.begin('type_directive'); return 'type_directive'; } -<type_directive>":" { this.popState(); this.begin('arg_directive'); return ':'; } -<type_directive,arg_directive>\}\%\% { this.popState(); this.popState(); return 'close_directive'; } -<arg_directive>((?:(?!\}\%\%).|\n)*) return 'arg_directive'; -\%\%(?!\{)[^\n]* /* skip comments */ -[^\}]\%\%[^\n]* /* skip comments */ -[\n\r]+ return 'NEWLINE'; -\%\%[^\n]* /* do nothing */ - -title { this.begin("title");return 'title'; } -<title>(?!\n|;|#)*[^\n]* { this.popState(); return "title_value"; } - -accTitle\s*":"\s* { this.begin("acc_title");return 'acc_title'; } -<acc_title>(?!\n|;|#)*[^\n]* { this.popState(); return "acc_title_value"; } -accDescr\s*":"\s* { this.begin("acc_descr");return 'acc_descr'; } -<acc_descr>(?!\n|;|#)*[^\n]* { this.popState(); return "acc_descr_value"; } -accDescr\s*"{"\s* { this.begin("acc_descr_multiline");} -<acc_descr_multiline>[\}] { this.popState(); } -<acc_descr_multiline>[^\}]* return "acc_descr_multiline_value"; - -" "*"xychart-beta" {this.begin("chart_config"); return 'XYCHART';} +\%\%\{ { this.begin('open_directive'); return 'open_directive'; } +<open_directive>((?:(?!\}\%\%)[^:.])*) { this.begin('type_directive'); return 'type_directive'; } +<type_directive>":" { this.popState(); this.begin('arg_directive'); return ':'; } +<type_directive,arg_directive>\}\%\% { this.popState(); this.popState(); return 'close_directive'; } +<arg_directive>((?:(?!\}\%\%).|\n)*) return 'arg_directive'; +\%\%(?!\{)[^\n]* /* skip comments */ +[^\}]\%\%[^\n]* /* skip comments */ +[\n\r]+ return 'NEWLINE'; +\%\%[^\n]* /* do nothing */ + +title { this.begin("title");return 'title'; } +<title>(?!\n|;|#)*[^\n]* { this.popState(); return "title_value"; } + +accTitle\s*":"\s* { this.begin("acc_title");return 'acc_title'; } +<acc_title>(?!\n|;|#)*[^\n]* { this.popState(); return "acc_title_value"; } +accDescr\s*":"\s* { this.begin("acc_descr");return 'acc_descr'; } +<acc_descr>(?!\n|;|#)*[^\n]* { this.popState(); return "acc_descr_value"; } +accDescr\s*"{"\s* { this.begin("acc_descr_multiline");} +<acc_descr_multiline>[\}] { this.popState(); } +<acc_descr_multiline>[^\}]* return "acc_descr_multiline_value"; + +" "*"xychart-beta" {this.begin("chart_config"); return 'XYCHART';} <chart_config>" "+("vertical"|"horizontal") {this.begin("chart_orientation"); return 'chart_orientation';} -<chart_orientation>[\s]* {this.popState(); this.popState(); return 'CHART_CONFIG_END';} -<chart_config>[\s]* {this.popState(); return 'CHART_CONFIG_END';} - -"x-axis"" "* { this.begin("x_axis"); return "X_AXIS";} -"y-axis"" "* { this.begin("y_axis"); return "Y_AXIS";} -<x_axis,y_axis>["] {this.begin("axis_title");} -<axis_title>[^"]+ {return 'AXIS_TITLE';} -<axis_title>["]" "*(\r?\n) {this.popState(); this.popState();} -<axis_title>["]" "* {this.popState(); this.begin("axis_data");} -<x_axis,y_axis>[^\s]+" "*(\r?\n) {this.popState(); return 'AXIS_TITLE';} -<x_axis,y_axis>[^\s]+" "* {this.begin("axis_data"); return 'AXIS_TITLE'; } - -<axis_data>[+-]?\d+(\.\d+)?" "*"-->"" "*[+-]?\d+(\.\d+)?" "* { return 'AXIS_RANGE_DATA';} - -<axis_data>[\[]" "* {this.begin("axis_data_band"); this.begin("axis_data_band_capture")} -<axis_data_band>[,]" "* {this.begin("axis_data_band_capture")} -<axis_data_band_capture>["] {this.begin("axis_data_band_str");} -<axis_data_band_str>[^"]+ {return "AXIS_BAND_DATA";} -<axis_data_band_str>["]" "* {this.popState(); this.popState();} -<axis_data_band_capture>[^\s]+" "* {this.popState(); return "AXIS_BAND_DATA"} -<axis_data_band>[\]]" "* {this.popState(); return "AXIS_BAND_DATA_END"} - - -<axis_data>[\r\n]+ {this.popState(); this.popState();} - - - -["][`] { this.begin("md_string");} -<md_string>[^`"]+ { return "MD_STR";} -<md_string>[`]["] { this.popState();} -["] this.begin("string"); -<string>["] this.popState(); -<string>[^"]* return "STR"; - -[A-Za-z]+ return 'ALPHA'; -":" return 'COLON'; -\+ return 'PLUS'; -"," return 'COMMA'; -"=" return 'EQUALS'; -\= return 'EQUALS'; -"*" return 'MULT'; -\# return 'BRKT'; -[\_] return 'UNDERSCORE'; -"." return 'DOT'; -"&" return 'AMP'; -\- return 'MINUS'; -[0-9]+ return 'NUM'; -\s return 'SPACE'; -";" return 'SEMI'; -[!"#$%&'*+,-.`?\\_/] return 'PUNCTUATION'; -<<EOF>> return 'EOF'; +<chart_orientation>[\s]* {this.popState(); this.popState(); return 'CHART_CONFIG_END';} +<chart_config>[\s]* {this.popState(); return 'CHART_CONFIG_END';} + +"x-axis"" "* { this.begin("x_axis"); return "X_AXIS";} +"y-axis"" "* { this.begin("y_axis"); return "Y_AXIS";} +<x_axis,y_axis>["] {this.begin("axis_title");} +<axis_title>[^"]+ {return 'AXIS_TITLE';} +<axis_title>["]" "*(\r?\n) {this.popState(); this.popState();} +<axis_title>["]" "* {this.popState(); this.begin("axis_data");} +<x_axis,y_axis>[^\s]+" "*(\r?\n) {this.popState(); return 'AXIS_TITLE';} +<x_axis,y_axis>[^\s]+" "* {this.begin("axis_data"); return 'AXIS_TITLE'; } + +<axis_data>[+-]?\d+(?:\.\d+)?" "*"-->"" "*[+-]?\d+(?:\.\d+)?" "* { return 'AXIS_RANGE_DATA';} + +<axis_data>[\[]" "* {this.begin("axis_data_band"); this.begin("axis_data_band_capture")} +<axis_data_band>[,]" "* {this.begin("axis_data_band_capture")} +<axis_data_band_capture>["] {this.begin("axis_data_band_str");} +<axis_data_band_str>[^"]+ {return "AXIS_BAND_DATA";} +<axis_data_band_str>["]" "* {this.popState(); this.popState();} +<axis_data_band_capture>[^\s]+" "* {this.popState(); return "AXIS_BAND_DATA"} +<axis_data_band>[\]]" "* {this.popState(); return "AXIS_BAND_DATA_END"} +<axis_data>[\r\n]+ {this.popState(); this.popState();} + + +"line"" "* {this.begin("line"); return 'LINE';} +<line>["] {this.begin("line_title");} +<line_title>[^"]+ {return 'LINE_TITLE';} +<line_title>["]" "* {this.popState(); this.begin("line_data");} +<line_data>"["" "* {this.begin('line_data_entries');} +<line_data_entries>(?:[+-]?\d+(?:\.\d+)?)+(?:" "*[,]" "*(?:[+-]?\d+(?:\.\d+)?)+)*" "* {return 'LINE_DATA'} +<line_data_entries>"]"" "* {this.popState(); this.popState(); this.popState()} +<line>[^\s]+" "* {this.begin("line_data"); return 'LINE_TITLE';} + +"bar"" "* {this.begin("bar"); return 'BAR';} +<bar>["] {this.begin("bar_title");} +<bar_title>[^"]+ {return 'BAR_TITLE';} +<bar_title>["]" "* {this.popState(); this.begin("bar_data");} +<bar_data>"["" "* {this.begin('bar_data_entries');} +<bar_data_entries>(?:[+-]?\d+(?:\.\d+)?)+(?:" "*[,]" "*(?:[+-]?\d+(?:\.\d+)?)+)*" "* {return 'BAR_DATA'} +<bar_data_entries>"]"" "* {this.popState(); this.popState(); this.popState()} +<bar>[^\s]+" "* {this.begin("bar_data"); return 'BAR_TITLE';} + + + + +["][`] { this.begin("md_string");} +<md_string>[^`"]+ { return "MD_STR";} +<md_string>[`]["] { this.popState();} +["] this.begin("string"); +<string>["] this.popState(); +<string>[^"]* return "STR"; + +[A-Za-z]+ return 'ALPHA'; +":" return 'COLON'; +\+ return 'PLUS'; +"," return 'COMMA'; +"=" return 'EQUALS'; +\= return 'EQUALS'; +"*" return 'MULT'; +\# return 'BRKT'; +[\_] return 'UNDERSCORE'; +"." return 'DOT'; +"&" return 'AMP'; +\- return 'MINUS'; +[0-9]+ return 'NUM'; +\s return 'SPACE'; +";" return 'SEMI'; +[!"#$%&'*+,-.`?\\_/] return 'PUNCTUATION'; +<<EOF>> return 'EOF'; /lex @@ -130,10 +156,20 @@ statement | directive | X_AXIS parseXAxis | Y_AXIS parseYAxis + | parseLine + | parseBar ; +parseLine + : LINE LINE_TITLE LINE_DATA {yy.addLineData($2.trim(), $3.split(',').map(d => Number(d.trim())));} + ; + +parseBar + : BAR BAR_TITLE BAR_DATA {yy.addBarData($2.trim(), $3.split(',').map(d => Number(d.trim())));} + ; + parseXAxis - : AXIS_TITLE {yy.setXAxisTitle($1.trim());} + : AXIS_TITLE statement {yy.setXAxisTitle($1.trim());} | AXIS_TITLE xAxisBandData {yy.setXAxisTitle($1.trim());} | AXIS_TITLE AXIS_RANGE_DATA {yy.setXAxisTitle($1.trim()); $$ = $2.split("-->"); yy.setXAxisRangeData(Number($$[0]), Number($$[1]));} ; @@ -144,7 +180,7 @@ xAxisBandData ; parseYAxis - : AXIS_TITLE {yy.setYAxisTitle($1.trim());} + : AXIS_TITLE statement {yy.setYAxisTitle($1.trim());} | AXIS_TITLE AXIS_RANGE_DATA {yy.setYAxisTitle($1.trim()); $$ = $2.split("-->"); yy.setYAxisRangeData(Number($$[0]), Number($$[1]));} ; diff --git a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts index 029e90356a..1ce73abf36 100644 --- a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts +++ b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts @@ -17,6 +17,8 @@ const mockDB: Record<string, Mock<any, any>> = { setYAxisTitle: vi.fn(), setYAxisRangeData: vi.fn(), addYAxisBand: vi.fn(), + addLineData: vi.fn(), + addBarData: vi.fn(), }; function clearMocks() { @@ -104,8 +106,8 @@ describe('Testing xychart jison file', () => { expect(parserFnConstructor(str)).not.toThrow(); expect(mockDB.setXAxisTitle).toHaveBeenCalledWith('xAxisName'); expect(mockDB.addXAxisBand).toHaveBeenCalledTimes(2); - expect(mockDB.addXAxisBand).toHaveBeenNthCalledWith(1, "cat2"); - expect(mockDB.addXAxisBand).toHaveBeenNthCalledWith(2, "cat1"); + expect(mockDB.addXAxisBand).toHaveBeenNthCalledWith(1, 'cat2'); + expect(mockDB.addXAxisBand).toHaveBeenNthCalledWith(2, 'cat1'); }); it('parse y-axis', () => { let str = 'xychart-beta \ny-axis yAxisName\n'; @@ -135,6 +137,58 @@ describe('Testing xychart jison file', () => { expect(parserFnConstructor(str)).not.toThrow(); expect(mockDB.setYAxisTitle).toHaveBeenCalledWith('yAxisName'); expect(mockDB.setYAxisRangeData).toHaveBeenCalledWith(45.5, 33); + }); + it('parse line Data', () => { + let str = 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n line lineTitle [23, 45, 56.6]'; + expect(parserFnConstructor(str)).not.toThrow(); + expect(mockDB.setYAxisTitle).toHaveBeenCalledWith('yAxisName'); + expect(mockDB.setXAxisTitle).toHaveBeenCalledWith('xAxisName'); + expect(mockDB.addLineData).toHaveBeenCalledWith('lineTitle', [23, 45, 56.6]); + clearMocks(); + + str = + 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n line "lineTitle with space" [ +23 , -45 , 56.6 ] '; + expect(parserFnConstructor(str)).not.toThrow(); + expect(mockDB.setYAxisTitle).toHaveBeenCalledWith('yAxisName'); + expect(mockDB.setXAxisTitle).toHaveBeenCalledWith('xAxisName'); + expect(mockDB.addLineData).toHaveBeenCalledWith('lineTitle with space', [23, -45, 56.6]); + + clearMocks(); + str = + 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n line "lineTitle with space" [ +23 , -4aa5 , 56.6 ] '; + expect(parserFnConstructor(str)).toThrow(); + }); + it('parse bar Data', () => { + let str = 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n bar barTitle [23, 45, 56.6]'; + expect(parserFnConstructor(str)).not.toThrow(); + expect(mockDB.setYAxisTitle).toHaveBeenCalledWith('yAxisName'); + expect(mockDB.setXAxisTitle).toHaveBeenCalledWith('xAxisName'); + expect(mockDB.addBarData).toHaveBeenCalledWith('barTitle', [23, 45, 56.6]); + + clearMocks(); + + str = + 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n bar "barTitle with space" [ +23 , -45 , 56.6 ] '; + expect(parserFnConstructor(str)).not.toThrow(); + expect(mockDB.setYAxisTitle).toHaveBeenCalledWith('yAxisName'); + expect(mockDB.setXAxisTitle).toHaveBeenCalledWith('xAxisName'); + expect(mockDB.addBarData).toHaveBeenCalledWith('barTitle with space', [23, -45, 56.6]); + clearMocks(); + + str = + 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n bar "barTitle with space" [ +23 , -4aa5 , 56.6 ] '; + expect(parserFnConstructor(str)).toThrow(); + }); + it('parse multiple bar and line', () => { + let str = + 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n bar barTitle1 [23, 45, 56.6] \n line lineTitle1 [11, 45.5, 67, 23] \n bar barTitle2 [13, 42, 56.89] \n line lineTitle2 [45, 99, 012]'; + expect(parserFnConstructor(str)).not.toThrow(); + expect(mockDB.setYAxisTitle).toHaveBeenCalledWith('yAxisName'); + expect(mockDB.setXAxisTitle).toHaveBeenCalledWith('xAxisName'); + expect(mockDB.addBarData).toHaveBeenCalledWith('barTitle1', [23, 45, 56.6]); + expect(mockDB.addBarData).toHaveBeenCalledWith('barTitle2', [13, 42, 56.89]); + expect(mockDB.addLineData).toHaveBeenCalledWith('lineTitle1', [11, 45.5, 67, 23]); + expect(mockDB.addLineData).toHaveBeenCalledWith('lineTitle2', [45, 99, 12]); }); }); From 1d98ead5c2e4dfed1dfddbb4df3ef997d6aff3d8 Mon Sep 17 00:00:00 2001 From: Subhash Halder <halder.subhash@gmail.com> Date: Sun, 2 Jul 2023 13:18:28 +0530 Subject: [PATCH 012/457] Added support for Diagram title --- packages/mermaid/src/diagrams/xychart/parser/xychart.jison | 1 + .../src/diagrams/xychart/parser/xychart.jison.spec.ts | 7 +++++++ 2 files changed, 8 insertions(+) diff --git a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison index 047eeebc53..0f211fe878 100644 --- a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison +++ b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison @@ -154,6 +154,7 @@ statement : | SPACE statement | directive + | title title_value { $$=$2.trim();yy.setDiagramTitle($$); } | X_AXIS parseXAxis | Y_AXIS parseYAxis | parseLine diff --git a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts index 1ce73abf36..a999d9b8d5 100644 --- a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts +++ b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts @@ -11,6 +11,7 @@ const parserFnConstructor = (str: string) => { const mockDB: Record<string, Mock<any, any>> = { parseDirective: vi.fn(), setOrientation: vi.fn(), + setDiagramTitle: vi.fn(), setXAxisTitle: vi.fn(), setXAxisRangeData: vi.fn(), addXAxisBand: vi.fn(), @@ -43,6 +44,12 @@ describe('Testing xychart jison file', () => { expect(parserFnConstructor(str)).not.toThrow(); }); + it('parse title of the chart', () => { + const str = 'xychart-beta \n title This is a title'; + expect(parserFnConstructor(str)).not.toThrow(); + expect(mockDB.setDiagramTitle).toHaveBeenCalledWith('This is a title'); + }); + it('should be able to parse directive', () => { const str = '%%{init: {"xychart": {"chartWidth": 600, "chartHeight": 600} } }%% \n xychart-beta'; From ebd329149b0a6cd08196ae38a09f74df7621abfb Mon Sep 17 00:00:00 2001 From: Subhash Halder <halder.subhash@gmail.com> Date: Sun, 2 Jul 2023 17:14:12 +0530 Subject: [PATCH 013/457] Able to draw till axis from chart configuration - there is some issue with drawing the plot from chart data --- demos/xychart.html | 14 +- packages/mermaid/src/config.type.ts | 32 +++++ .../xychart/chartBuilder/Interfaces.ts | 53 +------ .../xychart/chartBuilder/Orchestrator.ts | 5 +- .../chartBuilder/components/ChartTitle.ts | 3 +- .../chartBuilder/components/axis/index.ts | 15 +- .../chartBuilder/components/plot/BarPlot.ts | 7 +- .../chartBuilder/components/plot/LinePlot.ts | 7 +- .../components/plot/PlotBorder.ts | 41 +++--- .../chartBuilder/components/plot/index.ts | 3 +- .../diagrams/xychart/chartBuilder/index.ts | 103 +------------- .../src/diagrams/xychart/parser/xychart.jison | 23 ++- .../xychart/parser/xychart.jison.spec.ts | 66 ++++++--- .../mermaid/src/diagrams/xychart/xychartDb.ts | 134 +++++++++++++++++- 14 files changed, 282 insertions(+), 224 deletions(-) diff --git a/demos/xychart.html b/demos/xychart.html index 6595b56737..13d5dfde9a 100644 --- a/demos/xychart.html +++ b/demos/xychart.html @@ -16,11 +16,23 @@ <body> <h1>XY Charts demos</h1> <pre class="mermaid"> - xychart + xychart-beta horizontal + title Basic xychart + x-axis "this is x axis" [category1, "category 2", category3] + y-axis yaxisText 10 --> 150 </pre> <hr /> + <h1>XY Charts demos</h1> + <pre class="mermaid"> + xychart-beta + title Basic xychart + x-axis "this is x axis" [category1, "category 2", category3] + y-axis yaxisText 10 --> 150 + </pre> + + <hr /> <script type="module"> import mermaid from './mermaid.esm.mjs'; mermaid.initialize({ diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts index df87e9c406..aa9f2b81ed 100644 --- a/packages/mermaid/src/config.type.ts +++ b/packages/mermaid/src/config.type.ts @@ -150,6 +150,7 @@ export interface MermaidConfig { er?: ErDiagramConfig; pie?: PieDiagramConfig; quadrantChart?: QuadrantChartConfig; + xyChart?: XYChartConfig; requirement?: RequirementDiagramConfig; mindmap?: MindmapDiagramConfig; gitGraph?: GitGraphDiagramConfig; @@ -703,6 +704,37 @@ export interface QuadrantChartConfig extends BaseDiagramConfig { */ quadrantExternalBorderStrokeWidth?: number; } + +export interface XYChartAxisConfig { + showLabel: boolean; + labelFontSize: number; + lablePadding: number; + labelFill: string; + showTitle: boolean; + titleFontSize: number; + titlePadding: number; + titleFill: string; + showTick: boolean; + tickLength: number; + tickWidth: number; + tickFill: string; +} + +export interface XYChartConfig extends BaseDiagramConfig { + width: number; + height: number; + fontFamily: string; + titleFontSize: number; + titleFill: string; + titlePadding: number; + showtitle: boolean; + xAxis: XYChartAxisConfig; + yAxis: XYChartAxisConfig; + plotBorderWidth: number; + chartOrientation: 'vertical' | 'horizontal'; + plotReservedSpacePercent: number; +} + /** * The object containing configurations specific for entity relationship diagrams * diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts index b7e29eb809..e519d0a016 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts @@ -9,41 +9,6 @@ export interface ChartComponent { getDrawableElements(): DrawableElem[]; } -export enum OrientationEnum { - VERTICAL = 'vertical', - HORIZONTAL = 'horizontal', -} - -export interface AxisConfig { - showLabel: boolean; - labelFontSize: number; - lablePadding: number; - labelFill: string; - showTitle: boolean; - titleFontSize: number; - titlePadding: number; - titleFill: string; - showTick: boolean; - tickLength: number; - tickWidth: number; - tickFill: string; -} - -export interface XYChartConfig { - width: number; - height: number; - fontFamily: string; - titleFontSize: number; - titleFill: string; - titlePadding: number; - showtitle: boolean; - xAxis: AxisConfig; - yAxis: AxisConfig; - plotBorderWidth: number; - chartOrientation: OrientationEnum; - plotReservedSpacePercent: number; -} - export type SimplePlotDataType = [string | number, number][]; export interface LinePlotData { @@ -74,6 +39,11 @@ export interface LinearAxisDataType{ export type AxisDataType = LinearAxisDataType | BandAxisDataType; +export function isBandAxisData(data: any): data is BandAxisDataType { + return data.categories && Array.isArray(data.categories); +} + + export interface XYChartData { xAxis: AxisDataType; yAxis: AxisDataType; @@ -88,19 +58,6 @@ export interface Dimension { export interface BoundingRect extends Point, Dimension {} -export interface XYChartSpaceProperty extends BoundingRect { - orientation: OrientationEnum; -} - -export interface XYChartSpace { - chart: XYChartSpaceProperty; - title: XYChartSpaceProperty; - xAxisLabels: XYChartSpaceProperty; - xAxisTitle: XYChartSpaceProperty; - yAxisLabel: XYChartSpaceProperty; - yAxisTitle: XYChartSpaceProperty; -} - export interface Point { x: number; y: number; diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts index f76ec95608..b7ab4ca140 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts @@ -1,9 +1,10 @@ import { log } from '../../../logger.js'; -import { DrawableElem, OrientationEnum, XYChartConfig, XYChartData } from './Interfaces.js'; +import { DrawableElem, XYChartData } from './Interfaces.js'; import { getChartTitleComponent } from './components/ChartTitle.js'; import { ChartComponent } from './Interfaces.js'; import { IAxis, getAxis } from './components/axis/index.js'; import { IPlot, getPlotComponent } from './components/plot/index.js'; +import { XYChartConfig } from '../../../config.type.js'; export class Orchestrator { private componentStore: { @@ -158,7 +159,7 @@ export class Orchestrator { } private calculateSpace() { - if (this.chartConfig.chartOrientation === OrientationEnum.HORIZONTAL) { + if (this.chartConfig.chartOrientation === 'horizontal') { this.calculateHorizonatalSpace(); } else { this.calculateVerticalSpace(); diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts index 5c60e2a9e4..ae70994717 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts @@ -1,14 +1,13 @@ import { ITextDimensionCalculator, TextDimensionCalculator } from '../TextDimensionCalculator.js'; import { - XYChartConfig, XYChartData, Dimension, BoundingRect, DrawableElem, Point, - OrientationEnum, } from '../Interfaces.js'; import { ChartComponent } from '../Interfaces.js'; +import { XYChartConfig } from '../../../../config.type.js'; export class ChartTitle implements ChartComponent { private boundingRect: BoundingRect; diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts index 75d1999549..7888ac286b 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts @@ -1,13 +1,12 @@ import { - AxisConfig, AxisDataType, - BandAxisDataType, - LinearAxisDataType + isBandAxisData, } from '../../Interfaces.js'; import { TextDimensionCalculator } from '../../TextDimensionCalculator.js'; import { ChartComponent } from '../../Interfaces.js'; import { BandAxis } from './BandAxis.js'; import { LinearAxis } from './LinearAxis.js'; +import { XYChartAxisConfig } from '../../../../../config.type.js'; export type AxisPosition = 'left' | 'right' | 'top' | 'bottom'; @@ -19,15 +18,7 @@ export interface IAxis extends ChartComponent { setRange(range: [number, number]): void; } -function isLinearAxisData(data: any): data is LinearAxisDataType { - return !(Number.isNaN(data.min) || Number.isNaN(data.max)); -} - -function isBandAxisData(data: any): data is BandAxisDataType { - return data.categories && Array.isArray(data.categories); -} - -export function getAxis(data: AxisDataType, axisConfig: AxisConfig): IAxis { +export function getAxis(data: AxisDataType, axisConfig: XYChartAxisConfig): IAxis { const textDimansionCalculator = new TextDimensionCalculator(); if (isBandAxisData(data)) { return new BandAxis(axisConfig, data.categories, data.title, textDimansionCalculator); diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts index 6d29a81b6d..5b4a22f4a3 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts @@ -1,9 +1,8 @@ +import { XYChartConfig } from '../../../../../config.type.js'; import { BarPlotData, BoundingRect, DrawableElem, - OrientationEnum, - SimplePlotDataType, } from '../../Interfaces.js'; import { IAxis } from '../axis/index.js'; @@ -13,7 +12,7 @@ export class BarPlot { private boundingRect: BoundingRect, private xAxis: IAxis, private yAxis: IAxis, - private orientation: OrientationEnum + private orientation: XYChartConfig['chartOrientation'] ) {} getDrawableElement(): DrawableElem[] { @@ -29,7 +28,7 @@ export class BarPlot { (1 - barPaddingPercent / 100); const barWidthHalf = barWidth / 2; - if (this.orientation === OrientationEnum.HORIZONTAL) { + if (this.orientation === 'horizontal') { return [ { groupTexts: ['plot', 'bar-plot'], diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/LinePlot.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/LinePlot.ts index d35722618d..e342352b8e 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/LinePlot.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/LinePlot.ts @@ -1,13 +1,14 @@ import { line } from 'd3'; -import { DrawableElem, LinePlotData, OrientationEnum } from '../../Interfaces.js'; +import { DrawableElem, LinePlotData } from '../../Interfaces.js'; import { IAxis } from '../axis/index.js'; +import { XYChartConfig } from '../../../../../config.type.js'; export class LinePlot { constructor( private plotData: LinePlotData, private xAxis: IAxis, private yAxis: IAxis, - private orientation: OrientationEnum + private orientation: XYChartConfig['chartOrientation'] ) {} getDrawableElement(): DrawableElem[] { @@ -17,7 +18,7 @@ export class LinePlot { ]); let path: string | null; - if (this.orientation === OrientationEnum.HORIZONTAL) { + if (this.orientation === 'horizontal') { path = line() .y((d) => d[0]) .x((d) => d[1])(finalData); diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/PlotBorder.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/PlotBorder.ts index ee5f5e19cd..2eb475d1fa 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/PlotBorder.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/PlotBorder.ts @@ -1,23 +1,26 @@ -import { BoundingRect, DrawableElem, OrientationEnum } from '../../Interfaces.js'; +import { XYChartConfig } from '../../../../../config.type.js'; +import { BoundingRect, DrawableElem } from '../../Interfaces.js'; export class PlotBorder { - constructor(private boundingRect: BoundingRect, private orientation: OrientationEnum) {} + constructor(private boundingRect: BoundingRect, private orientation: XYChartConfig['chartOrientation']) {} getDrawableElement(): DrawableElem[] { - const {x, y, width, height} = this.boundingRect; - if(this.orientation === OrientationEnum.HORIZONTAL) { - return [ - { - groupTexts: ['plot', 'chart-border'], - type: 'path', - data: [ - { - path: `M ${x},${y} L ${x + width},${y} M ${x + width},${y + height} M ${x},${y + height} L ${x},${y}`, - strokeFill: '#000000', - strokeWidth: 1, - }, - ], - }, - ]; + const { x, y, width, height } = this.boundingRect; + if (this.orientation === 'horizontal') { + return [ + { + groupTexts: ['plot', 'chart-border'], + type: 'path', + data: [ + { + path: `M ${x},${y} L ${x + width},${y} M ${x + width},${y + height} M ${x},${ + y + height + } L ${x},${y}`, + strokeFill: '#000000', + strokeWidth: 1, + }, + ], + }, + ]; } return [ { @@ -25,7 +28,9 @@ export class PlotBorder { type: 'path', data: [ { - path: `M ${x},${y} M ${x + width},${y} M ${x + width},${y + height} L ${x},${y + height} L ${x},${y}`, + path: `M ${x},${y} M ${x + width},${y} M ${x + width},${y + height} L ${x},${ + y + height + } L ${x},${y}`, strokeFill: '#000000', strokeWidth: 1, }, diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts index 92b3668f23..16a831fdd0 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts @@ -1,11 +1,9 @@ import { - XYChartConfig, XYChartData, Dimension, BoundingRect, DrawableElem, Point, - OrientationEnum, ChartPlotEnum, } from '../../Interfaces.js'; import { IAxis } from '../axis/index.js'; @@ -13,6 +11,7 @@ import { ChartComponent } from '../../Interfaces.js'; import { LinePlot } from './LinePlot.js'; import { PlotBorder } from './PlotBorder.js'; import { BarPlot } from './BarPlot.js'; +import { XYChartConfig } from '../../../../../config.type.js'; export interface IPlot extends ChartComponent { diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts index 834834f8e1..7d71e78c79 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts @@ -1,107 +1,18 @@ // @ts-ignore: TODO Fix ts errors -import { defaultConfig } from '../../../config.js'; +import { XYChartConfig } from '../../../config.type.js'; import { log } from '../../../logger.js'; import { - ChartPlotEnum, - DrawableElem, - OrientationEnum, - XYChartConfig, - XYChartData + DrawableElem, + XYChartData, } from './Interfaces.js'; import { Orchestrator } from './Orchestrator.js'; export class XYChartBuilder { - private config: XYChartConfig; - private chartData: XYChartData; - constructor() { - this.config = { - width: 700, - height: 500, - fontFamily: defaultConfig.fontFamily || 'Sans', - titleFontSize: 16, - titleFill: '#000000', - titlePadding: 5, - showtitle: true, - plotBorderWidth: 2, - yAxis: { - showLabel: true, - labelFontSize: 14, - lablePadding: 5, - labelFill: '#000000', - showTitle: true, - titleFontSize: 16, - titlePadding: 5, - titleFill: '#000000', - showTick: true, - tickLength: 5, - tickWidth: 2, - tickFill: '#000000', - }, - xAxis: { - showLabel: true, - labelFontSize: 14, - lablePadding: 5, - labelFill: '#000000', - showTitle: true, - titleFontSize: 16, - titlePadding: 5, - titleFill: '#000000', - showTick: true, - tickLength: 5, - tickWidth: 2, - tickFill: '#000000', - }, - chartOrientation: OrientationEnum.HORIZONTAL, - plotReservedSpacePercent: 50, - }; - this.chartData = { - yAxis: { - title: 'yAxis1', - min: 0, - max: 100, - }, - xAxis: { - title: 'xAxis', - categories: ['category1', 'category2', 'category3'], - }, - title: 'this is a sample task', - plots: [ - { - type: ChartPlotEnum.BAR, - fill: '#0000bb', - data: [ - ['category1', 23], - ['category2', 56], - ['category3', 34], - ], - }, - { - type: ChartPlotEnum.LINE, - strokeFill: '#bb0000', - strokeWidth: 2, - data: [ - ['category1', 33], - ['category2', 45], - ['category3', 65], - ], - }, - ], - }; - } - - setWidth(width: number) { - this.config.width = width; - } - - setHeight(height: number) { - this.config.height = height; - } - - build(): DrawableElem[] { - log.trace(`Build start with Config: ${JSON.stringify(this.config, null, 2)}`); - log.trace(`Build start with ChartData: ${JSON.stringify(this.chartData, null, 2)}`); - const orchestrator = new Orchestrator(this.config, this.chartData); + static build(config: XYChartConfig, chartData: XYChartData): DrawableElem[] { + log.trace(`Build start with Config: ${JSON.stringify(config, null, 2)}`); + log.trace(`Build start with ChartData: ${JSON.stringify(chartData, null, 2)}`); + const orchestrator = new Orchestrator(config, chartData); return orchestrator.getDrawableElement(); } } diff --git a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison index 0f211fe878..7c17d1e571 100644 --- a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison +++ b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison @@ -20,7 +20,6 @@ %x axis_data %x axis_data_band %x axis_data_band_capture -%x axis_data_band_str %x line %x line_title %x line_data @@ -67,14 +66,10 @@ accDescr\s*"{"\s* { this.begin("acc_descr_multiline");} <axis_data>[+-]?\d+(?:\.\d+)?" "*"-->"" "*[+-]?\d+(?:\.\d+)?" "* { return 'AXIS_RANGE_DATA';} -<axis_data>[\[]" "* {this.begin("axis_data_band"); this.begin("axis_data_band_capture")} -<axis_data_band>[,]" "* {this.begin("axis_data_band_capture")} -<axis_data_band_capture>["] {this.begin("axis_data_band_str");} -<axis_data_band_str>[^"]+ {return "AXIS_BAND_DATA";} -<axis_data_band_str>["]" "* {this.popState(); this.popState();} -<axis_data_band_capture>[^\s]+" "* {this.popState(); return "AXIS_BAND_DATA"} +<axis_data>[\[]" "* {this.begin("axis_data_band"), this.begin("axis_data_band_capture")} +<axis_data_band_capture>(["][^",]+["]|[^\s\"\,]]+)" "*([,]" "*(["][^",]+["]|[^\s\]",]+)" "*)* { this.popState(); return "AXIS_BAND_DATA"; } <axis_data_band>[\]]" "* {this.popState(); return "AXIS_BAND_DATA_END"} -<axis_data>[\r\n]+ {this.popState(); this.popState();} +<axis_data>[\s]+ {this.popState(); this.popState();} "line"" "* {this.begin("line"); return 'LINE';} @@ -162,27 +157,27 @@ statement ; parseLine - : LINE LINE_TITLE LINE_DATA {yy.addLineData($2.trim(), $3.split(',').map(d => Number(d.trim())));} + : LINE LINE_TITLE LINE_DATA {yy.setLineData($2.trim(), $3.split(',').map(d => Number(d.trim())));} ; parseBar - : BAR BAR_TITLE BAR_DATA {yy.addBarData($2.trim(), $3.split(',').map(d => Number(d.trim())));} + : BAR BAR_TITLE BAR_DATA {yy.setBarData($2.trim(), $3.split(',').map(d => Number(d.trim())));} ; parseXAxis : AXIS_TITLE statement {yy.setXAxisTitle($1.trim());} - | AXIS_TITLE xAxisBandData {yy.setXAxisTitle($1.trim());} - | AXIS_TITLE AXIS_RANGE_DATA {yy.setXAxisTitle($1.trim()); $$ = $2.split("-->"); yy.setXAxisRangeData(Number($$[0]), Number($$[1]));} + | AXIS_TITLE xAxisBandData statement {yy.setXAxisTitle($1.trim());} + | AXIS_TITLE AXIS_RANGE_DATA statement {yy.setXAxisTitle($1.trim()); $$ = $2.split("-->"); yy.setXAxisRangeData(Number($$[0]), Number($$[1]));} ; xAxisBandData - : AXIS_BAND_DATA xAxisBandData {yy.addXAxisBand($1.trim());} + : AXIS_BAND_DATA xAxisBandData {yy.setXAxisBand($1.split(',').map(d => { let m = d.trim().match(/^(?:["]([^"]+)["]|([^\s"]+))$/); return m ? m[1] || m[2] : "";}));} | AXIS_BAND_DATA_END ; parseYAxis : AXIS_TITLE statement {yy.setYAxisTitle($1.trim());} - | AXIS_TITLE AXIS_RANGE_DATA {yy.setYAxisTitle($1.trim()); $$ = $2.split("-->"); yy.setYAxisRangeData(Number($$[0]), Number($$[1]));} + | AXIS_TITLE AXIS_RANGE_DATA statement {yy.setYAxisTitle($1.trim()); $$ = $2.split("-->"); yy.setYAxisRangeData(Number($$[0]), Number($$[1]));} ; directive diff --git a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts index a999d9b8d5..41d4f36dbf 100644 --- a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts +++ b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts @@ -14,12 +14,11 @@ const mockDB: Record<string, Mock<any, any>> = { setDiagramTitle: vi.fn(), setXAxisTitle: vi.fn(), setXAxisRangeData: vi.fn(), - addXAxisBand: vi.fn(), + setXAxisBand: vi.fn(), setYAxisTitle: vi.fn(), setYAxisRangeData: vi.fn(), - addYAxisBand: vi.fn(), - addLineData: vi.fn(), - addBarData: vi.fn(), + setLineData: vi.fn(), + setBarData: vi.fn(), }; function clearMocks() { @@ -109,12 +108,27 @@ describe('Testing xychart jison file', () => { clearMocks(); - str = 'xychart-beta \nx-axis xAxisName [ "cat1" , cat2 ] \n'; + str = 'xychart-beta \nx-axis xAxisName [ "cat1" , cat2 ] \n '; expect(parserFnConstructor(str)).not.toThrow(); expect(mockDB.setXAxisTitle).toHaveBeenCalledWith('xAxisName'); - expect(mockDB.addXAxisBand).toHaveBeenCalledTimes(2); - expect(mockDB.addXAxisBand).toHaveBeenNthCalledWith(1, 'cat2'); - expect(mockDB.addXAxisBand).toHaveBeenNthCalledWith(2, 'cat1'); + expect(mockDB.setXAxisBand).toHaveBeenCalledWith(["cat1", "cat2"]); + clearMocks(); + + + str = `xychart-beta \n x-axis "this is x axis" [category1, "category 2", category3]\n` + expect(parserFnConstructor(str)).not.toThrow(); + expect(mockDB.setXAxisTitle).toHaveBeenCalledWith('this is x axis'); + expect(mockDB.setXAxisBand).toHaveBeenCalledWith(["category1", "category 2", "category3"]); + clearMocks(); + + str = 'xychart-beta \nx-axis xAxisName [ "cat1 with space" , cat2 , cat3] \n '; + expect(parserFnConstructor(str)).not.toThrow(); + expect(mockDB.setXAxisTitle).toHaveBeenCalledWith('xAxisName'); + expect(mockDB.setXAxisBand).toHaveBeenCalledWith(["cat1 with space", "cat2", "cat3"]); + clearMocks(); + + str = 'xychart-beta \nx-axis xAxisName [ "cat1 with space" , cat2 asdf , cat3] \n '; + expect(parserFnConstructor(str)).toThrow(); }); it('parse y-axis', () => { let str = 'xychart-beta \ny-axis yAxisName\n'; @@ -150,7 +164,7 @@ describe('Testing xychart jison file', () => { expect(parserFnConstructor(str)).not.toThrow(); expect(mockDB.setYAxisTitle).toHaveBeenCalledWith('yAxisName'); expect(mockDB.setXAxisTitle).toHaveBeenCalledWith('xAxisName'); - expect(mockDB.addLineData).toHaveBeenCalledWith('lineTitle', [23, 45, 56.6]); + expect(mockDB.setLineData).toHaveBeenCalledWith('lineTitle', [23, 45, 56.6]); clearMocks(); @@ -159,7 +173,7 @@ describe('Testing xychart jison file', () => { expect(parserFnConstructor(str)).not.toThrow(); expect(mockDB.setYAxisTitle).toHaveBeenCalledWith('yAxisName'); expect(mockDB.setXAxisTitle).toHaveBeenCalledWith('xAxisName'); - expect(mockDB.addLineData).toHaveBeenCalledWith('lineTitle with space', [23, -45, 56.6]); + expect(mockDB.setLineData).toHaveBeenCalledWith('lineTitle with space', [23, -45, 56.6]); clearMocks(); str = @@ -171,7 +185,7 @@ describe('Testing xychart jison file', () => { expect(parserFnConstructor(str)).not.toThrow(); expect(mockDB.setYAxisTitle).toHaveBeenCalledWith('yAxisName'); expect(mockDB.setXAxisTitle).toHaveBeenCalledWith('xAxisName'); - expect(mockDB.addBarData).toHaveBeenCalledWith('barTitle', [23, 45, 56.6]); + expect(mockDB.setBarData).toHaveBeenCalledWith('barTitle', [23, 45, 56.6]); clearMocks(); @@ -180,7 +194,7 @@ describe('Testing xychart jison file', () => { expect(parserFnConstructor(str)).not.toThrow(); expect(mockDB.setYAxisTitle).toHaveBeenCalledWith('yAxisName'); expect(mockDB.setXAxisTitle).toHaveBeenCalledWith('xAxisName'); - expect(mockDB.addBarData).toHaveBeenCalledWith('barTitle with space', [23, -45, 56.6]); + expect(mockDB.setBarData).toHaveBeenCalledWith('barTitle with space', [23, -45, 56.6]); clearMocks(); str = @@ -193,9 +207,29 @@ describe('Testing xychart jison file', () => { expect(parserFnConstructor(str)).not.toThrow(); expect(mockDB.setYAxisTitle).toHaveBeenCalledWith('yAxisName'); expect(mockDB.setXAxisTitle).toHaveBeenCalledWith('xAxisName'); - expect(mockDB.addBarData).toHaveBeenCalledWith('barTitle1', [23, 45, 56.6]); - expect(mockDB.addBarData).toHaveBeenCalledWith('barTitle2', [13, 42, 56.89]); - expect(mockDB.addLineData).toHaveBeenCalledWith('lineTitle1', [11, 45.5, 67, 23]); - expect(mockDB.addLineData).toHaveBeenCalledWith('lineTitle2', [45, 99, 12]); + expect(mockDB.setBarData).toHaveBeenCalledWith('barTitle1', [23, 45, 56.6]); + expect(mockDB.setBarData).toHaveBeenCalledWith('barTitle2', [13, 42, 56.89]); + expect(mockDB.setLineData).toHaveBeenCalledWith('lineTitle1', [11, 45.5, 67, 23]); + expect(mockDB.setLineData).toHaveBeenCalledWith('lineTitle2', [45, 99, 12]); + clearMocks(); + + str = ` + xychart-beta horizontal + title Basic xychart + x-axis "this is x axis" [category1, "category 2", category3] + y-axis yaxisText 10 --> 150 + bar barTitle1 [23, 45, 56.6] + line lineTitle1 [11, 45.5, 67, 23] + bar barTitle2 [13, 42, 56.89] + line lineTitle2 [45, 99, 012]`; + expect(parserFnConstructor(str)).not.toThrow(); + expect(mockDB.setYAxisTitle).toHaveBeenCalledWith('yaxisText'); + expect(mockDB.setYAxisRangeData).toHaveBeenCalledWith(10, 150); + expect(mockDB.setXAxisTitle).toHaveBeenCalledWith('this is x axis'); + expect(mockDB.setXAxisBand).toHaveBeenCalledWith(["category1", "category 2", "category3"]); + expect(mockDB.setBarData).toHaveBeenCalledWith('barTitle1', [23, 45, 56.6]); + expect(mockDB.setBarData).toHaveBeenCalledWith('barTitle2', [13, 42, 56.89]); + expect(mockDB.setLineData).toHaveBeenCalledWith('lineTitle1', [11, 45.5, 67, 23]); + expect(mockDB.setLineData).toHaveBeenCalledWith('lineTitle2', [45, 99, 12]); }); }); diff --git a/packages/mermaid/src/diagrams/xychart/xychartDb.ts b/packages/mermaid/src/diagrams/xychart/xychartDb.ts index dcf66b1b26..cc002405ec 100644 --- a/packages/mermaid/src/diagrams/xychart/xychartDb.ts +++ b/packages/mermaid/src/diagrams/xychart/xychartDb.ts @@ -12,9 +12,96 @@ import { clear as commonClear, } from '../../commonDb.js'; import { XYChartBuilder } from './chartBuilder/index.js'; -import { DrawableElem } from './chartBuilder/Interfaces.js'; +import { ChartPlotEnum, DrawableElem, XYChartData, isBandAxisData } from './chartBuilder/Interfaces.js'; +import { XYChartConfig } from '../../config.type.js'; const config = configApi.getConfig(); +let chartWidth = 600; +let chartHeight = 500; + +function getChartDefaultConfig(): XYChartConfig { + return config.xyChart + ? { ...config.xyChart, yAxis: { ...config.xyChart.yAxis }, xAxis: { ...config.xyChart.xAxis } } + : { + width: 700, + height: 500, + fontFamily: config.fontFamily || 'Sans', + titleFontSize: 16, + titleFill: '#000000', + titlePadding: 5, + showtitle: true, + plotBorderWidth: 2, + yAxis: { + showLabel: true, + labelFontSize: 14, + lablePadding: 5, + labelFill: '#000000', + showTitle: true, + titleFontSize: 16, + titlePadding: 5, + titleFill: '#000000', + showTick: true, + tickLength: 5, + tickWidth: 2, + tickFill: '#000000', + }, + xAxis: { + showLabel: true, + labelFontSize: 14, + lablePadding: 5, + labelFill: '#000000', + showTitle: true, + titleFontSize: 16, + titlePadding: 5, + titleFill: '#000000', + showTick: true, + tickLength: 5, + tickWidth: 2, + tickFill: '#000000', + }, + chartOrientation: 'vertical', + plotReservedSpacePercent: 50, + }; +} + +function getChartDefalutData(): XYChartData { + return { + yAxis: { + title: 'yAxis1', + min: 0, + max: 100, + }, + xAxis: { + title: 'xAxis', + categories: [], + }, + title: '', + plots: [ + { + type: ChartPlotEnum.BAR, + fill: '#0000bb', + data: [ + ['category1', 23], + ['category 2', 56], + ['category3', 34], + ], + }, + { + type: ChartPlotEnum.LINE, + strokeFill: '#bb0000', + strokeWidth: 2, + data: [ + ['category1', 33], + ['category 2', 45], + ['category3', 65], + ], + }, + ], + }; +} + +let xyChartConfig: XYChartConfig = getChartDefaultConfig(); +let xyChartData: XYChartData = getChartDefalutData(); function textSanitizer(text: string) { return sanitizeText(text.trim(), config); @@ -23,24 +110,51 @@ function textSanitizer(text: string) { function parseDirective(statement: string, context: string, type: string) { // @ts-ignore: TODO Fix ts errors mermaidAPI.parseDirective(this, statement, context, type); -}; +} -const xyChartBuilder = new XYChartBuilder(); + +function setOrientation(oriantation: string) { + if (oriantation === 'horizontal') { + xyChartConfig.chartOrientation = 'horizontal'; + } else { + xyChartConfig.chartOrientation = 'vertical'; + } +} +function setXAxisTitle(title: string) { + xyChartData.xAxis.title = textSanitizer(title); +} +function setXAxisRangeData(min: number, max: number) { + xyChartData.xAxis = {title: xyChartData.xAxis.title, min, max}; +} +function setXAxisBand(categories: string[]) { + xyChartData.xAxis = {title: xyChartData.xAxis.title, categories: categories.map(c => textSanitizer(c))}; +} +function setYAxisTitle(title: string) { + xyChartData.yAxis.title = textSanitizer(title); +} +function setYAxisRangeData(min: number, max: number) { + xyChartData.yAxis = {title: xyChartData.yAxis.title, min, max}; +} +function setLineData(title: string, data: number[]) {} +function setBarData(title: string, data: number[]) {} function getDrawableElem(): DrawableElem[] { - return xyChartBuilder.build(); + xyChartData.title = getDiagramTitle(); + return XYChartBuilder.build(xyChartConfig, xyChartData); } function setHeight(height: number) { - xyChartBuilder.setHeight(height); + xyChartConfig.height = height; } function setWidth(width: number) { - xyChartBuilder.setWidth(width); + xyChartConfig.width = width; } const clear = function () { commonClear(); + xyChartConfig = getChartDefaultConfig(); + xyChartData = getChartDefalutData(); }; export default { @@ -55,4 +169,12 @@ export default { getDiagramTitle, getAccDescription, setAccDescription, + setOrientation, + setXAxisTitle, + setXAxisRangeData, + setXAxisBand, + setYAxisTitle, + setYAxisRangeData, + setLineData, + setBarData, }; From 597f7a8e8729d20908a3cac446a1e3f9ffd0f3d0 Mon Sep 17 00:00:00 2001 From: Subhash Halder <halder.subhash@gmail.com> Date: Mon, 3 Jul 2023 21:44:56 +0530 Subject: [PATCH 014/457] Rendering the chart with all the property from chart config --- demos/xychart.html | 8 ++- .../src/diagrams/xychart/parser/xychart.jison | 20 +++++-- .../xychart/parser/xychart.jison.spec.ts | 17 ++++++ .../mermaid/src/diagrams/xychart/xychartDb.ts | 60 ++++++++++--------- 4 files changed, 69 insertions(+), 36 deletions(-) diff --git a/demos/xychart.html b/demos/xychart.html index 13d5dfde9a..e737545db3 100644 --- a/demos/xychart.html +++ b/demos/xychart.html @@ -18,8 +18,10 @@ <h1>XY Charts demos</h1> <pre class="mermaid"> xychart-beta horizontal title Basic xychart - x-axis "this is x axis" [category1, "category 2", category3] + x-axis "this is x axis" [category1, "category 2", category3, category4] y-axis yaxisText 10 --> 150 + line [23, 46, 75, 43] + bar "sample bat" [52, 96, 35, 10] </pre> <hr /> @@ -28,8 +30,10 @@ <h1>XY Charts demos</h1> <pre class="mermaid"> xychart-beta title Basic xychart - x-axis "this is x axis" [category1, "category 2", category3] + x-axis "this is x axis" [category1, "category 2", category3, category4] y-axis yaxisText 10 --> 150 + line [23, 46, 75, 43] + bar "sample bat" [52, 96, 35, 10] </pre> <hr /> diff --git a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison index 7c17d1e571..1ecd6edf4f 100644 --- a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison +++ b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison @@ -24,6 +24,8 @@ %x line_title %x line_data %x line_data_entries +%x line_data_without_label +%x bar_data_without_label %x bar %x bar_title %x bar_data @@ -77,18 +79,22 @@ accDescr\s*"{"\s* { this.begin("acc_descr_multiline");} <line_title>[^"]+ {return 'LINE_TITLE';} <line_title>["]" "* {this.popState(); this.begin("line_data");} <line_data>"["" "* {this.begin('line_data_entries');} -<line_data_entries>(?:[+-]?\d+(?:\.\d+)?)+(?:" "*[,]" "*(?:[+-]?\d+(?:\.\d+)?)+)*" "* {return 'LINE_DATA'} +<line_data_without_label,line_data_entries>(?:[+-]?\d+(?:\.\d+)?)+(?:" "*[,]" "*(?:[+-]?\d+(?:\.\d+)?)+)*" "* {return 'LINE_DATA'} <line_data_entries>"]"" "* {this.popState(); this.popState(); this.popState()} -<line>[^\s]+" "* {this.begin("line_data"); return 'LINE_TITLE';} +<line_data_without_label>"]"" "* {this.popState(); this.popState()} +<line>[^\s\[]+" "* {this.begin("line_data"); return 'LINE_TITLE';} +<line>"["" "* {this.begin('line_data_without_label');} "bar"" "* {this.begin("bar"); return 'BAR';} <bar>["] {this.begin("bar_title");} <bar_title>[^"]+ {return 'BAR_TITLE';} <bar_title>["]" "* {this.popState(); this.begin("bar_data");} <bar_data>"["" "* {this.begin('bar_data_entries');} -<bar_data_entries>(?:[+-]?\d+(?:\.\d+)?)+(?:" "*[,]" "*(?:[+-]?\d+(?:\.\d+)?)+)*" "* {return 'BAR_DATA'} +<bar_data_without_label,bar_data_entries>(?:[+-]?\d+(?:\.\d+)?)+(?:" "*[,]" "*(?:[+-]?\d+(?:\.\d+)?)+)*" "* {return 'BAR_DATA'} <bar_data_entries>"]"" "* {this.popState(); this.popState(); this.popState()} -<bar>[^\s]+" "* {this.begin("bar_data"); return 'BAR_TITLE';} +<bar_data_without_label>"]"" "* {this.popState(); this.popState()} +<bar>[^\s\[]+" "* {this.begin("bar_data"); return 'BAR_TITLE';} +<bar>"["" "* {this.begin('bar_data_without_label');} @@ -157,11 +163,13 @@ statement ; parseLine - : LINE LINE_TITLE LINE_DATA {yy.setLineData($2.trim(), $3.split(',').map(d => Number(d.trim())));} + : LINE LINE_DATA {yy.setLineData('', $2.split(',').map(d => Number(d.trim())));} + | LINE LINE_TITLE LINE_DATA {yy.setLineData($2.trim(), $3.split(',').map(d => Number(d.trim())));} ; parseBar - : BAR BAR_TITLE BAR_DATA {yy.setBarData($2.trim(), $3.split(',').map(d => Number(d.trim())));} + : BAR BAR_DATA {yy.setBarData('', $2.split(',').map(d => Number(d.trim())));} + | BAR BAR_TITLE BAR_DATA {yy.setBarData($2.trim(), $3.split(',').map(d => Number(d.trim())));} ; parseXAxis diff --git a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts index 41d4f36dbf..2b96a63f78 100644 --- a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts +++ b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts @@ -175,6 +175,14 @@ describe('Testing xychart jison file', () => { expect(mockDB.setXAxisTitle).toHaveBeenCalledWith('xAxisName'); expect(mockDB.setLineData).toHaveBeenCalledWith('lineTitle with space', [23, -45, 56.6]); + // set line data without title + str = + 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n line [ +23 , -45 , 56.6 ] '; + expect(parserFnConstructor(str)).not.toThrow(); + expect(mockDB.setYAxisTitle).toHaveBeenCalledWith('yAxisName'); + expect(mockDB.setXAxisTitle).toHaveBeenCalledWith('xAxisName'); + expect(mockDB.setLineData).toHaveBeenCalledWith('', [23, -45, 56.6]); + clearMocks(); str = 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n line "lineTitle with space" [ +23 , -4aa5 , 56.6 ] '; @@ -197,6 +205,15 @@ describe('Testing xychart jison file', () => { expect(mockDB.setBarData).toHaveBeenCalledWith('barTitle with space', [23, -45, 56.6]); clearMocks(); + // set bar data without title + str = + 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n bar [ +23 , -45 , 56.6 ] '; + expect(parserFnConstructor(str)).not.toThrow(); + expect(mockDB.setYAxisTitle).toHaveBeenCalledWith('yAxisName'); + expect(mockDB.setXAxisTitle).toHaveBeenCalledWith('xAxisName'); + expect(mockDB.setBarData).toHaveBeenCalledWith('', [23, -45, 56.6]); + clearMocks(); + str = 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n bar "barTitle with space" [ +23 , -4aa5 , 56.6 ] '; expect(parserFnConstructor(str)).toThrow(); diff --git a/packages/mermaid/src/diagrams/xychart/xychartDb.ts b/packages/mermaid/src/diagrams/xychart/xychartDb.ts index cc002405ec..19622c4a64 100644 --- a/packages/mermaid/src/diagrams/xychart/xychartDb.ts +++ b/packages/mermaid/src/diagrams/xychart/xychartDb.ts @@ -12,7 +12,12 @@ import { clear as commonClear, } from '../../commonDb.js'; import { XYChartBuilder } from './chartBuilder/index.js'; -import { ChartPlotEnum, DrawableElem, XYChartData, isBandAxisData } from './chartBuilder/Interfaces.js'; +import { + ChartPlotEnum, + DrawableElem, + XYChartData, + isBandAxisData, +} from './chartBuilder/Interfaces.js'; import { XYChartConfig } from '../../config.type.js'; const config = configApi.getConfig(); @@ -76,27 +81,7 @@ function getChartDefalutData(): XYChartData { categories: [], }, title: '', - plots: [ - { - type: ChartPlotEnum.BAR, - fill: '#0000bb', - data: [ - ['category1', 23], - ['category 2', 56], - ['category3', 34], - ], - }, - { - type: ChartPlotEnum.LINE, - strokeFill: '#bb0000', - strokeWidth: 2, - data: [ - ['category1', 33], - ['category 2', 45], - ['category3', 65], - ], - }, - ], + plots: [], }; } @@ -112,7 +97,6 @@ function parseDirective(statement: string, context: string, type: string) { mermaidAPI.parseDirective(this, statement, context, type); } - function setOrientation(oriantation: string) { if (oriantation === 'horizontal') { xyChartConfig.chartOrientation = 'horizontal'; @@ -124,19 +108,39 @@ function setXAxisTitle(title: string) { xyChartData.xAxis.title = textSanitizer(title); } function setXAxisRangeData(min: number, max: number) { - xyChartData.xAxis = {title: xyChartData.xAxis.title, min, max}; + xyChartData.xAxis = { title: xyChartData.xAxis.title, min, max }; } function setXAxisBand(categories: string[]) { - xyChartData.xAxis = {title: xyChartData.xAxis.title, categories: categories.map(c => textSanitizer(c))}; + xyChartData.xAxis = { + title: xyChartData.xAxis.title, + categories: categories.map((c) => textSanitizer(c)), + }; } function setYAxisTitle(title: string) { xyChartData.yAxis.title = textSanitizer(title); } function setYAxisRangeData(min: number, max: number) { - xyChartData.yAxis = {title: xyChartData.yAxis.title, min, max}; + xyChartData.yAxis = { title: xyChartData.yAxis.title, min, max }; +} +function setLineData(title: string, data: number[]) { + if (isBandAxisData(xyChartData.xAxis)) { + xyChartData.plots.push({ + type: ChartPlotEnum.BAR, + fill: '#0000bb', + data: xyChartData.xAxis.categories.map((c, i) => [c, data[i]]), + }); + } +} +function setBarData(title: string, data: number[]) { + if (isBandAxisData(xyChartData.xAxis)) { + xyChartData.plots.push({ + type: ChartPlotEnum.LINE, + strokeFill: '#00ff00', + strokeWidth: 2, + data: xyChartData.xAxis.categories.map((c, i) => [c, data[i]]), + }); + } } -function setLineData(title: string, data: number[]) {} -function setBarData(title: string, data: number[]) {} function getDrawableElem(): DrawableElem[] { xyChartData.title = getDiagramTitle(); From 553be985ae474777b747807bb9c1327735259430 Mon Sep 17 00:00:00 2001 From: Subhash Halder <halder.subhash@gmail.com> Date: Tue, 4 Jul 2023 10:00:13 +0530 Subject: [PATCH 015/457] Improved space management for text --- .../xychart/chartBuilder/Orchestrator.ts | 4 +- .../chartBuilder/TextDimensionCalculator.ts | 56 ++++++++++++++++++- .../chartBuilder/components/ChartTitle.ts | 18 +++--- .../chartBuilder/components/axis/index.ts | 10 ++-- 4 files changed, 71 insertions(+), 17 deletions(-) diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts index b7ab4ca140..6998795134 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts @@ -17,8 +17,8 @@ export class Orchestrator { this.componentStore = { title: getChartTitleComponent(chartConfig, chartData), plot: getPlotComponent(chartConfig, chartData), - xAxis: getAxis(chartData.xAxis, chartConfig.xAxis), - yAxis: getAxis(chartData.yAxis, chartConfig.yAxis), + xAxis: getAxis(chartData.xAxis, chartConfig.xAxis, chartConfig.fontFamily), + yAxis: getAxis(chartData.yAxis, chartConfig.yAxis, chartConfig.fontFamily), }; } diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/TextDimensionCalculator.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/TextDimensionCalculator.ts index c7a252609d..c717163ce2 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/TextDimensionCalculator.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/TextDimensionCalculator.ts @@ -1,7 +1,7 @@ import { Dimension } from './Interfaces.js'; export interface ITextDimensionCalculator { - getDimension(texts: string[], fontSize: number, fontFamily?: string ): Dimension; + getDimension(texts: string[], fontSize: number, fontFamily?: string): Dimension; } export class TextDimensionCalculator implements ITextDimensionCalculator { @@ -13,3 +13,57 @@ export class TextDimensionCalculator implements ITextDimensionCalculator { }; } } + +export class TextDimensionCalculatorWithFont implements ITextDimensionCalculator { + private container: HTMLSpanElement | null = null; + private hiddenElementId = 'mermaid-text-dimension-calculator'; + constructor(fontFamily?: string) { + if (document) { + let parentContainer = document.getElementById(this.hiddenElementId); + if (!parentContainer) { + parentContainer = document.createElement('div'); + parentContainer.id = this.hiddenElementId; + parentContainer.style.position = 'absolute'; + parentContainer.style.top = '-100px'; + parentContainer.style.left = '0px'; + parentContainer.style.visibility = 'hidden'; + document.body.append(parentContainer); + } + const fontClassName = `font-${fontFamily}`; + const prevContainerAvailable = parentContainer.getElementsByClassName(fontClassName); + if (prevContainerAvailable.length > 0) { + this.container = prevContainerAvailable.item(0) as HTMLSpanElement; + } else { + this.container = document.createElement('div'); + this.container.className = fontClassName; + if (fontFamily) { + this.container.style.fontFamily = fontFamily; + } + parentContainer.append(this.container); + } + } + } + getDimension(texts: string[], fontSize: number): Dimension { + if (!this.container) { + return { + width: texts.reduce((acc, cur) => Math.max(cur.length, acc), 0) * fontSize, + height: fontSize, + }; + } + + const dimension: Dimension = { + width: 0, + height: 0, + }; + + this.container.style.fontSize = `${fontSize}px`; + + for (let t of texts) { + this.container.innerHTML = t; + const bbox = this.container.getBoundingClientRect(); + dimension.width = Math.max(dimension.width, bbox.width); + dimension.height = Math.max(dimension.height, bbox.height); + } + return dimension; + } +} diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts index ae70994717..3cad0dea05 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts @@ -1,13 +1,13 @@ -import { ITextDimensionCalculator, TextDimensionCalculator } from '../TextDimensionCalculator.js'; +import { XYChartConfig } from '../../../../config.type.js'; import { - XYChartData, - Dimension, - BoundingRect, - DrawableElem, - Point, + BoundingRect, + ChartComponent, + Dimension, + DrawableElem, + Point, + XYChartData, } from '../Interfaces.js'; -import { ChartComponent } from '../Interfaces.js'; -import { XYChartConfig } from '../../../../config.type.js'; +import { ITextDimensionCalculator, TextDimensionCalculatorWithFont } from '../TextDimensionCalculator.js'; export class ChartTitle implements ChartComponent { private boundingRect: BoundingRect; @@ -75,6 +75,6 @@ export function getChartTitleComponent( chartConfig: XYChartConfig, chartData: XYChartData ): ChartComponent { - const textDimensionCalculator = new TextDimensionCalculator(); + const textDimensionCalculator = new TextDimensionCalculatorWithFont(chartConfig.fontFamily); return new ChartTitle(textDimensionCalculator, chartConfig, chartData); } diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts index 7888ac286b..9953679f01 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts @@ -1,12 +1,12 @@ +import { XYChartAxisConfig } from '../../../../../config.type.js'; import { AxisDataType, + ChartComponent, isBandAxisData, } from '../../Interfaces.js'; -import { TextDimensionCalculator } from '../../TextDimensionCalculator.js'; -import { ChartComponent } from '../../Interfaces.js'; +import { TextDimensionCalculatorWithFont } from '../../TextDimensionCalculator.js'; import { BandAxis } from './BandAxis.js'; import { LinearAxis } from './LinearAxis.js'; -import { XYChartAxisConfig } from '../../../../../config.type.js'; export type AxisPosition = 'left' | 'right' | 'top' | 'bottom'; @@ -18,8 +18,8 @@ export interface IAxis extends ChartComponent { setRange(range: [number, number]): void; } -export function getAxis(data: AxisDataType, axisConfig: XYChartAxisConfig): IAxis { - const textDimansionCalculator = new TextDimensionCalculator(); +export function getAxis(data: AxisDataType, axisConfig: XYChartAxisConfig, fontFamily?: string): IAxis { + const textDimansionCalculator = new TextDimensionCalculatorWithFont(fontFamily); if (isBandAxisData(data)) { return new BandAxis(axisConfig, data.categories, data.title, textDimansionCalculator); } From 355263a4fbeeafacecc411a8bfd08d2809ded853 Mon Sep 17 00:00:00 2001 From: Subhash Halder <halder.subhash@gmail.com> Date: Tue, 4 Jul 2023 19:55:12 +0530 Subject: [PATCH 016/457] Fixed some issue related to rendering and space management --- demos/xychart.html | 15 ++++++++-- .../xychart/chartBuilder/Interfaces.ts | 4 +++ .../xychart/chartBuilder/Orchestrator.ts | 10 +++++-- .../chartBuilder/components/axis/BandAxis.ts | 6 ++-- .../chartBuilder/components/axis/BaseAxis.ts | 29 ++++++++++++------- .../components/axis/LinearAxis.ts | 4 +-- .../chartBuilder/components/axis/index.ts | 3 +- .../chartBuilder/components/plot/BarPlot.ts | 2 +- .../mermaid/src/diagrams/xychart/xychartDb.ts | 10 +++---- 9 files changed, 56 insertions(+), 27 deletions(-) diff --git a/demos/xychart.html b/demos/xychart.html index e737545db3..5803de4b80 100644 --- a/demos/xychart.html +++ b/demos/xychart.html @@ -20,8 +20,8 @@ <h1>XY Charts demos</h1> title Basic xychart x-axis "this is x axis" [category1, "category 2", category3, category4] y-axis yaxisText 10 --> 150 - line [23, 46, 75, 43] bar "sample bat" [52, 96, 35, 10] + line [23, 46, 75, 43] </pre> <hr /> @@ -32,11 +32,22 @@ <h1>XY Charts demos</h1> title Basic xychart x-axis "this is x axis" [category1, "category 2", category3, category4] y-axis yaxisText 10 --> 150 - line [23, 46, 75, 43] bar "sample bat" [52, 96, 35, 10] + line [23, 46, 75, 43] </pre> <hr /> + <h1>XY Charts demos</h1> + <pre class="mermaid"> + xychart-beta horizontal + title Basic xychart + x-axis "this is x axis" [category1, "category 2", category3, category4] + y-axis yaxisText 10 --> 150 + line [23, 46, 75, 43] + </pre> + + <hr /> + <script type="module"> import mermaid from './mermaid.esm.mjs'; mermaid.initialize({ diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts index e519d0a016..fbcd87493a 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts @@ -26,6 +26,10 @@ export interface BarPlotData { export type PlotData = LinePlotData | BarPlotData; +export function isBarPlot(data: PlotData): data is BarPlotData { + return data.type === ChartPlotEnum.BAR; +} + export interface BandAxisDataType { title: string; categories: string[]; diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts index 6998795134..db440b07e9 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts @@ -1,5 +1,5 @@ import { log } from '../../../logger.js'; -import { DrawableElem, XYChartData } from './Interfaces.js'; +import { DrawableElem, XYChartData, isBarPlot } from './Interfaces.js'; import { getChartTitleComponent } from './components/ChartTitle.js'; import { ChartComponent } from './Interfaces.js'; import { IAxis, getAxis } from './components/axis/index.js'; @@ -13,7 +13,7 @@ export class Orchestrator { xAxis: IAxis; yAxis: IAxis; }; - constructor(private chartConfig: XYChartConfig, chartData: XYChartData) { + constructor(private chartConfig: XYChartConfig, private chartData: XYChartData) { this.componentStore = { title: getChartTitleComponent(chartConfig, chartData), plot: getPlotComponent(chartConfig, chartData), @@ -87,6 +87,9 @@ export class Orchestrator { this.componentStore.xAxis.setBoundingBoxXY({ x: chartX, y: chartY + chartHeight }); this.componentStore.yAxis.setRange([chartY, chartY + chartHeight]); this.componentStore.yAxis.setBoundingBoxXY({ x: 0, y: chartY }); + if(this.chartData.plots.find(p => isBarPlot(p))) { + this.componentStore.xAxis.recalculateOuterPaddingToDrawBar(); + } } private calculateHorizonatalSpace() { @@ -156,6 +159,9 @@ export class Orchestrator { this.componentStore.yAxis.setBoundingBoxXY({ x: chartX, y: titleYEnd }); this.componentStore.xAxis.setRange([chartY, chartY + chartHeight]); this.componentStore.xAxis.setBoundingBoxXY({ x: 0, y: chartY }); + if(this.chartData.plots.find(p => isBarPlot(p))) { + this.componentStore.xAxis.recalculateOuterPaddingToDrawBar(); + } } private calculateSpace() { diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BandAxis.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BandAxis.ts index 75a9ab643d..9a5334097c 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BandAxis.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BandAxis.ts @@ -1,15 +1,15 @@ import { ScaleBand, scaleBand } from 'd3'; -import { AxisConfig } from '../../Interfaces.js'; +import { XYChartAxisConfig } from '../../../../../config.type.js'; +import { log } from '../../../../../logger.js'; import { ITextDimensionCalculator } from '../../TextDimensionCalculator.js'; import { BaseAxis } from './BaseAxis.js'; -import { log } from '../../../../../logger.js'; export class BandAxis extends BaseAxis { private scale: ScaleBand<string>; private categories: string[]; constructor( - axisConfig: AxisConfig, + axisConfig: XYChartAxisConfig, categories: string[], title: string, textDimensionCalculator: ITextDimensionCalculator diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts index 618ac0c9a9..861b6dd8e2 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts @@ -1,7 +1,8 @@ -import { Dimension, Point, DrawableElem, BoundingRect, AxisConfig } from '../../Interfaces.js'; -import { AxisPosition, IAxis } from './index.js'; -import { ITextDimensionCalculator } from '../../TextDimensionCalculator.js'; +import { XYChartAxisConfig } from '../../../../../config.type.js'; import { log } from '../../../../../logger.js'; +import { BoundingRect, Dimension, DrawableElem, Point } from '../../Interfaces.js'; +import { ITextDimensionCalculator } from '../../TextDimensionCalculator.js'; +import { AxisPosition, IAxis } from './index.js'; export abstract class BaseAxis implements IAxis { protected boundingRect: BoundingRect = { x: 0, y: 0, width: 0, height: 0 }; @@ -10,10 +11,10 @@ export abstract class BaseAxis implements IAxis { protected showTitle = false; protected showLabel = false; protected showTick = false; - protected innerPadding = 0; + protected outerPadding = 0; constructor( - protected axisConfig: AxisConfig, + protected axisConfig: XYChartAxisConfig, protected title: string, protected textDimensionCalculator: ITextDimensionCalculator ) { @@ -28,7 +29,7 @@ export abstract class BaseAxis implements IAxis { } getRange(): [number, number] { - return [this.range[0] + this.innerPadding, this.range[1] - this.innerPadding]; + return [this.range[0] + this.outerPadding, this.range[1] - this.outerPadding]; } setAxisPosition(axisPosition: AxisPosition): void { @@ -45,9 +46,8 @@ export abstract class BaseAxis implements IAxis { return Math.abs(this.range[0] - this.range[1]) / this.getTickValues().length; } - getTickInnerPadding(): number { - return this.innerPadding * 2; - // return Math.abs(this.range[0] - this.range[1]) / this.getTickValues().length; + getAxisOuterPadding(): number { + return this.outerPadding; } private getLabelDimension(): Dimension { @@ -57,11 +57,18 @@ export abstract class BaseAxis implements IAxis { ); } + recalculateOuterPaddingToDrawBar(): void { + if((0.7 * this.getTickDistance()) > (this.outerPadding * 2) ) { + this.outerPadding = Math.floor((0.7 * this.getTickDistance())/2); + } + this.recalculateScale(); + } + private calculateSpaceIfDrawnHorizontally(availableSpace: Dimension) { let availableHeight = availableSpace.height; if (this.axisConfig.showLabel) { const spaceRequired = this.getLabelDimension(); - this.innerPadding = spaceRequired.width / 2; + this.outerPadding = spaceRequired.width / 2; const heightRequired = spaceRequired.height + this.axisConfig.lablePadding * 2; log.trace('height required for axis label: ', heightRequired); if (heightRequired <= availableHeight) { @@ -93,7 +100,7 @@ export abstract class BaseAxis implements IAxis { let availableWidth = availableSpace.width; if (this.axisConfig.showLabel) { const spaceRequired = this.getLabelDimension(); - this.innerPadding = spaceRequired.height / 2; + this.outerPadding = spaceRequired.height / 2; const widthRequired = spaceRequired.width + this.axisConfig.lablePadding * 2; log.trace('width required for axis label: ', widthRequired); if (widthRequired <= availableWidth) { diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/LinearAxis.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/LinearAxis.ts index 7d46a46b03..39d054bfc7 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/LinearAxis.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/LinearAxis.ts @@ -1,6 +1,6 @@ import { ScaleLinear, scaleLinear } from 'd3'; +import { XYChartAxisConfig } from '../../../../../config.type.js'; import { log } from '../../../../../logger.js'; -import { AxisConfig } from '../../Interfaces.js'; import { ITextDimensionCalculator } from '../../TextDimensionCalculator.js'; import { BaseAxis } from './BaseAxis.js'; @@ -9,7 +9,7 @@ export class LinearAxis extends BaseAxis { private domain: [number, number]; constructor( - axisConfig: AxisConfig, + axisConfig: XYChartAxisConfig, domain: [number, number], title: string, textDimensionCalculator: ITextDimensionCalculator diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts index 9953679f01..e48a0e8455 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts @@ -13,8 +13,9 @@ export type AxisPosition = 'left' | 'right' | 'top' | 'bottom'; export interface IAxis extends ChartComponent { getScaleValue(value: string | number): number; setAxisPosition(axisPosition: AxisPosition): void; - getTickInnerPadding(): number; + getAxisOuterPadding(): number; getTickDistance(): number; + recalculateOuterPaddingToDrawBar(): void; setRange(range: [number, number]): void; } diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts index 5b4a22f4a3..0348ef4b1f 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts @@ -24,7 +24,7 @@ export class BarPlot { const barPaddingPercent = 5; const barWidth = - Math.min(this.xAxis.getTickInnerPadding(), this.xAxis.getTickDistance()) * + Math.min(this.xAxis.getAxisOuterPadding() * 2, this.xAxis.getTickDistance()) * (1 - barPaddingPercent / 100); const barWidthHalf = barWidth / 2; diff --git a/packages/mermaid/src/diagrams/xychart/xychartDb.ts b/packages/mermaid/src/diagrams/xychart/xychartDb.ts index 19622c4a64..b3f253af3f 100644 --- a/packages/mermaid/src/diagrams/xychart/xychartDb.ts +++ b/packages/mermaid/src/diagrams/xychart/xychartDb.ts @@ -125,8 +125,9 @@ function setYAxisRangeData(min: number, max: number) { function setLineData(title: string, data: number[]) { if (isBandAxisData(xyChartData.xAxis)) { xyChartData.plots.push({ - type: ChartPlotEnum.BAR, - fill: '#0000bb', + type: ChartPlotEnum.LINE, + strokeFill: '#00ff00', + strokeWidth: 2, data: xyChartData.xAxis.categories.map((c, i) => [c, data[i]]), }); } @@ -134,9 +135,8 @@ function setLineData(title: string, data: number[]) { function setBarData(title: string, data: number[]) { if (isBandAxisData(xyChartData.xAxis)) { xyChartData.plots.push({ - type: ChartPlotEnum.LINE, - strokeFill: '#00ff00', - strokeWidth: 2, + type: ChartPlotEnum.BAR, + fill: '#0000bb', data: xyChartData.xAxis.categories.map((c, i) => [c, data[i]]), }); } From 89cfa17b074b800f7b6d4018e2629e2b1f70ecb6 Mon Sep 17 00:00:00 2001 From: Subhash Halder <halder.subhash@gmail.com> Date: Tue, 4 Jul 2023 20:42:37 +0530 Subject: [PATCH 017/457] Fixed some merge related issue and eslint issue --- .../src/diagram-api/diagram-orchestration.ts | 2 +- .../xychart/chartBuilder/Interfaces.ts | 11 +- .../xychart/chartBuilder/Orchestrator.ts | 4 +- .../chartBuilder/TextDimensionCalculator.ts | 3 +- .../components/axis/LinearAxis.ts | 4 +- .../chartBuilder/components/plot/index.ts | 5 +- .../mermaid/src/diagrams/xychart/xychartDb.ts | 8 +- .../src/diagrams/xychart/xychartRenderer.ts | 4 +- pnpm-lock.yaml | 939 ++++++++++++++---- 9 files changed, 751 insertions(+), 229 deletions(-) diff --git a/packages/mermaid/src/diagram-api/diagram-orchestration.ts b/packages/mermaid/src/diagram-api/diagram-orchestration.ts index b4dd2fd958..597474ce87 100644 --- a/packages/mermaid/src/diagram-api/diagram-orchestration.ts +++ b/packages/mermaid/src/diagram-api/diagram-orchestration.ts @@ -82,7 +82,7 @@ export const addDiagrams = () => { state, journey, quadrantChart, - sankey + sankey, xychart ); }; diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts index fbcd87493a..fcf6425088 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts @@ -1,8 +1,3 @@ -export enum ChartPlotEnum { - LINE = 'line', - BAR = 'bar', -} - export interface ChartComponent { calculateSpace(availableSpace: Dimension): Dimension; setBoundingBoxXY(point: Point): void; @@ -12,14 +7,14 @@ export interface ChartComponent { export type SimplePlotDataType = [string | number, number][]; export interface LinePlotData { - type: ChartPlotEnum.LINE; + type: 'line'; strokeFill: string, strokeWidth: number, data: SimplePlotDataType; } export interface BarPlotData { - type: ChartPlotEnum.BAR; + type: 'bar' fill: string, data: SimplePlotDataType; } @@ -27,7 +22,7 @@ export interface BarPlotData { export type PlotData = LinePlotData | BarPlotData; export function isBarPlot(data: PlotData): data is BarPlotData { - return data.type === ChartPlotEnum.BAR; + return data.type === 'line'; } export interface BandAxisDataType { diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts index db440b07e9..5f187267cb 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts @@ -87,7 +87,7 @@ export class Orchestrator { this.componentStore.xAxis.setBoundingBoxXY({ x: chartX, y: chartY + chartHeight }); this.componentStore.yAxis.setRange([chartY, chartY + chartHeight]); this.componentStore.yAxis.setBoundingBoxXY({ x: 0, y: chartY }); - if(this.chartData.plots.find(p => isBarPlot(p))) { + if (this.chartData.plots.some((p) => isBarPlot(p))) { this.componentStore.xAxis.recalculateOuterPaddingToDrawBar(); } } @@ -159,7 +159,7 @@ export class Orchestrator { this.componentStore.yAxis.setBoundingBoxXY({ x: chartX, y: titleYEnd }); this.componentStore.xAxis.setRange([chartY, chartY + chartHeight]); this.componentStore.xAxis.setBoundingBoxXY({ x: 0, y: chartY }); - if(this.chartData.plots.find(p => isBarPlot(p))) { + if (this.chartData.plots.some((p) => isBarPlot(p))) { this.componentStore.xAxis.recalculateOuterPaddingToDrawBar(); } } diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/TextDimensionCalculator.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/TextDimensionCalculator.ts index c717163ce2..ea77cf4130 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/TextDimensionCalculator.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/TextDimensionCalculator.ts @@ -5,7 +5,6 @@ export interface ITextDimensionCalculator { } export class TextDimensionCalculator implements ITextDimensionCalculator { - constructor() {} getDimension(texts: string[], fontSize: number): Dimension { return { width: texts.reduce((acc, cur) => Math.max(cur.length, acc), 0) * fontSize, @@ -58,7 +57,7 @@ export class TextDimensionCalculatorWithFont implements ITextDimensionCalculator this.container.style.fontSize = `${fontSize}px`; - for (let t of texts) { + for (const t of texts) { this.container.innerHTML = t; const bbox = this.container.getBoundingClientRect(); dimension.width = Math.max(dimension.width, bbox.width); diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/LinearAxis.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/LinearAxis.ts index 39d054bfc7..a9b5d3bcb0 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/LinearAxis.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/LinearAxis.ts @@ -24,9 +24,9 @@ export class LinearAxis extends BaseAxis { } recalculateScale(): void { - const domain = [...this.domain]; // copy the array so if reverse is called twise it shouldnot cancel the reverse effect + const domain = [...this.domain]; // copy the array so if reverse is called two times it should not cancel the reverse effect if (this.axisPosition === 'left') { - domain.reverse(); // since yaxis in svg start from top + domain.reverse(); // since y-axis in svg start from top } this.scale = scaleLinear().domain(domain).range(this.getRange()); log.trace('Linear axis final domain, range: ', this.domain, this.getRange()); diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts index 16a831fdd0..e9ebd8e922 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts @@ -4,7 +4,6 @@ import { BoundingRect, DrawableElem, Point, - ChartPlotEnum, } from '../../Interfaces.js'; import { IAxis } from '../axis/index.js'; import { ChartComponent } from '../../Interfaces.js'; @@ -60,12 +59,12 @@ export class Plot implements IPlot { ]; for(const plot of this.chartData.plots) { switch(plot.type) { - case ChartPlotEnum.LINE: { + case 'line': { const linePlot = new LinePlot(plot, this.xAxis, this.yAxis, this.chartConfig.chartOrientation); drawableElem.push(...linePlot.getDrawableElement()) } break; - case ChartPlotEnum.BAR: { + case 'bar': { const barPlot = new BarPlot(plot, this.boundingRect, this.xAxis, this.yAxis, this.chartConfig.chartOrientation) drawableElem.push(...barPlot.getDrawableElement()); } diff --git a/packages/mermaid/src/diagrams/xychart/xychartDb.ts b/packages/mermaid/src/diagrams/xychart/xychartDb.ts index b3f253af3f..f4c7044556 100644 --- a/packages/mermaid/src/diagrams/xychart/xychartDb.ts +++ b/packages/mermaid/src/diagrams/xychart/xychartDb.ts @@ -13,7 +13,6 @@ import { } from '../../commonDb.js'; import { XYChartBuilder } from './chartBuilder/index.js'; import { - ChartPlotEnum, DrawableElem, XYChartData, isBandAxisData, @@ -21,9 +20,6 @@ import { import { XYChartConfig } from '../../config.type.js'; const config = configApi.getConfig(); -let chartWidth = 600; -let chartHeight = 500; - function getChartDefaultConfig(): XYChartConfig { return config.xyChart ? { ...config.xyChart, yAxis: { ...config.xyChart.yAxis }, xAxis: { ...config.xyChart.xAxis } } @@ -125,7 +121,7 @@ function setYAxisRangeData(min: number, max: number) { function setLineData(title: string, data: number[]) { if (isBandAxisData(xyChartData.xAxis)) { xyChartData.plots.push({ - type: ChartPlotEnum.LINE, + type: 'line', strokeFill: '#00ff00', strokeWidth: 2, data: xyChartData.xAxis.categories.map((c, i) => [c, data[i]]), @@ -135,7 +131,7 @@ function setLineData(title: string, data: number[]) { function setBarData(title: string, data: number[]) { if (isBandAxisData(xyChartData.xAxis)) { xyChartData.plots.push({ - type: ChartPlotEnum.BAR, + type: 'bar', fill: '#0000bb', data: xyChartData.xAxis.categories.map((c, i) => [c, data[i]]), }); diff --git a/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts b/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts index dd9b27583a..41d3b3ad52 100644 --- a/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts +++ b/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts @@ -1,4 +1,4 @@ -import { select, Selection } from 'd3'; +import { select } from 'd3'; import { Diagram } from '../../Diagram.js'; import * as configApi from '../../config.js'; import { log } from '../../logger.js'; @@ -59,7 +59,7 @@ export const draw = (txt: string, id: string, _version: string, diagObj: Diagram function getGroup(gList: string[]) { let elem = group; let prefix = ''; - for (let i = 0; i < gList.length; i++) { + for (const [i, _] of gList.entries()) { let parent = group; if (i > 0 && groups[prefix]) { parent = groups[prefix]; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 1cb943a0c8..bd9cf4f298 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1,9 +1,5 @@ lockfileVersion: '6.0' -settings: - autoInstallPeers: true - excludeLinksFromLockfile: false - importers: .: @@ -264,12 +260,9 @@ importers: '@types/d3-sankey': specifier: ^0.12.1 version: 0.12.1 - '@types/d3-scale': - specifier: ^4.0.2 - version: 4.0.2 '@types/d3-selection': - specifier: ^3.0.3 - version: 3.0.3 + specifier: ^3.0.5 + version: 3.0.5 '@types/d3-shape': specifier: ^3.1.0 version: 3.1.0 @@ -513,7 +506,7 @@ importers: 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) + version: 0.51.8(postcss@8.4.24)(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) @@ -617,6 +610,17 @@ packages: - algoliasearch dev: true + /@algolia/autocomplete-preset-algolia@1.7.4(@algolia/client-search@4.14.2)(algoliasearch@4.14.2): + resolution: {integrity: sha512-s37hrvLEIfcmKY8VU9LsAXgm2yfmkdHT3DnA3SgHaY93yjZ2qL57wzb5QweVkYuEBZkT2PIREvRoLXC2sxTbpQ==} + peerDependencies: + '@algolia/client-search': '>= 4.9.1 < 6' + algoliasearch: '>= 4.9.1 < 6' + dependencies: + '@algolia/autocomplete-shared': 1.7.4 + '@algolia/client-search': 4.14.2 + algoliasearch: 4.14.2 + dev: true + /@algolia/autocomplete-preset-algolia@1.8.2(@algolia/client-search@4.14.2)(algoliasearch@4.14.2): resolution: {integrity: sha512-J0oTx4me6ZM9kIKPuL3lyU3aB8DEvpVvR6xWmHVROx5rOYJGQcZsdG4ozxwcOyiiu3qxMkIbzntnV1S1VWD8yA==} peerDependencies: @@ -639,6 +643,10 @@ packages: algoliasearch: 4.14.2 dev: true + /@algolia/autocomplete-shared@1.7.4: + resolution: {integrity: sha512-2VGCk7I9tA9Ge73Km99+Qg87w0wzW4tgUruvWAn/gfey1ZXgmxZtyIRBebk35R1O8TbK77wujVtCnpsGpRy1kg==} + dev: true + /@algolia/autocomplete-shared@1.8.2: resolution: {integrity: sha512-b6Z/X4MczChMcfhk6kfRmBzPgjoPzuS9KGR4AFsiLulLNRAAqhP+xZTKtMnZGhLuc61I20d5WqlId02AZvcO6g==} dev: true @@ -763,8 +771,16 @@ packages: find-up: 5.0.0 dev: true - /@antfu/utils@0.7.4: - resolution: {integrity: sha512-qe8Nmh9rYI/HIspLSTwtbMFPj6dISG6+dJnOguTlPNXtCvS2uezdxscVBb7/3DrmNbQK49TDqpkSQ1chbRGdpQ==} + /@antfu/utils@0.5.2: + resolution: {integrity: sha512-CQkeV+oJxUazwjlHD0/3ZD08QWKuGQkhnrKo3e6ly5pd48VUpXbb77q0xMU4+vc2CkJnDS02Eq/M9ugyX20XZA==} + dev: true + + /@antfu/utils@0.7.2: + resolution: {integrity: sha512-vy9fM3pIxZmX07dL+VX1aZe7ynZ+YyB0jY+jE6r3hOK6GNY2t6W8rzpFC4tgpbXUYABkFQwgJq2XYXlxbXAI0g==} + dev: true + + /@antfu/utils@0.7.5: + resolution: {integrity: sha512-dlR6LdS+0SzOAPx/TPRhnoi7hE251OVeT2Snw0RguNbBSbjUHdWr0l3vcUUDg26rEysT89kCbtw1lVorBXLLCg==} dev: true /@apideck/better-ajv-errors@0.3.6(ajv@8.12.0): @@ -981,7 +997,7 @@ packages: engines: {node: '>=12'} dependencies: abab: 2.0.6 - acorn: 8.8.2 + acorn: 8.9.0 acorn-globals: 6.0.0 cssom: 0.5.0 cssstyle: 2.3.0 @@ -994,7 +1010,7 @@ packages: http-proxy-agent: 5.0.0 https-proxy-agent: 5.0.1 is-potential-custom-element-name: 1.0.1 - nwsapi: 2.2.5 + nwsapi: 2.2.6 parse5: 6.0.1 saxes: 5.0.1 symbol-tree: 3.2.4 @@ -1155,7 +1171,7 @@ packages: '@babel/generator': 7.21.1 '@babel/helper-module-transforms': 7.21.2 '@babel/helpers': 7.19.0 - '@babel/parser': 7.21.8 + '@babel/parser': 7.21.2 '@babel/template': 7.20.7 '@babel/traverse': 7.21.2 '@babel/types': 7.21.2 @@ -1164,7 +1180,7 @@ packages: gensync: 1.0.0-beta.2 json5: 2.2.1 lodash: 4.17.21 - resolve: 1.22.2 + resolve: 1.22.1 semver: 5.7.1 source-map: 0.5.7 transitivePeerDependencies: @@ -1420,8 +1436,15 @@ packages: js-tokens: 4.0.0 dev: true - /@babel/parser@7.21.8: - resolution: {integrity: sha512-6zavDGdzG3gUqAdWvlLFfk+36RilI+Pwyuuh7HItyeScCWP3k6i8vKclAQ0bM/0y/Kz/xiwvxhMv9MgTJP5gmA==} + /@babel/parser@7.21.2: + resolution: {integrity: sha512-URpaIJQwEkEC2T9Kn+Ai6Xe/02iNaVCuT/PtoRz3GPVJVDpPd7mLo+VddTbhCRU9TXqW5mSrQfXZyi8kDKOVpQ==} + engines: {node: '>=6.0.0'} + hasBin: true + dependencies: + '@babel/types': 7.21.2 + + /@babel/parser@7.22.6: + resolution: {integrity: sha512-EIQu22vNkceq3LbjAq7knDf/UmtI2qbcNI8GRBlijez6TpQLvSodJPYfydQmNA5buwkxxxa/PVI44jjYZ+/cLw==} engines: {node: '>=6.0.0'} hasBin: true dependencies: @@ -2286,7 +2309,7 @@ packages: engines: {node: '>=6.9.0'} dependencies: '@babel/code-frame': 7.18.6 - '@babel/parser': 7.21.8 + '@babel/parser': 7.21.2 '@babel/types': 7.21.2 dev: true @@ -2300,7 +2323,7 @@ packages: '@babel/helper-function-name': 7.21.0 '@babel/helper-hoist-variables': 7.18.6 '@babel/helper-split-export-declaration': 7.18.6 - '@babel/parser': 7.21.8 + '@babel/parser': 7.21.2 '@babel/types': 7.21.2 debug: 4.3.4(supports-color@8.1.1) globals: 11.12.0 @@ -2876,18 +2899,30 @@ packages: resolution: {integrity: sha512-6SCwI7P8ao+se1TUsdZ7B4XzL+gqeQZnBc+2EONZlcVa0dVrk0NjETxozFKgMv0eEGH8QzP1fkN+A1rH61l4eg==} dev: true - /@docsearch/css@3.3.5: - resolution: {integrity: sha512-NaXVp3I8LdmJ54fn038KHgG7HmbIzZlKS2FkVf6mKcW5bYMJovkx4947joQyZk5yubxOZ+ddHSh79y39Aevufg==} + /@docsearch/css@3.3.4: + resolution: {integrity: sha512-vDwCDoVXDgopw/hvr0zEADew2wWaGP8Qq0Bxhgii1Ewz2t4fQeyJwIRN/mWADeLFYPVkpz8TpEbxya/i6Tm0WA==} dev: true /@docsearch/css@3.5.1: resolution: {integrity: sha512-2Pu9HDg/uP/IT10rbQ+4OrTQuxIWdKVUEdcw9/w7kZJv9NeHS6skJx1xuRiFyoGKwAzcHXnLp7csE99sj+O1YA==} dev: true - /@docsearch/js@3.3.5(@algolia/client-search@4.14.2): - resolution: {integrity: sha512-nZi074OCryZnzva2LNcbQkwBJIND6cvuFI4s1FIe6Ygf6n9g6B/IYUULXNx05rpoCZ+KEoEt3taROpsHBliuSw==} + /@docsearch/js@3.3.3(@algolia/client-search@4.14.2): + resolution: {integrity: sha512-2xAv2GFuHzzmG0SSZgf8wHX0qZX8n9Y1ZirKUk5Wrdc+vH9CL837x2hZIUdwcPZI9caBA+/CzxsS68O4waYjUQ==} + dependencies: + '@docsearch/react': 3.3.3(@algolia/client-search@4.14.2) + preact: 10.11.0 + transitivePeerDependencies: + - '@algolia/client-search' + - '@types/react' + - react + - react-dom + dev: true + + /@docsearch/js@3.3.4(@algolia/client-search@4.14.2): + resolution: {integrity: sha512-Xd2saBziXJ1UuVpcDz94zAFEFAM6ap993agh0za2e3LDZLhaW993b1f9gyUL4e1CZLsR076tztG2un2gVncvpA==} dependencies: - '@docsearch/react': 3.3.5(@algolia/client-search@4.14.2) + '@docsearch/react': 3.3.4(@algolia/client-search@4.14.2) preact: 10.11.0 transitivePeerDependencies: - '@algolia/client-search' @@ -2909,8 +2944,30 @@ packages: - search-insights dev: true - /@docsearch/react@3.3.5(@algolia/client-search@4.14.2): - resolution: {integrity: sha512-Zuxf4z5PZ9eIQkVCNu76v1H+KAztKItNn3rLzZa7kpBS+++TgNARITnZeUS7C1DKoAhJZFr6T/H+Lvc6h/iiYg==} + /@docsearch/react@3.3.3(@algolia/client-search@4.14.2): + resolution: {integrity: sha512-pLa0cxnl+G0FuIDuYlW+EBK6Rw2jwLw9B1RHIeS4N4s2VhsfJ/wzeCi3CWcs5yVfxLd5ZK50t//TMA5e79YT7Q==} + peerDependencies: + '@types/react': '>= 16.8.0 < 19.0.0' + react: '>= 16.8.0 < 19.0.0' + react-dom: '>= 16.8.0 < 19.0.0' + peerDependenciesMeta: + '@types/react': + optional: true + react: + optional: true + react-dom: + optional: true + dependencies: + '@algolia/autocomplete-core': 1.7.4 + '@algolia/autocomplete-preset-algolia': 1.7.4(@algolia/client-search@4.14.2)(algoliasearch@4.14.2) + '@docsearch/css': 3.3.3 + algoliasearch: 4.14.2 + transitivePeerDependencies: + - '@algolia/client-search' + dev: true + + /@docsearch/react@3.3.4(@algolia/client-search@4.14.2): + resolution: {integrity: sha512-aeOf1WC5zMzBEi2SI6WWznOmIo9rnpN4p7a3zHXxowVciqlI4HsZGtOR9nFOufLeolv7HibwLlaM0oyUqJxasw==} peerDependencies: '@types/react': '>= 16.8.0 < 19.0.0' react: '>= 16.8.0 < 19.0.0' @@ -2925,7 +2982,7 @@ packages: dependencies: '@algolia/autocomplete-core': 1.8.2 '@algolia/autocomplete-preset-algolia': 1.8.2(@algolia/client-search@4.14.2)(algoliasearch@4.14.2) - '@docsearch/css': 3.3.5 + '@docsearch/css': 3.3.4 algoliasearch: 4.14.2 transitivePeerDependencies: - '@algolia/client-search' @@ -3648,7 +3705,7 @@ packages: resolution: {integrity: sha512-6MvDI+I6QMvXn5rK9KQGdpEE4mmLTcuQdLZEiX5N+uZB+vc4Yw9K1OtnOgkl8mp4d9X0UrILREyZgF1NUwUt+Q==} dependencies: '@antfu/install-pkg': 0.1.1 - '@antfu/utils': 0.7.4 + '@antfu/utils': 0.7.5 '@iconify/types': 2.0.0 debug: 4.3.4(supports-color@8.1.1) kolorist: 1.7.0 @@ -3800,7 +3857,7 @@ packages: glob: 7.2.3 graceful-fs: 4.2.10 istanbul-lib-coverage: 3.2.0 - istanbul-lib-instrument: 5.2.1 + istanbul-lib-instrument: 5.2.0 istanbul-lib-report: 3.0.0 istanbul-lib-source-maps: 4.0.1 istanbul-reports: 3.1.5 @@ -3810,7 +3867,7 @@ packages: slash: 3.0.0 string-length: 4.0.2 strip-ansi: 6.0.1 - v8-to-istanbul: 9.1.0 + v8-to-istanbul: 9.0.1 transitivePeerDependencies: - supports-color dev: true @@ -4036,6 +4093,20 @@ packages: rollup: 2.79.1 dev: true + /@rollup/plugin-replace@5.0.2(rollup@3.21.0): + resolution: {integrity: sha512-M9YXNekv/C/iHHK+cvORzfRYfPbq0RDD8r0G+bMiTXjNGKulPnCT9O3Ss46WfhI6ZOCgApOP7xAdmCQJ+U2LAA==} + engines: {node: '>=14.0.0'} + peerDependencies: + rollup: ^1.20.0||^2.0.0||^3.0.0 + peerDependenciesMeta: + rollup: + optional: true + dependencies: + '@rollup/pluginutils': 5.0.2(rollup@3.21.0) + magic-string: 0.27.0 + rollup: 3.21.0 + dev: true + /@rollup/plugin-typescript@11.1.1(typescript@5.1.3): resolution: {integrity: sha512-Ioir+x5Bejv72Lx2Zbz3/qGg7tvGbxQZALCLoJaGrkNXak/19+vKgKYJYM3i/fJxvsb23I9FuFQ8CUBEfsmBRg==} engines: {node: '>=14.0.0'} @@ -4049,7 +4120,7 @@ packages: tslib: optional: true dependencies: - '@rollup/pluginutils': 5.0.2(rollup@2.79.1) + '@rollup/pluginutils': 5.0.2(rollup@3.21.0) resolve: 1.22.2 typescript: 5.1.3 dev: true @@ -4081,6 +4152,21 @@ packages: rollup: 2.79.1 dev: true + /@rollup/pluginutils@5.0.2(rollup@3.21.0): + resolution: {integrity: sha512-pTd9rIsP92h+B6wWwFbW8RkZv4hiR/xKsqre4SIuAOaOEQRxi0lqLke9k2/7WegC85GgUs9pjmOjCUi3In4vwA==} + engines: {node: '>=14.0.0'} + peerDependencies: + rollup: ^1.20.0||^2.0.0||^3.0.0 + peerDependenciesMeta: + rollup: + optional: true + dependencies: + '@types/estree': 1.0.0 + estree-walker: 2.0.2 + picomatch: 2.3.1 + rollup: 3.21.0 + dev: true + /@sideway/address@4.1.4: resolution: {integrity: sha512-7vwq+rOHVWjyXxVlR76Agnvhy8I9rpzjosTESvmhNeXOXdZZB15Fl+TI9x1SiHZH5Jv2wTGduSxFDIaq0m3DUw==} dependencies: @@ -4156,7 +4242,7 @@ packages: /@types/babel__core@7.1.19: resolution: {integrity: sha512-WEOTgRsbYkvA/KCsDwVEGkd7WAr1e3g31VHQ8zy5gul/V1qKullU/BU5I68X5v7V3GnB9eotmom4v5a5gjxorw==} dependencies: - '@babel/parser': 7.21.8 + '@babel/parser': 7.21.2 '@babel/types': 7.21.2 '@types/babel__generator': 7.6.4 '@types/babel__template': 7.4.1 @@ -4172,7 +4258,7 @@ packages: /@types/babel__template@7.4.1: resolution: {integrity: sha512-azBFKemX6kMg5Io+/rdGT0dkGreboUVR0Cdm3fz9QJWpaQGJRQXl7C+6hOTCZcMll7KFyEQpgbYI2lHdsS4U7g==} dependencies: - '@babel/parser': 7.21.8 + '@babel/parser': 7.21.2 '@babel/types': 7.21.2 dev: true @@ -4738,7 +4824,6 @@ packages: /@types/web-bluetooth@0.0.16: resolution: {integrity: sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ==} - dev: false /@types/web-bluetooth@0.0.17: resolution: {integrity: sha512-4p9vcSmxAayx72yn70joFoL44c9MO/0+iVEBIQXe3v2h2SiAsEIo/G5v6ObFWvNKRFjbrVadNf9LqEEZeQPzdA==} @@ -4937,7 +5022,7 @@ packages: debug: 4.3.4(supports-color@8.1.1) globby: 11.1.0 is-glob: 4.0.3 - semver: 7.5.0 + semver: 7.3.8 tsutils: 3.21.0(typescript@5.0.4) typescript: 5.0.4 transitivePeerDependencies: @@ -4958,7 +5043,7 @@ packages: debug: 4.3.4(supports-color@8.1.1) globby: 11.1.0 is-glob: 4.0.3 - semver: 7.5.0 + semver: 7.3.8 tsutils: 3.21.0(typescript@5.1.3) typescript: 5.1.3 transitivePeerDependencies: @@ -4979,7 +5064,7 @@ packages: '@typescript-eslint/typescript-estree': 5.59.0(typescript@5.0.4) eslint: 8.39.0 eslint-scope: 5.1.1 - semver: 7.5.0 + semver: 7.3.8 transitivePeerDependencies: - supports-color - typescript @@ -4999,7 +5084,7 @@ packages: '@typescript-eslint/typescript-estree': 5.59.0(typescript@5.1.3) eslint: 8.39.0 eslint-scope: 5.1.1 - semver: 7.5.0 + semver: 7.3.8 transitivePeerDependencies: - supports-color - typescript @@ -5013,6 +5098,17 @@ packages: eslint-visitor-keys: 3.4.0 dev: true + /@unocss/astro@0.51.8(rollup@2.79.1)(vite@4.3.3): + resolution: {integrity: sha512-1cY22psmzeW6f29Os7nXhrIgbjR2QI2qPU+PDEMprWiaVHlIc86WUKNzPIcuKskAQMMhWVCIN/XlCNzxZzXJqw==} + dependencies: + '@unocss/core': 0.51.8 + '@unocss/reset': 0.51.8 + '@unocss/vite': 0.51.8(rollup@2.79.1)(vite@4.3.3) + transitivePeerDependencies: + - rollup + - vite + dev: true + /@unocss/astro@0.53.0(rollup@2.79.1)(vite@4.3.3): resolution: {integrity: sha512-8bR7ysIMZEOpcjd/cVmogcABSFDYPjUqMnbflv44p1A2/deemo9CIkpRARoq/96NQuzWJsKhKodcQodExZcqiA==} dependencies: @@ -5024,6 +5120,28 @@ packages: - vite dev: true + /@unocss/cli@0.51.8(rollup@2.79.1): + resolution: {integrity: sha512-vZKct40rIXhp8tIUkBLn9pLq4xWMBi3+wFryBgoZDHSkRwWkuQLqCY5rAsNOv1DG2+tLfKef4guMaFFavDkYzA==} + engines: {node: '>=14'} + hasBin: true + dependencies: + '@ampproject/remapping': 2.2.1 + '@rollup/pluginutils': 5.0.2(rollup@2.79.1) + '@unocss/config': 0.51.8 + '@unocss/core': 0.51.8 + '@unocss/preset-uno': 0.51.8 + cac: 6.7.14 + chokidar: 3.5.3 + colorette: 2.0.19 + consola: 3.1.0 + fast-glob: 3.2.12 + magic-string: 0.30.0 + pathe: 1.1.1 + perfect-debounce: 0.1.3 + transitivePeerDependencies: + - rollup + dev: true + /@unocss/cli@0.53.0(rollup@2.79.1): resolution: {integrity: sha512-9WNBHy8m8tMqwcp7mUhebRUBvHQfbx01CMe5cAFLmUYtJULM+8IjJxqERkaAZyyoOXf1TNO2v1dFAmCwhMRCLQ==} engines: {node: '>=14'} @@ -5046,6 +5164,14 @@ packages: - rollup dev: true + /@unocss/config@0.51.8: + resolution: {integrity: sha512-wiCn2aR82BdDMLfywTxUbyugBy1TxEdfND5BuLZxtNIKARnZoQXm+hfLbIBcOvmcWW1p940I6CImNFrSszOULQ==} + engines: {node: '>=14'} + dependencies: + '@unocss/core': 0.51.8 + unconfig: 0.3.7 + dev: true + /@unocss/config@0.53.0: resolution: {integrity: sha512-D9A3uFT6jSj/EgMOCpQQ+dPadLQDiEIb0BHa7BYW7/3STijnPMcFjPVjzABj9Wn7RQjka/MZ2/AvfH9eYMTR8g==} engines: {node: '>=14'} @@ -5054,16 +5180,33 @@ packages: unconfig: 0.3.9 dev: true + /@unocss/core@0.51.8: + resolution: {integrity: sha512-myHRKBphEN3h0OnsUhg2JaFKjFGfqF/jmmzZCCMNU5UmxbheZomXANNLYXVgEP6LHvd4xAF0DEzrOBcDPLf0HQ==} + dev: true + /@unocss/core@0.53.0: resolution: {integrity: sha512-MB6hqSN2wjmm3NNYspNqzxvMv7LnyLqz0uCWr15elRqnjsuq01w7DZ1iPS9ckA2M3YjQIRTXR9YPtDbSqY0jcA==} dev: true + /@unocss/extractor-arbitrary-variants@0.51.8: + resolution: {integrity: sha512-cCsdRLqmt3adcaRtoIP2pC8mYgH3ed8DEES3E7VOWghqLjwLULUMyBS+vy7n9CvnV75kuTKb1bZ+k9eu/rfh2w==} + dependencies: + '@unocss/core': 0.51.8 + dev: true + /@unocss/extractor-arbitrary-variants@0.53.0: resolution: {integrity: sha512-f1v2E5PherulTAdrsXXb5Knaz4Viu2dM71WalNYhb+j9QqwGngagLrMzRzeIRLOEI2c0D0l7HBQtew+QFWsXcg==} dependencies: '@unocss/core': 0.53.0 dev: true + /@unocss/inspector@0.51.8: + resolution: {integrity: sha512-g3gLl6h/AErv04jCTQOCtfBDzJ01FG2SnDxLErIm22bnKydP/QB15TyX9AXlUsOcxywcCFHYe73OdPqyMqPEFQ==} + dependencies: + gzip-size: 6.0.0 + sirv: 2.0.3 + dev: true + /@unocss/inspector@0.53.0: resolution: {integrity: sha512-TX8O39tXuEStUs516YBiCr2BS68Z9oHXnMZspxBxMma1X47bW2Hz+x9kWkhFzqmHWBjFPJob1PjjkbfeE4TbOQ==} dependencies: @@ -5071,6 +5214,20 @@ packages: sirv: 2.0.3 dev: true + /@unocss/postcss@0.51.8(postcss@8.4.24): + resolution: {integrity: sha512-IWwxGDfd/pqQMBjp1PKplQIeD6uwUs1qxUkJZXIf/BlGE+dMkjIw6Mp72FwYqkMn71hnjU2CMRTbX7RzkKxkmQ==} + engines: {node: '>=14'} + peerDependencies: + postcss: ^8.4.21 + dependencies: + '@unocss/config': 0.51.8 + '@unocss/core': 0.51.8 + css-tree: 2.3.1 + fast-glob: 3.2.12 + magic-string: 0.30.0 + postcss: 8.4.24 + dev: true + /@unocss/postcss@0.53.0(postcss@8.4.24): resolution: {integrity: sha512-q+5aDvkwP1eEhDmdz32WrwsGEEcJdQLy3apiU/df+CaL71HATvUfMZJVZbXZlFqoed703c+cGLHOhRHMPDk/dw==} engines: {node: '>=14'} @@ -5085,12 +5242,28 @@ packages: postcss: 8.4.24 dev: true + /@unocss/preset-attributify@0.51.8: + resolution: {integrity: sha512-2JkGrutvVwvXAC48vCiEpiYLMXlV1rDigR1lwRrKxQC1s/1/j4Wei2RqY0649CkpWZBvdiJ5oPF38NV9pWOnKw==} + dependencies: + '@unocss/core': 0.51.8 + dev: true + /@unocss/preset-attributify@0.53.0: resolution: {integrity: sha512-RqvSbuECeMBVVt2rmNIozznLBkfzkfe7vOIx3arytPBG/nggDnC1GB/xTxCGAiU7UcEXw03laWtjwXHmJHt8Gw==} dependencies: '@unocss/core': 0.53.0 dev: true + /@unocss/preset-icons@0.51.8: + resolution: {integrity: sha512-qvHNsLYVJw6js+1+FNaNZm4qLTM+z4VnHHp1NNMtqHTMEOFUsxu+bAL6CIPkwja455F1GxyvYbHpB6eekSwNEA==} + dependencies: + '@iconify/utils': 2.1.5 + '@unocss/core': 0.51.8 + ofetch: 1.0.1 + transitivePeerDependencies: + - supports-color + dev: true + /@unocss/preset-icons@0.53.0: resolution: {integrity: sha512-0Et3dtrmBRVPZ5pGiITrwb9O01M88s0juOVSM7L4z0Uf0RNXuPCGwh2N5TRX2IIS7LAi4k0tAXFUORlkUiC2Lg==} dependencies: @@ -5101,6 +5274,13 @@ packages: - supports-color dev: true + /@unocss/preset-mini@0.51.8: + resolution: {integrity: sha512-eDm70Kuw3gscq2bjjmM7i11ox2siAbzsI9dIIpJtXntuWdzwlhqNk40YH/YnM02OfWVi8QLdWuye4wOA3//Fjw==} + dependencies: + '@unocss/core': 0.51.8 + '@unocss/extractor-arbitrary-variants': 0.51.8 + dev: true + /@unocss/preset-mini@0.53.0: resolution: {integrity: sha512-hGj9ltZUJIuPT+9bO+R0OlsQOSlV7rjQRkSSMnUaDsuKfzhahsyc7QglNHZI4wuTI/9iSJKGUD4nvTe559+8Hg==} dependencies: @@ -5108,12 +5288,25 @@ packages: '@unocss/extractor-arbitrary-variants': 0.53.0 dev: true + /@unocss/preset-tagify@0.51.8: + resolution: {integrity: sha512-QUUoyDor2AG5N2nQNI+SZ21HEKfJQxDRlZ+mAwT0NLSli5ZGgDN+BwsHGbffNhi2B0Gti/s5ovIDsQY0WyoYbA==} + dependencies: + '@unocss/core': 0.51.8 + dev: true + /@unocss/preset-tagify@0.53.0: resolution: {integrity: sha512-S3e1d2jJvjEbGBE0jPEht/Hmp+245SxjWcrDdO7HmKVL2+0vwIQQg6P2P9aUWqt+/kZQ6iBStSzGm9RyKRKMhw==} dependencies: '@unocss/core': 0.53.0 dev: true + /@unocss/preset-typography@0.51.8: + resolution: {integrity: sha512-cqHzwHj8cybQutPOXg5g81Lww0gWU0DIVNUpLy5g8qW+w5y4rTlQ4pNw5z1x3CyHUHO2++HApN8m07zJL6RA1w==} + dependencies: + '@unocss/core': 0.51.8 + '@unocss/preset-mini': 0.51.8 + dev: true + /@unocss/preset-typography@0.53.0: resolution: {integrity: sha512-VFTNV8O9KIH/JX9Pn43Vv6JrCTljG9NYnuvZpKpEp95uYDcZQAISao04RWEzbAzqB31x8N9Aga1Bq2TSOg3uTA==} dependencies: @@ -5121,6 +5314,14 @@ packages: '@unocss/preset-mini': 0.53.0 dev: true + /@unocss/preset-uno@0.51.8: + resolution: {integrity: sha512-akBkjSDqFhuiLPPOu+t+bhae1/ZRjcKnmMMGekSBoJvE3CfYsDpkYgzlj+U1NhCtmKXHeDZKD8spUJj5Jvea1g==} + dependencies: + '@unocss/core': 0.51.8 + '@unocss/preset-mini': 0.51.8 + '@unocss/preset-wind': 0.51.8 + dev: true + /@unocss/preset-uno@0.53.0: resolution: {integrity: sha512-f50D2nFnX7nXvxtueUfCRbSCrWNJTFm4qKg0J9gzqyOJGWJoNcN2Ig9aL0P47W1TmIjYA5SpGlvg6U5qIfkNtQ==} dependencies: @@ -5129,6 +5330,13 @@ packages: '@unocss/preset-wind': 0.53.0 dev: true + /@unocss/preset-web-fonts@0.51.8: + resolution: {integrity: sha512-s9kKEiV21qYTdrfb3uZRc+Eos1e1/UN6lCC4KPqzD5LfdsZgel5a0xD9RpKUoKOnPgzDkvg22yn8rfsC5NBafg==} + dependencies: + '@unocss/core': 0.51.8 + ofetch: 1.0.1 + dev: true + /@unocss/preset-web-fonts@0.53.0: resolution: {integrity: sha512-CAZW/PSp9+VBvzE/T56v2Yb8Nk3xF9XJaQrDydF9cAPyz/gVOZBbKQSDS8OqyAqKiXbnn+NYCwEqTG8v/YOMyw==} dependencies: @@ -5136,6 +5344,13 @@ packages: ofetch: 1.0.1 dev: true + /@unocss/preset-wind@0.51.8: + resolution: {integrity: sha512-L8zqVQigmPiclCuUdXwzNpj3CcC0PX38m5DAb9fkYyEdeSMkM2BYsKgR56oxah+0crN1dRTjJsqK45MAjJiVKQ==} + dependencies: + '@unocss/core': 0.51.8 + '@unocss/preset-mini': 0.51.8 + dev: true + /@unocss/preset-wind@0.53.0: resolution: {integrity: sha512-vb9tV3Cze+w8OZyOd/Xi6Zn8F8+EV53AZIqCrQvMD/6ZeqQJ9gjFx/Q69H/bu009wnPleQpce6RKJcNqMzif8g==} dependencies: @@ -5143,32 +5358,65 @@ packages: '@unocss/preset-mini': 0.53.0 dev: true + /@unocss/reset@0.51.8: + resolution: {integrity: sha512-mVUP2F/ItPKatkRh5tWBNDZG2YqG7oKxfYxQUYbNAv/hiTKPlKc3PX9T4vZKEvJarbzucTIGbYHdzwqExzG9Kw==} + dev: true + /@unocss/reset@0.53.0: resolution: {integrity: sha512-4XJkEtVxUGYp+WX2aRTrZLNp6MEwulBvhhpkAjwfkS+wVdo9lMma0O93TCqJaFeYx7lU8W92APB4n918rz9scA==} dev: true + /@unocss/scope@0.51.8: + resolution: {integrity: sha512-4B4nlmcwFGKzAyI8ltSSJIivqu+DHZ3/T9IccuoFgWzdr+whPwxO5x6ydkTaJo9bUyT9mcj+HhFEjmwsA98FmQ==} + dev: true + /@unocss/scope@0.53.0: resolution: {integrity: sha512-JAk3jJeFTmmafVI8Oy/TkAs1/NXpR9Vy5IEIMO6gyAmYw0VjiL9dkYDNZAD9hwdj/oRIUgJMcX96Huhy+YDl/w==} dev: true + /@unocss/transformer-attributify-jsx-babel@0.51.8: + resolution: {integrity: sha512-GJ1NLLAn4MH/u5/qsAbnzY7Qyl1aqWi0fj2ggXcv3XP9KmllRmGymWVJB7lqH7AL5xzJD+tivUEH8m+tsaeZYQ==} + dependencies: + '@unocss/core': 0.51.8 + dev: true + /@unocss/transformer-attributify-jsx-babel@0.53.0: resolution: {integrity: sha512-++DTBEkFS2/1VE+TBPEmK0NAaCa/KP7dkJ7uldrQ+c5MpDp/IcCkOt8vPEL/6qKhUbTYXb/hruqq6wv27ZDrSg==} dependencies: '@unocss/core': 0.53.0 dev: true + /@unocss/transformer-attributify-jsx@0.51.8: + resolution: {integrity: sha512-iq4WRj+IHVIRPSH7qaB8PqqlSNSHXkXjPki1n14Bcv1D1ILgDBnH6gRammB/Z7KqAP/k/TCK7bSMeHrQ6iTQoQ==} + dependencies: + '@unocss/core': 0.51.8 + dev: true + /@unocss/transformer-attributify-jsx@0.53.0: resolution: {integrity: sha512-4QJEmoj2of7nZM8afNsMk+NWX3K89j1sHx+EKw5+s1r/Pg4/PxeDgF4PnRWvPnjvRpDaRRTZGRxTrBEimup8vg==} dependencies: '@unocss/core': 0.53.0 dev: true + /@unocss/transformer-compile-class@0.51.8: + resolution: {integrity: sha512-aSyUDjYGUX1qplby0wt9BcBwMsmKzIDyOkp3DBTlAfBjWbxes8ZytjutIzOMos1CrrHTuB/omCT9apG2JAbgDA==} + dependencies: + '@unocss/core': 0.51.8 + dev: true + /@unocss/transformer-compile-class@0.53.0: resolution: {integrity: sha512-PTPysxBAimEWspMU3gMo+053M5RURnLT88Wp0y8f4F8oEMg7fV9Tn5f/bftvG+iI7dPyl4m/OsislxfucoESYw==} dependencies: '@unocss/core': 0.53.0 dev: true + /@unocss/transformer-directives@0.51.8: + resolution: {integrity: sha512-Q1vG0dZYaxbdz0pVnvpuFreGoSqmrk7TgKUHNuJP/XzTi04sriQoDSpC2QMIAuOyU7FyGpSjUORiaBm0/VNURw==} + dependencies: + '@unocss/core': 0.51.8 + css-tree: 2.3.1 + dev: true + /@unocss/transformer-directives@0.53.0: resolution: {integrity: sha512-EIrrVphm0Bv+Ng2w1Qj5f0JFkfbN0b1/1fJ9hwgb5S2ewE3Xvwk59/h321D/GGDraQCUqqyZGgcG368xVh3pQA==} dependencies: @@ -5176,12 +5424,38 @@ packages: css-tree: 2.3.1 dev: true + /@unocss/transformer-variant-group@0.51.8: + resolution: {integrity: sha512-blFQtAntyijFOm+BiiQhroaPwFNX6zYi19wUjY6NdvMAl/g4JzOFTzo+KehQf+lCI3Dvhr8Z2dGtDcnwfqUcDg==} + dependencies: + '@unocss/core': 0.51.8 + dev: true + /@unocss/transformer-variant-group@0.53.0: resolution: {integrity: sha512-dwfjifgoa2VuO3LCl2ayRw3M5T6EfDKt16s9KbIRUcHqMJFnoHACAk8e4YsHGBvly0utbQHxFuBygOar3IfxEg==} dependencies: '@unocss/core': 0.53.0 dev: true + /@unocss/vite@0.51.8(rollup@2.79.1)(vite@4.3.3): + resolution: {integrity: sha512-0mVCgh2Bci2oey6VXGAJBI3x/p5whJiY32BpJaugCmLlZPc6rnWQ8o/FaOTed2EznWAGA8zRRF2l3fEVCURh9g==} + peerDependencies: + vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0 + dependencies: + '@ampproject/remapping': 2.2.1 + '@rollup/pluginutils': 5.0.2(rollup@2.79.1) + '@unocss/config': 0.51.8 + '@unocss/core': 0.51.8 + '@unocss/inspector': 0.51.8 + '@unocss/scope': 0.51.8 + '@unocss/transformer-directives': 0.51.8 + chokidar: 3.5.3 + fast-glob: 3.2.12 + magic-string: 0.30.0 + vite: 4.3.3(@types/node@18.16.0) + transitivePeerDependencies: + - rollup + dev: true + /@unocss/vite@0.53.0(rollup@2.79.1)(vite@4.3.3): resolution: {integrity: sha512-JoZhKVNruRjfySMVg/zNJbLEn/NTXj29Wf0SN4++xnGKrSapkPzYC46psL5bm5N5v4SHdpepTCoonC3FWCY6Fw==} peerDependencies: @@ -5202,6 +5476,14 @@ packages: - rollup dev: true + /@vite-pwa/vitepress@0.0.5(vite-plugin-pwa@0.14.7): + resolution: {integrity: sha512-B6xy9wxi9fen+/AnRkY2+XCrbhqh2b/TsVTka6qFQ3zJ8zHSoEUHUucYT3KHMcY5I124G0ZmPKNW+UF9Jx1k4w==} + peerDependencies: + vite-plugin-pwa: ^0.14.0 + dependencies: + vite-plugin-pwa: 0.14.7(vite@4.3.3)(workbox-build@6.5.4)(workbox-window@6.5.4) + dev: true + /@vite-pwa/vitepress@0.2.0(vite-plugin-pwa@0.16.0): resolution: {integrity: sha512-dVQVaP6NB9woCFe4UASUqRp7uwBQJOVXlJlqK4krqXcbb3NuXIXIWOnU7HLpJnHqZj5U/81gKtLN6gs5gJBwiQ==} peerDependencies: @@ -5221,17 +5503,6 @@ packages: vue: 3.2.47 dev: true - /@vitejs/plugin-vue@4.2.3(vite@4.3.8)(vue@3.3.4): - resolution: {integrity: sha512-R6JDUfiZbJA9cMiguQ7jxALsgiprjBeHL5ikpXfJCH62pPHtI+JdJ5xWj6Ev73yXSlYl86+blXn1kZHQ7uElxw==} - engines: {node: ^14.18.0 || >=16.0.0} - peerDependencies: - vite: ^4.0.0 - vue: ^3.2.25 - dependencies: - vite: 4.3.8(@types/node@18.16.0) - vue: 3.3.4 - dev: true - /@vitejs/plugin-vue@4.2.3(vite@4.4.0-beta.3)(vue@3.3.4): resolution: {integrity: sha512-R6JDUfiZbJA9cMiguQ7jxALsgiprjBeHL5ikpXfJCH62pPHtI+JdJ5xWj6Ev73yXSlYl86+blXn1kZHQ7uElxw==} engines: {node: ^14.18.0 || >=16.0.0} @@ -5317,21 +5588,21 @@ packages: pretty-format: 29.5.0 dev: true - /@vue/compat@3.3.4(vue@3.3.4): + /@vue/compat@3.3.4(vue@3.2.47): resolution: {integrity: sha512-VwAsPqUqRJVxeLQPUC03Sa5d+T8UG2Qv4VItq74KmNvtQlRXICpa/sqq12BcyBB4Tz1U5paOEZxWCUoXkrZ9QQ==} peerDependencies: vue: 3.3.4 dependencies: - '@babel/parser': 7.21.8 + '@babel/parser': 7.22.6 estree-walker: 2.0.2 source-map-js: 1.0.2 - vue: 3.3.4 + vue: 3.2.47 dev: false /@vue/compiler-core@3.2.47: resolution: {integrity: sha512-p4D7FDnQb7+YJmO2iPEv0SQNeNzcbHdGByJDsT4lynf63AFkOTFN07HsiRSvjGo0QrxR/o3d0hUyNCUnBU2Tig==} dependencies: - '@babel/parser': 7.21.8 + '@babel/parser': 7.21.2 '@vue/shared': 3.2.47 estree-walker: 2.0.2 source-map: 0.6.1 @@ -5339,10 +5610,11 @@ packages: /@vue/compiler-core@3.3.4: resolution: {integrity: sha512-cquyDNvZ6jTbf/+x+AgM2Arrp6G4Dzbb0R64jiG804HRMfRiFXWI6kqUVqZ6ZR0bQhIoQjB4+2bhNtVwndW15g==} dependencies: - '@babel/parser': 7.21.8 + '@babel/parser': 7.22.6 '@vue/shared': 3.3.4 estree-walker: 2.0.2 source-map-js: 1.0.2 + dev: true /@vue/compiler-dom@3.2.47: resolution: {integrity: sha512-dBBnEHEPoftUiS03a4ggEig74J2YBZ2UIeyfpcRM2tavgMWo4bsEfgCGsu+uJIL/vax9S+JztH8NmQerUo7shQ==} @@ -5355,11 +5627,12 @@ packages: dependencies: '@vue/compiler-core': 3.3.4 '@vue/shared': 3.3.4 + dev: true /@vue/compiler-sfc@3.2.47: resolution: {integrity: sha512-rog05W+2IFfxjMcFw10tM9+f7i/+FFpZJJ5XHX72NP9eC2uRD+42M3pYcQqDXVYoj74kHMSEdQ/WmCjt8JFksQ==} dependencies: - '@babel/parser': 7.21.8 + '@babel/parser': 7.21.2 '@vue/compiler-core': 3.2.47 '@vue/compiler-dom': 3.2.47 '@vue/compiler-ssr': 3.2.47 @@ -5367,13 +5640,13 @@ packages: '@vue/shared': 3.2.47 estree-walker: 2.0.2 magic-string: 0.25.9 - postcss: 8.4.24 + postcss: 8.4.23 source-map: 0.6.1 /@vue/compiler-sfc@3.3.4: resolution: {integrity: sha512-6y/d8uw+5TkCuzBkgLS0v3lSM3hJDntFEiUORM11pQ/hKvkhSKZrXW6i69UyXlJQisJxuUEJKAWEqWbWsLeNKQ==} dependencies: - '@babel/parser': 7.21.8 + '@babel/parser': 7.22.6 '@vue/compiler-core': 3.3.4 '@vue/compiler-dom': 3.3.4 '@vue/compiler-ssr': 3.3.4 @@ -5383,6 +5656,7 @@ packages: magic-string: 0.30.0 postcss: 8.4.24 source-map-js: 1.0.2 + dev: true /@vue/compiler-ssr@3.2.47: resolution: {integrity: sha512-wVXC+gszhulcMD8wpxMsqSOpvDZ6xKXSVWkf50Guf/S+28hTAXPDYRTbLQ3EDkOP5Xz/+SY37YiwDquKbJOgZw==} @@ -5395,6 +5669,7 @@ packages: dependencies: '@vue/compiler-dom': 3.3.4 '@vue/shared': 3.3.4 + dev: true /@vue/devtools-api@6.5.0: resolution: {integrity: sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q==} @@ -5402,7 +5677,7 @@ packages: /@vue/reactivity-transform@3.2.47: resolution: {integrity: sha512-m8lGXw8rdnPVVIdIFhf0LeQ/ixyHkH5plYuS83yop5n7ggVJU+z5v0zecwEnX7fa7HNLBhh2qngJJkxpwEEmYA==} dependencies: - '@babel/parser': 7.21.8 + '@babel/parser': 7.21.2 '@vue/compiler-core': 3.2.47 '@vue/shared': 3.2.47 estree-walker: 2.0.2 @@ -5411,11 +5686,12 @@ packages: /@vue/reactivity-transform@3.3.4: resolution: {integrity: sha512-MXgwjako4nu5WFLAjpBnCj/ieqcjE2aJBINUNQzkZQfzIZA4xn+0fV1tIYBJvvva3N3OvKGofRLvQIwEQPpaXw==} dependencies: - '@babel/parser': 7.21.8 + '@babel/parser': 7.22.6 '@vue/compiler-core': 3.3.4 '@vue/shared': 3.3.4 estree-walker: 2.0.2 magic-string: 0.30.0 + dev: true /@vue/reactivity@3.2.47: resolution: {integrity: sha512-7khqQ/75oyyg+N/e+iwV6lpy1f5wq759NdlS1fpAhFXa8VeAIKGgk2E/C4VF59lx5b+Ezs5fpp/5WsRYXQiKxQ==} @@ -5426,6 +5702,7 @@ packages: resolution: {integrity: sha512-kLTDLwd0B1jG08NBF3R5rqULtv/f8x3rOFByTDz4J53ttIQEDmALqKqXY0J+XQeN0aV2FBxY8nJDf88yvOPAqQ==} dependencies: '@vue/shared': 3.3.4 + dev: true /@vue/runtime-core@3.2.47: resolution: {integrity: sha512-RZxbLQIRB/K0ev0K9FXhNbBzT32H9iRtYbaXb0ZIz2usLms/D55dJR2t6cIEUn6vyhS3ALNvNthI+Q95C+NOpA==} @@ -5438,6 +5715,7 @@ packages: dependencies: '@vue/reactivity': 3.3.4 '@vue/shared': 3.3.4 + dev: true /@vue/runtime-dom@3.2.47: resolution: {integrity: sha512-ArXrFTjS6TsDei4qwNvgrdmHtD930KgSKGhS5M+j8QxXrDJYLqYw4RRcDy1bz1m1wMmb6j+zGLifdVHtkXA7gA==} @@ -5452,6 +5730,7 @@ packages: '@vue/runtime-core': 3.3.4 '@vue/shared': 3.3.4 csstype: 3.1.2 + dev: true /@vue/server-renderer@3.2.47(vue@3.2.47): resolution: {integrity: sha512-dN9gc1i8EvmP9RCzvneONXsKfBRgqFeFZLurmHOveL7oH6HiFXJw5OGu294n1nHc/HMgTy6LulU/tv5/A7f/LA==} @@ -5470,12 +5749,14 @@ packages: '@vue/compiler-ssr': 3.3.4 '@vue/shared': 3.3.4 vue: 3.3.4 + dev: true /@vue/shared@3.2.47: resolution: {integrity: sha512-BHGyyGN3Q97EZx0taMQ+OLNuZcW3d37ZEVmEAyeoA9ERdGvm9Irc/0Fua8SNyOtV1w6BS4q25wbMzJujO9HIfQ==} /@vue/shared@3.3.4: resolution: {integrity: sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ==} + dev: true /@vueuse/core@10.1.0(vue@3.2.47): resolution: {integrity: sha512-3Znoa5m5RO+z4/C9w6DRaKTR3wCVJvD5rav8HTDGsr+7rOZRHtcgFJ8NcCs0ZvIpmev2kExTa311ns5j2RbzDQ==} @@ -5487,19 +5768,6 @@ packages: transitivePeerDependencies: - '@vue/composition-api' - vue - dev: false - - /@vueuse/core@10.1.2(vue@3.3.4): - resolution: {integrity: sha512-roNn8WuerI56A5uiTyF/TEYX0Y+VKlhZAF94unUfdhbDUI+NfwQMn4FUnUscIRUhv3344qvAghopU4bzLPNFlA==} - dependencies: - '@types/web-bluetooth': 0.0.17 - '@vueuse/metadata': 10.1.2 - '@vueuse/shared': 10.1.2(vue@3.3.4) - vue-demi: 0.14.5(vue@3.3.4) - transitivePeerDependencies: - - '@vue/composition-api' - - vue - dev: true /@vueuse/core@10.2.1(vue@3.3.4): resolution: {integrity: sha512-c441bfMbkAwTNwVRHQ0zdYZNETK//P84rC01aP2Uy/aRFCiie9NE/k9KdIXbno0eDYP5NPUuWv0aA/I4Unr/7w==} @@ -5513,7 +5781,7 @@ packages: - vue dev: true - /@vueuse/integrations@10.2.1(focus-trap@7.4.3)(vue@3.3.4): + /@vueuse/integrations@10.2.1(focus-trap@7.5.1)(vue@3.3.4): resolution: {integrity: sha512-FDP5lni+z9FjHE9H3xuvwSjoRV9U8jmDvJpmHPCBjUgPGYRynwb60eHWXCFJXLUtb4gSIHy0e+iaEbrKdalCkQ==} peerDependencies: async-validator: '*' @@ -5556,7 +5824,7 @@ packages: dependencies: '@vueuse/core': 10.2.1(vue@3.3.4) '@vueuse/shared': 10.2.1(vue@3.3.4) - focus-trap: 7.4.3 + focus-trap: 7.5.1 vue-demi: 0.14.5(vue@3.3.4) transitivePeerDependencies: - '@vue/composition-api' @@ -5565,11 +5833,6 @@ packages: /@vueuse/metadata@10.1.0: resolution: {integrity: sha512-cM28HjDEw5FIrPE9rgSPFZvQ0ZYnOLAOr8hl1XM6tFl80U3WAR5ROdnAqiYybniwP5gt9MKKAJAqd/ab2aHkqg==} - dev: false - - /@vueuse/metadata@10.1.2: - resolution: {integrity: sha512-3mc5BqN9aU2SqBeBuWE7ne4OtXHoHKggNgxZR2K+zIW4YLsy6xoZ4/9vErQs6tvoKDX6QAqm3lvsrv0mczAwIQ==} - dev: true /@vueuse/metadata@10.2.1: resolution: {integrity: sha512-3Gt68mY/i6bQvFqx7cuGBzrCCQu17OBaGWS5JdwISpMsHnMKKjC2FeB5OAfMcCQ0oINfADP3i9A4PPRo0peHdQ==} @@ -5582,16 +5845,6 @@ packages: transitivePeerDependencies: - '@vue/composition-api' - vue - dev: false - - /@vueuse/shared@10.1.2(vue@3.3.4): - resolution: {integrity: sha512-1uoUTPBlgyscK9v6ScGeVYDDzlPSFXBlxuK7SfrDGyUTBiznb3mNceqhwvZHjtDRELZEN79V5uWPTF1VDV8svA==} - dependencies: - vue-demi: 0.14.5(vue@3.3.4) - transitivePeerDependencies: - - '@vue/composition-api' - - vue - dev: true /@vueuse/shared@10.2.1(vue@3.3.4): resolution: {integrity: sha512-QWHq2bSuGptkcxx4f4M/fBYC3Y8d3M2UYyLsyzoPgEoVzJURQ0oJeWXu79OiLlBb8gTKkqe4mO85T/sf39mmiw==} @@ -5807,7 +6060,7 @@ packages: dependencies: '@types/assert': 1.5.6 '@types/ramda': 0.28.25 - '@vue/compat': 3.3.4(vue@3.3.4) + '@vue/compat': 3.3.4(vue@3.2.47) antlr4: 4.13.0 color-string: 1.9.1 dom-to-image-more: 2.16.0 @@ -5820,8 +6073,8 @@ packages: postcss: 8.4.23 ramda: 0.28.0 tailwindcss: 3.3.2(ts-node@10.9.1) - vue: 3.3.4 - vuex: 4.1.0(vue@3.3.4) + vue: 3.2.47 + vuex: 4.1.0(vue@3.2.47) transitivePeerDependencies: - ts-node dev: false @@ -5920,6 +6173,12 @@ packages: engines: {node: '>=0.4.0'} hasBin: true + /acorn@8.9.0: + resolution: {integrity: sha512-jaVNAFBHNLXspO543WnNNPZFRtavh3skAkITqD0/2aeMkKZTN+254PyhwxFYrk3vQ1xfY+2wbesJMs/JC8/PwQ==} + engines: {node: '>=0.4.0'} + hasBin: true + dev: true + /agent-base@6.0.2: resolution: {integrity: sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==} engines: {node: '>= 6.0.0'} @@ -6289,7 +6548,7 @@ packages: '@babel/helper-plugin-utils': 7.20.2 '@istanbuljs/load-nyc-config': 1.1.0 '@istanbuljs/schema': 0.1.3 - istanbul-lib-instrument: 5.2.1 + istanbul-lib-instrument: 5.2.0 test-exclude: 6.0.0 transitivePeerDependencies: - supports-color @@ -7436,6 +7695,7 @@ packages: /csstype@3.1.2: resolution: {integrity: sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==} + dev: true /cuint@0.2.2: resolution: {integrity: sha512-d4ZVpCW31eWwCMe1YT3ur7mUDnTXbgwyzaL320DrcRT45rfjYxkt5QWLrmOJ+/UEAI2+fQgKe/fCjR8l4TpRgw==} @@ -8628,7 +8888,7 @@ packages: regexp-tree: 0.1.24 regjsparser: 0.10.0 safe-regex: 2.1.1 - semver: 7.5.3 + semver: 7.5.0 strip-indent: 3.0.0 dev: true @@ -9231,10 +9491,10 @@ packages: resolution: {integrity: sha512-XGozTsMPYkm+6b5QL3Z9wQcJjNYxp0CYn3U1gO7dwD6PAqU1SVWZxI9CCg3z+ml3YfqdPnrBehaBrnH2AGKbNA==} dev: true - /focus-trap@7.4.3: - resolution: {integrity: sha512-BgSSbK4GPnS2VbtZ50VtOv1Sti6DIkj3+LkVjiWMNjLeAp1SH1UlLx3ULu/DCu4vq5R4/uvTm+zrvsMsuYmGLg==} + /focus-trap@7.5.1: + resolution: {integrity: sha512-Xm2j/zkKGc9ORKrVrbOqwCiJc5XnQOiBtmpa1YmEW0jqmkJ4ZJnRShuMYnEuho6LO8KKsbrqjir89KQLIDKKqA==} dependencies: - tabbable: 6.1.2 + tabbable: 6.2.0 dev: true /follow-redirects@1.15.2(debug@4.3.4): @@ -10146,7 +10406,7 @@ packages: resolution: {integrity: sha512-ZYvCgrefwqoQ6yTyYUbQu64HsITZ3NfKX1lzaEYdkTDcfKzzCI/wthRRYKkdjHKFVgNiXKAKm65Zo1pk2as/QQ==} hasBin: true dependencies: - ci-info: 3.8.0 + ci-info: 3.6.2 dev: true /is-core-module@2.10.0: @@ -10428,20 +10688,7 @@ packages: engines: {node: '>=8'} dependencies: '@babel/core': 7.12.3 - '@babel/parser': 7.21.8 - '@istanbuljs/schema': 0.1.3 - istanbul-lib-coverage: 3.2.0 - semver: 6.3.0 - transitivePeerDependencies: - - supports-color - dev: true - - /istanbul-lib-instrument@5.2.1: - resolution: {integrity: sha512-pzqtp31nLv/XFOzXGuvhCb8qhjmTVo5vjVk19XE4CRlSWz0KoeJ3bw9XsA7nOp9YBf4qHjwBxkDzKcME/J29Yg==} - engines: {node: '>=8'} - dependencies: - '@babel/core': 7.12.3 - '@babel/parser': 7.21.8 + '@babel/parser': 7.21.2 '@istanbuljs/schema': 0.1.3 istanbul-lib-coverage: 3.2.0 semver: 6.3.0 @@ -10599,7 +10846,7 @@ packages: '@types/node': 18.16.0 babel-jest: 29.5.0(@babel/core@7.12.3) chalk: 4.1.2 - ci-info: 3.8.0 + ci-info: 3.6.2 deepmerge: 4.2.2 glob: 7.2.3 graceful-fs: 4.2.10 @@ -10782,7 +11029,7 @@ packages: jest-pnp-resolver: 1.2.2(jest-resolve@29.5.0) jest-util: 29.5.0 jest-validate: 29.5.0 - resolve: 1.22.2 + resolve: 1.22.1 resolve.exports: 2.0.2 slash: 3.0.0 dev: true @@ -10872,7 +11119,7 @@ packages: jest-util: 29.5.0 natural-compare: 1.4.0 pretty-format: 29.5.0 - semver: 7.5.3 + semver: 7.5.0 transitivePeerDependencies: - supports-color dev: true @@ -10884,7 +11131,7 @@ packages: '@jest/types': 29.5.0 '@types/node': 18.16.0 chalk: 4.1.2 - ci-info: 3.8.0 + ci-info: 3.6.2 graceful-fs: 4.2.10 picomatch: 2.3.1 dev: true @@ -11064,7 +11311,7 @@ packages: http-proxy-agent: 5.0.0 https-proxy-agent: 5.0.1 is-potential-custom-element-name: 1.0.1 - nwsapi: 2.2.5 + nwsapi: 2.2.6 parse5: 7.1.2 rrweb-cssom: 0.6.0 saxes: 6.0.0 @@ -11333,7 +11580,7 @@ packages: optional: true dependencies: cli-truncate: 2.1.0 - colorette: 2.0.20 + colorette: 2.0.19 enquirer: 2.3.6 log-update: 4.0.0 p-map: 4.0.0 @@ -11353,7 +11600,7 @@ packages: optional: true dependencies: cli-truncate: 2.1.0 - colorette: 2.0.20 + colorette: 2.0.19 log-update: 4.0.0 p-map: 4.0.0 rfdc: 1.3.0 @@ -11532,11 +11779,19 @@ packages: dependencies: sourcemap-codec: 1.4.8 + /magic-string@0.27.0: + resolution: {integrity: sha512-8UnnX2PeRAPZuN12svgR9j7M1uWMovg/CEnIwIG0LFkXSJJe4PdfUGiTGl8V9bsBHFUtfVINcSyYxd7q+kx9fA==} + engines: {node: '>=12'} + dependencies: + '@jridgewell/sourcemap-codec': 1.4.14 + dev: true + /magic-string@0.30.0: resolution: {integrity: sha512-LA+31JYDJLs82r2ScLrlz1GjSgu66ZV518eyWT+S8VhyQn/JL0u9MeBOvQMGYiPk1DBiSN9DDMOcXvigJZaViQ==} engines: {node: '>=12'} dependencies: '@jridgewell/sourcemap-codec': 1.4.14 + dev: true /magic-string@0.30.1: resolution: {integrity: sha512-mbVKXPmS0z0G4XqFDCTllmDQ6coZzn94aMlb0o/A4HEHJCKcanlDZwYJgwnkmgD3jyWhUgj9VsPrfd972yPffA==} @@ -12127,6 +12382,13 @@ packages: brace-expansion: 2.0.1 dev: true + /minimatch@7.4.6: + resolution: {integrity: sha512-sBz8G/YjVniEz6lKPNpKxXwazJe4c19fEfV2GDMX6AjFz+MX9uDWIZW8XreVhkFW3fkIdTv/gxWr/Kks5FFAVw==} + engines: {node: '>=10'} + dependencies: + brace-expansion: 2.0.1 + dev: true + /minimatch@9.0.0: resolution: {integrity: sha512-0jJj8AvgKqWN05mrwuqi8QYKx1WmYSUoKSxu5Qhs9prezTz10sxAHGNZe9J9cqIJzta8DWsleh2KaVaLl6Ru2w==} engines: {node: '>=16 || 14 >=14.17'} @@ -12134,8 +12396,8 @@ packages: brace-expansion: 2.0.1 dev: true - /minimatch@9.0.1: - resolution: {integrity: sha512-0jWhJpD/MdhPXwPuiRkCbfYfSKp2qnn2eOc279qI7f+osl/l+prKSrvhg157zSYvx/1nmgn2NqdT6k2Z7zSH9w==} + /minimatch@9.0.2: + resolution: {integrity: sha512-PZOT9g5v2ojiTL7r1xF6plNHLtOeTpSlDI007As2NlA2aYBMfVom17yqa6QzhmDP8QOhn7LjHTg7DFCVSSa6yg==} engines: {node: '>=16 || 14 >=14.17'} dependencies: brace-expansion: 2.0.1 @@ -12184,6 +12446,7 @@ packages: resolution: {integrity: sha512-ua8PAThnTwpprIaU47EPeZ/bPUVp2QYBbWMphUQpVdBI3Lgqzm5KZQ45Agm3YJedHXaIHl6pBGabaLSUPPSptg==} dependencies: acorn: 8.10.0 + acorn: 8.9.0 pathe: 1.1.1 pkg-types: 1.0.3 ufo: 1.1.2 @@ -12345,7 +12608,7 @@ packages: resolution: {integrity: sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==} dependencies: hosted-git-info: 2.8.9 - resolve: 1.22.2 + resolve: 1.22.1 semver: 5.7.1 validate-npm-package-license: 3.0.4 dev: true @@ -12355,8 +12618,8 @@ packages: engines: {node: '>=10'} dependencies: hosted-git-info: 4.1.0 - is-core-module: 2.12.1 - semver: 7.5.3 + is-core-module: 2.10.0 + semver: 7.5.0 validate-npm-package-license: 3.0.4 dev: true @@ -12390,8 +12653,8 @@ packages: path-key: 4.0.0 dev: true - /nwsapi@2.2.5: - resolution: {integrity: sha512-6xpotnECFy/og7tKSBVmUNft7J3jyXAka4XvG6AUhFWRz+Q/Ljus7znJAA3bxColfQLdS+XsjoodtJfCgeTEFQ==} + /nwsapi@2.2.6: + resolution: {integrity: sha512-vSZ4miHQ4FojLjmz2+ux4B0/XA16jfwt/LBzIUftDpRd8tujHFkXjMyLwjS08fIZCzesj2z7gJukOKJwqebJAQ==} dev: true /nyc@15.1.0: @@ -12803,6 +13066,10 @@ packages: resolution: {integrity: sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg==} dev: true + /perfect-debounce@0.1.3: + resolution: {integrity: sha512-NOT9AcKiDGpnV/HBhI22Str++XWcErO/bALvHCuhv33owZW/CjH8KAFLZDCmu3727sihe0wTxpDhyGc6M8qacQ==} + dev: true + /perfect-debounce@1.0.0: resolution: {integrity: sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==} dev: true @@ -12838,7 +13105,7 @@ packages: /pino-abstract-transport@1.0.0: resolution: {integrity: sha512-c7vo5OpW4wIS42hUVcT5REsL8ZljsUfBjqV/e2sFxmFEFZiq1XLUp5EYLtuDH6PEHq9W1egWqRbnLUP5FuZmOA==} dependencies: - readable-stream: 4.4.0 + readable-stream: 4.4.2 split2: 4.2.0 dev: false @@ -12846,8 +13113,8 @@ packages: resolution: {integrity: sha512-EqX4pwDPrt3MuOAAUBMU0Tk5kR/YcCM5fNPEzgCO2zJ5HfX0vbiH9HbJglnyeQsN96Kznae6MWD47pZB5avTrg==} dev: true - /pino-std-serializers@6.2.1: - resolution: {integrity: sha512-wHuWB+CvSVb2XqXM0W/WOYUkVSPbiJb9S5fNB7TBhd8s892Xq910bRxwHtC4l71hgztObTjXL6ZheZXFjhDrDQ==} + /pino-std-serializers@6.2.2: + resolution: {integrity: sha512-cHjPPsE+vhj/tnhCy/wiMh3M3z3h/j15zHQX+S9GkTBgqJuTuJzYJ4gUyACLhDaJ7kk9ba9iRDmbH2tJU03OiA==} dev: false /pino@6.14.0: @@ -12871,7 +13138,7 @@ packages: fast-redact: 3.1.2 on-exit-leak-free: 2.1.0 pino-abstract-transport: 1.0.0 - pino-std-serializers: 6.2.1 + pino-std-serializers: 6.2.2 process-warning: 2.2.0 quick-format-unescaped: 4.0.4 real-require: 0.2.0 @@ -12959,23 +13226,23 @@ packages: peerDependencies: postcss: ^8.0.0 dependencies: - postcss: 8.4.24 + postcss: 8.4.23 postcss-value-parser: 4.2.0 read-cache: 1.0.0 resolve: 1.22.2 dev: false - /postcss-js@4.0.1(postcss@8.4.24): + /postcss-js@4.0.1(postcss@8.4.23): resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==} engines: {node: ^12 || ^14 || >= 16} peerDependencies: postcss: ^8.4.21 dependencies: camelcase-css: 2.0.1 - postcss: 8.4.24 + postcss: 8.4.23 dev: false - /postcss-load-config@4.0.1(postcss@8.4.24)(ts-node@10.9.1): + /postcss-load-config@4.0.1(postcss@8.4.23)(ts-node@10.9.1): resolution: {integrity: sha512-vEJIc8RdiBRu3oRAI0ymerOn+7rPuMvRXslTvZUKZonDHFIczxztIyJ1urxM1x9JXEikvpWWTUUqal5j/8QgvA==} engines: {node: '>= 14'} peerDependencies: @@ -12988,18 +13255,18 @@ packages: optional: true dependencies: lilconfig: 2.1.0 - postcss: 8.4.24 + postcss: 8.4.23 ts-node: 10.9.1(@types/node@18.16.0)(typescript@5.1.3) yaml: 2.2.2 dev: false - /postcss-nested@6.0.1(postcss@8.4.24): + /postcss-nested@6.0.1(postcss@8.4.23): resolution: {integrity: sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==} engines: {node: '>=12.0'} peerDependencies: postcss: ^8.2.14 dependencies: - postcss: 8.4.24 + postcss: 8.4.23 postcss-selector-parser: 6.0.13 dev: false @@ -13030,6 +13297,7 @@ packages: nanoid: 3.3.6 picocolors: 1.0.0 source-map-js: 1.0.2 + dev: true /preact@10.11.0: resolution: {integrity: sha512-Fk6+vB2kb6mSJfDgODq0YDhMfl0HNtK5+Uc9QqECO4nlyPAQwCI+BKyWO//idA7ikV7o+0Fm6LQmNuQi1wXI1w==} @@ -13147,6 +13415,11 @@ packages: once: 1.4.0 dev: true + /punycode@2.1.1: + resolution: {integrity: sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==} + engines: {node: '>=6'} + dev: true + /punycode@2.3.0: resolution: {integrity: sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==} engines: {node: '>=6'} @@ -13287,14 +13560,15 @@ packages: util-deprecate: 1.0.2 dev: true - /readable-stream@4.4.0: - resolution: {integrity: sha512-kDMOq0qLtxV9f/SQv522h8cxZBqNZXuXNyjyezmfAAuribMyVXziljpQ/uQhfE1XLg2/TLTW2DsnoE4VAi/krg==} + /readable-stream@4.4.2: + resolution: {integrity: sha512-Lk/fICSyIhodxy1IDK2HazkeGjSmezAWX2egdtJnYhtzKEsBPJowlI6F6LPb5tqIQILrMbx22S5o3GuJavPusA==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} dependencies: abort-controller: 3.0.0 buffer: 6.0.3 events: 3.3.0 process: 0.11.10 + string_decoder: 1.3.0 dev: false /readdirp@3.6.0: @@ -13312,7 +13586,7 @@ packages: resolution: {integrity: sha512-/njmZ8s1wVeR6pjTZ+0nCnv8SpZNRMT2D1RLOJQESlYFDBvwpTA4KWJpZ+sBJ4+vhjILRcK7JIFdGCdxEAAitg==} engines: {node: '>= 0.10'} dependencies: - resolve: 1.22.2 + resolve: 1.22.1 dev: true /redent@3.0.0: @@ -13513,7 +13787,7 @@ packages: /resolve@1.19.0: resolution: {integrity: sha512-rArEXAgsBG4UgRGcynxWIWKFvh/XZCcS8UJdHhwy91zwAvCZIbcs+vAbflgBnNjYMs/i/i+/Ux6IZhML1yPvxg==} dependencies: - is-core-module: 2.12.1 + is-core-module: 2.10.0 path-parse: 1.0.7 dev: true @@ -13676,7 +13950,6 @@ packages: /safe-buffer@5.2.1: resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==} - dev: true /safe-regex-test@1.0.0: resolution: {integrity: sha512-JBUUzyOgEwXQY1NuPtvcj/qcBDbDmEvWufhlnXZIm75DEHp+afM1r1ujJpJsV/gSM4t59tpDyPi1sd6ZaPFfsA==} @@ -13925,6 +14198,15 @@ packages: vscode-textmate: 8.0.0 dev: true + /shiki@0.14.2: + resolution: {integrity: sha512-ltSZlSLOuSY0M0Y75KA+ieRaZ0Trf5Wl3gutE7jzLuIcWxLp5i/uEnLoQWNvgKXQ5OMpGkJnVMRLAuzjc0LJ2A==} + dependencies: + ansi-sequence-parser: 1.1.0 + jsonc-parser: 3.2.0 + vscode-oniguruma: 1.7.0 + vscode-textmate: 8.0.0 + dev: true + /shiki@0.14.3: resolution: {integrity: sha512-U3S/a+b0KS+UkTyMjoNojvTgrBHjgp7L6ovhFVZsXmBGnVdQ4K4U9oK0z63w538S91ATngv1vXigHCSWOwnr+g==} dependencies: @@ -14311,7 +14593,6 @@ packages: resolution: {integrity: sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==} dependencies: safe-buffer: 5.2.1 - dev: true /stringify-object@3.3.0: resolution: {integrity: sha512-rHqiFh1elqCQ9WPLIC8I0Q/g/wj5J1eMkyoiD6eoQApWHP0FtlK7rqnhmabL5VUY9JQCcqwwvlOaSuutekgyrw==} @@ -14452,8 +14733,8 @@ packages: tslib: 2.5.0 dev: true - /tabbable@6.1.2: - resolution: {integrity: sha512-qCN98uP7i9z0fIS4amQ5zbGBOq+OSigYeGvPy7NDk8Y9yncqDZ9pRPgfsc2PJIVM9RrJj7GIfuRgmjoUU9zTHQ==} + /tabbable@6.2.0: + resolution: {integrity: sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==} dev: true /tailwindcss@3.3.2(ts-node@10.9.1): @@ -14475,11 +14756,11 @@ packages: normalize-path: 3.0.0 object-hash: 3.0.0 picocolors: 1.0.0 - postcss: 8.4.24 - postcss-import: 15.1.0(postcss@8.4.24) - postcss-js: 4.0.1(postcss@8.4.24) - postcss-load-config: 4.0.1(postcss@8.4.24)(ts-node@10.9.1) - postcss-nested: 6.0.1(postcss@8.4.24) + postcss: 8.4.23 + postcss-import: 15.1.0(postcss@8.4.23) + postcss-js: 4.0.1(postcss@8.4.23) + postcss-load-config: 4.0.1(postcss@8.4.23)(ts-node@10.9.1) + postcss-nested: 6.0.1(postcss@8.4.23) postcss-selector-parser: 6.0.13 postcss-value-parser: 4.2.0 resolve: 1.22.2 @@ -14694,7 +14975,7 @@ packages: engines: {node: '>=0.8'} dependencies: psl: 1.9.0 - punycode: 2.3.0 + punycode: 2.1.1 dev: true /tough-cookie@4.1.2: @@ -15001,10 +15282,18 @@ packages: which-boxed-primitive: 1.0.2 dev: true + /unconfig@0.3.7: + resolution: {integrity: sha512-1589b7oGa8ILBYpta7TndM5mLHLzHUqBfhszeZxuUBrjO/RoQ52VGVWsS3w0C0GLNxO9RPmqkf6BmIvBApaRdA==} + dependencies: + '@antfu/utils': 0.5.2 + defu: 6.1.2 + jiti: 1.18.2 + dev: true + /unconfig@0.3.9: resolution: {integrity: sha512-8yhetFd48M641mxrkWA+C/lZU4N0rCOdlo3dFsyFPnBHBjMJfjT/3eAZBRT2RxCRqeBMAKBVgikejdS6yeBjMw==} dependencies: - '@antfu/utils': 0.7.4 + '@antfu/utils': 0.7.5 defu: 6.1.2 jiti: 1.18.2 dev: true @@ -15110,6 +15399,42 @@ packages: engines: {node: '>= 10.0.0'} dev: true + /unocss@0.51.8(postcss@8.4.24)(rollup@2.79.1)(vite@4.3.3): + resolution: {integrity: sha512-uty78ilhQ/HxvjIDLRZ0J6Kb6fSfTKv0afyP7iWQmqoG/qTBR33ambnuTmi2Dt5GzCxAY6tyCaWjK/FZ7mfEYg==} + engines: {node: '>=14'} + peerDependencies: + '@unocss/webpack': 0.51.8 + peerDependenciesMeta: + '@unocss/webpack': + optional: true + dependencies: + '@unocss/astro': 0.51.8(rollup@2.79.1)(vite@4.3.3) + '@unocss/cli': 0.51.8(rollup@2.79.1) + '@unocss/core': 0.51.8 + '@unocss/extractor-arbitrary-variants': 0.51.8 + '@unocss/postcss': 0.51.8(postcss@8.4.24) + '@unocss/preset-attributify': 0.51.8 + '@unocss/preset-icons': 0.51.8 + '@unocss/preset-mini': 0.51.8 + '@unocss/preset-tagify': 0.51.8 + '@unocss/preset-typography': 0.51.8 + '@unocss/preset-uno': 0.51.8 + '@unocss/preset-web-fonts': 0.51.8 + '@unocss/preset-wind': 0.51.8 + '@unocss/reset': 0.51.8 + '@unocss/transformer-attributify-jsx': 0.51.8 + '@unocss/transformer-attributify-jsx-babel': 0.51.8 + '@unocss/transformer-compile-class': 0.51.8 + '@unocss/transformer-directives': 0.51.8 + '@unocss/transformer-variant-group': 0.51.8 + '@unocss/vite': 0.51.8(rollup@2.79.1)(vite@4.3.3) + transitivePeerDependencies: + - postcss + - rollup + - supports-color + - vite + dev: true + /unocss@0.53.0(postcss@8.4.24)(rollup@2.79.1)(vite@4.3.3): resolution: {integrity: sha512-kY4h5ERiDYlSnL2X+hbDfh+uaF7QNouy7j51GOTUr3Q0aaWehaNd05b15SjHrab559dEC0mYfrSEdh/DnCK1cw==} engines: {node: '>=14'} @@ -15151,6 +15476,35 @@ packages: engines: {node: '>= 0.8'} dev: true + /unplugin-vue-components@0.24.1(rollup@2.79.1)(vue@3.2.47): + resolution: {integrity: sha512-T3A8HkZoIE1Cja95xNqolwza0yD5IVlgZZ1PVAGvVCx8xthmjsv38xWRCtHtwl+rvZyL9uif42SRkDGw9aCfMA==} + engines: {node: '>=14'} + peerDependencies: + '@babel/parser': ^7.15.8 + '@nuxt/kit': ^3.2.2 + vue: 2 || 3 + peerDependenciesMeta: + '@babel/parser': + optional: true + '@nuxt/kit': + optional: true + dependencies: + '@antfu/utils': 0.7.2 + '@rollup/pluginutils': 5.0.2(rollup@2.79.1) + chokidar: 3.5.3 + debug: 4.3.4(supports-color@8.1.1) + fast-glob: 3.2.12 + local-pkg: 0.4.3 + magic-string: 0.30.0 + minimatch: 7.4.6 + resolve: 1.22.1 + unplugin: 1.1.0 + vue: 3.2.47 + transitivePeerDependencies: + - rollup + - supports-color + dev: true + /unplugin-vue-components@0.25.0(rollup@2.79.1)(vue@3.2.47): resolution: {integrity: sha512-HxrQ4GMSS1RwVww2av3a42cABo/v5AmTRN9iARv6e/xwkrfTyHhLh84kFwXxKkXK61vxDHxaryn694mQmkiVBg==} engines: {node: '>=14'} @@ -15164,24 +15518,24 @@ packages: '@nuxt/kit': optional: true dependencies: - '@antfu/utils': 0.7.4 + '@antfu/utils': 0.7.5 '@rollup/pluginutils': 5.0.2(rollup@2.79.1) chokidar: 3.5.3 debug: 4.3.4(supports-color@8.1.1) fast-glob: 3.2.12 local-pkg: 0.4.3 magic-string: 0.30.0 - minimatch: 9.0.1 + minimatch: 9.0.2 resolve: 1.22.2 - unplugin: 1.3.1 + unplugin: 1.3.2 vue: 3.2.47 transitivePeerDependencies: - rollup - supports-color dev: true - /unplugin@1.3.1: - resolution: {integrity: sha512-h4uUTIvFBQRxUKS2Wjys6ivoeofGhxzTe2sRWlooyjHXVttcVfV/JiavNd3d4+jty0SVV0dxGw9AkY9MwiaCEw==} + /unplugin@1.1.0: + resolution: {integrity: sha512-I8obQ8Rs/hnkxokRV6g8JKOQFgYNnTd9DL58vcSt5IJ9AkK8wbrtsnzD5hi4BJlvcY536JzfEXj9L6h7j559/A==} dependencies: acorn: 8.8.2 chokidar: 3.5.3 @@ -15189,6 +15543,15 @@ packages: webpack-virtual-modules: 0.5.0 dev: true + /unplugin@1.3.2: + resolution: {integrity: sha512-Lh7/2SryjXe/IyWqx9K7IKwuKhuOFZEhotiBquOODsv2IVyDkI9lv/XhgfjdXf/xdbv32txmnBNnC/JVTDJlsA==} + dependencies: + acorn: 8.9.0 + chokidar: 3.5.3 + webpack-sources: 3.2.3 + webpack-virtual-modules: 0.5.0 + dev: true + /untildify@4.0.0: resolution: {integrity: sha512-KK8xQ1mkzZeg9inewmFVDNkg3l5LUhoq9kN6iWYB/CC9YMG8HA+c1Q8HwDe6dEX7kErrEVNVBO3fWsVq5iDgtw==} engines: {node: '>=8'} @@ -15224,7 +15587,7 @@ packages: /uri-js@4.4.1: resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==} dependencies: - punycode: 2.3.0 + punycode: 2.1.1 dev: true /url-parse@1.5.10: @@ -15265,6 +15628,15 @@ packages: /v8-compile-cache-lib@3.0.1: resolution: {integrity: sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==} + /v8-to-istanbul@9.0.1: + resolution: {integrity: sha512-74Y4LqY74kLE6IFyIjPtkSTWzUZmj8tdHT9Ii/26dvQ6K9Dl2NbEfj0XgU2sHCtKgt5VupqhlO/5aWuqS+IY1w==} + engines: {node: '>=10.12.0'} + dependencies: + '@jridgewell/trace-mapping': 0.3.17 + '@types/istanbul-lib-coverage': 2.0.4 + convert-source-map: 1.8.0 + dev: true + /v8-to-istanbul@9.1.0: resolution: {integrity: sha512-6z3GW9x8G1gd+JIIgQQQxXuiJtCXeAjp6RaPEPLv62mH3iPHPxV6W3robxtCzNErRo6ZwTmzWhsbNvjyEBKzKA==} engines: {node: '>=10.12.0'} @@ -15346,6 +15718,25 @@ packages: - supports-color dev: true + /vite-plugin-pwa@0.14.7(vite@4.3.3)(workbox-build@6.5.4)(workbox-window@6.5.4): + resolution: {integrity: sha512-dNJaf0fYOWncmjxv9HiSa2xrSjipjff7IkYE5oIUJ2x5HKu3cXgA8LRgzOwTc5MhwyFYRSU0xyN0Phbx3NsQYw==} + peerDependencies: + vite: ^3.1.0 || ^4.0.0 + workbox-build: ^6.5.4 + workbox-window: ^6.5.4 + dependencies: + '@rollup/plugin-replace': 5.0.2(rollup@3.21.0) + debug: 4.3.4(supports-color@8.1.1) + fast-glob: 3.2.12 + pretty-bytes: 6.1.0 + rollup: 3.21.0 + vite: 4.3.3(@types/node@18.16.0) + workbox-build: 6.5.4 + workbox-window: 6.5.4 + transitivePeerDependencies: + - supports-color + dev: true + /vite-plugin-pwa@0.16.0(vite@4.3.3)(workbox-build@7.0.0)(workbox-window@7.0.0): resolution: {integrity: sha512-E+AQRzHxqNU4ZhEeR8X37/foZB+ezJEhXauE/mcf1UITY6k2Pa1dtlFl+BQu57fTdiVlWim5S0Qy44Yap93Dkg==} engines: {node: '>=16.0.0'} @@ -15397,39 +15788,6 @@ packages: fsevents: 2.3.2 dev: true - /vite@4.3.8(@types/node@18.16.0): - resolution: {integrity: sha512-uYB8PwN7hbMrf4j1xzGDk/lqjsZvCDbt/JC5dyfxc19Pg8kRm14LinK/uq+HSLNswZEoKmweGdtpbnxRtrAXiQ==} - engines: {node: ^14.18.0 || >=16.0.0} - hasBin: true - peerDependencies: - '@types/node': '>= 14' - less: '*' - sass: '*' - stylus: '*' - sugarss: '*' - terser: ^5.4.0 - peerDependenciesMeta: - '@types/node': - optional: true - less: - optional: true - sass: - optional: true - stylus: - optional: true - sugarss: - optional: true - terser: - optional: true - dependencies: - '@types/node': 18.16.0 - esbuild: 0.17.18 - postcss: 8.4.24 - rollup: 3.26.0 - optionalDependencies: - fsevents: 2.3.2 - dev: true - /vite@4.3.9(@types/node@18.16.0): resolution: {integrity: sha512-qsTNZjO9NoJNW7KnOrgYwczm0WctJ8m/yqYAMAK9Lxt4SoySUfS5S8ia9K7JHpa3KEeMfyF8LoJ3c5NeBJy6pg==} engines: {node: ^14.18.0 || >=16.0.0} @@ -15521,16 +15879,45 @@ packages: hasBin: true dependencies: '@docsearch/css': 3.3.3 - '@docsearch/js': 3.3.5(@algolia/client-search@4.14.2) - '@vitejs/plugin-vue': 4.2.3(vite@4.3.8)(vue@3.3.4) + '@docsearch/js': 3.3.3(@algolia/client-search@4.14.2) + '@vitejs/plugin-vue': 4.2.1(vite@4.3.3)(vue@3.2.47) '@vue/devtools-api': 6.5.0 - '@vueuse/core': 10.1.2(vue@3.3.4) + '@vueuse/core': 10.1.0(vue@3.2.47) body-scroll-lock: 4.0.0-beta.0 mark.js: 8.11.1 minisearch: 6.0.1 shiki: 0.14.1 - vite: 4.3.8(@types/node@18.16.0) - vue: 3.3.4 + vite: 4.3.3(@types/node@18.16.0) + vue: 3.2.47 + transitivePeerDependencies: + - '@algolia/client-search' + - '@types/node' + - '@types/react' + - '@vue/composition-api' + - less + - react + - react-dom + - sass + - stylus + - sugarss + - terser + dev: true + + /vitepress@1.0.0-alpha.75(@algolia/client-search@4.14.2)(@types/node@18.16.0): + resolution: {integrity: sha512-twpPZ/6UnDR8X0Nmj767KwKhXlTQQM9V/J1i2BP9ryO29/w4hpxBfEum6nvfpNhJ4H3h+cIhwzAK/e9crZ6HEQ==} + hasBin: true + dependencies: + '@docsearch/css': 3.3.4 + '@docsearch/js': 3.3.4(@algolia/client-search@4.14.2) + '@vitejs/plugin-vue': 4.2.1(vite@4.3.3)(vue@3.2.47) + '@vue/devtools-api': 6.5.0 + '@vueuse/core': 10.1.0(vue@3.2.47) + body-scroll-lock: 4.0.0-beta.0 + mark.js: 8.11.1 + minisearch: 6.0.1 + shiki: 0.14.2 + vite: 4.3.3(@types/node@18.16.0) + vue: 3.2.47 transitivePeerDependencies: - '@algolia/client-search' - '@types/node' @@ -15554,9 +15941,9 @@ packages: '@vitejs/plugin-vue': 4.2.3(vite@4.4.0-beta.3)(vue@3.3.4) '@vue/devtools-api': 6.5.0 '@vueuse/core': 10.2.1(vue@3.3.4) - '@vueuse/integrations': 10.2.1(focus-trap@7.4.3)(vue@3.3.4) + '@vueuse/integrations': 10.2.1(focus-trap@7.5.1)(vue@3.3.4) body-scroll-lock: 4.0.0-beta.0 - focus-trap: 7.4.3 + focus-trap: 7.5.1 mark.js: 8.11.1 minisearch: 6.1.0 shiki: 0.14.3 @@ -15710,7 +16097,6 @@ packages: optional: true dependencies: vue: 3.2.47 - dev: false /vue-demi@0.14.5(vue@3.3.4): resolution: {integrity: sha512-o9NUVpl/YlsGJ7t+xuqJKx8EBGf1quRhCiT6D/J0pfwmk9zUwYkC7yrF4SZCe6fETvSM3UNL2edcbYrSyc4QHA==} @@ -15744,14 +16130,15 @@ packages: '@vue/runtime-dom': 3.3.4 '@vue/server-renderer': 3.3.4(vue@3.3.4) '@vue/shared': 3.3.4 + dev: true - /vuex@4.1.0(vue@3.3.4): + /vuex@4.1.0(vue@3.2.47): resolution: {integrity: sha512-hmV6UerDrPcgbSy9ORAtNXDr9M4wlNP4pEFKye4ujJF8oqgFFuxDCdOLS3eNoRTtq5O3hoBDh9Doj1bQMYHRbQ==} peerDependencies: vue: ^3.2.0 dependencies: '@vue/devtools-api': 6.5.0 - vue: 3.3.4 + vue: 3.2.47 dev: false /w3c-hr-time@1.0.2: @@ -15890,7 +16277,7 @@ packages: peerDependencies: webpack: ^4.0.0 || ^5.0.0 dependencies: - colorette: 2.0.20 + colorette: 2.0.19 memfs: 3.4.11 mime-types: 2.1.35 range-parser: 1.2.1 @@ -16140,6 +16527,13 @@ packages: resolution: {integrity: sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==} dev: true + /workbox-background-sync@6.5.4: + resolution: {integrity: sha512-0r4INQZMyPky/lj4Ou98qxcThrETucOde+7mRGJl13MPJugQNKeZQOdIJe/1AchOP23cTqHcN/YVpD6r8E6I8g==} + dependencies: + idb: 7.1.1 + workbox-core: 6.5.4 + dev: true + /workbox-background-sync@7.0.0: resolution: {integrity: sha512-S+m1+84gjdueM+jIKZ+I0Lx0BDHkk5Nu6a3kTVxP4fdj3gKouRNmhO8H290ybnJTOPfBDtTMXSQA/QLTvr7PeA==} dependencies: @@ -16147,12 +16541,64 @@ packages: workbox-core: 7.0.0 dev: true + /workbox-broadcast-update@6.5.4: + resolution: {integrity: sha512-I/lBERoH1u3zyBosnpPEtcAVe5lwykx9Yg1k6f8/BGEPGaMMgZrwVrqL1uA9QZ1NGGFoyE6t9i7lBjOlDhFEEw==} + dependencies: + workbox-core: 6.5.4 + dev: true + /workbox-broadcast-update@7.0.0: resolution: {integrity: sha512-oUuh4jzZrLySOo0tC0WoKiSg90bVAcnE98uW7F8GFiSOXnhogfNDGZelPJa+6KpGBO5+Qelv04Hqx2UD+BJqNQ==} dependencies: workbox-core: 7.0.0 dev: true + /workbox-build@6.5.4: + resolution: {integrity: sha512-kgRevLXEYvUW9WS4XoziYqZ8Q9j/2ziJYEtTrjdz5/L/cTUa2XfyMP2i7c3p34lgqJ03+mTiz13SdFef2POwbA==} + engines: {node: '>=10.0.0'} + dependencies: + '@apideck/better-ajv-errors': 0.3.6(ajv@8.11.0) + '@babel/core': 7.12.3 + '@babel/preset-env': 7.20.2(@babel/core@7.12.3) + '@babel/runtime': 7.21.0 + '@rollup/plugin-babel': 5.3.1(@babel/core@7.12.3)(rollup@2.79.1) + '@rollup/plugin-node-resolve': 11.2.1(rollup@2.79.1) + '@rollup/plugin-replace': 2.4.2(rollup@2.79.1) + '@surma/rollup-plugin-off-main-thread': 2.2.3 + ajv: 8.11.0 + common-tags: 1.8.2 + fast-json-stable-stringify: 2.1.0 + fs-extra: 9.1.0 + glob: 7.2.3 + lodash: 4.17.21 + pretty-bytes: 5.6.0 + rollup: 2.79.1 + rollup-plugin-terser: 7.0.2(rollup@2.79.1) + source-map: 0.8.0-beta.0 + stringify-object: 3.3.0 + strip-comments: 2.0.1 + tempy: 0.6.0 + upath: 1.2.0 + workbox-background-sync: 6.5.4 + workbox-broadcast-update: 6.5.4 + workbox-cacheable-response: 6.5.4 + workbox-core: 6.5.4 + workbox-expiration: 6.5.4 + workbox-google-analytics: 6.5.4 + workbox-navigation-preload: 6.5.4 + workbox-precaching: 6.5.4 + workbox-range-requests: 6.5.4 + workbox-recipes: 6.5.4 + workbox-routing: 6.5.4 + workbox-strategies: 6.5.4 + workbox-streams: 6.5.4 + workbox-sw: 6.5.4 + workbox-window: 6.5.4 + transitivePeerDependencies: + - '@types/babel__core' + - supports-color + dev: true + /workbox-build@7.0.0: resolution: {integrity: sha512-CttE7WCYW9sZC+nUYhQg3WzzGPr4IHmrPnjKiu3AMXsiNQKx+l4hHl63WTrnicLmKEKHScWDH8xsGBdrYgtBzg==} engines: {node: '>=16.0.0'} @@ -16199,16 +16645,33 @@ packages: - supports-color dev: true + /workbox-cacheable-response@6.5.4: + resolution: {integrity: sha512-DCR9uD0Fqj8oB2TSWQEm1hbFs/85hXXoayVwFKLVuIuxwJaihBsLsp4y7J9bvZbqtPJ1KlCkmYVGQKrBU4KAug==} + dependencies: + workbox-core: 6.5.4 + dev: true + /workbox-cacheable-response@7.0.0: resolution: {integrity: sha512-0lrtyGHn/LH8kKAJVOQfSu3/80WDc9Ma8ng0p2i/5HuUndGttH+mGMSvOskjOdFImLs2XZIimErp7tSOPmu/6g==} dependencies: workbox-core: 7.0.0 dev: true + /workbox-core@6.5.4: + resolution: {integrity: sha512-OXYb+m9wZm8GrORlV2vBbE5EC1FKu71GGp0H4rjmxmF4/HLbMCoTFws87M3dFwgpmg0v00K++PImpNQ6J5NQ6Q==} + dev: true + /workbox-core@7.0.0: resolution: {integrity: sha512-81JkAAZtfVP8darBpfRTovHg8DGAVrKFgHpOArZbdFd78VqHr5Iw65f2guwjE2NlCFbPFDoez3D3/6ZvhI/rwQ==} dev: true + /workbox-expiration@6.5.4: + resolution: {integrity: sha512-jUP5qPOpH1nXtjGGh1fRBa1wJL2QlIb5mGpct3NzepjGG2uFFBn4iiEBiI9GUmfAFR2ApuRhDydjcRmYXddiEQ==} + dependencies: + idb: 7.1.1 + workbox-core: 6.5.4 + dev: true + /workbox-expiration@7.0.0: resolution: {integrity: sha512-MLK+fogW+pC3IWU9SFE+FRStvDVutwJMR5if1g7oBJx3qwmO69BNoJQVaMXq41R0gg3MzxVfwOGKx3i9P6sOLQ==} dependencies: @@ -16216,6 +16679,15 @@ packages: workbox-core: 7.0.0 dev: true + /workbox-google-analytics@6.5.4: + resolution: {integrity: sha512-8AU1WuaXsD49249Wq0B2zn4a/vvFfHkpcFfqAFHNHwln3jK9QUYmzdkKXGIZl9wyKNP+RRX30vcgcyWMcZ9VAg==} + dependencies: + workbox-background-sync: 6.5.4 + workbox-core: 6.5.4 + workbox-routing: 6.5.4 + workbox-strategies: 6.5.4 + dev: true + /workbox-google-analytics@7.0.0: resolution: {integrity: sha512-MEYM1JTn/qiC3DbpvP2BVhyIH+dV/5BjHk756u9VbwuAhu0QHyKscTnisQuz21lfRpOwiS9z4XdqeVAKol0bzg==} dependencies: @@ -16225,12 +16697,26 @@ packages: workbox-strategies: 7.0.0 dev: true + /workbox-navigation-preload@6.5.4: + resolution: {integrity: sha512-IIwf80eO3cr8h6XSQJF+Hxj26rg2RPFVUmJLUlM0+A2GzB4HFbQyKkrgD5y2d84g2IbJzP4B4j5dPBRzamHrng==} + dependencies: + workbox-core: 6.5.4 + dev: true + /workbox-navigation-preload@7.0.0: resolution: {integrity: sha512-juWCSrxo/fiMz3RsvDspeSLGmbgC0U9tKqcUPZBCf35s64wlaLXyn2KdHHXVQrb2cqF7I0Hc9siQalainmnXJA==} dependencies: workbox-core: 7.0.0 dev: true + /workbox-precaching@6.5.4: + resolution: {integrity: sha512-hSMezMsW6btKnxHB4bFy2Qfwey/8SYdGWvVIKFaUm8vJ4E53JAY+U2JwLTRD8wbLWoP6OVUdFlXsTdKu9yoLTg==} + dependencies: + workbox-core: 6.5.4 + workbox-routing: 6.5.4 + workbox-strategies: 6.5.4 + dev: true + /workbox-precaching@7.0.0: resolution: {integrity: sha512-EC0vol623LJqTJo1mkhD9DZmMP604vHqni3EohhQVwhJlTgyKyOkMrZNy5/QHfOby+39xqC01gv4LjOm4HSfnA==} dependencies: @@ -16239,12 +16725,29 @@ packages: workbox-strategies: 7.0.0 dev: true + /workbox-range-requests@6.5.4: + resolution: {integrity: sha512-Je2qR1NXCFC8xVJ/Lux6saH6IrQGhMpDrPXWZWWS8n/RD+WZfKa6dSZwU+/QksfEadJEr/NfY+aP/CXFFK5JFg==} + dependencies: + workbox-core: 6.5.4 + dev: true + /workbox-range-requests@7.0.0: resolution: {integrity: sha512-SxAzoVl9j/zRU9OT5+IQs7pbJBOUOlriB8Gn9YMvi38BNZRbM+RvkujHMo8FOe9IWrqqwYgDFBfv6sk76I1yaQ==} dependencies: workbox-core: 7.0.0 dev: true + /workbox-recipes@6.5.4: + resolution: {integrity: sha512-QZNO8Ez708NNwzLNEXTG4QYSKQ1ochzEtRLGaq+mr2PyoEIC1xFW7MrWxrONUxBFOByksds9Z4//lKAX8tHyUA==} + dependencies: + workbox-cacheable-response: 6.5.4 + workbox-core: 6.5.4 + workbox-expiration: 6.5.4 + workbox-precaching: 6.5.4 + workbox-routing: 6.5.4 + workbox-strategies: 6.5.4 + dev: true + /workbox-recipes@7.0.0: resolution: {integrity: sha512-DntcK9wuG3rYQOONWC0PejxYYIDHyWWZB/ueTbOUDQgefaeIj1kJ7pdP3LZV2lfrj8XXXBWt+JDRSw1lLLOnww==} dependencies: @@ -16256,18 +16759,37 @@ packages: workbox-strategies: 7.0.0 dev: true + /workbox-routing@6.5.4: + resolution: {integrity: sha512-apQswLsbrrOsBUWtr9Lf80F+P1sHnQdYodRo32SjiByYi36IDyL2r7BH1lJtFX8fwNHDa1QOVY74WKLLS6o5Pg==} + dependencies: + workbox-core: 6.5.4 + dev: true + /workbox-routing@7.0.0: resolution: {integrity: sha512-8YxLr3xvqidnbVeGyRGkaV4YdlKkn5qZ1LfEePW3dq+ydE73hUUJJuLmGEykW3fMX8x8mNdL0XrWgotcuZjIvA==} dependencies: workbox-core: 7.0.0 dev: true + /workbox-strategies@6.5.4: + resolution: {integrity: sha512-DEtsxhx0LIYWkJBTQolRxG4EI0setTJkqR4m7r4YpBdxtWJH1Mbg01Cj8ZjNOO8etqfA3IZaOPHUxCs8cBsKLw==} + dependencies: + workbox-core: 6.5.4 + dev: true + /workbox-strategies@7.0.0: resolution: {integrity: sha512-dg3qJU7tR/Gcd/XXOOo7x9QoCI9nk74JopaJaYAQ+ugLi57gPsXycVdBnYbayVj34m6Y8ppPwIuecrzkpBVwbA==} dependencies: workbox-core: 7.0.0 dev: true + /workbox-streams@6.5.4: + resolution: {integrity: sha512-FXKVh87d2RFXkliAIheBojBELIPnWbQdyDvsH3t74Cwhg0fDheL1T8BqSM86hZvC0ZESLsznSYWw+Va+KVbUzg==} + dependencies: + workbox-core: 6.5.4 + workbox-routing: 6.5.4 + dev: true + /workbox-streams@7.0.0: resolution: {integrity: sha512-moVsh+5to//l6IERWceYKGiftc+prNnqOp2sgALJJFbnNVpTXzKISlTIsrWY+ogMqt+x1oMazIdHj25kBSq/HQ==} dependencies: @@ -16275,10 +16797,21 @@ packages: workbox-routing: 7.0.0 dev: true + /workbox-sw@6.5.4: + resolution: {integrity: sha512-vo2RQo7DILVRoH5LjGqw3nphavEjK4Qk+FenXeUsknKn14eCNedHOXWbmnvP4ipKhlE35pvJ4yl4YYf6YsJArA==} + dev: true + /workbox-sw@7.0.0: resolution: {integrity: sha512-SWfEouQfjRiZ7GNABzHUKUyj8pCoe+RwjfOIajcx6J5mtgKkN+t8UToHnpaJL5UVVOf5YhJh+OHhbVNIHe+LVA==} dev: true + /workbox-window@6.5.4: + resolution: {integrity: sha512-HnLZJDwYBE+hpG25AQBO8RUWBJRaCsI9ksQJEp3aCOFCaG5kqaToAYXFRAHxzRluM2cQbGzdQF5rjKPWPA1fug==} + dependencies: + '@types/trusted-types': 2.0.2 + workbox-core: 6.5.4 + dev: true + /workbox-window@7.0.0: resolution: {integrity: sha512-j7P/bsAWE/a7sxqTzXo3P2ALb1reTfZdvVp6OJ/uLr/C2kZAMvjeWGm8V4htQhor7DOvYg0sSbFN2+flT5U0qA==} dependencies: From 1c8497474a47e9a271ac6893ae38596c6ff70cca Mon Sep 17 00:00:00 2001 From: Subhash Halder <halder.subhash@gmail.com> Date: Tue, 4 Jul 2023 20:45:22 +0530 Subject: [PATCH 018/457] Fixed prettier issues --- .../xychart/chartBuilder/Interfaces.ts | 11 ++-- .../chartBuilder/components/ChartTitle.ts | 22 ++++--- .../chartBuilder/components/axis/BaseAxis.ts | 16 +++-- .../chartBuilder/components/axis/index.ts | 12 ++-- .../chartBuilder/components/plot/BarPlot.ts | 6 +- .../components/plot/PlotBorder.ts | 5 +- .../chartBuilder/components/plot/index.ts | 64 +++++++++---------- .../diagrams/xychart/chartBuilder/index.ts | 6 +- .../xychart/parser/xychart.jison.spec.ts | 17 ++--- .../mermaid/src/diagrams/xychart/xychartDb.ts | 6 +- 10 files changed, 82 insertions(+), 83 deletions(-) diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts index fcf6425088..efee023ba1 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts @@ -8,14 +8,14 @@ export type SimplePlotDataType = [string | number, number][]; export interface LinePlotData { type: 'line'; - strokeFill: string, - strokeWidth: number, + strokeFill: string; + strokeWidth: number; data: SimplePlotDataType; } export interface BarPlotData { - type: 'bar' - fill: string, + type: 'bar'; + fill: string; data: SimplePlotDataType; } @@ -30,7 +30,7 @@ export interface BandAxisDataType { categories: string[]; } -export interface LinearAxisDataType{ +export interface LinearAxisDataType { title: string; min: number; max: number; @@ -42,7 +42,6 @@ export function isBandAxisData(data: any): data is BandAxisDataType { return data.categories && Array.isArray(data.categories); } - export interface XYChartData { xAxis: AxisDataType; yAxis: AxisDataType; diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts index 3cad0dea05..a9225e57d8 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts @@ -1,13 +1,16 @@ import { XYChartConfig } from '../../../../config.type.js'; import { - BoundingRect, - ChartComponent, - Dimension, - DrawableElem, - Point, - XYChartData, + BoundingRect, + ChartComponent, + Dimension, + DrawableElem, + Point, + XYChartData, } from '../Interfaces.js'; -import { ITextDimensionCalculator, TextDimensionCalculatorWithFont } from '../TextDimensionCalculator.js'; +import { + ITextDimensionCalculator, + TextDimensionCalculatorWithFont, +} from '../TextDimensionCalculator.js'; export class ChartTitle implements ChartComponent { private boundingRect: BoundingRect; @@ -30,7 +33,10 @@ export class ChartTitle implements ChartComponent { this.boundingRect.y = point.y; } calculateSpace(availableSpace: Dimension): Dimension { - const titleDimension = this.textDimensionCalculator.getDimension([this.chartData.title], this.chartConfig.titleFontSize); + const titleDimension = this.textDimensionCalculator.getDimension( + [this.chartData.title], + this.chartConfig.titleFontSize + ); const widthRequired = Math.max(titleDimension.width, availableSpace.width); const heightRequired = titleDimension.height + 2 * this.chartConfig.titlePadding; if ( diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts index 861b6dd8e2..f8245270bd 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts @@ -58,8 +58,8 @@ export abstract class BaseAxis implements IAxis { } recalculateOuterPaddingToDrawBar(): void { - if((0.7 * this.getTickDistance()) > (this.outerPadding * 2) ) { - this.outerPadding = Math.floor((0.7 * this.getTickDistance())/2); + if (0.7 * this.getTickDistance() > this.outerPadding * 2) { + this.outerPadding = Math.floor((0.7 * this.getTickDistance()) / 2); } this.recalculateScale(); } @@ -267,7 +267,11 @@ export abstract class BaseAxis implements IAxis { data: this.getTickValues().map((tick) => ({ text: tick.toString(), x: this.getScaleValue(tick), - y: this.boundingRect.y + this.boundingRect.height - this.axisConfig.lablePadding - this.axisConfig.tickLength, + y: + this.boundingRect.y + + this.boundingRect.height - + this.axisConfig.lablePadding - + this.axisConfig.tickLength, fill: this.axisConfig.labelFill, fontSize: this.axisConfig.labelFontSize, rotation: 0, @@ -282,7 +286,9 @@ export abstract class BaseAxis implements IAxis { type: 'path', groupTexts: ['bottom-axis', 'ticks'], data: this.getTickValues().map((tick) => ({ - path: `M ${this.getScaleValue(tick)},${y + this.boundingRect.height} L ${this.getScaleValue(tick)},${ + path: `M ${this.getScaleValue(tick)},${ + y + this.boundingRect.height + } L ${this.getScaleValue(tick)},${ y + this.boundingRect.height - this.axisConfig.tickLength }`, strokeFill: this.axisConfig.tickFill, @@ -316,7 +322,7 @@ export abstract class BaseAxis implements IAxis { return this.getDrawaableElementsForLeftAxis(); } if (this.axisPosition === 'right') { - throw Error("Drawing of right axis is not implemented"); + throw Error('Drawing of right axis is not implemented'); } if (this.axisPosition === 'bottom') { return this.getDrawaableElementsForBottomAxis(); diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts index e48a0e8455..23df3cdba5 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts @@ -1,9 +1,5 @@ import { XYChartAxisConfig } from '../../../../../config.type.js'; -import { - AxisDataType, - ChartComponent, - isBandAxisData, -} from '../../Interfaces.js'; +import { AxisDataType, ChartComponent, isBandAxisData } from '../../Interfaces.js'; import { TextDimensionCalculatorWithFont } from '../../TextDimensionCalculator.js'; import { BandAxis } from './BandAxis.js'; import { LinearAxis } from './LinearAxis.js'; @@ -19,7 +15,11 @@ export interface IAxis extends ChartComponent { setRange(range: [number, number]): void; } -export function getAxis(data: AxisDataType, axisConfig: XYChartAxisConfig, fontFamily?: string): IAxis { +export function getAxis( + data: AxisDataType, + axisConfig: XYChartAxisConfig, + fontFamily?: string +): IAxis { const textDimansionCalculator = new TextDimensionCalculatorWithFont(fontFamily); if (isBandAxisData(data)) { return new BandAxis(axisConfig, data.categories, data.title, textDimansionCalculator); diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts index 0348ef4b1f..dbb333b7b7 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts @@ -1,9 +1,5 @@ import { XYChartConfig } from '../../../../../config.type.js'; -import { - BarPlotData, - BoundingRect, - DrawableElem, -} from '../../Interfaces.js'; +import { BarPlotData, BoundingRect, DrawableElem } from '../../Interfaces.js'; import { IAxis } from '../axis/index.js'; export class BarPlot { diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/PlotBorder.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/PlotBorder.ts index 2eb475d1fa..ab46689991 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/PlotBorder.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/PlotBorder.ts @@ -1,7 +1,10 @@ import { XYChartConfig } from '../../../../../config.type.js'; import { BoundingRect, DrawableElem } from '../../Interfaces.js'; export class PlotBorder { - constructor(private boundingRect: BoundingRect, private orientation: XYChartConfig['chartOrientation']) {} + constructor( + private boundingRect: BoundingRect, + private orientation: XYChartConfig['chartOrientation'] + ) {} getDrawableElement(): DrawableElem[] { const { x, y, width, height } = this.boundingRect; diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts index e9ebd8e922..61016c0218 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts @@ -1,10 +1,4 @@ -import { - XYChartData, - Dimension, - BoundingRect, - DrawableElem, - Point, -} from '../../Interfaces.js'; +import { XYChartData, Dimension, BoundingRect, DrawableElem, Point } from '../../Interfaces.js'; import { IAxis } from '../axis/index.js'; import { ChartComponent } from '../../Interfaces.js'; import { LinePlot } from './LinePlot.js'; @@ -12,9 +6,8 @@ import { PlotBorder } from './PlotBorder.js'; import { BarPlot } from './BarPlot.js'; import { XYChartConfig } from '../../../../../config.type.js'; - export interface IPlot extends ChartComponent { - setAxes(xAxis: IAxis, yAxis: IAxis): void + setAxes(xAxis: IAxis, yAxis: IAxis): void; } export class Plot implements IPlot { @@ -22,10 +15,7 @@ export class Plot implements IPlot { private xAxis?: IAxis; private yAxis?: IAxis; - constructor( - private chartConfig: XYChartConfig, - private chartData: XYChartData, - ) { + constructor(private chartConfig: XYChartConfig, private chartData: XYChartData) { this.boundingRect = { x: 0, y: 0, @@ -51,33 +41,43 @@ export class Plot implements IPlot { }; } getDrawableElements(): DrawableElem[] { - if(!(this.xAxis && this.yAxis)) { - throw Error("Axes must be passed to render Plots"); + if (!(this.xAxis && this.yAxis)) { + throw Error('Axes must be passed to render Plots'); } const drawableElem: DrawableElem[] = [ - ...new PlotBorder(this.boundingRect, this.chartConfig.chartOrientation).getDrawableElement() + ...new PlotBorder(this.boundingRect, this.chartConfig.chartOrientation).getDrawableElement(), ]; - for(const plot of this.chartData.plots) { - switch(plot.type) { - case 'line': { - const linePlot = new LinePlot(plot, this.xAxis, this.yAxis, this.chartConfig.chartOrientation); - drawableElem.push(...linePlot.getDrawableElement()) - } - break; - case 'bar': { - const barPlot = new BarPlot(plot, this.boundingRect, this.xAxis, this.yAxis, this.chartConfig.chartOrientation) - drawableElem.push(...barPlot.getDrawableElement()); - } - break; + for (const plot of this.chartData.plots) { + switch (plot.type) { + case 'line': + { + const linePlot = new LinePlot( + plot, + this.xAxis, + this.yAxis, + this.chartConfig.chartOrientation + ); + drawableElem.push(...linePlot.getDrawableElement()); + } + break; + case 'bar': + { + const barPlot = new BarPlot( + plot, + this.boundingRect, + this.xAxis, + this.yAxis, + this.chartConfig.chartOrientation + ); + drawableElem.push(...barPlot.getDrawableElement()); + } + break; } } return drawableElem; } } -export function getPlotComponent( - chartConfig: XYChartConfig, - chartData: XYChartData, -): IPlot { +export function getPlotComponent(chartConfig: XYChartConfig, chartData: XYChartData): IPlot { return new Plot(chartConfig, chartData); } diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts index 7d71e78c79..badadf2aa7 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts @@ -1,14 +1,10 @@ // @ts-ignore: TODO Fix ts errors import { XYChartConfig } from '../../../config.type.js'; import { log } from '../../../logger.js'; -import { - DrawableElem, - XYChartData, -} from './Interfaces.js'; +import { DrawableElem, XYChartData } from './Interfaces.js'; import { Orchestrator } from './Orchestrator.js'; export class XYChartBuilder { - static build(config: XYChartConfig, chartData: XYChartData): DrawableElem[] { log.trace(`Build start with Config: ${JSON.stringify(config, null, 2)}`); log.trace(`Build start with ChartData: ${JSON.stringify(chartData, null, 2)}`); diff --git a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts index 2b96a63f78..6057931108 100644 --- a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts +++ b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts @@ -111,20 +111,19 @@ describe('Testing xychart jison file', () => { str = 'xychart-beta \nx-axis xAxisName [ "cat1" , cat2 ] \n '; expect(parserFnConstructor(str)).not.toThrow(); expect(mockDB.setXAxisTitle).toHaveBeenCalledWith('xAxisName'); - expect(mockDB.setXAxisBand).toHaveBeenCalledWith(["cat1", "cat2"]); + expect(mockDB.setXAxisBand).toHaveBeenCalledWith(['cat1', 'cat2']); clearMocks(); - - str = `xychart-beta \n x-axis "this is x axis" [category1, "category 2", category3]\n` + str = `xychart-beta \n x-axis "this is x axis" [category1, "category 2", category3]\n`; expect(parserFnConstructor(str)).not.toThrow(); expect(mockDB.setXAxisTitle).toHaveBeenCalledWith('this is x axis'); - expect(mockDB.setXAxisBand).toHaveBeenCalledWith(["category1", "category 2", "category3"]); + expect(mockDB.setXAxisBand).toHaveBeenCalledWith(['category1', 'category 2', 'category3']); clearMocks(); str = 'xychart-beta \nx-axis xAxisName [ "cat1 with space" , cat2 , cat3] \n '; expect(parserFnConstructor(str)).not.toThrow(); expect(mockDB.setXAxisTitle).toHaveBeenCalledWith('xAxisName'); - expect(mockDB.setXAxisBand).toHaveBeenCalledWith(["cat1 with space", "cat2", "cat3"]); + expect(mockDB.setXAxisBand).toHaveBeenCalledWith(['cat1 with space', 'cat2', 'cat3']); clearMocks(); str = 'xychart-beta \nx-axis xAxisName [ "cat1 with space" , cat2 asdf , cat3] \n '; @@ -176,8 +175,7 @@ describe('Testing xychart jison file', () => { expect(mockDB.setLineData).toHaveBeenCalledWith('lineTitle with space', [23, -45, 56.6]); // set line data without title - str = - 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n line [ +23 , -45 , 56.6 ] '; + str = 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n line [ +23 , -45 , 56.6 ] '; expect(parserFnConstructor(str)).not.toThrow(); expect(mockDB.setYAxisTitle).toHaveBeenCalledWith('yAxisName'); expect(mockDB.setXAxisTitle).toHaveBeenCalledWith('xAxisName'); @@ -206,8 +204,7 @@ describe('Testing xychart jison file', () => { clearMocks(); // set bar data without title - str = - 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n bar [ +23 , -45 , 56.6 ] '; + str = 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n bar [ +23 , -45 , 56.6 ] '; expect(parserFnConstructor(str)).not.toThrow(); expect(mockDB.setYAxisTitle).toHaveBeenCalledWith('yAxisName'); expect(mockDB.setXAxisTitle).toHaveBeenCalledWith('xAxisName'); @@ -243,7 +240,7 @@ describe('Testing xychart jison file', () => { expect(mockDB.setYAxisTitle).toHaveBeenCalledWith('yaxisText'); expect(mockDB.setYAxisRangeData).toHaveBeenCalledWith(10, 150); expect(mockDB.setXAxisTitle).toHaveBeenCalledWith('this is x axis'); - expect(mockDB.setXAxisBand).toHaveBeenCalledWith(["category1", "category 2", "category3"]); + expect(mockDB.setXAxisBand).toHaveBeenCalledWith(['category1', 'category 2', 'category3']); expect(mockDB.setBarData).toHaveBeenCalledWith('barTitle1', [23, 45, 56.6]); expect(mockDB.setBarData).toHaveBeenCalledWith('barTitle2', [13, 42, 56.89]); expect(mockDB.setLineData).toHaveBeenCalledWith('lineTitle1', [11, 45.5, 67, 23]); diff --git a/packages/mermaid/src/diagrams/xychart/xychartDb.ts b/packages/mermaid/src/diagrams/xychart/xychartDb.ts index f4c7044556..eb43d63154 100644 --- a/packages/mermaid/src/diagrams/xychart/xychartDb.ts +++ b/packages/mermaid/src/diagrams/xychart/xychartDb.ts @@ -12,11 +12,7 @@ import { clear as commonClear, } from '../../commonDb.js'; import { XYChartBuilder } from './chartBuilder/index.js'; -import { - DrawableElem, - XYChartData, - isBandAxisData, -} from './chartBuilder/Interfaces.js'; +import { DrawableElem, XYChartData, isBandAxisData } from './chartBuilder/Interfaces.js'; import { XYChartConfig } from '../../config.type.js'; const config = configApi.getConfig(); From 958f63ecd234253b99266cde0d9070aab527de8d Mon Sep 17 00:00:00 2001 From: Subhash Halder <halder.subhash@gmail.com> Date: Wed, 5 Jul 2023 11:35:57 +0530 Subject: [PATCH 019/457] Improved parsing to work for minimal configuration possible. --- demos/xychart.html | 6 +- .../xychart/chartBuilder/Interfaces.ts | 12 +- .../mermaid/src/diagrams/xychart/xychartDb.ts | 105 ++++++++++++++---- 3 files changed, 95 insertions(+), 28 deletions(-) diff --git a/demos/xychart.html b/demos/xychart.html index 5803de4b80..ea24e4872f 100644 --- a/demos/xychart.html +++ b/demos/xychart.html @@ -39,11 +39,9 @@ <h1>XY Charts demos</h1> <hr /> <h1>XY Charts demos</h1> <pre class="mermaid"> - xychart-beta horizontal - title Basic xychart - x-axis "this is x axis" [category1, "category 2", category3, category4] - y-axis yaxisText 10 --> 150 + xychart-beta line [23, 46, 75, 43] + bar "sample bat" [52, 96, 35, 10] </pre> <hr /> diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts index efee023ba1..54b7bc004a 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts @@ -4,7 +4,7 @@ export interface ChartComponent { getDrawableElements(): DrawableElem[]; } -export type SimplePlotDataType = [string | number, number][]; +export type SimplePlotDataType = [string, number][]; export interface LinePlotData { type: 'line'; @@ -26,11 +26,13 @@ export function isBarPlot(data: PlotData): data is BarPlotData { } export interface BandAxisDataType { + type: 'band'; title: string; categories: string[]; } export interface LinearAxisDataType { + type: 'linear'; title: string; min: number; max: number; @@ -38,8 +40,12 @@ export interface LinearAxisDataType { export type AxisDataType = LinearAxisDataType | BandAxisDataType; -export function isBandAxisData(data: any): data is BandAxisDataType { - return data.categories && Array.isArray(data.categories); +export function isBandAxisData(data: AxisDataType): data is BandAxisDataType { + return data.type === 'band'; +} + +export function isLinearAxisData(data: AxisDataType): data is LinearAxisDataType { + return data.type === 'linear'; } export interface XYChartData { diff --git a/packages/mermaid/src/diagrams/xychart/xychartDb.ts b/packages/mermaid/src/diagrams/xychart/xychartDb.ts index eb43d63154..a8d6971c8a 100644 --- a/packages/mermaid/src/diagrams/xychart/xychartDb.ts +++ b/packages/mermaid/src/diagrams/xychart/xychartDb.ts @@ -12,7 +12,13 @@ import { clear as commonClear, } from '../../commonDb.js'; import { XYChartBuilder } from './chartBuilder/index.js'; -import { DrawableElem, XYChartData, isBandAxisData } from './chartBuilder/Interfaces.js'; +import { + DrawableElem, + SimplePlotDataType, + XYChartData, + isBandAxisData, + isLinearAxisData, +} from './chartBuilder/Interfaces.js'; import { XYChartConfig } from '../../config.type.js'; const config = configApi.getConfig(); @@ -64,12 +70,14 @@ function getChartDefaultConfig(): XYChartConfig { function getChartDefalutData(): XYChartData { return { yAxis: { - title: 'yAxis1', - min: 0, - max: 100, + type: 'linear', + title: '', + min: Infinity, + max: -Infinity, }, xAxis: { - title: 'xAxis', + type: 'band', + title: '', categories: [], }, title: '', @@ -79,6 +87,8 @@ function getChartDefalutData(): XYChartData { let xyChartConfig: XYChartConfig = getChartDefaultConfig(); let xyChartData: XYChartData = getChartDefalutData(); +let hasSetXAxis = false; +let hasSetYAxis = false; function textSanitizer(text: string) { return sanitizeText(text.trim(), config); @@ -100,41 +110,92 @@ function setXAxisTitle(title: string) { xyChartData.xAxis.title = textSanitizer(title); } function setXAxisRangeData(min: number, max: number) { - xyChartData.xAxis = { title: xyChartData.xAxis.title, min, max }; + xyChartData.xAxis = { type: 'linear', title: xyChartData.xAxis.title, min, max }; + hasSetXAxis = true; } function setXAxisBand(categories: string[]) { xyChartData.xAxis = { + type: 'band', title: xyChartData.xAxis.title, categories: categories.map((c) => textSanitizer(c)), }; + hasSetXAxis = true; } function setYAxisTitle(title: string) { xyChartData.yAxis.title = textSanitizer(title); } function setYAxisRangeData(min: number, max: number) { - xyChartData.yAxis = { title: xyChartData.yAxis.title, min, max }; + xyChartData.yAxis = { type: 'linear', title: xyChartData.yAxis.title, min, max }; + hasSetYAxis = true; } -function setLineData(title: string, data: number[]) { + +// this function does not set `hasSetYAxis` as there can be multiple data so we should calculate the range accordingly +function setYAxisRangeFromPlotData(data: number[]) { + const minValue = Math.min(...data); + const maxValue = Math.max(...data); + const prevMinValue = isLinearAxisData(xyChartData.yAxis) ? xyChartData.yAxis.min : Infinity; + const prevMaxValue = isLinearAxisData(xyChartData.yAxis) ? xyChartData.yAxis.max : -Infinity; + xyChartData.yAxis = { + type: 'linear', + title: xyChartData.yAxis.title, + min: Math.min(prevMinValue, minValue), + max: Math.max(prevMaxValue, maxValue), + }; +} + +function transformDataWithOutCategory(data: number[]): SimplePlotDataType { + let retData: SimplePlotDataType = []; + if (data.length === 0) { + return retData; + } + if (!hasSetXAxis) { + const prevMinValue = isLinearAxisData(xyChartData.xAxis) ? xyChartData.xAxis.min : Infinity; + const prevMaxValue = isLinearAxisData(xyChartData.xAxis) ? xyChartData.xAxis.max : -Infinity; + setXAxisRangeData(Math.min(prevMinValue, 1), Math.max(prevMaxValue, data.length)); + } + if (!hasSetYAxis) { + setYAxisRangeFromPlotData(data); + } + if (isBandAxisData(xyChartData.xAxis)) { - xyChartData.plots.push({ - type: 'line', - strokeFill: '#00ff00', - strokeWidth: 2, - data: xyChartData.xAxis.categories.map((c, i) => [c, data[i]]), - }); + retData = xyChartData.xAxis.categories.map((c, i) => [c, data[i]]); + } + + if (isLinearAxisData(xyChartData.xAxis)) { + const min = xyChartData.xAxis.min; + const max = xyChartData.xAxis.max; + const step = (max - min + 1) / data.length; + const categories: string[] = []; + for (let i = min; i <= max; i += step) { + categories.push(`${i}`); + } + retData = categories.map((c, i) => [c, data[i]]); } + + return retData; +} +function setLineData(title: string, data: number[]) { + const plotData = transformDataWithOutCategory(data); + xyChartData.plots.push({ + type: 'line', + strokeFill: '#00ff00', + strokeWidth: 2, + data: plotData, + }); } function setBarData(title: string, data: number[]) { - if (isBandAxisData(xyChartData.xAxis)) { - xyChartData.plots.push({ - type: 'bar', - fill: '#0000bb', - data: xyChartData.xAxis.categories.map((c, i) => [c, data[i]]), - }); - } + const plotData = transformDataWithOutCategory(data); + xyChartData.plots.push({ + type: 'bar', + fill: '#0000bb', + data: plotData, + }); } function getDrawableElem(): DrawableElem[] { + if (xyChartData.plots.length === 0) { + throw Error('No Plot to render, please provide a plot with some data'); + } xyChartData.title = getDiagramTitle(); return XYChartBuilder.build(xyChartConfig, xyChartData); } @@ -151,6 +212,8 @@ const clear = function () { commonClear(); xyChartConfig = getChartDefaultConfig(); xyChartData = getChartDefalutData(); + hasSetXAxis = false; + hasSetYAxis = false; }; export default { From da1f46aadaf3a6bd0c074ce913d0cd6afc1eb9e3 Mon Sep 17 00:00:00 2001 From: Subhash Halder <halder.subhash@gmail.com> Date: Wed, 5 Jul 2023 11:50:06 +0530 Subject: [PATCH 020/457] Blank commit as commit is not reflecting in the main repo From 5fd4ca2d41bb7c3a4c6880137255c1234aa5efbc Mon Sep 17 00:00:00 2001 From: Subhash Halder <halder.subhash@gmail.com> Date: Wed, 19 Jul 2023 20:52:34 +0530 Subject: [PATCH 021/457] added updated lock file --- pnpm-lock.yaml | 40 +++++++++++++++------------------------- 1 file changed, 15 insertions(+), 25 deletions(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index bd9cf4f298..53d735b021 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -581,6 +581,12 @@ packages: - supports-color dev: true + /@algolia/autocomplete-core@1.7.4: + resolution: {integrity: sha512-daoLpQ3ps/VTMRZDEBfU8ixXd+amZcNJ4QSP3IERGyzqnL5Ch8uSRFt/4G8pUvW9c3o6GA4vtVv4I4lmnkdXyg==} + dependencies: + '@algolia/autocomplete-shared': 1.7.4 + dev: true + /@algolia/autocomplete-core@1.8.2: resolution: {integrity: sha512-mTeshsyFhAqw/ebqNsQpMtbnjr+qVOSKXArEj4K0d7sqc8It1XD0gkASwecm9mF/jlOQ4Z9RNg1HbdA8JPdRwQ==} dependencies: @@ -3867,7 +3873,7 @@ packages: slash: 3.0.0 string-length: 4.0.2 strip-ansi: 6.0.1 - v8-to-istanbul: 9.0.1 + v8-to-istanbul: 9.1.0 transitivePeerDependencies: - supports-color dev: true @@ -5653,7 +5659,7 @@ packages: '@vue/reactivity-transform': 3.3.4 '@vue/shared': 3.3.4 estree-walker: 2.0.2 - magic-string: 0.30.0 + magic-string: 0.30.1 postcss: 8.4.24 source-map-js: 1.0.2 dev: true @@ -5690,7 +5696,7 @@ packages: '@vue/compiler-core': 3.3.4 '@vue/shared': 3.3.4 estree-walker: 2.0.2 - magic-string: 0.30.0 + magic-string: 0.30.1 dev: true /@vue/reactivity@3.2.47: @@ -6156,12 +6162,6 @@ packages: hasBin: true dev: true - /acorn@8.10.0: - resolution: {integrity: sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==} - engines: {node: '>=0.4.0'} - hasBin: true - dev: true - /acorn@8.8.0: resolution: {integrity: sha512-QOxyigPVrpZ2GXT+PFyZTl6TtOFc5egxHIP9IlQ+RbupQuX4RkT/Bee4/kQuC02Xkzg84JcT7oLYtDIQxp+v7w==} engines: {node: '>=0.4.0'} @@ -12445,7 +12445,6 @@ packages: /mlly@1.4.0: resolution: {integrity: sha512-ua8PAThnTwpprIaU47EPeZ/bPUVp2QYBbWMphUQpVdBI3Lgqzm5KZQ45Agm3YJedHXaIHl6pBGabaLSUPPSptg==} dependencies: - acorn: 8.10.0 acorn: 8.9.0 pathe: 1.1.1 pkg-types: 1.0.3 @@ -13220,7 +13219,7 @@ packages: trouter: 2.0.1 dev: true - /postcss-import@15.1.0(postcss@8.4.24): + /postcss-import@15.1.0(postcss@8.4.23): resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==} engines: {node: '>=14.0.0'} peerDependencies: @@ -14671,7 +14670,7 @@ packages: /strip-literal@1.0.1: resolution: {integrity: sha512-QZTsipNpa2Ppr6v1AmJHESqJ3Uz247MUS0OjrnnZjFAvEoWqxuyFuXn2xLgMtRnijJShAa1HL0gtJyUs7u7n3Q==} dependencies: - acorn: 8.10.0 + acorn: 8.9.0 dev: true /stylis@4.1.3: @@ -15587,7 +15586,7 @@ packages: /uri-js@4.4.1: resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==} dependencies: - punycode: 2.1.1 + punycode: 2.3.0 dev: true /url-parse@1.5.10: @@ -15628,15 +15627,6 @@ packages: /v8-compile-cache-lib@3.0.1: resolution: {integrity: sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==} - /v8-to-istanbul@9.0.1: - resolution: {integrity: sha512-74Y4LqY74kLE6IFyIjPtkSTWzUZmj8tdHT9Ii/26dvQ6K9Dl2NbEfj0XgU2sHCtKgt5VupqhlO/5aWuqS+IY1w==} - engines: {node: '>=10.12.0'} - dependencies: - '@jridgewell/trace-mapping': 0.3.17 - '@types/istanbul-lib-coverage': 2.0.4 - convert-source-map: 1.8.0 - dev: true - /v8-to-istanbul@9.1.0: resolution: {integrity: sha512-6z3GW9x8G1gd+JIIgQQQxXuiJtCXeAjp6RaPEPLv62mH3iPHPxV6W3robxtCzNErRo6ZwTmzWhsbNvjyEBKzKA==} engines: {node: '>=10.12.0'} @@ -16016,7 +16006,7 @@ packages: '@vitest/spy': 0.33.0 '@vitest/ui': 0.33.0(vitest@0.33.0) '@vitest/utils': 0.33.0 - acorn: 8.10.0 + acorn: 8.9.0 acorn-walk: 8.2.0 cac: 6.7.14 chai: 4.3.7 @@ -16557,7 +16547,7 @@ packages: resolution: {integrity: sha512-kgRevLXEYvUW9WS4XoziYqZ8Q9j/2ziJYEtTrjdz5/L/cTUa2XfyMP2i7c3p34lgqJ03+mTiz13SdFef2POwbA==} engines: {node: '>=10.0.0'} dependencies: - '@apideck/better-ajv-errors': 0.3.6(ajv@8.11.0) + '@apideck/better-ajv-errors': 0.3.6(ajv@8.12.0) '@babel/core': 7.12.3 '@babel/preset-env': 7.20.2(@babel/core@7.12.3) '@babel/runtime': 7.21.0 @@ -16565,7 +16555,7 @@ packages: '@rollup/plugin-node-resolve': 11.2.1(rollup@2.79.1) '@rollup/plugin-replace': 2.4.2(rollup@2.79.1) '@surma/rollup-plugin-off-main-thread': 2.2.3 - ajv: 8.11.0 + ajv: 8.12.0 common-tags: 1.8.2 fast-json-stable-stringify: 2.1.0 fs-extra: 9.1.0 From c38cdcf2b2660f9f4559b1ed87d1c0aaaac1a767 Mon Sep 17 00:00:00 2001 From: Subhash Halder <halder.subhash@gmail.com> Date: Wed, 19 Jul 2023 22:41:41 +0530 Subject: [PATCH 022/457] Introduced theme config to configure cosmetics --- packages/mermaid/src/config.type.ts | 54 +++++++++---------- .../xychart/chartBuilder/Interfaces.ts | 19 +++++++ .../xychart/chartBuilder/Orchestrator.ts | 34 +++++++++--- .../chartBuilder/components/ChartTitle.ts | 11 ++-- .../chartBuilder/components/axis/BandAxis.ts | 4 +- .../chartBuilder/components/axis/BaseAxis.ts | 29 ++++++---- .../components/axis/LinearAxis.ts | 4 +- .../chartBuilder/components/axis/index.ts | 24 +++++++-- .../chartBuilder/components/plot/BarPlot.ts | 5 +- .../chartBuilder/components/plot/LinePlot.ts | 5 +- .../components/plot/PlotBorder.ts | 9 ++-- .../chartBuilder/components/plot/index.ts | 35 +++++++++--- .../diagrams/xychart/chartBuilder/index.ts | 11 ++-- .../mermaid/src/diagrams/xychart/xychartDb.ts | 49 +++++++++++++---- packages/mermaid/src/themes/theme-default.js | 15 ++++++ pnpm-lock.yaml | 6 ++- 16 files changed, 230 insertions(+), 84 deletions(-) diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts index aa9f2b81ed..4a392673d9 100644 --- a/packages/mermaid/src/config.type.ts +++ b/packages/mermaid/src/config.type.ts @@ -8,7 +8,7 @@ /** * Configuration options to pass to the `dompurify` library. */ -export type DOMPurifyConfiguration = import("dompurify").Config; +export type DOMPurifyConfiguration = import('dompurify').Config; /** * JavaScript function that returns a `FontConfig`. * @@ -39,7 +39,7 @@ export type FontCalculator = () => Partial<FontConfig>; * This interface was referenced by `MermaidConfig`'s JSON-Schema * via the `definition` "SankeyLinkColor". */ -export type SankeyLinkColor = "source" | "target" | "gradient"; +export type SankeyLinkColor = 'source' | 'target' | 'gradient'; /** * Controls the alignment of the Sankey diagrams. * @@ -49,7 +49,7 @@ export type SankeyLinkColor = "source" | "target" | "gradient"; * This interface was referenced by `MermaidConfig`'s JSON-Schema * via the `definition` "SankeyNodeAlignment". */ -export type SankeyNodeAlignment = "left" | "right" | "center" | "justify"; +export type SankeyNodeAlignment = 'left' | 'right' | 'center' | 'justify'; /** * The font size to use */ @@ -61,7 +61,7 @@ export interface MermaidConfig { * You may also use `themeCSS` to override this value. * */ - theme?: string | "default" | "forest" | "dark" | "neutral" | "null"; + theme?: string | 'default' | 'forest' | 'dark' | 'neutral' | 'null'; themeVariables?: any; themeCSS?: string; /** @@ -88,12 +88,12 @@ export interface MermaidConfig { | 0 | 2 | 1 - | "trace" - | "debug" - | "info" - | "warn" - | "error" - | "fatal" + | 'trace' + | 'debug' + | 'info' + | 'warn' + | 'error' + | 'fatal' | 3 | 4 | 5 @@ -101,7 +101,7 @@ export interface MermaidConfig { /** * Level of trust for parsed diagram */ - securityLevel?: string | "strict" | "loose" | "antiscript" | "sandbox" | undefined; + securityLevel?: string | 'strict' | 'loose' | 'antiscript' | 'sandbox' | undefined; /** * Dictates whether mermaid starts on Page load */ @@ -690,11 +690,11 @@ export interface QuadrantChartConfig extends BaseDiagramConfig { /** * position of x-axis labels */ - xAxisPosition?: "top" | "bottom"; + xAxisPosition?: 'top' | 'bottom'; /** * position of y-axis labels */ - yAxisPosition?: "left" | "right"; + yAxisPosition?: 'left' | 'right'; /** * stroke width of edges of the box that are inside the quadrant */ @@ -709,15 +709,12 @@ export interface XYChartAxisConfig { showLabel: boolean; labelFontSize: number; lablePadding: number; - labelFill: string; showTitle: boolean; titleFontSize: number; titlePadding: number; - titleFill: string; showTick: boolean; tickLength: number; tickWidth: number; - tickFill: string; } export interface XYChartConfig extends BaseDiagramConfig { @@ -725,7 +722,6 @@ export interface XYChartConfig extends BaseDiagramConfig { height: number; fontFamily: string; titleFontSize: number; - titleFill: string; titlePadding: number; showtitle: boolean; xAxis: XYChartAxisConfig; @@ -755,7 +751,7 @@ export interface ErDiagramConfig extends BaseDiagramConfig { /** * Directional bias for layout of entities */ - layoutDirection?: string | "TB" | "BT" | "LR" | "RL"; + layoutDirection?: string | 'TB' | 'BT' | 'LR' | 'RL'; /** * The minimum width of an entity box. Expressed in pixels. */ @@ -820,7 +816,7 @@ export interface StateDiagramConfig extends BaseDiagramConfig { * Decides which rendering engine that is to be used for the rendering. * */ - defaultRenderer?: string | "dagre-d3" | "dagre-wrapper" | "elk"; + defaultRenderer?: string | 'dagre-d3' | 'dagre-wrapper' | 'elk'; } /** * This interface was referenced by `MermaidConfig`'s JSON-Schema @@ -844,7 +840,7 @@ export interface ClassDiagramConfig extends BaseDiagramConfig { * Decides which rendering engine that is to be used for the rendering. * */ - defaultRenderer?: string | "dagre-d3" | "dagre-wrapper" | "elk"; + defaultRenderer?: string | 'dagre-d3' | 'dagre-wrapper' | 'elk'; nodeSpacing?: number; rankSpacing?: number; /** @@ -904,7 +900,7 @@ export interface JourneyDiagramConfig extends BaseDiagramConfig { /** * Multiline message alignment */ - messageAlign?: string | "left" | "center" | "right"; + messageAlign?: string | 'left' | 'center' | 'right'; /** * Prolongs the edge of the diagram downwards. * @@ -983,7 +979,7 @@ export interface TimelineDiagramConfig extends BaseDiagramConfig { /** * Multiline message alignment */ - messageAlign?: string | "left" | "center" | "right"; + messageAlign?: string | 'left' | 'center' | 'right'; /** * Prolongs the edge of the diagram downwards. * @@ -1094,12 +1090,12 @@ export interface GanttDiagramConfig extends BaseDiagramConfig { * Controls the display mode. * */ - displayMode?: string | "compact"; + displayMode?: string | 'compact'; /** * On which day a week-based interval should start * */ - weekday?: "monday" | "tuesday" | "wednesday" | "thursday" | "friday" | "saturday" | "sunday"; + weekday?: 'monday' | 'tuesday' | 'wednesday' | 'thursday' | 'friday' | 'saturday' | 'sunday'; } /** * The object containing configurations specific for sequence diagrams @@ -1153,7 +1149,7 @@ export interface SequenceDiagramConfig extends BaseDiagramConfig { /** * Multiline message alignment */ - messageAlign?: string | "left" | "center" | "right"; + messageAlign?: string | 'left' | 'center' | 'right'; /** * Mirror actors under diagram * @@ -1210,7 +1206,7 @@ export interface SequenceDiagramConfig extends BaseDiagramConfig { /** * This sets the text alignment of actor-attached notes */ - noteAlign?: string | "left" | "center" | "right"; + noteAlign?: string | 'left' | 'center' | 'right'; /** * This sets the font size of actor messages */ @@ -1286,7 +1282,7 @@ export interface FlowchartDiagramConfig extends BaseDiagramConfig { * Defines how mermaid renders curves for flowcharts. * */ - curve?: string | "basis" | "linear" | "cardinal"; + curve?: string | 'basis' | 'linear' | 'cardinal'; /** * Represents the padding between the labels and the shape * @@ -1298,7 +1294,7 @@ export interface FlowchartDiagramConfig extends BaseDiagramConfig { * Decides which rendering engine that is to be used for the rendering. * */ - defaultRenderer?: string | "dagre-d3" | "dagre-wrapper" | "elk"; + defaultRenderer?: string | 'dagre-d3' | 'dagre-wrapper' | 'elk'; /** * Width of nodes where text is wrapped. * @@ -1328,7 +1324,7 @@ export interface SankeyDiagramConfig extends BaseDiagramConfig { * See <https://github.com/d3/d3-sankey#alignments>. * */ - nodeAlignment?: "left" | "right" | "center" | "justify"; + nodeAlignment?: 'left' | 'right' | 'center' | 'justify'; useMaxWidth?: boolean; } /** diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts index 54b7bc004a..6968dee480 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts @@ -1,3 +1,22 @@ +export interface XYChartAxisThemeConfig { + titleColor: string; + labelColor: string; + tickColor: string; +} + +export interface XYChartThemeConfig { + xychartTitleColor: string; + xychartAxisLineColor: string; + xychartXAxisLableColor: string; + xychartXAxisTitleColor: string; + xychartXAxisTickColor: string; + xychartYAxisLableColor: string; + xychartYAxisTitleColor: string; + xychartYAxisTickColor: string; + xychartBarPlotPalette: string[]; + xychartLinePlotPalette: string[]; +} + export interface ChartComponent { calculateSpace(availableSpace: Dimension): Dimension; setBoundingBoxXY(point: Point): void; diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts index 5f187267cb..d4c80b5597 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts @@ -1,5 +1,5 @@ import { log } from '../../../logger.js'; -import { DrawableElem, XYChartData, isBarPlot } from './Interfaces.js'; +import { DrawableElem, XYChartData, XYChartThemeConfig, isBarPlot } from './Interfaces.js'; import { getChartTitleComponent } from './components/ChartTitle.js'; import { ChartComponent } from './Interfaces.js'; import { IAxis, getAxis } from './components/axis/index.js'; @@ -13,12 +13,34 @@ export class Orchestrator { xAxis: IAxis; yAxis: IAxis; }; - constructor(private chartConfig: XYChartConfig, private chartData: XYChartData) { + constructor( + private chartConfig: XYChartConfig, + private chartData: XYChartData, + private chartThemeConfig: XYChartThemeConfig + ) { this.componentStore = { - title: getChartTitleComponent(chartConfig, chartData), - plot: getPlotComponent(chartConfig, chartData), - xAxis: getAxis(chartData.xAxis, chartConfig.xAxis, chartConfig.fontFamily), - yAxis: getAxis(chartData.yAxis, chartConfig.yAxis, chartConfig.fontFamily), + title: getChartTitleComponent(chartConfig, chartData, chartThemeConfig), + plot: getPlotComponent(chartConfig, chartData, chartThemeConfig), + xAxis: getAxis( + chartData.xAxis, + chartConfig.xAxis, + { + titleColor: chartThemeConfig.xychartXAxisTitleColor, + labelColor: chartThemeConfig.xychartXAxisLableColor, + tickColor: chartThemeConfig.xychartXAxisTickColor, + }, + chartConfig.fontFamily + ), + yAxis: getAxis( + chartData.yAxis, + chartConfig.yAxis, + { + titleColor: chartThemeConfig.xychartYAxisTitleColor, + labelColor: chartThemeConfig.xychartYAxisLableColor, + tickColor: chartThemeConfig.xychartYAxisTickColor, + }, + chartConfig.fontFamily + ), }; } diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts index a9225e57d8..0de677f259 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts @@ -6,6 +6,7 @@ import { DrawableElem, Point, XYChartData, + XYChartThemeConfig, } from '../Interfaces.js'; import { ITextDimensionCalculator, @@ -18,7 +19,8 @@ export class ChartTitle implements ChartComponent { constructor( private textDimensionCalculator: ITextDimensionCalculator, private chartConfig: XYChartConfig, - private chartData: XYChartData + private chartData: XYChartData, + private chartThemeConfig: XYChartThemeConfig ) { this.boundingRect = { x: 0, @@ -67,7 +69,7 @@ export class ChartTitle implements ChartComponent { horizontalPos: 'middle', x: this.boundingRect.x + this.boundingRect.width / 2, y: this.boundingRect.y + this.boundingRect.height / 2, - fill: this.chartConfig.titleFill, + fill: this.chartThemeConfig.xychartTitleColor, rotation: 0, }, ], @@ -79,8 +81,9 @@ export class ChartTitle implements ChartComponent { export function getChartTitleComponent( chartConfig: XYChartConfig, - chartData: XYChartData + chartData: XYChartData, + chartThemeConfig: XYChartThemeConfig ): ChartComponent { const textDimensionCalculator = new TextDimensionCalculatorWithFont(chartConfig.fontFamily); - return new ChartTitle(textDimensionCalculator, chartConfig, chartData); + return new ChartTitle(textDimensionCalculator, chartConfig, chartData, chartThemeConfig); } diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BandAxis.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BandAxis.ts index 9a5334097c..6c354cd510 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BandAxis.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BandAxis.ts @@ -3,6 +3,7 @@ import { XYChartAxisConfig } from '../../../../../config.type.js'; import { log } from '../../../../../logger.js'; import { ITextDimensionCalculator } from '../../TextDimensionCalculator.js'; import { BaseAxis } from './BaseAxis.js'; +import { XYChartAxisThemeConfig } from '../../Interfaces.js'; export class BandAxis extends BaseAxis { private scale: ScaleBand<string>; @@ -10,11 +11,12 @@ export class BandAxis extends BaseAxis { constructor( axisConfig: XYChartAxisConfig, + axisThemeConfig: XYChartAxisThemeConfig, categories: string[], title: string, textDimensionCalculator: ITextDimensionCalculator ) { - super(axisConfig, title, textDimensionCalculator); + super(axisConfig, title, textDimensionCalculator, axisThemeConfig); this.categories = categories; this.scale = scaleBand().domain(this.categories).range(this.getRange()); } diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts index f8245270bd..a9e5516268 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts @@ -1,6 +1,12 @@ import { XYChartAxisConfig } from '../../../../../config.type.js'; import { log } from '../../../../../logger.js'; -import { BoundingRect, Dimension, DrawableElem, Point } from '../../Interfaces.js'; +import { + BoundingRect, + Dimension, + DrawableElem, + Point, + XYChartAxisThemeConfig, +} from '../../Interfaces.js'; import { ITextDimensionCalculator } from '../../TextDimensionCalculator.js'; import { AxisPosition, IAxis } from './index.js'; @@ -16,7 +22,8 @@ export abstract class BaseAxis implements IAxis { constructor( protected axisConfig: XYChartAxisConfig, protected title: string, - protected textDimensionCalculator: ITextDimensionCalculator + protected textDimensionCalculator: ITextDimensionCalculator, + protected axisThemeConfig: XYChartAxisThemeConfig ) { this.range = [0, 10]; this.boundingRect = { x: 0, y: 0, width: 0, height: 0 }; @@ -164,7 +171,7 @@ export abstract class BaseAxis implements IAxis { this.axisConfig.lablePadding - this.axisConfig.tickLength, y: this.getScaleValue(tick), - fill: this.axisConfig.labelFill, + fill: this.axisThemeConfig.labelColor, fontSize: this.axisConfig.labelFontSize, rotation: 0, verticalPos: 'right', @@ -181,7 +188,7 @@ export abstract class BaseAxis implements IAxis { path: `M ${x},${this.getScaleValue(tick)} L ${ x - this.axisConfig.tickLength },${this.getScaleValue(tick)}`, - strokeFill: this.axisConfig.tickFill, + strokeFill: this.axisThemeConfig.tickColor, strokeWidth: this.axisConfig.tickWidth, })), }); @@ -195,7 +202,7 @@ export abstract class BaseAxis implements IAxis { text: this.title, x: this.boundingRect.x + this.axisConfig.titlePadding, y: this.range[0] + (this.range[1] - this.range[0]) / 2, - fill: this.axisConfig.titleFill, + fill: this.axisThemeConfig.titleColor, fontSize: this.axisConfig.titleFontSize, rotation: 270, verticalPos: 'center', @@ -216,7 +223,7 @@ export abstract class BaseAxis implements IAxis { text: tick.toString(), x: this.getScaleValue(tick), y: this.boundingRect.y + this.axisConfig.lablePadding + this.axisConfig.tickLength, - fill: this.axisConfig.labelFill, + fill: this.axisThemeConfig.labelColor, fontSize: this.axisConfig.labelFontSize, rotation: 0, verticalPos: 'center', @@ -233,7 +240,7 @@ export abstract class BaseAxis implements IAxis { path: `M ${this.getScaleValue(tick)},${y} L ${this.getScaleValue(tick)},${ y + this.axisConfig.tickLength }`, - strokeFill: this.axisConfig.tickFill, + strokeFill: this.axisThemeConfig.tickColor, strokeWidth: this.axisConfig.tickWidth, })), }); @@ -247,7 +254,7 @@ export abstract class BaseAxis implements IAxis { text: this.title, x: this.range[0] + (this.range[1] - this.range[0]) / 2, y: this.boundingRect.y + this.boundingRect.height - this.axisConfig.titlePadding, - fill: this.axisConfig.titleFill, + fill: this.axisThemeConfig.titleColor, fontSize: this.axisConfig.titleFontSize, rotation: 0, verticalPos: 'center', @@ -272,7 +279,7 @@ export abstract class BaseAxis implements IAxis { this.boundingRect.height - this.axisConfig.lablePadding - this.axisConfig.tickLength, - fill: this.axisConfig.labelFill, + fill: this.axisThemeConfig.labelColor, fontSize: this.axisConfig.labelFontSize, rotation: 0, verticalPos: 'center', @@ -291,7 +298,7 @@ export abstract class BaseAxis implements IAxis { } L ${this.getScaleValue(tick)},${ y + this.boundingRect.height - this.axisConfig.tickLength }`, - strokeFill: this.axisConfig.tickFill, + strokeFill: this.axisThemeConfig.tickColor, strokeWidth: this.axisConfig.tickWidth, })), }); @@ -305,7 +312,7 @@ export abstract class BaseAxis implements IAxis { text: this.title, x: this.range[0] + (this.range[1] - this.range[0]) / 2, y: this.boundingRect.y + this.axisConfig.titlePadding, - fill: this.axisConfig.titleFill, + fill: this.axisThemeConfig.titleColor, fontSize: this.axisConfig.titleFontSize, rotation: 0, verticalPos: 'center', diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/LinearAxis.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/LinearAxis.ts index a9b5d3bcb0..23acf3f2a1 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/LinearAxis.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/LinearAxis.ts @@ -3,6 +3,7 @@ import { XYChartAxisConfig } from '../../../../../config.type.js'; import { log } from '../../../../../logger.js'; import { ITextDimensionCalculator } from '../../TextDimensionCalculator.js'; import { BaseAxis } from './BaseAxis.js'; +import { XYChartAxisThemeConfig } from '../../Interfaces.js'; export class LinearAxis extends BaseAxis { private scale: ScaleLinear<number, number>; @@ -10,11 +11,12 @@ export class LinearAxis extends BaseAxis { constructor( axisConfig: XYChartAxisConfig, + axisThemeConfig: XYChartAxisThemeConfig, domain: [number, number], title: string, textDimensionCalculator: ITextDimensionCalculator ) { - super(axisConfig, title, textDimensionCalculator); + super(axisConfig, title, textDimensionCalculator, axisThemeConfig); this.domain = domain; this.scale = scaleLinear().domain(this.domain).range(this.getRange()); } diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts index 23df3cdba5..f1a3df093e 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts @@ -1,5 +1,10 @@ import { XYChartAxisConfig } from '../../../../../config.type.js'; -import { AxisDataType, ChartComponent, isBandAxisData } from '../../Interfaces.js'; +import { + AxisDataType, + ChartComponent, + XYChartAxisThemeConfig, + isBandAxisData, +} from '../../Interfaces.js'; import { TextDimensionCalculatorWithFont } from '../../TextDimensionCalculator.js'; import { BandAxis } from './BandAxis.js'; import { LinearAxis } from './LinearAxis.js'; @@ -18,11 +23,24 @@ export interface IAxis extends ChartComponent { export function getAxis( data: AxisDataType, axisConfig: XYChartAxisConfig, + axisThemeConfig: XYChartAxisThemeConfig, fontFamily?: string ): IAxis { const textDimansionCalculator = new TextDimensionCalculatorWithFont(fontFamily); if (isBandAxisData(data)) { - return new BandAxis(axisConfig, data.categories, data.title, textDimansionCalculator); + return new BandAxis( + axisConfig, + axisThemeConfig, + data.categories, + data.title, + textDimansionCalculator + ); } - return new LinearAxis(axisConfig, [data.min, data.max], data.title, textDimansionCalculator); + return new LinearAxis( + axisConfig, + axisThemeConfig, + [data.min, data.max], + data.title, + textDimansionCalculator + ); } diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts index dbb333b7b7..b11a6630b1 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts @@ -1,5 +1,5 @@ import { XYChartConfig } from '../../../../../config.type.js'; -import { BarPlotData, BoundingRect, DrawableElem } from '../../Interfaces.js'; +import { BarPlotData, BoundingRect, DrawableElem, XYChartThemeConfig } from '../../Interfaces.js'; import { IAxis } from '../axis/index.js'; export class BarPlot { @@ -8,7 +8,8 @@ export class BarPlot { private boundingRect: BoundingRect, private xAxis: IAxis, private yAxis: IAxis, - private orientation: XYChartConfig['chartOrientation'] + private orientation: XYChartConfig['chartOrientation'], + private chartThemeConfig: XYChartThemeConfig ) {} getDrawableElement(): DrawableElem[] { diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/LinePlot.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/LinePlot.ts index e342352b8e..c10b431a7a 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/LinePlot.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/LinePlot.ts @@ -1,5 +1,5 @@ import { line } from 'd3'; -import { DrawableElem, LinePlotData } from '../../Interfaces.js'; +import { DrawableElem, LinePlotData, XYChartThemeConfig } from '../../Interfaces.js'; import { IAxis } from '../axis/index.js'; import { XYChartConfig } from '../../../../../config.type.js'; @@ -8,7 +8,8 @@ export class LinePlot { private plotData: LinePlotData, private xAxis: IAxis, private yAxis: IAxis, - private orientation: XYChartConfig['chartOrientation'] + private orientation: XYChartConfig['chartOrientation'], + private chartThemeConfig: XYChartThemeConfig ) {} getDrawableElement(): DrawableElem[] { diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/PlotBorder.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/PlotBorder.ts index ab46689991..5796ae8da4 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/PlotBorder.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/PlotBorder.ts @@ -1,9 +1,10 @@ import { XYChartConfig } from '../../../../../config.type.js'; -import { BoundingRect, DrawableElem } from '../../Interfaces.js'; +import { BoundingRect, DrawableElem, XYChartThemeConfig } from '../../Interfaces.js'; export class PlotBorder { constructor( private boundingRect: BoundingRect, - private orientation: XYChartConfig['chartOrientation'] + private orientation: XYChartConfig['chartOrientation'], + private chartThemeConfig: XYChartThemeConfig ) {} getDrawableElement(): DrawableElem[] { @@ -18,7 +19,7 @@ export class PlotBorder { path: `M ${x},${y} L ${x + width},${y} M ${x + width},${y + height} M ${x},${ y + height } L ${x},${y}`, - strokeFill: '#000000', + strokeFill: this.chartThemeConfig.xychartAxisLineColor, strokeWidth: 1, }, ], @@ -34,7 +35,7 @@ export class PlotBorder { path: `M ${x},${y} M ${x + width},${y} M ${x + width},${y + height} L ${x},${ y + height } L ${x},${y}`, - strokeFill: '#000000', + strokeFill: this.chartThemeConfig.xychartAxisLineColor, strokeWidth: 1, }, ], diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts index 61016c0218..9e0f3cbb0d 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts @@ -1,4 +1,11 @@ -import { XYChartData, Dimension, BoundingRect, DrawableElem, Point } from '../../Interfaces.js'; +import { + XYChartData, + Dimension, + BoundingRect, + DrawableElem, + Point, + XYChartThemeConfig, +} from '../../Interfaces.js'; import { IAxis } from '../axis/index.js'; import { ChartComponent } from '../../Interfaces.js'; import { LinePlot } from './LinePlot.js'; @@ -15,7 +22,11 @@ export class Plot implements IPlot { private xAxis?: IAxis; private yAxis?: IAxis; - constructor(private chartConfig: XYChartConfig, private chartData: XYChartData) { + constructor( + private chartConfig: XYChartConfig, + private chartData: XYChartData, + private chartThemeConfig: XYChartThemeConfig + ) { this.boundingRect = { x: 0, y: 0, @@ -45,7 +56,11 @@ export class Plot implements IPlot { throw Error('Axes must be passed to render Plots'); } const drawableElem: DrawableElem[] = [ - ...new PlotBorder(this.boundingRect, this.chartConfig.chartOrientation).getDrawableElement(), + ...new PlotBorder( + this.boundingRect, + this.chartConfig.chartOrientation, + this.chartThemeConfig + ).getDrawableElement(), ]; for (const plot of this.chartData.plots) { switch (plot.type) { @@ -55,7 +70,8 @@ export class Plot implements IPlot { plot, this.xAxis, this.yAxis, - this.chartConfig.chartOrientation + this.chartConfig.chartOrientation, + this.chartThemeConfig ); drawableElem.push(...linePlot.getDrawableElement()); } @@ -67,7 +83,8 @@ export class Plot implements IPlot { this.boundingRect, this.xAxis, this.yAxis, - this.chartConfig.chartOrientation + this.chartConfig.chartOrientation, + this.chartThemeConfig ); drawableElem.push(...barPlot.getDrawableElement()); } @@ -78,6 +95,10 @@ export class Plot implements IPlot { } } -export function getPlotComponent(chartConfig: XYChartConfig, chartData: XYChartData): IPlot { - return new Plot(chartConfig, chartData); +export function getPlotComponent( + chartConfig: XYChartConfig, + chartData: XYChartData, + chartThemeConfig: XYChartThemeConfig +): IPlot { + return new Plot(chartConfig, chartData, chartThemeConfig); } diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts index badadf2aa7..80f3b364e0 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts @@ -1,14 +1,19 @@ // @ts-ignore: TODO Fix ts errors import { XYChartConfig } from '../../../config.type.js'; import { log } from '../../../logger.js'; -import { DrawableElem, XYChartData } from './Interfaces.js'; +import { DrawableElem, XYChartData, XYChartThemeConfig } from './Interfaces.js'; import { Orchestrator } from './Orchestrator.js'; export class XYChartBuilder { - static build(config: XYChartConfig, chartData: XYChartData): DrawableElem[] { + static build( + config: XYChartConfig, + chartData: XYChartData, + chartThemeConfig: XYChartThemeConfig + ): DrawableElem[] { log.trace(`Build start with Config: ${JSON.stringify(config, null, 2)}`); log.trace(`Build start with ChartData: ${JSON.stringify(chartData, null, 2)}`); - const orchestrator = new Orchestrator(config, chartData); + log.trace(`Build start with ChartThemeConfig: ${JSON.stringify(chartThemeConfig, null, 2)}`); + const orchestrator = new Orchestrator(config, chartData, chartThemeConfig); return orchestrator.getDrawableElement(); } } diff --git a/packages/mermaid/src/diagrams/xychart/xychartDb.ts b/packages/mermaid/src/diagrams/xychart/xychartDb.ts index a8d6971c8a..d70039f3a9 100644 --- a/packages/mermaid/src/diagrams/xychart/xychartDb.ts +++ b/packages/mermaid/src/diagrams/xychart/xychartDb.ts @@ -16,12 +16,41 @@ import { DrawableElem, SimplePlotDataType, XYChartData, + XYChartThemeConfig, isBandAxisData, isLinearAxisData, } from './chartBuilder/Interfaces.js'; import { XYChartConfig } from '../../config.type.js'; +import { getThemeVariables } from '../../themes/theme-default.js'; + +const defaultThemeVariables = getThemeVariables(); const config = configApi.getConfig(); + +function getChartDefaultThemeConfig(): XYChartThemeConfig { + return { + xychartTitleColor: + config.themeVariables?.xychartTitleColor || defaultThemeVariables.xychartTitleColor, + xychartAxisLineColor: + config.themeVariables?.xychartAxisLineColor || defaultThemeVariables.xychartAxisLineColor, + xychartXAxisLableColor: + config.themeVariables?.xychartXAxisLableColor || defaultThemeVariables.xychartXAxisLableColor, + xychartXAxisTitleColor: + config.themeVariables?.xychartXAxisTitleColor || defaultThemeVariables.xychartXAxisTitleColor, + xychartXAxisTickColor: + config.themeVariables?.xychartXAxisTickColor || defaultThemeVariables.xychartXAxisTickColor, + xychartYAxisLableColor: + config.themeVariables?.xychartYAxisLableColor || defaultThemeVariables.xychartYAxisLableColor, + xychartYAxisTitleColor: + config.themeVariables?.xychartYAxisTitleColor || defaultThemeVariables.xychartYAxisTitleColor, + xychartYAxisTickColor: + config.themeVariables?.xychartYAxisTickColor || defaultThemeVariables.xychartYAxisTickColor, + xychartBarPlotPalette: + config.themeVariables?.xychartBarPlotPalette || defaultThemeVariables.xychartBarPlotPalette, + xychartLinePlotPalette: + config.themeVariables?.xychartLinePlotPalette || defaultThemeVariables.xychartLinePlotPalette, + }; +} function getChartDefaultConfig(): XYChartConfig { return config.xyChart ? { ...config.xyChart, yAxis: { ...config.xyChart.yAxis }, xAxis: { ...config.xyChart.xAxis } } @@ -30,7 +59,6 @@ function getChartDefaultConfig(): XYChartConfig { height: 500, fontFamily: config.fontFamily || 'Sans', titleFontSize: 16, - titleFill: '#000000', titlePadding: 5, showtitle: true, plotBorderWidth: 2, @@ -38,29 +66,23 @@ function getChartDefaultConfig(): XYChartConfig { showLabel: true, labelFontSize: 14, lablePadding: 5, - labelFill: '#000000', showTitle: true, titleFontSize: 16, titlePadding: 5, - titleFill: '#000000', showTick: true, tickLength: 5, tickWidth: 2, - tickFill: '#000000', }, xAxis: { showLabel: true, labelFontSize: 14, lablePadding: 5, - labelFill: '#000000', showTitle: true, titleFontSize: 16, titlePadding: 5, - titleFill: '#000000', showTick: true, tickLength: 5, tickWidth: 2, - tickFill: '#000000', }, chartOrientation: 'vertical', plotReservedSpacePercent: 50, @@ -86,6 +108,7 @@ function getChartDefalutData(): XYChartData { } let xyChartConfig: XYChartConfig = getChartDefaultConfig(); +let xyChartThemeConfig: XYChartThemeConfig = getChartDefaultThemeConfig(); let xyChartData: XYChartData = getChartDefalutData(); let hasSetXAxis = false; let hasSetYAxis = false; @@ -178,7 +201,10 @@ function setLineData(title: string, data: number[]) { const plotData = transformDataWithOutCategory(data); xyChartData.plots.push({ type: 'line', - strokeFill: '#00ff00', + strokeFill: + xyChartThemeConfig.xychartLinePlotPalette[ + Math.floor(Math.random() * (xyChartThemeConfig.xychartLinePlotPalette.length - 1)) + ], strokeWidth: 2, data: plotData, }); @@ -187,7 +213,9 @@ function setBarData(title: string, data: number[]) { const plotData = transformDataWithOutCategory(data); xyChartData.plots.push({ type: 'bar', - fill: '#0000bb', + fill: xyChartThemeConfig.xychartBarPlotPalette[ + Math.floor(Math.random() * (xyChartThemeConfig.xychartBarPlotPalette.length - 1)) + ], data: plotData, }); } @@ -197,7 +225,7 @@ function getDrawableElem(): DrawableElem[] { throw Error('No Plot to render, please provide a plot with some data'); } xyChartData.title = getDiagramTitle(); - return XYChartBuilder.build(xyChartConfig, xyChartData); + return XYChartBuilder.build(xyChartConfig, xyChartData, xyChartThemeConfig); } function setHeight(height: number) { @@ -212,6 +240,7 @@ const clear = function () { commonClear(); xyChartConfig = getChartDefaultConfig(); xyChartData = getChartDefalutData(); + xyChartThemeConfig = getChartDefaultThemeConfig(); hasSetXAxis = false; hasSetYAxis = false; }; diff --git a/packages/mermaid/src/themes/theme-default.js b/packages/mermaid/src/themes/theme-default.js index 3cd6bca4f7..59362a54e5 100644 --- a/packages/mermaid/src/themes/theme-default.js +++ b/packages/mermaid/src/themes/theme-default.js @@ -272,6 +272,21 @@ class Theme { this.quadrantExternalBorderStrokeFill || this.primaryBorderColor; this.quadrantTitleFill = this.quadrantTitleFill || this.primaryTextColor; + /* xychart */ + this.xychartBackgroundColor = this.xychartBackgroundColor || this.background; + this.xychartTitleColor = this.xychartTitleColor || this.primaryTextColor; + this.xychartAxisLineColor = this.xychartAxisLineColor || this.primaryTextColor; + this.xychartXAxisTitleColor = this.xychartXAxisTitleColor || this.primaryTextColor; + this.xychartXAxisLableColor = this.xychartXAxisLableColor || this.primaryTextColor; + this.xychartXAxisTickColor = this.xychartXAxisTickColor || this.primaryTextColor; + this.xychartYAxisTitleColor = this.xychartYAxisTitleColor || this.primaryTextColor; + this.xychartYAxisLableColor = this.xychartYAxisLableColor || this.primaryTextColor; + this.xychartYAxisTickColor = this.xychartYAxisTickColor || this.primaryTextColor; + this.xychartBarPlotPalette = this.xychartBarPlotPalette || [this.primaryColor]; + this.xychartLinePlotPalette = this.xychartLinePlotPalette || [ + adjust(this.primaryColor, { r: -100, g: -100, b: -100 }), + ]; + /* requirement-diagram */ this.requirementBackground = this.requirementBackground || this.primaryColor; this.requirementBorderColor = this.requirementBorderColor || this.primaryBorderColor; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 53d735b021..2ab5d09a7d 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1,4 +1,8 @@ -lockfileVersion: '6.0' +lockfileVersion: '6.1' + +settings: + autoInstallPeers: true + excludeLinksFromLockfile: false importers: From 6e98759ee77a63c34324a547858465304b672fa1 Mon Sep 17 00:00:00 2001 From: Subhash Halder <halder.subhash@gmail.com> Date: Fri, 21 Jul 2023 22:42:46 +0530 Subject: [PATCH 023/457] Improve plot color selection --- demos/xychart.html | 6 ++- .../xychart/chartBuilder/Interfaces.ts | 3 +- .../chartBuilder/components/plot/BarPlot.ts | 8 +-- .../chartBuilder/components/plot/LinePlot.ts | 8 +-- .../chartBuilder/components/plot/index.ts | 6 +-- .../mermaid/src/diagrams/xychart/xychartDb.ts | 53 ++++++++++++++----- packages/mermaid/src/themes/theme-default.js | 5 +- 7 files changed, 59 insertions(+), 30 deletions(-) diff --git a/demos/xychart.html b/demos/xychart.html index ea24e4872f..3d0da3fb3d 100644 --- a/demos/xychart.html +++ b/demos/xychart.html @@ -40,7 +40,11 @@ <h1>XY Charts demos</h1> <h1>XY Charts demos</h1> <pre class="mermaid"> xychart-beta - line [23, 46, 75, 43] + line [23, 46, 77, 34] + line [45, 32, 33, 12] + line [87, 54, 99, 85] + line [78, 88, 22, 4] + line [22, 29, 75, 33] bar "sample bat" [52, 96, 35, 10] </pre> diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts index 6968dee480..ce7e33e8bf 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts @@ -13,8 +13,7 @@ export interface XYChartThemeConfig { xychartYAxisLableColor: string; xychartYAxisTitleColor: string; xychartYAxisTickColor: string; - xychartBarPlotPalette: string[]; - xychartLinePlotPalette: string[]; + xychartPlotBaseColor: string; } export interface ChartComponent { diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts index b11a6630b1..7308adde11 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts @@ -1,5 +1,5 @@ import { XYChartConfig } from '../../../../../config.type.js'; -import { BarPlotData, BoundingRect, DrawableElem, XYChartThemeConfig } from '../../Interfaces.js'; +import { BarPlotData, BoundingRect, DrawableElem } from '../../Interfaces.js'; import { IAxis } from '../axis/index.js'; export class BarPlot { @@ -9,7 +9,7 @@ export class BarPlot { private xAxis: IAxis, private yAxis: IAxis, private orientation: XYChartConfig['chartOrientation'], - private chartThemeConfig: XYChartThemeConfig + private plotIndex: number ) {} getDrawableElement(): DrawableElem[] { @@ -28,7 +28,7 @@ export class BarPlot { if (this.orientation === 'horizontal') { return [ { - groupTexts: ['plot', 'bar-plot'], + groupTexts: ['plot', `bar-plot-${this.plotIndex}`], type: 'rect', data: finalData.map((data) => ({ x: this.boundingRect.x, @@ -44,7 +44,7 @@ export class BarPlot { } else { return [ { - groupTexts: ['plot', 'bar-plot'], + groupTexts: ['plot', `bar-plot-${this.plotIndex}`], type: 'rect', data: finalData.map((data) => ({ x: data[0] - barWidthHalf, diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/LinePlot.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/LinePlot.ts index c10b431a7a..cd1533b1e6 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/LinePlot.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/LinePlot.ts @@ -1,7 +1,7 @@ import { line } from 'd3'; -import { DrawableElem, LinePlotData, XYChartThemeConfig } from '../../Interfaces.js'; -import { IAxis } from '../axis/index.js'; import { XYChartConfig } from '../../../../../config.type.js'; +import { DrawableElem, LinePlotData } from '../../Interfaces.js'; +import { IAxis } from '../axis/index.js'; export class LinePlot { constructor( @@ -9,7 +9,7 @@ export class LinePlot { private xAxis: IAxis, private yAxis: IAxis, private orientation: XYChartConfig['chartOrientation'], - private chartThemeConfig: XYChartThemeConfig + private plotIndex: number ) {} getDrawableElement(): DrawableElem[] { @@ -33,7 +33,7 @@ export class LinePlot { } return [ { - groupTexts: ['plot', 'line-plot'], + groupTexts: ['plot', `line-plot-${this.plotIndex}`], type: 'path', data: [ { diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts index 9e0f3cbb0d..bb3b90bc7c 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts @@ -62,7 +62,7 @@ export class Plot implements IPlot { this.chartThemeConfig ).getDrawableElement(), ]; - for (const plot of this.chartData.plots) { + for (const [i, plot] of this.chartData.plots.entries()) { switch (plot.type) { case 'line': { @@ -71,7 +71,7 @@ export class Plot implements IPlot { this.xAxis, this.yAxis, this.chartConfig.chartOrientation, - this.chartThemeConfig + i ); drawableElem.push(...linePlot.getDrawableElement()); } @@ -84,7 +84,7 @@ export class Plot implements IPlot { this.xAxis, this.yAxis, this.chartConfig.chartOrientation, - this.chartThemeConfig + i ); drawableElem.push(...barPlot.getDrawableElement()); } diff --git a/packages/mermaid/src/diagrams/xychart/xychartDb.ts b/packages/mermaid/src/diagrams/xychart/xychartDb.ts index d70039f3a9..a818037f32 100644 --- a/packages/mermaid/src/diagrams/xychart/xychartDb.ts +++ b/packages/mermaid/src/diagrams/xychart/xychartDb.ts @@ -1,4 +1,5 @@ -import { log } from '../../logger.js'; +// @ts-ignore: TODO Fix ts errors +import { adjust, channel, toHsla, isDark, lighten, darken } from 'khroma'; import mermaidAPI from '../../mermaidAPI.js'; import * as configApi from '../../config.js'; import { sanitizeText } from '../common/common.js'; @@ -27,6 +28,24 @@ const defaultThemeVariables = getThemeVariables(); const config = configApi.getConfig(); +function plotColorPaletteGenerator(baseColor: string, noOfColorNeeded = 15): string[] { + const colors = []; + const MAX_HUE_VALUE = 360; + const baseHue = channel(baseColor, 'h'); + if (baseHue > MAX_HUE_VALUE / 2) { + const decr = Math.floor(baseHue / noOfColorNeeded); + for (let i = 0; i <= baseHue; i += decr) { + colors.push(adjust(baseColor, { h: -i })); + } + } else { + const incr = Math.floor((MAX_HUE_VALUE - baseHue) / noOfColorNeeded); + for (let i = 0; i <= baseHue; i += incr) { + colors.push(adjust(baseColor, { h: i })); + } + } + return colors; +} + function getChartDefaultThemeConfig(): XYChartThemeConfig { return { xychartTitleColor: @@ -45,10 +64,8 @@ function getChartDefaultThemeConfig(): XYChartThemeConfig { config.themeVariables?.xychartYAxisTitleColor || defaultThemeVariables.xychartYAxisTitleColor, xychartYAxisTickColor: config.themeVariables?.xychartYAxisTickColor || defaultThemeVariables.xychartYAxisTickColor, - xychartBarPlotPalette: - config.themeVariables?.xychartBarPlotPalette || defaultThemeVariables.xychartBarPlotPalette, - xychartLinePlotPalette: - config.themeVariables?.xychartLinePlotPalette || defaultThemeVariables.xychartLinePlotPalette, + xychartPlotBaseColor: + config.themeVariables?.xychartPlotBaseColor || defaultThemeVariables.xychartPlotBaseColor, }; } function getChartDefaultConfig(): XYChartConfig { @@ -110,6 +127,9 @@ function getChartDefalutData(): XYChartData { let xyChartConfig: XYChartConfig = getChartDefaultConfig(); let xyChartThemeConfig: XYChartThemeConfig = getChartDefaultThemeConfig(); let xyChartData: XYChartData = getChartDefalutData(); +let plotColorPalette = Array.isArray(xyChartThemeConfig.xychartPlotBaseColor) + ? xyChartThemeConfig.xychartPlotBaseColor + : plotColorPaletteGenerator(xyChartThemeConfig.xychartPlotBaseColor); let hasSetXAxis = false; let hasSetYAxis = false; @@ -197,27 +217,32 @@ function transformDataWithOutCategory(data: number[]): SimplePlotDataType { return retData; } + +let plotIndex = 0; + +function getPlotColorFromPalette(plotIndex: number): string { + return plotColorPalette[plotIndex === 0 ? 0 : plotIndex % (plotColorPalette.length - 1)]; +} + function setLineData(title: string, data: number[]) { const plotData = transformDataWithOutCategory(data); xyChartData.plots.push({ type: 'line', - strokeFill: - xyChartThemeConfig.xychartLinePlotPalette[ - Math.floor(Math.random() * (xyChartThemeConfig.xychartLinePlotPalette.length - 1)) - ], + strokeFill: getPlotColorFromPalette(plotIndex), strokeWidth: 2, data: plotData, }); + plotIndex++; } + function setBarData(title: string, data: number[]) { const plotData = transformDataWithOutCategory(data); xyChartData.plots.push({ type: 'bar', - fill: xyChartThemeConfig.xychartBarPlotPalette[ - Math.floor(Math.random() * (xyChartThemeConfig.xychartBarPlotPalette.length - 1)) - ], + fill: getPlotColorFromPalette(plotIndex), data: plotData, }); + plotIndex++; } function getDrawableElem(): DrawableElem[] { @@ -238,9 +263,13 @@ function setWidth(width: number) { const clear = function () { commonClear(); + plotIndex = 0; xyChartConfig = getChartDefaultConfig(); xyChartData = getChartDefalutData(); xyChartThemeConfig = getChartDefaultThemeConfig(); + plotColorPalette = Array.isArray(xyChartThemeConfig.xychartPlotBaseColor) + ? xyChartThemeConfig.xychartPlotBaseColor + : plotColorPaletteGenerator(xyChartThemeConfig.xychartPlotBaseColor); hasSetXAxis = false; hasSetYAxis = false; }; diff --git a/packages/mermaid/src/themes/theme-default.js b/packages/mermaid/src/themes/theme-default.js index 59362a54e5..b274a4562e 100644 --- a/packages/mermaid/src/themes/theme-default.js +++ b/packages/mermaid/src/themes/theme-default.js @@ -282,10 +282,7 @@ class Theme { this.xychartYAxisTitleColor = this.xychartYAxisTitleColor || this.primaryTextColor; this.xychartYAxisLableColor = this.xychartYAxisLableColor || this.primaryTextColor; this.xychartYAxisTickColor = this.xychartYAxisTickColor || this.primaryTextColor; - this.xychartBarPlotPalette = this.xychartBarPlotPalette || [this.primaryColor]; - this.xychartLinePlotPalette = this.xychartLinePlotPalette || [ - adjust(this.primaryColor, { r: -100, g: -100, b: -100 }), - ]; + this.xychartPlotBaseColor = this.xychartPlotBaseColor || darken(this.primaryColor, 25); /* requirement-diagram */ this.requirementBackground = this.requirementBackground || this.primaryColor; From 6c2faf0bda7a3eaeb8f823a83e5a16588ea2bb1c Mon Sep 17 00:00:00 2001 From: Subhash Halder <halder.subhash@gmail.com> Date: Sun, 6 Aug 2023 15:45:01 +0530 Subject: [PATCH 024/457] Simplified the jison file --- .../src/diagrams/xychart/parser/xychart.jison | 165 +++++-------- .../xychart/parser/xychart.jison.spec.ts | 216 ++++++++++++++---- .../mermaid/src/diagrams/xychart/xychartDb.ts | 23 +- 3 files changed, 244 insertions(+), 160 deletions(-) diff --git a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison index 1ecd6edf4f..743647df7d 100644 --- a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison +++ b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison @@ -1,7 +1,6 @@ %lex %options case-insensitive -%x string %x string %x md_string %x title @@ -12,24 +11,9 @@ %x acc_title %x acc_descr %x acc_descr_multiline -%x chart_config -%x chart_orientation -%x x_axis -%x y_axis -%x axis_title -%x axis_data -%x axis_data_band -%x axis_data_band_capture -%x line -%x line_title -%x line_data -%x line_data_entries -%x line_data_without_label -%x bar_data_without_label -%x bar -%x bar_title -%x bar_data -%x bar_data_entries +%s axis_data +%s data +%s data_inner %% \%\%\{ { this.begin('open_directive'); return 'open_directive'; } <open_directive>((?:(?!\}\%\%)[^:.])*) { this.begin('type_directive'); return 'type_directive'; } @@ -38,63 +22,38 @@ <arg_directive>((?:(?!\}\%\%).|\n)*) return 'arg_directive'; \%\%(?!\{)[^\n]* /* skip comments */ [^\}]\%\%[^\n]* /* skip comments */ +<axis_data>(\r?\n) { this.popState(); return 'NEWLINE'; } +<data>(\r?\n) { this.popState(); return 'NEWLINE'; } [\n\r]+ return 'NEWLINE'; \%\%[^\n]* /* do nothing */ -title { this.begin("title");return 'title'; } +title { this.begin("title"); return 'title'; } <title>(?!\n|;|#)*[^\n]* { this.popState(); return "title_value"; } + accTitle\s*":"\s* { this.begin("acc_title");return 'acc_title'; } <acc_title>(?!\n|;|#)*[^\n]* { this.popState(); return "acc_title_value"; } accDescr\s*":"\s* { this.begin("acc_descr");return 'acc_descr'; } <acc_descr>(?!\n|;|#)*[^\n]* { this.popState(); return "acc_descr_value"; } accDescr\s*"{"\s* { this.begin("acc_descr_multiline");} <acc_descr_multiline>[\}] { this.popState(); } -<acc_descr_multiline>[^\}]* return "acc_descr_multiline_value"; - -" "*"xychart-beta" {this.begin("chart_config"); return 'XYCHART';} -<chart_config>" "+("vertical"|"horizontal") {this.begin("chart_orientation"); return 'chart_orientation';} -<chart_orientation>[\s]* {this.popState(); this.popState(); return 'CHART_CONFIG_END';} -<chart_config>[\s]* {this.popState(); return 'CHART_CONFIG_END';} - -"x-axis"" "* { this.begin("x_axis"); return "X_AXIS";} -"y-axis"" "* { this.begin("y_axis"); return "Y_AXIS";} -<x_axis,y_axis>["] {this.begin("axis_title");} -<axis_title>[^"]+ {return 'AXIS_TITLE';} -<axis_title>["]" "*(\r?\n) {this.popState(); this.popState();} -<axis_title>["]" "* {this.popState(); this.begin("axis_data");} -<x_axis,y_axis>[^\s]+" "*(\r?\n) {this.popState(); return 'AXIS_TITLE';} -<x_axis,y_axis>[^\s]+" "* {this.begin("axis_data"); return 'AXIS_TITLE'; } - -<axis_data>[+-]?\d+(?:\.\d+)?" "*"-->"" "*[+-]?\d+(?:\.\d+)?" "* { return 'AXIS_RANGE_DATA';} - -<axis_data>[\[]" "* {this.begin("axis_data_band"), this.begin("axis_data_band_capture")} -<axis_data_band_capture>(["][^",]+["]|[^\s\"\,]]+)" "*([,]" "*(["][^",]+["]|[^\s\]",]+)" "*)* { this.popState(); return "AXIS_BAND_DATA"; } -<axis_data_band>[\]]" "* {this.popState(); return "AXIS_BAND_DATA_END"} -<axis_data>[\s]+ {this.popState(); this.popState();} - - -"line"" "* {this.begin("line"); return 'LINE';} -<line>["] {this.begin("line_title");} -<line_title>[^"]+ {return 'LINE_TITLE';} -<line_title>["]" "* {this.popState(); this.begin("line_data");} -<line_data>"["" "* {this.begin('line_data_entries');} -<line_data_without_label,line_data_entries>(?:[+-]?\d+(?:\.\d+)?)+(?:" "*[,]" "*(?:[+-]?\d+(?:\.\d+)?)+)*" "* {return 'LINE_DATA'} -<line_data_entries>"]"" "* {this.popState(); this.popState(); this.popState()} -<line_data_without_label>"]"" "* {this.popState(); this.popState()} -<line>[^\s\[]+" "* {this.begin("line_data"); return 'LINE_TITLE';} -<line>"["" "* {this.begin('line_data_without_label');} - -"bar"" "* {this.begin("bar"); return 'BAR';} -<bar>["] {this.begin("bar_title");} -<bar_title>[^"]+ {return 'BAR_TITLE';} -<bar_title>["]" "* {this.popState(); this.begin("bar_data");} -<bar_data>"["" "* {this.begin('bar_data_entries');} -<bar_data_without_label,bar_data_entries>(?:[+-]?\d+(?:\.\d+)?)+(?:" "*[,]" "*(?:[+-]?\d+(?:\.\d+)?)+)*" "* {return 'BAR_DATA'} -<bar_data_entries>"]"" "* {this.popState(); this.popState(); this.popState()} -<bar_data_without_label>"]"" "* {this.popState(); this.popState()} -<bar>[^\s\[]+" "* {this.begin("bar_data"); return 'BAR_TITLE';} -<bar>"["" "* {this.begin('bar_data_without_label');} +<acc_descr_multiline>[^\}]* { return "acc_descr_multiline_value"; } + +"xychart-beta" {return 'XYCHART';} +("vertical"|"horizontal") {return 'CHART_ORIENTATION'} + +"x-axis" { this.begin("axis_data"); return "X_AXIS"; } +"y-axis" { this.begin("axis_data"); return "Y_AXIS"; } +<axis_data>[\[] { this.popState(); return 'SQUARE_BRACES_START'; } +<axis_data>[+-]?\d+(?:\.\d+)? { return 'NUMBER_WITH_DECIMAL'; } +<axis_data>"-->" { return 'ARROW_DELIMITER'; } + + +"line" { this.begin("data"); return 'LINE'; } +"bar" { this.begin("data"); return 'BAR'; } +<data>[\[] { this.popState(); this.begin("data_inner"); return 'SQUARE_BRACES_START'; } +<data_inner>[+-]?\d+(?:\.\d+)? { return 'NUMBER_WITH_DECIMAL';} +<data_inner>[\]] { this.popState(); return 'SQUARE_BRACES_END'; } @@ -106,6 +65,9 @@ accDescr\s*"{"\s* { this.begin("acc_descr_multiline");} <string>["] this.popState(); <string>[^"]* return "STR"; + +[\[] return 'SQUARE_BRACES_START' +[\]] return 'SQUARE_BRACES_END' [A-Za-z]+ return 'ALPHA'; ":" return 'COLON'; \+ return 'PLUS'; @@ -119,7 +81,7 @@ accDescr\s*"{"\s* { this.begin("acc_descr_multiline");} "&" return 'AMP'; \- return 'MINUS'; [0-9]+ return 'NUM'; -\s return 'SPACE'; +\s /* skip */ ";" return 'SEMI'; [!"#$%&'*+,-.`?\\_/] return 'PUNCTUATION'; <<EOF>> return 'EOF'; @@ -132,60 +94,63 @@ accDescr\s*"{"\s* { this.begin("acc_descr_multiline");} start : eol start - | SPACE start | directive start - | XYCHART chartConfig CHART_CONFIG_END document - | XYCHART CHART_CONFIG_END document + | XYCHART chartConfig start + | XYCHART start + | document ; chartConfig - : chart_orientation {yy.setOrientation($1.trim());} + : CHART_ORIENTATION { yy.setOrientation($1); } ; document : /* empty */ - | document line + | document statement ; line - : statement eol + : statement ; statement - : - | SPACE statement - | directive - | title title_value { $$=$2.trim();yy.setDiagramTitle($$); } + : statement eol + | title title_value { yy.setDiagramTitle($title_value.trim()); } | X_AXIS parseXAxis | Y_AXIS parseYAxis - | parseLine - | parseBar + | LINE parseLineData { yy.setLineData({text: '', type: 'text'}, $parseLineData); } + | LINE text parseLineData { yy.setLineData($text, $parseLineData); } + | BAR parseBarData { yy.setBarData({text: '', type: 'text'}, $parseBarData); } + | BAR text parseBarData { yy.setBarData($text, $parseBarData); } ; -parseLine - : LINE LINE_DATA {yy.setLineData('', $2.split(',').map(d => Number(d.trim())));} - | LINE LINE_TITLE LINE_DATA {yy.setLineData($2.trim(), $3.split(',').map(d => Number(d.trim())));} +parseLineData + : SQUARE_BRACES_START NUMBER_WITH_DECIMAL parseLineData {$parseLineData.unshift(Number($NUMBER_WITH_DECIMAL)); $$ = $parseLineData} + | COMMA NUMBER_WITH_DECIMAL parseLineData {$parseLineData.unshift(Number($NUMBER_WITH_DECIMAL)); $$ = $parseLineData;} + | SQUARE_BRACES_END {$$ = []} ; -parseBar - : BAR BAR_DATA {yy.setBarData('', $2.split(',').map(d => Number(d.trim())));} - | BAR BAR_TITLE BAR_DATA {yy.setBarData($2.trim(), $3.split(',').map(d => Number(d.trim())));} +parseBarData + : SQUARE_BRACES_START NUMBER_WITH_DECIMAL parseBarData {$parseBarData.unshift(Number($NUMBER_WITH_DECIMAL)); $$ = $parseBarData} + | COMMA NUMBER_WITH_DECIMAL parseBarData {$parseBarData.unshift(Number($NUMBER_WITH_DECIMAL)); $$ = $parseBarData;} + | SQUARE_BRACES_END {$$ = []} ; parseXAxis - : AXIS_TITLE statement {yy.setXAxisTitle($1.trim());} - | AXIS_TITLE xAxisBandData statement {yy.setXAxisTitle($1.trim());} - | AXIS_TITLE AXIS_RANGE_DATA statement {yy.setXAxisTitle($1.trim()); $$ = $2.split("-->"); yy.setXAxisRangeData(Number($$[0]), Number($$[1]));} + : text {yy.setXAxisTitle($text);} + | text xAxisBandData {yy.setXAxisTitle($text); yy.setXAxisBand($xAxisBandData);} + | text NUMBER_WITH_DECIMAL ARROW_DELIMITER NUMBER_WITH_DECIMAL {yy.setXAxisTitle($text); yy.setXAxisRangeData(Number($2), Number($4));} ; xAxisBandData - : AXIS_BAND_DATA xAxisBandData {yy.setXAxisBand($1.split(',').map(d => { let m = d.trim().match(/^(?:["]([^"]+)["]|([^\s"]+))$/); return m ? m[1] || m[2] : "";}));} - | AXIS_BAND_DATA_END + : SQUARE_BRACES_START text xAxisBandData {$xAxisBandData.unshift($text); $$ = $xAxisBandData} + | COMMA text xAxisBandData {$xAxisBandData.unshift($text); $$ = $xAxisBandData;} + | SQUARE_BRACES_END {$$ = []} ; parseYAxis - : AXIS_TITLE statement {yy.setYAxisTitle($1.trim());} - | AXIS_TITLE AXIS_RANGE_DATA statement {yy.setYAxisTitle($1.trim()); $$ = $2.split("-->"); yy.setYAxisRangeData(Number($$[0]), Number($$[1]));} + : text {yy.setYAxisTitle($text);} + | text NUMBER_WITH_DECIMAL ARROW_DELIMITER NUMBER_WITH_DECIMAL {yy.setYAxisTitle($text); yy.setYAxisRangeData(Number($2), Number($4));} ; directive @@ -215,26 +180,22 @@ closeDirective : close_directive { yy.parseDirective('}%%', 'close_directive', 'xychart'); } ; -text: alphaNumToken - { $$={text:$1, type: 'text'};} - | text textNoTagsToken - { $$={text:$1.text+''+$2, type: $1.type};} +text: alphaNum + { $$={text:$alphaNum, type: 'text'};} | STR - { $$={text: $1, type: 'text'};} + { $$={text: $STR, type: 'text'};} | MD_STR - { $$={text: $1, type: 'markdown'};} + { $$={text: $MD_STR, type: 'markdown'};} ; alphaNum : alphaNumToken - {$$=$1;} + {$$=$alphaNumToken;} | alphaNum alphaNumToken - {$$=$1+''+$2;} + {$$=$alphaNum+''+$alphaNumToken;} ; -alphaNumToken : PUNCTUATION | AMP | NUM| ALPHA | COMMA | PLUS | EQUALS | MULT | DOT | BRKT| UNDERSCORE ; - -textNoTagsToken: alphaNumToken | SPACE | MINUS; +alphaNumToken : PUNCTUATION | AMP | NUM | ALPHA | PLUS | EQUALS | MULT | DOT | BRKT| UNDERSCORE ; %% diff --git a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts index 6057931108..24c6f2891a 100644 --- a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts +++ b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts @@ -80,106 +80,190 @@ describe('Testing xychart jison file', () => { it('parse x-axis', () => { let str = 'xychart-beta \nx-axis xAxisName\n'; expect(parserFnConstructor(str)).not.toThrow(); - expect(mockDB.setXAxisTitle).toHaveBeenCalledWith('xAxisName'); + expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ + text: 'xAxisName', + type: 'text', + }); clearMocks(); str = 'xychart-beta \nx-axis xAxisName \n'; expect(parserFnConstructor(str)).not.toThrow(); - expect(mockDB.setXAxisTitle).toHaveBeenCalledWith('xAxisName'); + expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ + text: 'xAxisName', + type: 'text', + }); clearMocks(); str = 'xychart-beta \n x-axis "xAxisName has space"\n'; expect(parserFnConstructor(str)).not.toThrow(); - expect(mockDB.setXAxisTitle).toHaveBeenCalledWith('xAxisName has space'); + expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ + text: 'xAxisName has space', + type: 'text', + }); clearMocks(); str = 'xychart-beta \n x-axis " xAxisName has space " \n'; expect(parserFnConstructor(str)).not.toThrow(); - expect(mockDB.setXAxisTitle).toHaveBeenCalledWith('xAxisName has space'); + expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ + text: ' xAxisName has space ', + type: 'text', + }); clearMocks(); str = 'xychart-beta \nx-axis xAxisName 45.5 --> 33 \n'; expect(parserFnConstructor(str)).not.toThrow(); - expect(mockDB.setXAxisTitle).toHaveBeenCalledWith('xAxisName'); + expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ + text: 'xAxisName', + type: 'text', + }); expect(mockDB.setXAxisRangeData).toHaveBeenCalledWith(45.5, 33); clearMocks(); - str = 'xychart-beta \nx-axis xAxisName [ "cat1" , cat2 ] \n '; + str = 'xychart-beta \nx-axis xAxisName [ "cat1" , cat2a ] \n '; expect(parserFnConstructor(str)).not.toThrow(); - expect(mockDB.setXAxisTitle).toHaveBeenCalledWith('xAxisName'); - expect(mockDB.setXAxisBand).toHaveBeenCalledWith(['cat1', 'cat2']); + expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ + text: 'xAxisName', + type: 'text', + }); + expect(mockDB.setXAxisBand).toHaveBeenCalledWith([ + { + text: 'cat1', + type: 'text', + }, + { text: 'cat2a', type: 'text' }, + ]); clearMocks(); str = `xychart-beta \n x-axis "this is x axis" [category1, "category 2", category3]\n`; expect(parserFnConstructor(str)).not.toThrow(); - expect(mockDB.setXAxisTitle).toHaveBeenCalledWith('this is x axis'); - expect(mockDB.setXAxisBand).toHaveBeenCalledWith(['category1', 'category 2', 'category3']); + expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'this is x axis', type: 'text' }); + expect(mockDB.setXAxisBand).toHaveBeenCalledWith([ + { text: 'category1', type: 'text' }, + { text: 'category 2', type: 'text' }, + { text: 'category3', type: 'text' }, + ]); clearMocks(); str = 'xychart-beta \nx-axis xAxisName [ "cat1 with space" , cat2 , cat3] \n '; expect(parserFnConstructor(str)).not.toThrow(); - expect(mockDB.setXAxisTitle).toHaveBeenCalledWith('xAxisName'); - expect(mockDB.setXAxisBand).toHaveBeenCalledWith(['cat1 with space', 'cat2', 'cat3']); + expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName', type: 'text' }); + expect(mockDB.setXAxisBand).toHaveBeenCalledWith([ + { text: 'cat1 with space', type: 'text' }, + { text: 'cat2', type: 'text' }, + { text: 'cat3', type: 'text' }, + ]); clearMocks(); str = 'xychart-beta \nx-axis xAxisName [ "cat1 with space" , cat2 asdf , cat3] \n '; - expect(parserFnConstructor(str)).toThrow(); + expect(parserFnConstructor(str)).not.toThrow(); + expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName', type: 'text' }); + expect(mockDB.setXAxisBand).toHaveBeenCalledWith([ + { text: 'cat1 with space', type: 'text' }, + { text: 'cat2asdf', type: 'text' }, + { text: 'cat3', type: 'text' }, + ]); }); it('parse y-axis', () => { let str = 'xychart-beta \ny-axis yAxisName\n'; expect(parserFnConstructor(str)).not.toThrow(); - expect(mockDB.setYAxisTitle).toHaveBeenCalledWith('yAxisName'); + expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' }); clearMocks(); str = 'xychart-beta \ny-axis yAxisName \n'; expect(parserFnConstructor(str)).not.toThrow(); - expect(mockDB.setYAxisTitle).toHaveBeenCalledWith('yAxisName'); + expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' }); clearMocks(); str = 'xychart-beta \n y-axis "yAxisName has space"\n'; expect(parserFnConstructor(str)).not.toThrow(); - expect(mockDB.setYAxisTitle).toHaveBeenCalledWith('yAxisName has space'); + expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ + text: 'yAxisName has space', + type: 'text', + }); clearMocks(); str = 'xychart-beta \n y-axis " yAxisName has space " \n'; expect(parserFnConstructor(str)).not.toThrow(); - expect(mockDB.setYAxisTitle).toHaveBeenCalledWith('yAxisName has space'); + expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ + text: ' yAxisName has space ', + type: 'text', + }); clearMocks(); str = 'xychart-beta \ny-axis yAxisName 45.5 --> 33 \n'; expect(parserFnConstructor(str)).not.toThrow(); - expect(mockDB.setYAxisTitle).toHaveBeenCalledWith('yAxisName'); + expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' }); expect(mockDB.setYAxisRangeData).toHaveBeenCalledWith(45.5, 33); + + clearMocks(); + + str = 'xychart-beta \ny-axis yAxisName [ 45.3, 33 ] \n'; + expect(parserFnConstructor(str)).toThrow(); + + clearMocks(); + + str = 'xychart-beta \ny-axis yAxisName\n'; + expect(parserFnConstructor(str)).not.toThrow(); + expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' }); + }); + it('parse both axis', () => { + let str = 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n'; + expect(parserFnConstructor(str)).not.toThrow(); + expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName', type: 'text' }); + expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' }); + + clearMocks(); + + str = 'xychart-beta \nx-axis xAxisName\n'; + expect(parserFnConstructor(str)).not.toThrow(); + expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ + text: 'xAxisName', + type: 'text', + }); + + clearMocks(); + + str = 'xychart-beta \ny-axis yAxisName'; + expect(parserFnConstructor(str)).not.toThrow(); + expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' }); + + clearMocks(); }); it('parse line Data', () => { let str = 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n line lineTitle [23, 45, 56.6]'; expect(parserFnConstructor(str)).not.toThrow(); - expect(mockDB.setYAxisTitle).toHaveBeenCalledWith('yAxisName'); - expect(mockDB.setXAxisTitle).toHaveBeenCalledWith('xAxisName'); - expect(mockDB.setLineData).toHaveBeenCalledWith('lineTitle', [23, 45, 56.6]); + expect(mockDB.setLineData).toHaveBeenCalledWith( + { text: 'lineTitle', type: 'text' }, + [23, 45, 56.6] + ); + expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName', type: 'text' }); + expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' }); clearMocks(); str = 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n line "lineTitle with space" [ +23 , -45 , 56.6 ] '; expect(parserFnConstructor(str)).not.toThrow(); - expect(mockDB.setYAxisTitle).toHaveBeenCalledWith('yAxisName'); - expect(mockDB.setXAxisTitle).toHaveBeenCalledWith('xAxisName'); - expect(mockDB.setLineData).toHaveBeenCalledWith('lineTitle with space', [23, -45, 56.6]); + expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' }); + expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName', type: 'text' }); + expect(mockDB.setLineData).toHaveBeenCalledWith( + { text: 'lineTitle with space', type: 'text' }, + [23, -45, 56.6] + ); // set line data without title str = 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n line [ +23 , -45 , 56.6 ] '; expect(parserFnConstructor(str)).not.toThrow(); - expect(mockDB.setYAxisTitle).toHaveBeenCalledWith('yAxisName'); - expect(mockDB.setXAxisTitle).toHaveBeenCalledWith('xAxisName'); - expect(mockDB.setLineData).toHaveBeenCalledWith('', [23, -45, 56.6]); + expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' }); + expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName', type: 'text' }); + expect(mockDB.setLineData).toHaveBeenCalledWith({ text: '', type: 'text' }, [23, -45, 56.6]); clearMocks(); str = @@ -189,26 +273,32 @@ describe('Testing xychart jison file', () => { it('parse bar Data', () => { let str = 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n bar barTitle [23, 45, 56.6]'; expect(parserFnConstructor(str)).not.toThrow(); - expect(mockDB.setYAxisTitle).toHaveBeenCalledWith('yAxisName'); - expect(mockDB.setXAxisTitle).toHaveBeenCalledWith('xAxisName'); - expect(mockDB.setBarData).toHaveBeenCalledWith('barTitle', [23, 45, 56.6]); + expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' }); + expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName', type: 'text' }); + expect(mockDB.setBarData).toHaveBeenCalledWith( + { text: 'barTitle', type: 'text' }, + [23, 45, 56.6] + ); clearMocks(); str = 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n bar "barTitle with space" [ +23 , -45 , 56.6 ] '; expect(parserFnConstructor(str)).not.toThrow(); - expect(mockDB.setYAxisTitle).toHaveBeenCalledWith('yAxisName'); - expect(mockDB.setXAxisTitle).toHaveBeenCalledWith('xAxisName'); - expect(mockDB.setBarData).toHaveBeenCalledWith('barTitle with space', [23, -45, 56.6]); + expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' }); + expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName', type: 'text' }); + expect(mockDB.setBarData).toHaveBeenCalledWith( + { text: 'barTitle with space', type: 'text' }, + [23, -45, 56.6] + ); clearMocks(); // set bar data without title str = 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n bar [ +23 , -45 , 56.6 ] '; expect(parserFnConstructor(str)).not.toThrow(); - expect(mockDB.setYAxisTitle).toHaveBeenCalledWith('yAxisName'); - expect(mockDB.setXAxisTitle).toHaveBeenCalledWith('xAxisName'); - expect(mockDB.setBarData).toHaveBeenCalledWith('', [23, -45, 56.6]); + expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' }); + expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName', type: 'text' }); + expect(mockDB.setBarData).toHaveBeenCalledWith({ text: '', type: 'text' }, [23, -45, 56.6]); clearMocks(); str = @@ -219,12 +309,24 @@ describe('Testing xychart jison file', () => { let str = 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n bar barTitle1 [23, 45, 56.6] \n line lineTitle1 [11, 45.5, 67, 23] \n bar barTitle2 [13, 42, 56.89] \n line lineTitle2 [45, 99, 012]'; expect(parserFnConstructor(str)).not.toThrow(); - expect(mockDB.setYAxisTitle).toHaveBeenCalledWith('yAxisName'); - expect(mockDB.setXAxisTitle).toHaveBeenCalledWith('xAxisName'); - expect(mockDB.setBarData).toHaveBeenCalledWith('barTitle1', [23, 45, 56.6]); - expect(mockDB.setBarData).toHaveBeenCalledWith('barTitle2', [13, 42, 56.89]); - expect(mockDB.setLineData).toHaveBeenCalledWith('lineTitle1', [11, 45.5, 67, 23]); - expect(mockDB.setLineData).toHaveBeenCalledWith('lineTitle2', [45, 99, 12]); + expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' }); + expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName', type: 'text' }); + expect(mockDB.setBarData).toHaveBeenCalledWith( + { text: 'barTitle1', type: 'text' }, + [23, 45, 56.6] + ); + expect(mockDB.setBarData).toHaveBeenCalledWith( + { text: 'barTitle2', type: 'text' }, + [13, 42, 56.89] + ); + expect(mockDB.setLineData).toHaveBeenCalledWith( + { text: 'lineTitle1', type: 'text' }, + [11, 45.5, 67, 23] + ); + expect(mockDB.setLineData).toHaveBeenCalledWith( + { text: 'lineTitle2', type: 'text' }, + [45, 99, 12] + ); clearMocks(); str = ` @@ -237,13 +339,29 @@ describe('Testing xychart jison file', () => { bar barTitle2 [13, 42, 56.89] line lineTitle2 [45, 99, 012]`; expect(parserFnConstructor(str)).not.toThrow(); - expect(mockDB.setYAxisTitle).toHaveBeenCalledWith('yaxisText'); + expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yaxisText', type: 'text' }); expect(mockDB.setYAxisRangeData).toHaveBeenCalledWith(10, 150); - expect(mockDB.setXAxisTitle).toHaveBeenCalledWith('this is x axis'); - expect(mockDB.setXAxisBand).toHaveBeenCalledWith(['category1', 'category 2', 'category3']); - expect(mockDB.setBarData).toHaveBeenCalledWith('barTitle1', [23, 45, 56.6]); - expect(mockDB.setBarData).toHaveBeenCalledWith('barTitle2', [13, 42, 56.89]); - expect(mockDB.setLineData).toHaveBeenCalledWith('lineTitle1', [11, 45.5, 67, 23]); - expect(mockDB.setLineData).toHaveBeenCalledWith('lineTitle2', [45, 99, 12]); + expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'this is x axis', type: 'text' }); + expect(mockDB.setXAxisBand).toHaveBeenCalledWith([ + { text: 'category1', type: 'text' }, + { text: 'category 2', type: 'text' }, + { text: 'category3', type: 'text' }, + ]); + expect(mockDB.setBarData).toHaveBeenCalledWith( + { text: 'barTitle1', type: 'text' }, + [23, 45, 56.6] + ); + expect(mockDB.setBarData).toHaveBeenCalledWith( + { text: 'barTitle2', type: 'text' }, + [13, 42, 56.89] + ); + expect(mockDB.setLineData).toHaveBeenCalledWith( + { text: 'lineTitle1', type: 'text' }, + [11, 45.5, 67, 23] + ); + expect(mockDB.setLineData).toHaveBeenCalledWith( + { text: 'lineTitle2', type: 'text' }, + [45, 99, 12] + ); }); }); diff --git a/packages/mermaid/src/diagrams/xychart/xychartDb.ts b/packages/mermaid/src/diagrams/xychart/xychartDb.ts index a818037f32..8f1e80e61b 100644 --- a/packages/mermaid/src/diagrams/xychart/xychartDb.ts +++ b/packages/mermaid/src/diagrams/xychart/xychartDb.ts @@ -1,5 +1,5 @@ // @ts-ignore: TODO Fix ts errors -import { adjust, channel, toHsla, isDark, lighten, darken } from 'khroma'; +import { adjust, channel } from 'khroma'; import mermaidAPI from '../../mermaidAPI.js'; import * as configApi from '../../config.js'; import { sanitizeText } from '../common/common.js'; @@ -133,6 +133,11 @@ let plotColorPalette = Array.isArray(xyChartThemeConfig.xychartPlotBaseColor) let hasSetXAxis = false; let hasSetYAxis = false; +interface NormalTextType { + type: 'text'; + text: string; +} + function textSanitizer(text: string) { return sanitizeText(text.trim(), config); } @@ -149,23 +154,23 @@ function setOrientation(oriantation: string) { xyChartConfig.chartOrientation = 'vertical'; } } -function setXAxisTitle(title: string) { - xyChartData.xAxis.title = textSanitizer(title); +function setXAxisTitle(title: NormalTextType) { + xyChartData.xAxis.title = textSanitizer(title.text); } function setXAxisRangeData(min: number, max: number) { xyChartData.xAxis = { type: 'linear', title: xyChartData.xAxis.title, min, max }; hasSetXAxis = true; } -function setXAxisBand(categories: string[]) { +function setXAxisBand(categories: NormalTextType[]) { xyChartData.xAxis = { type: 'band', title: xyChartData.xAxis.title, - categories: categories.map((c) => textSanitizer(c)), + categories: categories.map((c) => textSanitizer(c.text)), }; hasSetXAxis = true; } -function setYAxisTitle(title: string) { - xyChartData.yAxis.title = textSanitizer(title); +function setYAxisTitle(title: NormalTextType) { + xyChartData.yAxis.title = textSanitizer(title.text); } function setYAxisRangeData(min: number, max: number) { xyChartData.yAxis = { type: 'linear', title: xyChartData.yAxis.title, min, max }; @@ -224,7 +229,7 @@ function getPlotColorFromPalette(plotIndex: number): string { return plotColorPalette[plotIndex === 0 ? 0 : plotIndex % (plotColorPalette.length - 1)]; } -function setLineData(title: string, data: number[]) { +function setLineData(title: NormalTextType, data: number[]) { const plotData = transformDataWithOutCategory(data); xyChartData.plots.push({ type: 'line', @@ -235,7 +240,7 @@ function setLineData(title: string, data: number[]) { plotIndex++; } -function setBarData(title: string, data: number[]) { +function setBarData(title: NormalTextType, data: number[]) { const plotData = transformDataWithOutCategory(data); xyChartData.plots.push({ type: 'bar', From 526de36c869c75b8688fe64fb99943213702dacf Mon Sep 17 00:00:00 2001 From: Subhash Halder <halder.subhash@gmail.com> Date: Sun, 13 Aug 2023 22:56:50 +0530 Subject: [PATCH 025/457] Updated code to use latest config system --- .vite/jsonSchemaPlugin.ts | 1 + docs/config/setup/modules/defaultConfig.md | 2 +- .../scripts/create-types-from-json-schema.mts | 1 + packages/mermaid/src/config.type.ts | 191 +++++++++++++++--- packages/mermaid/src/defaultConfig.ts | 4 + .../xychart/chartBuilder/Interfaces.ts | 48 ++++- .../xychart/chartBuilder/Orchestrator.ts | 21 +- .../chartBuilder/components/ChartTitle.ts | 6 +- .../chartBuilder/components/axis/BandAxis.ts | 3 +- .../chartBuilder/components/axis/BaseAxis.ts | 14 +- .../components/axis/LinearAxis.ts | 3 +- .../chartBuilder/components/axis/index.ts | 2 +- .../chartBuilder/components/plot/BarPlot.ts | 3 +- .../chartBuilder/components/plot/LinePlot.ts | 3 +- .../components/plot/PlotBorder.ts | 7 +- .../chartBuilder/components/plot/index.ts | 2 +- .../diagrams/xychart/chartBuilder/index.ts | 4 +- .../mermaid/src/diagrams/xychart/xychartDb.ts | 108 +++++----- .../mermaid/src/schemas/config.schema.yaml | 128 ++++++++++++ packages/mermaid/src/themes/theme-default.js | 22 +- 20 files changed, 433 insertions(+), 140 deletions(-) diff --git a/.vite/jsonSchemaPlugin.ts b/.vite/jsonSchemaPlugin.ts index 671a9612e8..ad3d9863dc 100644 --- a/.vite/jsonSchemaPlugin.ts +++ b/.vite/jsonSchemaPlugin.ts @@ -18,6 +18,7 @@ const MERMAID_CONFIG_DIAGRAM_KEYS = [ 'er', 'pie', 'quadrantChart', + 'xyChart', 'requirement', 'mindmap', 'timeline', diff --git a/docs/config/setup/modules/defaultConfig.md b/docs/config/setup/modules/defaultConfig.md index a55ec18085..93b0459c6c 100644 --- a/docs/config/setup/modules/defaultConfig.md +++ b/docs/config/setup/modules/defaultConfig.md @@ -14,7 +14,7 @@ #### Defined in -[defaultConfig.ts:266](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L266) +[defaultConfig.ts:270](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L270) --- diff --git a/packages/mermaid/scripts/create-types-from-json-schema.mts b/packages/mermaid/scripts/create-types-from-json-schema.mts index e81ea70ffd..e6a273bfb1 100644 --- a/packages/mermaid/scripts/create-types-from-json-schema.mts +++ b/packages/mermaid/scripts/create-types-from-json-schema.mts @@ -46,6 +46,7 @@ const MERMAID_CONFIG_DIAGRAM_KEYS = [ 'er', 'pie', 'quadrantChart', + 'xyChart', 'requirement', 'mindmap', 'timeline', diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts index 4a392673d9..3548f0223f 100644 --- a/packages/mermaid/src/config.type.ts +++ b/packages/mermaid/src/config.type.ts @@ -704,33 +704,178 @@ export interface QuadrantChartConfig extends BaseDiagramConfig { */ quadrantExternalBorderStrokeWidth?: number; } - +/** + * This object contains configuration for XYChart axis config + * + * This interface was referenced by `MermaidConfig`'s JSON-Schema + * via the `definition` "XYChartAxisConfig". + */ export interface XYChartAxisConfig { - showLabel: boolean; - labelFontSize: number; - lablePadding: number; - showTitle: boolean; - titleFontSize: number; - titlePadding: number; - showTick: boolean; - tickLength: number; - tickWidth: number; + /** + * Should show the axis labels (tick text) + */ + showLabel?: boolean; + /** + * font size of the axis labels (tick text) + */ + labelFontSize?: number; + /** + * top and bottom space from axis label (tick text) + */ + labelPadding?: number; + /** + * Should show the axis title + */ + showTitle?: boolean; + /** + * font size of the axis title + */ + titleFontSize?: number; + /** + * top and bottom space from axis title + */ + titlePadding?: number; + /** + * Should show the axis tick lines + */ + showTick?: boolean; + /** + * length of the axis tick lines + */ + tickLength?: number; + /** + * width of the axis tick lines + */ + tickWidth?: number; } - +/** + * This object contains configuration specific to XYCharts + * + * This interface was referenced by `MermaidConfig`'s JSON-Schema + * via the `definition` "XYChartConfig". + */ export interface XYChartConfig extends BaseDiagramConfig { - width: number; - height: number; - fontFamily: string; - titleFontSize: number; - titlePadding: number; - showtitle: boolean; - xAxis: XYChartAxisConfig; - yAxis: XYChartAxisConfig; - plotBorderWidth: number; - chartOrientation: 'vertical' | 'horizontal'; - plotReservedSpacePercent: number; + /** + * width of the chart + */ + width?: number; + /** + * height of the chart + */ + height?: number; + /** + * Font family of texts in the xyChart + */ + fontFamily?: string; + /** + * Font size of the chart title + */ + titleFontSize?: number; + /** + * Top and bottom space from the chart title + */ + titlePadding?: number; + /** + * Should show the chart title + */ + showTitle?: boolean; + xAxis?: XYChartAxisConfig1; + yAxis?: XYChartAxisConfig2; + /** + * width of the line around the plot of the chart + */ + plotBorderWidth?: number; + /** + * How to plot will be drawn horizontal or vertical + */ + chartOrientation?: 'vertical' | 'horizontal'; + /** + * Minimum percent of space plots of the chart will take + */ + plotReservedSpacePercent?: number; +} +/** + * This object contains configuration for XYChart axis config + */ +export interface XYChartAxisConfig1 { + /** + * Should show the axis labels (tick text) + */ + showLabel?: boolean; + /** + * font size of the axis labels (tick text) + */ + labelFontSize?: number; + /** + * top and bottom space from axis label (tick text) + */ + labelPadding?: number; + /** + * Should show the axis title + */ + showTitle?: boolean; + /** + * font size of the axis title + */ + titleFontSize?: number; + /** + * top and bottom space from axis title + */ + titlePadding?: number; + /** + * Should show the axis tick lines + */ + showTick?: boolean; + /** + * length of the axis tick lines + */ + tickLength?: number; + /** + * width of the axis tick lines + */ + tickWidth?: number; +} +/** + * This object contains configuration for XYChart axis config + */ +export interface XYChartAxisConfig2 { + /** + * Should show the axis labels (tick text) + */ + showLabel?: boolean; + /** + * font size of the axis labels (tick text) + */ + labelFontSize?: number; + /** + * top and bottom space from axis label (tick text) + */ + labelPadding?: number; + /** + * Should show the axis title + */ + showTitle?: boolean; + /** + * font size of the axis title + */ + titleFontSize?: number; + /** + * top and bottom space from axis title + */ + titlePadding?: number; + /** + * Should show the axis tick lines + */ + showTick?: boolean; + /** + * length of the axis tick lines + */ + tickLength?: number; + /** + * width of the axis tick lines + */ + tickWidth?: number; } - /** * The object containing configurations specific for entity relationship diagrams * diff --git a/packages/mermaid/src/defaultConfig.ts b/packages/mermaid/src/defaultConfig.ts index 62b361cff4..9681534736 100644 --- a/packages/mermaid/src/defaultConfig.ts +++ b/packages/mermaid/src/defaultConfig.ts @@ -234,6 +234,10 @@ const config: Partial<MermaidConfig> = { ...defaultConfigJson.pie, useWidth: undefined, }, + xyChart: { + ...defaultConfigJson.xyChart, + useWidth: undefined, + }, requirement: { ...defaultConfigJson.requirement, useWidth: undefined, diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts index ce7e33e8bf..843e02675c 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts @@ -5,15 +5,15 @@ export interface XYChartAxisThemeConfig { } export interface XYChartThemeConfig { - xychartTitleColor: string; - xychartAxisLineColor: string; - xychartXAxisLableColor: string; - xychartXAxisTitleColor: string; - xychartXAxisTickColor: string; - xychartYAxisLableColor: string; - xychartYAxisTitleColor: string; - xychartYAxisTickColor: string; - xychartPlotBaseColor: string; + titleColor: string; + axisLineColor: string; + xAxisLableColor: string; + xAxisTitleColor: string; + xAxisTickColor: string; + yAxisLableColor: string; + yAxisTitleColor: string; + yAxisTickColor: string; + plotBaseColor: string; } export interface ChartComponent { @@ -66,6 +66,36 @@ export function isLinearAxisData(data: AxisDataType): data is LinearAxisDataType return data.type === 'linear'; } +/** + * For now we are keeping this configs as we are removing the required fields while generating the config.type.ts file + * we should remove `XYChartAxisConfig` and `XYChartConfig` after we started using required fields + */ +export interface XYChartAxisConfig { + showLabel: boolean; + labelFontSize: number; + labelPadding: number; + showTitle: boolean; + titleFontSize: number; + titlePadding: number; + showTick: boolean; + tickLength: number; + tickWidth: number; +} + +export interface XYChartConfig { + width: number; + height: number; + fontFamily: string; + titleFontSize: number; + titlePadding: number; + showTitle: boolean; + xAxis: XYChartAxisConfig; + yAxis: XYChartAxisConfig; + plotBorderWidth: number; + chartOrientation: 'vertical' | 'horizontal'; + plotReservedSpacePercent: number; +} + export interface XYChartData { xAxis: AxisDataType; yAxis: AxisDataType; diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts index d4c80b5597..1386f53cdc 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts @@ -1,10 +1,15 @@ import { log } from '../../../logger.js'; -import { DrawableElem, XYChartData, XYChartThemeConfig, isBarPlot } from './Interfaces.js'; +import { + DrawableElem, + XYChartData, + XYChartThemeConfig, + XYChartConfig, + isBarPlot, +} from './Interfaces.js'; import { getChartTitleComponent } from './components/ChartTitle.js'; import { ChartComponent } from './Interfaces.js'; import { IAxis, getAxis } from './components/axis/index.js'; import { IPlot, getPlotComponent } from './components/plot/index.js'; -import { XYChartConfig } from '../../../config.type.js'; export class Orchestrator { private componentStore: { @@ -25,9 +30,9 @@ export class Orchestrator { chartData.xAxis, chartConfig.xAxis, { - titleColor: chartThemeConfig.xychartXAxisTitleColor, - labelColor: chartThemeConfig.xychartXAxisLableColor, - tickColor: chartThemeConfig.xychartXAxisTickColor, + titleColor: chartThemeConfig.xAxisTitleColor, + labelColor: chartThemeConfig.xAxisLableColor, + tickColor: chartThemeConfig.xAxisTickColor, }, chartConfig.fontFamily ), @@ -35,9 +40,9 @@ export class Orchestrator { chartData.yAxis, chartConfig.yAxis, { - titleColor: chartThemeConfig.xychartYAxisTitleColor, - labelColor: chartThemeConfig.xychartYAxisLableColor, - tickColor: chartThemeConfig.xychartYAxisTickColor, + titleColor: chartThemeConfig.yAxisTitleColor, + labelColor: chartThemeConfig.yAxisLableColor, + tickColor: chartThemeConfig.yAxisTickColor, }, chartConfig.fontFamily ), diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts index 0de677f259..c224c8ebe2 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts @@ -1,4 +1,3 @@ -import { XYChartConfig } from '../../../../config.type.js'; import { BoundingRect, ChartComponent, @@ -7,6 +6,7 @@ import { Point, XYChartData, XYChartThemeConfig, + XYChartConfig, } from '../Interfaces.js'; import { ITextDimensionCalculator, @@ -28,7 +28,7 @@ export class ChartTitle implements ChartComponent { width: 0, height: 0, }; - this.showChartTitle = !!(this.chartData.title && this.chartConfig.showtitle); + this.showChartTitle = !!(this.chartData.title && this.chartConfig.showTitle); } setBoundingBoxXY(point: Point): void { this.boundingRect.x = point.x; @@ -69,7 +69,7 @@ export class ChartTitle implements ChartComponent { horizontalPos: 'middle', x: this.boundingRect.x + this.boundingRect.width / 2, y: this.boundingRect.y + this.boundingRect.height / 2, - fill: this.chartThemeConfig.xychartTitleColor, + fill: this.chartThemeConfig.titleColor, rotation: 0, }, ], diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BandAxis.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BandAxis.ts index 6c354cd510..bb826fbb47 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BandAxis.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BandAxis.ts @@ -1,9 +1,8 @@ import { ScaleBand, scaleBand } from 'd3'; -import { XYChartAxisConfig } from '../../../../../config.type.js'; import { log } from '../../../../../logger.js'; import { ITextDimensionCalculator } from '../../TextDimensionCalculator.js'; import { BaseAxis } from './BaseAxis.js'; -import { XYChartAxisThemeConfig } from '../../Interfaces.js'; +import { XYChartAxisThemeConfig, XYChartAxisConfig } from '../../Interfaces.js'; export class BandAxis extends BaseAxis { private scale: ScaleBand<string>; diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts index a9e5516268..3041ce13a9 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts @@ -1,4 +1,3 @@ -import { XYChartAxisConfig } from '../../../../../config.type.js'; import { log } from '../../../../../logger.js'; import { BoundingRect, @@ -6,6 +5,7 @@ import { DrawableElem, Point, XYChartAxisThemeConfig, + XYChartAxisConfig, } from '../../Interfaces.js'; import { ITextDimensionCalculator } from '../../TextDimensionCalculator.js'; import { AxisPosition, IAxis } from './index.js'; @@ -76,7 +76,7 @@ export abstract class BaseAxis implements IAxis { if (this.axisConfig.showLabel) { const spaceRequired = this.getLabelDimension(); this.outerPadding = spaceRequired.width / 2; - const heightRequired = spaceRequired.height + this.axisConfig.lablePadding * 2; + const heightRequired = spaceRequired.height + this.axisConfig.labelPadding * 2; log.trace('height required for axis label: ', heightRequired); if (heightRequired <= availableHeight) { availableHeight -= heightRequired; @@ -108,7 +108,7 @@ export abstract class BaseAxis implements IAxis { if (this.axisConfig.showLabel) { const spaceRequired = this.getLabelDimension(); this.outerPadding = spaceRequired.height / 2; - const widthRequired = spaceRequired.width + this.axisConfig.lablePadding * 2; + const widthRequired = spaceRequired.width + this.axisConfig.labelPadding * 2; log.trace('width required for axis label: ', widthRequired); if (widthRequired <= availableWidth) { availableWidth -= widthRequired; @@ -124,7 +124,7 @@ export abstract class BaseAxis implements IAxis { [this.title], this.axisConfig.labelFontSize ); - const widthRequired = spaceRequired.height + this.axisConfig.lablePadding * 2; + const widthRequired = spaceRequired.height + this.axisConfig.labelPadding * 2; log.trace('width required for axis title: ', widthRequired); if (widthRequired <= availableWidth) { availableWidth -= widthRequired; @@ -168,7 +168,7 @@ export abstract class BaseAxis implements IAxis { x: this.boundingRect.x + this.boundingRect.width - - this.axisConfig.lablePadding - + this.axisConfig.labelPadding - this.axisConfig.tickLength, y: this.getScaleValue(tick), fill: this.axisThemeConfig.labelColor, @@ -222,7 +222,7 @@ export abstract class BaseAxis implements IAxis { data: this.getTickValues().map((tick) => ({ text: tick.toString(), x: this.getScaleValue(tick), - y: this.boundingRect.y + this.axisConfig.lablePadding + this.axisConfig.tickLength, + y: this.boundingRect.y + this.axisConfig.labelPadding + this.axisConfig.tickLength, fill: this.axisThemeConfig.labelColor, fontSize: this.axisConfig.labelFontSize, rotation: 0, @@ -277,7 +277,7 @@ export abstract class BaseAxis implements IAxis { y: this.boundingRect.y + this.boundingRect.height - - this.axisConfig.lablePadding - + this.axisConfig.labelPadding - this.axisConfig.tickLength, fill: this.axisThemeConfig.labelColor, fontSize: this.axisConfig.labelFontSize, diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/LinearAxis.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/LinearAxis.ts index 23acf3f2a1..dec92f0bf7 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/LinearAxis.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/LinearAxis.ts @@ -1,9 +1,8 @@ import { ScaleLinear, scaleLinear } from 'd3'; -import { XYChartAxisConfig } from '../../../../../config.type.js'; import { log } from '../../../../../logger.js'; import { ITextDimensionCalculator } from '../../TextDimensionCalculator.js'; import { BaseAxis } from './BaseAxis.js'; -import { XYChartAxisThemeConfig } from '../../Interfaces.js'; +import { XYChartAxisThemeConfig, XYChartAxisConfig } from '../../Interfaces.js'; export class LinearAxis extends BaseAxis { private scale: ScaleLinear<number, number>; diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts index f1a3df093e..5512e22e48 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts @@ -1,8 +1,8 @@ -import { XYChartAxisConfig } from '../../../../../config.type.js'; import { AxisDataType, ChartComponent, XYChartAxisThemeConfig, + XYChartAxisConfig, isBandAxisData, } from '../../Interfaces.js'; import { TextDimensionCalculatorWithFont } from '../../TextDimensionCalculator.js'; diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts index 7308adde11..09149f2544 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts @@ -1,5 +1,4 @@ -import { XYChartConfig } from '../../../../../config.type.js'; -import { BarPlotData, BoundingRect, DrawableElem } from '../../Interfaces.js'; +import { BarPlotData, BoundingRect, DrawableElem, XYChartConfig } from '../../Interfaces.js'; import { IAxis } from '../axis/index.js'; export class BarPlot { diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/LinePlot.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/LinePlot.ts index cd1533b1e6..4320b76086 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/LinePlot.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/LinePlot.ts @@ -1,6 +1,5 @@ import { line } from 'd3'; -import { XYChartConfig } from '../../../../../config.type.js'; -import { DrawableElem, LinePlotData } from '../../Interfaces.js'; +import { DrawableElem, LinePlotData, XYChartConfig } from '../../Interfaces.js'; import { IAxis } from '../axis/index.js'; export class LinePlot { diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/PlotBorder.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/PlotBorder.ts index 5796ae8da4..c87165d405 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/PlotBorder.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/PlotBorder.ts @@ -1,5 +1,4 @@ -import { XYChartConfig } from '../../../../../config.type.js'; -import { BoundingRect, DrawableElem, XYChartThemeConfig } from '../../Interfaces.js'; +import { BoundingRect, DrawableElem, XYChartConfig, XYChartThemeConfig } from '../../Interfaces.js'; export class PlotBorder { constructor( private boundingRect: BoundingRect, @@ -19,7 +18,7 @@ export class PlotBorder { path: `M ${x},${y} L ${x + width},${y} M ${x + width},${y + height} M ${x},${ y + height } L ${x},${y}`, - strokeFill: this.chartThemeConfig.xychartAxisLineColor, + strokeFill: this.chartThemeConfig.axisLineColor, strokeWidth: 1, }, ], @@ -35,7 +34,7 @@ export class PlotBorder { path: `M ${x},${y} M ${x + width},${y} M ${x + width},${y + height} L ${x},${ y + height } L ${x},${y}`, - strokeFill: this.chartThemeConfig.xychartAxisLineColor, + strokeFill: this.chartThemeConfig.axisLineColor, strokeWidth: 1, }, ], diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts index bb3b90bc7c..680d19ece2 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts @@ -5,13 +5,13 @@ import { DrawableElem, Point, XYChartThemeConfig, + XYChartConfig, } from '../../Interfaces.js'; import { IAxis } from '../axis/index.js'; import { ChartComponent } from '../../Interfaces.js'; import { LinePlot } from './LinePlot.js'; import { PlotBorder } from './PlotBorder.js'; import { BarPlot } from './BarPlot.js'; -import { XYChartConfig } from '../../../../../config.type.js'; export interface IPlot extends ChartComponent { setAxes(xAxis: IAxis, yAxis: IAxis): void; diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts index 80f3b364e0..ce5bc4e775 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts @@ -1,7 +1,5 @@ -// @ts-ignore: TODO Fix ts errors -import { XYChartConfig } from '../../../config.type.js'; import { log } from '../../../logger.js'; -import { DrawableElem, XYChartData, XYChartThemeConfig } from './Interfaces.js'; +import { DrawableElem, XYChartData, XYChartConfig, XYChartThemeConfig } from './Interfaces.js'; import { Orchestrator } from './Orchestrator.js'; export class XYChartBuilder { diff --git a/packages/mermaid/src/diagrams/xychart/xychartDb.ts b/packages/mermaid/src/diagrams/xychart/xychartDb.ts index 8f1e80e61b..6023898ec2 100644 --- a/packages/mermaid/src/diagrams/xychart/xychartDb.ts +++ b/packages/mermaid/src/diagrams/xychart/xychartDb.ts @@ -2,6 +2,7 @@ import { adjust, channel } from 'khroma'; import mermaidAPI from '../../mermaidAPI.js'; import * as configApi from '../../config.js'; +import defaultConfig from '../../defaultConfig.js'; import { sanitizeText } from '../common/common.js'; import { setAccTitle, @@ -20,14 +21,16 @@ import { XYChartThemeConfig, isBandAxisData, isLinearAxisData, + XYChartConfig, } from './chartBuilder/Interfaces.js'; -import { XYChartConfig } from '../../config.type.js'; import { getThemeVariables } from '../../themes/theme-default.js'; const defaultThemeVariables = getThemeVariables(); const config = configApi.getConfig(); +let plotIndex = 0; + function plotColorPaletteGenerator(baseColor: string, noOfColorNeeded = 15): string[] { const colors = []; const MAX_HUE_VALUE = 360; @@ -48,62 +51,45 @@ function plotColorPaletteGenerator(baseColor: string, noOfColorNeeded = 15): str function getChartDefaultThemeConfig(): XYChartThemeConfig { return { - xychartTitleColor: - config.themeVariables?.xychartTitleColor || defaultThemeVariables.xychartTitleColor, - xychartAxisLineColor: - config.themeVariables?.xychartAxisLineColor || defaultThemeVariables.xychartAxisLineColor, - xychartXAxisLableColor: - config.themeVariables?.xychartXAxisLableColor || defaultThemeVariables.xychartXAxisLableColor, - xychartXAxisTitleColor: - config.themeVariables?.xychartXAxisTitleColor || defaultThemeVariables.xychartXAxisTitleColor, - xychartXAxisTickColor: - config.themeVariables?.xychartXAxisTickColor || defaultThemeVariables.xychartXAxisTickColor, - xychartYAxisLableColor: - config.themeVariables?.xychartYAxisLableColor || defaultThemeVariables.xychartYAxisLableColor, - xychartYAxisTitleColor: - config.themeVariables?.xychartYAxisTitleColor || defaultThemeVariables.xychartYAxisTitleColor, - xychartYAxisTickColor: - config.themeVariables?.xychartYAxisTickColor || defaultThemeVariables.xychartYAxisTickColor, - xychartPlotBaseColor: - config.themeVariables?.xychartPlotBaseColor || defaultThemeVariables.xychartPlotBaseColor, + titleColor: + config.themeVariables?.xyChart?.titleColor || defaultThemeVariables.xyChart.titleColor, + axisLineColor: + config.themeVariables?.xyChart?.axisLineColor || defaultThemeVariables.xyChart.axisLineColor, + xAxisLableColor: + config.themeVariables?.xyChart?.xAxisLableColor || + defaultThemeVariables.xyChart.xAxisLableColor, + xAxisTitleColor: + config.themeVariables?.xyChart?.xAxisTitleColor || + defaultThemeVariables.xyChart.xAxisTitleColor, + xAxisTickColor: + config.themeVariables?.xyChart?.xAxisTickColor || + defaultThemeVariables.xyChart.xAxisTickColor, + yAxisLableColor: + config.themeVariables?.xyChart?.yAxisLableColor || + defaultThemeVariables.xyChart.yAxisLableColor, + yAxisTitleColor: + config.themeVariables?.xyChart?.yAxisTitleColor || + defaultThemeVariables.xyChart.yAxisTitleColor, + yAxisTickColor: + config.themeVariables?.xyChart?.yAxisTickColor || + defaultThemeVariables.xyChart.yAxisTickColor, + plotBaseColor: + config.themeVariables?.xyChart?.plotBaseColor || defaultThemeVariables.xyChart.plotBaseColor, }; } function getChartDefaultConfig(): XYChartConfig { - return config.xyChart - ? { ...config.xyChart, yAxis: { ...config.xyChart.yAxis }, xAxis: { ...config.xyChart.xAxis } } - : { - width: 700, - height: 500, - fontFamily: config.fontFamily || 'Sans', - titleFontSize: 16, - titlePadding: 5, - showtitle: true, - plotBorderWidth: 2, - yAxis: { - showLabel: true, - labelFontSize: 14, - lablePadding: 5, - showTitle: true, - titleFontSize: 16, - titlePadding: 5, - showTick: true, - tickLength: 5, - tickWidth: 2, - }, - xAxis: { - showLabel: true, - labelFontSize: 14, - lablePadding: 5, - showTitle: true, - titleFontSize: 16, - titlePadding: 5, - showTick: true, - tickLength: 5, - tickWidth: 2, - }, - chartOrientation: 'vertical', - plotReservedSpacePercent: 50, - }; + return { + ...(defaultConfig.xyChart as XYChartConfig), + ...(config.xyChart ? config.xyChart : {}), + yAxis: { + ...(defaultConfig.xyChart as XYChartConfig).yAxis, + ...(config.xyChart?.yAxis ? config.xyChart.yAxis : {}), + }, + xAxis: { + ...(defaultConfig.xyChart as XYChartConfig).xAxis, + ...(config.xyChart?.xAxis ? config.xyChart.xAxis : {}), + }, + }; } function getChartDefalutData(): XYChartData { @@ -127,9 +113,9 @@ function getChartDefalutData(): XYChartData { let xyChartConfig: XYChartConfig = getChartDefaultConfig(); let xyChartThemeConfig: XYChartThemeConfig = getChartDefaultThemeConfig(); let xyChartData: XYChartData = getChartDefalutData(); -let plotColorPalette = Array.isArray(xyChartThemeConfig.xychartPlotBaseColor) - ? xyChartThemeConfig.xychartPlotBaseColor - : plotColorPaletteGenerator(xyChartThemeConfig.xychartPlotBaseColor); +let plotColorPalette = Array.isArray(xyChartThemeConfig.plotBaseColor) + ? xyChartThemeConfig.plotBaseColor + : plotColorPaletteGenerator(xyChartThemeConfig.plotBaseColor); let hasSetXAxis = false; let hasSetYAxis = false; @@ -223,8 +209,6 @@ function transformDataWithOutCategory(data: number[]): SimplePlotDataType { return retData; } -let plotIndex = 0; - function getPlotColorFromPalette(plotIndex: number): string { return plotColorPalette[plotIndex === 0 ? 0 : plotIndex % (plotColorPalette.length - 1)]; } @@ -272,9 +256,9 @@ const clear = function () { xyChartConfig = getChartDefaultConfig(); xyChartData = getChartDefalutData(); xyChartThemeConfig = getChartDefaultThemeConfig(); - plotColorPalette = Array.isArray(xyChartThemeConfig.xychartPlotBaseColor) - ? xyChartThemeConfig.xychartPlotBaseColor - : plotColorPaletteGenerator(xyChartThemeConfig.xychartPlotBaseColor); + plotColorPalette = Array.isArray(xyChartThemeConfig.plotBaseColor) + ? xyChartThemeConfig.plotBaseColor + : plotColorPaletteGenerator(xyChartThemeConfig.plotBaseColor); hasSetXAxis = false; hasSetYAxis = false; }; diff --git a/packages/mermaid/src/schemas/config.schema.yaml b/packages/mermaid/src/schemas/config.schema.yaml index 6e5f48d95e..c24a50ff50 100644 --- a/packages/mermaid/src/schemas/config.schema.yaml +++ b/packages/mermaid/src/schemas/config.schema.yaml @@ -43,6 +43,7 @@ required: - er - pie - quadrantChart + - xyChart - requirement - mindmap - gitGraph @@ -197,6 +198,8 @@ properties: $ref: '#/$defs/PieDiagramConfig' quadrantChart: $ref: '#/$defs/QuadrantChartConfig' + xyChart: + $ref: '#/$defs/XYChartConfig' requirement: $ref: '#/$defs/RequirementDiagramConfig' mindmap: @@ -982,6 +985,131 @@ $defs: # JSON Schema definition (maybe we should move these to a seperate file) type: number minimum: 0 default: 2 + XYChartAxisConfig: + title: XYChart axis config + description: This object contains configuration for XYChart axis config + type: object + unevaluatedProperties: true + required: + - showLabel + - labelFontSize + - labelPadding + - showTitle + - titleFontSize + - titlePadding + - showTick + - tickLength + - tickWidth + properties: + showLabel: + description: Should show the axis labels (tick text) + type: boolean + default: true + labelFontSize: + description: font size of the axis labels (tick text) + type: integer + default: 14 + minimum: 1 + labelPadding: + description: top and bottom space from axis label (tick text) + type: integer + default: 5 + minimum: 0 + showTitle: + description: Should show the axis title + type: boolean + default: true + titleFontSize: + description: font size of the axis title + type: integer + default: 16 + minimum: 1 + titlePadding: + description: top and bottom space from axis title + type: integer + default: 5 + minimum: 0 + showTick: + description: Should show the axis tick lines + type: boolean + default: true + tickLength: + description: length of the axis tick lines + type: integer + default: 5 + minimum: 1 + tickWidth: + description: width of the axis tick lines + type: integer + default: 2 + minimum: 1 + XYChartConfig: + title: XYChart Config + allOf: [{ $ref: '#/$defs/BaseDiagramConfig' }] + description: This object contains configuration specific to XYCharts + type: object + unevaluatedProperties: false + required: + - width + - height + - fontFamily + - titleFontSize + - titlePadding + - xAxis + - yAxis + - showTitle + - plotBorderWidth + - chartOrientation + - plotReservedSpacePercent + properties: + width: + description: width of the chart + type: integer + default: 700 + minimum: 1 + height: + description: height of the chart + type: integer + default: 500 + minimum: 1 + fontFamily: + description: Font family of texts in the xyChart + type: string + default: '"trebuchet ms", verdana, arial, sans-serif' + titleFontSize: + description: Font size of the chart title + type: integer + default: 16 + minimum: 1 + titlePadding: + description: Top and bottom space from the chart title + type: integer + default: 5 + minimum: 0 + showTitle: + description: Should show the chart title + type: boolean + default: true + xAxis: + $ref: '#/$defs/XYChartAxisConfig' + default: { '$ref': '#/$defs/XYChartAxisConfig' } + yAxis: + $ref: '#/$defs/XYChartAxisConfig' + default: { '$ref': '#/$defs/XYChartAxisConfig' } + plotBorderWidth: + description: width of the line around the plot of the chart + type: integer + default: 2 + minimum: 0 + chartOrientation: + description: How to plot will be drawn horizontal or vertical + tsType: '"vertical" | "horizontal"' + default: 'vertical' + plotReservedSpacePercent: + description: Minimum percent of space plots of the chart will take + type: integer + default: 50 + minimum: 30 ErDiagramConfig: title: Er Diagram Config diff --git a/packages/mermaid/src/themes/theme-default.js b/packages/mermaid/src/themes/theme-default.js index b274a4562e..c95d44371f 100644 --- a/packages/mermaid/src/themes/theme-default.js +++ b/packages/mermaid/src/themes/theme-default.js @@ -273,16 +273,18 @@ class Theme { this.quadrantTitleFill = this.quadrantTitleFill || this.primaryTextColor; /* xychart */ - this.xychartBackgroundColor = this.xychartBackgroundColor || this.background; - this.xychartTitleColor = this.xychartTitleColor || this.primaryTextColor; - this.xychartAxisLineColor = this.xychartAxisLineColor || this.primaryTextColor; - this.xychartXAxisTitleColor = this.xychartXAxisTitleColor || this.primaryTextColor; - this.xychartXAxisLableColor = this.xychartXAxisLableColor || this.primaryTextColor; - this.xychartXAxisTickColor = this.xychartXAxisTickColor || this.primaryTextColor; - this.xychartYAxisTitleColor = this.xychartYAxisTitleColor || this.primaryTextColor; - this.xychartYAxisLableColor = this.xychartYAxisLableColor || this.primaryTextColor; - this.xychartYAxisTickColor = this.xychartYAxisTickColor || this.primaryTextColor; - this.xychartPlotBaseColor = this.xychartPlotBaseColor || darken(this.primaryColor, 25); + this.xyChart = { + backgroundColor: this.xyChart?.backgroundColor || this.background, + titleColor: this.xyChart?.titleColor || this.primaryTextColor, + axisLineColor: this.xyChart?.axisLineColor || this.primaryTextColor, + xAxisTitleColor: this.xyChart?.xAxisTitleColor || this.primaryTextColor, + xAxisLableColor: this.xyChart?.xAxisLableColor || this.primaryTextColor, + xAxisTickColor: this.xyChart?.xAxisTickColor || this.primaryTextColor, + yAxisTitleColor: this.xyChart?.yAxisTitleColor || this.primaryTextColor, + yAxisLableColor: this.xyChart?.yAxisLableColor || this.primaryTextColor, + yAxisTickColor: this.xyChart?.yAxisTickColor || this.primaryTextColor, + plotBaseColor: this.xyChart?.plotBaseColor || darken(this.primaryColor, 25), + }; /* requirement-diagram */ this.requirementBackground = this.requirementBackground || this.primaryColor; From 6c2bd33f363ec6d7093d8a912299f5132ce9fce7 Mon Sep 17 00:00:00 2001 From: Subhash Halder <halder.subhash@gmail.com> Date: Sun, 20 Aug 2023 17:51:53 +0530 Subject: [PATCH 026/457] Addressed all requested changes --- demos/xychart.html | 22 +- .../xychart/chartBuilder/Interfaces.ts | 2 +- .../xychart/chartBuilder/Orchestrator.ts | 20 +- .../chartBuilder/TextDimensionCalculator.ts | 59 +--- .../chartBuilder/components/ChartTitle.ts | 12 +- .../chartBuilder/components/axis/BandAxis.ts | 4 +- .../chartBuilder/components/axis/BaseAxis.ts | 22 +- .../components/axis/LinearAxis.ts | 4 +- .../chartBuilder/components/axis/index.ts | 9 +- .../chartBuilder/components/plot/BarPlot.ts | 6 +- .../chartBuilder/components/plot/LinePlot.ts | 6 +- .../chartBuilder/components/plot/index.ts | 16 +- .../diagrams/xychart/chartBuilder/index.ts | 6 +- .../src/diagrams/xychart/parser/xychart.jison | 137 ++++----- .../xychart/parser/xychart.jison.spec.ts | 261 +++++++++++------- .../mermaid/src/diagrams/xychart/xychartDb.ts | 45 +-- .../src/diagrams/xychart/xychartDiagram.ts | 1 - .../src/diagrams/xychart/xychartRenderer.ts | 13 +- .../mermaid/src/rendering-util/createText.js | 16 ++ 19 files changed, 377 insertions(+), 284 deletions(-) diff --git a/demos/xychart.html b/demos/xychart.html index 3d0da3fb3d..ad7bf0944d 100644 --- a/demos/xychart.html +++ b/demos/xychart.html @@ -17,7 +17,7 @@ <h1>XY Charts demos</h1> <pre class="mermaid"> xychart-beta horizontal - title Basic xychart + title "Basic xychart" x-axis "this is x axis" [category1, "category 2", category3, category4] y-axis yaxisText 10 --> 150 bar "sample bat" [52, 96, 35, 10] @@ -29,7 +29,7 @@ <h1>XY Charts demos</h1> <h1>XY Charts demos</h1> <pre class="mermaid"> xychart-beta - title Basic xychart + title "Basic xychart" x-axis "this is x axis" [category1, "category 2", category3, category4] y-axis yaxisText 10 --> 150 bar "sample bat" [52, 96, 35, 10] @@ -48,6 +48,24 @@ <h1>XY Charts demos</h1> bar "sample bat" [52, 96, 35, 10] </pre> + <h1>XY Charts demos</h1> + <pre class="mermaid"> + xychart-beta + title "Basic xychart with many categories" + x-axis "this is x axis" [category1, "category 2", category3, category4, category5, category6, category7] + y-axis yaxisText 10 --> 150 + bar "sample bat" [52, 96, 35, 10, 87, 34, 67, 99] + </pre> + + <h1>XY Charts demos</h1> + <pre class="mermaid"> + xychart-beta + title "Basic xychart with many categories with category overlap" + x-axis "this is x axis" [category1, "Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.", category3, category4, category5, category6, category7] + y-axis yaxisText 10 --> 150 + bar "sample bat" [52, 96, 35, 10, 87, 34, 67, 99] + </pre> + <hr /> <script type="module"> diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts index 843e02675c..32cd14d635 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts @@ -40,7 +40,7 @@ export interface BarPlotData { export type PlotData = LinePlotData | BarPlotData; export function isBarPlot(data: PlotData): data is BarPlotData { - return data.type === 'line'; + return data.type === 'bar'; } export interface BandAxisDataType { diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts index 1386f53cdc..e18eb92a31 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts @@ -8,23 +8,25 @@ import { } from './Interfaces.js'; import { getChartTitleComponent } from './components/ChartTitle.js'; import { ChartComponent } from './Interfaces.js'; -import { IAxis, getAxis } from './components/axis/index.js'; -import { IPlot, getPlotComponent } from './components/plot/index.js'; +import { Axis, getAxis } from './components/axis/index.js'; +import { Plot, getPlotComponent } from './components/plot/index.js'; +import { SVGGType } from '../xychartDb.js'; export class Orchestrator { private componentStore: { title: ChartComponent; - plot: IPlot; - xAxis: IAxis; - yAxis: IAxis; + plot: Plot; + xAxis: Axis; + yAxis: Axis; }; constructor( private chartConfig: XYChartConfig, private chartData: XYChartData, - private chartThemeConfig: XYChartThemeConfig + private chartThemeConfig: XYChartThemeConfig, + private tmpSVGGElem: SVGGType ) { this.componentStore = { - title: getChartTitleComponent(chartConfig, chartData, chartThemeConfig), + title: getChartTitleComponent(chartConfig, chartData, chartThemeConfig, tmpSVGGElem), plot: getPlotComponent(chartConfig, chartData, chartThemeConfig), xAxis: getAxis( chartData.xAxis, @@ -34,7 +36,7 @@ export class Orchestrator { labelColor: chartThemeConfig.xAxisLableColor, tickColor: chartThemeConfig.xAxisTickColor, }, - chartConfig.fontFamily + tmpSVGGElem ), yAxis: getAxis( chartData.yAxis, @@ -44,7 +46,7 @@ export class Orchestrator { labelColor: chartThemeConfig.yAxisLableColor, tickColor: chartThemeConfig.yAxisTickColor, }, - chartConfig.fontFamily + tmpSVGGElem ), }; } diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/TextDimensionCalculator.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/TextDimensionCalculator.ts index ea77cf4130..02d8413225 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/TextDimensionCalculator.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/TextDimensionCalculator.ts @@ -1,49 +1,15 @@ import { Dimension } from './Interfaces.js'; +import { computeDimensionOfText } from '../../../rendering-util/createText.js'; +import { SVGGType } from '../xychartDb.js'; -export interface ITextDimensionCalculator { - getDimension(texts: string[], fontSize: number, fontFamily?: string): Dimension; +export interface TextDimensionCalculator { + getMaxDimension(texts: string[], fontSize: number): Dimension; } -export class TextDimensionCalculator implements ITextDimensionCalculator { - getDimension(texts: string[], fontSize: number): Dimension { - return { - width: texts.reduce((acc, cur) => Math.max(cur.length, acc), 0) * fontSize, - height: fontSize, - }; - } -} - -export class TextDimensionCalculatorWithFont implements ITextDimensionCalculator { - private container: HTMLSpanElement | null = null; - private hiddenElementId = 'mermaid-text-dimension-calculator'; - constructor(fontFamily?: string) { - if (document) { - let parentContainer = document.getElementById(this.hiddenElementId); - if (!parentContainer) { - parentContainer = document.createElement('div'); - parentContainer.id = this.hiddenElementId; - parentContainer.style.position = 'absolute'; - parentContainer.style.top = '-100px'; - parentContainer.style.left = '0px'; - parentContainer.style.visibility = 'hidden'; - document.body.append(parentContainer); - } - const fontClassName = `font-${fontFamily}`; - const prevContainerAvailable = parentContainer.getElementsByClassName(fontClassName); - if (prevContainerAvailable.length > 0) { - this.container = prevContainerAvailable.item(0) as HTMLSpanElement; - } else { - this.container = document.createElement('div'); - this.container.className = fontClassName; - if (fontFamily) { - this.container.style.fontFamily = fontFamily; - } - parentContainer.append(this.container); - } - } - } - getDimension(texts: string[], fontSize: number): Dimension { - if (!this.container) { +export class TextDimensionCalculatorWithFont implements TextDimensionCalculator { + constructor(private parentGroup: SVGGType) {} + getMaxDimension(texts: string[], fontSize: number): Dimension { + if (!this.parentGroup) { return { width: texts.reduce((acc, cur) => Math.max(cur.length, acc), 0) * fontSize, height: fontSize, @@ -55,14 +21,17 @@ export class TextDimensionCalculatorWithFont implements ITextDimensionCalculator height: 0, }; - this.container.style.fontSize = `${fontSize}px`; + const elem = this.parentGroup + .append('g') + .attr('visibility', 'hidden') + .attr('font-size', fontSize); for (const t of texts) { - this.container.innerHTML = t; - const bbox = this.container.getBoundingClientRect(); + const bbox = computeDimensionOfText(elem, 1, t); dimension.width = Math.max(dimension.width, bbox.width); dimension.height = Math.max(dimension.height, bbox.height); } + elem.remove(); return dimension; } } diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts index c224c8ebe2..6b3ec3c108 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts @@ -1,3 +1,4 @@ +import { SVGGType } from '../../xychartDb.js'; import { BoundingRect, ChartComponent, @@ -9,7 +10,7 @@ import { XYChartConfig, } from '../Interfaces.js'; import { - ITextDimensionCalculator, + TextDimensionCalculator, TextDimensionCalculatorWithFont, } from '../TextDimensionCalculator.js'; @@ -17,7 +18,7 @@ export class ChartTitle implements ChartComponent { private boundingRect: BoundingRect; private showChartTitle: boolean; constructor( - private textDimensionCalculator: ITextDimensionCalculator, + private textDimensionCalculator: TextDimensionCalculator, private chartConfig: XYChartConfig, private chartData: XYChartData, private chartThemeConfig: XYChartThemeConfig @@ -35,7 +36,7 @@ export class ChartTitle implements ChartComponent { this.boundingRect.y = point.y; } calculateSpace(availableSpace: Dimension): Dimension { - const titleDimension = this.textDimensionCalculator.getDimension( + const titleDimension = this.textDimensionCalculator.getMaxDimension( [this.chartData.title], this.chartConfig.titleFontSize ); @@ -82,8 +83,9 @@ export class ChartTitle implements ChartComponent { export function getChartTitleComponent( chartConfig: XYChartConfig, chartData: XYChartData, - chartThemeConfig: XYChartThemeConfig + chartThemeConfig: XYChartThemeConfig, + tmpSVGGElem: SVGGType ): ChartComponent { - const textDimensionCalculator = new TextDimensionCalculatorWithFont(chartConfig.fontFamily); + const textDimensionCalculator = new TextDimensionCalculatorWithFont(tmpSVGGElem); return new ChartTitle(textDimensionCalculator, chartConfig, chartData, chartThemeConfig); } diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BandAxis.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BandAxis.ts index bb826fbb47..e55f819536 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BandAxis.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BandAxis.ts @@ -1,6 +1,6 @@ import { ScaleBand, scaleBand } from 'd3'; import { log } from '../../../../../logger.js'; -import { ITextDimensionCalculator } from '../../TextDimensionCalculator.js'; +import { TextDimensionCalculator } from '../../TextDimensionCalculator.js'; import { BaseAxis } from './BaseAxis.js'; import { XYChartAxisThemeConfig, XYChartAxisConfig } from '../../Interfaces.js'; @@ -13,7 +13,7 @@ export class BandAxis extends BaseAxis { axisThemeConfig: XYChartAxisThemeConfig, categories: string[], title: string, - textDimensionCalculator: ITextDimensionCalculator + textDimensionCalculator: TextDimensionCalculator ) { super(axisConfig, title, textDimensionCalculator, axisThemeConfig); this.categories = categories; diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts index 3041ce13a9..e695600e26 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts @@ -7,10 +7,12 @@ import { XYChartAxisThemeConfig, XYChartAxisConfig, } from '../../Interfaces.js'; -import { ITextDimensionCalculator } from '../../TextDimensionCalculator.js'; -import { AxisPosition, IAxis } from './index.js'; +import { TextDimensionCalculator } from '../../TextDimensionCalculator.js'; +import { AxisPosition, Axis } from './index.js'; -export abstract class BaseAxis implements IAxis { +const BAR_WIDTH_TO_TICK_WIDTH_RATIO = 0.7; + +export abstract class BaseAxis implements Axis { protected boundingRect: BoundingRect = { x: 0, y: 0, width: 0, height: 0 }; protected axisPosition: AxisPosition = 'left'; private range: [number, number]; @@ -22,7 +24,7 @@ export abstract class BaseAxis implements IAxis { constructor( protected axisConfig: XYChartAxisConfig, protected title: string, - protected textDimensionCalculator: ITextDimensionCalculator, + protected textDimensionCalculator: TextDimensionCalculator, protected axisThemeConfig: XYChartAxisThemeConfig ) { this.range = [0, 10]; @@ -58,15 +60,15 @@ export abstract class BaseAxis implements IAxis { } private getLabelDimension(): Dimension { - return this.textDimensionCalculator.getDimension( + return this.textDimensionCalculator.getMaxDimension( this.getTickValues().map((tick) => tick.toString()), this.axisConfig.labelFontSize ); } recalculateOuterPaddingToDrawBar(): void { - if (0.7 * this.getTickDistance() > this.outerPadding * 2) { - this.outerPadding = Math.floor((0.7 * this.getTickDistance()) / 2); + if (BAR_WIDTH_TO_TICK_WIDTH_RATIO * this.getTickDistance() > this.outerPadding * 2) { + this.outerPadding = Math.floor((BAR_WIDTH_TO_TICK_WIDTH_RATIO * this.getTickDistance()) / 2); } this.recalculateScale(); } @@ -88,7 +90,7 @@ export abstract class BaseAxis implements IAxis { availableHeight -= this.axisConfig.tickLength; } if (this.axisConfig.showTitle) { - const spaceRequired = this.textDimensionCalculator.getDimension( + const spaceRequired = this.textDimensionCalculator.getMaxDimension( [this.title], this.axisConfig.labelFontSize ); @@ -120,7 +122,7 @@ export abstract class BaseAxis implements IAxis { availableWidth -= this.axisConfig.tickLength; } if (this.axisConfig.showTitle) { - const spaceRequired = this.textDimensionCalculator.getDimension( + const spaceRequired = this.textDimensionCalculator.getMaxDimension( [this.title], this.axisConfig.labelFontSize ); @@ -270,7 +272,7 @@ export abstract class BaseAxis implements IAxis { if (this.showLabel) { drawableElement.push({ type: 'text', - groupTexts: ['bottom-axis', 'label'], + groupTexts: ['top-axis', 'label'], data: this.getTickValues().map((tick) => ({ text: tick.toString(), x: this.getScaleValue(tick), diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/LinearAxis.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/LinearAxis.ts index dec92f0bf7..f32585a6c7 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/LinearAxis.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/LinearAxis.ts @@ -1,6 +1,6 @@ import { ScaleLinear, scaleLinear } from 'd3'; import { log } from '../../../../../logger.js'; -import { ITextDimensionCalculator } from '../../TextDimensionCalculator.js'; +import { TextDimensionCalculator } from '../../TextDimensionCalculator.js'; import { BaseAxis } from './BaseAxis.js'; import { XYChartAxisThemeConfig, XYChartAxisConfig } from '../../Interfaces.js'; @@ -13,7 +13,7 @@ export class LinearAxis extends BaseAxis { axisThemeConfig: XYChartAxisThemeConfig, domain: [number, number], title: string, - textDimensionCalculator: ITextDimensionCalculator + textDimensionCalculator: TextDimensionCalculator ) { super(axisConfig, title, textDimensionCalculator, axisThemeConfig); this.domain = domain; diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts index 5512e22e48..a40de82377 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts @@ -1,3 +1,4 @@ +import { SVGGType } from '../../../xychartDb.js'; import { AxisDataType, ChartComponent, @@ -11,7 +12,7 @@ import { LinearAxis } from './LinearAxis.js'; export type AxisPosition = 'left' | 'right' | 'top' | 'bottom'; -export interface IAxis extends ChartComponent { +export interface Axis extends ChartComponent { getScaleValue(value: string | number): number; setAxisPosition(axisPosition: AxisPosition): void; getAxisOuterPadding(): number; @@ -24,9 +25,9 @@ export function getAxis( data: AxisDataType, axisConfig: XYChartAxisConfig, axisThemeConfig: XYChartAxisThemeConfig, - fontFamily?: string -): IAxis { - const textDimansionCalculator = new TextDimensionCalculatorWithFont(fontFamily); + tmpSVGGElem: SVGGType +): Axis { + const textDimansionCalculator = new TextDimensionCalculatorWithFont(tmpSVGGElem); if (isBandAxisData(data)) { return new BandAxis( axisConfig, diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts index 09149f2544..20d1af3112 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts @@ -1,12 +1,12 @@ import { BarPlotData, BoundingRect, DrawableElem, XYChartConfig } from '../../Interfaces.js'; -import { IAxis } from '../axis/index.js'; +import { Axis } from '../axis/index.js'; export class BarPlot { constructor( private barData: BarPlotData, private boundingRect: BoundingRect, - private xAxis: IAxis, - private yAxis: IAxis, + private xAxis: Axis, + private yAxis: Axis, private orientation: XYChartConfig['chartOrientation'], private plotIndex: number ) {} diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/LinePlot.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/LinePlot.ts index 4320b76086..fe58b1ef46 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/LinePlot.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/LinePlot.ts @@ -1,12 +1,12 @@ import { line } from 'd3'; import { DrawableElem, LinePlotData, XYChartConfig } from '../../Interfaces.js'; -import { IAxis } from '../axis/index.js'; +import { Axis } from '../axis/index.js'; export class LinePlot { constructor( private plotData: LinePlotData, - private xAxis: IAxis, - private yAxis: IAxis, + private xAxis: Axis, + private yAxis: Axis, private orientation: XYChartConfig['chartOrientation'], private plotIndex: number ) {} diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts index 680d19ece2..e974da0e8a 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts @@ -7,20 +7,20 @@ import { XYChartThemeConfig, XYChartConfig, } from '../../Interfaces.js'; -import { IAxis } from '../axis/index.js'; +import { Axis } from '../axis/index.js'; import { ChartComponent } from '../../Interfaces.js'; import { LinePlot } from './LinePlot.js'; import { PlotBorder } from './PlotBorder.js'; import { BarPlot } from './BarPlot.js'; -export interface IPlot extends ChartComponent { - setAxes(xAxis: IAxis, yAxis: IAxis): void; +export interface Plot extends ChartComponent { + setAxes(xAxis: Axis, yAxis: Axis): void; } -export class Plot implements IPlot { +export class Plot implements Plot { private boundingRect: BoundingRect; - private xAxis?: IAxis; - private yAxis?: IAxis; + private xAxis?: Axis; + private yAxis?: Axis; constructor( private chartConfig: XYChartConfig, @@ -34,7 +34,7 @@ export class Plot implements IPlot { height: 0, }; } - setAxes(xAxis: IAxis, yAxis: IAxis) { + setAxes(xAxis: Axis, yAxis: Axis) { this.xAxis = xAxis; this.yAxis = yAxis; } @@ -99,6 +99,6 @@ export function getPlotComponent( chartConfig: XYChartConfig, chartData: XYChartData, chartThemeConfig: XYChartThemeConfig -): IPlot { +): Plot { return new Plot(chartConfig, chartData, chartThemeConfig); } diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts index ce5bc4e775..2b308be2b0 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts @@ -1,4 +1,5 @@ import { log } from '../../../logger.js'; +import { SVGGType } from '../xychartDb.js'; import { DrawableElem, XYChartData, XYChartConfig, XYChartThemeConfig } from './Interfaces.js'; import { Orchestrator } from './Orchestrator.js'; @@ -6,12 +7,13 @@ export class XYChartBuilder { static build( config: XYChartConfig, chartData: XYChartData, - chartThemeConfig: XYChartThemeConfig + chartThemeConfig: XYChartThemeConfig, + tmpSVGGElem: SVGGType ): DrawableElem[] { log.trace(`Build start with Config: ${JSON.stringify(config, null, 2)}`); log.trace(`Build start with ChartData: ${JSON.stringify(chartData, null, 2)}`); log.trace(`Build start with ChartThemeConfig: ${JSON.stringify(chartThemeConfig, null, 2)}`); - const orchestrator = new Orchestrator(config, chartData, chartThemeConfig); + const orchestrator = new Orchestrator(config, chartData, chartThemeConfig, tmpSVGGElem); return orchestrator.getDrawableElement(); } } diff --git a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison index 743647df7d..7055327276 100644 --- a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison +++ b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison @@ -15,9 +15,9 @@ %s data %s data_inner %% -\%\%\{ { this.begin('open_directive'); return 'open_directive'; } -<open_directive>((?:(?!\}\%\%)[^:.])*) { this.begin('type_directive'); return 'type_directive'; } -<type_directive>":" { this.popState(); this.begin('arg_directive'); return ':'; } +\%\%\{ { this.pushState('open_directive'); return 'open_directive'; } +<open_directive>((?:(?!\}\%\%)[^:.])*) { this.pushState('type_directive'); return 'type_directive'; } +<type_directive>":" { this.popState(); this.pushState('arg_directive'); return ':'; } <type_directive,arg_directive>\}\%\% { this.popState(); this.popState(); return 'close_directive'; } <arg_directive>((?:(?!\}\%\%).|\n)*) return 'arg_directive'; \%\%(?!\{)[^\n]* /* skip comments */ @@ -27,41 +27,39 @@ [\n\r]+ return 'NEWLINE'; \%\%[^\n]* /* do nothing */ -title { this.begin("title"); return 'title'; } -<title>(?!\n|;|#)*[^\n]* { this.popState(); return "title_value"; } +"title" { return 'title'; } - -accTitle\s*":"\s* { this.begin("acc_title");return 'acc_title'; } +"accTitle"\s*":"\s* { this.pushState("acc_title");return 'acc_title'; } <acc_title>(?!\n|;|#)*[^\n]* { this.popState(); return "acc_title_value"; } -accDescr\s*":"\s* { this.begin("acc_descr");return 'acc_descr'; } +"accDescr"\s*":"\s* { this.pushState("acc_descr");return 'acc_descr'; } <acc_descr>(?!\n|;|#)*[^\n]* { this.popState(); return "acc_descr_value"; } -accDescr\s*"{"\s* { this.begin("acc_descr_multiline");} +"accDescr"\s*"{"\s* { this.pushState("acc_descr_multiline");} <acc_descr_multiline>[\}] { this.popState(); } <acc_descr_multiline>[^\}]* { return "acc_descr_multiline_value"; } -"xychart-beta" {return 'XYCHART';} +"xychart-beta" {return 'XYCHART';} ("vertical"|"horizontal") {return 'CHART_ORIENTATION'} -"x-axis" { this.begin("axis_data"); return "X_AXIS"; } -"y-axis" { this.begin("axis_data"); return "Y_AXIS"; } +"x-axis" { this.pushState("axis_data"); return "X_AXIS"; } +"y-axis" { this.pushState("axis_data"); return "Y_AXIS"; } <axis_data>[\[] { this.popState(); return 'SQUARE_BRACES_START'; } -<axis_data>[+-]?\d+(?:\.\d+)? { return 'NUMBER_WITH_DECIMAL'; } +<axis_data>[+-]?(?:\d+(?:\.\d+)?|\.\d+) { return 'NUMBER_WITH_DECIMAL'; } <axis_data>"-->" { return 'ARROW_DELIMITER'; } -"line" { this.begin("data"); return 'LINE'; } -"bar" { this.begin("data"); return 'BAR'; } -<data>[\[] { this.popState(); this.begin("data_inner"); return 'SQUARE_BRACES_START'; } -<data_inner>[+-]?\d+(?:\.\d+)? { return 'NUMBER_WITH_DECIMAL';} +"line" { this.pushState("data"); return 'LINE'; } +"bar" { this.pushState("data"); return 'BAR'; } +<data>[\[] { this.pushState("data_inner"); return 'SQUARE_BRACES_START'; } +<data_inner>[+-]?(?:\d+(?:\.\d+)?|\.\d+) { return 'NUMBER_WITH_DECIMAL';} <data_inner>[\]] { this.popState(); return 'SQUARE_BRACES_END'; } -["][`] { this.begin("md_string");} +["][`] { this.pushState("md_string");} <md_string>[^`"]+ { return "MD_STR";} <md_string>[`]["] { this.popState();} -["] this.begin("string"); +["] this.pushState("string"); <string>["] this.popState(); <string>[^"]* return "STR"; @@ -72,7 +70,6 @@ accDescr\s*"{"\s* { this.begin("acc_descr_multiline");} ":" return 'COLON'; \+ return 'PLUS'; "," return 'COMMA'; -"=" return 'EQUALS'; \= return 'EQUALS'; "*" return 'MULT'; \# return 'BRKT'; @@ -81,9 +78,8 @@ accDescr\s*"{"\s* { this.begin("acc_descr_multiline");} "&" return 'AMP'; \- return 'MINUS'; [0-9]+ return 'NUM'; -\s /* skip */ +\s+ /* skip */ ";" return 'SEMI'; -[!"#$%&'*+,-.`?\\_/] return 'PUNCTUATION'; <<EOF>> return 'EOF'; /lex @@ -96,61 +92,79 @@ start : eol start | directive start | XYCHART chartConfig start - | XYCHART start + | XYCHART start | document - ; + ; chartConfig - : CHART_ORIENTATION { yy.setOrientation($1); } + : CHART_ORIENTATION { yy.setOrientation($1); } ; document - : /* empty */ - | document statement - ; - -line - : statement - ; + : /* empty */ + | document statement + ; statement : statement eol - | title title_value { yy.setDiagramTitle($title_value.trim()); } + | title text { yy.setDiagramTitle($text.text.trim()); } | X_AXIS parseXAxis | Y_AXIS parseYAxis - | LINE parseLineData { yy.setLineData({text: '', type: 'text'}, $parseLineData); } - | LINE text parseLineData { yy.setLineData($text, $parseLineData); } - | BAR parseBarData { yy.setBarData({text: '', type: 'text'}, $parseBarData); } - | BAR text parseBarData { yy.setBarData($text, $parseBarData); } - ; + | LINE plotData { yy.setLineData({text: '', type: 'text'}, $plotData); } + | LINE text plotData { yy.setLineData($text, $plotData); } + | BAR plotData { yy.setBarData({text: '', type: 'text'}, $plotData); } + | BAR text plotData { yy.setBarData($text, $plotData); } + ; -parseLineData - : SQUARE_BRACES_START NUMBER_WITH_DECIMAL parseLineData {$parseLineData.unshift(Number($NUMBER_WITH_DECIMAL)); $$ = $parseLineData} - | COMMA NUMBER_WITH_DECIMAL parseLineData {$parseLineData.unshift(Number($NUMBER_WITH_DECIMAL)); $$ = $parseLineData;} - | SQUARE_BRACES_END {$$ = []} +plotData + : SQUARE_BRACES_START commaSeperateNumber SQUARE_BRACES_END { $$ = $commaSeperateNumber } ; -parseBarData - : SQUARE_BRACES_START NUMBER_WITH_DECIMAL parseBarData {$parseBarData.unshift(Number($NUMBER_WITH_DECIMAL)); $$ = $parseBarData} - | COMMA NUMBER_WITH_DECIMAL parseBarData {$parseBarData.unshift(Number($NUMBER_WITH_DECIMAL)); $$ = $parseBarData;} - | SQUARE_BRACES_END {$$ = []} +commaSeperateNumber + : NUMBER_WITH_DECIMAL commaSeperateNumberValues { + $commaSeperateNumberValues = $commaSeperateNumberValues || []; + $commaSeperateNumberValues.unshift(Number($NUMBER_WITH_DECIMAL)); + $$ = $commaSeperateNumberValues + } ; +commaSeperateNumberValues + : COMMA NUMBER_WITH_DECIMAL commaSeperateNumberValues { + $commaSeperateNumberValues = $commaSeperateNumberValues || []; + $commaSeperateNumberValues.unshift(Number($NUMBER_WITH_DECIMAL)); + $$ = $commaSeperateNumberValues + } + |; + parseXAxis : text {yy.setXAxisTitle($text);} - | text xAxisBandData {yy.setXAxisTitle($text); yy.setXAxisBand($xAxisBandData);} - | text NUMBER_WITH_DECIMAL ARROW_DELIMITER NUMBER_WITH_DECIMAL {yy.setXAxisTitle($text); yy.setXAxisRangeData(Number($2), Number($4));} + | text bandData {yy.setXAxisTitle($text); yy.setXAxisBand($bandData);} + | text NUMBER_WITH_DECIMAL ARROW_DELIMITER NUMBER_WITH_DECIMAL {yy.setXAxisTitle($text); yy.setXAxisRangeData(Number($NUMBER_WITH_DECIMAL1), Number($NUMBER_WITH_DECIMAL2));} + ; + +bandData + : SQUARE_BRACES_START commaSeperateText SQUARE_BRACES_END {$$ = $commaSeperateText} ; -xAxisBandData - : SQUARE_BRACES_START text xAxisBandData {$xAxisBandData.unshift($text); $$ = $xAxisBandData} - | COMMA text xAxisBandData {$xAxisBandData.unshift($text); $$ = $xAxisBandData;} - | SQUARE_BRACES_END {$$ = []} +commaSeperateText + : text commaSeperateTextValues { + $commaSeperateTextValues = $commaSeperateTextValues || []; + $commaSeperateTextValues.unshift($text); + $$ = $commaSeperateTextValues + } ; +commaSeperateTextValues + : COMMA text commaSeperateTextValues { + $commaSeperateTextValues = $commaSeperateTextValues || []; + $commaSeperateTextValues.unshift($text); + $$ = $commaSeperateTextValues + } + |; + parseYAxis : text {yy.setYAxisTitle($text);} - | text NUMBER_WITH_DECIMAL ARROW_DELIMITER NUMBER_WITH_DECIMAL {yy.setYAxisTitle($text); yy.setYAxisRangeData(Number($2), Number($4));} + | text NUMBER_WITH_DECIMAL ARROW_DELIMITER NUMBER_WITH_DECIMAL {yy.setYAxisTitle($text); yy.setYAxisRangeData(Number($NUMBER_WITH_DECIMAL1), Number($NUMBER_WITH_DECIMAL2));} ; directive @@ -180,22 +194,17 @@ closeDirective : close_directive { yy.parseDirective('}%%', 'close_directive', 'xychart'); } ; -text: alphaNum - { $$={text:$alphaNum, type: 'text'};} - | STR - { $$={text: $STR, type: 'text'};} - | MD_STR - { $$={text: $MD_STR, type: 'markdown'};} +text: alphaNum { $$={text:$alphaNum, type: 'text'};} + | STR { $$={text: $STR, type: 'text'};} + | MD_STR { $$={text: $MD_STR, type: 'markdown'};} ; alphaNum - : alphaNumToken - {$$=$alphaNumToken;} - | alphaNum alphaNumToken - {$$=$alphaNum+''+$alphaNumToken;} + : alphaNumToken {$$=$alphaNumToken;} + | alphaNum alphaNumToken {$$=$alphaNum+''+$alphaNumToken;} ; -alphaNumToken : PUNCTUATION | AMP | NUM | ALPHA | PLUS | EQUALS | MULT | DOT | BRKT| UNDERSCORE ; +alphaNumToken : AMP | NUM | ALPHA | PLUS | EQUALS | MULT | DOT | BRKT| MINUS | UNDERSCORE ; %% diff --git a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts index 24c6f2891a..446d225ec8 100644 --- a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts +++ b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts @@ -43,11 +43,16 @@ describe('Testing xychart jison file', () => { expect(parserFnConstructor(str)).not.toThrow(); }); - it('parse title of the chart', () => { - const str = 'xychart-beta \n title This is a title'; + it('parse title of the chart within "', () => { + const str = 'xychart-beta \n title "This is a title"'; expect(parserFnConstructor(str)).not.toThrow(); expect(mockDB.setDiagramTitle).toHaveBeenCalledWith('This is a title'); }); + it('parse title of the chart without "', () => { + const str = 'xychart-beta \n title oneLinertitle'; + expect(parserFnConstructor(str)).not.toThrow(); + expect(mockDB.setDiagramTitle).toHaveBeenCalledWith('oneLinertitle'); + }); it('should be able to parse directive', () => { const str = @@ -63,13 +68,13 @@ describe('Testing xychart jison file', () => { }); it('parse chart orientation', () => { - let str = 'xychart-beta vertical'; + const str = 'xychart-beta vertical'; expect(parserFnConstructor(str)).not.toThrow(); expect(mockDB.setOrientation).toHaveBeenCalledWith('vertical'); + }); - clearMocks(); - - str = 'xychart-beta horizontal '; + it('parse chart orientation with spaces', () => { + let str = 'xychart-beta horizontal '; expect(parserFnConstructor(str)).not.toThrow(); expect(mockDB.setOrientation).toHaveBeenCalledWith('horizontal'); @@ -78,52 +83,66 @@ describe('Testing xychart jison file', () => { }); it('parse x-axis', () => { - let str = 'xychart-beta \nx-axis xAxisName\n'; + const str = 'xychart-beta \nx-axis xAxisName\n'; expect(parserFnConstructor(str)).not.toThrow(); expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName', type: 'text', }); + }); - clearMocks(); - - str = 'xychart-beta \nx-axis xAxisName \n'; + it('parse x-axis with axis name without "', () => { + const str = 'xychart-beta \nx-axis xAxisName \n'; expect(parserFnConstructor(str)).not.toThrow(); expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName', type: 'text', }); + }); - clearMocks(); - - str = 'xychart-beta \n x-axis "xAxisName has space"\n'; + it('parse x-axis with axis name with "', () => { + const str = 'xychart-beta \n x-axis "xAxisName has space"\n'; expect(parserFnConstructor(str)).not.toThrow(); expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName has space', type: 'text', }); + }); - clearMocks(); - - str = 'xychart-beta \n x-axis " xAxisName has space " \n'; + it('parse x-axis with axis name with " with spaces', () => { + const str = 'xychart-beta \n x-axis " xAxisName has space " \n'; expect(parserFnConstructor(str)).not.toThrow(); expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: ' xAxisName has space ', type: 'text', }); + }); - clearMocks(); - str = 'xychart-beta \nx-axis xAxisName 45.5 --> 33 \n'; + it('parse x-axis with axis name and range data', () => { + const str = 'xychart-beta \nx-axis xAxisName 45.5 --> 33 \n'; expect(parserFnConstructor(str)).not.toThrow(); expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName', type: 'text', }); expect(mockDB.setXAxisRangeData).toHaveBeenCalledWith(45.5, 33); + }); + it('parse x-axis throw error for invalid range data', () => { + const str = 'xychart-beta \nx-axis xAxisName aaa --> 33 \n'; + expect(parserFnConstructor(str)).toThrow(); + }); + it('parse x-axis with axis name and range data with only decimal part', () => { + const str = 'xychart-beta \nx-axis xAxisName 45.5 --> .34 \n'; + expect(parserFnConstructor(str)).not.toThrow(); + expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ + text: 'xAxisName', + type: 'text', + }); + expect(mockDB.setXAxisRangeData).toHaveBeenCalledWith(45.5, 0.34); + }); - clearMocks(); - - str = 'xychart-beta \nx-axis xAxisName [ "cat1" , cat2a ] \n '; + it('parse x-axis with axis name and category data', () => { + const str = 'xychart-beta \nx-axis xAxisName [ "cat1" , cat2a ] \n '; expect(parserFnConstructor(str)).not.toThrow(); expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName', @@ -136,9 +155,17 @@ describe('Testing xychart jison file', () => { }, { text: 'cat2a', type: 'text' }, ]); - clearMocks(); + }); - str = `xychart-beta \n x-axis "this is x axis" [category1, "category 2", category3]\n`; + it('parse x-axis throw error if unbalanced bracket', () => { + let str = 'xychart-beta \nx-axis xAxisName [ "cat1" [ cat2a ] \n '; + expect(parserFnConstructor(str)).toThrow(); + str = 'xychart-beta \nx-axis xAxisName [ "cat1" , cat2a ] ] \n '; + expect(parserFnConstructor(str)).toThrow(); + }); + + it('parse x-axis complete variant 1', () => { + const str = `xychart-beta \n x-axis "this is x axis" [category1, "category 2", category3]\n`; expect(parserFnConstructor(str)).not.toThrow(); expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'this is x axis', type: 'text' }); expect(mockDB.setXAxisBand).toHaveBeenCalledWith([ @@ -146,9 +173,11 @@ describe('Testing xychart jison file', () => { { text: 'category 2', type: 'text' }, { text: 'category3', type: 'text' }, ]); - clearMocks(); + }); - str = 'xychart-beta \nx-axis xAxisName [ "cat1 with space" , cat2 , cat3] \n '; + it('parse x-axis complete variant 2', () => { + const str = + 'xychart-beta \nx-axis xAxisName [ "cat1 with space" , cat2 , cat3] \n '; expect(parserFnConstructor(str)).not.toThrow(); expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName', type: 'text' }); expect(mockDB.setXAxisBand).toHaveBeenCalledWith([ @@ -156,9 +185,11 @@ describe('Testing xychart jison file', () => { { text: 'cat2', type: 'text' }, { text: 'cat3', type: 'text' }, ]); - clearMocks(); + }); - str = 'xychart-beta \nx-axis xAxisName [ "cat1 with space" , cat2 asdf , cat3] \n '; + it('parse x-axis complete variant 3', () => { + const str = + 'xychart-beta \nx-axis xAxisName [ "cat1 with space" , cat2 asdf , cat3] \n '; expect(parserFnConstructor(str)).not.toThrow(); expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName', type: 'text' }); expect(mockDB.setXAxisBand).toHaveBeenCalledWith([ @@ -167,77 +198,61 @@ describe('Testing xychart jison file', () => { { text: 'cat3', type: 'text' }, ]); }); - it('parse y-axis', () => { - let str = 'xychart-beta \ny-axis yAxisName\n'; + + it('parse y-axis with axis name', () => { + const str = 'xychart-beta \ny-axis yAxisName\n'; expect(parserFnConstructor(str)).not.toThrow(); expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' }); - - clearMocks(); - - str = 'xychart-beta \ny-axis yAxisName \n'; + }); + it('parse y-axis with axis name with spaces', () => { + const str = 'xychart-beta \ny-axis yAxisName \n'; expect(parserFnConstructor(str)).not.toThrow(); expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' }); - - clearMocks(); - - str = 'xychart-beta \n y-axis "yAxisName has space"\n'; + }); + it('parse y-axis with axis name with "', () => { + const str = 'xychart-beta \n y-axis "yAxisName has space"\n'; expect(parserFnConstructor(str)).not.toThrow(); expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName has space', type: 'text', }); - - clearMocks(); - - str = 'xychart-beta \n y-axis " yAxisName has space " \n'; + }); + it('parse y-axis with axis name with " and spaces', () => { + const str = 'xychart-beta \n y-axis " yAxisName has space " \n'; expect(parserFnConstructor(str)).not.toThrow(); expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: ' yAxisName has space ', type: 'text', }); - - clearMocks(); - str = 'xychart-beta \ny-axis yAxisName 45.5 --> 33 \n'; + }); + it('parse y-axis with axis name with range data', () => { + const str = 'xychart-beta \ny-axis yAxisName 45.5 --> 33 \n'; expect(parserFnConstructor(str)).not.toThrow(); expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' }); expect(mockDB.setYAxisRangeData).toHaveBeenCalledWith(45.5, 33); - - clearMocks(); - - str = 'xychart-beta \ny-axis yAxisName [ 45.3, 33 ] \n'; - expect(parserFnConstructor(str)).toThrow(); - - clearMocks(); - - str = 'xychart-beta \ny-axis yAxisName\n'; + }); + it('parse y-axis with axis name with range data with only decimal part', () => { + const str = 'xychart-beta \ny-axis yAxisName 45.5 --> .33 \n'; expect(parserFnConstructor(str)).not.toThrow(); expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' }); + expect(mockDB.setYAxisRangeData).toHaveBeenCalledWith(45.5, 0.33); }); - it('parse both axis', () => { - let str = 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n'; + it('parse y-axis throw error for invalid number in range data', () => { + const str = 'xychart-beta \ny-axis yAxisName 45.5 --> abc \n'; + expect(parserFnConstructor(str)).toThrow(); + }); + it('parse y-axis throws error if range data is passed', () => { + const str = 'xychart-beta \ny-axis yAxisName [ 45.3, 33 ] \n'; + expect(parserFnConstructor(str)).toThrow(); + }); + it('parse both axis at once', () => { + const str = 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n'; expect(parserFnConstructor(str)).not.toThrow(); expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName', type: 'text' }); expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' }); - - clearMocks(); - - str = 'xychart-beta \nx-axis xAxisName\n'; - expect(parserFnConstructor(str)).not.toThrow(); - expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ - text: 'xAxisName', - type: 'text', - }); - - clearMocks(); - - str = 'xychart-beta \ny-axis yAxisName'; - expect(parserFnConstructor(str)).not.toThrow(); - expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' }); - - clearMocks(); }); it('parse line Data', () => { - let str = 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n line lineTitle [23, 45, 56.6]'; + const str = 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n line lineTitle [23, 45, 56.6]'; expect(parserFnConstructor(str)).not.toThrow(); expect(mockDB.setLineData).toHaveBeenCalledWith( { text: 'lineTitle', type: 'text' }, @@ -245,10 +260,9 @@ describe('Testing xychart jison file', () => { ); expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName', type: 'text' }); expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' }); - - clearMocks(); - - str = + }); + it('parse line Data with spaces and +,- symbols', () => { + const str = 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n line "lineTitle with space" [ +23 , -45 , 56.6 ] '; expect(parserFnConstructor(str)).not.toThrow(); expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' }); @@ -257,32 +271,58 @@ describe('Testing xychart jison file', () => { { text: 'lineTitle with space', type: 'text' }, [23, -45, 56.6] ); - - // set line data without title - str = 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n line [ +23 , -45 , 56.6 ] '; + }); + it('parse line Data without title', () => { + const str = + 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n line [ +23 , -45 , 56.6 , .33] '; expect(parserFnConstructor(str)).not.toThrow(); expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' }); expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName', type: 'text' }); - expect(mockDB.setLineData).toHaveBeenCalledWith({ text: '', type: 'text' }, [23, -45, 56.6]); - - clearMocks(); + expect(mockDB.setLineData).toHaveBeenCalledWith( + { text: '', type: 'text' }, + [23, -45, 56.6, 0.33] + ); + }); + it('parse line Data throws error unbalanced brackets', () => { + let str = + 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n line "lineTitle with space" [ +23 [ -45 , 56.6 ] '; + expect(parserFnConstructor(str)).toThrow(); str = + 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n line "lineTitle with space" [ +23 , -45 ] 56.6 ] '; + expect(parserFnConstructor(str)).toThrow(); + }); + it('parse line Data throws error if data is not provided', () => { + const str = 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n line "lineTitle with space" '; + expect(parserFnConstructor(str)).toThrow(); + }); + it('parse line Data throws error if data is empty', () => { + const str = + 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n line "lineTitle with space" [ ] '; + expect(parserFnConstructor(str)).toThrow(); + }); + it('parse line Data throws error if , is not in proper', () => { + const str = + 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n line "lineTitle with space" [ +23 , , -45 , 56.6 ] '; + expect(parserFnConstructor(str)).toThrow(); + }); + it('parse line Data throws error if not number', () => { + const str = 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n line "lineTitle with space" [ +23 , -4aa5 , 56.6 ] '; expect(parserFnConstructor(str)).toThrow(); }); it('parse bar Data', () => { - let str = 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n bar barTitle [23, 45, 56.6]'; + const str = + 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n bar barTitle [23, 45, 56.6, .22]'; expect(parserFnConstructor(str)).not.toThrow(); expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' }); expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName', type: 'text' }); expect(mockDB.setBarData).toHaveBeenCalledWith( { text: 'barTitle', type: 'text' }, - [23, 45, 56.6] + [23, 45, 56.6, 0.22] ); - - clearMocks(); - - str = + }); + it('parse bar Data spaces and +,- symbol', () => { + const str = 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n bar "barTitle with space" [ +23 , -45 , 56.6 ] '; expect(parserFnConstructor(str)).not.toThrow(); expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' }); @@ -291,22 +331,45 @@ describe('Testing xychart jison file', () => { { text: 'barTitle with space', type: 'text' }, [23, -45, 56.6] ); - clearMocks(); - - // set bar data without title - str = 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n bar [ +23 , -45 , 56.6 ] '; + }); + it('parse bar Data without plot title', () => { + const str = + 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n bar [ +23 , -45 , 56.6 ] '; expect(parserFnConstructor(str)).not.toThrow(); expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' }); expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName', type: 'text' }); expect(mockDB.setBarData).toHaveBeenCalledWith({ text: '', type: 'text' }, [23, -45, 56.6]); clearMocks(); - + }); + it('parse bar should throw for unbalanced brackets', () => { + let str = + 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n bar "barTitle with space" [ +23 [ -45 , 56.6 ] '; + expect(parserFnConstructor(str)).toThrow(); str = + 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n bar "barTitle with space" [ +23 , -45 ] 56.6 ] '; + expect(parserFnConstructor(str)).toThrow(); + }); + it('parse bar should throw error if data is not provided', () => { + const str = 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n bar "barTitle with space" '; + expect(parserFnConstructor(str)).toThrow(); + }); + it('parse bar should throw error if data is empty', () => { + const str = + 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n bar "barTitle with space" [ ] '; + expect(parserFnConstructor(str)).toThrow(); + }); + it('parse bar should throw error if comma is not proper', () => { + const str = + 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n bar "barTitle with space" [ +23 , , -45 , 56.6 ] '; + expect(parserFnConstructor(str)).toThrow(); + }); + it('parse bar should throw error if number is not passed', () => { + const str = 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n bar "barTitle with space" [ +23 , -4aa5 , 56.6 ] '; expect(parserFnConstructor(str)).toThrow(); }); - it('parse multiple bar and line', () => { - let str = + it('parse multiple bar and line varient 1', () => { + const str = 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n bar barTitle1 [23, 45, 56.6] \n line lineTitle1 [11, 45.5, 67, 23] \n bar barTitle2 [13, 42, 56.89] \n line lineTitle2 [45, 99, 012]'; expect(parserFnConstructor(str)).not.toThrow(); expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' }); @@ -327,9 +390,9 @@ describe('Testing xychart jison file', () => { { text: 'lineTitle2', type: 'text' }, [45, 99, 12] ); - clearMocks(); - - str = ` + }); + it('parse multiple bar and line varient 2', () => { + const str = ` xychart-beta horizontal title Basic xychart x-axis "this is x axis" [category1, "category 2", category3] diff --git a/packages/mermaid/src/diagrams/xychart/xychartDb.ts b/packages/mermaid/src/diagrams/xychart/xychartDb.ts index 6023898ec2..2a768777f0 100644 --- a/packages/mermaid/src/diagrams/xychart/xychartDb.ts +++ b/packages/mermaid/src/diagrams/xychart/xychartDb.ts @@ -1,5 +1,6 @@ // @ts-ignore: TODO Fix ts errors import { adjust, channel } from 'khroma'; +import { Selection } from 'd3-selection'; import mermaidAPI from '../../mermaidAPI.js'; import * as configApi from '../../config.js'; import defaultConfig from '../../defaultConfig.js'; @@ -25,12 +26,30 @@ import { } from './chartBuilder/Interfaces.js'; import { getThemeVariables } from '../../themes/theme-default.js'; +export type SVGGType = Selection<SVGGElement, unknown, HTMLElement, any>; + const defaultThemeVariables = getThemeVariables(); const config = configApi.getConfig(); let plotIndex = 0; +let tmpSVGGElem: SVGGType; + +let xyChartConfig: XYChartConfig = getChartDefaultConfig(); +let xyChartThemeConfig: XYChartThemeConfig = getChartDefaultThemeConfig(); +let xyChartData: XYChartData = getChartDefalutData(); +let plotColorPalette = Array.isArray(xyChartThemeConfig.plotBaseColor) + ? xyChartThemeConfig.plotBaseColor + : plotColorPaletteGenerator(xyChartThemeConfig.plotBaseColor); +let hasSetXAxis = false; +let hasSetYAxis = false; + +interface NormalTextType { + type: 'text'; + text: string; +} + function plotColorPaletteGenerator(baseColor: string, noOfColorNeeded = 15): string[] { const colors = []; const MAX_HUE_VALUE = 360; @@ -110,20 +129,6 @@ function getChartDefalutData(): XYChartData { }; } -let xyChartConfig: XYChartConfig = getChartDefaultConfig(); -let xyChartThemeConfig: XYChartThemeConfig = getChartDefaultThemeConfig(); -let xyChartData: XYChartData = getChartDefalutData(); -let plotColorPalette = Array.isArray(xyChartThemeConfig.plotBaseColor) - ? xyChartThemeConfig.plotBaseColor - : plotColorPaletteGenerator(xyChartThemeConfig.plotBaseColor); -let hasSetXAxis = false; -let hasSetYAxis = false; - -interface NormalTextType { - type: 'text'; - text: string; -} - function textSanitizer(text: string) { return sanitizeText(text.trim(), config); } @@ -133,6 +138,9 @@ function parseDirective(statement: string, context: string, type: string) { mermaidAPI.parseDirective(this, statement, context, type); } +function setTmpSVGG(SVGG: SVGGType) { + tmpSVGGElem = SVGG; +} function setOrientation(oriantation: string) { if (oriantation === 'horizontal') { xyChartConfig.chartOrientation = 'horizontal'; @@ -177,7 +185,7 @@ function setYAxisRangeFromPlotData(data: number[]) { }; } -function transformDataWithOutCategory(data: number[]): SimplePlotDataType { +function transformDataWithoutCategory(data: number[]): SimplePlotDataType { let retData: SimplePlotDataType = []; if (data.length === 0) { return retData; @@ -214,7 +222,7 @@ function getPlotColorFromPalette(plotIndex: number): string { } function setLineData(title: NormalTextType, data: number[]) { - const plotData = transformDataWithOutCategory(data); + const plotData = transformDataWithoutCategory(data); xyChartData.plots.push({ type: 'line', strokeFill: getPlotColorFromPalette(plotIndex), @@ -225,7 +233,7 @@ function setLineData(title: NormalTextType, data: number[]) { } function setBarData(title: NormalTextType, data: number[]) { - const plotData = transformDataWithOutCategory(data); + const plotData = transformDataWithoutCategory(data); xyChartData.plots.push({ type: 'bar', fill: getPlotColorFromPalette(plotIndex), @@ -239,7 +247,7 @@ function getDrawableElem(): DrawableElem[] { throw Error('No Plot to render, please provide a plot with some data'); } xyChartData.title = getDiagramTitle(); - return XYChartBuilder.build(xyChartConfig, xyChartData, xyChartThemeConfig); + return XYChartBuilder.build(xyChartConfig, xyChartData, xyChartThemeConfig, tmpSVGGElem); } function setHeight(height: number) { @@ -283,4 +291,5 @@ export default { setYAxisRangeData, setLineData, setBarData, + setTmpSVGG, }; diff --git a/packages/mermaid/src/diagrams/xychart/xychartDiagram.ts b/packages/mermaid/src/diagrams/xychart/xychartDiagram.ts index 590ceed289..09bd51c2a4 100644 --- a/packages/mermaid/src/diagrams/xychart/xychartDiagram.ts +++ b/packages/mermaid/src/diagrams/xychart/xychartDiagram.ts @@ -8,5 +8,4 @@ export const diagram: DiagramDefinition = { parser, db, renderer, - styles: () => '', }; diff --git a/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts b/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts index 41d3b3ad52..b987bc7468 100644 --- a/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts +++ b/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts @@ -9,6 +9,7 @@ import { TextHorizontalPos, TextVerticalPos, } from './chartBuilder/Interfaces.js'; +import XYChartDB from './xychartDb.js'; export const draw = (txt: string, id: string, _version: string, diagObj: Diagram) => { function getDominantBaseLine(horizontalPos: TextHorizontalPos) { @@ -46,13 +47,13 @@ export const draw = (txt: string, id: string, _version: string, diagObj: Diagram svg.attr('viewBox', '0 0 ' + width + ' ' + height); - // @ts-ignore: TODO Fix ts errors - diagObj.db.setHeight(height); - // @ts-ignore: TODO Fix ts errors - diagObj.db.setWidth(width); + const db = diagObj.db as typeof XYChartDB; - // @ts-ignore: TODO Fix ts errors - const shapes: DrawableElem[] = diagObj.db.getDrawableElem(); + db.setHeight(height); + db.setWidth(width); + db.setTmpSVGG(svg.append('g').attr('class', 'mermaid-tmp-group')); + + const shapes: DrawableElem[] = db.getDrawableElem(); const groups: Record<string, any> = {}; diff --git a/packages/mermaid/src/rendering-util/createText.js b/packages/mermaid/src/rendering-util/createText.js index 871f3425e2..417ee488cf 100644 --- a/packages/mermaid/src/rendering-util/createText.js +++ b/packages/mermaid/src/rendering-util/createText.js @@ -94,6 +94,22 @@ function computeWidthOfText(parentNode, lineHeight, text) { return textLength; } +/** + * Compute the width of rendered text + * @param {object} parentNode + * @param {number} lineHeight + * @param {string} text + * @returns {{width: number, height: number}} + */ +export function computeDimensionOfText(parentNode, lineHeight, text) { + const testElement = parentNode.append('text'); + const testSpan = createTspan(testElement, 1, lineHeight); + updateTextContentAndStyles(testSpan, [{ content: text, type: 'normal' }]); + const textDimension = testSpan.node().getBoundingClientRect(); + testElement.remove(); + return textDimension; +} + /** * Creates a formatted text element by breaking lines and applying styles based on * the given structuredText. From 2b4c2e4ca9bac31f602324cb1a02a916b26c92b2 Mon Sep 17 00:00:00 2001 From: Subhash Halder <halder.subhash@gmail.com> Date: Sun, 20 Aug 2023 18:22:34 +0530 Subject: [PATCH 027/457] Fixed lint and used selectSvgElement --- packages/mermaid/src/diagrams/xychart/xychartDb.ts | 2 +- .../mermaid/src/diagrams/xychart/xychartRenderer.ts | 13 ++----------- packages/mermaid/src/rendering-util/createText.ts | 9 +-------- 3 files changed, 4 insertions(+), 20 deletions(-) diff --git a/packages/mermaid/src/diagrams/xychart/xychartDb.ts b/packages/mermaid/src/diagrams/xychart/xychartDb.ts index 2a768777f0..abdecfe281 100644 --- a/packages/mermaid/src/diagrams/xychart/xychartDb.ts +++ b/packages/mermaid/src/diagrams/xychart/xychartDb.ts @@ -26,7 +26,7 @@ import { } from './chartBuilder/Interfaces.js'; import { getThemeVariables } from '../../themes/theme-default.js'; -export type SVGGType = Selection<SVGGElement, unknown, HTMLElement, any>; +export type SVGGType = Selection<SVGGElement, unknown, Element | null, unknown>; const defaultThemeVariables = getThemeVariables(); diff --git a/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts b/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts index b987bc7468..6bade9ad2b 100644 --- a/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts +++ b/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts @@ -10,6 +10,7 @@ import { TextVerticalPos, } from './chartBuilder/Interfaces.js'; import XYChartDB from './xychartDb.js'; +import { selectSvgElement } from '../../rendering-util/selectSvgElement.js'; export const draw = (txt: string, id: string, _version: string, diagObj: Diagram) => { function getDominantBaseLine(horizontalPos: TextHorizontalPos) { @@ -23,20 +24,10 @@ export const draw = (txt: string, id: string, _version: string, diagObj: Diagram function getTextTransformation(data: TextElem) { return `translate(${data.x}, ${data.y}) rotate(${data.rotation || 0})`; } - const conf = configApi.getConfig(); log.debug('Rendering xychart chart\n' + txt); - const securityLevel = conf.securityLevel; - // Handle root and Document for when rendering in sandbox mode - let sandboxElement; - if (securityLevel === 'sandbox') { - sandboxElement = select('#i' + id); - } - const root = sandboxElement ? sandboxElement : select('body'); - - const svg = root.select(`[id="${id}"]`); - + const svg = selectSvgElement(id); const group = svg.append('g').attr('class', 'main'); const width = 700; diff --git a/packages/mermaid/src/rendering-util/createText.ts b/packages/mermaid/src/rendering-util/createText.ts index 090b005c33..223fb25ad2 100644 --- a/packages/mermaid/src/rendering-util/createText.ts +++ b/packages/mermaid/src/rendering-util/createText.ts @@ -76,14 +76,7 @@ function computeWidthOfText(parentNode: any, lineHeight: number, line: MarkdownL return textLength; } -/** - * Compute the width of rendered text - * @param {object} parentNode - * @param {number} lineHeight - * @param {string} text - * @returns {{width: number, height: number}} - */ -export function computeDimensionOfText(parentNode, lineHeight, text) { +export function computeDimensionOfText(parentNode: any, lineHeight: number, text: string) { const testElement = parentNode.append('text'); const testSpan = createTspan(testElement, 1, lineHeight); updateTextContentAndStyles(testSpan, [{ content: text, type: 'normal' }]); From 54f2c63db14a2c9559bb088cdcc88c6c1169b20f Mon Sep 17 00:00:00 2001 From: Subhash Halder <halder.subhash@gmail.com> Date: Fri, 1 Sep 2023 20:57:05 +0530 Subject: [PATCH 028/457] Addressed all the new comment on jison --- .../src/diagrams/xychart/parser/xychart.jison | 104 +++++------------- .../xychart/parser/xychart.jison.spec.ts | 15 --- 2 files changed, 26 insertions(+), 93 deletions(-) diff --git a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison index 7055327276..6c5cb92a9d 100644 --- a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison +++ b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison @@ -4,22 +4,14 @@ %x string %x md_string %x title -%x open_directive -%x type_directive -%x arg_directive -%x close_directive %x acc_title %x acc_descr %x acc_descr_multiline %s axis_data +%s axis_band_data %s data %s data_inner %% -\%\%\{ { this.pushState('open_directive'); return 'open_directive'; } -<open_directive>((?:(?!\}\%\%)[^:.])*) { this.pushState('type_directive'); return 'type_directive'; } -<type_directive>":" { this.popState(); this.pushState('arg_directive'); return ':'; } -<type_directive,arg_directive>\}\%\% { this.popState(); this.popState(); return 'close_directive'; } -<arg_directive>((?:(?!\}\%\%).|\n)*) return 'arg_directive'; \%\%(?!\{)[^\n]* /* skip comments */ [^\}]\%\%[^\n]* /* skip comments */ <axis_data>(\r?\n) { this.popState(); return 'NEWLINE'; } @@ -34,38 +26,37 @@ "accDescr"\s*":"\s* { this.pushState("acc_descr");return 'acc_descr'; } <acc_descr>(?!\n|;|#)*[^\n]* { this.popState(); return "acc_descr_value"; } "accDescr"\s*"{"\s* { this.pushState("acc_descr_multiline");} -<acc_descr_multiline>[\}] { this.popState(); } +<acc_descr_multiline>"{" { this.popState(); } <acc_descr_multiline>[^\}]* { return "acc_descr_multiline_value"; } "xychart-beta" {return 'XYCHART';} -("vertical"|"horizontal") {return 'CHART_ORIENTATION'} +(?:"vertical"|"horizontal") {return 'CHART_ORIENTATION'} "x-axis" { this.pushState("axis_data"); return "X_AXIS"; } "y-axis" { this.pushState("axis_data"); return "Y_AXIS"; } -<axis_data>[\[] { this.popState(); return 'SQUARE_BRACES_START'; } -<axis_data>[+-]?(?:\d+(?:\.\d+)?|\.\d+) { return 'NUMBER_WITH_DECIMAL'; } +<axis_data>"[" { this.pushState("axis_band_data"); return 'SQUARE_BRACES_START'; } <axis_data>"-->" { return 'ARROW_DELIMITER'; } "line" { this.pushState("data"); return 'LINE'; } "bar" { this.pushState("data"); return 'BAR'; } -<data>[\[] { this.pushState("data_inner"); return 'SQUARE_BRACES_START'; } -<data_inner>[+-]?(?:\d+(?:\.\d+)?|\.\d+) { return 'NUMBER_WITH_DECIMAL';} -<data_inner>[\]] { this.popState(); return 'SQUARE_BRACES_END'; } +<data>"[" { this.pushState("data_inner"); return 'SQUARE_BRACES_START'; } +<axis_data,data_inner>[+-]?(?:\d+(?:\.\d+)?|\.\d+) { return 'NUMBER_WITH_DECIMAL'; } +<data_inner,axis_band_data>"]" { this.popState(); return 'SQUARE_BRACES_END'; } -["][`] { this.pushState("md_string");} -<md_string>[^`"]+ { return "MD_STR";} -<md_string>[`]["] { this.popState();} +(?:"`) { this.pushState("md_string"); } +<md_string>(?:(?!`\").)+ { return "MD_STR"; } +<md_string>(?:`") { this.popState(); } ["] this.pushState("string"); <string>["] this.popState(); <string>[^"]* return "STR"; -[\[] return 'SQUARE_BRACES_START' -[\]] return 'SQUARE_BRACES_END' +"[" return 'SQUARE_BRACES_START' +"]" return 'SQUARE_BRACES_END' [A-Za-z]+ return 'ALPHA'; ":" return 'COLON'; \+ return 'PLUS'; @@ -90,7 +81,6 @@ start : eol start - | directive start | XYCHART chartConfig start | XYCHART start | document @@ -117,25 +107,14 @@ statement ; plotData - : SQUARE_BRACES_START commaSeperateNumber SQUARE_BRACES_END { $$ = $commaSeperateNumber } + : SQUARE_BRACES_START commaSeparatedNumbers SQUARE_BRACES_END { $$ = $commaSeparatedNumbers } ; -commaSeperateNumber - : NUMBER_WITH_DECIMAL commaSeperateNumberValues { - $commaSeperateNumberValues = $commaSeperateNumberValues || []; - $commaSeperateNumberValues.unshift(Number($NUMBER_WITH_DECIMAL)); - $$ = $commaSeperateNumberValues - } +commaSeparatedNumbers + : NUMBER_WITH_DECIMAL COMMA commaSeparatedNumbers { $$ = [Number($NUMBER_WITH_DECIMAL), ...$commaSeparatedNumbers] } + | NUMBER_WITH_DECIMAL { $$ = [Number($NUMBER_WITH_DECIMAL)] } ; -commaSeperateNumberValues - : COMMA NUMBER_WITH_DECIMAL commaSeperateNumberValues { - $commaSeperateNumberValues = $commaSeperateNumberValues || []; - $commaSeperateNumberValues.unshift(Number($NUMBER_WITH_DECIMAL)); - $$ = $commaSeperateNumberValues - } - |; - parseXAxis : text {yy.setXAxisTitle($text);} | text bandData {yy.setXAxisTitle($text); yy.setXAxisBand($bandData);} @@ -143,66 +122,35 @@ parseXAxis ; bandData - : SQUARE_BRACES_START commaSeperateText SQUARE_BRACES_END {$$ = $commaSeperateText} + : SQUARE_BRACES_START commaSeparatedTexts SQUARE_BRACES_END {$$ = $commaSeparatedTexts} ; -commaSeperateText - : text commaSeperateTextValues { - $commaSeperateTextValues = $commaSeperateTextValues || []; - $commaSeperateTextValues.unshift($text); - $$ = $commaSeperateTextValues - } +commaSeparatedTexts + : text COMMA commaSeparatedTexts { $$ = [$text, ...$commaSeparatedTexts] } + | text { $$ = [$text] } ; -commaSeperateTextValues - : COMMA text commaSeperateTextValues { - $commaSeperateTextValues = $commaSeperateTextValues || []; - $commaSeperateTextValues.unshift($text); - $$ = $commaSeperateTextValues - } - |; - parseYAxis : text {yy.setYAxisTitle($text);} | text NUMBER_WITH_DECIMAL ARROW_DELIMITER NUMBER_WITH_DECIMAL {yy.setYAxisTitle($text); yy.setYAxisRangeData(Number($NUMBER_WITH_DECIMAL1), Number($NUMBER_WITH_DECIMAL2));} ; -directive - : openDirective typeDirective closeDirective - | openDirective typeDirective ':' argDirective closeDirective - ; - eol : NEWLINE | SEMI | EOF ; -openDirective - : open_directive { yy.parseDirective('%%{', 'open_directive'); } - ; - -typeDirective - : type_directive { yy.parseDirective($1, 'type_directive'); } - ; - -argDirective - : arg_directive { $1 = $1.trim().replace(/'/g, '"'); yy.parseDirective($1, 'arg_directive'); } - ; - -closeDirective - : close_directive { yy.parseDirective('}%%', 'close_directive', 'xychart'); } - ; text: alphaNum { $$={text:$alphaNum, type: 'text'};} - | STR { $$={text: $STR, type: 'text'};} - | MD_STR { $$={text: $MD_STR, type: 'markdown'};} - ; + | STR { $$={text: $STR, type: 'text'};} + | MD_STR { $$={text: $MD_STR, type: 'markdown'};} + ; alphaNum - : alphaNumToken {$$=$alphaNumToken;} - | alphaNum alphaNumToken {$$=$alphaNum+''+$alphaNumToken;} - ; + : alphaNumToken {$$=$alphaNumToken;} + | alphaNum alphaNumToken {$$=$alphaNum+''+$alphaNumToken;} + ; alphaNumToken : AMP | NUM | ALPHA | PLUS | EQUALS | MULT | DOT | BRKT| MINUS | UNDERSCORE ; diff --git a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts index 446d225ec8..0515a4e944 100644 --- a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts +++ b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts @@ -9,7 +9,6 @@ const parserFnConstructor = (str: string) => { }; const mockDB: Record<string, Mock<any, any>> = { - parseDirective: vi.fn(), setOrientation: vi.fn(), setDiagramTitle: vi.fn(), setXAxisTitle: vi.fn(), @@ -54,19 +53,6 @@ describe('Testing xychart jison file', () => { expect(mockDB.setDiagramTitle).toHaveBeenCalledWith('oneLinertitle'); }); - it('should be able to parse directive', () => { - const str = - '%%{init: {"xychart": {"chartWidth": 600, "chartHeight": 600} } }%% \n xychart-beta'; - expect(parserFnConstructor(str)).not.toThrow(); - expect(mockDB.parseDirective.mock.calls[0]).toEqual(['%%{', 'open_directive']); - expect(mockDB.parseDirective.mock.calls[1]).toEqual(['init', 'type_directive']); - expect(mockDB.parseDirective.mock.calls[2]).toEqual([ - '{"xychart": {"chartWidth": 600, "chartHeight": 600} }', - 'arg_directive', - ]); - expect(mockDB.parseDirective.mock.calls[3]).toEqual(['}%%', 'close_directive', 'xychart']); - }); - it('parse chart orientation', () => { const str = 'xychart-beta vertical'; expect(parserFnConstructor(str)).not.toThrow(); @@ -339,7 +325,6 @@ describe('Testing xychart jison file', () => { expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' }); expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName', type: 'text' }); expect(mockDB.setBarData).toHaveBeenCalledWith({ text: '', type: 'text' }, [23, -45, 56.6]); - clearMocks(); }); it('parse bar should throw for unbalanced brackets', () => { let str = From b2669aaca9b5854021adec8dfb5a083ff3b24782 Mon Sep 17 00:00:00 2001 From: Subhash Halder <halder.subhash@gmail.com> Date: Fri, 1 Sep 2023 21:27:10 +0530 Subject: [PATCH 029/457] Fixed some space management issue --- demos/xychart.html | 15 ++++++++++++--- .../chartBuilder/components/axis/BaseAxis.ts | 11 ++++++++--- 2 files changed, 20 insertions(+), 6 deletions(-) diff --git a/demos/xychart.html b/demos/xychart.html index ad7bf0944d..a7bd426143 100644 --- a/demos/xychart.html +++ b/demos/xychart.html @@ -54,7 +54,16 @@ <h1>XY Charts demos</h1> title "Basic xychart with many categories" x-axis "this is x axis" [category1, "category 2", category3, category4, category5, category6, category7] y-axis yaxisText 10 --> 150 - bar "sample bat" [52, 96, 35, 10, 87, 34, 67, 99] + bar "sample bar" [52, 96, 35, 10, 87, 34, 67, 99] + </pre> + + <h1>XY Charts demos</h1> + <pre class="mermaid"> + xychart-beta + title "Line chart with many category" + x-axis "this is x axis" [category1, "category 2", category3, category4, category5, category6, category7] + y-axis yaxisText 10 --> 150 + line "sample line" [52, 96, 35, 10, 87, 34, 67, 99] </pre> <h1>XY Charts demos</h1> @@ -63,7 +72,7 @@ <h1>XY Charts demos</h1> title "Basic xychart with many categories with category overlap" x-axis "this is x axis" [category1, "Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.", category3, category4, category5, category6, category7] y-axis yaxisText 10 --> 150 - bar "sample bat" [52, 96, 35, 10, 87, 34, 67, 99] + bar "sample bar" [52, 96, 35, 10, 87, 34, 67, 99] </pre> <hr /> @@ -72,7 +81,7 @@ <h1>XY Charts demos</h1> import mermaid from './mermaid.esm.mjs'; mermaid.initialize({ theme: 'default', - logLevel: 0, + logLevel: 3, securityLevel: 'loose', }); </script> diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts index e695600e26..d076bc0a0e 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts @@ -11,6 +11,7 @@ import { TextDimensionCalculator } from '../../TextDimensionCalculator.js'; import { AxisPosition, Axis } from './index.js'; const BAR_WIDTH_TO_TICK_WIDTH_RATIO = 0.7; +const MAX_OUTER_PADDING_PERCENT_FOR_WRT_LABEL = 0.2; export abstract class BaseAxis implements Axis { protected boundingRect: BoundingRect = { x: 0, y: 0, width: 0, height: 0 }; @@ -52,7 +53,8 @@ export abstract class BaseAxis implements Axis { abstract getTickValues(): Array<string | number>; getTickDistance(): number { - return Math.abs(this.range[0] - this.range[1]) / this.getTickValues().length; + const range = this.getRange(); + return Math.abs(range[0] - range[1]) / this.getTickValues().length; } getAxisOuterPadding(): number { @@ -77,7 +79,9 @@ export abstract class BaseAxis implements Axis { let availableHeight = availableSpace.height; if (this.axisConfig.showLabel) { const spaceRequired = this.getLabelDimension(); - this.outerPadding = spaceRequired.width / 2; + const maxPadding = MAX_OUTER_PADDING_PERCENT_FOR_WRT_LABEL * availableSpace.width; + this.outerPadding = Math.min(spaceRequired.width / 2, maxPadding); + const heightRequired = spaceRequired.height + this.axisConfig.labelPadding * 2; log.trace('height required for axis label: ', heightRequired); if (heightRequired <= availableHeight) { @@ -109,7 +113,8 @@ export abstract class BaseAxis implements Axis { let availableWidth = availableSpace.width; if (this.axisConfig.showLabel) { const spaceRequired = this.getLabelDimension(); - this.outerPadding = spaceRequired.height / 2; + const maxPadding = MAX_OUTER_PADDING_PERCENT_FOR_WRT_LABEL * availableSpace.height; + this.outerPadding = Math.min(spaceRequired.height / 2, maxPadding); const widthRequired = spaceRequired.width + this.axisConfig.labelPadding * 2; log.trace('width required for axis label: ', widthRequired); if (widthRequired <= availableWidth) { From 7bdf4c3dbb531a4db30d7bdabc991dc283535ce3 Mon Sep 17 00:00:00 2001 From: Subhash Halder <halder.subhash@gmail.com> Date: Sat, 2 Sep 2023 13:03:30 +0530 Subject: [PATCH 030/457] Added themes config to all the themes --- .../xychart/chartBuilder/Interfaces.ts | 3 +- .../mermaid/src/diagrams/xychart/xychartDb.ts | 46 ++++++------------- .../src/diagrams/xychart/xychartRenderer.ts | 19 ++++---- packages/mermaid/src/themes/theme-base.js | 25 ++++++++++ packages/mermaid/src/themes/theme-dark.js | 25 ++++++++++ packages/mermaid/src/themes/theme-default.js | 13 +++++- packages/mermaid/src/themes/theme-forest.js | 25 ++++++++++ packages/mermaid/src/themes/theme-neutral.js | 25 ++++++++++ 8 files changed, 139 insertions(+), 42 deletions(-) diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts index 32cd14d635..2c92470870 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts @@ -5,6 +5,7 @@ export interface XYChartAxisThemeConfig { } export interface XYChartThemeConfig { + backgroundColor: string; titleColor: string; axisLineColor: string; xAxisLableColor: string; @@ -13,7 +14,7 @@ export interface XYChartThemeConfig { yAxisLableColor: string; yAxisTitleColor: string; yAxisTickColor: string; - plotBaseColor: string; + plotColorPalette: string; } export interface ChartComponent { diff --git a/packages/mermaid/src/diagrams/xychart/xychartDb.ts b/packages/mermaid/src/diagrams/xychart/xychartDb.ts index abdecfe281..4553762668 100644 --- a/packages/mermaid/src/diagrams/xychart/xychartDb.ts +++ b/packages/mermaid/src/diagrams/xychart/xychartDb.ts @@ -39,9 +39,7 @@ let tmpSVGGElem: SVGGType; let xyChartConfig: XYChartConfig = getChartDefaultConfig(); let xyChartThemeConfig: XYChartThemeConfig = getChartDefaultThemeConfig(); let xyChartData: XYChartData = getChartDefalutData(); -let plotColorPalette = Array.isArray(xyChartThemeConfig.plotBaseColor) - ? xyChartThemeConfig.plotBaseColor - : plotColorPaletteGenerator(xyChartThemeConfig.plotBaseColor); +let plotColorPalette = xyChartThemeConfig.plotColorPalette; let hasSetXAxis = false; let hasSetYAxis = false; @@ -50,26 +48,11 @@ interface NormalTextType { text: string; } -function plotColorPaletteGenerator(baseColor: string, noOfColorNeeded = 15): string[] { - const colors = []; - const MAX_HUE_VALUE = 360; - const baseHue = channel(baseColor, 'h'); - if (baseHue > MAX_HUE_VALUE / 2) { - const decr = Math.floor(baseHue / noOfColorNeeded); - for (let i = 0; i <= baseHue; i += decr) { - colors.push(adjust(baseColor, { h: -i })); - } - } else { - const incr = Math.floor((MAX_HUE_VALUE - baseHue) / noOfColorNeeded); - for (let i = 0; i <= baseHue; i += incr) { - colors.push(adjust(baseColor, { h: i })); - } - } - return colors; -} - function getChartDefaultThemeConfig(): XYChartThemeConfig { return { + backgroundColor: + config.themeVariables?.xyChart?.backgroundColor || + defaultThemeVariables.xyChart.backgroundColor, titleColor: config.themeVariables?.xyChart?.titleColor || defaultThemeVariables.xyChart.titleColor, axisLineColor: @@ -92,8 +75,9 @@ function getChartDefaultThemeConfig(): XYChartThemeConfig { yAxisTickColor: config.themeVariables?.xyChart?.yAxisTickColor || defaultThemeVariables.xyChart.yAxisTickColor, - plotBaseColor: - config.themeVariables?.xyChart?.plotBaseColor || defaultThemeVariables.xyChart.plotBaseColor, + plotColorPalette: + config.themeVariables?.xyChart?.plotColorPalette || + defaultThemeVariables.xyChart.plotColorPalette, }; } function getChartDefaultConfig(): XYChartConfig { @@ -250,12 +234,12 @@ function getDrawableElem(): DrawableElem[] { return XYChartBuilder.build(xyChartConfig, xyChartData, xyChartThemeConfig, tmpSVGGElem); } -function setHeight(height: number) { - xyChartConfig.height = height; +function getChartThemeConfig() { + return xyChartThemeConfig; } -function setWidth(width: number) { - xyChartConfig.width = width; +function getChartConfig() { + return xyChartConfig; } const clear = function () { @@ -264,16 +248,12 @@ const clear = function () { xyChartConfig = getChartDefaultConfig(); xyChartData = getChartDefalutData(); xyChartThemeConfig = getChartDefaultThemeConfig(); - plotColorPalette = Array.isArray(xyChartThemeConfig.plotBaseColor) - ? xyChartThemeConfig.plotBaseColor - : plotColorPaletteGenerator(xyChartThemeConfig.plotBaseColor); + plotColorPalette = xyChartThemeConfig.plotColorPalette; hasSetXAxis = false; hasSetYAxis = false; }; export default { - setWidth, - setHeight, getDrawableElem, parseDirective, clear, @@ -292,4 +272,6 @@ export default { setLineData, setBarData, setTmpSVGG, + getChartThemeConfig, + getChartConfig, }; diff --git a/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts b/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts index 6bade9ad2b..384cf944b5 100644 --- a/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts +++ b/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts @@ -13,6 +13,9 @@ import XYChartDB from './xychartDb.js'; import { selectSvgElement } from '../../rendering-util/selectSvgElement.js'; export const draw = (txt: string, id: string, _version: string, diagObj: Diagram) => { + const db = diagObj.db as typeof XYChartDB; + const themeConfig = db.getChartThemeConfig(); + const chartConfig = db.getChartConfig(); function getDominantBaseLine(horizontalPos: TextHorizontalPos) { return horizontalPos === 'top' ? 'hanging' : 'middle'; } @@ -29,19 +32,19 @@ export const draw = (txt: string, id: string, _version: string, diagObj: Diagram const svg = selectSvgElement(id); const group = svg.append('g').attr('class', 'main'); - - const width = 700; - const height = 500; + const background = group + .append('rect') + .attr('width', chartConfig.width) + .attr('height', chartConfig.height) + .attr('class', 'background'); // @ts-ignore: TODO Fix ts errors - configureSvgSize(svg, height, width, true); + configureSvgSize(svg, chartConfig.height, chartConfig.width, true); - svg.attr('viewBox', '0 0 ' + width + ' ' + height); + svg.attr('viewBox', '0 0 ' + chartConfig.width + ' ' + chartConfig.height); - const db = diagObj.db as typeof XYChartDB; + background.attr('fill', themeConfig.backgroundColor); - db.setHeight(height); - db.setWidth(width); db.setTmpSVGG(svg.append('g').attr('class', 'mermaid-tmp-group')); const shapes: DrawableElem[] = db.getDrawableElem(); diff --git a/packages/mermaid/src/themes/theme-base.js b/packages/mermaid/src/themes/theme-base.js index ce1700d0b0..90d5b1446f 100644 --- a/packages/mermaid/src/themes/theme-base.js +++ b/packages/mermaid/src/themes/theme-base.js @@ -245,6 +245,31 @@ class Theme { 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, + axisLineColor: this.xyChart?.axisLineColor || this.primaryTextColor, + xAxisTitleColor: this.xyChart?.xAxisTitleColor || this.primaryTextColor, + xAxisLableColor: this.xyChart?.xAxisLableColor || this.primaryTextColor, + xAxisTickColor: this.xyChart?.xAxisTickColor || this.primaryTextColor, + yAxisTitleColor: this.xyChart?.yAxisTitleColor || this.primaryTextColor, + yAxisLableColor: this.xyChart?.yAxisLableColor || this.primaryTextColor, + yAxisTickColor: this.xyChart?.yAxisTickColor || 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; diff --git a/packages/mermaid/src/themes/theme-dark.js b/packages/mermaid/src/themes/theme-dark.js index fd083e5132..301255e0e4 100644 --- a/packages/mermaid/src/themes/theme-dark.js +++ b/packages/mermaid/src/themes/theme-dark.js @@ -251,6 +251,31 @@ class Theme { 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, + axisLineColor: this.xyChart?.axisLineColor || this.primaryTextColor, + xAxisTitleColor: this.xyChart?.xAxisTitleColor || this.primaryTextColor, + xAxisLableColor: this.xyChart?.xAxisLableColor || this.primaryTextColor, + xAxisTickColor: this.xyChart?.xAxisTickColor || this.primaryTextColor, + yAxisTitleColor: this.xyChart?.yAxisTitleColor || this.primaryTextColor, + yAxisLableColor: this.xyChart?.yAxisLableColor || this.primaryTextColor, + yAxisTickColor: this.xyChart?.yAxisTickColor || this.primaryTextColor, + plotColorPalette: this.xyChart?.plotColorPalette || [ + '#3498db', + '#2ecc71', + '#e74c3c', + '#f1c40f', + '#bdc3c7', + '#ffffff', + '#34495e', + '#9b59b6', + '#1abc9c', + '#e67e22', + ], + }; + /* class */ this.classText = this.primaryTextColor; diff --git a/packages/mermaid/src/themes/theme-default.js b/packages/mermaid/src/themes/theme-default.js index c95d44371f..e95755947b 100644 --- a/packages/mermaid/src/themes/theme-default.js +++ b/packages/mermaid/src/themes/theme-default.js @@ -283,7 +283,18 @@ class Theme { yAxisTitleColor: this.xyChart?.yAxisTitleColor || this.primaryTextColor, yAxisLableColor: this.xyChart?.yAxisLableColor || this.primaryTextColor, yAxisTickColor: this.xyChart?.yAxisTickColor || this.primaryTextColor, - plotBaseColor: this.xyChart?.plotBaseColor || darken(this.primaryColor, 25), + plotColorPalette: this.xyChart?.plotColorPalette || [ + '#ECECFF', + '#8493A6', + '#FFC3A0', + '#DCDDE1', + '#B8E994', + '#D1A36F', + '#C3CDE6', + '#FFB6C1', + '#496078', + '#F8F3E3', + ], }; /* requirement-diagram */ diff --git a/packages/mermaid/src/themes/theme-forest.js b/packages/mermaid/src/themes/theme-forest.js index 65797b00c4..3cdcdbdcef 100644 --- a/packages/mermaid/src/themes/theme-forest.js +++ b/packages/mermaid/src/themes/theme-forest.js @@ -240,6 +240,31 @@ class Theme { 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, + axisLineColor: this.xyChart?.axisLineColor || this.primaryTextColor, + xAxisTitleColor: this.xyChart?.xAxisTitleColor || this.primaryTextColor, + xAxisLableColor: this.xyChart?.xAxisLableColor || this.primaryTextColor, + xAxisTickColor: this.xyChart?.xAxisTickColor || this.primaryTextColor, + yAxisTitleColor: this.xyChart?.yAxisTitleColor || this.primaryTextColor, + yAxisLableColor: this.xyChart?.yAxisLableColor || this.primaryTextColor, + yAxisTickColor: this.xyChart?.yAxisTickColor || this.primaryTextColor, + plotColorPalette: this.xyChart?.plotColorPalette || [ + '#CDE498', + '#FF6B6B', + '#A0D2DB', + '#D7BDE2', + '#F0F0F0', + '#FFC3A0', + '#7FD8BE', + '#FF9A8B', + '#FAF3E0', + '#FFF176', + ], + }; + /* requirement-diagram */ this.requirementBackground = this.requirementBackground || this.primaryColor; this.requirementBorderColor = this.requirementBorderColor || this.primaryBorderColor; diff --git a/packages/mermaid/src/themes/theme-neutral.js b/packages/mermaid/src/themes/theme-neutral.js index 963ce031d1..dbde17d98c 100644 --- a/packages/mermaid/src/themes/theme-neutral.js +++ b/packages/mermaid/src/themes/theme-neutral.js @@ -271,6 +271,31 @@ class Theme { 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, + axisLineColor: this.xyChart?.axisLineColor || this.primaryTextColor, + xAxisTitleColor: this.xyChart?.xAxisTitleColor || this.primaryTextColor, + xAxisLableColor: this.xyChart?.xAxisLableColor || this.primaryTextColor, + xAxisTickColor: this.xyChart?.xAxisTickColor || this.primaryTextColor, + yAxisTitleColor: this.xyChart?.yAxisTitleColor || this.primaryTextColor, + yAxisLableColor: this.xyChart?.yAxisLableColor || this.primaryTextColor, + yAxisTickColor: this.xyChart?.yAxisTickColor || this.primaryTextColor, + plotColorPalette: this.xyChart?.plotColorPalette || [ + '#EEE', + '#6BB8E4', + '#8ACB88', + '#C7ACD6', + '#E8DCC2', + '#FFB2A8', + '#FFF380', + '#7E8D91', + '#FFD8B1', + '#FAF3E0', + ], + }; + /* requirement-diagram */ this.requirementBackground = this.requirementBackground || this.primaryColor; this.requirementBorderColor = this.requirementBorderColor || this.primaryBorderColor; From f9a91730aa7df78986b1194a5e286de65e1279b8 Mon Sep 17 00:00:00 2001 From: Subhash Halder <halder.subhash@gmail.com> Date: Sat, 2 Sep 2023 15:45:30 +0530 Subject: [PATCH 031/457] Small minor changes --- .../xychart/chartBuilder/Orchestrator.ts | 52 +++++++++---------- .../chartBuilder/components/plot/BarPlot.ts | 4 +- .../mermaid/src/diagrams/xychart/xychartDb.ts | 36 ++----------- 3 files changed, 33 insertions(+), 59 deletions(-) diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts index e18eb92a31..2788697866 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts @@ -22,8 +22,8 @@ export class Orchestrator { constructor( private chartConfig: XYChartConfig, private chartData: XYChartData, - private chartThemeConfig: XYChartThemeConfig, - private tmpSVGGElem: SVGGType + chartThemeConfig: XYChartThemeConfig, + tmpSVGGElem: SVGGType ) { this.componentStore = { title: getChartTitleComponent(chartConfig, chartData, chartThemeConfig, tmpSVGGElem), @@ -54,8 +54,8 @@ export class Orchestrator { private calculateVerticalSpace() { let availableWidth = this.chartConfig.width; let availableHeight = this.chartConfig.height; - let chartX = 0; - let chartY = 0; + let plotX = 0; + let plotY = 0; let chartWidth = Math.floor((availableWidth * this.chartConfig.plotReservedSpacePercent) / 100); let chartHeight = Math.floor( (availableHeight * this.chartConfig.plotReservedSpacePercent) / 100 @@ -72,7 +72,7 @@ export class Orchestrator { height: availableHeight, }); log.trace('space used by title: ', spaceUsed); - chartY = spaceUsed.height; + plotY = spaceUsed.height; availableHeight -= spaceUsed.height; this.componentStore.xAxis.setAxisPosition('bottom'); spaceUsed = this.componentStore.xAxis.calculateSpace({ @@ -87,7 +87,7 @@ export class Orchestrator { height: availableHeight, }); log.trace('space used by yaxis: ', spaceUsed); - chartX = spaceUsed.width; + plotX = spaceUsed.width; availableWidth -= spaceUsed.width; if (availableWidth > 0) { chartWidth += availableWidth; @@ -98,8 +98,8 @@ export class Orchestrator { availableHeight = 0; } const plotBorderWidthHalf = this.chartConfig.plotBorderWidth / 2; - chartX += plotBorderWidthHalf; - chartY += plotBorderWidthHalf; + plotX += plotBorderWidthHalf; + plotY += plotBorderWidthHalf; chartWidth -= this.chartConfig.plotBorderWidth; chartHeight -= this.chartConfig.plotBorderWidth; this.componentStore.plot.calculateSpace({ @@ -108,14 +108,14 @@ export class Orchestrator { }); log.trace( - `Final chart dimansion: x = ${chartX}, y = ${chartY}, width = ${chartWidth}, height = ${chartHeight}` + `Final chart dimansion: x = ${plotX}, y = ${plotY}, width = ${chartWidth}, height = ${chartHeight}` ); - this.componentStore.plot.setBoundingBoxXY({ x: chartX, y: chartY }); - this.componentStore.xAxis.setRange([chartX, chartX + chartWidth]); - this.componentStore.xAxis.setBoundingBoxXY({ x: chartX, y: chartY + chartHeight }); - this.componentStore.yAxis.setRange([chartY, chartY + chartHeight]); - this.componentStore.yAxis.setBoundingBoxXY({ x: 0, y: chartY }); + this.componentStore.plot.setBoundingBoxXY({ x: plotX, y: plotY }); + this.componentStore.xAxis.setRange([plotX, plotX + chartWidth]); + this.componentStore.xAxis.setBoundingBoxXY({ x: plotX, y: plotY + chartHeight }); + this.componentStore.yAxis.setRange([plotY, plotY + chartHeight]); + this.componentStore.yAxis.setBoundingBoxXY({ x: 0, y: plotY }); if (this.chartData.plots.some((p) => isBarPlot(p))) { this.componentStore.xAxis.recalculateOuterPaddingToDrawBar(); } @@ -125,8 +125,8 @@ export class Orchestrator { let availableWidth = this.chartConfig.width; let availableHeight = this.chartConfig.height; let titleYEnd = 0; - let chartX = 0; - let chartY = 0; + let plotX = 0; + let plotY = 0; let chartWidth = Math.floor((availableWidth * this.chartConfig.plotReservedSpacePercent) / 100); let chartHeight = Math.floor( (availableHeight * this.chartConfig.plotReservedSpacePercent) / 100 @@ -151,7 +151,7 @@ export class Orchestrator { height: availableHeight, }); availableWidth -= spaceUsed.width; - chartX = spaceUsed.width; + plotX = spaceUsed.width; log.trace('space used by xaxis: ', spaceUsed); this.componentStore.yAxis.setAxisPosition('top'); spaceUsed = this.componentStore.yAxis.calculateSpace({ @@ -160,7 +160,7 @@ export class Orchestrator { }); log.trace('space used by yaxis: ', spaceUsed); availableHeight -= spaceUsed.height; - chartY = titleYEnd + spaceUsed.height; + plotY = titleYEnd + spaceUsed.height; if (availableWidth > 0) { chartWidth += availableWidth; availableWidth = 0; @@ -170,8 +170,8 @@ export class Orchestrator { availableHeight = 0; } const plotBorderWidthHalf = this.chartConfig.plotBorderWidth / 2; - chartX += plotBorderWidthHalf; - chartY += plotBorderWidthHalf; + plotX += plotBorderWidthHalf; + plotY += plotBorderWidthHalf; chartWidth -= this.chartConfig.plotBorderWidth; chartHeight -= this.chartConfig.plotBorderWidth; this.componentStore.plot.calculateSpace({ @@ -180,14 +180,14 @@ export class Orchestrator { }); log.trace( - `Final chart dimansion: x = ${chartX}, y = ${chartY}, width = ${chartWidth}, height = ${chartHeight}` + `Final chart dimansion: x = ${plotX}, y = ${plotY}, width = ${chartWidth}, height = ${chartHeight}` ); - this.componentStore.plot.setBoundingBoxXY({ x: chartX, y: chartY }); - this.componentStore.yAxis.setRange([chartX, chartX + chartWidth]); - this.componentStore.yAxis.setBoundingBoxXY({ x: chartX, y: titleYEnd }); - this.componentStore.xAxis.setRange([chartY, chartY + chartHeight]); - this.componentStore.xAxis.setBoundingBoxXY({ x: 0, y: chartY }); + this.componentStore.plot.setBoundingBoxXY({ x: plotX, y: plotY }); + this.componentStore.yAxis.setRange([plotX, plotX + chartWidth]); + this.componentStore.yAxis.setBoundingBoxXY({ x: plotX, y: titleYEnd }); + this.componentStore.xAxis.setRange([plotY, plotY + chartHeight]); + this.componentStore.xAxis.setBoundingBoxXY({ x: 0, y: plotY }); if (this.chartData.plots.some((p) => isBarPlot(p))) { this.componentStore.xAxis.recalculateOuterPaddingToDrawBar(); } diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts index 20d1af3112..b0a62df1f8 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts @@ -17,11 +17,11 @@ export class BarPlot { this.yAxis.getScaleValue(d[1]), ]); - const barPaddingPercent = 5; + const barPaddingPercent = 0.05; const barWidth = Math.min(this.xAxis.getAxisOuterPadding() * 2, this.xAxis.getTickDistance()) * - (1 - barPaddingPercent / 100); + (1 - barPaddingPercent); const barWidthHalf = barWidth / 2; if (this.orientation === 'horizontal') { diff --git a/packages/mermaid/src/diagrams/xychart/xychartDb.ts b/packages/mermaid/src/diagrams/xychart/xychartDb.ts index 4553762668..80d6ae635f 100644 --- a/packages/mermaid/src/diagrams/xychart/xychartDb.ts +++ b/packages/mermaid/src/diagrams/xychart/xychartDb.ts @@ -50,47 +50,21 @@ interface NormalTextType { function getChartDefaultThemeConfig(): XYChartThemeConfig { return { - backgroundColor: - config.themeVariables?.xyChart?.backgroundColor || - defaultThemeVariables.xyChart.backgroundColor, - titleColor: - config.themeVariables?.xyChart?.titleColor || defaultThemeVariables.xyChart.titleColor, - axisLineColor: - config.themeVariables?.xyChart?.axisLineColor || defaultThemeVariables.xyChart.axisLineColor, - xAxisLableColor: - config.themeVariables?.xyChart?.xAxisLableColor || - defaultThemeVariables.xyChart.xAxisLableColor, - xAxisTitleColor: - config.themeVariables?.xyChart?.xAxisTitleColor || - defaultThemeVariables.xyChart.xAxisTitleColor, - xAxisTickColor: - config.themeVariables?.xyChart?.xAxisTickColor || - defaultThemeVariables.xyChart.xAxisTickColor, - yAxisLableColor: - config.themeVariables?.xyChart?.yAxisLableColor || - defaultThemeVariables.xyChart.yAxisLableColor, - yAxisTitleColor: - config.themeVariables?.xyChart?.yAxisTitleColor || - defaultThemeVariables.xyChart.yAxisTitleColor, - yAxisTickColor: - config.themeVariables?.xyChart?.yAxisTickColor || - defaultThemeVariables.xyChart.yAxisTickColor, - plotColorPalette: - config.themeVariables?.xyChart?.plotColorPalette || - defaultThemeVariables.xyChart.plotColorPalette, + ...defaultThemeVariables.xyChart, + ...config.themeVariables?.xyChart, }; } function getChartDefaultConfig(): XYChartConfig { return { ...(defaultConfig.xyChart as XYChartConfig), - ...(config.xyChart ? config.xyChart : {}), + ...config.xyChart, yAxis: { ...(defaultConfig.xyChart as XYChartConfig).yAxis, - ...(config.xyChart?.yAxis ? config.xyChart.yAxis : {}), + ...config.xyChart?.yAxis, }, xAxis: { ...(defaultConfig.xyChart as XYChartConfig).xAxis, - ...(config.xyChart?.xAxis ? config.xyChart.xAxis : {}), + ...config.xyChart?.xAxis, }, }; } From de2aa9d7402d864c996453a85fdc41f52bca2f36 Mon Sep 17 00:00:00 2001 From: Subhash Halder <halder.subhash@gmail.com> Date: Sat, 2 Sep 2023 16:33:29 +0530 Subject: [PATCH 032/457] Fixed lint issue --- .../xychart/chartBuilder/Orchestrator.ts | 19 ++++++++----------- .../chartBuilder/TextDimensionCalculator.ts | 4 ++-- .../chartBuilder/components/ChartTitle.ts | 10 ++++------ .../chartBuilder/components/axis/BandAxis.ts | 7 ++++--- .../chartBuilder/components/axis/BaseAxis.ts | 6 +++--- .../components/axis/LinearAxis.ts | 7 ++++--- .../chartBuilder/components/axis/index.ts | 6 +++--- .../chartBuilder/components/plot/BarPlot.ts | 4 ++-- .../chartBuilder/components/plot/LinePlot.ts | 4 ++-- .../components/plot/PlotBorder.ts | 7 ++++++- .../chartBuilder/components/plot/index.ts | 6 +++--- .../diagrams/xychart/chartBuilder/index.ts | 4 ++-- .../xychart/parser/xychart.jison.spec.ts | 3 ++- .../mermaid/src/diagrams/xychart/xychartDb.ts | 7 +++---- .../src/diagrams/xychart/xychartDiagram.ts | 2 +- .../src/diagrams/xychart/xychartRenderer.ts | 10 ++++------ 16 files changed, 53 insertions(+), 53 deletions(-) diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts index 2788697866..b89d1c94e4 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts @@ -1,16 +1,13 @@ import { log } from '../../../logger.js'; -import { - DrawableElem, - XYChartData, - XYChartThemeConfig, - XYChartConfig, - isBarPlot, -} from './Interfaces.js'; +import type { DrawableElem, XYChartData, XYChartThemeConfig, XYChartConfig } from './Interfaces.js'; +import { isBarPlot } from './Interfaces.js'; import { getChartTitleComponent } from './components/ChartTitle.js'; -import { ChartComponent } from './Interfaces.js'; -import { Axis, getAxis } from './components/axis/index.js'; -import { Plot, getPlotComponent } from './components/plot/index.js'; -import { SVGGType } from '../xychartDb.js'; +import type { ChartComponent } from './Interfaces.js'; +import type { Axis } from './components/axis/index.js'; +import { getAxis } from './components/axis/index.js'; +import type { Plot } from './components/plot/index.js'; +import { getPlotComponent } from './components/plot/index.js'; +import type { SVGGType } from '../xychartDb.js'; export class Orchestrator { private componentStore: { diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/TextDimensionCalculator.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/TextDimensionCalculator.ts index 02d8413225..2fd2d770e7 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/TextDimensionCalculator.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/TextDimensionCalculator.ts @@ -1,6 +1,6 @@ -import { Dimension } from './Interfaces.js'; +import type { Dimension } from './Interfaces.js'; import { computeDimensionOfText } from '../../../rendering-util/createText.js'; -import { SVGGType } from '../xychartDb.js'; +import type { SVGGType } from '../xychartDb.js'; export interface TextDimensionCalculator { getMaxDimension(texts: string[], fontSize: number): Dimension; diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts index 6b3ec3c108..7a5bcf3416 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts @@ -1,5 +1,5 @@ -import { SVGGType } from '../../xychartDb.js'; -import { +import type { SVGGType } from '../../xychartDb.js'; +import type { BoundingRect, ChartComponent, Dimension, @@ -9,10 +9,8 @@ import { XYChartThemeConfig, XYChartConfig, } from '../Interfaces.js'; -import { - TextDimensionCalculator, - TextDimensionCalculatorWithFont, -} from '../TextDimensionCalculator.js'; +import type { TextDimensionCalculator } from '../TextDimensionCalculator.js'; +import { TextDimensionCalculatorWithFont } from '../TextDimensionCalculator.js'; export class ChartTitle implements ChartComponent { private boundingRect: BoundingRect; diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BandAxis.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BandAxis.ts index e55f819536..8c785cf72b 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BandAxis.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BandAxis.ts @@ -1,8 +1,9 @@ -import { ScaleBand, scaleBand } from 'd3'; +import type { ScaleBand } from 'd3'; +import { scaleBand } from 'd3'; import { log } from '../../../../../logger.js'; -import { TextDimensionCalculator } from '../../TextDimensionCalculator.js'; +import type { TextDimensionCalculator } from '../../TextDimensionCalculator.js'; import { BaseAxis } from './BaseAxis.js'; -import { XYChartAxisThemeConfig, XYChartAxisConfig } from '../../Interfaces.js'; +import type { XYChartAxisThemeConfig, XYChartAxisConfig } from '../../Interfaces.js'; export class BandAxis extends BaseAxis { private scale: ScaleBand<string>; diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts index d076bc0a0e..977bf4e200 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts @@ -1,5 +1,5 @@ import { log } from '../../../../../logger.js'; -import { +import type { BoundingRect, Dimension, DrawableElem, @@ -7,8 +7,8 @@ import { XYChartAxisThemeConfig, XYChartAxisConfig, } from '../../Interfaces.js'; -import { TextDimensionCalculator } from '../../TextDimensionCalculator.js'; -import { AxisPosition, Axis } from './index.js'; +import type { TextDimensionCalculator } from '../../TextDimensionCalculator.js'; +import type { AxisPosition, Axis } from './index.js'; const BAR_WIDTH_TO_TICK_WIDTH_RATIO = 0.7; const MAX_OUTER_PADDING_PERCENT_FOR_WRT_LABEL = 0.2; diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/LinearAxis.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/LinearAxis.ts index f32585a6c7..6f0e2bdbb6 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/LinearAxis.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/LinearAxis.ts @@ -1,8 +1,9 @@ -import { ScaleLinear, scaleLinear } from 'd3'; +import type { ScaleLinear } from 'd3'; +import { scaleLinear } from 'd3'; import { log } from '../../../../../logger.js'; -import { TextDimensionCalculator } from '../../TextDimensionCalculator.js'; +import type { TextDimensionCalculator } from '../../TextDimensionCalculator.js'; import { BaseAxis } from './BaseAxis.js'; -import { XYChartAxisThemeConfig, XYChartAxisConfig } from '../../Interfaces.js'; +import type { XYChartAxisThemeConfig, XYChartAxisConfig } from '../../Interfaces.js'; export class LinearAxis extends BaseAxis { private scale: ScaleLinear<number, number>; diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts index a40de82377..a563ad6864 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts @@ -1,11 +1,11 @@ -import { SVGGType } from '../../../xychartDb.js'; -import { +import type { SVGGType } from '../../../xychartDb.js'; +import type { AxisDataType, ChartComponent, XYChartAxisThemeConfig, XYChartAxisConfig, - isBandAxisData, } from '../../Interfaces.js'; +import { isBandAxisData } from '../../Interfaces.js'; import { TextDimensionCalculatorWithFont } from '../../TextDimensionCalculator.js'; import { BandAxis } from './BandAxis.js'; import { LinearAxis } from './LinearAxis.js'; diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts index b0a62df1f8..e6b2e66e9f 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts @@ -1,5 +1,5 @@ -import { BarPlotData, BoundingRect, DrawableElem, XYChartConfig } from '../../Interfaces.js'; -import { Axis } from '../axis/index.js'; +import type { BarPlotData, BoundingRect, DrawableElem, XYChartConfig } from '../../Interfaces.js'; +import type { Axis } from '../axis/index.js'; export class BarPlot { constructor( diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/LinePlot.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/LinePlot.ts index fe58b1ef46..e4ab886ea7 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/LinePlot.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/LinePlot.ts @@ -1,6 +1,6 @@ import { line } from 'd3'; -import { DrawableElem, LinePlotData, XYChartConfig } from '../../Interfaces.js'; -import { Axis } from '../axis/index.js'; +import type { DrawableElem, LinePlotData, XYChartConfig } from '../../Interfaces.js'; +import type { Axis } from '../axis/index.js'; export class LinePlot { constructor( diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/PlotBorder.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/PlotBorder.ts index c87165d405..3870f48e6b 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/PlotBorder.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/PlotBorder.ts @@ -1,4 +1,9 @@ -import { BoundingRect, DrawableElem, XYChartConfig, XYChartThemeConfig } from '../../Interfaces.js'; +import type { + BoundingRect, + DrawableElem, + XYChartConfig, + XYChartThemeConfig, +} from '../../Interfaces.js'; export class PlotBorder { constructor( private boundingRect: BoundingRect, diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts index e974da0e8a..027ba7c7a1 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts @@ -1,4 +1,4 @@ -import { +import type { XYChartData, Dimension, BoundingRect, @@ -7,8 +7,8 @@ import { XYChartThemeConfig, XYChartConfig, } from '../../Interfaces.js'; -import { Axis } from '../axis/index.js'; -import { ChartComponent } from '../../Interfaces.js'; +import type { Axis } from '../axis/index.js'; +import type { ChartComponent } from '../../Interfaces.js'; import { LinePlot } from './LinePlot.js'; import { PlotBorder } from './PlotBorder.js'; import { BarPlot } from './BarPlot.js'; diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts index 2b308be2b0..356f0b4522 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts @@ -1,6 +1,6 @@ import { log } from '../../../logger.js'; -import { SVGGType } from '../xychartDb.js'; -import { DrawableElem, XYChartData, XYChartConfig, XYChartThemeConfig } from './Interfaces.js'; +import type { SVGGType } from '../xychartDb.js'; +import type { DrawableElem, XYChartData, XYChartConfig, XYChartThemeConfig } from './Interfaces.js'; import { Orchestrator } from './Orchestrator.js'; export class XYChartBuilder { diff --git a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts index 0515a4e944..09a62d8bd1 100644 --- a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts +++ b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts @@ -1,6 +1,7 @@ // @ts-ignore: TODO Fix ts errors import { parser } from './xychart.jison'; -import { Mock, vi } from 'vitest'; +import type { Mock } from 'vitest'; +import { vi } from 'vitest'; const parserFnConstructor = (str: string) => { return () => { diff --git a/packages/mermaid/src/diagrams/xychart/xychartDb.ts b/packages/mermaid/src/diagrams/xychart/xychartDb.ts index 80d6ae635f..b8c7dd0a28 100644 --- a/packages/mermaid/src/diagrams/xychart/xychartDb.ts +++ b/packages/mermaid/src/diagrams/xychart/xychartDb.ts @@ -1,6 +1,6 @@ // @ts-ignore: TODO Fix ts errors import { adjust, channel } from 'khroma'; -import { Selection } from 'd3-selection'; +import type { Selection } from 'd3-selection'; import mermaidAPI from '../../mermaidAPI.js'; import * as configApi from '../../config.js'; import defaultConfig from '../../defaultConfig.js'; @@ -15,15 +15,14 @@ import { clear as commonClear, } from '../../commonDb.js'; import { XYChartBuilder } from './chartBuilder/index.js'; -import { +import type { DrawableElem, SimplePlotDataType, XYChartData, XYChartThemeConfig, - isBandAxisData, - isLinearAxisData, XYChartConfig, } from './chartBuilder/Interfaces.js'; +import { isBandAxisData, isLinearAxisData } from './chartBuilder/Interfaces.js'; import { getThemeVariables } from '../../themes/theme-default.js'; export type SVGGType = Selection<SVGGElement, unknown, Element | null, unknown>; diff --git a/packages/mermaid/src/diagrams/xychart/xychartDiagram.ts b/packages/mermaid/src/diagrams/xychart/xychartDiagram.ts index 09bd51c2a4..c4e913adc3 100644 --- a/packages/mermaid/src/diagrams/xychart/xychartDiagram.ts +++ b/packages/mermaid/src/diagrams/xychart/xychartDiagram.ts @@ -1,4 +1,4 @@ -import { DiagramDefinition } from '../../diagram-api/types.js'; +import type { DiagramDefinition } from '../../diagram-api/types.js'; // @ts-ignore: TODO Fix ts errors import parser from './parser/xychart.jison'; import db from './xychartDb.js'; diff --git a/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts b/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts index 384cf944b5..8f999cb00c 100644 --- a/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts +++ b/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts @@ -1,15 +1,13 @@ -import { select } from 'd3'; -import { Diagram } from '../../Diagram.js'; -import * as configApi from '../../config.js'; +import type { Diagram } from '../../Diagram.js'; import { log } from '../../logger.js'; import { configureSvgSize } from '../../setupGraphViewbox.js'; -import { +import type { DrawableElem, TextElem, TextHorizontalPos, TextVerticalPos, } from './chartBuilder/Interfaces.js'; -import XYChartDB from './xychartDb.js'; +import type XYChartDB from './xychartDb.js'; import { selectSvgElement } from '../../rendering-util/selectSvgElement.js'; export const draw = (txt: string, id: string, _version: string, diagObj: Diagram) => { @@ -54,7 +52,7 @@ export const draw = (txt: string, id: string, _version: string, diagObj: Diagram function getGroup(gList: string[]) { let elem = group; let prefix = ''; - for (const [i, _] of gList.entries()) { + for (const [i] of gList.entries()) { let parent = group; if (i > 0 && groups[prefix]) { parent = groups[prefix]; From e0418eb661488debb95f706ab36e5a5223011ae0 Mon Sep 17 00:00:00 2001 From: Subhash Halder <halder.subhash@gmail.com> Date: Sat, 2 Sep 2023 18:08:59 +0530 Subject: [PATCH 033/457] Made the axis title optional --- demos/xychart.html | 13 ++++++-- .../chartBuilder/components/axis/BaseAxis.ts | 4 +-- .../src/diagrams/xychart/parser/xychart.jison | 22 +++++++++---- .../xychart/parser/xychart.jison.spec.ts | 32 +++++++++++++++++++ 4 files changed, 61 insertions(+), 10 deletions(-) diff --git a/demos/xychart.html b/demos/xychart.html index a7bd426143..42992dd257 100644 --- a/demos/xychart.html +++ b/demos/xychart.html @@ -15,6 +15,17 @@ <body> <h1>XY Charts demos</h1> + <pre class="mermaid"> + xychart-beta + title "Sales Revenue (in $)" + x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] + y-axis "Revenue (in $)" 4000 --> 11000 + bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + </pre> + + <hr /> + <pre class="mermaid"> xychart-beta horizontal title "Basic xychart" @@ -24,8 +35,6 @@ <h1>XY Charts demos</h1> line [23, 46, 75, 43] </pre> - <hr /> - <h1>XY Charts demos</h1> <pre class="mermaid"> xychart-beta diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts index 977bf4e200..7bbaf57491 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts @@ -93,7 +93,7 @@ export abstract class BaseAxis implements Axis { this.showTick = true; availableHeight -= this.axisConfig.tickLength; } - if (this.axisConfig.showTitle) { + if (this.axisConfig.showTitle && this.title) { const spaceRequired = this.textDimensionCalculator.getMaxDimension( [this.title], this.axisConfig.labelFontSize @@ -126,7 +126,7 @@ export abstract class BaseAxis implements Axis { this.showTick = true; availableWidth -= this.axisConfig.tickLength; } - if (this.axisConfig.showTitle) { + if (this.axisConfig.showTitle && this.title) { const spaceRequired = this.textDimensionCalculator.getMaxDimension( [this.title], this.axisConfig.labelFontSize diff --git a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison index 6c5cb92a9d..8666dda3b4 100644 --- a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison +++ b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison @@ -55,8 +55,8 @@ <string>[^"]* return "STR"; -"[" return 'SQUARE_BRACES_START' -"]" return 'SQUARE_BRACES_END' +"[" return 'SQUARE_BRACES_START' +"]" return 'SQUARE_BRACES_END' [A-Za-z]+ return 'ALPHA'; ":" return 'COLON'; \+ return 'PLUS'; @@ -117,8 +117,13 @@ commaSeparatedNumbers parseXAxis : text {yy.setXAxisTitle($text);} - | text bandData {yy.setXAxisTitle($text); yy.setXAxisBand($bandData);} - | text NUMBER_WITH_DECIMAL ARROW_DELIMITER NUMBER_WITH_DECIMAL {yy.setXAxisTitle($text); yy.setXAxisRangeData(Number($NUMBER_WITH_DECIMAL1), Number($NUMBER_WITH_DECIMAL2));} + | text xAxisData {yy.setXAxisTitle($text);} + | xAxisData {yy.setXAxisTitle({type: 'text', text: ''});} + ; + +xAxisData + : bandData {yy.setXAxisBand($bandData);} + | NUMBER_WITH_DECIMAL ARROW_DELIMITER NUMBER_WITH_DECIMAL {yy.setXAxisRangeData(Number($NUMBER_WITH_DECIMAL1), Number($NUMBER_WITH_DECIMAL2));} ; bandData @@ -131,8 +136,13 @@ commaSeparatedTexts ; parseYAxis - : text {yy.setYAxisTitle($text);} - | text NUMBER_WITH_DECIMAL ARROW_DELIMITER NUMBER_WITH_DECIMAL {yy.setYAxisTitle($text); yy.setYAxisRangeData(Number($NUMBER_WITH_DECIMAL1), Number($NUMBER_WITH_DECIMAL2));} + : text {yy.setYAxisTitle($text);} + | text yAxisData {yy.setYAxisTitle($text);} + | yAxisData {yy.setYAxisTitle({type: "text", text: ""});} + ; + +yAxisData + : NUMBER_WITH_DECIMAL ARROW_DELIMITER NUMBER_WITH_DECIMAL {yy.setYAxisRangeData(Number($NUMBER_WITH_DECIMAL1), Number($NUMBER_WITH_DECIMAL2));} ; eol diff --git a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts index 09a62d8bd1..6ccc06c584 100644 --- a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts +++ b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts @@ -128,6 +128,16 @@ describe('Testing xychart jison file', () => { expect(mockDB.setXAxisRangeData).toHaveBeenCalledWith(45.5, 0.34); }); + it('parse x-axis without axisname and range data', () => { + const str = 'xychart-beta \nx-axis 45.5 --> 1.34 \n'; + expect(parserFnConstructor(str)).not.toThrow(); + expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ + text: '', + type: 'text', + }); + expect(mockDB.setXAxisRangeData).toHaveBeenCalledWith(45.5, 1.34); + }); + it('parse x-axis with axis name and category data', () => { const str = 'xychart-beta \nx-axis xAxisName [ "cat1" , cat2a ] \n '; expect(parserFnConstructor(str)).not.toThrow(); @@ -144,6 +154,22 @@ describe('Testing xychart jison file', () => { ]); }); + it('parse x-axis without axisname and category data', () => { + const str = 'xychart-beta \nx-axis [ "cat1" , cat2a ] \n '; + expect(parserFnConstructor(str)).not.toThrow(); + expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ + text: '', + type: 'text', + }); + expect(mockDB.setXAxisBand).toHaveBeenCalledWith([ + { + text: 'cat1', + type: 'text', + }, + { text: 'cat2a', type: 'text' }, + ]); + }); + it('parse x-axis throw error if unbalanced bracket', () => { let str = 'xychart-beta \nx-axis xAxisName [ "cat1" [ cat2a ] \n '; expect(parserFnConstructor(str)).toThrow(); @@ -218,6 +244,12 @@ describe('Testing xychart jison file', () => { expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' }); expect(mockDB.setYAxisRangeData).toHaveBeenCalledWith(45.5, 33); }); + it('parse y-axis without axisname with range data', () => { + const str = 'xychart-beta \ny-axis 45.5 --> 33 \n'; + expect(parserFnConstructor(str)).not.toThrow(); + expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: '', type: 'text' }); + expect(mockDB.setYAxisRangeData).toHaveBeenCalledWith(45.5, 33); + }); it('parse y-axis with axis name with range data with only decimal part', () => { const str = 'xychart-beta \ny-axis yAxisName 45.5 --> .33 \n'; expect(parserFnConstructor(str)).not.toThrow(); From fc9ff6c6f382fdd9be1cbca5d01ff38adce2d757 Mon Sep 17 00:00:00 2001 From: Subhash Halder <halder.subhash@gmail.com> Date: Sat, 2 Sep 2023 20:48:11 +0530 Subject: [PATCH 034/457] Added documentations --- demos/xychart.html | 8 + docs/intro/index.md | 20 +++ docs/syntax/xyChart.md | 170 ++++++++++++++++++ packages/mermaid/src/config.type.ts | 4 - .../xychart/chartBuilder/Interfaces.ts | 3 +- .../components/plot/PlotBorder.ts | 4 +- .../mermaid/src/docs/.vitepress/config.ts | 1 + packages/mermaid/src/docs/intro/examples.md | 11 ++ packages/mermaid/src/docs/syntax/xyChart.md | 155 ++++++++++++++++ .../mermaid/src/schemas/config.schema.yaml | 9 +- packages/mermaid/src/themes/theme-base.js | 2 +- packages/mermaid/src/themes/theme-dark.js | 2 +- packages/mermaid/src/themes/theme-default.js | 2 +- packages/mermaid/src/themes/theme-forest.js | 2 +- packages/mermaid/src/themes/theme-neutral.js | 2 +- 15 files changed, 375 insertions(+), 20 deletions(-) create mode 100644 docs/syntax/xyChart.md create mode 100644 packages/mermaid/src/docs/syntax/xyChart.md diff --git a/demos/xychart.html b/demos/xychart.html index 42992dd257..1a8d8c2913 100644 --- a/demos/xychart.html +++ b/demos/xychart.html @@ -57,8 +57,16 @@ <h1>XY Charts demos</h1> bar "sample bat" [52, 96, 35, 10] </pre> + <hr /> + <h1>XY Charts demos</h1> + <pre class="mermaid"> + xychart-beta + line [+1.3, .6, 2.4, -.34] + </pre> + <h1>XY Charts demos</h1> <pre class="mermaid"> + %%{init: {"xychart": {"width": 500, "height": 400}, "themeVariables": {"xychart": {"titleColor": "#ff0000"} } }}%% xychart-beta title "Basic xychart with many categories" x-axis "this is x axis" [category1, "category 2", category3, category4, category5, category6, category7] diff --git a/docs/intro/index.md b/docs/intro/index.md index b0e9c2671d..384df43c56 100644 --- a/docs/intro/index.md +++ b/docs/intro/index.md @@ -282,6 +282,26 @@ quadrantChart Campaign F: [0.35, 0.78] ``` +### [XY Chart](../syntax/xyChart.md) + +```mermaid-example +xychart-beta + title "Sales Revenue" + x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] + y-axis "Revenue (in $)" 4000 --> 11000 + bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] +``` + +```mermaid +xychart-beta + title "Sales Revenue" + x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] + y-axis "Revenue (in $)" 4000 --> 11000 + bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] +``` + ## Installation **In depth guides and examples can be found at [Getting Started](./getting-started.md) and [Usage](../config/usage.md).** diff --git a/docs/syntax/xyChart.md b/docs/syntax/xyChart.md new file mode 100644 index 0000000000..7e4303ba9f --- /dev/null +++ b/docs/syntax/xyChart.md @@ -0,0 +1,170 @@ +> **Warning** +> +> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. +> +> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/xyChart.md](../../packages/mermaid/src/docs/syntax/xyChart.md). + +# XY Chart + +> In the context of mermaid-js, the XY chart is a comprehensive charting module that encompasses various types of charts that utilize both x-axis and y-axis for data representation. Presently, it includes two fundamental chart types: the bar chart and the line chart. These charts are designed to visually display and analyze data that involve two numerical variables. + +> It's important to note that while the current implementation of mermaid-js includes these two chart types, the framework is designed to be dynamic and adaptable. Therefore, it has the capacity for expansion and the inclusion of additional chart types in the future. This means that users can expect an evolving suite of charting options within the XY chart module, catering to various data visualization needs as new chart types are introduced over time. + +## Example + +```mermaid-example +xychart-beta + title "Sales Revenue" + x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] + y-axis "Revenue (in $)" 4000 --> 11000 + bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] +``` + +```mermaid +xychart-beta + title "Sales Revenue" + x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] + y-axis "Revenue (in $)" 4000 --> 11000 + bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] +``` + +## Syntax + +> **Note** +> all text values can be single word without ", if multiple line required we have to use ". + +### Orientations + +The chart can be drawn horizontal or vertical, default value is vertical + + xychart-beta horizontal + ... + +### Title + +The title is a short description of the chart and it will always render on top of the chart. + +#### Example + + xychart-beta + title "This is a sample example" + ... + +> **Note** +> if the title single word no need to use ", but if it has space " is needed + +### x-axis + +The x-axis primarily serves as a categorical value, although it can also function as a numeric range value when needed. + +#### Example + +1. `x-axis title min --> max` x-axis will function as numeric with the given range +2. `x-axis "title with space" [cat1, "cat2 with space", cat3]` x-axis if categorical, categories are text type + +### y-axis + +The y-axis is employed to represent numerical range values, it can't have categorical values. + +#### Example + +1. `y-axis title min --> max` +2. `y-axis title` it will only add the title, the range will be auto generated from data. + +> **Note** +> Both x and y axis are optional if not provided we will try to create the range + +### Line chart + +A line chart offers the capability to graphically depict lines. + +#### Example + +1. `line [2.3, 45, .98, -3.4]` it can have all valid numeric values. + +### Bar chart + +A bar chart offers the capability to graphically depict bars. + +#### Example + +1. `bar [2.3, 45, .98, -3.4]` it can have all valid numeric values. + +#### Simplest example + +Every grammer are optional other than the chart name and one data set, so you will be able to draw a chart will a simple config like + + xychart-beta + line [+1.3, .6, 2.4, -.34] + +## Chart Configurations + +| Parameter | Description | Default value | +| ------------------------ | ---------------------------------------------- | :-----------: | +| width | Width of the chart | 700 | +| height | Height of the chart | 500 | +| titlePadding | Top and Bottom padding of the title | 10 | +| titleFontSize | Title font size | 20 | +| showTitle | Title to be shown or not | true | +| xAxis | xAxis configuration | AxisConfig | +| yAxis | yAxis configuration | AxisConfig | +| plotBorderWidth | Width of the border around the plot | 2 | +| chartOrientation | ('vertical' or 'horizontal') | 'vertical' | +| plotReservedSpacePercent | Minimum space plots will take inside the chart | 50 | + +### AxisConfig + +| Parameter | Description | Default value | +| ------------- | -------------------------------------------- | :-----------: | +| showLabel | Show axis labels or tick values | true | +| labelFontSize | Font size of the label to be drawn | 14 | +| labelPadding | Top and Bottom padding of the label | 5 | +| showTitle | Axis title to be shown or not | true | +| titleFontSize | Axis title font size | 16 | +| titlePadding | Top and Bottom padding of Axis title | 5 | +| showTick | Tick along with the label to be shown or not | true | +| tickLength | How long the tick will be | 5 | +| tickWidth | How width the tick will be | 2 | + +## Chart Theme Variables + +> **Note** +> theames for xychart resides inside xychart attribute so to set the variables use this syntax +> %%{init: { "themeVariables": {"xychart": {"titleColor": "#ff0000"} } }}%% + +| Parameter | Description | +| ---------------- | ------------------------------------------------------ | +| backgroundColor | Background color of the whole chart | +| titleColor | Color of the Title text | +| plotBorderColor | Color of the plot border | +| xAxisLableColor | Color of the x-axis labels | +| xAxisTitleColor | Color of the x-axis title | +| xAxisTickColor | Color of the x-axis tick | +| yAxisLableColor | Color of the y-axis labels | +| yAxisTitleColor | Color of the y-axis title | +| yAxisTickColor | Color of the y-axis tick | +| plotColorPalette | Array of colors for the plots eg \["#f3456", "#43445"] | + +## Example on config and theme + +```mermaid-example +%%{init: {"xychart": {"width": 500, "height": 400}, "themeVariables": {"xychart": {"titleColor": "#ff0000"} } }}%% +xychart-beta + title "Sales Revenue" + x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] + y-axis "Revenue (in $)" 4000 --> 11000 + bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] +``` + +```mermaid +%%{init: {"xychart": {"width": 500, "height": 400}, "themeVariables": {"xychart": {"titleColor": "#ff0000"} } }}%% +xychart-beta + title "Sales Revenue" + x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] + y-axis "Revenue (in $)" 4000 --> 11000 + bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] +``` diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts index 0ce1ceb80a..77e3dbeb61 100644 --- a/packages/mermaid/src/config.type.ts +++ b/packages/mermaid/src/config.type.ts @@ -763,10 +763,6 @@ export interface XYChartConfig extends BaseDiagramConfig { * height of the chart */ height?: number; - /** - * Font family of texts in the xyChart - */ - fontFamily?: string; /** * Font size of the chart title */ diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts index 2c92470870..e23374aca4 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts @@ -7,7 +7,7 @@ export interface XYChartAxisThemeConfig { export interface XYChartThemeConfig { backgroundColor: string; titleColor: string; - axisLineColor: string; + plotBorderColor: string; xAxisLableColor: string; xAxisTitleColor: string; xAxisTickColor: string; @@ -86,7 +86,6 @@ export interface XYChartAxisConfig { export interface XYChartConfig { width: number; height: number; - fontFamily: string; titleFontSize: number; titlePadding: number; showTitle: boolean; diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/PlotBorder.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/PlotBorder.ts index 3870f48e6b..8bddf04d00 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/PlotBorder.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/PlotBorder.ts @@ -23,7 +23,7 @@ export class PlotBorder { path: `M ${x},${y} L ${x + width},${y} M ${x + width},${y + height} M ${x},${ y + height } L ${x},${y}`, - strokeFill: this.chartThemeConfig.axisLineColor, + strokeFill: this.chartThemeConfig.plotBorderColor, strokeWidth: 1, }, ], @@ -39,7 +39,7 @@ export class PlotBorder { path: `M ${x},${y} M ${x + width},${y} M ${x + width},${y + height} L ${x},${ y + height } L ${x},${y}`, - strokeFill: this.chartThemeConfig.axisLineColor, + strokeFill: this.chartThemeConfig.plotBorderColor, strokeWidth: 1, }, ], diff --git a/packages/mermaid/src/docs/.vitepress/config.ts b/packages/mermaid/src/docs/.vitepress/config.ts index ede064fa46..e30f91e135 100644 --- a/packages/mermaid/src/docs/.vitepress/config.ts +++ b/packages/mermaid/src/docs/.vitepress/config.ts @@ -146,6 +146,7 @@ function sidebarSyntax() { { text: 'Timeline 🔥', link: '/syntax/timeline' }, { text: 'Zenuml 🔥', link: '/syntax/zenuml' }, { text: 'Sankey 🔥', link: '/syntax/sankey' }, + { text: 'XYChart 🔥', link: '/syntax/xychart' }, { text: 'Other Examples', link: '/syntax/examples' }, ], }, diff --git a/packages/mermaid/src/docs/intro/examples.md b/packages/mermaid/src/docs/intro/examples.md index 7dda288dcb..978edb2b7a 100644 --- a/packages/mermaid/src/docs/intro/examples.md +++ b/packages/mermaid/src/docs/intro/examples.md @@ -117,3 +117,14 @@ quadrantChart Campaign E: [0.40, 0.34] Campaign F: [0.35, 0.78] ``` + +### [XY Chart](../syntax/xyChart.md) + +```mermaid-example +xychart-beta + title "Sales Revenue" + x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] + y-axis "Revenue (in $)" 4000 --> 11000 + bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] +``` diff --git a/packages/mermaid/src/docs/syntax/xyChart.md b/packages/mermaid/src/docs/syntax/xyChart.md new file mode 100644 index 0000000000..5e65cb6709 --- /dev/null +++ b/packages/mermaid/src/docs/syntax/xyChart.md @@ -0,0 +1,155 @@ +# XY Chart + +> In the context of mermaid-js, the XY chart is a comprehensive charting module that encompasses various types of charts that utilize both x-axis and y-axis for data representation. Presently, it includes two fundamental chart types: the bar chart and the line chart. These charts are designed to visually display and analyze data that involve two numerical variables. + +> It's important to note that while the current implementation of mermaid-js includes these two chart types, the framework is designed to be dynamic and adaptable. Therefore, it has the capacity for expansion and the inclusion of additional chart types in the future. This means that users can expect an evolving suite of charting options within the XY chart module, catering to various data visualization needs as new chart types are introduced over time. + +## Example + +```mermaid-example +xychart-beta + title "Sales Revenue" + x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] + y-axis "Revenue (in $)" 4000 --> 11000 + bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] +``` + +## Syntax + +```note +all text values can be single word without ", if multiple line required we have to use ". +``` + +### Orientations + +The chart can be drawn horizontal or vertical, default value is vertical + +``` +xychart-beta horizontal +... +``` + +### Title + +The title is a short description of the chart and it will always render on top of the chart. + +#### Example + +``` +xychart-beta + title "This is a sample example" + ... +``` + +```note +if the title single word no need to use ", but if it has space " is needed +``` + +### x-axis + +The x-axis primarily serves as a categorical value, although it can also function as a numeric range value when needed. + +#### Example + +1. `x-axis title min --> max` x-axis will function as numeric with the given range +2. `x-axis "title with space" [cat1, "cat2 with space", cat3]` x-axis if categorical, categories are text type + +### y-axis + +The y-axis is employed to represent numerical range values, it can't have categorical values. + +#### Example + +1. `y-axis title min --> max` +2. `y-axis title` it will only add the title, the range will be auto generated from data. + +```note +Both x and y axis are optional if not provided we will try to create the range +``` + +### Line chart + +A line chart offers the capability to graphically depict lines. + +#### Example + +1. `line [2.3, 45, .98, -3.4]` it can have all valid numeric values. + +### Bar chart + +A bar chart offers the capability to graphically depict bars. + +#### Example + +1. `bar [2.3, 45, .98, -3.4]` it can have all valid numeric values. + +#### Simplest example + +Every grammer are optional other than the chart name and one data set, so you will be able to draw a chart will a simple config like + +``` +xychart-beta + line [+1.3, .6, 2.4, -.34] +``` + +## Chart Configurations + +| Parameter | Description | Default value | +| ------------------------ | ---------------------------------------------- | :-----------: | +| width | Width of the chart | 700 | +| height | Height of the chart | 500 | +| titlePadding | Top and Bottom padding of the title | 10 | +| titleFontSize | Title font size | 20 | +| showTitle | Title to be shown or not | true | +| xAxis | xAxis configuration | AxisConfig | +| yAxis | yAxis configuration | AxisConfig | +| plotBorderWidth | Width of the border around the plot | 2 | +| chartOrientation | ('vertical' or 'horizontal') | 'vertical' | +| plotReservedSpacePercent | Minimum space plots will take inside the chart | 50 | + +### AxisConfig + +| Parameter | Description | Default value | +| ------------- | -------------------------------------------- | :-----------: | +| showLabel | Show axis labels or tick values | true | +| labelFontSize | Font size of the label to be drawn | 14 | +| labelPadding | Top and Bottom padding of the label | 5 | +| showTitle | Axis title to be shown or not | true | +| titleFontSize | Axis title font size | 16 | +| titlePadding | Top and Bottom padding of Axis title | 5 | +| showTick | Tick along with the label to be shown or not | true | +| tickLength | How long the tick will be | 5 | +| tickWidth | How width the tick will be | 2 | + +## Chart Theme Variables + +```note +theames for xychart resides inside xychart attribute so to set the variables use this syntax +%%{init: { "themeVariables": {"xychart": {"titleColor": "#ff0000"} } }}%% +``` + +| Parameter | Description | +| ---------------- | ----------------------------------------------------- | +| backgroundColor | Background color of the whole chart | +| titleColor | Color of the Title text | +| plotBorderColor | Color of the plot border | +| xAxisLableColor | Color of the x-axis labels | +| xAxisTitleColor | Color of the x-axis title | +| xAxisTickColor | Color of the x-axis tick | +| yAxisLableColor | Color of the y-axis labels | +| yAxisTitleColor | Color of the y-axis title | +| yAxisTickColor | Color of the y-axis tick | +| plotColorPalette | Array of colors for the plots eg ["#f3456", "#43445"] | + +## Example on config and theme + +```mermaid-example +%%{init: {"xychart": {"width": 500, "height": 400}, "themeVariables": {"xychart": {"titleColor": "#ff0000"} } }}%% +xychart-beta + title "Sales Revenue" + x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] + y-axis "Revenue (in $)" 4000 --> 11000 + bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] +``` diff --git a/packages/mermaid/src/schemas/config.schema.yaml b/packages/mermaid/src/schemas/config.schema.yaml index 4e9e0e5325..d7f5cdae37 100644 --- a/packages/mermaid/src/schemas/config.schema.yaml +++ b/packages/mermaid/src/schemas/config.schema.yaml @@ -1052,7 +1052,6 @@ $defs: # JSON Schema definition (maybe we should move these to a seperate file) required: - width - height - - fontFamily - titleFontSize - titlePadding - xAxis @@ -1072,19 +1071,15 @@ $defs: # JSON Schema definition (maybe we should move these to a seperate file) type: integer default: 500 minimum: 1 - fontFamily: - description: Font family of texts in the xyChart - type: string - default: '"trebuchet ms", verdana, arial, sans-serif' titleFontSize: description: Font size of the chart title type: integer - default: 16 + default: 20 minimum: 1 titlePadding: description: Top and bottom space from the chart title type: integer - default: 5 + default: 10 minimum: 0 showTitle: description: Should show the chart title diff --git a/packages/mermaid/src/themes/theme-base.js b/packages/mermaid/src/themes/theme-base.js index 90d5b1446f..f785d9e0c2 100644 --- a/packages/mermaid/src/themes/theme-base.js +++ b/packages/mermaid/src/themes/theme-base.js @@ -249,7 +249,7 @@ class Theme { this.xyChart = { backgroundColor: this.xyChart?.backgroundColor || this.background, titleColor: this.xyChart?.titleColor || this.primaryTextColor, - axisLineColor: this.xyChart?.axisLineColor || this.primaryTextColor, + plotBorderColor: this.xyChart?.plotBorderColor || this.primaryTextColor, xAxisTitleColor: this.xyChart?.xAxisTitleColor || this.primaryTextColor, xAxisLableColor: this.xyChart?.xAxisLableColor || this.primaryTextColor, xAxisTickColor: this.xyChart?.xAxisTickColor || this.primaryTextColor, diff --git a/packages/mermaid/src/themes/theme-dark.js b/packages/mermaid/src/themes/theme-dark.js index 301255e0e4..b32750eac1 100644 --- a/packages/mermaid/src/themes/theme-dark.js +++ b/packages/mermaid/src/themes/theme-dark.js @@ -255,7 +255,7 @@ class Theme { this.xyChart = { backgroundColor: this.xyChart?.backgroundColor || this.background, titleColor: this.xyChart?.titleColor || this.primaryTextColor, - axisLineColor: this.xyChart?.axisLineColor || this.primaryTextColor, + plotBorderColor: this.xyChart?.plotBorderColor || this.primaryTextColor, xAxisTitleColor: this.xyChart?.xAxisTitleColor || this.primaryTextColor, xAxisLableColor: this.xyChart?.xAxisLableColor || this.primaryTextColor, xAxisTickColor: this.xyChart?.xAxisTickColor || this.primaryTextColor, diff --git a/packages/mermaid/src/themes/theme-default.js b/packages/mermaid/src/themes/theme-default.js index e95755947b..4ba78c8052 100644 --- a/packages/mermaid/src/themes/theme-default.js +++ b/packages/mermaid/src/themes/theme-default.js @@ -276,7 +276,7 @@ class Theme { this.xyChart = { backgroundColor: this.xyChart?.backgroundColor || this.background, titleColor: this.xyChart?.titleColor || this.primaryTextColor, - axisLineColor: this.xyChart?.axisLineColor || this.primaryTextColor, + plotBorderColor: this.xyChart?.plotBorderColor || this.primaryTextColor, xAxisTitleColor: this.xyChart?.xAxisTitleColor || this.primaryTextColor, xAxisLableColor: this.xyChart?.xAxisLableColor || this.primaryTextColor, xAxisTickColor: this.xyChart?.xAxisTickColor || this.primaryTextColor, diff --git a/packages/mermaid/src/themes/theme-forest.js b/packages/mermaid/src/themes/theme-forest.js index 3cdcdbdcef..b75d7c944d 100644 --- a/packages/mermaid/src/themes/theme-forest.js +++ b/packages/mermaid/src/themes/theme-forest.js @@ -244,7 +244,7 @@ class Theme { this.xyChart = { backgroundColor: this.xyChart?.backgroundColor || this.background, titleColor: this.xyChart?.titleColor || this.primaryTextColor, - axisLineColor: this.xyChart?.axisLineColor || this.primaryTextColor, + plotBorderColor: this.xyChart?.plotBorderColor || this.primaryTextColor, xAxisTitleColor: this.xyChart?.xAxisTitleColor || this.primaryTextColor, xAxisLableColor: this.xyChart?.xAxisLableColor || this.primaryTextColor, xAxisTickColor: this.xyChart?.xAxisTickColor || this.primaryTextColor, diff --git a/packages/mermaid/src/themes/theme-neutral.js b/packages/mermaid/src/themes/theme-neutral.js index dbde17d98c..44bcb5e675 100644 --- a/packages/mermaid/src/themes/theme-neutral.js +++ b/packages/mermaid/src/themes/theme-neutral.js @@ -275,7 +275,7 @@ class Theme { this.xyChart = { backgroundColor: this.xyChart?.backgroundColor || this.background, titleColor: this.xyChart?.titleColor || this.primaryTextColor, - axisLineColor: this.xyChart?.axisLineColor || this.primaryTextColor, + plotBorderColor: this.xyChart?.plotBorderColor || this.primaryTextColor, xAxisTitleColor: this.xyChart?.xAxisTitleColor || this.primaryTextColor, xAxisLableColor: this.xyChart?.xAxisLableColor || this.primaryTextColor, xAxisTickColor: this.xyChart?.xAxisTickColor || this.primaryTextColor, From 060d961f39953041b9a1bd9179fe89a81d3c6f21 Mon Sep 17 00:00:00 2001 From: Subhash Halder <halder.subhash@gmail.com> Date: Sat, 2 Sep 2023 21:15:21 +0530 Subject: [PATCH 035/457] Fixed directive related issue --- demos/xychart.html | 2 +- docs/syntax/xyChart.md | 8 ++++---- packages/mermaid/src/diagrams/xychart/xychartDb.ts | 8 ++++---- packages/mermaid/src/docs/syntax/xyChart.md | 6 +++--- 4 files changed, 12 insertions(+), 12 deletions(-) diff --git a/demos/xychart.html b/demos/xychart.html index 1a8d8c2913..4fc3a12491 100644 --- a/demos/xychart.html +++ b/demos/xychart.html @@ -66,7 +66,7 @@ <h1>XY Charts demos</h1> <h1>XY Charts demos</h1> <pre class="mermaid"> - %%{init: {"xychart": {"width": 500, "height": 400}, "themeVariables": {"xychart": {"titleColor": "#ff0000"} } }}%% + %%{init: {"xyChart": {"width": 600, "height": 400}, "themeVariables": {"xyChart": {"titleColor": "#ff0000"} } }}%% xychart-beta title "Basic xychart with many categories" x-axis "this is x axis" [category1, "category 2", category3, category4, category5, category6, category7] diff --git a/docs/syntax/xyChart.md b/docs/syntax/xyChart.md index 7e4303ba9f..6ec12e9fe3 100644 --- a/docs/syntax/xyChart.md +++ b/docs/syntax/xyChart.md @@ -131,8 +131,8 @@ Every grammer are optional other than the chart name and one data set, so you wi ## Chart Theme Variables > **Note** -> theames for xychart resides inside xychart attribute so to set the variables use this syntax -> %%{init: { "themeVariables": {"xychart": {"titleColor": "#ff0000"} } }}%% +> Themes for xychart resides inside xychart attribute so to set the variables use this syntax +> %%{init: { "themeVariables": {"xyChart": {"titleColor": "#ff0000"} } }}%% | Parameter | Description | | ---------------- | ------------------------------------------------------ | @@ -150,7 +150,7 @@ Every grammer are optional other than the chart name and one data set, so you wi ## Example on config and theme ```mermaid-example -%%{init: {"xychart": {"width": 500, "height": 400}, "themeVariables": {"xychart": {"titleColor": "#ff0000"} } }}%% +%%{init: {"xyChart": {"width": 500, "height": 400}, "themeVariables": {"xyChart": {"titleColor": "#ff0000"} } }}%% xychart-beta title "Sales Revenue" x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] @@ -160,7 +160,7 @@ xychart-beta ``` ```mermaid -%%{init: {"xychart": {"width": 500, "height": 400}, "themeVariables": {"xychart": {"titleColor": "#ff0000"} } }}%% +%%{init: {"xyChart": {"width": 500, "height": 400}, "themeVariables": {"xyChart": {"titleColor": "#ff0000"} } }}%% xychart-beta title "Sales Revenue" x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] diff --git a/packages/mermaid/src/diagrams/xychart/xychartDb.ts b/packages/mermaid/src/diagrams/xychart/xychartDb.ts index b8c7dd0a28..297a2b30df 100644 --- a/packages/mermaid/src/diagrams/xychart/xychartDb.ts +++ b/packages/mermaid/src/diagrams/xychart/xychartDb.ts @@ -27,10 +27,6 @@ import { getThemeVariables } from '../../themes/theme-default.js'; export type SVGGType = Selection<SVGGElement, unknown, Element | null, unknown>; -const defaultThemeVariables = getThemeVariables(); - -const config = configApi.getConfig(); - let plotIndex = 0; let tmpSVGGElem: SVGGType; @@ -48,12 +44,15 @@ interface NormalTextType { } function getChartDefaultThemeConfig(): XYChartThemeConfig { + const defaultThemeVariables = getThemeVariables(); + const config = configApi.getConfig(); return { ...defaultThemeVariables.xyChart, ...config.themeVariables?.xyChart, }; } function getChartDefaultConfig(): XYChartConfig { + const config = configApi.getConfig(); return { ...(defaultConfig.xyChart as XYChartConfig), ...config.xyChart, @@ -87,6 +86,7 @@ function getChartDefalutData(): XYChartData { } function textSanitizer(text: string) { + const config = configApi.getConfig(); return sanitizeText(text.trim(), config); } diff --git a/packages/mermaid/src/docs/syntax/xyChart.md b/packages/mermaid/src/docs/syntax/xyChart.md index 5e65cb6709..060cf8ae8e 100644 --- a/packages/mermaid/src/docs/syntax/xyChart.md +++ b/packages/mermaid/src/docs/syntax/xyChart.md @@ -125,8 +125,8 @@ xychart-beta ## Chart Theme Variables ```note -theames for xychart resides inside xychart attribute so to set the variables use this syntax -%%{init: { "themeVariables": {"xychart": {"titleColor": "#ff0000"} } }}%% +Themes for xychart resides inside xychart attribute so to set the variables use this syntax +%%{init: { "themeVariables": {"xyChart": {"titleColor": "#ff0000"} } }}%% ``` | Parameter | Description | @@ -145,7 +145,7 @@ theames for xychart resides inside xychart attribute so to set the variables use ## Example on config and theme ```mermaid-example -%%{init: {"xychart": {"width": 500, "height": 400}, "themeVariables": {"xychart": {"titleColor": "#ff0000"} } }}%% +%%{init: {"xyChart": {"width": 500, "height": 400}, "themeVariables": {"xyChart": {"titleColor": "#ff0000"} } }}%% xychart-beta title "Sales Revenue" x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] From cc5190c1baa0bcda51c3245cdf33ba75c231e399 Mon Sep 17 00:00:00 2001 From: Subhash Halder <halder.subhash@gmail.com> Date: Sun, 3 Sep 2023 13:38:47 +0530 Subject: [PATCH 036/457] Fix some space management issue --- demos/xychart.html | 11 ++ docs/syntax/xyChart.md | 31 ++-- packages/mermaid/src/config.type.ts | 28 +++- .../xychart/chartBuilder/Interfaces.ts | 10 +- .../xychart/chartBuilder/Orchestrator.ts | 22 +-- .../chartBuilder/components/ChartTitle.ts | 4 +- .../chartBuilder/components/axis/BaseAxis.ts | 135 ++++++++++++++---- .../chartBuilder/components/plot/index.ts | 10 +- .../src/diagrams/xychart/xychartRenderer.ts | 14 +- packages/mermaid/src/docs/syntax/xyChart.md | 29 ++-- .../mermaid/src/schemas/config.schema.yaml | 18 ++- packages/mermaid/src/themes/theme-base.js | 2 + packages/mermaid/src/themes/theme-dark.js | 2 + packages/mermaid/src/themes/theme-default.js | 2 + packages/mermaid/src/themes/theme-forest.js | 2 + packages/mermaid/src/themes/theme-neutral.js | 2 + 16 files changed, 232 insertions(+), 90 deletions(-) diff --git a/demos/xychart.html b/demos/xychart.html index 4fc3a12491..0d0bd8d009 100644 --- a/demos/xychart.html +++ b/demos/xychart.html @@ -92,6 +92,17 @@ <h1>XY Charts demos</h1> bar "sample bar" [52, 96, 35, 10, 87, 34, 67, 99] </pre> + <h1>XY Charts demos</h1> + <pre class="mermaid"> + %%{init: {"theme": "dark", "xyChart": {"width": 1000, "height": 600, "titlePadding": 5, "titleFontSize": 10, "xAxis": {"labelFontSize": "20", "labelPadding": 10, "titleFontSize": 30, "titlePadding": 20, "tickLength": 10, "tickWidth": 5, "axisLineWidth": 5}, "yAxis": {"labelFontSize": "20", "labelPadding": 10, "titleFontSize": 30, "titlePadding": 20, "tickLength": 10, "tickWidth": 5, "axisLineWidth": 5}, "chartOrientation": "horizontal", "plotReservedSpacePercent": 60 }}}%% + xychart-beta + title "Sales Revene" + x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] + y-axis "Revenue (in $)" 4000 --> 11000 + bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + + </pre> <hr /> <script type="module"> diff --git a/docs/syntax/xyChart.md b/docs/syntax/xyChart.md index 6ec12e9fe3..477473156d 100644 --- a/docs/syntax/xyChart.md +++ b/docs/syntax/xyChart.md @@ -110,23 +110,24 @@ Every grammer are optional other than the chart name and one data set, so you wi | showTitle | Title to be shown or not | true | | xAxis | xAxis configuration | AxisConfig | | yAxis | yAxis configuration | AxisConfig | -| plotBorderWidth | Width of the border around the plot | 2 | | chartOrientation | ('vertical' or 'horizontal') | 'vertical' | | plotReservedSpacePercent | Minimum space plots will take inside the chart | 50 | ### AxisConfig -| Parameter | Description | Default value | -| ------------- | -------------------------------------------- | :-----------: | -| showLabel | Show axis labels or tick values | true | -| labelFontSize | Font size of the label to be drawn | 14 | -| labelPadding | Top and Bottom padding of the label | 5 | -| showTitle | Axis title to be shown or not | true | -| titleFontSize | Axis title font size | 16 | -| titlePadding | Top and Bottom padding of Axis title | 5 | -| showTick | Tick along with the label to be shown or not | true | -| tickLength | How long the tick will be | 5 | -| tickWidth | How width the tick will be | 2 | +| Parameter | Description | Default value | +| ------------- | ------------------------------------ | :-----------: | +| showLabel | Show axis labels or tick values | true | +| labelFontSize | Font size of the label to be drawn | 14 | +| labelPadding | Top and Bottom padding of the label | 5 | +| showTitle | Axis title to be shown or not | true | +| titleFontSize | Axis title font size | 16 | +| titlePadding | Top and Bottom padding of Axis title | 5 | +| showTick | Tick to be shown or not | true | +| tickLength | How long the tick will be | 5 | +| tickWidth | How width the tick will be | 2 | +| showAxisLine | Axis line to be shown or not | true | +| axisLineWidth | Thickness of the axis line | 2 | ## Chart Theme Variables @@ -142,15 +143,17 @@ Every grammer are optional other than the chart name and one data set, so you wi | xAxisLableColor | Color of the x-axis labels | | xAxisTitleColor | Color of the x-axis title | | xAxisTickColor | Color of the x-axis tick | +| xAxisLineColor | Color of the x-axis line | | yAxisLableColor | Color of the y-axis labels | | yAxisTitleColor | Color of the y-axis title | | yAxisTickColor | Color of the y-axis tick | +| yAxisLineColor | Color of the y-axis line | | plotColorPalette | Array of colors for the plots eg \["#f3456", "#43445"] | ## Example on config and theme ```mermaid-example -%%{init: {"xyChart": {"width": 500, "height": 400}, "themeVariables": {"xyChart": {"titleColor": "#ff0000"} } }}%% +%%{init: {"xyChart": {"width": 900, "height": 600}, "themeVariables": {"xyChart": {"titleColor": "#ff0000"} } }}%% xychart-beta title "Sales Revenue" x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] @@ -160,7 +163,7 @@ xychart-beta ``` ```mermaid -%%{init: {"xyChart": {"width": 500, "height": 400}, "themeVariables": {"xyChart": {"titleColor": "#ff0000"} } }}%% +%%{init: {"xyChart": {"width": 900, "height": 600}, "themeVariables": {"xyChart": {"titleColor": "#ff0000"} } }}%% xychart-beta title "Sales Revenue" x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts index 77e3dbeb61..be20f2a4d2 100644 --- a/packages/mermaid/src/config.type.ts +++ b/packages/mermaid/src/config.type.ts @@ -747,6 +747,14 @@ export interface XYChartAxisConfig { * width of the axis tick lines */ tickWidth?: number; + /** + * Show line across the axis + */ + showAxisLine?: boolean; + /** + * Width of the axis line + */ + axisLineWidth?: number; } /** * This object contains configuration specific to XYCharts @@ -777,10 +785,6 @@ export interface XYChartConfig extends BaseDiagramConfig { showTitle?: boolean; xAxis?: XYChartAxisConfig1; yAxis?: XYChartAxisConfig2; - /** - * width of the line around the plot of the chart - */ - plotBorderWidth?: number; /** * How to plot will be drawn horizontal or vertical */ @@ -830,6 +834,14 @@ export interface XYChartAxisConfig1 { * width of the axis tick lines */ tickWidth?: number; + /** + * Show line across the axis + */ + showAxisLine?: boolean; + /** + * Width of the axis line + */ + axisLineWidth?: number; } /** * This object contains configuration for XYChart axis config @@ -871,6 +883,14 @@ export interface XYChartAxisConfig2 { * width of the axis tick lines */ tickWidth?: number; + /** + * Show line across the axis + */ + showAxisLine?: boolean; + /** + * Width of the axis line + */ + axisLineWidth?: number; } /** * The object containing configurations specific for entity relationship diagrams diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts index e23374aca4..33eb4f2270 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts @@ -2,6 +2,7 @@ export interface XYChartAxisThemeConfig { titleColor: string; labelColor: string; tickColor: string; + axisLineColor: string; } export interface XYChartThemeConfig { @@ -11,9 +12,11 @@ export interface XYChartThemeConfig { xAxisLableColor: string; xAxisTitleColor: string; xAxisTickColor: string; + xAxisLineColor: string; yAxisLableColor: string; yAxisTitleColor: string; yAxisTickColor: string; + yAxisLineColor: string; plotColorPalette: string; } @@ -81,6 +84,8 @@ export interface XYChartAxisConfig { showTick: boolean; tickLength: number; tickWidth: number; + showAxisLine: boolean; + axisLineWidth: number; } export interface XYChartConfig { @@ -91,7 +96,6 @@ export interface XYChartConfig { showTitle: boolean; xAxis: XYChartAxisConfig; yAxis: XYChartAxisConfig; - plotBorderWidth: number; chartOrientation: 'vertical' | 'horizontal'; plotReservedSpacePercent: number; } @@ -115,8 +119,8 @@ export interface Point { y: number; } -export type TextVerticalPos = 'left' | 'center' | 'right'; -export type TextHorizontalPos = 'top' | 'middle' | 'bottom'; +export type TextHorizontalPos = 'left' | 'center' | 'right'; +export type TextVerticalPos = 'top' | 'middle' | 'bottom'; export interface RectElem extends Point { width: number; diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts index b89d1c94e4..b008c9a294 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts @@ -32,6 +32,7 @@ export class Orchestrator { titleColor: chartThemeConfig.xAxisTitleColor, labelColor: chartThemeConfig.xAxisLableColor, tickColor: chartThemeConfig.xAxisTickColor, + axisLineColor: chartThemeConfig.xAxisLineColor, }, tmpSVGGElem ), @@ -42,6 +43,7 @@ export class Orchestrator { titleColor: chartThemeConfig.yAxisTitleColor, labelColor: chartThemeConfig.yAxisLableColor, tickColor: chartThemeConfig.yAxisTickColor, + axisLineColor: chartThemeConfig.yAxisLineColor, }, tmpSVGGElem ), @@ -94,11 +96,11 @@ export class Orchestrator { chartHeight += availableHeight; availableHeight = 0; } - const plotBorderWidthHalf = this.chartConfig.plotBorderWidth / 2; - plotX += plotBorderWidthHalf; - plotY += plotBorderWidthHalf; - chartWidth -= this.chartConfig.plotBorderWidth; - chartHeight -= this.chartConfig.plotBorderWidth; + // const plotBorderWidthHalf = this.chartConfig.plotBorderWidth / 2; + // plotX += plotBorderWidthHalf; + // plotY += plotBorderWidthHalf; + // chartWidth -= this.chartConfig.plotBorderWidth; + // chartHeight -= this.chartConfig.plotBorderWidth; this.componentStore.plot.calculateSpace({ width: chartWidth, height: chartHeight, @@ -166,11 +168,11 @@ export class Orchestrator { chartHeight += availableHeight; availableHeight = 0; } - const plotBorderWidthHalf = this.chartConfig.plotBorderWidth / 2; - plotX += plotBorderWidthHalf; - plotY += plotBorderWidthHalf; - chartWidth -= this.chartConfig.plotBorderWidth; - chartHeight -= this.chartConfig.plotBorderWidth; + // const plotBorderWidthHalf = this.chartConfig.plotBorderWidth / 2; + // plotX += plotBorderWidthHalf; + // plotY += plotBorderWidthHalf; + // chartWidth -= this.chartConfig.plotBorderWidth; + // chartHeight -= this.chartConfig.plotBorderWidth; this.componentStore.plot.calculateSpace({ width: chartWidth, height: chartHeight, diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts index 7a5bcf3416..99ccbb6da8 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts @@ -64,8 +64,8 @@ export class ChartTitle implements ChartComponent { { fontSize: this.chartConfig.titleFontSize, text: this.chartData.title, - verticalPos: 'center', - horizontalPos: 'middle', + verticalPos: 'middle', + horizontalPos: 'center', x: this.boundingRect.x + this.boundingRect.width / 2, y: this.boundingRect.y + this.boundingRect.height / 2, fill: this.chartThemeConfig.titleColor, diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts index 7bbaf57491..873455a3fe 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts @@ -20,6 +20,7 @@ export abstract class BaseAxis implements Axis { protected showTitle = false; protected showLabel = false; protected showTick = false; + protected showAxisLine = false; protected outerPadding = 0; constructor( @@ -35,6 +36,11 @@ export abstract class BaseAxis implements Axis { setRange(range: [number, number]): void { this.range = range; + if (this.axisPosition === 'left' || this.axisPosition === 'right') { + this.boundingRect.height = range[1] - range[0]; + } else { + this.boundingRect.width = range[1] - range[0]; + } this.recalculateScale(); } @@ -77,6 +83,10 @@ export abstract class BaseAxis implements Axis { private calculateSpaceIfDrawnHorizontally(availableSpace: Dimension) { let availableHeight = availableSpace.height; + if (this.axisConfig.showAxisLine && availableHeight > this.axisConfig.axisLineWidth) { + availableHeight -= this.axisConfig.axisLineWidth; + this.showAxisLine = true; + } if (this.axisConfig.showLabel) { const spaceRequired = this.getLabelDimension(); const maxPadding = MAX_OUTER_PADDING_PERCENT_FOR_WRT_LABEL * availableSpace.width; @@ -96,7 +106,7 @@ export abstract class BaseAxis implements Axis { if (this.axisConfig.showTitle && this.title) { const spaceRequired = this.textDimensionCalculator.getMaxDimension( [this.title], - this.axisConfig.labelFontSize + this.axisConfig.titleFontSize ); const heightRequired = spaceRequired.height + this.axisConfig.titlePadding * 2; log.trace('height required for axis title: ', heightRequired); @@ -111,6 +121,10 @@ export abstract class BaseAxis implements Axis { private calculateSpaceIfDrawnVertical(availableSpace: Dimension) { let availableWidth = availableSpace.width; + if (this.axisConfig.showAxisLine && availableWidth > this.axisConfig.axisLineWidth) { + availableWidth -= this.axisConfig.axisLineWidth; + this.showAxisLine = true; + } if (this.axisConfig.showLabel) { const spaceRequired = this.getLabelDimension(); const maxPadding = MAX_OUTER_PADDING_PERCENT_FOR_WRT_LABEL * availableSpace.height; @@ -129,9 +143,9 @@ export abstract class BaseAxis implements Axis { if (this.axisConfig.showTitle && this.title) { const spaceRequired = this.textDimensionCalculator.getMaxDimension( [this.title], - this.axisConfig.labelFontSize + this.axisConfig.titleFontSize ); - const widthRequired = spaceRequired.height + this.axisConfig.labelPadding * 2; + const widthRequired = spaceRequired.height + this.axisConfig.titlePadding * 2; log.trace('width required for axis title: ', widthRequired); if (widthRequired <= availableWidth) { availableWidth -= widthRequired; @@ -166,6 +180,22 @@ export abstract class BaseAxis implements Axis { private getDrawaableElementsForLeftAxis(): DrawableElem[] { const drawableElement: DrawableElem[] = []; + if (this.showAxisLine) { + const x = this.boundingRect.x + this.boundingRect.width - this.axisConfig.axisLineWidth / 2; + drawableElement.push({ + type: 'path', + groupTexts: ['left-axis', 'axisl-line'], + data: [ + { + path: `M ${x},${this.boundingRect.y} L ${x},${ + this.boundingRect.y + this.boundingRect.height + } `, + strokeFill: this.axisThemeConfig.axisLineColor, + strokeWidth: this.axisConfig.axisLineWidth, + }, + ], + }); + } if (this.showLabel) { drawableElement.push({ type: 'text', @@ -175,19 +205,23 @@ export abstract class BaseAxis implements Axis { x: this.boundingRect.x + this.boundingRect.width - - this.axisConfig.labelPadding - - this.axisConfig.tickLength, + (this.showLabel ? this.axisConfig.labelPadding : 0) - + (this.showTick ? this.axisConfig.tickLength : 0) - + (this.showAxisLine ? this.axisConfig.axisLineWidth : 0), y: this.getScaleValue(tick), fill: this.axisThemeConfig.labelColor, fontSize: this.axisConfig.labelFontSize, rotation: 0, - verticalPos: 'right', - horizontalPos: 'middle', + verticalPos: 'middle', + horizontalPos: 'right', })), }); } if (this.showTick) { - const x = this.boundingRect.x + this.boundingRect.width; + const x = + this.boundingRect.x + + this.boundingRect.width - + (this.showAxisLine ? this.axisConfig.axisLineWidth : 0); drawableElement.push({ type: 'path', groupTexts: ['left-axis', 'ticks'], @@ -208,12 +242,12 @@ export abstract class BaseAxis implements Axis { { text: this.title, x: this.boundingRect.x + this.axisConfig.titlePadding, - y: this.range[0] + (this.range[1] - this.range[0]) / 2, + y: this.boundingRect.y + this.boundingRect.height / 2, fill: this.axisThemeConfig.titleColor, fontSize: this.axisConfig.titleFontSize, rotation: 270, - verticalPos: 'center', - horizontalPos: 'top', + verticalPos: 'top', + horizontalPos: 'center', }, ], }); @@ -222,6 +256,22 @@ export abstract class BaseAxis implements Axis { } private getDrawaableElementsForBottomAxis(): DrawableElem[] { const drawableElement: DrawableElem[] = []; + if (this.showAxisLine) { + const y = this.boundingRect.y + this.axisConfig.axisLineWidth / 2; + drawableElement.push({ + type: 'path', + groupTexts: ['bottom-axis', 'axis-line'], + data: [ + { + path: `M ${this.boundingRect.x},${y} L ${ + this.boundingRect.x + this.boundingRect.width + },${y}`, + strokeFill: this.axisThemeConfig.axisLineColor, + strokeWidth: this.axisConfig.axisLineWidth, + }, + ], + }); + } if (this.showLabel) { drawableElement.push({ type: 'text', @@ -229,12 +279,16 @@ export abstract class BaseAxis implements Axis { data: this.getTickValues().map((tick) => ({ text: tick.toString(), x: this.getScaleValue(tick), - y: this.boundingRect.y + this.axisConfig.labelPadding + this.axisConfig.tickLength, + y: + this.boundingRect.y + + (this.showLabel ? this.axisConfig.labelPadding : 0) + + (this.showTitle ? this.axisConfig.tickLength : 0) + + (this.showAxisLine ? this.axisConfig.axisLineWidth : 0), fill: this.axisThemeConfig.labelColor, fontSize: this.axisConfig.labelFontSize, rotation: 0, - verticalPos: 'center', - horizontalPos: 'top', + verticalPos: 'top', + horizontalPos: 'center', })), }); } @@ -244,8 +298,12 @@ export abstract class BaseAxis implements Axis { type: 'path', groupTexts: ['bottom-axis', 'ticks'], data: this.getTickValues().map((tick) => ({ - path: `M ${this.getScaleValue(tick)},${y} L ${this.getScaleValue(tick)},${ - y + this.axisConfig.tickLength + path: `M ${this.getScaleValue(tick)},${ + y + (this.showAxisLine ? this.axisConfig.axisLineWidth : 0) + } L ${this.getScaleValue(tick)},${ + y + + (this.showTick ? this.axisConfig.tickLength : 0) + + (this.showAxisLine ? this.axisConfig.axisLineWidth : 0) }`, strokeFill: this.axisThemeConfig.tickColor, strokeWidth: this.axisConfig.tickWidth, @@ -264,8 +322,8 @@ export abstract class BaseAxis implements Axis { fill: this.axisThemeConfig.titleColor, fontSize: this.axisConfig.titleFontSize, rotation: 0, - verticalPos: 'center', - horizontalPos: 'bottom', + verticalPos: 'bottom', + horizontalPos: 'center', }, ], }); @@ -274,6 +332,22 @@ export abstract class BaseAxis implements Axis { } private getDrawaableElementsForTopAxis(): DrawableElem[] { const drawableElement: DrawableElem[] = []; + if (this.showAxisLine) { + const y = this.boundingRect.y + this.boundingRect.height - this.axisConfig.axisLineWidth / 2; + drawableElement.push({ + type: 'path', + groupTexts: ['top-axis', 'axis-line'], + data: [ + { + path: `M ${this.boundingRect.x},${y} L ${ + this.boundingRect.x + this.boundingRect.width + },${y}`, + strokeFill: this.axisThemeConfig.axisLineColor, + strokeWidth: this.axisConfig.axisLineWidth, + }, + ], + }); + } if (this.showLabel) { drawableElement.push({ type: 'text', @@ -283,14 +357,16 @@ export abstract class BaseAxis implements Axis { x: this.getScaleValue(tick), y: this.boundingRect.y + - this.boundingRect.height - - this.axisConfig.labelPadding - - this.axisConfig.tickLength, + (this.showTitle + ? this.axisConfig.titleFontSize + + this.axisConfig.labelPadding + + this.axisConfig.titlePadding * 2 + : 0), fill: this.axisThemeConfig.labelColor, fontSize: this.axisConfig.labelFontSize, rotation: 0, - verticalPos: 'center', - horizontalPos: 'bottom', + verticalPos: 'top', + horizontalPos: 'center', })), }); } @@ -301,9 +377,12 @@ export abstract class BaseAxis implements Axis { groupTexts: ['bottom-axis', 'ticks'], data: this.getTickValues().map((tick) => ({ path: `M ${this.getScaleValue(tick)},${ - y + this.boundingRect.height + y + this.boundingRect.height - (this.showAxisLine ? this.axisConfig.axisLineWidth : 0) } L ${this.getScaleValue(tick)},${ - y + this.boundingRect.height - this.axisConfig.tickLength + y + + this.boundingRect.height - + this.axisConfig.tickLength - + (this.showAxisLine ? this.axisConfig.axisLineWidth : 0) }`, strokeFill: this.axisThemeConfig.tickColor, strokeWidth: this.axisConfig.tickWidth, @@ -317,13 +396,13 @@ export abstract class BaseAxis implements Axis { data: [ { text: this.title, - x: this.range[0] + (this.range[1] - this.range[0]) / 2, + x: this.boundingRect.x + this.boundingRect.width / 2, y: this.boundingRect.y + this.axisConfig.titlePadding, fill: this.axisThemeConfig.titleColor, fontSize: this.axisConfig.titleFontSize, rotation: 0, - verticalPos: 'center', - horizontalPos: 'top', + verticalPos: 'top', + horizontalPos: 'center', }, ], }); diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts index 027ba7c7a1..2d45d795c2 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts @@ -56,11 +56,11 @@ export class Plot implements Plot { throw Error('Axes must be passed to render Plots'); } const drawableElem: DrawableElem[] = [ - ...new PlotBorder( - this.boundingRect, - this.chartConfig.chartOrientation, - this.chartThemeConfig - ).getDrawableElement(), + // ...new PlotBorder( + // this.boundingRect, + // this.chartConfig.chartOrientation, + // this.chartThemeConfig + // ).getDrawableElement(), ]; for (const [i, plot] of this.chartData.plots.entries()) { switch (plot.type) { diff --git a/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts b/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts index 8f999cb00c..19d9d35e47 100644 --- a/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts +++ b/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts @@ -14,11 +14,15 @@ export const draw = (txt: string, id: string, _version: string, diagObj: Diagram const db = diagObj.db as typeof XYChartDB; const themeConfig = db.getChartThemeConfig(); const chartConfig = db.getChartConfig(); - function getDominantBaseLine(horizontalPos: TextHorizontalPos) { - return horizontalPos === 'top' ? 'hanging' : 'middle'; + function getDominantBaseLine(horizontalPos: TextVerticalPos) { + return horizontalPos === 'top' + ? 'text-before-edge' + : horizontalPos === 'bottom' + ? 'text-after-edge' + : 'middle'; } - function getTextAnchor(verticalPos: TextVerticalPos) { + function getTextAnchor(verticalPos: TextHorizontalPos) { return verticalPos === 'left' ? 'start' : verticalPos === 'right' ? 'end' : 'middle'; } @@ -108,8 +112,8 @@ export const draw = (txt: string, id: string, _version: string, diagObj: Diagram .attr('y', 0) .attr('fill', (data) => data.fill) .attr('font-size', (data) => data.fontSize) - .attr('dominant-baseline', (data) => getDominantBaseLine(data.horizontalPos)) - .attr('text-anchor', (data) => getTextAnchor(data.verticalPos)) + .attr('dominant-baseline', (data) => getDominantBaseLine(data.verticalPos)) + .attr('text-anchor', (data) => getTextAnchor(data.horizontalPos)) .attr('transform', (data) => getTextTransformation(data)) .text((data) => data.text); break; diff --git a/packages/mermaid/src/docs/syntax/xyChart.md b/packages/mermaid/src/docs/syntax/xyChart.md index 060cf8ae8e..52b765a602 100644 --- a/packages/mermaid/src/docs/syntax/xyChart.md +++ b/packages/mermaid/src/docs/syntax/xyChart.md @@ -104,23 +104,24 @@ xychart-beta | showTitle | Title to be shown or not | true | | xAxis | xAxis configuration | AxisConfig | | yAxis | yAxis configuration | AxisConfig | -| plotBorderWidth | Width of the border around the plot | 2 | | chartOrientation | ('vertical' or 'horizontal') | 'vertical' | | plotReservedSpacePercent | Minimum space plots will take inside the chart | 50 | ### AxisConfig -| Parameter | Description | Default value | -| ------------- | -------------------------------------------- | :-----------: | -| showLabel | Show axis labels or tick values | true | -| labelFontSize | Font size of the label to be drawn | 14 | -| labelPadding | Top and Bottom padding of the label | 5 | -| showTitle | Axis title to be shown or not | true | -| titleFontSize | Axis title font size | 16 | -| titlePadding | Top and Bottom padding of Axis title | 5 | -| showTick | Tick along with the label to be shown or not | true | -| tickLength | How long the tick will be | 5 | -| tickWidth | How width the tick will be | 2 | +| Parameter | Description | Default value | +| ------------- | ------------------------------------ | :-----------: | +| showLabel | Show axis labels or tick values | true | +| labelFontSize | Font size of the label to be drawn | 14 | +| labelPadding | Top and Bottom padding of the label | 5 | +| showTitle | Axis title to be shown or not | true | +| titleFontSize | Axis title font size | 16 | +| titlePadding | Top and Bottom padding of Axis title | 5 | +| showTick | Tick to be shown or not | true | +| tickLength | How long the tick will be | 5 | +| tickWidth | How width the tick will be | 2 | +| showAxisLine | Axis line to be shown or not | true | +| axisLineWidth | Thickness of the axis line | 2 | ## Chart Theme Variables @@ -137,15 +138,17 @@ Themes for xychart resides inside xychart attribute so to set the variables use | xAxisLableColor | Color of the x-axis labels | | xAxisTitleColor | Color of the x-axis title | | xAxisTickColor | Color of the x-axis tick | +| xAxisLineColor | Color of the x-axis line | | yAxisLableColor | Color of the y-axis labels | | yAxisTitleColor | Color of the y-axis title | | yAxisTickColor | Color of the y-axis tick | +| yAxisLineColor | Color of the y-axis line | | plotColorPalette | Array of colors for the plots eg ["#f3456", "#43445"] | ## Example on config and theme ```mermaid-example -%%{init: {"xyChart": {"width": 500, "height": 400}, "themeVariables": {"xyChart": {"titleColor": "#ff0000"} } }}%% +%%{init: {"xyChart": {"width": 900, "height": 600}, "themeVariables": {"xyChart": {"titleColor": "#ff0000"} } }}%% xychart-beta title "Sales Revenue" x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] diff --git a/packages/mermaid/src/schemas/config.schema.yaml b/packages/mermaid/src/schemas/config.schema.yaml index d7f5cdae37..da809985c8 100644 --- a/packages/mermaid/src/schemas/config.schema.yaml +++ b/packages/mermaid/src/schemas/config.schema.yaml @@ -1000,6 +1000,8 @@ $defs: # JSON Schema definition (maybe we should move these to a seperate file) - showTick - tickLength - tickWidth + - showAxisLine + - axisLineWidth properties: showLabel: description: Should show the axis labels (tick text) @@ -1043,6 +1045,16 @@ $defs: # JSON Schema definition (maybe we should move these to a seperate file) type: integer default: 2 minimum: 1 + showAxisLine: + description: Show line across the axis + type: boolean + default: true + axisLineWidth: + description: Width of the axis line + type: integer + default: 2 + minimum: 1 + XYChartConfig: title: XYChart Config allOf: [{ $ref: '#/$defs/BaseDiagramConfig' }] @@ -1057,7 +1069,6 @@ $defs: # JSON Schema definition (maybe we should move these to a seperate file) - xAxis - yAxis - showTitle - - plotBorderWidth - chartOrientation - plotReservedSpacePercent properties: @@ -1091,11 +1102,6 @@ $defs: # JSON Schema definition (maybe we should move these to a seperate file) yAxis: $ref: '#/$defs/XYChartAxisConfig' default: { '$ref': '#/$defs/XYChartAxisConfig' } - plotBorderWidth: - description: width of the line around the plot of the chart - type: integer - default: 2 - minimum: 0 chartOrientation: description: How to plot will be drawn horizontal or vertical tsType: '"vertical" | "horizontal"' diff --git a/packages/mermaid/src/themes/theme-base.js b/packages/mermaid/src/themes/theme-base.js index f785d9e0c2..db7fd2ba15 100644 --- a/packages/mermaid/src/themes/theme-base.js +++ b/packages/mermaid/src/themes/theme-base.js @@ -253,9 +253,11 @@ class Theme { xAxisTitleColor: this.xyChart?.xAxisTitleColor || this.primaryTextColor, xAxisLableColor: this.xyChart?.xAxisLableColor || this.primaryTextColor, xAxisTickColor: this.xyChart?.xAxisTickColor || this.primaryTextColor, + xAxisLineColor: this.xyChart?.xAxisLineColor || this.primaryTextColor, yAxisTitleColor: this.xyChart?.yAxisTitleColor || this.primaryTextColor, yAxisLableColor: this.xyChart?.yAxisLableColor || this.primaryTextColor, yAxisTickColor: this.xyChart?.yAxisTickColor || this.primaryTextColor, + yAxisLineColor: this.xyChart?.yAxisLineColor || this.primaryTextColor, plotColorPalette: this.xyChart?.plotColorPalette || [ '#FFF4DD', '#FFD8B1', diff --git a/packages/mermaid/src/themes/theme-dark.js b/packages/mermaid/src/themes/theme-dark.js index b32750eac1..c4354736b9 100644 --- a/packages/mermaid/src/themes/theme-dark.js +++ b/packages/mermaid/src/themes/theme-dark.js @@ -259,9 +259,11 @@ class Theme { xAxisTitleColor: this.xyChart?.xAxisTitleColor || this.primaryTextColor, xAxisLableColor: this.xyChart?.xAxisLableColor || this.primaryTextColor, xAxisTickColor: this.xyChart?.xAxisTickColor || this.primaryTextColor, + xAxisLineColor: this.xyChart?.xAxisLineColor || this.primaryTextColor, yAxisTitleColor: this.xyChart?.yAxisTitleColor || this.primaryTextColor, yAxisLableColor: this.xyChart?.yAxisLableColor || this.primaryTextColor, yAxisTickColor: this.xyChart?.yAxisTickColor || this.primaryTextColor, + yAxisLineColor: this.xyChart?.yAxisLineColor || this.primaryTextColor, plotColorPalette: this.xyChart?.plotColorPalette || [ '#3498db', '#2ecc71', diff --git a/packages/mermaid/src/themes/theme-default.js b/packages/mermaid/src/themes/theme-default.js index 4ba78c8052..ea3d20a5af 100644 --- a/packages/mermaid/src/themes/theme-default.js +++ b/packages/mermaid/src/themes/theme-default.js @@ -280,9 +280,11 @@ class Theme { xAxisTitleColor: this.xyChart?.xAxisTitleColor || this.primaryTextColor, xAxisLableColor: this.xyChart?.xAxisLableColor || this.primaryTextColor, xAxisTickColor: this.xyChart?.xAxisTickColor || this.primaryTextColor, + xAxisLineColor: this.xyChart?.xAxisLineColor || this.primaryTextColor, yAxisTitleColor: this.xyChart?.yAxisTitleColor || this.primaryTextColor, yAxisLableColor: this.xyChart?.yAxisLableColor || this.primaryTextColor, yAxisTickColor: this.xyChart?.yAxisTickColor || this.primaryTextColor, + yAxisLineColor: this.xyChart?.yAxisLineColor || this.primaryTextColor, plotColorPalette: this.xyChart?.plotColorPalette || [ '#ECECFF', '#8493A6', diff --git a/packages/mermaid/src/themes/theme-forest.js b/packages/mermaid/src/themes/theme-forest.js index b75d7c944d..0b5300d677 100644 --- a/packages/mermaid/src/themes/theme-forest.js +++ b/packages/mermaid/src/themes/theme-forest.js @@ -248,9 +248,11 @@ class Theme { xAxisTitleColor: this.xyChart?.xAxisTitleColor || this.primaryTextColor, xAxisLableColor: this.xyChart?.xAxisLableColor || this.primaryTextColor, xAxisTickColor: this.xyChart?.xAxisTickColor || this.primaryTextColor, + xAxisLineColor: this.xyChart?.xAxisLineColor || this.primaryTextColor, yAxisTitleColor: this.xyChart?.yAxisTitleColor || this.primaryTextColor, yAxisLableColor: this.xyChart?.yAxisLableColor || this.primaryTextColor, yAxisTickColor: this.xyChart?.yAxisTickColor || this.primaryTextColor, + yAxisLineColor: this.xyChart?.yAxisLineColor || this.primaryTextColor, plotColorPalette: this.xyChart?.plotColorPalette || [ '#CDE498', '#FF6B6B', diff --git a/packages/mermaid/src/themes/theme-neutral.js b/packages/mermaid/src/themes/theme-neutral.js index 44bcb5e675..26f84c38dd 100644 --- a/packages/mermaid/src/themes/theme-neutral.js +++ b/packages/mermaid/src/themes/theme-neutral.js @@ -279,9 +279,11 @@ class Theme { xAxisTitleColor: this.xyChart?.xAxisTitleColor || this.primaryTextColor, xAxisLableColor: this.xyChart?.xAxisLableColor || this.primaryTextColor, xAxisTickColor: this.xyChart?.xAxisTickColor || this.primaryTextColor, + xAxisLineColor: this.xyChart?.xAxisLineColor || this.primaryTextColor, yAxisTitleColor: this.xyChart?.yAxisTitleColor || this.primaryTextColor, yAxisLableColor: this.xyChart?.yAxisLableColor || this.primaryTextColor, yAxisTickColor: this.xyChart?.yAxisTickColor || this.primaryTextColor, + yAxisLineColor: this.xyChart?.yAxisLineColor || this.primaryTextColor, plotColorPalette: this.xyChart?.plotColorPalette || [ '#EEE', '#6BB8E4', From c3a9bb9a2326eb13ec25e58e77f4482e648e9023 Mon Sep 17 00:00:00 2001 From: Subhash Halder <halder.subhash@gmail.com> Date: Sun, 3 Sep 2023 20:48:10 +0530 Subject: [PATCH 037/457] Fixed more edge cases --- demos/xychart.html | 14 ++++++ docs/syntax/xyChart.md | 27 +++++----- .../xychart/chartBuilder/Interfaces.ts | 7 ++- .../xychart/chartBuilder/Orchestrator.ts | 14 +----- .../chartBuilder/components/ChartTitle.ts | 8 +-- .../chartBuilder/components/axis/BaseAxis.ts | 42 ++++++++-------- .../components/plot/PlotBorder.ts | 49 ------------------- .../chartBuilder/components/plot/index.ts | 9 +--- .../mermaid/src/diagrams/xychart/xychartDb.ts | 6 +-- .../src/diagrams/xychart/xychartRenderer.ts | 6 +-- packages/mermaid/src/docs/syntax/xyChart.md | 27 +++++----- packages/mermaid/src/themes/theme-base.js | 20 ++------ packages/mermaid/src/themes/theme-dark.js | 20 ++------ packages/mermaid/src/themes/theme-default.js | 20 ++------ packages/mermaid/src/themes/theme-forest.js | 20 ++------ packages/mermaid/src/themes/theme-neutral.js | 20 ++------ 16 files changed, 100 insertions(+), 209 deletions(-) delete mode 100644 packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/PlotBorder.ts diff --git a/demos/xychart.html b/demos/xychart.html index 0d0bd8d009..927047129d 100644 --- a/demos/xychart.html +++ b/demos/xychart.html @@ -92,6 +92,20 @@ <h1>XY Charts demos</h1> bar "sample bar" [52, 96, 35, 10, 87, 34, 67, 99] </pre> + <h1>sparkline demos</h1> + <pre class="mermaid"> + %%{init: {"theme":"dark", "xyChart": { "width":200, "height": 20, "plotReservedSpacePercent": 100}}}%% + xychart-beta + line [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800] + </pre> + + <h1>sparkBar demos</h1> + <pre class="mermaid"> + %%{init: {"theme":"dark", "xyChart": {"width": 200, "height": 20, "xAxis": {"showLabel": false, "showTitle": false, "showTick":false, "showAxisLine": false}, "yAxis": {"showLabel": false, "showTitle": false, "showTick":false, "showAxisLine": false}}}}%% + xychart-beta + bar [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800] + </pre> + <h1>XY Charts demos</h1> <pre class="mermaid"> %%{init: {"theme": "dark", "xyChart": {"width": 1000, "height": 600, "titlePadding": 5, "titleFontSize": 10, "xAxis": {"labelFontSize": "20", "labelPadding": 10, "titleFontSize": 30, "titlePadding": 20, "tickLength": 10, "tickWidth": 5, "axisLineWidth": 5}, "yAxis": {"labelFontSize": "20", "labelPadding": 10, "titleFontSize": 30, "titlePadding": 20, "tickLength": 10, "tickWidth": 5, "axisLineWidth": 5}, "chartOrientation": "horizontal", "plotReservedSpacePercent": 60 }}}%% diff --git a/docs/syntax/xyChart.md b/docs/syntax/xyChart.md index 477473156d..4ee83bdba8 100644 --- a/docs/syntax/xyChart.md +++ b/docs/syntax/xyChart.md @@ -135,20 +135,19 @@ Every grammer are optional other than the chart name and one data set, so you wi > Themes for xychart resides inside xychart attribute so to set the variables use this syntax > %%{init: { "themeVariables": {"xyChart": {"titleColor": "#ff0000"} } }}%% -| Parameter | Description | -| ---------------- | ------------------------------------------------------ | -| backgroundColor | Background color of the whole chart | -| titleColor | Color of the Title text | -| plotBorderColor | Color of the plot border | -| xAxisLableColor | Color of the x-axis labels | -| xAxisTitleColor | Color of the x-axis title | -| xAxisTickColor | Color of the x-axis tick | -| xAxisLineColor | Color of the x-axis line | -| yAxisLableColor | Color of the y-axis labels | -| yAxisTitleColor | Color of the y-axis title | -| yAxisTickColor | Color of the y-axis tick | -| yAxisLineColor | Color of the y-axis line | -| plotColorPalette | Array of colors for the plots eg \["#f3456", "#43445"] | +| Parameter | Description | +| ---------------- | ------------------------------------------------------- | +| backgroundColor | Background color of the whole chart | +| titleColor | Color of the Title text | +| xAxisLableColor | Color of the x-axis labels | +| xAxisTitleColor | Color of the x-axis title | +| xAxisTickColor | Color of the x-axis tick | +| xAxisLineColor | Color of the x-axis line | +| yAxisLableColor | Color of the y-axis labels | +| yAxisTitleColor | Color of the y-axis title | +| yAxisTickColor | Color of the y-axis tick | +| yAxisLineColor | Color of the y-axis line | +| plotColorPalette | String of colors seperated by comma eg "#f3456, #43445" | ## Example on config and theme diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts index 33eb4f2270..3d188895f2 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts @@ -8,12 +8,11 @@ export interface XYChartAxisThemeConfig { export interface XYChartThemeConfig { backgroundColor: string; titleColor: string; - plotBorderColor: string; - xAxisLableColor: string; + xAxisLabelColor: string; xAxisTitleColor: string; xAxisTickColor: string; xAxisLineColor: string; - yAxisLableColor: string; + yAxisLabelColor: string; yAxisTitleColor: string; yAxisTickColor: string; yAxisLineColor: string; @@ -120,7 +119,7 @@ export interface Point { } export type TextHorizontalPos = 'left' | 'center' | 'right'; -export type TextVerticalPos = 'top' | 'middle' | 'bottom'; +export type TextVerticalPos = 'top' | 'middle'; export interface RectElem extends Point { width: number; diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts index b008c9a294..256a103eb7 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts @@ -30,7 +30,7 @@ export class Orchestrator { chartConfig.xAxis, { titleColor: chartThemeConfig.xAxisTitleColor, - labelColor: chartThemeConfig.xAxisLableColor, + labelColor: chartThemeConfig.xAxisLabelColor, tickColor: chartThemeConfig.xAxisTickColor, axisLineColor: chartThemeConfig.xAxisLineColor, }, @@ -41,7 +41,7 @@ export class Orchestrator { chartConfig.yAxis, { titleColor: chartThemeConfig.yAxisTitleColor, - labelColor: chartThemeConfig.yAxisLableColor, + labelColor: chartThemeConfig.yAxisLabelColor, tickColor: chartThemeConfig.yAxisTickColor, axisLineColor: chartThemeConfig.yAxisLineColor, }, @@ -96,11 +96,6 @@ export class Orchestrator { chartHeight += availableHeight; availableHeight = 0; } - // const plotBorderWidthHalf = this.chartConfig.plotBorderWidth / 2; - // plotX += plotBorderWidthHalf; - // plotY += plotBorderWidthHalf; - // chartWidth -= this.chartConfig.plotBorderWidth; - // chartHeight -= this.chartConfig.plotBorderWidth; this.componentStore.plot.calculateSpace({ width: chartWidth, height: chartHeight, @@ -168,11 +163,6 @@ export class Orchestrator { chartHeight += availableHeight; availableHeight = 0; } - // const plotBorderWidthHalf = this.chartConfig.plotBorderWidth / 2; - // plotX += plotBorderWidthHalf; - // plotY += plotBorderWidthHalf; - // chartWidth -= this.chartConfig.plotBorderWidth; - // chartHeight -= this.chartConfig.plotBorderWidth; this.componentStore.plot.calculateSpace({ width: chartWidth, height: chartHeight, diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts index 99ccbb6da8..18dd38b710 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts @@ -27,7 +27,7 @@ export class ChartTitle implements ChartComponent { width: 0, height: 0, }; - this.showChartTitle = !!(this.chartData.title && this.chartConfig.showTitle); + this.showChartTitle = false; } setBoundingBoxXY(point: Point): void { this.boundingRect.x = point.x; @@ -43,10 +43,12 @@ export class ChartTitle implements ChartComponent { if ( titleDimension.width <= widthRequired && titleDimension.height <= heightRequired && - this.showChartTitle + this.chartConfig.showTitle && + this.chartData.title ) { this.boundingRect.width = widthRequired; this.boundingRect.height = heightRequired; + this.showChartTitle = true; } return { @@ -56,7 +58,7 @@ export class ChartTitle implements ChartComponent { } getDrawableElements(): DrawableElem[] { const drawableElem: DrawableElem[] = []; - if (this.boundingRect.height > 0 && this.boundingRect.width > 0) { + if (this.showChartTitle) { drawableElem.push({ groupTexts: ['chart-title'], type: 'text', diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts index 873455a3fe..1f16990285 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts @@ -22,6 +22,8 @@ export abstract class BaseAxis implements Axis { protected showTick = false; protected showAxisLine = false; protected outerPadding = 0; + protected titleTextHeight = 0; + protected labelTextHeight = 0; constructor( protected axisConfig: XYChartAxisConfig, @@ -93,6 +95,7 @@ export abstract class BaseAxis implements Axis { this.outerPadding = Math.min(spaceRequired.width / 2, maxPadding); const heightRequired = spaceRequired.height + this.axisConfig.labelPadding * 2; + this.labelTextHeight = spaceRequired.height; log.trace('height required for axis label: ', heightRequired); if (heightRequired <= availableHeight) { availableHeight -= heightRequired; @@ -109,6 +112,7 @@ export abstract class BaseAxis implements Axis { this.axisConfig.titleFontSize ); const heightRequired = spaceRequired.height + this.axisConfig.titlePadding * 2; + this.titleTextHeight = spaceRequired.height; log.trace('height required for axis title: ', heightRequired); if (heightRequired <= availableHeight) { availableHeight -= heightRequired; @@ -146,6 +150,7 @@ export abstract class BaseAxis implements Axis { this.axisConfig.titleFontSize ); const widthRequired = spaceRequired.height + this.axisConfig.titlePadding * 2; + this.titleTextHeight = spaceRequired.height; log.trace('width required for axis title: ', widthRequired); if (widthRequired <= availableWidth) { availableWidth -= widthRequired; @@ -157,10 +162,6 @@ export abstract class BaseAxis implements Axis { } calculateSpace(availableSpace: Dimension): Dimension { - if (!(this.axisConfig.showLabel || this.axisConfig.showTitle)) { - this.recalculateScale(); - return { width: 0, height: 0 }; - } if (this.axisPosition === 'left' || this.axisPosition === 'right') { this.calculateSpaceIfDrawnVertical(availableSpace); } else { @@ -281,8 +282,8 @@ export abstract class BaseAxis implements Axis { x: this.getScaleValue(tick), y: this.boundingRect.y + - (this.showLabel ? this.axisConfig.labelPadding : 0) + - (this.showTitle ? this.axisConfig.tickLength : 0) + + this.axisConfig.labelPadding + + (this.showTick ? this.axisConfig.tickLength : 0) + (this.showAxisLine ? this.axisConfig.axisLineWidth : 0), fill: this.axisThemeConfig.labelColor, fontSize: this.axisConfig.labelFontSize, @@ -293,17 +294,13 @@ export abstract class BaseAxis implements Axis { }); } if (this.showTick) { - const y = this.boundingRect.y; + const y = this.boundingRect.y + (this.showAxisLine ? this.axisConfig.axisLineWidth : 0); drawableElement.push({ type: 'path', groupTexts: ['bottom-axis', 'ticks'], data: this.getTickValues().map((tick) => ({ - path: `M ${this.getScaleValue(tick)},${ - y + (this.showAxisLine ? this.axisConfig.axisLineWidth : 0) - } L ${this.getScaleValue(tick)},${ - y + - (this.showTick ? this.axisConfig.tickLength : 0) + - (this.showAxisLine ? this.axisConfig.axisLineWidth : 0) + path: `M ${this.getScaleValue(tick)},${y} L ${this.getScaleValue(tick)},${ + y + this.axisConfig.tickLength }`, strokeFill: this.axisThemeConfig.tickColor, strokeWidth: this.axisConfig.tickWidth, @@ -318,11 +315,15 @@ export abstract class BaseAxis implements Axis { { text: this.title, x: this.range[0] + (this.range[1] - this.range[0]) / 2, - y: this.boundingRect.y + this.boundingRect.height - this.axisConfig.titlePadding, + y: + this.boundingRect.y + + this.boundingRect.height - + this.axisConfig.titlePadding - + this.titleTextHeight, fill: this.axisThemeConfig.titleColor, fontSize: this.axisConfig.titleFontSize, rotation: 0, - verticalPos: 'bottom', + verticalPos: 'top', horizontalPos: 'center', }, ], @@ -357,11 +358,8 @@ export abstract class BaseAxis implements Axis { x: this.getScaleValue(tick), y: this.boundingRect.y + - (this.showTitle - ? this.axisConfig.titleFontSize + - this.axisConfig.labelPadding + - this.axisConfig.titlePadding * 2 - : 0), + (this.showTitle ? this.titleTextHeight + this.axisConfig.titlePadding * 2 : 0) + + this.axisConfig.labelPadding, fill: this.axisThemeConfig.labelColor, fontSize: this.axisConfig.labelFontSize, rotation: 0, @@ -374,7 +372,7 @@ export abstract class BaseAxis implements Axis { const y = this.boundingRect.y; drawableElement.push({ type: 'path', - groupTexts: ['bottom-axis', 'ticks'], + groupTexts: ['top-axis', 'ticks'], data: this.getTickValues().map((tick) => ({ path: `M ${this.getScaleValue(tick)},${ y + this.boundingRect.height - (this.showAxisLine ? this.axisConfig.axisLineWidth : 0) @@ -392,7 +390,7 @@ export abstract class BaseAxis implements Axis { if (this.showTitle) { drawableElement.push({ type: 'text', - groupTexts: ['bottom-axis', 'title'], + groupTexts: ['top-axis', 'title'], data: [ { text: this.title, diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/PlotBorder.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/PlotBorder.ts deleted file mode 100644 index 8bddf04d00..0000000000 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/PlotBorder.ts +++ /dev/null @@ -1,49 +0,0 @@ -import type { - BoundingRect, - DrawableElem, - XYChartConfig, - XYChartThemeConfig, -} from '../../Interfaces.js'; -export class PlotBorder { - constructor( - private boundingRect: BoundingRect, - private orientation: XYChartConfig['chartOrientation'], - private chartThemeConfig: XYChartThemeConfig - ) {} - - getDrawableElement(): DrawableElem[] { - const { x, y, width, height } = this.boundingRect; - if (this.orientation === 'horizontal') { - return [ - { - groupTexts: ['plot', 'chart-border'], - type: 'path', - data: [ - { - path: `M ${x},${y} L ${x + width},${y} M ${x + width},${y + height} M ${x},${ - y + height - } L ${x},${y}`, - strokeFill: this.chartThemeConfig.plotBorderColor, - strokeWidth: 1, - }, - ], - }, - ]; - } - return [ - { - groupTexts: ['plot', 'chart-border'], - type: 'path', - data: [ - { - path: `M ${x},${y} M ${x + width},${y} M ${x + width},${y + height} L ${x},${ - y + height - } L ${x},${y}`, - strokeFill: this.chartThemeConfig.plotBorderColor, - strokeWidth: 1, - }, - ], - }, - ]; - } -} diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts index 2d45d795c2..3707923793 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts @@ -10,7 +10,6 @@ import type { import type { Axis } from '../axis/index.js'; import type { ChartComponent } from '../../Interfaces.js'; import { LinePlot } from './LinePlot.js'; -import { PlotBorder } from './PlotBorder.js'; import { BarPlot } from './BarPlot.js'; export interface Plot extends ChartComponent { @@ -55,13 +54,7 @@ export class Plot implements Plot { if (!(this.xAxis && this.yAxis)) { throw Error('Axes must be passed to render Plots'); } - const drawableElem: DrawableElem[] = [ - // ...new PlotBorder( - // this.boundingRect, - // this.chartConfig.chartOrientation, - // this.chartThemeConfig - // ).getDrawableElement(), - ]; + const drawableElem: DrawableElem[] = []; for (const [i, plot] of this.chartData.plots.entries()) { switch (plot.type) { case 'line': diff --git a/packages/mermaid/src/diagrams/xychart/xychartDb.ts b/packages/mermaid/src/diagrams/xychart/xychartDb.ts index 297a2b30df..b585b3ba00 100644 --- a/packages/mermaid/src/diagrams/xychart/xychartDb.ts +++ b/packages/mermaid/src/diagrams/xychart/xychartDb.ts @@ -34,7 +34,7 @@ let tmpSVGGElem: SVGGType; let xyChartConfig: XYChartConfig = getChartDefaultConfig(); let xyChartThemeConfig: XYChartThemeConfig = getChartDefaultThemeConfig(); let xyChartData: XYChartData = getChartDefalutData(); -let plotColorPalette = xyChartThemeConfig.plotColorPalette; +let plotColorPalette = xyChartThemeConfig.plotColorPalette.split(',').map((color) => color.trim()); let hasSetXAxis = false; let hasSetYAxis = false; @@ -175,7 +175,7 @@ function transformDataWithoutCategory(data: number[]): SimplePlotDataType { } function getPlotColorFromPalette(plotIndex: number): string { - return plotColorPalette[plotIndex === 0 ? 0 : plotIndex % (plotColorPalette.length - 1)]; + return plotColorPalette[plotIndex === 0 ? 0 : plotIndex % plotColorPalette.length]; } function setLineData(title: NormalTextType, data: number[]) { @@ -221,7 +221,7 @@ const clear = function () { xyChartConfig = getChartDefaultConfig(); xyChartData = getChartDefalutData(); xyChartThemeConfig = getChartDefaultThemeConfig(); - plotColorPalette = xyChartThemeConfig.plotColorPalette; + plotColorPalette = xyChartThemeConfig.plotColorPalette.split(',').map((color) => color.trim()); hasSetXAxis = false; hasSetYAxis = false; }; diff --git a/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts b/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts index 19d9d35e47..8f8451d3fd 100644 --- a/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts +++ b/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts @@ -15,11 +15,7 @@ export const draw = (txt: string, id: string, _version: string, diagObj: Diagram const themeConfig = db.getChartThemeConfig(); const chartConfig = db.getChartConfig(); function getDominantBaseLine(horizontalPos: TextVerticalPos) { - return horizontalPos === 'top' - ? 'text-before-edge' - : horizontalPos === 'bottom' - ? 'text-after-edge' - : 'middle'; + return horizontalPos === 'top' ? 'text-before-edge' : 'middle'; } function getTextAnchor(verticalPos: TextHorizontalPos) { diff --git a/packages/mermaid/src/docs/syntax/xyChart.md b/packages/mermaid/src/docs/syntax/xyChart.md index 52b765a602..2820bc7914 100644 --- a/packages/mermaid/src/docs/syntax/xyChart.md +++ b/packages/mermaid/src/docs/syntax/xyChart.md @@ -130,20 +130,19 @@ Themes for xychart resides inside xychart attribute so to set the variables use %%{init: { "themeVariables": {"xyChart": {"titleColor": "#ff0000"} } }}%% ``` -| Parameter | Description | -| ---------------- | ----------------------------------------------------- | -| backgroundColor | Background color of the whole chart | -| titleColor | Color of the Title text | -| plotBorderColor | Color of the plot border | -| xAxisLableColor | Color of the x-axis labels | -| xAxisTitleColor | Color of the x-axis title | -| xAxisTickColor | Color of the x-axis tick | -| xAxisLineColor | Color of the x-axis line | -| yAxisLableColor | Color of the y-axis labels | -| yAxisTitleColor | Color of the y-axis title | -| yAxisTickColor | Color of the y-axis tick | -| yAxisLineColor | Color of the y-axis line | -| plotColorPalette | Array of colors for the plots eg ["#f3456", "#43445"] | +| Parameter | Description | +| ---------------- | ------------------------------------------------------- | +| backgroundColor | Background color of the whole chart | +| titleColor | Color of the Title text | +| xAxisLableColor | Color of the x-axis labels | +| xAxisTitleColor | Color of the x-axis title | +| xAxisTickColor | Color of the x-axis tick | +| xAxisLineColor | Color of the x-axis line | +| yAxisLableColor | Color of the y-axis labels | +| yAxisTitleColor | Color of the y-axis title | +| yAxisTickColor | Color of the y-axis tick | +| yAxisLineColor | Color of the y-axis line | +| plotColorPalette | String of colors seperated by comma eg "#f3456, #43445" | ## Example on config and theme diff --git a/packages/mermaid/src/themes/theme-base.js b/packages/mermaid/src/themes/theme-base.js index db7fd2ba15..663af85016 100644 --- a/packages/mermaid/src/themes/theme-base.js +++ b/packages/mermaid/src/themes/theme-base.js @@ -249,27 +249,17 @@ class Theme { this.xyChart = { backgroundColor: this.xyChart?.backgroundColor || this.background, titleColor: this.xyChart?.titleColor || this.primaryTextColor, - plotBorderColor: this.xyChart?.plotBorderColor || this.primaryTextColor, xAxisTitleColor: this.xyChart?.xAxisTitleColor || this.primaryTextColor, - xAxisLableColor: this.xyChart?.xAxisLableColor || 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, - yAxisLableColor: this.xyChart?.yAxisLableColor || 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', - ], + plotColorPalette: + this.xyChart?.plotColorPalette || + '#FFF4DD,#FFD8B1,#FFA07A,#ECEFF1,#D6DBDF,#C3E0A8,#FFB6A4,#FFD74D,#738FA7,#FFFFF0', }; /* requirement-diagram */ diff --git a/packages/mermaid/src/themes/theme-dark.js b/packages/mermaid/src/themes/theme-dark.js index c4354736b9..300cf30366 100644 --- a/packages/mermaid/src/themes/theme-dark.js +++ b/packages/mermaid/src/themes/theme-dark.js @@ -255,27 +255,17 @@ class Theme { this.xyChart = { backgroundColor: this.xyChart?.backgroundColor || this.background, titleColor: this.xyChart?.titleColor || this.primaryTextColor, - plotBorderColor: this.xyChart?.plotBorderColor || this.primaryTextColor, xAxisTitleColor: this.xyChart?.xAxisTitleColor || this.primaryTextColor, - xAxisLableColor: this.xyChart?.xAxisLableColor || 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, - yAxisLableColor: this.xyChart?.yAxisLableColor || this.primaryTextColor, + yAxisLabelColor: this.xyChart?.yAxisLabelColor || this.primaryTextColor, yAxisTickColor: this.xyChart?.yAxisTickColor || this.primaryTextColor, yAxisLineColor: this.xyChart?.yAxisLineColor || this.primaryTextColor, - plotColorPalette: this.xyChart?.plotColorPalette || [ - '#3498db', - '#2ecc71', - '#e74c3c', - '#f1c40f', - '#bdc3c7', - '#ffffff', - '#34495e', - '#9b59b6', - '#1abc9c', - '#e67e22', - ], + plotColorPalette: + this.xyChart?.plotColorPalette || + '#3498db,#2ecc71,#e74c3c,#f1c40f,#bdc3c7,#ffffff,#34495e,#9b59b6,#1abc9c,#e67e22', }; /* class */ diff --git a/packages/mermaid/src/themes/theme-default.js b/packages/mermaid/src/themes/theme-default.js index ea3d20a5af..6aa18fcc78 100644 --- a/packages/mermaid/src/themes/theme-default.js +++ b/packages/mermaid/src/themes/theme-default.js @@ -276,27 +276,17 @@ class Theme { this.xyChart = { backgroundColor: this.xyChart?.backgroundColor || this.background, titleColor: this.xyChart?.titleColor || this.primaryTextColor, - plotBorderColor: this.xyChart?.plotBorderColor || this.primaryTextColor, xAxisTitleColor: this.xyChart?.xAxisTitleColor || this.primaryTextColor, - xAxisLableColor: this.xyChart?.xAxisLableColor || 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, - yAxisLableColor: this.xyChart?.yAxisLableColor || this.primaryTextColor, + yAxisLabelColor: this.xyChart?.yAxisLabelColor || this.primaryTextColor, yAxisTickColor: this.xyChart?.yAxisTickColor || this.primaryTextColor, yAxisLineColor: this.xyChart?.yAxisLineColor || this.primaryTextColor, - plotColorPalette: this.xyChart?.plotColorPalette || [ - '#ECECFF', - '#8493A6', - '#FFC3A0', - '#DCDDE1', - '#B8E994', - '#D1A36F', - '#C3CDE6', - '#FFB6C1', - '#496078', - '#F8F3E3', - ], + plotColorPalette: + this.xyChart?.plotColorPalette || + '#ECECFF,#8493A6,#FFC3A0,#DCDDE1,#B8E994,#D1A36F,#C3CDE6,#FFB6C1,#496078,#F8F3E3', }; /* requirement-diagram */ diff --git a/packages/mermaid/src/themes/theme-forest.js b/packages/mermaid/src/themes/theme-forest.js index 0b5300d677..adf337a16c 100644 --- a/packages/mermaid/src/themes/theme-forest.js +++ b/packages/mermaid/src/themes/theme-forest.js @@ -244,27 +244,17 @@ class Theme { this.xyChart = { backgroundColor: this.xyChart?.backgroundColor || this.background, titleColor: this.xyChart?.titleColor || this.primaryTextColor, - plotBorderColor: this.xyChart?.plotBorderColor || this.primaryTextColor, xAxisTitleColor: this.xyChart?.xAxisTitleColor || this.primaryTextColor, - xAxisLableColor: this.xyChart?.xAxisLableColor || 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, - yAxisLableColor: this.xyChart?.yAxisLableColor || this.primaryTextColor, + yAxisLabelColor: this.xyChart?.yAxisLabelColor || this.primaryTextColor, yAxisTickColor: this.xyChart?.yAxisTickColor || this.primaryTextColor, yAxisLineColor: this.xyChart?.yAxisLineColor || this.primaryTextColor, - plotColorPalette: this.xyChart?.plotColorPalette || [ - '#CDE498', - '#FF6B6B', - '#A0D2DB', - '#D7BDE2', - '#F0F0F0', - '#FFC3A0', - '#7FD8BE', - '#FF9A8B', - '#FAF3E0', - '#FFF176', - ], + plotColorPalette: + this.xyChart?.plotColorPalette || + '#CDE498,#FF6B6B,#A0D2DB,#D7BDE2,#F0F0F0,#FFC3A0,#7FD8BE,#FF9A8B,#FAF3E0,#FFF176', }; /* requirement-diagram */ diff --git a/packages/mermaid/src/themes/theme-neutral.js b/packages/mermaid/src/themes/theme-neutral.js index 26f84c38dd..446a9189d4 100644 --- a/packages/mermaid/src/themes/theme-neutral.js +++ b/packages/mermaid/src/themes/theme-neutral.js @@ -275,27 +275,17 @@ class Theme { this.xyChart = { backgroundColor: this.xyChart?.backgroundColor || this.background, titleColor: this.xyChart?.titleColor || this.primaryTextColor, - plotBorderColor: this.xyChart?.plotBorderColor || this.primaryTextColor, xAxisTitleColor: this.xyChart?.xAxisTitleColor || this.primaryTextColor, - xAxisLableColor: this.xyChart?.xAxisLableColor || 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, - yAxisLableColor: this.xyChart?.yAxisLableColor || this.primaryTextColor, + yAxisLabelColor: this.xyChart?.yAxisLabelColor || this.primaryTextColor, yAxisTickColor: this.xyChart?.yAxisTickColor || this.primaryTextColor, yAxisLineColor: this.xyChart?.yAxisLineColor || this.primaryTextColor, - plotColorPalette: this.xyChart?.plotColorPalette || [ - '#EEE', - '#6BB8E4', - '#8ACB88', - '#C7ACD6', - '#E8DCC2', - '#FFB2A8', - '#FFF380', - '#7E8D91', - '#FFD8B1', - '#FAF3E0', - ], + plotColorPalette: + this.xyChart?.plotColorPalette || + '#EEE,#6BB8E4,#8ACB88,#C7ACD6,#E8DCC2,#FFB2A8,#FFF380,#7E8D91,#FFD8B1,#FAF3E0', }; /* requirement-diagram */ From a344eb48f49ac8cfed27141ff2c90ef728122d19 Mon Sep 17 00:00:00 2001 From: Subhash Halder <halder.subhash@gmail.com> Date: Sun, 3 Sep 2023 20:48:52 +0530 Subject: [PATCH 038/457] Added cypress test cases --- cypress/integration/rendering/xyChart.spec.js | 230 ++++++++++++++++++ 1 file changed, 230 insertions(+) create mode 100644 cypress/integration/rendering/xyChart.spec.js diff --git a/cypress/integration/rendering/xyChart.spec.js b/cypress/integration/rendering/xyChart.spec.js new file mode 100644 index 0000000000..d9b7f159c8 --- /dev/null +++ b/cypress/integration/rendering/xyChart.spec.js @@ -0,0 +1,230 @@ +import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts'; + +describe('XY Chart', () => { + it('should render the simplest possible chart', () => { + imgSnapshotTest( + ` + xychart-beta + line [10, 30, 20] + `, + {} + ); + cy.get('svg'); + }); + it('Should render a complete chart', () => { + imgSnapshotTest( + ` + xychart-beta + title "Sales Revene" + x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] + y-axis "Revenue (in $)" 4000 --> 11000 + bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + `, + {} + ); + }); + it('Should render a chart without title', () => { + imgSnapshotTest( + ` + xychart-beta + x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] + y-axis "Revenue (in $)" 4000 --> 11000 + bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + `, + {} + ); + cy.get('svg'); + }); + it('y-axis title not required', () => { + imgSnapshotTest( + ` + xychart-beta + x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] + y-axis 4000 --> 11000 + bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + `, + {} + ); + cy.get('svg'); + }); + it('Should render a chart without y-axis with different range', () => { + imgSnapshotTest( + ` + xychart-beta + x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] + bar [5000, 6000, 7500, 8200, 9500, 10500, 14000, 3200, 9200, 9900, 3400, 6000] + line [2000, 7000, 6500, 9200, 9500, 7500, 11000, 10200, 3200, 8500, 7000, 8800] + `, + {} + ); + cy.get('svg'); + }); + it('x axis title not required', () => { + imgSnapshotTest( + ` + xychart-beta + x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] + bar [5000, 6000, 7500, 8200, 9500, 10500, 14000, 3200, 9200, 9900, 3400, 6000] + line [2000, 7000, 6500, 9200, 9500, 7500, 11000, 10200, 3200, 8500, 7000, 8800] + `, + {} + ); + cy.get('svg'); + }); + it('Multiple plots can be rendered', () => { + imgSnapshotTest( + ` + xychart-beta + line [23, 46, 77, 34] + line [45, 32, 33, 12] + bar [87, 54, 99, 85] + line [78, 88, 22, 4] + line [22, 29, 75, 33] + bar [52, 96, 35, 10] + `, + {} + ); + cy.get('svg'); + }); + it('Decimals and -ve no are supported', () => { + imgSnapshotTest( + ` + xychart-beta + y-axis -2.4 --> 3.5 + line [+1.3, .6, 2.4, -.34] + `, + {} + ); + cy.get('svg'); + }); + it('Render spark line with "plotReservedSpacePercent"', () => { + imgSnapshotTest( + ` + %%{init: {"theme":"dark", "xyChart": { "width":200, "height": 20, "plotReservedSpacePercent": 100}}}%% + xychart-beta + line [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800] + `, + {} + ); + cy.get('svg'); + }); + it('Render spark bar without displaying other property', () => { + imgSnapshotTest( + ` + %%{init: {"theme":"dark", "xyChart": {"width": 200, "height": 20, "xAxis": {"showLabel": false, "showTitle": false, "showTick":false, "showAxisLine": false}, "yAxis": {"showLabel": false, "showTitle": false, "showTick":false, "showAxisLine": false}}}}%% + xychart-beta + bar [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800] + `, + {} + ); + cy.get('svg'); + }); + it('Should use all the config from directive', () => { + imgSnapshotTest( + ` + %%{init: {"xyChart": {"width": 1000, "height": 600, "titlePadding": 5, "titleFontSize": 10, "xAxis": {"labelFontSize": "20", "labelPadding": 10, "titleFontSize": 30, "titlePadding": 20, "tickLength": 10, "tickWidth": 5}, "yAxis": {"labelFontSize": "20", "labelPadding": 10, "titleFontSize": 30, "titlePadding": 20, "tickLength": 10, "tickWidth": 5}, "plotBorderWidth": 5, "chartOrientation": "horizontal", "plotReservedSpacePercent": 60 }}}%% + xychart-beta + title "Sales Revene" + x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] + y-axis "Revenue (in $)" 4000 --> 11000 + bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + `, + {} + ); + cy.get('svg'); + }); + it('Render with showTitle false', () => { + imgSnapshotTest( + ` + %%{init: {"xyChart": {"showTitle": false}}}%% + xychart-beta + title "Sales Revene" + x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] + y-axis "Revenue (in $)" 4000 --> 11000 + bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + `, + {} + ); + cy.get('svg'); + }); + it('Render with show axis title false', () => { + imgSnapshotTest( + ` + %%{init: {"xyChart": {"yAxis": {"showTitle": false}, "xAxis": {"showTitle": false}}}}%% + xychart-beta + title "Sales Revene" + x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] + y-axis "Revenue (in $)" 4000 --> 11000 + bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + `, + {} + ); + cy.get('svg'); + }); + it('Render with show axis label false', () => { + imgSnapshotTest( + ` + %%{init: {"xyChart": {"yAxis": {"showLabel": false}, "xAxis": {"showLabel": false}}}}%% + xychart-beta + title "Sales Revene" + x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] + y-axis "Revenue (in $)" 4000 --> 11000 + bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + `, + {} + ); + cy.get('svg'); + }); + it('Render with show axis tick false', () => { + imgSnapshotTest( + ` + %%{init: {"xyChart": {"xAxis": {"showTick": false}, "yAxis": {"showTick": false}}}}%% + xychart-beta + title "Sales Revene" + x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] + y-axis "Revenue (in $)" 4000 --> 11000 + bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + `, + {} + ); + cy.get('svg'); + }); + it('Render with show axis line false', () => { + imgSnapshotTest( + ` + %%{init: {"xyChart": {"xAxis": {"showAxisLine": false}, "yAxis": {"showAxisLine": false}}}}%% + xychart-beta + title "Sales Revene" + x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] + y-axis "Revenue (in $)" 4000 --> 11000 + bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + `, + {} + ); + cy.get('svg'); + }); + it('Render all the theme color', () => { + imgSnapshotTest( + ` + %%{init: {"themeVariables": {"xyChart": {"titleColor": "#ff0000", "backgroundColor": "#f0f8ff", "yAxisLabelColor": "#ee82ee", "yAxisTitleColor": "#7fffd4", "yAxisTickColor": "#87ceeb", "yAxisLineColor": "#ff6347", "xAxisLabelColor": "#7fffd4", "xAxisTitleColor": "#ee82ee", "xAxisTickColor": "#ff6347", "xAxisLineColor": "#87ceeb", "plotColorPalette": "#008000, #faba63"}}}}%% + xychart-beta + title "Sales Revene" + x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] + y-axis "Revenue (in $)" 4000 --> 11000 + bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + `, + {} + ); + cy.get('svg'); + }); +}); From 6155b2cc38a1c7485065c397453dad1ab86079f0 Mon Sep 17 00:00:00 2001 From: Steph <35910788+huynhicode@users.noreply.github.com> Date: Wed, 6 Sep 2023 22:04:35 -0700 Subject: [PATCH 039/457] update content --- ...egrations.md => integrations-community.md} | 85 +++++++++---------- docs/ecosystem/integrations-create.md | 31 +++++++ docs/ecosystem/mermaid-chart.md | 43 ++++++++++ docs/ecosystem/showcases.md | 9 -- .../mermaid/src/docs/.vitepress/config.ts | 11 ++- ...egrations.md => integrations-community.md} | 85 ++++++++++--------- .../src/docs/ecosystem/integrations-create.md | 29 +++++++ .../src/docs/ecosystem/mermaid-chart.md | 41 +++++++++ .../mermaid/src/docs/ecosystem/showcases.md | 3 - pnpm-lock.yaml | 78 +++++++++++++++-- 10 files changed, 310 insertions(+), 105 deletions(-) rename docs/ecosystem/{integrations.md => integrations-community.md} (90%) create mode 100644 docs/ecosystem/integrations-create.md create mode 100644 docs/ecosystem/mermaid-chart.md delete mode 100644 docs/ecosystem/showcases.md rename packages/mermaid/src/docs/ecosystem/{integrations.md => integrations-community.md} (90%) create mode 100644 packages/mermaid/src/docs/ecosystem/integrations-create.md create mode 100644 packages/mermaid/src/docs/ecosystem/mermaid-chart.md delete mode 100644 packages/mermaid/src/docs/ecosystem/showcases.md diff --git a/docs/ecosystem/integrations.md b/docs/ecosystem/integrations-community.md similarity index 90% rename from docs/ecosystem/integrations.md rename to docs/ecosystem/integrations-community.md index c0e8f96c85..81af789aee 100644 --- a/docs/ecosystem/integrations.md +++ b/docs/ecosystem/integrations-community.md @@ -2,52 +2,42 @@ > > ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. > -> ## Please edit the corresponding file in [/packages/mermaid/src/docs/ecosystem/integrations.md](../../packages/mermaid/src/docs/ecosystem/integrations.md). +> ## Please edit the corresponding file in [/packages/mermaid/src/docs/ecosystem/integrations-community.md](../../packages/mermaid/src/docs/ecosystem/integrations-community.md). -# Integrations +# Integrations - community -## Recommendations +We're excited about the growth of the Mermaid community, and the number of plugins and integrations that have been created with Mermaid. -### File Extension +## Community integrations -Applications that support mermaid files [SHOULD](https://datatracker.ietf.org/doc/html/rfc2119#section-3) use `.mermaid` or `.mmd` file extensions. +Below are a list of community plugins and integrations created with Mermaid. -### MIME Type +### Productivity tools -The recommended [MIME type](https://www.iana.org/assignments/media-types/media-types.xhtml) for mermaid media is `text/vnd.mermaid`. +✅ = Native support -[IANA](https://www.iana.org/) recognition pending. - ---- - -The following list is a compilation of different integrations and plugins that allow the rendering of mermaid definitions within other applications. - -They also serve as proof of concept, for the variety of things that can be built with mermaid. - -## Productivity - -- [GitHub](https://github.com) (**Native support**) - - [Using code blocks](https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/) (**Native support**) +- [GitHub](https://github.com) ✅ + - [Using code blocks](https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/) ✅ - [GitHub action: Compile mermaid to image](https://github.com/neenjaw/compile-mermaid-markdown-action) - [svg-generator](https://github.com/SimonKenyonShepard/mermaidjs-github-svg-generator) - [GitHub Writer](https://github.com/ckeditor/github-writer) -- [GitLab](https://docs.gitlab.com/ee/user/markdown.html#diagrams-and-flowcharts) (**Native support**) -- [Gitea](https://gitea.io) (**Native support**) -- [Azure Devops](https://docs.microsoft.com/en-us/azure/devops/project/wiki/wiki-markdown-guidance?view=azure-devops#add-mermaid-diagrams-to-a-wiki-page) (**Native support**) -- [Tuleap](https://docs.tuleap.org/user-guide/writing-in-tuleap.html#graphs) (**Native support**) -- [Mermaid Flow Visual Editor](https://www.mermaidflow.app) (**Native support**) -- [Deepdwn](https://billiam.itch.io/deepdwn) (**Native support**) -- [Joplin](https://joplinapp.org) (**Native support**) -- [Slab](https://slab.com) (**Native support**) -- [Swimm](https://swimm.io) (**Native support**) -- [Notion](https://notion.so) (**Native support**) -- [Observable](https://observablehq.com/@observablehq/mermaid) (**Native support**) -- [Obsidian](https://help.obsidian.md/Editing+and+formatting/Advanced+formatting+syntax#Diagram) (**Native support**) +- [GitLab](https://docs.gitlab.com/ee/user/markdown.html#diagrams-and-flowcharts) ✅ +- [Gitea](https://gitea.io) ✅ +- [Azure Devops](https://docs.microsoft.com/en-us/azure/devops/project/wiki/wiki-markdown-guidance?view=azure-devops#add-mermaid-diagrams-to-a-wiki-page) ✅ +- [Tuleap](https://docs.tuleap.org/user-guide/writing-in-tuleap.html#graphs) ✅ +- [Mermaid Flow Visual Editor](https://www.mermaidflow.app) ✅ +- [Deepdwn](https://billiam.itch.io/deepdwn) ✅ +- [Joplin](https://joplinapp.org) ✅ +- [Slab](https://slab.com) ✅ +- [Swimm](https://swimm.io) ✅ +- [Notion](https://notion.so) ✅ +- [Observable](https://observablehq.com/@observablehq/mermaid) ✅ +- [Obsidian](https://help.obsidian.md/Editing+and+formatting/Advanced+formatting+syntax#Diagram) ✅ - [GitBook](https://gitbook.com) - [Mermaid Plugin](https://github.com/JozoVilcek/gitbook-plugin-mermaid) - [Markdown with Mermaid CLI](https://github.com/miao1007/gitbook-plugin-mermaid-cli) - [Mermaid plugin for GitBook](https://github.com/wwformat/gitbook-plugin-mermaid-pdf) -- [LiveBook](https://livebook.dev) (**Native support**) +- [LiveBook](https://livebook.dev) ✅ - [Atlassian Products](https://www.atlassian.com) - [Mermaid Plugin for Confluence](https://marketplace.atlassian.com/apps/1214124/mermaid-plugin-for-confluence?hosting=server&tab=overview) - [CloudScript.io Addon](https://marketplace.atlassian.com/apps/1219878/cloudscript-io-mermaid-addon?hosting=cloud&tab=overview) @@ -60,11 +50,15 @@ They also serve as proof of concept, for the variety of things that can be built - [mermerd](https://github.com/KarnerTh/mermerd) - Visual Studio Code [Polyglot Interactive Notebooks](https://github.com/dotnet/interactive#net-interactive) -## CRM/ERP/Similar +### CRM/ERP + +Customer Relationship Management/Enterprise Resource Planning - [coreBOS](https://blog.corebos.org/blog/december2019) -## Blogs +### Blogging + +Blogging frameworks and platforms - [WordPress](https://wordpress.org) - [WordPress Markdown Editor](https://wordpress.org/plugins/wp-githuber-md) @@ -76,7 +70,9 @@ They also serve as proof of concept, for the variety of things that can be built - [Nextra](https://nextra.site/) - [Mermaid](https://nextra.site/docs/guide/mermaid) -## CMS +### CMS/ECM + +Content Management Systems/Enterprise Content Management - [VitePress](https://vitepress.vuejs.org/) - [Plugin for Mermaid.js](https://emersonbottero.github.io/vitepress-plugin-mermaid/) @@ -86,7 +82,9 @@ They also serve as proof of concept, for the variety of things that can be built - [Mermaid Diagrams](https://github.com/DanielFlaum/grav-plugin-mermaid-diagrams) - [GitLab Markdown Adapter](https://github.com/Goutte/grav-plugin-gitlab-markdown-adapter) -## Communication +### Communication + +Communication tools and platforms - [Discourse](https://discourse.org) - [Mermaid Plugin](https://github.com/pnewell/discourse-mermaid), [And](https://github.com/unfoldingWord-dev/discourse-mermaid) @@ -97,7 +95,7 @@ They also serve as proof of concept, for the variety of things that can be built - [NodeBB](https://nodebb.org) - [Mermaid Plugin](https://www.npmjs.com/package/nodebb-plugin-mermaid) -## Wikis +### Wikis - [MediaWiki](https://www.mediawiki.org) - [Mermaid Extension](https://www.mediawiki.org/wiki/Extension:Mermaid) @@ -113,7 +111,7 @@ They also serve as proof of concept, for the variety of things that can be built - [mermaid-tw5: full js library](https://github.com/efurlanm/mermaid-tw5) - [tw5-mermaid: wrapper for Mermaid Live](https://github.com/jasonmhoule/tw5-mermaid) -## Editor Plugins +### Editor Plugins - [VS Code](https://code.visualstudio.com/) - [Markdown Preview Mermaid Support](https://marketplace.visualstudio.com/items?itemName=bierner.markdown-mermaid) @@ -164,8 +162,9 @@ They also serve as proof of concept, for the variety of things that can be built - [Standard Notes](https://standardnotes.com/) - [sn-mermaid](https://github.com/nienow/sn-mermaid) -## Document Generation +### Document Generation +- [Swimm - Up-to-date diagrams with Swimm, the knowledge management tool for code](https://docs.swimm.io/Features/diagrams-and-charts) - [Sphinx](https://www.sphinx-doc.org/en/master/) - [sphinxcontrib-mermaid](https://github.com/mgaitan/sphinxcontrib-mermaid) - [remark](https://remark.js.org/) @@ -181,15 +180,15 @@ They also serve as proof of concept, for the variety of things that can be built - [mkdocs-material](https://github.com/squidfunk/mkdocs-material), check the [docs](https://squidfunk.github.io/mkdocs-material/reference/diagrams/) - [Type Doc](https://typedoc.org/) - [typedoc-plugin-mermaid](https://www.npmjs.com/package/typedoc-plugin-mermaid) -- [Docsy Hugo Theme](https://www.docsy.dev/docs/adding-content/lookandfeel/#diagrams-with-mermaid) (Native support in theme) +- [Docsy Hugo Theme](https://www.docsy.dev/docs/adding-content/lookandfeel/#diagrams-with-mermaid) (native support in theme) - [Codedoc](https://codedoc.cc/) - [codedoc-mermaid-plugin](https://www.npmjs.com/package/codedoc-mermaid-plugin) - [mdbook](https://rust-lang.github.io/mdBook/index.html) - [mdbook-mermaid](https://github.com/badboy/mdbook-mermaid) - [Quarto](https://quarto.org/) -- [Typora](https://typora.io/) ([Native support](https://support.typora.io/Draw-Diagrams-With-Markdown/#mermaid)) +- [Typora](https://typora.io/) ([native support](https://support.typora.io/Draw-Diagrams-With-Markdown/#mermaid)) -## Browser Extensions +### Browser Extensions | Name | Chrome Web Store | Firefox Add-ons | Opera | Edge | Source/Repository | | ------------------------ | ------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------ | ------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- | @@ -204,7 +203,7 @@ They also serve as proof of concept, for the variety of things that can be built | Monkeys | [🎡🔗](https://chrome.google.com/webstore/detail/monkeys-mermaid-for-githu/cplfdpoajbclbgphaphphcldamfkjlgi) | - | - | - | - | | Mermaid Previewer | [🎡🔗](https://chrome.google.com/webstore/detail/mermaid-previewer/oidjnlhbegipkcklbdfnbkikplpghfdl) | - | - | - | - | -## Other +### Other - [Jekyll](https://jekyllrb.com/) - [jekyll-mermaid](https://rubygems.org/gems/jekyll-mermaid) diff --git a/docs/ecosystem/integrations-create.md b/docs/ecosystem/integrations-create.md new file mode 100644 index 0000000000..3dba1dafba --- /dev/null +++ b/docs/ecosystem/integrations-create.md @@ -0,0 +1,31 @@ +> **Warning** +> +> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. +> +> ## Please edit the corresponding file in [/packages/mermaid/src/docs/ecosystem/integrations-create.md](../../packages/mermaid/src/docs/ecosystem/integrations-create.md). + +# Integrations - create + +## Recommendations + +Below are recommendations for creating plugins and integrations with Mermaid. + +### File Extension + +Applications that support Mermaid files [SHOULD](https://datatracker.ietf.org/doc/html/rfc2119#section-3) use `.mermaid` or `.mmd` file extensions. + +### MIME Type + +The recommended [MIME type](https://www.iana.org/assignments/media-types/media-types.xhtml) for Mermaid media is `text/vnd.mermaid`. + +Currently pending [IANA](https://www.iana.org/) recognition. + +## Showcase + +### Mermaid Slack workspace + +We would love to see what you create with Mermaid. Please share your creations with us in our [Slack](https://join.slack.com/t/mermaid-talk/shared_invite/zt-22p2r8p9y-qiyP1H38GjFQ6S6jbBkOxQ) workspace [#community-showcase](https://mermaid-talk.slack.com/archives/C05NK37LT40) channel. + +### Add to Mermaid Ecosystem + +If you have a plugin or integration that you'd like to add to our [Community integrations](/ecosystem/integrations-community) list, please [open a pull request](https://github.com/mermaid-js/mermaid). diff --git a/docs/ecosystem/mermaid-chart.md b/docs/ecosystem/mermaid-chart.md new file mode 100644 index 0000000000..5a0fdc18d9 --- /dev/null +++ b/docs/ecosystem/mermaid-chart.md @@ -0,0 +1,43 @@ +> **Warning** +> +> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. +> +> ## Please edit the corresponding file in [/packages/mermaid/src/docs/ecosystem/mermaid-chart.md](../../packages/mermaid/src/docs/ecosystem/mermaid-chart.md). + +# Mermaid Chart + +## About + +[Mermaid Chart](https://www.mermaidchart.com) was born out of the Mermaid open source project and was founded by Knut Sveidqvist together with Open Core Ventures. The lead developers from Mermaid have joined the company and there is a strong connection between the project we all love and Mermaid Chart. Mermaid Chart brings resources to the open source development of Mermaid and makes it possible to work with Mermaid professionally. + +## Features + +- **Editor** - A web based editor for creating and editing Mermaid diagrams. + +- **Presentation** - A presentation mode for viewing Mermaid diagrams in a slideshow format. + +- **Collaboration** - A web based collaboration feature for multi-user editing on Mermaid diagrams in real-time (Pro plan). + +- **Plugins** - A plugin system for extending the functionality of Mermaid. Currently includes [VS Code](https://marketplace.visualstudio.com/items?itemName=MermaidChart.vscode-mermaid-chart) and [ChatGPT](https://www.mermaidchart.com/plugins/chatgpt). + +- **AI** - An AI chatbot that can generate Mermaid diagrams from text (Pro plan). + +- **More** - To learn more, visit our [Product](https://www.mermaidchart.com/product) page. + +## Plans + +- **Free** - A free plan that includes five diagrams. + +- **Pro** - A paid plan that includes unlimited diagrams, access to the collaboration feature, and more. + +- **Enterprise** - A paid plan for enterprise use that includes all Pro features, and more. + +## Access + +Sign up for a free account at [Mermaid Chart](https://www.mermaidchart.com/app/sign-up). + +Mermaid Chart is currently offering a 30-day free trial of our newly-launched Pro tier. To learn more, visit our [Pricing](https://mermaidchart.com/pricing) page. + +## Mermaid JS contributions + +First time contributors are eligible for a free Pro tier account for 1 year. diff --git a/docs/ecosystem/showcases.md b/docs/ecosystem/showcases.md deleted file mode 100644 index 9f18103b9b..0000000000 --- a/docs/ecosystem/showcases.md +++ /dev/null @@ -1,9 +0,0 @@ -> **Warning** -> -> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. -> -> ## Please edit the corresponding file in [/packages/mermaid/src/docs/ecosystem/showcases.md](../../packages/mermaid/src/docs/ecosystem/showcases.md). - -# Showcases - -- [Swimm - Up-to-date diagrams with Swimm, the knowledge management tool for code](https://docs.swimm.io/Features/diagrams-and-charts). diff --git a/packages/mermaid/src/docs/.vitepress/config.ts b/packages/mermaid/src/docs/.vitepress/config.ts index d787fe6ea1..51d87ce985 100644 --- a/packages/mermaid/src/docs/.vitepress/config.ts +++ b/packages/mermaid/src/docs/.vitepress/config.ts @@ -71,7 +71,11 @@ function nav() { link: '/config/Tutorials', activeMatch: '/config/', }, - { text: 'Integrations', link: '/ecosystem/integrations', activeMatch: '/ecosystem/' }, + { + text: 'Integrations', + link: '/ecosystem/integrations-community', + activeMatch: '/ecosystem/', + }, { text: 'Contributing', link: '/community/development.html', @@ -180,8 +184,9 @@ function sidebarEcosystem() { text: '📚 Ecosystem', collapsed: false, items: [ - { text: 'Showcases', link: '/ecosystem/showcases' }, - { text: 'Use-Cases and Integrations', link: '/ecosystem/integrations' }, + { text: 'Mermaid Chart', link: '/ecosystem/mermaid-chart' }, + { text: 'Integrations - Community', link: '/ecosystem/integrations-community' }, + { text: 'Integrations - Create', link: '/ecosystem/integrations-create' }, ], }, ]; diff --git a/packages/mermaid/src/docs/ecosystem/integrations.md b/packages/mermaid/src/docs/ecosystem/integrations-community.md similarity index 90% rename from packages/mermaid/src/docs/ecosystem/integrations.md rename to packages/mermaid/src/docs/ecosystem/integrations-community.md index 4935fc96ad..0b428ff89c 100644 --- a/packages/mermaid/src/docs/ecosystem/integrations.md +++ b/packages/mermaid/src/docs/ecosystem/integrations-community.md @@ -1,47 +1,41 @@ -# Integrations - -## Recommendations - -### File Extension - -Applications that support mermaid files [SHOULD](https://datatracker.ietf.org/doc/html/rfc2119#section-3) use `.mermaid` or `.mmd` file extensions. +--- +outline: 'deep' # shows all h3 headings in outline in Vitepress +--- -### MIME Type +# Integrations - community -The recommended [MIME type](https://www.iana.org/assignments/media-types/media-types.xhtml) for mermaid media is `text/vnd.mermaid`. +We're excited about the growth of the Mermaid community, and the number of plugins and integrations that have been created with Mermaid. -[IANA](https://www.iana.org/) recognition pending. +## Community integrations ---- +Below are a list of community plugins and integrations created with Mermaid. -The following list is a compilation of different integrations and plugins that allow the rendering of mermaid definitions within other applications. +### Productivity tools -They also serve as proof of concept, for the variety of things that can be built with mermaid. +✅ = Native support -## Productivity - -- [GitHub](https://github.com) (**Native support**) - - [Using code blocks](https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/) (**Native support**) +- [GitHub](https://github.com) ✅ + - [Using code blocks](https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/) ✅ - [GitHub action: Compile mermaid to image](https://github.com/neenjaw/compile-mermaid-markdown-action) - [svg-generator](https://github.com/SimonKenyonShepard/mermaidjs-github-svg-generator) - [GitHub Writer](https://github.com/ckeditor/github-writer) -- [GitLab](https://docs.gitlab.com/ee/user/markdown.html#diagrams-and-flowcharts) (**Native support**) -- [Gitea](https://gitea.io) (**Native support**) -- [Azure Devops](https://docs.microsoft.com/en-us/azure/devops/project/wiki/wiki-markdown-guidance?view=azure-devops#add-mermaid-diagrams-to-a-wiki-page) (**Native support**) -- [Tuleap](https://docs.tuleap.org/user-guide/writing-in-tuleap.html#graphs) (**Native support**) -- [Mermaid Flow Visual Editor](https://www.mermaidflow.app) (**Native support**) -- [Deepdwn](https://billiam.itch.io/deepdwn) (**Native support**) -- [Joplin](https://joplinapp.org) (**Native support**) -- [Slab](https://slab.com) (**Native support**) -- [Swimm](https://swimm.io) (**Native support**) -- [Notion](https://notion.so) (**Native support**) -- [Observable](https://observablehq.com/@observablehq/mermaid) (**Native support**) -- [Obsidian](https://help.obsidian.md/Editing+and+formatting/Advanced+formatting+syntax#Diagram) (**Native support**) +- [GitLab](https://docs.gitlab.com/ee/user/markdown.html#diagrams-and-flowcharts) ✅ +- [Gitea](https://gitea.io) ✅ +- [Azure Devops](https://docs.microsoft.com/en-us/azure/devops/project/wiki/wiki-markdown-guidance?view=azure-devops#add-mermaid-diagrams-to-a-wiki-page) ✅ +- [Tuleap](https://docs.tuleap.org/user-guide/writing-in-tuleap.html#graphs) ✅ +- [Mermaid Flow Visual Editor](https://www.mermaidflow.app) ✅ +- [Deepdwn](https://billiam.itch.io/deepdwn) ✅ +- [Joplin](https://joplinapp.org) ✅ +- [Slab](https://slab.com) ✅ +- [Swimm](https://swimm.io) ✅ +- [Notion](https://notion.so) ✅ +- [Observable](https://observablehq.com/@observablehq/mermaid) ✅ +- [Obsidian](https://help.obsidian.md/Editing+and+formatting/Advanced+formatting+syntax#Diagram) ✅ - [GitBook](https://gitbook.com) - [Mermaid Plugin](https://github.com/JozoVilcek/gitbook-plugin-mermaid) - [Markdown with Mermaid CLI](https://github.com/miao1007/gitbook-plugin-mermaid-cli) - [Mermaid plugin for GitBook](https://github.com/wwformat/gitbook-plugin-mermaid-pdf) -- [LiveBook](https://livebook.dev) (**Native support**) +- [LiveBook](https://livebook.dev) ✅ - [Atlassian Products](https://www.atlassian.com) - [Mermaid Plugin for Confluence](https://marketplace.atlassian.com/apps/1214124/mermaid-plugin-for-confluence?hosting=server&tab=overview) - [CloudScript.io Addon](https://marketplace.atlassian.com/apps/1219878/cloudscript-io-mermaid-addon?hosting=cloud&tab=overview) @@ -54,11 +48,15 @@ They also serve as proof of concept, for the variety of things that can be built - [mermerd](https://github.com/KarnerTh/mermerd) - Visual Studio Code [Polyglot Interactive Notebooks](https://github.com/dotnet/interactive#net-interactive) -## CRM/ERP/Similar +### CRM/ERP + +Customer Relationship Management/Enterprise Resource Planning - [coreBOS](https://blog.corebos.org/blog/december2019) -## Blogs +### Blogging + +Blogging frameworks and platforms - [WordPress](https://wordpress.org) - [WordPress Markdown Editor](https://wordpress.org/plugins/wp-githuber-md) @@ -70,7 +68,9 @@ They also serve as proof of concept, for the variety of things that can be built - [Nextra](https://nextra.site/) - [Mermaid](https://nextra.site/docs/guide/mermaid) -## CMS +### CMS/ECM + +Content Management Systems/Enterprise Content Management - [VitePress](https://vitepress.vuejs.org/) - [Plugin for Mermaid.js](https://emersonbottero.github.io/vitepress-plugin-mermaid/) @@ -80,7 +80,9 @@ They also serve as proof of concept, for the variety of things that can be built - [Mermaid Diagrams](https://github.com/DanielFlaum/grav-plugin-mermaid-diagrams) - [GitLab Markdown Adapter](https://github.com/Goutte/grav-plugin-gitlab-markdown-adapter) -## Communication +### Communication + +Communication tools and platforms - [Discourse](https://discourse.org) - [Mermaid Plugin](https://github.com/pnewell/discourse-mermaid), [And](https://github.com/unfoldingWord-dev/discourse-mermaid) @@ -91,7 +93,7 @@ They also serve as proof of concept, for the variety of things that can be built - [NodeBB](https://nodebb.org) - [Mermaid Plugin](https://www.npmjs.com/package/nodebb-plugin-mermaid) -## Wikis +### Wikis - [MediaWiki](https://www.mediawiki.org) - [Mermaid Extension](https://www.mediawiki.org/wiki/Extension:Mermaid) @@ -107,7 +109,7 @@ They also serve as proof of concept, for the variety of things that can be built - [mermaid-tw5: full js library](https://github.com/efurlanm/mermaid-tw5) - [tw5-mermaid: wrapper for Mermaid Live](https://github.com/jasonmhoule/tw5-mermaid) -## Editor Plugins +### Editor Plugins - [VS Code](https://code.visualstudio.com/) - [Markdown Preview Mermaid Support](https://marketplace.visualstudio.com/items?itemName=bierner.markdown-mermaid) @@ -158,8 +160,9 @@ They also serve as proof of concept, for the variety of things that can be built - [Standard Notes](https://standardnotes.com/) - [sn-mermaid](https://github.com/nienow/sn-mermaid) -## Document Generation +### Document Generation +- [Swimm - Up-to-date diagrams with Swimm, the knowledge management tool for code](https://docs.swimm.io/Features/diagrams-and-charts) - [Sphinx](https://www.sphinx-doc.org/en/master/) - [sphinxcontrib-mermaid](https://github.com/mgaitan/sphinxcontrib-mermaid) - [remark](https://remark.js.org/) @@ -175,15 +178,15 @@ They also serve as proof of concept, for the variety of things that can be built - [mkdocs-material](https://github.com/squidfunk/mkdocs-material), check the [docs](https://squidfunk.github.io/mkdocs-material/reference/diagrams/) - [Type Doc](https://typedoc.org/) - [typedoc-plugin-mermaid](https://www.npmjs.com/package/typedoc-plugin-mermaid) -- [Docsy Hugo Theme](https://www.docsy.dev/docs/adding-content/lookandfeel/#diagrams-with-mermaid) (Native support in theme) +- [Docsy Hugo Theme](https://www.docsy.dev/docs/adding-content/lookandfeel/#diagrams-with-mermaid) (native support in theme) - [Codedoc](https://codedoc.cc/) - [codedoc-mermaid-plugin](https://www.npmjs.com/package/codedoc-mermaid-plugin) - [mdbook](https://rust-lang.github.io/mdBook/index.html) - [mdbook-mermaid](https://github.com/badboy/mdbook-mermaid) - [Quarto](https://quarto.org/) -- [Typora](https://typora.io/) ([Native support](https://support.typora.io/Draw-Diagrams-With-Markdown/#mermaid)) +- [Typora](https://typora.io/) ([native support](https://support.typora.io/Draw-Diagrams-With-Markdown/#mermaid)) -## Browser Extensions +### Browser Extensions | Name | Chrome Web Store | Firefox Add-ons | Opera | Edge | Source/Repository | | ------------------------ | ------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------ | ------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- | @@ -198,7 +201,7 @@ They also serve as proof of concept, for the variety of things that can be built | Monkeys | [🎡🔗](https://chrome.google.com/webstore/detail/monkeys-mermaid-for-githu/cplfdpoajbclbgphaphphcldamfkjlgi) | - | - | - | - | | Mermaid Previewer | [🎡🔗](https://chrome.google.com/webstore/detail/mermaid-previewer/oidjnlhbegipkcklbdfnbkikplpghfdl) | - | - | - | - | -## Other +### Other - [Jekyll](https://jekyllrb.com/) - [jekyll-mermaid](https://rubygems.org/gems/jekyll-mermaid) diff --git a/packages/mermaid/src/docs/ecosystem/integrations-create.md b/packages/mermaid/src/docs/ecosystem/integrations-create.md new file mode 100644 index 0000000000..421240729c --- /dev/null +++ b/packages/mermaid/src/docs/ecosystem/integrations-create.md @@ -0,0 +1,29 @@ +--- +outline: 'deep' # shows all h3 headings in outline in Vitepress +--- + +# Integrations - create + +## Recommendations + +Below are recommendations for creating plugins and integrations with Mermaid. + +### File Extension + +Applications that support Mermaid files [SHOULD](https://datatracker.ietf.org/doc/html/rfc2119#section-3) use `.mermaid` or `.mmd` file extensions. + +### MIME Type + +The recommended [MIME type](https://www.iana.org/assignments/media-types/media-types.xhtml) for Mermaid media is `text/vnd.mermaid`. + +Currently pending [IANA](https://www.iana.org/) recognition. + +## Showcase + +### Mermaid Slack workspace + +We would love to see what you create with Mermaid. Please share your creations with us in our [Slack](https://join.slack.com/t/mermaid-talk/shared_invite/zt-22p2r8p9y-qiyP1H38GjFQ6S6jbBkOxQ) workspace [#community-showcase](https://mermaid-talk.slack.com/archives/C05NK37LT40) channel. + +### Add to Mermaid Ecosystem + +If you have a plugin or integration that you'd like to add to our [Community integrations](/ecosystem/integrations-community) list, please [open a pull request](https://github.com/mermaid-js/mermaid). diff --git a/packages/mermaid/src/docs/ecosystem/mermaid-chart.md b/packages/mermaid/src/docs/ecosystem/mermaid-chart.md new file mode 100644 index 0000000000..7312299b41 --- /dev/null +++ b/packages/mermaid/src/docs/ecosystem/mermaid-chart.md @@ -0,0 +1,41 @@ +--- +outline: 'deep' # shows all h3 headings in outline in Vitepress +--- + +# Mermaid Chart + +## About + +[Mermaid Chart](https://www.mermaidchart.com) was born out of the Mermaid open source project and was founded by Knut Sveidqvist together with Open Core Ventures. The lead developers from Mermaid have joined the company and there is a strong connection between the project we all love and Mermaid Chart. Mermaid Chart brings resources to the open source development of Mermaid and makes it possible to work with Mermaid professionally. + +## Features + +- **Editor** - A web based editor for creating and editing Mermaid diagrams. + +- **Presentation** - A presentation mode for viewing Mermaid diagrams in a slideshow format. + +- **Collaboration** - A web based collaboration feature for multi-user editing on Mermaid diagrams in real-time (Pro plan). + +- **Plugins** - A plugin system for extending the functionality of Mermaid. Currently includes [VS Code](https://marketplace.visualstudio.com/items?itemName=MermaidChart.vscode-mermaid-chart) and [ChatGPT](https://www.mermaidchart.com/plugins/chatgpt). + +- **AI** - An AI chatbot that can generate Mermaid diagrams from text (Pro plan). + +- **More** - To learn more, visit our [Product](https://www.mermaidchart.com/product) page. + +## Plans + +- **Free** - A free plan that includes five diagrams. + +- **Pro** - A paid plan that includes unlimited diagrams, access to the collaboration feature, and more. + +- **Enterprise** - A paid plan for enterprise use that includes all Pro features, and more. + +## Access + +Sign up for a free account at [Mermaid Chart](https://www.mermaidchart.com/app/sign-up). + +Mermaid Chart is currently offering a 30-day free trial of our newly-launched Pro tier. To learn more, visit our [Pricing](https://mermaidchart.com/pricing) page. + +## Mermaid JS contributions + +First time contributors are eligible for a free Pro tier account for 1 year. diff --git a/packages/mermaid/src/docs/ecosystem/showcases.md b/packages/mermaid/src/docs/ecosystem/showcases.md deleted file mode 100644 index 0c756759f2..0000000000 --- a/packages/mermaid/src/docs/ecosystem/showcases.md +++ /dev/null @@ -1,3 +0,0 @@ -# Showcases - -- [Swimm - Up-to-date diagrams with Swimm, the knowledge management tool for code](https://docs.swimm.io/Features/diagrams-and-charts). diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 368c901ecb..0770c568b1 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -481,6 +481,61 @@ importers: specifier: ^7.0.0 version: 7.0.0 + packages/mermaid/src/vitepress: + dependencies: + '@vueuse/core': + specifier: ^10.1.0 + version: 10.1.0(vue@3.3.4) + jiti: + specifier: ^1.18.2 + version: 1.18.2 + mermaid: + specifier: workspace:^ + version: link:../.. + vue: + specifier: ^3.3 + version: 3.3.4 + devDependencies: + '@iconify-json/carbon': + specifier: ^1.1.16 + version: 1.1.16 + '@unocss/reset': + specifier: ^0.55.2 + version: 0.55.2 + '@vite-pwa/vitepress': + specifier: ^0.2.0 + version: 0.2.0(vite-plugin-pwa@0.16.0) + '@vitejs/plugin-vue': + specifier: ^4.2.1 + version: 4.2.1(vite@4.3.9)(vue@3.3.4) + 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.55.2 + version: 0.55.2(postcss@8.4.27)(rollup@2.79.1)(vite@4.3.9) + unplugin-vue-components: + specifier: ^0.25.0 + version: 0.25.0(rollup@2.79.1)(vue@3.3.4) + vite: + specifier: ^4.3.9 + version: 4.3.9(@types/node@18.16.0) + vite-plugin-pwa: + specifier: ^0.16.0 + version: 0.16.0(vite@4.3.9)(workbox-build@7.0.0)(workbox-window@7.0.0) + vitepress: + specifier: 1.0.0-rc.4 + version: 1.0.0-rc.4(@algolia/client-search@4.14.2)(@types/node@18.16.0)(search-insights@2.6.0) + workbox-window: + specifier: ^7.0.0 + version: 7.0.0 + tests/webpack: dependencies: '@mermaid-js/mermaid-example-diagram': @@ -1403,6 +1458,7 @@ packages: /@babel/plugin-proposal-async-generator-functions@7.20.7(@babel/core@7.12.3): resolution: {integrity: sha512-xMbiLsn/8RK7Wq7VeVytytS2L6qE69bXPB10YCmMdDZbKF4okCqY74pI/jJQ/8U0b/F6NrT2+14b8/P9/3AMGA==} engines: {node: '>=6.9.0'} + deprecated: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-async-generator-functions instead. peerDependencies: '@babel/core': ^7.0.0-0 dependencies: @@ -1418,6 +1474,7 @@ packages: /@babel/plugin-proposal-class-properties@7.18.6(@babel/core@7.12.3): resolution: {integrity: sha512-cumfXOF0+nzZrrN8Rf0t7M+tF6sZc7vhQwYQck9q1/5w2OExlD+b4v4RpMJFaV1Z7WcDRgO6FqvxqxGlwo+RHQ==} engines: {node: '>=6.9.0'} + deprecated: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-class-properties instead. peerDependencies: '@babel/core': ^7.0.0-0 dependencies: @@ -1431,6 +1488,7 @@ packages: /@babel/plugin-proposal-class-static-block@7.21.0(@babel/core@7.12.3): resolution: {integrity: sha512-XP5G9MWNUskFuP30IfFSEFB0Z6HzLIUcjYM4bYOPHXl7eiJ9HFv8tWj6TXTN5QODiEhDZAeI4hLok2iHFFV4hw==} engines: {node: '>=6.9.0'} + deprecated: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-class-static-block instead. peerDependencies: '@babel/core': ^7.12.0 dependencies: @@ -1445,6 +1503,7 @@ packages: /@babel/plugin-proposal-dynamic-import@7.18.6(@babel/core@7.12.3): resolution: {integrity: sha512-1auuwmK+Rz13SJj36R+jqFPMJWyKEDd7lLSdOj4oJK0UTgGueSAtkrCvz9ewmgyU/P941Rv2fQwZJN8s6QruXw==} engines: {node: '>=6.9.0'} + deprecated: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-dynamic-import instead. peerDependencies: '@babel/core': ^7.0.0-0 dependencies: @@ -1456,6 +1515,7 @@ packages: /@babel/plugin-proposal-export-namespace-from@7.18.9(@babel/core@7.12.3): resolution: {integrity: sha512-k1NtHyOMvlDDFeb9G5PhUXuGj8m/wiwojgQVEhJ/fsVsMCpLyOP4h0uGEjYJKrRI+EVPlb5Jk+Gt9P97lOGwtA==} engines: {node: '>=6.9.0'} + deprecated: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-export-namespace-from instead. peerDependencies: '@babel/core': ^7.0.0-0 dependencies: @@ -1467,6 +1527,7 @@ packages: /@babel/plugin-proposal-json-strings@7.18.6(@babel/core@7.12.3): resolution: {integrity: sha512-lr1peyn9kOdbYc0xr0OdHTZ5FMqS6Di+H0Fz2I/JwMzGmzJETNeOFq2pBySw6X/KFL5EWDjlJuMsUGRFb8fQgQ==} engines: {node: '>=6.9.0'} + deprecated: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-json-strings instead. peerDependencies: '@babel/core': ^7.0.0-0 dependencies: @@ -1478,6 +1539,7 @@ packages: /@babel/plugin-proposal-logical-assignment-operators@7.20.7(@babel/core@7.12.3): resolution: {integrity: sha512-y7C7cZgpMIjWlKE5T7eJwp+tnRYM89HmRvWM5EQuB5BoHEONjmQ8lSNmBUwOyy/GFRsohJED51YBF79hE1djug==} engines: {node: '>=6.9.0'} + deprecated: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-logical-assignment-operators instead. peerDependencies: '@babel/core': ^7.0.0-0 dependencies: @@ -1489,6 +1551,7 @@ packages: /@babel/plugin-proposal-nullish-coalescing-operator@7.18.6(@babel/core@7.12.3): resolution: {integrity: sha512-wQxQzxYeJqHcfppzBDnm1yAY0jSRkUXR2z8RePZYrKwMKgMlE8+Z6LUno+bd6LvbGh8Gltvy74+9pIYkr+XkKA==} engines: {node: '>=6.9.0'} + deprecated: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-nullish-coalescing-operator instead. peerDependencies: '@babel/core': ^7.0.0-0 dependencies: @@ -1500,6 +1563,7 @@ packages: /@babel/plugin-proposal-numeric-separator@7.18.6(@babel/core@7.12.3): resolution: {integrity: sha512-ozlZFogPqoLm8WBr5Z8UckIoE4YQ5KESVcNudyXOR8uqIkliTEgJ3RoketfG6pmzLdeZF0H/wjE9/cCEitBl7Q==} engines: {node: '>=6.9.0'} + deprecated: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-numeric-separator instead. peerDependencies: '@babel/core': ^7.0.0-0 dependencies: @@ -1511,6 +1575,7 @@ packages: /@babel/plugin-proposal-object-rest-spread@7.20.7(@babel/core@7.12.3): resolution: {integrity: sha512-d2S98yCiLxDVmBmE8UjGcfPvNEUbA1U5q5WxaWFUGRzJSVAZqm5W6MbPct0jxnegUZ0niLeNX+IOzEs7wYg9Dg==} engines: {node: '>=6.9.0'} + deprecated: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-object-rest-spread instead. peerDependencies: '@babel/core': ^7.0.0-0 dependencies: @@ -1525,6 +1590,7 @@ packages: /@babel/plugin-proposal-optional-catch-binding@7.18.6(@babel/core@7.12.3): resolution: {integrity: sha512-Q40HEhs9DJQyaZfUjjn6vE8Cv4GmMHCYuMGIWUnlxH6400VGxOuwWsPt4FxXxJkC/5eOzgn0z21M9gMT4MOhbw==} engines: {node: '>=6.9.0'} + deprecated: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-optional-catch-binding instead. peerDependencies: '@babel/core': ^7.0.0-0 dependencies: @@ -1536,6 +1602,7 @@ packages: /@babel/plugin-proposal-optional-chaining@7.21.0(@babel/core@7.12.3): resolution: {integrity: sha512-p4zeefM72gpmEe2fkUr/OnOXpWEf8nAgk7ZYVqqfFiyIG7oFfVZcCrU64hWn5xp4tQ9LkV4bTIa5rD0KANpKNA==} engines: {node: '>=6.9.0'} + deprecated: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-optional-chaining instead. peerDependencies: '@babel/core': ^7.0.0-0 dependencies: @@ -1548,6 +1615,7 @@ packages: /@babel/plugin-proposal-private-methods@7.18.6(@babel/core@7.12.3): resolution: {integrity: sha512-nutsvktDItsNn4rpGItSNV2sz1XwS+nfU0Rg8aCx3W3NOKVzdMjJRu0O5OkgDp3ZGICSTbgRpxZoWsxoKRvbeA==} engines: {node: '>=6.9.0'} + deprecated: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-private-methods instead. peerDependencies: '@babel/core': ^7.0.0-0 dependencies: @@ -1561,6 +1629,7 @@ packages: /@babel/plugin-proposal-private-property-in-object@7.21.0(@babel/core@7.12.3): resolution: {integrity: sha512-ha4zfehbJjc5MmXBlHec1igel5TJXXLDDRbuJ4+XT2TJcyD9/V1919BA8gMvsdHcNMBy4WBUBiRb3nw/EQUtBw==} engines: {node: '>=6.9.0'} + deprecated: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-private-property-in-object instead. peerDependencies: '@babel/core': ^7.0.0-0 dependencies: @@ -1576,6 +1645,7 @@ packages: /@babel/plugin-proposal-unicode-property-regex@7.18.6(@babel/core@7.12.3): resolution: {integrity: sha512-2BShG/d5yoZyXZfVePH91urL5wTG6ASZU9M4o03lKK8u8UW1y08OMttBSOADTcJrnPMpvDXRG3G8fyLh4ovs8w==} engines: {node: '>=4'} + deprecated: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-unicode-property-regex instead. peerDependencies: '@babel/core': ^7.0.0-0 dependencies: @@ -12283,10 +12353,6 @@ packages: engines: {node: '>= 6'} dev: false - /object-inspect@1.12.2: - resolution: {integrity: sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ==} - dev: true - /object-inspect@1.12.3: resolution: {integrity: sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==} dev: true @@ -13767,7 +13833,7 @@ packages: dependencies: call-bind: 1.0.2 get-intrinsic: 1.2.0 - object-inspect: 1.12.2 + object-inspect: 1.12.3 dev: true /siginfo@2.0.0: @@ -15000,7 +15066,7 @@ packages: optional: true dependencies: '@antfu/utils': 0.7.5 - '@rollup/pluginutils': 5.0.2(rollup@2.79.1) + '@rollup/pluginutils': 5.0.3(rollup@2.79.1) chokidar: 3.5.3 debug: 4.3.4(supports-color@8.1.1) fast-glob: 3.3.1 From 7c7d5881b793902af8ff8f2e904158f2704bbba1 Mon Sep 17 00:00:00 2001 From: Subhash Halder <halder.subhash@gmail.com> Date: Thu, 7 Sep 2023 12:45:22 +0530 Subject: [PATCH 040/457] Fixed all review comment --- cypress/integration/rendering/xyChart.spec.js | 122 ++++++++++++++++-- demos/xychart.html | 105 +++++++++++---- .../xychart/chartBuilder/Orchestrator.ts | 30 ++--- .../chartBuilder/TextDimensionCalculator.ts | 2 +- .../chartBuilder/components/ChartTitle.ts | 6 +- .../chartBuilder/components/axis/BandAxis.ts | 6 +- .../chartBuilder/components/axis/BaseAxis.ts | 13 +- .../components/axis/LinearAxis.ts | 8 +- .../chartBuilder/components/axis/index.ts | 12 +- .../chartBuilder/components/plot/BarPlot.ts | 33 +++-- .../chartBuilder/components/plot/LinePlot.ts | 2 +- .../chartBuilder/components/plot/index.ts | 8 +- .../diagrams/xychart/chartBuilder/index.ts | 8 +- .../src/diagrams/xychart/parser/xychart.jison | 3 + .../xychart/parser/xychart.jison.spec.ts | 2 +- .../mermaid/src/diagrams/xychart/xychartDb.ts | 52 +++----- .../src/diagrams/xychart/xychartDiagram.ts | 2 +- .../src/diagrams/xychart/xychartRenderer.ts | 14 +- 18 files changed, 269 insertions(+), 159 deletions(-) diff --git a/cypress/integration/rendering/xyChart.spec.js b/cypress/integration/rendering/xyChart.spec.js index d9b7f159c8..4199b02d87 100644 --- a/cypress/integration/rendering/xyChart.spec.js +++ b/cypress/integration/rendering/xyChart.spec.js @@ -103,7 +103,14 @@ describe('XY Chart', () => { it('Render spark line with "plotReservedSpacePercent"', () => { imgSnapshotTest( ` - %%{init: {"theme":"dark", "xyChart": { "width":200, "height": 20, "plotReservedSpacePercent": 100}}}%% +--- +config: + theme: dark + xyChart: + width: 200 + height: 20 + plotReservedSpacePercent: 100 +--- xychart-beta line [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800] `, @@ -114,7 +121,23 @@ describe('XY Chart', () => { it('Render spark bar without displaying other property', () => { imgSnapshotTest( ` - %%{init: {"theme":"dark", "xyChart": {"width": 200, "height": 20, "xAxis": {"showLabel": false, "showTitle": false, "showTick":false, "showAxisLine": false}, "yAxis": {"showLabel": false, "showTitle": false, "showTick":false, "showAxisLine": false}}}}%% +--- +config: + theme: dark + xyChart: + width: 200 + height: 20 + xAxis: + showLabel: false + showTitle: false + showTick: false + showAxisLine: false + yAxis: + showLabel: false + showTitle: false + showTick: false + showAxisLine: false +--- xychart-beta bar [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800] `, @@ -137,10 +160,36 @@ describe('XY Chart', () => { ); cy.get('svg'); }); - it('Render with showTitle false', () => { + it('Should use all the config from yaml', () => { imgSnapshotTest( ` - %%{init: {"xyChart": {"showTitle": false}}}%% +--- +config: + theme: forest + xyChart: + width: 1000 + height: 600 + titlePadding: 5 + titleFontSize: 10 + xAxis: + labelFontSize: 20 + labelPadding: 10 + titleFontSize: 30 + titlePadding: 20 + tickLength: 10 + tickWidth: 5 + axisLineWidth: 5 + yAxis: + labelFontSize: 20 + labelPadding: 10 + titleFontSize: 30 + titlePadding: 20 + tickLength: 10 + tickWidth: 5 + axisLineWidth: 5 + chartOrientation: horizontal + plotReservedSpacePercent: 60 +--- xychart-beta title "Sales Revene" x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] @@ -155,7 +204,17 @@ describe('XY Chart', () => { it('Render with show axis title false', () => { imgSnapshotTest( ` - %%{init: {"xyChart": {"yAxis": {"showTitle": false}, "xAxis": {"showTitle": false}}}}%% +--- +config: + theme: dark + xyChart: + width: 200 + height: 20 + xAxis: + showTitle: false + yAxis: + showTitle: false +--- xychart-beta title "Sales Revene" x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] @@ -170,7 +229,17 @@ describe('XY Chart', () => { it('Render with show axis label false', () => { imgSnapshotTest( ` - %%{init: {"xyChart": {"yAxis": {"showLabel": false}, "xAxis": {"showLabel": false}}}}%% +--- +config: + theme: dark + xyChart: + width: 200 + height: 20 + xAxis: + showLabel: false + yAxis: + showLabel: false +--- xychart-beta title "Sales Revene" x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] @@ -185,7 +254,17 @@ describe('XY Chart', () => { it('Render with show axis tick false', () => { imgSnapshotTest( ` - %%{init: {"xyChart": {"xAxis": {"showTick": false}, "yAxis": {"showTick": false}}}}%% +--- +config: + theme: dark + xyChart: + width: 200 + height: 20 + xAxis: + showTick: false + yAxis: + showTick: false +--- xychart-beta title "Sales Revene" x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] @@ -200,7 +279,17 @@ describe('XY Chart', () => { it('Render with show axis line false', () => { imgSnapshotTest( ` - %%{init: {"xyChart": {"xAxis": {"showAxisLine": false}, "yAxis": {"showAxisLine": false}}}}%% +--- +config: + theme: dark + xyChart: + width: 200 + height: 20 + xAxis: + showAxisLine: false + yAxis: + showAxisLine: false +--- xychart-beta title "Sales Revene" x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] @@ -215,7 +304,22 @@ describe('XY Chart', () => { it('Render all the theme color', () => { imgSnapshotTest( ` - %%{init: {"themeVariables": {"xyChart": {"titleColor": "#ff0000", "backgroundColor": "#f0f8ff", "yAxisLabelColor": "#ee82ee", "yAxisTitleColor": "#7fffd4", "yAxisTickColor": "#87ceeb", "yAxisLineColor": "#ff6347", "xAxisLabelColor": "#7fffd4", "xAxisTitleColor": "#ee82ee", "xAxisTickColor": "#ff6347", "xAxisLineColor": "#87ceeb", "plotColorPalette": "#008000, #faba63"}}}}%% +--- +config: + themeVariables: + xyChart: + titleColor: #ff0000 + backgroundColor: #f0f8ff + yAxisLabelColor: #ee82ee + yAxisTitleColor: #7fffd4 + yAxisTickColor: #87ceeb + yAxisLineColor: #ff6347 + xAxisLabelColor: #7fffd4 + xAxisTitleColor: #ee82ee + xAxisTickColor: #ff6347 + xAxisLineColor: #87ceeb + plotColorPalette: #008000, #faba63 +-- xychart-beta title "Sales Revene" x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] diff --git a/demos/xychart.html b/demos/xychart.html index 927047129d..8c74d0847b 100644 --- a/demos/xychart.html +++ b/demos/xychart.html @@ -23,9 +23,8 @@ <h1>XY Charts demos</h1> bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] </pre> - <hr /> - + <h1>XY Charts horizontal</h1> <pre class="mermaid"> xychart-beta horizontal title "Basic xychart" @@ -34,19 +33,8 @@ <h1>XY Charts demos</h1> bar "sample bat" [52, 96, 35, 10] line [23, 46, 75, 43] </pre> - - <h1>XY Charts demos</h1> - <pre class="mermaid"> - xychart-beta - title "Basic xychart" - x-axis "this is x axis" [category1, "category 2", category3, category4] - y-axis yaxisText 10 --> 150 - bar "sample bat" [52, 96, 35, 10] - line [23, 46, 75, 43] - </pre> - <hr /> - <h1>XY Charts demos</h1> + <h1>XY Charts only lines and bar</h1> <pre class="mermaid"> xychart-beta line [23, 46, 77, 34] @@ -54,19 +42,18 @@ <h1>XY Charts demos</h1> line [87, 54, 99, 85] line [78, 88, 22, 4] line [22, 29, 75, 33] - bar "sample bat" [52, 96, 35, 10] + bar [52, 96, 35, 10] </pre> <hr /> - <h1>XY Charts demos</h1> + <h1>XY Charts with +ve and -ve numbers</h1> <pre class="mermaid"> xychart-beta line [+1.3, .6, 2.4, -.34] </pre> - <h1>XY Charts demos</h1> + <h1>XY Charts Bar with multiple category</h1> <pre class="mermaid"> - %%{init: {"xyChart": {"width": 600, "height": 400}, "themeVariables": {"xyChart": {"titleColor": "#ff0000"} } }}%% xychart-beta title "Basic xychart with many categories" x-axis "this is x axis" [category1, "category 2", category3, category4, category5, category6, category7] @@ -74,7 +61,7 @@ <h1>XY Charts demos</h1> bar "sample bar" [52, 96, 35, 10, 87, 34, 67, 99] </pre> - <h1>XY Charts demos</h1> + <h1>XY Charts line with multiple category</h1> <pre class="mermaid"> xychart-beta title "Line chart with many category" @@ -83,7 +70,7 @@ <h1>XY Charts demos</h1> line "sample line" [52, 96, 35, 10, 87, 34, 67, 99] </pre> - <h1>XY Charts demos</h1> + <h1>XY Charts category with large text</h1> <pre class="mermaid"> xychart-beta title "Basic xychart with many categories with category overlap" @@ -92,23 +79,89 @@ <h1>XY Charts demos</h1> bar "sample bar" [52, 96, 35, 10, 87, 34, 67, 99] </pre> - <h1>sparkline demos</h1> + <h1>sparkline demo</h1> <pre class="mermaid"> - %%{init: {"theme":"dark", "xyChart": { "width":200, "height": 20, "plotReservedSpacePercent": 100}}}%% +--- +config: + theme: dark + xyChart: + width: 200 + height: 20 + plotReservedSpacePercent: 100 +--- xychart-beta line [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800] </pre> - <h1>sparkBar demos</h1> + <h1>sparkBar demo</h1> <pre class="mermaid"> - %%{init: {"theme":"dark", "xyChart": {"width": 200, "height": 20, "xAxis": {"showLabel": false, "showTitle": false, "showTick":false, "showAxisLine": false}, "yAxis": {"showLabel": false, "showTitle": false, "showTick":false, "showAxisLine": false}}}}%% +--- +config: + theme: dark + xyChart: + width: 200 + height: 20 + plotReservedSpacePercent: 100 +--- xychart-beta bar [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800] </pre> - <h1>XY Charts demos</h1> + <h1>XY Charts demos with all configs</h1> + <pre class="mermaid"> +--- +config: + theme: forest + xyChart: + width: 1000 + height: 600 + titlePadding: 5 + titleFontSize: 10 + xAxis: + labelFontSize: 20 + labelPadding: 10 + titleFontSize: 30 + titlePadding: 20 + tickLength: 10 + tickWidth: 5 + axisLineWidth: 5 + yAxis: + labelFontSize: 20 + labelPadding: 10 + titleFontSize: 30 + titlePadding: 20 + tickLength: 10 + tickWidth: 5 + axisLineWidth: 5 + chartOrientation: horizontal + plotReservedSpacePercent: 60 +--- + xychart-beta + title "Sales Revene" + x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] + y-axis "Revenue (in $)" 4000 --> 11000 + bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + + </pre> + <h1>XY Charts demos with all theme config</h1> <pre class="mermaid"> - %%{init: {"theme": "dark", "xyChart": {"width": 1000, "height": 600, "titlePadding": 5, "titleFontSize": 10, "xAxis": {"labelFontSize": "20", "labelPadding": 10, "titleFontSize": 30, "titlePadding": 20, "tickLength": 10, "tickWidth": 5, "axisLineWidth": 5}, "yAxis": {"labelFontSize": "20", "labelPadding": 10, "titleFontSize": 30, "titlePadding": 20, "tickLength": 10, "tickWidth": 5, "axisLineWidth": 5}, "chartOrientation": "horizontal", "plotReservedSpacePercent": 60 }}}%% +--- +config: + themeVariables: + xyChart: + titleColor: #ff0000 + backgroundColor: #f0f8ff + yAxisLabelColor: #ee82ee + yAxisTitleColor: #7fffd4 + yAxisTickColor: #87ceeb + yAxisLineColor: #ff6347 + xAxisLabelColor: #7fffd4 + xAxisTitleColor: #ee82ee + xAxisTickColor: #ff6347 + xAxisLineColor: #87ceeb + plotColorPalette: #008000, #faba63 +--- xychart-beta title "Sales Revene" x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts index 256a103eb7..75c0319bf3 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts @@ -1,13 +1,17 @@ -import { log } from '../../../logger.js'; -import type { DrawableElem, XYChartData, XYChartThemeConfig, XYChartConfig } from './Interfaces.js'; -import { isBarPlot } from './Interfaces.js'; -import { getChartTitleComponent } from './components/ChartTitle.js'; -import type { ChartComponent } from './Interfaces.js'; +import type { SVGGType } from '../xychartDb.js'; +import type { + ChartComponent, + DrawableElem, + XYChartConfig, + XYChartData, + XYChartThemeConfig, +} from './interfaces.js'; +import { isBarPlot } from './interfaces.js'; import type { Axis } from './components/axis/index.js'; import { getAxis } from './components/axis/index.js'; +import { getChartTitleComponent } from './components/chartTitle.js'; import type { Plot } from './components/plot/index.js'; import { getPlotComponent } from './components/plot/index.js'; -import type { SVGGType } from '../xychartDb.js'; export class Orchestrator { private componentStore: { @@ -70,7 +74,6 @@ export class Orchestrator { width: this.chartConfig.width, height: availableHeight, }); - log.trace('space used by title: ', spaceUsed); plotY = spaceUsed.height; availableHeight -= spaceUsed.height; this.componentStore.xAxis.setAxisPosition('bottom'); @@ -78,14 +81,12 @@ export class Orchestrator { width: availableWidth, height: availableHeight, }); - log.trace('space used by xaxis: ', spaceUsed); availableHeight -= spaceUsed.height; this.componentStore.yAxis.setAxisPosition('left'); spaceUsed = this.componentStore.yAxis.calculateSpace({ width: availableWidth, height: availableHeight, }); - log.trace('space used by yaxis: ', spaceUsed); plotX = spaceUsed.width; availableWidth -= spaceUsed.width; if (availableWidth > 0) { @@ -101,10 +102,6 @@ export class Orchestrator { height: chartHeight, }); - log.trace( - `Final chart dimansion: x = ${plotX}, y = ${plotY}, width = ${chartWidth}, height = ${chartHeight}` - ); - this.componentStore.plot.setBoundingBoxXY({ x: plotX, y: plotY }); this.componentStore.xAxis.setRange([plotX, plotX + chartWidth]); this.componentStore.xAxis.setBoundingBoxXY({ x: plotX, y: plotY + chartHeight }); @@ -136,7 +133,6 @@ export class Orchestrator { width: this.chartConfig.width, height: availableHeight, }); - log.trace('space used by title: ', spaceUsed); titleYEnd = spaceUsed.height; availableHeight -= spaceUsed.height; this.componentStore.xAxis.setAxisPosition('left'); @@ -146,13 +142,11 @@ export class Orchestrator { }); availableWidth -= spaceUsed.width; plotX = spaceUsed.width; - log.trace('space used by xaxis: ', spaceUsed); this.componentStore.yAxis.setAxisPosition('top'); spaceUsed = this.componentStore.yAxis.calculateSpace({ width: availableWidth, height: availableHeight, }); - log.trace('space used by yaxis: ', spaceUsed); availableHeight -= spaceUsed.height; plotY = titleYEnd + spaceUsed.height; if (availableWidth > 0) { @@ -168,10 +162,6 @@ export class Orchestrator { height: chartHeight, }); - log.trace( - `Final chart dimansion: x = ${plotX}, y = ${plotY}, width = ${chartWidth}, height = ${chartHeight}` - ); - this.componentStore.plot.setBoundingBoxXY({ x: plotX, y: plotY }); this.componentStore.yAxis.setRange([plotX, plotX + chartWidth]); this.componentStore.yAxis.setBoundingBoxXY({ x: plotX, y: titleYEnd }); diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/TextDimensionCalculator.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/TextDimensionCalculator.ts index 2fd2d770e7..e9e98c9e39 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/TextDimensionCalculator.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/TextDimensionCalculator.ts @@ -1,4 +1,4 @@ -import type { Dimension } from './Interfaces.js'; +import type { Dimension } from './interfaces.js'; import { computeDimensionOfText } from '../../../rendering-util/createText.js'; import type { SVGGType } from '../xychartDb.js'; diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts index 18dd38b710..19dacc3ae8 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts @@ -8,9 +8,9 @@ import type { XYChartData, XYChartThemeConfig, XYChartConfig, -} from '../Interfaces.js'; -import type { TextDimensionCalculator } from '../TextDimensionCalculator.js'; -import { TextDimensionCalculatorWithFont } from '../TextDimensionCalculator.js'; +} from '../interfaces.js'; +import type { TextDimensionCalculator } from '../textDimensionCalculator.js'; +import { TextDimensionCalculatorWithFont } from '../textDimensionCalculator.js'; export class ChartTitle implements ChartComponent { private boundingRect: BoundingRect; diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BandAxis.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BandAxis.ts index 8c785cf72b..864ef1316e 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BandAxis.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BandAxis.ts @@ -1,9 +1,9 @@ import type { ScaleBand } from 'd3'; import { scaleBand } from 'd3'; import { log } from '../../../../../logger.js'; -import type { TextDimensionCalculator } from '../../TextDimensionCalculator.js'; -import { BaseAxis } from './BaseAxis.js'; -import type { XYChartAxisThemeConfig, XYChartAxisConfig } from '../../Interfaces.js'; +import type { TextDimensionCalculator } from '../../textDimensionCalculator.js'; +import { BaseAxis } from './baseAxis.js'; +import type { XYChartAxisThemeConfig, XYChartAxisConfig } from '../../interfaces.js'; export class BandAxis extends BaseAxis { private scale: ScaleBand<string>; diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts index 1f16990285..18e48f54cb 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts @@ -1,14 +1,13 @@ -import { log } from '../../../../../logger.js'; import type { BoundingRect, Dimension, DrawableElem, Point, - XYChartAxisThemeConfig, XYChartAxisConfig, -} from '../../Interfaces.js'; -import type { TextDimensionCalculator } from '../../TextDimensionCalculator.js'; -import type { AxisPosition, Axis } from './index.js'; + XYChartAxisThemeConfig, +} from '../../interfaces.js'; +import type { TextDimensionCalculator } from '../../textDimensionCalculator.js'; +import type { Axis, AxisPosition } from './index.js'; const BAR_WIDTH_TO_TICK_WIDTH_RATIO = 0.7; const MAX_OUTER_PADDING_PERCENT_FOR_WRT_LABEL = 0.2; @@ -96,7 +95,6 @@ export abstract class BaseAxis implements Axis { const heightRequired = spaceRequired.height + this.axisConfig.labelPadding * 2; this.labelTextHeight = spaceRequired.height; - log.trace('height required for axis label: ', heightRequired); if (heightRequired <= availableHeight) { availableHeight -= heightRequired; this.showLabel = true; @@ -113,7 +111,6 @@ export abstract class BaseAxis implements Axis { ); const heightRequired = spaceRequired.height + this.axisConfig.titlePadding * 2; this.titleTextHeight = spaceRequired.height; - log.trace('height required for axis title: ', heightRequired); if (heightRequired <= availableHeight) { availableHeight -= heightRequired; this.showTitle = true; @@ -134,7 +131,6 @@ export abstract class BaseAxis implements Axis { const maxPadding = MAX_OUTER_PADDING_PERCENT_FOR_WRT_LABEL * availableSpace.height; this.outerPadding = Math.min(spaceRequired.height / 2, maxPadding); const widthRequired = spaceRequired.width + this.axisConfig.labelPadding * 2; - log.trace('width required for axis label: ', widthRequired); if (widthRequired <= availableWidth) { availableWidth -= widthRequired; this.showLabel = true; @@ -151,7 +147,6 @@ export abstract class BaseAxis implements Axis { ); const widthRequired = spaceRequired.height + this.axisConfig.titlePadding * 2; this.titleTextHeight = spaceRequired.height; - log.trace('width required for axis title: ', widthRequired); if (widthRequired <= availableWidth) { availableWidth -= widthRequired; this.showTitle = true; diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/LinearAxis.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/LinearAxis.ts index 6f0e2bdbb6..8107732d93 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/LinearAxis.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/LinearAxis.ts @@ -1,9 +1,8 @@ import type { ScaleLinear } from 'd3'; import { scaleLinear } from 'd3'; -import { log } from '../../../../../logger.js'; -import type { TextDimensionCalculator } from '../../TextDimensionCalculator.js'; -import { BaseAxis } from './BaseAxis.js'; -import type { XYChartAxisThemeConfig, XYChartAxisConfig } from '../../Interfaces.js'; +import type { TextDimensionCalculator } from '../../textDimensionCalculator.js'; +import { BaseAxis } from './baseAxis.js'; +import type { XYChartAxisThemeConfig, XYChartAxisConfig } from '../../interfaces.js'; export class LinearAxis extends BaseAxis { private scale: ScaleLinear<number, number>; @@ -31,7 +30,6 @@ export class LinearAxis extends BaseAxis { domain.reverse(); // since y-axis in svg start from top } this.scale = scaleLinear().domain(domain).range(this.getRange()); - log.trace('Linear axis final domain, range: ', this.domain, this.getRange()); } getScaleValue(value: number): number { diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts index a563ad6864..e4b42029da 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts @@ -2,13 +2,13 @@ import type { SVGGType } from '../../../xychartDb.js'; import type { AxisDataType, ChartComponent, - XYChartAxisThemeConfig, XYChartAxisConfig, -} from '../../Interfaces.js'; -import { isBandAxisData } from '../../Interfaces.js'; -import { TextDimensionCalculatorWithFont } from '../../TextDimensionCalculator.js'; -import { BandAxis } from './BandAxis.js'; -import { LinearAxis } from './LinearAxis.js'; + XYChartAxisThemeConfig, +} from '../../interfaces.js'; +import { isBandAxisData } from '../../interfaces.js'; +import { TextDimensionCalculatorWithFont } from '../../textDimensionCalculator.js'; +import { BandAxis } from './bandAxis.js'; +import { LinearAxis } from './linearAxis.js'; export type AxisPosition = 'left' | 'right' | 'top' | 'bottom'; diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts index e6b2e66e9f..cf7d4e516d 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts @@ -1,4 +1,4 @@ -import type { BarPlotData, BoundingRect, DrawableElem, XYChartConfig } from '../../Interfaces.js'; +import type { BarPlotData, BoundingRect, DrawableElem, XYChartConfig } from '../../interfaces.js'; import type { Axis } from '../axis/index.js'; export class BarPlot { @@ -40,22 +40,21 @@ export class BarPlot { })), }, ]; - } else { - return [ - { - groupTexts: ['plot', `bar-plot-${this.plotIndex}`], - type: 'rect', - data: finalData.map((data) => ({ - x: data[0] - barWidthHalf, - y: data[1], - width: barWidth, - height: this.boundingRect.y + this.boundingRect.height - data[1], - fill: this.barData.fill, - strokeWidth: 0, - strokeFill: this.barData.fill, - })), - }, - ]; } + return [ + { + groupTexts: ['plot', `bar-plot-${this.plotIndex}`], + type: 'rect', + data: finalData.map((data) => ({ + x: data[0] - barWidthHalf, + y: data[1], + width: barWidth, + height: this.boundingRect.y + this.boundingRect.height - data[1], + fill: this.barData.fill, + strokeWidth: 0, + strokeFill: this.barData.fill, + })), + }, + ]; } } diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/LinePlot.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/LinePlot.ts index e4ab886ea7..d8d0666de3 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/LinePlot.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/LinePlot.ts @@ -1,5 +1,5 @@ import { line } from 'd3'; -import type { DrawableElem, LinePlotData, XYChartConfig } from '../../Interfaces.js'; +import type { DrawableElem, LinePlotData, XYChartConfig } from '../../interfaces.js'; import type { Axis } from '../axis/index.js'; export class LinePlot { diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts index 3707923793..94ab0127a5 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts @@ -6,11 +6,11 @@ import type { Point, XYChartThemeConfig, XYChartConfig, -} from '../../Interfaces.js'; +} from '../../interfaces.js'; import type { Axis } from '../axis/index.js'; -import type { ChartComponent } from '../../Interfaces.js'; -import { LinePlot } from './LinePlot.js'; -import { BarPlot } from './BarPlot.js'; +import type { ChartComponent } from '../../interfaces.js'; +import { LinePlot } from './linePlot.js'; +import { BarPlot } from './barPlot.js'; export interface Plot extends ChartComponent { setAxes(xAxis: Axis, yAxis: Axis): void; diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts index 356f0b4522..2dba84c2c1 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts @@ -1,7 +1,6 @@ -import { log } from '../../../logger.js'; import type { SVGGType } from '../xychartDb.js'; -import type { DrawableElem, XYChartData, XYChartConfig, XYChartThemeConfig } from './Interfaces.js'; -import { Orchestrator } from './Orchestrator.js'; +import type { DrawableElem, XYChartConfig, XYChartData, XYChartThemeConfig } from './interfaces.js'; +import { Orchestrator } from './orchestrator.js'; export class XYChartBuilder { static build( @@ -10,9 +9,6 @@ export class XYChartBuilder { chartThemeConfig: XYChartThemeConfig, tmpSVGGElem: SVGGType ): DrawableElem[] { - log.trace(`Build start with Config: ${JSON.stringify(config, null, 2)}`); - log.trace(`Build start with ChartData: ${JSON.stringify(chartData, null, 2)}`); - log.trace(`Build start with ChartThemeConfig: ${JSON.stringify(chartThemeConfig, null, 2)}`); const orchestrator = new Orchestrator(config, chartData, chartThemeConfig, tmpSVGGElem); return orchestrator.getDrawableElement(); } diff --git a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison index 8666dda3b4..987132d17a 100644 --- a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison +++ b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison @@ -104,6 +104,9 @@ statement | LINE text plotData { yy.setLineData($text, $plotData); } | BAR plotData { yy.setBarData({text: '', type: 'text'}, $plotData); } | BAR text plotData { yy.setBarData($text, $plotData); } + | acc_title acc_title_value { $$=$acc_title_value.trim();yy.setAccTitle($$); } + | acc_descr acc_descr_value { $$=$acc_descr_value.trim();yy.setAccDescription($$); } + | acc_descr_multiline_value { $$=$acc_descr_multiline_value.trim();yy.setAccDescription($$); } ; plotData diff --git a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts index 6ccc06c584..23fdb8ae8b 100644 --- a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts +++ b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts @@ -1,4 +1,4 @@ -// @ts-ignore: TODO Fix ts errors +// @ts-ignore: Jison doesn't support type. import { parser } from './xychart.jison'; import type { Mock } from 'vitest'; import { vi } from 'vitest'; diff --git a/packages/mermaid/src/diagrams/xychart/xychartDb.ts b/packages/mermaid/src/diagrams/xychart/xychartDb.ts index b585b3ba00..72550ed55d 100644 --- a/packages/mermaid/src/diagrams/xychart/xychartDb.ts +++ b/packages/mermaid/src/diagrams/xychart/xychartDb.ts @@ -1,29 +1,28 @@ // @ts-ignore: TODO Fix ts errors -import { adjust, channel } from 'khroma'; import type { Selection } from 'd3-selection'; -import mermaidAPI from '../../mermaidAPI.js'; -import * as configApi from '../../config.js'; -import defaultConfig from '../../defaultConfig.js'; -import { sanitizeText } from '../common/common.js'; import { - setAccTitle, + clear as commonClear, + getAccDescription, getAccTitle, - setDiagramTitle, getDiagramTitle, - getAccDescription, setAccDescription, - clear as commonClear, + setAccTitle, + setDiagramTitle, } from '../../commonDb.js'; +import * as configApi from '../../config.js'; +import defaultConfig from '../../defaultConfig.js'; +import { getThemeVariables } from '../../themes/theme-default.js'; +import { cleanAndMerge } from '../../utils.js'; +import { sanitizeText } from '../common/common.js'; import { XYChartBuilder } from './chartBuilder/index.js'; import type { DrawableElem, SimplePlotDataType, + XYChartConfig, XYChartData, XYChartThemeConfig, - XYChartConfig, -} from './chartBuilder/Interfaces.js'; -import { isBandAxisData, isLinearAxisData } from './chartBuilder/Interfaces.js'; -import { getThemeVariables } from '../../themes/theme-default.js'; +} from './chartBuilder/interfaces.js'; +import { isBandAxisData, isLinearAxisData } from './chartBuilder/interfaces.js'; export type SVGGType = Selection<SVGGElement, unknown, Element | null, unknown>; @@ -46,25 +45,14 @@ interface NormalTextType { function getChartDefaultThemeConfig(): XYChartThemeConfig { const defaultThemeVariables = getThemeVariables(); const config = configApi.getConfig(); - return { - ...defaultThemeVariables.xyChart, - ...config.themeVariables?.xyChart, - }; + return cleanAndMerge(defaultThemeVariables.xyChart, config.themeVariables.xyChart); } function getChartDefaultConfig(): XYChartConfig { const config = configApi.getConfig(); - return { - ...(defaultConfig.xyChart as XYChartConfig), - ...config.xyChart, - yAxis: { - ...(defaultConfig.xyChart as XYChartConfig).yAxis, - ...config.xyChart?.yAxis, - }, - xAxis: { - ...(defaultConfig.xyChart as XYChartConfig).xAxis, - ...config.xyChart?.xAxis, - }, - }; + return cleanAndMerge<XYChartConfig>( + defaultConfig.xyChart as XYChartConfig, + config.xyChart as XYChartConfig + ); } function getChartDefalutData(): XYChartData { @@ -90,11 +78,6 @@ function textSanitizer(text: string) { return sanitizeText(text.trim(), config); } -function parseDirective(statement: string, context: string, type: string) { - // @ts-ignore: TODO Fix ts errors - mermaidAPI.parseDirective(this, statement, context, type); -} - function setTmpSVGG(SVGG: SVGGType) { tmpSVGGElem = SVGG; } @@ -228,7 +211,6 @@ const clear = function () { export default { getDrawableElem, - parseDirective, clear, setAccTitle, getAccTitle, diff --git a/packages/mermaid/src/diagrams/xychart/xychartDiagram.ts b/packages/mermaid/src/diagrams/xychart/xychartDiagram.ts index c4e913adc3..2f09c10a24 100644 --- a/packages/mermaid/src/diagrams/xychart/xychartDiagram.ts +++ b/packages/mermaid/src/diagrams/xychart/xychartDiagram.ts @@ -1,5 +1,5 @@ import type { DiagramDefinition } from '../../diagram-api/types.js'; -// @ts-ignore: TODO Fix ts errors +// @ts-ignore: Jison doesn't support types. import parser from './parser/xychart.jison'; import db from './xychartDb.js'; import renderer from './xychartRenderer.js'; diff --git a/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts b/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts index 8f8451d3fd..90760008bd 100644 --- a/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts +++ b/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts @@ -1,14 +1,14 @@ import type { Diagram } from '../../Diagram.js'; import { log } from '../../logger.js'; +import { selectSvgElement } from '../../rendering-util/selectSvgElement.js'; import { configureSvgSize } from '../../setupGraphViewbox.js'; import type { DrawableElem, TextElem, TextHorizontalPos, TextVerticalPos, -} from './chartBuilder/Interfaces.js'; +} from './chartBuilder/interfaces.js'; import type XYChartDB from './xychartDb.js'; -import { selectSvgElement } from '../../rendering-util/selectSvgElement.js'; export const draw = (txt: string, id: string, _version: string, diagObj: Diagram) => { const db = diagObj.db as typeof XYChartDB; @@ -68,18 +68,8 @@ export const draw = (txt: string, id: string, _version: string, diagObj: Diagram for (const shape of shapes) { if (shape.data.length === 0) { - log.trace( - `Skipped drawing of shape of type: ${shape.type} with data: ${JSON.stringify( - shape.data, - null, - 2 - )}` - ); continue; } - log.trace( - `Drawing shape of type: ${shape.type} with data: ${JSON.stringify(shape.data, null, 2)}` - ); const shapeGroup = getGroup(shape.groupTexts); From fae648c2538c62dba8d832309a9873916feb1ea5 Mon Sep 17 00:00:00 2001 From: Subhash Halder <halder.subhash@gmail.com> Date: Thu, 7 Sep 2023 13:16:46 +0530 Subject: [PATCH 041/457] Added the file name changes --- cypress/integration/rendering/xyChart.spec.js | 14 +------------- .../components/axis/{BandAxis.ts => bandAxis.ts} | 0 .../components/axis/{BaseAxis.ts => baseAxis.ts} | 0 .../axis/{LinearAxis.ts => linearAxis.ts} | 0 .../components/{ChartTitle.ts => chartTitle.ts} | 0 .../components/plot/{BarPlot.ts => barPlot.ts} | 0 .../components/plot/{LinePlot.ts => linePlot.ts} | 0 .../chartBuilder/{Interfaces.ts => interfaces.ts} | 0 .../{Orchestrator.ts => orchestrator.ts} | 0 ...ionCalculator.ts => textDimensionCalculator.ts} | 0 packages/mermaid/src/diagrams/xychart/xychartDb.ts | 3 +-- 11 files changed, 2 insertions(+), 15 deletions(-) rename packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/{BandAxis.ts => bandAxis.ts} (100%) rename packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/{BaseAxis.ts => baseAxis.ts} (100%) rename packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/{LinearAxis.ts => linearAxis.ts} (100%) rename packages/mermaid/src/diagrams/xychart/chartBuilder/components/{ChartTitle.ts => chartTitle.ts} (100%) rename packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/{BarPlot.ts => barPlot.ts} (100%) rename packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/{LinePlot.ts => linePlot.ts} (100%) rename packages/mermaid/src/diagrams/xychart/chartBuilder/{Interfaces.ts => interfaces.ts} (100%) rename packages/mermaid/src/diagrams/xychart/chartBuilder/{Orchestrator.ts => orchestrator.ts} (100%) rename packages/mermaid/src/diagrams/xychart/chartBuilder/{TextDimensionCalculator.ts => textDimensionCalculator.ts} (100%) diff --git a/cypress/integration/rendering/xyChart.spec.js b/cypress/integration/rendering/xyChart.spec.js index 4199b02d87..1fdb21aee7 100644 --- a/cypress/integration/rendering/xyChart.spec.js +++ b/cypress/integration/rendering/xyChart.spec.js @@ -206,10 +206,7 @@ config: ` --- config: - theme: dark xyChart: - width: 200 - height: 20 xAxis: showTitle: false yAxis: @@ -231,10 +228,7 @@ config: ` --- config: - theme: dark xyChart: - width: 200 - height: 20 xAxis: showLabel: false yAxis: @@ -256,10 +250,7 @@ config: ` --- config: - theme: dark xyChart: - width: 200 - height: 20 xAxis: showTick: false yAxis: @@ -281,10 +272,7 @@ config: ` --- config: - theme: dark xyChart: - width: 200 - height: 20 xAxis: showAxisLine: false yAxis: @@ -319,7 +307,7 @@ config: xAxisTickColor: #ff6347 xAxisLineColor: #87ceeb plotColorPalette: #008000, #faba63 --- +--- xychart-beta title "Sales Revene" x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BandAxis.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/bandAxis.ts similarity index 100% rename from packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BandAxis.ts rename to packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/bandAxis.ts diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/baseAxis.ts similarity index 100% rename from packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts rename to packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/baseAxis.ts diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/LinearAxis.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/linearAxis.ts similarity index 100% rename from packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/LinearAxis.ts rename to packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/linearAxis.ts diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/chartTitle.ts similarity index 100% rename from packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts rename to packages/mermaid/src/diagrams/xychart/chartBuilder/components/chartTitle.ts diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/barPlot.ts similarity index 100% rename from packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts rename to packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/barPlot.ts diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/LinePlot.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/linePlot.ts similarity index 100% rename from packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/LinePlot.ts rename to packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/linePlot.ts diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/interfaces.ts similarity index 100% rename from packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts rename to packages/mermaid/src/diagrams/xychart/chartBuilder/interfaces.ts diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/orchestrator.ts similarity index 100% rename from packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts rename to packages/mermaid/src/diagrams/xychart/chartBuilder/orchestrator.ts diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/TextDimensionCalculator.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/textDimensionCalculator.ts similarity index 100% rename from packages/mermaid/src/diagrams/xychart/chartBuilder/TextDimensionCalculator.ts rename to packages/mermaid/src/diagrams/xychart/chartBuilder/textDimensionCalculator.ts diff --git a/packages/mermaid/src/diagrams/xychart/xychartDb.ts b/packages/mermaid/src/diagrams/xychart/xychartDb.ts index 72550ed55d..7bd27c1a94 100644 --- a/packages/mermaid/src/diagrams/xychart/xychartDb.ts +++ b/packages/mermaid/src/diagrams/xychart/xychartDb.ts @@ -1,4 +1,3 @@ -// @ts-ignore: TODO Fix ts errors import type { Selection } from 'd3-selection'; import { clear as commonClear, @@ -8,7 +7,7 @@ import { setAccDescription, setAccTitle, setDiagramTitle, -} from '../../commonDb.js'; +} from '../common/commonDb.js'; import * as configApi from '../../config.js'; import defaultConfig from '../../defaultConfig.js'; import { getThemeVariables } from '../../themes/theme-default.js'; From b98217e3c3085b451e812915c539853e7ac9378f Mon Sep 17 00:00:00 2001 From: Subhash Halder <halder.subhash@gmail.com> Date: Thu, 7 Sep 2023 13:31:52 +0530 Subject: [PATCH 042/457] Fix YAML themeVariables config --- cypress/integration/rendering/xyChart.spec.js | 22 +++++++++---------- demos/xychart.html | 22 +++++++++---------- docs/syntax/xyChart.md | 20 +++++++++++++++-- packages/mermaid/src/docs/syntax/xyChart.md | 10 ++++++++- 4 files changed, 49 insertions(+), 25 deletions(-) diff --git a/cypress/integration/rendering/xyChart.spec.js b/cypress/integration/rendering/xyChart.spec.js index 1fdb21aee7..3948dc71e2 100644 --- a/cypress/integration/rendering/xyChart.spec.js +++ b/cypress/integration/rendering/xyChart.spec.js @@ -296,17 +296,17 @@ config: config: themeVariables: xyChart: - titleColor: #ff0000 - backgroundColor: #f0f8ff - yAxisLabelColor: #ee82ee - yAxisTitleColor: #7fffd4 - yAxisTickColor: #87ceeb - yAxisLineColor: #ff6347 - xAxisLabelColor: #7fffd4 - xAxisTitleColor: #ee82ee - xAxisTickColor: #ff6347 - xAxisLineColor: #87ceeb - plotColorPalette: #008000, #faba63 + titleColor: "#ff0000" + backgroundColor: "#f0f8ff" + yAxisLabelColor: "#ee82ee" + yAxisTitleColor: "#7fffd4" + yAxisTickColor: "#87ceeb" + yAxisLineColor: "#ff6347" + xAxisLabelColor: "#7fffd4" + xAxisTitleColor: "#ee82ee" + xAxisTickColor: "#ff6347" + xAxisLineColor: "#87ceeb" + plotColorPalette: "#008000, #faba63" --- xychart-beta title "Sales Revene" diff --git a/demos/xychart.html b/demos/xychart.html index 8c74d0847b..1d8bad78b8 100644 --- a/demos/xychart.html +++ b/demos/xychart.html @@ -150,17 +150,17 @@ <h1>XY Charts demos with all theme config</h1> config: themeVariables: xyChart: - titleColor: #ff0000 - backgroundColor: #f0f8ff - yAxisLabelColor: #ee82ee - yAxisTitleColor: #7fffd4 - yAxisTickColor: #87ceeb - yAxisLineColor: #ff6347 - xAxisLabelColor: #7fffd4 - xAxisTitleColor: #ee82ee - xAxisTickColor: #ff6347 - xAxisLineColor: #87ceeb - plotColorPalette: #008000, #faba63 + titleColor: "#ff0000" + backgroundColor: "#f0f8ff" + yAxisLabelColor: "#ee82ee" + yAxisTitleColor: "#7fffd4" + yAxisTickColor: "#87ceeb" + yAxisLineColor: "#ff6347" + xAxisLabelColor: "#7fffd4" + xAxisTitleColor: "#ee82ee" + xAxisTickColor: "#ff6347" + xAxisLineColor: "#87ceeb" + plotColorPalette: "#008000, #faba63" --- xychart-beta title "Sales Revene" diff --git a/docs/syntax/xyChart.md b/docs/syntax/xyChart.md index 4ee83bdba8..255c3c089c 100644 --- a/docs/syntax/xyChart.md +++ b/docs/syntax/xyChart.md @@ -152,7 +152,15 @@ Every grammer are optional other than the chart name and one data set, so you wi ## Example on config and theme ```mermaid-example -%%{init: {"xyChart": {"width": 900, "height": 600}, "themeVariables": {"xyChart": {"titleColor": "#ff0000"} } }}%% +--- +config: + xyChart: + width: 900 + height: 600 + themeVariables: + xyChart: + titleColor: "#ff0000" +--- xychart-beta title "Sales Revenue" x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] @@ -162,7 +170,15 @@ xychart-beta ``` ```mermaid -%%{init: {"xyChart": {"width": 900, "height": 600}, "themeVariables": {"xyChart": {"titleColor": "#ff0000"} } }}%% +--- +config: + xyChart: + width: 900 + height: 600 + themeVariables: + xyChart: + titleColor: "#ff0000" +--- xychart-beta title "Sales Revenue" x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] diff --git a/packages/mermaid/src/docs/syntax/xyChart.md b/packages/mermaid/src/docs/syntax/xyChart.md index 2820bc7914..ef089eb435 100644 --- a/packages/mermaid/src/docs/syntax/xyChart.md +++ b/packages/mermaid/src/docs/syntax/xyChart.md @@ -147,7 +147,15 @@ Themes for xychart resides inside xychart attribute so to set the variables use ## Example on config and theme ```mermaid-example -%%{init: {"xyChart": {"width": 900, "height": 600}, "themeVariables": {"xyChart": {"titleColor": "#ff0000"} } }}%% +--- +config: + xyChart: + width: 900 + height: 600 + themeVariables: + xyChart: + titleColor: "#ff0000" +--- xychart-beta title "Sales Revenue" x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] From 809103ccdd11bda7a41128ecf2f27c643f24f424 Mon Sep 17 00:00:00 2001 From: Steph <35910788+huynhicode@users.noreply.github.com> Date: Thu, 7 Sep 2023 11:45:24 -0700 Subject: [PATCH 043/457] add link to redirect file --- packages/mermaid/src/docs/.vitepress/theme/redirect.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/mermaid/src/docs/.vitepress/theme/redirect.ts b/packages/mermaid/src/docs/.vitepress/theme/redirect.ts index 8d576fece9..bcb3386613 100644 --- a/packages/mermaid/src/docs/.vitepress/theme/redirect.ts +++ b/packages/mermaid/src/docs/.vitepress/theme/redirect.ts @@ -78,6 +78,7 @@ const idRedirectMap: Record<string, string> = { const urlRedirectMap: Record<string, string> = { '/misc/faq.html': 'configure/faq.html', '/syntax/c4c.html': 'syntax/c4.html', + '/ecosystem/integrations.html': 'ecosystem/integrations-community.html', }; /** From 8a0ca8c43c039f306dc9cefc766df7d79c4980cc Mon Sep 17 00:00:00 2001 From: Steph <35910788+huynhicode@users.noreply.github.com> Date: Fri, 8 Sep 2023 10:28:50 -0700 Subject: [PATCH 044/457] update redirect --- packages/mermaid/src/docs/.vitepress/theme/redirect.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/mermaid/src/docs/.vitepress/theme/redirect.ts b/packages/mermaid/src/docs/.vitepress/theme/redirect.ts index bcb3386613..a898f5856a 100644 --- a/packages/mermaid/src/docs/.vitepress/theme/redirect.ts +++ b/packages/mermaid/src/docs/.vitepress/theme/redirect.ts @@ -79,6 +79,7 @@ const urlRedirectMap: Record<string, string> = { '/misc/faq.html': 'configure/faq.html', '/syntax/c4c.html': 'syntax/c4.html', '/ecosystem/integrations.html': 'ecosystem/integrations-community.html', + '/ecosystem/showcases.html': 'ecosystem/integrations-create', }; /** From 3824daea0bd8f96116d4c3228a59958f6f50ced1 Mon Sep 17 00:00:00 2001 From: Steph <35910788+huynhicode@users.noreply.github.com> Date: Fri, 8 Sep 2023 22:49:28 -0700 Subject: [PATCH 045/457] add blog post (#4822) --- docs/news/announcements.md | 6 +++--- docs/news/blog.md | 6 ++++++ packages/mermaid/src/docs/news/announcements.md | 6 +++--- packages/mermaid/src/docs/news/blog.md | 6 ++++++ 4 files changed, 18 insertions(+), 6 deletions(-) diff --git a/docs/news/announcements.md b/docs/news/announcements.md index 9ec02d8f40..53542869a7 100644 --- a/docs/news/announcements.md +++ b/docs/news/announcements.md @@ -6,8 +6,8 @@ # Announcements -## [Special cases broke Microsoft Zune and can ruin your code base too](https://www.mermaidchart.com/blog/posts/special-cases-broke-microsoft-zune-and-can-ruin-your-code-base-too/) +## [Present flow data using Sankey diagrams in Mermaid, thanks to Nikolay Rozhkov](https://www.mermaidchart.com/blog/posts/present-flow-data-using-sankey-diagrams/) -23 August 2023 · 15 mins +8 September 2023 · 4 mins -Read about the pitfalls of special cases in programming, illustrating how they can lead to complexity, diminish readability, and create maintenance challenges. +Sankey diagrams are a powerful tool for visualizing flow data. diff --git a/docs/news/blog.md b/docs/news/blog.md index 966956649a..e57bc7ae20 100644 --- a/docs/news/blog.md +++ b/docs/news/blog.md @@ -6,6 +6,12 @@ # Blog +## [Present flow data using Sankey diagrams in Mermaid, thanks to Nikolay Rozhkov](https://www.mermaidchart.com/blog/posts/present-flow-data-using-sankey-diagrams/) + +8 September 2023 · 4 mins + +Sankey diagrams are a powerful tool for visualizing flow data. + ## [Special cases broke Microsoft Zune and can ruin your code base too](https://www.mermaidchart.com/blog/posts/special-cases-broke-microsoft-zune-and-can-ruin-your-code-base-too/) 23 August 2023 · 15 mins diff --git a/packages/mermaid/src/docs/news/announcements.md b/packages/mermaid/src/docs/news/announcements.md index 951c42cbde..47509b33a1 100644 --- a/packages/mermaid/src/docs/news/announcements.md +++ b/packages/mermaid/src/docs/news/announcements.md @@ -1,7 +1,7 @@ # Announcements -## [Special cases broke Microsoft Zune and can ruin your code base too](https://www.mermaidchart.com/blog/posts/special-cases-broke-microsoft-zune-and-can-ruin-your-code-base-too/) +## [Present flow data using Sankey diagrams in Mermaid, thanks to Nikolay Rozhkov](https://www.mermaidchart.com/blog/posts/present-flow-data-using-sankey-diagrams/) -23 August 2023 · 15 mins +8 September 2023 · 4 mins -Read about the pitfalls of special cases in programming, illustrating how they can lead to complexity, diminish readability, and create maintenance challenges. +Sankey diagrams are a powerful tool for visualizing flow data. diff --git a/packages/mermaid/src/docs/news/blog.md b/packages/mermaid/src/docs/news/blog.md index b18e11650b..d39398d772 100644 --- a/packages/mermaid/src/docs/news/blog.md +++ b/packages/mermaid/src/docs/news/blog.md @@ -1,5 +1,11 @@ # Blog +## [Present flow data using Sankey diagrams in Mermaid, thanks to Nikolay Rozhkov](https://www.mermaidchart.com/blog/posts/present-flow-data-using-sankey-diagrams/) + +8 September 2023 · 4 mins + +Sankey diagrams are a powerful tool for visualizing flow data. + ## [Special cases broke Microsoft Zune and can ruin your code base too](https://www.mermaidchart.com/blog/posts/special-cases-broke-microsoft-zune-and-can-ruin-your-code-base-too/) 23 August 2023 · 15 mins From 6e9eeb78c63583da7bc8a0474f85d693bb7030f7 Mon Sep 17 00:00:00 2001 From: Subhash Halder <halder.subhash@gmail.com> Date: Sat, 9 Sep 2023 16:11:18 +0530 Subject: [PATCH 046/457] removed string concat to string builder --- packages/mermaid/src/diagrams/xychart/xychartRenderer.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts b/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts index 90760008bd..1f4d36e8ab 100644 --- a/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts +++ b/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts @@ -39,7 +39,7 @@ export const draw = (txt: string, id: string, _version: string, diagObj: Diagram // @ts-ignore: TODO Fix ts errors configureSvgSize(svg, chartConfig.height, chartConfig.width, true); - svg.attr('viewBox', '0 0 ' + chartConfig.width + ' ' + chartConfig.height); + svg.attr('viewBox', `0 0 ${chartConfig.width} ${chartConfig.height}`); background.attr('fill', themeConfig.backgroundColor); From 29e5e664816f47feccab11cf9cf841afc61e5a0a Mon Sep 17 00:00:00 2001 From: Sidharth Vinod <sidharthv96@gmail.com> Date: Thu, 14 Sep 2023 15:20:21 +0530 Subject: [PATCH 047/457] refactor: Unify the edgeMarker adding logic --- .../src/dagre-wrapper/edgeMarker.spec.ts | 67 +++++++++++ .../mermaid/src/dagre-wrapper/edgeMarker.ts | 41 +++++++ packages/mermaid/src/dagre-wrapper/edges.js | 106 +----------------- .../flowchart/elk/flowRenderer-elk.js | 105 +---------------- 4 files changed, 115 insertions(+), 204 deletions(-) create mode 100644 packages/mermaid/src/dagre-wrapper/edgeMarker.spec.ts create mode 100644 packages/mermaid/src/dagre-wrapper/edgeMarker.ts diff --git a/packages/mermaid/src/dagre-wrapper/edgeMarker.spec.ts b/packages/mermaid/src/dagre-wrapper/edgeMarker.spec.ts new file mode 100644 index 0000000000..7a19c29518 --- /dev/null +++ b/packages/mermaid/src/dagre-wrapper/edgeMarker.spec.ts @@ -0,0 +1,67 @@ +import type { SVG } from '../diagram-api/types.js'; +import { addEdgeMarkers } from './edgeMarker.js'; + +describe('addEdgeMarker', () => { + const svgPath = { + attr: vitest.fn(), + } as unknown as SVG; + const url = 'http://example.com'; + const id = 'test'; + const diagramType = 'test'; + + it('should add markers for arrow_cross:arrow_point', () => { + const arrowTypeStart = 'arrow_cross'; + const arrowTypeEnd = 'arrow_point'; + addEdgeMarkers(svgPath, { arrowTypeStart, arrowTypeEnd }, url, id, diagramType); + expect(svgPath.attr).toHaveBeenCalledWith( + 'marker-start', + `url(${url}#${id}_${diagramType}-crossStart)` + ); + expect(svgPath.attr).toHaveBeenCalledWith( + 'marker-end', + `url(${url}#${id}_${diagramType}-pointEnd)` + ); + }); + + it('should add markers for aggregation:arrow_point', () => { + const arrowTypeStart = 'aggregation'; + const arrowTypeEnd = 'arrow_point'; + addEdgeMarkers(svgPath, { arrowTypeStart, arrowTypeEnd }, url, id, diagramType); + expect(svgPath.attr).toHaveBeenCalledWith( + 'marker-start', + `url(${url}#${id}_${diagramType}-aggregationStart)` + ); + expect(svgPath.attr).toHaveBeenCalledWith( + 'marker-end', + `url(${url}#${id}_${diagramType}-pointEnd)` + ); + }); + + it('should add markers for arrow_point:aggregation', () => { + const arrowTypeStart = 'arrow_point'; + const arrowTypeEnd = 'aggregation'; + addEdgeMarkers(svgPath, { arrowTypeStart, arrowTypeEnd }, url, id, diagramType); + expect(svgPath.attr).toHaveBeenCalledWith( + 'marker-start', + `url(${url}#${id}_${diagramType}-pointStart)` + ); + expect(svgPath.attr).toHaveBeenCalledWith( + 'marker-end', + `url(${url}#${id}_${diagramType}-aggregationEnd)` + ); + }); + + it('should add markers for aggregation:composition', () => { + const arrowTypeStart = 'aggregation'; + const arrowTypeEnd = 'composition'; + addEdgeMarkers(svgPath, { arrowTypeStart, arrowTypeEnd }, url, id, diagramType); + expect(svgPath.attr).toHaveBeenCalledWith( + 'marker-start', + `url(${url}#${id}_${diagramType}-aggregationStart)` + ); + expect(svgPath.attr).toHaveBeenCalledWith( + 'marker-end', + `url(${url}#${id}_${diagramType}-compositionEnd)` + ); + }); +}); diff --git a/packages/mermaid/src/dagre-wrapper/edgeMarker.ts b/packages/mermaid/src/dagre-wrapper/edgeMarker.ts new file mode 100644 index 0000000000..afce245d53 --- /dev/null +++ b/packages/mermaid/src/dagre-wrapper/edgeMarker.ts @@ -0,0 +1,41 @@ +import type { SVG } from '../diagram-api/types.js'; +import type { EdgeData } from '../types.js'; +/** + * Adds SVG markers to a path element based on the arrow types specified in the edge. + * + * @param svgPath - The SVG path element to add markers to. + * @param edge - The edge data object containing the arrow types. + * @param url - The URL of the SVG marker definitions. + * @param id - The ID prefix for the SVG marker definitions. + * @param diagramType - The type of diagram being rendered. + */ +export const addEdgeMarkers = ( + svgPath: SVG, + edge: Pick<EdgeData, 'arrowTypeStart' | 'arrowTypeEnd'>, + url: string, + id: string, + diagramType: string +) => { + if (edge.arrowTypeStart) { + addEdgeMarker(svgPath, 'start', edge.arrowTypeStart, url, id, diagramType); + } + if (edge.arrowTypeEnd) { + addEdgeMarker(svgPath, 'end', edge.arrowTypeEnd, url, id, diagramType); + } +}; + +const addEdgeMarker = ( + svgPath: SVG, + position: 'start' | 'end', + arrowType: string, + url: string, + id: string, + diagramType: string +) => { + if (arrowType.startsWith('arrow_')) { + arrowType = arrowType.replace('arrow_', ''); + } + + const suffix = position === 'start' ? 'Start' : 'End'; + svgPath.attr(`marker-${position}`, `url(${url}#${id}_${diagramType}-${arrowType}${suffix})`); +}; diff --git a/packages/mermaid/src/dagre-wrapper/edges.js b/packages/mermaid/src/dagre-wrapper/edges.js index 1b3e172c01..8ef30a5ada 100644 --- a/packages/mermaid/src/dagre-wrapper/edges.js +++ b/packages/mermaid/src/dagre-wrapper/edges.js @@ -6,6 +6,7 @@ import { getConfig } from '../config.js'; import utils from '../utils.js'; import { evaluate } from '../diagrams/common/common.js'; import { getLineFunctionsWithOffset } from '../utils/lineWithOffset.js'; +import { addEdgeMarker } from './edgeMarker.js'; let edgeLabels = {}; let terminalLabels = {}; @@ -506,108 +507,9 @@ export const insertEdge = function (elem, e, edge, clusterDb, diagramType, graph log.info('arrowTypeStart', edge.arrowTypeStart); log.info('arrowTypeEnd', edge.arrowTypeEnd); - switch (edge.arrowTypeStart) { - case 'arrow_cross': - svgPath.attr( - 'marker-start', - 'url(' + url + '#' + id + '_' + diagramType + '-crossStart' + ')' - ); - break; - case 'arrow_point': - svgPath.attr( - 'marker-start', - 'url(' + url + '#' + id + '_' + diagramType + '-pointStart' + ')' - ); - break; - case 'arrow_barb': - svgPath.attr( - 'marker-start', - 'url(' + url + '#' + id + '_' + diagramType + '-barbStart' + ')' - ); - break; - case 'arrow_circle': - svgPath.attr( - 'marker-start', - 'url(' + url + '#' + id + '_' + diagramType + '-circleStart' + ')' - ); - break; - case 'aggregation': - svgPath.attr( - 'marker-start', - 'url(' + url + '#' + id + '_' + diagramType + '-aggregationStart' + ')' - ); - break; - case 'extension': - svgPath.attr( - 'marker-start', - 'url(' + url + '#' + id + '_' + diagramType + '-extensionStart' + ')' - ); - break; - case 'composition': - svgPath.attr( - 'marker-start', - 'url(' + url + '#' + id + '_' + diagramType + '-compositionStart' + ')' - ); - break; - case 'dependency': - svgPath.attr( - 'marker-start', - 'url(' + url + '#' + id + '_' + diagramType + '-dependencyStart' + ')' - ); - break; - case 'lollipop': - svgPath.attr( - 'marker-start', - 'url(' + url + '#' + id + '_' + diagramType + '-lollipopStart' + ')' - ); - break; - default: - } - switch (edge.arrowTypeEnd) { - case 'arrow_cross': - svgPath.attr('marker-end', 'url(' + url + '#' + id + '_' + diagramType + '-crossEnd' + ')'); - break; - case 'arrow_point': - svgPath.attr('marker-end', 'url(' + url + '#' + id + '_' + diagramType + '-pointEnd' + ')'); - break; - case 'arrow_barb': - svgPath.attr('marker-end', 'url(' + url + '#' + id + '_' + diagramType + '-barbEnd' + ')'); - break; - case 'arrow_circle': - svgPath.attr('marker-end', 'url(' + url + '#' + id + '_' + diagramType + '-circleEnd' + ')'); - break; - case 'aggregation': - svgPath.attr( - 'marker-end', - 'url(' + url + '#' + id + '_' + diagramType + '-aggregationEnd' + ')' - ); - break; - case 'extension': - svgPath.attr( - 'marker-end', - 'url(' + url + '#' + id + '_' + diagramType + '-extensionEnd' + ')' - ); - break; - case 'composition': - svgPath.attr( - 'marker-end', - 'url(' + url + '#' + id + '_' + diagramType + '-compositionEnd' + ')' - ); - break; - case 'dependency': - svgPath.attr( - 'marker-end', - 'url(' + url + '#' + id + '_' + diagramType + '-dependencyEnd' + ')' - ); - break; - case 'lollipop': - svgPath.attr( - 'marker-end', - 'url(' + url + '#' + id + '_' + diagramType + '-lollipopEnd' + ')' - ); - break; - default: - } + addEdgeMarker(svgPath, 'start', edge.arrowTypeStart, url, id, diagramType); + addEdgeMarker(svgPath, 'end', edge.arrowTypeEnd, url, id, diagramType); + let paths = {}; if (pointsHasChanged) { paths.updatedPath = points; diff --git a/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js b/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js index 737b492fb3..56fad15492 100644 --- a/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js +++ b/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js @@ -11,6 +11,7 @@ import common from '../../common/common.js'; import { interpolateToCurve, getStylesFromArray } from '../../../utils.js'; import ELK from 'elkjs/lib/elk.bundled.js'; import { getLineFunctionsWithOffset } from '../../../utils/lineWithOffset.js'; +import { addEdgeMarker } from '../../../dagre-wrapper/edgeMarker.js'; const elk = new ELK(); @@ -586,108 +587,8 @@ const addMarkersToEdge = function (svgPath, edgeData, diagramType, arrowMarkerAb } // look in edge data and decide which marker to use - switch (edgeData.arrowTypeStart) { - case 'arrow_cross': - svgPath.attr( - 'marker-start', - 'url(' + url + '#' + id + '_' + diagramType + '-crossStart' + ')' - ); - break; - case 'arrow_point': - svgPath.attr( - 'marker-start', - 'url(' + url + '#' + id + '_' + diagramType + '-pointStart' + ')' - ); - break; - case 'arrow_barb': - svgPath.attr( - 'marker-start', - 'url(' + url + '#' + id + '_' + diagramType + '-barbStart' + ')' - ); - break; - case 'arrow_circle': - svgPath.attr( - 'marker-start', - 'url(' + url + '#' + id + '_' + diagramType + '-circleStart' + ')' - ); - break; - case 'aggregation': - svgPath.attr( - 'marker-start', - 'url(' + url + '#' + id + '_' + diagramType + '-aggregationStart' + ')' - ); - break; - case 'extension': - svgPath.attr( - 'marker-start', - 'url(' + url + '#' + id + '_' + diagramType + '-extensionStart' + ')' - ); - break; - case 'composition': - svgPath.attr( - 'marker-start', - 'url(' + url + '#' + id + '_' + diagramType + '-compositionStart' + ')' - ); - break; - case 'dependency': - svgPath.attr( - 'marker-start', - 'url(' + url + '#' + id + '_' + diagramType + '-dependencyStart' + ')' - ); - break; - case 'lollipop': - svgPath.attr( - 'marker-start', - 'url(' + url + '#' + id + '_' + diagramType + '-lollipopStart' + ')' - ); - break; - default: - } - switch (edgeData.arrowTypeEnd) { - case 'arrow_cross': - svgPath.attr('marker-end', 'url(' + url + '#' + id + '_' + diagramType + '-crossEnd' + ')'); - break; - case 'arrow_point': - svgPath.attr('marker-end', 'url(' + url + '#' + id + '_' + diagramType + '-pointEnd' + ')'); - break; - case 'arrow_barb': - svgPath.attr('marker-end', 'url(' + url + '#' + id + '_' + diagramType + '-barbEnd' + ')'); - break; - case 'arrow_circle': - svgPath.attr('marker-end', 'url(' + url + '#' + id + '_' + diagramType + '-circleEnd' + ')'); - break; - case 'aggregation': - svgPath.attr( - 'marker-end', - 'url(' + url + '#' + id + '_' + diagramType + '-aggregationEnd' + ')' - ); - break; - case 'extension': - svgPath.attr( - 'marker-end', - 'url(' + url + '#' + id + '_' + diagramType + '-extensionEnd' + ')' - ); - break; - case 'composition': - svgPath.attr( - 'marker-end', - 'url(' + url + '#' + id + '_' + diagramType + '-compositionEnd' + ')' - ); - break; - case 'dependency': - svgPath.attr( - 'marker-end', - 'url(' + url + '#' + id + '_' + diagramType + '-dependencyEnd' + ')' - ); - break; - case 'lollipop': - svgPath.attr( - 'marker-end', - 'url(' + url + '#' + id + '_' + diagramType + '-lollipopEnd' + ')' - ); - break; - default: - } + addEdgeMarker(svgPath, 'start', edgeData.arrowTypeStart, url, id, diagramType); + addEdgeMarker(svgPath, 'end', edgeData.arrowTypeEnd, url, id, diagramType); }; /** From faa1fda7ba13f8571348f5bb60c812e3cda89f48 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod <sidharthv96@gmail.com> Date: Thu, 14 Sep 2023 15:25:52 +0530 Subject: [PATCH 048/457] refactor: Unify the edgeMarker adding logic --- packages/mermaid/src/dagre-wrapper/edges.js | 5 ++--- .../mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js | 5 ++--- 2 files changed, 4 insertions(+), 6 deletions(-) diff --git a/packages/mermaid/src/dagre-wrapper/edges.js b/packages/mermaid/src/dagre-wrapper/edges.js index 8ef30a5ada..3f4412fb73 100644 --- a/packages/mermaid/src/dagre-wrapper/edges.js +++ b/packages/mermaid/src/dagre-wrapper/edges.js @@ -6,7 +6,7 @@ import { getConfig } from '../config.js'; import utils from '../utils.js'; import { evaluate } from '../diagrams/common/common.js'; import { getLineFunctionsWithOffset } from '../utils/lineWithOffset.js'; -import { addEdgeMarker } from './edgeMarker.js'; +import { addEdgeMarkers } from './edgeMarker.js'; let edgeLabels = {}; let terminalLabels = {}; @@ -507,8 +507,7 @@ export const insertEdge = function (elem, e, edge, clusterDb, diagramType, graph log.info('arrowTypeStart', edge.arrowTypeStart); log.info('arrowTypeEnd', edge.arrowTypeEnd); - addEdgeMarker(svgPath, 'start', edge.arrowTypeStart, url, id, diagramType); - addEdgeMarker(svgPath, 'end', edge.arrowTypeEnd, url, id, diagramType); + addEdgeMarkers(svgPath, edge, url, id, diagramType); let paths = {}; if (pointsHasChanged) { diff --git a/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js b/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js index 56fad15492..844264a5fc 100644 --- a/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js +++ b/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js @@ -11,7 +11,7 @@ import common from '../../common/common.js'; import { interpolateToCurve, getStylesFromArray } from '../../../utils.js'; import ELK from 'elkjs/lib/elk.bundled.js'; import { getLineFunctionsWithOffset } from '../../../utils/lineWithOffset.js'; -import { addEdgeMarker } from '../../../dagre-wrapper/edgeMarker.js'; +import { addEdgeMarkers } from '../../../dagre-wrapper/edgeMarker.js'; const elk = new ELK(); @@ -587,8 +587,7 @@ const addMarkersToEdge = function (svgPath, edgeData, diagramType, arrowMarkerAb } // look in edge data and decide which marker to use - addEdgeMarker(svgPath, 'start', edgeData.arrowTypeStart, url, id, diagramType); - addEdgeMarker(svgPath, 'end', edgeData.arrowTypeEnd, url, id, diagramType); + addEdgeMarkers(svgPath, edgeData, url, id, diagramType); }; /** From ad596086eaadfa5daa62325d5d95668359f087be Mon Sep 17 00:00:00 2001 From: Sidharth Vinod <sidharthv96@gmail.com> Date: Fri, 15 Sep 2023 01:24:02 +0530 Subject: [PATCH 049/457] 10.5.0-rc.2 --- packages/mermaid/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json index 23138003f6..84df92fb37 100644 --- a/packages/mermaid/package.json +++ b/packages/mermaid/package.json @@ -1,6 +1,6 @@ { "name": "mermaid", - "version": "10.5.0-rc.1", + "version": "10.5.0-rc.2", "description": "Markdown-ish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.", "type": "module", "module": "./dist/mermaid.core.mjs", From e061489b841939e3a74758c622a8e6ec05180dc9 Mon Sep 17 00:00:00 2001 From: Subhash Halder <halder.subhash@gmail.com> Date: Tue, 19 Sep 2023 21:09:31 +0530 Subject: [PATCH 050/457] Added review changes --- cypress/integration/rendering/xyChart.spec.js | 368 +++++++++--------- docs/syntax/xyChart.md | 4 +- .../chartBuilder/components/axis/baseAxis.ts | 13 +- .../mermaid/src/diagrams/xychart/xychartDb.ts | 6 +- packages/mermaid/src/docs/syntax/xyChart.md | 4 +- 5 files changed, 198 insertions(+), 197 deletions(-) diff --git a/cypress/integration/rendering/xyChart.spec.js b/cypress/integration/rendering/xyChart.spec.js index 3948dc71e2..85d998c50b 100644 --- a/cypress/integration/rendering/xyChart.spec.js +++ b/cypress/integration/rendering/xyChart.spec.js @@ -4,8 +4,8 @@ describe('XY Chart', () => { it('should render the simplest possible chart', () => { imgSnapshotTest( ` - xychart-beta - line [10, 30, 20] + xychart-beta + line [10, 30, 20] `, {} ); @@ -14,12 +14,12 @@ describe('XY Chart', () => { it('Should render a complete chart', () => { imgSnapshotTest( ` - xychart-beta - title "Sales Revene" - x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] - y-axis "Revenue (in $)" 4000 --> 11000 - bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] - line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + xychart-beta + title "Sales Revenue" + x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] + y-axis "Revenue (in $)" 4000 --> 11000 + bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] `, {} ); @@ -27,11 +27,11 @@ describe('XY Chart', () => { it('Should render a chart without title', () => { imgSnapshotTest( ` - xychart-beta - x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] - y-axis "Revenue (in $)" 4000 --> 11000 - bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] - line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + xychart-beta + x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] + y-axis "Revenue (in $)" 4000 --> 11000 + bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] `, {} ); @@ -40,11 +40,11 @@ describe('XY Chart', () => { it('y-axis title not required', () => { imgSnapshotTest( ` - xychart-beta - x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] - y-axis 4000 --> 11000 - bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] - line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + xychart-beta + x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] + y-axis 4000 --> 11000 + bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] `, {} ); @@ -53,10 +53,10 @@ describe('XY Chart', () => { it('Should render a chart without y-axis with different range', () => { imgSnapshotTest( ` - xychart-beta - x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] - bar [5000, 6000, 7500, 8200, 9500, 10500, 14000, 3200, 9200, 9900, 3400, 6000] - line [2000, 7000, 6500, 9200, 9500, 7500, 11000, 10200, 3200, 8500, 7000, 8800] + xychart-beta + x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] + bar [5000, 6000, 7500, 8200, 9500, 10500, 14000, 3200, 9200, 9900, 3400, 6000] + line [2000, 7000, 6500, 9200, 9500, 7500, 11000, 10200, 3200, 8500, 7000, 8800] `, {} ); @@ -65,10 +65,10 @@ describe('XY Chart', () => { it('x axis title not required', () => { imgSnapshotTest( ` - xychart-beta - x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] - bar [5000, 6000, 7500, 8200, 9500, 10500, 14000, 3200, 9200, 9900, 3400, 6000] - line [2000, 7000, 6500, 9200, 9500, 7500, 11000, 10200, 3200, 8500, 7000, 8800] + xychart-beta + x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] + bar [5000, 6000, 7500, 8200, 9500, 10500, 14000, 3200, 9200, 9900, 3400, 6000] + line [2000, 7000, 6500, 9200, 9500, 7500, 11000, 10200, 3200, 8500, 7000, 8800] `, {} ); @@ -77,24 +77,24 @@ describe('XY Chart', () => { it('Multiple plots can be rendered', () => { imgSnapshotTest( ` - xychart-beta - line [23, 46, 77, 34] - line [45, 32, 33, 12] - bar [87, 54, 99, 85] - line [78, 88, 22, 4] - line [22, 29, 75, 33] - bar [52, 96, 35, 10] + xychart-beta + line [23, 46, 77, 34] + line [45, 32, 33, 12] + bar [87, 54, 99, 85] + line [78, 88, 22, 4] + line [22, 29, 75, 33] + bar [52, 96, 35, 10] `, {} ); cy.get('svg'); }); - it('Decimals and -ve no are supported', () => { + it('Decimals and negative numbers are supported', () => { imgSnapshotTest( ` - xychart-beta - y-axis -2.4 --> 3.5 - line [+1.3, .6, 2.4, -.34] + xychart-beta + y-axis -2.4 --> 3.5 + line [+1.3, .6, 2.4, -.34] `, {} ); @@ -103,16 +103,16 @@ describe('XY Chart', () => { it('Render spark line with "plotReservedSpacePercent"', () => { imgSnapshotTest( ` ---- -config: - theme: dark - xyChart: - width: 200 - height: 20 - plotReservedSpacePercent: 100 ---- - xychart-beta - line [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800] + --- + config: + theme: dark + xyChart: + width: 200 + height: 20 + plotReservedSpacePercent: 100 + --- + xychart-beta + line [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800] `, {} ); @@ -121,25 +121,25 @@ config: it('Render spark bar without displaying other property', () => { imgSnapshotTest( ` ---- -config: - theme: dark - xyChart: - width: 200 - height: 20 - xAxis: - showLabel: false - showTitle: false - showTick: false - showAxisLine: false - yAxis: - showLabel: false - showTitle: false - showTick: false - showAxisLine: false ---- - xychart-beta - bar [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800] + --- + config: + theme: dark + xyChart: + width: 200 + height: 20 + xAxis: + showLabel: false + showTitle: false + showTick: false + showAxisLine: false + yAxis: + showLabel: false + showTitle: false + showTick: false + showAxisLine: false + --- + xychart-beta + bar [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800] `, {} ); @@ -148,13 +148,13 @@ config: it('Should use all the config from directive', () => { imgSnapshotTest( ` - %%{init: {"xyChart": {"width": 1000, "height": 600, "titlePadding": 5, "titleFontSize": 10, "xAxis": {"labelFontSize": "20", "labelPadding": 10, "titleFontSize": 30, "titlePadding": 20, "tickLength": 10, "tickWidth": 5}, "yAxis": {"labelFontSize": "20", "labelPadding": 10, "titleFontSize": 30, "titlePadding": 20, "tickLength": 10, "tickWidth": 5}, "plotBorderWidth": 5, "chartOrientation": "horizontal", "plotReservedSpacePercent": 60 }}}%% - xychart-beta - title "Sales Revene" - x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] - y-axis "Revenue (in $)" 4000 --> 11000 - bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] - line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + %%{init: {"xyChart": {"width": 1000, "height": 600, "titlePadding": 5, "titleFontSize": 10, "xAxis": {"labelFontSize": "20", "labelPadding": 10, "titleFontSize": 30, "titlePadding": 20, "tickLength": 10, "tickWidth": 5}, "yAxis": {"labelFontSize": "20", "labelPadding": 10, "titleFontSize": 30, "titlePadding": 20, "tickLength": 10, "tickWidth": 5}, "plotBorderWidth": 5, "chartOrientation": "horizontal", "plotReservedSpacePercent": 60 }}}%% + xychart-beta + title "Sales Revenue" + x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] + y-axis "Revenue (in $)" 4000 --> 11000 + bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] `, {} ); @@ -163,39 +163,39 @@ config: it('Should use all the config from yaml', () => { imgSnapshotTest( ` ---- -config: - theme: forest - xyChart: - width: 1000 - height: 600 - titlePadding: 5 - titleFontSize: 10 - xAxis: - labelFontSize: 20 - labelPadding: 10 - titleFontSize: 30 - titlePadding: 20 - tickLength: 10 - tickWidth: 5 - axisLineWidth: 5 - yAxis: - labelFontSize: 20 - labelPadding: 10 - titleFontSize: 30 - titlePadding: 20 - tickLength: 10 - tickWidth: 5 - axisLineWidth: 5 - chartOrientation: horizontal - plotReservedSpacePercent: 60 ---- - xychart-beta - title "Sales Revene" - x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] - y-axis "Revenue (in $)" 4000 --> 11000 - bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] - line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + --- + config: + theme: forest + xyChart: + width: 1000 + height: 600 + titlePadding: 5 + titleFontSize: 10 + xAxis: + labelFontSize: 20 + labelPadding: 10 + titleFontSize: 30 + titlePadding: 20 + tickLength: 10 + tickWidth: 5 + axisLineWidth: 5 + yAxis: + labelFontSize: 20 + labelPadding: 10 + titleFontSize: 30 + titlePadding: 20 + tickLength: 10 + tickWidth: 5 + axisLineWidth: 5 + chartOrientation: horizontal + plotReservedSpacePercent: 60 + --- + xychart-beta + title "Sales Revenue" + x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] + y-axis "Revenue (in $)" 4000 --> 11000 + bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] `, {} ); @@ -204,20 +204,20 @@ config: it('Render with show axis title false', () => { imgSnapshotTest( ` ---- -config: - xyChart: - xAxis: - showTitle: false - yAxis: - showTitle: false ---- - xychart-beta - title "Sales Revene" - x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] - y-axis "Revenue (in $)" 4000 --> 11000 - bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] - line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + --- + config: + xyChart: + xAxis: + showTitle: false + yAxis: + showTitle: false + --- + xychart-beta + title "Sales Revenue" + x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] + y-axis "Revenue (in $)" 4000 --> 11000 + bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] `, {} ); @@ -226,20 +226,20 @@ config: it('Render with show axis label false', () => { imgSnapshotTest( ` ---- -config: - xyChart: - xAxis: - showLabel: false - yAxis: - showLabel: false ---- - xychart-beta - title "Sales Revene" - x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] - y-axis "Revenue (in $)" 4000 --> 11000 - bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] - line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + --- + config: + xyChart: + xAxis: + showLabel: false + yAxis: + showLabel: false + --- + xychart-beta + title "Sales Revenue" + x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] + y-axis "Revenue (in $)" 4000 --> 11000 + bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] `, {} ); @@ -248,20 +248,20 @@ config: it('Render with show axis tick false', () => { imgSnapshotTest( ` ---- -config: - xyChart: - xAxis: - showTick: false - yAxis: - showTick: false ---- - xychart-beta - title "Sales Revene" - x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] - y-axis "Revenue (in $)" 4000 --> 11000 - bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] - line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + --- + config: + xyChart: + xAxis: + showTick: false + yAxis: + showTick: false + --- + xychart-beta + title "Sales Revenue" + x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] + y-axis "Revenue (in $)" 4000 --> 11000 + bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] `, {} ); @@ -270,20 +270,20 @@ config: it('Render with show axis line false', () => { imgSnapshotTest( ` ---- -config: - xyChart: - xAxis: - showAxisLine: false - yAxis: - showAxisLine: false ---- - xychart-beta - title "Sales Revene" - x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] - y-axis "Revenue (in $)" 4000 --> 11000 - bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] - line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + --- + config: + xyChart: + xAxis: + showAxisLine: false + yAxis: + showAxisLine: false + --- + xychart-beta + title "Sales Revenue" + x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] + y-axis "Revenue (in $)" 4000 --> 11000 + bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] `, {} ); @@ -292,28 +292,28 @@ config: it('Render all the theme color', () => { imgSnapshotTest( ` ---- -config: - themeVariables: - xyChart: - titleColor: "#ff0000" - backgroundColor: "#f0f8ff" - yAxisLabelColor: "#ee82ee" - yAxisTitleColor: "#7fffd4" - yAxisTickColor: "#87ceeb" - yAxisLineColor: "#ff6347" - xAxisLabelColor: "#7fffd4" - xAxisTitleColor: "#ee82ee" - xAxisTickColor: "#ff6347" - xAxisLineColor: "#87ceeb" - plotColorPalette: "#008000, #faba63" ---- - xychart-beta - title "Sales Revene" - x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] - y-axis "Revenue (in $)" 4000 --> 11000 - bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] - line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + --- + config: + themeVariables: + xyChart: + titleColor: "#ff0000" + backgroundColor: "#f0f8ff" + yAxisLabelColor: "#ee82ee" + yAxisTitleColor: "#7fffd4" + yAxisTickColor: "#87ceeb" + yAxisLineColor: "#ff6347" + xAxisLabelColor: "#7fffd4" + xAxisTitleColor: "#ee82ee" + xAxisTickColor: "#ff6347" + xAxisLineColor: "#87ceeb" + plotColorPalette: "#008000, #faba63" + --- + xychart-beta + title "Sales Revenue" + x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] + y-axis "Revenue (in $)" 4000 --> 11000 + bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] `, {} ); diff --git a/docs/syntax/xyChart.md b/docs/syntax/xyChart.md index 255c3c089c..964a1e6da8 100644 --- a/docs/syntax/xyChart.md +++ b/docs/syntax/xyChart.md @@ -33,7 +33,7 @@ xychart-beta ## Syntax > **Note** -> all text values can be single word without ", if multiple line required we have to use ". +> All text values that contain only one word can be written without `"`. If a text value has many words in it, specifically if it contains spaces, enclose the value in `"` ### Orientations @@ -49,7 +49,7 @@ The title is a short description of the chart and it will always render on top o #### Example xychart-beta - title "This is a sample example" + title "This is a simple example" ... > **Note** diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/baseAxis.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/baseAxis.ts index 18e48f54cb..c3240a4a7b 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/baseAxis.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/baseAxis.ts @@ -51,6 +51,7 @@ export abstract class BaseAxis implements Axis { setAxisPosition(axisPosition: AxisPosition): void { this.axisPosition = axisPosition; + this.setRange(this.range); } abstract getScaleValue(value: number | string): number; @@ -174,7 +175,7 @@ export abstract class BaseAxis implements Axis { this.boundingRect.y = point.y; } - private getDrawaableElementsForLeftAxis(): DrawableElem[] { + private getDrawableElementsForLeftAxis(): DrawableElem[] { const drawableElement: DrawableElem[] = []; if (this.showAxisLine) { const x = this.boundingRect.x + this.boundingRect.width - this.axisConfig.axisLineWidth / 2; @@ -250,7 +251,7 @@ export abstract class BaseAxis implements Axis { } return drawableElement; } - private getDrawaableElementsForBottomAxis(): DrawableElem[] { + private getDrawableElementsForBottomAxis(): DrawableElem[] { const drawableElement: DrawableElem[] = []; if (this.showAxisLine) { const y = this.boundingRect.y + this.axisConfig.axisLineWidth / 2; @@ -326,7 +327,7 @@ export abstract class BaseAxis implements Axis { } return drawableElement; } - private getDrawaableElementsForTopAxis(): DrawableElem[] { + private getDrawableElementsForTopAxis(): DrawableElem[] { const drawableElement: DrawableElem[] = []; if (this.showAxisLine) { const y = this.boundingRect.y + this.boundingRect.height - this.axisConfig.axisLineWidth / 2; @@ -405,16 +406,16 @@ export abstract class BaseAxis implements Axis { getDrawableElements(): DrawableElem[] { if (this.axisPosition === 'left') { - return this.getDrawaableElementsForLeftAxis(); + return this.getDrawableElementsForLeftAxis(); } if (this.axisPosition === 'right') { throw Error('Drawing of right axis is not implemented'); } if (this.axisPosition === 'bottom') { - return this.getDrawaableElementsForBottomAxis(); + return this.getDrawableElementsForBottomAxis(); } if (this.axisPosition === 'top') { - return this.getDrawaableElementsForTopAxis(); + return this.getDrawableElementsForTopAxis(); } return []; } diff --git a/packages/mermaid/src/diagrams/xychart/xychartDb.ts b/packages/mermaid/src/diagrams/xychart/xychartDb.ts index 7bd27c1a94..7271c04689 100644 --- a/packages/mermaid/src/diagrams/xychart/xychartDb.ts +++ b/packages/mermaid/src/diagrams/xychart/xychartDb.ts @@ -31,7 +31,7 @@ let tmpSVGGElem: SVGGType; let xyChartConfig: XYChartConfig = getChartDefaultConfig(); let xyChartThemeConfig: XYChartThemeConfig = getChartDefaultThemeConfig(); -let xyChartData: XYChartData = getChartDefalutData(); +let xyChartData: XYChartData = getChartDefaultData(); let plotColorPalette = xyChartThemeConfig.plotColorPalette.split(',').map((color) => color.trim()); let hasSetXAxis = false; let hasSetYAxis = false; @@ -54,7 +54,7 @@ function getChartDefaultConfig(): XYChartConfig { ); } -function getChartDefalutData(): XYChartData { +function getChartDefaultData(): XYChartData { return { yAxis: { type: 'linear', @@ -201,7 +201,7 @@ const clear = function () { commonClear(); plotIndex = 0; xyChartConfig = getChartDefaultConfig(); - xyChartData = getChartDefalutData(); + xyChartData = getChartDefaultData(); xyChartThemeConfig = getChartDefaultThemeConfig(); plotColorPalette = xyChartThemeConfig.plotColorPalette.split(',').map((color) => color.trim()); hasSetXAxis = false; diff --git a/packages/mermaid/src/docs/syntax/xyChart.md b/packages/mermaid/src/docs/syntax/xyChart.md index ef089eb435..3b30601815 100644 --- a/packages/mermaid/src/docs/syntax/xyChart.md +++ b/packages/mermaid/src/docs/syntax/xyChart.md @@ -18,7 +18,7 @@ xychart-beta ## Syntax ```note -all text values can be single word without ", if multiple line required we have to use ". +All text values that contain only one word can be written without `"`. If a text value has many words in it, specifically if it contains spaces, enclose the value in `"` ``` ### Orientations @@ -38,7 +38,7 @@ The title is a short description of the chart and it will always render on top o ``` xychart-beta - title "This is a sample example" + title "This is a simple example" ... ``` From f01f2dfcef53dcc118f841a26384a1dc6a7840c7 Mon Sep 17 00:00:00 2001 From: Subhash Halder <halder.subhash@gmail.com> Date: Tue, 19 Sep 2023 21:18:06 +0530 Subject: [PATCH 051/457] Fix formatting in doc file --- docs/syntax/xyChart.md | 2 +- packages/mermaid/src/docs/syntax/xyChart.md | 34 ++++++++++----------- 2 files changed, 18 insertions(+), 18 deletions(-) diff --git a/docs/syntax/xyChart.md b/docs/syntax/xyChart.md index 08d03a434b..a927ca5417 100644 --- a/docs/syntax/xyChart.md +++ b/docs/syntax/xyChart.md @@ -42,7 +42,7 @@ The chart can be drawn horizontal or vertical, default value is vertical. xychart-beta horizontal ... -### Title. +### Title The title is a short description of the chart and it will always render on top of the chart. diff --git a/packages/mermaid/src/docs/syntax/xyChart.md b/packages/mermaid/src/docs/syntax/xyChart.md index 3b30601815..ffd0c16c2c 100644 --- a/packages/mermaid/src/docs/syntax/xyChart.md +++ b/packages/mermaid/src/docs/syntax/xyChart.md @@ -23,7 +23,7 @@ All text values that contain only one word can be written without `"`. If a text ### Orientations -The chart can be drawn horizontal or vertical, default value is vertical +The chart can be drawn horizontal or vertical, default value is vertical. ``` xychart-beta horizontal @@ -57,7 +57,7 @@ The x-axis primarily serves as a categorical value, although it can also functio ### y-axis -The y-axis is employed to represent numerical range values, it can't have categorical values. +The y-axis is employed to represent numerical range values, it cannot have categorical values. #### Example @@ -86,7 +86,7 @@ A bar chart offers the capability to graphically depict bars. #### Simplest example -Every grammer are optional other than the chart name and one data set, so you will be able to draw a chart will a simple config like +The only two things required are the chart name (`xychart-beta`) and one data set. So you will be able to draw a chart with a simple config like ``` xychart-beta @@ -104,7 +104,7 @@ xychart-beta | showTitle | Title to be shown or not | true | | xAxis | xAxis configuration | AxisConfig | | yAxis | yAxis configuration | AxisConfig | -| chartOrientation | ('vertical' or 'horizontal') | 'vertical' | +| chartOrientation | 'vertical' or 'horizontal' | 'vertical' | | plotReservedSpacePercent | Minimum space plots will take inside the chart | 50 | ### AxisConfig @@ -130,19 +130,19 @@ Themes for xychart resides inside xychart attribute so to set the variables use %%{init: { "themeVariables": {"xyChart": {"titleColor": "#ff0000"} } }}%% ``` -| Parameter | Description | -| ---------------- | ------------------------------------------------------- | -| backgroundColor | Background color of the whole chart | -| titleColor | Color of the Title text | -| xAxisLableColor | Color of the x-axis labels | -| xAxisTitleColor | Color of the x-axis title | -| xAxisTickColor | Color of the x-axis tick | -| xAxisLineColor | Color of the x-axis line | -| yAxisLableColor | Color of the y-axis labels | -| yAxisTitleColor | Color of the y-axis title | -| yAxisTickColor | Color of the y-axis tick | -| yAxisLineColor | Color of the y-axis line | -| plotColorPalette | String of colors seperated by comma eg "#f3456, #43445" | +| Parameter | Description | +| ---------------- | --------------------------------------------------------- | +| backgroundColor | Background color of the whole chart | +| titleColor | Color of the Title text | +| xAxisLableColor | Color of the x-axis labels | +| xAxisTitleColor | Color of the x-axis title | +| xAxisTickColor | Color of the x-axis tick | +| xAxisLineColor | Color of the x-axis line | +| yAxisLableColor | Color of the y-axis labels | +| yAxisTitleColor | Color of the y-axis title | +| yAxisTickColor | Color of the y-axis tick | +| yAxisLineColor | Color of the y-axis line | +| plotColorPalette | String of colors separated by comma e.g. "#f3456, #43445" | ## Example on config and theme From f56796c7cf4d3f2b169b98deaf00b65df9cae225 Mon Sep 17 00:00:00 2001 From: Subhash Halder <halder.subhash@gmail.com> Date: Wed, 20 Sep 2023 19:57:48 +0530 Subject: [PATCH 052/457] Fix a review request in the docs --- docs/syntax/xyChart.md | 2 +- packages/mermaid/src/docs/syntax/xyChart.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/syntax/xyChart.md b/docs/syntax/xyChart.md index a927ca5417..7e91863f9a 100644 --- a/docs/syntax/xyChart.md +++ b/docs/syntax/xyChart.md @@ -53,7 +53,7 @@ The title is a short description of the chart and it will always render on top o ... > **Note** -> if the title single word no need to use ", but if it has space " is needed +> If the title is a single word one no need to use `"`, but if it has space `"` is needed ### x-axis diff --git a/packages/mermaid/src/docs/syntax/xyChart.md b/packages/mermaid/src/docs/syntax/xyChart.md index ffd0c16c2c..8edfecbea3 100644 --- a/packages/mermaid/src/docs/syntax/xyChart.md +++ b/packages/mermaid/src/docs/syntax/xyChart.md @@ -43,7 +43,7 @@ xychart-beta ``` ```note -if the title single word no need to use ", but if it has space " is needed +If the title is a single word one no need to use `"`, but if it has space `"` is needed ``` ### x-axis From a0e9b0c96d839742ba98386af82f43fbf303053c Mon Sep 17 00:00:00 2001 From: Steph <35910788+huynhicode@users.noreply.github.com> Date: Fri, 22 Sep 2023 10:09:05 -0700 Subject: [PATCH 053/457] add git graph blog post --- docs/news/announcements.md | 6 +++--- docs/news/blog.md | 6 ++++++ packages/mermaid/src/docs/news/announcements.md | 6 +++--- packages/mermaid/src/docs/news/blog.md | 6 ++++++ 4 files changed, 18 insertions(+), 6 deletions(-) diff --git a/docs/news/announcements.md b/docs/news/announcements.md index 53542869a7..19568afa46 100644 --- a/docs/news/announcements.md +++ b/docs/news/announcements.md @@ -6,8 +6,8 @@ # Announcements -## [Present flow data using Sankey diagrams in Mermaid, thanks to Nikolay Rozhkov](https://www.mermaidchart.com/blog/posts/present-flow-data-using-sankey-diagrams/) +## [How to Make a Git Graph with Mermaid Chart](https://www.mermaidchart.com/blog/posts/how-to-make-a-git-graph-with-mermaid-chart/) -8 September 2023 · 4 mins +22 September 2023 · 7 mins -Sankey diagrams are a powerful tool for visualizing flow data. +A git graph is one of the more useful forms of diagrams for developers and DevOps professionals. diff --git a/docs/news/blog.md b/docs/news/blog.md index e57bc7ae20..cc34b9f5c5 100644 --- a/docs/news/blog.md +++ b/docs/news/blog.md @@ -6,6 +6,12 @@ # Blog +## [How to Make a Git Graph with Mermaid Chart](https://www.mermaidchart.com/blog/posts/how-to-make-a-git-graph-with-mermaid-chart/) + +22 September 2023 · 7 mins + +A git graph is one of the more useful forms of diagrams for developers and DevOps professionals. + ## [Present flow data using Sankey diagrams in Mermaid, thanks to Nikolay Rozhkov](https://www.mermaidchart.com/blog/posts/present-flow-data-using-sankey-diagrams/) 8 September 2023 · 4 mins diff --git a/packages/mermaid/src/docs/news/announcements.md b/packages/mermaid/src/docs/news/announcements.md index 47509b33a1..8a8d000a5e 100644 --- a/packages/mermaid/src/docs/news/announcements.md +++ b/packages/mermaid/src/docs/news/announcements.md @@ -1,7 +1,7 @@ # Announcements -## [Present flow data using Sankey diagrams in Mermaid, thanks to Nikolay Rozhkov](https://www.mermaidchart.com/blog/posts/present-flow-data-using-sankey-diagrams/) +## [How to Make a Git Graph with Mermaid Chart](https://www.mermaidchart.com/blog/posts/how-to-make-a-git-graph-with-mermaid-chart/) -8 September 2023 · 4 mins +22 September 2023 · 7 mins -Sankey diagrams are a powerful tool for visualizing flow data. +A git graph is one of the more useful forms of diagrams for developers and DevOps professionals. diff --git a/packages/mermaid/src/docs/news/blog.md b/packages/mermaid/src/docs/news/blog.md index d39398d772..fa581349f1 100644 --- a/packages/mermaid/src/docs/news/blog.md +++ b/packages/mermaid/src/docs/news/blog.md @@ -1,5 +1,11 @@ # Blog +## [How to Make a Git Graph with Mermaid Chart](https://www.mermaidchart.com/blog/posts/how-to-make-a-git-graph-with-mermaid-chart/) + +22 September 2023 · 7 mins + +A git graph is one of the more useful forms of diagrams for developers and DevOps professionals. + ## [Present flow data using Sankey diagrams in Mermaid, thanks to Nikolay Rozhkov](https://www.mermaidchart.com/blog/posts/present-flow-data-using-sankey-diagrams/) 8 September 2023 · 4 mins From 96882690279945b7dd96f9af081edf38e3cee4dc Mon Sep 17 00:00:00 2001 From: Alois Klink <alois@aloisklink.com> Date: Sun, 24 Sep 2023 17:07:30 +0100 Subject: [PATCH 054/457] ci(release-draft): limit GITHUB_TOKEN permissions Limit the `GITHUB_TOKEN` permissions for `toolmantim/release-drafter` to the minimum required permissions. --- .github/workflows/release-draft.yml | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/.github/workflows/release-draft.yml b/.github/workflows/release-draft.yml index a37b7bcf2a..d57daf67d9 100644 --- a/.github/workflows/release-draft.yml +++ b/.github/workflows/release-draft.yml @@ -5,9 +5,15 @@ on: branches: - develop +permissions: + contents: read + jobs: draft-release: runs-on: ubuntu-latest + permissions: + contents: write # write permission is required to create a github release + pull-requests: read # required to read PR titles/labels steps: - name: Draft Release uses: toolmantim/release-drafter@v5 From b928e60d8b4a1d83deb2800b6c2b083c73d722b8 Mon Sep 17 00:00:00 2001 From: Alois Klink <alois@aloisklink.com> Date: Sun, 24 Sep 2023 18:04:06 +0100 Subject: [PATCH 055/457] ci(pr-labeler): limit GITHUB_TOKEN permissions Limit the `GITHUB_TOKEN` permissions for `TimonVS/pr-labeler-action` to the minimum required permissions. --- .github/workflows/pr-labeler.yml | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/.github/workflows/pr-labeler.yml b/.github/workflows/pr-labeler.yml index 0a53c6e424..d2df287e53 100644 --- a/.github/workflows/pr-labeler.yml +++ b/.github/workflows/pr-labeler.yml @@ -3,9 +3,15 @@ on: pull_request_target: types: [opened] +permissions: + contents: read + jobs: pr-labeler: runs-on: ubuntu-latest + permissions: + contents: read # read permission is required to read config file + pull-requests: write # write permission is required to label PRs steps: - name: Label PR uses: TimonVS/pr-labeler-action@v4 From 123d53c265a90f9abe526141d7872ceb116b8268 Mon Sep 17 00:00:00 2001 From: Alois Klink <alois@aloisklink.com> Date: Sun, 24 Sep 2023 17:15:30 +0100 Subject: [PATCH 056/457] ci(release-drafter): remove unused `branch` config `branch` is not a valid configuration option for release-drafter, see https://github.com/release-drafter/release-drafter#configuration-options There's is a similar [`references` option][1], but it does nothing when using GitHub Actions (it's only there for GitHub apps). There's also `commitish`, but it defaults to the target/branch the GitHub Action job runs on, so we don't need to set that. [1]: https://github.com/release-drafter/release-drafter#references --- .github/release-drafter.yml | 2 -- 1 file changed, 2 deletions(-) diff --git a/.github/release-drafter.yml b/.github/release-drafter.yml index e650f8dd11..83138c3d46 100644 --- a/.github/release-drafter.yml +++ b/.github/release-drafter.yml @@ -25,8 +25,6 @@ categories: change-template: '- $TITLE (#$NUMBER) @$AUTHOR' sort-by: title sort-direction: ascending -branches: - - develop exclude-labels: - 'Skip changelog' no-changes-template: 'This release contains minor changes and bugfixes.' From 5f740312fe6988390f2ca9fc048a54b0587f4245 Mon Sep 17 00:00:00 2001 From: Alois Klink <alois@aloisklink.com> Date: Sun, 24 Sep 2023 18:17:02 +0100 Subject: [PATCH 057/457] ci(release-draft): handle new release-drafter name https://github.com/toolmantim/release-drafter has been renamed to https://github.com/release-drafter/release-drafter. --- .github/workflows/release-draft.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/release-draft.yml b/.github/workflows/release-draft.yml index d57daf67d9..c130375976 100644 --- a/.github/workflows/release-draft.yml +++ b/.github/workflows/release-draft.yml @@ -16,6 +16,6 @@ jobs: pull-requests: read # required to read PR titles/labels steps: - name: Draft Release - uses: toolmantim/release-drafter@v5 + uses: release-drafter/release-drafter@v5 env: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} From dc22189eef2cdcdf96e8caf26d4e020e74c47fe2 Mon Sep 17 00:00:00 2001 From: Alois Klink <alois@aloisklink.com> Date: Sun, 24 Sep 2023 18:10:10 +0100 Subject: [PATCH 058/457] docs(ci/pr-labeler): warn about security issues Using `pull_request_target` is pretty dangerous, since it heavily increases the risk of malicious PRs getting access to the mermaid-js repo. What we're doing currently is safe, but we should add a warning message just to ensure that we're very careful when we make changes. See: https://docs.github.com/en/actions/using-workflows/events-that-trigger-workflows#pull_request_target See: https://securitylab.github.com/research/github-actions-preventing-pwn-requests/ --- .github/workflows/pr-labeler.yml | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/.github/workflows/pr-labeler.yml b/.github/workflows/pr-labeler.yml index d2df287e53..52228a2273 100644 --- a/.github/workflows/pr-labeler.yml +++ b/.github/workflows/pr-labeler.yml @@ -1,6 +1,14 @@ name: Apply labels to PR on: pull_request_target: + # required for pr-labeler to support PRs from forks + # ===================== ⛔ ☢️ 🚫 ⚠️ Warning ⚠️ 🚫 ☢️ ⛔ ======================= + # Be very careful what you put in this GitHub Action workflow file to avoid + # malicious PRs from getting access to the Mermaid-js repo. + # + # Please read the following first before reviewing/merging: + # - https://docs.github.com/en/actions/using-workflows/events-that-trigger-workflows#pull_request_target + # - https://securitylab.github.com/research/github-actions-preventing-pwn-requests/ types: [opened] permissions: From 672a289909b0d782a25ea06a800221ce2ac8f7e9 Mon Sep 17 00:00:00 2001 From: Alois Klink <alois@aloisklink.com> Date: Sun, 24 Sep 2023 18:29:55 +0100 Subject: [PATCH 059/457] style(pr-labeler): format .github/pr-labeler.yml Change the formatting of .github/pr-labeler.yml to make `git diff`'s easier to understand in a future commit. --- .github/pr-labeler.yml | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/.github/pr-labeler.yml b/.github/pr-labeler.yml index 0bbd8db66a..bbd122a7ca 100644 --- a/.github/pr-labeler.yml +++ b/.github/pr-labeler.yml @@ -1,4 +1,13 @@ -'Type: Bug / Error': ['bug/*', fix/*] -'Type: Enhancement': ['feature/*', 'feat/*'] -'Type: Other': ['other/*', 'chore/*', 'test/*', 'refactor/*'] -'Area: Documentation': ['docs/*'] +'Type: Bug / Error': + - 'bug/*' + - 'fix/*' +'Type: Enhancement': + - 'feature/*' + - 'feat/*' +'Type: Other': + - 'other/*' + - 'chore/*' + - 'test/*' + - 'refactor/*' +'Area: Documentation': + - 'docs/*' From a1673d3aca6a43500a1c469c07d65bc54edd647b Mon Sep 17 00:00:00 2001 From: Alois Klink <alois@aloisklink.com> Date: Sun, 24 Sep 2023 18:53:08 +0100 Subject: [PATCH 060/457] ci(pr-labeler): replace TimonVS/pr-labeler-action Replace the `TimonVS/pr-labeler-action` with `release-drafter/release-drafter` as it has an [`autolabeler`][1] option that can autolabel PRs for us. This should fix labeling PRs from forks, see https://github.com/TimonVS/pr-labeler-action/issues/25. I've kept the `.github/pr-labeler.yml` configuration file, so that links to it from the https://mermaid.js.org website continue to work. I've also kept everything in the same `.github/workflows/pr-labeler.yml` GitHub Actions workflow to make the `git diff` easier to review, and to keep the GitHub Actions permissions the same. [1]: https://github.com/release-drafter/release-drafter/blob/ff929b5ceb21bf2646a216e916f9a8bb507d48a3/README.md#autolabeler --- .github/pr-labeler.yml | 32 +++++++++++-------- .../workflows/pr-labeler-config-validator.yml | 23 ------------- .github/workflows/pr-labeler.yml | 8 +++-- .github/workflows/release-draft.yml | 2 ++ 4 files changed, 27 insertions(+), 38 deletions(-) delete mode 100644 .github/workflows/pr-labeler-config-validator.yml diff --git a/.github/pr-labeler.yml b/.github/pr-labeler.yml index bbd122a7ca..5613ca2bb9 100644 --- a/.github/pr-labeler.yml +++ b/.github/pr-labeler.yml @@ -1,13 +1,19 @@ -'Type: Bug / Error': - - 'bug/*' - - 'fix/*' -'Type: Enhancement': - - 'feature/*' - - 'feat/*' -'Type: Other': - - 'other/*' - - 'chore/*' - - 'test/*' - - 'refactor/*' -'Area: Documentation': - - 'docs/*' +# yaml-language-server: $schema=https://raw.githubusercontent.com/release-drafter/release-drafter/master/schema.json +autolabeler: + - label: 'Type: Bug / Error' + branch: + - '/bug\/.+/' + - '/fix\/.+/' + - label: 'Type: Enhancement' + branch: + - '/feature\/.+/' + - '/feat\/.+/' + - label: 'Type: Other' + branch: + - '/other\/.+/' + - '/chore\/.+/' + - '/test\/.+/' + - '/refactor\/.+/' + - label: 'Area: Documentation' + branch: + - '/docs\/.+/' diff --git a/.github/workflows/pr-labeler-config-validator.yml b/.github/workflows/pr-labeler-config-validator.yml deleted file mode 100644 index ff5d8d0a1f..0000000000 --- a/.github/workflows/pr-labeler-config-validator.yml +++ /dev/null @@ -1,23 +0,0 @@ -name: Validate PR Labeler Configuration -on: - push: - paths: - - .github/workflows/pr-labeler-config-validator.yml - - .github/workflows/pr-labeler.yml - - .github/pr-labeler.yml - pull_request: - paths: - - .github/workflows/pr-labeler-config-validator.yml - - .github/workflows/pr-labeler.yml - - .github/pr-labeler.yml - -jobs: - pr-labeler: - runs-on: ubuntu-latest - steps: - - name: Checkout Repository - uses: actions/checkout@v3 - - name: Validate Configuration - uses: Yash-Singh1/pr-labeler-config-validator@releases/v0.0.3 - with: - configuration-path: .github/pr-labeler.yml diff --git a/.github/workflows/pr-labeler.yml b/.github/workflows/pr-labeler.yml index 52228a2273..b2fc1cc26e 100644 --- a/.github/workflows/pr-labeler.yml +++ b/.github/workflows/pr-labeler.yml @@ -9,7 +9,7 @@ on: # Please read the following first before reviewing/merging: # - https://docs.github.com/en/actions/using-workflows/events-that-trigger-workflows#pull_request_target # - https://securitylab.github.com/research/github-actions-preventing-pwn-requests/ - types: [opened] + types: [opened, reopened, synchronize] permissions: contents: read @@ -22,6 +22,10 @@ jobs: pull-requests: write # write permission is required to label PRs steps: - name: Label PR - uses: TimonVS/pr-labeler-action@v4 + uses: release-drafter/release-drafter@v5 + with: + config-name: pr-labeler.yml + disable-autolabeler: false + disable-releaser: true env: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} diff --git a/.github/workflows/release-draft.yml b/.github/workflows/release-draft.yml index c130375976..8ad1b13ecd 100644 --- a/.github/workflows/release-draft.yml +++ b/.github/workflows/release-draft.yml @@ -17,5 +17,7 @@ jobs: steps: - name: Draft Release uses: release-drafter/release-drafter@v5 + with: + disable-autolabeler: true env: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} From fd2c2f7af397fae43cbeffa149c03b18c47cfd24 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Mon, 25 Sep 2023 07:43:56 +0000 Subject: [PATCH 061/457] chore(deps): update all patch dependencies --- packages/mermaid/src/docs/package.json | 2 +- pnpm-lock.yaml | 20 ++++++++++++++++---- 2 files changed, 17 insertions(+), 5 deletions(-) diff --git a/packages/mermaid/src/docs/package.json b/packages/mermaid/src/docs/package.json index ea735d1066..ff8a03d5df 100644 --- a/packages/mermaid/src/docs/package.json +++ b/packages/mermaid/src/docs/package.json @@ -32,7 +32,7 @@ "unplugin-vue-components": "^0.25.0", "vite": "^4.3.9", "vite-plugin-pwa": "^0.16.0", - "vitepress": "1.0.0-rc.14", + "vitepress": "1.0.0-rc.20", "workbox-window": "^7.0.0" } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index bec2b603ec..8dc223204d 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -475,8 +475,8 @@ importers: specifier: ^0.16.0 version: 0.16.0(vite@4.3.9)(workbox-build@7.0.0)(workbox-window@7.0.0) vitepress: - specifier: 1.0.0-rc.14 - version: 1.0.0-rc.14(@algolia/client-search@4.19.1)(@types/node@18.16.0)(search-insights@2.6.0) + specifier: 1.0.0-rc.20 + version: 1.0.0-rc.20(@algolia/client-search@4.19.1)(@types/node@18.16.0)(postcss@8.4.27)(search-insights@2.6.0) workbox-window: specifier: ^7.0.0 version: 7.0.0 @@ -4682,6 +4682,13 @@ packages: '@types/mdurl': 1.0.2 dev: true + /@types/markdown-it@13.0.1: + resolution: {integrity: sha512-SUEb8Frsxs3D5Gg9xek6i6EG6XQ5s+O+ZdQzIPESZVZw3Pv3CPQfjCJBI+RgqZd1IBeu18S0Rn600qpPnEK37w==} + dependencies: + '@types/linkify-it': 3.0.2 + '@types/mdurl': 1.0.2 + dev: true + /@types/mdast@3.0.10: resolution: {integrity: sha512-W864tg/Osz1+9f4lrGTZpCSO5/z4608eUp19tbozkq2HJK6i3z1kT0H9tlADXuYIb1YYOBByU4Jsqkk75q48qA==} dependencies: @@ -15611,23 +15618,28 @@ packages: - terser dev: true - /vitepress@1.0.0-rc.14(@algolia/client-search@4.19.1)(@types/node@18.16.0)(search-insights@2.6.0): - resolution: {integrity: sha512-yChIeXOAcNvVnSVjhziH1vte0uhKb00PuZf7KdIMfx3ixTMAz73Nn+6gREvCv0SdH+anteGUKz5eljv0ygcgGQ==} + /vitepress@1.0.0-rc.20(@algolia/client-search@4.19.1)(@types/node@18.16.0)(postcss@8.4.27)(search-insights@2.6.0): + resolution: {integrity: sha512-CykMUJ8JLxLcGWek0ew3wln4RYbsOd1+0YzXITTpajggpynm2S331TNkJVOkHrMRc6GYe3y4pS40GfgcW0ZwAw==} hasBin: true peerDependencies: markdown-it-mathjax3: ^4.3.2 + postcss: ^8.4.30 peerDependenciesMeta: markdown-it-mathjax3: optional: true + postcss: + optional: true dependencies: '@docsearch/css': 3.5.2 '@docsearch/js': 3.5.2(@algolia/client-search@4.19.1)(search-insights@2.6.0) + '@types/markdown-it': 13.0.1 '@vue/devtools-api': 6.5.0 '@vueuse/core': 10.4.1(vue@3.3.4) '@vueuse/integrations': 10.4.1(focus-trap@7.5.2)(vue@3.3.4) focus-trap: 7.5.2 mark.js: 8.11.1 minisearch: 6.1.0 + postcss: 8.4.27 shiki: 0.14.4 vite: 4.4.9(@types/node@18.16.0) vue: 3.3.4 From 99beeba261674f57249179df6ad415e8a7169e07 Mon Sep 17 00:00:00 2001 From: Alois Klink <alois@aloisklink.com> Date: Sun, 24 Sep 2023 19:38:31 +0100 Subject: [PATCH 062/457] ci(pr-labeler): add required `template` option This value is unused, but it's required, so we have to add it. Fixes: a1673d3aca6a43500a1c469c07d65bc54edd647b --- .github/pr-labeler.yml | 3 +++ 1 file changed, 3 insertions(+) diff --git a/.github/pr-labeler.yml b/.github/pr-labeler.yml index 5613ca2bb9..15e1843276 100644 --- a/.github/pr-labeler.yml +++ b/.github/pr-labeler.yml @@ -17,3 +17,6 @@ autolabeler: - label: 'Area: Documentation' branch: - '/docs\/.+/' + +template: | + This field is unused, as we only use this config file for labeling PRs. From a3456ec933e60fc2d6379e7245797a2d98e82309 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod <sidharthv96@gmail.com> Date: Tue, 26 Sep 2023 18:36:05 +0530 Subject: [PATCH 063/457] fix: Sequence diagram loop rendering --- .../src/diagrams/sequence/sequenceRenderer.ts | 40 +++++++++++-------- 1 file changed, 24 insertions(+), 16 deletions(-) diff --git a/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts b/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts index a596a3a029..058646dc8b 100644 --- a/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts +++ b/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts @@ -1421,23 +1421,31 @@ const buildMessageModel = function (msg, actors, diagObj) { return isArrowToRight ? -value : value; }; - /** - * This is an edge case for the first activation. - * Proper fix would require significant changes. - * So, we set an activate flag in the message, and cross check that with isToActivation - * In cases where the message is to an activation that was properly detected, we don't want to move the arrow head - * The activation will not be detected on the first message, so we need to move the arrow head - */ - if (msg.activate && !isArrowToActivation) { - stopx += adjustValue(conf.activationWidth / 2 - 1); - } + // 3 is max difference for +/- 1 + if (Math.abs(startx - stopx) <= 3) { + // This is a self reference, so we need to make sure the arrow is drawn correctly + // There are many checks in the downstream rendering that checks for equality. + // The lines on loops will be off by few pixels, but that's fine for now. + stopx = startx; + } else { + /** + * This is an edge case for the first activation. + * Proper fix would require significant changes. + * So, we set an activate flag in the message, and cross check that with isToActivation + * In cases where the message is to an activation that was properly detected, we don't want to move the arrow head + * The activation will not be detected on the first message, so we need to move the arrow head + */ + if (msg.activate && !isArrowToActivation) { + stopx += adjustValue(conf.activationWidth / 2 - 1); + } - /** - * Shorten the length of arrow at the end and move the marker forward (using refX) to have a clean arrowhead - * This is not required for open arrows that don't have arrowheads - */ - if (![diagObj.db.LINETYPE.SOLID_OPEN, diagObj.db.LINETYPE.DOTTED_OPEN].includes(msg.type)) { - stopx += adjustValue(3); + /** + * Shorten the length of arrow at the end and move the marker forward (using refX) to have a clean arrowhead + * This is not required for open arrows that don't have arrowheads + */ + if (![diagObj.db.LINETYPE.SOLID_OPEN, diagObj.db.LINETYPE.DOTTED_OPEN].includes(msg.type)) { + stopx += adjustValue(3); + } } const allBounds = [fromLeft, fromRight, toLeft, toRight]; From 5f5b216428c54336ac87ca1b759f6e32678a62ae Mon Sep 17 00:00:00 2001 From: Sidharth Vinod <sidharthv96@gmail.com> Date: Tue, 26 Sep 2023 19:15:44 +0530 Subject: [PATCH 064/457] fix: Performance issue in Gantt diagram --- .../src/diagrams/gantt/ganttRenderer.js | 33 ++++++++++++++----- 1 file changed, 25 insertions(+), 8 deletions(-) diff --git a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js index 935ecc9285..554df8c3c1 100644 --- a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js +++ b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js @@ -497,20 +497,37 @@ export const draw = function (text, id, version, diagObj) { * @param w * @param h * @param tasks - * @param excludes - * @param includes + * @param {unknown[]} excludes + * @param {unknown[]} includes */ function drawExcludeDays(theGap, theTopPad, theSidePad, w, h, tasks, excludes, includes) { - const minTime = tasks.reduce( - (min, { startTime }) => (min ? Math.min(min, startTime) : startTime), - 0 - ); - const maxTime = tasks.reduce((max, { endTime }) => (max ? Math.max(max, endTime) : endTime), 0); - const dateFormat = diagObj.db.getDateFormat(); + if (excludes.length === 0 && includes.length === 0) { + return; + } + + let minTime; + let maxTime; + for (const { startTime, endTime } of tasks) { + if (minTime === undefined || startTime < minTime) { + minTime = startTime; + } + if (maxTime === undefined || endTime > maxTime) { + maxTime = endTime; + } + } + if (!minTime || !maxTime) { return; } + if (dayjs(maxTime).diff(dayjs(minTime), 'year') > 10) { + console.warn( + 'The difference between the min and max time is more than 10 years. This will cause performance issues. Skipping drawing exclude days.' + ); + return; + } + + const dateFormat = diagObj.db.getDateFormat(); const excludeRanges = []; let range = null; let d = dayjs(minTime); From 7cb1c2e0aa8d067b90c188a6e916937d2955cc6a Mon Sep 17 00:00:00 2001 From: Sidharth Vinod <sidharthv96@gmail.com> Date: Tue, 26 Sep 2023 19:21:05 +0530 Subject: [PATCH 065/457] fix(gantt): Set max exclude interval length to 5 years --- packages/mermaid/src/diagrams/gantt/ganttRenderer.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js index 554df8c3c1..c0622ec3b2 100644 --- a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js +++ b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js @@ -520,9 +520,9 @@ export const draw = function (text, id, version, diagObj) { return; } - if (dayjs(maxTime).diff(dayjs(minTime), 'year') > 10) { + if (dayjs(maxTime).diff(dayjs(minTime), 'year') > 5) { console.warn( - 'The difference between the min and max time is more than 10 years. This will cause performance issues. Skipping drawing exclude days.' + 'The difference between the min and max time is more than 5 years. This will cause performance issues. Skipping drawing exclude days.' ); return; } From 63f4a56ec556aa729b465f4d40c8078b2f65cdd0 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod <sidharthv96@gmail.com> Date: Tue, 26 Sep 2023 19:21:14 +0530 Subject: [PATCH 066/457] chore: Add test for gantt rendering --- cypress/integration/rendering/gantt.spec.js | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/cypress/integration/rendering/gantt.spec.js b/cypress/integration/rendering/gantt.spec.js index 7c16909522..fea874003b 100644 --- a/cypress/integration/rendering/gantt.spec.js +++ b/cypress/integration/rendering/gantt.spec.js @@ -520,6 +520,25 @@ describe('Gantt diagram', () => { ); }); + it('should render a gantt diagram with very large intervals, skipping excludes if interval > 5 years', () => { + imgSnapshotTest( + `gantt + title A long Gantt Diagram + dateFormat YYYY-MM-DD + axisFormat %m-%d + tickInterval 1day + excludes weekends + + section Section + A task : a1, 9999-10-01, 30d + Another task : after a1, 20d + section Another + Task in sec : 2022-10-20, 12d + another task : 24d + ` + ); + }); + it('should render when compact is true', () => { imgSnapshotTest( ` From ee58743a04226f4ef71ed1bf6aa02c0ce1814ced Mon Sep 17 00:00:00 2001 From: Sidharth Vinod <sidharthv96@gmail.com> Date: Tue, 26 Sep 2023 19:24:39 +0530 Subject: [PATCH 067/457] fix: Use log instead of console --- packages/mermaid/src/diagrams/gantt/ganttRenderer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js index c0622ec3b2..55b5607a28 100644 --- a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js +++ b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js @@ -521,7 +521,7 @@ export const draw = function (text, id, version, diagObj) { } if (dayjs(maxTime).diff(dayjs(minTime), 'year') > 5) { - console.warn( + log.warn( 'The difference between the min and max time is more than 5 years. This will cause performance issues. Skipping drawing exclude days.' ); return; From f96d351fdc754da8a93688978b6893aa5239cf62 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod <sidharthv96@gmail.com> Date: Thu, 28 Sep 2023 13:09:56 +0530 Subject: [PATCH 068/457] fix: Sequence loop rendering --- packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts b/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts index 058646dc8b..a41c3877fe 100644 --- a/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts +++ b/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts @@ -1421,8 +1421,7 @@ const buildMessageModel = function (msg, actors, diagObj) { return isArrowToRight ? -value : value; }; - // 3 is max difference for +/- 1 - if (Math.abs(startx - stopx) <= 3) { + if (msg.from === msg.to) { // This is a self reference, so we need to make sure the arrow is drawn correctly // There are many checks in the downstream rendering that checks for equality. // The lines on loops will be off by few pixels, but that's fine for now. From f8a3807b3294da3500ab9e76e684ac4de4195a88 Mon Sep 17 00:00:00 2001 From: Ivan Posti <ivan.posti@jetbrains.com> Date: Thu, 28 Sep 2023 12:58:33 +0200 Subject: [PATCH 069/457] Update link for the Mermaid integration in JetBrains IDEs --- docs/ecosystem/integrations.md | 2 +- packages/mermaid/src/docs/ecosystem/integrations.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/ecosystem/integrations.md b/docs/ecosystem/integrations.md index 5d7ed00eea..6b65237ee9 100644 --- a/docs/ecosystem/integrations.md +++ b/docs/ecosystem/integrations.md @@ -59,7 +59,7 @@ They also serve as proof of concept, for the variety of things that can be built - [Mermaid Macro](https://www.redmine.org/plugins/redmine_mermaid_macro) - [redmine-mermaid](https://github.com/styz/redmine_mermaid) - [markdown-for-mermaid-plugin](https://github.com/jamieh-mongolian/markdown-for-mermaid-plugin) -- [JetBrains IDE eg Pycharm](https://www.jetbrains.com/go/guide/tips/mermaid-js-support-in-markdown/) +- [Mermaid Plugin for JetBrains IDEs](https://plugins.jetbrains.com/plugin/20146-mermaid) - [mermerd](https://github.com/KarnerTh/mermerd) - Visual Studio Code [Polyglot Interactive Notebooks](https://github.com/dotnet/interactive#net-interactive) diff --git a/packages/mermaid/src/docs/ecosystem/integrations.md b/packages/mermaid/src/docs/ecosystem/integrations.md index c03d204def..ef9abfc7ac 100644 --- a/packages/mermaid/src/docs/ecosystem/integrations.md +++ b/packages/mermaid/src/docs/ecosystem/integrations.md @@ -53,7 +53,7 @@ They also serve as proof of concept, for the variety of things that can be built - [Mermaid Macro](https://www.redmine.org/plugins/redmine_mermaid_macro) - [redmine-mermaid](https://github.com/styz/redmine_mermaid) - [markdown-for-mermaid-plugin](https://github.com/jamieh-mongolian/markdown-for-mermaid-plugin) -- [JetBrains IDE eg Pycharm](https://www.jetbrains.com/go/guide/tips/mermaid-js-support-in-markdown/) +- [Mermaid Plugin for JetBrains IDEs](https://plugins.jetbrains.com/plugin/20146-mermaid) - [mermerd](https://github.com/KarnerTh/mermerd) - Visual Studio Code [Polyglot Interactive Notebooks](https://github.com/dotnet/interactive#net-interactive) From 874ccfb5a7574d9b50ed7b75888c5820cd1def79 Mon Sep 17 00:00:00 2001 From: steph <steph@huynhicode.dev> Date: Thu, 28 Sep 2023 23:28:33 -0700 Subject: [PATCH 070/457] fix links --- docs/intro/index.md | 5 +++-- packages/mermaid/src/docs/intro/index.md | 5 +++-- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/docs/intro/index.md b/docs/intro/index.md index 974003fd6c..1f07a7d1af 100644 --- a/docs/intro/index.md +++ b/docs/intro/index.md @@ -42,11 +42,12 @@ But not having diagrams or docs ruins productivity and hurts organizational lear Mermaid addresses this problem by enabling users to create easily modifiable diagrams, it can also be made part of production scripts (and other pieces of code).<br/> <br/> Mermaid allows even non-programmers to easily create detailed and diagrams through the [Mermaid Live Editor](https://mermaid.live/).<br/> [Tutorials](../config/Tutorials.md) has video tutorials. -Use Mermaid with your favorite applications, check out the list of [Integrations and Usages of Mermaid](../ecosystem/integrations.md). + +Use Mermaid with your favorite applications, check out the list of [Community Integrations](../ecosystem/integrations-community.md). For a more detailed introduction to Mermaid and some of its more basic uses, look to the [Beginner's Guide](../intro/n00b-gettingStarted.md) and [Usage](../config/usage.md). -🌐 [CDN](https://www.jsdelivr.com/package/npm/mermaid) | 📖 [Documentation](https://mermaidjs.github.io) | 🙌 [Contribution](../community/development.md) | 🔌 [Plug-Ins](../ecosystem/integrations.md) +🌐 [CDN](https://www.jsdelivr.com/package/npm/mermaid) | 📖 [Documentation](https://mermaidjs.github.io) | 🙌 [Contribution](../community/development.md) | 🔌 [Plug-Ins](../ecosystem/integrations-community.md) > 🖖 Keep a steady pulse: mermaid needs more Collaborators, [Read More](https://github.com/knsv/mermaid/issues/866). diff --git a/packages/mermaid/src/docs/intro/index.md b/packages/mermaid/src/docs/intro/index.md index 84fec41f86..4f1ed6696c 100644 --- a/packages/mermaid/src/docs/intro/index.md +++ b/packages/mermaid/src/docs/intro/index.md @@ -37,11 +37,12 @@ Mermaid addresses this problem by enabling users to create easily modifiable dia <br/> Mermaid allows even non-programmers to easily create detailed and diagrams through the [Mermaid Live Editor](https://mermaid.live/).<br/> [Tutorials](../config/Tutorials.md) has video tutorials. -Use Mermaid with your favorite applications, check out the list of [Integrations and Usages of Mermaid](../ecosystem/integrations.md). + +Use Mermaid with your favorite applications, check out the list of [Community Integrations](../ecosystem/integrations-community.md). For a more detailed introduction to Mermaid and some of its more basic uses, look to the [Beginner's Guide](../intro/n00b-gettingStarted.md) and [Usage](../config/usage.md). -🌐 [CDN](https://www.jsdelivr.com/package/npm/mermaid) | 📖 [Documentation](https://mermaidjs.github.io) | 🙌 [Contribution](../community/development.md) | 🔌 [Plug-Ins](../ecosystem/integrations.md) +🌐 [CDN](https://www.jsdelivr.com/package/npm/mermaid) | 📖 [Documentation](https://mermaidjs.github.io) | 🙌 [Contribution](../community/development.md) | 🔌 [Plug-Ins](../ecosystem/integrations-community.md) > 🖖 Keep a steady pulse: mermaid needs more Collaborators, [Read More](https://github.com/knsv/mermaid/issues/866). From 2cb1a88913f6dae29f830560600cad8575aad837 Mon Sep 17 00:00:00 2001 From: steph <steph@huynhicode.dev> Date: Thu, 28 Sep 2023 23:37:59 -0700 Subject: [PATCH 071/457] more link fixes --- docs/intro/n00b-gettingStarted.md | 4 ++-- packages/mermaid/src/docs/intro/n00b-gettingStarted.md | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/intro/n00b-gettingStarted.md b/docs/intro/n00b-gettingStarted.md index f4fb69b909..cad486f63f 100644 --- a/docs/intro/n00b-gettingStarted.md +++ b/docs/intro/n00b-gettingStarted.md @@ -17,7 +17,7 @@ This section talks about the different ways to deploy Mermaid. Learning the [Syn ## Four ways of using mermaid: 1. Using the Mermaid Live Editor at [mermaid.live](https://mermaid.live). -2. Using [mermaid plugins](../ecosystem/integrations.md) with programs you are familiar with. +2. Using [mermaid plugins](../ecosystem/integration-community.md) with programs you are familiar with. 3. Calling the Mermaid JavaScript API. 4. Deploying Mermaid as a dependency. @@ -85,7 +85,7 @@ and to View, <https://mermaid.live/view?gist=https://gist.github.com/sidharthv96 ## 2. Using Mermaid Plugins: -You can generate mermaid diagrams from within popular applications using plug-ins. It can be done in the same way, you would use the Live Editor. Here's a list of [Mermaid Plugins](../ecosystem/integrations.md). +You can generate mermaid diagrams from within popular applications using plug-ins. It can be done in the same way, you would use the Live Editor. Here's a list of [Mermaid Plugins](../ecosystem/integrations-community.md). **This is covered in greater detail in the [Usage section](../config/usage.md)** diff --git a/packages/mermaid/src/docs/intro/n00b-gettingStarted.md b/packages/mermaid/src/docs/intro/n00b-gettingStarted.md index fcb3f31ee1..d9323e391e 100644 --- a/packages/mermaid/src/docs/intro/n00b-gettingStarted.md +++ b/packages/mermaid/src/docs/intro/n00b-gettingStarted.md @@ -11,7 +11,7 @@ This section talks about the different ways to deploy Mermaid. Learning the [Syn ## Four ways of using mermaid: 1. Using the Mermaid Live Editor at [mermaid.live](https://mermaid.live). -2. Using [mermaid plugins](../ecosystem/integrations.md) with programs you are familiar with. +2. Using [mermaid plugins](../ecosystem/integration-community.md) with programs you are familiar with. 3. Calling the Mermaid JavaScript API. 4. Deploying Mermaid as a dependency. @@ -68,7 +68,7 @@ and to View, https://mermaid.live/view?gist=https://gist.github.com/sidharthv96/ ## 2. Using Mermaid Plugins: -You can generate mermaid diagrams from within popular applications using plug-ins. It can be done in the same way, you would use the Live Editor. Here's a list of [Mermaid Plugins](../ecosystem/integrations.md). +You can generate mermaid diagrams from within popular applications using plug-ins. It can be done in the same way, you would use the Live Editor. Here's a list of [Mermaid Plugins](../ecosystem/integrations-community.md). **This is covered in greater detail in the [Usage section](../config/usage.md)** From 564cfbee5bd2592ac16131bcb99ec35085bdc060 Mon Sep 17 00:00:00 2001 From: steph <steph@huynhicode.dev> Date: Thu, 28 Sep 2023 23:46:32 -0700 Subject: [PATCH 072/457] fix typo --- docs/intro/n00b-gettingStarted.md | 2 +- packages/mermaid/src/docs/intro/n00b-gettingStarted.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/intro/n00b-gettingStarted.md b/docs/intro/n00b-gettingStarted.md index cad486f63f..b863d422a1 100644 --- a/docs/intro/n00b-gettingStarted.md +++ b/docs/intro/n00b-gettingStarted.md @@ -17,7 +17,7 @@ This section talks about the different ways to deploy Mermaid. Learning the [Syn ## Four ways of using mermaid: 1. Using the Mermaid Live Editor at [mermaid.live](https://mermaid.live). -2. Using [mermaid plugins](../ecosystem/integration-community.md) with programs you are familiar with. +2. Using [mermaid plugins](../ecosystem/integrations-community.md) with programs you are familiar with. 3. Calling the Mermaid JavaScript API. 4. Deploying Mermaid as a dependency. diff --git a/packages/mermaid/src/docs/intro/n00b-gettingStarted.md b/packages/mermaid/src/docs/intro/n00b-gettingStarted.md index d9323e391e..190137dedb 100644 --- a/packages/mermaid/src/docs/intro/n00b-gettingStarted.md +++ b/packages/mermaid/src/docs/intro/n00b-gettingStarted.md @@ -11,7 +11,7 @@ This section talks about the different ways to deploy Mermaid. Learning the [Syn ## Four ways of using mermaid: 1. Using the Mermaid Live Editor at [mermaid.live](https://mermaid.live). -2. Using [mermaid plugins](../ecosystem/integration-community.md) with programs you are familiar with. +2. Using [mermaid plugins](../ecosystem/integrations-community.md) with programs you are familiar with. 3. Calling the Mermaid JavaScript API. 4. Deploying Mermaid as a dependency. From f1895ac59911b649b1ec51af4cb202d3c3e9e2b6 Mon Sep 17 00:00:00 2001 From: steph <steph@huynhicode.dev> Date: Thu, 28 Sep 2023 23:52:53 -0700 Subject: [PATCH 073/457] more fixes --- README.md | 4 ++-- README.zh-CN.md | 2 +- packages/mermaid/src/docs/index.md | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 0f47ceca2d..d4a8911964 100644 --- a/README.md +++ b/README.md @@ -56,9 +56,9 @@ Mermaid addresses this problem by enabling users to create easily modifiable dia Mermaid allows even non-programmers to easily create detailed diagrams through the [Mermaid Live Editor](https://mermaid.live/).<br/> [Tutorials](./docs/config/Tutorials.md) has video tutorials. -Use Mermaid with your favorite applications, check out the list of [Integrations and Usages of Mermaid](./docs/ecosystem/integrations.md). +Use Mermaid with your favorite applications, check out the list of [Integrations and Usages of Mermaid](./docs/ecosystem/integrations-community.md). -You can also use Mermaid within [GitHub](https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/) as well many of your other favorite applications—check out the list of [Integrations and Usages of Mermaid](./docs/ecosystem/integrations.md). +You can also use Mermaid within [GitHub](https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/) as well many of your other favorite applications—check out the list of [Integrations and Usages of Mermaid](./docs/ecosystem/integrations-community.md). For a more detailed introduction to Mermaid and some of its more basic uses, look to the [Beginner's Guide](./docs/intro/n00b-gettingStarted.md), [Usage](./docs/config/usage.md) and [Tutorials](./docs/config/Tutorials.md). diff --git a/README.zh-CN.md b/README.zh-CN.md index 0cc05906e2..de8ec78afd 100644 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -53,7 +53,7 @@ Mermaid 是一个基于 Javascript 的图表绘制工具，通过解析类 Markd Mermaid 通过允许用户创建便于修改的图表来解决这一难题，它也可以作为生产脚本（或其他代码）的一部分。<br/> <br/> Mermaid 甚至能让非程序员也能通过 [Mermaid Live Editor](https://mermaid.live/) 轻松创建详细的图表。<br/> -你可以访问 [教程](./docs/config/Tutorials.md) 来查看 Live Editor 的视频教程，也可以查看 [Mermaid 的集成和使用](./docs/ecosystem/integrations.md) 这个清单来检查你的文档工具是否已经集成了 Mermaid 支持。 +你可以访问 [教程](./docs/config/Tutorials.md) 来查看 Live Editor 的视频教程，也可以查看 [Mermaid 的集成和使用](./docs/ecosystem/integrations-community.md) 这个清单来检查你的文档工具是否已经集成了 Mermaid 支持。 如果想要查看关于 Mermaid 更详细的介绍及基础使用方式，可以查看 [入门指引](./docs/intro/n00b-gettingStarted.md), [用法](./docs/config/usage.md) 和 [教程](./docs/config/Tutorials.md). diff --git a/packages/mermaid/src/docs/index.md b/packages/mermaid/src/docs/index.md index dd1025d56a..8e92edd114 100644 --- a/packages/mermaid/src/docs/index.md +++ b/packages/mermaid/src/docs/index.md @@ -26,7 +26,7 @@ features: link: https://mermaid.live/ - title: 🧩 Integrations available! details: Use Mermaid with your favorite applications, check out the integrations list. - link: ../../ecosystem/integrations.md + link: ../../ecosystem/integrations-community.md - title: 🏆 Award winning! details: 2019 JavaScript Open Source Award winner for "The Most Exciting Use of Technology". link: https://osawards.com/javascript/2019 From 47acc1e423d6922f006a32f6fbeb5e72f57790d0 Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist <knsv@sveido.com> Date: Fri, 29 Sep 2023 13:38:00 +0200 Subject: [PATCH 074/457] Fix for issue with backticks in ids in classDiagrams --- cypress/integration/other/xss.spec.js | 5 + cypress/platform/knsv2.html | 10 +- cypress/platform/xss10.html | 10 ++ cypress/platform/xss11.html | 10 ++ cypress/platform/xss12.html | 10 ++ cypress/platform/xss13.html | 10 ++ cypress/platform/xss15.html | 10 ++ cypress/platform/xss16.html | 10 ++ cypress/platform/xss17.html | 10 ++ cypress/platform/xss18.html | 10 ++ cypress/platform/xss19.html | 10 ++ cypress/platform/xss20.html | 10 ++ cypress/platform/xss21.html | 10 ++ cypress/platform/xss23-css.html | 10 ++ cypress/platform/xss24.html | 109 ++++++++++++++++++ cypress/platform/xss5.html | 18 +-- cypress/platform/xss6.html | 10 ++ cypress/platform/xss7.html | 10 ++ cypress/platform/xss8.html | 10 ++ cypress/platform/xss9.html | 10 ++ .../mermaid/src/diagrams/class/classDb.ts | 27 +++-- 21 files changed, 305 insertions(+), 24 deletions(-) create mode 100644 cypress/platform/xss24.html diff --git a/cypress/integration/other/xss.spec.js b/cypress/integration/other/xss.spec.js index fa4ca4fc80..678040f98a 100644 --- a/cypress/integration/other/xss.spec.js +++ b/cypress/integration/other/xss.spec.js @@ -132,4 +132,9 @@ describe('XSS', () => { cy.wait(1000); cy.get('#the-malware').should('not.exist'); }); + it('should sanitize backticks in class names properly', () => { + cy.visit('http://localhost:9000/xss24.html'); + cy.wait(1000); + cy.get('#the-malware').should('not.exist'); + }); }); diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html index f9a9f3756d..6ade6a2e5c 100644 --- a/cypress/platform/knsv2.html +++ b/cypress/platform/knsv2.html @@ -58,12 +58,10 @@ </head> <body> <pre id="diagram" class="mermaid"> - flowchart - classDef mainCategories fill:#f9d5e5, stroke:#233d4d,stroke-width:2px, font-weight:bold; - CS(Customer Awareness Journey):::mainCategories - </pre - > - <pre id="diagram" class="mermaid"> + classDiagram + `Class<img src=x onerror=alert(1)>` <|-- `Class2<img src=x onerror=alert(2)>` + </pre> + <pre id="diagram" class="mermaid2"> flowchart Node1:::class1 --> Node2:::class2 Node1:::class1 --> Node3:::class2 diff --git a/cypress/platform/xss10.html b/cypress/platform/xss10.html index 3a8157fed2..79fa97136e 100644 --- a/cypress/platform/xss10.html +++ b/cypress/platform/xss10.html @@ -42,6 +42,16 @@ font-size: 72px; } </style> + <script> + function xssAttack() { + const div = document.createElement('div'); + div.id = 'the-malware'; + div.className = 'malware'; + div.innerHTML = 'XSS Succeeded'; + document.getElementsByTagName('body')[0].appendChild(div); + throw new Error('XSS Succeeded'); + } + </script> </head> <body> <div>Security check</div> diff --git a/cypress/platform/xss11.html b/cypress/platform/xss11.html index 302f39ee90..3b505b7411 100644 --- a/cypress/platform/xss11.html +++ b/cypress/platform/xss11.html @@ -42,6 +42,16 @@ font-size: 72px; } </style> + <script> + function xssAttack() { + const div = document.createElement('div'); + div.id = 'the-malware'; + div.className = 'malware'; + div.innerHTML = 'XSS Succeeded'; + document.getElementsByTagName('body')[0].appendChild(div); + throw new Error('XSS Succeeded'); + } + </script> </head> <body> <div>Security check</div> diff --git a/cypress/platform/xss12.html b/cypress/platform/xss12.html index b1e2c1d0ab..75059e8af8 100644 --- a/cypress/platform/xss12.html +++ b/cypress/platform/xss12.html @@ -42,6 +42,16 @@ font-size: 72px; } </style> + <script> + function xssAttack() { + const div = document.createElement('div'); + div.id = 'the-malware'; + div.className = 'malware'; + div.innerHTML = 'XSS Succeeded'; + document.getElementsByTagName('body')[0].appendChild(div); + throw new Error('XSS Succeeded'); + } + </script> </head> <body> <div>Security check</div> diff --git a/cypress/platform/xss13.html b/cypress/platform/xss13.html index 9f505ea7b8..9ee2a73044 100644 --- a/cypress/platform/xss13.html +++ b/cypress/platform/xss13.html @@ -42,6 +42,16 @@ font-size: 72px; } </style> + <script> + function xssAttack() { + const div = document.createElement('div'); + div.id = 'the-malware'; + div.className = 'malware'; + div.innerHTML = 'XSS Succeeded'; + document.getElementsByTagName('body')[0].appendChild(div); + throw new Error('XSS Succeeded'); + } + </script> </head> <body> <div>Security check</div> diff --git a/cypress/platform/xss15.html b/cypress/platform/xss15.html index 3fa6b7151a..bfd3f1652d 100644 --- a/cypress/platform/xss15.html +++ b/cypress/platform/xss15.html @@ -42,6 +42,16 @@ font-size: 72px; } </style> + <script> + function xssAttack() { + const div = document.createElement('div'); + div.id = 'the-malware'; + div.className = 'malware'; + div.innerHTML = 'XSS Succeeded'; + document.getElementsByTagName('body')[0].appendChild(div); + throw new Error('XSS Succeeded'); + } + </script> </head> <body> <div>Security check</div> diff --git a/cypress/platform/xss16.html b/cypress/platform/xss16.html index 6f8a734eb6..0b8c0c9f78 100644 --- a/cypress/platform/xss16.html +++ b/cypress/platform/xss16.html @@ -42,6 +42,16 @@ font-size: 72px; } </style> + <script> + function xssAttack() { + const div = document.createElement('div'); + div.id = 'the-malware'; + div.className = 'malware'; + div.innerHTML = 'XSS Succeeded'; + document.getElementsByTagName('body')[0].appendChild(div); + throw new Error('XSS Succeeded'); + } + </script> </head> <body> <div>Security check</div> diff --git a/cypress/platform/xss17.html b/cypress/platform/xss17.html index bd7e1c57eb..2a04701264 100644 --- a/cypress/platform/xss17.html +++ b/cypress/platform/xss17.html @@ -42,6 +42,16 @@ font-size: 72px; } </style> + <script> + function xssAttack() { + const div = document.createElement('div'); + div.id = 'the-malware'; + div.className = 'malware'; + div.innerHTML = 'XSS Succeeded'; + document.getElementsByTagName('body')[0].appendChild(div); + throw new Error('XSS Succeeded'); + } + </script> </head> <body> <div>Security check</div> diff --git a/cypress/platform/xss18.html b/cypress/platform/xss18.html index ccacfadbb1..df1bee1dd6 100644 --- a/cypress/platform/xss18.html +++ b/cypress/platform/xss18.html @@ -42,6 +42,16 @@ font-size: 72px; } </style> + <script> + function xssAttack() { + const div = document.createElement('div'); + div.id = 'the-malware'; + div.className = 'malware'; + div.innerHTML = 'XSS Succeeded'; + document.getElementsByTagName('body')[0].appendChild(div); + throw new Error('XSS Succeeded'); + } + </script> </head> <body> <div>Security check</div> diff --git a/cypress/platform/xss19.html b/cypress/platform/xss19.html index 7966abb8c1..4d7bb6e08b 100644 --- a/cypress/platform/xss19.html +++ b/cypress/platform/xss19.html @@ -42,6 +42,16 @@ font-size: 72px; } </style> + <script> + function xssAttack() { + const div = document.createElement('div'); + div.id = 'the-malware'; + div.className = 'malware'; + div.innerHTML = 'XSS Succeeded'; + document.getElementsByTagName('body')[0].appendChild(div); + throw new Error('XSS Succeeded'); + } + </script> </head> <body> <div>Security check</div> diff --git a/cypress/platform/xss20.html b/cypress/platform/xss20.html index f290898b2f..bbe2dd00b8 100644 --- a/cypress/platform/xss20.html +++ b/cypress/platform/xss20.html @@ -42,6 +42,16 @@ font-size: 72px; } </style> + <script> + function xssAttack() { + const div = document.createElement('div'); + div.id = 'the-malware'; + div.className = 'malware'; + div.innerHTML = 'XSS Succeeded'; + document.getElementsByTagName('body')[0].appendChild(div); + throw new Error('XSS Succeeded'); + } + </script> </head> <body> <div>Security check</div> diff --git a/cypress/platform/xss21.html b/cypress/platform/xss21.html index 7cfa17c9ee..be7289b7f1 100644 --- a/cypress/platform/xss21.html +++ b/cypress/platform/xss21.html @@ -42,6 +42,16 @@ font-size: 72px; } </style> + <script> + function xssAttack() { + const div = document.createElement('div'); + div.id = 'the-malware'; + div.className = 'malware'; + div.innerHTML = 'XSS Succeeded'; + document.getElementsByTagName('body')[0].appendChild(div); + throw new Error('XSS Succeeded'); + } + </script> </head> <body> <div>Security check</div> diff --git a/cypress/platform/xss23-css.html b/cypress/platform/xss23-css.html index cc5b6f0bf7..c4bc43b6a0 100644 --- a/cypress/platform/xss23-css.html +++ b/cypress/platform/xss23-css.html @@ -42,6 +42,16 @@ font-size: 72px; } </style> + <script> + function xssAttack() { + const div = document.createElement('div'); + div.id = 'the-malware'; + div.className = 'malware'; + div.innerHTML = 'XSS Succeeded'; + document.getElementsByTagName('body')[0].appendChild(div); + throw new Error('XSS Succeeded'); + } + </script> </head> <body> <div>Security check</div> diff --git a/cypress/platform/xss24.html b/cypress/platform/xss24.html new file mode 100644 index 0000000000..5ca092d657 --- /dev/null +++ b/cypress/platform/xss24.html @@ -0,0 +1,109 @@ +<html> + <head> + <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" /> + <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" /> + <link + rel="stylesheet" + href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" + /> + <link + href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" + rel="stylesheet" + /> + <style> + body { + /* background: rgb(221, 208, 208); */ + /* background:#333; */ + font-family: 'Arial'; + /* font-size: 18px !important; */ + } + h1 { + color: grey; + } + .mermaid2 { + display: none; + } + .mermaid svg { + /* font-size: 18px !important; */ + } + .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; + } + </style> + <script> + function xssAttack() { + const div = document.createElement('div'); + div.id = 'the-malware'; + div.className = 'malware'; + div.innerHTML = 'XSS Succeeded'; + document.getElementsByTagName('body')[0].appendChild(div); + throw new Error('XSS Succeeded'); + } + </script> + </head> + <body> + <div>Security check</div> + <div class="flex"> + <div id="diagram" class="mermaid"></div> + <div id="res" class=""></div> + </div> + <script type="module"> + import mermaid from './mermaid.esm.mjs'; + mermaid.parseError = function (err, hash) { + // console.error('Mermaid error: ', err); + }; + mermaid.initialize({ + theme: 'forest', + arrowMarkerAbsolute: true, + // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}', + logLevel: 0, + state: { + defaultRenderer: 'dagre-wrapper', + }, + flowchart: { + // defaultRenderer: 'dagre-wrapper', + nodeSpacing: 10, + curve: 'cardinal', + htmlLabels: true, + }, + htmlLabels: false, + // gantt: { axisFormat: '%m/%d/%Y' }, + sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false }, + // sequenceDiagram: { actorMargin: 300 } // deprecated + // fontFamily: '"times", sans-serif', + // fontFamily: 'courier', + fontSize: 18, + curve: 'basis', + securityLevel: 'strict', + startOnLoad: false, + secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize'], + // themeVariables: {relationLabelColor: 'red'} + }); + function callback() { + alert('It worked'); + } + + let diagram = 'classDiagram\n'; + diagram += '`Class<img src=x on'; + diagram += 'error=xssAttack()>` <|-- `Class2<img src=x on'; + diagram += 'error=xssAttack()>`'; + + console.log(diagram); + // document.querySelector('#diagram').innerHTML = diagram; + const { svg } = await mermaid.render('diagram', diagram); + document.querySelector('#res').innerHTML = svg; + </script> + </body> +</html> diff --git a/cypress/platform/xss5.html b/cypress/platform/xss5.html index f7abf7a45c..e9855f3f7c 100644 --- a/cypress/platform/xss5.html +++ b/cypress/platform/xss5.html @@ -42,6 +42,16 @@ font-size: 72px; } </style> + <script> + function xssAttack() { + const div = document.createElement('div'); + div.id = 'the-malware'; + div.className = 'malware'; + div.innerHTML = 'XSS Succeeded'; + document.getElementsByTagName('body')[0].appendChild(div); + throw new Error('XSS Succeeded'); + } + </script> </head> <body> <div>Security check</div> @@ -84,14 +94,6 @@ function callback() { alert('It worked'); } - function xssAttack() { - const div = document.createElement('div'); - div.id = 'the-malware'; - div.className = 'malware'; - div.innerHTML = 'XSS Succeeded'; - document.getElementsByTagName('body')[0].appendChild(div); - throw new Error('XSS Succeeded'); - } let diagram = 'graph LR\n'; diagram += 'B-->D("<img onerror=location=`java'; // diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n"; diff --git a/cypress/platform/xss6.html b/cypress/platform/xss6.html index 7d7ae18d1b..bf321fc673 100644 --- a/cypress/platform/xss6.html +++ b/cypress/platform/xss6.html @@ -42,6 +42,16 @@ font-size: 72px; } </style> + <script> + function xssAttack() { + const div = document.createElement('div'); + div.id = 'the-malware'; + div.className = 'malware'; + div.innerHTML = 'XSS Succeeded'; + document.getElementsByTagName('body')[0].appendChild(div); + throw new Error('XSS Succeeded'); + } + </script> </head> <body> <div>Security check</div> diff --git a/cypress/platform/xss7.html b/cypress/platform/xss7.html index 177b4342ca..36abe7b418 100644 --- a/cypress/platform/xss7.html +++ b/cypress/platform/xss7.html @@ -42,6 +42,16 @@ font-size: 72px; } </style> + <script> + function xssAttack() { + const div = document.createElement('div'); + div.id = 'the-malware'; + div.className = 'malware'; + div.innerHTML = 'XSS Succeeded'; + document.getElementsByTagName('body')[0].appendChild(div); + throw new Error('XSS Succeeded'); + } + </script> </head> <body> <div>Security check</div> diff --git a/cypress/platform/xss8.html b/cypress/platform/xss8.html index 5852c2693f..15358b6f07 100644 --- a/cypress/platform/xss8.html +++ b/cypress/platform/xss8.html @@ -42,6 +42,16 @@ font-size: 72px; } </style> + <script> + function xssAttack() { + const div = document.createElement('div'); + div.id = 'the-malware'; + div.className = 'malware'; + div.innerHTML = 'XSS Succeeded'; + document.getElementsByTagName('body')[0].appendChild(div); + throw new Error('XSS Succeeded'); + } + </script> </head> <body> <div>Security check</div> diff --git a/cypress/platform/xss9.html b/cypress/platform/xss9.html index cf2ad1359f..a9c652b59b 100644 --- a/cypress/platform/xss9.html +++ b/cypress/platform/xss9.html @@ -42,6 +42,16 @@ font-size: 72px; } </style> + <script> + function xssAttack() { + const div = document.createElement('div'); + div.id = 'the-malware'; + div.className = 'malware'; + div.innerHTML = 'XSS Succeeded'; + document.getElementsByTagName('body')[0].appendChild(div); + throw new Error('XSS Succeeded'); + } + </script> </head> <body> <div>Security check</div> diff --git a/packages/mermaid/src/diagrams/class/classDb.ts b/packages/mermaid/src/diagrams/class/classDb.ts index b2485267a5..45ca1ed16c 100644 --- a/packages/mermaid/src/diagrams/class/classDb.ts +++ b/packages/mermaid/src/diagrams/class/classDb.ts @@ -36,7 +36,8 @@ let functions: any[] = []; const sanitizeText = (txt: string) => common.sanitizeText(txt, configApi.getConfig()); -const splitClassNameAndType = function (id: string) { +const splitClassNameAndType = function (_id: string) { + const id = common.sanitizeText(_id, configApi.getConfig()); let genericType = ''; let className = id; @@ -49,7 +50,8 @@ const splitClassNameAndType = function (id: string) { return { className: className, type: genericType }; }; -export const setClassLabel = function (id: string, label: string) { +export const setClassLabel = function (_id: string, label: string) { + const id = common.sanitizeText(_id, configApi.getConfig()); if (label) { label = sanitizeText(label); } @@ -64,22 +66,25 @@ export const setClassLabel = function (id: string, label: string) { * @param id - Id of the class to add * @public */ -export const addClass = function (id: string) { +export const addClass = function (_id: string) { + const id = common.sanitizeText(_id, configApi.getConfig()); const { className, type } = splitClassNameAndType(id); // Only add class if not exists if (Object.hasOwn(classes, className)) { return; } - - classes[className] = { - id: className, + // alert('Adding class: ' + className); + const name = common.sanitizeText(className, configApi.getConfig()); + // alert('Adding class after: ' + name); + classes[name] = { + id: name, type: type, - label: className, + label: name, cssClasses: [], methods: [], members: [], annotations: [], - domId: MERMAID_DOM_ID_PREFIX + className + '-' + classCounter, + domId: MERMAID_DOM_ID_PREFIX + name + '-' + classCounter, } as ClassNode; classCounter++; @@ -91,7 +96,8 @@ export const addClass = function (id: string) { * @param id - class ID to lookup * @public */ -export const lookUpDomId = function (id: string): string { +export const lookUpDomId = function (_id: string): string { + const id = common.sanitizeText(_id, configApi.getConfig()); if (id in classes) { return classes[id].domId; } @@ -296,7 +302,8 @@ export const setClickEvent = function (ids: string, functionName: string, functi setCssClass(ids, 'clickable'); }; -const setClickFunc = function (domId: string, functionName: string, functionArgs: string) { +const setClickFunc = function (_domId: string, functionName: string, functionArgs: string) { + const domId = common.sanitizeText(_domId, configApi.getConfig()); const config = configApi.getConfig(); if (config.securityLevel !== 'loose') { return; From 0d348b799472d2f1d2818afac9d9f936acb893b2 Mon Sep 17 00:00:00 2001 From: Subhash Halder <halder.subhash@gmail.com> Date: Fri, 29 Sep 2023 18:59:05 +0530 Subject: [PATCH 075/457] Updated code review changes --- .../chartBuilder/components/axis/index.ts | 6 +++--- .../chartBuilder/components/chartTitle.ts | 6 +++--- .../chartBuilder/components/plot/index.ts | 4 ++-- .../src/diagrams/xychart/chartBuilder/index.ts | 6 +++--- .../xychart/chartBuilder/orchestrator.ts | 10 +++++----- .../chartBuilder/textDimensionCalculator.ts | 10 ++++++---- .../mermaid/src/diagrams/xychart/xychartDb.ts | 12 +++++------- .../src/diagrams/xychart/xychartDetector.ts | 10 +++++++--- .../mermaid/src/rendering-util/createText.ts | 18 +++++++++++++----- 9 files changed, 47 insertions(+), 35 deletions(-) diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts index e4b42029da..3f1eca5476 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts @@ -1,4 +1,4 @@ -import type { SVGGType } from '../../../xychartDb.js'; +import type { Group } from '../../../../../diagram-api/types.js'; import type { AxisDataType, ChartComponent, @@ -25,9 +25,9 @@ export function getAxis( data: AxisDataType, axisConfig: XYChartAxisConfig, axisThemeConfig: XYChartAxisThemeConfig, - tmpSVGGElem: SVGGType + tmpSVGGroup: Group ): Axis { - const textDimansionCalculator = new TextDimensionCalculatorWithFont(tmpSVGGElem); + const textDimansionCalculator = new TextDimensionCalculatorWithFont(tmpSVGGroup); if (isBandAxisData(data)) { return new BandAxis( axisConfig, diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/chartTitle.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/chartTitle.ts index 19dacc3ae8..bbab56bdc1 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/chartTitle.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/chartTitle.ts @@ -1,4 +1,4 @@ -import type { SVGGType } from '../../xychartDb.js'; +import type { Group } from '../../../../diagram-api/types.js'; import type { BoundingRect, ChartComponent, @@ -84,8 +84,8 @@ export function getChartTitleComponent( chartConfig: XYChartConfig, chartData: XYChartData, chartThemeConfig: XYChartThemeConfig, - tmpSVGGElem: SVGGType + tmpSVGGroup: Group ): ChartComponent { - const textDimensionCalculator = new TextDimensionCalculatorWithFont(tmpSVGGElem); + const textDimensionCalculator = new TextDimensionCalculatorWithFont(tmpSVGGroup); return new ChartTitle(textDimensionCalculator, chartConfig, chartData, chartThemeConfig); } diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts index 94ab0127a5..2a7b4a2838 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts @@ -16,7 +16,7 @@ export interface Plot extends ChartComponent { setAxes(xAxis: Axis, yAxis: Axis): void; } -export class Plot implements Plot { +export class BasePlot implements Plot { private boundingRect: BoundingRect; private xAxis?: Axis; private yAxis?: Axis; @@ -93,5 +93,5 @@ export function getPlotComponent( chartData: XYChartData, chartThemeConfig: XYChartThemeConfig ): Plot { - return new Plot(chartConfig, chartData, chartThemeConfig); + return new BasePlot(chartConfig, chartData, chartThemeConfig); } diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts index 2dba84c2c1..192eb47f62 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts @@ -1,4 +1,4 @@ -import type { SVGGType } from '../xychartDb.js'; +import type { Group } from '../../../diagram-api/types.js'; import type { DrawableElem, XYChartConfig, XYChartData, XYChartThemeConfig } from './interfaces.js'; import { Orchestrator } from './orchestrator.js'; @@ -7,9 +7,9 @@ export class XYChartBuilder { config: XYChartConfig, chartData: XYChartData, chartThemeConfig: XYChartThemeConfig, - tmpSVGGElem: SVGGType + tmpSVGGroup: Group ): DrawableElem[] { - const orchestrator = new Orchestrator(config, chartData, chartThemeConfig, tmpSVGGElem); + const orchestrator = new Orchestrator(config, chartData, chartThemeConfig, tmpSVGGroup); return orchestrator.getDrawableElement(); } } diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/orchestrator.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/orchestrator.ts index 75c0319bf3..8338d4f411 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/orchestrator.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/orchestrator.ts @@ -1,4 +1,3 @@ -import type { SVGGType } from '../xychartDb.js'; import type { ChartComponent, DrawableElem, @@ -12,6 +11,7 @@ import { getAxis } from './components/axis/index.js'; import { getChartTitleComponent } from './components/chartTitle.js'; import type { Plot } from './components/plot/index.js'; import { getPlotComponent } from './components/plot/index.js'; +import type { Group } from '../../../diagram-api/types.js'; export class Orchestrator { private componentStore: { @@ -24,10 +24,10 @@ export class Orchestrator { private chartConfig: XYChartConfig, private chartData: XYChartData, chartThemeConfig: XYChartThemeConfig, - tmpSVGGElem: SVGGType + tmpSVGGroup: Group ) { this.componentStore = { - title: getChartTitleComponent(chartConfig, chartData, chartThemeConfig, tmpSVGGElem), + title: getChartTitleComponent(chartConfig, chartData, chartThemeConfig, tmpSVGGroup), plot: getPlotComponent(chartConfig, chartData, chartThemeConfig), xAxis: getAxis( chartData.xAxis, @@ -38,7 +38,7 @@ export class Orchestrator { tickColor: chartThemeConfig.xAxisTickColor, axisLineColor: chartThemeConfig.xAxisLineColor, }, - tmpSVGGElem + tmpSVGGroup ), yAxis: getAxis( chartData.yAxis, @@ -49,7 +49,7 @@ export class Orchestrator { tickColor: chartThemeConfig.yAxisTickColor, axisLineColor: chartThemeConfig.yAxisLineColor, }, - tmpSVGGElem + tmpSVGGroup ), }; } diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/textDimensionCalculator.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/textDimensionCalculator.ts index e9e98c9e39..8049bf5272 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/textDimensionCalculator.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/textDimensionCalculator.ts @@ -1,13 +1,13 @@ import type { Dimension } from './interfaces.js'; import { computeDimensionOfText } from '../../../rendering-util/createText.js'; -import type { SVGGType } from '../xychartDb.js'; +import type { Group } from '../../../diagram-api/types.js'; export interface TextDimensionCalculator { getMaxDimension(texts: string[], fontSize: number): Dimension; } export class TextDimensionCalculatorWithFont implements TextDimensionCalculator { - constructor(private parentGroup: SVGGType) {} + constructor(private parentGroup: Group) {} getMaxDimension(texts: string[], fontSize: number): Dimension { if (!this.parentGroup) { return { @@ -28,8 +28,10 @@ export class TextDimensionCalculatorWithFont implements TextDimensionCalculator for (const t of texts) { const bbox = computeDimensionOfText(elem, 1, t); - dimension.width = Math.max(dimension.width, bbox.width); - dimension.height = Math.max(dimension.height, bbox.height); + const width = bbox ? bbox.width : t.length * fontSize; + const height = bbox ? bbox.height : fontSize; + dimension.width = Math.max(dimension.width, width); + dimension.height = Math.max(dimension.height, height); } elem.remove(); return dimension; diff --git a/packages/mermaid/src/diagrams/xychart/xychartDb.ts b/packages/mermaid/src/diagrams/xychart/xychartDb.ts index 7271c04689..927a6aff56 100644 --- a/packages/mermaid/src/diagrams/xychart/xychartDb.ts +++ b/packages/mermaid/src/diagrams/xychart/xychartDb.ts @@ -1,4 +1,3 @@ -import type { Selection } from 'd3-selection'; import { clear as commonClear, getAccDescription, @@ -22,12 +21,11 @@ import type { XYChartThemeConfig, } from './chartBuilder/interfaces.js'; import { isBandAxisData, isLinearAxisData } from './chartBuilder/interfaces.js'; - -export type SVGGType = Selection<SVGGElement, unknown, Element | null, unknown>; +import type { Group } from '../../diagram-api/types.js'; let plotIndex = 0; -let tmpSVGGElem: SVGGType; +let tmpSVGGroup: Group; let xyChartConfig: XYChartConfig = getChartDefaultConfig(); let xyChartThemeConfig: XYChartThemeConfig = getChartDefaultThemeConfig(); @@ -77,8 +75,8 @@ function textSanitizer(text: string) { return sanitizeText(text.trim(), config); } -function setTmpSVGG(SVGG: SVGGType) { - tmpSVGGElem = SVGG; +function setTmpSVGG(SVGG: Group) { + tmpSVGGroup = SVGG; } function setOrientation(oriantation: string) { if (oriantation === 'horizontal') { @@ -186,7 +184,7 @@ function getDrawableElem(): DrawableElem[] { throw Error('No Plot to render, please provide a plot with some data'); } xyChartData.title = getDiagramTitle(); - return XYChartBuilder.build(xyChartConfig, xyChartData, xyChartThemeConfig, tmpSVGGElem); + return XYChartBuilder.build(xyChartConfig, xyChartData, xyChartThemeConfig, tmpSVGGroup); } function getChartThemeConfig() { diff --git a/packages/mermaid/src/diagrams/xychart/xychartDetector.ts b/packages/mermaid/src/diagrams/xychart/xychartDetector.ts index d200adc591..fd3fefc0a4 100644 --- a/packages/mermaid/src/diagrams/xychart/xychartDetector.ts +++ b/packages/mermaid/src/diagrams/xychart/xychartDetector.ts @@ -1,12 +1,16 @@ -import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-api/types.js'; +import type { + DiagramDetector, + DiagramLoader, + ExternalDiagramDefinition, +} from '../../diagram-api/types.js'; const id = 'xychart'; const detector: DiagramDetector = (txt) => { - return txt.match(/^\s*xychart/i) !== null; + return /^\s*xychart/i.test(txt); }; -const loader = async () => { +const loader: DiagramLoader = async () => { const { diagram } = await import('./xychartDiagram.js'); return { id, diagram }; }; diff --git a/packages/mermaid/src/rendering-util/createText.ts b/packages/mermaid/src/rendering-util/createText.ts index 864f7f34db..a15b921939 100644 --- a/packages/mermaid/src/rendering-util/createText.ts +++ b/packages/mermaid/src/rendering-util/createText.ts @@ -1,5 +1,7 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ // @ts-nocheck TODO: Fix types +import type { Group } from '../diagram-api/types.js'; +import type { D3TSpanElement, D3TextElement } from '../diagrams/common/commonTypes.js'; import { log } from '../logger.js'; import { decodeEntities } from '../mermaidAPI.js'; import { markdownToHTML, markdownToLines } from '../rendering-util/handle-markdown-text.js'; @@ -76,12 +78,18 @@ function computeWidthOfText(parentNode: any, lineHeight: number, line: MarkdownL return textLength; } -export function computeDimensionOfText(parentNode: any, lineHeight: number, text: string) { - const testElement = parentNode.append('text'); - const testSpan = createTspan(testElement, 1, lineHeight); +export function computeDimensionOfText( + parentNode: Group, + lineHeight: number, + text: string +): DOMRect | undefined { + const testElement: D3TextElement = parentNode.append('text'); + const testSpan: D3TSpanElement = createTspan(testElement, 1, lineHeight); updateTextContentAndStyles(testSpan, [{ content: text, type: 'normal' }]); - const textDimension = testSpan.node().getBoundingClientRect(); - testElement.remove(); + const textDimension: DOMRect | undefined = testSpan.node()?.getBoundingClientRect(); + if (textDimension) { + testElement.remove(); + } return textDimension; } From f931c30f0a40670a819048f46d044329d9ed88fd Mon Sep 17 00:00:00 2001 From: Dennis Ko <50710829+dennis0324@users.noreply.github.com> Date: Sat, 30 Sep 2023 23:33:51 +0900 Subject: [PATCH 076/457] docs: typo fixed --- docs/syntax/flowchart.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/syntax/flowchart.md b/docs/syntax/flowchart.md index 23b05af7f4..acd7c2db5b 100644 --- a/docs/syntax/flowchart.md +++ b/docs/syntax/flowchart.md @@ -1146,7 +1146,7 @@ The layout of the diagram is done with the renderer. The default renderer is dag Starting with Mermaid version 9.4, you can use an alternate renderer named elk. The elk renderer is better for larger and/or more complex diagrams. -The _elk_ renderer is an experimenal feature. +The _elk_ renderer is an experimental feature. You can change the renderer to elk by adding this directive: %%{init: {"flowchart": {"defaultRenderer": "elk"}} }%% From 595c63973f085c1ceb56e7828bd3e26817720881 Mon Sep 17 00:00:00 2001 From: Dennis Ko <50710829+dennis0324@users.noreply.github.com> Date: Sat, 30 Sep 2023 23:34:48 +0900 Subject: [PATCH 077/457] docs: typo fixed --- packages/mermaid/src/docs/syntax/flowchart.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mermaid/src/docs/syntax/flowchart.md b/packages/mermaid/src/docs/syntax/flowchart.md index 7946d57251..d06e75c22b 100644 --- a/packages/mermaid/src/docs/syntax/flowchart.md +++ b/packages/mermaid/src/docs/syntax/flowchart.md @@ -783,7 +783,7 @@ The layout of the diagram is done with the renderer. The default renderer is dag Starting with Mermaid version 9.4, you can use an alternate renderer named elk. The elk renderer is better for larger and/or more complex diagrams. -The _elk_ renderer is an experimenal feature. +The _elk_ renderer is an experimental feature. You can change the renderer to elk by adding this directive: ``` From bb0d549d0dc489767b240a910a6831b4a7771fd2 Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist <knsv@sveido.com> Date: Mon, 2 Oct 2023 10:00:13 +0200 Subject: [PATCH 078/457] Mermaid release v10.5.0 --- packages/mermaid/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json index 84df92fb37..5877cae7ef 100644 --- a/packages/mermaid/package.json +++ b/packages/mermaid/package.json @@ -1,6 +1,6 @@ { "name": "mermaid", - "version": "10.5.0-rc.2", + "version": "10.5.0", "description": "Markdown-ish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.", "type": "module", "module": "./dist/mermaid.core.mjs", From e6bbc71f86eec9cb38073ad6fc1938bbdd1a591d Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist <knsv@sveido.com> Date: Mon, 2 Oct 2023 10:19:52 +0200 Subject: [PATCH 079/457] Merge branch 'release/10.5.0' --- pnpm-lock.yaml | 63 ++++---------------------------------------------- 1 file changed, 4 insertions(+), 59 deletions(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 54a439843e..d2a3bdcf8b 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1,9 +1,5 @@ lockfileVersion: '6.0' -settings: - autoInstallPeers: true - excludeLinksFromLockfile: false - importers: .: @@ -481,61 +477,6 @@ importers: specifier: ^7.0.0 version: 7.0.0 - packages/mermaid/src/vitepress: - dependencies: - '@vueuse/core': - specifier: ^10.1.0 - version: 10.1.0(vue@3.3.4) - jiti: - specifier: ^1.18.2 - version: 1.18.2 - mermaid: - specifier: workspace:^ - version: link:../.. - vue: - specifier: ^3.3 - version: 3.3.4 - devDependencies: - '@iconify-json/carbon': - specifier: ^1.1.16 - version: 1.1.16 - '@unocss/reset': - specifier: ^0.55.2 - version: 0.55.2 - '@vite-pwa/vitepress': - specifier: ^0.2.0 - version: 0.2.0(vite-plugin-pwa@0.16.0) - '@vitejs/plugin-vue': - specifier: ^4.2.1 - version: 4.2.1(vite@4.3.9)(vue@3.3.4) - 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.55.2 - version: 0.55.2(postcss@8.4.27)(rollup@2.79.1)(vite@4.3.9) - unplugin-vue-components: - specifier: ^0.25.0 - version: 0.25.0(rollup@2.79.1)(vue@3.3.4) - vite: - specifier: ^4.3.9 - version: 4.3.9(@types/node@18.16.0) - vite-plugin-pwa: - specifier: ^0.16.0 - version: 0.16.0(vite@4.3.9)(workbox-build@7.0.0)(workbox-window@7.0.0) - vitepress: - specifier: 1.0.0-rc.4 - version: 1.0.0-rc.4(@algolia/client-search@4.14.2)(@types/node@18.16.0)(search-insights@2.6.0) - workbox-window: - specifier: ^7.0.0 - version: 7.0.0 - tests/webpack: dependencies: '@mermaid-js/mermaid-example-diagram': @@ -16452,3 +16393,7 @@ packages: /zwitch@2.0.2: resolution: {integrity: sha512-JZxotl7SxAJH0j7dN4pxsTV6ZLXoLdGME+PsjkL/DaBrVryK9kTGq06GfKrwcSOqypP+fdXGoCHE36b99fWVoA==} dev: true + +settings: + autoInstallPeers: true + excludeLinksFromLockfile: false From b83fff2fa0838bc5353a25bea32220a7f7f17e58 Mon Sep 17 00:00:00 2001 From: knsv <knsv@users.noreply.github.com> Date: Mon, 2 Oct 2023 08:24:42 +0000 Subject: [PATCH 080/457] Update docs --- docs/ecosystem/integrations-community.md | 1 + docs/intro/examples.md | 227 ----------------------- 2 files changed, 1 insertion(+), 227 deletions(-) delete mode 100644 docs/intro/examples.md diff --git a/docs/ecosystem/integrations-community.md b/docs/ecosystem/integrations-community.md index 81af789aee..b03e5581c7 100644 --- a/docs/ecosystem/integrations-community.md +++ b/docs/ecosystem/integrations-community.md @@ -39,6 +39,7 @@ Below are a list of community plugins and integrations created with Mermaid. - [Mermaid plugin for GitBook](https://github.com/wwformat/gitbook-plugin-mermaid-pdf) - [LiveBook](https://livebook.dev) ✅ - [Atlassian Products](https://www.atlassian.com) + - [Mermaid Live Editor for Confluence Cloud](https://marketplace.atlassian.com/apps/1231571/mermaid-live-editor-for-confluence?hosting=cloud&tab=overview) - [Mermaid Plugin for Confluence](https://marketplace.atlassian.com/apps/1214124/mermaid-plugin-for-confluence?hosting=server&tab=overview) - [CloudScript.io Addon](https://marketplace.atlassian.com/apps/1219878/cloudscript-io-mermaid-addon?hosting=cloud&tab=overview) - [Auto convert diagrams in Jira](https://github.com/coddingtonbear/jirafs-mermaid) diff --git a/docs/intro/examples.md b/docs/intro/examples.md deleted file mode 100644 index d9bb187e1e..0000000000 --- a/docs/intro/examples.md +++ /dev/null @@ -1,227 +0,0 @@ -> **Warning** -> -> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. -> -> ## Please edit the corresponding file in [/packages/mermaid/src/docs/intro/examples.md](../../packages/mermaid/src/docs/intro/examples.md). - -## Diagram Types - -### [Flowchart](../syntax/flowchart.md?id=flowcharts-basic-syntax) - -```mermaid-example -graph TD; - A-->B; - A-->C; - B-->D; - C-->D; -``` - -```mermaid -graph TD; - A-->B; - A-->C; - B-->D; - C-->D; -``` - -### [Sequence diagram](../syntax/sequenceDiagram.md) - -```mermaid-example -sequenceDiagram - participant Alice - participant Bob - Alice->>John: Hello John, how are you? - loop Healthcheck - John->>John: Fight against hypochondria - end - Note right of John: Rational thoughts <br/>prevail! - John-->>Alice: Great! - John->>Bob: How about you? - Bob-->>John: Jolly good! -``` - -```mermaid -sequenceDiagram - participant Alice - participant Bob - Alice->>John: Hello John, how are you? - loop Healthcheck - John->>John: Fight against hypochondria - end - Note right of John: Rational thoughts <br/>prevail! - John-->>Alice: Great! - John->>Bob: How about you? - Bob-->>John: Jolly good! -``` - -### [Gantt diagram](../syntax/gantt.md) - -```mermaid-example -gantt -dateFormat YYYY-MM-DD -title Adding GANTT diagram to mermaid -excludes weekdays 2014-01-10 - -section A section -Completed task :done, des1, 2014-01-06,2014-01-08 -Active task :active, des2, 2014-01-09, 3d -Future task : des3, after des2, 5d -Future task2 : des4, after des3, 5d -``` - -```mermaid -gantt -dateFormat YYYY-MM-DD -title Adding GANTT diagram to mermaid -excludes weekdays 2014-01-10 - -section A section -Completed task :done, des1, 2014-01-06,2014-01-08 -Active task :active, des2, 2014-01-09, 3d -Future task : des3, after des2, 5d -Future task2 : des4, after des3, 5d -``` - -### [Class diagram](../syntax/classDiagram.md) - -```mermaid-example -classDiagram -Class01 <|-- AveryLongClass : Cool -Class03 *-- Class04 -Class05 o-- Class06 -Class07 .. Class08 -Class09 --> C2 : Where am i? -Class09 --* C3 -Class09 --|> Class07 -Class07 : equals() -Class07 : Object[] elementData -Class01 : size() -Class01 : int chimp -Class01 : int gorilla -Class08 <--> C2: Cool label -``` - -```mermaid -classDiagram -Class01 <|-- AveryLongClass : Cool -Class03 *-- Class04 -Class05 o-- Class06 -Class07 .. Class08 -Class09 --> C2 : Where am i? -Class09 --* C3 -Class09 --|> Class07 -Class07 : equals() -Class07 : Object[] elementData -Class01 : size() -Class01 : int chimp -Class01 : int gorilla -Class08 <--> C2: Cool label -``` - -### [Git graph](../syntax/gitgraph.md) - -```mermaid-example - gitGraph - commit - commit - branch develop - commit - commit - commit - checkout main - commit - commit -``` - -```mermaid - gitGraph - commit - commit - branch develop - commit - commit - commit - checkout main - commit - commit -``` - -### [Entity Relationship Diagram - :exclamation: experimental](../syntax/entityRelationshipDiagram.md) - -```mermaid-example -erDiagram - CUSTOMER ||--o{ ORDER : places - ORDER ||--|{ LINE-ITEM : contains - CUSTOMER }|..|{ DELIVERY-ADDRESS : uses - -``` - -```mermaid -erDiagram - CUSTOMER ||--o{ ORDER : places - ORDER ||--|{ LINE-ITEM : contains - CUSTOMER }|..|{ DELIVERY-ADDRESS : uses - -``` - -### [User Journey Diagram](../syntax/userJourney.md) - -```mermaid-example -journey - title My working day - section Go to work - Make tea: 5: Me - Go upstairs: 3: Me - Do work: 1: Me, Cat - section Go home - Go downstairs: 5: Me - Sit down: 5: Me -``` - -```mermaid -journey - title My working day - section Go to work - Make tea: 5: Me - Go upstairs: 3: Me - Do work: 1: Me, Cat - section Go home - Go downstairs: 5: Me - Sit down: 5: Me -``` - -### [Quadrant Chart](../syntax/quadrantChart.md) - -```mermaid-example -quadrantChart - title Reach and engagement of campaigns - x-axis Low Reach --> High Reach - y-axis Low Engagement --> High Engagement - quadrant-1 We should expand - quadrant-2 Need to promote - quadrant-3 Re-evaluate - quadrant-4 May be improved - Campaign A: [0.3, 0.6] - Campaign B: [0.45, 0.23] - Campaign C: [0.57, 0.69] - Campaign D: [0.78, 0.34] - Campaign E: [0.40, 0.34] - Campaign F: [0.35, 0.78] -``` - -```mermaid -quadrantChart - title Reach and engagement of campaigns - x-axis Low Reach --> High Reach - y-axis Low Engagement --> High Engagement - quadrant-1 We should expand - quadrant-2 Need to promote - quadrant-3 Re-evaluate - quadrant-4 May be improved - Campaign A: [0.3, 0.6] - Campaign B: [0.45, 0.23] - Campaign C: [0.57, 0.69] - Campaign D: [0.78, 0.34] - Campaign E: [0.40, 0.34] - Campaign F: [0.35, 0.78] -``` From 0239e49d92bf65f5d5e2da4f47eb9d6554b5bcdb Mon Sep 17 00:00:00 2001 From: 0xflotus <0xflotus@gmail.com> Date: Mon, 2 Oct 2023 11:16:51 +0200 Subject: [PATCH 081/457] docs: fixed typo --- packages/mermaid/src/docs/syntax/flowchart.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mermaid/src/docs/syntax/flowchart.md b/packages/mermaid/src/docs/syntax/flowchart.md index d06e75c22b..9327bc4acc 100644 --- a/packages/mermaid/src/docs/syntax/flowchart.md +++ b/packages/mermaid/src/docs/syntax/flowchart.md @@ -293,7 +293,7 @@ flowchart TB A & B--> C & D ``` -If you describe the same diagram using the the basic syntax, it will take four lines. A +If you describe the same diagram using the basic syntax, it will take four lines. A word of warning, one could go overboard with this making the flowchart harder to read in markdown form. The Swedish word `lagom` comes to mind. It means, not too much and not too little. This goes for expressive syntaxes as well. From 42f8990834757d9bf52f46d87714125746e779e0 Mon Sep 17 00:00:00 2001 From: Subhash Halder <halder.subhash@gmail.com> Date: Mon, 2 Oct 2023 20:48:04 +0530 Subject: [PATCH 082/457] Changed requested by code review --- .../src/diagrams/xychart/xychartDetector.ts | 2 +- .../mermaid/src/schemas/config.schema.yaml | 24 +++++++++---------- 2 files changed, 13 insertions(+), 13 deletions(-) diff --git a/packages/mermaid/src/diagrams/xychart/xychartDetector.ts b/packages/mermaid/src/diagrams/xychart/xychartDetector.ts index fd3fefc0a4..08be05b01e 100644 --- a/packages/mermaid/src/diagrams/xychart/xychartDetector.ts +++ b/packages/mermaid/src/diagrams/xychart/xychartDetector.ts @@ -7,7 +7,7 @@ import type { const id = 'xychart'; const detector: DiagramDetector = (txt) => { - return /^\s*xychart/i.test(txt); + return /^\s*xychart-beta/.test(txt); }; const loader: DiagramLoader = async () => { diff --git a/packages/mermaid/src/schemas/config.schema.yaml b/packages/mermaid/src/schemas/config.schema.yaml index 7ba3ae18b2..69cd86a685 100644 --- a/packages/mermaid/src/schemas/config.schema.yaml +++ b/packages/mermaid/src/schemas/config.schema.yaml @@ -1009,12 +1009,12 @@ $defs: # JSON Schema definition (maybe we should move these to a seperate file) default: true labelFontSize: description: font size of the axis labels (tick text) - type: integer + type: number default: 14 minimum: 1 labelPadding: description: top and bottom space from axis label (tick text) - type: integer + type: number default: 5 minimum: 0 showTitle: @@ -1023,12 +1023,12 @@ $defs: # JSON Schema definition (maybe we should move these to a seperate file) default: true titleFontSize: description: font size of the axis title - type: integer + type: number default: 16 minimum: 1 titlePadding: description: top and bottom space from axis title - type: integer + type: number default: 5 minimum: 0 showTick: @@ -1037,12 +1037,12 @@ $defs: # JSON Schema definition (maybe we should move these to a seperate file) default: true tickLength: description: length of the axis tick lines - type: integer + type: number default: 5 minimum: 1 tickWidth: description: width of the axis tick lines - type: integer + type: number default: 2 minimum: 1 showAxisLine: @@ -1051,7 +1051,7 @@ $defs: # JSON Schema definition (maybe we should move these to a seperate file) default: true axisLineWidth: description: Width of the axis line - type: integer + type: number default: 2 minimum: 1 @@ -1074,22 +1074,22 @@ $defs: # JSON Schema definition (maybe we should move these to a seperate file) properties: width: description: width of the chart - type: integer + type: number default: 700 minimum: 1 height: description: height of the chart - type: integer + type: number default: 500 minimum: 1 titleFontSize: description: Font size of the chart title - type: integer + type: number default: 20 minimum: 1 titlePadding: description: Top and bottom space from the chart title - type: integer + type: number default: 10 minimum: 0 showTitle: @@ -1108,7 +1108,7 @@ $defs: # JSON Schema definition (maybe we should move these to a seperate file) default: 'vertical' plotReservedSpacePercent: description: Minimum percent of space plots of the chart will take - type: integer + type: number default: 50 minimum: 30 From 7f9dfa17f3bf7c7aad95e8a0a00c4c29084a32b2 Mon Sep 17 00:00:00 2001 From: subhash-halder <subhash-halder@users.noreply.github.com> Date: Mon, 2 Oct 2023 15:27:16 +0000 Subject: [PATCH 083/457] Update docs --- docs/ecosystem/integrations-community.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/docs/ecosystem/integrations-community.md b/docs/ecosystem/integrations-community.md index b03e5581c7..14cb805a29 100644 --- a/docs/ecosystem/integrations-community.md +++ b/docs/ecosystem/integrations-community.md @@ -39,6 +39,8 @@ Below are a list of community plugins and integrations created with Mermaid. - [Mermaid plugin for GitBook](https://github.com/wwformat/gitbook-plugin-mermaid-pdf) - [LiveBook](https://livebook.dev) ✅ - [Atlassian Products](https://www.atlassian.com) + - [Mermaid Charts & Diagrams for Confluence](https://marketplace.atlassian.com/apps/1222572/) + - [Mermaid Charts & Diagrams for Jira](https://marketplace.atlassian.com/apps/1224537/) - [Mermaid Live Editor for Confluence Cloud](https://marketplace.atlassian.com/apps/1231571/mermaid-live-editor-for-confluence?hosting=cloud&tab=overview) - [Mermaid Plugin for Confluence](https://marketplace.atlassian.com/apps/1214124/mermaid-plugin-for-confluence?hosting=server&tab=overview) - [CloudScript.io Addon](https://marketplace.atlassian.com/apps/1219878/cloudscript-io-mermaid-addon?hosting=cloud&tab=overview) @@ -47,7 +49,7 @@ Below are a list of community plugins and integrations created with Mermaid. - [Mermaid Macro](https://www.redmine.org/plugins/redmine_mermaid_macro) - [redmine-mermaid](https://github.com/styz/redmine_mermaid) - [markdown-for-mermaid-plugin](https://github.com/jamieh-mongolian/markdown-for-mermaid-plugin) -- [JetBrains IDE eg Pycharm](https://www.jetbrains.com/go/guide/tips/mermaid-js-support-in-markdown/) +- [Mermaid Plugin for JetBrains IDEs](https://plugins.jetbrains.com/plugin/20146-mermaid) - [mermerd](https://github.com/KarnerTh/mermerd) - Visual Studio Code [Polyglot Interactive Notebooks](https://github.com/dotnet/interactive#net-interactive) From 459f5a58a3e3c094c4020415beb772210cf22194 Mon Sep 17 00:00:00 2001 From: Steph <35910788+huynhicode@users.noreply.github.com> Date: Wed, 4 Oct 2023 00:32:30 -0700 Subject: [PATCH 084/457] Docs: Add Product Hunt info (#4900) * update card and announcements page * update integrations link and add product hunt badge * Revert navbar link change --------- Co-authored-by: Sidharth Vinod <sidharthv96@gmail.com> --- docs/ecosystem/mermaid-chart.md | 4 ++++ docs/news/announcements.md | 16 +++++++++++++--- .../mermaid/src/docs/ecosystem/mermaid-chart.md | 4 ++++ packages/mermaid/src/docs/index.md | 7 ++++--- packages/mermaid/src/docs/news/announcements.md | 16 +++++++++++++--- 5 files changed, 38 insertions(+), 9 deletions(-) diff --git a/docs/ecosystem/mermaid-chart.md b/docs/ecosystem/mermaid-chart.md index 5a0fdc18d9..28c17e9d3f 100644 --- a/docs/ecosystem/mermaid-chart.md +++ b/docs/ecosystem/mermaid-chart.md @@ -6,6 +6,10 @@ # Mermaid Chart +<br /> + +<a href="https://www.producthunt.com/posts/mermaid-chart?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-mermaid-chart" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=416671&theme=light" alt="Mermaid Chart - A smarter way to create diagrams | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a> + ## About [Mermaid Chart](https://www.mermaidchart.com) was born out of the Mermaid open source project and was founded by Knut Sveidqvist together with Open Core Ventures. The lead developers from Mermaid have joined the company and there is a strong connection between the project we all love and Mermaid Chart. Mermaid Chart brings resources to the open source development of Mermaid and makes it possible to work with Mermaid professionally. diff --git a/docs/news/announcements.md b/docs/news/announcements.md index 19568afa46..98ca64421e 100644 --- a/docs/news/announcements.md +++ b/docs/news/announcements.md @@ -6,8 +6,18 @@ # Announcements -## [How to Make a Git Graph with Mermaid Chart](https://www.mermaidchart.com/blog/posts/how-to-make-a-git-graph-with-mermaid-chart/) +<br /> -22 September 2023 · 7 mins +<a href="https://www.producthunt.com/posts/mermaid-chart?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-mermaid-chart" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=416671&theme=light" alt="Mermaid Chart - A smarter way to create diagrams | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a> -A git graph is one of the more useful forms of diagrams for developers and DevOps professionals. +## Calling all fans of Mermaid and Mermaid Chart! 🎉 + +We’ve officially made our Product Hunt debut, and would love any and all support from the community! + +[Click here](https://www.producthunt.com/posts/mermaid-chart?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-mermaid-chart) to check out our Product Hunt launch. + +Feel free to drop us a comment and let us know what you think. All new sign ups will receive a 30-day free trial of our Pro subscription, plus 25% off your first year. + +We’re on a mission to make text-based diagramming fun again. And we need your help to make that happen. + +Your support means the world to us. Thank you for being part of the diagramming movement. diff --git a/packages/mermaid/src/docs/ecosystem/mermaid-chart.md b/packages/mermaid/src/docs/ecosystem/mermaid-chart.md index 7312299b41..7d0e90024e 100644 --- a/packages/mermaid/src/docs/ecosystem/mermaid-chart.md +++ b/packages/mermaid/src/docs/ecosystem/mermaid-chart.md @@ -4,6 +4,10 @@ outline: 'deep' # shows all h3 headings in outline in Vitepress # Mermaid Chart +<br /> + +<a href="https://www.producthunt.com/posts/mermaid-chart?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-mermaid-chart" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=416671&theme=light" alt="Mermaid Chart - A smarter way to create diagrams | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a> + ## About [Mermaid Chart](https://www.mermaidchart.com) was born out of the Mermaid open source project and was founded by Knut Sveidqvist together with Open Core Ventures. The lead developers from Mermaid have joined the company and there is a strong connection between the project we all love and Mermaid Chart. Mermaid Chart brings resources to the open source development of Mermaid and makes it possible to work with Mermaid professionally. diff --git a/packages/mermaid/src/docs/index.md b/packages/mermaid/src/docs/index.md index 8e92edd114..378e9dfaba 100644 --- a/packages/mermaid/src/docs/index.md +++ b/packages/mermaid/src/docs/index.md @@ -9,6 +9,7 @@ hero: name: Mermaid text: Diagramming and charting tool tagline: JavaScript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically. + image: src: /mermaid-logo.svg alt: Mermaid @@ -30,7 +31,7 @@ features: - title: 🏆 Award winning! details: 2019 JavaScript Open Source Award winner for "The Most Exciting Use of Technology". link: https://osawards.com/javascript/2019 - - title: 🥰 Mermaid + Mermaid Chart - details: Mermaid Chart is a major supporter of the Mermaid project. - link: https://www.mermaidchart.com/ + - title: 🎉 We are on Product Hunt! + details: We would love any and all support from the Mermaid community! + link: https://www.producthunt.com/posts/mermaid-chart --- diff --git a/packages/mermaid/src/docs/news/announcements.md b/packages/mermaid/src/docs/news/announcements.md index 8a8d000a5e..f14aab785c 100644 --- a/packages/mermaid/src/docs/news/announcements.md +++ b/packages/mermaid/src/docs/news/announcements.md @@ -1,7 +1,17 @@ # Announcements -## [How to Make a Git Graph with Mermaid Chart](https://www.mermaidchart.com/blog/posts/how-to-make-a-git-graph-with-mermaid-chart/) +<br /> -22 September 2023 · 7 mins +<a href="https://www.producthunt.com/posts/mermaid-chart?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-mermaid-chart" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=416671&theme=light" alt="Mermaid Chart - A smarter way to create diagrams | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a> -A git graph is one of the more useful forms of diagrams for developers and DevOps professionals. +## Calling all fans of Mermaid and Mermaid Chart! 🎉 + +We’ve officially made our Product Hunt debut, and would love any and all support from the community! + +[Click here](https://www.producthunt.com/posts/mermaid-chart?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-mermaid-chart) to check out our Product Hunt launch. + +Feel free to drop us a comment and let us know what you think. All new sign ups will receive a 30-day free trial of our Pro subscription, plus 25% off your first year. + +We’re on a mission to make text-based diagramming fun again. And we need your help to make that happen. + +Your support means the world to us. Thank you for being part of the diagramming movement. From 6ef2b1ce1e8b62874b3919b3369f1d19dfdead42 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod <sidharthv96@gmail.com> Date: Wed, 4 Oct 2023 13:06:07 +0530 Subject: [PATCH 085/457] Fix docs --- docs/ecosystem/integrations-community.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/docs/ecosystem/integrations-community.md b/docs/ecosystem/integrations-community.md index b03e5581c7..14cb805a29 100644 --- a/docs/ecosystem/integrations-community.md +++ b/docs/ecosystem/integrations-community.md @@ -39,6 +39,8 @@ Below are a list of community plugins and integrations created with Mermaid. - [Mermaid plugin for GitBook](https://github.com/wwformat/gitbook-plugin-mermaid-pdf) - [LiveBook](https://livebook.dev) ✅ - [Atlassian Products](https://www.atlassian.com) + - [Mermaid Charts & Diagrams for Confluence](https://marketplace.atlassian.com/apps/1222572/) + - [Mermaid Charts & Diagrams for Jira](https://marketplace.atlassian.com/apps/1224537/) - [Mermaid Live Editor for Confluence Cloud](https://marketplace.atlassian.com/apps/1231571/mermaid-live-editor-for-confluence?hosting=cloud&tab=overview) - [Mermaid Plugin for Confluence](https://marketplace.atlassian.com/apps/1214124/mermaid-plugin-for-confluence?hosting=server&tab=overview) - [CloudScript.io Addon](https://marketplace.atlassian.com/apps/1219878/cloudscript-io-mermaid-addon?hosting=cloud&tab=overview) @@ -47,7 +49,7 @@ Below are a list of community plugins and integrations created with Mermaid. - [Mermaid Macro](https://www.redmine.org/plugins/redmine_mermaid_macro) - [redmine-mermaid](https://github.com/styz/redmine_mermaid) - [markdown-for-mermaid-plugin](https://github.com/jamieh-mongolian/markdown-for-mermaid-plugin) -- [JetBrains IDE eg Pycharm](https://www.jetbrains.com/go/guide/tips/mermaid-js-support-in-markdown/) +- [Mermaid Plugin for JetBrains IDEs](https://plugins.jetbrains.com/plugin/20146-mermaid) - [mermerd](https://github.com/KarnerTh/mermerd) - Visual Studio Code [Polyglot Interactive Notebooks](https://github.com/dotnet/interactive#net-interactive) From d17c75222935fc26d60c6547ae2d8ea1db3fe5f5 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod <sidharthv96@gmail.com> Date: Wed, 4 Oct 2023 14:06:43 +0530 Subject: [PATCH 086/457] Add TopBar --- docs/ecosystem/integrations-community.md | 4 +++- .../src/docs/.vitepress/components/TopBar.vue | 19 +++++++++++++++++++ .../src/docs/.vitepress/theme/index.ts | 4 ++++ 3 files changed, 26 insertions(+), 1 deletion(-) create mode 100644 packages/mermaid/src/docs/.vitepress/components/TopBar.vue diff --git a/docs/ecosystem/integrations-community.md b/docs/ecosystem/integrations-community.md index b03e5581c7..bdfc7e441d 100644 --- a/docs/ecosystem/integrations-community.md +++ b/docs/ecosystem/integrations-community.md @@ -4,7 +4,9 @@ > > ## Please edit the corresponding file in [/packages/mermaid/src/docs/ecosystem/integrations-community.md](../../packages/mermaid/src/docs/ecosystem/integrations-community.md). -# Integrations - community +# Integrations + +## Official integration: [Mermaid Chart](./mermaid-chart.md) We're excited about the growth of the Mermaid community, and the number of plugins and integrations that have been created with Mermaid. diff --git a/packages/mermaid/src/docs/.vitepress/components/TopBar.vue b/packages/mermaid/src/docs/.vitepress/components/TopBar.vue new file mode 100644 index 0000000000..6b0dcb44e4 --- /dev/null +++ b/packages/mermaid/src/docs/.vitepress/components/TopBar.vue @@ -0,0 +1,19 @@ +<template> + <div + class="w-full top-bar bg-gradient-to-r from-[#bd34fe] to-[#ff3670] flex items-center justify-center p-1" + > + We've made our + <a + href="https://www.producthunt.com/posts/mermaid-chart?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-mermaid-chart" + target="_blank" + class="unstyled font-semibold text-lg underline px-1" + >Product Hunt</a + > + debut!   + <a + href="https://www.producthunt.com/posts/mermaid-chart?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-mermaid-chart" + target="_blank" + >Show us some love and help spread the word</a + >, plus receive 25% off on annual Pro subscription! + </div> +</template> diff --git a/packages/mermaid/src/docs/.vitepress/theme/index.ts b/packages/mermaid/src/docs/.vitepress/theme/index.ts index ba1ac9bdb8..ae626558db 100644 --- a/packages/mermaid/src/docs/.vitepress/theme/index.ts +++ b/packages/mermaid/src/docs/.vitepress/theme/index.ts @@ -6,6 +6,9 @@ import Mermaid from './Mermaid.vue'; import Contributors from '../components/Contributors.vue'; // @ts-ignore import HomePage from '../components/HomePage.vue'; +// @ts-ignore +import TopBar from '../components/TopBar.vue'; + import { getRedirect } from './redirect.js'; import { h } from 'vue'; @@ -18,6 +21,7 @@ export default { ...DefaultTheme, Layout() { return h(Theme.Layout, null, { + 'home-hero-before': () => h(TopBar), 'home-features-after': () => h(HomePage), }); }, From cda7a615261f8dde84359bdb6992ce0d5addf38f Mon Sep 17 00:00:00 2001 From: Sidharth Vinod <sidharthv96@gmail.com> Date: Wed, 4 Oct 2023 14:07:08 +0530 Subject: [PATCH 087/457] Add MC to integrations --- packages/mermaid/src/docs/ecosystem/integrations-community.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/mermaid/src/docs/ecosystem/integrations-community.md b/packages/mermaid/src/docs/ecosystem/integrations-community.md index c26ea4373e..cd4cffe9b6 100644 --- a/packages/mermaid/src/docs/ecosystem/integrations-community.md +++ b/packages/mermaid/src/docs/ecosystem/integrations-community.md @@ -2,7 +2,9 @@ outline: 'deep' # shows all h3 headings in outline in Vitepress --- -# Integrations - community +# Integrations + +## Official integration: [Mermaid Chart](./mermaid-chart.md) We're excited about the growth of the Mermaid community, and the number of plugins and integrations that have been created with Mermaid. From a6bb1ea28ce6700bb149c674b1ea3a5b4368ff4d Mon Sep 17 00:00:00 2001 From: Sidharth Vinod <sidharthv96@gmail.com> Date: Wed, 4 Oct 2023 14:09:34 +0530 Subject: [PATCH 088/457] Fix TopBar --- .../src/docs/.vitepress/components/TopBar.vue | 15 +++++---------- 1 file changed, 5 insertions(+), 10 deletions(-) diff --git a/packages/mermaid/src/docs/.vitepress/components/TopBar.vue b/packages/mermaid/src/docs/.vitepress/components/TopBar.vue index 6b0dcb44e4..d0a202c589 100644 --- a/packages/mermaid/src/docs/.vitepress/components/TopBar.vue +++ b/packages/mermaid/src/docs/.vitepress/components/TopBar.vue @@ -1,19 +1,14 @@ <template> <div - class="w-full top-bar bg-gradient-to-r from-[#bd34fe] to-[#ff3670] flex items-center justify-center p-1" + class="w-full top-bar bg-gradient-to-r from-[#bd34fe] to-[#ff3670] flex items-center text-center justify-center p-1 text-white" > - We've made our <a href="https://www.producthunt.com/posts/mermaid-chart?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-mermaid-chart" target="_blank" - class="unstyled font-semibold text-lg underline px-1" - >Product Hunt</a > - debut!   - <a - href="https://www.producthunt.com/posts/mermaid-chart?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-mermaid-chart" - target="_blank" - >Show us some love and help spread the word</a - >, plus receive 25% off on annual Pro subscription! + We've made our Product Hunt debut!   + <span class="underline">Show us some love and help spread the word</span>, plus receive 25% + off on annual Pro subscription!</a + > </div> </template> From f49e8c5784d07c0eacc70d40c46c3e2156908bb2 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod <sidharthv96@gmail.com> Date: Wed, 4 Oct 2023 14:19:19 +0530 Subject: [PATCH 089/457] Fix release version --- packages/mermaid/package.json | 2 +- packages/mermaid/scripts/update-release-version.mts | 1 + packages/mermaid/src/docs/config/configuration.md | 2 +- packages/mermaid/src/docs/config/directives.md | 2 +- packages/mermaid/src/docs/syntax/entityRelationshipDiagram.md | 4 ++-- 5 files changed, 6 insertions(+), 5 deletions(-) diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json index 5877cae7ef..10bb672706 100644 --- a/packages/mermaid/package.json +++ b/packages/mermaid/package.json @@ -40,7 +40,7 @@ "types:verify-config": "ts-node-esm scripts/create-types-from-json-schema.mts --verify", "checkCircle": "npx madge --circular ./src", "release": "pnpm build", - "prepublishOnly": "cpy '../../README.*' ./ --cwd=. && pnpm -w run build" + "prepublishOnly": "cpy '../../README.*' ./ --cwd=. && pnpm docs:release-version && pnpm -w run build" }, "repository": { "type": "git", diff --git a/packages/mermaid/scripts/update-release-version.mts b/packages/mermaid/scripts/update-release-version.mts index 7f292f21b2..abed18bc9a 100644 --- a/packages/mermaid/scripts/update-release-version.mts +++ b/packages/mermaid/scripts/update-release-version.mts @@ -22,6 +22,7 @@ const main = async () => { const sourceDirGlob = posix.join('.', SOURCE_DOCS_DIR, '**'); const mdFileGlobs = getGlobs([posix.join(sourceDirGlob, '*.md')]); mdFileGlobs.push('!**/community/development.md'); + mdFileGlobs.push('!**/community/code.md'); const mdFiles = await getFilesFromGlobs(mdFileGlobs); mdFiles.sort(); const mdFilesWithPlaceholder: string[] = []; diff --git a/packages/mermaid/src/docs/config/configuration.md b/packages/mermaid/src/docs/config/configuration.md index e52f2c6d5d..dcbdcf8757 100644 --- a/packages/mermaid/src/docs/config/configuration.md +++ b/packages/mermaid/src/docs/config/configuration.md @@ -4,7 +4,7 @@ When mermaid starts, configuration is extracted to determine a configuration to - The default configuration - Overrides at the site level are set by the initialize call, and will be applied to all diagrams in the site/app. The term for this is the **siteConfig**. -- Frontmatter (v<MERMAID_RELEASE_VERSION>+) - diagram authors can update select configuration parameters in the frontmatter of the diagram. These are applied to the render config. +- Frontmatter (v10.5.0+) - diagram authors can update select configuration parameters in the frontmatter of the diagram. These are applied to the render config. - Directives (Deprecated by Frontmatter) - diagram authors can update select configuration parameters directly in the diagram code via directives. These are applied to the render config. **The render config** is configuration that is used when rendering by applying these configurations. diff --git a/packages/mermaid/src/docs/config/directives.md b/packages/mermaid/src/docs/config/directives.md index 7763eb0732..0e211161cc 100644 --- a/packages/mermaid/src/docs/config/directives.md +++ b/packages/mermaid/src/docs/config/directives.md @@ -1,7 +1,7 @@ # Directives ```warning -Directives are deprecated from v<MERMAID_RELEASE_VERSION>. Please use the `config` key in frontmatter to pass configuration. See [Configuration](./configuration.md) for more details. +Directives are deprecated from v10.5.0. Please use the `config` key in frontmatter to pass configuration. See [Configuration](./configuration.md) for more details. ``` ## Directives diff --git a/packages/mermaid/src/docs/syntax/entityRelationshipDiagram.md b/packages/mermaid/src/docs/syntax/entityRelationshipDiagram.md index 82c6f1e488..1767e92d7c 100644 --- a/packages/mermaid/src/docs/syntax/entityRelationshipDiagram.md +++ b/packages/mermaid/src/docs/syntax/entityRelationshipDiagram.md @@ -56,7 +56,7 @@ Mermaid syntax for ER diagrams is compatible with PlantUML, with an extension to Where: -- `first-entity` is the name of an entity. Names must begin with an alphabetic character or an underscore (from v<MERMAID_RELEASE_VERSION>+), and may also contain digits and hyphens. +- `first-entity` is the name of an entity. Names must begin with an alphabetic character or an underscore (from v10.5.0+), and may also contain digits and hyphens. - `relationship` describes the way that both entities inter-relate. See below. - `second-entity` is the name of the other entity. - `relationship-label` describes the relationship from the perspective of the first entity. @@ -144,7 +144,7 @@ erDiagram The `type` values must begin with an alphabetic character and may contain digits, hyphens, underscores, parentheses and square brackets. The `name` values follow a similar format to `type`, but may start with an asterisk as another option to indicate an attribute is a primary key. Other than that, there are no restrictions, and there is no implicit set of valid data types. -### Entity Name Aliases (v<MERMAID_RELEASE_VERSION>+) +### Entity Name Aliases (v10.5.0+) An alias can be added to an entity using square brackets. If provided, the alias will be showed in the diagram instead of the entity name. From 345d0d0bd2cb93ec823fe0fd6ee0f6caf1cd5256 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod <sidharthv96@gmail.com> Date: Wed, 4 Oct 2023 14:26:03 +0530 Subject: [PATCH 090/457] Fix lint issue --- packages/mermaid/scripts/update-release-version.mts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/mermaid/scripts/update-release-version.mts b/packages/mermaid/scripts/update-release-version.mts index abed18bc9a..a5943b37bd 100644 --- a/packages/mermaid/scripts/update-release-version.mts +++ b/packages/mermaid/scripts/update-release-version.mts @@ -21,8 +21,7 @@ const versionPlaceholder = '<MERMAID_RELEASE_VERSION>'; const main = async () => { const sourceDirGlob = posix.join('.', SOURCE_DOCS_DIR, '**'); const mdFileGlobs = getGlobs([posix.join(sourceDirGlob, '*.md')]); - mdFileGlobs.push('!**/community/development.md'); - mdFileGlobs.push('!**/community/code.md'); + mdFileGlobs.push('!**/community/development.md', '!**/community/code.md'); const mdFiles = await getFilesFromGlobs(mdFileGlobs); mdFiles.sort(); const mdFilesWithPlaceholder: string[] = []; From 22b783e31dc74d6288f3200b37eacf2cff6e1fb3 Mon Sep 17 00:00:00 2001 From: sidharthv96 <sidharthv96@users.noreply.github.com> Date: Wed, 4 Oct 2023 09:01:57 +0000 Subject: [PATCH 091/457] Update docs --- docs/config/configuration.md | 2 +- docs/config/directives.md | 2 +- docs/syntax/entityRelationshipDiagram.md | 4 ++-- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/config/configuration.md b/docs/config/configuration.md index 1e85427ea7..eb703a9d29 100644 --- a/docs/config/configuration.md +++ b/docs/config/configuration.md @@ -10,7 +10,7 @@ When mermaid starts, configuration is extracted to determine a configuration to - The default configuration - Overrides at the site level are set by the initialize call, and will be applied to all diagrams in the site/app. The term for this is the **siteConfig**. -- Frontmatter (v\<MERMAID_RELEASE_VERSION>+) - diagram authors can update select configuration parameters in the frontmatter of the diagram. These are applied to the render config. +- Frontmatter (v10.5.0+) - diagram authors can update select configuration parameters in the frontmatter of the diagram. These are applied to the render config. - Directives (Deprecated by Frontmatter) - diagram authors can update select configuration parameters directly in the diagram code via directives. These are applied to the render config. **The render config** is configuration that is used when rendering by applying these configurations. diff --git a/docs/config/directives.md b/docs/config/directives.md index 943d512173..533126263a 100644 --- a/docs/config/directives.md +++ b/docs/config/directives.md @@ -7,7 +7,7 @@ # Directives > **Warning** -> Directives are deprecated from v\<MERMAID_RELEASE_VERSION>. Please use the `config` key in frontmatter to pass configuration. See [Configuration](./configuration.md) for more details. +> Directives are deprecated from v10.5.0. Please use the `config` key in frontmatter to pass configuration. See [Configuration](./configuration.md) for more details. ## Directives diff --git a/docs/syntax/entityRelationshipDiagram.md b/docs/syntax/entityRelationshipDiagram.md index 94e4048f03..b673ac1dd8 100644 --- a/docs/syntax/entityRelationshipDiagram.md +++ b/docs/syntax/entityRelationshipDiagram.md @@ -90,7 +90,7 @@ Mermaid syntax for ER diagrams is compatible with PlantUML, with an extension to Where: -- `first-entity` is the name of an entity. Names must begin with an alphabetic character or an underscore (from v\<MERMAID_RELEASE_VERSION>+), and may also contain digits and hyphens. +- `first-entity` is the name of an entity. Names must begin with an alphabetic character or an underscore (from v10.5.0+), and may also contain digits and hyphens. - `relationship` describes the way that both entities inter-relate. See below. - `second-entity` is the name of the other entity. - `relationship-label` describes the relationship from the perspective of the first entity. @@ -198,7 +198,7 @@ erDiagram The `type` values must begin with an alphabetic character and may contain digits, hyphens, underscores, parentheses and square brackets. The `name` values follow a similar format to `type`, but may start with an asterisk as another option to indicate an attribute is a primary key. Other than that, there are no restrictions, and there is no implicit set of valid data types. -### Entity Name Aliases (v\<MERMAID_RELEASE_VERSION>+) +### Entity Name Aliases (v10.5.0+) An alias can be added to an entity using square brackets. If provided, the alias will be showed in the diagram instead of the entity name. From 395ee5ef067d9faea102777c491cadadf0cc6b09 Mon Sep 17 00:00:00 2001 From: Guy Pursey <guypursey@gmail.com> Date: Tue, 3 Oct 2023 17:53:46 +0100 Subject: [PATCH 092/457] Update notes on orientation in GitGraph documentation Attempt to make the documentation around left-right and top-down orientation clearer than it currently is, addressing issue #4885. --- packages/mermaid/src/docs/syntax/gitgraph.md | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/packages/mermaid/src/docs/syntax/gitgraph.md b/packages/mermaid/src/docs/syntax/gitgraph.md index 87f43afdde..8ff4057364 100644 --- a/packages/mermaid/src/docs/syntax/gitgraph.md +++ b/packages/mermaid/src/docs/syntax/gitgraph.md @@ -513,18 +513,19 @@ Here, we have changed the default main branch name to `MetroLine1`. ## Orientation (v10.3.0+) -In Mermaid, the default orientation is Left to Right. The branches are lined vertically. +In Mermaid, the default orientation is for commits to run from **left to right** and for branches to be stacked on top of one another. + +You can set this explicitly with `LR:` after `gitGraph`. Usage example: ```mermaid-example - gitGraph + gitGraph LR: commit commit branch develop commit commit - commit checkout main commit commit @@ -533,9 +534,11 @@ Usage example: commit ``` -Sometimes we may want to change the orientation. Currently, Mermaid supports two orientations: **Left to Right**(default) and **Top to Bottom**. +Sometimes, we may want to change the orientation of the graph. -In order to change the orientation from top to bottom i.e. branches lined horizontally, you need to add `TB` along with `gitGraph`. +Mermaid also supports a **top to bottom** orientation. In this mode, the commits run from top to bottom of the graph and branches are arranged side-by-side. + +To orient the graph in this way, you need to add `TB:` after gitGraph. Usage example: @@ -546,7 +549,6 @@ Usage example: branch develop commit commit - commit checkout main commit commit From 80af0e7ec780d030b6445787339a3d961a937476 Mon Sep 17 00:00:00 2001 From: guypursey <guypursey@users.noreply.github.com> Date: Wed, 4 Oct 2023 14:43:00 +0000 Subject: [PATCH 093/457] Update docs --- docs/syntax/gitgraph.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/docs/syntax/gitgraph.md b/docs/syntax/gitgraph.md index f2609e31c5..c62e001198 100644 --- a/docs/syntax/gitgraph.md +++ b/docs/syntax/gitgraph.md @@ -827,18 +827,19 @@ Here, we have changed the default main branch name to `MetroLine1`. ## Orientation (v10.3.0+) -In Mermaid, the default orientation is Left to Right. The branches are lined vertically. +In Mermaid, the default orientation is for commits to run from **left to right** and for branches to be stacked on top of one another. + +You can set this explicitly with `LR:` after `gitGraph`. Usage example: ```mermaid-example - gitGraph + gitGraph LR: commit commit branch develop commit commit - commit checkout main commit commit @@ -848,13 +849,12 @@ Usage example: ``` ```mermaid - gitGraph + gitGraph LR: commit commit branch develop commit commit - commit checkout main commit commit @@ -863,9 +863,11 @@ Usage example: commit ``` -Sometimes we may want to change the orientation. Currently, Mermaid supports two orientations: **Left to Right**(default) and **Top to Bottom**. +Sometimes, we may want to change the orientation of the graph. + +Mermaid also supports a **top to bottom** orientation. In this mode, the commits run from top to bottom of the graph and branches are arranged side-by-side. -In order to change the orientation from top to bottom i.e. branches lined horizontally, you need to add `TB` along with `gitGraph`. +To orient the graph in this way, you need to add `TB:` after gitGraph. Usage example: @@ -876,7 +878,6 @@ Usage example: branch develop commit commit - commit checkout main commit commit @@ -892,7 +893,6 @@ Usage example: branch develop commit commit - commit checkout main commit commit From 97487acbc39daf2b1845e60949110c54f4605af9 Mon Sep 17 00:00:00 2001 From: Guy Pursey <guypursey@gmail.com> Date: Thu, 5 Oct 2023 12:13:12 +0100 Subject: [PATCH 094/457] Updated GitGraph doc amendment based on feedback in PR. --- docs/syntax/gitgraph.md | 16 +++++++++++----- packages/mermaid/src/docs/syntax/gitgraph.md | 16 +++++++++++----- 2 files changed, 22 insertions(+), 10 deletions(-) diff --git a/docs/syntax/gitgraph.md b/docs/syntax/gitgraph.md index c62e001198..8d39ddbcbd 100644 --- a/docs/syntax/gitgraph.md +++ b/docs/syntax/gitgraph.md @@ -827,9 +827,15 @@ Here, we have changed the default main branch name to `MetroLine1`. ## Orientation (v10.3.0+) -In Mermaid, the default orientation is for commits to run from **left to right** and for branches to be stacked on top of one another. +Mermaid supports two graph orientations: **Left-to-Right** (default) and **Top-to-Bottom**. -You can set this explicitly with `LR:` after `gitGraph`. +You can set this with either `LR:` (for [**Left-to-Right**](#left-to-right-default-lr)) or `TB:` (for [**Top-to-Bottom**](#top-to-bottom-tb)) after `gitGraph`. + +### Left to Right (default, `LR:`) + +In Mermaid, the default orientation is for commits to run from left to right and for branches to be stacked on top of one another. + +However, you can set this explicitly with `LR:` after `gitGraph`. Usage example: @@ -863,11 +869,11 @@ Usage example: commit ``` -Sometimes, we may want to change the orientation of the graph. +### Top to Bottom (`TB:`) -Mermaid also supports a **top to bottom** orientation. In this mode, the commits run from top to bottom of the graph and branches are arranged side-by-side. +In `TB` (**Top-to-Bottom**) orientation, the commits run from top to bottom of the graph and branches are arranged side-by-side. -To orient the graph in this way, you need to add `TB:` after gitGraph. +To orient the graph this way, you need to add `TB:` after gitGraph. Usage example: diff --git a/packages/mermaid/src/docs/syntax/gitgraph.md b/packages/mermaid/src/docs/syntax/gitgraph.md index 8ff4057364..5fa09cb225 100644 --- a/packages/mermaid/src/docs/syntax/gitgraph.md +++ b/packages/mermaid/src/docs/syntax/gitgraph.md @@ -513,9 +513,15 @@ Here, we have changed the default main branch name to `MetroLine1`. ## Orientation (v10.3.0+) -In Mermaid, the default orientation is for commits to run from **left to right** and for branches to be stacked on top of one another. +Mermaid supports two graph orientations: **Left-to-Right** (default) and **Top-to-Bottom**. -You can set this explicitly with `LR:` after `gitGraph`. +You can set this with either `LR:` (for [**Left-to-Right**](#left-to-right-default-lr)) or `TB:` (for [**Top-to-Bottom**](#top-to-bottom-tb)) after `gitGraph`. + +### Left to Right (default, `LR:`) + +In Mermaid, the default orientation is for commits to run from left to right and for branches to be stacked on top of one another. + +However, you can set this explicitly with `LR:` after `gitGraph`. Usage example: @@ -534,11 +540,11 @@ Usage example: commit ``` -Sometimes, we may want to change the orientation of the graph. +### Top to Bottom (`TB:`) -Mermaid also supports a **top to bottom** orientation. In this mode, the commits run from top to bottom of the graph and branches are arranged side-by-side. +In `TB` (**Top-to-Bottom**) orientation, the commits run from top to bottom of the graph and branches are arranged side-by-side. -To orient the graph in this way, you need to add `TB:` after gitGraph. +To orient the graph this way, you need to add `TB:` after gitGraph. Usage example: From 41c7b08c9959f701f8f8d0570dd7c7eef51faac3 Mon Sep 17 00:00:00 2001 From: Martin Pedersen <denmark4u@gmail.com> Date: Thu, 5 Oct 2023 16:52:15 +0200 Subject: [PATCH 095/457] prevent-inherited-lineheights-on-edgeterminal-4083 --- packages/mermaid/src/diagrams/class/styles.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/mermaid/src/diagrams/class/styles.js b/packages/mermaid/src/diagrams/class/styles.js index f12f609f91..a81aa03a82 100644 --- a/packages/mermaid/src/diagrams/class/styles.js +++ b/packages/mermaid/src/diagrams/class/styles.js @@ -146,6 +146,7 @@ g.classGroup line { .edgeTerminals { font-size: 11px; + line-height: initial; } .classTitleText { From 2bde5ad6673b96bd94b481ba6bb7d7be46508086 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod <sidharthv96@gmail.com> Date: Thu, 5 Oct 2023 21:37:57 +0530 Subject: [PATCH 096/457] fix: Reduce gantt exclude days length --- packages/mermaid/src/diagrams/gantt/ganttRenderer.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js index 55b5607a28..c1d14bb902 100644 --- a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js +++ b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js @@ -520,9 +520,9 @@ export const draw = function (text, id, version, diagObj) { return; } - if (dayjs(maxTime).diff(dayjs(minTime), 'year') > 5) { + if (dayjs(maxTime).diff(dayjs(minTime), 'year') > 1) { log.warn( - 'The difference between the min and max time is more than 5 years. This will cause performance issues. Skipping drawing exclude days.' + 'The difference between the min and max time is more than 1 years. This will cause performance issues. Skipping drawing exclude days.' ); return; } From c63ea3e987f1f883060509ee93e2601316322d2e Mon Sep 17 00:00:00 2001 From: Nikolay Rozhkov <nironame@gmail.com> Date: Fri, 6 Oct 2023 07:45:13 +0300 Subject: [PATCH 097/457] Commented out broken test (#4913) * Commented out bronken test * Skip test instead of commenting out * Fix * Update cypress/integration/rendering/gantt.spec.js Co-authored-by: Alois Klink <alois@aloisklink.com> --------- Co-authored-by: Sidharth Vinod <sidharthv96@gmail.com> Co-authored-by: Alois Klink <alois@aloisklink.com> --- cypress/integration/rendering/gantt.spec.js | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/cypress/integration/rendering/gantt.spec.js b/cypress/integration/rendering/gantt.spec.js index fea874003b..998a092c24 100644 --- a/cypress/integration/rendering/gantt.spec.js +++ b/cypress/integration/rendering/gantt.spec.js @@ -520,7 +520,15 @@ describe('Gantt diagram', () => { ); }); - it('should render a gantt diagram with very large intervals, skipping excludes if interval > 5 years', () => { + // TODO: fix it + // + // This test is skipped deliberately + // because it fails and blocks our development pipeline + // It was added as an attempt to fix gantt performance issues + // + // https://github.com/mermaid-js/mermaid/issues/3274 + // + it.skip('should render a gantt diagram with very large intervals, skipping excludes if interval > 5 years', () => { imgSnapshotTest( `gantt title A long Gantt Diagram @@ -528,7 +536,6 @@ describe('Gantt diagram', () => { axisFormat %m-%d tickInterval 1day excludes weekends - section Section A task : a1, 9999-10-01, 30d Another task : after a1, 20d From 157c90eeac828c8b90d4159d9ac6aa42f6d3f805 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod <sidharthv96@gmail.com> Date: Fri, 6 Oct 2023 10:49:09 +0530 Subject: [PATCH 098/457] Revert "fix: Reduce gantt exclude days length" This reverts commit 2bde5ad6673b96bd94b481ba6bb7d7be46508086. --- packages/mermaid/src/diagrams/gantt/ganttRenderer.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js index c1d14bb902..55b5607a28 100644 --- a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js +++ b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js @@ -520,9 +520,9 @@ export const draw = function (text, id, version, diagObj) { return; } - if (dayjs(maxTime).diff(dayjs(minTime), 'year') > 1) { + if (dayjs(maxTime).diff(dayjs(minTime), 'year') > 5) { log.warn( - 'The difference between the min and max time is more than 1 years. This will cause performance issues. Skipping drawing exclude days.' + 'The difference between the min and max time is more than 5 years. This will cause performance issues. Skipping drawing exclude days.' ); return; } From 309bb50155962f8f65fcf32c0281da5fcc2a2634 Mon Sep 17 00:00:00 2001 From: Sanjeet Kumar <skc0845@gmail.com> Date: Sat, 7 Oct 2023 14:08:29 +0530 Subject: [PATCH 099/457] Update README.md update Twitter logo in README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index e5b8738afe..04747385a2 100644 --- a/README.md +++ b/README.md @@ -34,7 +34,7 @@ Try Live Editor previews of future releases: <a href="https://develop.git.mermai [![CDN Status](https://img.shields.io/jsdelivr/npm/hm/mermaid)](https://www.jsdelivr.com/package/npm/mermaid) [![NPM Downloads](https://img.shields.io/npm/dm/mermaid)](https://www.npmjs.com/package/mermaid) [![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE) -[![Twitter Follow](https://img.shields.io/badge/Social-mermaidjs__-blue?style=social&logo=twitter)](https://twitter.com/mermaidjs_) +[![Twitter Follow](https://img.shields.io/badge/Social-mermaidjs__-blue?style=social&logo=X)](https://twitter.com/mermaidjs_) <img src="./img/header.png" alt="" /> From 38e906edbea38cbeb2738aa481078ba1782ec07d Mon Sep 17 00:00:00 2001 From: Sanjeet Kumar <skc0845@gmail.com> Date: Sat, 7 Oct 2023 14:09:19 +0530 Subject: [PATCH 100/457] Update README.zh-CN.md updated twitter logo in README.zh-CN.md --- README.zh-CN.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.zh-CN.md b/README.zh-CN.md index da83494052..98975ea331 100644 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -35,7 +35,7 @@ Mermaid [![CDN Status](https://img.shields.io/jsdelivr/npm/hm/mermaid)](https://www.jsdelivr.com/package/npm/mermaid) [![NPM Downloads](https://img.shields.io/npm/dm/mermaid)](https://www.npmjs.com/package/mermaid) [![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE) -[![Twitter Follow](https://img.shields.io/badge/Social-mermaidjs__-blue?style=social&logo=twitter)](https://twitter.com/mermaidjs_) +[![Twitter Follow](https://img.shields.io/badge/Social-mermaidjs__-blue?style=social&logo=X)](https://twitter.com/mermaidjs_) <img src="./img/header.png" alt="" /> From 30b3e6213f6a8780b604f5af63acfb8a28e87529 Mon Sep 17 00:00:00 2001 From: Marcel Ribeiro-Dantas <mribeirodantas@seqera.io> Date: Sat, 7 Oct 2023 22:16:11 -0300 Subject: [PATCH 101/457] fix(typos): Fix minor typos in the source code Signed-off-by: Marcel Ribeiro-Dantas <mribeirodantas@seqera.io> --- CHANGELOG.md | 14 +++++++------- cypress/integration/rendering/gitGraph.spec.js | 12 ++++++------ cypress/integration/rendering/timeline.spec.ts | 2 +- demos/c4context.html | 2 +- demos/flowchart.html | 2 +- demos/requirements.html | 2 +- demos/state.html | 4 ++-- docs/config/accessibility.md | 8 ++++---- docs/syntax/flowchart.md | 6 +++--- docs/syntax/quadrantChart.md | 2 +- docs/syntax/timeline.md | 2 +- .../mermaid/src/dagre-wrapper/mermaid-graphlib.js | 4 ++-- .../src/dagre-wrapper/mermaid-graphlib.spec.js | 2 +- packages/mermaid/src/diagrams/er/erRenderer.js | 6 +++--- .../src/diagrams/er/parser/erDiagram.spec.js | 2 +- .../src/diagrams/flowchart/elk/flowRenderer-elk.js | 2 +- .../src/diagrams/git/gitGraphParserV2.spec.js | 2 +- .../mermaid/src/diagrams/mindmap/mindmap.spec.js | 8 ++++---- .../mermaid/src/diagrams/sequence/sequenceDb.js | 2 +- .../src/diagrams/state/stateDiagram.spec.js | 6 +++--- .../diagrams/xychart/parser/xychart.jison.spec.ts | 4 ++-- packages/mermaid/src/diagrams/xychart/xychartDb.ts | 4 ++-- packages/mermaid/src/docs/config/accessibility.md | 4 ++-- packages/mermaid/src/docs/syntax/flowchart.md | 4 ++-- packages/mermaid/src/docs/syntax/quadrantChart.md | 2 +- packages/mermaid/src/docs/syntax/timeline.md | 2 +- packages/mermaid/src/mermaid.spec.ts | 2 +- packages/mermaid/src/schemas/config.schema.yaml | 2 +- packages/mermaid/src/themes/theme-base.js | 2 +- packages/mermaid/src/themes/theme-dark.js | 2 +- packages/mermaid/src/themes/theme-forest.js | 2 +- packages/mermaid/src/utils.spec.ts | 2 +- tests/webpack/src/index.js | 2 +- 33 files changed, 62 insertions(+), 62 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 7552efa3b7..ede5e19ad6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -68,7 +68,7 @@ try { ### Init deprecated and InitThrowsErrors removed -The config passed to `init` was not being used eariler. +The config passed to `init` was not being used earlier. It will now be used. The `init` function is deprecated and will be removed in the next major release. init currently works as a wrapper to `initialize` and `run`. @@ -195,7 +195,7 @@ mermaid.run({ - "Cannot activate" in sequenceDiagram [\#647](https://github.com/knsv/mermaid/issues/647) - Link \("click" statement\) in flowchart does not work in exported SVG [\#646](https://github.com/knsv/mermaid/issues/646) - How to pass styling [\#639](https://github.com/knsv/mermaid/issues/639) -- The live editor cant show seq diagram with notes for 8.0.0-alpha.3 [\#638](https://github.com/knsv/mermaid/issues/638) +- The live editor can't show seq diagram with notes for 8.0.0-alpha.3 [\#638](https://github.com/knsv/mermaid/issues/638) - import mermaid.css with ES6 + NPM [\#634](https://github.com/knsv/mermaid/issues/634) - Actor line cuts through other elements [\#633](https://github.com/knsv/mermaid/issues/633) - Graph TD line out of the picture \(left side\) [\#630](https://github.com/knsv/mermaid/issues/630) @@ -504,7 +504,7 @@ mermaid.run({ - Docs css: code hard to read [\#324](https://github.com/knsv/mermaid/issues/324) - About Markpad integration [\#323](https://github.com/knsv/mermaid/issues/323) -- How to link backwords in flowchat? [\#321](https://github.com/knsv/mermaid/issues/321) +- How to link backwards in flowchat? [\#321](https://github.com/knsv/mermaid/issues/321) - Help with editor [\#310](https://github.com/knsv/mermaid/issues/310) - +1 [\#293](https://github.com/knsv/mermaid/issues/293) - Basic chart does not render on Chome, but does in Firefox [\#290](https://github.com/knsv/mermaid/issues/290) @@ -619,7 +619,7 @@ mermaid.run({ - render to png from the cli does not display the marker-end arrow heads [\#181](https://github.com/knsv/mermaid/issues/181) - Links in sequence diagrams [\#159](https://github.com/knsv/mermaid/issues/159) - comment characters `%%` cause parse error [\#141](https://github.com/knsv/mermaid/issues/141) -- Add a reversed assymetric shape [\#124](https://github.com/knsv/mermaid/issues/124) +- Add a reversed asymmetric shape [\#124](https://github.com/knsv/mermaid/issues/124) - Add syntax for double headed arrows [\#123](https://github.com/knsv/mermaid/issues/123) - Support for font-awesome [\#49](https://github.com/knsv/mermaid/issues/49) @@ -659,7 +659,7 @@ mermaid.run({ - Auto linewrap for notes in sequence diagrams [\#178](https://github.com/knsv/mermaid/issues/178) - Execute code after initialize [\#176](https://github.com/knsv/mermaid/issues/176) - Autoscaling for all diagram types [\#175](https://github.com/knsv/mermaid/issues/175) -- Problem wit click event callback [\#174](https://github.com/knsv/mermaid/issues/174) +- Problem with click event callback [\#174](https://github.com/knsv/mermaid/issues/174) - How to escape characters? [\#170](https://github.com/knsv/mermaid/issues/170) - it can not work [\#167](https://github.com/knsv/mermaid/issues/167) - UML Class diagram [\#154](https://github.com/knsv/mermaid/issues/154) @@ -762,7 +762,7 @@ mermaid.run({ - subgraph background is black in rendered flowchart PNG via CLI [\#121](https://github.com/knsv/mermaid/issues/121) - Integrate editor at https://github.com/naseer/mermaid-webapp [\#110](https://github.com/knsv/mermaid/issues/110) - Internet Explorer Support [\#99](https://github.com/knsv/mermaid/issues/99) -- Assymetric shapes not documented [\#82](https://github.com/knsv/mermaid/issues/82) +- Asymmetric shapes not documented [\#82](https://github.com/knsv/mermaid/issues/82) - NoModificationAllowedError [\#23](https://github.com/knsv/mermaid/issues/23) - Improve arrows [\#3](https://github.com/knsv/mermaid/issues/3) @@ -908,7 +908,7 @@ mermaid.run({ - Question marks don't render properly with /dist/mermaid.full.min.js [\#30](https://github.com/knsv/mermaid/issues/30) - Error with some characters [\#25](https://github.com/knsv/mermaid/issues/25) -- Provide parse function in browser widthout `require`? [\#21](https://github.com/knsv/mermaid/issues/21) +- Provide parse function in browser without `require`? [\#21](https://github.com/knsv/mermaid/issues/21) - Better label text support [\#18](https://github.com/knsv/mermaid/issues/18) - Cap-cased words break parser [\#8](https://github.com/knsv/mermaid/issues/8) diff --git a/cypress/integration/rendering/gitGraph.spec.js b/cypress/integration/rendering/gitGraph.spec.js index c01a557961..9f040a36f0 100644 --- a/cypress/integration/rendering/gitGraph.spec.js +++ b/cypress/integration/rendering/gitGraph.spec.js @@ -26,7 +26,7 @@ describe('Git Graph diagram', () => { `gitGraph commit id: "Normal Commit" commit id: "Reverse Commit" type: REVERSE - commit id: "Hightlight Commit" type: HIGHLIGHT + commit id: "Highlight Commit" type: HIGHLIGHT `, {} ); @@ -36,7 +36,7 @@ describe('Git Graph diagram', () => { `gitGraph commit id: "Normal Commit with tag" tag: "v1.0.0" commit id: "Reverse Commit with tag" type: REVERSE tag: "RC_1" - commit id: "Hightlight Commit" type: HIGHLIGHT tag: "8.8.4" + commit id: "Highlight Commit" type: HIGHLIGHT tag: "8.8.4" `, {} ); @@ -102,7 +102,7 @@ describe('Git Graph diagram', () => { {} ); }); - it('8: should render a simple gitgraph with more than 8 branchs & overriding variables', () => { + it('8: should render a simple gitgraph with more than 8 branches & overriding variables', () => { imgSnapshotTest( `%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': { 'gitBranchLabel0': '#ffffff', @@ -358,7 +358,7 @@ gitGraph `gitGraph TB: commit id: "Normal Commit" commit id: "Reverse Commit" type: REVERSE - commit id: "Hightlight Commit" type: HIGHLIGHT + commit id: "Highlight Commit" type: HIGHLIGHT `, {} ); @@ -368,7 +368,7 @@ gitGraph `gitGraph TB: commit id: "Normal Commit with tag" tag: "v1.0.0" commit id: "Reverse Commit with tag" type: REVERSE tag: "RC_1" - commit id: "Hightlight Commit" type: HIGHLIGHT tag: "8.8.4" + commit id: "Highlight Commit" type: HIGHLIGHT tag: "8.8.4" `, {} ); @@ -434,7 +434,7 @@ gitGraph {} ); }); - it('22: should render a simple gitgraph with more than 8 branchs & overriding variables | Vertical Branch', () => { + it('22: should render a simple gitgraph with more than 8 branches & overriding variables | Vertical Branch', () => { imgSnapshotTest( `%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': { 'gitBranchLabel0': '#ffffff', diff --git a/cypress/integration/rendering/timeline.spec.ts b/cypress/integration/rendering/timeline.spec.ts index 68da01d503..c748b54d3c 100644 --- a/cypress/integration/rendering/timeline.spec.ts +++ b/cypress/integration/rendering/timeline.spec.ts @@ -57,7 +57,7 @@ describe('Timeline diagram', () => { {} ); }); - it('5: should render a simple timeline with directive overriden colors', () => { + it('5: should render a simple timeline with directive overridden colors', () => { imgSnapshotTest( ` %%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': { 'cScale0': '#ff0000', diff --git a/demos/c4context.html b/demos/c4context.html index cf358b5501..f674054a2f 100644 --- a/demos/c4context.html +++ b/demos/c4context.html @@ -173,7 +173,7 @@ <h1>C4 context diagram demos</h1> Container(mobile, "Mobile App", "Xamarin", "Provides a limited subset of the Internet Banking functionality to customers via their mobile device.") } - Deployment_Node(comp, "Customer's computer", "Mircosoft Windows or Apple macOS"){ + Deployment_Node(comp, "Customer's computer", "Microsoft Windows or Apple macOS"){ Deployment_Node(browser, "Web Browser", "Google Chrome, Mozilla Firefox,<br/> Apple Safari or Microsoft Edge"){ Container(spa, "Single Page Application", "JavaScript and Angular", "Provides all of the Internet Banking functionality to customers via their web browser.") } diff --git a/demos/flowchart.html b/demos/flowchart.html index 8389510b28..d7032a663c 100644 --- a/demos/flowchart.html +++ b/demos/flowchart.html @@ -22,7 +22,7 @@ <h3>graph</h3> --- graph LR accTitle: This is a complicated flow - accDescr: This is the descriptoin for the complicated flow. + accDescr: This is the description for the complicated flow. sid-B3655226-6C29-4D00-B685-3D5C734DC7E1[" diff --git a/demos/requirements.html b/demos/requirements.html index 3ede080588..2510db8dd1 100644 --- a/demos/requirements.html +++ b/demos/requirements.html @@ -17,7 +17,7 @@ <h1>Requirement diagram demos</h1> <pre class="mermaid"> requirementDiagram - accTitle: Requirments demo in black and white + accTitle: Requirements demo in black and white accDescr: A series of requirement boxes showing relationships among them. Has meaningless task names requirement test_req { diff --git a/demos/state.html b/demos/state.html index a3fc042927..3b4c20a57e 100644 --- a/demos/state.html +++ b/demos/state.html @@ -183,7 +183,7 @@ <h2>This shows Composite states</h2> </pre> <hr /> - <h2>Compsite states can link to themselves</h2> + <h2>Composite states can link to themselves</h2> <pre class="mermaid"> stateDiagram-v2 state Active { @@ -199,7 +199,7 @@ <h2>transition labels can span multiple lines using "br" tags or \n</h2> stateDiagram-v2 [*] --> S1 S1 --> S2: This long line uses a br tag<br />to create multiple<br />lines. - S1 --> S3: This transition descripton uses \na newline character\nto create multiple\nlines. + S1 --> S3: This transition description uses \na newline character\nto create multiple\nlines. </pre> <hr /> diff --git a/docs/config/accessibility.md b/docs/config/accessibility.md index bf8b3e5915..836d6bcb23 100644 --- a/docs/config/accessibility.md +++ b/docs/config/accessibility.md @@ -97,7 +97,7 @@ See [the accTitle and accDescr usage examples](#acctitle-and-accdescr-usage-exam graph LR accTitle: Big Decisions accDescr: Bob's Burgers process for making big decisions - A[Identify Big Descision] --> B{Make Big Decision} + A[Identify Big Decision] --> B{Make Big Decision} B --> D[Be done] ``` @@ -105,7 +105,7 @@ See [the accTitle and accDescr usage examples](#acctitle-and-accdescr-usage-exam graph LR accTitle: Big Decisions accDescr: Bob's Burgers process for making big decisions - A[Identify Big Descision] --> B{Make Big Decision} + A[Identify Big Decision] --> B{Make Big Decision} B --> D[Be done] ``` @@ -137,7 +137,7 @@ Here is the HTML generated for the SVG element: _(Note that some of the SVG attr for making very, very big decisions. This is actually a very simple flow: identify the big decision and then make the big decision. } - A[Identify Big Descision] --> B{Make Big Decision} + A[Identify Big Decision] --> B{Make Big Decision} B --> D[Be done] ``` @@ -149,7 +149,7 @@ Here is the HTML generated for the SVG element: _(Note that some of the SVG attr for making very, very big decisions. This is actually a very simple flow: identify the big decision and then make the big decision. } - A[Identify Big Descision] --> B{Make Big Decision} + A[Identify Big Decision] --> B{Make Big Decision} B --> D[Be done] ``` diff --git a/docs/syntax/flowchart.md b/docs/syntax/flowchart.md index acd7c2db5b..1bdce6aa63 100644 --- a/docs/syntax/flowchart.md +++ b/docs/syntax/flowchart.md @@ -764,7 +764,7 @@ flowchart LR end %% ^ These subgraphs are identical, except for the links to them: - %% Link *to* subgraph1: subgraph1 direction is mantained + %% Link *to* subgraph1: subgraph1 direction is maintained outside --> subgraph1 %% Link *within* subgraph2: %% subgraph2 inherits the direction of the top-level graph (LR) @@ -783,7 +783,7 @@ flowchart LR end %% ^ These subgraphs are identical, except for the links to them: - %% Link *to* subgraph1: subgraph1 direction is mantained + %% Link *to* subgraph1: subgraph1 direction is maintained outside --> subgraph1 %% Link *within* subgraph2: %% subgraph2 inherits the direction of the top-level graph (LR) @@ -1112,7 +1112,7 @@ flowchart TD B-->E(A fa:fa-camera-retro perhaps?) ``` -Mermaid is compatible with Font Awesome up to verion 5, Free icons only. Check that the icons you use are from the [supported set of icons](https://fontawesome.com/v5/search?o=r&m=free). +Mermaid is compatible with Font Awesome up to version 5, Free icons only. Check that the icons you use are from the [supported set of icons](https://fontawesome.com/v5/search?o=r&m=free). ## Graph declarations with spaces between vertices and link and without semicolon diff --git a/docs/syntax/quadrantChart.md b/docs/syntax/quadrantChart.md index 39b57fd131..97bc94e36e 100644 --- a/docs/syntax/quadrantChart.md +++ b/docs/syntax/quadrantChart.md @@ -115,7 +115,7 @@ Points are used to plot a circle inside the quadrantChart. The syntax is `<text> | quadrantExternalBorderStrokeWidth | Quadrant external border stroke width | 2 | | xAxisLabelPadding | Top and bottom padding of x-axis text | 5 | | xAxisLabelFontSize | X-axis texts font size | 16 | -| xAxisPosition | Position of x-axis (top , bottom) if there are points the x-axis will alway be rendered in bottom | 'top' | +| xAxisPosition | Position of x-axis (top , bottom) if there are points the x-axis will always be rendered in bottom | 'top' | | yAxisLabelPadding | Left and Right padding of y-axis text | 5 | | yAxisLabelFontSize | Y-axis texts font size | 16 | | yAxisPosition | Position of y-axis (left , right) | 'left' | diff --git a/docs/syntax/timeline.md b/docs/syntax/timeline.md index d42a2dc7c4..610ad98c7c 100644 --- a/docs/syntax/timeline.md +++ b/docs/syntax/timeline.md @@ -217,7 +217,7 @@ Note that there are no sections defined, and each time period and its correspond 2. Disable the multiColor option using the `disableMultiColor` option. This will make all time periods and events follow the same color scheme. -You will need to add this option either via mermaid.intialize function or directives. +You will need to add this option either via mermaid.initialize function or directives. ```javascript mermaid.initialize({ diff --git a/packages/mermaid/src/dagre-wrapper/mermaid-graphlib.js b/packages/mermaid/src/dagre-wrapper/mermaid-graphlib.js index 1e376054dd..f42cc34633 100644 --- a/packages/mermaid/src/dagre-wrapper/mermaid-graphlib.js +++ b/packages/mermaid/src/dagre-wrapper/mermaid-graphlib.js @@ -231,12 +231,12 @@ export const adjustClustersAndEdges = (graph, depth) => { if (children.length > 0) { log.debug('Cluster identified', id, descendants); edges.forEach((edge) => { - // log.debug('Edge, decendants: ', edge, decendants[id]); + // log.debug('Edge, descendants: ', edge, descendants[id]); // Check if any edge leaves the cluster (not the actual cluster, that's a link from the box) if (edge.v !== id && edge.w !== id) { // Any edge where either the one of the nodes is descending to the cluster but not the other - // if (decendants[id].indexOf(edge.v) < 0 && decendants[id].indexOf(edge.w) < 0) { + // if (descendants[id].indexOf(edge.v) < 0 && descendants[id].indexOf(edge.w) < 0) { const d1 = isDescendant(edge.v, id); const d2 = isDescendant(edge.w, id); diff --git a/packages/mermaid/src/dagre-wrapper/mermaid-graphlib.spec.js b/packages/mermaid/src/dagre-wrapper/mermaid-graphlib.spec.js index 1444a82c48..d44e543911 100644 --- a/packages/mermaid/src/dagre-wrapper/mermaid-graphlib.spec.js +++ b/packages/mermaid/src/dagre-wrapper/mermaid-graphlib.spec.js @@ -419,7 +419,7 @@ describe('extractDescendants', function () { return {}; }); }); - it('Simple case of one level decendants GLB9', function () { + it('Simple case of one level descendants GLB9', function () { /* subgraph A a diff --git a/packages/mermaid/src/diagrams/er/erRenderer.js b/packages/mermaid/src/diagrams/er/erRenderer.js index 0c19d491b6..895847456b 100644 --- a/packages/mermaid/src/diagrams/er/erRenderer.js +++ b/packages/mermaid/src/diagrams/er/erRenderer.js @@ -202,7 +202,7 @@ const drawAttributes = (groupNode, entityTextNode, attributes) => { let attribStyle = 'attributeBoxOdd'; // We will flip the style on alternate rows to achieve a banded effect attributeNodes.forEach((attributeNode) => { - // Calculate the alignment y co-ordinate for the type/name of the attribute + // Calculate the alignment y coordinate for the type/name of the attribute const alignY = heightOffset + heightPadding + attributeNode.height / 2; // Position the type attribute @@ -579,8 +579,8 @@ export const draw = function (text, id, _version, diagObj) { // 2. Make sure they are all added to the graph // 3. Add all the edges (relationships) to the graph as well // 4. Let dagre do its magic to lay out the graph. This assigns: - // - the centre co-ordinates for each node, bearing in mind the dimensions and edge relationships - // - the path co-ordinates for each edge + // - the centre coordinates for each node, bearing in mind the dimensions and edge relationships + // - the path coordinates for each edge // But it has no impact on the svg child nodes - the diagram remains with every entity rooted at 0,0 // 5. Now assign a transform to each entity in the svg node so that it gets drawn in the correct place, as determined by // its centre point, which is obtained from the graph, and it's width and height diff --git a/packages/mermaid/src/diagrams/er/parser/erDiagram.spec.js b/packages/mermaid/src/diagrams/er/parser/erDiagram.spec.js index 825af737a6..ba29ff04b9 100644 --- a/packages/mermaid/src/diagrams/er/parser/erDiagram.spec.js +++ b/packages/mermaid/src/diagrams/er/parser/erDiagram.spec.js @@ -92,7 +92,7 @@ describe('when parsing ER diagram it...', function () { }); }); - it('cannot contain % because it interfers with parsing comments', function () { + it('cannot contain % because it interferes with parsing comments', function () { expect(() => { erDiagram.parser.parse(`erDiagram\n "Blo%rf"\n`); const entities = erDb.getEntities(); diff --git a/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js b/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js index 737b492fb3..e613d2df20 100644 --- a/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js +++ b/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js @@ -561,7 +561,7 @@ export const addEdges = function (edges, diagObj, graph, svg) { }; // TODO: break out and share with dagre wrapper. The current code in dagre wrapper also adds -// adds the line to the graph, but we don't need that here. This is why we cant use the dagre +// adds the line to the graph, but we don't need that here. This is why we can't use the dagre // wrapper directly for this /** * Add the markers to the edge depending on the type of arrow is diff --git a/packages/mermaid/src/diagrams/git/gitGraphParserV2.spec.js b/packages/mermaid/src/diagrams/git/gitGraphParserV2.spec.js index df20a5eb5a..540ab773bf 100644 --- a/packages/mermaid/src/diagrams/git/gitGraphParserV2.spec.js +++ b/packages/mermaid/src/diagrams/git/gitGraphParserV2.spec.js @@ -6,7 +6,7 @@ describe('when parsing a gitGraph', function () { parser.yy = gitGraphAst; parser.yy.clear(); }); - it('should handle a gitGraph commit with NO pararms, get auto-genrated reandom ID', function () { + it('should handle a gitGraph commit with NO pararms, get auto-generated reandom ID', function () { const str = `gitGraph: commit `; diff --git a/packages/mermaid/src/diagrams/mindmap/mindmap.spec.js b/packages/mermaid/src/diagrams/mindmap/mindmap.spec.js index 845205f9b3..c0b72060d9 100644 --- a/packages/mermaid/src/diagrams/mindmap/mindmap.spec.js +++ b/packages/mermaid/src/diagrams/mindmap/mindmap.spec.js @@ -129,7 +129,7 @@ root expect(child.nodeId).toEqual('theId'); expect(child.type).toEqual(mindmap.yy.nodeType.ROUNDED_RECT); }); - it('MMP-10 mutiple types (circle)', function () { + it('MMP-10 multiple types (circle)', function () { let str = `mindmap root((the root)) `; @@ -141,7 +141,7 @@ root expect(mm.type).toEqual(mindmap.yy.nodeType.CIRCLE); }); - it('MMP-11 mutiple types (cloud)', function () { + it('MMP-11 multiple types (cloud)', function () { let str = `mindmap root)the root( `; @@ -152,7 +152,7 @@ root expect(mm.children.length).toEqual(0); expect(mm.type).toEqual(mindmap.yy.nodeType.CLOUD); }); - it('MMP-12 mutiple types (bang)', function () { + it('MMP-12 multiple types (bang)', function () { let str = `mindmap root))the root(( `; @@ -164,7 +164,7 @@ root expect(mm.type).toEqual(mindmap.yy.nodeType.BANG); }); - it('MMP-12-a mutiple types (hexagon)', function () { + it('MMP-12-a multiple types (hexagon)', function () { let str = `mindmap root{{the root}} `; diff --git a/packages/mermaid/src/diagrams/sequence/sequenceDb.js b/packages/mermaid/src/diagrams/sequence/sequenceDb.js index 6c3f1f64df..7f893611d1 100644 --- a/packages/mermaid/src/diagrams/sequence/sequenceDb.js +++ b/packages/mermaid/src/diagrams/sequence/sequenceDb.js @@ -126,7 +126,7 @@ export const addSignal = function ( const cnt = activationCount(idFrom.actor); if (cnt < 1) { // Bail out as there is an activation signal from an inactive participant - let error = new Error('Trying to inactivate an inactive participant (' + idFrom.actor + ')'); + let error = new Error('Trying to deactivate an inactive participant (' + idFrom.actor + ')'); error.hash = { text: '->>-', token: '->>-', diff --git a/packages/mermaid/src/diagrams/state/stateDiagram.spec.js b/packages/mermaid/src/diagrams/state/stateDiagram.spec.js index 536031c815..7fcf4d0a6a 100644 --- a/packages/mermaid/src/diagrams/state/stateDiagram.spec.js +++ b/packages/mermaid/src/diagrams/state/stateDiagram.spec.js @@ -212,14 +212,14 @@ describe('state diagram, ', function () { parser.parse(str); }); - it('should handle state defintions with separation of id', function () { + it('should handle state definitions with separation of id', function () { const str = `stateDiagram\n state "Long state description" as state1 `; parser.parse(str); }); - it('should handle state defintions with separation of id', function () { + it('should handle state definitions with separation of id', function () { const str = `stateDiagram state "Not Shooting State" as NotShooting { state "Idle mode" as Idle @@ -360,7 +360,7 @@ describe('state diagram, ', function () { parser.parse(str); }); - it('should handle notes for composit states', function () { + it('should handle notes for composite states', function () { const str = `stateDiagram\n [*] --> NotShooting diff --git a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts index 23fdb8ae8b..d113250aa4 100644 --- a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts +++ b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts @@ -386,7 +386,7 @@ describe('Testing xychart jison file', () => { 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n bar "barTitle with space" [ +23 , -4aa5 , 56.6 ] '; expect(parserFnConstructor(str)).toThrow(); }); - it('parse multiple bar and line varient 1', () => { + it('parse multiple bar and line variant 1', () => { const str = 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n bar barTitle1 [23, 45, 56.6] \n line lineTitle1 [11, 45.5, 67, 23] \n bar barTitle2 [13, 42, 56.89] \n line lineTitle2 [45, 99, 012]'; expect(parserFnConstructor(str)).not.toThrow(); @@ -409,7 +409,7 @@ describe('Testing xychart jison file', () => { [45, 99, 12] ); }); - it('parse multiple bar and line varient 2', () => { + it('parse multiple bar and line variant 2', () => { const str = ` xychart-beta horizontal title Basic xychart diff --git a/packages/mermaid/src/diagrams/xychart/xychartDb.ts b/packages/mermaid/src/diagrams/xychart/xychartDb.ts index 927a6aff56..637477f28b 100644 --- a/packages/mermaid/src/diagrams/xychart/xychartDb.ts +++ b/packages/mermaid/src/diagrams/xychart/xychartDb.ts @@ -78,8 +78,8 @@ function textSanitizer(text: string) { function setTmpSVGG(SVGG: Group) { tmpSVGGroup = SVGG; } -function setOrientation(oriantation: string) { - if (oriantation === 'horizontal') { +function setOrientation(orientation: string) { + if (orientation === 'horizontal') { xyChartConfig.chartOrientation = 'horizontal'; } else { xyChartConfig.chartOrientation = 'vertical'; diff --git a/packages/mermaid/src/docs/config/accessibility.md b/packages/mermaid/src/docs/config/accessibility.md index 67fb090b80..559c739874 100644 --- a/packages/mermaid/src/docs/config/accessibility.md +++ b/packages/mermaid/src/docs/config/accessibility.md @@ -91,7 +91,7 @@ See [the accTitle and accDescr usage examples](#acctitle-and-accdescr-usage-exam graph LR accTitle: Big Decisions accDescr: Bob's Burgers process for making big decisions - A[Identify Big Descision] --> B{Make Big Decision} + A[Identify Big Decision] --> B{Make Big Decision} B --> D[Be done] ``` @@ -123,7 +123,7 @@ Here is the HTML generated for the SVG element: _(Note that some of the SVG attr for making very, very big decisions. This is actually a very simple flow: identify the big decision and then make the big decision. } - A[Identify Big Descision] --> B{Make Big Decision} + A[Identify Big Decision] --> B{Make Big Decision} B --> D[Be done] ``` diff --git a/packages/mermaid/src/docs/syntax/flowchart.md b/packages/mermaid/src/docs/syntax/flowchart.md index d06e75c22b..3620c159e5 100644 --- a/packages/mermaid/src/docs/syntax/flowchart.md +++ b/packages/mermaid/src/docs/syntax/flowchart.md @@ -487,7 +487,7 @@ flowchart LR end %% ^ These subgraphs are identical, except for the links to them: - %% Link *to* subgraph1: subgraph1 direction is mantained + %% Link *to* subgraph1: subgraph1 direction is maintained outside --> subgraph1 %% Link *within* subgraph2: %% subgraph2 inherits the direction of the top-level graph (LR) @@ -757,7 +757,7 @@ flowchart TD B-->E(A fa:fa-camera-retro perhaps?) ``` -Mermaid is compatible with Font Awesome up to verion 5, Free icons only. Check that the icons you use are from the [supported set of icons](https://fontawesome.com/v5/search?o=r&m=free). +Mermaid is compatible with Font Awesome up to version 5, Free icons only. Check that the icons you use are from the [supported set of icons](https://fontawesome.com/v5/search?o=r&m=free). ## Graph declarations with spaces between vertices and link and without semicolon diff --git a/packages/mermaid/src/docs/syntax/quadrantChart.md b/packages/mermaid/src/docs/syntax/quadrantChart.md index 835bbfa32f..6e0494270b 100644 --- a/packages/mermaid/src/docs/syntax/quadrantChart.md +++ b/packages/mermaid/src/docs/syntax/quadrantChart.md @@ -96,7 +96,7 @@ Points are used to plot a circle inside the quadrantChart. The syntax is `<text> | quadrantExternalBorderStrokeWidth | Quadrant external border stroke width | 2 | | xAxisLabelPadding | Top and bottom padding of x-axis text | 5 | | xAxisLabelFontSize | X-axis texts font size | 16 | -| xAxisPosition | Position of x-axis (top , bottom) if there are points the x-axis will alway be rendered in bottom | 'top' | +| xAxisPosition | Position of x-axis (top , bottom) if there are points the x-axis will always be rendered in bottom | 'top' | | yAxisLabelPadding | Left and Right padding of y-axis text | 5 | | yAxisLabelFontSize | Y-axis texts font size | 16 | | yAxisPosition | Position of y-axis (left , right) | 'left' | diff --git a/packages/mermaid/src/docs/syntax/timeline.md b/packages/mermaid/src/docs/syntax/timeline.md index 201ab6b16f..eeff9b1353 100644 --- a/packages/mermaid/src/docs/syntax/timeline.md +++ b/packages/mermaid/src/docs/syntax/timeline.md @@ -143,7 +143,7 @@ Note that there are no sections defined, and each time period and its correspond 2. Disable the multiColor option using the `disableMultiColor` option. This will make all time periods and events follow the same color scheme. -You will need to add this option either via mermaid.intialize function or directives. +You will need to add this option either via mermaid.initialize function or directives. ```javascript mermaid.initialize({ diff --git a/packages/mermaid/src/mermaid.spec.ts b/packages/mermaid/src/mermaid.spec.ts index 645b5b39cb..9c3bd31baa 100644 --- a/packages/mermaid/src/mermaid.spec.ts +++ b/packages/mermaid/src/mermaid.spec.ts @@ -174,7 +174,7 @@ describe('when using mermaid and ', () => { await expect(mermaid.parse('graph TQ;A--x|text including URL space|B;')).rejects .toThrowErrorMatchingInlineSnapshot(` "Lexical error on line 1. Unrecognized text. - graph TQ;A--x|text includ + graph TQ;A--x|text include -----^" `); }); diff --git a/packages/mermaid/src/schemas/config.schema.yaml b/packages/mermaid/src/schemas/config.schema.yaml index 69cd86a685..ee92b4875f 100644 --- a/packages/mermaid/src/schemas/config.schema.yaml +++ b/packages/mermaid/src/schemas/config.schema.yaml @@ -221,7 +221,7 @@ properties: type: number default: 16 -$defs: # JSON Schema definition (maybe we should move these to a seperate file) +$defs: # JSON Schema definition (maybe we should move these to a separate file) BaseDiagramConfig: # TODO: More config needs to be moved here title: Base Diagram Config diff --git a/packages/mermaid/src/themes/theme-base.js b/packages/mermaid/src/themes/theme-base.js index 663af85016..d1a6eae2ab 100644 --- a/packages/mermaid/src/themes/theme-base.js +++ b/packages/mermaid/src/themes/theme-base.js @@ -165,7 +165,7 @@ class Theme { } } - // Setup teh label color for the set + // Setup the label color for the set this.scaleLabelColor = this.scaleLabelColor || this.labelTextColor; for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) { diff --git a/packages/mermaid/src/themes/theme-dark.js b/packages/mermaid/src/themes/theme-dark.js index 300cf30366..c566251090 100644 --- a/packages/mermaid/src/themes/theme-dark.js +++ b/packages/mermaid/src/themes/theme-dark.js @@ -203,7 +203,7 @@ class Theme { this['surfacePeer' + i] || adjust(this.mainBkg, { h: 30, s: -30, l: -(-7 + i * 4) }); } - // Setup teh label color for the set + // Setup the label color for the set this.scaleLabelColor = this.scaleLabelColor || (this.darkMode ? 'black' : this.labelTextColor); for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) { diff --git a/packages/mermaid/src/themes/theme-forest.js b/packages/mermaid/src/themes/theme-forest.js index adf337a16c..0270f51ff9 100644 --- a/packages/mermaid/src/themes/theme-forest.js +++ b/packages/mermaid/src/themes/theme-forest.js @@ -128,7 +128,7 @@ class Theme { this['cScaleInv' + i] = this['cScaleInv' + i] || adjust(this['cScale' + i], { h: 180 }); } - // Setup teh label color for the set + // Setup the label color for the set this.scaleLabelColor = this.scaleLabelColor !== 'calculated' && this.scaleLabelColor ? this.scaleLabelColor diff --git a/packages/mermaid/src/utils.spec.ts b/packages/mermaid/src/utils.spec.ts index 3be3bc2141..8ccf5b2107 100644 --- a/packages/mermaid/src/utils.spec.ts +++ b/packages/mermaid/src/utils.spec.ts @@ -450,7 +450,7 @@ describe('when parsing font sizes', function () { expect(utils.parseFontSize(undefined)).toEqual([undefined, undefined]); }); - it('handles unparseable input', function () { + it('handles unparsable input', function () { // @ts-expect-error Explicitly testing unparsable input expect(utils.parseFontSize({ fontSize: 14 })).toEqual([undefined, undefined]); }); diff --git a/tests/webpack/src/index.js b/tests/webpack/src/index.js index 51738aa62c..e667cfc5d0 100644 --- a/tests/webpack/src/index.js +++ b/tests/webpack/src/index.js @@ -22,7 +22,7 @@ const load = async () => { Popularisation British popular psychology author Tony Buzan Research - On effectivness<br/>and features + On effectiveness<br/>and features On Automatic creation Uses Creative techniques From 846fb3f8f86bc516c41e08920720e3c7c697ad75 Mon Sep 17 00:00:00 2001 From: Hans Blankenhaus <dev.blankenhaus@gmail.com> Date: Sat, 30 Sep 2023 16:10:59 +0200 Subject: [PATCH 102/457] making consitent config imports from diagramAPI --- .../mermaid/src/dagre-wrapper/clusters.js | 2 +- .../mermaid/src/dagre-wrapper/createLabel.js | 2 +- packages/mermaid/src/dagre-wrapper/edges.js | 2 +- packages/mermaid/src/dagre-wrapper/nodes.js | 2 +- .../mermaid/src/dagre-wrapper/shapes/note.js | 2 +- .../mermaid/src/dagre-wrapper/shapes/util.js | 2 +- .../mermaid/src/diagram-api/diagramAPI.ts | 10 +++++++- packages/mermaid/src/diagrams/c4/c4Db.js | 8 +++--- .../mermaid/src/diagrams/c4/c4Renderer.js | 6 ++--- .../mermaid/src/diagrams/class/classDb.ts | 20 ++++++--------- .../src/diagrams/class/classRenderer-v2.ts | 2 +- .../src/diagrams/class/classRenderer.js | 2 +- .../mermaid/src/diagrams/class/classTypes.ts | 2 +- .../mermaid/src/diagrams/common/commonDb.ts | 2 +- packages/mermaid/src/diagrams/er/erDb.js | 4 +-- .../mermaid/src/diagrams/er/erRenderer.js | 2 +- .../mermaid/src/diagrams/flowchart/flowDb.js | 10 ++++---- .../src/diagrams/flowchart/flowDiagram-v2.ts | 2 +- .../src/diagrams/flowchart/flowRenderer-v2.js | 2 +- .../src/diagrams/flowchart/flowRenderer.js | 2 +- .../diagrams/flowchart/flowRenderer.spec.js | 2 +- .../mermaid/src/diagrams/gantt/ganttDb.js | 8 +++--- .../src/diagrams/gantt/ganttRenderer.js | 2 +- .../mermaid/src/diagrams/git/gitGraphAst.js | 25 +++++++++---------- packages/mermaid/src/diagrams/git/layout.js | 2 +- .../mermaid/src/diagrams/mindmap/mindmapDb.js | 2 +- .../src/diagrams/mindmap/mindmapRenderer.js | 2 +- packages/mermaid/src/diagrams/pie/pie.spec.ts | 2 +- packages/mermaid/src/diagrams/pie/pieDb.ts | 2 +- .../mermaid/src/diagrams/pie/pieRenderer.ts | 2 +- .../src/diagrams/quadrant-chart/quadrantDb.ts | 6 ++--- .../quadrant-chart/quadrantRenderer.ts | 4 +-- .../src/diagrams/requirement/requirementDb.js | 4 +-- .../requirement/requirementRenderer.js | 2 +- .../mermaid/src/diagrams/sankey/sankeyDB.ts | 6 ++--- .../src/diagrams/sankey/sankeyRenderer.ts | 6 ++--- .../src/diagrams/sequence/sequenceDb.js | 14 +++++------ .../diagrams/sequence/sequenceDiagram.spec.js | 6 ++--- .../src/diagrams/sequence/sequenceRenderer.ts | 6 ++--- packages/mermaid/src/diagrams/state/shapes.js | 2 +- .../mermaid/src/diagrams/state/stateDb.js | 12 ++++----- .../src/diagrams/state/stateRenderer-v2.js | 2 +- .../src/diagrams/state/stateRenderer.js | 2 +- .../src/diagrams/timeline/timelineRenderer.ts | 2 +- .../src/diagrams/user-journey/journeyDb.js | 4 +-- .../diagrams/user-journey/journeyRenderer.ts | 2 +- .../src/rendering-util/selectSvgElement.ts | 2 +- 47 files changed, 109 insertions(+), 108 deletions(-) diff --git a/packages/mermaid/src/dagre-wrapper/clusters.js b/packages/mermaid/src/dagre-wrapper/clusters.js index 1ce7166890..5c6e5a4e05 100644 --- a/packages/mermaid/src/dagre-wrapper/clusters.js +++ b/packages/mermaid/src/dagre-wrapper/clusters.js @@ -3,7 +3,7 @@ import { log } from '../logger.js'; import createLabel from './createLabel.js'; import { createText } from '../rendering-util/createText.js'; import { select } from 'd3'; -import { getConfig } from '../config.js'; +import { getConfig } from '../diagram-api/diagramAPI.js'; import { evaluate } from '../diagrams/common/common.js'; const rect = (parent, node) => { diff --git a/packages/mermaid/src/dagre-wrapper/createLabel.js b/packages/mermaid/src/dagre-wrapper/createLabel.js index a8351c812f..c120f2083c 100644 --- a/packages/mermaid/src/dagre-wrapper/createLabel.js +++ b/packages/mermaid/src/dagre-wrapper/createLabel.js @@ -1,6 +1,6 @@ import { select } from 'd3'; import { log } from '../logger.js'; -import { getConfig } from '../config.js'; +import { getConfig } from '../diagram-api/diagramAPI.js'; import { evaluate } from '../diagrams/common/common.js'; import { decodeEntities } from '../mermaidAPI.js'; diff --git a/packages/mermaid/src/dagre-wrapper/edges.js b/packages/mermaid/src/dagre-wrapper/edges.js index 1b3e172c01..ced9a3bc2c 100644 --- a/packages/mermaid/src/dagre-wrapper/edges.js +++ b/packages/mermaid/src/dagre-wrapper/edges.js @@ -2,7 +2,7 @@ import { log } from '../logger.js'; import createLabel from './createLabel.js'; import { createText } from '../rendering-util/createText.js'; import { line, curveBasis, select } from 'd3'; -import { getConfig } from '../config.js'; +import { getConfig } from '../diagram-api/diagramAPI.js'; import utils from '../utils.js'; import { evaluate } from '../diagrams/common/common.js'; import { getLineFunctionsWithOffset } from '../utils/lineWithOffset.js'; diff --git a/packages/mermaid/src/dagre-wrapper/nodes.js b/packages/mermaid/src/dagre-wrapper/nodes.js index 51ff9ef116..325322798c 100644 --- a/packages/mermaid/src/dagre-wrapper/nodes.js +++ b/packages/mermaid/src/dagre-wrapper/nodes.js @@ -1,7 +1,7 @@ import { select } from 'd3'; import { log } from '../logger.js'; import { labelHelper, updateNodeBounds, insertPolygonShape } from './shapes/util.js'; -import { getConfig } from '../config.js'; +import { getConfig } from '../diagram-api/diagramAPI.js'; import intersect from './intersect/index.js'; import createLabel from './createLabel.js'; import note from './shapes/note.js'; diff --git a/packages/mermaid/src/dagre-wrapper/shapes/note.js b/packages/mermaid/src/dagre-wrapper/shapes/note.js index 17661e1696..514457cf02 100644 --- a/packages/mermaid/src/dagre-wrapper/shapes/note.js +++ b/packages/mermaid/src/dagre-wrapper/shapes/note.js @@ -1,6 +1,6 @@ import { updateNodeBounds, labelHelper } from './util.js'; import { log } from '../../logger.js'; -import { getConfig } from '../../config.js'; +import { getConfig } from '../../diagram-api/diagramAPI.js'; import intersect from '../intersect/index.js'; const note = async (parent, node) => { diff --git a/packages/mermaid/src/dagre-wrapper/shapes/util.js b/packages/mermaid/src/dagre-wrapper/shapes/util.js index 95b82ddc07..fbcb5198fb 100644 --- a/packages/mermaid/src/dagre-wrapper/shapes/util.js +++ b/packages/mermaid/src/dagre-wrapper/shapes/util.js @@ -1,6 +1,6 @@ import createLabel from '../createLabel.js'; import { createText } from '../../rendering-util/createText.js'; -import { getConfig } from '../../config.js'; +import { getConfig } from '../../diagram-api/diagramAPI.js'; import { decodeEntities } from '../../mermaidAPI.js'; import { select } from 'd3'; import { evaluate, sanitizeText } from '../../diagrams/common/common.js'; diff --git a/packages/mermaid/src/diagram-api/diagramAPI.ts b/packages/mermaid/src/diagram-api/diagramAPI.ts index ea3c10159f..7ca9d58043 100644 --- a/packages/mermaid/src/diagram-api/diagramAPI.ts +++ b/packages/mermaid/src/diagram-api/diagramAPI.ts @@ -1,6 +1,11 @@ import { addDetector } from './detectType.js'; import { log as _log, setLogLevel as _setLogLevel } from '../logger.js'; -import { getConfig as _getConfig } from '../config.js'; +import { + getConfig as _getConfig, + setConfig as _setConfig, + defaultConfig as _defaultConfig, + setSiteConfig as _setSiteConfig, +} from '../config.js'; import { sanitizeText as _sanitizeText } from '../diagrams/common/common.js'; import { setupGraphViewbox as _setupGraphViewbox } from '../setupGraphViewbox.js'; import { addStylesForDiagram } from '../styles.js'; @@ -15,6 +20,9 @@ import * as _commonDb from '../diagrams/common/commonDb.js'; export const log = _log; export const setLogLevel = _setLogLevel; export const getConfig = _getConfig; +export const setConfig = _setConfig; +export const defaultConfig = _defaultConfig; +export const setSiteConfig = _setSiteConfig; export const sanitizeText = (text: string) => _sanitizeText(text, getConfig()); export const setupGraphViewbox = _setupGraphViewbox; export const getCommonDb = () => { diff --git a/packages/mermaid/src/diagrams/c4/c4Db.js b/packages/mermaid/src/diagrams/c4/c4Db.js index 71c1785853..3fc7e0afca 100644 --- a/packages/mermaid/src/diagrams/c4/c4Db.js +++ b/packages/mermaid/src/diagrams/c4/c4Db.js @@ -1,4 +1,4 @@ -import * as configApi from '../../config.js'; +import { getConfig } from '../../diagram-api/diagramAPI.js'; import { sanitizeText } from '../common/common.js'; import { setAccTitle, @@ -33,7 +33,7 @@ export const getC4Type = function () { }; export const setC4Type = function (c4TypeParam) { - let sanitizedText = sanitizeText(c4TypeParam, configApi.getConfig()); + let sanitizedText = sanitizeText(c4TypeParam, getConfig()); c4Type = sanitizedText; }; @@ -783,7 +783,7 @@ export const PLACEMENT = { }; export const setTitle = function (txt) { - let sanitizedText = sanitizeText(txt, configApi.getConfig()); + let sanitizedText = sanitizeText(txt, getConfig()); title = sanitizedText; }; @@ -816,7 +816,7 @@ export default { getAccTitle, getAccDescription, setAccDescription, - getConfig: () => configApi.getConfig().c4, + getConfig: () => getConfig().c4, clear, LINETYPE, ARROWTYPE, diff --git a/packages/mermaid/src/diagrams/c4/c4Renderer.js b/packages/mermaid/src/diagrams/c4/c4Renderer.js index e60e58f21c..326d3060e8 100644 --- a/packages/mermaid/src/diagrams/c4/c4Renderer.js +++ b/packages/mermaid/src/diagrams/c4/c4Renderer.js @@ -4,7 +4,7 @@ import { log } from '../../logger.js'; import { parser } from './parser/c4Diagram.jison'; import common from '../common/common.js'; import c4Db from './c4Db.js'; -import * as configApi from '../../config.js'; +import { getConfig } from '../../diagram-api/diagramAPI.js'; import assignWithDepth from '../../assignWithDepth.js'; import { wrapLabel, calculateTextWidth, calculateTextHeight } from '../../utils.js'; import { configureSvgSize } from '../../setupGraphViewbox.js'; @@ -580,8 +580,8 @@ function drawInsideBoundary( * @param diagObj */ export const draw = function (_text, id, _version, diagObj) { - conf = configApi.getConfig().c4; - const securityLevel = configApi.getConfig().securityLevel; + conf = getConfig().c4; + const securityLevel = getConfig().securityLevel; // Handle root and Document for when rendering in sandbox mode let sandboxElement; if (securityLevel === 'sandbox') { diff --git a/packages/mermaid/src/diagrams/class/classDb.ts b/packages/mermaid/src/diagrams/class/classDb.ts index 45ca1ed16c..268ab8ff2e 100644 --- a/packages/mermaid/src/diagrams/class/classDb.ts +++ b/packages/mermaid/src/diagrams/class/classDb.ts @@ -1,7 +1,7 @@ import type { Selection } from 'd3'; import { select } from 'd3'; import { log } from '../../logger.js'; -import * as configApi from '../../config.js'; +import { getConfig } from '../../diagram-api/diagramAPI.js'; import common from '../common/common.js'; import utils from '../../utils.js'; import { @@ -34,7 +34,7 @@ let namespaceCounter = 0; let functions: any[] = []; -const sanitizeText = (txt: string) => common.sanitizeText(txt, configApi.getConfig()); +const sanitizeText = (txt: string) => common.sanitizeText(txt, getConfig()); const splitClassNameAndType = function (_id: string) { const id = common.sanitizeText(_id, configApi.getConfig()); @@ -139,15 +139,9 @@ export const addRelation = function (relation: ClassRelation) { relation.id1 = splitClassNameAndType(relation.id1).className; relation.id2 = splitClassNameAndType(relation.id2).className; - relation.relationTitle1 = common.sanitizeText( - relation.relationTitle1.trim(), - configApi.getConfig() - ); + relation.relationTitle1 = common.sanitizeText(relation.relationTitle1.trim(), getConfig()); - relation.relationTitle2 = common.sanitizeText( - relation.relationTitle2.trim(), - configApi.getConfig() - ); + relation.relationTitle2 = common.sanitizeText(relation.relationTitle2.trim(), getConfig()); relations.push(relation); }; @@ -267,7 +261,7 @@ export const getTooltip = function (id: string, namespace?: string) { * @param target - Target of the link, _blank by default as originally defined in the svgDraw.js file */ export const setLink = function (ids: string, linkStr: string, target: string) { - const config = configApi.getConfig(); + const config = getConfig(); ids.split(',').forEach(function (_id) { let id = _id; if (_id[0].match(/\d/)) { @@ -304,7 +298,7 @@ export const setClickEvent = function (ids: string, functionName: string, functi const setClickFunc = function (_domId: string, functionName: string, functionArgs: string) { const domId = common.sanitizeText(_domId, configApi.getConfig()); - const config = configApi.getConfig(); + const config = getConfig(); if (config.securityLevel !== 'loose') { return; } @@ -465,7 +459,7 @@ export default { getAccTitle, getAccDescription, setAccDescription, - getConfig: () => configApi.getConfig().class, + getConfig: () => getConfig().class, addClass, bindFunctions, clear, diff --git a/packages/mermaid/src/diagrams/class/classRenderer-v2.ts b/packages/mermaid/src/diagrams/class/classRenderer-v2.ts index 5abfd769a2..25712153c4 100644 --- a/packages/mermaid/src/diagrams/class/classRenderer-v2.ts +++ b/packages/mermaid/src/diagrams/class/classRenderer-v2.ts @@ -2,7 +2,7 @@ import { select, curveLinear } from 'd3'; import * as graphlib from 'dagre-d3-es/src/graphlib/index.js'; import { log } from '../../logger.js'; -import { getConfig } from '../../config.js'; +import { getConfig } from '../../diagram-api/diagramAPI.js'; import { render } from '../../dagre-wrapper/index.js'; import utils from '../../utils.js'; import { interpolateToCurve, getStylesFromArray } from '../../utils.js'; diff --git a/packages/mermaid/src/diagrams/class/classRenderer.js b/packages/mermaid/src/diagrams/class/classRenderer.js index 58def16c2a..8c2dab7fb8 100644 --- a/packages/mermaid/src/diagrams/class/classRenderer.js +++ b/packages/mermaid/src/diagrams/class/classRenderer.js @@ -4,7 +4,7 @@ import * as graphlib from 'dagre-d3-es/src/graphlib/index.js'; import { log } from '../../logger.js'; import svgDraw from './svgDraw.js'; import { configureSvgSize } from '../../setupGraphViewbox.js'; -import { getConfig } from '../../config.js'; +import { getConfig } from '../../diagram-api/diagramAPI.js'; let idCache = {}; const padding = 20; diff --git a/packages/mermaid/src/diagrams/class/classTypes.ts b/packages/mermaid/src/diagrams/class/classTypes.ts index d372feebad..e288eefde8 100644 --- a/packages/mermaid/src/diagrams/class/classTypes.ts +++ b/packages/mermaid/src/diagrams/class/classTypes.ts @@ -1,4 +1,4 @@ -import { getConfig } from '../../config.js'; +import { getConfig } from '../../diagram-api/diagramAPI.js'; import { parseGenericTypes, sanitizeText } from '../common/common.js'; export interface ClassNode { diff --git a/packages/mermaid/src/diagrams/common/commonDb.ts b/packages/mermaid/src/diagrams/common/commonDb.ts index e4b9c3539f..cc5b226779 100644 --- a/packages/mermaid/src/diagrams/common/commonDb.ts +++ b/packages/mermaid/src/diagrams/common/commonDb.ts @@ -1,5 +1,5 @@ import { sanitizeText as _sanitizeText } from './common.js'; -import { getConfig } from '../../config.js'; +import { getConfig } from '../../diagram-api/diagramAPI.js'; let accTitle = ''; let diagramTitle = ''; diff --git a/packages/mermaid/src/diagrams/er/erDb.js b/packages/mermaid/src/diagrams/er/erDb.js index 9a397597ee..a58b9bbc1a 100644 --- a/packages/mermaid/src/diagrams/er/erDb.js +++ b/packages/mermaid/src/diagrams/er/erDb.js @@ -1,5 +1,5 @@ import { log } from '../../logger.js'; -import * as configApi from '../../config.js'; +import { getConfig } from '../../diagram-api/diagramAPI.js'; import { setAccTitle, @@ -83,7 +83,7 @@ const clear = function () { export default { Cardinality, Identification, - getConfig: () => configApi.getConfig().er, + getConfig: () => getConfig().er, addEntity, addAttributes, getEntities, diff --git a/packages/mermaid/src/diagrams/er/erRenderer.js b/packages/mermaid/src/diagrams/er/erRenderer.js index 0c19d491b6..8e0fc4d4d9 100644 --- a/packages/mermaid/src/diagrams/er/erRenderer.js +++ b/packages/mermaid/src/diagrams/er/erRenderer.js @@ -1,7 +1,7 @@ import * as graphlib from 'dagre-d3-es/src/graphlib/index.js'; import { line, curveBasis, select } from 'd3'; import { layout as dagreLayout } from 'dagre-d3-es/src/dagre/index.js'; -import { getConfig } from '../../config.js'; +import { getConfig } from '../../diagram-api/diagramAPI.js'; import { log } from '../../logger.js'; import utils from '../../utils.js'; import erMarkers from './erMarkers.js'; diff --git a/packages/mermaid/src/diagrams/flowchart/flowDb.js b/packages/mermaid/src/diagrams/flowchart/flowDb.js index a87bf558de..510c40ce84 100644 --- a/packages/mermaid/src/diagrams/flowchart/flowDb.js +++ b/packages/mermaid/src/diagrams/flowchart/flowDb.js @@ -1,6 +1,6 @@ import { select } from 'd3'; import utils from '../../utils.js'; -import * as configApi from '../../config.js'; +import { getConfig, defaultConfig } from '../../diagram-api/diagramAPI.js'; import common from '../common/common.js'; import { log } from '../../logger.js'; import { @@ -15,7 +15,7 @@ import { const MERMAID_DOM_ID_PREFIX = 'flowchart-'; let vertexCounter = 0; -let config = configApi.getConfig(); +let config = getConfig(); let vertices = {}; let edges = []; let classes = {}; @@ -84,7 +84,7 @@ export const addVertex = function (_id, textObj, type, style, classes, dir, prop } vertexCounter++; if (textObj !== undefined) { - config = configApi.getConfig(); + config = getConfig(); txt = sanitizeText(textObj.text.trim()); vertices[id].labelType = textObj.type; // strip quotes if string starts and ends with a quote @@ -277,7 +277,7 @@ const setTooltip = function (ids, tooltip) { const setClickFun = function (id, functionName, functionArgs) { let domId = lookUpDomId(id); // if (_id[0].match(/\d/)) id = MERMAID_DOM_ID_PREFIX + id; - if (configApi.getConfig().securityLevel !== 'loose') { + if (getConfig().securityLevel !== 'loose') { return; } if (functionName === undefined) { @@ -766,7 +766,7 @@ export const lex = { firstGraph, }; export default { - defaultConfig: () => configApi.defaultConfig.flowchart, + defaultConfig: () => defaultConfig.flowchart, setAccTitle, getAccTitle, getAccDescription, diff --git a/packages/mermaid/src/diagrams/flowchart/flowDiagram-v2.ts b/packages/mermaid/src/diagrams/flowchart/flowDiagram-v2.ts index c3de4b6854..368a98ccae 100644 --- a/packages/mermaid/src/diagrams/flowchart/flowDiagram-v2.ts +++ b/packages/mermaid/src/diagrams/flowchart/flowDiagram-v2.ts @@ -4,7 +4,7 @@ import flowDb from './flowDb.js'; import flowRendererV2 from './flowRenderer-v2.js'; import flowStyles from './styles.js'; import type { MermaidConfig } from '../../config.type.js'; -import { setConfig } from '../../config.js'; +import { setConfig } from '../../diagram-api/diagramAPI.js'; export const diagram = { parser: flowParser, diff --git a/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js b/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js index 576ee6b34d..23d43da2b0 100644 --- a/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js +++ b/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js @@ -1,6 +1,6 @@ import * as graphlib from 'dagre-d3-es/src/graphlib/index.js'; import { select, curveLinear, selectAll } from 'd3'; -import { getConfig } from '../../config.js'; +import { getConfig } from '../../diagram-api/diagramAPI.js'; import utils from '../../utils.js'; import { render } from '../../dagre-wrapper/index.js'; import { addHtmlLabel } from 'dagre-d3-es/src/dagre-js/label/add-html-label.js'; diff --git a/packages/mermaid/src/diagrams/flowchart/flowRenderer.js b/packages/mermaid/src/diagrams/flowchart/flowRenderer.js index 8394b41e88..142e455563 100644 --- a/packages/mermaid/src/diagrams/flowchart/flowRenderer.js +++ b/packages/mermaid/src/diagrams/flowchart/flowRenderer.js @@ -1,6 +1,6 @@ import * as graphlib from 'dagre-d3-es/src/graphlib/index.js'; import { select, curveLinear, selectAll } from 'd3'; -import { getConfig } from '../../config.js'; +import { getConfig } from '../../diagram-api/diagramAPI.js'; import { render as Render } from 'dagre-d3-es'; import { applyStyle } from 'dagre-d3-es/src/dagre-js/util.js'; import { addHtmlLabel } from 'dagre-d3-es/src/dagre-js/label/add-html-label.js'; diff --git a/packages/mermaid/src/diagrams/flowchart/flowRenderer.spec.js b/packages/mermaid/src/diagrams/flowchart/flowRenderer.spec.js index 0e9e8c0dea..5fb2307e53 100644 --- a/packages/mermaid/src/diagrams/flowchart/flowRenderer.spec.js +++ b/packages/mermaid/src/diagrams/flowchart/flowRenderer.spec.js @@ -1,5 +1,5 @@ import { addVertices, addEdges } from './flowRenderer.js'; -import { setConfig } from '../../config.js'; +import { setConfig } from '../../diagram-api/diagramAPI.js'; setConfig({ flowchart: { diff --git a/packages/mermaid/src/diagrams/gantt/ganttDb.js b/packages/mermaid/src/diagrams/gantt/ganttDb.js index 775494e3df..1c73a13ea9 100644 --- a/packages/mermaid/src/diagrams/gantt/ganttDb.js +++ b/packages/mermaid/src/diagrams/gantt/ganttDb.js @@ -4,7 +4,7 @@ import dayjsIsoWeek from 'dayjs/plugin/isoWeek.js'; import dayjsCustomParseFormat from 'dayjs/plugin/customParseFormat.js'; import dayjsAdvancedFormat from 'dayjs/plugin/advancedFormat.js'; import { log } from '../../logger.js'; -import * as configApi from '../../config.js'; +import { getConfig } from '../../diagram-api/diagramAPI.js'; import utils from '../../utils.js'; import { @@ -603,7 +603,7 @@ const compileTasks = function () { */ export const setLink = function (ids, _linkStr) { let linkStr = _linkStr; - if (configApi.getConfig().securityLevel !== 'loose') { + if (getConfig().securityLevel !== 'loose') { linkStr = sanitizeUrl(_linkStr); } ids.split(',').forEach(function (id) { @@ -634,7 +634,7 @@ export const setClass = function (ids, className) { }; const setClickFun = function (id, functionName, functionArgs) { - if (configApi.getConfig().securityLevel !== 'loose') { + if (getConfig().securityLevel !== 'loose') { return; } if (functionName === undefined) { @@ -725,7 +725,7 @@ export const bindFunctions = function (element) { }; export default { - getConfig: () => configApi.getConfig().gantt, + getConfig: () => getConfig().gantt, clear, setDateFormat, getDateFormat, diff --git a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js index 55b5607a28..33dbaf9efd 100644 --- a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js +++ b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js @@ -25,7 +25,7 @@ import { timeMonth, } from 'd3'; import common from '../common/common.js'; -import { getConfig } from '../../config.js'; +import { getConfig } from '../../diagram-api/diagramAPI.js'; import { configureSvgSize } from '../../setupGraphViewbox.js'; export const setConf = function () { diff --git a/packages/mermaid/src/diagrams/git/gitGraphAst.js b/packages/mermaid/src/diagrams/git/gitGraphAst.js index abad68b22b..f8cfba6f51 100644 --- a/packages/mermaid/src/diagrams/git/gitGraphAst.js +++ b/packages/mermaid/src/diagrams/git/gitGraphAst.js @@ -1,7 +1,6 @@ import { log } from '../../logger.js'; import { random } from '../../utils.js'; -import * as configApi from '../../config.js'; -import { getConfig } from '../../config.js'; +import { getConfig } from '../../diagram-api/diagramAPI.js'; import common from '../common/common.js'; import { setAccTitle, @@ -106,9 +105,9 @@ export const getOptions = function () { export const commit = function (msg, id, type, tag) { log.debug('Entering commit:', msg, id, type, tag); - id = common.sanitizeText(id, configApi.getConfig()); - msg = common.sanitizeText(msg, configApi.getConfig()); - tag = common.sanitizeText(tag, configApi.getConfig()); + id = common.sanitizeText(id, getConfig()); + msg = common.sanitizeText(msg, getConfig()); + tag = common.sanitizeText(tag, getConfig()); const commit = { id: id ? id : seq + '-' + getId(), message: msg, @@ -125,7 +124,7 @@ export const commit = function (msg, id, type, tag) { }; export const branch = function (name, order) { - name = common.sanitizeText(name, configApi.getConfig()); + name = common.sanitizeText(name, getConfig()); if (branches[name] === undefined) { branches[name] = head != null ? head.id : null; branchesConfig[name] = { name, order: order ? parseInt(order, 10) : null }; @@ -149,8 +148,8 @@ export const branch = function (name, order) { }; export const merge = function (otherBranch, custom_id, override_type, custom_tag) { - otherBranch = common.sanitizeText(otherBranch, configApi.getConfig()); - custom_id = common.sanitizeText(custom_id, configApi.getConfig()); + otherBranch = common.sanitizeText(otherBranch, getConfig()); + custom_id = common.sanitizeText(custom_id, getConfig()); const currentCommit = commits[branches[curBranch]]; const otherCommit = commits[branches[otherBranch]]; @@ -258,9 +257,9 @@ export const merge = function (otherBranch, custom_id, override_type, custom_tag export const cherryPick = function (sourceId, targetId, tag) { log.debug('Entering cherryPick:', sourceId, targetId, tag); - sourceId = common.sanitizeText(sourceId, configApi.getConfig()); - targetId = common.sanitizeText(targetId, configApi.getConfig()); - tag = common.sanitizeText(tag, configApi.getConfig()); + sourceId = common.sanitizeText(sourceId, getConfig()); + targetId = common.sanitizeText(targetId, getConfig()); + tag = common.sanitizeText(tag, getConfig()); if (!sourceId || commits[sourceId] === undefined) { let error = new Error( @@ -338,7 +337,7 @@ export const cherryPick = function (sourceId, targetId, tag) { } }; export const checkout = function (branch) { - branch = common.sanitizeText(branch, configApi.getConfig()); + branch = common.sanitizeText(branch, getConfig()); if (branches[branch] === undefined) { let error = new Error( 'Trying to checkout branch which is not yet created. (Help try using "branch ' + branch + '")' @@ -502,7 +501,7 @@ export const commitType = { }; export default { - getConfig: () => configApi.getConfig().gitGraph, + getConfig: () => getConfig().gitGraph, setDirection, setOptions, getOptions, diff --git a/packages/mermaid/src/diagrams/git/layout.js b/packages/mermaid/src/diagrams/git/layout.js index 0dbe577659..2a782a0798 100644 --- a/packages/mermaid/src/diagrams/git/layout.js +++ b/packages/mermaid/src/diagrams/git/layout.js @@ -1,4 +1,4 @@ -import { getConfig } from '../../config.js'; +import { getConfig } from '../../diagram-api/diagramAPI.js'; export default (dir, _branches) => { const config = getConfig().gitGraph; diff --git a/packages/mermaid/src/diagrams/mindmap/mindmapDb.js b/packages/mermaid/src/diagrams/mindmap/mindmapDb.js index 9413581d64..4206a4a260 100644 --- a/packages/mermaid/src/diagrams/mindmap/mindmapDb.js +++ b/packages/mermaid/src/diagrams/mindmap/mindmapDb.js @@ -1,4 +1,4 @@ -import { getConfig } from '../../config.js'; +import { getConfig } from '../../diagram-api/diagramAPI.js'; import { sanitizeText as _sanitizeText } from '../../diagrams/common/common.js'; import { log } from '../../logger.js'; diff --git a/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.js b/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.js index 7e741657b9..3fe9e1d510 100644 --- a/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.js +++ b/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.js @@ -1,7 +1,7 @@ /** Created by knut on 14-12-11. */ import { select } from 'd3'; import { log } from '../../logger.js'; -import { getConfig } from '../../config.js'; +import { getConfig } from '../../diagram-api/diagramAPI.js'; import { setupGraphViewbox } from '../../setupGraphViewbox.js'; import svgDraw from './svgDraw.js'; import cytoscape from 'cytoscape/dist/cytoscape.umd.js'; diff --git a/packages/mermaid/src/diagrams/pie/pie.spec.ts b/packages/mermaid/src/diagrams/pie/pie.spec.ts index 564e12f0f1..47a9a95f55 100644 --- a/packages/mermaid/src/diagrams/pie/pie.spec.ts +++ b/packages/mermaid/src/diagrams/pie/pie.spec.ts @@ -1,7 +1,7 @@ // @ts-ignore: JISON doesn't support types import { parser } from './parser/pie.jison'; import { DEFAULT_PIE_DB, db } from './pieDb.js'; -import { setConfig } from '../../config.js'; +import { setConfig } from '../../diagram-api/diagramAPI.js'; setConfig({ securityLevel: 'strict', diff --git a/packages/mermaid/src/diagrams/pie/pieDb.ts b/packages/mermaid/src/diagrams/pie/pieDb.ts index ce82216dc5..e2eebea543 100644 --- a/packages/mermaid/src/diagrams/pie/pieDb.ts +++ b/packages/mermaid/src/diagrams/pie/pieDb.ts @@ -1,5 +1,5 @@ import { log } from '../../logger.js'; -import { getConfig as commonGetConfig } from '../../config.js'; +import { getConfig as commonGetConfig } from '../../diagram-api/diagramAPI.js'; import { sanitizeText } from '../common/common.js'; import { setAccTitle, diff --git a/packages/mermaid/src/diagrams/pie/pieRenderer.ts b/packages/mermaid/src/diagrams/pie/pieRenderer.ts index 80f4f0a5a4..5f6f653c31 100644 --- a/packages/mermaid/src/diagrams/pie/pieRenderer.ts +++ b/packages/mermaid/src/diagrams/pie/pieRenderer.ts @@ -3,7 +3,7 @@ import { scaleOrdinal, pie as d3pie, arc } from 'd3'; import { log } from '../../logger.js'; import { configureSvgSize } from '../../setupGraphViewbox.js'; -import { getConfig } from '../../config.js'; +import { getConfig } from '../../diagram-api/diagramAPI.js'; import { cleanAndMerge, parseFontSize } from '../../utils.js'; import type { DrawDefinition, Group, SVG } from '../../diagram-api/types.js'; import type { D3Sections, PieDB, Sections } from './pieTypes.js'; diff --git a/packages/mermaid/src/diagrams/quadrant-chart/quadrantDb.ts b/packages/mermaid/src/diagrams/quadrant-chart/quadrantDb.ts index 0dad6dfdd5..c3a79c911e 100644 --- a/packages/mermaid/src/diagrams/quadrant-chart/quadrantDb.ts +++ b/packages/mermaid/src/diagrams/quadrant-chart/quadrantDb.ts @@ -1,4 +1,4 @@ -import * as configApi from '../../config.js'; +import { getConfig } from '../../diagram-api/diagramAPI.js'; import { sanitizeText } from '../common/common.js'; import { setAccTitle, @@ -11,7 +11,7 @@ import { } from '../common/commonDb.js'; import { QuadrantBuilder } from './quadrantBuilder.js'; -const config = configApi.getConfig(); +const config = getConfig(); function textSanitizer(text: string) { return sanitizeText(text.trim(), config); @@ -66,7 +66,7 @@ function setHeight(height: number) { } function getQuadrantData() { - const config = configApi.getConfig(); + const config = getConfig(); const { themeVariables, quadrantChart: quadrantChartConfig } = config; if (quadrantChartConfig) { quadrantBuilder.setConfig(quadrantChartConfig); diff --git a/packages/mermaid/src/diagrams/quadrant-chart/quadrantRenderer.ts b/packages/mermaid/src/diagrams/quadrant-chart/quadrantRenderer.ts index 9dd309b533..d272dccd4a 100644 --- a/packages/mermaid/src/diagrams/quadrant-chart/quadrantRenderer.ts +++ b/packages/mermaid/src/diagrams/quadrant-chart/quadrantRenderer.ts @@ -1,6 +1,6 @@ // @ts-nocheck - don't check until handle it import { select } from 'd3'; -import * as configApi from '../../config.js'; +import { getConfig } from '../../diagram-api/diagramAPI.js'; import { log } from '../../logger.js'; import { configureSvgSize } from '../../setupGraphViewbox.js'; import type { Diagram } from '../../Diagram.js'; @@ -27,7 +27,7 @@ export const draw = (txt: string, id: string, _version: string, diagObj: Diagram return `translate(${data.x}, ${data.y}) rotate(${data.rotation || 0})`; } - const conf = configApi.getConfig(); + const conf = getConfig(); log.debug('Rendering quadrant chart\n' + txt); diff --git a/packages/mermaid/src/diagrams/requirement/requirementDb.js b/packages/mermaid/src/diagrams/requirement/requirementDb.js index 325e95ee20..9357e2a660 100644 --- a/packages/mermaid/src/diagrams/requirement/requirementDb.js +++ b/packages/mermaid/src/diagrams/requirement/requirementDb.js @@ -1,4 +1,4 @@ -import * as configApi from '../../config.js'; +import { getConfig } from '../../diagram-api/diagramAPI.js'; import { log } from '../../logger.js'; import { @@ -144,7 +144,7 @@ export default { VerifyType, Relationships, - getConfig: () => configApi.getConfig().req, + getConfig: () => getConfig().req, addRequirement, getRequirements, diff --git a/packages/mermaid/src/diagrams/requirement/requirementRenderer.js b/packages/mermaid/src/diagrams/requirement/requirementRenderer.js index 49b7828651..2af2067ad8 100644 --- a/packages/mermaid/src/diagrams/requirement/requirementRenderer.js +++ b/packages/mermaid/src/diagrams/requirement/requirementRenderer.js @@ -5,7 +5,7 @@ import { log } from '../../logger.js'; import { configureSvgSize } from '../../setupGraphViewbox.js'; import common from '../common/common.js'; import markers from './requirementMarkers.js'; -import { getConfig } from '../../config.js'; +import { getConfig } from '../../diagram-api/diagramAPI.js'; let conf = {}; let relCnt = 0; diff --git a/packages/mermaid/src/diagrams/sankey/sankeyDB.ts b/packages/mermaid/src/diagrams/sankey/sankeyDB.ts index 8b3a22c5a0..d6fd90373c 100644 --- a/packages/mermaid/src/diagrams/sankey/sankeyDB.ts +++ b/packages/mermaid/src/diagrams/sankey/sankeyDB.ts @@ -1,4 +1,4 @@ -import * as configApi from '../../config.js'; +import { getConfig } from '../../diagram-api/diagramAPI.js'; import common from '../common/common.js'; import { setAccTitle, @@ -42,7 +42,7 @@ class SankeyNode { } const findOrCreateNode = (ID: string): SankeyNode => { - ID = common.sanitizeText(ID, configApi.getConfig()); + ID = common.sanitizeText(ID, getConfig()); if (!nodesMap[ID]) { nodesMap[ID] = new SankeyNode(ID); @@ -65,7 +65,7 @@ const getGraph = () => ({ export default { nodesMap, - getConfig: () => configApi.getConfig().sankey, + getConfig: () => getConfig().sankey, getNodes, getLinks, getGraph, diff --git a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts index 9f5b3c1720..0179e715b7 100644 --- a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts +++ b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts @@ -1,5 +1,5 @@ import type { Diagram } from '../../Diagram.js'; -import * as configApi from '../../config.js'; +import { getConfig, defaultConfig } from '../../diagram-api/diagramAPI.js'; import { select as d3select, @@ -41,8 +41,8 @@ const alignmentsMap: Record< */ export const draw = function (text: string, id: string, _version: string, diagObj: Diagram): void { // Get Sankey config - const { securityLevel, sankey: conf } = configApi.getConfig(); - const defaultSankeyConfig = configApi!.defaultConfig!.sankey!; + const { securityLevel, sankey: conf } = getConfig(); + const defaultSankeyConfig = defaultConfig!.sankey!; // TODO: // This code repeats for every diagram diff --git a/packages/mermaid/src/diagrams/sequence/sequenceDb.js b/packages/mermaid/src/diagrams/sequence/sequenceDb.js index 6c3f1f64df..717cc8c09e 100644 --- a/packages/mermaid/src/diagrams/sequence/sequenceDb.js +++ b/packages/mermaid/src/diagrams/sequence/sequenceDb.js @@ -1,4 +1,4 @@ -import * as configApi from '../../config.js'; +import { getConfig } from '../../diagram-api/diagramAPI.js'; import { log } from '../../logger.js'; import { sanitizeText } from '../common/common.js'; import { @@ -196,7 +196,7 @@ export const autoWrap = () => { if (wrapEnabled !== undefined) { return wrapEnabled; } - return configApi.getConfig().sequence.wrap; + return getConfig().sequence.wrap; }; export const clear = function () { @@ -251,7 +251,7 @@ export const parseBoxData = function (str) { color: color, text: title !== undefined - ? sanitizeText(title.replace(/^:?(?:no)?wrap:/, ''), configApi.getConfig()) + ? sanitizeText(title.replace(/^:?(?:no)?wrap:/, ''), getConfig()) : undefined, wrap: title !== undefined @@ -337,7 +337,7 @@ export const addLinks = function (actorId, text) { const actor = getActor(actorId); // JSON.parse the text try { - let sanitizedText = sanitizeText(text.text, configApi.getConfig()); + let sanitizedText = sanitizeText(text.text, getConfig()); sanitizedText = sanitizedText.replace(/&/g, '&'); sanitizedText = sanitizedText.replace(/=/g, '='); const links = JSON.parse(sanitizedText); @@ -353,7 +353,7 @@ export const addALink = function (actorId, text) { const actor = getActor(actorId); try { const links = {}; - let sanitizedText = sanitizeText(text.text, configApi.getConfig()); + let sanitizedText = sanitizeText(text.text, getConfig()); var sep = sanitizedText.indexOf('@'); sanitizedText = sanitizedText.replace(/&/g, '&'); sanitizedText = sanitizedText.replace(/=/g, '='); @@ -387,7 +387,7 @@ export const addProperties = function (actorId, text) { const actor = getActor(actorId); // JSON.parse the text try { - let sanitizedText = sanitizeText(text.text, configApi.getConfig()); + let sanitizedText = sanitizeText(text.text, getConfig()); const properties = JSON.parse(sanitizedText); // add the deserialized text to the actor's property field. insertProperties(actor, properties); @@ -629,7 +629,7 @@ export default { getBoxes, getDiagramTitle, setDiagramTitle, - getConfig: () => configApi.getConfig().sequence, + getConfig: () => getConfig().sequence, clear, parseMessage, parseBoxData, diff --git a/packages/mermaid/src/diagrams/sequence/sequenceDiagram.spec.js b/packages/mermaid/src/diagrams/sequence/sequenceDiagram.spec.js index 77ac7c45cd..8a7e2281cb 100644 --- a/packages/mermaid/src/diagrams/sequence/sequenceDiagram.spec.js +++ b/packages/mermaid/src/diagrams/sequence/sequenceDiagram.spec.js @@ -1,5 +1,5 @@ import { vi } from 'vitest'; -import * as configApi from '../../config.js'; +import { setSiteConfig } from '../../diagram-api/diagramAPI.js'; import mermaidAPI from '../../mermaidAPI.js'; import { Diagram, getDiagramFromText } from '../../Diagram.js'; import { addDiagrams } from '../../diagram-api/diagram-orchestration.js'; @@ -1610,7 +1610,7 @@ describe('when rendering a sequenceDiagram APA', function () { wrap: false, mirrorActors: false, }; - configApi.setSiteConfig({ logLevel: 5, sequence: conf }); + setSiteConfig({ logLevel: 5, sequence: conf }); }); let conf; beforeEach(function () { @@ -1631,7 +1631,7 @@ describe('when rendering a sequenceDiagram APA', function () { wrap: false, mirrorActors: false, }; - configApi.setSiteConfig({ logLevel: 5, sequence: conf }); + setSiteConfig({ logLevel: 5, sequence: conf }); diagram = new Diagram(` sequenceDiagram Alice->Bob:Hello Bob, how are you? diff --git a/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts b/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts index a41c3877fe..b8962395ee 100644 --- a/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts +++ b/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts @@ -4,7 +4,7 @@ import svgDraw, { ACTOR_TYPE_WIDTH, drawText, fixLifeLineHeights } from './svgDr import { log } from '../../logger.js'; import common from '../common/common.js'; import * as svgDrawCommon from '../common/svgDrawCommon.js'; -import * as configApi from '../../config.js'; +import { getConfig } from '../../diagram-api/diagramAPI.js'; import assignWithDepth from '../../assignWithDepth.js'; import utils from '../../utils.js'; import { configureSvgSize } from '../../setupGraphViewbox.js'; @@ -91,7 +91,7 @@ export const bounds = { stopy: undefined, }; this.verticalPos = 0; - setConf(configApi.getConfig()); + setConf(getConfig()); }, updateVal: function (obj, key, val, fun) { if (obj[key] === undefined) { @@ -747,7 +747,7 @@ function adjustCreatedDestroyedData( * @param diagObj - A standard diagram containing the db and the text and type etc of the diagram */ export const draw = function (_text: string, id: string, _version: string, diagObj: Diagram) { - const { securityLevel, sequence } = configApi.getConfig(); + const { securityLevel, sequence } = getConfig(); conf = sequence; // Handle root and Document for when rendering in sandbox mode let sandboxElement; diff --git a/packages/mermaid/src/diagrams/state/shapes.js b/packages/mermaid/src/diagrams/state/shapes.js index e82a1ad61a..b8cfe5bda1 100644 --- a/packages/mermaid/src/diagrams/state/shapes.js +++ b/packages/mermaid/src/diagrams/state/shapes.js @@ -3,7 +3,7 @@ import idCache from './id-cache.js'; import stateDb from './stateDb.js'; import utils from '../../utils.js'; import common from '../common/common.js'; -import { getConfig } from '../../config.js'; +import { getConfig } from '../../diagram-api/diagramAPI.js'; import { log } from '../../logger.js'; /** diff --git a/packages/mermaid/src/diagrams/state/stateDb.js b/packages/mermaid/src/diagrams/state/stateDb.js index 0253c5bcf0..7e5e72fe09 100644 --- a/packages/mermaid/src/diagrams/state/stateDb.js +++ b/packages/mermaid/src/diagrams/state/stateDb.js @@ -1,7 +1,7 @@ import { log } from '../../logger.js'; import { generateId } from '../../utils.js'; import common from '../common/common.js'; -import * as configApi from '../../config.js'; +import { getConfig } from '../../diagram-api/diagramAPI.js'; import { setAccTitle, getAccTitle, @@ -253,7 +253,7 @@ export const addState = function ( currentDocument.states[trimmedId].note = note; currentDocument.states[trimmedId].note.text = common.sanitizeText( currentDocument.states[trimmedId].note.text, - configApi.getConfig() + getConfig() ); } @@ -398,7 +398,7 @@ export function addRelationObjs(item1, item2, relationTitle) { currentDocument.relations.push({ id1, id2, - relationTitle: common.sanitizeText(relationTitle, configApi.getConfig()), + relationTitle: common.sanitizeText(relationTitle, getConfig()), }); } @@ -423,7 +423,7 @@ export const addRelation = function (item1, item2, title) { currentDocument.relations.push({ id1, id2, - title: common.sanitizeText(title, configApi.getConfig()), + title: common.sanitizeText(title, getConfig()), }); } }; @@ -431,7 +431,7 @@ export const addRelation = function (item1, item2, title) { export const addDescription = function (id, descr) { const theState = currentDocument.states[id]; const _descr = descr.startsWith(':') ? descr.replace(':', '').trim() : descr; - theState.descriptions.push(common.sanitizeText(_descr, configApi.getConfig())); + theState.descriptions.push(common.sanitizeText(_descr, getConfig())); }; export const cleanupLabel = function (label) { @@ -542,7 +542,7 @@ const setDirection = (dir) => { const trimColon = (str) => (str && str[0] === ':' ? str.substr(1).trim() : str.trim()); export default { - getConfig: () => configApi.getConfig().state, + getConfig: () => getConfig().state, addState, clear, getState, diff --git a/packages/mermaid/src/diagrams/state/stateRenderer-v2.js b/packages/mermaid/src/diagrams/state/stateRenderer-v2.js index 0d3117b206..482e37caee 100644 --- a/packages/mermaid/src/diagrams/state/stateRenderer-v2.js +++ b/packages/mermaid/src/diagrams/state/stateRenderer-v2.js @@ -1,6 +1,6 @@ import * as graphlib from 'dagre-d3-es/src/graphlib/index.js'; import { select } from 'd3'; -import { getConfig } from '../../config.js'; +import { getConfig } from '../../diagram-api/diagramAPI.js'; import { render } from '../../dagre-wrapper/index.js'; import { log } from '../../logger.js'; import { configureSvgSize } from '../../setupGraphViewbox.js'; diff --git a/packages/mermaid/src/diagrams/state/stateRenderer.js b/packages/mermaid/src/diagrams/state/stateRenderer.js index 1b3e0f27ed..17b674cb5f 100644 --- a/packages/mermaid/src/diagrams/state/stateRenderer.js +++ b/packages/mermaid/src/diagrams/state/stateRenderer.js @@ -4,7 +4,7 @@ import * as graphlib from 'dagre-d3-es/src/graphlib/index.js'; import { log } from '../../logger.js'; import common from '../common/common.js'; import { drawState, addTitleAndBox, drawEdge } from './shapes.js'; -import { getConfig } from '../../config.js'; +import { getConfig } from '../../diagram-api/diagramAPI.js'; import { configureSvgSize } from '../../setupGraphViewbox.js'; // TODO Move conf object to main conf in mermaidAPI diff --git a/packages/mermaid/src/diagrams/timeline/timelineRenderer.ts b/packages/mermaid/src/diagrams/timeline/timelineRenderer.ts index ee351d905b..2f1f156899 100644 --- a/packages/mermaid/src/diagrams/timeline/timelineRenderer.ts +++ b/packages/mermaid/src/diagrams/timeline/timelineRenderer.ts @@ -3,7 +3,7 @@ import type { Selection } from 'd3'; import { select } from 'd3'; import svgDraw from './svgDraw.js'; import { log } from '../../logger.js'; -import { getConfig } from '../../config.js'; +import { getConfig } from '../../diagram-api/diagramAPI.js'; import { setupGraphViewbox } from '../../setupGraphViewbox.js'; import type { Diagram } from '../../Diagram.js'; import type { MermaidConfig } from '../../config.type.js'; diff --git a/packages/mermaid/src/diagrams/user-journey/journeyDb.js b/packages/mermaid/src/diagrams/user-journey/journeyDb.js index 4d71c2e9dc..a2b95b899a 100644 --- a/packages/mermaid/src/diagrams/user-journey/journeyDb.js +++ b/packages/mermaid/src/diagrams/user-journey/journeyDb.js @@ -1,4 +1,4 @@ -import * as configApi from '../../config.js'; +import { getConfig } from '../../diagram-api/diagramAPI.js'; import { setAccTitle, getAccTitle, @@ -113,7 +113,7 @@ const getActors = function () { }; export default { - getConfig: () => configApi.getConfig().journey, + getConfig: () => getConfig().journey, clear, setDiagramTitle, getDiagramTitle, diff --git a/packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts b/packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts index 28c83f19d7..13eb31a024 100644 --- a/packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts +++ b/packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts @@ -1,7 +1,7 @@ // @ts-nocheck TODO: fix file import { select } from 'd3'; import svgDraw from './svgDraw.js'; -import { getConfig } from '../../config.js'; +import { getConfig } from '../../diagram-api/diagramAPI.js'; import { configureSvgSize } from '../../setupGraphViewbox.js'; export const setConf = function (cnf) { diff --git a/packages/mermaid/src/rendering-util/selectSvgElement.ts b/packages/mermaid/src/rendering-util/selectSvgElement.ts index ae106ef78d..cc1d021fdd 100644 --- a/packages/mermaid/src/rendering-util/selectSvgElement.ts +++ b/packages/mermaid/src/rendering-util/selectSvgElement.ts @@ -1,5 +1,5 @@ import { select } from 'd3'; -import { getConfig } from '../config.js'; +import { getConfig } from '../diagram-api/diagramAPI.js'; import type { HTML, SVG } from '../diagram-api/types.js'; /** From 01203d884cfabf8fb7082cec672909f6a7adebb1 Mon Sep 17 00:00:00 2001 From: Hans Blankenhaus <dev.blankenhaus@gmail.com> Date: Sun, 8 Oct 2023 15:32:40 +0200 Subject: [PATCH 103/457] fix classDB --- packages/mermaid/src/diagrams/class/classDb.ts | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/mermaid/src/diagrams/class/classDb.ts b/packages/mermaid/src/diagrams/class/classDb.ts index 268ab8ff2e..312dda7a69 100644 --- a/packages/mermaid/src/diagrams/class/classDb.ts +++ b/packages/mermaid/src/diagrams/class/classDb.ts @@ -37,7 +37,7 @@ let functions: any[] = []; const sanitizeText = (txt: string) => common.sanitizeText(txt, getConfig()); const splitClassNameAndType = function (_id: string) { - const id = common.sanitizeText(_id, configApi.getConfig()); + const id = common.sanitizeText(_id, getConfig()); let genericType = ''; let className = id; @@ -51,7 +51,7 @@ const splitClassNameAndType = function (_id: string) { }; export const setClassLabel = function (_id: string, label: string) { - const id = common.sanitizeText(_id, configApi.getConfig()); + const id = common.sanitizeText(_id, getConfig()); if (label) { label = sanitizeText(label); } @@ -67,14 +67,14 @@ export const setClassLabel = function (_id: string, label: string) { * @public */ export const addClass = function (_id: string) { - const id = common.sanitizeText(_id, configApi.getConfig()); + const id = common.sanitizeText(_id, getConfig()); const { className, type } = splitClassNameAndType(id); // Only add class if not exists if (Object.hasOwn(classes, className)) { return; } // alert('Adding class: ' + className); - const name = common.sanitizeText(className, configApi.getConfig()); + const name = common.sanitizeText(className, getConfig()); // alert('Adding class after: ' + name); classes[name] = { id: name, @@ -97,7 +97,7 @@ export const addClass = function (_id: string) { * @public */ export const lookUpDomId = function (_id: string): string { - const id = common.sanitizeText(_id, configApi.getConfig()); + const id = common.sanitizeText(_id, getConfig()); if (id in classes) { return classes[id].domId; } @@ -297,7 +297,7 @@ export const setClickEvent = function (ids: string, functionName: string, functi }; const setClickFunc = function (_domId: string, functionName: string, functionArgs: string) { - const domId = common.sanitizeText(_domId, configApi.getConfig()); + const domId = common.sanitizeText(_domId, getConfig()); const config = getConfig(); if (config.securityLevel !== 'loose') { return; From 497ffde9fef294a9199e0dcec0e281c6ec1b516e Mon Sep 17 00:00:00 2001 From: Hans Blankenhaus <dev.blankenhaus@gmail.com> Date: Sun, 8 Oct 2023 18:22:27 +0200 Subject: [PATCH 104/457] undo changes for commonDb to avoid circular imports --- packages/mermaid/src/diagrams/common/commonDb.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mermaid/src/diagrams/common/commonDb.ts b/packages/mermaid/src/diagrams/common/commonDb.ts index cc5b226779..e4b9c3539f 100644 --- a/packages/mermaid/src/diagrams/common/commonDb.ts +++ b/packages/mermaid/src/diagrams/common/commonDb.ts @@ -1,5 +1,5 @@ import { sanitizeText as _sanitizeText } from './common.js'; -import { getConfig } from '../../diagram-api/diagramAPI.js'; +import { getConfig } from '../../config.js'; let accTitle = ''; let diagramTitle = ''; From 4559ba625c8041e149da0215fcb5dc0bf97330d9 Mon Sep 17 00:00:00 2001 From: Jakub Mikulas <jakub.mikulas@code-intelligence.com> Date: Tue, 3 Oct 2023 15:34:31 +0200 Subject: [PATCH 105/457] docs(integrations): add Mermaid for Slack --- docs/ecosystem/integrations-community.md | 2 ++ packages/mermaid/src/docs/ecosystem/integrations-community.md | 2 ++ 2 files changed, 4 insertions(+) diff --git a/docs/ecosystem/integrations-community.md b/docs/ecosystem/integrations-community.md index 2c67cc3618..db1649ff69 100644 --- a/docs/ecosystem/integrations-community.md +++ b/docs/ecosystem/integrations-community.md @@ -99,6 +99,8 @@ Communication tools and platforms - [phpbb-ext-mermaid](https://github.com/AlfredoRamos/phpbb-ext-mermaid) - [NodeBB](https://nodebb.org) - [Mermaid Plugin](https://www.npmjs.com/package/nodebb-plugin-mermaid) +- [Slack](https://slack.com) + - [Mermaid for Slack](https://github.com/JackuB/mermaid-for-slack) ### Wikis diff --git a/packages/mermaid/src/docs/ecosystem/integrations-community.md b/packages/mermaid/src/docs/ecosystem/integrations-community.md index 3a3a20de8f..556f644303 100644 --- a/packages/mermaid/src/docs/ecosystem/integrations-community.md +++ b/packages/mermaid/src/docs/ecosystem/integrations-community.md @@ -97,6 +97,8 @@ Communication tools and platforms - [phpbb-ext-mermaid](https://github.com/AlfredoRamos/phpbb-ext-mermaid) - [NodeBB](https://nodebb.org) - [Mermaid Plugin](https://www.npmjs.com/package/nodebb-plugin-mermaid) +- [Slack](https://slack.com) + - [Mermaid for Slack](https://github.com/JackuB/mermaid-for-slack) ### Wikis From 444e81ae8a01d4a718142aa2413892c1455ed190 Mon Sep 17 00:00:00 2001 From: "Mr.Hope" <mister-hope@outlook.com> Date: Mon, 9 Oct 2023 11:08:46 +0800 Subject: [PATCH 106/457] fix(class): avoid duplicate definition of fill --- packages/mermaid/src/diagrams/class/styles.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/mermaid/src/diagrams/class/styles.js b/packages/mermaid/src/diagrams/class/styles.js index f12f609f91..5f99a8b913 100644 --- a/packages/mermaid/src/diagrams/class/styles.js +++ b/packages/mermaid/src/diagrams/class/styles.js @@ -1,7 +1,6 @@ const getStyles = (options) => `g.classGroup text { - fill: ${options.nodeBorder}; - fill: ${options.classText}; + fill: ${options.nodeBorder || options.classText}; stroke: none; font-family: ${options.fontFamily}; font-size: 10px; From 1fec55d5f7939ed6bc89c2d08dc15cf0015869cf Mon Sep 17 00:00:00 2001 From: "Mr.Hope" <mister-hope@outlook.com> Date: Mon, 9 Oct 2023 11:25:09 +0800 Subject: [PATCH 107/457] feat(gantt): update styles --- packages/mermaid/src/diagrams/gantt/styles.js | 41 ++++++++----------- 1 file changed, 16 insertions(+), 25 deletions(-) diff --git a/packages/mermaid/src/diagrams/gantt/styles.js b/packages/mermaid/src/diagrams/gantt/styles.js index 8193130bbc..626ed4e0f1 100644 --- a/packages/mermaid/src/diagrams/gantt/styles.js +++ b/packages/mermaid/src/diagrams/gantt/styles.js @@ -1,9 +1,9 @@ const getStyles = (options) => ` .mermaid-main-font { - font-family: "trebuchet ms", verdana, arial, sans-serif; - font-family: var(--mermaid-font-family); + font-family: var(--mermaid-font-family, "trebuchet ms", verdana, arial, sans-serif); } + .exclude-range { fill: ${options.excludeBkgColor}; } @@ -45,11 +45,7 @@ const getStyles = (options) => .sectionTitle { text-anchor: start; - // font-size: ${options.ganttFontSize}; - // text-height: 14px; - font-family: 'trebuchet ms', verdana, arial, sans-serif; - font-family: var(--mermaid-font-family); - + font-family: var(--mermaid-font-family, "trebuchet ms", verdana, arial, sans-serif); } @@ -59,10 +55,11 @@ const getStyles = (options) => stroke: ${options.gridColor}; opacity: 0.8; shape-rendering: crispEdges; - text { - font-family: ${options.fontFamily}; - fill: ${options.textColor}; - } + } + + .grid .tick text { + font-family: ${options.fontFamily}; + fill: ${options.textColor}; } .grid path { @@ -89,33 +86,27 @@ const getStyles = (options) => .taskText { text-anchor: middle; - font-family: 'trebuchet ms', verdana, arial, sans-serif; - font-family: var(--mermaid-font-family); + font-family: var(--mermaid-font-family, "trebuchet ms", verdana, arial, sans-serif); } - // .taskText:not([font-size]) { - // font-size: ${options.ganttFontSize}; - // } - .taskTextOutsideRight { fill: ${options.taskTextDarkColor}; text-anchor: start; - // font-size: ${options.ganttFontSize}; - font-family: 'trebuchet ms', verdana, arial, sans-serif; - font-family: var(--mermaid-font-family); - + font-family: var(--mermaid-font-family, "trebuchet ms", verdana, arial, sans-serif); } .taskTextOutsideLeft { fill: ${options.taskTextDarkColor}; text-anchor: end; - // font-size: ${options.ganttFontSize}; } + /* Special case clickable */ + .task.clickable { cursor: pointer; } + .taskText.clickable { cursor: pointer; fill: ${options.taskTextClickableColor} !important; @@ -134,6 +125,7 @@ const getStyles = (options) => font-weight: bold; } + /* Specific task settings for the sections*/ .taskText0, @@ -255,9 +247,8 @@ const getStyles = (options) => .titleText { text-anchor: middle; font-size: 18px; - fill: ${options.textColor} ; - font-family: 'trebuchet ms', verdana, arial, sans-serif; - font-family: var(--mermaid-font-family); + fill: ${options.titleColor || options.textColor}; + font-family: var(--mermaid-font-family, "trebuchet ms", verdana, arial, sans-serif); } `; From 2a9eb7f1238819d92ba3bd336a1916cbabc819b4 Mon Sep 17 00:00:00 2001 From: Harshit Anand <harshitanand283@gmail.com> Date: Mon, 9 Oct 2023 21:13:53 +0530 Subject: [PATCH 108/457] fix: target blank removed from anchor tag --- packages/mermaid/src/diagrams/common/common.ts | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/packages/mermaid/src/diagrams/common/common.ts b/packages/mermaid/src/diagrams/common/common.ts index e0ca2929db..25c6250a9c 100644 --- a/packages/mermaid/src/diagrams/common/common.ts +++ b/packages/mermaid/src/diagrams/common/common.ts @@ -28,6 +28,21 @@ export const removeScript = (txt: string): string => { return DOMPurify.sanitize(txt); }; +DOMPurify.addHook('afterSanitizeAttributes', function (node) { + // set all elements owning target to target=_blank + if ('target' in node) { + node.setAttribute('target', '_blank'); + node.setAttribute('rel', 'noopener noreferrer'); + } + // set non-HTML/MathML links to xlink:show=new + if ( + !node.hasAttribute('target') && + (node.hasAttribute('xlink:href') || node.hasAttribute('href')) + ) { + node.setAttribute('xlink:show', 'new'); + } +}); + const sanitizeMore = (text: string, config: MermaidConfig) => { if (config.flowchart?.htmlLabels !== false) { const level = config.securityLevel; From cdb4639aa401959baa3c0af0c3ba71996d868144 Mon Sep 17 00:00:00 2001 From: RounakJoshi09 <rounakjsh783@gmail.com> Date: Tue, 10 Oct 2023 00:16:05 +0530 Subject: [PATCH 109/457] bug/#3251_linkStyle-can't-specify-ids Fixed --- packages/mermaid/src/diagrams/flowchart/flowDb.js | 6 ++++++ .../src/diagrams/flowchart/parser/flow-style.spec.js | 8 ++++++++ 2 files changed, 14 insertions(+) diff --git a/packages/mermaid/src/diagrams/flowchart/flowDb.js b/packages/mermaid/src/diagrams/flowchart/flowDb.js index a87bf558de..9c9442ce27 100644 --- a/packages/mermaid/src/diagrams/flowchart/flowDb.js +++ b/packages/mermaid/src/diagrams/flowchart/flowDb.js @@ -192,6 +192,12 @@ export const updateLinkInterpolate = function (positions, interp) { */ export const updateLink = function (positions, style) { positions.forEach(function (pos) { + if (pos >= edges.length) { + let error = new Error( + `Incorrect index ${pos} of linkStyle. (Help: Index must be from 0 to ${edges.length - 1})` + ); + throw error; + } if (pos === 'default') { edges.defaultStyle = style; } else { diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow-style.spec.js b/packages/mermaid/src/diagrams/flowchart/parser/flow-style.spec.js index 1ab7543085..eb56c24f39 100644 --- a/packages/mermaid/src/diagrams/flowchart/parser/flow-style.spec.js +++ b/packages/mermaid/src/diagrams/flowchart/parser/flow-style.spec.js @@ -286,6 +286,14 @@ describe('[Style] when parsing', () => { expect(edges[0].type).toBe('arrow_point'); }); + it('should handle style definitions within number of edges', function () { + const res = flow.parser.parse('graph TD\n' + 'A-->B\n' + 'linkStyle 0 stroke-width:1px;'); + + const edges = flow.parser.yy.getEdges(); + + expect(edges[0].style[0]).toBe('stroke-width:1px'); + }); + it('should handle multi-numbered style definitions with more then 1 digit in a row', function () { const res = flow.parser.parse( 'graph TD\n' + From c279a9f9ed10ca7f0da62f2287363d69d92aa012 Mon Sep 17 00:00:00 2001 From: Harshit Anand <harshitanand283@gmail.com> Date: Tue, 10 Oct 2023 01:05:55 +0530 Subject: [PATCH 110/457] fix: clean link unit test resolved --- packages/mermaid/src/diagrams/common/common.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mermaid/src/diagrams/common/common.ts b/packages/mermaid/src/diagrams/common/common.ts index 25c6250a9c..e9d5ca42d3 100644 --- a/packages/mermaid/src/diagrams/common/common.ts +++ b/packages/mermaid/src/diagrams/common/common.ts @@ -30,7 +30,7 @@ export const removeScript = (txt: string): string => { DOMPurify.addHook('afterSanitizeAttributes', function (node) { // set all elements owning target to target=_blank - if ('target' in node) { + if (node.tagName === 'A' && node.hasAttribute('href') && 'target' in node) { node.setAttribute('target', '_blank'); node.setAttribute('rel', 'noopener noreferrer'); } From ce3d9fcddec74eca6baac8e7f2a1341c1f2171bf Mon Sep 17 00:00:00 2001 From: RounakJoshi09 <rounakjsh783@gmail.com> Date: Tue, 10 Oct 2023 11:09:30 +0530 Subject: [PATCH 111/457] Added test suggested on PR --- .../mermaid/src/diagrams/flowchart/flowDb.js | 2 +- .../flowchart/parser/flow-style.spec.js | 18 +++++++++++++++++- 2 files changed, 18 insertions(+), 2 deletions(-) diff --git a/packages/mermaid/src/diagrams/flowchart/flowDb.js b/packages/mermaid/src/diagrams/flowchart/flowDb.js index 9c9442ce27..5e3b7d463e 100644 --- a/packages/mermaid/src/diagrams/flowchart/flowDb.js +++ b/packages/mermaid/src/diagrams/flowchart/flowDb.js @@ -194,7 +194,7 @@ export const updateLink = function (positions, style) { positions.forEach(function (pos) { if (pos >= edges.length) { let error = new Error( - `Incorrect index ${pos} of linkStyle. (Help: Index must be from 0 to ${edges.length - 1})` + `The index for linkStyle is out of bounds. (Help: Ensure that the index is within the range of existing edges.)` ); throw error; } diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow-style.spec.js b/packages/mermaid/src/diagrams/flowchart/parser/flow-style.spec.js index eb56c24f39..4b461576b1 100644 --- a/packages/mermaid/src/diagrams/flowchart/parser/flow-style.spec.js +++ b/packages/mermaid/src/diagrams/flowchart/parser/flow-style.spec.js @@ -287,7 +287,23 @@ describe('[Style] when parsing', () => { }); it('should handle style definitions within number of edges', function () { - const res = flow.parser.parse('graph TD\n' + 'A-->B\n' + 'linkStyle 0 stroke-width:1px;'); + try { + flow.parser.parse(`graph TD + A-->B + linkStyle 1 stroke-width:1px;`); + // Fail test if above expression doesn't throw anything. + expect(true).toBe(false); + } catch (e) { + expect(e.message).toBe( + `The index for linkStyle is out of bounds. (Help: Ensure that the index is within the range of existing edges.)` + ); + } + }); + + it('should handle style definitions within number of edges', function () { + const res = flow.parser.parse(`graph TD + A-->B + linkStyle 0 stroke-width:1px;`); const edges = flow.parser.yy.getEdges(); From d1b386b5c93d47b913d45f3172e2f46629fb3cbe Mon Sep 17 00:00:00 2001 From: Sidharth Vinod <sidharthv96@gmail.com> Date: Wed, 11 Oct 2023 11:32:24 +0530 Subject: [PATCH 112/457] Revert PH changes (#4903) --- packages/mermaid/src/docs/.vitepress/theme/index.ts | 7 ++++--- packages/mermaid/src/docs/index.md | 6 +++--- 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/packages/mermaid/src/docs/.vitepress/theme/index.ts b/packages/mermaid/src/docs/.vitepress/theme/index.ts index ae626558db..6561578106 100644 --- a/packages/mermaid/src/docs/.vitepress/theme/index.ts +++ b/packages/mermaid/src/docs/.vitepress/theme/index.ts @@ -6,8 +6,8 @@ import Mermaid from './Mermaid.vue'; import Contributors from '../components/Contributors.vue'; // @ts-ignore import HomePage from '../components/HomePage.vue'; -// @ts-ignore -import TopBar from '../components/TopBar.vue'; +// // @ts-ignore +// import TopBar from '../components/TopBar.vue'; import { getRedirect } from './redirect.js'; @@ -21,7 +21,8 @@ export default { ...DefaultTheme, Layout() { return h(Theme.Layout, null, { - 'home-hero-before': () => h(TopBar), + // Keeping this as comment as it took a lot of time to figure out how to add a component to the top bar. + // 'home-hero-before': () => h(TopBar), 'home-features-after': () => h(HomePage), }); }, diff --git a/packages/mermaid/src/docs/index.md b/packages/mermaid/src/docs/index.md index 378e9dfaba..218757b104 100644 --- a/packages/mermaid/src/docs/index.md +++ b/packages/mermaid/src/docs/index.md @@ -31,7 +31,7 @@ features: - title: 🏆 Award winning! details: 2019 JavaScript Open Source Award winner for "The Most Exciting Use of Technology". link: https://osawards.com/javascript/2019 - - title: 🎉 We are on Product Hunt! - details: We would love any and all support from the Mermaid community! - link: https://www.producthunt.com/posts/mermaid-chart + - title: 🥰 Mermaid + Mermaid Chart + details: Mermaid Chart is a major supporter of the Mermaid project. + link: https://www.mermaidchart.com/ --- From 7d3c5503378ba38df1539dd8839cd5fdeb804380 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Wed, 11 Oct 2023 06:30:11 +0000 Subject: [PATCH 113/457] chore(deps): update all minor dependencies --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index beb76282a3..44e2869f48 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "version": "10.2.4", "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.", "type": "module", - "packageManager": "pnpm@8.7.6", + "packageManager": "pnpm@8.9.0", "keywords": [ "diagram", "markdown", From 995449cbf665e8eb340a3f01aaccbc31488ab6e2 Mon Sep 17 00:00:00 2001 From: RounakJoshi09 <rounakjsh783@gmail.com> Date: Wed, 11 Oct 2023 20:40:14 +0530 Subject: [PATCH 114/457] Error Message Changed --- .../mermaid/src/diagrams/flowchart/flowDb.js | 7 +++--- .../flowchart/parser/flow-style.spec.js | 22 +++++++++---------- 2 files changed, 15 insertions(+), 14 deletions(-) diff --git a/packages/mermaid/src/diagrams/flowchart/flowDb.js b/packages/mermaid/src/diagrams/flowchart/flowDb.js index 5e3b7d463e..6cd3e2ecfa 100644 --- a/packages/mermaid/src/diagrams/flowchart/flowDb.js +++ b/packages/mermaid/src/diagrams/flowchart/flowDb.js @@ -193,10 +193,11 @@ export const updateLinkInterpolate = function (positions, interp) { export const updateLink = function (positions, style) { positions.forEach(function (pos) { if (pos >= edges.length) { - let error = new Error( - `The index for linkStyle is out of bounds. (Help: Ensure that the index is within the range of existing edges.)` + throw new Error( + `The index ${pos} for linkStyle is out of bounds. Valid indices for linkStyle are between 0 and ${ + edges.length - 1 + }. (Help: Ensure that the index is within the range of existing edges.)` ); - throw error; } if (pos === 'default') { edges.defaultStyle = style; diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow-style.spec.js b/packages/mermaid/src/diagrams/flowchart/parser/flow-style.spec.js index 4b461576b1..5b0f740bd9 100644 --- a/packages/mermaid/src/diagrams/flowchart/parser/flow-style.spec.js +++ b/packages/mermaid/src/diagrams/flowchart/parser/flow-style.spec.js @@ -287,17 +287,17 @@ describe('[Style] when parsing', () => { }); it('should handle style definitions within number of edges', function () { - try { - flow.parser.parse(`graph TD - A-->B - linkStyle 1 stroke-width:1px;`); - // Fail test if above expression doesn't throw anything. - expect(true).toBe(false); - } catch (e) { - expect(e.message).toBe( - `The index for linkStyle is out of bounds. (Help: Ensure that the index is within the range of existing edges.)` - ); - } + expect(() => + flow.parser + .parse( + `graph TD + A-->B + linkStyle 1 stroke-width:1px;` + ) + .toThrow( + 'The index 1 for linkStyle is out of bounds. Valid indices for linkStyle are between 0 and 0. (Help: Ensure that the index is within the range of existing edges.)' + ) + ); }); it('should handle style definitions within number of edges', function () { From ab2345093e25cd366ddd360d6238c46c77f273ca Mon Sep 17 00:00:00 2001 From: Marcel Ribeiro-Dantas <mribeirodantas@seqera.io> Date: Wed, 11 Oct 2023 16:41:04 -0300 Subject: [PATCH 115/457] Revert error typo fix --- packages/mermaid/src/diagrams/sequence/sequenceDb.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mermaid/src/diagrams/sequence/sequenceDb.js b/packages/mermaid/src/diagrams/sequence/sequenceDb.js index 7f893611d1..6c3f1f64df 100644 --- a/packages/mermaid/src/diagrams/sequence/sequenceDb.js +++ b/packages/mermaid/src/diagrams/sequence/sequenceDb.js @@ -126,7 +126,7 @@ export const addSignal = function ( const cnt = activationCount(idFrom.actor); if (cnt < 1) { // Bail out as there is an activation signal from an inactive participant - let error = new Error('Trying to deactivate an inactive participant (' + idFrom.actor + ')'); + let error = new Error('Trying to inactivate an inactive participant (' + idFrom.actor + ')'); error.hash = { text: '->>-', token: '->>-', From 13d85b6ee5d3569b4e2d675c04ba7d7e8c4a8543 Mon Sep 17 00:00:00 2001 From: RounakJoshi09 <rounakjsh783@gmail.com> Date: Thu, 12 Oct 2023 02:35:43 +0530 Subject: [PATCH 116/457] Parser and Logic For Parent Commit Added --- .../mermaid/src/diagrams/git/gitGraphAst.js | 46 +++++++++++++------ .../src/diagrams/git/parser/gitGraph.jison | 10 +++- 2 files changed, 40 insertions(+), 16 deletions(-) diff --git a/packages/mermaid/src/diagrams/git/gitGraphAst.js b/packages/mermaid/src/diagrams/git/gitGraphAst.js index abad68b22b..15e8a3e381 100644 --- a/packages/mermaid/src/diagrams/git/gitGraphAst.js +++ b/packages/mermaid/src/diagrams/git/gitGraphAst.js @@ -256,7 +256,7 @@ export const merge = function (otherBranch, custom_id, override_type, custom_tag log.debug('in mergeBranch'); }; -export const cherryPick = function (sourceId, targetId, tag) { +export const cherryPick = function (sourceId, targetId, tag, parentCommit) { log.debug('Entering cherryPick:', sourceId, targetId, tag); sourceId = common.sanitizeText(sourceId, configApi.getConfig()); targetId = common.sanitizeText(targetId, configApi.getConfig()); @@ -275,21 +275,35 @@ export const cherryPick = function (sourceId, targetId, tag) { }; throw error; } - let sourceCommit = commits[sourceId]; let sourceCommitBranch = sourceCommit.branch; if (sourceCommit.type === commitType.MERGE) { - let error = new Error( - 'Incorrect usage of "cherryPick". Source commit should not be a merge commit' - ); - error.hash = { - text: 'cherryPick ' + sourceId + ' ' + targetId, - token: 'cherryPick ' + sourceId + ' ' + targetId, - line: '1', - loc: { first_line: 1, last_line: 1, first_column: 1, last_column: 1 }, - expected: ['cherry-pick abc'], - }; - throw error; + if (!parentCommit) { + let error = new Error( + 'Incorrect usage of cherryPick: If the source commit is a merge commit, an immediate parent commit must be specified.' + ); + error.hash = { + text: 'cherryPick ' + sourceId + ' ' + targetId, + token: 'cherryPick ' + sourceId + ' ' + targetId, + line: '1', + loc: { first_line: 1, last_line: 1, first_column: 1, last_column: 1 }, + expected: ['cherry-pick abc'], + }; + throw error; + } + if (!(Array.isArray(sourceCommit.parents) && sourceCommit.parents.includes(parentCommit))) { + let error = new Error( + 'Invalid operation: The specified parent commit is not an immediate parent of the cherry-picked commit.' + ); + error.hash = { + text: 'cherryPick ' + sourceId + ' ' + targetId, + token: 'cherryPick ' + sourceId + ' ' + targetId, + line: '1', + loc: { first_line: 1, last_line: 1, first_column: 1, last_column: 1 }, + expected: ['cherry-pick abc'], + }; + throw error; + } } if (!targetId || commits[targetId] === undefined) { // cherry-pick source commit to current branch @@ -328,7 +342,11 @@ export const cherryPick = function (sourceId, targetId, tag) { parents: [head == null ? null : head.id, sourceCommit.id], branch: curBranch, type: commitType.CHERRY_PICK, - tag: tag ?? 'cherry-pick:' + sourceCommit.id, + tag: tag + ? `${tag}${sourceCommit.type === commitType.MERGE ? ` | parent: ${parentCommit}` : ''}` + : `cherry-pick: ${sourceCommit.id}${ + sourceCommit.type === commitType.MERGE ? ` | parent: ${parentCommit}` : '' + }`, }; head = commit; commits[commit.id] = commit; diff --git a/packages/mermaid/src/diagrams/git/parser/gitGraph.jison b/packages/mermaid/src/diagrams/git/parser/gitGraph.jison index 2297db17cd..1e4ca026ed 100644 --- a/packages/mermaid/src/diagrams/git/parser/gitGraph.jison +++ b/packages/mermaid/src/diagrams/git/parser/gitGraph.jison @@ -39,6 +39,7 @@ branch(?=\s|$) return 'BRANCH'; "order:" return 'ORDER'; merge(?=\s|$) return 'MERGE'; cherry\-pick(?=\s|$) return 'CHERRY_PICK'; +"parent:" return 'PARENT_COMMIT' // "reset" return 'RESET'; checkout(?=\s|$) return 'CHECKOUT'; "LR" return 'DIR'; @@ -109,10 +110,15 @@ branchStatement cherryPickStatement : CHERRY_PICK COMMIT_ID STR {yy.cherryPick($3, '', undefined)} + | CHERRY_PICK COMMIT_ID STR PARENT_COMMIT STR {yy.cherryPick($3, '', undefined,$5)} | CHERRY_PICK COMMIT_ID STR COMMIT_TAG STR {yy.cherryPick($3, '', $5)} + | CHERRY_PICK COMMIT_ID STR PARENT_COMMIT STR COMMIT_TAG STR {yy.cherryPick($3, '', $7,$5)} + | CHERRY_PICK COMMIT_ID STR COMMIT_TAG STR PARENT_COMMIT STR {yy.cherryPick($3, '', $5,$7)} | CHERRY_PICK COMMIT_ID STR COMMIT_TAG EMPTYSTR {yy.cherryPick($3, '', '')} - | CHERRY_PICK COMMIT_TAG STR COMMIT_ID STR {yy.cherryPick($5, '', $3)} - | CHERRY_PICK COMMIT_TAG EMPTYSTR COMMIT_ID STR {yy.cherryPick($3, '', '')} + | CHERRY_PICK COMMIT_ID STR PARENT_COMMIT STR COMMIT_TAG EMPTYSTR {yy.cherryPick($3, '', '',$5)} + | CHERRY_PICK COMMIT_ID STR COMMIT_TAG EMPTYSTR PARENT_COMMIT STR {yy.cherryPick($3, '', '',$7)} + | CHERRY_PICK COMMIT_TAG STR COMMIT_ID STR PARENT_COMMIT STR {yy.cherryPick($5, '', $3,$7)} + | CHERRY_PICK COMMIT_TAG EMPTYSTR COMMIT_ID STR PARENT_COMMIT STR{yy.cherryPick($5, '', '',$7)} ; mergeStatement From 4b8441a1a008b34fcd48cd30eeaad7b69e22e7d5 Mon Sep 17 00:00:00 2001 From: Marcel Ribeiro-Dantas <mribeirodantas@seqera.io> Date: Thu, 12 Oct 2023 01:27:08 -0300 Subject: [PATCH 117/457] Prettify table --- docs/syntax/quadrantChart.md | 38 +++++++++---------- .../mermaid/src/docs/syntax/quadrantChart.md | 38 +++++++++---------- 2 files changed, 38 insertions(+), 38 deletions(-) diff --git a/docs/syntax/quadrantChart.md b/docs/syntax/quadrantChart.md index 97bc94e36e..9f22fd5753 100644 --- a/docs/syntax/quadrantChart.md +++ b/docs/syntax/quadrantChart.md @@ -102,26 +102,26 @@ Points are used to plot a circle inside the quadrantChart. The syntax is `<text> ## Chart Configurations -| Parameter | Description | Default value | -| --------------------------------- | ------------------------------------------------------------------------------------------------- | :-----------: | -| chartWidth | Width of the chart | 500 | -| chartHeight | Height of the chart | 500 | -| titlePadding | Top and Bottom padding of the title | 10 | -| titleFontSize | Title font size | 20 | -| quadrantPadding | Padding outside all the quadrants | 5 | -| quadrantTextTopPadding | Quadrant text top padding when text is drawn on top ( not data points are there) | 5 | -| quadrantLabelFontSize | Quadrant text font size | 16 | -| quadrantInternalBorderStrokeWidth | Border stroke width inside the quadrants | 1 | -| quadrantExternalBorderStrokeWidth | Quadrant external border stroke width | 2 | -| xAxisLabelPadding | Top and bottom padding of x-axis text | 5 | -| xAxisLabelFontSize | X-axis texts font size | 16 | +| Parameter | Description | Default value | +| --------------------------------- | -------------------------------------------------------------------------------------------------- | :-----------: | +| chartWidth | Width of the chart | 500 | +| chartHeight | Height of the chart | 500 | +| titlePadding | Top and Bottom padding of the title | 10 | +| titleFontSize | Title font size | 20 | +| quadrantPadding | Padding outside all the quadrants | 5 | +| quadrantTextTopPadding | Quadrant text top padding when text is drawn on top ( not data points are there) | 5 | +| quadrantLabelFontSize | Quadrant text font size | 16 | +| quadrantInternalBorderStrokeWidth | Border stroke width inside the quadrants | 1 | +| quadrantExternalBorderStrokeWidth | Quadrant external border stroke width | 2 | +| xAxisLabelPadding | Top and bottom padding of x-axis text | 5 | +| xAxisLabelFontSize | X-axis texts font size | 16 | | xAxisPosition | Position of x-axis (top , bottom) if there are points the x-axis will always be rendered in bottom | 'top' | -| yAxisLabelPadding | Left and Right padding of y-axis text | 5 | -| yAxisLabelFontSize | Y-axis texts font size | 16 | -| yAxisPosition | Position of y-axis (left , right) | 'left' | -| pointTextPadding | Padding between point and the below text | 5 | -| pointLabelFontSize | Point text font size | 12 | -| pointRadius | Radius of the point to be drawn | 5 | +| yAxisLabelPadding | Left and Right padding of y-axis text | 5 | +| yAxisLabelFontSize | Y-axis texts font size | 16 | +| yAxisPosition | Position of y-axis (left , right) | 'left' | +| pointTextPadding | Padding between point and the below text | 5 | +| pointLabelFontSize | Point text font size | 12 | +| pointRadius | Radius of the point to be drawn | 5 | ## Chart Theme Variables diff --git a/packages/mermaid/src/docs/syntax/quadrantChart.md b/packages/mermaid/src/docs/syntax/quadrantChart.md index 6e0494270b..d6793aea61 100644 --- a/packages/mermaid/src/docs/syntax/quadrantChart.md +++ b/packages/mermaid/src/docs/syntax/quadrantChart.md @@ -83,26 +83,26 @@ Points are used to plot a circle inside the quadrantChart. The syntax is `<text> ## Chart Configurations -| Parameter | Description | Default value | -| --------------------------------- | ------------------------------------------------------------------------------------------------- | :-----------: | -| chartWidth | Width of the chart | 500 | -| chartHeight | Height of the chart | 500 | -| titlePadding | Top and Bottom padding of the title | 10 | -| titleFontSize | Title font size | 20 | -| quadrantPadding | Padding outside all the quadrants | 5 | -| quadrantTextTopPadding | Quadrant text top padding when text is drawn on top ( not data points are there) | 5 | -| quadrantLabelFontSize | Quadrant text font size | 16 | -| quadrantInternalBorderStrokeWidth | Border stroke width inside the quadrants | 1 | -| quadrantExternalBorderStrokeWidth | Quadrant external border stroke width | 2 | -| xAxisLabelPadding | Top and bottom padding of x-axis text | 5 | -| xAxisLabelFontSize | X-axis texts font size | 16 | +| Parameter | Description | Default value | +| --------------------------------- | -------------------------------------------------------------------------------------------------- | :-----------: | +| chartWidth | Width of the chart | 500 | +| chartHeight | Height of the chart | 500 | +| titlePadding | Top and Bottom padding of the title | 10 | +| titleFontSize | Title font size | 20 | +| quadrantPadding | Padding outside all the quadrants | 5 | +| quadrantTextTopPadding | Quadrant text top padding when text is drawn on top ( not data points are there) | 5 | +| quadrantLabelFontSize | Quadrant text font size | 16 | +| quadrantInternalBorderStrokeWidth | Border stroke width inside the quadrants | 1 | +| quadrantExternalBorderStrokeWidth | Quadrant external border stroke width | 2 | +| xAxisLabelPadding | Top and bottom padding of x-axis text | 5 | +| xAxisLabelFontSize | X-axis texts font size | 16 | | xAxisPosition | Position of x-axis (top , bottom) if there are points the x-axis will always be rendered in bottom | 'top' | -| yAxisLabelPadding | Left and Right padding of y-axis text | 5 | -| yAxisLabelFontSize | Y-axis texts font size | 16 | -| yAxisPosition | Position of y-axis (left , right) | 'left' | -| pointTextPadding | Padding between point and the below text | 5 | -| pointLabelFontSize | Point text font size | 12 | -| pointRadius | Radius of the point to be drawn | 5 | +| yAxisLabelPadding | Left and Right padding of y-axis text | 5 | +| yAxisLabelFontSize | Y-axis texts font size | 16 | +| yAxisPosition | Position of y-axis (left , right) | 'left' | +| pointTextPadding | Padding between point and the below text | 5 | +| pointLabelFontSize | Point text font size | 12 | +| pointRadius | Radius of the point to be drawn | 5 | ## Chart Theme Variables From 9080f1f35439410ab55f0e206dbc5d674c770183 Mon Sep 17 00:00:00 2001 From: Marcel Ribeiro-Dantas <mribeirodantas@seqera.io> Date: Thu, 12 Oct 2023 01:33:25 -0300 Subject: [PATCH 118/457] Revert typo fix --- packages/mermaid/src/mermaid.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mermaid/src/mermaid.spec.ts b/packages/mermaid/src/mermaid.spec.ts index 9c3bd31baa..645b5b39cb 100644 --- a/packages/mermaid/src/mermaid.spec.ts +++ b/packages/mermaid/src/mermaid.spec.ts @@ -174,7 +174,7 @@ describe('when using mermaid and ', () => { await expect(mermaid.parse('graph TQ;A--x|text including URL space|B;')).rejects .toThrowErrorMatchingInlineSnapshot(` "Lexical error on line 1. Unrecognized text. - graph TQ;A--x|text include + graph TQ;A--x|text includ -----^" `); }); From b4f444869e6b3f996e5f1d58d83a6c94f6caff0d Mon Sep 17 00:00:00 2001 From: Faris Nabiev <f.nabiev@vk.team> Date: Thu, 12 Oct 2023 16:39:31 +0300 Subject: [PATCH 119/457] fix: add imperativeState and replace sequenceDb global variables with it --- .npmrc | 1 + .../src/diagrams/sequence/sequenceDb.js | 158 +++++++++--------- .../mermaid/src/utils/imperativeState.spec.ts | 78 +++++++++ packages/mermaid/src/utils/imperativeState.ts | 37 ++++ 4 files changed, 198 insertions(+), 76 deletions(-) create mode 100644 packages/mermaid/src/utils/imperativeState.spec.ts create mode 100644 packages/mermaid/src/utils/imperativeState.ts diff --git a/.npmrc b/.npmrc index 4c2f52b3be..e72930ead1 100644 --- a/.npmrc +++ b/.npmrc @@ -1,2 +1,3 @@ +registry=https://registry.npmjs.org auto-install-peers=true strict-peer-dependencies=false diff --git a/packages/mermaid/src/diagrams/sequence/sequenceDb.js b/packages/mermaid/src/diagrams/sequence/sequenceDb.js index 6c3f1f64df..dbe8fdde5a 100644 --- a/packages/mermaid/src/diagrams/sequence/sequenceDb.js +++ b/packages/mermaid/src/diagrams/sequence/sequenceDb.js @@ -2,57 +2,60 @@ import * as configApi from '../../config.js'; import { log } from '../../logger.js'; import { sanitizeText } from '../common/common.js'; import { - setAccTitle, + clear as commonClear, + getAccDescription, getAccTitle, - setDiagramTitle, getDiagramTitle, - getAccDescription, setAccDescription, - clear as commonClear, + setAccTitle, + setDiagramTitle, } from '../common/commonDb.js'; - -let prevActor = undefined; -let actors = {}; -let createdActors = {}; -let destroyedActors = {}; -let boxes = []; -let messages = []; -const notes = []; -let sequenceNumbersEnabled = false; -let wrapEnabled; -let currentBox = undefined; -let lastCreated = undefined; -let lastDestroyed = undefined; +import { createImperativeState } from '../../utils/imperativeState.js'; + +const state = createImperativeState(() => ({ + prevActor: undefined, + actors: {}, + createdActors: {}, + destroyedActors: {}, + boxes: [], + messages: [], + notes: [], + sequenceNumbersEnabled: false, + wrapEnabled: undefined, + currentBox: undefined, + lastCreated: undefined, + lastDestroyed: undefined, +})); export const addBox = function (data) { - boxes.push({ + state.records.boxes.push({ name: data.text, wrap: (data.wrap === undefined && autoWrap()) || !!data.wrap, fill: data.color, actorKeys: [], }); - currentBox = boxes.slice(-1)[0]; + state.records.currentBox = state.records.boxes.slice(-1)[0]; }; export const addActor = function (id, name, description, type) { - let assignedBox = currentBox; - const old = actors[id]; + let assignedBox = state.records.currentBox; + const old = state.records.actors[id]; if (old) { // If already set and trying to set to a new one throw error - if (currentBox && old.box && currentBox !== old.box) { + if (state.records.currentBox && old.box && state.records.currentBox !== old.box) { throw new Error( 'A same participant should only be defined in one Box: ' + old.name + " can't be in '" + old.box.name + "' and in '" + - currentBox.name + + state.records.currentBox.name + "' at the same time." ); } // Don't change the box if already - assignedBox = old.box ? old.box : currentBox; + assignedBox = old.box ? old.box : state.records.currentBox; old.box = assignedBox; // Don't allow description nulling @@ -69,36 +72,42 @@ export const addActor = function (id, name, description, type) { description = { text: name, wrap: null, type }; } - actors[id] = { + state.records.actors[id] = { box: assignedBox, name: name, description: description.text, wrap: (description.wrap === undefined && autoWrap()) || !!description.wrap, - prevActor: prevActor, + prevActor: state.records.prevActor, links: {}, properties: {}, actorCnt: null, rectData: null, type: type || 'participant', }; - if (prevActor && actors[prevActor]) { - actors[prevActor].nextActor = id; + if (state.records.prevActor && state.records.actors[state.records.prevActor]) { + state.records.actors[state.records.prevActor].nextActor = id; } - if (currentBox) { - currentBox.actorKeys.push(id); + if (state.records.currentBox) { + state.records.currentBox.actorKeys.push(id); } - prevActor = id; + state.records.prevActor = id; }; const activationCount = (part) => { let i; let count = 0; - for (i = 0; i < messages.length; i++) { - if (messages[i].type === LINETYPE.ACTIVE_START && messages[i].from.actor === part) { + for (i = 0; i < state.records.messages.length; i++) { + if ( + state.records.messages[i].type === LINETYPE.ACTIVE_START && + state.records.messages[i].from.actor === part + ) { count++; } - if (messages[i].type === LINETYPE.ACTIVE_END && messages[i].from.actor === part) { + if ( + state.records.messages[i].type === LINETYPE.ACTIVE_END && + state.records.messages[i].from.actor === part + ) { count--; } } @@ -106,7 +115,7 @@ const activationCount = (part) => { }; export const addMessage = function (idFrom, idTo, message, answer) { - messages.push({ + state.records.messages.push({ from: idFrom, to: idTo, message: message.text, @@ -137,7 +146,7 @@ export const addSignal = function ( throw error; } } - messages.push({ + state.records.messages.push({ from: idFrom, to: idTo, message: message.text, @@ -149,63 +158,58 @@ export const addSignal = function ( }; export const hasAtLeastOneBox = function () { - return boxes.length > 0; + return state.records.boxes.length > 0; }; export const hasAtLeastOneBoxWithTitle = function () { - return boxes.some((b) => b.name); + return state.records.boxes.some((b) => b.name); }; export const getMessages = function () { - return messages; + return state.records.messages; }; export const getBoxes = function () { - return boxes; + return state.records.boxes; }; export const getActors = function () { - return actors; + return state.records.actors; }; export const getCreatedActors = function () { - return createdActors; + return state.records.createdActors; }; export const getDestroyedActors = function () { - return destroyedActors; + return state.records.destroyedActors; }; export const getActor = function (id) { - return actors[id]; + return state.records.actors[id]; }; export const getActorKeys = function () { - return Object.keys(actors); + return Object.keys(state.records.actors); }; export const enableSequenceNumbers = function () { - sequenceNumbersEnabled = true; + state.records.sequenceNumbersEnabled = true; }; export const disableSequenceNumbers = function () { - sequenceNumbersEnabled = false; + state.records.sequenceNumbersEnabled = false; }; -export const showSequenceNumbers = () => sequenceNumbersEnabled; +export const showSequenceNumbers = () => state.records.sequenceNumbersEnabled; export const setWrap = function (wrapSetting) { - wrapEnabled = wrapSetting; + state.records.wrapEnabled = wrapSetting; }; export const autoWrap = () => { // if setWrap has been called, use that value, otherwise use the value from the config // TODO: refactor, always use the config value let setWrap update the config value - if (wrapEnabled !== undefined) { - return wrapEnabled; + if (state.records.wrapEnabled !== undefined) { + return state.records.wrapEnabled; } return configApi.getConfig().sequence.wrap; }; export const clear = function () { - actors = {}; - createdActors = {}; - destroyedActors = {}; - boxes = []; - messages = []; - sequenceNumbersEnabled = false; + state.reset(); commonClear(); }; @@ -247,7 +251,7 @@ export const parseBoxData = function (str) { } } - const boxData = { + return { color: color, text: title !== undefined @@ -262,7 +266,6 @@ export const parseBoxData = function (str) { : undefined : undefined, }; - return boxData; }; export const LINETYPE = { @@ -321,8 +324,8 @@ export const addNote = function (actor, placement, message) { // eslint-disable-next-line unicorn/prefer-spread const actors = [].concat(actor, actor); - notes.push(note); - messages.push({ + state.records.notes.push(note); + state.records.messages.push({ from: actors[0], to: actors[1], message: message.text, @@ -414,7 +417,7 @@ function insertProperties(actor, properties) { * */ function boxEnd() { - currentBox = undefined; + state.records.currentBox = undefined; } export const addDetails = function (actorId, text) { @@ -468,7 +471,7 @@ export const apply = function (param) { } else { switch (param.type) { case 'sequenceIndex': - messages.push({ + state.records.messages.push({ from: undefined, to: undefined, message: { @@ -484,18 +487,18 @@ export const apply = function (param) { addActor(param.actor, param.actor, param.description, param.draw); break; case 'createParticipant': - if (actors[param.actor]) { + if (state.records.actors[param.actor]) { throw new Error( "It is not possible to have actors with the same id, even if one is destroyed before the next is created. Use 'AS' aliases to simulate the behavior" ); } - lastCreated = param.actor; + state.records.lastCreated = param.actor; addActor(param.actor, param.actor, param.description, param.draw); - createdActors[param.actor] = messages.length; + state.records.createdActors[param.actor] = state.records.messages.length; break; case 'destroyParticipant': - lastDestroyed = param.actor; - destroyedActors[param.actor] = messages.length; + state.records.lastDestroyed = param.actor; + state.records.destroyedActors[param.actor] = state.records.messages.length; break; case 'activeStart': addSignal(param.actor, undefined, undefined, param.signalType); @@ -519,25 +522,28 @@ export const apply = function (param) { addDetails(param.actor, param.text); break; case 'addMessage': - if (lastCreated) { - if (param.to !== lastCreated) { + if (state.records.lastCreated) { + if (param.to !== state.records.lastCreated) { throw new Error( 'The created participant ' + - lastCreated + + state.records.lastCreated + ' does not have an associated creating message after its declaration. Please check the sequence diagram.' ); } else { - lastCreated = undefined; + state.records.lastCreated = undefined; } - } else if (lastDestroyed) { - if (param.to !== lastDestroyed && param.from !== lastDestroyed) { + } else if (state.records.lastDestroyed) { + if ( + param.to !== state.records.lastDestroyed && + param.from !== state.records.lastDestroyed + ) { throw new Error( 'The destroyed participant ' + - lastDestroyed + + state.records.lastDestroyed + ' does not have an associated destroying message after its declaration. Please check the sequence diagram.' ); } else { - lastDestroyed = undefined; + state.records.lastDestroyed = undefined; } } addSignal(param.from, param.to, param.msg, param.signalType, param.activate); diff --git a/packages/mermaid/src/utils/imperativeState.spec.ts b/packages/mermaid/src/utils/imperativeState.spec.ts new file mode 100644 index 0000000000..e78a7d4955 --- /dev/null +++ b/packages/mermaid/src/utils/imperativeState.spec.ts @@ -0,0 +1,78 @@ +import { createImperativeState, domain } from './imperativeState.js'; + +describe('domain.optional', () => { + it('should set undefined without args', () => { + expect(domain.optional()).toBeUndefined(); + }); + + it('should set identity with args', () => { + const value = {}; + expect(domain.optional(value)).toEqual(value); + }); +}); + +describe('domain.identity', () => { + it('should set identity', () => { + const value = {}; + expect(domain.identity(value)).toEqual(value); + }); +}); + +describe('createImperativeState', () => { + it('should create state with values from initializer', () => { + const baz = { + flag: false, + }; + + const state = createImperativeState(() => ({ + foo: domain.optional<number>(), + bar: domain.identity<string[]>([]), + baz, + })); + + expect(state.records.foo).toBeUndefined(); + expect(state.records.bar).toEqual([]); + expect(state.records.baz).toBe(baz); + }); + + it('should update records', () => { + const state = createImperativeState(() => ({ + foo: domain.optional<number>(), + bar: domain.identity<string[]>([]), + baz: { + flag: false, + }, + })); + + state.records.foo = 5; + state.records.bar = ['hello']; + state.records.baz.flag = true; + + expect(state.records.foo).toEqual(5); + expect(state.records.bar).toEqual(['hello']); + expect(state.records.baz).toEqual({ + flag: true, + }); + }); + + it('should reset records', () => { + const state = createImperativeState(() => ({ + foo: domain.optional<number>(), + bar: domain.identity<string[]>([]), + baz: { + flag: false, + }, + })); + + state.records.foo = 5; + state.records.bar = ['hello']; + state.records.baz.flag = true; + state.reset(); + + expect(state.records.foo).toBeUndefined(); + expect(state.records.bar).toEqual([]); + expect(state.records.baz).toEqual({ + flag: false, + }); + }); +}); diff --git a/packages/mermaid/src/utils/imperativeState.ts b/packages/mermaid/src/utils/imperativeState.ts new file mode 100644 index 0000000000..bc63844b1a --- /dev/null +++ b/packages/mermaid/src/utils/imperativeState.ts @@ -0,0 +1,37 @@ +export const createImperativeState = <S extends Record<string, unknown>>(init: () => S) => { + const state = init(); + + return { + get records() { + return state; + }, + reset: () => { + Object.keys(state).forEach((key) => { + delete state[key]; + }); + Object.entries(init()).forEach(([key, value]: [keyof S, any]) => { + state[key] = value; + }); + }, + }; +}; + +export const domain = { + optional: <V>(value?: V) => value, + identity: <V>(value: V) => value, +} as const; + +/* +const state = createImperativeState(() => ({ + foo: domain.optional<string>(), + bar: domain.identity<number[]>([]), + baz: domain.optional(1), +})); + +typeof state.records: +{ + foo: string | undefined, // actual: undefined + bar: number[], // actual: [] + baz: number | undefined, // actual: 1 +} +*/ From 18ea27ac58afb342a78167fd59bae1db97a80f09 Mon Sep 17 00:00:00 2001 From: Faris Nabiev <f.nabiev@vk.team> Date: Fri, 13 Oct 2023 00:02:46 +0300 Subject: [PATCH 120/457] chore: add e2e test that shows db cleanup problem --- cypress/helpers/util.ts | 6 ++-- .../rendering/sequencediagram.spec.js | 28 +++++++++++++++++ .../platform/render-diagram-after-error.html | 31 +++++++++++++++++++ 3 files changed, 62 insertions(+), 3 deletions(-) create mode 100644 cypress/platform/render-diagram-after-error.html diff --git a/cypress/helpers/util.ts b/cypress/helpers/util.ts index c656f638da..aed5d7973c 100644 --- a/cypress/helpers/util.ts +++ b/cypress/helpers/util.ts @@ -10,7 +10,7 @@ interface CypressConfig { type CypressMermaidConfig = MermaidConfig & CypressConfig; interface CodeObject { - code: string; + code: string | string[]; mermaid: CypressMermaidConfig; } @@ -25,7 +25,7 @@ const batchId: string = : Cypress.env('CYPRESS_COMMIT') || Date.now().toString()); export const mermaidUrl = ( - graphStr: string, + graphStr: string | string[], options: CypressMermaidConfig, api: boolean ): string => { @@ -82,7 +82,7 @@ export const urlSnapshotTest = ( }; export const renderGraph = ( - graphStr: string, + graphStr: string | string[], options: CypressMermaidConfig = {}, api = false ): void => { diff --git a/cypress/integration/rendering/sequencediagram.spec.js b/cypress/integration/rendering/sequencediagram.spec.js index 7659138241..ca53986e80 100644 --- a/cypress/integration/rendering/sequencediagram.spec.js +++ b/cypress/integration/rendering/sequencediagram.spec.js @@ -930,4 +930,32 @@ context('Sequence diagram', () => { }); }); }); + context('db clear', () => { + it('should render diagram after fixing destroy participant error', () => { + renderGraph([ + `sequenceDiagram + Alice->>Bob: Hello Bob, how are you ? + Bob->>Alice: Fine, thank you. And you? + create participant Carl + Alice->>Carl: Hi Carl! + create actor D as Donald + Carl->>D: Hi! + destroy Carl + Alice-xCarl: We are too many + destroy Bo + Bob->>Alice: I agree`, + `sequenceDiagram + Alice->>Bob: Hello Bob, how are you ? + Bob->>Alice: Fine, thank you. And you? + create participant Carl + Alice->>Carl: Hi Carl! + create actor D as Donald + Carl->>D: Hi! + destroy Carl + Alice-xCarl: We are too many + destroy Bob + Bob->>Alice: I agree`, + ]); + }); + }); }); diff --git a/cypress/platform/render-diagram-after-error.html b/cypress/platform/render-diagram-after-error.html new file mode 100644 index 0000000000..0adbba0526 --- /dev/null +++ b/cypress/platform/render-diagram-after-error.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <meta http-equiv="X-UA-Compatible" content="IE=edge" /> + <title>Mermaid Quick Test Page + + + +
    + + + + From 985eda2deeb180972f2b25ff20c53156c1eccb4b Mon Sep 17 00:00:00 2001 From: Faris Nabiev Date: Fri, 13 Oct 2023 00:43:48 +0300 Subject: [PATCH 121/457] chore: add e2e test that shows db cleanup problem --- cypress/integration/rendering/sequencediagram.spec.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/cypress/integration/rendering/sequencediagram.spec.js b/cypress/integration/rendering/sequencediagram.spec.js index ca53986e80..fa1db3ab23 100644 --- a/cypress/integration/rendering/sequencediagram.spec.js +++ b/cypress/integration/rendering/sequencediagram.spec.js @@ -932,6 +932,10 @@ context('Sequence diagram', () => { }); context('db clear', () => { it('should render diagram after fixing destroy participant error', () => { + cy.on('uncaught:exception', (err) => { + return false; + }); + renderGraph([ `sequenceDiagram Alice->>Bob: Hello Bob, how are you ? From 6eae46b927e1568a072b14eb1da0202c465db661 Mon Sep 17 00:00:00 2001 From: Faris Nabiev Date: Fri, 13 Oct 2023 00:48:05 +0300 Subject: [PATCH 122/457] chore: remove unused e2e tests file --- .../platform/render-diagram-after-error.html | 31 ------------------- 1 file changed, 31 deletions(-) delete mode 100644 cypress/platform/render-diagram-after-error.html diff --git a/cypress/platform/render-diagram-after-error.html b/cypress/platform/render-diagram-after-error.html deleted file mode 100644 index 0adbba0526..0000000000 --- a/cypress/platform/render-diagram-after-error.html +++ /dev/null @@ -1,31 +0,0 @@ - - - - - - Mermaid Quick Test Page - - - -
    - - - - From fc0ade29851bf403fcc1740d6d0bc91933d375a7 Mon Sep 17 00:00:00 2001 From: Faris Nabiev Date: Fri, 13 Oct 2023 12:07:36 +0300 Subject: [PATCH 123/457] chore(sequence): update doc for actors/participant creation/deletion fix --- cypress/integration/rendering/sequencediagram.spec.js | 2 +- docs/syntax/sequenceDiagram.md | 8 ++++++++ packages/mermaid/src/docs/syntax/sequenceDiagram.md | 8 ++++++++ 3 files changed, 17 insertions(+), 1 deletion(-) diff --git a/cypress/integration/rendering/sequencediagram.spec.js b/cypress/integration/rendering/sequencediagram.spec.js index fa1db3ab23..27e03da9c0 100644 --- a/cypress/integration/rendering/sequencediagram.spec.js +++ b/cypress/integration/rendering/sequencediagram.spec.js @@ -930,7 +930,7 @@ context('Sequence diagram', () => { }); }); }); - context('db clear', () => { + context('render after error', () => { it('should render diagram after fixing destroy participant error', () => { cy.on('uncaught:exception', (err) => { return false; diff --git a/docs/syntax/sequenceDiagram.md b/docs/syntax/sequenceDiagram.md index fbfa59d139..1172e2994b 100644 --- a/docs/syntax/sequenceDiagram.md +++ b/docs/syntax/sequenceDiagram.md @@ -131,6 +131,14 @@ sequenceDiagram Bob->>Alice: I agree ``` +#### Unfixable actor/participant creation/deletion error (v\+) + +If an error of the following type occurs when creating or deleting an actor/participant: + +> The destroyed participant **participant-name** does not have an associated destroying message after its declaration. Please check the sequence diagram. + +And fixing diagram code does not get rid of this error and rendering of all other diagrams results in the same error, then you need to update the mermaid version. + ### Grouping / Box The actor(s) can be grouped in vertical boxes. You can define a color (if not, it will be transparent) and/or a descriptive label using the following notation: diff --git a/packages/mermaid/src/docs/syntax/sequenceDiagram.md b/packages/mermaid/src/docs/syntax/sequenceDiagram.md index cdcdaffeba..5f312fee5c 100644 --- a/packages/mermaid/src/docs/syntax/sequenceDiagram.md +++ b/packages/mermaid/src/docs/syntax/sequenceDiagram.md @@ -83,6 +83,14 @@ sequenceDiagram Bob->>Alice: I agree ``` +#### Unfixable actor/participant creation/deletion error (v+) + +If an error of the following type occurs when creating or deleting an actor/participant: + +> The destroyed participant **participant-name** does not have an associated destroying message after its declaration. Please check the sequence diagram. + +And fixing diagram code does not get rid of this error and rendering of all other diagrams results in the same error, then you need to update the mermaid version. + ### Grouping / Box The actor(s) can be grouped in vertical boxes. You can define a color (if not, it will be transparent) and/or a descriptive label using the following notation: From 3118c7c532a1128f495a527f4d88b34f9abd2a86 Mon Sep 17 00:00:00 2001 From: RounakJoshi09 Date: Fri, 13 Oct 2023 23:49:01 +0530 Subject: [PATCH 124/457] Unit Test Cases Added --- .../mermaid/src/diagrams/git/gitGraphAst.js | 19 +-- .../src/diagrams/git/gitGraphParserV2.spec.js | 139 ++++++++++++++++++ 2 files changed, 149 insertions(+), 9 deletions(-) diff --git a/packages/mermaid/src/diagrams/git/gitGraphAst.js b/packages/mermaid/src/diagrams/git/gitGraphAst.js index 15e8a3e381..2efb263a90 100644 --- a/packages/mermaid/src/diagrams/git/gitGraphAst.js +++ b/packages/mermaid/src/diagrams/git/gitGraphAst.js @@ -256,11 +256,12 @@ export const merge = function (otherBranch, custom_id, override_type, custom_tag log.debug('in mergeBranch'); }; -export const cherryPick = function (sourceId, targetId, tag, parentCommit) { +export const cherryPick = function (sourceId, targetId, tag, parentCommitId) { log.debug('Entering cherryPick:', sourceId, targetId, tag); sourceId = common.sanitizeText(sourceId, configApi.getConfig()); targetId = common.sanitizeText(targetId, configApi.getConfig()); tag = common.sanitizeText(tag, configApi.getConfig()); + parentCommitId = common.sanitizeText(parentCommitId, configApi.getConfig()); if (!sourceId || commits[sourceId] === undefined) { let error = new Error( @@ -278,9 +279,9 @@ export const cherryPick = function (sourceId, targetId, tag, parentCommit) { let sourceCommit = commits[sourceId]; let sourceCommitBranch = sourceCommit.branch; if (sourceCommit.type === commitType.MERGE) { - if (!parentCommit) { + if (!parentCommitId) { let error = new Error( - 'Incorrect usage of cherryPick: If the source commit is a merge commit, an immediate parent commit must be specified.' + 'Incorrect usage of cherry-pick: If the source commit is a merge commit, an immediate parent commit must be specified.' ); error.hash = { text: 'cherryPick ' + sourceId + ' ' + targetId, @@ -291,7 +292,7 @@ export const cherryPick = function (sourceId, targetId, tag, parentCommit) { }; throw error; } - if (!(Array.isArray(sourceCommit.parents) && sourceCommit.parents.includes(parentCommit))) { + if (!(Array.isArray(sourceCommit.parents) && sourceCommit.parents.includes(parentCommitId))) { let error = new Error( 'Invalid operation: The specified parent commit is not an immediate parent of the cherry-picked commit.' ); @@ -342,11 +343,11 @@ export const cherryPick = function (sourceId, targetId, tag, parentCommit) { parents: [head == null ? null : head.id, sourceCommit.id], branch: curBranch, type: commitType.CHERRY_PICK, - tag: tag - ? `${tag}${sourceCommit.type === commitType.MERGE ? ` | parent: ${parentCommit}` : ''}` - : `cherry-pick: ${sourceCommit.id}${ - sourceCommit.type === commitType.MERGE ? ` | parent: ${parentCommit}` : '' - }`, + tag: + tag ?? + `cherry-pick: ${sourceCommit.id}${ + sourceCommit.type === commitType.MERGE && ` | parent: ${parentCommitId}` + }`, }; head = commit; commits[commit.id] = commit; diff --git a/packages/mermaid/src/diagrams/git/gitGraphParserV2.spec.js b/packages/mermaid/src/diagrams/git/gitGraphParserV2.spec.js index df20a5eb5a..f9abec4b25 100644 --- a/packages/mermaid/src/diagrams/git/gitGraphParserV2.spec.js +++ b/packages/mermaid/src/diagrams/git/gitGraphParserV2.spec.js @@ -673,6 +673,145 @@ describe('when parsing a gitGraph', function () { expect(commits[cherryPickCommitID].branch).toBe('main'); }); + it('should support cherry-picking of merge commits', function () { + const str = `gitGraph + commit id: "ZERO" + branch feature + branch release + checkout feature + commit id: "A" + commit id: "B" + checkout main + merge feature id: "M" + checkout release + cherry-pick id: "M" parent:"B" + `; + + parser.parse(str); + const commits = parser.yy.getCommits(); + const cherryPickCommitID = Object.keys(commits)[4]; + expect(commits[cherryPickCommitID].tag).toBe('cherry-pick: M | parent: B'); + expect(commits[cherryPickCommitID].branch).toBe('release'); + }); + + it('should support cherry-picking of merge commits with tag', function () { + const str = `gitGraph + commit id: "ZERO" + branch feature + branch release + checkout feature + commit id: "A" + commit id: "B" + checkout main + merge feature id: "M" + checkout release + cherry-pick id: "M" parent:"ZERO" tag: "v1.0" + `; + + parser.parse(str); + const commits = parser.yy.getCommits(); + const cherryPickCommitID = Object.keys(commits)[4]; + expect(commits[cherryPickCommitID].tag).toBe('v1.0'); + expect(commits[cherryPickCommitID].branch).toBe('release'); + }); + + it('should support cherry-picking of merge commits with additional commit', function () { + const str = `gitGraph + commit id: "ZERO" + branch feature + branch release + checkout feature + commit id: "A" + commit id: "B" + checkout main + merge feature id: "M" + checkout release + commit id: "C" + cherry-pick id: "M" tag: "v2.1:ZERO" parent:"ZERO" + commit id: "D" + `; + + parser.parse(str); + const commits = parser.yy.getCommits(); + const cherryPickCommitID = Object.keys(commits)[5]; + expect(commits[cherryPickCommitID].tag).toBe('v2.1:ZERO'); + expect(commits[cherryPickCommitID].branch).toBe('release'); + }); + + it('should support cherry-picking of merge commits with empty tag', function () { + const str = `gitGraph + commit id: "ZERO" + branch feature + branch release + checkout feature + commit id: "A" + commit id: "B" + checkout main + merge feature id: "M" + checkout release + commit id: "C" + cherry-pick id:"M" parent: "ZERO" tag:"" + commit id: "D" + cherry-pick id:"M" tag:"" parent: "B" + `; + + parser.parse(str); + const commits = parser.yy.getCommits(); + const cherryPickCommitID = Object.keys(commits)[5]; + const cherryPickCommitID2 = Object.keys(commits)[7]; + expect(commits[cherryPickCommitID].tag).toBe(''); + expect(commits[cherryPickCommitID2].tag).toBe(''); + expect(commits[cherryPickCommitID].branch).toBe('release'); + }); + + it('should fail cherry-picking of merge commits if the parent of merge commits is not specified', function () { + expect(() => + parser + .parse( + `gitGraph + commit id: "ZERO" + branch feature + branch release + checkout feature + commit id: "A" + commit id: "B" + checkout main + merge feature id: "M" + checkout release + commit id: "C" + cherry-pick id:"M" + ` + ) + .toThrow( + 'Incorrect usage of cherry-pick: If the source commit is a merge commit, an immediate parent commit must be specified.' + ) + ); + }); + + it('should fail cherry-picking of merge commits when the parent provided is not an immediate parent of cherry picked commit', function () { + expect(() => + parser + .parse( + `gitGraph + commit id: "ZERO" + branch feature + branch release + checkout feature + commit id: "A" + commit id: "B" + checkout main + merge feature id: "M" + checkout release + commit id: "C" + cherry-pick id:"M" parent: "A" + ` + ) + .toThrow( + 'Invalid operation: The specified parent commit is not an immediate parent of the cherry-picked commit.' + ) + ); + }); + it('should throw error when try to branch existing branch: main', function () { const str = `gitGraph commit From 345e82abeedb28b56884cc024af808911d7e49de Mon Sep 17 00:00:00 2001 From: Harshit Anand Date: Sat, 14 Oct 2023 00:50:09 +0530 Subject: [PATCH 125/457] fix: removed static target=_blank instaed value will fetched from the target attribute --- .../mermaid/src/diagrams/common/common.ts | 25 +++++++++++-------- 1 file changed, 14 insertions(+), 11 deletions(-) diff --git a/packages/mermaid/src/diagrams/common/common.ts b/packages/mermaid/src/diagrams/common/common.ts index e9d5ca42d3..84db828435 100644 --- a/packages/mermaid/src/diagrams/common/common.ts +++ b/packages/mermaid/src/diagrams/common/common.ts @@ -28,18 +28,21 @@ export const removeScript = (txt: string): string => { return DOMPurify.sanitize(txt); }; -DOMPurify.addHook('afterSanitizeAttributes', function (node) { - // set all elements owning target to target=_blank - if (node.tagName === 'A' && node.hasAttribute('href') && 'target' in node) { - node.setAttribute('target', '_blank'); - node.setAttribute('rel', 'noopener noreferrer'); +const TEMPORARY_ATTRIBUTE = 'data-temp-href-target'; + +DOMPurify.addHook('beforeSanitizeAttributes', function (node) { + if (node.tagName === 'A' && node.hasAttribute('target')) { + node.setAttribute(TEMPORARY_ATTRIBUTE, node.getAttribute('target') || ''); } - // set non-HTML/MathML links to xlink:show=new - if ( - !node.hasAttribute('target') && - (node.hasAttribute('xlink:href') || node.hasAttribute('href')) - ) { - node.setAttribute('xlink:show', 'new'); +}); + +DOMPurify.addHook('afterSanitizeAttributes', function (node) { + if (node.tagName === 'A' && node.hasAttribute(TEMPORARY_ATTRIBUTE)) { + node.setAttribute('target', node.getAttribute(TEMPORARY_ATTRIBUTE) || ''); + node.removeAttribute(TEMPORARY_ATTRIBUTE); + if (node.getAttribute('target') === '_blank') { + node.setAttribute('rel', 'noopener'); + } } }); From 6e5cd2b3c2336835a6a896b80d9bbb2ef10ecfa4 Mon Sep 17 00:00:00 2001 From: RounakJoshi09 Date: Sat, 14 Oct 2023 05:49:51 +0530 Subject: [PATCH 126/457] All Unit Tests Passing --- packages/mermaid/src/diagrams/git/gitGraphAst.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mermaid/src/diagrams/git/gitGraphAst.js b/packages/mermaid/src/diagrams/git/gitGraphAst.js index 2efb263a90..f93ffc44dd 100644 --- a/packages/mermaid/src/diagrams/git/gitGraphAst.js +++ b/packages/mermaid/src/diagrams/git/gitGraphAst.js @@ -346,7 +346,7 @@ export const cherryPick = function (sourceId, targetId, tag, parentCommitId) { tag: tag ?? `cherry-pick: ${sourceCommit.id}${ - sourceCommit.type === commitType.MERGE && ` | parent: ${parentCommitId}` + sourceCommit.type === commitType.MERGE ? ` | parent: ${parentCommitId}` : '' }`, }; head = commit; From 4051b42b5a74083d750ee43b38ec7bdc77f2f1fa Mon Sep 17 00:00:00 2001 From: RounakJoshi09 Date: Sat, 14 Oct 2023 07:26:23 +0530 Subject: [PATCH 127/457] documentation added, Tests Fixed --- docs/syntax/gitgraph.md | 60 +++++++++++-------- .../mermaid/src/diagrams/git/gitGraphAst.js | 4 +- .../src/diagrams/git/gitGraphParserV2.spec.js | 2 +- packages/mermaid/src/docs/syntax/gitgraph.md | 31 ++++++---- 4 files changed, 55 insertions(+), 42 deletions(-) diff --git a/docs/syntax/gitgraph.md b/docs/syntax/gitgraph.md index 8d39ddbcbd..c6a397a982 100644 --- a/docs/syntax/gitgraph.md +++ b/docs/syntax/gitgraph.md @@ -366,41 +366,49 @@ A few important rules to note here are: 1. You need to provide the `id` for an existing commit to be cherry-picked. If given commit id does not exist it will result in an error. For this, make use of the `commit id:$value` format of declaring commits. See the examples from above. 2. The given commit must not exist on the current branch. The cherry-picked commit must always be a different branch than the current branch. 3. Current branch must have at least one commit, before you can cherry-pick, otherwise it will cause an error is throw. +4. When cherry-picking a merge commit, providing a parent commit ID is mandatory. If the parent attribute is omitted or an invalid parent commit ID is provided, an error will be thrown. +5. The specified parent commit must be an immediate parent of the merge commit being cherry-picked. Let see an example: ```mermaid-example gitGraph - commit id: "ZERO" - branch develop - commit id:"A" - checkout main - commit id:"ONE" - checkout develop - commit id:"B" - checkout main - commit id:"TWO" - cherry-pick id:"A" - commit id:"THREE" - checkout develop - commit id:"C" + commit id: "ZERO" + branch develop + branch release + commit id:"A" + checkout main + commit id:"ONE" + checkout develop + commit id:"B" + checkout main + merge develop id:"MERGE" + commit id:"TWO" + checkout release + cherry-pick id:"MERGE" parent:"B" + commit id:"THREE" + checkout develop + commit id:"C" ``` ```mermaid gitGraph - commit id: "ZERO" - branch develop - commit id:"A" - checkout main - commit id:"ONE" - checkout develop - commit id:"B" - checkout main - commit id:"TWO" - cherry-pick id:"A" - commit id:"THREE" - checkout develop - commit id:"C" + commit id: "ZERO" + branch develop + branch release + commit id:"A" + checkout main + commit id:"ONE" + checkout develop + commit id:"B" + checkout main + merge develop id:"MERGE" + commit id:"TWO" + checkout release + cherry-pick id:"MERGE" parent:"B" + commit id:"THREE" + checkout develop + commit id:"C" ``` ## Gitgraph specific configuration options diff --git a/packages/mermaid/src/diagrams/git/gitGraphAst.js b/packages/mermaid/src/diagrams/git/gitGraphAst.js index f93ffc44dd..34cf91b51f 100644 --- a/packages/mermaid/src/diagrams/git/gitGraphAst.js +++ b/packages/mermaid/src/diagrams/git/gitGraphAst.js @@ -345,8 +345,8 @@ export const cherryPick = function (sourceId, targetId, tag, parentCommitId) { type: commitType.CHERRY_PICK, tag: tag ?? - `cherry-pick: ${sourceCommit.id}${ - sourceCommit.type === commitType.MERGE ? ` | parent: ${parentCommitId}` : '' + `cherry-pick:${sourceCommit.id}${ + sourceCommit.type === commitType.MERGE ? `|parent:${parentCommitId}` : '' }`, }; head = commit; diff --git a/packages/mermaid/src/diagrams/git/gitGraphParserV2.spec.js b/packages/mermaid/src/diagrams/git/gitGraphParserV2.spec.js index f9abec4b25..3b56ee2542 100644 --- a/packages/mermaid/src/diagrams/git/gitGraphParserV2.spec.js +++ b/packages/mermaid/src/diagrams/git/gitGraphParserV2.spec.js @@ -690,7 +690,7 @@ describe('when parsing a gitGraph', function () { parser.parse(str); const commits = parser.yy.getCommits(); const cherryPickCommitID = Object.keys(commits)[4]; - expect(commits[cherryPickCommitID].tag).toBe('cherry-pick: M | parent: B'); + expect(commits[cherryPickCommitID].tag).toBe('cherry-pick:M|parent:B'); expect(commits[cherryPickCommitID].branch).toBe('release'); }); diff --git a/packages/mermaid/src/docs/syntax/gitgraph.md b/packages/mermaid/src/docs/syntax/gitgraph.md index 5fa09cb225..3f7e42d436 100644 --- a/packages/mermaid/src/docs/syntax/gitgraph.md +++ b/packages/mermaid/src/docs/syntax/gitgraph.md @@ -244,24 +244,29 @@ A few important rules to note here are: 1. You need to provide the `id` for an existing commit to be cherry-picked. If given commit id does not exist it will result in an error. For this, make use of the `commit id:$value` format of declaring commits. See the examples from above. 2. The given commit must not exist on the current branch. The cherry-picked commit must always be a different branch than the current branch. 3. Current branch must have at least one commit, before you can cherry-pick, otherwise it will cause an error is throw. +4. When cherry-picking a merge commit, providing a parent commit ID is mandatory. If the parent attribute is omitted or an invalid parent commit ID is provided, an error will be thrown. +5. The specified parent commit must be an immediate parent of the merge commit being cherry-picked. Let see an example: ```mermaid-example gitGraph - commit id: "ZERO" - branch develop - commit id:"A" - checkout main - commit id:"ONE" - checkout develop - commit id:"B" - checkout main - commit id:"TWO" - cherry-pick id:"A" - commit id:"THREE" - checkout develop - commit id:"C" + commit id: "ZERO" + branch develop + branch release + commit id:"A" + checkout main + commit id:"ONE" + checkout develop + commit id:"B" + checkout main + merge develop id:"MERGE" + commit id:"TWO" + checkout release + cherry-pick id:"MERGE" parent:"B" + commit id:"THREE" + checkout develop + commit id:"C" ``` ## Gitgraph specific configuration options From d97e31a38cc8522c9a5efac2af7403c986938133 Mon Sep 17 00:00:00 2001 From: Susheel Thapa <83917129+SusheelThapa@users.noreply.github.com> Date: Mon, 16 Oct 2023 16:54:36 +0545 Subject: [PATCH 128/457] Chore: Typo fixed in multiple files --- docs/config/accessibility.md | 8 ++++---- docs/syntax/c4.md | 4 ++-- docs/syntax/flowchart.md | 6 +++--- docs/syntax/quadrantChart.md | 2 +- 4 files changed, 10 insertions(+), 10 deletions(-) diff --git a/docs/config/accessibility.md b/docs/config/accessibility.md index bf8b3e5915..836d6bcb23 100644 --- a/docs/config/accessibility.md +++ b/docs/config/accessibility.md @@ -97,7 +97,7 @@ See [the accTitle and accDescr usage examples](#acctitle-and-accdescr-usage-exam graph LR accTitle: Big Decisions accDescr: Bob's Burgers process for making big decisions - A[Identify Big Descision] --> B{Make Big Decision} + A[Identify Big Decision] --> B{Make Big Decision} B --> D[Be done] ``` @@ -105,7 +105,7 @@ See [the accTitle and accDescr usage examples](#acctitle-and-accdescr-usage-exam graph LR accTitle: Big Decisions accDescr: Bob's Burgers process for making big decisions - A[Identify Big Descision] --> B{Make Big Decision} + A[Identify Big Decision] --> B{Make Big Decision} B --> D[Be done] ``` @@ -137,7 +137,7 @@ Here is the HTML generated for the SVG element: _(Note that some of the SVG attr for making very, very big decisions. This is actually a very simple flow: identify the big decision and then make the big decision. } - A[Identify Big Descision] --> B{Make Big Decision} + A[Identify Big Decision] --> B{Make Big Decision} B --> D[Be done] ``` @@ -149,7 +149,7 @@ Here is the HTML generated for the SVG element: _(Note that some of the SVG attr for making very, very big decisions. This is actually a very simple flow: identify the big decision and then make the big decision. } - A[Identify Big Descision] --> B{Make Big Decision} + A[Identify Big Decision] --> B{Make Big Decision} B --> D[Be done] ``` diff --git a/docs/syntax/c4.md b/docs/syntax/c4.md index 1676708f50..e6b7736c33 100644 --- a/docs/syntax/c4.md +++ b/docs/syntax/c4.md @@ -399,7 +399,7 @@ UpdateRelStyle(customerA, bankA, $offsetY="60") title Component diagram for Internet Banking System - API Application Container(spa, "Single Page Application", "javascript and angular", "Provides all the internet banking functionality to customers via their web browser.") - Container(ma, "Mobile App", "Xamarin", "Provides a limited subset ot the internet banking functionality to customers via their mobile mobile device.") + Container(ma, "Mobile App", "Xamarin", "Provides a limited subset to the internet banking functionality to customers via their mobile mobile device.") ContainerDb(db, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.") System_Ext(mbs, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.") @@ -439,7 +439,7 @@ UpdateRelStyle(customerA, bankA, $offsetY="60") title Component diagram for Internet Banking System - API Application Container(spa, "Single Page Application", "javascript and angular", "Provides all the internet banking functionality to customers via their web browser.") - Container(ma, "Mobile App", "Xamarin", "Provides a limited subset ot the internet banking functionality to customers via their mobile mobile device.") + Container(ma, "Mobile App", "Xamarin", "Provides a limited subset to the internet banking functionality to customers via their mobile mobile device.") ContainerDb(db, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.") System_Ext(mbs, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.") diff --git a/docs/syntax/flowchart.md b/docs/syntax/flowchart.md index acd7c2db5b..1bdce6aa63 100644 --- a/docs/syntax/flowchart.md +++ b/docs/syntax/flowchart.md @@ -764,7 +764,7 @@ flowchart LR end %% ^ These subgraphs are identical, except for the links to them: - %% Link *to* subgraph1: subgraph1 direction is mantained + %% Link *to* subgraph1: subgraph1 direction is maintained outside --> subgraph1 %% Link *within* subgraph2: %% subgraph2 inherits the direction of the top-level graph (LR) @@ -783,7 +783,7 @@ flowchart LR end %% ^ These subgraphs are identical, except for the links to them: - %% Link *to* subgraph1: subgraph1 direction is mantained + %% Link *to* subgraph1: subgraph1 direction is maintained outside --> subgraph1 %% Link *within* subgraph2: %% subgraph2 inherits the direction of the top-level graph (LR) @@ -1112,7 +1112,7 @@ flowchart TD B-->E(A fa:fa-camera-retro perhaps?) ``` -Mermaid is compatible with Font Awesome up to verion 5, Free icons only. Check that the icons you use are from the [supported set of icons](https://fontawesome.com/v5/search?o=r&m=free). +Mermaid is compatible with Font Awesome up to version 5, Free icons only. Check that the icons you use are from the [supported set of icons](https://fontawesome.com/v5/search?o=r&m=free). ## Graph declarations with spaces between vertices and link and without semicolon diff --git a/docs/syntax/quadrantChart.md b/docs/syntax/quadrantChart.md index 39b57fd131..97bc94e36e 100644 --- a/docs/syntax/quadrantChart.md +++ b/docs/syntax/quadrantChart.md @@ -115,7 +115,7 @@ Points are used to plot a circle inside the quadrantChart. The syntax is ` | quadrantExternalBorderStrokeWidth | Quadrant external border stroke width | 2 | | xAxisLabelPadding | Top and bottom padding of x-axis text | 5 | | xAxisLabelFontSize | X-axis texts font size | 16 | -| xAxisPosition | Position of x-axis (top , bottom) if there are points the x-axis will alway be rendered in bottom | 'top' | +| xAxisPosition | Position of x-axis (top , bottom) if there are points the x-axis will always be rendered in bottom | 'top' | | yAxisLabelPadding | Left and Right padding of y-axis text | 5 | | yAxisLabelFontSize | Y-axis texts font size | 16 | | yAxisPosition | Position of y-axis (left , right) | 'left' | From 3128ba73a0be2dc06122ca8c0b4bae884a884958 Mon Sep 17 00:00:00 2001 From: Faris Date: Mon, 16 Oct 2023 19:36:44 +0300 Subject: [PATCH 129/457] chore(sequence): Update packages/mermaid/src/docs/syntax/sequenceDiagram.md Co-authored-by: Sidharth Vinod --- packages/mermaid/src/docs/syntax/sequenceDiagram.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/mermaid/src/docs/syntax/sequenceDiagram.md b/packages/mermaid/src/docs/syntax/sequenceDiagram.md index 5f312fee5c..e7df5d8c95 100644 --- a/packages/mermaid/src/docs/syntax/sequenceDiagram.md +++ b/packages/mermaid/src/docs/syntax/sequenceDiagram.md @@ -83,13 +83,13 @@ sequenceDiagram Bob->>Alice: I agree ``` -#### Unfixable actor/participant creation/deletion error (v+) +#### Unfixable actor/participant creation/deletion error If an error of the following type occurs when creating or deleting an actor/participant: > The destroyed participant **participant-name** does not have an associated destroying message after its declaration. Please check the sequence diagram. -And fixing diagram code does not get rid of this error and rendering of all other diagrams results in the same error, then you need to update the mermaid version. +And fixing diagram code does not get rid of this error and rendering of all other diagrams results in the same error, then you need to update the mermaid version to (v+). ### Grouping / Box From 3b5f5c78430640cfe048e947ac42e9994efd3cd2 Mon Sep 17 00:00:00 2001 From: Faris Nabiev Date: Mon, 16 Oct 2023 19:47:58 +0300 Subject: [PATCH 130/457] chore: fix autogen docs --- docs/syntax/sequenceDiagram.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/syntax/sequenceDiagram.md b/docs/syntax/sequenceDiagram.md index 1172e2994b..2dff973e41 100644 --- a/docs/syntax/sequenceDiagram.md +++ b/docs/syntax/sequenceDiagram.md @@ -131,13 +131,13 @@ sequenceDiagram Bob->>Alice: I agree ``` -#### Unfixable actor/participant creation/deletion error (v\+) +#### Unfixable actor/participant creation/deletion error If an error of the following type occurs when creating or deleting an actor/participant: > The destroyed participant **participant-name** does not have an associated destroying message after its declaration. Please check the sequence diagram. -And fixing diagram code does not get rid of this error and rendering of all other diagrams results in the same error, then you need to update the mermaid version. +And fixing diagram code does not get rid of this error and rendering of all other diagrams results in the same error, then you need to update the mermaid version to (v\+). ### Grouping / Box From e4350f80fe9bc1d091ca84e3f793d7019338f00f Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Mon, 16 Oct 2023 19:52:01 +0000 Subject: [PATCH 131/457] chore(deps): update all patch dependencies --- docker-compose.yml | 2 +- package.json | 4 +- packages/mermaid/src/docs/package.json | 2 +- pnpm-lock.yaml | 123 ++++++++++++++++++------- 4 files changed, 95 insertions(+), 36 deletions(-) diff --git a/docker-compose.yml b/docker-compose.yml index 125ce5da8f..e2484bdc52 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -1,7 +1,7 @@ version: '3.9' services: mermaid: - image: node:18.18.0-alpine3.18 + image: node:18.18.2-alpine3.18 stdin_open: true tty: true working_dir: /mermaid diff --git a/package.json b/package.json index 44e2869f48..ee0c01413c 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "version": "10.2.4", "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.", "type": "module", - "packageManager": "pnpm@8.9.0", + "packageManager": "pnpm@8.9.2", "keywords": [ "diagram", "markdown", @@ -123,7 +123,7 @@ "vitest": "^0.34.0" }, "volta": { - "node": "18.18.0" + "node": "18.18.2" }, "nyc": { "report-dir": "coverage/cypress" diff --git a/packages/mermaid/src/docs/package.json b/packages/mermaid/src/docs/package.json index ff8a03d5df..a7ec3312aa 100644 --- a/packages/mermaid/src/docs/package.json +++ b/packages/mermaid/src/docs/package.json @@ -32,7 +32,7 @@ "unplugin-vue-components": "^0.25.0", "vite": "^4.3.9", "vite-plugin-pwa": "^0.16.0", - "vitepress": "1.0.0-rc.20", + "vitepress": "1.0.0-rc.22", "workbox-window": "^7.0.0" } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 79f4087b00..c689554067 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -475,8 +475,8 @@ importers: specifier: ^0.16.0 version: 0.16.0(vite@4.4.9)(workbox-build@7.0.0)(workbox-window@7.0.0) vitepress: - specifier: 1.0.0-rc.20 - version: 1.0.0-rc.20(@algolia/client-search@4.19.1)(@types/node@18.17.5)(postcss@8.4.27)(search-insights@2.7.0) + specifier: 1.0.0-rc.22 + version: 1.0.0-rc.22(@algolia/client-search@4.19.1)(@types/node@18.17.5)(postcss@8.4.27)(search-insights@2.7.0) workbox-window: specifier: ^7.0.0 version: 7.0.0 @@ -4562,6 +4562,10 @@ packages: resolution: {integrity: sha512-4p9vcSmxAayx72yn70joFoL44c9MO/0+iVEBIQXe3v2h2SiAsEIo/G5v6ObFWvNKRFjbrVadNf9LqEEZeQPzdA==} dev: true + /@types/web-bluetooth@0.0.18: + resolution: {integrity: sha512-v/ZHEj9xh82usl8LMR3GarzFY1IrbXJw5L4QfQhokjRV91q+SelFqxQWSep1ucXEZ22+dSTwLFkXeur25sPIbw==} + dev: true + /@types/ws@8.5.5: resolution: {integrity: sha512-lwhs8hktwxSjf9UaZ9tG5M03PGogvFaH8gUgLNbN9HKIg0dvv6q+gkSuJ8HN4/VbyxkuLzCjlN7GquQ0gUJfIg==} dependencies: @@ -5267,6 +5271,10 @@ packages: /@vue/devtools-api@6.5.0: resolution: {integrity: sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q==} + /@vue/devtools-api@6.5.1: + resolution: {integrity: sha512-+KpckaAQyfbvshdDW5xQylLni1asvNSGme1JFs8I1+/H5pHEhqUKMEQD/qn3Nx5+/nycBq11qAEi8lk+LXI2dA==} + dev: true + /@vue/reactivity-transform@3.3.4: resolution: {integrity: sha512-MXgwjako4nu5WFLAjpBnCj/ieqcjE2aJBINUNQzkZQfzIZA4xn+0fV1tIYBJvvva3N3OvKGofRLvQIwEQPpaXw==} dependencies: @@ -5330,20 +5338,20 @@ packages: - vue dev: true - /@vueuse/core@10.4.1(vue@3.3.4): - resolution: {integrity: sha512-DkHIfMIoSIBjMgRRvdIvxsyboRZQmImofLyOHADqiVbQVilP8VVHDhBX2ZqoItOgu7dWa8oXiNnScOdPLhdEXg==} + /@vueuse/core@10.5.0(vue@3.3.4): + resolution: {integrity: sha512-z/tI2eSvxwLRjOhDm0h/SXAjNm8N5ld6/SC/JQs6o6kpJ6Ya50LnEL8g5hoYu005i28L0zqB5L5yAl8Jl26K3A==} dependencies: - '@types/web-bluetooth': 0.0.17 - '@vueuse/metadata': 10.4.1 - '@vueuse/shared': 10.4.1(vue@3.3.4) - vue-demi: 0.14.5(vue@3.3.4) + '@types/web-bluetooth': 0.0.18 + '@vueuse/metadata': 10.5.0 + '@vueuse/shared': 10.5.0(vue@3.3.4) + vue-demi: 0.14.6(vue@3.3.4) transitivePeerDependencies: - '@vue/composition-api' - vue dev: true - /@vueuse/integrations@10.4.1(focus-trap@7.5.2)(vue@3.3.4): - resolution: {integrity: sha512-uRBPyG5Lxoh1A/J+boiioPT3ELEAPEo4t8W6Mr4yTKIQBeW/FcbsotZNPr4k9uz+3QEksMmflWloS9wCnypM7g==} + /@vueuse/integrations@10.5.0(focus-trap@7.5.4)(vue@3.3.4): + resolution: {integrity: sha512-fm5sXLCK0Ww3rRnzqnCQRmfjDURaI4xMsx+T+cec0ngQqHx/JgUtm8G0vRjwtonIeTBsH1Q8L3SucE+7K7upJQ==} peerDependencies: async-validator: '*' axios: '*' @@ -5383,10 +5391,10 @@ packages: universal-cookie: optional: true dependencies: - '@vueuse/core': 10.4.1(vue@3.3.4) - '@vueuse/shared': 10.4.1(vue@3.3.4) - focus-trap: 7.5.2 - vue-demi: 0.14.5(vue@3.3.4) + '@vueuse/core': 10.5.0(vue@3.3.4) + '@vueuse/shared': 10.5.0(vue@3.3.4) + focus-trap: 7.5.4 + vue-demi: 0.14.6(vue@3.3.4) transitivePeerDependencies: - '@vue/composition-api' - vue @@ -5400,8 +5408,8 @@ packages: resolution: {integrity: sha512-Ema3YhNOa4swDsV0V7CEY5JXvK19JI/o1szFO1iWxdFg3vhdFtCtSTP26PCvbUpnUtNHBY2wx5y3WDXND5Pvnw==} dev: true - /@vueuse/metadata@10.4.1: - resolution: {integrity: sha512-2Sc8X+iVzeuMGHr6O2j4gv/zxvQGGOYETYXEc41h0iZXIRnRbJZGmY/QP8dvzqUelf8vg0p/yEA5VpCEu+WpZg==} + /@vueuse/metadata@10.5.0: + resolution: {integrity: sha512-fEbElR+MaIYyCkeM0SzWkdoMtOpIwO72x8WsZHRE7IggiOlILttqttM69AS13nrDxosnDBYdyy3C5mR1LCxHsw==} dev: true /@vueuse/shared@10.1.0(vue@3.3.4): @@ -5422,10 +5430,10 @@ packages: - vue dev: true - /@vueuse/shared@10.4.1(vue@3.3.4): - resolution: {integrity: sha512-vz5hbAM4qA0lDKmcr2y3pPdU+2EVw/yzfRsBdu+6+USGa4PxqSQRYIUC9/NcT06y+ZgaTsyURw2I9qOFaaXHAg==} + /@vueuse/shared@10.5.0(vue@3.3.4): + resolution: {integrity: sha512-18iyxbbHYLst9MqU1X1QNdMHIjks6wC7XTVf0KNOv5es/Ms6gjVFCAAWTVP2JStuGqydg3DT+ExpFORUEi9yhg==} dependencies: - vue-demi: 0.14.5(vue@3.3.4) + vue-demi: 0.14.6(vue@3.3.4) transitivePeerDependencies: - '@vue/composition-api' - vue @@ -9274,8 +9282,8 @@ packages: resolution: {integrity: sha512-XGozTsMPYkm+6b5QL3Z9wQcJjNYxp0CYn3U1gO7dwD6PAqU1SVWZxI9CCg3z+ml3YfqdPnrBehaBrnH2AGKbNA==} dev: true - /focus-trap@7.5.2: - resolution: {integrity: sha512-p6vGNNWLDGwJCiEjkSK6oERj/hEyI9ITsSwIUICBoKLlWiTWXJRfQibCwcoi50rTZdbi87qDtUlMCmQwsGSgPw==} + /focus-trap@7.5.4: + resolution: {integrity: sha512-N7kHdlgsO/v+iD/dMoJKtsSqs5Dz/dXZVebRgJw23LDk+jMi/974zyiOYDziY2JPp8xivq9BmUGwIJMiuSBi7w==} dependencies: tabbable: 6.2.0 dev: true @@ -14040,8 +14048,8 @@ packages: vscode-textmate: 8.0.0 dev: true - /shiki@0.14.4: - resolution: {integrity: sha512-IXCRip2IQzKwxArNNq1S+On4KPML3Yyn8Zzs/xRgcgOWIr8ntIK3IKzjFPfjy/7kt9ZMjc+FItfqHRBg8b6tNQ==} + /shiki@0.14.5: + resolution: {integrity: sha512-1gCAYOcmCFONmErGTrS1fjzJLA7MGZmKzrBNX7apqSwhyITJg2O102uFzXUeBxNnEkDA9vHIKLyeKq0V083vIw==} dependencies: ansi-sequence-parser: 1.1.1 jsonc-parser: 3.2.0 @@ -15528,6 +15536,42 @@ packages: - supports-color dev: true + /vite@4.4.11(@types/node@18.17.5): + resolution: {integrity: sha512-ksNZJlkcU9b0lBwAGZGGaZHCMqHsc8OpgtoYhsQ4/I2v5cnpmmmqe5pM4nv/4Hn6G/2GhTdj0DhZh2e+Er1q5A==} + engines: {node: ^14.18.0 || >=16.0.0} + hasBin: true + peerDependencies: + '@types/node': '>= 14' + less: '*' + lightningcss: ^1.21.0 + sass: '*' + stylus: '*' + sugarss: '*' + terser: ^5.4.0 + peerDependenciesMeta: + '@types/node': + optional: true + less: + optional: true + lightningcss: + optional: true + sass: + optional: true + stylus: + optional: true + sugarss: + optional: true + terser: + optional: true + dependencies: + '@types/node': 18.17.5 + esbuild: 0.18.20 + postcss: 8.4.27 + rollup: 3.28.0 + optionalDependencies: + fsevents: 2.3.2 + dev: true + /vite@4.4.9(@types/node@18.17.5): resolution: {integrity: sha512-2mbUn2LlUmNASWwSCNSJ/EG2HuSRTnVNaydp6vMCm5VIqJsjMfbIWtbH2kDuwUVW5mMUKKZvGPX/rqeqVvv1XA==} engines: {node: ^14.18.0 || >=16.0.0} @@ -15612,12 +15656,12 @@ packages: - terser dev: true - /vitepress@1.0.0-rc.20(@algolia/client-search@4.19.1)(@types/node@18.17.5)(postcss@8.4.27)(search-insights@2.7.0): - resolution: {integrity: sha512-CykMUJ8JLxLcGWek0ew3wln4RYbsOd1+0YzXITTpajggpynm2S331TNkJVOkHrMRc6GYe3y4pS40GfgcW0ZwAw==} + /vitepress@1.0.0-rc.22(@algolia/client-search@4.19.1)(@types/node@18.17.5)(postcss@8.4.27)(search-insights@2.7.0): + resolution: {integrity: sha512-n7le5iikCFgWMuX7sKfzDGJGlrsYQ5trG3S97BghNz2alOTr4Xp+GrB6ShwogUTX9gNgeNmrACjokhW55LNeBA==} hasBin: true peerDependencies: markdown-it-mathjax3: ^4.3.2 - postcss: ^8.4.30 + postcss: ^8.4.31 peerDependenciesMeta: markdown-it-mathjax3: optional: true @@ -15627,15 +15671,15 @@ packages: '@docsearch/css': 3.5.2 '@docsearch/js': 3.5.2(@algolia/client-search@4.19.1)(search-insights@2.7.0) '@types/markdown-it': 13.0.2 - '@vue/devtools-api': 6.5.0 - '@vueuse/core': 10.4.1(vue@3.3.4) - '@vueuse/integrations': 10.4.1(focus-trap@7.5.2)(vue@3.3.4) - focus-trap: 7.5.2 + '@vue/devtools-api': 6.5.1 + '@vueuse/core': 10.5.0(vue@3.3.4) + '@vueuse/integrations': 10.5.0(focus-trap@7.5.4)(vue@3.3.4) + focus-trap: 7.5.4 mark.js: 8.11.1 minisearch: 6.1.0 postcss: 8.4.27 - shiki: 0.14.4 - vite: 4.4.9(@types/node@18.17.5) + shiki: 0.14.5 + vite: 4.4.11(@types/node@18.17.5) vue: 3.3.4 transitivePeerDependencies: - '@algolia/client-search' @@ -15779,6 +15823,21 @@ packages: dependencies: vue: 3.3.4 + /vue-demi@0.14.6(vue@3.3.4): + resolution: {integrity: sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==} + engines: {node: '>=12'} + hasBin: true + requiresBuild: true + peerDependencies: + '@vue/composition-api': ^1.0.0-rc.1 + vue: ^3.0.0-0 || ^2.6.0 + peerDependenciesMeta: + '@vue/composition-api': + optional: true + dependencies: + vue: 3.3.4 + dev: true + /vue@3.3.4: resolution: {integrity: sha512-VTyEYn3yvIeY1Py0WaYGZsXnz3y5UnGi62GjVEqvEGPl6nxbOrCXbVOTQWBEJUqAyTUk2uJ5JLVnYJ6ZzGbrSw==} dependencies: From 0e328823b91dd7c4a3450778008b7a6e25aee473 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Tue, 17 Oct 2023 11:08:38 +0000 Subject: [PATCH 132/457] Bump @babel/traverse from 7.22.10 to 7.23.2 Bumps [@babel/traverse](https://github.com/babel/babel/tree/HEAD/packages/babel-traverse) from 7.22.10 to 7.23.2. - [Release notes](https://github.com/babel/babel/releases) - [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md) - [Commits](https://github.com/babel/babel/commits/v7.23.2/packages/babel-traverse) --- updated-dependencies: - dependency-name: "@babel/traverse" dependency-type: indirect ... Signed-off-by: dependabot[bot] --- pnpm-lock.yaml | 137 ++++++++++++++++++++++++++++++++++++------------- 1 file changed, 100 insertions(+), 37 deletions(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c689554067..2fab1d4a01 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1061,6 +1061,14 @@ packages: chalk: 2.4.2 dev: true + /@babel/code-frame@7.22.13: + resolution: {integrity: sha512-XktuhWlJ5g+3TJXc5upd9Ks1HutSArik6jf2eAjYFyIOf4ej3RN+184cZbzDvbPnuTJIUhPKKJE3cIsYTiAT3w==} + engines: {node: '>=6.9.0'} + dependencies: + '@babel/highlight': 7.22.20 + chalk: 2.4.2 + dev: true + /@babel/compat-data@7.22.9: resolution: {integrity: sha512-5UamI7xkUcJ3i9qVDS+KFDEK8/7oJ55/sJMB1Ge7IEapr7KfdfV/HErR+koZwOfd+SgtFKOKRhRakdg++DcJpQ==} engines: {node: '>=6.9.0'} @@ -1078,7 +1086,7 @@ packages: '@babel/helpers': 7.22.10 '@babel/parser': 7.22.10 '@babel/template': 7.22.5 - '@babel/traverse': 7.22.10 + '@babel/traverse': 7.23.2 '@babel/types': 7.22.10 convert-source-map: 1.9.0 debug: 4.3.4(supports-color@8.1.1) @@ -1099,18 +1107,28 @@ packages: jsesc: 2.5.2 dev: true + /@babel/generator@7.23.0: + resolution: {integrity: sha512-lN85QRR+5IbYrMWM6Y4pE/noaQtg4pNiqeNGX60eqOfo6gtEj6uw/JagelB8vVztSd7R6M5n1+PQkDbHbBRU4g==} + engines: {node: '>=6.9.0'} + dependencies: + '@babel/types': 7.23.0 + '@jridgewell/gen-mapping': 0.3.3 + '@jridgewell/trace-mapping': 0.3.19 + jsesc: 2.5.2 + dev: true + /@babel/helper-annotate-as-pure@7.22.5: resolution: {integrity: sha512-LvBTxu8bQSQkcyKOU+a1btnNFQ1dMAd0R6PyW3arXes06F6QLWLIrd681bxRPIXlrMGR3XYnW9JyML7dP3qgxg==} engines: {node: '>=6.9.0'} dependencies: - '@babel/types': 7.22.10 + '@babel/types': 7.23.0 dev: true /@babel/helper-builder-binary-assignment-operator-visitor@7.22.10: resolution: {integrity: sha512-Av0qubwDQxC56DoUReVDeLfMEjYYSN1nZrTUrWkXd7hpU73ymRANkbuDm3yni9npkn+RXy9nNbEJZEzXr7xrfQ==} engines: {node: '>=6.9.0'} dependencies: - '@babel/types': 7.22.10 + '@babel/types': 7.23.0 dev: true /@babel/helper-compilation-targets@7.22.10: @@ -1132,8 +1150,8 @@ packages: dependencies: '@babel/core': 7.22.10 '@babel/helper-annotate-as-pure': 7.22.5 - '@babel/helper-environment-visitor': 7.22.5 - '@babel/helper-function-name': 7.22.5 + '@babel/helper-environment-visitor': 7.22.20 + '@babel/helper-function-name': 7.23.0 '@babel/helper-member-expression-to-functions': 7.22.5 '@babel/helper-optimise-call-expression': 7.22.5 '@babel/helper-replace-supers': 7.22.9(@babel/core@7.22.10) @@ -1169,31 +1187,36 @@ packages: - supports-color dev: true + /@babel/helper-environment-visitor@7.22.20: + resolution: {integrity: sha512-zfedSIzFhat/gFhWfHtgWvlec0nqB9YEIVrpuwjruLlXfUSnA8cJB0miHKwqDnQ7d32aKo2xt88/xZptwxbfhA==} + engines: {node: '>=6.9.0'} + dev: true + /@babel/helper-environment-visitor@7.22.5: resolution: {integrity: sha512-XGmhECfVA/5sAt+H+xpSg0mfrHq6FzNr9Oxh7PSEBBRUb/mL7Kz3NICXb194rCqAEdxkhPT1a88teizAFyvk8Q==} engines: {node: '>=6.9.0'} dev: true - /@babel/helper-function-name@7.22.5: - resolution: {integrity: sha512-wtHSq6jMRE3uF2otvfuD3DIvVhOsSNshQl0Qrd7qC9oQJzHvOL4qQXlQn2916+CXGywIjpGuIkoyZRRxHPiNQQ==} + /@babel/helper-function-name@7.23.0: + resolution: {integrity: sha512-OErEqsrxjZTJciZ4Oo+eoZqeW9UIiOcuYKRJA4ZAgV9myA+pOXhhmpfNCKjEH/auVfEYVFJ6y1Tc4r0eIApqiw==} engines: {node: '>=6.9.0'} dependencies: - '@babel/template': 7.22.5 - '@babel/types': 7.22.10 + '@babel/template': 7.22.15 + '@babel/types': 7.23.0 dev: true /@babel/helper-hoist-variables@7.22.5: resolution: {integrity: sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw==} engines: {node: '>=6.9.0'} dependencies: - '@babel/types': 7.22.10 + '@babel/types': 7.23.0 dev: true /@babel/helper-member-expression-to-functions@7.22.5: resolution: {integrity: sha512-aBiH1NKMG0H2cGZqspNvsaBe6wNGjbJjuLy29aU+eDZjSbbN53BaxlpB02xm9v34pLTZ1nIQPFYn2qMZoa5BQQ==} engines: {node: '>=6.9.0'} dependencies: - '@babel/types': 7.22.10 + '@babel/types': 7.23.0 dev: true /@babel/helper-module-imports@7.22.5: @@ -1221,7 +1244,7 @@ packages: resolution: {integrity: sha512-HBwaojN0xFRx4yIvpwGqxiV2tUfl7401jlok564NgB9EHS1y6QT17FmKWm4ztqjeVdXLuC4fSvHc5ePpQjoTbw==} engines: {node: '>=6.9.0'} dependencies: - '@babel/types': 7.22.10 + '@babel/types': 7.23.0 dev: true /@babel/helper-plugin-utils@7.22.5: @@ -1237,7 +1260,7 @@ packages: dependencies: '@babel/core': 7.22.10 '@babel/helper-annotate-as-pure': 7.22.5 - '@babel/helper-environment-visitor': 7.22.5 + '@babel/helper-environment-visitor': 7.22.20 '@babel/helper-wrap-function': 7.22.10 dev: true @@ -1248,7 +1271,7 @@ packages: '@babel/core': ^7.0.0 dependencies: '@babel/core': 7.22.10 - '@babel/helper-environment-visitor': 7.22.5 + '@babel/helper-environment-visitor': 7.22.20 '@babel/helper-member-expression-to-functions': 7.22.5 '@babel/helper-optimise-call-expression': 7.22.5 dev: true @@ -1264,20 +1287,25 @@ packages: resolution: {integrity: sha512-tK14r66JZKiC43p8Ki33yLBVJKlQDFoA8GYN67lWCDCqoL6EMMSuM9b+Iff2jHaM/RRFYl7K+iiru7hbRqNx8Q==} engines: {node: '>=6.9.0'} dependencies: - '@babel/types': 7.22.10 + '@babel/types': 7.23.0 dev: true /@babel/helper-split-export-declaration@7.22.6: resolution: {integrity: sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==} engines: {node: '>=6.9.0'} dependencies: - '@babel/types': 7.22.10 + '@babel/types': 7.23.0 dev: true /@babel/helper-string-parser@7.22.5: resolution: {integrity: sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw==} engines: {node: '>=6.9.0'} + /@babel/helper-validator-identifier@7.22.20: + resolution: {integrity: sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==} + engines: {node: '>=6.9.0'} + dev: true + /@babel/helper-validator-identifier@7.22.5: resolution: {integrity: sha512-aJXu+6lErq8ltp+JhkJUfk1MTGyuA4v7f3pA+BJ5HLfNC6nAQ0Cpi9uOquUj8Hehg0aUiHzWQbOVJGao6ztBAQ==} engines: {node: '>=6.9.0'} @@ -1291,9 +1319,9 @@ packages: resolution: {integrity: sha512-OnMhjWjuGYtdoO3FmsEFWvBStBAe2QOgwOLsLNDjN+aaiMD8InJk1/O3HSD8lkqTjCgg5YI34Tz15KNNA3p+nQ==} engines: {node: '>=6.9.0'} dependencies: - '@babel/helper-function-name': 7.22.5 - '@babel/template': 7.22.5 - '@babel/types': 7.22.10 + '@babel/helper-function-name': 7.23.0 + '@babel/template': 7.22.15 + '@babel/types': 7.23.0 dev: true /@babel/helpers@7.22.10: @@ -1301,7 +1329,7 @@ packages: engines: {node: '>=6.9.0'} dependencies: '@babel/template': 7.22.5 - '@babel/traverse': 7.22.10 + '@babel/traverse': 7.23.2 '@babel/types': 7.22.10 transitivePeerDependencies: - supports-color @@ -1316,6 +1344,15 @@ packages: js-tokens: 4.0.0 dev: true + /@babel/highlight@7.22.20: + resolution: {integrity: sha512-dkdMCN3py0+ksCgYmGG8jKeGA/8Tk+gJwSYYlFGxG5lmhfKNoAy004YpLxpS1W2J8m/EK2Ew+yOs9pVRwO89mg==} + engines: {node: '>=6.9.0'} + dependencies: + '@babel/helper-validator-identifier': 7.22.20 + chalk: 2.4.2 + js-tokens: 4.0.0 + dev: true + /@babel/parser@7.22.10: resolution: {integrity: sha512-lNbdGsQb9ekfsnjFGhEiF4hfFqGgfOP3H3d27re3n+CGhNuTSUEQdfWk556sTLNTloczcdM5TYF2LhzmDQKyvQ==} engines: {node: '>=6.0.0'} @@ -1323,6 +1360,14 @@ packages: dependencies: '@babel/types': 7.22.10 + /@babel/parser@7.23.0: + resolution: {integrity: sha512-vvPKKdMemU85V9WE/l5wZEmImpCtLqbnTvqDS2U1fJ96KrxoW7KrXhNsNCblQlg8Ck4b85yxdTyelsMUgFUXiw==} + engines: {node: '>=6.0.0'} + hasBin: true + dependencies: + '@babel/types': 7.23.0 + dev: true + /@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@7.22.5(@babel/core@7.22.10): resolution: {integrity: sha512-NP1M5Rf+u2Gw9qfSO4ihjcTGW5zXTi36ITLd4/EoAcEhIZ0yjMqmftDNl3QC19CX7olhrjpyU454g/2W7X0jvQ==} engines: {node: '>=6.9.0'} @@ -1569,7 +1614,7 @@ packages: '@babel/core': ^7.0.0-0 dependencies: '@babel/core': 7.22.10 - '@babel/helper-environment-visitor': 7.22.5 + '@babel/helper-environment-visitor': 7.22.20 '@babel/helper-plugin-utils': 7.22.5 '@babel/helper-remap-async-to-generator': 7.22.9(@babel/core@7.22.10) '@babel/plugin-syntax-async-generators': 7.8.4(@babel/core@7.22.10) @@ -1639,8 +1684,8 @@ packages: '@babel/core': 7.22.10 '@babel/helper-annotate-as-pure': 7.22.5 '@babel/helper-compilation-targets': 7.22.10 - '@babel/helper-environment-visitor': 7.22.5 - '@babel/helper-function-name': 7.22.5 + '@babel/helper-environment-visitor': 7.22.20 + '@babel/helper-function-name': 7.23.0 '@babel/helper-optimise-call-expression': 7.22.5 '@babel/helper-plugin-utils': 7.22.5 '@babel/helper-replace-supers': 7.22.9(@babel/core@7.22.10) @@ -1656,7 +1701,7 @@ packages: dependencies: '@babel/core': 7.22.10 '@babel/helper-plugin-utils': 7.22.5 - '@babel/template': 7.22.5 + '@babel/template': 7.22.15 dev: true /@babel/plugin-transform-destructuring@7.22.10(@babel/core@7.22.10): @@ -1741,7 +1786,7 @@ packages: dependencies: '@babel/core': 7.22.10 '@babel/helper-compilation-targets': 7.22.10 - '@babel/helper-function-name': 7.22.5 + '@babel/helper-function-name': 7.23.0 '@babel/helper-plugin-utils': 7.22.5 dev: true @@ -1820,7 +1865,7 @@ packages: '@babel/helper-hoist-variables': 7.22.5 '@babel/helper-module-transforms': 7.22.9(@babel/core@7.22.10) '@babel/helper-plugin-utils': 7.22.5 - '@babel/helper-validator-identifier': 7.22.5 + '@babel/helper-validator-identifier': 7.22.20 dev: true /@babel/plugin-transform-modules-umd@7.22.5(@babel/core@7.22.10): @@ -2165,7 +2210,7 @@ packages: '@babel/plugin-transform-unicode-regex': 7.22.5(@babel/core@7.22.10) '@babel/plugin-transform-unicode-sets-regex': 7.22.5(@babel/core@7.22.10) '@babel/preset-modules': 0.1.6-no-external-plugins(@babel/core@7.22.10) - '@babel/types': 7.22.10 + '@babel/types': 7.23.0 babel-plugin-polyfill-corejs2: 0.4.5(@babel/core@7.22.10) babel-plugin-polyfill-corejs3: 0.8.3(@babel/core@7.22.10) babel-plugin-polyfill-regenerator: 0.5.2(@babel/core@7.22.10) @@ -2182,7 +2227,7 @@ packages: dependencies: '@babel/core': 7.22.10 '@babel/helper-plugin-utils': 7.22.5 - '@babel/types': 7.22.10 + '@babel/types': 7.23.0 esutils: 2.0.3 dev: true @@ -2197,6 +2242,15 @@ packages: regenerator-runtime: 0.14.0 dev: true + /@babel/template@7.22.15: + resolution: {integrity: sha512-QPErUVm4uyJa60rkI73qneDacvdvzxshT3kksGqlGWYdOTIUOwJ7RDUL8sGqslY1uXWSL6xMFKEXDS3ox2uF0w==} + engines: {node: '>=6.9.0'} + dependencies: + '@babel/code-frame': 7.22.13 + '@babel/parser': 7.23.0 + '@babel/types': 7.23.0 + dev: true + /@babel/template@7.22.5: resolution: {integrity: sha512-X7yV7eiwAxdj9k94NEylvbVHLiVG1nvzCV2EAowhxLTwODV1jl9UzZ48leOC0sH7OnuHrIkllaBgneUykIcZaw==} engines: {node: '>=6.9.0'} @@ -2206,18 +2260,18 @@ packages: '@babel/types': 7.22.10 dev: true - /@babel/traverse@7.22.10: - resolution: {integrity: sha512-Q/urqV4pRByiNNpb/f5OSv28ZlGJiFiiTh+GAHktbIrkPhPbl90+uW6SmpoLyZqutrg9AEaEf3Q/ZBRHBXgxig==} + /@babel/traverse@7.23.2: + resolution: {integrity: sha512-azpe59SQ48qG6nu2CzcMLbxUudtN+dOM9kDbUqGq3HXUJRlo7i8fvPoxQUzYgLZ4cMVmuZgm8vvBpNeRhd6XSw==} engines: {node: '>=6.9.0'} dependencies: - '@babel/code-frame': 7.22.10 - '@babel/generator': 7.22.10 - '@babel/helper-environment-visitor': 7.22.5 - '@babel/helper-function-name': 7.22.5 + '@babel/code-frame': 7.22.13 + '@babel/generator': 7.23.0 + '@babel/helper-environment-visitor': 7.22.20 + '@babel/helper-function-name': 7.23.0 '@babel/helper-hoist-variables': 7.22.5 '@babel/helper-split-export-declaration': 7.22.6 - '@babel/parser': 7.22.10 - '@babel/types': 7.22.10 + '@babel/parser': 7.23.0 + '@babel/types': 7.23.0 debug: 4.3.4(supports-color@8.1.1) globals: 11.12.0 transitivePeerDependencies: @@ -2232,6 +2286,15 @@ packages: '@babel/helper-validator-identifier': 7.22.5 to-fast-properties: 2.0.0 + /@babel/types@7.23.0: + resolution: {integrity: sha512-0oIyUfKoI3mSqMvsxBdclDwxXKXAUA8v/apZbc+iSyARYou1o8ZGDxbUYyLFoW2arqS2jDGqJuZvv1d/io1axg==} + engines: {node: '>=6.9.0'} + dependencies: + '@babel/helper-string-parser': 7.22.5 + '@babel/helper-validator-identifier': 7.22.20 + to-fast-properties: 2.0.0 + dev: true + /@bcherny/json-schema-ref-parser@9.0.9: resolution: {integrity: sha512-vmEmnJCfpkLdas++9OYg6riIezTYqTHpqUTODJzHLzs5UnXujbOJW9VwcVCnyo1mVRt32FRr23iXBx/sX8YbeQ==} dependencies: @@ -13729,7 +13792,7 @@ packages: peerDependencies: rollup: ^2.0.0 dependencies: - '@babel/code-frame': 7.22.10 + '@babel/code-frame': 7.22.13 jest-worker: 26.6.2 rollup: 2.79.1 serialize-javascript: 4.0.0 From 31ec3d14960afad5b7a97d62029234fd0045da89 Mon Sep 17 00:00:00 2001 From: Anthony Damico Date: Tue, 17 Oct 2023 10:30:29 -0400 Subject: [PATCH 133/457] Update questions-and-suggestions.md --- .../mermaid/src/docs/community/questions-and-suggestions.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/mermaid/src/docs/community/questions-and-suggestions.md b/packages/mermaid/src/docs/community/questions-and-suggestions.md index 6d6f80fb6d..b18a83ab59 100644 --- a/packages/mermaid/src/docs/community/questions-and-suggestions.md +++ b/packages/mermaid/src/docs/community/questions-and-suggestions.md @@ -4,9 +4,9 @@ ## First search to see if someone has already asked (and hopefully been answered) or suggested the same thing. -- Search in Discussions -- Search in open Issues -- Search in closed Issues +- [Search in Discussions](https://github.com/orgs/mermaid-js/discussions) +- [Search in open Issues](https://github.com/mermaid-js/mermaid/issues?q=is%3Aopen+is%3Aissue) +- [Search in closed Issues](https://github.com/mermaid-js/mermaid/issues?q=is%3Aissue+is%3Aclosed) If you find an open issue or discussion thread that is similar to your question but isn't answered, you can let us know that you are also interested in it. Use the GitHub reactions to add a thumbs-up to the issue or discussion thread. From d8500f9e0833062467c39ed52b7763c5fc346a06 Mon Sep 17 00:00:00 2001 From: RounakJoshi09 Date: Wed, 18 Oct 2023 20:59:55 +0530 Subject: [PATCH 134/457] Suggested Changes FOR PR DONE --- packages/mermaid/src/diagrams/git/gitGraphAst.js | 10 ++++------ .../mermaid/src/diagrams/git/parser/gitGraph.jison | 2 ++ 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/mermaid/src/diagrams/git/gitGraphAst.js b/packages/mermaid/src/diagrams/git/gitGraphAst.js index 34cf91b51f..fde3d9af95 100644 --- a/packages/mermaid/src/diagrams/git/gitGraphAst.js +++ b/packages/mermaid/src/diagrams/git/gitGraphAst.js @@ -284,11 +284,10 @@ export const cherryPick = function (sourceId, targetId, tag, parentCommitId) { 'Incorrect usage of cherry-pick: If the source commit is a merge commit, an immediate parent commit must be specified.' ); error.hash = { - text: 'cherryPick ' + sourceId + ' ' + targetId, - token: 'cherryPick ' + sourceId + ' ' + targetId, + text: `cherryPick ${sourceId} ${targetId}`, + token: `cherryPick ${sourceId} ${targetId}`, line: '1', loc: { first_line: 1, last_line: 1, first_column: 1, last_column: 1 }, - expected: ['cherry-pick abc'], }; throw error; } @@ -297,11 +296,10 @@ export const cherryPick = function (sourceId, targetId, tag, parentCommitId) { 'Invalid operation: The specified parent commit is not an immediate parent of the cherry-picked commit.' ); error.hash = { - text: 'cherryPick ' + sourceId + ' ' + targetId, - token: 'cherryPick ' + sourceId + ' ' + targetId, + text: `cherryPick ${sourceId} ${targetId}`, + token: `cherryPick ${sourceId} ${targetId}`, line: '1', loc: { first_line: 1, last_line: 1, first_column: 1, last_column: 1 }, - expected: ['cherry-pick abc'], }; throw error; } diff --git a/packages/mermaid/src/diagrams/git/parser/gitGraph.jison b/packages/mermaid/src/diagrams/git/parser/gitGraph.jison index 1e4ca026ed..40fab8b590 100644 --- a/packages/mermaid/src/diagrams/git/parser/gitGraph.jison +++ b/packages/mermaid/src/diagrams/git/parser/gitGraph.jison @@ -114,6 +114,8 @@ cherryPickStatement | CHERRY_PICK COMMIT_ID STR COMMIT_TAG STR {yy.cherryPick($3, '', $5)} | CHERRY_PICK COMMIT_ID STR PARENT_COMMIT STR COMMIT_TAG STR {yy.cherryPick($3, '', $7,$5)} | CHERRY_PICK COMMIT_ID STR COMMIT_TAG STR PARENT_COMMIT STR {yy.cherryPick($3, '', $5,$7)} + | CHERRY_PICK COMMIT_TAG STR COMMIT_ID STR {yy.cherryPick($5, '', $3)} + | CHERRY_PICK COMMIT_TAG EMPTYSTR COMMIT_ID STR {yy.cherryPick($5, '', '')} | CHERRY_PICK COMMIT_ID STR COMMIT_TAG EMPTYSTR {yy.cherryPick($3, '', '')} | CHERRY_PICK COMMIT_ID STR PARENT_COMMIT STR COMMIT_TAG EMPTYSTR {yy.cherryPick($3, '', '',$5)} | CHERRY_PICK COMMIT_ID STR COMMIT_TAG EMPTYSTR PARENT_COMMIT STR {yy.cherryPick($3, '', '',$7)} From 827808dca39962fdb216646a2d1ffc8b90c49e24 Mon Sep 17 00:00:00 2001 From: RounakJoshi09 Date: Thu, 19 Oct 2023 10:33:32 +0530 Subject: [PATCH 135/457] Merge Conflict Resolved --- packages/mermaid/src/diagrams/git/gitGraphAst.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/mermaid/src/diagrams/git/gitGraphAst.js b/packages/mermaid/src/diagrams/git/gitGraphAst.js index ae8351d83f..da7f4151e7 100644 --- a/packages/mermaid/src/diagrams/git/gitGraphAst.js +++ b/packages/mermaid/src/diagrams/git/gitGraphAst.js @@ -257,10 +257,10 @@ export const merge = function (otherBranch, custom_id, override_type, custom_tag export const cherryPick = function (sourceId, targetId, tag, parentCommitId) { log.debug('Entering cherryPick:', sourceId, targetId, tag); - sourceId = common.sanitizeText(sourceId, configApi.getConfig()); - targetId = common.sanitizeText(targetId, configApi.getConfig()); - tag = common.sanitizeText(tag, configApi.getConfig()); - parentCommitId = common.sanitizeText(parentCommitId, configApi.getConfig()); + sourceId = common.sanitizeText(sourceId, getConfig()); + targetId = common.sanitizeText(targetId, getConfig()); + tag = common.sanitizeText(tag, getConfig()); + parentCommitId = common.sanitizeText(parentCommitId, getConfig()); if (!sourceId || commits[sourceId] === undefined) { let error = new Error( From 87675e687e18ce2a29f21a7c5d8c5eac1b717934 Mon Sep 17 00:00:00 2001 From: Steph <35910788+huynhicode@users.noreply.github.com> Date: Thu, 19 Oct 2023 11:36:46 -0700 Subject: [PATCH 136/457] add latest blog post --- docs/news/announcements.md | 16 ++++------------ docs/news/blog.md | 6 ++++++ packages/mermaid/src/docs/news/announcements.md | 16 ++++------------ packages/mermaid/src/docs/news/blog.md | 6 ++++++ 4 files changed, 20 insertions(+), 24 deletions(-) diff --git a/docs/news/announcements.md b/docs/news/announcements.md index 98ca64421e..f80bef6f86 100644 --- a/docs/news/announcements.md +++ b/docs/news/announcements.md @@ -6,18 +6,10 @@ # Announcements -
    +Check out our latest blog post below. -Mermaid Chart - A smarter way to create diagrams | Product Hunt +## [Diagrams, Made Even Easier: Introducing “Code Snippets” in the Mermaid Chart Editor](https://www.mermaidchart.com/blog/posts/easier-diagram-editing-with-code-snippets/) -## Calling all fans of Mermaid and Mermaid Chart! 🎉 +12 October 2023 · 4 mins -We’ve officially made our Product Hunt debut, and would love any and all support from the community! - -[Click here](https://www.producthunt.com/posts/mermaid-chart?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-mermaid-chart) to check out our Product Hunt launch. - -Feel free to drop us a comment and let us know what you think. All new sign ups will receive a 30-day free trial of our Pro subscription, plus 25% off your first year. - -We’re on a mission to make text-based diagramming fun again. And we need your help to make that happen. - -Your support means the world to us. Thank you for being part of the diagramming movement. +Mermaid Chart introduces Code Snippets in its editor, streamlining the diagramming process for developers and professionals. diff --git a/docs/news/blog.md b/docs/news/blog.md index cc34b9f5c5..105c0056be 100644 --- a/docs/news/blog.md +++ b/docs/news/blog.md @@ -6,6 +6,12 @@ # Blog +## [Diagrams, Made Even Easier: Introducing “Code Snippets” in the Mermaid Chart Editor](https://www.mermaidchart.com/blog/posts/easier-diagram-editing-with-code-snippets/) + +12 October 2023 · 4 mins + +Mermaid Chart introduces Code Snippets in its editor, streamlining the diagramming process for developers and professionals. + ## [How to Make a Git Graph with Mermaid Chart](https://www.mermaidchart.com/blog/posts/how-to-make-a-git-graph-with-mermaid-chart/) 22 September 2023 · 7 mins diff --git a/packages/mermaid/src/docs/news/announcements.md b/packages/mermaid/src/docs/news/announcements.md index f14aab785c..5ce10cf21c 100644 --- a/packages/mermaid/src/docs/news/announcements.md +++ b/packages/mermaid/src/docs/news/announcements.md @@ -1,17 +1,9 @@ # Announcements -
    +Check out our latest blog post below. -Mermaid Chart - A smarter way to create diagrams | Product Hunt +## [Diagrams, Made Even Easier: Introducing “Code Snippets” in the Mermaid Chart Editor](https://www.mermaidchart.com/blog/posts/easier-diagram-editing-with-code-snippets/) -## Calling all fans of Mermaid and Mermaid Chart! 🎉 +12 October 2023 · 4 mins -We’ve officially made our Product Hunt debut, and would love any and all support from the community! - -[Click here](https://www.producthunt.com/posts/mermaid-chart?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-mermaid-chart) to check out our Product Hunt launch. - -Feel free to drop us a comment and let us know what you think. All new sign ups will receive a 30-day free trial of our Pro subscription, plus 25% off your first year. - -We’re on a mission to make text-based diagramming fun again. And we need your help to make that happen. - -Your support means the world to us. Thank you for being part of the diagramming movement. +Mermaid Chart introduces Code Snippets in its editor, streamlining the diagramming process for developers and professionals. diff --git a/packages/mermaid/src/docs/news/blog.md b/packages/mermaid/src/docs/news/blog.md index fa581349f1..6edf00aca8 100644 --- a/packages/mermaid/src/docs/news/blog.md +++ b/packages/mermaid/src/docs/news/blog.md @@ -1,5 +1,11 @@ # Blog +## [Diagrams, Made Even Easier: Introducing “Code Snippets” in the Mermaid Chart Editor](https://www.mermaidchart.com/blog/posts/easier-diagram-editing-with-code-snippets/) + +12 October 2023 · 4 mins + +Mermaid Chart introduces Code Snippets in its editor, streamlining the diagramming process for developers and professionals. + ## [How to Make a Git Graph with Mermaid Chart](https://www.mermaidchart.com/blog/posts/how-to-make-a-git-graph-with-mermaid-chart/) 22 September 2023 · 7 mins From 3389ecdfea6d3d0dcea8cd19fcbd29b3869ba085 Mon Sep 17 00:00:00 2001 From: Claes Gill Date: Thu, 19 Oct 2023 22:48:49 +0200 Subject: [PATCH 137/457] Updated README with expandable table of content. --- README.md | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/README.md b/README.md index 04747385a2..e1f2fae9a4 100644 --- a/README.md +++ b/README.md @@ -44,6 +44,22 @@ Try Live Editor previews of future releases: Explore Mermaid.js in depth, with real-world examples, tips & tricks from the creator... The first official book on Mermaid is available for purchase. Check it out! +## Table of content + +
    +Expand contents + +- [About](#about) +- [Examples](#examples) +- [Release](#release) +- [Related projects](#related-projects) +- [Contributors](#contributors) +- [Security and safe diagrams](#security-and-safe-diagrams) +- [Reporting vulnerabilities](#reporting-vulnerabilities) +- [Appreciation](#appreciation) + +
    + ## About From 61bc293a950d8bf9f5ff1208a94a4800cd46d332 Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Fri, 20 Oct 2023 11:12:56 +0200 Subject: [PATCH 138/457] #4967 Reverting optimimization that breaks subgraphs --- cypress/platform/knsv2.html | 6 ++++-- .../mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js | 6 ++++++ 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html index 6ade6a2e5c..13094644bd 100644 --- a/cypress/platform/knsv2.html +++ b/cypress/platform/knsv2.html @@ -58,8 +58,10 @@ 
    -      classDiagram
-  `Class` <|-- `Class2`
+flowchart-elk LR
+   subgraph example
+     node
+   end
     
     flowchart
diff --git a/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js b/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js
index 737b492fb3..ce2bbc002b 100644
--- a/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js
+++ b/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js
@@ -803,8 +803,14 @@ const insertChildren = (nodeArray, parentLookupDb) => {
  */
 
 export const draw = async function (text, id, _version, diagObj) {
+  // Add temporary render element
+  diagObj.db.clear();
   nodeDb = {};
   portPos = {};
+  diagObj.db.setGen('gen-2');
+  // Parse the graph definition
+  diagObj.parser.parse(text);
+
   const renderEl = select('body').append('div').attr('style', 'height:400px').attr('id', 'cy');
   let graph = {
     id: 'root',

From aaf0b474d498239bd430be0438523699237fd516 Mon Sep 17 00:00:00 2001
From: Per Brolin 
Date: Fri, 20 Oct 2023 14:18:07 +0200
Subject: [PATCH 139/457] Increased version to 10.5.1

---
 packages/mermaid/package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json
index 10bb672706..608d19dbf1 100644
--- a/packages/mermaid/package.json
+++ b/packages/mermaid/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mermaid",
-  "version": "10.5.0",
+  "version": "10.5.1",
   "description": "Markdown-ish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
   "type": "module",
   "module": "./dist/mermaid.core.mjs",
@@ -133,4 +133,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}
\ No newline at end of file

From b70959daa7666d25416ab3c4b89ffbc328927d20 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist 
Date: Fri, 20 Oct 2023 14:30:52 +0200
Subject: [PATCH 140/457] Version 10.5.1

---
 packages/mermaid/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json
index 608d19dbf1..cf2bacf3a3 100644
--- a/packages/mermaid/package.json
+++ b/packages/mermaid/package.json
@@ -133,4 +133,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
\ No newline at end of file
+}

From ab9b9abdf932eb15697975766dc9d16b8a063e9d Mon Sep 17 00:00:00 2001
From: Remco Haszing 
Date: Fri, 20 Oct 2023 16:55:01 +0200
Subject: [PATCH 141/457] Replace rehype-mermaidjs with rehype-mermaid

The package was renamed.
---
 docs/ecosystem/integrations-community.md                      | 2 +-
 packages/mermaid/src/docs/ecosystem/integrations-community.md | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/ecosystem/integrations-community.md b/docs/ecosystem/integrations-community.md
index 2c67cc3618..55629f86e8 100644
--- a/docs/ecosystem/integrations-community.md
+++ b/docs/ecosystem/integrations-community.md
@@ -175,7 +175,7 @@ Communication tools and platforms
 - [remark](https://remark.js.org/)
   - [remark-mermaidjs](https://github.com/remcohaszing/remark-mermaidjs)
 - [rehype](https://github.com/rehypejs/rehype)
-  - [rehype-mermaidjs](https://github.com/remcohaszing/rehype-mermaidjs)
+  - [rehype-mermaid](https://github.com/remcohaszing/rehype-mermaid)
 - [Gatsby](https://www.gatsbyjs.com/)
   - [gatsby-remark-mermaid](https://github.com/remcohaszing/gatsby-remark-mermaid)
 - [JSDoc](https://jsdoc.app/)
diff --git a/packages/mermaid/src/docs/ecosystem/integrations-community.md b/packages/mermaid/src/docs/ecosystem/integrations-community.md
index 3a3a20de8f..ae7e5b71b4 100644
--- a/packages/mermaid/src/docs/ecosystem/integrations-community.md
+++ b/packages/mermaid/src/docs/ecosystem/integrations-community.md
@@ -173,7 +173,7 @@ Communication tools and platforms
 - [remark](https://remark.js.org/)
   - [remark-mermaidjs](https://github.com/remcohaszing/remark-mermaidjs)
 - [rehype](https://github.com/rehypejs/rehype)
-  - [rehype-mermaidjs](https://github.com/remcohaszing/rehype-mermaidjs)
+  - [rehype-mermaid](https://github.com/remcohaszing/rehype-mermaid)
 - [Gatsby](https://www.gatsbyjs.com/)
   - [gatsby-remark-mermaid](https://github.com/remcohaszing/gatsby-remark-mermaid)
 - [JSDoc](https://jsdoc.app/)

From f31cddee0c76a7f16a22df7a66dc8d7d5926bbde Mon Sep 17 00:00:00 2001
From: Sahil Nagpure <76729141+SahilNagpure07@users.noreply.github.com>
Date: Sun, 22 Oct 2023 12:27:55 +0530
Subject: [PATCH 142/457] Update classDiagram.md

Fixed typo.
---
 packages/mermaid/src/docs/syntax/classDiagram.md | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/mermaid/src/docs/syntax/classDiagram.md b/packages/mermaid/src/docs/syntax/classDiagram.md
index 4b0cd49def..f02ae67be9 100644
--- a/packages/mermaid/src/docs/syntax/classDiagram.md
+++ b/packages/mermaid/src/docs/syntax/classDiagram.md
@@ -281,8 +281,6 @@ And `Link` can be one of:
 
 A namespace groups classes.
 
-Code:
-
 ```mermaid-example
 classDiagram
 namespace BaseShapes {

From 58e9e5658b87c6ce92c7ef1a9d6ab09fa976af85 Mon Sep 17 00:00:00 2001
From: RounakJoshi09 
Date: Sun, 22 Oct 2023 21:12:04 +0530
Subject: [PATCH 143/457] e2e test case added

---
 cypress/integration/rendering/gitGraph.spec.js | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/cypress/integration/rendering/gitGraph.spec.js b/cypress/integration/rendering/gitGraph.spec.js
index 9f040a36f0..a328ae32f5 100644
--- a/cypress/integration/rendering/gitGraph.spec.js
+++ b/cypress/integration/rendering/gitGraph.spec.js
@@ -701,4 +701,21 @@ gitGraph TB:
       {}
     );
   });
+  it('34: should render a simple gitgraph with cherry pick merge commit', () => {
+    imgSnapshotTest(
+      `gitGraph
+      commit id: "ZERO"
+      branch feature
+      branch release
+      checkout feature
+      commit id: "A"
+      commit id: "B"
+      checkout main
+      merge feature id: "M"
+      checkout release
+      cherry-pick id: "M" parent:"B"
+      `,
+      {}
+    );
+  });
 });

From bc247b1d46bc07bba8a01b46e0714022f14b2e6e Mon Sep 17 00:00:00 2001
From: steph 
Date: Sun, 22 Oct 2023 14:18:41 -0700
Subject: [PATCH 144/457] add docusaurus to community integrations

---
 .../interfaces/mermaidAPI.ParseOptions.md     | 19 -------------------
 docs/ecosystem/integrations-community.md      |  1 +
 .../docs/ecosystem/integrations-community.md  |  1 +
 3 files changed, 2 insertions(+), 19 deletions(-)
 delete mode 100644 docs/config/setup/interfaces/mermaidAPI.ParseOptions.md

diff --git a/docs/config/setup/interfaces/mermaidAPI.ParseOptions.md b/docs/config/setup/interfaces/mermaidAPI.ParseOptions.md
deleted file mode 100644
index ea390899e4..0000000000
--- a/docs/config/setup/interfaces/mermaidAPI.ParseOptions.md
+++ /dev/null
@@ -1,19 +0,0 @@
-> **Warning**
->
-> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
->
-> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/interfaces/mermaidAPI.ParseOptions.md](../../../../packages/mermaid/src/docs/config/setup/interfaces/mermaidAPI.ParseOptions.md).
-
-# Interface: ParseOptions
-
-[mermaidAPI](../modules/mermaidAPI.md).ParseOptions
-
-## Properties
-
-### suppressErrors
-
-• `Optional` **suppressErrors**: `boolean`
-
-#### Defined in
-
-[mermaidAPI.ts:59](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L59)
diff --git a/docs/ecosystem/integrations-community.md b/docs/ecosystem/integrations-community.md
index 55629f86e8..702fd77055 100644
--- a/docs/ecosystem/integrations-community.md
+++ b/docs/ecosystem/integrations-community.md
@@ -169,6 +169,7 @@ Communication tools and platforms
 
 ### Document Generation
 
+- [Docusaurus](https://docusaurus.io/docs/markdown-features/diagrams) ✅
 - [Swimm - Up-to-date diagrams with Swimm, the knowledge management tool for code](https://docs.swimm.io/Features/diagrams-and-charts)
 - [Sphinx](https://www.sphinx-doc.org/en/master/)
   - [sphinxcontrib-mermaid](https://github.com/mgaitan/sphinxcontrib-mermaid)
diff --git a/packages/mermaid/src/docs/ecosystem/integrations-community.md b/packages/mermaid/src/docs/ecosystem/integrations-community.md
index ae7e5b71b4..529ba02145 100644
--- a/packages/mermaid/src/docs/ecosystem/integrations-community.md
+++ b/packages/mermaid/src/docs/ecosystem/integrations-community.md
@@ -167,6 +167,7 @@ Communication tools and platforms
 
 ### Document Generation
 
+- [Docusaurus](https://docusaurus.io/docs/markdown-features/diagrams) ✅
 - [Swimm - Up-to-date diagrams with Swimm, the knowledge management tool for code](https://docs.swimm.io/Features/diagrams-and-charts)
 - [Sphinx](https://www.sphinx-doc.org/en/master/)
   - [sphinxcontrib-mermaid](https://github.com/mgaitan/sphinxcontrib-mermaid)

From b268bd21e16225ce49cf898fa9c35785c562b539 Mon Sep 17 00:00:00 2001
From: huynhicode 
Date: Sun, 22 Oct 2023 21:23:47 +0000
Subject: [PATCH 145/457] Update docs

---
 .../interfaces/mermaidAPI.ParseOptions.md     | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)
 create mode 100644 docs/config/setup/interfaces/mermaidAPI.ParseOptions.md

diff --git a/docs/config/setup/interfaces/mermaidAPI.ParseOptions.md b/docs/config/setup/interfaces/mermaidAPI.ParseOptions.md
new file mode 100644
index 0000000000..ea390899e4
--- /dev/null
+++ b/docs/config/setup/interfaces/mermaidAPI.ParseOptions.md
@@ -0,0 +1,19 @@
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/interfaces/mermaidAPI.ParseOptions.md](../../../../packages/mermaid/src/docs/config/setup/interfaces/mermaidAPI.ParseOptions.md).
+
+# Interface: ParseOptions
+
+[mermaidAPI](../modules/mermaidAPI.md).ParseOptions
+
+## Properties
+
+### suppressErrors
+
+• `Optional` **suppressErrors**: `boolean`
+
+#### Defined in
+
+[mermaidAPI.ts:59](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L59)

From 880d0ebb50fbe7ecb56f31c318eb05c0744dee6b Mon Sep 17 00:00:00 2001
From: Karthik <109301536+karthxk07@users.noreply.github.com>
Date: Mon, 23 Oct 2023 11:38:52 +0530
Subject: [PATCH 146/457] Update README.md

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 04747385a2..c391f90504 100644
--- a/README.md
+++ b/README.md
@@ -58,7 +58,7 @@ Mermaid addresses this problem by enabling users to create easily modifiable dia
 
    
 
 Mermaid allows even non-programmers to easily create detailed diagrams through the [Mermaid Live Editor](https://mermaid.live/).
    
-[Tutorials](./docs/config/Tutorials.md) has video tutorials.
+[Tutorials](./docs/config/Tutorials.md) have video tutorials.
 Use Mermaid with your favorite applications, check out the list of [Integrations and Usages of Mermaid](./docs/ecosystem/integrations-community.md).
 
 You can also use Mermaid within [GitHub](https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/) as well many of your other favorite applications—check out the list of [Integrations and Usages of Mermaid](./docs/ecosystem/integrations-community.md).

From 111e067df50e8a6d38a25b16448c6656faf98dae Mon Sep 17 00:00:00 2001
From: Harshit Anand 
Date: Mon, 23 Oct 2023 12:03:57 +0530
Subject: [PATCH 147/457] fix: added type Element to the node used in callback
 in the addhook function

---
 .../mermaid/src/diagrams/common/common.ts     | 30 +++++++++----------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/packages/mermaid/src/diagrams/common/common.ts b/packages/mermaid/src/diagrams/common/common.ts
index 84db828435..28f243845d 100644
--- a/packages/mermaid/src/diagrams/common/common.ts
+++ b/packages/mermaid/src/diagrams/common/common.ts
@@ -30,21 +30,21 @@ export const removeScript = (txt: string): string => {
 
 const TEMPORARY_ATTRIBUTE = 'data-temp-href-target';
 
-DOMPurify.addHook('beforeSanitizeAttributes', function (node) {
-  if (node.tagName === 'A' && node.hasAttribute('target')) {
-    node.setAttribute(TEMPORARY_ATTRIBUTE, node.getAttribute('target') || '');
-  }
-});
-
-DOMPurify.addHook('afterSanitizeAttributes', function (node) {
-  if (node.tagName === 'A' && node.hasAttribute(TEMPORARY_ATTRIBUTE)) {
-    node.setAttribute('target', node.getAttribute(TEMPORARY_ATTRIBUTE) || '');
-    node.removeAttribute(TEMPORARY_ATTRIBUTE);
-    if (node.getAttribute('target') === '_blank') {
-      node.setAttribute('rel', 'noopener');
-    }
-  }
-});
+// DOMPurify.addHook('beforeSanitizeAttributes', (node: Element) => {
+//   if (node.tagName === 'A' && node.hasAttribute('target')) {
+//     node.setAttribute(TEMPORARY_ATTRIBUTE, node.getAttribute('target') || '');
+//   }
+// });
+
+// DOMPurify.addHook('afterSanitizeAttributes', (node: Element) => {
+//   if (node.tagName === 'A' && node.hasAttribute(TEMPORARY_ATTRIBUTE)) {
+//     node.setAttribute('target', node.getAttribute(TEMPORARY_ATTRIBUTE) || '');
+//     node.removeAttribute(TEMPORARY_ATTRIBUTE);
+//     if (node.getAttribute('target') === '_blank') {
+//       node.setAttribute('rel', 'noopener');
+//     }
+//   }
+// });
 
 const sanitizeMore = (text: string, config: MermaidConfig) => {
   if (config.flowchart?.htmlLabels !== false) {

From 3b8c48dd26bfa16172f3c2c5410bdbaf0b71647f Mon Sep 17 00:00:00 2001
From: Harshit Anand 
Date: Mon, 23 Oct 2023 12:23:08 +0530
Subject: [PATCH 148/457] fix: added type Element to the node used in callback
 in the dompurify.addhook

---
 packages/mermaid/src/diagrams/common/common.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/mermaid/src/diagrams/common/common.ts b/packages/mermaid/src/diagrams/common/common.ts
index 84db828435..744c342520 100644
--- a/packages/mermaid/src/diagrams/common/common.ts
+++ b/packages/mermaid/src/diagrams/common/common.ts
@@ -30,13 +30,13 @@ export const removeScript = (txt: string): string => {
 
 const TEMPORARY_ATTRIBUTE = 'data-temp-href-target';
 
-DOMPurify.addHook('beforeSanitizeAttributes', function (node) {
+DOMPurify.addHook('beforeSanitizeAttributes', (node: Element) => {
   if (node.tagName === 'A' && node.hasAttribute('target')) {
     node.setAttribute(TEMPORARY_ATTRIBUTE, node.getAttribute('target') || '');
   }
 });
 
-DOMPurify.addHook('afterSanitizeAttributes', function (node) {
+DOMPurify.addHook('afterSanitizeAttributes', (node: Element) => {
   if (node.tagName === 'A' && node.hasAttribute(TEMPORARY_ATTRIBUTE)) {
     node.setAttribute('target', node.getAttribute(TEMPORARY_ATTRIBUTE) || '');
     node.removeAttribute(TEMPORARY_ATTRIBUTE);

From 7960f94eba2112e3ce54443cce5301991a63f178 Mon Sep 17 00:00:00 2001
From: Harshit Anand 
Date: Mon, 23 Oct 2023 16:09:51 +0530
Subject: [PATCH 149/457] fix: shifted dompurify.addhook functions inside
 removescript

---
 .../mermaid/src/diagrams/common/common.ts     | 36 ++++++++++---------
 1 file changed, 19 insertions(+), 17 deletions(-)

diff --git a/packages/mermaid/src/diagrams/common/common.ts b/packages/mermaid/src/diagrams/common/common.ts
index 744c342520..caf43bc682 100644
--- a/packages/mermaid/src/diagrams/common/common.ts
+++ b/packages/mermaid/src/diagrams/common/common.ts
@@ -25,26 +25,28 @@ export const getRows = (s?: string): string[] => {
  * @returns The safer text
  */
 export const removeScript = (txt: string): string => {
-  return DOMPurify.sanitize(txt);
-};
+  const TEMPORARY_ATTRIBUTE = 'data-temp-href-target';
 
-const TEMPORARY_ATTRIBUTE = 'data-temp-href-target';
+  DOMPurify.addHook('beforeSanitizeAttributes', (node: Element) => {
+    if (node.tagName === 'A' && node.hasAttribute('target')) {
+      node.setAttribute(TEMPORARY_ATTRIBUTE, node.getAttribute('target') || '');
+    }
+  });
 
-DOMPurify.addHook('beforeSanitizeAttributes', (node: Element) => {
-  if (node.tagName === 'A' && node.hasAttribute('target')) {
-    node.setAttribute(TEMPORARY_ATTRIBUTE, node.getAttribute('target') || '');
-  }
-});
-
-DOMPurify.addHook('afterSanitizeAttributes', (node: Element) => {
-  if (node.tagName === 'A' && node.hasAttribute(TEMPORARY_ATTRIBUTE)) {
-    node.setAttribute('target', node.getAttribute(TEMPORARY_ATTRIBUTE) || '');
-    node.removeAttribute(TEMPORARY_ATTRIBUTE);
-    if (node.getAttribute('target') === '_blank') {
-      node.setAttribute('rel', 'noopener');
+  const sanitizedText = DOMPurify.sanitize(txt);
+
+  DOMPurify.addHook('afterSanitizeAttributes', (node: Element) => {
+    if (node.tagName === 'A' && node.hasAttribute(TEMPORARY_ATTRIBUTE)) {
+      node.setAttribute('target', node.getAttribute(TEMPORARY_ATTRIBUTE) || '');
+      node.removeAttribute(TEMPORARY_ATTRIBUTE);
+      if (node.getAttribute('target') === '_blank') {
+        node.setAttribute('rel', 'noopener');
+      }
     }
-  }
-});
+  });
+
+  return sanitizedText;
+};
 
 const sanitizeMore = (text: string, config: MermaidConfig) => {
   if (config.flowchart?.htmlLabels !== false) {

From b0cfdcc22f704b628cff186aabd78e3751ad5d49 Mon Sep 17 00:00:00 2001
From: RounakJoshi09 
Date: Mon, 23 Oct 2023 20:34:54 +0530
Subject: [PATCH 150/457] Documentation Modified New Ex Added

---
 docs/syntax/gitgraph.md | 36 ++++++++++++++++++++++++++++++++++++
 1 file changed, 36 insertions(+)

diff --git a/docs/syntax/gitgraph.md b/docs/syntax/gitgraph.md
index c6a397a982..7453f2d0ea 100644
--- a/docs/syntax/gitgraph.md
+++ b/docs/syntax/gitgraph.md
@@ -371,6 +371,42 @@ A few important rules to note here are:
 
 Let see an example:
 
+```mermaid-example
+    gitGraph
+       commit id: "ZERO"
+       branch develop
+       commit id:"A"
+       checkout main
+       commit id:"ONE"
+       checkout develop
+       commit id:"B"
+       checkout main
+       commit id:"TWO"
+       cherry-pick id:"A"
+       commit id:"THREE"
+       checkout develop
+       commit id:"C"
+```
+
+```mermaid
+    gitGraph
+       commit id: "ZERO"
+       branch develop
+       commit id:"A"
+       checkout main
+       commit id:"ONE"
+       checkout develop
+       commit id:"B"
+       checkout main
+       commit id:"TWO"
+       cherry-pick id:"A"
+       commit id:"THREE"
+       checkout develop
+       commit id:"C"
+```
+
+Cherry Picking Merge Commit:
+
 ```mermaid-example
     gitGraph
         commit id: "ZERO"

From ca96c0f45fbd2e14bea27b2ee12d2c43af793e0e Mon Sep 17 00:00:00 2001
From: RounakJoshi09 
Date: Mon, 23 Oct 2023 21:06:51 +0530
Subject: [PATCH 151/457] Linting Issue Fixed

---
 docs/syntax/gitgraph.md | 74 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 74 insertions(+)

diff --git a/docs/syntax/gitgraph.md b/docs/syntax/gitgraph.md
index 7453f2d0ea..89a95f68d3 100644
--- a/docs/syntax/gitgraph.md
+++ b/docs/syntax/gitgraph.md
@@ -405,6 +405,40 @@ Let see an example:
        commit id:"C"
 ```
 
+```mermaid-example
+    gitGraph
+       commit id: "ZERO"
+       branch develop
+       commit id:"A"
+       checkout main
+       commit id:"ONE"
+       checkout develop
+       commit id:"B"
+       checkout main
+       commit id:"TWO"
+       cherry-pick id:"A"
+       commit id:"THREE"
+       checkout develop
+       commit id:"C"
+```
+
+```mermaid
+    gitGraph
+       commit id: "ZERO"
+       branch develop
+       commit id:"A"
+       checkout main
+       commit id:"ONE"
+       checkout develop
+       commit id:"B"
+       checkout main
+       commit id:"TWO"
+       cherry-pick id:"A"
+       commit id:"THREE"
+       checkout develop
+       commit id:"C"
+```
+
 Cherry Picking Merge Commit:
 
 ```mermaid-example
@@ -447,6 +481,46 @@ Cherry Picking Merge Commit:
         commit id:"C"
 ```
 
+```mermaid-example
+    gitGraph
+        commit id: "ZERO"
+        branch develop
+        branch release
+        commit id:"A"
+        checkout main
+        commit id:"ONE"
+        checkout develop
+        commit id:"B"
+        checkout main
+        merge develop id:"MERGE"
+        commit id:"TWO"
+        checkout release
+        cherry-pick id:"MERGE" parent:"B"
+        commit id:"THREE"
+        checkout develop
+        commit id:"C"
+```
+
+```mermaid
+    gitGraph
+        commit id: "ZERO"
+        branch develop
+        branch release
+        commit id:"A"
+        checkout main
+        commit id:"ONE"
+        checkout develop
+        commit id:"B"
+        checkout main
+        merge develop id:"MERGE"
+        commit id:"TWO"
+        checkout release
+        cherry-pick id:"MERGE" parent:"B"
+        commit id:"THREE"
+        checkout develop
+        commit id:"C"
+```
+
 ## Gitgraph specific configuration options
 
 In Mermaid, you have the option to configure the gitgraph diagram. You can configure the following options:

From 7f1e0ab4225596feb6f7e82ad4565b894659c33e Mon Sep 17 00:00:00 2001
From: RounakJoshi09 
Date: Mon, 23 Oct 2023 21:14:38 +0530
Subject: [PATCH 152/457] Updated gitgraph.md

---
 docs/syntax/gitgraph.md | 74 -----------------------------------------
 1 file changed, 74 deletions(-)

diff --git a/docs/syntax/gitgraph.md b/docs/syntax/gitgraph.md
index 89a95f68d3..7453f2d0ea 100644
--- a/docs/syntax/gitgraph.md
+++ b/docs/syntax/gitgraph.md
@@ -405,40 +405,6 @@ Let see an example:
        commit id:"C"
 ```
 
-```mermaid-example
-    gitGraph
-       commit id: "ZERO"
-       branch develop
-       commit id:"A"
-       checkout main
-       commit id:"ONE"
-       checkout develop
-       commit id:"B"
-       checkout main
-       commit id:"TWO"
-       cherry-pick id:"A"
-       commit id:"THREE"
-       checkout develop
-       commit id:"C"
-```
-
-```mermaid
-    gitGraph
-       commit id: "ZERO"
-       branch develop
-       commit id:"A"
-       checkout main
-       commit id:"ONE"
-       checkout develop
-       commit id:"B"
-       checkout main
-       commit id:"TWO"
-       cherry-pick id:"A"
-       commit id:"THREE"
-       checkout develop
-       commit id:"C"
-```
-
 Cherry Picking Merge Commit:
 
 ```mermaid-example
@@ -481,46 +447,6 @@ Cherry Picking Merge Commit:
         commit id:"C"
 ```
 
-```mermaid-example
-    gitGraph
-        commit id: "ZERO"
-        branch develop
-        branch release
-        commit id:"A"
-        checkout main
-        commit id:"ONE"
-        checkout develop
-        commit id:"B"
-        checkout main
-        merge develop id:"MERGE"
-        commit id:"TWO"
-        checkout release
-        cherry-pick id:"MERGE" parent:"B"
-        commit id:"THREE"
-        checkout develop
-        commit id:"C"
-```
-
-```mermaid
-    gitGraph
-        commit id: "ZERO"
-        branch develop
-        branch release
-        commit id:"A"
-        checkout main
-        commit id:"ONE"
-        checkout develop
-        commit id:"B"
-        checkout main
-        merge develop id:"MERGE"
-        commit id:"TWO"
-        checkout release
-        cherry-pick id:"MERGE" parent:"B"
-        commit id:"THREE"
-        checkout develop
-        commit id:"C"
-```
-
 ## Gitgraph specific configuration options
 
 In Mermaid, you have the option to configure the gitgraph diagram. You can configure the following options:

From 5834818ebee0c158628dbf2a8d6c78229433c454 Mon Sep 17 00:00:00 2001
From: RounakJoshi09 
Date: Mon, 23 Oct 2023 21:57:38 +0530
Subject: [PATCH 153/457] Linting Issue Fixed

---
 docs/syntax/gitgraph.md | 36 ------------------------------------
 1 file changed, 36 deletions(-)

diff --git a/docs/syntax/gitgraph.md b/docs/syntax/gitgraph.md
index 7453f2d0ea..c6a397a982 100644
--- a/docs/syntax/gitgraph.md
+++ b/docs/syntax/gitgraph.md
@@ -371,42 +371,6 @@ A few important rules to note here are:
 
 Let see an example:
 
-```mermaid-example
-    gitGraph
-       commit id: "ZERO"
-       branch develop
-       commit id:"A"
-       checkout main
-       commit id:"ONE"
-       checkout develop
-       commit id:"B"
-       checkout main
-       commit id:"TWO"
-       cherry-pick id:"A"
-       commit id:"THREE"
-       checkout develop
-       commit id:"C"
-```
-
-```mermaid
-    gitGraph
-       commit id: "ZERO"
-       branch develop
-       commit id:"A"
-       checkout main
-       commit id:"ONE"
-       checkout develop
-       commit id:"B"
-       checkout main
-       commit id:"TWO"
-       cherry-pick id:"A"
-       commit id:"THREE"
-       checkout develop
-       commit id:"C"
-```
-
-Cherry Picking Merge Commit:
-
 ```mermaid-example
     gitGraph
         commit id: "ZERO"

From ff4d68fd555aec2cc325f1112d9ada2c5c338e48 Mon Sep 17 00:00:00 2001
From: Karthik <109301536+karthxk07@users.noreply.github.com>
Date: Wed, 25 Oct 2023 14:11:38 +0530
Subject: [PATCH 154/457] Update README.md

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index c391f90504..ab2aeb2e73 100644
--- a/README.md
+++ b/README.md
@@ -58,7 +58,7 @@ Mermaid addresses this problem by enabling users to create easily modifiable dia
 
    
 
 Mermaid allows even non-programmers to easily create detailed diagrams through the [Mermaid Live Editor](https://mermaid.live/).
    
-[Tutorials](./docs/config/Tutorials.md) have video tutorials.
+For video tutorials, visit our [Tutorials](./docs/config/Tutorials.md) page.
 Use Mermaid with your favorite applications, check out the list of [Integrations and Usages of Mermaid](./docs/ecosystem/integrations-community.md).
 
 You can also use Mermaid within [GitHub](https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/) as well many of your other favorite applications—check out the list of [Integrations and Usages of Mermaid](./docs/ecosystem/integrations-community.md).

From fc28c1da63d68b4989e7f8bc5d81a2f27842e732 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist 
Date: Wed, 25 Oct 2023 11:06:37 +0200
Subject: [PATCH 155/457] Limiting the number of edges that are allowed in the
 flowchart

---
 cypress/platform/knsv2.html                    | 18 ++++++++++++++----
 .../mermaid/src/diagrams/flowchart/flowDb.js   | 11 ++++++++++-
 2 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
index 13094644bd..020ea8b482 100644
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@@ -58,10 +58,19 @@
   
   
     
    -flowchart-elk LR
-   subgraph example
-     node
-   end
+flowchart TB
+    C & D & E & F & G & H & I & J & K & L & M & N & O & P & Q & R & S & T & U & V & W & X & Y & Z & A1 & A2 & A3 & A4 & A5 & A6 & A7 & A8
+      ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
+    C & D & E & F & G & H & I & J & K & L & M & N & O & P & Q & R & S & T & U & V & W & X & Y & Z & A1 & A2 & A3 & A4 & A5 & A6 & A7 & A8
+
+    
    
+    
    +    flowchart TB
+      A & A & A & A & A & A & A & A --->  C & D & E & F & G & H & I & J & K & L & M & N & O & P & Q & R & S & T & U & V & W & X & Y & Z
+    
    
+    
    +    flowchart TB
+      A1 & A2 & A3 & A4 & A5 & A6 & A7 & A8 -->  C & D & E & F & G & H & I & J & K & L & M & N & O & P & Q & R & S & T & U & V & W & X & Y & Z
     
    
     
     flowchart
@@ -441,6 +450,7 @@
           messageFontFamily: 'courier',
         },
         fontSize: 16,
+        logLevel: 0,
       });
       function callback() {
         alert('It worked');
diff --git a/packages/mermaid/src/diagrams/flowchart/flowDb.js b/packages/mermaid/src/diagrams/flowchart/flowDb.js
index 510c40ce84..9a9394e543 100644
--- a/packages/mermaid/src/diagrams/flowchart/flowDb.js
+++ b/packages/mermaid/src/diagrams/flowchart/flowDb.js
@@ -12,6 +12,7 @@ import {
   setDiagramTitle,
   getDiagramTitle,
 } from '../common/commonDb.js';
+import errorDiagram from '../error/errorDiagram.js';
 
 const MERMAID_DOM_ID_PREFIX = 'flowchart-';
 let vertexCounter = 0;
@@ -156,7 +157,15 @@ export const addSingleLink = function (_start, _end, type) {
     edge.stroke = type.stroke;
     edge.length = type.length;
   }
-  edges.push(edge);
+  if (edge?.length > 10) {
+    edge.length = 10;
+  }
+  if (edges.length < 280) {
+    log.info('abc78 pushing edge...');
+    edges.push(edge);
+  } else {
+    throw new Error('Too many edges');
+  }
 };
 export const addLink = function (_start, _end, type) {
   log.info('addLink (abc78)', _start, _end, type);

From 29942c04dc92a64f8c618d6d55f9b57800341cf5 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist 
Date: Wed, 25 Oct 2023 11:07:12 +0200
Subject: [PATCH 156/457] Updated mermaid version

---
 package.json                  | 2 +-
 packages/mermaid/package.json | 2 +-
 pnpm-lock.yaml                | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index ee0c01413c..76ffc7c5a9 100644
--- a/package.json
+++ b/package.json
@@ -88,7 +88,7 @@
     "cypress": "^12.10.0",
     "cypress-image-snapshot": "^4.0.1",
     "esbuild": "^0.19.0",
-    "eslint": "^8.39.0",
+    "eslint": "^8.47.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-cypress": "^2.13.2",
     "eslint-plugin-html": "^7.1.0",
diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json
index cf2bacf3a3..7d218d4aa6 100644
--- a/packages/mermaid/package.json
+++ b/packages/mermaid/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mermaid",
-  "version": "10.5.1",
+  "version": "10.6.0",
   "description": "Markdown-ish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
   "type": "module",
   "module": "./dist/mermaid.core.mjs",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2fab1d4a01..a43411342d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -90,7 +90,7 @@ importers:
         specifier: ^0.19.0
         version: 0.19.0
       eslint:
-        specifier: ^8.39.0
+        specifier: ^8.47.0
         version: 8.47.0
       eslint-config-prettier:
         specifier: ^8.8.0

From 06d2ba8398ec79598a7d6333c1527402c0e7a5de Mon Sep 17 00:00:00 2001
From: Harshit Anand 
Date: Wed, 25 Oct 2023 21:17:53 +0530
Subject: [PATCH 157/457] fix: added two unit tests to check for the secured
 anchor tag

---
 .../mermaid/src/diagrams/common/common.spec.ts     | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/packages/mermaid/src/diagrams/common/common.spec.ts b/packages/mermaid/src/diagrams/common/common.spec.ts
index 4dac5b33c1..9af2444061 100644
--- a/packages/mermaid/src/diagrams/common/common.spec.ts
+++ b/packages/mermaid/src/diagrams/common/common.spec.ts
@@ -38,6 +38,20 @@ describe('when securityLevel is antiscript, all script must be removed', () => {
     compareRemoveScript(``, ``);
   });
 
+  it('should detect unsecured target attribute, if value is _blank then generate a secured link', () => {
+    compareRemoveScript(
+      `note about mermaid`,
+      `note about mermaid`
+    );
+  });
+
+  it('should detect unsecured target attribute from links', () => {
+    compareRemoveScript(
+      `note about mermaid`,
+      `note about mermaid`
+    );
+  });
+
   it('should detect iframes', () => {
     compareRemoveScript(
       `

From 54ab3fc3b2dc7f4be13c6f18592ec61662f9c171 Mon Sep 17 00:00:00 2001
From: Harshit Anand 
Date: Thu, 26 Oct 2023 14:55:04 +0530
Subject: [PATCH 158/457] fix: added an e2e test case for classdiagram with
 anchor tag

---
 cypress/integration/rendering/classDiagram.spec.js | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/cypress/integration/rendering/classDiagram.spec.js b/cypress/integration/rendering/classDiagram.spec.js
index a23430b083..cab3649df4 100644
--- a/cypress/integration/rendering/classDiagram.spec.js
+++ b/cypress/integration/rendering/classDiagram.spec.js
@@ -501,4 +501,16 @@ describe('Class diagram', () => {
         B : -methods()
       `);
   });
+
+  it('should handle notes with anchor tag having target attribute', () => {
+    renderGraph(
+      `classDiagram
+        class test { }
+        note for test "note about mermaid"`
+    );
+
+    cy.get('svg').then((svg) => {
+      cy.get('a').should('have.attr', 'target', '_blank').should('have.attr', 'rel', 'noopener');
+    });
+  });
 });

From 672a0edc59e0be4fbb7422535435dd7278647721 Mon Sep 17 00:00:00 2001
From: SADIK KUZU 
Date: Fri, 27 Oct 2023 12:22:14 +0300
Subject: [PATCH 159/457] Fix typo in build-docs.yml

---
 .github/workflows/build-docs.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/build-docs.yml b/.github/workflows/build-docs.yml
index 152b177ae9..6fc629c7ae 100644
--- a/.github/workflows/build-docs.yml
+++ b/.github/workflows/build-docs.yml
@@ -29,7 +29,7 @@ jobs:
       - name: Install Packages
         run: pnpm install --frozen-lockfile
 
-      - name: Verify release verion
+      - name: Verify release version
         if: ${{ github.event_name == 'push' && (github.ref == 'refs/heads/master' || startsWith(github.ref, 'refs/heads/release')) }}
         run: pnpm --filter mermaid run docs:verify-version
 

From e98aa5557713e4dfe02cf6a0dbcdf5589d220de0 Mon Sep 17 00:00:00 2001
From: Alex Titarenko 
Date: Fri, 27 Oct 2023 18:58:30 -0700
Subject: [PATCH 160/457] docs: upate the list of tools with native support of
 mermaid

---
 packages/mermaid/src/docs/ecosystem/integrations-community.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/mermaid/src/docs/ecosystem/integrations-community.md b/packages/mermaid/src/docs/ecosystem/integrations-community.md
index ae7e5b71b4..9e047bfe3d 100644
--- a/packages/mermaid/src/docs/ecosystem/integrations-community.md
+++ b/packages/mermaid/src/docs/ecosystem/integrations-community.md
@@ -33,6 +33,7 @@ Below are a list of community plugins and integrations created with Mermaid.
 - [Notion](https://notion.so) ✅
 - [Observable](https://observablehq.com/@observablehq/mermaid) ✅
 - [Obsidian](https://help.obsidian.md/Editing+and+formatting/Advanced+formatting+syntax#Diagram) ✅
+- [NotesHub](https://noteshub.app) ✅
 - [GitBook](https://gitbook.com)
   - [Mermaid Plugin](https://github.com/JozoVilcek/gitbook-plugin-mermaid)
   - [Markdown with Mermaid CLI](https://github.com/miao1007/gitbook-plugin-mermaid-cli)

From cb06962c8502b7078bd36e0658209448c5b723a4 Mon Sep 17 00:00:00 2001
From: Alex Titarenko 
Date: Fri, 27 Oct 2023 20:27:16 -0700
Subject: [PATCH 161/457] Update integrations-community.md

---
 docs/ecosystem/integrations-community.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/docs/ecosystem/integrations-community.md b/docs/ecosystem/integrations-community.md
index 55629f86e8..77185b649a 100644
--- a/docs/ecosystem/integrations-community.md
+++ b/docs/ecosystem/integrations-community.md
@@ -35,6 +35,7 @@ Below are a list of community plugins and integrations created with Mermaid.
 - [Notion](https://notion.so) ✅
 - [Observable](https://observablehq.com/@observablehq/mermaid) ✅
 - [Obsidian](https://help.obsidian.md/Editing+and+formatting/Advanced+formatting+syntax#Diagram) ✅
+- [NotesHub](https://noteshub.app) ✅
 - [GitBook](https://gitbook.com)
   - [Mermaid Plugin](https://github.com/JozoVilcek/gitbook-plugin-mermaid)
   - [Markdown with Mermaid CLI](https://github.com/miao1007/gitbook-plugin-mermaid-cli)

From e8a04faa36033d97416339bd0b31932c5a9d32c2 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Tue, 31 Oct 2023 06:13:41 +0000
Subject: [PATCH 162/457] chore(deps): update all patch dependencies

---
 packages/mermaid/src/docs/package.json |   2 +-
 pnpm-lock.yaml                         | 270 ++++++++++++++++++++-----
 2 files changed, 226 insertions(+), 46 deletions(-)

diff --git a/packages/mermaid/src/docs/package.json b/packages/mermaid/src/docs/package.json
index a7ec3312aa..e6fb6a0fa4 100644
--- a/packages/mermaid/src/docs/package.json
+++ b/packages/mermaid/src/docs/package.json
@@ -32,7 +32,7 @@
     "unplugin-vue-components": "^0.25.0",
     "vite": "^4.3.9",
     "vite-plugin-pwa": "^0.16.0",
-    "vitepress": "1.0.0-rc.22",
+    "vitepress": "1.0.0-rc.24",
     "workbox-window": "^7.0.0"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a43411342d..4d1cc83a98 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -475,8 +475,8 @@ importers:
         specifier: ^0.16.0
         version: 0.16.0(vite@4.4.9)(workbox-build@7.0.0)(workbox-window@7.0.0)
       vitepress:
-        specifier: 1.0.0-rc.22
-        version: 1.0.0-rc.22(@algolia/client-search@4.19.1)(@types/node@18.17.5)(postcss@8.4.27)(search-insights@2.7.0)
+        specifier: 1.0.0-rc.24
+        version: 1.0.0-rc.24(@algolia/client-search@4.19.1)(@types/node@18.17.5)(postcss@8.4.27)(search-insights@2.7.0)(typescript@5.1.6)
       workbox-window:
         specifier: ^7.0.0
         version: 7.0.0
@@ -1084,10 +1084,10 @@ packages:
       '@babel/helper-compilation-targets': 7.22.10
       '@babel/helper-module-transforms': 7.22.9(@babel/core@7.22.10)
       '@babel/helpers': 7.22.10
-      '@babel/parser': 7.22.10
+      '@babel/parser': 7.23.0
       '@babel/template': 7.22.5
       '@babel/traverse': 7.23.2
-      '@babel/types': 7.22.10
+      '@babel/types': 7.23.0
       convert-source-map: 1.9.0
       debug: 4.3.4(supports-color@8.1.1)
       gensync: 1.0.0-beta.2
@@ -1101,7 +1101,7 @@ packages:
     resolution: {integrity: sha512-79KIf7YiWjjdZ81JnLujDRApWtl7BxTqWD88+FFdQEIOG8LJ0etDOM7CXuIgGJa55sGOwZVwuEsaLEm0PJ5/+A==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.22.10
+      '@babel/types': 7.23.0
       '@jridgewell/gen-mapping': 0.3.3
       '@jridgewell/trace-mapping': 0.3.19
       jsesc: 2.5.2
@@ -1223,7 +1223,7 @@ packages:
     resolution: {integrity: sha512-8Dl6+HD/cKifutF5qGd/8ZJi84QeAKh+CEe1sBzz8UayBBGg1dAIJrdHOcOM5b2MpzWL2yuotJTtGjETq0qjXg==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.22.10
+      '@babel/types': 7.23.0
     dev: true
 
   /@babel/helper-module-transforms@7.22.9(@babel/core@7.22.10):
@@ -1237,7 +1237,7 @@ packages:
       '@babel/helper-module-imports': 7.22.5
       '@babel/helper-simple-access': 7.22.5
       '@babel/helper-split-export-declaration': 7.22.6
-      '@babel/helper-validator-identifier': 7.22.5
+      '@babel/helper-validator-identifier': 7.22.20
     dev: true
 
   /@babel/helper-optimise-call-expression@7.22.5:
@@ -1280,7 +1280,7 @@ packages:
     resolution: {integrity: sha512-n0H99E/K+Bika3++WNL17POvo4rKWZ7lZEp1Q+fStVbUi8nxPQEBOlTmCOxW/0JsS56SKKQ+ojAe2pHKJHN35w==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.22.10
+      '@babel/types': 7.23.0
     dev: true
 
   /@babel/helper-skip-transparent-expression-wrappers@7.22.5:
@@ -1330,7 +1330,7 @@ packages:
     dependencies:
       '@babel/template': 7.22.5
       '@babel/traverse': 7.23.2
-      '@babel/types': 7.22.10
+      '@babel/types': 7.23.0
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -1339,7 +1339,7 @@ packages:
     resolution: {integrity: sha512-78aUtVcT7MUscr0K5mIEnkwxPE0MaxkR5RxRwuHaQ+JuU5AmTPhY+do2mdzVTnIJJpyBglql2pehuBIWHug+WQ==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/helper-validator-identifier': 7.22.5
+      '@babel/helper-validator-identifier': 7.22.20
       chalk: 2.4.2
       js-tokens: 4.0.0
     dev: true
@@ -2256,8 +2256,8 @@ packages:
     engines: {node: '>=6.9.0'}
     dependencies:
       '@babel/code-frame': 7.22.10
-      '@babel/parser': 7.22.10
-      '@babel/types': 7.22.10
+      '@babel/parser': 7.23.0
+      '@babel/types': 7.23.0
     dev: true
 
   /@babel/traverse@7.23.2:
@@ -4036,8 +4036,8 @@ packages:
   /@types/babel__core@7.20.1:
     resolution: {integrity: sha512-aACu/U/omhdk15O4Nfb+fHgH/z3QsfQzpnvRZhYhThms83ZnAOZz7zZAWO7mn2yyNQaA4xTO8GLK3uqFU4bYYw==}
     dependencies:
-      '@babel/parser': 7.22.10
-      '@babel/types': 7.22.10
+      '@babel/parser': 7.23.0
+      '@babel/types': 7.23.0
       '@types/babel__generator': 7.6.4
       '@types/babel__template': 7.4.1
       '@types/babel__traverse': 7.20.1
@@ -4046,20 +4046,20 @@ packages:
   /@types/babel__generator@7.6.4:
     resolution: {integrity: sha512-tFkciB9j2K755yrTALxD44McOrk+gfpIpvC3sxHjRawj6PfnQxrse4Clq5y/Rq+G3mrBurMax/lG8Qn2t9mSsg==}
     dependencies:
-      '@babel/types': 7.22.10
+      '@babel/types': 7.23.0
     dev: true
 
   /@types/babel__template@7.4.1:
     resolution: {integrity: sha512-azBFKemX6kMg5Io+/rdGT0dkGreboUVR0Cdm3fz9QJWpaQGJRQXl7C+6hOTCZcMll7KFyEQpgbYI2lHdsS4U7g==}
     dependencies:
-      '@babel/parser': 7.22.10
-      '@babel/types': 7.22.10
+      '@babel/parser': 7.23.0
+      '@babel/types': 7.23.0
     dev: true
 
   /@types/babel__traverse@7.20.1:
     resolution: {integrity: sha512-MitHFXnhtgwsGZWtT68URpOvLN4EREih1u3QtQiN4VdAxWKRVvGCSvw/Qth0M0Qq3pJpnGOu5JaM/ydK7OGbqg==}
     dependencies:
-      '@babel/types': 7.22.10
+      '@babel/types': 7.23.0
     dev: true
 
   /@types/body-parser@1.19.2:
@@ -4458,8 +4458,8 @@ packages:
       '@types/mdurl': 1.0.2
     dev: true
 
-  /@types/markdown-it@13.0.2:
-    resolution: {integrity: sha512-Tla7hH9oeXHOlJyBFdoqV61xWE9FZf/y2g+gFVwQ2vE1/eBzjUno5JCd3Hdb5oATve5OF6xNjZ/4VIZhVVx+hA==}
+  /@types/markdown-it@13.0.5:
+    resolution: {integrity: sha512-QhJP7hkq3FCrFNx0szMNCT/79CXfcEgUIA3jc5GBfeXqoKsk3R8JZm2wRXJ2DiyjbPE4VMFOSDemLFcUTZmHEQ==}
     dependencies:
       '@types/linkify-it': 3.0.2
       '@types/mdurl': 1.0.2
@@ -5212,6 +5212,17 @@ packages:
       vue: 3.3.4
     dev: true
 
+  /@vitejs/plugin-vue@4.3.1(vite@4.5.0)(vue@3.3.7):
+    resolution: {integrity: sha512-tUBEtWcF7wFtII7ayNiLNDTCE1X1afySEo+XNVMNkFXaThENyCowIEX095QqbJZGTgoOcSVDJGlnde2NG4jtbQ==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+    peerDependencies:
+      vite: ^4.0.0
+      vue: ^3.2.25
+    dependencies:
+      vite: 4.5.0(@types/node@18.17.5)
+      vue: 3.3.7(typescript@5.1.6)
+    dev: true
+
   /@vitest/coverage-v8@0.34.0(vitest@0.34.0):
     resolution: {integrity: sha512-rUFY9xX6nnrFvVfTDjlEaOFzfHqolUoA+Unz356T38W100QA+NiaekCFq/3XB/LXBISaFreCsVjAbPV3hjV7Jg==}
     peerDependencies:
@@ -5252,7 +5263,7 @@ packages:
   /@vitest/snapshot@0.34.0:
     resolution: {integrity: sha512-eGN5XBZHYOghxCOQbf8dcn6/3g7IW77GOOOC/mNFYwRXsPeoQgcgWnhj+6wgJ04pVv25wpxWL9jUkzaQ7LoFtg==}
     dependencies:
-      magic-string: 0.30.2
+      magic-string: 0.30.4
       pathe: 1.1.1
       pretty-format: 29.6.2
     dev: true
@@ -5305,12 +5316,28 @@ packages:
       estree-walker: 2.0.2
       source-map-js: 1.0.2
 
+  /@vue/compiler-core@3.3.7:
+    resolution: {integrity: sha512-pACdY6YnTNVLXsB86YD8OF9ihwpolzhhtdLVHhBL6do/ykr6kKXNYABRtNMGrsQXpEXXyAdwvWWkuTbs4MFtPQ==}
+    dependencies:
+      '@babel/parser': 7.23.0
+      '@vue/shared': 3.3.7
+      estree-walker: 2.0.2
+      source-map-js: 1.0.2
+    dev: true
+
   /@vue/compiler-dom@3.3.4:
     resolution: {integrity: sha512-wyM+OjOVpuUukIq6p5+nwHYtj9cFroz9cwkfmP9O1nzH68BenTTv0u7/ndggT8cIQlnBeOo6sUT/gvHcIkLA5w==}
     dependencies:
       '@vue/compiler-core': 3.3.4
       '@vue/shared': 3.3.4
 
+  /@vue/compiler-dom@3.3.7:
+    resolution: {integrity: sha512-0LwkyJjnUPssXv/d1vNJ0PKfBlDoQs7n81CbO6Q0zdL7H1EzqYRrTVXDqdBVqro0aJjo/FOa1qBAPVI4PGSHBw==}
+    dependencies:
+      '@vue/compiler-core': 3.3.7
+      '@vue/shared': 3.3.7
+    dev: true
+
   /@vue/compiler-sfc@3.3.4:
     resolution: {integrity: sha512-6y/d8uw+5TkCuzBkgLS0v3lSM3hJDntFEiUORM11pQ/hKvkhSKZrXW6i69UyXlJQisJxuUEJKAWEqWbWsLeNKQ==}
     dependencies:
@@ -5325,18 +5352,40 @@ packages:
       postcss: 8.4.27
       source-map-js: 1.0.2
 
+  /@vue/compiler-sfc@3.3.7:
+    resolution: {integrity: sha512-7pfldWy/J75U/ZyYIXRVqvLRw3vmfxDo2YLMwVtWVNew8Sm8d6wodM+OYFq4ll/UxfqVr0XKiVwti32PCrruAw==}
+    dependencies:
+      '@babel/parser': 7.23.0
+      '@vue/compiler-core': 3.3.7
+      '@vue/compiler-dom': 3.3.7
+      '@vue/compiler-ssr': 3.3.7
+      '@vue/reactivity-transform': 3.3.7
+      '@vue/shared': 3.3.7
+      estree-walker: 2.0.2
+      magic-string: 0.30.5
+      postcss: 8.4.31
+      source-map-js: 1.0.2
+    dev: true
+
   /@vue/compiler-ssr@3.3.4:
     resolution: {integrity: sha512-m0v6oKpup2nMSehwA6Uuu+j+wEwcy7QmwMkVNVfrV9P2qE5KshC6RwOCq8fjGS/Eak/uNb8AaWekfiXxbBB6gQ==}
     dependencies:
       '@vue/compiler-dom': 3.3.4
       '@vue/shared': 3.3.4
 
+  /@vue/compiler-ssr@3.3.7:
+    resolution: {integrity: sha512-TxOfNVVeH3zgBc82kcUv+emNHo+vKnlRrkv8YvQU5+Y5LJGJwSNzcmLUoxD/dNzv0bhQ/F0s+InlgV0NrApJZg==}
+    dependencies:
+      '@vue/compiler-dom': 3.3.7
+      '@vue/shared': 3.3.7
+    dev: true
+
   /@vue/devtools-api@6.5.0:
     resolution: {integrity: sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q==}
+    dev: true
 
   /@vue/devtools-api@6.5.1:
     resolution: {integrity: sha512-+KpckaAQyfbvshdDW5xQylLni1asvNSGme1JFs8I1+/H5pHEhqUKMEQD/qn3Nx5+/nycBq11qAEi8lk+LXI2dA==}
-    dev: true
 
   /@vue/reactivity-transform@3.3.4:
     resolution: {integrity: sha512-MXgwjako4nu5WFLAjpBnCj/ieqcjE2aJBINUNQzkZQfzIZA4xn+0fV1tIYBJvvva3N3OvKGofRLvQIwEQPpaXw==}
@@ -5347,17 +5396,40 @@ packages:
       estree-walker: 2.0.2
       magic-string: 0.30.2
 
+  /@vue/reactivity-transform@3.3.7:
+    resolution: {integrity: sha512-APhRmLVbgE1VPGtoLQoWBJEaQk4V8JUsqrQihImVqKT+8U6Qi3t5ATcg4Y9wGAPb3kIhetpufyZ1RhwbZCIdDA==}
+    dependencies:
+      '@babel/parser': 7.23.0
+      '@vue/compiler-core': 3.3.7
+      '@vue/shared': 3.3.7
+      estree-walker: 2.0.2
+      magic-string: 0.30.5
+    dev: true
+
   /@vue/reactivity@3.3.4:
     resolution: {integrity: sha512-kLTDLwd0B1jG08NBF3R5rqULtv/f8x3rOFByTDz4J53ttIQEDmALqKqXY0J+XQeN0aV2FBxY8nJDf88yvOPAqQ==}
     dependencies:
       '@vue/shared': 3.3.4
 
+  /@vue/reactivity@3.3.7:
+    resolution: {integrity: sha512-cZNVjWiw00708WqT0zRpyAgduG79dScKEPYJXq2xj/aMtk3SKvL3FBt2QKUlh6EHBJ1m8RhBY+ikBUzwc7/khg==}
+    dependencies:
+      '@vue/shared': 3.3.7
+    dev: true
+
   /@vue/runtime-core@3.3.4:
     resolution: {integrity: sha512-R+bqxMN6pWO7zGI4OMlmvePOdP2c93GsHFM/siJI7O2nxFRzj55pLwkpCedEY+bTMgp5miZ8CxfIZo3S+gFqvA==}
     dependencies:
       '@vue/reactivity': 3.3.4
       '@vue/shared': 3.3.4
 
+  /@vue/runtime-core@3.3.7:
+    resolution: {integrity: sha512-LHq9du3ubLZFdK/BP0Ysy3zhHqRfBn80Uc+T5Hz3maFJBGhci1MafccnL3rpd5/3wVfRHAe6c+PnlO2PAavPTQ==}
+    dependencies:
+      '@vue/reactivity': 3.3.7
+      '@vue/shared': 3.3.7
+    dev: true
+
   /@vue/runtime-dom@3.3.4:
     resolution: {integrity: sha512-Aj5bTJ3u5sFsUckRghsNjVTtxZQ1OyMWCr5dZRAPijF/0Vy4xEoRCwLyHXcj4D0UFbJ4lbx3gPTgg06K/GnPnQ==}
     dependencies:
@@ -5365,6 +5437,14 @@ packages:
       '@vue/shared': 3.3.4
       csstype: 3.1.2
 
+  /@vue/runtime-dom@3.3.7:
+    resolution: {integrity: sha512-PFQU1oeJxikdDmrfoNQay5nD4tcPNYixUBruZzVX/l0eyZvFKElZUjW4KctCcs52nnpMGO6UDK+jF5oV4GT5Lw==}
+    dependencies:
+      '@vue/runtime-core': 3.3.7
+      '@vue/shared': 3.3.7
+      csstype: 3.1.2
+    dev: true
+
   /@vue/server-renderer@3.3.4(vue@3.3.4):
     resolution: {integrity: sha512-Q6jDDzR23ViIb67v+vM1Dqntu+HUexQcsWKhhQa4ARVzxOY2HbC7QRW/ggkDBd5BU+uM1sV6XOAP0b216o34JQ==}
     peerDependencies:
@@ -5374,9 +5454,23 @@ packages:
       '@vue/shared': 3.3.4
       vue: 3.3.4
 
+  /@vue/server-renderer@3.3.7(vue@3.3.7):
+    resolution: {integrity: sha512-UlpKDInd1hIZiNuVVVvLgxpfnSouxKQOSE2bOfQpBuGwxRV/JqqTCyyjXUWiwtVMyeRaZhOYYqntxElk8FhBhw==}
+    peerDependencies:
+      vue: 3.3.7
+    dependencies:
+      '@vue/compiler-ssr': 3.3.7
+      '@vue/shared': 3.3.7
+      vue: 3.3.7(typescript@5.1.6)
+    dev: true
+
   /@vue/shared@3.3.4:
     resolution: {integrity: sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ==}
 
+  /@vue/shared@3.3.7:
+    resolution: {integrity: sha512-N/tbkINRUDExgcPTBvxNkvHGu504k8lzlNQRITVnm6YjOjwa4r0nnbd4Jb01sNpur5hAllyRJzSK5PvB9PPwRg==}
+    dev: true
+
   /@vueuse/core@10.1.0(vue@3.3.4):
     resolution: {integrity: sha512-3Znoa5m5RO+z4/C9w6DRaKTR3wCVJvD5rav8HTDGsr+7rOZRHtcgFJ8NcCs0ZvIpmev2kExTa311ns5j2RbzDQ==}
     dependencies:
@@ -5395,25 +5489,25 @@ packages:
       '@types/web-bluetooth': 0.0.17
       '@vueuse/metadata': 10.3.0
       '@vueuse/shared': 10.3.0(vue@3.3.4)
-      vue-demi: 0.14.5(vue@3.3.4)
+      vue-demi: 0.14.6(vue@3.3.4)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
     dev: true
 
-  /@vueuse/core@10.5.0(vue@3.3.4):
+  /@vueuse/core@10.5.0(vue@3.3.7):
     resolution: {integrity: sha512-z/tI2eSvxwLRjOhDm0h/SXAjNm8N5ld6/SC/JQs6o6kpJ6Ya50LnEL8g5hoYu005i28L0zqB5L5yAl8Jl26K3A==}
     dependencies:
       '@types/web-bluetooth': 0.0.18
       '@vueuse/metadata': 10.5.0
-      '@vueuse/shared': 10.5.0(vue@3.3.4)
-      vue-demi: 0.14.6(vue@3.3.4)
+      '@vueuse/shared': 10.5.0(vue@3.3.7)
+      vue-demi: 0.14.6(vue@3.3.7)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
     dev: true
 
-  /@vueuse/integrations@10.5.0(focus-trap@7.5.4)(vue@3.3.4):
+  /@vueuse/integrations@10.5.0(focus-trap@7.5.4)(vue@3.3.7):
     resolution: {integrity: sha512-fm5sXLCK0Ww3rRnzqnCQRmfjDURaI4xMsx+T+cec0ngQqHx/JgUtm8G0vRjwtonIeTBsH1Q8L3SucE+7K7upJQ==}
     peerDependencies:
       async-validator: '*'
@@ -5454,10 +5548,10 @@ packages:
       universal-cookie:
         optional: true
     dependencies:
-      '@vueuse/core': 10.5.0(vue@3.3.4)
-      '@vueuse/shared': 10.5.0(vue@3.3.4)
+      '@vueuse/core': 10.5.0(vue@3.3.7)
+      '@vueuse/shared': 10.5.0(vue@3.3.7)
       focus-trap: 7.5.4
-      vue-demi: 0.14.6(vue@3.3.4)
+      vue-demi: 0.14.6(vue@3.3.7)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
@@ -5487,16 +5581,16 @@ packages:
   /@vueuse/shared@10.3.0(vue@3.3.4):
     resolution: {integrity: sha512-kGqCTEuFPMK4+fNWy6dUOiYmxGcUbtznMwBZLC1PubidF4VZY05B+Oht7Jh7/6x4VOWGpvu3R37WHi81cKpiqg==}
     dependencies:
-      vue-demi: 0.14.5(vue@3.3.4)
+      vue-demi: 0.14.6(vue@3.3.4)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
     dev: true
 
-  /@vueuse/shared@10.5.0(vue@3.3.4):
+  /@vueuse/shared@10.5.0(vue@3.3.7):
     resolution: {integrity: sha512-18iyxbbHYLst9MqU1X1QNdMHIjks6wC7XTVf0KNOv5es/Ms6gjVFCAAWTVP2JStuGqydg3DT+ExpFORUEi9yhg==}
     dependencies:
-      vue-demi: 0.14.6(vue@3.3.4)
+      vue-demi: 0.14.6(vue@3.3.7)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
@@ -6222,7 +6316,7 @@ packages:
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     dependencies:
       '@babel/template': 7.22.5
-      '@babel/types': 7.22.10
+      '@babel/types': 7.23.0
       '@types/babel__core': 7.20.1
       '@types/babel__traverse': 7.20.1
     dev: true
@@ -10558,7 +10652,7 @@ packages:
     engines: {node: '>=8'}
     dependencies:
       '@babel/core': 7.22.10
-      '@babel/parser': 7.22.10
+      '@babel/parser': 7.23.0
       '@istanbuljs/schema': 0.1.3
       istanbul-lib-coverage: 3.2.0
       semver: 6.3.1
@@ -10974,7 +11068,7 @@ packages:
       '@babel/generator': 7.22.10
       '@babel/plugin-syntax-jsx': 7.22.5(@babel/core@7.22.10)
       '@babel/plugin-syntax-typescript': 7.22.5(@babel/core@7.22.10)
-      '@babel/types': 7.22.10
+      '@babel/types': 7.23.0
       '@jest/expect-utils': 29.6.2
       '@jest/transform': 29.6.2
       '@jest/types': 29.6.1
@@ -11706,6 +11800,13 @@ packages:
       '@jridgewell/sourcemap-codec': 1.4.15
     dev: true
 
+  /magic-string@0.30.5:
+    resolution: {integrity: sha512-7xlpfBaQaP/T6Vh8MO/EqXSW5En6INHEvEXQiuff7Gku0PWjU3uf6w/j9o7O+SpB5fOAkrI5HeoNgwjEO0pFsA==}
+    engines: {node: '>=12'}
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.4.15
+    dev: true
+
   /make-dir@3.1.0:
     resolution: {integrity: sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==}
     engines: {node: '>=8'}
@@ -13223,6 +13324,15 @@ packages:
       picocolors: 1.0.0
       source-map-js: 1.0.2
 
+  /postcss@8.4.31:
+    resolution: {integrity: sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==}
+    engines: {node: ^10 || ^12 || >=14}
+    dependencies:
+      nanoid: 3.3.6
+      picocolors: 1.0.0
+      source-map-js: 1.0.2
+    dev: true
+
   /preact@10.16.0:
     resolution: {integrity: sha512-XTSj3dJ4roKIC93pald6rWuB2qQJO9gO2iLLyTe87MrjQN+HklueLsmskbywEWqCHlclgz3/M4YLL2iBr9UmMA==}
     dev: true
@@ -15555,7 +15665,7 @@ packages:
       mlly: 1.4.0
       pathe: 1.1.1
       picocolors: 1.0.0
-      vite: 4.4.9(@types/node@18.17.5)
+      vite: 4.4.11(@types/node@18.17.5)
     transitivePeerDependencies:
       - '@types/node'
       - less
@@ -15671,6 +15781,42 @@ packages:
       fsevents: 2.3.2
     dev: true
 
+  /vite@4.5.0(@types/node@18.17.5):
+    resolution: {integrity: sha512-ulr8rNLA6rkyFAlVWw2q5YJ91v098AFQ2R0PRFwPzREXOUJQPtFUG0t+/ZikhaOCDqFoDhN6/v8Sq0o4araFAw==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+    hasBin: true
+    peerDependencies:
+      '@types/node': '>= 14'
+      less: '*'
+      lightningcss: ^1.21.0
+      sass: '*'
+      stylus: '*'
+      sugarss: '*'
+      terser: ^5.4.0
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+      less:
+        optional: true
+      lightningcss:
+        optional: true
+      sass:
+        optional: true
+      stylus:
+        optional: true
+      sugarss:
+        optional: true
+      terser:
+        optional: true
+    dependencies:
+      '@types/node': 18.17.5
+      esbuild: 0.18.20
+      postcss: 8.4.27
+      rollup: 3.28.0
+    optionalDependencies:
+      fsevents: 2.3.2
+    dev: true
+
   /vitepress-plugin-search@1.0.4-alpha.20(flexsearch@0.7.31)(vitepress@1.0.0-alpha.72)(vue@3.3.4):
     resolution: {integrity: sha512-zG+ev9pw1Mg7htABlFCNXb8XwnKN+qfTKw+vU0Ers6RIrABx+45EAAFBoaL1mEpl1FRFn1o/dQ7F4b8GP6HdGQ==}
     engines: {node: ^14.13.1 || ^16.7.0 || >=18}
@@ -15719,8 +15865,8 @@ packages:
       - terser
     dev: true
 
-  /vitepress@1.0.0-rc.22(@algolia/client-search@4.19.1)(@types/node@18.17.5)(postcss@8.4.27)(search-insights@2.7.0):
-    resolution: {integrity: sha512-n7le5iikCFgWMuX7sKfzDGJGlrsYQ5trG3S97BghNz2alOTr4Xp+GrB6ShwogUTX9gNgeNmrACjokhW55LNeBA==}
+  /vitepress@1.0.0-rc.24(@algolia/client-search@4.19.1)(@types/node@18.17.5)(postcss@8.4.27)(search-insights@2.7.0)(typescript@5.1.6):
+    resolution: {integrity: sha512-RpnL8cnOGwiRlBbrYQUm9sYkJbtyOt/wYXk2diTcokY4yvks/5lq9LuSt+MURWB6ZqwpSNHvTmxgaSfLoG0/OA==}
     hasBin: true
     peerDependencies:
       markdown-it-mathjax3: ^4.3.2
@@ -15733,17 +15879,18 @@ packages:
     dependencies:
       '@docsearch/css': 3.5.2
       '@docsearch/js': 3.5.2(@algolia/client-search@4.19.1)(search-insights@2.7.0)
-      '@types/markdown-it': 13.0.2
+      '@types/markdown-it': 13.0.5
+      '@vitejs/plugin-vue': 4.3.1(vite@4.5.0)(vue@3.3.7)
       '@vue/devtools-api': 6.5.1
-      '@vueuse/core': 10.5.0(vue@3.3.4)
-      '@vueuse/integrations': 10.5.0(focus-trap@7.5.4)(vue@3.3.4)
+      '@vueuse/core': 10.5.0(vue@3.3.7)
+      '@vueuse/integrations': 10.5.0(focus-trap@7.5.4)(vue@3.3.7)
       focus-trap: 7.5.4
       mark.js: 8.11.1
       minisearch: 6.1.0
       postcss: 8.4.27
       shiki: 0.14.5
-      vite: 4.4.11(@types/node@18.17.5)
-      vue: 3.3.4
+      vite: 4.5.0(@types/node@18.17.5)
+      vue: 3.3.7(typescript@5.1.6)
     transitivePeerDependencies:
       - '@algolia/client-search'
       - '@types/node'
@@ -15768,6 +15915,7 @@ packages:
       - stylus
       - sugarss
       - terser
+      - typescript
       - universal-cookie
     dev: true
 
@@ -15885,6 +16033,7 @@ packages:
         optional: true
     dependencies:
       vue: 3.3.4
+    dev: false
 
   /vue-demi@0.14.6(vue@3.3.4):
     resolution: {integrity: sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==}
@@ -15901,6 +16050,21 @@ packages:
       vue: 3.3.4
     dev: true
 
+  /vue-demi@0.14.6(vue@3.3.7):
+    resolution: {integrity: sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==}
+    engines: {node: '>=12'}
+    hasBin: true
+    requiresBuild: true
+    peerDependencies:
+      '@vue/composition-api': ^1.0.0-rc.1
+      vue: ^3.0.0-0 || ^2.6.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+    dependencies:
+      vue: 3.3.7(typescript@5.1.6)
+    dev: true
+
   /vue@3.3.4:
     resolution: {integrity: sha512-VTyEYn3yvIeY1Py0WaYGZsXnz3y5UnGi62GjVEqvEGPl6nxbOrCXbVOTQWBEJUqAyTUk2uJ5JLVnYJ6ZzGbrSw==}
     dependencies:
@@ -15910,12 +16074,28 @@ packages:
       '@vue/server-renderer': 3.3.4(vue@3.3.4)
       '@vue/shared': 3.3.4
 
+  /vue@3.3.7(typescript@5.1.6):
+    resolution: {integrity: sha512-YEMDia1ZTv1TeBbnu6VybatmSteGOS3A3YgfINOfraCbf85wdKHzscD6HSS/vB4GAtI7sa1XPX7HcQaJ1l24zA==}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      '@vue/compiler-dom': 3.3.7
+      '@vue/compiler-sfc': 3.3.7
+      '@vue/runtime-dom': 3.3.7
+      '@vue/server-renderer': 3.3.7(vue@3.3.7)
+      '@vue/shared': 3.3.7
+      typescript: 5.1.6
+    dev: true
+
   /vuex@4.1.0(vue@3.3.4):
     resolution: {integrity: sha512-hmV6UerDrPcgbSy9ORAtNXDr9M4wlNP4pEFKye4ujJF8oqgFFuxDCdOLS3eNoRTtq5O3hoBDh9Doj1bQMYHRbQ==}
     peerDependencies:
       vue: ^3.2.0
     dependencies:
-      '@vue/devtools-api': 6.5.0
+      '@vue/devtools-api': 6.5.1
       vue: 3.3.4
     dev: false
 

From 8f2a5064cb66b304eb36254b89b0ddd6ae4ba271 Mon Sep 17 00:00:00 2001
From: Sebastian Holmqvist <1297882+csholmq@users.noreply.github.com>
Date: Thu, 19 Oct 2023 17:01:43 +0200
Subject: [PATCH 163/457] fix(tooltip): remove redundant scroll offset

window.scrollY is already account for which means document.body.scrollTop incorrectly offsets the tooltip vertically.
The same is not true for horizontal position.
---
 packages/mermaid/src/diagrams/flowchart/flowDb.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/mermaid/src/diagrams/flowchart/flowDb.js b/packages/mermaid/src/diagrams/flowchart/flowDb.js
index 9a9394e543..501479239b 100644
--- a/packages/mermaid/src/diagrams/flowchart/flowDb.js
+++ b/packages/mermaid/src/diagrams/flowchart/flowDb.js
@@ -425,7 +425,7 @@ const setupToolTips = function (element) {
       tooltipElem
         .text(el.attr('title'))
         .style('left', window.scrollX + rect.left + (rect.right - rect.left) / 2 + 'px')
-        .style('top', window.scrollY + rect.top - 14 + document.body.scrollTop + 'px');
+        .style('top', window.scrollY + rect.top - 14 + 'px');
       tooltipElem.html(tooltipElem.html().replace(/<br\/>/g, '
    '));
       el.classed('hover', true);
     })

From a3ee21d7fc16c47315d2fa071344eaa6be2f1223 Mon Sep 17 00:00:00 2001
From: Sebastian Holmqvist <1297882+csholmq@users.noreply.github.com>
Date: Fri, 20 Oct 2023 08:39:42 +0200
Subject: [PATCH 164/457] fix(tooltip): change position of tooltip to not cover
 node

Position the tooltip centered, just below the node being hovered.

Update packages/mermaid/src/diagrams/flowchart/flowDb.js

Co-authored-by: Sidharth Vinod 
---
 packages/mermaid/src/diagrams/flowchart/flowDb.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/mermaid/src/diagrams/flowchart/flowDb.js b/packages/mermaid/src/diagrams/flowchart/flowDb.js
index 501479239b..f224c9bace 100644
--- a/packages/mermaid/src/diagrams/flowchart/flowDb.js
+++ b/packages/mermaid/src/diagrams/flowchart/flowDb.js
@@ -425,7 +425,7 @@ const setupToolTips = function (element) {
       tooltipElem
         .text(el.attr('title'))
         .style('left', window.scrollX + rect.left + (rect.right - rect.left) / 2 + 'px')
-        .style('top', window.scrollY + rect.top - 14 + 'px');
+        .style('top', window.scrollY + rect.bottom  + 'px');
       tooltipElem.html(tooltipElem.html().replace(/<br\/>/g, '
    '));
       el.classed('hover', true);
     })

From 390e22cc0b13c809ef790e3054e0ea1f384fed19 Mon Sep 17 00:00:00 2001
From: Aakansha Doshi 
Date: Tue, 31 Oct 2023 18:28:45 +0530
Subject: [PATCH 165/457] fix: getMessageAPI so it considers entity codes

---
 packages/mermaid/src/Diagram.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/mermaid/src/Diagram.ts b/packages/mermaid/src/Diagram.ts
index b77091f28c..4fc12d1036 100644
--- a/packages/mermaid/src/Diagram.ts
+++ b/packages/mermaid/src/Diagram.ts
@@ -5,6 +5,7 @@ import { detectType, getDiagramLoader } from './diagram-api/detectType.js';
 import { UnknownDiagramError } from './errors.js';
 import type { DetailedError } from './utils.js';
 import type { DiagramDefinition, DiagramMetadata } from './diagram-api/types.js';
+import { encodeEntities } from './mermaidAPI.js';
 
 export type ParseErrorFunction = (err: string | DetailedError | unknown, hash?: any) => void;
 
@@ -81,6 +82,8 @@ export const getDiagramFromText = async (
   text: string,
   metadata: Pick = {}
 ): Promise => {
+  text = encodeEntities(text);
+
   const type = detectType(text, configApi.getConfig());
   try {
     // Trying to find the diagram

From fff25e7e2cec66e432756ec742ad8e6bbb864762 Mon Sep 17 00:00:00 2001
From: Aakansha Doshi 
Date: Tue, 31 Oct 2023 19:32:20 +0530
Subject: [PATCH 166/457] add spec

---
 packages/mermaid/src/diagram-api/types.ts |  9 +++++++++
 packages/mermaid/src/diagram.spec.ts      | 14 ++++++++++++++
 packages/mermaid/src/mermaidAPI.ts        |  2 --
 3 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/packages/mermaid/src/diagram-api/types.ts b/packages/mermaid/src/diagram-api/types.ts
index 58d98107ea..232550b4f0 100644
--- a/packages/mermaid/src/diagram-api/types.ts
+++ b/packages/mermaid/src/diagram-api/types.ts
@@ -19,6 +19,14 @@ export interface InjectUtils {
   _parseDirective: any;
 }
 
+export type Message = {
+  type: number;
+  to: string;
+  from: string;
+  message: string;
+  wrap: boolean;
+};
+
 /**
  * Generic Diagram DB that may apply to any diagram type.
  */
@@ -37,6 +45,7 @@ export interface DiagramDB {
 
   setDisplayMode?: (title: string) => void;
   bindFunctions?: (element: Element) => void;
+  getMessages?: () => Message[];
 }
 
 // This is what is returned from getClasses(...) methods.
diff --git a/packages/mermaid/src/diagram.spec.ts b/packages/mermaid/src/diagram.spec.ts
index 19a65b716b..4e3c4884d1 100644
--- a/packages/mermaid/src/diagram.spec.ts
+++ b/packages/mermaid/src/diagram.spec.ts
@@ -69,4 +69,18 @@ Expecting 'TXT', got 'NEWLINE'"
       '"No diagram type detected matching given configuration for text: thor TD; A-->B"'
     );
   });
+
+  test('should consider entity codes when present in diagram defination', async () => {
+    const diagram = await getDiagramFromText(`sequenceDiagram
+    A->>B: I #9829; you!
+    B->>A: I #9829; you #infin; times more!`);
+    const messages = diagram.db?.getMessages?.();
+    if (!messages) {
+      throw new Error('Messages not found!');
+    }
+    const result = ['I fl°°9829¶ß you!', 'I fl°°9829¶ß you fl°infin¶ß times more!'];
+    messages.forEach((message, index: number) => {
+      expect(message.message).toBe(result[index]);
+    });
+  });
 });
diff --git a/packages/mermaid/src/mermaidAPI.ts b/packages/mermaid/src/mermaidAPI.ts
index 5250f0b190..9637eca002 100644
--- a/packages/mermaid/src/mermaidAPI.ts
+++ b/packages/mermaid/src/mermaidAPI.ts
@@ -436,8 +436,6 @@ const render = async function (
     appendDivSvgG(root, id, enclosingDivID);
   }
 
-  text = encodeEntities(text);
-
   // -------------------------------------------------------------------------------
   // Create the diagram
 

From f42cec282a2d1ba865894ee0276bf110878b022c Mon Sep 17 00:00:00 2001
From: Guy Pursey 
Date: Fri, 6 Oct 2023 20:16:09 +0100
Subject: [PATCH 167/457] GitGraph: Add check for direction of merge arrow to
 determine colour.

---
 packages/mermaid/src/diagrams/git/gitGraphRenderer.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/mermaid/src/diagrams/git/gitGraphRenderer.js b/packages/mermaid/src/diagrams/git/gitGraphRenderer.js
index 2b88cfe7ef..fa490e75e8 100644
--- a/packages/mermaid/src/diagrams/git/gitGraphRenderer.js
+++ b/packages/mermaid/src/diagrams/git/gitGraphRenderer.js
@@ -410,7 +410,7 @@ const drawArrow = (svg, commit1, commit2, allCommits) => {
     radius = 10;
     offset = 10;
     // Figure out the color of the arrow,arrows going down take the color from the destination branch
-    colorClassNum = branchPos[commit2.branch].index;
+    colorClassNum = branchPos[(p1.y > p2.y ? commit1 : commit2).branch].index;
 
     const lineY = p1.y < p2.y ? findLane(p1.y, p2.y) : findLane(p2.y, p1.y);
     const lineX = p1.x < p2.x ? findLane(p1.x, p2.x) : findLane(p2.x, p1.x);

From d9daf19055c3e464b383989a8a4770d257cb24e7 Mon Sep 17 00:00:00 2001
From: Guy Pursey 
Date: Sat, 7 Oct 2023 18:15:29 +0100
Subject: [PATCH 168/457] GitGraph: Correct commit variable in overlap check.

Originally, the function was checking if any commits were on the
same branch as `commit2`, the destination commit.

However, in order to avoid a conflict, we should only need to
check whether any commits are on the same branch as `commit 1`.

Updated and moved commenting as well.
---
 packages/mermaid/src/diagrams/git/gitGraphRenderer.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/mermaid/src/diagrams/git/gitGraphRenderer.js b/packages/mermaid/src/diagrams/git/gitGraphRenderer.js
index fa490e75e8..8ce05c22b0 100644
--- a/packages/mermaid/src/diagrams/git/gitGraphRenderer.js
+++ b/packages/mermaid/src/diagrams/git/gitGraphRenderer.js
@@ -347,11 +347,13 @@ const drawCommits = (svg, commits, modifyGraph) => {
  * @returns {boolean} If there are commits between commit1's x-position and commit2's x-position
  */
 const hasOverlappingCommits = (commit1, commit2, allCommits) => {
-  // Find commits on the same branch as commit2
   const keys = Object.keys(allCommits);
   const overlappingComits = keys.filter((key) => {
     return (
-      allCommits[key].branch === commit2.branch &&
+      // Find commits on the same branch as commit1,
+      // after commit1 but before commit2
+      // to avoid collision
+      allCommits[key].branch === commit1.branch &&
       allCommits[key].seq > commit1.seq &&
       allCommits[key].seq < commit2.seq
     );

From 839645f161c50866af5c35ecc48619e2143dd70f Mon Sep 17 00:00:00 2001
From: Guy Pursey 
Date: Sat, 7 Oct 2023 18:43:16 +0100
Subject: [PATCH 169/457] GitGraph: Add more example diagrams to test with.

---
 demos/git.html | 80 ++++++++++++++++++++++++++++++++++++++++++++------
 1 file changed, 71 insertions(+), 9 deletions(-)

diff --git a/demos/git.html b/demos/git.html
index f24217711e..37fa8a461f 100644
--- a/demos/git.html
+++ b/demos/git.html
@@ -17,26 +17,88 @@
     
    Git diagram demo
    
     
         ---
-    title: Simple Git diagram
+    title: Simple "branch and merge"
     ---
     gitGraph:
-    options
-    {
-    "nodeSpacing": 50,
-    "nodeRadius": 5
-    }
-    end
-    branch master
     commit
     branch newbranch
     checkout newbranch
     commit
+    checkout main
+    merge newbranch
+    
    
+
+    
    +    ---
+    title: Continuous development
+    ---
+    gitGraph:
+    commit
+    branch develop
+    checkout develop
+    commit
+    checkout main
+    merge develop
+    checkout develop
+    commit
+    checkout main
+    merge develop
+    
    
+    
    +    ---
+    title: Two-way merges
+    ---
+    gitGraph:
+    commit
+    branch develop
+    checkout develop
+    commit
+    checkout main
+    merge develop
+    commit
+    checkout develop
+    merge main
     commit
-    checkout master
+    checkout main
+    merge develop
+    
    
+    
    +    ---
+    title: Cherry-pick
+    ---
+    gitGraph:
     commit
+    branch newbranch
+    checkout newbranch
+    commit id: "Pick me"
+    checkout main
+    commit
+    checkout newbranch
     commit
+    checkout main
+    cherry-pick id: "Pick me"
     merge newbranch
     
    
+    
    +    ---
+    title: Three branches
+    ---
+    gitGraph:
+    commit
+    branch develop
+    checkout develop
+    commit
+    branch feature
+    checkout feature
+    commit
+    checkout main
+    merge feature id:"Direct to main"
+    checkout develop
+    merge feature
+    commit
+    checkout main
+    merge develop
+    
    
 
     
 ```
 
-**Doing so commands the mermaid parser to look for the `
    ` or `
    ` tags with `class="mermaid"`. From these tags, mermaid tries read the diagram/chart definitions and render them into SVG charts.**
+**Doing so commands the mermaid parser to look for the `
    ` or `
    ` tags with `class="mermaid"`. From these tags, mermaid tries to read the diagram/chart definitions and render them into SVG charts.**
 
 **Examples can be found in** [Other examples](../syntax/examples.md)
 

From b5fd8fb7c1276f004ebbdab62fddc5ecc1e97e0b Mon Sep 17 00:00:00 2001
From: SteffenLm <33038091+SteffenLm@users.noreply.github.com>
Date: Fri, 3 Nov 2023 20:55:42 +0100
Subject: [PATCH 202/457] fix text-decoration for abstract attibutes

---
 .../src/diagrams/class/classTypes.spec.ts     | 79 +++++++++++++++++++
 .../mermaid/src/diagrams/class/classTypes.ts  |  2 +-
 2 files changed, 80 insertions(+), 1 deletion(-)

diff --git a/packages/mermaid/src/diagrams/class/classTypes.spec.ts b/packages/mermaid/src/diagrams/class/classTypes.spec.ts
index 2b360d4473..5a5ffa4dbd 100644
--- a/packages/mermaid/src/diagrams/class/classTypes.spec.ts
+++ b/packages/mermaid/src/diagrams/class/classTypes.spec.ts
@@ -681,3 +681,82 @@ describe('given text representing a method, ', function () {
     });
   });
 });
+
+describe('given text representing an attribute', () => {
+  describe('when the attribute has no modifiers', () => {
+    it('should parse the display text correctly', () => {
+      const str = 'name String';
+
+      const displayDetails = new ClassMember(str, 'attribute').getDisplayDetails();
+
+      expect(displayDetails.displayText).toBe('name String');
+      expect(displayDetails.cssStyle).toBe('');
+    });
+  });
+
+  describe('when the attribute has public "+" modifier', () => {
+    it('should parse the display text correctly', () => {
+      const str = '+name String';
+
+      const displayDetails = new ClassMember(str, 'attribute').getDisplayDetails();
+
+      expect(displayDetails.displayText).toBe('+name String');
+      expect(displayDetails.cssStyle).toBe('');
+    });
+  });
+
+  describe('when the attribute has protected "#" modifier', () => {
+    it('should parse the display text correctly', () => {
+      const str = '#name String';
+
+      const displayDetails = new ClassMember(str, 'attribute').getDisplayDetails();
+
+      expect(displayDetails.displayText).toBe('#name String');
+      expect(displayDetails.cssStyle).toBe('');
+    });
+  });
+
+  describe('when the attribute has private "-" modifier', () => {
+    it('should parse the display text correctly', () => {
+      const str = '-name String';
+
+      const displayDetails = new ClassMember(str, 'attribute').getDisplayDetails();
+
+      expect(displayDetails.displayText).toBe('-name String');
+      expect(displayDetails.cssStyle).toBe('');
+    });
+  });
+
+  describe('when the attribute has internal "~" modifier', () => {
+    it('should parse the display text correctly', () => {
+      const str = '~name String';
+
+      const displayDetails = new ClassMember(str, 'attribute').getDisplayDetails();
+
+      expect(displayDetails.displayText).toBe('~name String');
+      expect(displayDetails.cssStyle).toBe('');
+    });
+  });
+
+  describe('when the attribute has static "$" modifier', () => {
+    it('should parse the display text correctly and apply static css style', () => {
+      const str = 'name String$';
+
+      const displayDetails = new ClassMember(str, 'attribute').getDisplayDetails();
+
+      expect(displayDetails.displayText).toBe('name String');
+      expect(displayDetails.cssStyle).toBe(staticCssStyle);
+    });
+  });
+
+  describe('when the attribute has abstract "*" modifier', () => {
+    it('should parse the display text correctly and apply abstract css style', () => {
+      const str = 'name String*';
+
+      const displayDetails = new ClassMember(str, 'attribute').getDisplayDetails();
+
+      expect(displayDetails.displayText).toBe('name String');
+      expect(displayDetails.cssStyle).toBe(abstractCssStyle);
+    });
+  });
+});
diff --git a/packages/mermaid/src/diagrams/class/classTypes.ts b/packages/mermaid/src/diagrams/class/classTypes.ts
index e288eefde8..f112dd4dde 100644
--- a/packages/mermaid/src/diagrams/class/classTypes.ts
+++ b/packages/mermaid/src/diagrams/class/classTypes.ts
@@ -106,7 +106,7 @@ export class ClassMember {
         this.visibility = firstChar as Visibility;
       }
 
-      if (lastChar.match(/[*?]/)) {
+      if (lastChar.match(/[$*]/)) {
         potentialClassifier = lastChar;
       }
 

From b61ea4b8aa2f5d38ad6af828ed0620a589ec5786 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Arda=20Ayd=C4=B1n?= 
Date: Sun, 5 Nov 2023 22:35:36 +0300
Subject: [PATCH 203/457] Update XYChart's nav link in the docs template

The site gives 404 with xychart but navigates correctly with xyChart
---
 packages/mermaid/src/docs/.vitepress/config.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/mermaid/src/docs/.vitepress/config.ts b/packages/mermaid/src/docs/.vitepress/config.ts
index 040a669133..ed4646c598 100644
--- a/packages/mermaid/src/docs/.vitepress/config.ts
+++ b/packages/mermaid/src/docs/.vitepress/config.ts
@@ -150,7 +150,7 @@ function sidebarSyntax() {
         { text: 'Timeline 🔥', link: '/syntax/timeline' },
         { text: 'Zenuml 🔥', link: '/syntax/zenuml' },
         { text: 'Sankey 🔥', link: '/syntax/sankey' },
-        { text: 'XYChart 🔥', link: '/syntax/xychart' },
+        { text: 'XYChart 🔥', link: '/syntax/xyChart' },
         { text: 'Other Examples', link: '/syntax/examples' },
       ],
     },

From dff13439f635d9b46b97a259c1b418296b876809 Mon Sep 17 00:00:00 2001
From: Aakansha Doshi 
Date: Mon, 6 Nov 2023 12:17:43 +0530
Subject: [PATCH 204/457] review fixes

---
 .../interfaces/mermaidAPI.ParseOptions.md     |  2 +-
 .../interfaces/mermaidAPI.RenderResult.md     |  4 +-
 docs/config/setup/modules/mermaidAPI.md       | 58 +++----------------
 packages/mermaid/src/Diagram.ts               |  3 +-
 4 files changed, 13 insertions(+), 54 deletions(-)

diff --git a/docs/config/setup/interfaces/mermaidAPI.ParseOptions.md b/docs/config/setup/interfaces/mermaidAPI.ParseOptions.md
index ea390899e4..4386be9380 100644
--- a/docs/config/setup/interfaces/mermaidAPI.ParseOptions.md
+++ b/docs/config/setup/interfaces/mermaidAPI.ParseOptions.md
@@ -16,4 +16,4 @@
 
 #### Defined in
 
-[mermaidAPI.ts:59](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L59)
+[mermaidAPI.ts:60](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L60)
diff --git a/docs/config/setup/interfaces/mermaidAPI.RenderResult.md b/docs/config/setup/interfaces/mermaidAPI.RenderResult.md
index 18ee5e4316..6209782f75 100644
--- a/docs/config/setup/interfaces/mermaidAPI.RenderResult.md
+++ b/docs/config/setup/interfaces/mermaidAPI.RenderResult.md
@@ -39,7 +39,7 @@ bindFunctions?.(div); // To call bindFunctions only if it's present.
 
 #### Defined in
 
-[mermaidAPI.ts:79](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L79)
+[mermaidAPI.ts:80](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L80)
 
 ---
 
@@ -51,4 +51,4 @@ The svg code for the rendered graph.
 
 #### Defined in
 
-[mermaidAPI.ts:69](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L69)
+[mermaidAPI.ts:70](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L70)
diff --git a/docs/config/setup/modules/mermaidAPI.md b/docs/config/setup/modules/mermaidAPI.md
index 0a948b6f39..6337807883 100644
--- a/docs/config/setup/modules/mermaidAPI.md
+++ b/docs/config/setup/modules/mermaidAPI.md
@@ -25,7 +25,7 @@ Renames and re-exports [mermaidAPI](mermaidAPI.md#mermaidapi)
 
 #### Defined in
 
-[mermaidAPI.ts:63](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L63)
+[mermaidAPI.ts:64](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L64)
 
 ## Variables
 
@@ -96,7 +96,7 @@ mermaid.initialize(config);
 
 #### Defined in
 
-[mermaidAPI.ts:641](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L641)
+[mermaidAPI.ts:603](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L603)
 
 ## Functions
 
@@ -127,7 +127,7 @@ Return the last node appended
 
 #### Defined in
 
-[mermaidAPI.ts:299](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L299)
+[mermaidAPI.ts:263](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L263)
 
 ---
 
@@ -153,7 +153,7 @@ the cleaned up svgCode
 
 #### Defined in
 
-[mermaidAPI.ts:245](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L245)
+[mermaidAPI.ts:209](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L209)
 
 ---
 
@@ -178,7 +178,7 @@ the string with all the user styles
 
 #### Defined in
 
-[mermaidAPI.ts:175](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L175)
+[mermaidAPI.ts:139](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L139)
 
 ---
 
@@ -201,7 +201,7 @@ the string with all the user styles
 
 #### Defined in
 
-[mermaidAPI.ts:222](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L222)
+[mermaidAPI.ts:186](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L186)
 
 ---
 
@@ -228,47 +228,7 @@ with an enclosing block that has each of the cssClasses followed by !important;
 
 #### Defined in
 
-[mermaidAPI.ts:160](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L160)
-
----
-
-### decodeEntities
-
-▸ **decodeEntities**(`text`): `string`
-
-#### Parameters
-
-| Name   | Type     | Description        |
-| :----- | :------- | :----------------- |
-| `text` | `string` | text to be decoded |
-
-#### Returns
-
-`string`
-
-#### Defined in
-
-[mermaidAPI.ts:146](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L146)
-
----
-
-### encodeEntities
-
-▸ **encodeEntities**(`text`): `string`
-
-#### Parameters
-
-| Name   | Type     | Description        |
-| :----- | :------- | :----------------- |
-| `text` | `string` | text to be encoded |
-
-#### Returns
-
-`string`
-
-#### Defined in
-
-[mermaidAPI.ts:117](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L117)
+[mermaidAPI.ts:124](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L124)
 
 ---
 
@@ -294,7 +254,7 @@ Put the svgCode into an iFrame. Return the iFrame code
 
 #### Defined in
 
-[mermaidAPI.ts:276](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L276)
+[mermaidAPI.ts:240](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L240)
 
 ---
 
@@ -319,4 +279,4 @@ Remove any existing elements from the given document
 
 #### Defined in
 
-[mermaidAPI.ts:349](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L349)
+[mermaidAPI.ts:313](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L313)
diff --git a/packages/mermaid/src/Diagram.ts b/packages/mermaid/src/Diagram.ts
index f1d1bc6e8e..2b5ae89923 100644
--- a/packages/mermaid/src/Diagram.ts
+++ b/packages/mermaid/src/Diagram.ts
@@ -23,6 +23,7 @@ export class Diagram {
 
   private detectError?: UnknownDiagramError;
   constructor(public text: string, public metadata: Pick = {}) {
+    this.text = encodeEntities(text);
     this.text += '\n';
     const cnf = configApi.getConfig();
     try {
@@ -83,8 +84,6 @@ export const getDiagramFromText = async (
   text: string,
   metadata: Pick = {}
 ): Promise => {
-  text = encodeEntities(text);
-
   const type = detectType(text, configApi.getConfig());
   try {
     // Trying to find the diagram

From 172d90e7318ebe5bc07422f726eed48c113b262e Mon Sep 17 00:00:00 2001
From: Alois Klink 
Date: Mon, 6 Nov 2023 10:05:47 +0000
Subject: [PATCH 205/457] fix(flow): fix invalid ellipseText regex

This invalid regex was causing Mermaid to freeze.
---
 .../mermaid/src/diagrams/flowchart/parser/flow-text.spec.js   | 4 ++++
 packages/mermaid/src/diagrams/flowchart/parser/flow.jison     | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow-text.spec.js b/packages/mermaid/src/diagrams/flowchart/parser/flow-text.spec.js
index b127e1b65d..61eccbbc8e 100644
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow-text.spec.js
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow-text.spec.js
@@ -535,6 +535,10 @@ describe('[Text] when parsing', () => {
     expect(vert['A'].text).toBe('this is an ellipse');
   });
 
+  it('should not freeze when ellipse text has a `(`', function () {
+    expect(() => flow.parser.parse('graph\nX(- My Text (')).toThrowError();
+  });
+
   it('should handle text in diamond vertices with space', function () {
     const res = flow.parser.parse('graph TD;A(chimpansen hoppar)-->C;');
 
diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow.jison b/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
index 6dad36d25f..de23d93cb9 100644
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
@@ -134,7 +134,7 @@ that id.
 <*>\s*\~\~[\~]+\s*              return 'LINK';
 
 [-/\)][\)]         { this.popState(); return '-)'; }
-[^\(\)\[\]\{\}]|-/!\)+       return "TEXT"
+[^\(\)\[\]\{\}]|-\!\)+       return "TEXT"
 <*>"(-"                         { this.pushState("ellipseText"); return '(-'; }
 
 "])"                { this.popState(); return 'STADIUMEND'; }

From 23cbf50413e82a2f9160fddb648bfa69c44a8d17 Mon Sep 17 00:00:00 2001
From: Aakansha Doshi 
Date: Mon, 6 Nov 2023 18:47:38 +0530
Subject: [PATCH 206/457] fix: render the participants in same order as they
 are created

---
 demos/sequence.html                               | 9 ++++++++-
 packages/mermaid/src/diagrams/sequence/svgDraw.js | 3 ++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/demos/sequence.html b/demos/sequence.html
index b2733a384e..035dc7385d 100644
--- a/demos/sequence.html
+++ b/demos/sequence.html
@@ -164,6 +164,13 @@ 
    Sequence diagram demos
    
       end
     
    
 
+    
    +    sequenceDiagram
+      actor Alice
+      actor John
+      Alice-xJohn: Hello John, how are you?
+      John--xAlice: Great!
+    
    
     
   
diff --git a/packages/mermaid/src/diagrams/sequence/svgDraw.js b/packages/mermaid/src/diagrams/sequence/svgDraw.js
index f81147c10c..87899df1ec 100644
--- a/packages/mermaid/src/diagrams/sequence/svgDraw.js
+++ b/packages/mermaid/src/diagrams/sequence/svgDraw.js
@@ -324,7 +324,7 @@ const drawActorTypeParticipant = function (elem, actor, conf, isFooter) {
   const center = actor.x + actor.width / 2;
   const centerY = actorY + 5;
 
-  const boxpluslineGroup = elem.append('g').lower();
+  const boxpluslineGroup = elem.append('g').raise();
   var g = boxpluslineGroup;
 
   if (!isFooter) {
@@ -1038,6 +1038,7 @@ export default {
   drawText,
   drawLabel,
   drawActor,
+  drawActorTypeParticipant,
   drawBox,
   drawPopup,
   anchorElement,

From 78c1a3d98027393e99a96031b4fe0e943a248886 Mon Sep 17 00:00:00 2001
From: Aakansha Doshi 
Date: Mon, 6 Nov 2023 18:57:47 +0530
Subject: [PATCH 207/457] fix

---
 demos/sequence.html                               | 2 +-
 packages/mermaid/src/diagrams/sequence/svgDraw.js | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/demos/sequence.html b/demos/sequence.html
index 035dc7385d..d7bce2fef2 100644
--- a/demos/sequence.html
+++ b/demos/sequence.html
@@ -181,7 +181,7 @@ 
    Sequence diagram demos
    
         flowchart: { curve: 'basis' },
         gantt: { axisFormat: '%m/%d/%Y' },
         sequence: { actorMargin: 50 },
-        sequenceDiagram: { actorMargin: 300 }, // deprecated
+        // sequenceDiagram: { actorMargin: 300 }, // deprecated
       });
     
   
diff --git a/packages/mermaid/src/diagrams/sequence/svgDraw.js b/packages/mermaid/src/diagrams/sequence/svgDraw.js
index 87899df1ec..fd490e5ae6 100644
--- a/packages/mermaid/src/diagrams/sequence/svgDraw.js
+++ b/packages/mermaid/src/diagrams/sequence/svgDraw.js
@@ -1038,7 +1038,6 @@ export default {
   drawText,
   drawLabel,
   drawActor,
-  drawActorTypeParticipant,
   drawBox,
   drawPopup,
   anchorElement,

From dff8b783b8f85bb9b6b71986fdbce80f3ddfb204 Mon Sep 17 00:00:00 2001
From: Aakansha Doshi 
Date: Mon, 6 Nov 2023 19:02:10 +0530
Subject: [PATCH 208/457] fix

---
 packages/mermaid/src/diagrams/sequence/svgDraw.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/mermaid/src/diagrams/sequence/svgDraw.js b/packages/mermaid/src/diagrams/sequence/svgDraw.js
index fd490e5ae6..31e6dc2a89 100644
--- a/packages/mermaid/src/diagrams/sequence/svgDraw.js
+++ b/packages/mermaid/src/diagrams/sequence/svgDraw.js
@@ -324,7 +324,7 @@ const drawActorTypeParticipant = function (elem, actor, conf, isFooter) {
   const center = actor.x + actor.width / 2;
   const centerY = actorY + 5;
 
-  const boxpluslineGroup = elem.append('g').raise();
+  const boxpluslineGroup = elem.append('g');
   var g = boxpluslineGroup;
 
   if (!isFooter) {

From 65daab2aaf8fc3e54f34b2d468d19486034e06c7 Mon Sep 17 00:00:00 2001
From: Alois Klink 
Date: Mon, 6 Nov 2023 13:57:01 +0000
Subject: [PATCH 209/457] chore: release v10.6.1

Fixes
=====

- Flowchart: Fix a freeze when using a `(` character in an ellipse node
---
 packages/mermaid/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json
index 7d218d4aa6..17f60d879f 100644
--- a/packages/mermaid/package.json
+++ b/packages/mermaid/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mermaid",
-  "version": "10.6.0",
+  "version": "10.6.1",
   "description": "Markdown-ish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
   "type": "module",
   "module": "./dist/mermaid.core.mjs",

From 396ea3cec2e541199c817bd863a8c7b24ee17a8e Mon Sep 17 00:00:00 2001
From: Aakansha Doshi 
Date: Mon, 6 Nov 2023 19:55:53 +0530
Subject: [PATCH 210/457] Update demos/sequence.html

---
 demos/sequence.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/demos/sequence.html b/demos/sequence.html
index d7bce2fef2..3345fed17a 100644
--- a/demos/sequence.html
+++ b/demos/sequence.html
@@ -181,7 +181,7 @@ 
    Sequence diagram demos
    
         flowchart: { curve: 'basis' },
         gantt: { axisFormat: '%m/%d/%Y' },
         sequence: { actorMargin: 50 },
-        // sequenceDiagram: { actorMargin: 300 }, // deprecated
+        // sequenceDiagram: { actorMargin: 300 } // deprecated
       });
     
   

From 6e74e91b5d297160c382a453fc8835433883d91d Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Tue, 7 Nov 2023 05:11:34 +0000
Subject: [PATCH 211/457] chore(deps): update all patch dependencies

---
 packages/mermaid/src/docs/package.json |   2 +-
 pnpm-lock.yaml                         | 105 ++++++-------------------
 2 files changed, 26 insertions(+), 81 deletions(-)

diff --git a/packages/mermaid/src/docs/package.json b/packages/mermaid/src/docs/package.json
index 1845b02c29..87777eb9fe 100644
--- a/packages/mermaid/src/docs/package.json
+++ b/packages/mermaid/src/docs/package.json
@@ -32,7 +32,7 @@
     "unplugin-vue-components": "^0.25.0",
     "vite": "^4.3.9",
     "vite-plugin-pwa": "^0.16.0",
-    "vitepress": "1.0.0-rc.24",
+    "vitepress": "1.0.0-rc.25",
     "workbox-window": "^7.0.0"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c95afd6f56..1106439c89 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -475,8 +475,8 @@ importers:
         specifier: ^0.16.0
         version: 0.16.0(vite@4.4.9)(workbox-build@7.0.0)(workbox-window@7.0.0)
       vitepress:
-        specifier: 1.0.0-rc.24
-        version: 1.0.0-rc.24(@algolia/client-search@4.19.1)(@types/node@18.17.5)(postcss@8.4.31)(search-insights@2.7.0)(typescript@5.1.6)
+        specifier: 1.0.0-rc.25
+        version: 1.0.0-rc.25(@algolia/client-search@4.19.1)(@types/node@18.17.5)(postcss@8.4.31)(search-insights@2.7.0)(typescript@5.1.6)
       workbox-window:
         specifier: ^7.0.0
         version: 7.0.0
@@ -1308,11 +1308,11 @@ packages:
   /@babel/helper-validator-identifier@7.22.20:
     resolution: {integrity: sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==}
     engines: {node: '>=6.9.0'}
-    dev: true
 
   /@babel/helper-validator-identifier@7.22.5:
     resolution: {integrity: sha512-aJXu+6lErq8ltp+JhkJUfk1MTGyuA4v7f3pA+BJ5HLfNC6nAQ0Cpi9uOquUj8Hehg0aUiHzWQbOVJGao6ztBAQ==}
     engines: {node: '>=6.9.0'}
+    dev: true
 
   /@babel/helper-validator-option@7.22.5:
     resolution: {integrity: sha512-R3oB6xlIVKUnxNUxbmgq7pKjxpru24zlimpE8WK47fACIlM0II/Hm1RS8IaOI7NgCr6LNS+jl5l75m20npAziw==}
@@ -1362,7 +1362,7 @@ packages:
     engines: {node: '>=6.0.0'}
     hasBin: true
     dependencies:
-      '@babel/types': 7.22.10
+      '@babel/types': 7.23.0
 
   /@babel/parser@7.23.0:
     resolution: {integrity: sha512-vvPKKdMemU85V9WE/l5wZEmImpCtLqbnTvqDS2U1fJ96KrxoW7KrXhNsNCblQlg8Ck4b85yxdTyelsMUgFUXiw==}
@@ -1370,7 +1370,6 @@ packages:
     hasBin: true
     dependencies:
       '@babel/types': 7.23.0
-    dev: true
 
   /@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@7.22.5(@babel/core@7.22.10):
     resolution: {integrity: sha512-NP1M5Rf+u2Gw9qfSO4ihjcTGW5zXTi36ITLd4/EoAcEhIZ0yjMqmftDNl3QC19CX7olhrjpyU454g/2W7X0jvQ==}
@@ -2282,14 +2281,6 @@ packages:
       - supports-color
     dev: true
 
-  /@babel/types@7.22.10:
-    resolution: {integrity: sha512-obaoigiLrlDZ7TUQln/8m4mSqIW2QFeOrCQc9r+xsaHGNoplVNYlRVpsfE8Vj35GEm2ZH4ZhrNYogs/3fj85kg==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/helper-string-parser': 7.22.5
-      '@babel/helper-validator-identifier': 7.22.5
-      to-fast-properties: 2.0.0
-
   /@babel/types@7.23.0:
     resolution: {integrity: sha512-0oIyUfKoI3mSqMvsxBdclDwxXKXAUA8v/apZbc+iSyARYou1o8ZGDxbUYyLFoW2arqS2jDGqJuZvv1d/io1axg==}
     engines: {node: '>=6.9.0'}
@@ -2297,7 +2288,6 @@ packages:
       '@babel/helper-string-parser': 7.22.5
       '@babel/helper-validator-identifier': 7.22.20
       to-fast-properties: 2.0.0
-    dev: true
 
   /@bcherny/json-schema-ref-parser@9.0.9:
     resolution: {integrity: sha512-vmEmnJCfpkLdas++9OYg6riIezTYqTHpqUTODJzHLzs5UnXujbOJW9VwcVCnyo1mVRt32FRr23iXBx/sX8YbeQ==}
@@ -5269,7 +5259,7 @@ packages:
   /@vitest/snapshot@0.34.0:
     resolution: {integrity: sha512-eGN5XBZHYOghxCOQbf8dcn6/3g7IW77GOOOC/mNFYwRXsPeoQgcgWnhj+6wgJ04pVv25wpxWL9jUkzaQ7LoFtg==}
     dependencies:
-      magic-string: 0.30.4
+      magic-string: 0.30.5
       pathe: 1.1.1
       pretty-format: 29.6.2
     dev: true
@@ -5308,7 +5298,7 @@ packages:
     peerDependencies:
       vue: 3.3.4
     dependencies:
-      '@babel/parser': 7.22.10
+      '@babel/parser': 7.23.0
       estree-walker: 2.0.2
       source-map-js: 1.0.2
       vue: 3.3.4
@@ -5396,11 +5386,11 @@ packages:
   /@vue/reactivity-transform@3.3.4:
     resolution: {integrity: sha512-MXgwjako4nu5WFLAjpBnCj/ieqcjE2aJBINUNQzkZQfzIZA4xn+0fV1tIYBJvvva3N3OvKGofRLvQIwEQPpaXw==}
     dependencies:
-      '@babel/parser': 7.22.10
+      '@babel/parser': 7.23.0
       '@vue/compiler-core': 3.3.4
       '@vue/shared': 3.3.4
       estree-walker: 2.0.2
-      magic-string: 0.30.2
+      magic-string: 0.30.5
 
   /@vue/reactivity-transform@3.3.7:
     resolution: {integrity: sha512-APhRmLVbgE1VPGtoLQoWBJEaQk4V8JUsqrQihImVqKT+8U6Qi3t5ATcg4Y9wGAPb3kIhetpufyZ1RhwbZCIdDA==}
@@ -11805,19 +11795,11 @@ packages:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.4.15
 
-  /magic-string@0.30.4:
-    resolution: {integrity: sha512-Q/TKtsC5BPm0kGqgBIF9oXAs/xEf2vRKiIB4wCRQTJOQIByZ1d+NnUOotvJOvNpi5RNIgVOMC3pOuaP1ZTDlVg==}
-    engines: {node: '>=12'}
-    dependencies:
-      '@jridgewell/sourcemap-codec': 1.4.15
-    dev: true
-
   /magic-string@0.30.5:
     resolution: {integrity: sha512-7xlpfBaQaP/T6Vh8MO/EqXSW5En6INHEvEXQiuff7Gku0PWjU3uf6w/j9o7O+SpB5fOAkrI5HeoNgwjEO0pFsA==}
     engines: {node: '>=12'}
     dependencies:
       '@jridgewell/sourcemap-codec': 1.4.15
-    dev: true
 
   /make-dir@3.1.0:
     resolution: {integrity: sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==}
@@ -13275,29 +13257,29 @@ packages:
       trouter: 2.0.1
     dev: true
 
-  /postcss-import@15.1.0(postcss@8.4.27):
+  /postcss-import@15.1.0(postcss@8.4.31):
     resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
       postcss: ^8.0.0
     dependencies:
-      postcss: 8.4.27
+      postcss: 8.4.31
       postcss-value-parser: 4.2.0
       read-cache: 1.0.0
       resolve: 1.22.4
     dev: false
 
-  /postcss-js@4.0.1(postcss@8.4.27):
+  /postcss-js@4.0.1(postcss@8.4.31):
     resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==}
     engines: {node: ^12 || ^14 || >= 16}
     peerDependencies:
       postcss: ^8.4.21
     dependencies:
       camelcase-css: 2.0.1
-      postcss: 8.4.27
+      postcss: 8.4.31
     dev: false
 
-  /postcss-load-config@4.0.1(postcss@8.4.27)(ts-node@10.9.1):
+  /postcss-load-config@4.0.1(postcss@8.4.31)(ts-node@10.9.1):
     resolution: {integrity: sha512-vEJIc8RdiBRu3oRAI0ymerOn+7rPuMvRXslTvZUKZonDHFIczxztIyJ1urxM1x9JXEikvpWWTUUqal5j/8QgvA==}
     engines: {node: '>= 14'}
     peerDependencies:
@@ -13310,18 +13292,18 @@ packages:
         optional: true
     dependencies:
       lilconfig: 2.1.0
-      postcss: 8.4.27
+      postcss: 8.4.31
       ts-node: 10.9.1(@types/node@18.17.5)(typescript@5.1.6)
       yaml: 2.3.1
     dev: false
 
-  /postcss-nested@6.0.1(postcss@8.4.27):
+  /postcss-nested@6.0.1(postcss@8.4.31):
     resolution: {integrity: sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==}
     engines: {node: '>=12.0'}
     peerDependencies:
       postcss: ^8.2.14
     dependencies:
-      postcss: 8.4.27
+      postcss: 8.4.31
       postcss-selector-parser: 6.0.13
     dev: false
 
@@ -13352,7 +13334,6 @@ packages:
       nanoid: 3.3.6
       picocolors: 1.0.0
       source-map-js: 1.0.2
-    dev: true
 
   /preact@10.16.0:
     resolution: {integrity: sha512-XTSj3dJ4roKIC93pald6rWuB2qQJO9gO2iLLyTe87MrjQN+HklueLsmskbywEWqCHlclgz3/M4YLL2iBr9UmMA==}
@@ -14797,11 +14778,11 @@ packages:
       normalize-path: 3.0.0
       object-hash: 3.0.0
       picocolors: 1.0.0
-      postcss: 8.4.27
-      postcss-import: 15.1.0(postcss@8.4.27)
-      postcss-js: 4.0.1(postcss@8.4.27)
-      postcss-load-config: 4.0.1(postcss@8.4.27)(ts-node@10.9.1)
-      postcss-nested: 6.0.1(postcss@8.4.27)
+      postcss: 8.4.31
+      postcss-import: 15.1.0(postcss@8.4.31)
+      postcss-js: 4.0.1(postcss@8.4.31)
+      postcss-load-config: 4.0.1(postcss@8.4.31)(ts-node@10.9.1)
+      postcss-nested: 6.0.1(postcss@8.4.31)
       postcss-selector-parser: 6.0.13
       resolve: 1.22.4
       sucrase: 3.34.0
@@ -15686,7 +15667,7 @@ packages:
       mlly: 1.4.0
       pathe: 1.1.1
       picocolors: 1.0.0
-      vite: 4.4.11(@types/node@18.17.5)
+      vite: 4.5.0(@types/node@18.17.5)
     transitivePeerDependencies:
       - '@types/node'
       - less
@@ -15730,42 +15711,6 @@ packages:
       - supports-color
     dev: true
 
-  /vite@4.4.11(@types/node@18.17.5):
-    resolution: {integrity: sha512-ksNZJlkcU9b0lBwAGZGGaZHCMqHsc8OpgtoYhsQ4/I2v5cnpmmmqe5pM4nv/4Hn6G/2GhTdj0DhZh2e+Er1q5A==}
-    engines: {node: ^14.18.0 || >=16.0.0}
-    hasBin: true
-    peerDependencies:
-      '@types/node': '>= 14'
-      less: '*'
-      lightningcss: ^1.21.0
-      sass: '*'
-      stylus: '*'
-      sugarss: '*'
-      terser: ^5.4.0
-    peerDependenciesMeta:
-      '@types/node':
-        optional: true
-      less:
-        optional: true
-      lightningcss:
-        optional: true
-      sass:
-        optional: true
-      stylus:
-        optional: true
-      sugarss:
-        optional: true
-      terser:
-        optional: true
-    dependencies:
-      '@types/node': 18.17.5
-      esbuild: 0.18.20
-      postcss: 8.4.27
-      rollup: 3.28.0
-    optionalDependencies:
-      fsevents: 2.3.2
-    dev: true
-
   /vite@4.4.9(@types/node@18.17.5):
     resolution: {integrity: sha512-2mbUn2LlUmNASWwSCNSJ/EG2HuSRTnVNaydp6vMCm5VIqJsjMfbIWtbH2kDuwUVW5mMUKKZvGPX/rqeqVvv1XA==}
     engines: {node: ^14.18.0 || >=16.0.0}
@@ -15832,7 +15777,7 @@ packages:
     dependencies:
       '@types/node': 18.17.5
       esbuild: 0.18.20
-      postcss: 8.4.27
+      postcss: 8.4.31
       rollup: 3.28.0
     optionalDependencies:
       fsevents: 2.3.2
@@ -15886,8 +15831,8 @@ packages:
       - terser
     dev: true
 
-  /vitepress@1.0.0-rc.24(@algolia/client-search@4.19.1)(@types/node@18.17.5)(postcss@8.4.31)(search-insights@2.7.0)(typescript@5.1.6):
-    resolution: {integrity: sha512-RpnL8cnOGwiRlBbrYQUm9sYkJbtyOt/wYXk2diTcokY4yvks/5lq9LuSt+MURWB6ZqwpSNHvTmxgaSfLoG0/OA==}
+  /vitepress@1.0.0-rc.25(@algolia/client-search@4.19.1)(@types/node@18.17.5)(postcss@8.4.31)(search-insights@2.7.0)(typescript@5.1.6):
+    resolution: {integrity: sha512-1dqWiHNThNrVZ08ixmfEDBEH+764KOgnev9oXga/x6cN++Vb9pnuu8p3K6DQP+KZrYcG+WiX7jxal0iSNpAWuQ==}
     hasBin: true
     peerDependencies:
       markdown-it-mathjax3: ^4.3.2

From c117447bb3cfb8fb2f8da26819307506aca7b28c Mon Sep 17 00:00:00 2001
From: Steph <35910788+huynhicode@users.noreply.github.com>
Date: Tue, 7 Nov 2023 00:54:32 -0800
Subject: [PATCH 212/457] add latest blog post

---
 docs/news/announcements.md                      | 8 +++++++-
 docs/news/blog.md                               | 6 ++++++
 packages/mermaid/src/docs/news/announcements.md | 8 +++++++-
 packages/mermaid/src/docs/news/blog.md          | 6 ++++++
 4 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/docs/news/announcements.md b/docs/news/announcements.md
index f80bef6f86..fc9c5c9316 100644
--- a/docs/news/announcements.md
+++ b/docs/news/announcements.md
@@ -6,7 +6,13 @@
 
 # Announcements
 
-Check out our latest blog post below.
+Check out our latest blog posts below.
+
+## [How to Use Mermaid Chart as an AI Diagram Generator](https://www.mermaidchart.com/blog/posts/how-to-use-mermaid-chart-as-an-ai-diagram-generator/)
+
+1 November 2023 · 5 mins
+
+Would an AI diagram generator make your life easier?
 
 ## [Diagrams, Made Even Easier: Introducing “Code Snippets” in the Mermaid Chart Editor](https://www.mermaidchart.com/blog/posts/easier-diagram-editing-with-code-snippets/)
 
diff --git a/docs/news/blog.md b/docs/news/blog.md
index 105c0056be..7c36901293 100644
--- a/docs/news/blog.md
+++ b/docs/news/blog.md
@@ -6,6 +6,12 @@
 
 # Blog
 
+## [How to Use Mermaid Chart as an AI Diagram Generator](https://www.mermaidchart.com/blog/posts/how-to-use-mermaid-chart-as-an-ai-diagram-generator/)
+
+1 November 2023 · 5 mins
+
+Would an AI diagram generator make your life easier?
+
 ## [Diagrams, Made Even Easier: Introducing “Code Snippets” in the Mermaid Chart Editor](https://www.mermaidchart.com/blog/posts/easier-diagram-editing-with-code-snippets/)
 
 12 October 2023 · 4 mins
diff --git a/packages/mermaid/src/docs/news/announcements.md b/packages/mermaid/src/docs/news/announcements.md
index 5ce10cf21c..980d69eb06 100644
--- a/packages/mermaid/src/docs/news/announcements.md
+++ b/packages/mermaid/src/docs/news/announcements.md
@@ -1,6 +1,12 @@
 # Announcements
 
-Check out our latest blog post below.
+Check out our latest blog posts below.
+
+## [How to Use Mermaid Chart as an AI Diagram Generator](https://www.mermaidchart.com/blog/posts/how-to-use-mermaid-chart-as-an-ai-diagram-generator/)
+
+1 November 2023 · 5 mins
+
+Would an AI diagram generator make your life easier?
 
 ## [Diagrams, Made Even Easier: Introducing “Code Snippets” in the Mermaid Chart Editor](https://www.mermaidchart.com/blog/posts/easier-diagram-editing-with-code-snippets/)
 
diff --git a/packages/mermaid/src/docs/news/blog.md b/packages/mermaid/src/docs/news/blog.md
index 6edf00aca8..881cbb7d13 100644
--- a/packages/mermaid/src/docs/news/blog.md
+++ b/packages/mermaid/src/docs/news/blog.md
@@ -1,5 +1,11 @@
 # Blog
 
+## [How to Use Mermaid Chart as an AI Diagram Generator](https://www.mermaidchart.com/blog/posts/how-to-use-mermaid-chart-as-an-ai-diagram-generator/)
+
+1 November 2023 · 5 mins
+
+Would an AI diagram generator make your life easier?
+
 ## [Diagrams, Made Even Easier: Introducing “Code Snippets” in the Mermaid Chart Editor](https://www.mermaidchart.com/blog/posts/easier-diagram-editing-with-code-snippets/)
 
 12 October 2023 · 4 mins

From c9ace33cf15a984a139176a3e2419b1c354d1923 Mon Sep 17 00:00:00 2001
From: dev1 
Date: Wed, 8 Nov 2023 14:39:06 +0700
Subject: [PATCH 213/457] Add new Atlassian integrations

---
 .../mermaid/src/docs/ecosystem/integrations-community.md    | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/mermaid/src/docs/ecosystem/integrations-community.md b/packages/mermaid/src/docs/ecosystem/integrations-community.md
index da53f363fc..92491519b5 100644
--- a/packages/mermaid/src/docs/ecosystem/integrations-community.md
+++ b/packages/mermaid/src/docs/ecosystem/integrations-community.md
@@ -40,6 +40,12 @@ Below are a list of community plugins and integrations created with Mermaid.
   - [Mermaid plugin for GitBook](https://github.com/wwformat/gitbook-plugin-mermaid-pdf)
 - [LiveBook](https://livebook.dev) ✅
 - [Atlassian Products](https://www.atlassian.com)
+  - [Mermaid for Confluence](https://marketplace.atlassian.com/apps/1224722/mermaid-for-confluence?hosting=cloud&tab=overview)
+  - [Mermaid Integration for Confluence](https://marketplace.atlassian.com/apps/1222792/mermaid-integration-for-confluence?hosting=cloud&tab=overview) 
+  - [Mermaid Diagrams for Confluence](https://marketplace.atlassian.com/apps/1226945/mermaid-diagrams-for-confluence?hosting=cloud&tab=overview)
+  - [Mermaid Macro for Confluence](https://marketplace.atlassian.com/apps/1231150/mermaid-macro-for-confluence?hosting=cloud&tab=overview)
+  - [EliteSoft Mermaid Charts and Diagrams](https://marketplace.atlassian.com/apps/1227286/elitesoft-mermaid-charts-and-diagrams?hosting=cloud&tab=overview)
+  - [Mermaid for Jira Cloud - Draw UML diagrams easily](https://marketplace.atlassian.com/apps/1223053/mermaid-for-jira-cloud-draw-uml-diagrams-easily?hosting=cloud&tab=overview)
   - [Mermaid Charts & Diagrams for Confluence](https://marketplace.atlassian.com/apps/1222572/)
   - [Mermaid Charts & Diagrams for Jira](https://marketplace.atlassian.com/apps/1224537/)
   - [Mermaid Live Editor for Confluence Cloud](https://marketplace.atlassian.com/apps/1231571/mermaid-live-editor-for-confluence?hosting=cloud&tab=overview)

From 4952b13ad07ca832e63d4a2c9867d62e7de75c73 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod 
Date: Thu, 9 Nov 2023 02:37:38 +0530
Subject: [PATCH 214/457] fix: Ignore unknown arrow type values

Co-authored-by: Alois Klink 
---
 .../mermaid/src/dagre-wrapper/edgeMarker.ts   | 22 ++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/packages/mermaid/src/dagre-wrapper/edgeMarker.ts b/packages/mermaid/src/dagre-wrapper/edgeMarker.ts
index afce245d53..778a7708d8 100644
--- a/packages/mermaid/src/dagre-wrapper/edgeMarker.ts
+++ b/packages/mermaid/src/dagre-wrapper/edgeMarker.ts
@@ -1,4 +1,5 @@
 import type { SVG } from '../diagram-api/types.js';
+import { log } from '../logger.js';
 import type { EdgeData } from '../types.js';
 /**
  * Adds SVG markers to a path element based on the arrow types specified in the edge.
@@ -24,6 +25,18 @@ export const addEdgeMarkers = (
   }
 };
 
+const arrowTypesMap = {
+  arrow_cross: 'cross',
+  arrow_point: 'point',
+  arrow_barb: 'barb',
+  arrow_circle: 'circle',
+  aggregation: 'aggregation',
+  extension: 'extension',
+  composition: 'composition',
+  dependency: 'dependency',
+  lollipop: 'lollipop',
+} as const;
+
 const addEdgeMarker = (
   svgPath: SVG,
   position: 'start' | 'end',
@@ -32,10 +45,13 @@ const addEdgeMarker = (
   id: string,
   diagramType: string
 ) => {
-  if (arrowType.startsWith('arrow_')) {
-    arrowType = arrowType.replace('arrow_', '');
+  const endMarkerType = arrowTypesMap[arrowType as keyof typeof arrowTypesMap];
+
+  if (!endMarkerType) {
+    log.warn(`Unknown arrow type: ${arrowType}`);
+    return; // unknown arrow type, ignore
   }
 
   const suffix = position === 'start' ? 'Start' : 'End';
-  svgPath.attr(`marker-${position}`, `url(${url}#${id}_${diagramType}-${arrowType}${suffix})`);
+  svgPath.attr(`marker-${position}`, `url(${url}#${id}_${diagramType}-${endMarkerType}${suffix})`);
 };

From 8f572021aff0572e34f3cf4b66697d5515b4e4d9 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod 
Date: Thu, 9 Nov 2023 02:38:48 +0530
Subject: [PATCH 215/457] chore: Add test for invalid marker

---
 packages/mermaid/src/dagre-wrapper/edgeMarker.spec.ts | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/packages/mermaid/src/dagre-wrapper/edgeMarker.spec.ts b/packages/mermaid/src/dagre-wrapper/edgeMarker.spec.ts
index 7a19c29518..658e6d4f43 100644
--- a/packages/mermaid/src/dagre-wrapper/edgeMarker.spec.ts
+++ b/packages/mermaid/src/dagre-wrapper/edgeMarker.spec.ts
@@ -64,4 +64,11 @@ describe('addEdgeMarker', () => {
       `url(${url}#${id}_${diagramType}-compositionEnd)`
     );
   });
+
+  it('should not add invalid markers', () => {
+    const arrowTypeStart = 'this is an invalid marker';
+    const arrowTypeEnd = ') url(https://my-malicious-site.example)';
+    addEdgeMarkers(svgPath, { arrowTypeStart, arrowTypeEnd }, url, id, diagramType);
+    expect(svgPath.attr).not.toHaveBeenCalled();
+  });
 });

From 09d9c31d53978e622540dd10ba6bc7869c01e42b Mon Sep 17 00:00:00 2001
From: Sidharth Vinod 
Date: Thu, 9 Nov 2023 11:36:45 +0530
Subject: [PATCH 216/457] chore: Reset mock in edgeMarker test

---
 packages/mermaid/src/dagre-wrapper/edgeMarker.spec.ts | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/mermaid/src/dagre-wrapper/edgeMarker.spec.ts b/packages/mermaid/src/dagre-wrapper/edgeMarker.spec.ts
index 658e6d4f43..6cfb59fab9 100644
--- a/packages/mermaid/src/dagre-wrapper/edgeMarker.spec.ts
+++ b/packages/mermaid/src/dagre-wrapper/edgeMarker.spec.ts
@@ -1,14 +1,19 @@
+import type { Mocked } from 'vitest';
 import type { SVG } from '../diagram-api/types.js';
 import { addEdgeMarkers } from './edgeMarker.js';
 
 describe('addEdgeMarker', () => {
   const svgPath = {
     attr: vitest.fn(),
-  } as unknown as SVG;
+  } as unknown as Mocked;
   const url = 'http://example.com';
   const id = 'test';
   const diagramType = 'test';
 
+  beforeEach(() => {
+    svgPath.attr.mockReset();
+  });
+
   it('should add markers for arrow_cross:arrow_point', () => {
     const arrowTypeStart = 'arrow_cross';
     const arrowTypeEnd = 'arrow_point';

From 1fa8de2771f19bd210329eb6d2ec67a1d6cd3822 Mon Sep 17 00:00:00 2001
From: Braulio Ruiz 
Date: Sat, 7 Oct 2023 02:22:47 -0600
Subject: [PATCH 217/457] fix: change shiki theme to github-light

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

diff --git a/packages/mermaid/src/docs/.vitepress/config.ts b/packages/mermaid/src/docs/.vitepress/config.ts
index 691ca05651..08222e7e1b 100644
--- a/packages/mermaid/src/docs/.vitepress/config.ts
+++ b/packages/mermaid/src/docs/.vitepress/config.ts
@@ -4,7 +4,7 @@ import { defineConfig, MarkdownOptions } from 'vitepress';
 
 const allMarkdownTransformers: MarkdownOptions = {
   // the shiki theme to highlight code blocks
-  theme: 'github-dark',
+  theme: 'github-light',
   config: async (md) => {
     await MermaidExample(md);
   },

From 8db97008072d752deb94f99a6512c5bb04fd5446 Mon Sep 17 00:00:00 2001
From: Braulio Ruiz 
Date: Wed, 18 Oct 2023 10:38:07 -0600
Subject: [PATCH 218/457] fix: set proper shiki theme for light and dark modes

---
 packages/mermaid/src/docs/.vitepress/config.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/mermaid/src/docs/.vitepress/config.ts b/packages/mermaid/src/docs/.vitepress/config.ts
index 08222e7e1b..c8f294b1cd 100644
--- a/packages/mermaid/src/docs/.vitepress/config.ts
+++ b/packages/mermaid/src/docs/.vitepress/config.ts
@@ -4,7 +4,10 @@ import { defineConfig, MarkdownOptions } from 'vitepress';
 
 const allMarkdownTransformers: MarkdownOptions = {
   // the shiki theme to highlight code blocks
-  theme: 'github-light',
+  theme: {
+    light: 'github-light',
+    dark: 'github-dark'
+  },
   config: async (md) => {
     await MermaidExample(md);
   },

From 007553843192c9336bcc443a83c0c307dca556b2 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod 
Date: Thu, 9 Nov 2023 13:49:42 +0530
Subject: [PATCH 219/457] fix linting

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

diff --git a/packages/mermaid/src/docs/.vitepress/config.ts b/packages/mermaid/src/docs/.vitepress/config.ts
index c8f294b1cd..8601664fa5 100644
--- a/packages/mermaid/src/docs/.vitepress/config.ts
+++ b/packages/mermaid/src/docs/.vitepress/config.ts
@@ -6,7 +6,7 @@ const allMarkdownTransformers: MarkdownOptions = {
   // the shiki theme to highlight code blocks
   theme: {
     light: 'github-light',
-    dark: 'github-dark'
+    dark: 'github-dark',
   },
   config: async (md) => {
     await MermaidExample(md);

From adfb60e045edf50ca04073b9da20e0effc9ccf52 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod 
Date: Thu, 9 Nov 2023 14:03:38 +0530
Subject: [PATCH 220/457] fix typo

---
 docs/ecosystem/integrations-community.md | 6 ++++++
 docs/intro/index.md                      | 2 +-
 docs/syntax/classDiagram.md              | 2 --
 packages/mermaid/src/docs/syntax/c4.md   | 2 +-
 4 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/docs/ecosystem/integrations-community.md b/docs/ecosystem/integrations-community.md
index a14d615b26..e979544cff 100644
--- a/docs/ecosystem/integrations-community.md
+++ b/docs/ecosystem/integrations-community.md
@@ -42,6 +42,12 @@ Below are a list of community plugins and integrations created with Mermaid.
   - [Mermaid plugin for GitBook](https://github.com/wwformat/gitbook-plugin-mermaid-pdf)
 - [LiveBook](https://livebook.dev) ✅
 - [Atlassian Products](https://www.atlassian.com)
+  - [Mermaid for Confluence](https://marketplace.atlassian.com/apps/1224722/mermaid-for-confluence?hosting=cloud&tab=overview)
+  - [Mermaid Integration for Confluence](https://marketplace.atlassian.com/apps/1222792/mermaid-integration-for-confluence?hosting=cloud&tab=overview)
+  - [Mermaid Diagrams for Confluence](https://marketplace.atlassian.com/apps/1226945/mermaid-diagrams-for-confluence?hosting=cloud&tab=overview)
+  - [Mermaid Macro for Confluence](https://marketplace.atlassian.com/apps/1231150/mermaid-macro-for-confluence?hosting=cloud&tab=overview)
+  - [EliteSoft Mermaid Charts and Diagrams](https://marketplace.atlassian.com/apps/1227286/elitesoft-mermaid-charts-and-diagrams?hosting=cloud&tab=overview)
+  - [Mermaid for Jira Cloud - Draw UML diagrams easily](https://marketplace.atlassian.com/apps/1223053/mermaid-for-jira-cloud-draw-uml-diagrams-easily?hosting=cloud&tab=overview)
   - [Mermaid Charts & Diagrams for Confluence](https://marketplace.atlassian.com/apps/1222572/)
   - [Mermaid Charts & Diagrams for Jira](https://marketplace.atlassian.com/apps/1224537/)
   - [Mermaid Live Editor for Confluence Cloud](https://marketplace.atlassian.com/apps/1231571/mermaid-live-editor-for-confluence?hosting=cloud&tab=overview)
diff --git a/docs/intro/index.md b/docs/intro/index.md
index 808465ff19..5a77fa5874 100644
--- a/docs/intro/index.md
+++ b/docs/intro/index.md
@@ -340,7 +340,7 @@ To Deploy Mermaid:
 
 ```
 
-**Doing so commands the mermaid parser to look for the `
    ` or `
    ` tags with `class="mermaid"`. From these tags, mermaid tries read the diagram/chart definitions and render them into SVG charts.**
+**Doing so commands the mermaid parser to look for the `
    ` or `
    ` tags with `class="mermaid"`. From these tags, mermaid tries to read the diagram/chart definitions and render them into SVG charts.**
 
 **Examples can be found in** [Other examples](../syntax/examples.md)
 
diff --git a/docs/syntax/classDiagram.md b/docs/syntax/classDiagram.md
index a6109149a1..2f2c3da888 100644
--- a/docs/syntax/classDiagram.md
+++ b/docs/syntax/classDiagram.md
@@ -425,8 +425,6 @@ And `Link` can be one of:
 
 A namespace groups classes.
 
-Code:
-
 ```mermaid-example
 classDiagram
 namespace BaseShapes {
diff --git a/packages/mermaid/src/docs/syntax/c4.md b/packages/mermaid/src/docs/syntax/c4.md
index be13323ea9..b6ee5fb795 100644
--- a/packages/mermaid/src/docs/syntax/c4.md
+++ b/packages/mermaid/src/docs/syntax/c4.md
@@ -257,7 +257,7 @@ UpdateRelStyle(customerA, bankA, $offsetY="60")
     title Component diagram for Internet Banking System - API Application
 
     Container(spa, "Single Page Application", "javascript and angular", "Provides all the internet banking functionality to customers via their web browser.")
-    Container(ma, "Mobile App", "Xamarin", "Provides a limited subset ot the internet banking functionality to customers via their mobile mobile device.")
+    Container(ma, "Mobile App", "Xamarin", "Provides a limited subset to the internet banking functionality to customers via their mobile mobile device.")
     ContainerDb(db, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
     System_Ext(mbs, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
 

From 72038a68a9ed300a14fbb5fee8d91c938abb54b9 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod 
Date: Thu, 9 Nov 2023 14:06:58 +0530
Subject: [PATCH 221/457] Fix typo

---
 docs/syntax/flowchart.md                                      | 2 +-
 packages/mermaid/src/docs/ecosystem/integrations-community.md | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/syntax/flowchart.md b/docs/syntax/flowchart.md
index 1bdce6aa63..d9ddf0cbe4 100644
--- a/docs/syntax/flowchart.md
+++ b/docs/syntax/flowchart.md
@@ -467,7 +467,7 @@ flowchart TB
     A & B--> C & D
 ```
 
-If you describe the same diagram using the the basic syntax, it will take four lines. A
+If you describe the same diagram using the basic syntax, it will take four lines. A
 word of warning, one could go overboard with this making the flowchart harder to read in
 markdown form. The Swedish word `lagom` comes to mind. It means, not too much and not too little.
 This goes for expressive syntaxes as well.
diff --git a/packages/mermaid/src/docs/ecosystem/integrations-community.md b/packages/mermaid/src/docs/ecosystem/integrations-community.md
index 6a27f102f9..f6ffd908fb 100644
--- a/packages/mermaid/src/docs/ecosystem/integrations-community.md
+++ b/packages/mermaid/src/docs/ecosystem/integrations-community.md
@@ -41,7 +41,7 @@ Below are a list of community plugins and integrations created with Mermaid.
 - [LiveBook](https://livebook.dev) ✅
 - [Atlassian Products](https://www.atlassian.com)
   - [Mermaid for Confluence](https://marketplace.atlassian.com/apps/1224722/mermaid-for-confluence?hosting=cloud&tab=overview)
-  - [Mermaid Integration for Confluence](https://marketplace.atlassian.com/apps/1222792/mermaid-integration-for-confluence?hosting=cloud&tab=overview) 
+  - [Mermaid Integration for Confluence](https://marketplace.atlassian.com/apps/1222792/mermaid-integration-for-confluence?hosting=cloud&tab=overview)
   - [Mermaid Diagrams for Confluence](https://marketplace.atlassian.com/apps/1226945/mermaid-diagrams-for-confluence?hosting=cloud&tab=overview)
   - [Mermaid Macro for Confluence](https://marketplace.atlassian.com/apps/1231150/mermaid-macro-for-confluence?hosting=cloud&tab=overview)
   - [EliteSoft Mermaid Charts and Diagrams](https://marketplace.atlassian.com/apps/1227286/elitesoft-mermaid-charts-and-diagrams?hosting=cloud&tab=overview)

From 4a92fc5c921e6c0df350705ee46407a090d3daea Mon Sep 17 00:00:00 2001
From: Sidharth Vinod 
Date: Thu, 9 Nov 2023 14:20:06 +0530
Subject: [PATCH 222/457] Fix lint

---
 packages/mermaid/src/diagrams/flowchart/flowDb.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/mermaid/src/diagrams/flowchart/flowDb.js b/packages/mermaid/src/diagrams/flowchart/flowDb.js
index f224c9bace..da67248f12 100644
--- a/packages/mermaid/src/diagrams/flowchart/flowDb.js
+++ b/packages/mermaid/src/diagrams/flowchart/flowDb.js
@@ -425,7 +425,7 @@ const setupToolTips = function (element) {
       tooltipElem
         .text(el.attr('title'))
         .style('left', window.scrollX + rect.left + (rect.right - rect.left) / 2 + 'px')
-        .style('top', window.scrollY + rect.bottom  + 'px');
+        .style('top', window.scrollY + rect.bottom + 'px');
       tooltipElem.html(tooltipElem.html().replace(/<br\/>/g, '
    '));
       el.classed('hover', true);
     })

From f47e920a97d0fd70a3213ead996c2485b7368c8f Mon Sep 17 00:00:00 2001
From: Andreas Deininger 
Date: Thu, 9 Nov 2023 12:50:01 +0100
Subject: [PATCH 223/457] Documentation: clarify sentence

---
 packages/mermaid/src/docs/config/configuration.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/mermaid/src/docs/config/configuration.md b/packages/mermaid/src/docs/config/configuration.md
index dcbdcf8757..1eb7836a69 100644
--- a/packages/mermaid/src/docs/config/configuration.md
+++ b/packages/mermaid/src/docs/config/configuration.md
@@ -4,8 +4,8 @@ When mermaid starts, configuration is extracted to determine a configuration to
 
 - The default configuration
 - Overrides at the site level are set by the initialize call, and will be applied to all diagrams in the site/app. The term for this is the **siteConfig**.
-- Frontmatter (v10.5.0+) - diagram authors can update select configuration parameters in the frontmatter of the diagram. These are applied to the render config.
-- Directives (Deprecated by Frontmatter) - diagram authors can update select configuration parameters directly in the diagram code via directives. These are applied to the render config.
+- Frontmatter (v10.5.0+) - diagram authors can update selected configuration parameters in the frontmatter of the diagram. These are applied to the render config.
+- Directives (Deprecated by Frontmatter) - diagram authors can update selected configuration parameters directly in the diagram code via directives. These are applied to the render config.
 
 **The render config** is configuration that is used when rendering by applying these configurations.
 

From fe32bcbf7c373242d824a14b6a9c107830e9bdc0 Mon Sep 17 00:00:00 2001
From: deining 
Date: Thu, 9 Nov 2023 11:55:19 +0000
Subject: [PATCH 224/457] Update docs

---
 docs/config/configuration.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/config/configuration.md b/docs/config/configuration.md
index eb703a9d29..05fcd9d468 100644
--- a/docs/config/configuration.md
+++ b/docs/config/configuration.md
@@ -10,8 +10,8 @@ When mermaid starts, configuration is extracted to determine a configuration to
 
 - The default configuration
 - Overrides at the site level are set by the initialize call, and will be applied to all diagrams in the site/app. The term for this is the **siteConfig**.
-- Frontmatter (v10.5.0+) - diagram authors can update select configuration parameters in the frontmatter of the diagram. These are applied to the render config.
-- Directives (Deprecated by Frontmatter) - diagram authors can update select configuration parameters directly in the diagram code via directives. These are applied to the render config.
+- Frontmatter (v10.5.0+) - diagram authors can update selected configuration parameters in the frontmatter of the diagram. These are applied to the render config.
+- Directives (Deprecated by Frontmatter) - diagram authors can update selected configuration parameters directly in the diagram code via directives. These are applied to the render config.
 
 **The render config** is configuration that is used when rendering by applying these configurations.
 

From 6fb5641afc70916dd335a7a2e6372387bc2d6776 Mon Sep 17 00:00:00 2001
From: Andreas Deininger 
Date: Thu, 9 Nov 2023 12:56:57 +0100
Subject: [PATCH 225/457] Bump GitHub workflow actions to latest versions

---
 .github/workflows/build-docs.yml                  | 4 ++--
 .github/workflows/build.yml                       | 4 ++--
 .github/workflows/check-readme-in-sync.yml        | 2 +-
 .github/workflows/checks.yml                      | 2 +-
 .github/workflows/codeql.yml                      | 2 +-
 .github/workflows/dependency-review.yml           | 4 ++--
 .github/workflows/e2e-applitools.yml              | 4 ++--
 .github/workflows/e2e.yml                         | 4 ++--
 .github/workflows/link-checker.yml                | 2 +-
 .github/workflows/lint.yml                        | 4 ++--
 .github/workflows/pr-labeler-config-validator.yml | 2 +-
 .github/workflows/publish-docs.yml                | 4 ++--
 .github/workflows/release-preview-publish.yml     | 4 ++--
 .github/workflows/release-publish.yml             | 4 ++--
 .github/workflows/test.yml                        | 4 ++--
 .github/workflows/update-browserlist.yml          | 2 +-
 16 files changed, 26 insertions(+), 26 deletions(-)

diff --git a/.github/workflows/build-docs.yml b/.github/workflows/build-docs.yml
index 6fc629c7ae..acfb1887e9 100644
--- a/.github/workflows/build-docs.yml
+++ b/.github/workflows/build-docs.yml
@@ -16,12 +16,12 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - uses: pnpm/action-setup@v2
 
       - name: Setup Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           cache: pnpm
           node-version: 18
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
index eeb557ebb9..605dea9ab3 100644
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -19,13 +19,13 @@ jobs:
       matrix:
         node-version: [18.x]
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
       - uses: pnpm/action-setup@v2
         # uses version from "packageManager" field in package.json
 
       - name: Setup Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           cache: pnpm
           node-version: ${{ matrix.node-version }}
diff --git a/.github/workflows/check-readme-in-sync.yml b/.github/workflows/check-readme-in-sync.yml
index 5a8ca319b2..ad6df66b50 100644
--- a/.github/workflows/check-readme-in-sync.yml
+++ b/.github/workflows/check-readme-in-sync.yml
@@ -18,7 +18,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Check for difference in README.md and docs/README.md
         run: |
diff --git a/.github/workflows/checks.yml b/.github/workflows/checks.yml
index 9f9f316c40..012fbf19d5 100644
--- a/.github/workflows/checks.yml
+++ b/.github/workflows/checks.yml
@@ -15,7 +15,7 @@ jobs:
     name: check tests
     if: github.repository_owner == 'mermaid-js'
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
         with:
           fetch-depth: 0
       - uses: testomatio/check-tests@stable
diff --git a/.github/workflows/codeql.yml b/.github/workflows/codeql.yml
index 26cb2db268..f8c50f47fa 100644
--- a/.github/workflows/codeql.yml
+++ b/.github/workflows/codeql.yml
@@ -29,7 +29,7 @@ jobs:
 
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
diff --git a/.github/workflows/dependency-review.yml b/.github/workflows/dependency-review.yml
index 34b14c395b..4e75197790 100644
--- a/.github/workflows/dependency-review.yml
+++ b/.github/workflows/dependency-review.yml
@@ -1,6 +1,6 @@
 # Dependency Review Action
 #
-# This Action will scan dependency manifest files that change as part of a Pull Reqest, surfacing known-vulnerable versions of the packages declared or updated in the PR. Once installed, if the workflow run is marked as required, PRs introducing known-vulnerable packages will be blocked from merging.
+# This Action will scan dependency manifest files that change as part of a Pull Request, surfacing known-vulnerable versions of the packages declared or updated in the PR. Once installed, if the workflow run is marked as required, PRs introducing known-vulnerable packages will be blocked from merging.
 #
 # Source repository: https://github.com/actions/dependency-review-action
 # Public documentation: https://docs.github.com/en/code-security/supply-chain-security/understanding-your-software-supply-chain/about-dependency-review#dependency-review-enforcement
@@ -15,6 +15,6 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: 'Checkout Repository'
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
       - name: 'Dependency Review'
         uses: actions/dependency-review-action@v3
diff --git a/.github/workflows/e2e-applitools.yml b/.github/workflows/e2e-applitools.yml
index 5b19431421..543fb5dbb4 100644
--- a/.github/workflows/e2e-applitools.yml
+++ b/.github/workflows/e2e-applitools.yml
@@ -30,13 +30,13 @@ jobs:
         run: |
           echo "::error,title=Not using Applitols::APPLITOOLS_API_KEY is empty, disabling Applitools for this run."
 
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
       - uses: pnpm/action-setup@v2
         # uses version from "packageManager" field in package.json
 
       - name: Setup Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
 
diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml
index 3e6966677b..71806a9c46 100644
--- a/.github/workflows/e2e.yml
+++ b/.github/workflows/e2e.yml
@@ -17,13 +17,13 @@ jobs:
         node-version: [18.x]
         containers: [1, 2, 3, 4]
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
       - uses: pnpm/action-setup@v2
         # uses version from "packageManager" field in package.json
 
       - name: Setup Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
 
diff --git a/.github/workflows/link-checker.yml b/.github/workflows/link-checker.yml
index 70580bfff1..c3e2ee44fe 100644
--- a/.github/workflows/link-checker.yml
+++ b/.github/workflows/link-checker.yml
@@ -26,7 +26,7 @@ jobs:
       # lychee only uses the GITHUB_TOKEN to avoid rate-limiting
       contents: read
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
       - name: Restore lychee cache
         uses: actions/cache@v3
diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml
index f59c8af31d..f0c5560a1e 100644
--- a/.github/workflows/lint.yml
+++ b/.github/workflows/lint.yml
@@ -20,13 +20,13 @@ jobs:
       matrix:
         node-version: [18.x]
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
       - uses: pnpm/action-setup@v2
         # uses version from "packageManager" field in package.json
 
       - name: Setup Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           cache: pnpm
           node-version: ${{ matrix.node-version }}
diff --git a/.github/workflows/pr-labeler-config-validator.yml b/.github/workflows/pr-labeler-config-validator.yml
index ff5d8d0a1f..8bdfed21bc 100644
--- a/.github/workflows/pr-labeler-config-validator.yml
+++ b/.github/workflows/pr-labeler-config-validator.yml
@@ -16,7 +16,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout Repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
       - name: Validate Configuration
         uses: Yash-Singh1/pr-labeler-config-validator@releases/v0.0.3
         with:
diff --git a/.github/workflows/publish-docs.yml b/.github/workflows/publish-docs.yml
index f63e587502..05cd68aff1 100644
--- a/.github/workflows/publish-docs.yml
+++ b/.github/workflows/publish-docs.yml
@@ -23,12 +23,12 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - uses: pnpm/action-setup@v2
 
       - name: Setup Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           cache: pnpm
           node-version: 18
diff --git a/.github/workflows/release-preview-publish.yml b/.github/workflows/release-preview-publish.yml
index 221e3836ee..c6503847d9 100644
--- a/.github/workflows/release-preview-publish.yml
+++ b/.github/workflows/release-preview-publish.yml
@@ -9,14 +9,14 @@ jobs:
   publish-preview:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
         with:
           fetch-depth: 0
 
       - uses: pnpm/action-setup@v2
 
       - name: Setup Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           cache: pnpm
           node-version: 18.x
diff --git a/.github/workflows/release-publish.yml b/.github/workflows/release-publish.yml
index eb28fe9c8d..69ef749402 100644
--- a/.github/workflows/release-publish.yml
+++ b/.github/workflows/release-publish.yml
@@ -8,14 +8,14 @@ jobs:
   publish:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - uses: fregante/setup-git-user@v2
 
       - uses: pnpm/action-setup@v2
         # uses version from "packageManager" field in package.json
 
       - name: Setup Node.js v18
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           cache: pnpm
           node-version: 18.x
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index 7c32795e8d..a18b31c9cd 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -12,13 +12,13 @@ jobs:
       matrix:
         node-version: [18.x]
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
       - uses: pnpm/action-setup@v2
         # uses version from "packageManager" field in package.json
 
       - name: Setup Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           cache: pnpm
           node-version: ${{ matrix.node-version }}
diff --git a/.github/workflows/update-browserlist.yml b/.github/workflows/update-browserlist.yml
index 813a400b36..0a83df795d 100644
--- a/.github/workflows/update-browserlist.yml
+++ b/.github/workflows/update-browserlist.yml
@@ -8,7 +8,7 @@ jobs:
   update-browser-list:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - run: npx browserslist@latest --update-db
       - name: Commit changes
         uses: EndBug/add-and-commit@v9

From 01bbcc597af5c20e03847e3fdadc0fe3f9b6b731 Mon Sep 17 00:00:00 2001
From: Aakansha Doshi 
Date: Thu, 9 Nov 2023 17:49:25 +0530
Subject: [PATCH 226/457] draw top actors with lines  first followed by
 messages

---
 .../mermaid/src/diagrams/sequence/sequenceRenderer.ts | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts b/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts
index b8962395ee..7c38a80163 100644
--- a/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts
+++ b/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts
@@ -829,6 +829,11 @@ export const draw = function (_text: string, id: string, _version: string, diagO
     bounds.insert(activationData.startx, verticalPos - 10, activationData.stopx, verticalPos);
   }
 
+  log.debug('createdActors', createdActors);
+  log.debug('destroyedActors', destroyedActors);
+
+  drawActors(diagram, actors, actorKeys, false);
+
   // Draw the messages/signals
   let sequenceIndex = 1;
   let sequenceIndexStep = 1;
@@ -1028,14 +1033,12 @@ export const draw = function (_text: string, id: string, _version: string, diagO
     }
   });
 
-  log.debug('createdActors', createdActors);
-  log.debug('destroyedActors', destroyedActors);
-
-  drawActors(diagram, actors, actorKeys, false);
   messagesToDraw.forEach((e) => drawMessage(diagram, e.messageModel, e.lineStartY, diagObj));
+
   if (conf.mirrorActors) {
     drawActors(diagram, actors, actorKeys, true);
   }
+
   backgrounds.forEach((e) => svgDraw.drawBackgroundRect(diagram, e));
   fixLifeLineHeights(diagram, actors, actorKeys, conf);
 

From a8fe640546fc74f5961c44cb7a92ca9cf1c71e3d Mon Sep 17 00:00:00 2001
From: Justin Greywolf 
Date: Thu, 9 Nov 2023 06:57:51 -0800
Subject: [PATCH 227/457] update edge ids

---
 packages/mermaid/src/diagrams/class/classRenderer-v2.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/mermaid/src/diagrams/class/classRenderer-v2.ts b/packages/mermaid/src/diagrams/class/classRenderer-v2.ts
index 25712153c4..00688d366e 100644
--- a/packages/mermaid/src/diagrams/class/classRenderer-v2.ts
+++ b/packages/mermaid/src/diagrams/class/classRenderer-v2.ts
@@ -231,7 +231,7 @@ export const addRelations = function (relations: ClassRelation[], g: graphlib.Gr
       //Set relationship style and line type
       classes: 'relation',
       pattern: edge.relation.lineType == 1 ? 'dashed' : 'solid',
-      id: 'id' + cnt,
+      id: 'id_' + edge.id1 + '_' + edge.id2 + '_' + cnt,
       // Set link type for rendering
       arrowhead: edge.type === 'arrow_open' ? 'none' : 'normal',
       //Set edge extra labels

From 0f2b941e2d5608df90bfec934180cb8c2a49597a Mon Sep 17 00:00:00 2001
From: Justin Greywolf 
Date: Thu, 9 Nov 2023 08:05:09 -0800
Subject: [PATCH 228/457] Update
 packages/mermaid/src/diagrams/class/classRenderer-v2.ts

Co-authored-by: Sidharth Vinod 
---
 packages/mermaid/src/diagrams/class/classRenderer-v2.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/mermaid/src/diagrams/class/classRenderer-v2.ts b/packages/mermaid/src/diagrams/class/classRenderer-v2.ts
index 00688d366e..97106a169d 100644
--- a/packages/mermaid/src/diagrams/class/classRenderer-v2.ts
+++ b/packages/mermaid/src/diagrams/class/classRenderer-v2.ts
@@ -231,7 +231,7 @@ export const addRelations = function (relations: ClassRelation[], g: graphlib.Gr
       //Set relationship style and line type
       classes: 'relation',
       pattern: edge.relation.lineType == 1 ? 'dashed' : 'solid',
-      id: 'id_' + edge.id1 + '_' + edge.id2 + '_' + cnt,
+      id: `id_${edge.id1}_${edge.id2}_${cnt}`,
       // Set link type for rendering
       arrowhead: edge.type === 'arrow_open' ? 'none' : 'normal',
       //Set edge extra labels

From 3c13386e5dd3cd640bb3203a62d274b7799afc9c Mon Sep 17 00:00:00 2001
From: Sidharth Vinod 
Date: Thu, 9 Nov 2023 23:44:35 +0530
Subject: [PATCH 229/457] Update
 packages/mermaid/src/docs/community/questions-and-suggestions.md

---
 .../mermaid/src/docs/community/questions-and-suggestions.md    | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/mermaid/src/docs/community/questions-and-suggestions.md b/packages/mermaid/src/docs/community/questions-and-suggestions.md
index b18a83ab59..386e3753a1 100644
--- a/packages/mermaid/src/docs/community/questions-and-suggestions.md
+++ b/packages/mermaid/src/docs/community/questions-and-suggestions.md
@@ -5,8 +5,7 @@
 ## First search to see if someone has already asked (and hopefully been answered) or suggested the same thing.
 
 - [Search in Discussions](https://github.com/orgs/mermaid-js/discussions)
-- [Search in open Issues](https://github.com/mermaid-js/mermaid/issues?q=is%3Aopen+is%3Aissue)
-- [Search in closed Issues](https://github.com/mermaid-js/mermaid/issues?q=is%3Aissue+is%3Aclosed)
+- [Search in Issues (Open & Closed)](https://github.com/mermaid-js/mermaid/issues?q=is%3Aissue)
 
 If you find an open issue or discussion thread that is similar to your question but isn't answered, you can let us know that you are also interested in it.
 Use the GitHub reactions to add a thumbs-up to the issue or discussion thread.

From aa5d586bd64c3aa8e42f6ea60bcd22109b8b4083 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod 
Date: Thu, 9 Nov 2023 23:51:12 +0530
Subject: [PATCH 230/457] Fix docs

---
 docs/community/questions-and-suggestions.md | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/docs/community/questions-and-suggestions.md b/docs/community/questions-and-suggestions.md
index 23d6de50f3..badb53a35a 100644
--- a/docs/community/questions-and-suggestions.md
+++ b/docs/community/questions-and-suggestions.md
@@ -10,9 +10,8 @@
 
 ## First search to see if someone has already asked (and hopefully been answered) or suggested the same thing.
 
-- Search in Discussions
-- Search in open Issues
-- Search in closed Issues
+- [Search in Discussions](https://github.com/orgs/mermaid-js/discussions)
+- [Search in Issues (Open & Closed)](https://github.com/mermaid-js/mermaid/issues?q=is%3Aissue)
 
 If you find an open issue or discussion thread that is similar to your question but isn't answered, you can let us know that you are also interested in it.
 Use the GitHub reactions to add a thumbs-up to the issue or discussion thread.

From b134766647a9dea0866a8a704f62071ab0dab0e5 Mon Sep 17 00:00:00 2001
From: Matheus B 
Date: Fri, 10 Nov 2023 21:22:31 -0300
Subject: [PATCH 231/457] Add subgraph title margin config options to schema.

---
 packages/mermaid/src/config.type.ts             |  8 ++++++++
 packages/mermaid/src/schemas/config.schema.yaml | 15 +++++++++++++++
 2 files changed, 23 insertions(+)

diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts
index 82d5e1d008..402d9a4d86 100644
--- a/packages/mermaid/src/config.type.ts
+++ b/packages/mermaid/src/config.type.ts
@@ -1411,6 +1411,14 @@ export interface FlowchartDiagramConfig extends BaseDiagramConfig {
    * Margin top for the text over the diagram
    */
   titleTopMargin?: number;
+  /**
+   * Defines a top/bottom margin for subgraph titles
+   *
+   */
+  subGraphTitleMargin?: {
+    top?: number;
+    bottom?: number;
+  };
   arrowMarkerAbsolute?: boolean;
   /**
    * The amount of padding around the diagram as a whole so that embedded
diff --git a/packages/mermaid/src/schemas/config.schema.yaml b/packages/mermaid/src/schemas/config.schema.yaml
index ee92b4875f..2791c32d4b 100644
--- a/packages/mermaid/src/schemas/config.schema.yaml
+++ b/packages/mermaid/src/schemas/config.schema.yaml
@@ -1863,6 +1863,7 @@ $defs: # JSON Schema definition (maybe we should move these to a separate file)
     unevaluatedProperties: false
     required:
       - titleTopMargin
+      - subGraphTitleMargin
       - diagramPadding
       - htmlLabels
       - nodeSpacing
@@ -1875,6 +1876,20 @@ $defs: # JSON Schema definition (maybe we should move these to a separate file)
       titleTopMargin:
         $ref: '#/$defs/GitGraphDiagramConfig/properties/titleTopMargin'
         default: 25
+      subGraphTitleMargin:
+        description: |
+          Defines a top/bottom margin for subgraph titles
+        type: object
+        properties:
+          top:
+            type: integer
+            minimum: 0
+          bottom:
+            type: integer
+            minimum: 0
+        default:
+          top: 0
+          bottom: 0
       arrowMarkerAbsolute:
         type: boolean # TODO, is this actually used here (it has no default value but was in types)
       diagramPadding:

From 0bcd5d28e80fd26e29402bb048eefa2b65e18109 Mon Sep 17 00:00:00 2001
From: Matheus B 
Date: Fri, 10 Nov 2023 21:30:09 -0300
Subject: [PATCH 232/457] Create helper function for subgraph title margin
 fetching.

---
 packages/mermaid/src/utils.spec.ts            | 22 +++++++++++++++++++
 .../src/utils/getSubGraphTitleMargins.ts      | 17 ++++++++++++++
 2 files changed, 39 insertions(+)
 create mode 100644 packages/mermaid/src/utils/getSubGraphTitleMargins.ts

diff --git a/packages/mermaid/src/utils.spec.ts b/packages/mermaid/src/utils.spec.ts
index 8ccf5b2107..ac06f2b430 100644
--- a/packages/mermaid/src/utils.spec.ts
+++ b/packages/mermaid/src/utils.spec.ts
@@ -1,5 +1,7 @@
 import { vi } from 'vitest';
 import utils, { calculatePoint, cleanAndMerge, detectDirective } from './utils.js';
+import { getSubGraphTitleMargins } from './utils/getSubGraphTitleMargins.js';
+import * as configApi from './config.js';
 import assignWithDepth from './assignWithDepth.js';
 import { detectType } from './diagram-api/detectType.js';
 import { addDiagrams } from './diagram-api/diagram-orchestration.js';
@@ -593,4 +595,24 @@ describe('calculatePoint', () => {
       'Could not find a suitable point for the given distance'
     );
   });
+
+  describe('getSubGraphTitleMargins', () => {
+    it('should get subgraph title margins after config has been set', () => {
+      const config_0 = {
+        flowchart: {
+          subGraphTitleMargin: {
+            top: 10,
+            bottom: 5,
+          },
+        },
+      };
+
+      configApi.setSiteConfig(config_0);
+      expect(getSubGraphTitleMargins()).toEqual({
+        subGraphTitleTopMargin: 10,
+        subGraphTitleBottomMargin: 5,
+        subGraphTitleTotalMargin: 15,
+      });
+    });
+  });
 });
diff --git a/packages/mermaid/src/utils/getSubGraphTitleMargins.ts b/packages/mermaid/src/utils/getSubGraphTitleMargins.ts
new file mode 100644
index 0000000000..35dcaee95a
--- /dev/null
+++ b/packages/mermaid/src/utils/getSubGraphTitleMargins.ts
@@ -0,0 +1,17 @@
+import { getConfig } from '../diagram-api/diagramAPI.js';
+
+export const getSubGraphTitleMargins = (): {
+  subGraphTitleTopMargin: number;
+  subGraphTitleBottomMargin: number;
+  subGraphTitleTotalMargin: number;
+} => {
+  const subGraphTitleTopMargin = getConfig().flowchart?.subGraphTitleMargin?.top || 0;
+  const subGraphTitleBottomMargin = getConfig().flowchart?.subGraphTitleMargin?.bottom || 0;
+  const subGraphTitleTotalMargin = subGraphTitleTopMargin + subGraphTitleBottomMargin;
+
+  return {
+    subGraphTitleTopMargin,
+    subGraphTitleBottomMargin,
+    subGraphTitleTotalMargin,
+  };
+};

From 52ed38719faa3b452cb8b7978dada4319d87c18d Mon Sep 17 00:00:00 2001
From: Matheus B 
Date: Fri, 10 Nov 2023 21:35:58 -0300
Subject: [PATCH 233/457] Fix nesting of getSubGraphTitleMargins test.

---
 packages/mermaid/src/utils.spec.ts | 32 +++++++++++++++---------------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/packages/mermaid/src/utils.spec.ts b/packages/mermaid/src/utils.spec.ts
index ac06f2b430..2442e97b36 100644
--- a/packages/mermaid/src/utils.spec.ts
+++ b/packages/mermaid/src/utils.spec.ts
@@ -595,24 +595,24 @@ describe('calculatePoint', () => {
       'Could not find a suitable point for the given distance'
     );
   });
+});
 
-  describe('getSubGraphTitleMargins', () => {
-    it('should get subgraph title margins after config has been set', () => {
-      const config_0 = {
-        flowchart: {
-          subGraphTitleMargin: {
-            top: 10,
-            bottom: 5,
-          },
+describe('getSubGraphTitleMargins', () => {
+  it('should get subgraph title margins after config has been set', () => {
+    const config_0 = {
+      flowchart: {
+        subGraphTitleMargin: {
+          top: 10,
+          bottom: 5,
         },
-      };
-
-      configApi.setSiteConfig(config_0);
-      expect(getSubGraphTitleMargins()).toEqual({
-        subGraphTitleTopMargin: 10,
-        subGraphTitleBottomMargin: 5,
-        subGraphTitleTotalMargin: 15,
-      });
+      },
+    };
+
+    configApi.setSiteConfig(config_0);
+    expect(getSubGraphTitleMargins()).toEqual({
+      subGraphTitleTopMargin: 10,
+      subGraphTitleBottomMargin: 5,
+      subGraphTitleTotalMargin: 15,
     });
   });
 });

From 8b0a5be6d9cca6cbf20dff95d84501bf84dccc79 Mon Sep 17 00:00:00 2001
From: Matheus B 
Date: Sat, 11 Nov 2023 18:18:51 -0300
Subject: [PATCH 234/457] Include subgraph margin into label positioning

---
 packages/mermaid/src/dagre-wrapper/clusters.js | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/packages/mermaid/src/dagre-wrapper/clusters.js b/packages/mermaid/src/dagre-wrapper/clusters.js
index 5c6e5a4e05..0786b35e05 100644
--- a/packages/mermaid/src/dagre-wrapper/clusters.js
+++ b/packages/mermaid/src/dagre-wrapper/clusters.js
@@ -5,6 +5,7 @@ import { createText } from '../rendering-util/createText.js';
 import { select } from 'd3';
 import { getConfig } from '../diagram-api/diagramAPI.js';
 import { evaluate } from '../diagrams/common/common.js';
+import { getSubGraphTitleMargins } from '../utils/getSubGraphTitleMargins.js';
 
 const rect = (parent, node) => {
   log.info('Creating subgraph rect for ', node.id, node);
@@ -63,17 +64,22 @@ const rect = (parent, node) => {
     .attr('width', width)
     .attr('height', node.height + padding);
 
+  const { subGraphTitleTopMargin } = getSubGraphTitleMargins();
   if (useHtmlLabels) {
     label.attr(
       'transform',
       // This puts the labal on top of the box instead of inside it
-      'translate(' + (node.x - bbox.width / 2) + ', ' + (node.y - node.height / 2) + ')'
+      'translate(' +
+        (node.x - bbox.width / 2) +
+        ', ' +
+        (node.y - node.height / 2 + subGraphTitleTopMargin) +
+        ')'
     );
   } else {
     label.attr(
       'transform',
       // This puts the labal on top of the box instead of inside it
-      'translate(' + node.x + ', ' + (node.y - node.height / 2) + ')'
+      'translate(' + node.x + ', ' + (node.y - node.height / 2 + subGraphTitleTopMargin) + ')'
     );
   }
   // Center the label
@@ -175,6 +181,7 @@ const roundedWithTitle = (parent, node) => {
     .attr('width', width + padding)
     .attr('height', node.height + padding - bbox.height - 3);
 
+  const { subGraphTitleTopMargin } = getSubGraphTitleMargins();
   // Center the label
   label.attr(
     'transform',
@@ -185,6 +192,7 @@ const roundedWithTitle = (parent, node) => {
         node.height / 2 -
         node.padding / 3 +
         (evaluate(getConfig().flowchart.htmlLabels) ? 5 : 3)) +
+      subGraphTitleTopMargin +
       ')'
   );
 

From 56c3809b5724428741f07a9ae627cb940e861510 Mon Sep 17 00:00:00 2001
From: Matheus B 
Date: Sun, 12 Nov 2023 17:32:58 -0300
Subject: [PATCH 235/457] Add logic to add subgraph title margin on layout

---
 packages/mermaid/src/dagre-wrapper/edges.js |  5 +++++
 packages/mermaid/src/dagre-wrapper/index.js | 12 +++++++++++-
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/packages/mermaid/src/dagre-wrapper/edges.js b/packages/mermaid/src/dagre-wrapper/edges.js
index ced9a3bc2c..62a929e37c 100644
--- a/packages/mermaid/src/dagre-wrapper/edges.js
+++ b/packages/mermaid/src/dagre-wrapper/edges.js
@@ -6,6 +6,7 @@ import { getConfig } from '../diagram-api/diagramAPI.js';
 import utils from '../utils.js';
 import { evaluate } from '../diagrams/common/common.js';
 import { getLineFunctionsWithOffset } from '../utils/lineWithOffset.js';
+import { getSubGraphTitleMargins } from '../utils/getSubGraphTitleMargins.js';
 
 let edgeLabels = {};
 let terminalLabels = {};
@@ -263,6 +264,7 @@ export const intersection = (node, outsidePoint, insidePoint) => {
 
   const Q = Math.abs(outsidePoint.y - insidePoint.y);
   const R = Math.abs(outsidePoint.x - insidePoint.x);
+  const { subGraphTitleTotalMargin } = getSubGraphTitleMargins();
   // log.warn();
   if (Math.abs(y - outsidePoint.y) * w > Math.abs(x - outsidePoint.x) * h) {
     // Intersection is top or bottom of rect.
@@ -280,6 +282,9 @@ export const intersection = (node, outsidePoint, insidePoint) => {
     }
     if (R === 0) {
       res.x = outsidePoint.x;
+      if (q && subGraphTitleTotalMargin) {
+        res.y = insidePoint.y < outsidePoint.y ? y + h : y - h;
+      }
     }
     if (Q === 0) {
       res.y = outsidePoint.y;
diff --git a/packages/mermaid/src/dagre-wrapper/index.js b/packages/mermaid/src/dagre-wrapper/index.js
index 9843adb8b0..7ebb9dc494 100644
--- a/packages/mermaid/src/dagre-wrapper/index.js
+++ b/packages/mermaid/src/dagre-wrapper/index.js
@@ -13,6 +13,9 @@ import { insertNode, positionNode, clear as clearNodes, setNodeElem } from './no
 import { insertCluster, clear as clearClusters } from './clusters.js';
 import { insertEdgeLabel, positionEdgeLabel, insertEdge, clear as clearEdges } from './edges.js';
 import { log } from '../logger.js';
+import { getSubGraphTitleMargins } from '../utils/getSubGraphTitleMargins.js';
+
+const { subGraphTitleTotalMargin } = getSubGraphTitleMargins();
 
 const recursiveRender = async (_elem, graph, diagramtype, id, parentCluster) => {
   log.info('Graph in recursive render: XXX', graphlibJson.write(graph), parentCluster);
@@ -114,13 +117,20 @@ const recursiveRender = async (_elem, graph, diagramtype, id, parentCluster) =>
     );
     if (node && node.clusterNode) {
       // clusterDb[node.id].node = node;
-
+      node.y += subGraphTitleTotalMargin;
       positionNode(node);
     } else {
       // Non cluster node
       if (graph.children(v).length > 0) {
         // A cluster in the non-recursive way
         // positionCluster(node);
+        node.height += subGraphTitleTotalMargin * 2;
+        graph.children(v).forEach((c) => {
+          if (!clusterDb[c]) return;
+          if (!clusterDb[c].clusterData) {
+            node.height += subGraphTitleTotalMargin * 2;
+          }
+        });
         insertCluster(clusters, node);
         clusterDb[node.id].node = node;
       } else {

From adff22c1e2f5c73a1dd0f7b3c8b39fc7c5cb57d9 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Mon, 13 Nov 2023 17:15:43 +0000
Subject: [PATCH 236/457] Update all patch dependencies

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 098e91c30d..d2ca53ce02 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
   "version": "10.2.4",
   "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
   "type": "module",
-  "packageManager": "pnpm@8.10.2",
+  "packageManager": "pnpm@8.10.4",
   "keywords": [
     "diagram",
     "markdown",

From aadf5339a446cc824e9f77fd899e0813a5c87c61 Mon Sep 17 00:00:00 2001
From: RounakJoshi09 
Date: Fri, 17 Nov 2023 09:51:03 +0530
Subject: [PATCH 237/457] Error Hash Removed

---
 packages/mermaid/src/diagrams/git/gitGraphAst.js | 12 ------------
 1 file changed, 12 deletions(-)

diff --git a/packages/mermaid/src/diagrams/git/gitGraphAst.js b/packages/mermaid/src/diagrams/git/gitGraphAst.js
index da7f4151e7..56f48c6d39 100644
--- a/packages/mermaid/src/diagrams/git/gitGraphAst.js
+++ b/packages/mermaid/src/diagrams/git/gitGraphAst.js
@@ -282,24 +282,12 @@ export const cherryPick = function (sourceId, targetId, tag, parentCommitId) {
       let error = new Error(
         'Incorrect usage of cherry-pick: If the source commit is a merge commit, an immediate parent commit must be specified.'
       );
-      error.hash = {
-        text: `cherryPick ${sourceId} ${targetId}`,
-        token: `cherryPick ${sourceId} ${targetId}`,
-        line: '1',
-        loc: { first_line: 1, last_line: 1, first_column: 1, last_column: 1 },
-      };
       throw error;
     }
     if (!(Array.isArray(sourceCommit.parents) && sourceCommit.parents.includes(parentCommitId))) {
       let error = new Error(
         'Invalid operation: The specified parent commit is not an immediate parent of the cherry-picked commit.'
       );
-      error.hash = {
-        text: `cherryPick ${sourceId} ${targetId}`,
-        token: `cherryPick ${sourceId} ${targetId}`,
-        line: '1',
-        loc: { first_line: 1, last_line: 1, first_column: 1, last_column: 1 },
-      };
       throw error;
     }
   }

From 453c16d08e2449eb779583bda8afa44b3840c584 Mon Sep 17 00:00:00 2001
From: Matheus B 
Date: Fri, 17 Nov 2023 20:20:13 -0300
Subject: [PATCH 238/457] Remove unnecessary code

---
 packages/mermaid/src/dagre-wrapper/edges.js | 5 -----
 packages/mermaid/src/dagre-wrapper/index.js | 6 ------
 2 files changed, 11 deletions(-)

diff --git a/packages/mermaid/src/dagre-wrapper/edges.js b/packages/mermaid/src/dagre-wrapper/edges.js
index 62a929e37c..ced9a3bc2c 100644
--- a/packages/mermaid/src/dagre-wrapper/edges.js
+++ b/packages/mermaid/src/dagre-wrapper/edges.js
@@ -6,7 +6,6 @@ import { getConfig } from '../diagram-api/diagramAPI.js';
 import utils from '../utils.js';
 import { evaluate } from '../diagrams/common/common.js';
 import { getLineFunctionsWithOffset } from '../utils/lineWithOffset.js';
-import { getSubGraphTitleMargins } from '../utils/getSubGraphTitleMargins.js';
 
 let edgeLabels = {};
 let terminalLabels = {};
@@ -264,7 +263,6 @@ export const intersection = (node, outsidePoint, insidePoint) => {
 
   const Q = Math.abs(outsidePoint.y - insidePoint.y);
   const R = Math.abs(outsidePoint.x - insidePoint.x);
-  const { subGraphTitleTotalMargin } = getSubGraphTitleMargins();
   // log.warn();
   if (Math.abs(y - outsidePoint.y) * w > Math.abs(x - outsidePoint.x) * h) {
     // Intersection is top or bottom of rect.
@@ -282,9 +280,6 @@ export const intersection = (node, outsidePoint, insidePoint) => {
     }
     if (R === 0) {
       res.x = outsidePoint.x;
-      if (q && subGraphTitleTotalMargin) {
-        res.y = insidePoint.y < outsidePoint.y ? y + h : y - h;
-      }
     }
     if (Q === 0) {
       res.y = outsidePoint.y;
diff --git a/packages/mermaid/src/dagre-wrapper/index.js b/packages/mermaid/src/dagre-wrapper/index.js
index 7ebb9dc494..bb14b91da5 100644
--- a/packages/mermaid/src/dagre-wrapper/index.js
+++ b/packages/mermaid/src/dagre-wrapper/index.js
@@ -125,12 +125,6 @@ const recursiveRender = async (_elem, graph, diagramtype, id, parentCluster) =>
         // A cluster in the non-recursive way
         // positionCluster(node);
         node.height += subGraphTitleTotalMargin * 2;
-        graph.children(v).forEach((c) => {
-          if (!clusterDb[c]) return;
-          if (!clusterDb[c].clusterData) {
-            node.height += subGraphTitleTotalMargin * 2;
-          }
-        });
         insertCluster(clusters, node);
         clusterDb[node.id].node = node;
       } else {

From 7e77433ef789670f6791f5e14dc22b54f53abd15 Mon Sep 17 00:00:00 2001
From: Matheus B 
Date: Fri, 17 Nov 2023 20:49:54 -0300
Subject: [PATCH 239/457] Add tests for subgraph title margin

---
 .../rendering/flowchart-v2.spec.js            | 68 +++++++++++++++++++
 1 file changed, 68 insertions(+)

diff --git a/cypress/integration/rendering/flowchart-v2.spec.js b/cypress/integration/rendering/flowchart-v2.spec.js
index aac4a31b17..7006281514 100644
--- a/cypress/integration/rendering/flowchart-v2.spec.js
+++ b/cypress/integration/rendering/flowchart-v2.spec.js
@@ -874,4 +874,72 @@ end
       });
     });
   });
+  describe('Subgraph title margins', () => {
+    it('Should render subgraphs with title margins set (LR)', () => {
+      imgSnapshotTest(
+        `flowchart LR
+
+          subgraph TOP
+              direction TB
+              subgraph B1
+                  direction RL
+                  i1 -->f1
+              end
+              subgraph B2
+                  direction BT
+                  i2 -->f2
+              end
+          end
+          A --> TOP --> B
+          B1 --> B2
+        `,
+        { flowchart: { subGraphTitleMargin: { top: 10, bottom: 5 } } }
+      );
+    });
+    it('Should render subgraphs with title margins set (TD)', () => {
+      imgSnapshotTest(
+        `flowchart TD
+
+          subgraph TOP
+              direction LR
+              subgraph B1
+                  direction RL
+                  i1 -->f1
+              end
+              subgraph B2
+                  direction BT
+                  i2 -->f2
+              end
+          end
+          A --> TOP --> B
+          B1 --> B2
+        `,
+        { flowchart: { subGraphTitleMargin: { top: 8, bottom: 16 } } }
+      );
+    });
+    it('Should render subgraphs with title margins set (LR) and htmlLabels set to false', () => {
+      imgSnapshotTest(
+        `flowchart LR
+
+          subgraph TOP
+              direction TB
+              subgraph B1
+                  direction RL
+                  i1 -->f1
+              end
+              subgraph B2
+                  direction BT
+                  i2 -->f2
+              end
+          end
+          A --> TOP --> B
+          B1 --> B2
+        `,
+        {
+          htmlLabels: false,
+          flowchart: { htmlLabels: false, subGraphTitleMargin: { top: 10, bottom: 5 } },
+        }
+      );
+    });
+  });
 });

From a1c0761ef93728b6c32474deb72665315ab86f87 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Mon, 20 Nov 2023 01:43:47 +0000
Subject: [PATCH 240/457] Update all minor dependencies

---
 packages/mermaid/src/docs/package.json |  4 +--
 pnpm-lock.yaml                         | 35 +++++++++++++++++---------
 2 files changed, 25 insertions(+), 14 deletions(-)

diff --git a/packages/mermaid/src/docs/package.json b/packages/mermaid/src/docs/package.json
index 87777eb9fe..af7f69b2e0 100644
--- a/packages/mermaid/src/docs/package.json
+++ b/packages/mermaid/src/docs/package.json
@@ -23,7 +23,7 @@
   "devDependencies": {
     "@iconify-json/carbon": "^1.1.16",
     "@unocss/reset": "^0.57.0",
-    "@vite-pwa/vitepress": "^0.2.0",
+    "@vite-pwa/vitepress": "^0.3.0",
     "@vitejs/plugin-vue": "^4.2.1",
     "fast-glob": "^3.2.12",
     "https-localhost": "^4.7.1",
@@ -31,7 +31,7 @@
     "unocss": "^0.57.0",
     "unplugin-vue-components": "^0.25.0",
     "vite": "^4.3.9",
-    "vite-plugin-pwa": "^0.16.0",
+    "vite-plugin-pwa": "^0.17.0",
     "vitepress": "1.0.0-rc.25",
     "workbox-window": "^7.0.0"
   }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1106439c89..22dc07b7c7 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -448,8 +448,8 @@ importers:
         specifier: ^0.57.0
         version: 0.57.1
       '@vite-pwa/vitepress':
-        specifier: ^0.2.0
-        version: 0.2.0(vite-plugin-pwa@0.16.0)
+        specifier: ^0.3.0
+        version: 0.3.0(vite-plugin-pwa@0.17.0)
       '@vitejs/plugin-vue':
         specifier: ^4.2.1
         version: 4.2.1(vite@4.4.9)(vue@3.3.4)
@@ -472,8 +472,8 @@ importers:
         specifier: ^4.3.9
         version: 4.4.9(@types/node@18.17.5)
       vite-plugin-pwa:
-        specifier: ^0.16.0
-        version: 0.16.0(vite@4.4.9)(workbox-build@7.0.0)(workbox-window@7.0.0)
+        specifier: ^0.17.0
+        version: 0.17.0(vite@4.4.9)(workbox-build@7.0.0)(workbox-window@7.0.0)
       vitepress:
         specifier: 1.0.0-rc.25
         version: 1.0.0-rc.25(@algolia/client-search@4.19.1)(@types/node@18.17.5)(postcss@8.4.31)(search-insights@2.7.0)(typescript@5.1.6)
@@ -5178,12 +5178,12 @@ packages:
       - rollup
     dev: true
 
-  /@vite-pwa/vitepress@0.2.0(vite-plugin-pwa@0.16.0):
-    resolution: {integrity: sha512-dVQVaP6NB9woCFe4UASUqRp7uwBQJOVXlJlqK4krqXcbb3NuXIXIWOnU7HLpJnHqZj5U/81gKtLN6gs5gJBwiQ==}
+  /@vite-pwa/vitepress@0.3.0(vite-plugin-pwa@0.17.0):
+    resolution: {integrity: sha512-7akiTt0laHJRSJ7lxPttGHYBoC2J+FgWJr0TGYQd2jPe/8nou+YSDwBGpOV+/qeobX2uzff8kew02n/07JRe9Q==}
     peerDependencies:
-      vite-plugin-pwa: '>=0.16.3 <1'
+      vite-plugin-pwa: '>=0.17.0 <1'
     dependencies:
-      vite-plugin-pwa: 0.16.0(vite@4.4.9)(workbox-build@7.0.0)(workbox-window@7.0.0)
+      vite-plugin-pwa: 0.17.0(vite@4.4.9)(workbox-build@7.0.0)(workbox-window@7.0.0)
     dev: true
 
   /@vitejs/plugin-vue@4.2.1(vite@4.4.9)(vue@3.3.4):
@@ -9189,6 +9189,17 @@ packages:
       merge2: 1.4.1
       micromatch: 4.0.5
 
+  /fast-glob@3.3.2:
+    resolution: {integrity: sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==}
+    engines: {node: '>=8.6.0'}
+    dependencies:
+      '@nodelib/fs.stat': 2.0.5
+      '@nodelib/fs.walk': 1.2.8
+      glob-parent: 5.1.2
+      merge2: 1.4.1
+      micromatch: 4.0.5
+    dev: true
+
   /fast-json-stable-stringify@2.1.0:
     resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==}
     dev: true
@@ -15693,16 +15704,16 @@ packages:
       - supports-color
     dev: true
 
-  /vite-plugin-pwa@0.16.0(vite@4.4.9)(workbox-build@7.0.0)(workbox-window@7.0.0):
-    resolution: {integrity: sha512-E+AQRzHxqNU4ZhEeR8X37/foZB+ezJEhXauE/mcf1UITY6k2Pa1dtlFl+BQu57fTdiVlWim5S0Qy44Yap93Dkg==}
+  /vite-plugin-pwa@0.17.0(vite@4.4.9)(workbox-build@7.0.0)(workbox-window@7.0.0):
+    resolution: {integrity: sha512-cOyEG8EEc7JHmyMapTnjK2j0g2BIC3ErlmOHyGzVu8hqjyF9Jt6yWMmVNFtpA6v/NNyzP28ARf3vwzIAzR1kaw==}
     engines: {node: '>=16.0.0'}
     peerDependencies:
-      vite: ^3.1.0 || ^4.0.0
+      vite: ^3.1.0 || ^4.0.0 || ^5.0.0
       workbox-build: ^7.0.0
       workbox-window: ^7.0.0
     dependencies:
       debug: 4.3.4(supports-color@8.1.1)
-      fast-glob: 3.2.12
+      fast-glob: 3.3.2
       pretty-bytes: 6.1.1
       vite: 4.4.9(@types/node@18.17.5)
       workbox-build: 7.0.0

From 8405454a1ae5bf449a55d81c2aca9e12dafb9f5d Mon Sep 17 00:00:00 2001
From: Steph <35910788+huynhicode@users.noreply.github.com>
Date: Sun, 19 Nov 2023 20:32:20 -0800
Subject: [PATCH 241/457] add latest blog post

---
 docs/news/announcements.md                      | 14 ++++----------
 docs/news/blog.md                               |  6 ++++++
 packages/mermaid/src/docs/news/announcements.md | 14 ++++----------
 packages/mermaid/src/docs/news/blog.md          |  6 ++++++
 4 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/docs/news/announcements.md b/docs/news/announcements.md
index fc9c5c9316..79e32f2f01 100644
--- a/docs/news/announcements.md
+++ b/docs/news/announcements.md
@@ -6,16 +6,10 @@
 
 # Announcements
 
-Check out our latest blog posts below.
+Check out our latest blog posts below. See more blog posts [here](blog.md).
 
-## [How to Use Mermaid Chart as an AI Diagram Generator](https://www.mermaidchart.com/blog/posts/how-to-use-mermaid-chart-as-an-ai-diagram-generator/)
+## [5 Reasons You Should Be Using Mermaid Chart As Your Diagram Generator](https://www.mermaidchart.com/blog/posts/5-reasons-you-should-be-using-mermaid-chart-as-your-diagram-generator/)
 
-1 November 2023 · 5 mins
+14 November 2023 · 5 mins
 
-Would an AI diagram generator make your life easier?
-
-## [Diagrams, Made Even Easier: Introducing “Code Snippets” in the Mermaid Chart Editor](https://www.mermaidchart.com/blog/posts/easier-diagram-editing-with-code-snippets/)
-
-12 October 2023 · 4 mins
-
-Mermaid Chart introduces Code Snippets in its editor, streamlining the diagramming process for developers and professionals.
+Mermaid Chart, a user-friendly, code-based diagram generator with AI integrations, templates, collaborative tools, and plugins for developers, streamlines the process of creating and sharing diagrams, enhancing both creativity and collaboration.
diff --git a/docs/news/blog.md b/docs/news/blog.md
index 7c36901293..da20ed1bb6 100644
--- a/docs/news/blog.md
+++ b/docs/news/blog.md
@@ -6,6 +6,12 @@
 
 # Blog
 
+## [5 Reasons You Should Be Using Mermaid Chart As Your Diagram Generator](https://www.mermaidchart.com/blog/posts/5-reasons-you-should-be-using-mermaid-chart-as-your-diagram-generator/)
+
+14 November 2023 · 5 mins
+
+Mermaid Chart, a user-friendly, code-based diagram generator with AI integrations, templates, collaborative tools, and plugins for developers, streamlines the process of creating and sharing diagrams, enhancing both creativity and collaboration.
+
 ## [How to Use Mermaid Chart as an AI Diagram Generator](https://www.mermaidchart.com/blog/posts/how-to-use-mermaid-chart-as-an-ai-diagram-generator/)
 
 1 November 2023 · 5 mins
diff --git a/packages/mermaid/src/docs/news/announcements.md b/packages/mermaid/src/docs/news/announcements.md
index 980d69eb06..7093d6fba0 100644
--- a/packages/mermaid/src/docs/news/announcements.md
+++ b/packages/mermaid/src/docs/news/announcements.md
@@ -1,15 +1,9 @@
 # Announcements
 
-Check out our latest blog posts below.
+Check out our latest blog posts below. See more blog posts [here](blog.md).
 
-## [How to Use Mermaid Chart as an AI Diagram Generator](https://www.mermaidchart.com/blog/posts/how-to-use-mermaid-chart-as-an-ai-diagram-generator/)
+## [5 Reasons You Should Be Using Mermaid Chart As Your Diagram Generator](https://www.mermaidchart.com/blog/posts/5-reasons-you-should-be-using-mermaid-chart-as-your-diagram-generator/)
 
-1 November 2023 · 5 mins
+14 November 2023 · 5 mins
 
-Would an AI diagram generator make your life easier?
-
-## [Diagrams, Made Even Easier: Introducing “Code Snippets” in the Mermaid Chart Editor](https://www.mermaidchart.com/blog/posts/easier-diagram-editing-with-code-snippets/)
-
-12 October 2023 · 4 mins
-
-Mermaid Chart introduces Code Snippets in its editor, streamlining the diagramming process for developers and professionals.
+Mermaid Chart, a user-friendly, code-based diagram generator with AI integrations, templates, collaborative tools, and plugins for developers, streamlines the process of creating and sharing diagrams, enhancing both creativity and collaboration.
diff --git a/packages/mermaid/src/docs/news/blog.md b/packages/mermaid/src/docs/news/blog.md
index 881cbb7d13..d9bf6a8b72 100644
--- a/packages/mermaid/src/docs/news/blog.md
+++ b/packages/mermaid/src/docs/news/blog.md
@@ -1,5 +1,11 @@
 # Blog
 
+## [5 Reasons You Should Be Using Mermaid Chart As Your Diagram Generator](https://www.mermaidchart.com/blog/posts/5-reasons-you-should-be-using-mermaid-chart-as-your-diagram-generator/)
+
+14 November 2023 · 5 mins
+
+Mermaid Chart, a user-friendly, code-based diagram generator with AI integrations, templates, collaborative tools, and plugins for developers, streamlines the process of creating and sharing diagrams, enhancing both creativity and collaboration.
+
 ## [How to Use Mermaid Chart as an AI Diagram Generator](https://www.mermaidchart.com/blog/posts/how-to-use-mermaid-chart-as-an-ai-diagram-generator/)
 
 1 November 2023 · 5 mins

From cbc97dacdf9adc6f8c7d493341a27fce3768e7f0 Mon Sep 17 00:00:00 2001
From: Steph <35910788+huynhicode@users.noreply.github.com>
Date: Sun, 19 Nov 2023 20:39:18 -0800
Subject: [PATCH 242/457] fix broken link

---
 docs/ecosystem/integrations-community.md                      | 2 +-
 packages/mermaid/src/docs/ecosystem/integrations-community.md | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/ecosystem/integrations-community.md b/docs/ecosystem/integrations-community.md
index 4d79ce244e..00d482fee9 100644
--- a/docs/ecosystem/integrations-community.md
+++ b/docs/ecosystem/integrations-community.md
@@ -171,7 +171,7 @@ Communication tools and platforms
 ### Document Generation
 
 - [Docusaurus](https://docusaurus.io/docs/markdown-features/diagrams) ✅
-- [Swimm - Up-to-date diagrams with Swimm, the knowledge management tool for code](https://docs.swimm.io/Features/diagrams-and-charts)
+- [Swimm - Up-to-date diagrams with Swimm, the knowledge management tool for code](https://docs.swimm.io/features/diagrams-and-charts/#mermaid--swimm--up-to-date-diagrams-)
 - [Sphinx](https://www.sphinx-doc.org/en/master/)
   - [sphinxcontrib-mermaid](https://github.com/mgaitan/sphinxcontrib-mermaid)
 - [remark](https://remark.js.org/)
diff --git a/packages/mermaid/src/docs/ecosystem/integrations-community.md b/packages/mermaid/src/docs/ecosystem/integrations-community.md
index da53f363fc..6ad8945d32 100644
--- a/packages/mermaid/src/docs/ecosystem/integrations-community.md
+++ b/packages/mermaid/src/docs/ecosystem/integrations-community.md
@@ -169,7 +169,7 @@ Communication tools and platforms
 ### Document Generation
 
 - [Docusaurus](https://docusaurus.io/docs/markdown-features/diagrams) ✅
-- [Swimm - Up-to-date diagrams with Swimm, the knowledge management tool for code](https://docs.swimm.io/Features/diagrams-and-charts)
+- [Swimm - Up-to-date diagrams with Swimm, the knowledge management tool for code](https://docs.swimm.io/features/diagrams-and-charts/#mermaid--swimm--up-to-date-diagrams-)
 - [Sphinx](https://www.sphinx-doc.org/en/master/)
   - [sphinxcontrib-mermaid](https://github.com/mgaitan/sphinxcontrib-mermaid)
 - [remark](https://remark.js.org/)

From 3ba0fee40670e65e3ddea5c95d60afd6ac8a245b Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Mon, 20 Nov 2023 09:56:45 +0000
Subject: [PATCH 243/457] Update all patch dependencies

---
 package.json                           |   2 +-
 packages/mermaid/src/docs/package.json |   2 +-
 pnpm-lock.yaml                         | 566 +++++++++++++++++++++++--
 3 files changed, 523 insertions(+), 47 deletions(-)

diff --git a/package.json b/package.json
index d2ca53ce02..1b8a120f5d 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
   "version": "10.2.4",
   "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
   "type": "module",
-  "packageManager": "pnpm@8.10.4",
+  "packageManager": "pnpm@8.10.5",
   "keywords": [
     "diagram",
     "markdown",
diff --git a/packages/mermaid/src/docs/package.json b/packages/mermaid/src/docs/package.json
index af7f69b2e0..c95a8aeda4 100644
--- a/packages/mermaid/src/docs/package.json
+++ b/packages/mermaid/src/docs/package.json
@@ -32,7 +32,7 @@
     "unplugin-vue-components": "^0.25.0",
     "vite": "^4.3.9",
     "vite-plugin-pwa": "^0.17.0",
-    "vitepress": "1.0.0-rc.25",
+    "vitepress": "1.0.0-rc.29",
     "workbox-window": "^7.0.0"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 22dc07b7c7..b0bc7c2849 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -475,8 +475,8 @@ importers:
         specifier: ^0.17.0
         version: 0.17.0(vite@4.4.9)(workbox-build@7.0.0)(workbox-window@7.0.0)
       vitepress:
-        specifier: 1.0.0-rc.25
-        version: 1.0.0-rc.25(@algolia/client-search@4.19.1)(@types/node@18.17.5)(postcss@8.4.31)(search-insights@2.7.0)(typescript@5.1.6)
+        specifier: 1.0.0-rc.29
+        version: 1.0.0-rc.29(@algolia/client-search@4.19.1)(@types/node@18.17.5)(postcss@8.4.31)(search-insights@2.7.0)(typescript@5.1.6)
       workbox-window:
         specifier: ^7.0.0
         version: 7.0.0
@@ -3029,6 +3029,15 @@ packages:
     dev: true
     optional: true
 
+  /@esbuild/android-arm64@0.19.6:
+    resolution: {integrity: sha512-KQ/hbe9SJvIJ4sR+2PcZ41IBV+LPJyYp6V1K1P1xcMRup9iYsBoQn4MzE3mhMLOld27Au2eDcLlIREeKGUXpHQ==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [android]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@esbuild/android-arm@0.18.20:
     resolution: {integrity: sha512-fyi7TDI/ijKKNZTUJAQqiG5T7YjJXgnzkURqmGj13C6dCqckZBLdl4h7bkhHt/t0WP+zO9/zwroDvANaOqO5Sw==}
     engines: {node: '>=12'}
@@ -3047,6 +3056,15 @@ packages:
     dev: true
     optional: true
 
+  /@esbuild/android-arm@0.19.6:
+    resolution: {integrity: sha512-muPzBqXJKCbMYoNbb1JpZh/ynl0xS6/+pLjrofcR3Nad82SbsCogYzUE6Aq9QT3cLP0jR/IVK/NHC9b90mSHtg==}
+    engines: {node: '>=12'}
+    cpu: [arm]
+    os: [android]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@esbuild/android-x64@0.18.20:
     resolution: {integrity: sha512-8GDdlePJA8D6zlZYJV/jnrRAi6rOiNaCC/JclcXpB+KIuvfBN4owLtgzY2bsxnx666XjJx2kDPUmnTtR8qKQUg==}
     engines: {node: '>=12'}
@@ -3065,6 +3083,15 @@ packages:
     dev: true
     optional: true
 
+  /@esbuild/android-x64@0.19.6:
+    resolution: {integrity: sha512-VVJVZQ7p5BBOKoNxd0Ly3xUM78Y4DyOoFKdkdAe2m11jbh0LEU4bPles4e/72EMl4tapko8o915UalN/5zhspg==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [android]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@esbuild/darwin-arm64@0.18.20:
     resolution: {integrity: sha512-bxRHW5kHU38zS2lPTPOyuyTm+S+eobPUnTNkdJEfAddYgEcll4xkT8DB9d2008DtTbl7uJag2HuE5NZAZgnNEA==}
     engines: {node: '>=12'}
@@ -3083,6 +3110,15 @@ packages:
     dev: true
     optional: true
 
+  /@esbuild/darwin-arm64@0.19.6:
+    resolution: {integrity: sha512-91LoRp/uZAKx6ESNspL3I46ypwzdqyDLXZH7x2QYCLgtnaU08+AXEbabY2yExIz03/am0DivsTtbdxzGejfXpA==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@esbuild/darwin-x64@0.18.20:
     resolution: {integrity: sha512-pc5gxlMDxzm513qPGbCbDukOdsGtKhfxD1zJKXjCCcU7ju50O7MeAZ8c4krSJcOIJGFR+qx21yMMVYwiQvyTyQ==}
     engines: {node: '>=12'}
@@ -3101,6 +3137,15 @@ packages:
     dev: true
     optional: true
 
+  /@esbuild/darwin-x64@0.19.6:
+    resolution: {integrity: sha512-QCGHw770ubjBU1J3ZkFJh671MFajGTYMZumPs9E/rqU52md6lIil97BR0CbPq6U+vTh3xnTNDHKRdR8ggHnmxQ==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@esbuild/freebsd-arm64@0.18.20:
     resolution: {integrity: sha512-yqDQHy4QHevpMAaxhhIwYPMv1NECwOvIpGCZkECn8w2WFHXjEwrBn3CeNIYsibZ/iZEUemj++M26W3cNR5h+Tw==}
     engines: {node: '>=12'}
@@ -3119,6 +3164,15 @@ packages:
     dev: true
     optional: true
 
+  /@esbuild/freebsd-arm64@0.19.6:
+    resolution: {integrity: sha512-J53d0jGsDcLzWk9d9SPmlyF+wzVxjXpOH7jVW5ae7PvrDst4kiAz6sX+E8btz0GB6oH12zC+aHRD945jdjF2Vg==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [freebsd]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@esbuild/freebsd-x64@0.18.20:
     resolution: {integrity: sha512-tgWRPPuQsd3RmBZwarGVHZQvtzfEBOreNuxEMKFcd5DaDn2PbBxfwLcj4+aenoh7ctXcbXmOQIn8HI6mCSw5MQ==}
     engines: {node: '>=12'}
@@ -3137,6 +3191,15 @@ packages:
     dev: true
     optional: true
 
+  /@esbuild/freebsd-x64@0.19.6:
+    resolution: {integrity: sha512-hn9qvkjHSIB5Z9JgCCjED6YYVGCNpqB7dEGavBdG6EjBD8S/UcNUIlGcB35NCkMETkdYwfZSvD9VoDJX6VeUVA==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [freebsd]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@esbuild/linux-arm64@0.18.20:
     resolution: {integrity: sha512-2YbscF+UL7SQAVIpnWvYwM+3LskyDmPhe31pE7/aoTMFKKzIc9lLbyGUpmmb8a8AixOL61sQ/mFh3jEjHYFvdA==}
     engines: {node: '>=12'}
@@ -3155,6 +3218,15 @@ packages:
     dev: true
     optional: true
 
+  /@esbuild/linux-arm64@0.19.6:
+    resolution: {integrity: sha512-HQCOrk9XlH3KngASLaBfHpcoYEGUt829A9MyxaI8RMkfRA8SakG6YQEITAuwmtzFdEu5GU4eyhKcpv27dFaOBg==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@esbuild/linux-arm@0.18.20:
     resolution: {integrity: sha512-/5bHkMWnq1EgKr1V+Ybz3s1hWXok7mDFUMQ4cG10AfW3wL02PSZi5kFpYKrptDsgb2WAJIvRcDm+qIvXf/apvg==}
     engines: {node: '>=12'}
@@ -3173,6 +3245,15 @@ packages:
     dev: true
     optional: true
 
+  /@esbuild/linux-arm@0.19.6:
+    resolution: {integrity: sha512-G8IR5zFgpXad/Zp7gr7ZyTKyqZuThU6z1JjmRyN1vSF8j0bOlGzUwFSMTbctLAdd7QHpeyu0cRiuKrqK1ZTwvQ==}
+    engines: {node: '>=12'}
+    cpu: [arm]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@esbuild/linux-ia32@0.18.20:
     resolution: {integrity: sha512-P4etWwq6IsReT0E1KHU40bOnzMHoH73aXp96Fs8TIT6z9Hu8G6+0SHSw9i2isWrD2nbx2qo5yUqACgdfVGx7TA==}
     engines: {node: '>=12'}
@@ -3191,6 +3272,15 @@ packages:
     dev: true
     optional: true
 
+  /@esbuild/linux-ia32@0.19.6:
+    resolution: {integrity: sha512-22eOR08zL/OXkmEhxOfshfOGo8P69k8oKHkwkDrUlcB12S/sw/+COM4PhAPT0cAYW/gpqY2uXp3TpjQVJitz7w==}
+    engines: {node: '>=12'}
+    cpu: [ia32]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@esbuild/linux-loong64@0.18.20:
     resolution: {integrity: sha512-nXW8nqBTrOpDLPgPY9uV+/1DjxoQ7DoB2N8eocyq8I9XuqJ7BiAMDMf9n1xZM9TgW0J8zrquIb/A7s3BJv7rjg==}
     engines: {node: '>=12'}
@@ -3209,6 +3299,15 @@ packages:
     dev: true
     optional: true
 
+  /@esbuild/linux-loong64@0.19.6:
+    resolution: {integrity: sha512-82RvaYAh/SUJyjWA8jDpyZCHQjmEggL//sC7F3VKYcBMumQjUL3C5WDl/tJpEiKtt7XrWmgjaLkrk205zfvwTA==}
+    engines: {node: '>=12'}
+    cpu: [loong64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@esbuild/linux-mips64el@0.18.20:
     resolution: {integrity: sha512-d5NeaXZcHp8PzYy5VnXV3VSd2D328Zb+9dEq5HE6bw6+N86JVPExrA6O68OPwobntbNJ0pzCpUFZTo3w0GyetQ==}
     engines: {node: '>=12'}
@@ -3227,6 +3326,15 @@ packages:
     dev: true
     optional: true
 
+  /@esbuild/linux-mips64el@0.19.6:
+    resolution: {integrity: sha512-8tvnwyYJpR618vboIv2l8tK2SuK/RqUIGMfMENkeDGo3hsEIrpGldMGYFcWxWeEILe5Fi72zoXLmhZ7PR23oQA==}
+    engines: {node: '>=12'}
+    cpu: [mips64el]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@esbuild/linux-ppc64@0.18.20:
     resolution: {integrity: sha512-WHPyeScRNcmANnLQkq6AfyXRFr5D6N2sKgkFo2FqguP44Nw2eyDlbTdZwd9GYk98DZG9QItIiTlFLHJHjxP3FA==}
     engines: {node: '>=12'}
@@ -3245,6 +3353,15 @@ packages:
     dev: true
     optional: true
 
+  /@esbuild/linux-ppc64@0.19.6:
+    resolution: {integrity: sha512-Qt+D7xiPajxVNk5tQiEJwhmarNnLPdjXAoA5uWMpbfStZB0+YU6a3CtbWYSy+sgAsnyx4IGZjWsTzBzrvg/fMA==}
+    engines: {node: '>=12'}
+    cpu: [ppc64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@esbuild/linux-riscv64@0.18.20:
     resolution: {integrity: sha512-WSxo6h5ecI5XH34KC7w5veNnKkju3zBRLEQNY7mv5mtBmrP/MjNBCAlsM2u5hDBlS3NGcTQpoBvRzqBcRtpq1A==}
     engines: {node: '>=12'}
@@ -3263,6 +3380,15 @@ packages:
     dev: true
     optional: true
 
+  /@esbuild/linux-riscv64@0.19.6:
+    resolution: {integrity: sha512-lxRdk0iJ9CWYDH1Wpnnnc640ajF4RmQ+w6oHFZmAIYu577meE9Ka/DCtpOrwr9McMY11ocbp4jirgGgCi7Ls/g==}
+    engines: {node: '>=12'}
+    cpu: [riscv64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@esbuild/linux-s390x@0.18.20:
     resolution: {integrity: sha512-+8231GMs3mAEth6Ja1iK0a1sQ3ohfcpzpRLH8uuc5/KVDFneH6jtAJLFGafpzpMRO6DzJ6AvXKze9LfFMrIHVQ==}
     engines: {node: '>=12'}
@@ -3281,6 +3407,15 @@ packages:
     dev: true
     optional: true
 
+  /@esbuild/linux-s390x@0.19.6:
+    resolution: {integrity: sha512-MopyYV39vnfuykHanRWHGRcRC3AwU7b0QY4TI8ISLfAGfK+tMkXyFuyT1epw/lM0pflQlS53JoD22yN83DHZgA==}
+    engines: {node: '>=12'}
+    cpu: [s390x]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@esbuild/linux-x64@0.18.20:
     resolution: {integrity: sha512-UYqiqemphJcNsFEskc73jQ7B9jgwjWrSayxawS6UVFZGWrAAtkzjxSqnoclCXxWtfwLdzU+vTpcNYhpn43uP1w==}
     engines: {node: '>=12'}
@@ -3299,6 +3434,15 @@ packages:
     dev: true
     optional: true
 
+  /@esbuild/linux-x64@0.19.6:
+    resolution: {integrity: sha512-UWcieaBzsN8WYbzFF5Jq7QULETPcQvlX7KL4xWGIB54OknXJjBO37sPqk7N82WU13JGWvmDzFBi1weVBajPovg==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@esbuild/netbsd-x64@0.18.20:
     resolution: {integrity: sha512-iO1c++VP6xUBUmltHZoMtCUdPlnPGdBom6IrO4gyKPFFVBKioIImVooR5I83nTew5UOYrk3gIJhbZh8X44y06A==}
     engines: {node: '>=12'}
@@ -3317,6 +3461,15 @@ packages:
     dev: true
     optional: true
 
+  /@esbuild/netbsd-x64@0.19.6:
+    resolution: {integrity: sha512-EpWiLX0fzvZn1wxtLxZrEW+oQED9Pwpnh+w4Ffv8ZLuMhUoqR9q9rL4+qHW8F4Mg5oQEKxAoT0G+8JYNqCiR6g==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [netbsd]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@esbuild/openbsd-x64@0.18.20:
     resolution: {integrity: sha512-e5e4YSsuQfX4cxcygw/UCPIEP6wbIL+se3sxPdCiMbFLBWu0eiZOJ7WoD+ptCLrmjZBK1Wk7I6D/I3NglUGOxg==}
     engines: {node: '>=12'}
@@ -3335,6 +3488,15 @@ packages:
     dev: true
     optional: true
 
+  /@esbuild/openbsd-x64@0.19.6:
+    resolution: {integrity: sha512-fFqTVEktM1PGs2sLKH4M5mhAVEzGpeZJuasAMRnvDZNCV0Cjvm1Hu35moL2vC0DOrAQjNTvj4zWrol/lwQ8Deg==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [openbsd]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@esbuild/sunos-x64@0.18.20:
     resolution: {integrity: sha512-kDbFRFp0YpTQVVrqUd5FTYmWo45zGaXe0X8E1G/LKFC0v8x0vWrhOWSLITcCn63lmZIxfOMXtCfti/RxN/0wnQ==}
     engines: {node: '>=12'}
@@ -3353,6 +3515,15 @@ packages:
     dev: true
     optional: true
 
+  /@esbuild/sunos-x64@0.19.6:
+    resolution: {integrity: sha512-M+XIAnBpaNvaVAhbe3uBXtgWyWynSdlww/JNZws0FlMPSBy+EpatPXNIlKAdtbFVII9OpX91ZfMb17TU3JKTBA==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [sunos]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@esbuild/win32-arm64@0.18.20:
     resolution: {integrity: sha512-ddYFR6ItYgoaq4v4JmQQaAI5s7npztfV4Ag6NrhiaW0RrnOXqBkgwZLofVTlq1daVTQNhtI5oieTvkRPfZrePg==}
     engines: {node: '>=12'}
@@ -3371,6 +3542,15 @@ packages:
     dev: true
     optional: true
 
+  /@esbuild/win32-arm64@0.19.6:
+    resolution: {integrity: sha512-2DchFXn7vp/B6Tc2eKdTsLzE0ygqKkNUhUBCNtMx2Llk4POIVMUq5rUYjdcedFlGLeRe1uLCpVvCmE+G8XYybA==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@esbuild/win32-ia32@0.18.20:
     resolution: {integrity: sha512-Wv7QBi3ID/rROT08SABTS7eV4hX26sVduqDOTe1MvGMjNd3EjOz4b7zeexIR62GTIEKrfJXKL9LFxTYgkyeu7g==}
     engines: {node: '>=12'}
@@ -3389,6 +3569,15 @@ packages:
     dev: true
     optional: true
 
+  /@esbuild/win32-ia32@0.19.6:
+    resolution: {integrity: sha512-PBo/HPDQllyWdjwAVX+Gl2hH0dfBydL97BAH/grHKC8fubqp02aL4S63otZ25q3sBdINtOBbz1qTZQfXbP4VBg==}
+    engines: {node: '>=12'}
+    cpu: [ia32]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@esbuild/win32-x64@0.18.20:
     resolution: {integrity: sha512-kTdfRcSiDfQca/y9QIkng02avJ+NCaQvrMejlsB3RRv5sE9rRoeBPISaZpKxHELzRxZyLvNts1P27W3wV+8geQ==}
     engines: {node: '>=12'}
@@ -3407,6 +3596,15 @@ packages:
     dev: true
     optional: true
 
+  /@esbuild/win32-x64@0.19.6:
+    resolution: {integrity: sha512-OE7yIdbDif2kKfrGa+V0vx/B3FJv2L4KnIiLlvtibPyO9UkgO3rzYE0HhpREo2vmJ1Ixq1zwm9/0er+3VOSZJA==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@eslint-community/eslint-utils@4.4.0(eslint@8.47.0):
     resolution: {integrity: sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -3955,6 +4153,102 @@ packages:
       rollup: 2.79.1
     dev: true
 
+  /@rollup/rollup-android-arm-eabi@4.5.0:
+    resolution: {integrity: sha512-OINaBGY+Wc++U0rdr7BLuFClxcoWaVW3vQYqmQq6B3bqQ/2olkaoz+K8+af/Mmka/C2yN5j+L9scBkv4BtKsDA==}
+    cpu: [arm]
+    os: [android]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-android-arm64@4.5.0:
+    resolution: {integrity: sha512-UdMf1pOQc4ZmUA/NTmKhgJTBimbSKnhPS2zJqucqFyBRFPnPDtwA8MzrGNTjDeQbIAWfpJVAlxejw+/lQyBK/w==}
+    cpu: [arm64]
+    os: [android]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-darwin-arm64@4.5.0:
+    resolution: {integrity: sha512-L0/CA5p/idVKI+c9PcAPGorH6CwXn6+J0Ys7Gg1axCbTPgI8MeMlhA6fLM9fK+ssFhqogMHFC8HDvZuetOii7w==}
+    cpu: [arm64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-darwin-x64@4.5.0:
+    resolution: {integrity: sha512-QZCbVqU26mNlLn8zi/XDDquNmvcr4ON5FYAHQQsyhrHx8q+sQi/6xduoznYXwk/KmKIXG5dLfR0CvY+NAWpFYQ==}
+    cpu: [x64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-linux-arm-gnueabihf@4.5.0:
+    resolution: {integrity: sha512-VpSQ+xm93AeV33QbYslgf44wc5eJGYfYitlQzAi3OObu9iwrGXEnmu5S3ilkqE3Pr/FkgOiJKV/2p0ewf4Hrtg==}
+    cpu: [arm]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-linux-arm64-gnu@4.5.0:
+    resolution: {integrity: sha512-OrEyIfpxSsMal44JpEVx9AEcGpdBQG1ZuWISAanaQTSMeStBW+oHWwOkoqR54bw3x8heP8gBOyoJiGg+fLY8qQ==}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-linux-arm64-musl@4.5.0:
+    resolution: {integrity: sha512-1H7wBbQuE6igQdxMSTjtFfD+DGAudcYWhp106z/9zBA8OQhsJRnemO4XGavdzHpGhRtRxbgmUGdO3YQgrWf2RA==}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-linux-x64-gnu@4.5.0:
+    resolution: {integrity: sha512-FVyFI13tXw5aE65sZdBpNjPVIi4Q5mARnL/39UIkxvSgRAIqCo5sCpCELk0JtXHGee2owZz5aNLbWNfBHzr71Q==}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-linux-x64-musl@4.5.0:
+    resolution: {integrity: sha512-eBPYl2sLpH/o8qbSz6vPwWlDyThnQjJfcDOGFbNjmjb44XKC1F5dQfakOsADRVrXCNzM6ZsSIPDG5dc6HHLNFg==}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-win32-arm64-msvc@4.5.0:
+    resolution: {integrity: sha512-xaOHIfLOZypoQ5U2I6rEaugS4IYtTgP030xzvrBf5js7p9WI9wik07iHmsKaej8Z83ZDxN5GyypfoyKV5O5TJA==}
+    cpu: [arm64]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-win32-ia32-msvc@4.5.0:
+    resolution: {integrity: sha512-Al6quztQUrHwcOoU2TuFblUQ5L+/AmPBXFR6dUvyo4nRj2yQRK0WIUaGMF/uwKulvRcXkpHe3k9A8Vf93VDktA==}
+    cpu: [ia32]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-win32-x64-msvc@4.5.0:
+    resolution: {integrity: sha512-8kdW+brNhI/NzJ4fxDufuJUjepzINqJKLGHuxyAtpPG9bMbn8P5mtaCcbOm0EzLJ+atg+kF9dwg8jpclkVqx5w==}
+    cpu: [x64]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@sideway/address@4.1.4:
     resolution: {integrity: sha512-7vwq+rOHVWjyXxVlR76Agnvhy8I9rpzjosTESvmhNeXOXdZZB15Fl+TI9x1SiHZH5Jv2wTGduSxFDIaq0m3DUw==}
     dependencies:
@@ -4452,8 +4746,8 @@ packages:
       '@types/mdurl': 1.0.2
     dev: true
 
-  /@types/markdown-it@13.0.5:
-    resolution: {integrity: sha512-QhJP7hkq3FCrFNx0szMNCT/79CXfcEgUIA3jc5GBfeXqoKsk3R8JZm2wRXJ2DiyjbPE4VMFOSDemLFcUTZmHEQ==}
+  /@types/markdown-it@13.0.6:
+    resolution: {integrity: sha512-0VqpvusJn1/lwRegCxcHVdmLfF+wIsprsKMC9xW8UPcTxhFcQtoN/fBU1zMe8pH7D/RuueMh2CaBaNv+GrLqTw==}
     dependencies:
       '@types/linkify-it': 3.0.2
       '@types/mdurl': 1.0.2
@@ -4619,8 +4913,8 @@ packages:
     resolution: {integrity: sha512-4p9vcSmxAayx72yn70joFoL44c9MO/0+iVEBIQXe3v2h2SiAsEIo/G5v6ObFWvNKRFjbrVadNf9LqEEZeQPzdA==}
     dev: true
 
-  /@types/web-bluetooth@0.0.18:
-    resolution: {integrity: sha512-v/ZHEj9xh82usl8LMR3GarzFY1IrbXJw5L4QfQhokjRV91q+SelFqxQWSep1ucXEZ22+dSTwLFkXeur25sPIbw==}
+  /@types/web-bluetooth@0.0.20:
+    resolution: {integrity: sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==}
     dev: true
 
   /@types/ws@8.5.5:
@@ -5208,15 +5502,15 @@ packages:
       vue: 3.3.4
     dev: true
 
-  /@vitejs/plugin-vue@4.3.1(vite@4.5.0)(vue@3.3.7):
-    resolution: {integrity: sha512-tUBEtWcF7wFtII7ayNiLNDTCE1X1afySEo+XNVMNkFXaThENyCowIEX095QqbJZGTgoOcSVDJGlnde2NG4jtbQ==}
+  /@vitejs/plugin-vue@4.5.0(vite@5.0.0)(vue@3.3.8):
+    resolution: {integrity: sha512-a2WSpP8X8HTEww/U00bU4mX1QpLINNuz/2KMNpLsdu3BzOpak3AGI1CJYBTXcc4SPhaD0eNRUp7IyQK405L5dQ==}
     engines: {node: ^14.18.0 || >=16.0.0}
     peerDependencies:
-      vite: ^4.0.0
+      vite: ^4.0.0 || ^5.0.0
       vue: ^3.2.25
     dependencies:
-      vite: 4.5.0(@types/node@18.17.5)
-      vue: 3.3.7(typescript@5.1.6)
+      vite: 5.0.0(@types/node@18.17.5)
+      vue: 3.3.8(typescript@5.1.6)
     dev: true
 
   /@vitest/coverage-v8@0.34.0(vitest@0.34.0):
@@ -5321,6 +5615,15 @@ packages:
       source-map-js: 1.0.2
     dev: true
 
+  /@vue/compiler-core@3.3.8:
+    resolution: {integrity: sha512-hN/NNBUECw8SusQvDSqqcVv6gWq8L6iAktUR0UF3vGu2OhzRqcOiAno0FmBJWwxhYEXRlQJT5XnoKsVq1WZx4g==}
+    dependencies:
+      '@babel/parser': 7.23.0
+      '@vue/shared': 3.3.8
+      estree-walker: 2.0.2
+      source-map-js: 1.0.2
+    dev: true
+
   /@vue/compiler-dom@3.3.4:
     resolution: {integrity: sha512-wyM+OjOVpuUukIq6p5+nwHYtj9cFroz9cwkfmP9O1nzH68BenTTv0u7/ndggT8cIQlnBeOo6sUT/gvHcIkLA5w==}
     dependencies:
@@ -5334,6 +5637,13 @@ packages:
       '@vue/shared': 3.3.7
     dev: true
 
+  /@vue/compiler-dom@3.3.8:
+    resolution: {integrity: sha512-+PPtv+p/nWDd0AvJu3w8HS0RIm/C6VGBIRe24b9hSyNWOAPEUosFZ5diwawwP8ip5sJ8n0Pe87TNNNHnvjs0FQ==}
+    dependencies:
+      '@vue/compiler-core': 3.3.8
+      '@vue/shared': 3.3.8
+    dev: true
+
   /@vue/compiler-sfc@3.3.4:
     resolution: {integrity: sha512-6y/d8uw+5TkCuzBkgLS0v3lSM3hJDntFEiUORM11pQ/hKvkhSKZrXW6i69UyXlJQisJxuUEJKAWEqWbWsLeNKQ==}
     dependencies:
@@ -5363,6 +5673,21 @@ packages:
       source-map-js: 1.0.2
     dev: true
 
+  /@vue/compiler-sfc@3.3.8:
+    resolution: {integrity: sha512-WMzbUrlTjfYF8joyT84HfwwXo+8WPALuPxhy+BZ6R4Aafls+jDBnSz8PDz60uFhuqFbl3HxRfxvDzrUf3THwpA==}
+    dependencies:
+      '@babel/parser': 7.23.0
+      '@vue/compiler-core': 3.3.8
+      '@vue/compiler-dom': 3.3.8
+      '@vue/compiler-ssr': 3.3.8
+      '@vue/reactivity-transform': 3.3.8
+      '@vue/shared': 3.3.8
+      estree-walker: 2.0.2
+      magic-string: 0.30.5
+      postcss: 8.4.31
+      source-map-js: 1.0.2
+    dev: true
+
   /@vue/compiler-ssr@3.3.4:
     resolution: {integrity: sha512-m0v6oKpup2nMSehwA6Uuu+j+wEwcy7QmwMkVNVfrV9P2qE5KshC6RwOCq8fjGS/Eak/uNb8AaWekfiXxbBB6gQ==}
     dependencies:
@@ -5376,6 +5701,13 @@ packages:
       '@vue/shared': 3.3.7
     dev: true
 
+  /@vue/compiler-ssr@3.3.8:
+    resolution: {integrity: sha512-hXCqQL/15kMVDBuoBYpUnSYT8doDNwsjvm3jTefnXr+ytn294ySnT8NlsFHmTgKNjwpuFy7XVV8yTeLtNl/P6w==}
+    dependencies:
+      '@vue/compiler-dom': 3.3.8
+      '@vue/shared': 3.3.8
+    dev: true
+
   /@vue/devtools-api@6.5.0:
     resolution: {integrity: sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q==}
     dev: true
@@ -5402,6 +5734,16 @@ packages:
       magic-string: 0.30.5
     dev: true
 
+  /@vue/reactivity-transform@3.3.8:
+    resolution: {integrity: sha512-49CvBzmZNtcHua0XJ7GdGifM8GOXoUMOX4dD40Y5DxI3R8OUhMlvf2nvgUAcPxaXiV5MQQ1Nwy09ADpnLQUqRw==}
+    dependencies:
+      '@babel/parser': 7.23.0
+      '@vue/compiler-core': 3.3.8
+      '@vue/shared': 3.3.8
+      estree-walker: 2.0.2
+      magic-string: 0.30.5
+    dev: true
+
   /@vue/reactivity@3.3.4:
     resolution: {integrity: sha512-kLTDLwd0B1jG08NBF3R5rqULtv/f8x3rOFByTDz4J53ttIQEDmALqKqXY0J+XQeN0aV2FBxY8nJDf88yvOPAqQ==}
     dependencies:
@@ -5413,6 +5755,12 @@ packages:
       '@vue/shared': 3.3.7
     dev: true
 
+  /@vue/reactivity@3.3.8:
+    resolution: {integrity: sha512-ctLWitmFBu6mtddPyOKpHg8+5ahouoTCRtmAHZAXmolDtuZXfjL2T3OJ6DL6ezBPQB1SmMnpzjiWjCiMYmpIuw==}
+    dependencies:
+      '@vue/shared': 3.3.8
+    dev: true
+
   /@vue/runtime-core@3.3.4:
     resolution: {integrity: sha512-R+bqxMN6pWO7zGI4OMlmvePOdP2c93GsHFM/siJI7O2nxFRzj55pLwkpCedEY+bTMgp5miZ8CxfIZo3S+gFqvA==}
     dependencies:
@@ -5426,6 +5774,13 @@ packages:
       '@vue/shared': 3.3.7
     dev: true
 
+  /@vue/runtime-core@3.3.8:
+    resolution: {integrity: sha512-qurzOlb6q26KWQ/8IShHkMDOuJkQnQcTIp1sdP4I9MbCf9FJeGVRXJFr2mF+6bXh/3Zjr9TDgURXrsCr9bfjUw==}
+    dependencies:
+      '@vue/reactivity': 3.3.8
+      '@vue/shared': 3.3.8
+    dev: true
+
   /@vue/runtime-dom@3.3.4:
     resolution: {integrity: sha512-Aj5bTJ3u5sFsUckRghsNjVTtxZQ1OyMWCr5dZRAPijF/0Vy4xEoRCwLyHXcj4D0UFbJ4lbx3gPTgg06K/GnPnQ==}
     dependencies:
@@ -5441,6 +5796,14 @@ packages:
       csstype: 3.1.2
     dev: true
 
+  /@vue/runtime-dom@3.3.8:
+    resolution: {integrity: sha512-Noy5yM5UIf9UeFoowBVgghyGGPIDPy1Qlqt0yVsUdAVbqI8eeMSsTqBtauaEoT2UFXUk5S64aWVNJN4MJ2vRdA==}
+    dependencies:
+      '@vue/runtime-core': 3.3.8
+      '@vue/shared': 3.3.8
+      csstype: 3.1.2
+    dev: true
+
   /@vue/server-renderer@3.3.4(vue@3.3.4):
     resolution: {integrity: sha512-Q6jDDzR23ViIb67v+vM1Dqntu+HUexQcsWKhhQa4ARVzxOY2HbC7QRW/ggkDBd5BU+uM1sV6XOAP0b216o34JQ==}
     peerDependencies:
@@ -5460,6 +5823,16 @@ packages:
       vue: 3.3.7(typescript@5.0.4)
     dev: true
 
+  /@vue/server-renderer@3.3.8(vue@3.3.8):
+    resolution: {integrity: sha512-zVCUw7RFskvPuNlPn/8xISbrf0zTWsTSdYTsUTN1ERGGZGVnRxM2QZ3x1OR32+vwkkCm0IW6HmJ49IsPm7ilLg==}
+    peerDependencies:
+      vue: 3.3.8
+    dependencies:
+      '@vue/compiler-ssr': 3.3.8
+      '@vue/shared': 3.3.8
+      vue: 3.3.8(typescript@5.1.6)
+    dev: true
+
   /@vue/shared@3.3.4:
     resolution: {integrity: sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ==}
 
@@ -5467,6 +5840,10 @@ packages:
     resolution: {integrity: sha512-N/tbkINRUDExgcPTBvxNkvHGu504k8lzlNQRITVnm6YjOjwa4r0nnbd4Jb01sNpur5hAllyRJzSK5PvB9PPwRg==}
     dev: true
 
+  /@vue/shared@3.3.8:
+    resolution: {integrity: sha512-8PGwybFwM4x8pcfgqEQFy70NaQxASvOC5DJwLQfpArw1UDfUXrJkdxD3BhVTMS+0Lef/TU7YO0Jvr0jJY8T+mw==}
+    dev: true
+
   /@vueuse/core@10.1.0(vue@3.3.4):
     resolution: {integrity: sha512-3Znoa5m5RO+z4/C9w6DRaKTR3wCVJvD5rav8HTDGsr+7rOZRHtcgFJ8NcCs0ZvIpmev2kExTa311ns5j2RbzDQ==}
     dependencies:
@@ -5491,20 +5868,20 @@ packages:
       - vue
     dev: true
 
-  /@vueuse/core@10.5.0(vue@3.3.7):
-    resolution: {integrity: sha512-z/tI2eSvxwLRjOhDm0h/SXAjNm8N5ld6/SC/JQs6o6kpJ6Ya50LnEL8g5hoYu005i28L0zqB5L5yAl8Jl26K3A==}
+  /@vueuse/core@10.6.1(vue@3.3.8):
+    resolution: {integrity: sha512-Pc26IJbqgC9VG1u6VY/xrXXfxD33hnvxBnKrLlA2LJlyHII+BSrRoTPJgGYq7qZOu61itITFUnm6QbacwZ4H8Q==}
     dependencies:
-      '@types/web-bluetooth': 0.0.18
-      '@vueuse/metadata': 10.5.0
-      '@vueuse/shared': 10.5.0(vue@3.3.7)
-      vue-demi: 0.14.6(vue@3.3.7)
+      '@types/web-bluetooth': 0.0.20
+      '@vueuse/metadata': 10.6.1
+      '@vueuse/shared': 10.6.1(vue@3.3.8)
+      vue-demi: 0.14.6(vue@3.3.8)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
     dev: true
 
-  /@vueuse/integrations@10.5.0(focus-trap@7.5.4)(vue@3.3.7):
-    resolution: {integrity: sha512-fm5sXLCK0Ww3rRnzqnCQRmfjDURaI4xMsx+T+cec0ngQqHx/JgUtm8G0vRjwtonIeTBsH1Q8L3SucE+7K7upJQ==}
+  /@vueuse/integrations@10.6.1(focus-trap@7.5.4)(vue@3.3.8):
+    resolution: {integrity: sha512-mPDupuofMJ4DPmtX/FfP1MajmWRzYDv8WSaTCo8LQ5kFznjWgmUQ16ApjYqgMquqffNY6+IRMdMgosLDRZOSZA==}
     peerDependencies:
       async-validator: '*'
       axios: '*'
@@ -5544,10 +5921,10 @@ packages:
       universal-cookie:
         optional: true
     dependencies:
-      '@vueuse/core': 10.5.0(vue@3.3.7)
-      '@vueuse/shared': 10.5.0(vue@3.3.7)
+      '@vueuse/core': 10.6.1(vue@3.3.8)
+      '@vueuse/shared': 10.6.1(vue@3.3.8)
       focus-trap: 7.5.4
-      vue-demi: 0.14.6(vue@3.3.7)
+      vue-demi: 0.14.6(vue@3.3.8)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
@@ -5561,8 +5938,8 @@ packages:
     resolution: {integrity: sha512-Ema3YhNOa4swDsV0V7CEY5JXvK19JI/o1szFO1iWxdFg3vhdFtCtSTP26PCvbUpnUtNHBY2wx5y3WDXND5Pvnw==}
     dev: true
 
-  /@vueuse/metadata@10.5.0:
-    resolution: {integrity: sha512-fEbElR+MaIYyCkeM0SzWkdoMtOpIwO72x8WsZHRE7IggiOlILttqttM69AS13nrDxosnDBYdyy3C5mR1LCxHsw==}
+  /@vueuse/metadata@10.6.1:
+    resolution: {integrity: sha512-qhdwPI65Bgcj23e5lpGfQsxcy0bMjCAsUGoXkJ7DsoeDUdasbZ2DBa4dinFCOER3lF4gwUv+UD2AlA11zdzMFw==}
     dev: true
 
   /@vueuse/shared@10.1.0(vue@3.3.4):
@@ -5583,10 +5960,10 @@ packages:
       - vue
     dev: true
 
-  /@vueuse/shared@10.5.0(vue@3.3.7):
-    resolution: {integrity: sha512-18iyxbbHYLst9MqU1X1QNdMHIjks6wC7XTVf0KNOv5es/Ms6gjVFCAAWTVP2JStuGqydg3DT+ExpFORUEi9yhg==}
+  /@vueuse/shared@10.6.1(vue@3.3.8):
+    resolution: {integrity: sha512-TECVDTIedFlL0NUfHWncf3zF9Gc4VfdxfQc8JFwoVZQmxpONhLxFrlm0eHQeidHj4rdTPL3KXJa0TZCk1wnc5Q==}
     dependencies:
-      vue-demi: 0.14.6(vue@3.3.7)
+      vue-demi: 0.14.6(vue@3.3.8)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
@@ -8636,6 +9013,36 @@ packages:
       '@esbuild/win32-x64': 0.19.0
     dev: true
 
+  /esbuild@0.19.6:
+    resolution: {integrity: sha512-Xl7dntjA2OEIvpr9j0DVxxnog2fyTGnyVoQXAMQI6eR3mf9zCQds7VIKUDCotDgE/p4ncTgeRqgX8t5d6oP4Gw==}
+    engines: {node: '>=12'}
+    hasBin: true
+    requiresBuild: true
+    optionalDependencies:
+      '@esbuild/android-arm': 0.19.6
+      '@esbuild/android-arm64': 0.19.6
+      '@esbuild/android-x64': 0.19.6
+      '@esbuild/darwin-arm64': 0.19.6
+      '@esbuild/darwin-x64': 0.19.6
+      '@esbuild/freebsd-arm64': 0.19.6
+      '@esbuild/freebsd-x64': 0.19.6
+      '@esbuild/linux-arm': 0.19.6
+      '@esbuild/linux-arm64': 0.19.6
+      '@esbuild/linux-ia32': 0.19.6
+      '@esbuild/linux-loong64': 0.19.6
+      '@esbuild/linux-mips64el': 0.19.6
+      '@esbuild/linux-ppc64': 0.19.6
+      '@esbuild/linux-riscv64': 0.19.6
+      '@esbuild/linux-s390x': 0.19.6
+      '@esbuild/linux-x64': 0.19.6
+      '@esbuild/netbsd-x64': 0.19.6
+      '@esbuild/openbsd-x64': 0.19.6
+      '@esbuild/sunos-x64': 0.19.6
+      '@esbuild/win32-arm64': 0.19.6
+      '@esbuild/win32-ia32': 0.19.6
+      '@esbuild/win32-x64': 0.19.6
+    dev: true
+
   /escalade@3.1.1:
     resolution: {integrity: sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==}
     engines: {node: '>=6'}
@@ -9589,6 +9996,14 @@ packages:
     requiresBuild: true
     optional: true
 
+  /fsevents@2.3.3:
+    resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /function-bind@1.1.1:
     resolution: {integrity: sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==}
 
@@ -12465,6 +12880,10 @@ packages:
     resolution: {integrity: sha512-PNxA/X8pWk+TiqPbsoIYH0GQ5Di7m6326/lwU/S4mlo4wGQddIcf/V//1f9TB0V4j59b57b+HZxt8h3iMROGvg==}
     dev: true
 
+  /minisearch@6.2.0:
+    resolution: {integrity: sha512-BECkorDF1TY2rGKt9XHdSeP9TP29yUbrAaCh/C03wpyf1vx3uYcP/+8XlMcpTkgoU0rBVnHMAOaP83Rc9Tm+TQ==}
+    dev: true
+
   /mkdirp@0.5.6:
     resolution: {integrity: sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==}
     hasBin: true
@@ -13954,6 +14373,26 @@ packages:
       fsevents: 2.3.2
     dev: true
 
+  /rollup@4.5.0:
+    resolution: {integrity: sha512-41xsWhzxqjMDASCxH5ibw1mXk+3c4TNI2UjKbLxe6iEzrSQnqOzmmK8/3mufCPbzHNJ2e04Fc1ddI35hHy+8zg==}
+    engines: {node: '>=18.0.0', npm: '>=8.0.0'}
+    hasBin: true
+    optionalDependencies:
+      '@rollup/rollup-android-arm-eabi': 4.5.0
+      '@rollup/rollup-android-arm64': 4.5.0
+      '@rollup/rollup-darwin-arm64': 4.5.0
+      '@rollup/rollup-darwin-x64': 4.5.0
+      '@rollup/rollup-linux-arm-gnueabihf': 4.5.0
+      '@rollup/rollup-linux-arm64-gnu': 4.5.0
+      '@rollup/rollup-linux-arm64-musl': 4.5.0
+      '@rollup/rollup-linux-x64-gnu': 4.5.0
+      '@rollup/rollup-linux-x64-musl': 4.5.0
+      '@rollup/rollup-win32-arm64-msvc': 4.5.0
+      '@rollup/rollup-win32-ia32-msvc': 4.5.0
+      '@rollup/rollup-win32-x64-msvc': 4.5.0
+      fsevents: 2.3.3
+    dev: true
+
   /rrweb-cssom@0.6.0:
     resolution: {integrity: sha512-APM0Gt1KoXBz0iIkkdB/kfvGOwC4UuJFeG/c+yV7wSc7q96cG/kJ0HiYCnzivD9SB53cLV1MlHFNfOuPaadYSw==}
     dev: true
@@ -15794,6 +16233,42 @@ packages:
       fsevents: 2.3.2
     dev: true
 
+  /vite@5.0.0(@types/node@18.17.5):
+    resolution: {integrity: sha512-ESJVM59mdyGpsiNAeHQOR/0fqNoOyWPYesFto8FFZugfmhdHx8Fzd8sF3Q/xkVhZsyOxHfdM7ieiVAorI9RjFw==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+    hasBin: true
+    peerDependencies:
+      '@types/node': ^18.0.0 || >=20.0.0
+      less: '*'
+      lightningcss: ^1.21.0
+      sass: '*'
+      stylus: '*'
+      sugarss: '*'
+      terser: ^5.4.0
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+      less:
+        optional: true
+      lightningcss:
+        optional: true
+      sass:
+        optional: true
+      stylus:
+        optional: true
+      sugarss:
+        optional: true
+      terser:
+        optional: true
+    dependencies:
+      '@types/node': 18.17.5
+      esbuild: 0.19.6
+      postcss: 8.4.31
+      rollup: 4.5.0
+    optionalDependencies:
+      fsevents: 2.3.3
+    dev: true
+
   /vitepress-plugin-search@1.0.4-alpha.20(flexsearch@0.7.31)(vitepress@1.0.0-alpha.72)(vue@3.3.7):
     resolution: {integrity: sha512-zG+ev9pw1Mg7htABlFCNXb8XwnKN+qfTKw+vU0Ers6RIrABx+45EAAFBoaL1mEpl1FRFn1o/dQ7F4b8GP6HdGQ==}
     engines: {node: ^14.13.1 || ^16.7.0 || >=18}
@@ -15842,8 +16317,8 @@ packages:
       - terser
     dev: true
 
-  /vitepress@1.0.0-rc.25(@algolia/client-search@4.19.1)(@types/node@18.17.5)(postcss@8.4.31)(search-insights@2.7.0)(typescript@5.1.6):
-    resolution: {integrity: sha512-1dqWiHNThNrVZ08ixmfEDBEH+764KOgnev9oXga/x6cN++Vb9pnuu8p3K6DQP+KZrYcG+WiX7jxal0iSNpAWuQ==}
+  /vitepress@1.0.0-rc.29(@algolia/client-search@4.19.1)(@types/node@18.17.5)(postcss@8.4.31)(search-insights@2.7.0)(typescript@5.1.6):
+    resolution: {integrity: sha512-6sKmyEvH16SgMqkHzRwwadt9Uju13AOIqouzOVEg3Rk6X9mds6jLsq2GxnAJvg0s6bl/0Qs/cw+f8SNki82ltw==}
     hasBin: true
     peerDependencies:
       markdown-it-mathjax3: ^4.3.2
@@ -15856,18 +16331,19 @@ packages:
     dependencies:
       '@docsearch/css': 3.5.2
       '@docsearch/js': 3.5.2(@algolia/client-search@4.19.1)(search-insights@2.7.0)
-      '@types/markdown-it': 13.0.5
-      '@vitejs/plugin-vue': 4.3.1(vite@4.5.0)(vue@3.3.7)
+      '@types/markdown-it': 13.0.6
+      '@vitejs/plugin-vue': 4.5.0(vite@5.0.0)(vue@3.3.8)
       '@vue/devtools-api': 6.5.1
-      '@vueuse/core': 10.5.0(vue@3.3.7)
-      '@vueuse/integrations': 10.5.0(focus-trap@7.5.4)(vue@3.3.7)
+      '@vueuse/core': 10.6.1(vue@3.3.8)
+      '@vueuse/integrations': 10.6.1(focus-trap@7.5.4)(vue@3.3.8)
       focus-trap: 7.5.4
       mark.js: 8.11.1
-      minisearch: 6.1.0
+      minisearch: 6.2.0
+      mrmime: 1.0.1
       postcss: 8.4.31
       shiki: 0.14.5
-      vite: 4.5.0(@types/node@18.17.5)
-      vue: 3.3.7(typescript@5.1.6)
+      vite: 5.0.0(@types/node@18.17.5)
+      vue: 3.3.8(typescript@5.1.6)
     transitivePeerDependencies:
       - '@algolia/client-search'
       - '@types/node'
@@ -16027,7 +16503,7 @@ packages:
       vue: 3.3.4
     dev: true
 
-  /vue-demi@0.14.6(vue@3.3.7):
+  /vue-demi@0.14.6(vue@3.3.8):
     resolution: {integrity: sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==}
     engines: {node: '>=12'}
     hasBin: true
@@ -16039,7 +16515,7 @@ packages:
       '@vue/composition-api':
         optional: true
     dependencies:
-      vue: 3.3.7(typescript@5.1.6)
+      vue: 3.3.8(typescript@5.1.6)
     dev: true
 
   /vue@3.3.4:
@@ -16067,19 +16543,19 @@ packages:
       typescript: 5.0.4
     dev: true
 
-  /vue@3.3.7(typescript@5.1.6):
-    resolution: {integrity: sha512-YEMDia1ZTv1TeBbnu6VybatmSteGOS3A3YgfINOfraCbf85wdKHzscD6HSS/vB4GAtI7sa1XPX7HcQaJ1l24zA==}
+  /vue@3.3.8(typescript@5.1.6):
+    resolution: {integrity: sha512-5VSX/3DabBikOXMsxzlW8JyfeLKlG9mzqnWgLQLty88vdZL7ZJgrdgBOmrArwxiLtmS+lNNpPcBYqrhE6TQW5w==}
     peerDependencies:
       typescript: '*'
     peerDependenciesMeta:
       typescript:
         optional: true
     dependencies:
-      '@vue/compiler-dom': 3.3.7
-      '@vue/compiler-sfc': 3.3.7
-      '@vue/runtime-dom': 3.3.7
-      '@vue/server-renderer': 3.3.7(vue@3.3.7)
-      '@vue/shared': 3.3.7
+      '@vue/compiler-dom': 3.3.8
+      '@vue/compiler-sfc': 3.3.8
+      '@vue/runtime-dom': 3.3.8
+      '@vue/server-renderer': 3.3.8(vue@3.3.8)
+      '@vue/shared': 3.3.8
       typescript: 5.1.6
     dev: true
 

From ad6c76116dbe4a9a4d40f69bba3a54ce556dfb53 Mon Sep 17 00:00:00 2001
From: Matheus B 
Date: Mon, 20 Nov 2023 19:13:34 -0300
Subject: [PATCH 244/457] Modify getSubGraphTitleMargins to use null coalescing
 operator

---
 packages/mermaid/src/utils/getSubGraphTitleMargins.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/mermaid/src/utils/getSubGraphTitleMargins.ts b/packages/mermaid/src/utils/getSubGraphTitleMargins.ts
index 35dcaee95a..64d2e18509 100644
--- a/packages/mermaid/src/utils/getSubGraphTitleMargins.ts
+++ b/packages/mermaid/src/utils/getSubGraphTitleMargins.ts
@@ -5,8 +5,9 @@ export const getSubGraphTitleMargins = (): {
   subGraphTitleBottomMargin: number;
   subGraphTitleTotalMargin: number;
 } => {
-  const subGraphTitleTopMargin = getConfig().flowchart?.subGraphTitleMargin?.top || 0;
-  const subGraphTitleBottomMargin = getConfig().flowchart?.subGraphTitleMargin?.bottom || 0;
+  const { flowchart } = getConfig();
+  const subGraphTitleTopMargin = flowchart?.subGraphTitleMargin?.top ?? 0;
+  const subGraphTitleBottomMargin = flowchart?.subGraphTitleMargin?.bottom ?? 0;
   const subGraphTitleTotalMargin = subGraphTitleTopMargin + subGraphTitleBottomMargin;
 
   return {

From c0a43f5d5a13350b1c2bf20747b6cc5d5920156a Mon Sep 17 00:00:00 2001
From: Matheus B 
Date: Mon, 20 Nov 2023 20:40:30 -0300
Subject: [PATCH 245/457] Change getSubGraphTitleMargins to accept config
 object as parameter

---
 packages/mermaid/src/dagre-wrapper/clusters.js        | 4 ++--
 packages/mermaid/src/dagre-wrapper/index.js           | 4 ++--
 packages/mermaid/src/utils.spec.ts                    | 2 +-
 packages/mermaid/src/utils/getSubGraphTitleMargins.ts | 9 ++++++---
 4 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/packages/mermaid/src/dagre-wrapper/clusters.js b/packages/mermaid/src/dagre-wrapper/clusters.js
index 0786b35e05..1095c483bd 100644
--- a/packages/mermaid/src/dagre-wrapper/clusters.js
+++ b/packages/mermaid/src/dagre-wrapper/clusters.js
@@ -64,7 +64,7 @@ const rect = (parent, node) => {
     .attr('width', width)
     .attr('height', node.height + padding);
 
-  const { subGraphTitleTopMargin } = getSubGraphTitleMargins();
+  const { subGraphTitleTopMargin } = getSubGraphTitleMargins(getConfig());
   if (useHtmlLabels) {
     label.attr(
       'transform',
@@ -181,7 +181,7 @@ const roundedWithTitle = (parent, node) => {
     .attr('width', width + padding)
     .attr('height', node.height + padding - bbox.height - 3);
 
-  const { subGraphTitleTopMargin } = getSubGraphTitleMargins();
+  const { subGraphTitleTopMargin } = getSubGraphTitleMargins(getConfig());
   // Center the label
   label.attr(
     'transform',
diff --git a/packages/mermaid/src/dagre-wrapper/index.js b/packages/mermaid/src/dagre-wrapper/index.js
index bb14b91da5..24daafe03d 100644
--- a/packages/mermaid/src/dagre-wrapper/index.js
+++ b/packages/mermaid/src/dagre-wrapper/index.js
@@ -14,8 +14,7 @@ import { insertCluster, clear as clearClusters } from './clusters.js';
 import { insertEdgeLabel, positionEdgeLabel, insertEdge, clear as clearEdges } from './edges.js';
 import { log } from '../logger.js';
 import { getSubGraphTitleMargins } from '../utils/getSubGraphTitleMargins.js';
-
-const { subGraphTitleTotalMargin } = getSubGraphTitleMargins();
+import { getConfig } from '../diagram-api/diagramAPI.js';
 
 const recursiveRender = async (_elem, graph, diagramtype, id, parentCluster) => {
   log.info('Graph in recursive render: XXX', graphlibJson.write(graph), parentCluster);
@@ -104,6 +103,7 @@ const recursiveRender = async (_elem, graph, diagramtype, id, parentCluster) =>
   log.info('Graph after layout:', graphlibJson.write(graph));
   // Move the nodes to the correct place
   let diff = 0;
+  const { subGraphTitleTotalMargin } = getSubGraphTitleMargins(getConfig());
   sortNodesByHierarchy(graph).forEach(function (v) {
     const node = graph.node(v);
     log.info('Position ' + v + ': ' + JSON.stringify(graph.node(v)));
diff --git a/packages/mermaid/src/utils.spec.ts b/packages/mermaid/src/utils.spec.ts
index 2442e97b36..854ce2ef1d 100644
--- a/packages/mermaid/src/utils.spec.ts
+++ b/packages/mermaid/src/utils.spec.ts
@@ -609,7 +609,7 @@ describe('getSubGraphTitleMargins', () => {
     };
 
     configApi.setSiteConfig(config_0);
-    expect(getSubGraphTitleMargins()).toEqual({
+    expect(getSubGraphTitleMargins(config_0)).toEqual({
       subGraphTitleTopMargin: 10,
       subGraphTitleBottomMargin: 5,
       subGraphTitleTotalMargin: 15,
diff --git a/packages/mermaid/src/utils/getSubGraphTitleMargins.ts b/packages/mermaid/src/utils/getSubGraphTitleMargins.ts
index 64d2e18509..af07a6c961 100644
--- a/packages/mermaid/src/utils/getSubGraphTitleMargins.ts
+++ b/packages/mermaid/src/utils/getSubGraphTitleMargins.ts
@@ -1,11 +1,14 @@
-import { getConfig } from '../diagram-api/diagramAPI.js';
+import { FlowchartDiagramConfig } from '../config.type.js';
 
-export const getSubGraphTitleMargins = (): {
+export const getSubGraphTitleMargins = ({
+  flowchart,
+}: {
+  flowchart: FlowchartDiagramConfig;
+}): {
   subGraphTitleTopMargin: number;
   subGraphTitleBottomMargin: number;
   subGraphTitleTotalMargin: number;
 } => {
-  const { flowchart } = getConfig();
   const subGraphTitleTopMargin = flowchart?.subGraphTitleMargin?.top ?? 0;
   const subGraphTitleBottomMargin = flowchart?.subGraphTitleMargin?.bottom ?? 0;
   const subGraphTitleTotalMargin = subGraphTitleTopMargin + subGraphTitleBottomMargin;

From 63c2d36232f549012a7b7bfa3e4cf5610029e38b Mon Sep 17 00:00:00 2001
From: Matheus B 
Date: Mon, 20 Nov 2023 20:49:00 -0300
Subject: [PATCH 246/457] Rename file and update imports

---
 packages/mermaid/src/dagre-wrapper/clusters.js                  | 2 +-
 packages/mermaid/src/dagre-wrapper/index.js                     | 2 +-
 packages/mermaid/src/utils.spec.ts                              | 2 +-
 .../{getSubGraphTitleMargins.ts => subGraphTitleMargins.ts}     | 0
 4 files changed, 3 insertions(+), 3 deletions(-)
 rename packages/mermaid/src/utils/{getSubGraphTitleMargins.ts => subGraphTitleMargins.ts} (100%)

diff --git a/packages/mermaid/src/dagre-wrapper/clusters.js b/packages/mermaid/src/dagre-wrapper/clusters.js
index 1095c483bd..93c9f93870 100644
--- a/packages/mermaid/src/dagre-wrapper/clusters.js
+++ b/packages/mermaid/src/dagre-wrapper/clusters.js
@@ -5,7 +5,7 @@ import { createText } from '../rendering-util/createText.js';
 import { select } from 'd3';
 import { getConfig } from '../diagram-api/diagramAPI.js';
 import { evaluate } from '../diagrams/common/common.js';
-import { getSubGraphTitleMargins } from '../utils/getSubGraphTitleMargins.js';
+import { getSubGraphTitleMargins } from '../utils/subGraphTitleMargins.js';
 
 const rect = (parent, node) => {
   log.info('Creating subgraph rect for ', node.id, node);
diff --git a/packages/mermaid/src/dagre-wrapper/index.js b/packages/mermaid/src/dagre-wrapper/index.js
index 24daafe03d..0ebd9beed4 100644
--- a/packages/mermaid/src/dagre-wrapper/index.js
+++ b/packages/mermaid/src/dagre-wrapper/index.js
@@ -13,7 +13,7 @@ import { insertNode, positionNode, clear as clearNodes, setNodeElem } from './no
 import { insertCluster, clear as clearClusters } from './clusters.js';
 import { insertEdgeLabel, positionEdgeLabel, insertEdge, clear as clearEdges } from './edges.js';
 import { log } from '../logger.js';
-import { getSubGraphTitleMargins } from '../utils/getSubGraphTitleMargins.js';
+import { getSubGraphTitleMargins } from '../utils/subGraphTitleMargins.js';
 import { getConfig } from '../diagram-api/diagramAPI.js';
 
 const recursiveRender = async (_elem, graph, diagramtype, id, parentCluster) => {
diff --git a/packages/mermaid/src/utils.spec.ts b/packages/mermaid/src/utils.spec.ts
index 854ce2ef1d..60055fe44e 100644
--- a/packages/mermaid/src/utils.spec.ts
+++ b/packages/mermaid/src/utils.spec.ts
@@ -1,6 +1,6 @@
 import { vi } from 'vitest';
 import utils, { calculatePoint, cleanAndMerge, detectDirective } from './utils.js';
-import { getSubGraphTitleMargins } from './utils/getSubGraphTitleMargins.js';
+import { getSubGraphTitleMargins } from './utils/subGraphTitleMargins.js';
 import * as configApi from './config.js';
 import assignWithDepth from './assignWithDepth.js';
 import { detectType } from './diagram-api/detectType.js';
diff --git a/packages/mermaid/src/utils/getSubGraphTitleMargins.ts b/packages/mermaid/src/utils/subGraphTitleMargins.ts
similarity index 100%
rename from packages/mermaid/src/utils/getSubGraphTitleMargins.ts
rename to packages/mermaid/src/utils/subGraphTitleMargins.ts

From fc3018e977970788ea6d513b397c503dbf1f1922 Mon Sep 17 00:00:00 2001
From: Matheus B 
Date: Mon, 20 Nov 2023 20:55:43 -0300
Subject: [PATCH 247/457] Move subgraph title margin tests to independent file

---
 packages/mermaid/src/utils.spec.ts            | 22 -------------------
 .../src/utils/subGraphTitleMargins.spec.ts    | 22 +++++++++++++++++++
 2 files changed, 22 insertions(+), 22 deletions(-)
 create mode 100644 packages/mermaid/src/utils/subGraphTitleMargins.spec.ts

diff --git a/packages/mermaid/src/utils.spec.ts b/packages/mermaid/src/utils.spec.ts
index 60055fe44e..8ccf5b2107 100644
--- a/packages/mermaid/src/utils.spec.ts
+++ b/packages/mermaid/src/utils.spec.ts
@@ -1,7 +1,5 @@
 import { vi } from 'vitest';
 import utils, { calculatePoint, cleanAndMerge, detectDirective } from './utils.js';
-import { getSubGraphTitleMargins } from './utils/subGraphTitleMargins.js';
-import * as configApi from './config.js';
 import assignWithDepth from './assignWithDepth.js';
 import { detectType } from './diagram-api/detectType.js';
 import { addDiagrams } from './diagram-api/diagram-orchestration.js';
@@ -596,23 +594,3 @@ describe('calculatePoint', () => {
     );
   });
 });
-
-describe('getSubGraphTitleMargins', () => {
-  it('should get subgraph title margins after config has been set', () => {
-    const config_0 = {
-      flowchart: {
-        subGraphTitleMargin: {
-          top: 10,
-          bottom: 5,
-        },
-      },
-    };
-
-    configApi.setSiteConfig(config_0);
-    expect(getSubGraphTitleMargins(config_0)).toEqual({
-      subGraphTitleTopMargin: 10,
-      subGraphTitleBottomMargin: 5,
-      subGraphTitleTotalMargin: 15,
-    });
-  });
-});
diff --git a/packages/mermaid/src/utils/subGraphTitleMargins.spec.ts b/packages/mermaid/src/utils/subGraphTitleMargins.spec.ts
new file mode 100644
index 0000000000..c607f8bce7
--- /dev/null
+++ b/packages/mermaid/src/utils/subGraphTitleMargins.spec.ts
@@ -0,0 +1,22 @@
+import { getSubGraphTitleMargins } from './subGraphTitleMargins.js';
+import * as configApi from '../config.js';
+
+describe('getSubGraphTitleMargins', () => {
+  it('should get subgraph title margins after config has been set', () => {
+    const config_0 = {
+      flowchart: {
+        subGraphTitleMargin: {
+          top: 10,
+          bottom: 5,
+        },
+      },
+    };
+
+    configApi.setSiteConfig(config_0);
+    expect(getSubGraphTitleMargins(config_0)).toEqual({
+      subGraphTitleTopMargin: 10,
+      subGraphTitleBottomMargin: 5,
+      subGraphTitleTotalMargin: 15,
+    });
+  });
+});

From d61bfde16768e0806db24d87347e6807b4fa7109 Mon Sep 17 00:00:00 2001
From: Matheus B 
Date: Mon, 20 Nov 2023 21:06:38 -0300
Subject: [PATCH 248/457] Replace string concat with string templates

---
 packages/mermaid/src/dagre-wrapper/clusters.js | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/packages/mermaid/src/dagre-wrapper/clusters.js b/packages/mermaid/src/dagre-wrapper/clusters.js
index 93c9f93870..11fcecfc31 100644
--- a/packages/mermaid/src/dagre-wrapper/clusters.js
+++ b/packages/mermaid/src/dagre-wrapper/clusters.js
@@ -69,17 +69,13 @@ const rect = (parent, node) => {
     label.attr(
       'transform',
       // This puts the labal on top of the box instead of inside it
-      'translate(' +
-        (node.x - bbox.width / 2) +
-        ', ' +
-        (node.y - node.height / 2 + subGraphTitleTopMargin) +
-        ')'
+      `translate(${node.x - bbox.width / 2}, ${node.y - node.height / 2 + subGraphTitleTopMargin})`
     );
   } else {
     label.attr(
       'transform',
       // This puts the labal on top of the box instead of inside it
-      'translate(' + node.x + ', ' + (node.y - node.height / 2 + subGraphTitleTopMargin) + ')'
+      `translate(${node.x}, ${node.y - node.height / 2 + subGraphTitleTopMargin})`
     );
   }
   // Center the label

From d79671e04a4c9e2703052aff09d0ae5dca00ee88 Mon Sep 17 00:00:00 2001
From: Matheus B 
Date: Mon, 20 Nov 2023 21:16:10 -0300
Subject: [PATCH 249/457] Resolve lint issue

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

diff --git a/packages/mermaid/src/utils/subGraphTitleMargins.ts b/packages/mermaid/src/utils/subGraphTitleMargins.ts
index af07a6c961..426f4770d6 100644
--- a/packages/mermaid/src/utils/subGraphTitleMargins.ts
+++ b/packages/mermaid/src/utils/subGraphTitleMargins.ts
@@ -1,4 +1,4 @@
-import { FlowchartDiagramConfig } from '../config.type.js';
+import type { FlowchartDiagramConfig } from '../config.type.js';
 
 export const getSubGraphTitleMargins = ({
   flowchart,

From fd208ddcaf26612208d6306a16b0f2ddab2a3e95 Mon Sep 17 00:00:00 2001
From: Omer Priel 
Date: Tue, 21 Nov 2023 13:53:05 +0200
Subject: [PATCH 250/457] update testTimeout from 5 seconds to 10 seconds

---
 vite.config.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/vite.config.ts b/vite.config.ts
index 080ff981f5..635c525c4e 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -24,6 +24,7 @@ export default defineConfig({
       reportsDirectory: './coverage/vitest',
       exclude: ['**/node_modules/**', '**/tests/**', '**/__mocks__/**'],
     },
+    testTimeout: 10000,
   },
   build: {
     /** If you set esmExternals to true, this plugins assumes that

From 9ae00ebcdb7541cbb039c06af175a5c00e96cb83 Mon Sep 17 00:00:00 2001
From: Omer Priel 
Date: Thu, 23 Nov 2023 14:55:09 +0200
Subject: [PATCH 251/457] reset the testTimeout to 5 seconds and change it
 directly in the test

---
 packages/mermaid/src/mermaid.spec.ts | 2 +-
 vite.config.ts                       | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/mermaid/src/mermaid.spec.ts b/packages/mermaid/src/mermaid.spec.ts
index 645b5b39cb..87756dc4db 100644
--- a/packages/mermaid/src/mermaid.spec.ts
+++ b/packages/mermaid/src/mermaid.spec.ts
@@ -89,7 +89,7 @@ describe('when using mermaid and ', () => {
       ).resolves.not.toThrow();
       // should still render, even if lazyLoadedDiagrams fails
       expect(mermaidAPI.render).toHaveBeenCalled();
-    });
+    }, 20_000);
 
     it('should defer diagram load based on parameter', async () => {
       let loaded = false;
diff --git a/vite.config.ts b/vite.config.ts
index 635c525c4e..080ff981f5 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -24,7 +24,6 @@ export default defineConfig({
       reportsDirectory: './coverage/vitest',
       exclude: ['**/node_modules/**', '**/tests/**', '**/__mocks__/**'],
     },
-    testTimeout: 10000,
   },
   build: {
     /** If you set esmExternals to true, this plugins assumes that

From 78e118c876172c970f678b3adff8987167fbed5f Mon Sep 17 00:00:00 2001
From: Sidharth Vinod 
Date: Fri, 24 Nov 2023 09:42:21 +0530
Subject: [PATCH 252/457] fix: #5064 Handle case when line has only one point

---
 cypress/integration/rendering/flowchart-v2.spec.js | 12 ++++++++++++
 packages/mermaid/src/utils/lineWithOffset.ts       |  3 +++
 2 files changed, 15 insertions(+)

diff --git a/cypress/integration/rendering/flowchart-v2.spec.js b/cypress/integration/rendering/flowchart-v2.spec.js
index aac4a31b17..b7583ccf19 100644
--- a/cypress/integration/rendering/flowchart-v2.spec.js
+++ b/cypress/integration/rendering/flowchart-v2.spec.js
@@ -729,6 +729,18 @@ A ~~~ B
       {}
     );
   });
+
+  it('5064: Should render when subgraph child has links to outside node and subgraph', () => {
+    imgSnapshotTest(
+      `flowchart TB
+    Out --> In
+    subgraph Sub
+      In
+    end
+    Sub --> In`
+    );
+  });
+
   describe('Markdown strings flowchart (#4220)', () => {
     describe('html labels', () => {
       it('With styling and classes', () => {
diff --git a/packages/mermaid/src/utils/lineWithOffset.ts b/packages/mermaid/src/utils/lineWithOffset.ts
index f348d3eb35..a90eb78358 100644
--- a/packages/mermaid/src/utils/lineWithOffset.ts
+++ b/packages/mermaid/src/utils/lineWithOffset.ts
@@ -24,6 +24,9 @@ function calculateDeltaAndAngle(
 ): { angle: number; deltaX: number; deltaY: number } {
   point1 = pointTransformer(point1);
   point2 = pointTransformer(point2);
+  if (point1 === undefined || point2 === undefined) {
+    return { angle: 0, deltaX: 0, deltaY: 0 };
+  }
   const [x1, y1] = [point1.x, point1.y];
   const [x2, y2] = [point2.x, point2.y];
   const deltaX = x2 - x1;

From 3e098ab73b320626e0b48b542e420ad6311cc427 Mon Sep 17 00:00:00 2001
From: Ronid1 
Date: Wed, 22 Nov 2023 18:27:47 -0800
Subject: [PATCH 253/457] sort links alphabetically

---
 docs/ecosystem/integrations-community.md      | 182 +++++++++---------
 .../docs/ecosystem/integrations-community.md  | 182 +++++++++---------
 2 files changed, 182 insertions(+), 182 deletions(-)

diff --git a/docs/ecosystem/integrations-community.md b/docs/ecosystem/integrations-community.md
index 846ec51ac6..d74918e613 100644
--- a/docs/ecosystem/integrations-community.md
+++ b/docs/ecosystem/integrations-community.md
@@ -18,48 +18,48 @@ Below are a list of community plugins and integrations created with Mermaid.
 
 ✅ = Native support
 
+- [Atlassian Products](https://www.atlassian.com)
+  - [Mermaid for Confluence](https://marketplace.atlassian.com/apps/1224722/mermaid-for-confluence?hosting=cloud&tab=overview)
+  - [Mermaid Integration for Confluence](https://marketplace.atlassian.com/apps/1222792/mermaid-integration-for-confluence?hosting=cloud&tab=overview)
+  - [Mermaid Charts & Diagrams for Confluence](https://marketplace.atlassian.com/apps/1222572/)
+  - [Mermaid Diagrams for Confluence](https://marketplace.atlassian.com/apps/1226945/mermaid-diagrams-for-confluence?hosting=cloud&tab=overview)
+  - [Mermaid Macro for Confluence](https://marketplace.atlassian.com/apps/1231150/mermaid-macro-for-confluence?hosting=cloud&tab=overview)
+  - [Mermaid Live Editor for Confluence Cloud](https://marketplace.atlassian.com/apps/1231571/mermaid-live-editor-for-confluence?hosting=cloud&tab=overview)
+  - [Mermaid Plugin for Confluence](https://marketplace.atlassian.com/apps/1214124/mermaid-plugin-for-confluence?hosting=server&tab=overview)
+  - [EliteSoft Mermaid Charts and Diagrams](https://marketplace.atlassian.com/apps/1227286/elitesoft-mermaid-charts-and-diagrams?hosting=cloud&tab=overview)
+  - [Auto convert diagrams in Jira](https://github.com/coddingtonbear/jirafs-mermaid)
+  - [Mermaid for Jira Cloud - Draw UML diagrams easily](https://marketplace.atlassian.com/apps/1223053/mermaid-for-jira-cloud-draw-uml-diagrams-easily?hosting=cloud&tab=overview)
+  - [Mermaid Charts & Diagrams for Jira](https://marketplace.atlassian.com/apps/1224537/)
+  - [CloudScript.io Addon](https://marketplace.atlassian.com/apps/1219878/cloudscript-io-mermaid-addon?hosting=cloud&tab=overview)
+- [Azure Devops](https://docs.microsoft.com/en-us/azure/devops/project/wiki/wiki-markdown-guidance?view=azure-devops#add-mermaid-diagrams-to-a-wiki-page) ✅
+- [Deepdwn](https://billiam.itch.io/deepdwn) ✅
+- [GitBook](https://gitbook.com)
+  - [Mermaid Plugin](https://github.com/JozoVilcek/gitbook-plugin-mermaid)
+  - [Markdown with Mermaid CLI](https://github.com/miao1007/gitbook-plugin-mermaid-cli)
+  - [Mermaid plugin for GitBook](https://github.com/wwformat/gitbook-plugin-mermaid-pdf)
+- [Gitea](https://gitea.io) ✅
 - [GitHub](https://github.com) ✅
   - [Using code blocks](https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/) ✅
   - [GitHub action: Compile mermaid to image](https://github.com/neenjaw/compile-mermaid-markdown-action)
   - [svg-generator](https://github.com/SimonKenyonShepard/mermaidjs-github-svg-generator)
   - [GitHub Writer](https://github.com/ckeditor/github-writer)
 - [GitLab](https://docs.gitlab.com/ee/user/markdown.html#diagrams-and-flowcharts) ✅
-- [Gitea](https://gitea.io) ✅
-- [Azure Devops](https://docs.microsoft.com/en-us/azure/devops/project/wiki/wiki-markdown-guidance?view=azure-devops#add-mermaid-diagrams-to-a-wiki-page) ✅
+- [Mermaid Plugin for JetBrains IDEs](https://plugins.jetbrains.com/plugin/20146-mermaid)
+- [Joplin](https://joplinapp.org) ✅
+- [LiveBook](https://livebook.dev) ✅
 - [Tuleap](https://docs.tuleap.org/user-guide/writing-in-tuleap.html#graphs) ✅
 - [Mermaid Flow Visual Editor](https://www.mermaidflow.app) ✅
-- [Deepdwn](https://billiam.itch.io/deepdwn) ✅
-- [Joplin](https://joplinapp.org) ✅
+- [mermerd](https://github.com/KarnerTh/mermerd)
 - [Slab](https://slab.com) ✅
 - [Swimm](https://swimm.io) ✅
+- [NotesHub](https://noteshub.app) ✅
 - [Notion](https://notion.so) ✅
 - [Observable](https://observablehq.com/@observablehq/mermaid) ✅
 - [Obsidian](https://help.obsidian.md/Editing+and+formatting/Advanced+formatting+syntax#Diagram) ✅
-- [NotesHub](https://noteshub.app) ✅
-- [GitBook](https://gitbook.com)
-  - [Mermaid Plugin](https://github.com/JozoVilcek/gitbook-plugin-mermaid)
-  - [Markdown with Mermaid CLI](https://github.com/miao1007/gitbook-plugin-mermaid-cli)
-  - [Mermaid plugin for GitBook](https://github.com/wwformat/gitbook-plugin-mermaid-pdf)
-- [LiveBook](https://livebook.dev) ✅
-- [Atlassian Products](https://www.atlassian.com)
-  - [Mermaid for Confluence](https://marketplace.atlassian.com/apps/1224722/mermaid-for-confluence?hosting=cloud&tab=overview)
-  - [Mermaid Integration for Confluence](https://marketplace.atlassian.com/apps/1222792/mermaid-integration-for-confluence?hosting=cloud&tab=overview)
-  - [Mermaid Diagrams for Confluence](https://marketplace.atlassian.com/apps/1226945/mermaid-diagrams-for-confluence?hosting=cloud&tab=overview)
-  - [Mermaid Macro for Confluence](https://marketplace.atlassian.com/apps/1231150/mermaid-macro-for-confluence?hosting=cloud&tab=overview)
-  - [EliteSoft Mermaid Charts and Diagrams](https://marketplace.atlassian.com/apps/1227286/elitesoft-mermaid-charts-and-diagrams?hosting=cloud&tab=overview)
-  - [Mermaid for Jira Cloud - Draw UML diagrams easily](https://marketplace.atlassian.com/apps/1223053/mermaid-for-jira-cloud-draw-uml-diagrams-easily?hosting=cloud&tab=overview)
-  - [Mermaid Charts & Diagrams for Confluence](https://marketplace.atlassian.com/apps/1222572/)
-  - [Mermaid Charts & Diagrams for Jira](https://marketplace.atlassian.com/apps/1224537/)
-  - [Mermaid Live Editor for Confluence Cloud](https://marketplace.atlassian.com/apps/1231571/mermaid-live-editor-for-confluence?hosting=cloud&tab=overview)
-  - [Mermaid Plugin for Confluence](https://marketplace.atlassian.com/apps/1214124/mermaid-plugin-for-confluence?hosting=server&tab=overview)
-  - [CloudScript.io Addon](https://marketplace.atlassian.com/apps/1219878/cloudscript-io-mermaid-addon?hosting=cloud&tab=overview)
-  - [Auto convert diagrams in Jira](https://github.com/coddingtonbear/jirafs-mermaid)
 - [Redmine](https://redmine.org)
   - [Mermaid Macro](https://www.redmine.org/plugins/redmine_mermaid_macro)
   - [redmine-mermaid](https://github.com/styz/redmine_mermaid)
   - [markdown-for-mermaid-plugin](https://github.com/jamieh-mongolian/markdown-for-mermaid-plugin)
-- [Mermaid Plugin for JetBrains IDEs](https://plugins.jetbrains.com/plugin/20146-mermaid)
-- [mermerd](https://github.com/KarnerTh/mermerd)
 - Visual Studio Code [Polyglot Interactive Notebooks](https://github.com/dotnet/interactive#net-interactive)
 
 ### CRM/ERP
@@ -72,27 +72,27 @@ Customer Relationship Management/Enterprise Resource Planning
 
 Blogging frameworks and platforms
 
-- [WordPress](https://wordpress.org)
-  - [WordPress Markdown Editor](https://wordpress.org/plugins/wp-githuber-md)
-  - [WP-ReliableMD](https://wordpress.org/plugins/wp-reliablemd/)
 - [Hexo](https://hexo.io)
   - [hexo-filter-mermaid-diagrams](https://github.com/webappdevelp/hexo-filter-mermaid-diagrams)
   - [hexo-tag-mermaid](https://github.com/JameChou/hexo-tag-mermaid)
   - [hexo-mermaid-diagrams](https://github.com/mslxl/hexo-mermaid-diagrams)
 - [Nextra](https://nextra.site/)
   - [Mermaid](https://nextra.site/docs/guide/mermaid)
+- [WordPress](https://wordpress.org)
+  - [WordPress Markdown Editor](https://wordpress.org/plugins/wp-githuber-md)
+  - [WP-ReliableMD](https://wordpress.org/plugins/wp-reliablemd/)
 
 ### CMS/ECM
 
 Content Management Systems/Enterprise Content Management
 
+- [Grav CMS](https://getgrav.org/)
+  - [Mermaid Diagrams](https://github.com/DanielFlaum/grav-plugin-mermaid-diagrams)
+  - [GitLab Markdown Adapter](https://github.com/Goutte/grav-plugin-gitlab-markdown-adapter)
 - [VitePress](https://vitepress.vuejs.org/)
   - [Plugin for Mermaid.js](https://emersonbottero.github.io/vitepress-plugin-mermaid/)
 - [VuePress](https://vuepress.vuejs.org/)
   - [Plugin for Mermaid.js](https://github.com/eFrane/vuepress-plugin-mermaidjs)
-- [Grav CMS](https://getgrav.org/)
-  - [Mermaid Diagrams](https://github.com/DanielFlaum/grav-plugin-mermaid-diagrams)
-  - [GitLab Markdown Adapter](https://github.com/Goutte/grav-plugin-gitlab-markdown-adapter)
 
 ### Communication
 
@@ -102,105 +102,105 @@ Communication tools and platforms
   - [Mermaid Plugin](https://github.com/pnewell/discourse-mermaid), [And](https://github.com/unfoldingWord-dev/discourse-mermaid)
 - [Mattermost](https://mattermost.com/)
   - [Mermaid Plugin](https://github.com/SpikeTings/Mermaid)
-- [phpBB](https://phpbb.com)
-  - [phpbb-ext-mermaid](https://github.com/AlfredoRamos/phpbb-ext-mermaid)
 - [NodeBB](https://nodebb.org)
   - [Mermaid Plugin](https://www.npmjs.com/package/nodebb-plugin-mermaid)
+- [phpBB](https://phpbb.com)
+  - [phpbb-ext-mermaid](https://github.com/AlfredoRamos/phpbb-ext-mermaid)
 - [Slack](https://slack.com)
   - [Mermaid for Slack](https://github.com/JackuB/mermaid-for-slack)
 
 ### Wikis
 
+- [DokuWiki](https://dokuwiki.org)
+  - [Mermaid Plugin](https://www.dokuwiki.org/plugin:mermaid)
+  - [ComboStrap](https://combostrap.com/mermaid)
+- [Foswiki](https://foswiki.org)
+  - [Mermaid Plugin](https://foswiki.org/Extensions/MermaidPlugin)
 - [MediaWiki](https://www.mediawiki.org)
   - [Mermaid Extension](https://www.mediawiki.org/wiki/Extension:Mermaid)
   - [Flex Diagrams Extension](https://www.mediawiki.org/wiki/Extension:Flex_Diagrams)
 - [Semantic Media Wiki](https://semantic-mediawiki.org)
   - [Mermaid Plugin](https://github.com/SemanticMediaWiki/Mermaid)
-- [Foswiki](https://foswiki.org)
-  - [Mermaid Plugin](https://foswiki.org/Extensions/MermaidPlugin)
-- [DokuWiki](https://dokuwiki.org)
-  - [Mermaid Plugin](https://www.dokuwiki.org/plugin:mermaid)
-  - [ComboStrap](https://combostrap.com/mermaid)
 - [TiddlyWiki](https://tiddlywiki.com/)
   - [mermaid-tw5: full js library](https://github.com/efurlanm/mermaid-tw5)
   - [tw5-mermaid: wrapper for Mermaid Live](https://github.com/jasonmhoule/tw5-mermaid)
 
 ### Editor Plugins
 
-- [VS Code](https://code.visualstudio.com/)
-  - [Markdown Preview Mermaid Support](https://marketplace.visualstudio.com/items?itemName=bierner.markdown-mermaid)
-  - [Mermaid Preview](https://marketplace.visualstudio.com/items?itemName=vstirbu.vscode-mermaid-preview)
-  - [Markdown Preview Enhanced](https://marketplace.visualstudio.com/items?itemName=shd101wyy.markdown-preview-enhanced)
-  - [Mermaid Markdown Syntax Highlighting](https://marketplace.visualstudio.com/items?itemName=bpruitt-goddard.mermaid-markdown-syntax-highlighting)
-  - [Mermaid Editor](https://marketplace.visualstudio.com/items?itemName=tomoyukim.vscode-mermaid-editor)
-  - [Mermaid Export](https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.mermaid-export)
-  - [Markdown PDF](https://marketplace.visualstudio.com/items?itemName=yzane.markdown-pdf)
-  - [Preview](https://marketplace.visualstudio.com/items?itemName=searKing.preview-vscode)
-  - [Preview Sequence Diagrams](https://marketplace.visualstudio.com/items?itemName=arichika.previewseqdiag-vscode)
-- [Markdown-It](https://github.com/markdown-it/markdown-it)
-  - [Textual UML Parser](https://github.com/manastalukdar/markdown-it-textual-uml)
-  - [Mermaid Plugin](https://github.com/tylingsoft/markdown-it-mermaid)
-  - [md-it-mermaid](https://github.com/iamcco/md-it-mermaid)
-  - [markdown-it-mermaid-fence-new](https://github.com/Revomatico/markdown-it-mermaid-fence-new)
-  - [markdown-it-mermaid-less](https://github.com/searKing/markdown-it-mermaid-less)
 - Atom _(Atom has been [archived.](https://github.blog/2022-06-08-sunsetting-atom/))_
   - [Markdown Preview Enhanced](https://github.com/shd101wyy/markdown-preview-enhanced)
   - [Atom Mermaid](https://github.com/y-takey/atom-mermaid)
   - [Language Mermaid Syntax Highlighter](https://github.com/ytisf/language-mermaid)
-- [Sublime Text 3](https://sublimetext.com)
-  - [Mermaid Package](https://packagecontrol.io/packages/Mermaid)
 - [Astah](https://astah.net)
   - [Export to Mermaid](https://github.com/Avens666/Astah_Jude_UML_export_to_Markdown-mermaid-Plantuml-)
-- [Light Table](http://lighttable.com/)
-  - [Mermaid Plugin](https://github.com/cldwalker/Mermaid)
+- [Brackets](https://brackets.io/)
+  - [Mermaid Preview](https://github.com/AlanHohn/mermaid-preview)
+- [CKEditor](https://github.com/ckeditor/ckeditor5)
+  - [CKEditor 5 Mermaid plugin](https://github.com/ckeditor/ckeditor5-mermaid)
 - [Draw.io](https://draw.io) - [Plugin](https://github.com/nopeslide/drawio_mermaid_plugin)
-- [Inkdrop](https://www.inkdrop.app) - [Plugin](https://github.com/inkdropapp/inkdrop-mermaid)
-- [Vim](https://www.vim.org)
-  - [Official Vim Syntax and ftplugin](https://github.com/craigmac/vim-mermaid)
-  - [Vim Diagram Syntax](https://github.com/zhaozg/vim-diagram)
 - [GNU Emacs](https://www.gnu.org/software/emacs/)
   - [Major mode for .mmd files](https://github.com/abrochard/mermaid-mode)
   - [Org-Mode integration](https://github.com/arnm/ob-mermaid)
-- [Brackets](https://brackets.io/)
-  - [Mermaid Preview](https://github.com/AlanHohn/mermaid-preview)
-- [Iodide](https://github.com/iodide-project/iodide)
-  - [iodide-mermaid-plugin](https://github.com/iodide-project/iodide-mermaid-plugin)
+- [GNU Nano](https://www.nano-editor.org/)
+  - [Nano Mermaid](https://github.com/Yash-Singh1/nano-mermaid)
 - [Google docs](https://docs.google.com/)
   - [Mermaid plugin for google docs](https://workspace.google.com/marketplace/app/mermaid/636321283856)
+- [Inkdrop](https://www.inkdrop.app) - [Plugin](https://github.com/inkdropapp/inkdrop-mermaid)
+- [Iodide](https://github.com/iodide-project/iodide)
+  - [iodide-mermaid-plugin](https://github.com/iodide-project/iodide-mermaid-plugin)
+- [Light Table](http://lighttable.com/)
+  - [Mermaid Plugin](https://github.com/cldwalker/Mermaid)
+- [Markdown-It](https://github.com/markdown-it/markdown-it)
+  - [Textual UML Parser](https://github.com/manastalukdar/markdown-it-textual-uml)
+  - [Mermaid Plugin](https://github.com/tylingsoft/markdown-it-mermaid)
+  - [md-it-mermaid](https://github.com/iamcco/md-it-mermaid)
+  - [markdown-it-mermaid-fence-new](https://github.com/Revomatico/markdown-it-mermaid-fence-new)
+  - [markdown-it-mermaid-less](https://github.com/searKing/markdown-it-mermaid-less)
 - [Podlite](https://github.com/zag/podlite-desktop)
   - [Named block =Diagram](https://github.com/zag/podlite/tree/main/packages/podlite-diagrams)
-- [GNU Nano](https://www.nano-editor.org/)
-  - [Nano Mermaid](https://github.com/Yash-Singh1/nano-mermaid)
-- [CKEditor](https://github.com/ckeditor/ckeditor5)
-  - [CKEditor 5 Mermaid plugin](https://github.com/ckeditor/ckeditor5-mermaid)
 - [Standard Notes](https://standardnotes.com/)
   - [sn-mermaid](https://github.com/nienow/sn-mermaid)
+- [Sublime Text 3](https://sublimetext.com)
+  - [Mermaid Package](https://packagecontrol.io/packages/Mermaid)
+- [VS Code](https://code.visualstudio.com/)
+  - [Markdown Preview Mermaid Support](https://marketplace.visualstudio.com/items?itemName=bierner.markdown-mermaid)
+  - [Mermaid Preview](https://marketplace.visualstudio.com/items?itemName=vstirbu.vscode-mermaid-preview)
+  - [Markdown Preview Enhanced](https://marketplace.visualstudio.com/items?itemName=shd101wyy.markdown-preview-enhanced)
+  - [Mermaid Markdown Syntax Highlighting](https://marketplace.visualstudio.com/items?itemName=bpruitt-goddard.mermaid-markdown-syntax-highlighting)
+  - [Mermaid Editor](https://marketplace.visualstudio.com/items?itemName=tomoyukim.vscode-mermaid-editor)
+  - [Mermaid Export](https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.mermaid-export)
+  - [Markdown PDF](https://marketplace.visualstudio.com/items?itemName=yzane.markdown-pdf)
+  - [Preview](https://marketplace.visualstudio.com/items?itemName=searKing.preview-vscode)
+  - [Preview Sequence Diagrams](https://marketplace.visualstudio.com/items?itemName=arichika.previewseqdiag-vscode)
+- [Vim](https://www.vim.org)
+  - [Official Vim Syntax and ftplugin](https://github.com/craigmac/vim-mermaid)
+  - [Vim Diagram Syntax](https://github.com/zhaozg/vim-diagram)
 
 ### Document Generation
 
+- [Codedoc](https://codedoc.cc/)
+  - [codedoc-mermaid-plugin](https://www.npmjs.com/package/codedoc-mermaid-plugin)
+- [Docsy Hugo Theme](https://www.docsy.dev/docs/adding-content/lookandfeel/#diagrams-with-mermaid) (native support in theme)
 - [Docusaurus](https://docusaurus.io/docs/markdown-features/diagrams) ✅
-- [Swimm - Up-to-date diagrams with Swimm, the knowledge management tool for code](https://docs.swimm.io/features/diagrams-and-charts/#mermaid--swimm--up-to-date-diagrams-)
-- [Sphinx](https://www.sphinx-doc.org/en/master/)
-  - [sphinxcontrib-mermaid](https://github.com/mgaitan/sphinxcontrib-mermaid)
-- [remark](https://remark.js.org/)
-  - [remark-mermaidjs](https://github.com/remcohaszing/remark-mermaidjs)
-- [rehype](https://github.com/rehypejs/rehype)
-  - [rehype-mermaid](https://github.com/remcohaszing/rehype-mermaid)
 - [Gatsby](https://www.gatsbyjs.com/)
   - [gatsby-remark-mermaid](https://github.com/remcohaszing/gatsby-remark-mermaid)
 - [JSDoc](https://jsdoc.app/)
   - [jsdoc-mermaid](https://github.com/Jellyvision/jsdoc-mermaid)
+- [mdbook](https://rust-lang.github.io/mdBook/index.html)
+  - [mdbook-mermaid](https://github.com/badboy/mdbook-mermaid)
 - [MkDocs](https://www.mkdocs.org)
   - [mkdocs-mermaid2-plugin](https://github.com/fralau/mkdocs-mermaid2-plugin)
   - [mkdocs-material](https://github.com/squidfunk/mkdocs-material), check the [docs](https://squidfunk.github.io/mkdocs-material/reference/diagrams/)
+  - [Quarto](https://quarto.org/)
+- [rehype](https://github.com/rehypejs/rehype)
+  - [rehype-mermaid](https://github.com/remcohaszing/rehype-mermaid)
+- [remark](https://remark.js.org/)
+  - [remark-mermaidjs](https://github.com/remcohaszing/remark-mermaidjs)
+- [Sphinx](https://www.sphinx-doc.org/en/master/)
+  - [sphinxcontrib-mermaid](https://github.com/mgaitan/sphinxcontrib-mermaid)
+- [Swimm - Up-to-date diagrams with Swimm, the knowledge management tool for code](https://docs.swimm.io/features/diagrams-and-charts/#mermaid--swimm--up-to-date-diagrams-)
 - [Type Doc](https://typedoc.org/)
   - [typedoc-plugin-mermaid](https://www.npmjs.com/package/typedoc-plugin-mermaid)
-- [Docsy Hugo Theme](https://www.docsy.dev/docs/adding-content/lookandfeel/#diagrams-with-mermaid) (native support in theme)
-- [Codedoc](https://codedoc.cc/)
-  - [codedoc-mermaid-plugin](https://www.npmjs.com/package/codedoc-mermaid-plugin)
-- [mdbook](https://rust-lang.github.io/mdBook/index.html)
-  - [mdbook-mermaid](https://github.com/badboy/mdbook-mermaid)
-- [Quarto](https://quarto.org/)
 - [Typora](https://typora.io/) ([native support](https://support.typora.io/Draw-Diagrams-With-Markdown/#mermaid))
 
 ### Browser Extensions
@@ -220,19 +220,19 @@ Communication tools and platforms
 
 ### Other
 
+- [Bisheng](https://www.npmjs.com/package/bisheng)
+  - [bisheng-plugin-mermaid](https://github.com/yct21/bisheng-plugin-mermaid)
+- [ExDoc](https://github.com/elixir-lang/ex_doc)
+  - [Rendering Mermaid graphs](https://github.com/elixir-lang/ex_doc#rendering-mermaid-graphs)
 - [Jekyll](https://jekyllrb.com/)
   - [jekyll-mermaid](https://rubygems.org/gems/jekyll-mermaid)
   - [jekyll-mermaid-diagrams](https://github.com/fuzhibo/jekyll-mermaid-diagrams)
-- [Reveal.js](https://github.com/hakimel/reveal.js)
-  - [reveal.js-mermaid-plugin](https://github.com/ludwick/reveal.js-mermaid-plugin)
-- [Bisheng](https://www.npmjs.com/package/bisheng)
-  - [bisheng-plugin-mermaid](https://github.com/yct21/bisheng-plugin-mermaid)
-- [Reveal CK](https://github.com/jedcn/reveal-ck)
-  - [reveal-ck-mermaid-plugin](https://github.com/tmtm/reveal-ck-mermaid-plugin)
 - [mermaid-isomorphic](https://github.com/remcohaszing/mermaid-isomorphic)
 - [mermaid-server: Generate diagrams using a HTTP request](https://github.com/TomWright/mermaid-server)
-- [ExDoc](https://github.com/elixir-lang/ex_doc)
-  - [Rendering Mermaid graphs](https://github.com/elixir-lang/ex_doc#rendering-mermaid-graphs)
 - [NiceGUI: Let any browser be the frontend of your Python code](https://nicegui.io)
   - [ui.mermaid(...)](https://nicegui.io/reference#mermaid_diagrams)
   - [ui.markdown(..., extras=\['mermaid'\])](https://nicegui.io/reference#markdown_element)
+- [Reveal.js](https://github.com/hakimel/reveal.js)
+  - [reveal.js-mermaid-plugin](https://github.com/ludwick/reveal.js-mermaid-plugin)
+- [Reveal CK](https://github.com/jedcn/reveal-ck)
+  - [reveal-ck-mermaid-plugin](https://github.com/tmtm/reveal-ck-mermaid-plugin)
diff --git a/packages/mermaid/src/docs/ecosystem/integrations-community.md b/packages/mermaid/src/docs/ecosystem/integrations-community.md
index b3f7213046..b48746bc41 100644
--- a/packages/mermaid/src/docs/ecosystem/integrations-community.md
+++ b/packages/mermaid/src/docs/ecosystem/integrations-community.md
@@ -16,48 +16,48 @@ Below are a list of community plugins and integrations created with Mermaid.
 
 ✅ = Native support
 
+- [Atlassian Products](https://www.atlassian.com)
+  - [Mermaid for Confluence](https://marketplace.atlassian.com/apps/1224722/mermaid-for-confluence?hosting=cloud&tab=overview)
+  - [Mermaid Integration for Confluence](https://marketplace.atlassian.com/apps/1222792/mermaid-integration-for-confluence?hosting=cloud&tab=overview)
+  - [Mermaid Charts & Diagrams for Confluence](https://marketplace.atlassian.com/apps/1222572/)
+  - [Mermaid Diagrams for Confluence](https://marketplace.atlassian.com/apps/1226945/mermaid-diagrams-for-confluence?hosting=cloud&tab=overview)
+  - [Mermaid Macro for Confluence](https://marketplace.atlassian.com/apps/1231150/mermaid-macro-for-confluence?hosting=cloud&tab=overview)
+  - [Mermaid Live Editor for Confluence Cloud](https://marketplace.atlassian.com/apps/1231571/mermaid-live-editor-for-confluence?hosting=cloud&tab=overview)
+  - [Mermaid Plugin for Confluence](https://marketplace.atlassian.com/apps/1214124/mermaid-plugin-for-confluence?hosting=server&tab=overview)
+  - [EliteSoft Mermaid Charts and Diagrams](https://marketplace.atlassian.com/apps/1227286/elitesoft-mermaid-charts-and-diagrams?hosting=cloud&tab=overview)
+  - [Auto convert diagrams in Jira](https://github.com/coddingtonbear/jirafs-mermaid)
+  - [Mermaid for Jira Cloud - Draw UML diagrams easily](https://marketplace.atlassian.com/apps/1223053/mermaid-for-jira-cloud-draw-uml-diagrams-easily?hosting=cloud&tab=overview)
+  - [Mermaid Charts & Diagrams for Jira](https://marketplace.atlassian.com/apps/1224537/)
+  - [CloudScript.io Addon](https://marketplace.atlassian.com/apps/1219878/cloudscript-io-mermaid-addon?hosting=cloud&tab=overview)
+- [Azure Devops](https://docs.microsoft.com/en-us/azure/devops/project/wiki/wiki-markdown-guidance?view=azure-devops#add-mermaid-diagrams-to-a-wiki-page) ✅
+- [Deepdwn](https://billiam.itch.io/deepdwn) ✅
+- [GitBook](https://gitbook.com)
+  - [Mermaid Plugin](https://github.com/JozoVilcek/gitbook-plugin-mermaid)
+  - [Markdown with Mermaid CLI](https://github.com/miao1007/gitbook-plugin-mermaid-cli)
+  - [Mermaid plugin for GitBook](https://github.com/wwformat/gitbook-plugin-mermaid-pdf)
+- [Gitea](https://gitea.io) ✅
 - [GitHub](https://github.com) ✅
   - [Using code blocks](https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/) ✅
   - [GitHub action: Compile mermaid to image](https://github.com/neenjaw/compile-mermaid-markdown-action)
   - [svg-generator](https://github.com/SimonKenyonShepard/mermaidjs-github-svg-generator)
   - [GitHub Writer](https://github.com/ckeditor/github-writer)
 - [GitLab](https://docs.gitlab.com/ee/user/markdown.html#diagrams-and-flowcharts) ✅
-- [Gitea](https://gitea.io) ✅
-- [Azure Devops](https://docs.microsoft.com/en-us/azure/devops/project/wiki/wiki-markdown-guidance?view=azure-devops#add-mermaid-diagrams-to-a-wiki-page) ✅
+- [Mermaid Plugin for JetBrains IDEs](https://plugins.jetbrains.com/plugin/20146-mermaid)
+- [Joplin](https://joplinapp.org) ✅
+- [LiveBook](https://livebook.dev) ✅
 - [Tuleap](https://docs.tuleap.org/user-guide/writing-in-tuleap.html#graphs) ✅
 - [Mermaid Flow Visual Editor](https://www.mermaidflow.app) ✅
-- [Deepdwn](https://billiam.itch.io/deepdwn) ✅
-- [Joplin](https://joplinapp.org) ✅
+- [mermerd](https://github.com/KarnerTh/mermerd)
 - [Slab](https://slab.com) ✅
 - [Swimm](https://swimm.io) ✅
+- [NotesHub](https://noteshub.app) ✅
 - [Notion](https://notion.so) ✅
 - [Observable](https://observablehq.com/@observablehq/mermaid) ✅
 - [Obsidian](https://help.obsidian.md/Editing+and+formatting/Advanced+formatting+syntax#Diagram) ✅
-- [NotesHub](https://noteshub.app) ✅
-- [GitBook](https://gitbook.com)
-  - [Mermaid Plugin](https://github.com/JozoVilcek/gitbook-plugin-mermaid)
-  - [Markdown with Mermaid CLI](https://github.com/miao1007/gitbook-plugin-mermaid-cli)
-  - [Mermaid plugin for GitBook](https://github.com/wwformat/gitbook-plugin-mermaid-pdf)
-- [LiveBook](https://livebook.dev) ✅
-- [Atlassian Products](https://www.atlassian.com)
-  - [Mermaid for Confluence](https://marketplace.atlassian.com/apps/1224722/mermaid-for-confluence?hosting=cloud&tab=overview)
-  - [Mermaid Integration for Confluence](https://marketplace.atlassian.com/apps/1222792/mermaid-integration-for-confluence?hosting=cloud&tab=overview)
-  - [Mermaid Diagrams for Confluence](https://marketplace.atlassian.com/apps/1226945/mermaid-diagrams-for-confluence?hosting=cloud&tab=overview)
-  - [Mermaid Macro for Confluence](https://marketplace.atlassian.com/apps/1231150/mermaid-macro-for-confluence?hosting=cloud&tab=overview)
-  - [EliteSoft Mermaid Charts and Diagrams](https://marketplace.atlassian.com/apps/1227286/elitesoft-mermaid-charts-and-diagrams?hosting=cloud&tab=overview)
-  - [Mermaid for Jira Cloud - Draw UML diagrams easily](https://marketplace.atlassian.com/apps/1223053/mermaid-for-jira-cloud-draw-uml-diagrams-easily?hosting=cloud&tab=overview)
-  - [Mermaid Charts & Diagrams for Confluence](https://marketplace.atlassian.com/apps/1222572/)
-  - [Mermaid Charts & Diagrams for Jira](https://marketplace.atlassian.com/apps/1224537/)
-  - [Mermaid Live Editor for Confluence Cloud](https://marketplace.atlassian.com/apps/1231571/mermaid-live-editor-for-confluence?hosting=cloud&tab=overview)
-  - [Mermaid Plugin for Confluence](https://marketplace.atlassian.com/apps/1214124/mermaid-plugin-for-confluence?hosting=server&tab=overview)
-  - [CloudScript.io Addon](https://marketplace.atlassian.com/apps/1219878/cloudscript-io-mermaid-addon?hosting=cloud&tab=overview)
-  - [Auto convert diagrams in Jira](https://github.com/coddingtonbear/jirafs-mermaid)
 - [Redmine](https://redmine.org)
   - [Mermaid Macro](https://www.redmine.org/plugins/redmine_mermaid_macro)
   - [redmine-mermaid](https://github.com/styz/redmine_mermaid)
   - [markdown-for-mermaid-plugin](https://github.com/jamieh-mongolian/markdown-for-mermaid-plugin)
-- [Mermaid Plugin for JetBrains IDEs](https://plugins.jetbrains.com/plugin/20146-mermaid)
-- [mermerd](https://github.com/KarnerTh/mermerd)
 - Visual Studio Code [Polyglot Interactive Notebooks](https://github.com/dotnet/interactive#net-interactive)
 
 ### CRM/ERP
@@ -70,27 +70,27 @@ Customer Relationship Management/Enterprise Resource Planning
 
 Blogging frameworks and platforms
 
-- [WordPress](https://wordpress.org)
-  - [WordPress Markdown Editor](https://wordpress.org/plugins/wp-githuber-md)
-  - [WP-ReliableMD](https://wordpress.org/plugins/wp-reliablemd/)
 - [Hexo](https://hexo.io)
   - [hexo-filter-mermaid-diagrams](https://github.com/webappdevelp/hexo-filter-mermaid-diagrams)
   - [hexo-tag-mermaid](https://github.com/JameChou/hexo-tag-mermaid)
   - [hexo-mermaid-diagrams](https://github.com/mslxl/hexo-mermaid-diagrams)
 - [Nextra](https://nextra.site/)
   - [Mermaid](https://nextra.site/docs/guide/mermaid)
+- [WordPress](https://wordpress.org)
+  - [WordPress Markdown Editor](https://wordpress.org/plugins/wp-githuber-md)
+  - [WP-ReliableMD](https://wordpress.org/plugins/wp-reliablemd/)
 
 ### CMS/ECM
 
 Content Management Systems/Enterprise Content Management
 
+- [Grav CMS](https://getgrav.org/)
+  - [Mermaid Diagrams](https://github.com/DanielFlaum/grav-plugin-mermaid-diagrams)
+  - [GitLab Markdown Adapter](https://github.com/Goutte/grav-plugin-gitlab-markdown-adapter)
 - [VitePress](https://vitepress.vuejs.org/)
   - [Plugin for Mermaid.js](https://emersonbottero.github.io/vitepress-plugin-mermaid/)
 - [VuePress](https://vuepress.vuejs.org/)
   - [Plugin for Mermaid.js](https://github.com/eFrane/vuepress-plugin-mermaidjs)
-- [Grav CMS](https://getgrav.org/)
-  - [Mermaid Diagrams](https://github.com/DanielFlaum/grav-plugin-mermaid-diagrams)
-  - [GitLab Markdown Adapter](https://github.com/Goutte/grav-plugin-gitlab-markdown-adapter)
 
 ### Communication
 
@@ -100,105 +100,105 @@ Communication tools and platforms
   - [Mermaid Plugin](https://github.com/pnewell/discourse-mermaid), [And](https://github.com/unfoldingWord-dev/discourse-mermaid)
 - [Mattermost](https://mattermost.com/)
   - [Mermaid Plugin](https://github.com/SpikeTings/Mermaid)
-- [phpBB](https://phpbb.com)
-  - [phpbb-ext-mermaid](https://github.com/AlfredoRamos/phpbb-ext-mermaid)
 - [NodeBB](https://nodebb.org)
   - [Mermaid Plugin](https://www.npmjs.com/package/nodebb-plugin-mermaid)
+- [phpBB](https://phpbb.com)
+  - [phpbb-ext-mermaid](https://github.com/AlfredoRamos/phpbb-ext-mermaid)
 - [Slack](https://slack.com)
   - [Mermaid for Slack](https://github.com/JackuB/mermaid-for-slack)
 
 ### Wikis
 
+- [DokuWiki](https://dokuwiki.org)
+  - [Mermaid Plugin](https://www.dokuwiki.org/plugin:mermaid)
+  - [ComboStrap](https://combostrap.com/mermaid)
+- [Foswiki](https://foswiki.org)
+  - [Mermaid Plugin](https://foswiki.org/Extensions/MermaidPlugin)
 - [MediaWiki](https://www.mediawiki.org)
   - [Mermaid Extension](https://www.mediawiki.org/wiki/Extension:Mermaid)
   - [Flex Diagrams Extension](https://www.mediawiki.org/wiki/Extension:Flex_Diagrams)
 - [Semantic Media Wiki](https://semantic-mediawiki.org)
   - [Mermaid Plugin](https://github.com/SemanticMediaWiki/Mermaid)
-- [Foswiki](https://foswiki.org)
-  - [Mermaid Plugin](https://foswiki.org/Extensions/MermaidPlugin)
-- [DokuWiki](https://dokuwiki.org)
-  - [Mermaid Plugin](https://www.dokuwiki.org/plugin:mermaid)
-  - [ComboStrap](https://combostrap.com/mermaid)
 - [TiddlyWiki](https://tiddlywiki.com/)
   - [mermaid-tw5: full js library](https://github.com/efurlanm/mermaid-tw5)
   - [tw5-mermaid: wrapper for Mermaid Live](https://github.com/jasonmhoule/tw5-mermaid)
 
 ### Editor Plugins
 
-- [VS Code](https://code.visualstudio.com/)
-  - [Markdown Preview Mermaid Support](https://marketplace.visualstudio.com/items?itemName=bierner.markdown-mermaid)
-  - [Mermaid Preview](https://marketplace.visualstudio.com/items?itemName=vstirbu.vscode-mermaid-preview)
-  - [Markdown Preview Enhanced](https://marketplace.visualstudio.com/items?itemName=shd101wyy.markdown-preview-enhanced)
-  - [Mermaid Markdown Syntax Highlighting](https://marketplace.visualstudio.com/items?itemName=bpruitt-goddard.mermaid-markdown-syntax-highlighting)
-  - [Mermaid Editor](https://marketplace.visualstudio.com/items?itemName=tomoyukim.vscode-mermaid-editor)
-  - [Mermaid Export](https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.mermaid-export)
-  - [Markdown PDF](https://marketplace.visualstudio.com/items?itemName=yzane.markdown-pdf)
-  - [Preview](https://marketplace.visualstudio.com/items?itemName=searKing.preview-vscode)
-  - [Preview Sequence Diagrams](https://marketplace.visualstudio.com/items?itemName=arichika.previewseqdiag-vscode)
-- [Markdown-It](https://github.com/markdown-it/markdown-it)
-  - [Textual UML Parser](https://github.com/manastalukdar/markdown-it-textual-uml)
-  - [Mermaid Plugin](https://github.com/tylingsoft/markdown-it-mermaid)
-  - [md-it-mermaid](https://github.com/iamcco/md-it-mermaid)
-  - [markdown-it-mermaid-fence-new](https://github.com/Revomatico/markdown-it-mermaid-fence-new)
-  - [markdown-it-mermaid-less](https://github.com/searKing/markdown-it-mermaid-less)
 - Atom _(Atom has been [archived.](https://github.blog/2022-06-08-sunsetting-atom/))_
   - [Markdown Preview Enhanced](https://github.com/shd101wyy/markdown-preview-enhanced)
   - [Atom Mermaid](https://github.com/y-takey/atom-mermaid)
   - [Language Mermaid Syntax Highlighter](https://github.com/ytisf/language-mermaid)
-- [Sublime Text 3](https://sublimetext.com)
-  - [Mermaid Package](https://packagecontrol.io/packages/Mermaid)
 - [Astah](https://astah.net)
   - [Export to Mermaid](https://github.com/Avens666/Astah_Jude_UML_export_to_Markdown-mermaid-Plantuml-)
-- [Light Table](http://lighttable.com/)
-  - [Mermaid Plugin](https://github.com/cldwalker/Mermaid)
+- [Brackets](https://brackets.io/)
+  - [Mermaid Preview](https://github.com/AlanHohn/mermaid-preview)
+- [CKEditor](https://github.com/ckeditor/ckeditor5)
+  - [CKEditor 5 Mermaid plugin](https://github.com/ckeditor/ckeditor5-mermaid)
 - [Draw.io](https://draw.io) - [Plugin](https://github.com/nopeslide/drawio_mermaid_plugin)
-- [Inkdrop](https://www.inkdrop.app) - [Plugin](https://github.com/inkdropapp/inkdrop-mermaid)
-- [Vim](https://www.vim.org)
-  - [Official Vim Syntax and ftplugin](https://github.com/craigmac/vim-mermaid)
-  - [Vim Diagram Syntax](https://github.com/zhaozg/vim-diagram)
 - [GNU Emacs](https://www.gnu.org/software/emacs/)
   - [Major mode for .mmd files](https://github.com/abrochard/mermaid-mode)
   - [Org-Mode integration](https://github.com/arnm/ob-mermaid)
-- [Brackets](https://brackets.io/)
-  - [Mermaid Preview](https://github.com/AlanHohn/mermaid-preview)
-- [Iodide](https://github.com/iodide-project/iodide)
-  - [iodide-mermaid-plugin](https://github.com/iodide-project/iodide-mermaid-plugin)
+- [GNU Nano](https://www.nano-editor.org/)
+  - [Nano Mermaid](https://github.com/Yash-Singh1/nano-mermaid)
 - [Google docs](https://docs.google.com/)
   - [Mermaid plugin for google docs](https://workspace.google.com/marketplace/app/mermaid/636321283856)
+- [Inkdrop](https://www.inkdrop.app) - [Plugin](https://github.com/inkdropapp/inkdrop-mermaid)
+- [Iodide](https://github.com/iodide-project/iodide)
+  - [iodide-mermaid-plugin](https://github.com/iodide-project/iodide-mermaid-plugin)
+- [Light Table](http://lighttable.com/)
+  - [Mermaid Plugin](https://github.com/cldwalker/Mermaid)
+- [Markdown-It](https://github.com/markdown-it/markdown-it)
+  - [Textual UML Parser](https://github.com/manastalukdar/markdown-it-textual-uml)
+  - [Mermaid Plugin](https://github.com/tylingsoft/markdown-it-mermaid)
+  - [md-it-mermaid](https://github.com/iamcco/md-it-mermaid)
+  - [markdown-it-mermaid-fence-new](https://github.com/Revomatico/markdown-it-mermaid-fence-new)
+  - [markdown-it-mermaid-less](https://github.com/searKing/markdown-it-mermaid-less)
 - [Podlite](https://github.com/zag/podlite-desktop)
   - [Named block =Diagram](https://github.com/zag/podlite/tree/main/packages/podlite-diagrams)
-- [GNU Nano](https://www.nano-editor.org/)
-  - [Nano Mermaid](https://github.com/Yash-Singh1/nano-mermaid)
-- [CKEditor](https://github.com/ckeditor/ckeditor5)
-  - [CKEditor 5 Mermaid plugin](https://github.com/ckeditor/ckeditor5-mermaid)
 - [Standard Notes](https://standardnotes.com/)
   - [sn-mermaid](https://github.com/nienow/sn-mermaid)
+- [Sublime Text 3](https://sublimetext.com)
+  - [Mermaid Package](https://packagecontrol.io/packages/Mermaid)
+- [VS Code](https://code.visualstudio.com/)
+  - [Markdown Preview Mermaid Support](https://marketplace.visualstudio.com/items?itemName=bierner.markdown-mermaid)
+  - [Mermaid Preview](https://marketplace.visualstudio.com/items?itemName=vstirbu.vscode-mermaid-preview)
+  - [Markdown Preview Enhanced](https://marketplace.visualstudio.com/items?itemName=shd101wyy.markdown-preview-enhanced)
+  - [Mermaid Markdown Syntax Highlighting](https://marketplace.visualstudio.com/items?itemName=bpruitt-goddard.mermaid-markdown-syntax-highlighting)
+  - [Mermaid Editor](https://marketplace.visualstudio.com/items?itemName=tomoyukim.vscode-mermaid-editor)
+  - [Mermaid Export](https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.mermaid-export)
+  - [Markdown PDF](https://marketplace.visualstudio.com/items?itemName=yzane.markdown-pdf)
+  - [Preview](https://marketplace.visualstudio.com/items?itemName=searKing.preview-vscode)
+  - [Preview Sequence Diagrams](https://marketplace.visualstudio.com/items?itemName=arichika.previewseqdiag-vscode)
+- [Vim](https://www.vim.org)
+  - [Official Vim Syntax and ftplugin](https://github.com/craigmac/vim-mermaid)
+  - [Vim Diagram Syntax](https://github.com/zhaozg/vim-diagram)
 
 ### Document Generation
 
+- [Codedoc](https://codedoc.cc/)
+  - [codedoc-mermaid-plugin](https://www.npmjs.com/package/codedoc-mermaid-plugin)
+- [Docsy Hugo Theme](https://www.docsy.dev/docs/adding-content/lookandfeel/#diagrams-with-mermaid) (native support in theme)
 - [Docusaurus](https://docusaurus.io/docs/markdown-features/diagrams) ✅
-- [Swimm - Up-to-date diagrams with Swimm, the knowledge management tool for code](https://docs.swimm.io/features/diagrams-and-charts/#mermaid--swimm--up-to-date-diagrams-)
-- [Sphinx](https://www.sphinx-doc.org/en/master/)
-  - [sphinxcontrib-mermaid](https://github.com/mgaitan/sphinxcontrib-mermaid)
-- [remark](https://remark.js.org/)
-  - [remark-mermaidjs](https://github.com/remcohaszing/remark-mermaidjs)
-- [rehype](https://github.com/rehypejs/rehype)
-  - [rehype-mermaid](https://github.com/remcohaszing/rehype-mermaid)
 - [Gatsby](https://www.gatsbyjs.com/)
   - [gatsby-remark-mermaid](https://github.com/remcohaszing/gatsby-remark-mermaid)
 - [JSDoc](https://jsdoc.app/)
   - [jsdoc-mermaid](https://github.com/Jellyvision/jsdoc-mermaid)
+- [mdbook](https://rust-lang.github.io/mdBook/index.html)
+  - [mdbook-mermaid](https://github.com/badboy/mdbook-mermaid)
 - [MkDocs](https://www.mkdocs.org)
   - [mkdocs-mermaid2-plugin](https://github.com/fralau/mkdocs-mermaid2-plugin)
   - [mkdocs-material](https://github.com/squidfunk/mkdocs-material), check the [docs](https://squidfunk.github.io/mkdocs-material/reference/diagrams/)
+  - [Quarto](https://quarto.org/)
+- [rehype](https://github.com/rehypejs/rehype)
+  - [rehype-mermaid](https://github.com/remcohaszing/rehype-mermaid)
+- [remark](https://remark.js.org/)
+  - [remark-mermaidjs](https://github.com/remcohaszing/remark-mermaidjs)
+- [Sphinx](https://www.sphinx-doc.org/en/master/)
+  - [sphinxcontrib-mermaid](https://github.com/mgaitan/sphinxcontrib-mermaid)
+- [Swimm - Up-to-date diagrams with Swimm, the knowledge management tool for code](https://docs.swimm.io/Features/diagrams-and-charts#mermaid--swimm--up-to-date-diagrams-)
 - [Type Doc](https://typedoc.org/)
   - [typedoc-plugin-mermaid](https://www.npmjs.com/package/typedoc-plugin-mermaid)
-- [Docsy Hugo Theme](https://www.docsy.dev/docs/adding-content/lookandfeel/#diagrams-with-mermaid) (native support in theme)
-- [Codedoc](https://codedoc.cc/)
-  - [codedoc-mermaid-plugin](https://www.npmjs.com/package/codedoc-mermaid-plugin)
-- [mdbook](https://rust-lang.github.io/mdBook/index.html)
-  - [mdbook-mermaid](https://github.com/badboy/mdbook-mermaid)
-- [Quarto](https://quarto.org/)
 - [Typora](https://typora.io/) ([native support](https://support.typora.io/Draw-Diagrams-With-Markdown/#mermaid))
 
 ### Browser Extensions
@@ -218,19 +218,19 @@ Communication tools and platforms
 
 ### Other
 
+- [Bisheng](https://www.npmjs.com/package/bisheng)
+  - [bisheng-plugin-mermaid](https://github.com/yct21/bisheng-plugin-mermaid)
+- [ExDoc](https://github.com/elixir-lang/ex_doc)
+  - [Rendering Mermaid graphs](https://github.com/elixir-lang/ex_doc#rendering-mermaid-graphs)
 - [Jekyll](https://jekyllrb.com/)
   - [jekyll-mermaid](https://rubygems.org/gems/jekyll-mermaid)
   - [jekyll-mermaid-diagrams](https://github.com/fuzhibo/jekyll-mermaid-diagrams)
-- [Reveal.js](https://github.com/hakimel/reveal.js)
-  - [reveal.js-mermaid-plugin](https://github.com/ludwick/reveal.js-mermaid-plugin)
-- [Bisheng](https://www.npmjs.com/package/bisheng)
-  - [bisheng-plugin-mermaid](https://github.com/yct21/bisheng-plugin-mermaid)
-- [Reveal CK](https://github.com/jedcn/reveal-ck)
-  - [reveal-ck-mermaid-plugin](https://github.com/tmtm/reveal-ck-mermaid-plugin)
 - [mermaid-isomorphic](https://github.com/remcohaszing/mermaid-isomorphic)
 - [mermaid-server: Generate diagrams using a HTTP request](https://github.com/TomWright/mermaid-server)
-- [ExDoc](https://github.com/elixir-lang/ex_doc)
-  - [Rendering Mermaid graphs](https://github.com/elixir-lang/ex_doc#rendering-mermaid-graphs)
 - [NiceGUI: Let any browser be the frontend of your Python code](https://nicegui.io)
   - [ui.mermaid(...)](https://nicegui.io/reference#mermaid_diagrams)
   - [ui.markdown(..., extras=['mermaid'])](https://nicegui.io/reference#markdown_element)
+- [Reveal.js](https://github.com/hakimel/reveal.js)
+  - [reveal.js-mermaid-plugin](https://github.com/ludwick/reveal.js-mermaid-plugin)
+- [Reveal CK](https://github.com/jedcn/reveal-ck)
+  - [reveal-ck-mermaid-plugin](https://github.com/tmtm/reveal-ck-mermaid-plugin)

From 783becebf626d165d78a053f127a5fee0f2a1712 Mon Sep 17 00:00:00 2001
From: Ronid1 
Date: Wed, 22 Nov 2023 18:48:52 -0800
Subject: [PATCH 254/457] alphabetically order sub categories

---
 docs/ecosystem/integrations-community.md      | 26 +++++++++----------
 .../docs/ecosystem/integrations-community.md  | 26 +++++++++----------
 2 files changed, 26 insertions(+), 26 deletions(-)

diff --git a/docs/ecosystem/integrations-community.md b/docs/ecosystem/integrations-community.md
index d74918e613..0b560cc912 100644
--- a/docs/ecosystem/integrations-community.md
+++ b/docs/ecosystem/integrations-community.md
@@ -23,26 +23,26 @@ Below are a list of community plugins and integrations created with Mermaid.
   - [Mermaid Integration for Confluence](https://marketplace.atlassian.com/apps/1222792/mermaid-integration-for-confluence?hosting=cloud&tab=overview)
   - [Mermaid Charts & Diagrams for Confluence](https://marketplace.atlassian.com/apps/1222572/)
   - [Mermaid Diagrams for Confluence](https://marketplace.atlassian.com/apps/1226945/mermaid-diagrams-for-confluence?hosting=cloud&tab=overview)
-  - [Mermaid Macro for Confluence](https://marketplace.atlassian.com/apps/1231150/mermaid-macro-for-confluence?hosting=cloud&tab=overview)
   - [Mermaid Live Editor for Confluence Cloud](https://marketplace.atlassian.com/apps/1231571/mermaid-live-editor-for-confluence?hosting=cloud&tab=overview)
+  - [Mermaid Macro for Confluence](https://marketplace.atlassian.com/apps/1231150/mermaid-macro-for-confluence?hosting=cloud&tab=overview)
   - [Mermaid Plugin for Confluence](https://marketplace.atlassian.com/apps/1214124/mermaid-plugin-for-confluence?hosting=server&tab=overview)
   - [EliteSoft Mermaid Charts and Diagrams](https://marketplace.atlassian.com/apps/1227286/elitesoft-mermaid-charts-and-diagrams?hosting=cloud&tab=overview)
   - [Auto convert diagrams in Jira](https://github.com/coddingtonbear/jirafs-mermaid)
-  - [Mermaid for Jira Cloud - Draw UML diagrams easily](https://marketplace.atlassian.com/apps/1223053/mermaid-for-jira-cloud-draw-uml-diagrams-easily?hosting=cloud&tab=overview)
   - [Mermaid Charts & Diagrams for Jira](https://marketplace.atlassian.com/apps/1224537/)
+  - [Mermaid for Jira Cloud - Draw UML diagrams easily](https://marketplace.atlassian.com/apps/1223053/mermaid-for-jira-cloud-draw-uml-diagrams-easily?hosting=cloud&tab=overview)
   - [CloudScript.io Addon](https://marketplace.atlassian.com/apps/1219878/cloudscript-io-mermaid-addon?hosting=cloud&tab=overview)
 - [Azure Devops](https://docs.microsoft.com/en-us/azure/devops/project/wiki/wiki-markdown-guidance?view=azure-devops#add-mermaid-diagrams-to-a-wiki-page) ✅
 - [Deepdwn](https://billiam.itch.io/deepdwn) ✅
 - [GitBook](https://gitbook.com)
   - [Mermaid Plugin](https://github.com/JozoVilcek/gitbook-plugin-mermaid)
-  - [Markdown with Mermaid CLI](https://github.com/miao1007/gitbook-plugin-mermaid-cli)
   - [Mermaid plugin for GitBook](https://github.com/wwformat/gitbook-plugin-mermaid-pdf)
+  - [Markdown with Mermaid CLI](https://github.com/miao1007/gitbook-plugin-mermaid-cli)
 - [Gitea](https://gitea.io) ✅
 - [GitHub](https://github.com) ✅
   - [Using code blocks](https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/) ✅
   - [GitHub action: Compile mermaid to image](https://github.com/neenjaw/compile-mermaid-markdown-action)
-  - [svg-generator](https://github.com/SimonKenyonShepard/mermaidjs-github-svg-generator)
   - [GitHub Writer](https://github.com/ckeditor/github-writer)
+  - [svg-generator](https://github.com/SimonKenyonShepard/mermaidjs-github-svg-generator)
 - [GitLab](https://docs.gitlab.com/ee/user/markdown.html#diagrams-and-flowcharts) ✅
 - [Mermaid Plugin for JetBrains IDEs](https://plugins.jetbrains.com/plugin/20146-mermaid)
 - [Joplin](https://joplinapp.org) ✅
@@ -58,8 +58,8 @@ Below are a list of community plugins and integrations created with Mermaid.
 - [Obsidian](https://help.obsidian.md/Editing+and+formatting/Advanced+formatting+syntax#Diagram) ✅
 - [Redmine](https://redmine.org)
   - [Mermaid Macro](https://www.redmine.org/plugins/redmine_mermaid_macro)
-  - [redmine-mermaid](https://github.com/styz/redmine_mermaid)
   - [markdown-for-mermaid-plugin](https://github.com/jamieh-mongolian/markdown-for-mermaid-plugin)
+  - [redmine-mermaid](https://github.com/styz/redmine_mermaid)
 - Visual Studio Code [Polyglot Interactive Notebooks](https://github.com/dotnet/interactive#net-interactive)
 
 ### CRM/ERP
@@ -112,13 +112,13 @@ Communication tools and platforms
 ### Wikis
 
 - [DokuWiki](https://dokuwiki.org)
-  - [Mermaid Plugin](https://www.dokuwiki.org/plugin:mermaid)
   - [ComboStrap](https://combostrap.com/mermaid)
+  - [Mermaid Plugin](https://www.dokuwiki.org/plugin:mermaid)
 - [Foswiki](https://foswiki.org)
   - [Mermaid Plugin](https://foswiki.org/Extensions/MermaidPlugin)
 - [MediaWiki](https://www.mediawiki.org)
-  - [Mermaid Extension](https://www.mediawiki.org/wiki/Extension:Mermaid)
   - [Flex Diagrams Extension](https://www.mediawiki.org/wiki/Extension:Flex_Diagrams)
+  - [Mermaid Extension](https://www.mediawiki.org/wiki/Extension:Mermaid)
 - [Semantic Media Wiki](https://semantic-mediawiki.org)
   - [Mermaid Plugin](https://github.com/SemanticMediaWiki/Mermaid)
 - [TiddlyWiki](https://tiddlywiki.com/)
@@ -163,18 +163,18 @@ Communication tools and platforms
 - [Sublime Text 3](https://sublimetext.com)
   - [Mermaid Package](https://packagecontrol.io/packages/Mermaid)
 - [VS Code](https://code.visualstudio.com/)
-  - [Markdown Preview Mermaid Support](https://marketplace.visualstudio.com/items?itemName=bierner.markdown-mermaid)
-  - [Mermaid Preview](https://marketplace.visualstudio.com/items?itemName=vstirbu.vscode-mermaid-preview)
-  - [Markdown Preview Enhanced](https://marketplace.visualstudio.com/items?itemName=shd101wyy.markdown-preview-enhanced)
-  - [Mermaid Markdown Syntax Highlighting](https://marketplace.visualstudio.com/items?itemName=bpruitt-goddard.mermaid-markdown-syntax-highlighting)
   - [Mermaid Editor](https://marketplace.visualstudio.com/items?itemName=tomoyukim.vscode-mermaid-editor)
   - [Mermaid Export](https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.mermaid-export)
   - [Markdown PDF](https://marketplace.visualstudio.com/items?itemName=yzane.markdown-pdf)
+  - [Markdown Preview Mermaid Support](https://marketplace.visualstudio.com/items?itemName=bierner.markdown-mermaid)
+  - [Markdown Preview Enhanced](https://marketplace.visualstudio.com/items?itemName=shd101wyy.markdown-preview-enhanced)
+  - [Mermaid Preview](https://marketplace.visualstudio.com/items?itemName=vstirbu.vscode-mermaid-preview)
   - [Preview](https://marketplace.visualstudio.com/items?itemName=searKing.preview-vscode)
   - [Preview Sequence Diagrams](https://marketplace.visualstudio.com/items?itemName=arichika.previewseqdiag-vscode)
+  - [Mermaid Markdown Syntax Highlighting](https://marketplace.visualstudio.com/items?itemName=bpruitt-goddard.mermaid-markdown-syntax-highlighting)
 - [Vim](https://www.vim.org)
-  - [Official Vim Syntax and ftplugin](https://github.com/craigmac/vim-mermaid)
   - [Vim Diagram Syntax](https://github.com/zhaozg/vim-diagram)
+  - [Official Vim Syntax and ftplugin](https://github.com/craigmac/vim-mermaid)
 
 ### Document Generation
 
@@ -230,8 +230,8 @@ Communication tools and platforms
 - [mermaid-isomorphic](https://github.com/remcohaszing/mermaid-isomorphic)
 - [mermaid-server: Generate diagrams using a HTTP request](https://github.com/TomWright/mermaid-server)
 - [NiceGUI: Let any browser be the frontend of your Python code](https://nicegui.io)
-  - [ui.mermaid(...)](https://nicegui.io/reference#mermaid_diagrams)
   - [ui.markdown(..., extras=\['mermaid'\])](https://nicegui.io/reference#markdown_element)
+  - [ui.mermaid(...)](https://nicegui.io/reference#mermaid_diagrams)
 - [Reveal.js](https://github.com/hakimel/reveal.js)
   - [reveal.js-mermaid-plugin](https://github.com/ludwick/reveal.js-mermaid-plugin)
 - [Reveal CK](https://github.com/jedcn/reveal-ck)
diff --git a/packages/mermaid/src/docs/ecosystem/integrations-community.md b/packages/mermaid/src/docs/ecosystem/integrations-community.md
index b48746bc41..d64f06875d 100644
--- a/packages/mermaid/src/docs/ecosystem/integrations-community.md
+++ b/packages/mermaid/src/docs/ecosystem/integrations-community.md
@@ -21,26 +21,26 @@ Below are a list of community plugins and integrations created with Mermaid.
   - [Mermaid Integration for Confluence](https://marketplace.atlassian.com/apps/1222792/mermaid-integration-for-confluence?hosting=cloud&tab=overview)
   - [Mermaid Charts & Diagrams for Confluence](https://marketplace.atlassian.com/apps/1222572/)
   - [Mermaid Diagrams for Confluence](https://marketplace.atlassian.com/apps/1226945/mermaid-diagrams-for-confluence?hosting=cloud&tab=overview)
-  - [Mermaid Macro for Confluence](https://marketplace.atlassian.com/apps/1231150/mermaid-macro-for-confluence?hosting=cloud&tab=overview)
   - [Mermaid Live Editor for Confluence Cloud](https://marketplace.atlassian.com/apps/1231571/mermaid-live-editor-for-confluence?hosting=cloud&tab=overview)
+  - [Mermaid Macro for Confluence](https://marketplace.atlassian.com/apps/1231150/mermaid-macro-for-confluence?hosting=cloud&tab=overview)
   - [Mermaid Plugin for Confluence](https://marketplace.atlassian.com/apps/1214124/mermaid-plugin-for-confluence?hosting=server&tab=overview)
   - [EliteSoft Mermaid Charts and Diagrams](https://marketplace.atlassian.com/apps/1227286/elitesoft-mermaid-charts-and-diagrams?hosting=cloud&tab=overview)
   - [Auto convert diagrams in Jira](https://github.com/coddingtonbear/jirafs-mermaid)
-  - [Mermaid for Jira Cloud - Draw UML diagrams easily](https://marketplace.atlassian.com/apps/1223053/mermaid-for-jira-cloud-draw-uml-diagrams-easily?hosting=cloud&tab=overview)
   - [Mermaid Charts & Diagrams for Jira](https://marketplace.atlassian.com/apps/1224537/)
+  - [Mermaid for Jira Cloud - Draw UML diagrams easily](https://marketplace.atlassian.com/apps/1223053/mermaid-for-jira-cloud-draw-uml-diagrams-easily?hosting=cloud&tab=overview)
   - [CloudScript.io Addon](https://marketplace.atlassian.com/apps/1219878/cloudscript-io-mermaid-addon?hosting=cloud&tab=overview)
 - [Azure Devops](https://docs.microsoft.com/en-us/azure/devops/project/wiki/wiki-markdown-guidance?view=azure-devops#add-mermaid-diagrams-to-a-wiki-page) ✅
 - [Deepdwn](https://billiam.itch.io/deepdwn) ✅
 - [GitBook](https://gitbook.com)
   - [Mermaid Plugin](https://github.com/JozoVilcek/gitbook-plugin-mermaid)
-  - [Markdown with Mermaid CLI](https://github.com/miao1007/gitbook-plugin-mermaid-cli)
   - [Mermaid plugin for GitBook](https://github.com/wwformat/gitbook-plugin-mermaid-pdf)
+  - [Markdown with Mermaid CLI](https://github.com/miao1007/gitbook-plugin-mermaid-cli)
 - [Gitea](https://gitea.io) ✅
 - [GitHub](https://github.com) ✅
   - [Using code blocks](https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/) ✅
   - [GitHub action: Compile mermaid to image](https://github.com/neenjaw/compile-mermaid-markdown-action)
-  - [svg-generator](https://github.com/SimonKenyonShepard/mermaidjs-github-svg-generator)
   - [GitHub Writer](https://github.com/ckeditor/github-writer)
+  - [svg-generator](https://github.com/SimonKenyonShepard/mermaidjs-github-svg-generator)
 - [GitLab](https://docs.gitlab.com/ee/user/markdown.html#diagrams-and-flowcharts) ✅
 - [Mermaid Plugin for JetBrains IDEs](https://plugins.jetbrains.com/plugin/20146-mermaid)
 - [Joplin](https://joplinapp.org) ✅
@@ -56,8 +56,8 @@ Below are a list of community plugins and integrations created with Mermaid.
 - [Obsidian](https://help.obsidian.md/Editing+and+formatting/Advanced+formatting+syntax#Diagram) ✅
 - [Redmine](https://redmine.org)
   - [Mermaid Macro](https://www.redmine.org/plugins/redmine_mermaid_macro)
-  - [redmine-mermaid](https://github.com/styz/redmine_mermaid)
   - [markdown-for-mermaid-plugin](https://github.com/jamieh-mongolian/markdown-for-mermaid-plugin)
+  - [redmine-mermaid](https://github.com/styz/redmine_mermaid)
 - Visual Studio Code [Polyglot Interactive Notebooks](https://github.com/dotnet/interactive#net-interactive)
 
 ### CRM/ERP
@@ -110,13 +110,13 @@ Communication tools and platforms
 ### Wikis
 
 - [DokuWiki](https://dokuwiki.org)
-  - [Mermaid Plugin](https://www.dokuwiki.org/plugin:mermaid)
   - [ComboStrap](https://combostrap.com/mermaid)
+  - [Mermaid Plugin](https://www.dokuwiki.org/plugin:mermaid)
 - [Foswiki](https://foswiki.org)
   - [Mermaid Plugin](https://foswiki.org/Extensions/MermaidPlugin)
 - [MediaWiki](https://www.mediawiki.org)
-  - [Mermaid Extension](https://www.mediawiki.org/wiki/Extension:Mermaid)
   - [Flex Diagrams Extension](https://www.mediawiki.org/wiki/Extension:Flex_Diagrams)
+  - [Mermaid Extension](https://www.mediawiki.org/wiki/Extension:Mermaid)
 - [Semantic Media Wiki](https://semantic-mediawiki.org)
   - [Mermaid Plugin](https://github.com/SemanticMediaWiki/Mermaid)
 - [TiddlyWiki](https://tiddlywiki.com/)
@@ -161,18 +161,18 @@ Communication tools and platforms
 - [Sublime Text 3](https://sublimetext.com)
   - [Mermaid Package](https://packagecontrol.io/packages/Mermaid)
 - [VS Code](https://code.visualstudio.com/)
-  - [Markdown Preview Mermaid Support](https://marketplace.visualstudio.com/items?itemName=bierner.markdown-mermaid)
-  - [Mermaid Preview](https://marketplace.visualstudio.com/items?itemName=vstirbu.vscode-mermaid-preview)
-  - [Markdown Preview Enhanced](https://marketplace.visualstudio.com/items?itemName=shd101wyy.markdown-preview-enhanced)
-  - [Mermaid Markdown Syntax Highlighting](https://marketplace.visualstudio.com/items?itemName=bpruitt-goddard.mermaid-markdown-syntax-highlighting)
   - [Mermaid Editor](https://marketplace.visualstudio.com/items?itemName=tomoyukim.vscode-mermaid-editor)
   - [Mermaid Export](https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.mermaid-export)
   - [Markdown PDF](https://marketplace.visualstudio.com/items?itemName=yzane.markdown-pdf)
+  - [Markdown Preview Mermaid Support](https://marketplace.visualstudio.com/items?itemName=bierner.markdown-mermaid)
+  - [Markdown Preview Enhanced](https://marketplace.visualstudio.com/items?itemName=shd101wyy.markdown-preview-enhanced)
+  - [Mermaid Preview](https://marketplace.visualstudio.com/items?itemName=vstirbu.vscode-mermaid-preview)
   - [Preview](https://marketplace.visualstudio.com/items?itemName=searKing.preview-vscode)
   - [Preview Sequence Diagrams](https://marketplace.visualstudio.com/items?itemName=arichika.previewseqdiag-vscode)
+  - [Mermaid Markdown Syntax Highlighting](https://marketplace.visualstudio.com/items?itemName=bpruitt-goddard.mermaid-markdown-syntax-highlighting)
 - [Vim](https://www.vim.org)
-  - [Official Vim Syntax and ftplugin](https://github.com/craigmac/vim-mermaid)
   - [Vim Diagram Syntax](https://github.com/zhaozg/vim-diagram)
+  - [Official Vim Syntax and ftplugin](https://github.com/craigmac/vim-mermaid)
 
 ### Document Generation
 
@@ -228,8 +228,8 @@ Communication tools and platforms
 - [mermaid-isomorphic](https://github.com/remcohaszing/mermaid-isomorphic)
 - [mermaid-server: Generate diagrams using a HTTP request](https://github.com/TomWright/mermaid-server)
 - [NiceGUI: Let any browser be the frontend of your Python code](https://nicegui.io)
-  - [ui.mermaid(...)](https://nicegui.io/reference#mermaid_diagrams)
   - [ui.markdown(..., extras=['mermaid'])](https://nicegui.io/reference#markdown_element)
+  - [ui.mermaid(...)](https://nicegui.io/reference#mermaid_diagrams)
 - [Reveal.js](https://github.com/hakimel/reveal.js)
   - [reveal.js-mermaid-plugin](https://github.com/ludwick/reveal.js-mermaid-plugin)
 - [Reveal CK](https://github.com/jedcn/reveal-ck)

From aaf9fd5f03d55d7389d4a1afbeb978dafeeeecb8 Mon Sep 17 00:00:00 2001
From: Ronid1 
Date: Thu, 23 Nov 2023 16:21:12 -0800
Subject: [PATCH 255/457] update and verify links

---
 docs/ecosystem/integrations-community.md      | 47 +++++++++---------
 .../docs/ecosystem/integrations-community.md  | 48 +++++++++----------
 2 files changed, 46 insertions(+), 49 deletions(-)

diff --git a/docs/ecosystem/integrations-community.md b/docs/ecosystem/integrations-community.md
index 0b560cc912..2db6b00e1e 100644
--- a/docs/ecosystem/integrations-community.md
+++ b/docs/ecosystem/integrations-community.md
@@ -30,8 +30,8 @@ Below are a list of community plugins and integrations created with Mermaid.
   - [Auto convert diagrams in Jira](https://github.com/coddingtonbear/jirafs-mermaid)
   - [Mermaid Charts & Diagrams for Jira](https://marketplace.atlassian.com/apps/1224537/)
   - [Mermaid for Jira Cloud - Draw UML diagrams easily](https://marketplace.atlassian.com/apps/1223053/mermaid-for-jira-cloud-draw-uml-diagrams-easily?hosting=cloud&tab=overview)
-  - [CloudScript.io Addon](https://marketplace.atlassian.com/apps/1219878/cloudscript-io-mermaid-addon?hosting=cloud&tab=overview)
-- [Azure Devops](https://docs.microsoft.com/en-us/azure/devops/project/wiki/wiki-markdown-guidance?view=azure-devops#add-mermaid-diagrams-to-a-wiki-page) ✅
+  - [CloudScript.io Mermaid Addon](https://marketplace.atlassian.com/apps/1219878/cloudscript-io-mermaid-addon?hosting=cloud&tab=overview)
+- [Azure Devops](https://learn.microsoft.com/en-us/azure/devops/project/wiki/markdown-guidance?view=azure-devops#add-mermaid-diagrams-to-a-wiki-page) ✅
 - [Deepdwn](https://billiam.itch.io/deepdwn) ✅
 - [GitBook](https://gitbook.com)
   - [Mermaid Plugin](https://github.com/JozoVilcek/gitbook-plugin-mermaid)
@@ -42,23 +42,23 @@ Below are a list of community plugins and integrations created with Mermaid.
   - [Using code blocks](https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/) ✅
   - [GitHub action: Compile mermaid to image](https://github.com/neenjaw/compile-mermaid-markdown-action)
   - [GitHub Writer](https://github.com/ckeditor/github-writer)
-  - [svg-generator](https://github.com/SimonKenyonShepard/mermaidjs-github-svg-generator)
+  - [SVG diagram generator](https://github.com/SimonKenyonShepard/mermaidjs-github-svg-generator)
 - [GitLab](https://docs.gitlab.com/ee/user/markdown.html#diagrams-and-flowcharts) ✅
 - [Mermaid Plugin for JetBrains IDEs](https://plugins.jetbrains.com/plugin/20146-mermaid)
 - [Joplin](https://joplinapp.org) ✅
 - [LiveBook](https://livebook.dev) ✅
 - [Tuleap](https://docs.tuleap.org/user-guide/writing-in-tuleap.html#graphs) ✅
 - [Mermaid Flow Visual Editor](https://www.mermaidflow.app) ✅
-- [mermerd](https://github.com/KarnerTh/mermerd)
+- [Mermerd](https://github.com/KarnerTh/mermerd)
 - [Slab](https://slab.com) ✅
-- [Swimm](https://swimm.io) ✅
+- [Swimm](https://docs.swimm.io/Features/diagrams-and-charts) ✅
 - [NotesHub](https://noteshub.app) ✅
 - [Notion](https://notion.so) ✅
 - [Observable](https://observablehq.com/@observablehq/mermaid) ✅
 - [Obsidian](https://help.obsidian.md/Editing+and+formatting/Advanced+formatting+syntax#Diagram) ✅
 - [Redmine](https://redmine.org)
   - [Mermaid Macro](https://www.redmine.org/plugins/redmine_mermaid_macro)
-  - [markdown-for-mermaid-plugin](https://github.com/jamieh-mongolian/markdown-for-mermaid-plugin)
+  - [Markdown for mermaid plugin](https://github.com/jamieh-mongolian/markdown-for-mermaid-plugin)
   - [redmine-mermaid](https://github.com/styz/redmine_mermaid)
 - Visual Studio Code [Polyglot Interactive Notebooks](https://github.com/dotnet/interactive#net-interactive)
 
@@ -87,7 +87,7 @@ Blogging frameworks and platforms
 Content Management Systems/Enterprise Content Management
 
 - [Grav CMS](https://getgrav.org/)
-  - [Mermaid Diagrams](https://github.com/DanielFlaum/grav-plugin-mermaid-diagrams)
+  - [Mermaid Diagrams Plugin](https://github.com/DanielFlaum/grav-plugin-mermaid-diagrams)
   - [GitLab Markdown Adapter](https://github.com/Goutte/grav-plugin-gitlab-markdown-adapter)
 - [VitePress](https://vitepress.vuejs.org/)
   - [Plugin for Mermaid.js](https://emersonbottero.github.io/vitepress-plugin-mermaid/)
@@ -99,15 +99,15 @@ Content Management Systems/Enterprise Content Management
 Communication tools and platforms
 
 - [Discourse](https://discourse.org)
-  - [Mermaid Plugin](https://github.com/pnewell/discourse-mermaid), [And](https://github.com/unfoldingWord-dev/discourse-mermaid)
+  - [Mermaid Plugin](https://github.com/pnewell/discourse-mermaid)
 - [Mattermost](https://mattermost.com/)
   - [Mermaid Plugin](https://github.com/SpikeTings/Mermaid)
 - [NodeBB](https://nodebb.org)
-  - [Mermaid Plugin](https://www.npmjs.com/package/nodebb-plugin-mermaid)
+  - [Mermaid Parser Plugin](https://www.npmjs.com/package/nodebb-plugin-mermaid)
 - [phpBB](https://phpbb.com)
   - [phpbb-ext-mermaid](https://github.com/AlfredoRamos/phpbb-ext-mermaid)
 - [Slack](https://slack.com)
-  - [Mermaid for Slack](https://github.com/JackuB/mermaid-for-slack)
+  - [Mermaid Preview](https://github.com/JackuB/mermaid-for-slack)
 
 ### Wikis
 
@@ -122,8 +122,8 @@ Communication tools and platforms
 - [Semantic Media Wiki](https://semantic-mediawiki.org)
   - [Mermaid Plugin](https://github.com/SemanticMediaWiki/Mermaid)
 - [TiddlyWiki](https://tiddlywiki.com/)
-  - [mermaid-tw5: full js library](https://github.com/efurlanm/mermaid-tw5)
-  - [tw5-mermaid: wrapper for Mermaid Live](https://github.com/jasonmhoule/tw5-mermaid)
+  - [mermaid-tw5: wrapper for Mermaid Live](https://github.com/efurlanm/mermaid-tw5)
+  - [tw5-mermaid: plugin for managing Mermaid.js tiddlers](https://github.com/jasonmhoule/tw5-mermaid)
 
 ### Editor Plugins
 
@@ -137,7 +137,8 @@ Communication tools and platforms
   - [Mermaid Preview](https://github.com/AlanHohn/mermaid-preview)
 - [CKEditor](https://github.com/ckeditor/ckeditor5)
   - [CKEditor 5 Mermaid plugin](https://github.com/ckeditor/ckeditor5-mermaid)
-- [Draw.io](https://draw.io) - [Plugin](https://github.com/nopeslide/drawio_mermaid_plugin)
+- [Draw.io](https://draw.io)
+  - [Mermaid Plugin](https://github.com/nopeslide/drawio_mermaid_plugin)
 - [GNU Emacs](https://www.gnu.org/software/emacs/)
   - [Major mode for .mmd files](https://github.com/abrochard/mermaid-mode)
   - [Org-Mode integration](https://github.com/arnm/ob-mermaid)
@@ -145,9 +146,8 @@ Communication tools and platforms
   - [Nano Mermaid](https://github.com/Yash-Singh1/nano-mermaid)
 - [Google docs](https://docs.google.com/)
   - [Mermaid plugin for google docs](https://workspace.google.com/marketplace/app/mermaid/636321283856)
-- [Inkdrop](https://www.inkdrop.app) - [Plugin](https://github.com/inkdropapp/inkdrop-mermaid)
-- [Iodide](https://github.com/iodide-project/iodide)
-  - [iodide-mermaid-plugin](https://github.com/iodide-project/iodide-mermaid-plugin)
+- [Inkdrop](https://www.inkdrop.app)
+  - [Mermaid Plugin](https://github.com/inkdropapp/inkdrop-mermaid)
 - [Light Table](http://lighttable.com/)
   - [Mermaid Plugin](https://github.com/cldwalker/Mermaid)
 - [Markdown-It](https://github.com/markdown-it/markdown-it)
@@ -157,9 +157,9 @@ Communication tools and platforms
   - [markdown-it-mermaid-fence-new](https://github.com/Revomatico/markdown-it-mermaid-fence-new)
   - [markdown-it-mermaid-less](https://github.com/searKing/markdown-it-mermaid-less)
 - [Podlite](https://github.com/zag/podlite-desktop)
-  - [Named block =Diagram](https://github.com/zag/podlite/tree/main/packages/podlite-diagrams)
+  - [=Diagram block](https://github.com/zag/podlite/tree/main/packages/podlite-diagrams)
 - [Standard Notes](https://standardnotes.com/)
-  - [sn-mermaid](https://github.com/nienow/sn-mermaid)
+  - [Mermaid Extension](https://github.com/nienow/sn-mermaid)
 - [Sublime Text 3](https://sublimetext.com)
   - [Mermaid Package](https://packagecontrol.io/packages/Mermaid)
 - [VS Code](https://code.visualstudio.com/)
@@ -174,7 +174,7 @@ Communication tools and platforms
   - [Mermaid Markdown Syntax Highlighting](https://marketplace.visualstudio.com/items?itemName=bpruitt-goddard.mermaid-markdown-syntax-highlighting)
 - [Vim](https://www.vim.org)
   - [Vim Diagram Syntax](https://github.com/zhaozg/vim-diagram)
-  - [Official Vim Syntax and ftplugin](https://github.com/craigmac/vim-mermaid)
+  - [Official Vim Syntax and ft plugin](https://github.com/craigmac/vim-mermaid)
 
 ### Document Generation
 
@@ -186,7 +186,7 @@ Communication tools and platforms
   - [gatsby-remark-mermaid](https://github.com/remcohaszing/gatsby-remark-mermaid)
 - [JSDoc](https://jsdoc.app/)
   - [jsdoc-mermaid](https://github.com/Jellyvision/jsdoc-mermaid)
-- [mdbook](https://rust-lang.github.io/mdBook/index.html)
+- [mdBook](https://rust-lang.github.io/mdBook/index.html)
   - [mdbook-mermaid](https://github.com/badboy/mdbook-mermaid)
 - [MkDocs](https://www.mkdocs.org)
   - [mkdocs-mermaid2-plugin](https://github.com/fralau/mkdocs-mermaid2-plugin)
@@ -201,7 +201,7 @@ Communication tools and platforms
 - [Swimm - Up-to-date diagrams with Swimm, the knowledge management tool for code](https://docs.swimm.io/features/diagrams-and-charts/#mermaid--swimm--up-to-date-diagrams-)
 - [Type Doc](https://typedoc.org/)
   - [typedoc-plugin-mermaid](https://www.npmjs.com/package/typedoc-plugin-mermaid)
-- [Typora](https://typora.io/) ([native support](https://support.typora.io/Draw-Diagrams-With-Markdown/#mermaid))
+- [Typora](https://support.typora.io/Draw-Diagrams-With-Markdown/#mermaid) ✅
 
 ### Browser Extensions
 
@@ -212,7 +212,7 @@ Communication tools and platforms
 | Diagram Tab              | -                                                                                                            | -                                                                              | -                                                                              | -                                                                                                                            | [🐙🔗](https://github.com/khafast/diagramtab)                                                        |
 | Markdown Diagrams        | [🎡🔗](https://chrome.google.com/webstore/detail/markdown-diagrams/pmoglnmodacnbbofbgcagndelmgaclel/)        | [🦊🔗](https://addons.mozilla.org/en-US/firefox/addon/markdown-diagrams/)      | [🔴🔗](https://addons.opera.com/en/extensions/details/markdown-diagrams/)      | [🌀🔗](https://microsoftedge.microsoft.com/addons/detail/markdown-diagrams/hceenoomhhdkjjijnmlclkpenkapfihe)                 | [🐙🔗](https://github.com/marcozaccari/markdown-diagrams-browser-extension/tree/master/doc/examples) |
 | Markdown Viewer          | -                                                                                                            | [🦊🔗](https://addons.mozilla.org/en-US/firefox/addon/markdown-viewer-chrome/) | -                                                                              | -                                                                                                                            | [🐙🔗](https://github.com/simov/markdown-viewer)                                                     |
-| Extensions for Mermaid   | -                                                                                                            | [🦊🔗](https://addons.mozilla.org/en-US/firefox/addon/markdown-viewer-chrome/) | [🔴🔗](https://addons.opera.com/en/extensions/details/extensions-for-mermaid/) | -                                                                                                                            | [🐙🔗](https://github.com/Stefan-S/mermaid-extension)                                                |
+| Extensions for Mermaid   | -                                                                                                            | -                                                                              | [🔴🔗](https://addons.opera.com/en/extensions/details/extensions-for-mermaid/) | -                                                                                                                            | [🐙🔗](https://github.com/Stefan-S/mermaid-extension)                                                |
 | Chrome Diagrammer        | [🎡🔗](https://chrome.google.com/webstore/detail/chrome-diagrammer/bkpbgjmkomfoakfklcjeoegkklgjnnpk)         | -                                                                              | -                                                                              | -                                                                                                                            | -                                                                                                    |
 | Mermaid Diagrams         | [🎡🔗](https://chrome.google.com/webstore/detail/mermaid-diagrams/phfcghedmopjadpojhmmaffjmfiakfil)          | -                                                                              | -                                                                              | -                                                                                                                            | -                                                                                                    |
 | Monkeys                  | [🎡🔗](https://chrome.google.com/webstore/detail/monkeys-mermaid-for-githu/cplfdpoajbclbgphaphphcldamfkjlgi) | -                                                                              | -                                                                              | -                                                                                                                            | -                                                                                                    |
@@ -230,8 +230,7 @@ Communication tools and platforms
 - [mermaid-isomorphic](https://github.com/remcohaszing/mermaid-isomorphic)
 - [mermaid-server: Generate diagrams using a HTTP request](https://github.com/TomWright/mermaid-server)
 - [NiceGUI: Let any browser be the frontend of your Python code](https://nicegui.io)
-  - [ui.markdown(..., extras=\['mermaid'\])](https://nicegui.io/reference#markdown_element)
-  - [ui.mermaid(...)](https://nicegui.io/reference#mermaid_diagrams)
+  - [ui.mermaid(...)](https://nicegui.io/documentation/mermaid)
 - [Reveal.js](https://github.com/hakimel/reveal.js)
   - [reveal.js-mermaid-plugin](https://github.com/ludwick/reveal.js-mermaid-plugin)
 - [Reveal CK](https://github.com/jedcn/reveal-ck)
diff --git a/packages/mermaid/src/docs/ecosystem/integrations-community.md b/packages/mermaid/src/docs/ecosystem/integrations-community.md
index d64f06875d..8fab1daa8b 100644
--- a/packages/mermaid/src/docs/ecosystem/integrations-community.md
+++ b/packages/mermaid/src/docs/ecosystem/integrations-community.md
@@ -28,8 +28,8 @@ Below are a list of community plugins and integrations created with Mermaid.
   - [Auto convert diagrams in Jira](https://github.com/coddingtonbear/jirafs-mermaid)
   - [Mermaid Charts & Diagrams for Jira](https://marketplace.atlassian.com/apps/1224537/)
   - [Mermaid for Jira Cloud - Draw UML diagrams easily](https://marketplace.atlassian.com/apps/1223053/mermaid-for-jira-cloud-draw-uml-diagrams-easily?hosting=cloud&tab=overview)
-  - [CloudScript.io Addon](https://marketplace.atlassian.com/apps/1219878/cloudscript-io-mermaid-addon?hosting=cloud&tab=overview)
-- [Azure Devops](https://docs.microsoft.com/en-us/azure/devops/project/wiki/wiki-markdown-guidance?view=azure-devops#add-mermaid-diagrams-to-a-wiki-page) ✅
+  - [CloudScript.io Mermaid Addon](https://marketplace.atlassian.com/apps/1219878/cloudscript-io-mermaid-addon?hosting=cloud&tab=overview)
+- [Azure Devops](https://learn.microsoft.com/en-us/azure/devops/project/wiki/markdown-guidance?view=azure-devops#add-mermaid-diagrams-to-a-wiki-page) ✅
 - [Deepdwn](https://billiam.itch.io/deepdwn) ✅
 - [GitBook](https://gitbook.com)
   - [Mermaid Plugin](https://github.com/JozoVilcek/gitbook-plugin-mermaid)
@@ -40,23 +40,23 @@ Below are a list of community plugins and integrations created with Mermaid.
   - [Using code blocks](https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/) ✅
   - [GitHub action: Compile mermaid to image](https://github.com/neenjaw/compile-mermaid-markdown-action)
   - [GitHub Writer](https://github.com/ckeditor/github-writer)
-  - [svg-generator](https://github.com/SimonKenyonShepard/mermaidjs-github-svg-generator)
+  - [SVG diagram generator](https://github.com/SimonKenyonShepard/mermaidjs-github-svg-generator)
 - [GitLab](https://docs.gitlab.com/ee/user/markdown.html#diagrams-and-flowcharts) ✅
 - [Mermaid Plugin for JetBrains IDEs](https://plugins.jetbrains.com/plugin/20146-mermaid)
 - [Joplin](https://joplinapp.org) ✅
 - [LiveBook](https://livebook.dev) ✅
 - [Tuleap](https://docs.tuleap.org/user-guide/writing-in-tuleap.html#graphs) ✅
 - [Mermaid Flow Visual Editor](https://www.mermaidflow.app) ✅
-- [mermerd](https://github.com/KarnerTh/mermerd)
+- [Mermerd](https://github.com/KarnerTh/mermerd)
 - [Slab](https://slab.com) ✅
-- [Swimm](https://swimm.io) ✅
+- [Swimm](https://docs.swimm.io/Features/diagrams-and-charts#mermaid--swimm--up-to-date-diagrams-) ✅
 - [NotesHub](https://noteshub.app) ✅
 - [Notion](https://notion.so) ✅
 - [Observable](https://observablehq.com/@observablehq/mermaid) ✅
 - [Obsidian](https://help.obsidian.md/Editing+and+formatting/Advanced+formatting+syntax#Diagram) ✅
 - [Redmine](https://redmine.org)
   - [Mermaid Macro](https://www.redmine.org/plugins/redmine_mermaid_macro)
-  - [markdown-for-mermaid-plugin](https://github.com/jamieh-mongolian/markdown-for-mermaid-plugin)
+  - [Markdown for mermaid plugin](https://github.com/jamieh-mongolian/markdown-for-mermaid-plugin)
   - [redmine-mermaid](https://github.com/styz/redmine_mermaid)
 - Visual Studio Code [Polyglot Interactive Notebooks](https://github.com/dotnet/interactive#net-interactive)
 
@@ -85,7 +85,7 @@ Blogging frameworks and platforms
 Content Management Systems/Enterprise Content Management
 
 - [Grav CMS](https://getgrav.org/)
-  - [Mermaid Diagrams](https://github.com/DanielFlaum/grav-plugin-mermaid-diagrams)
+  - [Mermaid Diagrams Plugin](https://github.com/DanielFlaum/grav-plugin-mermaid-diagrams)
   - [GitLab Markdown Adapter](https://github.com/Goutte/grav-plugin-gitlab-markdown-adapter)
 - [VitePress](https://vitepress.vuejs.org/)
   - [Plugin for Mermaid.js](https://emersonbottero.github.io/vitepress-plugin-mermaid/)
@@ -97,15 +97,15 @@ Content Management Systems/Enterprise Content Management
 Communication tools and platforms
 
 - [Discourse](https://discourse.org)
-  - [Mermaid Plugin](https://github.com/pnewell/discourse-mermaid), [And](https://github.com/unfoldingWord-dev/discourse-mermaid)
+  - [Mermaid Plugin](https://github.com/pnewell/discourse-mermaid)
 - [Mattermost](https://mattermost.com/)
   - [Mermaid Plugin](https://github.com/SpikeTings/Mermaid)
 - [NodeBB](https://nodebb.org)
-  - [Mermaid Plugin](https://www.npmjs.com/package/nodebb-plugin-mermaid)
+  - [Mermaid Parser Plugin](https://www.npmjs.com/package/nodebb-plugin-mermaid)
 - [phpBB](https://phpbb.com)
   - [phpbb-ext-mermaid](https://github.com/AlfredoRamos/phpbb-ext-mermaid)
 - [Slack](https://slack.com)
-  - [Mermaid for Slack](https://github.com/JackuB/mermaid-for-slack)
+  - [Mermaid Preview](https://github.com/JackuB/mermaid-for-slack)
 
 ### Wikis
 
@@ -120,8 +120,8 @@ Communication tools and platforms
 - [Semantic Media Wiki](https://semantic-mediawiki.org)
   - [Mermaid Plugin](https://github.com/SemanticMediaWiki/Mermaid)
 - [TiddlyWiki](https://tiddlywiki.com/)
-  - [mermaid-tw5: full js library](https://github.com/efurlanm/mermaid-tw5)
-  - [tw5-mermaid: wrapper for Mermaid Live](https://github.com/jasonmhoule/tw5-mermaid)
+  - [mermaid-tw5: wrapper for Mermaid Live](https://github.com/efurlanm/mermaid-tw5)
+  - [tw5-mermaid: plugin for managing Mermaid.js tiddlers](https://github.com/jasonmhoule/tw5-mermaid)
 
 ### Editor Plugins
 
@@ -135,7 +135,8 @@ Communication tools and platforms
   - [Mermaid Preview](https://github.com/AlanHohn/mermaid-preview)
 - [CKEditor](https://github.com/ckeditor/ckeditor5)
   - [CKEditor 5 Mermaid plugin](https://github.com/ckeditor/ckeditor5-mermaid)
-- [Draw.io](https://draw.io) - [Plugin](https://github.com/nopeslide/drawio_mermaid_plugin)
+- [Draw.io](https://draw.io)
+  - [Mermaid Plugin](https://github.com/nopeslide/drawio_mermaid_plugin)
 - [GNU Emacs](https://www.gnu.org/software/emacs/)
   - [Major mode for .mmd files](https://github.com/abrochard/mermaid-mode)
   - [Org-Mode integration](https://github.com/arnm/ob-mermaid)
@@ -143,9 +144,8 @@ Communication tools and platforms
   - [Nano Mermaid](https://github.com/Yash-Singh1/nano-mermaid)
 - [Google docs](https://docs.google.com/)
   - [Mermaid plugin for google docs](https://workspace.google.com/marketplace/app/mermaid/636321283856)
-- [Inkdrop](https://www.inkdrop.app) - [Plugin](https://github.com/inkdropapp/inkdrop-mermaid)
-- [Iodide](https://github.com/iodide-project/iodide)
-  - [iodide-mermaid-plugin](https://github.com/iodide-project/iodide-mermaid-plugin)
+- [Inkdrop](https://www.inkdrop.app)
+  - [Mermaid Plugin](https://github.com/inkdropapp/inkdrop-mermaid)
 - [Light Table](http://lighttable.com/)
   - [Mermaid Plugin](https://github.com/cldwalker/Mermaid)
 - [Markdown-It](https://github.com/markdown-it/markdown-it)
@@ -155,9 +155,9 @@ Communication tools and platforms
   - [markdown-it-mermaid-fence-new](https://github.com/Revomatico/markdown-it-mermaid-fence-new)
   - [markdown-it-mermaid-less](https://github.com/searKing/markdown-it-mermaid-less)
 - [Podlite](https://github.com/zag/podlite-desktop)
-  - [Named block =Diagram](https://github.com/zag/podlite/tree/main/packages/podlite-diagrams)
+  - [=Diagram block](https://github.com/zag/podlite/tree/main/packages/podlite-diagrams)
 - [Standard Notes](https://standardnotes.com/)
-  - [sn-mermaid](https://github.com/nienow/sn-mermaid)
+  - [Mermaid Extension](https://github.com/nienow/sn-mermaid)
 - [Sublime Text 3](https://sublimetext.com)
   - [Mermaid Package](https://packagecontrol.io/packages/Mermaid)
 - [VS Code](https://code.visualstudio.com/)
@@ -172,7 +172,7 @@ Communication tools and platforms
   - [Mermaid Markdown Syntax Highlighting](https://marketplace.visualstudio.com/items?itemName=bpruitt-goddard.mermaid-markdown-syntax-highlighting)
 - [Vim](https://www.vim.org)
   - [Vim Diagram Syntax](https://github.com/zhaozg/vim-diagram)
-  - [Official Vim Syntax and ftplugin](https://github.com/craigmac/vim-mermaid)
+  - [Official Vim Syntax and ft plugin](https://github.com/craigmac/vim-mermaid)
 
 ### Document Generation
 
@@ -184,7 +184,7 @@ Communication tools and platforms
   - [gatsby-remark-mermaid](https://github.com/remcohaszing/gatsby-remark-mermaid)
 - [JSDoc](https://jsdoc.app/)
   - [jsdoc-mermaid](https://github.com/Jellyvision/jsdoc-mermaid)
-- [mdbook](https://rust-lang.github.io/mdBook/index.html)
+- [mdBook](https://rust-lang.github.io/mdBook/index.html)
   - [mdbook-mermaid](https://github.com/badboy/mdbook-mermaid)
 - [MkDocs](https://www.mkdocs.org)
   - [mkdocs-mermaid2-plugin](https://github.com/fralau/mkdocs-mermaid2-plugin)
@@ -196,10 +196,9 @@ Communication tools and platforms
   - [remark-mermaidjs](https://github.com/remcohaszing/remark-mermaidjs)
 - [Sphinx](https://www.sphinx-doc.org/en/master/)
   - [sphinxcontrib-mermaid](https://github.com/mgaitan/sphinxcontrib-mermaid)
-- [Swimm - Up-to-date diagrams with Swimm, the knowledge management tool for code](https://docs.swimm.io/Features/diagrams-and-charts#mermaid--swimm--up-to-date-diagrams-)
 - [Type Doc](https://typedoc.org/)
   - [typedoc-plugin-mermaid](https://www.npmjs.com/package/typedoc-plugin-mermaid)
-- [Typora](https://typora.io/) ([native support](https://support.typora.io/Draw-Diagrams-With-Markdown/#mermaid))
+- [Typora](https://support.typora.io/Draw-Diagrams-With-Markdown/#mermaid) ✅
 
 ### Browser Extensions
 
@@ -210,7 +209,7 @@ Communication tools and platforms
 | Diagram Tab              | -                                                                                                            | -                                                                              | -                                                                              | -                                                                                                                            | [🐙🔗](https://github.com/khafast/diagramtab)                                                        |
 | Markdown Diagrams        | [🎡🔗](https://chrome.google.com/webstore/detail/markdown-diagrams/pmoglnmodacnbbofbgcagndelmgaclel/)        | [🦊🔗](https://addons.mozilla.org/en-US/firefox/addon/markdown-diagrams/)      | [🔴🔗](https://addons.opera.com/en/extensions/details/markdown-diagrams/)      | [🌀🔗](https://microsoftedge.microsoft.com/addons/detail/markdown-diagrams/hceenoomhhdkjjijnmlclkpenkapfihe)                 | [🐙🔗](https://github.com/marcozaccari/markdown-diagrams-browser-extension/tree/master/doc/examples) |
 | Markdown Viewer          | -                                                                                                            | [🦊🔗](https://addons.mozilla.org/en-US/firefox/addon/markdown-viewer-chrome/) | -                                                                              | -                                                                                                                            | [🐙🔗](https://github.com/simov/markdown-viewer)                                                     |
-| Extensions for Mermaid   | -                                                                                                            | [🦊🔗](https://addons.mozilla.org/en-US/firefox/addon/markdown-viewer-chrome/) | [🔴🔗](https://addons.opera.com/en/extensions/details/extensions-for-mermaid/) | -                                                                                                                            | [🐙🔗](https://github.com/Stefan-S/mermaid-extension)                                                |
+| Extensions for Mermaid   | -                                                                                                            | -                                                                              | [🔴🔗](https://addons.opera.com/en/extensions/details/extensions-for-mermaid/) | -                                                                                                                            | [🐙🔗](https://github.com/Stefan-S/mermaid-extension)                                                |
 | Chrome Diagrammer        | [🎡🔗](https://chrome.google.com/webstore/detail/chrome-diagrammer/bkpbgjmkomfoakfklcjeoegkklgjnnpk)         | -                                                                              | -                                                                              | -                                                                                                                            | -                                                                                                    |
 | Mermaid Diagrams         | [🎡🔗](https://chrome.google.com/webstore/detail/mermaid-diagrams/phfcghedmopjadpojhmmaffjmfiakfil)          | -                                                                              | -                                                                              | -                                                                                                                            | -                                                                                                    |
 | Monkeys                  | [🎡🔗](https://chrome.google.com/webstore/detail/monkeys-mermaid-for-githu/cplfdpoajbclbgphaphphcldamfkjlgi) | -                                                                              | -                                                                              | -                                                                                                                            | -                                                                                                    |
@@ -228,8 +227,7 @@ Communication tools and platforms
 - [mermaid-isomorphic](https://github.com/remcohaszing/mermaid-isomorphic)
 - [mermaid-server: Generate diagrams using a HTTP request](https://github.com/TomWright/mermaid-server)
 - [NiceGUI: Let any browser be the frontend of your Python code](https://nicegui.io)
-  - [ui.markdown(..., extras=['mermaid'])](https://nicegui.io/reference#markdown_element)
-  - [ui.mermaid(...)](https://nicegui.io/reference#mermaid_diagrams)
+  - [ui.mermaid(...)](https://nicegui.io/documentation/mermaid)
 - [Reveal.js](https://github.com/hakimel/reveal.js)
   - [reveal.js-mermaid-plugin](https://github.com/ludwick/reveal.js-mermaid-plugin)
 - [Reveal CK](https://github.com/jedcn/reveal-ck)

From 55ce05fc751fee46c16cbe834aef887cbf534285 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod 
Date: Fri, 24 Nov 2023 10:25:50 +0530
Subject: [PATCH 256/457] chore: Add tests for calculateDeltaAndAngle

---
 .vite/build.ts                               |  3 ++
 packages/mermaid/src/mermaid.spec.ts         |  2 +-
 packages/mermaid/src/utils/lineWithOffset.ts | 49 ++++++++++++++++++--
 packages/mermaid/tsconfig.json               |  3 +-
 vite.config.ts                               |  4 ++
 5 files changed, 55 insertions(+), 6 deletions(-)

diff --git a/.vite/build.ts b/.vite/build.ts
index b89df9e310..bacc6bc6c6 100644
--- a/.vite/build.ts
+++ b/.vite/build.ts
@@ -117,6 +117,9 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions)
         output,
       },
     },
+    define: {
+      'import.meta.vitest': 'undefined',
+    },
     resolve: {
       extensions: [],
     },
diff --git a/packages/mermaid/src/mermaid.spec.ts b/packages/mermaid/src/mermaid.spec.ts
index 87756dc4db..390ee74ef0 100644
--- a/packages/mermaid/src/mermaid.spec.ts
+++ b/packages/mermaid/src/mermaid.spec.ts
@@ -2,7 +2,7 @@ import mermaid from './mermaid.js';
 import { mermaidAPI } from './mermaidAPI.js';
 import './diagram-api/diagram-orchestration.js';
 import { addDiagrams } from './diagram-api/diagram-orchestration.js';
-import { beforeAll, describe, it, expect, vi } from 'vitest';
+import { beforeAll, describe, it, expect, vi, afterEach } from 'vitest';
 import type { DiagramDefinition } from './diagram-api/types.js';
 
 beforeAll(async () => {
diff --git a/packages/mermaid/src/utils/lineWithOffset.ts b/packages/mermaid/src/utils/lineWithOffset.ts
index a90eb78358..af0cd3b46e 100644
--- a/packages/mermaid/src/utils/lineWithOffset.ts
+++ b/packages/mermaid/src/utils/lineWithOffset.ts
@@ -19,14 +19,14 @@ const markerOffsets = {
  * @returns The angle, deltaX and deltaY
  */
 function calculateDeltaAndAngle(
-  point1: Point | [number, number],
-  point2: Point | [number, number]
+  point1?: Point | [number, number],
+  point2?: Point | [number, number]
 ): { angle: number; deltaX: number; deltaY: number } {
-  point1 = pointTransformer(point1);
-  point2 = pointTransformer(point2);
   if (point1 === undefined || point2 === undefined) {
     return { angle: 0, deltaX: 0, deltaY: 0 };
   }
+  point1 = pointTransformer(point1);
+  point2 = pointTransformer(point2);
   const [x1, y1] = [point1.x, point1.y];
   const [x2, y2] = [point2.x, point2.y];
   const deltaX = x2 - x1;
@@ -93,3 +93,44 @@ export const getLineFunctionsWithOffset = (
     },
   };
 };
+
+if (import.meta.vitest) {
+  const { it, expect, describe } = import.meta.vitest;
+  describe('calculateDeltaAndAngle', () => {
+    it('should calculate the angle and deltas between two points', () => {
+      expect(calculateDeltaAndAngle([0, 0], [0, 1])).toStrictEqual({
+        angle: 1.5707963267948966,
+        deltaX: 0,
+        deltaY: 1,
+      });
+      expect(calculateDeltaAndAngle([1, 0], [0, -1])).toStrictEqual({
+        angle: 0.7853981633974483,
+        deltaX: -1,
+        deltaY: -1,
+      });
+      expect(calculateDeltaAndAngle({ x: 1, y: 0 }, [0, -1])).toStrictEqual({
+        angle: 0.7853981633974483,
+        deltaX: -1,
+        deltaY: -1,
+      });
+      expect(calculateDeltaAndAngle({ x: 1, y: 0 }, { x: 1, y: 0 })).toStrictEqual({
+        angle: NaN,
+        deltaX: 0,
+        deltaY: 0,
+      });
+    });
+
+    it('should calculate the angle and deltas if one point in undefined', () => {
+      expect(calculateDeltaAndAngle(undefined, [0, 1])).toStrictEqual({
+        angle: 0,
+        deltaX: 0,
+        deltaY: 0,
+      });
+      expect(calculateDeltaAndAngle([0, 1], undefined)).toStrictEqual({
+        angle: 0,
+        deltaX: 0,
+        deltaY: 0,
+      });
+    });
+  });
+}
diff --git a/packages/mermaid/tsconfig.json b/packages/mermaid/tsconfig.json
index c49ba69b0f..b32425399d 100644
--- a/packages/mermaid/tsconfig.json
+++ b/packages/mermaid/tsconfig.json
@@ -2,7 +2,8 @@
   "extends": "../../tsconfig.json",
   "compilerOptions": {
     "rootDir": "./src",
-    "outDir": "./dist"
+    "outDir": "./dist",
+    "types": ["vitest/importMeta"]
   },
   "include": ["./src/**/*.ts", "./package.json"]
 }
diff --git a/vite.config.ts b/vite.config.ts
index 080ff981f5..8da356117f 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -24,6 +24,7 @@ export default defineConfig({
       reportsDirectory: './coverage/vitest',
       exclude: ['**/node_modules/**', '**/tests/**', '**/__mocks__/**'],
     },
+    includeSource: ['packages/*/src/**/*.{js,ts}'],
   },
   build: {
     /** If you set esmExternals to true, this plugins assumes that
@@ -33,4 +34,7 @@ export default defineConfig({
       esmExternals: true,
     },
   },
+  define: {
+    'import.meta.vitest': 'undefined',
+  },
 });

From 201016ccc5bfa73e13577702369caffef6fb56a1 Mon Sep 17 00:00:00 2001
From: Ronid1 
Date: Thu, 23 Nov 2023 20:57:43 -0800
Subject: [PATCH 257/457] update build docs

---
 docs/ecosystem/integrations-community.md | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/docs/ecosystem/integrations-community.md b/docs/ecosystem/integrations-community.md
index 2db6b00e1e..8046417666 100644
--- a/docs/ecosystem/integrations-community.md
+++ b/docs/ecosystem/integrations-community.md
@@ -51,7 +51,7 @@ Below are a list of community plugins and integrations created with Mermaid.
 - [Mermaid Flow Visual Editor](https://www.mermaidflow.app) ✅
 - [Mermerd](https://github.com/KarnerTh/mermerd)
 - [Slab](https://slab.com) ✅
-- [Swimm](https://docs.swimm.io/Features/diagrams-and-charts) ✅
+- [Swimm](https://docs.swimm.io/Features/diagrams-and-charts#mermaid--swimm--up-to-date-diagrams-) ✅
 - [NotesHub](https://noteshub.app) ✅
 - [Notion](https://notion.so) ✅
 - [Observable](https://observablehq.com/@observablehq/mermaid) ✅
@@ -198,7 +198,6 @@ Communication tools and platforms
   - [remark-mermaidjs](https://github.com/remcohaszing/remark-mermaidjs)
 - [Sphinx](https://www.sphinx-doc.org/en/master/)
   - [sphinxcontrib-mermaid](https://github.com/mgaitan/sphinxcontrib-mermaid)
-- [Swimm - Up-to-date diagrams with Swimm, the knowledge management tool for code](https://docs.swimm.io/features/diagrams-and-charts/#mermaid--swimm--up-to-date-diagrams-)
 - [Type Doc](https://typedoc.org/)
   - [typedoc-plugin-mermaid](https://www.npmjs.com/package/typedoc-plugin-mermaid)
 - [Typora](https://support.typora.io/Draw-Diagrams-With-Markdown/#mermaid) ✅

From 26df81816e51b5fe29bdd2cf4f2fcfd836be5cee Mon Sep 17 00:00:00 2001
From: Sidharth Vinod 
Date: Fri, 24 Nov 2023 10:41:26 +0530
Subject: [PATCH 258/457] chore: Update pnpm-lock

---
 pnpm-lock.yaml | 456 ++++++++++++++++++++++++++++++++-----------------
 1 file changed, 299 insertions(+), 157 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b0bc7c2849..5434d0e5e9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -377,7 +377,7 @@ importers:
         version: 1.0.0-alpha.72(@algolia/client-search@4.19.1)(@types/node@18.17.5)(search-insights@2.7.0)
       vitepress-plugin-search:
         specifier: ^1.0.4-alpha.20
-        version: 1.0.4-alpha.20(flexsearch@0.7.31)(vitepress@1.0.0-alpha.72)(vue@3.3.7)
+        version: 1.0.4-alpha.20(flexsearch@0.7.31)(vitepress@1.0.0-alpha.72)(vue@3.3.8)
 
   packages/mermaid-example-diagram:
     dependencies:
@@ -481,6 +481,61 @@ importers:
         specifier: ^7.0.0
         version: 7.0.0
 
+  packages/mermaid/src/vitepress:
+    dependencies:
+      '@vueuse/core':
+        specifier: ^10.1.0
+        version: 10.6.1(vue@3.3.8)
+      jiti:
+        specifier: ^1.18.2
+        version: 1.21.0
+      mermaid:
+        specifier: workspace:^
+        version: link:../..
+      vue:
+        specifier: ^3.3
+        version: 3.3.8(typescript@5.1.6)
+    devDependencies:
+      '@iconify-json/carbon':
+        specifier: ^1.1.16
+        version: 1.1.16
+      '@unocss/reset':
+        specifier: ^0.57.0
+        version: 0.57.1
+      '@vite-pwa/vitepress':
+        specifier: ^0.2.0
+        version: 0.2.3(vite-plugin-pwa@0.16.7)
+      '@vitejs/plugin-vue':
+        specifier: ^4.2.1
+        version: 4.5.0(vite@4.5.0)(vue@3.3.8)
+      fast-glob:
+        specifier: ^3.2.12
+        version: 3.3.2
+      https-localhost:
+        specifier: ^4.7.1
+        version: 4.7.1
+      pathe:
+        specifier: ^1.1.0
+        version: 1.1.1
+      unocss:
+        specifier: ^0.57.0
+        version: 0.57.1(postcss@8.4.31)(rollup@2.79.1)(vite@4.5.0)
+      unplugin-vue-components:
+        specifier: ^0.25.0
+        version: 0.25.0(rollup@2.79.1)(vue@3.3.8)
+      vite:
+        specifier: ^4.3.9
+        version: 4.5.0(@types/node@18.17.5)
+      vite-plugin-pwa:
+        specifier: ^0.16.0
+        version: 0.16.7(vite@4.5.0)(workbox-build@7.0.0)(workbox-window@7.0.0)
+      vitepress:
+        specifier: 1.0.0-rc.25
+        version: 1.0.0-rc.25(@algolia/client-search@4.19.1)(@types/node@18.17.5)(postcss@8.4.31)(search-insights@2.7.0)(typescript@5.1.6)
+      workbox-window:
+        specifier: ^7.0.0
+        version: 7.0.0
+
   tests/webpack:
     dependencies:
       '@mermaid-js/mermaid-example-diagram':
@@ -698,10 +753,6 @@ packages:
       find-up: 5.0.0
     dev: true
 
-  /@antfu/utils@0.7.5:
-    resolution: {integrity: sha512-dlR6LdS+0SzOAPx/TPRhnoi7hE251OVeT2Snw0RguNbBSbjUHdWr0l3vcUUDg26rEysT89kCbtw1lVorBXLLCg==}
-    dev: true
-
   /@antfu/utils@0.7.6:
     resolution: {integrity: sha512-pvFiLP2BeOKA/ZOS6jxx4XhKzdVLHDhGlFEaZ2flWWYf2xOqVniqpk38I04DFRyz+L0ASggl7SkItTc+ZLju4w==}
     dev: true
@@ -3696,7 +3747,7 @@ packages:
     resolution: {integrity: sha512-M/w3PkN8zQYXi8N6qK/KhnYMfEbbb6Sk8RZVn8g+Pmmu5ybw177RpsaGwpziyHeUsu4etrexYSWq3rwnIqzYCg==}
     dependencies:
       '@antfu/install-pkg': 0.1.1
-      '@antfu/utils': 0.7.5
+      '@antfu/utils': 0.7.6
       '@iconify/types': 2.0.0
       debug: 4.3.4(supports-color@8.1.1)
       kolorist: 1.8.0
@@ -4036,7 +4087,7 @@ packages:
     engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
     dependencies:
       cross-spawn: 7.0.3
-      fast-glob: 3.3.1
+      fast-glob: 3.3.2
       is-glob: 4.0.3
       open: 9.1.0
       picocolors: 1.0.0
@@ -4106,7 +4157,7 @@ packages:
       tslib:
         optional: true
     dependencies:
-      '@rollup/pluginutils': 5.0.3(rollup@2.79.1)
+      '@rollup/pluginutils': 5.0.3
       resolve: 1.22.4
       typescript: 5.1.6
     dev: true
@@ -4123,7 +4174,7 @@ packages:
       rollup: 2.79.1
     dev: true
 
-  /@rollup/pluginutils@5.0.3(rollup@2.79.1):
+  /@rollup/pluginutils@5.0.3:
     resolution: {integrity: sha512-hfllNN4a80rwNQ9QCxhxuHCGHMAvabXqxNdaChUSSadMre7t4iEUI6fFAhBOn/eIYTgYVhBv7vCLsAJ4u3lf3g==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
@@ -4135,7 +4186,6 @@ packages:
       '@types/estree': 1.0.1
       estree-walker: 2.0.2
       picomatch: 2.3.1
-      rollup: 2.79.1
     dev: true
 
   /@rollup/pluginutils@5.0.5(rollup@2.79.1):
@@ -4915,7 +4965,6 @@ packages:
 
   /@types/web-bluetooth@0.0.20:
     resolution: {integrity: sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==}
-    dev: true
 
   /@types/ws@8.5.5:
     resolution: {integrity: sha512-lwhs8hktwxSjf9UaZ9tG5M03PGogvFaH8gUgLNbN9HKIg0dvv6q+gkSuJ8HN4/VbyxkuLzCjlN7GquQ0gUJfIg==}
@@ -5280,6 +5329,22 @@ packages:
       - rollup
     dev: true
 
+  /@unocss/astro@0.57.1(rollup@2.79.1)(vite@4.5.0):
+    resolution: {integrity: sha512-KNaqN/SGM/uz1QitajIkzNEw0jy9Zx9Wp8fl4GhfGYEMAN2+M4cuvBZRmlb6cLctSXmSAJQDG91ivbD1JijGnw==}
+    peerDependencies:
+      vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0
+    peerDependenciesMeta:
+      vite:
+        optional: true
+    dependencies:
+      '@unocss/core': 0.57.1
+      '@unocss/reset': 0.57.1
+      '@unocss/vite': 0.57.1(rollup@2.79.1)(vite@4.5.0)
+      vite: 4.5.0(@types/node@18.17.5)
+    transitivePeerDependencies:
+      - rollup
+    dev: true
+
   /@unocss/cli@0.57.1(rollup@2.79.1):
     resolution: {integrity: sha512-wKuOaygrPNzDm5L7+2SfHsIi3knJrAQ8nH6OasVqB+bGDz6ybDlULV7wvUco6Os72ydh7YbWC2/WpqFii8U/3w==}
     engines: {node: '>=14'}
@@ -5294,7 +5359,7 @@ packages:
       chokidar: 3.5.3
       colorette: 2.0.20
       consola: 3.2.3
-      fast-glob: 3.3.1
+      fast-glob: 3.3.2
       magic-string: 0.30.5
       pathe: 1.1.1
       perfect-debounce: 1.0.0
@@ -5338,7 +5403,7 @@ packages:
       '@unocss/core': 0.57.1
       '@unocss/rule-utils': 0.57.1
       css-tree: 2.3.1
-      fast-glob: 3.3.1
+      fast-glob: 3.3.2
       magic-string: 0.30.5
       postcss: 8.4.31
     dev: true
@@ -5465,13 +5530,41 @@ packages:
       '@unocss/scope': 0.57.1
       '@unocss/transformer-directives': 0.57.1
       chokidar: 3.5.3
-      fast-glob: 3.3.1
+      fast-glob: 3.3.2
       magic-string: 0.30.5
       vite: 4.4.9(@types/node@18.17.5)
     transitivePeerDependencies:
       - rollup
     dev: true
 
+  /@unocss/vite@0.57.1(rollup@2.79.1)(vite@4.5.0):
+    resolution: {integrity: sha512-kEBDvGgQNkX2n87S6Ao5seyFb1kuWZ5p96dGOS7VFpD7HvR5xholkJXaVhUK9/exCldjLExbo5UtVlbxFLUFYg==}
+    peerDependencies:
+      vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0
+    dependencies:
+      '@ampproject/remapping': 2.2.1
+      '@rollup/pluginutils': 5.0.5(rollup@2.79.1)
+      '@unocss/config': 0.57.1
+      '@unocss/core': 0.57.1
+      '@unocss/inspector': 0.57.1
+      '@unocss/scope': 0.57.1
+      '@unocss/transformer-directives': 0.57.1
+      chokidar: 3.5.3
+      fast-glob: 3.3.2
+      magic-string: 0.30.5
+      vite: 4.5.0(@types/node@18.17.5)
+    transitivePeerDependencies:
+      - rollup
+    dev: true
+
+  /@vite-pwa/vitepress@0.2.3(vite-plugin-pwa@0.16.7):
+    resolution: {integrity: sha512-6k9151CmILbSJQ88hLEMLL+MOQZDURKg2c4Wo5UcaEaOWU0jv7S+mo8nqyg86sM6ry8Jlnp6Zfv6AE0FqnfEyQ==}
+    peerDependencies:
+      vite-plugin-pwa: '>=0.16.5 <1'
+    dependencies:
+      vite-plugin-pwa: 0.16.7(vite@4.5.0)(workbox-build@7.0.0)(workbox-window@7.0.0)
+    dev: true
+
   /@vite-pwa/vitepress@0.3.0(vite-plugin-pwa@0.17.0):
     resolution: {integrity: sha512-7akiTt0laHJRSJ7lxPttGHYBoC2J+FgWJr0TGYQd2jPe/8nou+YSDwBGpOV+/qeobX2uzff8kew02n/07JRe9Q==}
     peerDependencies:
@@ -5502,6 +5595,28 @@ packages:
       vue: 3.3.4
     dev: true
 
+  /@vitejs/plugin-vue@4.3.1(vite@4.5.0)(vue@3.3.8):
+    resolution: {integrity: sha512-tUBEtWcF7wFtII7ayNiLNDTCE1X1afySEo+XNVMNkFXaThENyCowIEX095QqbJZGTgoOcSVDJGlnde2NG4jtbQ==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+    peerDependencies:
+      vite: ^4.0.0
+      vue: ^3.2.25
+    dependencies:
+      vite: 4.5.0(@types/node@18.17.5)
+      vue: 3.3.8(typescript@5.1.6)
+    dev: true
+
+  /@vitejs/plugin-vue@4.5.0(vite@4.5.0)(vue@3.3.8):
+    resolution: {integrity: sha512-a2WSpP8X8HTEww/U00bU4mX1QpLINNuz/2KMNpLsdu3BzOpak3AGI1CJYBTXcc4SPhaD0eNRUp7IyQK405L5dQ==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+    peerDependencies:
+      vite: ^4.0.0 || ^5.0.0
+      vue: ^3.2.25
+    dependencies:
+      vite: 4.5.0(@types/node@18.17.5)
+      vue: 3.3.8(typescript@5.1.6)
+    dev: true
+
   /@vitejs/plugin-vue@4.5.0(vite@5.0.0)(vue@3.3.8):
     resolution: {integrity: sha512-a2WSpP8X8HTEww/U00bU4mX1QpLINNuz/2KMNpLsdu3BzOpak3AGI1CJYBTXcc4SPhaD0eNRUp7IyQK405L5dQ==}
     engines: {node: ^14.18.0 || >=16.0.0}
@@ -5570,7 +5685,7 @@ packages:
       vitest: '>=0.30.1 <1'
     dependencies:
       '@vitest/utils': 0.34.0
-      fast-glob: 3.3.1
+      fast-glob: 3.3.2
       fflate: 0.8.0
       flatted: 3.2.7
       pathe: 1.1.1
@@ -5600,20 +5715,11 @@ packages:
 
   /@vue/compiler-core@3.3.4:
     resolution: {integrity: sha512-cquyDNvZ6jTbf/+x+AgM2Arrp6G4Dzbb0R64jiG804HRMfRiFXWI6kqUVqZ6ZR0bQhIoQjB4+2bhNtVwndW15g==}
-    dependencies:
-      '@babel/parser': 7.22.10
-      '@vue/shared': 3.3.4
-      estree-walker: 2.0.2
-      source-map-js: 1.0.2
-
-  /@vue/compiler-core@3.3.7:
-    resolution: {integrity: sha512-pACdY6YnTNVLXsB86YD8OF9ihwpolzhhtdLVHhBL6do/ykr6kKXNYABRtNMGrsQXpEXXyAdwvWWkuTbs4MFtPQ==}
     dependencies:
       '@babel/parser': 7.23.0
-      '@vue/shared': 3.3.7
+      '@vue/shared': 3.3.4
       estree-walker: 2.0.2
       source-map-js: 1.0.2
-    dev: true
 
   /@vue/compiler-core@3.3.8:
     resolution: {integrity: sha512-hN/NNBUECw8SusQvDSqqcVv6gWq8L6iAktUR0UF3vGu2OhzRqcOiAno0FmBJWwxhYEXRlQJT5XnoKsVq1WZx4g==}
@@ -5622,7 +5728,6 @@ packages:
       '@vue/shared': 3.3.8
       estree-walker: 2.0.2
       source-map-js: 1.0.2
-    dev: true
 
   /@vue/compiler-dom@3.3.4:
     resolution: {integrity: sha512-wyM+OjOVpuUukIq6p5+nwHYtj9cFroz9cwkfmP9O1nzH68BenTTv0u7/ndggT8cIQlnBeOo6sUT/gvHcIkLA5w==}
@@ -5630,19 +5735,11 @@ packages:
       '@vue/compiler-core': 3.3.4
       '@vue/shared': 3.3.4
 
-  /@vue/compiler-dom@3.3.7:
-    resolution: {integrity: sha512-0LwkyJjnUPssXv/d1vNJ0PKfBlDoQs7n81CbO6Q0zdL7H1EzqYRrTVXDqdBVqro0aJjo/FOa1qBAPVI4PGSHBw==}
-    dependencies:
-      '@vue/compiler-core': 3.3.7
-      '@vue/shared': 3.3.7
-    dev: true
-
   /@vue/compiler-dom@3.3.8:
     resolution: {integrity: sha512-+PPtv+p/nWDd0AvJu3w8HS0RIm/C6VGBIRe24b9hSyNWOAPEUosFZ5diwawwP8ip5sJ8n0Pe87TNNNHnvjs0FQ==}
     dependencies:
       '@vue/compiler-core': 3.3.8
       '@vue/shared': 3.3.8
-    dev: true
 
   /@vue/compiler-sfc@3.3.4:
     resolution: {integrity: sha512-6y/d8uw+5TkCuzBkgLS0v3lSM3hJDntFEiUORM11pQ/hKvkhSKZrXW6i69UyXlJQisJxuUEJKAWEqWbWsLeNKQ==}
@@ -5654,24 +5751,9 @@ packages:
       '@vue/reactivity-transform': 3.3.4
       '@vue/shared': 3.3.4
       estree-walker: 2.0.2
-      magic-string: 0.30.2
-      postcss: 8.4.27
-      source-map-js: 1.0.2
-
-  /@vue/compiler-sfc@3.3.7:
-    resolution: {integrity: sha512-7pfldWy/J75U/ZyYIXRVqvLRw3vmfxDo2YLMwVtWVNew8Sm8d6wodM+OYFq4ll/UxfqVr0XKiVwti32PCrruAw==}
-    dependencies:
-      '@babel/parser': 7.23.0
-      '@vue/compiler-core': 3.3.7
-      '@vue/compiler-dom': 3.3.7
-      '@vue/compiler-ssr': 3.3.7
-      '@vue/reactivity-transform': 3.3.7
-      '@vue/shared': 3.3.7
-      estree-walker: 2.0.2
       magic-string: 0.30.5
       postcss: 8.4.31
       source-map-js: 1.0.2
-    dev: true
 
   /@vue/compiler-sfc@3.3.8:
     resolution: {integrity: sha512-WMzbUrlTjfYF8joyT84HfwwXo+8WPALuPxhy+BZ6R4Aafls+jDBnSz8PDz60uFhuqFbl3HxRfxvDzrUf3THwpA==}
@@ -5686,7 +5768,6 @@ packages:
       magic-string: 0.30.5
       postcss: 8.4.31
       source-map-js: 1.0.2
-    dev: true
 
   /@vue/compiler-ssr@3.3.4:
     resolution: {integrity: sha512-m0v6oKpup2nMSehwA6Uuu+j+wEwcy7QmwMkVNVfrV9P2qE5KshC6RwOCq8fjGS/Eak/uNb8AaWekfiXxbBB6gQ==}
@@ -5694,19 +5775,11 @@ packages:
       '@vue/compiler-dom': 3.3.4
       '@vue/shared': 3.3.4
 
-  /@vue/compiler-ssr@3.3.7:
-    resolution: {integrity: sha512-TxOfNVVeH3zgBc82kcUv+emNHo+vKnlRrkv8YvQU5+Y5LJGJwSNzcmLUoxD/dNzv0bhQ/F0s+InlgV0NrApJZg==}
-    dependencies:
-      '@vue/compiler-dom': 3.3.7
-      '@vue/shared': 3.3.7
-    dev: true
-
   /@vue/compiler-ssr@3.3.8:
     resolution: {integrity: sha512-hXCqQL/15kMVDBuoBYpUnSYT8doDNwsjvm3jTefnXr+ytn294ySnT8NlsFHmTgKNjwpuFy7XVV8yTeLtNl/P6w==}
     dependencies:
       '@vue/compiler-dom': 3.3.8
       '@vue/shared': 3.3.8
-    dev: true
 
   /@vue/devtools-api@6.5.0:
     resolution: {integrity: sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q==}
@@ -5724,16 +5797,6 @@ packages:
       estree-walker: 2.0.2
       magic-string: 0.30.5
 
-  /@vue/reactivity-transform@3.3.7:
-    resolution: {integrity: sha512-APhRmLVbgE1VPGtoLQoWBJEaQk4V8JUsqrQihImVqKT+8U6Qi3t5ATcg4Y9wGAPb3kIhetpufyZ1RhwbZCIdDA==}
-    dependencies:
-      '@babel/parser': 7.23.0
-      '@vue/compiler-core': 3.3.7
-      '@vue/shared': 3.3.7
-      estree-walker: 2.0.2
-      magic-string: 0.30.5
-    dev: true
-
   /@vue/reactivity-transform@3.3.8:
     resolution: {integrity: sha512-49CvBzmZNtcHua0XJ7GdGifM8GOXoUMOX4dD40Y5DxI3R8OUhMlvf2nvgUAcPxaXiV5MQQ1Nwy09ADpnLQUqRw==}
     dependencies:
@@ -5742,24 +5805,16 @@ packages:
       '@vue/shared': 3.3.8
       estree-walker: 2.0.2
       magic-string: 0.30.5
-    dev: true
 
   /@vue/reactivity@3.3.4:
     resolution: {integrity: sha512-kLTDLwd0B1jG08NBF3R5rqULtv/f8x3rOFByTDz4J53ttIQEDmALqKqXY0J+XQeN0aV2FBxY8nJDf88yvOPAqQ==}
     dependencies:
       '@vue/shared': 3.3.4
 
-  /@vue/reactivity@3.3.7:
-    resolution: {integrity: sha512-cZNVjWiw00708WqT0zRpyAgduG79dScKEPYJXq2xj/aMtk3SKvL3FBt2QKUlh6EHBJ1m8RhBY+ikBUzwc7/khg==}
-    dependencies:
-      '@vue/shared': 3.3.7
-    dev: true
-
   /@vue/reactivity@3.3.8:
     resolution: {integrity: sha512-ctLWitmFBu6mtddPyOKpHg8+5ahouoTCRtmAHZAXmolDtuZXfjL2T3OJ6DL6ezBPQB1SmMnpzjiWjCiMYmpIuw==}
     dependencies:
       '@vue/shared': 3.3.8
-    dev: true
 
   /@vue/runtime-core@3.3.4:
     resolution: {integrity: sha512-R+bqxMN6pWO7zGI4OMlmvePOdP2c93GsHFM/siJI7O2nxFRzj55pLwkpCedEY+bTMgp5miZ8CxfIZo3S+gFqvA==}
@@ -5767,19 +5822,11 @@ packages:
       '@vue/reactivity': 3.3.4
       '@vue/shared': 3.3.4
 
-  /@vue/runtime-core@3.3.7:
-    resolution: {integrity: sha512-LHq9du3ubLZFdK/BP0Ysy3zhHqRfBn80Uc+T5Hz3maFJBGhci1MafccnL3rpd5/3wVfRHAe6c+PnlO2PAavPTQ==}
-    dependencies:
-      '@vue/reactivity': 3.3.7
-      '@vue/shared': 3.3.7
-    dev: true
-
   /@vue/runtime-core@3.3.8:
     resolution: {integrity: sha512-qurzOlb6q26KWQ/8IShHkMDOuJkQnQcTIp1sdP4I9MbCf9FJeGVRXJFr2mF+6bXh/3Zjr9TDgURXrsCr9bfjUw==}
     dependencies:
       '@vue/reactivity': 3.3.8
       '@vue/shared': 3.3.8
-    dev: true
 
   /@vue/runtime-dom@3.3.4:
     resolution: {integrity: sha512-Aj5bTJ3u5sFsUckRghsNjVTtxZQ1OyMWCr5dZRAPijF/0Vy4xEoRCwLyHXcj4D0UFbJ4lbx3gPTgg06K/GnPnQ==}
@@ -5788,21 +5835,12 @@ packages:
       '@vue/shared': 3.3.4
       csstype: 3.1.2
 
-  /@vue/runtime-dom@3.3.7:
-    resolution: {integrity: sha512-PFQU1oeJxikdDmrfoNQay5nD4tcPNYixUBruZzVX/l0eyZvFKElZUjW4KctCcs52nnpMGO6UDK+jF5oV4GT5Lw==}
-    dependencies:
-      '@vue/runtime-core': 3.3.7
-      '@vue/shared': 3.3.7
-      csstype: 3.1.2
-    dev: true
-
   /@vue/runtime-dom@3.3.8:
     resolution: {integrity: sha512-Noy5yM5UIf9UeFoowBVgghyGGPIDPy1Qlqt0yVsUdAVbqI8eeMSsTqBtauaEoT2UFXUk5S64aWVNJN4MJ2vRdA==}
     dependencies:
       '@vue/runtime-core': 3.3.8
       '@vue/shared': 3.3.8
       csstype: 3.1.2
-    dev: true
 
   /@vue/server-renderer@3.3.4(vue@3.3.4):
     resolution: {integrity: sha512-Q6jDDzR23ViIb67v+vM1Dqntu+HUexQcsWKhhQa4ARVzxOY2HbC7QRW/ggkDBd5BU+uM1sV6XOAP0b216o34JQ==}
@@ -5813,16 +5851,6 @@ packages:
       '@vue/shared': 3.3.4
       vue: 3.3.4
 
-  /@vue/server-renderer@3.3.7(vue@3.3.7):
-    resolution: {integrity: sha512-UlpKDInd1hIZiNuVVVvLgxpfnSouxKQOSE2bOfQpBuGwxRV/JqqTCyyjXUWiwtVMyeRaZhOYYqntxElk8FhBhw==}
-    peerDependencies:
-      vue: 3.3.7
-    dependencies:
-      '@vue/compiler-ssr': 3.3.7
-      '@vue/shared': 3.3.7
-      vue: 3.3.7(typescript@5.0.4)
-    dev: true
-
   /@vue/server-renderer@3.3.8(vue@3.3.8):
     resolution: {integrity: sha512-zVCUw7RFskvPuNlPn/8xISbrf0zTWsTSdYTsUTN1ERGGZGVnRxM2QZ3x1OR32+vwkkCm0IW6HmJ49IsPm7ilLg==}
     peerDependencies:
@@ -5830,19 +5858,13 @@ packages:
     dependencies:
       '@vue/compiler-ssr': 3.3.8
       '@vue/shared': 3.3.8
-      vue: 3.3.8(typescript@5.1.6)
-    dev: true
+      vue: 3.3.8(typescript@5.0.4)
 
   /@vue/shared@3.3.4:
     resolution: {integrity: sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ==}
 
-  /@vue/shared@3.3.7:
-    resolution: {integrity: sha512-N/tbkINRUDExgcPTBvxNkvHGu504k8lzlNQRITVnm6YjOjwa4r0nnbd4Jb01sNpur5hAllyRJzSK5PvB9PPwRg==}
-    dev: true
-
   /@vue/shared@3.3.8:
     resolution: {integrity: sha512-8PGwybFwM4x8pcfgqEQFy70NaQxASvOC5DJwLQfpArw1UDfUXrJkdxD3BhVTMS+0Lef/TU7YO0Jvr0jJY8T+mw==}
-    dev: true
 
   /@vueuse/core@10.1.0(vue@3.3.4):
     resolution: {integrity: sha512-3Znoa5m5RO+z4/C9w6DRaKTR3wCVJvD5rav8HTDGsr+7rOZRHtcgFJ8NcCs0ZvIpmev2kExTa311ns5j2RbzDQ==}
@@ -5878,7 +5900,6 @@ packages:
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
-    dev: true
 
   /@vueuse/integrations@10.6.1(focus-trap@7.5.4)(vue@3.3.8):
     resolution: {integrity: sha512-mPDupuofMJ4DPmtX/FfP1MajmWRzYDv8WSaTCo8LQ5kFznjWgmUQ16ApjYqgMquqffNY6+IRMdMgosLDRZOSZA==}
@@ -5940,7 +5961,6 @@ packages:
 
   /@vueuse/metadata@10.6.1:
     resolution: {integrity: sha512-qhdwPI65Bgcj23e5lpGfQsxcy0bMjCAsUGoXkJ7DsoeDUdasbZ2DBa4dinFCOER3lF4gwUv+UD2AlA11zdzMFw==}
-    dev: true
 
   /@vueuse/shared@10.1.0(vue@3.3.4):
     resolution: {integrity: sha512-2X52ogu12i9DkKOQ01yeb/BKg9UO87RNnpm5sXkQvyORlbq8ONS5l39MYkjkeVWWjdT0teJru7a2S41dmHmqjQ==}
@@ -5967,7 +5987,6 @@ packages:
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
-    dev: true
 
   /@wdio/config@7.30.0(typescript@5.1.6):
     resolution: {integrity: sha512-/38rol9WCfFTMtXyd/C856/aexxIZnfVvXg7Fw2WXpqZ9qadLA+R4N35S2703n/RByjK/5XAYtHoljtvh3727w==}
@@ -7168,7 +7187,7 @@ packages:
       normalize-path: 3.0.0
       readdirp: 3.6.0
     optionalDependencies:
-      fsevents: 2.3.2
+      fsevents: 2.3.3
 
   /chrome-trace-event@1.0.3:
     resolution: {integrity: sha512-p3KULyQg4S7NIHixdwbGX+nFHkoBiA4YQmyWtjb8XngSKV124nJmRysgAeujbUVb15vh+RvFUfCPqU7rXk+hZg==}
@@ -9595,6 +9614,7 @@ packages:
       glob-parent: 5.1.2
       merge2: 1.4.1
       micromatch: 4.0.5
+    dev: true
 
   /fast-glob@3.3.2:
     resolution: {integrity: sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==}
@@ -9605,7 +9625,6 @@ packages:
       glob-parent: 5.1.2
       merge2: 1.4.1
       micromatch: 4.0.5
-    dev: true
 
   /fast-json-stable-stringify@2.1.0:
     resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==}
@@ -9989,19 +10008,11 @@ packages:
   /fs.realpath@1.0.0:
     resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
 
-  /fsevents@2.3.2:
-    resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==}
-    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
-    os: [darwin]
-    requiresBuild: true
-    optional: true
-
   /fsevents@2.3.3:
     resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
     os: [darwin]
     requiresBuild: true
-    dev: true
     optional: true
 
   /function-bind@1.1.1:
@@ -10233,7 +10244,7 @@ packages:
     dependencies:
       array-union: 2.1.0
       dir-glob: 3.0.1
-      fast-glob: 3.3.1
+      fast-glob: 3.3.2
       ignore: 5.2.4
       merge2: 1.4.1
       slash: 3.0.0
@@ -10245,7 +10256,7 @@ packages:
     dependencies:
       array-union: 2.1.0
       dir-glob: 3.0.1
-      fast-glob: 3.3.1
+      fast-glob: 3.3.2
       ignore: 5.2.4
       merge2: 1.4.1
       slash: 3.0.0
@@ -10267,7 +10278,7 @@ packages:
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
     dependencies:
       dir-glob: 3.0.1
-      fast-glob: 3.3.1
+      fast-glob: 3.3.2
       ignore: 5.2.4
       merge2: 1.4.1
       slash: 4.0.0
@@ -11318,7 +11329,7 @@ packages:
       micromatch: 4.0.5
       walker: 1.0.8
     optionalDependencies:
-      fsevents: 2.3.2
+      fsevents: 2.3.3
     dev: true
 
   /jest-image-snapshot@4.2.0(jest@29.6.2):
@@ -11626,15 +11637,9 @@ packages:
     hasBin: true
     dev: false
 
-  /jiti@1.19.1:
-    resolution: {integrity: sha512-oVhqoRDaBXf7sjkll95LHVS6Myyyb1zaunVwk4Z0+WPSW4gjS0pl01zYKHScTuyEhQsFxV5L4DR5r+YqSyqyyg==}
-    hasBin: true
-    dev: false
-
   /jiti@1.21.0:
     resolution: {integrity: sha512-gFqAIbuKyyso/3G2qhiO2OM6shY6EPP/R0+mkDbyspxKazh8BXDC5FiFsUjlczgdNz/vfra0da2y+aHrusLG/Q==}
     hasBin: true
-    dev: true
 
   /jju@1.4.0:
     resolution: {integrity: sha512-8wb9Yw966OSxApiCt0K3yNJL8pnNeIv+OEq2YMidz4FKP6nonSRoOXc80iXY4JaN2FC11B9qsNmDsm+ZOfMROA==}
@@ -12220,6 +12225,7 @@ packages:
     engines: {node: '>=12'}
     dependencies:
       '@jridgewell/sourcemap-codec': 1.4.15
+    dev: true
 
   /magic-string@0.30.5:
     resolution: {integrity: sha512-7xlpfBaQaP/T6Vh8MO/EqXSW5En6INHEvEXQiuff7Gku0PWjU3uf6w/j9o7O+SpB5fOAkrI5HeoNgwjEO0pFsA==}
@@ -14362,7 +14368,7 @@ packages:
     engines: {node: '>=10.0.0'}
     hasBin: true
     optionalDependencies:
-      fsevents: 2.3.2
+      fsevents: 2.3.3
     dev: true
 
   /rollup@3.28.0:
@@ -14370,7 +14376,7 @@ packages:
     engines: {node: '>=14.18.0', npm: '>=8.0.0'}
     hasBin: true
     optionalDependencies:
-      fsevents: 2.3.2
+      fsevents: 2.3.3
     dev: true
 
   /rollup@4.5.0:
@@ -15219,10 +15225,10 @@ packages:
       chokidar: 3.5.3
       didyoumean: 1.2.2
       dlv: 1.1.3
-      fast-glob: 3.3.1
+      fast-glob: 3.3.2
       glob-parent: 6.0.2
       is-glob: 4.0.3
-      jiti: 1.19.1
+      jiti: 1.21.0
       lilconfig: 2.1.0
       micromatch: 4.0.5
       normalize-path: 3.0.0
@@ -15768,7 +15774,6 @@ packages:
     resolution: {integrity: sha512-cW9T5W9xY37cc+jfEnaUvX91foxtHkza3Nw3wkoF4sSlKn0MONdkdEndig/qPBWXNkmplh3NzayQzCiHM4/hqw==}
     engines: {node: '>=12.20'}
     hasBin: true
-    dev: true
 
   /typescript@5.1.6:
     resolution: {integrity: sha512-zaWCozRZ6DLEWAWFrVDz1H6FVXzUSfTy5FUMWsQlU8Ym5JP9eO4xkTIROFCQvhQf61z6O/G6ugw3SgAnvvm+HA==}
@@ -15953,6 +15958,45 @@ packages:
       - supports-color
     dev: true
 
+  /unocss@0.57.1(postcss@8.4.31)(rollup@2.79.1)(vite@4.5.0):
+    resolution: {integrity: sha512-xLsyJ8+T1/Ux93yrqOvuQy268wF5rSzydlsbqZ5EVfi01PxYyydez3nycPqbyPZientkJ0Yohzd5aBqmZgku3A==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      '@unocss/webpack': 0.57.1
+      vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0
+    peerDependenciesMeta:
+      '@unocss/webpack':
+        optional: true
+      vite:
+        optional: true
+    dependencies:
+      '@unocss/astro': 0.57.1(rollup@2.79.1)(vite@4.5.0)
+      '@unocss/cli': 0.57.1(rollup@2.79.1)
+      '@unocss/core': 0.57.1
+      '@unocss/extractor-arbitrary-variants': 0.57.1
+      '@unocss/postcss': 0.57.1(postcss@8.4.31)
+      '@unocss/preset-attributify': 0.57.1
+      '@unocss/preset-icons': 0.57.1
+      '@unocss/preset-mini': 0.57.1
+      '@unocss/preset-tagify': 0.57.1
+      '@unocss/preset-typography': 0.57.1
+      '@unocss/preset-uno': 0.57.1
+      '@unocss/preset-web-fonts': 0.57.1
+      '@unocss/preset-wind': 0.57.1
+      '@unocss/reset': 0.57.1
+      '@unocss/transformer-attributify-jsx': 0.57.1
+      '@unocss/transformer-attributify-jsx-babel': 0.57.1
+      '@unocss/transformer-compile-class': 0.57.1
+      '@unocss/transformer-directives': 0.57.1
+      '@unocss/transformer-variant-group': 0.57.1
+      '@unocss/vite': 0.57.1(rollup@2.79.1)(vite@4.5.0)
+      vite: 4.5.0(@types/node@18.17.5)
+    transitivePeerDependencies:
+      - postcss
+      - rollup
+      - supports-color
+    dev: true
+
   /unpipe@1.0.0:
     resolution: {integrity: sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==}
     engines: {node: '>= 0.8'}
@@ -15971,13 +16015,13 @@ packages:
       '@nuxt/kit':
         optional: true
     dependencies:
-      '@antfu/utils': 0.7.5
-      '@rollup/pluginutils': 5.0.3(rollup@2.79.1)
+      '@antfu/utils': 0.7.6
+      '@rollup/pluginutils': 5.0.5(rollup@2.79.1)
       chokidar: 3.5.3
       debug: 4.3.4(supports-color@8.1.1)
-      fast-glob: 3.2.12
+      fast-glob: 3.3.2
       local-pkg: 0.4.3
-      magic-string: 0.30.2
+      magic-string: 0.30.5
       minimatch: 9.0.3
       resolve: 1.22.4
       unplugin: 1.4.0
@@ -15987,6 +16031,35 @@ packages:
       - supports-color
     dev: true
 
+  /unplugin-vue-components@0.25.0(rollup@2.79.1)(vue@3.3.8):
+    resolution: {integrity: sha512-HxrQ4GMSS1RwVww2av3a42cABo/v5AmTRN9iARv6e/xwkrfTyHhLh84kFwXxKkXK61vxDHxaryn694mQmkiVBg==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      '@babel/parser': ^7.15.8
+      '@nuxt/kit': ^3.2.2
+      vue: 2 || 3
+    peerDependenciesMeta:
+      '@babel/parser':
+        optional: true
+      '@nuxt/kit':
+        optional: true
+    dependencies:
+      '@antfu/utils': 0.7.6
+      '@rollup/pluginutils': 5.0.5(rollup@2.79.1)
+      chokidar: 3.5.3
+      debug: 4.3.4(supports-color@8.1.1)
+      fast-glob: 3.3.2
+      local-pkg: 0.4.3
+      magic-string: 0.30.5
+      minimatch: 9.0.3
+      resolve: 1.22.4
+      unplugin: 1.4.0
+      vue: 3.3.8(typescript@5.1.6)
+    transitivePeerDependencies:
+      - rollup
+      - supports-color
+    dev: true
+
   /unplugin@1.4.0:
     resolution: {integrity: sha512-5x4eIEL6WgbzqGtF9UV8VEC/ehKptPXDS6L2b0mv4FRMkJxRtjaJfOWDd6a8+kYbqsjklix7yWP0N3SUepjXcg==}
     dependencies:
@@ -16143,6 +16216,24 @@ packages:
       - supports-color
     dev: true
 
+  /vite-plugin-pwa@0.16.7(vite@4.5.0)(workbox-build@7.0.0)(workbox-window@7.0.0):
+    resolution: {integrity: sha512-4WMA5unuKlHs+koNoykeuCfTcqEGbiTRr8sVYUQMhc6tWxZpSRnv9Ojk4LKmqVhoPGHfBVCdGaMo8t9Qidkc1Q==}
+    engines: {node: '>=16.0.0'}
+    peerDependencies:
+      vite: ^3.1.0 || ^4.0.0 || ^5.0.0-0
+      workbox-build: ^7.0.0
+      workbox-window: ^7.0.0
+    dependencies:
+      debug: 4.3.4(supports-color@8.1.1)
+      fast-glob: 3.3.2
+      pretty-bytes: 6.1.1
+      vite: 4.5.0(@types/node@18.17.5)
+      workbox-build: 7.0.0
+      workbox-window: 7.0.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /vite-plugin-pwa@0.17.0(vite@4.4.9)(workbox-build@7.0.0)(workbox-window@7.0.0):
     resolution: {integrity: sha512-cOyEG8EEc7JHmyMapTnjK2j0g2BIC3ErlmOHyGzVu8hqjyF9Jt6yWMmVNFtpA6v/NNyzP28ARf3vwzIAzR1kaw==}
     engines: {node: '>=16.0.0'}
@@ -16194,7 +16285,7 @@ packages:
       postcss: 8.4.27
       rollup: 3.28.0
     optionalDependencies:
-      fsevents: 2.3.2
+      fsevents: 2.3.3
     dev: true
 
   /vite@4.5.0(@types/node@18.17.5):
@@ -16230,7 +16321,7 @@ packages:
       postcss: 8.4.31
       rollup: 3.28.0
     optionalDependencies:
-      fsevents: 2.3.2
+      fsevents: 2.3.3
     dev: true
 
   /vite@5.0.0(@types/node@18.17.5):
@@ -16269,7 +16360,7 @@ packages:
       fsevents: 2.3.3
     dev: true
 
-  /vitepress-plugin-search@1.0.4-alpha.20(flexsearch@0.7.31)(vitepress@1.0.0-alpha.72)(vue@3.3.7):
+  /vitepress-plugin-search@1.0.4-alpha.20(flexsearch@0.7.31)(vitepress@1.0.0-alpha.72)(vue@3.3.8):
     resolution: {integrity: sha512-zG+ev9pw1Mg7htABlFCNXb8XwnKN+qfTKw+vU0Ers6RIrABx+45EAAFBoaL1mEpl1FRFn1o/dQ7F4b8GP6HdGQ==}
     engines: {node: ^14.13.1 || ^16.7.0 || >=18}
     peerDependencies:
@@ -16283,7 +16374,7 @@ packages:
       glob-to-regexp: 0.4.1
       markdown-it: 13.0.1
       vitepress: 1.0.0-alpha.72(@algolia/client-search@4.19.1)(@types/node@18.17.5)(search-insights@2.7.0)
-      vue: 3.3.7(typescript@5.0.4)
+      vue: 3.3.8(typescript@5.0.4)
     dev: true
 
   /vitepress@1.0.0-alpha.72(@algolia/client-search@4.19.1)(@types/node@18.17.5)(search-insights@2.7.0):
@@ -16317,6 +16408,60 @@ packages:
       - terser
     dev: true
 
+  /vitepress@1.0.0-rc.25(@algolia/client-search@4.19.1)(@types/node@18.17.5)(postcss@8.4.31)(search-insights@2.7.0)(typescript@5.1.6):
+    resolution: {integrity: sha512-1dqWiHNThNrVZ08ixmfEDBEH+764KOgnev9oXga/x6cN++Vb9pnuu8p3K6DQP+KZrYcG+WiX7jxal0iSNpAWuQ==}
+    hasBin: true
+    peerDependencies:
+      markdown-it-mathjax3: ^4.3.2
+      postcss: ^8.4.31
+    peerDependenciesMeta:
+      markdown-it-mathjax3:
+        optional: true
+      postcss:
+        optional: true
+    dependencies:
+      '@docsearch/css': 3.5.2
+      '@docsearch/js': 3.5.2(@algolia/client-search@4.19.1)(search-insights@2.7.0)
+      '@types/markdown-it': 13.0.6
+      '@vitejs/plugin-vue': 4.3.1(vite@4.5.0)(vue@3.3.8)
+      '@vue/devtools-api': 6.5.1
+      '@vueuse/core': 10.6.1(vue@3.3.8)
+      '@vueuse/integrations': 10.6.1(focus-trap@7.5.4)(vue@3.3.8)
+      focus-trap: 7.5.4
+      mark.js: 8.11.1
+      minisearch: 6.2.0
+      postcss: 8.4.31
+      shiki: 0.14.5
+      vite: 4.5.0(@types/node@18.17.5)
+      vue: 3.3.8(typescript@5.1.6)
+    transitivePeerDependencies:
+      - '@algolia/client-search'
+      - '@types/node'
+      - '@types/react'
+      - '@vue/composition-api'
+      - async-validator
+      - axios
+      - change-case
+      - drauu
+      - fuse.js
+      - idb-keyval
+      - jwt-decode
+      - less
+      - lightningcss
+      - nprogress
+      - qrcode
+      - react
+      - react-dom
+      - sass
+      - search-insights
+      - sortablejs
+      - stylus
+      - sugarss
+      - terser
+      - typescript
+      - universal-cookie
+    dev: true
+
   /vitepress@1.0.0-rc.29(@algolia/client-search@4.19.1)(@types/node@18.17.5)(postcss@8.4.31)(search-insights@2.7.0)(typescript@5.1.6):
     resolution: {integrity: sha512-6sKmyEvH16SgMqkHzRwwadt9Uju13AOIqouzOVEg3Rk6X9mds6jLsq2GxnAJvg0s6bl/0Qs/cw+f8SNki82ltw==}
     hasBin: true
@@ -16426,7 +16571,7 @@ packages:
       strip-literal: 1.3.0
       tinybench: 2.5.0
       tinypool: 0.7.0
-      vite: 4.4.9(@types/node@18.17.5)
+      vite: 4.5.0(@types/node@18.17.5)
       vite-node: 0.34.0(@types/node@18.17.5)
       why-is-node-running: 2.2.2
     transitivePeerDependencies:
@@ -16516,7 +16661,6 @@ packages:
         optional: true
     dependencies:
       vue: 3.3.8(typescript@5.1.6)
-    dev: true
 
   /vue@3.3.4:
     resolution: {integrity: sha512-VTyEYn3yvIeY1Py0WaYGZsXnz3y5UnGi62GjVEqvEGPl6nxbOrCXbVOTQWBEJUqAyTUk2uJ5JLVnYJ6ZzGbrSw==}
@@ -16527,21 +16671,20 @@ packages:
       '@vue/server-renderer': 3.3.4(vue@3.3.4)
       '@vue/shared': 3.3.4
 
-  /vue@3.3.7(typescript@5.0.4):
-    resolution: {integrity: sha512-YEMDia1ZTv1TeBbnu6VybatmSteGOS3A3YgfINOfraCbf85wdKHzscD6HSS/vB4GAtI7sa1XPX7HcQaJ1l24zA==}
+  /vue@3.3.8(typescript@5.0.4):
+    resolution: {integrity: sha512-5VSX/3DabBikOXMsxzlW8JyfeLKlG9mzqnWgLQLty88vdZL7ZJgrdgBOmrArwxiLtmS+lNNpPcBYqrhE6TQW5w==}
     peerDependencies:
       typescript: '*'
     peerDependenciesMeta:
       typescript:
         optional: true
     dependencies:
-      '@vue/compiler-dom': 3.3.7
-      '@vue/compiler-sfc': 3.3.7
-      '@vue/runtime-dom': 3.3.7
-      '@vue/server-renderer': 3.3.7(vue@3.3.7)
-      '@vue/shared': 3.3.7
+      '@vue/compiler-dom': 3.3.8
+      '@vue/compiler-sfc': 3.3.8
+      '@vue/runtime-dom': 3.3.8
+      '@vue/server-renderer': 3.3.8(vue@3.3.8)
+      '@vue/shared': 3.3.8
       typescript: 5.0.4
-    dev: true
 
   /vue@3.3.8(typescript@5.1.6):
     resolution: {integrity: sha512-5VSX/3DabBikOXMsxzlW8JyfeLKlG9mzqnWgLQLty88vdZL7ZJgrdgBOmrArwxiLtmS+lNNpPcBYqrhE6TQW5w==}
@@ -16557,7 +16700,6 @@ packages:
       '@vue/server-renderer': 3.3.8(vue@3.3.8)
       '@vue/shared': 3.3.8
       typescript: 5.1.6
-    dev: true
 
   /vuex@4.1.0(vue@3.3.4):
     resolution: {integrity: sha512-hmV6UerDrPcgbSy9ORAtNXDr9M4wlNP4pEFKye4ujJF8oqgFFuxDCdOLS3eNoRTtq5O3hoBDh9Doj1bQMYHRbQ==}

From 7b0f6c1c7498eba78b8d749281d0e7952289086f Mon Sep 17 00:00:00 2001
From: Sidharth Vinod 
Date: Fri, 24 Nov 2023 10:44:18 +0530
Subject: [PATCH 259/457] fix Types

---
 packages/mermaid/tsconfig.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/mermaid/tsconfig.json b/packages/mermaid/tsconfig.json
index b32425399d..78e3cf2de5 100644
--- a/packages/mermaid/tsconfig.json
+++ b/packages/mermaid/tsconfig.json
@@ -3,7 +3,7 @@
   "compilerOptions": {
     "rootDir": "./src",
     "outDir": "./dist",
-    "types": ["vitest/importMeta"]
+    "types": ["vitest/importMeta", "vitest/globals"]
   },
   "include": ["./src/**/*.ts", "./package.json"]
 }

From 5b705cf94ff3a595885077d8ad640801c27f591c Mon Sep 17 00:00:00 2001
From: Sidharth Vinod 
Date: Fri, 24 Nov 2023 14:11:49 +0530
Subject: [PATCH 260/457] v10.6.2-rc.1

---
 packages/mermaid/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json
index 17f60d879f..dc1ae320aa 100644
--- a/packages/mermaid/package.json
+++ b/packages/mermaid/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mermaid",
-  "version": "10.6.1",
+  "version": "10.6.2-rc.1",
   "description": "Markdown-ish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
   "type": "module",
   "module": "./dist/mermaid.core.mjs",

From 1ff721855829315ff6d3662da45800a74f81a35b Mon Sep 17 00:00:00 2001
From: Yuta Nakamura 
Date: Wed, 22 Nov 2023 22:40:05 +0900
Subject: [PATCH 261/457] fix: flowchart image without text

---
 packages/mermaid/src/dagre-wrapper/shapes/util.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/mermaid/src/dagre-wrapper/shapes/util.js b/packages/mermaid/src/dagre-wrapper/shapes/util.js
index 079125e3a6..97a1bef8d1 100644
--- a/packages/mermaid/src/dagre-wrapper/shapes/util.js
+++ b/packages/mermaid/src/dagre-wrapper/shapes/util.js
@@ -80,7 +80,9 @@ export const labelHelper = async (parent, node, _classes, isNode) => {
                     ? getConfig().fontSize
                     : window.getComputedStyle(document.body).fontSize;
                   const enlargingFactor = 5;
-                  img.style.width = parseInt(bodyFontSize, 10) * enlargingFactor + 'px';
+                  const width = parseInt(bodyFontSize, 10) * enlargingFactor + 'px';
+                  img.style.minWidth = width;
+                  img.style.maxWidth = width;
                 } else {
                   img.style.width = '100%';
                 }

From 3489fc49b932363802d34985053db70adb75d49c Mon Sep 17 00:00:00 2001
From: Matheus B 
Date: Sat, 25 Nov 2023 13:51:49 -0300
Subject: [PATCH 262/457] Replace multiple calls of getConfig() for a single at
 top of the scope

---
 packages/mermaid/src/dagre-wrapper/clusters.js | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/packages/mermaid/src/dagre-wrapper/clusters.js b/packages/mermaid/src/dagre-wrapper/clusters.js
index 11fcecfc31..2de3f2489a 100644
--- a/packages/mermaid/src/dagre-wrapper/clusters.js
+++ b/packages/mermaid/src/dagre-wrapper/clusters.js
@@ -9,6 +9,7 @@ import { getSubGraphTitleMargins } from '../utils/subGraphTitleMargins.js';
 
 const rect = (parent, node) => {
   log.info('Creating subgraph rect for ', node.id, node);
+  const siteConfig = getConfig();
 
   // Add outer g element
   const shapeSvg = parent
@@ -19,7 +20,7 @@ const rect = (parent, node) => {
   // add the rect
   const rect = shapeSvg.insert('rect', ':first-child');
 
-  const useHtmlLabels = evaluate(getConfig().flowchart.htmlLabels);
+  const useHtmlLabels = evaluate(siteConfig.flowchart.htmlLabels);
 
   // Create the label and insert it after the rect
   const label = shapeSvg.insert('g').attr('class', 'cluster-label');
@@ -35,7 +36,7 @@ const rect = (parent, node) => {
   // Get the size of the label
   let bbox = text.getBBox();
 
-  if (evaluate(getConfig().flowchart.htmlLabels)) {
+  if (evaluate(siteConfig.flowchart.htmlLabels)) {
     const div = text.children[0];
     const dv = select(text);
     bbox = div.getBoundingClientRect();
@@ -64,7 +65,7 @@ const rect = (parent, node) => {
     .attr('width', width)
     .attr('height', node.height + padding);
 
-  const { subGraphTitleTopMargin } = getSubGraphTitleMargins(getConfig());
+  const { subGraphTitleTopMargin } = getSubGraphTitleMargins(siteConfig);
   if (useHtmlLabels) {
     label.attr(
       'transform',
@@ -129,6 +130,8 @@ const noteGroup = (parent, node) => {
   return shapeSvg;
 };
 const roundedWithTitle = (parent, node) => {
+  const siteConfig = getConfig();
+
   // Add outer g element
   const shapeSvg = parent.insert('g').attr('class', node.classes).attr('id', node.id);
 
@@ -145,7 +148,7 @@ const roundedWithTitle = (parent, node) => {
 
   // Get the size of the label
   let bbox = text.getBBox();
-  if (evaluate(getConfig().flowchart.htmlLabels)) {
+  if (evaluate(siteConfig.flowchart.htmlLabels)) {
     const div = text.children[0];
     const dv = select(text);
     bbox = div.getBoundingClientRect();
@@ -177,7 +180,7 @@ const roundedWithTitle = (parent, node) => {
     .attr('width', width + padding)
     .attr('height', node.height + padding - bbox.height - 3);
 
-  const { subGraphTitleTopMargin } = getSubGraphTitleMargins(getConfig());
+  const { subGraphTitleTopMargin } = getSubGraphTitleMargins(siteConfig);
   // Center the label
   label.attr(
     'transform',
@@ -187,7 +190,7 @@ const roundedWithTitle = (parent, node) => {
       (node.y -
         node.height / 2 -
         node.padding / 3 +
-        (evaluate(getConfig().flowchart.htmlLabels) ? 5 : 3)) +
+        (evaluate(siteConfig.flowchart.htmlLabels) ? 5 : 3)) +
       subGraphTitleTopMargin +
       ')'
   );

From ce875c9a3389713a614aae1257ff37e1f8ecb9a8 Mon Sep 17 00:00:00 2001
From: Matheus B 
Date: Sun, 26 Nov 2023 18:18:31 -0300
Subject: [PATCH 263/457] Move getConfig() call out of recursiveRender to its
 parent caller

---
 packages/mermaid/src/dagre-wrapper/index.js | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/packages/mermaid/src/dagre-wrapper/index.js b/packages/mermaid/src/dagre-wrapper/index.js
index 0ebd9beed4..5bdcfa7212 100644
--- a/packages/mermaid/src/dagre-wrapper/index.js
+++ b/packages/mermaid/src/dagre-wrapper/index.js
@@ -16,7 +16,7 @@ import { log } from '../logger.js';
 import { getSubGraphTitleMargins } from '../utils/subGraphTitleMargins.js';
 import { getConfig } from '../diagram-api/diagramAPI.js';
 
-const recursiveRender = async (_elem, graph, diagramtype, id, parentCluster) => {
+const recursiveRender = async (_elem, graph, diagramtype, id, parentCluster, siteConfig) => {
   log.info('Graph in recursive render: XXX', graphlibJson.write(graph), parentCluster);
   const dir = graph.graph().rankdir;
   log.trace('Dir in recursive render - dir:', dir);
@@ -54,7 +54,14 @@ const recursiveRender = async (_elem, graph, diagramtype, id, parentCluster) =>
       if (node && node.clusterNode) {
         // const children = graph.children(v);
         log.info('Cluster identified', v, node.width, graph.node(v));
-        const o = await recursiveRender(nodes, node.graph, diagramtype, id, graph.node(v));
+        const o = await recursiveRender(
+          nodes,
+          node.graph,
+          diagramtype,
+          id,
+          graph.node(v),
+          siteConfig
+        );
         const newEl = o.elem;
         updateNodeBounds(node, newEl);
         node.diff = o.diff || 0;
@@ -103,7 +110,7 @@ const recursiveRender = async (_elem, graph, diagramtype, id, parentCluster) =>
   log.info('Graph after layout:', graphlibJson.write(graph));
   // Move the nodes to the correct place
   let diff = 0;
-  const { subGraphTitleTotalMargin } = getSubGraphTitleMargins(getConfig());
+  const { subGraphTitleTotalMargin } = getSubGraphTitleMargins(siteConfig);
   sortNodesByHierarchy(graph).forEach(function (v) {
     const node = graph.node(v);
     log.info('Position ' + v + ': ' + JSON.stringify(graph.node(v)));
@@ -163,7 +170,8 @@ export const render = async (elem, graph, markers, diagramtype, id) => {
   adjustClustersAndEdges(graph);
   log.warn('Graph after:', JSON.stringify(graphlibJson.write(graph)));
   // log.warn('Graph ever  after:', graphlibJson.write(graph.node('A').graph));
-  await recursiveRender(elem, graph, diagramtype, id);
+  const siteConfig = getConfig();
+  await recursiveRender(elem, graph, diagramtype, id, undefined, siteConfig);
 };
 
 // const shapeDefinitions = {};

From 2cc4f23856ab1ca5b03d998eea4167cbbd97107c Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Mon, 27 Nov 2023 01:36:48 +0000
Subject: [PATCH 264/457] chore(deps): update all patch dependencies

---
 packages/mermaid/src/docs/package.json |   2 +-
 pnpm-lock.yaml                         | 571 +++++++++++++------------
 2 files changed, 288 insertions(+), 285 deletions(-)

diff --git a/packages/mermaid/src/docs/package.json b/packages/mermaid/src/docs/package.json
index c95a8aeda4..edeb9dc379 100644
--- a/packages/mermaid/src/docs/package.json
+++ b/packages/mermaid/src/docs/package.json
@@ -32,7 +32,7 @@
     "unplugin-vue-components": "^0.25.0",
     "vite": "^4.3.9",
     "vite-plugin-pwa": "^0.17.0",
-    "vitepress": "1.0.0-rc.29",
+    "vitepress": "1.0.0-rc.31",
     "workbox-window": "^7.0.0"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5434d0e5e9..871c32f0d0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -475,63 +475,8 @@ importers:
         specifier: ^0.17.0
         version: 0.17.0(vite@4.4.9)(workbox-build@7.0.0)(workbox-window@7.0.0)
       vitepress:
-        specifier: 1.0.0-rc.29
-        version: 1.0.0-rc.29(@algolia/client-search@4.19.1)(@types/node@18.17.5)(postcss@8.4.31)(search-insights@2.7.0)(typescript@5.1.6)
-      workbox-window:
-        specifier: ^7.0.0
-        version: 7.0.0
-
-  packages/mermaid/src/vitepress:
-    dependencies:
-      '@vueuse/core':
-        specifier: ^10.1.0
-        version: 10.6.1(vue@3.3.8)
-      jiti:
-        specifier: ^1.18.2
-        version: 1.21.0
-      mermaid:
-        specifier: workspace:^
-        version: link:../..
-      vue:
-        specifier: ^3.3
-        version: 3.3.8(typescript@5.1.6)
-    devDependencies:
-      '@iconify-json/carbon':
-        specifier: ^1.1.16
-        version: 1.1.16
-      '@unocss/reset':
-        specifier: ^0.57.0
-        version: 0.57.1
-      '@vite-pwa/vitepress':
-        specifier: ^0.2.0
-        version: 0.2.3(vite-plugin-pwa@0.16.7)
-      '@vitejs/plugin-vue':
-        specifier: ^4.2.1
-        version: 4.5.0(vite@4.5.0)(vue@3.3.8)
-      fast-glob:
-        specifier: ^3.2.12
-        version: 3.3.2
-      https-localhost:
-        specifier: ^4.7.1
-        version: 4.7.1
-      pathe:
-        specifier: ^1.1.0
-        version: 1.1.1
-      unocss:
-        specifier: ^0.57.0
-        version: 0.57.1(postcss@8.4.31)(rollup@2.79.1)(vite@4.5.0)
-      unplugin-vue-components:
-        specifier: ^0.25.0
-        version: 0.25.0(rollup@2.79.1)(vue@3.3.8)
-      vite:
-        specifier: ^4.3.9
-        version: 4.5.0(@types/node@18.17.5)
-      vite-plugin-pwa:
-        specifier: ^0.16.0
-        version: 0.16.7(vite@4.5.0)(workbox-build@7.0.0)(workbox-window@7.0.0)
-      vitepress:
-        specifier: 1.0.0-rc.25
-        version: 1.0.0-rc.25(@algolia/client-search@4.19.1)(@types/node@18.17.5)(postcss@8.4.31)(search-insights@2.7.0)(typescript@5.1.6)
+        specifier: 1.0.0-rc.31
+        version: 1.0.0-rc.31(@algolia/client-search@4.19.1)(@types/node@18.17.5)(postcss@8.4.31)(search-insights@2.7.0)(typescript@5.1.6)
       workbox-window:
         specifier: ^7.0.0
         version: 7.0.0
@@ -4723,6 +4668,12 @@ packages:
       '@types/node': 18.17.5
     dev: true
 
+  /@types/hast@3.0.3:
+    resolution: {integrity: sha512-2fYGlaDy/qyLlhidX42wAH0KBi2TCjKMH8CHmBXgRlJ3Y+OXTiqsPQ6IWarZKwF1JoUcAJdPogv1d4b0COTpmQ==}
+    dependencies:
+      '@types/unist': 3.0.2
+    dev: true
+
   /@types/http-cache-semantics@4.0.1:
     resolution: {integrity: sha512-SZs7ekbP8CN0txVG2xVRH6EgKmEm31BOxA07vkFaETzZz1xh+cbt8BcI0slpymvwhx5dlFnQG2rTlPVQn+iRPQ==}
     dev: true
@@ -4796,8 +4747,8 @@ packages:
       '@types/mdurl': 1.0.2
     dev: true
 
-  /@types/markdown-it@13.0.6:
-    resolution: {integrity: sha512-0VqpvusJn1/lwRegCxcHVdmLfF+wIsprsKMC9xW8UPcTxhFcQtoN/fBU1zMe8pH7D/RuueMh2CaBaNv+GrLqTw==}
+  /@types/markdown-it@13.0.7:
+    resolution: {integrity: sha512-U/CBi2YUUcTHBt5tjO2r5QV/x0Po6nsYwQU4Y04fBS6vfoImaiZ6f8bi3CjTCxBPQSO1LMyUqkByzi8AidyxfA==}
     dependencies:
       '@types/linkify-it': 3.0.2
       '@types/mdurl': 1.0.2
@@ -4808,6 +4759,12 @@ packages:
     dependencies:
       '@types/unist': 2.0.7
 
+  /@types/mdast@4.0.3:
+    resolution: {integrity: sha512-LsjtqsyF+d2/yFOYaN22dHZI1Cpwkrj+g06G8+qtUKlhovPW89YhqSnfKtMbkgmEtYpH2gydRNULd6y8mciAFg==}
+    dependencies:
+      '@types/unist': 3.0.2
+    dev: true
+
   /@types/mdurl@1.0.2:
     resolution: {integrity: sha512-eC4U9MlIcu2q0KQmXszyn5Akca/0jrQmwDRgpAMJai7qBWq4amIQhZyNau4VYGtCeALvW1/NtjzJJ567aZxfKA==}
     dev: true
@@ -4951,6 +4908,10 @@ packages:
   /@types/unist@2.0.7:
     resolution: {integrity: sha512-cputDpIbFgLUaGQn6Vqg3/YsJwxUwHLO13v3i5ouxT4lat0khip9AEWxtERujXV9wxIB1EyF97BSJFt6vpdI8g==}
 
+  /@types/unist@3.0.2:
+    resolution: {integrity: sha512-dqId9J8K/vGi5Zr7oo212BGii5m3q5Hxlkwy3WpYuKPklmBEvsbMYYyLxAQpSffdLl/gdW0XUpKWFvYmyoWCoQ==}
+    dev: true
+
   /@types/uuid@9.0.1:
     resolution: {integrity: sha512-rFT3ak0/2trgvp4yYZo5iKFEPsET7vKydKF+VRCxlQ9bpheehyAJH89dAkaLEq/j/RZXJIqcgsmPJKUP1Z28HA==}
     dev: true
@@ -4965,6 +4926,7 @@ packages:
 
   /@types/web-bluetooth@0.0.20:
     resolution: {integrity: sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==}
+    dev: true
 
   /@types/ws@8.5.5:
     resolution: {integrity: sha512-lwhs8hktwxSjf9UaZ9tG5M03PGogvFaH8gUgLNbN9HKIg0dvv6q+gkSuJ8HN4/VbyxkuLzCjlN7GquQ0gUJfIg==}
@@ -5313,6 +5275,10 @@ packages:
       eslint-visitor-keys: 3.4.3
     dev: true
 
+  /@ungap/structured-clone@1.2.0:
+    resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==}
+    dev: true
+
   /@unocss/astro@0.57.1(rollup@2.79.1)(vite@4.4.9):
     resolution: {integrity: sha512-KNaqN/SGM/uz1QitajIkzNEw0jy9Zx9Wp8fl4GhfGYEMAN2+M4cuvBZRmlb6cLctSXmSAJQDG91ivbD1JijGnw==}
     peerDependencies:
@@ -5329,22 +5295,6 @@ packages:
       - rollup
     dev: true
 
-  /@unocss/astro@0.57.1(rollup@2.79.1)(vite@4.5.0):
-    resolution: {integrity: sha512-KNaqN/SGM/uz1QitajIkzNEw0jy9Zx9Wp8fl4GhfGYEMAN2+M4cuvBZRmlb6cLctSXmSAJQDG91ivbD1JijGnw==}
-    peerDependencies:
-      vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0
-    peerDependenciesMeta:
-      vite:
-        optional: true
-    dependencies:
-      '@unocss/core': 0.57.1
-      '@unocss/reset': 0.57.1
-      '@unocss/vite': 0.57.1(rollup@2.79.1)(vite@4.5.0)
-      vite: 4.5.0(@types/node@18.17.5)
-    transitivePeerDependencies:
-      - rollup
-    dev: true
-
   /@unocss/cli@0.57.1(rollup@2.79.1):
     resolution: {integrity: sha512-wKuOaygrPNzDm5L7+2SfHsIi3knJrAQ8nH6OasVqB+bGDz6ybDlULV7wvUco6Os72ydh7YbWC2/WpqFii8U/3w==}
     engines: {node: '>=14'}
@@ -5537,34 +5487,6 @@ packages:
       - rollup
     dev: true
 
-  /@unocss/vite@0.57.1(rollup@2.79.1)(vite@4.5.0):
-    resolution: {integrity: sha512-kEBDvGgQNkX2n87S6Ao5seyFb1kuWZ5p96dGOS7VFpD7HvR5xholkJXaVhUK9/exCldjLExbo5UtVlbxFLUFYg==}
-    peerDependencies:
-      vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0
-    dependencies:
-      '@ampproject/remapping': 2.2.1
-      '@rollup/pluginutils': 5.0.5(rollup@2.79.1)
-      '@unocss/config': 0.57.1
-      '@unocss/core': 0.57.1
-      '@unocss/inspector': 0.57.1
-      '@unocss/scope': 0.57.1
-      '@unocss/transformer-directives': 0.57.1
-      chokidar: 3.5.3
-      fast-glob: 3.3.2
-      magic-string: 0.30.5
-      vite: 4.5.0(@types/node@18.17.5)
-    transitivePeerDependencies:
-      - rollup
-    dev: true
-
-  /@vite-pwa/vitepress@0.2.3(vite-plugin-pwa@0.16.7):
-    resolution: {integrity: sha512-6k9151CmILbSJQ88hLEMLL+MOQZDURKg2c4Wo5UcaEaOWU0jv7S+mo8nqyg86sM6ry8Jlnp6Zfv6AE0FqnfEyQ==}
-    peerDependencies:
-      vite-plugin-pwa: '>=0.16.5 <1'
-    dependencies:
-      vite-plugin-pwa: 0.16.7(vite@4.5.0)(workbox-build@7.0.0)(workbox-window@7.0.0)
-    dev: true
-
   /@vite-pwa/vitepress@0.3.0(vite-plugin-pwa@0.17.0):
     resolution: {integrity: sha512-7akiTt0laHJRSJ7lxPttGHYBoC2J+FgWJr0TGYQd2jPe/8nou+YSDwBGpOV+/qeobX2uzff8kew02n/07JRe9Q==}
     peerDependencies:
@@ -5595,36 +5517,14 @@ packages:
       vue: 3.3.4
     dev: true
 
-  /@vitejs/plugin-vue@4.3.1(vite@4.5.0)(vue@3.3.8):
-    resolution: {integrity: sha512-tUBEtWcF7wFtII7ayNiLNDTCE1X1afySEo+XNVMNkFXaThENyCowIEX095QqbJZGTgoOcSVDJGlnde2NG4jtbQ==}
-    engines: {node: ^14.18.0 || >=16.0.0}
-    peerDependencies:
-      vite: ^4.0.0
-      vue: ^3.2.25
-    dependencies:
-      vite: 4.5.0(@types/node@18.17.5)
-      vue: 3.3.8(typescript@5.1.6)
-    dev: true
-
-  /@vitejs/plugin-vue@4.5.0(vite@4.5.0)(vue@3.3.8):
-    resolution: {integrity: sha512-a2WSpP8X8HTEww/U00bU4mX1QpLINNuz/2KMNpLsdu3BzOpak3AGI1CJYBTXcc4SPhaD0eNRUp7IyQK405L5dQ==}
-    engines: {node: ^14.18.0 || >=16.0.0}
-    peerDependencies:
-      vite: ^4.0.0 || ^5.0.0
-      vue: ^3.2.25
-    dependencies:
-      vite: 4.5.0(@types/node@18.17.5)
-      vue: 3.3.8(typescript@5.1.6)
-    dev: true
-
-  /@vitejs/plugin-vue@4.5.0(vite@5.0.0)(vue@3.3.8):
+  /@vitejs/plugin-vue@4.5.0(vite@5.0.2)(vue@3.3.8):
     resolution: {integrity: sha512-a2WSpP8X8HTEww/U00bU4mX1QpLINNuz/2KMNpLsdu3BzOpak3AGI1CJYBTXcc4SPhaD0eNRUp7IyQK405L5dQ==}
     engines: {node: ^14.18.0 || >=16.0.0}
     peerDependencies:
       vite: ^4.0.0 || ^5.0.0
       vue: ^3.2.25
     dependencies:
-      vite: 5.0.0(@types/node@18.17.5)
+      vite: 5.0.2(@types/node@18.17.5)
       vue: 3.3.8(typescript@5.1.6)
     dev: true
 
@@ -5728,6 +5628,7 @@ packages:
       '@vue/shared': 3.3.8
       estree-walker: 2.0.2
       source-map-js: 1.0.2
+    dev: true
 
   /@vue/compiler-dom@3.3.4:
     resolution: {integrity: sha512-wyM+OjOVpuUukIq6p5+nwHYtj9cFroz9cwkfmP9O1nzH68BenTTv0u7/ndggT8cIQlnBeOo6sUT/gvHcIkLA5w==}
@@ -5740,6 +5641,7 @@ packages:
     dependencies:
       '@vue/compiler-core': 3.3.8
       '@vue/shared': 3.3.8
+    dev: true
 
   /@vue/compiler-sfc@3.3.4:
     resolution: {integrity: sha512-6y/d8uw+5TkCuzBkgLS0v3lSM3hJDntFEiUORM11pQ/hKvkhSKZrXW6i69UyXlJQisJxuUEJKAWEqWbWsLeNKQ==}
@@ -5768,6 +5670,7 @@ packages:
       magic-string: 0.30.5
       postcss: 8.4.31
       source-map-js: 1.0.2
+    dev: true
 
   /@vue/compiler-ssr@3.3.4:
     resolution: {integrity: sha512-m0v6oKpup2nMSehwA6Uuu+j+wEwcy7QmwMkVNVfrV9P2qE5KshC6RwOCq8fjGS/Eak/uNb8AaWekfiXxbBB6gQ==}
@@ -5780,6 +5683,7 @@ packages:
     dependencies:
       '@vue/compiler-dom': 3.3.8
       '@vue/shared': 3.3.8
+    dev: true
 
   /@vue/devtools-api@6.5.0:
     resolution: {integrity: sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q==}
@@ -5805,6 +5709,7 @@ packages:
       '@vue/shared': 3.3.8
       estree-walker: 2.0.2
       magic-string: 0.30.5
+    dev: true
 
   /@vue/reactivity@3.3.4:
     resolution: {integrity: sha512-kLTDLwd0B1jG08NBF3R5rqULtv/f8x3rOFByTDz4J53ttIQEDmALqKqXY0J+XQeN0aV2FBxY8nJDf88yvOPAqQ==}
@@ -5815,6 +5720,7 @@ packages:
     resolution: {integrity: sha512-ctLWitmFBu6mtddPyOKpHg8+5ahouoTCRtmAHZAXmolDtuZXfjL2T3OJ6DL6ezBPQB1SmMnpzjiWjCiMYmpIuw==}
     dependencies:
       '@vue/shared': 3.3.8
+    dev: true
 
   /@vue/runtime-core@3.3.4:
     resolution: {integrity: sha512-R+bqxMN6pWO7zGI4OMlmvePOdP2c93GsHFM/siJI7O2nxFRzj55pLwkpCedEY+bTMgp5miZ8CxfIZo3S+gFqvA==}
@@ -5827,6 +5733,7 @@ packages:
     dependencies:
       '@vue/reactivity': 3.3.8
       '@vue/shared': 3.3.8
+    dev: true
 
   /@vue/runtime-dom@3.3.4:
     resolution: {integrity: sha512-Aj5bTJ3u5sFsUckRghsNjVTtxZQ1OyMWCr5dZRAPijF/0Vy4xEoRCwLyHXcj4D0UFbJ4lbx3gPTgg06K/GnPnQ==}
@@ -5841,6 +5748,7 @@ packages:
       '@vue/runtime-core': 3.3.8
       '@vue/shared': 3.3.8
       csstype: 3.1.2
+    dev: true
 
   /@vue/server-renderer@3.3.4(vue@3.3.4):
     resolution: {integrity: sha512-Q6jDDzR23ViIb67v+vM1Dqntu+HUexQcsWKhhQa4ARVzxOY2HbC7QRW/ggkDBd5BU+uM1sV6XOAP0b216o34JQ==}
@@ -5859,12 +5767,14 @@ packages:
       '@vue/compiler-ssr': 3.3.8
       '@vue/shared': 3.3.8
       vue: 3.3.8(typescript@5.0.4)
+    dev: true
 
   /@vue/shared@3.3.4:
     resolution: {integrity: sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ==}
 
   /@vue/shared@3.3.8:
     resolution: {integrity: sha512-8PGwybFwM4x8pcfgqEQFy70NaQxASvOC5DJwLQfpArw1UDfUXrJkdxD3BhVTMS+0Lef/TU7YO0Jvr0jJY8T+mw==}
+    dev: true
 
   /@vueuse/core@10.1.0(vue@3.3.4):
     resolution: {integrity: sha512-3Znoa5m5RO+z4/C9w6DRaKTR3wCVJvD5rav8HTDGsr+7rOZRHtcgFJ8NcCs0ZvIpmev2kExTa311ns5j2RbzDQ==}
@@ -5900,6 +5810,7 @@ packages:
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
+    dev: true
 
   /@vueuse/integrations@10.6.1(focus-trap@7.5.4)(vue@3.3.8):
     resolution: {integrity: sha512-mPDupuofMJ4DPmtX/FfP1MajmWRzYDv8WSaTCo8LQ5kFznjWgmUQ16ApjYqgMquqffNY6+IRMdMgosLDRZOSZA==}
@@ -5961,6 +5872,7 @@ packages:
 
   /@vueuse/metadata@10.6.1:
     resolution: {integrity: sha512-qhdwPI65Bgcj23e5lpGfQsxcy0bMjCAsUGoXkJ7DsoeDUdasbZ2DBa4dinFCOER3lF4gwUv+UD2AlA11zdzMFw==}
+    dev: true
 
   /@vueuse/shared@10.1.0(vue@3.3.4):
     resolution: {integrity: sha512-2X52ogu12i9DkKOQ01yeb/BKg9UO87RNnpm5sXkQvyORlbq8ONS5l39MYkjkeVWWjdT0teJru7a2S41dmHmqjQ==}
@@ -5987,6 +5899,7 @@ packages:
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
+    dev: true
 
   /@wdio/config@7.30.0(typescript@5.1.6):
     resolution: {integrity: sha512-/38rol9WCfFTMtXyd/C856/aexxIZnfVvXg7Fw2WXpqZ9qadLA+R4N35S2703n/RByjK/5XAYtHoljtvh3727w==}
@@ -7151,10 +7064,18 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
+  /character-entities-html4@2.1.0:
+    resolution: {integrity: sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==}
+    dev: true
+
   /character-entities-legacy@1.1.4:
     resolution: {integrity: sha512-3Xnr+7ZFS1uxeiUDvV02wQ+QDbc55o97tIV5zHScSPJpcLm/r0DFPcoY3tYRp+VZukxuMeKgXYmsXQHO05zQeA==}
     dev: true
 
+  /character-entities-legacy@3.0.0:
+    resolution: {integrity: sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==}
+    dev: true
+
   /character-entities@1.2.4:
     resolution: {integrity: sha512-iBMyeEHxfVnIakwOuDXpVkc54HijNgCyQB2w0VfGQThle6NXn50zU6V/u+LDhxHcDUPojn6Kpga3PTAD8W1bQw==}
     dev: true
@@ -7376,6 +7297,10 @@ packages:
       delayed-stream: 1.0.0
     dev: true
 
+  /comma-separated-tokens@2.0.3:
+    resolution: {integrity: sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==}
+    dev: true
+
   /commander@10.0.1:
     resolution: {integrity: sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==}
     engines: {node: '>=14'}
@@ -8655,6 +8580,12 @@ packages:
     resolution: {integrity: sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==}
     dev: true
 
+  /devlop@1.1.0:
+    resolution: {integrity: sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==}
+    dependencies:
+      dequal: 2.0.3
+    dev: true
+
   /didyoumean@1.2.2:
     resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
     dev: false
@@ -10414,6 +10345,88 @@ packages:
       type-fest: 0.8.1
     dev: true
 
+  /hast-util-from-parse5@8.0.1:
+    resolution: {integrity: sha512-Er/Iixbc7IEa7r/XLtuG52zoqn/b3Xng/w6aZQ0xGVxzhw5xUFxcRqdPzP6yFi/4HBYRaifaI5fQ1RH8n0ZeOQ==}
+    dependencies:
+      '@types/hast': 3.0.3
+      '@types/unist': 3.0.2
+      devlop: 1.1.0
+      hastscript: 8.0.0
+      property-information: 6.4.0
+      vfile: 6.0.1
+      vfile-location: 5.0.2
+      web-namespaces: 2.0.1
+    dev: true
+
+  /hast-util-parse-selector@4.0.0:
+    resolution: {integrity: sha512-wkQCkSYoOGCRKERFWcxMVMOcYE2K1AaNLU8DXS9arxnLOUEWbOXKXiJUNzEpqZ3JOKpnha3jkFrumEjVliDe7A==}
+    dependencies:
+      '@types/hast': 3.0.3
+    dev: true
+
+  /hast-util-raw@9.0.1:
+    resolution: {integrity: sha512-5m1gmba658Q+lO5uqL5YNGQWeh1MYWZbZmWrM5lncdcuiXuo5E2HT/CIOp0rLF8ksfSwiCVJ3twlgVRyTGThGA==}
+    dependencies:
+      '@types/hast': 3.0.3
+      '@types/unist': 3.0.2
+      '@ungap/structured-clone': 1.2.0
+      hast-util-from-parse5: 8.0.1
+      hast-util-to-parse5: 8.0.0
+      html-void-elements: 3.0.0
+      mdast-util-to-hast: 13.0.2
+      parse5: 7.1.2
+      unist-util-position: 5.0.0
+      unist-util-visit: 5.0.0
+      vfile: 6.0.1
+      web-namespaces: 2.0.1
+      zwitch: 2.0.4
+    dev: true
+
+  /hast-util-to-html@9.0.0:
+    resolution: {integrity: sha512-IVGhNgg7vANuUA2XKrT6sOIIPgaYZnmLx3l/CCOAK0PtgfoHrZwX7jCSYyFxHTrGmC6S9q8aQQekjp4JPZF+cw==}
+    dependencies:
+      '@types/hast': 3.0.3
+      '@types/unist': 3.0.2
+      ccount: 2.0.1
+      comma-separated-tokens: 2.0.3
+      hast-util-raw: 9.0.1
+      hast-util-whitespace: 3.0.0
+      html-void-elements: 3.0.0
+      mdast-util-to-hast: 13.0.2
+      property-information: 6.4.0
+      space-separated-tokens: 2.0.2
+      stringify-entities: 4.0.3
+      zwitch: 2.0.4
+    dev: true
+
+  /hast-util-to-parse5@8.0.0:
+    resolution: {integrity: sha512-3KKrV5ZVI8if87DVSi1vDeByYrkGzg4mEfeu4alwgmmIeARiBLKCZS2uw5Gb6nU9x9Yufyj3iudm6i7nl52PFw==}
+    dependencies:
+      '@types/hast': 3.0.3
+      comma-separated-tokens: 2.0.3
+      devlop: 1.1.0
+      property-information: 6.4.0
+      space-separated-tokens: 2.0.2
+      web-namespaces: 2.0.1
+      zwitch: 2.0.4
+    dev: true
+
+  /hast-util-whitespace@3.0.0:
+    resolution: {integrity: sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==}
+    dependencies:
+      '@types/hast': 3.0.3
+    dev: true
+
+  /hastscript@8.0.0:
+    resolution: {integrity: sha512-dMOtzCEd3ABUeSIISmrETiKuyydk1w0pa+gE/uormcTpSYuaNJPbX1NU3JLyscSLjwAQM8bWMhhIlnCqnRvDTw==}
+    dependencies:
+      '@types/hast': 3.0.3
+      comma-separated-tokens: 2.0.3
+      hast-util-parse-selector: 4.0.0
+      property-information: 6.4.0
+      space-separated-tokens: 2.0.2
+    dev: true
+
   /heap@0.2.7:
     resolution: {integrity: sha512-2bsegYkkHO+h/9MGbn6KWcE45cHZgPANo5LXF7EvWdT0yT2EguSVO1nDgU5c8+ZOPwp2vMNa7YFsJhVcDR9Sdg==}
     dev: false
@@ -10461,6 +10474,10 @@ packages:
     resolution: {integrity: sha512-9gux8QhvjRO/erSnDPv28noDZcPZmYE7e1vFsBLKLlRlKDSqNJYebj6Qz1TGd5lsRV+X+xYyjCKjuZdABinWjA==}
     dev: false
 
+  /html-void-elements@3.0.0:
+    resolution: {integrity: sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==}
+    dev: true
+
   /htmlparser2@8.0.2:
     resolution: {integrity: sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA==}
     dependencies:
@@ -12436,6 +12453,19 @@ packages:
       unist-util-is: 5.2.1
     dev: true
 
+  /mdast-util-to-hast@13.0.2:
+    resolution: {integrity: sha512-U5I+500EOOw9e3ZrclN3Is3fRpw8c19SMyNZlZ2IS+7vLsNzb2Om11VpIVOR+/0137GhZsFEF6YiKD5+0Hr2Og==}
+    dependencies:
+      '@types/hast': 3.0.3
+      '@types/mdast': 4.0.3
+      '@ungap/structured-clone': 1.2.0
+      devlop: 1.1.0
+      micromark-util-sanitize-uri: 2.0.0
+      trim-lines: 3.0.1
+      unist-util-position: 5.0.0
+      unist-util-visit: 5.0.0
+    dev: true
+
   /mdast-util-to-markdown@1.5.0:
     resolution: {integrity: sha512-bbv7TPv/WC49thZPg3jXuqzuvI45IL2EVAr/KxF0BSdHsU0ceFHOmwQn6evxAh1GaoK/6GQ1wp4R4oW2+LFL/A==}
     dependencies:
@@ -12691,6 +12721,13 @@ packages:
       micromark-util-symbol: 1.1.0
       micromark-util-types: 1.1.0
 
+  /micromark-util-character@2.0.1:
+    resolution: {integrity: sha512-3wgnrmEAJ4T+mGXAUfMvMAbxU9RDG43XmGce4j6CwPtVxB3vfwXSZ6KhFwDzZ3mZHhmPimMAXg71veiBGzeAZw==}
+    dependencies:
+      micromark-util-symbol: 2.0.0
+      micromark-util-types: 2.0.0
+    dev: true
+
   /micromark-util-chunked@1.1.0:
     resolution: {integrity: sha512-Ye01HXpkZPNcV6FiyoW2fGZDUw4Yc7vT0E9Sad83+bEDiCJ1uXu0S3mr8WLpsz3HaG3x2q0HM6CTuPdcZcluFQ==}
     dependencies:
@@ -12725,6 +12762,10 @@ packages:
   /micromark-util-encode@1.1.0:
     resolution: {integrity: sha512-EuEzTWSTAj9PA5GOAs992GzNh2dGQO52UvAbtSOMvXTxv3Criqb6IOzJUBCmEqrrXSblJIJBbFFv6zPxpreiJw==}
 
+  /micromark-util-encode@2.0.0:
+    resolution: {integrity: sha512-pS+ROfCXAGLWCOc8egcBvT0kf27GoWMqtdarNfDcjb6YLuV5cM3ioG45Ys2qOVqeqSbjaKg72vU+Wby3eddPsA==}
+    dev: true
+
   /micromark-util-html-tag-name@1.2.0:
     resolution: {integrity: sha512-VTQzcuQgFUD7yYztuQFKXT49KghjtETQ+Wv/zUjGSGBioZnkA4P1XXZPT1FHeJA6RwRXSF47yvJ1tsJdoxwO+Q==}
 
@@ -12745,6 +12786,14 @@ packages:
       micromark-util-encode: 1.1.0
       micromark-util-symbol: 1.1.0
 
+  /micromark-util-sanitize-uri@2.0.0:
+    resolution: {integrity: sha512-WhYv5UEcZrbAtlsnPuChHUAsu/iBPOVaEVsntLBIdpibO0ddy8OzavZz3iL2xVvBZOpolujSliP65Kq0/7KIYw==}
+    dependencies:
+      micromark-util-character: 2.0.1
+      micromark-util-encode: 2.0.0
+      micromark-util-symbol: 2.0.0
+    dev: true
+
   /micromark-util-subtokenize@1.1.0:
     resolution: {integrity: sha512-kUQHyzRoxvZO2PuLzMt2P/dwVsTiivCK8icYTeR+3WgbuPqfHgPPy7nFKbeqRivBvn/3N3GBiNC+JRTMSxEC7A==}
     dependencies:
@@ -12756,9 +12805,17 @@ packages:
   /micromark-util-symbol@1.1.0:
     resolution: {integrity: sha512-uEjpEYY6KMs1g7QfJ2eX1SQEV+ZT4rUD3UcF6l57acZvLNK7PBZL+ty82Z1qhK1/yXIY4bdx04FKMgR0g4IAag==}
 
+  /micromark-util-symbol@2.0.0:
+    resolution: {integrity: sha512-8JZt9ElZ5kyTnO94muPxIGS8oyElRJaiJO8EzV6ZSyGQ1Is8xwl4Q45qU5UOg+bGH4AikWziz0iN4sFLWs8PGw==}
+    dev: true
+
   /micromark-util-types@1.1.0:
     resolution: {integrity: sha512-ukRBgie8TIAcacscVHSiddHjO4k/q3pnedmzMQ4iwDcK0FtFCohKOlFbaOL/mPgfnPsL3C1ZyxJa4sbWrBl3jg==}
 
+  /micromark-util-types@2.0.0:
+    resolution: {integrity: sha512-oNh6S2WMHWRZrmutsRmDDfkzKtxF+bc2VxLC9dvtrDIRFln627VsFP6fLMgTryGDljgLPjkrzQSDcPrjPyDJ5w==}
+    dev: true
+
   /micromark@2.11.4:
     resolution: {integrity: sha512-+WoovN/ppKolQOFIAajxi7Lu9kInbPxFuTBVEavFcL8eAfVstoc5MocPmqBeAdBOJV00uaVjegzH4+MA0DN/uA==}
     dependencies:
@@ -12886,8 +12943,8 @@ packages:
     resolution: {integrity: sha512-PNxA/X8pWk+TiqPbsoIYH0GQ5Di7m6326/lwU/S4mlo4wGQddIcf/V//1f9TB0V4j59b57b+HZxt8h3iMROGvg==}
     dev: true
 
-  /minisearch@6.2.0:
-    resolution: {integrity: sha512-BECkorDF1TY2rGKt9XHdSeP9TP29yUbrAaCh/C03wpyf1vx3uYcP/+8XlMcpTkgoU0rBVnHMAOaP83Rc9Tm+TQ==}
+  /minisearch@6.3.0:
+    resolution: {integrity: sha512-ihFnidEeU8iXzcVHy74dhkxh/dn8Dc08ERl0xwoMMGqp4+LvRSCgicb+zGqWthVokQKvCSxITlh3P08OzdTYCQ==}
     dev: true
 
   /mkdirp@0.5.6:
@@ -13851,6 +13908,10 @@ packages:
       sisteransi: 1.0.5
     dev: true
 
+  /property-information@6.4.0:
+    resolution: {integrity: sha512-9t5qARVofg2xQqKtytzt+lZ4d1Qvj8t5B8fEwXK6qOfgRLgH/b13QlgEyDh033NOS31nXeFbYv7CLUDG1CeifQ==}
+    dev: true
+
   /proxy-addr@2.0.7:
     resolution: {integrity: sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==}
     engines: {node: '>= 0.10'}
@@ -14679,13 +14740,16 @@ packages:
       vscode-textmate: 8.0.0
     dev: true
 
-  /shiki@0.14.5:
-    resolution: {integrity: sha512-1gCAYOcmCFONmErGTrS1fjzJLA7MGZmKzrBNX7apqSwhyITJg2O102uFzXUeBxNnEkDA9vHIKLyeKq0V083vIw==}
+  /shikiji-transformers@0.7.4:
+    resolution: {integrity: sha512-oykilNekcW2FnRGbvZm+RNWHYroSeCVMOaMMwAbxozZgpTdcJtHoA+1+MDFw6/o2hCkX88kKbxG6FwAZoUZ6WQ==}
     dependencies:
-      ansi-sequence-parser: 1.1.1
-      jsonc-parser: 3.2.0
-      vscode-oniguruma: 1.7.0
-      vscode-textmate: 8.0.0
+      shikiji: 0.7.4
+    dev: true
+
+  /shikiji@0.7.4:
+    resolution: {integrity: sha512-N5dmPvyhH/zfcsuWysUEAMwRJDMz26LUns2VEUs5y4Ozbf5jkAODU0Yswjcf/tZAwpFnk5x3y34dupFMnF2+NA==}
+    dependencies:
+      hast-util-to-html: 9.0.0
     dev: true
 
   /side-channel@1.0.4:
@@ -14834,6 +14898,10 @@ packages:
     deprecated: Please use @jridgewell/sourcemap-codec instead
     dev: true
 
+  /space-separated-tokens@2.0.2:
+    resolution: {integrity: sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==}
+    dev: true
+
   /spawn-command@0.0.2-1:
     resolution: {integrity: sha512-n98l9E2RMSJ9ON1AKisHzz7V42VDiBQGY6PB1BwRglz99wpVsSuGzQ+jOi6lFXBGVTCrRpltvjm+/XA+tpeJrg==}
     dev: true
@@ -15072,6 +15140,13 @@ packages:
     dependencies:
       safe-buffer: 5.2.1
 
+  /stringify-entities@4.0.3:
+    resolution: {integrity: sha512-BP9nNHMhhfcMbiuQKCqMjhDP5yBCAxsPu4pHFFzJ6Alo9dZgY4VLDPutXqIjpRiMoKdp7Av85Gr73Q5uH9k7+g==}
+    dependencies:
+      character-entities-html4: 2.1.0
+      character-entities-legacy: 3.0.0
+    dev: true
+
   /stringify-object@3.3.0:
     resolution: {integrity: sha512-rHqiFh1elqCQ9WPLIC8I0Q/g/wj5J1eMkyoiD6eoQApWHP0FtlK7rqnhmabL5VUY9JQCcqwwvlOaSuutekgyrw==}
     engines: {node: '>=4'}
@@ -15484,6 +15559,10 @@ packages:
     hasBin: true
     dev: true
 
+  /trim-lines@3.0.1:
+    resolution: {integrity: sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==}
+    dev: true
+
   /trim-newlines@3.0.1:
     resolution: {integrity: sha512-c1PTsA3tYrIsLGkJkzHF+w9F2EyxfXGo4UyJc4pFL++FMjnq0HJS69T3M7d//gKrFKwy429bouPescbjecU+Zw==}
     engines: {node: '>=8'}
@@ -15774,6 +15853,7 @@ packages:
     resolution: {integrity: sha512-cW9T5W9xY37cc+jfEnaUvX91foxtHkza3Nw3wkoF4sSlKn0MONdkdEndig/qPBWXNkmplh3NzayQzCiHM4/hqw==}
     engines: {node: '>=12.20'}
     hasBin: true
+    dev: true
 
   /typescript@5.1.6:
     resolution: {integrity: sha512-zaWCozRZ6DLEWAWFrVDz1H6FVXzUSfTy5FUMWsQlU8Ym5JP9eO4xkTIROFCQvhQf61z6O/G6ugw3SgAnvvm+HA==}
@@ -15878,6 +15958,18 @@ packages:
       '@types/unist': 2.0.7
     dev: true
 
+  /unist-util-is@6.0.0:
+    resolution: {integrity: sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw==}
+    dependencies:
+      '@types/unist': 3.0.2
+    dev: true
+
+  /unist-util-position@5.0.0:
+    resolution: {integrity: sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==}
+    dependencies:
+      '@types/unist': 3.0.2
+    dev: true
+
   /unist-util-stringify-position@2.0.3:
     resolution: {integrity: sha512-3faScn5I+hy9VleOq/qNbAd6pAx7iH5jYBMS9I1HgQVijz/4mv5Bvw5iw1sC/90CODiKo81G/ps8AJrISn687g==}
     dependencies:
@@ -15889,6 +15981,12 @@ packages:
     dependencies:
       '@types/unist': 2.0.7
 
+  /unist-util-stringify-position@4.0.0:
+    resolution: {integrity: sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==}
+    dependencies:
+      '@types/unist': 3.0.2
+    dev: true
+
   /unist-util-visit-parents@5.1.3:
     resolution: {integrity: sha512-x6+y8g7wWMyQhL1iZfhIPhDAs7Xwbn9nRosDXl7qoPTSCy0yNxnKc+hWokFifWQIDGi154rdUqKvbCa4+1kLhg==}
     dependencies:
@@ -15896,6 +15994,13 @@ packages:
       unist-util-is: 5.2.1
     dev: true
 
+  /unist-util-visit-parents@6.0.1:
+    resolution: {integrity: sha512-L/PqWzfTP9lzzEa6CKs0k2nARxTdZduw3zyh8d2NVBnsyvHjSX4TWse388YrrQKbvI8w20fGjGlhgT96WwKykw==}
+    dependencies:
+      '@types/unist': 3.0.2
+      unist-util-is: 6.0.0
+    dev: true
+
   /unist-util-visit@4.1.2:
     resolution: {integrity: sha512-MSd8OUGISqHdVvfY9TPhyK2VdUrPgxkUtWSuMHF6XAAFuL4LokseigBnZtPnJMu+FbynTkFNnFlyjxpVKujMRg==}
     dependencies:
@@ -15904,6 +16009,14 @@ packages:
       unist-util-visit-parents: 5.1.3
     dev: true
 
+  /unist-util-visit@5.0.0:
+    resolution: {integrity: sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==}
+    dependencies:
+      '@types/unist': 3.0.2
+      unist-util-is: 6.0.0
+      unist-util-visit-parents: 6.0.1
+    dev: true
+
   /universalify@0.1.2:
     resolution: {integrity: sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==}
     engines: {node: '>= 4.0.0'}
@@ -15958,45 +16071,6 @@ packages:
       - supports-color
     dev: true
 
-  /unocss@0.57.1(postcss@8.4.31)(rollup@2.79.1)(vite@4.5.0):
-    resolution: {integrity: sha512-xLsyJ8+T1/Ux93yrqOvuQy268wF5rSzydlsbqZ5EVfi01PxYyydez3nycPqbyPZientkJ0Yohzd5aBqmZgku3A==}
-    engines: {node: '>=14'}
-    peerDependencies:
-      '@unocss/webpack': 0.57.1
-      vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0
-    peerDependenciesMeta:
-      '@unocss/webpack':
-        optional: true
-      vite:
-        optional: true
-    dependencies:
-      '@unocss/astro': 0.57.1(rollup@2.79.1)(vite@4.5.0)
-      '@unocss/cli': 0.57.1(rollup@2.79.1)
-      '@unocss/core': 0.57.1
-      '@unocss/extractor-arbitrary-variants': 0.57.1
-      '@unocss/postcss': 0.57.1(postcss@8.4.31)
-      '@unocss/preset-attributify': 0.57.1
-      '@unocss/preset-icons': 0.57.1
-      '@unocss/preset-mini': 0.57.1
-      '@unocss/preset-tagify': 0.57.1
-      '@unocss/preset-typography': 0.57.1
-      '@unocss/preset-uno': 0.57.1
-      '@unocss/preset-web-fonts': 0.57.1
-      '@unocss/preset-wind': 0.57.1
-      '@unocss/reset': 0.57.1
-      '@unocss/transformer-attributify-jsx': 0.57.1
-      '@unocss/transformer-attributify-jsx-babel': 0.57.1
-      '@unocss/transformer-compile-class': 0.57.1
-      '@unocss/transformer-directives': 0.57.1
-      '@unocss/transformer-variant-group': 0.57.1
-      '@unocss/vite': 0.57.1(rollup@2.79.1)(vite@4.5.0)
-      vite: 4.5.0(@types/node@18.17.5)
-    transitivePeerDependencies:
-      - postcss
-      - rollup
-      - supports-color
-    dev: true
-
   /unpipe@1.0.0:
     resolution: {integrity: sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==}
     engines: {node: '>= 0.8'}
@@ -16031,35 +16105,6 @@ packages:
       - supports-color
     dev: true
 
-  /unplugin-vue-components@0.25.0(rollup@2.79.1)(vue@3.3.8):
-    resolution: {integrity: sha512-HxrQ4GMSS1RwVww2av3a42cABo/v5AmTRN9iARv6e/xwkrfTyHhLh84kFwXxKkXK61vxDHxaryn694mQmkiVBg==}
-    engines: {node: '>=14'}
-    peerDependencies:
-      '@babel/parser': ^7.15.8
-      '@nuxt/kit': ^3.2.2
-      vue: 2 || 3
-    peerDependenciesMeta:
-      '@babel/parser':
-        optional: true
-      '@nuxt/kit':
-        optional: true
-    dependencies:
-      '@antfu/utils': 0.7.6
-      '@rollup/pluginutils': 5.0.5(rollup@2.79.1)
-      chokidar: 3.5.3
-      debug: 4.3.4(supports-color@8.1.1)
-      fast-glob: 3.3.2
-      local-pkg: 0.4.3
-      magic-string: 0.30.5
-      minimatch: 9.0.3
-      resolve: 1.22.4
-      unplugin: 1.4.0
-      vue: 3.3.8(typescript@5.1.6)
-    transitivePeerDependencies:
-      - rollup
-      - supports-color
-    dev: true
-
   /unplugin@1.4.0:
     resolution: {integrity: sha512-5x4eIEL6WgbzqGtF9UV8VEC/ehKptPXDS6L2b0mv4FRMkJxRtjaJfOWDd6a8+kYbqsjklix7yWP0N3SUepjXcg==}
     dependencies:
@@ -16164,6 +16209,13 @@ packages:
       extsprintf: 1.3.0
     dev: true
 
+  /vfile-location@5.0.2:
+    resolution: {integrity: sha512-NXPYyxyBSH7zB5U6+3uDdd6Nybz6o6/od9rk8bp9H8GR3L+cm/fC0uUTbqBmUTnMCUDslAGBOIKNfvvb+gGlDg==}
+    dependencies:
+      '@types/unist': 3.0.2
+      vfile: 6.0.1
+    dev: true
+
   /vfile-message@3.1.4:
     resolution: {integrity: sha512-fa0Z6P8HUrQN4BZaX05SIVXic+7kE3b05PWAtPuYP9QLHsLKYR7/AlLW3NtOrpXRLeawpDLMsVkmk5DG0NXgWw==}
     dependencies:
@@ -16171,6 +16223,13 @@ packages:
       unist-util-stringify-position: 3.0.3
     dev: true
 
+  /vfile-message@4.0.2:
+    resolution: {integrity: sha512-jRDZ1IMLttGj41KcZvlrYAaI3CfqpLpfpf+Mfig13viT6NKvRzWZ+lXz0Y5D60w6uJIBAOGq9mSHf0gktF0duw==}
+    dependencies:
+      '@types/unist': 3.0.2
+      unist-util-stringify-position: 4.0.0
+    dev: true
+
   /vfile@5.3.7:
     resolution: {integrity: sha512-r7qlzkgErKjobAmyNIkkSpizsFPYiUPuJb5pNW1RB4JcYVZhs4lIbVqk8XPk033CV/1z8ss5pkax8SuhGpcG8g==}
     dependencies:
@@ -16180,6 +16239,14 @@ packages:
       vfile-message: 3.1.4
     dev: true
 
+  /vfile@6.0.1:
+    resolution: {integrity: sha512-1bYqc7pt6NIADBJ98UiG0Bn/CHIVOoZ/IyEkqIruLg0mE1BKzkOXY2D6CSqQIcKqgadppE5lrxgWXJmXd7zZJw==}
+    dependencies:
+      '@types/unist': 3.0.2
+      unist-util-stringify-position: 4.0.0
+      vfile-message: 4.0.2
+    dev: true
+
   /vite-node@0.34.0(@types/node@18.17.5):
     resolution: {integrity: sha512-rGZMvpb052rjUwJA/a17xMfOibzNF7byMdRSTcN2Lw8uxX08s5EfjWW5mBkm3MSFTPctMSVtT2yC+8ShrZbT5g==}
     engines: {node: '>=v14.18.0'}
@@ -16216,24 +16283,6 @@ packages:
       - supports-color
     dev: true
 
-  /vite-plugin-pwa@0.16.7(vite@4.5.0)(workbox-build@7.0.0)(workbox-window@7.0.0):
-    resolution: {integrity: sha512-4WMA5unuKlHs+koNoykeuCfTcqEGbiTRr8sVYUQMhc6tWxZpSRnv9Ojk4LKmqVhoPGHfBVCdGaMo8t9Qidkc1Q==}
-    engines: {node: '>=16.0.0'}
-    peerDependencies:
-      vite: ^3.1.0 || ^4.0.0 || ^5.0.0-0
-      workbox-build: ^7.0.0
-      workbox-window: ^7.0.0
-    dependencies:
-      debug: 4.3.4(supports-color@8.1.1)
-      fast-glob: 3.3.2
-      pretty-bytes: 6.1.1
-      vite: 4.5.0(@types/node@18.17.5)
-      workbox-build: 7.0.0
-      workbox-window: 7.0.0
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
   /vite-plugin-pwa@0.17.0(vite@4.4.9)(workbox-build@7.0.0)(workbox-window@7.0.0):
     resolution: {integrity: sha512-cOyEG8EEc7JHmyMapTnjK2j0g2BIC3ErlmOHyGzVu8hqjyF9Jt6yWMmVNFtpA6v/NNyzP28ARf3vwzIAzR1kaw==}
     engines: {node: '>=16.0.0'}
@@ -16324,8 +16373,8 @@ packages:
       fsevents: 2.3.3
     dev: true
 
-  /vite@5.0.0(@types/node@18.17.5):
-    resolution: {integrity: sha512-ESJVM59mdyGpsiNAeHQOR/0fqNoOyWPYesFto8FFZugfmhdHx8Fzd8sF3Q/xkVhZsyOxHfdM7ieiVAorI9RjFw==}
+  /vite@5.0.2(@types/node@18.17.5):
+    resolution: {integrity: sha512-6CCq1CAJCNM1ya2ZZA7+jS2KgnhbzvxakmlIjN24cF/PXhRMzpM/z8QgsVJA/Dm5fWUWnVEsmtBoMhmerPxT0g==}
     engines: {node: ^18.0.0 || >=20.0.0}
     hasBin: true
     peerDependencies:
@@ -16408,62 +16457,8 @@ packages:
       - terser
     dev: true
 
-  /vitepress@1.0.0-rc.25(@algolia/client-search@4.19.1)(@types/node@18.17.5)(postcss@8.4.31)(search-insights@2.7.0)(typescript@5.1.6):
-    resolution: {integrity: sha512-1dqWiHNThNrVZ08ixmfEDBEH+764KOgnev9oXga/x6cN++Vb9pnuu8p3K6DQP+KZrYcG+WiX7jxal0iSNpAWuQ==}
-    hasBin: true
-    peerDependencies:
-      markdown-it-mathjax3: ^4.3.2
-      postcss: ^8.4.31
-    peerDependenciesMeta:
-      markdown-it-mathjax3:
-        optional: true
-      postcss:
-        optional: true
-    dependencies:
-      '@docsearch/css': 3.5.2
-      '@docsearch/js': 3.5.2(@algolia/client-search@4.19.1)(search-insights@2.7.0)
-      '@types/markdown-it': 13.0.6
-      '@vitejs/plugin-vue': 4.3.1(vite@4.5.0)(vue@3.3.8)
-      '@vue/devtools-api': 6.5.1
-      '@vueuse/core': 10.6.1(vue@3.3.8)
-      '@vueuse/integrations': 10.6.1(focus-trap@7.5.4)(vue@3.3.8)
-      focus-trap: 7.5.4
-      mark.js: 8.11.1
-      minisearch: 6.2.0
-      postcss: 8.4.31
-      shiki: 0.14.5
-      vite: 4.5.0(@types/node@18.17.5)
-      vue: 3.3.8(typescript@5.1.6)
-    transitivePeerDependencies:
-      - '@algolia/client-search'
-      - '@types/node'
-      - '@types/react'
-      - '@vue/composition-api'
-      - async-validator
-      - axios
-      - change-case
-      - drauu
-      - fuse.js
-      - idb-keyval
-      - jwt-decode
-      - less
-      - lightningcss
-      - nprogress
-      - qrcode
-      - react
-      - react-dom
-      - sass
-      - search-insights
-      - sortablejs
-      - stylus
-      - sugarss
-      - terser
-      - typescript
-      - universal-cookie
-    dev: true
-
-  /vitepress@1.0.0-rc.29(@algolia/client-search@4.19.1)(@types/node@18.17.5)(postcss@8.4.31)(search-insights@2.7.0)(typescript@5.1.6):
-    resolution: {integrity: sha512-6sKmyEvH16SgMqkHzRwwadt9Uju13AOIqouzOVEg3Rk6X9mds6jLsq2GxnAJvg0s6bl/0Qs/cw+f8SNki82ltw==}
+  /vitepress@1.0.0-rc.31(@algolia/client-search@4.19.1)(@types/node@18.17.5)(postcss@8.4.31)(search-insights@2.7.0)(typescript@5.1.6):
+    resolution: {integrity: sha512-ikH9pIjOOAbyoYAGBVfTz8TzuXp+UoWaIRMU4bw/oiTg8R65SbAaGKY84xx6TuL+f4VqUJ8lhzW82YyxSLvstA==}
     hasBin: true
     peerDependencies:
       markdown-it-mathjax3: ^4.3.2
@@ -16476,18 +16471,19 @@ packages:
     dependencies:
       '@docsearch/css': 3.5.2
       '@docsearch/js': 3.5.2(@algolia/client-search@4.19.1)(search-insights@2.7.0)
-      '@types/markdown-it': 13.0.6
-      '@vitejs/plugin-vue': 4.5.0(vite@5.0.0)(vue@3.3.8)
+      '@types/markdown-it': 13.0.7
+      '@vitejs/plugin-vue': 4.5.0(vite@5.0.2)(vue@3.3.8)
       '@vue/devtools-api': 6.5.1
       '@vueuse/core': 10.6.1(vue@3.3.8)
       '@vueuse/integrations': 10.6.1(focus-trap@7.5.4)(vue@3.3.8)
       focus-trap: 7.5.4
       mark.js: 8.11.1
-      minisearch: 6.2.0
+      minisearch: 6.3.0
       mrmime: 1.0.1
       postcss: 8.4.31
-      shiki: 0.14.5
-      vite: 5.0.0(@types/node@18.17.5)
+      shikiji: 0.7.4
+      shikiji-transformers: 0.7.4
+      vite: 5.0.2(@types/node@18.17.5)
       vue: 3.3.8(typescript@5.1.6)
     transitivePeerDependencies:
       - '@algolia/client-search'
@@ -16661,6 +16657,7 @@ packages:
         optional: true
     dependencies:
       vue: 3.3.8(typescript@5.1.6)
+    dev: true
 
   /vue@3.3.4:
     resolution: {integrity: sha512-VTyEYn3yvIeY1Py0WaYGZsXnz3y5UnGi62GjVEqvEGPl6nxbOrCXbVOTQWBEJUqAyTUk2uJ5JLVnYJ6ZzGbrSw==}
@@ -16685,6 +16682,7 @@ packages:
       '@vue/server-renderer': 3.3.8(vue@3.3.8)
       '@vue/shared': 3.3.8
       typescript: 5.0.4
+    dev: true
 
   /vue@3.3.8(typescript@5.1.6):
     resolution: {integrity: sha512-5VSX/3DabBikOXMsxzlW8JyfeLKlG9mzqnWgLQLty88vdZL7ZJgrdgBOmrArwxiLtmS+lNNpPcBYqrhE6TQW5w==}
@@ -16700,6 +16698,7 @@ packages:
       '@vue/server-renderer': 3.3.8(vue@3.3.8)
       '@vue/shared': 3.3.8
       typescript: 5.1.6
+    dev: true
 
   /vuex@4.1.0(vue@3.3.4):
     resolution: {integrity: sha512-hmV6UerDrPcgbSy9ORAtNXDr9M4wlNP4pEFKye4ujJF8oqgFFuxDCdOLS3eNoRTtq5O3hoBDh9Doj1bQMYHRbQ==}
@@ -16765,6 +16764,10 @@ packages:
       minimalistic-assert: 1.0.1
     dev: true
 
+  /web-namespaces@2.0.1:
+    resolution: {integrity: sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ==}
+    dev: true
+
   /web-streams-polyfill@3.2.1:
     resolution: {integrity: sha512-e0MO3wdXWKrLbL0DgGnUV7WHVuw9OUvL4hjgnPkIeEvESk74gAITi5G606JtZPp39cd8HA9VQzCIvA49LpPN5Q==}
     engines: {node: '>= 8'}

From 952f2fb92c8cf209ec4cf18e668ce2165d7bb367 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Mon, 27 Nov 2023 06:26:12 +0000
Subject: [PATCH 265/457] chore(deps): update all minor dependencies

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 1b8a120f5d..0e5d00e981 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
   "version": "10.2.4",
   "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
   "type": "module",
-  "packageManager": "pnpm@8.10.5",
+  "packageManager": "pnpm@8.11.0",
   "keywords": [
     "diagram",
     "markdown",

From 1d5378a4f29cc9b109ad742bf79c39002b66261f Mon Sep 17 00:00:00 2001
From: Aakansha Doshi 
Date: Mon, 27 Nov 2023 13:19:31 +0530
Subject: [PATCH 266/457] fix: clean comments in text in getDiagramFromText API
 so flowchart works well

---
 demos/flowchart.html            | 6 +++++-
 packages/mermaid/src/Diagram.ts | 6 +++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/demos/flowchart.html b/demos/flowchart.html
index d7032a663c..e6fdb6d2b7 100644
--- a/demos/flowchart.html
+++ b/demos/flowchart.html
@@ -1539,7 +1539,11 @@ 
    flowchart
    
       class I bugged_node
     
    
     
    
-
+    
    +      flowchart LR
+  %% this is a comment A -- text --> B{node}
+  A -- text --> B -- text2 --> C
+    
    
     
    Anchor for "link-clicked" test
    
 
     
+```
+
 ## Graph declarations with spaces between vertices and link and without semicolon
 
 - In graph declarations, the statements also can now end without a semicolon. After release 0.2.16, ending a graph statement with semicolon is just optional. So the below graph declaration is also valid along with the old declarations of the graph.
diff --git a/packages/mermaid/src/docs/syntax/flowchart.md b/packages/mermaid/src/docs/syntax/flowchart.md
index e4be8d81a2..6c6b0760b3 100644
--- a/packages/mermaid/src/docs/syntax/flowchart.md
+++ b/packages/mermaid/src/docs/syntax/flowchart.md
@@ -778,6 +778,18 @@ flowchart TD
 
 Mermaid is compatible with Font Awesome up to version 5, Free icons only. Check that the icons you use are from the [supported set of icons](https://fontawesome.com/v5/search?o=r&m=free).
 
+You can use this method to add mermaid including the fontawesome icon to a web page:
+
+```html
+
+
+```
+
 ## Graph declarations with spaces between vertices and link and without semicolon
 
 - In graph declarations, the statements also can now end without a semicolon. After release 0.2.16, ending a graph statement with semicolon is just optional. So the below graph declaration is also valid along with the old declarations of the graph.

From be8faae68c043481fd834b59d1c359cdf0965e41 Mon Sep 17 00:00:00 2001
From: arukiidou 
Date: Fri, 19 Jan 2024 08:49:12 +0900
Subject: [PATCH 414/457] Update packages/mermaid/src/docs/syntax/flowchart.md

Co-authored-by: Sidharth Vinod 
---
 packages/mermaid/src/docs/syntax/flowchart.md | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/packages/mermaid/src/docs/syntax/flowchart.md b/packages/mermaid/src/docs/syntax/flowchart.md
index 6c6b0760b3..00242b4072 100644
--- a/packages/mermaid/src/docs/syntax/flowchart.md
+++ b/packages/mermaid/src/docs/syntax/flowchart.md
@@ -776,18 +776,17 @@ flowchart TD
     B-->E(A fa:fa-camera-retro perhaps?)
 ```
 
-Mermaid is compatible with Font Awesome up to version 5, Free icons only. Check that the icons you use are from the [supported set of icons](https://fontawesome.com/v5/search?o=r&m=free).
+Mermaid supports Font Awesome if the CSS is included on the website. 
+Mermaid does not have any restriction on the version of Font Awesome that can be used. 
 
-You can use this method to add mermaid including the fontawesome icon to a web page:
+Please refer the [Official Font Awesome Documentation](https://fontawesome.com/start) on how to include it in your website.
 
+Adding this snippet in the `` would add support for Font Awesome v6.5.1
 ```html
 
-
 ```
 
 ## Graph declarations with spaces between vertices and link and without semicolon

From 7918f96f9400232db1f8c02d47b33f2f5abb572e Mon Sep 17 00:00:00 2001
From: Sidharth Vinod 
Date: Fri, 19 Jan 2024 09:19:36 +0530
Subject: [PATCH 415/457] Update docs

---
 docs/syntax/flowchart.md | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/docs/syntax/flowchart.md b/docs/syntax/flowchart.md
index 4fa0f6c4f2..2f4a9aeb9e 100644
--- a/docs/syntax/flowchart.md
+++ b/docs/syntax/flowchart.md
@@ -1134,18 +1134,18 @@ flowchart TD
     B-->E(A fa:fa-camera-retro perhaps?)
 ```
 
-Mermaid is compatible with Font Awesome up to version 5, Free icons only. Check that the icons you use are from the [supported set of icons](https://fontawesome.com/v5/search?o=r&m=free).
+Mermaid supports Font Awesome if the CSS is included on the website.
+Mermaid does not have any restriction on the version of Font Awesome that can be used.
 
-You can use this method to add mermaid including the fontawesome icon to a web page:
+Please refer the [Official Font Awesome Documentation](https://fontawesome.com/start) on how to include it in your website.
+
+Adding this snippet in the `` would add support for Font Awesome v6.5.1
 
 ```html
 
-
 ```
 
 ## Graph declarations with spaces between vertices and link and without semicolon

From e0ee9b1bc0470e08a32d0db03ece4dba839b8c07 Mon Sep 17 00:00:00 2001
From: "Soren L. Hansen" 
Date: Sat, 13 Jan 2024 14:17:12 +0100
Subject: [PATCH 416/457] Add more detailed docs for Gantt tasks

---
 docs/syntax/gantt.html                    | 179939 +++++++++++++++++++
 docs/syntax/gantt.md                      |     25 +-
 packages/mermaid/src/docs/syntax/gantt.md |     25 +-
 3 files changed, 179987 insertions(+), 2 deletions(-)
 create mode 100644 docs/syntax/gantt.html

diff --git a/docs/syntax/gantt.html b/docs/syntax/gantt.html
new file mode 100644
index 0000000000..4a3156ac77
--- /dev/null
+++ b/docs/syntax/gantt.html
@@ -0,0 +1,179939 @@
+
+
+  
+    
+    Gantt diagrams
+    
+    
+    
+    
+    
+    
+    
+  
+  
+    
    
+      
    
+        
+        
    Gantt diagrams
    
+        
    
+          
    
+            A Gantt chart is a type of bar chart, first developed by Karol Adamiecki in 1896, and
+            independently by Henry Gantt in the 1910s, that illustrates a project schedule and the
+            amount of time it would take for any one project to finish. Gantt charts illustrate
+            number of days between the start and finish dates of the terminal elements and summary
+            elements of a project.
+          
    
+        
    
+        
    A note to users
    
+        
    
+          Gantt Charts will record each scheduled task as one continuous bar that extends from the
+          left to the right. The x axis represents time and the y records the different tasks and
+          the order in which they are to be completed.
+        
    
+        
    
+          It is important to remember that when a date, day, or collection of dates specific to a
+          task are "excluded", the Gantt Chart will accommodate those changes by extending an equal
+          number of days, towards the right, not by creating a gap inside the task. As shown here
+          
+        
    
+        
    
+          However, if the excluded dates are between two tasks that are set to start consecutively,
+          the excluded dates will be skipped graphically and left blank, and the following task will
+          begin after the end of the excluded dates. As shown here
+          
+        
    
+        
    
+          A Gantt chart is useful for tracking the amount of time it would take before a project is
+          finished, but it can also be used to graphically represent "non-working days", with a few
+          tweaks.
+        
    
+        
    
+          Mermaid can render Gantt diagrams as SVG, PNG or a MarkDown link that can be pasted into
+          docs.
+        
    
+        
    gantt
+    title A Gantt Diagram
+    dateFormat YYYY-MM-DD
+    section Section
+        A task          :a1, 2014-01-01, 30d
+        Another task    :after a1, 20d
+    section Another
+        Task in Another :2014-01-12, 12d
+        another task    :24d
    
+        
    Syntax
    
+        
    gantt
+    dateFormat  YYYY-MM-DD
+    title       Adding GANTT diagram functionality to mermaid
+    excludes    weekends
+    %% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".)
+
+    section A section
+    Completed task            :done,    des1, 2014-01-06,2014-01-08
+    Active task               :active,  des2, 2014-01-09, 3d
+    Future task               :         des3, after des2, 5d
+    Future task2              :         des4, after des3, 5d
+
+    section Critical tasks
+    Completed task in the critical line :crit, done, 2014-01-06,24h
+    Implement parser and jison          :crit, done, after des1, 2d
+    Create tests for parser             :crit, active, 3d
+    Future task in critical line        :crit, 5d
+    Create tests for renderer           :2d
+    Add to mermaid                      :1d
+    Functionality added                 :milestone, 2014-01-25, 0d
+
+    section Documentation
+    Describe gantt syntax               :active, a1, after des1, 3d
+    Add gantt diagram to demo page      :after a1  , 20h
+    Add another diagram to demo page    :doc1, after a1  , 48h
+
+    section Last section
+    Describe gantt syntax               :after doc1, 3d
+    Add gantt diagram to demo page      :20h
+    Add another diagram to demo page    :48h
    
+        
    
+          Tasks are by default sequential. A task start date defaults to the end date of the
+          preceding task.
+        
    
+        
    
+          A colon, :, separates the task title from its metadata. Metadata items are
+          separated by a comma, ,. Valid tags are active,
+          done, crit, and milestone. Tags are optional, but
+          if used, they must be specified first. After processing the tags, the remaining metadata
+          items are interpreted as follows:
+        
    
+        
      
+          
    1. 
+            If a single item is specified, it determines when the task ends. It can either be a
+            specific date/time or a duration. If a duration is specified, it is added to the start
+            date of the task to determine the end date of the task, taking into account any
+            exclusions.
+          
      2. 
+          
    2. 
+            If two items are specified, the last item is interpreted as in the previous case. The
+            first item can either specify an explicit start date/time (in the format specified by
+            dateFormat) or reference another task using
+            after <otherTaskID> [[otherTaskID2 [otherTaskID3]]...]. In the latter
+            case, the start date of the task will be set according to the latest end date of any
+            referenced task.
+          
      3. 
+          
    3. 
+            If three items are specified, the last two will be interpreted as in the previous case.
+            The first item will denote the ID of the task, which can be referenced using the
+            later <taskID> syntax.
+          
      4. 
+        
    
+        
+          
+            
+              
+              
+              
+              
+            
+          
+          
+            
+              
+              
+              
+              
+            
+            
+              
+              
+              
+              
+            
+            
+              
+              
+              
+              
+            
+            
+              
+              
+              
+              
+            
+            
+              
+              
+              
+              
+            
+            
+              
+              
+              
+              
+            
+            
+              
+              
+              
+              
+            
+            
+              
+              
+              
+              
+            
+            
+              
+              
+              
+              
+            
+            
+              
+              
+              
+              
+            
+          
+        
    Metadata syntaxStart dateEnd dateID
    <taskID>, <startDate>, <endDate>startdate as interpreted using dateformatendDate as interpreted using dateformattaskID
    <taskID>, <startDate>, <length>startdate as interpreted using dateformatStart date + lengthtaskID
    <taskID>, after <otherTaskId>, <endDate>End date of previously specified task otherTaskIDendDate as interpreted using dateformattaskID
    <taskID>, after <otherTaskId>, <length>End date of previously specified task otherTaskIDStart date + lengthtaskID
    <startDate>, <endDate>startdate as interpreted using dateformatenddate as interpreted using dateformatn/a
    <startDate>, <length>startdate as interpreted using dateformatStart date + lengthn/a
    after <otherTaskID>, <endDate>End date of previously specified task otherTaskIDenddate as interpreted using dateformatn/a
    after <otherTaskID>, <length>End date of previously specified task otherTaskIDStart date + lengthn/a
    <endDate>End date of preceding taskenddate as interpreted using dateformatn/a
    <length>End date of preceding taskStart date + lengthn/a
    
+        
    
+          For simplicity, the table does not show the use of multiple tasks listed with the
+          after keyword. Here is an example of how to use it and how it's interpreted:
+        
    
+        
    gantt
+    apple :a, 2017-07-20, 1w
+    banana :crit, b, 2017-07-23, 1d
+    cherry :active, c, after b a, 1d
    
+        
    Title
    
+        
    
+          The title is an optional string to be displayed at the top of the
+          Gantt chart to describe the chart as a whole.
+        
    
+        
    Section statements
    
+        
    
+          You can divide the chart into various sections, for example to separate different parts of
+          a project like development and documentation.
+        
    
+        
    
+          To do so, start a line with the section keyword and give it a name. (Note
+          that unlike with the title for the entire chart, this name is
+          required.
+        
    
+        
    Milestones
    
+        
    
+          You can add milestones to the diagrams. Milestones differ from tasks as they represent a
+          single instant in time and are identified by the keyword milestone. Below is
+          an example on how to use milestones. As you may notice, the exact location of the
+          milestone is determined by the initial date for the milestone and the "duration" of the
+          task this way: initial date+duration/2.
+        
    
+        
    gantt
+    dateFormat HH:mm
+    axisFormat %H:%M
+    Initial milestone : milestone, m1, 17:49, 2m
+    Task A : 10m
+    Task B : 5m
+    Final milestone : milestone, m2, 18:08, 4m
    
+        
    Setting dates
    
+        
    
+          dateFormat defines the format of the date input of your
+          gantt elements. How these dates are represented in the rendered chart
+          output are defined by axisFormat.
+        
    
+        
    Input date format
    
+        
    
+          The default input date format is YYYY-MM-DD. You can define your custom
+          dateFormat.
+        
    
+        
    dateFormat YYYY-MM-DD
+
    
+        
    The following formatting options are supported:
    
+        
+          
+            
+              
+              
+              
+            
+          
+          
+            
+              
+              
+              
+            
+            
+              
+              
+              
+            
+            
+              
+              
+              
+            
+            
+              
+              
+              
+            
+            
+              
+              
+              
+            
+            
+              
+              
+              
+            
+            
+              
+              
+              
+            
+            
+              
+              
+              
+            
+            
+              
+              
+              
+            
+            
+              
+              
+              
+            
+            
+              
+              
+              
+            
+            
+              
+              
+              
+            
+            
+              
+              
+              
+            
+            
+              
+              
+              
+            
+            
+              
+              
+              
+            
+            
+              
+              
+              
+            
+            
+              
+              
+              
+            
+            
+              
+              
+              
+            
+            
+              
+              
+              
+            
+          
+        
    InputExampleDescription
    YYYY20144 digit year
    YY142 digit year
    Q1..4Quarter of year. Sets month to first month in quarter.
    M MM1..12Month number
    MMM MMMMJanuary..DecMonth name in locale set by dayjs.locale()
    D DD1..31Day of month
    Do1st..31stDay of month with ordinal
    DDD DDDD1..365Day of year
    X1410715640.579Unix timestamp
    x1410715640579Unix ms timestamp
    H HH0..2324 hour time
    h hh1..1212 hour time used with a A.
    a Aam pmPost or ante meridiem
    m mm0..59Minutes
    s ss0..59Seconds
    S0..9Tenths of a second
    SS0..99Hundreds of a second
    SSS0..999Thousandths of a second
    Z ZZ+12:00Offset from UTC as +-HH:mm, +-HHmm, or Z
    
+        
    
+          More info in:
+          https://day.js.org/docs/en/parse/string-format/
+        
    
+        
    Output date format on the axis
    
+        
    
+          The default output date format is YYYY-MM-DD. You can define your custom
+          axisFormat, like 2020-Q1 for the first quarter of the year 2020.
+        
    
+        
    axisFormat %Y-%m-%d
+
    
+        
    The following formatting strings are supported:
    
+        
+          
+            
+              
+              
+            
+          
+          
+            
+              
+              
+            
+            
+              
+              
+            
+            
+              
+              
+            
+            
+              
+              
+            
+            
+              
+              
+            
+            
+              
+              
+            
+            
+              
+              
+            
+            
+              
+              
+            
+            
+              
+              
+            
+            
+              
+              
+            
+            
+              
+              
+            
+            
+              
+              
+            
+            
+              
+              
+            
+            
+              
+              
+            
+            
+              
+              
+            
+            
+              
+              
+            
+            
+              
+              
+            
+            
+              
+              
+            
+            
+              
+              
+            
+            
+              
+              
+            
+            
+              
+              
+            
+            
+              
+              
+            
+            
+              
+              
+            
+            
+              
+              
+            
+          
+        
    FormatDefinition
    %aabbreviated weekday name
    %Afull weekday name
    %babbreviated month name
    %Bfull month name
    %cdate and time, as "%a %b %e %H:%M:%S %Y"
    %dzero-padded day of the month as a decimal number [01,31]
    %espace-padded day of the month as a decimal number [ 1,31]; equivalent to %_d
    %Hhour (24-hour clock) as a decimal number [00,23]
    %Ihour (12-hour clock) as a decimal number [01,12]
    %jday of the year as a decimal number [001,366]
    %mmonth as a decimal number [01,12]
    %Mminute as a decimal number [00,59]
    %Lmilliseconds as a decimal number [000, 999]
    %peither AM or PM
    %Ssecond as a decimal number [00,61]
    %U
+                week number of the year (Sunday as the first day of the week) as a decimal number
+                [00,53]
+              
    %wweekday as a decimal number [0(Sunday),6]
    %W
+                week number of the year (Monday as the first day of the week) as a decimal number
+                [00,53]
+              
    %xdate, as "%m/%d/%Y"
    %Xtime, as "%H:%M:%S"
    %yyear without century as a decimal number [00,99]
    %Yyear with century as a decimal number
    %Ztime zone offset, such as "-0700"
    %%a literal "%" character
    
+        
    
+          More info in:
+          https://github.com/d3/d3-time-format/tree/v4.0.0#locale_format
+        
    
+        
    Axis ticks (v10.3.0+)
    
+        
    
+          The default output ticks are auto. You can custom your tickInterval, like
+          1day or 1week.
+        
    
+        
    tickInterval 1day
+
    
+        
    The pattern is:
    
+        
    /^([1-9][0-9]*)(millisecond|second|minute|hour|day|week|month)$/;
+
    
+        
    
+          More info in:
+          https://github.com/d3/d3-time#interval_every
+        
    
+        
    
+          Week-based tickIntervals start the week on sunday by default. If you wish to
+          specify another weekday on which the tickInterval should start, use the
+          weekday option:
+        
    
+        
    gantt
+  tickInterval 1week
+  weekday monday
    
+        
    `millisecond` and `second` support was added in vMERMAID_RELEASE_VERSION
+
    
+        
    Output in compact mode
    
+        
    
+          The compact mode allows you to display multiple tasks in the same row. Compact mode can be
+          enabled for a gantt chart by setting the display mode of the graph via preceeding YAML
+          settings.
+        
    
+        
    ---
+displayMode: compact
+---
+gantt
+    title A Gantt Diagram
+    dateFormat  YYYY-MM-DD
+
+    section Section
+    A task           :a1, 2014-01-01, 30d
+    Another task     :a2, 2014-01-20, 25d
+    Another one      :a3, 2014-02-10, 20d
    
+        
    Comments
    
+        
    
+          Comments can be entered within a gantt chart, which will be ignored by the parser.
+          Comments need to be on their own line and must be prefaced with %% (double
+          percent signs). Any text after the start of the comment to the next newline will be
+          treated as a comment, including any diagram syntax.
+        
    
+        
    gantt
+    title A Gantt Diagram
+    %% This is a comment
+    dateFormat YYYY-MM-DD
+    section Section
+        A task          :a1, 2014-01-01, 30d
+        Another task    :after a1, 20d
+    section Another
+        Task in Another :2014-01-12, 12d
+        another task    :24d
    
+        
    Styling
    
+        
    
+          Styling of the Gantt diagram is done by defining a number of CSS classes. During
+          rendering, these classes are extracted from the file located at
+          src/diagrams/gantt/styles.js
+        
    
+        
    Classes used
    
+        
+          
+            
+              
+              
+            
+          
+          
+            
+              
+              
+            
+            
+              
+              
+            
+            
+              
+              
+            
+            
+              
+              
+            
+            
+              
+              
+            
+            
+              
+              
+            
+          
+        
    ClassDescription
    grid.tickStyling for the Grid Lines
    grid.pathStyling for the Grid's borders
    .taskTextTask Text Styling
    .taskTextOutsideRightStyling for Task Text that exceeds the activity bar towards the right.
    .taskTextOutsideLeftStyling for Task Text that exceeds the activity bar, towards the left.
    todayMarkerToggle and Styling for the "Today Marker"
    
+        
    Sample stylesheet
    
+        
    .grid .tick {
+  stroke: lightgrey;
+  opacity: 0.3;
+  shape-rendering: crispEdges;
+}
+.grid path {
+  stroke-width: 0;
+}
+
+#tag {
+  color: white;
+  background: #fa283d;
+  width: 150px;
+  position: absolute;
+  display: none;
+  padding: 3px 6px;
+  margin-left: -80px;
+  font-size: 11px;
+}
+
+#tag:before {
+  border: solid transparent;
+  content: ' ';
+  height: 0;
+  left: 50%;
+  margin-left: -5px;
+  position: absolute;
+  width: 0;
+  border-width: 10px;
+  border-bottom-color: #fa283d;
+  top: -20px;
+}
+.taskText {
+  fill: white;
+  text-anchor: middle;
+}
+.taskTextOutsideRight {
+  fill: black;
+  text-anchor: start;
+}
+.taskTextOutsideLeft {
+  fill: black;
+  text-anchor: end;
+}
+
    
+        
    Today marker
    
+        
    
+          You can style or hide the marker for the current date. To style it, add a value for the
+          todayMarker key.
+        
    
+        
    todayMarker stroke-width:5px,stroke:#0f0,opacity:0.5
+
    
+        
    To hide the marker, set todayMarker to off.
    
+        
    todayMarker off
+
    
+        
    Configuration
    
+        
    It is possible to adjust the margins for rendering the gantt diagram.
    
+        
    
+          This is done by defining the ganttConfig part of the configuration object.
+          How to use the CLI is described in the
+          mermaidCLI page.
+        
    
+        
    
+          mermaid.ganttConfig can be set to a JSON string with config parameters or the
+          corresponding object.
+        
    
+        
    mermaid.ganttConfig = {
+  titleTopMargin: 25,
+  barHeight: 20,
+  barGap: 4,
+  topPadding: 75,
+  sidePadding: 75,
+};
+
    
+        
    Possible configuration params:
    
+        
+          
+            
+              
+              
+              
+            
+          
+          
+            
+              
+              
+              
+            
+            
+              
+              
+              
+            
+          
+        
    ParamDescriptionDefault value
    mirrorActorTurns on/off the rendering of actors below the diagram as well as above itfalse
    bottomMarginAdj
+                Adjusts how far down the graph ended. Wide borders styles with css could generate
+                unwanted clipping which is why this config param exists.
+              1
    
+        
    Interaction
    
+        
    
+          It is possible to bind a click event to a task. The click can lead to either a javascript
+          callback or to a link which will be opened in the current browser tab.
+          Note: This functionality is disabled when using
+          securityLevel='strict' and enabled when using
+          securityLevel='loose'.
+        
    
+        
    click taskId call callback(arguments)
+click taskId href URL
+
    
+        
      
+          
    • taskId is the id of the task
      • 
+          
    • 
+            callback is the name of a javascript function defined on the page displaying the graph,
+            the function will be called with the taskId as the parameter if no other arguments are
+            specified.
+          
      • 
+        
    
+        
    Beginner's tip—a full example using interactive links in an html context:
    
+        
    <body>
+  <pre class="mermaid">
+    gantt
+      dateFormat  YYYY-MM-DD
+
+      section Clickable
+      Visit mermaidjs         :active, cl1, 2014-01-07, 3d
+      Print arguments         :cl2, after cl1, 3d
+      Print task              :cl3, after cl2, 3d
+
+      click cl1 href "https://mermaidjs.github.io/"
+      click cl2 call printArguments("test1", "test2", test3)
+      click cl3 call printTask()
+  </pre>
+
+  <script>
+    const printArguments = function (arg1, arg2, arg3) {
+      alert('printArguments called with arguments: ' + arg1 + ', ' + arg2 + ', ' + arg3);
+    };
+    const printTask = function (taskId) {
+      alert('taskId: ' + taskId);
+    };
+    const config = {
+      startOnLoad: true,
+      securityLevel: 'loose',
+    };
+    mermaid.initialize(config);
+  </script>
+</body>
+
    
+        
    Examples
    
+        
    Bar chart (using gantt chart)
    
+        
    gantt
+    title Git Issues - days since last update
+    dateFormat X
+    axisFormat %s
+    section Issue19062
+    71   : 0, 71
+    section Issue19401
+    36   : 0, 36
+    section Issue193
+    34   : 0, 34
+    section Issue7441
+    9    : 0, 9
+    section Issue1300
+    5    : 0, 5
    
+      
    
+    
    
+    
+    
+    
+  
+
diff --git a/docs/syntax/gantt.md b/docs/syntax/gantt.md
index 33c2740e51..071cb0ec02 100644
--- a/docs/syntax/gantt.md
+++ b/docs/syntax/gantt.md
@@ -114,7 +114,30 @@ gantt
     Add another diagram to demo page    :48h
 ```
 
-It is possible to set multiple dependencies separated by space:
+Tasks are by default sequential. A task start date defaults to the end date of the preceding task.
+
+A colon, `:`, separates the task title from its metadata.
+Metadata items are separated by a comma, `,`. Valid tags are `active`, `done`, `crit`, and `milestone`. Tags are optional, but if used, they must be specified first.
+After processing the tags, the remaining metadata items are interpreted as follows:
+
+1.  If a single item is specified, it determines when the task ends. It can either be a specific date/time or a duration. If a duration is specified, it is added to the start date of the task to determine the end date of the task, taking into account any exclusions.
+2.  If two items are specified, the last item is interpreted as in the previous case. The first item can either specify an explicit start date/time (in the format specified by `dateFormat`) or reference another task using `after  [[otherTaskID2 [otherTaskID3]]...]`. In the latter case, the start date of the task will be set according to the latest end date of any referenced task.
+3.  If three items are specified, the last two will be interpreted as in the previous case. The first item will denote the ID of the task, which can be referenced using the `later ` syntax.
+
+| Metadata syntax                            | Start date                                          | End date                                    | ID       |
+| ------------------------------------------ | --------------------------------------------------- | ------------------------------------------- | -------- |
+| `, , `         | `startdate` as interpreted using `dateformat`       | `endDate` as interpreted using `dateformat` | `taskID` |
+| `, , `          | `startdate` as interpreted using `dateformat`       | Start date + `length`                       | `taskID` |
+| `, after , ` | End date of previously specified task `otherTaskID` | `endDate` as interpreted using `dateformat` | `taskID` |
+| `, after , `  | End date of previously specified task `otherTaskID` | Start date + `length`                       | `taskID` |
+| `, `                   | `startdate` as interpreted using `dateformat`       | `enddate` as interpreted using `dateformat` | n/a      |
+| `, `                    | `startdate` as interpreted using `dateformat`       | Start date + `length`                       | n/a      |
+| `after , `           | End date of previously specified task `otherTaskID` | `enddate` as interpreted using `dateformat` | n/a      |
+| `after , `            | End date of previously specified task `otherTaskID` | Start date + `length`                       | n/a      |
+| ``                                | End date of preceding task                          | `enddate` as interpreted using `dateformat` | n/a      |
+| ``                                 | End date of preceding task                          | Start date + `length`                       | n/a      |
+
+For simplicity, the table does not show the use of multiple tasks listed with the `after` keyword. Here is an example of how to use it and how it's interpreted:
 
 ```mermaid-example
 gantt
diff --git a/packages/mermaid/src/docs/syntax/gantt.md b/packages/mermaid/src/docs/syntax/gantt.md
index a0cebc560d..56fdc75a71 100644
--- a/packages/mermaid/src/docs/syntax/gantt.md
+++ b/packages/mermaid/src/docs/syntax/gantt.md
@@ -63,7 +63,30 @@ gantt
     Add another diagram to demo page    :48h
 ```
 
-It is possible to set multiple dependencies separated by space:
+Tasks are by default sequential. A task start date defaults to the end date of the preceding task.
+
+A colon, `:`, separates the task title from its metadata.
+Metadata items are separated by a comma, `,`. Valid tags are `active`, `done`, `crit`, and `milestone`. Tags are optional, but if used, they must be specified first.
+After processing the tags, the remaining metadata items are interpreted as follows:
+
+1. If a single item is specified, it determines when the task ends. It can either be a specific date/time or a duration. If a duration is specified, it is added to the start date of the task to determine the end date of the task, taking into account any exclusions.
+2. If two items are specified, the last item is interpreted as in the previous case. The first item can either specify an explicit start date/time (in the format specified by `dateFormat`) or reference another task using `after  [[otherTaskID2 [otherTaskID3]]...]`. In the latter case, the start date of the task will be set according to the latest end date of any referenced task.
+3. If three items are specified, the last two will be interpreted as in the previous case. The first item will denote the ID of the task, which can be referenced using the `later ` syntax.
+
+| Metadata syntax                            | Start date                                          | End date                                    | ID       |
+| ------------------------------------------ | --------------------------------------------------- | ------------------------------------------- | -------- |
+| `, , `         | `startdate` as interpreted using `dateformat`       | `endDate` as interpreted using `dateformat` | `taskID` |
+| `, , `          | `startdate` as interpreted using `dateformat`       | Start date + `length`                       | `taskID` |
+| `, after , ` | End date of previously specified task `otherTaskID` | `endDate` as interpreted using `dateformat` | `taskID` |
+| `, after , `  | End date of previously specified task `otherTaskID` | Start date + `length`                       | `taskID` |
+| `, `                   | `startdate` as interpreted using `dateformat`       | `enddate` as interpreted using `dateformat` | n/a      |
+| `, `                    | `startdate` as interpreted using `dateformat`       | Start date + `length`                       | n/a      |
+| `after , `           | End date of previously specified task `otherTaskID` | `enddate` as interpreted using `dateformat` | n/a      |
+| `after , `            | End date of previously specified task `otherTaskID` | Start date + `length`                       | n/a      |
+| ``                                | End date of preceding task                          | `enddate` as interpreted using `dateformat` | n/a      |
+| ``                                 | End date of preceding task                          | Start date + `length`                       | n/a      |
+
+For simplicity, the table does not show the use of multiple tasks listed with the `after` keyword. Here is an example of how to use it and how it's interpreted:
 
 ```mermaid-example
 gantt

From bf55d940b68b8aacbcb352be1a7834d0c731b751 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod 
Date: Thu, 18 Jan 2024 22:34:20 +0530
Subject: [PATCH 417/457] Delete docs/syntax/gantt.html

---
 docs/syntax/gantt.html | 179939 --------------------------------------
 1 file changed, 179939 deletions(-)
 delete mode 100644 docs/syntax/gantt.html

diff --git a/docs/syntax/gantt.html b/docs/syntax/gantt.html
deleted file mode 100644
index 4a3156ac77..0000000000
--- a/docs/syntax/gantt.html
+++ /dev/null
@@ -1,179939 +0,0 @@
-
-
-  
-    
-    Gantt diagrams
-    
-    
-    
-    
-    
-    
-    
-  
-  
-    
    
-      
    
-        
-        
    Gantt diagrams
    
-        
    
-          
    
-            A Gantt chart is a type of bar chart, first developed by Karol Adamiecki in 1896, and
-            independently by Henry Gantt in the 1910s, that illustrates a project schedule and the
-            amount of time it would take for any one project to finish. Gantt charts illustrate
-            number of days between the start and finish dates of the terminal elements and summary
-            elements of a project.
-          
    
-        
    
-        
    A note to users
    
-        
    
-          Gantt Charts will record each scheduled task as one continuous bar that extends from the
-          left to the right. The x axis represents time and the y records the different tasks and
-          the order in which they are to be completed.
-        
    
-        
    
-          It is important to remember that when a date, day, or collection of dates specific to a
-          task are "excluded", the Gantt Chart will accommodate those changes by extending an equal
-          number of days, towards the right, not by creating a gap inside the task. As shown here
-          
-        
    
-        
    
-          However, if the excluded dates are between two tasks that are set to start consecutively,
-          the excluded dates will be skipped graphically and left blank, and the following task will
-          begin after the end of the excluded dates. As shown here
-          
-        
    
-        
    
-          A Gantt chart is useful for tracking the amount of time it would take before a project is
-          finished, but it can also be used to graphically represent "non-working days", with a few
-          tweaks.
-        
    
-        
    
-          Mermaid can render Gantt diagrams as SVG, PNG or a MarkDown link that can be pasted into
-          docs.
-        
    
-        
    gantt
-    title A Gantt Diagram
-    dateFormat YYYY-MM-DD
-    section Section
-        A task          :a1, 2014-01-01, 30d
-        Another task    :after a1, 20d
-    section Another
-        Task in Another :2014-01-12, 12d
-        another task    :24d
    
-        
    Syntax
    
-        
    gantt
-    dateFormat  YYYY-MM-DD
-    title       Adding GANTT diagram functionality to mermaid
-    excludes    weekends
-    %% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".)
-
-    section A section
-    Completed task            :done,    des1, 2014-01-06,2014-01-08
-    Active task               :active,  des2, 2014-01-09, 3d
-    Future task               :         des3, after des2, 5d
-    Future task2              :         des4, after des3, 5d
-
-    section Critical tasks
-    Completed task in the critical line :crit, done, 2014-01-06,24h
-    Implement parser and jison          :crit, done, after des1, 2d
-    Create tests for parser             :crit, active, 3d
-    Future task in critical line        :crit, 5d
-    Create tests for renderer           :2d
-    Add to mermaid                      :1d
-    Functionality added                 :milestone, 2014-01-25, 0d
-
-    section Documentation
-    Describe gantt syntax               :active, a1, after des1, 3d
-    Add gantt diagram to demo page      :after a1  , 20h
-    Add another diagram to demo page    :doc1, after a1  , 48h
-
-    section Last section
-    Describe gantt syntax               :after doc1, 3d
-    Add gantt diagram to demo page      :20h
-    Add another diagram to demo page    :48h
    
-        
    
-          Tasks are by default sequential. A task start date defaults to the end date of the
-          preceding task.
-        
    
-        
    
-          A colon, :, separates the task title from its metadata. Metadata items are
-          separated by a comma, ,. Valid tags are active,
-          done, crit, and milestone. Tags are optional, but
-          if used, they must be specified first. After processing the tags, the remaining metadata
-          items are interpreted as follows:
-        
    
-        
      
-          
    1. 
-            If a single item is specified, it determines when the task ends. It can either be a
-            specific date/time or a duration. If a duration is specified, it is added to the start
-            date of the task to determine the end date of the task, taking into account any
-            exclusions.
-          
      2. 
-          
    2. 
-            If two items are specified, the last item is interpreted as in the previous case. The
-            first item can either specify an explicit start date/time (in the format specified by
-            dateFormat) or reference another task using
-            after <otherTaskID> [[otherTaskID2 [otherTaskID3]]...]. In the latter
-            case, the start date of the task will be set according to the latest end date of any
-            referenced task.
-          
      3. 
-          
    3. 
-            If three items are specified, the last two will be interpreted as in the previous case.
-            The first item will denote the ID of the task, which can be referenced using the
-            later <taskID> syntax.
-          
      4. 
-        
    
-        
-          
-            
-              
-              
-              
-              
-            
-          
-          
-            
-              
-              
-              
-              
-            
-            
-              
-              
-              
-              
-            
-            
-              
-              
-              
-              
-            
-            
-              
-              
-              
-              
-            
-            
-              
-              
-              
-              
-            
-            
-              
-              
-              
-              
-            
-            
-              
-              
-              
-              
-            
-            
-              
-              
-              
-              
-            
-            
-              
-              
-              
-              
-            
-            
-              
-              
-              
-              
-            
-          
-        
    Metadata syntaxStart dateEnd dateID
    <taskID>, <startDate>, <endDate>startdate as interpreted using dateformatendDate as interpreted using dateformattaskID
    <taskID>, <startDate>, <length>startdate as interpreted using dateformatStart date + lengthtaskID
    <taskID>, after <otherTaskId>, <endDate>End date of previously specified task otherTaskIDendDate as interpreted using dateformattaskID
    <taskID>, after <otherTaskId>, <length>End date of previously specified task otherTaskIDStart date + lengthtaskID
    <startDate>, <endDate>startdate as interpreted using dateformatenddate as interpreted using dateformatn/a
    <startDate>, <length>startdate as interpreted using dateformatStart date + lengthn/a
    after <otherTaskID>, <endDate>End date of previously specified task otherTaskIDenddate as interpreted using dateformatn/a
    after <otherTaskID>, <length>End date of previously specified task otherTaskIDStart date + lengthn/a
    <endDate>End date of preceding taskenddate as interpreted using dateformatn/a
    <length>End date of preceding taskStart date + lengthn/a
    
-        
    
-          For simplicity, the table does not show the use of multiple tasks listed with the
-          after keyword. Here is an example of how to use it and how it's interpreted:
-        
    
-        
    gantt
-    apple :a, 2017-07-20, 1w
-    banana :crit, b, 2017-07-23, 1d
-    cherry :active, c, after b a, 1d
    
-        
    Title
    
-        
    
-          The title is an optional string to be displayed at the top of the
-          Gantt chart to describe the chart as a whole.
-        
    
-        
    Section statements
    
-        
    
-          You can divide the chart into various sections, for example to separate different parts of
-          a project like development and documentation.
-        
    
-        
    
-          To do so, start a line with the section keyword and give it a name. (Note
-          that unlike with the title for the entire chart, this name is
-          required.
-        
    
-        
    Milestones
    
-        
    
-          You can add milestones to the diagrams. Milestones differ from tasks as they represent a
-          single instant in time and are identified by the keyword milestone. Below is
-          an example on how to use milestones. As you may notice, the exact location of the
-          milestone is determined by the initial date for the milestone and the "duration" of the
-          task this way: initial date+duration/2.
-        
    
-        
    gantt
-    dateFormat HH:mm
-    axisFormat %H:%M
-    Initial milestone : milestone, m1, 17:49, 2m
-    Task A : 10m
-    Task B : 5m
-    Final milestone : milestone, m2, 18:08, 4m
    
-        
    Setting dates
    
-        
    
-          dateFormat defines the format of the date input of your
-          gantt elements. How these dates are represented in the rendered chart
-          output are defined by axisFormat.
-        
    
-        
    Input date format
    
-        
    
-          The default input date format is YYYY-MM-DD. You can define your custom
-          dateFormat.
-        
    
-        
    dateFormat YYYY-MM-DD
-
    
-        
    The following formatting options are supported:
    
-        
-          
-            
-              
-              
-              
-            
-          
-          
-            
-              
-              
-              
-            
-            
-              
-              
-              
-            
-            
-              
-              
-              
-            
-            
-              
-              
-              
-            
-            
-              
-              
-              
-            
-            
-              
-              
-              
-            
-            
-              
-              
-              
-            
-            
-              
-              
-              
-            
-            
-              
-              
-              
-            
-            
-              
-              
-              
-            
-            
-              
-              
-              
-            
-            
-              
-              
-              
-            
-            
-              
-              
-              
-            
-            
-              
-              
-              
-            
-            
-              
-              
-              
-            
-            
-              
-              
-              
-            
-            
-              
-              
-              
-            
-            
-              
-              
-              
-            
-            
-              
-              
-              
-            
-          
-        
    InputExampleDescription
    YYYY20144 digit year
    YY142 digit year
    Q1..4Quarter of year. Sets month to first month in quarter.
    M MM1..12Month number
    MMM MMMMJanuary..DecMonth name in locale set by dayjs.locale()
    D DD1..31Day of month
    Do1st..31stDay of month with ordinal
    DDD DDDD1..365Day of year
    X1410715640.579Unix timestamp
    x1410715640579Unix ms timestamp
    H HH0..2324 hour time
    h hh1..1212 hour time used with a A.
    a Aam pmPost or ante meridiem
    m mm0..59Minutes
    s ss0..59Seconds
    S0..9Tenths of a second
    SS0..99Hundreds of a second
    SSS0..999Thousandths of a second
    Z ZZ+12:00Offset from UTC as +-HH:mm, +-HHmm, or Z
    
-        
    
-          More info in:
-          https://day.js.org/docs/en/parse/string-format/
-        
    
-        
    Output date format on the axis
    
-        
    
-          The default output date format is YYYY-MM-DD. You can define your custom
-          axisFormat, like 2020-Q1 for the first quarter of the year 2020.
-        
    
-        
    axisFormat %Y-%m-%d
-
    
-        
    The following formatting strings are supported:
    
-        
-          
-            
-              
-              
-            
-          
-          
-            
-              
-              
-            
-            
-              
-              
-            
-            
-              
-              
-            
-            
-              
-              
-            
-            
-              
-              
-            
-            
-              
-              
-            
-            
-              
-              
-            
-            
-              
-              
-            
-            
-              
-              
-            
-            
-              
-              
-            
-            
-              
-              
-            
-            
-              
-              
-            
-            
-              
-              
-            
-            
-              
-              
-            
-            
-              
-              
-            
-            
-              
-              
-            
-            
-              
-              
-            
-            
-              
-              
-            
-            
-              
-              
-            
-            
-              
-              
-            
-            
-              
-              
-            
-            
-              
-              
-            
-            
-              
-              
-            
-            
-              
-              
-            
-          
-        
    FormatDefinition
    %aabbreviated weekday name
    %Afull weekday name
    %babbreviated month name
    %Bfull month name
    %cdate and time, as "%a %b %e %H:%M:%S %Y"
    %dzero-padded day of the month as a decimal number [01,31]
    %espace-padded day of the month as a decimal number [ 1,31]; equivalent to %_d
    %Hhour (24-hour clock) as a decimal number [00,23]
    %Ihour (12-hour clock) as a decimal number [01,12]
    %jday of the year as a decimal number [001,366]
    %mmonth as a decimal number [01,12]
    %Mminute as a decimal number [00,59]
    %Lmilliseconds as a decimal number [000, 999]
    %peither AM or PM
    %Ssecond as a decimal number [00,61]
    %U
-                week number of the year (Sunday as the first day of the week) as a decimal number
-                [00,53]
-              
    %wweekday as a decimal number [0(Sunday),6]
    %W
-                week number of the year (Monday as the first day of the week) as a decimal number
-                [00,53]
-              
    %xdate, as "%m/%d/%Y"
    %Xtime, as "%H:%M:%S"
    %yyear without century as a decimal number [00,99]
    %Yyear with century as a decimal number
    %Ztime zone offset, such as "-0700"
    %%a literal "%" character
    
-        
    
-          More info in:
-          https://github.com/d3/d3-time-format/tree/v4.0.0#locale_format
-        
    
-        
    Axis ticks (v10.3.0+)
    
-        
    
-          The default output ticks are auto. You can custom your tickInterval, like
-          1day or 1week.
-        
    
-        
    tickInterval 1day
-
    
-        
    The pattern is:
    
-        
    /^([1-9][0-9]*)(millisecond|second|minute|hour|day|week|month)$/;
-
    
-        
    
-          More info in:
-          https://github.com/d3/d3-time#interval_every
-        
    
-        
    
-          Week-based tickIntervals start the week on sunday by default. If you wish to
-          specify another weekday on which the tickInterval should start, use the
-          weekday option:
-        
    
-        
    gantt
-  tickInterval 1week
-  weekday monday
    
-        
    `millisecond` and `second` support was added in vMERMAID_RELEASE_VERSION
-
    
-        
    Output in compact mode
    
-        
    
-          The compact mode allows you to display multiple tasks in the same row. Compact mode can be
-          enabled for a gantt chart by setting the display mode of the graph via preceeding YAML
-          settings.
-        
    
-        
    ---
-displayMode: compact
----
-gantt
-    title A Gantt Diagram
-    dateFormat  YYYY-MM-DD
-
-    section Section
-    A task           :a1, 2014-01-01, 30d
-    Another task     :a2, 2014-01-20, 25d
-    Another one      :a3, 2014-02-10, 20d
    
-        
    Comments
    
-        
    
-          Comments can be entered within a gantt chart, which will be ignored by the parser.
-          Comments need to be on their own line and must be prefaced with %% (double
-          percent signs). Any text after the start of the comment to the next newline will be
-          treated as a comment, including any diagram syntax.
-        
    
-        
    gantt
-    title A Gantt Diagram
-    %% This is a comment
-    dateFormat YYYY-MM-DD
-    section Section
-        A task          :a1, 2014-01-01, 30d
-        Another task    :after a1, 20d
-    section Another
-        Task in Another :2014-01-12, 12d
-        another task    :24d
    
-        
    Styling
    
-        
    
-          Styling of the Gantt diagram is done by defining a number of CSS classes. During
-          rendering, these classes are extracted from the file located at
-          src/diagrams/gantt/styles.js
-        
    
-        
    Classes used
    
-        
-          
-            
-              
-              
-            
-          
-          
-            
-              
-              
-            
-            
-              
-              
-            
-            
-              
-              
-            
-            
-              
-              
-            
-            
-              
-              
-            
-            
-              
-              
-            
-          
-        
    ClassDescription
    grid.tickStyling for the Grid Lines
    grid.pathStyling for the Grid's borders
    .taskTextTask Text Styling
    .taskTextOutsideRightStyling for Task Text that exceeds the activity bar towards the right.
    .taskTextOutsideLeftStyling for Task Text that exceeds the activity bar, towards the left.
    todayMarkerToggle and Styling for the "Today Marker"
    
-        
    Sample stylesheet
    
-        
    .grid .tick {
-  stroke: lightgrey;
-  opacity: 0.3;
-  shape-rendering: crispEdges;
-}
-.grid path {
-  stroke-width: 0;
-}
-
-#tag {
-  color: white;
-  background: #fa283d;
-  width: 150px;
-  position: absolute;
-  display: none;
-  padding: 3px 6px;
-  margin-left: -80px;
-  font-size: 11px;
-}
-
-#tag:before {
-  border: solid transparent;
-  content: ' ';
-  height: 0;
-  left: 50%;
-  margin-left: -5px;
-  position: absolute;
-  width: 0;
-  border-width: 10px;
-  border-bottom-color: #fa283d;
-  top: -20px;
-}
-.taskText {
-  fill: white;
-  text-anchor: middle;
-}
-.taskTextOutsideRight {
-  fill: black;
-  text-anchor: start;
-}
-.taskTextOutsideLeft {
-  fill: black;
-  text-anchor: end;
-}
-
    
-        
    Today marker
    
-        
    
-          You can style or hide the marker for the current date. To style it, add a value for the
-          todayMarker key.
-        
    
-        
    todayMarker stroke-width:5px,stroke:#0f0,opacity:0.5
-
    
-        
    To hide the marker, set todayMarker to off.
    
-        
    todayMarker off
-
    
-        
    Configuration
    
-        
    It is possible to adjust the margins for rendering the gantt diagram.
    
-        
    
-          This is done by defining the ganttConfig part of the configuration object.
-          How to use the CLI is described in the
-          mermaidCLI page.
-        
    
-        
    
-          mermaid.ganttConfig can be set to a JSON string with config parameters or the
-          corresponding object.
-        
    
-        
    mermaid.ganttConfig = {
-  titleTopMargin: 25,
-  barHeight: 20,
-  barGap: 4,
-  topPadding: 75,
-  sidePadding: 75,
-};
-
    
-        
    Possible configuration params:
    
-        
-          
-            
-              
-              
-              
-            
-          
-          
-            
-              
-              
-              
-            
-            
-              
-              
-              
-            
-          
-        
    ParamDescriptionDefault value
    mirrorActorTurns on/off the rendering of actors below the diagram as well as above itfalse
    bottomMarginAdj
-                Adjusts how far down the graph ended. Wide borders styles with css could generate
-                unwanted clipping which is why this config param exists.
-              1
    
-        
    Interaction
    
-        
    
-          It is possible to bind a click event to a task. The click can lead to either a javascript
-          callback or to a link which will be opened in the current browser tab.
-          Note: This functionality is disabled when using
-          securityLevel='strict' and enabled when using
-          securityLevel='loose'.
-        
    
-        
    click taskId call callback(arguments)
-click taskId href URL
-
    
-        
      
-          
    • taskId is the id of the task
      • 
-          
    • 
-            callback is the name of a javascript function defined on the page displaying the graph,
-            the function will be called with the taskId as the parameter if no other arguments are
-            specified.
-          
      • 
-        
    
-        
    Beginner's tip—a full example using interactive links in an html context:
    
-        
    <body>
-  <pre class="mermaid">
-    gantt
-      dateFormat  YYYY-MM-DD
-
-      section Clickable
-      Visit mermaidjs         :active, cl1, 2014-01-07, 3d
-      Print arguments         :cl2, after cl1, 3d
-      Print task              :cl3, after cl2, 3d
-
-      click cl1 href "https://mermaidjs.github.io/"
-      click cl2 call printArguments("test1", "test2", test3)
-      click cl3 call printTask()
-  </pre>
-
-  <script>
-    const printArguments = function (arg1, arg2, arg3) {
-      alert('printArguments called with arguments: ' + arg1 + ', ' + arg2 + ', ' + arg3);
-    };
-    const printTask = function (taskId) {
-      alert('taskId: ' + taskId);
-    };
-    const config = {
-      startOnLoad: true,
-      securityLevel: 'loose',
-    };
-    mermaid.initialize(config);
-  </script>
-</body>
-
    
-        
    Examples
    
-        
    Bar chart (using gantt chart)
    
-        
    gantt
-    title Git Issues - days since last update
-    dateFormat X
-    axisFormat %s
-    section Issue19062
-    71   : 0, 71
-    section Issue19401
-    36   : 0, 36
-    section Issue193
-    34   : 0, 34
-    section Issue7441
-    9    : 0, 9
-    section Issue1300
-    5    : 0, 5
    
-      
    
-    
    
-    
-    
-    
-  
-

From d2c82c18022957f8743d656b0e6017be05ba0b53 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod 
Date: Fri, 19 Jan 2024 12:06:53 +0530
Subject: [PATCH 418/457] Use cache to store snapshots

---
 .github/workflows/e2e.yml                     | 49 +++++++++++++++++++
 cSpell.json                                   |  1 +
 cypress.config.cjs                            | 11 ++++-
 .../integration/other/configuration.spec.js   |  1 -
 cypress/integration/other/rerender.spec.js    |  2 -
 cypress/integration/rendering/gantt.spec.js   | 13 +++--
 cypress/support/commands.js                   | 12 +++--
 7 files changed, 77 insertions(+), 12 deletions(-)

diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml
index 71806a9c46..09e8546ff7 100644
--- a/.github/workflows/e2e.yml
+++ b/.github/workflows/e2e.yml
@@ -9,8 +9,44 @@ permissions:
   contents: read
 
 jobs:
+  cache:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v2
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 18.x
+
+      - name: Cache snapshots
+        id: cache-snapshot
+        uses: actions/cache@v4
+        with:
+          save-always: true
+          path: ./cypress/snapshots
+          key: ${{ runner.os }}-snapshots
+
+      - name: Switch to base branch
+        if: ${{ steps.cache-snapshot.outputs.cache-hit != 'true' }}
+        uses: actions/checkout@v4
+        with:
+          ref: ${{ github.event_name == 'pull_request' && github.event.pull_request.base.sha || github.event_name == 'merge_group' && github.event.merge_group.base.sha || 'develop' }}
+  
+      - name: Cypress run
+        uses: cypress-io/github-action@v4
+        id: cypress-snapshot-gen
+        if: ${{ steps.cache-snapshot.outputs.cache-hit != 'true' }}
+        with:
+          start: pnpm run dev
+          wait-on: 'http://localhost:9000'
+          browser: chrome
+          spec: |
+            cypress/integration/rendering/flowchart-v2.spec.js
+  
   e2e:
     runs-on: ubuntu-latest
+    needs: cache
     strategy:
       fail-fast: false
       matrix:
@@ -27,6 +63,13 @@ jobs:
         with:
           node-version: ${{ matrix.node-version }}
 
+      - name: Cache snapshots
+        id: cache-snapshot
+        uses: actions/cache/restore@v3
+        with:
+          path: ./cypress/snapshots
+          key: ${{ runner.os }}-snapshots
+
       # Install NPM dependencies, cache them correctly
       # and run all Cypress tests
       - name: Cypress run
@@ -38,14 +81,19 @@ jobs:
         with:
           start: pnpm run dev:coverage
           wait-on: 'http://localhost:9000'
+          browser: chrome
           # Disable recording if we don't have an API key
           # e.g. if this action was run from a fork
           record: ${{ secrets.CYPRESS_RECORD_KEY != '' }}
           parallel: ${{ secrets.CYPRESS_RECORD_KEY != '' }}
+          # TODO: Remove
+          spec: |
+            cypress/integration/rendering/flowchart-v2.spec.js
         env:
           CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
           VITEST_COVERAGE: true
           CYPRESS_COMMIT: ${{ github.sha }}
+
       - name: Upload Coverage to Codecov
         uses: codecov/codecov-action@v3
         # Run step only pushes to develop and pull_requests
@@ -57,6 +105,7 @@ jobs:
           fail_ci_if_error: false
           verbose: true
           token: 6845cc80-77ee-4e17-85a1-026cd95e0766
+
       - name: Upload Artifacts
         uses: actions/upload-artifact@v3
         if: ${{ failure() && steps.cypress.conclusion == 'failure' }}
diff --git a/cSpell.json b/cSpell.json
index 3ea9594f75..82c1c81c41 100644
--- a/cSpell.json
+++ b/cSpell.json
@@ -124,6 +124,7 @@
     "sidharth",
     "sidharthv",
     "sphinxcontrib",
+    "ssim",
     "startx",
     "starty",
     "statediagram",
diff --git a/cypress.config.cjs b/cypress.config.cjs
index 30076c56ef..c754b465f9 100644
--- a/cypress.config.cjs
+++ b/cypress.config.cjs
@@ -4,12 +4,21 @@ const { defineConfig } = require('cypress');
 const { addMatchImageSnapshotPlugin } = require('cypress-image-snapshot/plugin');
 const coverage = require('@cypress/code-coverage/task');
 
+
 module.exports = defineConfig({
   projectId: 'n2sma2',
+  viewportWidth: 1440,
+  viewportHeight: 1024,
   e2e: {
-    specPattern: 'cypress/integration/**/*.{js,jsx,ts,tsx}',
+    specPattern: 'cypress/integration/**/*.{js,ts}',
     setupNodeEvents(on, config) {
       coverage(on, config);
+      on('before:browser:launch', (browser = {}, launchOptions) => {
+        if (browser.name === 'chrome' && browser.isHeadless) {
+          launchOptions.args.push('--window-size=1440,1024', '--force-device-scale-factor=1');
+        }
+        return launchOptions;
+      });
       addMatchImageSnapshotPlugin(on, config);
       // copy any needed variables from process.env to config.env
       config.env.useAppli = process.env.USE_APPLI ? true : false;
diff --git a/cypress/integration/other/configuration.spec.js b/cypress/integration/other/configuration.spec.js
index 7cbc5d1059..23338271f5 100644
--- a/cypress/integration/other/configuration.spec.js
+++ b/cypress/integration/other/configuration.spec.js
@@ -117,7 +117,6 @@ describe('Configuration', () => {
     });
     it('should not taint the initial configuration when using multiple directives', () => {
       const url = 'http://localhost:9000/regression/issue-1874.html';
-      cy.viewport(1440, 1024);
       cy.visit(url);
 
       cy.get('svg');
diff --git a/cypress/integration/other/rerender.spec.js b/cypress/integration/other/rerender.spec.js
index f160a2e273..d14c6257e0 100644
--- a/cypress/integration/other/rerender.spec.js
+++ b/cypress/integration/other/rerender.spec.js
@@ -1,14 +1,12 @@
 describe('Rerendering', () => {
   it('should be able to render after an error has occurred', () => {
     const url = 'http://localhost:9000/render-after-error.html';
-    cy.viewport(1440, 1024);
     cy.visit(url);
     cy.get('#graphDiv').should('exist');
   });
 
   it('should be able to render and rerender a graph via API', () => {
     const url = 'http://localhost:9000/rerender.html';
-    cy.viewport(1440, 1024);
     cy.visit(url);
     cy.get('#graph [id^=flowchart-A]').should('have.text', 'XMas');
 
diff --git a/cypress/integration/rendering/gantt.spec.js b/cypress/integration/rendering/gantt.spec.js
index 998a092c24..73ff4ee005 100644
--- a/cypress/integration/rendering/gantt.spec.js
+++ b/cypress/integration/rendering/gantt.spec.js
@@ -245,7 +245,10 @@ describe('Gantt diagram', () => {
       const style = svg.attr('style');
       expect(style).to.match(/^max-width: [\d.]+px;$/);
       const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
-      expect(maxWidthValue).to.be.within(984 * 0.95, 984 * 1.05);
+      expect(maxWidthValue).to.be.within(
+        Cypress.config().viewportWidth * 0.95,
+        Cypress.config().viewportWidth * 1.05
+      );
     });
   });
 
@@ -285,11 +288,11 @@ describe('Gantt diagram', () => {
       { gantt: { useMaxWidth: false } }
     );
     cy.get('svg').should((svg) => {
-      // const height = parseFloat(svg.attr('height'));
       const width = parseFloat(svg.attr('width'));
-      // use within because the absolute value can be slightly different depending on the environment ±5%
-      // expect(height).to.be.within(484 * 0.95, 484 * 1.05);
-      expect(width).to.be.within(984 * 0.95, 984 * 1.05);
+      expect(width).to.be.within(
+        Cypress.config().viewportWidth * 0.95,
+        Cypress.config().viewportWidth * 1.05
+      );
       expect(svg).to.not.have.attr('style');
     });
   });
diff --git a/cypress/support/commands.js b/cypress/support/commands.js
index 3589640d98..7a77b3ba61 100644
--- a/cypress/support/commands.js
+++ b/cypress/support/commands.js
@@ -24,8 +24,14 @@
 // -- This is will overwrite an existing command --
 // Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
 
-// import '@percy/cypress';
-
 import { addMatchImageSnapshotCommand } from 'cypress-image-snapshot/command';
 
-addMatchImageSnapshotCommand();
+addMatchImageSnapshotCommand({
+  comparisonMethod: 'ssim',
+  failureThreshold: 0.01,
+  failureThresholdType: 'percent',
+  customDiffConfig: {
+    ssim: 'fast',
+  },
+  blur: 1,
+});

From 76dacf8e90388042cf6171b5aa5aac704d34c7e3 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod 
Date: Fri, 19 Jan 2024 12:10:39 +0530
Subject: [PATCH 419/457] E2E test

---
 cypress/integration/rendering/flowchart-v2.spec.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/cypress/integration/rendering/flowchart-v2.spec.js b/cypress/integration/rendering/flowchart-v2.spec.js
index e23820ffa3..fa625159d2 100644
--- a/cypress/integration/rendering/flowchart-v2.spec.js
+++ b/cypress/integration/rendering/flowchart-v2.spec.js
@@ -6,7 +6,6 @@ describe('Flowchart v2', () => {
       `flowchart TD
       A[Christmas] -->|Get money| B(Go shopping)
       B --> C{Let me think}
-      C -->|One| D[Laptop]
       C -->|Two| E[iPhone]
       C -->|Three| F[fa:fa-car Car]
       `,

From 7805e054957b019efa138ba2bece6889ac62ecf3 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod 
Date: Fri, 19 Jan 2024 12:15:01 +0530
Subject: [PATCH 420/457] Update lockfile

---
 pnpm-lock.yaml | 121 ++++++++-----------------------------------------
 1 file changed, 19 insertions(+), 102 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b9c49e0a09..2484f63123 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -377,7 +377,7 @@ importers:
         version: 1.0.0-alpha.72(@algolia/client-search@4.19.1)(@types/node@18.17.5)(search-insights@2.7.0)
       vitepress-plugin-search:
         specifier: ^1.0.4-alpha.20
-        version: 1.0.4-alpha.20(flexsearch@0.7.31)(vitepress@1.0.0-alpha.72)(vue@3.3.8)
+        version: 1.0.4-alpha.20(flexsearch@0.7.31)(vitepress@1.0.0-alpha.72)(vue@3.4.15)
 
   packages/mermaid-example-diagram:
     dependencies:
@@ -464,7 +464,7 @@ importers:
         version: 1.1.0
       unocss:
         specifier: ^0.58.0
-        version: 0.58.0(postcss@8.4.31)(rollup@2.79.1)(vite@4.5.0)
+        version: 0.58.0(postcss@8.4.33)(rollup@2.79.1)(vite@4.5.0)
       unplugin-vue-components:
         specifier: ^0.26.0
         version: 0.26.0(rollup@2.79.1)(vue@3.3.4)
@@ -476,7 +476,7 @@ importers:
         version: 0.17.0(vite@4.5.0)(workbox-build@7.0.0)(workbox-window@7.0.0)
       vitepress:
         specifier: 1.0.0-rc.39
-        version: 1.0.0-rc.39(@algolia/client-search@4.19.1)(@types/node@18.17.5)(postcss@8.4.31)(search-insights@2.7.0)(typescript@5.1.6)
+        version: 1.0.0-rc.39(@algolia/client-search@4.19.1)(@types/node@18.17.5)(postcss@8.4.33)(search-insights@2.7.0)(typescript@5.1.6)
       workbox-window:
         specifier: ^7.0.0
         version: 7.0.0
@@ -5593,7 +5593,7 @@ packages:
       sirv: 2.0.3
     dev: true
 
-  /@unocss/postcss@0.58.0(postcss@8.4.31):
+  /@unocss/postcss@0.58.0(postcss@8.4.33):
     resolution: {integrity: sha512-2hAwLbfUFqysi8FN1cn3xkHy5GhLMlYy6W4NrAZ2ws7F2MKpsCT2xCj7dT5cI2tW8ulD2YoVbKH15dBhNsMNUA==}
     engines: {node: '>=14'}
     peerDependencies:
@@ -5605,7 +5605,7 @@ packages:
       css-tree: 2.3.1
       fast-glob: 3.3.2
       magic-string: 0.30.5
-      postcss: 8.4.31
+      postcss: 8.4.33
     dev: true
 
   /@unocss/preset-attributify@0.58.0:
@@ -5876,15 +5876,6 @@ packages:
       estree-walker: 2.0.2
       source-map-js: 1.0.2
 
-  /@vue/compiler-core@3.3.8:
-    resolution: {integrity: sha512-hN/NNBUECw8SusQvDSqqcVv6gWq8L6iAktUR0UF3vGu2OhzRqcOiAno0FmBJWwxhYEXRlQJT5XnoKsVq1WZx4g==}
-    dependencies:
-      '@babel/parser': 7.23.5
-      '@vue/shared': 3.3.8
-      estree-walker: 2.0.2
-      source-map-js: 1.0.2
-    dev: true
-
   /@vue/compiler-core@3.4.15:
     resolution: {integrity: sha512-XcJQVOaxTKCnth1vCxEChteGuwG6wqnUHxAm1DO3gCz0+uXKaJNx8/digSz4dLALCy8n2lKq24jSUs8segoqIw==}
     dependencies:
@@ -5901,13 +5892,6 @@ packages:
       '@vue/compiler-core': 3.3.4
       '@vue/shared': 3.3.4
 
-  /@vue/compiler-dom@3.3.8:
-    resolution: {integrity: sha512-+PPtv+p/nWDd0AvJu3w8HS0RIm/C6VGBIRe24b9hSyNWOAPEUosFZ5diwawwP8ip5sJ8n0Pe87TNNNHnvjs0FQ==}
-    dependencies:
-      '@vue/compiler-core': 3.3.8
-      '@vue/shared': 3.3.8
-    dev: true
-
   /@vue/compiler-dom@3.4.15:
     resolution: {integrity: sha512-wox0aasVV74zoXyblarOM3AZQz/Z+OunYcIHe1OsGclCHt8RsRm04DObjefaI82u6XDzv+qGWZ24tIsRAIi5MQ==}
     dependencies:
@@ -5929,21 +5913,6 @@ packages:
       postcss: 8.4.31
       source-map-js: 1.0.2
 
-  /@vue/compiler-sfc@3.3.8:
-    resolution: {integrity: sha512-WMzbUrlTjfYF8joyT84HfwwXo+8WPALuPxhy+BZ6R4Aafls+jDBnSz8PDz60uFhuqFbl3HxRfxvDzrUf3THwpA==}
-    dependencies:
-      '@babel/parser': 7.23.5
-      '@vue/compiler-core': 3.3.8
-      '@vue/compiler-dom': 3.3.8
-      '@vue/compiler-ssr': 3.3.8
-      '@vue/reactivity-transform': 3.3.8
-      '@vue/shared': 3.3.8
-      estree-walker: 2.0.2
-      magic-string: 0.30.5
-      postcss: 8.4.31
-      source-map-js: 1.0.2
-    dev: true
-
   /@vue/compiler-sfc@3.4.15:
     resolution: {integrity: sha512-LCn5M6QpkpFsh3GQvs2mJUOAlBQcCco8D60Bcqmf3O3w5a+KWS5GvYbrrJBkgvL1BDnTp+e8q0lXCLgHhKguBA==}
     dependencies:
@@ -5964,13 +5933,6 @@ packages:
       '@vue/compiler-dom': 3.3.4
       '@vue/shared': 3.3.4
 
-  /@vue/compiler-ssr@3.3.8:
-    resolution: {integrity: sha512-hXCqQL/15kMVDBuoBYpUnSYT8doDNwsjvm3jTefnXr+ytn294ySnT8NlsFHmTgKNjwpuFy7XVV8yTeLtNl/P6w==}
-    dependencies:
-      '@vue/compiler-dom': 3.3.8
-      '@vue/shared': 3.3.8
-    dev: true
-
   /@vue/compiler-ssr@3.4.15:
     resolution: {integrity: sha512-1jdeQyiGznr8gjFDadVmOJqZiLNSsMa5ZgqavkPZ8O2wjHv0tVuAEsw5hTdUoUW4232vpBbL/wJhzVW/JwY1Uw==}
     dependencies:
@@ -5994,27 +5956,11 @@ packages:
       estree-walker: 2.0.2
       magic-string: 0.30.5
 
-  /@vue/reactivity-transform@3.3.8:
-    resolution: {integrity: sha512-49CvBzmZNtcHua0XJ7GdGifM8GOXoUMOX4dD40Y5DxI3R8OUhMlvf2nvgUAcPxaXiV5MQQ1Nwy09ADpnLQUqRw==}
-    dependencies:
-      '@babel/parser': 7.23.5
-      '@vue/compiler-core': 3.3.8
-      '@vue/shared': 3.3.8
-      estree-walker: 2.0.2
-      magic-string: 0.30.5
-    dev: true
-
   /@vue/reactivity@3.3.4:
     resolution: {integrity: sha512-kLTDLwd0B1jG08NBF3R5rqULtv/f8x3rOFByTDz4J53ttIQEDmALqKqXY0J+XQeN0aV2FBxY8nJDf88yvOPAqQ==}
     dependencies:
       '@vue/shared': 3.3.4
 
-  /@vue/reactivity@3.3.8:
-    resolution: {integrity: sha512-ctLWitmFBu6mtddPyOKpHg8+5ahouoTCRtmAHZAXmolDtuZXfjL2T3OJ6DL6ezBPQB1SmMnpzjiWjCiMYmpIuw==}
-    dependencies:
-      '@vue/shared': 3.3.8
-    dev: true
-
   /@vue/reactivity@3.4.15:
     resolution: {integrity: sha512-55yJh2bsff20K5O84MxSvXKPHHt17I2EomHznvFiJCAZpJTNW8IuLj1xZWMLELRhBK3kkFV/1ErZGHJfah7i7w==}
     dependencies:
@@ -6027,13 +5973,6 @@ packages:
       '@vue/reactivity': 3.3.4
       '@vue/shared': 3.3.4
 
-  /@vue/runtime-core@3.3.8:
-    resolution: {integrity: sha512-qurzOlb6q26KWQ/8IShHkMDOuJkQnQcTIp1sdP4I9MbCf9FJeGVRXJFr2mF+6bXh/3Zjr9TDgURXrsCr9bfjUw==}
-    dependencies:
-      '@vue/reactivity': 3.3.8
-      '@vue/shared': 3.3.8
-    dev: true
-
   /@vue/runtime-core@3.4.15:
     resolution: {integrity: sha512-6E3by5m6v1AkW0McCeAyhHTw+3y17YCOKG0U0HDKDscV4Hs0kgNT5G+GCHak16jKgcCDHpI9xe5NKb8sdLCLdw==}
     dependencies:
@@ -6048,14 +5987,6 @@ packages:
       '@vue/shared': 3.3.4
       csstype: 3.1.2
 
-  /@vue/runtime-dom@3.3.8:
-    resolution: {integrity: sha512-Noy5yM5UIf9UeFoowBVgghyGGPIDPy1Qlqt0yVsUdAVbqI8eeMSsTqBtauaEoT2UFXUk5S64aWVNJN4MJ2vRdA==}
-    dependencies:
-      '@vue/runtime-core': 3.3.8
-      '@vue/shared': 3.3.8
-      csstype: 3.1.2
-    dev: true
-
   /@vue/runtime-dom@3.4.15:
     resolution: {integrity: sha512-EVW8D6vfFVq3V/yDKNPBFkZKGMFSvZrUQmx196o/v2tHKdwWdiZjYUBS+0Ez3+ohRyF8Njwy/6FH5gYJ75liUw==}
     dependencies:
@@ -6073,16 +6004,6 @@ packages:
       '@vue/shared': 3.3.4
       vue: 3.3.4
 
-  /@vue/server-renderer@3.3.8(vue@3.3.8):
-    resolution: {integrity: sha512-zVCUw7RFskvPuNlPn/8xISbrf0zTWsTSdYTsUTN1ERGGZGVnRxM2QZ3x1OR32+vwkkCm0IW6HmJ49IsPm7ilLg==}
-    peerDependencies:
-      vue: 3.3.8
-    dependencies:
-      '@vue/compiler-ssr': 3.3.8
-      '@vue/shared': 3.3.8
-      vue: 3.3.8(typescript@5.0.4)
-    dev: true
-
   /@vue/server-renderer@3.4.15(vue@3.4.15):
     resolution: {integrity: sha512-3HYzaidu9cHjrT+qGUuDhFYvF/j643bHC6uUN9BgM11DVy+pM6ATsG6uPBLnkwOgs7BpJABReLmpL3ZPAsUaqw==}
     peerDependencies:
@@ -6090,16 +6011,12 @@ packages:
     dependencies:
       '@vue/compiler-ssr': 3.4.15
       '@vue/shared': 3.4.15
-      vue: 3.4.15(typescript@5.1.6)
+      vue: 3.4.15(typescript@5.0.4)
     dev: true
 
   /@vue/shared@3.3.4:
     resolution: {integrity: sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ==}
 
-  /@vue/shared@3.3.8:
-    resolution: {integrity: sha512-8PGwybFwM4x8pcfgqEQFy70NaQxASvOC5DJwLQfpArw1UDfUXrJkdxD3BhVTMS+0Lef/TU7YO0Jvr0jJY8T+mw==}
-    dev: true
-
   /@vue/shared@3.4.15:
     resolution: {integrity: sha512-KzfPTxVaWfB+eGcGdbSf4CWdaXcGDqckoeXUh7SB3fZdEtzPCK2Vq9B/lRRL3yutax/LWITz+SwvgyOxz5V75g==}
     dev: true
@@ -16175,7 +16092,7 @@ packages:
     engines: {node: '>= 10.0.0'}
     dev: true
 
-  /unocss@0.58.0(postcss@8.4.31)(rollup@2.79.1)(vite@4.5.0):
+  /unocss@0.58.0(postcss@8.4.33)(rollup@2.79.1)(vite@4.5.0):
     resolution: {integrity: sha512-MSPRHxBqWN+1AHGV+J5uUy4//e6ZBK6O+ISzD0qrXcCD/GNtxk1+lYjOK2ltkUiKX539+/KF91vNxzhhwEf+xA==}
     engines: {node: '>=14'}
     peerDependencies:
@@ -16191,7 +16108,7 @@ packages:
       '@unocss/cli': 0.58.0(rollup@2.79.1)
       '@unocss/core': 0.58.0
       '@unocss/extractor-arbitrary-variants': 0.58.0
-      '@unocss/postcss': 0.58.0(postcss@8.4.31)
+      '@unocss/postcss': 0.58.0(postcss@8.4.33)
       '@unocss/preset-attributify': 0.58.0
       '@unocss/preset-icons': 0.58.0
       '@unocss/preset-mini': 0.58.0
@@ -16530,7 +16447,7 @@ packages:
       fsevents: 2.3.3
     dev: true
 
-  /vitepress-plugin-search@1.0.4-alpha.20(flexsearch@0.7.31)(vitepress@1.0.0-alpha.72)(vue@3.3.8):
+  /vitepress-plugin-search@1.0.4-alpha.20(flexsearch@0.7.31)(vitepress@1.0.0-alpha.72)(vue@3.4.15):
     resolution: {integrity: sha512-zG+ev9pw1Mg7htABlFCNXb8XwnKN+qfTKw+vU0Ers6RIrABx+45EAAFBoaL1mEpl1FRFn1o/dQ7F4b8GP6HdGQ==}
     engines: {node: ^14.13.1 || ^16.7.0 || >=18}
     peerDependencies:
@@ -16544,7 +16461,7 @@ packages:
       glob-to-regexp: 0.4.1
       markdown-it: 13.0.1
       vitepress: 1.0.0-alpha.72(@algolia/client-search@4.19.1)(@types/node@18.17.5)(search-insights@2.7.0)
-      vue: 3.3.8(typescript@5.0.4)
+      vue: 3.4.15(typescript@5.0.4)
     dev: true
 
   /vitepress@1.0.0-alpha.72(@algolia/client-search@4.19.1)(@types/node@18.17.5)(search-insights@2.7.0):
@@ -16578,7 +16495,7 @@ packages:
       - terser
     dev: true
 
-  /vitepress@1.0.0-rc.39(@algolia/client-search@4.19.1)(@types/node@18.17.5)(postcss@8.4.31)(search-insights@2.7.0)(typescript@5.1.6):
+  /vitepress@1.0.0-rc.39(@algolia/client-search@4.19.1)(@types/node@18.17.5)(postcss@8.4.33)(search-insights@2.7.0)(typescript@5.1.6):
     resolution: {integrity: sha512-EcgoRlAAp37WOxUOYv45oxyhLrcy3Upey+mKpqW3ldsg6Ol4trPndRBk2GO0QiSvEKlb9BMerk49D/bFICN6kg==}
     hasBin: true
     peerDependencies:
@@ -16600,7 +16517,7 @@ packages:
       focus-trap: 7.5.4
       mark.js: 8.11.1
       minisearch: 6.3.0
-      postcss: 8.4.31
+      postcss: 8.4.33
       shikiji: 0.9.19
       shikiji-core: 0.9.19
       shikiji-transformers: 0.9.19
@@ -16788,19 +16705,19 @@ packages:
       '@vue/server-renderer': 3.3.4(vue@3.3.4)
       '@vue/shared': 3.3.4
 
-  /vue@3.3.8(typescript@5.0.4):
-    resolution: {integrity: sha512-5VSX/3DabBikOXMsxzlW8JyfeLKlG9mzqnWgLQLty88vdZL7ZJgrdgBOmrArwxiLtmS+lNNpPcBYqrhE6TQW5w==}
+  /vue@3.4.15(typescript@5.0.4):
+    resolution: {integrity: sha512-jC0GH4KkWLWJOEQjOpkqU1bQsBwf4R1rsFtw5GQJbjHVKWDzO6P0nWWBTmjp1xSemAioDFj1jdaK1qa3DnMQoQ==}
     peerDependencies:
       typescript: '*'
     peerDependenciesMeta:
       typescript:
         optional: true
     dependencies:
-      '@vue/compiler-dom': 3.3.8
-      '@vue/compiler-sfc': 3.3.8
-      '@vue/runtime-dom': 3.3.8
-      '@vue/server-renderer': 3.3.8(vue@3.3.8)
-      '@vue/shared': 3.3.8
+      '@vue/compiler-dom': 3.4.15
+      '@vue/compiler-sfc': 3.4.15
+      '@vue/runtime-dom': 3.4.15
+      '@vue/server-renderer': 3.4.15(vue@3.4.15)
+      '@vue/shared': 3.4.15
       typescript: 5.0.4
     dev: true
 

From 448756ab54480e5e82b5290c00ec3350c6f34879 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod 
Date: Fri, 19 Jan 2024 12:17:20 +0530
Subject: [PATCH 421/457] Fix lint

---
 .github/workflows/e2e.yml | 4 ++--
 cypress.config.cjs        | 1 -
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml
index 09e8546ff7..a357c1c995 100644
--- a/.github/workflows/e2e.yml
+++ b/.github/workflows/e2e.yml
@@ -32,7 +32,7 @@ jobs:
         uses: actions/checkout@v4
         with:
           ref: ${{ github.event_name == 'pull_request' && github.event.pull_request.base.sha || github.event_name == 'merge_group' && github.event.merge_group.base.sha || 'develop' }}
-  
+
       - name: Cypress run
         uses: cypress-io/github-action@v4
         id: cypress-snapshot-gen
@@ -43,7 +43,7 @@ jobs:
           browser: chrome
           spec: |
             cypress/integration/rendering/flowchart-v2.spec.js
-  
+
   e2e:
     runs-on: ubuntu-latest
     needs: cache
diff --git a/cypress.config.cjs b/cypress.config.cjs
index c754b465f9..33633920ac 100644
--- a/cypress.config.cjs
+++ b/cypress.config.cjs
@@ -4,7 +4,6 @@ const { defineConfig } = require('cypress');
 const { addMatchImageSnapshotPlugin } = require('cypress-image-snapshot/plugin');
 const coverage = require('@cypress/code-coverage/task');
 
-
 module.exports = defineConfig({
   projectId: 'n2sma2',
   viewportWidth: 1440,

From d6e738ac4cf2e208326b0ca3a8702d940cb846ec Mon Sep 17 00:00:00 2001
From: Sidharth Vinod 
Date: Fri, 19 Jan 2024 12:21:51 +0530
Subject: [PATCH 422/457] Run all tests

---
 .github/workflows/e2e.yml                          | 5 -----
 cypress/integration/rendering/flowchart-v2.spec.js | 1 +
 2 files changed, 1 insertion(+), 5 deletions(-)

diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml
index a357c1c995..996fc6673e 100644
--- a/.github/workflows/e2e.yml
+++ b/.github/workflows/e2e.yml
@@ -41,8 +41,6 @@ jobs:
           start: pnpm run dev
           wait-on: 'http://localhost:9000'
           browser: chrome
-          spec: |
-            cypress/integration/rendering/flowchart-v2.spec.js
 
   e2e:
     runs-on: ubuntu-latest
@@ -86,9 +84,6 @@ jobs:
           # e.g. if this action was run from a fork
           record: ${{ secrets.CYPRESS_RECORD_KEY != '' }}
           parallel: ${{ secrets.CYPRESS_RECORD_KEY != '' }}
-          # TODO: Remove
-          spec: |
-            cypress/integration/rendering/flowchart-v2.spec.js
         env:
           CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
           VITEST_COVERAGE: true
diff --git a/cypress/integration/rendering/flowchart-v2.spec.js b/cypress/integration/rendering/flowchart-v2.spec.js
index fa625159d2..e23820ffa3 100644
--- a/cypress/integration/rendering/flowchart-v2.spec.js
+++ b/cypress/integration/rendering/flowchart-v2.spec.js
@@ -6,6 +6,7 @@ describe('Flowchart v2', () => {
       `flowchart TD
       A[Christmas] -->|Get money| B(Go shopping)
       B --> C{Let me think}
+      C -->|One| D[Laptop]
       C -->|Two| E[iPhone]
       C -->|Three| F[fa:fa-car Car]
       `,

From cb0ee5aa419849427b4de5b553ef734d22840cae Mon Sep 17 00:00:00 2001
From: Sidharth Vinod 
Date: Fri, 19 Jan 2024 13:17:14 +0530
Subject: [PATCH 423/457] Use pixelmatch for image comparison

---
 cSpell.json                 |  1 +
 cypress/support/commands.js | 22 +++++++++++++---------
 2 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/cSpell.json b/cSpell.json
index 82c1c81c41..4b8772347e 100644
--- a/cSpell.json
+++ b/cSpell.json
@@ -102,6 +102,7 @@
     "pathe",
     "pbrolin",
     "phpbb",
+    "pixelmatch",
     "plantuml",
     "playfair",
     "pnpm",
diff --git a/cypress/support/commands.js b/cypress/support/commands.js
index 7a77b3ba61..6fc1fe17db 100644
--- a/cypress/support/commands.js
+++ b/cypress/support/commands.js
@@ -26,12 +26,16 @@
 
 import { addMatchImageSnapshotCommand } from 'cypress-image-snapshot/command';
 
-addMatchImageSnapshotCommand({
-  comparisonMethod: 'ssim',
-  failureThreshold: 0.01,
-  failureThresholdType: 'percent',
-  customDiffConfig: {
-    ssim: 'fast',
-  },
-  blur: 1,
-});
+// The SSIM comparison method can be used if the pixelmatch is throwing lots of false positives.
+// SSIM actually does not catch minute changes in the image, so it is not as accurate as pixelmatch.
+// addMatchImageSnapshotCommand({
+//   comparisonMethod: 'ssim',
+//   failureThreshold: 0.01,
+//   failureThresholdType: 'percent',
+//   customDiffConfig: {
+//     ssim: 'fast',
+//   },
+//   blur: 1,
+// });
+
+addMatchImageSnapshotCommand();

From 658af081ee2781cc159dbc2826857def3765f281 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod 
Date: Fri, 19 Jan 2024 14:42:51 +0530
Subject: [PATCH 424/457] Flatten uploaded images

---
 .github/workflows/e2e.yml | 26 ++++++++++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml
index 996fc6673e..436624968c 100644
--- a/.github/workflows/e2e.yml
+++ b/.github/workflows/e2e.yml
@@ -102,8 +102,30 @@ jobs:
           token: 6845cc80-77ee-4e17-85a1-026cd95e0766
 
       - name: Upload Artifacts
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         if: ${{ failure() && steps.cypress.conclusion == 'failure' }}
         with:
-          name: error-snapshots
+          name: error-snapshots-${{ matrix.containers }}
+          retention-days: 1
           path: cypress/snapshots/**/__diff_output__/*
+
+  combineArtifacts:
+    needs: e2e
+    runs-on: ubuntu-latest
+    steps:
+    - name: Download All Artifacts
+      uses: actions/download-artifact@v4
+      with:
+        path: snapshots
+        pattern: error-snapshots-*
+        merge-multiple: true
+    - run: |
+        mkdir errors
+        cd snapshots
+        find . -mindepth 2 -type f -print -exec mv {} ../errors/ \;
+    - name: Upload Artifacts
+      uses: actions/upload-artifact@v4
+      with:
+        name: error-snapshots
+        retention-days: 10
+        path: errors/
\ No newline at end of file

From 4ce5d071250ec7b281ad9009e557551bc68ceeca Mon Sep 17 00:00:00 2001
From: Sidharth Vinod 
Date: Fri, 19 Jan 2024 14:46:21 +0530
Subject: [PATCH 425/457] Flatten uploaded images

---
 .github/workflows/e2e.yml | 32 ++++++++++++++++----------------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml
index 436624968c..29bd6eab56 100644
--- a/.github/workflows/e2e.yml
+++ b/.github/workflows/e2e.yml
@@ -113,19 +113,19 @@ jobs:
     needs: e2e
     runs-on: ubuntu-latest
     steps:
-    - name: Download All Artifacts
-      uses: actions/download-artifact@v4
-      with:
-        path: snapshots
-        pattern: error-snapshots-*
-        merge-multiple: true
-    - run: |
-        mkdir errors
-        cd snapshots
-        find . -mindepth 2 -type f -print -exec mv {} ../errors/ \;
-    - name: Upload Artifacts
-      uses: actions/upload-artifact@v4
-      with:
-        name: error-snapshots
-        retention-days: 10
-        path: errors/
\ No newline at end of file
+      - name: Download All Artifacts
+        uses: actions/download-artifact@v4
+        with:
+          path: snapshots
+          pattern: error-snapshots-*
+          merge-multiple: true
+      - run: |
+          mkdir errors
+          cd snapshots
+          find . -mindepth 2 -type f -print -exec mv {} ../errors/ \;
+      - name: Upload Artifacts
+        uses: actions/upload-artifact@v4
+        with:
+          name: error-snapshots
+          retention-days: 10
+          path: errors/

From f58a86d747ab5a773fddf905e23176ebf8581c5e Mon Sep 17 00:00:00 2001
From: Sidharth Vinod 
Date: Fri, 19 Jan 2024 15:30:18 +0530
Subject: [PATCH 426/457] Notify users

---
 .github/workflows/e2e.yml | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml
index 29bd6eab56..cfc8a45d2c 100644
--- a/.github/workflows/e2e.yml
+++ b/.github/workflows/e2e.yml
@@ -111,6 +111,7 @@ jobs:
 
   combineArtifacts:
     needs: e2e
+    if: ${{ failure() }}
     runs-on: ubuntu-latest
     steps:
       - name: Download All Artifacts
@@ -125,7 +126,12 @@ jobs:
           find . -mindepth 2 -type f -print -exec mv {} ../errors/ \;
       - name: Upload Artifacts
         uses: actions/upload-artifact@v4
+        id: upload-artifacts
         with:
           name: error-snapshots
           retention-days: 10
           path: errors/
+      - name: Notify Users
+        run: |
+          echo "::error,title=Visual tests failed::You can view images that failed by downloading the error-snapshots artifact: ${{ steps.upload-artifacts.outputs.artifact-url }}"
+        

From a9a8a208a6dc011db8c737cbee4c0eb228af2abb Mon Sep 17 00:00:00 2001
From: Sidharth Vinod 
Date: Fri, 19 Jan 2024 15:50:40 +0530
Subject: [PATCH 427/457] Update cache key

---
 .github/workflows/e2e.yml | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml
index cfc8a45d2c..3b983589d8 100644
--- a/.github/workflows/e2e.yml
+++ b/.github/workflows/e2e.yml
@@ -8,6 +8,9 @@ on:
 permissions:
   contents: read
 
+env:
+  targetHash: ${{ github.event_name == 'pull_request' && github.event.pull_request.base.sha || github.event_name == 'merge_group' && github.event.merge_group.base.sha || github.event.before }}
+
 jobs:
   cache:
     runs-on: ubuntu-latest
@@ -25,13 +28,13 @@ jobs:
         with:
           save-always: true
           path: ./cypress/snapshots
-          key: ${{ runner.os }}-snapshots
+          key: ${{ runner.os }}-snapshots-${{ env.targetHash }}
 
       - name: Switch to base branch
         if: ${{ steps.cache-snapshot.outputs.cache-hit != 'true' }}
         uses: actions/checkout@v4
         with:
-          ref: ${{ github.event_name == 'pull_request' && github.event.pull_request.base.sha || github.event_name == 'merge_group' && github.event.merge_group.base.sha || 'develop' }}
+          ref: ${{ env.targetHash }}
 
       - name: Cypress run
         uses: cypress-io/github-action@v4
@@ -66,7 +69,7 @@ jobs:
         uses: actions/cache/restore@v3
         with:
           path: ./cypress/snapshots
-          key: ${{ runner.os }}-snapshots
+          key: ${{ runner.os }}-snapshots-${{ env.targetHash }}
 
       # Install NPM dependencies, cache them correctly
       # and run all Cypress tests
@@ -109,6 +112,14 @@ jobs:
           retention-days: 1
           path: cypress/snapshots/**/__diff_output__/*
 
+      - name: Save snapshots cache
+        id: cache-upload
+        if: ${{ github.event_name == 'push' }}
+        uses: actions/cache/save@v3
+        with:
+          path: ./cypress/snapshots
+          key: ${{ runner.os }}-snapshots-${{ github.event.after }}
+
   combineArtifacts:
     needs: e2e
     if: ${{ failure() }}

From be4721b24db004317f451ac406bb094379ce0f59 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod 
Date: Fri, 19 Jan 2024 16:18:07 +0530
Subject: [PATCH 428/457] Fix cache save

---
 .github/workflows/e2e.yml | 33 +++++++++++++++++++--------------
 1 file changed, 19 insertions(+), 14 deletions(-)

diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml
index 3b983589d8..9f4fd86b2f 100644
--- a/.github/workflows/e2e.yml
+++ b/.github/workflows/e2e.yml
@@ -108,34 +108,38 @@ jobs:
         uses: actions/upload-artifact@v4
         if: ${{ failure() && steps.cypress.conclusion == 'failure' }}
         with:
-          name: error-snapshots-${{ matrix.containers }}
+          name: snapshots-${{ matrix.containers }}
           retention-days: 1
-          path: cypress/snapshots/**/__diff_output__/*
-
-      - name: Save snapshots cache
-        id: cache-upload
-        if: ${{ github.event_name == 'push' }}
-        uses: actions/cache/save@v3
-        with:
           path: ./cypress/snapshots
-          key: ${{ runner.os }}-snapshots-${{ github.event.after }}
 
   combineArtifacts:
     needs: e2e
-    if: ${{ failure() }}
     runs-on: ubuntu-latest
     steps:
       - name: Download All Artifacts
         uses: actions/download-artifact@v4
         with:
           path: snapshots
-          pattern: error-snapshots-*
+          pattern: snapshots-*
           merge-multiple: true
-      - run: |
+      
+      - name: Save snapshots cache
+        id: cache-upload
+        if: ${{ github.event_name == 'push' }}
+        uses: actions/cache/save@v3
+        with:
+          path: |
+            ./cypress/snapshots
+            !./**/__diff_output__/*
+          key: ${{ runner.os }}-snapshots-${{ github.event.after }}
+
+      - if: ${{ failure() }}
+        run: |
           mkdir errors
           cd snapshots
-          find . -mindepth 2 -type f -print -exec mv {} ../errors/ \;
-      - name: Upload Artifacts
+          find . -mindepth 2 -type d -name "*__diff_output__*" -exec sh -c 'mv "$0"/*.png ../errors/' {} \;
+      - name: Upload Error snapshots
+        if: ${{ failure() }}
         uses: actions/upload-artifact@v4
         id: upload-artifacts
         with:
@@ -143,6 +147,7 @@ jobs:
           retention-days: 10
           path: errors/
       - name: Notify Users
+        if: ${{ failure() }}
         run: |
           echo "::error,title=Visual tests failed::You can view images that failed by downloading the error-snapshots artifact: ${{ steps.upload-artifacts.outputs.artifact-url }}"
         

From 35b3192c2bf69cd3d15e35cb4422ab5c5f7afbd5 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod 
Date: Fri, 19 Jan 2024 16:23:26 +0530
Subject: [PATCH 429/457] Fix error message

---
 .github/workflows/e2e.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml
index 9f4fd86b2f..5326cb4575 100644
--- a/.github/workflows/e2e.yml
+++ b/.github/workflows/e2e.yml
@@ -149,5 +149,5 @@ jobs:
       - name: Notify Users
         if: ${{ failure() }}
         run: |
-          echo "::error,title=Visual tests failed::You can view images that failed by downloading the error-snapshots artifact: ${{ steps.upload-artifacts.outputs.artifact-url }}"
+          echo "::error title=Visual tests failed::You can view images that failed by downloading the error-snapshots artifact: ${{ steps.upload-artifacts.outputs.artifact-url }}"
         

From 6f205f89b22d82af5d56fb1613307e2b7b50db69 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod 
Date: Fri, 19 Jan 2024 16:24:42 +0530
Subject: [PATCH 430/457] Always run combineArtifacts

---
 .github/workflows/e2e.yml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml
index 5326cb4575..754f9ada13 100644
--- a/.github/workflows/e2e.yml
+++ b/.github/workflows/e2e.yml
@@ -115,6 +115,7 @@ jobs:
   combineArtifacts:
     needs: e2e
     runs-on: ubuntu-latest
+    if: ${{ always() }}
     steps:
       - name: Download All Artifacts
         uses: actions/download-artifact@v4

From a964af67ec5f1954342cd0b2711b97ee26a7c963 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod 
Date: Fri, 19 Jan 2024 19:04:25 +0530
Subject: [PATCH 431/457] Handle edge cases in E2E

---
 .github/workflows/e2e.yml                   | 38 +++++++++++++++------
 cypress/integration/rendering/debug.spec.js | 12 -------
 2 files changed, 27 insertions(+), 23 deletions(-)
 delete mode 100644 cypress/integration/rendering/debug.spec.js

diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml
index 754f9ada13..90769858e0 100644
--- a/.github/workflows/e2e.yml
+++ b/.github/workflows/e2e.yml
@@ -1,3 +1,9 @@
+# We use github cache to save snapshots between runs.
+# For PRs and MergeQueues, the target commit is used, and for push events, github.event.previous is used.
+# If a snapshot for a given Hash is not found, we checkout that commit, run the tests and cache the snapshots.
+# These are then downloaded before running the E2E, providing the reference snapshots.
+# If there are any errors, the diff image is uploaded to artifacts, and the user is notified.
+
 name: E2E
 
 on:
@@ -9,7 +15,8 @@ permissions:
   contents: read
 
 env:
-  targetHash: ${{ github.event_name == 'pull_request' && github.event.pull_request.base.sha || github.event_name == 'merge_group' && github.event.merge_group.base.sha || github.event.before }}
+  # For PRs and MergeQueues, the target commit is used, and for push events, github.event.previous is used.
+  targetHash: ${{ github.event.pull_request.base.sha || github.event.merge_group.base_sha || github.event.before }}
 
 jobs:
   cache:
@@ -30,6 +37,7 @@ jobs:
           path: ./cypress/snapshots
           key: ${{ runner.os }}-snapshots-${{ env.targetHash }}
 
+      # If a snapshot for a given Hash is not found, we checkout that commit, run the tests and cache the snapshots.
       - name: Switch to base branch
         if: ${{ steps.cache-snapshot.outputs.cache-hit != 'true' }}
         uses: actions/checkout@v4
@@ -44,6 +52,8 @@ jobs:
           start: pnpm run dev
           wait-on: 'http://localhost:9000'
           browser: chrome
+          spec:
+            cypress/integration/rendering/sequencediagram.spec.js
 
   e2e:
     runs-on: ubuntu-latest
@@ -64,6 +74,7 @@ jobs:
         with:
           node-version: ${{ matrix.node-version }}
 
+      # These cached snapshots are downloaded, providing the reference snapshots.
       - name: Cache snapshots
         id: cache-snapshot
         uses: actions/cache/restore@v3
@@ -87,6 +98,8 @@ jobs:
           # e.g. if this action was run from a fork
           record: ${{ secrets.CYPRESS_RECORD_KEY != '' }}
           parallel: ${{ secrets.CYPRESS_RECORD_KEY != '' }}
+          spec:
+            cypress/integration/rendering/sequencediagram.spec.js
         env:
           CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
           VITEST_COVERAGE: true
@@ -104,9 +117,10 @@ jobs:
           verbose: true
           token: 6845cc80-77ee-4e17-85a1-026cd95e0766
 
+      # We upload the artifacts into numbered archives to prevent overwriting
       - name: Upload Artifacts
         uses: actions/upload-artifact@v4
-        if: ${{ failure() && steps.cypress.conclusion == 'failure' }}
+        if: ${{ always() }}
         with:
           name: snapshots-${{ matrix.containers }}
           retention-days: 1
@@ -117,38 +131,40 @@ jobs:
     runs-on: ubuntu-latest
     if: ${{ always() }}
     steps:
+      # Download all snapshot artifacts and merge them into a single folder
       - name: Download All Artifacts
         uses: actions/download-artifact@v4
         with:
           path: snapshots
           pattern: snapshots-*
           merge-multiple: true
-      
+
+      # For successful push events, we save the snapshots cache
       - name: Save snapshots cache
         id: cache-upload
-        if: ${{ github.event_name == 'push' }}
+        if: ${{ github.event_name == 'push' && needs.e2e.result != 'failure' }}
         uses: actions/cache/save@v3
         with:
-          path: |
-            ./cypress/snapshots
-            !./**/__diff_output__/*
+          path: ./snapshots
           key: ${{ runner.os }}-snapshots-${{ github.event.after }}
 
-      - if: ${{ failure() }}
+      - name: Flatten images to a folder
+        if: ${{ needs.e2e.result == 'failure'  }}
         run: |
           mkdir errors
           cd snapshots
           find . -mindepth 2 -type d -name "*__diff_output__*" -exec sh -c 'mv "$0"/*.png ../errors/' {} \;
+
       - name: Upload Error snapshots
-        if: ${{ failure() }}
+        if: ${{ needs.e2e.result == 'failure' }}
         uses: actions/upload-artifact@v4
         id: upload-artifacts
         with:
           name: error-snapshots
           retention-days: 10
           path: errors/
+
       - name: Notify Users
-        if: ${{ failure() }}
+        if: ${{ needs.e2e.result == 'failure' }}
         run: |
           echo "::error title=Visual tests failed::You can view images that failed by downloading the error-snapshots artifact: ${{ steps.upload-artifacts.outputs.artifact-url }}"
-        
diff --git a/cypress/integration/rendering/debug.spec.js b/cypress/integration/rendering/debug.spec.js
deleted file mode 100644
index 56ad0f15f8..0000000000
--- a/cypress/integration/rendering/debug.spec.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import { imgSnapshotTest } from '../../helpers/util.ts';
-
-describe('Flowchart', () => {
-  it('34: testing the label width in percy', () => {
-    imgSnapshotTest(
-      `graph TD
-      A[Christmas]
-      `,
-      { theme: 'forest', fontFamily: '"Noto Sans SC", sans-serif' }
-    );
-  });
-});

From a871a68f3c8bce5419bcd6f04deaeddd0defa473 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod 
Date: Fri, 19 Jan 2024 19:05:06 +0530
Subject: [PATCH 432/457] Remove spec selector

---
 .github/workflows/e2e.yml | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml
index 90769858e0..817635cbf6 100644
--- a/.github/workflows/e2e.yml
+++ b/.github/workflows/e2e.yml
@@ -52,8 +52,6 @@ jobs:
           start: pnpm run dev
           wait-on: 'http://localhost:9000'
           browser: chrome
-          spec:
-            cypress/integration/rendering/sequencediagram.spec.js
 
   e2e:
     runs-on: ubuntu-latest
@@ -98,8 +96,6 @@ jobs:
           # e.g. if this action was run from a fork
           record: ${{ secrets.CYPRESS_RECORD_KEY != '' }}
           parallel: ${{ secrets.CYPRESS_RECORD_KEY != '' }}
-          spec:
-            cypress/integration/rendering/sequencediagram.spec.js
         env:
           CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
           VITEST_COVERAGE: true

From f1fc874da8d4bdef88add516c7e6c046fdb9b755 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod 
Date: Fri, 19 Jan 2024 19:20:39 +0530
Subject: [PATCH 433/457] Debug

---
 .github/workflows/e2e.yml | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml
index 817635cbf6..56bdd30a01 100644
--- a/.github/workflows/e2e.yml
+++ b/.github/workflows/e2e.yml
@@ -16,12 +16,13 @@ permissions:
 
 env:
   # For PRs and MergeQueues, the target commit is used, and for push events, github.event.previous is used.
-  targetHash: ${{ github.event.pull_request.base.sha || github.event.merge_group.base_sha || github.event.before }}
+  targetHash: ${{ github.event_name == 'pull_request' && github.event.pull_request.base.sha || github.event_name == 'merge_group' && github.event.merge_group.base_sha || github.event.before }}
 
 jobs:
   cache:
     runs-on: ubuntu-latest
     steps:
+      - run: echo "${{ github.event }}"
       - uses: actions/checkout@v4
       - uses: pnpm/action-setup@v2
       - name: Setup Node.js

From 279e31bc559caade5d63ce0712273f02a77f244d Mon Sep 17 00:00:00 2001
From: Sidharth Vinod 
Date: Fri, 19 Jan 2024 19:23:13 +0530
Subject: [PATCH 434/457] Debug

---
 .github/workflows/e2e.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml
index 56bdd30a01..674f276727 100644
--- a/.github/workflows/e2e.yml
+++ b/.github/workflows/e2e.yml
@@ -22,7 +22,7 @@ jobs:
   cache:
     runs-on: ubuntu-latest
     steps:
-      - run: echo "${{ github.event }}"
+      - run: echo "${{ toJSON(github) }}"
       - uses: actions/checkout@v4
       - uses: pnpm/action-setup@v2
       - name: Setup Node.js

From f5dd24bce4488cb636f384b949c0ea5583eda860 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod 
Date: Fri, 19 Jan 2024 19:29:45 +0530
Subject: [PATCH 435/457] Remove ::

---
 .github/workflows/e2e.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml
index 674f276727..30c25cb914 100644
--- a/.github/workflows/e2e.yml
+++ b/.github/workflows/e2e.yml
@@ -22,7 +22,7 @@ jobs:
   cache:
     runs-on: ubuntu-latest
     steps:
-      - run: echo "${{ toJSON(github) }}"
+      - run: echo "${{ toJSON(github) }}" | sed 's/::/:/g'
       - uses: actions/checkout@v4
       - uses: pnpm/action-setup@v2
       - name: Setup Node.js

From 3935f6b389e715382c0701c499ca6825fe34b299 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod 
Date: Fri, 19 Jan 2024 19:31:25 +0530
Subject: [PATCH 436/457] Remove ::

---
 .github/workflows/e2e.yml | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml
index 30c25cb914..7d3bd3628f 100644
--- a/.github/workflows/e2e.yml
+++ b/.github/workflows/e2e.yml
@@ -22,7 +22,8 @@ jobs:
   cache:
     runs-on: ubuntu-latest
     steps:
-      - run: echo "${{ toJSON(github) }}" | sed 's/::/:/g'
+      - run: |
+          echo "${{ toJSON(github) }}" | sed 's/::/:/g'
       - uses: actions/checkout@v4
       - uses: pnpm/action-setup@v2
       - name: Setup Node.js

From 8bfb269b373611d3b4884177c47f1c9ed71289ce Mon Sep 17 00:00:00 2001
From: Sidharth Vinod 
Date: Fri, 19 Jan 2024 19:33:59 +0530
Subject: [PATCH 437/457] Remove ::

---
 .github/workflows/e2e.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml
index 7d3bd3628f..aab0e1facd 100644
--- a/.github/workflows/e2e.yml
+++ b/.github/workflows/e2e.yml
@@ -23,7 +23,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - run: |
-          echo "${{ toJSON(github) }}" | sed 's/::/:/g'
+          echo '${{ toJSON(github) }}' | sed 's/::/:/g'
       - uses: actions/checkout@v4
       - uses: pnpm/action-setup@v2
       - name: Setup Node.js

From aadf32ab3edfc48ba48445e828349cb7b74f3be8 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod 
Date: Fri, 19 Jan 2024 19:45:55 +0530
Subject: [PATCH 438/457] Ignore push events on merge queue

---
 .github/workflows/e2e.yml | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml
index aab0e1facd..36ec672a28 100644
--- a/.github/workflows/e2e.yml
+++ b/.github/workflows/e2e.yml
@@ -8,6 +8,8 @@ name: E2E
 
 on:
   push:
+    branches-ignore:
+      - 'gh-readonly-queue/**'
   pull_request:
   merge_group:
 
@@ -16,7 +18,7 @@ permissions:
 
 env:
   # For PRs and MergeQueues, the target commit is used, and for push events, github.event.previous is used.
-  targetHash: ${{ github.event_name == 'pull_request' && github.event.pull_request.base.sha || github.event_name == 'merge_group' && github.event.merge_group.base_sha || github.event.before }}
+  targetHash: ${{ github.event.pull_request.base.sha || github.event.merge_group.base_sha || github.event.before }}
 
 jobs:
   cache:

From d0224b23b0e112c37debff62d685510117e226a5 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod 
Date: Fri, 19 Jan 2024 19:47:42 +0530
Subject: [PATCH 439/457] Cleanup e2e.yml

---
 .github/workflows/e2e.yml | 2 --
 1 file changed, 2 deletions(-)

diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml
index 36ec672a28..c23dc88baf 100644
--- a/.github/workflows/e2e.yml
+++ b/.github/workflows/e2e.yml
@@ -24,8 +24,6 @@ jobs:
   cache:
     runs-on: ubuntu-latest
     steps:
-      - run: |
-          echo '${{ toJSON(github) }}' | sed 's/::/:/g'
       - uses: actions/checkout@v4
       - uses: pnpm/action-setup@v2
       - name: Setup Node.js

From 1f37b6c91bc410c25968f7b7bda87debf966f38a Mon Sep 17 00:00:00 2001
From: Sidharth Vinod 
Date: Fri, 19 Jan 2024 23:28:43 +0530
Subject: [PATCH 440/457] Fix lint

---
 packages/mermaid/src/docs/ecosystem/integrations-community.md | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/mermaid/src/docs/ecosystem/integrations-community.md b/packages/mermaid/src/docs/ecosystem/integrations-community.md
index 5587253661..73c4b9ef0a 100644
--- a/packages/mermaid/src/docs/ecosystem/integrations-community.md
+++ b/packages/mermaid/src/docs/ecosystem/integrations-community.md
@@ -245,4 +245,3 @@ Communication tools and platforms
 - [mermaid-server: Generate diagrams using a HTTP request](https://github.com/TomWright/mermaid-server)
 - [ExDoc](https://github.com/elixir-lang/ex_doc)
   - [Rendering Mermaid graphs](https://github.com/elixir-lang/ex_doc#rendering-mermaid-graphs)
-

From 1e70b3817e3c3fcb414af8c217196d916b0564b7 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod 
Date: Fri, 19 Jan 2024 23:38:27 +0530
Subject: [PATCH 441/457] Use pnpm/action-setup@v2

---
 .github/workflows/update-browserlist.yml | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/.github/workflows/update-browserlist.yml b/.github/workflows/update-browserlist.yml
index 463160256d..7c376e3bdf 100644
--- a/.github/workflows/update-browserlist.yml
+++ b/.github/workflows/update-browserlist.yml
@@ -9,7 +9,8 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
-      - run: npm install pnpm -g && npx update-browserslist-db@latest
+      - uses: pnpm/action-setup@v2
+      - run: npx update-browserslist-db@latest
       - name: Commit changes
         uses: EndBug/add-and-commit@v9
         with:

From 84a18a1858a47f547022922fb30252328f4a77ee Mon Sep 17 00:00:00 2001
From: Sidharth Vinod 
Date: Fri, 19 Jan 2024 23:47:07 +0530
Subject: [PATCH 442/457] Fix Update Browserslist

---
 .github/workflows/update-browserlist.yml | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/.github/workflows/update-browserlist.yml b/.github/workflows/update-browserlist.yml
index 0a83df795d..f4fa2a982f 100644
--- a/.github/workflows/update-browserlist.yml
+++ b/.github/workflows/update-browserlist.yml
@@ -9,10 +9,17 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
-      - run: npx browserslist@latest --update-db
+      - uses: pnpm/action-setup@v2
+      - run: npx update-browserslist-db@latest
       - name: Commit changes
         uses: EndBug/add-and-commit@v9
         with:
           author_name: ${{ github.actor }}
           author_email: ${{ github.actor }}@users.noreply.github.com
           message: 'chore: update browsers list'
+          push: false
+      - name: Create Pull Request
+        uses: peter-evans/create-pull-request@v5
+        with:
+          branch: update-browserslist
+          title: Update Browserslist

From 8fd268d59be6c0bc7d4d25eb5fae6abe6bc9320b Mon Sep 17 00:00:00 2001
From: Vitor Soares Silva 
Date: Fri, 19 Jan 2024 16:10:23 -0300
Subject: [PATCH 443/457] add sequenceDiagram link e2e test

---
 .../rendering/sequencediagram.spec.js         | 28 +++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/cypress/integration/rendering/sequencediagram.spec.js b/cypress/integration/rendering/sequencediagram.spec.js
index 27e03da9c0..10432f057f 100644
--- a/cypress/integration/rendering/sequencediagram.spec.js
+++ b/cypress/integration/rendering/sequencediagram.spec.js
@@ -792,6 +792,34 @@ context('Sequence diagram', () => {
     });
   });
   context('links', () => {
+    it('should support actor links', () => {
+      renderGraph(
+        `
+      sequenceDiagram
+        link Alice: Dashboard @ https://dashboard.contoso.com/alice
+        link Alice: Wiki @ https://wiki.contoso.com/alice
+        link John: Dashboard @ https://dashboard.contoso.com/john
+        link John: Wiki @ https://wiki.contoso.com/john
+        Alice->>John: Hello John
    
+        John-->>Alice: Great

    day!
+      `,
+        { securityLevel: 'loose' }
+      );
+      cy.get('#actor0_popup').should((popupMenu) => {
+        const style = popupMenu.attr('style');
+        expect(style).to.undefined;
+      });
+      cy.get('#root-0').click();
+      cy.get('#actor0_popup').should((popupMenu) => {
+        const style = popupMenu.attr('style');
+        expect(style).to.match(/^display: block;$/);
+      });
+      cy.get('#root-0').click();
+      cy.get('#actor0_popup').should((popupMenu) => {
+        const style = popupMenu.attr('style');
+        expect(style).to.match(/^display: none;$/);
+      });
+    });
     it('should support actor links and properties EXPERIMENTAL: USE WITH CAUTION', () => {
       //Be aware that the syntax for "properties" is likely to be changed.
       imgSnapshotTest(

From 2bbdd15031722cf4689526f48015b36ae1c7e594 Mon Sep 17 00:00:00 2001
From: Reda Al Sulais 
Date: Sat, 20 Jan 2024 13:30:49 +0300
Subject: [PATCH 444/457] docs: fix swimm link

---
 docs/ecosystem/integrations-community.md                      | 2 +-
 packages/mermaid/src/docs/ecosystem/integrations-community.md | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/ecosystem/integrations-community.md b/docs/ecosystem/integrations-community.md
index a9174d8aa9..6ad02f6b69 100644
--- a/docs/ecosystem/integrations-community.md
+++ b/docs/ecosystem/integrations-community.md
@@ -60,7 +60,7 @@ To add an integration to this list, see the [Integrations - create page](./integ
 - [Mermaid Flow Visual Editor](https://www.mermaidflow.app) ✅
 - [Mermerd](https://github.com/KarnerTh/mermerd)
 - [Slab](https://slab.com) ✅
-- [Swimm](https://docs.swimm.io/Features/diagrams-and-charts#mermaid--swimm--up-to-date-diagrams-) ✅
+- [Swimm](https://docs.swimm.io/features/diagrams-and-charts/#mermaid--swimm--up-to-date-diagrams-) ✅
 - [NotesHub](https://noteshub.app) ✅
 - [Notion](https://notion.so) ✅
 - [Observable](https://observablehq.com/@observablehq/mermaid) ✅
diff --git a/packages/mermaid/src/docs/ecosystem/integrations-community.md b/packages/mermaid/src/docs/ecosystem/integrations-community.md
index 73c4b9ef0a..a567e67888 100644
--- a/packages/mermaid/src/docs/ecosystem/integrations-community.md
+++ b/packages/mermaid/src/docs/ecosystem/integrations-community.md
@@ -55,7 +55,7 @@ To add an integration to this list, see the [Integrations - create page](./integ
 - [Mermaid Flow Visual Editor](https://www.mermaidflow.app) ✅
 - [Mermerd](https://github.com/KarnerTh/mermerd)
 - [Slab](https://slab.com) ✅
-- [Swimm](https://docs.swimm.io/Features/diagrams-and-charts#mermaid--swimm--up-to-date-diagrams-) ✅
+- [Swimm](https://docs.swimm.io/features/diagrams-and-charts/#mermaid--swimm--up-to-date-diagrams-) ✅
 - [NotesHub](https://noteshub.app) ✅
 - [Notion](https://notion.so) ✅
 - [Observable](https://observablehq.com/@observablehq/mermaid) ✅

From 4f60a2747256f11902b5dc3bf19d55654205c772 Mon Sep 17 00:00:00 2001
From: Matheus B 
Date: Sat, 20 Jan 2024 20:57:58 -0300
Subject: [PATCH 445/457] Change repetitive values into consts

---
 .../src/diagrams/git/gitGraphRenderer.js      | 40 +++++++++++--------
 1 file changed, 23 insertions(+), 17 deletions(-)

diff --git a/packages/mermaid/src/diagrams/git/gitGraphRenderer.js b/packages/mermaid/src/diagrams/git/gitGraphRenderer.js
index 4790949b57..6124d72c68 100644
--- a/packages/mermaid/src/diagrams/git/gitGraphRenderer.js
+++ b/packages/mermaid/src/diagrams/git/gitGraphRenderer.js
@@ -112,8 +112,11 @@ const drawCommits = (svg, commits, modifyGraph) => {
   });
 
   const isParallelCommits = gitGraphConfig.parallelCommits;
+  const layoutOffset = 10;
+  const commitStep = 40;
   sortedKeys.forEach((key) => {
     const commit = commits[key];
+    const posWithOffset = pos + layoutOffset;
 
     if (isParallelCommits) {
       if (!commit.parents.length) {
@@ -123,12 +126,15 @@ const drawCommits = (svg, commits, modifyGraph) => {
         }
       } else {
         const closestParent = findClosestParent(commit.parents);
-        pos = dir === 'TB' ? commitPos[closestParent].y + 40 : commitPos[closestParent].x + 40;
+        pos =
+          dir === 'TB'
+            ? commitPos[closestParent].y + commitStep
+            : commitPos[closestParent].x + commitStep;
       }
     }
 
-    const y = dir === 'TB' ? pos + 10 : branchPos[commit.branch].pos;
-    const x = dir === 'TB' ? branchPos[commit.branch].pos : pos + 10;
+    const y = dir === 'TB' ? posWithOffset : branchPos[commit.branch].pos;
+    const x = dir === 'TB' ? branchPos[commit.branch].pos : posWithOffset;
 
     // Don't draw the commits now but calculate the positioning which is used by the branch lines etc.
     if (modifyGraph) {
@@ -253,9 +259,9 @@ const drawCommits = (svg, commits, modifyGraph) => {
       }
     }
     if (dir === 'TB') {
-      commitPos[commit.id] = { x: x, y: pos + 10 };
+      commitPos[commit.id] = { x: x, y: posWithOffset };
     } else {
-      commitPos[commit.id] = { x: pos + 10, y: y };
+      commitPos[commit.id] = { x: posWithOffset, y: y };
     }
 
     // The first iteration over the commits are for positioning purposes, this
@@ -284,7 +290,7 @@ const drawCommits = (svg, commits, modifyGraph) => {
 
         // Now we have the label, lets position the background
         labelBkg
-          .attr('x', pos + 10 - bbox.width / 2 - py)
+          .attr('x', posWithOffset - bbox.width / 2 - py)
           .attr('y', y + 13.5)
           .attr('width', bbox.width + 2 * py)
           .attr('height', bbox.height + 2 * py);
@@ -295,7 +301,7 @@ const drawCommits = (svg, commits, modifyGraph) => {
         }
 
         if (dir !== 'TB') {
-          text.attr('x', pos + 10 - bbox.width / 2);
+          text.attr('x', posWithOffset - bbox.width / 2);
         }
         if (gitGraphConfig.rotateCommitLabel) {
           if (dir === 'TB') {
@@ -321,7 +327,7 @@ const drawCommits = (svg, commits, modifyGraph) => {
           .attr('class', 'tag-label')
           .text(commit.tag);
         let tagBbox = tag.node().getBBox();
-        tag.attr('x', pos + 10 - tagBbox.width / 2);
+        tag.attr('x', posWithOffset - tagBbox.width / 2);
 
         const h2 = tagBbox.height / 2;
         const ly = y - 19.2;
@@ -330,10 +336,10 @@ const drawCommits = (svg, commits, modifyGraph) => {
           `
           ${pos - tagBbox.width / 2 - px / 2},${ly + py}
           ${pos - tagBbox.width / 2 - px / 2},${ly - py}
-          ${pos + 10 - tagBbox.width / 2 - px},${ly - h2 - py}
-          ${pos + 10 + tagBbox.width / 2 + px},${ly - h2 - py}
-          ${pos + 10 + tagBbox.width / 2 + px},${ly + h2 + py}
-          ${pos + 10 - tagBbox.width / 2 - px},${ly + h2 + py}`
+          ${posWithOffset - tagBbox.width / 2 - px},${ly - h2 - py}
+          ${posWithOffset + tagBbox.width / 2 + px},${ly - h2 - py}
+          ${posWithOffset + tagBbox.width / 2 + px},${ly + h2 + py}
+          ${posWithOffset - tagBbox.width / 2 - px},${ly + h2 + py}`
         );
 
         hole
@@ -350,10 +356,10 @@ const drawCommits = (svg, commits, modifyGraph) => {
               `
             ${x},${pos + py}
             ${x},${pos - py}
-            ${x + 10},${pos - h2 - py}
-            ${x + 10 + tagBbox.width + px},${pos - h2 - py}
-            ${x + 10 + tagBbox.width + px},${pos + h2 + py}
-            ${x + 10},${pos + h2 + py}`
+            ${x + layoutOffset},${pos - h2 - py}
+            ${x + layoutOffset + tagBbox.width + px},${pos - h2 - py}
+            ${x + layoutOffset + tagBbox.width + px},${pos + h2 + py}
+            ${x + layoutOffset},${pos + h2 + py}`
             )
             .attr('transform', 'translate(12,12) rotate(45, ' + x + ',' + pos + ')');
           hole
@@ -367,7 +373,7 @@ const drawCommits = (svg, commits, modifyGraph) => {
         }
       }
     }
-    pos += 50;
+    pos += commitStep + layoutOffset;
     if (pos > maxPos) {
       maxPos = pos;
     }

From e668698b5c5510c2f1ff9a6cc875d0dbdf413de2 Mon Sep 17 00:00:00 2001
From: Matheus B 
Date: Mon, 22 Jan 2024 19:56:25 -0300
Subject: [PATCH 446/457] Reposition const declaration to ideal place

---
 packages/mermaid/src/diagrams/git/gitGraphRenderer.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/mermaid/src/diagrams/git/gitGraphRenderer.js b/packages/mermaid/src/diagrams/git/gitGraphRenderer.js
index 6124d72c68..cefbe89c14 100644
--- a/packages/mermaid/src/diagrams/git/gitGraphRenderer.js
+++ b/packages/mermaid/src/diagrams/git/gitGraphRenderer.js
@@ -116,7 +116,6 @@ const drawCommits = (svg, commits, modifyGraph) => {
   const commitStep = 40;
   sortedKeys.forEach((key) => {
     const commit = commits[key];
-    const posWithOffset = pos + layoutOffset;
 
     if (isParallelCommits) {
       if (!commit.parents.length) {
@@ -133,6 +132,7 @@ const drawCommits = (svg, commits, modifyGraph) => {
       }
     }
 
+    const posWithOffset = pos + layoutOffset;
     const y = dir === 'TB' ? posWithOffset : branchPos[commit.branch].pos;
     const x = dir === 'TB' ? branchPos[commit.branch].pos : posWithOffset;
 

From 81825f22f508eee53a9ab809361935d52bc3caf0 Mon Sep 17 00:00:00 2001
From: Matheus B 
Date: Mon, 22 Jan 2024 20:09:20 -0300
Subject: [PATCH 447/457] Swap condition blocks to avoid using negation

---
 .../mermaid/src/diagrams/git/gitGraphRenderer.js     | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/mermaid/src/diagrams/git/gitGraphRenderer.js b/packages/mermaid/src/diagrams/git/gitGraphRenderer.js
index cefbe89c14..84b8f41a16 100644
--- a/packages/mermaid/src/diagrams/git/gitGraphRenderer.js
+++ b/packages/mermaid/src/diagrams/git/gitGraphRenderer.js
@@ -118,17 +118,17 @@ const drawCommits = (svg, commits, modifyGraph) => {
     const commit = commits[key];
 
     if (isParallelCommits) {
-      if (!commit.parents.length) {
-        pos = 0;
-        if (dir === 'TB') {
-          pos = 30;
-        }
-      } else {
+      if (commit.parents.length) {
         const closestParent = findClosestParent(commit.parents);
         pos =
           dir === 'TB'
             ? commitPos[closestParent].y + commitStep
             : commitPos[closestParent].x + commitStep;
+      } else {
+        pos = 0;
+        if (dir === 'TB') {
+          pos = 30;
+        }
       }
     }
 

From 8fad1f55e25cf4e8ce1d893a268a6ea2fcf0b778 Mon Sep 17 00:00:00 2001
From: Oleg A 
Date: Tue, 23 Jan 2024 10:56:44 +0300
Subject: [PATCH 448/457] docs: move community to Discord

---
 .github/ISSUE_TEMPLATE/config.yml                           | 6 +++---
 .github/lychee.toml                                         | 4 ++--
 README.md                                                   | 4 ++--
 README.zh-CN.md                                             | 4 ++--
 docs/community/security.md                                  | 2 +-
 docs/ecosystem/integrations-create.md                       | 4 ++--
 docs/intro/index.md                                         | 2 +-
 .../mermaid/src/docs/.vitepress/components/HomePage.vue     | 2 +-
 packages/mermaid/src/docs/.vitepress/config.ts              | 4 ++--
 packages/mermaid/src/docs/community/security.md             | 2 +-
 packages/mermaid/src/docs/ecosystem/integrations-create.md  | 4 ++--
 packages/mermaid/src/docs/intro/index.md                    | 2 +-
 12 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml
index 7e0c78ff1e..fa15f39e1c 100644
--- a/.github/ISSUE_TEMPLATE/config.yml
+++ b/.github/ISSUE_TEMPLATE/config.yml
@@ -3,9 +3,9 @@ contact_links:
   - name: GitHub Discussions
     url: https://github.com/mermaid-js/mermaid/discussions
     about: Ask the Community questions or share your own graphs in our discussions.
-  - name: Slack
-    url: https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE
-    about: Join our Community on Slack for Help and a casual chat.
+  - name: Discord
+    url: https://discord.gg/wwtabKgp8y
+    about: Join our Community on Discord for Help and a casual chat.
   - name: Documentation
     url: https://mermaid.js.org
     about: Read our documentation for all that Mermaid.js can offer.
diff --git a/.github/lychee.toml b/.github/lychee.toml
index b13e536161..4af304a990 100644
--- a/.github/lychee.toml
+++ b/.github/lychee.toml
@@ -34,8 +34,8 @@ exclude = [
 # Don't check files that are generated during the build via `pnpm docs:code`
 'packages/mermaid/src/docs/config/setup/*',
 
-# Ignore slack invite
-"https://join.slack.com/"
+# Ignore Discord invite
+"https://discord.gg"
 ]
 
 # Exclude all private IPs from checking.
diff --git a/README.md b/README.md
index cf21fdb8e6..f1661e27ff 100644
--- a/README.md
+++ b/README.md
@@ -15,7 +15,7 @@ Generate diagrams from markdown-like text.
 Live Editor!
 
    
 
    
- 📖 Documentation | 🚀 Getting Started | 🌐 CDN | 🙌 Join Us
+ 📖 Documentation | 🚀 Getting Started | 🌐 CDN | 🙌 Join Us
 
    
 
    
 简体中文
@@ -33,7 +33,7 @@ Try Live Editor previews of future releases: 
diff --git a/README.zh-CN.md b/README.zh-CN.md
index 98975ea331..c9d558393b 100644
--- a/README.zh-CN.md
+++ b/README.zh-CN.md
@@ -15,7 +15,7 @@ Mermaid
 实时编辑器!
 
    
 
    
- 📖 文档 | 🚀 入门 | 🌐 CDN | 🙌 加入我们
+ 📖 文档 | 🚀 入门 | 🌐 CDN | 🙌 加入我们
 
    
 
    
 English
@@ -34,7 +34,7 @@ Mermaid
 [![Coverage Status](https://codecov.io/github/mermaid-js/mermaid/branch/develop/graph/badge.svg)](https://app.codecov.io/github/mermaid-js/mermaid/tree/develop)
 [![CDN Status](https://img.shields.io/jsdelivr/npm/hm/mermaid)](https://www.jsdelivr.com/package/npm/mermaid)
 [![NPM Downloads](https://img.shields.io/npm/dm/mermaid)](https://www.npmjs.com/package/mermaid)
-[![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE)
+[![Join our Discord!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=discord&label=discord)](https://discord.gg/wwtabKgp8y)
 [![Twitter Follow](https://img.shields.io/badge/Social-mermaidjs__-blue?style=social&logo=X)](https://twitter.com/mermaidjs_)
 
 
diff --git a/docs/community/security.md b/docs/community/security.md
index 07adbfbf8b..e456adcd76 100644
--- a/docs/community/security.md
+++ b/docs/community/security.md
@@ -16,7 +16,7 @@ We aim to reply within three working days, probably much sooner.
 
 You should expect a close collaboration as we work to resolve the issue you have reported. Please reach out to  again if you do not receive prompt attention and regular updates.
 
-You may also reach out to the team via our public Slack chat channels; however, please make sure to e-mail  when reporting an issue, and avoid revealing information about vulnerabilities in public as that could that could put users at risk.
+You may also reach out to the team via our public Discord chat channels; however, please make sure to e-mail  when reporting an issue, and avoid revealing information about vulnerabilities in public as that could that could put users at risk.
 
 ## Best practices
 
diff --git a/docs/ecosystem/integrations-create.md b/docs/ecosystem/integrations-create.md
index 3dba1dafba..7643c88989 100644
--- a/docs/ecosystem/integrations-create.md
+++ b/docs/ecosystem/integrations-create.md
@@ -22,9 +22,9 @@ Currently pending [IANA](https://www.iana.org/) recognition.
 
 ## Showcase
 
-### Mermaid Slack workspace
+### Mermaid Discord workspace
 
-We would love to see what you create with Mermaid. Please share your creations with us in our [Slack](https://join.slack.com/t/mermaid-talk/shared_invite/zt-22p2r8p9y-qiyP1H38GjFQ6S6jbBkOxQ) workspace [#community-showcase](https://mermaid-talk.slack.com/archives/C05NK37LT40) channel.
+We would love to see what you create with Mermaid. Please share your creations with us in our [Discord](https://discord.gg/wwtabKgp8y) server [#showcase](https://discord.com/channels/1079455296289788015/1079502635054399649) channel.
 
 ### Add to Mermaid Ecosystem
 
diff --git a/docs/intro/index.md b/docs/intro/index.md
index 5a77fa5874..d038cde534 100644
--- a/docs/intro/index.md
+++ b/docs/intro/index.md
@@ -22,7 +22,7 @@ It is a JavaScript based diagramming and charting tool that renders Markdown-ins
 [![Coverage Status](https://coveralls.io/repos/github/mermaid-js/mermaid/badge.svg?branch=master)](https://coveralls.io/github/mermaid-js/mermaid?branch=master)
 [![CDN Status](https://img.shields.io/jsdelivr/npm/hm/mermaid)](https://www.jsdelivr.com/package/npm/mermaid)
 [![NPM](https://img.shields.io/npm/dm/mermaid)](https://www.npmjs.com/package/mermaid)
-[![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE)
+[![Join our Discord!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=discord&label=discord)](https://discord.gg/wwtabKgp8y)
 [![Twitter Follow](https://img.shields.io/twitter/follow/mermaidjs_?style=social)](https://twitter.com/mermaidjs_)
 
 
    
diff --git a/packages/mermaid/src/docs/.vitepress/components/HomePage.vue b/packages/mermaid/src/docs/.vitepress/components/HomePage.vue
index b6998f2499..9bc47ba0ce 100644
--- a/packages/mermaid/src/docs/.vitepress/components/HomePage.vue
+++ b/packages/mermaid/src/docs/.vitepress/components/HomePage.vue
@@ -17,7 +17,7 @@ import { teamMembers } from '../contributors';
             
             
    
             Join the community
diff --git a/packages/mermaid/src/docs/.vitepress/config.ts b/packages/mermaid/src/docs/.vitepress/config.ts
index f5647e3c37..7ce9124a87 100644
--- a/packages/mermaid/src/docs/.vitepress/config.ts
+++ b/packages/mermaid/src/docs/.vitepress/config.ts
@@ -52,8 +52,8 @@ export default defineConfig({
     socialLinks: [
       { icon: 'github', link: 'https://github.com/mermaid-js/mermaid' },
       {
-        icon: 'slack',
-        link: 'https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE',
+        icon: 'discord',
+        link: 'https://discord.gg/wwtabKgp8y',
       },
       {
         icon: {
diff --git a/packages/mermaid/src/docs/community/security.md b/packages/mermaid/src/docs/community/security.md
index e7a0db6edb..a84a106ab3 100644
--- a/packages/mermaid/src/docs/community/security.md
+++ b/packages/mermaid/src/docs/community/security.md
@@ -10,7 +10,7 @@ We aim to reply within three working days, probably much sooner.
 
 You should expect a close collaboration as we work to resolve the issue you have reported. Please reach out to  again if you do not receive prompt attention and regular updates.
 
-You may also reach out to the team via our public Slack chat channels; however, please make sure to e-mail  when reporting an issue, and avoid revealing information about vulnerabilities in public as that could that could put users at risk.
+You may also reach out to the team via our public Discord chat channels; however, please make sure to e-mail  when reporting an issue, and avoid revealing information about vulnerabilities in public as that could that could put users at risk.
 
 ## Best practices
 
diff --git a/packages/mermaid/src/docs/ecosystem/integrations-create.md b/packages/mermaid/src/docs/ecosystem/integrations-create.md
index 421240729c..c47ba30da4 100644
--- a/packages/mermaid/src/docs/ecosystem/integrations-create.md
+++ b/packages/mermaid/src/docs/ecosystem/integrations-create.md
@@ -20,9 +20,9 @@ Currently pending [IANA](https://www.iana.org/) recognition.
 
 ## Showcase
 
-### Mermaid Slack workspace
+### Mermaid Discord workspace
 
-We would love to see what you create with Mermaid. Please share your creations with us in our [Slack](https://join.slack.com/t/mermaid-talk/shared_invite/zt-22p2r8p9y-qiyP1H38GjFQ6S6jbBkOxQ) workspace [#community-showcase](https://mermaid-talk.slack.com/archives/C05NK37LT40) channel.
+We would love to see what you create with Mermaid. Please share your creations with us in our [Discord](https://discord.gg/wwtabKgp8y) server [#showcase](https://discord.com/channels/1079455296289788015/1079502635054399649) channel.
 
 ### Add to Mermaid Ecosystem
 
diff --git a/packages/mermaid/src/docs/intro/index.md b/packages/mermaid/src/docs/intro/index.md
index 535ee3a3dc..bf5866755b 100644
--- a/packages/mermaid/src/docs/intro/index.md
+++ b/packages/mermaid/src/docs/intro/index.md
@@ -16,7 +16,7 @@ It is a JavaScript based diagramming and charting tool that renders Markdown-ins
 [![Coverage Status](https://coveralls.io/repos/github/mermaid-js/mermaid/badge.svg?branch=master)](https://coveralls.io/github/mermaid-js/mermaid?branch=master)
 [![CDN Status](https://img.shields.io/jsdelivr/npm/hm/mermaid)](https://www.jsdelivr.com/package/npm/mermaid)
 [![NPM](https://img.shields.io/npm/dm/mermaid)](https://www.npmjs.com/package/mermaid)
-[![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE)
+[![Join our Discord!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=discord&label=discord)](https://discord.gg/wwtabKgp8y)
 [![Twitter Follow](https://img.shields.io/twitter/follow/mermaidjs_?style=social)](https://twitter.com/mermaidjs_)
 
 
    

From 427bcaa3f6d517d476cc1a22e3de950a25e3d1a2 Mon Sep 17 00:00:00 2001
From: Oleg A 
Date: Tue, 23 Jan 2024 12:20:56 +0300
Subject: [PATCH 449/457] docs: fix lint

---
 .../mermaid/src/docs/.vitepress/components/HomePage.vue     | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/packages/mermaid/src/docs/.vitepress/components/HomePage.vue b/packages/mermaid/src/docs/.vitepress/components/HomePage.vue
index 9bc47ba0ce..c493ee30a5 100644
--- a/packages/mermaid/src/docs/.vitepress/components/HomePage.vue
+++ b/packages/mermaid/src/docs/.vitepress/components/HomePage.vue
@@ -16,11 +16,7 @@ import { teamMembers } from '../contributors';
           
    
             
             
    
-            Join the community
+            Join the community
             and get involved!
           
    
         
    

From 493f238319ffcebc10570a390d2bbacc121eb715 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod 
Date: Tue, 23 Jan 2024 20:28:11 +0530
Subject: [PATCH 450/457] Fix applitools

---
 applitools.config.js | 19 -------------------
 cypress.config.cjs   | 32 --------------------------------
 cypress.config.ts    | 30 ++++++++++++++++++++++++++++++
 3 files changed, 30 insertions(+), 51 deletions(-)
 delete mode 100644 applitools.config.js
 delete mode 100644 cypress.config.cjs
 create mode 100644 cypress.config.ts

diff --git a/applitools.config.js b/applitools.config.js
deleted file mode 100644
index 4cf02220ac..0000000000
--- a/applitools.config.js
+++ /dev/null
@@ -1,19 +0,0 @@
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const { defineConfig } = require('cypress');
-
-module.exports = defineConfig({
-  testConcurrency: 1,
-  browser: [
-    // Add browsers with different viewports
-    //   { width: 800, height: 600, name: 'chrome' },
-    //   { width: 700, height: 500, name: 'firefox' },
-    //   { width: 1600, height: 1200, name: 'ie11' },
-    //   { width: 1024, height: 768, name: 'edgechromium' },
-    //   { width: 800, height: 600, name: 'safari' },
-    //   // Add mobile emulation devices in Portrait mode
-    //   { deviceName: 'iPhone X', screenOrientation: 'portrait' },
-    //   { deviceName: 'Pixel 2', screenOrientation: 'portrait' },
-  ],
-  // set batch name to the configuration
-  // batchName: `Mermaid ${process.env.APPLI_BRANCH ?? "'no APPLI_BRANCH set'"}`,
-});
diff --git a/cypress.config.cjs b/cypress.config.cjs
deleted file mode 100644
index 33633920ac..0000000000
--- a/cypress.config.cjs
+++ /dev/null
@@ -1,32 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-
-const { defineConfig } = require('cypress');
-const { addMatchImageSnapshotPlugin } = require('cypress-image-snapshot/plugin');
-const coverage = require('@cypress/code-coverage/task');
-
-module.exports = defineConfig({
-  projectId: 'n2sma2',
-  viewportWidth: 1440,
-  viewportHeight: 1024,
-  e2e: {
-    specPattern: 'cypress/integration/**/*.{js,ts}',
-    setupNodeEvents(on, config) {
-      coverage(on, config);
-      on('before:browser:launch', (browser = {}, launchOptions) => {
-        if (browser.name === 'chrome' && browser.isHeadless) {
-          launchOptions.args.push('--window-size=1440,1024', '--force-device-scale-factor=1');
-        }
-        return launchOptions;
-      });
-      addMatchImageSnapshotPlugin(on, config);
-      // copy any needed variables from process.env to config.env
-      config.env.useAppli = process.env.USE_APPLI ? true : false;
-
-      // do not forget to return the changed config object!
-      return config;
-    },
-  },
-  video: false,
-});
-
-require('@applitools/eyes-cypress')(module);
diff --git a/cypress.config.ts b/cypress.config.ts
new file mode 100644
index 0000000000..4182d92a87
--- /dev/null
+++ b/cypress.config.ts
@@ -0,0 +1,30 @@
+import { defineConfig } from 'cypress';
+import { addMatchImageSnapshotPlugin } from 'cypress-image-snapshot/plugin';
+import coverage from '@cypress/code-coverage/task';
+import eyesPlugin from '@applitools/eyes-cypress';
+export default eyesPlugin(
+  defineConfig({
+    projectId: 'n2sma2',
+    viewportWidth: 1440,
+    viewportHeight: 1024,
+    e2e: {
+      specPattern: 'cypress/integration/**/*.{js,ts}',
+      setupNodeEvents(on, config) {
+        coverage(on, config);
+        on('before:browser:launch', (browser, launchOptions) => {
+          if (browser.name === 'chrome' && browser.isHeadless) {
+            launchOptions.args.push('--window-size=1440,1024', '--force-device-scale-factor=1');
+          }
+          return launchOptions;
+        });
+        addMatchImageSnapshotPlugin(on, config);
+        // copy any needed variables from process.env to config.env
+        config.env.useAppli = process.env.USE_APPLI ? true : false;
+
+        // do not forget to return the changed config object!
+        return config;
+      },
+    },
+    video: false,
+  })
+);

From 5c6c8d113562ea99e3d8445310a42fc3134610c7 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod 
Date: Tue, 23 Jan 2024 20:36:29 +0530
Subject: [PATCH 451/457] Update cypress

---
 package.json   |   6 +-
 pnpm-lock.yaml | 501 +++++++++++++++++--------------------------------
 2 files changed, 170 insertions(+), 337 deletions(-)

diff --git a/package.json b/package.json
index a60f6f67f0..441484218d 100644
--- a/package.json
+++ b/package.json
@@ -61,11 +61,11 @@
     ]
   },
   "devDependencies": {
-    "@applitools/eyes-cypress": "^3.33.1",
+    "@applitools/eyes-cypress": "^3.40.6",
     "@commitlint/cli": "^17.6.1",
     "@commitlint/config-conventional": "^17.6.1",
     "@cspell/eslint-plugin": "^6.31.1",
-    "@cypress/code-coverage": "^3.10.7",
+    "@cypress/code-coverage": "^3.12.18",
     "@rollup/plugin-typescript": "^11.1.1",
     "@types/cors": "^2.8.13",
     "@types/eslint": "^8.37.0",
@@ -85,7 +85,7 @@
     "ajv": "^8.12.0",
     "concurrently": "^8.0.1",
     "cors": "^2.8.5",
-    "cypress": "^12.10.0",
+    "cypress": "^12.17.4",
     "cypress-image-snapshot": "^4.0.1",
     "esbuild": "^0.19.0",
     "eslint": "^8.47.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2484f63123..5d950edefc 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -9,8 +9,8 @@ importers:
   .:
     devDependencies:
       '@applitools/eyes-cypress':
-        specifier: ^3.33.1
-        version: 3.36.2(typescript@5.1.6)
+        specifier: ^3.40.6
+        version: 3.40.6(typescript@5.1.6)
       '@commitlint/cli':
         specifier: ^17.6.1
         version: 17.7.1
@@ -21,8 +21,8 @@ importers:
         specifier: ^6.31.1
         version: 6.31.3
       '@cypress/code-coverage':
-        specifier: ^3.10.7
-        version: 3.11.0(@babel/core@7.23.5)(@babel/preset-env@7.22.10)(babel-loader@9.1.3)(cypress@12.17.3)(webpack@5.88.2)
+        specifier: ^3.12.18
+        version: 3.12.18(@babel/core@7.23.5)(@babel/preset-env@7.22.10)(babel-loader@9.1.3)(cypress@12.17.4)(webpack@5.88.2)
       '@rollup/plugin-typescript':
         specifier: ^11.1.1
         version: 11.1.2(typescript@5.1.6)
@@ -81,11 +81,11 @@ importers:
         specifier: ^2.8.5
         version: 2.8.5
       cypress:
-        specifier: ^12.10.0
-        version: 12.17.3
+        specifier: ^12.17.4
+        version: 12.17.4
       cypress-image-snapshot:
         specifier: ^4.0.1
-        version: 4.0.1(cypress@12.17.3)(jest@29.6.2)
+        version: 4.0.1(cypress@12.17.4)(jest@29.6.2)
       esbuild:
         specifier: ^0.19.0
         version: 0.19.0
@@ -714,110 +714,105 @@ packages:
       leven: 3.1.0
     dev: true
 
-  /@applitools/core-base@1.5.0:
-    resolution: {integrity: sha512-fYK8a4GH0oTmdYYGx8rYCWjl6VH6Mt4iAukhOU6l502rBYAF8mChmwyTxXu8t6oh6ejX3YQ2I+WcAf2q9XIYvg==}
+  /@applitools/core-base@1.9.0:
+    resolution: {integrity: sha512-vicerOYUzDycn0Bf41FmLvGPBwuiTHP5EW7LqQowa38DAgXZLljoLo0IS68HV22HlMHHbzoRglMK3CPAGuNaqA==}
     engines: {node: '>=12.13.0'}
     dependencies:
-      '@applitools/image': 1.1.2
-      '@applitools/logger': 2.0.7
-      '@applitools/req': 1.5.2
-      '@applitools/utils': 1.5.0
+      '@applitools/image': 1.1.9
+      '@applitools/logger': 2.0.14
+      '@applitools/req': 1.6.4
+      '@applitools/utils': 1.7.0
       abort-controller: 3.0.0
       throat: 6.0.2
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@applitools/core@3.9.0(typescript@5.1.6):
-    resolution: {integrity: sha512-fKea8ew6iyLhZskUtngcyCdlJ59Nrb+8R9fU6Y6fXT0xMBQESkU1r9Z+Dt3XUL/CzRE9NW4DWenhd52EFApxYg==}
+  /@applitools/core@4.6.0(typescript@5.1.6):
+    resolution: {integrity: sha512-YLxg4TnIEdYPTOQpeqCbjUKfJBDfjKqwieMVnLKp7Loxwvfh16C4SvsCzLSLHyqfPgsE+zRdt6uoIK0uVWM94g==}
     engines: {node: '>=12.13.0'}
     hasBin: true
     dependencies:
-      '@applitools/core-base': 1.5.0
-      '@applitools/dom-capture': 11.2.2
-      '@applitools/dom-snapshot': 4.7.10
-      '@applitools/driver': 1.13.4
-      '@applitools/ec-client': 1.7.4(typescript@5.1.6)
-      '@applitools/logger': 2.0.7
-      '@applitools/nml-client': 1.5.7
-      '@applitools/req': 1.5.2
-      '@applitools/screenshoter': 3.8.7
-      '@applitools/snippets': 2.4.22
-      '@applitools/socket': 1.1.7
-      '@applitools/spec-driver-webdriver': 1.0.41(webdriver@7.30.0)
-      '@applitools/ufg-client': 1.7.0
-      '@applitools/utils': 1.5.0
+      '@applitools/core-base': 1.9.0
+      '@applitools/dom-capture': 11.2.5
+      '@applitools/dom-snapshot': 4.7.16
+      '@applitools/driver': 1.16.1
+      '@applitools/ec-client': 1.7.22(typescript@5.1.6)
+      '@applitools/logger': 2.0.14
+      '@applitools/nml-client': 1.6.4
+      '@applitools/req': 1.6.4
+      '@applitools/screenshoter': 3.8.20
+      '@applitools/snippets': 2.4.24
+      '@applitools/socket': 1.1.14
+      '@applitools/spec-driver-webdriver': 1.0.54(webdriver@7.31.1)
+      '@applitools/ufg-client': 1.9.9
+      '@applitools/utils': 1.7.0
       '@types/ws': 8.5.5
       abort-controller: 3.0.0
       chalk: 4.1.2
       node-fetch: 2.6.7
-      webdriver: 7.30.0(typescript@5.1.6)
+      semver: 7.5.4
+      webdriver: 7.31.1(typescript@5.1.6)
       ws: 8.13.0
       yargs: 17.7.2
     transitivePeerDependencies:
       - bufferutil
-      - canvas
       - encoding
       - supports-color
       - typescript
       - utf-8-validate
     dev: true
 
-  /@applitools/dom-capture@11.2.2:
-    resolution: {integrity: sha512-omSH+c8+ij/mUPKVwRp7ulCOz33EHMnG8Q3s7XuwaB9m04onEAg82/25otOrntqMKmO2doGWN3E97qUstZJiPQ==}
-    engines: {node: '>=8.9.0'}
+  /@applitools/dom-capture@11.2.5:
+    resolution: {integrity: sha512-bjVduGCBOdDyGSkXs8sH47wRpuwBt6f1FvzbATumIFp0V6xGAB1ehpO+j3Ss1SajwlDl8WQkyS6/85nTFyW3eA==}
+    engines: {node: '>=12.13.0'}
     dependencies:
-      '@applitools/dom-shared': 1.0.5
+      '@applitools/dom-shared': 1.0.12
       '@applitools/functional-commons': 1.6.0
     dev: true
 
-  /@applitools/dom-shared@1.0.10:
-    resolution: {integrity: sha512-1k0CUQRm+38n6aTg/8IIppndYPDJLc/dU8Regbi/miP3xZmOG4Wwd5fBiu/MI5lgQm6RZU+at18lpCLFwU+Nng==}
-    engines: {node: '>=8.9.0'}
-    dev: true
-
-  /@applitools/dom-shared@1.0.5:
-    resolution: {integrity: sha512-O2zgnnqVi3/Atq7EQjURLa73XNaDFJCj8wHht6WQtxIv1EWYnPutNTmnJSKwK7FnbJAg65OVjZylcz4EezyYZA==}
-    engines: {node: '>=8.9.0'}
+  /@applitools/dom-shared@1.0.12:
+    resolution: {integrity: sha512-GFyVHOUFjaS2WhUPjaELn1yBAK9hmRqv031RRQjYkf+3aD9GfzKHj/ZUVcSsZydid+0VAtHVQFwZGH79bGhd7w==}
+    engines: {node: '>=12.13.0'}
     dev: true
 
-  /@applitools/dom-snapshot@4.7.10:
-    resolution: {integrity: sha512-QhX0p6irvQE48eeauNHIfEm76L8QY8mDO8Tk4YOzzBRKcGpKphQUR/5GRCR9S3jx5wwJAwjF/aMW/W7Cwdaztw==}
-    engines: {node: '>=8.9.0'}
+  /@applitools/dom-snapshot@4.7.16:
+    resolution: {integrity: sha512-GXWrMOkpHlnpo0tonhxfmDFOiCaT//ZDexB9vGKLgBBF0QDFpdy9BgvasLvy8I0PuVegXsgJbZS3gS053N7SHQ==}
+    engines: {node: '>=12.13.0'}
     dependencies:
-      '@applitools/dom-shared': 1.0.10
+      '@applitools/dom-shared': 1.0.12
       '@applitools/functional-commons': 1.6.0
       css-tree: 2.3.1
       pako: 1.0.11
     dev: true
 
-  /@applitools/driver@1.13.4:
-    resolution: {integrity: sha512-LdATkjMoTZKUDHmuIfV0uh0ZiRe+yNNIehTqmjV6LnQrNvm73ddzF2Tn+LM8Vg/CflwFhw+TVKPaywTmi35wUg==}
+  /@applitools/driver@1.16.1:
+    resolution: {integrity: sha512-DfSbcKopOIPl1Wfet3Uib2bDSl64Wh51772MPM7A/xrwJrLOY5NvfT71PqMIQd4eZAd6k5hRg5gbGL5zTzktLQ==}
     engines: {node: '>=12.13.0'}
     dependencies:
-      '@applitools/logger': 2.0.7
-      '@applitools/snippets': 2.4.22
-      '@applitools/utils': 1.5.0
+      '@applitools/logger': 2.0.14
+      '@applitools/snippets': 2.4.24
+      '@applitools/utils': 1.7.0
       semver: 7.5.4
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@applitools/ec-client@1.7.4(typescript@5.1.6):
-    resolution: {integrity: sha512-vFY5O9WXQ905hUcw4ot1BuKAAFq6F+hyQfX/obsQsUPUvJXqHhiFjMiI/x3cyrPr40EVLQM8edZCa71m4k2WyQ==}
+  /@applitools/ec-client@1.7.22(typescript@5.1.6):
+    resolution: {integrity: sha512-zhkYIW8bUpwc+TmvQyxL12kIt2TnAwB30XHke1ApmcPxGk9P8lfjm/AzwnKHqDBJxN2V/TSUfuRvseZq5b4TRA==}
     engines: {node: '>=12.13.0'}
     hasBin: true
     dependencies:
-      '@applitools/core-base': 1.5.0
-      '@applitools/driver': 1.13.4
-      '@applitools/logger': 2.0.7
-      '@applitools/req': 1.5.2
-      '@applitools/socket': 1.1.7
-      '@applitools/spec-driver-webdriver': 1.0.41(webdriver@7.30.0)
-      '@applitools/tunnel-client': 1.1.3
-      '@applitools/utils': 1.5.0
+      '@applitools/core-base': 1.9.0
+      '@applitools/driver': 1.16.1
+      '@applitools/logger': 2.0.14
+      '@applitools/req': 1.6.4
+      '@applitools/socket': 1.1.14
+      '@applitools/spec-driver-webdriver': 1.0.54(webdriver@7.31.1)
+      '@applitools/tunnel-client': 1.4.0
+      '@applitools/utils': 1.7.0
       abort-controller: 3.0.0
-      webdriver: 7.30.0(typescript@5.1.6)
+      webdriver: 7.31.1(typescript@5.1.6)
       yargs: 17.7.2
     transitivePeerDependencies:
       - supports-color
@@ -859,40 +854,38 @@ packages:
       - supports-color
     dev: true
 
-  /@applitools/eyes-cypress@3.36.2(typescript@5.1.6):
-    resolution: {integrity: sha512-GA1KP7i3Zr7sbc8yscw7fay1XbQ46LxEAH4dLqjJhOmvvpZuDlmgRyVMuvTmobDXKKHtdVpfoXtJQURrxs7fvA==}
+  /@applitools/eyes-cypress@3.40.6(typescript@5.1.6):
+    resolution: {integrity: sha512-Klqt3y2U9pl+btLKQJB6e6UtzOv4wdAKxD9V6VCjLF8DqQeBukinAG3kBgpDRQVEVCYMeQXdQZrRTRJvZOkpIg==}
     engines: {node: '>=12.13.0'}
     hasBin: true
     dependencies:
-      '@applitools/core': 3.9.0(typescript@5.1.6)
-      '@applitools/eyes': 1.7.2(typescript@5.1.6)
+      '@applitools/core': 4.6.0(typescript@5.1.6)
+      '@applitools/eyes': 1.13.5(typescript@5.1.6)
       '@applitools/functional-commons': 1.6.0
-      '@applitools/logger': 2.0.7
-      '@applitools/utils': 1.5.0
+      '@applitools/logger': 2.0.14
+      '@applitools/utils': 1.7.0
       boxen: 5.1.2
       chalk: 3.0.0
-      semver: 7.3.8
+      semver: 7.5.4
       uuid: 8.3.2
       ws: 8.5.0
     transitivePeerDependencies:
       - bufferutil
-      - canvas
       - encoding
       - supports-color
       - typescript
       - utf-8-validate
     dev: true
 
-  /@applitools/eyes@1.7.2(typescript@5.1.6):
-    resolution: {integrity: sha512-RNwPMp19xmQ+oEEZH66wGbnBbOqsrHaLBwnCZ9qJ9294aN4DuYHJNXdzHtLFSwjHNc8UmyDRU2Enn4825hqV6w==}
+  /@applitools/eyes@1.13.5(typescript@5.1.6):
+    resolution: {integrity: sha512-FXFH5D78UMcqG0No5FgvISlfGM9DrXTCnRsEXhEw+dbQneG7siKRY6BQci3QDgrh0sI0yfVaZbZrpXIKuDF1ug==}
     engines: {node: '>=12.13.0'}
     dependencies:
-      '@applitools/core': 3.9.0(typescript@5.1.6)
-      '@applitools/logger': 2.0.7
-      '@applitools/utils': 1.5.0
+      '@applitools/core': 4.6.0(typescript@5.1.6)
+      '@applitools/logger': 2.0.14
+      '@applitools/utils': 1.7.0
     transitivePeerDependencies:
       - bufferutil
-      - canvas
       - encoding
       - supports-color
       - typescript
@@ -904,11 +897,11 @@ packages:
     engines: {node: '>=8.0.0'}
     dev: true
 
-  /@applitools/image@1.1.2:
-    resolution: {integrity: sha512-Cy1oKCB2vIpHT47Y1tictsRS2RLBVI4XzxYWvKnXx+ZsbL364IiDzwWxYKgvA7/6t1Ako648n4+BWKoUi5Ewbg==}
+  /@applitools/image@1.1.9:
+    resolution: {integrity: sha512-R86re+yofXSBamTuzSLwFB57fzaf7aiKvyx675uw8e/XfqQy3vhGbp8Bh23lUZX9y7ngf2ldrpnQ7nQrvmtJuA==}
     engines: {node: '>=12.13.0'}
     dependencies:
-      '@applitools/utils': 1.5.0
+      '@applitools/utils': 1.7.0
       bmpimagejs: 1.0.4
       jpeg-js: 0.4.4
       omggif: 1.0.10
@@ -926,33 +919,33 @@ packages:
       - supports-color
     dev: true
 
-  /@applitools/logger@2.0.7:
-    resolution: {integrity: sha512-dmX2nWWixMYsOdhl1MANv7wr8cKzYUOaHxQp9CdokVbJy+NGwWAzK6qVeKjogn7D6eXHzgn3R3OzplYSq/fK/g==}
+  /@applitools/logger@2.0.14:
+    resolution: {integrity: sha512-oq/RPjs/3BjR3EdLohHhzzVufBYEMMhOUmZlCnvgmCJIhUsa3ceq8Ta2E99TUzSny9xkl962JoRDfLQg/vS+Ww==}
     engines: {node: '>=12.13.0'}
     dependencies:
-      '@applitools/utils': 1.5.0
+      '@applitools/utils': 1.7.0
       chalk: 4.1.2
       debug: 4.3.4(supports-color@8.1.1)
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@applitools/nml-client@1.5.7:
-    resolution: {integrity: sha512-jAG2/4JSqX7FSrdyIyjdXcPy2l2/t8KRlw554nL1ABgtqTV8yCI3DxVUk7RCNi39f1uY5pA2pfiZVGFImnSFKg==}
+  /@applitools/nml-client@1.6.4:
+    resolution: {integrity: sha512-mbLnwpXbM2MkB+bP9+Hluywi4OAFWDr+FvjHkk/9TcvcM9EYbmD8deGuTC5kFt5WDDS568WQDRj+G2tT1JfLEA==}
     engines: {node: '>=12.13.0'}
     dependencies:
-      '@applitools/logger': 2.0.7
-      '@applitools/req': 1.5.2
-      '@applitools/utils': 1.5.0
+      '@applitools/logger': 2.0.14
+      '@applitools/req': 1.6.4
+      '@applitools/utils': 1.7.0
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@applitools/req@1.5.2:
-    resolution: {integrity: sha512-evuikeiCYudhxSQ2kisO7DdywPqshaaN+BiDu4P3eTz5R9VmqhXwWP9bS88G8bzzz0FeNQMY9a7TjQ7d5jMRrA==}
-    engines: {node: '>=12.13.0'}
+  /@applitools/req@1.6.4:
+    resolution: {integrity: sha512-yKTga1QHzIk7ECHgC8JEgYxV91PdIHWRa02ZpsK2FAk6GjTefPK6WZsj1vGKeVi/dGxHuZT8sjvtJHc275osug==}
+    engines: {node: '>=16.13.0'}
     dependencies:
-      '@applitools/utils': 1.5.0
+      '@applitools/utils': 1.7.0
       abort-controller: 3.0.0
       http-proxy-agent: 5.0.0
       https-proxy-agent: 5.0.1
@@ -961,81 +954,78 @@ packages:
       - supports-color
     dev: true
 
-  /@applitools/screenshoter@3.8.7:
-    resolution: {integrity: sha512-G576fLyTTAJEnhFZBeD57+1JDXGTDcTlrg0n32ujtYTFswUAf5XnXmeO6s2WqeHKQl74e2xwhBmdtU/CrVOkig==}
+  /@applitools/screenshoter@3.8.20:
+    resolution: {integrity: sha512-k7t4cdJ5vpgYvsLLrenSvPNkUZ25uUs7Q54X0tGtkgQ/C+pQ8GLaIXQQwyVaEYbnF6WuAnrjTXMpdPJ2uUvpAg==}
     engines: {node: '>=12.13.0'}
     dependencies:
-      '@applitools/image': 1.1.2
-      '@applitools/logger': 2.0.7
-      '@applitools/snippets': 2.4.22
-      '@applitools/utils': 1.5.0
+      '@applitools/image': 1.1.9
+      '@applitools/logger': 2.0.14
+      '@applitools/snippets': 2.4.24
+      '@applitools/utils': 1.7.0
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@applitools/snippets@2.4.22:
-    resolution: {integrity: sha512-bv4GzMf6k4mAyMxo3PVR3HKEPkf4h0O6+xNo6UO78cw+MpkT4Sr7JDk3mLq8H/WRDKk7x4VKpJeoDHd5dBxT3g==}
+  /@applitools/snippets@2.4.24:
+    resolution: {integrity: sha512-T/cfYA15K+gR2Xc/cEnn2hR7XBJ9vCcH/Jcp7Hoor14j7nzldR+u69HaQe/sa4ChDU4eZyTiTggek52+MqX7FQ==}
     engines: {node: '>=12.13.0'}
     dev: true
 
-  /@applitools/socket@1.1.7:
-    resolution: {integrity: sha512-SpP+Zw5B9VJ3K+xW+wSYDwfrOQ1U9/95h5G3rszKaVleX2FTUW0JgmASuSlwgr7veU3qlcNzt3vas/tQM3/z/g==}
+  /@applitools/socket@1.1.14:
+    resolution: {integrity: sha512-o43hNnD/PN5T5MFR3cZ5OC+b5PpkV/PeTk8z844sNtGyziS9GEpO0vYfG2XLq/mZg0YQurrXtYupUMndV+0wDg==}
     engines: {node: '>=12.13.0'}
     dependencies:
-      '@applitools/logger': 2.0.7
-      '@applitools/utils': 1.5.0
+      '@applitools/logger': 2.0.14
+      '@applitools/utils': 1.7.0
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@applitools/spec-driver-webdriver@1.0.41(webdriver@7.30.0):
-    resolution: {integrity: sha512-0kUHiFmr3FiOlfTnfS1k8pvJXgnEM8bP36teiDJvmAJnk8aJG5nmqaQj1KkeLUVVZ1wfYlg/+iDtGUdP4a4Zxw==}
+  /@applitools/spec-driver-webdriver@1.0.54(webdriver@7.31.1):
+    resolution: {integrity: sha512-ZpwUBWu5kUil5E+r+NdhdB8SzWwGv56+sZSGyPlgN0w2krmIudeyBKuJKYMfqdXSu0lATSgKJSCJXmkb/q4DNQ==}
     engines: {node: '>=12.13.0'}
     peerDependencies:
-      webdriver: '>=7.27.0'
+      webdriver: '>=6.0.0'
     dependencies:
-      '@applitools/driver': 1.13.4
-      '@applitools/utils': 1.5.0
+      '@applitools/driver': 1.16.1
+      '@applitools/utils': 1.7.0
       http-proxy-agent: 5.0.0
       https-proxy-agent: 5.0.1
-      webdriver: 7.30.0(typescript@5.1.6)
+      webdriver: 7.31.1(typescript@5.1.6)
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@applitools/tunnel-client@1.1.3:
-    resolution: {integrity: sha512-xe0HqznqnuhsZYIY//NnjszEkIcYgdZkwVR4GOwzVCOCcxIGoi+kMpDUuC2Xcd8+UiVbfZfZTeo7rXITlzzqAw==}
+  /@applitools/tunnel-client@1.4.0:
+    resolution: {integrity: sha512-vgQoEN81Mhqjf74+9JAUvGK8t8Dzm0p8nNrqsqeHekuTva6Jh92sNK40j96z7jrMoSo+JHOeb/7mIOicU9o/0A==}
     engines: {node: '>=12.13.0'}
     hasBin: true
     dependencies:
       '@applitools/execution-grid-tunnel': 2.1.8
-      '@applitools/logger': 2.0.7
-      '@applitools/req': 1.5.2
-      '@applitools/socket': 1.1.7
-      '@applitools/utils': 1.5.0
+      '@applitools/logger': 2.0.14
+      '@applitools/req': 1.6.4
+      '@applitools/socket': 1.1.14
+      '@applitools/utils': 1.7.0
       abort-controller: 3.0.0
       yargs: 17.7.2
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@applitools/ufg-client@1.7.0:
-    resolution: {integrity: sha512-BMFLuWGq8YVs0/z5VBl8CAKzOMXbagHFxyR4oGdg31nDsuKgKfhlnbGji5qek243ex8vEbEqFwsH2K0ZXYGIeQ==}
+  /@applitools/ufg-client@1.9.9:
+    resolution: {integrity: sha512-J/k6C1JYPr4ohcE64AvVHIeTMZ83bXnhuIryxvOWJDSyr6Yh4hvtrbCviUyYMaKj7WCMYeDEESt6auiyBMxVGw==}
     engines: {node: '>=12.13.0'}
     dependencies:
-      '@applitools/image': 1.1.2
-      '@applitools/logger': 2.0.7
-      '@applitools/req': 1.5.2
-      '@applitools/utils': 1.5.0
+      '@applitools/image': 1.1.9
+      '@applitools/logger': 2.0.14
+      '@applitools/req': 1.6.4
+      '@applitools/utils': 1.7.0
+      '@xmldom/xmldom': 0.8.10
       abort-controller: 3.0.0
       css-tree: 2.3.1
-      jsdom: 19.0.0
       throat: 6.0.2
     transitivePeerDependencies:
-      - bufferutil
-      - canvas
       - supports-color
-      - utf-8-validate
     dev: true
 
   /@applitools/utils@1.3.36:
@@ -1043,8 +1033,8 @@ packages:
     engines: {node: '>=12.13.0'}
     dev: true
 
-  /@applitools/utils@1.5.0:
-    resolution: {integrity: sha512-BZk8YolP0G+/Srjkhf+pFp4zY7bU41L63hDN9gtwrD1xZOfWXJbOCD3gFQAGRB2qsozHMkPNTt+xw7RJjIjGQg==}
+  /@applitools/utils@1.7.0:
+    resolution: {integrity: sha512-CvBxdfPZ3ss1hOD8Yr9y2SzVfqLKBA/0N3gfQd5qafMrBhI0wuCycQmiclpAQNEVNkbhqn8/t6dOeeYgapjyDw==}
     engines: {node: '>=12.13.0'}
     dev: true
 
@@ -3104,27 +3094,31 @@ packages:
     dependencies:
       '@jridgewell/trace-mapping': 0.3.9
 
-  /@cypress/code-coverage@3.11.0(@babel/core@7.23.5)(@babel/preset-env@7.22.10)(babel-loader@9.1.3)(cypress@12.17.3)(webpack@5.88.2):
-    resolution: {integrity: sha512-ihSO1s03gmLRE224oIjrbdG1ey63vw/UY+VSqQ5m/TKkAvyz6GIiniq6juk3AV/+0vQC1Eb4UWFu8ndtji4M1g==}
+  /@cypress/code-coverage@3.12.18(@babel/core@7.23.5)(@babel/preset-env@7.22.10)(babel-loader@9.1.3)(cypress@12.17.4)(webpack@5.88.2):
+    resolution: {integrity: sha512-RTOyCVr5CWaJ7cW1gOvlXSLDr0HNXZ7xSVfLSZEGsTODbaxeUV01Z1k93spnbVT7ri9UkxCEffPcsZsZi1oDng==}
     peerDependencies:
+      '@babel/core': ^7.0.1
+      '@babel/preset-env': ^7.0.0
+      babel-loader: ^8.3 || ^9
       cypress: '*'
+      webpack: ^4 || ^5
     dependencies:
-      '@cypress/webpack-preprocessor': 5.17.1(@babel/core@7.23.5)(@babel/preset-env@7.22.10)(babel-loader@9.1.3)(webpack@5.88.2)
+      '@babel/core': 7.23.5
+      '@babel/preset-env': 7.22.10(@babel/core@7.23.5)
+      '@cypress/webpack-preprocessor': 6.0.1(@babel/core@7.23.5)(@babel/preset-env@7.22.10)(babel-loader@9.1.3)(webpack@5.88.2)
+      babel-loader: 9.1.3(@babel/core@7.23.5)(webpack@5.88.2)
       chalk: 4.1.2
-      cypress: 12.17.3
-      dayjs: 1.11.9
+      cypress: 12.17.4
+      dayjs: 1.11.10
       debug: 4.3.4(supports-color@8.1.1)
       execa: 4.1.0
-      globby: 11.0.4
-      istanbul-lib-coverage: 3.0.0
+      globby: 11.1.0
+      istanbul-lib-coverage: 3.2.0
       js-yaml: 4.1.0
       nyc: 15.1.0
+      webpack: 5.88.2(esbuild@0.19.0)(webpack-cli@4.10.0)
     transitivePeerDependencies:
-      - '@babel/core'
-      - '@babel/preset-env'
-      - babel-loader
       - supports-color
-      - webpack
     dev: true
 
   /@cypress/request@2.88.12:
@@ -3151,12 +3145,12 @@ packages:
       uuid: 8.3.2
     dev: true
 
-  /@cypress/webpack-preprocessor@5.17.1(@babel/core@7.23.5)(@babel/preset-env@7.22.10)(babel-loader@9.1.3)(webpack@5.88.2):
-    resolution: {integrity: sha512-FE/e8ikPc8z4EVopJCaior3RGy0jd2q9Xcp5NtiwNG4XnLfEnUFTZlAGwXe75sEh4fNMPrBJW1KIz77PX5vGAw==}
+  /@cypress/webpack-preprocessor@6.0.1(@babel/core@7.23.5)(@babel/preset-env@7.22.10)(babel-loader@9.1.3)(webpack@5.88.2):
+    resolution: {integrity: sha512-WVNeFVSnFKxE3WZNRIriduTgqJRpevaiJIPlfqYTTzfXRD7X1Pv4woDE+G4caPV9bJqVKmVFiwzrXMRNeJxpxA==}
     peerDependencies:
       '@babel/core': ^7.0.1
       '@babel/preset-env': ^7.0.0
-      babel-loader: ^8.0.2 || ^9
+      babel-loader: ^8.3 || ^9
       webpack: ^4 || ^5
     dependencies:
       '@babel/core': 7.23.5
@@ -4931,6 +4925,13 @@ packages:
       '@types/node': 18.17.5
     dev: true
 
+  /@types/glob@8.1.0:
+    resolution: {integrity: sha512-IO+MJPVhoqz+28h1qLAcBEH2+xHMK6MTyHJc7MTnnYb6wsoLR29POVGJ7LycmVXIqyy/4/2ShP5sUwTXuOwb/w==}
+    dependencies:
+      '@types/minimatch': 5.1.2
+      '@types/node': 18.17.5
+    dev: true
+
   /@types/graceful-fs@4.1.6:
     resolution: {integrity: sha512-Sig0SNORX9fdW+bQuTEovKj3uHcUL6LQKbCrrqb1X7J6/ReAbhCXRAhc+SMejhLELFj2QcyuxmUooZ4bt5ReSw==}
     dependencies:
@@ -6146,13 +6147,14 @@ packages:
       - vue
     dev: true
 
-  /@wdio/config@7.30.0(typescript@5.1.6):
-    resolution: {integrity: sha512-/38rol9WCfFTMtXyd/C856/aexxIZnfVvXg7Fw2WXpqZ9qadLA+R4N35S2703n/RByjK/5XAYtHoljtvh3727w==}
+  /@wdio/config@7.31.1(typescript@5.1.6):
+    resolution: {integrity: sha512-WAfswbCatwiaDVqy6kfF/5T8/WS/US/SRhBGUFrfBuGMIe+RRoHgy7jURFWSvUIE7CNHj8yvs46fLUcxhXjzcQ==}
     engines: {node: '>=12.0.0'}
     dependencies:
+      '@types/glob': 8.1.0
       '@wdio/logger': 7.26.0
-      '@wdio/types': 7.26.0(typescript@5.1.6)
-      '@wdio/utils': 7.26.0(typescript@5.1.6)
+      '@wdio/types': 7.30.2(typescript@5.1.6)
+      '@wdio/utils': 7.30.2(typescript@5.1.6)
       deepmerge: 4.3.1
       glob: 8.1.0
     transitivePeerDependencies:
@@ -6174,8 +6176,8 @@ packages:
     engines: {node: '>=12.0.0'}
     dev: true
 
-  /@wdio/types@7.26.0(typescript@5.1.6):
-    resolution: {integrity: sha512-mOTfWAGQ+iT58iaZhJMwlUkdEn3XEWE4jthysMLXFnSuZ2eaODVAiK31SmlS/eUqgSIaupeGqYUrtCuSNbLefg==}
+  /@wdio/types@7.30.2(typescript@5.1.6):
+    resolution: {integrity: sha512-uZ8o7FX8RyBsaXiOWa59UKTCHTtADNvOArYTcHNEIzt+rh4JdB/uwqfc8y4TCNA2kYm7PWaQpUFwpStLeg0H1Q==}
     engines: {node: '>=12.0.0'}
     peerDependencies:
       typescript: ^4.6.2
@@ -6188,12 +6190,12 @@ packages:
       typescript: 5.1.6
     dev: true
 
-  /@wdio/utils@7.26.0(typescript@5.1.6):
-    resolution: {integrity: sha512-pVq2MPXZAYLkKGKIIHktHejnHqg4TYKoNYSi2EDv+I3GlT8VZKXHazKhci82ov0tD+GdF27+s4DWNDCfGYfBdQ==}
+  /@wdio/utils@7.30.2(typescript@5.1.6):
+    resolution: {integrity: sha512-np7I+smszFUennbQKdzbMN/zUL3s3EZq9pCCUcTRjjs9TE4tnn0wfmGdoz2o7REYu6kn9NfFFJyVIM2VtBbKEA==}
     engines: {node: '>=12.0.0'}
     dependencies:
       '@wdio/logger': 7.26.0
-      '@wdio/types': 7.26.0(typescript@5.1.6)
+      '@wdio/types': 7.30.2(typescript@5.1.6)
       p-iteration: 1.1.8
     transitivePeerDependencies:
       - typescript
@@ -6414,13 +6416,6 @@ packages:
       negotiator: 0.6.3
     dev: true
 
-  /acorn-globals@6.0.0:
-    resolution: {integrity: sha512-ZQl7LOWaF5ePqqcX4hLuv/bLXYQNfNWw2c0/yX/TsPRKamzHcTGQnlCjHT3TsmkOUVEPS3crCxiPfdzE/Trlhg==}
-    dependencies:
-      acorn: 7.4.1
-      acorn-walk: 7.2.0
-    dev: true
-
   /acorn-import-assertions@1.9.0(acorn@8.10.0):
     resolution: {integrity: sha512-cmMwop9x+8KFhxvKrKfPYmN6/pKTYYHBqLa0DfvVZcKMJWNyWLnaqND7dx/qn66R7ewM1UX5XMaDVP5wlVTaVA==}
     peerDependencies:
@@ -6437,21 +6432,10 @@ packages:
       acorn: 8.10.0
     dev: true
 
-  /acorn-walk@7.2.0:
-    resolution: {integrity: sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==}
-    engines: {node: '>=0.4.0'}
-    dev: true
-
   /acorn-walk@8.2.0:
     resolution: {integrity: sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==}
     engines: {node: '>=0.4.0'}
 
-  /acorn@7.4.1:
-    resolution: {integrity: sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==}
-    engines: {node: '>=0.4.0'}
-    hasBin: true
-    dev: true
-
   /acorn@8.10.0:
     resolution: {integrity: sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==}
     engines: {node: '>=0.4.0'}
@@ -7070,10 +7054,6 @@ packages:
     dependencies:
       fill-range: 7.0.1
 
-  /browser-process-hrtime@1.0.0:
-    resolution: {integrity: sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow==}
-    dev: true
-
   /browserslist@4.21.10:
     resolution: {integrity: sha512-bipEBdZfVH5/pwrvqc+Ub0kUPVfGUhlKxbvfD+z1BDnPEO/X98ruXGA1WP5ASpAFKan7Qr6j736IacbZQuAlKQ==}
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
@@ -8059,21 +8039,6 @@ packages:
     hasBin: true
     dev: false
 
-  /cssom@0.3.8:
-    resolution: {integrity: sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==}
-    dev: true
-
-  /cssom@0.5.0:
-    resolution: {integrity: sha512-iKuQcq+NdHqlAcwUY0o/HL69XQrUaQdMjmStJ8JFmUaiiQErlhrmuigkg/CU4E2J0IyUKUrMAgl36TvN67MqTw==}
-    dev: true
-
-  /cssstyle@2.3.0:
-    resolution: {integrity: sha512-AZL67abkUzIuvcHqk7c09cezpGNcxUxU4Ioi/05xHk4DQeTkWmGYftIE6ctU6AEt+Gn4n1lDStOtj7FKycP71A==}
-    engines: {node: '>=8'}
-    dependencies:
-      cssom: 0.3.8
-    dev: true
-
   /cssstyle@3.0.0:
     resolution: {integrity: sha512-N4u2ABATi3Qplzf0hWbVCdjenim8F3ojEXpBDF5hBpjzW182MjNGLqfmQ0SkSPeQ+V86ZXgeH8aXj6kayd4jgg==}
     engines: {node: '>=14'}
@@ -8102,14 +8067,14 @@ packages:
     resolution: {integrity: sha512-d4ZVpCW31eWwCMe1YT3ur7mUDnTXbgwyzaL320DrcRT45rfjYxkt5QWLrmOJ+/UEAI2+fQgKe/fCjR8l4TpRgw==}
     dev: true
 
-  /cypress-image-snapshot@4.0.1(cypress@12.17.3)(jest@29.6.2):
+  /cypress-image-snapshot@4.0.1(cypress@12.17.4)(jest@29.6.2):
     resolution: {integrity: sha512-PBpnhX/XItlx3/DAk5ozsXQHUi72exybBNH5Mpqj1DVmjq+S5Jd9WE5CRa4q5q0zuMZb2V2VpXHth6MjFpgj9Q==}
     engines: {node: '>=8'}
     peerDependencies:
       cypress: ^4.5.0
     dependencies:
       chalk: 2.4.2
-      cypress: 12.17.3
+      cypress: 12.17.4
       fs-extra: 7.0.1
       glob: 7.2.3
       jest-image-snapshot: 4.2.0(jest@29.6.2)
@@ -8119,8 +8084,8 @@ packages:
       - jest
     dev: true
 
-  /cypress@12.17.3:
-    resolution: {integrity: sha512-/R4+xdIDjUSLYkiQfwJd630S81KIgicmQOLXotFxVXkl+eTeVO+3bHXxdi5KBh/OgC33HWN33kHX+0tQR/ZWpg==}
+  /cypress@12.17.4:
+    resolution: {integrity: sha512-gAN8Pmns9MA5eCDFSDJXWKUpaL3IDd89N9TtIupjYnzLSmlpVr+ZR+vb4U/qaMp+lB6tBvAmt7504c3Z4RU5KQ==}
     engines: {node: ^14.0.0 || ^16.0.0 || >=18.0.0}
     hasBin: true
     requiresBuild: true
@@ -8160,6 +8125,7 @@ packages:
       minimist: 1.2.8
       ospath: 1.2.2
       pretty-bytes: 5.6.0
+      process: 0.11.10
       proxy-from-env: 1.0.0
       request-progress: 3.0.0
       semver: 7.5.4
@@ -8576,15 +8542,6 @@ packages:
     engines: {node: '>= 12'}
     dev: true
 
-  /data-urls@3.0.2:
-    resolution: {integrity: sha512-Jy/tj3ldjZJo63sVAvg6LHt2mHvl4V6AgRAmNDtLdm7faqtsx+aJG42rsyCo9JCoRVKwPFzKlIPx3DIibwSIaQ==}
-    engines: {node: '>=12'}
-    dependencies:
-      abab: 2.0.6
-      whatwg-mimetype: 3.0.0
-      whatwg-url: 11.0.0
-    dev: true
-
   /data-urls@4.0.0:
     resolution: {integrity: sha512-/mMTei/JXPqvFqQtfyTowxmJVwr2PVAeCcDxyFf6LhoOu/09TX2OX3kb2wzi4DMXcfj4OItwDOnhl5oziPnT6g==}
     engines: {node: '>=14'}
@@ -8601,6 +8558,10 @@ packages:
       '@babel/runtime': 7.22.10
     dev: true
 
+  /dayjs@1.11.10:
+    resolution: {integrity: sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ==}
+    dev: true
+
   /dayjs@1.11.7:
     resolution: {integrity: sha512-+Yw9U6YO5TQohxLcIkrXBeY73WP3ejHWVvx8XCk3gxvQDCTEmS48ZrSZCKciI7Bhl/uCMyxYtE9UqRILmFphkQ==}
     dev: false
@@ -9265,18 +9226,6 @@ packages:
       source-map: 0.1.43
     dev: true
 
-  /escodegen@2.1.0:
-    resolution: {integrity: sha512-2NlIDTwUWJN0mRPQOdtQBzbUHvdGY2P1VXSyU83Q3xKxM7WHX2Ql8dKq782Q9TgQUNOLEzEYu9bzLNj1q88I5w==}
-    engines: {node: '>=6.0'}
-    hasBin: true
-    dependencies:
-      esprima: 4.0.1
-      estraverse: 5.3.0
-      esutils: 2.0.3
-    optionalDependencies:
-      source-map: 0.6.1
-    dev: true
-
   /eslint-config-prettier@8.10.0(eslint@8.47.0):
     resolution: {integrity: sha512-SM8AMJdeQqRYT9O9zguiruQZaN7+z+E4eAP9oiLNGKMtomwaB1E9dcgUD6ZAn/eQAb52USbvezbiljfZUhbJcg==}
     hasBin: true
@@ -10416,18 +10365,6 @@ packages:
       define-properties: 1.2.0
     dev: true
 
-  /globby@11.0.4:
-    resolution: {integrity: sha512-9O4MVG9ioZJ08ffbcyVYyLOJLk5JQ688pJ4eMGLpdWLHq/Wr1D9BlriLQyL0E+jbkuePVZXYFj47QM/v093wHg==}
-    engines: {node: '>=10'}
-    dependencies:
-      array-union: 2.1.0
-      dir-glob: 3.0.1
-      fast-glob: 3.3.2
-      ignore: 5.2.4
-      merge2: 1.4.1
-      slash: 3.0.0
-    dev: true
-
   /globby@11.1.0:
     resolution: {integrity: sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==}
     engines: {node: '>=10'}
@@ -11229,11 +11166,6 @@ packages:
     resolution: {integrity: sha512-Yljz7ffyPbrLpLngrMtZ7NduUgVvi6wG9RJ9IUcyCd59YQ911PBJphODUcbOVbqYfxe1wuYf/LJ8PauMRwsM/g==}
     dev: true
 
-  /istanbul-lib-coverage@3.0.0:
-    resolution: {integrity: sha512-UiUIqxMgRDET6eR+o5HbfRYP1l0hqkWOs7vNxC/mggutCMUIhWMm8gAHb8tHlyfD3/l6rlgNA5cKdDzEAf6hEg==}
-    engines: {node: '>=8'}
-    dev: true
-
   /istanbul-lib-coverage@3.2.0:
     resolution: {integrity: sha512-eOeJ5BHCmHYvQK7xt9GkdHuzuCGS1Y6g9Gvnx3Ym33fz/HpLRYxiS0wHNr+m/MBC8B647Xt608vCDEvhl9c6Mw==}
     engines: {node: '>=8'}
@@ -11869,48 +11801,6 @@ packages:
     engines: {node: '>=12.0.0'}
     dev: true
 
-  /jsdom@19.0.0:
-    resolution: {integrity: sha512-RYAyjCbxy/vri/CfnjUWJQQtZ3LKlLnDqj+9XLNnJPgEGeirZs3hllKR20re8LUZ6o1b1X4Jat+Qd26zmP41+A==}
-    engines: {node: '>=12'}
-    peerDependencies:
-      canvas: ^2.5.0
-    peerDependenciesMeta:
-      canvas:
-        optional: true
-    dependencies:
-      abab: 2.0.6
-      acorn: 8.10.0
-      acorn-globals: 6.0.0
-      cssom: 0.5.0
-      cssstyle: 2.3.0
-      data-urls: 3.0.2
-      decimal.js: 10.4.3
-      domexception: 4.0.0
-      escodegen: 2.1.0
-      form-data: 4.0.0
-      html-encoding-sniffer: 3.0.0
-      http-proxy-agent: 5.0.0
-      https-proxy-agent: 5.0.1
-      is-potential-custom-element-name: 1.0.1
-      nwsapi: 2.2.7
-      parse5: 6.0.1
-      saxes: 5.0.1
-      symbol-tree: 3.2.4
-      tough-cookie: 4.1.3
-      w3c-hr-time: 1.0.2
-      w3c-xmlserializer: 3.0.0
-      webidl-conversions: 7.0.0
-      whatwg-encoding: 2.0.0
-      whatwg-mimetype: 3.0.0
-      whatwg-url: 10.0.0
-      ws: 8.13.0
-      xml-name-validator: 4.0.0
-    transitivePeerDependencies:
-      - bufferutil
-      - supports-color
-      - utf-8-validate
-    dev: true
-
   /jsdom@22.0.0:
     resolution: {integrity: sha512-p5ZTEb5h+O+iU02t0GfEjAnkdYPrQSkfuTSMkMYyIoMvUNEHsbG0bHHbfXIcfTqD2UfvjQX7mmgiFsyRwGscVw==}
     engines: {node: '>=16'}
@@ -13615,10 +13505,6 @@ packages:
       lines-and-columns: 1.2.4
     dev: true
 
-  /parse5@6.0.1:
-    resolution: {integrity: sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==}
-    dev: true
-
   /parse5@7.1.2:
     resolution: {integrity: sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==}
     dependencies:
@@ -14026,7 +13912,6 @@ packages:
   /process@0.11.10:
     resolution: {integrity: sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==}
     engines: {node: '>= 0.6.0'}
-    dev: false
 
   /prompts@2.4.2:
     resolution: {integrity: sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==}
@@ -14665,13 +14550,6 @@ packages:
   /safer-buffer@2.1.2:
     resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
 
-  /saxes@5.0.1:
-    resolution: {integrity: sha512-5LBh1Tls8c9xgGjw3QrMwETmTMVk0oFgvrFSvWx62llR2hcEInrKNZ2GZCCuuy2lvWrdl5jhbpeqc5hRYKFOcw==}
-    engines: {node: '>=10'}
-    dependencies:
-      xmlchars: 2.2.0
-    dev: true
-
   /saxes@6.0.0:
     resolution: {integrity: sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==}
     engines: {node: '>=v12.22.7'}
@@ -14732,14 +14610,6 @@ packages:
     hasBin: true
     dev: true
 
-  /semver@7.3.8:
-    resolution: {integrity: sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==}
-    engines: {node: '>=10'}
-    hasBin: true
-    dependencies:
-      lru-cache: 6.0.0
-    dev: true
-
   /semver@7.5.4:
     resolution: {integrity: sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==}
     engines: {node: '>=10'}
@@ -15657,13 +15527,6 @@ packages:
       punycode: 2.3.0
     dev: true
 
-  /tr46@3.0.0:
-    resolution: {integrity: sha512-l7FvfAHlcmulp8kr+flpQZmVwtu7nfRV7NZujtN0OqES8EL4O4e0qqzL0DC5gAvx/ZC/9lk6rhcUwYvkBnBnYA==}
-    engines: {node: '>=12'}
-    dependencies:
-      punycode: 2.3.0
-    dev: true
-
   /tr46@4.1.1:
     resolution: {integrity: sha512-2lv/66T7e5yNyhAAC4NaKe5nVavzuGJQVVtRYLyQ2OI8tsJ61PMLlelehb0wi2Hx6+hT/OJUWZcw8MjlSRnxvw==}
     engines: {node: '>=14'}
@@ -16746,20 +16609,6 @@ packages:
       vue: 3.3.4
     dev: false
 
-  /w3c-hr-time@1.0.2:
-    resolution: {integrity: sha512-z8P5DvDNjKDoFIHK7q8r8lackT6l+jo/Ye3HOle7l9nICP9lf1Ci25fy9vHd0JOWewkIFzXIEig3TdKT7JQ5fQ==}
-    deprecated: Use your platform's native performance.now() and performance.timeOrigin.
-    dependencies:
-      browser-process-hrtime: 1.0.0
-    dev: true
-
-  /w3c-xmlserializer@3.0.0:
-    resolution: {integrity: sha512-3WFqGEgSXIyGhOmAFtlicJNMjEps8b1MG31NCA0/vOF9+nKMUW1ckhi9cnNHmf88Rzw5V+dwIwsm2C7X8k9aQg==}
-    engines: {node: '>=12'}
-    dependencies:
-      xml-name-validator: 4.0.0
-    dev: true
-
   /w3c-xmlserializer@4.0.0:
     resolution: {integrity: sha512-d+BFHzbiCx6zGfz0HyQ6Rg69w9k19nviJspaj4yNscGjrHu94sVP+aRm75yEbCh+r2/yR+7q6hux9LVtbuTGBw==}
     engines: {node: '>=14'}
@@ -16810,16 +16659,16 @@ packages:
     resolution: {integrity: sha512-PgF341avzqyx60neE9DD+XS26MMNMoUQRz9NOZwW32nPQrF6p77f1htcnjBSEV8BGMKZ16choqUG4hyI0Hx7mA==}
     dev: false
 
-  /webdriver@7.30.0(typescript@5.1.6):
-    resolution: {integrity: sha512-bQE4oVgjjg5sb3VkCD+Eb8mscEvf3TioP0mnEZK0f5OJUNI045gMCJgpX8X4J8ScGyEhzlhn1KvlAn3yzxjxog==}
+  /webdriver@7.31.1(typescript@5.1.6):
+    resolution: {integrity: sha512-nCdJLxRnYvOMFqTEX7sqQtF/hV/Jgov0Y6ICeOm1DMTlZSRRDaUsBMlEAPkEwif9uBJYdM0znv8qzfX358AGqQ==}
     engines: {node: '>=12.0.0'}
     dependencies:
       '@types/node': 18.17.5
-      '@wdio/config': 7.30.0(typescript@5.1.6)
+      '@wdio/config': 7.31.1(typescript@5.1.6)
       '@wdio/logger': 7.26.0
       '@wdio/protocols': 7.27.0
-      '@wdio/types': 7.26.0(typescript@5.1.6)
-      '@wdio/utils': 7.26.0(typescript@5.1.6)
+      '@wdio/types': 7.30.2(typescript@5.1.6)
+      '@wdio/utils': 7.30.2(typescript@5.1.6)
       got: 11.8.6
       ky: 0.30.0
       lodash.merge: 4.6.2
@@ -17023,22 +16872,6 @@ packages:
     engines: {node: '>=12'}
     dev: true
 
-  /whatwg-url@10.0.0:
-    resolution: {integrity: sha512-CLxxCmdUby142H5FZzn4D8ikO1cmypvXVQktsgosNy4a4BHrDHeciBBGZhb0bNoR5/MltoCatso+vFjjGx8t0w==}
-    engines: {node: '>=12'}
-    dependencies:
-      tr46: 3.0.0
-      webidl-conversions: 7.0.0
-    dev: true
-
-  /whatwg-url@11.0.0:
-    resolution: {integrity: sha512-RKT8HExMpoYx4igMiVMY83lN6UeITKJlBQ+vR/8ZJ8OCdSiN3RwCq+9gH0+Xzj0+5IrM6i4j/6LuvzbZIQgEcQ==}
-    engines: {node: '>=12'}
-    dependencies:
-      tr46: 3.0.0
-      webidl-conversions: 7.0.0
-    dev: true
-
   /whatwg-url@12.0.1:
     resolution: {integrity: sha512-Ed/LrqB8EPlGxjS+TrsXcpUond1mhccS3pchLhzSgPCnTimUCKj3IZE75pAs5m6heB2U2TMerKFUXheyHY+VDQ==}
     engines: {node: '>=14'}

From a01be16d27ffd38e50a2c55f9dfef3f43c18e7da Mon Sep 17 00:00:00 2001
From: Sidharth Vinod 
Date: Tue, 23 Jan 2024 23:38:21 +0530
Subject: [PATCH 452/457] Echo event

---
 .github/workflows/e2e.yml | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml
index c23dc88baf..a4087cd196 100644
--- a/.github/workflows/e2e.yml
+++ b/.github/workflows/e2e.yml
@@ -30,7 +30,8 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node-version: 18.x
-
+      - run: |
+          echo '${{ toJson(github.event) }}'
       - name: Cache snapshots
         id: cache-snapshot
         uses: actions/cache@v4

From 42ad1f4fe458c8ac79daf1c98bb5b9ae7760316f Mon Sep 17 00:00:00 2001
From: Sidharth Vinod 
Date: Tue, 23 Jan 2024 23:49:52 +0530
Subject: [PATCH 453/457] RefTest

---
 .github/workflows/e2e.yml | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml
index a4087cd196..3b3b849bc8 100644
--- a/.github/workflows/e2e.yml
+++ b/.github/workflows/e2e.yml
@@ -18,7 +18,7 @@ permissions:
 
 env:
   # For PRs and MergeQueues, the target commit is used, and for push events, github.event.previous is used.
-  targetHash: ${{ github.event.pull_request.base.sha || github.event.merge_group.base_sha || github.event.before }}
+  targetHash: ${{ github.event.pull_request.base.sha || github.event.merge_group.base_sha || (github.event.before == '0000000000000000000000000000000000000000' && 'develop' || github.event.before)  }}
 
 jobs:
   cache:
@@ -31,6 +31,7 @@ jobs:
         with:
           node-version: 18.x
       - run: |
+          echo '${{ env.targetHash }}'
           echo '${{ toJson(github.event) }}'
       - name: Cache snapshots
         id: cache-snapshot

From de03a017db5895679e2a781781ce58592524b7bf Mon Sep 17 00:00:00 2001
From: Sidharth Vinod 
Date: Tue, 23 Jan 2024 23:51:48 +0530
Subject: [PATCH 454/457] Remove echo

---
 .github/workflows/e2e.yml | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml
index 3b3b849bc8..b8232b8c0e 100644
--- a/.github/workflows/e2e.yml
+++ b/.github/workflows/e2e.yml
@@ -30,9 +30,6 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node-version: 18.x
-      - run: |
-          echo '${{ env.targetHash }}'
-          echo '${{ toJson(github.event) }}'
       - name: Cache snapshots
         id: cache-snapshot
         uses: actions/cache@v4

From ec79ac200c7714276a374988741dc58375c47f04 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod 
Date: Tue, 23 Jan 2024 23:53:48 +0530
Subject: [PATCH 455/457] Lint

---
 packages/mermaid/src/docs/syntax/flowchart.md | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/mermaid/src/docs/syntax/flowchart.md b/packages/mermaid/src/docs/syntax/flowchart.md
index 95cc962c7d..540f820f77 100644
--- a/packages/mermaid/src/docs/syntax/flowchart.md
+++ b/packages/mermaid/src/docs/syntax/flowchart.md
@@ -775,12 +775,13 @@ flowchart TD
     B-->E(A fa:fa-camera-retro perhaps?)
 ```
 
-Mermaid supports Font Awesome if the CSS is included on the website. 
-Mermaid does not have any restriction on the version of Font Awesome that can be used. 
+Mermaid supports Font Awesome if the CSS is included on the website.
+Mermaid does not have any restriction on the version of Font Awesome that can be used.
 
 Please refer the [Official Font Awesome Documentation](https://fontawesome.com/start) on how to include it in your website.
 
 Adding this snippet in the `` would add support for Font Awesome v6.5.1
+
 ```html
 
Date: Thu, 25 Jan 2024 23:28:42 +0530
Subject: [PATCH 456/457]  perf: prevent adding multiple DOMPurify hooks

Currently, everytime `removeScript()` is called, the same DOMPurify
hooks are getting added again and again.

Co-authored-by: Alois Klink 
---
 .../mermaid/src/diagrams/common/common.ts     | 33 ++++++++++++++-----
 1 file changed, 24 insertions(+), 9 deletions(-)

diff --git a/packages/mermaid/src/diagrams/common/common.ts b/packages/mermaid/src/diagrams/common/common.ts
index caf43bc682..8609a175ae 100644
--- a/packages/mermaid/src/diagrams/common/common.ts
+++ b/packages/mermaid/src/diagrams/common/common.ts
@@ -18,13 +18,18 @@ export const getRows = (s?: string): string[] => {
   return str.split('#br#');
 };
 
-/**
- * Removes script tags from a text
- *
- * @param txt - The text to sanitize
- * @returns The safer text
- */
-export const removeScript = (txt: string): string => {
+const setupDompurifyHooksIfNotSetup = (() => {
+  let setup = false;
+
+  return () => {
+    if (!setup) {
+      setupDompurifyHooks();
+      setup = true;
+    }
+  };
+})();
+
+function setupDompurifyHooks() {
   const TEMPORARY_ATTRIBUTE = 'data-temp-href-target';
 
   DOMPurify.addHook('beforeSanitizeAttributes', (node: Element) => {
@@ -33,8 +38,6 @@ export const removeScript = (txt: string): string => {
     }
   });
 
-  const sanitizedText = DOMPurify.sanitize(txt);
-
   DOMPurify.addHook('afterSanitizeAttributes', (node: Element) => {
     if (node.tagName === 'A' && node.hasAttribute(TEMPORARY_ATTRIBUTE)) {
       node.setAttribute('target', node.getAttribute(TEMPORARY_ATTRIBUTE) || '');
@@ -44,6 +47,18 @@ export const removeScript = (txt: string): string => {
       }
     }
   });
+}
+
+/**
+ * Removes script tags from a text
+ *
+ * @param txt - The text to sanitize
+ * @returns The safer text
+ */
+export const removeScript = (txt: string): string => {
+  setupDompurifyHooksIfNotSetup();
+
+  const sanitizedText = DOMPurify.sanitize(txt);
 
   return sanitizedText;
 };

From 59264a33d7306441193cd6c68ceb4ff4ab3d7fd1 Mon Sep 17 00:00:00 2001
From: FutzMonitor 
Date: Fri, 26 Jan 2024 11:48:48 -0500
Subject: [PATCH 457/457] Changes to gantt.html 1. Added a Gantt diagram that
 demonstrates to users that hashtages and semicolons can be added to titles,
 sections, and task data. Changes to gantt.spec.js 1. Added unit tests to
 ensure that semicolons and hashtags didn't break the functionality of the
 gantt diagram when used in titles, sections or task data. Changes to
 /parser/gantt.spec.js 1. Added rendering tests to ensure that semicolons and
 hashtags in titles, sections, and task data didn't break the rendering of
 Gantt diagrams.

---
 cypress/integration/rendering/gantt.spec.js   | 102 ++++++++++++++++++
 demos/gantt.html                              |  15 +++
 .../src/diagrams/gantt/parser/gantt.spec.js   |  36 +++++++
 3 files changed, 153 insertions(+)

diff --git a/cypress/integration/rendering/gantt.spec.js b/cypress/integration/rendering/gantt.spec.js
index 73ff4ee005..4abde9d446 100644
--- a/cypress/integration/rendering/gantt.spec.js
+++ b/cypress/integration/rendering/gantt.spec.js
@@ -583,4 +583,106 @@ describe('Gantt diagram', () => {
       {}
     );
   });
+
+  it("should render when there's a semicolon in the title", () => {
+    imgSnapshotTest(
+      `
+      gantt
+      title ;Gantt With a Semicolon in the Title
+      dateFormat  YYYY-MM-DD
+      section Section
+      A task           :a1, 2014-01-01, 30d
+      Another task     :after a1  , 20d
+      section Another
+      Task in sec      :2014-01-12  , 12d
+      another task      : 24d
+    `,
+      {}
+    );
+  });
+
+  it("should render when there's a semicolon in a section is true", () => {
+    imgSnapshotTest(
+      `
+      gantt
+      title Gantt Digram
+      dateFormat  YYYY-MM-DD
+      section ;Section With a Semicolon
+      A task           :a1, 2014-01-01, 30d
+      Another task     :after a1  , 20d
+      section Another
+      Task in sec      :2014-01-12  , 12d
+      another task      : 24d
+    `,
+      {}
+    );
+  });
+
+  it("should render when there's a semicolon in the task data", () => {
+    imgSnapshotTest(
+      `
+      gantt
+      title Gantt Digram
+      dateFormat  YYYY-MM-DD
+      section Section
+      ;A task with a semiclon           :a1, 2014-01-01, 30d
+      Another task     :after a1  , 20d
+      section Another
+      Task in sec      :2014-01-12  , 12d
+      another task      : 24d
+    `,
+      {}
+    );
+  });
+
+  it("should render when there's a hashtag in the title", () => {
+    imgSnapshotTest(
+      `
+      gantt
+      title #Gantt With a Hashtag in the Title
+      dateFormat  YYYY-MM-DD
+      section Section
+      A task           :a1, 2014-01-01, 30d
+      Another task     :after a1  , 20d
+      section Another
+      Task in sec      :2014-01-12  , 12d
+      another task      : 24d
+    `,
+      {}
+    );
+  });
+
+  it("should render when there's a hashtag in a section is true", () => {
+    imgSnapshotTest(
+      `
+      gantt
+      title Gantt Digram
+      dateFormat  YYYY-MM-DD
+      section #Section With a Hashtag
+      A task           :a1, 2014-01-01, 30d
+      Another task     :after a1  , 20d
+      section Another
+      Task in sec      :2014-01-12  , 12d
+      another task      : 24d
+    `,
+      {}
+    );
+  });
+
+  it("should render when there's a hashtag in the task data", () => {
+    imgSnapshotTest(
+      `
+      gantt
+      title Gantt Digram
+      dateFormat  YYYY-MM-DD
+      section Section
+      #A task with a hashtag           :a1, 2014-01-01, 30d
+      Another task     :after a1  , 20d
+      section Another
+      Task in sec      :2014-01-12  , 12d
+      another task      : 24d
+    `,
+      {}
+    );
+  });
 });
diff --git a/demos/gantt.html b/demos/gantt.html
index 88f52ef5c9..9c82371abe 100644
--- a/demos/gantt.html
+++ b/demos/gantt.html
@@ -30,6 +30,21 @@ 
    Gantt chart diagram demos
    
     
    
     
    
 
+    
    +      gantt
+        title #; Gantt Diagrams Allow Semicolons and Hashtags #;!
+        accTitle: A simple sample gantt diagram
+        accDescr: 2 sections with 2 tasks each, from 2014
+        dateFormat  YYYY-MM-DD
+        section #;Section
+        #;A task           :a1, 2014-01-01, 30d
+        #;Another task     :after a1  , 20d
+        section #;Another
+        Task in sec      :2014-01-12  , 12d
+        another task      : 24d
+    
    
+    
    
+
     
         gantt
       title Airworks roadmap
diff --git a/packages/mermaid/src/diagrams/gantt/parser/gantt.spec.js b/packages/mermaid/src/diagrams/gantt/parser/gantt.spec.js
index e7ce1ffa4f..ae5f74249c 100644
--- a/packages/mermaid/src/diagrams/gantt/parser/gantt.spec.js
+++ b/packages/mermaid/src/diagrams/gantt/parser/gantt.spec.js
@@ -28,8 +28,12 @@ describe('when parsing a gantt diagram it', function () {
   });
   it('should handle a title definition', function () {
     const str = 'gantt\ndateFormat yyyy-mm-dd\ntitle Adding gantt diagram functionality to mermaid';
+    const semi = 'gantt\ndateFormat yyyy-mm-dd\ntitle ;Gantt diagram titles support semicolons';
+    const hash = 'gantt\ndateFormat yyyy-mm-dd\ntitle #Gantt diagram titles support hashtags';
 
     expect(parserFnConstructor(str)).not.toThrow();
+    expect(parserFnConstructor(semi)).not.toThrow();
+    expect(parserFnConstructor(hash)).not.toThrow();
   });
   it('should handle an excludes definition', function () {
     const str =
@@ -53,7 +57,23 @@ describe('when parsing a gantt diagram it', function () {
       'excludes weekdays 2019-02-01\n' +
       'section Documentation';
 
+    const semi =
+      'gantt\n' +
+      'dateFormat yyyy-mm-dd\n' +
+      'title Adding gantt diagram functionality to mermaid\n' +
+      'excludes weekdays 2019-02-01\n' +
+      'section ;Documentation';
+
+    const hash =
+      'gantt\n' +
+      'dateFormat yyyy-mm-dd\n' +
+      'title Adding gantt diagram functionality to mermaid\n' +
+      'excludes weekdays 2019-02-01\n' +
+      'section #Documentation';
+
     expect(parserFnConstructor(str)).not.toThrow();
+    expect(parserFnConstructor(semi)).not.toThrow();
+    expect(parserFnConstructor(hash)).not.toThrow();
   });
   it('should handle multiline section titles with different line breaks', function () {
     const str =
@@ -73,7 +93,23 @@ describe('when parsing a gantt diagram it', function () {
       'section Documentation\n' +
       'Design jison grammar:des1, 2014-01-01, 2014-01-04';
 
+    const semi =
+      'gantt\n' +
+      'dateFormat YYYY-MM-DD\n' +
+      'title Adding gantt diagram functionality to mermaid\n' +
+      'section Documentation\n' +
+      ';Design jison grammar:des1, 2014-01-01, 2014-01-04';
+
+    const hash =
+      'gantt\n' +
+      'dateFormat YYYY-MM-DD\n' +
+      'title Adding gantt diagram functionality to mermaid\n' +
+      'section Documentation\n' +
+      '#Design jison grammar:des1, 2014-01-01, 2014-01-04';
+
     expect(parserFnConstructor(str)).not.toThrow();
+    expect(parserFnConstructor(semi)).not.toThrow();
+    expect(parserFnConstructor(hash)).not.toThrow();
 
     const tasks = parser.yy.getTasks();