diff --git a/docs/news/announcements.md b/docs/news/announcements.md index 1837b33db..ff67c57d0 100644 --- a/docs/news/announcements.md +++ b/docs/news/announcements.md @@ -6,8 +6,8 @@ # Announcements -## [Sequence diagrams, the only good thing UML brought to software development](https://www.mermaidchart.com/blog/posts/sequence-diagrams-the-good-thing-uml-brought-to-software-development/) +## [Mermaid Chart’s ChatGPT Plugin Combines Generative AI and Smart Diagramming For Users](https://www.mermaidchart.com/blog/posts/mermaid-chart-chatgpt-plugin-combines-generative-ai-and-smart-diagramming) -15 June 2023 · 12 mins +29 June 2023 · 4 mins -Sequence diagrams really shine when you’re documenting different parts of a system and the various ways these parts interact with each other. +Mermaid Chart’s new ChatGPT plugin integrates AI-powered text prompts with Mermaid’s intuitive diagramming editor, enabling users to generate, edit, and share complex diagrams with ease and efficiency. diff --git a/docs/news/blog.md b/docs/news/blog.md index eb9ec6c47..6b187d406 100644 --- a/docs/news/blog.md +++ b/docs/news/blog.md @@ -6,6 +6,12 @@ # Blog +## [Mermaid Chart’s ChatGPT Plugin Combines Generative AI and Smart Diagramming For Users](https://www.mermaidchart.com/blog/posts/mermaid-chart-chatgpt-plugin-combines-generative-ai-and-smart-diagramming) + +29 June 2023 · 4 mins + +Mermaid Chart’s new ChatGPT plugin integrates AI-powered text prompts with Mermaid’s intuitive diagramming editor, enabling users to generate, edit, and share complex diagrams with ease and efficiency. + ## [Sequence diagrams, the only good thing UML brought to software development](https://www.mermaidchart.com/blog/posts/sequence-diagrams-the-good-thing-uml-brought-to-software-development/) 15 June 2023 · 12 mins diff --git a/docs/syntax/flowchart.md b/docs/syntax/flowchart.md index a47061025..92678fb6e 100644 --- a/docs/syntax/flowchart.md +++ b/docs/syntax/flowchart.md @@ -991,6 +991,24 @@ flowchart LR classDef someclass fill:#f96 ``` +This form can be used when declaring multiple links between nodes: + +```mermaid-example +flowchart LR + A:::foo & B:::bar --> C:::foobar + classDef foo stroke:#f00 + classDef bar stroke:#0f0 + classDef foobar stroke:#00f +``` + +```mermaid +flowchart LR + A:::foo & B:::bar --> C:::foobar + classDef foo stroke:#f00 + classDef bar stroke:#0f0 + classDef foobar stroke:#00f +``` + ### Css classes It is also possible to predefine classes in css styles that can be applied from the graph definition as in the example diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json index 66bac897f..aa254e967 100644 --- a/packages/mermaid/package.json +++ b/packages/mermaid/package.json @@ -30,6 +30,7 @@ "docs:pre:vitepress": "rimraf src/vitepress && pnpm docs:code && ts-node-esm src/docs.mts --vitepress && pnpm --filter ./src/vitepress install --no-frozen-lockfile --ignore-scripts ", "docs:build:vitepress": "pnpm docs:pre:vitepress && (cd src/vitepress && pnpm run build) && cpy --flat src/docs/landing/ ./src/vitepress/.vitepress/dist/landing", "docs:dev": "pnpm docs:pre:vitepress && concurrently \"pnpm --filter ./src/vitepress dev\" \"ts-node-esm src/docs.mts --watch --vitepress\"", + "docs:dev:docker": "pnpm docs:pre:vitepress && concurrently \"pnpm --filter ./src/vitepress dev:docker\" \"ts-node-esm src/docs.mts --watch --vitepress\"", "docs:serve": "pnpm docs:build:vitepress && vitepress serve src/vitepress", "docs:spellcheck": "cspell --config ../../cSpell.json \"src/docs/**/*.md\"", "types:build-config": "ts-node-esm --transpileOnly scripts/create-types-from-json-schema.mts", diff --git a/packages/mermaid/src/config.spec.js b/packages/mermaid/src/config.spec.js deleted file mode 100644 index b143c837a..000000000 --- a/packages/mermaid/src/config.spec.js +++ /dev/null @@ -1,93 +0,0 @@ -import isObject from 'lodash-es/isObject.js'; -import * as configApi from './config.js'; - -describe('when working with site config', function () { - beforeEach(() => { - // Resets the site config to default config - configApi.setSiteConfig({}); - }); - it('should set site config and config properly', function () { - let config_0 = { foo: 'bar', bar: 0 }; - configApi.setSiteConfig(config_0); - let config_1 = configApi.getSiteConfig(); - let config_2 = configApi.getConfig(); - expect(config_1.foo).toEqual(config_0.foo); - expect(config_1.bar).toEqual(config_0.bar); - expect(config_1).toEqual(config_2); - }); - it('should respect secure keys when applying directives', function () { - let config_0 = { - foo: 'bar', - bar: 'cant-be-changed', - secure: [...configApi.defaultConfig.secure, 'bar'], - }; - configApi.setSiteConfig(config_0); - const directive = { foo: 'baf', bar: 'should-not-be-allowed' }; - const cfg = configApi.updateCurrentConfig(config_0, [directive]); - expect(cfg.foo).toEqual(directive.foo); - expect(cfg.bar).toBe(config_0.bar); - }); - it('should set reset config properly', function () { - let config_0 = { foo: 'bar', bar: 0 }; - configApi.setSiteConfig(config_0); - let config_1 = { foo: 'baf' }; - configApi.setConfig(config_1); - let config_2 = configApi.getConfig(); - expect(config_2.foo).toEqual(config_1.foo); - configApi.reset(); - let config_3 = configApi.getConfig(); - expect(config_3.foo).toEqual(config_0.foo); - let config_4 = configApi.getSiteConfig(); - expect(config_4.foo).toEqual(config_0.foo); - }); - it('should set global reset config properly', function () { - let config_0 = { foo: 'bar', bar: 0 }; - configApi.setSiteConfig(config_0); - let config_1 = configApi.getSiteConfig(); - expect(config_1.foo).toEqual(config_0.foo); - let config_2 = configApi.getConfig(); - expect(config_2.foo).toEqual(config_0.foo); - configApi.setConfig({ foobar: 'bar0' }); - let config_3 = configApi.getConfig(); - expect(config_3.foobar).toEqual('bar0'); - configApi.reset(); - let config_4 = configApi.getConfig(); - expect(config_4.foobar).toBeUndefined(); - }); - - it('test new default config', async function () { - const { default: oldDefault } = await import('./oldDefaultConfig.js'); - // gitGraph used to not have this option (aka it was `undefined`) - oldDefault.gitGraph.useMaxWidth = false; - - // class diagrams used to not have these options set (aka they were `undefined`) - oldDefault.class.htmlLabels = false; - - const { default: newDefault } = await import('./defaultConfig.js'); - - // check subsets of the objects, to improve vitest error messages - // we can't just use `expect(newDefault).to.deep.equal(oldDefault);` - // because the functions in the config won't be the same - expect(new Set(Object.keys(newDefault))).to.deep.equal(new Set(Object.keys(oldDefault))); - - for (const key in newDefault) { - // recurse through object, since we want to treat functions differently - if (!Array.isArray(newDefault[key]) && isObject(newDefault[key])) { - expect(new Set(Object.keys(newDefault[key]))).to.deep.equal( - new Set(Object.keys(oldDefault[key])) - ); - for (const key2 in newDefault[key]) { - if (typeof newDefault[key][key2] === 'function') { - expect(newDefault[key][key2].toString()).to.deep.equal( - oldDefault[key][key2].toString() - ); - } else { - expect(newDefault[key]).to.have.deep.property(key2, oldDefault[key][key2]); - } - } - } else { - expect(newDefault[key]).to.deep.equal(oldDefault[key]); - } - } - }); -}); diff --git a/packages/mermaid/src/config.spec.ts b/packages/mermaid/src/config.spec.ts new file mode 100644 index 000000000..457cb8244 --- /dev/null +++ b/packages/mermaid/src/config.spec.ts @@ -0,0 +1,72 @@ +import * as configApi from './config.js'; + +describe('when working with site config', function () { + beforeEach(() => { + // Resets the site config to default config + configApi.setSiteConfig({}); + }); + it('should set site config and config properly', function () { + const config_0 = { fontFamily: 'foo-font', fontSize: 150 }; + configApi.setSiteConfig(config_0); + const config_1 = configApi.getSiteConfig(); + const config_2 = configApi.getConfig(); + expect(config_1.fontFamily).toEqual(config_0.fontFamily); + expect(config_1.fontSize).toEqual(config_0.fontSize); + expect(config_1).toEqual(config_2); + }); + it('should respect secure keys when applying directives', function () { + const config_0 = { + fontFamily: 'foo-font', + fontSize: 12345, // can't be changed + secure: [...configApi.defaultConfig.secure!, 'fontSize'], + }; + configApi.setSiteConfig(config_0); + const directive = { fontFamily: 'baf', fontSize: 54321 /* fontSize shouldn't be changed */ }; + const cfg = configApi.updateCurrentConfig(config_0, [directive]); + expect(cfg.fontFamily).toEqual(directive.fontFamily); + expect(cfg.fontSize).toBe(config_0.fontSize); + }); + it('should allow setting partial options', function () { + const defaultConfig = configApi.getConfig(); + + configApi.setConfig({ + quadrantChart: { + chartHeight: 600, + }, + }); + + const updatedConfig = configApi.getConfig(); + + // deep options we didn't update should remain the same + expect(defaultConfig.quadrantChart!.chartWidth).toEqual( + updatedConfig.quadrantChart!.chartWidth + ); + }); + it('should set reset config properly', function () { + const config_0 = { fontFamily: 'foo-font', fontSize: 150 }; + configApi.setSiteConfig(config_0); + const config_1 = { fontFamily: 'baf' }; + configApi.setConfig(config_1); + const config_2 = configApi.getConfig(); + expect(config_2.fontFamily).toEqual(config_1.fontFamily); + configApi.reset(); + const config_3 = configApi.getConfig(); + expect(config_3.fontFamily).toEqual(config_0.fontFamily); + const config_4 = configApi.getSiteConfig(); + expect(config_4.fontFamily).toEqual(config_0.fontFamily); + }); + it('should set global reset config properly', function () { + const config_0 = { fontFamily: 'foo-font', fontSize: 150 }; + configApi.setSiteConfig(config_0); + const config_1 = configApi.getSiteConfig(); + expect(config_1.fontFamily).toEqual(config_0.fontFamily); + const config_2 = configApi.getConfig(); + expect(config_2.fontFamily).toEqual(config_0.fontFamily); + configApi.setConfig({ altFontFamily: 'bar-font' }); + const config_3 = configApi.getConfig(); + expect(config_3.altFontFamily).toEqual('bar-font'); + configApi.reset(); + const config_4 = configApi.getConfig(); + expect(config_4.altFontFamily).toBeUndefined(); + }); +}); diff --git a/packages/mermaid/src/diagrams/flowchart/flowDb.js b/packages/mermaid/src/diagrams/flowchart/flowDb.js index ceb933e85..ea8fa71d2 100644 --- a/packages/mermaid/src/diagrams/flowchart/flowDb.js +++ b/packages/mermaid/src/diagrams/flowchart/flowDb.js @@ -342,7 +342,10 @@ export const setLink = function (ids, linkStr, target) { setClass(ids, 'clickable'); }; export const getTooltip = function (id) { - return tooltips[id]; + if (tooltips.hasOwnProperty(id)) { + return tooltips[id]; + } + return undefined; }; /** @@ -443,7 +446,7 @@ export const clear = function (ver = 'gen-1') { subGraphs = []; subGraphLookup = {}; subCount = 0; - tooltips = []; + tooltips = {}; firstGraphFlag = true; version = ver; commonClear(); diff --git a/packages/mermaid/src/docs/.vitepress/components/HomePage.vue b/packages/mermaid/src/docs/.vitepress/components/HomePage.vue index 19f3912a7..b6998f249 100644 --- a/packages/mermaid/src/docs/.vitepress/components/HomePage.vue +++ b/packages/mermaid/src/docs/.vitepress/components/HomePage.vue @@ -16,8 +16,12 @@ import { teamMembers } from '../contributors';


