diff --git a/.build/common.ts b/.build/common.ts new file mode 100644 index 0000000000..274977fa26 --- /dev/null +++ b/.build/common.ts @@ -0,0 +1,30 @@ +/** + * Shared common options for both ESBuild and Vite + */ +export const packageOptions = { + parser: { + name: 'mermaid-parser', + packageName: 'parser', + file: 'index.ts', + }, + mermaid: { + name: 'mermaid', + packageName: 'mermaid', + file: 'mermaid.ts', + }, + 'mermaid-example-diagram': { + name: 'mermaid-example-diagram', + packageName: 'mermaid-example-diagram', + file: 'detector.ts', + }, + 'mermaid-zenuml': { + name: 'mermaid-zenuml', + packageName: 'mermaid-zenuml', + file: 'detector.ts', + }, + 'mermaid-flowchart-elk': { + name: 'mermaid-flowchart-elk', + packageName: 'mermaid-flowchart-elk', + file: 'detector.ts', + }, +} as const; diff --git a/.build/generateLangium.ts b/.build/generateLangium.ts new file mode 100644 index 0000000000..e37e085a52 --- /dev/null +++ b/.build/generateLangium.ts @@ -0,0 +1,5 @@ +import { generate } from 'langium-cli'; + +export async function generateLangium() { + await generate({ file: `./packages/parser/langium-config.json` }); +} diff --git a/.vite/jisonTransformer.ts b/.build/jisonTransformer.ts similarity index 100% rename from .vite/jisonTransformer.ts rename to .build/jisonTransformer.ts diff --git a/.build/jsonSchema.ts b/.build/jsonSchema.ts new file mode 100644 index 0000000000..6fd8ca3f54 --- /dev/null +++ b/.build/jsonSchema.ts @@ -0,0 +1,124 @@ +import { load, JSON_SCHEMA } from 'js-yaml'; +import assert from 'node:assert'; +import Ajv2019, { type JSONSchemaType } from 'ajv/dist/2019.js'; +import type { MermaidConfig, BaseDiagramConfig } from '../packages/mermaid/src/config.type.js'; + +/** + * All of the keys in the mermaid config that have a mermaid diagram config. + */ +const MERMAID_CONFIG_DIAGRAM_KEYS = [ + 'flowchart', + 'sequence', + 'gantt', + 'journey', + 'class', + 'state', + 'er', + 'pie', + 'quadrantChart', + 'xyChart', + 'requirement', + 'mindmap', + 'timeline', + 'gitGraph', + 'c4', + 'sankey', + 'block', + 'packet', +] as const; + +/** + * Generate default values from the JSON Schema. + * + * AJV does not support nested default values yet (or default values with $ref), + * so we need to manually find them (this may be fixed in ajv v9). + * + * @param mermaidConfigSchema - The Mermaid JSON Schema to use. + * @returns The default mermaid config object. + */ +function generateDefaults(mermaidConfigSchema: JSONSchemaType) { + const ajv = new Ajv2019({ + useDefaults: true, + allowUnionTypes: true, + strict: true, + }); + + ajv.addKeyword({ + keyword: 'meta:enum', // used by jsonschema2md + errors: false, + }); + ajv.addKeyword({ + keyword: 'tsType', // used by json-schema-to-typescript + errors: false, + }); + + // ajv currently doesn't support nested default values, see https://github.com/ajv-validator/ajv/issues/1718 + // (may be fixed in v9) so we need to manually use sub-schemas + const mermaidDefaultConfig = {}; + + assert.ok(mermaidConfigSchema.$defs); + const baseDiagramConfig = mermaidConfigSchema.$defs.BaseDiagramConfig; + + for (const key of MERMAID_CONFIG_DIAGRAM_KEYS) { + const subSchemaRef = mermaidConfigSchema.properties[key].$ref; + const [root, defs, defName] = subSchemaRef.split('/'); + assert.strictEqual(root, '#'); + assert.strictEqual(defs, '$defs'); + const subSchema = { + $schema: mermaidConfigSchema.$schema, + $defs: mermaidConfigSchema.$defs, + ...mermaidConfigSchema.$defs[defName], + } as JSONSchemaType; + + const validate = ajv.compile(subSchema); + + mermaidDefaultConfig[key] = {}; + + for (const required of subSchema.required ?? []) { + if (subSchema.properties[required] === undefined && baseDiagramConfig.properties[required]) { + mermaidDefaultConfig[key][required] = baseDiagramConfig.properties[required].default; + } + } + if (!validate(mermaidDefaultConfig[key])) { + throw new Error( + `schema for subconfig ${key} does not have valid defaults! Errors were ${JSON.stringify( + validate.errors, + undefined, + 2 + )}` + ); + } + } + + const validate = ajv.compile(mermaidConfigSchema); + + if (!validate(mermaidDefaultConfig)) { + throw new Error( + `Mermaid config JSON Schema does not have valid defaults! Errors were ${JSON.stringify( + validate.errors, + undefined, + 2 + )}` + ); + } + + return mermaidDefaultConfig; +} + +export const loadSchema = (src: string, filename: string): JSONSchemaType => { + const jsonSchema = load(src, { + filename, + // only allow JSON types in our YAML doc (will probably be default in YAML 1.3) + // e.g. `true` will be parsed a boolean `true`, `True` will be parsed as string `"True"`. + schema: JSON_SCHEMA, + }) as JSONSchemaType; + return jsonSchema; +}; + +export const getDefaults = (schema: JSONSchemaType) => { + return `export default ${JSON.stringify(generateDefaults(schema), undefined, 2)};`; +}; + +export const getSchema = (schema: JSONSchemaType) => { + return `export default ${JSON.stringify(schema, undefined, 2)};`; +}; diff --git a/.build/types.ts b/.build/types.ts new file mode 100644 index 0000000000..4192407824 --- /dev/null +++ b/.build/types.ts @@ -0,0 +1,18 @@ +import { packageOptions } from './common.js'; +import { execSync } from 'child_process'; + +const buildType = (packageName: string) => { + console.log(`Building types for ${packageName}`); + try { + const out = execSync(`tsc -p ./packages/${packageName}/tsconfig.json --emitDeclarationOnly`); + out.length > 0 && console.log(out.toString()); + } catch (e) { + console.error(e); + e.stdout.length > 0 && console.error(e.stdout.toString()); + e.stderr.length > 0 && console.error(e.stderr.toString()); + } +}; + +for (const { packageName } of Object.values(packageOptions)) { + buildType(packageName); +} diff --git a/.cspell/code-terms.txt b/.cspell/code-terms.txt index 6d26357f8f..fa063616a7 100644 --- a/.cspell/code-terms.txt +++ b/.cspell/code-terms.txt @@ -53,6 +53,7 @@ GENERICTYPE getBoundarys grammr graphtype +iife interp introdcued INVTRAPEND @@ -74,11 +75,13 @@ loglevel LOGMSG lookaheads mdast +metafile minlen Mstartx MULT NODIR NSTR +outdir Qcontrolx reinit rels diff --git a/.cspell/libraries.txt b/.cspell/libraries.txt index d1ab976625..9d29261868 100644 --- a/.cspell/libraries.txt +++ b/.cspell/libraries.txt @@ -36,6 +36,7 @@ jsfiddle jsonschema katex khroma +langium mathml matplotlib mdbook diff --git a/.esbuild/build.ts b/.esbuild/build.ts new file mode 100644 index 0000000000..3c87f9d621 --- /dev/null +++ b/.esbuild/build.ts @@ -0,0 +1,65 @@ +import { build } from 'esbuild'; +import { mkdir, writeFile } from 'node:fs/promises'; +import { packageOptions } from '../.build/common.js'; +import { generateLangium } from '../.build/generateLangium.js'; +import { MermaidBuildOptions, defaultOptions, getBuildConfig } from './util.js'; + +const shouldVisualize = process.argv.includes('--visualize'); + +const buildPackage = async (entryName: keyof typeof packageOptions) => { + const commonOptions = { ...defaultOptions, entryName } as const; + const buildConfigs = [ + // package.mjs + { ...commonOptions }, + // package.min.mjs + { + ...commonOptions, + minify: true, + metafile: shouldVisualize, + }, + // package.core.mjs + { ...commonOptions, core: true }, + ]; + + if (entryName === 'mermaid') { + const iifeOptions: MermaidBuildOptions = { ...commonOptions, format: 'iife' }; + buildConfigs.push( + // mermaid.js + { ...iifeOptions }, + // mermaid.min.js + { ...iifeOptions, minify: true, metafile: shouldVisualize } + ); + } + + const results = await Promise.all(buildConfigs.map((option) => build(getBuildConfig(option)))); + + if (shouldVisualize) { + for (const { metafile } of results) { + if (!metafile) { + continue; + } + const fileName = Object.keys(metafile.outputs) + .filter((file) => !file.includes('chunks') && file.endsWith('js'))[0] + .replace('dist/', ''); + // Upload metafile into https://esbuild.github.io/analyze/ + await writeFile(`stats/${fileName}.meta.json`, JSON.stringify(metafile)); + } + } +}; + +const handler = (e) => { + console.error(e); + process.exit(1); +}; + +const main = async () => { + await generateLangium(); + await mkdir('stats').catch(() => {}); + const packageNames = Object.keys(packageOptions) as (keyof typeof packageOptions)[]; + // it should build `parser` before `mermaid` because it's a dependency + for (const pkg of packageNames) { + await buildPackage(pkg).catch(handler); + } +}; + +void main(); diff --git a/.esbuild/jisonPlugin.ts b/.esbuild/jisonPlugin.ts new file mode 100644 index 0000000000..de801ea9f3 --- /dev/null +++ b/.esbuild/jisonPlugin.ts @@ -0,0 +1,15 @@ +import { readFile } from 'node:fs/promises'; +import { transformJison } from '../.build/jisonTransformer.js'; +import { Plugin } from 'esbuild'; + +export const jisonPlugin: Plugin = { + name: 'jison', + setup(build) { + build.onLoad({ filter: /\.jison$/ }, async (args) => { + // Load the file from the file system + const source = await readFile(args.path, 'utf8'); + const contents = transformJison(source); + return { contents, warnings: [] }; + }); + }, +}; diff --git a/.esbuild/jsonSchemaPlugin.ts b/.esbuild/jsonSchemaPlugin.ts new file mode 100644 index 0000000000..e90c185abb --- /dev/null +++ b/.esbuild/jsonSchemaPlugin.ts @@ -0,0 +1,35 @@ +import type { JSONSchemaType } from 'ajv/dist/2019.js'; +import type { MermaidConfig } from '../packages/mermaid/src/config.type.js'; +import { readFile } from 'node:fs/promises'; +import { getDefaults, getSchema, loadSchema } from '../.build/jsonSchema.js'; + +/** + * ESBuild plugin that handles JSON Schemas saved as a `.schema.yaml` file. + * + * Use `my-example.schema.yaml?only-defaults=true` to only load the default values. + */ + +export const jsonSchemaPlugin = { + name: 'json-schema-plugin', + setup(build) { + let schema: JSONSchemaType | undefined = undefined; + let content = ''; + + build.onLoad({ filter: /config\.schema\.yaml$/ }, async (args) => { + // Load the file from the file system + const source = await readFile(args.path, 'utf8'); + const resolvedSchema: JSONSchemaType = + content === source && schema ? schema : loadSchema(source, args.path); + if (content !== source) { + content = source; + schema = resolvedSchema; + } + const contents = args.suffix.includes('only-defaults') + ? getDefaults(resolvedSchema) + : getSchema(resolvedSchema); + return { contents, warnings: [] }; + }); + }, +}; + +export default jsonSchemaPlugin; diff --git a/.esbuild/server.ts b/.esbuild/server.ts new file mode 100644 index 0000000000..9102c7de83 --- /dev/null +++ b/.esbuild/server.ts @@ -0,0 +1,102 @@ +import express from 'express'; +import type { NextFunction, Request, Response } from 'express'; +import cors from 'cors'; +import { getBuildConfig, defaultOptions } from './util.js'; +import { context } from 'esbuild'; +import chokidar from 'chokidar'; +import { generateLangium } from '../.build/generateLangium.js'; +import { packageOptions } from '../.build/common.js'; + +const configs = Object.values(packageOptions).map(({ packageName }) => + getBuildConfig({ ...defaultOptions, minify: false, core: false, entryName: packageName }) +); +const mermaidIIFEConfig = getBuildConfig({ + ...defaultOptions, + minify: false, + core: false, + entryName: 'mermaid', + format: 'iife', +}); +configs.push(mermaidIIFEConfig); + +const contexts = await Promise.all(configs.map((config) => context(config))); + +const rebuildAll = async () => { + console.time('Rebuild time'); + await Promise.all(contexts.map((ctx) => ctx.rebuild())).catch((e) => console.error(e)); + console.timeEnd('Rebuild time'); +}; + +let clients: { id: number; response: Response }[] = []; +function eventsHandler(request: Request, response: Response, next: NextFunction) { + const headers = { + 'Content-Type': 'text/event-stream', + Connection: 'keep-alive', + 'Cache-Control': 'no-cache', + }; + response.writeHead(200, headers); + const clientId = Date.now(); + clients.push({ + id: clientId, + response, + }); + request.on('close', () => { + clients = clients.filter((client) => client.id !== clientId); + }); +} + +let timeoutId: NodeJS.Timeout | undefined = undefined; + +/** + * Debounce file change events to avoid rebuilding multiple times. + */ +function handleFileChange() { + if (timeoutId !== undefined) { + clearTimeout(timeoutId); + } + timeoutId = setTimeout(async () => { + await rebuildAll(); + sendEventsToAll(); + timeoutId = undefined; + }, 100); +} + +function sendEventsToAll() { + clients.forEach(({ response }) => response.write(`data: ${Date.now()}\n\n`)); +} + +async function createServer() { + await generateLangium(); + handleFileChange(); + const app = express(); + chokidar + .watch('**/src/**/*.{js,ts,langium,yaml,json}', { + ignoreInitial: true, + ignored: [/node_modules/, /dist/, /docs/, /coverage/], + }) + .on('all', async (event, path) => { + // Ignore other events. + if (!['add', 'change'].includes(event)) { + return; + } + if (/\.langium$/.test(path)) { + await generateLangium(); + } + console.log(`${path} changed. Rebuilding...`); + handleFileChange(); + }); + + app.use(cors()); + app.get('/events', eventsHandler); + for (const { packageName } of Object.values(packageOptions)) { + app.use(express.static(`./packages/${packageName}/dist`)); + } + app.use(express.static('demos')); + app.use(express.static('cypress/platform')); + + app.listen(9000, () => { + console.log(`Listening on http://localhost:9000`); + }); +} + +createServer(); diff --git a/.esbuild/util.ts b/.esbuild/util.ts new file mode 100644 index 0000000000..5c21cbf452 --- /dev/null +++ b/.esbuild/util.ts @@ -0,0 +1,101 @@ +import { resolve } from 'path'; +import { fileURLToPath } from 'url'; +import type { BuildOptions } from 'esbuild'; +import { readFileSync } from 'fs'; +import jsonSchemaPlugin from './jsonSchemaPlugin.js'; +import { packageOptions } from '../.build/common.js'; +import { jisonPlugin } from './jisonPlugin.js'; + +const __dirname = fileURLToPath(new URL('.', import.meta.url)); + +export interface MermaidBuildOptions { + minify: boolean; + core: boolean; + metafile: boolean; + format: 'esm' | 'iife'; + entryName: keyof typeof packageOptions; +} + +export const defaultOptions: Omit = { + minify: false, + metafile: false, + core: false, + format: 'esm', +} as const; + +const buildOptions = (override: BuildOptions): BuildOptions => { + return { + bundle: true, + minify: true, + keepNames: true, + platform: 'browser', + tsconfig: 'tsconfig.json', + resolveExtensions: ['.ts', '.js', '.json', '.jison', '.yaml'], + external: ['require', 'fs', 'path'], + outdir: 'dist', + plugins: [jisonPlugin, jsonSchemaPlugin], + sourcemap: 'external', + ...override, + }; +}; + +const getFileName = (fileName: string, { core, format, minify }: MermaidBuildOptions) => { + if (core) { + fileName += '.core'; + } else if (format === 'esm') { + fileName += '.esm'; + } + if (minify) { + fileName += '.min'; + } + return fileName; +}; + +export const getBuildConfig = (options: MermaidBuildOptions): BuildOptions => { + const { core, entryName, metafile, format, minify } = 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: { + [outFileName]: `src/${file}`, + }, + metafile, + minify, + logLevel: 'info', + chunkNames: `chunks/${outFileName}/[name]-[hash]`, + define: { + 'import.meta.vitest': 'undefined', + }, + }); + + if (core) { + const { dependencies } = JSON.parse( + readFileSync(resolve(__dirname, `../packages/${packageName}/package.json`), 'utf-8') + ); + // Core build is used to generate file without bundled dependencies. + // This is used by downstream projects to bundle dependencies themselves. + // Ignore dependencies and any dependencies of dependencies + external.push(...Object.keys(dependencies)); + output.external = external; + } + + if (format === 'iife') { + output.format = 'iife'; + output.splitting = false; + output.globalName = '__esbuild_esm_mermaid'; + // Workaround for removing the .default access in esbuild IIFE. + // https://github.com/mermaid-js/mermaid/pull/4109#discussion_r1292317396 + output.footer = { + js: 'globalThis.mermaid = globalThis.__esbuild_esm_mermaid.default;', + }; + output.outExtension = { '.js': '.js' }; + } else { + output.format = 'esm'; + output.splitting = true; + output.outExtension = { '.js': '.mjs' }; + } + + return output; +}; diff --git a/.eslintignore b/.eslintignore index 1db5125d09..08b265ba06 100644 --- a/.eslintignore +++ b/.eslintignore @@ -6,3 +6,6 @@ cypress/plugins/index.js coverage *.json node_modules + +# autogenereated by langium-cli +generated/ diff --git a/.github/codecov.yaml b/.github/codecov.yaml index 950edb6a9a..9450430859 100644 --- a/.github/codecov.yaml +++ b/.github/codecov.yaml @@ -15,3 +15,4 @@ coverage: # Turing off for now as code coverage isn't stable and causes unnecessary build failures. # default: # threshold: 2% + patch: off diff --git a/.gitignore b/.gitignore index e6728b03f7..a0fd1c50b8 100644 --- a/.gitignore +++ b/.gitignore @@ -46,4 +46,8 @@ stats/ demos/dev/** !/demos/dev/example.html +!/demos/dev/reload.js tsx-0/** + +# autogenereated by langium-cli +generated/ \ No newline at end of file diff --git a/.prettierignore b/.prettierignore index e2fe936d26..7da0646e32 100644 --- a/.prettierignore +++ b/.prettierignore @@ -11,6 +11,8 @@ stats .nyc_output # Autogenerated by `pnpm run --filter mermaid types:build-config` packages/mermaid/src/config.type.ts +# autogenereated by langium-cli +generated/ # Ignore the files creates in /demos/dev except for example.html demos/dev/** !/demos/dev/example.html diff --git a/.vite/build.ts b/.vite/build.ts index bacc6bc6c6..7ce93a497f 100644 --- a/.vite/build.ts +++ b/.vite/build.ts @@ -3,11 +3,12 @@ import { resolve } from 'path'; import { fileURLToPath } from 'url'; import jisonPlugin from './jisonPlugin.js'; import jsonSchemaPlugin from './jsonSchemaPlugin.js'; -import { readFileSync } from 'fs'; import typescript from '@rollup/plugin-typescript'; import { visualizer } from 'rollup-plugin-visualizer'; import type { TemplateType } from 'rollup-plugin-visualizer/dist/plugin/template-types.js'; import istanbul from 'vite-plugin-istanbul'; +import { packageOptions } from '../.build/common.js'; +import { generateLangium } from '../.build/generateLangium.js'; const visualize = process.argv.includes('--visualize'); const watch = process.argv.includes('--watch'); @@ -36,24 +37,6 @@ const visualizerOptions = (packageName: string, core = false): PluginOption[] => ); }; -const packageOptions = { - mermaid: { - name: 'mermaid', - packageName: 'mermaid', - file: 'mermaid.ts', - }, - 'mermaid-example-diagram': { - name: 'mermaid-example-diagram', - packageName: 'mermaid-example-diagram', - file: 'detector.ts', - }, - 'mermaid-zenuml': { - name: 'mermaid-zenuml', - packageName: 'mermaid-zenuml', - file: 'detector.ts', - }, -}; - interface BuildOptions { minify: boolean | 'esbuild'; core?: boolean; @@ -72,34 +55,8 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions) sourcemap, entryFileNames: `${name}.esm${minify ? '.min' : ''}.mjs`, }, - { - name, - format: 'umd', - sourcemap, - entryFileNames: `${name}${minify ? '.min' : ''}.js`, - }, ]; - if (core) { - const { dependencies } = JSON.parse( - readFileSync(resolve(__dirname, `../packages/${packageName}/package.json`), 'utf-8') - ); - // Core build is used to generate file without bundled dependencies. - // This is used by downstream projects to bundle dependencies themselves. - // Ignore dependencies and any dependencies of dependencies - // Adapted from the RegEx used by `rollup-plugin-node` - external.push(new RegExp('^(?:' + Object.keys(dependencies).join('|') + ')(?:/.+)?$')); - // This needs to be an array. Otherwise vite will build esm & umd with same name and overwrite esm with umd. - output = [ - { - name, - format: 'esm', - sourcemap, - entryFileNames: `${name}.core.mjs`, - }, - ]; - } - const config: InlineConfig = { configFile: false, build: { @@ -129,7 +86,7 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions) // @ts-expect-error According to the type definitions, rollup plugins are incompatible with vite typescript({ compilerOptions: { declaration: false } }), istanbul({ - exclude: ['node_modules', 'test/', '__mocks__'], + exclude: ['node_modules', 'test/', '__mocks__', 'generated'], extension: ['.js', '.ts'], requireEnv: true, forceBuildInstrument: coverage, @@ -149,24 +106,28 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions) const buildPackage = async (entryName: keyof typeof packageOptions) => { await build(getBuildConfig({ minify: false, entryName })); - await build(getBuildConfig({ minify: 'esbuild', entryName })); - await build(getBuildConfig({ minify: false, core: true, entryName })); }; const main = async () => { const packageNames = Object.keys(packageOptions) as (keyof typeof packageOptions)[]; - for (const pkg of packageNames.filter((pkg) => !mermaidOnly || pkg === 'mermaid')) { + for (const pkg of packageNames.filter( + (pkg) => !mermaidOnly || pkg === 'mermaid' || pkg === 'parser' + )) { await buildPackage(pkg); } }; +await generateLangium(); + if (watch) { + await build(getBuildConfig({ minify: false, watch, core: false, entryName: 'parser' })); build(getBuildConfig({ minify: false, watch, core: false, entryName: 'mermaid' })); if (!mermaidOnly) { build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-example-diagram' })); build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-zenuml' })); } } else if (visualize) { + await build(getBuildConfig({ minify: false, watch, core: false, entryName: 'parser' })); await build(getBuildConfig({ minify: false, core: true, entryName: 'mermaid' })); await build(getBuildConfig({ minify: false, core: false, entryName: 'mermaid' })); } else { diff --git a/.vite/jisonPlugin.ts b/.vite/jisonPlugin.ts index c211907841..32e5677978 100644 --- a/.vite/jisonPlugin.ts +++ b/.vite/jisonPlugin.ts @@ -1,10 +1,10 @@ -import { transformJison } from './jisonTransformer.js'; +import { transformJison } from '../.build/jisonTransformer.js'; + const fileRegex = /\.(jison)$/; export default function jison() { return { name: 'jison', - transform(src: string, id: string) { if (fileRegex.test(id)) { return { diff --git a/.vite/jsonSchemaPlugin.ts b/.vite/jsonSchemaPlugin.ts index dd9af8cc55..2e5b5cc0b5 100644 --- a/.vite/jsonSchemaPlugin.ts +++ b/.vite/jsonSchemaPlugin.ts @@ -1,110 +1,5 @@ -import { load, JSON_SCHEMA } from 'js-yaml'; -import assert from 'node:assert'; -import Ajv2019, { type JSONSchemaType } from 'ajv/dist/2019.js'; import { PluginOption } from 'vite'; - -import type { MermaidConfig, BaseDiagramConfig } from '../packages/mermaid/src/config.type.js'; - -/** - * All of the keys in the mermaid config that have a mermaid diagram config. - */ -const MERMAID_CONFIG_DIAGRAM_KEYS = [ - 'flowchart', - 'sequence', - 'gantt', - 'journey', - 'class', - 'state', - 'er', - 'pie', - 'quadrantChart', - 'xyChart', - 'requirement', - 'mindmap', - 'timeline', - 'gitGraph', - 'c4', - 'sankey', - 'block', -] as const; - -/** - * Generate default values from the JSON Schema. - * - * AJV does not support nested default values yet (or default values with $ref), - * so we need to manually find them (this may be fixed in ajv v9). - * - * @param mermaidConfigSchema - The Mermaid JSON Schema to use. - * @returns The default mermaid config object. - */ -function generateDefaults(mermaidConfigSchema: JSONSchemaType) { - const ajv = new Ajv2019({ - useDefaults: true, - allowUnionTypes: true, - strict: true, - }); - - ajv.addKeyword({ - keyword: 'meta:enum', // used by jsonschema2md - errors: false, - }); - ajv.addKeyword({ - keyword: 'tsType', // used by json-schema-to-typescript - errors: false, - }); - - // ajv currently doesn't support nested default values, see https://github.com/ajv-validator/ajv/issues/1718 - // (may be fixed in v9) so we need to manually use sub-schemas - const mermaidDefaultConfig = {}; - - assert.ok(mermaidConfigSchema.$defs); - const baseDiagramConfig = mermaidConfigSchema.$defs.BaseDiagramConfig; - - for (const key of MERMAID_CONFIG_DIAGRAM_KEYS) { - const subSchemaRef = mermaidConfigSchema.properties[key].$ref; - const [root, defs, defName] = subSchemaRef.split('/'); - assert.strictEqual(root, '#'); - assert.strictEqual(defs, '$defs'); - const subSchema = { - $schema: mermaidConfigSchema.$schema, - $defs: mermaidConfigSchema.$defs, - ...mermaidConfigSchema.$defs[defName], - } as JSONSchemaType; - - const validate = ajv.compile(subSchema); - - mermaidDefaultConfig[key] = {}; - - for (const required of subSchema.required ?? []) { - if (subSchema.properties[required] === undefined && baseDiagramConfig.properties[required]) { - mermaidDefaultConfig[key][required] = baseDiagramConfig.properties[required].default; - } - } - if (!validate(mermaidDefaultConfig[key])) { - throw new Error( - `schema for subconfig ${key} does not have valid defaults! Errors were ${JSON.stringify( - validate.errors, - undefined, - 2 - )}` - ); - } - } - - const validate = ajv.compile(mermaidConfigSchema); - - if (!validate(mermaidDefaultConfig)) { - throw new Error( - `Mermaid config JSON Schema does not have valid defaults! Errors were ${JSON.stringify( - validate.errors, - undefined, - 2 - )}` - ); - } - - return mermaidDefaultConfig; -} +import { getDefaults, getSchema, loadSchema } from '../.build/jsonSchema.js'; /** * Vite plugin that handles JSON Schemas saved as a `.schema.yaml` file. @@ -121,32 +16,13 @@ export default function jsonSchemaPlugin(): PluginOption { return; } - if (idAsUrl.searchParams.get('only-defaults')) { - const jsonSchema = load(src, { - filename: idAsUrl.pathname, - // only allow JSON types in our YAML doc (will probably be default in YAML 1.3) - // e.g. `true` will be parsed a boolean `true`, `True` will be parsed as string `"True"`. - schema: JSON_SCHEMA, - }) as JSONSchemaType; - return { - code: `export default ${JSON.stringify(generateDefaults(jsonSchema), undefined, 2)};`, - map: null, // no source map - }; - } else { - return { - code: `export default ${JSON.stringify( - load(src, { - filename: idAsUrl.pathname, - // only allow JSON types in our YAML doc (will probably be default in YAML 1.3) - // e.g. `true` will be parsed a boolean `true`, `True` will be parsed as string `"True"`. - schema: JSON_SCHEMA, - }), - undefined, - 2 - )};`, - map: null, // provide source map if available - }; - } + const jsonSchema = loadSchema(src, idAsUrl.pathname); + return { + code: idAsUrl.searchParams.get('only-defaults') + ? getDefaults(jsonSchema) + : getSchema(jsonSchema), + map: null, // no source map + }; }, }; } diff --git a/.vite/server.ts b/.vite/server.ts index 41e510c831..99d16f6f24 100644 --- a/.vite/server.ts +++ b/.vite/server.ts @@ -1,6 +1,7 @@ import express from 'express'; import cors from 'cors'; import { createServer as createViteServer } from 'vite'; +import { packageOptions } from '../.build/common.js'; async function createServer() { const app = express(); @@ -14,9 +15,9 @@ async function createServer() { }); app.use(cors()); - app.use(express.static('./packages/mermaid/dist')); - app.use(express.static('./packages/mermaid-zenuml/dist')); - app.use(express.static('./packages/mermaid-example-diagram/dist')); + for (const { packageName } of Object.values(packageOptions)) { + app.use(express.static(`./packages/${packageName}/dist`)); + } app.use(vite.middlewares); app.use(express.static('demos')); app.use(express.static('cypress/platform')); diff --git a/__mocks__/c4Renderer.js b/__mocks__/c4Renderer.js deleted file mode 100644 index 576d5d8634..0000000000 --- a/__mocks__/c4Renderer.js +++ /dev/null @@ -1,21 +0,0 @@ -/** - * Mocked C4Context diagram renderer - */ - -import { vi } from 'vitest'; - -export const drawPersonOrSystemArray = vi.fn(); -export const drawBoundary = vi.fn(); - -export const setConf = vi.fn(); - -export const draw = vi.fn().mockImplementation(() => { - return ''; -}); - -export default { - drawPersonOrSystemArray, - drawBoundary, - setConf, - draw, -}; diff --git a/__mocks__/classRenderer-v2.js b/__mocks__/classRenderer-v2.js deleted file mode 100644 index 1ad95806fc..0000000000 --- a/__mocks__/classRenderer-v2.js +++ /dev/null @@ -1,16 +0,0 @@ -/** - * Mocked class diagram v2 renderer - */ - -import { vi } from 'vitest'; - -export const setConf = vi.fn(); - -export const draw = vi.fn().mockImplementation(() => { - return ''; -}); - -export default { - setConf, - draw, -}; diff --git a/__mocks__/classRenderer.js b/__mocks__/classRenderer.js deleted file mode 100644 index 1c20de4b18..0000000000 --- a/__mocks__/classRenderer.js +++ /dev/null @@ -1,13 +0,0 @@ -/** - * Mocked class diagram renderer - */ - -import { vi } from 'vitest'; - -export const draw = vi.fn().mockImplementation(() => { - return ''; -}); - -export default { - draw, -}; diff --git a/__mocks__/dagre-d3.ts b/__mocks__/dagre-d3.ts deleted file mode 100644 index bf6d341dc5..0000000000 --- a/__mocks__/dagre-d3.ts +++ /dev/null @@ -1 +0,0 @@ -// DO NOT delete this file. It is used by vitest to mock the dagre-d3 module. diff --git a/__mocks__/entity-decode/browser.ts b/__mocks__/entity-decode/browser.ts deleted file mode 100644 index bd82d79fd9..0000000000 --- a/__mocks__/entity-decode/browser.ts +++ /dev/null @@ -1,3 +0,0 @@ -module.exports = function (txt: string) { - return txt; -}; diff --git a/__mocks__/erRenderer.js b/__mocks__/erRenderer.js deleted file mode 100644 index 845d641f75..0000000000 --- a/__mocks__/erRenderer.js +++ /dev/null @@ -1,16 +0,0 @@ -/** - * Mocked er diagram renderer - */ - -import { vi } from 'vitest'; - -export const setConf = vi.fn(); - -export const draw = vi.fn().mockImplementation(() => { - return ''; -}); - -export default { - setConf, - draw, -}; diff --git a/__mocks__/flowRenderer-v2.js b/__mocks__/flowRenderer-v2.js deleted file mode 100644 index 89cc86031e..0000000000 --- a/__mocks__/flowRenderer-v2.js +++ /dev/null @@ -1,24 +0,0 @@ -/** - * Mocked flow (flowchart) diagram v2 renderer - */ - -import { vi } from 'vitest'; - -export const setConf = vi.fn(); -export const addVertices = vi.fn(); -export const addEdges = vi.fn(); -export const getClasses = vi.fn().mockImplementation(() => { - return {}; -}); - -export const draw = vi.fn().mockImplementation(() => { - return ''; -}); - -export default { - setConf, - addVertices, - addEdges, - getClasses, - draw, -}; diff --git a/__mocks__/ganttRenderer.js b/__mocks__/ganttRenderer.js deleted file mode 100644 index 9572498321..0000000000 --- a/__mocks__/ganttRenderer.js +++ /dev/null @@ -1,16 +0,0 @@ -/** - * Mocked gantt diagram renderer - */ - -import { vi } from 'vitest'; - -export const setConf = vi.fn(); - -export const draw = vi.fn().mockImplementation(() => { - return ''; -}); - -export default { - setConf, - draw, -}; diff --git a/__mocks__/gitGraphRenderer.js b/__mocks__/gitGraphRenderer.js deleted file mode 100644 index 1daa82ca4c..0000000000 --- a/__mocks__/gitGraphRenderer.js +++ /dev/null @@ -1,13 +0,0 @@ -/** - * Mocked git (graph) diagram renderer - */ - -import { vi } from 'vitest'; - -export const draw = vi.fn().mockImplementation(() => { - return ''; -}); - -export default { - draw, -}; diff --git a/__mocks__/journeyRenderer.js b/__mocks__/journeyRenderer.js deleted file mode 100644 index 2bc77c0b10..0000000000 --- a/__mocks__/journeyRenderer.js +++ /dev/null @@ -1,15 +0,0 @@ -/** - * Mocked pie (picChart) diagram renderer - */ - -import { vi } from 'vitest'; -export const setConf = vi.fn(); - -export const draw = vi.fn().mockImplementation(() => { - return ''; -}); - -export default { - setConf, - draw, -}; diff --git a/__mocks__/pieRenderer.ts b/__mocks__/pieRenderer.ts deleted file mode 100644 index 439800f8c5..0000000000 --- a/__mocks__/pieRenderer.ts +++ /dev/null @@ -1,8 +0,0 @@ -/** - * Mocked pie (picChart) diagram renderer - */ -import { vi } from 'vitest'; - -const draw = vi.fn().mockImplementation(() => ''); - -export const renderer = { draw }; diff --git a/__mocks__/requirementRenderer.js b/__mocks__/requirementRenderer.js deleted file mode 100644 index 48d8997ac1..0000000000 --- a/__mocks__/requirementRenderer.js +++ /dev/null @@ -1,13 +0,0 @@ -/** - * Mocked requirement diagram renderer - */ - -import { vi } from 'vitest'; - -export const draw = vi.fn().mockImplementation(() => { - return ''; -}); - -export default { - draw, -}; diff --git a/__mocks__/sankeyRenderer.js b/__mocks__/sankeyRenderer.js deleted file mode 100644 index 76324c93f1..0000000000 --- a/__mocks__/sankeyRenderer.js +++ /dev/null @@ -1,13 +0,0 @@ -/** - * Mocked Sankey diagram renderer - */ - -import { vi } from 'vitest'; - -export const draw = vi.fn().mockImplementation(() => { - return ''; -}); - -export default { - draw, -}; diff --git a/__mocks__/sequenceRenderer.js b/__mocks__/sequenceRenderer.js deleted file mode 100644 index 11080c6bbf..0000000000 --- a/__mocks__/sequenceRenderer.js +++ /dev/null @@ -1,23 +0,0 @@ -/** - * Mocked sequence diagram renderer - */ - -import { vi } from 'vitest'; - -export const bounds = vi.fn(); -export const drawActors = vi.fn(); -export const drawActorsPopup = vi.fn(); - -export const setConf = vi.fn(); - -export const draw = vi.fn().mockImplementation(() => { - return ''; -}); - -export default { - bounds, - drawActors, - drawActorsPopup, - setConf, - draw, -}; diff --git a/__mocks__/stateRenderer-v2.js b/__mocks__/stateRenderer-v2.js deleted file mode 100644 index a2d103b50e..0000000000 --- a/__mocks__/stateRenderer-v2.js +++ /dev/null @@ -1,22 +0,0 @@ -/** - * Mocked state diagram v2 renderer - */ - -import { vi } from 'vitest'; - -export const setConf = vi.fn(); -export const getClasses = vi.fn().mockImplementation(() => { - return {}; -}); -export const stateDomId = vi.fn().mockImplementation(() => { - return 'mocked-stateDiagram-stateDomId'; -}); -export const draw = vi.fn().mockImplementation(() => { - return ''; -}); - -export default { - setConf, - getClasses, - draw, -}; diff --git a/cypress/integration/other/flowchart-elk.spec.js b/cypress/integration/other/flowchart-elk.spec.js new file mode 100644 index 0000000000..22a6efc0f5 --- /dev/null +++ b/cypress/integration/other/flowchart-elk.spec.js @@ -0,0 +1,14 @@ +import { urlSnapshotTest, openURLAndVerifyRendering } from '../../helpers/util.ts'; + +describe('Flowchart elk', () => { + it('should use dagre as fallback', () => { + urlSnapshotTest('http://localhost:9000/flow-elk.html', { + name: 'flow-elk fallback to dagre', + }); + }); + it('should allow overriding with external package', () => { + urlSnapshotTest('http://localhost:9000/flow-elk.html?elk=true', { + name: 'flow-elk overriding dagre with elk', + }); + }); +}); diff --git a/cypress/integration/other/iife.spec.js b/cypress/integration/other/iife.spec.js new file mode 100644 index 0000000000..4eb8601467 --- /dev/null +++ b/cypress/integration/other/iife.spec.js @@ -0,0 +1,11 @@ +describe('IIFE', () => { + beforeEach(() => { + cy.visit('http://localhost:9000/iife.html'); + }); + + it('should render when using mermaid.min.js', () => { + cy.window().should('have.property', 'rendered', true); + cy.get('svg').should('be.visible'); + cy.get('#d2').should('contain', 'Hello'); + }); +}); diff --git a/cypress/integration/other/webpackUsage.spec.js b/cypress/integration/other/webpackUsage.spec.js deleted file mode 100644 index 727fb5ac74..0000000000 --- a/cypress/integration/other/webpackUsage.spec.js +++ /dev/null @@ -1,16 +0,0 @@ -describe('Sequencediagram', () => { - it('should render a simple sequence diagrams', () => { - const url = 'http://localhost:9000/webpackUsage.html'; - - cy.visit(url); - cy.get('body').find('svg').should('have.length', 1); - }); - it('should handle html escapings properly', () => { - const url = 'http://localhost:9000/webpackUsage.html?test-html-escaping=true'; - - cy.visit(url); - cy.get('body').find('svg').should('have.length', 1); - - cy.get('g.label > foreignobject > div').should('not.contain.text', ''); - }); -}); diff --git a/cypress/integration/rendering/packet.spec.ts b/cypress/integration/rendering/packet.spec.ts new file mode 100644 index 0000000000..61555ea530 --- /dev/null +++ b/cypress/integration/rendering/packet.spec.ts @@ -0,0 +1,67 @@ +import { imgSnapshotTest } from '../../helpers/util'; + +describe('packet structure', () => { + it('should render a simple packet diagram', () => { + imgSnapshotTest( + `packet-beta + title Hello world + 0-10: "hello" +` + ); + }); + + it('should render a complex packet diagram', () => { + imgSnapshotTest( + `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-223: "data" + ` + ); + }); + + it('should render a complex packet diagram with showBits false', () => { + imgSnapshotTest( + ` + --- + title: "Packet Diagram" + config: + packet: + showBits: false + --- + 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-223: "data" + ` + ); + }); +}); diff --git a/cypress/platform/e2e.html b/cypress/platform/e2e.html index 949fa57986..d80caf7a46 100644 --- a/cypress/platform/e2e.html +++ b/cypress/platform/e2e.html @@ -1,7 +1,7 @@ - + Should correctly load a third-party diagram using registerDiagram + + diff --git a/cypress/platform/iife.html b/cypress/platform/iife.html new file mode 100644 index 0000000000..7122785fc2 --- /dev/null +++ b/cypress/platform/iife.html @@ -0,0 +1,29 @@ + + + 
+graph TB
+      a --> b
+      a --> c
+      b --> d
+      c --> d
+
+ +
+ + + + + diff --git a/cypress/platform/interaction.html b/cypress/platform/interaction.html index 59aadcbbb4..a9fe7266b0 100644 --- a/cypress/platform/interaction.html +++ b/cypress/platform/interaction.html @@ -17,20 +17,20 @@ graph TB Function-->URL click Function clickByFlow "Add a div" - click URL "http://localhost:9000/webpackUsage.html" "Visit mermaid docs" + click URL "http://localhost:9000/info.html" "Visit mermaid docs" 
   graph TB
     1Function-->2URL
     click 1Function clickByFlow "Add a div"
-    click 2URL "http://localhost:9000/webpackUsage.html" "Visit mermaid docs"
+    click 2URL "http://localhost:9000/info.html" "Visit mermaid docs"
       
   classDiagram
     class Test
     class ShapeLink
-    link ShapeLink "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link"
+    link ShapeLink "http://localhost:9000/info.html" "This is a tooltip for a link"
     class ShapeCallback
     callback ShapeCallback "clickByClass" "This is a tooltip for a callback"
@@ -42,7 +42,7 @@ 
   classDiagram-v2
     class ShapeLink
-    link ShapeLink "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link"
+    link ShapeLink "http://localhost:9000/info.html" "This is a tooltip for a link"
@@ -77,7 +77,7 @@ Calling a Callback (look at the console log) :cl2, after cl1, 3d Calling a Callback with args :cl3, after cl1, 3d - click cl1 href "http://localhost:9000/webpackUsage.html" + click cl1 href "http://localhost:9000/info.html" click cl2 call clickByGantt() click cl3 call clickByGantt("test1", test2, test3) @@ -102,9 +102,15 @@ div.className = 'created-by-gant-click'; div.style = 'padding: 20px; background: green; color: white;'; div.innerText = 'Clicked By Gant'; - if (arg1) div.innerText += ' ' + arg1; - if (arg2) div.innerText += ' ' + arg2; - if (arg3) div.innerText += ' ' + arg3; + if (arg1) { + div.innerText += ' ' + arg1; + } + if (arg2) { + div.innerText += ' ' + arg2; + } + if (arg3) { + div.innerText += ' ' + arg3; + } document.getElementsByTagName('body')[0].appendChild(div); } diff --git a/cypress/platform/viewer.js b/cypress/platform/viewer.js index 0b566e329c..39f456c230 100644 --- a/cypress/platform/viewer.js +++ b/cypress/platform/viewer.js @@ -1,6 +1,6 @@ -import mermaid2 from './mermaid.esm.mjs'; -import externalExample from '../../packages/mermaid-example-diagram/dist/mermaid-example-diagram.core.mjs'; -import zenUml from '../../packages/mermaid-zenuml/dist/mermaid-zenuml.core.mjs'; +import mermaid from './mermaid.esm.mjs'; +import externalExample from './mermaid-example-diagram.esm.mjs'; +import zenUml from './mermaid-zenuml.esm.mjs'; function b64ToUtf8(str) { return decodeURIComponent(escape(window.atob(str))); @@ -45,9 +45,9 @@ const contentLoaded = async function () { document.getElementsByTagName('body')[0].appendChild(div); } - await mermaid2.registerExternalDiagrams([externalExample, zenUml]); - mermaid2.initialize(graphObj.mermaid); - await mermaid2.run(); + await mermaid.registerExternalDiagrams([externalExample, zenUml]); + mermaid.initialize(graphObj.mermaid); + await mermaid.run(); } }; @@ -95,18 +95,14 @@ const contentLoadedApi = async function () { divs[i] = div; } - const defaultE2eCnf = { theme: 'forest' }; + const defaultE2eCnf = { theme: 'forest', startOnLoad: false }; const cnf = merge(defaultE2eCnf, graphObj.mermaid); - mermaid2.initialize(cnf); + mermaid.initialize(cnf); for (let i = 0; i < numCodes; i++) { - const { svg, bindFunctions } = await mermaid2.render( - 'newid' + i, - graphObj.code[i], - divs[i] - ); + const { svg, bindFunctions } = await mermaid.render('newid' + i, graphObj.code[i], divs[i]); div.innerHTML = svg; bindFunctions(div); } @@ -114,18 +110,21 @@ const contentLoadedApi = async function () { const div = document.createElement('div'); div.id = 'block'; div.className = 'mermaid'; - console.warn('graphObj.mermaid', graphObj.mermaid); + console.warn('graphObj', graphObj); document.getElementsByTagName('body')[0].appendChild(div); - mermaid2.initialize(graphObj.mermaid); - - const { svg, bindFunctions } = await mermaid2.render('newid', graphObj.code, div); + mermaid.initialize(graphObj.mermaid); + const { svg, bindFunctions } = await mermaid.render('newid', graphObj.code, div); div.innerHTML = svg; + console.log(div.innerHTML); bindFunctions(div); } } }; if (typeof document !== 'undefined') { + mermaid.initialize({ + startOnLoad: false, + }); /*! * Wait for document loaded before starting the execution */ diff --git a/cypress/platform/webpackUsage.html b/cypress/platform/webpackUsage.html deleted file mode 100644 index 23df19f49e..0000000000 --- a/cypress/platform/webpackUsage.html +++ /dev/null @@ -1,19 +0,0 @@ - - - - - - -
- - - diff --git a/cypress/platform/xss.html b/cypress/platform/xss.html index fd42a55924..38cb9bab12 100644 --- a/cypress/platform/xss.html +++ b/cypress/platform/xss.html @@ -1,6 +1,5 @@ - 
@@ -13,22 +29,37 @@
       c --> d
-
+
+ Type code to view diagram: +
+ +
+
+ 
info
+ + diff --git a/demos/dev/reload.js b/demos/dev/reload.js new file mode 100644 index 0000000000..f6d52c60dd --- /dev/null +++ b/demos/dev/reload.js @@ -0,0 +1,22 @@ +// Connect to the server and reload the page if the server sends a reload message +const connectToEvents = () => { + const events = new EventSource('/events'); + const loadTime = Date.now(); + events.onmessage = (event) => { + const time = JSON.parse(event.data); + if (time && time > loadTime) { + location.reload(); + } + }; + events.onerror = (error) => { + console.error(error); + events.close(); + // Try to reconnect after 1 second in case of errors + setTimeout(connectToEvents, 1000); + }; + events.onopen = () => { + console.log('Connected to live reload server'); + }; +}; + +setTimeout(connectToEvents, 500); diff --git a/demos/flowchart-elk.html b/demos/flowchart-elk.html new file mode 100644 index 0000000000..69ac2d2bc6 --- /dev/null +++ b/demos/flowchart-elk.html @@ -0,0 +1,35 @@ + + + + + + Mermaid Flowchart ELK Test Page + + + +

Flowchart ELK

+ 
+		flowchart-elk TD
+      A([Start]) ==> B[Step 1]
+      B ==> C{Flow 1}
+      C -- Choice 1.1 --> D[Step 2.1]
+      C -- Choice 1.3 --> I[Step 2.3]
+      C == Choice 1.2 ==> E[Step 2.2]
+      D --> F{Flow 2}
+      E ==> F{Flow 2}
+      F{Flow 2} == Choice 2.1 ==> H[Feedback node]
+      H[Feedback node] ==> B[Step 1]
+      F{Flow 2} == Choice 2.2 ==> G((Finish))
+      
+
+ + + + diff --git a/demos/index.html b/demos/index.html index efe054b4d5..b333ac3ffd 100644 --- a/demos/index.html +++ b/demos/index.html @@ -81,6 +81,9 @@

ZenUML

  • Sankey

    • +
  • +

    Packet

    +

  • Layered Blocks

    • diff --git a/demos/packet.html b/demos/packet.html new file mode 100644 index 0000000000..f332dcf8cf --- /dev/null +++ b/demos/packet.html @@ -0,0 +1,141 @@ + + + + + + Mermaid Quick Test Page + + + + + +

    Packet diagram demo

    + +
    + 
    +      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-223: "data"
+
    + + 
    +      ---
+      config:
+        packet:
+          showBits: false
+      ---
+      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-223: "data"
+
    + + 
    +      ---
+      config:
+        theme: forest
+      ---
+      packet-beta
+        title Forest theme
+        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-223: "data"
+
    + + 
    +      ---
+      config:
+        theme: dark
+      ---
+      packet-beta
+        title Dark theme
+        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-223: "data"
+
    +
    + + + + + diff --git a/demos/pie.html b/demos/pie.html index 823f61716c..72e880c874 100644 --- a/demos/pie.html +++ b/demos/pie.html @@ -50,7 +50,7 @@

    Pie chart demos

    ``` @@ -83,7 +83,7 @@ Example: B-->D(fa:fa-spinner); @@ -331,15 +331,17 @@ module.exports = (options) -> ## Advanced usage -**Syntax validation without rendering (Work in Progress)** +### Syntax validation without rendering -The **mermaid.parse(txt)** function validates graph definitions without rendering a graph. **[This function is still a work in progress](https://github.com/mermaid-js/mermaid/issues/1066), find alternatives below.** +The `mermaid.parse(text, parseOptions)` function validates graph definitions without rendering a graph. -The function **mermaid.parse(txt)**, takes a text string as an argument and returns true if the definition follows mermaid's syntax and -false if it does not. The parseError function will be called when the parse function returns false. +The function `mermaid.parse(text, parseOptions)`, takes a text string as an argument and returns `{ diagramType: string }` if the definition follows mermaid's syntax. -When the parser encounters invalid syntax the **mermaid.parseError** function is called. It is possible to override this -function in order to handle the error in an application-specific way. +If the definition is invalid, the function returns `false` if `parseOptions.suppressErrors` is set to `true`. Otherwise, it throws an error. + +The parseError function will be called when the parse function throws an error. It will not be called if `parseOptions.suppressErrors` is set to `true`. + +It is possible to override this function in order to handle the error in an application-specific way. The code-example below in meta code illustrates how this could work: @@ -359,26 +361,10 @@ const textFieldUpdated = async function () { bindEventHandler('change', 'code', textFieldUpdated); ``` -**Alternative to mermaid.parse():** -One effective and more future-proof method of validating your graph definitions, is to paste and render them via the [Mermaid Live Editor](https://mermaid.live/). This will ensure that your code is compliant with the syntax of Mermaid's most recent version. - ## Configuration -Mermaid takes a number of options which lets you tweak the rendering of the diagrams. Currently there are three ways of -setting the options in mermaid. - -1. Instantiation of the configuration using the initialize call -2. _Using the global mermaid object_ - **Deprecated** -3. _using the global mermaid_config object_ - **Deprecated** -4. Instantiation of the configuration using the **mermaid.init** call- **Deprecated** - -The list above has two ways too many of doing this. Three are deprecated and will eventually be removed. The list of -configuration objects are described [in the mermaidAPI documentation](./setup/README.md). - -## Using the `mermaidAPI.initialize`/`mermaid.initialize` call - -The future proof way of setting the configuration is by using the initialization call to mermaid or mermaidAPI depending -on what kind of integration you use. +You can pass the required configuration to the `mermaid.initialize` call. This is the preferred way of configuring mermaid. +The list of configuration objects are described [in the mermaidAPI documentation](./setup/README.md). ```html @@ -278,15 +278,15 @@ In this example, `mermaid.js` is referenced in `src` as a separate JavaScript fi 
    -            graph LR 
-            A --- B 
-            B-->C[fa:fa-ban forbidden] 
+            graph LR
+            A --- B
+            B-->C[fa:fa-ban forbidden]
             B-->D(fa:fa-spinner);
     
    -            graph TD 
-            A[Client] --> B[Load Balancer] 
-            B --> C[Server1] 
+            graph TD
+            A[Client] --> B[Load Balancer]
+            B --> C[Server1]
             B --> D[Server2]
    ``` diff --git a/docs/syntax/mindmap.md b/docs/syntax/mindmap.md index 8de1a7f9fe..7a366f59d3 100644 --- a/docs/syntax/mindmap.md +++ b/docs/syntax/mindmap.md @@ -300,7 +300,7 @@ From version 9.4.0 you can simplify this code to: ```html ``` diff --git a/docs/syntax/packet.md b/docs/syntax/packet.md new file mode 100644 index 0000000000..d5decc4fbd --- /dev/null +++ b/docs/syntax/packet.md @@ -0,0 +1,141 @@ +> **Warning** +> +> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. +> +> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/packet.md](../../packages/mermaid/src/docs/syntax/packet.md). + +# Packet Diagram (v\+) + +## Introduction + +A packet diagram is a visual representation used to illustrate the structure and contents of a network packet. Network packets are the fundamental units of data transferred over a network. + +## Usage + +This diagram type is particularly useful for network engineers, educators, and students who require a clear and concise way to represent the structure of network packets. + +## Syntax + +```md +packet-beta +start: "Block name" %% Single-bit block +start-end: "Block name" %% Multi-bit blocks +... More Fields ... +``` + +## Examples + +```mermaid-example +--- +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" +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-example +packet-beta +title UDP Packet +0-15: "Source Port" +16-31: "Destination Port" +32-47: "Length" +48-63: "Checksum" +64-95: "Data (variable length)" +``` + +```mermaid +packet-beta +title UDP Packet +0-15: "Source Port" +16-31: "Destination Port" +32-47: "Length" +48-63: "Checksum" +64-95: "Data (variable length)" +``` + +## Details of Syntax + +- **Ranges**: Each line after the title represents a different field in the packet. The range (e.g., `0-15`) indicates the bit positions in the packet. +- **Field Description**: A brief description of what the field represents, enclosed in quotes. + +## Configuration + +Please refer to the [configuration](/config/schema-docs/config-defs-packet-diagram-config.html) guide for details. + + diff --git a/docs/syntax/timeline.md b/docs/syntax/timeline.md index 288b8992c7..4164772024 100644 --- a/docs/syntax/timeline.md +++ b/docs/syntax/timeline.md @@ -469,7 +469,7 @@ You can use this method to add mermaid including the timeline diagram to a web p ```html ``` diff --git a/netlify.toml b/netlify.toml index 2853f4c82d..50129d3ca3 100644 --- a/netlify.toml +++ b/netlify.toml @@ -7,9 +7,9 @@ base = "" # Directory that contains the deploy-ready HTML files and - # assets generated by the build. This is an absolute path relative + # assets generated by the build. This is an absolute path relative # to the base directory, which is the root by default (/). - # This sample publishes the directory located at the absolute + # This sample publishes the directory located at the absolute # path "root/project/build-output" publish = "mermaid-live-editor/docs" diff --git a/package.json b/package.json index c1a8db846e..a8ddc379ce 100644 --- a/package.json +++ b/package.json @@ -15,15 +15,15 @@ "git graph" ], "scripts": { - "build:vite": "tsx .vite/build.ts", - "build:mermaid": "pnpm build:vite --mermaid", - "build:viz": "pnpm build:mermaid --visualize", - "build:types": "tsc -p ./packages/mermaid/tsconfig.json --emitDeclarationOnly && tsc -p ./packages/mermaid-zenuml/tsconfig.json --emitDeclarationOnly && tsc -p ./packages/mermaid-example-diagram/tsconfig.json --emitDeclarationOnly", + "build": "pnpm build:esbuild && pnpm build:types", + "build:esbuild": "pnpm run -r clean && tsx .esbuild/build.ts", + "build:mermaid": "pnpm build:esbuild --mermaid", + "build:viz": "pnpm build:esbuild --visualize", + "build:types": "tsx .build/types.ts", "build:types:watch": "tsc -p ./packages/mermaid/tsconfig.json --emitDeclarationOnly --watch", - "build:watch": "pnpm build:vite --watch", - "build": "pnpm run -r clean && pnpm build:types && pnpm build:vite", - "dev": "concurrently \"pnpm build:vite --watch\" \"tsx .vite/server.ts\"", - "dev:coverage": "pnpm coverage:cypress:clean && VITE_COVERAGE=true pnpm dev", + "dev": "tsx .esbuild/server.ts", + "dev:vite": "tsx .vite/server.ts", + "dev:coverage": "pnpm coverage:cypress:clean && VITE_COVERAGE=true pnpm dev:vite", "release": "pnpm build", "lint": "eslint --cache --cache-strategy content --ignore-path .gitignore . && pnpm lint:jison && prettier --cache --check .", "lint:fix": "eslint --cache --cache-strategy content --fix --ignore-path .gitignore . && prettier --write . && tsx scripts/fixCSpell.ts", @@ -32,8 +32,8 @@ "cypress": "cypress run", "cypress:open": "cypress open", "e2e": "start-server-and-test dev http://localhost:9000/ cypress", + "e2e:coverage": "start-server-and-test dev:coverage http://localhost:9000/ cypress", "coverage:cypress:clean": "rimraf .nyc_output coverage/cypress", - "e2e:coverage": "pnpm coverage:cypress:clean && VITE_COVERAGE=true pnpm e2e", "coverage:merge": "tsx scripts/coverage.ts", "coverage": "pnpm test:coverage --run && pnpm e2e:coverage && pnpm coverage:merge", "ci": "vitest run", @@ -74,7 +74,7 @@ "@types/jsdom": "^21.1.1", "@types/lodash": "^4.14.194", "@types/mdast": "^3.0.11", - "@types/node": "^20.11.10", + "@types/node": "^20.11.17", "@types/prettier": "^2.7.2", "@types/rollup-plugin-visualizer": "^4.2.1", "@typescript-eslint/eslint-plugin": "^6.7.2", @@ -83,6 +83,7 @@ "@vitest/spy": "^0.34.0", "@vitest/ui": "^0.34.0", "ajv": "^8.12.0", + "chokidar": "^3.5.3", "concurrently": "^8.0.1", "cors": "^2.8.5", "cspell": "^8.3.2", @@ -108,6 +109,7 @@ "jison": "^0.4.18", "js-yaml": "^4.1.0", "jsdom": "^22.0.0", + "langium-cli": "3.0.1", "lint-staged": "^13.2.1", "nyc": "^15.1.0", "path-browserify": "^1.0.1", diff --git a/packages/mermaid-flowchart-elk/package.json b/packages/mermaid-flowchart-elk/package.json new file mode 100644 index 0000000000..aae77410cf --- /dev/null +++ b/packages/mermaid-flowchart-elk/package.json @@ -0,0 +1,45 @@ +{ + "name": "@mermaid-js/flowchart-elk", + "version": "1.0.0-rc.1", + "description": "Flowchart plugin for mermaid with ELK layout", + "module": "dist/mermaid-flowchart-elk.core.mjs", + "types": "dist/packages/mermaid-flowchart-elk/src/detector.d.ts", + "type": "module", + "exports": { + ".": { + "import": "./dist/mermaid-flowchart-elk.core.mjs", + "types": "./dist/packages/mermaid-flowchart-elk/src/detector.d.ts" + }, + "./*": "./*" + }, + "keywords": [ + "diagram", + "markdown", + "flowchart", + "elk", + "mermaid" + ], + "scripts": { + "prepublishOnly": "pnpm -w run build" + }, + "repository": { + "type": "git", + "url": "https://github.com/mermaid-js/mermaid" + }, + "author": "Knut Sveidqvist", + "license": "MIT", + "dependencies": { + "d3": "^7.4.0", + "dagre-d3-es": "7.0.10", + "khroma": "^2.0.0", + "elkjs": "^0.8.2" + }, + "devDependencies": { + "concurrently": "^8.0.0", + "rimraf": "^5.0.0", + "mermaid": "workspace:^" + }, + "files": [ + "dist" + ] +} diff --git a/packages/mermaid/src/diagrams/flowchart/elk/detector.spec.ts b/packages/mermaid-flowchart-elk/src/detector.spec.ts similarity index 100% rename from packages/mermaid/src/diagrams/flowchart/elk/detector.spec.ts rename to packages/mermaid-flowchart-elk/src/detector.spec.ts diff --git a/packages/mermaid-flowchart-elk/src/detector.ts b/packages/mermaid-flowchart-elk/src/detector.ts new file mode 100644 index 0000000000..52fb355a55 --- /dev/null +++ b/packages/mermaid-flowchart-elk/src/detector.ts @@ -0,0 +1,32 @@ +import type { + ExternalDiagramDefinition, + DiagramDetector, + DiagramLoader, +} from '../../mermaid/src/diagram-api/types.js'; + +const id = 'flowchart-elk'; + +const detector: DiagramDetector = (txt, config): boolean => { + if ( + // If diagram explicitly states flowchart-elk + /^\s*flowchart-elk/.test(txt) || + // If a flowchart/graph diagram has their default renderer set to elk + (/^\s*flowchart|graph/.test(txt) && config?.flowchart?.defaultRenderer === 'elk') + ) { + return true; + } + return false; +}; + +const loader: DiagramLoader = async () => { + const { diagram } = await import('./diagram-definition.js'); + return { id, diagram }; +}; + +const plugin: ExternalDiagramDefinition = { + id, + detector, + loader, +}; + +export default plugin; diff --git a/packages/mermaid-flowchart-elk/src/diagram-definition.ts b/packages/mermaid-flowchart-elk/src/diagram-definition.ts new file mode 100644 index 0000000000..a4e678dcc3 --- /dev/null +++ b/packages/mermaid-flowchart-elk/src/diagram-definition.ts @@ -0,0 +1,12 @@ +// @ts-ignore: JISON typing missing +import parser from '../../mermaid/src/diagrams/flowchart/parser/flow.jison'; +import * as db from '../../mermaid/src/diagrams/flowchart/flowDb.js'; +import styles from '../../mermaid/src/diagrams/flowchart/styles.js'; +import renderer from './flowRenderer-elk.js'; + +export const diagram = { + db, + renderer, + parser, + styles, +}; diff --git a/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js b/packages/mermaid-flowchart-elk/src/flowRenderer-elk.js similarity index 96% rename from packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js rename to packages/mermaid-flowchart-elk/src/flowRenderer-elk.js index e1d1175008..01ccdd9d96 100644 --- a/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js +++ b/packages/mermaid-flowchart-elk/src/flowRenderer-elk.js @@ -1,17 +1,17 @@ import { select, line, curveLinear } from 'd3'; -import { insertNode } from '../../../dagre-wrapper/nodes.js'; -import insertMarkers from '../../../dagre-wrapper/markers.js'; -import { insertEdgeLabel } from '../../../dagre-wrapper/edges.js'; +import { insertNode } from '../../mermaid/src/dagre-wrapper/nodes.js'; +import insertMarkers from '../../mermaid/src/dagre-wrapper/markers.js'; +import { insertEdgeLabel } from '../../mermaid/src/dagre-wrapper/edges.js'; import { findCommonAncestor } from './render-utils.js'; -import { labelHelper } from '../../../dagre-wrapper/shapes/util.js'; -import { getConfig } from '../../../config.js'; -import { log } from '../../../logger.js'; -import { setupGraphViewbox } from '../../../setupGraphViewbox.js'; -import common from '../../common/common.js'; -import { interpolateToCurve, getStylesFromArray } from '../../../utils.js'; +import { labelHelper } from '../../mermaid/src/dagre-wrapper/shapes/util.js'; +import { getConfig } from '../../mermaid/src/config.js'; +import { log } from '../../mermaid/src/logger.js'; +import { setupGraphViewbox } from '../../mermaid/src/setupGraphViewbox.js'; +import common from '../../mermaid/src/diagrams/common/common.js'; +import { interpolateToCurve, getStylesFromArray } from '../../mermaid/src/utils.js'; import ELK from 'elkjs/lib/elk.bundled.js'; -import { getLineFunctionsWithOffset } from '../../../utils/lineWithOffset.js'; -import { addEdgeMarkers } from '../../../dagre-wrapper/edgeMarker.js'; +import { getLineFunctionsWithOffset } from '../../mermaid/src/utils/lineWithOffset.js'; +import { addEdgeMarkers } from '../../mermaid/src/dagre-wrapper/edgeMarker.js'; const elk = new ELK(); @@ -594,7 +594,7 @@ const addMarkersToEdge = function (svgPath, edgeData, diagramType, arrowMarkerAb * * @param text * @param diagObj - * @returns {Record} ClassDef styles + * @returns {Record} ClassDef styles */ export const getClasses = function (text, diagObj) { log.info('Extracting classes'); diff --git a/packages/mermaid/src/diagrams/flowchart/elk/render-utils.spec.ts b/packages/mermaid-flowchart-elk/src/render-utils.spec.ts similarity index 100% rename from packages/mermaid/src/diagrams/flowchart/elk/render-utils.spec.ts rename to packages/mermaid-flowchart-elk/src/render-utils.spec.ts diff --git a/packages/mermaid/src/diagrams/flowchart/elk/render-utils.ts b/packages/mermaid-flowchart-elk/src/render-utils.ts similarity index 100% rename from packages/mermaid/src/diagrams/flowchart/elk/render-utils.ts rename to packages/mermaid-flowchart-elk/src/render-utils.ts diff --git a/packages/mermaid/src/diagrams/flowchart/elk/styles.ts b/packages/mermaid-flowchart-elk/src/styles.ts similarity index 100% rename from packages/mermaid/src/diagrams/flowchart/elk/styles.ts rename to packages/mermaid-flowchart-elk/src/styles.ts diff --git a/packages/mermaid-flowchart-elk/tsconfig.json b/packages/mermaid-flowchart-elk/tsconfig.json new file mode 100644 index 0000000000..5a41d06030 --- /dev/null +++ b/packages/mermaid-flowchart-elk/tsconfig.json @@ -0,0 +1,10 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "rootDir": "../..", + "outDir": "./dist", + "types": ["vitest/importMeta", "vitest/globals"] + }, + "include": ["./src/**/*.ts"], + "typeRoots": ["./src/types"] +} diff --git a/packages/mermaid-zenuml/package.json b/packages/mermaid-zenuml/package.json index cbe8dd9f8c..f7547f6a0d 100644 --- a/packages/mermaid-zenuml/package.json +++ b/packages/mermaid-zenuml/package.json @@ -19,6 +19,7 @@ "mermaid" ], "scripts": { + "clean": "rimraf dist", "prepublishOnly": "pnpm -w run build" }, "repository": { diff --git a/packages/mermaid-zenuml/src/parser.ts b/packages/mermaid-zenuml/src/parser.ts index 8c0ca55d52..b7f6a0fdea 100644 --- a/packages/mermaid-zenuml/src/parser.ts +++ b/packages/mermaid-zenuml/src/parser.ts @@ -5,7 +5,6 @@ * This is a dummy parser that satisfies the mermaid API logic. */ export default { - parser: { yy: {} }, parse: () => { // no op }, diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json index 3626671ca5..b7daf4a871 100644 --- a/packages/mermaid/package.json +++ b/packages/mermaid/package.json @@ -1,6 +1,6 @@ { "name": "mermaid", - "version": "10.8.0", + "version": "11.0.0-alpha.6", "description": "Markdown-ish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.", "type": "module", "module": "./dist/mermaid.core.mjs", @@ -60,8 +60,7 @@ }, "dependencies": { "@braintree/sanitize-url": "^6.0.1", - "@types/d3-scale": "^4.0.3", - "@types/d3-scale-chromatic": "^3.0.0", + "@mermaid-js/parser": "workspace:^", "cytoscape": "^3.28.1", "cytoscape-cose-bilkent": "^4.1.0", "d3": "^7.4.0", @@ -74,11 +73,9 @@ "khroma": "^2.0.0", "lodash-es": "^4.17.21", "mdast-util-from-markdown": "^1.3.0", - "non-layered-tidy-tree-layout": "^2.0.2", "stylis": "^4.1.3", "ts-dedent": "^2.2.0", - "uuid": "^9.0.0", - "web-worker": "^1.2.0" + "uuid": "^9.0.0" }, "devDependencies": { "@adobe/jsonschema2md": "^7.1.4", @@ -86,6 +83,7 @@ "@types/d3": "^7.4.0", "@types/d3-sankey": "^0.12.1", "@types/d3-scale": "^4.0.3", + "@types/d3-scale-chromatic": "^3.0.0", "@types/d3-selection": "^3.0.5", "@types/d3-shape": "^3.1.1", "@types/dompurify": "^3.0.2", diff --git a/packages/mermaid/scripts/create-types-from-json-schema.mts b/packages/mermaid/scripts/create-types-from-json-schema.mts index b028fe818d..a300ef00fb 100644 --- a/packages/mermaid/scripts/create-types-from-json-schema.mts +++ b/packages/mermaid/scripts/create-types-from-json-schema.mts @@ -233,6 +233,23 @@ async function generateTypescript(mermaidConfigSchema: JSONSchemaType = {}) { - this.text = encodeEntities(text); - this.text += '\n'; - const cnf = configApi.getConfig(); + public static async fromText(text: string, metadata: Pick = {}) { + const config = configApi.getConfig(); + const type = detectType(text, config); + text = encodeEntities(text) + '\n'; try { - this.type = detectType(text, cnf); + getDiagram(type); } catch (e) { - this.type = 'error'; - this.detectError = e as UnknownDiagramError; + const loader = getDiagramLoader(type); + if (!loader) { + throw new UnknownDiagramError(`Diagram ${type} not found.`); + } + // Diagram not available, loading it. + // new diagram will try getDiagram again and if fails then it is a valid throw + const { id, diagram } = await loader(); + registerDiagram(id, diagram); } - const diagram = getDiagram(this.type); - log.debug('Type ' + this.type); - // Setup diagram - this.db = diagram.db; - this.renderer = diagram.renderer; - this.parser = diagram.parser; - this.parser.parser.yy = this.db; - this.init = diagram.init; - this.parse(); - } - - parse() { - if (this.detectError) { - throw this.detectError; + const { db, parser, renderer, init } = getDiagram(type); + if (parser.parser) { + // The parser.parser.yy is only present in JISON parsers. So, we'll only set if required. + parser.parser.yy = db; } - this.db.clear?.(); - const config = configApi.getConfig(); - this.init?.(config); + db.clear?.(); + init?.(config); // This block was added for legacy compatibility. Use frontmatter instead of adding more special cases. - if (this.metadata.title) { - this.db.setDiagramTitle?.(this.metadata.title); + if (metadata.title) { + db.setDiagramTitle?.(metadata.title); } - this.parser.parse(this.text); + await parser.parse(text); + return new Diagram(type, text, db, parser, renderer); } + private constructor( + public type: string, + public text: string, + public db: DiagramDefinition['db'], + public parser: DiagramDefinition['parser'], + public renderer: DiagramDefinition['renderer'] + ) {} + async render(id: string, version: string) { await this.renderer.draw(this.text, id, version, this); } @@ -69,34 +64,3 @@ export class Diagram { return this.type; } } - -/** - * Parse the text asynchronously and generate a Diagram object asynchronously. - * **Warning:** This function may be changed in the future. - * @alpha - * @param text - The mermaid diagram definition. - * @param metadata - Diagram metadata, defined in YAML. - * @returns A the Promise of a Diagram object. - * @throws {@link UnknownDiagramError} if the diagram type can not be found. - * @privateRemarks This is exported as part of the public mermaidAPI. - */ -export const getDiagramFromText = async ( - text: string, - metadata: Pick = {} -): Promise => { - const type = detectType(text, configApi.getConfig()); - try { - // Trying to find the diagram - getDiagram(type); - } catch (error) { - const loader = getDiagramLoader(type); - if (!loader) { - throw new UnknownDiagramError(`Diagram ${type} not found.`); - } - // Diagram not available, loading it. - // new diagram will try getDiagram again and if fails then it is a valid throw - const { id, diagram } = await loader(); - registerDiagram(id, diagram); - } - return new Diagram(text, metadata); -}; diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts index 0ba3178680..97ed4eb8dc 100644 --- a/packages/mermaid/src/config.type.ts +++ b/packages/mermaid/src/config.type.ts @@ -61,7 +61,7 @@ export interface MermaidConfig { * You may also use `themeCSS` to override this value. * */ - theme?: string | 'default' | 'forest' | 'dark' | 'neutral' | 'null'; + theme?: 'default' | 'forest' | 'dark' | 'neutral' | 'null'; themeVariables?: any; themeCSS?: string; /** @@ -87,26 +87,11 @@ export interface MermaidConfig { * This option decides the amount of logging to be used by mermaid. * */ - logLevel?: - | number - | string - | 0 - | 2 - | 1 - | 'trace' - | 'debug' - | 'info' - | 'warn' - | 'error' - | 'fatal' - | 3 - | 4 - | 5 - | undefined; + logLevel?: 'trace' | 0 | 'debug' | 1 | 'info' | 2 | 'warn' | 3 | 'error' | 4 | 'fatal' | 5; /** * Level of trust for parsed diagram */ - securityLevel?: string | 'strict' | 'loose' | 'antiscript' | 'sandbox' | undefined; + securityLevel?: 'strict' | 'loose' | 'antiscript' | 'sandbox'; /** * Dictates whether mermaid starts on Page load */ @@ -169,19 +154,43 @@ export interface MermaidConfig { gitGraph?: GitGraphDiagramConfig; c4?: C4DiagramConfig; sankey?: SankeyDiagramConfig; + packet?: PacketDiagramConfig; block?: BlockDiagramConfig; dompurifyConfig?: DOMPurifyConfiguration; wrap?: boolean; fontSize?: number; } /** - * The object containing configurations specific for block diagrams. + * The object containing configurations specific for packet diagrams. * * This interface was referenced by `MermaidConfig`'s JSON-Schema - * via the `definition` "BlockDiagramConfig". + * via the `definition` "PacketDiagramConfig". */ -export interface BlockDiagramConfig extends BaseDiagramConfig { - padding?: number; +export interface PacketDiagramConfig extends BaseDiagramConfig { + /** + * The height of each row in the packet diagram. + */ + rowHeight?: number; + /** + * The width of each bit in the packet diagram. + */ + bitWidth?: number; + /** + * The number of bits to display per row. + */ + bitsPerRow?: number; + /** + * Toggle to display or hide bit numbers. + */ + showBits?: boolean; + /** + * The horizontal padding between the blocks in a row. + */ + paddingX?: number; + /** + * The vertical padding between the rows. + */ + paddingY?: number; } /** * This interface was referenced by `MermaidConfig`'s JSON-Schema @@ -197,6 +206,15 @@ export interface BaseDiagramConfig { */ useMaxWidth?: boolean; } +/** + * The object containing configurations specific for block diagrams. + * + * This interface was referenced by `MermaidConfig`'s JSON-Schema + * via the `definition` "BlockDiagramConfig". + */ +export interface BlockDiagramConfig extends BaseDiagramConfig { + padding?: number; +} /** * The object containing configurations specific for c4 diagrams * @@ -807,8 +825,8 @@ export interface XYChartConfig extends BaseDiagramConfig { * Should show the chart title */ showTitle?: boolean; - xAxis?: XYChartAxisConfig1; - yAxis?: XYChartAxisConfig2; + xAxis?: XYChartAxisConfig; + yAxis?: XYChartAxisConfig; /** * How to plot will be drawn horizontal or vertical */ @@ -818,104 +836,6 @@ export interface XYChartConfig extends BaseDiagramConfig { */ plotReservedSpacePercent?: number; } -/** - * This object contains configuration for XYChart axis config - */ -export interface XYChartAxisConfig1 { - /** - * Should show the axis labels (tick text) - */ - showLabel?: boolean; - /** - * font size of the axis labels (tick text) - */ - labelFontSize?: number; - /** - * top and bottom space from axis label (tick text) - */ - labelPadding?: number; - /** - * Should show the axis title - */ - showTitle?: boolean; - /** - * font size of the axis title - */ - titleFontSize?: number; - /** - * top and bottom space from axis title - */ - titlePadding?: number; - /** - * Should show the axis tick lines - */ - showTick?: boolean; - /** - * length of the axis tick lines - */ - tickLength?: number; - /** - * width of the axis tick lines - */ - tickWidth?: number; - /** - * Show line across the axis - */ - showAxisLine?: boolean; - /** - * Width of the axis line - */ - axisLineWidth?: number; -} -/** - * This object contains configuration for XYChart axis config - */ -export interface XYChartAxisConfig2 { - /** - * Should show the axis labels (tick text) - */ - showLabel?: boolean; - /** - * font size of the axis labels (tick text) - */ - labelFontSize?: number; - /** - * top and bottom space from axis label (tick text) - */ - labelPadding?: number; - /** - * Should show the axis title - */ - showTitle?: boolean; - /** - * font size of the axis title - */ - titleFontSize?: number; - /** - * top and bottom space from axis title - */ - titlePadding?: number; - /** - * Should show the axis tick lines - */ - showTick?: boolean; - /** - * length of the axis tick lines - */ - tickLength?: number; - /** - * width of the axis tick lines - */ - tickWidth?: number; - /** - * Show line across the axis - */ - showAxisLine?: boolean; - /** - * Width of the axis line - */ - axisLineWidth?: number; -} /** * The object containing configurations specific for entity relationship diagrams * @@ -936,7 +856,7 @@ export interface ErDiagramConfig extends BaseDiagramConfig { /** * Directional bias for layout of entities */ - layoutDirection?: string | 'TB' | 'BT' | 'LR' | 'RL'; + layoutDirection?: 'TB' | 'BT' | 'LR' | 'RL'; /** * The minimum width of an entity box. Expressed in pixels. */ @@ -1001,7 +921,7 @@ export interface StateDiagramConfig extends BaseDiagramConfig { * Decides which rendering engine that is to be used for the rendering. * */ - defaultRenderer?: string | 'dagre-d3' | 'dagre-wrapper' | 'elk'; + defaultRenderer?: 'dagre-d3' | 'dagre-wrapper' | 'elk'; } /** * This interface was referenced by `MermaidConfig`'s JSON-Schema @@ -1025,7 +945,7 @@ export interface ClassDiagramConfig extends BaseDiagramConfig { * Decides which rendering engine that is to be used for the rendering. * */ - defaultRenderer?: string | 'dagre-d3' | 'dagre-wrapper' | 'elk'; + defaultRenderer?: 'dagre-d3' | 'dagre-wrapper' | 'elk'; nodeSpacing?: number; rankSpacing?: number; /** @@ -1085,7 +1005,7 @@ export interface JourneyDiagramConfig extends BaseDiagramConfig { /** * Multiline message alignment */ - messageAlign?: string | 'left' | 'center' | 'right'; + messageAlign?: 'left' | 'center' | 'right'; /** * Prolongs the edge of the diagram downwards. * @@ -1164,7 +1084,7 @@ export interface TimelineDiagramConfig extends BaseDiagramConfig { /** * Multiline message alignment */ - messageAlign?: string | 'left' | 'center' | 'right'; + messageAlign?: 'left' | 'center' | 'right'; /** * Prolongs the edge of the diagram downwards. * @@ -1275,7 +1195,7 @@ export interface GanttDiagramConfig extends BaseDiagramConfig { * Controls the display mode. * */ - displayMode?: string | 'compact'; + displayMode?: '' | 'compact'; /** * On which day a week-based interval should start * @@ -1334,7 +1254,7 @@ export interface SequenceDiagramConfig extends BaseDiagramConfig { /** * Multiline message alignment */ - messageAlign?: string | 'left' | 'center' | 'right'; + messageAlign?: 'left' | 'center' | 'right'; /** * Mirror actors under diagram * @@ -1391,7 +1311,7 @@ export interface SequenceDiagramConfig extends BaseDiagramConfig { /** * This sets the text alignment of actor-attached notes */ - noteAlign?: string | 'left' | 'center' | 'right'; + noteAlign?: 'left' | 'center' | 'right'; /** * This sets the font size of actor messages */ @@ -1475,7 +1395,7 @@ export interface FlowchartDiagramConfig extends BaseDiagramConfig { * Defines how mermaid renders curves for flowcharts. * */ - curve?: string | 'basis' | 'linear' | 'cardinal'; + curve?: 'basis' | 'linear' | 'cardinal'; /** * Represents the padding between the labels and the shape * @@ -1487,7 +1407,7 @@ export interface FlowchartDiagramConfig extends BaseDiagramConfig { * Decides which rendering engine that is to be used for the rendering. * */ - defaultRenderer?: string | 'dagre-d3' | 'dagre-wrapper' | 'elk'; + defaultRenderer?: 'dagre-d3' | 'dagre-wrapper' | 'elk'; /** * Width of nodes where text is wrapped. * @@ -1511,13 +1431,7 @@ export interface SankeyDiagramConfig extends BaseDiagramConfig { * */ linkColor?: SankeyLinkColor | string; - /** - * Controls the alignment of the Sankey diagrams. - * - * See . - * - */ - nodeAlignment?: 'left' | 'right' | 'center' | 'justify'; + nodeAlignment?: SankeyNodeAlignment; useMaxWidth?: boolean; /** * Toggle to display or hide values along with title. diff --git a/packages/mermaid/src/defaultConfig.ts b/packages/mermaid/src/defaultConfig.ts index fb9db0c6a9..76a8152b7a 100644 --- a/packages/mermaid/src/defaultConfig.ts +++ b/packages/mermaid/src/defaultConfig.ts @@ -257,6 +257,9 @@ const config: RequiredDeep = { // TODO: can we make this default to `true` instead? useMaxWidth: false, }, + packet: { + ...defaultConfigJson.packet, + }, }; const keyify = (obj: any, prefix = ''): string[] => diff --git a/packages/mermaid/src/diagram-api/detectType.ts b/packages/mermaid/src/diagram-api/detectType.ts index ba78dbe55e..aed8ca964e 100644 --- a/packages/mermaid/src/diagram-api/detectType.ts +++ b/packages/mermaid/src/diagram-api/detectType.ts @@ -71,10 +71,9 @@ export const registerLazyLoadedDiagrams = (...diagrams: ExternalDiagramDefinitio export const addDetector = (key: string, detector: DiagramDetector, loader?: DiagramLoader) => { if (detectors[key]) { - log.error(`Detector with key ${key} already exists`); - } else { - detectors[key] = { detector, loader }; + log.warn(`Detector with key ${key} already exists. Overwriting.`); } + detectors[key] = { detector, loader }; log.debug(`Detector with key ${key} added${loader ? ' with loader' : ''}`); }; diff --git a/packages/mermaid/src/diagram-api/diagram-orchestration.ts b/packages/mermaid/src/diagram-api/diagram-orchestration.ts index eb123c4a20..55d05c9aaa 100644 --- a/packages/mermaid/src/diagram-api/diagram-orchestration.ts +++ b/packages/mermaid/src/diagram-api/diagram-orchestration.ts @@ -20,6 +20,7 @@ import flowchartElk from '../diagrams/flowchart/elk/detector.js'; import timeline from '../diagrams/timeline/detector.js'; import mindmap from '../diagrams/mindmap/detector.js'; import sankey from '../diagrams/sankey/sankeyDetector.js'; +import { packet } from '../diagrams/packet/detector.js'; import block from '../diagrams/block/blockDetector.js'; import { registerLazyLoadedDiagrams } from './detectType.js'; import { registerDiagram } from './diagramAPI.js'; @@ -51,7 +52,6 @@ export const addDiagrams = () => { }, }, parser: { - parser: { yy: {} }, parse: () => { throw new Error( 'Diagrams beginning with --- are not valid. ' + @@ -88,6 +88,7 @@ export const addDiagrams = () => { journey, quadrantChart, sankey, + packet, xychart, block ); diff --git a/packages/mermaid/src/diagram-api/diagramAPI.spec.ts b/packages/mermaid/src/diagram-api/diagramAPI.spec.ts index 2cafd695ba..fd0e458425 100644 --- a/packages/mermaid/src/diagram-api/diagramAPI.spec.ts +++ b/packages/mermaid/src/diagram-api/diagramAPI.spec.ts @@ -2,12 +2,12 @@ import { detectType } from './detectType.js'; import { getDiagram, registerDiagram } from './diagramAPI.js'; import { addDiagrams } from './diagram-orchestration.js'; import type { DiagramDetector } from './types.js'; -import { getDiagramFromText } from '../Diagram.js'; +import { Diagram } from '../Diagram.js'; import { it, describe, expect, beforeAll } from 'vitest'; addDiagrams(); beforeAll(async () => { - await getDiagramFromText('sequenceDiagram'); + await Diagram.fromText('sequenceDiagram'); }); describe('DiagramAPI', () => { @@ -39,7 +39,6 @@ describe('DiagramAPI', () => { parse: (_text) => { return; }, - parser: { yy: {} }, }, renderer: { draw: () => { diff --git a/packages/mermaid/src/diagram-api/diagramAPI.ts b/packages/mermaid/src/diagram-api/diagramAPI.ts index 7ca9d58043..5ea3825ef5 100644 --- a/packages/mermaid/src/diagram-api/diagramAPI.ts +++ b/packages/mermaid/src/diagram-api/diagramAPI.ts @@ -49,7 +49,7 @@ export const registerDiagram = ( detector?: DiagramDetector ) => { if (diagrams[id]) { - throw new Error(`Diagram ${id} already registered.`); + log.warn(`Diagram with id ${id} already registered. Overwriting.`); } diagrams[id] = diagram; if (detector) { diff --git a/packages/mermaid/src/diagram-api/frontmatter.ts b/packages/mermaid/src/diagram-api/frontmatter.ts index c95e05f2cf..c8d662c280 100644 --- a/packages/mermaid/src/diagram-api/frontmatter.ts +++ b/packages/mermaid/src/diagram-api/frontmatter.ts @@ -1,4 +1,4 @@ -import type { MermaidConfig } from '../config.type.js'; +import type { GanttDiagramConfig, MermaidConfig } from '../config.type.js'; import { frontMatterRegex } from './regexes.js'; // The "* as yaml" part is necessary for tree-shaking import * as yaml from 'js-yaml'; @@ -6,7 +6,7 @@ import * as yaml from 'js-yaml'; interface FrontMatterMetadata { title?: string; // Allows custom display modes. Currently used for compact mode in gantt charts. - displayMode?: string; + displayMode?: GanttDiagramConfig['displayMode']; config?: MermaidConfig; } @@ -44,7 +44,7 @@ export function extractFrontMatter(text: string): FrontMatterResult { // Only add properties that are explicitly supported, if they exist if (parsed.displayMode) { - metadata.displayMode = parsed.displayMode.toString(); + metadata.displayMode = parsed.displayMode.toString() as GanttDiagramConfig['displayMode']; } if (parsed.title) { metadata.title = parsed.title.toString(); diff --git a/packages/mermaid/src/diagram-api/types.ts b/packages/mermaid/src/diagram-api/types.ts index 16c5bdb7a0..6ab82bd0dc 100644 --- a/packages/mermaid/src/diagram-api/types.ts +++ b/packages/mermaid/src/diagram-api/types.ts @@ -1,7 +1,8 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ +import type * as d3 from 'd3'; +import type { SetRequired } from 'type-fest'; import type { Diagram } from '../Diagram.js'; import type { BaseDiagramConfig, MermaidConfig } from '../config.type.js'; -import type * as d3 from 'd3'; export interface DiagramMetadata { title?: string; @@ -39,6 +40,22 @@ export interface DiagramDB { bindFunctions?: (element: Element) => void; } +/** + * DiagramDB with fields that is required for all new diagrams. + */ +export type DiagramDBBase = { + getConfig: () => Required; +} & SetRequired< + DiagramDB, + | 'clear' + | 'getAccTitle' + | 'getDiagramTitle' + | 'getAccDescription' + | 'setAccDescription' + | 'setAccTitle' + | 'setDiagramTitle' +>; + // This is what is returned from getClasses(...) methods. // It is slightly renamed to ..StyleClassDef instead of just ClassDef because "class" is a greatly ambiguous and overloaded word. // It makes it clear we're working with a style class definition, even though defining the type is currently difficult. @@ -104,8 +121,8 @@ export type DrawDefinition = ( ) => void | Promise; export interface ParserDefinition { - parse: (text: string) => void; - parser: { yy: DiagramDB }; + parse: (text: string) => void | Promise; + parser?: { yy: DiagramDB }; } export type HTML = d3.Selection; diff --git a/packages/mermaid/src/diagram.spec.ts b/packages/mermaid/src/diagram.spec.ts index 4354f57bce..46054ed6de 100644 --- a/packages/mermaid/src/diagram.spec.ts +++ b/packages/mermaid/src/diagram.spec.ts @@ -1,16 +1,39 @@ import { describe, test, expect } from 'vitest'; -import { Diagram, getDiagramFromText } from './Diagram.js'; +import { Diagram } from './Diagram.js'; import { addDetector } from './diagram-api/detectType.js'; import { addDiagrams } from './diagram-api/diagram-orchestration.js'; +import type { DiagramLoader } from './diagram-api/types.js'; addDiagrams(); +const getDummyDiagram = (id: string, title?: string): Awaited> => { + return { + id, + diagram: { + db: { + getDiagramTitle: () => title ?? id, + }, + parser: { + parse: () => { + // no-op + }, + }, + renderer: { + draw: () => { + // no-op + }, + }, + styles: {}, + }, + }; +}; + describe('diagram detection', () => { test('should detect inbuilt diagrams', async () => { - const graph = (await getDiagramFromText('graph TD; A-->B')) as Diagram; + const graph = (await Diagram.fromText('graph TD; A-->B')) as Diagram; expect(graph).toBeInstanceOf(Diagram); expect(graph.type).toBe('flowchart-v2'); - const sequence = (await getDiagramFromText( + const sequence = (await Diagram.fromText( 'sequenceDiagram; Alice->>+John: Hello John, how are you?' )) as Diagram; expect(sequence).toBeInstanceOf(Diagram); @@ -21,41 +44,33 @@ describe('diagram detection', () => { addDetector( 'loki', (str) => str.startsWith('loki'), - () => - Promise.resolve({ - id: 'loki', - diagram: { - db: {}, - parser: { - parse: () => { - // no-op - }, - parser: { - yy: {}, - }, - }, - renderer: { - draw: () => { - // no-op - }, - }, - styles: {}, - }, - }) + () => Promise.resolve(getDummyDiagram('loki')) ); - const diagram = (await getDiagramFromText('loki TD; A-->B')) as Diagram; + const diagram = await Diagram.fromText('loki TD; A-->B'); expect(diagram).toBeInstanceOf(Diagram); expect(diagram.type).toBe('loki'); }); + test('should allow external diagrams to override internal ones with same ID', async () => { + const title = 'overridden'; + addDetector( + 'flowchart-elk', + (str) => str.startsWith('flowchart-elk'), + () => Promise.resolve(getDummyDiagram('flowchart-elk', title)) + ); + const diagram = await Diagram.fromText('flowchart-elk TD; A-->B'); + expect(diagram).toBeInstanceOf(Diagram); + expect(diagram.db.getDiagramTitle?.()).toBe(title); + }); + test('should throw the right error for incorrect diagram', async () => { - await expect(getDiagramFromText('graph TD; A-->')).rejects.toThrowErrorMatchingInlineSnapshot(` + await expect(Diagram.fromText('graph TD; A-->')).rejects.toThrowErrorMatchingInlineSnapshot(` "Parse error on line 2: graph TD; A--> --------------^ Expecting 'AMP', 'COLON', 'PIPE', 'TESTSTR', 'DOWN', 'DEFAULT', 'NUM', 'COMMA', 'NODE_STRING', 'BRKT', 'MINUS', 'MULT', 'UNICODE_TEXT', got 'EOF'" `); - await expect(getDiagramFromText('sequenceDiagram; A-->B')).rejects + await expect(Diagram.fromText('sequenceDiagram; A-->B')).rejects .toThrowErrorMatchingInlineSnapshot(` "Parse error on line 1: ...quenceDiagram; A-->B @@ -65,13 +80,13 @@ Expecting 'TXT', got 'NEWLINE'" }); test('should throw the right error for unregistered diagrams', async () => { - await expect(getDiagramFromText('thor TD; A-->B')).rejects.toThrowErrorMatchingInlineSnapshot( + await expect(Diagram.fromText('thor TD; A-->B')).rejects.toThrowErrorMatchingInlineSnapshot( '"No diagram type detected matching given configuration for text: thor TD; A-->B"' ); }); test('should consider entity codes when present in diagram defination', async () => { - const diagram = await getDiagramFromText(`sequenceDiagram + const diagram = await Diagram.fromText(`sequenceDiagram A->>B: I #9829; you! B->>A: I #9829; you #infin; times more!`); // @ts-ignore: we need to add types for sequenceDb which will be done in separate PR diff --git a/packages/mermaid/src/diagrams/block/blockDB.ts b/packages/mermaid/src/diagrams/block/blockDB.ts index f4881a203b..e4c863c1dd 100644 --- a/packages/mermaid/src/diagrams/block/blockDB.ts +++ b/packages/mermaid/src/diagrams/block/blockDB.ts @@ -1,9 +1,9 @@ -import type { DiagramDB } from '../../diagram-api/types.js'; -import type { BlockConfig, BlockType, Block, ClassDef } from './blockTypes.js'; +import clone from 'lodash-es/clone.js'; import * as configApi from '../../config.js'; -import { clear as commonClear } from '../common/commonDb.js'; +import type { DiagramDB } from '../../diagram-api/types.js'; import { log } from '../../logger.js'; -import clone from 'lodash-es/clone.js'; +import { clear as commonClear } from '../common/commonDb.js'; +import type { Block, ClassDef } from './blockTypes.js'; // Initialize the node database for simple lookups let blockDatabase: Record = {}; diff --git a/packages/mermaid/src/diagrams/block/blockRenderer.ts b/packages/mermaid/src/diagrams/block/blockRenderer.ts index 219c628544..e6289ad828 100644 --- a/packages/mermaid/src/diagrams/block/blockRenderer.ts +++ b/packages/mermaid/src/diagrams/block/blockRenderer.ts @@ -1,19 +1,17 @@ -import type { Diagram } from '../../Diagram.js'; -import * as configApi from '../../config.js'; -import { calculateBlockSizes, insertBlocks, insertEdges } from './renderHelpers.js'; -import { layout } from './layout.js'; -import type { MermaidConfig, BaseDiagramConfig } from '../../config.type.js'; -import insertMarkers from '../../dagre-wrapper/markers.js'; import { - select as d3select, scaleOrdinal as d3scaleOrdinal, schemeTableau10 as d3schemeTableau10, + select as d3select, } from 'd3'; -import type { ContainerElement } from 'd3'; +import type { Diagram } from '../../Diagram.js'; +import * as configApi from '../../config.js'; +import type { MermaidConfig } from '../../config.type.js'; +import insertMarkers from '../../dagre-wrapper/markers.js'; import { log } from '../../logger.js'; -import type { BlockDB } from './blockDB.js'; -import type { Block } from './blockTypes.js'; import { configureSvgSize } from '../../setupGraphViewbox.js'; +import type { BlockDB } from './blockDB.js'; +import { layout } from './layout.js'; +import { calculateBlockSizes, insertBlocks, insertEdges } from './renderHelpers.js'; /** * Returns the all the styles from classDef statements in the graph definition. diff --git a/packages/mermaid/src/diagrams/block/renderHelpers.ts b/packages/mermaid/src/diagrams/block/renderHelpers.ts index 38ef6c33eb..c509ae198d 100644 --- a/packages/mermaid/src/diagrams/block/renderHelpers.ts +++ b/packages/mermaid/src/diagrams/block/renderHelpers.ts @@ -1,15 +1,10 @@ -import { getStylesFromArray } from '../../utils.js'; -import { insertNode, positionNode } from '../../dagre-wrapper/nodes.js'; -import { insertEdge, insertEdgeLabel, positionEdgeLabel } from '../../dagre-wrapper/edges.js'; import * as graphlib from 'dagre-d3-es/src/graphlib/index.js'; import { getConfig } from '../../config.js'; -import type { ContainerElement } from 'd3'; -import type { Block } from './blockTypes.js'; +import { insertEdge, insertEdgeLabel, positionEdgeLabel } from '../../dagre-wrapper/edges.js'; +import { insertNode, positionNode } from '../../dagre-wrapper/nodes.js'; +import { getStylesFromArray } from '../../utils.js'; import type { BlockDB } from './blockDB.js'; - -interface Node { - classes: string; -} +import type { Block } from './blockTypes.js'; function getNodeFromBlock(block: Block, db: BlockDB, positioned = false) { const vertex = block; diff --git a/packages/mermaid/src/diagrams/common/populateCommonDb.ts b/packages/mermaid/src/diagrams/common/populateCommonDb.ts new file mode 100644 index 0000000000..d1f0e26ba0 --- /dev/null +++ b/packages/mermaid/src/diagrams/common/populateCommonDb.ts @@ -0,0 +1,14 @@ +import type { DiagramAST } from '@mermaid-js/parser'; +import type { DiagramDB } from '../../diagram-api/types.js'; + +export function populateCommonDb(ast: DiagramAST, db: DiagramDB) { + if (ast.accDescr) { + db.setAccDescription?.(ast.accDescr); + } + if (ast.accTitle) { + db.setAccTitle?.(ast.accTitle); + } + if (ast.title) { + db.setDiagramTitle?.(ast.title); + } +} diff --git a/packages/mermaid/src/diagrams/error/errorDiagram.ts b/packages/mermaid/src/diagrams/error/errorDiagram.ts index 284dfd7447..a15e16adab 100644 --- a/packages/mermaid/src/diagrams/error/errorDiagram.ts +++ b/packages/mermaid/src/diagrams/error/errorDiagram.ts @@ -5,7 +5,6 @@ const diagram: DiagramDefinition = { db: {}, renderer, parser: { - parser: { yy: {} }, parse: (): void => { return; }, diff --git a/packages/mermaid/src/diagrams/flowchart/elk/detector.ts b/packages/mermaid/src/diagrams/flowchart/elk/detector.ts index 6cfcf26194..b476ff11ba 100644 --- a/packages/mermaid/src/diagrams/flowchart/elk/detector.ts +++ b/packages/mermaid/src/diagrams/flowchart/elk/detector.ts @@ -3,6 +3,7 @@ import type { DiagramDetector, DiagramLoader, } from '../../../diagram-api/types.js'; +import { log } from '../../../logger.js'; const id = 'flowchart-elk'; @@ -13,13 +14,21 @@ const detector: DiagramDetector = (txt, config): boolean => { // If a flowchart/graph diagram has their default renderer set to elk (/^\s*flowchart|graph/.test(txt) && config?.flowchart?.defaultRenderer === 'elk') ) { + // This will log at the end, hopefully. + setTimeout( + () => + log.warn( + 'flowchart-elk was moved to an external package in Mermaid v11. Please refer [release notes](link) for more details. This diagram will be rendered using `dagre` layout as a fallback.' + ), + 500 + ); return true; } return false; }; const loader: DiagramLoader = async () => { - const { diagram } = await import('./flowchart-elk-definition.js'); + const { diagram } = await import('../flowDiagram-v2.js'); return { id, diagram }; }; diff --git a/packages/mermaid/src/diagrams/flowchart/elk/flowchart-elk-definition.ts b/packages/mermaid/src/diagrams/flowchart/elk/flowchart-elk-definition.ts deleted file mode 100644 index 9855c73899..0000000000 --- a/packages/mermaid/src/diagrams/flowchart/elk/flowchart-elk-definition.ts +++ /dev/null @@ -1,13 +0,0 @@ -// @ts-ignore: JISON typing missing -import parser from '../parser/flow.jison'; - -import * as db from '../flowDb.js'; -import renderer from './flowRenderer-elk.js'; -import styles from './styles.js'; - -export const diagram = { - db, - renderer, - parser, - styles, -}; diff --git a/packages/mermaid/src/diagrams/flowchart/flowDb.spec.js b/packages/mermaid/src/diagrams/flowchart/flowDb.spec.ts similarity index 89% rename from packages/mermaid/src/diagrams/flowchart/flowDb.spec.js rename to packages/mermaid/src/diagrams/flowchart/flowDb.spec.ts index 6f04ca70a1..68c03bdeb0 100644 --- a/packages/mermaid/src/diagrams/flowchart/flowDb.spec.js +++ b/packages/mermaid/src/diagrams/flowchart/flowDb.spec.ts @@ -1,14 +1,15 @@ import flowDb from './flowDb.js'; +import type { FlowSubGraph } from './types.js'; describe('flow db subgraphs', () => { - let subgraphs; + let subgraphs: FlowSubGraph[]; beforeEach(() => { subgraphs = [ { nodes: ['a', 'b', 'c', 'e'] }, { nodes: ['f', 'g', 'h'] }, { nodes: ['i', 'j'] }, { nodes: ['k'] }, - ]; + ] as FlowSubGraph[]; }); describe('exist', () => { it('should return true when the is exists in a subgraph', () => { @@ -25,17 +26,17 @@ describe('flow db subgraphs', () => { describe('makeUniq', () => { it('should remove ids from sungraph that already exists in another subgraph even if it gets empty', () => { - const subgraph = flowDb.makeUniq({ nodes: ['i', 'j'] }, subgraphs); + const subgraph = flowDb.makeUniq({ nodes: ['i', 'j'] } as FlowSubGraph, subgraphs); expect(subgraph.nodes).toEqual([]); }); it('should remove ids from sungraph that already exists in another subgraph', () => { - const subgraph = flowDb.makeUniq({ nodes: ['i', 'j', 'o'] }, subgraphs); + const subgraph = flowDb.makeUniq({ nodes: ['i', 'j', 'o'] } as FlowSubGraph, subgraphs); expect(subgraph.nodes).toEqual(['o']); }); it('should not remove ids from subgraph if they are unique', () => { - const subgraph = flowDb.makeUniq({ nodes: ['q', 'r', 's'] }, subgraphs); + const subgraph = flowDb.makeUniq({ nodes: ['q', 'r', 's'] } as FlowSubGraph, subgraphs); expect(subgraph.nodes).toEqual(['q', 'r', 's']); }); diff --git a/packages/mermaid/src/diagrams/flowchart/flowDb.js b/packages/mermaid/src/diagrams/flowchart/flowDb.ts similarity index 75% rename from packages/mermaid/src/diagrams/flowchart/flowDb.js rename to packages/mermaid/src/diagrams/flowchart/flowDb.ts index 019eade4d3..e84d7fd0c3 100644 --- a/packages/mermaid/src/diagrams/flowchart/flowDb.js +++ b/packages/mermaid/src/diagrams/flowchart/flowDb.ts @@ -12,34 +12,34 @@ import { setDiagramTitle, getDiagramTitle, } from '../common/commonDb.js'; +import type { FlowVertex, FlowClass, FlowSubGraph, FlowText, FlowEdge, FlowLink } from './types.js'; const MERMAID_DOM_ID_PREFIX = 'flowchart-'; let vertexCounter = 0; let config = getConfig(); -let vertices = {}; -let edges = []; -let classes = {}; -let subGraphs = []; -let subGraphLookup = {}; -let tooltips = {}; +let vertices: Record = {}; +let edges: FlowEdge[] & { defaultInterpolate?: string; defaultStyle?: string[] } = []; +let classes: Record = {}; +let subGraphs: FlowSubGraph[] = []; +let subGraphLookup: Record = {}; +let tooltips: Record = {}; let subCount = 0; let firstGraphFlag = true; -let direction; +let direction: string; -let version; // As in graph +let version: string; // As in graph // Functions to be run after graph rendering -let funs = []; // cspell:ignore funs +let funs: ((element: Element) => void)[] = []; // cspell:ignore funs -const sanitizeText = (txt) => common.sanitizeText(txt, config); +const sanitizeText = (txt: string) => common.sanitizeText(txt, config); /** * Function to lookup domId from id in the graph definition. * - * @param id - * @public + * @param id - id of the node */ -export const lookUpDomId = function (id) { +export const lookUpDomId = function (id: string) { const vertexKeys = Object.keys(vertices); for (const vertexKey of vertexKeys) { if (vertices[vertexKey].id === id) { @@ -52,30 +52,24 @@ export const lookUpDomId = function (id) { /** * Function called by parser when a node definition has been found * - * @param _id - * @param text - * @param textObj - * @param type - * @param style - * @param classes - * @param dir - * @param props */ -export const addVertex = function (_id, textObj, type, style, classes, dir, props = {}) { - let txt; - let id = _id; - if (id === undefined) { - return; - } - if (id.trim().length === 0) { +export const addVertex = function ( + id: string, + textObj: FlowText, + type: 'group', + style: string[], + classes: string[], + dir: string, + props = {} +) { + if (!id || id.trim().length === 0) { return; } - - // if (id[0].match(/\d/)) id = MERMAID_DOM_ID_PREFIX + id; + let txt; if (vertices[id] === undefined) { vertices[id] = { - id: id, + id, labelType: 'text', domId: MERMAID_DOM_ID_PREFIX + id + '-' + vertexCounter, styles: [], @@ -94,7 +88,7 @@ export const addVertex = function (_id, textObj, type, style, classes, dir, prop vertices[id].text = txt; } else { if (vertices[id].text === undefined) { - vertices[id].text = _id; + vertices[id].text = id; } } if (type !== undefined) { @@ -123,20 +117,12 @@ export const addVertex = function (_id, textObj, type, style, classes, dir, prop /** * Function called by parser when a link/edge definition has been found * - * @param _start - * @param _end - * @param type - * @param linkText - * @param linkTextObj */ -export const addSingleLink = function (_start, _end, type) { - let start = _start; - let end = _end; - // if (start[0].match(/\d/)) start = MERMAID_DOM_ID_PREFIX + start; - // if (end[0].match(/\d/)) end = MERMAID_DOM_ID_PREFIX + end; - // log.info('Got edge...', start, end); - - const edge = { start: start, end: end, type: undefined, text: '', labelType: 'text' }; +export const addSingleLink = function (_start: string, _end: string, type: any) { + const start = _start; + const end = _end; + + const edge: FlowEdge = { start: start, end: end, type: undefined, text: '', labelType: 'text' }; log.info('abc78 Got edge...', edge); const linkTextObj = type.text; @@ -153,13 +139,11 @@ export const addSingleLink = function (_start, _end, type) { if (type !== undefined) { edge.type = type.type; edge.stroke = type.stroke; - edge.length = type.length; - } - if (edge?.length > 10) { - edge.length = 10; + edge.length = type.length > 10 ? 10 : type.length; } + if (edges.length < (config.maxEdges ?? 500)) { - log.info('abc78 pushing edge...'); + log.info('Pushing edge...'); edges.push(edge); } else { throw new Error( @@ -171,12 +155,12 @@ You have to call mermaid.initialize.` ); } }; -export const addLink = function (_start, _end, type) { - log.info('addLink (abc78)', _start, _end, type); - let i, j; - for (i = 0; i < _start.length; i++) { - for (j = 0; j < _end.length; j++) { - addSingleLink(_start[i], _end[j], type); + +export const addLink = function (_start: string[], _end: string[], type: unknown) { + log.info('addLink', _start, _end, type); + for (const start of _start) { + for (const end of _end) { + addSingleLink(start, end, type); } } }; @@ -184,15 +168,16 @@ export const addLink = function (_start, _end, type) { /** * Updates a link's line interpolation algorithm * - * @param positions - * @param interp */ -export const updateLinkInterpolate = function (positions, interp) { +export const updateLinkInterpolate = function ( + positions: ('default' | number)[], + interpolate: string +) { positions.forEach(function (pos) { if (pos === 'default') { - edges.defaultInterpolate = interp; + edges.defaultInterpolate = interpolate; } else { - edges[pos].interpolate = interp; + edges[pos].interpolate = interpolate; } }); }; @@ -200,12 +185,10 @@ export const updateLinkInterpolate = function (positions, interp) { /** * Updates a link with a style * - * @param positions - * @param style */ -export const updateLink = function (positions, style) { +export const updateLink = function (positions: ('default' | number)[], style: string[]) { positions.forEach(function (pos) { - if (pos >= edges.length) { + if (typeof pos === 'number' && pos >= edges.length) { throw new Error( `The index ${pos} for linkStyle is out of bounds. Valid indices for linkStyle are between 0 and ${ edges.length - 1 @@ -223,7 +206,7 @@ export const updateLink = function (positions, style) { }); }; -export const addClass = function (ids, style) { +export const addClass = function (ids: string, style: string[]) { ids.split(',').forEach(function (id) { if (classes[id] === undefined) { classes[id] = { id, styles: [], textStyles: [] }; @@ -244,9 +227,8 @@ export const addClass = function (ids, style) { /** * Called by parser when a graph definition is found, stores the direction of the chart. * - * @param dir */ -export const setDirection = function (dir) { +export const setDirection = function (dir: string) { direction = dir; if (direction.match(/.* { + +export const setGen = (ver: string) => { version = ver || 'gen-2'; }; -/** @returns {string} */ + export const defaultStyle = function () { return 'fill:#ffa;stroke: #f66; stroke-width: 3px; stroke-dasharray: 5, 5;fill:#ffa;stroke: #666;'; }; -/** - * Clears the internal graph db so that a new graph can be parsed. - * - * @param _id - * @param list - * @param _title - */ -export const addSubGraph = function (_id, list, _title) { - let id = _id.text.trim(); +export const addSubGraph = function ( + _id: { text: string }, + list: string[], + _title: { text: string; type: string } +) { + let id: string | undefined = _id.text.trim(); let title = _title.text; if (_id === _title && _title.text.match(/\s/)) { id = undefined; } - /** @param a */ - function uniq(a) { - const prims = { boolean: {}, number: {}, string: {} }; - const objs = []; + + function uniq(a: any[]) { + const prims: any = { boolean: {}, number: {}, string: {} }; + const objs: any[] = []; let dir; // = undefined; direction.trim(); const nodeList = a.filter(function (item) { @@ -512,10 +491,7 @@ export const addSubGraph = function (_id, list, _title) { return { nodeList, dir }; } - let nodeList = []; - - const { nodeList: nl, dir } = uniq(nodeList.concat.apply(nodeList, list)); - nodeList = nl; + const { nodeList, dir } = uniq(list.flat()); if (version === 'gen-1') { for (let i = 0; i < nodeList.length; i++) { nodeList[i] = lookUpDomId(nodeList[i]); @@ -523,7 +499,6 @@ export const addSubGraph = function (_id, list, _title) { } id = id || 'subGraph' + subCount; - // if (id[0].match(/\d/)) id = lookUpDomId(id); title = title || ''; title = sanitizeText(title); subCount = subCount + 1; @@ -538,19 +513,6 @@ export const addSubGraph = function (_id, list, _title) { log.info('Adding', subGraph.id, subGraph.nodes, subGraph.dir); - /** Deletes an id from all subgraphs */ - // const del = _id => { - // subGraphs.forEach(sg => { - // const pos = sg.nodes.indexOf(_id); - // if (pos >= 0) { - // sg.nodes.splice(pos, 1); - // } - // }); - // }; - - // // Removes the members of this subgraph from any other subgraphs, a node only belong to one subgraph - // subGraph.nodes.forEach(_id => del(_id)); - // Remove the members in the new subgraph if they already belong to another subgraph subGraph.nodes = makeUniq(subGraph, subGraphs).nodes; subGraphs.push(subGraph); @@ -558,7 +520,7 @@ export const addSubGraph = function (_id, list, _title) { return id; }; -const getPosForId = function (id) { +const getPosForId = function (id: string) { for (const [i, subGraph] of subGraphs.entries()) { if (subGraph.id === id) { return i; @@ -567,12 +529,15 @@ const getPosForId = function (id) { return -1; }; let secCount = -1; -const posCrossRef = []; -const indexNodes2 = function (id, pos) { +const posCrossRef: number[] = []; +const indexNodes2 = function (id: string, pos: number): { result: boolean; count: number } { const nodes = subGraphs[pos].nodes; secCount = secCount + 1; if (secCount > 2000) { - return; + return { + result: false, + count: 0, + }; } posCrossRef[secCount] = pos; // Check if match @@ -608,13 +573,13 @@ const indexNodes2 = function (id, pos) { }; }; -export const getDepthFirstPos = function (pos) { +export const getDepthFirstPos = function (pos: number) { return posCrossRef[pos]; }; export const indexNodes = function () { secCount = -1; if (subGraphs.length > 0) { - indexNodes2('none', subGraphs.length - 1, 0); + indexNodes2('none', subGraphs.length - 1); } }; @@ -630,7 +595,7 @@ export const firstGraph = () => { return false; }; -const destructStartLink = (_str) => { +const destructStartLink = (_str: string): FlowLink => { let str = _str.trim(); let type = 'arrow_open'; @@ -662,7 +627,7 @@ const destructStartLink = (_str) => { return { type, stroke }; }; -const countChar = (char, str) => { +const countChar = (char: string, str: string) => { const length = str.length; let count = 0; for (let i = 0; i < length; ++i) { @@ -673,7 +638,7 @@ const countChar = (char, str) => { return count; }; -const destructEndLink = (_str) => { +const destructEndLink = (_str: string) => { const str = _str.trim(); let line = str.slice(0, -1); let type = 'arrow_open'; @@ -713,7 +678,7 @@ const destructEndLink = (_str) => { stroke = 'invisible'; } - let dots = countChar('.', line); + const dots = countChar('.', line); if (dots) { stroke = 'dotted'; @@ -723,7 +688,7 @@ const destructEndLink = (_str) => { return { type, stroke, length }; }; -export const destructLink = (_str, _startStr) => { +export const destructLink = (_str: string, _startStr: string) => { const info = destructEndLink(_str); let startInfo; if (_startStr) { @@ -757,7 +722,7 @@ export const destructLink = (_str, _startStr) => { }; // Todo optimizer this by caching existing nodes -const exists = (allSgs, _id) => { +const exists = (allSgs: FlowSubGraph[], _id: string) => { let res = false; allSgs.forEach((sg) => { const pos = sg.nodes.indexOf(_id); @@ -770,11 +735,9 @@ const exists = (allSgs, _id) => { /** * Deletes an id from all subgraphs * - * @param sg - * @param allSubgraphs */ -const makeUniq = (sg, allSubgraphs) => { - const res = []; +const makeUniq = (sg: FlowSubGraph, allSubgraphs: FlowSubGraph[]) => { + const res: string[] = []; sg.nodes.forEach((_id, pos) => { if (!exists(allSubgraphs, _id)) { res.push(sg.nodes[pos]); @@ -786,6 +749,7 @@ const makeUniq = (sg, allSubgraphs) => { export const lex = { firstGraph, }; + export default { defaultConfig: () => defaultConfig.flowchart, setAccTitle, diff --git a/packages/mermaid/src/diagrams/flowchart/parser/backup b/packages/mermaid/src/diagrams/flowchart/parser/backup deleted file mode 100644 index 2248ea2ac2..0000000000 --- a/packages/mermaid/src/diagrams/flowchart/parser/backup +++ /dev/null @@ -1,503 +0,0 @@ -/** mermaid - * https://mermaidjs.github.io/ - * (c) 2015 Knut Sveidqvist - * MIT license. - */ - -/* lexical grammar */ -%lex -%x string - -%% -\%\%[^\n]* /* do nothing */ -["] this.begin("string"); -["] this.popState(); -[^"]* return "STR"; -"style" return 'STYLE'; -"default" return 'DEFAULT'; -"linkStyle" return 'LINKSTYLE'; -"interpolate" return 'INTERPOLATE'; -"classDef" return 'CLASSDEF'; -"class" return 'CLASS'; -"click" return 'CLICK'; -"graph" return 'GRAPH'; -"subgraph" return 'subgraph'; -"end"\b\s* return 'end'; -"LR" return 'DIR'; -"RL" return 'DIR'; -"TB" return 'DIR'; -"BT" return 'DIR'; -"TD" return 'DIR'; -"BR" return 'DIR'; -[0-9]+ return 'NUM'; -\# return 'BRKT'; -":" return 'COLON'; -";" return 'SEMI'; -"," return 'COMMA'; -"*" return 'MULT'; -\s*\-\-[x]\s* return 'ARROW_CROSS'; -\s*[x]\-\-[x]\s* return 'DOUBLE_ARROW_CROSS'; -\s*\-\-\>\s* return 'ARROW_POINT'; -\s*\<\-\-\>\s* return 'DOUBLE_ARROW_POINT'; -\s*\-\-[o]\s* return 'ARROW_CIRCLE'; -\s*[o]\-\-[o]\s* return 'DOUBLE_ARROW_CIRCLE'; -\s*\-\-\-\s* return 'ARROW_OPEN'; -\s*\-\.\-[x]\s* return 'DOTTED_ARROW_CROSS'; -\s*[x]\-\.\-[x]\s* return 'DOUBLE_DOTTED_ARROW_CROSS'; -\s*\-\.\-\>\s* return 'DOTTED_ARROW_POINT'; -\s*\<\-\.\-\>\s* return 'DOUBLE_DOTTED_ARROW_POINT'; -\s*\-\.\-[o]\s* return 'DOTTED_ARROW_CIRCLE'; -\s*[o]\-\.\-[o]\s* return 'DOUBLE_DOTTED_ARROW_CIRCLE'; -\s*\-\.\-\s* return 'DOTTED_ARROW_OPEN'; -\s*.\-[x]\s* return 'DOTTED_ARROW_CROSS'; -\s*[x].\-[x]\s* return 'DOUBLE_DOTTED_ARROW_CROSS'; -\s*\.\-\>\s* return 'DOTTED_ARROW_POINT'; -\s*\<\.\-\>\s* return 'DOUBLE_DOTTED_ARROW_POINT'; -\s*\.\-[o]\s* return 'DOTTED_ARROW_CIRCLE'; -\s*[o]\.\-[o]\s* return 'DOUBLE_DOTTED_ARROW_CIRCLE'; -\s*\.\-\s* return 'DOTTED_ARROW_OPEN'; -\s*\=\=[x]\s* return 'THICK_ARROW_CROSS'; -\s*[x]\=\=[x]\s* return 'DOUBLE_THICK_ARROW_CROSS'; -\s*\=\=\>\s* return 'THICK_ARROW_POINT'; -\s*\<\=\=\>\s* return 'DOUBLE_THICK_ARROW_POINT'; -\s*\=\=[o]\s* return 'THICK_ARROW_CIRCLE'; -\s*[o]\=\=[o]\s* return 'DOUBLE_THICK_ARROW_CIRCLE'; -\s*\=\=[\=]\s* return 'THICK_ARROW_OPEN'; -\s*\-\-\s* return '--'; -\s*\-\.\s* return '-.'; -\s*\=\=\s* return '=='; -%\s*\<\-\-\s* return 'START_DOUBLE_ARROW_POINT'; -%\s*\[x]\-\-\s* return 'START_DOUBLE_ARROW_CROSS'; -%\s*\[o]\-\-\s* return 'START_DOUBLE_ARROW_CIRCLE'; -%\s*\<\-\.\s* return 'START_DOUBLE_DOTTED_ARROW_POINT'; -%\s*\[x]\-\.\s* return 'START_DOUBLE_DOTTED_ARROW_CROSS'; -%\s*\[o]\-\.\s* return 'START_DOUBLE_DOTTED_ARROW_CIRCLE'; -%\s*\<\=\=\s* return 'START_DOUBLE_THICK_ARROW_POINT'; -%\s*\[x]\=\=\s* return 'START_DOUBLE_THICK_ARROW_CROSS'; -%\s*\[o]\=\=\s* return 'START_DOUBLE_THICK_ARROW_CIRCLE'; -"(-" return '(-'; -"-)" return '-)'; -\- return 'MINUS'; -"." return 'DOT'; -\+ return 'PLUS'; -\% return 'PCT'; -"=" return 'EQUALS'; -\= return 'EQUALS'; -"<" return 'TAGSTART'; -">" return 'TAGEND'; -"^" return 'UP'; -"v" return 'DOWN'; -[A-Za-z]+ return 'ALPHA'; -[!"#$%&'*+,-.`?\\_/] return 'PUNCTUATION'; -[\u00AA\u00B5\u00BA\u00C0-\u00D6\u00D8-\u00F6]| -[\u00F8-\u02C1\u02C6-\u02D1\u02E0-\u02E4\u02EC\u02EE\u0370-\u0374\u0376\u0377]| -[\u037A-\u037D\u0386\u0388-\u038A\u038C\u038E-\u03A1\u03A3-\u03F5]| -[\u03F7-\u0481\u048A-\u0527\u0531-\u0556\u0559\u0561-\u0587\u05D0-\u05EA]| -[\u05F0-\u05F2\u0620-\u064A\u066E\u066F\u0671-\u06D3\u06D5\u06E5\u06E6\u06EE]| -[\u06EF\u06FA-\u06FC\u06FF\u0710\u0712-\u072F\u074D-\u07A5\u07B1\u07CA-\u07EA]| -[\u07F4\u07F5\u07FA\u0800-\u0815\u081A\u0824\u0828\u0840-\u0858\u08A0]| -[\u08A2-\u08AC\u0904-\u0939\u093D\u0950\u0958-\u0961\u0971-\u0977]| -[\u0979-\u097F\u0985-\u098C\u098F\u0990\u0993-\u09A8\u09AA-\u09B0\u09B2]| -[\u09B6-\u09B9\u09BD\u09CE\u09DC\u09DD\u09DF-\u09E1\u09F0\u09F1\u0A05-\u0A0A]| -[\u0A0F\u0A10\u0A13-\u0A28\u0A2A-\u0A30\u0A32\u0A33\u0A35\u0A36\u0A38\u0A39]| -[\u0A59-\u0A5C\u0A5E\u0A72-\u0A74\u0A85-\u0A8D\u0A8F-\u0A91\u0A93-\u0AA8]| -[\u0AAA-\u0AB0\u0AB2\u0AB3\u0AB5-\u0AB9\u0ABD\u0AD0\u0AE0\u0AE1\u0B05-\u0B0C]| -[\u0B0F\u0B10\u0B13-\u0B28\u0B2A-\u0B30\u0B32\u0B33\u0B35-\u0B39\u0B3D\u0B5C]| -[\u0B5D\u0B5F-\u0B61\u0B71\u0B83\u0B85-\u0B8A\u0B8E-\u0B90\u0B92-\u0B95\u0B99]| -[\u0B9A\u0B9C\u0B9E\u0B9F\u0BA3\u0BA4\u0BA8-\u0BAA\u0BAE-\u0BB9\u0BD0]| -[\u0C05-\u0C0C\u0C0E-\u0C10\u0C12-\u0C28\u0C2A-\u0C33\u0C35-\u0C39\u0C3D]| -[\u0C58\u0C59\u0C60\u0C61\u0C85-\u0C8C\u0C8E-\u0C90\u0C92-\u0CA8\u0CAA-\u0CB3]| -[\u0CB5-\u0CB9\u0CBD\u0CDE\u0CE0\u0CE1\u0CF1\u0CF2\u0D05-\u0D0C\u0D0E-\u0D10]| -[\u0D12-\u0D3A\u0D3D\u0D4E\u0D60\u0D61\u0D7A-\u0D7F\u0D85-\u0D96\u0D9A-\u0DB1]| -[\u0DB3-\u0DBB\u0DBD\u0DC0-\u0DC6\u0E01-\u0E30\u0E32\u0E33\u0E40-\u0E46\u0E81]| -[\u0E82\u0E84\u0E87\u0E88\u0E8A\u0E8D\u0E94-\u0E97\u0E99-\u0E9F\u0EA1-\u0EA3]| -[\u0EA5\u0EA7\u0EAA\u0EAB\u0EAD-\u0EB0\u0EB2\u0EB3\u0EBD\u0EC0-\u0EC4\u0EC6]| -[\u0EDC-\u0EDF\u0F00\u0F40-\u0F47\u0F49-\u0F6C\u0F88-\u0F8C\u1000-\u102A]| -[\u103F\u1050-\u1055\u105A-\u105D\u1061\u1065\u1066\u106E-\u1070\u1075-\u1081]| -[\u108E\u10A0-\u10C5\u10C7\u10CD\u10D0-\u10FA\u10FC-\u1248\u124A-\u124D]| -[\u1250-\u1256\u1258\u125A-\u125D\u1260-\u1288\u128A-\u128D\u1290-\u12B0]| -[\u12B2-\u12B5\u12B8-\u12BE\u12C0\u12C2-\u12C5\u12C8-\u12D6\u12D8-\u1310]| -[\u1312-\u1315\u1318-\u135A\u1380-\u138F\u13A0-\u13F4\u1401-\u166C]| -[\u166F-\u167F\u1681-\u169A\u16A0-\u16EA\u1700-\u170C\u170E-\u1711]| -[\u1720-\u1731\u1740-\u1751\u1760-\u176C\u176E-\u1770\u1780-\u17B3\u17D7]| -[\u17DC\u1820-\u1877\u1880-\u18A8\u18AA\u18B0-\u18F5\u1900-\u191C]| -[\u1950-\u196D\u1970-\u1974\u1980-\u19AB\u19C1-\u19C7\u1A00-\u1A16]| -[\u1A20-\u1A54\u1AA7\u1B05-\u1B33\u1B45-\u1B4B\u1B83-\u1BA0\u1BAE\u1BAF]| -[\u1BBA-\u1BE5\u1C00-\u1C23\u1C4D-\u1C4F\u1C5A-\u1C7D\u1CE9-\u1CEC]| -[\u1CEE-\u1CF1\u1CF5\u1CF6\u1D00-\u1DBF\u1E00-\u1F15\u1F18-\u1F1D]| -[\u1F20-\u1F45\u1F48-\u1F4D\u1F50-\u1F57\u1F59\u1F5B\u1F5D\u1F5F-\u1F7D]| -[\u1F80-\u1FB4\u1FB6-\u1FBC\u1FBE\u1FC2-\u1FC4\u1FC6-\u1FCC\u1FD0-\u1FD3]| -[\u1FD6-\u1FDB\u1FE0-\u1FEC\u1FF2-\u1FF4\u1FF6-\u1FFC\u2071\u207F]| -[\u2090-\u209C\u2102\u2107\u210A-\u2113\u2115\u2119-\u211D\u2124\u2126\u2128]| -[\u212A-\u212D\u212F-\u2139\u213C-\u213F\u2145-\u2149\u214E\u2183\u2184]| -[\u2C00-\u2C2E\u2C30-\u2C5E\u2C60-\u2CE4\u2CEB-\u2CEE\u2CF2\u2CF3]| -[\u2D00-\u2D25\u2D27\u2D2D\u2D30-\u2D67\u2D6F\u2D80-\u2D96\u2DA0-\u2DA6]| -[\u2DA8-\u2DAE\u2DB0-\u2DB6\u2DB8-\u2DBE\u2DC0-\u2DC6\u2DC8-\u2DCE]| -[\u2DD0-\u2DD6\u2DD8-\u2DDE\u2E2F\u3005\u3006\u3031-\u3035\u303B\u303C]| -[\u3041-\u3096\u309D-\u309F\u30A1-\u30FA\u30FC-\u30FF\u3105-\u312D]| -[\u3131-\u318E\u31A0-\u31BA\u31F0-\u31FF\u3400-\u4DB5\u4E00-\u9FCC]| -[\uA000-\uA48C\uA4D0-\uA4FD\uA500-\uA60C\uA610-\uA61F\uA62A\uA62B]| -[\uA640-\uA66E\uA67F-\uA697\uA6A0-\uA6E5\uA717-\uA71F\uA722-\uA788]| -[\uA78B-\uA78E\uA790-\uA793\uA7A0-\uA7AA\uA7F8-\uA801\uA803-\uA805]| -[\uA807-\uA80A\uA80C-\uA822\uA840-\uA873\uA882-\uA8B3\uA8F2-\uA8F7\uA8FB]| -[\uA90A-\uA925\uA930-\uA946\uA960-\uA97C\uA984-\uA9B2\uA9CF\uAA00-\uAA28]| -[\uAA40-\uAA42\uAA44-\uAA4B\uAA60-\uAA76\uAA7A\uAA80-\uAAAF\uAAB1\uAAB5]| -[\uAAB6\uAAB9-\uAABD\uAAC0\uAAC2\uAADB-\uAADD\uAAE0-\uAAEA\uAAF2-\uAAF4]| -[\uAB01-\uAB06\uAB09-\uAB0E\uAB11-\uAB16\uAB20-\uAB26\uAB28-\uAB2E]| -[\uABC0-\uABE2\uAC00-\uD7A3\uD7B0-\uD7C6\uD7CB-\uD7FB\uF900-\uFA6D]| -[\uFA70-\uFAD9\uFB00-\uFB06\uFB13-\uFB17\uFB1D\uFB1F-\uFB28\uFB2A-\uFB36]| -[\uFB38-\uFB3C\uFB3E\uFB40\uFB41\uFB43\uFB44\uFB46-\uFBB1\uFBD3-\uFD3D]| -[\uFD50-\uFD8F\uFD92-\uFDC7\uFDF0-\uFDFB\uFE70-\uFE74\uFE76-\uFEFC]| -[\uFF21-\uFF3A\uFF41-\uFF5A\uFF66-\uFFBE\uFFC2-\uFFC7\uFFCA-\uFFCF]| -[\uFFD2-\uFFD7\uFFDA-\uFFDC] - return 'UNICODE_TEXT'; -"|" return 'PIPE'; -"(" return 'PS'; -")" return 'PE'; -"[" return 'SQS'; -"]" return 'SQE'; -"{" return 'DIAMOND_START' -"}" return 'DIAMOND_STOP' -"\"" return 'QUOTE'; -\n+ return 'NEWLINE'; -\s return 'SPACE'; -<> return 'EOF'; - -/lex - -/* operator associations and precedence */ - -%left '^' - -%start mermaidDoc - -%% /* language grammar */ - -mermaidDoc: graphConfig document; - -document - : /* empty */ - { $$ = [];} - | document line - { - if($2 !== []){ - $1.push($2); - } - $$=$1;} - ; - -line - : statement - {$$=$1;} - | SEMI - | NEWLINE - | SPACE - | EOF - ; - -graphConfig - : SPACE graphConfig - | NEWLINE graphConfig - | GRAPH SPACE DIR FirstStmtSeperator - { yy.setDirection($3);$$ = $3;} - | GRAPH SPACE TAGEND FirstStmtSeperator - { yy.setDirection("LR");$$ = $3;} - | GRAPH SPACE TAGSTART FirstStmtSeperator - { yy.setDirection("RL");$$ = $3;} - | GRAPH SPACE UP FirstStmtSeperator - { yy.setDirection("BT");$$ = $3;} - | GRAPH SPACE DOWN FirstStmtSeperator - { yy.setDirection("TB");$$ = $3;} - ; - -ending: endToken ending - | endToken - ; - -endToken: NEWLINE | SPACE | EOF; - -FirstStmtSeperator - : SEMI | NEWLINE | spaceList NEWLINE ; - - -spaceListNewline - : SPACE spaceListNewline - | NEWLINE spaceListNewline - | NEWLINE - | SPACE - ; - - -spaceList - : SPACE spaceList - | SPACE - ; - -statement - : verticeStatement separator - {$$=$1} - | styleStatement separator - {$$=[];} - | linkStyleStatement separator - {$$=[];} - | classDefStatement separator - {$$=[];} - | classStatement separator - {$$=[];} - | clickStatement separator - {$$=[];} - | subgraph SPACE alphaNum SQS text SQE separator document end - {$$=yy.addSubGraph($3,$8,$5);} - | subgraph SPACE STR separator document end - {$$=yy.addSubGraph(undefined,$5,$3);} - | subgraph SPACE alphaNum separator document end - {$$=yy.addSubGraph($3,$5,$3);} - | subgraph separator document end - {$$=yy.addSubGraph(undefined,$3,undefined);} - ; - -separator: NEWLINE | SEMI | EOF ; - -verticeStatement: - vertex link vertex - { yy.addLink($1,$3,$2);$$ = [$1,$3];} - | vertex - {$$ = [$1];} - ; - -vertex: alphaNum SQS text SQE - {$$ = $1;yy.addVertex($1,$3,'square');} - | alphaNum SQS text SQE spaceList - {$$ = $1;yy.addVertex($1,$3,'square');} - | alphaNum PS PS text PE PE - {$$ = $1;yy.addVertex($1,$4,'circle');} - | alphaNum PS PS text PE PE spaceList - {$$ = $1;yy.addVertex($1,$4,'circle');} - | alphaNum '(-' text '-)' - {$$ = $1;yy.addVertex($1,$3,'ellipse');} - | alphaNum '(-' text '-)' spaceList - {$$ = $1;yy.addVertex($1,$3,'ellipse');} - | alphaNum PS text PE - {$$ = $1;yy.addVertex($1,$3,'round');} - | alphaNum PS text PE spaceList - {$$ = $1;yy.addVertex($1,$3,'round');} - | alphaNum DIAMOND_START text DIAMOND_STOP - {$$ = $1;yy.addVertex($1,$3,'diamond');} - | alphaNum DIAMOND_START text DIAMOND_STOP spaceList - {$$ = $1;yy.addVertex($1,$3,'diamond');} - | alphaNum TAGEND text SQE - {$$ = $1;yy.addVertex($1,$3,'odd');} - | alphaNum TAGEND text SQE spaceList - {$$ = $1;yy.addVertex($1,$3,'odd');} -/* | alphaNum SQS text TAGSTART - {$$ = $1;yy.addVertex($1,$3,'odd_right');} - | alphaNum SQS text TAGSTART spaceList - {$$ = $1;yy.addVertex($1,$3,'odd_right');} */ - | alphaNum - {$$ = $1;yy.addVertex($1);} - | alphaNum spaceList - {$$ = $1;yy.addVertex($1);} - ; - -alphaNum - : alphaNumStatement - {$$=$1;} - | alphaNum alphaNumStatement - {$$=$1+''+$2;} - ; - -alphaNumStatement - : DIR - {$$=$1;} - | alphaNumToken - {$$=$1;} - | DOWN - {$$='v';} - | MINUS - {$$='-';} - ; - -link: linkStatement arrowText - {$1.text = $2;$$ = $1;} - | linkStatement TESTSTR SPACE - {$1.text = $2;$$ = $1;} - | linkStatement arrowText SPACE - {$1.text = $2;$$ = $1;} - | linkStatement - {$$ = $1;} - | '--' text ARROW_POINT - {$$ = {"type":"arrow","stroke":"normal","text":$2};} - | 'START_DOUBLE_ARROW_POINT' text ARROW_POINT - {$$ = {"type":"double_arrow_point","stroke":"normal","text":$2};} - | '--' text ARROW_CIRCLE - {$$ = {"type":"arrow_circle","stroke":"normal","text":$2};} - | '--' text ARROW_CROSS - {$$ = {"type":"arrow_cross","stroke":"normal","text":$2};} - | '--' text ARROW_OPEN - {$$ = {"type":"arrow_open","stroke":"normal","text":$2};} - | '-.' text DOTTED_ARROW_POINT - {$$ = {"type":"arrow","stroke":"dotted","text":$2};} - | '-.' text DOTTED_ARROW_CIRCLE - {$$ = {"type":"arrow_circle","stroke":"dotted","text":$2};} - | '-.' text DOTTED_ARROW_CROSS - {$$ = {"type":"arrow_cross","stroke":"dotted","text":$2};} - | '-.' text DOTTED_ARROW_OPEN - {$$ = {"type":"arrow_open","stroke":"dotted","text":$2};} - | '==' text THICK_ARROW_POINT - {$$ = {"type":"arrow","stroke":"thick","text":$2};} - | '==' text THICK_ARROW_CIRCLE - {$$ = {"type":"arrow_circle","stroke":"thick","text":$2};} - | '==' text THICK_ARROW_CROSS - {$$ = {"type":"arrow_cross","stroke":"thick","text":$2};} - | '==' text THICK_ARROW_OPEN - {$$ = {"type":"arrow_open","stroke":"thick","text":$2};} - ; - -linkStatement: ARROW_POINT - {$$ = {"type":"arrow","stroke":"normal"};} - | DOUBLE_ARROW_POINT - {$$ = {"type":"double_arrow_point","stroke":"normal"};} - | ARROW_CIRCLE - {$$ = {"type":"arrow_circle","stroke":"normal"};} -% | DOUBLE_ARROW_CIRCLE -% {$$ = {"type":"double_arrow_circle","stroke":"normal"};} - | ARROW_CROSS - {$$ = {"type":"arrow_cross","stroke":"normal"};} - % | DOUBLE_ARROW_CROSS - % {$$ = {"type":"double_arrow_cross","stroke":"normal"};} - | ARROW_OPEN - {$$ = {"type":"arrow_open","stroke":"normal"};} - | DOTTED_ARROW_POINT - {$$ = {"type":"arrow","stroke":"dotted"};} -% | DOUEBL_DOTTED_ARROW_POINT -% {$$ = {"type":"doueble_arrow_point","stroke":"dotted"};} - | DOTTED_ARROW_CIRCLE - {$$ = {"type":"arrow_circle","stroke":"dotted"};} -% | DOTTED_ARROW_CIRCLE -% {$$ = {"type":"double_arrow_circle","stroke":"dotted"};} - | DOTTED_ARROW_CROSS - {$$ = {"type":"arrow_cross","stroke":"dotted"};} -% | DOTTED_ARROW_CROSS -% {$$ = {"type":"double_arrow_cross","stroke":"dotted"};} - | DOTTED_ARROW_OPEN - {$$ = {"type":"arrow_open","stroke":"dotted"};} - | THICK_ARROW_POINT - {$$ = {"type":"arrow","stroke":"thick"};} -% | THICK_ARROW_POINT -% {$$ = {"type":"double_arrow_point","stroke":"thick"};} - | THICK_ARROW_CIRCLE - {$$ = {"type":"arrow_circle","stroke":"thick"};} -% | THICK_ARROW_CIRCLE -% {$$ = {"type":"double_arrow_circle","stroke":"thick"};} - | THICK_ARROW_CROSS - {$$ = {"type":"arrow_cross","stroke":"thick"};} -% | THICK_ARROW_CROSS -% {$$ = {"type":"double_arrow_cross","stroke":"thick"};} - | THICK_ARROW_OPEN - {$$ = {"type":"arrow_open","stroke":"thick"};} - ; - -arrowText: - PIPE text PIPE - {$$ = $2;} - ; - -text: textToken - {$$=$1;} - | text textToken - {$$=$1+''+$2;} - | STR - {$$=$1;} - ; - - - -commentText: commentToken - {$$=$1;} - | commentText commentToken - {$$=$1+''+$2;} - ; - - -keywords - : STYLE | LINKSTYLE | CLASSDEF | CLASS | CLICK | GRAPH | DIR | subgraph | end | DOWN | UP; - - -textNoTags: textNoTagsToken - {$$=$1;} - | textNoTags textNoTagsToken - {$$=$1+''+$2;} - ; - - -classDefStatement:CLASSDEF SPACE DEFAULT SPACE stylesOpt - {$$ = $1;yy.addClass($3,$5);} - | CLASSDEF SPACE alphaNum SPACE stylesOpt - {$$ = $1;yy.addClass($3,$5);} - ; - -classStatement:CLASS SPACE alphaNum SPACE alphaNum - {$$ = $1;yy.setClass($3, $5);} - ; - -clickStatement - : CLICK SPACE alphaNum SPACE alphaNum {$$ = $1;yy.setClickEvent($3, $5, undefined);} - | CLICK SPACE alphaNum SPACE alphaNum SPACE STR {$$ = $1;yy.setClickEvent($3, $5, $7) ;} - | CLICK SPACE alphaNum SPACE STR {$$ = $1;yy.setLink($3, $5, undefined);} - | CLICK SPACE alphaNum SPACE STR SPACE STR {$$ = $1;yy.setLink($3, $5, $7 );} - ; - -styleStatement:STYLE SPACE alphaNum SPACE stylesOpt - {$$ = $1;yy.addVertex($3,undefined,undefined,$5);} - | STYLE SPACE HEX SPACE stylesOpt - {$$ = $1;yy.updateLink($3,$5);} - ; - -linkStyleStatement - : LINKSTYLE SPACE DEFAULT SPACE stylesOpt - {$$ = $1;yy.updateLink([$3],$5);} - | LINKSTYLE SPACE numList SPACE stylesOpt - {$$ = $1;yy.updateLink($3,$5);} - | LINKSTYLE SPACE DEFAULT SPACE INTERPOLATE SPACE alphaNum SPACE stylesOpt - {$$ = $1;yy.updateLinkInterpolate([$3],$7);yy.updateLink([$3],$9);} - | LINKSTYLE SPACE numList SPACE INTERPOLATE SPACE alphaNum SPACE stylesOpt - {$$ = $1;yy.updateLinkInterpolate($3,$7);yy.updateLink($3,$9);} - | LINKSTYLE SPACE DEFAULT SPACE INTERPOLATE SPACE alphaNum - {$$ = $1;yy.updateLinkInterpolate([$3],$7);} - | LINKSTYLE SPACE numList SPACE INTERPOLATE SPACE alphaNum - {$$ = $1;yy.updateLinkInterpolate($3,$7);} - ; - -commentStatement: PCT PCT commentText; - -numList: NUM - {$$ = [$1]} - | numList COMMA NUM - {$1.push($3);$$ = $1;} - ; - -stylesOpt: style - {$$ = [$1]} - | stylesOpt COMMA style - {$1.push($3);$$ = $1;} - ; - -style: styleComponent - |style styleComponent - {$$ = $1 + $2;} - ; - -styleComponent: ALPHA | COLON | MINUS | NUM | UNIT | SPACE | HEX | BRKT | DOT | STYLE | PCT ; - -/* Token lists */ - -commentToken : textToken | graphCodeTokens ; - -textToken : textNoTagsToken | TAGSTART | TAGEND | '==' | '--' | PCT | DEFAULT; - -textNoTagsToken: alphaNumToken | SPACE | MINUS | keywords ; - -alphaNumToken : ALPHA | PUNCTUATION | UNICODE_TEXT | NUM | COLON | COMMA | PLUS | EQUALS | MULT | DOT | BRKT ; - -graphCodeTokens: PIPE | PS | PE | SQS | SQE | DIAMOND_START | DIAMOND_STOP | TAG_START | TAG_END | ARROW_CROSS | ARROW_POINT | ARROW_CIRCLE | ARROW_OPEN | QUOTE | SEMI ; -%% diff --git a/packages/mermaid/src/diagrams/flowchart/types.ts b/packages/mermaid/src/diagrams/flowchart/types.ts new file mode 100644 index 0000000000..954759f393 --- /dev/null +++ b/packages/mermaid/src/diagrams/flowchart/types.ts @@ -0,0 +1,53 @@ +export interface FlowVertex { + classes: string[]; + dir?: string; + domId: string; + haveCallback?: boolean; + id: string; + labelType: 'text'; + link?: string; + linkTarget?: string; + props?: any; + styles: string[]; + text?: string; + type?: string; +} + +export interface FlowText { + text: string; + type: 'text'; +} + +export interface FlowEdge { + start: string; + end: string; + interpolate?: string; + type?: string; + stroke?: string; + style?: string[]; + length?: number; + text: string; + labelType: 'text'; +} + +export interface FlowClass { + id: string; + styles: string[]; + textStyles: string[]; +} + +export interface FlowSubGraph { + classes: string[]; + dir?: string; + id: string; + labelType: string; + nodes: string[]; + title: string; +} + +export interface FlowLink { + length?: number; + stroke: string; + type: string; + text?: string; +} diff --git a/packages/mermaid/src/diagrams/info/info.spec.ts b/packages/mermaid/src/diagrams/info/info.spec.ts index 076f04f69c..6e139ab78c 100644 --- a/packages/mermaid/src/diagrams/info/info.spec.ts +++ b/packages/mermaid/src/diagrams/info/info.spec.ts @@ -1,24 +1,27 @@ -// @ts-ignore - jison doesn't export types -import { parser } from './parser/info.jison'; -import { db } from './infoDb.js'; +import { parser } from './infoParser.js'; -describe('info diagram', () => { - beforeEach(() => { - parser.yy = db; - parser.yy.clear(); - }); - - it('should handle an info definition', () => { +describe('info', () => { + it('should handle an info definition', async () => { const str = `info`; - parser.parse(str); - - expect(db.getInfo()).toBeFalsy(); + await expect(parser.parse(str)).resolves.not.toThrow(); }); - it('should handle an info definition with showInfo', () => { + it('should handle an info definition with showInfo', async () => { const str = `info showInfo`; - parser.parse(str); + await expect(parser.parse(str)).resolves.not.toThrow(); + }); + + it('should throw because of unsupported info grammar', async () => { + const str = `info unsupported`; + await expect(parser.parse(str)).rejects.toThrow( + 'Parsing failed: unexpected character: ->u<- at offset: 5, skipped 11 characters.' + ); + }); - expect(db.getInfo()).toBeTruthy(); + it('should throw because of unsupported info grammar', async () => { + const str = `info unsupported`; + await expect(parser.parse(str)).rejects.toThrow( + 'Parsing failed: unexpected character: ->u<- at offset: 5, skipped 11 characters.' + ); }); }); diff --git a/packages/mermaid/src/diagrams/info/infoDb.ts b/packages/mermaid/src/diagrams/info/infoDb.ts index ff4bfcae05..f05908522d 100644 --- a/packages/mermaid/src/diagrams/info/infoDb.ts +++ b/packages/mermaid/src/diagrams/info/infoDb.ts @@ -1,23 +1,10 @@ import type { InfoFields, InfoDB } from './infoTypes.js'; +import { version } from '../../../package.json'; -export const DEFAULT_INFO_DB: InfoFields = { - info: false, -} as const; +export const DEFAULT_INFO_DB: InfoFields = { version } as const; -let info: boolean = DEFAULT_INFO_DB.info; - -export const setInfo = (toggle: boolean): void => { - info = toggle; -}; - -export const getInfo = (): boolean => info; - -const clear = (): void => { - info = DEFAULT_INFO_DB.info; -}; +export const getVersion = (): string => DEFAULT_INFO_DB.version; export const db: InfoDB = { - clear, - setInfo, - getInfo, + getVersion, }; diff --git a/packages/mermaid/src/diagrams/info/infoDiagram.ts b/packages/mermaid/src/diagrams/info/infoDiagram.ts index b21827b5fa..442616490d 100644 --- a/packages/mermaid/src/diagrams/info/infoDiagram.ts +++ b/packages/mermaid/src/diagrams/info/infoDiagram.ts @@ -1,6 +1,5 @@ import type { DiagramDefinition } from '../../diagram-api/types.js'; -// @ts-ignore - jison doesn't export types -import parser from './parser/info.jison'; +import { parser } from './infoParser.js'; import { db } from './infoDb.js'; import { renderer } from './infoRenderer.js'; diff --git a/packages/mermaid/src/diagrams/info/infoParser.ts b/packages/mermaid/src/diagrams/info/infoParser.ts new file mode 100644 index 0000000000..5fd54258ab --- /dev/null +++ b/packages/mermaid/src/diagrams/info/infoParser.ts @@ -0,0 +1,11 @@ +import type { Info } from '@mermaid-js/parser'; +import { parse } from '@mermaid-js/parser'; +import type { ParserDefinition } from '../../diagram-api/types.js'; +import { log } from '../../logger.js'; + +export const parser: ParserDefinition = { + parse: async (input: string): Promise => { + const ast: Info = await parse('info', input); + log.debug(ast); + }, +}; diff --git a/packages/mermaid/src/diagrams/info/infoTypes.ts b/packages/mermaid/src/diagrams/info/infoTypes.ts index 239f8fdda3..82c25e2da8 100644 --- a/packages/mermaid/src/diagrams/info/infoTypes.ts +++ b/packages/mermaid/src/diagrams/info/infoTypes.ts @@ -1,11 +1,9 @@ import type { DiagramDB } from '../../diagram-api/types.js'; export interface InfoFields { - info: boolean; + version: string; } export interface InfoDB extends DiagramDB { - clear: () => void; - setInfo: (info: boolean) => void; - getInfo: () => boolean; + getVersion: () => string; } diff --git a/packages/mermaid/src/diagrams/info/parser/info.jison b/packages/mermaid/src/diagrams/info/parser/info.jison deleted file mode 100644 index 473b63fcfc..0000000000 --- a/packages/mermaid/src/diagrams/info/parser/info.jison +++ /dev/null @@ -1,48 +0,0 @@ -/** mermaid - * https://knsv.github.io/mermaid - * (c) 2015 Knut Sveidqvist - * MIT license. - */ -%lex - -%options case-insensitive - -%{ - // Pre-lexer code can go here -%} - -%% - -"info" return 'info' ; -[\s\n\r]+ return 'NL' ; -[\s]+ return 'space'; -"showInfo" return 'showInfo'; -<> return 'EOF' ; -. return 'TXT' ; - -/lex - -%start start - -%% /* language grammar */ - -start -// %{ : info document 'EOF' { return yy; } } - : info document 'EOF' { return yy; } - ; - -document - : /* empty */ - | document line - ; - -line - : statement { } - | 'NL' - ; - -statement - : showInfo { yy.setInfo(true); } - ; - -%% diff --git a/packages/mermaid/src/diagrams/packet/db.ts b/packages/mermaid/src/diagrams/packet/db.ts new file mode 100644 index 0000000000..d7b5504723 --- /dev/null +++ b/packages/mermaid/src/diagrams/packet/db.ts @@ -0,0 +1,59 @@ +import { getConfig as commonGetConfig } from '../../config.js'; +import type { PacketDiagramConfig } from '../../config.type.js'; +import DEFAULT_CONFIG from '../../defaultConfig.js'; +import { cleanAndMerge } from '../../utils.js'; +import { + clear as commonClear, + getAccDescription, + getAccTitle, + getDiagramTitle, + setAccDescription, + setAccTitle, + setDiagramTitle, +} from '../common/commonDb.js'; +import type { PacketDB, PacketData, PacketWord } from './types.js'; + +const defaultPacketData: PacketData = { + packet: [], +}; + +let data: PacketData = structuredClone(defaultPacketData); + +const DEFAULT_PACKET_CONFIG: Required = DEFAULT_CONFIG.packet; + +const getConfig = (): Required => { + const config = cleanAndMerge({ + ...DEFAULT_PACKET_CONFIG, + ...commonGetConfig().packet, + }); + if (config.showBits) { + config.paddingY += 10; + } + return config; +}; + +const getPacket = (): PacketWord[] => data.packet; + +const pushWord = (word: PacketWord) => { + if (word.length > 0) { + data.packet.push(word); + } +}; + +const clear = () => { + commonClear(); + data = structuredClone(defaultPacketData); +}; + +export const db: PacketDB = { + pushWord, + getPacket, + getConfig, + clear, + setAccTitle, + getAccTitle, + setDiagramTitle, + getDiagramTitle, + getAccDescription, + setAccDescription, +}; diff --git a/packages/mermaid/src/diagrams/packet/detector.ts b/packages/mermaid/src/diagrams/packet/detector.ts new file mode 100644 index 0000000000..5aca92e6cf --- /dev/null +++ b/packages/mermaid/src/diagrams/packet/detector.ts @@ -0,0 +1,22 @@ +import type { + DiagramDetector, + DiagramLoader, + ExternalDiagramDefinition, +} from '../../diagram-api/types.js'; + +const id = 'packet'; + +const detector: DiagramDetector = (txt) => { + return /^\s*packet-beta/.test(txt); +}; + +const loader: DiagramLoader = async () => { + const { diagram } = await import('./diagram.js'); + return { id, diagram }; +}; + +export const packet: ExternalDiagramDefinition = { + id, + detector, + loader, +}; diff --git a/packages/mermaid/src/diagrams/packet/diagram.ts b/packages/mermaid/src/diagrams/packet/diagram.ts new file mode 100644 index 0000000000..a73a77c052 --- /dev/null +++ b/packages/mermaid/src/diagrams/packet/diagram.ts @@ -0,0 +1,12 @@ +import type { DiagramDefinition } from '../../diagram-api/types.js'; +import { db } from './db.js'; +import { parser } from './parser.js'; +import { renderer } from './renderer.js'; +import { styles } from './styles.js'; + +export const diagram: DiagramDefinition = { + parser, + db, + renderer, + styles, +}; diff --git a/packages/mermaid/src/diagrams/packet/packet.spec.ts b/packages/mermaid/src/diagrams/packet/packet.spec.ts new file mode 100644 index 0000000000..b053ea6275 --- /dev/null +++ b/packages/mermaid/src/diagrams/packet/packet.spec.ts @@ -0,0 +1,175 @@ +import { it, describe, expect } from 'vitest'; +import { db } from './db.js'; +import { parser } from './parser.js'; + +const { clear, getPacket, getDiagramTitle, getAccTitle, getAccDescription } = db; + +describe('packet diagrams', () => { + beforeEach(() => { + clear(); + }); + + it('should handle a packet-beta definition', async () => { + const str = `packet-beta`; + await expect(parser.parse(str)).resolves.not.toThrow(); + expect(getPacket()).toMatchInlineSnapshot('[]'); + }); + + it('should handle diagram with data and title', async () => { + const str = `packet-beta + title Packet diagram + accTitle: Packet accTitle + accDescr: Packet accDescription + 0-10: "test" + `; + await expect(parser.parse(str)).resolves.not.toThrow(); + expect(getDiagramTitle()).toMatchInlineSnapshot('"Packet diagram"'); + expect(getAccTitle()).toMatchInlineSnapshot('"Packet accTitle"'); + expect(getAccDescription()).toMatchInlineSnapshot('"Packet accDescription"'); + expect(getPacket()).toMatchInlineSnapshot(` + [ + [ + { + "end": 10, + "label": "test", + "start": 0, + }, + ], + ] + `); + }); + + it('should handle single bits', async () => { + const str = `packet-beta + 0-10: "test" + 11: "single" + `; + await expect(parser.parse(str)).resolves.not.toThrow(); + expect(getPacket()).toMatchInlineSnapshot(` + [ + [ + { + "end": 10, + "label": "test", + "start": 0, + }, + { + "end": 11, + "label": "single", + "start": 11, + }, + ], + ] + `); + }); + + it('should split into multiple rows', async () => { + const str = `packet-beta + 0-10: "test" + 11-90: "multiple" + `; + await expect(parser.parse(str)).resolves.not.toThrow(); + expect(getPacket()).toMatchInlineSnapshot(` + [ + [ + { + "end": 10, + "label": "test", + "start": 0, + }, + { + "end": 31, + "label": "multiple", + "start": 11, + }, + ], + [ + { + "end": 63, + "label": "multiple", + "start": 32, + }, + ], + [ + { + "end": 90, + "label": "multiple", + "start": 64, + }, + ], + ] + `); + }); + + it('should split into multiple rows when cut at exact length', async () => { + const str = `packet-beta + 0-16: "test" + 17-63: "multiple" + `; + await expect(parser.parse(str)).resolves.not.toThrow(); + expect(getPacket()).toMatchInlineSnapshot(` + [ + [ + { + "end": 16, + "label": "test", + "start": 0, + }, + { + "end": 31, + "label": "multiple", + "start": 17, + }, + ], + [ + { + "end": 63, + "label": "multiple", + "start": 32, + }, + ], + ] + `); + }); + + it('should throw error if numbers are not continuous', async () => { + const str = `packet-beta + 0-16: "test" + 18-20: "error" + `; + await expect(parser.parse(str)).rejects.toThrowErrorMatchingInlineSnapshot( + '"Packet block 18 - 20 is not contiguous. It should start from 17."' + ); + }); + + it('should throw error if numbers are not continuous for single packets', async () => { + const str = `packet-beta + 0-16: "test" + 18: "error" + `; + await expect(parser.parse(str)).rejects.toThrowErrorMatchingInlineSnapshot( + '"Packet block 18 - 18 is not contiguous. It should start from 17."' + ); + }); + + it('should throw error if numbers are not continuous for single packets - 2', async () => { + const str = `packet-beta + 0-16: "test" + 17: "good" + 19: "error" + `; + await expect(parser.parse(str)).rejects.toThrowErrorMatchingInlineSnapshot( + '"Packet block 19 - 19 is not contiguous. It should start from 18."' + ); + }); + + it('should throw error if end is less than start', async () => { + const str = `packet-beta + 0-16: "test" + 25-20: "error" + `; + await expect(parser.parse(str)).rejects.toThrowErrorMatchingInlineSnapshot( + '"Packet block 25 - 20 is invalid. End must be greater than start."' + ); + }); +}); diff --git a/packages/mermaid/src/diagrams/packet/parser.ts b/packages/mermaid/src/diagrams/packet/parser.ts new file mode 100644 index 0000000000..06d180dfd6 --- /dev/null +++ b/packages/mermaid/src/diagrams/packet/parser.ts @@ -0,0 +1,85 @@ +import type { Packet } from '@mermaid-js/parser'; +import { parse } from '@mermaid-js/parser'; +import type { ParserDefinition } from '../../diagram-api/types.js'; +import { log } from '../../logger.js'; +import { populateCommonDb } from '../common/populateCommonDb.js'; +import { db } from './db.js'; +import type { PacketBlock, PacketWord } from './types.js'; + +const maxPacketSize = 10_000; + +const populate = (ast: Packet) => { + populateCommonDb(ast, db); + let lastByte = -1; + let word: PacketWord = []; + let row = 1; + const { bitsPerRow } = db.getConfig(); + for (let { start, end, label } of ast.blocks) { + if (end && end < start) { + throw new Error(`Packet block ${start} - ${end} is invalid. End must be greater than start.`); + } + if (start !== lastByte + 1) { + throw new Error( + `Packet block ${start} - ${end ?? start} is not contiguous. It should start from ${ + lastByte + 1 + }.` + ); + } + lastByte = end ?? start; + log.debug(`Packet block ${start} - ${lastByte} with label ${label}`); + + while (word.length <= bitsPerRow + 1 && db.getPacket().length < maxPacketSize) { + const [block, nextBlock] = getNextFittingBlock({ start, end, label }, row, bitsPerRow); + word.push(block); + if (block.end + 1 === row * bitsPerRow) { + db.pushWord(word); + word = []; + row++; + } + if (!nextBlock) { + break; + } + ({ start, end, label } = nextBlock); + } + } + db.pushWord(word); +}; + +const getNextFittingBlock = ( + block: PacketBlock, + row: number, + bitsPerRow: number +): [Required, PacketBlock | undefined] => { + if (block.end === undefined) { + block.end = block.start; + } + + if (block.start > block.end) { + throw new Error(`Block start ${block.start} is greater than block end ${block.end}.`); + } + + if (block.end + 1 <= row * bitsPerRow) { + return [block as Required, undefined]; + } + + return [ + { + start: block.start, + end: row * bitsPerRow - 1, + label: block.label, + }, + { + start: row * bitsPerRow, + end: block.end, + label: block.label, + }, + ]; +}; + +export const parser: ParserDefinition = { + parse: async (input: string): Promise => { + const ast: Packet = await parse('packet', input); + log.debug(ast); + populate(ast); + }, +}; diff --git a/packages/mermaid/src/diagrams/packet/renderer.ts b/packages/mermaid/src/diagrams/packet/renderer.ts new file mode 100644 index 0000000000..84feb8c439 --- /dev/null +++ b/packages/mermaid/src/diagrams/packet/renderer.ts @@ -0,0 +1,95 @@ +import type { Diagram } from '../../Diagram.js'; +import type { PacketDiagramConfig } from '../../config.type.js'; +import type { DiagramRenderer, DrawDefinition, Group, SVG } from '../../diagram-api/types.js'; +import { selectSvgElement } from '../../rendering-util/selectSvgElement.js'; +import { configureSvgSize } from '../../setupGraphViewbox.js'; +import type { PacketDB, PacketWord } from './types.js'; + +// eslint-disable-next-line @typescript-eslint/no-unused-vars +const draw: DrawDefinition = (_text, id, _version, diagram: Diagram) => { + const db = diagram.db as PacketDB; + const config = db.getConfig(); + const { rowHeight, paddingY, bitWidth, bitsPerRow } = config; + const words = db.getPacket(); + const title = db.getDiagramTitle(); + const totalRowHeight = rowHeight + paddingY; + const svgHeight = totalRowHeight * (words.length + 1) - (title ? 0 : rowHeight); + const svgWidth = bitWidth * bitsPerRow + 2; + const svg: SVG = selectSvgElement(id); + + svg.attr('viewbox', `0 0 ${svgWidth} ${svgHeight}`); + configureSvgSize(svg, svgHeight, svgWidth, config.useMaxWidth); + + for (const [word, packet] of words.entries()) { + drawWord(svg, packet, word, config); + } + + svg + .append('text') + .text(title) + .attr('x', svgWidth / 2) + .attr('y', svgHeight - totalRowHeight / 2) + .attr('dominant-baseline', 'middle') + .attr('text-anchor', 'middle') + .attr('class', 'packetTitle'); +}; + +const drawWord = ( + svg: SVG, + word: PacketWord, + rowNumber: number, + { rowHeight, paddingX, paddingY, bitWidth, bitsPerRow, showBits }: Required +) => { + const group: Group = svg.append('g'); + const wordY = rowNumber * (rowHeight + paddingY) + paddingY; + for (const block of word) { + const blockX = (block.start % bitsPerRow) * bitWidth + 1; + const width = (block.end - block.start + 1) * bitWidth - paddingX; + // Block rectangle + group + .append('rect') + .attr('x', blockX) + .attr('y', wordY) + .attr('width', width) + .attr('height', rowHeight) + .attr('class', 'packetBlock'); + + // Block label + group + .append('text') + .attr('x', blockX + width / 2) + .attr('y', wordY + rowHeight / 2) + .attr('class', 'packetLabel') + .attr('dominant-baseline', 'middle') + .attr('text-anchor', 'middle') + .text(block.label); + + if (!showBits) { + continue; + } + // Start byte count + const isSingleBlock = block.end === block.start; + const bitNumberY = wordY - 2; + group + .append('text') + .attr('x', blockX + (isSingleBlock ? width / 2 : 0)) + .attr('y', bitNumberY) + .attr('class', 'packetByte start') + .attr('dominant-baseline', 'auto') + .attr('text-anchor', isSingleBlock ? 'middle' : 'start') + .text(block.start); + + // Draw end byte count if it is not the same as start byte count + if (!isSingleBlock) { + group + .append('text') + .attr('x', blockX + width) + .attr('y', bitNumberY) + .attr('class', 'packetByte end') + .attr('dominant-baseline', 'auto') + .attr('text-anchor', 'end') + .text(block.end); + } + } +}; +export const renderer: DiagramRenderer = { draw }; diff --git a/packages/mermaid/src/diagrams/packet/styles.ts b/packages/mermaid/src/diagrams/packet/styles.ts new file mode 100644 index 0000000000..ff940d0e63 --- /dev/null +++ b/packages/mermaid/src/diagrams/packet/styles.ts @@ -0,0 +1,47 @@ +import type { DiagramStylesProvider } from '../../diagram-api/types.js'; +import { cleanAndMerge } from '../../utils.js'; +import type { PacketStyleOptions } from './types.js'; + +const defaultPacketStyleOptions: PacketStyleOptions = { + byteFontSize: '10px', + startByteColor: 'black', + endByteColor: 'black', + labelColor: 'black', + labelFontSize: '12px', + titleColor: 'black', + titleFontSize: '14px', + blockStrokeColor: 'black', + blockStrokeWidth: '1', + blockFillColor: '#efefef', +}; + +export const styles: DiagramStylesProvider = ({ packet }: { packet?: PacketStyleOptions } = {}) => { + const options = cleanAndMerge(defaultPacketStyleOptions, packet); + + return ` + .packetByte { + font-size: ${options.byteFontSize}; + } + .packetByte.start { + fill: ${options.startByteColor}; + } + .packetByte.end { + fill: ${options.endByteColor}; + } + .packetLabel { + fill: ${options.labelColor}; + font-size: ${options.labelFontSize}; + } + .packetTitle { + fill: ${options.titleColor}; + font-size: ${options.titleFontSize}; + } + .packetBlock { + stroke: ${options.blockStrokeColor}; + stroke-width: ${options.blockStrokeWidth}; + fill: ${options.blockFillColor}; + } + `; +}; + +export default styles; diff --git a/packages/mermaid/src/diagrams/packet/types.ts b/packages/mermaid/src/diagrams/packet/types.ts new file mode 100644 index 0000000000..ea3c5d0dda --- /dev/null +++ b/packages/mermaid/src/diagrams/packet/types.ts @@ -0,0 +1,29 @@ +import type { Packet, RecursiveAstOmit } from '@mermaid-js/parser'; +import type { PacketDiagramConfig } from '../../config.type.js'; +import type { DiagramDBBase } from '../../diagram-api/types.js'; +import type { ArrayElement } from '../../types.js'; + +export type PacketBlock = RecursiveAstOmit>; +export type PacketWord = Required[]; + +export interface PacketDB extends DiagramDBBase { + pushWord: (word: PacketWord) => void; + getPacket: () => PacketWord[]; +} + +export interface PacketStyleOptions { + byteFontSize?: string; + startByteColor?: string; + endByteColor?: string; + labelColor?: string; + labelFontSize?: string; + blockStrokeColor?: string; + blockStrokeWidth?: string; + blockFillColor?: string; + titleColor?: string; + titleFontSize?: string; +} + +export interface PacketData { + packet: PacketWord[]; +} diff --git a/packages/mermaid/src/diagrams/pie/parser/pie.jison b/packages/mermaid/src/diagrams/pie/parser/pie.jison deleted file mode 100644 index d1f516e755..0000000000 --- a/packages/mermaid/src/diagrams/pie/parser/pie.jison +++ /dev/null @@ -1,74 +0,0 @@ -/** mermaid - * https://knsv.github.io/mermaid - * (c) 2015 Knut Sveidqvist - * MIT license. - */ -%lex -%options case-insensitive - -%x string -%x title -%x acc_title -%x acc_descr -%x acc_descr_multiline -%% -\%\%(?!\{)[^\n]* /* skip comments */ -[^\}]\%\%[^\n]* /* skip comments */{ /*console.log('');*/ } -[\n\r]+ return 'NEWLINE'; -\%\%[^\n]* /* do nothing */ -[\s]+ /* ignore */ -title { this.begin("title");return 'title'; } -(?!\n|;|#)*[^\n]* { this.popState(); return "title_value"; } - -accTitle\s*":"\s* { this.begin("acc_title");return 'acc_title'; } -<acc_title>(?!\n|;|#)*[^\n]* { this.popState(); return "acc_title_value"; } -accDescr\s*":"\s* { this.begin("acc_descr");return 'acc_descr'; } -<acc_descr>(?!\n|;|#)*[^\n]* { this.popState(); return "acc_descr_value"; } -accDescr\s*"{"\s* { this.begin("acc_descr_multiline");} -<acc_descr_multiline>[\}] { this.popState(); } -<acc_descr_multiline>[^\}]* return "acc_descr_multiline_value"; -["] { this.begin("string"); } -<string>["] { this.popState(); } -<string>[^"]* { return "txt"; } -"pie" return 'PIE'; -"showData" return 'showData'; -":"[\s]*[\d]+(?:\.[\d]+)? return "value"; -<<EOF>> return 'EOF'; - -/lex - -%start start - -%% /* language grammar */ - -start - : eol start - | PIE document - | PIE showData document {yy.setShowData(true);} - ; - -document - : /* empty */ - | document line - ; - -line - : statement eol { $$ = $1 } - ; - -statement - : - | txt value { yy.addSection($1,yy.cleanupValue($2)); } - | title title_value { $$=$2.trim();yy.setDiagramTitle($$); } - | acc_title acc_title_value { $$=$2.trim();yy.setAccTitle($$); } - | acc_descr acc_descr_value { $$=$2.trim();yy.setAccDescription($$); } - | acc_descr_multiline_value { $$=$1.trim();yy.setAccDescription($$); } | section {yy.addSection($1.substr(8));$$=$1.substr(8);} - ; - -eol - : NEWLINE - | ';' - | EOF - ; - -%% diff --git a/packages/mermaid/src/diagrams/pie/pie.spec.ts b/packages/mermaid/src/diagrams/pie/pie.spec.ts index 47a9a95f55..f68e80efdb 100644 --- a/packages/mermaid/src/diagrams/pie/pie.spec.ts +++ b/packages/mermaid/src/diagrams/pie/pie.spec.ts @@ -1,5 +1,4 @@ -// @ts-ignore: JISON doesn't support types -import { parser } from './parser/pie.jison'; +import { parser } from './pieParser.js'; import { DEFAULT_PIE_DB, db } from './pieDb.js'; import { setConfig } from '../../diagram-api/diagramAPI.js'; @@ -8,17 +7,11 @@ setConfig({ }); describe('pie', () => { - beforeAll(() => { - parser.yy = db; - }); - - beforeEach(() => { - parser.yy.clear(); - }); + beforeEach(() => db.clear()); describe('parse', () => { - it('should handle very simple pie', () => { - parser.parse(`pie + it('should handle very simple pie', async () => { + await parser.parse(`pie "ash": 100 `); @@ -26,8 +19,8 @@ describe('pie', () => { expect(sections['ash']).toBe(100); }); - it('should handle simple pie', () => { - parser.parse(`pie + it('should handle simple pie', async () => { + await parser.parse(`pie "ash" : 60 "bat" : 40 `); @@ -37,8 +30,8 @@ describe('pie', () => { expect(sections['bat']).toBe(40); }); - it('should handle simple pie with showData', () => { - parser.parse(`pie showData + it('should handle simple pie with showData', async () => { + await parser.parse(`pie showData "ash" : 60 "bat" : 40 `); @@ -50,8 +43,8 @@ describe('pie', () => { expect(sections['bat']).toBe(40); }); - it('should handle simple pie with comments', () => { - parser.parse(`pie + it('should handle simple pie with comments', async () => { + await parser.parse(`pie %% comments "ash" : 60 "bat" : 40 @@ -62,8 +55,8 @@ describe('pie', () => { expect(sections['bat']).toBe(40); }); - it('should handle simple pie with a title', () => { - parser.parse(`pie title a 60/40 pie + it('should handle simple pie with a title', async () => { + await parser.parse(`pie title a 60/40 pie "ash" : 60 "bat" : 40 `); @@ -75,8 +68,8 @@ describe('pie', () => { expect(sections['bat']).toBe(40); }); - it('should handle simple pie with an acc title (accTitle)', () => { - parser.parse(`pie title a neat chart + it('should handle simple pie with an acc title (accTitle)', async () => { + await parser.parse(`pie title a neat chart accTitle: a neat acc title "ash" : 60 "bat" : 40 @@ -91,8 +84,8 @@ describe('pie', () => { expect(sections['bat']).toBe(40); }); - it('should handle simple pie with an acc description (accDescr)', () => { - parser.parse(`pie title a neat chart + it('should handle simple pie with an acc description (accDescr)', async () => { + await parser.parse(`pie title a neat chart accDescr: a neat description "ash" : 60 "bat" : 40 @@ -107,8 +100,8 @@ describe('pie', () => { expect(sections['bat']).toBe(40); }); - it('should handle simple pie with a multiline acc description (accDescr)', () => { - parser.parse(`pie title a neat chart + it('should handle simple pie with a multiline acc description (accDescr)', async () => { + await parser.parse(`pie title a neat chart accDescr { a neat description on multiple lines @@ -126,8 +119,8 @@ describe('pie', () => { expect(sections['bat']).toBe(40); }); - it('should handle simple pie with positive decimal', () => { - parser.parse(`pie + it('should handle simple pie with positive decimal', async () => { + await parser.parse(`pie "ash" : 60.67 "bat" : 40 `); @@ -138,12 +131,12 @@ describe('pie', () => { }); it('should handle simple pie with negative decimal', () => { - expect(() => { - parser.parse(`pie + expect(async () => { + await parser.parse(`pie "ash" : -60.67 "bat" : 40.12 `); - }).toThrowError(); + }).rejects.toThrowError(); }); }); diff --git a/packages/mermaid/src/diagrams/pie/pieDb.ts b/packages/mermaid/src/diagrams/pie/pieDb.ts index e2eebea543..1501aad1f4 100644 --- a/packages/mermaid/src/diagrams/pie/pieDb.ts +++ b/packages/mermaid/src/diagrams/pie/pieDb.ts @@ -1,6 +1,4 @@ import { log } from '../../logger.js'; -import { getConfig as commonGetConfig } from '../../diagram-api/diagramAPI.js'; -import { sanitizeText } from '../common/common.js'; import { setAccTitle, getAccTitle, @@ -10,7 +8,7 @@ import { setAccDescription, clear as commonClear, } from '../common/commonDb.js'; -import type { PieFields, PieDB, Sections } from './pieTypes.js'; +import type { PieFields, PieDB, Sections, D3Section } from './pieTypes.js'; import type { RequiredDeep } from 'type-fest'; import type { PieDiagramConfig } from '../../config.type.js'; import DEFAULT_CONFIG from '../../defaultConfig.js'; @@ -35,8 +33,7 @@ const clear = (): void => { commonClear(); }; -const addSection = (label: string, value: number): void => { - label = sanitizeText(label, commonGetConfig()); +const addSection = ({ label, value }: D3Section): void => { if (sections[label] === undefined) { sections[label] = value; log.debug(`added new section: ${label}, with value: ${value}`); @@ -45,13 +42,6 @@ const addSection = (label: string, value: number): void => { const getSections = (): Sections => sections; -const cleanupValue = (value: string): number => { - if (value.substring(0, 1) === ':') { - value = value.substring(1).trim(); - } - return Number(value.trim()); -}; - const setShowData = (toggle: boolean): void => { showData = toggle; }; @@ -71,7 +61,6 @@ export const db: PieDB = { addSection, getSections, - cleanupValue, setShowData, getShowData, }; diff --git a/packages/mermaid/src/diagrams/pie/pieDiagram.ts b/packages/mermaid/src/diagrams/pie/pieDiagram.ts index f0aa19b419..eb990e8769 100644 --- a/packages/mermaid/src/diagrams/pie/pieDiagram.ts +++ b/packages/mermaid/src/diagrams/pie/pieDiagram.ts @@ -1,6 +1,5 @@ import type { DiagramDefinition } from '../../diagram-api/types.js'; -// @ts-ignore: JISON doesn't support types -import parser from './parser/pie.jison'; +import { parser } from './pieParser.js'; import { db } from './pieDb.js'; import styles from './pieStyles.js'; import { renderer } from './pieRenderer.js'; diff --git a/packages/mermaid/src/diagrams/pie/pieParser.ts b/packages/mermaid/src/diagrams/pie/pieParser.ts new file mode 100644 index 0000000000..fbdc603d60 --- /dev/null +++ b/packages/mermaid/src/diagrams/pie/pieParser.ts @@ -0,0 +1,21 @@ +import type { Pie } from '@mermaid-js/parser'; +import { parse } from '@mermaid-js/parser'; +import { log } from '../../logger.js'; +import type { ParserDefinition } from '../../diagram-api/types.js'; +import { populateCommonDb } from '../common/populateCommonDb.js'; +import type { PieDB } from './pieTypes.js'; +import { db } from './pieDb.js'; + +const populateDb = (ast: Pie, db: PieDB) => { + populateCommonDb(ast, db); + db.setShowData(ast.showData); + ast.sections.map(db.addSection); +}; + +export const parser: ParserDefinition = { + parse: async (input: string): Promise<void> => { + const ast: Pie = await parse('pie', input); + log.debug(ast); + populateDb(ast, db); + }, +}; diff --git a/packages/mermaid/src/diagrams/pie/pieRenderer.ts b/packages/mermaid/src/diagrams/pie/pieRenderer.ts index a24bcb532b..fb386863b0 100644 --- a/packages/mermaid/src/diagrams/pie/pieRenderer.ts +++ b/packages/mermaid/src/diagrams/pie/pieRenderer.ts @@ -5,24 +5,24 @@ import { configureSvgSize } from '../../setupGraphViewbox.js'; import { getConfig } from '../../diagram-api/diagramAPI.js'; import { cleanAndMerge, parseFontSize } from '../../utils.js'; import type { DrawDefinition, Group, SVG } from '../../diagram-api/types.js'; -import type { D3Sections, PieDB, Sections } from './pieTypes.js'; +import type { D3Section, PieDB, Sections } from './pieTypes.js'; import type { MermaidConfig, PieDiagramConfig } from '../../config.type.js'; import { selectSvgElement } from '../../rendering-util/selectSvgElement.js'; -const createPieArcs = (sections: Sections): d3.PieArcDatum<D3Sections>[] => { +const createPieArcs = (sections: Sections): d3.PieArcDatum<D3Section>[] => { // Compute the position of each group on the pie: - const pieData: D3Sections[] = Object.entries(sections) - .map((element: [string, number]): D3Sections => { + const pieData: D3Section[] = Object.entries(sections) + .map((element: [string, number]): D3Section => { return { label: element[0], value: element[1], }; }) - .sort((a: D3Sections, b: D3Sections): number => { + .sort((a: D3Section, b: D3Section): number => { return b.value - a.value; }); - const pie: d3.Pie<unknown, D3Sections> = d3pie<D3Sections>().value( - (d3Section: D3Sections): number => d3Section.value + const pie: d3.Pie<unknown, D3Section> = d3pie<D3Section>().value( + (d3Section: D3Section): number => d3Section.value ); return pie(pieData); }; @@ -47,7 +47,6 @@ export const draw: DrawDefinition = (text, id, _version, diagObj) => { const pieWidth: number = height; const svg: SVG = selectSvgElement(id); const group: Group = svg.append('g'); - const sections: Sections = db.getSections(); group.attr('transform', 'translate(' + pieWidth / 2 + ',' + height / 2 + ')'); const { themeVariables } = globalConfig; @@ -57,13 +56,11 @@ export const draw: DrawDefinition = (text, id, _version, diagObj) => { const textPosition: number = pieConfig.textPosition; const radius: number = Math.min(pieWidth, height) / 2 - MARGIN; // Shape helper to build arcs: - const arcGenerator: d3.Arc<unknown, d3.PieArcDatum<D3Sections>> = arc< - d3.PieArcDatum<D3Sections> - >() + const arcGenerator: d3.Arc<unknown, d3.PieArcDatum<D3Section>> = arc<d3.PieArcDatum<D3Section>>() .innerRadius(0) .outerRadius(radius); - const labelArcGenerator: d3.Arc<unknown, d3.PieArcDatum<D3Sections>> = arc< - d3.PieArcDatum<D3Sections> + const labelArcGenerator: d3.Arc<unknown, d3.PieArcDatum<D3Section>> = arc< + d3.PieArcDatum<D3Section> >() .innerRadius(radius * textPosition) .outerRadius(radius * textPosition); @@ -75,7 +72,8 @@ export const draw: DrawDefinition = (text, id, _version, diagObj) => { .attr('r', radius + outerStrokeWidth / 2) .attr('class', 'pieOuterCircle'); - const arcs: d3.PieArcDatum<D3Sections>[] = createPieArcs(sections); + const sections: Sections = db.getSections(); + const arcs: d3.PieArcDatum<D3Section>[] = createPieArcs(sections); const myGeneratedColors = [ themeVariables.pie1, @@ -101,7 +99,7 @@ export const draw: DrawDefinition = (text, id, _version, diagObj) => { .enter() .append('path') .attr('d', arcGenerator) - .attr('fill', (datum: d3.PieArcDatum<D3Sections>) => { + .attr('fill', (datum: d3.PieArcDatum<D3Section>) => { return color(datum.data.label); }) .attr('class', 'pieCircle'); @@ -117,10 +115,10 @@ export const draw: DrawDefinition = (text, id, _version, diagObj) => { .data(arcs) .enter() .append('text') - .text((datum: d3.PieArcDatum<D3Sections>): string => { + .text((datum: d3.PieArcDatum<D3Section>): string => { return ((datum.data.value / sum) * 100).toFixed(0) + '%'; }) - .attr('transform', (datum: d3.PieArcDatum<D3Sections>): string => { + .attr('transform', (datum: d3.PieArcDatum<D3Section>): string => { return 'translate(' + labelArcGenerator.centroid(datum) + ')'; }) .style('text-anchor', 'middle') @@ -160,7 +158,7 @@ export const draw: DrawDefinition = (text, id, _version, diagObj) => { .append('text') .attr('x', LEGEND_RECT_SIZE + LEGEND_SPACING) .attr('y', LEGEND_RECT_SIZE - LEGEND_SPACING) - .text((datum: d3.PieArcDatum<D3Sections>): string => { + .text((datum: d3.PieArcDatum<D3Section>): string => { const { label, value } = datum.data; if (db.getShowData()) { return `${label} [${value}]`; diff --git a/packages/mermaid/src/diagrams/pie/pieTypes.ts b/packages/mermaid/src/diagrams/pie/pieTypes.ts index d297c80f93..8b8a367e42 100644 --- a/packages/mermaid/src/diagrams/pie/pieTypes.ts +++ b/packages/mermaid/src/diagrams/pie/pieTypes.ts @@ -36,7 +36,7 @@ export interface PieStyleOptions { export type Sections = Record<string, number>; -export interface D3Sections { +export interface D3Section { label: string; value: number; } @@ -55,9 +55,8 @@ export interface PieDB extends DiagramDB { getAccDescription: () => string; // diagram db - addSection: (label: string, value: number) => void; + addSection: ({ label, value }: D3Section) => void; getSections: () => Sections; - cleanupValue: (value: string) => number; setShowData: (toggle: boolean) => void; getShowData: () => boolean; } diff --git a/packages/mermaid/src/diagrams/sequence/sequenceDiagram.spec.js b/packages/mermaid/src/diagrams/sequence/sequenceDiagram.spec.js index c8dab58682..1724391e53 100644 --- a/packages/mermaid/src/diagrams/sequence/sequenceDiagram.spec.js +++ b/packages/mermaid/src/diagrams/sequence/sequenceDiagram.spec.js @@ -1,12 +1,12 @@ import { vi } from 'vitest'; import { setSiteConfig } from '../../diagram-api/diagramAPI.js'; import mermaidAPI from '../../mermaidAPI.js'; -import { Diagram, getDiagramFromText } from '../../Diagram.js'; +import { Diagram } from '../../Diagram.js'; import { addDiagrams } from '../../diagram-api/diagram-orchestration.js'; beforeAll(async () => { // Is required to load the sequence diagram - await getDiagramFromText('sequenceDiagram'); + await Diagram.fromText('sequenceDiagram'); }); /** @@ -95,8 +95,8 @@ function addConf(conf, key, value) { let diagram; describe('more than one sequence diagram', () => { - it('should not have duplicated messages', () => { - const diagram1 = new Diagram(` + it('should not have duplicated messages', async () => { + const diagram1 = await Diagram.fromText(` sequenceDiagram Alice->Bob:Hello Bob, how are you? Bob-->Alice: I am good thanks!`); @@ -120,7 +120,7 @@ describe('more than one sequence diagram', () => { }, ] `); - const diagram2 = new Diagram(` + const diagram2 = await Diagram.fromText(` sequenceDiagram Alice->Bob:Hello Bob, how are you? Bob-->Alice: I am good thanks!`); @@ -147,7 +147,7 @@ describe('more than one sequence diagram', () => { `); // Add John actor - const diagram3 = new Diagram(` + const diagram3 = await Diagram.fromText(` sequenceDiagram Alice->John:Hello John, how are you? John-->Alice: I am good thanks!`); @@ -176,8 +176,8 @@ describe('more than one sequence diagram', () => { }); describe('when parsing a sequenceDiagram', function () { - beforeEach(function () { - diagram = new Diagram(` + beforeEach(async function () { + diagram = await Diagram.fromText(` sequenceDiagram Alice->Bob:Hello Bob, how are you? Note right of Bob: Bob thinks @@ -1613,7 +1613,7 @@ describe('when rendering a sequenceDiagram APA', function () { setSiteConfig({ logLevel: 5, sequence: conf }); }); let conf; - beforeEach(function () { + beforeEach(async function () { mermaidAPI.reset(); // }); @@ -1632,7 +1632,7 @@ describe('when rendering a sequenceDiagram APA', function () { mirrorActors: false, }; setSiteConfig({ logLevel: 5, sequence: conf }); - diagram = new Diagram(` + diagram = await Diagram.fromText(` sequenceDiagram Alice->Bob:Hello Bob, how are you? Note right of Bob: Bob thinks diff --git a/packages/mermaid/src/docs/.vitepress/config.ts b/packages/mermaid/src/docs/.vitepress/config.ts index 401130518b..d937daf634 100644 --- a/packages/mermaid/src/docs/.vitepress/config.ts +++ b/packages/mermaid/src/docs/.vitepress/config.ts @@ -1,6 +1,6 @@ +import { defineConfig, MarkdownOptions } from 'vitepress'; import { version } from '../../../package.json'; import MermaidExample from './mermaid-markdown-all.js'; -import { defineConfig, MarkdownOptions } from 'vitepress'; const allMarkdownTransformers: MarkdownOptions = { // the shiki theme to highlight code blocks @@ -151,9 +151,10 @@ function sidebarSyntax() { { text: 'Mindmaps', link: '/syntax/mindmap' }, { text: 'Timeline', link: '/syntax/timeline' }, { text: 'Zenuml', link: '/syntax/zenuml' }, - { text: 'Sankey', link: '/syntax/sankey' }, + { text: 'Sankey 🔥', link: '/syntax/sankey' }, { text: 'XYChart 🔥', link: '/syntax/xyChart' }, { text: 'Block Diagram 🔥', link: '/syntax/block' }, + { text: 'Packet 🔥', link: '/syntax/packet' }, { text: 'Other Examples', link: '/syntax/examples' }, ], }, diff --git a/packages/mermaid/src/docs/config/usage.md b/packages/mermaid/src/docs/config/usage.md index ed7dc56dd6..d8b6391265 100644 --- a/packages/mermaid/src/docs/config/usage.md +++ b/packages/mermaid/src/docs/config/usage.md @@ -328,15 +328,17 @@ module.exports = (options) -> ## Advanced usage -**Syntax validation without rendering (Work in Progress)** +### Syntax validation without rendering -The **mermaid.parse(txt)** function validates graph definitions without rendering a graph. **[This function is still a work in progress](https://github.com/mermaid-js/mermaid/issues/1066), find alternatives below.** +The `mermaid.parse(text, parseOptions)` function validates graph definitions without rendering a graph. -The function **mermaid.parse(txt)**, takes a text string as an argument and returns true if the definition follows mermaid's syntax and -false if it does not. The parseError function will be called when the parse function returns false. +The function `mermaid.parse(text, parseOptions)`, takes a text string as an argument and returns `{ diagramType: string }` if the definition follows mermaid's syntax. -When the parser encounters invalid syntax the **mermaid.parseError** function is called. It is possible to override this -function in order to handle the error in an application-specific way. +If the definition is invalid, the function returns `false` if `parseOptions.suppressErrors` is set to `true`. Otherwise, it throws an error. + +The parseError function will be called when the parse function throws an error. It will not be called if `parseOptions.suppressErrors` is set to `true`. + +It is possible to override this function in order to handle the error in an application-specific way. The code-example below in meta code illustrates how this could work: @@ -356,26 +358,10 @@ const textFieldUpdated = async function () { bindEventHandler('change', 'code', textFieldUpdated); ``` -**Alternative to mermaid.parse():** -One effective and more future-proof method of validating your graph definitions, is to paste and render them via the [Mermaid Live Editor](https://mermaid.live/). This will ensure that your code is compliant with the syntax of Mermaid's most recent version. - ## Configuration -Mermaid takes a number of options which lets you tweak the rendering of the diagrams. Currently there are three ways of -setting the options in mermaid. - -1. Instantiation of the configuration using the initialize call -2. _Using the global mermaid object_ - **Deprecated** -3. _using the global mermaid_config object_ - **Deprecated** -4. Instantiation of the configuration using the **mermaid.init** call- **Deprecated** - -The list above has two ways too many of doing this. Three are deprecated and will eventually be removed. The list of -configuration objects are described [in the mermaidAPI documentation](./setup/README.md). - -## Using the `mermaidAPI.initialize`/`mermaid.initialize` call - -The future proof way of setting the configuration is by using the initialization call to mermaid or mermaidAPI depending -on what kind of integration you use. +You can pass the required configuration to the `mermaid.initialize` call. This is the preferred way of configuring mermaid. +The list of configuration objects are described [in the mermaidAPI documentation](./setup/README.md). ```html <script type="module"> @@ -407,37 +393,6 @@ mermaid.startOnLoad = true; This way of setting the configuration is deprecated. Instead the preferred way is to use the initialize method. This functionality is only kept for backwards compatibility. ``` -## Using the mermaid_config - -It is possible to set some configuration via the mermaid object. The two parameters that are supported using this -approach are: - -- mermaid_config.startOnLoad -- mermaid_config.htmlLabels - -```javascript -mermaid_config.startOnLoad = true; -``` - -```warning -This way of setting the configuration is deprecated. Instead the preferred way is to use the initialize method. This functionality is only kept for backwards compatibility. -``` - -## Using the mermaid.init call - -To set some configuration via the mermaid object. The two parameters that are supported using this approach are: - -- mermaid_config.startOnLoad -- mermaid_config.htmlLabels - -```javascript -mermaid_config.startOnLoad = true; -``` - -```warning -This way of setting the configuration is deprecated. Instead the preferred way is to use the initialize method. This functionality is only kept for backwards compatibility. -``` - <!--- cspell:locale en,en-gb cspell:ignore pumbaa diff --git a/packages/mermaid/src/docs/intro/getting-started.md b/packages/mermaid/src/docs/intro/getting-started.md index 1a97fcfbfd..2bfa36bb74 100644 --- a/packages/mermaid/src/docs/intro/getting-started.md +++ b/packages/mermaid/src/docs/intro/getting-started.md @@ -239,18 +239,18 @@ In this example, the `mermaidAPI` is being called through the `CDN`: <body> Here is one mermaid diagram: <pre class="mermaid"> - graph TD - A[Client] --> B[Load Balancer] - B --> C[Server1] + graph TD + A[Client] --> B[Load Balancer] + B --> C[Server1] B --> D[Server2] </pre> And here is another: <pre class="mermaid"> - graph TD + graph TD A[Client] -->|tcp_123| B - B(Load Balancer) - B -->|tcp_456| C[Server1] + B(Load Balancer) + B -->|tcp_456| C[Server1] B -->|tcp_456| D[Server2] </pre> @@ -271,15 +271,15 @@ In this example, `mermaid.js` is referenced in `src` as a separate JavaScript fi </head> <body> <pre class="mermaid"> - graph LR - A --- B - B-->C[fa:fa-ban forbidden] + graph LR + A --- B + B-->C[fa:fa-ban forbidden] B-->D(fa:fa-spinner); </pre> <pre class="mermaid"> - graph TD - A[Client] --> B[Load Balancer] - B --> C[Server1] + graph TD + A[Client] --> B[Load Balancer] + B --> C[Server1] B --> D[Server2] </pre> <script type="module"> diff --git a/packages/mermaid/src/docs/syntax/packet.md b/packages/mermaid/src/docs/syntax/packet.md new file mode 100644 index 0000000000..414b173eff --- /dev/null +++ b/packages/mermaid/src/docs/syntax/packet.md @@ -0,0 +1,101 @@ +# Packet Diagram (v<MERMAID_RELEASE_VERSION>+) + +## Introduction + +A packet diagram is a visual representation used to illustrate the structure and contents of a network packet. Network packets are the fundamental units of data transferred over a network. + +## Usage + +This diagram type is particularly useful for network engineers, educators, and students who require a clear and concise way to represent the structure of network packets. + +## Syntax + +```md +packet-beta +start: "Block name" %% Single-bit block +start-end: "Block name" %% Multi-bit blocks +... More Fields ... +``` + +## Examples + +```mermaid-example +--- +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-example +packet-beta +title UDP Packet +0-15: "Source Port" +16-31: "Destination Port" +32-47: "Length" +48-63: "Checksum" +64-95: "Data (variable length)" +``` + +## Details of Syntax + +- **Ranges**: Each line after the title represents a different field in the packet. The range (e.g., `0-15`) indicates the bit positions in the packet. +- **Field Description**: A brief description of what the field represents, enclosed in quotes. + +## Configuration + +Please refer to the [configuration](/config/schema-docs/config-defs-packet-diagram-config.html) guide for details. + +<!-- + +Theme variables are not currently working due to a mermaid bug. The passed values are not being propagated into styles function. + +## Theme Variables + +| Property | Description | Default Value | +| ---------------- | -------------------------- | ------------- | +| byteFontSize | Font size of the bytes | '10px' | +| startByteColor | Color of the starting byte | 'black' | +| endByteColor | Color of the ending byte | 'black' | +| labelColor | Color of the labels | 'black' | +| labelFontSize | Font size of the labels | '12px' | +| titleColor | Color of the title | 'black' | +| titleFontSize | Font size of the title | '14px' | +| blockStrokeColor | Color of the block stroke | 'black' | +| blockStrokeWidth | Width of the block stroke | '1' | +| blockFillColor | Fill color of the block | '#efefef' | + +## Example on config and theme + +```mermaid-example +--- +config: + packet: + showBits: true + themeVariables: + packet: + startByteColor: red +--- +packet-beta +0-15: "Source Port" +16-31: "Destination Port" +32-63: "Sequence Number" +``` + +--> diff --git a/packages/mermaid/src/mermaid.spec.ts b/packages/mermaid/src/mermaid.spec.ts index 390ee74ef0..8947ac4333 100644 --- a/packages/mermaid/src/mermaid.spec.ts +++ b/packages/mermaid/src/mermaid.spec.ts @@ -104,7 +104,6 @@ describe('when using mermaid and ', () => { parse: (_text) => { return; }, - parser: { yy: {} }, }, styles: () => { // do nothing diff --git a/packages/mermaid/src/mermaid.ts b/packages/mermaid/src/mermaid.ts index a6d4954714..8194872d44 100644 --- a/packages/mermaid/src/mermaid.ts +++ b/packages/mermaid/src/mermaid.ts @@ -6,7 +6,7 @@ import { dedent } from 'ts-dedent'; import type { MermaidConfig } from './config.type.js'; import { log } from './logger.js'; import utils from './utils.js'; -import type { ParseOptions, RenderResult } from './mermaidAPI.js'; +import type { ParseOptions, ParseResult, RenderResult } from './mermaidAPI.js'; import { mermaidAPI } from './mermaidAPI.js'; import { registerLazyLoadedDiagrams, detectType } from './diagram-api/detectType.js'; import { loadRegisteredDiagrams } from './diagram-api/loadDiagram.js'; @@ -15,6 +15,7 @@ import { isDetailedError } from './utils.js'; import type { DetailedError } from './utils.js'; import type { ExternalDiagramDefinition } from './diagram-api/types.js'; import type { UnknownDiagramError } from './errors.js'; +import { addDiagrams } from './diagram-api/diagram-orchestration.js'; export type { MermaidConfig, @@ -23,6 +24,7 @@ export type { ParseErrorFunction, RenderResult, ParseOptions, + ParseResult, UnknownDiagramError, }; @@ -243,6 +245,7 @@ const registerExternalDiagrams = async ( lazyLoad?: boolean; } = {} ) => { + addDiagrams(); registerLazyLoadedDiagrams(...diagrams); if (lazyLoad === false) { await loadRegisteredDiagrams(); @@ -311,11 +314,23 @@ const executeQueue = async () => { /** * Parse the text and validate the syntax. * @param text - The mermaid diagram definition. - * @param parseOptions - Options for parsing. - * @returns true if the diagram is valid, false otherwise if parseOptions.suppressErrors is true. - * @throws Error if the diagram is invalid and parseOptions.suppressErrors is false. + * @param parseOptions - Options for parsing. @see {@link ParseOptions} + * @returns If valid, {@link ParseResult} otherwise `false` if parseOptions.suppressErrors is `true`. + * @throws Error if the diagram is invalid and parseOptions.suppressErrors is false or not set. + * + * @example + * ```js + * console.log(await mermaid.parse('flowchart \n a --> b')); + * // { diagramType: 'flowchart-v2' } + * console.log(await mermaid.parse('wrong \n a --> b', { suppressErrors: true })); + * // false + * console.log(await mermaid.parse('wrong \n a --> b', { suppressErrors: false })); + * // throws Error + * console.log(await mermaid.parse('wrong \n a --> b')); + * // throws Error + * ``` */ -const parse = async (text: string, parseOptions?: ParseOptions): Promise<boolean | void> => { +const parse: typeof mermaidAPI.parse = async (text, parseOptions) => { return new Promise((resolve, reject) => { // This promise will resolve when the render call is done. // It will be queued first and will be executed when it is first in line @@ -364,7 +379,7 @@ const parse = async (text: string, parseOptions?: ParseOptions): Promise<boolean * element will be removed when rendering is completed. * @returns Returns the SVG Definition and BindFunctions. */ -const render = (id: string, text: string, container?: Element): Promise<RenderResult> => { +const render: typeof mermaidAPI.render = (id, text, container) => { return new Promise((resolve, reject) => { // This promise will resolve when the mermaidAPI.render call is done. // It will be queued first and will be executed when it is first in line diff --git a/packages/mermaid/src/mermaidAPI.spec.ts b/packages/mermaid/src/mermaidAPI.spec.ts index 574c1d226f..cd48bec861 100644 --- a/packages/mermaid/src/mermaidAPI.spec.ts +++ b/packages/mermaid/src/mermaidAPI.spec.ts @@ -1,5 +1,4 @@ -'use strict'; -import { vi } from 'vitest'; +import { vi, it, expect, describe, beforeEach } from 'vitest'; // ------------------------------------- // Mocks and mocking @@ -27,26 +26,26 @@ vi.mock('./diagrams/git/gitGraphRenderer.js'); vi.mock('./diagrams/gantt/ganttRenderer.js'); vi.mock('./diagrams/user-journey/journeyRenderer.js'); vi.mock('./diagrams/pie/pieRenderer.js'); +vi.mock('./diagrams/packet/renderer.js'); +vi.mock('./diagrams/xychart/xychartRenderer.js'); vi.mock('./diagrams/requirement/requirementRenderer.js'); vi.mock('./diagrams/sequence/sequenceRenderer.js'); vi.mock('./diagrams/state/stateRenderer-v2.js'); // ------------------------------------- -import mermaid from './mermaid.js'; +import assignWithDepth from './assignWithDepth.js'; import type { MermaidConfig } from './config.type.js'; - -import mermaidAPI, { removeExistingElements } from './mermaidAPI.js'; -import { - createCssStyles, - createUserStyles, +import mermaid from './mermaid.js'; +import mermaidAPI, { appendDivSvgG, cleanUpSvgCode, + createCssStyles, + createUserStyles, putIntoIFrame, + removeExistingElements, } from './mermaidAPI.js'; -import assignWithDepth from './assignWithDepth.js'; - // -------------- // Mocks // To mock a module, first define a mock for it, then (if used explicitly in the tests) import it. Be sure the path points to exactly the same file as is imported in mermaidAPI (the module being tested) @@ -56,6 +55,7 @@ vi.mock('./styles.js', () => { default: vi.fn().mockReturnValue(' .userStyle { font-weight:bold; }'), }; }); + import getStyles from './styles.js'; vi.mock('stylis', () => { @@ -65,6 +65,7 @@ vi.mock('stylis', () => { serialize: vi.fn().mockReturnValue('stylis serialized css'), }; }); + import { compile, serialize } from 'stylis'; import { decodeEntities, encodeEntities } from './utils.js'; import { Diagram } from './Diagram.js'; @@ -564,7 +565,7 @@ describe('mermaidAPI', () => { const config = { logLevel: 0, securityLevel: 'loose', - }; + } as const; mermaidAPI.initialize(config); mermaidAPI.setConfig({ securityLevel: 'strict', logLevel: 1 }); expect(mermaidAPI.getConfig().logLevel).toBe(1); @@ -688,14 +689,21 @@ describe('mermaidAPI', () => { ).resolves.toBe(false); }); it('resolves for valid definition', async () => { - await expect( - mermaidAPI.parse('graph TD;A--x|text including URL space|B;') - ).resolves.toBeTruthy(); + await expect(mermaidAPI.parse('graph TD;A--x|text including URL space|B;')).resolves + .toMatchInlineSnapshot(` + { + "diagramType": "flowchart-v2", + } + `); }); it('returns true for valid definition with silent option', async () => { await expect( mermaidAPI.parse('graph TD;A--x|text including URL space|B;', { suppressErrors: true }) - ).resolves.toBe(true); + ).resolves.toMatchInlineSnapshot(` + { + "diagramType": "flowchart-v2", + } + `); }); }); @@ -718,6 +726,8 @@ describe('mermaidAPI', () => { { textDiagramType: 'gantt', expectedType: 'gantt' }, { textDiagramType: 'journey', expectedType: 'journey' }, { textDiagramType: 'pie', expectedType: 'pie' }, + { textDiagramType: 'packet-beta', expectedType: 'packet' }, + { textDiagramType: 'xychart-beta', expectedType: 'xychart' }, { textDiagramType: 'requirementDiagram', expectedType: 'requirement' }, { textDiagramType: 'sequenceDiagram', expectedType: 'sequence' }, { textDiagramType: 'stateDiagram-v2', expectedType: 'stateDiagram' }, @@ -737,7 +747,8 @@ describe('mermaidAPI', () => { it('should set aria-roledescription to the diagram type AND should call addSVGa11yTitleDescription', async () => { const a11yDiagramInfo_spy = vi.spyOn(accessibility, 'setA11yDiagramInfo'); const a11yTitleDesc_spy = vi.spyOn(accessibility, 'addSVGa11yTitleDescription'); - await mermaidAPI.render(id, diagramText); + const result = await mermaidAPI.render(id, diagramText); + expect(result.diagramType).toBe(expectedDiagramType); expect(a11yDiagramInfo_spy).toHaveBeenCalledWith( expect.anything(), expectedDiagramType diff --git a/packages/mermaid/src/mermaidAPI.ts b/packages/mermaid/src/mermaidAPI.ts index ad9d7d286b..a3eee5d047 100644 --- a/packages/mermaid/src/mermaidAPI.ts +++ b/packages/mermaid/src/mermaidAPI.ts @@ -17,7 +17,7 @@ import { compile, serialize, stringify } from 'stylis'; import { version } from '../package.json'; import * as configApi from './config.js'; import { addDiagrams } from './diagram-api/diagram-orchestration.js'; -import { Diagram, getDiagramFromText as getDiagramFromTextInternal } from './Diagram.js'; +import { Diagram } from './Diagram.js'; import errorRenderer from './diagrams/error/errorRenderer.js'; import { attachFunctions } from './interactionDb.js'; import { log, setLogLevel } from './logger.js'; @@ -57,9 +57,19 @@ const DOMPURIFY_TAGS = ['foreignobject']; const DOMPURIFY_ATTR = ['dominant-baseline']; export interface ParseOptions { + /** + * If `true`, parse will return `false` instead of throwing error when the diagram is invalid. + * The `parseError` function will not be called. + */ suppressErrors?: boolean; } +export interface ParseResult { + /** + * The diagram type, e.g. 'flowchart', 'sequence', etc. + */ + diagramType: string; +} // This makes it clear that we're working with a d3 selected element of some kind, even though it's hard to specify the exact type. export type D3Element = any; @@ -68,6 +78,10 @@ export interface RenderResult { * The svg code for the rendered graph. */ svg: string; + /** + * The diagram type, e.g. 'flowchart', 'sequence', etc. + */ + diagramType: string; /** * Bind function to be called after the svg has been inserted into the DOM. * This is necessary for adding event listeners to the elements in the svg. @@ -90,29 +104,29 @@ function processAndSetConfigs(text: string) { /** * Parse the text and validate the syntax. * @param text - The mermaid diagram definition. - * @param parseOptions - Options for parsing. - * @returns true if the diagram is valid, false otherwise if parseOptions.suppressErrors is true. - * @throws Error if the diagram is invalid and parseOptions.suppressErrors is false. + * @param parseOptions - Options for parsing. @see {@link ParseOptions} + * @returns An object with the `diagramType` set to type of the diagram if valid. Otherwise `false` if parseOptions.suppressErrors is `true`. + * @throws Error if the diagram is invalid and parseOptions.suppressErrors is false or not set. */ - -async function parse(text: string, parseOptions?: ParseOptions): Promise<boolean> { +async function parse( + text: string, + parseOptions: ParseOptions & { suppressErrors: true } +): Promise<ParseResult | false>; +async function parse(text: string, parseOptions?: ParseOptions): Promise<ParseResult>; +async function parse(text: string, parseOptions?: ParseOptions): Promise<ParseResult | false> { addDiagrams(); - - text = processAndSetConfigs(text).code; - try { - await getDiagramFromText(text); + const { code } = processAndSetConfigs(text); + const diagram = await getDiagramFromText(code); + return { diagramType: diagram.type }; } catch (error) { if (parseOptions?.suppressErrors) { return false; } throw error; } - return true; } -// append !important; to each cssClass followed by a final !important, all enclosed in { } -// /** * Create a CSS style that starts with the given class name, then the element, * with an enclosing block that has each of the cssClasses followed by !important; @@ -408,9 +422,9 @@ const render = async function ( let parseEncounteredException; try { - diag = await getDiagramFromText(text, { title: processed.title }); + diag = await Diagram.fromText(text, { title: processed.title }); } catch (error) { - diag = new Diagram('error'); + diag = await Diagram.fromText('error'); parseEncounteredException = error; } @@ -482,6 +496,7 @@ const render = async function ( } return { + diagramType, svg: svgCode, bindFunctions: diag.db.bindFunctions, }; @@ -520,7 +535,7 @@ function initialize(options: MermaidConfig = {}) { const getDiagramFromText = (text: string, metadata: Pick<DiagramMetadata, 'title'> = {}) => { const { code } = preprocessDiagram(text); - return getDiagramFromTextInternal(code, metadata); + return Diagram.fromText(code, metadata); }; /** diff --git a/packages/mermaid/src/schemas/config.schema.yaml b/packages/mermaid/src/schemas/config.schema.yaml index 3e7fd58ec5..d6d084f8c7 100644 --- a/packages/mermaid/src/schemas/config.schema.yaml +++ b/packages/mermaid/src/schemas/config.schema.yaml @@ -7,7 +7,7 @@ # - `scripts/create-types-from-json-schema.mjs` # Used to generate the `src/config.type.ts` TypeScript types for MermaidConfig # with the `json-schema-to-typescript` NPM package. -# - `.vite/jsonSchemaPlugin.ts` +# - `.build/jsonSchema.ts` # Used to generate the default values from the `default` keys in this # JSON Schema using the `ajv` NPM package. # Non-JSON values, like functions or `undefined`, still need to be manually @@ -21,8 +21,9 @@ # - Use `meta:enum` to document enum values (from jsonschema2md) # - Use `tsType` to override the TypeScript type (from json-schema-to-typescript) # - If adding a new object to `MermaidConfig` (e.g. a new diagram type), -# you may need to add it to `.vite/jsonSchemaPlugin.ts` and `src/docs.mts` -# to get the docs/default values to generate properly. +# you may need to add it to `.build/jsonSchema.ts`, `src/docs.mts` +# and `scripts/create-types-from-json-schema.mjs` +# to get the default values/docs/types to generate properly. $id: https://mermaid-js.github.io/schemas/config.schema.json $schema: https://json-schema.org/draft/2019-09/schema title: Mermaid Config @@ -49,6 +50,7 @@ required: - gitGraph - c4 - sankey + - packet - block properties: theme: @@ -65,8 +67,6 @@ properties: meta:enum: 'null': Can be set to disable any pre-defined mermaid theme default: 'default' - # Allow any string for typescript backwards compatibility (fix in Mermaid v10) - tsType: 'string | "default" | "forest" | "dark" | "neutral" | "null"' themeVariables: tsType: any themeCSS: @@ -123,8 +123,6 @@ properties: error: Equivalent to 4 fatal: Equivalent to 5 (default) default: 5 - # Allow any number or string for typescript backwards compatibility (fix in Mermaid v10) - tsType: 'number | string | 0 | 2 | 1 | "trace" | "debug" | "info" | "warn" | "error" | "fatal" | 3 | 4 | 5 | undefined' securityLevel: description: Level of trust for parsed diagram type: string @@ -142,8 +140,6 @@ properties: This prevent any JavaScript from running in the context. This may hinder interactive functionality of the diagram, like scripts, popups in the sequence diagram, or links to other tabs or targets, etc. default: strict - # Allow any string for typescript backwards compatibility (fix in Mermaid v10) - tsType: 'string | "strict" | "loose" | "antiscript" | "sandbox" | undefined' startOnLoad: description: Dictates whether mermaid starts on Page load type: boolean @@ -225,6 +221,8 @@ properties: $ref: '#/$defs/C4DiagramConfig' sankey: $ref: '#/$defs/SankeyDiagramConfig' + packet: + $ref: '#/$defs/PacketDiagramConfig' block: $ref: '#/$defs/BlockDiagramConfig' dompurifyConfig: @@ -1170,8 +1168,6 @@ $defs: # JSON Schema definition (maybe we should move these to a separate file) LR: Left-Right RL: Right to Left default: TB - # Allow any string for typescript backwards compatibility (fix in Mermaid v10) - tsType: 'string | "TB" | "BT" | "LR" | "RL"' minEntityWidth: description: The minimum width of an entity box. Expressed in pixels. type: integer @@ -1284,8 +1280,6 @@ $defs: # JSON Schema definition (maybe we should move these to a separate file) dagre-d3: The [dagre-d3-es](https://www.npmjs.com/package/dagre-d3-es) library. dagre-wrapper: wrapper for dagre implemented in mermaid elk: Layout using [elkjs](https://github.com/kieler/elkjs) - # Allow any string for typescript backwards compatibility (fix in Mermaid v10) - tsType: 'string | "dagre-d3" | "dagre-wrapper" | "elk"' ClassDiagramConfig: title: Class Diagram Config @@ -1401,8 +1395,6 @@ $defs: # JSON Schema definition (maybe we should move these to a separate file) - center - right default: center - # Allow any string for typescript backwards compatibility (fix in Mermaid v10) - tsType: 'string | "left" | "center" | "right"' bottomMarginAdj: description: | Prolongs the edge of the diagram downwards. @@ -1527,8 +1519,6 @@ $defs: # JSON Schema definition (maybe we should move these to a separate file) - center - right default: center - # Allow any string for typescript backwards compatibility (fix in Mermaid v10) - tsType: 'string | "left" | "center" | "right"' bottomMarginAdj: description: | Prolongs the edge of the diagram downwards. @@ -1692,13 +1682,10 @@ $defs: # JSON Schema definition (maybe we should move these to a separate file) meta:enum: compact: Enables displaying multiple tasks on the same row. default: '' - # Allow any string for typescript backwards compatibility (fix in Mermaid v10) - tsType: 'string | "compact"' weekday: description: | On which day a week-based interval should start type: string - tsType: '"monday" | "tuesday" | "wednesday" | "thursday" | "friday" | "saturday" | "sunday"' enum: - monday - tuesday @@ -1840,8 +1827,6 @@ $defs: # JSON Schema definition (maybe we should move these to a separate file) type: string enum: ['left', 'center', 'right'] default: 'center' - # Allow any string for typescript backwards compatibility (fix in Mermaid v10) - tsType: 'string | "left" | "center" | "right"' messageFontSize: description: This sets the font size of actor messages @@ -1944,8 +1929,6 @@ $defs: # JSON Schema definition (maybe we should move these to a separate file) type: string enum: ['basis', 'linear', 'cardinal'] default: 'basis' - # Allow any string for typescript backwards compatibility (fix in Mermaid v10) - tsType: 'string | "basis" | "linear" | "cardinal"' padding: description: | Represents the padding between the labels and the shape @@ -2022,10 +2005,12 @@ $defs: # JSON Schema definition (maybe we should move these to a separate file) $ref: '#/$defs/SankeyNodeAlignment' default: justify useMaxWidth: + type: boolean default: false showValues: description: | Toggle to display or hide values along with title. + type: boolean default: true prefix: description: | @@ -2038,6 +2023,43 @@ $defs: # JSON Schema definition (maybe we should move these to a separate file) type: string default: '' + PacketDiagramConfig: + title: Packet Diagram Config + allOf: [{ $ref: '#/$defs/BaseDiagramConfig' }] + description: The object containing configurations specific for packet diagrams. + type: object + unevaluatedProperties: false + properties: + rowHeight: + description: The height of each row in the packet diagram. + type: number + minimum: 1 + default: 32 + bitWidth: + description: The width of each bit in the packet diagram. + type: number + minimum: 1 + default: 32 + bitsPerRow: + description: The number of bits to display per row. + type: number + minimum: 1 + default: 32 + showBits: + description: Toggle to display or hide bit numbers. + type: boolean + default: true + paddingX: + description: The horizontal padding between the blocks in a row. + type: number + minimum: 0 + default: 5 + paddingY: + description: The vertical padding between the rows. + type: number + minimum: 0 + default: 5 + BlockDiagramConfig: title: Block Diagram Config allOf: [{ $ref: '#/$defs/BaseDiagramConfig' }] @@ -2046,6 +2068,8 @@ $defs: # JSON Schema definition (maybe we should move these to a separate file) unevaluatedProperties: false properties: padding: + type: number + minimum: 0 default: 8 FontCalculator: diff --git a/packages/mermaid/src/styles.spec.ts b/packages/mermaid/src/styles.spec.ts index 7265c3b6c2..698b2beafd 100644 --- a/packages/mermaid/src/styles.spec.ts +++ b/packages/mermaid/src/styles.spec.ts @@ -17,7 +17,6 @@ import theme from './themes/index.js'; import c4 from './diagrams/c4/styles.js'; import classDiagram from './diagrams/class/styles.js'; import flowchart from './diagrams/flowchart/styles.js'; -import flowchartElk from './diagrams/flowchart/elk/styles.js'; import er from './diagrams/er/styles.js'; import git from './diagrams/git/styles.js'; import gantt from './diagrams/gantt/styles.js'; @@ -28,6 +27,7 @@ import state from './diagrams/state/styles.js'; import journey from './diagrams/user-journey/styles.js'; import timeline from './diagrams/timeline/styles.js'; import mindmap from './diagrams/mindmap/styles.js'; +import packet from './diagrams/packet/styles.js'; import block from './diagrams/block/styles.js'; import themes from './themes/index.js'; @@ -87,7 +87,6 @@ describe('styles', () => { classDiagram, er, flowchart, - flowchartElk, gantt, git, journey, @@ -98,6 +97,7 @@ describe('styles', () => { state, block, timeline, + packet, })) { test(`should return a valid style for diagram ${diagramId} and theme ${themeId}`, async () => { const { default: getStyles, addStylesForDiagram } = await import('./styles.js'); diff --git a/packages/mermaid/src/themes/theme-dark.js b/packages/mermaid/src/themes/theme-dark.js index c566251090..dc7a600098 100644 --- a/packages/mermaid/src/themes/theme-dark.js +++ b/packages/mermaid/src/themes/theme-dark.js @@ -1,4 +1,4 @@ -import { invert, lighten, darken, rgba, adjust, isDark } from 'khroma'; +import { adjust, darken, invert, isDark, lighten, rgba } from 'khroma'; import { mkBorder } from './theme-helpers.js'; class Theme { @@ -268,6 +268,15 @@ class Theme { '#3498db,#2ecc71,#e74c3c,#f1c40f,#bdc3c7,#ffffff,#34495e,#9b59b6,#1abc9c,#e67e22', }; + this.packet = { + startByteColor: this.primaryTextColor, + endByteColor: this.primaryTextColor, + labelColor: this.primaryTextColor, + titleColor: this.primaryTextColor, + blockStrokeColor: this.primaryTextColor, + blockFillColor: this.background, + }; + /* class */ this.classText = this.primaryTextColor; diff --git a/packages/mermaid/src/themes/theme-forest.js b/packages/mermaid/src/themes/theme-forest.js index 0270f51ff9..eda905c661 100644 --- a/packages/mermaid/src/themes/theme-forest.js +++ b/packages/mermaid/src/themes/theme-forest.js @@ -1,9 +1,9 @@ -import { darken, lighten, adjust, invert, isDark } from 'khroma'; -import { mkBorder } from './theme-helpers.js'; +import { adjust, darken, invert, isDark, lighten } from 'khroma'; import { oldAttributeBackgroundColorEven, oldAttributeBackgroundColorOdd, } from './erDiagram-oldHardcodedValues.js'; +import { mkBorder } from './theme-helpers.js'; class Theme { constructor() { @@ -240,6 +240,15 @@ class Theme { this.quadrantExternalBorderStrokeFill || this.primaryBorderColor; this.quadrantTitleFill = this.quadrantTitleFill || this.primaryTextColor; + this.packet = { + startByteColor: this.primaryTextColor, + endByteColor: this.primaryTextColor, + labelColor: this.primaryTextColor, + titleColor: this.primaryTextColor, + blockStrokeColor: this.primaryTextColor, + blockFillColor: this.mainBkg, + }; + /* xychart */ this.xyChart = { backgroundColor: this.xyChart?.backgroundColor || this.background, diff --git a/packages/mermaid/src/types.ts b/packages/mermaid/src/types.ts index 13da885033..487e089dce 100644 --- a/packages/mermaid/src/types.ts +++ b/packages/mermaid/src/types.ts @@ -32,3 +32,5 @@ export interface EdgeData { labelStyle: string; curve: any; } + +export type ArrayElement<A> = A extends readonly (infer T)[] ? T : never; diff --git a/packages/mermaid/src/utils.spec.ts b/packages/mermaid/src/utils.spec.ts index 8ccf5b2107..df9e6cf9ac 100644 --- a/packages/mermaid/src/utils.spec.ts +++ b/packages/mermaid/src/utils.spec.ts @@ -286,56 +286,46 @@ describe('when formatting urls', function () { it('should handle links', function () { const url = 'https://mermaid-js.github.io/mermaid/#/'; - const config = { securityLevel: 'loose' }; - let result = utils.formatUrl(url, config); + let result = utils.formatUrl(url, { securityLevel: 'loose' }); expect(result).toEqual(url); - config.securityLevel = 'strict'; - result = utils.formatUrl(url, config); + result = utils.formatUrl(url, { securityLevel: 'strict' }); expect(result).toEqual(url); }); it('should handle anchors', function () { const url = '#interaction'; - const config = { securityLevel: 'loose' }; - let result = utils.formatUrl(url, config); + let result = utils.formatUrl(url, { securityLevel: 'loose' }); expect(result).toEqual(url); - config.securityLevel = 'strict'; - result = utils.formatUrl(url, config); + result = utils.formatUrl(url, { securityLevel: 'strict' }); expect(result).toEqual(url); }); it('should handle mailto', function () { const url = 'mailto:user@user.user'; - const config = { securityLevel: 'loose' }; - let result = utils.formatUrl(url, config); + let result = utils.formatUrl(url, { securityLevel: 'loose' }); expect(result).toEqual(url); - config.securityLevel = 'strict'; - result = utils.formatUrl(url, config); + result = utils.formatUrl(url, { securityLevel: 'strict' }); expect(result).toEqual(url); }); it('should handle other protocols', function () { const url = 'notes://do-your-thing/id'; - const config = { securityLevel: 'loose' }; - let result = utils.formatUrl(url, config); + let result = utils.formatUrl(url, { securityLevel: 'loose' }); expect(result).toEqual(url); - config.securityLevel = 'strict'; - result = utils.formatUrl(url, config); + result = utils.formatUrl(url, { securityLevel: 'strict' }); expect(result).toEqual(url); }); it('should handle scripts', function () { const url = 'javascript:alert("test")'; - const config = { securityLevel: 'loose' }; - let result = utils.formatUrl(url, config); + let result = utils.formatUrl(url, { securityLevel: 'loose' }); expect(result).toEqual(url); - config.securityLevel = 'strict'; - result = utils.formatUrl(url, config); + result = utils.formatUrl(url, { securityLevel: 'strict' }); expect(result).toEqual('about:blank'); }); }); diff --git a/packages/parser/LICENSE b/packages/parser/LICENSE new file mode 100644 index 0000000000..2a2cb94ade --- /dev/null +++ b/packages/parser/LICENSE @@ -0,0 +1,21 @@ +The MIT License (MIT) + +Copyright (c) 2023 Yokozuna59 + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/packages/parser/README.md b/packages/parser/README.md new file mode 100644 index 0000000000..0a1ef04ede --- /dev/null +++ b/packages/parser/README.md @@ -0,0 +1,63 @@ +<p align="center"> +<img src="https://raw.githubusercontent.com/mermaid-js/mermaid/develop/docs/public/favicon.svg" height="150"> + +</p> +<h1 align="center"> +Mermaid Parser +</h1> + +<p align="center"> +Mermaid parser package +<p> + +[![NPM](https://img.shields.io/npm/v/@mermaid-js/parser)](https://www.npmjs.com/package/@mermaid-js/parser) + +## How the package works + +The package exports a `parse` function that has two parameters: + +```ts +declare function parse<T extends DiagramAST>( + diagramType: keyof typeof initializers, + text: string +): T; +``` + +## How does a Langium-based parser work? + +```mermaid +sequenceDiagram +actor Package +participant Module +participant TokenBuilder +participant Lexer +participant Parser +participant ValueConverter + + +Package ->> Module: Create services +Module ->> TokenBuilder: Override or/and<br>reorder rules +TokenBuilder ->> Lexer: Read the string and transform<br>it into a token stream +Lexer ->> Parser: Parse token<br>stream into AST +Parser ->> ValueConverter: Clean/modify tokenized<br>rules returned value +ValueConverter -->> Package: Return AST +``` + +- When to override `TokenBuilder`? + + - To override keyword rules. + - To override terminal rules that need a custom function. + - To manually reorder the list of rules. + +- When to override `Lexer`? + + - To modify input before tokenizing. + - To insert/modify tokens that cannot or have not been parsed. + +- When to override `LangiumParser`? + + - To insert or modify attributes that can't be parsed. + +- When to override `ValueConverter`? + + - To modify the returned value from the parser. diff --git a/packages/parser/langium-config.json b/packages/parser/langium-config.json new file mode 100644 index 0000000000..c750f049d5 --- /dev/null +++ b/packages/parser/langium-config.json @@ -0,0 +1,23 @@ +{ + "projectName": "Mermaid", + "languages": [ + { + "id": "info", + "grammar": "src/language/info/info.langium", + "fileExtensions": [".mmd", ".mermaid"] + }, + { + "id": "packet", + "grammar": "src/language/packet/packet.langium", + "fileExtensions": [".mmd", ".mermaid"] + }, + { + "id": "pie", + "grammar": "src/language/pie/pie.langium", + "fileExtensions": [".mmd", ".mermaid"] + } + ], + "mode": "production", + "importExtension": ".js", + "out": "src/language/generated" +} diff --git a/packages/parser/package.json b/packages/parser/package.json new file mode 100644 index 0000000000..b937e37b9f --- /dev/null +++ b/packages/parser/package.json @@ -0,0 +1,48 @@ +{ + "name": "@mermaid-js/parser", + "version": "0.1.0-rc.1", + "description": "MermaidJS parser", + "author": "Yokozuna59", + "contributors": [ + "Yokozuna59", + "Sidharth Vinod (https://sidharth.dev)" + ], + "homepage": "https://github.com/mermaid-js/mermaid/tree/develop/packages/mermaid/parser/#readme", + "types": "dist/src/index.d.ts", + "type": "module", + "exports": { + ".": { + "import": "./dist/mermaid-parser.core.mjs", + "types": "./dist/src/index.d.ts" + } + }, + "scripts": { + "clean": "rimraf dist src/language/generated", + "langium:generate": "langium generate", + "langium:watch": "langium generate --watch", + "prepublishOnly": "pnpm -w run build" + }, + "repository": { + "type": "git", + "url": "https://github.com/mermaid-js/mermaid.git", + "directory": "packages/parser" + }, + "license": "MIT", + "keywords": [ + "mermaid", + "parser", + "ast" + ], + "dependencies": { + "langium": "3.0.0" + }, + "devDependencies": { + "chevrotain": "^11.0.3" + }, + "files": [ + "dist/" + ], + "publishConfig": { + "access": "public" + } +} diff --git a/packages/parser/src/index.ts b/packages/parser/src/index.ts new file mode 100644 index 0000000000..75f0cb3d83 --- /dev/null +++ b/packages/parser/src/index.ts @@ -0,0 +1,11 @@ +import type { AstNode } from 'langium'; + +export * from './language/index.js'; +export * from './parse.js'; + +/** + * Exclude/omit all `AstNode` attributes recursively. + */ +export type RecursiveAstOmit<T> = T extends object + ? { [P in keyof T as Exclude<P, keyof AstNode>]: RecursiveAstOmit<T[P]> } + : T; diff --git a/packages/parser/src/language/common/common.langium b/packages/parser/src/language/common/common.langium new file mode 100644 index 0000000000..7989de1931 --- /dev/null +++ b/packages/parser/src/language/common/common.langium @@ -0,0 +1,23 @@ +interface Common { + accDescr?: string; + accTitle?: string; + title?: string; +} + +fragment TitleAndAccessibilities: + ((accDescr=ACC_DESCR | accTitle=ACC_TITLE | title=TITLE) EOL)+ +; + +fragment EOL returns string: + NEWLINE+ | EOF +; + +terminal NEWLINE: /\r?\n/; +terminal ACC_DESCR: /[\t ]*accDescr(?:[\t ]*:([^\n\r]*?(?=%%)|[^\n\r]*)|\s*{([^}]*)})/; +terminal ACC_TITLE: /[\t ]*accTitle[\t ]*:(?:[^\n\r]*?(?=%%)|[^\n\r]*)/; +terminal TITLE: /[\t ]*title(?:[\t ][^\n\r]*?(?=%%)|[\t ][^\n\r]*|)/; + +hidden terminal WHITESPACE: /[\t ]+/; +hidden terminal YAML: /---[\t ]*\r?\n(?:[\S\s]*?\r?\n)?---(?:\r?\n|(?!\S))/; +hidden terminal DIRECTIVE: /[\t ]*%%{[\S\s]*?}%%(?:\r?\n|(?!\S))/; +hidden terminal SINGLE_LINE_COMMENT: /[\t ]*%%[^\n\r]*/; diff --git a/packages/parser/src/language/common/index.ts b/packages/parser/src/language/common/index.ts new file mode 100644 index 0000000000..92b69489ef --- /dev/null +++ b/packages/parser/src/language/common/index.ts @@ -0,0 +1,2 @@ +export * from './tokenBuilder.js'; +export * from './valueConverter.js'; diff --git a/packages/parser/src/language/common/matcher.ts b/packages/parser/src/language/common/matcher.ts new file mode 100644 index 0000000000..cc9d607e1f --- /dev/null +++ b/packages/parser/src/language/common/matcher.ts @@ -0,0 +1,14 @@ +/** + * Matches single and multi line accessible description + */ +export const accessibilityDescrRegex = /accDescr(?:[\t ]*:([^\n\r]*)|\s*{([^}]*)})/; + +/** + * Matches single line accessible title + */ +export const accessibilityTitleRegex = /accTitle[\t ]*:([^\n\r]*)/; + +/** + * Matches a single line title + */ +export const titleRegex = /title([\t ][^\n\r]*|)/; diff --git a/packages/parser/src/language/common/tokenBuilder.ts b/packages/parser/src/language/common/tokenBuilder.ts new file mode 100644 index 0000000000..f997634545 --- /dev/null +++ b/packages/parser/src/language/common/tokenBuilder.ts @@ -0,0 +1,30 @@ +import type { GrammarAST, Stream, TokenBuilderOptions } from 'langium'; +import type { TokenType } from 'chevrotain'; + +import { DefaultTokenBuilder } from 'langium'; + +export abstract class AbstractMermaidTokenBuilder extends DefaultTokenBuilder { + private keywords: Set<string>; + + public constructor(keywords: string[]) { + super(); + this.keywords = new Set<string>(keywords); + } + + protected override buildKeywordTokens( + rules: Stream<GrammarAST.AbstractRule>, + terminalTokens: TokenType[], + options?: TokenBuilderOptions + ): TokenType[] { + const tokenTypes: TokenType[] = super.buildKeywordTokens(rules, terminalTokens, options); + // to restrict users, they mustn't have any non-whitespace characters after the keyword. + tokenTypes.forEach((tokenType: TokenType): void => { + if (this.keywords.has(tokenType.name) && tokenType.PATTERN !== undefined) { + tokenType.PATTERN = new RegExp(tokenType.PATTERN.toString() + '(?:(?=%%)|(?!\\S))'); + } + }); + return tokenTypes; + } +} + +export class CommonTokenBuilder extends AbstractMermaidTokenBuilder {} diff --git a/packages/parser/src/language/common/valueConverter.ts b/packages/parser/src/language/common/valueConverter.ts new file mode 100644 index 0000000000..624cc67a5e --- /dev/null +++ b/packages/parser/src/language/common/valueConverter.ts @@ -0,0 +1,82 @@ +/* eslint-disable @typescript-eslint/no-unused-vars */ +import type { CstNode, GrammarAST, ValueType } from 'langium'; +import { DefaultValueConverter } from 'langium'; + +import { accessibilityDescrRegex, accessibilityTitleRegex, titleRegex } from './matcher.js'; + +const rulesRegexes: Record<string, RegExp> = { + ACC_DESCR: accessibilityDescrRegex, + ACC_TITLE: accessibilityTitleRegex, + TITLE: titleRegex, +}; + +export abstract class AbstractMermaidValueConverter extends DefaultValueConverter { + /** + * A method contains convert logic to be used by class. + * + * @param rule - Parsed rule. + * @param input - Matched string. + * @param cstNode - Node in the Concrete Syntax Tree (CST). + * @returns converted the value if it's available or `undefined` if it's not. + */ + protected abstract runCustomConverter( + rule: GrammarAST.AbstractRule, + input: string, + cstNode: CstNode + ): ValueType | undefined; + + protected override runConverter( + rule: GrammarAST.AbstractRule, + input: string, + cstNode: CstNode + ): ValueType { + let value: ValueType | undefined = this.runCommonConverter(rule, input, cstNode); + + if (value === undefined) { + value = this.runCustomConverter(rule, input, cstNode); + } + if (value === undefined) { + return super.runConverter(rule, input, cstNode); + } + + return value; + } + + private runCommonConverter( + rule: GrammarAST.AbstractRule, + input: string, + _cstNode: CstNode + ): ValueType | undefined { + const regex: RegExp | undefined = rulesRegexes[rule.name]; + if (regex === undefined) { + return undefined; + } + const match = regex.exec(input); + if (match === null) { + return undefined; + } + // single line title, accTitle, accDescr + if (match[1] !== undefined) { + return match[1].trim().replace(/[\t ]{2,}/gm, ' '); + } + // multi line accDescr + if (match[2] !== undefined) { + return match[2] + .replace(/^\s*/gm, '') + .replace(/\s+$/gm, '') + .replace(/[\t ]{2,}/gm, ' ') + .replace(/[\n\r]{2,}/gm, '\n'); + } + return undefined; + } +} + +export class CommonValueConverter extends AbstractMermaidValueConverter { + protected override runCustomConverter( + _rule: GrammarAST.AbstractRule, + _input: string, + _cstNode: CstNode + ): ValueType | undefined { + return undefined; + } +} diff --git a/packages/parser/src/language/index.ts b/packages/parser/src/language/index.ts new file mode 100644 index 0000000000..9f1d92ba8a --- /dev/null +++ b/packages/parser/src/language/index.ts @@ -0,0 +1,25 @@ +export { + Info, + MermaidAstType, + Packet, + PacketBlock, + Pie, + PieSection, + isCommon, + isInfo, + isPacket, + isPacketBlock, + isPie, + isPieSection, +} from './generated/ast.js'; +export { + InfoGeneratedModule, + MermaidGeneratedSharedModule, + PacketGeneratedModule, + PieGeneratedModule, +} from './generated/module.js'; + +export * from './common/index.js'; +export * from './info/index.js'; +export * from './packet/index.js'; +export * from './pie/index.js'; diff --git a/packages/parser/src/language/info/index.ts b/packages/parser/src/language/info/index.ts new file mode 100644 index 0000000000..fd3c604b08 --- /dev/null +++ b/packages/parser/src/language/info/index.ts @@ -0,0 +1 @@ +export * from './module.js'; diff --git a/packages/parser/src/language/info/info.langium b/packages/parser/src/language/info/info.langium new file mode 100644 index 0000000000..8669841d15 --- /dev/null +++ b/packages/parser/src/language/info/info.langium @@ -0,0 +1,9 @@ +grammar Info +import "../common/common"; + +entry Info: + NEWLINE* + "info" NEWLINE* + ("showInfo" NEWLINE*)? + TitleAndAccessibilities? +; diff --git a/packages/parser/src/language/info/module.ts b/packages/parser/src/language/info/module.ts new file mode 100644 index 0000000000..83933aeef4 --- /dev/null +++ b/packages/parser/src/language/info/module.ts @@ -0,0 +1,74 @@ +import type { + DefaultSharedCoreModuleContext, + LangiumCoreServices, + LangiumSharedCoreServices, + Module, + PartialLangiumCoreServices, +} from 'langium'; +import { + EmptyFileSystem, + createDefaultCoreModule, + createDefaultSharedCoreModule, + inject, +} from 'langium'; + +import { CommonValueConverter } from '../common/index.js'; +import { InfoGeneratedModule, MermaidGeneratedSharedModule } from '../generated/module.js'; +import { InfoTokenBuilder } from './tokenBuilder.js'; + +/** + * Declaration of `Info` services. + */ +type InfoAddedServices = { + parser: { + TokenBuilder: InfoTokenBuilder; + ValueConverter: CommonValueConverter; + }; +}; + +/** + * Union of Langium default services and `Info` services. + */ +export type InfoServices = LangiumCoreServices & InfoAddedServices; + +/** + * Dependency injection module that overrides Langium default services and + * contributes the declared `Info` services. + */ +export const InfoModule: Module<InfoServices, PartialLangiumCoreServices & InfoAddedServices> = { + parser: { + TokenBuilder: () => new InfoTokenBuilder(), + ValueConverter: () => new CommonValueConverter(), + }, +}; + +/** + * Create the full set of services required by Langium. + * + * First inject the shared services by merging two modules: + * - Langium default shared services + * - Services generated by langium-cli + * + * Then inject the language-specific services by merging three modules: + * - Langium default language-specific services + * - Services generated by langium-cli + * - Services specified in this file + * @param context - Optional module context with the LSP connection + * @returns An object wrapping the shared services and the language-specific services + */ +export function createInfoServices(context: DefaultSharedCoreModuleContext = EmptyFileSystem): { + shared: LangiumSharedCoreServices; + Info: InfoServices; +} { + const shared: LangiumSharedCoreServices = inject( + createDefaultSharedCoreModule(context), + MermaidGeneratedSharedModule + ); + const Info: InfoServices = inject( + createDefaultCoreModule({ shared }), + InfoGeneratedModule, + InfoModule + ); + shared.ServiceRegistry.register(Info); + return { shared, Info }; +} diff --git a/packages/parser/src/language/info/tokenBuilder.ts b/packages/parser/src/language/info/tokenBuilder.ts new file mode 100644 index 0000000000..69ad0e689d --- /dev/null +++ b/packages/parser/src/language/info/tokenBuilder.ts @@ -0,0 +1,7 @@ +import { AbstractMermaidTokenBuilder } from '../common/index.js'; + +export class InfoTokenBuilder extends AbstractMermaidTokenBuilder { + public constructor() { + super(['info', 'showInfo']); + } +} diff --git a/packages/parser/src/language/packet/index.ts b/packages/parser/src/language/packet/index.ts new file mode 100644 index 0000000000..fd3c604b08 --- /dev/null +++ b/packages/parser/src/language/packet/index.ts @@ -0,0 +1 @@ +export * from './module.js'; diff --git a/packages/parser/src/language/packet/module.ts b/packages/parser/src/language/packet/module.ts new file mode 100644 index 0000000000..40c68916aa --- /dev/null +++ b/packages/parser/src/language/packet/module.ts @@ -0,0 +1,77 @@ +import type { + DefaultSharedCoreModuleContext, + LangiumCoreServices, + LangiumSharedCoreServices, + Module, + PartialLangiumCoreServices, +} from 'langium'; +import { + EmptyFileSystem, + createDefaultCoreModule, + createDefaultSharedCoreModule, + inject, +} from 'langium'; + +import { CommonValueConverter } from '../common/valueConverter.js'; +import { MermaidGeneratedSharedModule, PacketGeneratedModule } from '../generated/module.js'; +import { PacketTokenBuilder } from './tokenBuilder.js'; + +/** + * Declaration of `Packet` services. + */ +type PacketAddedServices = { + parser: { + TokenBuilder: PacketTokenBuilder; + ValueConverter: CommonValueConverter; + }; +}; + +/** + * Union of Langium default services and `Packet` services. + */ +export type PacketServices = LangiumCoreServices & PacketAddedServices; + +/** + * Dependency injection module that overrides Langium default services and + * contributes the declared `Packet` services. + */ +export const PacketModule: Module< + PacketServices, + PartialLangiumCoreServices & PacketAddedServices +> = { + parser: { + TokenBuilder: () => new PacketTokenBuilder(), + ValueConverter: () => new CommonValueConverter(), + }, +}; + +/** + * Create the full set of services required by Langium. + * + * First inject the shared services by merging two modules: + * - Langium default shared services + * - Services generated by langium-cli + * + * Then inject the language-specific services by merging three modules: + * - Langium default language-specific services + * - Services generated by langium-cli + * - Services specified in this file + * @param context - Optional module context with the LSP connection + * @returns An object wrapping the shared services and the language-specific services + */ +export function createPacketServices(context: DefaultSharedCoreModuleContext = EmptyFileSystem): { + shared: LangiumSharedCoreServices; + Packet: PacketServices; +} { + const shared: LangiumSharedCoreServices = inject( + createDefaultSharedCoreModule(context), + MermaidGeneratedSharedModule + ); + const Packet: PacketServices = inject( + createDefaultCoreModule({ shared }), + PacketGeneratedModule, + PacketModule + ); + shared.ServiceRegistry.register(Packet); + return { shared, Packet }; +} diff --git a/packages/parser/src/language/packet/packet.langium b/packages/parser/src/language/packet/packet.langium new file mode 100644 index 0000000000..ad30f8df20 --- /dev/null +++ b/packages/parser/src/language/packet/packet.langium @@ -0,0 +1,19 @@ +grammar Packet +import "../common/common"; + +entry Packet: + NEWLINE* + "packet-beta" + ( + NEWLINE* TitleAndAccessibilities blocks+=PacketBlock* + | NEWLINE+ blocks+=PacketBlock+ + | NEWLINE* + ) +; + +PacketBlock: + start=INT('-' end=INT)? ':' label=STRING EOL +; + +terminal INT returns number: /0|[1-9][0-9]*/; +terminal STRING: /"[^"]*"|'[^']*'/; diff --git a/packages/parser/src/language/packet/tokenBuilder.ts b/packages/parser/src/language/packet/tokenBuilder.ts new file mode 100644 index 0000000000..accba5675a --- /dev/null +++ b/packages/parser/src/language/packet/tokenBuilder.ts @@ -0,0 +1,7 @@ +import { AbstractMermaidTokenBuilder } from '../common/index.js'; + +export class PacketTokenBuilder extends AbstractMermaidTokenBuilder { + public constructor() { + super(['packet-beta']); + } +} diff --git a/packages/parser/src/language/pie/index.ts b/packages/parser/src/language/pie/index.ts new file mode 100644 index 0000000000..fd3c604b08 --- /dev/null +++ b/packages/parser/src/language/pie/index.ts @@ -0,0 +1 @@ +export * from './module.js'; diff --git a/packages/parser/src/language/pie/module.ts b/packages/parser/src/language/pie/module.ts new file mode 100644 index 0000000000..b85daee680 --- /dev/null +++ b/packages/parser/src/language/pie/module.ts @@ -0,0 +1,74 @@ +import type { + DefaultSharedCoreModuleContext, + LangiumCoreServices, + LangiumSharedCoreServices, + Module, + PartialLangiumCoreServices, +} from 'langium'; +import { + EmptyFileSystem, + createDefaultCoreModule, + createDefaultSharedCoreModule, + inject, +} from 'langium'; + +import { MermaidGeneratedSharedModule, PieGeneratedModule } from '../generated/module.js'; +import { PieTokenBuilder } from './tokenBuilder.js'; +import { PieValueConverter } from './valueConverter.js'; + +/** + * Declaration of `Pie` services. + */ +type PieAddedServices = { + parser: { + TokenBuilder: PieTokenBuilder; + ValueConverter: PieValueConverter; + }; +}; + +/** + * Union of Langium default services and `Pie` services. + */ +export type PieServices = LangiumCoreServices & PieAddedServices; + +/** + * Dependency injection module that overrides Langium default services and + * contributes the declared `Pie` services. + */ +export const PieModule: Module<PieServices, PartialLangiumCoreServices & PieAddedServices> = { + parser: { + TokenBuilder: () => new PieTokenBuilder(), + ValueConverter: () => new PieValueConverter(), + }, +}; + +/** + * Create the full set of services required by Langium. + * + * First inject the shared services by merging two modules: + * - Langium default shared services + * - Services generated by langium-cli + * + * Then inject the language-specific services by merging three modules: + * - Langium default language-specific services + * - Services generated by langium-cli + * - Services specified in this file + * @param context - Optional module context with the LSP connection + * @returns An object wrapping the shared services and the language-specific services + */ +export function createPieServices(context: DefaultSharedCoreModuleContext = EmptyFileSystem): { + shared: LangiumSharedCoreServices; + Pie: PieServices; +} { + const shared: LangiumSharedCoreServices = inject( + createDefaultSharedCoreModule(context), + MermaidGeneratedSharedModule + ); + const Pie: PieServices = inject( + createDefaultCoreModule({ shared }), + PieGeneratedModule, + PieModule + ); + shared.ServiceRegistry.register(Pie); + return { shared, Pie }; +} diff --git a/packages/parser/src/language/pie/pie.langium b/packages/parser/src/language/pie/pie.langium new file mode 100644 index 0000000000..2bbf967e1d --- /dev/null +++ b/packages/parser/src/language/pie/pie.langium @@ -0,0 +1,19 @@ +grammar Pie +import "../common/common"; + +entry Pie: + NEWLINE* + "pie" showData?="showData"? + ( + NEWLINE* TitleAndAccessibilities sections+=PieSection* + | NEWLINE+ sections+=PieSection+ + | NEWLINE* + ) +; + +PieSection: + label=PIE_SECTION_LABEL ":" value=PIE_SECTION_VALUE EOL +; + +terminal PIE_SECTION_LABEL: /"[^"]+"/; +terminal PIE_SECTION_VALUE returns number: /(0|[1-9][0-9]*)(\.[0-9]+)?/; diff --git a/packages/parser/src/language/pie/tokenBuilder.ts b/packages/parser/src/language/pie/tokenBuilder.ts new file mode 100644 index 0000000000..85aecf96a0 --- /dev/null +++ b/packages/parser/src/language/pie/tokenBuilder.ts @@ -0,0 +1,7 @@ +import { AbstractMermaidTokenBuilder } from '../common/index.js'; + +export class PieTokenBuilder extends AbstractMermaidTokenBuilder { + public constructor() { + super(['pie', 'showData']); + } +} diff --git a/packages/parser/src/language/pie/valueConverter.ts b/packages/parser/src/language/pie/valueConverter.ts new file mode 100644 index 0000000000..b0ae18c0ba --- /dev/null +++ b/packages/parser/src/language/pie/valueConverter.ts @@ -0,0 +1,17 @@ +import type { CstNode, GrammarAST, ValueType } from 'langium'; + +import { AbstractMermaidValueConverter } from '../common/index.js'; + +export class PieValueConverter extends AbstractMermaidValueConverter { + protected runCustomConverter( + rule: GrammarAST.AbstractRule, + input: string, + // eslint-disable-next-line @typescript-eslint/no-unused-vars + _cstNode: CstNode + ): ValueType | undefined { + if (rule.name !== 'PIE_SECTION_LABEL') { + return undefined; + } + return input.replace(/"/g, '').trim(); + } +} diff --git a/packages/parser/src/parse.ts b/packages/parser/src/parse.ts new file mode 100644 index 0000000000..577a1cea6f --- /dev/null +++ b/packages/parser/src/parse.ts @@ -0,0 +1,54 @@ +import type { LangiumParser, ParseResult } from 'langium'; + +import type { Info, Packet, Pie } from './index.js'; + +export type DiagramAST = Info | Packet | Pie; + +const parsers: Record<string, LangiumParser> = {}; +const initializers = { + info: async () => { + const { createInfoServices } = await import('./language/info/index.js'); + const parser = createInfoServices().Info.parser.LangiumParser; + parsers['info'] = parser; + }, + packet: async () => { + const { createPacketServices } = await import('./language/packet/index.js'); + const parser = createPacketServices().Packet.parser.LangiumParser; + parsers['packet'] = parser; + }, + pie: async () => { + const { createPieServices } = await import('./language/pie/index.js'); + const parser = createPieServices().Pie.parser.LangiumParser; + parsers['pie'] = parser; + }, +} as const; + +export async function parse(diagramType: 'info', text: string): Promise<Info>; +export async function parse(diagramType: 'packet', text: string): Promise<Packet>; +export async function parse(diagramType: 'pie', text: string): Promise<Pie>; +export async function parse<T extends DiagramAST>( + diagramType: keyof typeof initializers, + text: string +): Promise<T> { + const initializer = initializers[diagramType]; + if (!initializer) { + throw new Error(`Unknown diagram type: ${diagramType}`); + } + if (!parsers[diagramType]) { + await initializer(); + } + const parser: LangiumParser = parsers[diagramType]; + const result: ParseResult<T> = parser.parse<T>(text); + if (result.lexerErrors.length > 0 || result.parserErrors.length > 0) { + throw new MermaidParseError(result); + } + return result.value; +} + +export class MermaidParseError extends Error { + constructor(public result: ParseResult<DiagramAST>) { + const lexerErrors: string = result.lexerErrors.map((err) => err.message).join('\n'); + const parserErrors: string = result.parserErrors.map((err) => err.message).join('\n'); + super(`Parsing failed: ${lexerErrors} ${parserErrors}`); + } +} diff --git a/packages/parser/tests/info.test.ts b/packages/parser/tests/info.test.ts new file mode 100644 index 0000000000..09fc79c9af --- /dev/null +++ b/packages/parser/tests/info.test.ts @@ -0,0 +1,48 @@ +import { describe, expect, it } from 'vitest'; + +import { Info } from '../src/language/index.js'; +import { expectNoErrorsOrAlternatives, infoParse as parse } from './test-util.js'; + +describe('info', () => { + it.each([ + `info`, + ` + info`, + `info + `, + ` + info + `, + ])('should handle empty info', (context: string) => { + const result = parse(context); + expectNoErrorsOrAlternatives(result); + expect(result.value.$type).toBe(Info); + }); + + it.each([ + `info showInfo`, + `info showInfo + `, + ` + info showInfo`, + `info + showInfo`, + `info + showInfo + `, + ` + info + showInfo + `, + ` + info + showInfo`, + ` + info showInfo + `, + ])('should handle showInfo', (context: string) => { + const result = parse(context); + expectNoErrorsOrAlternatives(result); + expect(result.value.$type).toBe(Info); + }); +}); diff --git a/packages/parser/tests/pie.test.ts b/packages/parser/tests/pie.test.ts new file mode 100644 index 0000000000..43e9a374f1 --- /dev/null +++ b/packages/parser/tests/pie.test.ts @@ -0,0 +1,229 @@ +import { describe, expect, it } from 'vitest'; + +import { Pie } from '../src/language/index.js'; +import { expectNoErrorsOrAlternatives, pieParse as parse } from './test-util.js'; + +describe('pie', () => { + it.each([ + `pie`, + ` pie `, + `\tpie\t`, + ` + \tpie + `, + ])('should handle regular pie', (context: string) => { + const result = parse(context); + expectNoErrorsOrAlternatives(result); + expect(result.value.$type).toBe(Pie); + }); + + it.each([ + `pie showData`, + ` pie showData `, + `\tpie\tshowData\t`, + ` + pie\tshowData + `, + ])('should handle regular showData', (context: string) => { + const result = parse(context); + expectNoErrorsOrAlternatives(result); + expect(result.value.$type).toBe(Pie); + + const { showData } = result.value; + expect(showData).toBeTruthy(); + }); + + it.each([ + `pie title sample title`, + ` pie title sample title `, + `\tpie\ttitle sample title\t`, + `pie + \ttitle sample title + `, + ])('should handle regular pie + title in same line', (context: string) => { + const result = parse(context); + expectNoErrorsOrAlternatives(result); + expect(result.value.$type).toBe(Pie); + + const { title } = result.value; + expect(title).toBe('sample title'); + }); + + it.each([ + `pie + title sample title`, + `pie + title sample title + `, + `pie + title sample title`, + `pie + title sample title + `, + ])('should handle regular pie + title in different line', (context: string) => { + const result = parse(context); + expectNoErrorsOrAlternatives(result); + expect(result.value.$type).toBe(Pie); + + const { title } = result.value; + expect(title).toBe('sample title'); + }); + + it.each([ + `pie showData title sample title`, + `pie showData title sample title + `, + ])('should handle regular pie + showData + title', (context: string) => { + const result = parse(context); + expectNoErrorsOrAlternatives(result); + expect(result.value.$type).toBe(Pie); + + const { showData, title } = result.value; + expect(showData).toBeTruthy(); + expect(title).toBe('sample title'); + }); + + it.each([ + `pie showData + title sample title`, + `pie showData + title sample title + `, + `pie showData + title sample title`, + `pie showData + title sample title + `, + ])('should handle regular showData + title in different line', (context: string) => { + const result = parse(context); + expectNoErrorsOrAlternatives(result); + expect(result.value.$type).toBe(Pie); + + const { showData, title } = result.value; + expect(showData).toBeTruthy(); + expect(title).toBe('sample title'); + }); + + describe('sections', () => { + describe('normal', () => { + it.each([ + `pie + "GitHub":100 + "GitLab":50`, + `pie + "GitHub" : 100 + "GitLab" : 50`, + `pie + "GitHub"\t:\t100 + "GitLab"\t:\t50`, + `pie + \t"GitHub" \t : \t 100 + \t"GitLab" \t : \t 50 + `, + ])('should handle regular sections', (context: string) => { + const result = parse(context); + expectNoErrorsOrAlternatives(result); + expect(result.value.$type).toBe(Pie); + + const { sections } = result.value; + expect(sections[0].label).toBe('GitHub'); + expect(sections[0].value).toBe(100); + + expect(sections[1].label).toBe('GitLab'); + expect(sections[1].value).toBe(50); + }); + + it('should handle sections with showData', () => { + const context = `pie showData + "GitHub": 100 + "GitLab": 50`; + const result = parse(context); + expectNoErrorsOrAlternatives(result); + expect(result.value.$type).toBe(Pie); + + const { showData, sections } = result.value; + expect(showData).toBeTruthy(); + + expect(sections[0].label).toBe('GitHub'); + expect(sections[0].value).toBe(100); + + expect(sections[1].label).toBe('GitLab'); + expect(sections[1].value).toBe(50); + }); + + it('should handle sections with title', () => { + const context = `pie title sample wow + "GitHub": 100 + "GitLab": 50`; + const result = parse(context); + expectNoErrorsOrAlternatives(result); + expect(result.value.$type).toBe(Pie); + + const { title, sections } = result.value; + expect(title).toBe('sample wow'); + + expect(sections[0].label).toBe('GitHub'); + expect(sections[0].value).toBe(100); + + expect(sections[1].label).toBe('GitLab'); + expect(sections[1].value).toBe(50); + }); + + it('should handle sections with accTitle', () => { + const context = `pie accTitle: sample wow + "GitHub": 100 + "GitLab": 50`; + const result = parse(context); + expectNoErrorsOrAlternatives(result); + expect(result.value.$type).toBe(Pie); + + const { accTitle, sections } = result.value; + expect(accTitle).toBe('sample wow'); + + expect(sections[0].label).toBe('GitHub'); + expect(sections[0].value).toBe(100); + + expect(sections[1].label).toBe('GitLab'); + expect(sections[1].value).toBe(50); + }); + + it('should handle sections with single line accDescr', () => { + const context = `pie accDescr: sample wow + "GitHub": 100 + "GitLab": 50`; + const result = parse(context); + expectNoErrorsOrAlternatives(result); + expect(result.value.$type).toBe(Pie); + + const { accDescr, sections } = result.value; + expect(accDescr).toBe('sample wow'); + + expect(sections[0].label).toBe('GitHub'); + expect(sections[0].value).toBe(100); + + expect(sections[1].label).toBe('GitLab'); + expect(sections[1].value).toBe(50); + }); + + it('should handle sections with multi line accDescr', () => { + const context = `pie accDescr { + sample wow + } + "GitHub": 100 + "GitLab": 50`; + const result = parse(context); + expectNoErrorsOrAlternatives(result); + expect(result.value.$type).toBe(Pie); + + const { accDescr, sections } = result.value; + expect(accDescr).toBe('sample wow'); + + expect(sections[0].label).toBe('GitHub'); + expect(sections[0].value).toBe(100); + + expect(sections[1].label).toBe('GitLab'); + expect(sections[1].value).toBe(50); + }); + }); + }); +}); diff --git a/packages/parser/tests/test-util.ts b/packages/parser/tests/test-util.ts new file mode 100644 index 0000000000..9bdec348a1 --- /dev/null +++ b/packages/parser/tests/test-util.ts @@ -0,0 +1,42 @@ +import type { LangiumParser, ParseResult } from 'langium'; +import { expect, vi } from 'vitest'; +import type { Info, InfoServices, Pie, PieServices } from '../src/language/index.js'; +import { createInfoServices, createPieServices } from '../src/language/index.js'; + +const consoleMock = vi.spyOn(console, 'log').mockImplementation(() => undefined); + +/** + * A helper test function that validate that the result doesn't have errors + * or any ambiguous alternatives from chevrotain. + * + * @param result - the result `parse` function. + */ +export function expectNoErrorsOrAlternatives(result: ParseResult) { + expect(result.lexerErrors).toHaveLength(0); + expect(result.parserErrors).toHaveLength(0); + + expect(consoleMock).not.toHaveBeenCalled(); + consoleMock.mockReset(); +} + +const infoServices: InfoServices = createInfoServices().Info; +const infoParser: LangiumParser = infoServices.parser.LangiumParser; +export function createInfoTestServices() { + const parse = (input: string) => { + return infoParser.parse<Info>(input); + }; + + return { services: infoServices, parse }; +} +export const infoParse = createInfoTestServices().parse; + +const pieServices: PieServices = createPieServices().Pie; +const pieParser: LangiumParser = pieServices.parser.LangiumParser; +export function createPieTestServices() { + const parse = (input: string) => { + return pieParser.parse<Pie>(input); + }; + + return { services: pieServices, parse }; +} +export const pieParse = createPieTestServices().parse; diff --git a/packages/parser/tsconfig.json b/packages/parser/tsconfig.json new file mode 100644 index 0000000000..7e830e229e --- /dev/null +++ b/packages/parser/tsconfig.json @@ -0,0 +1,12 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "rootDir": ".", + "outDir": "./dist", + "allowJs": false, + "preserveSymlinks": false, + "strictPropertyInitialization": false + }, + "include": ["./src/**/*.ts", "./tests/**/*.ts"], + "typeRoots": ["./src/types"] +} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index faac50fae9..bf104511b3 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -53,7 +53,7 @@ importers: specifier: ^3.0.11 version: 3.0.15 '@types/node': - specifier: ^20.11.10 + specifier: ^20.11.17 version: 20.11.24 '@types/prettier': specifier: ^2.7.2 @@ -79,6 +79,9 @@ importers: ajv: specifier: ^8.12.0 version: 8.12.0 + chokidar: + specifier: ^3.5.3 + version: 3.6.0 concurrently: specifier: ^8.0.1 version: 8.2.2 @@ -154,6 +157,9 @@ importers: jsdom: specifier: ^22.0.0 version: 22.1.0 + langium-cli: + specifier: 3.0.1 + version: 3.0.1 lint-staged: specifier: ^13.2.1 version: 13.3.0 @@ -202,12 +208,9 @@ importers: '@braintree/sanitize-url': specifier: ^6.0.1 version: 6.0.4 - '@types/d3-scale': - specifier: ^4.0.3 - version: 4.0.8 - '@types/d3-scale-chromatic': - specifier: ^3.0.0 - version: 3.0.3 + '@mermaid-js/parser': + specifier: workspace:^ + version: link:../parser cytoscape: specifier: ^3.28.1 version: 3.28.1(patch_hash=claipxynndhyqyu2csninuoh5e) @@ -244,9 +247,6 @@ importers: mdast-util-from-markdown: specifier: ^1.3.0 version: 1.3.1 - non-layered-tidy-tree-layout: - specifier: ^2.0.2 - version: 2.0.2 stylis: specifier: ^4.1.3 version: 4.3.1 @@ -256,9 +256,6 @@ importers: uuid: specifier: ^9.0.0 version: 9.0.1 - web-worker: - specifier: ^1.2.0 - version: 1.3.0 devDependencies: '@adobe/jsonschema2md': specifier: ^7.1.4 @@ -272,6 +269,12 @@ importers: '@types/d3-sankey': specifier: ^0.12.1 version: 0.12.4 + '@types/d3-scale': + specifier: ^4.0.3 + version: 4.0.8 + '@types/d3-scale-chromatic': + specifier: ^3.0.0 + version: 3.0.3 '@types/d3-selection': specifier: ^3.0.5 version: 3.0.10 @@ -409,6 +412,31 @@ importers: specifier: ^5.0.0 version: 5.0.5 + packages/mermaid-flowchart-elk: + dependencies: + d3: + specifier: ^7.4.0 + version: 7.8.5 + dagre-d3-es: + specifier: 7.0.10 + version: 7.0.10 + elkjs: + specifier: ^0.8.2 + version: 0.8.2 + khroma: + specifier: ^2.0.0 + version: 2.1.0 + devDependencies: + concurrently: + specifier: ^8.0.0 + version: 8.2.2 + mermaid: + specifier: workspace:^ + version: link:../mermaid + rimraf: + specifier: ^5.0.0 + version: 5.0.5 + packages/mermaid-zenuml: dependencies: '@zenuml/core': @@ -480,6 +508,71 @@ importers: specifier: ^7.0.0 version: 7.0.0 + packages/mermaid/src/vitepress: + dependencies: + '@vueuse/core': + specifier: ^10.1.0 + version: 10.9.0(vue@3.4.21) + jiti: + specifier: ^1.18.2 + version: 1.21.0 + mermaid: + specifier: workspace:^ + version: link:../.. + vue: + specifier: ^3.3 + version: 3.4.21(typescript@5.3.3) + devDependencies: + '@iconify-json/carbon': + specifier: ^1.1.16 + version: 1.1.31 + '@unocss/reset': + specifier: ^0.58.0 + version: 0.58.5 + '@vite-pwa/vitepress': + specifier: ^0.3.0 + version: 0.3.1(vite-plugin-pwa@0.17.5) + '@vitejs/plugin-vue': + specifier: ^4.2.1 + version: 4.6.2(vite@4.5.2)(vue@3.4.21) + fast-glob: + specifier: ^3.2.12 + version: 3.3.2 + https-localhost: + specifier: ^4.7.1 + version: 4.7.1 + pathe: + specifier: ^1.1.0 + version: 1.1.2 + unocss: + specifier: ^0.58.0 + version: 0.58.5(postcss@8.4.35)(rollup@2.79.1)(vite@4.5.2) + unplugin-vue-components: + specifier: ^0.26.0 + version: 0.26.0(rollup@2.79.1)(vue@3.4.21) + vite: + specifier: ^4.3.9 + version: 4.5.2(@types/node@20.11.24) + vite-plugin-pwa: + specifier: ^0.17.0 + version: 0.17.5(vite@4.5.2)(workbox-build@7.0.0)(workbox-window@7.0.0) + vitepress: + specifier: 1.0.0-rc.31 + version: 1.0.0-rc.31(@algolia/client-search@4.22.1)(@types/node@20.11.24)(postcss@8.4.35)(search-insights@2.13.0)(typescript@5.3.3) + workbox-window: + specifier: ^7.0.0 + version: 7.0.0 + + packages/parser: + dependencies: + langium: + specifier: 3.0.0 + version: 3.0.0 + devDependencies: + chevrotain: + specifier: ^11.0.3 + version: 11.0.3 + tests/webpack: dependencies: '@mermaid-js/mermaid-example-diagram': @@ -1460,8 +1553,8 @@ packages: resolution: {integrity: sha512-87ICKgU5t5SzOT7sBMfCOZQ2rHjRU+Pcb9BoILMYz600W6DkVRLFBPwQ18gwUVvggqXivaUakpnxWQGbpywbBQ==} engines: {node: '>=6.9.0'} dependencies: - '@babel/template': 7.23.9 - '@babel/traverse': 7.23.9 + '@babel/template': 7.24.0 + '@babel/traverse': 7.24.0 '@babel/types': 7.24.0 transitivePeerDependencies: - supports-color @@ -2658,6 +2751,28 @@ packages: resolution: {integrity: sha512-s3jaWicZd0pkP0jf5ysyHUI/RE7MHos6qlToFcGWXVp+ykHOy77OUMrfbgJ9it2C5bow7OIQwYYaHjk9XlBQ2A==} dev: false + /@chevrotain/cst-dts-gen@11.0.3: + resolution: {integrity: sha512-BvIKpRLeS/8UbfxXxgC33xOumsacaeCKAjAeLyOn7Pcp95HiRbrpl14S+9vaZLolnbssPIUuiUd8IvgkRyt6NQ==} + dependencies: + '@chevrotain/gast': 11.0.3 + '@chevrotain/types': 11.0.3 + lodash-es: 4.17.21 + + /@chevrotain/gast@11.0.3: + resolution: {integrity: sha512-+qNfcoNk70PyS/uxmj3li5NiECO+2YKZZQMbmjTqRI3Qchu8Hig/Q9vgkHpI3alNjr7M+a2St5pw5w5F6NL5/Q==} + dependencies: + '@chevrotain/types': 11.0.3 + lodash-es: 4.17.21 + + /@chevrotain/regexp-to-ast@11.0.3: + resolution: {integrity: sha512-1fMHaBZxLFvWI067AVbGJav1eRY7N8DDvYCTwGBiE/ytKBgP8azTdgyrKyWZ9Mfh09eHWb5PgTSO8wi7U824RA==} + + /@chevrotain/types@11.0.3: + resolution: {integrity: sha512-gsiM3G8b58kZC2HaWR50gu6Y1440cHiJ+i3JUvcp/35JchYejb2+5MVeJK0iKThYpAa/P2PYFV4hoi44HD+aHQ==} + + /@chevrotain/utils@11.0.3: + resolution: {integrity: sha512-YslZMgtJUyuMbZ+aKvfF3x1f5liK4mWNxghFRv7jqRR9C3R3fAOGTTKvxXDa2Y1s9zSbcpuO0cAxDYsc9SrXoQ==} + /@colors/colors@1.5.0: resolution: {integrity: sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ==} engines: {node: '>=0.1.90'} @@ -4926,11 +5041,13 @@ packages: /@types/d3-scale-chromatic@3.0.3: resolution: {integrity: sha512-laXM4+1o5ImZv3RpFAsTRn3TEkzqkytiOY0Dz0sq5cnd1dtNlk6sHLon4OvqaiJb28T0S/TdsBI3Sjsy+keJrw==} + dev: true /@types/d3-scale@4.0.8: resolution: {integrity: sha512-gkK1VVTr5iNiYJ7vWDI+yUFFlszhNMtVeneJ6lUTKPjprsvLLI9/tgEGiXJOnlINJA8FyA88gfnQsHbybVZrYQ==} dependencies: '@types/d3-time': 3.0.3 + dev: true /@types/d3-selection@3.0.10: resolution: {integrity: sha512-cuHoUgS/V3hLdjJOLTT691+G2QoqAjCVLmr4kJXR4ha56w1Zdu8UUQ5TxLRqudgNjwXeQxKMq4j+lyf9sWuslg==} @@ -4954,6 +5071,7 @@ packages: /@types/d3-time@3.0.3: resolution: {integrity: sha512-2p6olUZ4w3s+07q3Tm2dbiMZy5pCDfYwtLXXHUnVzXgQlZ/OyPtUz6OL382BkOuGlLXqfT+wqv8Fw2v8/0geBw==} + dev: true /@types/d3-timer@3.0.2: resolution: {integrity: sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==} @@ -5115,6 +5233,12 @@ packages: '@types/node': 20.11.24 dev: true + /@types/hast@3.0.4: + resolution: {integrity: sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==} + dependencies: + '@types/unist': 3.0.2 + dev: true + /@types/http-cache-semantics@4.0.4: resolution: {integrity: sha512-1m0bIFVc7eJWyve9S0RnuRgcQqF/Xd5QsUZAZeQFr1Q3/p9JWoQQEqmVy+DPTNpGXwhgIetAoYF8JSc33q29QA==} dev: true @@ -5222,6 +5346,12 @@ packages: dependencies: '@types/unist': 2.0.10 + /@types/mdast@4.0.3: + resolution: {integrity: sha512-LsjtqsyF+d2/yFOYaN22dHZI1Cpwkrj+g06G8+qtUKlhovPW89YhqSnfKtMbkgmEtYpH2gydRNULd6y8mciAFg==} + dependencies: + '@types/unist': 3.0.2 + dev: true + /@types/mdurl@1.0.2: resolution: {integrity: sha512-eC4U9MlIcu2q0KQmXszyn5Akca/0jrQmwDRgpAMJai7qBWq4amIQhZyNau4VYGtCeALvW1/NtjzJJ567aZxfKA==} dev: true @@ -5415,6 +5545,10 @@ packages: resolution: {integrity: sha512-cputDpIbFgLUaGQn6Vqg3/YsJwxUwHLO13v3i5ouxT4lat0khip9AEWxtERujXV9wxIB1EyF97BSJFt6vpdI8g==} dev: true + /@types/unist@3.0.2: + resolution: {integrity: sha512-dqId9J8K/vGi5Zr7oo212BGii5m3q5Hxlkwy3WpYuKPklmBEvsbMYYyLxAQpSffdLl/gdW0XUpKWFvYmyoWCoQ==} + dev: true + /@types/uuid@9.0.8: resolution: {integrity: sha512-jg+97EGIcY9AGHJJRaaPVgetKDsrTgbRjQ5Msgjh/DQKEFl0DtyRr/VCOyD1T2R1MNeWPK/u7JoGhlDZnKBAfA==} dev: true @@ -5926,6 +6060,14 @@ packages: - rollup dev: true + /@vite-pwa/vitepress@0.3.1(vite-plugin-pwa@0.17.5): + resolution: {integrity: sha512-krgiYQCWXUkpQCx+IHdsanFFpAzfH5pY86MARDa6as5ZNmG18mb/gC6MEahFV67V0xfMfTaNL4B8dQNzzcikLw==} + peerDependencies: + vite-plugin-pwa: '>=0.17.2 <1' + dependencies: + vite-plugin-pwa: 0.17.5(vite@4.5.2)(workbox-build@7.0.0)(workbox-window@7.0.0) + dev: true + /@vite-pwa/vitepress@0.4.0(vite-plugin-pwa@0.19.2): resolution: {integrity: sha512-MrsSCK5EBCzQAQgq5/3XHaFIjkypda58Wzy6PkDwZoRHnWexik0C2GUxMOe+RA+qdpGxB0mEkhqajeOmuYMvhw==} peerDependencies: @@ -5949,6 +6091,17 @@ packages: vue: 3.4.21(typescript@5.3.3) dev: true + /@vitejs/plugin-vue@4.6.2(vite@5.1.5)(vue@3.4.21): + resolution: {integrity: sha512-kqf7SGFoG+80aZG6Pf+gsZIVvGSCKE98JbiWqcCV9cThtg91Jav0yvYFC9Zb+jKetNGF6ZKeoaxgZfND21fWKw==} + engines: {node: ^14.18.0 || >=16.0.0} + peerDependencies: + vite: ^4.0.0 || ^5.0.0 + vue: ^3.2.25 + dependencies: + vite: 5.1.5(@types/node@20.11.24) + vue: 3.4.21(typescript@5.3.3) + dev: true + /@vitejs/plugin-vue@5.0.4(vite@5.1.5)(vue@3.4.21): resolution: {integrity: sha512-WS3hevEszI6CEVEx28F8RjTX97k3KsrcY6kvTg7+Whm5y3oYvcqzVeGCU3hxSAn4uY2CLCkeokkGKpoctccilQ==} engines: {node: ^18.0.0 || >=20.0.0} @@ -6095,7 +6248,6 @@ packages: /@vue/devtools-api@6.6.1: resolution: {integrity: sha512-LgPscpE3Vs0x96PzSSB4IGVSZXZBZHpfxs+ZA1d+VEPwHdOXowy/Y2CsvCAIFrf+ssVU1pD1jidj505EpUnfbA==} - dev: false /@vue/devtools-api@7.0.16(vue@3.4.21): resolution: {integrity: sha512-fZG2CG8624qphMf4aj59zNHckMx1G3lxODUuyM9USKuLznXCh66TP+tEbPOCcml16hA0GizJ4D8w6F34hrfbcw==} @@ -7423,10 +7575,18 @@ packages: engines: {node: '>=10'} dev: true + /character-entities-html4@2.1.0: + resolution: {integrity: sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==} + dev: true + /character-entities-legacy@1.1.4: resolution: {integrity: sha512-3Xnr+7ZFS1uxeiUDvV02wQ+QDbc55o97tIV5zHScSPJpcLm/r0DFPcoY3tYRp+VZukxuMeKgXYmsXQHO05zQeA==} dev: true + /character-entities-legacy@3.0.0: + resolution: {integrity: sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==} + dev: true + /character-entities@1.2.4: resolution: {integrity: sha512-iBMyeEHxfVnIakwOuDXpVkc54HijNgCyQB2w0VfGQThle6NXn50zU6V/u+LDhxHcDUPojn6Kpga3PTAD8W1bQw==} dev: true @@ -7449,6 +7609,24 @@ packages: engines: {node: '>= 0.8.0'} dev: true + /chevrotain-allstar@0.3.1(chevrotain@11.0.3): + resolution: {integrity: sha512-b7g+y9A0v4mxCW1qUhf3BSVPg+/NvGErk/dOkrDaHA0nQIQGAtrOjlX//9OQtRlSCy+x9rfB5N8yC71lH1nvMw==} + peerDependencies: + chevrotain: ^11.0.0 + dependencies: + chevrotain: 11.0.3 + lodash-es: 4.17.21 + + /chevrotain@11.0.3: + resolution: {integrity: sha512-ci2iJH6LeIkvP9eJW6gpueU8cnZhv85ELY8w8WiFtNjMHA5ad6pQLaJo9mEly/9qUyCpvqX8/POVUTf18/HFdw==} + dependencies: + '@chevrotain/cst-dts-gen': 11.0.3 + '@chevrotain/gast': 11.0.3 + '@chevrotain/regexp-to-ast': 11.0.3 + '@chevrotain/types': 11.0.3 + '@chevrotain/utils': 11.0.3 + lodash-es: 4.17.21 + /chokidar@3.6.0: resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==} engines: {node: '>= 8.10.0'} @@ -7661,6 +7839,10 @@ packages: delayed-stream: 1.0.0 dev: true + /comma-separated-tokens@2.0.3: + resolution: {integrity: sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==} + dev: true + /commander@11.0.0: resolution: {integrity: sha512-9HMlXtt/BNoYr8ooyjjNRdIilOTkVJXB+GhxMTtOKwk0R4j4lS4NpjuqmRxroBfnfTSHQIHQB7wryHhXarNjmQ==} engines: {node: '>=16'} @@ -8756,6 +8938,12 @@ packages: resolution: {integrity: sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==} dev: true + /devlop@1.1.0: + resolution: {integrity: sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==} + dependencies: + dequal: 2.0.3 + dev: true + /didyoumean@1.2.2: resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==} dev: false @@ -8902,6 +9090,10 @@ packages: resolution: {integrity: sha512-d5rZRka9n2Y3MkWRN74IoAsxR0HK3yaAt7T50e3iT9VZmCCQDT3geXUO5ZRMhDToa1pkCeQXuNo+0g+NfDOVPA==} dev: true + /elkjs@0.8.2: + resolution: {integrity: sha512-L6uRgvZTH+4OF5NE/MBbzQx/WYpru1xCBE9respNj6qznEewGUIfhzmm7horWWxbNO2M0WckQypGctR8lH79xQ==} + dev: false + /elkjs@0.9.2: resolution: {integrity: sha512-2Y/RaA1pdgSHpY0YG4TYuYCD2wh97CRvu22eLG3Kz0pgQ/6KbIFTxsTnDc4MH/6hFlg2L/9qXrDMG0nMjP63iw==} dev: false @@ -9201,11 +9393,6 @@ packages: '@esbuild/win32-x64': 0.20.1 dev: true - /escalade@3.1.1: - resolution: {integrity: sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==} - engines: {node: '>=6'} - dev: true - /escalade@3.1.2: resolution: {integrity: sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA==} engines: {node: '>=6'} @@ -9846,7 +10033,7 @@ packages: proxy-addr: 2.0.7 rfdc: 1.3.1 secure-json-parse: 2.7.0 - semver: 7.5.4 + semver: 7.6.0 tiny-lru: 8.0.2 transitivePeerDependencies: - supports-color @@ -10172,6 +10359,15 @@ packages: universalify: 2.0.1 dev: true + /fs-extra@11.1.1: + resolution: {integrity: sha512-MGIE4HOvQCeUCzmlHs0vXpih4ysz4wg9qiSAu6cd42lVwPbTM1TjV7RusoyQqMmk/95gdQZX72u+YW+c3eEpFQ==} + engines: {node: '>=14.14'} + dependencies: + graceful-fs: 4.2.11 + jsonfile: 6.1.0 + universalify: 2.0.1 + dev: true + /fs-extra@11.2.0: resolution: {integrity: sha512-PmDi3uwK5nFuXh7XDTlVnS17xJS7vW36is2+w3xcv8SVxiB4NyATf4ctkVY5bkSjX0Y4nbvZCq1/EjtEyr9ktw==} engines: {node: '>=14.14'} @@ -10621,6 +10817,88 @@ packages: dependencies: function-bind: 1.1.2 + /hast-util-from-parse5@8.0.1: + resolution: {integrity: sha512-Er/Iixbc7IEa7r/XLtuG52zoqn/b3Xng/w6aZQ0xGVxzhw5xUFxcRqdPzP6yFi/4HBYRaifaI5fQ1RH8n0ZeOQ==} + dependencies: + '@types/hast': 3.0.4 + '@types/unist': 3.0.2 + devlop: 1.1.0 + hastscript: 8.0.0 + property-information: 6.4.1 + vfile: 6.0.1 + vfile-location: 5.0.2 + web-namespaces: 2.0.1 + dev: true + + /hast-util-parse-selector@4.0.0: + resolution: {integrity: sha512-wkQCkSYoOGCRKERFWcxMVMOcYE2K1AaNLU8DXS9arxnLOUEWbOXKXiJUNzEpqZ3JOKpnha3jkFrumEjVliDe7A==} + dependencies: + '@types/hast': 3.0.4 + dev: true + + /hast-util-raw@9.0.2: + resolution: {integrity: sha512-PldBy71wO9Uq1kyaMch9AHIghtQvIwxBUkv823pKmkTM3oV1JxtsTNYdevMxvUHqcnOAuO65JKU2+0NOxc2ksA==} + dependencies: + '@types/hast': 3.0.4 + '@types/unist': 3.0.2 + '@ungap/structured-clone': 1.2.0 + hast-util-from-parse5: 8.0.1 + hast-util-to-parse5: 8.0.0 + html-void-elements: 3.0.0 + mdast-util-to-hast: 13.1.0 + parse5: 7.1.2 + unist-util-position: 5.0.0 + unist-util-visit: 5.0.0 + vfile: 6.0.1 + web-namespaces: 2.0.1 + zwitch: 2.0.4 + dev: true + + /hast-util-to-html@9.0.0: + resolution: {integrity: sha512-IVGhNgg7vANuUA2XKrT6sOIIPgaYZnmLx3l/CCOAK0PtgfoHrZwX7jCSYyFxHTrGmC6S9q8aQQekjp4JPZF+cw==} + dependencies: + '@types/hast': 3.0.4 + '@types/unist': 3.0.2 + ccount: 2.0.1 + comma-separated-tokens: 2.0.3 + hast-util-raw: 9.0.2 + hast-util-whitespace: 3.0.0 + html-void-elements: 3.0.0 + mdast-util-to-hast: 13.1.0 + property-information: 6.4.1 + space-separated-tokens: 2.0.2 + stringify-entities: 4.0.3 + zwitch: 2.0.4 + dev: true + + /hast-util-to-parse5@8.0.0: + resolution: {integrity: sha512-3KKrV5ZVI8if87DVSi1vDeByYrkGzg4mEfeu4alwgmmIeARiBLKCZS2uw5Gb6nU9x9Yufyj3iudm6i7nl52PFw==} + dependencies: + '@types/hast': 3.0.4 + comma-separated-tokens: 2.0.3 + devlop: 1.1.0 + property-information: 6.4.1 + space-separated-tokens: 2.0.2 + web-namespaces: 2.0.1 + zwitch: 2.0.4 + dev: true + + /hast-util-whitespace@3.0.0: + resolution: {integrity: sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==} + dependencies: + '@types/hast': 3.0.4 + dev: true + + /hastscript@8.0.0: + resolution: {integrity: sha512-dMOtzCEd3ABUeSIISmrETiKuyydk1w0pa+gE/uormcTpSYuaNJPbX1NU3JLyscSLjwAQM8bWMhhIlnCqnRvDTw==} + dependencies: + '@types/hast': 3.0.4 + comma-separated-tokens: 2.0.3 + hast-util-parse-selector: 4.0.0 + property-information: 6.4.1 + space-separated-tokens: 2.0.2 + dev: true + /heap@0.2.7: resolution: {integrity: sha512-2bsegYkkHO+h/9MGbn6KWcE45cHZgPANo5LXF7EvWdT0yT2EguSVO1nDgU5c8+ZOPwp2vMNa7YFsJhVcDR9Sdg==} dev: false @@ -10672,6 +10950,10 @@ packages: resolution: {integrity: sha512-9gux8QhvjRO/erSnDPv28noDZcPZmYE7e1vFsBLKLlRlKDSqNJYebj6Qz1TGd5lsRV+X+xYyjCKjuZdABinWjA==} dev: false + /html-void-elements@3.0.0: + resolution: {integrity: sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==} + dev: true + /htmlparser2@8.0.2: resolution: {integrity: sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA==} dependencies: @@ -12066,6 +12348,10 @@ packages: engines: {node: '>=0.10.0'} dev: true + /jsonschema@1.4.1: + resolution: {integrity: sha512-S6cATIPVv1z0IlxdN+zUk5EPjkGCdnhN4wVSBlvoUO1tOLJootbo9CquNJmbIh4yikWHiUedhRYrNPn1arpEmQ==} + dev: true + /jsprim@2.0.2: resolution: {integrity: sha512-gqXddjPqQ6G40VdnI6T6yObEC+pDNvyP95wdQhkWkg7crHH3km5qP1FsOXEkzEQwnz6gz5qGTn1c2Y52wP3OyQ==} engines: {'0': node >=0.6.0} @@ -12121,6 +12407,37 @@ packages: engines: {node: '>=12'} dev: true + /langium-cli@3.0.1: + resolution: {integrity: sha512-s1R/4GKkWItfu2o05DxqP71ID5MiGqb1BfXyPeFvIO3+aRSCj6fCj9EXtasvf18lSTUe27H37aO66TNU9VRr+Q==} + engines: {node: '>=16.0.0'} + hasBin: true + dependencies: + chalk: 5.3.0 + commander: 11.0.0 + fs-extra: 11.1.1 + jsonschema: 1.4.1 + langium: 3.0.0 + langium-railroad: 3.0.0 + lodash: 4.17.21 + dev: true + + /langium-railroad@3.0.0: + resolution: {integrity: sha512-GQOnQBGl5gJqzgK/4bKvJO5QhJGNnprpYH6Fghbl4FviVLHwP6yzyqiouDelLSoCadChCr2JqKaBp5HXv7CgWw==} + dependencies: + langium: 3.0.0 + railroad-diagrams: 1.0.0 + dev: true + + /langium@3.0.0: + resolution: {integrity: sha512-+Ez9EoiByeoTu/2BXmEaZ06iPNXM6thWJp02KfBO/raSMyCJ4jw7AkWWa+zBCTm0+Tw1Fj9FOxdqSskyN5nAwg==} + engines: {node: '>=16.0.0'} + dependencies: + chevrotain: 11.0.3 + chevrotain-allstar: 0.3.1(chevrotain@11.0.3) + vscode-languageserver: 9.0.1 + vscode-languageserver-textdocument: 1.0.11 + vscode-uri: 3.0.8 + /layout-base@1.0.2: resolution: {integrity: sha512-8h2oVEZNktL4BH2JCOI90iD1yXwL6iNW7KcCKT2QZgQJR2vbqDsldCTPRU9NifTCqHZci57XvQQ15YTu+sTYPg==} dev: false @@ -12280,7 +12597,6 @@ packages: /lodash-es@4.17.21: resolution: {integrity: sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==} - dev: false /lodash.camelcase@4.3.0: resolution: {integrity: sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==} @@ -12624,6 +12940,20 @@ packages: unist-util-is: 5.2.1 dev: true + /mdast-util-to-hast@13.1.0: + resolution: {integrity: sha512-/e2l/6+OdGp/FB+ctrJ9Avz71AN/GRH3oi/3KAx/kMnoUsD6q0woXlDT8lLEeViVKE7oZxE7RXzvO3T8kF2/sA==} + dependencies: + '@types/hast': 3.0.4 + '@types/mdast': 4.0.3 + '@ungap/structured-clone': 1.2.0 + devlop: 1.1.0 + micromark-util-sanitize-uri: 2.0.0 + trim-lines: 3.0.1 + unist-util-position: 5.0.0 + unist-util-visit: 5.0.0 + vfile: 6.0.1 + dev: true + /mdast-util-to-markdown@1.5.0: resolution: {integrity: sha512-bbv7TPv/WC49thZPg3jXuqzuvI45IL2EVAr/KxF0BSdHsU0ceFHOmwQn6evxAh1GaoK/6GQ1wp4R4oW2+LFL/A==} dependencies: @@ -12879,6 +13209,13 @@ packages: micromark-util-symbol: 1.1.0 micromark-util-types: 1.1.0 + /micromark-util-character@2.1.0: + resolution: {integrity: sha512-KvOVV+X1yLBfs9dCBSopq/+G1PcgT3lAK07mC4BzXi5E7ahzMAF8oIupDDJ6mievI6F+lAATkbQQlQixJfT3aQ==} + dependencies: + micromark-util-symbol: 2.0.0 + micromark-util-types: 2.0.0 + dev: true + /micromark-util-chunked@1.1.0: resolution: {integrity: sha512-Ye01HXpkZPNcV6FiyoW2fGZDUw4Yc7vT0E9Sad83+bEDiCJ1uXu0S3mr8WLpsz3HaG3x2q0HM6CTuPdcZcluFQ==} dependencies: @@ -12913,6 +13250,10 @@ packages: /micromark-util-encode@1.1.0: resolution: {integrity: sha512-EuEzTWSTAj9PA5GOAs992GzNh2dGQO52UvAbtSOMvXTxv3Criqb6IOzJUBCmEqrrXSblJIJBbFFv6zPxpreiJw==} + /micromark-util-encode@2.0.0: + resolution: {integrity: sha512-pS+ROfCXAGLWCOc8egcBvT0kf27GoWMqtdarNfDcjb6YLuV5cM3ioG45Ys2qOVqeqSbjaKg72vU+Wby3eddPsA==} + dev: true + /micromark-util-html-tag-name@1.2.0: resolution: {integrity: sha512-VTQzcuQgFUD7yYztuQFKXT49KghjtETQ+Wv/zUjGSGBioZnkA4P1XXZPT1FHeJA6RwRXSF47yvJ1tsJdoxwO+Q==} @@ -12933,6 +13274,14 @@ packages: micromark-util-encode: 1.1.0 micromark-util-symbol: 1.1.0 + /micromark-util-sanitize-uri@2.0.0: + resolution: {integrity: sha512-WhYv5UEcZrbAtlsnPuChHUAsu/iBPOVaEVsntLBIdpibO0ddy8OzavZz3iL2xVvBZOpolujSliP65Kq0/7KIYw==} + dependencies: + micromark-util-character: 2.1.0 + micromark-util-encode: 2.0.0 + micromark-util-symbol: 2.0.0 + dev: true + /micromark-util-subtokenize@1.1.0: resolution: {integrity: sha512-kUQHyzRoxvZO2PuLzMt2P/dwVsTiivCK8icYTeR+3WgbuPqfHgPPy7nFKbeqRivBvn/3N3GBiNC+JRTMSxEC7A==} dependencies: @@ -12944,9 +13293,17 @@ packages: /micromark-util-symbol@1.1.0: resolution: {integrity: sha512-uEjpEYY6KMs1g7QfJ2eX1SQEV+ZT4rUD3UcF6l57acZvLNK7PBZL+ty82Z1qhK1/yXIY4bdx04FKMgR0g4IAag==} + /micromark-util-symbol@2.0.0: + resolution: {integrity: sha512-8JZt9ElZ5kyTnO94muPxIGS8oyElRJaiJO8EzV6ZSyGQ1Is8xwl4Q45qU5UOg+bGH4AikWziz0iN4sFLWs8PGw==} + dev: true + /micromark-util-types@1.1.0: resolution: {integrity: sha512-ukRBgie8TIAcacscVHSiddHjO4k/q3pnedmzMQ4iwDcK0FtFCohKOlFbaOL/mPgfnPsL3C1ZyxJa4sbWrBl3jg==} + /micromark-util-types@2.0.0: + resolution: {integrity: sha512-oNh6S2WMHWRZrmutsRmDDfkzKtxF+bc2VxLC9dvtrDIRFln627VsFP6fLMgTryGDljgLPjkrzQSDcPrjPyDJ5w==} + dev: true + /micromark@2.11.4: resolution: {integrity: sha512-+WoovN/ppKolQOFIAajxi7Lu9kInbPxFuTBVEavFcL8eAfVstoc5MocPmqBeAdBOJV00uaVjegzH4+MA0DN/uA==} dependencies: @@ -13103,6 +13460,11 @@ packages: resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==} engines: {node: '>=4'} + /mrmime@1.0.1: + resolution: {integrity: sha512-hzzEagAgDyoU1Q6yg5uI+AorQgdvMCur3FcKf7NhMKWsaYg+RnbTyHRa/9IlLF9rf455MOCtcqqrQQ83pPP7Uw==} + engines: {node: '>=10'} + dev: true + /mrmime@2.0.0: resolution: {integrity: sha512-eu38+hdgojoyq63s+yTpN4XMBdt5l8HhMhc4VKLO9KM5caLIBvUm4thi7fFaxyTmCKeNnXZ5pAlBwCUnhA09uw==} engines: {node: '>=10'} @@ -13235,10 +13597,6 @@ packages: underscore: 1.1.7 dev: true - /non-layered-tidy-tree-layout@2.0.2: - resolution: {integrity: sha512-gkXMxRzUH+PB0ax9dUN0yYF0S25BqeAYqhgMaLUFmpXLEk7Fcu8f4emJuOAY0V8kjDICxROIKsTAKsV/v355xw==} - dev: false - /normalize-package-data@2.5.0: resolution: {integrity: sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==} dependencies: @@ -14014,6 +14372,10 @@ packages: sisteransi: 1.0.5 dev: true + /property-information@6.4.1: + resolution: {integrity: sha512-OHYtXfu5aI2sS2LWFSN5rgJjrQ4pCy8i1jubJLe2QvMF8JJ++HXTUIVWFLfXJoaOfvYYjk2SN8J2wFUWIGXT4w==} + dev: true + /proxy-addr@2.0.7: resolution: {integrity: sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==} engines: {node: '>= 0.10'} @@ -14092,6 +14454,10 @@ packages: engines: {node: '>=10'} dev: true + /railroad-diagrams@1.0.0: + resolution: {integrity: sha512-cz93DjNeLY0idrCNOH6PviZGRN9GJhsdm9hpn1YCS879fj4W+x5IFJhhkRZcwVgMmFF7R82UA/7Oh+R8lLZg6A==} + dev: true + /ramda@0.28.0: resolution: {integrity: sha512-9QnLuG/kPVgWvMQ4aODhsBUFKOUmnbUnsSXACv+NCQZcHbeb+v8Lodp8OVxtRULN1/xOyYLLaL6npE6dMq5QTA==} dev: false @@ -14899,6 +15265,18 @@ packages: '@shikijs/core': 1.1.7 dev: true + /shikiji-transformers@0.7.6: + resolution: {integrity: sha512-yTp+7JMD/aXbV9ndn14eo9IK/UNt8iDsLNyqlOmCtcldlkqWE9T2YKAlOHOTVaeDfYWUWZa2EgSXb/CBfepBrw==} + dependencies: + shikiji: 0.7.6 + dev: true + + /shikiji@0.7.6: + resolution: {integrity: sha512-KzEtvSGQtBvfwVIB70kOmIfl/5rz1LC8j+tvlHXsJKAIdONNQvG1at7ivUUq3xUctqgO6fsO3AGomUSh0F+wsQ==} + dependencies: + hast-util-to-html: 9.0.0 + dev: true + /side-channel@1.0.4: resolution: {integrity: sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==} dependencies: @@ -15054,6 +15432,10 @@ packages: deprecated: Please use @jridgewell/sourcemap-codec instead dev: true + /space-separated-tokens@2.0.2: + resolution: {integrity: sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==} + dev: true + /spawn-command@0.0.2: resolution: {integrity: sha512-zC8zGoGkmc8J9ndvml8Xksr1Amk9qBujgbF0JAIWO7kXr43w0h/0GJNM/Vustixu+YE8N/MTrQ7N31FvHUACxQ==} dev: true @@ -15311,6 +15693,13 @@ packages: dependencies: safe-buffer: 5.2.1 + /stringify-entities@4.0.3: + resolution: {integrity: sha512-BP9nNHMhhfcMbiuQKCqMjhDP5yBCAxsPu4pHFFzJ6Alo9dZgY4VLDPutXqIjpRiMoKdp7Av85Gr73Q5uH9k7+g==} + dependencies: + character-entities-html4: 2.1.0 + character-entities-legacy: 3.0.0 + dev: true + /stringify-object@3.3.0: resolution: {integrity: sha512-rHqiFh1elqCQ9WPLIC8I0Q/g/wj5J1eMkyoiD6eoQApWHP0FtlK7rqnhmabL5VUY9JQCcqwwvlOaSuutekgyrw==} engines: {node: '>=4'} @@ -15745,6 +16134,10 @@ packages: hasBin: true dev: true + /trim-lines@3.0.1: + resolution: {integrity: sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==} + dev: true + /trim-newlines@3.0.1: resolution: {integrity: sha512-c1PTsA3tYrIsLGkJkzHF+w9F2EyxfXGo4UyJc4pFL++FMjnq0HJS69T3M7d//gKrFKwy429bouPescbjecU+Zw==} engines: {node: '>=8'} @@ -16103,6 +16496,18 @@ packages: '@types/unist': 2.0.7 dev: true + /unist-util-is@6.0.0: + resolution: {integrity: sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw==} + dependencies: + '@types/unist': 3.0.2 + dev: true + + /unist-util-position@5.0.0: + resolution: {integrity: sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==} + dependencies: + '@types/unist': 3.0.2 + dev: true + /unist-util-stringify-position@2.0.3: resolution: {integrity: sha512-3faScn5I+hy9VleOq/qNbAd6pAx7iH5jYBMS9I1HgQVijz/4mv5Bvw5iw1sC/90CODiKo81G/ps8AJrISn687g==} dependencies: @@ -16114,6 +16519,12 @@ packages: dependencies: '@types/unist': 2.0.10 + /unist-util-stringify-position@4.0.0: + resolution: {integrity: sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==} + dependencies: + '@types/unist': 3.0.2 + dev: true + /unist-util-visit-parents@5.1.3: resolution: {integrity: sha512-x6+y8g7wWMyQhL1iZfhIPhDAs7Xwbn9nRosDXl7qoPTSCy0yNxnKc+hWokFifWQIDGi154rdUqKvbCa4+1kLhg==} dependencies: @@ -16121,6 +16532,13 @@ packages: unist-util-is: 5.2.1 dev: true + /unist-util-visit-parents@6.0.1: + resolution: {integrity: sha512-L/PqWzfTP9lzzEa6CKs0k2nARxTdZduw3zyh8d2NVBnsyvHjSX4TWse388YrrQKbvI8w20fGjGlhgT96WwKykw==} + dependencies: + '@types/unist': 3.0.2 + unist-util-is: 6.0.0 + dev: true + /unist-util-visit@4.1.2: resolution: {integrity: sha512-MSd8OUGISqHdVvfY9TPhyK2VdUrPgxkUtWSuMHF6XAAFuL4LokseigBnZtPnJMu+FbynTkFNnFlyjxpVKujMRg==} dependencies: @@ -16129,6 +16547,14 @@ packages: unist-util-visit-parents: 5.1.3 dev: true + /unist-util-visit@5.0.0: + resolution: {integrity: sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==} + dependencies: + '@types/unist': 3.0.2 + unist-util-is: 6.0.0 + unist-util-visit-parents: 6.0.1 + dev: true + /universalify@0.1.2: resolution: {integrity: sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==} engines: {node: '>= 4.0.0'} @@ -16248,7 +16674,7 @@ packages: browserslist: '>= 4.21.0' dependencies: browserslist: 4.21.10 - escalade: 3.1.1 + escalade: 3.1.2 picocolors: 1.0.0 dev: true @@ -16337,6 +16763,13 @@ packages: extsprintf: 1.3.0 dev: true + /vfile-location@5.0.2: + resolution: {integrity: sha512-NXPYyxyBSH7zB5U6+3uDdd6Nybz6o6/od9rk8bp9H8GR3L+cm/fC0uUTbqBmUTnMCUDslAGBOIKNfvvb+gGlDg==} + dependencies: + '@types/unist': 3.0.2 + vfile: 6.0.1 + dev: true + /vfile-message@3.1.4: resolution: {integrity: sha512-fa0Z6P8HUrQN4BZaX05SIVXic+7kE3b05PWAtPuYP9QLHsLKYR7/AlLW3NtOrpXRLeawpDLMsVkmk5DG0NXgWw==} dependencies: @@ -16344,6 +16777,13 @@ packages: unist-util-stringify-position: 3.0.3 dev: true + /vfile-message@4.0.2: + resolution: {integrity: sha512-jRDZ1IMLttGj41KcZvlrYAaI3CfqpLpfpf+Mfig13viT6NKvRzWZ+lXz0Y5D60w6uJIBAOGq9mSHf0gktF0duw==} + dependencies: + '@types/unist': 3.0.2 + unist-util-stringify-position: 4.0.0 + dev: true + /vfile@5.3.7: resolution: {integrity: sha512-r7qlzkgErKjobAmyNIkkSpizsFPYiUPuJb5pNW1RB4JcYVZhs4lIbVqk8XPk033CV/1z8ss5pkax8SuhGpcG8g==} dependencies: @@ -16353,6 +16793,14 @@ packages: vfile-message: 3.1.4 dev: true + /vfile@6.0.1: + resolution: {integrity: sha512-1bYqc7pt6NIADBJ98UiG0Bn/CHIVOoZ/IyEkqIruLg0mE1BKzkOXY2D6CSqQIcKqgadppE5lrxgWXJmXd7zZJw==} + dependencies: + '@types/unist': 3.0.2 + unist-util-stringify-position: 4.0.0 + vfile-message: 4.0.2 + dev: true + /vite-node@0.34.6(@types/node@20.11.24): resolution: {integrity: sha512-nlBMJ9x6n7/Amaz6F3zJ97EBwR2FkzhBRxF5e+jE6LA3yi6Wtc2lyTij1OnDMIr34v5g/tVQtsVAzhT0jc5ygA==} engines: {node: '>=v14.18.0'} @@ -16389,6 +16837,24 @@ packages: - supports-color dev: true + /vite-plugin-pwa@0.17.5(vite@4.5.2)(workbox-build@7.0.0)(workbox-window@7.0.0): + resolution: {integrity: sha512-UxRNPiJBzh4tqU/vc8G2TxmrUTzT6BqvSzhszLk62uKsf+npXdvLxGDz9C675f4BJi6MbD2tPnJhi5txlMzxbQ==} + engines: {node: '>=16.0.0'} + peerDependencies: + vite: ^3.1.0 || ^4.0.0 || ^5.0.0 + workbox-build: ^7.0.0 + workbox-window: ^7.0.0 + dependencies: + debug: 4.3.4(supports-color@8.1.1) + fast-glob: 3.3.2 + pretty-bytes: 6.1.1 + vite: 4.5.2(@types/node@20.11.24) + workbox-build: 7.0.0 + workbox-window: 7.0.0 + transitivePeerDependencies: + - supports-color + dev: true + /vite-plugin-pwa@0.19.2(vite@4.5.2)(workbox-build@7.0.0)(workbox-window@7.0.0): resolution: {integrity: sha512-LSQJFPxCAQYbRuSyc9EbRLRqLpaBA9onIZuQFomfUYjWSgHuQLonahetDlPSC9zsxmkSEhQH8dXZN8yL978h3w==} engines: {node: '>=16.0.0'} @@ -16500,6 +16966,62 @@ packages: vue: 3.4.21(typescript@5.3.3) dev: true + /vitepress@1.0.0-rc.31(@algolia/client-search@4.22.1)(@types/node@20.11.24)(postcss@8.4.35)(search-insights@2.13.0)(typescript@5.3.3): + resolution: {integrity: sha512-ikH9pIjOOAbyoYAGBVfTz8TzuXp+UoWaIRMU4bw/oiTg8R65SbAaGKY84xx6TuL+f4VqUJ8lhzW82YyxSLvstA==} + hasBin: true + peerDependencies: + markdown-it-mathjax3: ^4.3.2 + postcss: ^8.4.31 + peerDependenciesMeta: + markdown-it-mathjax3: + optional: true + postcss: + optional: true + dependencies: + '@docsearch/css': 3.5.2 + '@docsearch/js': 3.5.2(@algolia/client-search@4.22.1)(search-insights@2.13.0) + '@types/markdown-it': 13.0.7 + '@vitejs/plugin-vue': 4.6.2(vite@5.1.5)(vue@3.4.21) + '@vue/devtools-api': 6.6.1 + '@vueuse/core': 10.9.0(vue@3.4.21) + '@vueuse/integrations': 10.9.0(focus-trap@7.5.4)(vue@3.4.21) + focus-trap: 7.5.4 + mark.js: 8.11.1 + minisearch: 6.3.0 + mrmime: 1.0.1 + postcss: 8.4.35 + shikiji: 0.7.6 + shikiji-transformers: 0.7.6 + vite: 5.1.5(@types/node@20.11.24) + vue: 3.4.21(typescript@5.3.3) + 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 + - typescript + - universal-cookie + dev: true + /vitepress@1.0.0-rc.44(@algolia/client-search@4.22.1)(@types/node@20.11.24)(postcss@8.4.35)(search-insights@2.13.0)(typescript@5.3.3): resolution: {integrity: sha512-tO5taxGI7fSpBK1D8zrZTyJJERlyU9nnt0jHSt3fywfq3VKn977Hg0wUuTkEmwXlFYwuW26+6+3xorf4nD3XvA==} hasBin: true @@ -16633,9 +17155,18 @@ packages: vscode-uri: 3.0.7 dev: true + /vscode-jsonrpc@8.2.0: + resolution: {integrity: sha512-C+r0eKJUIfiDIfwJhria30+TYWPtuHJXHtI7J0YlOmKAo7ogxP20T0zxB7HZQIFhIyvoBPwWskjxrvAtfjyZfA==} + engines: {node: '>=14.0.0'} + + /vscode-languageserver-protocol@3.17.5: + resolution: {integrity: sha512-mb1bvRJN8SVznADSGWM9u/b07H7Ecg0I3OgXDuLdn307rl/J3A9YD6/eYOssqhecL27hK1IPZAsaqh00i/Jljg==} + dependencies: + vscode-jsonrpc: 8.2.0 + vscode-languageserver-types: 3.17.5 + /vscode-languageserver-textdocument@1.0.11: resolution: {integrity: sha512-X+8T3GoiwTVlJbicx/sIAF+yuJAqz8VvwJyoMVhwEMoEKE/fkDmrqUgDMyBECcM2A2frVZIUj5HI/ErRXCfOeA==} - dev: true /vscode-languageserver-textdocument@1.0.8: resolution: {integrity: sha512-1bonkGqQs5/fxGT5UchTgjGVnfysL0O8v1AYMBjqTbWQTFn721zaPGDYFkOKtfDgFiSgXM3KwaG3FMGfW4Ed9Q==} @@ -16645,6 +17176,15 @@ packages: resolution: {integrity: sha512-SYU4z1dL0PyIMd4Vj8YOqFvHu7Hz/enbWtpfnVbJHU4Nd1YNYx8u0ennumc6h48GQNeOLxmwySmnADouT/AuZA==} dev: true + /vscode-languageserver-types@3.17.5: + resolution: {integrity: sha512-Ld1VelNuX9pdF39h2Hgaeb5hEZM2Z3jUrrMgWQAu82jMtZp7p3vJT3BzToKtZI7NgQssZje5o0zryOrhQvzQAg==} + + /vscode-languageserver@9.0.1: + resolution: {integrity: sha512-woByF3PDpkHFUreUa7Hos7+pUWdeWMXRd26+ZX2A8cFx6v/JPTtd4/uN0/jB6XQHYaOlHbio03NTHCqrgG5n7g==} + hasBin: true + dependencies: + vscode-languageserver-protocol: 3.17.5 + /vscode-nls@5.2.0: resolution: {integrity: sha512-RAaHx7B14ZU04EU31pT+rKz2/zSl7xMsfIZuo8pd+KZO6PXtQmpevpq3vxvWNcrGbdmhM/rr5Uw5Mz+NBfhVng==} dev: true @@ -16663,7 +17203,6 @@ packages: /vscode-uri@3.0.8: resolution: {integrity: sha512-AyFQ0EVmsOZOlAnxoFOGOq1SQDWAB7C6aqMGS23svWAllfOaxbuFvcT8D1i8z3Gyn8fraVeZNNmN6e9bxxXkKw==} - dev: true /vue-demi@0.13.11(vue@3.4.21): resolution: {integrity: sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==} @@ -16759,15 +17298,15 @@ packages: minimalistic-assert: 1.0.1 dev: true + /web-namespaces@2.0.1: + resolution: {integrity: sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ==} + dev: true + /web-streams-polyfill@3.3.3: resolution: {integrity: sha512-d2JWLCivmZYTSIoge9MsgFCZrt571BikcWGYkjC1khllbTeDlGqZ2D8vD8E/lJa8WGWbb7Plm8/XJYV7IJHZZw==} engines: {node: '>= 8'} dev: true - /web-worker@1.3.0: - resolution: {integrity: sha512-BSR9wyRsy/KOValMgd5kMyr3JzpdeoR9KVId8u5GVlTTAtNChlsE4yTxeY7zMdNSyOmoKBv8NH2qeRY9Tg+IaA==} - dev: false - /webdriver@7.31.1(typescript@5.3.3): resolution: {integrity: sha512-nCdJLxRnYvOMFqTEX7sqQtF/hV/Jgov0Y6ICeOm1DMTlZSRRDaUsBMlEAPkEwif9uBJYdM0znv8qzfX358AGqQ==} engines: {node: '>=12.0.0'} @@ -17185,7 +17724,6 @@ packages: /workbox-google-analytics@7.0.0: resolution: {integrity: sha512-MEYM1JTn/qiC3DbpvP2BVhyIH+dV/5BjHk756u9VbwuAhu0QHyKscTnisQuz21lfRpOwiS9z4XdqeVAKol0bzg==} - deprecated: It is not compatible with newer versions of GA starting with v4, as long as you are using GAv3 it should be ok, but the package is not longer being maintained dependencies: workbox-background-sync: 7.0.0 workbox-core: 7.0.0 diff --git a/scripts/editor.bash b/scripts/editor.bash index 7f2f01562c..cb77fcd894 100755 --- a/scripts/editor.bash +++ b/scripts/editor.bash @@ -1,8 +1,12 @@ #!/usr/bin/env bash +# Fail on errors set -euxo pipefail export COREPACK_ENABLE_STRICT='0' +# Increase heap size +export NODE_OPTIONS="--max_old_space_size=4096" + pushd packages/mermaid # Append commit hash to version jq ".version = .version + \"+${COMMIT_REF:0:7}\"" package.json > package.tmp.json @@ -11,8 +15,8 @@ yarn link popd pnpm run -r clean +pnpm build:esbuild pnpm build:types -pnpm build:mermaid # Clone the Mermaid Live Editor repository rm -rf mermaid-live-editor diff --git a/tsconfig.eslint.json b/tsconfig.eslint.json index 5090f49d1e..5fd73bf1f9 100644 --- a/tsconfig.eslint.json +++ b/tsconfig.eslint.json @@ -5,5 +5,14 @@ // ensure that nobody can accidentally use this config for a build "noEmit": true }, - "include": ["packages", "tests", "scripts", "cypress", "__mocks__", "./.eslintrc.cjs", "./*"] + "include": [ + "packages", + "tests", + "scripts", + "cypress", + "__mocks__", + "./.eslintrc.cjs", + "./*", + "demos/dev" + ] } diff --git a/vite.config.ts b/vite.config.ts index 8da356117f..87124b9bf5 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,7 +1,7 @@ import jison from './.vite/jisonPlugin.js'; import jsonSchemaPlugin from './.vite/jsonSchemaPlugin.js'; import typescript from '@rollup/plugin-typescript'; -import { defineConfig } from 'vitest/config'; +import { defaultExclude, defineConfig } from 'vitest/config'; export default defineConfig({ resolve: { @@ -22,7 +22,7 @@ export default defineConfig({ provider: 'v8', reporter: ['text', 'json', 'html', 'lcov'], reportsDirectory: './coverage/vitest', - exclude: ['**/node_modules/**', '**/tests/**', '**/__mocks__/**'], + exclude: [...defaultExclude, './tests/**', '**/__mocks__/**', '**/generated/'], }, includeSource: ['packages/*/src/**/*.{js,ts}'], },