From b4f444869e6b3f996e5f1d58d83a6c94f6caff0d Mon Sep 17 00:00:00 2001 From: Faris Nabiev Date: Thu, 12 Oct 2023 16:39:31 +0300 Subject: [PATCH 001/122] 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(), + bar: domain.identity([]), + 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(), + bar: domain.identity([]), + 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(), + bar: domain.identity([]), + 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 = >(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: (value?: V) => value, + identity: (value: V) => value, +} as const; + +/* +const state = createImperativeState(() => ({ + foo: domain.optional(), + bar: domain.identity([]), + 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 Date: Fri, 13 Oct 2023 00:02:46 +0300 Subject: [PATCH 002/122] 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 @@ + + + + + + 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 003/122] 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 004/122] 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 005/122] 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 3128ba73a0be2dc06122ca8c0b4bae884a884958 Mon Sep 17 00:00:00 2001 From: Faris Date: Mon, 16 Oct 2023 19:36:44 +0300 Subject: [PATCH 006/122] 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 007/122] 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 5b705cf94ff3a595885077d8ad640801c27f591c Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Fri, 24 Nov 2023 14:11:49 +0530 Subject: [PATCH 008/122] 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 c0b80df1cbd75ab28f151ff20b2f21184ccfda34 Mon Sep 17 00:00:00 2001 From: Steph <35910788+huynhicode@users.noreply.github.com> Date: Mon, 27 Nov 2023 11:36:56 -0800 Subject: [PATCH 009/122] update announcement bar verbiage --- .../src/docs/.vitepress/components/TopBar.vue | 19 +++++++++++-------- .../src/docs/.vitepress/theme/index.ts | 6 +++--- 2 files changed, 14 insertions(+), 11 deletions(-) diff --git a/packages/mermaid/src/docs/.vitepress/components/TopBar.vue b/packages/mermaid/src/docs/.vitepress/components/TopBar.vue index d0a202c589..16da73c915 100644 --- a/packages/mermaid/src/docs/.vitepress/components/TopBar.vue +++ b/packages/mermaid/src/docs/.vitepress/components/TopBar.vue @@ -2,13 +2,16 @@
- - We've made our Product Hunt debut!   - Show us some love and help spread the word, plus receive 25% - off on annual Pro subscription! +

+ Happy Holidays! Get AI, team collaboration, storage, and more with + Mermaid Chart Pro. Use promo code: HOLIDAYS2023 to get + 25% off.View more details here. +

diff --git a/packages/mermaid/src/docs/.vitepress/theme/index.ts b/packages/mermaid/src/docs/.vitepress/theme/index.ts index 6561578106..344d602bda 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'; @@ -22,7 +22,7 @@ export default { Layout() { return h(Theme.Layout, null, { // 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-hero-before': () => h(TopBar), 'home-features-after': () => h(HomePage), }); }, From 8d53fa17da50627afc34fda2634395f6a8fdea84 Mon Sep 17 00:00:00 2001 From: Steph <35910788+huynhicode@users.noreply.github.com> Date: Mon, 27 Nov 2023 11:44:47 -0800 Subject: [PATCH 010/122] update announcements page --- docs/news/announcements.md | 13 +++++++++---- packages/mermaid/src/docs/news/announcements.md | 17 +++++++++++++---- 2 files changed, 22 insertions(+), 8 deletions(-) diff --git a/docs/news/announcements.md b/docs/news/announcements.md index 79e32f2f01..ec1525f26d 100644 --- a/docs/news/announcements.md +++ b/docs/news/announcements.md @@ -6,10 +6,15 @@ # Announcements -Check out our latest blog posts below. See more blog posts [here](blog.md). +## [Mermaid Chart](https://www.mermaidchart.com/) is running a Holiday promotion 🎉 -## [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/) +### Use HOLIDAYS2023 to get 25% off a Pro subscription -14 November 2023 · 5 mins +With a Pro subscription, you will get access to: -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. +- AI functionality +- Team collaboration and multi-user editing +- Unlimited diagrams +- and more! + +View details on how to redeem the promo code on the [Mermaid Chart website](https://www.mermaidchart.com/holiday-promo). diff --git a/packages/mermaid/src/docs/news/announcements.md b/packages/mermaid/src/docs/news/announcements.md index 7093d6fba0..3f0b1352d1 100644 --- a/packages/mermaid/src/docs/news/announcements.md +++ b/packages/mermaid/src/docs/news/announcements.md @@ -1,9 +1,18 @@ +--- +outline: 'deep' # shows all h3 headings in outline in Vitepress +--- + # Announcements -Check out our latest blog posts below. See more blog posts [here](blog.md). +## [Mermaid Chart](https://www.mermaidchart.com/) is running a Holiday promotion 🎉 + +### Use HOLIDAYS2023 to get 25% off a Pro subscription -## [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/) +With a Pro subscription, you will get access to: -14 November 2023 · 5 mins +- AI functionality +- Team collaboration and multi-user editing +- Unlimited diagrams +- and more! -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. +View details on how to redeem the promo code on the [Mermaid Chart website](https://www.mermaidchart.com/holiday-promo). From af9566df75f897d5e304cc8b9f2e27e119903724 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Tue, 28 Nov 2023 11:42:04 +0530 Subject: [PATCH 011/122] Update packages/mermaid/src/docs/.vitepress/components/TopBar.vue --- packages/mermaid/src/docs/.vitepress/components/TopBar.vue | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/mermaid/src/docs/.vitepress/components/TopBar.vue b/packages/mermaid/src/docs/.vitepress/components/TopBar.vue index 16da73c915..025bfcf1ae 100644 --- a/packages/mermaid/src/docs/.vitepress/components/TopBar.vue +++ b/packages/mermaid/src/docs/.vitepress/components/TopBar.vue @@ -8,7 +8,6 @@ 25% off.View more details here. From a1563c9f7d023371c358b654f904027b5e94dac1 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Tue, 28 Nov 2023 13:39:46 +0530 Subject: [PATCH 012/122] docs: Holiday promo v2 --- .../src/docs/.vitepress/components/TopBar.vue | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/packages/mermaid/src/docs/.vitepress/components/TopBar.vue b/packages/mermaid/src/docs/.vitepress/components/TopBar.vue index 025bfcf1ae..ec68cff134 100644 --- a/packages/mermaid/src/docs/.vitepress/components/TopBar.vue +++ b/packages/mermaid/src/docs/.vitepress/components/TopBar.vue @@ -3,14 +3,16 @@ class="w-full top-bar bg-gradient-to-r from-[#bd34fe] to-[#ff3670] flex items-center text-center justify-center p-1 text-white" >

- Happy Holidays! Get AI, team collaboration, storage, and more with - Mermaid Chart Pro. Use promo code: HOLIDAYS2023 to get - 25% off.View more details here. + Get AI, team collaboration, storage, and more with + Mermaid Chart Pro. Start free trial today & get 25% off. +

From 9be9601927ac7a62450e1794d7c8c8be1a61f8d8 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Fri, 1 Dec 2023 12:04:30 +0530 Subject: [PATCH 013/122] chore: Update promo link --- docs/news/announcements.md | 2 +- packages/mermaid/src/docs/.vitepress/components/TopBar.vue | 2 +- packages/mermaid/src/docs/news/announcements.md | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/news/announcements.md b/docs/news/announcements.md index ec1525f26d..d1eaa525e3 100644 --- a/docs/news/announcements.md +++ b/docs/news/announcements.md @@ -17,4 +17,4 @@ With a Pro subscription, you will get access to: - Unlimited diagrams - and more! -View details on how to redeem the promo code on the [Mermaid Chart website](https://www.mermaidchart.com/holiday-promo). +View details on how to redeem the promo code on the [Mermaid Chart website](https://www.mermaidchart.com/app/user/billing/checkout?coupon=HOLIDAYS2023). diff --git a/packages/mermaid/src/docs/.vitepress/components/TopBar.vue b/packages/mermaid/src/docs/.vitepress/components/TopBar.vue index ec68cff134..6fdf78c61a 100644 --- a/packages/mermaid/src/docs/.vitepress/components/TopBar.vue +++ b/packages/mermaid/src/docs/.vitepress/components/TopBar.vue @@ -4,7 +4,7 @@ >

diff --git a/packages/mermaid/src/docs/news/announcements.md b/packages/mermaid/src/docs/news/announcements.md index 3f0b1352d1..6e947065fb 100644 --- a/packages/mermaid/src/docs/news/announcements.md +++ b/packages/mermaid/src/docs/news/announcements.md @@ -15,4 +15,4 @@ With a Pro subscription, you will get access to: - Unlimited diagrams - and more! -View details on how to redeem the promo code on the [Mermaid Chart website](https://www.mermaidchart.com/holiday-promo). +View details on how to redeem the promo code on the [Mermaid Chart website](https://www.mermaidchart.com/app/user/billing/checkout?coupon=HOLIDAYS2023). From 60ea9a29720a951af2dc1e44c3b422d47d0e3325 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Mon, 4 Dec 2023 12:20:40 +0530 Subject: [PATCH 014/122] v10.6.2-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 dc1ae320aa..654955fe57 100644 --- a/packages/mermaid/package.json +++ b/packages/mermaid/package.json @@ -1,6 +1,6 @@ { "name": "mermaid", - "version": "10.6.2-rc.1", + "version": "10.6.2-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 80fa3e959783d4b8bd64231289d0b8249fc03609 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Mon, 4 Dec 2023 12:28:05 +0530 Subject: [PATCH 015/122] update docs --- docs/syntax/classDiagram.md | 6 +++--- packages/mermaid/src/docs/syntax/classDiagram.md | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/syntax/classDiagram.md b/docs/syntax/classDiagram.md index 2f2c3da888..1701b374e3 100644 --- a/docs/syntax/classDiagram.md +++ b/docs/syntax/classDiagram.md @@ -459,9 +459,9 @@ The different cardinality options are : - `0..1` Zero or One - `1..*` One or more - `*` Many -- `n` n {where n>1} -- `0..n` zero to n {where n>1} -- `1..n` one to n {where n>1} +- `n` n (where n>1) +- `0..n` zero to n (where n>1) +- `1..n` one to n (where n>1) Cardinality can be easily defined by placing the text option within quotes `"` before or after a given arrow. For example: diff --git a/packages/mermaid/src/docs/syntax/classDiagram.md b/packages/mermaid/src/docs/syntax/classDiagram.md index f02ae67be9..9d87cc3379 100644 --- a/packages/mermaid/src/docs/syntax/classDiagram.md +++ b/packages/mermaid/src/docs/syntax/classDiagram.md @@ -304,9 +304,9 @@ The different cardinality options are : - `0..1` Zero or One - `1..*` One or more - `*` Many -- `n` n {where n>1} -- `0..n` zero to n {where n>1} -- `1..n` one to n {where n>1} +- `n` n (where n>1) +- `0..n` zero to n (where n>1) +- `1..n` one to n (where n>1) Cardinality can be easily defined by placing the text option within quotes `"` before or after a given arrow. For example: From 78c44bf7938c05a45e896367f0ba78807068f931 Mon Sep 17 00:00:00 2001 From: Steph <35910788+huynhicode@users.noreply.github.com> Date: Mon, 4 Dec 2023 11:07:55 -0800 Subject: [PATCH 016/122] add blog post --- docs/news/announcements.md | 12 ++++++++++-- docs/news/blog.md | 6 ++++++ packages/mermaid/src/docs/news/announcements.md | 12 ++++++++++-- packages/mermaid/src/docs/news/blog.md | 6 ++++++ 4 files changed, 32 insertions(+), 4 deletions(-) diff --git a/docs/news/announcements.md b/docs/news/announcements.md index d1eaa525e3..6e1daa81a8 100644 --- a/docs/news/announcements.md +++ b/docs/news/announcements.md @@ -6,7 +6,7 @@ # Announcements -## [Mermaid Chart](https://www.mermaidchart.com/) is running a Holiday promotion 🎉 +## 🎉 [Mermaid Chart](https://www.mermaidchart.com/) is running a Holiday promotion ### Use HOLIDAYS2023 to get 25% off a Pro subscription @@ -17,4 +17,12 @@ With a Pro subscription, you will get access to: - Unlimited diagrams - and more! -View details on how to redeem the promo code on the [Mermaid Chart website](https://www.mermaidchart.com/app/user/billing/checkout?coupon=HOLIDAYS2023). +Redeem the promo code on the [Mermaid Chart website](https://www.mermaidchart.com/app/user/billing/checkout?coupon=HOLIDAYS2023). + +## 🤓 Read our latest blog post + +### [7 best practices (+ examples) for good developer documentation](https://www.mermaidchart.com/blog/posts/7-best-practices-for-good-documentation/) + +4 December 2023 · 11 min + +Essential strategies for crafting grate developer documentation, with practical examples and insights from leading tech companies. diff --git a/docs/news/blog.md b/docs/news/blog.md index da20ed1bb6..7c9deb0122 100644 --- a/docs/news/blog.md +++ b/docs/news/blog.md @@ -6,6 +6,12 @@ # Blog +## [7 best practices (+ examples) for good developer documentation](https://www.mermaidchart.com/blog/posts/7-best-practices-for-good-documentation/) + +4 December 2023 · 11 min + +Essential strategies for crafting grate developer documentation, with practical examples and insights from leading tech companies. + ## [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 diff --git a/packages/mermaid/src/docs/news/announcements.md b/packages/mermaid/src/docs/news/announcements.md index 6e947065fb..430fc74d18 100644 --- a/packages/mermaid/src/docs/news/announcements.md +++ b/packages/mermaid/src/docs/news/announcements.md @@ -4,7 +4,7 @@ outline: 'deep' # shows all h3 headings in outline in Vitepress # Announcements -## [Mermaid Chart](https://www.mermaidchart.com/) is running a Holiday promotion 🎉 +## 🎉 [Mermaid Chart](https://www.mermaidchart.com/) is running a Holiday promotion ### Use HOLIDAYS2023 to get 25% off a Pro subscription @@ -15,4 +15,12 @@ With a Pro subscription, you will get access to: - Unlimited diagrams - and more! -View details on how to redeem the promo code on the [Mermaid Chart website](https://www.mermaidchart.com/app/user/billing/checkout?coupon=HOLIDAYS2023). +Redeem the promo code on the [Mermaid Chart website](https://www.mermaidchart.com/app/user/billing/checkout?coupon=HOLIDAYS2023). + +## 🤓 Read our latest blog post + +### [7 best practices (+ examples) for good developer documentation](https://www.mermaidchart.com/blog/posts/7-best-practices-for-good-documentation/) + +4 December 2023 · 11 min + +Essential strategies for crafting grate developer documentation, with practical examples and insights from leading tech companies. diff --git a/packages/mermaid/src/docs/news/blog.md b/packages/mermaid/src/docs/news/blog.md index d9bf6a8b72..9192774f5a 100644 --- a/packages/mermaid/src/docs/news/blog.md +++ b/packages/mermaid/src/docs/news/blog.md @@ -1,5 +1,11 @@ # Blog +## [7 best practices (+ examples) for good developer documentation](https://www.mermaidchart.com/blog/posts/7-best-practices-for-good-documentation/) + +4 December 2023 · 11 min + +Essential strategies for crafting grate developer documentation, with practical examples and insights from leading tech companies. + ## [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 From 239fad94ee142a114f8c3c710c1072c0821edbe4 Mon Sep 17 00:00:00 2001 From: Justin Greywolf Date: Mon, 4 Dec 2023 13:28:31 -0800 Subject: [PATCH 017/122] Grammar/rendering for setting style on class node --- .../rendering/classDiagram-v2.spec.js | 10 ++++++++ docs/syntax/classDiagram.md | 23 ++++++++++++++++- packages/mermaid/src/dagre-wrapper/nodes.js | 1 + .../mermaid/src/diagrams/class/classDb.ts | 20 +++++++++++++++ .../class/classDiagram-styles.spec.js | 13 ++++++++++ .../src/diagrams/class/classRenderer-v2.ts | 2 +- .../mermaid/src/diagrams/class/classTypes.ts | 1 + .../diagrams/class/parser/classDiagram.jison | 25 ++++++++++++++++++- 8 files changed, 92 insertions(+), 3 deletions(-) diff --git a/cypress/integration/rendering/classDiagram-v2.spec.js b/cypress/integration/rendering/classDiagram-v2.spec.js index 37e9cada02..20a1aea0ab 100644 --- a/cypress/integration/rendering/classDiagram-v2.spec.js +++ b/cypress/integration/rendering/classDiagram-v2.spec.js @@ -571,4 +571,14 @@ class C13["With Città foreign language"] { logLevel: 1, flowchart: { htmlLabels: false } } ); }); + it('should render a simple class diagram with style definition', () => { + imgSnapshotTest( + ` + classDiagram-v2 + class Class10 + style Class10 fill:#f9f,stroke:#333,stroke-width:4px + `, + { logLevel: 1, flowchart: { htmlLabels: false } } + ); + }); }); diff --git a/docs/syntax/classDiagram.md b/docs/syntax/classDiagram.md index 2f2c3da888..b2d5a8c897 100644 --- a/docs/syntax/classDiagram.md +++ b/docs/syntax/classDiagram.md @@ -768,7 +768,28 @@ Beginner's tip—a full example using interactive links in an HTML page: ### Styling a node -It is possible to apply specific styles such as a thicker border or a different background color to individual nodes. This is done by predefining classes in css styles that can be applied from the graph definition using the `cssClass` statement or the `:::` short hand. +It is possible to apply specific styles such as a thicker border or a different background color to a node. + +```mermaid-example +classDiagram + class Animal + class Mineral + style Animal fill:#f9f,stroke:#333,stroke-width:4px + style Mineral fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5 +``` + +```mermaid +classDiagram + class Animal + class Mineral + style Animal fill:#f9f,stroke:#333,stroke-width:4px + style Mineral fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5 +``` + +#### Classes + +More convenient than defining the style every time is to define a class of styles and attach this class to the nodes that +should have a different look. This is done by predefining classes in css styles that can be applied from the graph definition using the `cssClass` statement or the `:::` short hand. ```html