From 5f3c4fccafc72697e37e366c324ceca02ebc685d Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Mon, 14 Aug 2023 07:34:16 +0530 Subject: [PATCH 001/266] chore: Add tiny bundle Excludes elk and mindmap at build time --- .esbuild/build.ts | 23 ++++++++++++++++++- .esbuild/util.ts | 12 +++++++--- .../src/diagrams/error/errorDiagram.ts | 2 +- .../src/diagrams/flowchart/elk/detector.ts | 4 +++- .../mermaid/src/diagrams/mindmap/detector.ts | 4 +++- packages/mermaid/src/types.d.ts | 1 + 6 files changed, 39 insertions(+), 7 deletions(-) create mode 100644 packages/mermaid/src/types.d.ts diff --git a/.esbuild/build.ts b/.esbuild/build.ts index bee13af51..39ac2978a 100644 --- a/.esbuild/build.ts +++ b/.esbuild/build.ts @@ -6,7 +6,9 @@ import { packageOptions } from '../.build/common.js'; const shouldVisualize = process.argv.includes('--visualize'); const buildPackage = async (entryName: keyof typeof packageOptions) => { + // package.mjs await build(getBuildConfig({ entryName, minify: false })); + // package.min.mjs const { metafile } = await build( getBuildConfig({ entryName, minify: true, metafile: shouldVisualize }) ); @@ -14,8 +16,27 @@ const buildPackage = async (entryName: keyof typeof packageOptions) => { // Upload metafile into https://esbuild.github.io/analyze/ await writeFile(`stats/meta-${entryName}.json`, JSON.stringify(metafile)); } + // package.core.mjs await build(getBuildConfig({ entryName, minify: false, core: true })); - await build(getBuildConfig({ entryName, minify: true, format: 'iife' })); + if (entryName === 'mermaid') { + // mermaid.js + await build(getBuildConfig({ entryName, minify: false, format: 'iife' })); + // mermaid.min.js + await build(getBuildConfig({ entryName, minify: true, format: 'iife' })); + // mermaid.tiny.min.js + const { metafile } = await build( + getBuildConfig({ + entryName, + minify: true, + includeLargeDiagrams: false, + metafile: shouldVisualize, + format: 'iife', + }) + ); + if (metafile) { + await writeFile(`stats/meta-${entryName}-tiny.json`, JSON.stringify(metafile)); + } + } }; const handler = (e) => { diff --git a/.esbuild/util.ts b/.esbuild/util.ts index 249045652..12ccc5807 100644 --- a/.esbuild/util.ts +++ b/.esbuild/util.ts @@ -14,6 +14,7 @@ interface MermaidBuildOptions { metafile?: boolean; format?: 'esm' | 'iife'; entryName: keyof typeof packageOptions; + includeLargeDiagrams?: boolean; } const buildOptions = (override: BuildOptions): BuildOptions => { @@ -37,7 +38,8 @@ export const getBuildConfig = ({ core, entryName, metafile, - format, + format = 'esm', + includeLargeDiagrams = true, }: MermaidBuildOptions): BuildOptions => { const external: string[] = ['require', 'fs', 'path']; const { name, file, packageName } = packageOptions[entryName]; @@ -45,11 +47,15 @@ export const getBuildConfig = ({ absWorkingDir: resolve(__dirname, `../packages/${packageName}`), entryPoints: { [`${name}${core ? '.core' : format === 'iife' ? '' : '.esm'}${ - minify ? '.min' : '' - }`]: `src/${file}`, + includeLargeDiagrams ? '' : '.tiny' + }${minify ? '.min' : ''}`]: `src/${file}`, }, metafile, logLevel: 'info', + define: { + // This needs to be stringified for esbuild + includeLargeDiagrams: `${includeLargeDiagrams}`, + }, }); if (core) { diff --git a/packages/mermaid/src/diagrams/error/errorDiagram.ts b/packages/mermaid/src/diagrams/error/errorDiagram.ts index 284dfd744..5b172db2e 100644 --- a/packages/mermaid/src/diagrams/error/errorDiagram.ts +++ b/packages/mermaid/src/diagrams/error/errorDiagram.ts @@ -1,7 +1,7 @@ import type { DiagramDefinition } from '../../diagram-api/types.js'; import { renderer } from './errorRenderer.js'; -const diagram: DiagramDefinition = { +export const diagram: DiagramDefinition = { db: {}, renderer, parser: { diff --git a/packages/mermaid/src/diagrams/flowchart/elk/detector.ts b/packages/mermaid/src/diagrams/flowchart/elk/detector.ts index 6cfcf2619..252455e1c 100644 --- a/packages/mermaid/src/diagrams/flowchart/elk/detector.ts +++ b/packages/mermaid/src/diagrams/flowchart/elk/detector.ts @@ -19,7 +19,9 @@ const detector: DiagramDetector = (txt, config): boolean => { }; const loader: DiagramLoader = async () => { - const { diagram } = await import('./flowchart-elk-definition.js'); + const { diagram } = includeLargeDiagrams + ? await import('./flowchart-elk-definition.js') + : await import('../../error/errorDiagram.js'); return { id, diagram }; }; diff --git a/packages/mermaid/src/diagrams/mindmap/detector.ts b/packages/mermaid/src/diagrams/mindmap/detector.ts index 2b31fc5e8..0021b5308 100644 --- a/packages/mermaid/src/diagrams/mindmap/detector.ts +++ b/packages/mermaid/src/diagrams/mindmap/detector.ts @@ -10,7 +10,9 @@ const detector: DiagramDetector = (txt) => { }; const loader: DiagramLoader = async () => { - const { diagram } = await import('./mindmap-definition.js'); + const { diagram } = includeLargeDiagrams + ? await import('./mindmap-definition.js') + : await import('../error/errorDiagram.js'); return { id, diagram }; }; diff --git a/packages/mermaid/src/types.d.ts b/packages/mermaid/src/types.d.ts new file mode 100644 index 000000000..4f52a09df --- /dev/null +++ b/packages/mermaid/src/types.d.ts @@ -0,0 +1 @@ +declare let includeLargeDiagrams: boolean; From a1541aa6f5cd9a290db402bd44bfa700cc245658 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Mon, 14 Aug 2023 08:14:43 +0530 Subject: [PATCH 002/266] chore: Split chunks into folders --- .esbuild/build.ts | 61 +++++++++++++++++++++++++---------------------- .esbuild/util.ts | 53 +++++++++++++++++++++++++++------------- 2 files changed, 70 insertions(+), 44 deletions(-) diff --git a/.esbuild/build.ts b/.esbuild/build.ts index 39ac2978a..2b8734ad8 100644 --- a/.esbuild/build.ts +++ b/.esbuild/build.ts @@ -1,40 +1,47 @@ import { build } from 'esbuild'; import { mkdir, writeFile } from 'node:fs/promises'; -import { getBuildConfig } from './util.js'; +import { MermaidBuildOptions, defaultConfig, getBuildConfig } from './util.js'; import { packageOptions } from '../.build/common.js'; const shouldVisualize = process.argv.includes('--visualize'); const buildPackage = async (entryName: keyof typeof packageOptions) => { - // package.mjs - await build(getBuildConfig({ entryName, minify: false })); - // package.min.mjs - const { metafile } = await build( - getBuildConfig({ entryName, minify: true, metafile: shouldVisualize }) - ); - if (metafile) { - // Upload metafile into https://esbuild.github.io/analyze/ - await writeFile(`stats/meta-${entryName}.json`, JSON.stringify(metafile)); - } - // package.core.mjs - await build(getBuildConfig({ entryName, minify: false, core: true })); + const commonConfig = { ...defaultConfig, entryName }; + const configs = [ + { ...commonConfig }, + { + ...commonConfig, + minify: true, + metafile: shouldVisualize, + }, + { ...commonConfig, core: true }, + ]; + if (entryName === 'mermaid') { - // mermaid.js - await build(getBuildConfig({ entryName, minify: false, format: 'iife' })); - // mermaid.min.js - await build(getBuildConfig({ entryName, minify: true, format: 'iife' })); - // mermaid.tiny.min.js - const { metafile } = await build( - getBuildConfig({ - entryName, + const iifeConfig: MermaidBuildOptions = { ...commonConfig, format: 'iife' }; + configs.push( + { ...iifeConfig }, + { ...iifeConfig, minify: true }, + { + ...iifeConfig, minify: true, includeLargeDiagrams: false, metafile: shouldVisualize, - format: 'iife', - }) + } ); - if (metafile) { - await writeFile(`stats/meta-${entryName}-tiny.json`, JSON.stringify(metafile)); + } + + const results = await Promise.all(configs.map((config) => build(getBuildConfig(config)))); + + if (shouldVisualize) { + for (const { metafile } of results) { + if (!metafile) { + continue; + } + const fileName = Object.keys(metafile.outputs) + .filter((key) => key.includes('.min') && key.endsWith('js'))[0] + .replace('dist/', ''); + await writeFile(`stats/${fileName}.meta.json`, JSON.stringify(metafile)); } } }; @@ -47,9 +54,7 @@ const handler = (e) => { const main = async () => { await mkdir('stats').catch(() => {}); const packageNames = Object.keys(packageOptions) as (keyof typeof packageOptions)[]; - for (const pkg of packageNames) { - await buildPackage(pkg).catch(handler); - } + await Promise.allSettled(packageNames.map((pkg) => buildPackage(pkg).catch(handler))); }; void main(); diff --git a/.esbuild/util.ts b/.esbuild/util.ts index 12ccc5807..f80368a06 100644 --- a/.esbuild/util.ts +++ b/.esbuild/util.ts @@ -8,15 +8,23 @@ import { jisonPlugin } from './jisonPlugin.js'; const __dirname = fileURLToPath(new URL('.', import.meta.url)); -interface MermaidBuildOptions { +export interface MermaidBuildOptions { minify: boolean; - core?: boolean; - metafile?: boolean; - format?: 'esm' | 'iife'; + core: boolean; + metafile: boolean; + format: 'esm' | 'iife'; entryName: keyof typeof packageOptions; - includeLargeDiagrams?: boolean; + includeLargeDiagrams: boolean; } +export const defaultConfig: Omit = { + minify: false, + metafile: false, + core: false, + format: 'esm', + includeLargeDiagrams: true, +} as const; + const buildOptions = (override: BuildOptions): BuildOptions => { return { bundle: true, @@ -33,25 +41,38 @@ const buildOptions = (override: BuildOptions): BuildOptions => { }; }; -export const getBuildConfig = ({ - minify, - core, - entryName, - metafile, - format = 'esm', - includeLargeDiagrams = true, -}: MermaidBuildOptions): BuildOptions => { +const getFileName = ( + fileName: string, + { core, format, includeLargeDiagrams, minify, entryName }: MermaidBuildOptions +) => { + if (core) { + fileName += '.core'; + } + if (format === 'esm') { + fileName += '.esm'; + } + if (!includeLargeDiagrams) { + fileName += '.tiny'; + } + if (minify) { + fileName += '.min'; + } + return fileName; +}; + +export const getBuildConfig = (options: MermaidBuildOptions): BuildOptions => { + const { core, entryName, metafile, format, includeLargeDiagrams } = options; const external: string[] = ['require', 'fs', 'path']; const { name, file, packageName } = packageOptions[entryName]; + const outFileName = getFileName(name, options); let output: BuildOptions = buildOptions({ absWorkingDir: resolve(__dirname, `../packages/${packageName}`), entryPoints: { - [`${name}${core ? '.core' : format === 'iife' ? '' : '.esm'}${ - includeLargeDiagrams ? '' : '.tiny' - }${minify ? '.min' : ''}`]: `src/${file}`, + [outFileName]: `src/${file}`, }, metafile, logLevel: 'info', + chunkNames: `chunks/${outFileName}/[name]-[hash]`, define: { // This needs to be stringified for esbuild includeLargeDiagrams: `${includeLargeDiagrams}`, From 13a6f04945adb7bcb5825549e4c30ce02d9bde27 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Mon, 14 Aug 2023 09:05:56 +0530 Subject: [PATCH 003/266] chore: Add vite support for define --- .vite/build.ts | 4 ++++ packages/mermaid/src/types.d.ts | 2 +- vite.config.ts | 4 ++++ 3 files changed, 9 insertions(+), 1 deletion(-) diff --git a/.vite/build.ts b/.vite/build.ts index a03bdeec2..b3e5efb45 100644 --- a/.vite/build.ts +++ b/.vite/build.ts @@ -89,6 +89,10 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions) }), ...visualizerOptions(packageName, core), ], + define: { + // Needs to be string + includeLargeDiagrams: 'true', + }, }; if (watch && config.build) { diff --git a/packages/mermaid/src/types.d.ts b/packages/mermaid/src/types.d.ts index 4f52a09df..2a0cf2d78 100644 --- a/packages/mermaid/src/types.d.ts +++ b/packages/mermaid/src/types.d.ts @@ -1 +1 @@ -declare let includeLargeDiagrams: boolean; +declare const includeLargeDiagrams: boolean; diff --git a/vite.config.ts b/vite.config.ts index 080ff981f..d99f0d3ed 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -33,4 +33,8 @@ export default defineConfig({ esmExternals: true, }, }, + define: { + // Needs to be string + includeLargeDiagrams: 'true', + }, }); From 9632049bf2ed2fcc720a50467ab0490da9315da3 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Mon, 14 Aug 2023 09:09:32 +0530 Subject: [PATCH 004/266] v11.0.0-alpha.3 --- packages/mermaid/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json index 81d89173d..2af8d6738 100644 --- a/packages/mermaid/package.json +++ b/packages/mermaid/package.json @@ -1,6 +1,6 @@ { "name": "mermaid", - "version": "11.0.0-alpha.2", + "version": "11.0.0-alpha.3", "description": "Markdown-ish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.", "type": "module", "module": "./dist/mermaid.core.mjs", From 0280316b035bec230760e79a0ce61e1fa405eaca Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Mon, 14 Aug 2023 09:55:00 +0530 Subject: [PATCH 005/266] Remove sourcemaps --- .esbuild/util.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.esbuild/util.ts b/.esbuild/util.ts index 29e16aa93..fd800510d 100644 --- a/.esbuild/util.ts +++ b/.esbuild/util.ts @@ -36,7 +36,7 @@ const buildOptions = (override: BuildOptions): BuildOptions => { external: ['require', 'fs', 'path'], outdir: 'dist', plugins: [jisonPlugin, jsonSchemaPlugin], - sourcemap: 'external', + // sourcemap: 'linked', ...override, }; }; From 91b7d4234e1dd6da1f3bc3ed99fbe58c829a7f8a Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Mon, 14 Aug 2023 14:31:07 +0530 Subject: [PATCH 006/266] chore: Highlight if tiny version is used in error and info. --- .../interfaces/mermaidAPI.ParseOptions.md | 2 +- .../interfaces/mermaidAPI.RenderResult.md | 4 ++-- docs/config/setup/modules/mermaidAPI.md | 22 +++++++++---------- packages/mermaid/src/mermaidAPI.ts | 4 +++- 4 files changed, 17 insertions(+), 15 deletions(-) diff --git a/docs/config/setup/interfaces/mermaidAPI.ParseOptions.md b/docs/config/setup/interfaces/mermaidAPI.ParseOptions.md index 8ab259885..da715e405 100644 --- a/docs/config/setup/interfaces/mermaidAPI.ParseOptions.md +++ b/docs/config/setup/interfaces/mermaidAPI.ParseOptions.md @@ -16,4 +16,4 @@ #### Defined in -[mermaidAPI.ts:77](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L77) +[mermaidAPI.ts:79](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L79) diff --git a/docs/config/setup/interfaces/mermaidAPI.RenderResult.md b/docs/config/setup/interfaces/mermaidAPI.RenderResult.md index 527b46d09..6ed33b128 100644 --- a/docs/config/setup/interfaces/mermaidAPI.RenderResult.md +++ b/docs/config/setup/interfaces/mermaidAPI.RenderResult.md @@ -39,7 +39,7 @@ bindFunctions?.(div); // To call bindFunctions only if it's present. #### Defined in -[mermaidAPI.ts:97](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L97) +[mermaidAPI.ts:99](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L99) --- @@ -51,4 +51,4 @@ The svg code for the rendered graph. #### Defined in -[mermaidAPI.ts:87](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L87) +[mermaidAPI.ts:89](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L89) diff --git a/docs/config/setup/modules/mermaidAPI.md b/docs/config/setup/modules/mermaidAPI.md index 1160a5dda..6e123a0ae 100644 --- a/docs/config/setup/modules/mermaidAPI.md +++ b/docs/config/setup/modules/mermaidAPI.md @@ -25,7 +25,7 @@ Renames and re-exports [mermaidAPI](mermaidAPI.md#mermaidapi) #### Defined in -[mermaidAPI.ts:81](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L81) +[mermaidAPI.ts:83](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L83) ## Variables @@ -96,7 +96,7 @@ mermaid.initialize(config); #### Defined in -[mermaidAPI.ts:668](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L668) +[mermaidAPI.ts:670](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L670) ## Functions @@ -127,7 +127,7 @@ Return the last node appended #### Defined in -[mermaidAPI.ts:309](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L309) +[mermaidAPI.ts:311](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L311) --- @@ -153,7 +153,7 @@ the cleaned up svgCode #### Defined in -[mermaidAPI.ts:255](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L255) +[mermaidAPI.ts:257](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L257) --- @@ -179,7 +179,7 @@ the string with all the user styles #### Defined in -[mermaidAPI.ts:184](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L184) +[mermaidAPI.ts:186](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L186) --- @@ -202,7 +202,7 @@ the string with all the user styles #### Defined in -[mermaidAPI.ts:232](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L232) +[mermaidAPI.ts:234](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L234) --- @@ -229,7 +229,7 @@ with an enclosing block that has each of the cssClasses followed by !important; #### Defined in -[mermaidAPI.ts:168](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L168) +[mermaidAPI.ts:170](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L170) --- @@ -249,7 +249,7 @@ with an enclosing block that has each of the cssClasses followed by !important; #### Defined in -[mermaidAPI.ts:154](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L154) +[mermaidAPI.ts:156](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L156) --- @@ -269,7 +269,7 @@ with an enclosing block that has each of the cssClasses followed by !important; #### Defined in -[mermaidAPI.ts:125](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L125) +[mermaidAPI.ts:127](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L127) --- @@ -295,7 +295,7 @@ Put the svgCode into an iFrame. Return the iFrame code #### Defined in -[mermaidAPI.ts:286](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L286) +[mermaidAPI.ts:288](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L288) --- @@ -320,4 +320,4 @@ Remove any existing elements from the given document #### Defined in -[mermaidAPI.ts:359](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L359) +[mermaidAPI.ts:361](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L361) diff --git a/packages/mermaid/src/mermaidAPI.ts b/packages/mermaid/src/mermaidAPI.ts index f8a36f88e..65778cf07 100644 --- a/packages/mermaid/src/mermaidAPI.ts +++ b/packages/mermaid/src/mermaidAPI.ts @@ -14,7 +14,7 @@ import { select } from 'd3'; import { compile, serialize, stringify } from 'stylis'; // @ts-ignore: TODO Fix ts errors -import { version } from '../package.json'; +import { version as packageVersion } from '../package.json'; import * as configApi from './config.js'; import { addDiagrams } from './diagram-api/diagram-orchestration.js'; import { Diagram, getDiagramFromText } from './Diagram.js'; @@ -31,6 +31,8 @@ import isEmpty from 'lodash-es/isEmpty.js'; import { setA11yDiagramInfo, addSVGa11yTitleDescription } from './accessibility.js'; import { parseDirective } from './directiveUtils.js'; +const version = packageVersion + (includeLargeDiagrams ? '' : '-tiny'); + // diagram names that support classDef statements const CLASSDEF_DIAGRAMS = [ 'graph', From 5f95a26218ba6716ceda916ace825241ad7e70e9 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Mon, 14 Aug 2023 14:31:37 +0530 Subject: [PATCH 007/266] fix: Center version text in SVG --- packages/mermaid/src/diagrams/info/infoRenderer.ts | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/packages/mermaid/src/diagrams/info/infoRenderer.ts b/packages/mermaid/src/diagrams/info/infoRenderer.ts index 25ae72fce..2d25dd3e3 100644 --- a/packages/mermaid/src/diagrams/info/infoRenderer.ts +++ b/packages/mermaid/src/diagrams/info/infoRenderer.ts @@ -1,6 +1,6 @@ import { log } from '../../logger.js'; import { configureSvgSize } from '../../setupGraphViewbox.js'; -import type { DrawDefinition, Group, SVG } from '../../diagram-api/types.js'; +import type { DrawDefinition, SVG } from '../../diagram-api/types.js'; import { selectSvgElement } from '../../rendering-util/selectSvgElement.js'; /** @@ -15,15 +15,14 @@ const draw: DrawDefinition = (text, id, version) => { const svg: SVG = selectSvgElement(id); configureSvgSize(svg, 100, 400, true); - - const group: Group = svg.append('g'); - group + svg .append('text') - .attr('x', 100) - .attr('y', 40) + .attr('x', '50%') + .attr('y', '50%') .attr('class', 'version') .attr('font-size', 32) - .style('text-anchor', 'middle') + .attr('dominant-baseline', 'middle') + .attr('text-anchor', 'middle') .text(`v${version}`); }; From 55266c4085d2ad5e99dbc78341563f2c68159921 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Wed, 16 Aug 2023 11:01:19 +0530 Subject: [PATCH 008/266] chore: Simplify diagram exclusion Co-authored-by: Alois Klink --- packages/mermaid/package.json | 2 +- .../src/diagram-api/diagram-orchestration.ts | 6 +- .../src/diagrams/flowchart/elk/detector.ts | 4 +- .../mermaid/src/diagrams/mindmap/detector.ts | 4 +- pnpm-lock.yaml | 283 +----------------- 5 files changed, 14 insertions(+), 285 deletions(-) diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json index 2af8d6738..84c4ae8e9 100644 --- a/packages/mermaid/package.json +++ b/packages/mermaid/package.json @@ -1,6 +1,6 @@ { "name": "mermaid", - "version": "11.0.0-alpha.3", + "version": "11.0.0-alpha.4", "description": "Markdown-ish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.", "type": "module", "module": "./dist/mermaid.core.mjs", diff --git a/packages/mermaid/src/diagram-api/diagram-orchestration.ts b/packages/mermaid/src/diagram-api/diagram-orchestration.ts index 9c03e27f3..09996e366 100644 --- a/packages/mermaid/src/diagram-api/diagram-orchestration.ts +++ b/packages/mermaid/src/diagram-api/diagram-orchestration.ts @@ -71,10 +71,8 @@ export const addDiagrams = () => { pie, requirement, sequence, - flowchartElk, flowchartV2, flowchart, - mindmap, timeline, git, stateV2, @@ -83,4 +81,8 @@ export const addDiagrams = () => { quadrantChart, sankey ); + + if (includeLargeDiagrams) { + registerLazyLoadedDiagrams(flowchartElk, mindmap); + } }; diff --git a/packages/mermaid/src/diagrams/flowchart/elk/detector.ts b/packages/mermaid/src/diagrams/flowchart/elk/detector.ts index 252455e1c..6cfcf2619 100644 --- a/packages/mermaid/src/diagrams/flowchart/elk/detector.ts +++ b/packages/mermaid/src/diagrams/flowchart/elk/detector.ts @@ -19,9 +19,7 @@ const detector: DiagramDetector = (txt, config): boolean => { }; const loader: DiagramLoader = async () => { - const { diagram } = includeLargeDiagrams - ? await import('./flowchart-elk-definition.js') - : await import('../../error/errorDiagram.js'); + const { diagram } = await import('./flowchart-elk-definition.js'); return { id, diagram }; }; diff --git a/packages/mermaid/src/diagrams/mindmap/detector.ts b/packages/mermaid/src/diagrams/mindmap/detector.ts index 0021b5308..2b31fc5e8 100644 --- a/packages/mermaid/src/diagrams/mindmap/detector.ts +++ b/packages/mermaid/src/diagrams/mindmap/detector.ts @@ -10,9 +10,7 @@ const detector: DiagramDetector = (txt) => { }; const loader: DiagramLoader = async () => { - const { diagram } = includeLargeDiagrams - ? await import('./mindmap-definition.js') - : await import('../error/errorDiagram.js'); + const { diagram } = await import('./mindmap-definition.js'); return { id, diagram }; }; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index d6e90660b..57245a46b 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -482,8 +482,8 @@ importers: specifier: ^1.1.16 version: 1.1.16 '@unocss/reset': - specifier: ^0.53.0 - version: 0.53.0 + specifier: ^0.54.0 + version: 0.54.0 '@vite-pwa/vitepress': specifier: ^0.2.0 version: 0.2.0(vite-plugin-pwa@0.16.0) @@ -500,20 +500,20 @@ importers: specifier: ^1.1.0 version: 1.1.0 unocss: - specifier: ^0.53.0 - version: 0.53.0(postcss@8.4.27)(rollup@2.79.1)(vite@4.3.9) + specifier: ^0.54.0 + version: 0.54.0(postcss@8.4.27)(rollup@2.79.1)(vite@4.3.9) unplugin-vue-components: specifier: ^0.25.0 version: 0.25.0(rollup@2.79.1)(vue@3.2.47) vite: - specifier: ^4.3.3 + specifier: ^4.3.9 version: 4.3.9(@types/node@18.16.0) vite-plugin-pwa: specifier: ^0.16.0 version: 0.16.0(vite@4.3.9)(workbox-build@7.0.0)(workbox-window@7.0.0) vitepress: - specifier: 1.0.0-beta.3 - version: 1.0.0-beta.3(@algolia/client-search@4.14.2)(@types/node@18.16.0)(search-insights@2.6.0) + specifier: 1.0.0-beta.7 + version: 1.0.0-beta.7(@algolia/client-search@4.14.2)(@types/node@18.16.0)(search-insights@2.6.0) workbox-window: specifier: ^7.0.0 version: 7.0.0 @@ -4999,17 +4999,6 @@ packages: eslint-visitor-keys: 3.4.0 dev: true - /@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/astro@0.54.0(rollup@2.79.1)(vite@4.3.9): resolution: {integrity: sha512-Zq4GGRiXbWCipN9lUKlu3fmlrqIYu3rFoGwjL+v7VJulP8tVhiqzfbLXFKQePOVvCmiSvCKr6leuqgFA7PlPBg==} dependencies: @@ -5021,28 +5010,6 @@ packages: - 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.0 - '@unocss/core': 0.53.0 - '@unocss/preset-uno': 0.53.0 - cac: 6.7.14 - chokidar: 3.5.3 - colorette: 2.0.20 - consola: 3.2.3 - fast-glob: 3.3.0 - magic-string: 0.30.1 - pathe: 1.1.1 - perfect-debounce: 1.0.0 - transitivePeerDependencies: - - rollup - dev: true - /@unocss/cli@0.54.0(rollup@2.79.1): resolution: {integrity: sha512-SuQkqJxuvC9JHUpHbFQY5r+6/FoF0j4zTwY25POlr9SIz3CFrdn4tDndxvhClap9d6wVHKSbHBP9EY0fA2SQzw==} engines: {node: '>=14'} @@ -5065,14 +5032,6 @@ packages: - rollup dev: true - /@unocss/config@0.53.0: - resolution: {integrity: sha512-D9A3uFT6jSj/EgMOCpQQ+dPadLQDiEIb0BHa7BYW7/3STijnPMcFjPVjzABj9Wn7RQjka/MZ2/AvfH9eYMTR8g==} - engines: {node: '>=14'} - dependencies: - '@unocss/core': 0.53.0 - unconfig: 0.3.9 - dev: true - /@unocss/config@0.54.0: resolution: {integrity: sha512-FT0zOJCR2qr5P08msNovsJ4Qx+P4rXoYlK2zt/hgLKiFRIUKxnwSBDvapqmW6vo3vzOsdmBBO0YKpaZJ877F8A==} engines: {node: '>=14'} @@ -5081,33 +5040,16 @@ packages: unconfig: 0.3.9 dev: true - /@unocss/core@0.53.0: - resolution: {integrity: sha512-MB6hqSN2wjmm3NNYspNqzxvMv7LnyLqz0uCWr15elRqnjsuq01w7DZ1iPS9ckA2M3YjQIRTXR9YPtDbSqY0jcA==} - dev: true - /@unocss/core@0.54.0: resolution: {integrity: sha512-iHfJJ8U+pVhMrbVpzMb0GImZUJu3Xmp165Q5Qr44hGOEzcMdvdBxbMSSl2VBKjRsEuNudNVhh7XJAyUcKxnSWg==} dev: true - /@unocss/extractor-arbitrary-variants@0.53.0: - resolution: {integrity: sha512-f1v2E5PherulTAdrsXXb5Knaz4Viu2dM71WalNYhb+j9QqwGngagLrMzRzeIRLOEI2c0D0l7HBQtew+QFWsXcg==} - dependencies: - '@unocss/core': 0.53.0 - dev: true - /@unocss/extractor-arbitrary-variants@0.54.0: resolution: {integrity: sha512-luJTF3TnXFbMZ2Gau56p0uRsR+yIUbvHbT6ag6mvv0TvUsnhEFsMUdkXVJ1arp0duIl/dg0r1drL/Ax75RszNw==} dependencies: '@unocss/core': 0.54.0 dev: true - /@unocss/inspector@0.53.0: - resolution: {integrity: sha512-TX8O39tXuEStUs516YBiCr2BS68Z9oHXnMZspxBxMma1X47bW2Hz+x9kWkhFzqmHWBjFPJob1PjjkbfeE4TbOQ==} - dependencies: - gzip-size: 6.0.0 - sirv: 2.0.3 - dev: true - /@unocss/inspector@0.54.0: resolution: {integrity: sha512-D3yVO7zE4NY/sARiNCUXQC7HPQZhEy7U1mSZEPc+vsVKx3nJJuRMqK9qo60SV4AZuxnd8WhL0T00W7cjVldzRw==} dependencies: @@ -5115,20 +5057,6 @@ packages: sirv: 2.0.3 dev: true - /@unocss/postcss@0.53.0(postcss@8.4.27): - resolution: {integrity: sha512-q+5aDvkwP1eEhDmdz32WrwsGEEcJdQLy3apiU/df+CaL71HATvUfMZJVZbXZlFqoed703c+cGLHOhRHMPDk/dw==} - engines: {node: '>=14'} - peerDependencies: - postcss: ^8.4.21 - dependencies: - '@unocss/config': 0.53.0 - '@unocss/core': 0.53.0 - css-tree: 2.3.1 - fast-glob: 3.3.0 - magic-string: 0.30.1 - postcss: 8.4.27 - dev: true - /@unocss/postcss@0.54.0(postcss@8.4.27): resolution: {integrity: sha512-t1PmIkp2Qa9F/9swfCVCXMuheQxd1ddrcvf0+d4fOckpFF8YhvOi+WfMoZW4YFwoCmG5pvDg4VYgKbDunGHhRg==} engines: {node: '>=14'} @@ -5143,28 +5071,12 @@ packages: postcss: 8.4.27 dev: true - /@unocss/preset-attributify@0.53.0: - resolution: {integrity: sha512-RqvSbuECeMBVVt2rmNIozznLBkfzkfe7vOIx3arytPBG/nggDnC1GB/xTxCGAiU7UcEXw03laWtjwXHmJHt8Gw==} - dependencies: - '@unocss/core': 0.53.0 - dev: true - /@unocss/preset-attributify@0.54.0: resolution: {integrity: sha512-5Ar1n7LHKF6z1BF9N5CR8jjl9TXrVktTDd+Ldyia69jDLi+stVhM9AOGEDE8wbDkLKwv9CK5XhvyPCazGHrG+A==} dependencies: '@unocss/core': 0.54.0 dev: true - /@unocss/preset-icons@0.53.0: - resolution: {integrity: sha512-0Et3dtrmBRVPZ5pGiITrwb9O01M88s0juOVSM7L4z0Uf0RNXuPCGwh2N5TRX2IIS7LAi4k0tAXFUORlkUiC2Lg==} - dependencies: - '@iconify/utils': 2.1.7 - '@unocss/core': 0.53.0 - ofetch: 1.1.1 - transitivePeerDependencies: - - supports-color - dev: true - /@unocss/preset-icons@0.54.0: resolution: {integrity: sha512-WHdkpMzj6tohIkCc/+mEOzn0Yppqoz3y5zbI3WsDqA2/QFNSXx4haWcjV5iJI42uGcLXRp4K3l9JV3EL+oAxbg==} dependencies: @@ -5175,13 +5087,6 @@ packages: - supports-color dev: true - /@unocss/preset-mini@0.53.0: - resolution: {integrity: sha512-hGj9ltZUJIuPT+9bO+R0OlsQOSlV7rjQRkSSMnUaDsuKfzhahsyc7QglNHZI4wuTI/9iSJKGUD4nvTe559+8Hg==} - dependencies: - '@unocss/core': 0.53.0 - '@unocss/extractor-arbitrary-variants': 0.53.0 - dev: true - /@unocss/preset-mini@0.54.0: resolution: {integrity: sha512-y+BnGpQAGC3ZWWZfXnsvUuTTO2rNnakHx4jIyf1cv7rw5oo7jL+ONb8stKqlmLGCzlQUKjG1xp+DGuKSVnRXBw==} dependencies: @@ -5189,25 +5094,12 @@ packages: '@unocss/extractor-arbitrary-variants': 0.54.0 dev: true - /@unocss/preset-tagify@0.53.0: - resolution: {integrity: sha512-S3e1d2jJvjEbGBE0jPEht/Hmp+245SxjWcrDdO7HmKVL2+0vwIQQg6P2P9aUWqt+/kZQ6iBStSzGm9RyKRKMhw==} - dependencies: - '@unocss/core': 0.53.0 - dev: true - /@unocss/preset-tagify@0.54.0: resolution: {integrity: sha512-FTIZc0vMoX9+fcjPYMWALpCQp3cZQCFzR05CVJapvymxb6zl5eZq7e+tpvrmU9ZPSOdG+eHTd3SxhjeJSwh15g==} dependencies: '@unocss/core': 0.54.0 dev: true - /@unocss/preset-typography@0.53.0: - resolution: {integrity: sha512-VFTNV8O9KIH/JX9Pn43Vv6JrCTljG9NYnuvZpKpEp95uYDcZQAISao04RWEzbAzqB31x8N9Aga1Bq2TSOg3uTA==} - dependencies: - '@unocss/core': 0.53.0 - '@unocss/preset-mini': 0.53.0 - dev: true - /@unocss/preset-typography@0.54.0: resolution: {integrity: sha512-QqHmC49nDgYeoOCMZp1OPn6R7ISIb2LMpSq81iuuFDeYO8J+JTBWe+Z1TZhVRAXwc9rsVZeUWW6PqoBGP9QCOw==} dependencies: @@ -5215,14 +5107,6 @@ packages: '@unocss/preset-mini': 0.54.0 dev: true - /@unocss/preset-uno@0.53.0: - resolution: {integrity: sha512-f50D2nFnX7nXvxtueUfCRbSCrWNJTFm4qKg0J9gzqyOJGWJoNcN2Ig9aL0P47W1TmIjYA5SpGlvg6U5qIfkNtQ==} - dependencies: - '@unocss/core': 0.53.0 - '@unocss/preset-mini': 0.53.0 - '@unocss/preset-wind': 0.53.0 - dev: true - /@unocss/preset-uno@0.54.0: resolution: {integrity: sha512-09/sthjGLDNMr/Cayu0Gy9jTMSxUuTfetWnM3jkByNidhfuzMW26eaMhxTrbUd28H8Titt6M+WgbJ7Gi0lQtZA==} dependencies: @@ -5231,13 +5115,6 @@ packages: '@unocss/preset-wind': 0.54.0 dev: true - /@unocss/preset-web-fonts@0.53.0: - resolution: {integrity: sha512-CAZW/PSp9+VBvzE/T56v2Yb8Nk3xF9XJaQrDydF9cAPyz/gVOZBbKQSDS8OqyAqKiXbnn+NYCwEqTG8v/YOMyw==} - dependencies: - '@unocss/core': 0.53.0 - ofetch: 1.1.1 - dev: true - /@unocss/preset-web-fonts@0.54.0: resolution: {integrity: sha512-3x1SDbJ2omwNNc3eK19zOdNU6moJg4SEr09GkeV4MMHrMXM6BHW2mEJYFSVgmTVD1RN4LZuoy/gTHMWpJhTuzw==} dependencies: @@ -5245,13 +5122,6 @@ packages: ofetch: 1.1.1 dev: true - /@unocss/preset-wind@0.53.0: - resolution: {integrity: sha512-vb9tV3Cze+w8OZyOd/Xi6Zn8F8+EV53AZIqCrQvMD/6ZeqQJ9gjFx/Q69H/bu009wnPleQpce6RKJcNqMzif8g==} - dependencies: - '@unocss/core': 0.53.0 - '@unocss/preset-mini': 0.53.0 - dev: true - /@unocss/preset-wind@0.54.0: resolution: {integrity: sha512-SO971KQOYzM5IKwGDBve+EWBKevU1T0mK20g17BHxPI++ubHPWRRQIh/xxHyew592taBFWK6Q75fcbOgIodx4w==} dependencies: @@ -5259,65 +5129,32 @@ packages: '@unocss/preset-mini': 0.54.0 dev: true - /@unocss/reset@0.53.0: - resolution: {integrity: sha512-4XJkEtVxUGYp+WX2aRTrZLNp6MEwulBvhhpkAjwfkS+wVdo9lMma0O93TCqJaFeYx7lU8W92APB4n918rz9scA==} - dev: true - /@unocss/reset@0.54.0: resolution: {integrity: sha512-zxvr96hVsmvJtxCLatLSCc67RBEgqvVDhEtkIFxIz5oCJzxvipJTGdKxM4F6Akyzx1A+q7zM8dimqvmC6D5Idw==} dev: true - /@unocss/scope@0.53.0: - resolution: {integrity: sha512-JAk3jJeFTmmafVI8Oy/TkAs1/NXpR9Vy5IEIMO6gyAmYw0VjiL9dkYDNZAD9hwdj/oRIUgJMcX96Huhy+YDl/w==} - dev: true - /@unocss/scope@0.54.0: resolution: {integrity: sha512-47M3y3sl512BWZL5/aLrGPglQIRUjQrIW+WVVh3uzwIGVnDNHlxIhcHQUXXJuf8SLduXoIvcZQTfJt+jSXeuhA==} dev: true - /@unocss/transformer-attributify-jsx-babel@0.53.0: - resolution: {integrity: sha512-++DTBEkFS2/1VE+TBPEmK0NAaCa/KP7dkJ7uldrQ+c5MpDp/IcCkOt8vPEL/6qKhUbTYXb/hruqq6wv27ZDrSg==} - dependencies: - '@unocss/core': 0.53.0 - dev: true - /@unocss/transformer-attributify-jsx-babel@0.54.0: resolution: {integrity: sha512-+YWhyReh6JZvGiYFZ61tyqkKOc/Tn+hyYaO7VP+G2IvJqtjTwzAuyxANHimCle7O4GLodouiHPe3lKscVFt0vg==} dependencies: '@unocss/core': 0.54.0 dev: true - /@unocss/transformer-attributify-jsx@0.53.0: - resolution: {integrity: sha512-4QJEmoj2of7nZM8afNsMk+NWX3K89j1sHx+EKw5+s1r/Pg4/PxeDgF4PnRWvPnjvRpDaRRTZGRxTrBEimup8vg==} - dependencies: - '@unocss/core': 0.53.0 - dev: true - /@unocss/transformer-attributify-jsx@0.54.0: resolution: {integrity: sha512-in5IglhFqY/3GFe7IZA7g5Q9fskjiWAZiKtCTp5vFExagq1d3Tr9VIOA98SEXBrpXXIh3lKbTiY0NusJRU3K2Q==} dependencies: '@unocss/core': 0.54.0 dev: true - /@unocss/transformer-compile-class@0.53.0: - resolution: {integrity: sha512-PTPysxBAimEWspMU3gMo+053M5RURnLT88Wp0y8f4F8oEMg7fV9Tn5f/bftvG+iI7dPyl4m/OsislxfucoESYw==} - dependencies: - '@unocss/core': 0.53.0 - dev: true - /@unocss/transformer-compile-class@0.54.0: resolution: {integrity: sha512-WK1fC+iDOl7Z7fO2ids6nWiMXMPHEfwMOs5dbv5lBz9UTrY1kpObToBsm3EfzhR6vwOTgld1UzpKAs3zCqZoKg==} dependencies: '@unocss/core': 0.54.0 dev: true - /@unocss/transformer-directives@0.53.0: - resolution: {integrity: sha512-EIrrVphm0Bv+Ng2w1Qj5f0JFkfbN0b1/1fJ9hwgb5S2ewE3Xvwk59/h321D/GGDraQCUqqyZGgcG368xVh3pQA==} - dependencies: - '@unocss/core': 0.53.0 - css-tree: 2.3.1 - dev: true - /@unocss/transformer-directives@0.54.0: resolution: {integrity: sha512-DJ9B5TSxScoj4B1C8H3qeUIfNGjUPuM42Lvl2exDEk4RhA/IwVePnCAjTl8UsHTDI9z+6H37v4p8j8srPrzEmQ==} dependencies: @@ -5325,38 +5162,12 @@ packages: css-tree: 2.3.1 dev: true - /@unocss/transformer-variant-group@0.53.0: - resolution: {integrity: sha512-dwfjifgoa2VuO3LCl2ayRw3M5T6EfDKt16s9KbIRUcHqMJFnoHACAk8e4YsHGBvly0utbQHxFuBygOar3IfxEg==} - dependencies: - '@unocss/core': 0.53.0 - dev: true - /@unocss/transformer-variant-group@0.54.0: resolution: {integrity: sha512-qwviBwjBKhbXYK0T1wNuM3weY+RJbmrWmKqWTldXAuZDf0q06KAa4jQC8FF1YXhq5/Z6tn2MW2GFPVWd/8nPHQ==} dependencies: '@unocss/core': 0.54.0 dev: true - /@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.3.0 - magic-string: 0.30.1 - vite: 4.3.9(@types/node@18.16.0) - transitivePeerDependencies: - - rollup - dev: true - /@unocss/vite@0.54.0(rollup@2.79.1)(vite@4.3.9): resolution: {integrity: sha512-lABmJKYs/yNfZZSs3xwVhBZwNhfLaYcdKxPAopJ8MKiUqECdWvHqLvklKQvLttZpN3dQUmGTQLblM+55IodKEw==} peerDependencies: @@ -15256,42 +15067,6 @@ packages: engines: {node: '>= 10.0.0'} dev: true - /unocss@0.53.0(postcss@8.4.27)(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.27) - '@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 - - supports-color - - vite - dev: true - /unocss@0.54.0(postcss@8.4.27)(rollup@2.79.1)(vite@4.3.9): resolution: {integrity: sha512-SXjyQqt/MP1uW8mjEmQaSa0zd+QB3FwaGD/ityNlu+zNRx1D03BPP9ACbJDB1zZKx4aodMVSsHZ3TV5wsu+VRQ==} engines: {node: '>=14'} @@ -15695,50 +15470,6 @@ packages: - terser dev: true - /vitepress@1.0.0-beta.3(@algolia/client-search@4.14.2)(@types/node@18.16.0)(search-insights@2.6.0): - resolution: {integrity: sha512-GR5Pvr/o343NN1M4Na1shhDYZRrQbjmLq7WE0lla0H8iDPAsHE8agTHLWfu3FWx+3q2KA29sv16+0O9RQKGjlA==} - 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.7)(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.5.2)(vue@3.3.4) - body-scroll-lock: 4.0.0-beta.0 - focus-trap: 7.5.2 - mark.js: 8.11.1 - minisearch: 6.1.0 - shiki: 0.14.3 - vite: 4.4.7(@types/node@18.16.0) - 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 - /vitepress@1.0.0-beta.7(@algolia/client-search@4.14.2)(@types/node@18.16.0)(search-insights@2.6.0): resolution: {integrity: sha512-P9Rw+FXatKIU4fVdtKxqwHl6fby8E/8zE3FIfep6meNgN4BxbWqoKJ6yfuuQQR9IrpQqwnyaBh4LSabyll6tWg==} hasBin: true From 905cc365e7c53a20b31ac018403dcfe4d7543493 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Wed, 16 Aug 2023 11:08:09 +0530 Subject: [PATCH 009/266] chore: Fix ordering issue --- .../mermaid/src/diagram-api/diagram-orchestration.ts | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/mermaid/src/diagram-api/diagram-orchestration.ts b/packages/mermaid/src/diagram-api/diagram-orchestration.ts index 09996e366..8474185ff 100644 --- a/packages/mermaid/src/diagram-api/diagram-orchestration.ts +++ b/packages/mermaid/src/diagram-api/diagram-orchestration.ts @@ -60,6 +60,11 @@ export const addDiagrams = () => { return text.toLowerCase().trimStart().startsWith('---'); } ); + + if (includeLargeDiagrams) { + registerLazyLoadedDiagrams(flowchartElk, mindmap); + } + // Ordering of detectors is important. The first one to return true will be used. registerLazyLoadedDiagrams( c4, @@ -81,8 +86,4 @@ export const addDiagrams = () => { quadrantChart, sankey ); - - if (includeLargeDiagrams) { - registerLazyLoadedDiagrams(flowchartElk, mindmap); - } }; From b23b97f61232d6695412f9578c952ba8394dcf71 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Wed, 24 Jan 2024 09:41:00 +0530 Subject: [PATCH 010/266] Fix artifact upload --- .github/workflows/build.yml | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml index 605dea9ab..725d90c42 100644 --- a/.github/workflows/build.yml +++ b/.github/workflows/build.yml @@ -40,13 +40,13 @@ jobs: run: pnpm run build - name: Upload Mermaid Build as Artifact - uses: actions/upload-artifact@v3 + uses: actions/upload-artifact@v4 with: - name: mermaid-build + name: mermaid path: packages/mermaid/dist - - name: Upload Mermaid Mindmap Build as Artifact - uses: actions/upload-artifact@v3 + - name: Upload all packages as Artifact + uses: actions/upload-artifact@v4 with: - name: mermaid-mindmap-build - path: packages/mermaid-mindmap/dist + name: mermaid-all + path: packages/**/dist From c1d31476cdcf99fdd9e9956a9b31c334c121faf2 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Wed, 24 Jan 2024 09:44:25 +0530 Subject: [PATCH 011/266] Ignore node_modules --- .github/workflows/build.yml | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml index 725d90c42..ac8b24f51 100644 --- a/.github/workflows/build.yml +++ b/.github/workflows/build.yml @@ -49,4 +49,6 @@ jobs: uses: actions/upload-artifact@v4 with: name: mermaid-all - path: packages/**/dist + path: | + packages/**/dist + !**/node_modules From 882e4971eb3f566a4e50083cc8adf9ac3437dce5 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Fri, 1 Mar 2024 12:54:42 +0530 Subject: [PATCH 012/266] Remove katex from mermaid.tiny --- .esbuild/build.ts | 2 +- .esbuild/util.ts | 12 ++--- .vite/build.ts | 2 +- .../src/diagram-api/diagram-orchestration.ts | 2 +- .../mermaid/src/diagrams/common/common.ts | 45 +++++++++++-------- packages/mermaid/src/mermaidAPI.ts | 2 +- packages/mermaid/src/type.d.ts | 2 +- vite.config.ts | 2 +- 8 files changed, 38 insertions(+), 31 deletions(-) diff --git a/.esbuild/build.ts b/.esbuild/build.ts index 48b2f89b6..3eea8dfe2 100644 --- a/.esbuild/build.ts +++ b/.esbuild/build.ts @@ -32,7 +32,7 @@ const buildPackage = async (entryName: keyof typeof packageOptions) => { { ...iifeOptions, minify: true, - includeLargeDiagrams: false, + includeLargeFeatures: false, metafile: shouldVisualize, } ); diff --git a/.esbuild/util.ts b/.esbuild/util.ts index ce0db6047..0048da94e 100644 --- a/.esbuild/util.ts +++ b/.esbuild/util.ts @@ -14,7 +14,7 @@ export interface MermaidBuildOptions { metafile: boolean; format: 'esm' | 'iife'; entryName: keyof typeof packageOptions; - includeLargeDiagrams: boolean; + includeLargeFeatures: boolean; } export const defaultOptions: Omit = { @@ -22,7 +22,7 @@ export const defaultOptions: Omit = { metafile: false, core: false, format: 'esm', - includeLargeDiagrams: true, + includeLargeFeatures: true, } as const; const buildOptions = (override: BuildOptions): BuildOptions => { @@ -43,14 +43,14 @@ const buildOptions = (override: BuildOptions): BuildOptions => { const getFileName = ( fileName: string, - { core, format, minify, includeLargeDiagrams }: MermaidBuildOptions + { core, format, minify, includeLargeFeatures }: MermaidBuildOptions ) => { if (core) { fileName += '.core'; } else if (format === 'esm') { fileName += '.esm'; } - if (!includeLargeDiagrams) { + if (!includeLargeFeatures) { fileName += '.tiny'; } if (minify) { @@ -60,7 +60,7 @@ const getFileName = ( }; export const getBuildConfig = (options: MermaidBuildOptions): BuildOptions => { - const { core, entryName, metafile, format, includeLargeDiagrams, minify } = options; + const { core, entryName, metafile, format, includeLargeFeatures, minify } = options; const external: string[] = ['require', 'fs', 'path']; const { name, file, packageName } = packageOptions[entryName]; const outFileName = getFileName(name, options); @@ -75,7 +75,7 @@ export const getBuildConfig = (options: MermaidBuildOptions): BuildOptions => { chunkNames: `chunks/${outFileName}/[name]-[hash]`, define: { // This needs to be stringified for esbuild - includeLargeDiagrams: `${includeLargeDiagrams}`, + includeLargeFeatures: `${includeLargeFeatures}`, 'import.meta.vitest': 'undefined', }, }); diff --git a/.vite/build.ts b/.vite/build.ts index 9f9dcb7c5..a7e3cb0a4 100644 --- a/.vite/build.ts +++ b/.vite/build.ts @@ -95,7 +95,7 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions) ], define: { // Needs to be string - includeLargeDiagrams: 'true', + includeLargeFeatures: 'true', }, }; diff --git a/packages/mermaid/src/diagram-api/diagram-orchestration.ts b/packages/mermaid/src/diagram-api/diagram-orchestration.ts index 82904257a..63fe19cdd 100644 --- a/packages/mermaid/src/diagram-api/diagram-orchestration.ts +++ b/packages/mermaid/src/diagram-api/diagram-orchestration.ts @@ -68,7 +68,7 @@ export const addDiagrams = () => { } ); - if (includeLargeDiagrams) { + if (includeLargeFeatures) { registerLazyLoadedDiagrams(flowchartElk, mindmap); } diff --git a/packages/mermaid/src/diagrams/common/common.ts b/packages/mermaid/src/diagrams/common/common.ts index 04be2a5f4..5ae4a358f 100644 --- a/packages/mermaid/src/diagrams/common/common.ts +++ b/packages/mermaid/src/diagrams/common/common.ts @@ -341,29 +341,36 @@ export const renderKatex = async (text: string, config: MermaidConfig): Promise< return text.replace(katexRegex, 'MathML is unsupported in this environment.'); } - const { default: katex } = await import('katex'); - return text - .split(lineBreakRegex) - .map((line) => - hasKatex(line) - ? ` + if (includeLargeFeatures) { + const { default: katex } = await import('katex'); + return text + .split(lineBreakRegex) + .map((line) => + hasKatex(line) + ? `
${line}
` - : `
${line}
` - ) - .join('') - .replace(katexRegex, (_, c) => - katex - .renderToString(c, { - throwOnError: true, - displayMode: true, - output: isMathMLSupported() ? 'mathml' : 'htmlAndMathml', - }) - .replace(/\n/g, ' ') - .replace(//g, '') - ); + : `
${line}
` + ) + .join('') + .replace(katexRegex, (_, c) => + katex + .renderToString(c, { + throwOnError: true, + displayMode: true, + output: isMathMLSupported() ? 'mathml' : 'htmlAndMathml', + }) + .replace(/\n/g, ' ') + .replace(//g, '') + ); + } + + return text.replace( + katexRegex, + 'Katex is unsupported in mermaid.tiny.js. Please use mermaid.js or mermaid.min.js.' + ); }; export default { diff --git a/packages/mermaid/src/mermaidAPI.ts b/packages/mermaid/src/mermaidAPI.ts index e8539b74c..01e8150f5 100644 --- a/packages/mermaid/src/mermaidAPI.ts +++ b/packages/mermaid/src/mermaidAPI.ts @@ -32,7 +32,7 @@ import type { DiagramMetadata, DiagramStyleClassDef } from './diagram-api/types. import { preprocessDiagram } from './preprocess.js'; import { decodeEntities } from './utils.js'; -const version = packageVersion + (includeLargeDiagrams ? '' : '-tiny'); +const version = packageVersion + (includeLargeFeatures ? '' : '-tiny'); const MAX_TEXTLENGTH = 50_000; const MAX_TEXTLENGTH_EXCEEDED_MSG = diff --git a/packages/mermaid/src/type.d.ts b/packages/mermaid/src/type.d.ts index 2962683cc..0c88e4866 100644 --- a/packages/mermaid/src/type.d.ts +++ b/packages/mermaid/src/type.d.ts @@ -1,2 +1,2 @@ // eslint-disable-next-line no-var -declare var includeLargeDiagrams: boolean; +declare var includeLargeFeatures: boolean; diff --git a/vite.config.ts b/vite.config.ts index 2c6244e9f..0cbf36013 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -36,7 +36,7 @@ export default defineConfig({ }, define: { // Needs to be string - includeLargeDiagrams: 'true', + includeLargeFeatures: 'true', 'import.meta.vitest': 'undefined', }, }); From 80eaafa0018a21c73ea419864650371c4877e7fa Mon Sep 17 00:00:00 2001 From: sidharthv96 Date: Fri, 8 Mar 2024 14:24:44 +0000 Subject: [PATCH 013/266] Update docs --- docs/config/setup/modules/mermaidAPI.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/config/setup/modules/mermaidAPI.md b/docs/config/setup/modules/mermaidAPI.md index bee6e7791..3bb0b1923 100644 --- a/docs/config/setup/modules/mermaidAPI.md +++ b/docs/config/setup/modules/mermaidAPI.md @@ -97,7 +97,7 @@ mermaid.initialize(config); #### Defined in -[mermaidAPI.ts:625](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L625) +[mermaidAPI.ts:624](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L624) ## Functions From b602f67abee861f5e6b7fcc1a08d13bccc7978ea Mon Sep 17 00:00:00 2001 From: Bryan Date: Fri, 18 Oct 2024 20:05:42 +0100 Subject: [PATCH 014/266] Add bit count syntax to packet diagram --- .../src/diagrams/packet/packet.spec.ts | 91 +++++++++++++++++++ .../mermaid/src/diagrams/packet/parser.ts | 44 ++++++--- .../parser/src/language/packet/packet.langium | 7 +- 3 files changed, 127 insertions(+), 15 deletions(-) diff --git a/packages/mermaid/src/diagrams/packet/packet.spec.ts b/packages/mermaid/src/diagrams/packet/packet.spec.ts index 2d7b278cd..88366da3a 100644 --- a/packages/mermaid/src/diagrams/packet/packet.spec.ts +++ b/packages/mermaid/src/diagrams/packet/packet.spec.ts @@ -30,6 +30,7 @@ describe('packet diagrams', () => { [ [ { + "bits": 11, "end": 10, "label": "test", "start": 0, @@ -49,11 +50,13 @@ describe('packet diagrams', () => { [ [ { + "bits": 11, "end": 10, "label": "test", "start": 0, }, { + "bits": 1, "end": 11, "label": "single", "start": 11, @@ -63,6 +66,58 @@ describe('packet diagrams', () => { `); }); + it('should handle bit counts', async () => { + const str = `packet-beta + 8bits: "byte" + 16bits: "word" + `; + await expect(parser.parse(str)).resolves.not.toThrow(); + expect(getPacket()).toMatchInlineSnapshot(` + [ + [ + { + "bits": 8, + "end": 7, + "label": "byte", + "start": 0, + }, + { + "bits": 16, + "end": 23, + "label": "word", + "start": 8, + }, + ], + ] + `); + }); + + it('should handle bit counts with bit or bits', async () => { + const str = `packet-beta + 8bit: "byte" + 16bits: "word" + `; + await expect(parser.parse(str)).resolves.not.toThrow(); + expect(getPacket()).toMatchInlineSnapshot(` + [ + [ + { + "bits": 8, + "end": 7, + "label": "byte", + "start": 0, + }, + { + "bits": 16, + "end": 23, + "label": "word", + "start": 8, + }, + ], + ] + `); + }); + it('should split into multiple rows', async () => { const str = `packet-beta 0-10: "test" @@ -73,11 +128,13 @@ describe('packet diagrams', () => { [ [ { + "bits": 11, "end": 10, "label": "test", "start": 0, }, { + "bits": 20, "end": 31, "label": "multiple", "start": 11, @@ -85,6 +142,7 @@ describe('packet diagrams', () => { ], [ { + "bits": 31, "end": 63, "label": "multiple", "start": 32, @@ -92,6 +150,7 @@ describe('packet diagrams', () => { ], [ { + "bits": 26, "end": 90, "label": "multiple", "start": 64, @@ -111,11 +170,13 @@ describe('packet diagrams', () => { [ [ { + "bits": 17, "end": 16, "label": "test", "start": 0, }, { + "bits": 14, "end": 31, "label": "multiple", "start": 17, @@ -123,6 +184,7 @@ describe('packet diagrams', () => { ], [ { + "bits": 31, "end": 63, "label": "multiple", "start": 32, @@ -142,6 +204,16 @@ describe('packet diagrams', () => { ); }); + it('should throw error if numbers are not continuous with bit counts', async () => { + const str = `packet-beta + 16bits: "test" + 18-20: "error" + `; + await expect(parser.parse(str)).rejects.toThrowErrorMatchingInlineSnapshot( + `[Error: Packet block 18 - 20 is not contiguous. It should start from 16.]` + ); + }); + it('should throw error if numbers are not continuous for single packets', async () => { const str = `packet-beta 0-16: "test" @@ -152,6 +224,16 @@ describe('packet diagrams', () => { ); }); + it('should throw error if numbers are not continuous for single packets with bit counts', async () => { + const str = `packet-beta + 16 bits: "test" + 18: "error" + `; + await expect(parser.parse(str)).rejects.toThrowErrorMatchingInlineSnapshot( + `[Error: Packet block 18 - 18 is not contiguous. It should start from 16.]` + ); + }); + it('should throw error if numbers are not continuous for single packets - 2', async () => { const str = `packet-beta 0-16: "test" @@ -172,4 +254,13 @@ describe('packet diagrams', () => { `[Error: Packet block 25 - 20 is invalid. End must be greater than start.]` ); }); + + it('should throw error if bit count is 0', async () => { + const str = `packet-beta + 0bits: "test" + `; + await expect(parser.parse(str)).rejects.toThrowErrorMatchingInlineSnapshot( + `[Error: Packet block 0 is invalid. Cannot have a zero bit field.]` + ); + }); }); diff --git a/packages/mermaid/src/diagrams/packet/parser.ts b/packages/mermaid/src/diagrams/packet/parser.ts index 06d180dfd..eb58916f5 100644 --- a/packages/mermaid/src/diagrams/packet/parser.ts +++ b/packages/mermaid/src/diagrams/packet/parser.ts @@ -10,26 +10,39 @@ const maxPacketSize = 10_000; const populate = (ast: Packet) => { populateCommonDb(ast, db); - let lastByte = -1; + let lastBit = -1; let word: PacketWord = []; let row = 1; const { bitsPerRow } = db.getConfig(); - for (let { start, end, label } of ast.blocks) { - if (end && end < start) { + + for (let { start, end, bits, label } of ast.blocks) { + if (start !== undefined && end !== undefined && end < start) { throw new Error(`Packet block ${start} - ${end} is invalid. End must be greater than start.`); } - if (start !== lastByte + 1) { + if (start == undefined) { + start = lastBit + 1; + } + if (start !== lastBit + 1) { throw new Error( `Packet block ${start} - ${end ?? start} is not contiguous. It should start from ${ - lastByte + 1 + lastBit + 1 }.` ); } - lastByte = end ?? start; - log.debug(`Packet block ${start} - ${lastByte} with label ${label}`); + if (bits === 0) { + throw new Error(`Packet block ${start} is invalid. Cannot have a zero bit field.`); + } + if (end == undefined) { + end = start + (bits ?? 1) - 1; + } + if (bits == undefined) { + bits = end - start + 1; + } + lastBit = end; + log.debug(`Packet block ${start} - ${lastBit} with label ${label}`); while (word.length <= bitsPerRow + 1 && db.getPacket().length < maxPacketSize) { - const [block, nextBlock] = getNextFittingBlock({ start, end, label }, row, bitsPerRow); + const [block, nextBlock] = getNextFittingBlock({ start, end, bits, label }, row, bitsPerRow); word.push(block); if (block.end + 1 === row * bitsPerRow) { db.pushWord(word); @@ -39,7 +52,7 @@ const populate = (ast: Packet) => { if (!nextBlock) { break; } - ({ start, end, label } = nextBlock); + ({ start, end, bits, label } = nextBlock); } } db.pushWord(word); @@ -50,9 +63,8 @@ const getNextFittingBlock = ( row: number, bitsPerRow: number ): [Required, PacketBlock | undefined] => { - if (block.end === undefined) { - block.end = block.start; - } + assert(block.start !== undefined, 'start should have been set during first phase'); + assert(block.end !== undefined, 'end should have been set during first phase'); if (block.start > block.end) { throw new Error(`Block start ${block.start} is greater than block end ${block.end}.`); @@ -62,16 +74,20 @@ const getNextFittingBlock = ( return [block as Required, undefined]; } + const rowEnd = row * bitsPerRow - 1; + const rowStart = row * bitsPerRow; return [ { start: block.start, - end: row * bitsPerRow - 1, + end: rowEnd, label: block.label, + bits: rowEnd - block.start, }, { - start: row * bitsPerRow, + start: rowStart, end: block.end, label: block.label, + bits: block.end - rowStart, }, ]; }; diff --git a/packages/parser/src/language/packet/packet.langium b/packages/parser/src/language/packet/packet.langium index ad30f8df2..a2e957494 100644 --- a/packages/parser/src/language/packet/packet.langium +++ b/packages/parser/src/language/packet/packet.langium @@ -12,7 +12,12 @@ entry Packet: ; PacketBlock: - start=INT('-' end=INT)? ':' label=STRING EOL + ( + start=INT('-' (end=INT | bits=INT'bit''s'?))? + | bits=INT'bit''s'? + ) + ':' label=STRING + EOL ; terminal INT returns number: /0|[1-9][0-9]*/; From 93577619b22bf8168a4c458d1c81059f6240bdf8 Mon Sep 17 00:00:00 2001 From: Bryan Date: Fri, 18 Oct 2024 20:09:29 +0100 Subject: [PATCH 015/266] add documentation --- docs/syntax/packet.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/docs/syntax/packet.md b/docs/syntax/packet.md index 5eab81910..5feddfcd4 100644 --- a/docs/syntax/packet.md +++ b/docs/syntax/packet.md @@ -20,6 +20,7 @@ This diagram type is particularly useful for developers, network engineers, educ packet-beta start: "Block name" %% Single-bit block start-end: "Block name" %% Multi-bit blocks +16bits: "Block name" %% Auto appends to previous block without specifying start ... More Fields ... ``` @@ -82,6 +83,16 @@ title UDP Packet 48-63: "Checksum" 64-95: "Data (variable length)" ``` +Or you can write this as +```mermaid-example +packet-beta +title UDP Packet +16bits: "Source Port" +16bits: "Destination Port" +16bits: "Length" +16bits: "Checksum" +64-95: "Data (variable length)" +``` ```mermaid packet-beta From 0fdfd910690fc4ef7040c5374164f296cb24c79f Mon Sep 17 00:00:00 2001 From: Bryan Date: Fri, 18 Oct 2024 20:17:30 +0100 Subject: [PATCH 016/266] lint the documentation --- docs/syntax/packet.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/syntax/packet.md b/docs/syntax/packet.md index 5feddfcd4..f6c5d344d 100644 --- a/docs/syntax/packet.md +++ b/docs/syntax/packet.md @@ -83,7 +83,9 @@ title UDP Packet 48-63: "Checksum" 64-95: "Data (variable length)" ``` + Or you can write this as + ```mermaid-example packet-beta title UDP Packet From d54eed9d62a2e45372472d0359a396104807f47c Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Fri, 18 Oct 2024 19:22:20 +0000 Subject: [PATCH 017/266] [autofix.ci] apply automated fixes --- docs/syntax/packet.md | 13 ------------- 1 file changed, 13 deletions(-) diff --git a/docs/syntax/packet.md b/docs/syntax/packet.md index f6c5d344d..5eab81910 100644 --- a/docs/syntax/packet.md +++ b/docs/syntax/packet.md @@ -20,7 +20,6 @@ This diagram type is particularly useful for developers, network engineers, educ packet-beta start: "Block name" %% Single-bit block start-end: "Block name" %% Multi-bit blocks -16bits: "Block name" %% Auto appends to previous block without specifying start ... More Fields ... ``` @@ -84,18 +83,6 @@ title UDP Packet 64-95: "Data (variable length)" ``` -Or you can write this as - -```mermaid-example -packet-beta -title UDP Packet -16bits: "Source Port" -16bits: "Destination Port" -16bits: "Length" -16bits: "Checksum" -64-95: "Data (variable length)" -``` - ```mermaid packet-beta title UDP Packet From 6d33d93b15f3362c2113b7d8a980b26f8c7d60ad Mon Sep 17 00:00:00 2001 From: Bryan Date: Fri, 18 Oct 2024 20:28:20 +0100 Subject: [PATCH 018/266] run prettier --- .esbuild/server.ts | 4 +++- .../integration/rendering/iconShape.spec.ts | 6 +++++- .../integration/rendering/imageShape.spec.ts | 4 +++- .../src/diagrams/architecture/svgDraw.ts | 18 +++++++++++++++--- packages/mermaid/src/diagrams/block/layout.ts | 4 +++- .../src/diagrams/git/gitGraphRenderer.ts | 18 ++++++++++++++---- .../mermaid/src/diagrams/state/dataFetcher.js | 4 +++- .../rendering-elements/clusters.js | 4 +++- .../shapes/curlyBraceLeft.ts | 4 +++- .../shapes/curlyBraceRight.ts | 4 +++- .../rendering-elements/shapes/curlyBraces.ts | 4 +++- .../rendering-elements/shapes/cylinder.ts | 4 +++- .../rendering-elements/shapes/dividedRect.ts | 4 +++- .../shapes/flippedTriangle.ts | 4 +++- .../rendering-elements/shapes/labelRect.ts | 4 +++- .../rendering-elements/shapes/linedCylinder.ts | 4 +++- .../shapes/linedWaveEdgedRect.ts | 4 +++- .../rendering-elements/shapes/multiRect.ts | 4 +++- .../shapes/multiWaveEdgedRectangle.ts | 4 +++- .../shapes/rectLeftInvArrow.ts | 4 +++- .../rendering-elements/shapes/shadedProcess.ts | 4 +++- .../rendering-elements/shapes/slopedRect.ts | 4 +++- .../shapes/taggedWaveEdgedRectangle.ts | 4 +++- .../shapes/tiltedCylinder.ts | 4 +++- .../rendering-elements/shapes/triangle.ts | 5 ++++- .../shapes/waveEdgedRectangle.ts | 4 +++- .../rendering-elements/shapes/windowPane.ts | 8 ++++++-- 27 files changed, 110 insertions(+), 33 deletions(-) diff --git a/.esbuild/server.ts b/.esbuild/server.ts index 6e1bcb460..5bf214be9 100644 --- a/.esbuild/server.ts +++ b/.esbuild/server.ts @@ -36,7 +36,9 @@ const rebuildAll = async () => { console.time(timeLabel); await Promise.all( contexts.map(async ({ config, context }) => { - const buildVariant = `Rebuild ${buildNumber} Time (${Object.keys(config.entryPoints!)[0]} ${config.format})`; + const buildVariant = `Rebuild ${buildNumber} Time (${Object.keys(config.entryPoints!)[0]} ${ + config.format + })`; console.time(buildVariant); await context.rebuild(); console.timeEnd(buildVariant); diff --git a/cypress/integration/rendering/iconShape.spec.ts b/cypress/integration/rendering/iconShape.spec.ts index 4c12c3fa3..8f4b53076 100644 --- a/cypress/integration/rendering/iconShape.spec.ts +++ b/cypress/integration/rendering/iconShape.spec.ts @@ -14,7 +14,11 @@ looks.forEach((look) => { directions.forEach((direction) => { forms.forEach((form) => { labelPos.forEach((pos) => { - describe(`Test iconShape in ${form ? `${form} form,` : ''} ${look} look and dir ${direction} with label position ${pos ? pos : 'not defined'}`, () => { + describe(`Test iconShape in ${ + form ? `${form} form,` : '' + } ${look} look and dir ${direction} with label position ${ + pos ? pos : 'not defined' + }`, () => { it(`without label`, () => { let flowchartCode = `flowchart ${direction}\n`; flowchartCode += ` nA --> nAA@{ icon: 'fa:bell'`; diff --git a/cypress/integration/rendering/imageShape.spec.ts b/cypress/integration/rendering/imageShape.spec.ts index d2e267149..bcbdba102 100644 --- a/cypress/integration/rendering/imageShape.spec.ts +++ b/cypress/integration/rendering/imageShape.spec.ts @@ -12,7 +12,9 @@ const labelPos = [undefined, 't', 'b'] as const; looks.forEach((look) => { directions.forEach((direction) => { labelPos.forEach((pos) => { - describe(`Test imageShape in ${look} look and dir ${direction} with label position ${pos ? pos : 'not defined'}`, () => { + describe(`Test imageShape in ${look} look and dir ${direction} with label position ${ + pos ? pos : 'not defined' + }`, () => { it(`without label`, () => { let flowchartCode = `flowchart ${direction}\n`; flowchartCode += ` nA --> A@{ img: 'https://cdn.pixabay.com/photo/2020/02/22/18/49/paper-4871356_1280.jpg', w: '100', h: '100' }\n`; diff --git a/packages/mermaid/src/diagrams/architecture/svgDraw.ts b/packages/mermaid/src/diagrams/architecture/svgDraw.ts index b10a451fe..60970a186 100644 --- a/packages/mermaid/src/diagrams/architecture/svgDraw.ts +++ b/packages/mermaid/src/diagrams/architecture/svgDraw.ts @@ -212,7 +212,11 @@ export const drawGroups = async function (groupsEl: D3Element, cy: cytoscape.Cor if (data.icon) { const bkgElem = groupLabelContainer.append('g'); bkgElem.html( - `${await getIconSVG(data.icon, { height: groupIconSize, width: groupIconSize, fallbackPrefix: architectureIcons.prefix })}` + `${await getIconSVG(data.icon, { + height: groupIconSize, + width: groupIconSize, + fallbackPrefix: architectureIcons.prefix, + })}` ); bkgElem.attr( 'transform', @@ -297,11 +301,19 @@ export const drawServices = async function ( // throw new Error(`Invalid SVG Icon name: "${service.icon}"`); // } bkgElem.html( - `${await getIconSVG(service.icon, { height: iconSize, width: iconSize, fallbackPrefix: architectureIcons.prefix })}` + `${await getIconSVG(service.icon, { + height: iconSize, + width: iconSize, + fallbackPrefix: architectureIcons.prefix, + })}` ); } else if (service.iconText) { bkgElem.html( - `${await getIconSVG('blank', { height: iconSize, width: iconSize, fallbackPrefix: architectureIcons.prefix })}` + `${await getIconSVG('blank', { + height: iconSize, + width: iconSize, + fallbackPrefix: architectureIcons.prefix, + })}` ); const textElemContainer = bkgElem.append('g'); const fo = textElemContainer diff --git a/packages/mermaid/src/diagrams/block/layout.ts b/packages/mermaid/src/diagrams/block/layout.ts index 7f44a5f19..5081a5373 100644 --- a/packages/mermaid/src/diagrams/block/layout.ts +++ b/packages/mermaid/src/diagrams/block/layout.ts @@ -105,7 +105,9 @@ function setBlockSizes(block: Block, db: BlockDB, siblingWidth = 0, siblingHeigh for (const child of block.children) { if (child.size) { log.debug( - `abc95 Setting size of children of ${block.id} id=${child.id} ${maxWidth} ${maxHeight} ${JSON.stringify(child.size)}` + `abc95 Setting size of children of ${block.id} id=${ + child.id + } ${maxWidth} ${maxHeight} ${JSON.stringify(child.size)}` ); child.size.width = maxWidth * (child.widthInColumns ?? 1) + padding * ((child.widthInColumns ?? 1) - 1); diff --git a/packages/mermaid/src/diagrams/git/gitGraphRenderer.ts b/packages/mermaid/src/diagrams/git/gitGraphRenderer.ts index 39a64a623..dc92cfff6 100644 --- a/packages/mermaid/src/diagrams/git/gitGraphRenderer.ts +++ b/packages/mermaid/src/diagrams/git/gitGraphRenderer.ts @@ -276,7 +276,11 @@ const drawCommitBullet = ( cross .attr( 'd', - `M ${commitPosition.x - 5},${commitPosition.y - 5}L${commitPosition.x + 5},${commitPosition.y + 5}M${commitPosition.x - 5},${commitPosition.y + 5}L${commitPosition.x + 5},${commitPosition.y - 5}` + `M ${commitPosition.x - 5},${commitPosition.y - 5}L${commitPosition.x + 5},${ + commitPosition.y + 5 + }M${commitPosition.x - 5},${commitPosition.y + 5}L${commitPosition.x + 5},${ + commitPosition.y - 5 + }` ) .attr('class', `commit ${typeClass} ${commit.id} commit${branchIndex % THEME_COLOR_LIMIT}`); } @@ -652,21 +656,27 @@ const drawArrow = ( colorClassNum = branchPos.get(commitA.branch)?.index; - lineDef = `M ${p1.x} ${p1.y} L ${lineX + radius} ${p1.y} ${arc} ${lineX} ${p1.y + offset} L ${lineX} ${p2.y - radius} ${arc2} ${lineX - offset} ${p2.y} L ${p2.x} ${p2.y}`; + lineDef = `M ${p1.x} ${p1.y} L ${lineX + radius} ${p1.y} ${arc} ${lineX} ${ + p1.y + offset + } L ${lineX} ${p2.y - radius} ${arc2} ${lineX - offset} ${p2.y} L ${p2.x} ${p2.y}`; } } else if (dir === 'BT') { if (p1.x < p2.x) { // Source commit is on branch position left of destination commit // so render arrow rightward with colour of destination branch - lineDef = `M ${p1.x} ${p1.y} L ${lineX - radius} ${p1.y} ${arc} ${lineX} ${p1.y - offset} L ${lineX} ${p2.y + radius} ${arc2} ${lineX + offset} ${p2.y} L ${p2.x} ${p2.y}`; + lineDef = `M ${p1.x} ${p1.y} L ${lineX - radius} ${p1.y} ${arc} ${lineX} ${ + p1.y - offset + } L ${lineX} ${p2.y + radius} ${arc2} ${lineX + offset} ${p2.y} L ${p2.x} ${p2.y}`; } else { // Source commit is on branch position right of destination commit // so render arrow leftward with colour of source branch colorClassNum = branchPos.get(commitA.branch)?.index; - lineDef = `M ${p1.x} ${p1.y} L ${lineX + radius} ${p1.y} ${arc2} ${lineX} ${p1.y - offset} L ${lineX} ${p2.y + radius} ${arc} ${lineX - offset} ${p2.y} L ${p2.x} ${p2.y}`; + lineDef = `M ${p1.x} ${p1.y} L ${lineX + radius} ${p1.y} ${arc2} ${lineX} ${ + p1.y - offset + } L ${lineX} ${p2.y + radius} ${arc} ${lineX - offset} ${p2.y} L ${p2.x} ${p2.y}`; } } else { if (p1.y < p2.y) { diff --git a/packages/mermaid/src/diagrams/state/dataFetcher.js b/packages/mermaid/src/diagrams/state/dataFetcher.js index 921544ff2..7fb2f2da1 100644 --- a/packages/mermaid/src/diagrams/state/dataFetcher.js +++ b/packages/mermaid/src/diagrams/state/dataFetcher.js @@ -258,7 +258,9 @@ export const dataFetcher = ( newNode.isGroup = true; newNode.dir = getDir(parsedItem); newNode.shape = parsedItem.type === DIVIDER_TYPE ? SHAPE_DIVIDER : SHAPE_GROUP; - newNode.cssClasses = `${newNode.cssClasses} ${CSS_DIAGRAM_CLUSTER} ${altFlag ? CSS_DIAGRAM_CLUSTER_ALT : ''}`; + newNode.cssClasses = `${newNode.cssClasses} ${CSS_DIAGRAM_CLUSTER} ${ + altFlag ? CSS_DIAGRAM_CLUSTER_ALT : '' + }`; } // This is what will be added to the graph diff --git a/packages/mermaid/src/rendering-util/rendering-elements/clusters.js b/packages/mermaid/src/rendering-util/rendering-elements/clusters.js index a62a92013..80d77beaa 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/clusters.js +++ b/packages/mermaid/src/rendering-util/rendering-elements/clusters.js @@ -264,7 +264,9 @@ const roundedWithTitle = async (parent, node) => { label.attr( 'transform', - `translate(${node.x - bbox.width / 2}, ${y + 1 - (evaluate(siteConfig.flowchart.htmlLabels) ? 0 : 3)})` + `translate(${node.x - bbox.width / 2}, ${ + y + 1 - (evaluate(siteConfig.flowchart.htmlLabels) ? 0 : 3) + })` ); const rectBox = rect.node().getBBox(); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraceLeft.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraceLeft.ts index 32c13e0e9..8fce5b27e 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraceLeft.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraceLeft.ts @@ -95,7 +95,9 @@ export const curlyBraceLeft = async (parent: SVGAElement, node: Node) => { label.attr( 'transform', - `translate(${-w / 2 + radius - (bbox.x - (bbox.left ?? 0))},${-h / 2 + (node.padding ?? 0) / 2 - (bbox.y - (bbox.top ?? 0))})` + `translate(${-w / 2 + radius - (bbox.x - (bbox.left ?? 0))},${ + -h / 2 + (node.padding ?? 0) / 2 - (bbox.y - (bbox.top ?? 0)) + })` ); updateNodeBounds(node, curlyBraceLeftShape); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraceRight.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraceRight.ts index 43f5c65ff..7e42732e2 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraceRight.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraceRight.ts @@ -95,7 +95,9 @@ export const curlyBraceRight = async (parent: SVGAElement, node: Node) => { label.attr( 'transform', - `translate(${-w / 2 + (node.padding ?? 0) / 2 - (bbox.x - (bbox.left ?? 0))},${-h / 2 + (node.padding ?? 0) / 2 - (bbox.y - (bbox.top ?? 0))})` + `translate(${-w / 2 + (node.padding ?? 0) / 2 - (bbox.x - (bbox.left ?? 0))},${ + -h / 2 + (node.padding ?? 0) / 2 - (bbox.y - (bbox.top ?? 0)) + })` ); updateNodeBounds(node, curlyBraceRightShape); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraces.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraces.ts index 23471b830..6f8e7d4a4 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraces.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraces.ts @@ -114,7 +114,9 @@ export const curlyBraces = async (parent: SVGAElement, node: Node) => { label.attr( 'transform', - `translate(${-w / 2 + (node.padding ?? 0) / 2 - (bbox.x - (bbox.left ?? 0))},${-h / 2 + (node.padding ?? 0) / 2 - (bbox.y - (bbox.top ?? 0))})` + `translate(${-w / 2 + (node.padding ?? 0) / 2 - (bbox.x - (bbox.left ?? 0))},${ + -h / 2 + (node.padding ?? 0) / 2 - (bbox.y - (bbox.top ?? 0)) + })` ); updateNodeBounds(node, curlyBracesShape); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/cylinder.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/cylinder.ts index c8a69665a..aad8e2aef 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/cylinder.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/cylinder.ts @@ -90,7 +90,9 @@ export const cylinder = async (parent: SVGAElement, node: Node) => { label.attr( 'transform', - `translate(${-(bbox.width / 2) - (bbox.x - (bbox.left ?? 0))}, ${-(bbox.height / 2) + (node.padding ?? 0) / 1.5 - (bbox.y - (bbox.top ?? 0))})` + `translate(${-(bbox.width / 2) - (bbox.x - (bbox.left ?? 0))}, ${ + -(bbox.height / 2) + (node.padding ?? 0) / 1.5 - (bbox.y - (bbox.top ?? 0)) + })` ); node.intersect = function (point) { diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/dividedRect.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/dividedRect.ts index 0fdc79607..2641dd72e 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/dividedRect.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/dividedRect.ts @@ -52,7 +52,9 @@ export const dividedRectangle = async (parent: SVGAElement, node: Node) => { label.attr( 'transform', - `translate(${x + (node.padding ?? 0) / 2 - (bbox.x - (bbox.left ?? 0))}, ${y + rectOffset + (node.padding ?? 0) / 2 - (bbox.y - (bbox.top ?? 0))})` + `translate(${x + (node.padding ?? 0) / 2 - (bbox.x - (bbox.left ?? 0))}, ${ + y + rectOffset + (node.padding ?? 0) / 2 - (bbox.y - (bbox.top ?? 0)) + })` ); updateNodeBounds(node, polygon); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/flippedTriangle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/flippedTriangle.ts index 9c3ad7f18..1fba7a9ee 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/flippedTriangle.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/flippedTriangle.ts @@ -51,7 +51,9 @@ export const flippedTriangle = async (parent: SVGAElement, node: Node): Promise< label.attr( 'transform', - `translate(${-bbox.width / 2 - (bbox.x - (bbox.left ?? 0))}, ${-h / 2 + (node.padding ?? 0) / 2 + (bbox.y - (bbox.top ?? 0))})` + `translate(${-bbox.width / 2 - (bbox.x - (bbox.left ?? 0))}, ${ + -h / 2 + (node.padding ?? 0) / 2 + (bbox.y - (bbox.top ?? 0)) + })` ); node.intersect = function (point) { diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/labelRect.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/labelRect.ts index 7aff91902..2673b992e 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/labelRect.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/labelRect.ts @@ -29,7 +29,9 @@ export const labelRect = async (parent: SVGElement, node: Node) => { shapeSvg.attr('class', 'label edgeLabel'); label.attr( 'transform', - `translate(${-(bbox.width / 2) - (bbox.x - (bbox.left ?? 0))}, ${-(bbox.height / 2) - (bbox.y - (bbox.top ?? 0))})` + `translate(${-(bbox.width / 2) - (bbox.x - (bbox.left ?? 0))}, ${ + -(bbox.height / 2) - (bbox.y - (bbox.top ?? 0)) + })` ); // if (node.props) { diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/linedCylinder.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/linedCylinder.ts index 819d48faf..9f3ebaeb2 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/linedCylinder.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/linedCylinder.ts @@ -101,7 +101,9 @@ export const linedCylinder = async (parent: SVGAElement, node: Node) => { label.attr( 'transform', - `translate(${-(bbox.width / 2) - (bbox.x - (bbox.left ?? 0))}, ${-(bbox.height / 2) + ry - (bbox.y - (bbox.top ?? 0))})` + `translate(${-(bbox.width / 2) - (bbox.x - (bbox.left ?? 0))}, ${ + -(bbox.height / 2) + ry - (bbox.y - (bbox.top ?? 0)) + })` ); node.intersect = function (point) { diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/linedWaveEdgedRect.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/linedWaveEdgedRect.ts index f3e705834..34ee1a503 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/linedWaveEdgedRect.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/linedWaveEdgedRect.ts @@ -65,7 +65,9 @@ export const linedWaveEdgedRect = async (parent: SVGAElement, node: Node) => { waveEdgeRect.attr('transform', `translate(0,${-waveAmplitude / 2})`); label.attr( 'transform', - `translate(${-w / 2 + (node.padding ?? 0) + ((w / 2) * 0.1) / 2 - (bbox.x - (bbox.left ?? 0))},${-h / 2 + (node.padding ?? 0) - waveAmplitude / 2 - (bbox.y - (bbox.top ?? 0))})` + `translate(${ + -w / 2 + (node.padding ?? 0) + ((w / 2) * 0.1) / 2 - (bbox.x - (bbox.left ?? 0)) + },${-h / 2 + (node.padding ?? 0) - waveAmplitude / 2 - (bbox.y - (bbox.top ?? 0))})` ); updateNodeBounds(node, waveEdgeRect); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/multiRect.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/multiRect.ts index 8df2cf5f1..8e5f2855d 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/multiRect.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/multiRect.ts @@ -67,7 +67,9 @@ export const multiRect = async (parent: SVGAElement, node: Node) => { label.attr( 'transform', - `translate(${-(bbox.width / 2) - rectOffset - (bbox.x - (bbox.left ?? 0))}, ${-(bbox.height / 2) + rectOffset - (bbox.y - (bbox.top ?? 0))})` + `translate(${-(bbox.width / 2) - rectOffset - (bbox.x - (bbox.left ?? 0))}, ${ + -(bbox.height / 2) + rectOffset - (bbox.y - (bbox.top ?? 0)) + })` ); updateNodeBounds(node, multiRect); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/multiWaveEdgedRectangle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/multiWaveEdgedRectangle.ts index 3d7c306ec..6df285d32 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/multiWaveEdgedRectangle.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/multiWaveEdgedRectangle.ts @@ -89,7 +89,9 @@ export const multiWaveEdgedRectangle = async (parent: SVGAElement, node: Node) = label.attr( 'transform', - `translate(${-(bbox.width / 2) - rectOffset - (bbox.x - (bbox.left ?? 0))}, ${-(bbox.height / 2) + rectOffset - waveAmplitude / 2 - (bbox.y - (bbox.top ?? 0))})` + `translate(${-(bbox.width / 2) - rectOffset - (bbox.x - (bbox.left ?? 0))}, ${ + -(bbox.height / 2) + rectOffset - waveAmplitude / 2 - (bbox.y - (bbox.top ?? 0)) + })` ); updateNodeBounds(node, shape); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/rectLeftInvArrow.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/rectLeftInvArrow.ts index b10b608bb..3e8feb3f0 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/rectLeftInvArrow.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/rectLeftInvArrow.ts @@ -54,7 +54,9 @@ export const rect_left_inv_arrow = async ( label.attr( 'transform', - `translate(${-notch / 2 - bbox.width / 2 - (bbox.x - (bbox.left ?? 0))}, ${-(bbox.height / 2) - (bbox.y - (bbox.top ?? 0))})` + `translate(${-notch / 2 - bbox.width / 2 - (bbox.x - (bbox.left ?? 0))}, ${ + -(bbox.height / 2) - (bbox.y - (bbox.top ?? 0)) + })` ); updateNodeBounds(node, polygon); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/shadedProcess.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/shadedProcess.ts index 3a5ffac58..333d5b307 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/shadedProcess.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/shadedProcess.ts @@ -52,7 +52,9 @@ export const shadedProcess = async (parent: SVGAElement, node: Node) => { label.attr( 'transform', - `translate(${-w / 2 + 4 + (node.padding ?? 0) - (bbox.x - (bbox.left ?? 0))},${-h / 2 + (node.padding ?? 0) - (bbox.y - (bbox.top ?? 0))})` + `translate(${-w / 2 + 4 + (node.padding ?? 0) - (bbox.x - (bbox.left ?? 0))},${ + -h / 2 + (node.padding ?? 0) - (bbox.y - (bbox.top ?? 0)) + })` ); updateNodeBounds(node, rect); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/slopedRect.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/slopedRect.ts index cc5cf89a7..3a210359c 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/slopedRect.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/slopedRect.ts @@ -47,7 +47,9 @@ export const slopedRect = async (parent: SVGAElement, node: Node) => { polygon.attr('transform', `translate(0, ${h / 4})`); label.attr( 'transform', - `translate(${-w / 2 + (node.padding ?? 0) - (bbox.x - (bbox.left ?? 0))}, ${-h / 4 + (node.padding ?? 0) - (bbox.y - (bbox.top ?? 0))})` + `translate(${-w / 2 + (node.padding ?? 0) - (bbox.x - (bbox.left ?? 0))}, ${ + -h / 4 + (node.padding ?? 0) - (bbox.y - (bbox.top ?? 0)) + })` ); updateNodeBounds(node, polygon); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/taggedWaveEdgedRectangle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/taggedWaveEdgedRectangle.ts index c1d8d2955..0e56f5481 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/taggedWaveEdgedRectangle.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/taggedWaveEdgedRectangle.ts @@ -87,7 +87,9 @@ export const taggedWaveEdgedRectangle = async (parent: SVGAElement, node: Node) waveEdgeRect.attr('transform', `translate(0,${-waveAmplitude / 2})`); label.attr( 'transform', - `translate(${-w / 2 + (node.padding ?? 0) - (bbox.x - (bbox.left ?? 0))},${-h / 2 + (node.padding ?? 0) - waveAmplitude / 2 - (bbox.y - (bbox.top ?? 0))})` + `translate(${-w / 2 + (node.padding ?? 0) - (bbox.x - (bbox.left ?? 0))},${ + -h / 2 + (node.padding ?? 0) - waveAmplitude / 2 - (bbox.y - (bbox.top ?? 0)) + })` ); updateNodeBounds(node, waveEdgeRect); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/tiltedCylinder.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/tiltedCylinder.ts index f94073c32..75cf7493e 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/tiltedCylinder.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/tiltedCylinder.ts @@ -102,7 +102,9 @@ export const tiltedCylinder = async (parent: SVGAElement, node: Node) => { label.attr( 'transform', - `translate(${-(bbox.width / 2) - rx - (bbox.x - (bbox.left ?? 0))}, ${-(bbox.height / 2) - (bbox.y - (bbox.top ?? 0))})` + `translate(${-(bbox.width / 2) - rx - (bbox.x - (bbox.left ?? 0))}, ${ + -(bbox.height / 2) - (bbox.y - (bbox.top ?? 0)) + })` ); updateNodeBounds(node, cylinder); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/triangle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/triangle.ts index 7eb019f7c..e38e46335 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/triangle.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/triangle.ts @@ -54,7 +54,10 @@ export const triangle = async (parent: SVGAElement, node: Node): Promise { waveEdgeRect.attr('transform', `translate(0,${-waveAmplitude / 2})`); label.attr( 'transform', - `translate(${-w / 2 + (node.padding ?? 0) - (bbox.x - (bbox.left ?? 0))},${-h / 2 + (node.padding ?? 0) - waveAmplitude - (bbox.y - (bbox.top ?? 0))})` + `translate(${-w / 2 + (node.padding ?? 0) - (bbox.x - (bbox.left ?? 0))},${ + -h / 2 + (node.padding ?? 0) - waveAmplitude - (bbox.y - (bbox.top ?? 0)) + })` ); updateNodeBounds(node, waveEdgeRect); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/windowPane.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/windowPane.ts index 2dd53f4a8..a321f7b61 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/windowPane.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/windowPane.ts @@ -25,7 +25,9 @@ export const windowPane = async (parent: SVGAElement, node: Node) => { { x: x + w, y: y - rectOffset }, ]; - const path = `M${x - rectOffset},${y - rectOffset} L${x + w},${y - rectOffset} L${x + w},${y + h} L${x - rectOffset},${y + h} L${x - rectOffset},${y - rectOffset} + const path = `M${x - rectOffset},${y - rectOffset} L${x + w},${y - rectOffset} L${x + w},${ + y + h + } L${x - rectOffset},${y + h} L${x - rectOffset},${y - rectOffset} M${x - rectOffset},${y} L${x + w},${y} M${x},${y - rectOffset} L${x},${y + h}`; @@ -51,7 +53,9 @@ export const windowPane = async (parent: SVGAElement, node: Node) => { label.attr( 'transform', - `translate(${-(bbox.width / 2) + rectOffset / 2 - (bbox.x - (bbox.left ?? 0))}, ${-(bbox.height / 2) + rectOffset / 2 - (bbox.y - (bbox.top ?? 0))})` + `translate(${-(bbox.width / 2) + rectOffset / 2 - (bbox.x - (bbox.left ?? 0))}, ${ + -(bbox.height / 2) + rectOffset / 2 - (bbox.y - (bbox.top ?? 0)) + })` ); updateNodeBounds(node, windowPane); From 0bc07f356d2a84cf45c972525ad388278750734b Mon Sep 17 00:00:00 2001 From: Bryan Date: Fri, 18 Oct 2024 20:54:03 +0100 Subject: [PATCH 019/266] add import for assert --- packages/mermaid/src/diagrams/packet/parser.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/mermaid/src/diagrams/packet/parser.ts b/packages/mermaid/src/diagrams/packet/parser.ts index eb58916f5..905830d5d 100644 --- a/packages/mermaid/src/diagrams/packet/parser.ts +++ b/packages/mermaid/src/diagrams/packet/parser.ts @@ -5,6 +5,7 @@ import { log } from '../../logger.js'; import { populateCommonDb } from '../common/populateCommonDb.js'; import { db } from './db.js'; import type { PacketBlock, PacketWord } from './types.js'; +import assert from 'node:assert'; const maxPacketSize = 10_000; From 73653c348d4254fdeb3873613c17be1a975ca05c Mon Sep 17 00:00:00 2001 From: Bryan Date: Fri, 18 Oct 2024 21:12:55 +0100 Subject: [PATCH 020/266] remove import for assert --- packages/mermaid/src/diagrams/packet/parser.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/mermaid/src/diagrams/packet/parser.ts b/packages/mermaid/src/diagrams/packet/parser.ts index 905830d5d..eb58916f5 100644 --- a/packages/mermaid/src/diagrams/packet/parser.ts +++ b/packages/mermaid/src/diagrams/packet/parser.ts @@ -5,7 +5,6 @@ import { log } from '../../logger.js'; import { populateCommonDb } from '../common/populateCommonDb.js'; import { db } from './db.js'; import type { PacketBlock, PacketWord } from './types.js'; -import assert from 'node:assert'; const maxPacketSize = 10_000; From 4cd3f0a8bb5871c1d27796f1b539c437574dfd58 Mon Sep 17 00:00:00 2001 From: Bryan Date: Fri, 18 Oct 2024 21:21:15 +0100 Subject: [PATCH 021/266] try implementing assert as if->throw --- packages/mermaid/src/diagrams/packet/parser.ts | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/mermaid/src/diagrams/packet/parser.ts b/packages/mermaid/src/diagrams/packet/parser.ts index eb58916f5..71a3b1c4c 100644 --- a/packages/mermaid/src/diagrams/packet/parser.ts +++ b/packages/mermaid/src/diagrams/packet/parser.ts @@ -63,8 +63,12 @@ const getNextFittingBlock = ( row: number, bitsPerRow: number ): [Required, PacketBlock | undefined] => { - assert(block.start !== undefined, 'start should have been set during first phase'); - assert(block.end !== undefined, 'end should have been set during first phase'); + if (block.start === undefined) { + throw new Error('start should have been set during first phase'); + } + if (block.end === undefined) { + throw new Error('end should have been set during first phase'); + } if (block.start > block.end) { throw new Error(`Block start ${block.start} is greater than block end ${block.end}.`); From 5fca47c5ecce15737ecae874307b52066615d17d Mon Sep 17 00:00:00 2001 From: Bryan Date: Fri, 18 Oct 2024 21:30:10 +0100 Subject: [PATCH 022/266] Revert "run prettier" This reverts commit 6d33d93b15f3362c2113b7d8a980b26f8c7d60ad. --- .esbuild/server.ts | 4 +--- .../integration/rendering/iconShape.spec.ts | 6 +----- .../integration/rendering/imageShape.spec.ts | 4 +--- .../src/diagrams/architecture/svgDraw.ts | 18 +++--------------- packages/mermaid/src/diagrams/block/layout.ts | 4 +--- .../src/diagrams/git/gitGraphRenderer.ts | 18 ++++-------------- .../mermaid/src/diagrams/state/dataFetcher.js | 4 +--- .../rendering-elements/clusters.js | 4 +--- .../shapes/curlyBraceLeft.ts | 4 +--- .../shapes/curlyBraceRight.ts | 4 +--- .../rendering-elements/shapes/curlyBraces.ts | 4 +--- .../rendering-elements/shapes/cylinder.ts | 4 +--- .../rendering-elements/shapes/dividedRect.ts | 4 +--- .../shapes/flippedTriangle.ts | 4 +--- .../rendering-elements/shapes/labelRect.ts | 4 +--- .../rendering-elements/shapes/linedCylinder.ts | 4 +--- .../shapes/linedWaveEdgedRect.ts | 4 +--- .../rendering-elements/shapes/multiRect.ts | 4 +--- .../shapes/multiWaveEdgedRectangle.ts | 4 +--- .../shapes/rectLeftInvArrow.ts | 4 +--- .../rendering-elements/shapes/shadedProcess.ts | 4 +--- .../rendering-elements/shapes/slopedRect.ts | 4 +--- .../shapes/taggedWaveEdgedRectangle.ts | 4 +--- .../shapes/tiltedCylinder.ts | 4 +--- .../rendering-elements/shapes/triangle.ts | 5 +---- .../shapes/waveEdgedRectangle.ts | 4 +--- .../rendering-elements/shapes/windowPane.ts | 8 ++------ 27 files changed, 33 insertions(+), 110 deletions(-) diff --git a/.esbuild/server.ts b/.esbuild/server.ts index 5bf214be9..6e1bcb460 100644 --- a/.esbuild/server.ts +++ b/.esbuild/server.ts @@ -36,9 +36,7 @@ const rebuildAll = async () => { console.time(timeLabel); await Promise.all( contexts.map(async ({ config, context }) => { - const buildVariant = `Rebuild ${buildNumber} Time (${Object.keys(config.entryPoints!)[0]} ${ - config.format - })`; + const buildVariant = `Rebuild ${buildNumber} Time (${Object.keys(config.entryPoints!)[0]} ${config.format})`; console.time(buildVariant); await context.rebuild(); console.timeEnd(buildVariant); diff --git a/cypress/integration/rendering/iconShape.spec.ts b/cypress/integration/rendering/iconShape.spec.ts index 8f4b53076..4c12c3fa3 100644 --- a/cypress/integration/rendering/iconShape.spec.ts +++ b/cypress/integration/rendering/iconShape.spec.ts @@ -14,11 +14,7 @@ looks.forEach((look) => { directions.forEach((direction) => { forms.forEach((form) => { labelPos.forEach((pos) => { - describe(`Test iconShape in ${ - form ? `${form} form,` : '' - } ${look} look and dir ${direction} with label position ${ - pos ? pos : 'not defined' - }`, () => { + describe(`Test iconShape in ${form ? `${form} form,` : ''} ${look} look and dir ${direction} with label position ${pos ? pos : 'not defined'}`, () => { it(`without label`, () => { let flowchartCode = `flowchart ${direction}\n`; flowchartCode += ` nA --> nAA@{ icon: 'fa:bell'`; diff --git a/cypress/integration/rendering/imageShape.spec.ts b/cypress/integration/rendering/imageShape.spec.ts index bcbdba102..d2e267149 100644 --- a/cypress/integration/rendering/imageShape.spec.ts +++ b/cypress/integration/rendering/imageShape.spec.ts @@ -12,9 +12,7 @@ const labelPos = [undefined, 't', 'b'] as const; looks.forEach((look) => { directions.forEach((direction) => { labelPos.forEach((pos) => { - describe(`Test imageShape in ${look} look and dir ${direction} with label position ${ - pos ? pos : 'not defined' - }`, () => { + describe(`Test imageShape in ${look} look and dir ${direction} with label position ${pos ? pos : 'not defined'}`, () => { it(`without label`, () => { let flowchartCode = `flowchart ${direction}\n`; flowchartCode += ` nA --> A@{ img: 'https://cdn.pixabay.com/photo/2020/02/22/18/49/paper-4871356_1280.jpg', w: '100', h: '100' }\n`; diff --git a/packages/mermaid/src/diagrams/architecture/svgDraw.ts b/packages/mermaid/src/diagrams/architecture/svgDraw.ts index 60970a186..b10a451fe 100644 --- a/packages/mermaid/src/diagrams/architecture/svgDraw.ts +++ b/packages/mermaid/src/diagrams/architecture/svgDraw.ts @@ -212,11 +212,7 @@ export const drawGroups = async function (groupsEl: D3Element, cy: cytoscape.Cor if (data.icon) { const bkgElem = groupLabelContainer.append('g'); bkgElem.html( - `${await getIconSVG(data.icon, { - height: groupIconSize, - width: groupIconSize, - fallbackPrefix: architectureIcons.prefix, - })}` + `${await getIconSVG(data.icon, { height: groupIconSize, width: groupIconSize, fallbackPrefix: architectureIcons.prefix })}` ); bkgElem.attr( 'transform', @@ -301,19 +297,11 @@ export const drawServices = async function ( // throw new Error(`Invalid SVG Icon name: "${service.icon}"`); // } bkgElem.html( - `${await getIconSVG(service.icon, { - height: iconSize, - width: iconSize, - fallbackPrefix: architectureIcons.prefix, - })}` + `${await getIconSVG(service.icon, { height: iconSize, width: iconSize, fallbackPrefix: architectureIcons.prefix })}` ); } else if (service.iconText) { bkgElem.html( - `${await getIconSVG('blank', { - height: iconSize, - width: iconSize, - fallbackPrefix: architectureIcons.prefix, - })}` + `${await getIconSVG('blank', { height: iconSize, width: iconSize, fallbackPrefix: architectureIcons.prefix })}` ); const textElemContainer = bkgElem.append('g'); const fo = textElemContainer diff --git a/packages/mermaid/src/diagrams/block/layout.ts b/packages/mermaid/src/diagrams/block/layout.ts index 5081a5373..7f44a5f19 100644 --- a/packages/mermaid/src/diagrams/block/layout.ts +++ b/packages/mermaid/src/diagrams/block/layout.ts @@ -105,9 +105,7 @@ function setBlockSizes(block: Block, db: BlockDB, siblingWidth = 0, siblingHeigh for (const child of block.children) { if (child.size) { log.debug( - `abc95 Setting size of children of ${block.id} id=${ - child.id - } ${maxWidth} ${maxHeight} ${JSON.stringify(child.size)}` + `abc95 Setting size of children of ${block.id} id=${child.id} ${maxWidth} ${maxHeight} ${JSON.stringify(child.size)}` ); child.size.width = maxWidth * (child.widthInColumns ?? 1) + padding * ((child.widthInColumns ?? 1) - 1); diff --git a/packages/mermaid/src/diagrams/git/gitGraphRenderer.ts b/packages/mermaid/src/diagrams/git/gitGraphRenderer.ts index dc92cfff6..39a64a623 100644 --- a/packages/mermaid/src/diagrams/git/gitGraphRenderer.ts +++ b/packages/mermaid/src/diagrams/git/gitGraphRenderer.ts @@ -276,11 +276,7 @@ const drawCommitBullet = ( cross .attr( 'd', - `M ${commitPosition.x - 5},${commitPosition.y - 5}L${commitPosition.x + 5},${ - commitPosition.y + 5 - }M${commitPosition.x - 5},${commitPosition.y + 5}L${commitPosition.x + 5},${ - commitPosition.y - 5 - }` + `M ${commitPosition.x - 5},${commitPosition.y - 5}L${commitPosition.x + 5},${commitPosition.y + 5}M${commitPosition.x - 5},${commitPosition.y + 5}L${commitPosition.x + 5},${commitPosition.y - 5}` ) .attr('class', `commit ${typeClass} ${commit.id} commit${branchIndex % THEME_COLOR_LIMIT}`); } @@ -656,27 +652,21 @@ const drawArrow = ( colorClassNum = branchPos.get(commitA.branch)?.index; - lineDef = `M ${p1.x} ${p1.y} L ${lineX + radius} ${p1.y} ${arc} ${lineX} ${ - p1.y + offset - } L ${lineX} ${p2.y - radius} ${arc2} ${lineX - offset} ${p2.y} L ${p2.x} ${p2.y}`; + lineDef = `M ${p1.x} ${p1.y} L ${lineX + radius} ${p1.y} ${arc} ${lineX} ${p1.y + offset} L ${lineX} ${p2.y - radius} ${arc2} ${lineX - offset} ${p2.y} L ${p2.x} ${p2.y}`; } } else if (dir === 'BT') { if (p1.x < p2.x) { // Source commit is on branch position left of destination commit // so render arrow rightward with colour of destination branch - lineDef = `M ${p1.x} ${p1.y} L ${lineX - radius} ${p1.y} ${arc} ${lineX} ${ - p1.y - offset - } L ${lineX} ${p2.y + radius} ${arc2} ${lineX + offset} ${p2.y} L ${p2.x} ${p2.y}`; + lineDef = `M ${p1.x} ${p1.y} L ${lineX - radius} ${p1.y} ${arc} ${lineX} ${p1.y - offset} L ${lineX} ${p2.y + radius} ${arc2} ${lineX + offset} ${p2.y} L ${p2.x} ${p2.y}`; } else { // Source commit is on branch position right of destination commit // so render arrow leftward with colour of source branch colorClassNum = branchPos.get(commitA.branch)?.index; - lineDef = `M ${p1.x} ${p1.y} L ${lineX + radius} ${p1.y} ${arc2} ${lineX} ${ - p1.y - offset - } L ${lineX} ${p2.y + radius} ${arc} ${lineX - offset} ${p2.y} L ${p2.x} ${p2.y}`; + lineDef = `M ${p1.x} ${p1.y} L ${lineX + radius} ${p1.y} ${arc2} ${lineX} ${p1.y - offset} L ${lineX} ${p2.y + radius} ${arc} ${lineX - offset} ${p2.y} L ${p2.x} ${p2.y}`; } } else { if (p1.y < p2.y) { diff --git a/packages/mermaid/src/diagrams/state/dataFetcher.js b/packages/mermaid/src/diagrams/state/dataFetcher.js index 7fb2f2da1..921544ff2 100644 --- a/packages/mermaid/src/diagrams/state/dataFetcher.js +++ b/packages/mermaid/src/diagrams/state/dataFetcher.js @@ -258,9 +258,7 @@ export const dataFetcher = ( newNode.isGroup = true; newNode.dir = getDir(parsedItem); newNode.shape = parsedItem.type === DIVIDER_TYPE ? SHAPE_DIVIDER : SHAPE_GROUP; - newNode.cssClasses = `${newNode.cssClasses} ${CSS_DIAGRAM_CLUSTER} ${ - altFlag ? CSS_DIAGRAM_CLUSTER_ALT : '' - }`; + newNode.cssClasses = `${newNode.cssClasses} ${CSS_DIAGRAM_CLUSTER} ${altFlag ? CSS_DIAGRAM_CLUSTER_ALT : ''}`; } // This is what will be added to the graph diff --git a/packages/mermaid/src/rendering-util/rendering-elements/clusters.js b/packages/mermaid/src/rendering-util/rendering-elements/clusters.js index 80d77beaa..a62a92013 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/clusters.js +++ b/packages/mermaid/src/rendering-util/rendering-elements/clusters.js @@ -264,9 +264,7 @@ const roundedWithTitle = async (parent, node) => { label.attr( 'transform', - `translate(${node.x - bbox.width / 2}, ${ - y + 1 - (evaluate(siteConfig.flowchart.htmlLabels) ? 0 : 3) - })` + `translate(${node.x - bbox.width / 2}, ${y + 1 - (evaluate(siteConfig.flowchart.htmlLabels) ? 0 : 3)})` ); const rectBox = rect.node().getBBox(); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraceLeft.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraceLeft.ts index 8fce5b27e..32c13e0e9 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraceLeft.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraceLeft.ts @@ -95,9 +95,7 @@ export const curlyBraceLeft = async (parent: SVGAElement, node: Node) => { label.attr( 'transform', - `translate(${-w / 2 + radius - (bbox.x - (bbox.left ?? 0))},${ - -h / 2 + (node.padding ?? 0) / 2 - (bbox.y - (bbox.top ?? 0)) - })` + `translate(${-w / 2 + radius - (bbox.x - (bbox.left ?? 0))},${-h / 2 + (node.padding ?? 0) / 2 - (bbox.y - (bbox.top ?? 0))})` ); updateNodeBounds(node, curlyBraceLeftShape); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraceRight.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraceRight.ts index 7e42732e2..43f5c65ff 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraceRight.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraceRight.ts @@ -95,9 +95,7 @@ export const curlyBraceRight = async (parent: SVGAElement, node: Node) => { label.attr( 'transform', - `translate(${-w / 2 + (node.padding ?? 0) / 2 - (bbox.x - (bbox.left ?? 0))},${ - -h / 2 + (node.padding ?? 0) / 2 - (bbox.y - (bbox.top ?? 0)) - })` + `translate(${-w / 2 + (node.padding ?? 0) / 2 - (bbox.x - (bbox.left ?? 0))},${-h / 2 + (node.padding ?? 0) / 2 - (bbox.y - (bbox.top ?? 0))})` ); updateNodeBounds(node, curlyBraceRightShape); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraces.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraces.ts index 6f8e7d4a4..23471b830 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraces.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraces.ts @@ -114,9 +114,7 @@ export const curlyBraces = async (parent: SVGAElement, node: Node) => { label.attr( 'transform', - `translate(${-w / 2 + (node.padding ?? 0) / 2 - (bbox.x - (bbox.left ?? 0))},${ - -h / 2 + (node.padding ?? 0) / 2 - (bbox.y - (bbox.top ?? 0)) - })` + `translate(${-w / 2 + (node.padding ?? 0) / 2 - (bbox.x - (bbox.left ?? 0))},${-h / 2 + (node.padding ?? 0) / 2 - (bbox.y - (bbox.top ?? 0))})` ); updateNodeBounds(node, curlyBracesShape); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/cylinder.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/cylinder.ts index aad8e2aef..c8a69665a 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/cylinder.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/cylinder.ts @@ -90,9 +90,7 @@ export const cylinder = async (parent: SVGAElement, node: Node) => { label.attr( 'transform', - `translate(${-(bbox.width / 2) - (bbox.x - (bbox.left ?? 0))}, ${ - -(bbox.height / 2) + (node.padding ?? 0) / 1.5 - (bbox.y - (bbox.top ?? 0)) - })` + `translate(${-(bbox.width / 2) - (bbox.x - (bbox.left ?? 0))}, ${-(bbox.height / 2) + (node.padding ?? 0) / 1.5 - (bbox.y - (bbox.top ?? 0))})` ); node.intersect = function (point) { diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/dividedRect.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/dividedRect.ts index 2641dd72e..0fdc79607 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/dividedRect.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/dividedRect.ts @@ -52,9 +52,7 @@ export const dividedRectangle = async (parent: SVGAElement, node: Node) => { label.attr( 'transform', - `translate(${x + (node.padding ?? 0) / 2 - (bbox.x - (bbox.left ?? 0))}, ${ - y + rectOffset + (node.padding ?? 0) / 2 - (bbox.y - (bbox.top ?? 0)) - })` + `translate(${x + (node.padding ?? 0) / 2 - (bbox.x - (bbox.left ?? 0))}, ${y + rectOffset + (node.padding ?? 0) / 2 - (bbox.y - (bbox.top ?? 0))})` ); updateNodeBounds(node, polygon); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/flippedTriangle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/flippedTriangle.ts index 1fba7a9ee..9c3ad7f18 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/flippedTriangle.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/flippedTriangle.ts @@ -51,9 +51,7 @@ export const flippedTriangle = async (parent: SVGAElement, node: Node): Promise< label.attr( 'transform', - `translate(${-bbox.width / 2 - (bbox.x - (bbox.left ?? 0))}, ${ - -h / 2 + (node.padding ?? 0) / 2 + (bbox.y - (bbox.top ?? 0)) - })` + `translate(${-bbox.width / 2 - (bbox.x - (bbox.left ?? 0))}, ${-h / 2 + (node.padding ?? 0) / 2 + (bbox.y - (bbox.top ?? 0))})` ); node.intersect = function (point) { diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/labelRect.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/labelRect.ts index 2673b992e..7aff91902 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/labelRect.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/labelRect.ts @@ -29,9 +29,7 @@ export const labelRect = async (parent: SVGElement, node: Node) => { shapeSvg.attr('class', 'label edgeLabel'); label.attr( 'transform', - `translate(${-(bbox.width / 2) - (bbox.x - (bbox.left ?? 0))}, ${ - -(bbox.height / 2) - (bbox.y - (bbox.top ?? 0)) - })` + `translate(${-(bbox.width / 2) - (bbox.x - (bbox.left ?? 0))}, ${-(bbox.height / 2) - (bbox.y - (bbox.top ?? 0))})` ); // if (node.props) { diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/linedCylinder.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/linedCylinder.ts index 9f3ebaeb2..819d48faf 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/linedCylinder.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/linedCylinder.ts @@ -101,9 +101,7 @@ export const linedCylinder = async (parent: SVGAElement, node: Node) => { label.attr( 'transform', - `translate(${-(bbox.width / 2) - (bbox.x - (bbox.left ?? 0))}, ${ - -(bbox.height / 2) + ry - (bbox.y - (bbox.top ?? 0)) - })` + `translate(${-(bbox.width / 2) - (bbox.x - (bbox.left ?? 0))}, ${-(bbox.height / 2) + ry - (bbox.y - (bbox.top ?? 0))})` ); node.intersect = function (point) { diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/linedWaveEdgedRect.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/linedWaveEdgedRect.ts index 34ee1a503..f3e705834 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/linedWaveEdgedRect.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/linedWaveEdgedRect.ts @@ -65,9 +65,7 @@ export const linedWaveEdgedRect = async (parent: SVGAElement, node: Node) => { waveEdgeRect.attr('transform', `translate(0,${-waveAmplitude / 2})`); label.attr( 'transform', - `translate(${ - -w / 2 + (node.padding ?? 0) + ((w / 2) * 0.1) / 2 - (bbox.x - (bbox.left ?? 0)) - },${-h / 2 + (node.padding ?? 0) - waveAmplitude / 2 - (bbox.y - (bbox.top ?? 0))})` + `translate(${-w / 2 + (node.padding ?? 0) + ((w / 2) * 0.1) / 2 - (bbox.x - (bbox.left ?? 0))},${-h / 2 + (node.padding ?? 0) - waveAmplitude / 2 - (bbox.y - (bbox.top ?? 0))})` ); updateNodeBounds(node, waveEdgeRect); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/multiRect.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/multiRect.ts index 8e5f2855d..8df2cf5f1 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/multiRect.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/multiRect.ts @@ -67,9 +67,7 @@ export const multiRect = async (parent: SVGAElement, node: Node) => { label.attr( 'transform', - `translate(${-(bbox.width / 2) - rectOffset - (bbox.x - (bbox.left ?? 0))}, ${ - -(bbox.height / 2) + rectOffset - (bbox.y - (bbox.top ?? 0)) - })` + `translate(${-(bbox.width / 2) - rectOffset - (bbox.x - (bbox.left ?? 0))}, ${-(bbox.height / 2) + rectOffset - (bbox.y - (bbox.top ?? 0))})` ); updateNodeBounds(node, multiRect); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/multiWaveEdgedRectangle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/multiWaveEdgedRectangle.ts index 6df285d32..3d7c306ec 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/multiWaveEdgedRectangle.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/multiWaveEdgedRectangle.ts @@ -89,9 +89,7 @@ export const multiWaveEdgedRectangle = async (parent: SVGAElement, node: Node) = label.attr( 'transform', - `translate(${-(bbox.width / 2) - rectOffset - (bbox.x - (bbox.left ?? 0))}, ${ - -(bbox.height / 2) + rectOffset - waveAmplitude / 2 - (bbox.y - (bbox.top ?? 0)) - })` + `translate(${-(bbox.width / 2) - rectOffset - (bbox.x - (bbox.left ?? 0))}, ${-(bbox.height / 2) + rectOffset - waveAmplitude / 2 - (bbox.y - (bbox.top ?? 0))})` ); updateNodeBounds(node, shape); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/rectLeftInvArrow.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/rectLeftInvArrow.ts index 3e8feb3f0..b10b608bb 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/rectLeftInvArrow.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/rectLeftInvArrow.ts @@ -54,9 +54,7 @@ export const rect_left_inv_arrow = async ( label.attr( 'transform', - `translate(${-notch / 2 - bbox.width / 2 - (bbox.x - (bbox.left ?? 0))}, ${ - -(bbox.height / 2) - (bbox.y - (bbox.top ?? 0)) - })` + `translate(${-notch / 2 - bbox.width / 2 - (bbox.x - (bbox.left ?? 0))}, ${-(bbox.height / 2) - (bbox.y - (bbox.top ?? 0))})` ); updateNodeBounds(node, polygon); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/shadedProcess.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/shadedProcess.ts index 333d5b307..3a5ffac58 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/shadedProcess.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/shadedProcess.ts @@ -52,9 +52,7 @@ export const shadedProcess = async (parent: SVGAElement, node: Node) => { label.attr( 'transform', - `translate(${-w / 2 + 4 + (node.padding ?? 0) - (bbox.x - (bbox.left ?? 0))},${ - -h / 2 + (node.padding ?? 0) - (bbox.y - (bbox.top ?? 0)) - })` + `translate(${-w / 2 + 4 + (node.padding ?? 0) - (bbox.x - (bbox.left ?? 0))},${-h / 2 + (node.padding ?? 0) - (bbox.y - (bbox.top ?? 0))})` ); updateNodeBounds(node, rect); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/slopedRect.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/slopedRect.ts index 3a210359c..cc5cf89a7 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/slopedRect.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/slopedRect.ts @@ -47,9 +47,7 @@ export const slopedRect = async (parent: SVGAElement, node: Node) => { polygon.attr('transform', `translate(0, ${h / 4})`); label.attr( 'transform', - `translate(${-w / 2 + (node.padding ?? 0) - (bbox.x - (bbox.left ?? 0))}, ${ - -h / 4 + (node.padding ?? 0) - (bbox.y - (bbox.top ?? 0)) - })` + `translate(${-w / 2 + (node.padding ?? 0) - (bbox.x - (bbox.left ?? 0))}, ${-h / 4 + (node.padding ?? 0) - (bbox.y - (bbox.top ?? 0))})` ); updateNodeBounds(node, polygon); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/taggedWaveEdgedRectangle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/taggedWaveEdgedRectangle.ts index 0e56f5481..c1d8d2955 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/taggedWaveEdgedRectangle.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/taggedWaveEdgedRectangle.ts @@ -87,9 +87,7 @@ export const taggedWaveEdgedRectangle = async (parent: SVGAElement, node: Node) waveEdgeRect.attr('transform', `translate(0,${-waveAmplitude / 2})`); label.attr( 'transform', - `translate(${-w / 2 + (node.padding ?? 0) - (bbox.x - (bbox.left ?? 0))},${ - -h / 2 + (node.padding ?? 0) - waveAmplitude / 2 - (bbox.y - (bbox.top ?? 0)) - })` + `translate(${-w / 2 + (node.padding ?? 0) - (bbox.x - (bbox.left ?? 0))},${-h / 2 + (node.padding ?? 0) - waveAmplitude / 2 - (bbox.y - (bbox.top ?? 0))})` ); updateNodeBounds(node, waveEdgeRect); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/tiltedCylinder.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/tiltedCylinder.ts index 75cf7493e..f94073c32 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/tiltedCylinder.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/tiltedCylinder.ts @@ -102,9 +102,7 @@ export const tiltedCylinder = async (parent: SVGAElement, node: Node) => { label.attr( 'transform', - `translate(${-(bbox.width / 2) - rx - (bbox.x - (bbox.left ?? 0))}, ${ - -(bbox.height / 2) - (bbox.y - (bbox.top ?? 0)) - })` + `translate(${-(bbox.width / 2) - rx - (bbox.x - (bbox.left ?? 0))}, ${-(bbox.height / 2) - (bbox.y - (bbox.top ?? 0))})` ); updateNodeBounds(node, cylinder); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/triangle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/triangle.ts index e38e46335..7eb019f7c 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/triangle.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/triangle.ts @@ -54,10 +54,7 @@ export const triangle = async (parent: SVGAElement, node: Node): Promise { waveEdgeRect.attr('transform', `translate(0,${-waveAmplitude / 2})`); label.attr( 'transform', - `translate(${-w / 2 + (node.padding ?? 0) - (bbox.x - (bbox.left ?? 0))},${ - -h / 2 + (node.padding ?? 0) - waveAmplitude - (bbox.y - (bbox.top ?? 0)) - })` + `translate(${-w / 2 + (node.padding ?? 0) - (bbox.x - (bbox.left ?? 0))},${-h / 2 + (node.padding ?? 0) - waveAmplitude - (bbox.y - (bbox.top ?? 0))})` ); updateNodeBounds(node, waveEdgeRect); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/windowPane.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/windowPane.ts index a321f7b61..2dd53f4a8 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/windowPane.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/windowPane.ts @@ -25,9 +25,7 @@ export const windowPane = async (parent: SVGAElement, node: Node) => { { x: x + w, y: y - rectOffset }, ]; - const path = `M${x - rectOffset},${y - rectOffset} L${x + w},${y - rectOffset} L${x + w},${ - y + h - } L${x - rectOffset},${y + h} L${x - rectOffset},${y - rectOffset} + const path = `M${x - rectOffset},${y - rectOffset} L${x + w},${y - rectOffset} L${x + w},${y + h} L${x - rectOffset},${y + h} L${x - rectOffset},${y - rectOffset} M${x - rectOffset},${y} L${x + w},${y} M${x},${y - rectOffset} L${x},${y + h}`; @@ -53,9 +51,7 @@ export const windowPane = async (parent: SVGAElement, node: Node) => { label.attr( 'transform', - `translate(${-(bbox.width / 2) + rectOffset / 2 - (bbox.x - (bbox.left ?? 0))}, ${ - -(bbox.height / 2) + rectOffset / 2 - (bbox.y - (bbox.top ?? 0)) - })` + `translate(${-(bbox.width / 2) + rectOffset / 2 - (bbox.x - (bbox.left ?? 0))}, ${-(bbox.height / 2) + rectOffset / 2 - (bbox.y - (bbox.top ?? 0))})` ); updateNodeBounds(node, windowPane); From c828867852f332829d49c942a7df395eb9b98b18 Mon Sep 17 00:00:00 2001 From: Bryan Date: Sat, 19 Oct 2024 17:50:00 +0100 Subject: [PATCH 023/266] add documentation --- docs/syntax/packet.md | 40 ++++++++-------------- packages/mermaid/src/docs/syntax/packet.md | 16 +++++++-- 2 files changed, 28 insertions(+), 28 deletions(-) diff --git a/docs/syntax/packet.md b/docs/syntax/packet.md index 5eab81910..5214f6c00 100644 --- a/docs/syntax/packet.md +++ b/docs/syntax/packet.md @@ -23,6 +23,17 @@ start-end: "Block name" %% Multi-bit blocks ... More Fields ... ``` +### Bits Syntax (v\+) + +Using start and end bit counts can be difficult, especially when modifying a design. For this we add a bit count field, which starts from the end of the previous field automagically. Use `bit` or `bits` interchangeably to set the number of bits, thus: + +````md +packet-beta +1bit: "Block name" %% Single-bit block +8bits: "Block name" %% 8-bit block +9-15: "Manually set start and end, it's fine to mix and match" +... More Fields ... + ## Examples ```mermaid-example @@ -30,32 +41,8 @@ start-end: "Block name" %% Multi-bit blocks title: "TCP Packet" --- packet-beta -0-15: "Source Port" -16-31: "Destination Port" -32-63: "Sequence Number" -64-95: "Acknowledgment Number" -96-99: "Data Offset" -100-105: "Reserved" -106: "URG" -107: "ACK" -108: "PSH" -109: "RST" -110: "SYN" -111: "FIN" -112-127: "Window" -128-143: "Checksum" -144-159: "Urgent Pointer" -160-191: "(Options and Padding)" -192-255: "Data (variable length)" -``` - -```mermaid ---- -title: "TCP Packet" ---- -packet-beta -0-15: "Source Port" -16-31: "Destination Port" +16bits: "Source Port" +16bits: "Destination Port" 32-63: "Sequence Number" 64-95: "Acknowledgment Number" 96-99: "Data Offset" @@ -72,6 +59,7 @@ packet-beta 160-191: "(Options and Padding)" 192-255: "Data (variable length)" ``` +```` ```mermaid-example packet-beta diff --git a/packages/mermaid/src/docs/syntax/packet.md b/packages/mermaid/src/docs/syntax/packet.md index c7b6cb71b..5a2992654 100644 --- a/packages/mermaid/src/docs/syntax/packet.md +++ b/packages/mermaid/src/docs/syntax/packet.md @@ -17,6 +17,17 @@ start-end: "Block name" %% Multi-bit blocks ... More Fields ... ``` +### Bits Syntax (v+) + +Using start and end bit counts can be difficult, especially when modifying a design. For this we add a bit count field, which starts from the end of the previous field automagically. Use `bit` or `bits` interchangeably to set the number of bits, thus: + +````md +packet-beta +1bit: "Block name" %% Single-bit block +8bits: "Block name" %% 8-bit block +9-15: "Manually set start and end, it's fine to mix and match" +... More Fields ... + ## Examples ```mermaid-example @@ -24,8 +35,8 @@ start-end: "Block name" %% Multi-bit blocks title: "TCP Packet" --- packet-beta -0-15: "Source Port" -16-31: "Destination Port" +16bits: "Source Port" +16bits: "Destination Port" 32-63: "Sequence Number" 64-95: "Acknowledgment Number" 96-99: "Data Offset" @@ -42,6 +53,7 @@ packet-beta 160-191: "(Options and Padding)" 192-255: "Data (variable length)" ``` +```` ```mermaid-example packet-beta From 11f7f426cb45515ae8b1b137c7596ca09f444a49 Mon Sep 17 00:00:00 2001 From: Steph <35910788+huynhicode@users.noreply.github.com> Date: Fri, 28 Feb 2025 08:05:42 -0800 Subject: [PATCH 024/266] verbiage updates --- .../setup/interfaces/mermaid.ParseOptions.md | 22 ------------------- .../mermaid/src/docs/.vitepress/config.ts | 2 +- packages/mermaid/src/docs/index.md | 16 +++++++------- 3 files changed, 9 insertions(+), 31 deletions(-) delete mode 100644 docs/config/setup/interfaces/mermaid.ParseOptions.md diff --git a/docs/config/setup/interfaces/mermaid.ParseOptions.md b/docs/config/setup/interfaces/mermaid.ParseOptions.md deleted file mode 100644 index 717e35565..000000000 --- a/docs/config/setup/interfaces/mermaid.ParseOptions.md +++ /dev/null @@ -1,22 +0,0 @@ -> **Warning** -> -> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. -> -> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/interfaces/mermaid.ParseOptions.md](../../../../packages/mermaid/src/docs/config/setup/interfaces/mermaid.ParseOptions.md). - -# Interface: ParseOptions - -[mermaid](../modules/mermaid.md).ParseOptions - -## Properties - -### suppressErrors - -• `Optional` **suppressErrors**: `boolean` - -If `true`, parse will return `false` instead of throwing error when the diagram is invalid. -The `parseError` function will not be called. - -#### Defined in - -[packages/mermaid/src/types.ts:59](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L59) diff --git a/packages/mermaid/src/docs/.vitepress/config.ts b/packages/mermaid/src/docs/.vitepress/config.ts index a40b50fed..5e861a59e 100644 --- a/packages/mermaid/src/docs/.vitepress/config.ts +++ b/packages/mermaid/src/docs/.vitepress/config.ts @@ -104,7 +104,7 @@ function nav() { ], }, { - text: '💻 Live Editor', + text: '💻 Open Editor', link: 'https://mermaid.live', }, ]; diff --git a/packages/mermaid/src/docs/index.md b/packages/mermaid/src/docs/index.md index 218757b10..bb9a6e9e3 100644 --- a/packages/mermaid/src/docs/index.md +++ b/packages/mermaid/src/docs/index.md @@ -15,23 +15,23 @@ hero: alt: Mermaid actions: - theme: brand - text: Get Started - link: /intro/ + text: Try Mermaid Editor + link: https://www.mermaidchart.com/play - theme: alt - text: View on GitHub + text: Build with Mermaid link: https://github.com/mermaid-js/mermaid + - theme: alt + text: Learn more + link: https://mermaid.js.org/intro/ features: - title: ➕ Easy to use! - details: Easily create and render detailed diagrams and charts with the Mermaid Live Editor. - link: https://mermaid.live/ + details: Easily create diagrams and charts with the Mermaid Editor. + link: https://www.mermaidchart.com/play - title: 🧩 Integrations available! details: Use Mermaid with your favorite applications, check out the integrations list. link: ../../ecosystem/integrations-community.md - title: 🏆 Award winning! details: 2019 JavaScript Open Source Award winner for "The Most Exciting Use of Technology". link: https://osawards.com/javascript/2019 - - title: 🥰 Mermaid + Mermaid Chart - details: Mermaid Chart is a major supporter of the Mermaid project. - link: https://www.mermaidchart.com/ --- From 1bed6432ac6a188cd10627344fc401181af6875a Mon Sep 17 00:00:00 2001 From: Steph <35910788+huynhicode@users.noreply.github.com> Date: Wed, 5 Mar 2025 21:24:38 -0800 Subject: [PATCH 025/266] update styling and add assets --- .../setup/interfaces/mermaid.ParseOptions.md | 22 +++++++++++++ docs/public/1-Callout-Easy.svg | 9 ++++++ docs/public/2-Callout-Integrations.svg | 9 ++++++ docs/public/3-Callout-Awards.svg | 9 ++++++ docs/public/Hero-Dark.svg | 19 +++++++++++ docs/public/Hero.svg | 19 +++++++++++ .../mermaid/src/docs/.vitepress/config.ts | 2 +- .../src/docs/.vitepress/theme/custom.css | 32 +++++++++++++------ packages/mermaid/src/docs/index.md | 25 +++++++++------ .../src/docs/public/1-Callout-Easy.svg | 9 ++++++ .../docs/public/2-Callout-Integrations.svg | 9 ++++++ .../src/docs/public/3-Callout-Awards.svg | 9 ++++++ .../mermaid/src/docs/public/Hero-Dark.svg | 19 +++++++++++ packages/mermaid/src/docs/public/Hero.svg | 19 +++++++++++ 14 files changed, 190 insertions(+), 21 deletions(-) create mode 100644 docs/config/setup/interfaces/mermaid.ParseOptions.md create mode 100644 docs/public/1-Callout-Easy.svg create mode 100644 docs/public/2-Callout-Integrations.svg create mode 100644 docs/public/3-Callout-Awards.svg create mode 100644 docs/public/Hero-Dark.svg create mode 100644 docs/public/Hero.svg create mode 100644 packages/mermaid/src/docs/public/1-Callout-Easy.svg create mode 100644 packages/mermaid/src/docs/public/2-Callout-Integrations.svg create mode 100644 packages/mermaid/src/docs/public/3-Callout-Awards.svg create mode 100644 packages/mermaid/src/docs/public/Hero-Dark.svg create mode 100644 packages/mermaid/src/docs/public/Hero.svg diff --git a/docs/config/setup/interfaces/mermaid.ParseOptions.md b/docs/config/setup/interfaces/mermaid.ParseOptions.md new file mode 100644 index 000000000..717e35565 --- /dev/null +++ b/docs/config/setup/interfaces/mermaid.ParseOptions.md @@ -0,0 +1,22 @@ +> **Warning** +> +> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. +> +> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/interfaces/mermaid.ParseOptions.md](../../../../packages/mermaid/src/docs/config/setup/interfaces/mermaid.ParseOptions.md). + +# Interface: ParseOptions + +[mermaid](../modules/mermaid.md).ParseOptions + +## Properties + +### suppressErrors + +• `Optional` **suppressErrors**: `boolean` + +If `true`, parse will return `false` instead of throwing error when the diagram is invalid. +The `parseError` function will not be called. + +#### Defined in + +[packages/mermaid/src/types.ts:59](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L59) diff --git a/docs/public/1-Callout-Easy.svg b/docs/public/1-Callout-Easy.svg new file mode 100644 index 000000000..a6e9251a0 --- /dev/null +++ b/docs/public/1-Callout-Easy.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/docs/public/2-Callout-Integrations.svg b/docs/public/2-Callout-Integrations.svg new file mode 100644 index 000000000..b5ebdf055 --- /dev/null +++ b/docs/public/2-Callout-Integrations.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/docs/public/3-Callout-Awards.svg b/docs/public/3-Callout-Awards.svg new file mode 100644 index 000000000..f10c0fc39 --- /dev/null +++ b/docs/public/3-Callout-Awards.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/docs/public/Hero-Dark.svg b/docs/public/Hero-Dark.svg new file mode 100644 index 000000000..dd095eeef --- /dev/null +++ b/docs/public/Hero-Dark.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/docs/public/Hero.svg b/docs/public/Hero.svg new file mode 100644 index 000000000..0b00cb15b --- /dev/null +++ b/docs/public/Hero.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/packages/mermaid/src/docs/.vitepress/config.ts b/packages/mermaid/src/docs/.vitepress/config.ts index 5e861a59e..8e0cd38de 100644 --- a/packages/mermaid/src/docs/.vitepress/config.ts +++ b/packages/mermaid/src/docs/.vitepress/config.ts @@ -104,7 +104,7 @@ function nav() { ], }, { - text: '💻 Open Editor', + text: 'Open Editor', link: 'https://mermaid.live', }, ]; diff --git a/packages/mermaid/src/docs/.vitepress/theme/custom.css b/packages/mermaid/src/docs/.vitepress/theme/custom.css index 1d72056ec..f2e38af1c 100644 --- a/packages/mermaid/src/docs/.vitepress/theme/custom.css +++ b/packages/mermaid/src/docs/.vitepress/theme/custom.css @@ -1,22 +1,34 @@ @import 'font-awesome/css/font-awesome.min.css'; @import '@mdi/font/css/materialdesignicons.min.css'; +/* Colors: Brand */ :root { - --vp-c-brand: #ff3670; - --vp-c-brand-light: #ff5e8c; - --vp-c-brand-lighter: #ff85a8; - --vp-c-brand-lightest: #ff9bb7; - --vp-c-brand-dark: #bd34fe; - --vp-c-brand-darker: #9339bd; - --vp-c-brand-dimm: rgba(100, 108, 255, 0.08); + /* use for colored text */ + --vp-c-pink-1: #e0095f; + + /* use for hover state of button */ + --vp-c-pink-2: #b0134a; + + /* use for background button color */ + --vp-c-pink-3: #e0095f; + + /* use for custom container or badges */ + --vp-c-pink-4: rgba(159, 122, 234, 0.14); } :root { - --vp-home-hero-name-color: transparent; - --vp-home-hero-name-background: -webkit-linear-gradient(120deg, #bd34fe 30%, #ff3670); + --vp-c-brand-1: var(--vp-c-pink-1); + --vp-c-brand-2: var(--vp-c-pink-2); + --vp-c-brand-3: var(--vp-c-pink-3); +} - --vp-home-hero-image-background-image: linear-gradient(-45deg, #bd34fe 50%, #ff3670 50%); +:root { + --vp-home-hero-name-color: var(--vp-c-brand-1); + + --vp-home-hero-image-background-image: #ff3670; --vp-home-hero-image-filter: blur(72px); + + --vp-home-feature-color: #ff3670; } .vp-doc > div { diff --git a/packages/mermaid/src/docs/index.md b/packages/mermaid/src/docs/index.md index bb9a6e9e3..432c6d061 100644 --- a/packages/mermaid/src/docs/index.md +++ b/packages/mermaid/src/docs/index.md @@ -11,27 +11,32 @@ hero: tagline: JavaScript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically. image: - src: /mermaid-logo.svg - alt: Mermaid + light: /Hero.svg + alt: Mermaid diagram + dark: /Hero-Dark.svg + altDark: Mermaid diagram actions: - theme: brand - text: Try Mermaid Editor + text: Try editor link: https://www.mermaidchart.com/play - theme: alt - text: Build with Mermaid + text: Get started link: https://github.com/mermaid-js/mermaid - - theme: alt - text: Learn more - link: https://mermaid.js.org/intro/ features: - - title: ➕ Easy to use! + - icon: + src: /1-Callout-Easy.svg + title: Easy to use details: Easily create diagrams and charts with the Mermaid Editor. link: https://www.mermaidchart.com/play - - title: 🧩 Integrations available! + - icon: + src: /2-Callout-Integrations.svg + title: Integrations available details: Use Mermaid with your favorite applications, check out the integrations list. link: ../../ecosystem/integrations-community.md - - title: 🏆 Award winning! + - icon: + src: /3-Callout-Awards.svg + title: Award winning details: 2019 JavaScript Open Source Award winner for "The Most Exciting Use of Technology". link: https://osawards.com/javascript/2019 --- diff --git a/packages/mermaid/src/docs/public/1-Callout-Easy.svg b/packages/mermaid/src/docs/public/1-Callout-Easy.svg new file mode 100644 index 000000000..a6e9251a0 --- /dev/null +++ b/packages/mermaid/src/docs/public/1-Callout-Easy.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/packages/mermaid/src/docs/public/2-Callout-Integrations.svg b/packages/mermaid/src/docs/public/2-Callout-Integrations.svg new file mode 100644 index 000000000..b5ebdf055 --- /dev/null +++ b/packages/mermaid/src/docs/public/2-Callout-Integrations.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/packages/mermaid/src/docs/public/3-Callout-Awards.svg b/packages/mermaid/src/docs/public/3-Callout-Awards.svg new file mode 100644 index 000000000..f10c0fc39 --- /dev/null +++ b/packages/mermaid/src/docs/public/3-Callout-Awards.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/packages/mermaid/src/docs/public/Hero-Dark.svg b/packages/mermaid/src/docs/public/Hero-Dark.svg new file mode 100644 index 000000000..dd095eeef --- /dev/null +++ b/packages/mermaid/src/docs/public/Hero-Dark.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/packages/mermaid/src/docs/public/Hero.svg b/packages/mermaid/src/docs/public/Hero.svg new file mode 100644 index 000000000..0b00cb15b --- /dev/null +++ b/packages/mermaid/src/docs/public/Hero.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + From 50e4641666b1f3ebe62afb3ad09619dd24d31d2a Mon Sep 17 00:00:00 2001 From: Steph <35910788+huynhicode@users.noreply.github.com> Date: Wed, 5 Mar 2025 22:26:12 -0800 Subject: [PATCH 026/266] minor updates --- packages/mermaid/src/docs/.vitepress/theme/custom.css | 9 --------- packages/mermaid/src/docs/index.md | 3 +-- 2 files changed, 1 insertion(+), 11 deletions(-) diff --git a/packages/mermaid/src/docs/.vitepress/theme/custom.css b/packages/mermaid/src/docs/.vitepress/theme/custom.css index f2e38af1c..e0b84864c 100644 --- a/packages/mermaid/src/docs/.vitepress/theme/custom.css +++ b/packages/mermaid/src/docs/.vitepress/theme/custom.css @@ -22,15 +22,6 @@ --vp-c-brand-3: var(--vp-c-pink-3); } -:root { - --vp-home-hero-name-color: var(--vp-c-brand-1); - - --vp-home-hero-image-background-image: #ff3670; - --vp-home-hero-image-filter: blur(72px); - - --vp-home-feature-color: #ff3670; -} - .vp-doc > div { width: 100%; } diff --git a/packages/mermaid/src/docs/index.md b/packages/mermaid/src/docs/index.md index 432c6d061..b23df8d5c 100644 --- a/packages/mermaid/src/docs/index.md +++ b/packages/mermaid/src/docs/index.md @@ -12,9 +12,8 @@ hero: image: light: /Hero.svg - alt: Mermaid diagram dark: /Hero-Dark.svg - altDark: Mermaid diagram + alt: Mermaid diagram actions: - theme: brand text: Try editor From 91931531a6a614b35580fa3762ab09d330fd8035 Mon Sep 17 00:00:00 2001 From: Steph <35910788+huynhicode@users.noreply.github.com> Date: Wed, 5 Mar 2025 22:28:11 -0800 Subject: [PATCH 027/266] update link --- packages/mermaid/src/docs/.vitepress/config.ts | 4 ++-- packages/mermaid/src/docs/index.md | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/mermaid/src/docs/.vitepress/config.ts b/packages/mermaid/src/docs/.vitepress/config.ts index 8e0cd38de..24f325794 100644 --- a/packages/mermaid/src/docs/.vitepress/config.ts +++ b/packages/mermaid/src/docs/.vitepress/config.ts @@ -104,8 +104,8 @@ function nav() { ], }, { - text: 'Open Editor', - link: 'https://mermaid.live', + text: '💻 Open Editor', + link: 'https://www.mermaidchart.com/play', }, ]; } diff --git a/packages/mermaid/src/docs/index.md b/packages/mermaid/src/docs/index.md index b23df8d5c..254332456 100644 --- a/packages/mermaid/src/docs/index.md +++ b/packages/mermaid/src/docs/index.md @@ -20,7 +20,7 @@ hero: link: https://www.mermaidchart.com/play - theme: alt text: Get started - link: https://github.com/mermaid-js/mermaid + link: https://docs.mermaidchart.com/mermaid/intro features: - icon: From c8f01b14a8f0f16b89514370ca3ac1d52d23df71 Mon Sep 17 00:00:00 2001 From: Steph <35910788+huynhicode@users.noreply.github.com> Date: Tue, 11 Mar 2025 13:21:07 -0700 Subject: [PATCH 028/266] update links --- packages/mermaid/src/docs/.vitepress/config.ts | 2 +- packages/mermaid/src/docs/index.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/mermaid/src/docs/.vitepress/config.ts b/packages/mermaid/src/docs/.vitepress/config.ts index 24f325794..934df743e 100644 --- a/packages/mermaid/src/docs/.vitepress/config.ts +++ b/packages/mermaid/src/docs/.vitepress/config.ts @@ -105,7 +105,7 @@ function nav() { }, { text: '💻 Open Editor', - link: 'https://www.mermaidchart.com/play', + link: 'https://mermaid.live/', }, ]; } diff --git a/packages/mermaid/src/docs/index.md b/packages/mermaid/src/docs/index.md index 254332456..7a232472e 100644 --- a/packages/mermaid/src/docs/index.md +++ b/packages/mermaid/src/docs/index.md @@ -27,7 +27,7 @@ features: src: /1-Callout-Easy.svg title: Easy to use details: Easily create diagrams and charts with the Mermaid Editor. - link: https://www.mermaidchart.com/play + link: https://mermaid.live/ - icon: src: /2-Callout-Integrations.svg title: Integrations available From fa4d4806fa0784d22b33a408cb02366ad06788e5 Mon Sep 17 00:00:00 2001 From: Steph <35910788+huynhicode@users.noreply.github.com> Date: Tue, 18 Mar 2025 13:08:12 -0700 Subject: [PATCH 029/266] update button text --- packages/mermaid/src/docs/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mermaid/src/docs/index.md b/packages/mermaid/src/docs/index.md index 7a232472e..65ce6a2a9 100644 --- a/packages/mermaid/src/docs/index.md +++ b/packages/mermaid/src/docs/index.md @@ -16,7 +16,7 @@ hero: alt: Mermaid diagram actions: - theme: brand - text: Try editor + text: Try Playground link: https://www.mermaidchart.com/play - theme: alt text: Get started From 1125f5a28339d38a09bff067b432854a5830b993 Mon Sep 17 00:00:00 2001 From: megantriplett Date: Tue, 18 Mar 2025 16:10:16 -0400 Subject: [PATCH 030/266] added new tag "vert" in ganttDB --- packages/mermaid/src/diagrams/gantt/ganttDb.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/mermaid/src/diagrams/gantt/ganttDb.js b/packages/mermaid/src/diagrams/gantt/ganttDb.js index 15c7fab97..3731dacbe 100644 --- a/packages/mermaid/src/diagrams/gantt/ganttDb.js +++ b/packages/mermaid/src/diagrams/gantt/ganttDb.js @@ -33,7 +33,7 @@ let sections = []; let tasks = []; let currentSection = ''; let displayMode = ''; -const tags = ['active', 'done', 'crit', 'milestone']; +const tags = ['active', 'done', 'crit', 'milestone', 'vert']; let funs = []; let inclusiveEndDates = false; let topAxis = false; @@ -538,6 +538,7 @@ export const addTask = function (descr, data) { rawTask.done = taskInfo.done; rawTask.crit = taskInfo.crit; rawTask.milestone = taskInfo.milestone; + rawTask.vert = taskInfo.vert; rawTask.order = lastOrder; lastOrder++; @@ -570,6 +571,7 @@ export const addTaskOrg = function (descr, data) { newTask.done = taskInfo.done; newTask.crit = taskInfo.crit; newTask.milestone = taskInfo.milestone; + newTask.vert = taskInfo.vert; lastTask = newTask; tasks.push(newTask); }; From ce68da3feec5d8477bcb0d22174f6a145c845a48 Mon Sep 17 00:00:00 2001 From: Steph <35910788+huynhicode@users.noreply.github.com> Date: Thu, 20 Mar 2025 20:11:59 -0700 Subject: [PATCH 031/266] update promo bar content --- .../src/docs/.vitepress/components/TopBar.vue | 118 +++--------------- 1 file changed, 17 insertions(+), 101 deletions(-) diff --git a/packages/mermaid/src/docs/.vitepress/components/TopBar.vue b/packages/mermaid/src/docs/.vitepress/components/TopBar.vue index 0914d808e..116e368ea 100644 --- a/packages/mermaid/src/docs/.vitepress/components/TopBar.vue +++ b/packages/mermaid/src/docs/.vitepress/components/TopBar.vue @@ -6,122 +6,38 @@ interface Taglines { url: string; } -const allTaglines: { [key: string]: { design: number; taglines: Taglines[] } } = { - A: { - design: 1, - taglines: [ - { - label: 'Replace ChatGPT Pro, Mermaid.live, and Lucid Chart with Mermaid Chart', - url: 'https://www.mermaidchart.com/play?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=AIbundle_A', - }, - { - label: 'Diagram live with teammates in Mermaid Chart', - url: 'https://www.mermaidchart.com/play?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=teams_A', - }, - { - label: 'Use the Visual Editor in Mermaid Chart to design and build diagrams', - url: 'https://www.mermaidchart.com/play?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=visual_editor_A', - }, - { - label: 'Explore the Mermaid Whiteboard from the creators of Mermaid', - url: 'https://www.mermaidchart.com/whiteboard?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=whiteboard_A', - }, - ], +const taglines: Taglines[] = [ + { + label: 'Replace ChatGPT Pro, Mermaid.live, and Lucid Chart with Mermaid Chart', + url: 'https://www.mermaidchart.com/mermaid-ai?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=aibundle', }, - B: { - design: 2, - taglines: [ - { - label: 'Replace ChatGPT Pro, Mermaid.live, and Lucid Chart with Mermaid Chart', - url: 'https://www.mermaidchart.com/play?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=AIbundle_B', - }, - { - label: 'Diagram live with teammates in Mermaid Chart', - url: 'https://www.mermaidchart.com/play?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=teams_B', - }, - { - label: 'Use the Visual Editor in Mermaid Chart to design and build diagrams', - url: 'https://www.mermaidchart.com/play?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=visual_editor_B', - }, - { - label: 'Explore the Mermaid Whiteboard from the creators of Mermaid', - url: 'https://www.mermaidchart.com/whiteboard?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=whiteboard_B', - }, - ], + { + label: 'Diagram live with teammates in Mermaid Chart', + url: 'https://www.mermaidchart.com/landing?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=team_collaboration', }, - C: { - design: 1, - taglines: [ - { - label: 'Replace ChatGPT Pro, Mermaid.live, and Lucid Chart with Mermaid Pro', - url: 'https://www.mermaidchart.com/play?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=AIbundle_C', - }, - { - label: 'Diagram live with teammates in Mermaid Pro', - url: 'https://www.mermaidchart.com/play?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=teams_C', - }, - { - label: 'Use the Visual Editor in Mermaid Pro to design and build diagrams', - url: 'https://www.mermaidchart.com/play?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=visual_editor_C', - }, - { - label: 'Explore the Mermaid Whiteboard from the creators of Mermaid', - url: 'https://www.mermaidchart.com/whiteboard?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=whiteboard_A', - }, - ], + { + label: 'Use the Visual Editor in Mermaid Chart to design and build diagrams', + url: 'https://www.mermaidchart.com/landing?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=visual_editor', }, - D: { - design: 2, - taglines: [ - { - label: 'Replace ChatGPT Pro, Mermaid.live, and Lucid Chart with Mermaid Pro', - url: 'https://www.mermaidchart.com/play?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=AIbundle_D', - }, - { - label: 'Diagram live with teammates in Mermaid Pro', - url: 'https://www.mermaidchart.com/play?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=teams_D', - }, - { - label: 'Use the Visual Editor in Mermaid Pro to design and build diagrams', - url: 'https://www.mermaidchart.com/play?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=visual_editor_D', - }, - { - label: 'Explore the Mermaid Whiteboard from the creators of Mermaid', - url: 'https://www.mermaidchart.com/whiteboard?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=whiteboard_B', - }, - ], + { + label: 'Explore the Mermaid Whiteboard from the creators of Mermaid', + url: 'https://www.mermaidchart.com/whiteboard?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=whiteboard', }, -}; - -// Initialize with default values -const design: Ref = ref(1); -const taglines: Ref = ref([]); -const index: Ref = ref(0); +]; +let index = ref(Math.floor(Math.random() * taglines.length)); onMounted(() => { - // Select a random variant on client side - const variant = - Object.values(allTaglines)[Math.floor(Math.random() * Object.values(allTaglines).length)]; - design.value = variant.design; - taglines.value = variant.taglines; - index.value = Math.floor(Math.random() * taglines.value.length); - - // Set up the interval for cycling through taglines setInterval(() => { - index.value = (index.value + 1) % taglines.value.length; + index.value = (index.value + 1) % taglines.length; }, 5_000); });