- Join the community and - get involved! + Join the community + and get involved!

diff --git a/packages/mermaid/src/docs/news/announcements.md b/packages/mermaid/src/docs/news/announcements.md index 83dafaab6..b8d0669ec 100644 --- a/packages/mermaid/src/docs/news/announcements.md +++ b/packages/mermaid/src/docs/news/announcements.md @@ -1,7 +1,7 @@ # Announcements -## [Sequence diagrams, the only good thing UML brought to software development](https://www.mermaidchart.com/blog/posts/sequence-diagrams-the-good-thing-uml-brought-to-software-development/) +## [Mermaid Chart’s ChatGPT Plugin Combines Generative AI and Smart Diagramming For Users](https://www.mermaidchart.com/blog/posts/mermaid-chart-chatgpt-plugin-combines-generative-ai-and-smart-diagramming) -15 June 2023 · 12 mins +29 June 2023 · 4 mins -Sequence diagrams really shine when you’re documenting different parts of a system and the various ways these parts interact with each other. +Mermaid Chart’s new ChatGPT plugin integrates AI-powered text prompts with Mermaid’s intuitive diagramming editor, enabling users to generate, edit, and share complex diagrams with ease and efficiency. diff --git a/packages/mermaid/src/docs/news/blog.md b/packages/mermaid/src/docs/news/blog.md index 61d53656d..b536cb87e 100644 --- a/packages/mermaid/src/docs/news/blog.md +++ b/packages/mermaid/src/docs/news/blog.md @@ -1,5 +1,11 @@ # Blog +## [Mermaid Chart’s ChatGPT Plugin Combines Generative AI and Smart Diagramming For Users](https://www.mermaidchart.com/blog/posts/mermaid-chart-chatgpt-plugin-combines-generative-ai-and-smart-diagramming) + +29 June 2023 · 4 mins + +Mermaid Chart’s new ChatGPT plugin integrates AI-powered text prompts with Mermaid’s intuitive diagramming editor, enabling users to generate, edit, and share complex diagrams with ease and efficiency. + ## [Sequence diagrams, the only good thing UML brought to software development](https://www.mermaidchart.com/blog/posts/sequence-diagrams-the-good-thing-uml-brought-to-software-development/) 15 June 2023 · 12 mins diff --git a/packages/mermaid/src/docs/package.json b/packages/mermaid/src/docs/package.json index 6e1934022..4529a7622 100644 --- a/packages/mermaid/src/docs/package.json +++ b/packages/mermaid/src/docs/package.json @@ -4,6 +4,7 @@ "type": "module", "scripts": { "dev": "vitepress --port 3333 --open", + "dev:docker": "vitepress --port 3333 --host", "build": "pnpm prefetch && vitepress build", "build-no-prefetch": "vitepress build", "serve": "vitepress serve", diff --git a/packages/mermaid/src/docs/syntax/flowchart.md b/packages/mermaid/src/docs/syntax/flowchart.md index 80cb242d6..2e3d78c30 100644 --- a/packages/mermaid/src/docs/syntax/flowchart.md +++ b/packages/mermaid/src/docs/syntax/flowchart.md @@ -676,6 +676,16 @@ flowchart LR classDef someclass fill:#f96 ``` +This form can be used when declaring multiple links between nodes: + +```mermaid-example +flowchart LR + A:::foo & B:::bar --> C:::foobar + classDef foo stroke:#f00 + classDef bar stroke:#0f0 + classDef foobar stroke:#00f +``` + ### Css classes It is also possible to predefine classes in css styles that can be applied from the graph definition as in the example diff --git a/run b/run index d9f669cab..cc169e209 100755 --- a/run +++ b/run @@ -27,7 +27,7 @@ $RUN --service-ports mermaid sh -c "npx pnpm run dev" ;; docs:dev) -$RUN --service-ports mermaid sh -c "cd packages/mermaid/src/docs && npx pnpm prefetch && npx vitepress --port 3333 --host" +$RUN --service-ports mermaid sh -c "npx pnpm run --filter mermaid docs:dev:docker" ;; cypress)