diff --git a/.eslintrc.cjs b/.eslintrc.cjs index e6f99a8bf..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', @@ -123,6 +127,14 @@ module.exports = { files: ['*.{ts,tsx}'], plugins: ['tsdoc'], rules: { + 'no-restricted-syntax': [ + 'error', + { + selector: 'TSEnumDeclaration', + message: + 'Prefer using TypeScript union types over TypeScript enum, since TypeScript enums have a bunch of issues, see https://dev.to/dvddpl/whats-the-problem-with-typescript-enums-2okj', + }, + ], 'tsdoc/syntax': 'error', }, }, diff --git a/.github/ISSUE_TEMPLATE/bug_report.yml b/.github/ISSUE_TEMPLATE/bug_report.yml index 1b84bfd45..2f87cd60c 100644 --- a/.github/ISSUE_TEMPLATE/bug_report.yml +++ b/.github/ISSUE_TEMPLATE/bug_report.yml @@ -53,8 +53,17 @@ body: Please fill out the info below. Note that you only need to fill out the relevant section value: |- - - Mermaid version: + - Mermaid version: - Browser and Version: [Chrome, Edge, Firefox] + - type: textarea + attributes: + label: Suggested Solutions + description: > + If applicable, suggest solutions that could resolve the bug. + It would help maintainers/contributors to not waste time looking for the solution. Even pointing the line causing the bug would be great! + placeholder: |- + - Variable `parser` in file is not initialised ... + - Add a new type for ... - type: textarea attributes: label: Additional Context diff --git a/codecov.yaml b/.github/codecov.yaml similarity index 56% rename from codecov.yaml rename to .github/codecov.yaml index b268d6680..950edb6a9 100644 --- a/codecov.yaml +++ b/.github/codecov.yaml @@ -1,6 +1,17 @@ +codecov: + branch: develop + comment: layout: 'reach, diff, flags, files' behavior: default require_changes: false # if true: only post the comment if coverage changes require_base: no # [yes :: must have a base report to post] require_head: yes # [yes :: must have a head report to post] + +coverage: + status: + project: + off + # Turing off for now as code coverage isn't stable and causes unnecessary build failures. + # default: + # threshold: 2% diff --git a/.github/pr-labeler.yml b/.github/pr-labeler.yml index 077cc568b..0bbd8db66 100644 --- a/.github/pr-labeler.yml +++ b/.github/pr-labeler.yml @@ -1,3 +1,4 @@ -'Type: Bug / Error': 'bug/*' -'Type: Enhancement': 'feature/*' -'Type: Other': 'other/*' +'Type: Bug / Error': ['bug/*', fix/*] +'Type: Enhancement': ['feature/*', 'feat/*'] +'Type: Other': ['other/*', 'chore/*', 'test/*', 'refactor/*'] +'Area: Documentation': ['docs/*'] diff --git a/.github/workflows/build-docs.yml b/.github/workflows/build-docs.yml index f3e440fce..b25ff89cc 100644 --- a/.github/workflows/build-docs.yml +++ b/.github/workflows/build-docs.yml @@ -2,13 +2,13 @@ name: Build Vitepress docs on: pull_request: + merge_group: permissions: contents: read jobs: - # Build job - build: + build-docs: runs-on: ubuntu-latest steps: - name: Checkout diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml index 2a70b5901..eeb557ebb 100644 --- a/.github/workflows/build.yml +++ b/.github/workflows/build.yml @@ -2,6 +2,7 @@ name: Build on: push: {} + merge_group: pull_request: types: - opened @@ -12,7 +13,7 @@ permissions: contents: read jobs: - build: + build-mermaid: runs-on: ubuntu-latest strategy: matrix: diff --git a/.github/workflows/check-readme-in-sync.yml b/.github/workflows/check-readme-in-sync.yml index 13912e5b9..5a8ca319b 100644 --- a/.github/workflows/check-readme-in-sync.yml +++ b/.github/workflows/check-readme-in-sync.yml @@ -14,7 +14,7 @@ permissions: contents: read jobs: - check: + check-readme: runs-on: ubuntu-latest steps: - name: Checkout repository diff --git a/.github/workflows/checks.yml b/.github/workflows/checks.yml index 396ff4e6e..9f9f316c4 100644 --- a/.github/workflows/checks.yml +++ b/.github/workflows/checks.yml @@ -1,15 +1,16 @@ on: - push: {} + push: + merge_group: pull_request: types: - opened - synchronize - ready_for_review -name: Static analysis +name: Static analysis on Test files jobs: - test: + check-tests: runs-on: ubuntu-latest name: check tests if: github.repository_owner == 'mermaid-js' diff --git a/.github/workflows/e2e-applitools.yml b/.github/workflows/e2e-applitools.yml index 92f2f80b1..5b1943142 100644 --- a/.github/workflows/e2e-applitools.yml +++ b/.github/workflows/e2e-applitools.yml @@ -19,7 +19,7 @@ env: USE_APPLI: ${{ secrets.APPLITOOLS_API_KEY && 'true' || '' }} jobs: - test: + e2e-applitools: runs-on: ubuntu-latest strategy: matrix: diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml index 64637c5fb..6777a1e4f 100644 --- a/.github/workflows/e2e.yml +++ b/.github/workflows/e2e.yml @@ -1,12 +1,15 @@ name: E2E -on: [push, pull_request] +on: + push: + pull_request: + merge_group: permissions: contents: read jobs: - build: + e2e: runs-on: ubuntu-latest strategy: fail-fast: false @@ -44,13 +47,15 @@ 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 name: mermaid-codecov - fail_ci_if_error: true + fail_ci_if_error: false verbose: true + token: 6845cc80-77ee-4e17-85a1-026cd95e0766 - name: Upload Artifacts uses: actions/upload-artifact@v3 if: ${{ failure() && steps.cypress.conclusion == 'failure' }} diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml index d4bf4afe8..493bacaf7 100644 --- a/.github/workflows/lint.yml +++ b/.github/workflows/lint.yml @@ -1,7 +1,8 @@ name: Lint on: - push: {} + push: + merge_group: pull_request: types: - opened @@ -52,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 diff --git a/.github/workflows/pr-labeler-config-validator.yml b/.github/workflows/pr-labeler-config-validator.yml index af5c477d6..ff5d8d0a1 100644 --- a/.github/workflows/pr-labeler-config-validator.yml +++ b/.github/workflows/pr-labeler-config-validator.yml @@ -1,11 +1,15 @@ name: Validate PR Labeler Configuration on: - push: {} + push: + paths: + - .github/workflows/pr-labeler-config-validator.yml + - .github/workflows/pr-labeler.yml + - .github/pr-labeler.yml pull_request: - types: - - opened - - synchronize - - ready_for_review + paths: + - .github/workflows/pr-labeler-config-validator.yml + - .github/workflows/pr-labeler.yml + - .github/pr-labeler.yml jobs: pr-labeler: diff --git a/.github/workflows/publish-docs.yml b/.github/workflows/publish-docs.yml index b556c1b1d..f63e58750 100644 --- a/.github/workflows/publish-docs.yml +++ b/.github/workflows/publish-docs.yml @@ -19,7 +19,7 @@ concurrency: jobs: # Build job - build: + build-docs: runs-on: ubuntu-latest steps: - name: Checkout @@ -48,11 +48,11 @@ jobs: path: packages/mermaid/src/vitepress/.vitepress/dist # Deployment job - deploy: + deploy-docs: environment: name: github-pages runs-on: ubuntu-latest - needs: build + needs: build-docs steps: - name: Deploy to GitHub Pages id: deployment diff --git a/.github/workflows/release-preview-publish.yml b/.github/workflows/release-preview-publish.yml index 5f4936ab6..221e3836e 100644 --- a/.github/workflows/release-preview-publish.yml +++ b/.github/workflows/release-preview-publish.yml @@ -6,7 +6,7 @@ on: - 'release/**' jobs: - publish: + publish-preview: runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml index 6bae6b71f..7c32795e8 100644 --- a/.github/workflows/test.yml +++ b/.github/workflows/test.yml @@ -1,12 +1,12 @@ name: Unit Tests -on: [push, pull_request] +on: [push, pull_request, merge_group] permissions: contents: read jobs: - build: + unit-test: runs-on: ubuntu-latest strategy: matrix: @@ -43,15 +43,12 @@ 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 name: mermaid-codecov - fail_ci_if_error: true + fail_ci_if_error: false verbose: true - # Coveralls is throwing 500. Disabled for now. - # - name: Upload Coverage to Coveralls - # uses: coverallsapp/github-action@v2 - # with: - # github-token: ${{ secrets.GITHUB_TOKEN }} - # flag-name: unit + token: 6845cc80-77ee-4e17-85a1-026cd95e0766 diff --git a/.github/workflows/update-browserlist.yml b/.github/workflows/update-browserlist.yml index 4155ec988..813a400b3 100644 --- a/.github/workflows/update-browserlist.yml +++ b/.github/workflows/update-browserlist.yml @@ -5,7 +5,7 @@ on: workflow_dispatch: jobs: - build: + update-browser-list: runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 diff --git a/.prettierignore b/.prettierignore index 2ab91f93e..8a9086315 100644 --- a/.prettierignore +++ b/.prettierignore @@ -5,4 +5,8 @@ coverage # Autogenerated by PNPM pnpm-lock.yaml stats -packages/mermaid/src/docs/.vitepress/components.d.ts +**/.vitepress/components.d.ts +**/.vitepress/cache +.nyc_output +# Autogenerated by `pnpm run --filter mermaid types:build-config` +packages/mermaid/src/config.type.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/CITATION.cff b/CITATION.cff new file mode 100644 index 000000000..2f14a4b3d --- /dev/null +++ b/CITATION.cff @@ -0,0 +1,16 @@ +cff-version: 1.2.0 +title: 'Mermaid: Generate diagrams from markdown-like text' +message: >- + If you use this software, please cite it using the metadata from this file. +type: software +authors: + - family-names: Sveidqvist + given-names: Knut + - name: 'Contributors to Mermaid' +repository-code: 'https://github.com/mermaid-js/mermaid' +date-released: 2014-12-02 +url: 'https://mermaid.js.org/' +abstract: >- + JavaScript based diagramming and charting tool that renders Markdown-inspired + text definitions to create and modify diagrams dynamically. +license: MIT diff --git a/README.md b/README.md index f1df0966b..bdffbe175 100644 --- a/README.md +++ b/README.md @@ -386,7 +386,7 @@ Update version number in `package.json`. npm publish ``` -The above command generates files into the `dist` folder and publishes them to npmjs.org. +The above command generates files into the `dist` folder and publishes them to . ## Related projects @@ -402,7 +402,7 @@ Detailed information about how to contribute can be found in the [contribution g ## Security and safe diagrams -For public sites, it can be precarious to retrieve text from users on the internet, storing that content for presentation in a browser at a later stage. The reason is that the user content can contain embedded malicious scripts that will run when the data is presented. For Mermaid this is a risk, specially as mermaid diagrams contain many characters that are used in html which makes the standard sanitation unusable as it also breaks the diagrams. We still make an effort to sanitise the incoming code and keep refining the process but it is hard to guarantee that there are no loop holes. +For public sites, it can be precarious to retrieve text from users on the internet, storing that content for presentation in a browser at a later stage. The reason is that the user content can contain embedded malicious scripts that will run when the data is presented. For Mermaid this is a risk, specially as mermaid diagrams contain many characters that are used in html which makes the standard sanitation unusable as it also breaks the diagrams. We still make an effort to sanitize the incoming code and keep refining the process but it is hard to guarantee that there are no loop holes. As an extra level of security for sites with external users we are happy to introduce a new security level in which the diagram is rendered in a sandboxed iframe preventing javascript in the code from being executed. This is a great step forward for better security. diff --git a/README.zh-CN.md b/README.zh-CN.md index 9af34998d..9a2e797be 100644 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -322,7 +322,7 @@ Rel(SystemC, customerA, "Sends e-mails to") npm publish ``` -以上的命令会将文件打包到 `dist` 目录并发布至 npmjs.org. +以上的命令会将文件打包到 `dist` 目录并发布至 . ## 相关项目 diff --git a/__mocks__/sankeyRenderer.js b/__mocks__/sankeyRenderer.js new file mode 100644 index 000000000..76324c93f --- /dev/null +++ b/__mocks__/sankeyRenderer.js @@ -0,0 +1,13 @@ +/** + * Mocked Sankey diagram renderer + */ + +import { vi } from 'vitest'; + +export const draw = vi.fn().mockImplementation(() => { + return ''; +}); + +export default { + draw, +}; diff --git a/cSpell.json b/cSpell.json index 803eee3b6..c6f8cfe60 100644 --- a/cSpell.json +++ b/cSpell.json @@ -40,8 +40,10 @@ "dompurify", "edgechromium", "elkjs", + "elle", "faber", "flatmap", + "foswiki", "ftplugin", "gantt", "gitea", @@ -51,6 +53,7 @@ "graphviz", "grav", "greywolf", + "gzipped", "huynh", "huynhicode", "inkdrop", @@ -85,7 +88,10 @@ "mkdocs", "mmorel", "mult", + "neurodiverse", "nextra", + "nikolay", + "nirname", "orlandoni", "pathe", "pbrolin", @@ -99,10 +105,13 @@ "ranksep", "rect", "rects", + "reda", "redmine", "rehype", "roledescription", + "rozhkov", "sandboxed", + "sankey", "setupgraphviewbox", "shiki", "sidharth", @@ -117,6 +126,7 @@ "stylis", "subhash-halder", "substate", + "sulais", "sveidqvist", "swimm", "techn", @@ -140,6 +150,7 @@ "vueuse", "xlink", "yash", + "yokozuna", "zenuml" ], "patterns": [ diff --git a/cypress/integration/rendering/sankey.spec.ts b/cypress/integration/rendering/sankey.spec.ts new file mode 100644 index 000000000..e334b898b --- /dev/null +++ b/cypress/integration/rendering/sankey.spec.ts @@ -0,0 +1,144 @@ +import { imgSnapshotTest, renderGraph } from '../../helpers/util.js'; + +describe('Sankey Diagram', () => { + it('should render a simple example', () => { + imgSnapshotTest( + ` + sankey-beta + + sourceNode,targetNode,10 + `, + {} + ); + }); + + describe('when given a linkColor', function () { + this.beforeAll(() => { + cy.wrap( + `sankey-beta + a,b,10 + ` + ).as('graph'); + }); + + it('links should use hex color', function () { + renderGraph(this.graph, { sankey: { linkColor: '#636465' } }); + + cy.get('.link path').should((link) => { + expect(link.attr('stroke')).to.equal('#636465'); + }); + }); + + it('links should be the same color as source node', function () { + renderGraph(this.graph, { sankey: { linkColor: 'source' } }); + + cy.get('.link path').then((link) => { + cy.get('.node[id="node-1"] rect').should((node) => + expect(link.attr('stroke')).to.equal(node.attr('fill')) + ); + }); + }); + + it('links should be the same color as target node', function () { + renderGraph(this.graph, { sankey: { linkColor: 'target' } }); + + cy.get('.link path').then((link) => { + cy.get('.node[id="node-2"] rect').should((node) => + expect(link.attr('stroke')).to.equal(node.attr('fill')) + ); + }); + }); + + it('links must be gradient', function () { + renderGraph(this.graph, { sankey: { linkColor: 'gradient' } }); + + cy.get('.link path').should((link) => { + expect(link.attr('stroke')).to.equal('url(#linearGradient-3)'); + }); + }); + }); + + describe('when given a nodeAlignment', function () { + this.beforeAll(() => { + cy.wrap( + ` + sankey-beta + + a,b,8 + b,c,8 + c,d,8 + d,e,8 + + x,c,4 + c,y,4 + ` + ).as('graph'); + }); + + this.afterEach(() => { + cy.get('.node[id="node-1"]').should((node) => { + expect(node.attr('x')).to.equal('0'); + }); + cy.get('.node[id="node-2"]').should((node) => { + expect(node.attr('x')).to.equal('100'); + }); + cy.get('.node[id="node-3"]').should((node) => { + expect(node.attr('x')).to.equal('200'); + }); + cy.get('.node[id="node-4"]').should((node) => { + expect(node.attr('x')).to.equal('300'); + }); + cy.get('.node[id="node-5"]').should((node) => { + expect(node.attr('x')).to.equal('400'); + }); + }); + + it('should justify nodes', function () { + renderGraph(this.graph, { + sankey: { nodeAlignment: 'justify', width: 410, useMaxWidth: false }, + }); + cy.get('.node[id="node-6"]').should((node) => { + expect(node.attr('x')).to.equal('0'); + }); + cy.get('.node[id="node-7"]').should((node) => { + expect(node.attr('x')).to.equal('400'); + }); + }); + + it('should align nodes left', function () { + renderGraph(this.graph, { + sankey: { nodeAlignment: 'left', width: 410, useMaxWidth: false }, + }); + cy.get('.node[id="node-6"]').should((node) => { + expect(node.attr('x')).to.equal('0'); + }); + cy.get('.node[id="node-7"]').should((node) => { + expect(node.attr('x')).to.equal('300'); + }); + }); + + it('should align nodes right', function () { + renderGraph(this.graph, { + sankey: { nodeAlignment: 'right', width: 410, useMaxWidth: false }, + }); + cy.get('.node[id="node-6"]').should((node) => { + expect(node.attr('x')).to.equal('100'); + }); + cy.get('.node[id="node-7"]').should((node) => { + expect(node.attr('x')).to.equal('400'); + }); + }); + + it('should center nodes', function () { + renderGraph(this.graph, { + sankey: { nodeAlignment: 'center', width: 410, useMaxWidth: false }, + }); + cy.get('.node[id="node-6"]').should((node) => { + expect(node.attr('x')).to.equal('100'); + }); + cy.get('.node[id="node-7"]').should((node) => { + expect(node.attr('x')).to.equal('300'); + }); + }); + }); +}); diff --git a/cypress/integration/rendering/sequencediagram.spec.js b/cypress/integration/rendering/sequencediagram.spec.js index 185cc4133..7d36c1ff1 100644 --- a/cypress/integration/rendering/sequencediagram.spec.js +++ b/cypress/integration/rendering/sequencediagram.spec.js @@ -156,6 +156,81 @@ context('Sequence diagram', () => { ` ); }); + it('should render a sequence diagram with basic actor creation and destruction', () => { + imgSnapshotTest( + ` + sequenceDiagram + Alice ->> Bob: Hello Bob, how are you ? + Bob ->> Alice: Fine, thank you. And you? + create participant Polo + Alice ->> Polo: Hi Polo! + create actor Ola1 as Ola + Polo ->> Ola1: Hiii + Ola1 ->> Alice: Hi too + destroy Ola1 + Alice --x Ola1: Bye! + Alice ->> Bob: And now? + create participant Ola2 as Ola + Alice ->> Ola2: Hello again + destroy Alice + Alice --x Ola2: Bye for me! + destroy Bob + Ola2 --> Bob: The end + ` + ); + }); + it('should render a sequence diagram with actor creation and destruction coupled with backgrounds, loops and notes', () => { + imgSnapshotTest( + ` + sequenceDiagram + accTitle: test the accTitle + accDescr: Test a description + + participant Alice + participant Bob + autonumber 10 10 + rect rgb(200, 220, 100) + rect rgb(200, 255, 200) + + Alice ->> Bob: Hello Bob, how are you? + create participant John as John
Second Line + Bob-->>John: How about you John? + end + + Bob--x Alice: I am good thanks! + Bob-x John: I am good thanks! + Note right of John: John thinks a long
long time, so long
that the text does
not fit on a row. + + Bob-->Alice: Checking with John... + Note over John:wrap: John looks like he's still thinking, so Bob prods him a bit. + Bob-x John: Hey John - we're still waiting to know
how you're doing + Note over John:nowrap: John's trying hard not to break his train of thought. + destroy John + Bob-x John: John! Cmon! + Note over John: After a few more moments, John
finally snaps out of it. + end + + autonumber off + alt either this + create actor Lola + Alice->>+Lola: Yes + Lola-->>-Alice: OK + else or this + autonumber + Alice->>Lola: No + else or this will happen + Alice->Lola: Maybe + end + autonumber 200 + par this happens in parallel + destroy Bob + Alice -->> Bob: Parallel message 1 + and + Alice -->> Lola: Parallel message 2 + end + ` + ); + }); context('font settings', () => { it('should render different note fonts when configured', () => { imgSnapshotTest( diff --git a/demos/classchart.html b/demos/classchart.html index b20dda2a3..508bb1066 100644 --- a/demos/classchart.html +++ b/demos/classchart.html @@ -154,6 +154,29 @@
+ 
+    classDiagram
+      A1 --> B1
+      namespace A {
+        class A1 {
+          +foo : string
+        }
+        class A2 {
+          +bar : int
+        }
+      }
+      namespace B {
+        class B1 {
+          +foo : bool
+        }
+        class B2 {
+          +bar : float
+        }
+      }
+      A2 --> B2
+
+
+ + + diff --git a/docker-compose.yml b/docker-compose.yml index 2762f3b99..c881d0473 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -1,9 +1,36 @@ version: '3.9' services: mermaid: - image: node:18.16.0-alpine3.18 + image: node:18.16.1-alpine3.18 stdin_open: true tty: true working_dir: /mermaid + mem_limit: '2G' + environment: + - NODE_OPTIONS=--max_old_space_size=2048 volumes: - ./:/mermaid + - root_cache:/root/.cache + - root_local:/root/.local + - root_npm:/root/.npm + ports: + - 9000:9000 + - 3333:3333 + cypress: + image: cypress/included:12.16.0 + stdin_open: true + tty: true + working_dir: /mermaid + mem_limit: '2G' + entrypoint: cypress + environment: + - DISPLAY + volumes: + - ./:/mermaid + - /tmp/.X11-unix:/tmp/.X11-unix + network_mode: host + +volumes: + root_cache: + root_local: + root_npm: diff --git a/docs/config/Tutorials.md b/docs/config/Tutorials.md index 7b1530eaa..8f6d7e1ab 100644 --- a/docs/config/Tutorials.md +++ b/docs/config/Tutorials.md @@ -26,6 +26,10 @@ The definitions that can be generated the Live-Editor are also backwards-compati [Eddie Jaoude: Can you code your diagrams?](https://www.youtube.com/watch?v=9HZzKkAqrX8) +## Mermaid with OpenAI + +[Elle Neal: Mind Mapping with AI: An Accessible Approach for Neurodiverse Learners Tutorial:](https://medium.com/@elle.neal_71064/mind-mapping-with-ai-an-accessible-approach-for-neurodiverse-learners-1a74767359ff), [Demo:](https://databutton.com/v/jk9vrghc) + ## Mermaid with HTML Examples are provided in [Getting Started](../intro/n00b-gettingStarted.md) diff --git a/docs/config/setup/modules/defaultConfig.md b/docs/config/setup/modules/defaultConfig.md index 7d21597ac..a55ec1808 100644 --- a/docs/config/setup/modules/defaultConfig.md +++ b/docs/config/setup/modules/defaultConfig.md @@ -14,7 +14,7 @@ #### Defined in -[defaultConfig.ts:2304](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L2304) +[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/docs/config/setup/modules/mermaidAPI.md b/docs/config/setup/modules/mermaidAPI.md index 591b6841a..72f18cace 100644 --- a/docs/config/setup/modules/mermaidAPI.md +++ b/docs/config/setup/modules/mermaidAPI.md @@ -96,7 +96,7 @@ mermaid.initialize(config); #### Defined in -[mermaidAPI.ts:663](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L663) +[mermaidAPI.ts:667](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L667) ## Functions diff --git a/docs/config/theming.md b/docs/config/theming.md index 580afb488..63271a39b 100644 --- a/docs/config/theming.md +++ b/docs/config/theming.md @@ -73,9 +73,9 @@ To make a custom theme, modify `themeVariables` via `init`. You will need to use the [base](#available-themes) theme as it is the only modifiable theme. -| Parameter | Description | Type | Properties | -| -------------- | ------------------------------------ | ------ | --------------------------------------------------------------------------------------------------- | -| themeVariables | Modifiable with the `init` directive | Object | `primaryColor`, `primaryTextColor`, `lineColor` ([see full list](#theme-variables-reference-table)) | +| Parameter | Description | Type | Properties | +| -------------- | ------------------------------------ | ------ | ----------------------------------------------------------------------------------- | +| themeVariables | Modifiable with the `init` directive | Object | `primaryColor`, `primaryTextColor`, `lineColor` ([see full list](#theme-variables)) | Example of modifying `themeVariables` using the `init` directive: diff --git a/docs/ecosystem/integrations.md b/docs/ecosystem/integrations.md index 28db3afff..896a23c56 100644 --- a/docs/ecosystem/integrations.md +++ b/docs/ecosystem/integrations.md @@ -66,7 +66,7 @@ They also serve as proof of concept, for the variety of things that can be built ## Blogs -- [Wordpress](https://wordpress.org) +- [WordPress](https://wordpress.org) - [WordPress Markdown Editor](https://wordpress.org/plugins/wp-githuber-md) - [WP-ReliableMD](https://wordpress.org/plugins/wp-reliablemd/) - [Hexo](https://hexo.io) @@ -84,7 +84,7 @@ They also serve as proof of concept, for the variety of things that can be built - [Plugin for Mermaid.js](https://github.com/eFrane/vuepress-plugin-mermaidjs) - [Grav CMS](https://getgrav.org/) - [Mermaid Diagrams](https://github.com/DanielFlaum/grav-plugin-mermaid-diagrams) - - [Gitlab Markdown Adapter](https://github.com/Goutte/grav-plugin-gitlab-markdown-adapter) + - [GitLab Markdown Adapter](https://github.com/Goutte/grav-plugin-gitlab-markdown-adapter) ## Communication @@ -104,7 +104,7 @@ They also serve as proof of concept, for the variety of things that can be built - [Flex Diagrams Extension](https://www.mediawiki.org/wiki/Extension:Flex_Diagrams) - [Semantic Media Wiki](https://semantic-mediawiki.org) - [Mermaid Plugin](https://github.com/SemanticMediaWiki/Mermaid) -- [FosWiki](https://foswiki.org) +- [Foswiki](https://foswiki.org) - [Mermaid Plugin](https://foswiki.org/Extensions/MermaidPlugin) - [DokuWiki](https://dokuwiki.org) - [Mermaid Plugin](https://www.dokuwiki.org/plugin:mermaid) @@ -161,6 +161,8 @@ They also serve as proof of concept, for the variety of things that can be built - [Nano Mermaid](https://github.com/Yash-Singh1/nano-mermaid) - [CKEditor](https://github.com/ckeditor/ckeditor5) - [CKEditor 5 Mermaid plugin](https://github.com/ckeditor/ckeditor5-mermaid) +- [Standard Notes](https://standardnotes.com/) + - [sn-mermaid](https://github.com/nienow/sn-mermaid) ## Document Generation @@ -172,7 +174,7 @@ They also serve as proof of concept, for the variety of things that can be built - [rehype-mermaidjs](https://github.com/remcohaszing/rehype-mermaidjs) - [Gatsby](https://www.gatsbyjs.com/) - [gatsby-remark-mermaid](https://github.com/remcohaszing/gatsby-remark-mermaid) -- [jSDoc](https://jsdoc.app/) +- [JSDoc](https://jsdoc.app/) - [jsdoc-mermaid](https://github.com/Jellyvision/jsdoc-mermaid) - [MkDocs](https://www.mkdocs.org) - [mkdocs-mermaid2-plugin](https://github.com/fralau/mkdocs-mermaid2-plugin) diff --git a/docs/news/announcements.md b/docs/news/announcements.md index a843ae419..ff67c57d0 100644 --- a/docs/news/announcements.md +++ b/docs/news/announcements.md @@ -6,8 +6,8 @@ # Announcements -## [subhash-halder contributed quadrant charts so you can show your manager what to select - just like the strategy consultants at BCG do](https://www.mermaidchart.com/blog/posts/subhash-halder-contributed-quadrant-charts-so-you-can-show-your-manager-what-to-select-just-like-the-strategy-consultants-at-bcg-do/) +## [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) -8 June 2023 · 7 mins +29 June 2023 · 4 mins -A quadrant chart is a useful diagram that helps users visualize data and identify patterns in a data set. +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 48b669d79..6b187d406 100644 --- a/docs/news/blog.md +++ b/docs/news/blog.md @@ -6,6 +6,18 @@ # 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 + +Sequence diagrams really shine when you’re documenting different parts of a system and the various ways these parts interact with each other. + ## [subhash-halder contributed quadrant charts so you can show your manager what to select - just like the strategy consultants at BCG do](https://www.mermaidchart.com/blog/posts/subhash-halder-contributed-quadrant-charts-so-you-can-show-your-manager-what-to-select-just-like-the-strategy-consultants-at-bcg-do/) 8 June 2023 · 7 mins diff --git a/docs/syntax/flowchart.md b/docs/syntax/flowchart.md index a47061025..92678fb6e 100644 --- a/docs/syntax/flowchart.md +++ b/docs/syntax/flowchart.md @@ -991,6 +991,24 @@ flowchart LR classDef someclass fill:#f96 ``` +This form can be used when declaring multiple links between nodes: + +```mermaid-example +flowchart LR + A:::foo & B:::bar --> C:::foobar + classDef foo stroke:#f00 + classDef bar stroke:#0f0 + classDef foobar stroke:#00f +``` + +```mermaid +flowchart LR + A:::foo & B:::bar --> C:::foobar + classDef foo stroke:#f00 + classDef bar stroke:#0f0 + classDef foobar stroke:#00f +``` + ### Css classes It is also possible to predefine classes in css styles that can be applied from the graph definition as in the example diff --git a/docs/syntax/gantt.md b/docs/syntax/gantt.md index 091cdeabe..8e64a268a 100644 --- a/docs/syntax/gantt.md +++ b/docs/syntax/gantt.md @@ -25,25 +25,25 @@ Mermaid can render Gantt diagrams as SVG, PNG or a MarkDown link that can be pas ```mermaid-example gantt title A Gantt Diagram - dateFormat YYYY-MM-DD + dateFormat YYYY-MM-DD section Section - A task :a1, 2014-01-01, 30d - Another task :after a1 , 20d + A task :a1, 2014-01-01, 30d + Another task :after a1, 20d section Another - Task in sec :2014-01-12 , 12d - another task : 24d + Task in Another :2014-01-12, 12d + another task :24d ``` ```mermaid gantt title A Gantt Diagram - dateFormat YYYY-MM-DD + dateFormat YYYY-MM-DD section Section - A task :a1, 2014-01-01, 30d - Another task :after a1 , 20d + A task :a1, 2014-01-01, 30d + Another task :after a1, 20d section Another - Task in sec :2014-01-12 , 12d - another task : 24d + Task in Another :2014-01-12, 12d + another task :24d ``` ## Syntax @@ -117,17 +117,17 @@ gantt It is possible to set multiple dependencies separated by space: ```mermaid-example - gantt - apple :a, 2017-07-20, 1w - banana :crit, b, 2017-07-23, 1d - cherry :active, c, after b a, 1d +gantt + apple :a, 2017-07-20, 1w + banana :crit, b, 2017-07-23, 1d + cherry :active, c, after b a, 1d ``` ```mermaid - gantt - apple :a, 2017-07-20, 1w - banana :crit, b, 2017-07-23, 1d - cherry :active, c, after b a, 1d +gantt + apple :a, 2017-07-20, 1w + banana :crit, b, 2017-07-23, 1d + cherry :active, c, after b a, 1d ``` ### Title @@ -146,22 +146,22 @@ You can add milestones to the diagrams. Milestones differ from tasks as they rep ```mermaid-example gantt -dateFormat HH:mm -axisFormat %H:%M -Initial milestone : milestone, m1, 17:49,2min -taska2 : 10min -taska3 : 5min -Final milestone : milestone, m2, 18:14, 2min + dateFormat HH:mm + axisFormat %H:%M + Initial milestone : milestone, m1, 17:49, 2m + Task A : 10m + Task B : 5m + Final milestone : milestone, m2, 18:08, 4m ``` ```mermaid gantt -dateFormat HH:mm -axisFormat %H:%M -Initial milestone : milestone, m1, 17:49,2min -taska2 : 10min -taska3 : 5min -Final milestone : milestone, m2, 18:14, 2min + dateFormat HH:mm + axisFormat %H:%M + Initial milestone : milestone, m1, 17:49, 2m + Task A : 10m + Task B : 5m + Final milestone : milestone, m2, 18:08, 4m ``` ## Setting dates @@ -296,29 +296,27 @@ Comments can be entered within a gantt chart, which will be ignored by the parse ```mermaid-example gantt title A Gantt Diagram - %% this is a comment - dateFormat YYYY-MM-DD + %% This is a comment + dateFormat YYYY-MM-DD section Section - A task :a1, 2014-01-01, 30d - Another task :after a1 , 20d + A task :a1, 2014-01-01, 30d + Another task :after a1, 20d section Another - Task in sec :2014-01-12 , 12d - another task : 24d - + Task in Another :2014-01-12, 12d + another task :24d ``` ```mermaid gantt title A Gantt Diagram - %% this is a comment - dateFormat YYYY-MM-DD + %% This is a comment + dateFormat YYYY-MM-DD section Section - A task :a1, 2014-01-01, 30d - Another task :after a1 , 20d + A task :a1, 2014-01-01, 30d + Another task :after a1, 20d section Another - Task in sec :2014-01-12 , 12d - another task : 24d - + Task in Another :2014-01-12, 12d + another task :24d ``` ## Styling @@ -440,7 +438,7 @@ Beginner's tip—a full example using interactive links in an html context: dateFormat YYYY-MM-DD section Clickable - Visit mermaidjs :active, cl1, 2014-01-07, 3d + Visit mermaidjs :active, cl1, 2014-01-07, 3d Print arguments :cl2, after cl1, 3d Print task :cl3, after cl2, 3d diff --git a/docs/syntax/sankey.md b/docs/syntax/sankey.md new file mode 100644 index 000000000..156e82f5a --- /dev/null +++ b/docs/syntax/sankey.md @@ -0,0 +1,294 @@ +> **Warning** +> +> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. +> +> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/sankey.md](../../packages/mermaid/src/docs/syntax/sankey.md). + +# Sankey diagrams + +> A sankey diagram is a visualization used to depict a flow from one set of values to another. + +::: warning +This is an experimental diagram. Its syntax are very close to plain CSV, but it is to be extended in the nearest future. +::: + +The things being connected are called nodes and the connections are called links. + +## Example + +This example taken from [observable](https://observablehq.com/@d3/sankey/2?collection=@d3/d3-sankey). It may be rendered a little bit differently, though, in terms of size and colors. + +```mermaid-example +sankey-beta + +Agricultural 'waste',Bio-conversion,124.729 +Bio-conversion,Liquid,0.597 +Bio-conversion,Losses,26.862 +Bio-conversion,Solid,280.322 +Bio-conversion,Gas,81.144 +Biofuel imports,Liquid,35 +Biomass imports,Solid,35 +Coal imports,Coal,11.606 +Coal reserves,Coal,63.965 +Coal,Solid,75.571 +District heating,Industry,10.639 +District heating,Heating and cooling - commercial,22.505 +District heating,Heating and cooling - homes,46.184 +Electricity grid,Over generation / exports,104.453 +Electricity grid,Heating and cooling - homes,113.726 +Electricity grid,H2 conversion,27.14 +Electricity grid,Industry,342.165 +Electricity grid,Road transport,37.797 +Electricity grid,Agriculture,4.412 +Electricity grid,Heating and cooling - commercial,40.858 +Electricity grid,Losses,56.691 +Electricity grid,Rail transport,7.863 +Electricity grid,Lighting & appliances - commercial,90.008 +Electricity grid,Lighting & appliances - homes,93.494 +Gas imports,Ngas,40.719 +Gas reserves,Ngas,82.233 +Gas,Heating and cooling - commercial,0.129 +Gas,Losses,1.401 +Gas,Thermal generation,151.891 +Gas,Agriculture,2.096 +Gas,Industry,48.58 +Geothermal,Electricity grid,7.013 +H2 conversion,H2,20.897 +H2 conversion,Losses,6.242 +H2,Road transport,20.897 +Hydro,Electricity grid,6.995 +Liquid,Industry,121.066 +Liquid,International shipping,128.69 +Liquid,Road transport,135.835 +Liquid,Domestic aviation,14.458 +Liquid,International aviation,206.267 +Liquid,Agriculture,3.64 +Liquid,National navigation,33.218 +Liquid,Rail transport,4.413 +Marine algae,Bio-conversion,4.375 +Ngas,Gas,122.952 +Nuclear,Thermal generation,839.978 +Oil imports,Oil,504.287 +Oil reserves,Oil,107.703 +Oil,Liquid,611.99 +Other waste,Solid,56.587 +Other waste,Bio-conversion,77.81 +Pumped heat,Heating and cooling - homes,193.026 +Pumped heat,Heating and cooling - commercial,70.672 +Solar PV,Electricity grid,59.901 +Solar Thermal,Heating and cooling - homes,19.263 +Solar,Solar Thermal,19.263 +Solar,Solar PV,59.901 +Solid,Agriculture,0.882 +Solid,Thermal generation,400.12 +Solid,Industry,46.477 +Thermal generation,Electricity grid,525.531 +Thermal generation,Losses,787.129 +Thermal generation,District heating,79.329 +Tidal,Electricity grid,9.452 +UK land based bioenergy,Bio-conversion,182.01 +Wave,Electricity grid,19.013 +Wind,Electricity grid,289.366 +``` + +```mermaid +sankey-beta + +Agricultural 'waste',Bio-conversion,124.729 +Bio-conversion,Liquid,0.597 +Bio-conversion,Losses,26.862 +Bio-conversion,Solid,280.322 +Bio-conversion,Gas,81.144 +Biofuel imports,Liquid,35 +Biomass imports,Solid,35 +Coal imports,Coal,11.606 +Coal reserves,Coal,63.965 +Coal,Solid,75.571 +District heating,Industry,10.639 +District heating,Heating and cooling - commercial,22.505 +District heating,Heating and cooling - homes,46.184 +Electricity grid,Over generation / exports,104.453 +Electricity grid,Heating and cooling - homes,113.726 +Electricity grid,H2 conversion,27.14 +Electricity grid,Industry,342.165 +Electricity grid,Road transport,37.797 +Electricity grid,Agriculture,4.412 +Electricity grid,Heating and cooling - commercial,40.858 +Electricity grid,Losses,56.691 +Electricity grid,Rail transport,7.863 +Electricity grid,Lighting & appliances - commercial,90.008 +Electricity grid,Lighting & appliances - homes,93.494 +Gas imports,Ngas,40.719 +Gas reserves,Ngas,82.233 +Gas,Heating and cooling - commercial,0.129 +Gas,Losses,1.401 +Gas,Thermal generation,151.891 +Gas,Agriculture,2.096 +Gas,Industry,48.58 +Geothermal,Electricity grid,7.013 +H2 conversion,H2,20.897 +H2 conversion,Losses,6.242 +H2,Road transport,20.897 +Hydro,Electricity grid,6.995 +Liquid,Industry,121.066 +Liquid,International shipping,128.69 +Liquid,Road transport,135.835 +Liquid,Domestic aviation,14.458 +Liquid,International aviation,206.267 +Liquid,Agriculture,3.64 +Liquid,National navigation,33.218 +Liquid,Rail transport,4.413 +Marine algae,Bio-conversion,4.375 +Ngas,Gas,122.952 +Nuclear,Thermal generation,839.978 +Oil imports,Oil,504.287 +Oil reserves,Oil,107.703 +Oil,Liquid,611.99 +Other waste,Solid,56.587 +Other waste,Bio-conversion,77.81 +Pumped heat,Heating and cooling - homes,193.026 +Pumped heat,Heating and cooling - commercial,70.672 +Solar PV,Electricity grid,59.901 +Solar Thermal,Heating and cooling - homes,19.263 +Solar,Solar Thermal,19.263 +Solar,Solar PV,59.901 +Solid,Agriculture,0.882 +Solid,Thermal generation,400.12 +Solid,Industry,46.477 +Thermal generation,Electricity grid,525.531 +Thermal generation,Losses,787.129 +Thermal generation,District heating,79.329 +Tidal,Electricity grid,9.452 +UK land based bioenergy,Bio-conversion,182.01 +Wave,Electricity grid,19.013 +Wind,Electricity grid,289.366 +``` + +## Syntax + +The idea behind syntax is that a user types `sankey-beta` keyword first, then pastes raw CSV below and get the result. + +It implements CSV standard as [described here](https://www.ietf.org/rfc/rfc4180.txt) with subtle **differences**: + +- CSV must contain **3 columns only** +- It is **allowed** to have **empty lines** without comma separators for visual purposes + +### Basic + +It is implied that 3 columns inside CSV should represent `source`, `target` and `value` accordingly: + +```mermaid-example +sankey-beta + +%% source,target,value +Electricity grid,Over generation / exports,104.453 +Electricity grid,Heating and cooling - homes,113.726 +Electricity grid,H2 conversion,27.14 +``` + +```mermaid +sankey-beta + +%% source,target,value +Electricity grid,Over generation / exports,104.453 +Electricity grid,Heating and cooling - homes,113.726 +Electricity grid,H2 conversion,27.14 +``` + +### Empty Lines + +CSV does not support empty lines without comma delimeters by default. But you can add them if needed: + +```mermaid-example +sankey-beta + +Bio-conversion,Losses,26.862 + +Bio-conversion,Solid,280.322 + +Bio-conversion,Gas,81.144 +``` + +```mermaid +sankey-beta + +Bio-conversion,Losses,26.862 + +Bio-conversion,Solid,280.322 + +Bio-conversion,Gas,81.144 +``` + +### Commas + +If you need to have a comma, wrap it in double quotes: + +```mermaid-example +sankey-beta + +Pumped heat,"Heating and cooling, homes",193.026 +Pumped heat,"Heating and cooling, commercial",70.672 +``` + +```mermaid +sankey-beta + +Pumped heat,"Heating and cooling, homes",193.026 +Pumped heat,"Heating and cooling, commercial",70.672 +``` + +### Double Quotes + +If you need to have double quote, put a pair of them inside quoted string: + +```mermaid-example +sankey-beta + +Pumped heat,"Heating and cooling, ""homes""",193.026 +Pumped heat,"Heating and cooling, ""commercial""",70.672 +``` + +```mermaid +sankey-beta + +Pumped heat,"Heating and cooling, ""homes""",193.026 +Pumped heat,"Heating and cooling, ""commercial""",70.672 +``` + +## Configuration + +You can customize link colors, node alignments and diagram dimensions. + +```html + +``` + +### Links Coloring + +You can adjust links' color by setting `linkColor` to one of those: + +- `source` - link will be of a source node color +- `target` - link will be of a target node color +- `gradient` - link color will be smoothly transient between source and target node colors +- hex code of color, like `#a1a1a1` + +### Node Alignment + +Graph layout can be changed by setting `nodeAlignment` to: + +- `justify` +- `center` +- `left` +- `right` diff --git a/docs/syntax/sequenceDiagram.md b/docs/syntax/sequenceDiagram.md index 26f81452d..89c232ea6 100644 --- a/docs/syntax/sequenceDiagram.md +++ b/docs/syntax/sequenceDiagram.md @@ -94,6 +94,43 @@ sequenceDiagram J->>A: Great! ``` +### Actor Creation and Destruction + +It is possible to create and destroy actors by messages. To do so, add a create or destroy directive before the message. + + create participant B + A --> B: Hello + +Create directives support actor/participant distinction and aliases. The sender or the recipient of a message can be destroyed but only the recipient can be created. + +```mermaid-example +sequenceDiagram + Alice->>Bob: Hello Bob, how are you ? + Bob->>Alice: Fine, thank you. And you? + create participant Carl + Alice->>Carl: Hi Carl! + create actor D as Donald + Carl->>D: Hi! + destroy Carl + Alice-xCarl: We are too many + destroy Bob + Bob->>Alice: I agree +``` + +```mermaid +sequenceDiagram + Alice->>Bob: Hello Bob, how are you ? + Bob->>Alice: Fine, thank you. And you? + create participant Carl + Alice->>Carl: Hi Carl! + create actor D as Donald + Carl->>D: Hi! + destroy Carl + Alice-xCarl: We are too many + destroy Bob + Bob->>Alice: I agree +``` + ### Grouping / Box The actor(s) can be grouped in vertical boxes. You can define a color (if not, it will be transparent) and/or a descriptive label using the following notation: diff --git a/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 diff --git a/docs/syntax/timeline.md b/docs/syntax/timeline.md index d9915ff3e..d42a2dc7c 100644 --- a/docs/syntax/timeline.md +++ b/docs/syntax/timeline.md @@ -257,9 +257,11 @@ let us look at same example, where we have disabled the multiColor option. ### Customizing Color scheme -You can customize the color scheme using the `cScale0` to `cScale11` theme variables. Mermaid allows you to set unique colors for up-to 12 sections, where `cScale0` variable will drive the value of the first section or time-period, `cScale1` will drive the value of the second section and so on. +You can customize the color scheme using the `cScale0` to `cScale11` theme variables, which will change the background colors. Mermaid allows you to set unique colors for up-to 12 sections, where `cScale0` variable will drive the value of the first section or time-period, `cScale1` will drive the value of the second section and so on. In case you have more than 12 sections, the color scheme will start to repeat. +If you also want to change the foreground color of a section, you can do so use theme variables corresponding `cScaleLabel0` to `cScaleLabel11` variables. + NOTE: Default values for these theme variables are picked from the selected theme. If you want to override the default values, you can use the `initialize` call to add your custom theme variable values. Example: @@ -268,9 +270,9 @@ Now let's override the default values for the `cScale0` to `cScale2` variables: ```mermaid-example %%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': { - 'cScale0': '#ff0000', + 'cScale0': '#ff0000', 'cScaleLabel0': '#ffffff', 'cScale1': '#00ff00', - 'cScale2': '#0000ff' + 'cScale2': '#0000ff', 'cScaleLabel2': '#ffffff' } } }%% timeline title History of Social Media Platform @@ -286,9 +288,9 @@ Now let's override the default values for the `cScale0` to `cScale2` variables: ```mermaid %%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': { - 'cScale0': '#ff0000', + 'cScale0': '#ff0000', 'cScaleLabel0': '#ffffff', 'cScale1': '#00ff00', - 'cScale2': '#0000ff' + 'cScale2': '#0000ff', 'cScaleLabel2': '#ffffff' } } }%% timeline title History of Social Media Platform diff --git a/package.json b/package.json index ac197712c..e21e02d14 100644 --- a/package.json +++ b/package.json @@ -1,10 +1,10 @@ { "name": "mermaid-monorepo", "private": true, - "version": "10.2.3", + "version": "10.2.4", "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.", "type": "module", - "packageManager": "pnpm@8.6.2", + "packageManager": "pnpm@8.6.5", "keywords": [ "diagram", "markdown", @@ -22,7 +22,7 @@ "build:watch": "pnpm build:vite --watch", "build": "pnpm run -r clean && pnpm build:types && pnpm build:vite", "dev": "concurrently \"pnpm build:vite --watch\" \"ts-node-esm .vite/server.ts\"", - "dev:coverage": "VITE_COVERAGE=true pnpm dev", + "dev:coverage": "pnpm coverage:cypress:clean && VITE_COVERAGE=true pnpm dev", "release": "pnpm build", "lint": "eslint --cache --cache-strategy content --ignore-path .gitignore . && pnpm lint:jison && prettier --cache --check .", "lint:fix": "eslint --cache --cache-strategy content --fix --ignore-path .gitignore . && prettier --write . && ts-node-esm scripts/fixCSpell.ts", @@ -31,7 +31,8 @@ "cypress": "cypress run", "cypress:open": "cypress open", "e2e": "start-server-and-test dev http://localhost:9000/ cypress", - "e2e:coverage": "VITE_COVERAGE=true pnpm e2e", + "coverage:cypress:clean": "rimraf .nyc_output coverage/cypress", + "e2e:coverage": "pnpm coverage:cypress:clean && VITE_COVERAGE=true pnpm e2e", "coverage:merge": "ts-node-esm scripts/coverage.ts", "coverage": "pnpm test:coverage --run && pnpm e2e:coverage && pnpm coverage:merge", "ci": "vitest run", @@ -77,9 +78,10 @@ "@types/rollup-plugin-visualizer": "^4.2.1", "@typescript-eslint/eslint-plugin": "^5.59.0", "@typescript-eslint/parser": "^5.59.0", - "@vitest/coverage-istanbul": "^0.32.2", + "@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", @@ -91,20 +93,20 @@ "eslint-plugin-cypress": "^2.13.2", "eslint-plugin-html": "^7.1.0", "eslint-plugin-jest": "^27.2.1", - "eslint-plugin-jsdoc": "^43.0.7", + "eslint-plugin-jsdoc": "^46.0.0", "eslint-plugin-json": "^3.1.0", "eslint-plugin-lodash": "^7.4.0", "eslint-plugin-markdown": "^3.0.0", "eslint-plugin-no-only-tests": "^3.1.0", "eslint-plugin-tsdoc": "^0.2.17", - "eslint-plugin-unicorn": "^46.0.0", + "eslint-plugin-unicorn": "^47.0.0", "express": "^4.18.2", "globby": "^13.1.4", "husky": "^8.0.3", "jest": "^29.5.0", "jison": "^0.4.18", "js-yaml": "^4.1.0", - "jsdom": "^21.1.1", + "jsdom": "^22.0.0", "lint-staged": "^13.2.1", "nyc": "^15.1.0", "path-browserify": "^1.0.1", @@ -121,7 +123,7 @@ "vitest": "^0.32.2" }, "volta": { - "node": "18.16.0" + "node": "18.16.1" }, "nyc": { "report-dir": "coverage/cypress" 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, 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 148bab5b6..351dba4b9 100644 --- a/packages/mermaid/package.json +++ b/packages/mermaid/package.json @@ -1,6 +1,6 @@ { "name": "mermaid", - "version": "10.2.3", + "version": "10.2.4", "description": "Markdown-ish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.", "type": "module", "module": "./dist/mermaid.core.mjs", @@ -27,11 +27,14 @@ "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", - "docs:build:vitepress": "pnpm docs:pre:vitepress && (cd src/vitepress && pnpm --filter ./ install --no-frozen-lockfile --ignore-scripts && 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: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\"", "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" }, @@ -53,13 +56,16 @@ }, "dependencies": { "@braintree/sanitize-url": "^6.0.2", + "@types/d3-scale": "^4.0.3", + "@types/d3-scale-chromatic": "^3.0.0", "cytoscape": "^3.23.0", "cytoscape-cose-bilkent": "^4.1.0", "cytoscape-fcose": "^2.1.0", "d3": "^7.4.0", + "d3-sankey": "^0.12.3", "dagre-d3-es": "7.0.10", "dayjs": "^1.11.7", - "dompurify": "3.0.3", + "dompurify": "3.0.4", "elkjs": "^0.8.2", "katex": "^0.15.2", "khroma": "^2.0.0", @@ -72,8 +78,10 @@ "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", "@types/d3-selection": "^3.0.5", "@types/dompurify": "^3.0.2", "@types/jsdom": "^21.1.1", @@ -84,6 +92,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", @@ -93,7 +102,8 @@ "globby": "^13.1.4", "jison": "^0.4.18", "js-base64": "^3.7.5", - "jsdom": "^21.1.1", + "jsdom": "^22.0.0", + "json-schema-to-typescript": "^11.0.3", "micromatch": "^4.0.5", "path-browserify": "^1.0.1", "prettier": "^2.8.8", @@ -106,6 +116,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/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/packages/mermaid/src/accessibility.spec.ts b/packages/mermaid/src/accessibility.spec.ts index 7a3ab7f10..7745e02ef 100644 --- a/packages/mermaid/src/accessibility.spec.ts +++ b/packages/mermaid/src/accessibility.spec.ts @@ -1,27 +1,24 @@ import { MockedD3 } from './tests/MockedD3.js'; import { setA11yDiagramInfo, addSVGa11yTitleDescription } from './accessibility.js'; -import { D3Element } from './mermaidAPI.js'; +import type { D3Element } from './mermaidAPI.js'; describe('accessibility', () => { - const fauxSvgNode = new MockedD3(); + const fauxSvgNode: MockedD3 = new MockedD3(); describe('setA11yDiagramInfo', () => { - it('sets the svg element role to "graphics-document document"', () => { - // @ts-ignore Required to easily handle the d3 select types + it('should set svg element role to "graphics-document document"', () => { const svgAttrSpy = vi.spyOn(fauxSvgNode, 'attr').mockReturnValue(fauxSvgNode); setA11yDiagramInfo(fauxSvgNode, 'flowchart'); expect(svgAttrSpy).toHaveBeenCalledWith('role', 'graphics-document document'); }); - it('sets the aria-roledescription to the diagram type', () => { - // @ts-ignore Required to easily handle the d3 select types + it('should set aria-roledescription to the diagram type', () => { const svgAttrSpy = vi.spyOn(fauxSvgNode, 'attr').mockReturnValue(fauxSvgNode); setA11yDiagramInfo(fauxSvgNode, 'flowchart'); expect(svgAttrSpy).toHaveBeenCalledWith('aria-roledescription', 'flowchart'); }); - it('does not set the aria-roledescription if the diagram type is empty', () => { - // @ts-ignore Required to easily handle the d3 select types + it('should not set aria-roledescription if the diagram type is empty', () => { const svgAttrSpy = vi.spyOn(fauxSvgNode, 'attr').mockReturnValue(fauxSvgNode); setA11yDiagramInfo(fauxSvgNode, ''); expect(svgAttrSpy).toHaveBeenCalledTimes(1); @@ -32,8 +29,8 @@ describe('accessibility', () => { describe('addSVGa11yTitleDescription', () => { const givenId = 'theBaseId'; - describe('with the given svg d3 object:', () => { - it('does nothing if there is no insert defined', () => { + describe('with svg d3 object', () => { + it('should do nothing if there is no insert defined', () => { const noInsertSvg = { attr: vi.fn(), }; @@ -42,26 +39,25 @@ describe('accessibility', () => { expect(noInsertAttrSpy).not.toHaveBeenCalled(); }); - // ---------------- - // Convenience functions to DRY up the spec + // convenience functions to DRY up the spec - function expectAriaLabelledByIsTitleId( + function expectAriaLabelledByItTitleId( svgD3Node: D3Element, - title: string | null | undefined, - desc: string | null | undefined, + title: string | undefined, + desc: string | undefined, givenId: string - ) { + ): void { const svgAttrSpy = vi.spyOn(svgD3Node, 'attr').mockReturnValue(svgD3Node); addSVGa11yTitleDescription(svgD3Node, title, desc, givenId); expect(svgAttrSpy).toHaveBeenCalledWith('aria-labelledby', `chart-title-${givenId}`); } - function expectAriaDescribedByIsDescId( + function expectAriaDescribedByItDescId( svgD3Node: D3Element, - title: string | null | undefined, - desc: string | null | undefined, + title: string | undefined, + desc: string | undefined, givenId: string - ) { + ): void { const svgAttrSpy = vi.spyOn(svgD3Node, 'attr').mockReturnValue(svgD3Node); addSVGa11yTitleDescription(svgD3Node, title, desc, givenId); expect(svgAttrSpy).toHaveBeenCalledWith('aria-describedby', `chart-desc-${givenId}`); @@ -69,154 +65,148 @@ describe('accessibility', () => { function a11yTitleTagInserted( svgD3Node: D3Element, - title: string | null | undefined, - desc: string | null | undefined, + title: string | undefined, + desc: string | undefined, givenId: string, callNumber: number - ) { + ): void { a11yTagInserted(svgD3Node, title, desc, givenId, callNumber, 'title', title); } function a11yDescTagInserted( svgD3Node: D3Element, - title: string | null | undefined, - desc: string | null | undefined, + title: string | undefined, + desc: string | undefined, givenId: string, callNumber: number - ) { + ): void { a11yTagInserted(svgD3Node, title, desc, givenId, callNumber, 'desc', desc); } function a11yTagInserted( - svgD3Node: D3Element, - title: string | null | undefined, - desc: string | null | undefined, + _svgD3Node: D3Element, + title: string | undefined, + desc: string | undefined, givenId: string, callNumber: number, expectedPrefix: string, - expectedText: string | null | undefined - ) { - const fauxInsertedD3 = new MockedD3(); - const svgInsertSpy = vi.spyOn(fauxSvgNode, 'insert').mockReturnValue(fauxInsertedD3); - // @ts-ignore Required to easily handle the d3 select types + expectedText: string | undefined + ): void { + const fauxInsertedD3: MockedD3 = new MockedD3(); + const svginsertpy = vi.spyOn(fauxSvgNode, 'insert').mockReturnValue(fauxInsertedD3); const titleAttrSpy = vi.spyOn(fauxInsertedD3, 'attr').mockReturnValue(fauxInsertedD3); const titleTextSpy = vi.spyOn(fauxInsertedD3, 'text'); addSVGa11yTitleDescription(fauxSvgNode, title, desc, givenId); - expect(svgInsertSpy).toHaveBeenCalledWith(expectedPrefix, ':first-child'); + expect(svginsertpy).toHaveBeenCalledWith(expectedPrefix, ':first-child'); expect(titleAttrSpy).toHaveBeenCalledWith('id', `chart-${expectedPrefix}-${givenId}`); expect(titleTextSpy).toHaveBeenNthCalledWith(callNumber, expectedText); } - // ---------------- - describe('given an a11y title', () => { + describe('with a11y title', () => { const a11yTitle = 'a11y title'; - describe('given an a11y description', () => { + describe('with a11y description', () => { const a11yDesc = 'a11y description'; - it('sets aria-labelledby to the title id inserted as a child', () => { - expectAriaLabelledByIsTitleId(fauxSvgNode, a11yTitle, a11yDesc, givenId); + it('shold set aria-labelledby to the title id inserted as a child', () => { + expectAriaLabelledByItTitleId(fauxSvgNode, a11yTitle, a11yDesc, givenId); }); - it('sets aria-describedby to the description id inserted as a child', () => { - expectAriaDescribedByIsDescId(fauxSvgNode, a11yTitle, a11yDesc, givenId); + it('should set aria-describedby to the description id inserted as a child', () => { + expectAriaDescribedByItDescId(fauxSvgNode, a11yTitle, a11yDesc, givenId); }); - it('inserts a title tag as the first child with the text set to the accTitle given', () => { + it('should insert title tag as the first child with the text set to the accTitle given', () => { a11yTitleTagInserted(fauxSvgNode, a11yTitle, a11yDesc, givenId, 2); }); - it('inserts a desc tag as the 2nd child with the text set to accDescription given', () => { + it('should insert desc tag as the 2nd child with the text set to accDescription given', () => { a11yDescTagInserted(fauxSvgNode, a11yTitle, a11yDesc, givenId, 1); }); }); - describe(`no a11y description`, () => { + describe(`without a11y description`, () => { const a11yDesc = undefined; - it('sets aria-labelledby to the title id inserted as a child', () => { - expectAriaLabelledByIsTitleId(fauxSvgNode, a11yTitle, a11yDesc, givenId); + it('should set aria-labelledby to the title id inserted as a child', () => { + expectAriaLabelledByItTitleId(fauxSvgNode, a11yTitle, a11yDesc, givenId); }); - it('no aria-describedby is set', () => { - // @ts-ignore Required to easily handle the d3 select types + it('should not set aria-describedby', () => { const svgAttrSpy = vi.spyOn(fauxSvgNode, 'attr').mockReturnValue(fauxSvgNode); addSVGa11yTitleDescription(fauxSvgNode, a11yTitle, a11yDesc, givenId); expect(svgAttrSpy).not.toHaveBeenCalledWith('aria-describedby', expect.anything()); }); - it('inserts a title tag as the first child with the text set to the accTitle given', () => { + it('should insert title tag as the first child with the text set to the accTitle given', () => { a11yTitleTagInserted(fauxSvgNode, a11yTitle, a11yDesc, givenId, 1); }); - it('no description tag is inserted', () => { - const fauxTitle = new MockedD3(); - const svgInsertSpy = vi.spyOn(fauxSvgNode, 'insert').mockReturnValue(fauxTitle); + it('should not insert description tag', () => { + const fauxTitle: MockedD3 = new MockedD3(); + const svginsertpy = vi.spyOn(fauxSvgNode, 'insert').mockReturnValue(fauxTitle); addSVGa11yTitleDescription(fauxSvgNode, a11yTitle, a11yDesc, givenId); - expect(svgInsertSpy).not.toHaveBeenCalledWith('desc', ':first-child'); + expect(svginsertpy).not.toHaveBeenCalledWith('desc', ':first-child'); }); }); }); - describe('no a11y title', () => { + describe('without a11y title', () => { const a11yTitle = undefined; - describe('given an a11y description', () => { + describe('with a11y description', () => { const a11yDesc = 'a11y description'; - it('no aria-labelledby is set', () => { - // @ts-ignore Required to easily handle the d3 select types + it('should not set aria-labelledby', () => { const svgAttrSpy = vi.spyOn(fauxSvgNode, 'attr').mockReturnValue(fauxSvgNode); addSVGa11yTitleDescription(fauxSvgNode, a11yTitle, a11yDesc, givenId); expect(svgAttrSpy).not.toHaveBeenCalledWith('aria-labelledby', expect.anything()); }); - it('no title tag inserted', () => { - const fauxTitle = new MockedD3(); - const svgInsertSpy = vi.spyOn(fauxSvgNode, 'insert').mockReturnValue(fauxTitle); + it('should not insert title tag', () => { + const fauxTitle: MockedD3 = new MockedD3(); + const svginsertpy = vi.spyOn(fauxSvgNode, 'insert').mockReturnValue(fauxTitle); addSVGa11yTitleDescription(fauxSvgNode, a11yTitle, a11yDesc, givenId); - expect(svgInsertSpy).not.toHaveBeenCalledWith('title', ':first-child'); + expect(svginsertpy).not.toHaveBeenCalledWith('title', ':first-child'); }); - it('sets aria-describedby to the description id inserted as a child', () => { - expectAriaDescribedByIsDescId(fauxSvgNode, a11yTitle, a11yDesc, givenId); + it('should set aria-describedby to the description id inserted as a child', () => { + expectAriaDescribedByItDescId(fauxSvgNode, a11yTitle, a11yDesc, givenId); }); - it('inserts a desc tag as the 2nd child with the text set to accDescription given', () => { + it('should insert desc tag as the 2nd child with the text set to accDescription given', () => { a11yDescTagInserted(fauxSvgNode, a11yTitle, a11yDesc, givenId, 1); }); }); - describe('no a11y description', () => { + describe('without a11y description', () => { const a11yDesc = undefined; - it('no aria-labelledby is set', () => { - // @ts-ignore Required to easily handle the d3 select types + it('should not set aria-labelledby', () => { const svgAttrSpy = vi.spyOn(fauxSvgNode, 'attr').mockReturnValue(fauxSvgNode); addSVGa11yTitleDescription(fauxSvgNode, a11yTitle, a11yDesc, givenId); expect(svgAttrSpy).not.toHaveBeenCalledWith('aria-labelledby', expect.anything()); }); - it('no aria-describedby is set', () => { - // @ts-ignore Required to easily handle the d3 select types + it('should not set aria-describedby', () => { const svgAttrSpy = vi.spyOn(fauxSvgNode, 'attr').mockReturnValue(fauxSvgNode); addSVGa11yTitleDescription(fauxSvgNode, a11yTitle, a11yDesc, givenId); expect(svgAttrSpy).not.toHaveBeenCalledWith('aria-describedby', expect.anything()); }); - it('no title tag inserted', () => { - const fauxTitle = new MockedD3(); - const svgInsertSpy = vi.spyOn(fauxSvgNode, 'insert').mockReturnValue(fauxTitle); + it('should not insert title tag', () => { + const fauxTitle: MockedD3 = new MockedD3(); + const svginsertpy = vi.spyOn(fauxSvgNode, 'insert').mockReturnValue(fauxTitle); addSVGa11yTitleDescription(fauxSvgNode, a11yTitle, a11yDesc, givenId); - expect(svgInsertSpy).not.toHaveBeenCalledWith('title', ':first-child'); + expect(svginsertpy).not.toHaveBeenCalledWith('title', ':first-child'); }); - it('no description tag inserted', () => { - const fauxDesc = new MockedD3(); - const svgInsertSpy = vi.spyOn(fauxSvgNode, 'insert').mockReturnValue(fauxDesc); + it('should not insert description tag', () => { + const fauxDesc: MockedD3 = new MockedD3(); + const svginsertpy = vi.spyOn(fauxSvgNode, 'insert').mockReturnValue(fauxDesc); addSVGa11yTitleDescription(fauxSvgNode, a11yTitle, a11yDesc, givenId); - expect(svgInsertSpy).not.toHaveBeenCalledWith('desc', ':first-child'); + expect(svginsertpy).not.toHaveBeenCalledWith('desc', ':first-child'); }); }); }); diff --git a/packages/mermaid/src/accessibility.ts b/packages/mermaid/src/accessibility.ts index eba3ba9a7..69e22b301 100644 --- a/packages/mermaid/src/accessibility.ts +++ b/packages/mermaid/src/accessibility.ts @@ -1,13 +1,11 @@ /** - * Accessibility (a11y) functions, types, helpers + * Accessibility (a11y) functions, types, helpers. + * * @see https://www.w3.org/WAI/ * @see https://www.w3.org/TR/wai-aria-1.1/ * @see https://www.w3.org/TR/svg-aam-1.0/ - * */ -import { D3Element } from './mermaidAPI.js'; - -import isEmpty from 'lodash-es/isEmpty.js'; +import type { D3Element } from './mermaidAPI.js'; /** * SVG element role: @@ -21,50 +19,47 @@ import isEmpty from 'lodash-es/isEmpty.js'; const SVG_ROLE = 'graphics-document document'; /** - * Add role and aria-roledescription to the svg element + * Add role and aria-roledescription to the svg element. * * @param svg - d3 object that contains the SVG HTML element * @param diagramType - diagram name for to the aria-roledescription */ -export function setA11yDiagramInfo(svg: D3Element, diagramType: string | null | undefined) { +export function setA11yDiagramInfo(svg: D3Element, diagramType: string) { svg.attr('role', SVG_ROLE); - if (!isEmpty(diagramType)) { + if (diagramType !== '') { svg.attr('aria-roledescription', diagramType); } } + /** * Add an accessible title and/or description element to a chart. * The title is usually not displayed and the description is never displayed. * - * The following charts display their title as a visual and accessibility element: gantt + * The following charts display their title as a visual and accessibility element: gantt. * * @param svg - d3 node to insert the a11y title and desc info - * @param a11yTitle - a11y title. null and undefined are meaningful: means to skip it - * @param a11yDesc - a11y description. null and undefined are meaningful: means to skip it + * @param a11yTitle - a11y title. undefined or empty strings mean to skip them + * @param a11yDesc - a11y description. undefined or empty strings mean to skip them * @param baseId - id used to construct the a11y title and description id */ export function addSVGa11yTitleDescription( svg: D3Element, - a11yTitle: string | null | undefined, - a11yDesc: string | null | undefined, + a11yTitle: string | undefined, + a11yDesc: string | undefined, baseId: string -) { +): void { if (svg.insert === undefined) { return; } - if (a11yTitle || a11yDesc) { - if (a11yDesc) { - const descId = 'chart-desc-' + baseId; - svg.attr('aria-describedby', descId); - svg.insert('desc', ':first-child').attr('id', descId).text(a11yDesc); - } - if (a11yTitle) { - const titleId = 'chart-title-' + baseId; - svg.attr('aria-labelledby', titleId); - svg.insert('title', ':first-child').attr('id', titleId).text(a11yTitle); - } - } else { - return; + if (a11yDesc) { + const descId = `chart-desc-${baseId}`; + svg.attr('aria-describedby', descId); + svg.insert('desc', ':first-child').attr('id', descId).text(a11yDesc); + } + if (a11yTitle) { + const titleId = `chart-title-${baseId}`; + svg.attr('aria-labelledby', titleId); + svg.insert('title', ':first-child').attr('id', titleId).text(a11yTitle); } } diff --git a/packages/mermaid/src/assignWithDepth.js b/packages/mermaid/src/assignWithDepth.js index 898481c30..6f2e706ab 100644 --- a/packages/mermaid/src/assignWithDepth.js +++ b/packages/mermaid/src/assignWithDepth.js @@ -20,7 +20,7 @@ * of src to dst in order. * @param {any} dst - The destination of the merge * @param {any} src - The source object(s) to merge into destination - * @param {{ depth: number; clobber: boolean }} [config={ depth: 2, clobber: false }] - Depth: depth + * @param {{ depth: number; clobber: boolean }} [config] - Depth: depth * to traverse within src and dst for merging - clobber: should dissimilar types clobber (default: * { depth: 2, clobber: false }). Default is `{ depth: 2, clobber: false }` * @returns {any} diff --git a/packages/mermaid/src/config.spec.js b/packages/mermaid/src/config.spec.js deleted file mode 100644 index 1f7fd976b..000000000 --- a/packages/mermaid/src/config.spec.js +++ /dev/null @@ -1,56 +0,0 @@ -import * as configApi from './config.js'; - -describe('when working with site config', function () { - beforeEach(() => { - // Resets the site config to default config - configApi.setSiteConfig({}); - }); - it('should set site config and config properly', function () { - let config_0 = { foo: 'bar', bar: 0 }; - configApi.setSiteConfig(config_0); - let config_1 = configApi.getSiteConfig(); - let config_2 = configApi.getConfig(); - expect(config_1.foo).toEqual(config_0.foo); - expect(config_1.bar).toEqual(config_0.bar); - expect(config_1).toEqual(config_2); - }); - it('should respect secure keys when applying directives', function () { - let config_0 = { - foo: 'bar', - bar: 'cant-be-changed', - secure: [...configApi.defaultConfig.secure, 'bar'], - }; - configApi.setSiteConfig(config_0); - const directive = { foo: 'baf', bar: 'should-not-be-allowed' }; - const cfg = configApi.updateCurrentConfig(config_0, [directive]); - expect(cfg.foo).toEqual(directive.foo); - expect(cfg.bar).toBe(config_0.bar); - }); - it('should set reset config properly', function () { - let config_0 = { foo: 'bar', bar: 0 }; - configApi.setSiteConfig(config_0); - let config_1 = { foo: 'baf' }; - configApi.setConfig(config_1); - let config_2 = configApi.getConfig(); - expect(config_2.foo).toEqual(config_1.foo); - configApi.reset(); - let config_3 = configApi.getConfig(); - expect(config_3.foo).toEqual(config_0.foo); - let config_4 = configApi.getSiteConfig(); - expect(config_4.foo).toEqual(config_0.foo); - }); - it('should set global reset config properly', function () { - let config_0 = { foo: 'bar', bar: 0 }; - configApi.setSiteConfig(config_0); - let config_1 = configApi.getSiteConfig(); - expect(config_1.foo).toEqual(config_0.foo); - let config_2 = configApi.getConfig(); - expect(config_2.foo).toEqual(config_0.foo); - configApi.setConfig({ foobar: 'bar0' }); - let config_3 = configApi.getConfig(); - expect(config_3.foobar).toEqual('bar0'); - configApi.reset(); - let config_4 = configApi.getConfig(); - expect(config_4.foobar).toBeUndefined(); - }); -}); diff --git a/packages/mermaid/src/config.spec.ts b/packages/mermaid/src/config.spec.ts new file mode 100644 index 000000000..457cb8244 --- /dev/null +++ b/packages/mermaid/src/config.spec.ts @@ -0,0 +1,72 @@ +import * as configApi from './config.js'; + +describe('when working with site config', function () { + beforeEach(() => { + // Resets the site config to default config + configApi.setSiteConfig({}); + }); + it('should set site config and config properly', function () { + const config_0 = { fontFamily: 'foo-font', fontSize: 150 }; + configApi.setSiteConfig(config_0); + const config_1 = configApi.getSiteConfig(); + const config_2 = configApi.getConfig(); + expect(config_1.fontFamily).toEqual(config_0.fontFamily); + expect(config_1.fontSize).toEqual(config_0.fontSize); + expect(config_1).toEqual(config_2); + }); + it('should respect secure keys when applying directives', function () { + const config_0 = { + fontFamily: 'foo-font', + fontSize: 12345, // can't be changed + secure: [...configApi.defaultConfig.secure!, 'fontSize'], + }; + configApi.setSiteConfig(config_0); + const directive = { fontFamily: 'baf', fontSize: 54321 /* fontSize shouldn't be changed */ }; + const cfg = configApi.updateCurrentConfig(config_0, [directive]); + expect(cfg.fontFamily).toEqual(directive.fontFamily); + expect(cfg.fontSize).toBe(config_0.fontSize); + }); + it('should allow setting partial options', function () { + const defaultConfig = configApi.getConfig(); + + configApi.setConfig({ + quadrantChart: { + chartHeight: 600, + }, + }); + + const updatedConfig = configApi.getConfig(); + + // deep options we didn't update should remain the same + expect(defaultConfig.quadrantChart!.chartWidth).toEqual( + updatedConfig.quadrantChart!.chartWidth + ); + }); + it('should set reset config properly', function () { + const config_0 = { fontFamily: 'foo-font', fontSize: 150 }; + configApi.setSiteConfig(config_0); + const config_1 = { fontFamily: 'baf' }; + configApi.setConfig(config_1); + const config_2 = configApi.getConfig(); + expect(config_2.fontFamily).toEqual(config_1.fontFamily); + configApi.reset(); + const config_3 = configApi.getConfig(); + expect(config_3.fontFamily).toEqual(config_0.fontFamily); + const config_4 = configApi.getSiteConfig(); + expect(config_4.fontFamily).toEqual(config_0.fontFamily); + }); + it('should set global reset config properly', function () { + const config_0 = { fontFamily: 'foo-font', fontSize: 150 }; + configApi.setSiteConfig(config_0); + const config_1 = configApi.getSiteConfig(); + expect(config_1.fontFamily).toEqual(config_0.fontFamily); + const config_2 = configApi.getConfig(); + expect(config_2.fontFamily).toEqual(config_0.fontFamily); + configApi.setConfig({ altFontFamily: 'bar-font' }); + const config_3 = configApi.getConfig(); + expect(config_3.altFontFamily).toEqual('bar-font'); + configApi.reset(); + const config_4 = configApi.getConfig(); + expect(config_4.altFontFamily).toBeUndefined(); + }); +}); diff --git a/packages/mermaid/src/config.ts b/packages/mermaid/src/config.ts index 838716e2f..e00663827 100644 --- a/packages/mermaid/src/config.ts +++ b/packages/mermaid/src/config.ts @@ -226,9 +226,11 @@ export const reset = (config = siteConfig): void => { updateCurrentConfig(config, directives); }; -enum ConfigWarning { - 'LAZY_LOAD_DEPRECATED' = 'The configuration options lazyLoadedDiagrams and loadExternalDiagramsAtStartup are deprecated. Please use registerExternalDiagrams instead.', -} +const ConfigWarning = { + LAZY_LOAD_DEPRECATED: + 'The configuration options lazyLoadedDiagrams and loadExternalDiagramsAtStartup are deprecated. Please use registerExternalDiagrams instead.', +} as const; + type ConfigWarningStrings = keyof typeof ConfigWarning; const issuedWarnings: { [key in ConfigWarningStrings]?: boolean } = {}; const issueWarning = (warning: ConfigWarningStrings) => { diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts index 2ccfd2632..335e33b19 100644 --- a/packages/mermaid/src/config.type.ts +++ b/packages/mermaid/src/config.type.ts @@ -1,22 +1,152 @@ -// 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 specifies if Mermaid can expect the dependent to include KaTeX stylesheets for browsers + * without their own MathML implementation. If this option is disabled and MathML is not supported, the math + * equations are replaced with a warning. If this option is enabled and MathML is not supported, Mermaid will + * fall back to legacy rendering for KaTeX. + * + */ + legacyMathML?: boolean; + /** + * 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; @@ -32,96 +162,342 @@ export interface MermaidConfig { mindmap?: MindmapDiagramConfig; gitGraph?: GitGraphDiagramConfig; c4?: C4DiagramConfig; - dompurifyConfig?: DOMPurify.Config; + sankey?: SankeyDiagramConfig; + dompurifyConfig?: DOMPurifyConfiguration; wrap?: boolean; fontSize?: number; - legacyMathML?: boolean; } - -// 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 +562,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 +578,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 +612,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 { - 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; + /** + * 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; + /** + * 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,151 +780,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; } - +/** + * 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; + /** + * 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 {}; diff --git a/packages/mermaid/src/dagre-wrapper/GraphObjects.md b/packages/mermaid/src/dagre-wrapper/GraphObjects.md index 184fc5137..840ddf824 100644 --- a/packages/mermaid/src/dagre-wrapper/GraphObjects.md +++ b/packages/mermaid/src/dagre-wrapper/GraphObjects.md @@ -1,6 +1,6 @@ # Cluster handling -Dagre does not support edges between nodes and clusters or between clusters to other clusters. In order to remedy this shortcoming the dagre wrapper implements a few work-arounds. +Dagre does not support edges between nodes and clusters or between clusters to other clusters. In order to remedy this shortcoming the dagre wrapper implements a few workarounds. In the diagram below there are two clusters and there are no edges to nodes outside the own cluster. @@ -73,7 +73,7 @@ Sample object: } ``` -This is set by the renderer of the diagram and insert the data that the wrapper neds for rendering. +This is set by the renderer of the diagram and insert the data that the wrapper needs for rendering. | property | description | | ---------- | ------------------------------------------------------------------------------------------------ | @@ -114,7 +114,7 @@ Required edgeData for proper rendering: | label | overlap between label and labelText? | | labelPos | | | labelType | overlap between label and labelText? | -| thickness | Sets the thinkess of the edge. Can be \['normal', 'thick'\] | +| thickness | Sets the thickness of the edge. Can be \['normal', 'thick'\] | | pattern | Sets the pattern of the edge. Can be \['solid', 'dotted', 'dashed'\] | # Markers diff --git a/packages/mermaid/src/dagre-wrapper/nodes.js b/packages/mermaid/src/dagre-wrapper/nodes.js index b842fa9a5..410703f6c 100644 --- a/packages/mermaid/src/dagre-wrapper/nodes.js +++ b/packages/mermaid/src/dagre-wrapper/nodes.js @@ -602,6 +602,8 @@ const doublecircle = async (parent, node) => { const outerCircle = circleGroup.insert('circle'); const innerCircle = circleGroup.insert('circle'); + circleGroup.attr('class', node.class); + // center the circle around its coordinate outerCircle .attr('style', node.style) diff --git a/packages/mermaid/src/defaultConfig.ts b/packages/mermaid/src/defaultConfig.ts index 4d59fa009..62b361cff 100644 --- a/packages/mermaid/src/defaultConfig.ts +++ b/packages/mermaid/src/defaultConfig.ts @@ -1,570 +1,29 @@ import theme from './themes/index.js'; -import { MermaidConfig } from './config.type.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 specifies if Mermaid can expected the dependent to include KaTeX stylesheets for browsers - * without their own MathML implementation. If this option is disabled and MathML is not supported, the math - * equations are replaced with a warning. If this option is enabled and MathML is not supported, Mermaid will - * fall back to legacy rendering for KaTeX. - * - * **Notes**: - * - * Default value: false - */ - legacyMathML: false, - /** - * 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, @@ -587,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, @@ -2232,65 +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, + }, + 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/packages/mermaid/src/diagram-api/diagram-orchestration.ts b/packages/mermaid/src/diagram-api/diagram-orchestration.ts index 0253be45d..9c03e27f3 100644 --- a/packages/mermaid/src/diagram-api/diagram-orchestration.ts +++ b/packages/mermaid/src/diagram-api/diagram-orchestration.ts @@ -18,6 +18,7 @@ import errorDiagram from '../diagrams/error/errorDiagram.js'; import flowchartElk from '../diagrams/flowchart/elk/detector.js'; import timeline from '../diagrams/timeline/detector.js'; import mindmap from '../diagrams/mindmap/detector.js'; +import sankey from '../diagrams/sankey/sankeyDetector.js'; import { registerLazyLoadedDiagrams } from './detectType.js'; import { registerDiagram } from './diagramAPI.js'; @@ -79,6 +80,7 @@ export const addDiagrams = () => { stateV2, state, journey, - quadrantChart + quadrantChart, + sankey ); }; diff --git a/packages/mermaid/src/diagram-api/diagramAPI.ts b/packages/mermaid/src/diagram-api/diagramAPI.ts index 457dd673b..7e89d9cd7 100644 --- a/packages/mermaid/src/diagram-api/diagramAPI.ts +++ b/packages/mermaid/src/diagram-api/diagramAPI.ts @@ -7,7 +7,6 @@ import { addStylesForDiagram } from '../styles.js'; import { DiagramDefinition, DiagramDetector } from './types.js'; import * as _commonDb from '../commonDb.js'; import { parseDirective as _parseDirective } from '../directiveUtils.js'; -import isEmpty from 'lodash-es/isEmpty.js'; /* Packaging and exposing resources for external diagrams so that they can import @@ -51,9 +50,7 @@ export const registerDiagram = ( if (detector) { addDetector(id, detector); } - if (!isEmpty(diagram.styles)) { - addStylesForDiagram(id, diagram.styles); - } + addStylesForDiagram(id, diagram.styles); if (diagram.injectUtils) { diagram.injectUtils( diff --git a/packages/mermaid/src/diagram-api/types.ts b/packages/mermaid/src/diagram-api/types.ts index 265af6587..3b8d00456 100644 --- a/packages/mermaid/src/diagram-api/types.ts +++ b/packages/mermaid/src/diagram-api/types.ts @@ -82,3 +82,5 @@ export type ParseDirectiveDefinition = (statement: string, context: string, type export type HTML = d3.Selection; export type SVG = d3.Selection; + +export type DiagramStylesProvider = (options?: any) => string; diff --git a/packages/mermaid/src/diagrams/class/classDb.ts b/packages/mermaid/src/diagrams/class/classDb.ts index 11a1eb37d..7b74aa819 100644 --- a/packages/mermaid/src/diagrams/class/classDb.ts +++ b/packages/mermaid/src/diagrams/class/classDb.ts @@ -448,9 +448,8 @@ const getNamespaces = function (): NamespaceMap { export const addClassesToNamespace = function (id: string, classNames: string[]) { if (namespaces[id] !== undefined) { classNames.map((className) => { + classes[className].parent = id; namespaces[id].classes[className] = classes[className]; - delete classes[className]; - classCounter--; }); } }; diff --git a/packages/mermaid/src/diagrams/class/classDiagram.spec.ts b/packages/mermaid/src/diagrams/class/classDiagram.spec.ts index a43ed2fcd..2182e8c34 100644 --- a/packages/mermaid/src/diagrams/class/classDiagram.spec.ts +++ b/packages/mermaid/src/diagrams/class/classDiagram.spec.ts @@ -1373,9 +1373,54 @@ class Class2 parser.parse(str); const testNamespace = parser.yy.getNamespace('Namespace1'); + const testClasses = parser.yy.getClasses(); expect(Object.keys(testNamespace.classes).length).toBe(2); expect(Object.keys(testNamespace.children).length).toBe(0); expect(testNamespace.classes['Class1'].id).toBe('Class1'); + expect(Object.keys(testClasses).length).toBe(2); + }); + + it('should add relations between classes of different namespaces', function () { + const str = `classDiagram + A1 --> B1 + namespace A { + class A1 { + +foo : string + } + class A2 { + +bar : int + } + } + namespace B { + class B1 { + +foo : bool + } + class B2 { + +bar : float + } + } + A2 --> B2`; + + parser.parse(str); + const testNamespaceA = parser.yy.getNamespace('A'); + const testNamespaceB = parser.yy.getNamespace('B'); + const testClasses = parser.yy.getClasses(); + const testRelations = parser.yy.getRelations(); + expect(Object.keys(testNamespaceA.classes).length).toBe(2); + expect(testNamespaceA.classes['A1'].members[0]).toBe('+foo : string'); + expect(testNamespaceA.classes['A2'].members[0]).toBe('+bar : int'); + expect(Object.keys(testNamespaceB.classes).length).toBe(2); + expect(testNamespaceB.classes['B1'].members[0]).toBe('+foo : bool'); + expect(testNamespaceB.classes['B2'].members[0]).toBe('+bar : float'); + expect(Object.keys(testClasses).length).toBe(4); + expect(testClasses['A1'].parent).toBe('A'); + expect(testClasses['A2'].parent).toBe('A'); + expect(testClasses['B1'].parent).toBe('B'); + expect(testClasses['B2'].parent).toBe('B'); + expect(testRelations[0].id1).toBe('A1'); + expect(testRelations[0].id2).toBe('B1'); + expect(testRelations[1].id1).toBe('A2'); + expect(testRelations[1].id2).toBe('B2'); }); }); diff --git a/packages/mermaid/src/diagrams/class/classRenderer-v2.ts b/packages/mermaid/src/diagrams/class/classRenderer-v2.ts index e0cfea641..6197fe8ac 100644 --- a/packages/mermaid/src/diagrams/class/classRenderer-v2.ts +++ b/packages/mermaid/src/diagrams/class/classRenderer-v2.ts @@ -93,52 +93,51 @@ export const addClasses = function ( log.info(classes); // Iterate through each item in the vertex object (containing all the vertices found) in the graph definition - keys.forEach(function (id) { - const vertex = classes[id]; + keys + .filter((id) => classes[id].parent == parent) + .forEach(function (id) { + const vertex = classes[id]; - /** - * Variable for storing the classes for the vertex - */ - let cssClassStr = ''; - if (vertex.cssClasses.length > 0) { - cssClassStr = cssClassStr + ' ' + vertex.cssClasses.join(' '); - } + /** + * Variable for storing the classes for the vertex + */ + const cssClassStr = vertex.cssClasses.join(' '); - const styles = { labelStyle: '', style: '' }; //getStylesFromArray(vertex.styles); + const styles = { labelStyle: '', style: '' }; //getStylesFromArray(vertex.styles); - // Use vertex id as text in the box if no text is provided by the graph definition - const vertexText = vertex.label ?? vertex.id; - const radius = 0; - const shape = 'class_box'; + // Use vertex id as text in the box if no text is provided by the graph definition + const vertexText = vertex.label ?? vertex.id; + const radius = 0; + const shape = 'class_box'; - // Add the node - const node = { - labelStyle: styles.labelStyle, - shape: shape, - labelText: sanitizeText(vertexText), - classData: vertex, - rx: radius, - ry: radius, - class: cssClassStr, - style: styles.style, - id: vertex.id, - domId: vertex.domId, - tooltip: diagObj.db.getTooltip(vertex.id, parent) || '', - haveCallback: vertex.haveCallback, - link: vertex.link, - width: vertex.type === 'group' ? 500 : undefined, - type: vertex.type, - // TODO V10: Flowchart ? Keeping flowchart for backwards compatibility. Remove in next major release - padding: getConfig().flowchart?.padding ?? getConfig().class?.padding, - }; - g.setNode(vertex.id, node); + // Add the node + const node = { + labelStyle: styles.labelStyle, + shape: shape, + labelText: sanitizeText(vertexText), + classData: vertex, + rx: radius, + ry: radius, + class: cssClassStr, + style: styles.style, + id: vertex.id, + domId: vertex.domId, + tooltip: diagObj.db.getTooltip(vertex.id, parent) || '', + haveCallback: vertex.haveCallback, + link: vertex.link, + width: vertex.type === 'group' ? 500 : undefined, + type: vertex.type, + // TODO V10: Flowchart ? Keeping flowchart for backwards compatibility. Remove in next major release + padding: getConfig().flowchart?.padding ?? getConfig().class?.padding, + }; + g.setNode(vertex.id, node); - if (parent) { - g.setParent(vertex.id, parent); - } + if (parent) { + g.setParent(vertex.id, parent); + } - log.info('setNode', node); - }); + log.info('setNode', node); + }); }; /** diff --git a/packages/mermaid/src/diagrams/class/classRenderer.js b/packages/mermaid/src/diagrams/class/classRenderer.js index 3774f7b8c..58def16c2 100644 --- a/packages/mermaid/src/diagrams/class/classRenderer.js +++ b/packages/mermaid/src/diagrams/class/classRenderer.js @@ -141,8 +141,6 @@ const insertMarkers = function (elem) { export const draw = function (text, id, _version, diagObj) { const conf = getConfig().class; idCache = {}; - // diagObj.db.clear(); - // diagObj.parser.parse(text); log.info('Rendering diagram ' + text); diff --git a/packages/mermaid/src/diagrams/class/classTypes.ts b/packages/mermaid/src/diagrams/class/classTypes.ts index cf6f20f0b..f3b8dc8cf 100644 --- a/packages/mermaid/src/diagrams/class/classTypes.ts +++ b/packages/mermaid/src/diagrams/class/classTypes.ts @@ -7,6 +7,7 @@ export interface ClassNode { members: string[]; annotations: string[]; domId: string; + parent?: string; link?: string; linkTarget?: string; haveCallback?: boolean; diff --git a/packages/mermaid/src/diagrams/er/erRenderer.js b/packages/mermaid/src/diagrams/er/erRenderer.js index 93e22732a..63fb05633 100644 --- a/packages/mermaid/src/diagrams/er/erRenderer.js +++ b/packages/mermaid/src/diagrams/er/erRenderer.js @@ -568,13 +568,6 @@ export const draw = function (text, id, _version, diagObj) { : select('body'); // const doc = securityLevel === 'sandbox' ? sandboxElement.nodes()[0].contentDocument : document; - // Parse the text to populate erDb - // try { - // parser.parse(text); - // } catch (err) { - // log.debug('Parsing failed'); - // } - // Get a reference to the svg node that contains the text const svg = root.select(`[id='${id}']`); diff --git a/packages/mermaid/src/diagrams/flowchart/flowDb.js b/packages/mermaid/src/diagrams/flowchart/flowDb.js index ceb933e85..ea8fa71d2 100644 --- a/packages/mermaid/src/diagrams/flowchart/flowDb.js +++ b/packages/mermaid/src/diagrams/flowchart/flowDb.js @@ -342,7 +342,10 @@ export const setLink = function (ids, linkStr, target) { setClass(ids, 'clickable'); }; export const getTooltip = function (id) { - return tooltips[id]; + if (tooltips.hasOwnProperty(id)) { + return tooltips[id]; + } + return undefined; }; /** @@ -443,7 +446,7 @@ export const clear = function (ver = 'gen-1') { subGraphs = []; subGraphLookup = {}; subCount = 0; - tooltips = []; + tooltips = {}; firstGraphFlag = true; version = ver; commonClear(); diff --git a/packages/mermaid/src/diagrams/flowchart/flowRenderer.js b/packages/mermaid/src/diagrams/flowchart/flowRenderer.js index 01742c2e1..84c281594 100644 --- a/packages/mermaid/src/diagrams/flowchart/flowRenderer.js +++ b/packages/mermaid/src/diagrams/flowchart/flowRenderer.js @@ -312,13 +312,6 @@ export const draw = async function (text, id, _version, diagObj) { : select('body'); const doc = securityLevel === 'sandbox' ? sandboxElement.nodes()[0].contentDocument : document; - // Parse the graph definition - try { - diagObj.parser.parse(text); - } catch (err) { - log.debug('Parsing failed'); - } - // Fetch the default direction, use TD if none was found let dir = diagObj.db.getDirection(); if (dir === undefined) { diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow-style.spec.js b/packages/mermaid/src/diagrams/flowchart/parser/flow-style.spec.js index e05c48627..3feaa2469 100644 --- a/packages/mermaid/src/diagrams/flowchart/parser/flow-style.spec.js +++ b/packages/mermaid/src/diagrams/flowchart/parser/flow-style.spec.js @@ -338,4 +338,20 @@ describe('[Style] when parsing', () => { expect(edges[0].type).toBe('arrow_point'); }); + + it('should handle multiple vertices with style', function () { + const res = flow.parser.parse(` + graph TD + classDef C1 stroke-dasharray:4 + classDef C2 stroke-dasharray:6 + A & B:::C1 & D:::C1 --> E:::C2 + `); + + const vert = flow.parser.yy.getVertices(); + + expect(vert['A'].classes.length).toBe(0); + expect(vert['B'].classes[0]).toBe('C1'); + expect(vert['D'].classes[0]).toBe('C1'); + expect(vert['E'].classes[0]).toBe('C2'); + }); }); diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow.jison b/packages/mermaid/src/diagrams/flowchart/parser/flow.jison index 51427118f..70fb49162 100644 --- a/packages/mermaid/src/diagrams/flowchart/parser/flow.jison +++ b/packages/mermaid/src/diagrams/flowchart/parser/flow.jison @@ -359,7 +359,7 @@ statement separator: NEWLINE | SEMI | EOF ; - + verticeStatement: verticeStatement link node { /* console.warn('vs',$1.stmt,$3); */ yy.addLink($1.stmt,$3,$2); $$ = { stmt: $3, nodes: $3.concat($1.nodes) } } | verticeStatement link node spaceList @@ -368,12 +368,16 @@ verticeStatement: verticeStatement link node |node { /*console.warn('noda', $1);*/ $$ = {stmt: $1, nodes:$1 }} ; -node: vertex +node: styledVertex { /* console.warn('nod', $1); */ $$ = [$1];} - | node spaceList AMP spaceList vertex + | node spaceList AMP spaceList styledVertex { $$ = $1.concat($5); /* console.warn('pip', $1[0], $5, $$); */ } + ; + +styledVertex: vertex + { /* console.warn('nod', $1); */ $$ = $1;} | vertex STYLE_SEPARATOR idString - {$$ = [$1];yy.setClass($1,$3)} + {$$ = $1;yy.setClass($1,$3)} ; vertex: idString SQS text SQE diff --git a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js index ff16fef7c..215a4df29 100644 --- a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js +++ b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js @@ -59,8 +59,6 @@ let w; export const draw = function (text, id, version, diagObj) { const conf = getConfig().gantt; - // diagObj.db.clear(); - // parser.parse(text); const securityLevel = getConfig().securityLevel; // Handle root and Document for when rendering in sandbox mode let sandboxElement; diff --git a/packages/mermaid/src/diagrams/git/gitGraphRenderer-old.js b/packages/mermaid/src/diagrams/git/gitGraphRenderer-old.js index b8cff72ec..a3b05ad79 100644 --- a/packages/mermaid/src/diagrams/git/gitGraphRenderer-old.js +++ b/packages/mermaid/src/diagrams/git/gitGraphRenderer-old.js @@ -1,7 +1,6 @@ import { curveBasis, line, select } from 'd3'; import db from './gitGraphAst.js'; -import gitGraphParser from './parser/gitGraph.js'; import { logger } from '../../logger.js'; import { interpolateToCurve } from '../../utils.js'; @@ -328,13 +327,7 @@ function renderLines(svg, commit, direction, branchColor = 0) { export const draw = function (txt, id, ver) { try { - const parser = gitGraphParser.parser; - parser.yy = db; - parser.yy.clear(); - logger.debug('in gitgraph renderer', txt + '\n', 'id:', id, ver); - // Parse the graph definition - parser.parse(txt + '\n'); config = Object.assign(config, apiConfig, db.getOptions()); logger.debug('effective options', config); diff --git a/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.js b/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.js index 01d675d83..7e741657b 100644 --- a/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.js +++ b/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.js @@ -167,14 +167,8 @@ function positionNodes(cy) { export const draw = async (text, id, version, diagObj) => { const conf = getConfig(); - // console.log('Config: ', conf); conf.htmlLabels = false; - // This is done only for throwing the error if the text is not valid. - diagObj.db.clear(); - // Parse the graph definition - diagObj.parser.parse(text); - log.debug('Rendering mindmap diagram\n' + text, diagObj.parser); const securityLevel = getConfig().securityLevel; diff --git a/packages/mermaid/src/diagrams/pie/pieRenderer.js b/packages/mermaid/src/diagrams/pie/pieRenderer.js index 1ee34e192..d4242c087 100644 --- a/packages/mermaid/src/diagrams/pie/pieRenderer.js +++ b/packages/mermaid/src/diagrams/pie/pieRenderer.js @@ -33,9 +33,6 @@ export const draw = (txt, id, _version, diagObj) => { const doc = securityLevel === 'sandbox' ? sandboxElement.nodes()[0].contentDocument : document; // Parse the Pie Chart definition - diagObj.db.clear(); - diagObj.parser.parse(txt); - log.debug('Parsed info diagram'); const elem = doc.getElementById(id); width = elem.parentElement.offsetWidth; 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; diff --git a/packages/mermaid/src/diagrams/requirement/requirementRenderer.js b/packages/mermaid/src/diagrams/requirement/requirementRenderer.js index b88f5c203..49b782865 100644 --- a/packages/mermaid/src/diagrams/requirement/requirementRenderer.js +++ b/packages/mermaid/src/diagrams/requirement/requirementRenderer.js @@ -306,8 +306,6 @@ const elementString = (str) => { export const draw = (text, id, _version, diagObj) => { conf = getConfig().requirement; - diagObj.db.clear(); - diagObj.parser.parse(text); const securityLevel = conf.securityLevel; // Handle root and Document for when rendering in sandbox mode diff --git a/packages/mermaid/src/diagrams/sankey/parser/energy.csv b/packages/mermaid/src/diagrams/sankey/parser/energy.csv new file mode 100644 index 000000000..d9a8fac9a --- /dev/null +++ b/packages/mermaid/src/diagrams/sankey/parser/energy.csv @@ -0,0 +1,99 @@ +%% There are leading and trailing spaces, do not crop + Agricultural 'waste',Bio-conversion,124.729 +%% line with a comment + +%% Normal line +Bio-conversion,Liquid,0.597 + +%% Line with unquoted sankey keyword +sankey,target,10 + +%% Quoted sankey keyword +"sankey",target,10 + +%% Another normal line +Bio-conversion,Losses,26.862 + +%% Line with integer amount +Bio-conversion,Solid,280 + +%% Some blank lines in the middle of CSV + + +%% Another normal line +Bio-conversion,Gas,81.144 + +%% Quoted line +"Biofuel imports",Liquid,35 + +%% Quoted line with escaped quotes inside +"""Biomass imports""",Solid,35 + +%% Lines containing commas inside +%% Quoted and unquoted values should be equal in terms of graph +"District heating","Heating and cooling, commercial",22.505 +District heating,"Heating and cooling, homes",46.184 + +%% A bunch of lines, normal CSV +Coal imports,Coal,11.606 +Coal reserves,Coal,63.965 +Coal,Solid,75.571 +District heating,Industry,10.639 +Electricity grid,Over generation / exports,104.453 +Electricity grid,Heating and cooling - homes,113.726 +Electricity grid,H2 conversion,27.14 +Electricity grid,Industry,342.165 +Electricity grid,Road transport,37.797 +Electricity grid,Agriculture,4.412 +Electricity grid,Heating and cooling - commercial,40.858 +Electricity grid,Losses,56.691 +Electricity grid,Rail transport,7.863 +Electricity grid,Lighting & appliances - commercial,90.008 +Electricity grid,Lighting & appliances - homes,93.494 +Gas imports,Ngas,40.719 +Gas reserves,Ngas,82.233 +Gas,Heating and cooling - commercial,0.129 +Gas,Losses,1.401 +Gas,Thermal generation,151.891 +Gas,Agriculture,2.096 +Gas,Industry,48.58 +Geothermal,Electricity grid,7.013 +H2 conversion,H2,20.897 +H2 conversion,Losses,6.242 +H2,Road transport,20.897 +Hydro,Electricity grid,6.995 +Liquid,Industry,121.066 +Liquid,International shipping,128.69 +Liquid,Road transport,135.835 +Liquid,Domestic aviation,14.458 +Liquid,International aviation,206.267 +Liquid,Agriculture,3.64 +Liquid,National navigation,33.218 +Liquid,Rail transport,4.413 +Marine algae,Bio-conversion,4.375 +Ngas,Gas,122.952 +Nuclear,Thermal generation,839.978 +Oil imports,Oil,504.287 +Oil reserves,Oil,107.703 +Oil,Liquid,611.99 +Other waste,Solid,56.587 +Other waste,Bio-conversion,77.81 +Pumped heat,Heating and cooling - homes,193.026 +Pumped heat,Heating and cooling - commercial,70.672 +Solar PV,Electricity grid,59.901 +Solar Thermal,Heating and cooling - homes,19.263 +Solar,Solar Thermal,19.263 +Solar,Solar PV,59.901 +Solid,Agriculture,0.882 +Solid,Thermal generation,400.12 +Solid,Industry,46.477 +Thermal generation,Electricity grid,525.531 +Thermal generation,Losses,787.129 +Thermal generation,District heating,79.329 +Tidal,Electricity grid,9.452 +UK land based bioenergy,Bio-conversion,182.01 +"""Wave""",Electricity grid,19.013 +"""Wind""",Electricity grid,289.366 + +%% lines at the end, do not remove + diff --git a/packages/mermaid/src/diagrams/sankey/parser/sankey.jison b/packages/mermaid/src/diagrams/sankey/parser/sankey.jison new file mode 100644 index 000000000..b11f8a87b --- /dev/null +++ b/packages/mermaid/src/diagrams/sankey/parser/sankey.jison @@ -0,0 +1,69 @@ +/** mermaid */ + +//--------------------------------------------------------- +// We support csv format as defined here: +// https://www.ietf.org/rfc/rfc4180.txt +// There are some minor changes for compliance with jison +// We also parse only 3 columns: source,target,value +// And allow blank lines for visual purposes +//--------------------------------------------------------- + +%lex + +%options case-insensitive +%options easy_keword_rules + +%x escaped_text +%x csv + +// as per section 6.1 of RFC 2234 [2] +COMMA \u002C +CR \u000D +LF \u000A +CRLF \u000D\u000A +ESCAPED_QUOTE \u0022 +DQUOTE \u0022 +TEXTDATA [\u0020-\u0021\u0023-\u002B\u002D-\u007E] + +%% + +"sankey-beta" { this.pushState('csv'); return 'SANKEY'; } +<> { return 'EOF' } // match end of file +({CRLF}|{LF}) { return 'NEWLINE' } +{COMMA} { return 'COMMA' } +{DQUOTE} { this.pushState('escaped_text'); return 'DQUOTE'; } +{TEXTDATA}* { return 'NON_ESCAPED_TEXT' } +{DQUOTE}(?!{DQUOTE}) {this.popState('escaped_text'); return 'DQUOTE'; } // unescaped DQUOTE closes string +({TEXTDATA}|{COMMA}|{CR}|{LF}|{DQUOTE}{DQUOTE})* { return 'ESCAPED_TEXT'; } + +/lex + +%start start + +%% // language grammar + +start: SANKEY NEWLINE csv opt_eof; + +csv: record csv_tail; +csv_tail: NEWLINE csv | ; +opt_eof: EOF | ; + +record + : field\[source] COMMA field\[target] COMMA field\[value] { + const source = yy.findOrCreateNode($source.trim().replaceAll('""', '"')); + const target = yy.findOrCreateNode($target.trim().replaceAll('""', '"')); + const value = parseFloat($value.trim()); + yy.addLink(source,target,value); + } // parse only 3 fields, this is not part of CSV standard + ; + +field + : escaped { $$=$escaped; } + | non_escaped { $$=$non_escaped; } + ; + +escaped: DQUOTE ESCAPED_TEXT DQUOTE { $$=$ESCAPED_TEXT; }; + +non_escaped: NON_ESCAPED_TEXT { $$=$NON_ESCAPED_TEXT; }; + + diff --git a/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.ts b/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.ts new file mode 100644 index 000000000..4517ca01f --- /dev/null +++ b/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.ts @@ -0,0 +1,24 @@ +// @ts-ignore: jison doesn't export types +import sankey from './sankey.jison'; +import db from '../sankeyDB.js'; +import { cleanupComments } from '../../../diagram-api/comments.js'; +import { prepareTextForParsing } from '../sankeyUtils.js'; +import * as fs from 'fs'; +import * as path from 'path'; + +describe('Sankey diagram', function () { + describe('when parsing an info graph it', function () { + beforeEach(function () { + sankey.parser.yy = db; + sankey.parser.yy.clear(); + }); + + it('parses csv', async () => { + const csv = path.resolve(__dirname, './energy.csv'); + const data = fs.readFileSync(csv, 'utf8'); + const graphDefinition = prepareTextForParsing(cleanupComments('sankey-beta\n\n ' + data)); + + sankey.parser.parse(graphDefinition); + }); + }); +}); diff --git a/packages/mermaid/src/diagrams/sankey/sankeyDB.ts b/packages/mermaid/src/diagrams/sankey/sankeyDB.ts new file mode 100644 index 000000000..1921e1b85 --- /dev/null +++ b/packages/mermaid/src/diagrams/sankey/sankeyDB.ts @@ -0,0 +1,81 @@ +import * as configApi from '../../config.js'; +import common from '../common/common.js'; +import { + setAccTitle, + getAccTitle, + getAccDescription, + setAccDescription, + setDiagramTitle, + getDiagramTitle, + clear as commonClear, +} from '../../commonDb.js'; + +// Sankey diagram represented by nodes and links between those nodes +let links: SankeyLink[] = []; +// Array of nodes guarantees their order +let nodes: SankeyNode[] = []; +// We also have to track nodes uniqueness (by ID) +let nodesMap: Record = {}; + +const clear = (): void => { + links = []; + nodes = []; + nodesMap = {}; + commonClear(); +}; + +class SankeyLink { + constructor(public source: SankeyNode, public target: SankeyNode, public value: number = 0) {} +} + +/** + * @param source - Node where the link starts + * @param target - Node where the link ends + * @param value - number, float or integer, describes the amount to be passed + */ +const addLink = (source: SankeyNode, target: SankeyNode, value: number): void => { + links.push(new SankeyLink(source, target, value)); +}; + +class SankeyNode { + constructor(public ID: string) {} +} + +const findOrCreateNode = (ID: string): SankeyNode => { + ID = common.sanitizeText(ID, configApi.getConfig()); + + if (!nodesMap[ID]) { + nodesMap[ID] = new SankeyNode(ID); + nodes.push(nodesMap[ID]); + } + return nodesMap[ID]; +}; + +const getNodes = () => nodes; +const getLinks = () => links; + +const getGraph = () => ({ + nodes: nodes.map((node) => ({ id: node.ID })), + links: links.map((link) => ({ + source: link.source.ID, + target: link.target.ID, + value: link.value, + })), +}); + +export default { + nodesMap, + getConfig: () => configApi.getConfig().sankey, + getNodes, + getLinks, + getGraph, + addLink, + findOrCreateNode, + getAccTitle, + setAccTitle, + getAccDescription, + setAccDescription, + getDiagramTitle, + setDiagramTitle, + clear, +}; diff --git a/packages/mermaid/src/diagrams/sankey/sankeyDetector.ts b/packages/mermaid/src/diagrams/sankey/sankeyDetector.ts new file mode 100644 index 000000000..73c4d1428 --- /dev/null +++ b/packages/mermaid/src/diagrams/sankey/sankeyDetector.ts @@ -0,0 +1,20 @@ +import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-api/types.js'; + +const id = 'sankey'; + +const detector: DiagramDetector = (txt) => { + return /^\s*sankey-beta/.test(txt); +}; + +const loader = async () => { + const { diagram } = await import('./sankeyDiagram.js'); + return { id, diagram }; +}; + +const plugin: ExternalDiagramDefinition = { + id, + detector, + loader, +}; + +export default plugin; diff --git a/packages/mermaid/src/diagrams/sankey/sankeyDiagram.ts b/packages/mermaid/src/diagrams/sankey/sankeyDiagram.ts new file mode 100644 index 000000000..d5b62122e --- /dev/null +++ b/packages/mermaid/src/diagrams/sankey/sankeyDiagram.ts @@ -0,0 +1,15 @@ +import { DiagramDefinition } from '../../diagram-api/types.js'; +// @ts-ignore: jison doesn't export types +import parser from './parser/sankey.jison'; +import db from './sankeyDB.js'; +import renderer from './sankeyRenderer.js'; +import { prepareTextForParsing } from './sankeyUtils.js'; + +const originalParse = parser.parse.bind(parser); +parser.parse = (text: string) => originalParse(prepareTextForParsing(text)); + +export const diagram: DiagramDefinition = { + parser, + db, + renderer, +}; diff --git a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts new file mode 100644 index 000000000..a9ee698e9 --- /dev/null +++ b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts @@ -0,0 +1,205 @@ +import { Diagram } from '../../Diagram.js'; +import * as configApi from '../../config.js'; + +import { + select as d3select, + scaleOrdinal as d3scaleOrdinal, + schemeTableau10 as d3schemeTableau10, +} from 'd3'; + +import { + sankey as d3Sankey, + sankeyLinkHorizontal as d3SankeyLinkHorizontal, + sankeyLeft as d3SankeyLeft, + sankeyRight as d3SankeyRight, + sankeyCenter as d3SankeyCenter, + sankeyJustify as d3SankeyJustify, + SankeyNode as d3SankeyNode, +} from 'd3-sankey'; +import { configureSvgSize } from '../../setupGraphViewbox.js'; +import { Uid } from '../../rendering-util/uid.js'; +import type { SankeyLinkColor, SankeyNodeAlignment } from '../../config.type.js'; + +// Map config options to alignment functions +const alignmentsMap: Record< + SankeyNodeAlignment, + (node: d3SankeyNode, n: number) => number +> = { + left: d3SankeyLeft, + right: d3SankeyRight, + center: d3SankeyCenter, + justify: d3SankeyJustify, +}; + +/** + * Draws Sankey diagram. + * + * @param text - The text of the diagram + * @param id - The id of the diagram which will be used as a DOM element id¨ + * @param _version - Mermaid version from package.json + * @param diagObj - A standard diagram containing the db and the text and type etc of the diagram + */ +export const draw = function (text: string, id: string, _version: string, diagObj: Diagram): void { + // Get Sankey config + const { securityLevel, sankey: conf } = configApi.getConfig(); + const defaultSankeyConfig = configApi!.defaultConfig!.sankey!; + + // TODO: + // This code repeats for every diagram + // Figure out what is happening there, probably it should be separated + // The main thing is svg object that is a d3 wrapper for svg operations + // + let sandboxElement: any; + if (securityLevel === 'sandbox') { + sandboxElement = d3select('#i' + id); + } + const root = + securityLevel === 'sandbox' + ? d3select(sandboxElement.nodes()[0].contentDocument.body) + : d3select('body'); + // @ts-ignore TODO root.select is not callable + const svg = securityLevel === 'sandbox' ? root.select(`[id="${id}"]`) : d3select(`[id="${id}"]`); + + // Establish svg dimensions and get width and height + // + const width = conf?.width || defaultSankeyConfig.width!; + const height = conf?.height || defaultSankeyConfig.width!; + const useMaxWidth = conf?.useMaxWidth || defaultSankeyConfig.useMaxWidth!; + const nodeAlignment = conf?.nodeAlignment || defaultSankeyConfig.nodeAlignment!; + + // FIX: using max width prevents height from being set, is it intended? + // to add height directly one can use `svg.attr('height', height)` + // + // @ts-ignore TODO: svg type vs selection mismatch + configureSvgSize(svg, height, width, useMaxWidth); + + // Prepare data for construction based on diagObj.db + // This must be a mutable object with `nodes` and `links` properties: + // + // { + // "nodes": [ { "id": "Alice" }, { "id": "Bob" }, { "id": "Carol" } ], + // "links": [ { "source": "Alice", "target": "Bob", "value": 23 }, { "source": "Bob", "target": "Carol", "value": 43 } ] + // } + // + // @ts-ignore TODO: db should be coerced to sankey DB type + const graph = diagObj.db.getGraph(); + + // Get alignment function + const nodeAlign = alignmentsMap[nodeAlignment]; + + // Construct and configure a Sankey generator + // That will be a function that calculates nodes and links dimensions + // + const nodeWidth = 10; + const sankey = d3Sankey() + .nodeId((d: any) => d.id) // we use 'id' property to identify node + .nodeWidth(nodeWidth) + .nodePadding(10) + .nodeAlign(nodeAlign) + .extent([ + [0, 0], + [width, height], + ]); + + // Compute the Sankey layout: calculate nodes and links positions + // Our `graph` object will be mutated by this and enriched with other properties + // + sankey(graph); + + // Get color scheme for the graph + const colorScheme = d3scaleOrdinal(d3schemeTableau10); + + // Create rectangles for nodes + svg + .append('g') + .attr('class', 'nodes') + .selectAll('.node') + .data(graph.nodes) + .join('g') + .attr('class', 'node') + .attr('id', (d: any) => (d.uid = Uid.next('node-')).id) + .attr('transform', function (d: any) { + return 'translate(' + d.x0 + ',' + d.y0 + ')'; + }) + .attr('x', (d: any) => d.x0) + .attr('y', (d: any) => d.y0) + .append('rect') + .attr('height', (d: any) => { + return d.y1 - d.y0; + }) + .attr('width', (d: any) => d.x1 - d.x0) + .attr('fill', (d: any) => colorScheme(d.id)); + + // Create labels for nodes + svg + .append('g') + .attr('class', 'node-labels') + .attr('font-family', 'sans-serif') + .attr('font-size', 14) + .selectAll('text') + .data(graph.nodes) + .join('text') + .attr('x', (d: any) => (d.x0 < width / 2 ? d.x1 + 6 : d.x0 - 6)) + .attr('y', (d: any) => (d.y1 + d.y0) / 2) + .attr('dy', '0.35em') + .attr('text-anchor', (d: any) => (d.x0 < width / 2 ? 'start' : 'end')) + .text((d: any) => d.id); + + // Creates the paths that represent the links. + const link = svg + .append('g') + .attr('class', 'links') + .attr('fill', 'none') + .attr('stroke-opacity', 0.5) + .selectAll('.link') + .data(graph.links) + .join('g') + .attr('class', 'link') + .style('mix-blend-mode', 'multiply'); + + const linkColor = conf?.linkColor || 'gradient'; + + if (linkColor === 'gradient') { + const gradient = link + .append('linearGradient') + .attr('id', (d: any) => (d.uid = Uid.next('linearGradient-')).id) + .attr('gradientUnits', 'userSpaceOnUse') + .attr('x1', (d: any) => d.source.x1) + .attr('x2', (d: any) => d.target.x0); + + gradient + .append('stop') + .attr('offset', '0%') + .attr('stop-color', (d: any) => colorScheme(d.source.id)); + + gradient + .append('stop') + .attr('offset', '100%') + .attr('stop-color', (d: any) => colorScheme(d.target.id)); + } + + let coloring: any; + switch (linkColor) { + case 'gradient': + coloring = (d: any) => d.uid; + break; + case 'source': + coloring = (d: any) => colorScheme(d.source.id); + break; + case 'target': + coloring = (d: any) => colorScheme(d.target.id); + break; + default: + coloring = linkColor; + } + + link + .append('path') + .attr('d', d3SankeyLinkHorizontal()) + .attr('stroke', coloring) + .attr('stroke-width', (d: any) => Math.max(1, d.width)); +}; + +export default { + draw, +}; diff --git a/packages/mermaid/src/diagrams/sankey/sankeyUtils.ts b/packages/mermaid/src/diagrams/sankey/sankeyUtils.ts new file mode 100644 index 000000000..45ecf21dd --- /dev/null +++ b/packages/mermaid/src/diagrams/sankey/sankeyUtils.ts @@ -0,0 +1,8 @@ +export const prepareTextForParsing = (text: string): string => { + const textToParse = text + .replaceAll(/^[^\S\n\r]+|[^\S\n\r]+$/g, '') // remove all trailing spaces for each row + .replaceAll(/([\n\r])+/g, '\n') // remove empty lines duplicated + .trim(); + + return textToParse; +}; diff --git a/packages/mermaid/src/diagrams/sequence/parser/sequenceDiagram.jison b/packages/mermaid/src/diagrams/sequence/parser/sequenceDiagram.jison index 074cd5975..04f0de20e 100644 --- a/packages/mermaid/src/diagrams/sequence/parser/sequenceDiagram.jison +++ b/packages/mermaid/src/diagrams/sequence/parser/sequenceDiagram.jison @@ -38,6 +38,8 @@ "box" { this.begin('LINE'); return 'box'; } "participant" { this.begin('ID'); return 'participant'; } "actor" { this.begin('ID'); return 'participant_actor'; } +"create" return 'create'; +"destroy" { this.begin('ID'); return 'destroy'; } [^\->:\n,;]+?([\-]*[^\->:\n,;]+?)*?(?=((?!\n)\s)+"as"(?!\n)\s|[#\n;]|$) { yytext = yytext.trim(); this.begin('ALIAS'); return 'ACTOR'; } "as" { this.popState(); this.popState(); this.begin('LINE'); return 'AS'; } (?:) { this.popState(); this.popState(); return 'NEWLINE'; } @@ -138,6 +140,7 @@ directive statement : participant_statement + | 'create' participant_statement {$2.type='createParticipant'; $$=$2;} | 'box' restOfLine box_section end { $3.unshift({type: 'boxStart', boxData:yy.parseBoxData($2) }); @@ -234,10 +237,11 @@ else_sections ; participant_statement - : 'participant' actor 'AS' restOfLine 'NEWLINE' {$2.type='addParticipant';$2.description=yy.parseMessage($4); $$=$2;} - | 'participant' actor 'NEWLINE' {$2.type='addParticipant';$$=$2;} - | 'participant_actor' actor 'AS' restOfLine 'NEWLINE' {$2.type='addActor';$2.description=yy.parseMessage($4); $$=$2;} - | 'participant_actor' actor 'NEWLINE' {$2.type='addActor'; $$=$2;} + : 'participant' actor 'AS' restOfLine 'NEWLINE' {$2.draw='participant'; $2.type='addParticipant';$2.description=yy.parseMessage($4); $$=$2;} + | 'participant' actor 'NEWLINE' {$2.draw='participant'; $2.type='addParticipant';$$=$2;} + | 'participant_actor' actor 'AS' restOfLine 'NEWLINE' {$2.draw='actor'; $2.type='addParticipant';$2.description=yy.parseMessage($4); $$=$2;} + | 'participant_actor' actor 'NEWLINE' {$2.draw='actor'; $2.type='addParticipant'; $$=$2;} + | 'destroy' actor 'NEWLINE' {$2.type='destroyParticipant'; $$=$2;} ; note_statement diff --git a/packages/mermaid/src/diagrams/sequence/sequenceDb.js b/packages/mermaid/src/diagrams/sequence/sequenceDb.js index 89869b64f..b5d68fb9f 100644 --- a/packages/mermaid/src/diagrams/sequence/sequenceDb.js +++ b/packages/mermaid/src/diagrams/sequence/sequenceDb.js @@ -14,12 +14,16 @@ import { let prevActor = undefined; let actors = {}; +let createdActors = {}; +let destroyedActors = {}; let boxes = []; let messages = []; const notes = []; let sequenceNumbersEnabled = false; let wrapEnabled; let currentBox = undefined; +let lastCreated = undefined; +let lastDestroyed = undefined; export const parseDirective = function (statement, context, type) { mermaidAPI.parseDirective(this, statement, context, type); @@ -165,6 +169,12 @@ export const getBoxes = function () { export const getActors = function () { return actors; }; +export const getCreatedActors = function () { + return createdActors; +}; +export const getDestroyedActors = function () { + return destroyedActors; +}; export const getActor = function (id) { return actors[id]; }; @@ -194,6 +204,8 @@ export const autoWrap = () => { export const clear = function () { actors = {}; + createdActors = {}; + destroyedActors = {}; boxes = []; messages = []; sequenceNumbersEnabled = false; @@ -459,10 +471,21 @@ export const apply = function (param) { }); break; case 'addParticipant': - addActor(param.actor, param.actor, param.description, 'participant'); + addActor(param.actor, param.actor, param.description, param.draw); break; - case 'addActor': - addActor(param.actor, param.actor, param.description, 'actor'); + case 'createParticipant': + if (actors[param.actor]) { + throw new Error( + "It is not possible to have actors with the same id, even if one is destroyed before the next is created. Use 'AS' aliases to simulate the behavior" + ); + } + lastCreated = param.actor; + addActor(param.actor, param.actor, param.description, param.draw); + createdActors[param.actor] = messages.length; + break; + case 'destroyParticipant': + lastDestroyed = param.actor; + destroyedActors[param.actor] = messages.length; break; case 'activeStart': addSignal(param.actor, undefined, undefined, param.signalType); @@ -486,6 +509,27 @@ export const apply = function (param) { addDetails(param.actor, param.text); break; case 'addMessage': + if (lastCreated) { + if (param.to !== lastCreated) { + throw new Error( + 'The created participant ' + + lastCreated + + ' does not have an associated creating message after its declaration. Please check the sequence diagram.' + ); + } else { + lastCreated = undefined; + } + } else if (lastDestroyed) { + if (param.to !== lastDestroyed && param.from !== lastDestroyed) { + throw new Error( + 'The destroyed participant ' + + lastDestroyed + + ' does not have an associated destroying message after its declaration. Please check the sequence diagram.' + ); + } else { + lastDestroyed = undefined; + } + } addSignal(param.from, param.to, param.msg, param.signalType); break; case 'boxStart': @@ -566,6 +610,8 @@ export default { showSequenceNumbers, getMessages, getActors, + getCreatedActors, + getDestroyedActors, getActor, getActorKeys, getActorProperty, diff --git a/packages/mermaid/src/diagrams/sequence/sequenceDiagram.spec.js b/packages/mermaid/src/diagrams/sequence/sequenceDiagram.spec.js index f77ba3162..e88fbde1a 100644 --- a/packages/mermaid/src/diagrams/sequence/sequenceDiagram.spec.js +++ b/packages/mermaid/src/diagrams/sequence/sequenceDiagram.spec.js @@ -1404,6 +1404,62 @@ link a: Tests @ https://tests.contoso.com/?svc=alice@contoso.com expect(boxes[0].actorKeys).toEqual(['a', 'b']); expect(boxes[0].fill).toEqual('Aqua'); }); + + it('should handle simple actor creation', async () => { + const str = ` + sequenceDiagram + participant a as Alice + a ->>b: Hello Bob? + create participant c + b-->>c: Hello c! + c ->> b: Hello b? + create actor d as Donald + a ->> d: Hello Donald? + `; + await mermaidAPI.parse(str); + const actors = diagram.db.getActors(); + const createdActors = diagram.db.getCreatedActors(); + expect(actors['c'].name).toEqual('c'); + expect(actors['c'].description).toEqual('c'); + expect(actors['c'].type).toEqual('participant'); + expect(createdActors['c']).toEqual(1); + expect(actors['d'].name).toEqual('d'); + expect(actors['d'].description).toEqual('Donald'); + expect(actors['d'].type).toEqual('actor'); + expect(createdActors['d']).toEqual(3); + }); + it('should handle simple actor destruction', async () => { + const str = ` + sequenceDiagram + participant a as Alice + a ->>b: Hello Bob? + destroy a + b-->>a: Hello Alice! + b ->> c: Where is Alice? + destroy c + b ->> c: Where are you? + `; + await mermaidAPI.parse(str); + const destroyedActors = diagram.db.getDestroyedActors(); + expect(destroyedActors['a']).toEqual(1); + expect(destroyedActors['c']).toEqual(3); + }); + it('should handle the creation and destruction of the same actor', async () => { + const str = ` + sequenceDiagram + a ->>b: Hello Bob? + create participant c + b ->>c: Hello c! + c ->> b: Hello b? + destroy c + b ->> c : Bye c ! + `; + await mermaidAPI.parse(str); + const createdActors = diagram.db.getCreatedActors(); + const destroyedActors = diagram.db.getDestroyedActors(); + expect(createdActors['c']).toEqual(1); + expect(destroyedActors['c']).toEqual(3); + }); }); describe('when checking the bounds in a sequenceDiagram', function () { beforeAll(() => { @@ -1973,7 +2029,9 @@ participant Alice`; expect(bounds.startx).toBe(0); expect(bounds.starty).toBe(0); expect(bounds.stopx).toBe(conf.width); - expect(bounds.stopy).toBe(models.lastActor().y + models.lastActor().height + conf.boxMargin); + expect(bounds.stopy).toBe( + models.lastActor().stopy + models.lastActor().height + conf.boxMargin + ); }); }); }); @@ -2025,7 +2083,7 @@ participant Alice expect(bounds.startx).toBe(0); expect(bounds.starty).toBe(0); expect(bounds.stopy).toBe( - models.lastActor().y + models.lastActor().height + mermaid.sequence.boxMargin + models.lastActor().stopy + models.lastActor().height + mermaid.sequence.boxMargin ); }); it('should handle one actor, when logLevel is 3 (dfg0)', async () => { @@ -2045,7 +2103,7 @@ participant Alice expect(bounds.startx).toBe(0); expect(bounds.starty).toBe(0); expect(bounds.stopy).toBe( - models.lastActor().y + models.lastActor().height + mermaid.sequence.boxMargin + models.lastActor().stopy + models.lastActor().height + mermaid.sequence.boxMargin ); }); it('should hide sequence numbers when autonumber is removed when autonumber is enabled', async () => { diff --git a/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts b/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts index 57d55fd2f..e21872d57 100644 --- a/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts +++ b/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts @@ -1,6 +1,6 @@ // @ts-nocheck TODO: fix file import { select, selectAll } from 'd3'; -import svgDraw, { drawKatex, drawText, fixLifeLineHeights } from './svgDraw.js'; +import svgDraw, { drawKatex, ACTOR_TYPE_WIDTH, drawText, fixLifeLineHeights } from './svgDraw.js'; import { log } from '../../logger.js'; import common, { calculateMathMLDimensions, hasKatex } from '../common/common.js'; import * as svgDrawCommon from '../common/svgDrawCommon'; @@ -485,29 +485,19 @@ const drawMessage = async function (diagram, msgModel, lineStartY: number, diagO } }; -export const drawActors = async function ( +const addActorRenderingData = async function ( diagram, actors, + createdActors, actorKeys, verticalPos, - configuration, messages, isFooter ) { - if (configuration.hideUnusedParticipants === true) { - const newActors = new Set(); - messages.forEach((message) => { - newActors.add(message.from); - newActors.add(message.to); - }); - actorKeys = actorKeys.filter((actorKey) => newActors.has(actorKey)); - } - - // Draw the actors let prevWidth = 0; let prevMargin = 0; - let maxHeight = 0; let prevBox = undefined; + let maxHeight = 0; for (const actorKey of actorKeys) { const actor = actors[actorKey]; @@ -535,12 +525,16 @@ export const drawActors = async function ( actor.height = common.getMax(actor.height || conf.height, conf.height); actor.margin = actor.margin || conf.actorMargin; - actor.x = prevWidth + prevMargin; - actor.y = bounds.getVerticalPos(); + maxHeight = common.getMax(maxHeight, actor.height); + + // if the actor is created by a message, widen margin + if (createdActors[actor.name]) { + prevMargin += actor.width / 2; + } + + actor.x = prevWidth + prevMargin; + actor.starty = bounds.getVerticalPos(); - // Draw the box with the attached line - const height = await svgDraw.drawActor(diagram, actor, conf, isFooter); - maxHeight = common.getMax(maxHeight, height); bounds.insert(actor.x, verticalPos, actor.x + actor.width, actor.height); prevWidth += actor.width + prevMargin; @@ -561,6 +555,28 @@ export const drawActors = async function ( bounds.bumpVerticalPos(maxHeight); }; +export const drawActors = async function (diagram, actors, actorKeys, isFooter) { + if (!isFooter) { + for (const actorKey of actorKeys) { + const actor = actors[actorKey]; + // Draw the box with the attached line + await svgDraw.drawActor(diagram, actor, conf, false); + } + } else { + let maxHeight = 0; + bounds.bumpVerticalPos(conf.boxMargin * 2); + for (const actorKey of actorKeys) { + const actor = actors[actorKey]; + if (!actor.stopy) { + actor.stopy = bounds.getVerticalPos(); + } + const height = await svgDraw.drawActor(diagram, actor, conf, true); + maxHeight = common.getMax(maxHeight, height); + } + bounds.bumpVerticalPos(maxHeight + conf.boxMargin); + } +}; + export const drawActorsPopup = function (diagram, actors, actorKeys, doc) { let maxHeight = 0; let maxWidth = 0; @@ -640,6 +656,95 @@ function adjustLoopHeightForWrap(loopWidths, msg, preMargin, postMargin, addLoop bounds.bumpVerticalPos(heightAdjust); } +/** + * Adjust the msgModel and the actor for the rendering in case the latter is created or destroyed by the msg + * @param msg - the potentially creating or destroying message + * @param msgModel - the model associated with the message + * @param lineStartY - the y position of the message line + * @param index - the index of the current actor under consideration + * @param actors - the array of all actors + * @param createdActors - the array of actors created in the diagram + * @param destroyedActors - the array of actors destroyed in the diagram + */ +function adjustCreatedDestroyedData( + msg, + msgModel, + lineStartY, + index, + actors, + createdActors, + destroyedActors +) { + function receiverAdjustment(actor, adjustment) { + if (actor.x < actors[msg.from].x) { + bounds.insert( + msgModel.stopx - adjustment, + msgModel.starty, + msgModel.startx, + msgModel.stopy + actor.height / 2 + conf.noteMargin + ); + msgModel.stopx = msgModel.stopx + adjustment; + } else { + bounds.insert( + msgModel.startx, + msgModel.starty, + msgModel.stopx + adjustment, + msgModel.stopy + actor.height / 2 + conf.noteMargin + ); + msgModel.stopx = msgModel.stopx - adjustment; + } + } + + function senderAdjustment(actor, adjustment) { + if (actor.x < actors[msg.to].x) { + bounds.insert( + msgModel.startx - adjustment, + msgModel.starty, + msgModel.stopx, + msgModel.stopy + actor.height / 2 + conf.noteMargin + ); + msgModel.startx = msgModel.startx + adjustment; + } else { + bounds.insert( + msgModel.stopx, + msgModel.starty, + msgModel.startx + adjustment, + msgModel.stopy + actor.height / 2 + conf.noteMargin + ); + msgModel.startx = msgModel.startx - adjustment; + } + } + + // if it is a create message + if (createdActors[msg.to] == index) { + const actor = actors[msg.to]; + const adjustment = actor.type == 'actor' ? ACTOR_TYPE_WIDTH / 2 + 3 : actor.width / 2 + 3; + receiverAdjustment(actor, adjustment); + actor.starty = lineStartY - actor.height / 2; + bounds.bumpVerticalPos(actor.height / 2); + } + // if it is a destroy sender message + else if (destroyedActors[msg.from] == index) { + const actor = actors[msg.from]; + if (conf.mirrorActors) { + const adjustment = actor.type == 'actor' ? ACTOR_TYPE_WIDTH / 2 : actor.width / 2; + senderAdjustment(actor, adjustment); + } + actor.stopy = lineStartY - actor.height / 2; + bounds.bumpVerticalPos(actor.height / 2); + } + // if it is a destroy receiver message + else if (destroyedActors[msg.to] == index) { + const actor = actors[msg.to]; + if (conf.mirrorActors) { + const adjustment = actor.type == 'actor' ? ACTOR_TYPE_WIDTH / 2 + 3 : actor.width / 2 + 3; + receiverAdjustment(actor, adjustment); + } + actor.stopy = lineStartY - actor.height / 2; + bounds.bumpVerticalPos(actor.height / 2); + } +} + /** * Draws a sequenceDiagram in the tag with id: id based on the graph definition in text. * @@ -673,8 +778,10 @@ export const draw = async function (_text: string, id: string, _version: string, // Fetch data from the parsing const actors = diagObj.db.getActors(); + const createdActors = diagObj.db.getCreatedActors(); + const destroyedActors = diagObj.db.getDestroyedActors(); const boxes = diagObj.db.getBoxes(); - const actorKeys = diagObj.db.getActorKeys(); + let actorKeys = diagObj.db.getActorKeys(); const messages = diagObj.db.getMessages(); const title = diagObj.db.getDiagramTitle(); const hasBoxes = diagObj.db.hasAtLeastOneBox(); @@ -693,7 +800,16 @@ export const draw = async function (_text: string, id: string, _version: string, } } - await drawActors(diagram, actors, actorKeys, 0, conf, messages, false); + if (conf.hideUnusedParticipants === true) { + const newActors = new Set(); + messages.forEach((message) => { + newActors.add(message.from); + newActors.add(message.to); + }); + actorKeys = actorKeys.filter((actorKey) => newActors.has(actorKey)); + } + + await addActorRenderingData(diagram, actors, createdActors, actorKeys, 0, messages, false); const loopWidths = await calculateLoopBounds(messages, actors, maxMessageWidthPerActor, diagObj); // The arrow head definition is attached to the svg once @@ -727,6 +843,8 @@ export const draw = async function (_text: string, id: string, _version: string, let sequenceIndex = 1; let sequenceIndexStep = 1; const messagesToDraw = []; + const backgrounds = []; + let index = 0; for (const msg of messages) { let loopModel, noteModel, msgModel; @@ -764,7 +882,7 @@ export const draw = async function (_text: string, id: string, _version: string, break; case diagObj.db.LINETYPE.RECT_END: loopModel = bounds.endLoop(); - svgDraw.drawBackgroundRect(diagram, loopModel); + backgrounds.push(loopModel); bounds.models.addLoop(loopModel); bounds.bumpVerticalPos(loopModel.stopy - bounds.getVerticalPos()); break; @@ -883,13 +1001,20 @@ export const draw = async function (_text: string, id: string, _version: string, break; default: try { - // lastMsg = msg - bounds.resetVerticalPos(); msgModel = msg.msgModel; msgModel.starty = bounds.getVerticalPos(); msgModel.sequenceIndex = sequenceIndex; msgModel.sequenceVisible = diagObj.db.showSequenceNumbers(); const lineStartY = await boundMessage(diagram, msgModel); + adjustCreatedDestroyedData( + msg, + msgModel, + lineStartY, + index, + actors, + createdActors, + destroyedActors + ); messagesToDraw.push({ messageModel: msgModel, lineStartY: lineStartY }); bounds.models.addMessage(msgModel); } catch (e) { @@ -912,19 +1037,21 @@ export const draw = async function (_text: string, id: string, _version: string, ) { sequenceIndex = sequenceIndex + sequenceIndexStep; } + index++; } + log.debug('createdActors', createdActors); + log.debug('destroyedActors', destroyedActors); + + await drawActors(diagram, actors, actorKeys, false); for (const e of messagesToDraw) { await drawMessage(diagram, e.messageModel, e.lineStartY, diagObj); } - if (conf.mirrorActors) { - // Draw actors below diagram - bounds.bumpVerticalPos(conf.boxMargin * 2); - await drawActors(diagram, actors, actorKeys, bounds.getVerticalPos(), conf, messages, true); - bounds.bumpVerticalPos(conf.boxMargin); - fixLifeLineHeights(diagram, bounds.getVerticalPos()); + await drawActors(diagram, actors, actorKeys, true); } + backgrounds.forEach((e) => svgDraw.drawBackgroundRect(diagram, e)); + fixLifeLineHeights(diagram, actors, actorKeys, conf); for (const box of bounds.models.boxes) { box.height = bounds.getVerticalPos() - box.y; @@ -946,11 +1073,6 @@ export const draw = async function (_text: string, id: string, _version: string, const { bounds: box } = bounds.getBounds(); - // Adjust line height of actor lines now that the height of the diagram is known - log.debug('For line height fix Querying: #' + id + ' .actor-line'); - const actorLines = selectAll('#' + id + ' .actor-line'); - actorLines.attr('y2', box.stopy); - // Make sure the height of the diagram supports long menus. let boxHeight = box.stopy - box.starty; if (boxHeight < requiredBoxSize.maxHeight) { diff --git a/packages/mermaid/src/diagrams/sequence/svgDraw.js b/packages/mermaid/src/diagrams/sequence/svgDraw.js index 2f0cf2000..30bfb0a90 100644 --- a/packages/mermaid/src/diagrams/sequence/svgDraw.js +++ b/packages/mermaid/src/diagrams/sequence/svgDraw.js @@ -5,6 +5,8 @@ import { ZERO_WIDTH_SPACE, parseFontSize } from '../../utils.js'; import { sanitizeUrl } from '@braintree/sanitize-url'; import * as configApi from '../../config.js'; +export const ACTOR_TYPE_WIDTH = 18 * 2; + export const drawRect = function (elem, rectData) { return svgDrawCommon.drawRect(elem, rectData); }; @@ -336,14 +338,19 @@ export const drawLabel = function (elem, txtObject) { let actorCnt = -1; -export const fixLifeLineHeights = (diagram, bounds) => { - if (!diagram.selectAll) { +export const fixLifeLineHeights = (diagram, actors, actorKeys, conf) => { + if (!diagram.select) { return; } - diagram - .selectAll('.actor-line') - .attr('class', '200') - .attr('y2', bounds - 55); + actorKeys.forEach((actorKey) => { + const actor = actors[actorKey]; + const actorDOM = diagram.select('#actor' + actor.actorCnt); + if (!conf.mirrorActors && actor.stopy) { + actorDOM.attr('y2', actor.stopy + actor.height / 2); + } else if (conf.mirrorActors) { + actorDOM.attr('y2', actor.stopy); + } + }); }; /** @@ -355,10 +362,11 @@ export const fixLifeLineHeights = (diagram, bounds) => { * @param {boolean} isFooter - If the actor is the footer one */ const drawActorTypeParticipant = async function (elem, actor, conf, isFooter) { + const actorY = isFooter ? actor.stopy : actor.starty; const center = actor.x + actor.width / 2; - const centerY = actor.y + 5; + const centerY = actorY + 5; - const boxpluslineGroup = elem.append('g'); + const boxpluslineGroup = elem.append('g').lower(); var g = boxpluslineGroup; if (!isFooter) { @@ -370,6 +378,7 @@ const drawActorTypeParticipant = async function (elem, actor, conf, isFooter) { .attr('x2', center) .attr('y2', 2000) .attr('class', 'actor-line') + .attr('class', '200') .attr('stroke-width', '0.5px') .attr('stroke', '#999'); @@ -390,7 +399,7 @@ const drawActorTypeParticipant = async function (elem, actor, conf, isFooter) { rect.fill = '#eaeaea'; } rect.x = actor.x; - rect.y = actor.y; + rect.y = actorY; rect.width = actor.width; rect.height = actor.height; rect.class = cssclass; @@ -430,8 +439,12 @@ const drawActorTypeParticipant = async function (elem, actor, conf, isFooter) { }; const drawActorTypeActor = async function (elem, actor, conf, isFooter) { + const actorY = isFooter ? actor.stopy : actor.starty; const center = actor.x + actor.width / 2; - const centerY = actor.y + 80; + const centerY = actorY + 80; + + elem.lower(); + if (!isFooter) { actorCnt++; elem @@ -442,15 +455,18 @@ const drawActorTypeActor = async function (elem, actor, conf, isFooter) { .attr('x2', center) .attr('y2', 2000) .attr('class', 'actor-line') + .attr('class', '200') .attr('stroke-width', '0.5px') .attr('stroke', '#999'); + + actor.actorCnt = actorCnt; } const actElem = elem.append('g'); actElem.attr('class', 'actor-man'); const rect = svgDrawCommon.getNoteRect(); rect.x = actor.x; - rect.y = actor.y; + rect.y = actorY; rect.fill = '#eaeaea'; rect.width = actor.width; rect.height = actor.height; @@ -462,33 +478,33 @@ const drawActorTypeActor = async function (elem, actor, conf, isFooter) { .append('line') .attr('id', 'actor-man-torso' + actorCnt) .attr('x1', center) - .attr('y1', actor.y + 25) + .attr('y1', actorY + 25) .attr('x2', center) - .attr('y2', actor.y + 45); + .attr('y2', actorY + 45); actElem .append('line') .attr('id', 'actor-man-arms' + actorCnt) - .attr('x1', center - 18) - .attr('y1', actor.y + 33) - .attr('x2', center + 18) - .attr('y2', actor.y + 33); + .attr('x1', center - ACTOR_TYPE_WIDTH / 2) + .attr('y1', actorY + 33) + .attr('x2', center + ACTOR_TYPE_WIDTH / 2) + .attr('y2', actorY + 33); actElem .append('line') - .attr('x1', center - 18) - .attr('y1', actor.y + 60) + .attr('x1', center - ACTOR_TYPE_WIDTH / 2) + .attr('y1', actorY + 60) .attr('x2', center) - .attr('y2', actor.y + 45); + .attr('y2', actorY + 45); actElem .append('line') .attr('x1', center) - .attr('y1', actor.y + 45) - .attr('x2', center + 16) - .attr('y2', actor.y + 60); + .attr('y1', actorY + 45) + .attr('x2', center + ACTOR_TYPE_WIDTH / 2 - 2) + .attr('y2', actorY + 60); const circle = actElem.append('circle'); circle.attr('cx', actor.x + actor.width / 2); - circle.attr('cy', actor.y + 10); + circle.attr('cy', actorY + 10); circle.attr('r', 15); circle.attr('width', actor.width); circle.attr('height', actor.height); diff --git a/packages/mermaid/src/diagrams/state/stateRenderer-v2.js b/packages/mermaid/src/diagrams/state/stateRenderer-v2.js index 20ae0d112..592cb43cc 100644 --- a/packages/mermaid/src/diagrams/state/stateRenderer-v2.js +++ b/packages/mermaid/src/diagrams/state/stateRenderer-v2.js @@ -358,7 +358,7 @@ const setupDoc = (g, parentParsedItem, doc, diagramStates, diagramDb, altFlag) = * Look through all of the documents (docs) in the parsedItems * Because is a _document_ direction, the default direction is not necessarily the same as the overall default _diagram_ direction. * @param {object[]} parsedItem - the parsed statement item to look through - * @param [defaultDir=DEFAULT_NESTED_DOC_DIR] - the direction to use if none is found + * @param [defaultDir] - the direction to use if none is found * @returns {string} */ const getDir = (parsedItem, defaultDir = DEFAULT_NESTED_DOC_DIR) => { diff --git a/packages/mermaid/src/diagrams/state/stateRenderer.js b/packages/mermaid/src/diagrams/state/stateRenderer.js index 74913a748..689d7a0e5 100644 --- a/packages/mermaid/src/diagrams/state/stateRenderer.js +++ b/packages/mermaid/src/diagrams/state/stateRenderer.js @@ -57,8 +57,6 @@ export const draw = function (text, id, _version, diagObj) { : select('body'); const doc = securityLevel === 'sandbox' ? sandboxElement.nodes()[0].contentDocument : document; - // diagObj.db.clear(); - // parser.parse(text); log.debug('Rendering diagram ' + text); // Fetch the default direction, use TD if none was found diff --git a/packages/mermaid/src/diagrams/timeline/timelineRenderer.ts b/packages/mermaid/src/diagrams/timeline/timelineRenderer.ts index 17460bac2..d44174fe4 100644 --- a/packages/mermaid/src/diagrams/timeline/timelineRenderer.ts +++ b/packages/mermaid/src/diagrams/timeline/timelineRenderer.ts @@ -30,12 +30,6 @@ export const draw = function (text: string, id: string, version: string, diagObj // @ts-expect-error - wrong config? const LEFT_MARGIN = conf.leftMargin ?? 50; - //2. Clear the diagram db before parsing - diagObj.db.clear?.(); - - //3. Parse the diagram text - diagObj.parser.parse(text + '\n'); - log.debug('timeline', diagObj.db); const securityLevel = conf.securityLevel; diff --git a/packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts b/packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts index 9ea880f69..28c83f19d 100644 --- a/packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts +++ b/packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts @@ -49,8 +49,6 @@ const conf = getConfig().journey; const LEFT_MARGIN = conf.leftMargin; export const draw = function (text, id, version, diagObj) { const conf = getConfig().journey; - diagObj.db.clear(); - diagObj.parser.parse(text + '\n'); const securityLevel = getConfig().securityLevel; // Handle root and Document for when rendering in sandbox mode diff --git a/packages/mermaid/src/docs.mts b/packages/mermaid/src/docs.mts index 64c77254d..356cd3cd1 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 @@ -122,7 +123,7 @@ const changeToFinalDocDir = (file: string): string => { const logWasOrShouldBeTransformed = (filename: string, wasCopied: boolean) => { const changeMsg = wasCopied ? LOGMSG_TRANSFORMED : LOGMSG_TO_BE_TRANSFORMED; let logMsg: string; - logMsg = ` File ${changeMsg}: ${filename}`; + logMsg = ` File ${changeMsg}: ${filename.replace(FINAL_DOCS_DIR, SOURCE_DOCS_DIR)}`; if (wasCopied) { logMsg += LOGMSG_COPIED; } @@ -150,6 +151,7 @@ const copyTransformedContents = (filename: string, doCopy = false, transformedCo } filesTransformed.add(fileInFinalDocDir); + if (doCopy) { writeFileSync(fileInFinalDocDir, newBuffer); } @@ -321,6 +323,123 @@ 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, + }); + + /** 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(SCHEMA_INPUT_DIR, SCHEMA_OUTPUT_DIR); + copyTransformedContents(jsonFileName, !verifyOnly, JSON.stringify(jsonSchema, undefined, 2)); + + const schemas = traverseSchemas([schemaLoader()(jsonFileName, 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, + /** + * 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)) { + /* + * 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(SCHEMA_MARKDOWN_OUTPUT_DIR, `${name}.md`); + copyTransformedContents(newFileName, !verifyOnly, formatted); + } +} + /** * Transform an HTML file and write the transformed file to the directory for published * documentation @@ -362,15 +481,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; }; @@ -388,6 +507,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/packages/mermaid/src/docs/.vitepress/components/HomePage.vue b/packages/mermaid/src/docs/.vitepress/components/HomePage.vue index 19f3912a7..b6998f249 100644 --- a/packages/mermaid/src/docs/.vitepress/components/HomePage.vue +++ b/packages/mermaid/src/docs/.vitepress/components/HomePage.vue @@ -16,8 +16,12 @@ import { teamMembers } from '../contributors';


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

