From 0cab66c9d81ea2f48485a2c4bf2c187c06a01fbf Mon Sep 17 00:00:00 2001 From: Lishid Date: Thu, 29 Jun 2023 15:33:35 -0400 Subject: [PATCH 01/31] Fix flowchart tooltip typing Tooltip is an object that gets reset to an array. It is then looked up for properties without guard, causing array functions like "length" and "constructor" to run into undefined behvaior. --- packages/mermaid/src/diagrams/flowchart/flowDb.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/mermaid/src/diagrams/flowchart/flowDb.js b/packages/mermaid/src/diagrams/flowchart/flowDb.js index ceb933e85..81a9afb94 100644 --- a/packages/mermaid/src/diagrams/flowchart/flowDb.js +++ b/packages/mermaid/src/diagrams/flowchart/flowDb.js @@ -342,7 +342,8 @@ 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 +444,7 @@ export const clear = function (ver = 'gen-1') { subGraphs = []; subGraphLookup = {}; subCount = 0; - tooltips = []; + tooltips = {}; firstGraphFlag = true; version = ver; commonClear(); From efa3ba639765d2375578a4c8c0b5bbada142cecc Mon Sep 17 00:00:00 2001 From: Steph <35910788+huynhicode@users.noreply.github.com> Date: Fri, 30 Jun 2023 11:08:42 -0700 Subject: [PATCH 02/31] add ChatGPT plugin 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 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/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 From 032830d7e0a15415e09b4d843d21b6268c2b4314 Mon Sep 17 00:00:00 2001 From: sidharthv96 Date: Fri, 30 Jun 2023 19:02:57 +0000 Subject: [PATCH 03/31] Update docs --- docs/syntax/stateDiagram.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/syntax/stateDiagram.md b/docs/syntax/stateDiagram.md index 807d6149a..4c28c82b3 100644 --- a/docs/syntax/stateDiagram.md +++ b/docs/syntax/stateDiagram.md @@ -487,7 +487,7 @@ where - the second _property_ is `color` and its _value_ is `white` - the third _property_ is `font-weight` and its _value_ is `bold` - the fourth _property_ is `stroke-width` and its _value_ is `2px` -- the fifth _property_ is `stroke` and its _value_ is `yello` +- the fifth _property_ is `stroke` and its _value_ is `yellow` ### Apply classDef styles to states From 12fe6ff26ec4fbb6518611a4a200373a73c01369 Mon Sep 17 00:00:00 2001 From: Lishid Date: Mon, 3 Jul 2023 18:56:00 -0700 Subject: [PATCH 04/31] Fix lint. --- packages/mermaid/src/diagrams/flowchart/flowDb.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/mermaid/src/diagrams/flowchart/flowDb.js b/packages/mermaid/src/diagrams/flowchart/flowDb.js index 81a9afb94..ea8fa71d2 100644 --- a/packages/mermaid/src/diagrams/flowchart/flowDb.js +++ b/packages/mermaid/src/diagrams/flowchart/flowDb.js @@ -342,7 +342,9 @@ export const setLink = function (ids, linkStr, target) { setClass(ids, 'clickable'); }; export const getTooltip = function (id) { - if (tooltips.hasOwnProperty(id)) return tooltips[id]; + if (tooltips.hasOwnProperty(id)) { + return tooltips[id]; + } return undefined; }; From 34b2b5ba352c24c06492b9bd0207e81ae0774641 Mon Sep 17 00:00:00 2001 From: Nikolay Rozhkov Date: Wed, 5 Jul 2023 17:25:07 +0300 Subject: [PATCH 05/31] Support docs:dev in docker --- packages/mermaid/src/docs/package.json | 2 +- run | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/mermaid/src/docs/package.json b/packages/mermaid/src/docs/package.json index 6e1934022..3dd83fafc 100644 --- a/packages/mermaid/src/docs/package.json +++ b/packages/mermaid/src/docs/package.json @@ -3,7 +3,7 @@ "private": true, "type": "module", "scripts": { - "dev": "vitepress --port 3333 --open", + "dev": "vitepress --port 3333 --host", "build": "pnpm prefetch && vitepress build", "build-no-prefetch": "vitepress build", "serve": "vitepress serve", diff --git a/run b/run index d9f669cab..1d5ef306f 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" ;; cypress) From 95d62367e90839fe84824ded6da7d40d355c6206 Mon Sep 17 00:00:00 2001 From: Nikolay Rozhkov Date: Wed, 5 Jul 2023 19:39:05 +0300 Subject: [PATCH 06/31] Add docker-specific command, leave commonly used command intact --- packages/mermaid/package.json | 1 + packages/mermaid/src/docs/package.json | 3 ++- run | 2 +- 3 files changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json index c73275a6f..e630f80fb 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\"", "release": "pnpm build", diff --git a/packages/mermaid/src/docs/package.json b/packages/mermaid/src/docs/package.json index 3dd83fafc..4529a7622 100644 --- a/packages/mermaid/src/docs/package.json +++ b/packages/mermaid/src/docs/package.json @@ -3,7 +3,8 @@ "private": true, "type": "module", "scripts": { - "dev": "vitepress --port 3333 --host", + "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/run b/run index 1d5ef306f..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 "npx pnpm run --filter mermaid docs:dev" +$RUN --service-ports mermaid sh -c "npx pnpm run --filter mermaid docs:dev:docker" ;; cypress) From fcb25aee7cdaad985cbb63740a245e09d1692415 Mon Sep 17 00:00:00 2001 From: Tom PERRILLAT-COLLOMB Date: Wed, 5 Jul 2023 20:57:37 +0200 Subject: [PATCH 07/31] docs(flowchart): add documentation on multiple nodes style --- docs/syntax/flowchart.md | 18 ++++++++++++++++++ packages/mermaid/src/docs/syntax/flowchart.md | 10 ++++++++++ 2 files changed, 28 insertions(+) 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/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 From 5e7e3e21c86ca67d3c0d629c8b1238d4cf7b3b69 Mon Sep 17 00:00:00 2001 From: Steph <35910788+huynhicode@users.noreply.github.com> Date: Wed, 5 Jul 2023 13:42:42 -0700 Subject: [PATCH 08/31] update homepage community link --- packages/mermaid/src/docs/.vitepress/components/HomePage.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mermaid/src/docs/.vitepress/components/HomePage.vue b/packages/mermaid/src/docs/.vitepress/components/HomePage.vue index 19f3912a7..70cd04c44 100644 --- a/packages/mermaid/src/docs/.vitepress/components/HomePage.vue +++ b/packages/mermaid/src/docs/.vitepress/components/HomePage.vue @@ -16,7 +16,7 @@ import { teamMembers } from '../contributors';


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

From 9251e520abdd107248a2416da08ccb3485a63bb1 Mon Sep 17 00:00:00 2001 From: Steph <35910788+huynhicode@users.noreply.github.com> Date: Wed, 5 Jul 2023 13:50:33 -0700 Subject: [PATCH 09/31] fix lint --- .../mermaid/src/docs/.vitepress/components/HomePage.vue | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/mermaid/src/docs/.vitepress/components/HomePage.vue b/packages/mermaid/src/docs/.vitepress/components/HomePage.vue index 70cd04c44..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!

From 38013de7114966e8b1a83396703ef8158bb34466 Mon Sep 17 00:00:00 2001 From: Alois Klink Date: Thu, 6 Jul 2023 01:06:01 +0100 Subject: [PATCH 10/31] fix(quadrant): make quadrant options optional Make the types of the options in QuadrantChartConfig in the MermaidConfig optional. All of these (except for the values in `BaseDiagramConfig`) will be automatically set to their default values, so they're optional from a user perspective. --- packages/mermaid/src/config.type.ts | 36 +++++++++---------- .../quadrant-chart/quadrantBuilder.ts | 5 +-- 2 files changed, 21 insertions(+), 20 deletions(-) diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts index 138eee44f..3b5826d1a 100644 --- a/packages/mermaid/src/config.type.ts +++ b/packages/mermaid/src/config.type.ts @@ -229,24 +229,24 @@ export interface PieDiagramConfig extends BaseDiagramConfig { } export interface QuadrantChartConfig extends BaseDiagramConfig { - chartWidth: number; - chartHeight: number; - titleFontSize: number; - titlePadding: number; - quadrantPadding: number; - xAxisLabelPadding: number; - yAxisLabelPadding: number; - xAxisLabelFontSize: number; - yAxisLabelFontSize: number; - quadrantLabelFontSize: number; - quadrantTextTopPadding: number; - pointTextPadding: number; - pointLabelFontSize: number; - pointRadius: number; - xAxisPosition: 'top' | 'bottom'; - yAxisPosition: 'left' | 'right'; - quadrantInternalBorderStrokeWidth: number; - quadrantExternalBorderStrokeWidth: number; + chartWidth?: number; + chartHeight?: number; + titleFontSize?: number; + titlePadding?: number; + quadrantPadding?: number; + xAxisLabelPadding?: number; + yAxisLabelPadding?: number; + xAxisLabelFontSize?: number; + yAxisLabelFontSize?: number; + quadrantLabelFontSize?: number; + quadrantTextTopPadding?: number; + pointTextPadding?: number; + pointLabelFontSize?: number; + pointRadius?: number; + xAxisPosition?: 'top' | 'bottom'; + yAxisPosition?: 'left' | 'right'; + quadrantInternalBorderStrokeWidth?: number; + quadrantExternalBorderStrokeWidth?: number; } export interface ErDiagramConfig extends BaseDiagramConfig { diff --git a/packages/mermaid/src/diagrams/quadrant-chart/quadrantBuilder.ts b/packages/mermaid/src/diagrams/quadrant-chart/quadrantBuilder.ts index 8168551ad..9c1162762 100644 --- a/packages/mermaid/src/diagrams/quadrant-chart/quadrantBuilder.ts +++ b/packages/mermaid/src/diagrams/quadrant-chart/quadrantBuilder.ts @@ -1,7 +1,7 @@ // @ts-ignore: TODO Fix ts errors import { scaleLinear } from 'd3'; import { log } from '../../logger.js'; -import { QuadrantChartConfig } from '../../config.type.js'; +import type { BaseDiagramConfig, QuadrantChartConfig } from '../../config.type.js'; import defaultConfig from '../../defaultConfig.js'; import { getThemeVariables } from '../../themes/theme-default.js'; @@ -71,7 +71,8 @@ export interface quadrantBuilderData { points: QuadrantPointInputType[]; } -export interface QuadrantBuilderConfig extends QuadrantChartConfig { +export interface QuadrantBuilderConfig + extends Required> { showXAxis: boolean; showYAxis: boolean; showTitle: boolean; From 5885f5f82a738afd439dca2f8992de110dfe7698 Mon Sep 17 00:00:00 2001 From: Alois Klink Date: Thu, 6 Jul 2023 01:19:34 +0100 Subject: [PATCH 11/31] test: rename src/config.spec.js to config.spec.ts --- packages/mermaid/src/{config.spec.js => config.spec.ts} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename packages/mermaid/src/{config.spec.js => config.spec.ts} (100%) diff --git a/packages/mermaid/src/config.spec.js b/packages/mermaid/src/config.spec.ts similarity index 100% rename from packages/mermaid/src/config.spec.js rename to packages/mermaid/src/config.spec.ts From f731853e01339d9cc9e7e5582d70039293a0db7e Mon Sep 17 00:00:00 2001 From: Alois Klink Date: Thu, 6 Jul 2023 01:20:24 +0100 Subject: [PATCH 12/31] style: fix lint issues in src/config.spec.ts It looks like our linter automatically converts `let` to `const` in TypeScript files, but not in JavaScript files. --- packages/mermaid/src/config.spec.ts | 28 ++++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/packages/mermaid/src/config.spec.ts b/packages/mermaid/src/config.spec.ts index 1f7fd976b..c962445e6 100644 --- a/packages/mermaid/src/config.spec.ts +++ b/packages/mermaid/src/config.spec.ts @@ -6,16 +6,16 @@ describe('when working with site config', function () { configApi.setSiteConfig({}); }); it('should set site config and config properly', function () { - let config_0 = { foo: 'bar', bar: 0 }; + const config_0 = { foo: 'bar', bar: 0 }; configApi.setSiteConfig(config_0); - let config_1 = configApi.getSiteConfig(); - let config_2 = configApi.getConfig(); + const config_1 = configApi.getSiteConfig(); + const 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 = { + const config_0 = { foo: 'bar', bar: 'cant-be-changed', secure: [...configApi.defaultConfig.secure, 'bar'], @@ -27,30 +27,30 @@ describe('when working with site config', function () { expect(cfg.bar).toBe(config_0.bar); }); it('should set reset config properly', function () { - let config_0 = { foo: 'bar', bar: 0 }; + const config_0 = { foo: 'bar', bar: 0 }; configApi.setSiteConfig(config_0); - let config_1 = { foo: 'baf' }; + const config_1 = { foo: 'baf' }; configApi.setConfig(config_1); - let config_2 = configApi.getConfig(); + const config_2 = configApi.getConfig(); expect(config_2.foo).toEqual(config_1.foo); configApi.reset(); - let config_3 = configApi.getConfig(); + const config_3 = configApi.getConfig(); expect(config_3.foo).toEqual(config_0.foo); - let config_4 = configApi.getSiteConfig(); + const 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 }; + const config_0 = { foo: 'bar', bar: 0 }; configApi.setSiteConfig(config_0); - let config_1 = configApi.getSiteConfig(); + const config_1 = configApi.getSiteConfig(); expect(config_1.foo).toEqual(config_0.foo); - let config_2 = configApi.getConfig(); + const config_2 = configApi.getConfig(); expect(config_2.foo).toEqual(config_0.foo); configApi.setConfig({ foobar: 'bar0' }); - let config_3 = configApi.getConfig(); + const config_3 = configApi.getConfig(); expect(config_3.foobar).toEqual('bar0'); configApi.reset(); - let config_4 = configApi.getConfig(); + const config_4 = configApi.getConfig(); expect(config_4.foobar).toBeUndefined(); }); }); From 6ceee7f253ddc20b76b63a7a1b90500f9db0bd11 Mon Sep 17 00:00:00 2001 From: Alois Klink Date: Thu, 6 Jul 2023 01:27:24 +0100 Subject: [PATCH 13/31] test: fix types in `config.spec.ts` The `foo`, `bar`, and `foobar` options don't exist in MermaidConfig. Instead, I've replaced them with: - `foo` -> `fontFamily` - `bar` -> `fontSize` - `foobar` -> `altfontFamily` --- packages/mermaid/src/config.spec.ts | 40 ++++++++++++++--------------- 1 file changed, 20 insertions(+), 20 deletions(-) diff --git a/packages/mermaid/src/config.spec.ts b/packages/mermaid/src/config.spec.ts index c962445e6..7a35614a4 100644 --- a/packages/mermaid/src/config.spec.ts +++ b/packages/mermaid/src/config.spec.ts @@ -6,51 +6,51 @@ describe('when working with site config', function () { configApi.setSiteConfig({}); }); it('should set site config and config properly', function () { - const config_0 = { foo: 'bar', bar: 0 }; + 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.foo).toEqual(config_0.foo); - expect(config_1.bar).toEqual(config_0.bar); + 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 = { - foo: 'bar', - bar: 'cant-be-changed', - secure: [...configApi.defaultConfig.secure, 'bar'], + fontFamily: 'foo-font', + fontSize: 12345, // can't be changed + secure: [...configApi.defaultConfig.secure!, 'fontSize'], }; configApi.setSiteConfig(config_0); - const directive = { foo: 'baf', bar: 'should-not-be-allowed' }; + const directive = { fontFamily: 'baf', fontSize: 54321 /* fontSize shouldn't be changed */ }; const cfg = configApi.updateCurrentConfig(config_0, [directive]); - expect(cfg.foo).toEqual(directive.foo); - expect(cfg.bar).toBe(config_0.bar); + expect(cfg.fontFamily).toEqual(directive.fontFamily); + expect(cfg.fontSize).toBe(config_0.fontSize); }); it('should set reset config properly', function () { - const config_0 = { foo: 'bar', bar: 0 }; + const config_0 = { fontFamily: 'foo-font', fontSize: 150 }; configApi.setSiteConfig(config_0); - const config_1 = { foo: 'baf' }; + const config_1 = { fontFamily: 'baf' }; configApi.setConfig(config_1); const config_2 = configApi.getConfig(); - expect(config_2.foo).toEqual(config_1.foo); + expect(config_2.fontFamily).toEqual(config_1.fontFamily); configApi.reset(); const config_3 = configApi.getConfig(); - expect(config_3.foo).toEqual(config_0.foo); + expect(config_3.fontFamily).toEqual(config_0.fontFamily); const config_4 = configApi.getSiteConfig(); - expect(config_4.foo).toEqual(config_0.foo); + expect(config_4.fontFamily).toEqual(config_0.fontFamily); }); it('should set global reset config properly', function () { - const config_0 = { foo: 'bar', bar: 0 }; + const config_0 = { fontFamily: 'foo-font', fontSize: 150 }; configApi.setSiteConfig(config_0); const config_1 = configApi.getSiteConfig(); - expect(config_1.foo).toEqual(config_0.foo); + expect(config_1.fontFamily).toEqual(config_0.fontFamily); const config_2 = configApi.getConfig(); - expect(config_2.foo).toEqual(config_0.foo); - configApi.setConfig({ foobar: 'bar0' }); + expect(config_2.fontFamily).toEqual(config_0.fontFamily); + configApi.setConfig({ altFontFamily: 'bar-font' }); const config_3 = configApi.getConfig(); - expect(config_3.foobar).toEqual('bar0'); + expect(config_3.altFontFamily).toEqual('bar-font'); configApi.reset(); const config_4 = configApi.getConfig(); - expect(config_4.foobar).toBeUndefined(); + expect(config_4.altFontFamily).toBeUndefined(); }); }); From a862565a24a6ffd47a689906b4b101aa7bdb80b2 Mon Sep 17 00:00:00 2001 From: Alois Klink Date: Thu, 6 Jul 2023 01:35:11 +0100 Subject: [PATCH 14/31] test: test partial QuadrantChartConfig options --- packages/mermaid/src/config.spec.ts | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/packages/mermaid/src/config.spec.ts b/packages/mermaid/src/config.spec.ts index 7a35614a4..457cb8244 100644 --- a/packages/mermaid/src/config.spec.ts +++ b/packages/mermaid/src/config.spec.ts @@ -26,6 +26,22 @@ describe('when working with site config', function () { 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); From 4372a54dbaf0304ff7b7866579e8abb011797428 Mon Sep 17 00:00:00 2001 From: Alois Klink Date: Sun, 4 Dec 2022 23:32:20 +0000 Subject: [PATCH 15/31] docs: add support for ```regexp``` code blocks Currently, shiki doesn't support code-blocks that use the regexp language, which means vitepress throws an error on them: ```regexp ^([1-9][0-9]*)(minute|hour|day|week|month)$ ``` As a hack until shiki supports them, I've just modified them to get converted into JavaScript RegEx literal code-blocks, e.g.: ```javascript /^([1-9][0-9]*)(minute|hour|day|week|month)$/ ``` --- .../mermaid/src/docs/.vitepress/mermaid-markdown-all.ts | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/packages/mermaid/src/docs/.vitepress/mermaid-markdown-all.ts b/packages/mermaid/src/docs/.vitepress/mermaid-markdown-all.ts index 14340462c..30f044d98 100644 --- a/packages/mermaid/src/docs/.vitepress/mermaid-markdown-all.ts +++ b/packages/mermaid/src/docs/.vitepress/mermaid-markdown-all.ts @@ -54,6 +54,15 @@ const MermaidExample = async (md: MarkdownRenderer) => { return `

NOTE

${token.content}}

`; } + if (token.info.trim() === 'regexp') { + // shiki doesn't yet support regexp code blocks, but the javascript + // one still makes RegExes look good + token.info = 'javascript'; + // use trimEnd to move trailing `\n` outside if the JavaScript regex `/` block + token.content = `/${token.content.trimEnd()}/\n`; + return defaultRenderer(tokens, index, options, env, slf); + } + if (token.info.trim() === 'jison') { return `
From 58b43976ffbf0f063f647e3fc27502eb25ec9a4d Mon Sep 17 00:00:00 2001 From: Alois Klink Date: Sun, 4 Dec 2022 23:05:26 +0000 Subject: [PATCH 16/31] feat: add Mermaid Config in JSON Schema format Add a JSON Schema file (in YAML) for the MermaidConfig. This JSON Schema file follows [JSON Schema 2019-09][1], with some slight modifications to work with: - [json-schema-to-typescript][2] The `tsType` keyword is used to override the generated TypeScript type, when it doesn't match the JSON Schema type. This is used in two cases: - when the current type cannot be represented in JSON Schema (e.g. `FontCalculator`, which is a function) - when the JSON Schema type is narrower than the TypeScript type. Currently, many enums types are listed as `string` in TypeScript, but json-schema-to-typescript converts them to `"val1" | "val2"`. I've manually set them to `string | "val1" | "val2"` to avoid causing a breaking change in the TypeScript types. We should remove these in a future major version of TypeScript. - [@adobe/jsonschema2md][3] The `meta:enum` keyword is used to add documentation for specific enum values. [1]: https://json-schema.org/draft/2019-09/release-notes.html [2]: https://www.npmjs.com/package/json-schema-to-typescript [3]: https://www.npmjs.com/package/@adobe/jsonschema2md --- .../mermaid/src/schemas/config.schema.yaml | 1886 +++++++++++++++++ 1 file changed, 1886 insertions(+) create mode 100644 packages/mermaid/src/schemas/config.schema.yaml diff --git a/packages/mermaid/src/schemas/config.schema.yaml b/packages/mermaid/src/schemas/config.schema.yaml new file mode 100644 index 000000000..306aab2cc --- /dev/null +++ b/packages/mermaid/src/schemas/config.schema.yaml @@ -0,0 +1,1886 @@ +# Used for VS Code's YAML plugin to automatically error on invalid types +# yaml-language-server: $schema=https://json-schema.org/draft/2019-09/schema + +# This file defines the MermaidConfig JSON Schema as a YAML file. +# +# From this file, the following things can be generated: +# - `scripts/create-types-from-json-schema.mjs` +# Used to generate the `src/config.type.ts` TypeScript types for MermaidConfig +# with the `json-schema-to-typescript` NPM package. +# - `.vite/jsonSchemaPlugin.ts` +# Used to generate the default values from the `default` keys in this +# JSON Schema using the `ajv` NPM package. +# Non-JSON values, like functions or `undefined`, still need to be manually +# set in `src/defaultConfig.ts`) +# - `src/docs.mts` +# Used to genereate Markdown documentation for this JSON Schema by using +# the `@adobe/jsonschema2md` NPM package. + +# Useful things to know when editting this file +# - Use the `|` character for multi-line strings +# - Use `meta:enum` to document enum values (from jsonschema2md) +# - Use `tsType` to override the TypeScript type (from json-schema-to-typescript) +# - If adding a new object to `MermaidConfig` (e.g. a new diagram type), +# you may need to add it to `.vite/jsonSchemaPlugin.ts` and `src/docs.mts` +# to get the docs/default values to generate properly. +$id: https://mermaid-js.github.io/schemas/config.schema.json +$schema: https://json-schema.org/draft/2019-09/schema +title: Mermaid Config +type: object +additionalProperties: false +required: + - fontFamily + - logLevel + - securityLevel + - startOnLoad + - arrowMarkerAbsolute + - flowchart + - sequence + - gantt + - journey + - class + - state + - er + - pie + - quadrantChart + - requirement + - mindmap + - gitGraph + - c4 + - sankey +properties: + theme: + description: | + Theme, the CSS style sheet. + You may also use `themeCSS` to override this value. + type: string + enum: + - default + - forest + - dark + - neutral + - 'null' # should this be a `null`-type? + meta:enum: + 'null': Can be set to disable any pre-defined mermaid theme + default: 'default' + # Allow any string for typescript backwards compatibility (fix in Mermaid v10) + tsType: 'string | "default" | "forest" | "dark" | "neutral" | "null"' + themeVariables: + tsType: any + themeCSS: + type: string + maxTextSize: + description: The maximum allowed size of the users text diagram + type: number + default: 50000 + darkMode: + type: boolean + default: false + htmlLabels: + type: boolean # maybe unused, seems to be copied in each diagram config + fontFamily: + description: | + Specifies the font to be used in the rendered diagrams. + Can be any possible CSS `font-family`. + See https://developer.mozilla.org/en-US/docs/Web/CSS/font-family + type: string + default: '"trebuchet ms", verdana, arial, sans-serif;' + altFontFamily: + # TODO: seems to be unused, except for in tests + type: string + logLevel: + description: | + This option decides the amount of logging to be used by mermaid. + type: + - string + - number + enum: + - trace + - 0 + - debug + - 1 + - info + - 2 + - warn + - 3 + - error + - 4 + - fatal + - 5 + meta:enum: + trace: Equivalent to 0 + debug: Equivalent to 1 + info: Equivalent to 2 + warn: Equivalent to 3 + error: Equivalent to 4 + fatal: Equivalent to 5 (default) + default: 5 + # Allow any number or string for typescript backwards compatibility (fix in Mermaid v10) + tsType: 'number | string | 0 | 2 | 1 | "trace" | "debug" | "info" | "warn" | "error" | "fatal" | 3 | 4 | 5 | undefined' + securityLevel: + description: Level of trust for parsed diagram + type: string + enum: + - strict + - loose + - antiscript + - sandbox + meta:enum: + strict: (**default**) HTML tags in the text are encoded and click functionality is disabled. + antiscript: HTML tags in text are allowed (only script elements are removed), and click functionality is enabled. + loose: HTML tags in text are allowed and click functionality is enabled. + sandbox: | + With this security level, all rendering takes place in a sandboxed iframe. + This prevent any JavaScript from running in the context. + This may hinder interactive functionality of the diagram, like scripts, popups in the sequence diagram, or links to other tabs or targets, etc. + default: strict + # Allow any string for typescript backwards compatibility (fix in Mermaid v10) + tsType: 'string | "strict" | "loose" | "antiscript" | "sandbox" | undefined' + startOnLoad: + description: Dictates whether mermaid starts on Page load + type: boolean + default: true + arrowMarkerAbsolute: + &arrowMarkerAbsolute # YAML anchor, can be used later with `*arrowMarkerAbsolute` + description: | + Controls whether or arrow markers in html code are absolute paths or anchors. + This matters if you are using base tag settings. + type: boolean + default: false + secure: + description: | + This option controls which `currentConfig` keys are considered secure and + can only be changed via call to `mermaidAPI.initialize`. + Calls to `mermaidAPI.reinitialize` cannot make changes to the secure keys + in the current `currentConfig`. + + This prevents malicious graph directives from overriding a site's default security. + default: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize'] + type: array + items: + type: string + uniqueItems: false # Should be enabled, but it may be a breaking change from the old config + deterministicIds: + description: | + This option controls if the generated ids of nodes in the SVG are + generated randomly or based on a seed. + If set to `false`, the IDs are generated based on the current date and + thus are not deterministic. This is the default behavior. + + This matters if your files are checked into source control e.g. git and + should not change unless content is changed. + type: boolean + default: false + deterministicIDSeed: + description: | + This option is the optional seed for deterministic ids. + If set to `undefined` but deterministicIds is `true`, a simple number iterator is used. + You can set this attribute to base the seed on a static string. + type: string + flowchart: + $ref: '#/$defs/FlowchartDiagramConfig' + sequence: + $ref: '#/$defs/SequenceDiagramConfig' + gantt: + $ref: '#/$defs/GanttDiagramConfig' + journey: + $ref: '#/$defs/JourneyDiagramConfig' + timeline: + $ref: '#/$defs/TimelineDiagramConfig' + class: + $ref: '#/$defs/ClassDiagramConfig' + state: + $ref: '#/$defs/StateDiagramConfig' + er: + $ref: '#/$defs/ErDiagramConfig' + pie: + $ref: '#/$defs/PieDiagramConfig' + quadrantChart: + $ref: '#/$defs/QuadrantChartConfig' + requirement: + $ref: '#/$defs/RequirementDiagramConfig' + mindmap: + $ref: '#/$defs/MindmapDiagramConfig' + gitGraph: + $ref: '#/$defs/GitGraphDiagramConfig' + c4: + $ref: '#/$defs/C4DiagramConfig' + sankey: + $ref: '#/$defs/SankeyDiagramConfig' + dompurifyConfig: + title: DOM Purify Configuration + description: Configuration options to pass to the `dompurify` library. + type: object + tsType: "import('dompurify').Config" + wrap: + type: boolean + fontSize: + type: number + default: 16 + +$defs: # JSON Schema definition (maybe we should move these to a seperate file) + BaseDiagramConfig: + # TODO: More config needs to be moved here + title: Base Diagram Config + type: object + properties: + useWidth: + type: number + useMaxWidth: + description: | + When this flag is set to `true`, the height and width is set to 100% + and is then scaled with the available space. + If set to `false`, the absolute space required is used. + type: boolean + default: true + C4DiagramConfig: + title: C4 Diagram Config + allOf: [{ $ref: '#/$defs/BaseDiagramConfig' }] + description: The object containing configurations specific for c4 diagrams + type: object + unevaluatedProperties: false + required: + - diagramMarginX + - diagramMarginY + - c4ShapeMargin + - c4ShapePadding + - width + - height + - boxMargin + - useMaxWidth + - c4ShapeInRow + - c4BoundaryInRow + properties: + diagramMarginX: + description: | + Margin to the right and left of the c4 diagram, must be a positive value. + type: integer + default: 50 + minimum: 0 + diagramMarginY: + description: | + Margin to the over and under the c4 diagram, must be a positive value. + type: integer + default: 10 + minimum: 0 + c4ShapeMargin: + description: Margin between shapes + type: integer + default: 50 + minimum: 0 + c4ShapePadding: + description: Padding between shapes + type: integer + default: 20 + minimum: 0 + width: + description: Width of person boxes + type: integer + default: 216 + minimum: 0 + height: + description: Height of person boxes + type: integer + default: 60 + minimum: 0 + boxMargin: + description: Margin around boxes + type: integer + default: 10 + minimum: 0 + c4ShapeInRow: + description: How many shapes to place in each row. + type: integer + default: 4 + minimum: 0 + nextLinePaddingX: + # TODO: add description + type: number + default: 0 + c4BoundaryInRow: + description: How many boundaries to place in each row. + type: integer + default: 2 + minimum: 0 + + # --------------------------------------------------------------------- # + # Default font values + # --------------------------------------------------------------------- # + personFontSize: + description: This sets the font size of Person shape for the diagram + type: &fontSizeType ['string', 'number'] # YAML anchor + default: 14 + personFontFamily: + description: This sets the font weight of Person shape for the diagram + type: string + default: '"Open Sans", sans-serif' + personFontWeight: + description: This sets the font weight of Person shape for the diagram + type: ['string', 'number'] + default: normal + external_personFontSize: + description: This sets the font size of External Person shape for the diagram + type: *fontSizeType + default: 14 + external_personFontFamily: + description: This sets the font family of External Person shape for the diagram + type: string + default: '"Open Sans", sans-serif' + external_personFontWeight: + description: This sets the font weight of External Person shape for the diagram + type: ['string', 'number'] + default: normal + systemFontSize: + description: This sets the font size of System shape for the diagram + type: *fontSizeType + default: 14 + systemFontFamily: + description: This sets the font family of System shape for the diagram + type: string + default: '"Open Sans", sans-serif' + systemFontWeight: + description: This sets the font weight of System shape for the diagram + type: ['string', 'number'] + default: normal + external_systemFontSize: + description: This sets the font size of External System shape for the diagram + type: *fontSizeType + default: 14 + external_systemFontFamily: + description: This sets the font family of External System shape for the diagram + type: string + default: '"Open Sans", sans-serif' + external_systemFontWeight: + description: This sets the font weight of External System shape for the diagram + type: ['string', 'number'] + default: normal + system_dbFontSize: + description: This sets the font size of System DB shape for the diagram + type: *fontSizeType + default: 14 + system_dbFontFamily: + description: This sets the font family of System DB shape for the diagram + type: string + default: '"Open Sans", sans-serif' + system_dbFontWeight: + description: This sets the font weight of System DB shape for the diagram + type: ['string', 'number'] + default: normal + external_system_dbFontSize: + description: This sets the font size of External System DB shape for the diagram + type: *fontSizeType + default: 14 + external_system_dbFontFamily: + description: This sets the font family of External System DB shape for the diagram + type: string + default: '"Open Sans", sans-serif' + external_system_dbFontWeight: + description: This sets the font weight of External System DB shape for the diagram + type: ['string', 'number'] + default: normal + system_queueFontSize: + description: This sets the font size of System Queue shape for the diagram + type: *fontSizeType + default: 14 + system_queueFontFamily: + description: This sets the font family of System Queue shape for the diagram + type: string + default: '"Open Sans", sans-serif' + system_queueFontWeight: + description: This sets the font weight of System Queue shape for the diagram + type: ['string', 'number'] + default: normal + external_system_queueFontSize: + description: This sets the font size of External System Queue shape for the diagram + type: *fontSizeType + default: 14 + external_system_queueFontFamily: + description: This sets the font family of External System Queue shape for the diagram + type: string + default: '"Open Sans", sans-serif' + external_system_queueFontWeight: + description: This sets the font weight of External System Queue shape for the diagram + type: ['string', 'number'] + default: normal + boundaryFontSize: + description: This sets the font size of Boundary shape for the diagram + type: *fontSizeType + default: 14 + boundaryFontFamily: + description: This sets the font family of Boundary shape for the diagram + type: string + default: '"Open Sans", sans-serif' + boundaryFontWeight: + description: This sets the font weight of Boundary shape for the diagram + type: ['string', 'number'] + default: normal + messageFontSize: + description: This sets the font size of Message shape for the diagram + type: *fontSizeType + default: 12 + messageFontFamily: + description: This sets the font family of Message shape for the diagram + type: string + default: '"Open Sans", sans-serif' + messageFontWeight: + description: This sets the font weight of Message shape for the diagram + type: ['string', 'number'] + default: normal + + containerFontSize: + description: This sets the font size of Container shape for the diagram + type: *fontSizeType + default: 14 + containerFontFamily: + description: This sets the font family of Container shape for the diagram + type: string + default: '"Open Sans", sans-serif' + containerFontWeight: + description: This sets the font weight of Container shape for the diagram + type: ['string', 'number'] + default: normal + external_containerFontSize: + description: This sets the font size of External Container shape for the diagram + type: *fontSizeType + default: 14 + external_containerFontFamily: + description: This sets the font family of External Container shape for the diagram + type: string + default: '"Open Sans", sans-serif' + external_containerFontWeight: + description: This sets the font weight of External Container shape for the diagram + type: ['string', 'number'] + default: normal + + container_dbFontSize: + description: This sets the font size of Container DB shape for the diagram + type: *fontSizeType + default: 14 + container_dbFontFamily: + description: This sets the font family of Container DB shape for the diagram + type: string + default: '"Open Sans", sans-serif' + container_dbFontWeight: + description: This sets the font weight of Container DB shape for the diagram + type: ['string', 'number'] + default: normal + external_container_dbFontSize: + description: This sets the font size of External Container DB shape for the diagram + type: *fontSizeType + default: 14 + external_container_dbFontFamily: + description: This sets the font family of External Container DB shape for the diagram + type: string + default: '"Open Sans", sans-serif' + external_container_dbFontWeight: + description: This sets the font weight of External Container DB shape for the diagram + type: ['string', 'number'] + default: normal + + container_queueFontSize: + description: This sets the font size of Container Queue shape for the diagram + type: *fontSizeType + default: 14 + container_queueFontFamily: + description: This sets the font family of Container Queue shape for the diagram + type: string + default: '"Open Sans", sans-serif' + container_queueFontWeight: + description: This sets the font weight of Container Queue shape for the diagram + type: ['string', 'number'] + default: normal + external_container_queueFontSize: + description: This sets the font size of External Container Queue shape for the diagram + type: *fontSizeType + default: 14 + external_container_queueFontFamily: + description: This sets the font family of External Container Queue shape for the diagram + type: string + default: '"Open Sans", sans-serif' + external_container_queueFontWeight: + description: This sets the font weight of External Container Queue shape for the diagram + type: ['string', 'number'] + default: normal + + componentFontSize: + description: This sets the font size of Component shape for the diagram + type: *fontSizeType + default: 14 + componentFontFamily: + description: This sets the font family of Component shape for the diagram + type: string + default: '"Open Sans", sans-serif' + componentFontWeight: + description: This sets the font weight of Component shape for the diagram + type: ['string', 'number'] + default: normal + external_componentFontSize: + description: This sets the font size of External Component shape for the diagram + type: *fontSizeType + default: 14 + external_componentFontFamily: + description: This sets the font family of External Component shape for the diagram + type: string + default: '"Open Sans", sans-serif' + external_componentFontWeight: + description: This sets the font weight of External Component shape for the diagram + type: ['string', 'number'] + default: normal + + component_dbFontSize: + description: This sets the font size of Component DB shape for the diagram + type: *fontSizeType + default: 14 + component_dbFontFamily: + description: This sets the font family of Component DB shape for the diagram + type: string + default: '"Open Sans", sans-serif' + component_dbFontWeight: + description: This sets the font weight of Component DB shape for the diagram + type: ['string', 'number'] + default: normal + external_component_dbFontSize: + description: This sets the font size of External Component DB shape for the diagram + type: *fontSizeType + default: 14 + external_component_dbFontFamily: + description: This sets the font family of External Component DB shape for the diagram + type: string + default: '"Open Sans", sans-serif' + external_component_dbFontWeight: + description: This sets the font weight of External Component DB shape for the diagram + type: ['string', 'number'] + default: normal + + component_queueFontSize: + description: This sets the font size of Component Queue shape for the diagram + type: *fontSizeType + default: 14 + component_queueFontFamily: + description: This sets the font family of Component Queue shape for the diagram + type: string + default: '"Open Sans", sans-serif' + component_queueFontWeight: + description: This sets the font weight of Component Queue shape for the diagram + type: ['string', 'number'] + default: normal + external_component_queueFontSize: + description: This sets the font size of External Component Queue shape for the diagram + type: *fontSizeType + default: 14 + external_component_queueFontFamily: + description: This sets the font family of External Component Queue shape for the diagram + type: string + default: '"Open Sans", sans-serif' + external_component_queueFontWeight: + description: This sets the font weight of External Component Queue shape for the diagram + type: ['string', 'number'] + default: normal + + wrap: + description: This sets the auto-wrap state for the diagram + type: boolean + default: true + wrapPadding: + description: This sets the auto-wrap padding for the diagram (sides only) + type: number + default: 10 + + # --------------------------------------------------------------------- # + # Colors + # --------------------------------------------------------------------- # + person_bg_color: + type: string + default: '#08427B' + person_border_color: + type: string + default: '#073B6F' + external_person_bg_color: + type: string + default: '#686868' + external_person_border_color: + type: string + default: '#8A8A8A' + system_bg_color: + type: string + default: '#1168BD' + system_border_color: + type: string + default: '#3C7FC0' + system_db_bg_color: + type: string + default: '#1168BD' + system_db_border_color: + type: string + default: '#3C7FC0' + system_queue_bg_color: + type: string + default: '#1168BD' + system_queue_border_color: + type: string + default: '#3C7FC0' + external_system_bg_color: + type: string + default: '#999999' + external_system_border_color: + type: string + default: '#8A8A8A' + external_system_db_bg_color: + type: string + default: '#999999' + external_system_db_border_color: + type: string + default: '#8A8A8A' + external_system_queue_bg_color: + type: string + default: '#999999' + external_system_queue_border_color: + type: string + default: '#8A8A8A' + container_bg_color: + type: string + default: '#438DD5' + container_border_color: + type: string + default: '#3C7FC0' + container_db_bg_color: + type: string + default: '#438DD5' + container_db_border_color: + type: string + default: '#3C7FC0' + container_queue_bg_color: + type: string + default: '#438DD5' + container_queue_border_color: + type: string + default: '#3C7FC0' + external_container_bg_color: + type: string + default: '#B3B3B3' + external_container_border_color: + type: string + default: '#A6A6A6' + external_container_db_bg_color: + type: string + default: '#B3B3B3' + external_container_db_border_color: + type: string + default: '#A6A6A6' + external_container_queue_bg_color: + type: string + default: '#B3B3B3' + external_container_queue_border_color: + type: string + default: '#A6A6A6' + component_bg_color: + type: string + default: '#85BBF0' + component_border_color: + type: string + default: '#78A8D8' + component_db_bg_color: + type: string + default: '#85BBF0' + component_db_border_color: + type: string + default: '#78A8D8' + component_queue_bg_color: + type: string + default: '#85BBF0' + component_queue_border_color: + type: string + default: '#78A8D8' + external_component_bg_color: + type: string + default: '#CCCCCC' + external_component_border_color: + type: string + default: '#BFBFBF' + external_component_db_bg_color: + type: string + default: '#CCCCCC' + external_component_db_border_color: + type: string + default: '#BFBFBF' + external_component_queue_bg_color: + type: string + default: '#CCCCCC' + external_component_queue_border_color: + type: string + default: '#BFBFBF' + + # Font Calculators + # By default, these all return the values from this configuration. + personFont: { '$ref': '#/$defs/FontCalculator' } + external_personFont: { '$ref': '#/$defs/FontCalculator' } + systemFont: { '$ref': '#/$defs/FontCalculator' } + external_systemFont: { '$ref': '#/$defs/FontCalculator' } + system_dbFont: { '$ref': '#/$defs/FontCalculator' } + external_system_dbFont: { '$ref': '#/$defs/FontCalculator' } + system_queueFont: { '$ref': '#/$defs/FontCalculator' } + external_system_queueFont: { '$ref': '#/$defs/FontCalculator' } + containerFont: { '$ref': '#/$defs/FontCalculator' } + external_containerFont: { '$ref': '#/$defs/FontCalculator' } + container_dbFont: { '$ref': '#/$defs/FontCalculator' } + external_container_dbFont: { '$ref': '#/$defs/FontCalculator' } + container_queueFont: { '$ref': '#/$defs/FontCalculator' } + external_container_queueFont: { '$ref': '#/$defs/FontCalculator' } + componentFont: { '$ref': '#/$defs/FontCalculator' } + external_componentFont: { '$ref': '#/$defs/FontCalculator' } + component_dbFont: { '$ref': '#/$defs/FontCalculator' } + external_component_dbFont: { '$ref': '#/$defs/FontCalculator' } + component_queueFont: { '$ref': '#/$defs/FontCalculator' } + external_component_queueFont: { '$ref': '#/$defs/FontCalculator' } + boundaryFont: { '$ref': '#/$defs/FontCalculator' } + messageFont: { '$ref': '#/$defs/FontCalculator' } + + GitGraphDiagramConfig: + title: Git Graph Diagram Config + allOf: [{ $ref: '#/$defs/BaseDiagramConfig' }] + type: object + unevaluatedProperties: false + required: + - titleTopMargin + properties: + titleTopMargin: + # TODO: I've removed the `Git` part from this description, so that I + # could $ref: "#/$defs/GitGraphDiagramConfig/properties/titleTopMargin" + # this field in other diagrams + description: Margin top for the text over the diagram + type: integer + default: 25 + minimum: 0 + diagramPadding: + type: number + default: 8 + nodeLabel: + allOf: [{ $ref: '#/$defs/NodeLabel' }] + type: object + default: + width: 75 + height: 100 + x: -25 + y: 0 + mainBranchName: + type: string + default: 'main' + mainBranchOrder: + type: number + default: 0 + showCommitLabel: + type: boolean + default: true + showBranches: + type: boolean + default: true + rotateCommitLabel: + type: boolean + default: true + # YAML anchor reference, don't use $ref since ajv doesn't load defaults + arrowMarkerAbsolute: *arrowMarkerAbsolute + + NodeLabel: + title: Node Label + type: object + properties: + width: + type: number + height: + type: number + x: + type: number + y: + type: number + + RequirementDiagramConfig: + title: Requirement Diagram Config + allOf: [{ $ref: '#/$defs/BaseDiagramConfig' }] + description: The object containing configurations specific for req diagrams + type: object + unevaluatedProperties: false + required: + - useMaxWidth + properties: + rect_fill: + type: string + default: '#f9f9f9' + text_color: + type: string + default: '#333' + rect_border_size: + type: string + default: '0.5px' + rect_border_color: + type: string + default: '#bbb' + rect_min_width: + type: number + default: 200 + rect_min_height: + type: number + default: 200 + fontSize: + type: number # TODO, should this be `type: *fontSizeType` (aka string too) + default: 14 + rect_padding: + type: number + default: 10 + line_height: + type: number + default: 20 + + MindmapDiagramConfig: + title: Mindmap Diagram Config + allOf: [{ $ref: '#/$defs/BaseDiagramConfig' }] + description: The object containing configurations specific for mindmap diagrams + type: object + unevaluatedProperties: false + required: + - useMaxWidth + - padding + - maxNodeWidth + properties: + padding: + type: number + default: 10 + maxNodeWidth: + type: number + default: 200 + + PieDiagramConfig: + title: Pie Diagram Config + allOf: [{ $ref: '#/$defs/BaseDiagramConfig' }] + type: object + unevaluatedProperties: false + properties: + textPosition: + type: number + minimum: 0 + maximum: 1 + description: | + Axial position of slice's label from zero at the center to 1 at the outside edges. + default: 0.75 + + QuadrantChartConfig: + title: Quadrant Chart Config + allOf: [{ $ref: '#/$defs/BaseDiagramConfig' }] + type: object + unevaluatedProperties: false + required: + - chartWidth + - chartHeight + - titleFontSize + - titlePadding + - quadrantPadding + - xAxisLabelPadding + - yAxisLabelPadding + - xAxisLabelFontSize + - yAxisLabelFontSize + - quadrantLabelFontSize + - quadrantTextTopPadding + - pointTextPadding + - pointLabelFontSize + - pointRadius + - xAxisPosition + - yAxisPosition + - quadrantInternalBorderStrokeWidth + - quadrantExternalBorderStrokeWidth + - useMaxWidth + properties: + chartWidth: + description: Width of the chart + type: number + minimum: 0 + default: 500 + chartHeight: + description: Height of the chart + type: number + minimum: 0 + default: 500 + titleFontSize: + description: Chart title top and bottom padding + type: number + minimum: 0 + default: 20 + titlePadding: + description: Padding around the quadrant square + type: number + minimum: 0 + default: 10 + quadrantPadding: + description: quadrant title padding from top if the quadrant is rendered on top + type: number + minimum: 0 + default: 5 + xAxisLabelPadding: + description: Padding around x-axis labels + type: number + minimum: 0 + default: 5 + yAxisLabelPadding: + description: Padding around y-axis labels + type: number + minimum: 0 + default: 5 + xAxisLabelFontSize: + description: x-axis label font size + type: number + minimum: 0 + default: 16 + yAxisLabelFontSize: + description: y-axis label font size + type: number + minimum: 0 + default: 16 + quadrantLabelFontSize: + description: quadrant title font size + type: number + minimum: 0 + default: 16 + quadrantTextTopPadding: + description: quadrant title padding from top if the quadrant is rendered on top + type: number + minimum: 0 + default: 5 + pointTextPadding: + description: padding between point and point label + type: number + minimum: 0 + default: 5 + pointLabelFontSize: + description: point title font size + type: number + minimum: 0 + default: 12 + pointRadius: + description: radius of the point to be drawn + type: number + minimum: 0 + default: 5 + xAxisPosition: + description: position of x-axis labels + type: string + enum: + - top + - bottom + default: top + yAxisPosition: + description: position of y-axis labels + type: string + enum: + - left + - right + default: left + quadrantInternalBorderStrokeWidth: + description: stroke width of edges of the box that are inside the quadrant + type: number + minimum: 0 + default: 1 + quadrantExternalBorderStrokeWidth: + description: stroke width of edges of the box that are outside the quadrant + type: number + minimum: 0 + default: 2 + + ErDiagramConfig: + title: Er Diagram Config + allOf: [{ $ref: '#/$defs/BaseDiagramConfig' }] + description: The object containing configurations specific for entity relationship diagrams + type: object + unevaluatedProperties: false + required: + - titleTopMargin + - diagramPadding + - layoutDirection + - minEntityWidth + - minEntityHeight + - entityPadding + - stroke + - fill + # TODO: fontSize is the only property that is not required, is this correct? + - useMaxWidth + properties: + titleTopMargin: + $ref: '#/$defs/GitGraphDiagramConfig/properties/titleTopMargin' + default: 25 + diagramPadding: + description: | + The amount of padding around the diagram as a whole so that embedded + diagrams have margins, expressed in pixels. + type: integer + default: 20 + minimum: 0 + layoutDirection: + description: Directional bias for layout of entities + type: string + enum: ['TB', 'BT', 'LR', 'RL'] + meta:enum: + TB: Top-Bottom + BT: Bottom-Top + LR: Left-Right + RL: Right to Left + default: TB + # Allow any string for typescript backwards compatibility (fix in Mermaid v10) + tsType: 'string | "TB" | "BT" | "LR" | "RL"' + minEntityWidth: + description: The minimum width of an entity box. Expressed in pixels. + type: integer + default: 100 + minimum: 0 + minEntityHeight: + description: The minimum height of an entity box. Expressed in pixels. + type: integer + default: 75 + minimum: 0 + entityPadding: + description: | + The minimum internal padding between text in an entity box and the enclosing box borders. + Expressed in pixels. + type: integer + default: 15 + minimum: 0 + stroke: + description: Stroke color of box edges and lines. + type: string + default: gray + fill: + description: Fill color of entity boxes + type: string + default: honeydew + fontSize: + description: Font size (expressed as an integer representing a number of pixels) + type: integer + default: 12 + minimum: 0 + + StateDiagramConfig: + title: State Diagram Config + allOf: [{ $ref: '#/$defs/BaseDiagramConfig' }] + description: The object containing configurations specific for entity relationship diagrams + type: object + unevaluatedProperties: false + required: + - titleTopMargin + - useMaxWidth + - defaultRenderer + properties: + titleTopMargin: + $ref: '#/$defs/GitGraphDiagramConfig/properties/titleTopMargin' + default: 25 + arrowMarkerAbsolute: + # TODO: use $ref: '#/properties/arrowMarkerAbsolute' to copy main setting + type: boolean + dividerMargin: + type: number + default: 10 + sizeUnit: + type: number + default: 5 + padding: + type: number + default: 8 + textHeight: + type: number + default: 10 + titleShift: + type: number + default: -15 + noteMargin: + type: number + default: 10 + forkWidth: + type: number + default: 70 + forkHeight: + type: number + default: 7 + # Used + miniPadding: + type: number + default: 2 + fontSizeFactor: + description: | + Font size factor, this is used to guess the width of the edges labels + before rendering by dagre layout. + This might need updating if/when switching font + type: number + default: 5.02 + fontSize: + type: number + default: 24 + labelHeight: + type: number + default: 16 + edgeLengthFactor: + type: string + default: '20' + compositTitleSize: + type: number + default: 35 + radius: + type: number + default: 5 + defaultRenderer: + description: | + Decides which rendering engine that is to be used for the rendering. + type: string + enum: + - dagre-d3 + - dagre-wrapper + - elk + # todo, check this, old docs said dagre-d3 even though value was dagre-wrapper + default: dagre-wrapper + meta:enum: + dagre-d3: The [dagre-d3-es](https://www.npmjs.com/package/dagre-d3-es) library. + dagre-wrapper: wrapper for dagre implemented in mermaid + elk: Layout using [elkjs](https://github.com/kieler/elkjs) + # Allow any string for typescript backwards compatibility (fix in Mermaid v10) + tsType: 'string | "dagre-d3" | "dagre-wrapper" | "elk"' + + ClassDiagramConfig: + title: Class Diagram Config + allOf: [{ $ref: '#/$defs/BaseDiagramConfig' }] + type: object + unevaluatedProperties: false + required: + - titleTopMargin + - useMaxWidth + - defaultRenderer + properties: + titleTopMargin: + $ref: '#/$defs/GitGraphDiagramConfig/properties/titleTopMargin' + default: 25 + # YAML anchor reference, don't use $ref since ajv doesn't load defaults + arrowMarkerAbsolute: *arrowMarkerAbsolute + dividerMargin: + type: number + default: 10 + padding: + type: number + default: 5 + textHeight: + type: number + default: 10 + defaultRenderer: + $ref: '#/$defs/StateDiagramConfig/properties/defaultRenderer' + default: dagre-wrapper + nodeSpacing: + type: integer + minimum: 0 + # should the default value be 50? + # see https://github.com/mermaid-js/mermaid/blob/7647ae317a7b2130e32777248d25a9c4d24b8f9f/packages/mermaid/src/diagrams/class/classRenderer-v2.ts#L258 + rankSpacing: + type: integer + minimum: 0 + # should the default value be 50? + # see https://github.com/mermaid-js/mermaid/blob/7647ae317a7b2130e32777248d25a9c4d24b8f9f/packages/mermaid/src/diagrams/class/classRenderer-v2.ts#L259 + diagramPadding: + $ref: '#/$defs/ErDiagramConfig/properties/diagramPadding' + htmlLabels: + type: boolean + default: false + + JourneyDiagramConfig: + title: Journey Diagram Config + allOf: [{ $ref: '#/$defs/BaseDiagramConfig' }] + description: | + The object containing configurations specific for journey diagrams + type: object + unevaluatedProperties: false + required: + - diagramMarginX + - diagramMarginY + - leftMargin + - width + - height + - boxMargin + - boxTextMargin + - noteMargin + - messageMargin + - messageAlign + - bottomMarginAdj + - useMaxWidth + - rightAngles + properties: + diagramMarginX: + $ref: '#/$defs/C4DiagramConfig/properties/diagramMarginX' + default: 50 + diagramMarginY: + $ref: '#/$defs/C4DiagramConfig/properties/diagramMarginY' + default: 10 + leftMargin: + description: Margin between actors + type: integer + default: 150 + minimum: 0 + width: + description: Width of actor boxes + type: integer + default: 150 + minimum: 0 + height: + description: Height of actor boxes + type: integer + default: 50 + minimum: 0 + boxMargin: + description: Margin around loop boxes + type: integer + default: 10 + minimum: 0 + boxTextMargin: + description: Margin around the text in loop/alt/opt boxes + type: integer + default: 5 + minimum: 0 + noteMargin: + description: Margin around notes + type: integer + default: 10 + minimum: 0 + messageMargin: + description: Space between messages. + type: integer + default: 35 + minimum: 0 + messageAlign: + description: Multiline message alignment + type: string + enum: + - left + - center + - right + default: center + # Allow any string for typescript backwards compatibility (fix in Mermaid v10) + tsType: 'string | "left" | "center" | "right"' + bottomMarginAdj: + description: | + Prolongs the edge of the diagram downwards. + + Depending on css styling this might need adjustment. + type: integer + default: 1 + minimum: 0 + rightAngles: + description: | + Curved Arrows become Right Angles + + This will display arrows that start and begin at the same node as + right angles, rather than as curves. + type: boolean + default: false + taskFontSize: + type: *fontSizeType + default: 14 + taskFontFamily: + type: string + default: '"Open Sans", sans-serif' + taskMargin: + type: number + default: 50 + activationWidth: + description: Width of activation box + type: number + default: 10 + textPlacement: + description: | + text placement as: tspan | fo | old only text as before + type: string + # TODO, should this be an enum? + default: fo + actorColours: + type: array + items: + type: string + default: ['#8FBC8F', '#7CFC00', '#00FFFF', '#20B2AA', '#B0E0E6', '#FFFFE0'] + sectionFills: + type: array + items: + type: string + default: ['#191970', '#8B008B', '#4B0082', '#2F4F4F', '#800000', '#8B4513', '#00008B'] + sectionColours: + type: array + items: + type: string + default: ['#fff'] + + TimelineDiagramConfig: + # added by https://github.com/mermaid-js/mermaid/commit/0d5246fbc730bf15463d7183fe4400a1e2fc492c + title: Timeline Diagram Config + allOf: [{ $ref: '#/$defs/BaseDiagramConfig' }] + type: object + unevaluatedProperties: false + required: + - diagramMarginX + - diagramMarginY + - leftMargin + - width + - height + - boxMargin + - boxTextMargin + - noteMargin + - messageMargin + - messageAlign + - bottomMarginAdj + - useMaxWidth + properties: + diagramMarginX: + $ref: '#/$defs/C4DiagramConfig/properties/diagramMarginX' + default: 50 + diagramMarginY: + $ref: '#/$defs/C4DiagramConfig/properties/diagramMarginY' + default: 10 + leftMargin: + description: Margin between actors + type: integer + default: 150 + minimum: 0 + width: + description: Width of actor boxes + type: integer + default: 150 + minimum: 0 + height: + description: Height of actor boxes + type: integer + default: 50 + minimum: 0 + padding: + type: number + # should the default value be 50? + # see https://github.com/mermaid-js/mermaid/blob/7647ae317a7b2130e32777248d25a9c4d24b8f9f/packages/mermaid/src/diagrams/timeline/timelineRenderer.ts#L237 + boxMargin: + description: Margin around loop boxes + type: integer + default: 10 + minimum: 0 + boxTextMargin: + description: Margin around the text in loop/alt/opt boxes + type: integer + default: 5 + minimum: 0 + noteMargin: + description: Margin around notes + type: integer + default: 10 + minimum: 0 + messageMargin: + description: Space between messages. + type: integer + default: 35 + minimum: 0 + messageAlign: + description: Multiline message alignment + type: string + enum: + - left + - center + - right + default: center + # Allow any string for typescript backwards compatibility (fix in Mermaid v10) + tsType: 'string | "left" | "center" | "right"' + bottomMarginAdj: + description: | + Prolongs the edge of the diagram downwards. + + Depending on css styling this might need adjustment. + type: integer + default: 1 + minimum: 0 + rightAngles: + description: | + Curved Arrows become Right Angles + + This will display arrows that start and begin at the same node as + right angles, rather than as curves. + type: boolean + default: false + taskFontSize: + type: *fontSizeType + default: 14 + taskFontFamily: + type: string + default: '"Open Sans", sans-serif' + taskMargin: + type: number + default: 50 + activationWidth: + description: Width of activation box + type: number + default: 10 + textPlacement: + description: | + text placement as: tspan | fo | old only text as before + type: string + # TODO, should this be an enum? + default: fo + actorColours: + type: array + items: + type: string + default: ['#8FBC8F', '#7CFC00', '#00FFFF', '#20B2AA', '#B0E0E6', '#FFFFE0'] + sectionFills: + type: array + items: + type: string + default: ['#191970', '#8B008B', '#4B0082', '#2F4F4F', '#800000', '#8B4513', '#00008B'] + sectionColours: + type: array + items: + type: string + default: ['#fff'] + disableMulticolor: + # added by https://github.com/mermaid-js/mermaid/commit/652a42fe1aed7911a781a84716940a973b995639 + type: boolean + default: false + + GanttDiagramConfig: + title: Gantt Diagram Config + allOf: [{ $ref: '#/$defs/BaseDiagramConfig' }] + description: | + The object containing configurations specific for gantt diagrams + type: object + unevaluatedProperties: false + required: + - titleTopMargin + - barHeight + - topPadding + - rightPadding + - leftPadding + - gridLineStartPadding + - fontSize + - sectionFontSize + - numberSectionStyles + - axisFormat + - useMaxWidth + - topAxis + properties: + titleTopMargin: + $ref: '#/$defs/GitGraphDiagramConfig/properties/titleTopMargin' + default: 25 + barHeight: + description: The height of the bars in the graph + type: integer + default: 20 + minimum: 0 + barGap: + description: The margin between the different activities in the gantt diagram + type: integer + default: 4 + minimum: 0 + topPadding: + description: | + Margin between title and gantt diagram and between axis and gantt diagram. + type: integer + default: 50 + minimum: 0 + rightPadding: + description: | + The space allocated for the section name to the right of the activities + type: integer + default: 75 + minimum: 0 + leftPadding: + description: | + The space allocated for the section name to the left of the activities + type: integer + default: 75 + minimum: 0 + gridLineStartPadding: + description: Vertical starting position of the grid lines + type: integer + default: 35 + minimum: 0 + fontSize: + description: Font size + type: integer + default: 11 + minimum: 0 + sectionFontSize: + description: Font size for sections + type: integer + # TODO: typescript type for this also allows strings, but the docs say only integers + tsType: 'string | number' + default: 11 + minimum: 0 + numberSectionStyles: + description: The number of alternating section styles + type: integer + default: 4 + minimum: 0 + axisFormat: + description: | + Date/time format of the axis + + This might need adjustment to match your locale and preferences. + type: string + default: '%Y-%m-%d' + tickInterval: + description: | + axis ticks + + Pattern is: + + ```javascript + /^([1-9][0-9]*)(minute|hour|day|week|month)$/ + ``` + type: string + pattern: ^([1-9][0-9]*)(minute|hour|day|week|month)$ + topAxis: + description: | + When this flag is set, date labels will be added to the top of the chart + type: boolean + default: false + displayMode: + description: | + Controls the display mode. + type: string + enum: + - '' + - compact + meta:enum: + compact: Enables displaying multiple tasks on the same row. + default: '' + # Allow any string for typescript backwards compatibility (fix in Mermaid v10) + tsType: 'string | "compact"' + + SequenceDiagramConfig: + title: Sequence Diagram Config + allOf: [{ $ref: '#/$defs/BaseDiagramConfig' }] + description: The object containing configurations specific for sequence diagrams + type: object + unevaluatedProperties: false + required: + - activationWidth + - diagramMarginX + - diagramMarginY + - actorMargin + - width + - height + - boxMargin + - boxTextMargin + - noteMargin + - messageMargin + - messageAlign + - mirrorActors + - forceMenus + - bottomMarginAdj + - useMaxWidth + - rightAngles + - showSequenceNumbers + - actorFontSize + - actorFontFamily + - actorFontWeight + - noteFontSize + - noteFontFamily + - noteFontWeight + - noteAlign + - messageFontSize + - messageFontFamily + - messageFontWeight + properties: + arrowMarkerAbsolute: + type: boolean # TODO, is this actually used here (it has no default value but was in types) + hideUnusedParticipants: + type: boolean + default: false + activationWidth: + description: Width of the activation rect + type: integer + default: 10 + minimum: 0 + diagramMarginX: + description: Margin to the right and left of the sequence diagram + type: integer + default: 50 + minimum: 0 + diagramMarginY: + description: Margin to the over and under the sequence diagram + type: integer + default: 10 + minimum: 0 + actorMargin: + description: Margin between actors + type: integer + default: 50 + minimum: 0 + width: + $ref: '#/$defs/JourneyDiagramConfig/properties/width' + default: 150 + height: + $ref: '#/$defs/JourneyDiagramConfig/properties/height' + default: 65 + boxMargin: + $ref: '#/$defs/JourneyDiagramConfig/properties/boxMargin' + default: 10 + boxTextMargin: + $ref: '#/$defs/JourneyDiagramConfig/properties/boxTextMargin' + default: 5 + noteMargin: + $ref: '#/$defs/JourneyDiagramConfig/properties/noteMargin' + default: 10 + messageMargin: + $ref: '#/$defs/JourneyDiagramConfig/properties/messageMargin' + default: 35 + messageAlign: + $ref: '#/$defs/JourneyDiagramConfig/properties/messageAlign' + default: center + mirrorActors: + description: | + Mirror actors under diagram + type: boolean + default: true + forceMenus: + description: | + forces actor popup menus to always be visible (to support E2E testing). + type: boolean + default: false + bottomMarginAdj: + $ref: '#/$defs/JourneyDiagramConfig/properties/bottomMarginAdj' + default: 1 + rightAngles: + $ref: '#/$defs/JourneyDiagramConfig/properties/rightAngles' + default: false + showSequenceNumbers: + description: This will show the node numbers + type: boolean + default: false + actorFontSize: + description: This sets the font size of the actor's description + type: *fontSizeType + default: 14 + actorFontFamily: + description: This sets the font family of the actor's description + type: string + default: '"Open Sans", sans-serif' + actorFontWeight: + description: This sets the font weight of the actor's description + type: ['string', 'number'] + default: 400 + + noteFontSize: + description: This sets the font size of actor-attached notes + type: *fontSizeType + default: 14 + noteFontFamily: + description: This sets the font family of actor-attached notes + type: string + default: '"trebuchet ms", verdana, arial, sans-serif' + noteFontWeight: + description: This sets the font weight of actor-attached notes + type: ['string', 'number'] + default: 400 + noteAlign: + description: This sets the text alignment of actor-attached notes + type: string + enum: ['left', 'center', 'right'] + default: 'center' + # Allow any string for typescript backwards compatibility (fix in Mermaid v10) + tsType: 'string | "left" | "center" | "right"' + + messageFontSize: + description: This sets the font size of actor messages + type: *fontSizeType + default: 16 + messageFontFamily: + description: This sets the font family of actor messages + type: string + default: '"trebuchet ms", verdana, arial, sans-serif' + messageFontWeight: + description: This sets the font weight of actor messages + type: ['string', 'number'] + default: 400 + + wrap: + description: This sets the auto-wrap state for the diagram + type: boolean + default: false # different from C4 Diagram + wrapPadding: + $ref: '#/$defs/C4DiagramConfig/properties/wrapPadding' + default: 10 + labelBoxWidth: + description: This sets the width of the loop-box (loop, alt, opt, par) + type: number + default: 50 + labelBoxHeight: + description: This sets the height of the loop-box (loop, alt, opt, par) + type: number + default: 20 + messageFont: { '$ref': '#/$defs/FontCalculator' } + noteFont: { '$ref': '#/$defs/FontCalculator' } + actorFont: { '$ref': '#/$defs/FontCalculator' } + + FlowchartDiagramConfig: + title: Flowchart Diagram Config + allOf: [{ $ref: '#/$defs/BaseDiagramConfig' }] + description: The object containing configurations specific for flowcharts + type: object + unevaluatedProperties: false + required: + - titleTopMargin + - diagramPadding + - htmlLabels + - nodeSpacing + - rankSpacing + - curve + - useMaxWidth + - defaultRenderer + - wrappingWidth + properties: + titleTopMargin: + $ref: '#/$defs/GitGraphDiagramConfig/properties/titleTopMargin' + default: 25 + arrowMarkerAbsolute: + type: boolean # TODO, is this actually used here (it has no default value but was in types) + diagramPadding: + $ref: '#/$defs/ErDiagramConfig/properties/diagramPadding' + default: 8 + htmlLabels: + description: | + Flag for setting whether or not a html tag should be used for rendering labels on the edges. + type: boolean + default: true + nodeSpacing: + description: | + Defines the spacing between nodes on the same level + + Pertains to horizontal spacing for TB (top to bottom) or BT (bottom to top) graphs, + and the vertical spacing for LR as well as RL graphs. + type: integer + default: 50 + minimum: 0 + rankSpacing: + description: | + Defines the spacing between nodes on different levels + + Pertains to horizontal spacing for TB (top to bottom) or BT (bottom to top) graphs, + and the vertical spacing for LR as well as RL graphs. + type: integer + default: 50 + minimum: 0 + curve: + description: | + Defines how mermaid renders curves for flowcharts. + type: string + enum: ['basis', 'linear', 'cardinal'] + default: 'basis' + # Allow any string for typescript backwards compatibility (fix in Mermaid v10) + tsType: 'string | "basis" | "linear" | "cardinal"' + padding: + description: | + Represents the padding between the labels and the shape + + **Only used in new experimental rendering.** + type: number + default: 15 + defaultRenderer: + $ref: '#/$defs/StateDiagramConfig/properties/defaultRenderer' + default: dagre-wrapper + wrappingWidth: + description: | + Width of nodes where text is wrapped. + + When using markdown strings the text ius wrapped automatically, this + value sets the max width of a text before it continues on a new line. + type: number + default: 200 + + SankeyLinkColor: + description: | + Picks the color of the sankey diagram links, using the colors of the source and/or target of the links. + type: string + enum: + - source + - target + - gradient + meta:enum: + source: Use the source of sankey link for the color of the link. + target: Use the target of sankey link for the color of the link. + gradient: Use a gradient of the source and target for the color of the link. + default: gradient + + SankeyNodeAlignment: + description: | + Controls the alignment of the Sankey diagrams. + + See . + type: string + enum: + - left + - right + - center + - justify + meta:enum: + left: Align all inputs to the left. + right: Align all outputs to the right. + center: Like `left`, except that nodes without any incoming links are moved as right as possible. + justify: Like `left`, except that nodes without any outgoing links are moved to the far right. + default: justify + + SankeyDiagramConfig: + title: Sankey Diagram Config + allOf: [{ $ref: '#/$defs/BaseDiagramConfig' }] + description: The object containing configurations specific for sankey diagrams. + type: object + unevaluatedProperties: false + properties: + width: + type: number + default: 600 + height: + type: number + default: 400 + linkColor: + description: | + The color of the links in the sankey diagram. + anyOf: + - $ref: '#/$defs/SankeyLinkColor' + - description: An arbtirary [CSS color](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) + type: string + default: gradient + nodeAlignment: + $ref: '#/$defs/SankeyNodeAlignment' + default: justify + useMaxWidth: + default: false + + FontCalculator: + title: Font Calculator + description: | + JavaScript function that returns a `FontConfig`. + + By default, these return the appropriate `*FontSize`, `*FontFamily`, `*FontWeight` + values. + + For example, the font calculator called `boundaryFont` might be defined as: + + ```javascript + boundaryFont: function () { + return { + fontFamily: this.boundaryFontFamily, + fontSize: this.boundaryFontSize, + fontWeight: this.boundaryFontWeight, + }; + } + ``` + tsType: '() => Partial' + + FontConfig: + title: Font Config + type: object + additionalProperties: false + properties: + fontSize: + title: CSS Font Size + description: The font size to use + type: *fontSizeType + default: 14 + fontFamily: + description: The CSS [`font-family`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-family) to use. + type: string + default: '"Open Sans", sans-serif' + fontWeight: + description: The font weight to use. + type: ['string', 'number'] + default: normal From 52a1243da58244adafc6b7053776239865b3d5ac Mon Sep 17 00:00:00 2001 From: Alois Klink Date: Thu, 22 Dec 2022 01:19:02 +0000 Subject: [PATCH 17/31] build: use vite to get default mermaid config Adds a vitepress JsonSchema plugin that automatically loads the Mermaid Config JSON Schema from a .schema.yaml file and gets the default values from it. --- .vite/build.ts | 2 + .vite/jsonSchemaPlugin.ts | 150 ++ docs/config/setup/modules/defaultConfig.md | 35 +- package.json | 1 + packages/mermaid/src/defaultConfig.ts | 2110 +------------------- pnpm-lock.yaml | 33 +- vite.config.ts | 2 + 7 files changed, 217 insertions(+), 2116 deletions(-) create mode 100644 .vite/jsonSchemaPlugin.ts diff --git a/.vite/build.ts b/.vite/build.ts index 85c9b7fa0..b89df9e31 100644 --- a/.vite/build.ts +++ b/.vite/build.ts @@ -2,6 +2,7 @@ import { build, InlineConfig, type PluginOption } from 'vite'; import { resolve } from 'path'; import { fileURLToPath } from 'url'; import jisonPlugin from './jisonPlugin.js'; +import jsonSchemaPlugin from './jsonSchemaPlugin.js'; import { readFileSync } from 'fs'; import typescript from '@rollup/plugin-typescript'; import { visualizer } from 'rollup-plugin-visualizer'; @@ -121,6 +122,7 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions) }, plugins: [ jisonPlugin(), + jsonSchemaPlugin(), // handles `.schema.yaml` files // @ts-expect-error According to the type definitions, rollup plugins are incompatible with vite typescript({ compilerOptions: { declaration: false } }), istanbul({ diff --git a/.vite/jsonSchemaPlugin.ts b/.vite/jsonSchemaPlugin.ts new file mode 100644 index 000000000..671a9612e --- /dev/null +++ b/.vite/jsonSchemaPlugin.ts @@ -0,0 +1,150 @@ +import { load, JSON_SCHEMA } from 'js-yaml'; +import assert from 'node:assert'; +import Ajv2019, { type JSONSchemaType } from 'ajv/dist/2019.js'; +import { PluginOption } from 'vite'; + +import type { MermaidConfig, BaseDiagramConfig } from '../packages/mermaid/src/config.type.js'; + +/** + * All of the keys in the mermaid config that have a mermaid diagram config. + */ +const MERMAID_CONFIG_DIAGRAM_KEYS = [ + 'flowchart', + 'sequence', + 'gantt', + 'journey', + 'class', + 'state', + 'er', + 'pie', + 'quadrantChart', + 'requirement', + 'mindmap', + 'timeline', + 'gitGraph', + 'c4', + 'sankey', +] as const; + +/** + * Generate default values from the JSON Schema. + * + * AJV does not support nested default values yet (or default values with $ref), + * so we need to manually find them (this may be fixed in ajv v9). + * + * @param mermaidConfigSchema - The Mermaid JSON Schema to use. + * @returns The default mermaid config object. + */ +function generateDefaults(mermaidConfigSchema: JSONSchemaType) { + const ajv = new Ajv2019({ + useDefaults: true, + allowUnionTypes: true, + strict: true, + }); + + ajv.addKeyword({ + keyword: 'meta:enum', // used by jsonschema2md + errors: false, + }); + ajv.addKeyword({ + keyword: 'tsType', // used by json-schema-to-typescript + errors: false, + }); + + // ajv currently doesn't support nested default values, see https://github.com/ajv-validator/ajv/issues/1718 + // (may be fixed in v9) so we need to manually use sub-schemas + const mermaidDefaultConfig = {}; + + assert.ok(mermaidConfigSchema.$defs); + const baseDiagramConfig = mermaidConfigSchema.$defs.BaseDiagramConfig; + + for (const key of MERMAID_CONFIG_DIAGRAM_KEYS) { + const subSchemaRef = mermaidConfigSchema.properties[key].$ref; + const [root, defs, defName] = subSchemaRef.split('/'); + assert.strictEqual(root, '#'); + assert.strictEqual(defs, '$defs'); + const subSchema = { + $schema: mermaidConfigSchema.$schema, + $defs: mermaidConfigSchema.$defs, + ...mermaidConfigSchema.$defs[defName], + } as JSONSchemaType; + + const validate = ajv.compile(subSchema); + + mermaidDefaultConfig[key] = {}; + + for (const required of subSchema.required ?? []) { + if (subSchema.properties[required] === undefined && baseDiagramConfig.properties[required]) { + mermaidDefaultConfig[key][required] = baseDiagramConfig.properties[required].default; + } + } + if (!validate(mermaidDefaultConfig[key])) { + throw new Error( + `schema for subconfig ${key} does not have valid defaults! Errors were ${JSON.stringify( + validate.errors, + undefined, + 2 + )}` + ); + } + } + + const validate = ajv.compile(mermaidConfigSchema); + + if (!validate(mermaidDefaultConfig)) { + throw new Error( + `Mermaid config JSON Schema does not have valid defaults! Errors were ${JSON.stringify( + validate.errors, + undefined, + 2 + )}` + ); + } + + return mermaidDefaultConfig; +} + +/** + * Vite plugin that handles JSON Schemas saved as a `.schema.yaml` file. + * + * Use `my-example.schema.yaml?only-defaults=true` to only load the default values. + */ +export default function jsonSchemaPlugin(): PluginOption { + return { + name: 'json-schema-plugin', + transform(src: string, id: string) { + const idAsUrl = new URL(id, 'file:///'); + + if (!idAsUrl.pathname.endsWith('schema.yaml')) { + return; + } + + if (idAsUrl.searchParams.get('only-defaults')) { + const jsonSchema = load(src, { + filename: idAsUrl.pathname, + // only allow JSON types in our YAML doc (will probably be default in YAML 1.3) + // e.g. `true` will be parsed a boolean `true`, `True` will be parsed as string `"True"`. + schema: JSON_SCHEMA, + }) as JSONSchemaType; + return { + code: `export default ${JSON.stringify(generateDefaults(jsonSchema), undefined, 2)};`, + map: null, // no source map + }; + } else { + return { + code: `export default ${JSON.stringify( + load(src, { + filename: idAsUrl.pathname, + // only allow JSON types in our YAML doc (will probably be default in YAML 1.3) + // e.g. `true` will be parsed a boolean `true`, `True` will be parsed as string `"True"`. + schema: JSON_SCHEMA, + }), + undefined, + 2 + )};`, + map: null, // provide source map if available + }; + } + }, + }; +} diff --git a/docs/config/setup/modules/defaultConfig.md b/docs/config/setup/modules/defaultConfig.md index 793dfffae..a55ec1808 100644 --- a/docs/config/setup/modules/defaultConfig.md +++ b/docs/config/setup/modules/defaultConfig.md @@ -14,7 +14,7 @@ #### Defined in -[defaultConfig.ts:2300](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L2300) +[defaultConfig.ts:266](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L266) --- @@ -22,35 +22,12 @@ • `Const` **default**: `Partial`<`MermaidConfig`> -**Configuration methods in Mermaid version 8.6.0 have been updated, to learn more\[[click -here](8.6.0_docs.md)].** +Default mermaid configuration options. -## **What follows are config instructions for older versions** - -These are the default options which can be overridden with the initialization call like so: - -**Example 1:** - -```js -mermaid.initialize({ flowchart: { htmlLabels: false } }); -``` - -**Example 2:** - -```html - -``` - -A summary of all options and their defaults is found [here](#mermaidapi-configuration-defaults). -A description of each option follows below. +Please see the Mermaid config JSON Schema for the default JSON values. +Non-JSON JS default values are listed in this file, e.g. functions, or +`undefined` (explicitly set so that `configKeys` finds them). #### Defined in -[defaultConfig.ts:33](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L33) +[defaultConfig.ts:16](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L16) diff --git a/package.json b/package.json index 738d1796a..e21e02d14 100644 --- a/package.json +++ b/package.json @@ -81,6 +81,7 @@ "@vitest/coverage-v8": "^0.32.2", "@vitest/spy": "^0.32.2", "@vitest/ui": "^0.32.2", + "ajv": "^8.12.0", "concurrently": "^8.0.1", "cors": "^2.8.5", "coveralls": "^3.1.1", diff --git a/packages/mermaid/src/defaultConfig.ts b/packages/mermaid/src/defaultConfig.ts index cc2b79a80..62b361cff 100644 --- a/packages/mermaid/src/defaultConfig.ts +++ b/packages/mermaid/src/defaultConfig.ts @@ -1,559 +1,29 @@ import theme from './themes/index.js'; import { type MermaidConfig } from './config.type.js'; + +// Uses our custom Vite jsonSchemaPlugin to load only the default values from +// our JSON Schema +// @ts-expect-error This file is automatically generated via a custom Vite plugin +import defaultConfigJson from './schemas/config.schema.yaml?only-defaults=true'; + /** - * **Configuration methods in Mermaid version 8.6.0 have been updated, to learn more[[click - * here](8.6.0_docs.md)].** + * Default mermaid configuration options. * - * ## **What follows are config instructions for older versions** - * - * These are the default options which can be overridden with the initialization call like so: - * - * **Example 1:** - * - * ```js - * mermaid.initialize({ flowchart:{ htmlLabels: false } }); - * ``` - * - * **Example 2:** - * - * ```html - * - * ``` - * - * A summary of all options and their defaults is found [here](#mermaidapi-configuration-defaults). - * A description of each option follows below. + * Please see the Mermaid config JSON Schema for the default JSON values. + * Non-JSON JS default values are listed in this file, e.g. functions, or + * `undefined` (explicitly set so that `configKeys` finds them). */ const config: Partial = { - /** - * Theme , the CSS style sheet - * - * | Parameter | Description | Type | Required | Values | - * | --------- | --------------- | ------ | -------- | ---------------------------------------------- | - * | theme | Built in Themes | string | Optional | 'default', 'forest', 'dark', 'neutral', 'null' | - * - * **Notes:** To disable any pre-defined mermaid theme, use "null". - * - * @example - * - * ```js - * { - * "theme": "forest", - * "themeCSS": ".node rect { fill: red; }" - * } - * ``` - */ - theme: 'default', - themeVariables: theme['default'].getThemeVariables(), - themeCSS: undefined, - /* **maxTextSize** - The maximum allowed size of the users text diagram */ - maxTextSize: 50000, - darkMode: false, - - /** - * | Parameter | Description | Type | Required | Values | - * | ---------- | ------------------------------------------------------ | ------ | -------- | --------------------------- | - * | fontFamily | specifies the font to be used in the rendered diagrams | string | Required | Any Possible CSS FontFamily | - * - * **Notes:** Default value: '"trebuchet ms", verdana, arial, sans-serif;'. - */ - fontFamily: '"trebuchet ms", verdana, arial, sans-serif;', - - /** - * | Parameter | Description | Type | Required | Values | - * | --------- | ----------------------------------------------------- | ---------------- | -------- | --------------------------------------------- | - * | logLevel | This option decides the amount of logging to be used. | string \| number | Required | 'trace','debug','info','warn','error','fatal' | - * - * **Notes:** - * - * - Trace: 0 - * - Debug: 1 - * - Info: 2 - * - Warn: 3 - * - Error: 4 - * - Fatal: 5 (default) - */ - logLevel: 5, - - /** - * | Parameter | Description | Type | Required | Values | - * | ------------- | --------------------------------- | ------ | -------- | ------------------------------------------ | - * | securityLevel | Level of trust for parsed diagram | string | Required | 'sandbox', 'strict', 'loose', 'antiscript' | - * - * **Notes**: - * - * - **strict**: (**default**) HTML tags in the text are encoded and click functionality is disabled. - * - **antiscript**: HTML tags in text are allowed (only script elements are removed), and click - * functionality is enabled. - * - **loose**: HTML tags in text are allowed and click functionality is enabled. - * - **sandbox**: With this security level, all rendering takes place in a sandboxed iframe. This - * prevent any JavaScript from running in the context. This may hinder interactive functionality - * of the diagram, like scripts, popups in the sequence diagram, links to other tabs or targets, etc. - */ - securityLevel: 'strict', - - /** - * | Parameter | Description | Type | Required | Values | - * | ----------- | -------------------------------------------- | ------- | -------- | ----------- | - * | startOnLoad | Dictates whether mermaid starts on Page load | boolean | Required | true, false | - * - * **Notes:** Default value: true - */ - startOnLoad: true, - - /** - * | Parameter | Description | Type | Required | Values | - * | ------------------- | ---------------------------------------------------------------------------- | ------- | -------- | ----------- | - * | arrowMarkerAbsolute | Controls whether or arrow markers in html code are absolute paths or anchors | boolean | Required | true, false | - * - * **Notes**: - * - * This matters if you are using base tag settings. - * - * Default value: false - */ - arrowMarkerAbsolute: false, - - /** - * This option controls which currentConfig keys are considered _secure_ and can only be changed - * via call to mermaidAPI.initialize. Calls to mermaidAPI.reinitialize cannot make changes to the - * `secure` keys in the current currentConfig. This prevents malicious graph directives from - * overriding a site's default security. - * - * **Notes**: - * - * Default value: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize'] - */ - secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize'], - /** - * This option controls if the generated ids of nodes in the SVG are generated randomly or based - * on a seed. If set to false, the IDs are generated based on the current date and thus are not - * deterministic. This is the default behavior. - * - * **Notes**: - * - * This matters if your files are checked into source control e.g. git and should not change unless - * content is changed. - * - * Default value: false - */ - deterministicIds: false, - - /** - * This option is the optional seed for deterministic ids. if set to undefined but - * deterministicIds is true, a simple number iterator is used. You can set this attribute to base - * the seed on a static string. - */ + ...defaultConfigJson, + // Set, even though they're `undefined` so that `configKeys` finds these keys + // TODO: Should we replace these with `null` so that they can go in the JSON Schema? deterministicIDSeed: undefined, + themeCSS: undefined, - /** The object containing configurations specific for flowcharts */ - flowchart: { - /** - * ### titleTopMargin - * - * | Parameter | Description | Type | Required | Values | - * | -------------- | ---------------------------------------------- | ------- | -------- | ------------------ | - * | titleTopMargin | Margin top for the text over the flowchart | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 25 - */ - titleTopMargin: 25, - - /** - * | Parameter | Description | Type | Required | Values | - * | -------------- | ----------------------------------------------- | ------- | -------- | ------------------ | - * | diagramPadding | Amount of padding around the diagram as a whole | Integer | Required | Any Positive Value | - * - * **Notes:** - * - * The amount of padding around the diagram as a whole so that embedded diagrams have margins, - * expressed in pixels - * - * Default value: 8 - */ - diagramPadding: 8, - - /** - * | Parameter | Description | Type | Required | Values | - * | ---------- | -------------------------------------------------------------------------------------------- | ------- | -------- | ----------- | - * | htmlLabels | Flag for setting whether or not a html tag should be used for rendering labels on the edges. | boolean | Required | true, false | - * - * **Notes:** Default value: true. - */ - htmlLabels: true, - - /** - * | Parameter | Description | Type | Required | Values | - * | ----------- | --------------------------------------------------- | ------- | -------- | ------------------- | - * | nodeSpacing | Defines the spacing between nodes on the same level | Integer | Required | Any positive Number | - * - * **Notes:** - * - * Pertains to horizontal spacing for TB (top to bottom) or BT (bottom to top) graphs, and the - * vertical spacing for LR as well as RL graphs.** - * - * Default value: 50 - */ - nodeSpacing: 50, - - /** - * | Parameter | Description | Type | Required | Values | - * | ----------- | ----------------------------------------------------- | ------- | -------- | ------------------- | - * | rankSpacing | Defines the spacing between nodes on different levels | Integer | Required | Any Positive Number | - * - * **Notes**: - * - * Pertains to vertical spacing for TB (top to bottom) or BT (bottom to top), and the horizontal - * spacing for LR as well as RL graphs. - * - * Default value 50 - */ - rankSpacing: 50, - - /** - * | Parameter | Description | Type | Required | Values | - * | --------- | -------------------------------------------------- | ------ | -------- | ----------------------------- | - * | curve | Defines how mermaid renders curves for flowcharts. | string | Required | 'basis', 'linear', 'cardinal' | - * - * **Notes:** - * - * Default Value: 'basis' - */ - curve: 'basis', - // Only used in new experimental rendering - // represents the padding between the labels and the shape - padding: 15, - - /** - * | Parameter | Description | Type | Required | Values | - * | ----------- | ----------- | ------- | -------- | ----------- | - * | useMaxWidth | See notes | boolean | 4 | true, false | - * - * **Notes:** - * - * When this flag is set the height and width is set to 100% and is then scaling with the - * available space if not the absolute space required is used. - * - * Default value: true - */ - useMaxWidth: true, - - /** - * | Parameter | Description | Type | Required | Values | - * | --------------- | ----------- | ------- | -------- | ----------------------- | - * | defaultRenderer | See notes | boolean | 4 | dagre-d3, dagre-wrapper, elk | - * - * **Notes:** - * - * Decides which rendering engine that is to be used for the rendering. Legal values are: - * dagre-d3 dagre-wrapper - wrapper for dagre implemented in mermaid, elk for layout using - * elkjs - * - * Default value: 'dagre-wrapper' - */ - defaultRenderer: 'dagre-wrapper', - /** - * | Parameter | Description | Type | Required | Values | - * | --------------- | ----------- | ------- | -------- | ----------------------- | - * | wrappingWidth | See notes | number | 4 | width of nodes where text is wrapped | - * - * **Notes:** - * - * When using markdown strings the text ius wrapped automatically, this - * value sets the max width of a text before it continues on a new line. - * Default value: 'dagre-wrapper' - */ - wrappingWidth: 200, - }, - - /** The object containing configurations specific for sequence diagrams */ + // add non-JSON default config values + themeVariables: theme['default'].getThemeVariables(), sequence: { - hideUnusedParticipants: false, - /** - * | Parameter | Description | Type | Required | Values | - * | --------------- | ---------------------------- | ------- | -------- | ------------------ | - * | activationWidth | Width of the activation rect | Integer | Required | Any Positive Value | - * - * **Notes:** Default value :10 - */ - activationWidth: 10, - - /** - * | Parameter | Description | Type | Required | Values | - * | -------------- | ---------------------------------------------------- | ------- | -------- | ------------------ | - * | diagramMarginX | Margin to the right and left of the sequence diagram | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 50 - */ - diagramMarginX: 50, - - /** - * | Parameter | Description | Type | Required | Values | - * | -------------- | ------------------------------------------------- | ------- | -------- | ------------------ | - * | diagramMarginY | Margin to the over and under the sequence diagram | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 10 - */ - diagramMarginY: 10, - - /** - * | Parameter | Description | Type | Required | Values | - * | ----------- | --------------------- | ------- | -------- | ------------------ | - * | actorMargin | Margin between actors | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 50 - */ - actorMargin: 50, - - /** - * | Parameter | Description | Type | Required | Values | - * | --------- | -------------------- | ------- | -------- | ------------------ | - * | width | Width of actor boxes | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 150 - */ - width: 150, - - /** - * | Parameter | Description | Type | Required | Values | - * | --------- | --------------------- | ------- | -------- | ------------------ | - * | height | Height of actor boxes | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 65 - */ - height: 65, - - /** - * | Parameter | Description | Type | Required | Values | - * | --------- | ------------------------ | ------- | -------- | ------------------ | - * | boxMargin | Margin around loop boxes | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 10 - */ - boxMargin: 10, - - /** - * | Parameter | Description | Type | Required | Values | - * | ------------- | -------------------------------------------- | ------- | -------- | ------------------ | - * | boxTextMargin | Margin around the text in loop/alt/opt boxes | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 5 - */ - boxTextMargin: 5, - - /** - * | Parameter | Description | Type | Required | Values | - * | ---------- | ------------------- | ------- | -------- | ------------------ | - * | noteMargin | margin around notes | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 10 - */ - noteMargin: 10, - - /** - * | Parameter | Description | Type | Required | Values | - * | ------------- | ---------------------- | ------- | -------- | ------------------ | - * | messageMargin | Space between messages | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 35 - */ - messageMargin: 35, - - /** - * | Parameter | Description | Type | Required | Values | - * | ------------ | --------------------------- | ------ | -------- | ------------------------- | - * | messageAlign | Multiline message alignment | string | Required | 'left', 'center', 'right' | - * - * **Notes:** Default value: 'center' - */ - messageAlign: 'center', - - /** - * | Parameter | Description | Type | Required | Values | - * | ------------ | --------------------------- | ------- | -------- | ----------- | - * | mirrorActors | Mirror actors under diagram | boolean | Required | true, false | - * - * **Notes:** Default value: true - */ - mirrorActors: true, - - /** - * | Parameter | Description | Type | Required | Values | - * | ---------- | ----------------------------------------------------------------------- | ------- | -------- | ----------- | - * | forceMenus | forces actor popup menus to always be visible (to support E2E testing). | Boolean | Required | True, False | - * - * **Notes:** - * - * Default value: false. - */ - forceMenus: false, - - /** - * | Parameter | Description | Type | Required | Values | - * | --------------- | ------------------------------------------ | ------- | -------- | ------------------ | - * | bottomMarginAdj | Prolongs the edge of the diagram downwards | Integer | Required | Any Positive Value | - * - * **Notes:** - * - * Depending on css styling this might need adjustment. - * - * Default value: 1 - */ - bottomMarginAdj: 1, - - /** - * | Parameter | Description | Type | Required | Values | - * | ----------- | ----------- | ------- | -------- | ----------- | - * | useMaxWidth | See Notes | boolean | Required | true, false | - * - * **Notes:** When this flag is set to true, the height and width is set to 100% and is then - * scaling with the available space. If set to false, the absolute space required is used. - * - * Default value: true - */ - useMaxWidth: true, - - /** - * | Parameter | Description | Type | Required | Values | - * | ----------- | ------------------------------------ | ------- | -------- | ----------- | - * | rightAngles | display curve arrows as right angles | boolean | Required | true, false | - * - * **Notes:** - * - * This will display arrows that start and begin at the same node as right angles, rather than a - * curve - * - * Default value: false - */ - rightAngles: false, - - /** - * | Parameter | Description | Type | Required | Values | - * | ------------------- | ------------------------------- | ------- | -------- | ----------- | - * | showSequenceNumbers | This will show the node numbers | boolean | Required | true, false | - * - * **Notes:** Default value: false - */ - showSequenceNumbers: false, - - /** - * | Parameter | Description | Type | Required | Values | - * | ------------- | -------------------------------------------------- | ------- | -------- | ------------------ | - * | actorFontSize | This sets the font size of the actor's description | Integer | Require | Any Positive Value | - * - * **Notes:** **Default value 14**.. - */ - actorFontSize: 14, - - /** - * | Parameter | Description | Type | Required | Values | - * | --------------- | ---------------------------------------------------- | ------ | -------- | --------------------------- | - * | actorFontFamily | This sets the font family of the actor's description | string | Required | Any Possible CSS FontFamily | - * - * **Notes:** Default value: "'Open Sans", sans-serif' - */ - actorFontFamily: '"Open Sans", sans-serif', - - /** - * This sets the font weight of the actor's description - * - * **Notes:** Default value: 400. - */ - actorFontWeight: 400, - - /** - * | Parameter | Description | Type | Required | Values | - * | ------------ | ----------------------------------------------- | ------- | -------- | ------------------ | - * | noteFontSize | This sets the font size of actor-attached notes | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 14 - */ - noteFontSize: 14, - - /** - * | Parameter | Description | Type | Required | Values | - * | -------------- | -------------------------------------------------- | ------ | -------- | --------------------------- | - * | noteFontFamily | This sets the font family of actor-attached notes. | string | Required | Any Possible CSS FontFamily | - * - * **Notes:** Default value: ''"trebuchet ms", verdana, arial, sans-serif' - */ - noteFontFamily: '"trebuchet ms", verdana, arial, sans-serif', - - /** - * This sets the font weight of the note's description - * - * **Notes:** Default value: 400 - */ - noteFontWeight: 400, - - /** - * | Parameter | Description | Type | Required | Values | - * | --------- | ---------------------------------------------------- | ------ | -------- | ------------------------- | - * | noteAlign | This sets the text alignment of actor-attached notes | string | required | 'left', 'center', 'right' | - * - * **Notes:** Default value: 'center' - */ - noteAlign: 'center', - - /** - * | Parameter | Description | Type | Required | Values | - * | --------------- | ----------------------------------------- | ------- | -------- | ------------------- | - * | messageFontSize | This sets the font size of actor messages | Integer | Required | Any Positive Number | - * - * **Notes:** Default value: 16 - */ - messageFontSize: 16, - - /** - * | Parameter | Description | Type | Required | Values | - * | ----------------- | ------------------------------------------- | ------ | -------- | --------------------------- | - * | messageFontFamily | This sets the font family of actor messages | string | Required | Any Possible CSS FontFamily | - * - * **Notes:** Default value: '"trebuchet ms", verdana, arial, sans-serif' - */ - messageFontFamily: '"trebuchet ms", verdana, arial, sans-serif', - - /** - * This sets the font weight of the message's description - * - * **Notes:** Default value: 400. - */ - messageFontWeight: 400, - - /** - * This sets the auto-wrap state for the diagram - * - * **Notes:** Default value: false. - */ - wrap: false, - - /** - * This sets the auto-wrap padding for the diagram (sides only) - * - * **Notes:** Default value: 0. - */ - wrapPadding: 10, - - /** - * This sets the width of the loop-box (loop, alt, opt, par) - * - * **Notes:** Default value: 50. - */ - labelBoxWidth: 50, - - /** - * This sets the height of the loop-box (loop, alt, opt, par) - * - * **Notes:** Default value: 20. - */ - labelBoxHeight: 20, - + ...defaultConfigJson.sequence, messageFont: function () { return { fontFamily: this.messageFontFamily, @@ -576,1476 +46,14 @@ const config: Partial = { }; }, }, - - /** The object containing configurations specific for gantt diagrams */ gantt: { - /** - * ### titleTopMargin - * - * | Parameter | Description | Type | Required | Values | - * | -------------- | ---------------------------------------------- | ------- | -------- | ------------------ | - * | titleTopMargin | Margin top for the text over the gantt diagram | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 25 - */ - titleTopMargin: 25, - - /** - * | Parameter | Description | Type | Required | Values | - * | --------- | ----------------------------------- | ------- | -------- | ------------------ | - * | barHeight | The height of the bars in the graph | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 20 - */ - barHeight: 20, - - /** - * | Parameter | Description | Type | Required | Values | - * | --------- | ---------------------------------------------------------------- | ------- | -------- | ------------------ | - * | barGap | The margin between the different activities in the gantt diagram | Integer | Optional | Any Positive Value | - * - * **Notes:** Default value: 4 - */ - barGap: 4, - - /** - * | Parameter | Description | Type | Required | Values | - * | ---------- | -------------------------------------------------------------------------- | ------- | -------- | ------------------ | - * | topPadding | Margin between title and gantt diagram and between axis and gantt diagram. | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 50 - */ - topPadding: 50, - - /** - * | Parameter | Description | Type | Required | Values | - * | ------------ | ----------------------------------------------------------------------- | ------- | -------- | ------------------ | - * | rightPadding | The space allocated for the section name to the right of the activities | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 75 - */ - rightPadding: 75, - - /** - * | Parameter | Description | Type | Required | Values | - * | ----------- | ---------------------------------------------------------------------- | ------- | -------- | ------------------ | - * | leftPadding | The space allocated for the section name to the left of the activities | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 75 - */ - leftPadding: 75, - - /** - * | Parameter | Description | Type | Required | Values | - * | -------------------- | -------------------------------------------- | ------- | -------- | ------------------ | - * | gridLineStartPadding | Vertical starting position of the grid lines | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 35 - */ - gridLineStartPadding: 35, - - /** - * | Parameter | Description | Type | Required | Values | - * | --------- | ----------- | ------- | -------- | ------------------ | - * | fontSize | Font size | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 11 - */ - fontSize: 11, - - /** - * | Parameter | Description | Type | Required | Values | - * | --------------- | ---------------------- | ------- | -------- | ------------------ | - * | sectionFontSize | Font size for sections | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 11 - */ - sectionFontSize: 11, - - /** - * | Parameter | Description | Type | Required | Values | - * | ------------------- | ---------------------------------------- | ------- | -------- | ------------------ | - * | numberSectionStyles | The number of alternating section styles | Integer | 4 | Any Positive Value | - * - * **Notes:** Default value: 4 - */ - numberSectionStyles: 4, - - /** - * | Parameter | Description | Type | Required | Values | - * | ----------- | ------------------------- | ------ | -------- | --------- | - * | displayMode | Controls the display mode | string | 4 | 'compact' | - * - * **Notes**: - * - * - **compact**: Enables displaying multiple tasks on the same row. - */ - displayMode: '', - - /** - * | Parameter | Description | Type | Required | Values | - * | ---------- | ---------------------------- | ---- | -------- | ---------------- | - * | axisFormat | Date/time format of the axis | 3 | Required | Date in yy-mm-dd | - * - * **Notes:** - * - * This might need adjustment to match your locale and preferences - * - * Default value: '%Y-%m-%d'. - */ - axisFormat: '%Y-%m-%d', - - /** - * | Parameter | Description | Type | Required | Values | - * | ------------ | ------------| ------ | -------- | ------- | - * | tickInterval | axis ticks | string | Optional | string | - * - * **Notes:** - * - * Pattern is /^([1-9][0-9]*)(minute|hour|day|week|month)$/ - * - * Default value: undefined - */ + ...defaultConfigJson.gantt, tickInterval: undefined, - /** - * | Parameter | Description | Type | Required | Values | - * | ----------- | ----------- | ------- | -------- | ----------- | - * | useMaxWidth | See notes | boolean | 4 | true, false | - * - * **Notes:** - * - * When this flag is set the height and width is set to 100% and is then scaling with the - * available space if not the absolute space required is used. - * - * Default value: true - */ - useMaxWidth: true, - - /** - * | Parameter | Description | Type | Required | Values | - * | --------- | ----------- | ------- | -------- | ----------- | - * | topAxis | See notes | Boolean | 4 | True, False | - * - * **Notes:** when this flag is set date labels will be added to the top of the chart - * - * **Default value false**. - */ - topAxis: false, - - useWidth: undefined, + useWidth: undefined, // can probably be removed since `configKeys` already includes this }, - - /** The object containing configurations specific for journey diagrams */ - journey: { - /** - * | Parameter | Description | Type | Required | Values | - * | -------------- | ---------------------------------------------------- | ------- | -------- | ------------------ | - * | diagramMarginX | Margin to the right and left of the sequence diagram | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 50 - */ - diagramMarginX: 50, - - /** - * | Parameter | Description | Type | Required | Values | - * | -------------- | -------------------------------------------------- | ------- | -------- | ------------------ | - * | diagramMarginY | Margin to the over and under the sequence diagram. | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 10 - */ - diagramMarginY: 10, - - /** - * | Parameter | Description | Type | Required | Values | - * | ----------- | --------------------- | ------- | -------- | ------------------ | - * | actorMargin | Margin between actors | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 50 - */ - leftMargin: 150, - - /** - * | Parameter | Description | Type | Required | Values | - * | --------- | -------------------- | ------- | -------- | ------------------ | - * | width | Width of actor boxes | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 150 - */ - width: 150, - - /** - * | Parameter | Description | Type | Required | Values | - * | --------- | --------------------- | ------- | -------- | ------------------ | - * | height | Height of actor boxes | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 65 - */ - height: 50, - - /** - * | Parameter | Description | Type | Required | Values | - * | --------- | ------------------------ | ------- | -------- | ------------------ | - * | boxMargin | Margin around loop boxes | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 10 - */ - boxMargin: 10, - - /** - * | Parameter | Description | Type | Required | Values | - * | ------------- | -------------------------------------------- | ------- | -------- | ------------------ | - * | boxTextMargin | Margin around the text in loop/alt/opt boxes | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 5 - */ - boxTextMargin: 5, - - /** - * | Parameter | Description | Type | Required | Values | - * | ---------- | ------------------- | ------- | -------- | ------------------ | - * | noteMargin | Margin around notes | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 10 - */ - noteMargin: 10, - - /** - * | Parameter | Description | Type | Required | Values | - * | ------------- | ----------------------- | ------- | -------- | ------------------ | - * | messageMargin | Space between messages. | Integer | Required | Any Positive Value | - * - * **Notes:** - * - * Space between messages. - * - * Default value: 35 - */ - messageMargin: 35, - - /** - * | Parameter | Description | Type | Required | Values | - * | ------------ | --------------------------- | ---- | -------- | ------------------------- | - * | messageAlign | Multiline message alignment | 3 | 4 | 'left', 'center', 'right' | - * - * **Notes:** Default value: 'center' - */ - messageAlign: 'center', - - /** - * | Parameter | Description | Type | Required | Values | - * | --------------- | ------------------------------------------ | ------- | -------- | ------------------ | - * | bottomMarginAdj | Prolongs the edge of the diagram downwards | Integer | 4 | Any Positive Value | - * - * **Notes:** - * - * Depending on css styling this might need adjustment. - * - * Default value: 1 - */ - bottomMarginAdj: 1, - - /** - * | Parameter | Description | Type | Required | Values | - * | ----------- | ----------- | ------- | -------- | ----------- | - * | useMaxWidth | See notes | boolean | 4 | true, false | - * - * **Notes:** - * - * When this flag is set the height and width is set to 100% and is then scaling with the - * available space if not the absolute space required is used. - * - * Default value: true - */ - useMaxWidth: true, - - /** - * | Parameter | Description | Type | Required | Values | - * | ----------- | --------------------------------- | ---- | -------- | ----------- | - * | rightAngles | Curved Arrows become Right Angles | 3 | 4 | true, false | - * - * **Notes:** - * - * This will display arrows that start and begin at the same node as right angles, rather than a - * curves - * - * Default value: false - */ - rightAngles: false, - taskFontSize: 14, - taskFontFamily: '"Open Sans", sans-serif', - taskMargin: 50, - // width of activation box - activationWidth: 10, - - // text placement as: tspan | fo | old only text as before - textPlacement: 'fo', - actorColours: ['#8FBC8F', '#7CFC00', '#00FFFF', '#20B2AA', '#B0E0E6', '#FFFFE0'], - - sectionFills: ['#191970', '#8B008B', '#4B0082', '#2F4F4F', '#800000', '#8B4513', '#00008B'], - sectionColours: ['#fff'], - }, - /** The object containing configurations specific for timeline diagrams */ - timeline: { - /** - * | Parameter | Description | Type | Required | Values | - * | -------------- | ---------------------------------------------------- | ------- | -------- | ------------------ | - * | diagramMarginX | Margin to the right and left of the sequence diagram | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 50 - */ - diagramMarginX: 50, - - /** - * | Parameter | Description | Type | Required | Values | - * | -------------- | -------------------------------------------------- | ------- | -------- | ------------------ | - * | diagramMarginY | Margin to the over and under the sequence diagram. | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 10 - */ - diagramMarginY: 10, - - /** - * | Parameter | Description | Type | Required | Values | - * | ----------- | --------------------- | ------- | -------- | ------------------ | - * | actorMargin | Margin between actors | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 50 - */ - leftMargin: 150, - - /** - * | Parameter | Description | Type | Required | Values | - * | --------- | -------------------- | ------- | -------- | ------------------ | - * | width | Width of actor boxes | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 150 - */ - width: 150, - - /** - * | Parameter | Description | Type | Required | Values | - * | --------- | --------------------- | ------- | -------- | ------------------ | - * | height | Height of actor boxes | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 65 - */ - height: 50, - - /** - * | Parameter | Description | Type | Required | Values | - * | --------- | ------------------------ | ------- | -------- | ------------------ | - * | boxMargin | Margin around loop boxes | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 10 - */ - boxMargin: 10, - - /** - * | Parameter | Description | Type | Required | Values | - * | ------------- | -------------------------------------------- | ------- | -------- | ------------------ | - * | boxTextMargin | Margin around the text in loop/alt/opt boxes | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 5 - */ - boxTextMargin: 5, - - /** - * | Parameter | Description | Type | Required | Values | - * | ---------- | ------------------- | ------- | -------- | ------------------ | - * | noteMargin | Margin around notes | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 10 - */ - noteMargin: 10, - - /** - * | Parameter | Description | Type | Required | Values | - * | ------------- | ----------------------- | ------- | -------- | ------------------ | - * | messageMargin | Space between messages. | Integer | Required | Any Positive Value | - * - * **Notes:** - * - * Space between messages. - * - * Default value: 35 - */ - messageMargin: 35, - - /** - * | Parameter | Description | Type | Required | Values | - * | ------------ | --------------------------- | ---- | -------- | ------------------------- | - * | messageAlign | Multiline message alignment | 3 | 4 | 'left', 'center', 'right' | - * - * **Notes:** Default value: 'center' - */ - messageAlign: 'center', - - /** - * | Parameter | Description | Type | Required | Values | - * | --------------- | ------------------------------------------ | ------- | -------- | ------------------ | - * | bottomMarginAdj | Prolongs the edge of the diagram downwards | Integer | 4 | Any Positive Value | - * - * **Notes:** - * - * Depending on css styling this might need adjustment. - * - * Default value: 1 - */ - bottomMarginAdj: 1, - - /** - * | Parameter | Description | Type | Required | Values | - * | ----------- | ----------- | ------- | -------- | ----------- | - * | useMaxWidth | See notes | boolean | 4 | true, false | - * - * **Notes:** - * - * When this flag is set the height and width is set to 100% and is then scaling with the - * available space if not the absolute space required is used. - * - * Default value: true - */ - useMaxWidth: true, - - /** - * | Parameter | Description | Type | Required | Values | - * | ----------- | --------------------------------- | ---- | -------- | ----------- | - * | rightAngles | Curved Arrows become Right Angles | 3 | 4 | true, false | - * - * **Notes:** - * - * This will display arrows that start and begin at the same node as right angles, rather than a - * curves - * - * Default value: false - */ - rightAngles: false, - taskFontSize: 14, - taskFontFamily: '"Open Sans", sans-serif', - taskMargin: 50, - // width of activation box - activationWidth: 10, - - // text placement as: tspan | fo | old only text as before - textPlacement: 'fo', - actorColours: ['#8FBC8F', '#7CFC00', '#00FFFF', '#20B2AA', '#B0E0E6', '#FFFFE0'], - - sectionFills: ['#191970', '#8B008B', '#4B0082', '#2F4F4F', '#800000', '#8B4513', '#00008B'], - sectionColours: ['#fff'], - disableMulticolor: false, - }, - class: { - /** - * ### titleTopMargin - * - * | Parameter | Description | Type | Required | Values | - * | -------------- | ---------------------------------------------- | ------- | -------- | ------------------ | - * | titleTopMargin | Margin top for the text over the class diagram | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 25 - */ - titleTopMargin: 25, - arrowMarkerAbsolute: false, - dividerMargin: 10, - padding: 5, - textHeight: 10, - - /** - * | Parameter | Description | Type | Required | Values | - * | ----------- | ----------- | ------- | -------- | ----------- | - * | useMaxWidth | See notes | boolean | 4 | true, false | - * - * **Notes:** - * - * When this flag is set the height and width is set to 100% and is then scaling with the - * available space if not the absolute space required is used. - * - * Default value: true - */ - useMaxWidth: true, - /** - * | Parameter | Description | Type | Required | Values | - * | --------------- | ----------- | ------- | -------- | ----------------------- | - * | defaultRenderer | See notes | boolean | 4 | dagre-d3, dagre-wrapper | - * - * **Notes**: - * - * Decides which rendering engine that is to be used for the rendering. Legal values are: - * dagre-d3 dagre-wrapper - wrapper for dagre implemented in mermaid - * - * Default value: 'dagre-d3' - */ - defaultRenderer: 'dagre-wrapper', - }, - state: { - /** - * ### titleTopMargin - * - * | Parameter | Description | Type | Required | Values | - * | -------------- | ---------------------------------------------- | ------- | -------- | ------------------ | - * | titleTopMargin | Margin top for the text over the state diagram | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 25 - */ - titleTopMargin: 25, - dividerMargin: 10, - sizeUnit: 5, - padding: 8, - textHeight: 10, - titleShift: -15, - noteMargin: 10, - forkWidth: 70, - forkHeight: 7, - // Used - miniPadding: 2, - // Font size factor, this is used to guess the width of the edges labels before rendering by dagre - // layout. This might need updating if/when switching font - fontSizeFactor: 5.02, - fontSize: 24, - labelHeight: 16, - edgeLengthFactor: '20', - compositTitleSize: 35, - radius: 5, - /** - * | Parameter | Description | Type | Required | Values | - * | ----------- | ----------- | ------- | -------- | ----------- | - * | useMaxWidth | See notes | boolean | 4 | true, false | - * - * **Notes:** - * - * When this flag is set the height and width is set to 100% and is then scaling with the - * available space if not the absolute space required is used. - * - * Default value: true - */ - useMaxWidth: true, - /** - * | Parameter | Description | Type | Required | Values | - * | --------------- | ----------- | ------- | -------- | ----------------------- | - * | defaultRenderer | See notes | boolean | 4 | dagre-d3, dagre-wrapper | - * - * **Notes:** - * - * Decides which rendering engine that is to be used for the rendering. Legal values are: - * dagre-d3 dagre-wrapper - wrapper for dagre implemented in mermaid - * - * Default value: 'dagre-d3' - */ - defaultRenderer: 'dagre-wrapper', - }, - - /** The object containing configurations specific for entity relationship diagrams */ - er: { - /** - * ### titleTopMargin - * - * | Parameter | Description | Type | Required | Values | - * | -------------- | ---------------------------------------------- | ------- | -------- | ------------------ | - * | titleTopMargin | Margin top for the text over the diagram | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 25 - */ - titleTopMargin: 25, - - /** - * | Parameter | Description | Type | Required | Values | - * | -------------- | ----------------------------------------------- | ------- | -------- | ------------------ | - * | diagramPadding | Amount of padding around the diagram as a whole | Integer | Required | Any Positive Value | - * - * **Notes:** - * - * The amount of padding around the diagram as a whole so that embedded diagrams have margins, - * expressed in pixels - * - * Default value: 20 - */ - diagramPadding: 20, - - /** - * | Parameter | Description | Type | Required | Values | - * | --------------- | ---------------------------------------- | ------ | -------- | ---------------------- | - * | layoutDirection | Directional bias for layout of entities. | string | Required | "TB", "BT", "LR", "RL" | - * - * **Notes:** - * - * 'TB' for Top-Bottom, 'BT'for Bottom-Top, 'LR' for Left-Right, or 'RL' for Right to Left. - * - * T = top, B = bottom, L = left, and R = right. - * - * Default value: 'TB' - */ - layoutDirection: 'TB', - - /** - * | Parameter | Description | Type | Required | Values | - * | -------------- | ---------------------------------- | ------- | -------- | ------------------ | - * | minEntityWidth | The minimum width of an entity box | Integer | Required | Any Positive Value | - * - * **Notes:** Expressed in pixels. Default value: 100 - */ - minEntityWidth: 100, - - /** - * | Parameter | Description | Type | Required | Values | - * | --------------- | ----------------------------------- | ------- | -------- | ------------------ | - * | minEntityHeight | The minimum height of an entity box | Integer | 4 | Any Positive Value | - * - * **Notes:** Expressed in pixels Default value: 75 - */ - minEntityHeight: 75, - - /** - * | Parameter | Description | Type | Required | Values | - * | ------------- | ------------------------------------------------------------ | ------- | -------- | ------------------ | - * | entityPadding | Minimum internal padding between text in box and box borders | Integer | 4 | Any Positive Value | - * - * **Notes:** - * - * The minimum internal padding between text in an entity box and the enclosing box borders, - * expressed in pixels. - * - * Default value: 15 - */ - entityPadding: 15, - - /** - * | Parameter | Description | Type | Required | Values | - * | --------- | ----------------------------------- | ------ | -------- | -------------------- | - * | stroke | Stroke color of box edges and lines | string | 4 | Any recognized color | - * - * **Notes:** Default value: 'gray' - */ - stroke: 'gray', - - /** - * | Parameter | Description | Type | Required | Values | - * | --------- | -------------------------- | ------ | -------- | -------------------- | - * | fill | Fill color of entity boxes | string | 4 | Any recognized color | - * - * **Notes:** Default value: 'honeydew' - */ - fill: 'honeydew', - - /** - * | Parameter | Description | Type | Required | Values | - * | --------- | ------------------- | ------- | -------- | ------------------ | - * | fontSize | Font Size in pixels | Integer | | Any Positive Value | - * - * **Notes:** - * - * Font size (expressed as an integer representing a number of pixels) Default value: 12 - */ - fontSize: 12, - - /** - * | Parameter | Description | Type | Required | Values | - * | ----------- | ----------- | ------- | -------- | ----------- | - * | useMaxWidth | See Notes | boolean | Required | true, false | - * - * **Notes:** - * - * When this flag is set to true, the diagram width is locked to 100% and scaled based on - * available space. If set to false, the diagram reserves its absolute width. - * - * Default value: true - */ - useMaxWidth: true, - }, - - /** The object containing configurations specific for pie diagrams */ - pie: { - useWidth: undefined, - - /** - * | Parameter | Description | Type | Required | Values | - * | ----------- | ----------- | ------- | -------- | ----------- | - * | useMaxWidth | See Notes | boolean | Required | true, false | - * - * **Notes:** - * - * When this flag is set to true, the diagram width is locked to 100% and scaled based on - * available space. If set to false, the diagram reserves its absolute width. - * - * Default value: true - */ - useMaxWidth: true, - - /** - * | Parameter | Description | Type | Required | Values | - * | ------------ | -------------------------------------------------------------------------------- | ------- | -------- | ------------------- | - * | textPosition | Axial position of slice's label from zero at the center to 1 at the outside edge | Number | Optional | Decimal from 0 to 1 | - * - * **Notes:** Default value: 0.75 - */ - textPosition: 0.75, - }, - - quadrantChart: { - /** - * | Parameter | Description | Type | Required | Values | - * | --------------- | ---------------------------------- | ------- | -------- | ------------------- | - * | chartWidth | Width of the chart | number | Optional | Any positive number | - * - * **Notes:** - * Default value: 500 - */ - chartWidth: 500, - /** - * | Parameter | Description | Type | Required | Values | - * | --------------- | ---------------------------------- | ------- | -------- | ------------------- | - * | chartHeight | Height of the chart | number | Optional | Any positive number | - * - * **Notes:** - * Default value: 500 - */ - chartHeight: 500, - /** - * | Parameter | Description | Type | Required | Values | - * | ------------------ | ---------------------------------- | ------- | -------- | ------------------- | - * | titlePadding | Chart title top and bottom padding | number | Optional | Any positive number | - * - * **Notes:** - * Default value: 10 - */ - titlePadding: 10, - /** - * | Parameter | Description | Type | Required | Values | - * | ------------------ | ---------------------------------- | ------- | -------- | ------------------- | - * | titleFontSize | Chart title font size | number | Optional | Any positive number | - * - * **Notes:** - * Default value: 20 - */ - titleFontSize: 20, - /** - * | Parameter | Description | Type | Required | Values | - * | --------------- | ---------------------------------- | ------- | -------- | ------------------- | - * | quadrantPadding | Padding around the quadrant square | number | Optional | Any positive number | - * - * **Notes:** - * Default value: 5 - */ - quadrantPadding: 5, - /** - * | Parameter | Description | Type | Required | Values | - * | ---------------------- | -------------------------------------------------------------------------- | ------- | -------- | ------------------- | - * | quadrantTextTopPadding | quadrant title padding from top if the quadrant is rendered on top | number | Optional | Any positive number | - * - * **Notes:** - * Default value: 5 - */ - quadrantTextTopPadding: 5, - /** - * | Parameter | Description | Type | Required | Values | - * | ------------------ | ---------------------------------- | ------- | -------- | ------------------- | - * | quadrantLabelFontSize | quadrant title font size | number | Optional | Any positive number | - * - * **Notes:** - * Default value: 16 - */ - quadrantLabelFontSize: 16, - /** - * | Parameter | Description | Type | Required | Values | - * | --------------------------------- | ------------------------------------------------------------- | ------- | -------- | ------------------- | - * | quadrantInternalBorderStrokeWidth | stroke width of edges of the box that are inside the quadrant | number | Optional | Any positive number | - * - * **Notes:** - * Default value: 1 - */ - quadrantInternalBorderStrokeWidth: 1, - /** - * | Parameter | Description | Type | Required | Values | - * | --------------------------------- | -------------------------------------------------------------- | ------- | -------- | ------------------- | - * | quadrantExternalBorderStrokeWidth | stroke width of edges of the box that are outside the quadrant | number | Optional | Any positive number | - * - * **Notes:** - * Default value: 2 - */ - quadrantExternalBorderStrokeWidth: 2, - /** - * | Parameter | Description | Type | Required | Values | - * | --------------- | ---------------------------------- | ------- | -------- | ------------------- | - * | xAxisLabelPadding | Padding around x-axis labels | number | Optional | Any positive number | - * - * **Notes:** - * Default value: 5 - */ - xAxisLabelPadding: 5, - /** - * | Parameter | Description | Type | Required | Values | - * | ------------------ | ---------------------------------- | ------- | -------- | ------------------- | - * | xAxisLabelFontSize | x-axis label font size | number | Optional | Any positive number | - * - * **Notes:** - * Default value: 16 - */ - xAxisLabelFontSize: 16, - /** - * | Parameter | Description | Type | Required | Values | - * | ------------- | ------------------------------- | ------- | -------- | ------------------- | - * | xAxisPosition | position of x-axis labels | string | Optional | 'top' or 'bottom' | - * - * **Notes:** - * Default value: top - */ - xAxisPosition: 'top', - /** - * | Parameter | Description | Type | Required | Values | - * | --------------- | ---------------------------------- | ------- | -------- | ------------------- | - * | yAxisLabelPadding | Padding around y-axis labels | number | Optional | Any positive number | - * - * **Notes:** - * Default value: 5 - */ - yAxisLabelPadding: 5, - /** - * | Parameter | Description | Type | Required | Values | - * | ------------------ | ---------------------------------- | ------- | -------- | ------------------- | - * | yAxisLabelFontSize | y-axis label font size | number | Optional | Any positive number | - * - * **Notes:** - * Default value: 16 - */ - yAxisLabelFontSize: 16, - /** - * | Parameter | Description | Type | Required | Values | - * | ------------- | ------------------------------- | ------- | -------- | ------------------- | - * | yAxisPosition | position of y-axis labels | string | Optional | 'left' or 'right' | - * - * **Notes:** - * Default value: left - */ - yAxisPosition: 'left', - /** - * | Parameter | Description | Type | Required | Values | - * | ---------------------- | -------------------------------------- | ------- | -------- | ------------------- | - * | pointTextPadding | padding between point and point label | number | Optional | Any positive number | - * - * **Notes:** - * Default value: 5 - */ - pointTextPadding: 5, - /** - * | Parameter | Description | Type | Required | Values | - * | ---------------------- | ---------------------- | ------- | -------- | ------------------- | - * | pointTextPadding | point title font size | number | Optional | Any positive number | - * - * **Notes:** - * Default value: 12 - */ - pointLabelFontSize: 12, - /** - * | Parameter | Description | Type | Required | Values | - * | ------------- | ------------------------------- | ------- | -------- | ------------------- | - * | pointRadius | radius of the point to be drawn | number | Optional | Any positive number | - * - * **Notes:** - * Default value: 5 - */ - pointRadius: 5, - /** - * | Parameter | Description | Type | Required | Values | - * | ----------- | ----------- | ------- | -------- | ----------- | - * | useMaxWidth | See Notes | boolean | Required | true, false | - * - * **Notes:** - * - * When this flag is set to true, the diagram width is locked to 100% and scaled based on - * available space. If set to false, the diagram reserves its absolute width. - * - * Default value: true - */ - useMaxWidth: true, - }, - - /** The object containing configurations specific for req diagrams */ - requirement: { - useWidth: undefined, - - /** - * | Parameter | Description | Type | Required | Values | - * | ----------- | ----------- | ------- | -------- | ----------- | - * | useMaxWidth | See Notes | boolean | Required | true, false | - * - * **Notes:** - * - * When this flag is set to true, the diagram width is locked to 100% and scaled based on - * available space. If set to false, the diagram reserves its absolute width. - * - * Default value: true - */ - useMaxWidth: true, - - rect_fill: '#f9f9f9', - text_color: '#333', - rect_border_size: '0.5px', - rect_border_color: '#bbb', - rect_min_width: 200, - rect_min_height: 200, - fontSize: 14, - rect_padding: 10, - line_height: 20, - }, - gitGraph: { - /** - * ### titleTopMargin - * - * | Parameter | Description | Type | Required | Values | - * | -------------- | ---------------------------------------------- | ------- | -------- | ------------------ | - * | titleTopMargin | Margin top for the text over the Git diagram | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 25 - */ - titleTopMargin: 25, - diagramPadding: 8, - nodeLabel: { - width: 75, - height: 100, - x: -25, - y: 0, - }, - mainBranchName: 'main', - mainBranchOrder: 0, - showCommitLabel: true, - showBranches: true, - rotateCommitLabel: true, - }, - - /** The object containing configurations specific for c4 diagrams */ c4: { + ...defaultConfigJson.c4, useWidth: undefined, - - /** - * | Parameter | Description | Type | Required | Values | - * | -------------- | ---------------------------------------------- | ------- | -------- | ------------------ | - * | diagramMarginX | Margin to the right and left of the c4 diagram | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 50 - */ - diagramMarginX: 50, - - /** - * | Parameter | Description | Type | Required | Values | - * | -------------- | ------------------------------------------- | ------- | -------- | ------------------ | - * | diagramMarginY | Margin to the over and under the c4 diagram | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 10 - */ - diagramMarginY: 10, - - /** - * | Parameter | Description | Type | Required | Values | - * | ------------- | --------------------- | ------- | -------- | ------------------ | - * | c4ShapeMargin | Margin between shapes | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 50 - */ - c4ShapeMargin: 50, - - /** - * | Parameter | Description | Type | Required | Values | - * | -------------- | ---------------------- | ------- | -------- | ------------------ | - * | c4ShapePadding | Padding between shapes | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 20 - */ - c4ShapePadding: 20, - - /** - * | Parameter | Description | Type | Required | Values | - * | --------- | --------------------- | ------- | -------- | ------------------ | - * | width | Width of person boxes | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 216 - */ - width: 216, - - /** - * | Parameter | Description | Type | Required | Values | - * | --------- | ---------------------- | ------- | -------- | ------------------ | - * | height | Height of person boxes | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 60 - */ - height: 60, - - /** - * | Parameter | Description | Type | Required | Values | - * | --------- | ------------------- | ------- | -------- | ------------------ | - * | boxMargin | Margin around boxes | Integer | Required | Any Positive Value | - * - * **Notes:** Default value: 10 - */ - boxMargin: 10, - - /** - * | Parameter | Description | Type | Required | Values | - * | ----------- | ----------- | ------- | -------- | ----------- | - * | useMaxWidth | See Notes | boolean | Required | true, false | - * - * **Notes:** When this flag is set to true, the height and width is set to 100% and is then - * scaling with the available space. If set to false, the absolute space required is used. - * - * Default value: true - */ - useMaxWidth: true, - - /** - * | Parameter | Description | Type | Required | Values | - * | ------------ | ----------- | ------- | -------- | ------------------ | - * | c4ShapeInRow | See Notes | Integer | Required | Any Positive Value | - * - * **Notes:** How many shapes to place in each row. - * - * Default value: 4 - */ - c4ShapeInRow: 4, - - nextLinePaddingX: 0, - - /** - * | Parameter | Description | Type | Required | Values | - * | --------------- | ----------- | ------- | -------- | ------------------ | - * | c4BoundaryInRow | See Notes | Integer | Required | Any Positive Value | - * - * **Notes:** How many boundaries to place in each row. - * - * Default value: 2 - */ - c4BoundaryInRow: 2, - - /** - * This sets the font size of Person shape for the diagram - * - * **Notes:** Default value: 14. - */ - personFontSize: 14, - /** - * This sets the font family of Person shape for the diagram - * - * **Notes:** Default value: "Open Sans", sans-serif. - */ - personFontFamily: '"Open Sans", sans-serif', - /** - * This sets the font weight of Person shape for the diagram - * - * **Notes:** Default value: normal. - */ - personFontWeight: 'normal', - - /** - * This sets the font size of External Person shape for the diagram - * - * **Notes:** Default value: 14. - */ - external_personFontSize: 14, - /** - * This sets the font family of External Person shape for the diagram - * - * **Notes:** Default value: "Open Sans", sans-serif. - */ - external_personFontFamily: '"Open Sans", sans-serif', - /** - * This sets the font weight of External Person shape for the diagram - * - * **Notes:** Default value: normal. - */ - external_personFontWeight: 'normal', - - /** - * This sets the font size of System shape for the diagram - * - * **Notes:** Default value: 14. - */ - systemFontSize: 14, - /** - * This sets the font family of System shape for the diagram - * - * **Notes:** Default value: "Open Sans", sans-serif. - */ - systemFontFamily: '"Open Sans", sans-serif', - /** - * This sets the font weight of System shape for the diagram - * - * **Notes:** Default value: normal. - */ - systemFontWeight: 'normal', - - /** - * This sets the font size of External System shape for the diagram - * - * **Notes:** Default value: 14. - */ - external_systemFontSize: 14, - /** - * This sets the font family of External System shape for the diagram - * - * **Notes:** Default value: "Open Sans", sans-serif. - */ - external_systemFontFamily: '"Open Sans", sans-serif', - /** - * This sets the font weight of External System shape for the diagram - * - * **Notes:** Default value: normal. - */ - external_systemFontWeight: 'normal', - - /** - * This sets the font size of System DB shape for the diagram - * - * **Notes:** Default value: 14. - */ - system_dbFontSize: 14, - /** - * This sets the font family of System DB shape for the diagram - * - * **Notes:** Default value: "Open Sans", sans-serif. - */ - system_dbFontFamily: '"Open Sans", sans-serif', - /** - * This sets the font weight of System DB shape for the diagram - * - * **Notes:** Default value: normal. - */ - system_dbFontWeight: 'normal', - - /** - * This sets the font size of External System DB shape for the diagram - * - * **Notes:** Default value: 14. - */ - external_system_dbFontSize: 14, - /** - * This sets the font family of External System DB shape for the diagram - * - * **Notes:** Default value: "Open Sans", sans-serif. - */ - external_system_dbFontFamily: '"Open Sans", sans-serif', - /** - * This sets the font weight of External System DB shape for the diagram - * - * **Notes:** Default value: normal. - */ - external_system_dbFontWeight: 'normal', - - /** - * This sets the font size of System Queue shape for the diagram - * - * **Notes:** Default value: 14. - */ - system_queueFontSize: 14, - /** - * This sets the font family of System Queue shape for the diagram - * - * **Notes:** Default value: "Open Sans", sans-serif. - */ - system_queueFontFamily: '"Open Sans", sans-serif', - /** - * This sets the font weight of System Queue shape for the diagram - * - * **Notes:** Default value: normal. - */ - system_queueFontWeight: 'normal', - - /** - * This sets the font size of External System Queue shape for the diagram - * - * **Notes:** Default value: 14. - */ - external_system_queueFontSize: 14, - /** - * This sets the font family of External System Queue shape for the diagram - * - * **Notes:** Default value: "Open Sans", sans-serif. - */ - external_system_queueFontFamily: '"Open Sans", sans-serif', - /** - * This sets the font weight of External System Queue shape for the diagram - * - * **Notes:** Default value: normal. - */ - external_system_queueFontWeight: 'normal', - - /** - * This sets the font size of Boundary shape for the diagram - * - * **Notes:** Default value: 14. - */ - boundaryFontSize: 14, - /** - * This sets the font family of Boundary shape for the diagram - * - * **Notes:** Default value: "Open Sans", sans-serif. - */ - boundaryFontFamily: '"Open Sans", sans-serif', - /** - * This sets the font weight of Boundary shape for the diagram - * - * **Notes:** Default value: normal. - */ - boundaryFontWeight: 'normal', - - /** - * This sets the font size of Message shape for the diagram - * - * **Notes:** Default value: 12. - */ - messageFontSize: 12, - /** - * This sets the font family of Message shape for the diagram - * - * **Notes:** Default value: "Open Sans", sans-serif. - */ - messageFontFamily: '"Open Sans", sans-serif', - /** - * This sets the font weight of Message shape for the diagram - * - * **Notes:** Default value: normal. - */ - messageFontWeight: 'normal', - - /** - * This sets the font size of Container shape for the diagram - * - * **Notes:** Default value: 14. - */ - containerFontSize: 14, - /** - * This sets the font family of Container shape for the diagram - * - * **Notes:** Default value: "Open Sans", sans-serif. - */ - containerFontFamily: '"Open Sans", sans-serif', - /** - * This sets the font weight of Container shape for the diagram - * - * **Notes:** Default value: normal. - */ - containerFontWeight: 'normal', - - /** - * This sets the font size of External Container shape for the diagram - * - * **Notes:** Default value: 14. - */ - external_containerFontSize: 14, - /** - * This sets the font family of External Container shape for the diagram - * - * **Notes:** Default value: "Open Sans", sans-serif. - */ - external_containerFontFamily: '"Open Sans", sans-serif', - /** - * This sets the font weight of External Container shape for the diagram - * - * **Notes:** Default value: normal. - */ - external_containerFontWeight: 'normal', - - /** - * This sets the font size of Container DB shape for the diagram - * - * **Notes:** Default value: 14. - */ - container_dbFontSize: 14, - /** - * This sets the font family of Container DB shape for the diagram - * - * **Notes:** Default value: "Open Sans", sans-serif. - */ - container_dbFontFamily: '"Open Sans", sans-serif', - /** - * This sets the font weight of Container DB shape for the diagram - * - * **Notes:** Default value: normal. - */ - container_dbFontWeight: 'normal', - - /** - * This sets the font size of External Container DB shape for the diagram - * - * **Notes:** Default value: 14. - */ - external_container_dbFontSize: 14, - /** - * This sets the font family of External Container DB shape for the diagram - * - * **Notes:** Default value: "Open Sans", sans-serif. - */ - external_container_dbFontFamily: '"Open Sans", sans-serif', - /** - * This sets the font weight of External Container DB shape for the diagram - * - * **Notes:** Default value: normal. - */ - external_container_dbFontWeight: 'normal', - - /** - * This sets the font size of Container Queue shape for the diagram - * - * **Notes:** Default value: 14. - */ - container_queueFontSize: 14, - /** - * This sets the font family of Container Queue shape for the diagram - * - * **Notes:** Default value: "Open Sans", sans-serif. - */ - container_queueFontFamily: '"Open Sans", sans-serif', - /** - * This sets the font weight of Container Queue shape for the diagram - * - * **Notes:** Default value: normal. - */ - container_queueFontWeight: 'normal', - - /** - * This sets the font size of External Container Queue shape for the diagram - * - * **Notes:** Default value: 14. - */ - external_container_queueFontSize: 14, - /** - * This sets the font family of External Container Queue shape for the diagram - * - * **Notes:** Default value: "Open Sans", sans-serif. - */ - external_container_queueFontFamily: '"Open Sans", sans-serif', - /** - * This sets the font weight of External Container Queue shape for the diagram - * - * **Notes:** Default value: normal. - */ - external_container_queueFontWeight: 'normal', - - /** - * This sets the font size of Component shape for the diagram - * - * **Notes:** Default value: 14. - */ - componentFontSize: 14, - /** - * This sets the font family of Component shape for the diagram - * - * **Notes:** Default value: "Open Sans", sans-serif. - */ - componentFontFamily: '"Open Sans", sans-serif', - /** - * This sets the font weight of Component shape for the diagram - * - * **Notes:** Default value: normal. - */ - componentFontWeight: 'normal', - - /** - * This sets the font size of External Component shape for the diagram - * - * **Notes:** Default value: 14. - */ - external_componentFontSize: 14, - /** - * This sets the font family of External Component shape for the diagram - * - * **Notes:** Default value: "Open Sans", sans-serif. - */ - external_componentFontFamily: '"Open Sans", sans-serif', - /** - * This sets the font weight of External Component shape for the diagram - * - * **Notes:** Default value: normal. - */ - external_componentFontWeight: 'normal', - - /** - * This sets the font size of Component DB shape for the diagram - * - * **Notes:** Default value: 14. - */ - component_dbFontSize: 14, - /** - * This sets the font family of Component DB shape for the diagram - * - * **Notes:** Default value: "Open Sans", sans-serif. - */ - component_dbFontFamily: '"Open Sans", sans-serif', - /** - * This sets the font weight of Component DB shape for the diagram - * - * **Notes:** Default value: normal. - */ - component_dbFontWeight: 'normal', - - /** - * This sets the font size of External Component DB shape for the diagram - * - * **Notes:** Default value: 14. - */ - external_component_dbFontSize: 14, - /** - * This sets the font family of External Component DB shape for the diagram - * - * **Notes:** Default value: "Open Sans", sans-serif. - */ - external_component_dbFontFamily: '"Open Sans", sans-serif', - /** - * This sets the font weight of External Component DB shape for the diagram - * - * **Notes:** Default value: normal. - */ - external_component_dbFontWeight: 'normal', - - /** - * This sets the font size of Component Queue shape for the diagram - * - * **Notes:** Default value: 14. - */ - component_queueFontSize: 14, - /** - * This sets the font family of Component Queue shape for the diagram - * - * **Notes:** Default value: "Open Sans", sans-serif. - */ - component_queueFontFamily: '"Open Sans", sans-serif', - /** - * This sets the font weight of Component Queue shape for the diagram - * - * **Notes:** Default value: normal. - */ - component_queueFontWeight: 'normal', - - /** - * This sets the font size of External Component Queue shape for the diagram - * - * **Notes:** Default value: 14. - */ - external_component_queueFontSize: 14, - /** - * This sets the font family of External Component Queue shape for the diagram - * - * **Notes:** Default value: "Open Sans", sans-serif. - */ - external_component_queueFontFamily: '"Open Sans", sans-serif', - /** - * This sets the font weight of External Component Queue shape for the diagram - * - * **Notes:** Default value: normal. - */ - external_component_queueFontWeight: 'normal', - - /** - * This sets the auto-wrap state for the diagram - * - * **Notes:** Default value: true. - */ - wrap: true, - - /** - * This sets the auto-wrap padding for the diagram (sides only) - * - * **Notes:** Default value: 0. - */ - wrapPadding: 10, - personFont: function () { return { fontFamily: this.personFontFamily, @@ -2221,72 +229,30 @@ const config: Partial = { fontWeight: this.messageFontWeight, }; }, - - // ' Colors - // ' ################################## - person_bg_color: '#08427B', - person_border_color: '#073B6F', - external_person_bg_color: '#686868', - external_person_border_color: '#8A8A8A', - system_bg_color: '#1168BD', - system_border_color: '#3C7FC0', - system_db_bg_color: '#1168BD', - system_db_border_color: '#3C7FC0', - system_queue_bg_color: '#1168BD', - system_queue_border_color: '#3C7FC0', - external_system_bg_color: '#999999', - external_system_border_color: '#8A8A8A', - external_system_db_bg_color: '#999999', - external_system_db_border_color: '#8A8A8A', - external_system_queue_bg_color: '#999999', - external_system_queue_border_color: '#8A8A8A', - container_bg_color: '#438DD5', - container_border_color: '#3C7FC0', - container_db_bg_color: '#438DD5', - container_db_border_color: '#3C7FC0', - container_queue_bg_color: '#438DD5', - container_queue_border_color: '#3C7FC0', - external_container_bg_color: '#B3B3B3', - external_container_border_color: '#A6A6A6', - external_container_db_bg_color: '#B3B3B3', - external_container_db_border_color: '#A6A6A6', - external_container_queue_bg_color: '#B3B3B3', - external_container_queue_border_color: '#A6A6A6', - component_bg_color: '#85BBF0', - component_border_color: '#78A8D8', - component_db_bg_color: '#85BBF0', - component_db_border_color: '#78A8D8', - component_queue_bg_color: '#85BBF0', - component_queue_border_color: '#78A8D8', - external_component_bg_color: '#CCCCCC', - external_component_border_color: '#BFBFBF', - external_component_db_bg_color: '#CCCCCC', - external_component_db_border_color: '#BFBFBF', - external_component_queue_bg_color: '#CCCCCC', - external_component_queue_border_color: '#BFBFBF', }, - mindmap: { - useMaxWidth: true, - padding: 10, - maxNodeWidth: 200, + pie: { + ...defaultConfigJson.pie, + useWidth: undefined, }, - sankey: { - width: 600, - height: 400, - linkColor: 'gradient', - nodeAlignment: 'justify', + requirement: { + ...defaultConfigJson.requirement, + useWidth: undefined, + }, + gitGraph: { + ...defaultConfigJson.gitGraph, + // TODO: This is a temporary override for `gitGraph`, since every other + // diagram does have `useMaxWidth`, but instead sets it to `true`. + // Should we set this to `true` instead? + useMaxWidth: false, + }, + sankey: { + ...defaultConfigJson.sankey, + // this is false, unlike every other diagram (other than gitGraph) + // TODO: can we make this default to `true` instead? useMaxWidth: false, }, - fontSize: 16, }; -if (config.class) { - config.class.arrowMarkerAbsolute = config.arrowMarkerAbsolute; -} -if (config.gitGraph) { - config.gitGraph.arrowMarkerAbsolute = config.arrowMarkerAbsolute; -} - const keyify = (obj: any, prefix = ''): string[] => Object.keys(obj).reduce((res: string[], el): string[] => { if (Array.isArray(obj[el])) { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 832703bae..919087c7c 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -71,6 +71,9 @@ importers: '@vitest/ui': specifier: ^0.32.2 version: 0.32.2(vitest@0.32.2) + ajv: + specifier: ^8.12.0 + version: 8.12.0 concurrently: specifier: ^8.0.1 version: 8.0.1 @@ -663,13 +666,13 @@ packages: resolution: {integrity: sha512-qe8Nmh9rYI/HIspLSTwtbMFPj6dISG6+dJnOguTlPNXtCvS2uezdxscVBb7/3DrmNbQK49TDqpkSQ1chbRGdpQ==} dev: true - /@apideck/better-ajv-errors@0.3.6(ajv@8.11.0): + /@apideck/better-ajv-errors@0.3.6(ajv@8.12.0): resolution: {integrity: sha512-P+ZygBLZtkp0qqOAJJVX4oX/sFo5JR3eBWwwuqHHhK0GIgQOKWrAfiAaWX0aArHkRWHMuggFEgAZNxVPwPZYaA==} engines: {node: '>=10'} peerDependencies: ajv: '>=8' dependencies: - ajv: 8.11.0 + ajv: 8.12.0 json-schema: 0.4.0 jsonpointer: 5.0.1 leven: 3.1.0 @@ -2258,7 +2261,7 @@ packages: engines: {node: '>=v14'} dependencies: '@commitlint/types': 17.4.4 - ajv: 8.11.0 + ajv: 8.12.0 dev: true /@commitlint/ensure@17.4.4: @@ -5799,7 +5802,7 @@ packages: indent-string: 5.0.0 dev: true - /ajv-formats@2.1.1(ajv@8.11.0): + /ajv-formats@2.1.1(ajv@8.12.0): resolution: {integrity: sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==} peerDependencies: ajv: ^8.0.0 @@ -5807,7 +5810,7 @@ packages: ajv: optional: true dependencies: - ajv: 8.11.0 + ajv: 8.12.0 dev: true /ajv-keywords@3.5.2(ajv@6.12.6): @@ -5818,12 +5821,12 @@ packages: ajv: 6.12.6 dev: true - /ajv-keywords@5.1.0(ajv@8.11.0): + /ajv-keywords@5.1.0(ajv@8.12.0): resolution: {integrity: sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==} peerDependencies: ajv: ^8.8.2 dependencies: - ajv: 8.11.0 + ajv: 8.12.0 fast-deep-equal: 3.1.3 dev: true @@ -5836,8 +5839,8 @@ packages: uri-js: 4.4.1 dev: true - /ajv@8.11.0: - resolution: {integrity: sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==} + /ajv@8.12.0: + resolution: {integrity: sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==} dependencies: fast-deep-equal: 3.1.3 json-schema-traverse: 1.0.0 @@ -11063,7 +11066,7 @@ packages: /light-my-request@4.12.0: resolution: {integrity: sha512-0y+9VIfJEsPVzK5ArSIJ8Dkxp8QMP7/aCuxCUtG/tr9a2NoOf/snATE/OUc05XUplJCEnRh6gTkH7xh9POt1DQ==} dependencies: - ajv: 8.11.0 + ajv: 8.12.0 cookie: 0.5.0 process-warning: 1.0.0 set-cookie-parser: 2.6.0 @@ -13514,9 +13517,9 @@ packages: engines: {node: '>= 12.13.0'} dependencies: '@types/json-schema': 7.0.11 - ajv: 8.11.0 - ajv-formats: 2.1.1(ajv@8.11.0) - ajv-keywords: 5.1.0(ajv@8.11.0) + ajv: 8.12.0 + ajv-formats: 2.1.1(ajv@8.12.0) + ajv-keywords: 5.1.0(ajv@8.12.0) dev: true /search-insights@2.6.0: @@ -15924,7 +15927,7 @@ packages: resolution: {integrity: sha512-CttE7WCYW9sZC+nUYhQg3WzzGPr4IHmrPnjKiu3AMXsiNQKx+l4hHl63WTrnicLmKEKHScWDH8xsGBdrYgtBzg==} engines: {node: '>=16.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 @@ -15932,7 +15935,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 diff --git a/vite.config.ts b/vite.config.ts index 36d08351e..080ff981f 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,4 +1,5 @@ import jison from './.vite/jisonPlugin.js'; +import jsonSchemaPlugin from './.vite/jsonSchemaPlugin.js'; import typescript from '@rollup/plugin-typescript'; import { defineConfig } from 'vitest/config'; @@ -8,6 +9,7 @@ export default defineConfig({ }, plugins: [ jison(), + jsonSchemaPlugin(), // handles .schema.yaml JSON Schema files // @ts-expect-error According to the type definitions, rollup plugins are incompatible with vite typescript({ compilerOptions: { declaration: false } }), ], From 0230722d361b56d5b524bbb434912767c7ab70ad Mon Sep 17 00:00:00 2001 From: Alois Klink Date: Thu, 22 Dec 2022 01:55:55 +0000 Subject: [PATCH 18/31] build(docs): build JSON Schema docs Automatically build documentation for JSON Schema. This is only built when running with `--vitepress`, as it currently produces loads of markdown files, which I feel like we shouldn't be committing. This currently manually uses some internal `jsonschema2md` functions so that we can manually control the Markdown output. --- packages/mermaid/package.json | 2 + packages/mermaid/src/docs.mts | 99 ++++++++++++++++++++++- pnpm-lock.yaml | 146 +++++++++++++++++++++++++++++++++- 3 files changed, 243 insertions(+), 4 deletions(-) diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json index c73275a6f..cd193f8a5 100644 --- a/packages/mermaid/package.json +++ b/packages/mermaid/package.json @@ -74,6 +74,7 @@ "web-worker": "^1.2.0" }, "devDependencies": { + "@adobe/jsonschema2md": "^7.1.4", "@types/cytoscape": "^3.19.9", "@types/d3": "^7.4.0", "@types/d3-sankey": "^0.12.1", @@ -109,6 +110,7 @@ "typedoc-plugin-markdown": "^3.15.2", "typescript": "^5.0.4", "unist-util-flatmap": "^1.0.0", + "unist-util-visit": "^4.1.2", "vitepress": "^1.0.0-alpha.72", "vitepress-plugin-search": "^1.0.4-alpha.20" }, diff --git a/packages/mermaid/src/docs.mts b/packages/mermaid/src/docs.mts index f6efc1169..1a5ed5ea0 100644 --- a/packages/mermaid/src/docs.mts +++ b/packages/mermaid/src/docs.mts @@ -34,7 +34,7 @@ import { readFileSync, writeFileSync, mkdirSync, existsSync, rmSync, rmdirSync } import { exec } from 'child_process'; import { globby } from 'globby'; import { JSDOM } from 'jsdom'; -import type { Code, Root } from 'mdast'; +import type { Code, ListItem, Root, Text } from 'mdast'; import { posix, dirname, relative, join } from 'path'; import prettier from 'prettier'; import { remark } from 'remark'; @@ -44,6 +44,7 @@ import chokidar from 'chokidar'; import mm from 'micromatch'; // @ts-ignore No typescript declaration file import flatmap from 'unist-util-flatmap'; +import { visit } from 'unist-util-visit'; const MERMAID_MAJOR_VERSION = ( JSON.parse(readFileSync('../mermaid/package.json', 'utf8')).version as string @@ -150,6 +151,7 @@ const copyTransformedContents = (filename: string, doCopy = false, transformedCo } filesTransformed.add(fileInFinalDocDir); + if (doCopy) { writeFileSync(fileInFinalDocDir, newBuffer); } @@ -321,6 +323,93 @@ const transformMarkdown = (file: string) => { copyTransformedContents(file, !verifyOnly, formatted); }; +import { load, JSON_SCHEMA } from 'js-yaml'; +// @ts-ignore: we're importing internal jsonschema2md functions +import { default as schemaLoader } from '@adobe/jsonschema2md/lib/schemaProxy.js'; +// @ts-ignore: we're importing internal jsonschema2md functions +import { default as traverseSchemas } from '@adobe/jsonschema2md/lib/traverseSchema.js'; +// @ts-ignore: we're importing internal jsonschema2md functions +import { default as buildMarkdownFromSchema } from '@adobe/jsonschema2md/lib/markdownBuilder.js'; +// @ts-ignore: we're importing internal jsonschema2md functions +import { default as jsonSchemaReadmeBuilder } from '@adobe/jsonschema2md/lib/readmeBuilder.js'; + +/** + * Transforms the given JSON Schema into Markdown documentation + */ +async function transormJsonSchema(file: string) { + const yamlContents = readSyncedUTF8file(file); + const jsonSchema = load(yamlContents, { + filename: file, + // only allow JSON types in our YAML doc (will probably be default in YAML 1.3) + // e.g. `true` will be parsed a boolean `true`, `True` will be parsed as string `"True"`. + schema: JSON_SCHEMA, + }); + + // write .schema.json files + const jsonFileName = file + .replace('.schema.yaml', '.schema.json') + .replace('src/schemas/', 'src/docs/schemas/'); + copyTransformedContents(jsonFileName, !verifyOnly, JSON.stringify(jsonSchema, undefined, 2)); + + const schemas = traverseSchemas([schemaLoader()(file, jsonSchema)]); + + // ignore output of this function + // for some reason, without calling this function, we get some broken links + // this is probably a bug in @adobe/jsonschema2md + jsonSchemaReadmeBuilder({ readme: true })(schemas); + + // write Markdown files + const markdownFiles = buildMarkdownFromSchema({ + header: true, + // links, + includeProperties: ['tsType'], // Custom TypeScript type + exampleFormat: 'json', + // skipProperties, + })(schemas); + + for (const [name, markdownAst] of Object.entries(markdownFiles)) { + /* + * Converts list entries of shape '- tsType: () => Partial' + * into '- tsType: `() => Partial`' (e.g. escaping with back-ticks), + * as otherwise VitePress doesn't like the bit. + */ + visit(markdownAst as Root, 'listItem', (listEntry: ListItem) => { + let listText: Text; + const blockItem = listEntry.children[0]; + if (blockItem.type === 'paragraph' && blockItem.children[0].type === 'text') { + listText = blockItem.children[0]; + } // @ts-expect-error: MD AST output from @adobe/jsonschema2md is technically wrong + else if (blockItem.type === 'text') { + listText = blockItem; + } else { + return; // skip + } + + if (listText.value.startsWith('tsType: ')) { + listText.value = listText.value.replace(/tsType: (.*)/g, 'tsType: `$1`'); + } + }); + + const transformed = remark() + .use(remarkGfm) + .use(remarkFrontmatter, ['yaml']) // support YAML front-matter in Markdown + .use(transformMarkdownAst, { + // mermaid project specific plugin + originalFilename: file, + addAutogeneratedWarning: !noHeader, + removeYAML: !noHeader, + }) + .stringify(markdownAst as Root); + + const formatted = prettier.format(transformed, { + parser: 'markdown', + ...prettierConfig, + }); + const newFileName = join('src', 'docs', 'config', 'schema-docs', `${name}.md`); + copyTransformedContents(newFileName, !verifyOnly, formatted); + } +} + /** * Transform an HTML file and write the transformed file to the directory for published * documentation @@ -388,6 +477,14 @@ const main = async () => { const sourceDirGlob = posix.join('.', SOURCE_DOCS_DIR, '**'); const action = verifyOnly ? 'Verifying' : 'Transforming'; + if (vitepress) { + console.log(`${action} 1 .schema.yaml file`); + await transormJsonSchema('src/schemas/config.schema.yaml'); + } else { + // skip because this creates so many Markdown files that it lags git + console.log('Skipping 1 .schema.yaml file'); + } + const mdFileGlobs = getGlobs([posix.join(sourceDirGlob, '*.md')]); const mdFiles = await getFilesFromGlobs(mdFileGlobs); console.log(`${action} ${mdFiles.length} markdown files...`); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 919087c7c..fad43866e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -255,6 +255,9 @@ importers: specifier: ^1.2.0 version: 1.2.0 devDependencies: + '@adobe/jsonschema2md': + specifier: ^7.1.4 + version: 7.1.4 '@types/cytoscape': specifier: ^3.19.9 version: 3.19.9 @@ -360,6 +363,9 @@ importers: unist-util-flatmap: specifier: ^1.0.0 version: 1.0.0 + unist-util-visit: + specifier: ^4.1.2 + version: 4.1.2 vitepress: specifier: ^1.0.0-alpha.72 version: 1.0.0-alpha.72(@algolia/client-search@4.14.2)(@types/node@18.16.0) @@ -487,6 +493,43 @@ importers: packages: + /@adobe/helix-log@6.0.0: + resolution: {integrity: sha512-+9gpf49sFDmZLV3gtjY+RmEUistqYJdVWpiqlRYpxE59x5bHFzYf93dZ7fljSTBtZdVq8lm97HxrTUloh5HvRg==} + dependencies: + big.js: 6.2.1 + colorette: 2.0.20 + ferrum: 1.9.4 + phin: 3.7.0 + polka: 0.5.2 + dev: true + + /@adobe/jsonschema2md@7.1.4: + resolution: {integrity: sha512-sqzH/G+2oNZi5ltwbl0hGJacGTDpXv7uUykzh+LD/DNfOIjUq577b1HbES/JP5yWcp4YkX4I3V5Kxltewr0BUg==} + engines: {node: '>= 14.0.0'} + hasBin: true + dependencies: + '@adobe/helix-log': 6.0.0 + '@types/json-schema': 7.0.11 + '@types/mdast': 3.0.11 + es2015-i18n-tag: 1.6.1 + ferrum: 1.9.4 + fs-extra: 11.0.0 + github-slugger: 2.0.0 + js-yaml: 4.1.0 + json-schema: 0.4.0 + mdast-builder: 1.1.1 + mdast-util-to-string: 3.1.0 + readdirp: 3.6.0 + remark-gfm: 3.0.1 + remark-parse: 10.0.1 + remark-stringify: 10.0.2 + unified: 10.1.2 + unist-util-inspect: 7.0.1 + yargs: 17.6.2 + transitivePeerDependencies: + - supports-color + dev: true + /@algolia/autocomplete-core@1.8.2: resolution: {integrity: sha512-mTeshsyFhAqw/ebqNsQpMtbnjr+qVOSKXArEj4K0d7sqc8It1XD0gkASwecm9mF/jlOQ4Z9RNg1HbdA8JPdRwQ==} dependencies: @@ -1029,6 +1072,11 @@ packages: engines: {node: '>=12.13.0'} dev: true + /@arr/every@1.0.1: + resolution: {integrity: sha512-UQFQ6SgyJ6LX42W8rHCs8KVc0JS0tzVL9ct4XYedJukskYVWTo49tNiMEK9C2HTyarbNiT/RVIRSY82vH+6sTg==} + engines: {node: '>=4'} + dev: true + /@babel/code-frame@7.18.6: resolution: {integrity: sha512-TDCmlK5eOvH+eH7cdAFlNXeVJqWIQ7gW9tY1GJIpUtFb6CmjVyq2VM3u71bOyR8CRihcCgMUYoDNyLXao3+70Q==} engines: {node: '>=6.9.0'} @@ -3863,6 +3911,10 @@ packages: tslib: 2.5.0 dev: true + /@polka/url@0.5.0: + resolution: {integrity: sha512-oZLYFEAzUKyi3SKnXvj32ZCEGH6RDnao7COuCVhDydMS9NrCSVXhM79VaKyP5+Zc33m0QXEd2DN3UkU7OsHcfw==} + dev: true + /@polka/url@1.0.0-next.21: resolution: {integrity: sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==} dev: true @@ -6250,6 +6302,10 @@ packages: tweetnacl: 0.14.5 dev: true + /big.js@6.2.1: + resolution: {integrity: sha512-bCtHMwL9LeDIozFn+oNhhFoq+yQ3BNdnsLSASUxLciOb1vgvpHsIO1dsENiGMgbb4SkP5TrzWzRiLddn8ahVOQ==} + dev: true + /binary-extensions@2.2.0: resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==} engines: {node: '>=8'} @@ -6524,6 +6580,10 @@ packages: resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==} dev: true + /centra@2.6.0: + resolution: {integrity: sha512-dgh+YleemrT8u85QL11Z6tYhegAs3MMxsaWAq/oXeAmYJ7VxL3SI9TZtnfaEvNDMAPolj25FXIb3S+HCI4wQaQ==} + dev: true + /chai@4.3.7: resolution: {integrity: sha512-HLnAzZ2iupm25PlN0xFreAlBA5zaBSv3og0DdeGA4Ar6h6rJ3A0rolRUKJhSF2V10GZKDgWF/VmAEsNWjCRB+A==} engines: {node: '>=4'} @@ -7302,6 +7362,10 @@ packages: /csstype@3.1.2: resolution: {integrity: sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==} + /cuint@0.2.2: + resolution: {integrity: sha512-d4ZVpCW31eWwCMe1YT3ur7mUDnTXbgwyzaL320DrcRT45rfjYxkt5QWLrmOJ+/UEAI2+fQgKe/fCjR8l4TpRgw==} + dev: true + /cypress-image-snapshot@4.0.1(cypress@12.10.0)(jest@29.5.0): resolution: {integrity: sha512-PBpnhX/XItlx3/DAk5ozsXQHUi72exybBNH5Mpqj1DVmjq+S5Jd9WE5CRa4q5q0zuMZb2V2VpXHth6MjFpgj9Q==} engines: {node: '>=8'} @@ -8174,6 +8238,11 @@ packages: is-symbol: 1.0.4 dev: true + /es2015-i18n-tag@1.6.1: + resolution: {integrity: sha512-MYoh9p+JTkgnzBh0MEBON6xUyzdmwT6wzsmmFJvZujGSXiI2kM+3XvFl6+AcIO2eeL6VWgtX9szSiDTMwDxyYA==} + engines: {node: '>= 4.0.0'} + dev: true + /es6-error@4.1.1: resolution: {integrity: sha512-Um/+FxMr9CISWh0bi5Zv0iOD+4cFh5qLeks1qhAopKVAJw3drgKbKySikp7wGhDL0HPeaja0P5ULZrxLkniUVg==} dev: true @@ -8834,6 +8903,10 @@ packages: engines: {node: '>= 4.9.1'} dev: true + /fastestsmallesttextencoderdecoder@1.0.22: + resolution: {integrity: sha512-Pb8d48e+oIuY4MaM64Cd7OW1gt4nxCHs7/ddPPZ/Ic3sg8yVGM7O9wDvZ7us6ScaUupzM+pfBolwtYhN1IxBIw==} + dev: true + /fastify-plugin@3.0.1: resolution: {integrity: sha512-qKcDXmuZadJqdTm6vlCqioEbyewF60b/0LOFCcYN1B6BIZGlYJumWWOYs70SFYLDAH4YqdE1cxH/RKMG7rFxgA==} dev: true @@ -8891,6 +8964,14 @@ packages: pend: 1.2.0 dev: true + /ferrum@1.9.4: + resolution: {integrity: sha512-ooNerLoIht/dK4CQJux93z/hnt9JysrXniJCI3r6YRgmHeXC57EJ8XaTCT1Gm8LfhIAeWxyJA0O7d/W3pqDYRg==} + dependencies: + fastestsmallesttextencoderdecoder: 1.0.22 + lodash.isplainobject: 4.0.6 + xxhashjs: 0.2.2 + dev: true + /fetch-blob@3.2.0: resolution: {integrity: sha512-7yAQpD2UMJzLi1Dqv7qFYnPbaPx7ZfFK6PiIxQ4PfkGPyNyl2Ugx+a/umUonmKqjhM4DnfbMvdX6otXq83soQQ==} engines: {node: ^12.20 || >= 14.13} @@ -9113,6 +9194,15 @@ packages: resolution: {integrity: sha512-cHEpEQHUg0f8XdtZCc2ZAhrHzKzT0MrFUTcvx+hfxYu7rGMDc5SKoXFh+n4YigxsHXRzc6OrCshdR1bWH6HHyg==} dev: true + /fs-extra@11.0.0: + resolution: {integrity: sha512-4YxRvMi4P5C3WQTvdRfrv5UVqbISpqjORFQAW5QPiKAauaxNCwrEdIi6pG3tDFhKKpMen+enEhHIzB/tvIO+/w==} + engines: {node: '>=14.14'} + dependencies: + graceful-fs: 4.2.10 + jsonfile: 6.1.0 + universalify: 2.0.0 + dev: true + /fs-extra@11.1.1: resolution: {integrity: sha512-MGIE4HOvQCeUCzmlHs0vXpih4ysz4wg9qiSAu6cd42lVwPbTM1TjV7RusoyQqMmk/95gdQZX72u+YW+c3eEpFQ==} engines: {node: '>=14.14'} @@ -9269,6 +9359,10 @@ packages: through2: 4.0.2 dev: true + /github-slugger@2.0.0: + resolution: {integrity: sha512-IaOQ9puYtjrkq7Y0Ygl9KDZnrf/aiUJYUpVf89y8kyaxbRG7Y1SrX/jaumrv81vc61+kiMempujsM3Yw7w5qcw==} + dev: true + /glob-parent@5.1.2: resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==} engines: {node: '>= 6'} @@ -11376,6 +11470,13 @@ packages: engines: {node: '>= 12'} hasBin: true + /matchit@1.1.0: + resolution: {integrity: sha512-+nGYoOlfHmxe5BW5tE0EMJppXEwdSf8uBA1GTZC7Q77kbT35+VKLYJMzVNWCHSsga1ps1tPYFtFyvxvKzWVmMA==} + engines: {node: '>=6'} + dependencies: + '@arr/every': 1.0.1 + dev: true + /md5-hex@3.0.1: resolution: {integrity: sha512-BUiRtTtV39LIJwinWBjqVsU9xhdnz7/i889V859IBFpuqGAj6LuOvHv5XLbgZ2R7ptJoJaEcxkv88/h25T7Ciw==} engines: {node: '>=8'} @@ -11383,6 +11484,12 @@ packages: blueimp-md5: 2.19.0 dev: true + /mdast-builder@1.1.1: + resolution: {integrity: sha512-a3KBk/LmYD6wKsWi8WJrGU/rXR4yuF4Men0JO0z6dSZCm5FrXXWTRDjqK0vGSqa+1M6p9edeuypZAZAzSehTUw==} + dependencies: + '@types/unist': 2.0.6 + dev: true + /mdast-util-find-and-replace@2.2.1: resolution: {integrity: sha512-SobxkQXFAdd4b5WmEakmkVoh18icjQRxGy5OWTCzgsLRm1Fu/KCtwD1HIQSsmq5ZRjVH0Ehwg6/Fn3xIUk+nKw==} dependencies: @@ -11491,7 +11598,7 @@ packages: longest-streak: 3.0.1 mdast-util-to-string: 3.1.0 micromark-util-decode-string: 1.0.2 - unist-util-visit: 4.1.1 + unist-util-visit: 4.1.2 zwitch: 2.0.2 dev: true @@ -12568,6 +12675,13 @@ packages: resolution: {integrity: sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==} dev: true + /phin@3.7.0: + resolution: {integrity: sha512-DqnVNrpYhKGBZppNKprD+UJylMeEKOZxHgPB+ZP6mGzf3uA2uox4Ep9tUm+rUc8WLIdHT3HcAE4X8fhwQA9JKg==} + engines: {node: '>= 8'} + dependencies: + centra: 2.6.0 + dev: true + /picocolors@1.0.0: resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==} @@ -12696,6 +12810,13 @@ packages: hasBin: true dev: true + /polka@0.5.2: + resolution: {integrity: sha512-FVg3vDmCqP80tOrs+OeNlgXYmFppTXdjD5E7I4ET1NjvtNmQrb1/mJibybKkb/d4NA7YWAr1ojxuhpL3FHqdlw==} + dependencies: + '@polka/url': 0.5.0 + trouter: 2.0.1 + dev: true + /postcss-import@15.1.0(postcss@8.4.24): resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==} engines: {node: '>=14.0.0'} @@ -14537,6 +14658,13 @@ packages: resolution: {integrity: sha512-AqTiAOLcj85xS7vQ8QkAV41hPDIJ71XJB4RCUrzo/1GM2CQwhkJGaf9Hgr7BOugMRpgGUrqRg/DrBDl4H40+8g==} dev: true + /trouter@2.0.1: + resolution: {integrity: sha512-kr8SKKw94OI+xTGOkfsvwZQ8mWoikZDd2n8XZHjJVZUARZT+4/VV6cacRS6CLsH9bNm+HFIPU1Zx4CnNnb4qlQ==} + engines: {node: '>=6'} + dependencies: + matchit: 1.1.0 + dev: true + /ts-dedent@2.2.0: resolution: {integrity: sha512-q5W7tVM71e2xjHZTlgfTDoPF/SmqKG5hddq9SzR49CH2hayqRKJtQ4mtRlSxKaJlR/+9rEM+mnBHf7I2/BQcpQ==} engines: {node: '>=6.10'} @@ -14823,6 +14951,12 @@ packages: resolution: {integrity: sha512-IG32jcKJlhARCYT2LsYPJWdoXYkzz3ESAdl1aa2hn9Auh+cgUmU6wgkII4yCc/1GgeWibRdELdCZh/p3QKQ1dQ==} dev: true + /unist-util-inspect@7.0.1: + resolution: {integrity: sha512-gEPeSrsYXus8012VJ00p9uZC8D0iogtLLiHlBgvS61hU22KNKduQhMKezJm83viHlLf3TYS2y9SDEFglWPDMKw==} + dependencies: + '@types/unist': 2.0.6 + dev: true + /unist-util-is@5.1.1: resolution: {integrity: sha512-F5CZ68eYzuSvJjGhCLPL3cYx45IxkqXSetCcRgUXtbcm50X2L9oOWQlfUfDdAf+6Pd27YDblBfdtmsThXmwpbQ==} dev: true @@ -14845,8 +14979,8 @@ packages: unist-util-is: 5.1.1 dev: true - /unist-util-visit@4.1.1: - resolution: {integrity: sha512-n9KN3WV9k4h1DxYR1LoajgN93wpEi/7ZplVe02IoB4gH5ctI1AaF2670BLHQYbwj+pY83gFtyeySFiyMHJklrg==} + /unist-util-visit@4.1.2: + resolution: {integrity: sha512-MSd8OUGISqHdVvfY9TPhyK2VdUrPgxkUtWSuMHF6XAAFuL4LokseigBnZtPnJMu+FbynTkFNnFlyjxpVKujMRg==} dependencies: '@types/unist': 2.0.6 unist-util-is: 5.1.1 @@ -16165,6 +16299,12 @@ packages: resolution: {integrity: sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==} dev: true + /xxhashjs@0.2.2: + resolution: {integrity: sha512-AkTuIuVTET12tpsVIQo+ZU6f/qDmKuRUcjaqR+OIvm+aCBsZ95i7UVY5WJ9TMsSaZ0DA2WxoZ4acu0sPH+OKAw==} + dependencies: + cuint: 0.2.2 + dev: true + /y18n@4.0.3: resolution: {integrity: sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==} dev: true From 7c3a73d4a860c7ded69e465985e9ac9e4a55d6df Mon Sep 17 00:00:00 2001 From: Alois Klink Date: Mon, 5 Dec 2022 04:35:05 +0000 Subject: [PATCH 19/31] build(types): add script to generate Config types Add script `packages/mermaid/scripts/create-types-from-json-schema.mts` to automatically generate the TypeScript definition for `MermaidConfig` from the `MermaidConfig` JSON Schema at `packages/mermaid/src/schemas/config.schema.yaml`. To do this, we are using this library [`json-schema-to-typescript`][1], which is also used by Webpack to generate their types from their JSON Schema. In order to make sure that this isn't a breaking change, the script makes all fields **optional**, as that is what the original typescript file has. Additionally, I've put in some custom logic into the script, so that the exact same order is used for the TypeScript file, to make the `git diff` easier to review. In the future, we can remove this custom logic, once we no longer need to worry about `git merge` conflicts. [1]: https://github.com/bcherny/json-schema-to-typescript --- .eslintrc.cjs | 4 + .prettierignore | 2 + packages/mermaid/.lintstagedrc.mjs | 1 + packages/mermaid/package.json | 4 + .../scripts/create-types-from-json-schema.mts | 252 ++++++++++++++++++ pnpm-lock.yaml | 182 ++++++++++++- 6 files changed, 441 insertions(+), 4 deletions(-) create mode 100644 packages/mermaid/scripts/create-types-from-json-schema.mts diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 342d15d9f..cae97e586 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -38,6 +38,10 @@ module.exports = { 'lodash', 'unicorn', ], + ignorePatterns: [ + // this file is automatically generated by `pnpm run --filter mermaid types:build-config` + 'packages/mermaid/src/config.type.ts', + ], rules: { curly: 'error', 'no-console': 'error', diff --git a/.prettierignore b/.prettierignore index b50a94e84..6f2d55369 100644 --- a/.prettierignore +++ b/.prettierignore @@ -7,3 +7,5 @@ pnpm-lock.yaml stats packages/mermaid/src/docs/.vitepress/components.d.ts .nyc_output +# Autogenerated by `pnpm run --filter mermaid types:build-config` +packages/mermaid/src/config.type.ts diff --git a/packages/mermaid/.lintstagedrc.mjs b/packages/mermaid/.lintstagedrc.mjs index fe79ad254..955000e20 100644 --- a/packages/mermaid/.lintstagedrc.mjs +++ b/packages/mermaid/.lintstagedrc.mjs @@ -4,4 +4,5 @@ export default { 'src/docs/**': ['pnpm --filter mermaid run docs:build --git'], 'src/docs.mts': ['pnpm --filter mermaid run docs:build --git'], 'src/(defaultConfig|config|mermaidAPI).ts': ['pnpm --filter mermaid run docs:build --git'], + 'src/schemas/config.schema.yaml': ['pnpm --filter mermaid run types:build-config --git'], }; diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json index cd193f8a5..66bac897f 100644 --- a/packages/mermaid/package.json +++ b/packages/mermaid/package.json @@ -32,6 +32,8 @@ "docs:dev": "pnpm docs:pre:vitepress && concurrently \"pnpm --filter ./src/vitepress dev\" \"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", + "types:verify-config": "ts-node-esm scripts/create-types-from-json-schema.mts --verify", "release": "pnpm build", "prepublishOnly": "cpy '../../README.*' ./ --cwd=. && pnpm -w run build" }, @@ -88,6 +90,7 @@ "@types/uuid": "^9.0.1", "@typescript-eslint/eslint-plugin": "^5.59.0", "@typescript-eslint/parser": "^5.59.0", + "ajv": "^8.11.2", "chokidar": "^3.5.3", "concurrently": "^8.0.1", "coveralls": "^3.1.1", @@ -98,6 +101,7 @@ "jison": "^0.4.18", "js-base64": "^3.7.5", "jsdom": "^22.0.0", + "json-schema-to-typescript": "^11.0.3", "micromatch": "^4.0.5", "path-browserify": "^1.0.1", "prettier": "^2.8.8", diff --git a/packages/mermaid/scripts/create-types-from-json-schema.mts b/packages/mermaid/scripts/create-types-from-json-schema.mts new file mode 100644 index 000000000..e81ea70ff --- /dev/null +++ b/packages/mermaid/scripts/create-types-from-json-schema.mts @@ -0,0 +1,252 @@ +/** + * Script to load Mermaid Config JSON Schema from YAML and to: + * + * - Validate JSON Schema + * + * Then to generate: + * + * - config.types.ts TypeScript file + */ + +/* eslint-disable no-console */ + +import { readFile, writeFile } from 'node:fs/promises'; +import { join } from 'node:path'; +import assert from 'node:assert'; +import { execFile } from 'node:child_process'; +import { promisify } from 'node:util'; + +import { load, JSON_SCHEMA } from 'js-yaml'; +import { compile, type JSONSchema } from 'json-schema-to-typescript'; + +import _Ajv2019, { type JSONSchemaType } from 'ajv/dist/2019.js'; + +// Workaround for wrong AJV types, see +// https://github.com/ajv-validator/ajv/issues/2132#issuecomment-1290409907 +const Ajv2019 = _Ajv2019 as unknown as typeof _Ajv2019.default; + +// !!! -- The config.type.js file is created by this script -- !!! +import type { MermaidConfig } from '../src/config.type.js'; + +// options for running the main command +const verifyOnly = process.argv.includes('--verify'); +/** If `true`, automatically `git add` any changes (i.e. during `pnpm run pre-commit`)*/ +const git = process.argv.includes('--git'); + +/** + * All of the keys in the mermaid config that have a mermaid diagram config. + */ +const MERMAID_CONFIG_DIAGRAM_KEYS = [ + 'flowchart', + 'sequence', + 'gantt', + 'journey', + 'class', + 'state', + 'er', + 'pie', + 'quadrantChart', + 'requirement', + 'mindmap', + 'timeline', + 'gitGraph', + 'c4', + 'sankey', +]; + +/** + * Loads the MermaidConfig JSON schema YAML file. + * + * @returns The loaded JSON Schema, use {@link validateSchema} to confirm it is a valid JSON Schema. + */ +async function loadJsonSchemaFromYaml() { + const configSchemaFile = join('src', 'schemas', 'config.schema.yaml'); + const contentsYaml = await readFile(configSchemaFile, { encoding: 'utf8' }); + const jsonSchema = load(contentsYaml, { + filename: configSchemaFile, + // only allow JSON types in our YAML doc (will probably be default in YAML 1.3) + // e.g. `true` will be parsed a boolean `true`, `True` will be parsed as string `"True"`. + schema: JSON_SCHEMA, + }); + return jsonSchema; +} + +/** + * Asserts that the given value is a valid JSON Schema object. + * + * @param jsonSchema - The value to validate as JSON Schema 2019-09 + * @throws {Error} if the given object is invalid. + */ +function validateSchema(jsonSchema: unknown): asserts jsonSchema is JSONSchemaType { + if (typeof jsonSchema !== 'object') { + throw new Error(`jsonSchema param is not an object: actual type is ${typeof jsonSchema}`); + } + if (jsonSchema === null) { + throw new Error('jsonSchema param must not be null'); + } + const ajv = new Ajv2019({ + allErrors: true, + allowUnionTypes: true, + strict: true, + }); + + ajv.addKeyword({ + keyword: 'meta:enum', // used by jsonschema2md (in docs.mts script) + errors: false, + }); + ajv.addKeyword({ + keyword: 'tsType', // used by json-schema-to-typescript + errors: false, + }); + + ajv.compile(jsonSchema); +} + +/** + * Generate a typescript definition from a JSON Schema using json-schema-to-typescript. + * + * @param mermaidConfigSchema - The input JSON Schema. + */ +async function generateTypescript(mermaidConfigSchema: JSONSchemaType) { + /** + * Replace all usages of `allOf` with `extends`. + * + * `extends` is only valid JSON Schema in very old versions of JSON Schema. + * However, json-schema-to-typescript creates much nicer types when using + * `extends`, so we should use them instead when possible. + * + * @param schema - The input schema. + * @returns The schema with `allOf` replaced with `extends`. + */ + function replaceAllOfWithExtends(schema: JSONSchemaType>) { + if (schema['allOf']) { + const { allOf, ...schemaWithoutAllOf } = schema; + return { + ...schemaWithoutAllOf, + extends: allOf, + }; + } + return schema; + } + + /** + * For backwards compatibility with older Mermaid Typescript defs, + * we need to make all value optional instead of required. + * + * This is because the `MermaidConfig` type is used as an input, and everything is optional, + * since all the required values have default values.s + * + * In the future, we should make make the input to Mermaid `Partial`. + * + * @todo TODO: Remove this function when Mermaid releases a new breaking change. + * @param schema - The input schema. + * @returns The schema with all required values removed. + */ + function removeRequired(schema: JSONSchemaType>) { + return { ...schema, required: [] }; + } + + /** + * This is a temporary hack to control the order the types are generated in. + * + * By default, json-schema-to-typescript outputs the $defs in the order they + * are used, then any unused schemas at the end. + * + * **The only purpose of this function is to make the `git diff` simpler** + * **We should remove this later to simplify the code** + * + * @todo TODO: Remove this function in a future PR. + * @param schema - The input schema. + * @returns The schema with all `$ref`s removed. + */ + function unrefSubschemas(schema: JSONSchemaType>) { + return { + ...schema, + properties: Object.fromEntries( + Object.entries(schema.properties).map(([key, propertySchema]) => { + if (MERMAID_CONFIG_DIAGRAM_KEYS.includes(key)) { + const { $ref, ...propertySchemaWithoutRef } = propertySchema as JSONSchemaType; + if ($ref === undefined) { + throw Error( + `subSchema ${key} is in MERMAID_CONFIG_DIAGRAM_KEYS but does not have a $ref field` + ); + } + const [ + _root, // eslint-disable-line @typescript-eslint/no-unused-vars + _defs, // eslint-disable-line @typescript-eslint/no-unused-vars + defName, + ] = $ref.split('/'); + return [ + key, + { + ...propertySchemaWithoutRef, + tsType: defName, + }, + ]; + } + return [key, propertySchema]; + }) + ), + }; + } + + assert.ok(mermaidConfigSchema.$defs); + const modifiedSchema = { + ...unrefSubschemas(removeRequired(mermaidConfigSchema)), + + $defs: Object.fromEntries( + Object.entries(mermaidConfigSchema.$defs).map(([key, subSchema]) => { + return [key, removeRequired(replaceAllOfWithExtends(subSchema))]; + }) + ), + }; + + const typescriptFile = await compile( + modifiedSchema as JSONSchema, // json-schema-to-typescript only allows JSON Schema 4 as input type + 'MermaidConfig', + { + additionalProperties: false, // in JSON Schema 2019-09, these are called `unevaluatedProperties` + unreachableDefinitions: true, // definition for FontConfig is unreachable + } + ); + + // TODO, should we somehow use the functions from `docs.mts` instead? + if (verifyOnly) { + const originalFile = await readFile('./src/config.type.ts', { encoding: 'utf-8' }); + if (typescriptFile !== originalFile) { + console.error('❌ Error: ./src/config.type.ts will be changed.'); + console.error("Please run 'pnpm run --filter mermaid types:build-config' to update this"); + process.exitCode = 1; + } else { + console.log('✅ ./src/config.type.ts will be unchanged'); + } + } else { + console.log('Writing typescript file to ./src/config.type.ts'); + await writeFile('./src/config.type.ts', typescriptFile, { encoding: 'utf8' }); + if (git) { + console.log('📧 Git: Adding ./src/config.type.ts changed'); + await promisify(execFile)('git', ['add', './src/config.type.ts']); + } + } +} + +/** Main function */ +async function main() { + if (verifyOnly) { + console.log( + 'Verifying that ./src/config.type.ts is in sync with src/schemas/config.schema.yaml' + ); + } + + const configJsonSchema = await loadJsonSchemaFromYaml(); + + validateSchema(configJsonSchema); + + // Generate types from JSON Schema + await generateTypescript(configJsonSchema); +} + +main().catch((error) => { + console.error(error); + process.exitCode = 1; +}); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index fad43866e..303985a31 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -297,6 +297,9 @@ importers: '@typescript-eslint/parser': specifier: ^5.59.0 version: 5.59.0(eslint@8.39.0)(typescript@5.0.4) + ajv: + specifier: ^8.11.2 + version: 8.12.0 chokidar: specifier: ^3.5.3 version: 3.5.3 @@ -327,6 +330,9 @@ importers: jsdom: specifier: ^22.0.0 version: 22.0.0 + json-schema-to-typescript: + specifier: ^11.0.3 + version: 11.0.3 micromatch: specifier: ^4.0.5 version: 4.0.5 @@ -2258,6 +2264,15 @@ packages: '@babel/helper-validator-identifier': 7.19.1 to-fast-properties: 2.0.0 + /@bcherny/json-schema-ref-parser@9.0.9: + resolution: {integrity: sha512-vmEmnJCfpkLdas++9OYg6riIezTYqTHpqUTODJzHLzs5UnXujbOJW9VwcVCnyo1mVRt32FRr23iXBx/sX8YbeQ==} + dependencies: + '@jsdevtools/ono': 7.1.3 + '@types/json-schema': 7.0.11 + call-me-maybe: 1.0.2 + js-yaml: 4.1.0 + dev: true + /@bcoe/v8-coverage@0.2.3: resolution: {integrity: sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==} dev: true @@ -3857,6 +3872,10 @@ packages: '@jridgewell/resolve-uri': 3.1.0 '@jridgewell/sourcemap-codec': 1.4.14 + /@jsdevtools/ono@7.1.3: + resolution: {integrity: sha512-4JQNk+3mVzK3xh2rqd6RB4J46qUR19azEHBneZyTZM+c456qOrbbM/5xcR8huNCCcbVt7+UmizG6GuUvPvKUYg==} + dev: true + /@leichtgewicht/ip-codec@2.0.4: resolution: {integrity: sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==} dev: true @@ -4437,6 +4456,13 @@ packages: resolution: {integrity: sha512-Nmh0K3iWQJzniTuPRcJn5hxXkfB1T1pgB89SBig5PlJQU5yocazeu4jATJlaA0GYFKWMqDdvYemoSnF2pXgLVA==} dev: true + /@types/glob@7.2.0: + resolution: {integrity: sha512-ZUxbzKl0IfJILTS6t7ip5fQQM/J3TJYubDm3nMbgubNNYS62eXeUpoLUC8/7fJNiFYHTrGPQn7hspDUzIHX3UA==} + dependencies: + '@types/minimatch': 5.1.2 + '@types/node': 18.16.0 + dev: true + /@types/graceful-fs@4.1.5: resolution: {integrity: sha512-anKkLmZZ+xm4p8JWBf4hElkM4XR+EZeA2M9BAkkTldmcyDY4mbdIJnRghDJH3Ov5ooY7/UAoENtmdMSkaAd7Cw==} dependencies: @@ -4537,6 +4563,10 @@ packages: resolution: {integrity: sha512-Y4XFY5VJAuw0FgAqPNd6NNoV44jbq9Bz2L7Rh/J6jLTiHBSBJa9fxqQIvkIld4GsoDOcCbvzOUAbLPsSKKg+uA==} dev: true + /@types/minimatch@5.1.2: + resolution: {integrity: sha512-K0VQKziLUWkVKiRVrx4a40iPaxTUefQmjtkQofBkYRcoaaL/8rhwDWww9qWbrgicNOgnpIsMxyNIUM4+n6dUIA==} + dev: true + /@types/minimist@1.2.2: resolution: {integrity: sha512-jhuKLIRrhvCPLqwPcx6INqmKeiA5EWrsCOPhrlFSrbrmU4ZMPjj5Ul/oLCMDO98XRUIwVm78xICz4EPCektzeQ==} dev: true @@ -6004,7 +6034,6 @@ packages: /any-promise@1.3.0: resolution: {integrity: sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==} - dev: false /anymatch@3.1.2: resolution: {integrity: sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==} @@ -6525,6 +6554,10 @@ packages: get-intrinsic: 1.2.0 dev: true + /call-me-maybe@1.0.2: + resolution: {integrity: sha512-HpX65o1Hnr9HH25ojC1YGs7HCQLq0GCOibSaWER0eNpgJ/Z1MZv2mTc7+xh6WOPxbRVcmgbv4hGU+uSQ/2xFZQ==} + dev: true + /callsites@3.1.0: resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==} engines: {node: '>=6'} @@ -6752,6 +6785,17 @@ packages: engines: {node: '>=6'} dev: true + /cli-color@2.0.3: + resolution: {integrity: sha512-OkoZnxyC4ERN3zLzZaY9Emb7f/MhBOIpePv0Ycok0fJYT+Ouo00UBEIwsVsr0yoow++n5YWlSUgST9GKhNHiRQ==} + engines: {node: '>=0.10'} + dependencies: + d: 1.0.1 + es5-ext: 0.10.62 + es6-iterator: 2.0.3 + memoizee: 0.4.15 + timers-ext: 0.1.7 + dev: true + /cli-cursor@3.1.0: resolution: {integrity: sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==} engines: {node: '>=8'} @@ -7730,6 +7774,13 @@ packages: d3-zoom: 3.0.0 dev: false + /d@1.0.1: + resolution: {integrity: sha512-m62ShEObQ39CfralilEQRjH6oAMtNCV1xJyEx5LpRYUVN+EviphDgUc/F3hnYbADmkiNs67Y+3ylmlG7Lnu+FA==} + dependencies: + es5-ext: 0.10.62 + type: 1.2.0 + dev: true + /dagre-d3-es@7.0.10: resolution: {integrity: sha512-qTCQmEhcynucuaZgY5/+ti3X/rnszKZhEQH/ZdWdtP1tA/y3VoHJzcVrO9pjjJCNpigfscAtoUB5ONcd2wNn0A==} dependencies: @@ -8243,10 +8294,44 @@ packages: engines: {node: '>= 4.0.0'} dev: true + /es5-ext@0.10.62: + resolution: {integrity: sha512-BHLqn0klhEpnOKSrzn/Xsz2UIW8j+cGmo9JLzr8BiUapV8hPL9+FliFqjwr9ngW7jWdnxv6eO+/LqyhJVqgrjA==} + engines: {node: '>=0.10'} + requiresBuild: true + dependencies: + es6-iterator: 2.0.3 + es6-symbol: 3.1.3 + next-tick: 1.1.0 + dev: true + /es6-error@4.1.1: resolution: {integrity: sha512-Um/+FxMr9CISWh0bi5Zv0iOD+4cFh5qLeks1qhAopKVAJw3drgKbKySikp7wGhDL0HPeaja0P5ULZrxLkniUVg==} dev: true + /es6-iterator@2.0.3: + resolution: {integrity: sha512-zw4SRzoUkd+cl+ZoE15A9o1oQd920Bb0iOJMQkQhl3jNc03YqVjAhG7scf9C5KWRU/R13Orf588uCC6525o02g==} + dependencies: + d: 1.0.1 + es5-ext: 0.10.62 + es6-symbol: 3.1.3 + dev: true + + /es6-symbol@3.1.3: + resolution: {integrity: sha512-NJ6Yn3FuDinBaBRWl/q5X/s4koRHBrgKAu+yGI6JCBeiu3qrcbJhwT2GeR/EXVfylRk8dpQVJoLEFhK+Mu31NA==} + dependencies: + d: 1.0.1 + ext: 1.7.0 + dev: true + + /es6-weak-map@2.0.3: + resolution: {integrity: sha512-p5um32HOTO1kP+w7PRnB+5lQ43Z6muuMuIMffvDN8ZB4GcnjLBV6zGStpbASIMk4DCAvEaamhe2zhyCb/QXXsA==} + dependencies: + d: 1.0.1 + es5-ext: 0.10.62 + es6-iterator: 2.0.3 + es6-symbol: 3.1.3 + dev: true + /esbuild@0.17.18: resolution: {integrity: sha512-z1lix43jBs6UKjcZVKOw2xx69ffE2aG0PygLL5qJ9OS/gy0Ewd1gW/PUQIOIQGXBHWNywSc0floSKoMFF8aK2w==} engines: {node: '>=12'} @@ -8671,6 +8756,13 @@ packages: engines: {node: '>= 0.6'} dev: true + /event-emitter@0.3.5: + resolution: {integrity: sha512-D9rRn9y7kLPnJ+hMq7S/nhvoKwwvVJahBi2BPmx3bvbsEdK3W9ii8cBSGjP+72/LnM4n6fo3+dkCX5FeTQruXA==} + dependencies: + d: 1.0.1 + es5-ext: 0.10.62 + dev: true + /event-stream@3.3.4: resolution: {integrity: sha512-QHpkERcGsR0T7Qm3HNJSyXKEEj8AHNxkY3PK8TS2KJvQ7NiSHe3DDpwVKKtoYprL/AreyzFBeIkBIWChAqn60g==} dependencies: @@ -8819,6 +8911,12 @@ packages: - supports-color dev: true + /ext@1.7.0: + resolution: {integrity: sha512-6hxeJYaL110a9b5TEJSj0gojyHQAmA2ch5Os+ySCiA1QGdS697XWY1pzsrSjqA9LDEEgdB/KypIlR59RcLuHYw==} + dependencies: + type: 2.7.2 + dev: true + /extend@3.0.2: resolution: {integrity: sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==} dev: true @@ -9375,6 +9473,16 @@ packages: dependencies: is-glob: 4.0.3 + /glob-promise@4.2.2(glob@7.2.3): + resolution: {integrity: sha512-xcUzJ8NWN5bktoTIX7eOclO1Npxd/dyVqUJxlLIDasT4C7KZyqlPIwkdJ0Ypiy3p2ZKahTjK4M9uC3sNSfNMzw==} + engines: {node: '>=12'} + peerDependencies: + glob: ^7.1.6 + dependencies: + '@types/glob': 7.2.0 + glob: 7.2.3 + dev: true + /glob-to-regexp@0.4.1: resolution: {integrity: sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==} dev: true @@ -10164,6 +10272,10 @@ packages: resolution: {integrity: sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==} dev: true + /is-promise@2.2.2: + resolution: {integrity: sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ==} + dev: true + /is-regex@1.1.4: resolution: {integrity: sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==} engines: {node: '>= 0.4'} @@ -10993,6 +11105,27 @@ packages: resolution: {integrity: sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==} dev: true + /json-schema-to-typescript@11.0.3: + resolution: {integrity: sha512-EaEE9Y4VZ8b9jW5zce5a9L3+p4C9AqgIRHbNVDJahfMnoKzcd4sDb98BLxLdQhJEuRAXyKLg4H66NKm80W8ilg==} + engines: {node: '>=12.0.0'} + hasBin: true + dependencies: + '@bcherny/json-schema-ref-parser': 9.0.9 + '@types/json-schema': 7.0.11 + '@types/lodash': 4.14.194 + '@types/prettier': 2.7.2 + cli-color: 2.0.3 + get-stdin: 8.0.0 + glob: 7.2.3 + glob-promise: 4.2.2(glob@7.2.3) + is-glob: 4.0.3 + lodash: 4.17.21 + minimist: 1.2.8 + mkdirp: 1.0.4 + mz: 2.7.0 + prettier: 2.8.8 + dev: true + /json-schema-traverse@0.4.1: resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==} dev: true @@ -11401,6 +11534,12 @@ packages: engines: {node: 14 || >=16.14} dev: true + /lru-queue@0.1.0: + resolution: {integrity: sha512-BpdYkt9EvGl8OfWHDQPISVpcl5xZthb+XPsbELj5AQXxIC8IriDZIQYjBJPEm5rS420sjZ0TLEzRcq5KdBhYrQ==} + dependencies: + es5-ext: 0.10.62 + dev: true + /lunr@2.3.9: resolution: {integrity: sha512-zTU3DaZaF3Rt9rhN3uBMGQD3dD2/vFQqnvZCDv4dl5iOzq2IZQqTxu90r4E5J+nP70J3ilqVCrbho2eWaeW8Ow==} dev: true @@ -11629,6 +11768,19 @@ packages: fs-monkey: 1.0.3 dev: true + /memoizee@0.4.15: + resolution: {integrity: sha512-UBWmJpLZd5STPm7PMUlOw/TSy972M+z8gcyQ5veOnSDRREz/0bmpyTfKt3/51DhEBqCZQn1udM/5flcSPYhkdQ==} + dependencies: + d: 1.0.1 + es5-ext: 0.10.62 + es6-weak-map: 2.0.3 + event-emitter: 0.3.5 + is-promise: 2.2.2 + lru-queue: 0.1.0 + next-tick: 1.1.0 + timers-ext: 0.1.7 + dev: true + /meow@10.1.5: resolution: {integrity: sha512-/d+PQ4GKmGvM9Bee/DPa8z3mXs/pkvJE2KEThngVNOqtmljC6K7NMPxtc2JeZYTmpWb9k/TmxjeL18ez3h7vCw==} engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0} @@ -12043,6 +12195,12 @@ packages: minimist: 1.2.8 dev: true + /mkdirp@1.0.4: + resolution: {integrity: sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==} + engines: {node: '>=10'} + hasBin: true + dev: true + /mlly@1.2.0: resolution: {integrity: sha512-+c7A3CV0KGdKcylsI6khWyts/CYrGTrRVo4R/I7u/cUsy0Conxa6LUhiEzVKIw14lc2L5aiO4+SeVe4TeGRKww==} dependencies: @@ -12086,7 +12244,6 @@ packages: any-promise: 1.3.0 object-assign: 4.1.1 thenify-all: 1.6.0 - dev: false /nanoid@3.3.6: resolution: {integrity: sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==} @@ -12114,6 +12271,10 @@ packages: resolution: {integrity: sha512-9iN1ka/9zmX1ZvLV9ewJYEk9h7RyRRtqdK0woXcqohu8EWIerfPUjYJPg0ULy0UqP7cslmdGc8xKDJcojlKiaw==} dev: true + /next-tick@1.1.0: + resolution: {integrity: sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ==} + dev: true + /nice-try@1.0.5: resolution: {integrity: sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==} dev: true @@ -14491,13 +14652,11 @@ packages: engines: {node: '>=0.8'} dependencies: thenify: 3.3.1 - dev: false /thenify@3.3.1: resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==} dependencies: any-promise: 1.3.0 - dev: false /thread-stream@2.3.0: resolution: {integrity: sha512-kaDqm1DET9pp3NXwR8382WHbnpXnRkN9xGN9dQt3B2+dmXiW8X1SOwmFOxAErEQ47ObhZ96J6yhZNXuyCOL7KA==} @@ -14536,6 +14695,13 @@ packages: engines: {node: '>=4'} dev: true + /timers-ext@0.1.7: + resolution: {integrity: sha512-b85NUNzTSdodShTIbky6ZF02e8STtVVfD+fu4aXXShEELpozH+bCpJLYMPZbsABN2wDH7fJpqIoXxJpzbf0NqQ==} + dependencies: + es5-ext: 0.10.62 + next-tick: 1.1.0 + dev: true + /tiny-glob@0.2.9: resolution: {integrity: sha512-g/55ssRPUjShh+xkfx9UPDXqhckHEsHr4Vd9zX55oSdGZc/MD0m3sferOkwWtp98bv+kcVfEHtRJgBVJzelrzg==} dependencies: @@ -14812,6 +14978,14 @@ packages: mime-types: 2.1.35 dev: true + /type@1.2.0: + resolution: {integrity: sha512-+5nt5AAniqsCnu2cEQQdpzCAh33kVx8n0VoFidKpB1dVVLAN/F+bgVOqOJqOnEnrhp222clB5p3vUlD+1QAnfg==} + dev: true + + /type@2.7.2: + resolution: {integrity: sha512-dzlvlNlt6AXU7EBSfpAscydQ7gXB+pPGsPnfJnZpiNJBDj7IaJzQlBZYGdEi4R9HmPdBv2XmWJ6YUtoTa7lmCw==} + dev: true + /typed-array-length@1.0.4: resolution: {integrity: sha512-KjZypGq+I/H7HI5HlOoGHkWUUGq+Q0TPhQurLbyrVrvnKTBgzLhIJ7j6J/XTQOi0d1RjyZ0wdas8bKs2p0x3Ng==} dependencies: From eb5d65fabc831cd0433eb2e13f9ab31e9921fe3a Mon Sep 17 00:00:00 2001 From: Alois Klink Date: Sun, 19 Feb 2023 21:43:27 +0000 Subject: [PATCH 20/31] build(types): create types from config JSON Schema Runs `pnpm --filter mermaid run types:build-config` to automatically generate typescript types for `MermaidConfig` from the JSON Schema file. --- packages/mermaid/src/config.type.ts | 978 ++++++++++++++++++++++++++-- 1 file changed, 928 insertions(+), 50 deletions(-) diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts index 3b5826d1a..352181c86 100644 --- a/packages/mermaid/src/config.type.ts +++ b/packages/mermaid/src/config.type.ts @@ -1,22 +1,144 @@ -// TODO: This was auto generated from defaultConfig. Needs to be verified. +/* eslint-disable */ +/** + * This file was automatically generated by json-schema-to-typescript. + * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file, + * and run json-schema-to-typescript to regenerate this file. + */ -import DOMPurify from 'dompurify'; +/** + * Configuration options to pass to the `dompurify` library. + */ +export type DOMPurifyConfiguration = import("dompurify").Config; +/** + * JavaScript function that returns a `FontConfig`. + * + * By default, these return the appropriate `*FontSize`, `*FontFamily`, `*FontWeight` + * values. + * + * For example, the font calculator called `boundaryFont` might be defined as: + * + * ```javascript + * boundaryFont: function () { + * return { + * fontFamily: this.boundaryFontFamily, + * fontSize: this.boundaryFontSize, + * fontWeight: this.boundaryFontWeight, + * }; + * } + * ``` + * + * + * This interface was referenced by `MermaidConfig`'s JSON-Schema + * via the `definition` "FontCalculator". + */ +export type FontCalculator = () => Partial; +/** + * Picks the color of the sankey diagram links, using the colors of the source and/or target of the links. + * + * + * This interface was referenced by `MermaidConfig`'s JSON-Schema + * via the `definition` "SankeyLinkColor". + */ +export type SankeyLinkColor = "source" | "target" | "gradient"; +/** + * Controls the alignment of the Sankey diagrams. + * + * See . + * + * + * This interface was referenced by `MermaidConfig`'s JSON-Schema + * via the `definition` "SankeyNodeAlignment". + */ +export type SankeyNodeAlignment = "left" | "right" | "center" | "justify"; +/** + * The font size to use + */ +export type CSSFontSize = string | number; export interface MermaidConfig { - theme?: string; + /** + * Theme, the CSS style sheet. + * You may also use `themeCSS` to override this value. + * + */ + theme?: string | "default" | "forest" | "dark" | "neutral" | "null"; themeVariables?: any; themeCSS?: string; + /** + * The maximum allowed size of the users text diagram + */ maxTextSize?: number; darkMode?: boolean; htmlLabels?: boolean; + /** + * Specifies the font to be used in the rendered diagrams. + * Can be any possible CSS `font-family`. + * See https://developer.mozilla.org/en-US/docs/Web/CSS/font-family + * + */ fontFamily?: string; altFontFamily?: string; - logLevel?: number; - securityLevel?: string; + /** + * This option decides the amount of logging to be used by mermaid. + * + */ + logLevel?: + | number + | string + | 0 + | 2 + | 1 + | "trace" + | "debug" + | "info" + | "warn" + | "error" + | "fatal" + | 3 + | 4 + | 5 + | undefined; + /** + * Level of trust for parsed diagram + */ + securityLevel?: string | "strict" | "loose" | "antiscript" | "sandbox" | undefined; + /** + * Dictates whether mermaid starts on Page load + */ startOnLoad?: boolean; + /** + * Controls whether or arrow markers in html code are absolute paths or anchors. + * This matters if you are using base tag settings. + * + */ arrowMarkerAbsolute?: boolean; + /** + * This option controls which `currentConfig` keys are considered secure and + * can only be changed via call to `mermaidAPI.initialize`. + * Calls to `mermaidAPI.reinitialize` cannot make changes to the secure keys + * in the current `currentConfig`. + * + * This prevents malicious graph directives from overriding a site's default security. + * + */ secure?: string[]; + /** + * This option controls if the generated ids of nodes in the SVG are + * generated randomly or based on a seed. + * If set to `false`, the IDs are generated based on the current date and + * thus are not deterministic. This is the default behavior. + * + * This matters if your files are checked into source control e.g. git and + * should not change unless content is changed. + * + */ deterministicIds?: boolean; + /** + * This option is the optional seed for deterministic ids. + * If set to `undefined` but deterministicIds is `true`, a simple number iterator is used. + * You can set this attribute to base the seed on a static string. + * + */ deterministicIDSeed?: string; flowchart?: FlowchartDiagramConfig; sequence?: SequenceDiagramConfig; @@ -33,95 +155,341 @@ export interface MermaidConfig { gitGraph?: GitGraphDiagramConfig; c4?: C4DiagramConfig; sankey?: SankeyDiagramConfig; - dompurifyConfig?: DOMPurify.Config; + dompurifyConfig?: DOMPurifyConfiguration; wrap?: boolean; fontSize?: number; } - -// TODO: More configs needs to be moved in here +/** + * This interface was referenced by `MermaidConfig`'s JSON-Schema + * via the `definition` "BaseDiagramConfig". + */ export interface BaseDiagramConfig { useWidth?: number; + /** + * When this flag is set to `true`, the height and width is set to 100% + * and is then scaled with the available space. + * If set to `false`, the absolute space required is used. + * + */ useMaxWidth?: boolean; } - +/** + * The object containing configurations specific for c4 diagrams + * + * This interface was referenced by `MermaidConfig`'s JSON-Schema + * via the `definition` "C4DiagramConfig". + */ export interface C4DiagramConfig extends BaseDiagramConfig { + /** + * Margin to the right and left of the c4 diagram, must be a positive value. + * + */ diagramMarginX?: number; + /** + * Margin to the over and under the c4 diagram, must be a positive value. + * + */ diagramMarginY?: number; + /** + * Margin between shapes + */ c4ShapeMargin?: number; + /** + * Padding between shapes + */ c4ShapePadding?: number; + /** + * Width of person boxes + */ width?: number; + /** + * Height of person boxes + */ height?: number; + /** + * Margin around boxes + */ boxMargin?: number; + /** + * How many shapes to place in each row. + */ c4ShapeInRow?: number; nextLinePaddingX?: number; + /** + * How many boundaries to place in each row. + */ c4BoundaryInRow?: number; + /** + * This sets the font size of Person shape for the diagram + */ personFontSize?: string | number; + /** + * This sets the font weight of Person shape for the diagram + */ personFontFamily?: string; + /** + * This sets the font weight of Person shape for the diagram + */ personFontWeight?: string | number; + /** + * This sets the font size of External Person shape for the diagram + */ external_personFontSize?: string | number; + /** + * This sets the font family of External Person shape for the diagram + */ external_personFontFamily?: string; + /** + * This sets the font weight of External Person shape for the diagram + */ external_personFontWeight?: string | number; + /** + * This sets the font size of System shape for the diagram + */ systemFontSize?: string | number; + /** + * This sets the font family of System shape for the diagram + */ systemFontFamily?: string; + /** + * This sets the font weight of System shape for the diagram + */ systemFontWeight?: string | number; + /** + * This sets the font size of External System shape for the diagram + */ external_systemFontSize?: string | number; + /** + * This sets the font family of External System shape for the diagram + */ external_systemFontFamily?: string; + /** + * This sets the font weight of External System shape for the diagram + */ external_systemFontWeight?: string | number; + /** + * This sets the font size of System DB shape for the diagram + */ system_dbFontSize?: string | number; + /** + * This sets the font family of System DB shape for the diagram + */ system_dbFontFamily?: string; + /** + * This sets the font weight of System DB shape for the diagram + */ system_dbFontWeight?: string | number; + /** + * This sets the font size of External System DB shape for the diagram + */ external_system_dbFontSize?: string | number; + /** + * This sets the font family of External System DB shape for the diagram + */ external_system_dbFontFamily?: string; + /** + * This sets the font weight of External System DB shape for the diagram + */ external_system_dbFontWeight?: string | number; + /** + * This sets the font size of System Queue shape for the diagram + */ system_queueFontSize?: string | number; + /** + * This sets the font family of System Queue shape for the diagram + */ system_queueFontFamily?: string; + /** + * This sets the font weight of System Queue shape for the diagram + */ system_queueFontWeight?: string | number; + /** + * This sets the font size of External System Queue shape for the diagram + */ external_system_queueFontSize?: string | number; + /** + * This sets the font family of External System Queue shape for the diagram + */ external_system_queueFontFamily?: string; + /** + * This sets the font weight of External System Queue shape for the diagram + */ external_system_queueFontWeight?: string | number; + /** + * This sets the font size of Boundary shape for the diagram + */ boundaryFontSize?: string | number; + /** + * This sets the font family of Boundary shape for the diagram + */ boundaryFontFamily?: string; + /** + * This sets the font weight of Boundary shape for the diagram + */ boundaryFontWeight?: string | number; + /** + * This sets the font size of Message shape for the diagram + */ messageFontSize?: string | number; + /** + * This sets the font family of Message shape for the diagram + */ messageFontFamily?: string; + /** + * This sets the font weight of Message shape for the diagram + */ messageFontWeight?: string | number; + /** + * This sets the font size of Container shape for the diagram + */ containerFontSize?: string | number; + /** + * This sets the font family of Container shape for the diagram + */ containerFontFamily?: string; + /** + * This sets the font weight of Container shape for the diagram + */ containerFontWeight?: string | number; + /** + * This sets the font size of External Container shape for the diagram + */ external_containerFontSize?: string | number; + /** + * This sets the font family of External Container shape for the diagram + */ external_containerFontFamily?: string; + /** + * This sets the font weight of External Container shape for the diagram + */ external_containerFontWeight?: string | number; + /** + * This sets the font size of Container DB shape for the diagram + */ container_dbFontSize?: string | number; + /** + * This sets the font family of Container DB shape for the diagram + */ container_dbFontFamily?: string; + /** + * This sets the font weight of Container DB shape for the diagram + */ container_dbFontWeight?: string | number; + /** + * This sets the font size of External Container DB shape for the diagram + */ external_container_dbFontSize?: string | number; + /** + * This sets the font family of External Container DB shape for the diagram + */ external_container_dbFontFamily?: string; + /** + * This sets the font weight of External Container DB shape for the diagram + */ external_container_dbFontWeight?: string | number; + /** + * This sets the font size of Container Queue shape for the diagram + */ container_queueFontSize?: string | number; + /** + * This sets the font family of Container Queue shape for the diagram + */ container_queueFontFamily?: string; + /** + * This sets the font weight of Container Queue shape for the diagram + */ container_queueFontWeight?: string | number; + /** + * This sets the font size of External Container Queue shape for the diagram + */ external_container_queueFontSize?: string | number; + /** + * This sets the font family of External Container Queue shape for the diagram + */ external_container_queueFontFamily?: string; + /** + * This sets the font weight of External Container Queue shape for the diagram + */ external_container_queueFontWeight?: string | number; + /** + * This sets the font size of Component shape for the diagram + */ componentFontSize?: string | number; + /** + * This sets the font family of Component shape for the diagram + */ componentFontFamily?: string; + /** + * This sets the font weight of Component shape for the diagram + */ componentFontWeight?: string | number; + /** + * This sets the font size of External Component shape for the diagram + */ external_componentFontSize?: string | number; + /** + * This sets the font family of External Component shape for the diagram + */ external_componentFontFamily?: string; + /** + * This sets the font weight of External Component shape for the diagram + */ external_componentFontWeight?: string | number; + /** + * This sets the font size of Component DB shape for the diagram + */ component_dbFontSize?: string | number; + /** + * This sets the font family of Component DB shape for the diagram + */ component_dbFontFamily?: string; + /** + * This sets the font weight of Component DB shape for the diagram + */ component_dbFontWeight?: string | number; + /** + * This sets the font size of External Component DB shape for the diagram + */ external_component_dbFontSize?: string | number; + /** + * This sets the font family of External Component DB shape for the diagram + */ external_component_dbFontFamily?: string; + /** + * This sets the font weight of External Component DB shape for the diagram + */ external_component_dbFontWeight?: string | number; + /** + * This sets the font size of Component Queue shape for the diagram + */ component_queueFontSize?: string | number; + /** + * This sets the font family of Component Queue shape for the diagram + */ component_queueFontFamily?: string; + /** + * This sets the font weight of Component Queue shape for the diagram + */ component_queueFontWeight?: string | number; + /** + * This sets the font size of External Component Queue shape for the diagram + */ external_component_queueFontSize?: string | number; + /** + * This sets the font family of External Component Queue shape for the diagram + */ external_component_queueFontFamily?: string; + /** + * This sets the font weight of External Component Queue shape for the diagram + */ external_component_queueFontWeight?: string | number; + /** + * This sets the auto-wrap state for the diagram + */ wrap?: boolean; + /** + * This sets the auto-wrap padding for the diagram (sides only) + */ wrapPadding?: number; person_bg_color?: string; person_border_color?: string; @@ -186,8 +554,14 @@ export interface C4DiagramConfig extends BaseDiagramConfig { boundaryFont?: FontCalculator; messageFont?: FontCalculator; } - +/** + * This interface was referenced by `MermaidConfig`'s JSON-Schema + * via the `definition` "GitGraphDiagramConfig". + */ export interface GitGraphDiagramConfig extends BaseDiagramConfig { + /** + * Margin top for the text over the diagram + */ titleTopMargin?: number; diagramPadding?: number; nodeLabel?: NodeLabel; @@ -196,16 +570,29 @@ export interface GitGraphDiagramConfig extends BaseDiagramConfig { showCommitLabel?: boolean; showBranches?: boolean; rotateCommitLabel?: boolean; + /** + * Controls whether or arrow markers in html code are absolute paths or anchors. + * This matters if you are using base tag settings. + * + */ arrowMarkerAbsolute?: boolean; } - +/** + * This interface was referenced by `MermaidConfig`'s JSON-Schema + * via the `definition` "NodeLabel". + */ export interface NodeLabel { width?: number; height?: number; x?: number; y?: number; } - +/** + * The object containing configurations specific for req diagrams + * + * This interface was referenced by `MermaidConfig`'s JSON-Schema + * via the `definition` "RequirementDiagramConfig". + */ export interface RequirementDiagramConfig extends BaseDiagramConfig { rect_fill?: string; text_color?: string; @@ -217,51 +604,163 @@ export interface RequirementDiagramConfig extends BaseDiagramConfig { rect_padding?: number; line_height?: number; } - +/** + * The object containing configurations specific for mindmap diagrams + * + * This interface was referenced by `MermaidConfig`'s JSON-Schema + * via the `definition` "MindmapDiagramConfig". + */ export interface MindmapDiagramConfig extends BaseDiagramConfig { - useMaxWidth: boolean; - padding: number; - maxNodeWidth: number; + padding?: number; + maxNodeWidth?: number; } - +/** + * This interface was referenced by `MermaidConfig`'s JSON-Schema + * via the `definition` "PieDiagramConfig". + */ export interface PieDiagramConfig extends BaseDiagramConfig { + /** + * Axial position of slice's label from zero at the center to 1 at the outside edges. + * + */ textPosition?: number; } - +/** + * This interface was referenced by `MermaidConfig`'s JSON-Schema + * via the `definition` "QuadrantChartConfig". + */ export interface QuadrantChartConfig extends BaseDiagramConfig { + /** + * Width of the chart + */ chartWidth?: number; + /** + * Height of the chart + */ chartHeight?: number; + /** + * Chart title top and bottom padding + */ titleFontSize?: number; + /** + * Padding around the quadrant square + */ titlePadding?: number; + /** + * quadrant title padding from top if the quadrant is rendered on top + */ quadrantPadding?: number; + /** + * Padding around x-axis labels + */ xAxisLabelPadding?: number; + /** + * Padding around y-axis labels + */ yAxisLabelPadding?: number; + /** + * x-axis label font size + */ xAxisLabelFontSize?: number; + /** + * y-axis label font size + */ yAxisLabelFontSize?: number; + /** + * quadrant title font size + */ quadrantLabelFontSize?: number; + /** + * quadrant title padding from top if the quadrant is rendered on top + */ quadrantTextTopPadding?: number; + /** + * padding between point and point label + */ pointTextPadding?: number; + /** + * point title font size + */ pointLabelFontSize?: number; + /** + * radius of the point to be drawn + */ pointRadius?: number; - xAxisPosition?: 'top' | 'bottom'; - yAxisPosition?: 'left' | 'right'; + /** + * position of x-axis labels + */ + xAxisPosition?: "top" | "bottom"; + /** + * position of y-axis labels + */ + yAxisPosition?: "left" | "right"; + /** + * stroke width of edges of the box that are inside the quadrant + */ quadrantInternalBorderStrokeWidth?: number; + /** + * stroke width of edges of the box that are outside the quadrant + */ quadrantExternalBorderStrokeWidth?: number; } - +/** + * The object containing configurations specific for entity relationship diagrams + * + * This interface was referenced by `MermaidConfig`'s JSON-Schema + * via the `definition` "ErDiagramConfig". + */ export interface ErDiagramConfig extends BaseDiagramConfig { + /** + * Margin top for the text over the diagram + */ titleTopMargin?: number; + /** + * The amount of padding around the diagram as a whole so that embedded + * diagrams have margins, expressed in pixels. + * + */ diagramPadding?: number; - layoutDirection?: string; + /** + * Directional bias for layout of entities + */ + layoutDirection?: string | "TB" | "BT" | "LR" | "RL"; + /** + * The minimum width of an entity box. Expressed in pixels. + */ minEntityWidth?: number; + /** + * The minimum height of an entity box. Expressed in pixels. + */ minEntityHeight?: number; + /** + * The minimum internal padding between text in an entity box and the enclosing box borders. + * Expressed in pixels. + * + */ entityPadding?: number; + /** + * Stroke color of box edges and lines. + */ stroke?: string; + /** + * Fill color of entity boxes + */ fill?: string; + /** + * Font size (expressed as an integer representing a number of pixels) + */ fontSize?: number; } - +/** + * The object containing configurations specific for entity relationship diagrams + * + * This interface was referenced by `MermaidConfig`'s JSON-Schema + * via the `definition` "StateDiagramConfig". + */ export interface StateDiagramConfig extends BaseDiagramConfig { + /** + * Margin top for the text over the diagram + */ titleTopMargin?: number; arrowMarkerAbsolute?: boolean; dividerMargin?: number; @@ -273,161 +772,540 @@ export interface StateDiagramConfig extends BaseDiagramConfig { forkWidth?: number; forkHeight?: number; miniPadding?: number; + /** + * Font size factor, this is used to guess the width of the edges labels + * before rendering by dagre layout. + * This might need updating if/when switching font + * + */ fontSizeFactor?: number; fontSize?: number; labelHeight?: number; edgeLengthFactor?: string; compositTitleSize?: number; radius?: number; - defaultRenderer?: string; + /** + * Decides which rendering engine that is to be used for the rendering. + * + */ + defaultRenderer?: string | "dagre-d3" | "dagre-wrapper" | "elk"; } - +/** + * This interface was referenced by `MermaidConfig`'s JSON-Schema + * via the `definition` "ClassDiagramConfig". + */ export interface ClassDiagramConfig extends BaseDiagramConfig { + /** + * Margin top for the text over the diagram + */ titleTopMargin?: number; + /** + * Controls whether or arrow markers in html code are absolute paths or anchors. + * This matters if you are using base tag settings. + * + */ arrowMarkerAbsolute?: boolean; dividerMargin?: number; padding?: number; textHeight?: number; - defaultRenderer?: string; + /** + * Decides which rendering engine that is to be used for the rendering. + * + */ + defaultRenderer?: string | "dagre-d3" | "dagre-wrapper" | "elk"; nodeSpacing?: number; rankSpacing?: number; + /** + * The amount of padding around the diagram as a whole so that embedded + * diagrams have margins, expressed in pixels. + * + */ diagramPadding?: number; htmlLabels?: boolean; } - +/** + * The object containing configurations specific for journey diagrams + * + * + * This interface was referenced by `MermaidConfig`'s JSON-Schema + * via the `definition` "JourneyDiagramConfig". + */ export interface JourneyDiagramConfig extends BaseDiagramConfig { + /** + * Margin to the right and left of the c4 diagram, must be a positive value. + * + */ diagramMarginX?: number; + /** + * Margin to the over and under the c4 diagram, must be a positive value. + * + */ diagramMarginY?: number; + /** + * Margin between actors + */ leftMargin?: number; + /** + * Width of actor boxes + */ width?: number; + /** + * Height of actor boxes + */ height?: number; + /** + * Margin around loop boxes + */ boxMargin?: number; + /** + * Margin around the text in loop/alt/opt boxes + */ boxTextMargin?: number; + /** + * Margin around notes + */ noteMargin?: number; + /** + * Space between messages. + */ messageMargin?: number; - messageAlign?: string; + /** + * Multiline message alignment + */ + messageAlign?: string | "left" | "center" | "right"; + /** + * Prolongs the edge of the diagram downwards. + * + * Depending on css styling this might need adjustment. + * + */ bottomMarginAdj?: number; + /** + * Curved Arrows become Right Angles + * + * This will display arrows that start and begin at the same node as + * right angles, rather than as curves. + * + */ rightAngles?: boolean; taskFontSize?: string | number; taskFontFamily?: string; taskMargin?: number; + /** + * Width of activation box + */ activationWidth?: number; + /** + * text placement as: tspan | fo | old only text as before + * + */ textPlacement?: string; actorColours?: string[]; sectionFills?: string[]; sectionColours?: string[]; } - +/** + * This interface was referenced by `MermaidConfig`'s JSON-Schema + * via the `definition` "TimelineDiagramConfig". + */ export interface TimelineDiagramConfig extends BaseDiagramConfig { + /** + * Margin to the right and left of the c4 diagram, must be a positive value. + * + */ diagramMarginX?: number; + /** + * Margin to the over and under the c4 diagram, must be a positive value. + * + */ diagramMarginY?: number; + /** + * Margin between actors + */ leftMargin?: number; + /** + * Width of actor boxes + */ width?: number; + /** + * Height of actor boxes + */ height?: number; padding?: number; + /** + * Margin around loop boxes + */ boxMargin?: number; + /** + * Margin around the text in loop/alt/opt boxes + */ boxTextMargin?: number; + /** + * Margin around notes + */ noteMargin?: number; + /** + * Space between messages. + */ messageMargin?: number; - messageAlign?: string; + /** + * Multiline message alignment + */ + messageAlign?: string | "left" | "center" | "right"; + /** + * Prolongs the edge of the diagram downwards. + * + * Depending on css styling this might need adjustment. + * + */ bottomMarginAdj?: number; + /** + * Curved Arrows become Right Angles + * + * This will display arrows that start and begin at the same node as + * right angles, rather than as curves. + * + */ rightAngles?: boolean; taskFontSize?: string | number; taskFontFamily?: string; taskMargin?: number; + /** + * Width of activation box + */ activationWidth?: number; + /** + * text placement as: tspan | fo | old only text as before + * + */ textPlacement?: string; actorColours?: string[]; sectionFills?: string[]; sectionColours?: string[]; disableMulticolor?: boolean; - useMaxWidth?: boolean; } - +/** + * The object containing configurations specific for gantt diagrams + * + * + * This interface was referenced by `MermaidConfig`'s JSON-Schema + * via the `definition` "GanttDiagramConfig". + */ export interface GanttDiagramConfig extends BaseDiagramConfig { + /** + * Margin top for the text over the diagram + */ titleTopMargin?: number; + /** + * The height of the bars in the graph + */ barHeight?: number; + /** + * The margin between the different activities in the gantt diagram + */ barGap?: number; + /** + * Margin between title and gantt diagram and between axis and gantt diagram. + * + */ topPadding?: number; + /** + * The space allocated for the section name to the right of the activities + * + */ rightPadding?: number; + /** + * The space allocated for the section name to the left of the activities + * + */ leftPadding?: number; + /** + * Vertical starting position of the grid lines + */ gridLineStartPadding?: number; + /** + * Font size + */ fontSize?: number; + /** + * Font size for sections + */ sectionFontSize?: string | number; + /** + * The number of alternating section styles + */ numberSectionStyles?: number; + /** + * Date/time format of the axis + * + * This might need adjustment to match your locale and preferences. + * + */ axisFormat?: string; + /** + * axis ticks + * + * Pattern is: + * + * ```javascript + * /^([1-9][0-9]*)(minute|hour|day|week|month)$/ + * ``` + * + */ tickInterval?: string; + /** + * When this flag is set, date labels will be added to the top of the chart + * + */ topAxis?: boolean; - displayMode?: string; + /** + * Controls the display mode. + * + */ + displayMode?: string | "compact"; } - +/** + * The object containing configurations specific for sequence diagrams + * + * This interface was referenced by `MermaidConfig`'s JSON-Schema + * via the `definition` "SequenceDiagramConfig". + */ export interface SequenceDiagramConfig extends BaseDiagramConfig { arrowMarkerAbsolute?: boolean; hideUnusedParticipants?: boolean; + /** + * Width of the activation rect + */ activationWidth?: number; + /** + * Margin to the right and left of the sequence diagram + */ diagramMarginX?: number; + /** + * Margin to the over and under the sequence diagram + */ diagramMarginY?: number; + /** + * Margin between actors + */ actorMargin?: number; + /** + * Width of actor boxes + */ width?: number; + /** + * Height of actor boxes + */ height?: number; + /** + * Margin around loop boxes + */ boxMargin?: number; + /** + * Margin around the text in loop/alt/opt boxes + */ boxTextMargin?: number; + /** + * Margin around notes + */ noteMargin?: number; + /** + * Space between messages. + */ messageMargin?: number; - messageAlign?: string; + /** + * Multiline message alignment + */ + messageAlign?: string | "left" | "center" | "right"; + /** + * Mirror actors under diagram + * + */ mirrorActors?: boolean; + /** + * forces actor popup menus to always be visible (to support E2E testing). + * + */ forceMenus?: boolean; + /** + * Prolongs the edge of the diagram downwards. + * + * Depending on css styling this might need adjustment. + * + */ bottomMarginAdj?: number; + /** + * Curved Arrows become Right Angles + * + * This will display arrows that start and begin at the same node as + * right angles, rather than as curves. + * + */ rightAngles?: boolean; + /** + * This will show the node numbers + */ showSequenceNumbers?: boolean; + /** + * This sets the font size of the actor's description + */ actorFontSize?: string | number; + /** + * This sets the font family of the actor's description + */ actorFontFamily?: string; + /** + * This sets the font weight of the actor's description + */ actorFontWeight?: string | number; + /** + * This sets the font size of actor-attached notes + */ noteFontSize?: string | number; + /** + * This sets the font family of actor-attached notes + */ noteFontFamily?: string; + /** + * This sets the font weight of actor-attached notes + */ noteFontWeight?: string | number; - noteAlign?: string; + /** + * This sets the text alignment of actor-attached notes + */ + noteAlign?: string | "left" | "center" | "right"; + /** + * This sets the font size of actor messages + */ messageFontSize?: string | number; + /** + * This sets the font family of actor messages + */ messageFontFamily?: string; + /** + * This sets the font weight of actor messages + */ messageFontWeight?: string | number; + /** + * This sets the auto-wrap state for the diagram + */ wrap?: boolean; + /** + * This sets the auto-wrap padding for the diagram (sides only) + */ wrapPadding?: number; + /** + * This sets the width of the loop-box (loop, alt, opt, par) + */ labelBoxWidth?: number; + /** + * This sets the height of the loop-box (loop, alt, opt, par) + */ labelBoxHeight?: number; messageFont?: FontCalculator; noteFont?: FontCalculator; actorFont?: FontCalculator; } - +/** + * The object containing configurations specific for flowcharts + * + * This interface was referenced by `MermaidConfig`'s JSON-Schema + * via the `definition` "FlowchartDiagramConfig". + */ export interface FlowchartDiagramConfig extends BaseDiagramConfig { + /** + * Margin top for the text over the diagram + */ titleTopMargin?: number; arrowMarkerAbsolute?: boolean; + /** + * The amount of padding around the diagram as a whole so that embedded + * diagrams have margins, expressed in pixels. + * + */ diagramPadding?: number; + /** + * Flag for setting whether or not a html tag should be used for rendering labels on the edges. + * + */ htmlLabels?: boolean; + /** + * Defines the spacing between nodes on the same level + * + * Pertains to horizontal spacing for TB (top to bottom) or BT (bottom to top) graphs, + * and the vertical spacing for LR as well as RL graphs. + * + */ nodeSpacing?: number; + /** + * Defines the spacing between nodes on different levels + * + * Pertains to horizontal spacing for TB (top to bottom) or BT (bottom to top) graphs, + * and the vertical spacing for LR as well as RL graphs. + * + */ rankSpacing?: number; - curve?: string; + /** + * Defines how mermaid renders curves for flowcharts. + * + */ + curve?: string | "basis" | "linear" | "cardinal"; + /** + * Represents the padding between the labels and the shape + * + * **Only used in new experimental rendering.** + * + */ padding?: number; - defaultRenderer?: string; + /** + * Decides which rendering engine that is to be used for the rendering. + * + */ + defaultRenderer?: string | "dagre-d3" | "dagre-wrapper" | "elk"; + /** + * Width of nodes where text is wrapped. + * + * When using markdown strings the text ius wrapped automatically, this + * value sets the max width of a text before it continues on a new line. + * + */ wrappingWidth?: number; } - -export type SankeyLinkColor = 'source' | 'target' | 'gradient'; -export type SankeyNodeAlignment = 'left' | 'right' | 'center' | 'justify'; - +/** + * The object containing configurations specific for sankey diagrams. + * + * This interface was referenced by `MermaidConfig`'s JSON-Schema + * via the `definition` "SankeyDiagramConfig". + */ export interface SankeyDiagramConfig extends BaseDiagramConfig { width?: number; height?: number; + /** + * The color of the links in the sankey diagram. + * + */ linkColor?: SankeyLinkColor | string; - nodeAlignment?: SankeyNodeAlignment; + /** + * Controls the alignment of the Sankey diagrams. + * + * See . + * + */ + nodeAlignment?: "left" | "right" | "center" | "justify"; + useMaxWidth?: boolean; } - +/** + * This interface was referenced by `MermaidConfig`'s JSON-Schema + * via the `definition` "FontConfig". + */ export interface FontConfig { - fontSize?: string | number; + fontSize?: CSSFontSize; + /** + * The CSS [`font-family`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-family) to use. + */ fontFamily?: string; + /** + * The font weight to use. + */ fontWeight?: string | number; } - -export type FontCalculator = () => Partial; - -export {}; From 063cb124cd64a64c068aea8c417628a3e4058307 Mon Sep 17 00:00:00 2001 From: Alois Klink Date: Sun, 11 Dec 2022 18:42:52 +0000 Subject: [PATCH 21/31] test(config): add temp test for defaultConfig Adds a temporary test to ensure that the new defaultConfig, generated by Vite automatically from the `MermaidConfig` JSON Schema, has the same values as the old defaultConfig (taken from https://github.com/mermaid-js/mermaid/blob/38013de7114966e8b1a83396703ef8158bb34466/packages/mermaid/src/defaultConfig.ts) The only minor difference seems to be that: - `gitGraph` now has a default `useMaxWidth: false` option (previously used to be `undefined`), - `class` now has a `htmlLabels` value of `false` instead of `undefined`. --- packages/mermaid/src/config.spec.js | 37 + packages/mermaid/src/oldDefaultConfig.ts | 2306 ++++++++++++++++++++++ 2 files changed, 2343 insertions(+) create mode 100644 packages/mermaid/src/oldDefaultConfig.ts diff --git a/packages/mermaid/src/config.spec.js b/packages/mermaid/src/config.spec.js index 1f7fd976b..b143c837a 100644 --- a/packages/mermaid/src/config.spec.js +++ b/packages/mermaid/src/config.spec.js @@ -1,3 +1,4 @@ +import isObject from 'lodash-es/isObject.js'; import * as configApi from './config.js'; describe('when working with site config', function () { @@ -53,4 +54,40 @@ describe('when working with site config', function () { 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/oldDefaultConfig.ts b/packages/mermaid/src/oldDefaultConfig.ts new file mode 100644 index 000000000..fbbd39f2a --- /dev/null +++ b/packages/mermaid/src/oldDefaultConfig.ts @@ -0,0 +1,2306 @@ +/** + * Temporary file for testing whether the new mermaid configuration defined in + * packages/mermaid/src/schemas/config.schema.yaml has the exact same default config. + */ + +import theme from './themes/index.js'; +import { type MermaidConfig } from './config.type.js'; +/** + * **Configuration methods in Mermaid version 8.6.0 have been updated, to learn more[[click + * here](8.6.0_docs.md)].** + * + * ## **What follows are config instructions for older versions** + * + * These are the default options which can be overridden with the initialization call like so: + * + * **Example 1:** + * + * ```js + * mermaid.initialize({ flowchart:{ htmlLabels: false } }); + * ``` + * + * **Example 2:** + * + * ```html + * + * ``` + * + * A summary of all options and their defaults is found [here](#mermaidapi-configuration-defaults). + * A description of each option follows below. + */ +const config: Partial = { + /** + * Theme , the CSS style sheet + * + * | Parameter | Description | Type | Required | Values | + * | --------- | --------------- | ------ | -------- | ---------------------------------------------- | + * | theme | Built in Themes | string | Optional | 'default', 'forest', 'dark', 'neutral', 'null' | + * + * **Notes:** To disable any pre-defined mermaid theme, use "null". + * + * @example + * + * ```js + * { + * "theme": "forest", + * "themeCSS": ".node rect { fill: red; }" + * } + * ``` + */ + theme: 'default', + themeVariables: theme['default'].getThemeVariables(), + themeCSS: undefined, + /* **maxTextSize** - The maximum allowed size of the users text diagram */ + maxTextSize: 50000, + darkMode: false, + + /** + * | Parameter | Description | Type | Required | Values | + * | ---------- | ------------------------------------------------------ | ------ | -------- | --------------------------- | + * | fontFamily | specifies the font to be used in the rendered diagrams | string | Required | Any Possible CSS FontFamily | + * + * **Notes:** Default value: '"trebuchet ms", verdana, arial, sans-serif;'. + */ + fontFamily: '"trebuchet ms", verdana, arial, sans-serif;', + + /** + * | Parameter | Description | Type | Required | Values | + * | --------- | ----------------------------------------------------- | ---------------- | -------- | --------------------------------------------- | + * | logLevel | This option decides the amount of logging to be used. | string \| number | Required | 'trace','debug','info','warn','error','fatal' | + * + * **Notes:** + * + * - Trace: 0 + * - Debug: 1 + * - Info: 2 + * - Warn: 3 + * - Error: 4 + * - Fatal: 5 (default) + */ + logLevel: 5, + + /** + * | Parameter | Description | Type | Required | Values | + * | ------------- | --------------------------------- | ------ | -------- | ------------------------------------------ | + * | securityLevel | Level of trust for parsed diagram | string | Required | 'sandbox', 'strict', 'loose', 'antiscript' | + * + * **Notes**: + * + * - **strict**: (**default**) HTML tags in the text are encoded and click functionality is disabled. + * - **antiscript**: HTML tags in text are allowed (only script elements are removed), and click + * functionality is enabled. + * - **loose**: HTML tags in text are allowed and click functionality is enabled. + * - **sandbox**: With this security level, all rendering takes place in a sandboxed iframe. This + * prevent any JavaScript from running in the context. This may hinder interactive functionality + * of the diagram, like scripts, popups in the sequence diagram, links to other tabs or targets, etc. + */ + securityLevel: 'strict', + + /** + * | Parameter | Description | Type | Required | Values | + * | ----------- | -------------------------------------------- | ------- | -------- | ----------- | + * | startOnLoad | Dictates whether mermaid starts on Page load | boolean | Required | true, false | + * + * **Notes:** Default value: true + */ + startOnLoad: true, + + /** + * | Parameter | Description | Type | Required | Values | + * | ------------------- | ---------------------------------------------------------------------------- | ------- | -------- | ----------- | + * | arrowMarkerAbsolute | Controls whether or arrow markers in html code are absolute paths or anchors | boolean | Required | true, false | + * + * **Notes**: + * + * This matters if you are using base tag settings. + * + * Default value: false + */ + arrowMarkerAbsolute: false, + + /** + * This option controls which currentConfig keys are considered _secure_ and can only be changed + * via call to mermaidAPI.initialize. Calls to mermaidAPI.reinitialize cannot make changes to the + * `secure` keys in the current currentConfig. This prevents malicious graph directives from + * overriding a site's default security. + * + * **Notes**: + * + * Default value: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize'] + */ + secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize'], + /** + * This option controls if the generated ids of nodes in the SVG are generated randomly or based + * on a seed. If set to false, the IDs are generated based on the current date and thus are not + * deterministic. This is the default behavior. + * + * **Notes**: + * + * This matters if your files are checked into source control e.g. git and should not change unless + * content is changed. + * + * Default value: false + */ + deterministicIds: false, + + /** + * This option is the optional seed for deterministic ids. if set to undefined but + * deterministicIds is true, a simple number iterator is used. You can set this attribute to base + * the seed on a static string. + */ + deterministicIDSeed: undefined, + + /** The object containing configurations specific for flowcharts */ + flowchart: { + /** + * ### titleTopMargin + * + * | Parameter | Description | Type | Required | Values | + * | -------------- | ---------------------------------------------- | ------- | -------- | ------------------ | + * | titleTopMargin | Margin top for the text over the flowchart | Integer | Required | Any Positive Value | + * + * **Notes:** Default value: 25 + */ + titleTopMargin: 25, + + /** + * | Parameter | Description | Type | Required | Values | + * | -------------- | ----------------------------------------------- | ------- | -------- | ------------------ | + * | diagramPadding | Amount of padding around the diagram as a whole | Integer | Required | Any Positive Value | + * + * **Notes:** + * + * The amount of padding around the diagram as a whole so that embedded diagrams have margins, + * expressed in pixels + * + * Default value: 8 + */ + diagramPadding: 8, + + /** + * | Parameter | Description | Type | Required | Values | + * | ---------- | -------------------------------------------------------------------------------------------- | ------- | -------- | ----------- | + * | htmlLabels | Flag for setting whether or not a html tag should be used for rendering labels on the edges. | boolean | Required | true, false | + * + * **Notes:** Default value: true. + */ + htmlLabels: true, + + /** + * | Parameter | Description | Type | Required | Values | + * | ----------- | --------------------------------------------------- | ------- | -------- | ------------------- | + * | nodeSpacing | Defines the spacing between nodes on the same level | Integer | Required | Any positive Number | + * + * **Notes:** + * + * Pertains to horizontal spacing for TB (top to bottom) or BT (bottom to top) graphs, and the + * vertical spacing for LR as well as RL graphs.** + * + * Default value: 50 + */ + nodeSpacing: 50, + + /** + * | Parameter | Description | Type | Required | Values | + * | ----------- | ----------------------------------------------------- | ------- | -------- | ------------------- | + * | rankSpacing | Defines the spacing between nodes on different levels | Integer | Required | Any Positive Number | + * + * **Notes**: + * + * Pertains to vertical spacing for TB (top to bottom) or BT (bottom to top), and the horizontal + * spacing for LR as well as RL graphs. + * + * Default value 50 + */ + rankSpacing: 50, + + /** + * | Parameter | Description | Type | Required | Values | + * | --------- | -------------------------------------------------- | ------ | -------- | ----------------------------- | + * | curve | Defines how mermaid renders curves for flowcharts. | string | Required | 'basis', 'linear', 'cardinal' | + * + * **Notes:** + * + * Default Value: 'basis' + */ + curve: 'basis', + // Only used in new experimental rendering + // represents the padding between the labels and the shape + padding: 15, + + /** + * | Parameter | Description | Type | Required | Values | + * | ----------- | ----------- | ------- | -------- | ----------- | + * | useMaxWidth | See notes | boolean | 4 | true, false | + * + * **Notes:** + * + * When this flag is set the height and width is set to 100% and is then scaling with the + * available space if not the absolute space required is used. + * + * Default value: true + */ + useMaxWidth: true, + + /** + * | Parameter | Description | Type | Required | Values | + * | --------------- | ----------- | ------- | -------- | ----------------------- | + * | defaultRenderer | See notes | boolean | 4 | dagre-d3, dagre-wrapper, elk | + * + * **Notes:** + * + * Decides which rendering engine that is to be used for the rendering. Legal values are: + * dagre-d3 dagre-wrapper - wrapper for dagre implemented in mermaid, elk for layout using + * elkjs + * + * Default value: 'dagre-wrapper' + */ + defaultRenderer: 'dagre-wrapper', + /** + * | Parameter | Description | Type | Required | Values | + * | --------------- | ----------- | ------- | -------- | ----------------------- | + * | wrappingWidth | See notes | number | 4 | width of nodes where text is wrapped | + * + * **Notes:** + * + * When using markdown strings the text ius wrapped automatically, this + * value sets the max width of a text before it continues on a new line. + * Default value: 'dagre-wrapper' + */ + wrappingWidth: 200, + }, + + /** The object containing configurations specific for sequence diagrams */ + sequence: { + hideUnusedParticipants: false, + /** + * | Parameter | Description | Type | Required | Values | + * | --------------- | ---------------------------- | ------- | -------- | ------------------ | + * | activationWidth | Width of the activation rect | Integer | Required | Any Positive Value | + * + * **Notes:** Default value :10 + */ + activationWidth: 10, + + /** + * | Parameter | Description | Type | Required | Values | + * | -------------- | ---------------------------------------------------- | ------- | -------- | ------------------ | + * | diagramMarginX | Margin to the right and left of the sequence diagram | Integer | Required | Any Positive Value | + * + * **Notes:** Default value: 50 + */ + diagramMarginX: 50, + + /** + * | Parameter | Description | Type | Required | Values | + * | -------------- | ------------------------------------------------- | ------- | -------- | ------------------ | + * | diagramMarginY | Margin to the over and under the sequence diagram | Integer | Required | Any Positive Value | + * + * **Notes:** Default value: 10 + */ + diagramMarginY: 10, + + /** + * | Parameter | Description | Type | Required | Values | + * | ----------- | --------------------- | ------- | -------- | ------------------ | + * | actorMargin | Margin between actors | Integer | Required | Any Positive Value | + * + * **Notes:** Default value: 50 + */ + actorMargin: 50, + + /** + * | Parameter | Description | Type | Required | Values | + * | --------- | -------------------- | ------- | -------- | ------------------ | + * | width | Width of actor boxes | Integer | Required | Any Positive Value | + * + * **Notes:** Default value: 150 + */ + width: 150, + + /** + * | Parameter | Description | Type | Required | Values | + * | --------- | --------------------- | ------- | -------- | ------------------ | + * | height | Height of actor boxes | Integer | Required | Any Positive Value | + * + * **Notes:** Default value: 65 + */ + height: 65, + + /** + * | Parameter | Description | Type | Required | Values | + * | --------- | ------------------------ | ------- | -------- | ------------------ | + * | boxMargin | Margin around loop boxes | Integer | Required | Any Positive Value | + * + * **Notes:** Default value: 10 + */ + boxMargin: 10, + + /** + * | Parameter | Description | Type | Required | Values | + * | ------------- | -------------------------------------------- | ------- | -------- | ------------------ | + * | boxTextMargin | Margin around the text in loop/alt/opt boxes | Integer | Required | Any Positive Value | + * + * **Notes:** Default value: 5 + */ + boxTextMargin: 5, + + /** + * | Parameter | Description | Type | Required | Values | + * | ---------- | ------------------- | ------- | -------- | ------------------ | + * | noteMargin | margin around notes | Integer | Required | Any Positive Value | + * + * **Notes:** Default value: 10 + */ + noteMargin: 10, + + /** + * | Parameter | Description | Type | Required | Values | + * | ------------- | ---------------------- | ------- | -------- | ------------------ | + * | messageMargin | Space between messages | Integer | Required | Any Positive Value | + * + * **Notes:** Default value: 35 + */ + messageMargin: 35, + + /** + * | Parameter | Description | Type | Required | Values | + * | ------------ | --------------------------- | ------ | -------- | ------------------------- | + * | messageAlign | Multiline message alignment | string | Required | 'left', 'center', 'right' | + * + * **Notes:** Default value: 'center' + */ + messageAlign: 'center', + + /** + * | Parameter | Description | Type | Required | Values | + * | ------------ | --------------------------- | ------- | -------- | ----------- | + * | mirrorActors | Mirror actors under diagram | boolean | Required | true, false | + * + * **Notes:** Default value: true + */ + mirrorActors: true, + + /** + * | Parameter | Description | Type | Required | Values | + * | ---------- | ----------------------------------------------------------------------- | ------- | -------- | ----------- | + * | forceMenus | forces actor popup menus to always be visible (to support E2E testing). | Boolean | Required | True, False | + * + * **Notes:** + * + * Default value: false. + */ + forceMenus: false, + + /** + * | Parameter | Description | Type | Required | Values | + * | --------------- | ------------------------------------------ | ------- | -------- | ------------------ | + * | bottomMarginAdj | Prolongs the edge of the diagram downwards | Integer | Required | Any Positive Value | + * + * **Notes:** + * + * Depending on css styling this might need adjustment. + * + * Default value: 1 + */ + bottomMarginAdj: 1, + + /** + * | Parameter | Description | Type | Required | Values | + * | ----------- | ----------- | ------- | -------- | ----------- | + * | useMaxWidth | See Notes | boolean | Required | true, false | + * + * **Notes:** When this flag is set to true, the height and width is set to 100% and is then + * scaling with the available space. If set to false, the absolute space required is used. + * + * Default value: true + */ + useMaxWidth: true, + + /** + * | Parameter | Description | Type | Required | Values | + * | ----------- | ------------------------------------ | ------- | -------- | ----------- | + * | rightAngles | display curve arrows as right angles | boolean | Required | true, false | + * + * **Notes:** + * + * This will display arrows that start and begin at the same node as right angles, rather than a + * curve + * + * Default value: false + */ + rightAngles: false, + + /** + * | Parameter | Description | Type | Required | Values | + * | ------------------- | ------------------------------- | ------- | -------- | ----------- | + * | showSequenceNumbers | This will show the node numbers | boolean | Required | true, false | + * + * **Notes:** Default value: false + */ + showSequenceNumbers: false, + + /** + * | Parameter | Description | Type | Required | Values | + * | ------------- | -------------------------------------------------- | ------- | -------- | ------------------ | + * | actorFontSize | This sets the font size of the actor's description | Integer | Require | Any Positive Value | + * + * **Notes:** **Default value 14**.. + */ + actorFontSize: 14, + + /** + * | Parameter | Description | Type | Required | Values | + * | --------------- | ---------------------------------------------------- | ------ | -------- | --------------------------- | + * | actorFontFamily | This sets the font family of the actor's description | string | Required | Any Possible CSS FontFamily | + * + * **Notes:** Default value: "'Open Sans", sans-serif' + */ + actorFontFamily: '"Open Sans", sans-serif', + + /** + * This sets the font weight of the actor's description + * + * **Notes:** Default value: 400. + */ + actorFontWeight: 400, + + /** + * | Parameter | Description | Type | Required | Values | + * | ------------ | ----------------------------------------------- | ------- | -------- | ------------------ | + * | noteFontSize | This sets the font size of actor-attached notes | Integer | Required | Any Positive Value | + * + * **Notes:** Default value: 14 + */ + noteFontSize: 14, + + /** + * | Parameter | Description | Type | Required | Values | + * | -------------- | -------------------------------------------------- | ------ | -------- | --------------------------- | + * | noteFontFamily | This sets the font family of actor-attached notes. | string | Required | Any Possible CSS FontFamily | + * + * **Notes:** Default value: ''"trebuchet ms", verdana, arial, sans-serif' + */ + noteFontFamily: '"trebuchet ms", verdana, arial, sans-serif', + + /** + * This sets the font weight of the note's description + * + * **Notes:** Default value: 400 + */ + noteFontWeight: 400, + + /** + * | Parameter | Description | Type | Required | Values | + * | --------- | ---------------------------------------------------- | ------ | -------- | ------------------------- | + * | noteAlign | This sets the text alignment of actor-attached notes | string | required | 'left', 'center', 'right' | + * + * **Notes:** Default value: 'center' + */ + noteAlign: 'center', + + /** + * | Parameter | Description | Type | Required | Values | + * | --------------- | ----------------------------------------- | ------- | -------- | ------------------- | + * | messageFontSize | This sets the font size of actor messages | Integer | Required | Any Positive Number | + * + * **Notes:** Default value: 16 + */ + messageFontSize: 16, + + /** + * | Parameter | Description | Type | Required | Values | + * | ----------------- | ------------------------------------------- | ------ | -------- | --------------------------- | + * | messageFontFamily | This sets the font family of actor messages | string | Required | Any Possible CSS FontFamily | + * + * **Notes:** Default value: '"trebuchet ms", verdana, arial, sans-serif' + */ + messageFontFamily: '"trebuchet ms", verdana, arial, sans-serif', + + /** + * This sets the font weight of the message's description + * + * **Notes:** Default value: 400. + */ + messageFontWeight: 400, + + /** + * This sets the auto-wrap state for the diagram + * + * **Notes:** Default value: false. + */ + wrap: false, + + /** + * This sets the auto-wrap padding for the diagram (sides only) + * + * **Notes:** Default value: 0. + */ + wrapPadding: 10, + + /** + * This sets the width of the loop-box (loop, alt, opt, par) + * + * **Notes:** Default value: 50. + */ + labelBoxWidth: 50, + + /** + * This sets the height of the loop-box (loop, alt, opt, par) + * + * **Notes:** Default value: 20. + */ + labelBoxHeight: 20, + + messageFont: function () { + return { + fontFamily: this.messageFontFamily, + fontSize: this.messageFontSize, + fontWeight: this.messageFontWeight, + }; + }, + noteFont: function () { + return { + fontFamily: this.noteFontFamily, + fontSize: this.noteFontSize, + fontWeight: this.noteFontWeight, + }; + }, + actorFont: function () { + return { + fontFamily: this.actorFontFamily, + fontSize: this.actorFontSize, + fontWeight: this.actorFontWeight, + }; + }, + }, + + /** The object containing configurations specific for gantt diagrams */ + gantt: { + /** + * ### titleTopMargin + * + * | Parameter | Description | Type | Required | Values | + * | -------------- | ---------------------------------------------- | ------- | -------- | ------------------ | + * | titleTopMargin | Margin top for the text over the gantt diagram | Integer | Required | Any Positive Value | + * + * **Notes:** Default value: 25 + */ + titleTopMargin: 25, + + /** + * | Parameter | Description | Type | Required | Values | + * | --------- | ----------------------------------- | ------- | -------- | ------------------ | + * | barHeight | The height of the bars in the graph | Integer | Required | Any Positive Value | + * + * **Notes:** Default value: 20 + */ + barHeight: 20, + + /** + * | Parameter | Description | Type | Required | Values | + * | --------- | ---------------------------------------------------------------- | ------- | -------- | ------------------ | + * | barGap | The margin between the different activities in the gantt diagram | Integer | Optional | Any Positive Value | + * + * **Notes:** Default value: 4 + */ + barGap: 4, + + /** + * | Parameter | Description | Type | Required | Values | + * | ---------- | -------------------------------------------------------------------------- | ------- | -------- | ------------------ | + * | topPadding | Margin between title and gantt diagram and between axis and gantt diagram. | Integer | Required | Any Positive Value | + * + * **Notes:** Default value: 50 + */ + topPadding: 50, + + /** + * | Parameter | Description | Type | Required | Values | + * | ------------ | ----------------------------------------------------------------------- | ------- | -------- | ------------------ | + * | rightPadding | The space allocated for the section name to the right of the activities | Integer | Required | Any Positive Value | + * + * **Notes:** Default value: 75 + */ + rightPadding: 75, + + /** + * | Parameter | Description | Type | Required | Values | + * | ----------- | ---------------------------------------------------------------------- | ------- | -------- | ------------------ | + * | leftPadding | The space allocated for the section name to the left of the activities | Integer | Required | Any Positive Value | + * + * **Notes:** Default value: 75 + */ + leftPadding: 75, + + /** + * | Parameter | Description | Type | Required | Values | + * | -------------------- | -------------------------------------------- | ------- | -------- | ------------------ | + * | gridLineStartPadding | Vertical starting position of the grid lines | Integer | Required | Any Positive Value | + * + * **Notes:** Default value: 35 + */ + gridLineStartPadding: 35, + + /** + * | Parameter | Description | Type | Required | Values | + * | --------- | ----------- | ------- | -------- | ------------------ | + * | fontSize | Font size | Integer | Required | Any Positive Value | + * + * **Notes:** Default value: 11 + */ + fontSize: 11, + + /** + * | Parameter | Description | Type | Required | Values | + * | --------------- | ---------------------- | ------- | -------- | ------------------ | + * | sectionFontSize | Font size for sections | Integer | Required | Any Positive Value | + * + * **Notes:** Default value: 11 + */ + sectionFontSize: 11, + + /** + * | Parameter | Description | Type | Required | Values | + * | ------------------- | ---------------------------------------- | ------- | -------- | ------------------ | + * | numberSectionStyles | The number of alternating section styles | Integer | 4 | Any Positive Value | + * + * **Notes:** Default value: 4 + */ + numberSectionStyles: 4, + + /** + * | Parameter | Description | Type | Required | Values | + * | ----------- | ------------------------- | ------ | -------- | --------- | + * | displayMode | Controls the display mode | string | 4 | 'compact' | + * + * **Notes**: + * + * - **compact**: Enables displaying multiple tasks on the same row. + */ + displayMode: '', + + /** + * | Parameter | Description | Type | Required | Values | + * | ---------- | ---------------------------- | ---- | -------- | ---------------- | + * | axisFormat | Date/time format of the axis | 3 | Required | Date in yy-mm-dd | + * + * **Notes:** + * + * This might need adjustment to match your locale and preferences + * + * Default value: '%Y-%m-%d'. + */ + axisFormat: '%Y-%m-%d', + + /** + * | Parameter | Description | Type | Required | Values | + * | ------------ | ------------| ------ | -------- | ------- | + * | tickInterval | axis ticks | string | Optional | string | + * + * **Notes:** + * + * Pattern is /^([1-9][0-9]*)(minute|hour|day|week|month)$/ + * + * Default value: undefined + */ + tickInterval: undefined, + /** + * | Parameter | Description | Type | Required | Values | + * | ----------- | ----------- | ------- | -------- | ----------- | + * | useMaxWidth | See notes | boolean | 4 | true, false | + * + * **Notes:** + * + * When this flag is set the height and width is set to 100% and is then scaling with the + * available space if not the absolute space required is used. + * + * Default value: true + */ + useMaxWidth: true, + + /** + * | Parameter | Description | Type | Required | Values | + * | --------- | ----------- | ------- | -------- | ----------- | + * | topAxis | See notes | Boolean | 4 | True, False | + * + * **Notes:** when this flag is set date labels will be added to the top of the chart + * + * **Default value false**. + */ + topAxis: false, + + useWidth: undefined, + }, + + /** The object containing configurations specific for journey diagrams */ + journey: { + /** + * | Parameter | Description | Type | Required | Values | + * | -------------- | ---------------------------------------------------- | ------- | -------- | ------------------ | + * | diagramMarginX | Margin to the right and left of the sequence diagram | Integer | Required | Any Positive Value | + * + * **Notes:** Default value: 50 + */ + diagramMarginX: 50, + + /** + * | Parameter | Description | Type | Required | Values | + * | -------------- | -------------------------------------------------- | ------- | -------- | ------------------ | + * | diagramMarginY | Margin to the over and under the sequence diagram. | Integer | Required | Any Positive Value | + * + * **Notes:** Default value: 10 + */ + diagramMarginY: 10, + + /** + * | Parameter | Description | Type | Required | Values | + * | ----------- | --------------------- | ------- | -------- | ------------------ | + * | actorMargin | Margin between actors | Integer | Required | Any Positive Value | + * + * **Notes:** Default value: 50 + */ + leftMargin: 150, + + /** + * | Parameter | Description | Type | Required | Values | + * | --------- | -------------------- | ------- | -------- | ------------------ | + * | width | Width of actor boxes | Integer | Required | Any Positive Value | + * + * **Notes:** Default value: 150 + */ + width: 150, + + /** + * | Parameter | Description | Type | Required | Values | + * | --------- | --------------------- | ------- | -------- | ------------------ | + * | height | Height of actor boxes | Integer | Required | Any Positive Value | + * + * **Notes:** Default value: 65 + */ + height: 50, + + /** + * | Parameter | Description | Type | Required | Values | + * | --------- | ------------------------ | ------- | -------- | ------------------ | + * | boxMargin | Margin around loop boxes | Integer | Required | Any Positive Value | + * + * **Notes:** Default value: 10 + */ + boxMargin: 10, + + /** + * | Parameter | Description | Type | Required | Values | + * | ------------- | -------------------------------------------- | ------- | -------- | ------------------ | + * | boxTextMargin | Margin around the text in loop/alt/opt boxes | Integer | Required | Any Positive Value | + * + * **Notes:** Default value: 5 + */ + boxTextMargin: 5, + + /** + * | Parameter | Description | Type | Required | Values | + * | ---------- | ------------------- | ------- | -------- | ------------------ | + * | noteMargin | Margin around notes | Integer | Required | Any Positive Value | + * + * **Notes:** Default value: 10 + */ + noteMargin: 10, + + /** + * | Parameter | Description | Type | Required | Values | + * | ------------- | ----------------------- | ------- | -------- | ------------------ | + * | messageMargin | Space between messages. | Integer | Required | Any Positive Value | + * + * **Notes:** + * + * Space between messages. + * + * Default value: 35 + */ + messageMargin: 35, + + /** + * | Parameter | Description | Type | Required | Values | + * | ------------ | --------------------------- | ---- | -------- | ------------------------- | + * | messageAlign | Multiline message alignment | 3 | 4 | 'left', 'center', 'right' | + * + * **Notes:** Default value: 'center' + */ + messageAlign: 'center', + + /** + * | Parameter | Description | Type | Required | Values | + * | --------------- | ------------------------------------------ | ------- | -------- | ------------------ | + * | bottomMarginAdj | Prolongs the edge of the diagram downwards | Integer | 4 | Any Positive Value | + * + * **Notes:** + * + * Depending on css styling this might need adjustment. + * + * Default value: 1 + */ + bottomMarginAdj: 1, + + /** + * | Parameter | Description | Type | Required | Values | + * | ----------- | ----------- | ------- | -------- | ----------- | + * | useMaxWidth | See notes | boolean | 4 | true, false | + * + * **Notes:** + * + * When this flag is set the height and width is set to 100% and is then scaling with the + * available space if not the absolute space required is used. + * + * Default value: true + */ + useMaxWidth: true, + + /** + * | Parameter | Description | Type | Required | Values | + * | ----------- | --------------------------------- | ---- | -------- | ----------- | + * | rightAngles | Curved Arrows become Right Angles | 3 | 4 | true, false | + * + * **Notes:** + * + * This will display arrows that start and begin at the same node as right angles, rather than a + * curves + * + * Default value: false + */ + rightAngles: false, + taskFontSize: 14, + taskFontFamily: '"Open Sans", sans-serif', + taskMargin: 50, + // width of activation box + activationWidth: 10, + + // text placement as: tspan | fo | old only text as before + textPlacement: 'fo', + actorColours: ['#8FBC8F', '#7CFC00', '#00FFFF', '#20B2AA', '#B0E0E6', '#FFFFE0'], + + sectionFills: ['#191970', '#8B008B', '#4B0082', '#2F4F4F', '#800000', '#8B4513', '#00008B'], + sectionColours: ['#fff'], + }, + /** The object containing configurations specific for timeline diagrams */ + timeline: { + /** + * | Parameter | Description | Type | Required | Values | + * | -------------- | ---------------------------------------------------- | ------- | -------- | ------------------ | + * | diagramMarginX | Margin to the right and left of the sequence diagram | Integer | Required | Any Positive Value | + * + * **Notes:** Default value: 50 + */ + diagramMarginX: 50, + + /** + * | Parameter | Description | Type | Required | Values | + * | -------------- | -------------------------------------------------- | ------- | -------- | ------------------ | + * | diagramMarginY | Margin to the over and under the sequence diagram. | Integer | Required | Any Positive Value | + * + * **Notes:** Default value: 10 + */ + diagramMarginY: 10, + + /** + * | Parameter | Description | Type | Required | Values | + * | ----------- | --------------------- | ------- | -------- | ------------------ | + * | actorMargin | Margin between actors | Integer | Required | Any Positive Value | + * + * **Notes:** Default value: 50 + */ + leftMargin: 150, + + /** + * | Parameter | Description | Type | Required | Values | + * | --------- | -------------------- | ------- | -------- | ------------------ | + * | width | Width of actor boxes | Integer | Required | Any Positive Value | + * + * **Notes:** Default value: 150 + */ + width: 150, + + /** + * | Parameter | Description | Type | Required | Values | + * | --------- | --------------------- | ------- | -------- | ------------------ | + * | height | Height of actor boxes | Integer | Required | Any Positive Value | + * + * **Notes:** Default value: 65 + */ + height: 50, + + /** + * | Parameter | Description | Type | Required | Values | + * | --------- | ------------------------ | ------- | -------- | ------------------ | + * | boxMargin | Margin around loop boxes | Integer | Required | Any Positive Value | + * + * **Notes:** Default value: 10 + */ + boxMargin: 10, + + /** + * | Parameter | Description | Type | Required | Values | + * | ------------- | -------------------------------------------- | ------- | -------- | ------------------ | + * | boxTextMargin | Margin around the text in loop/alt/opt boxes | Integer | Required | Any Positive Value | + * + * **Notes:** Default value: 5 + */ + boxTextMargin: 5, + + /** + * | Parameter | Description | Type | Required | Values | + * | ---------- | ------------------- | ------- | -------- | ------------------ | + * | noteMargin | Margin around notes | Integer | Required | Any Positive Value | + * + * **Notes:** Default value: 10 + */ + noteMargin: 10, + + /** + * | Parameter | Description | Type | Required | Values | + * | ------------- | ----------------------- | ------- | -------- | ------------------ | + * | messageMargin | Space between messages. | Integer | Required | Any Positive Value | + * + * **Notes:** + * + * Space between messages. + * + * Default value: 35 + */ + messageMargin: 35, + + /** + * | Parameter | Description | Type | Required | Values | + * | ------------ | --------------------------- | ---- | -------- | ------------------------- | + * | messageAlign | Multiline message alignment | 3 | 4 | 'left', 'center', 'right' | + * + * **Notes:** Default value: 'center' + */ + messageAlign: 'center', + + /** + * | Parameter | Description | Type | Required | Values | + * | --------------- | ------------------------------------------ | ------- | -------- | ------------------ | + * | bottomMarginAdj | Prolongs the edge of the diagram downwards | Integer | 4 | Any Positive Value | + * + * **Notes:** + * + * Depending on css styling this might need adjustment. + * + * Default value: 1 + */ + bottomMarginAdj: 1, + + /** + * | Parameter | Description | Type | Required | Values | + * | ----------- | ----------- | ------- | -------- | ----------- | + * | useMaxWidth | See notes | boolean | 4 | true, false | + * + * **Notes:** + * + * When this flag is set the height and width is set to 100% and is then scaling with the + * available space if not the absolute space required is used. + * + * Default value: true + */ + useMaxWidth: true, + + /** + * | Parameter | Description | Type | Required | Values | + * | ----------- | --------------------------------- | ---- | -------- | ----------- | + * | rightAngles | Curved Arrows become Right Angles | 3 | 4 | true, false | + * + * **Notes:** + * + * This will display arrows that start and begin at the same node as right angles, rather than a + * curves + * + * Default value: false + */ + rightAngles: false, + taskFontSize: 14, + taskFontFamily: '"Open Sans", sans-serif', + taskMargin: 50, + // width of activation box + activationWidth: 10, + + // text placement as: tspan | fo | old only text as before + textPlacement: 'fo', + actorColours: ['#8FBC8F', '#7CFC00', '#00FFFF', '#20B2AA', '#B0E0E6', '#FFFFE0'], + + sectionFills: ['#191970', '#8B008B', '#4B0082', '#2F4F4F', '#800000', '#8B4513', '#00008B'], + sectionColours: ['#fff'], + disableMulticolor: false, + }, + class: { + /** + * ### titleTopMargin + * + * | Parameter | Description | Type | Required | Values | + * | -------------- | ---------------------------------------------- | ------- | -------- | ------------------ | + * | titleTopMargin | Margin top for the text over the class diagram | Integer | Required | Any Positive Value | + * + * **Notes:** Default value: 25 + */ + titleTopMargin: 25, + arrowMarkerAbsolute: false, + dividerMargin: 10, + padding: 5, + textHeight: 10, + + /** + * | Parameter | Description | Type | Required | Values | + * | ----------- | ----------- | ------- | -------- | ----------- | + * | useMaxWidth | See notes | boolean | 4 | true, false | + * + * **Notes:** + * + * When this flag is set the height and width is set to 100% and is then scaling with the + * available space if not the absolute space required is used. + * + * Default value: true + */ + useMaxWidth: true, + /** + * | Parameter | Description | Type | Required | Values | + * | --------------- | ----------- | ------- | -------- | ----------------------- | + * | defaultRenderer | See notes | boolean | 4 | dagre-d3, dagre-wrapper | + * + * **Notes**: + * + * Decides which rendering engine that is to be used for the rendering. Legal values are: + * dagre-d3 dagre-wrapper - wrapper for dagre implemented in mermaid + * + * Default value: 'dagre-d3' + */ + defaultRenderer: 'dagre-wrapper', + }, + state: { + /** + * ### titleTopMargin + * + * | Parameter | Description | Type | Required | Values | + * | -------------- | ---------------------------------------------- | ------- | -------- | ------------------ | + * | titleTopMargin | Margin top for the text over the state diagram | Integer | Required | Any Positive Value | + * + * **Notes:** Default value: 25 + */ + titleTopMargin: 25, + dividerMargin: 10, + sizeUnit: 5, + padding: 8, + textHeight: 10, + titleShift: -15, + noteMargin: 10, + forkWidth: 70, + forkHeight: 7, + // Used + miniPadding: 2, + // Font size factor, this is used to guess the width of the edges labels before rendering by dagre + // layout. This might need updating if/when switching font + fontSizeFactor: 5.02, + fontSize: 24, + labelHeight: 16, + edgeLengthFactor: '20', + compositTitleSize: 35, + radius: 5, + /** + * | Parameter | Description | Type | Required | Values | + * | ----------- | ----------- | ------- | -------- | ----------- | + * | useMaxWidth | See notes | boolean | 4 | true, false | + * + * **Notes:** + * + * When this flag is set the height and width is set to 100% and is then scaling with the + * available space if not the absolute space required is used. + * + * Default value: true + */ + useMaxWidth: true, + /** + * | Parameter | Description | Type | Required | Values | + * | --------------- | ----------- | ------- | -------- | ----------------------- | + * | defaultRenderer | See notes | boolean | 4 | dagre-d3, dagre-wrapper | + * + * **Notes:** + * + * Decides which rendering engine that is to be used for the rendering. Legal values are: + * dagre-d3 dagre-wrapper - wrapper for dagre implemented in mermaid + * + * Default value: 'dagre-d3' + */ + defaultRenderer: 'dagre-wrapper', + }, + + /** The object containing configurations specific for entity relationship diagrams */ + er: { + /** + * ### titleTopMargin + * + * | Parameter | Description | Type | Required | Values | + * | -------------- | ---------------------------------------------- | ------- | -------- | ------------------ | + * | titleTopMargin | Margin top for the text over the diagram | Integer | Required | Any Positive Value | + * + * **Notes:** Default value: 25 + */ + titleTopMargin: 25, + + /** + * | Parameter | Description | Type | Required | Values | + * | -------------- | ----------------------------------------------- | ------- | -------- | ------------------ | + * | diagramPadding | Amount of padding around the diagram as a whole | Integer | Required | Any Positive Value | + * + * **Notes:** + * + * The amount of padding around the diagram as a whole so that embedded diagrams have margins, + * expressed in pixels + * + * Default value: 20 + */ + diagramPadding: 20, + + /** + * | Parameter | Description | Type | Required | Values | + * | --------------- | ---------------------------------------- | ------ | -------- | ---------------------- | + * | layoutDirection | Directional bias for layout of entities. | string | Required | "TB", "BT", "LR", "RL" | + * + * **Notes:** + * + * 'TB' for Top-Bottom, 'BT'for Bottom-Top, 'LR' for Left-Right, or 'RL' for Right to Left. + * + * T = top, B = bottom, L = left, and R = right. + * + * Default value: 'TB' + */ + layoutDirection: 'TB', + + /** + * | Parameter | Description | Type | Required | Values | + * | -------------- | ---------------------------------- | ------- | -------- | ------------------ | + * | minEntityWidth | The minimum width of an entity box | Integer | Required | Any Positive Value | + * + * **Notes:** Expressed in pixels. Default value: 100 + */ + minEntityWidth: 100, + + /** + * | Parameter | Description | Type | Required | Values | + * | --------------- | ----------------------------------- | ------- | -------- | ------------------ | + * | minEntityHeight | The minimum height of an entity box | Integer | 4 | Any Positive Value | + * + * **Notes:** Expressed in pixels Default value: 75 + */ + minEntityHeight: 75, + + /** + * | Parameter | Description | Type | Required | Values | + * | ------------- | ------------------------------------------------------------ | ------- | -------- | ------------------ | + * | entityPadding | Minimum internal padding between text in box and box borders | Integer | 4 | Any Positive Value | + * + * **Notes:** + * + * The minimum internal padding between text in an entity box and the enclosing box borders, + * expressed in pixels. + * + * Default value: 15 + */ + entityPadding: 15, + + /** + * | Parameter | Description | Type | Required | Values | + * | --------- | ----------------------------------- | ------ | -------- | -------------------- | + * | stroke | Stroke color of box edges and lines | string | 4 | Any recognized color | + * + * **Notes:** Default value: 'gray' + */ + stroke: 'gray', + + /** + * | Parameter | Description | Type | Required | Values | + * | --------- | -------------------------- | ------ | -------- | -------------------- | + * | fill | Fill color of entity boxes | string | 4 | Any recognized color | + * + * **Notes:** Default value: 'honeydew' + */ + fill: 'honeydew', + + /** + * | Parameter | Description | Type | Required | Values | + * | --------- | ------------------- | ------- | -------- | ------------------ | + * | fontSize | Font Size in pixels | Integer | | Any Positive Value | + * + * **Notes:** + * + * Font size (expressed as an integer representing a number of pixels) Default value: 12 + */ + fontSize: 12, + + /** + * | Parameter | Description | Type | Required | Values | + * | ----------- | ----------- | ------- | -------- | ----------- | + * | useMaxWidth | See Notes | boolean | Required | true, false | + * + * **Notes:** + * + * When this flag is set to true, the diagram width is locked to 100% and scaled based on + * available space. If set to false, the diagram reserves its absolute width. + * + * Default value: true + */ + useMaxWidth: true, + }, + + /** The object containing configurations specific for pie diagrams */ + pie: { + useWidth: undefined, + + /** + * | Parameter | Description | Type | Required | Values | + * | ----------- | ----------- | ------- | -------- | ----------- | + * | useMaxWidth | See Notes | boolean | Required | true, false | + * + * **Notes:** + * + * When this flag is set to true, the diagram width is locked to 100% and scaled based on + * available space. If set to false, the diagram reserves its absolute width. + * + * Default value: true + */ + useMaxWidth: true, + + /** + * | Parameter | Description | Type | Required | Values | + * | ------------ | -------------------------------------------------------------------------------- | ------- | -------- | ------------------- | + * | textPosition | Axial position of slice's label from zero at the center to 1 at the outside edge | Number | Optional | Decimal from 0 to 1 | + * + * **Notes:** Default value: 0.75 + */ + textPosition: 0.75, + }, + + quadrantChart: { + /** + * | Parameter | Description | Type | Required | Values | + * | --------------- | ---------------------------------- | ------- | -------- | ------------------- | + * | chartWidth | Width of the chart | number | Optional | Any positive number | + * + * **Notes:** + * Default value: 500 + */ + chartWidth: 500, + /** + * | Parameter | Description | Type | Required | Values | + * | --------------- | ---------------------------------- | ------- | -------- | ------------------- | + * | chartHeight | Height of the chart | number | Optional | Any positive number | + * + * **Notes:** + * Default value: 500 + */ + chartHeight: 500, + /** + * | Parameter | Description | Type | Required | Values | + * | ------------------ | ---------------------------------- | ------- | -------- | ------------------- | + * | titlePadding | Chart title top and bottom padding | number | Optional | Any positive number | + * + * **Notes:** + * Default value: 10 + */ + titlePadding: 10, + /** + * | Parameter | Description | Type | Required | Values | + * | ------------------ | ---------------------------------- | ------- | -------- | ------------------- | + * | titleFontSize | Chart title font size | number | Optional | Any positive number | + * + * **Notes:** + * Default value: 20 + */ + titleFontSize: 20, + /** + * | Parameter | Description | Type | Required | Values | + * | --------------- | ---------------------------------- | ------- | -------- | ------------------- | + * | quadrantPadding | Padding around the quadrant square | number | Optional | Any positive number | + * + * **Notes:** + * Default value: 5 + */ + quadrantPadding: 5, + /** + * | Parameter | Description | Type | Required | Values | + * | ---------------------- | -------------------------------------------------------------------------- | ------- | -------- | ------------------- | + * | quadrantTextTopPadding | quadrant title padding from top if the quadrant is rendered on top | number | Optional | Any positive number | + * + * **Notes:** + * Default value: 5 + */ + quadrantTextTopPadding: 5, + /** + * | Parameter | Description | Type | Required | Values | + * | ------------------ | ---------------------------------- | ------- | -------- | ------------------- | + * | quadrantLabelFontSize | quadrant title font size | number | Optional | Any positive number | + * + * **Notes:** + * Default value: 16 + */ + quadrantLabelFontSize: 16, + /** + * | Parameter | Description | Type | Required | Values | + * | --------------------------------- | ------------------------------------------------------------- | ------- | -------- | ------------------- | + * | quadrantInternalBorderStrokeWidth | stroke width of edges of the box that are inside the quadrant | number | Optional | Any positive number | + * + * **Notes:** + * Default value: 1 + */ + quadrantInternalBorderStrokeWidth: 1, + /** + * | Parameter | Description | Type | Required | Values | + * | --------------------------------- | -------------------------------------------------------------- | ------- | -------- | ------------------- | + * | quadrantExternalBorderStrokeWidth | stroke width of edges of the box that are outside the quadrant | number | Optional | Any positive number | + * + * **Notes:** + * Default value: 2 + */ + quadrantExternalBorderStrokeWidth: 2, + /** + * | Parameter | Description | Type | Required | Values | + * | --------------- | ---------------------------------- | ------- | -------- | ------------------- | + * | xAxisLabelPadding | Padding around x-axis labels | number | Optional | Any positive number | + * + * **Notes:** + * Default value: 5 + */ + xAxisLabelPadding: 5, + /** + * | Parameter | Description | Type | Required | Values | + * | ------------------ | ---------------------------------- | ------- | -------- | ------------------- | + * | xAxisLabelFontSize | x-axis label font size | number | Optional | Any positive number | + * + * **Notes:** + * Default value: 16 + */ + xAxisLabelFontSize: 16, + /** + * | Parameter | Description | Type | Required | Values | + * | ------------- | ------------------------------- | ------- | -------- | ------------------- | + * | xAxisPosition | position of x-axis labels | string | Optional | 'top' or 'bottom' | + * + * **Notes:** + * Default value: top + */ + xAxisPosition: 'top', + /** + * | Parameter | Description | Type | Required | Values | + * | --------------- | ---------------------------------- | ------- | -------- | ------------------- | + * | yAxisLabelPadding | Padding around y-axis labels | number | Optional | Any positive number | + * + * **Notes:** + * Default value: 5 + */ + yAxisLabelPadding: 5, + /** + * | Parameter | Description | Type | Required | Values | + * | ------------------ | ---------------------------------- | ------- | -------- | ------------------- | + * | yAxisLabelFontSize | y-axis label font size | number | Optional | Any positive number | + * + * **Notes:** + * Default value: 16 + */ + yAxisLabelFontSize: 16, + /** + * | Parameter | Description | Type | Required | Values | + * | ------------- | ------------------------------- | ------- | -------- | ------------------- | + * | yAxisPosition | position of y-axis labels | string | Optional | 'left' or 'right' | + * + * **Notes:** + * Default value: left + */ + yAxisPosition: 'left', + /** + * | Parameter | Description | Type | Required | Values | + * | ---------------------- | -------------------------------------- | ------- | -------- | ------------------- | + * | pointTextPadding | padding between point and point label | number | Optional | Any positive number | + * + * **Notes:** + * Default value: 5 + */ + pointTextPadding: 5, + /** + * | Parameter | Description | Type | Required | Values | + * | ---------------------- | ---------------------- | ------- | -------- | ------------------- | + * | pointTextPadding | point title font size | number | Optional | Any positive number | + * + * **Notes:** + * Default value: 12 + */ + pointLabelFontSize: 12, + /** + * | Parameter | Description | Type | Required | Values | + * | ------------- | ------------------------------- | ------- | -------- | ------------------- | + * | pointRadius | radius of the point to be drawn | number | Optional | Any positive number | + * + * **Notes:** + * Default value: 5 + */ + pointRadius: 5, + /** + * | Parameter | Description | Type | Required | Values | + * | ----------- | ----------- | ------- | -------- | ----------- | + * | useMaxWidth | See Notes | boolean | Required | true, false | + * + * **Notes:** + * + * When this flag is set to true, the diagram width is locked to 100% and scaled based on + * available space. If set to false, the diagram reserves its absolute width. + * + * Default value: true + */ + useMaxWidth: true, + }, + + /** The object containing configurations specific for req diagrams */ + requirement: { + useWidth: undefined, + + /** + * | Parameter | Description | Type | Required | Values | + * | ----------- | ----------- | ------- | -------- | ----------- | + * | useMaxWidth | See Notes | boolean | Required | true, false | + * + * **Notes:** + * + * When this flag is set to true, the diagram width is locked to 100% and scaled based on + * available space. If set to false, the diagram reserves its absolute width. + * + * Default value: true + */ + useMaxWidth: true, + + rect_fill: '#f9f9f9', + text_color: '#333', + rect_border_size: '0.5px', + rect_border_color: '#bbb', + rect_min_width: 200, + rect_min_height: 200, + fontSize: 14, + rect_padding: 10, + line_height: 20, + }, + gitGraph: { + /** + * ### titleTopMargin + * + * | Parameter | Description | Type | Required | Values | + * | -------------- | ---------------------------------------------- | ------- | -------- | ------------------ | + * | titleTopMargin | Margin top for the text over the Git diagram | Integer | Required | Any Positive Value | + * + * **Notes:** Default value: 25 + */ + titleTopMargin: 25, + diagramPadding: 8, + nodeLabel: { + width: 75, + height: 100, + x: -25, + y: 0, + }, + mainBranchName: 'main', + mainBranchOrder: 0, + showCommitLabel: true, + showBranches: true, + rotateCommitLabel: true, + }, + + /** The object containing configurations specific for c4 diagrams */ + c4: { + useWidth: undefined, + + /** + * | Parameter | Description | Type | Required | Values | + * | -------------- | ---------------------------------------------- | ------- | -------- | ------------------ | + * | diagramMarginX | Margin to the right and left of the c4 diagram | Integer | Required | Any Positive Value | + * + * **Notes:** Default value: 50 + */ + diagramMarginX: 50, + + /** + * | Parameter | Description | Type | Required | Values | + * | -------------- | ------------------------------------------- | ------- | -------- | ------------------ | + * | diagramMarginY | Margin to the over and under the c4 diagram | Integer | Required | Any Positive Value | + * + * **Notes:** Default value: 10 + */ + diagramMarginY: 10, + + /** + * | Parameter | Description | Type | Required | Values | + * | ------------- | --------------------- | ------- | -------- | ------------------ | + * | c4ShapeMargin | Margin between shapes | Integer | Required | Any Positive Value | + * + * **Notes:** Default value: 50 + */ + c4ShapeMargin: 50, + + /** + * | Parameter | Description | Type | Required | Values | + * | -------------- | ---------------------- | ------- | -------- | ------------------ | + * | c4ShapePadding | Padding between shapes | Integer | Required | Any Positive Value | + * + * **Notes:** Default value: 20 + */ + c4ShapePadding: 20, + + /** + * | Parameter | Description | Type | Required | Values | + * | --------- | --------------------- | ------- | -------- | ------------------ | + * | width | Width of person boxes | Integer | Required | Any Positive Value | + * + * **Notes:** Default value: 216 + */ + width: 216, + + /** + * | Parameter | Description | Type | Required | Values | + * | --------- | ---------------------- | ------- | -------- | ------------------ | + * | height | Height of person boxes | Integer | Required | Any Positive Value | + * + * **Notes:** Default value: 60 + */ + height: 60, + + /** + * | Parameter | Description | Type | Required | Values | + * | --------- | ------------------- | ------- | -------- | ------------------ | + * | boxMargin | Margin around boxes | Integer | Required | Any Positive Value | + * + * **Notes:** Default value: 10 + */ + boxMargin: 10, + + /** + * | Parameter | Description | Type | Required | Values | + * | ----------- | ----------- | ------- | -------- | ----------- | + * | useMaxWidth | See Notes | boolean | Required | true, false | + * + * **Notes:** When this flag is set to true, the height and width is set to 100% and is then + * scaling with the available space. If set to false, the absolute space required is used. + * + * Default value: true + */ + useMaxWidth: true, + + /** + * | Parameter | Description | Type | Required | Values | + * | ------------ | ----------- | ------- | -------- | ------------------ | + * | c4ShapeInRow | See Notes | Integer | Required | Any Positive Value | + * + * **Notes:** How many shapes to place in each row. + * + * Default value: 4 + */ + c4ShapeInRow: 4, + + nextLinePaddingX: 0, + + /** + * | Parameter | Description | Type | Required | Values | + * | --------------- | ----------- | ------- | -------- | ------------------ | + * | c4BoundaryInRow | See Notes | Integer | Required | Any Positive Value | + * + * **Notes:** How many boundaries to place in each row. + * + * Default value: 2 + */ + c4BoundaryInRow: 2, + + /** + * This sets the font size of Person shape for the diagram + * + * **Notes:** Default value: 14. + */ + personFontSize: 14, + /** + * This sets the font family of Person shape for the diagram + * + * **Notes:** Default value: "Open Sans", sans-serif. + */ + personFontFamily: '"Open Sans", sans-serif', + /** + * This sets the font weight of Person shape for the diagram + * + * **Notes:** Default value: normal. + */ + personFontWeight: 'normal', + + /** + * This sets the font size of External Person shape for the diagram + * + * **Notes:** Default value: 14. + */ + external_personFontSize: 14, + /** + * This sets the font family of External Person shape for the diagram + * + * **Notes:** Default value: "Open Sans", sans-serif. + */ + external_personFontFamily: '"Open Sans", sans-serif', + /** + * This sets the font weight of External Person shape for the diagram + * + * **Notes:** Default value: normal. + */ + external_personFontWeight: 'normal', + + /** + * This sets the font size of System shape for the diagram + * + * **Notes:** Default value: 14. + */ + systemFontSize: 14, + /** + * This sets the font family of System shape for the diagram + * + * **Notes:** Default value: "Open Sans", sans-serif. + */ + systemFontFamily: '"Open Sans", sans-serif', + /** + * This sets the font weight of System shape for the diagram + * + * **Notes:** Default value: normal. + */ + systemFontWeight: 'normal', + + /** + * This sets the font size of External System shape for the diagram + * + * **Notes:** Default value: 14. + */ + external_systemFontSize: 14, + /** + * This sets the font family of External System shape for the diagram + * + * **Notes:** Default value: "Open Sans", sans-serif. + */ + external_systemFontFamily: '"Open Sans", sans-serif', + /** + * This sets the font weight of External System shape for the diagram + * + * **Notes:** Default value: normal. + */ + external_systemFontWeight: 'normal', + + /** + * This sets the font size of System DB shape for the diagram + * + * **Notes:** Default value: 14. + */ + system_dbFontSize: 14, + /** + * This sets the font family of System DB shape for the diagram + * + * **Notes:** Default value: "Open Sans", sans-serif. + */ + system_dbFontFamily: '"Open Sans", sans-serif', + /** + * This sets the font weight of System DB shape for the diagram + * + * **Notes:** Default value: normal. + */ + system_dbFontWeight: 'normal', + + /** + * This sets the font size of External System DB shape for the diagram + * + * **Notes:** Default value: 14. + */ + external_system_dbFontSize: 14, + /** + * This sets the font family of External System DB shape for the diagram + * + * **Notes:** Default value: "Open Sans", sans-serif. + */ + external_system_dbFontFamily: '"Open Sans", sans-serif', + /** + * This sets the font weight of External System DB shape for the diagram + * + * **Notes:** Default value: normal. + */ + external_system_dbFontWeight: 'normal', + + /** + * This sets the font size of System Queue shape for the diagram + * + * **Notes:** Default value: 14. + */ + system_queueFontSize: 14, + /** + * This sets the font family of System Queue shape for the diagram + * + * **Notes:** Default value: "Open Sans", sans-serif. + */ + system_queueFontFamily: '"Open Sans", sans-serif', + /** + * This sets the font weight of System Queue shape for the diagram + * + * **Notes:** Default value: normal. + */ + system_queueFontWeight: 'normal', + + /** + * This sets the font size of External System Queue shape for the diagram + * + * **Notes:** Default value: 14. + */ + external_system_queueFontSize: 14, + /** + * This sets the font family of External System Queue shape for the diagram + * + * **Notes:** Default value: "Open Sans", sans-serif. + */ + external_system_queueFontFamily: '"Open Sans", sans-serif', + /** + * This sets the font weight of External System Queue shape for the diagram + * + * **Notes:** Default value: normal. + */ + external_system_queueFontWeight: 'normal', + + /** + * This sets the font size of Boundary shape for the diagram + * + * **Notes:** Default value: 14. + */ + boundaryFontSize: 14, + /** + * This sets the font family of Boundary shape for the diagram + * + * **Notes:** Default value: "Open Sans", sans-serif. + */ + boundaryFontFamily: '"Open Sans", sans-serif', + /** + * This sets the font weight of Boundary shape for the diagram + * + * **Notes:** Default value: normal. + */ + boundaryFontWeight: 'normal', + + /** + * This sets the font size of Message shape for the diagram + * + * **Notes:** Default value: 12. + */ + messageFontSize: 12, + /** + * This sets the font family of Message shape for the diagram + * + * **Notes:** Default value: "Open Sans", sans-serif. + */ + messageFontFamily: '"Open Sans", sans-serif', + /** + * This sets the font weight of Message shape for the diagram + * + * **Notes:** Default value: normal. + */ + messageFontWeight: 'normal', + + /** + * This sets the font size of Container shape for the diagram + * + * **Notes:** Default value: 14. + */ + containerFontSize: 14, + /** + * This sets the font family of Container shape for the diagram + * + * **Notes:** Default value: "Open Sans", sans-serif. + */ + containerFontFamily: '"Open Sans", sans-serif', + /** + * This sets the font weight of Container shape for the diagram + * + * **Notes:** Default value: normal. + */ + containerFontWeight: 'normal', + + /** + * This sets the font size of External Container shape for the diagram + * + * **Notes:** Default value: 14. + */ + external_containerFontSize: 14, + /** + * This sets the font family of External Container shape for the diagram + * + * **Notes:** Default value: "Open Sans", sans-serif. + */ + external_containerFontFamily: '"Open Sans", sans-serif', + /** + * This sets the font weight of External Container shape for the diagram + * + * **Notes:** Default value: normal. + */ + external_containerFontWeight: 'normal', + + /** + * This sets the font size of Container DB shape for the diagram + * + * **Notes:** Default value: 14. + */ + container_dbFontSize: 14, + /** + * This sets the font family of Container DB shape for the diagram + * + * **Notes:** Default value: "Open Sans", sans-serif. + */ + container_dbFontFamily: '"Open Sans", sans-serif', + /** + * This sets the font weight of Container DB shape for the diagram + * + * **Notes:** Default value: normal. + */ + container_dbFontWeight: 'normal', + + /** + * This sets the font size of External Container DB shape for the diagram + * + * **Notes:** Default value: 14. + */ + external_container_dbFontSize: 14, + /** + * This sets the font family of External Container DB shape for the diagram + * + * **Notes:** Default value: "Open Sans", sans-serif. + */ + external_container_dbFontFamily: '"Open Sans", sans-serif', + /** + * This sets the font weight of External Container DB shape for the diagram + * + * **Notes:** Default value: normal. + */ + external_container_dbFontWeight: 'normal', + + /** + * This sets the font size of Container Queue shape for the diagram + * + * **Notes:** Default value: 14. + */ + container_queueFontSize: 14, + /** + * This sets the font family of Container Queue shape for the diagram + * + * **Notes:** Default value: "Open Sans", sans-serif. + */ + container_queueFontFamily: '"Open Sans", sans-serif', + /** + * This sets the font weight of Container Queue shape for the diagram + * + * **Notes:** Default value: normal. + */ + container_queueFontWeight: 'normal', + + /** + * This sets the font size of External Container Queue shape for the diagram + * + * **Notes:** Default value: 14. + */ + external_container_queueFontSize: 14, + /** + * This sets the font family of External Container Queue shape for the diagram + * + * **Notes:** Default value: "Open Sans", sans-serif. + */ + external_container_queueFontFamily: '"Open Sans", sans-serif', + /** + * This sets the font weight of External Container Queue shape for the diagram + * + * **Notes:** Default value: normal. + */ + external_container_queueFontWeight: 'normal', + + /** + * This sets the font size of Component shape for the diagram + * + * **Notes:** Default value: 14. + */ + componentFontSize: 14, + /** + * This sets the font family of Component shape for the diagram + * + * **Notes:** Default value: "Open Sans", sans-serif. + */ + componentFontFamily: '"Open Sans", sans-serif', + /** + * This sets the font weight of Component shape for the diagram + * + * **Notes:** Default value: normal. + */ + componentFontWeight: 'normal', + + /** + * This sets the font size of External Component shape for the diagram + * + * **Notes:** Default value: 14. + */ + external_componentFontSize: 14, + /** + * This sets the font family of External Component shape for the diagram + * + * **Notes:** Default value: "Open Sans", sans-serif. + */ + external_componentFontFamily: '"Open Sans", sans-serif', + /** + * This sets the font weight of External Component shape for the diagram + * + * **Notes:** Default value: normal. + */ + external_componentFontWeight: 'normal', + + /** + * This sets the font size of Component DB shape for the diagram + * + * **Notes:** Default value: 14. + */ + component_dbFontSize: 14, + /** + * This sets the font family of Component DB shape for the diagram + * + * **Notes:** Default value: "Open Sans", sans-serif. + */ + component_dbFontFamily: '"Open Sans", sans-serif', + /** + * This sets the font weight of Component DB shape for the diagram + * + * **Notes:** Default value: normal. + */ + component_dbFontWeight: 'normal', + + /** + * This sets the font size of External Component DB shape for the diagram + * + * **Notes:** Default value: 14. + */ + external_component_dbFontSize: 14, + /** + * This sets the font family of External Component DB shape for the diagram + * + * **Notes:** Default value: "Open Sans", sans-serif. + */ + external_component_dbFontFamily: '"Open Sans", sans-serif', + /** + * This sets the font weight of External Component DB shape for the diagram + * + * **Notes:** Default value: normal. + */ + external_component_dbFontWeight: 'normal', + + /** + * This sets the font size of Component Queue shape for the diagram + * + * **Notes:** Default value: 14. + */ + component_queueFontSize: 14, + /** + * This sets the font family of Component Queue shape for the diagram + * + * **Notes:** Default value: "Open Sans", sans-serif. + */ + component_queueFontFamily: '"Open Sans", sans-serif', + /** + * This sets the font weight of Component Queue shape for the diagram + * + * **Notes:** Default value: normal. + */ + component_queueFontWeight: 'normal', + + /** + * This sets the font size of External Component Queue shape for the diagram + * + * **Notes:** Default value: 14. + */ + external_component_queueFontSize: 14, + /** + * This sets the font family of External Component Queue shape for the diagram + * + * **Notes:** Default value: "Open Sans", sans-serif. + */ + external_component_queueFontFamily: '"Open Sans", sans-serif', + /** + * This sets the font weight of External Component Queue shape for the diagram + * + * **Notes:** Default value: normal. + */ + external_component_queueFontWeight: 'normal', + + /** + * This sets the auto-wrap state for the diagram + * + * **Notes:** Default value: true. + */ + wrap: true, + + /** + * This sets the auto-wrap padding for the diagram (sides only) + * + * **Notes:** Default value: 0. + */ + wrapPadding: 10, + + personFont: function () { + return { + fontFamily: this.personFontFamily, + fontSize: this.personFontSize, + fontWeight: this.personFontWeight, + }; + }, + + external_personFont: function () { + return { + fontFamily: this.external_personFontFamily, + fontSize: this.external_personFontSize, + fontWeight: this.external_personFontWeight, + }; + }, + + systemFont: function () { + return { + fontFamily: this.systemFontFamily, + fontSize: this.systemFontSize, + fontWeight: this.systemFontWeight, + }; + }, + + external_systemFont: function () { + return { + fontFamily: this.external_systemFontFamily, + fontSize: this.external_systemFontSize, + fontWeight: this.external_systemFontWeight, + }; + }, + + system_dbFont: function () { + return { + fontFamily: this.system_dbFontFamily, + fontSize: this.system_dbFontSize, + fontWeight: this.system_dbFontWeight, + }; + }, + + external_system_dbFont: function () { + return { + fontFamily: this.external_system_dbFontFamily, + fontSize: this.external_system_dbFontSize, + fontWeight: this.external_system_dbFontWeight, + }; + }, + + system_queueFont: function () { + return { + fontFamily: this.system_queueFontFamily, + fontSize: this.system_queueFontSize, + fontWeight: this.system_queueFontWeight, + }; + }, + + external_system_queueFont: function () { + return { + fontFamily: this.external_system_queueFontFamily, + fontSize: this.external_system_queueFontSize, + fontWeight: this.external_system_queueFontWeight, + }; + }, + + containerFont: function () { + return { + fontFamily: this.containerFontFamily, + fontSize: this.containerFontSize, + fontWeight: this.containerFontWeight, + }; + }, + + external_containerFont: function () { + return { + fontFamily: this.external_containerFontFamily, + fontSize: this.external_containerFontSize, + fontWeight: this.external_containerFontWeight, + }; + }, + + container_dbFont: function () { + return { + fontFamily: this.container_dbFontFamily, + fontSize: this.container_dbFontSize, + fontWeight: this.container_dbFontWeight, + }; + }, + + external_container_dbFont: function () { + return { + fontFamily: this.external_container_dbFontFamily, + fontSize: this.external_container_dbFontSize, + fontWeight: this.external_container_dbFontWeight, + }; + }, + + container_queueFont: function () { + return { + fontFamily: this.container_queueFontFamily, + fontSize: this.container_queueFontSize, + fontWeight: this.container_queueFontWeight, + }; + }, + + external_container_queueFont: function () { + return { + fontFamily: this.external_container_queueFontFamily, + fontSize: this.external_container_queueFontSize, + fontWeight: this.external_container_queueFontWeight, + }; + }, + + componentFont: function () { + return { + fontFamily: this.componentFontFamily, + fontSize: this.componentFontSize, + fontWeight: this.componentFontWeight, + }; + }, + + external_componentFont: function () { + return { + fontFamily: this.external_componentFontFamily, + fontSize: this.external_componentFontSize, + fontWeight: this.external_componentFontWeight, + }; + }, + + component_dbFont: function () { + return { + fontFamily: this.component_dbFontFamily, + fontSize: this.component_dbFontSize, + fontWeight: this.component_dbFontWeight, + }; + }, + + external_component_dbFont: function () { + return { + fontFamily: this.external_component_dbFontFamily, + fontSize: this.external_component_dbFontSize, + fontWeight: this.external_component_dbFontWeight, + }; + }, + + component_queueFont: function () { + return { + fontFamily: this.component_queueFontFamily, + fontSize: this.component_queueFontSize, + fontWeight: this.component_queueFontWeight, + }; + }, + + external_component_queueFont: function () { + return { + fontFamily: this.external_component_queueFontFamily, + fontSize: this.external_component_queueFontSize, + fontWeight: this.external_component_queueFontWeight, + }; + }, + + boundaryFont: function () { + return { + fontFamily: this.boundaryFontFamily, + fontSize: this.boundaryFontSize, + fontWeight: this.boundaryFontWeight, + }; + }, + + messageFont: function () { + return { + fontFamily: this.messageFontFamily, + fontSize: this.messageFontSize, + fontWeight: this.messageFontWeight, + }; + }, + + // ' Colors + // ' ################################## + person_bg_color: '#08427B', + person_border_color: '#073B6F', + external_person_bg_color: '#686868', + external_person_border_color: '#8A8A8A', + system_bg_color: '#1168BD', + system_border_color: '#3C7FC0', + system_db_bg_color: '#1168BD', + system_db_border_color: '#3C7FC0', + system_queue_bg_color: '#1168BD', + system_queue_border_color: '#3C7FC0', + external_system_bg_color: '#999999', + external_system_border_color: '#8A8A8A', + external_system_db_bg_color: '#999999', + external_system_db_border_color: '#8A8A8A', + external_system_queue_bg_color: '#999999', + external_system_queue_border_color: '#8A8A8A', + container_bg_color: '#438DD5', + container_border_color: '#3C7FC0', + container_db_bg_color: '#438DD5', + container_db_border_color: '#3C7FC0', + container_queue_bg_color: '#438DD5', + container_queue_border_color: '#3C7FC0', + external_container_bg_color: '#B3B3B3', + external_container_border_color: '#A6A6A6', + external_container_db_bg_color: '#B3B3B3', + external_container_db_border_color: '#A6A6A6', + external_container_queue_bg_color: '#B3B3B3', + external_container_queue_border_color: '#A6A6A6', + component_bg_color: '#85BBF0', + component_border_color: '#78A8D8', + component_db_bg_color: '#85BBF0', + component_db_border_color: '#78A8D8', + component_queue_bg_color: '#85BBF0', + component_queue_border_color: '#78A8D8', + external_component_bg_color: '#CCCCCC', + external_component_border_color: '#BFBFBF', + external_component_db_bg_color: '#CCCCCC', + external_component_db_border_color: '#BFBFBF', + external_component_queue_bg_color: '#CCCCCC', + external_component_queue_border_color: '#BFBFBF', + }, + mindmap: { + useMaxWidth: true, + padding: 10, + maxNodeWidth: 200, + }, + sankey: { + width: 600, + height: 400, + linkColor: 'gradient', + nodeAlignment: 'justify', + useMaxWidth: false, + }, + fontSize: 16, +}; + +if (config.class) { + config.class.arrowMarkerAbsolute = config.arrowMarkerAbsolute; +} +if (config.gitGraph) { + config.gitGraph.arrowMarkerAbsolute = config.arrowMarkerAbsolute; +} + +const keyify = (obj: any, prefix = ''): string[] => + Object.keys(obj).reduce((res: string[], el): string[] => { + if (Array.isArray(obj[el])) { + return res; + } else if (typeof obj[el] === 'object' && obj[el] !== null) { + return [...res, prefix + el, ...keyify(obj[el], '')]; + } + return [...res, prefix + el]; + }, []); + +export const configKeys: string[] = keyify(config, ''); +export default config; From 70a5a1327364d0e41bc600b2a5f79223b8203df0 Mon Sep 17 00:00:00 2001 From: Alois Klink Date: Sun, 19 Feb 2023 22:08:07 +0000 Subject: [PATCH 22/31] docs: add link to mermaid config docs in sidebar --- packages/mermaid/src/docs/.vitepress/config.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/mermaid/src/docs/.vitepress/config.ts b/packages/mermaid/src/docs/.vitepress/config.ts index 2b2914ca3..330b088d9 100644 --- a/packages/mermaid/src/docs/.vitepress/config.ts +++ b/packages/mermaid/src/docs/.vitepress/config.ts @@ -155,6 +155,7 @@ function sidebarConfig() { { text: 'Tutorials', link: '/config/Tutorials' }, { text: 'API-Usage', link: '/config/usage' }, { text: 'Mermaid API Configuration', link: '/config/setup/README' }, + { text: 'Mermaid Configuration Options', link: '/config/schema-docs/config' }, { text: 'Directives', link: '/config/directives' }, { text: 'Theming', link: '/config/theming' }, { text: 'Accessibility', link: '/config/accessibility' }, From 23d6a0dab71b89c53119dc7147fc6e0f769cabbb Mon Sep 17 00:00:00 2001 From: Alois Klink Date: Mon, 20 Feb 2023 03:54:59 +0000 Subject: [PATCH 23/31] ci(lint): check if MermaidConfig types are in sync Add a CI check that runs `pnpm run --filter mermaid types:verify-config` and checks whether the MermaidConfig TypeScript types are in sync with the MermaidConfig JSON Schema. --- .github/workflows/lint.yml | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml index 53b7f484d..493bacaf7 100644 --- a/.github/workflows/lint.yml +++ b/.github/workflows/lint.yml @@ -53,6 +53,19 @@ jobs: exit 1 fi + - name: Verify `./src/config.type.ts` is in sync with `./src/schemas/config.schema.yaml` + shell: bash + run: | + if ! pnpm run --filter mermaid types:verify-config; then + ERROR_MESSAGE='Running `pnpm run --filter mermaid types:verify-config` failed.' + ERROR_MESSAGE+=' This should be fixed by running' + ERROR_MESSAGE+=' `pnpm run --filter mermaid types:build-config`' + ERROR_MESSAGE+=' on your local machine.' + echo "::error title=Lint failure::${ERROR_MESSAGE}" + # make sure to return an error exitcode so that GitHub actions shows a red-cross + exit 1 + fi + - name: Verify Docs id: verifyDocs working-directory: ./packages/mermaid From c29088af019a8180ac2f85d79b890cab4cd5fee5 Mon Sep 17 00:00:00 2001 From: Alois Klink Date: Sun, 26 Feb 2023 02:51:11 +0000 Subject: [PATCH 24/31] build(docs): fix links to `config.schema.json` Fix the link in some Mermaid Config markdown documentation, which previously pointed to `src/schemas/config.schema.yaml`, which went nowhere. Now, these links point to: - config.schema.json (i.e. the generated JSON file, not YAML) - links are relative to the markdown documentation We also needed to store the `schema.json` file in the Vitepress `public/` folder, as Vitepress otherwise doesn't bundle `.json` files properly, when running `vitepress build src/vitepress`. --- packages/mermaid/src/docs.mts | 36 ++++++++++++++++++++++++++++++++--- 1 file changed, 33 insertions(+), 3 deletions(-) diff --git a/packages/mermaid/src/docs.mts b/packages/mermaid/src/docs.mts index 1a5ed5ea0..7ee6e50c8 100644 --- a/packages/mermaid/src/docs.mts +++ b/packages/mermaid/src/docs.mts @@ -345,13 +345,30 @@ async function transormJsonSchema(file: string) { schema: JSON_SCHEMA, }); + /** Location of the `schema.yaml` files */ + const SCHEMA_INPUT_DIR = 'src/schemas/'; + /** + * Location to store the generated `schema.json` file for the website + * + * Because Vitepress doesn't handle bundling `.json` files properly, we need + * to instead place it into a `public/` subdirectory. + */ + const SCHEMA_OUTPUT_DIR = 'src/docs/public/schemas/'; + const VITEPRESS_PUBLIC_DIR = 'src/docs/public'; + /** + * Location to store the generated Schema Markdown docs. + * Links to JSON Schemas should automatically be rewritten to point to + * `SCHEMA_OUTPUT_DIR`. + */ + const SCHEMA_MARKDOWN_OUTPUT_DIR = join('src', 'docs', 'config', 'schema-docs'); + // write .schema.json files const jsonFileName = file .replace('.schema.yaml', '.schema.json') - .replace('src/schemas/', 'src/docs/schemas/'); + .replace(SCHEMA_INPUT_DIR, SCHEMA_OUTPUT_DIR); copyTransformedContents(jsonFileName, !verifyOnly, JSON.stringify(jsonSchema, undefined, 2)); - const schemas = traverseSchemas([schemaLoader()(file, jsonSchema)]); + const schemas = traverseSchemas([schemaLoader()(jsonFileName, jsonSchema)]); // ignore output of this function // for some reason, without calling this function, we get some broken links @@ -365,6 +382,19 @@ async function transormJsonSchema(file: string) { includeProperties: ['tsType'], // Custom TypeScript type exampleFormat: 'json', // skipProperties, + /** + * Automatically rewrite schema paths passed to `schemaLoader` + * (e.g. src/docs/schemas/config.schema.json) + * to relative links (e.g. /schemas/config.schema.json) + * + * See https://vitepress.vuejs.org/guide/asset-handling + * + * @param origin - Original schema path (relative to this script). + * @returns New absolute Vitepress path to schema + */ + rewritelinks: (origin: string) => { + return `/${relative(VITEPRESS_PUBLIC_DIR, origin)}`; + }, })(schemas); for (const [name, markdownAst] of Object.entries(markdownFiles)) { @@ -405,7 +435,7 @@ async function transormJsonSchema(file: string) { parser: 'markdown', ...prettierConfig, }); - const newFileName = join('src', 'docs', 'config', 'schema-docs', `${name}.md`); + const newFileName = join(SCHEMA_MARKDOWN_OUTPUT_DIR, `${name}.md`); copyTransformedContents(newFileName, !verifyOnly, formatted); } } From d2e62022f1c55d667b3e031c6d9a7fd04c7cd2a7 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Thu, 6 Jul 2023 11:09:09 +0530 Subject: [PATCH 25/31] Avoid downloading avtars everytime on docs:dev --- packages/mermaid/package.json | 2 +- packages/mermaid/src/docs.mts | 16 +-- .../src/docs/.vitepress/contributors.ts | 112 +----------------- packages/mermaid/src/docs/.vitepress/data.ts | 110 +++++++++++++++++ .../.vitepress/scripts/fetch-contributors.ts | 12 +- 5 files changed, 131 insertions(+), 121 deletions(-) create mode 100644 packages/mermaid/src/docs/.vitepress/data.ts diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json index e630f80fb..0f9337708 100644 --- a/packages/mermaid/package.json +++ b/packages/mermaid/package.json @@ -27,7 +27,7 @@ "docs:code": "typedoc src/defaultConfig.ts src/config.ts src/mermaidAPI.ts && prettier --write ./src/docs/config/setup", "docs:build": "rimraf ../../docs && pnpm docs:spellcheck && pnpm docs:code && ts-node-esm src/docs.mts", "docs:verify": "pnpm docs:spellcheck && pnpm docs:code && ts-node-esm src/docs.mts --verify", - "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:pre:vitepress": "pnpm --filter ./src/docs prefetch && 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\"", diff --git a/packages/mermaid/src/docs.mts b/packages/mermaid/src/docs.mts index f6efc1169..7e701bb20 100644 --- a/packages/mermaid/src/docs.mts +++ b/packages/mermaid/src/docs.mts @@ -362,15 +362,15 @@ const transformHtml = (filename: string) => { }; const getGlobs = (globs: string[]): string[] => { - globs.push( - '!**/dist/**', - '!**/redirect.spec.ts', - '!**/landing/**', - '!**/node_modules/**', - '!**/user-avatars/**' - ); + globs.push('!**/dist/**', '!**/redirect.spec.ts', '!**/landing/**', '!**/node_modules/**'); if (!vitepress) { - globs.push('!**/.vitepress/**', '!**/vite.config.ts', '!src/docs/index.md', '!**/package.json'); + globs.push( + '!**/.vitepress/**', + '!**/vite.config.ts', + '!src/docs/index.md', + '!**/package.json', + '!**/user-avatars/**' + ); } return globs; }; diff --git a/packages/mermaid/src/docs/.vitepress/contributors.ts b/packages/mermaid/src/docs/.vitepress/contributors.ts index bef2c1311..5a80ac3fe 100644 --- a/packages/mermaid/src/docs/.vitepress/contributors.ts +++ b/packages/mermaid/src/docs/.vitepress/contributors.ts @@ -1,30 +1,5 @@ import contributorUsernamesJson from './contributor-names.json'; - -export interface Contributor { - name: string; - avatar: string; -} - -export interface SocialEntry { - icon: string | { svg: string }; - link: string; -} - -export interface CoreTeam { - name: string; - // required to download avatars from GitHub - github: string; - avatar?: string; - twitter?: string; - mastodon?: string; - sponsor?: string; - website?: string; - linkedIn?: string; - title?: string; - org?: string; - desc?: string; - links?: SocialEntry[]; -} +import { CoreTeam, knut, plainTeamMembers } from './data.js'; const contributorUsernames: string[] = contributorUsernamesJson; @@ -54,91 +29,6 @@ const createLinks = (tm: CoreTeam): CoreTeam => { return tm; }; -const knut: CoreTeam = { - github: 'knsv', - name: 'Knut Sveidqvist', - title: 'Creator', - twitter: 'knutsveidqvist', - sponsor: 'https://github.com/sponsors/knsv', -}; - -const plainTeamMembers: CoreTeam[] = [ - { - github: 'NeilCuzon', - name: 'Neil Cuzon', - title: 'Developer', - }, - { - github: 'tylerlong', - name: 'Tyler Liu', - title: 'Developer', - }, - { - github: 'sidharthv96', - name: 'Sidharth Vinod', - title: 'Developer', - twitter: 'sidv42', - mastodon: 'https://techhub.social/@sidv', - sponsor: 'https://github.com/sponsors/sidharthv96', - linkedIn: 'sidharth-vinod', - website: 'https://sidharth.dev', - }, - { - github: 'ashishjain0512', - name: 'Ashish Jain', - title: 'Developer', - }, - { - github: 'mmorel-35', - name: 'Matthieu Morel', - title: 'Developer', - linkedIn: 'matthieumorel35', - }, - { - github: 'aloisklink', - name: 'Alois Klink', - title: 'Developer', - linkedIn: 'aloisklink', - website: 'https://aloisklink.com', - }, - { - github: 'pbrolin47', - name: 'Per Brolin', - title: 'Developer', - }, - { - github: 'Yash-Singh1', - name: 'Yash Singh', - title: 'Developer', - }, - { - github: 'GDFaber', - name: 'Marc Faber', - title: 'Developer', - linkedIn: 'marc-faber', - }, - { - github: 'MindaugasLaganeckas', - name: 'Mindaugas Laganeckas', - title: 'Developer', - }, - { - github: 'jgreywolf', - name: 'Justin Greywolf', - title: 'Developer', - }, - { - github: 'IOrlandoni', - name: 'Nacho Orlandoni', - title: 'Developer', - }, - { - github: 'huynhicode', - name: 'Steph Huynh', - title: 'Developer', - }, -]; - const teamMembers = plainTeamMembers.map((tm) => createLinks(tm)); teamMembers.sort( (a, b) => contributorUsernames.indexOf(a.github) - contributorUsernames.indexOf(b.github) diff --git a/packages/mermaid/src/docs/.vitepress/data.ts b/packages/mermaid/src/docs/.vitepress/data.ts new file mode 100644 index 000000000..e8bb07ce8 --- /dev/null +++ b/packages/mermaid/src/docs/.vitepress/data.ts @@ -0,0 +1,110 @@ +export interface Contributor { + name: string; + avatar: string; +} + +export interface SocialEntry { + icon: string | { svg: string }; + link: string; +} + +export interface CoreTeam { + name: string; + // required to download avatars from GitHub + github: string; + avatar?: string; + twitter?: string; + mastodon?: string; + sponsor?: string; + website?: string; + linkedIn?: string; + title?: string; + org?: string; + desc?: string; + links?: SocialEntry[]; +} + +export const knut: CoreTeam = { + github: 'knsv', + name: 'Knut Sveidqvist', + title: 'Creator', + twitter: 'knutsveidqvist', + sponsor: 'https://github.com/sponsors/knsv', +}; + +export const plainTeamMembers: CoreTeam[] = [ + { + github: 'NeilCuzon', + name: 'Neil Cuzon', + title: 'Developer', + }, + { + github: 'tylerlong', + name: 'Tyler Liu', + title: 'Developer', + }, + { + github: 'sidharthv96', + name: 'Sidharth Vinod', + title: 'Developer', + twitter: 'sidv42', + mastodon: 'https://techhub.social/@sidv', + sponsor: 'https://github.com/sponsors/sidharthv96', + linkedIn: 'sidharth-vinod', + website: 'https://sidharth.dev', + }, + { + github: 'ashishjain0512', + name: 'Ashish Jain', + title: 'Developer', + }, + { + github: 'mmorel-35', + name: 'Matthieu Morel', + title: 'Developer', + linkedIn: 'matthieumorel35', + }, + { + github: 'aloisklink', + name: 'Alois Klink', + title: 'Developer', + linkedIn: 'aloisklink', + website: 'https://aloisklink.com', + }, + { + github: 'pbrolin47', + name: 'Per Brolin', + title: 'Developer', + }, + { + github: 'Yash-Singh1', + name: 'Yash Singh', + title: 'Developer', + }, + { + github: 'GDFaber', + name: 'Marc Faber', + title: 'Developer', + linkedIn: 'marc-faber', + }, + { + github: 'MindaugasLaganeckas', + name: 'Mindaugas Laganeckas', + title: 'Developer', + }, + { + github: 'jgreywolf', + name: 'Justin Greywolf', + title: 'Developer', + }, + { + github: 'IOrlandoni', + name: 'Nacho Orlandoni', + title: 'Developer', + }, + { + github: 'huynhicode', + name: 'Steph Huynh', + title: 'Developer', + }, +]; diff --git a/packages/mermaid/src/docs/.vitepress/scripts/fetch-contributors.ts b/packages/mermaid/src/docs/.vitepress/scripts/fetch-contributors.ts index a810fc30f..53df066c9 100644 --- a/packages/mermaid/src/docs/.vitepress/scripts/fetch-contributors.ts +++ b/packages/mermaid/src/docs/.vitepress/scripts/fetch-contributors.ts @@ -1,6 +1,8 @@ // Adapted from https://github.dev/vitest-dev/vitest/blob/991ff33ab717caee85ef6cbe1c16dc514186b4cc/scripts/update-contributors.ts#L6 import { writeFile } from 'node:fs/promises'; +import { knut, plainTeamMembers } from '../data.js'; +import { existsSync } from 'node:fs'; const pathContributors = new URL('../contributor-names.json', import.meta.url); @@ -35,7 +37,15 @@ async function fetchContributors() { } async function generate() { - const collaborators = await fetchContributors(); + if (existsSync(pathContributors)) { + // Only fetch contributors once, when running locally. + // In CI, the file won't exist, so it'll fetch every time as expected. + return; + } + // Will fetch all contributors only in CI to speed up local development. + const collaborators = process.env.CI + ? await fetchContributors() + : [knut, ...plainTeamMembers].map((m) => m.github); await writeFile(pathContributors, JSON.stringify(collaborators, null, 2) + '\n', 'utf8'); } From db30f21ac5a6aefa7988bcc90c6fd626baef51d9 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Thu, 6 Jul 2023 11:16:41 +0530 Subject: [PATCH 26/31] Turn off codecov project status check --- .github/codecov.yaml | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/.github/codecov.yaml b/.github/codecov.yaml index 3db0811ad..950edb6a9 100644 --- a/.github/codecov.yaml +++ b/.github/codecov.yaml @@ -11,5 +11,7 @@ comment: coverage: status: project: - default: - threshold: 2% + off + # Turing off for now as code coverage isn't stable and causes unnecessary build failures. + # default: + # threshold: 2% From 4d0c461fa3ac64e2bba9d1cfd400ce5ddb82b7da Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Thu, 6 Jul 2023 11:32:37 +0530 Subject: [PATCH 27/31] chore: Reduce codecov pushes pushes to non-develop branches will not send coverage reports. This might reduce the coverage variability issue we're having. --- .github/workflows/e2e.yml | 3 ++- .github/workflows/test.yml | 2 ++ 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml index 63e20e575..6777a1e4f 100644 --- a/.github/workflows/e2e.yml +++ b/.github/workflows/e2e.yml @@ -47,7 +47,8 @@ jobs: VITEST_COVERAGE: true - name: Upload Coverage to Codecov uses: codecov/codecov-action@v3 - if: steps.cypress.conclusion == 'success' + # Run step only pushes to develop and pull_requests + if: ${{ steps.cypress.conclusion == 'success' && (github.event_name == 'pull_request' || github.ref == 'refs/heads/develop')}} with: files: coverage/cypress/lcov.info flags: e2e diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml index ba77d83bc..7c32795e8 100644 --- a/.github/workflows/test.yml +++ b/.github/workflows/test.yml @@ -43,6 +43,8 @@ jobs: - name: Upload Coverage to Codecov uses: codecov/codecov-action@v3 + # Run step only pushes to develop and pull_requests + if: ${{ github.event_name == 'pull_request' || github.ref == 'refs/heads/develop' }} with: files: ./coverage/vitest/lcov.info flags: unit From aaec16ed6c743ab8a787f2cbc942c9a84044f823 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Thu, 6 Jul 2023 11:58:55 +0530 Subject: [PATCH 28/31] chore: Remove lint warnings in example-diagram --- .prettierignore | 3 ++- packages/mermaid-example-diagram/src/exampleDiagramDb.js | 1 - packages/mermaid-example-diagram/src/exampleDiagramRenderer.js | 1 - packages/mermaid-example-diagram/src/mermaidUtils.ts | 2 +- 4 files changed, 3 insertions(+), 4 deletions(-) diff --git a/.prettierignore b/.prettierignore index b50a94e84..61ba3d013 100644 --- a/.prettierignore +++ b/.prettierignore @@ -5,5 +5,6 @@ coverage # Autogenerated by PNPM pnpm-lock.yaml stats -packages/mermaid/src/docs/.vitepress/components.d.ts +**/.vitepress/components.d.ts +**/.vitepress/cache .nyc_output diff --git a/packages/mermaid-example-diagram/src/exampleDiagramDb.js b/packages/mermaid-example-diagram/src/exampleDiagramDb.js index a5fa88e6d..21ba9e248 100644 --- a/packages/mermaid-example-diagram/src/exampleDiagramDb.js +++ b/packages/mermaid-example-diagram/src/exampleDiagramDb.js @@ -22,7 +22,6 @@ export const setInfo = (inf) => { info = inf; }; -/** @returns Returns the info flag */ export const getInfo = () => { return info; }; diff --git a/packages/mermaid-example-diagram/src/exampleDiagramRenderer.js b/packages/mermaid-example-diagram/src/exampleDiagramRenderer.js index 2c6839203..9b3854aaf 100644 --- a/packages/mermaid-example-diagram/src/exampleDiagramRenderer.js +++ b/packages/mermaid-example-diagram/src/exampleDiagramRenderer.js @@ -8,7 +8,6 @@ import { log, getConfig, setupGraphViewbox } from './mermaidUtils.js'; * @param {any} text * @param {any} id * @param {any} version - * @param diagObj */ export const draw = (text, id, version) => { try { diff --git a/packages/mermaid-example-diagram/src/mermaidUtils.ts b/packages/mermaid-example-diagram/src/mermaidUtils.ts index 44cc85f73..eeeca05c5 100644 --- a/packages/mermaid-example-diagram/src/mermaidUtils.ts +++ b/packages/mermaid-example-diagram/src/mermaidUtils.ts @@ -1,3 +1,4 @@ +/* eslint-disable @typescript-eslint/no-explicit-any */ const warning = (s: string) => { // Todo remove debug code // eslint-disable-next-line no-console @@ -28,7 +29,6 @@ export let setLogLevel: (level: keyof typeof LEVELS | number | string) => void; export let getConfig: () => object; export let sanitizeText: (str: string) => string; export let commonDb: () => object; -// eslint-disable @typescript-eslint/no-explicit-any export let setupGraphViewbox: ( graph: any, svgElem: any, From c17dc15c572208f3a1ffc084dd781a56a5e0b60b Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Thu, 6 Jul 2023 15:54:27 +0530 Subject: [PATCH 29/31] chore: Rename to teamMembers --- packages/mermaid/src/docs/.vitepress/contributors.ts | 2 +- .../mermaid/src/docs/.vitepress/scripts/fetch-contributors.ts | 2 +- .../mermaid/src/docs/.vitepress/{data.ts => teamMembers.ts} | 0 3 files changed, 2 insertions(+), 2 deletions(-) rename packages/mermaid/src/docs/.vitepress/{data.ts => teamMembers.ts} (100%) diff --git a/packages/mermaid/src/docs/.vitepress/contributors.ts b/packages/mermaid/src/docs/.vitepress/contributors.ts index 5a80ac3fe..724b48fcb 100644 --- a/packages/mermaid/src/docs/.vitepress/contributors.ts +++ b/packages/mermaid/src/docs/.vitepress/contributors.ts @@ -1,5 +1,5 @@ import contributorUsernamesJson from './contributor-names.json'; -import { CoreTeam, knut, plainTeamMembers } from './data.js'; +import { CoreTeam, knut, plainTeamMembers } from './teamMembers.js'; const contributorUsernames: string[] = contributorUsernamesJson; diff --git a/packages/mermaid/src/docs/.vitepress/scripts/fetch-contributors.ts b/packages/mermaid/src/docs/.vitepress/scripts/fetch-contributors.ts index 53df066c9..da7621b29 100644 --- a/packages/mermaid/src/docs/.vitepress/scripts/fetch-contributors.ts +++ b/packages/mermaid/src/docs/.vitepress/scripts/fetch-contributors.ts @@ -1,7 +1,7 @@ // Adapted from https://github.dev/vitest-dev/vitest/blob/991ff33ab717caee85ef6cbe1c16dc514186b4cc/scripts/update-contributors.ts#L6 import { writeFile } from 'node:fs/promises'; -import { knut, plainTeamMembers } from '../data.js'; +import { knut, plainTeamMembers } from '../teamMembers.js'; import { existsSync } from 'node:fs'; const pathContributors = new URL('../contributor-names.json', import.meta.url); diff --git a/packages/mermaid/src/docs/.vitepress/data.ts b/packages/mermaid/src/docs/.vitepress/teamMembers.ts similarity index 100% rename from packages/mermaid/src/docs/.vitepress/data.ts rename to packages/mermaid/src/docs/.vitepress/teamMembers.ts From d4281d365d09f8b2ae2fd7136cc91002be117e66 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Thu, 6 Jul 2023 21:29:40 +0530 Subject: [PATCH 30/31] Add Yokozuna59 & nirname --- cSpell.json | 6 ++++++ .../src/docs/.vitepress/contributors.ts | 1 + .../src/docs/.vitepress/teamMembers.ts | 21 +++++++------------ 3 files changed, 15 insertions(+), 13 deletions(-) diff --git a/cSpell.json b/cSpell.json index 690c2bd33..abcfa0383 100644 --- a/cSpell.json +++ b/cSpell.json @@ -89,6 +89,8 @@ "mult", "neurodiverse", "nextra", + "nikolay", + "nirname", "orlandoni", "pathe", "pbrolin", @@ -102,9 +104,11 @@ "ranksep", "rect", "rects", + "reda", "redmine", "rehype", "roledescription", + "rozhkov", "sandboxed", "sankey", "setupgraphviewbox", @@ -121,6 +125,7 @@ "stylis", "subhash-halder", "substate", + "sulais", "sveidqvist", "swimm", "techn", @@ -144,6 +149,7 @@ "vueuse", "xlink", "yash", + "yokozuna", "zenuml" ], "patterns": [ diff --git a/packages/mermaid/src/docs/.vitepress/contributors.ts b/packages/mermaid/src/docs/.vitepress/contributors.ts index 724b48fcb..93eeee2e2 100644 --- a/packages/mermaid/src/docs/.vitepress/contributors.ts +++ b/packages/mermaid/src/docs/.vitepress/contributors.ts @@ -13,6 +13,7 @@ const websiteSVG = { const createLinks = (tm: CoreTeam): CoreTeam => { tm.avatar = `/user-avatars/${tm.github}.png`; + tm.title = tm.title ?? 'Developer'; tm.links = [{ icon: 'github', link: `https://github.com/${tm.github}` }]; if (tm.mastodon) { tm.links.push({ icon: 'mastodon', link: tm.mastodon }); diff --git a/packages/mermaid/src/docs/.vitepress/teamMembers.ts b/packages/mermaid/src/docs/.vitepress/teamMembers.ts index e8bb07ce8..d95f49ed8 100644 --- a/packages/mermaid/src/docs/.vitepress/teamMembers.ts +++ b/packages/mermaid/src/docs/.vitepress/teamMembers.ts @@ -36,17 +36,14 @@ export const plainTeamMembers: CoreTeam[] = [ { github: 'NeilCuzon', name: 'Neil Cuzon', - title: 'Developer', }, { github: 'tylerlong', name: 'Tyler Liu', - title: 'Developer', }, { github: 'sidharthv96', name: 'Sidharth Vinod', - title: 'Developer', twitter: 'sidv42', mastodon: 'https://techhub.social/@sidv', sponsor: 'https://github.com/sponsors/sidharthv96', @@ -56,55 +53,53 @@ export const plainTeamMembers: CoreTeam[] = [ { github: 'ashishjain0512', name: 'Ashish Jain', - title: 'Developer', }, { github: 'mmorel-35', name: 'Matthieu Morel', - title: 'Developer', linkedIn: 'matthieumorel35', }, { github: 'aloisklink', name: 'Alois Klink', - title: 'Developer', linkedIn: 'aloisklink', website: 'https://aloisklink.com', }, { github: 'pbrolin47', name: 'Per Brolin', - title: 'Developer', }, { github: 'Yash-Singh1', name: 'Yash Singh', - title: 'Developer', }, { github: 'GDFaber', name: 'Marc Faber', - title: 'Developer', linkedIn: 'marc-faber', }, { github: 'MindaugasLaganeckas', name: 'Mindaugas Laganeckas', - title: 'Developer', }, { github: 'jgreywolf', name: 'Justin Greywolf', - title: 'Developer', }, { github: 'IOrlandoni', name: 'Nacho Orlandoni', - title: 'Developer', }, { github: 'huynhicode', name: 'Steph Huynh', - title: 'Developer', + }, + { + github: 'Yokozuna59', + name: 'Reda Al Sulais', + }, + { + github: 'nirname', + name: 'Nikolay Rozhkov', }, ]; From bcffff3b7be95a77717538ac8d009103d2a0dff2 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Thu, 6 Jul 2023 21:36:10 +0530 Subject: [PATCH 31/31] Terminate build in CI if download fails --- .../mermaid/src/docs/.vitepress/scripts/fetch-avatars.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/mermaid/src/docs/.vitepress/scripts/fetch-avatars.ts b/packages/mermaid/src/docs/.vitepress/scripts/fetch-avatars.ts index 47f371fee..cd78be782 100644 --- a/packages/mermaid/src/docs/.vitepress/scripts/fetch-avatars.ts +++ b/packages/mermaid/src/docs/.vitepress/scripts/fetch-avatars.ts @@ -19,6 +19,10 @@ async function download(url: string, fileName: URL) { await writeFile(fileName, Buffer.from(await image.arrayBuffer())); } catch (error) { console.error('failed to load', url, error); + // Exit the build process if we are in CI + if (process.env.CI) { + throw error; + } } } @@ -32,7 +36,7 @@ async function fetchAvatars() { download(`https://github.com/${name}.png?size=100`, getAvatarPath(name)); }); - await Promise.all(avatars); + await Promise.allSettled(avatars); } fetchAvatars();