Merge branch 'next' into sidv/deprecateMermaidAPI
* next: (387 commits) build(deps-dev): bump vite from 4.4.9 to 4.4.12 Changes to .prettierignore 1. Added 'demos/dev/**' to be ignored by Prettier. 2. Added '!/demos/dev/example.html' so that Prettier ensures no one changes the example.html in a way that doesn't obey the Prettier code formatting rules. build: use `tsx` instead of `ts-node-esm` chore: Downgrade node to 18.18.2 fix: #5100 Add viewbox to sankey chore(deps): update all minor dependencies chore: Rename test test: Add unit test for generic classname and namespace fix: Check if parentCommit is provided Split type from generic class name Condition of Parent Id Without Merge Commit Added Referenced the PmWiki's Cookbook recipe enabling MermaidJs schematics in wiki pages test(e2e): fix pie chart E2E tests for PR #4288 Add dummy commit to trigger GH checks chore: Revert unnecessary export refactor: Remove unnecessary calculations chore: Fix computeWidth function chore: Cleanup setupGraphViewbox Update docs update mermaidAPI to cleanup the text before passing to getDiagramFromText ...
This commit is contained in:
commit
4fe2f31301
|
@ -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;
|
|
@ -0,0 +1,5 @@
|
||||||
|
import { generate } from 'langium-cli';
|
||||||
|
|
||||||
|
export async function generateLangium() {
|
||||||
|
await generate({ file: `./packages/parser/langium-config.json` });
|
||||||
|
}
|
|
@ -0,0 +1,123 @@
|
||||||
|
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',
|
||||||
|
] 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<MermaidConfig>) {
|
||||||
|
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<BaseDiagramConfig>;
|
||||||
|
|
||||||
|
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<MermaidConfig> => {
|
||||||
|
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<MermaidConfig>;
|
||||||
|
return jsonSchema;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const getDefaults = (schema: JSONSchemaType<MermaidConfig>) => {
|
||||||
|
return `export default ${JSON.stringify(generateDefaults(schema), undefined, 2)};`;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const getSchema = (schema: JSONSchemaType<MermaidConfig>) => {
|
||||||
|
return `export default ${JSON.stringify(schema, undefined, 2)};`;
|
||||||
|
};
|
|
@ -0,0 +1,9 @@
|
||||||
|
declare module 'langium-cli' {
|
||||||
|
export interface GenerateOptions {
|
||||||
|
file?: string;
|
||||||
|
mode?: 'development' | 'production';
|
||||||
|
watch?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function generate(options: GenerateOptions): Promise<boolean>;
|
||||||
|
}
|
|
@ -0,0 +1,16 @@
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
for (const { packageName } of Object.values(packageOptions)) {
|
||||||
|
buildType(packageName);
|
||||||
|
}
|
|
@ -0,0 +1,65 @@
|
||||||
|
import { build } from 'esbuild';
|
||||||
|
import { mkdir, writeFile } from 'node:fs/promises';
|
||||||
|
import { MermaidBuildOptions, defaultOptions, getBuildConfig } from './util.js';
|
||||||
|
import { packageOptions } from '../.build/common.js';
|
||||||
|
import { generateLangium } from '../.build/generateLangium.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 dependecy
|
||||||
|
for (const pkg of packageNames) {
|
||||||
|
await buildPackage(pkg).catch(handler);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
void main();
|
|
@ -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: [] };
|
||||||
|
});
|
||||||
|
},
|
||||||
|
};
|
|
@ -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<MermaidConfig> | 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<MermaidConfig> =
|
||||||
|
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;
|
|
@ -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();
|
|
@ -0,0 +1,98 @@
|
||||||
|
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<MermaidBuildOptions, 'entryName'> = {
|
||||||
|
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]`,
|
||||||
|
});
|
||||||
|
|
||||||
|
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;
|
||||||
|
};
|
|
@ -6,3 +6,6 @@ cypress/plugins/index.js
|
||||||
coverage
|
coverage
|
||||||
*.json
|
*.json
|
||||||
node_modules
|
node_modules
|
||||||
|
|
||||||
|
# autogenereated by langium-cli
|
||||||
|
generated/
|
||||||
|
|
|
@ -49,8 +49,10 @@ module.exports = {
|
||||||
'no-unused-vars': 'off',
|
'no-unused-vars': 'off',
|
||||||
'cypress/no-async-tests': 'off',
|
'cypress/no-async-tests': 'off',
|
||||||
'@typescript-eslint/consistent-type-imports': 'error',
|
'@typescript-eslint/consistent-type-imports': 'error',
|
||||||
|
'@typescript-eslint/no-explicit-any': 'warn',
|
||||||
'@typescript-eslint/no-floating-promises': 'error',
|
'@typescript-eslint/no-floating-promises': 'error',
|
||||||
'@typescript-eslint/no-misused-promises': 'error',
|
'@typescript-eslint/no-misused-promises': 'error',
|
||||||
|
'@typescript-eslint/no-unused-vars': 'warn',
|
||||||
'@typescript-eslint/ban-ts-comment': [
|
'@typescript-eslint/ban-ts-comment': [
|
||||||
'error',
|
'error',
|
||||||
{
|
{
|
||||||
|
|
|
@ -17,6 +17,9 @@ body:
|
||||||
- Use a clear and concise title
|
- Use a clear and concise title
|
||||||
- Fill out the text fields with as much detail as possible.
|
- Fill out the text fields with as much detail as possible.
|
||||||
- Never be shy to give us screenshots and/or code samples. It will help!
|
- Never be shy to give us screenshots and/or code samples. It will help!
|
||||||
|
|
||||||
|
There is a chance that the bug is already fixed in the git `develop` branch, but is not released yet.
|
||||||
|
So please check in [Live Editor - Develop](https://develop.git.mermaid.live) before raising an issue.
|
||||||
- type: textarea
|
- type: textarea
|
||||||
attributes:
|
attributes:
|
||||||
label: Description
|
label: Description
|
||||||
|
@ -43,7 +46,7 @@ body:
|
||||||
attributes:
|
attributes:
|
||||||
label: Code Sample
|
label: Code Sample
|
||||||
description: |-
|
description: |-
|
||||||
If applicable, add the code sample or a link to the [Live Editor](https://mermaid.live).
|
If applicable, add the code sample or a link to the [Live Editor - Develop](https://develop.git.mermaid.live).
|
||||||
Any text pasted here will be rendered as a Code block.
|
Any text pasted here will be rendered as a Code block.
|
||||||
render: text
|
render: text
|
||||||
- type: textarea
|
- type: textarea
|
||||||
|
|
|
@ -7,8 +7,14 @@ contact_links:
|
||||||
url: https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE
|
url: https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE
|
||||||
about: Join our Community on Slack for Help and a casual chat.
|
about: Join our Community on Slack for Help and a casual chat.
|
||||||
- name: Documentation
|
- name: Documentation
|
||||||
url: https://mermaid-js.github.io
|
url: https://mermaid.js.org
|
||||||
about: Read our documentation for all that Mermaid.js can offer.
|
about: Read our documentation for all that Mermaid.js can offer.
|
||||||
- name: Live Editor
|
- name: Live Editor
|
||||||
url: https://mermaid.live
|
url: https://mermaid.live
|
||||||
about: Try the live editor to preview graphs in no time.
|
about: Try the live editor to preview graphs in no time.
|
||||||
|
- name: Live Editor - Develop
|
||||||
|
url: https://develop.git.mermaid.live
|
||||||
|
about: Try unreleased changes in the develop branch.
|
||||||
|
- name: Live Editor - Next
|
||||||
|
url: https://next.git.mermaid.live
|
||||||
|
about: Try unreleased changes in the next branch.
|
||||||
|
|
|
@ -15,3 +15,4 @@ coverage:
|
||||||
# Turing off for now as code coverage isn't stable and causes unnecessary build failures.
|
# Turing off for now as code coverage isn't stable and causes unnecessary build failures.
|
||||||
# default:
|
# default:
|
||||||
# threshold: 2%
|
# threshold: 2%
|
||||||
|
patch: off
|
||||||
|
|
|
@ -1,4 +1,22 @@
|
||||||
'Type: Bug / Error': ['bug/*', fix/*]
|
# yaml-language-server: $schema=https://raw.githubusercontent.com/release-drafter/release-drafter/master/schema.json
|
||||||
'Type: Enhancement': ['feature/*', 'feat/*']
|
autolabeler:
|
||||||
'Type: Other': ['other/*', 'chore/*', 'test/*', 'refactor/*']
|
- label: 'Type: Bug / Error'
|
||||||
'Area: Documentation': ['docs/*']
|
branch:
|
||||||
|
- '/bug\/.+/'
|
||||||
|
- '/fix\/.+/'
|
||||||
|
- label: 'Type: Enhancement'
|
||||||
|
branch:
|
||||||
|
- '/feature\/.+/'
|
||||||
|
- '/feat\/.+/'
|
||||||
|
- label: 'Type: Other'
|
||||||
|
branch:
|
||||||
|
- '/other\/.+/'
|
||||||
|
- '/chore\/.+/'
|
||||||
|
- '/test\/.+/'
|
||||||
|
- '/refactor\/.+/'
|
||||||
|
- label: 'Area: Documentation'
|
||||||
|
branch:
|
||||||
|
- '/docs\/.+/'
|
||||||
|
|
||||||
|
template: |
|
||||||
|
This field is unused, as we only use this config file for labeling PRs.
|
||||||
|
|
|
@ -25,8 +25,6 @@ categories:
|
||||||
change-template: '- $TITLE (#$NUMBER) @$AUTHOR'
|
change-template: '- $TITLE (#$NUMBER) @$AUTHOR'
|
||||||
sort-by: title
|
sort-by: title
|
||||||
sort-direction: ascending
|
sort-direction: ascending
|
||||||
branches:
|
|
||||||
- develop
|
|
||||||
exclude-labels:
|
exclude-labels:
|
||||||
- 'Skip changelog'
|
- 'Skip changelog'
|
||||||
no-changes-template: 'This release contains minor changes and bugfixes.'
|
no-changes-template: 'This release contains minor changes and bugfixes.'
|
||||||
|
|
|
@ -16,12 +16,12 @@ jobs:
|
||||||
runs-on: ubuntu-latest
|
runs-on: ubuntu-latest
|
||||||
steps:
|
steps:
|
||||||
- name: Checkout
|
- name: Checkout
|
||||||
uses: actions/checkout@v3
|
uses: actions/checkout@v4
|
||||||
|
|
||||||
- uses: pnpm/action-setup@v2
|
- uses: pnpm/action-setup@v2
|
||||||
|
|
||||||
- name: Setup Node.js
|
- name: Setup Node.js
|
||||||
uses: actions/setup-node@v3
|
uses: actions/setup-node@v4
|
||||||
with:
|
with:
|
||||||
cache: pnpm
|
cache: pnpm
|
||||||
node-version: 18
|
node-version: 18
|
||||||
|
@ -29,7 +29,7 @@ jobs:
|
||||||
- name: Install Packages
|
- name: Install Packages
|
||||||
run: pnpm install --frozen-lockfile
|
run: pnpm install --frozen-lockfile
|
||||||
|
|
||||||
- name: Verify release verion
|
- name: Verify release version
|
||||||
if: ${{ github.event_name == 'push' && (github.ref == 'refs/heads/master' || startsWith(github.ref, 'refs/heads/release')) }}
|
if: ${{ github.event_name == 'push' && (github.ref == 'refs/heads/master' || startsWith(github.ref, 'refs/heads/release')) }}
|
||||||
run: pnpm --filter mermaid run docs:verify-version
|
run: pnpm --filter mermaid run docs:verify-version
|
||||||
|
|
||||||
|
|
|
@ -19,13 +19,13 @@ jobs:
|
||||||
matrix:
|
matrix:
|
||||||
node-version: [18.x]
|
node-version: [18.x]
|
||||||
steps:
|
steps:
|
||||||
- uses: actions/checkout@v3
|
- uses: actions/checkout@v4
|
||||||
|
|
||||||
- uses: pnpm/action-setup@v2
|
- uses: pnpm/action-setup@v2
|
||||||
# uses version from "packageManager" field in package.json
|
# uses version from "packageManager" field in package.json
|
||||||
|
|
||||||
- name: Setup Node.js ${{ matrix.node-version }}
|
- name: Setup Node.js ${{ matrix.node-version }}
|
||||||
uses: actions/setup-node@v3
|
uses: actions/setup-node@v4
|
||||||
with:
|
with:
|
||||||
cache: pnpm
|
cache: pnpm
|
||||||
node-version: ${{ matrix.node-version }}
|
node-version: ${{ matrix.node-version }}
|
||||||
|
|
|
@ -18,7 +18,7 @@ jobs:
|
||||||
runs-on: ubuntu-latest
|
runs-on: ubuntu-latest
|
||||||
steps:
|
steps:
|
||||||
- name: Checkout repository
|
- name: Checkout repository
|
||||||
uses: actions/checkout@v3
|
uses: actions/checkout@v4
|
||||||
|
|
||||||
- name: Check for difference in README.md and docs/README.md
|
- name: Check for difference in README.md and docs/README.md
|
||||||
run: |
|
run: |
|
||||||
|
|
|
@ -15,7 +15,7 @@ jobs:
|
||||||
name: check tests
|
name: check tests
|
||||||
if: github.repository_owner == 'mermaid-js'
|
if: github.repository_owner == 'mermaid-js'
|
||||||
steps:
|
steps:
|
||||||
- uses: actions/checkout@v3
|
- uses: actions/checkout@v4
|
||||||
with:
|
with:
|
||||||
fetch-depth: 0
|
fetch-depth: 0
|
||||||
- uses: testomatio/check-tests@stable
|
- uses: testomatio/check-tests@stable
|
||||||
|
|
|
@ -29,7 +29,7 @@ jobs:
|
||||||
|
|
||||||
steps:
|
steps:
|
||||||
- name: Checkout repository
|
- name: Checkout repository
|
||||||
uses: actions/checkout@v3
|
uses: actions/checkout@v4
|
||||||
|
|
||||||
# Initializes the CodeQL tools for scanning.
|
# Initializes the CodeQL tools for scanning.
|
||||||
- name: Initialize CodeQL
|
- name: Initialize CodeQL
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
# Dependency Review Action
|
# Dependency Review Action
|
||||||
#
|
#
|
||||||
# This Action will scan dependency manifest files that change as part of a Pull Reqest, surfacing known-vulnerable versions of the packages declared or updated in the PR. Once installed, if the workflow run is marked as required, PRs introducing known-vulnerable packages will be blocked from merging.
|
# This Action will scan dependency manifest files that change as part of a Pull Request, surfacing known-vulnerable versions of the packages declared or updated in the PR. Once installed, if the workflow run is marked as required, PRs introducing known-vulnerable packages will be blocked from merging.
|
||||||
#
|
#
|
||||||
# Source repository: https://github.com/actions/dependency-review-action
|
# Source repository: https://github.com/actions/dependency-review-action
|
||||||
# Public documentation: https://docs.github.com/en/code-security/supply-chain-security/understanding-your-software-supply-chain/about-dependency-review#dependency-review-enforcement
|
# Public documentation: https://docs.github.com/en/code-security/supply-chain-security/understanding-your-software-supply-chain/about-dependency-review#dependency-review-enforcement
|
||||||
|
@ -15,6 +15,6 @@ jobs:
|
||||||
runs-on: ubuntu-latest
|
runs-on: ubuntu-latest
|
||||||
steps:
|
steps:
|
||||||
- name: 'Checkout Repository'
|
- name: 'Checkout Repository'
|
||||||
uses: actions/checkout@v3
|
uses: actions/checkout@v4
|
||||||
- name: 'Dependency Review'
|
- name: 'Dependency Review'
|
||||||
uses: actions/dependency-review-action@v3
|
uses: actions/dependency-review-action@v3
|
||||||
|
|
|
@ -30,13 +30,13 @@ jobs:
|
||||||
run: |
|
run: |
|
||||||
echo "::error,title=Not using Applitols::APPLITOOLS_API_KEY is empty, disabling Applitools for this run."
|
echo "::error,title=Not using Applitols::APPLITOOLS_API_KEY is empty, disabling Applitools for this run."
|
||||||
|
|
||||||
- uses: actions/checkout@v3
|
- uses: actions/checkout@v4
|
||||||
|
|
||||||
- uses: pnpm/action-setup@v2
|
- uses: pnpm/action-setup@v2
|
||||||
# uses version from "packageManager" field in package.json
|
# uses version from "packageManager" field in package.json
|
||||||
|
|
||||||
- name: Setup Node.js ${{ matrix.node-version }}
|
- name: Setup Node.js ${{ matrix.node-version }}
|
||||||
uses: actions/setup-node@v3
|
uses: actions/setup-node@v4
|
||||||
with:
|
with:
|
||||||
node-version: ${{ matrix.node-version }}
|
node-version: ${{ matrix.node-version }}
|
||||||
|
|
||||||
|
|
|
@ -17,13 +17,13 @@ jobs:
|
||||||
node-version: [18.x]
|
node-version: [18.x]
|
||||||
containers: [1, 2, 3, 4]
|
containers: [1, 2, 3, 4]
|
||||||
steps:
|
steps:
|
||||||
- uses: actions/checkout@v3
|
- uses: actions/checkout@v4
|
||||||
|
|
||||||
- uses: pnpm/action-setup@v2
|
- uses: pnpm/action-setup@v2
|
||||||
# uses version from "packageManager" field in package.json
|
# uses version from "packageManager" field in package.json
|
||||||
|
|
||||||
- name: Setup Node.js ${{ matrix.node-version }}
|
- name: Setup Node.js ${{ matrix.node-version }}
|
||||||
uses: actions/setup-node@v3
|
uses: actions/setup-node@v4
|
||||||
with:
|
with:
|
||||||
node-version: ${{ matrix.node-version }}
|
node-version: ${{ matrix.node-version }}
|
||||||
|
|
||||||
|
|
|
@ -26,7 +26,7 @@ jobs:
|
||||||
# lychee only uses the GITHUB_TOKEN to avoid rate-limiting
|
# lychee only uses the GITHUB_TOKEN to avoid rate-limiting
|
||||||
contents: read
|
contents: read
|
||||||
steps:
|
steps:
|
||||||
- uses: actions/checkout@v3
|
- uses: actions/checkout@v4
|
||||||
|
|
||||||
- name: Restore lychee cache
|
- name: Restore lychee cache
|
||||||
uses: actions/cache@v3
|
uses: actions/cache@v3
|
||||||
|
|
|
@ -20,13 +20,13 @@ jobs:
|
||||||
matrix:
|
matrix:
|
||||||
node-version: [18.x]
|
node-version: [18.x]
|
||||||
steps:
|
steps:
|
||||||
- uses: actions/checkout@v3
|
- uses: actions/checkout@v4
|
||||||
|
|
||||||
- uses: pnpm/action-setup@v2
|
- uses: pnpm/action-setup@v2
|
||||||
# uses version from "packageManager" field in package.json
|
# uses version from "packageManager" field in package.json
|
||||||
|
|
||||||
- name: Setup Node.js ${{ matrix.node-version }}
|
- name: Setup Node.js ${{ matrix.node-version }}
|
||||||
uses: actions/setup-node@v3
|
uses: actions/setup-node@v4
|
||||||
with:
|
with:
|
||||||
cache: pnpm
|
cache: pnpm
|
||||||
node-version: ${{ matrix.node-version }}
|
node-version: ${{ matrix.node-version }}
|
||||||
|
|
|
@ -1,23 +0,0 @@
|
||||||
name: Validate PR Labeler Configuration
|
|
||||||
on:
|
|
||||||
push:
|
|
||||||
paths:
|
|
||||||
- .github/workflows/pr-labeler-config-validator.yml
|
|
||||||
- .github/workflows/pr-labeler.yml
|
|
||||||
- .github/pr-labeler.yml
|
|
||||||
pull_request:
|
|
||||||
paths:
|
|
||||||
- .github/workflows/pr-labeler-config-validator.yml
|
|
||||||
- .github/workflows/pr-labeler.yml
|
|
||||||
- .github/pr-labeler.yml
|
|
||||||
|
|
||||||
jobs:
|
|
||||||
pr-labeler:
|
|
||||||
runs-on: ubuntu-latest
|
|
||||||
steps:
|
|
||||||
- name: Checkout Repository
|
|
||||||
uses: actions/checkout@v3
|
|
||||||
- name: Validate Configuration
|
|
||||||
uses: Yash-Singh1/pr-labeler-config-validator@releases/v0.0.3
|
|
||||||
with:
|
|
||||||
configuration-path: .github/pr-labeler.yml
|
|
|
@ -1,13 +1,31 @@
|
||||||
name: Apply labels to PR
|
name: Apply labels to PR
|
||||||
on:
|
on:
|
||||||
pull_request_target:
|
pull_request_target:
|
||||||
types: [opened]
|
# required for pr-labeler to support PRs from forks
|
||||||
|
# ===================== ⛔ ☢️ 🚫 ⚠️ Warning ⚠️ 🚫 ☢️ ⛔ =======================
|
||||||
|
# Be very careful what you put in this GitHub Action workflow file to avoid
|
||||||
|
# malicious PRs from getting access to the Mermaid-js repo.
|
||||||
|
#
|
||||||
|
# Please read the following first before reviewing/merging:
|
||||||
|
# - https://docs.github.com/en/actions/using-workflows/events-that-trigger-workflows#pull_request_target
|
||||||
|
# - https://securitylab.github.com/research/github-actions-preventing-pwn-requests/
|
||||||
|
types: [opened, reopened, synchronize]
|
||||||
|
|
||||||
|
permissions:
|
||||||
|
contents: read
|
||||||
|
|
||||||
jobs:
|
jobs:
|
||||||
pr-labeler:
|
pr-labeler:
|
||||||
runs-on: ubuntu-latest
|
runs-on: ubuntu-latest
|
||||||
|
permissions:
|
||||||
|
contents: read # read permission is required to read config file
|
||||||
|
pull-requests: write # write permission is required to label PRs
|
||||||
steps:
|
steps:
|
||||||
- name: Label PR
|
- name: Label PR
|
||||||
uses: TimonVS/pr-labeler-action@v4
|
uses: release-drafter/release-drafter@v5
|
||||||
|
with:
|
||||||
|
config-name: pr-labeler.yml
|
||||||
|
disable-autolabeler: false
|
||||||
|
disable-releaser: true
|
||||||
env:
|
env:
|
||||||
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
||||||
|
|
|
@ -23,12 +23,12 @@ jobs:
|
||||||
runs-on: ubuntu-latest
|
runs-on: ubuntu-latest
|
||||||
steps:
|
steps:
|
||||||
- name: Checkout
|
- name: Checkout
|
||||||
uses: actions/checkout@v3
|
uses: actions/checkout@v4
|
||||||
|
|
||||||
- uses: pnpm/action-setup@v2
|
- uses: pnpm/action-setup@v2
|
||||||
|
|
||||||
- name: Setup Node.js
|
- name: Setup Node.js
|
||||||
uses: actions/setup-node@v3
|
uses: actions/setup-node@v4
|
||||||
with:
|
with:
|
||||||
cache: pnpm
|
cache: pnpm
|
||||||
node-version: 18
|
node-version: 18
|
||||||
|
|
|
@ -5,11 +5,19 @@ on:
|
||||||
branches:
|
branches:
|
||||||
- develop
|
- develop
|
||||||
|
|
||||||
|
permissions:
|
||||||
|
contents: read
|
||||||
|
|
||||||
jobs:
|
jobs:
|
||||||
draft-release:
|
draft-release:
|
||||||
runs-on: ubuntu-latest
|
runs-on: ubuntu-latest
|
||||||
|
permissions:
|
||||||
|
contents: write # write permission is required to create a github release
|
||||||
|
pull-requests: read # required to read PR titles/labels
|
||||||
steps:
|
steps:
|
||||||
- name: Draft Release
|
- name: Draft Release
|
||||||
uses: toolmantim/release-drafter@v5
|
uses: release-drafter/release-drafter@v5
|
||||||
|
with:
|
||||||
|
disable-autolabeler: true
|
||||||
env:
|
env:
|
||||||
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
||||||
|
|
|
@ -9,14 +9,14 @@ jobs:
|
||||||
publish-preview:
|
publish-preview:
|
||||||
runs-on: ubuntu-latest
|
runs-on: ubuntu-latest
|
||||||
steps:
|
steps:
|
||||||
- uses: actions/checkout@v3
|
- uses: actions/checkout@v4
|
||||||
with:
|
with:
|
||||||
fetch-depth: 0
|
fetch-depth: 0
|
||||||
|
|
||||||
- uses: pnpm/action-setup@v2
|
- uses: pnpm/action-setup@v2
|
||||||
|
|
||||||
- name: Setup Node.js
|
- name: Setup Node.js
|
||||||
uses: actions/setup-node@v3
|
uses: actions/setup-node@v4
|
||||||
with:
|
with:
|
||||||
cache: pnpm
|
cache: pnpm
|
||||||
node-version: 18.x
|
node-version: 18.x
|
||||||
|
|
|
@ -8,14 +8,14 @@ jobs:
|
||||||
publish:
|
publish:
|
||||||
runs-on: ubuntu-latest
|
runs-on: ubuntu-latest
|
||||||
steps:
|
steps:
|
||||||
- uses: actions/checkout@v3
|
- uses: actions/checkout@v4
|
||||||
- uses: fregante/setup-git-user@v2
|
- uses: fregante/setup-git-user@v2
|
||||||
|
|
||||||
- uses: pnpm/action-setup@v2
|
- uses: pnpm/action-setup@v2
|
||||||
# uses version from "packageManager" field in package.json
|
# uses version from "packageManager" field in package.json
|
||||||
|
|
||||||
- name: Setup Node.js v18
|
- name: Setup Node.js v18
|
||||||
uses: actions/setup-node@v3
|
uses: actions/setup-node@v4
|
||||||
with:
|
with:
|
||||||
cache: pnpm
|
cache: pnpm
|
||||||
node-version: 18.x
|
node-version: 18.x
|
||||||
|
|
|
@ -12,13 +12,13 @@ jobs:
|
||||||
matrix:
|
matrix:
|
||||||
node-version: [18.x]
|
node-version: [18.x]
|
||||||
steps:
|
steps:
|
||||||
- uses: actions/checkout@v3
|
- uses: actions/checkout@v4
|
||||||
|
|
||||||
- uses: pnpm/action-setup@v2
|
- uses: pnpm/action-setup@v2
|
||||||
# uses version from "packageManager" field in package.json
|
# uses version from "packageManager" field in package.json
|
||||||
|
|
||||||
- name: Setup Node.js ${{ matrix.node-version }}
|
- name: Setup Node.js ${{ matrix.node-version }}
|
||||||
uses: actions/setup-node@v3
|
uses: actions/setup-node@v4
|
||||||
with:
|
with:
|
||||||
cache: pnpm
|
cache: pnpm
|
||||||
node-version: ${{ matrix.node-version }}
|
node-version: ${{ matrix.node-version }}
|
||||||
|
|
|
@ -8,7 +8,7 @@ jobs:
|
||||||
update-browser-list:
|
update-browser-list:
|
||||||
runs-on: ubuntu-latest
|
runs-on: ubuntu-latest
|
||||||
steps:
|
steps:
|
||||||
- uses: actions/checkout@v3
|
- uses: actions/checkout@v4
|
||||||
- run: npx browserslist@latest --update-db
|
- run: npx browserslist@latest --update-db
|
||||||
- name: Commit changes
|
- name: Commit changes
|
||||||
uses: EndBug/add-and-commit@v9
|
uses: EndBug/add-and-commit@v9
|
||||||
|
|
|
@ -46,3 +46,7 @@ stats/
|
||||||
|
|
||||||
demos/dev/**
|
demos/dev/**
|
||||||
!/demos/dev/example.html
|
!/demos/dev/example.html
|
||||||
|
!/demos/dev/reload.js
|
||||||
|
|
||||||
|
# autogenereated by langium-cli
|
||||||
|
generated/
|
||||||
|
|
|
@ -6,6 +6,6 @@ export default {
|
||||||
// https://prettier.io/docs/en/cli.html#--cache
|
// https://prettier.io/docs/en/cli.html#--cache
|
||||||
'prettier --write',
|
'prettier --write',
|
||||||
],
|
],
|
||||||
'cSpell.json': ['ts-node-esm scripts/fixCSpell.ts'],
|
'cSpell.json': ['tsx scripts/fixCSpell.ts'],
|
||||||
'**/*.jison': ['pnpm -w run lint:jison'],
|
'**/*.jison': ['pnpm -w run lint:jison'],
|
||||||
};
|
};
|
||||||
|
|
|
@ -10,3 +10,8 @@ stats
|
||||||
.nyc_output
|
.nyc_output
|
||||||
# Autogenerated by `pnpm run --filter mermaid types:build-config`
|
# Autogenerated by `pnpm run --filter mermaid types:build-config`
|
||||||
packages/mermaid/src/config.type.ts
|
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
|
||||||
|
|
|
@ -3,11 +3,12 @@ import { resolve } from 'path';
|
||||||
import { fileURLToPath } from 'url';
|
import { fileURLToPath } from 'url';
|
||||||
import jisonPlugin from './jisonPlugin.js';
|
import jisonPlugin from './jisonPlugin.js';
|
||||||
import jsonSchemaPlugin from './jsonSchemaPlugin.js';
|
import jsonSchemaPlugin from './jsonSchemaPlugin.js';
|
||||||
import { readFileSync } from 'fs';
|
|
||||||
import typescript from '@rollup/plugin-typescript';
|
import typescript from '@rollup/plugin-typescript';
|
||||||
import { visualizer } from 'rollup-plugin-visualizer';
|
import { visualizer } from 'rollup-plugin-visualizer';
|
||||||
import type { TemplateType } from 'rollup-plugin-visualizer/dist/plugin/template-types.js';
|
import type { TemplateType } from 'rollup-plugin-visualizer/dist/plugin/template-types.js';
|
||||||
import istanbul from 'vite-plugin-istanbul';
|
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 visualize = process.argv.includes('--visualize');
|
||||||
const watch = process.argv.includes('--watch');
|
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 {
|
interface BuildOptions {
|
||||||
minify: boolean | 'esbuild';
|
minify: boolean | 'esbuild';
|
||||||
core?: boolean;
|
core?: boolean;
|
||||||
|
@ -72,34 +55,8 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions)
|
||||||
sourcemap,
|
sourcemap,
|
||||||
entryFileNames: `${name}.esm${minify ? '.min' : ''}.mjs`,
|
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 = {
|
const config: InlineConfig = {
|
||||||
configFile: false,
|
configFile: false,
|
||||||
build: {
|
build: {
|
||||||
|
@ -117,6 +74,9 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions)
|
||||||
output,
|
output,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
define: {
|
||||||
|
'import.meta.vitest': 'undefined',
|
||||||
|
},
|
||||||
resolve: {
|
resolve: {
|
||||||
extensions: [],
|
extensions: [],
|
||||||
},
|
},
|
||||||
|
@ -126,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
|
// @ts-expect-error According to the type definitions, rollup plugins are incompatible with vite
|
||||||
typescript({ compilerOptions: { declaration: false } }),
|
typescript({ compilerOptions: { declaration: false } }),
|
||||||
istanbul({
|
istanbul({
|
||||||
exclude: ['node_modules', 'test/', '__mocks__'],
|
exclude: ['node_modules', 'test/', '__mocks__', 'generated'],
|
||||||
extension: ['.js', '.ts'],
|
extension: ['.js', '.ts'],
|
||||||
requireEnv: true,
|
requireEnv: true,
|
||||||
forceBuildInstrument: coverage,
|
forceBuildInstrument: coverage,
|
||||||
|
@ -146,24 +106,28 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions)
|
||||||
|
|
||||||
const buildPackage = async (entryName: keyof typeof packageOptions) => {
|
const buildPackage = async (entryName: keyof typeof packageOptions) => {
|
||||||
await build(getBuildConfig({ minify: false, entryName }));
|
await build(getBuildConfig({ minify: false, entryName }));
|
||||||
await build(getBuildConfig({ minify: 'esbuild', entryName }));
|
|
||||||
await build(getBuildConfig({ minify: false, core: true, entryName }));
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const main = async () => {
|
const main = async () => {
|
||||||
const packageNames = Object.keys(packageOptions) as (keyof typeof packageOptions)[];
|
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 buildPackage(pkg);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
await generateLangium();
|
||||||
|
|
||||||
if (watch) {
|
if (watch) {
|
||||||
|
await build(getBuildConfig({ minify: false, watch, core: false, entryName: 'parser' }));
|
||||||
build(getBuildConfig({ minify: false, watch, core: false, entryName: 'mermaid' }));
|
build(getBuildConfig({ minify: false, watch, core: false, entryName: 'mermaid' }));
|
||||||
if (!mermaidOnly) {
|
if (!mermaidOnly) {
|
||||||
build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-example-diagram' }));
|
build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-example-diagram' }));
|
||||||
build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-zenuml' }));
|
build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-zenuml' }));
|
||||||
}
|
}
|
||||||
} else if (visualize) {
|
} 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: true, entryName: 'mermaid' }));
|
||||||
await build(getBuildConfig({ minify: false, core: false, entryName: 'mermaid' }));
|
await build(getBuildConfig({ minify: false, core: false, entryName: 'mermaid' }));
|
||||||
} else {
|
} else {
|
||||||
|
|
|
@ -1,10 +1,10 @@
|
||||||
import { transformJison } from './jisonTransformer.js';
|
import { transformJison } from '../.build/jisonTransformer.js';
|
||||||
|
|
||||||
const fileRegex = /\.(jison)$/;
|
const fileRegex = /\.(jison)$/;
|
||||||
|
|
||||||
export default function jison() {
|
export default function jison() {
|
||||||
return {
|
return {
|
||||||
name: 'jison',
|
name: 'jison',
|
||||||
|
|
||||||
transform(src: string, id: string) {
|
transform(src: string, id: string) {
|
||||||
if (fileRegex.test(id)) {
|
if (fileRegex.test(id)) {
|
||||||
return {
|
return {
|
||||||
|
|
|
@ -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 { PluginOption } from 'vite';
|
||||||
|
import { getDefaults, getSchema, loadSchema } from '../.build/jsonSchema.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.
|
|
||||||
*/
|
|
||||||
function generateDefaults(mermaidConfigSchema: JSONSchemaType<MermaidConfig>) {
|
|
||||||
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<BaseDiagramConfig>;
|
|
||||||
|
|
||||||
const validate = ajv.compile(subSchema);
|
|
||||||
|
|
||||||
mermaidDefaultConfig[key] = {};
|
|
||||||
|
|
||||||
for (const required of subSchema.required ?? []) {
|
|
||||||
if (subSchema.properties[required] === undefined && baseDiagramConfig.properties[required]) {
|
|
||||||
mermaidDefaultConfig[key][required] = baseDiagramConfig.properties[required].default;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (!validate(mermaidDefaultConfig[key])) {
|
|
||||||
throw new Error(
|
|
||||||
`schema for subconfig ${key} does not have valid defaults! Errors were ${JSON.stringify(
|
|
||||||
validate.errors,
|
|
||||||
undefined,
|
|
||||||
2
|
|
||||||
)}`
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const validate = ajv.compile(mermaidConfigSchema);
|
|
||||||
|
|
||||||
if (!validate(mermaidDefaultConfig)) {
|
|
||||||
throw new Error(
|
|
||||||
`Mermaid config JSON Schema does not have valid defaults! Errors were ${JSON.stringify(
|
|
||||||
validate.errors,
|
|
||||||
undefined,
|
|
||||||
2
|
|
||||||
)}`
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return mermaidDefaultConfig;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Vite plugin that handles JSON Schemas saved as a `.schema.yaml` file.
|
* Vite plugin that handles JSON Schemas saved as a `.schema.yaml` file.
|
||||||
|
@ -119,32 +16,13 @@ export default function jsonSchemaPlugin(): PluginOption {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (idAsUrl.searchParams.get('only-defaults')) {
|
const jsonSchema = loadSchema(src, idAsUrl.pathname);
|
||||||
const jsonSchema = load(src, {
|
return {
|
||||||
filename: idAsUrl.pathname,
|
code: idAsUrl.searchParams.get('only-defaults')
|
||||||
// only allow JSON types in our YAML doc (will probably be default in YAML 1.3)
|
? getDefaults(jsonSchema)
|
||||||
// e.g. `true` will be parsed a boolean `true`, `True` will be parsed as string `"True"`.
|
: getSchema(jsonSchema),
|
||||||
schema: JSON_SCHEMA,
|
map: null, // no source map
|
||||||
}) as JSONSchemaType<MermaidConfig>;
|
};
|
||||||
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
|
|
||||||
};
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,6 +1,7 @@
|
||||||
import express from 'express';
|
import express from 'express';
|
||||||
import cors from 'cors';
|
import cors from 'cors';
|
||||||
import { createServer as createViteServer } from 'vite';
|
import { createServer as createViteServer } from 'vite';
|
||||||
|
import { packageOptions } from '../.build/common.js';
|
||||||
|
|
||||||
async function createServer() {
|
async function createServer() {
|
||||||
const app = express();
|
const app = express();
|
||||||
|
@ -14,9 +15,9 @@ async function createServer() {
|
||||||
});
|
});
|
||||||
|
|
||||||
app.use(cors());
|
app.use(cors());
|
||||||
app.use(express.static('./packages/mermaid/dist'));
|
for (const { packageName } of Object.values(packageOptions)) {
|
||||||
app.use(express.static('./packages/mermaid-zenuml/dist'));
|
app.use(express.static(`./packages/${packageName}/dist`));
|
||||||
app.use(express.static('./packages/mermaid-example-diagram/dist'));
|
}
|
||||||
app.use(vite.middlewares);
|
app.use(vite.middlewares);
|
||||||
app.use(express.static('demos'));
|
app.use(express.static('demos'));
|
||||||
app.use(express.static('cypress/platform'));
|
app.use(express.static('cypress/platform'));
|
||||||
|
|
|
@ -18,7 +18,8 @@
|
||||||
"type": "node",
|
"type": "node",
|
||||||
"request": "launch",
|
"request": "launch",
|
||||||
"args": ["scripts/docs.cli.mts"],
|
"args": ["scripts/docs.cli.mts"],
|
||||||
"runtimeArgs": ["--loader", "ts-node/esm"],
|
// we'll need to change this to --import in Node.JS v20.6.0 and up
|
||||||
|
"runtimeArgs": ["--loader", "tsx/esm"],
|
||||||
"cwd": "${workspaceRoot}/packages/mermaid",
|
"cwd": "${workspaceRoot}/packages/mermaid",
|
||||||
"skipFiles": ["<node_internals>/**", "**/node_modules/**"],
|
"skipFiles": ["<node_internals>/**", "**/node_modules/**"],
|
||||||
"smartStep": true,
|
"smartStep": true,
|
||||||
|
|
14
CHANGELOG.md
14
CHANGELOG.md
|
@ -68,7 +68,7 @@ try {
|
||||||
|
|
||||||
### Init deprecated and InitThrowsErrors removed
|
### Init deprecated and InitThrowsErrors removed
|
||||||
|
|
||||||
The config passed to `init` was not being used eariler.
|
The config passed to `init` was not being used earlier.
|
||||||
It will now be used.
|
It will now be used.
|
||||||
The `init` function is deprecated and will be removed in the next major release.
|
The `init` function is deprecated and will be removed in the next major release.
|
||||||
init currently works as a wrapper to `initialize` and `run`.
|
init currently works as a wrapper to `initialize` and `run`.
|
||||||
|
@ -195,7 +195,7 @@ mermaid.run({
|
||||||
- "Cannot activate" in sequenceDiagram [\#647](https://github.com/knsv/mermaid/issues/647)
|
- "Cannot activate" in sequenceDiagram [\#647](https://github.com/knsv/mermaid/issues/647)
|
||||||
- Link \("click" statement\) in flowchart does not work in exported SVG [\#646](https://github.com/knsv/mermaid/issues/646)
|
- Link \("click" statement\) in flowchart does not work in exported SVG [\#646](https://github.com/knsv/mermaid/issues/646)
|
||||||
- How to pass styling [\#639](https://github.com/knsv/mermaid/issues/639)
|
- How to pass styling [\#639](https://github.com/knsv/mermaid/issues/639)
|
||||||
- The live editor cant show seq diagram with notes for 8.0.0-alpha.3 [\#638](https://github.com/knsv/mermaid/issues/638)
|
- The live editor can't show seq diagram with notes for 8.0.0-alpha.3 [\#638](https://github.com/knsv/mermaid/issues/638)
|
||||||
- import mermaid.css with ES6 + NPM [\#634](https://github.com/knsv/mermaid/issues/634)
|
- import mermaid.css with ES6 + NPM [\#634](https://github.com/knsv/mermaid/issues/634)
|
||||||
- Actor line cuts through other elements [\#633](https://github.com/knsv/mermaid/issues/633)
|
- Actor line cuts through other elements [\#633](https://github.com/knsv/mermaid/issues/633)
|
||||||
- Graph TD line out of the picture \(left side\) [\#630](https://github.com/knsv/mermaid/issues/630)
|
- Graph TD line out of the picture \(left side\) [\#630](https://github.com/knsv/mermaid/issues/630)
|
||||||
|
@ -504,7 +504,7 @@ mermaid.run({
|
||||||
|
|
||||||
- Docs css: code hard to read [\#324](https://github.com/knsv/mermaid/issues/324)
|
- Docs css: code hard to read [\#324](https://github.com/knsv/mermaid/issues/324)
|
||||||
- About Markpad integration [\#323](https://github.com/knsv/mermaid/issues/323)
|
- About Markpad integration [\#323](https://github.com/knsv/mermaid/issues/323)
|
||||||
- How to link backwords in flowchat? [\#321](https://github.com/knsv/mermaid/issues/321)
|
- How to link backwards in flowchat? [\#321](https://github.com/knsv/mermaid/issues/321)
|
||||||
- Help with editor [\#310](https://github.com/knsv/mermaid/issues/310)
|
- Help with editor [\#310](https://github.com/knsv/mermaid/issues/310)
|
||||||
- +1 [\#293](https://github.com/knsv/mermaid/issues/293)
|
- +1 [\#293](https://github.com/knsv/mermaid/issues/293)
|
||||||
- Basic chart does not render on Chome, but does in Firefox [\#290](https://github.com/knsv/mermaid/issues/290)
|
- Basic chart does not render on Chome, but does in Firefox [\#290](https://github.com/knsv/mermaid/issues/290)
|
||||||
|
@ -619,7 +619,7 @@ mermaid.run({
|
||||||
- render to png from the cli does not display the marker-end arrow heads [\#181](https://github.com/knsv/mermaid/issues/181)
|
- render to png from the cli does not display the marker-end arrow heads [\#181](https://github.com/knsv/mermaid/issues/181)
|
||||||
- Links in sequence diagrams [\#159](https://github.com/knsv/mermaid/issues/159)
|
- Links in sequence diagrams [\#159](https://github.com/knsv/mermaid/issues/159)
|
||||||
- comment characters `%%` cause parse error [\#141](https://github.com/knsv/mermaid/issues/141)
|
- comment characters `%%` cause parse error [\#141](https://github.com/knsv/mermaid/issues/141)
|
||||||
- Add a reversed assymetric shape [\#124](https://github.com/knsv/mermaid/issues/124)
|
- Add a reversed asymmetric shape [\#124](https://github.com/knsv/mermaid/issues/124)
|
||||||
- Add syntax for double headed arrows [\#123](https://github.com/knsv/mermaid/issues/123)
|
- Add syntax for double headed arrows [\#123](https://github.com/knsv/mermaid/issues/123)
|
||||||
- Support for font-awesome [\#49](https://github.com/knsv/mermaid/issues/49)
|
- Support for font-awesome [\#49](https://github.com/knsv/mermaid/issues/49)
|
||||||
|
|
||||||
|
@ -659,7 +659,7 @@ mermaid.run({
|
||||||
- Auto linewrap for notes in sequence diagrams [\#178](https://github.com/knsv/mermaid/issues/178)
|
- Auto linewrap for notes in sequence diagrams [\#178](https://github.com/knsv/mermaid/issues/178)
|
||||||
- Execute code after initialize [\#176](https://github.com/knsv/mermaid/issues/176)
|
- Execute code after initialize [\#176](https://github.com/knsv/mermaid/issues/176)
|
||||||
- Autoscaling for all diagram types [\#175](https://github.com/knsv/mermaid/issues/175)
|
- Autoscaling for all diagram types [\#175](https://github.com/knsv/mermaid/issues/175)
|
||||||
- Problem wit click event callback [\#174](https://github.com/knsv/mermaid/issues/174)
|
- Problem with click event callback [\#174](https://github.com/knsv/mermaid/issues/174)
|
||||||
- How to escape characters? [\#170](https://github.com/knsv/mermaid/issues/170)
|
- How to escape characters? [\#170](https://github.com/knsv/mermaid/issues/170)
|
||||||
- it can not work [\#167](https://github.com/knsv/mermaid/issues/167)
|
- it can not work [\#167](https://github.com/knsv/mermaid/issues/167)
|
||||||
- UML Class diagram [\#154](https://github.com/knsv/mermaid/issues/154)
|
- UML Class diagram [\#154](https://github.com/knsv/mermaid/issues/154)
|
||||||
|
@ -762,7 +762,7 @@ mermaid.run({
|
||||||
- subgraph background is black in rendered flowchart PNG via CLI [\#121](https://github.com/knsv/mermaid/issues/121)
|
- subgraph background is black in rendered flowchart PNG via CLI [\#121](https://github.com/knsv/mermaid/issues/121)
|
||||||
- Integrate editor at https://github.com/naseer/mermaid-webapp [\#110](https://github.com/knsv/mermaid/issues/110)
|
- Integrate editor at https://github.com/naseer/mermaid-webapp [\#110](https://github.com/knsv/mermaid/issues/110)
|
||||||
- Internet Explorer Support [\#99](https://github.com/knsv/mermaid/issues/99)
|
- Internet Explorer Support [\#99](https://github.com/knsv/mermaid/issues/99)
|
||||||
- Assymetric shapes not documented [\#82](https://github.com/knsv/mermaid/issues/82)
|
- Asymmetric shapes not documented [\#82](https://github.com/knsv/mermaid/issues/82)
|
||||||
- NoModificationAllowedError [\#23](https://github.com/knsv/mermaid/issues/23)
|
- NoModificationAllowedError [\#23](https://github.com/knsv/mermaid/issues/23)
|
||||||
- Improve arrows [\#3](https://github.com/knsv/mermaid/issues/3)
|
- Improve arrows [\#3](https://github.com/knsv/mermaid/issues/3)
|
||||||
|
|
||||||
|
@ -908,7 +908,7 @@ mermaid.run({
|
||||||
|
|
||||||
- Question marks don't render properly with /dist/mermaid.full.min.js [\#30](https://github.com/knsv/mermaid/issues/30)
|
- Question marks don't render properly with /dist/mermaid.full.min.js [\#30](https://github.com/knsv/mermaid/issues/30)
|
||||||
- Error with some characters [\#25](https://github.com/knsv/mermaid/issues/25)
|
- Error with some characters [\#25](https://github.com/knsv/mermaid/issues/25)
|
||||||
- Provide parse function in browser widthout `require`? [\#21](https://github.com/knsv/mermaid/issues/21)
|
- Provide parse function in browser without `require`? [\#21](https://github.com/knsv/mermaid/issues/21)
|
||||||
- Better label text support [\#18](https://github.com/knsv/mermaid/issues/18)
|
- Better label text support [\#18](https://github.com/knsv/mermaid/issues/18)
|
||||||
- Cap-cased words break parser [\#8](https://github.com/knsv/mermaid/issues/8)
|
- Cap-cased words break parser [\#8](https://github.com/knsv/mermaid/issues/8)
|
||||||
|
|
||||||
|
|
|
@ -59,8 +59,8 @@ representative at an online or offline event.
|
||||||
## Enforcement
|
## Enforcement
|
||||||
|
|
||||||
Instances of abusive, harassing, or otherwise unacceptable behavior may be
|
Instances of abusive, harassing, or otherwise unacceptable behavior may be
|
||||||
reported to the community leaders responsible for enforcement at security@mermaid.live
|
reported to the community leaders responsible for enforcement at <security@mermaid.live>.
|
||||||
.
|
|
||||||
All complaints will be reviewed and investigated promptly and fairly.
|
All complaints will be reviewed and investigated promptly and fairly.
|
||||||
|
|
||||||
All community leaders are obligated to respect the privacy and security of the
|
All community leaders are obligated to respect the privacy and security of the
|
||||||
|
|
27
README.md
27
README.md
|
@ -20,6 +20,9 @@ Generate diagrams from markdown-like text.
|
||||||
<p align="center">
|
<p align="center">
|
||||||
<a href="./README.zh-CN.md">简体中文</a>
|
<a href="./README.zh-CN.md">简体中文</a>
|
||||||
</p>
|
</p>
|
||||||
|
<p align="center">
|
||||||
|
Try Live Editor previews of future releases: <a href="https://develop.git.mermaid.live/" title="Try the mermaid version from the develop branch.">Develop</a> | <a href="https://next.git.mermaid.live/" title="Try the mermaid version from the next branch.">Next</a>
|
||||||
|
</p>
|
||||||
|
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
|
@ -31,7 +34,7 @@ Generate diagrams from markdown-like text.
|
||||||
[![CDN Status](https://img.shields.io/jsdelivr/npm/hm/mermaid)](https://www.jsdelivr.com/package/npm/mermaid)
|
[![CDN Status](https://img.shields.io/jsdelivr/npm/hm/mermaid)](https://www.jsdelivr.com/package/npm/mermaid)
|
||||||
[![NPM Downloads](https://img.shields.io/npm/dm/mermaid)](https://www.npmjs.com/package/mermaid)
|
[![NPM Downloads](https://img.shields.io/npm/dm/mermaid)](https://www.npmjs.com/package/mermaid)
|
||||||
[![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE)
|
[![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE)
|
||||||
[![Twitter Follow](https://img.shields.io/badge/Social-mermaidjs__-blue?style=social&logo=twitter)](https://twitter.com/mermaidjs_)
|
[![Twitter Follow](https://img.shields.io/badge/Social-mermaidjs__-blue?style=social&logo=X)](https://twitter.com/mermaidjs_)
|
||||||
|
|
||||||
<img src="./img/header.png" alt="" />
|
<img src="./img/header.png" alt="" />
|
||||||
|
|
||||||
|
@ -41,6 +44,22 @@ Generate diagrams from markdown-like text.
|
||||||
|
|
||||||
<a href="https://mermaid-js.github.io/mermaid/landing/"><img src="https://github.com/mermaid-js/mermaid/blob/master/docs/intro/img/book-banner-post-release.jpg" alt="Explore Mermaid.js in depth, with real-world examples, tips & tricks from the creator... The first official book on Mermaid is available for purchase. Check it out!"></a>
|
<a href="https://mermaid-js.github.io/mermaid/landing/"><img src="https://github.com/mermaid-js/mermaid/blob/master/docs/intro/img/book-banner-post-release.jpg" alt="Explore Mermaid.js in depth, with real-world examples, tips & tricks from the creator... The first official book on Mermaid is available for purchase. Check it out!"></a>
|
||||||
|
|
||||||
|
## Table of content
|
||||||
|
|
||||||
|
<details>
|
||||||
|
<summary>Expand contents</summary>
|
||||||
|
|
||||||
|
- [About](#about)
|
||||||
|
- [Examples](#examples)
|
||||||
|
- [Release](#release)
|
||||||
|
- [Related projects](#related-projects)
|
||||||
|
- [Contributors](#contributors)
|
||||||
|
- [Security and safe diagrams](#security-and-safe-diagrams)
|
||||||
|
- [Reporting vulnerabilities](#reporting-vulnerabilities)
|
||||||
|
- [Appreciation](#appreciation)
|
||||||
|
|
||||||
|
</details>
|
||||||
|
|
||||||
## About
|
## About
|
||||||
|
|
||||||
<!-- <Main description> -->
|
<!-- <Main description> -->
|
||||||
|
@ -55,10 +74,10 @@ Mermaid addresses this problem by enabling users to create easily modifiable dia
|
||||||
<br/>
|
<br/>
|
||||||
|
|
||||||
Mermaid allows even non-programmers to easily create detailed diagrams through the [Mermaid Live Editor](https://mermaid.live/).<br/>
|
Mermaid allows even non-programmers to easily create detailed diagrams through the [Mermaid Live Editor](https://mermaid.live/).<br/>
|
||||||
[Tutorials](./docs/config/Tutorials.md) has video tutorials.
|
For video tutorials, visit our [Tutorials](./docs/config/Tutorials.md) page.
|
||||||
Use Mermaid with your favorite applications, check out the list of [Integrations and Usages of Mermaid](./docs/ecosystem/integrations.md).
|
Use Mermaid with your favorite applications, check out the list of [Integrations and Usages of Mermaid](./docs/ecosystem/integrations-community.md).
|
||||||
|
|
||||||
You can also use Mermaid within [GitHub](https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/) as well many of your other favorite applications—check out the list of [Integrations and Usages of Mermaid](./docs/ecosystem/integrations.md).
|
You can also use Mermaid within [GitHub](https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/) as well many of your other favorite applications—check out the list of [Integrations and Usages of Mermaid](./docs/ecosystem/integrations-community.md).
|
||||||
|
|
||||||
For a more detailed introduction to Mermaid and some of its more basic uses, look to the [Beginner's Guide](./docs/intro/getting-started.md), [Usage](./docs/config/usage.md) and [Tutorials](./docs/config/Tutorials.md).
|
For a more detailed introduction to Mermaid and some of its more basic uses, look to the [Beginner's Guide](./docs/intro/getting-started.md), [Usage](./docs/config/usage.md) and [Tutorials](./docs/config/Tutorials.md).
|
||||||
|
|
||||||
|
|
|
@ -12,7 +12,7 @@ Mermaid
|
||||||
<p>
|
<p>
|
||||||
|
|
||||||
<p align="center">
|
<p align="center">
|
||||||
<a href="https://mermaid.live/"><b>Live Editor!</b></a>
|
<a href="https://mermaid.live/"><b>实时编辑器!</b></a>
|
||||||
</p>
|
</p>
|
||||||
<p align="center">
|
<p align="center">
|
||||||
<a href="https://mermaid.js.org">📖 文档</a> | <a href="https://mermaid.js.org/intro/">🚀 入门</a> | <a href="https://www.jsdelivr.com/package/npm/mermaid">🌐 CDN</a> | <a href="https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE" title="Slack invite">🙌 加入我们</a>
|
<a href="https://mermaid.js.org">📖 文档</a> | <a href="https://mermaid.js.org/intro/">🚀 入门</a> | <a href="https://www.jsdelivr.com/package/npm/mermaid">🌐 CDN</a> | <a href="https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE" title="Slack invite">🙌 加入我们</a>
|
||||||
|
@ -21,6 +21,10 @@ Mermaid
|
||||||
<a href="./README.md">English</a>
|
<a href="./README.md">English</a>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
|
<p align="center">
|
||||||
|
尝试未来版本的实时编辑器预览: <a href="https://develop.git.mermaid.live/" title="尝试来自develop分支的mermaid版本。">Develop</a> | <a href="https://next.git.mermaid.live/" title="尝试来自next分支的mermaid版本。">Next</a>
|
||||||
|
</p>
|
||||||
|
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
|
|
||||||
|
@ -31,7 +35,7 @@ Mermaid
|
||||||
[![CDN Status](https://img.shields.io/jsdelivr/npm/hm/mermaid)](https://www.jsdelivr.com/package/npm/mermaid)
|
[![CDN Status](https://img.shields.io/jsdelivr/npm/hm/mermaid)](https://www.jsdelivr.com/package/npm/mermaid)
|
||||||
[![NPM Downloads](https://img.shields.io/npm/dm/mermaid)](https://www.npmjs.com/package/mermaid)
|
[![NPM Downloads](https://img.shields.io/npm/dm/mermaid)](https://www.npmjs.com/package/mermaid)
|
||||||
[![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE)
|
[![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE)
|
||||||
[![Twitter Follow](https://img.shields.io/badge/Social-mermaidjs__-blue?style=social&logo=twitter)](https://twitter.com/mermaidjs_)
|
[![Twitter Follow](https://img.shields.io/badge/Social-mermaidjs__-blue?style=social&logo=X)](https://twitter.com/mermaidjs_)
|
||||||
|
|
||||||
<img src="./img/header.png" alt="" />
|
<img src="./img/header.png" alt="" />
|
||||||
|
|
||||||
|
@ -53,7 +57,7 @@ Mermaid 是一个基于 Javascript 的图表绘制工具,通过解析类 Markd
|
||||||
Mermaid 通过允许用户创建便于修改的图表来解决这一难题,它也可以作为生产脚本(或其他代码)的一部分。<br/>
|
Mermaid 通过允许用户创建便于修改的图表来解决这一难题,它也可以作为生产脚本(或其他代码)的一部分。<br/>
|
||||||
<br/>
|
<br/>
|
||||||
Mermaid 甚至能让非程序员也能通过 [Mermaid Live Editor](https://mermaid.live/) 轻松创建详细的图表。<br/>
|
Mermaid 甚至能让非程序员也能通过 [Mermaid Live Editor](https://mermaid.live/) 轻松创建详细的图表。<br/>
|
||||||
你可以访问 [教程](./docs/config/Tutorials.md) 来查看 Live Editor 的视频教程,也可以查看 [Mermaid 的集成和使用](./docs/ecosystem/integrations.md) 这个清单来检查你的文档工具是否已经集成了 Mermaid 支持。
|
你可以访问 [教程](./docs/config/Tutorials.md) 来查看 Live Editor 的视频教程,也可以查看 [Mermaid 的集成和使用](./docs/ecosystem/integrations-community.md) 这个清单来检查你的文档工具是否已经集成了 Mermaid 支持。
|
||||||
|
|
||||||
如果想要查看关于 Mermaid 更详细的介绍及基础使用方式,可以查看 [入门指引](./docs/intro/getting-started.md), [用法](./docs/config/usage.md) 和 [教程](./docs/config/Tutorials.md).
|
如果想要查看关于 Mermaid 更详细的介绍及基础使用方式,可以查看 [入门指引](./docs/intro/getting-started.md), [用法](./docs/config/usage.md) 和 [教程](./docs/config/Tutorials.md).
|
||||||
|
|
||||||
|
|
|
@ -22,6 +22,7 @@
|
||||||
"brkt",
|
"brkt",
|
||||||
"brolin",
|
"brolin",
|
||||||
"brotli",
|
"brotli",
|
||||||
|
"catmull",
|
||||||
"città",
|
"città",
|
||||||
"classdef",
|
"classdef",
|
||||||
"codedoc",
|
"codedoc",
|
||||||
|
@ -60,6 +61,7 @@
|
||||||
"gzipped",
|
"gzipped",
|
||||||
"huynh",
|
"huynh",
|
||||||
"huynhicode",
|
"huynhicode",
|
||||||
|
"iife",
|
||||||
"inkdrop",
|
"inkdrop",
|
||||||
"jaoude",
|
"jaoude",
|
||||||
"jgreywolf",
|
"jgreywolf",
|
||||||
|
@ -73,6 +75,7 @@
|
||||||
"knut",
|
"knut",
|
||||||
"knutsveidqvist",
|
"knutsveidqvist",
|
||||||
"laganeckas",
|
"laganeckas",
|
||||||
|
"langium",
|
||||||
"linetype",
|
"linetype",
|
||||||
"lintstagedrc",
|
"lintstagedrc",
|
||||||
"logmsg",
|
"logmsg",
|
||||||
|
@ -84,6 +87,7 @@
|
||||||
"mdbook",
|
"mdbook",
|
||||||
"mermaidjs",
|
"mermaidjs",
|
||||||
"mermerd",
|
"mermerd",
|
||||||
|
"metafile",
|
||||||
"mindaugas",
|
"mindaugas",
|
||||||
"mindmap",
|
"mindmap",
|
||||||
"mindmaps",
|
"mindmaps",
|
||||||
|
@ -97,6 +101,7 @@
|
||||||
"nirname",
|
"nirname",
|
||||||
"npmjs",
|
"npmjs",
|
||||||
"orlandoni",
|
"orlandoni",
|
||||||
|
"outdir",
|
||||||
"pathe",
|
"pathe",
|
||||||
"pbrolin",
|
"pbrolin",
|
||||||
"phpbb",
|
"phpbb",
|
||||||
|
@ -155,6 +160,7 @@
|
||||||
"vitepress",
|
"vitepress",
|
||||||
"vueuse",
|
"vueuse",
|
||||||
"xlink",
|
"xlink",
|
||||||
|
"xychart",
|
||||||
"yash",
|
"yash",
|
||||||
"yokozuna",
|
"yokozuna",
|
||||||
"zenuml",
|
"zenuml",
|
||||||
|
|
|
@ -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',
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
|
@ -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');
|
||||||
|
});
|
||||||
|
});
|
|
@ -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', '<b>');
|
|
||||||
});
|
|
||||||
});
|
|
|
@ -132,4 +132,9 @@ describe('XSS', () => {
|
||||||
cy.wait(1000);
|
cy.wait(1000);
|
||||||
cy.get('#the-malware').should('not.exist');
|
cy.get('#the-malware').should('not.exist');
|
||||||
});
|
});
|
||||||
|
it('should sanitize backticks in class names properly', () => {
|
||||||
|
cy.visit('http://localhost:9000/xss24.html');
|
||||||
|
cy.wait(1000);
|
||||||
|
cy.get('#the-malware').should('not.exist');
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
|
@ -501,4 +501,16 @@ describe('Class diagram', () => {
|
||||||
B : -methods()
|
B : -methods()
|
||||||
`);
|
`);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it('should handle notes with anchor tag having target attribute', () => {
|
||||||
|
renderGraph(
|
||||||
|
`classDiagram
|
||||||
|
class test { }
|
||||||
|
note for test "<a href='https://mermaid.js.org/' target="_blank"><code>note about mermaid</code></a>"`
|
||||||
|
);
|
||||||
|
|
||||||
|
cy.get('svg').then((svg) => {
|
||||||
|
cy.get('a').should('have.attr', 'target', '_blank').should('have.attr', 'rel', 'noopener');
|
||||||
|
});
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import { imgSnapshotTest } from '../../helpers/util.ts';
|
import { imgSnapshotTest, urlSnapshotTest } from '../../helpers/util.ts';
|
||||||
|
|
||||||
describe('Configuration and directives - nodes should be light blue', () => {
|
describe('Configuration and directives - nodes should be light blue', () => {
|
||||||
it('No config - use default', () => {
|
it('No config - use default', () => {
|
||||||
|
@ -206,8 +206,7 @@ graph TD
|
||||||
describe('when rendering several diagrams', () => {
|
describe('when rendering several diagrams', () => {
|
||||||
it('diagrams should not taint later diagrams', () => {
|
it('diagrams should not taint later diagrams', () => {
|
||||||
const url = 'http://localhost:9000/theme-directives.html';
|
const url = 'http://localhost:9000/theme-directives.html';
|
||||||
cy.visit(url);
|
urlSnapshotTest(url, {});
|
||||||
cy.matchImageSnapshot('conf-and-directives.spec-when-rendering-several-diagrams-diagram-1');
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
|
@ -729,6 +729,18 @@ A ~~~ B
|
||||||
{}
|
{}
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it('5064: Should render when subgraph child has links to outside node and subgraph', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`flowchart TB
|
||||||
|
Out --> In
|
||||||
|
subgraph Sub
|
||||||
|
In
|
||||||
|
end
|
||||||
|
Sub --> In`
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
describe('Markdown strings flowchart (#4220)', () => {
|
describe('Markdown strings flowchart (#4220)', () => {
|
||||||
describe('html labels', () => {
|
describe('html labels', () => {
|
||||||
it('With styling and classes', () => {
|
it('With styling and classes', () => {
|
||||||
|
@ -874,4 +886,93 @@ end
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
describe('Subgraph title margins', () => {
|
||||||
|
it('Should render subgraphs with title margins set (LR)', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`flowchart LR
|
||||||
|
|
||||||
|
subgraph TOP
|
||||||
|
direction TB
|
||||||
|
subgraph B1
|
||||||
|
direction RL
|
||||||
|
i1 -->f1
|
||||||
|
end
|
||||||
|
subgraph B2
|
||||||
|
direction BT
|
||||||
|
i2 -->f2
|
||||||
|
end
|
||||||
|
end
|
||||||
|
A --> TOP --> B
|
||||||
|
B1 --> B2
|
||||||
|
`,
|
||||||
|
{ flowchart: { subGraphTitleMargin: { top: 10, bottom: 5 } } }
|
||||||
|
);
|
||||||
|
});
|
||||||
|
it('Should render subgraphs with title margins set (TD)', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`flowchart TD
|
||||||
|
|
||||||
|
subgraph TOP
|
||||||
|
direction LR
|
||||||
|
subgraph B1
|
||||||
|
direction RL
|
||||||
|
i1 -->f1
|
||||||
|
end
|
||||||
|
subgraph B2
|
||||||
|
direction BT
|
||||||
|
i2 -->f2
|
||||||
|
end
|
||||||
|
end
|
||||||
|
A --> TOP --> B
|
||||||
|
B1 --> B2
|
||||||
|
`,
|
||||||
|
{ flowchart: { subGraphTitleMargin: { top: 8, bottom: 16 } } }
|
||||||
|
);
|
||||||
|
});
|
||||||
|
it('Should render subgraphs with title margins set (LR) and htmlLabels set to false', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`flowchart LR
|
||||||
|
|
||||||
|
subgraph TOP
|
||||||
|
direction TB
|
||||||
|
subgraph B1
|
||||||
|
direction RL
|
||||||
|
i1 -->f1
|
||||||
|
end
|
||||||
|
subgraph B2
|
||||||
|
direction BT
|
||||||
|
i2 -->f2
|
||||||
|
end
|
||||||
|
end
|
||||||
|
A --> TOP --> B
|
||||||
|
B1 --> B2
|
||||||
|
`,
|
||||||
|
{
|
||||||
|
htmlLabels: false,
|
||||||
|
flowchart: { htmlLabels: false, subGraphTitleMargin: { top: 10, bottom: 5 } },
|
||||||
|
}
|
||||||
|
);
|
||||||
|
});
|
||||||
|
it('Should render subgraphs with title margins and edge labels', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`flowchart LR
|
||||||
|
|
||||||
|
subgraph TOP
|
||||||
|
direction TB
|
||||||
|
subgraph B1
|
||||||
|
direction RL
|
||||||
|
i1 --lb1-->f1
|
||||||
|
end
|
||||||
|
subgraph B2
|
||||||
|
direction BT
|
||||||
|
i2 --lb2-->f2
|
||||||
|
end
|
||||||
|
end
|
||||||
|
A --lb3--> TOP --lb4--> B
|
||||||
|
B1 --lb5--> B2
|
||||||
|
`,
|
||||||
|
{ flowchart: { subGraphTitleMargin: { top: 10, bottom: 5 } } }
|
||||||
|
);
|
||||||
|
});
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
|
@ -520,6 +520,32 @@ describe('Gantt diagram', () => {
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// TODO: fix it
|
||||||
|
//
|
||||||
|
// This test is skipped deliberately
|
||||||
|
// because it fails and blocks our development pipeline
|
||||||
|
// It was added as an attempt to fix gantt performance issues
|
||||||
|
//
|
||||||
|
// https://github.com/mermaid-js/mermaid/issues/3274
|
||||||
|
//
|
||||||
|
it.skip('should render a gantt diagram with very large intervals, skipping excludes if interval > 5 years', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`gantt
|
||||||
|
title A long Gantt Diagram
|
||||||
|
dateFormat YYYY-MM-DD
|
||||||
|
axisFormat %m-%d
|
||||||
|
tickInterval 1day
|
||||||
|
excludes weekends
|
||||||
|
section Section
|
||||||
|
A task : a1, 9999-10-01, 30d
|
||||||
|
Another task : after a1, 20d
|
||||||
|
section Another
|
||||||
|
Task in sec : 2022-10-20, 12d
|
||||||
|
another task : 24d
|
||||||
|
`
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
it('should render when compact is true', () => {
|
it('should render when compact is true', () => {
|
||||||
imgSnapshotTest(
|
imgSnapshotTest(
|
||||||
`
|
`
|
||||||
|
|
|
@ -26,7 +26,7 @@ describe('Git Graph diagram', () => {
|
||||||
`gitGraph
|
`gitGraph
|
||||||
commit id: "Normal Commit"
|
commit id: "Normal Commit"
|
||||||
commit id: "Reverse Commit" type: REVERSE
|
commit id: "Reverse Commit" type: REVERSE
|
||||||
commit id: "Hightlight Commit" type: HIGHLIGHT
|
commit id: "Highlight Commit" type: HIGHLIGHT
|
||||||
`,
|
`,
|
||||||
{}
|
{}
|
||||||
);
|
);
|
||||||
|
@ -36,7 +36,7 @@ describe('Git Graph diagram', () => {
|
||||||
`gitGraph
|
`gitGraph
|
||||||
commit id: "Normal Commit with tag" tag: "v1.0.0"
|
commit id: "Normal Commit with tag" tag: "v1.0.0"
|
||||||
commit id: "Reverse Commit with tag" type: REVERSE tag: "RC_1"
|
commit id: "Reverse Commit with tag" type: REVERSE tag: "RC_1"
|
||||||
commit id: "Hightlight Commit" type: HIGHLIGHT tag: "8.8.4"
|
commit id: "Highlight Commit" type: HIGHLIGHT tag: "8.8.4"
|
||||||
`,
|
`,
|
||||||
{}
|
{}
|
||||||
);
|
);
|
||||||
|
@ -102,7 +102,7 @@ describe('Git Graph diagram', () => {
|
||||||
{}
|
{}
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
it('8: should render a simple gitgraph with more than 8 branchs & overriding variables', () => {
|
it('8: should render a simple gitgraph with more than 8 branches & overriding variables', () => {
|
||||||
imgSnapshotTest(
|
imgSnapshotTest(
|
||||||
`%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
|
`%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
|
||||||
'gitBranchLabel0': '#ffffff',
|
'gitBranchLabel0': '#ffffff',
|
||||||
|
@ -358,7 +358,7 @@ gitGraph
|
||||||
`gitGraph TB:
|
`gitGraph TB:
|
||||||
commit id: "Normal Commit"
|
commit id: "Normal Commit"
|
||||||
commit id: "Reverse Commit" type: REVERSE
|
commit id: "Reverse Commit" type: REVERSE
|
||||||
commit id: "Hightlight Commit" type: HIGHLIGHT
|
commit id: "Highlight Commit" type: HIGHLIGHT
|
||||||
`,
|
`,
|
||||||
{}
|
{}
|
||||||
);
|
);
|
||||||
|
@ -368,7 +368,7 @@ gitGraph
|
||||||
`gitGraph TB:
|
`gitGraph TB:
|
||||||
commit id: "Normal Commit with tag" tag: "v1.0.0"
|
commit id: "Normal Commit with tag" tag: "v1.0.0"
|
||||||
commit id: "Reverse Commit with tag" type: REVERSE tag: "RC_1"
|
commit id: "Reverse Commit with tag" type: REVERSE tag: "RC_1"
|
||||||
commit id: "Hightlight Commit" type: HIGHLIGHT tag: "8.8.4"
|
commit id: "Highlight Commit" type: HIGHLIGHT tag: "8.8.4"
|
||||||
`,
|
`,
|
||||||
{}
|
{}
|
||||||
);
|
);
|
||||||
|
@ -434,7 +434,7 @@ gitGraph
|
||||||
{}
|
{}
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
it('22: should render a simple gitgraph with more than 8 branchs & overriding variables | Vertical Branch', () => {
|
it('22: should render a simple gitgraph with more than 8 branches & overriding variables | Vertical Branch', () => {
|
||||||
imgSnapshotTest(
|
imgSnapshotTest(
|
||||||
`%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
|
`%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
|
||||||
'gitBranchLabel0': '#ffffff',
|
'gitBranchLabel0': '#ffffff',
|
||||||
|
@ -701,4 +701,129 @@ gitGraph TB:
|
||||||
{}
|
{}
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
it('34: should render a simple gitgraph with two branches from same commit', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`gitGraph
|
||||||
|
commit id:"1-abcdefg"
|
||||||
|
commit id:"2-abcdefg"
|
||||||
|
branch feature-001
|
||||||
|
commit id:"3-abcdefg"
|
||||||
|
commit id:"4-abcdefg"
|
||||||
|
checkout main
|
||||||
|
branch feature-002
|
||||||
|
commit id:"5-abcdefg"
|
||||||
|
checkout feature-001
|
||||||
|
merge feature-002
|
||||||
|
`,
|
||||||
|
{}
|
||||||
|
);
|
||||||
|
});
|
||||||
|
it('35: should render a simple gitgraph with two branches from same commit | Vertical Branch', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`gitGraph TB:
|
||||||
|
commit id:"1-abcdefg"
|
||||||
|
commit id:"2-abcdefg"
|
||||||
|
branch feature-001
|
||||||
|
commit id:"3-abcdefg"
|
||||||
|
commit id:"4-abcdefg"
|
||||||
|
checkout main
|
||||||
|
branch feature-002
|
||||||
|
commit id:"5-abcdefg"
|
||||||
|
checkout feature-001
|
||||||
|
merge feature-002
|
||||||
|
`,
|
||||||
|
{}
|
||||||
|
);
|
||||||
|
});
|
||||||
|
it('36: should render GitGraph with branch that is not used immediately', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`gitGraph LR:
|
||||||
|
commit id:"1-abcdefg"
|
||||||
|
branch x
|
||||||
|
checkout main
|
||||||
|
commit id:"2-abcdefg"
|
||||||
|
checkout x
|
||||||
|
commit id:"3-abcdefg"
|
||||||
|
checkout main
|
||||||
|
merge x
|
||||||
|
`,
|
||||||
|
{}
|
||||||
|
);
|
||||||
|
});
|
||||||
|
it('37: should render GitGraph with branch that is not used immediately | Vertical Branch', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`gitGraph TB:
|
||||||
|
commit id:"1-abcdefg"
|
||||||
|
branch x
|
||||||
|
checkout main
|
||||||
|
commit id:"2-abcdefg"
|
||||||
|
checkout x
|
||||||
|
commit id:"3-abcdefg"
|
||||||
|
checkout main
|
||||||
|
merge x
|
||||||
|
`,
|
||||||
|
{}
|
||||||
|
);
|
||||||
|
});
|
||||||
|
it('38: should render GitGraph with branch and sub-branch neither of which used immediately', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`gitGraph LR:
|
||||||
|
commit id:"1-abcdefg"
|
||||||
|
branch x
|
||||||
|
checkout main
|
||||||
|
commit id:"2-abcdefg"
|
||||||
|
checkout x
|
||||||
|
commit id:"3-abcdefg"
|
||||||
|
checkout main
|
||||||
|
merge x
|
||||||
|
checkout x
|
||||||
|
branch y
|
||||||
|
checkout x
|
||||||
|
commit id:"4-abcdefg"
|
||||||
|
checkout y
|
||||||
|
commit id:"5-abcdefg"
|
||||||
|
checkout x
|
||||||
|
merge y
|
||||||
|
`,
|
||||||
|
{}
|
||||||
|
);
|
||||||
|
});
|
||||||
|
it('39: should render GitGraph with branch and sub-branch neither of which used immediately | Vertical Branch', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`gitGraph TB:
|
||||||
|
commit id:"1-abcdefg"
|
||||||
|
branch x
|
||||||
|
checkout main
|
||||||
|
commit id:"2-abcdefg"
|
||||||
|
checkout x
|
||||||
|
commit id:"3-abcdefg"
|
||||||
|
checkout main
|
||||||
|
merge x
|
||||||
|
checkout x
|
||||||
|
branch y
|
||||||
|
checkout x
|
||||||
|
commit id:"4-abcdefg"
|
||||||
|
checkout y
|
||||||
|
commit id:"5-abcdefg"
|
||||||
|
checkout x
|
||||||
|
merge y
|
||||||
|
`,
|
||||||
|
{}
|
||||||
|
);
|
||||||
|
});
|
||||||
|
it('40: should render a simple gitgraph with cherry pick merge commit', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`gitGraph
|
||||||
|
commit id: "ZERO"
|
||||||
|
branch feature
|
||||||
|
branch release
|
||||||
|
checkout feature
|
||||||
|
commit id: "A"
|
||||||
|
commit id: "B"
|
||||||
|
checkout main
|
||||||
|
merge feature id: "M"
|
||||||
|
checkout release
|
||||||
|
cherry-pick id: "M" parent:"B"`
|
||||||
|
);
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
|
@ -0,0 +1,10 @@
|
||||||
|
import { urlSnapshotTest } from '../../helpers/util.ts';
|
||||||
|
|
||||||
|
describe('Marker Unique IDs Per Diagram', () => {
|
||||||
|
it('should render a blue arrow tip in second digram', () => {
|
||||||
|
urlSnapshotTest('http://localhost:9000/marker_unique_id.html', {
|
||||||
|
logLevel: 1,
|
||||||
|
flowchart: { htmlLabels: false },
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
|
@ -44,7 +44,7 @@ describe('pie chart', () => {
|
||||||
const style = svg.attr('style');
|
const style = svg.attr('style');
|
||||||
expect(style).to.match(/^max-width: [\d.]+px;$/);
|
expect(style).to.match(/^max-width: [\d.]+px;$/);
|
||||||
const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
|
const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
|
||||||
expect(maxWidthValue).to.eq(984);
|
expect(maxWidthValue).to.be.within(590, 600); // depends on installed fonts: 596.2 on my PC, 597.5 on CI
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -59,7 +59,7 @@ describe('pie chart', () => {
|
||||||
);
|
);
|
||||||
cy.get('svg').should((svg) => {
|
cy.get('svg').should((svg) => {
|
||||||
const width = parseFloat(svg.attr('width'));
|
const width = parseFloat(svg.attr('width'));
|
||||||
expect(width).to.eq(984);
|
expect(width).to.be.within(590, 600); // depends on installed fonts: 596.2 on my PC, 597.5 on CI
|
||||||
expect(svg).to.not.have.attr('style');
|
expect(svg).to.not.have.attr('style');
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
|
@ -160,4 +160,70 @@ describe('Quadrant Chart', () => {
|
||||||
);
|
);
|
||||||
cy.get('svg');
|
cy.get('svg');
|
||||||
});
|
});
|
||||||
|
it('should render x-axis labels in the center, if x-axis has two labels', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`
|
||||||
|
quadrantChart
|
||||||
|
title Reach and engagement of campaigns
|
||||||
|
x-axis Low Reach --> High Reach
|
||||||
|
y-axis Low Engagement
|
||||||
|
quadrant-1 We should expand
|
||||||
|
quadrant-2 Need to promote
|
||||||
|
quadrant-3 Re-evaluate
|
||||||
|
quadrant-4 May be improved
|
||||||
|
Campaign A: [0.3, 0.6]
|
||||||
|
Campaign B: [0.45, 0.23]
|
||||||
|
Campaign C: [0.57, 0.69]
|
||||||
|
Campaign D: [0.78, 0.34]
|
||||||
|
Campaign E: [0.40, 0.34]
|
||||||
|
Campaign F: [0.35, 0.78]
|
||||||
|
`,
|
||||||
|
{}
|
||||||
|
);
|
||||||
|
cy.get('svg');
|
||||||
|
});
|
||||||
|
it('should render y-axis labels in the center, if y-axis has two labels', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`
|
||||||
|
quadrantChart
|
||||||
|
title Reach and engagement of campaigns
|
||||||
|
x-axis Low Reach
|
||||||
|
y-axis Low Engagement --> High Engagement
|
||||||
|
quadrant-1 We should expand
|
||||||
|
quadrant-2 Need to promote
|
||||||
|
quadrant-3 Re-evaluate
|
||||||
|
quadrant-4 May be improved
|
||||||
|
Campaign A: [0.3, 0.6]
|
||||||
|
Campaign B: [0.45, 0.23]
|
||||||
|
Campaign C: [0.57, 0.69]
|
||||||
|
Campaign D: [0.78, 0.34]
|
||||||
|
Campaign E: [0.40, 0.34]
|
||||||
|
Campaign F: [0.35, 0.78]
|
||||||
|
`,
|
||||||
|
{}
|
||||||
|
);
|
||||||
|
cy.get('svg');
|
||||||
|
});
|
||||||
|
it('should render both axes labels on the left and bottom, if both axes have only one label', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`
|
||||||
|
quadrantChart
|
||||||
|
title Reach and engagement of campaigns
|
||||||
|
x-axis Reach -->
|
||||||
|
y-axis Engagement -->
|
||||||
|
quadrant-1 We should expand
|
||||||
|
quadrant-2 Need to promote
|
||||||
|
quadrant-3 Re-evaluate
|
||||||
|
quadrant-4 May be improved
|
||||||
|
Campaign A: [0.3, 0.6]
|
||||||
|
Campaign B: [0.45, 0.23]
|
||||||
|
Campaign C: [0.57, 0.69]
|
||||||
|
Campaign D: [0.78, 0.34]
|
||||||
|
Campaign E: [0.40, 0.34]
|
||||||
|
Campaign F: [0.35, 0.78]
|
||||||
|
`,
|
||||||
|
{}
|
||||||
|
);
|
||||||
|
cy.get('svg');
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
|
@ -57,7 +57,7 @@ describe('Timeline diagram', () => {
|
||||||
{}
|
{}
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
it('5: should render a simple timeline with directive overriden colors', () => {
|
it('5: should render a simple timeline with directive overridden colors', () => {
|
||||||
imgSnapshotTest(
|
imgSnapshotTest(
|
||||||
` %%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
|
` %%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
|
||||||
'cScale0': '#ff0000',
|
'cScale0': '#ff0000',
|
||||||
|
|
|
@ -0,0 +1,322 @@
|
||||||
|
import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
|
||||||
|
|
||||||
|
describe('XY Chart', () => {
|
||||||
|
it('should render the simplest possible chart', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`
|
||||||
|
xychart-beta
|
||||||
|
line [10, 30, 20]
|
||||||
|
`,
|
||||||
|
{}
|
||||||
|
);
|
||||||
|
cy.get('svg');
|
||||||
|
});
|
||||||
|
it('Should render a complete chart', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`
|
||||||
|
xychart-beta
|
||||||
|
title "Sales Revenue"
|
||||||
|
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
|
||||||
|
y-axis "Revenue (in $)" 4000 --> 11000
|
||||||
|
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
|
||||||
|
line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
|
||||||
|
`,
|
||||||
|
{}
|
||||||
|
);
|
||||||
|
});
|
||||||
|
it('Should render a chart without title', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`
|
||||||
|
xychart-beta
|
||||||
|
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
|
||||||
|
y-axis "Revenue (in $)" 4000 --> 11000
|
||||||
|
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
|
||||||
|
line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
|
||||||
|
`,
|
||||||
|
{}
|
||||||
|
);
|
||||||
|
cy.get('svg');
|
||||||
|
});
|
||||||
|
it('y-axis title not required', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`
|
||||||
|
xychart-beta
|
||||||
|
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
|
||||||
|
y-axis 4000 --> 11000
|
||||||
|
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
|
||||||
|
line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
|
||||||
|
`,
|
||||||
|
{}
|
||||||
|
);
|
||||||
|
cy.get('svg');
|
||||||
|
});
|
||||||
|
it('Should render a chart without y-axis with different range', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`
|
||||||
|
xychart-beta
|
||||||
|
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
|
||||||
|
bar [5000, 6000, 7500, 8200, 9500, 10500, 14000, 3200, 9200, 9900, 3400, 6000]
|
||||||
|
line [2000, 7000, 6500, 9200, 9500, 7500, 11000, 10200, 3200, 8500, 7000, 8800]
|
||||||
|
`,
|
||||||
|
{}
|
||||||
|
);
|
||||||
|
cy.get('svg');
|
||||||
|
});
|
||||||
|
it('x axis title not required', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`
|
||||||
|
xychart-beta
|
||||||
|
x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
|
||||||
|
bar [5000, 6000, 7500, 8200, 9500, 10500, 14000, 3200, 9200, 9900, 3400, 6000]
|
||||||
|
line [2000, 7000, 6500, 9200, 9500, 7500, 11000, 10200, 3200, 8500, 7000, 8800]
|
||||||
|
`,
|
||||||
|
{}
|
||||||
|
);
|
||||||
|
cy.get('svg');
|
||||||
|
});
|
||||||
|
it('Multiple plots can be rendered', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`
|
||||||
|
xychart-beta
|
||||||
|
line [23, 46, 77, 34]
|
||||||
|
line [45, 32, 33, 12]
|
||||||
|
bar [87, 54, 99, 85]
|
||||||
|
line [78, 88, 22, 4]
|
||||||
|
line [22, 29, 75, 33]
|
||||||
|
bar [52, 96, 35, 10]
|
||||||
|
`,
|
||||||
|
{}
|
||||||
|
);
|
||||||
|
cy.get('svg');
|
||||||
|
});
|
||||||
|
it('Decimals and negative numbers are supported', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`
|
||||||
|
xychart-beta
|
||||||
|
y-axis -2.4 --> 3.5
|
||||||
|
line [+1.3, .6, 2.4, -.34]
|
||||||
|
`,
|
||||||
|
{}
|
||||||
|
);
|
||||||
|
cy.get('svg');
|
||||||
|
});
|
||||||
|
it('Render spark line with "plotReservedSpacePercent"', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`
|
||||||
|
---
|
||||||
|
config:
|
||||||
|
theme: dark
|
||||||
|
xyChart:
|
||||||
|
width: 200
|
||||||
|
height: 20
|
||||||
|
plotReservedSpacePercent: 100
|
||||||
|
---
|
||||||
|
xychart-beta
|
||||||
|
line [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800]
|
||||||
|
`,
|
||||||
|
{}
|
||||||
|
);
|
||||||
|
cy.get('svg');
|
||||||
|
});
|
||||||
|
it('Render spark bar without displaying other property', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`
|
||||||
|
---
|
||||||
|
config:
|
||||||
|
theme: dark
|
||||||
|
xyChart:
|
||||||
|
width: 200
|
||||||
|
height: 20
|
||||||
|
xAxis:
|
||||||
|
showLabel: false
|
||||||
|
showTitle: false
|
||||||
|
showTick: false
|
||||||
|
showAxisLine: false
|
||||||
|
yAxis:
|
||||||
|
showLabel: false
|
||||||
|
showTitle: false
|
||||||
|
showTick: false
|
||||||
|
showAxisLine: false
|
||||||
|
---
|
||||||
|
xychart-beta
|
||||||
|
bar [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800]
|
||||||
|
`,
|
||||||
|
{}
|
||||||
|
);
|
||||||
|
cy.get('svg');
|
||||||
|
});
|
||||||
|
it('Should use all the config from directive', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`
|
||||||
|
%%{init: {"xyChart": {"width": 1000, "height": 600, "titlePadding": 5, "titleFontSize": 10, "xAxis": {"labelFontSize": "20", "labelPadding": 10, "titleFontSize": 30, "titlePadding": 20, "tickLength": 10, "tickWidth": 5}, "yAxis": {"labelFontSize": "20", "labelPadding": 10, "titleFontSize": 30, "titlePadding": 20, "tickLength": 10, "tickWidth": 5}, "plotBorderWidth": 5, "chartOrientation": "horizontal", "plotReservedSpacePercent": 60 }}}%%
|
||||||
|
xychart-beta
|
||||||
|
title "Sales Revenue"
|
||||||
|
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
|
||||||
|
y-axis "Revenue (in $)" 4000 --> 11000
|
||||||
|
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
|
||||||
|
line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
|
||||||
|
`,
|
||||||
|
{}
|
||||||
|
);
|
||||||
|
cy.get('svg');
|
||||||
|
});
|
||||||
|
it('Should use all the config from yaml', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`
|
||||||
|
---
|
||||||
|
config:
|
||||||
|
theme: forest
|
||||||
|
xyChart:
|
||||||
|
width: 1000
|
||||||
|
height: 600
|
||||||
|
titlePadding: 5
|
||||||
|
titleFontSize: 10
|
||||||
|
xAxis:
|
||||||
|
labelFontSize: 20
|
||||||
|
labelPadding: 10
|
||||||
|
titleFontSize: 30
|
||||||
|
titlePadding: 20
|
||||||
|
tickLength: 10
|
||||||
|
tickWidth: 5
|
||||||
|
axisLineWidth: 5
|
||||||
|
yAxis:
|
||||||
|
labelFontSize: 20
|
||||||
|
labelPadding: 10
|
||||||
|
titleFontSize: 30
|
||||||
|
titlePadding: 20
|
||||||
|
tickLength: 10
|
||||||
|
tickWidth: 5
|
||||||
|
axisLineWidth: 5
|
||||||
|
chartOrientation: horizontal
|
||||||
|
plotReservedSpacePercent: 60
|
||||||
|
---
|
||||||
|
xychart-beta
|
||||||
|
title "Sales Revenue"
|
||||||
|
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
|
||||||
|
y-axis "Revenue (in $)" 4000 --> 11000
|
||||||
|
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
|
||||||
|
line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
|
||||||
|
`,
|
||||||
|
{}
|
||||||
|
);
|
||||||
|
cy.get('svg');
|
||||||
|
});
|
||||||
|
it('Render with show axis title false', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`
|
||||||
|
---
|
||||||
|
config:
|
||||||
|
xyChart:
|
||||||
|
xAxis:
|
||||||
|
showTitle: false
|
||||||
|
yAxis:
|
||||||
|
showTitle: false
|
||||||
|
---
|
||||||
|
xychart-beta
|
||||||
|
title "Sales Revenue"
|
||||||
|
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
|
||||||
|
y-axis "Revenue (in $)" 4000 --> 11000
|
||||||
|
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
|
||||||
|
line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
|
||||||
|
`,
|
||||||
|
{}
|
||||||
|
);
|
||||||
|
cy.get('svg');
|
||||||
|
});
|
||||||
|
it('Render with show axis label false', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`
|
||||||
|
---
|
||||||
|
config:
|
||||||
|
xyChart:
|
||||||
|
xAxis:
|
||||||
|
showLabel: false
|
||||||
|
yAxis:
|
||||||
|
showLabel: false
|
||||||
|
---
|
||||||
|
xychart-beta
|
||||||
|
title "Sales Revenue"
|
||||||
|
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
|
||||||
|
y-axis "Revenue (in $)" 4000 --> 11000
|
||||||
|
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
|
||||||
|
line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
|
||||||
|
`,
|
||||||
|
{}
|
||||||
|
);
|
||||||
|
cy.get('svg');
|
||||||
|
});
|
||||||
|
it('Render with show axis tick false', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`
|
||||||
|
---
|
||||||
|
config:
|
||||||
|
xyChart:
|
||||||
|
xAxis:
|
||||||
|
showTick: false
|
||||||
|
yAxis:
|
||||||
|
showTick: false
|
||||||
|
---
|
||||||
|
xychart-beta
|
||||||
|
title "Sales Revenue"
|
||||||
|
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
|
||||||
|
y-axis "Revenue (in $)" 4000 --> 11000
|
||||||
|
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
|
||||||
|
line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
|
||||||
|
`,
|
||||||
|
{}
|
||||||
|
);
|
||||||
|
cy.get('svg');
|
||||||
|
});
|
||||||
|
it('Render with show axis line false', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`
|
||||||
|
---
|
||||||
|
config:
|
||||||
|
xyChart:
|
||||||
|
xAxis:
|
||||||
|
showAxisLine: false
|
||||||
|
yAxis:
|
||||||
|
showAxisLine: false
|
||||||
|
---
|
||||||
|
xychart-beta
|
||||||
|
title "Sales Revenue"
|
||||||
|
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
|
||||||
|
y-axis "Revenue (in $)" 4000 --> 11000
|
||||||
|
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
|
||||||
|
line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
|
||||||
|
`,
|
||||||
|
{}
|
||||||
|
);
|
||||||
|
cy.get('svg');
|
||||||
|
});
|
||||||
|
it('Render all the theme color', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`
|
||||||
|
---
|
||||||
|
config:
|
||||||
|
themeVariables:
|
||||||
|
xyChart:
|
||||||
|
titleColor: "#ff0000"
|
||||||
|
backgroundColor: "#f0f8ff"
|
||||||
|
yAxisLabelColor: "#ee82ee"
|
||||||
|
yAxisTitleColor: "#7fffd4"
|
||||||
|
yAxisTickColor: "#87ceeb"
|
||||||
|
yAxisLineColor: "#ff6347"
|
||||||
|
xAxisLabelColor: "#7fffd4"
|
||||||
|
xAxisTitleColor: "#ee82ee"
|
||||||
|
xAxisTickColor: "#ff6347"
|
||||||
|
xAxisLineColor: "#87ceeb"
|
||||||
|
plotColorPalette: "#008000, #faba63"
|
||||||
|
---
|
||||||
|
xychart-beta
|
||||||
|
title "Sales Revenue"
|
||||||
|
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
|
||||||
|
y-axis "Revenue (in $)" 4000 --> 11000
|
||||||
|
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
|
||||||
|
line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
|
||||||
|
`,
|
||||||
|
{}
|
||||||
|
);
|
||||||
|
cy.get('svg');
|
||||||
|
});
|
||||||
|
});
|
|
@ -1,7 +1,7 @@
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<script src="./viewer.js" type="module"></script>
|
<script type="module" src="./viewer.js"></script>
|
||||||
<link
|
<link
|
||||||
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
|
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
|
||||||
rel="stylesheet"
|
rel="stylesheet"
|
||||||
|
|
|
@ -11,8 +11,7 @@ example-diagram
|
||||||
<!-- <script src="//cdn.jsdelivr.net/npm/mermaid@9.1.7/dist/mermaid.min.js"></script> -->
|
<!-- <script src="//cdn.jsdelivr.net/npm/mermaid@9.1.7/dist/mermaid.min.js"></script> -->
|
||||||
<!-- <script type="module" src="./external-diagrams-mindmap.mjs" /> -->
|
<!-- <script type="module" src="./external-diagrams-mindmap.mjs" /> -->
|
||||||
<script type="module">
|
<script type="module">
|
||||||
import exampleDiagram from '../../packages/mermaid-example-diagram/dist/mermaid-example-diagram.core.mjs';
|
import exampleDiagram from './mermaid-example-diagram.esm.mjs';
|
||||||
// import example from '../../packages/mermaid-example-diagram/src/detector';
|
|
||||||
import mermaid from './mermaid.esm.mjs';
|
import mermaid from './mermaid.esm.mjs';
|
||||||
|
|
||||||
await mermaid.registerExternalDiagrams([exampleDiagram]);
|
await mermaid.registerExternalDiagrams([exampleDiagram]);
|
||||||
|
|
|
@ -0,0 +1,28 @@
|
||||||
|
<html>
|
||||||
|
<body>
|
||||||
|
<pre class="mermaid">
|
||||||
|
flowchart-elk
|
||||||
|
a[hello] --> b[world]
|
||||||
|
b --> c{test}
|
||||||
|
c --> one
|
||||||
|
c --> two
|
||||||
|
c --> three
|
||||||
|
</pre>
|
||||||
|
|
||||||
|
<script type="module">
|
||||||
|
import mermaid from './mermaid.esm.mjs';
|
||||||
|
import elk from './mermaid-flowchart-elk.esm.min.mjs';
|
||||||
|
if (window.location.search.includes('elk')) {
|
||||||
|
await mermaid.registerExternalDiagrams([elk]);
|
||||||
|
}
|
||||||
|
mermaid.initialize({
|
||||||
|
logLevel: 3,
|
||||||
|
startOnLoad: false,
|
||||||
|
});
|
||||||
|
await mermaid.run();
|
||||||
|
if (window.Cypress) {
|
||||||
|
window.rendered = true;
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
File diff suppressed because one or more lines are too long
|
@ -0,0 +1,29 @@
|
||||||
|
<html>
|
||||||
|
<body>
|
||||||
|
<pre id="diagram" class="mermaid">
|
||||||
|
graph TB
|
||||||
|
a --> b
|
||||||
|
a --> c
|
||||||
|
b --> d
|
||||||
|
c --> d
|
||||||
|
</pre>
|
||||||
|
|
||||||
|
<div id="d2"></div>
|
||||||
|
|
||||||
|
<script src="/mermaid.min.js"></script>
|
||||||
|
<script>
|
||||||
|
mermaid.initialize({
|
||||||
|
startOnLoad: true,
|
||||||
|
});
|
||||||
|
const value = `graph TD\nHello --> World`;
|
||||||
|
const el = document.getElementById('d2');
|
||||||
|
mermaid.render('did', value).then(({ svg }) => {
|
||||||
|
console.log(svg);
|
||||||
|
el.innerHTML = svg;
|
||||||
|
if (window.Cypress) {
|
||||||
|
window.rendered = true;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
|
@ -17,20 +17,20 @@
|
||||||
graph TB
|
graph TB
|
||||||
Function-->URL
|
Function-->URL
|
||||||
click Function clickByFlow "Add a div"
|
click Function clickByFlow "Add a div"
|
||||||
click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
|
click URL "http://localhost:9000/info.html" "Visit <strong>mermaid docs</strong>"
|
||||||
</pre>
|
</pre>
|
||||||
<pre id="FirstLine" class="mermaid2">
|
<pre id="FirstLine" class="mermaid2">
|
||||||
graph TB
|
graph TB
|
||||||
1Function-->2URL
|
1Function-->2URL
|
||||||
click 1Function clickByFlow "Add a div"
|
click 1Function clickByFlow "Add a div"
|
||||||
click 2URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
|
click 2URL "http://localhost:9000/info.html" "Visit <strong>mermaid docs</strong>"
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
<pre id="FirstLine" class="mermaid2">
|
<pre id="FirstLine" class="mermaid2">
|
||||||
classDiagram
|
classDiagram
|
||||||
class Test
|
class Test
|
||||||
class ShapeLink
|
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
|
class ShapeCallback
|
||||||
callback ShapeCallback "clickByClass" "This is a tooltip for a callback"
|
callback ShapeCallback "clickByClass" "This is a tooltip for a callback"
|
||||||
</pre>
|
</pre>
|
||||||
|
@ -42,7 +42,7 @@
|
||||||
<pre id="FirstLine" class="mermaid">
|
<pre id="FirstLine" class="mermaid">
|
||||||
classDiagram-v2
|
classDiagram-v2
|
||||||
class ShapeLink
|
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"
|
||||||
</pre>
|
</pre>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -77,7 +77,7 @@
|
||||||
Calling a Callback (look at the console log) :cl2, after cl1, 3d
|
Calling a Callback (look at the console log) :cl2, after cl1, 3d
|
||||||
Calling a Callback with args :cl3, 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 cl2 call clickByGantt()
|
||||||
click cl3 call clickByGantt("test1", test2, test3)
|
click cl3 call clickByGantt("test1", test2, test3)
|
||||||
|
|
||||||
|
@ -102,9 +102,15 @@
|
||||||
div.className = 'created-by-gant-click';
|
div.className = 'created-by-gant-click';
|
||||||
div.style = 'padding: 20px; background: green; color: white;';
|
div.style = 'padding: 20px; background: green; color: white;';
|
||||||
div.innerText = 'Clicked By Gant';
|
div.innerText = 'Clicked By Gant';
|
||||||
if (arg1) div.innerText += ' ' + arg1;
|
if (arg1) {
|
||||||
if (arg2) div.innerText += ' ' + arg2;
|
div.innerText += ' ' + arg1;
|
||||||
if (arg3) div.innerText += ' ' + arg3;
|
}
|
||||||
|
if (arg2) {
|
||||||
|
div.innerText += ' ' + arg2;
|
||||||
|
}
|
||||||
|
if (arg3) {
|
||||||
|
div.innerText += ' ' + arg3;
|
||||||
|
}
|
||||||
|
|
||||||
document.getElementsByTagName('body')[0].appendChild(div);
|
document.getElementsByTagName('body')[0].appendChild(div);
|
||||||
}
|
}
|
||||||
|
|
|
@ -58,12 +58,21 @@
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<pre id="diagram" class="mermaid">
|
<pre id="diagram" class="mermaid">
|
||||||
flowchart
|
flowchart TB
|
||||||
classDef mainCategories fill:#f9d5e5, stroke:#233d4d,stroke-width:2px, font-weight:bold;
|
C & D & E & F & G & H & I & J & K & L & M & N & O & P & Q & R & S & T & U & V & W & X & Y & Z & A1 & A2 & A3 & A4 & A5 & A6 & A7 & A8
|
||||||
CS(Customer Awareness Journey):::mainCategories
|
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
|
||||||
</pre
|
C & D & E & F & G & H & I & J & K & L & M & N & O & P & Q & R & S & T & U & V & W & X & Y & Z & A1 & A2 & A3 & A4 & A5 & A6 & A7 & A8
|
||||||
>
|
|
||||||
<pre id="diagram" class="mermaid">
|
</pre>
|
||||||
|
<pre id="diagram" class="mermaid2">
|
||||||
|
flowchart TB
|
||||||
|
A & A & A & A & A & A & A & A ---> C & D & E & F & G & H & I & J & K & L & M & N & O & P & Q & R & S & T & U & V & W & X & Y & Z
|
||||||
|
</pre>
|
||||||
|
<pre id="diagram" class="mermaid2">
|
||||||
|
flowchart TB
|
||||||
|
A1 & A2 & A3 & A4 & A5 & A6 & A7 & A8 --> C & D & E & F & G & H & I & J & K & L & M & N & O & P & Q & R & S & T & U & V & W & X & Y & Z
|
||||||
|
</pre>
|
||||||
|
<pre id="diagram" class="mermaid2">
|
||||||
flowchart
|
flowchart
|
||||||
Node1:::class1 --> Node2:::class2
|
Node1:::class1 --> Node2:::class2
|
||||||
Node1:::class1 --> Node3:::class2
|
Node1:::class1 --> Node3:::class2
|
||||||
|
@ -441,6 +450,7 @@ mindmap
|
||||||
messageFontFamily: 'courier',
|
messageFontFamily: 'courier',
|
||||||
},
|
},
|
||||||
fontSize: 16,
|
fontSize: 16,
|
||||||
|
logLevel: 0,
|
||||||
});
|
});
|
||||||
function callback() {
|
function callback() {
|
||||||
alert('It worked');
|
alert('It worked');
|
||||||
|
|
|
@ -0,0 +1,53 @@
|
||||||
|
<html>
|
||||||
|
<head> </head>
|
||||||
|
<body>
|
||||||
|
<h1>Example</h1>
|
||||||
|
<pre class="mermaid">
|
||||||
|
%%{init:{"theme":"base", "themeVariables": {"lineColor":"red"}}}%%
|
||||||
|
flowchart LR
|
||||||
|
subgraph red
|
||||||
|
A --> B
|
||||||
|
end
|
||||||
|
</pre>
|
||||||
|
<pre class="mermaid">
|
||||||
|
%%{init:{"theme":"base", "themeVariables": {"lineColor":"blue"}}}%%
|
||||||
|
flowchart LR
|
||||||
|
subgraph black
|
||||||
|
A --> B
|
||||||
|
end
|
||||||
|
</pre>
|
||||||
|
<pre class="mermaid">
|
||||||
|
---
|
||||||
|
config:
|
||||||
|
theme: base
|
||||||
|
themeVariables:
|
||||||
|
lineColor: yellow
|
||||||
|
---
|
||||||
|
flowchart LR
|
||||||
|
subgraph red
|
||||||
|
A --> B
|
||||||
|
end
|
||||||
|
</pre>
|
||||||
|
<pre class="mermaid">
|
||||||
|
---
|
||||||
|
config:
|
||||||
|
theme: base
|
||||||
|
themeVariables:
|
||||||
|
lineColor: green
|
||||||
|
---
|
||||||
|
flowchart LR
|
||||||
|
subgraph black
|
||||||
|
A --> B
|
||||||
|
end
|
||||||
|
</pre>
|
||||||
|
<script type="module">
|
||||||
|
import mermaid from './mermaid.esm.mjs';
|
||||||
|
mermaid.initialize({ startOnLoad: false, logLevel: 0 });
|
||||||
|
await mermaid.run();
|
||||||
|
|
||||||
|
if (window.Cypress) {
|
||||||
|
window.rendered = true;
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
|
@ -1,15 +1,6 @@
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
|
|
||||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
|
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
|
||||||
<link
|
|
||||||
rel="stylesheet"
|
|
||||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
|
|
||||||
/>
|
|
||||||
<link
|
|
||||||
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
|
|
||||||
rel="stylesheet"
|
|
||||||
/>
|
|
||||||
<style>
|
<style>
|
||||||
body {
|
body {
|
||||||
/* background: rgb(221, 208, 208); */
|
/* background: rgb(221, 208, 208); */
|
||||||
|
@ -122,26 +113,21 @@
|
||||||
|
|
||||||
<script type="module">
|
<script type="module">
|
||||||
import mermaid from './mermaid.esm.mjs';
|
import mermaid from './mermaid.esm.mjs';
|
||||||
mermaid.parseError = function (err, hash) {
|
|
||||||
// console.error('Mermaid error: ', err);
|
|
||||||
};
|
|
||||||
mermaid.initialize({
|
mermaid.initialize({
|
||||||
// theme: 'dark',
|
|
||||||
// theme: 'dark',
|
|
||||||
// arrowMarkerAbsolute: true,
|
|
||||||
// themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
|
|
||||||
logLevel: 0,
|
logLevel: 0,
|
||||||
// flowchart: { useMaxWidth: true },
|
|
||||||
graph: { curve: 'cardinal', htmlLabels: false },
|
graph: { curve: 'cardinal', htmlLabels: false },
|
||||||
// gantt: { axisFormat: '%m/%d/%Y' },
|
|
||||||
sequence: { actorMargin: 50, showSequenceNumbers: true },
|
sequence: { actorMargin: 50, showSequenceNumbers: true },
|
||||||
// sequenceDiagram: { actorMargin: 300 } // deprecated
|
|
||||||
fontFamily: '"arial", sans-serif',
|
fontFamily: '"arial", sans-serif',
|
||||||
curve: 'cardinal',
|
curve: 'cardinal',
|
||||||
securityLevel: 'strict',
|
securityLevel: 'strict',
|
||||||
|
startOnLoad: false,
|
||||||
});
|
});
|
||||||
function callback() {
|
|
||||||
alert('It worked');
|
await mermaid.run();
|
||||||
|
|
||||||
|
if (window.Cypress) {
|
||||||
|
window.rendered = true;
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
import mermaid2 from './mermaid.esm.mjs';
|
import mermaid from './mermaid.esm.mjs';
|
||||||
import externalExample from '../../packages/mermaid-example-diagram/dist/mermaid-example-diagram.core.mjs';
|
import externalExample from './mermaid-example-diagram.esm.mjs';
|
||||||
import zenUml from '../../packages/mermaid-zenuml/dist/mermaid-zenuml.core.mjs';
|
import zenUml from './mermaid-zenuml.esm.mjs';
|
||||||
|
|
||||||
function b64ToUtf8(str) {
|
function b64ToUtf8(str) {
|
||||||
return decodeURIComponent(escape(window.atob(str)));
|
return decodeURIComponent(escape(window.atob(str)));
|
||||||
|
@ -45,9 +45,9 @@ const contentLoaded = async function () {
|
||||||
document.getElementsByTagName('body')[0].appendChild(div);
|
document.getElementsByTagName('body')[0].appendChild(div);
|
||||||
}
|
}
|
||||||
|
|
||||||
await mermaid2.registerExternalDiagrams([externalExample, zenUml]);
|
await mermaid.registerExternalDiagrams([externalExample, zenUml]);
|
||||||
mermaid2.initialize(graphObj.mermaid);
|
mermaid.initialize(graphObj.mermaid);
|
||||||
await mermaid2.run();
|
await mermaid.run();
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -95,18 +95,14 @@ const contentLoadedApi = async function () {
|
||||||
divs[i] = div;
|
divs[i] = div;
|
||||||
}
|
}
|
||||||
|
|
||||||
const defaultE2eCnf = { theme: 'forest' };
|
const defaultE2eCnf = { theme: 'forest', startOnLoad: false };
|
||||||
|
|
||||||
const cnf = merge(defaultE2eCnf, graphObj.mermaid);
|
const cnf = merge(defaultE2eCnf, graphObj.mermaid);
|
||||||
|
|
||||||
mermaid2.initialize(cnf);
|
mermaid.initialize(cnf);
|
||||||
|
|
||||||
for (let i = 0; i < numCodes; i++) {
|
for (let i = 0; i < numCodes; i++) {
|
||||||
const { svg, bindFunctions } = await mermaid2.render(
|
const { svg, bindFunctions } = await mermaid.render('newid' + i, graphObj.code[i], divs[i]);
|
||||||
'newid' + i,
|
|
||||||
graphObj.code[i],
|
|
||||||
divs[i]
|
|
||||||
);
|
|
||||||
div.innerHTML = svg;
|
div.innerHTML = svg;
|
||||||
bindFunctions(div);
|
bindFunctions(div);
|
||||||
}
|
}
|
||||||
|
@ -114,18 +110,21 @@ const contentLoadedApi = async function () {
|
||||||
const div = document.createElement('div');
|
const div = document.createElement('div');
|
||||||
div.id = 'block';
|
div.id = 'block';
|
||||||
div.className = 'mermaid';
|
div.className = 'mermaid';
|
||||||
console.warn('graphObj.mermaid', graphObj.mermaid);
|
console.warn('graphObj', graphObj);
|
||||||
document.getElementsByTagName('body')[0].appendChild(div);
|
document.getElementsByTagName('body')[0].appendChild(div);
|
||||||
mermaid2.initialize(graphObj.mermaid);
|
mermaid.initialize(graphObj.mermaid);
|
||||||
|
const { svg, bindFunctions } = await mermaid.render('newid', graphObj.code, div);
|
||||||
const { svg, bindFunctions } = await mermaid2.render('newid', graphObj.code, div);
|
|
||||||
div.innerHTML = svg;
|
div.innerHTML = svg;
|
||||||
|
console.log(div.innerHTML);
|
||||||
bindFunctions(div);
|
bindFunctions(div);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
if (typeof document !== 'undefined') {
|
if (typeof document !== 'undefined') {
|
||||||
|
mermaid.initialize({
|
||||||
|
startOnLoad: false,
|
||||||
|
});
|
||||||
/*!
|
/*!
|
||||||
* Wait for document loaded before starting the execution
|
* Wait for document loaded before starting the execution
|
||||||
*/
|
*/
|
||||||
|
|
|
@ -1,19 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<style>
|
|
||||||
/* .mermaid {
|
|
||||||
font-family: "trebuchet ms", verdana, arial;;
|
|
||||||
} */
|
|
||||||
/* .mermaid {
|
|
||||||
font-family: 'arial';
|
|
||||||
} */
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div id="graph-to-be"></div>
|
|
||||||
<script type="module" charset="utf-8">
|
|
||||||
import './bundle-test.js';
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
|
@ -1,6 +1,5 @@
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<script src="./viewer.js" type="module"></script>
|
|
||||||
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
|
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
|
||||||
<style>
|
<style>
|
||||||
.malware {
|
.malware {
|
||||||
|
@ -33,12 +32,6 @@
|
||||||
</script>
|
</script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<script type="module">
|
<script type="module" src="./viewer.js"></script>
|
||||||
import mermaid from './mermaid.esm.mjs';
|
|
||||||
mermaid.initialize({
|
|
||||||
startOnLoad: false,
|
|
||||||
useMaxWidth: true,
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -42,6 +42,16 @@
|
||||||
font-size: 72px;
|
font-size: 72px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
<script>
|
||||||
|
function xssAttack() {
|
||||||
|
const div = document.createElement('div');
|
||||||
|
div.id = 'the-malware';
|
||||||
|
div.className = 'malware';
|
||||||
|
div.innerHTML = 'XSS Succeeded';
|
||||||
|
document.getElementsByTagName('body')[0].appendChild(div);
|
||||||
|
throw new Error('XSS Succeeded');
|
||||||
|
}
|
||||||
|
</script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div>Security check</div>
|
<div>Security check</div>
|
||||||
|
|
|
@ -42,6 +42,16 @@
|
||||||
font-size: 72px;
|
font-size: 72px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
<script>
|
||||||
|
function xssAttack() {
|
||||||
|
const div = document.createElement('div');
|
||||||
|
div.id = 'the-malware';
|
||||||
|
div.className = 'malware';
|
||||||
|
div.innerHTML = 'XSS Succeeded';
|
||||||
|
document.getElementsByTagName('body')[0].appendChild(div);
|
||||||
|
throw new Error('XSS Succeeded');
|
||||||
|
}
|
||||||
|
</script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div>Security check</div>
|
<div>Security check</div>
|
||||||
|
|
|
@ -42,6 +42,16 @@
|
||||||
font-size: 72px;
|
font-size: 72px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
<script>
|
||||||
|
function xssAttack() {
|
||||||
|
const div = document.createElement('div');
|
||||||
|
div.id = 'the-malware';
|
||||||
|
div.className = 'malware';
|
||||||
|
div.innerHTML = 'XSS Succeeded';
|
||||||
|
document.getElementsByTagName('body')[0].appendChild(div);
|
||||||
|
throw new Error('XSS Succeeded');
|
||||||
|
}
|
||||||
|
</script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div>Security check</div>
|
<div>Security check</div>
|
||||||
|
|
|
@ -42,6 +42,16 @@
|
||||||
font-size: 72px;
|
font-size: 72px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
<script>
|
||||||
|
function xssAttack() {
|
||||||
|
const div = document.createElement('div');
|
||||||
|
div.id = 'the-malware';
|
||||||
|
div.className = 'malware';
|
||||||
|
div.innerHTML = 'XSS Succeeded';
|
||||||
|
document.getElementsByTagName('body')[0].appendChild(div);
|
||||||
|
throw new Error('XSS Succeeded');
|
||||||
|
}
|
||||||
|
</script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div>Security check</div>
|
<div>Security check</div>
|
||||||
|
|
|
@ -42,6 +42,16 @@
|
||||||
font-size: 72px;
|
font-size: 72px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
<script>
|
||||||
|
function xssAttack() {
|
||||||
|
const div = document.createElement('div');
|
||||||
|
div.id = 'the-malware';
|
||||||
|
div.className = 'malware';
|
||||||
|
div.innerHTML = 'XSS Succeeded';
|
||||||
|
document.getElementsByTagName('body')[0].appendChild(div);
|
||||||
|
throw new Error('XSS Succeeded');
|
||||||
|
}
|
||||||
|
</script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div>Security check</div>
|
<div>Security check</div>
|
||||||
|
|
|
@ -42,6 +42,16 @@
|
||||||
font-size: 72px;
|
font-size: 72px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
<script>
|
||||||
|
function xssAttack() {
|
||||||
|
const div = document.createElement('div');
|
||||||
|
div.id = 'the-malware';
|
||||||
|
div.className = 'malware';
|
||||||
|
div.innerHTML = 'XSS Succeeded';
|
||||||
|
document.getElementsByTagName('body')[0].appendChild(div);
|
||||||
|
throw new Error('XSS Succeeded');
|
||||||
|
}
|
||||||
|
</script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div>Security check</div>
|
<div>Security check</div>
|
||||||
|
|
|
@ -42,6 +42,16 @@
|
||||||
font-size: 72px;
|
font-size: 72px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
<script>
|
||||||
|
function xssAttack() {
|
||||||
|
const div = document.createElement('div');
|
||||||
|
div.id = 'the-malware';
|
||||||
|
div.className = 'malware';
|
||||||
|
div.innerHTML = 'XSS Succeeded';
|
||||||
|
document.getElementsByTagName('body')[0].appendChild(div);
|
||||||
|
throw new Error('XSS Succeeded');
|
||||||
|
}
|
||||||
|
</script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div>Security check</div>
|
<div>Security check</div>
|
||||||
|
|
|
@ -42,6 +42,16 @@
|
||||||
font-size: 72px;
|
font-size: 72px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
<script>
|
||||||
|
function xssAttack() {
|
||||||
|
const div = document.createElement('div');
|
||||||
|
div.id = 'the-malware';
|
||||||
|
div.className = 'malware';
|
||||||
|
div.innerHTML = 'XSS Succeeded';
|
||||||
|
document.getElementsByTagName('body')[0].appendChild(div);
|
||||||
|
throw new Error('XSS Succeeded');
|
||||||
|
}
|
||||||
|
</script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div>Security check</div>
|
<div>Security check</div>
|
||||||
|
|
|
@ -42,6 +42,16 @@
|
||||||
font-size: 72px;
|
font-size: 72px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
<script>
|
||||||
|
function xssAttack() {
|
||||||
|
const div = document.createElement('div');
|
||||||
|
div.id = 'the-malware';
|
||||||
|
div.className = 'malware';
|
||||||
|
div.innerHTML = 'XSS Succeeded';
|
||||||
|
document.getElementsByTagName('body')[0].appendChild(div);
|
||||||
|
throw new Error('XSS Succeeded');
|
||||||
|
}
|
||||||
|
</script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div>Security check</div>
|
<div>Security check</div>
|
||||||
|
|
|
@ -42,6 +42,16 @@
|
||||||
font-size: 72px;
|
font-size: 72px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
<script>
|
||||||
|
function xssAttack() {
|
||||||
|
const div = document.createElement('div');
|
||||||
|
div.id = 'the-malware';
|
||||||
|
div.className = 'malware';
|
||||||
|
div.innerHTML = 'XSS Succeeded';
|
||||||
|
document.getElementsByTagName('body')[0].appendChild(div);
|
||||||
|
throw new Error('XSS Succeeded');
|
||||||
|
}
|
||||||
|
</script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div>Security check</div>
|
<div>Security check</div>
|
||||||
|
|
|
@ -42,6 +42,16 @@
|
||||||
font-size: 72px;
|
font-size: 72px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
<script>
|
||||||
|
function xssAttack() {
|
||||||
|
const div = document.createElement('div');
|
||||||
|
div.id = 'the-malware';
|
||||||
|
div.className = 'malware';
|
||||||
|
div.innerHTML = 'XSS Succeeded';
|
||||||
|
document.getElementsByTagName('body')[0].appendChild(div);
|
||||||
|
throw new Error('XSS Succeeded');
|
||||||
|
}
|
||||||
|
</script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div>Security check</div>
|
<div>Security check</div>
|
||||||
|
|
|
@ -42,6 +42,16 @@
|
||||||
font-size: 72px;
|
font-size: 72px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
<script>
|
||||||
|
function xssAttack() {
|
||||||
|
const div = document.createElement('div');
|
||||||
|
div.id = 'the-malware';
|
||||||
|
div.className = 'malware';
|
||||||
|
div.innerHTML = 'XSS Succeeded';
|
||||||
|
document.getElementsByTagName('body')[0].appendChild(div);
|
||||||
|
throw new Error('XSS Succeeded');
|
||||||
|
}
|
||||||
|
</script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div>Security check</div>
|
<div>Security check</div>
|
||||||
|
|
|
@ -0,0 +1,109 @@
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
|
||||||
|
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
|
||||||
|
<link
|
||||||
|
rel="stylesheet"
|
||||||
|
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
|
||||||
|
/>
|
||||||
|
<link
|
||||||
|
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
|
||||||
|
rel="stylesheet"
|
||||||
|
/>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
/* background: rgb(221, 208, 208); */
|
||||||
|
/* background:#333; */
|
||||||
|
font-family: 'Arial';
|
||||||
|
/* font-size: 18px !important; */
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
color: grey;
|
||||||
|
}
|
||||||
|
.mermaid2 {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.mermaid svg {
|
||||||
|
/* font-size: 18px !important; */
|
||||||
|
}
|
||||||
|
.malware {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
height: 150px;
|
||||||
|
background: red;
|
||||||
|
color: black;
|
||||||
|
display: flex;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
font-family: monospace;
|
||||||
|
font-size: 72px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script>
|
||||||
|
function xssAttack() {
|
||||||
|
const div = document.createElement('div');
|
||||||
|
div.id = 'the-malware';
|
||||||
|
div.className = 'malware';
|
||||||
|
div.innerHTML = 'XSS Succeeded';
|
||||||
|
document.getElementsByTagName('body')[0].appendChild(div);
|
||||||
|
throw new Error('XSS Succeeded');
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div>Security check</div>
|
||||||
|
<div class="flex">
|
||||||
|
<div id="diagram" class="mermaid"></div>
|
||||||
|
<div id="res" class=""></div>
|
||||||
|
</div>
|
||||||
|
<script type="module">
|
||||||
|
import mermaid from './mermaid.esm.mjs';
|
||||||
|
mermaid.parseError = function (err, hash) {
|
||||||
|
// console.error('Mermaid error: ', err);
|
||||||
|
};
|
||||||
|
mermaid.initialize({
|
||||||
|
theme: 'forest',
|
||||||
|
arrowMarkerAbsolute: true,
|
||||||
|
// themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
|
||||||
|
logLevel: 0,
|
||||||
|
state: {
|
||||||
|
defaultRenderer: 'dagre-wrapper',
|
||||||
|
},
|
||||||
|
flowchart: {
|
||||||
|
// defaultRenderer: 'dagre-wrapper',
|
||||||
|
nodeSpacing: 10,
|
||||||
|
curve: 'cardinal',
|
||||||
|
htmlLabels: true,
|
||||||
|
},
|
||||||
|
htmlLabels: false,
|
||||||
|
// gantt: { axisFormat: '%m/%d/%Y' },
|
||||||
|
sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false },
|
||||||
|
// sequenceDiagram: { actorMargin: 300 } // deprecated
|
||||||
|
// fontFamily: '"times", sans-serif',
|
||||||
|
// fontFamily: 'courier',
|
||||||
|
fontSize: 18,
|
||||||
|
curve: 'basis',
|
||||||
|
securityLevel: 'strict',
|
||||||
|
startOnLoad: false,
|
||||||
|
secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize'],
|
||||||
|
// themeVariables: {relationLabelColor: 'red'}
|
||||||
|
});
|
||||||
|
function callback() {
|
||||||
|
alert('It worked');
|
||||||
|
}
|
||||||
|
|
||||||
|
let diagram = 'classDiagram\n';
|
||||||
|
diagram += '`Class<img src=x on';
|
||||||
|
diagram += 'error=xssAttack()>` <|-- `Class2<img src=x on';
|
||||||
|
diagram += 'error=xssAttack()>`';
|
||||||
|
|
||||||
|
console.log(diagram);
|
||||||
|
// document.querySelector('#diagram').innerHTML = diagram;
|
||||||
|
const { svg } = await mermaid.render('diagram', diagram);
|
||||||
|
document.querySelector('#res').innerHTML = svg;
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
|
@ -42,6 +42,16 @@
|
||||||
font-size: 72px;
|
font-size: 72px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
<script>
|
||||||
|
function xssAttack() {
|
||||||
|
const div = document.createElement('div');
|
||||||
|
div.id = 'the-malware';
|
||||||
|
div.className = 'malware';
|
||||||
|
div.innerHTML = 'XSS Succeeded';
|
||||||
|
document.getElementsByTagName('body')[0].appendChild(div);
|
||||||
|
throw new Error('XSS Succeeded');
|
||||||
|
}
|
||||||
|
</script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div>Security check</div>
|
<div>Security check</div>
|
||||||
|
@ -84,14 +94,6 @@
|
||||||
function callback() {
|
function callback() {
|
||||||
alert('It worked');
|
alert('It worked');
|
||||||
}
|
}
|
||||||
function xssAttack() {
|
|
||||||
const div = document.createElement('div');
|
|
||||||
div.id = 'the-malware';
|
|
||||||
div.className = 'malware';
|
|
||||||
div.innerHTML = 'XSS Succeeded';
|
|
||||||
document.getElementsByTagName('body')[0].appendChild(div);
|
|
||||||
throw new Error('XSS Succeeded');
|
|
||||||
}
|
|
||||||
let diagram = 'graph LR\n';
|
let diagram = 'graph LR\n';
|
||||||
diagram += 'B-->D("<img onerror=location=`java';
|
diagram += 'B-->D("<img onerror=location=`java';
|
||||||
// diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n";
|
// diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n";
|
||||||
|
|
|
@ -42,6 +42,16 @@
|
||||||
font-size: 72px;
|
font-size: 72px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
<script>
|
||||||
|
function xssAttack() {
|
||||||
|
const div = document.createElement('div');
|
||||||
|
div.id = 'the-malware';
|
||||||
|
div.className = 'malware';
|
||||||
|
div.innerHTML = 'XSS Succeeded';
|
||||||
|
document.getElementsByTagName('body')[0].appendChild(div);
|
||||||
|
throw new Error('XSS Succeeded');
|
||||||
|
}
|
||||||
|
</script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div>Security check</div>
|
<div>Security check</div>
|
||||||
|
|
|
@ -42,6 +42,16 @@
|
||||||
font-size: 72px;
|
font-size: 72px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
<script>
|
||||||
|
function xssAttack() {
|
||||||
|
const div = document.createElement('div');
|
||||||
|
div.id = 'the-malware';
|
||||||
|
div.className = 'malware';
|
||||||
|
div.innerHTML = 'XSS Succeeded';
|
||||||
|
document.getElementsByTagName('body')[0].appendChild(div);
|
||||||
|
throw new Error('XSS Succeeded');
|
||||||
|
}
|
||||||
|
</script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div>Security check</div>
|
<div>Security check</div>
|
||||||
|
|
|
@ -42,6 +42,16 @@
|
||||||
font-size: 72px;
|
font-size: 72px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
<script>
|
||||||
|
function xssAttack() {
|
||||||
|
const div = document.createElement('div');
|
||||||
|
div.id = 'the-malware';
|
||||||
|
div.className = 'malware';
|
||||||
|
div.innerHTML = 'XSS Succeeded';
|
||||||
|
document.getElementsByTagName('body')[0].appendChild(div);
|
||||||
|
throw new Error('XSS Succeeded');
|
||||||
|
}
|
||||||
|
</script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div>Security check</div>
|
<div>Security check</div>
|
||||||
|
|
|
@ -42,6 +42,16 @@
|
||||||
font-size: 72px;
|
font-size: 72px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
<script>
|
||||||
|
function xssAttack() {
|
||||||
|
const div = document.createElement('div');
|
||||||
|
div.id = 'the-malware';
|
||||||
|
div.className = 'malware';
|
||||||
|
div.innerHTML = 'XSS Succeeded';
|
||||||
|
document.getElementsByTagName('body')[0].appendChild(div);
|
||||||
|
throw new Error('XSS Succeeded');
|
||||||
|
}
|
||||||
|
</script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div>Security check</div>
|
<div>Security check</div>
|
||||||
|
|
|
@ -173,7 +173,7 @@
|
||||||
Container(mobile, "Mobile App", "Xamarin", "Provides a limited subset of the Internet Banking functionality to customers via their mobile device.")
|
Container(mobile, "Mobile App", "Xamarin", "Provides a limited subset of the Internet Banking functionality to customers via their mobile device.")
|
||||||
}
|
}
|
||||||
|
|
||||||
Deployment_Node(comp, "Customer's computer", "Mircosoft Windows or Apple macOS"){
|
Deployment_Node(comp, "Customer's computer", "Microsoft Windows or Apple macOS"){
|
||||||
Deployment_Node(browser, "Web Browser", "Google Chrome, Mozilla Firefox,<br/> Apple Safari or Microsoft Edge"){
|
Deployment_Node(browser, "Web Browser", "Google Chrome, Mozilla Firefox,<br/> Apple Safari or Microsoft Edge"){
|
||||||
Container(spa, "Single Page Application", "JavaScript and Angular", "Provides all of the Internet Banking functionality to customers via their web browser.")
|
Container(spa, "Single Page Application", "JavaScript and Angular", "Provides all of the Internet Banking functionality to customers via their web browser.")
|
||||||
}
|
}
|
||||||
|
|
|
@ -5,6 +5,8 @@
|
||||||
<title>Mermaid development page</title>
|
<title>Mermaid development page</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<pre class="mermaid">info</pre>
|
||||||
|
|
||||||
<pre id="diagram" class="mermaid">
|
<pre id="diagram" class="mermaid">
|
||||||
graph TB
|
graph TB
|
||||||
a --> b
|
a --> b
|
||||||
|
@ -30,5 +32,7 @@ graph TB
|
||||||
console.log(svg);
|
console.log(svg);
|
||||||
el.innerHTML = svg;
|
el.innerHTML = svg;
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<script src="/dev/reload.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -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);
|
|
@ -0,0 +1,35 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||||
|
<title>Mermaid Flowchart ELK Test Page</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<h1>Flowchart ELK</h1>
|
||||||
|
<pre class="mermaid">
|
||||||
|
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))
|
||||||
|
|
||||||
|
</pre>
|
||||||
|
|
||||||
|
<script type="module">
|
||||||
|
import mermaid from './mermaid.esm.mjs';
|
||||||
|
import flowchartELK from './mermaid-flowchart-elk.esm.mjs';
|
||||||
|
await mermaid.registerExternalDiagrams([flowchartELK]);
|
||||||
|
mermaid.initialize({
|
||||||
|
logLevel: 3,
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
|
@ -22,7 +22,7 @@
|
||||||
---
|
---
|
||||||
graph LR
|
graph LR
|
||||||
accTitle: This is a complicated flow
|
accTitle: This is a complicated flow
|
||||||
accDescr: This is the descriptoin for the complicated flow.
|
accDescr: This is the description for the complicated flow.
|
||||||
|
|
||||||
sid-B3655226-6C29-4D00-B685-3D5C734DC7E1["
|
sid-B3655226-6C29-4D00-B685-3D5C734DC7E1["
|
||||||
|
|
||||||
|
|
358
demos/git.html
358
demos/git.html
|
@ -14,30 +14,364 @@
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<h1>Git diagram demo</h1>
|
<h1>Git graph demo</h1>
|
||||||
|
<h2>Simple "branch and merge" graph</h2>
|
||||||
<pre class="mermaid">
|
<pre class="mermaid">
|
||||||
---
|
---
|
||||||
title: Simple Git diagram
|
title: Simple "branch and merge" (left-to-right)
|
||||||
---
|
---
|
||||||
gitGraph:
|
gitGraph LR:
|
||||||
options
|
|
||||||
{
|
|
||||||
"nodeSpacing": 50,
|
|
||||||
"nodeRadius": 5
|
|
||||||
}
|
|
||||||
end
|
|
||||||
branch master
|
|
||||||
commit
|
commit
|
||||||
branch newbranch
|
branch newbranch
|
||||||
checkout newbranch
|
checkout newbranch
|
||||||
commit
|
commit
|
||||||
|
checkout main
|
||||||
|
merge newbranch
|
||||||
|
</pre>
|
||||||
|
<pre class="mermaid">
|
||||||
|
---
|
||||||
|
title: Simple "branch and merge" (top-to-bottom)
|
||||||
|
---
|
||||||
|
gitGraph TB:
|
||||||
commit
|
commit
|
||||||
checkout master
|
branch newbranch
|
||||||
|
checkout newbranch
|
||||||
commit
|
commit
|
||||||
|
checkout main
|
||||||
|
merge newbranch
|
||||||
|
</pre>
|
||||||
|
<h2>Continuous development graph</h2>
|
||||||
|
<pre class="mermaid">
|
||||||
|
---
|
||||||
|
title: Continuous development (left-to-right)
|
||||||
|
---
|
||||||
|
gitGraph LR:
|
||||||
|
commit
|
||||||
|
branch develop
|
||||||
|
checkout develop
|
||||||
|
commit
|
||||||
|
checkout main
|
||||||
|
merge develop
|
||||||
|
checkout develop
|
||||||
|
commit
|
||||||
|
checkout main
|
||||||
|
merge develop
|
||||||
|
</pre>
|
||||||
|
<pre class="mermaid">
|
||||||
|
---
|
||||||
|
title: Continuous development (top-to-bottom)
|
||||||
|
---
|
||||||
|
gitGraph TB:
|
||||||
|
commit
|
||||||
|
branch develop
|
||||||
|
checkout develop
|
||||||
|
commit
|
||||||
|
checkout main
|
||||||
|
merge develop
|
||||||
|
checkout develop
|
||||||
|
commit
|
||||||
|
checkout main
|
||||||
|
merge develop
|
||||||
|
</pre>
|
||||||
|
<h2>Merge feature to advanced main graph</h2>
|
||||||
|
<pre class="mermaid">
|
||||||
|
---
|
||||||
|
title: Merge feature to advanced main (left-to-right)
|
||||||
|
---
|
||||||
|
gitGraph LR:
|
||||||
|
commit
|
||||||
|
branch newbranch
|
||||||
|
checkout newbranch
|
||||||
|
commit
|
||||||
|
checkout main
|
||||||
commit
|
commit
|
||||||
merge newbranch
|
merge newbranch
|
||||||
</pre>
|
</pre>
|
||||||
|
<pre class="mermaid">
|
||||||
|
---
|
||||||
|
title: Merge feature to advanced main (top-to-bottom)
|
||||||
|
---
|
||||||
|
gitGraph TB:
|
||||||
|
commit
|
||||||
|
branch newbranch
|
||||||
|
checkout newbranch
|
||||||
|
commit
|
||||||
|
checkout main
|
||||||
|
commit
|
||||||
|
merge newbranch
|
||||||
|
</pre>
|
||||||
|
<h2>Two-way merges</h2>
|
||||||
|
<pre class="mermaid">
|
||||||
|
---
|
||||||
|
title: Two-way merges (left-to-right)
|
||||||
|
---
|
||||||
|
gitGraph LR:
|
||||||
|
commit
|
||||||
|
branch develop
|
||||||
|
checkout develop
|
||||||
|
commit
|
||||||
|
checkout main
|
||||||
|
merge develop
|
||||||
|
commit
|
||||||
|
checkout develop
|
||||||
|
merge main
|
||||||
|
commit
|
||||||
|
checkout main
|
||||||
|
merge develop
|
||||||
|
</pre>
|
||||||
|
<pre class="mermaid">
|
||||||
|
---
|
||||||
|
title: Two-way merges (top-to-bottom)
|
||||||
|
---
|
||||||
|
gitGraph TB:
|
||||||
|
commit
|
||||||
|
branch develop
|
||||||
|
checkout develop
|
||||||
|
commit
|
||||||
|
checkout main
|
||||||
|
merge develop
|
||||||
|
commit
|
||||||
|
checkout develop
|
||||||
|
merge main
|
||||||
|
commit
|
||||||
|
checkout main
|
||||||
|
merge develop
|
||||||
|
</pre>
|
||||||
|
<h2>Cherry-pick from branch graph</h2>
|
||||||
|
<pre class="mermaid">
|
||||||
|
---
|
||||||
|
title: Cherry-pick from branch (left-to-right)
|
||||||
|
---
|
||||||
|
gitGraph LR:
|
||||||
|
commit
|
||||||
|
branch newbranch
|
||||||
|
checkout newbranch
|
||||||
|
commit id: "Pick me"
|
||||||
|
checkout main
|
||||||
|
commit
|
||||||
|
checkout newbranch
|
||||||
|
commit
|
||||||
|
checkout main
|
||||||
|
cherry-pick id: "Pick me"
|
||||||
|
</pre>
|
||||||
|
<pre class="mermaid">
|
||||||
|
---
|
||||||
|
title: Cherry-pick from branch (top-to-bottom)
|
||||||
|
---
|
||||||
|
gitGraph TB:
|
||||||
|
commit
|
||||||
|
branch newbranch
|
||||||
|
checkout newbranch
|
||||||
|
commit id: "Pick me"
|
||||||
|
checkout main
|
||||||
|
commit
|
||||||
|
checkout newbranch
|
||||||
|
commit
|
||||||
|
checkout main
|
||||||
|
cherry-pick id: "Pick me"
|
||||||
|
</pre>
|
||||||
|
<h2>Cherry-pick from main graph</h2>
|
||||||
|
<pre class="mermaid">
|
||||||
|
---
|
||||||
|
title: Cherry-pick from main (left-to-right)
|
||||||
|
---
|
||||||
|
gitGraph LR:
|
||||||
|
commit
|
||||||
|
branch develop
|
||||||
|
commit
|
||||||
|
checkout main
|
||||||
|
commit id:"A"
|
||||||
|
checkout develop
|
||||||
|
commit
|
||||||
|
cherry-pick id: "A"
|
||||||
|
</pre>
|
||||||
|
<pre class="mermaid">
|
||||||
|
---
|
||||||
|
title: Cherry-pick from main (top-to-bottom)
|
||||||
|
---
|
||||||
|
gitGraph TB:
|
||||||
|
commit
|
||||||
|
branch develop
|
||||||
|
commit
|
||||||
|
checkout main
|
||||||
|
commit id:"A"
|
||||||
|
checkout develop
|
||||||
|
commit
|
||||||
|
cherry-pick id: "A"
|
||||||
|
</pre>
|
||||||
|
<h2>Cherry-pick then merge graph</h2>
|
||||||
|
<pre class="mermaid">
|
||||||
|
---
|
||||||
|
title: Cherry-pick then merge (left-to-right)
|
||||||
|
---
|
||||||
|
gitGraph LR:
|
||||||
|
commit
|
||||||
|
branch newbranch
|
||||||
|
checkout newbranch
|
||||||
|
commit id: "Pick me"
|
||||||
|
checkout main
|
||||||
|
commit
|
||||||
|
checkout newbranch
|
||||||
|
commit
|
||||||
|
checkout main
|
||||||
|
cherry-pick id: "Pick me"
|
||||||
|
merge newbranch
|
||||||
|
</pre>
|
||||||
|
<pre class="mermaid">
|
||||||
|
---
|
||||||
|
title: Cherry-pick then merge (top-to-bottom)
|
||||||
|
---
|
||||||
|
gitGraph TB:
|
||||||
|
commit
|
||||||
|
branch newbranch
|
||||||
|
checkout newbranch
|
||||||
|
commit id: "Pick me"
|
||||||
|
checkout main
|
||||||
|
commit
|
||||||
|
checkout newbranch
|
||||||
|
commit
|
||||||
|
checkout main
|
||||||
|
cherry-pick id: "Pick me"
|
||||||
|
merge newbranch
|
||||||
|
</pre>
|
||||||
|
<h2>Merge from main onto undeveloped branch graph</h2>
|
||||||
|
<pre class="mermaid">
|
||||||
|
---
|
||||||
|
title: Merge from main onto undeveloped branch (left-to-right)
|
||||||
|
---
|
||||||
|
gitGraph LR:
|
||||||
|
commit
|
||||||
|
branch develop
|
||||||
|
commit
|
||||||
|
checkout main
|
||||||
|
commit
|
||||||
|
checkout develop
|
||||||
|
merge main
|
||||||
|
</pre>
|
||||||
|
<pre class="mermaid">
|
||||||
|
---
|
||||||
|
title: Merge from main onto undeveloped branch (top-to-bottom)
|
||||||
|
---
|
||||||
|
gitGraph TB:
|
||||||
|
commit
|
||||||
|
branch develop
|
||||||
|
commit
|
||||||
|
checkout main
|
||||||
|
commit
|
||||||
|
checkout develop
|
||||||
|
merge main
|
||||||
|
</pre>
|
||||||
|
<h2>Merge from main onto developed branch graph</h2>
|
||||||
|
<pre class="mermaid">
|
||||||
|
---
|
||||||
|
title: Merge from main onto developed branch (left-to-right)
|
||||||
|
---
|
||||||
|
gitGraph LR:
|
||||||
|
commit
|
||||||
|
branch develop
|
||||||
|
commit
|
||||||
|
checkout main
|
||||||
|
commit
|
||||||
|
checkout develop
|
||||||
|
commit
|
||||||
|
merge main
|
||||||
|
</pre>
|
||||||
|
<pre class="mermaid">
|
||||||
|
---
|
||||||
|
title: Merge from main onto developed branch (top-to-bottom)
|
||||||
|
---
|
||||||
|
gitGraph TB:
|
||||||
|
commit
|
||||||
|
branch develop
|
||||||
|
commit
|
||||||
|
checkout main
|
||||||
|
commit
|
||||||
|
checkout develop
|
||||||
|
commit
|
||||||
|
merge main
|
||||||
|
</pre>
|
||||||
|
<h2>Two branches from same commit graph</h2>
|
||||||
|
<pre class="mermaid">
|
||||||
|
---
|
||||||
|
title: Two branches from same commit (left-to-right)
|
||||||
|
---
|
||||||
|
gitGraph LR:
|
||||||
|
commit
|
||||||
|
commit
|
||||||
|
branch feature-001
|
||||||
|
commit
|
||||||
|
commit
|
||||||
|
checkout main
|
||||||
|
branch feature-002
|
||||||
|
commit
|
||||||
|
checkout feature-001
|
||||||
|
merge feature-002
|
||||||
|
</pre>
|
||||||
|
<pre class="mermaid">
|
||||||
|
---
|
||||||
|
title: Two branches from same commit (top-to-bottom)
|
||||||
|
---
|
||||||
|
gitGraph TB:
|
||||||
|
commit
|
||||||
|
commit
|
||||||
|
branch feature-001
|
||||||
|
commit
|
||||||
|
commit
|
||||||
|
checkout main
|
||||||
|
branch feature-002
|
||||||
|
commit
|
||||||
|
checkout feature-001
|
||||||
|
merge feature-002
|
||||||
|
</pre>
|
||||||
|
<h2>Three branches and a cherry-pick from each graph</h2>
|
||||||
|
<pre class="mermaid">
|
||||||
|
---
|
||||||
|
title: Three branches and a cherry-pick from each (left-to-right)
|
||||||
|
---
|
||||||
|
gitGraph LR:
|
||||||
|
commit id: "ZERO"
|
||||||
|
branch develop
|
||||||
|
commit id:"A"
|
||||||
|
checkout main
|
||||||
|
commit id:"ONE"
|
||||||
|
checkout develop
|
||||||
|
commit id:"B"
|
||||||
|
branch featureA
|
||||||
|
commit id:"FIX"
|
||||||
|
commit id: "FIX-2"
|
||||||
|
checkout main
|
||||||
|
commit id:"TWO"
|
||||||
|
cherry-pick id:"A"
|
||||||
|
commit id:"THREE"
|
||||||
|
cherry-pick id:"FIX"
|
||||||
|
checkout develop
|
||||||
|
commit id:"C"
|
||||||
|
merge featureA
|
||||||
|
</pre>
|
||||||
|
<pre class="mermaid">
|
||||||
|
---
|
||||||
|
title: Three branches and a cherry-pick from each (top-to-bottom)
|
||||||
|
---
|
||||||
|
gitGraph TB:
|
||||||
|
commit id: "ZERO"
|
||||||
|
branch develop
|
||||||
|
commit id:"A"
|
||||||
|
checkout main
|
||||||
|
commit id:"ONE"
|
||||||
|
checkout develop
|
||||||
|
commit id:"B"
|
||||||
|
branch featureA
|
||||||
|
commit id:"FIX"
|
||||||
|
commit id: "FIX-2"
|
||||||
|
checkout main
|
||||||
|
commit id:"TWO"
|
||||||
|
cherry-pick id:"A"
|
||||||
|
commit id:"THREE"
|
||||||
|
cherry-pick id:"FIX"
|
||||||
|
checkout develop
|
||||||
|
commit id:"C"
|
||||||
|
merge featureA
|
||||||
|
</pre>
|
||||||
<script type="module">
|
<script type="module">
|
||||||
import mermaid from './mermaid.esm.mjs';
|
import mermaid from './mermaid.esm.mjs';
|
||||||
const ALLOWED_TAGS = [
|
const ALLOWED_TAGS = [
|
||||||
|
|
|
@ -60,6 +60,9 @@
|
||||||
<li>
|
<li>
|
||||||
<h2><a href="./quadrantchart.html">Quadrant charts</a></h2>
|
<h2><a href="./quadrantchart.html">Quadrant charts</a></h2>
|
||||||
</li>
|
</li>
|
||||||
|
<li>
|
||||||
|
<h2><a href="./xychart.html">XY charts</a></h2>
|
||||||
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<h2><a href="./requirements.html">Requirements</a></h2>
|
<h2><a href="./requirements.html">Requirements</a></h2>
|
||||||
</li>
|
</li>
|
||||||
|
|
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue