diff --git a/.build/common.ts b/.build/common.ts new file mode 100644 index 0000000000..f27e741e62 --- /dev/null +++ b/.build/common.ts @@ -0,0 +1,17 @@ +export 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', + }, +} as const; 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..51b1184fc3 --- /dev/null +++ b/.build/jsonSchema.ts @@ -0,0 +1,122 @@ +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', + 'requirement', + 'mindmap', + 'timeline', + 'gitGraph', + 'c4', + 'sankey', +] as const; + +/** + * Generate default values from the JSON Schema. + * + * AJV does not support nested default values yet (or default values with $ref), + * so we need to manually find them (this may be fixed in ajv v9). + * + * @param mermaidConfigSchema - The Mermaid JSON Schema to use. + * @returns The default mermaid config object. + */ +export 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/.esbuild/build.ts b/.esbuild/build.ts new file mode 100644 index 0000000000..bee13af512 --- /dev/null +++ b/.esbuild/build.ts @@ -0,0 +1,34 @@ +import { build } from 'esbuild'; +import { mkdir, writeFile } from 'node:fs/promises'; +import { getBuildConfig } from './util.js'; +import { packageOptions } from '../.build/common.js'; + +const shouldVisualize = process.argv.includes('--visualize'); + +const buildPackage = async (entryName: keyof typeof packageOptions) => { + await build(getBuildConfig({ entryName, minify: false })); + const { metafile } = await build( + getBuildConfig({ entryName, minify: true, metafile: shouldVisualize }) + ); + if (metafile) { + // Upload metafile into https://esbuild.github.io/analyze/ + await writeFile(`stats/meta-${entryName}.json`, JSON.stringify(metafile)); + } + await build(getBuildConfig({ entryName, minify: false, core: true })); + await build(getBuildConfig({ entryName, minify: true, format: 'iife' })); +}; + +const handler = (e) => { + console.error(e); + process.exit(1); +}; + +const main = async () => { + await mkdir('stats').catch(() => {}); + const packageNames = Object.keys(packageOptions) as (keyof typeof packageOptions)[]; + for (const pkg of packageNames) { + await buildPackage(pkg).catch(handler); + } +}; + +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..c93b4bbda9 --- /dev/null +++ b/.esbuild/server.ts @@ -0,0 +1,38 @@ +import express from 'express'; +import cors from 'cors'; +import { getBuildConfig } from './util.js'; +import { context } from 'esbuild'; + +async function createServer() { + const app = express(); + const mermaidCtx = await context( + getBuildConfig({ minify: false, core: false, entryName: 'mermaid' }) + ); + const mermaidIIFECtx = await context( + getBuildConfig({ minify: false, core: false, entryName: 'mermaid', format: 'iife' }) + ); + const externalCtx = await context( + getBuildConfig({ minify: false, core: false, entryName: 'mermaid-example-diagram' }) + ); + const zenuml = await context( + getBuildConfig({ minify: false, core: false, entryName: 'mermaid-zenuml' }) + ); + + mermaidCtx.watch(); + mermaidIIFECtx.watch(); + externalCtx.watch(); + zenuml.watch(); + + 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')); + 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..236e0c4d04 --- /dev/null +++ b/.esbuild/util.ts @@ -0,0 +1,77 @@ +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)); + +interface MermaidBuildOptions { + minify: boolean; + core?: boolean; + metafile?: boolean; + format?: 'esm' | 'iife'; + entryName: keyof typeof packageOptions; +} + +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, + }; +}; + +export const getBuildConfig = ({ + minify, + core, + entryName, + metafile, + format, +}: MermaidBuildOptions): BuildOptions => { + const external: string[] = ['require', 'fs', 'path']; + const { name, file, packageName } = packageOptions[entryName]; + let output: BuildOptions = buildOptions({ + absWorkingDir: resolve(__dirname, `../packages/${packageName}`), + entryPoints: { + [`${name}${core ? '.core' : format === 'iife' ? '' : '.esm'}${ + minify ? '.min' : '' + }`]: `src/${file}`, + }, + metafile, + }); + + 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 = 'mermaid'; + output.outExtension = { '.js': '.js' }; + } else { + output.format = 'esm'; + output.splitting = true; + output.outExtension = { '.js': '.mjs' }; + } + + return output; +}; diff --git a/.gitignore b/.gitignore index cacac3622f..f3e5a76f43 100644 --- a/.gitignore +++ b/.gitignore @@ -46,3 +46,6 @@ generated/ .pnpm-store .nyc_output + +demos/dev/** +!/demos/dev/example.html diff --git a/.vite/build.ts b/.vite/build.ts index b89df9e310..a03bdeec20 100644 --- a/.vite/build.ts +++ b/.vite/build.ts @@ -3,11 +3,11 @@ 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'; const visualize = process.argv.includes('--visualize'); const watch = process.argv.includes('--watch'); @@ -36,24 +36,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 +54,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: { @@ -146,8 +102,6 @@ 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 () => { 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 671a9612e8..2e5b5cc0b5 100644 --- a/.vite/jsonSchemaPlugin.ts +++ b/.vite/jsonSchemaPlugin.ts @@ -1,108 +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', - 'requirement', - 'mindmap', - 'timeline', - 'gitGraph', - 'c4', - 'sankey', -] as const; - -/** - * Generate default values from the JSON Schema. - * - * AJV does not support nested default values yet (or default values with $ref), - * so we need to manually find them (this may be fixed in ajv v9). - * - * @param mermaidConfigSchema - The Mermaid JSON Schema to use. - * @returns The default mermaid config object. - */ -function generateDefaults(mermaidConfigSchema: JSONSchemaType) { - const ajv = new Ajv2019({ - useDefaults: true, - allowUnionTypes: true, - strict: true, - }); - - ajv.addKeyword({ - keyword: 'meta:enum', // used by jsonschema2md - errors: false, - }); - ajv.addKeyword({ - keyword: 'tsType', // used by json-schema-to-typescript - errors: false, - }); - - // ajv currently doesn't support nested default values, see https://github.com/ajv-validator/ajv/issues/1718 - // (may be fixed in v9) so we need to manually use sub-schemas - const mermaidDefaultConfig = {}; - - assert.ok(mermaidConfigSchema.$defs); - const baseDiagramConfig = mermaidConfigSchema.$defs.BaseDiagramConfig; - - for (const key of MERMAID_CONFIG_DIAGRAM_KEYS) { - const subSchemaRef = mermaidConfigSchema.properties[key].$ref; - const [root, defs, defName] = subSchemaRef.split('/'); - assert.strictEqual(root, '#'); - assert.strictEqual(defs, '$defs'); - const subSchema = { - $schema: mermaidConfigSchema.$schema, - $defs: mermaidConfigSchema.$defs, - ...mermaidConfigSchema.$defs[defName], - } as JSONSchemaType; - - const validate = ajv.compile(subSchema); - - mermaidDefaultConfig[key] = {}; - - for (const required of subSchema.required ?? []) { - if (subSchema.properties[required] === undefined && baseDiagramConfig.properties[required]) { - mermaidDefaultConfig[key][required] = baseDiagramConfig.properties[required].default; - } - } - if (!validate(mermaidDefaultConfig[key])) { - throw new Error( - `schema for subconfig ${key} does not have valid defaults! Errors were ${JSON.stringify( - validate.errors, - undefined, - 2 - )}` - ); - } - } - - const validate = ajv.compile(mermaidConfigSchema); - - if (!validate(mermaidDefaultConfig)) { - throw new Error( - `Mermaid config JSON Schema does not have valid defaults! Errors were ${JSON.stringify( - validate.errors, - undefined, - 2 - )}` - ); - } - - return mermaidDefaultConfig; -} +import { getDefaults, getSchema, loadSchema } from '../.build/jsonSchema.js'; /** * Vite plugin that handles JSON Schemas saved as a `.schema.yaml` file. @@ -119,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/CONTRIBUTING.md b/CONTRIBUTING.md index 307bd038b6..02733ee2e9 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -26,9 +26,14 @@ Install required packages: ```bash # npx is required for first install as volta support for pnpm is not added yet. npx pnpm install -pnpm test +pnpm test # run unit tests +pnpm dev # starts a dev server ``` +Open in your browser after starting the dev server. +You can also duplicate the `example.html` file in `demos/dev`, rename it and add your own mermaid code to it. +That will be served at . + ### Docker If you are using docker and docker-compose, you have self-documented `run` bash script, which is a convenient alias for docker-compose commands: diff --git a/cSpell.json b/cSpell.json index e71cb01258..adbe44d3b1 100644 --- a/cSpell.json +++ b/cSpell.json @@ -81,6 +81,7 @@ "mdbook", "mermaidjs", "mermerd", + "metafile", "mindaugas", "mindmap", "mindmaps", 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/flowchart-v2.spec.js b/cypress/integration/rendering/flowchart-v2.spec.js index 0f4b079c9d..aac4a31b17 100644 --- a/cypress/integration/rendering/flowchart-v2.spec.js +++ b/cypress/integration/rendering/flowchart-v2.spec.js @@ -449,7 +449,7 @@ flowchart TD { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' } ); }); - it('65: text-color from classes', () => { + it('65-1: text-color from classes', () => { imgSnapshotTest( ` flowchart LR @@ -460,6 +460,31 @@ flowchart TD { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' } ); }); + it('65-2: bold text from classes', () => { + imgSnapshotTest( + ` + flowchart + classDef cat fill:#f9d5e5, stroke:#233d4d,stroke-width:2px, font-weight:bold; + CS(A long bold text to be viewed):::cat + `, + { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' } + ); + }); + it('65-3: bigger font from classes', () => { + imgSnapshotTest( + ` +flowchart + Node1:::class1 --> Node2:::class2 + Node1:::class1 --> Node3:::class2 + Node3 --> Node4((I am a circle)):::larger + + classDef class1 fill:lightblue + classDef class2 fill:pink + classDef larger font-size:30px,fill:yellow + `, + { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' } + ); + }); it('66: More nested subgraph cases (TB)', () => { imgSnapshotTest( ` 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/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/knsv2.html b/cypress/platform/knsv2.html index 13de19ba03..f9a9f3756d 100644 --- a/cypress/platform/knsv2.html +++ b/cypress/platform/knsv2.html @@ -58,12 +58,21 @@ 
----
-title: Simple flowchart with invisible edges
----
-flowchart TD
-A ~~~ B
-
+ 
+flowchart
+Node1:::class1 --> Node2:::class2
+Node1:::class1 --> Node3:::class2
+Node3 --> Node4((I am a circle)):::larger
+
+classDef class1 fill:lightblue
+classDef class2 fill:pink
+classDef larger font-size:30px,fill:yellow
+      
 stateDiagram-v2
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 @@
 
   
-