diff --git a/packages/mermaid/src/docs/.vitepress/config.ts b/packages/mermaid/src/docs/.vitepress/config.ts index 0089438b0..6dabf5cf9 100644 --- a/packages/mermaid/src/docs/.vitepress/config.ts +++ b/packages/mermaid/src/docs/.vitepress/config.ts @@ -138,6 +138,7 @@ function sidebarSyntax() { { text: 'Mindmaps 🔥', link: '/syntax/mindmap' }, { text: 'Timeline 🔥', link: '/syntax/timeline' }, { text: 'Zenuml 🔥', link: '/syntax/zenuml' }, + { text: 'Sankey 🔥', link: '/syntax/sankey' }, { text: 'Other Examples', link: '/syntax/examples' }, ], }, @@ -154,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: 'Math', link: '/config/math' }, diff --git a/packages/mermaid/src/docs/.vitepress/contributors.ts b/packages/mermaid/src/docs/.vitepress/contributors.ts index bef2c1311..93eeee2e2 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 './teamMembers.js'; const contributorUsernames: string[] = contributorUsernamesJson; @@ -38,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 }); @@ -54,91 +30,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/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 `
diff --git a/packages/mermaid/src/docs/.vitepress/scripts/fetch-avatars.ts b/packages/mermaid/src/docs/.vitepress/scripts/fetch-avatars.ts index bbea31bc1..cd78be782 100644 --- a/packages/mermaid/src/docs/.vitepress/scripts/fetch-avatars.ts +++ b/packages/mermaid/src/docs/.vitepress/scripts/fetch-avatars.ts @@ -18,7 +18,11 @@ async function download(url: string, fileName: URL) { const image = await fetch(url); await writeFile(fileName, Buffer.from(await image.arrayBuffer())); } catch (error) { - console.error(error); + console.error('failed to load', url, error); + // Exit the build process if we are in CI + if (process.env.CI) { + throw error; + } } } @@ -26,10 +30,13 @@ async function fetchAvatars() { await mkdir(fileURLToPath(new URL(getAvatarPath('none'))).replace('none.png', ''), { recursive: true, }); + contributors = JSON.parse(await readFile(pathContributors, { encoding: 'utf-8' })); - for (const name of contributors) { - await download(`https://github.com/${name}.png?size=100`, getAvatarPath(name)); - } + let avatars = contributors.map((name) => { + download(`https://github.com/${name}.png?size=100`, getAvatarPath(name)); + }); + + await Promise.allSettled(avatars); } fetchAvatars(); diff --git a/packages/mermaid/src/docs/.vitepress/scripts/fetch-contributors.ts b/packages/mermaid/src/docs/.vitepress/scripts/fetch-contributors.ts index fd5409d0f..da7621b29 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 '../teamMembers.js'; +import { existsSync } from 'node:fs'; const pathContributors = new URL('../contributor-names.json', import.meta.url); @@ -10,28 +12,40 @@ interface Contributor { async function fetchContributors() { const collaborators: string[] = []; - let page = 1; - let data: Contributor[] = []; - do { - const response = await fetch( - `https://api.github.com/repos/mermaid-js/mermaid/contributors?per_page=100&page=${page}`, - { - method: 'GET', - headers: { - 'content-type': 'application/json', - }, - } - ); - data = await response.json(); - collaborators.push(...data.map((i) => i.login)); - console.log(`Fetched page ${page}`); - page++; - } while (data.length === 100); + try { + let page = 1; + let data: Contributor[] = []; + do { + const response = await fetch( + `https://api.github.com/repos/mermaid-js/mermaid/contributors?per_page=100&page=${page}`, + { + method: 'GET', + headers: { + 'content-type': 'application/json', + }, + } + ); + data = await response.json(); + collaborators.push(...data.map((i) => i.login)); + console.log(`Fetched page ${page}`); + page++; + } while (data.length === 100); + } catch (e) { + /* contributors fetching failure must not hinder docs development */ + } return collaborators.filter((name) => !name.includes('[bot]')); } 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'); } diff --git a/packages/mermaid/src/docs/.vitepress/teamMembers.ts b/packages/mermaid/src/docs/.vitepress/teamMembers.ts new file mode 100644 index 000000000..d95f49ed8 --- /dev/null +++ b/packages/mermaid/src/docs/.vitepress/teamMembers.ts @@ -0,0 +1,105 @@ +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', + }, + { + github: 'tylerlong', + name: 'Tyler Liu', + }, + { + github: 'sidharthv96', + name: 'Sidharth Vinod', + 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', + }, + { + github: 'mmorel-35', + name: 'Matthieu Morel', + linkedIn: 'matthieumorel35', + }, + { + github: 'aloisklink', + name: 'Alois Klink', + linkedIn: 'aloisklink', + website: 'https://aloisklink.com', + }, + { + github: 'pbrolin47', + name: 'Per Brolin', + }, + { + github: 'Yash-Singh1', + name: 'Yash Singh', + }, + { + github: 'GDFaber', + name: 'Marc Faber', + linkedIn: 'marc-faber', + }, + { + github: 'MindaugasLaganeckas', + name: 'Mindaugas Laganeckas', + }, + { + github: 'jgreywolf', + name: 'Justin Greywolf', + }, + { + github: 'IOrlandoni', + name: 'Nacho Orlandoni', + }, + { + github: 'huynhicode', + name: 'Steph Huynh', + }, + { + github: 'Yokozuna59', + name: 'Reda Al Sulais', + }, + { + github: 'nirname', + name: 'Nikolay Rozhkov', + }, +]; diff --git a/packages/mermaid/src/docs/config/Tutorials.md b/packages/mermaid/src/docs/config/Tutorials.md index 875f15245..c6db9dacf 100644 --- a/packages/mermaid/src/docs/config/Tutorials.md +++ b/packages/mermaid/src/docs/config/Tutorials.md @@ -20,6 +20,10 @@ The definitions that can be generated the Live-Editor are also backwards-compati [Eddie Jaoude: Can you code your diagrams?](https://www.youtube.com/watch?v=9HZzKkAqrX8) +## Mermaid with OpenAI + +[Elle Neal: Mind Mapping with AI: An Accessible Approach for Neurodiverse Learners Tutorial:](https://medium.com/@elle.neal_71064/mind-mapping-with-ai-an-accessible-approach-for-neurodiverse-learners-1a74767359ff), [Demo:](https://databutton.com/v/jk9vrghc) + ## Mermaid with HTML Examples are provided in [Getting Started](../intro/n00b-gettingStarted.md) diff --git a/packages/mermaid/src/docs/config/theming.md b/packages/mermaid/src/docs/config/theming.md index 0e4571d15..0e0853283 100644 --- a/packages/mermaid/src/docs/config/theming.md +++ b/packages/mermaid/src/docs/config/theming.md @@ -55,9 +55,9 @@ To make a custom theme, modify `themeVariables` via `init`. You will need to use the [base](#available-themes) theme as it is the only modifiable theme. -| Parameter | Description | Type | Properties | -| -------------- | ------------------------------------ | ------ | --------------------------------------------------------------------------------------------------- | -| themeVariables | Modifiable with the `init` directive | Object | `primaryColor`, `primaryTextColor`, `lineColor` ([see full list](#theme-variables-reference-table)) | +| Parameter | Description | Type | Properties | +| -------------- | ------------------------------------ | ------ | ----------------------------------------------------------------------------------- | +| themeVariables | Modifiable with the `init` directive | Object | `primaryColor`, `primaryTextColor`, `lineColor` ([see full list](#theme-variables)) | Example of modifying `themeVariables` using the `init` directive: diff --git a/packages/mermaid/src/docs/ecosystem/integrations.md b/packages/mermaid/src/docs/ecosystem/integrations.md index be229a8aa..e64cf1a13 100644 --- a/packages/mermaid/src/docs/ecosystem/integrations.md +++ b/packages/mermaid/src/docs/ecosystem/integrations.md @@ -60,7 +60,7 @@ They also serve as proof of concept, for the variety of things that can be built ## Blogs -- [Wordpress](https://wordpress.org) +- [WordPress](https://wordpress.org) - [WordPress Markdown Editor](https://wordpress.org/plugins/wp-githuber-md) - [WP-ReliableMD](https://wordpress.org/plugins/wp-reliablemd/) - [Hexo](https://hexo.io) @@ -78,7 +78,7 @@ They also serve as proof of concept, for the variety of things that can be built - [Plugin for Mermaid.js](https://github.com/eFrane/vuepress-plugin-mermaidjs) - [Grav CMS](https://getgrav.org/) - [Mermaid Diagrams](https://github.com/DanielFlaum/grav-plugin-mermaid-diagrams) - - [Gitlab Markdown Adapter](https://github.com/Goutte/grav-plugin-gitlab-markdown-adapter) + - [GitLab Markdown Adapter](https://github.com/Goutte/grav-plugin-gitlab-markdown-adapter) ## Communication @@ -98,7 +98,7 @@ They also serve as proof of concept, for the variety of things that can be built - [Flex Diagrams Extension](https://www.mediawiki.org/wiki/Extension:Flex_Diagrams) - [Semantic Media Wiki](https://semantic-mediawiki.org) - [Mermaid Plugin](https://github.com/SemanticMediaWiki/Mermaid) -- [FosWiki](https://foswiki.org) +- [Foswiki](https://foswiki.org) - [Mermaid Plugin](https://foswiki.org/Extensions/MermaidPlugin) - [DokuWiki](https://dokuwiki.org) - [Mermaid Plugin](https://www.dokuwiki.org/plugin:mermaid) @@ -155,6 +155,8 @@ They also serve as proof of concept, for the variety of things that can be built - [Nano Mermaid](https://github.com/Yash-Singh1/nano-mermaid) - [CKEditor](https://github.com/ckeditor/ckeditor5) - [CKEditor 5 Mermaid plugin](https://github.com/ckeditor/ckeditor5-mermaid) +- [Standard Notes](https://standardnotes.com/) + - [sn-mermaid](https://github.com/nienow/sn-mermaid) ## Document Generation @@ -166,7 +168,7 @@ They also serve as proof of concept, for the variety of things that can be built - [rehype-mermaidjs](https://github.com/remcohaszing/rehype-mermaidjs) - [Gatsby](https://www.gatsbyjs.com/) - [gatsby-remark-mermaid](https://github.com/remcohaszing/gatsby-remark-mermaid) -- [jSDoc](https://jsdoc.app/) +- [JSDoc](https://jsdoc.app/) - [jsdoc-mermaid](https://github.com/Jellyvision/jsdoc-mermaid) - [MkDocs](https://www.mkdocs.org) - [mkdocs-mermaid2-plugin](https://github.com/fralau/mkdocs-mermaid2-plugin) diff --git a/packages/mermaid/src/docs/news/announcements.md b/packages/mermaid/src/docs/news/announcements.md index b752d3d57..b8d0669ec 100644 --- a/packages/mermaid/src/docs/news/announcements.md +++ b/packages/mermaid/src/docs/news/announcements.md @@ -1,7 +1,7 @@ # Announcements -## [subhash-halder contributed quadrant charts so you can show your manager what to select - just like the strategy consultants at BCG do](https://www.mermaidchart.com/blog/posts/subhash-halder-contributed-quadrant-charts-so-you-can-show-your-manager-what-to-select-just-like-the-strategy-consultants-at-bcg-do/) +## [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) -8 June 2023 · 7 mins +29 June 2023 · 4 mins -A quadrant chart is a useful diagram that helps users visualize data and identify patterns in a data set. +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 e62a327b4..b536cb87e 100644 --- a/packages/mermaid/src/docs/news/blog.md +++ b/packages/mermaid/src/docs/news/blog.md @@ -1,5 +1,17 @@ # 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 + +Sequence diagrams really shine when you’re documenting different parts of a system and the various ways these parts interact with each other. + ## [subhash-halder contributed quadrant charts so you can show your manager what to select - just like the strategy consultants at BCG do](https://www.mermaidchart.com/blog/posts/subhash-halder-contributed-quadrant-charts-so-you-can-show-your-manager-what-to-select-just-like-the-strategy-consultants-at-bcg-do/) 8 June 2023 · 7 mins diff --git a/packages/mermaid/src/docs/package.json b/packages/mermaid/src/docs/package.json index 63d06fd21..4529a7622 100644 --- a/packages/mermaid/src/docs/package.json +++ b/packages/mermaid/src/docs/package.json @@ -4,6 +4,7 @@ "type": "module", "scripts": { "dev": "vitepress --port 3333 --open", + "dev:docker": "vitepress --port 3333 --host", "build": "pnpm prefetch && vitepress build", "build-no-prefetch": "vitepress build", "serve": "vitepress serve", @@ -30,7 +31,7 @@ "unplugin-vue-components": "^0.25.0", "vite": "^4.3.3", "vite-plugin-pwa": "^0.16.0", - "vitepress": "1.0.0-beta.2", - "workbox-window": "^6.5.4" + "vitepress": "1.0.0-beta.5", + "workbox-window": "^7.0.0" } } diff --git a/packages/mermaid/src/docs/syntax/flowchart.md b/packages/mermaid/src/docs/syntax/flowchart.md index 80cb242d6..2e3d78c30 100644 --- a/packages/mermaid/src/docs/syntax/flowchart.md +++ b/packages/mermaid/src/docs/syntax/flowchart.md @@ -676,6 +676,16 @@ flowchart LR classDef someclass fill:#f96 ``` +This form can be used when declaring multiple links between nodes: + +```mermaid-example +flowchart LR + A:::foo & B:::bar --> C:::foobar + classDef foo stroke:#f00 + classDef bar stroke:#0f0 + classDef foobar stroke:#00f +``` + ### Css classes It is also possible to predefine classes in css styles that can be applied from the graph definition as in the example diff --git a/packages/mermaid/src/docs/syntax/gantt.md b/packages/mermaid/src/docs/syntax/gantt.md index cecaf52cb..710b39e52 100644 --- a/packages/mermaid/src/docs/syntax/gantt.md +++ b/packages/mermaid/src/docs/syntax/gantt.md @@ -19,13 +19,13 @@ Mermaid can render Gantt diagrams as SVG, PNG or a MarkDown link that can be pas ```mermaid-example gantt title A Gantt Diagram - dateFormat YYYY-MM-DD + dateFormat YYYY-MM-DD section Section - A task :a1, 2014-01-01, 30d - Another task :after a1 , 20d + A task :a1, 2014-01-01, 30d + Another task :after a1, 20d section Another - Task in sec :2014-01-12 , 12d - another task : 24d + Task in Another :2014-01-12, 12d + another task :24d ``` ## Syntax @@ -66,10 +66,10 @@ gantt It is possible to set multiple dependencies separated by space: ```mermaid-example - gantt - apple :a, 2017-07-20, 1w - banana :crit, b, 2017-07-23, 1d - cherry :active, c, after b a, 1d +gantt + apple :a, 2017-07-20, 1w + banana :crit, b, 2017-07-23, 1d + cherry :active, c, after b a, 1d ``` ### Title @@ -88,12 +88,12 @@ You can add milestones to the diagrams. Milestones differ from tasks as they rep ```mermaid-example gantt -dateFormat HH:mm -axisFormat %H:%M -Initial milestone : milestone, m1, 17:49,2min -taska2 : 10min -taska3 : 5min -Final milestone : milestone, m2, 18:14, 2min + dateFormat HH:mm + axisFormat %H:%M + Initial milestone : milestone, m1, 17:49, 2m + Task A : 10m + Task B : 5m + Final milestone : milestone, m2, 18:08, 4m ``` ## Setting dates @@ -214,15 +214,14 @@ Comments can be entered within a gantt chart, which will be ignored by the parse ```mermaid gantt title A Gantt Diagram - %% this is a comment - dateFormat YYYY-MM-DD + %% This is a comment + dateFormat YYYY-MM-DD section Section - A task :a1, 2014-01-01, 30d - Another task :after a1 , 20d + A task :a1, 2014-01-01, 30d + Another task :after a1, 20d section Another - Task in sec :2014-01-12 , 12d - another task : 24d - + Task in Another :2014-01-12, 12d + another task :24d ``` ## Styling @@ -350,7 +349,7 @@ Beginner's tip—a full example using interactive links in an html context: dateFormat YYYY-MM-DD section Clickable - Visit mermaidjs :active, cl1, 2014-01-07, 3d + Visit mermaidjs :active, cl1, 2014-01-07, 3d Print arguments :cl2, after cl1, 3d Print task :cl3, after cl2, 3d diff --git a/packages/mermaid/src/docs/syntax/sankey.md b/packages/mermaid/src/docs/syntax/sankey.md new file mode 100644 index 000000000..914c7024b --- /dev/null +++ b/packages/mermaid/src/docs/syntax/sankey.md @@ -0,0 +1,182 @@ +# Sankey diagrams + +> A sankey diagram is a visualization used to depict a flow from one set of values to another. + +::: warning +This is an experimental diagram. Its syntax are very close to plain CSV, but it is to be extended in the nearest future. +::: + +The things being connected are called nodes and the connections are called links. + +## Example + +This example taken from [observable](https://observablehq.com/@d3/sankey/2?collection=@d3/d3-sankey). It may be rendered a little bit differently, though, in terms of size and colors. + +```mermaid-example +sankey-beta + +Agricultural 'waste',Bio-conversion,124.729 +Bio-conversion,Liquid,0.597 +Bio-conversion,Losses,26.862 +Bio-conversion,Solid,280.322 +Bio-conversion,Gas,81.144 +Biofuel imports,Liquid,35 +Biomass imports,Solid,35 +Coal imports,Coal,11.606 +Coal reserves,Coal,63.965 +Coal,Solid,75.571 +District heating,Industry,10.639 +District heating,Heating and cooling - commercial,22.505 +District heating,Heating and cooling - homes,46.184 +Electricity grid,Over generation / exports,104.453 +Electricity grid,Heating and cooling - homes,113.726 +Electricity grid,H2 conversion,27.14 +Electricity grid,Industry,342.165 +Electricity grid,Road transport,37.797 +Electricity grid,Agriculture,4.412 +Electricity grid,Heating and cooling - commercial,40.858 +Electricity grid,Losses,56.691 +Electricity grid,Rail transport,7.863 +Electricity grid,Lighting & appliances - commercial,90.008 +Electricity grid,Lighting & appliances - homes,93.494 +Gas imports,Ngas,40.719 +Gas reserves,Ngas,82.233 +Gas,Heating and cooling - commercial,0.129 +Gas,Losses,1.401 +Gas,Thermal generation,151.891 +Gas,Agriculture,2.096 +Gas,Industry,48.58 +Geothermal,Electricity grid,7.013 +H2 conversion,H2,20.897 +H2 conversion,Losses,6.242 +H2,Road transport,20.897 +Hydro,Electricity grid,6.995 +Liquid,Industry,121.066 +Liquid,International shipping,128.69 +Liquid,Road transport,135.835 +Liquid,Domestic aviation,14.458 +Liquid,International aviation,206.267 +Liquid,Agriculture,3.64 +Liquid,National navigation,33.218 +Liquid,Rail transport,4.413 +Marine algae,Bio-conversion,4.375 +Ngas,Gas,122.952 +Nuclear,Thermal generation,839.978 +Oil imports,Oil,504.287 +Oil reserves,Oil,107.703 +Oil,Liquid,611.99 +Other waste,Solid,56.587 +Other waste,Bio-conversion,77.81 +Pumped heat,Heating and cooling - homes,193.026 +Pumped heat,Heating and cooling - commercial,70.672 +Solar PV,Electricity grid,59.901 +Solar Thermal,Heating and cooling - homes,19.263 +Solar,Solar Thermal,19.263 +Solar,Solar PV,59.901 +Solid,Agriculture,0.882 +Solid,Thermal generation,400.12 +Solid,Industry,46.477 +Thermal generation,Electricity grid,525.531 +Thermal generation,Losses,787.129 +Thermal generation,District heating,79.329 +Tidal,Electricity grid,9.452 +UK land based bioenergy,Bio-conversion,182.01 +Wave,Electricity grid,19.013 +Wind,Electricity grid,289.366 +``` + +## Syntax + +The idea behind syntax is that a user types `sankey-beta` keyword first, then pastes raw CSV below and get the result. + +It implements CSV standard as [described here](https://www.ietf.org/rfc/rfc4180.txt) with subtle **differences**: + +- CSV must contain **3 columns only** +- It is **allowed** to have **empty lines** without comma separators for visual purposes + +### Basic + +It is implied that 3 columns inside CSV should represent `source`, `target` and `value` accordingly: + +```mermaid-example +sankey-beta + +%% source,target,value +Electricity grid,Over generation / exports,104.453 +Electricity grid,Heating and cooling - homes,113.726 +Electricity grid,H2 conversion,27.14 +``` + +### Empty Lines + +CSV does not support empty lines without comma delimeters by default. But you can add them if needed: + +```mermaid-example +sankey-beta + +Bio-conversion,Losses,26.862 + +Bio-conversion,Solid,280.322 + +Bio-conversion,Gas,81.144 +``` + +### Commas + +If you need to have a comma, wrap it in double quotes: + +```mermaid-example +sankey-beta + +Pumped heat,"Heating and cooling, homes",193.026 +Pumped heat,"Heating and cooling, commercial",70.672 +``` + +### Double Quotes + +If you need to have double quote, put a pair of them inside quoted string: + +```mermaid-example +sankey-beta + +Pumped heat,"Heating and cooling, ""homes""",193.026 +Pumped heat,"Heating and cooling, ""commercial""",70.672 +``` + +## Configuration + +You can customize link colors, node alignments and diagram dimensions. + +```html + +``` + +### Links Coloring + +You can adjust links' color by setting `linkColor` to one of those: + +- `source` - link will be of a source node color +- `target` - link will be of a target node color +- `gradient` - link color will be smoothly transient between source and target node colors +- hex code of color, like `#a1a1a1` + +### Node Alignment + +Graph layout can be changed by setting `nodeAlignment` to: + +- `justify` +- `center` +- `left` +- `right` diff --git a/packages/mermaid/src/docs/syntax/sequenceDiagram.md b/packages/mermaid/src/docs/syntax/sequenceDiagram.md index 0d5442129..e061a192e 100644 --- a/packages/mermaid/src/docs/syntax/sequenceDiagram.md +++ b/packages/mermaid/src/docs/syntax/sequenceDiagram.md @@ -58,6 +58,31 @@ sequenceDiagram J->>A: Great! ``` +### Actor Creation and Destruction + +It is possible to create and destroy actors by messages. To do so, add a create or destroy directive before the message. + +``` +create participant B +A --> B: Hello +``` + +Create directives support actor/participant distinction and aliases. The sender or the recipient of a message can be destroyed but only the recipient can be created. + +```mermaid-example +sequenceDiagram + Alice->>Bob: Hello Bob, how are you ? + Bob->>Alice: Fine, thank you. And you? + create participant Carl + Alice->>Carl: Hi Carl! + create actor D as Donald + Carl->>D: Hi! + destroy Carl + Alice-xCarl: We are too many + destroy Bob + Bob->>Alice: I agree +``` + ### Grouping / Box The actor(s) can be grouped in vertical boxes. You can define a color (if not, it will be transparent) and/or a descriptive label using the following notation: diff --git a/packages/mermaid/src/docs/syntax/stateDiagram.md b/packages/mermaid/src/docs/syntax/stateDiagram.md index 248146993..f35796b13 100644 --- a/packages/mermaid/src/docs/syntax/stateDiagram.md +++ b/packages/mermaid/src/docs/syntax/stateDiagram.md @@ -304,7 +304,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 diff --git a/packages/mermaid/src/docs/syntax/timeline.md b/packages/mermaid/src/docs/syntax/timeline.md index c9bc9161e..201ab6b16 100644 --- a/packages/mermaid/src/docs/syntax/timeline.md +++ b/packages/mermaid/src/docs/syntax/timeline.md @@ -172,9 +172,11 @@ let us look at same example, where we have disabled the multiColor option. ### Customizing Color scheme -You can customize the color scheme using the `cScale0` to `cScale11` theme variables. Mermaid allows you to set unique colors for up-to 12 sections, where `cScale0` variable will drive the value of the first section or time-period, `cScale1` will drive the value of the second section and so on. +You can customize the color scheme using the `cScale0` to `cScale11` theme variables, which will change the background colors. Mermaid allows you to set unique colors for up-to 12 sections, where `cScale0` variable will drive the value of the first section or time-period, `cScale1` will drive the value of the second section and so on. In case you have more than 12 sections, the color scheme will start to repeat. +If you also want to change the foreground color of a section, you can do so use theme variables corresponding `cScaleLabel0` to `cScaleLabel11` variables. + NOTE: Default values for these theme variables are picked from the selected theme. If you want to override the default values, you can use the `initialize` call to add your custom theme variable values. Example: @@ -183,9 +185,9 @@ Now let's override the default values for the `cScale0` to `cScale2` variables: ```mermaid-example %%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': { - 'cScale0': '#ff0000', + 'cScale0': '#ff0000', 'cScaleLabel0': '#ffffff', 'cScale1': '#00ff00', - 'cScale2': '#0000ff' + 'cScale2': '#0000ff', 'cScaleLabel2': '#ffffff' } } }%% timeline title History of Social Media Platform diff --git a/packages/mermaid/src/mermaidAPI.spec.ts b/packages/mermaid/src/mermaidAPI.spec.ts index 11c16827b..0f4e61499 100644 --- a/packages/mermaid/src/mermaidAPI.spec.ts +++ b/packages/mermaid/src/mermaidAPI.spec.ts @@ -733,59 +733,7 @@ describe('mermaidAPI', () => { const diagramText = `${diagramType}\n accTitle: ${a11yTitle}\n accDescr: ${a11yDescr}\n`; const expectedDiagramType = testedDiagram.expectedType; - it('aria-roledscription is set to the diagram type, addSVGa11yTitleDescription is called', async () => { - const a11yDiagramInfo_spy = vi.spyOn(accessibility, 'setA11yDiagramInfo'); - const a11yTitleDesc_spy = vi.spyOn(accessibility, 'addSVGa11yTitleDescription'); - await mermaidAPI.render(id, diagramText); - expect(a11yDiagramInfo_spy).toHaveBeenCalledWith( - expect.anything(), - expectedDiagramType - ); - expect(a11yTitleDesc_spy).toHaveBeenCalled(); - }); - }); - }); - }); - }); - - describe('render', () => { - // Be sure to add async before each test (anonymous) method - - // These are more like integration tests right now because nothing is mocked. - // But it is faster that a cypress test and there's no real reason to actually evaluate an image pixel by pixel. - - // render(id, text, cb?, svgContainingElement?) - - // Test all diagram types. Note that old flowchart 'graph' type will invoke the flowRenderer-v2. (See the flowchart v2 detector.) - // We have to have both the specific textDiagramType and the expected type name because the expected type may be slightly different than was is put in the diagram text (ex: in -v2 diagrams) - const diagramTypesAndExpectations = [ - { textDiagramType: 'C4Context', expectedType: 'c4' }, - { textDiagramType: 'classDiagram', expectedType: 'classDiagram' }, - { textDiagramType: 'classDiagram-v2', expectedType: 'classDiagram' }, - { textDiagramType: 'erDiagram', expectedType: 'er' }, - { textDiagramType: 'graph', expectedType: 'flowchart-v2' }, - { textDiagramType: 'flowchart', expectedType: 'flowchart-v2' }, - { textDiagramType: 'gitGraph', expectedType: 'gitGraph' }, - { textDiagramType: 'gantt', expectedType: 'gantt' }, - { textDiagramType: 'journey', expectedType: 'journey' }, - { textDiagramType: 'pie', expectedType: 'pie' }, - { textDiagramType: 'requirementDiagram', expectedType: 'requirement' }, - { textDiagramType: 'sequenceDiagram', expectedType: 'sequence' }, - { textDiagramType: 'stateDiagram-v2', expectedType: 'stateDiagram' }, - ]; - - describe('accessibility', () => { - const id = 'mermaid-fauxId'; - const a11yTitle = 'a11y title'; - const a11yDescr = 'a11y description'; - - diagramTypesAndExpectations.forEach((testedDiagram) => { - describe(`${testedDiagram.textDiagramType}`, () => { - const diagramType = testedDiagram.textDiagramType; - const diagramText = `${diagramType}\n accTitle: ${a11yTitle}\n accDescr: ${a11yDescr}\n`; - const expectedDiagramType = testedDiagram.expectedType; - - it('aria-roledscription is set to the diagram type, addSVGa11yTitleDescription is called', async () => { + it('should set aria-roledscription to the diagram type AND should call addSVGa11yTitleDescription', async () => { const a11yDiagramInfo_spy = vi.spyOn(accessibility, 'setA11yDiagramInfo'); const a11yTitleDesc_spy = vi.spyOn(accessibility, 'addSVGa11yTitleDescription'); await mermaidAPI.render(id, diagramText); diff --git a/packages/mermaid/src/mermaidAPI.ts b/packages/mermaid/src/mermaidAPI.ts index 45f686e1f..68bf394a7 100644 --- a/packages/mermaid/src/mermaidAPI.ts +++ b/packages/mermaid/src/mermaidAPI.ts @@ -478,7 +478,7 @@ const render = async function ( // Get the temporary div element containing the svg const element = root.select(enclosingDivID_selector).node(); - const graphType = diag.type; + const diagramType = diag.type; // ------------------------------------------------------------------------------- // Create and insert the styles (user styles, theme styles, config styles) @@ -486,11 +486,11 @@ const render = async function ( // Insert an element into svg. This is where we put the styles const svg = element.firstChild; const firstChild = svg.firstChild; - const diagramClassDefs = CLASSDEF_DIAGRAMS.includes(graphType) + const diagramClassDefs = CLASSDEF_DIAGRAMS.includes(diagramType) ? diag.renderer.getClasses(text, diag) : {}; - const rules = createUserStyles(config, graphType, diagramClassDefs, idSelector); + const rules = createUserStyles(config, diagramType, diagramClassDefs, idSelector); const style1 = document.createElement('style'); style1.innerHTML = rules; @@ -507,9 +507,9 @@ const render = async function ( // This is the d3 node for the svg element const svgNode = root.select(`${enclosingDivID_selector} svg`); - const a11yTitle = diag.db.getAccTitle?.(); - const a11yDescr = diag.db.getAccDescription?.(); - addA11yInfo(graphType, svgNode, a11yTitle, a11yDescr); + const a11yTitle: string | undefined = diag.db.getAccTitle?.(); + const a11yDescr: string | undefined = diag.db.getAccDescription?.(); + addA11yInfo(diagramType, svgNode, a11yTitle, a11yDescr); // ------------------------------------------------------------------------------- // Clean up SVG code @@ -586,14 +586,18 @@ function initialize(options: MermaidConfig = {}) { /** * Add accessibility (a11y) information to the diagram. * + * @param diagramType - diagram type + * @param svgNode - d3 node to insert the a11y title and desc info + * @param a11yTitle - a11y title + * @param a11yDescr - a11y description */ function addA11yInfo( - graphType: string, + diagramType: string, svgNode: D3Element, - a11yTitle: string | undefined, - a11yDescr: string | undefined -) { - setA11yDiagramInfo(svgNode, graphType); + a11yTitle?: string, + a11yDescr?: string +): void { + setA11yDiagramInfo(svgNode, diagramType); addSVGa11yTitleDescription(svgNode, a11yTitle, a11yDescr, svgNode.attr('id')); } diff --git a/packages/mermaid/src/rendering-util/uid.ts b/packages/mermaid/src/rendering-util/uid.ts new file mode 100644 index 000000000..9f581faa7 --- /dev/null +++ b/packages/mermaid/src/rendering-util/uid.ts @@ -0,0 +1,18 @@ +export class Uid { + private static count = 0; + id: string; + href: string; + + public static next(name: string): Uid { + return new Uid(name + ++Uid.count); + } + + constructor(id: string) { + this.id = id; + this.href = `#${id}`; + } + + toString(): string { + return 'url(' + this.href + ')'; + } +} diff --git a/packages/mermaid/src/schemas/config.schema.yaml b/packages/mermaid/src/schemas/config.schema.yaml new file mode 100644 index 000000000..4e1c2c80f --- /dev/null +++ b/packages/mermaid/src/schemas/config.schema.yaml @@ -0,0 +1,1894 @@ +# 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 + legacyMathML: + description: | + This option specifies if Mermaid can expect the dependent to include KaTeX stylesheets for browsers + without their own MathML implementation. If this option is disabled and MathML is not supported, the math + equations are replaced with a warning. If this option is enabled and MathML is not supported, Mermaid will + fall back to legacy rendering for KaTeX. + type: boolean + default: false + 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 diff --git a/packages/mermaid/src/styles.ts b/packages/mermaid/src/styles.ts index a6e752475..fde079450 100644 --- a/packages/mermaid/src/styles.ts +++ b/packages/mermaid/src/styles.ts @@ -1,7 +1,8 @@ import type { FlowChartStyleOptions } from './diagrams/flowchart/styles.js'; import { log } from './logger.js'; +import type { DiagramStylesProvider } from './diagram-api/types.js'; -const themes: Record = {}; +const themes: Record = {}; const getStyles = ( type: string, @@ -73,8 +74,10 @@ const getStyles = ( `; }; -export const addStylesForDiagram = (type: string, diagramTheme: unknown): void => { - themes[type] = diagramTheme; +export const addStylesForDiagram = (type: string, diagramTheme?: DiagramStylesProvider): void => { + if (diagramTheme !== undefined) { + themes[type] = diagramTheme; + } }; export default getStyles; diff --git a/packages/mermaid/src/tests/MockedD3.ts b/packages/mermaid/src/tests/MockedD3.ts index 6d8d721e0..c5e080ba3 100644 --- a/packages/mermaid/src/tests/MockedD3.ts +++ b/packages/mermaid/src/tests/MockedD3.ts @@ -1,5 +1,3 @@ -import type {} from '@vitest/spy/dist/index.js'; - /** * This is a mocked/stubbed version of the d3 Selection type. Each of the main functions are all * mocked (via vi.fn()) so you can track if they have been called, etc. @@ -7,9 +5,8 @@ import type {} from '@vitest/spy/dist/index.js'; * Note that node() returns a HTML Element with tag 'svg'. It is an empty element (no innerHTML, no children, etc). * This potentially allows testing of mermaidAPI render(). */ - export class MockedD3 { - public attribs = new Map(); + public attribs = new Map(); public id: string | undefined = ''; _children: MockedD3[] = []; @@ -72,9 +69,9 @@ export class MockedD3 { return newMock; }; - attr(attrName: string): null | undefined | string | number; - // attr(attrName: string, attrValue: string): MockedD3; - attr(attrName: string, attrValue?: string): null | undefined | string | number | MockedD3 { + attr(attrName: string): undefined | string; + attr(attrName: string, attrValue: string): MockedD3; + attr(attrName: string, attrValue?: string): undefined | string | MockedD3 { if (arguments.length === 1) { return this.attribs.get(attrName); } else { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 2e6420982..cdad35f45 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -58,7 +58,7 @@ importers: '@typescript-eslint/parser': specifier: ^5.59.0 version: 5.59.0(eslint@8.39.0)(typescript@5.1.3) - '@vitest/coverage-istanbul': + '@vitest/coverage-v8': specifier: ^0.32.2 version: 0.32.2(vitest@0.32.2) '@vitest/spy': @@ -67,6 +67,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 @@ -101,8 +104,8 @@ importers: specifier: ^27.2.1 version: 27.2.1(@typescript-eslint/eslint-plugin@5.59.0)(eslint@8.39.0)(jest@29.5.0)(typescript@5.1.3) eslint-plugin-jsdoc: - specifier: ^43.0.7 - version: 43.0.7(eslint@8.39.0) + specifier: ^46.0.0 + version: 46.0.0(eslint@8.39.0) eslint-plugin-json: specifier: ^3.1.0 version: 3.1.0 @@ -119,8 +122,8 @@ importers: specifier: ^0.2.17 version: 0.2.17 eslint-plugin-unicorn: - specifier: ^46.0.0 - version: 46.0.0(eslint@8.39.0) + specifier: ^47.0.0 + version: 47.0.0(eslint@8.39.0) express: specifier: ^4.18.2 version: 4.18.2 @@ -140,8 +143,8 @@ importers: specifier: ^4.1.0 version: 4.1.0 jsdom: - specifier: ^21.1.1 - version: 21.1.1 + specifier: ^22.0.0 + version: 22.0.0 lint-staged: specifier: ^13.2.1 version: 13.2.1 @@ -183,13 +186,19 @@ importers: version: 4.1.0(vite@4.3.9) vitest: specifier: ^0.32.2 - version: 0.32.2(@vitest/ui@0.32.2)(jsdom@21.1.1) + version: 0.32.2(@vitest/ui@0.32.2)(jsdom@22.0.0) packages/mermaid: dependencies: '@braintree/sanitize-url': specifier: ^6.0.2 version: 6.0.2 + '@types/d3-scale': + specifier: ^4.0.3 + version: 4.0.3 + '@types/d3-scale-chromatic': + specifier: ^3.0.0 + version: 3.0.0 cytoscape: specifier: ^3.23.0 version: 3.23.0 @@ -202,6 +211,9 @@ importers: d3: specifier: ^7.4.0 version: 7.8.2 + d3-sankey: + specifier: ^0.12.3 + version: 0.12.3 dagre-d3-es: specifier: 7.0.10 version: 7.0.10 @@ -209,8 +221,8 @@ importers: specifier: ^1.11.7 version: 1.11.7 dompurify: - specifier: 3.0.3 - version: 3.0.3 + specifier: 3.0.4 + version: 3.0.4 elkjs: specifier: ^0.8.2 version: 0.8.2 @@ -242,12 +254,18 @@ 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 '@types/d3': specifier: ^7.4.0 version: 7.4.0 + '@types/d3-sankey': + specifier: ^0.12.1 + version: 0.12.1 '@types/d3-selection': specifier: ^3.0.5 version: 3.0.5 @@ -278,6 +296,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 @@ -306,8 +327,11 @@ importers: specifier: ^3.7.5 version: 3.7.5 jsdom: - specifier: ^21.1.1 - version: 21.1.1 + 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 @@ -344,6 +368,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) @@ -418,7 +445,7 @@ importers: version: 0.53.3 '@vite-pwa/vitepress': specifier: ^0.2.0 - version: 0.2.0(vite-plugin-pwa@0.16.4) + version: 0.2.0(vite-plugin-pwa@0.16.0) '@vitejs/plugin-vue': specifier: ^4.2.1 version: 4.2.1(vite@4.3.3)(vue@3.2.47) @@ -433,7 +460,7 @@ importers: version: 1.1.0 unocss: specifier: ^0.53.0 - version: 0.53.3(postcss@8.4.23)(rollup@2.79.1)(vite@4.3.3) + version: 0.53.0(postcss@8.4.24)(rollup@2.79.1)(vite@4.3.3) unplugin-vue-components: specifier: ^0.25.0 version: 0.25.1(rollup@2.79.1)(vue@3.2.47) @@ -442,13 +469,65 @@ importers: version: 4.3.3 vite-plugin-pwa: specifier: ^0.16.0 - version: 0.16.4(vite@4.3.3)(workbox-build@7.0.0)(workbox-window@6.5.4) + version: 0.16.0(vite@4.3.3)(workbox-build@7.0.0)(workbox-window@7.0.0) + vitepress: + specifier: 1.0.0-beta.5 + version: 1.0.0-beta.5(@algolia/client-search@4.14.2)(search-insights@2.6.0) + workbox-window: + specifier: ^7.0.0 + version: 7.0.0 + + packages/mermaid/src/vitepress: + dependencies: + '@vueuse/core': + specifier: ^10.1.0 + version: 10.2.1(vue@3.3.4) + jiti: + specifier: ^1.18.2 + version: 1.18.2 + vue: + specifier: ^3.2.47 + version: 3.3.4 + devDependencies: + '@iconify-json/carbon': + specifier: ^1.1.16 + version: 1.1.16 + '@unocss/reset': + specifier: ^0.53.0 + version: 0.53.3 + '@vite-pwa/vitepress': + specifier: ^0.2.0 + version: 0.2.0(vite-plugin-pwa@0.16.0) + '@vitejs/plugin-vue': + specifier: ^4.2.1 + version: 4.2.3(vite@4.3.9)(vue@3.3.4) + fast-glob: + specifier: ^3.2.12 + version: 3.2.12 + https-localhost: + specifier: ^4.7.1 + version: 4.7.1 + pathe: + specifier: ^1.1.0 + version: 1.1.1 + unocss: + specifier: ^0.53.0 + version: 0.53.0(postcss@8.4.24)(rollup@2.79.1)(vite@4.3.9) + unplugin-vue-components: + specifier: ^0.25.0 + version: 0.25.1(rollup@2.79.1)(vue@3.3.4) + vite: + specifier: ^4.3.3 + version: 4.3.9 + vite-plugin-pwa: + specifier: ^0.16.0 + version: 0.16.0(vite@4.3.9)(workbox-build@7.0.0)(workbox-window@6.6.1) vitepress: specifier: 1.0.0-beta.2 version: 1.0.0-beta.2(@algolia/client-search@4.14.2)(search-insights@2.6.0) workbox-window: specifier: ^6.5.4 - version: 6.5.4 + version: 6.6.1 tests/webpack: dependencies: @@ -471,6 +550,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: @@ -650,13 +766,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 @@ -877,7 +993,7 @@ packages: http-proxy-agent: 5.0.0 https-proxy-agent: 5.0.1 is-potential-custom-element-name: 1.0.1 - nwsapi: 2.2.2 + nwsapi: 2.2.5 parse5: 6.0.1 saxes: 5.0.1 symbol-tree: 3.2.4 @@ -1013,6 +1129,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'} @@ -1298,13 +1419,6 @@ packages: js-tokens: 4.0.0 dev: true - /@babel/parser@7.21.2: - resolution: {integrity: sha512-URpaIJQwEkEC2T9Kn+Ai6Xe/02iNaVCuT/PtoRz3GPVJVDpPd7mLo+VddTbhCRU9TXqW5mSrQfXZyi8kDKOVpQ==} - engines: {node: '>=6.0.0'} - hasBin: true - dependencies: - '@babel/types': 7.21.2 - /@babel/parser@7.21.8: resolution: {integrity: sha512-6zavDGdzG3gUqAdWvlLFfk+36RilI+Pwyuuh7HItyeScCWP3k6i8vKclAQ0bM/0y/Kz/xiwvxhMv9MgTJP5gmA==} engines: {node: '>=6.0.0'} @@ -2201,6 +2315,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 @@ -2252,7 +2375,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: @@ -2831,9 +2954,9 @@ packages: - search-insights dev: true - /@es-joy/jsdoccomment@0.37.1: - resolution: {integrity: sha512-5vxWJ1gEkEF0yRd0O+uK6dHJf7adrxwQSX8PuRiPfFSAbNLnY0ZJfXaZucoz14Jj2N11xn2DnlEPwWRpYpvRjg==} - engines: {node: ^14 || ^16 || ^17 || ^18 || ^19 || ^20} + /@es-joy/jsdoccomment@0.39.4: + resolution: {integrity: sha512-Jvw915fjqQct445+yron7Dufix9A+m9j1fCJYlCo1FWlRvTxa3pjJelxdSTdaLWcTwRU6vbL+NYjO4YuNIS5Qg==} + engines: {node: '>=16'} dependencies: comment-parser: 1.3.1 esquery: 1.5.0 @@ -2849,6 +2972,15 @@ packages: dev: true optional: true + /@esbuild/android-arm64@0.18.11: + resolution: {integrity: sha512-snieiq75Z1z5LJX9cduSAjUr7vEI1OdlzFPMw0HH5YI7qQHDd3qs+WZoMrWYDsfRJSq36lIA6mfZBkvL46KoIw==} + engines: {node: '>=12'} + cpu: [arm64] + os: [android] + requiresBuild: true + dev: true + optional: true + /@esbuild/android-arm64@0.18.6: resolution: {integrity: sha512-pL0Ci8P9q1sWbtPx8CXbc8JvPvvYdJJQ+LO09PLFsbz3aYNdFBGWJjiHU+CaObO4Ames+GOFpXRAJZS2L3ZK/A==} engines: {node: '>=12'} @@ -2867,6 +2999,15 @@ packages: dev: true optional: true + /@esbuild/android-arm@0.18.11: + resolution: {integrity: sha512-q4qlUf5ucwbUJZXF5tEQ8LF7y0Nk4P58hOsGk3ucY0oCwgQqAnqXVbUuahCddVHfrxmpyewRpiTHwVHIETYu7Q==} + engines: {node: '>=12'} + cpu: [arm] + os: [android] + requiresBuild: true + dev: true + optional: true + /@esbuild/android-arm@0.18.6: resolution: {integrity: sha512-J3lwhDSXBBppSzm/LC1uZ8yKSIpExc+5T8MxrYD9KNVZG81FOAu2VF2gXi/6A/LwDDQQ+b6DpQbYlo3VwxFepQ==} engines: {node: '>=12'} @@ -2885,6 +3026,15 @@ packages: dev: true optional: true + /@esbuild/android-x64@0.18.11: + resolution: {integrity: sha512-iPuoxQEV34+hTF6FT7om+Qwziv1U519lEOvekXO9zaMMlT9+XneAhKL32DW3H7okrCOBQ44BMihE8dclbZtTuw==} + engines: {node: '>=12'} + cpu: [x64] + os: [android] + requiresBuild: true + dev: true + optional: true + /@esbuild/android-x64@0.18.6: resolution: {integrity: sha512-hE2vZxOlJ05aY28lUpB0y0RokngtZtcUB+TVl9vnLEnY0z/8BicSvrkThg5/iI1rbf8TwXrbr2heEjl9fLf+EA==} engines: {node: '>=12'} @@ -2903,6 +3053,15 @@ packages: dev: true optional: true + /@esbuild/darwin-arm64@0.18.11: + resolution: {integrity: sha512-Gm0QkI3k402OpfMKyQEEMG0RuW2LQsSmI6OeO4El2ojJMoF5NLYb3qMIjvbG/lbMeLOGiW6ooU8xqc+S0fgz2w==} + engines: {node: '>=12'} + cpu: [arm64] + os: [darwin] + requiresBuild: true + dev: true + optional: true + /@esbuild/darwin-arm64@0.18.6: resolution: {integrity: sha512-/tuyl4R+QhhoROQtuQj9E/yfJtZNdv2HKaHwYhhHGQDN1Teziem2Kh7BWQMumfiY7Lu9g5rO7scWdGE4OsQ6MQ==} engines: {node: '>=12'} @@ -2921,6 +3080,15 @@ packages: dev: true optional: true + /@esbuild/darwin-x64@0.18.11: + resolution: {integrity: sha512-N15Vzy0YNHu6cfyDOjiyfJlRJCB/ngKOAvoBf1qybG3eOq0SL2Lutzz9N7DYUbb7Q23XtHPn6lMDF6uWbGv9Fw==} + engines: {node: '>=12'} + cpu: [x64] + os: [darwin] + requiresBuild: true + dev: true + optional: true + /@esbuild/darwin-x64@0.18.6: resolution: {integrity: sha512-L7IQga2pDT+14Ti8HZwsVfbCjuKP4U213T3tuPggOzyK/p4KaUJxQFXJgfUFHKzU0zOXx8QcYRYZf0hSQtppkw==} engines: {node: '>=12'} @@ -2939,6 +3107,15 @@ packages: dev: true optional: true + /@esbuild/freebsd-arm64@0.18.11: + resolution: {integrity: sha512-atEyuq6a3omEY5qAh5jIORWk8MzFnCpSTUruBgeyN9jZq1K/QI9uke0ATi3MHu4L8c59CnIi4+1jDKMuqmR71A==} + engines: {node: '>=12'} + cpu: [arm64] + os: [freebsd] + requiresBuild: true + dev: true + optional: true + /@esbuild/freebsd-arm64@0.18.6: resolution: {integrity: sha512-bq10jFv42V20Kk77NvmO+WEZaLHBKuXcvEowixnBOMkaBgS7kQaqTc77ZJDbsUpXU3KKNLQFZctfaeINmeTsZA==} engines: {node: '>=12'} @@ -2957,6 +3134,15 @@ packages: dev: true optional: true + /@esbuild/freebsd-x64@0.18.11: + resolution: {integrity: sha512-XtuPrEfBj/YYYnAAB7KcorzzpGTvOr/dTtXPGesRfmflqhA4LMF0Gh/n5+a9JBzPuJ+CGk17CA++Hmr1F/gI0Q==} + engines: {node: '>=12'} + cpu: [x64] + os: [freebsd] + requiresBuild: true + dev: true + optional: true + /@esbuild/freebsd-x64@0.18.6: resolution: {integrity: sha512-HbDLlkDZqUMBQaiday0pJzB6/8Xx/10dI3xRebJBReOEeDSeS+7GzTtW9h8ZnfB7/wBCqvtAjGtWQLTNPbR2+g==} engines: {node: '>=12'} @@ -2975,6 +3161,15 @@ packages: dev: true optional: true + /@esbuild/linux-arm64@0.18.11: + resolution: {integrity: sha512-c6Vh2WS9VFKxKZ2TvJdA7gdy0n6eSy+yunBvv4aqNCEhSWVor1TU43wNRp2YLO9Vng2G+W94aRz+ILDSwAiYog==} + engines: {node: '>=12'} + cpu: [arm64] + os: [linux] + requiresBuild: true + dev: true + optional: true + /@esbuild/linux-arm64@0.18.6: resolution: {integrity: sha512-NMY9yg/88MskEZH2s4i6biz/3av+M8xY5ua4HE7CCz5DBz542cr7REe317+v7oKjnYBCijHpkzo5vU85bkXQmQ==} engines: {node: '>=12'} @@ -2993,6 +3188,15 @@ packages: dev: true optional: true + /@esbuild/linux-arm@0.18.11: + resolution: {integrity: sha512-Idipz+Taso/toi2ETugShXjQ3S59b6m62KmLHkJlSq/cBejixmIydqrtM2XTvNCywFl3VC7SreSf6NV0i6sRyg==} + engines: {node: '>=12'} + cpu: [arm] + os: [linux] + requiresBuild: true + dev: true + optional: true + /@esbuild/linux-arm@0.18.6: resolution: {integrity: sha512-C+5kb6rgsGMmvIdUI7v1PPgC98A6BMv233e97aXZ5AE03iMdlILFD/20HlHrOi0x2CzbspXn9HOnlE4/Ijn5Kw==} engines: {node: '>=12'} @@ -3011,6 +3215,15 @@ packages: dev: true optional: true + /@esbuild/linux-ia32@0.18.11: + resolution: {integrity: sha512-S3hkIF6KUqRh9n1Q0dSyYcWmcVa9Cg+mSoZEfFuzoYXXsk6196qndrM+ZiHNwpZKi3XOXpShZZ+9dfN5ykqjjw==} + engines: {node: '>=12'} + cpu: [ia32] + os: [linux] + requiresBuild: true + dev: true + optional: true + /@esbuild/linux-ia32@0.18.6: resolution: {integrity: sha512-AXazA0ljvQEp7cA9jscABNXsjodKbEcqPcAE3rDzKN82Vb3lYOq6INd+HOCA7hk8IegEyHW4T72Z7QGIhyCQEA==} engines: {node: '>=12'} @@ -3029,6 +3242,15 @@ packages: dev: true optional: true + /@esbuild/linux-loong64@0.18.11: + resolution: {integrity: sha512-MRESANOoObQINBA+RMZW+Z0TJWpibtE7cPFnahzyQHDCA9X9LOmGh68MVimZlM9J8n5Ia8lU773te6O3ILW8kw==} + engines: {node: '>=12'} + cpu: [loong64] + os: [linux] + requiresBuild: true + dev: true + optional: true + /@esbuild/linux-loong64@0.18.6: resolution: {integrity: sha512-JjBf7TwY7ldcPgHYt9UcrjZB03+WZqg/jSwMAfzOzM5ZG+tu5umUqzy5ugH/crGI4eoDIhSOTDp1NL3Uo/05Fw==} engines: {node: '>=12'} @@ -3047,6 +3269,15 @@ packages: dev: true optional: true + /@esbuild/linux-mips64el@0.18.11: + resolution: {integrity: sha512-qVyPIZrXNMOLYegtD1u8EBccCrBVshxMrn5MkuFc3mEVsw7CCQHaqZ4jm9hbn4gWY95XFnb7i4SsT3eflxZsUg==} + engines: {node: '>=12'} + cpu: [mips64el] + os: [linux] + requiresBuild: true + dev: true + optional: true + /@esbuild/linux-mips64el@0.18.6: resolution: {integrity: sha512-kATNsslryVxcH1sO3KP2nnyUWtZZVkgyhAUnyTVVa0OQQ9pmDRjTpHaE+2EQHoCM5wt/uav2edrAUqbwn3tkKQ==} engines: {node: '>=12'} @@ -3065,6 +3296,15 @@ packages: dev: true optional: true + /@esbuild/linux-ppc64@0.18.11: + resolution: {integrity: sha512-T3yd8vJXfPirZaUOoA9D2ZjxZX4Gr3QuC3GztBJA6PklLotc/7sXTOuuRkhE9W/5JvJP/K9b99ayPNAD+R+4qQ==} + engines: {node: '>=12'} + cpu: [ppc64] + os: [linux] + requiresBuild: true + dev: true + optional: true + /@esbuild/linux-ppc64@0.18.6: resolution: {integrity: sha512-B+wTKz+8pi7mcWXFQV0LA79dJ+qhiut5uK9q0omoKnq8yRIwQJwfg3/vclXoqqcX89Ri5Y5538V0Se2v5qlcLA==} engines: {node: '>=12'} @@ -3083,6 +3323,15 @@ packages: dev: true optional: true + /@esbuild/linux-riscv64@0.18.11: + resolution: {integrity: sha512-evUoRPWiwuFk++snjH9e2cAjF5VVSTj+Dnf+rkO/Q20tRqv+644279TZlPK8nUGunjPAtQRCj1jQkDAvL6rm2w==} + engines: {node: '>=12'} + cpu: [riscv64] + os: [linux] + requiresBuild: true + dev: true + optional: true + /@esbuild/linux-riscv64@0.18.6: resolution: {integrity: sha512-h44RBLVXFUSjvhOfseE+5UxQ/r9LVeqK2S8JziJKOm9W7SePYRPDyn7MhzhNCCFPkcjIy+soCxfhlJXHXXCR0A==} engines: {node: '>=12'} @@ -3101,6 +3350,15 @@ packages: dev: true optional: true + /@esbuild/linux-s390x@0.18.11: + resolution: {integrity: sha512-/SlRJ15XR6i93gRWquRxYCfhTeC5PdqEapKoLbX63PLCmAkXZHY2uQm2l9bN0oPHBsOw2IswRZctMYS0MijFcg==} + engines: {node: '>=12'} + cpu: [s390x] + os: [linux] + requiresBuild: true + dev: true + optional: true + /@esbuild/linux-s390x@0.18.6: resolution: {integrity: sha512-FlYpyr2Xc2AUePoAbc84NRV+mj7xpsISeQ36HGf9etrY5rTBEA+IU9HzWVmw5mDFtC62EQxzkLRj8h5Hq85yOQ==} engines: {node: '>=12'} @@ -3119,6 +3377,15 @@ packages: dev: true optional: true + /@esbuild/linux-x64@0.18.11: + resolution: {integrity: sha512-xcncej+wF16WEmIwPtCHi0qmx1FweBqgsRtEL1mSHLFR6/mb3GEZfLQnx+pUDfRDEM4DQF8dpXIW7eDOZl1IbA==} + engines: {node: '>=12'} + cpu: [x64] + os: [linux] + requiresBuild: true + dev: true + optional: true + /@esbuild/linux-x64@0.18.6: resolution: {integrity: sha512-Mc4EUSYwzLci77u0Kao6ajB2WbTe5fNc7+lHwS3a+vJISC/oprwURezUYu1SdWAYoczbsyOvKAJwuNftoAdjjg==} engines: {node: '>=12'} @@ -3137,6 +3404,15 @@ packages: dev: true optional: true + /@esbuild/netbsd-x64@0.18.11: + resolution: {integrity: sha512-aSjMHj/F7BuS1CptSXNg6S3M4F3bLp5wfFPIJM+Km2NfIVfFKhdmfHF9frhiCLIGVzDziggqWll0B+9AUbud/Q==} + engines: {node: '>=12'} + cpu: [x64] + os: [netbsd] + requiresBuild: true + dev: true + optional: true + /@esbuild/netbsd-x64@0.18.6: resolution: {integrity: sha512-3hgZlp7NqIM5lNG3fpdhBI5rUnPmdahraSmwAi+YX/bp7iZ7mpTv2NkypGs/XngdMtpzljICxnUG3uPfqLFd3w==} engines: {node: '>=12'} @@ -3155,6 +3431,15 @@ packages: dev: true optional: true + /@esbuild/openbsd-x64@0.18.11: + resolution: {integrity: sha512-tNBq+6XIBZtht0xJGv7IBB5XaSyvYPCm1PxJ33zLQONdZoLVM0bgGqUrXnJyiEguD9LU4AHiu+GCXy/Hm9LsdQ==} + engines: {node: '>=12'} + cpu: [x64] + os: [openbsd] + requiresBuild: true + dev: true + optional: true + /@esbuild/openbsd-x64@0.18.6: resolution: {integrity: sha512-aEWTdZQHtSRROlDYn7ygB8yAqtnall/UnmoVIJVqccKitkAWVVSYocQUWrBOxLEFk8XdlRouVrLZe6WXszyviA==} engines: {node: '>=12'} @@ -3173,6 +3458,15 @@ packages: dev: true optional: true + /@esbuild/sunos-x64@0.18.11: + resolution: {integrity: sha512-kxfbDOrH4dHuAAOhr7D7EqaYf+W45LsAOOhAet99EyuxxQmjbk8M9N4ezHcEiCYPaiW8Dj3K26Z2V17Gt6p3ng==} + engines: {node: '>=12'} + cpu: [x64] + os: [sunos] + requiresBuild: true + dev: true + optional: true + /@esbuild/sunos-x64@0.18.6: resolution: {integrity: sha512-uxk/5yAGpjKZUHOECtI9W+9IcLjKj+2m0qf+RG7f7eRBHr8wP6wsr3XbNbgtOD1qSpPapd6R2ZfSeXTkCcAo5g==} engines: {node: '>=12'} @@ -3191,6 +3485,15 @@ packages: dev: true optional: true + /@esbuild/win32-arm64@0.18.11: + resolution: {integrity: sha512-Sh0dDRyk1Xi348idbal7lZyfSkjhJsdFeuC13zqdipsvMetlGiFQNdO+Yfp6f6B4FbyQm7qsk16yaZk25LChzg==} + engines: {node: '>=12'} + cpu: [arm64] + os: [win32] + requiresBuild: true + dev: true + optional: true + /@esbuild/win32-arm64@0.18.6: resolution: {integrity: sha512-oXlXGS9zvNCGoAT/tLHAsFKrIKye1JaIIP0anCdpaI+Dc10ftaNZcqfLzEwyhdzFAYInXYH4V7kEdH4hPyo9GA==} engines: {node: '>=12'} @@ -3209,6 +3512,15 @@ packages: dev: true optional: true + /@esbuild/win32-ia32@0.18.11: + resolution: {integrity: sha512-o9JUIKF1j0rqJTFbIoF4bXj6rvrTZYOrfRcGyL0Vm5uJ/j5CkBD/51tpdxe9lXEDouhRgdr/BYzUrDOvrWwJpg==} + engines: {node: '>=12'} + cpu: [ia32] + os: [win32] + requiresBuild: true + dev: true + optional: true + /@esbuild/win32-ia32@0.18.6: resolution: {integrity: sha512-qh7IcAHUvvmMBmoIG+V+BbE9ZWSR0ohF51e5g8JZvU08kZF58uDFL5tHs0eoYz31H6Finv17te3W3QB042GqVA==} engines: {node: '>=12'} @@ -3227,6 +3539,15 @@ packages: dev: true optional: true + /@esbuild/win32-x64@0.18.11: + resolution: {integrity: sha512-rQI4cjLHd2hGsM1LqgDI7oOCYbQ6IBOVsX9ejuRMSze0GqXUG2ekwiKkiBU1pRGSeCqFFHxTrcEydB2Hyoz9CA==} + engines: {node: '>=12'} + cpu: [x64] + os: [win32] + requiresBuild: true + dev: true + optional: true + /@esbuild/win32-x64@0.18.6: resolution: {integrity: sha512-9UDwkz7Wlm4N9jnv+4NL7F8vxLhSZfEkRArz2gD33HesAFfMLGIGNVXRoIHtWNw8feKsnGly9Hq1EUuRkWl0zA==} engines: {node: '>=12'} @@ -3489,7 +3810,7 @@ packages: slash: 3.0.0 string-length: 4.0.2 strip-ansi: 6.0.1 - v8-to-istanbul: 9.0.1 + v8-to-istanbul: 9.1.0 transitivePeerDependencies: - supports-color dev: true @@ -3604,6 +3925,10 @@ packages: '@jridgewell/sourcemap-codec': 1.4.14 dev: true + /@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 @@ -3658,6 +3983,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 @@ -4010,6 +4339,10 @@ packages: '@types/d3-color': 3.1.0 dev: true + /@types/d3-path@1.0.9: + resolution: {integrity: sha512-NaIeSIBiFgSC6IGUBjZWcscUJEq7vpVu7KthHN8eieTV9d9MqkSOZLH4chq1PmcKy06PNe3axLeKmRIyxJ+PZQ==} + dev: true + /@types/d3-path@3.0.0: resolution: {integrity: sha512-0g/A+mZXgFkQxN3HniRDbXMN79K3CdTpLsevj+PXiTcb2hVyvkZUBg37StmgCQkaD84cUJ4uaDAWq7UJOQy2Tg==} dev: true @@ -4026,20 +4359,30 @@ packages: resolution: {integrity: sha512-IIE6YTekGczpLYo/HehAy3JGF1ty7+usI97LqraNa8IiDur+L44d0VOjAvFQWJVdZOJHukUJw+ZdZBlgeUsHOQ==} dev: true - /@types/d3-scale-chromatic@3.0.0: - resolution: {integrity: sha512-dsoJGEIShosKVRBZB0Vo3C8nqSDqVGujJU6tPznsBJxNJNwMF8utmS83nvCBKQYPpjCzaaHcrf66iTRpZosLPw==} + /@types/d3-sankey@0.12.1: + resolution: {integrity: sha512-10X6l6lXB42udBNX9/fDN+kJuooifSMk7+x4U9815eobavldqis4wDdFQUQjMazh+qlzsUZsGzXKxfWFUVt+3w==} + dependencies: + '@types/d3-shape': 1.3.8 dev: true - /@types/d3-scale@4.0.2: - resolution: {integrity: sha512-Yk4htunhPAwN0XGlIwArRomOjdoBFXC3+kCxK2Ubg7I9shQlVSJy/pG/Ht5ASN+gdMIalpk8TJ5xV74jFsetLA==} + /@types/d3-scale-chromatic@3.0.0: + resolution: {integrity: sha512-dsoJGEIShosKVRBZB0Vo3C8nqSDqVGujJU6tPznsBJxNJNwMF8utmS83nvCBKQYPpjCzaaHcrf66iTRpZosLPw==} + + /@types/d3-scale@4.0.3: + resolution: {integrity: sha512-PATBiMCpvHJSMtZAMEhc2WyL+hnzarKzI6wAHYjhsonjWJYGq5BXTzQjv4l8m2jO183/4wZ90rKvSeT7o72xNQ==} dependencies: '@types/d3-time': 3.0.0 - dev: true /@types/d3-selection@3.0.5: resolution: {integrity: sha512-xCB0z3Hi8eFIqyja3vW8iV01+OHGYR2di/+e+AiOcXIOrY82lcvWW8Ke1DYE/EUVMsBl4Db9RppSBS3X1U6J0w==} dev: true + /@types/d3-shape@1.3.8: + resolution: {integrity: sha512-gqfnMz6Fd5H6GOLYixOZP/xlrMtJms9BaS+6oWxTKHNqPGZ93BkWWupQSCYm6YHqx6h9wjRupuJb90bun6ZaYg==} + dependencies: + '@types/d3-path': 1.0.9 + dev: true + /@types/d3-shape@3.1.0: resolution: {integrity: sha512-jYIYxFFA9vrJ8Hd4Se83YI6XF+gzDL1aC5DCsldai4XYYiVNdhtpGbA/GM6iyQ8ayhSp3a148LY34hy7A4TxZA==} dependencies: @@ -4052,7 +4395,6 @@ packages: /@types/d3-time@3.0.0: resolution: {integrity: sha512-sZLCdHvBUcNby1cB6Fd3ZBrABbjz3v1Vm90nysCQ6Vt7vd6e/h9Lt7SiJUoEX0l4Dzc7P5llKyhqSi1ycSf1Hg==} - dev: true /@types/d3-timer@3.0.0: resolution: {integrity: sha512-HNB/9GHqu7Fo8AQiugyJbv6ZxYz58wef0esl4Mv828w1ZKpAshw/uFWVDUcIB9KKFeFKoxS3cHY07FFgtTRZ1g==} @@ -4095,7 +4437,7 @@ packages: '@types/d3-polygon': 3.0.0 '@types/d3-quadtree': 3.0.2 '@types/d3-random': 3.0.1 - '@types/d3-scale': 4.0.2 + '@types/d3-scale': 4.0.3 '@types/d3-scale-chromatic': 3.0.0 '@types/d3-selection': 3.0.5 '@types/d3-shape': 3.1.0 @@ -4185,6 +4527,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: @@ -4285,6 +4634,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 @@ -4405,7 +4758,6 @@ packages: /@types/web-bluetooth@0.0.17: resolution: {integrity: sha512-4p9vcSmxAayx72yn70joFoL44c9MO/0+iVEBIQXe3v2h2SiAsEIo/G5v6ObFWvNKRFjbrVadNf9LqEEZeQPzdA==} - dev: true /@types/ws@8.5.3: resolution: {integrity: sha512-6YOoWjruKj1uLf3INHH7D3qTXwFfEsg1kf3c0uDdSBJwfa/llkwIjrAGV7j7mVgGNbzTQ3HiHKKDXl6bJPD97w==} @@ -4676,27 +5028,38 @@ packages: eslint-visitor-keys: 3.4.0 dev: true - /@unocss/astro@0.53.3(rollup@2.79.1)(vite@4.3.3): - resolution: {integrity: sha512-25OuQOnfgbWVlIOFvWzx/xJbIn0+HhDZMeFDrNyGjT3v73zr4/6oOltru+Vv4sBzkUCgG89im6kNGJ679EzMCA==} + /@unocss/astro@0.53.0(rollup@2.79.1)(vite@4.3.3): + resolution: {integrity: sha512-8bR7ysIMZEOpcjd/cVmogcABSFDYPjUqMnbflv44p1A2/deemo9CIkpRARoq/96NQuzWJsKhKodcQodExZcqiA==} dependencies: - '@unocss/core': 0.53.3 - '@unocss/reset': 0.53.3 - '@unocss/vite': 0.53.3(rollup@2.79.1)(vite@4.3.3) + '@unocss/core': 0.53.0 + '@unocss/reset': 0.53.0 + '@unocss/vite': 0.53.0(rollup@2.79.1)(vite@4.3.3) transitivePeerDependencies: - rollup - vite dev: true - /@unocss/cli@0.53.3(rollup@2.79.1): - resolution: {integrity: sha512-pM+vp48f58xEuBHaW3Nwp/Pq4qWHgmlUzd4qM8LNqyKkPRMkt6NrzlJ1iy8Oy3AKa0dnG0csMg+LXXhHEUDlaA==} + /@unocss/astro@0.53.0(rollup@2.79.1)(vite@4.3.9): + resolution: {integrity: sha512-8bR7ysIMZEOpcjd/cVmogcABSFDYPjUqMnbflv44p1A2/deemo9CIkpRARoq/96NQuzWJsKhKodcQodExZcqiA==} + dependencies: + '@unocss/core': 0.53.0 + '@unocss/reset': 0.53.0 + '@unocss/vite': 0.53.0(rollup@2.79.1)(vite@4.3.9) + transitivePeerDependencies: + - rollup + - vite + dev: true + + /@unocss/cli@0.53.0(rollup@2.79.1): + resolution: {integrity: sha512-9WNBHy8m8tMqwcp7mUhebRUBvHQfbx01CMe5cAFLmUYtJULM+8IjJxqERkaAZyyoOXf1TNO2v1dFAmCwhMRCLQ==} engines: {node: '>=14'} hasBin: true dependencies: '@ampproject/remapping': 2.2.1 '@rollup/pluginutils': 5.0.2(rollup@2.79.1) - '@unocss/config': 0.53.3 - '@unocss/core': 0.53.3 - '@unocss/preset-uno': 0.53.3 + '@unocss/config': 0.53.0 + '@unocss/core': 0.53.0 + '@unocss/preset-uno': 0.53.0 cac: 6.7.14 chokidar: 3.5.3 colorette: 2.0.20 @@ -4709,154 +5072,158 @@ packages: - rollup dev: true - /@unocss/config@0.53.3: - resolution: {integrity: sha512-72sP17B09ZT/PBJMeFGN1U5y0VhC9sBHTcIQ3GgsRxRnmCRZyzyyRyp9jwBkLRCqWfaKyWgELz1opnWGBhegFw==} + /@unocss/config@0.53.0: + resolution: {integrity: sha512-D9A3uFT6jSj/EgMOCpQQ+dPadLQDiEIb0BHa7BYW7/3STijnPMcFjPVjzABj9Wn7RQjka/MZ2/AvfH9eYMTR8g==} engines: {node: '>=14'} dependencies: - '@unocss/core': 0.53.3 + '@unocss/core': 0.53.0 unconfig: 0.3.9 dev: true - /@unocss/core@0.53.3: - resolution: {integrity: sha512-28xxgZZBaGeDUULoNrpmSP4ZtNn41b2NlBnOe2ta+TnA4F0R5v8bW0w8CxHoYGiHS8mbCq4Aw1ReNlqVhfar8Q==} + /@unocss/core@0.53.0: + resolution: {integrity: sha512-MB6hqSN2wjmm3NNYspNqzxvMv7LnyLqz0uCWr15elRqnjsuq01w7DZ1iPS9ckA2M3YjQIRTXR9YPtDbSqY0jcA==} dev: true - /@unocss/extractor-arbitrary-variants@0.53.3: - resolution: {integrity: sha512-EyCwebLU4WDDNlrN3BbN9mjCszyRAwn0kP2YVOsCcj6IJD0Y3AjzWPoToTPP6jSN4nRk0iZd/8TrN2sqUHrn4w==} + /@unocss/extractor-arbitrary-variants@0.53.0: + resolution: {integrity: sha512-f1v2E5PherulTAdrsXXb5Knaz4Viu2dM71WalNYhb+j9QqwGngagLrMzRzeIRLOEI2c0D0l7HBQtew+QFWsXcg==} dependencies: - '@unocss/core': 0.53.3 + '@unocss/core': 0.53.0 dev: true - /@unocss/inspector@0.53.3: - resolution: {integrity: sha512-EPWBOA5nsI92EjRkPdulNu0DLEURWTRVl7IkAPpgwzSU/ahr1cNuByySpyw+wof1dtyxLxlJEj/Mvz5ExVOltg==} + /@unocss/inspector@0.53.0: + resolution: {integrity: sha512-TX8O39tXuEStUs516YBiCr2BS68Z9oHXnMZspxBxMma1X47bW2Hz+x9kWkhFzqmHWBjFPJob1PjjkbfeE4TbOQ==} dependencies: gzip-size: 6.0.0 sirv: 2.0.3 dev: true - /@unocss/postcss@0.53.3(postcss@8.4.23): - resolution: {integrity: sha512-+uOK8bIzfziY3a7GXB2xI7pFx/aW+F/pigpq+LS0IkF+ZDKGD5mf9Jmo2zrcQ2wujw8ayDRFG66ByaIItjIpWw==} + /@unocss/postcss@0.53.0(postcss@8.4.24): + resolution: {integrity: sha512-q+5aDvkwP1eEhDmdz32WrwsGEEcJdQLy3apiU/df+CaL71HATvUfMZJVZbXZlFqoed703c+cGLHOhRHMPDk/dw==} engines: {node: '>=14'} peerDependencies: postcss: ^8.4.21 dependencies: - '@unocss/config': 0.53.3 - '@unocss/core': 0.53.3 + '@unocss/config': 0.53.0 + '@unocss/core': 0.53.0 css-tree: 2.3.1 fast-glob: 3.2.12 magic-string: 0.30.0 - postcss: 8.4.23 + postcss: 8.4.24 dev: true - /@unocss/preset-attributify@0.53.3: - resolution: {integrity: sha512-JWDJVldpmdybKzqJtS1UTKqF0nkYjtJKf0ptt3TclHfRYe6khinfvmy5lN1yTob0qolR/kO8S8DApDmB+qXMLg==} + /@unocss/preset-attributify@0.53.0: + resolution: {integrity: sha512-RqvSbuECeMBVVt2rmNIozznLBkfzkfe7vOIx3arytPBG/nggDnC1GB/xTxCGAiU7UcEXw03laWtjwXHmJHt8Gw==} dependencies: - '@unocss/core': 0.53.3 + '@unocss/core': 0.53.0 dev: true - /@unocss/preset-icons@0.53.3: - resolution: {integrity: sha512-V+XIE9qFqZmEa9wrI16nR6OG7zwo6HEj7M6OewQNG1tzije6RVCg5QbU9Mhxgr1vC5qhyY+DaSAYQJKIWh7OQw==} + /@unocss/preset-icons@0.53.0: + resolution: {integrity: sha512-0Et3dtrmBRVPZ5pGiITrwb9O01M88s0juOVSM7L4z0Uf0RNXuPCGwh2N5TRX2IIS7LAi4k0tAXFUORlkUiC2Lg==} dependencies: '@iconify/utils': 2.1.7 - '@unocss/core': 0.53.3 + '@unocss/core': 0.53.0 ofetch: 1.1.1 transitivePeerDependencies: - supports-color dev: true - /@unocss/preset-mini@0.53.3: - resolution: {integrity: sha512-Sr61c/UPCD4OjWSXE+30FxXJHMdzh/Zc8Ow6RzlT+fqUBYyNw3WpXwRW3Goxnxl98FvK2vb+cZGTxVRlezO8Pw==} + /@unocss/preset-mini@0.53.0: + resolution: {integrity: sha512-hGj9ltZUJIuPT+9bO+R0OlsQOSlV7rjQRkSSMnUaDsuKfzhahsyc7QglNHZI4wuTI/9iSJKGUD4nvTe559+8Hg==} dependencies: - '@unocss/core': 0.53.3 - '@unocss/extractor-arbitrary-variants': 0.53.3 + '@unocss/core': 0.53.0 + '@unocss/extractor-arbitrary-variants': 0.53.0 dev: true - /@unocss/preset-tagify@0.53.3: - resolution: {integrity: sha512-sIbbMp1ZITJ6Tp7RITDQ6vxOZkx61rNwVSPhTh1HXS8V50GSUBBQe9Fv/kDWYuGjmL1Y5Gq2/VkCB8Zp68co/g==} + /@unocss/preset-tagify@0.53.0: + resolution: {integrity: sha512-S3e1d2jJvjEbGBE0jPEht/Hmp+245SxjWcrDdO7HmKVL2+0vwIQQg6P2P9aUWqt+/kZQ6iBStSzGm9RyKRKMhw==} dependencies: - '@unocss/core': 0.53.3 + '@unocss/core': 0.53.0 dev: true - /@unocss/preset-typography@0.53.3: - resolution: {integrity: sha512-XSv3+nIttJHIuZzpki5mWZx2BGBlUG8j7KQfWJkbCOO+jI3VNwxORFtTEKi5aDMkJM+V63UX8xlF8WRPJcbG1Q==} + /@unocss/preset-typography@0.53.0: + resolution: {integrity: sha512-VFTNV8O9KIH/JX9Pn43Vv6JrCTljG9NYnuvZpKpEp95uYDcZQAISao04RWEzbAzqB31x8N9Aga1Bq2TSOg3uTA==} dependencies: - '@unocss/core': 0.53.3 - '@unocss/preset-mini': 0.53.3 + '@unocss/core': 0.53.0 + '@unocss/preset-mini': 0.53.0 dev: true - /@unocss/preset-uno@0.53.3: - resolution: {integrity: sha512-Yh0TOx5cTtqSQMrgxr0ze5kIEaBYs/W6WuX63h+0s18pe4ojG07bh6JKRpndf5scBxJ+oZxulQ6hulu6hOCEZg==} + /@unocss/preset-uno@0.53.0: + resolution: {integrity: sha512-f50D2nFnX7nXvxtueUfCRbSCrWNJTFm4qKg0J9gzqyOJGWJoNcN2Ig9aL0P47W1TmIjYA5SpGlvg6U5qIfkNtQ==} dependencies: - '@unocss/core': 0.53.3 - '@unocss/preset-mini': 0.53.3 - '@unocss/preset-wind': 0.53.3 + '@unocss/core': 0.53.0 + '@unocss/preset-mini': 0.53.0 + '@unocss/preset-wind': 0.53.0 dev: true - /@unocss/preset-web-fonts@0.53.3: - resolution: {integrity: sha512-P17xcbhx4F+J1HQWrfbslqIibslF/o8iQg+94DYRxaZRg7a+uAKwYIOUCKiPxGXz88r4/QBYhXpsvjoHv4VZ+A==} + /@unocss/preset-web-fonts@0.53.0: + resolution: {integrity: sha512-CAZW/PSp9+VBvzE/T56v2Yb8Nk3xF9XJaQrDydF9cAPyz/gVOZBbKQSDS8OqyAqKiXbnn+NYCwEqTG8v/YOMyw==} dependencies: - '@unocss/core': 0.53.3 + '@unocss/core': 0.53.0 ofetch: 1.1.1 dev: true - /@unocss/preset-wind@0.53.3: - resolution: {integrity: sha512-WHy2dEmj41x3RYinkRvxdz6C1B9fAV2Wck7xboFRXu9jJYERFCfajNcQSuCiGZ0zr+Ml94G6e7xYZ2xWCzMlLA==} + /@unocss/preset-wind@0.53.0: + resolution: {integrity: sha512-vb9tV3Cze+w8OZyOd/Xi6Zn8F8+EV53AZIqCrQvMD/6ZeqQJ9gjFx/Q69H/bu009wnPleQpce6RKJcNqMzif8g==} dependencies: - '@unocss/core': 0.53.3 - '@unocss/preset-mini': 0.53.3 + '@unocss/core': 0.53.0 + '@unocss/preset-mini': 0.53.0 + dev: true + + /@unocss/reset@0.53.0: + resolution: {integrity: sha512-4XJkEtVxUGYp+WX2aRTrZLNp6MEwulBvhhpkAjwfkS+wVdo9lMma0O93TCqJaFeYx7lU8W92APB4n918rz9scA==} dev: true /@unocss/reset@0.53.3: resolution: {integrity: sha512-DilchevgPVH7Kiiwg/yU8xV6admL/FeV1rwf5sFBEd4THiQSasQXYiqE0e9RyOAF4bJA4c3ZGE9x0cb8T37Fwg==} dev: true - /@unocss/scope@0.53.3: - resolution: {integrity: sha512-i41vTORGTLYmT6HKi6mpv2OLf5ewUvWP2w52ISrRGw8oatl0QQKyLk/vGwt9z06/Xy5QStDYoFt1QRc9tLnzBQ==} + /@unocss/scope@0.53.0: + resolution: {integrity: sha512-JAk3jJeFTmmafVI8Oy/TkAs1/NXpR9Vy5IEIMO6gyAmYw0VjiL9dkYDNZAD9hwdj/oRIUgJMcX96Huhy+YDl/w==} dev: true - /@unocss/transformer-attributify-jsx-babel@0.53.3: - resolution: {integrity: sha512-k0G1lMyuZNKQ7MU21uGlq8OPR+gMA17zJv9nNum83umQpNutaIPgrOwcQv/3wItlYgEF7A24u83GOxspWaFauQ==} + /@unocss/transformer-attributify-jsx-babel@0.53.0: + resolution: {integrity: sha512-++DTBEkFS2/1VE+TBPEmK0NAaCa/KP7dkJ7uldrQ+c5MpDp/IcCkOt8vPEL/6qKhUbTYXb/hruqq6wv27ZDrSg==} dependencies: - '@unocss/core': 0.53.3 + '@unocss/core': 0.53.0 dev: true - /@unocss/transformer-attributify-jsx@0.53.3: - resolution: {integrity: sha512-aTFpg9DAAuVSeaEF40SNsnEpK/42MaXdwfdF+xInYCLnqTx0NX/Uh0afZGY/FDgJe9yDEFrkFZ9yCd1W4RjQYQ==} + /@unocss/transformer-attributify-jsx@0.53.0: + resolution: {integrity: sha512-4QJEmoj2of7nZM8afNsMk+NWX3K89j1sHx+EKw5+s1r/Pg4/PxeDgF4PnRWvPnjvRpDaRRTZGRxTrBEimup8vg==} dependencies: - '@unocss/core': 0.53.3 + '@unocss/core': 0.53.0 dev: true - /@unocss/transformer-compile-class@0.53.3: - resolution: {integrity: sha512-j/NbGk/BBxSRaMzMYQy0zlojCw8ToPi7IpRMfAYP5oOpswk73vOROVnLXKyALrQUaBlAS5XK4Ui/iY3Bv5C5Xg==} + /@unocss/transformer-compile-class@0.53.0: + resolution: {integrity: sha512-PTPysxBAimEWspMU3gMo+053M5RURnLT88Wp0y8f4F8oEMg7fV9Tn5f/bftvG+iI7dPyl4m/OsislxfucoESYw==} dependencies: - '@unocss/core': 0.53.3 + '@unocss/core': 0.53.0 dev: true - /@unocss/transformer-directives@0.53.3: - resolution: {integrity: sha512-FIPdg8z3OMHEDu9RqbCFcl+84HaELDWKU1ecYTvZQkLzdpugCJfqls4FUg0gPwwzKJbJze2hSqECpWSFk883oA==} + /@unocss/transformer-directives@0.53.0: + resolution: {integrity: sha512-EIrrVphm0Bv+Ng2w1Qj5f0JFkfbN0b1/1fJ9hwgb5S2ewE3Xvwk59/h321D/GGDraQCUqqyZGgcG368xVh3pQA==} dependencies: - '@unocss/core': 0.53.3 + '@unocss/core': 0.53.0 css-tree: 2.3.1 dev: true - /@unocss/transformer-variant-group@0.53.3: - resolution: {integrity: sha512-0yzV6sVkxwRmhf1wp3F8Vt+dxFaVYZ1wlyUqQVDjlupjvBoMWvARkGQwMaif2h9E/Qb/NTZRs91fbE2g+qBg+A==} + /@unocss/transformer-variant-group@0.53.0: + resolution: {integrity: sha512-dwfjifgoa2VuO3LCl2ayRw3M5T6EfDKt16s9KbIRUcHqMJFnoHACAk8e4YsHGBvly0utbQHxFuBygOar3IfxEg==} dependencies: - '@unocss/core': 0.53.3 + '@unocss/core': 0.53.0 dev: true - /@unocss/vite@0.53.3(rollup@2.79.1)(vite@4.3.3): - resolution: {integrity: sha512-XuSzw142Ex4YEQdoLmCf3/aqF+9qzN5ymqVHVdsrk2GE9jNlg8H7eF6G16xpZS39mJJY+cKdwtzuAKRYvoSd5g==} + /@unocss/vite@0.53.0(rollup@2.79.1)(vite@4.3.3): + resolution: {integrity: sha512-JoZhKVNruRjfySMVg/zNJbLEn/NTXj29Wf0SN4++xnGKrSapkPzYC46psL5bm5N5v4SHdpepTCoonC3FWCY6Fw==} peerDependencies: vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0 dependencies: '@ampproject/remapping': 2.2.1 '@rollup/pluginutils': 5.0.2(rollup@2.79.1) - '@unocss/config': 0.53.3 - '@unocss/core': 0.53.3 - '@unocss/inspector': 0.53.3 - '@unocss/scope': 0.53.3 - '@unocss/transformer-directives': 0.53.3 + '@unocss/config': 0.53.0 + '@unocss/core': 0.53.0 + '@unocss/inspector': 0.53.0 + '@unocss/scope': 0.53.0 + '@unocss/transformer-directives': 0.53.0 chokidar: 3.5.3 fast-glob: 3.2.12 magic-string: 0.30.0 @@ -4865,12 +5232,32 @@ packages: - rollup dev: true - /@vite-pwa/vitepress@0.2.0(vite-plugin-pwa@0.16.4): + /@unocss/vite@0.53.0(rollup@2.79.1)(vite@4.3.9): + resolution: {integrity: sha512-JoZhKVNruRjfySMVg/zNJbLEn/NTXj29Wf0SN4++xnGKrSapkPzYC46psL5bm5N5v4SHdpepTCoonC3FWCY6Fw==} + peerDependencies: + vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0 + dependencies: + '@ampproject/remapping': 2.2.1 + '@rollup/pluginutils': 5.0.2(rollup@2.79.1) + '@unocss/config': 0.53.0 + '@unocss/core': 0.53.0 + '@unocss/inspector': 0.53.0 + '@unocss/scope': 0.53.0 + '@unocss/transformer-directives': 0.53.0 + chokidar: 3.5.3 + fast-glob: 3.2.12 + magic-string: 0.30.0 + vite: 4.3.9 + transitivePeerDependencies: + - rollup + dev: true + + /@vite-pwa/vitepress@0.2.0(vite-plugin-pwa@0.16.0): resolution: {integrity: sha512-dVQVaP6NB9woCFe4UASUqRp7uwBQJOVXlJlqK4krqXcbb3NuXIXIWOnU7HLpJnHqZj5U/81gKtLN6gs5gJBwiQ==} peerDependencies: vite-plugin-pwa: '>=0.16.3 <1' dependencies: - vite-plugin-pwa: 0.16.4(vite@4.3.3)(workbox-build@7.0.0)(workbox-window@6.5.4) + vite-plugin-pwa: 0.16.0(vite@4.3.3)(workbox-build@7.0.0)(workbox-window@7.0.0) dev: true /@vitejs/plugin-vue@4.2.1(vite@4.3.3)(vue@3.2.47): @@ -4906,18 +5293,34 @@ packages: vue: 3.3.4 dev: true - /@vitest/coverage-istanbul@0.32.2(vitest@0.32.2): - resolution: {integrity: sha512-B5VSvfzwTsDt9HjFmQ4sZ2tQHivmHJpAoG/BJwNNQeBtSCSdY1L6tfCjwZLo7ryOmZEDA3ck/DAmHCUZqa+MWA==} + /@vitejs/plugin-vue@4.2.3(vite@4.4.0-beta.3)(vue@3.3.4): + resolution: {integrity: sha512-R6JDUfiZbJA9cMiguQ7jxALsgiprjBeHL5ikpXfJCH62pPHtI+JdJ5xWj6Ev73yXSlYl86+blXn1kZHQ7uElxw==} + engines: {node: ^14.18.0 || >=16.0.0} + peerDependencies: + vite: ^4.0.0 + vue: ^3.2.25 + dependencies: + vite: 4.4.0-beta.3 + vue: 3.3.4 + dev: true + + /@vitest/coverage-v8@0.32.2(vitest@0.32.2): + resolution: {integrity: sha512-/+V3nB3fyeuuSeKxCfi6XmWjDIxpky7AWSkGVfaMjAk7di8igBwRsThLjultwIZdTDH1RAxpjmCXEfSqsMFZOA==} peerDependencies: vitest: '>=0.32.0 <1' dependencies: + '@ampproject/remapping': 2.2.1 + '@bcoe/v8-coverage': 0.2.3 istanbul-lib-coverage: 3.2.0 - istanbul-lib-instrument: 5.2.1 istanbul-lib-report: 3.0.0 istanbul-lib-source-maps: 4.0.1 istanbul-reports: 3.1.5 + magic-string: 0.30.0 + picocolors: 1.0.0 + std-env: 3.3.2 test-exclude: 6.0.0 - vitest: 0.32.2(@vitest/ui@0.32.2)(jsdom@21.1.1) + v8-to-istanbul: 9.1.0 + vitest: 0.32.2(@vitest/ui@0.32.2)(jsdom@22.0.0) transitivePeerDependencies: - supports-color dev: true @@ -4962,10 +5365,10 @@ packages: fast-glob: 3.2.12 fflate: 0.7.4 flatted: 3.2.7 - pathe: 1.1.0 + pathe: 1.1.1 picocolors: 1.0.0 sirv: 2.0.3 - vitest: 0.32.2(@vitest/ui@0.32.2)(jsdom@21.1.1) + vitest: 0.32.2(@vitest/ui@0.32.2)(jsdom@22.0.0) dev: true /@vitest/utils@0.32.2: @@ -5018,7 +5421,7 @@ packages: /@vue/compiler-sfc@3.2.47: resolution: {integrity: sha512-rog05W+2IFfxjMcFw10tM9+f7i/+FFpZJJ5XHX72NP9eC2uRD+42M3pYcQqDXVYoj74kHMSEdQ/WmCjt8JFksQ==} dependencies: - '@babel/parser': 7.21.2 + '@babel/parser': 7.21.8 '@vue/compiler-core': 3.2.47 '@vue/compiler-dom': 3.2.47 '@vue/compiler-ssr': 3.2.47 @@ -5026,7 +5429,7 @@ packages: '@vue/shared': 3.2.47 estree-walker: 2.0.2 magic-string: 0.25.9 - postcss: 8.4.23 + postcss: 8.4.24 source-map: 0.6.1 /@vue/compiler-sfc@3.3.4: @@ -5040,7 +5443,7 @@ packages: '@vue/shared': 3.3.4 estree-walker: 2.0.2 magic-string: 0.30.0 - postcss: 8.4.23 + postcss: 8.4.24 source-map-js: 1.0.2 /@vue/compiler-ssr@3.2.47: @@ -5154,14 +5557,25 @@ packages: '@types/web-bluetooth': 0.0.17 '@vueuse/metadata': 10.1.2 '@vueuse/shared': 10.1.2(vue@3.3.4) - vue-demi: 0.14.0(vue@3.3.4) + vue-demi: 0.14.5(vue@3.3.4) transitivePeerDependencies: - '@vue/composition-api' - vue dev: true - /@vueuse/integrations@10.1.2(focus-trap@7.4.3)(vue@3.3.4): - resolution: {integrity: sha512-wUpG3Wv6LiWerOwCzOAM0iGhNQ4vfFUTkhj/xQy7TLXduh2M3D8N08aS0KqlxsejY6R8NLxydDIM+68QfHZZ8Q==} + /@vueuse/core@10.2.1(vue@3.3.4): + resolution: {integrity: sha512-c441bfMbkAwTNwVRHQ0zdYZNETK//P84rC01aP2Uy/aRFCiie9NE/k9KdIXbno0eDYP5NPUuWv0aA/I4Unr/7w==} + dependencies: + '@types/web-bluetooth': 0.0.17 + '@vueuse/metadata': 10.2.1 + '@vueuse/shared': 10.2.1(vue@3.3.4) + vue-demi: 0.14.5(vue@3.3.4) + transitivePeerDependencies: + - '@vue/composition-api' + - vue + + /@vueuse/integrations@10.2.1(focus-trap@7.4.3)(vue@3.3.4): + resolution: {integrity: sha512-FDP5lni+z9FjHE9H3xuvwSjoRV9U8jmDvJpmHPCBjUgPGYRynwb60eHWXCFJXLUtb4gSIHy0e+iaEbrKdalCkQ==} peerDependencies: async-validator: '*' axios: '*' @@ -5201,10 +5615,10 @@ packages: universal-cookie: optional: true dependencies: - '@vueuse/core': 10.1.2(vue@3.3.4) - '@vueuse/shared': 10.1.2(vue@3.3.4) + '@vueuse/core': 10.2.1(vue@3.3.4) + '@vueuse/shared': 10.2.1(vue@3.3.4) focus-trap: 7.4.3 - vue-demi: 0.14.0(vue@3.3.4) + vue-demi: 0.14.5(vue@3.3.4) transitivePeerDependencies: - '@vue/composition-api' - vue @@ -5218,10 +5632,13 @@ packages: resolution: {integrity: sha512-3mc5BqN9aU2SqBeBuWE7ne4OtXHoHKggNgxZR2K+zIW4YLsy6xoZ4/9vErQs6tvoKDX6QAqm3lvsrv0mczAwIQ==} dev: true + /@vueuse/metadata@10.2.1: + resolution: {integrity: sha512-3Gt68mY/i6bQvFqx7cuGBzrCCQu17OBaGWS5JdwISpMsHnMKKjC2FeB5OAfMcCQ0oINfADP3i9A4PPRo0peHdQ==} + /@vueuse/shared@10.1.0(vue@3.2.47): resolution: {integrity: sha512-2X52ogu12i9DkKOQ01yeb/BKg9UO87RNnpm5sXkQvyORlbq8ONS5l39MYkjkeVWWjdT0teJru7a2S41dmHmqjQ==} dependencies: - vue-demi: 0.14.0(vue@3.2.47) + vue-demi: 0.14.5(vue@3.2.47) transitivePeerDependencies: - '@vue/composition-api' - vue @@ -5230,12 +5647,20 @@ packages: /@vueuse/shared@10.1.2(vue@3.3.4): resolution: {integrity: sha512-1uoUTPBlgyscK9v6ScGeVYDDzlPSFXBlxuK7SfrDGyUTBiznb3mNceqhwvZHjtDRELZEN79V5uWPTF1VDV8svA==} dependencies: - vue-demi: 0.14.0(vue@3.3.4) + vue-demi: 0.14.5(vue@3.3.4) transitivePeerDependencies: - '@vue/composition-api' - vue dev: true + /@vueuse/shared@10.2.1(vue@3.3.4): + resolution: {integrity: sha512-QWHq2bSuGptkcxx4f4M/fBYC3Y8d3M2UYyLsyzoPgEoVzJURQ0oJeWXu79OiLlBb8gTKkqe4mO85T/sf39mmiw==} + dependencies: + vue-demi: 0.14.5(vue@3.3.4) + transitivePeerDependencies: + - '@vue/composition-api' + - vue + /@wdio/config@7.30.0(typescript@5.1.3): resolution: {integrity: sha512-/38rol9WCfFTMtXyd/C856/aexxIZnfVvXg7Fw2WXpqZ9qadLA+R4N35S2703n/RByjK/5XAYtHoljtvh3727w==} engines: {node: '>=12.0.0'} @@ -5506,13 +5931,6 @@ packages: acorn-walk: 7.2.0 dev: true - /acorn-globals@7.0.1: - resolution: {integrity: sha512-umOSDSDrfHbTNPuNpC2NSnnA3LUrqpevPb4T9jRx4MagXNS0rs+gwiTcAvqCRmsD6utzsrzNt+ebm00SNWiC3Q==} - dependencies: - acorn: 8.8.2 - acorn-walk: 8.2.0 - dev: true - /acorn-import-assertions@1.8.0(acorn@8.8.2): resolution: {integrity: sha512-m7VZ3jwz4eK6A4Vtt8Ew1/mNbP24u0FhdyfA7fSvnJR6LMdfOYnmuIrrJAgrYfYJ10F/otaHTtrtrtmHdMNzEw==} peerDependencies: @@ -5576,7 +5994,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 @@ -5584,7 +6002,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): @@ -5595,12 +6013,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 @@ -5613,8 +6031,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 @@ -5726,7 +6144,6 @@ packages: /any-promise@1.3.0: resolution: {integrity: sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==} - dev: false /anymatch@3.1.2: resolution: {integrity: sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==} @@ -6025,6 +6442,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'} @@ -6233,6 +6654,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'} @@ -6284,6 +6709,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'} @@ -6397,6 +6826,11 @@ packages: engines: {node: '>=8'} dev: true + /ci-info@3.8.0: + resolution: {integrity: sha512-eXTggHWSooYhq49F2opQhuHWgzucfF2YgODK4e1566GQs5BIfP30B0oenwBJHfWxAs2fyPB1s7Mg949zLf61Yw==} + engines: {node: '>=8'} + dev: true + /cjs-module-lexer@1.2.2: resolution: {integrity: sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA==} dev: true @@ -6447,6 +6881,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'} @@ -6667,7 +7112,7 @@ packages: js-string-escape: 1.0.1 lodash: 4.17.21 md5-hex: 3.0.1 - semver: 7.5.0 + semver: 7.5.3 well-known-symbols: 2.0.0 dev: true @@ -7063,6 +7508,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'} @@ -7156,6 +7605,12 @@ packages: lodash: 4.17.21 dev: false + /d3-array@2.12.1: + resolution: {integrity: sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==} + dependencies: + internmap: 1.0.1 + dev: false + /d3-array@3.2.0: resolution: {integrity: sha512-3yXFQo0oG3QCxbF06rMPFyGRMGJNS7NvsV1+2joOjbBE+9xvWQ8+GcMJAjRCzw06zQ3/arXeJgbPYcjUCuC+3g==} engines: {node: '>=12'} @@ -7273,6 +7728,10 @@ packages: d3-color: 3.1.0 dev: false + /d3-path@1.0.9: + resolution: {integrity: sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg==} + dev: false + /d3-path@3.0.1: resolution: {integrity: sha512-gq6gZom9AFZby0YLduxT1qmrp4xpBA1YZr19OI717WIdKE2OM5ETq5qrHLb301IgxhLwcuxvGZVLeeWc/k1I6w==} engines: {node: '>=12'} @@ -7293,6 +7752,13 @@ packages: engines: {node: '>=12'} dev: false + /d3-sankey@0.12.3: + resolution: {integrity: sha512-nQhsBRmM19Ax5xEIPLMY9ZmJ/cDvd1BG3UVvt5h3WRxKg5zGRbvnteTyWAbzeSvlh3tW7ZEmq4VwR5mB3tutmQ==} + dependencies: + d3-array: 2.12.1 + d3-shape: 1.3.7 + dev: false + /d3-scale-chromatic@3.0.0: resolution: {integrity: sha512-Lx9thtxAKrO2Pq6OO2Ua474opeziKr279P/TKZsMAhYyNDD3EnCffdbgeSYN5O7m2ByQsxtuP2CSDczNUIZ22g==} engines: {node: '>=12'} @@ -7317,6 +7783,12 @@ packages: engines: {node: '>=12'} dev: false + /d3-shape@1.3.7: + resolution: {integrity: sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==} + dependencies: + d3-path: 1.0.9 + dev: false + /d3-shape@3.1.0: resolution: {integrity: sha512-tGDh1Muf8kWjEDT/LswZJ8WF85yDZLvVJpYU9Nq+8+yW1Z5enxrmXOhTArlkaElU+CTn0OTVNli+/i+HP45QEQ==} engines: {node: '>=12'} @@ -7404,6 +7876,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: @@ -7734,8 +8213,8 @@ packages: domelementtype: 2.3.0 dev: true - /dompurify@3.0.3: - resolution: {integrity: sha512-axQ9zieHLnAnHh0sfAamKYiqXMJAVwu+LM/alQ7WDagoWessyWvMSFyW65CqF3owufNu8HBcE4cM2Vflu7YWcQ==} + /dompurify@3.0.4: + resolution: {integrity: sha512-ae0mA+Qiqp6C29pqZX3fQgK+F91+F7wobM/v8DRzDqJdZJELXiFUx4PP4pK/mzUS0xkiSEx3Ncd9gr69jg3YsQ==} dev: false /domutils@3.0.1: @@ -7925,10 +8404,49 @@ 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 + + /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'} @@ -7959,6 +8477,36 @@ packages: '@esbuild/win32-x64': 0.17.18 dev: true + /esbuild@0.18.11: + resolution: {integrity: sha512-i8u6mQF0JKJUlGR3OdFLKldJQMMs8OqM9Cc3UCi9XXziJ9WERM5bfkHaEAy0YAvPRMgqSW55W7xYn84XtEFTtA==} + engines: {node: '>=12'} + hasBin: true + requiresBuild: true + optionalDependencies: + '@esbuild/android-arm': 0.18.11 + '@esbuild/android-arm64': 0.18.11 + '@esbuild/android-x64': 0.18.11 + '@esbuild/darwin-arm64': 0.18.11 + '@esbuild/darwin-x64': 0.18.11 + '@esbuild/freebsd-arm64': 0.18.11 + '@esbuild/freebsd-x64': 0.18.11 + '@esbuild/linux-arm': 0.18.11 + '@esbuild/linux-arm64': 0.18.11 + '@esbuild/linux-ia32': 0.18.11 + '@esbuild/linux-loong64': 0.18.11 + '@esbuild/linux-mips64el': 0.18.11 + '@esbuild/linux-ppc64': 0.18.11 + '@esbuild/linux-riscv64': 0.18.11 + '@esbuild/linux-s390x': 0.18.11 + '@esbuild/linux-x64': 0.18.11 + '@esbuild/netbsd-x64': 0.18.11 + '@esbuild/openbsd-x64': 0.18.11 + '@esbuild/sunos-x64': 0.18.11 + '@esbuild/win32-arm64': 0.18.11 + '@esbuild/win32-ia32': 0.18.11 + '@esbuild/win32-x64': 0.18.11 + dev: true + /esbuild@0.18.6: resolution: {integrity: sha512-5QgxWaAhU/tPBpvkxUmnFv2YINHuZzjbk0LeUUnC2i3aJHjfi5yR49lgKgF7cb98bclOp/kans8M5TGbGFfJlQ==} engines: {node: '>=12'} @@ -8089,20 +8637,20 @@ packages: - typescript dev: true - /eslint-plugin-jsdoc@43.0.7(eslint@8.39.0): - resolution: {integrity: sha512-32Sx5I9VzO/bqbtslCu3L1GHIPo+QEliwqwjWq+qzbUv76wrkH6ifUEE0EbkuNEn+cHlSIOrg/IJ1PGNN72QZA==} - engines: {node: ^14 || ^16 || ^17 || ^18 || ^19 || ^20} + /eslint-plugin-jsdoc@46.0.0(eslint@8.39.0): + resolution: {integrity: sha512-xmB5WleBcPCFYlrFfdjrcfSKOJBLwyGmKa+i+fVqlIHp8g5aAoeQpBGugUzToFtQgd4hNZYlfIcP7QSxC9NYWQ==} + engines: {node: '>=16'} peerDependencies: eslint: ^7.0.0 || ^8.0.0 dependencies: - '@es-joy/jsdoccomment': 0.37.1 + '@es-joy/jsdoccomment': 0.39.4 are-docs-informative: 0.0.2 comment-parser: 1.3.1 debug: 4.3.4 escape-string-regexp: 4.0.0 eslint: 8.39.0 esquery: 1.5.0 - semver: 7.5.0 + semver: 7.5.3 spdx-expression-parse: 3.0.1 transitivePeerDependencies: - supports-color @@ -8150,28 +8698,28 @@ packages: '@microsoft/tsdoc-config': 0.16.2 dev: true - /eslint-plugin-unicorn@46.0.0(eslint@8.39.0): - resolution: {integrity: sha512-j07WkC+PFZwk8J33LYp6JMoHa1lXc1u6R45pbSAipjpfpb7KIGr17VE2D685zCxR5VL4cjrl65kTJflziQWMDA==} - engines: {node: '>=14.18'} + /eslint-plugin-unicorn@47.0.0(eslint@8.39.0): + resolution: {integrity: sha512-ivB3bKk7fDIeWOUmmMm9o3Ax9zbMz1Bsza/R2qm46ufw4T6VBFBaJIR1uN3pCKSmSXm8/9Nri8V+iUut1NhQGA==} + engines: {node: '>=16'} peerDependencies: - eslint: '>=8.28.0' + eslint: '>=8.38.0' dependencies: '@babel/helper-validator-identifier': 7.19.1 '@eslint-community/eslint-utils': 4.4.0(eslint@8.39.0) - ci-info: 3.6.2 + ci-info: 3.8.0 clean-regexp: 1.0.0 eslint: 8.39.0 esquery: 1.5.0 indent-string: 4.0.0 - is-builtin-module: 3.2.0 + is-builtin-module: 3.2.1 jsesc: 3.0.2 lodash: 4.17.21 pluralize: 8.0.0 read-pkg-up: 7.0.1 regexp-tree: 0.1.24 - regjsparser: 0.9.1 + regjsparser: 0.10.0 safe-regex: 2.1.1 - semver: 7.3.8 + semver: 7.5.3 strip-indent: 3.0.0 dev: true @@ -8323,6 +8871,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: @@ -8471,6 +9026,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 @@ -8555,6 +9116,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 @@ -8576,7 +9141,7 @@ packages: proxy-addr: 2.0.7 rfdc: 1.3.0 secure-json-parse: 2.7.0 - semver: 7.5.0 + semver: 7.5.3 tiny-lru: 8.0.2 transitivePeerDependencies: - supports-color @@ -8612,6 +9177,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} @@ -8844,6 +9417,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'} @@ -9000,6 +9582,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'} @@ -9012,6 +9598,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 @@ -9023,7 +9619,7 @@ packages: dependencies: foreground-child: 3.1.1 jackspeak: 2.1.1 - minimatch: 9.0.0 + minimatch: 9.0.1 minipass: 5.0.0 path-scurry: 1.7.0 dev: true @@ -9576,6 +10172,10 @@ packages: side-channel: 1.0.4 dev: true + /internmap@1.0.1: + resolution: {integrity: sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw==} + dev: false + /internmap@2.0.3: resolution: {integrity: sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==} engines: {node: '>=12'} @@ -9648,8 +10248,8 @@ packages: engines: {node: '>=4'} dev: true - /is-builtin-module@3.2.0: - resolution: {integrity: sha512-phDA4oSGt7vl1n5tJvTWooWWAsXLY+2xCnxNqvKhGEzujg+A43wPlPOyDg3C8XQHN+6k/JTQWJ/j0dQh/qr+Hw==} + /is-builtin-module@3.2.1: + resolution: {integrity: sha512-BSLE3HnV2syZ0FK0iMA/yUGplUeMmNz4AW5fnTunbCIqZi4vG3WjJT9FHMy5D69xmAYBHXQhJdALdpwVxV501A==} engines: {node: '>=6'} dependencies: builtin-modules: 3.3.0 @@ -9664,7 +10264,7 @@ packages: resolution: {integrity: sha512-ZYvCgrefwqoQ6yTyYUbQu64HsITZ3NfKX1lzaEYdkTDcfKzzCI/wthRRYKkdjHKFVgNiXKAKm65Zo1pk2as/QQ==} hasBin: true dependencies: - ci-info: 3.6.2 + ci-info: 3.8.0 dev: true /is-core-module@2.10.0: @@ -9798,6 +10398,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'} @@ -10100,7 +10704,7 @@ packages: '@types/node': 18.16.0 babel-jest: 29.5.0(@babel/core@7.12.3) chalk: 4.1.2 - ci-info: 3.6.2 + ci-info: 3.8.0 deepmerge: 4.2.2 glob: 7.2.3 graceful-fs: 4.2.10 @@ -10373,7 +10977,7 @@ packages: jest-util: 29.5.0 natural-compare: 1.4.0 pretty-format: 29.5.0 - semver: 7.5.0 + semver: 7.5.3 transitivePeerDependencies: - supports-color dev: true @@ -10385,7 +10989,7 @@ packages: '@jest/types': 29.5.0 '@types/node': 18.16.0 chalk: 4.1.2 - ci-info: 3.6.2 + ci-info: 3.8.0 graceful-fs: 4.2.10 picomatch: 2.3.1 dev: true @@ -10551,9 +11155,9 @@ packages: engines: {node: '>=12.0.0'} dev: true - /jsdom@21.1.1: - resolution: {integrity: sha512-Jjgdmw48RKcdAIQyUD1UdBh2ecH7VqwaXPN3ehoZN6MqgVbMn+lRm1aAT1AsdJRAJpwfa4IpwgzySn61h2qu3w==} - engines: {node: '>=14'} + /jsdom@22.0.0: + resolution: {integrity: sha512-p5ZTEb5h+O+iU02t0GfEjAnkdYPrQSkfuTSMkMYyIoMvUNEHsbG0bHHbfXIcfTqD2UfvjQX7mmgiFsyRwGscVw==} + engines: {node: '>=16'} peerDependencies: canvas: ^2.5.0 peerDependenciesMeta: @@ -10561,19 +11165,16 @@ packages: optional: true dependencies: abab: 2.0.6 - acorn: 8.8.2 - acorn-globals: 7.0.1 cssstyle: 3.0.0 data-urls: 4.0.0 decimal.js: 10.4.3 domexception: 4.0.0 - escodegen: 2.0.0 form-data: 4.0.0 html-encoding-sniffer: 3.0.0 http-proxy-agent: 5.0.0 https-proxy-agent: 5.0.1 is-potential-custom-element-name: 1.0.1 - nwsapi: 2.2.2 + nwsapi: 2.2.5 parse5: 7.1.2 rrweb-cssom: 0.6.0 saxes: 6.0.0 @@ -10617,6 +11218,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 @@ -10791,7 +11413,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 @@ -10863,7 +11485,7 @@ packages: optional: true dependencies: cli-truncate: 2.1.0 - colorette: 2.0.19 + colorette: 2.0.20 log-update: 4.0.0 p-map: 4.0.0 rfdc: 1.3.0 @@ -11032,6 +11654,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 @@ -11102,6 +11730,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'} @@ -11109,6 +11744,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: @@ -11217,7 +11858,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 @@ -11248,6 +11889,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} @@ -11662,6 +12316,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: @@ -11705,7 +12365,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==} @@ -11733,6 +12392,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 @@ -11842,8 +12505,8 @@ packages: engines: {node: '>=10'} dependencies: hosted-git-info: 4.1.0 - is-core-module: 2.10.0 - semver: 7.5.0 + is-core-module: 2.12.1 + semver: 7.5.3 validate-npm-package-license: 3.0.4 dev: true @@ -11877,8 +12540,8 @@ packages: path-key: 4.0.0 dev: true - /nwsapi@2.2.2: - resolution: {integrity: sha512-90yv+6538zuvUMnN+zCr8LuV6bPFdq50304114vJYJ8RDyK8D5O9Phpbd6SZWgI7PwzmmfN1upeOJlvybDSgCw==} + /nwsapi@2.2.5: + resolution: {integrity: sha512-6xpotnECFy/og7tKSBVmUNft7J3jyXAka4XvG6AUhFWRz+Q/Ljus7znJAA3bxColfQLdS+XsjoodtJfCgeTEFQ==} dev: true /nyc@15.1.0: @@ -11930,10 +12593,6 @@ packages: engines: {node: '>= 6'} dev: false - /object-inspect@1.12.2: - resolution: {integrity: sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ==} - dev: true - /object-inspect@1.12.3: resolution: {integrity: sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==} dev: true @@ -12302,6 +12961,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==} @@ -12430,29 +13096,36 @@ packages: hasBin: true dev: true - /postcss-import@15.1.0(postcss@8.4.23): + /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'} peerDependencies: postcss: ^8.0.0 dependencies: - postcss: 8.4.23 + postcss: 8.4.24 postcss-value-parser: 4.2.0 read-cache: 1.0.0 resolve: 1.22.2 dev: false - /postcss-js@4.0.1(postcss@8.4.23): + /postcss-js@4.0.1(postcss@8.4.24): resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==} engines: {node: ^12 || ^14 || >= 16} peerDependencies: postcss: ^8.4.21 dependencies: camelcase-css: 2.0.1 - postcss: 8.4.23 + postcss: 8.4.24 dev: false - /postcss-load-config@4.0.1(postcss@8.4.23): + /postcss-load-config@4.0.1(postcss@8.4.24): resolution: {integrity: sha512-vEJIc8RdiBRu3oRAI0ymerOn+7rPuMvRXslTvZUKZonDHFIczxztIyJ1urxM1x9JXEikvpWWTUUqal5j/8QgvA==} engines: {node: '>= 14'} peerDependencies: @@ -12465,17 +13138,17 @@ packages: optional: true dependencies: lilconfig: 2.1.0 - postcss: 8.4.23 + postcss: 8.4.24 yaml: 2.2.2 dev: false - /postcss-nested@6.0.1(postcss@8.4.23): + /postcss-nested@6.0.1(postcss@8.4.24): resolution: {integrity: sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==} engines: {node: '>=12.0'} peerDependencies: postcss: ^8.2.14 dependencies: - postcss: 8.4.23 + postcss: 8.4.24 postcss-selector-parser: 6.0.13 dev: false @@ -12499,6 +13172,14 @@ packages: picocolors: 1.0.0 source-map-js: 1.0.2 + /postcss@8.4.24: + resolution: {integrity: sha512-M0RzbcI0sO/XJNucsGjvWU9ERWxb/ytp1w6dKtxTKgixdtQDq4rmx/g8W1hnaheq9jgwL/oyEdH5Bc4WwJKMqg==} + engines: {node: ^10 || ^12 || >=14} + dependencies: + nanoid: 3.3.6 + picocolors: 1.0.0 + source-map-js: 1.0.2 + /preact@10.11.0: resolution: {integrity: sha512-Fk6+vB2kb6mSJfDgODq0YDhMfl0HNtK5+Uc9QqECO4nlyPAQwCI+BKyWO//idA7ikV7o+0Fm6LQmNuQi1wXI1w==} dev: true @@ -12624,11 +13305,6 @@ packages: once: 1.4.0 dev: true - /punycode@2.1.1: - resolution: {integrity: sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==} - engines: {node: '>=6'} - dev: true - /punycode@2.3.0: resolution: {integrity: sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==} engines: {node: '>=6'} @@ -12798,7 +13474,7 @@ packages: resolution: {integrity: sha512-/njmZ8s1wVeR6pjTZ+0nCnv8SpZNRMT2D1RLOJQESlYFDBvwpTA4KWJpZ+sBJ4+vhjILRcK7JIFdGCdxEAAitg==} engines: {node: '>= 0.10'} dependencies: - resolve: 1.22.1 + resolve: 1.22.2 dev: true /redent@3.0.0: @@ -12864,6 +13540,13 @@ packages: unicode-match-property-value-ecmascript: 2.1.0 dev: true + /regjsparser@0.10.0: + resolution: {integrity: sha512-qx+xQGZVsy55CH0a1hiVwHmqjLryfh7wQyF5HO07XJ9f7dQMY/gPQHhlyDkIzJKC+x2fUCpCcUODUUUFrm7SHA==} + hasBin: true + dependencies: + jsesc: 0.5.0 + dev: true + /regjsparser@0.9.1: resolution: {integrity: sha512-dQUtn90WanSNl+7mQKcXAgZxvUe7Z0SqXlgzv0za4LwiUhyzBC58yQO3liFoUgu8GiJVInAhJjkj1N0EtQ5nkQ==} hasBin: true @@ -13019,7 +13702,7 @@ packages: /resolve@1.19.0: resolution: {integrity: sha512-rArEXAgsBG4UgRGcynxWIWKFvh/XZCcS8UJdHhwy91zwAvCZIbcs+vAbflgBnNjYMs/i/i+/Ux6IZhML1yPvxg==} dependencies: - is-core-module: 2.10.0 + is-core-module: 2.12.1 path-parse: 1.0.7 dev: true @@ -13143,6 +13826,14 @@ packages: fsevents: 2.3.2 dev: true + /rollup@3.26.0: + resolution: {integrity: sha512-YzJH0eunH2hr3knvF3i6IkLO/jTjAEwU4HoMUbQl4//Tnl3ou0e7P5SjxdDr8HQJdeUJShlbEHXrrnEHy1l7Yg==} + engines: {node: '>=14.18.0', npm: '>=8.0.0'} + hasBin: true + optionalDependencies: + fsevents: 2.3.2 + dev: true + /rrweb-cssom@0.6.0: resolution: {integrity: sha512-APM0Gt1KoXBz0iIkkdB/kfvGOwC4UuJFeG/c+yV7wSc7q96cG/kJ0HiYCnzivD9SB53cLV1MlHFNfOuPaadYSw==} dev: true @@ -13232,9 +13923,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: @@ -13287,8 +13978,8 @@ packages: lru-cache: 6.0.0 dev: true - /semver@7.5.0: - resolution: {integrity: sha512-+XC0AD/R7Q2mPSRuy2Id0+CGTZ98+8f+KvwirxOKIEyid+XSx6HbC63p+O4IndTHuX5Z+JxQ0TghCkO5Cg/2HA==} + /semver@7.5.3: + resolution: {integrity: sha512-QBlUtyVk/5EeHbi7X0fw6liDZc7BBmEaSYn01fMU1OUYbf6GPsbTtd8WmnqbI20SeycoHSeiybkE/q1Q+qlThQ==} engines: {node: '>=10'} hasBin: true dependencies: @@ -13415,8 +14106,8 @@ packages: vscode-textmate: 8.0.0 dev: true - /shiki@0.14.2: - resolution: {integrity: sha512-ltSZlSLOuSY0M0Y75KA+ieRaZ0Trf5Wl3gutE7jzLuIcWxLp5i/uEnLoQWNvgKXQ5OMpGkJnVMRLAuzjc0LJ2A==} + /shiki@0.14.3: + resolution: {integrity: sha512-U3S/a+b0KS+UkTyMjoNojvTgrBHjgp7L6ovhFVZsXmBGnVdQ4K4U9oK0z63w538S91ATngv1vXigHCSWOwnr+g==} dependencies: ansi-sequence-parser: 1.1.0 jsonc-parser: 3.2.0 @@ -13429,7 +14120,7 @@ packages: dependencies: call-bind: 1.0.2 get-intrinsic: 1.2.0 - object-inspect: 1.12.2 + object-inspect: 1.12.3 dev: true /siginfo@2.0.0: @@ -13966,11 +14657,11 @@ packages: normalize-path: 3.0.0 object-hash: 3.0.0 picocolors: 1.0.0 - postcss: 8.4.23 - postcss-import: 15.1.0(postcss@8.4.23) - postcss-js: 4.0.1(postcss@8.4.23) - postcss-load-config: 4.0.1(postcss@8.4.23) - postcss-nested: 6.0.1(postcss@8.4.23) + postcss: 8.4.24 + postcss-import: 15.1.0(postcss@8.4.24) + postcss-js: 4.0.1(postcss@8.4.24) + postcss-load-config: 4.0.1(postcss@8.4.24) + postcss-nested: 6.0.1(postcss@8.4.24) postcss-selector-parser: 6.0.13 postcss-value-parser: 4.2.0 resolve: 1.22.2 @@ -14103,13 +14794,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==} @@ -14148,6 +14837,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: @@ -14210,7 +14906,7 @@ packages: engines: {node: '>=0.8'} dependencies: psl: 1.9.0 - punycode: 2.1.1 + punycode: 2.3.0 dev: true /tough-cookie@4.1.2: @@ -14218,7 +14914,7 @@ packages: engines: {node: '>=6'} dependencies: psl: 1.9.0 - punycode: 2.1.1 + punycode: 2.3.0 universalify: 0.2.0 url-parse: 1.5.10 dev: true @@ -14270,6 +14966,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'} @@ -14418,6 +15121,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: @@ -14558,6 +15269,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 @@ -14580,8 +15297,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 @@ -14603,35 +15320,71 @@ packages: engines: {node: '>= 10.0.0'} dev: true - /unocss@0.53.3(postcss@8.4.23)(rollup@2.79.1)(vite@4.3.3): - resolution: {integrity: sha512-kZx3GFOczE7uS2zUecmvW1kM0MTPdVtQIMcXC5XYoPfr2Ho6G1p75eGAXmaL7jaompSo+WHsK4HrSC756nbfgg==} + /unocss@0.53.0(postcss@8.4.24)(rollup@2.79.1)(vite@4.3.3): + resolution: {integrity: sha512-kY4h5ERiDYlSnL2X+hbDfh+uaF7QNouy7j51GOTUr3Q0aaWehaNd05b15SjHrab559dEC0mYfrSEdh/DnCK1cw==} engines: {node: '>=14'} peerDependencies: - '@unocss/webpack': 0.53.3 + '@unocss/webpack': 0.53.0 peerDependenciesMeta: '@unocss/webpack': optional: true dependencies: - '@unocss/astro': 0.53.3(rollup@2.79.1)(vite@4.3.3) - '@unocss/cli': 0.53.3(rollup@2.79.1) - '@unocss/core': 0.53.3 - '@unocss/extractor-arbitrary-variants': 0.53.3 - '@unocss/postcss': 0.53.3(postcss@8.4.23) - '@unocss/preset-attributify': 0.53.3 - '@unocss/preset-icons': 0.53.3 - '@unocss/preset-mini': 0.53.3 - '@unocss/preset-tagify': 0.53.3 - '@unocss/preset-typography': 0.53.3 - '@unocss/preset-uno': 0.53.3 - '@unocss/preset-web-fonts': 0.53.3 - '@unocss/preset-wind': 0.53.3 - '@unocss/reset': 0.53.3 - '@unocss/transformer-attributify-jsx': 0.53.3 - '@unocss/transformer-attributify-jsx-babel': 0.53.3 - '@unocss/transformer-compile-class': 0.53.3 - '@unocss/transformer-directives': 0.53.3 - '@unocss/transformer-variant-group': 0.53.3 - '@unocss/vite': 0.53.3(rollup@2.79.1)(vite@4.3.3) + '@unocss/astro': 0.53.0(rollup@2.79.1)(vite@4.3.3) + '@unocss/cli': 0.53.0(rollup@2.79.1) + '@unocss/core': 0.53.0 + '@unocss/extractor-arbitrary-variants': 0.53.0 + '@unocss/postcss': 0.53.0(postcss@8.4.24) + '@unocss/preset-attributify': 0.53.0 + '@unocss/preset-icons': 0.53.0 + '@unocss/preset-mini': 0.53.0 + '@unocss/preset-tagify': 0.53.0 + '@unocss/preset-typography': 0.53.0 + '@unocss/preset-uno': 0.53.0 + '@unocss/preset-web-fonts': 0.53.0 + '@unocss/preset-wind': 0.53.0 + '@unocss/reset': 0.53.0 + '@unocss/transformer-attributify-jsx': 0.53.0 + '@unocss/transformer-attributify-jsx-babel': 0.53.0 + '@unocss/transformer-compile-class': 0.53.0 + '@unocss/transformer-directives': 0.53.0 + '@unocss/transformer-variant-group': 0.53.0 + '@unocss/vite': 0.53.0(rollup@2.79.1)(vite@4.3.3) + transitivePeerDependencies: + - postcss + - rollup + - supports-color + - vite + dev: true + + /unocss@0.53.0(postcss@8.4.24)(rollup@2.79.1)(vite@4.3.9): + resolution: {integrity: sha512-kY4h5ERiDYlSnL2X+hbDfh+uaF7QNouy7j51GOTUr3Q0aaWehaNd05b15SjHrab559dEC0mYfrSEdh/DnCK1cw==} + engines: {node: '>=14'} + peerDependencies: + '@unocss/webpack': 0.53.0 + peerDependenciesMeta: + '@unocss/webpack': + optional: true + dependencies: + '@unocss/astro': 0.53.0(rollup@2.79.1)(vite@4.3.9) + '@unocss/cli': 0.53.0(rollup@2.79.1) + '@unocss/core': 0.53.0 + '@unocss/extractor-arbitrary-variants': 0.53.0 + '@unocss/postcss': 0.53.0(postcss@8.4.24) + '@unocss/preset-attributify': 0.53.0 + '@unocss/preset-icons': 0.53.0 + '@unocss/preset-mini': 0.53.0 + '@unocss/preset-tagify': 0.53.0 + '@unocss/preset-typography': 0.53.0 + '@unocss/preset-uno': 0.53.0 + '@unocss/preset-web-fonts': 0.53.0 + '@unocss/preset-wind': 0.53.0 + '@unocss/reset': 0.53.0 + '@unocss/transformer-attributify-jsx': 0.53.0 + '@unocss/transformer-attributify-jsx-babel': 0.53.0 + '@unocss/transformer-compile-class': 0.53.0 + '@unocss/transformer-directives': 0.53.0 + '@unocss/transformer-variant-group': 0.53.0 + '@unocss/vite': 0.53.0(rollup@2.79.1)(vite@4.3.9) transitivePeerDependencies: - postcss - rollup @@ -14673,6 +15426,35 @@ packages: - supports-color dev: true + /unplugin-vue-components@0.25.1(rollup@2.79.1)(vue@3.3.4): + resolution: {integrity: sha512-kzS2ZHVMaGU2XEO2keYQcMjNZkanDSGDdY96uQT9EPe+wqSZwwgbFfKVJ5ti0+8rGAcKHColwKUvctBhq2LJ3A==} + engines: {node: '>=14'} + peerDependencies: + '@babel/parser': ^7.15.8 + '@nuxt/kit': ^3.2.2 + vue: 2 || 3 + peerDependenciesMeta: + '@babel/parser': + optional: true + '@nuxt/kit': + optional: true + dependencies: + '@antfu/utils': 0.7.4 + '@rollup/pluginutils': 5.0.2(rollup@2.79.1) + chokidar: 3.5.3 + debug: 4.3.4 + fast-glob: 3.2.12 + local-pkg: 0.4.3 + magic-string: 0.30.0 + minimatch: 9.0.1 + resolve: 1.22.2 + unplugin: 1.3.1 + vue: 3.3.4 + transitivePeerDependencies: + - rollup + - supports-color + dev: true + /unplugin@1.3.1: resolution: {integrity: sha512-h4uUTIvFBQRxUKS2Wjys6ivoeofGhxzTe2sRWlooyjHXVttcVfV/JiavNd3d4+jty0SVV0dxGw9AkY9MwiaCEw==} dependencies: @@ -14754,8 +15536,8 @@ packages: resolution: {integrity: sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==} dev: true - /v8-to-istanbul@9.0.1: - resolution: {integrity: sha512-74Y4LqY74kLE6IFyIjPtkSTWzUZmj8tdHT9Ii/26dvQ6K9Dl2NbEfj0XgU2sHCtKgt5VupqhlO/5aWuqS+IY1w==} + /v8-to-istanbul@9.1.0: + resolution: {integrity: sha512-6z3GW9x8G1gd+JIIgQQQxXuiJtCXeAjp6RaPEPLv62mH3iPHPxV6W3robxtCzNErRo6ZwTmzWhsbNvjyEBKzKA==} engines: {node: '>=10.12.0'} dependencies: '@jridgewell/trace-mapping': 0.3.17 @@ -14835,8 +15617,8 @@ packages: - supports-color dev: true - /vite-plugin-pwa@0.16.4(vite@4.3.3)(workbox-build@7.0.0)(workbox-window@6.5.4): - resolution: {integrity: sha512-lmwHFIs9zI2H9bXJld/zVTbCqCQHZ9WrpyDMqosICDV0FVnCJwniX1NMDB79HGTIZzOQkY4gSZaVTJTw6maz/Q==} + /vite-plugin-pwa@0.16.0(vite@4.3.3)(workbox-build@7.0.0)(workbox-window@7.0.0): + resolution: {integrity: sha512-E+AQRzHxqNU4ZhEeR8X37/foZB+ezJEhXauE/mcf1UITY6k2Pa1dtlFl+BQu57fTdiVlWim5S0Qy44Yap93Dkg==} engines: {node: '>=16.0.0'} peerDependencies: vite: ^3.1.0 || ^4.0.0 @@ -14848,7 +15630,25 @@ packages: pretty-bytes: 6.1.0 vite: 4.3.3 workbox-build: 7.0.0 - workbox-window: 6.5.4 + workbox-window: 7.0.0 + transitivePeerDependencies: + - supports-color + dev: true + + /vite-plugin-pwa@0.16.0(vite@4.3.9)(workbox-build@7.0.0)(workbox-window@6.6.1): + resolution: {integrity: sha512-E+AQRzHxqNU4ZhEeR8X37/foZB+ezJEhXauE/mcf1UITY6k2Pa1dtlFl+BQu57fTdiVlWim5S0Qy44Yap93Dkg==} + engines: {node: '>=16.0.0'} + peerDependencies: + vite: ^3.1.0 || ^4.0.0 + workbox-build: ^7.0.0 + workbox-window: ^7.0.0 + dependencies: + debug: 4.3.4 + fast-glob: 3.2.12 + pretty-bytes: 6.1.0 + vite: 4.3.9 + workbox-build: 7.0.0 + workbox-window: 6.6.1 transitivePeerDependencies: - supports-color dev: true @@ -14910,9 +15710,10 @@ packages: terser: optional: true dependencies: + '@types/node': 18.16.0 esbuild: 0.17.18 - postcss: 8.4.23 - rollup: 3.21.0 + postcss: 8.4.24 + rollup: 3.26.0 optionalDependencies: fsevents: 2.3.2 dev: true @@ -14943,8 +15744,8 @@ packages: optional: true dependencies: esbuild: 0.17.18 - postcss: 8.4.23 - rollup: 3.21.0 + postcss: 8.4.24 + rollup: 3.26.0 optionalDependencies: fsevents: 2.3.2 dev: true @@ -14982,6 +15783,41 @@ packages: fsevents: 2.3.2 dev: true + /vite@4.4.0-beta.3: + resolution: {integrity: sha512-IC/thYTvArOFRJ4qvvudnu4KKZOVc+gduS3I9OfC5SbP/Rf4kkP7z6Of2QpKeOSVqwIK24khW6VOUmVD/0yzSQ==} + engines: {node: ^14.18.0 || >=16.0.0} + hasBin: true + peerDependencies: + '@types/node': '>= 14' + less: '*' + lightningcss: ^1.21.0 + sass: '*' + stylus: '*' + sugarss: '*' + terser: ^5.4.0 + peerDependenciesMeta: + '@types/node': + optional: true + less: + optional: true + lightningcss: + optional: true + sass: + optional: true + stylus: + optional: true + sugarss: + optional: true + terser: + optional: true + dependencies: + esbuild: 0.18.11 + postcss: 8.4.24 + rollup: 3.26.0 + optionalDependencies: + fsevents: 2.3.2 + dev: true + /vitepress-plugin-search@1.0.4-alpha.20(flexsearch@0.7.31)(vitepress@1.0.0-alpha.72)(vue@3.3.4): resolution: {integrity: sha512-zG+ev9pw1Mg7htABlFCNXb8XwnKN+qfTKw+vU0Ers6RIrABx+45EAAFBoaL1mEpl1FRFn1o/dQ7F4b8GP6HdGQ==} engines: {node: ^14.13.1 || ^16.7.0 || >=18} @@ -15036,13 +15872,13 @@ packages: '@docsearch/js': 3.5.1(@algolia/client-search@4.14.2)(search-insights@2.6.0) '@vitejs/plugin-vue': 4.2.3(vite@4.3.9)(vue@3.3.4) '@vue/devtools-api': 6.5.0 - '@vueuse/core': 10.1.2(vue@3.3.4) - '@vueuse/integrations': 10.1.2(focus-trap@7.4.3)(vue@3.3.4) + '@vueuse/core': 10.2.1(vue@3.3.4) + '@vueuse/integrations': 10.2.1(focus-trap@7.4.3)(vue@3.3.4) body-scroll-lock: 4.0.0-beta.0 focus-trap: 7.4.3 mark.js: 8.11.1 minisearch: 6.1.0 - shiki: 0.14.2 + shiki: 0.14.3 vite: 4.3.9 vue: 3.3.4 transitivePeerDependencies: @@ -15071,7 +15907,51 @@ packages: - universal-cookie dev: true - /vitest@0.32.2(@vitest/ui@0.32.2)(jsdom@21.1.1): + /vitepress@1.0.0-beta.5(@algolia/client-search@4.14.2)(search-insights@2.6.0): + resolution: {integrity: sha512-/RjqqRsSEKkzF6HhK5e5Ij+bZ7ETb9jNCRRgIMm10gJ+ZLC3D1OqkE465lEqCeJUgt2HZ6jmWjDqIBfrJSpv7w==} + hasBin: true + dependencies: + '@docsearch/css': 3.5.1 + '@docsearch/js': 3.5.1(@algolia/client-search@4.14.2)(search-insights@2.6.0) + '@vitejs/plugin-vue': 4.2.3(vite@4.4.0-beta.3)(vue@3.3.4) + '@vue/devtools-api': 6.5.0 + '@vueuse/core': 10.2.1(vue@3.3.4) + '@vueuse/integrations': 10.2.1(focus-trap@7.4.3)(vue@3.3.4) + body-scroll-lock: 4.0.0-beta.0 + focus-trap: 7.4.3 + mark.js: 8.11.1 + minisearch: 6.1.0 + shiki: 0.14.3 + vite: 4.4.0-beta.3 + vue: 3.3.4 + transitivePeerDependencies: + - '@algolia/client-search' + - '@types/node' + - '@types/react' + - '@vue/composition-api' + - async-validator + - axios + - change-case + - drauu + - fuse.js + - idb-keyval + - jwt-decode + - less + - lightningcss + - nprogress + - qrcode + - react + - react-dom + - sass + - search-insights + - sortablejs + - stylus + - sugarss + - terser + - universal-cookie + dev: true + + /vitest@0.32.2(@vitest/ui@0.32.2)(jsdom@22.0.0): resolution: {integrity: sha512-hU8GNNuQfwuQmqTLfiKcqEhZY72Zxb7nnN07koCUNmntNxbKQnVbeIS6sqUgR3eXSlbOpit8+/gr1KpqoMgWCQ==} engines: {node: '>=v14.18.0'} hasBin: true @@ -15117,10 +15997,10 @@ packages: chai: 4.3.7 concordance: 5.0.4 debug: 4.3.4 - jsdom: 21.1.1 + jsdom: 22.0.0 local-pkg: 0.4.3 magic-string: 0.30.0 - pathe: 1.1.0 + pathe: 1.1.1 picocolors: 1.0.0 std-env: 3.3.2 strip-literal: 1.0.1 @@ -15195,8 +16075,23 @@ packages: vue: 3.2.47 dev: false - /vue-demi@0.14.0(vue@3.3.4): - resolution: {integrity: sha512-gt58r2ogsNQeVoQ3EhoUAvUsH9xviydl0dWJj7dabBC/2L4uBId7ujtCwDRD0JhkGsV1i0CtfLAeyYKBht9oWg==} + /vue-demi@0.14.5(vue@3.2.47): + resolution: {integrity: sha512-o9NUVpl/YlsGJ7t+xuqJKx8EBGf1quRhCiT6D/J0pfwmk9zUwYkC7yrF4SZCe6fETvSM3UNL2edcbYrSyc4QHA==} + engines: {node: '>=12'} + hasBin: true + requiresBuild: true + peerDependencies: + '@vue/composition-api': ^1.0.0-rc.1 + vue: ^3.0.0-0 || ^2.6.0 + peerDependenciesMeta: + '@vue/composition-api': + optional: true + dependencies: + vue: 3.2.47 + dev: false + + /vue-demi@0.14.5(vue@3.3.4): + resolution: {integrity: sha512-o9NUVpl/YlsGJ7t+xuqJKx8EBGf1quRhCiT6D/J0pfwmk9zUwYkC7yrF4SZCe6fETvSM3UNL2edcbYrSyc4QHA==} engines: {node: '>=12'} hasBin: true requiresBuild: true @@ -15208,7 +16103,6 @@ packages: optional: true dependencies: vue: 3.3.4 - dev: true /vue@3.2.47: resolution: {integrity: sha512-60188y/9Dc9WVrAZeUVSDxRQOZ+z+y5nO2ts9jWXSTkMvayiWxCWOWtBQoYjLeccfXkiiPZWAHcV+WTPhkqJHQ==} @@ -15685,7 +16579,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 @@ -15693,7 +16587,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 @@ -15733,8 +16627,9 @@ packages: workbox-core: 7.0.0 dev: true - /workbox-core@6.5.4: - resolution: {integrity: sha512-OXYb+m9wZm8GrORlV2vBbE5EC1FKu71GGp0H4rjmxmF4/HLbMCoTFws87M3dFwgpmg0v00K++PImpNQ6J5NQ6Q==} + /workbox-core@6.6.1: + resolution: {integrity: sha512-ZrGBXjjaJLqzVothoE12qTbVnOAjFrHDXpZe7coCb6q65qI/59rDLwuFMO4PcZ7jcbxY+0+NhUVztzR/CbjEFw==} + deprecated: this package has been deprecated dev: true /workbox-core@7.0.0: @@ -15811,11 +16706,12 @@ packages: resolution: {integrity: sha512-SWfEouQfjRiZ7GNABzHUKUyj8pCoe+RwjfOIajcx6J5mtgKkN+t8UToHnpaJL5UVVOf5YhJh+OHhbVNIHe+LVA==} dev: true - /workbox-window@6.5.4: - resolution: {integrity: sha512-HnLZJDwYBE+hpG25AQBO8RUWBJRaCsI9ksQJEp3aCOFCaG5kqaToAYXFRAHxzRluM2cQbGzdQF5rjKPWPA1fug==} + /workbox-window@6.6.1: + resolution: {integrity: sha512-wil4nwOY58nTdCvif/KEZjQ2NP8uk3gGeRNy2jPBbzypU4BT4D9L8xiwbmDBpZlSgJd2xsT9FvSNU0gsxV51JQ==} + deprecated: this package has been deprecated dependencies: '@types/trusted-types': 2.0.2 - workbox-core: 6.5.4 + workbox-core: 6.6.1 dev: true /workbox-window@7.0.0: @@ -15934,6 +16830,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 diff --git a/run b/run index 6afe76eee..cc169e209 100755 --- a/run +++ b/run @@ -1,40 +1,93 @@ #!/bin/bash RUN="docker-compose run --rm" + +ansi() { echo -e "\e[${1}m${*:2}\e[0m"; } +bold() { ansi 1 "$@"; } +# italic() { ansi 3 "$@"; } +underline() { ansi 4 "$@"; } +# strikethrough() { ansi 9 "$@"; } +# red() { ansi 31 "$@"; } + +name=$(basename $0) command=$1 args=${@:2} case $command in sh) -$RUN mermaid sh $args +$RUN mermaid sh -c "npx $args" ;; -install) -$RUN mermaid sh -c "npx pnpm install" +pnpm) +$RUN mermaid sh -c "npx pnpm $args" ;; -test) -$RUN mermaid sh -c "npx pnpm test" +dev) +$RUN --service-ports mermaid sh -c "npx pnpm run dev" ;; -lint) -$RUN mermaid sh -c "npx pnpm -w run lint:fix" +docs:dev) +$RUN --service-ports mermaid sh -c "npx pnpm run --filter mermaid docs:dev:docker" +;; + +cypress) +$RUN cypress $args ;; help) + +# Alignment of help message must be as it is, it will be nice looking when printed +usage=$( cat <