Compare commits

..

25 Commits

Author SHA1 Message Date
Sidharth Vinod
4f9cf4f9fc Merge branch 'develop' of https://github.com/mermaid-js/mermaid into xychart
* 'develop' of https://github.com/mermaid-js/mermaid: (546 commits)
  rebuild
  chore: Use string templates
  chore: Update docs
  chore: Fix docs
  chore: Add argos token to cypress config.
  chore: Remove cy.get('svg') calls
  chore: fix Argos parallel
  chore: Support local screenshot testing without applitools or argos
  chore: Skip checking drupal links
  chore: Remove reference screenshot generation from E2E
  chore: Remove cytoscape patch.
  chore(argos): disable matchImageSnapshot
  chore(argos): put parallel mode only when necessary
  chore(argos): setup parallel mode
  chore: setup Argos Visual Testing on E2E
  Fixed linters
  Added more specs for elk detector
  Fixed wrong elk detector, check only beginning of the line for diagram keywords
  Removed unused patch
  Fix cytoscape patch
  ...
2024-06-21 10:24:58 +05:30
Sidharth Vinod
90be8dedf6 Merge pull request #5167 from camueller/feature/xychart_multiple_datasets
xychart: support for multiple datasets added
2024-02-05 13:06:45 +05:30
Sidharth Vinod
f1490ff679 Merge branch 'develop' into feature/xychart_multiple_datasets 2024-01-31 17:09:56 +05:30
Axel Müller
25160d9688 axis calculation fixed for mix of line and bar charts 2024-01-27 17:11:40 +01:00
Axel Müller
533a921ef5 axis calculation fixed 2024-01-27 15:21:27 +01:00
Axel Müller
3bef03f568 Merge branch 'develop' into feature/xychart_multiple_datasets 2024-01-27 14:07:51 +01:00
Axel Müller
737f4f0cf3 axis calculation fixed 2024-01-27 14:06:30 +01:00
Axel Müller
71e5a2b3a3 Merge branch 'develop' into feature/xychart_multiple_datasets 2024-01-24 19:13:49 +01:00
Axel Müller
54f1435839 axis calculation fixed 2024-01-24 19:07:00 +01:00
Axel Müller
48a20c5cb8 more tests added 2024-01-22 15:59:33 +01:00
Axel Müller
5f4f1cc08d Merge branch 'develop' into feature/xychart_multiple_datasets 2024-01-20 10:25:55 +01:00
Axel Müller
da0a4ae37d multiple line charts fixed 2024-01-20 08:46:39 +01:00
Axel Müller
2972012059 use edge case for better coverage 2024-01-16 18:41:30 +01:00
Axel Müller
cf641ba4fd Merge branch 'develop' into feature/xychart_multiple_datasets 2024-01-16 18:17:32 +01:00
Axel Müller
39e5064019 Merge branch 'develop' into feature/xychart_multiple_datasets 2024-01-13 13:47:26 +01:00
Axel Müller
7830d0c4bf fix 0 values 2024-01-13 13:39:55 +01:00
Axel Müller
60d34bdc72 fix missing values 2024-01-13 13:30:18 +01:00
Axel Müller
3262a06a8e fix 0 values 2024-01-13 11:54:14 +01:00
Axel Müller
506314598e review findings 2024-01-13 07:39:58 +01:00
Axel Müller
25a9479acf documentation updated 2024-01-08 17:13:59 +01:00
Axel Müller
1273f440a8 e2e tests added 2024-01-08 16:41:53 +01:00
Axel Müller
e1d085925e parser fixed for > 2 datasets
some unit tests added
2024-01-07 17:10:36 +01:00
Axel Müller
39d175314c formatting fixed 2024-01-07 07:33:32 +01:00
Axel Müller
17426f0a97 unit tests fixed 2024-01-07 07:21:04 +01:00
Axel Müller
a36fa7cd2f support for multiple datasets added 2023-12-27 12:13:30 +01:00
936 changed files with 25443 additions and 94516 deletions

View File

@@ -1,9 +1,3 @@
export interface PackageOptions {
name: string;
packageName: string;
file: string;
}
/** /**
* Shared common options for both ESBuild and Vite * Shared common options for both ESBuild and Vite
*/ */
@@ -28,19 +22,9 @@ export const packageOptions = {
packageName: 'mermaid-zenuml', packageName: 'mermaid-zenuml',
file: 'detector.ts', file: 'detector.ts',
}, },
'mermaid-layout-elk': { 'mermaid-flowchart-elk': {
name: 'mermaid-layout-elk', name: 'mermaid-flowchart-elk',
packageName: 'mermaid-layout-elk', packageName: 'mermaid-flowchart-elk',
file: 'layouts.ts', file: 'detector.ts',
}, },
'mermaid-layout-tidy-tree': { } as const;
name: 'mermaid-layout-tidy-tree',
packageName: 'mermaid-layout-tidy-tree',
file: 'index.ts',
},
examples: {
name: 'mermaid-examples',
packageName: 'examples',
file: 'index.ts',
},
} as const satisfies Record<string, PackageOptions>;

View File

@@ -1,7 +1,6 @@
import jison from 'jison'; import jison from 'jison';
export const transformJison = (src: string): string => { export const transformJison = (src: string): string => {
// @ts-ignore - Jison is not typed properly
const parser = new jison.Generator(src, { const parser = new jison.Generator(src, {
moduleType: 'js', moduleType: 'js',
'token-stack': true, 'token-stack': true,

View File

@@ -19,15 +19,12 @@ const MERMAID_CONFIG_DIAGRAM_KEYS = [
'xyChart', 'xyChart',
'requirement', 'requirement',
'mindmap', 'mindmap',
'kanban',
'timeline', 'timeline',
'gitGraph', 'gitGraph',
'c4', 'c4',
'sankey', 'sankey',
'block', 'block',
'packet', 'packet',
'architecture',
'radar',
] as const; ] as const;
/** /**

View File

@@ -1,4 +1,3 @@
/* eslint-disable no-console */
import { packageOptions } from './common.js'; import { packageOptions } from './common.js';
import { execSync } from 'child_process'; import { execSync } from 'child_process';
@@ -6,20 +5,11 @@ const buildType = (packageName: string) => {
console.log(`Building types for ${packageName}`); console.log(`Building types for ${packageName}`);
try { try {
const out = execSync(`tsc -p ./packages/${packageName}/tsconfig.json --emitDeclarationOnly`); const out = execSync(`tsc -p ./packages/${packageName}/tsconfig.json --emitDeclarationOnly`);
if (out.length > 0) { out.length > 0 && console.log(out.toString());
console.log(out.toString());
}
} catch (e) { } catch (e) {
if (e.stdout.length > 0) { console.error(e);
console.error(e.stdout.toString()); e.stdout.length > 0 && console.error(e.stdout.toString());
} e.stderr.length > 0 && console.error(e.stderr.toString());
if (e.stderr.length > 0) {
console.error(e.stderr.toString());
}
// Exit the build process if we are in CI
if (process.env.CI) {
throw new Error(`Failed to build types for ${packageName}`);
}
} }
}; };

View File

@@ -1,8 +0,0 @@
# Changesets
Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
with multi-package repos, or single-package repos to help you version and publish your code. You can
find the full documentation for it [in our repository](https://github.com/changesets/changesets)
We have a quick list of common questions to get you started engaging with this project in
[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)

View File

@@ -1,5 +0,0 @@
---
'mermaid': patch
---
fix: Render newlines as spaces in class diagrams

View File

@@ -1,12 +0,0 @@
{
"$schema": "https://unpkg.com/@changesets/config@3.0.0/schema.json",
"changelog": ["@changesets/changelog-github", { "repo": "mermaid-js/mermaid" }],
"commit": false,
"fixed": [],
"linked": [],
"access": "public",
"baseBranch": "master",
"updateInternalDependencies": "patch",
"bumpVersionsWithWorkspaceProtocolOnly": true,
"ignore": ["@mermaid-js/docs", "@mermaid-js/webpack-test", "@mermaid-js/mermaid-example-diagram"]
}

View File

@@ -1,5 +0,0 @@
---
'mermaid': patch
---
fix: Handle arrows correctly when auto number is enabled

View File

@@ -1,5 +0,0 @@
---
'mermaid': minor
---
Add IDs in architecture diagrams

View File

@@ -1,5 +0,0 @@
---
'mermaid': patch
---
fix: Ensure edge label color is applied when using classDef with edge IDs

View File

@@ -1,5 +0,0 @@
---
'mermaid': minor
---
feat: Added support for new participant types (`actor`, `boundary`, `control`, `entity`, `database`, `collections`, `queue`) in `sequenceDiagram`.

View File

@@ -1,7 +0,0 @@
---
'mermaid': minor
'@mermaid-js/layout-tidy-tree': minor
'@mermaid-js/layout-elk': minor
---
feat: Update mindmap rendering to support multiple layouts, improved edge intersections, and new shapes

View File

@@ -1,5 +0,0 @@
---
'mermaid': minor
---
feat: Add IDs in architecture diagrams

View File

@@ -1,9 +0,0 @@
---
'mermaid': patch
---
chore: revert marked dependency from ^15.0.7 to ^16.0.0
- Reverted marked package version to ^16.0.0 for better compatibility
- This is a dependency update that maintains API compatibility
- All tests pass with the updated version

View File

@@ -13,7 +13,6 @@ bqstring
BQUOTE BQUOTE
bramp bramp
BRKT BRKT
brotli
callbackargs callbackargs
callbackname callbackname
classdef classdef
@@ -26,10 +25,8 @@ concat
controlx controlx
controly controly
CSSCLASS CSSCLASS
curv
CYLINDEREND CYLINDEREND
CYLINDERSTART CYLINDERSTART
DAGA
datakey datakey
DEND DEND
descr descr
@@ -47,16 +44,15 @@ edgesep
EMPTYSTR EMPTYSTR
enddate enddate
ERDIAGRAM ERDIAGRAM
eslint
flatmap flatmap
forwardable forwardable
frontmatter frontmatter
funs funs
gantt gantt
GENERICTYPE GENERICTYPE
getBoundarys
grammr grammr
graphtype graphtype
halign
iife iife
interp interp
introdcued introdcued
@@ -68,7 +64,6 @@ Kaufmann
keyify keyify
LABELPOS LABELPOS
LABELTYPE LABELTYPE
layoutstop
lcov lcov
LEFTOF LEFTOF
Lexa Lexa
@@ -88,14 +83,12 @@ NODIR
NSTR NSTR
outdir outdir
Qcontrolx Qcontrolx
QSTR
reinit reinit
rels rels
reqs reqs
rewritelinks rewritelinks
rgba rgba
RIGHTOF RIGHTOF
roughjs
sankey sankey
sequencenumber sequencenumber
shrc shrc
@@ -115,17 +108,13 @@ strikethrough
stringifying stringifying
struct struct
STYLECLASS STYLECLASS
STYLEDEF
STYLEOPTS STYLEOPTS
subcomponent subcomponent
subcomponents subcomponents
subconfig
SUBROUTINEEND SUBROUTINEEND
SUBROUTINESTART SUBROUTINESTART
Subschemas Subschemas
substr substr
SVGG
SVGSVG
TAGEND TAGEND
TAGSTART TAGSTART
techn techn
@@ -136,13 +125,11 @@ titlevalue
topbar topbar
TRAPEND TRAPEND
TRAPSTART TRAPSTART
treemap
ts-nocheck ts-nocheck
tsdoc tsdoc
typeof typeof
typestr typestr
unshift unshift
urlsafe
verifymethod verifymethod
VERIFYMTHD VERIFYMTHD
WARN_DOCSDIR_DOESNT_MATCH WARN_DOCSDIR_DOESNT_MATCH

View File

@@ -2,11 +2,7 @@
Ashish Jain Ashish Jain
cpettitt cpettitt
Dong Cai Dong Cai
fourcube
knsv
Knut Sveidqvist
Nikolay Rozhkov Nikolay Rozhkov
Peng Xiao Peng Xiao
Per Brolin
Sidharth Vinod
subhash-halder subhash-halder
Vinod Sidharth

View File

@@ -28,9 +28,6 @@ dictionaryDefinitions:
- name: suggestions - name: suggestions
words: words:
- none - none
- disp
- subproc
- tria
suggestWords: suggestWords:
- seperator:separator - seperator:separator
- vertice:vertex - vertice:vertex

View File

@@ -20,19 +20,14 @@ dagre-d3
Deepdwn Deepdwn
Docsify Docsify
Docsy Docsy
Doctave
DokuWiki DokuWiki
dompurify dompurify
elkjs elkjs
fcose
fontawesome fontawesome
Fonticons
Forgejo
Foswiki Foswiki
Gitea Gitea
graphlib graphlib
Grav Grav
icones
iconify iconify
Inkdrop Inkdrop
jiti jiti
@@ -59,17 +54,13 @@ presetAttributify
pyplot pyplot
redmine redmine
rehype rehype
roughjs
rscratch rscratch
shiki
Slidev
sparkline sparkline
sphinxcontrib sphinxcontrib
ssim ssim
stylis stylis
Swimm Swimm
tsbuildinfo tsbuildinfo
tseslint
Tuleap Tuleap
Typora Typora
unocss unocss

View File

@@ -1,34 +1,26 @@
Adamiecki Adamiecki
arrowend arrowend
Bendpoints
bmatrix bmatrix
braintree braintree
catmull catmull
compositTitleSize compositTitleSize
cose
curv
doublecircle doublecircle
elem
elems elems
gantt gantt
gitgraph gitgraph
gzipped gzipped
handDrawn knsv
headerless Knut
kanban
marginx marginx
marginy marginy
Markdownish Markdownish
mermaidchart
mermaidjs mermaidjs
mindmap mindmap
mindmaps mindmaps
mrtree
multigraph multigraph
nodesep nodesep
NOTEGROUP NOTEGROUP
Pinterest Pinterest
procs
rankdir rankdir
ranksep ranksep
rect rect
@@ -37,6 +29,7 @@ sandboxed
siebling siebling
statediagram statediagram
substate substate
Sveidqvist
unfixable unfixable
Viewbox Viewbox
viewports viewports

View File

@@ -1,8 +1 @@
BRANDES
Buzan
circo
handDrawn
KOEPF
neato
newbranch newbranch
validify

View File

@@ -1,19 +1,14 @@
import { build } from 'esbuild'; import { build } from 'esbuild';
import { cp, mkdir, readFile, rename, writeFile } from 'node:fs/promises'; import { mkdir, writeFile } from 'node:fs/promises';
import { execSync } from 'child_process';
import { packageOptions } from '../.build/common.js'; import { packageOptions } from '../.build/common.js';
import { generateLangium } from '../.build/generateLangium.js'; import { generateLangium } from '../.build/generateLangium.js';
import type { MermaidBuildOptions } from './util.js'; import { MermaidBuildOptions, defaultOptions, getBuildConfig } from './util.js';
import { defaultOptions, getBuildConfig } from './util.js';
const shouldVisualize = process.argv.includes('--visualize'); const shouldVisualize = process.argv.includes('--visualize');
const buildPackage = async (entryName: keyof typeof packageOptions) => { const buildPackage = async (entryName: keyof typeof packageOptions) => {
const commonOptions: MermaidBuildOptions = { const commonOptions = { ...defaultOptions, entryName } as const;
...defaultOptions, const buildConfigs = [
options: packageOptions[entryName],
} as const;
const buildConfigs: MermaidBuildOptions[] = [
// package.mjs // package.mjs
{ ...commonOptions }, { ...commonOptions },
// package.min.mjs // package.min.mjs
@@ -32,27 +27,6 @@ const buildPackage = async (entryName: keyof typeof packageOptions) => {
// mermaid.js // mermaid.js
{ ...iifeOptions }, { ...iifeOptions },
// mermaid.min.js // mermaid.min.js
{ ...iifeOptions, minify: true, metafile: shouldVisualize },
// mermaid.tiny.min.js
{
...iifeOptions,
minify: true,
includeLargeFeatures: false,
metafile: shouldVisualize,
sourcemap: false,
}
);
}
if (entryName === 'mermaid-zenuml') {
const iifeOptions: MermaidBuildOptions = {
...commonOptions,
format: 'iife',
globalName: 'mermaid-zenuml',
};
buildConfigs.push(
// mermaid-zenuml.js
{ ...iifeOptions },
// mermaid-zenuml.min.js
{ ...iifeOptions, minify: true, metafile: shouldVisualize } { ...iifeOptions, minify: true, metafile: shouldVisualize }
); );
} }
@@ -61,11 +35,11 @@ const buildPackage = async (entryName: keyof typeof packageOptions) => {
if (shouldVisualize) { if (shouldVisualize) {
for (const { metafile } of results) { for (const { metafile } of results) {
if (!metafile?.outputs) { if (!metafile) {
continue; continue;
} }
const fileName = Object.keys(metafile.outputs) const fileName = Object.keys(metafile.outputs)
.find((file) => !file.includes('chunks') && file.endsWith('js'))! .filter((file) => !file.includes('chunks') && file.endsWith('js'))[0]
.replace('dist/', ''); .replace('dist/', '');
// Upload metafile into https://esbuild.github.io/analyze/ // Upload metafile into https://esbuild.github.io/analyze/
await writeFile(`stats/${fileName}.meta.json`, JSON.stringify(metafile)); await writeFile(`stats/${fileName}.meta.json`, JSON.stringify(metafile));
@@ -74,53 +48,18 @@ const buildPackage = async (entryName: keyof typeof packageOptions) => {
}; };
const handler = (e) => { const handler = (e) => {
// eslint-disable-next-line no-console
console.error(e); console.error(e);
process.exit(1); process.exit(1);
}; };
const buildTinyMermaid = async () => {
await mkdir('./packages/tiny/dist', { recursive: true });
await rename(
'./packages/mermaid/dist/mermaid.tiny.min.js',
'./packages/tiny/dist/mermaid.tiny.js'
);
// Copy version from mermaid's package.json to tiny's package.json
const mermaidPkg = JSON.parse(await readFile('./packages/mermaid/package.json', 'utf8'));
const tinyPkg = JSON.parse(await readFile('./packages/tiny/package.json', 'utf8'));
tinyPkg.version = mermaidPkg.version;
await writeFile('./packages/tiny/package.json', JSON.stringify(tinyPkg, null, 2) + '\n');
await cp('./packages/mermaid/CHANGELOG.md', './packages/tiny/CHANGELOG.md');
};
/**
* Generate ANTLR parser files from grammar files
*/
const generateAntlr = () => {
try {
// eslint-disable-next-line no-console
console.log('🎯 ANTLR: Generating parser files...');
execSync('tsx scripts/antlr-generate.mts', { stdio: 'inherit' });
// eslint-disable-next-line no-console
console.log('✅ ANTLR: Parser files generated successfully');
} catch (error) {
// eslint-disable-next-line no-console
console.error('❌ ANTLR: Failed to generate parser files:', error);
throw error;
}
};
const main = async () => { const main = async () => {
await generateLangium(); await generateLangium();
generateAntlr(); await mkdir('stats').catch(() => {});
await mkdir('stats', { recursive: true });
const packageNames = Object.keys(packageOptions) as (keyof typeof packageOptions)[]; const packageNames = Object.keys(packageOptions) as (keyof typeof packageOptions)[];
// it should build `parser` before `mermaid` because it's a dependency // it should build `parser` before `mermaid` because it's a dependency
for (const pkg of packageNames) { for (const pkg of packageNames) {
await buildPackage(pkg).catch(handler); await buildPackage(pkg).catch(handler);
} }
await buildTinyMermaid();
}; };
void main(); void main();

View File

@@ -1,6 +1,6 @@
import { readFile } from 'node:fs/promises'; import { readFile } from 'node:fs/promises';
import { transformJison } from '../.build/jisonTransformer.js'; import { transformJison } from '../.build/jisonTransformer.js';
import type { Plugin } from 'esbuild'; import { Plugin } from 'esbuild';
export const jisonPlugin: Plugin = { export const jisonPlugin: Plugin = {
name: 'jison', name: 'jison',

View File

@@ -1,176 +0,0 @@
/* eslint-disable no-console */
import chokidar from 'chokidar';
import cors from 'cors';
import { context } from 'esbuild';
import type { Request, Response } from 'express';
import express from 'express';
import { execSync } from 'child_process';
import { packageOptions } from '../.build/common.js';
import { generateLangium } from '../.build/generateLangium.js';
import { defaultOptions, getBuildConfig } from './util.js';
// Set environment variable to use ANTLR parser
process.env.USE_ANTLR_PARSER = 'true';
const configs = Object.values(packageOptions).map(({ packageName }) =>
getBuildConfig({
...defaultOptions,
minify: false,
core: false,
options: packageOptions[packageName],
})
);
const mermaidIIFEConfig = getBuildConfig({
...defaultOptions,
minify: false,
core: false,
options: packageOptions.mermaid,
format: 'iife',
});
configs.push(mermaidIIFEConfig);
const contexts = await Promise.all(
configs.map(async (config) => ({ config, context: await context(config) }))
);
let rebuildCounter = 1;
const rebuildAll = async () => {
const buildNumber = rebuildCounter++;
const timeLabel = `Rebuild ${buildNumber} Time (total)`;
console.time(timeLabel);
await Promise.all(
contexts.map(async ({ config, context }) => {
const buildVariant = `Rebuild ${buildNumber} Time (${Object.keys(config.entryPoints!)[0]} ${config.format})`;
console.time(buildVariant);
await context.rebuild();
console.timeEnd(buildVariant);
})
).catch((e) => console.error(e));
console.timeEnd(timeLabel);
};
let clients: { id: number; response: Response }[] = [];
function eventsHandler(request: Request, response: Response) {
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;
/**
* Generate ANTLR parser files from grammar files
*/
function generateAntlr() {
try {
console.log('🎯 ANTLR: Generating parser files...');
execSync('tsx scripts/antlr-generate.mts', { stdio: 'inherit' });
console.log('✅ ANTLR: Parser files generated successfully');
} catch (error) {
console.error('❌ ANTLR: Failed to generate parser files:', error);
}
}
/**
* Debounce file change events to avoid rebuilding multiple times.
*/
function handleFileChange() {
if (timeoutID !== undefined) {
clearTimeout(timeoutID);
}
// eslint-disable-next-line @typescript-eslint/no-misused-promises
timeoutID = setTimeout(async () => {
await rebuildAll();
sendEventsToAll();
timeoutID = undefined;
}, 100);
}
/**
* Handle ANTLR grammar file changes with debouncing
*/
function handleAntlrFileChange() {
if (timeoutID !== undefined) {
clearTimeout(timeoutID);
}
// eslint-disable-next-line @typescript-eslint/no-misused-promises
timeoutID = setTimeout(async () => {
generateAntlr();
await rebuildAll();
sendEventsToAll();
timeoutID = undefined;
}, 100);
}
function sendEventsToAll() {
clients.forEach(({ response }) => response.write(`data: ${Date.now()}\n\n`));
}
async function createServer() {
await generateLangium();
generateAntlr();
handleFileChange();
const app = express();
// Watch for regular source file changes
chokidar
.watch('**/src/**/*.{js,ts,langium,yaml,json}', {
ignoreInitial: true,
ignored: [/node_modules/, /dist/, /docs/, /coverage/],
})
// eslint-disable-next-line @typescript-eslint/no-misused-promises
.on('all', async (event, path) => {
// Ignore other events.
if (!['add', 'change'].includes(event)) {
return;
}
console.log(`${path} changed. Rebuilding...`);
if (path.endsWith('.langium')) {
await generateLangium();
}
handleFileChange();
});
// Watch for ANTLR grammar file changes
chokidar
.watch('**/src/**/parser/antlr/*.g4', {
ignoreInitial: true,
ignored: [/node_modules/, /dist/, /docs/, /coverage/],
})
.on('all', (event, path) => {
// Ignore other events.
if (!['add', 'change'].includes(event)) {
return;
}
console.log(`🎯 ANTLR grammar file ${path} changed. Regenerating parsers...`);
handleAntlrFileChange();
});
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(`🚀 ANTLR Parser Dev Server listening on http://localhost:9000`);
console.log(`🎯 Environment: USE_ANTLR_PARSER=${process.env.USE_ANTLR_PARSER}`);
console.log(`🔍 Watching: .g4 grammar files for auto-regeneration`);
console.log(`📁 Generated: ANTLR parser files ready`);
});
}
void createServer();

View File

@@ -1,52 +1,34 @@
/* eslint-disable no-console */
import chokidar from 'chokidar';
import cors from 'cors';
import { context } from 'esbuild';
import type { Request, Response } from 'express';
import express from 'express'; import express from 'express';
import { packageOptions } from '../.build/common.js'; 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 { generateLangium } from '../.build/generateLangium.js';
import { defaultOptions, getBuildConfig } from './util.js'; import { packageOptions } from '../.build/common.js';
const configs = Object.values(packageOptions).map(({ packageName }) => const configs = Object.values(packageOptions).map(({ packageName }) =>
getBuildConfig({ getBuildConfig({ ...defaultOptions, minify: false, core: false, entryName: packageName })
...defaultOptions,
minify: false,
core: false,
options: packageOptions[packageName],
})
); );
const mermaidIIFEConfig = getBuildConfig({ const mermaidIIFEConfig = getBuildConfig({
...defaultOptions, ...defaultOptions,
minify: false, minify: false,
core: false, core: false,
options: packageOptions.mermaid, entryName: 'mermaid',
format: 'iife', format: 'iife',
}); });
configs.push(mermaidIIFEConfig); configs.push(mermaidIIFEConfig);
const contexts = await Promise.all( const contexts = await Promise.all(configs.map((config) => context(config)));
configs.map(async (config) => ({ config, context: await context(config) }))
);
let rebuildCounter = 1;
const rebuildAll = async () => { const rebuildAll = async () => {
const buildNumber = rebuildCounter++; console.time('Rebuild time');
const timeLabel = `Rebuild ${buildNumber} Time (total)`; await Promise.all(contexts.map((ctx) => ctx.rebuild())).catch((e) => console.error(e));
console.time(timeLabel); console.timeEnd('Rebuild time');
await Promise.all(
contexts.map(async ({ config, context }) => {
const buildVariant = `Rebuild ${buildNumber} Time (${Object.keys(config.entryPoints!)[0]} ${config.format})`;
console.time(buildVariant);
await context.rebuild();
console.timeEnd(buildVariant);
})
).catch((e) => console.error(e));
console.timeEnd(timeLabel);
}; };
let clients: { id: number; response: Response }[] = []; let clients: { id: number; response: Response }[] = [];
function eventsHandler(request: Request, response: Response) { function eventsHandler(request: Request, response: Response, next: NextFunction) {
const headers = { const headers = {
'Content-Type': 'text/event-stream', 'Content-Type': 'text/event-stream',
Connection: 'keep-alive', Connection: 'keep-alive',
@@ -63,20 +45,19 @@ function eventsHandler(request: Request, response: Response) {
}); });
} }
let timeoutID: NodeJS.Timeout | undefined = undefined; let timeoutId: NodeJS.Timeout | undefined = undefined;
/** /**
* Debounce file change events to avoid rebuilding multiple times. * Debounce file change events to avoid rebuilding multiple times.
*/ */
function handleFileChange() { function handleFileChange() {
if (timeoutID !== undefined) { if (timeoutId !== undefined) {
clearTimeout(timeoutID); clearTimeout(timeoutId);
} }
// eslint-disable-next-line @typescript-eslint/no-misused-promises timeoutId = setTimeout(async () => {
timeoutID = setTimeout(async () => {
await rebuildAll(); await rebuildAll();
sendEventsToAll(); sendEventsToAll();
timeoutID = undefined; timeoutId = undefined;
}, 100); }, 100);
} }
@@ -93,16 +74,15 @@ async function createServer() {
ignoreInitial: true, ignoreInitial: true,
ignored: [/node_modules/, /dist/, /docs/, /coverage/], ignored: [/node_modules/, /dist/, /docs/, /coverage/],
}) })
// eslint-disable-next-line @typescript-eslint/no-misused-promises
.on('all', async (event, path) => { .on('all', async (event, path) => {
// Ignore other events. // Ignore other events.
if (!['add', 'change'].includes(event)) { if (!['add', 'change'].includes(event)) {
return; return;
} }
console.log(`${path} changed. Rebuilding...`); if (/\.langium$/.test(path)) {
if (path.endsWith('.langium')) {
await generateLangium(); await generateLangium();
} }
console.log(`${path} changed. Rebuilding...`);
handleFileChange(); handleFileChange();
}); });
@@ -119,4 +99,4 @@ async function createServer() {
}); });
} }
void createServer(); createServer();

View File

@@ -3,26 +3,24 @@ import { fileURLToPath } from 'url';
import type { BuildOptions } from 'esbuild'; import type { BuildOptions } from 'esbuild';
import { readFileSync } from 'fs'; import { readFileSync } from 'fs';
import jsonSchemaPlugin from './jsonSchemaPlugin.js'; import jsonSchemaPlugin from './jsonSchemaPlugin.js';
import type { PackageOptions } from '../.build/common.js'; import { packageOptions } from '../.build/common.js';
import { jisonPlugin } from './jisonPlugin.js'; import { jisonPlugin } from './jisonPlugin.js';
const __dirname = fileURLToPath(new URL('.', import.meta.url)); const __dirname = fileURLToPath(new URL('.', import.meta.url));
export interface MermaidBuildOptions extends BuildOptions { export interface MermaidBuildOptions {
minify: boolean; minify: boolean;
core: boolean; core: boolean;
metafile: boolean; metafile: boolean;
format: 'esm' | 'iife'; format: 'esm' | 'iife';
options: PackageOptions; entryName: keyof typeof packageOptions;
includeLargeFeatures: boolean;
} }
export const defaultOptions: Omit<MermaidBuildOptions, 'entryName' | 'options'> = { export const defaultOptions: Omit<MermaidBuildOptions, 'entryName'> = {
minify: false, minify: false,
metafile: false, metafile: false,
core: false, core: false,
format: 'esm', format: 'esm',
includeLargeFeatures: true,
} as const; } as const;
const buildOptions = (override: BuildOptions): BuildOptions => { const buildOptions = (override: BuildOptions): BuildOptions => {
@@ -41,18 +39,12 @@ const buildOptions = (override: BuildOptions): BuildOptions => {
}; };
}; };
const getFileName = ( const getFileName = (fileName: string, { core, format, minify }: MermaidBuildOptions) => {
fileName: string,
{ core, format, minify, includeLargeFeatures }: MermaidBuildOptions
) => {
if (core) { if (core) {
fileName += '.core'; fileName += '.core';
} else if (format === 'esm') { } else if (format === 'esm') {
fileName += '.esm'; fileName += '.esm';
} }
if (!includeLargeFeatures) {
fileName += '.tiny';
}
if (minify) { if (minify) {
fileName += '.min'; fileName += '.min';
} }
@@ -60,34 +52,21 @@ const getFileName = (
}; };
export const getBuildConfig = (options: MermaidBuildOptions): BuildOptions => { export const getBuildConfig = (options: MermaidBuildOptions): BuildOptions => {
const { const { core, entryName, metafile, format, minify } = options;
core,
format,
options: { name, file, packageName },
globalName = 'mermaid',
includeLargeFeatures,
...rest
} = options;
const external: string[] = ['require', 'fs', 'path']; const external: string[] = ['require', 'fs', 'path'];
const { name, file, packageName } = packageOptions[entryName];
const outFileName = getFileName(name, options); const outFileName = getFileName(name, options);
const output: BuildOptions = buildOptions({ let output: BuildOptions = buildOptions({
...rest,
absWorkingDir: resolve(__dirname, `../packages/${packageName}`), absWorkingDir: resolve(__dirname, `../packages/${packageName}`),
entryPoints: { entryPoints: {
[outFileName]: `src/${file}`, [outFileName]: `src/${file}`,
}, },
globalName, metafile,
minify,
logLevel: 'info', logLevel: 'info',
chunkNames: `chunks/${outFileName}/[name]-[hash]`, chunkNames: `chunks/${outFileName}/[name]-[hash]`,
define: { define: {
// This needs to be stringified for esbuild
includeLargeFeatures: `${includeLargeFeatures}`,
'import.meta.vitest': 'undefined', 'import.meta.vitest': 'undefined',
// Replace process.env.USE_ANTLR_PARSER with actual value at build time
'process.env.USE_ANTLR_PARSER': `"${process.env.USE_ANTLR_PARSER || 'false'}"`,
// Replace process.env.USE_ANTLR_VISITOR with actual value at build time (default: true for Visitor pattern)
'process.env.USE_ANTLR_VISITOR': `"${process.env.USE_ANTLR_VISITOR || 'true'}"`,
}, },
}); });
@@ -105,12 +84,11 @@ export const getBuildConfig = (options: MermaidBuildOptions): BuildOptions => {
if (format === 'iife') { if (format === 'iife') {
output.format = 'iife'; output.format = 'iife';
output.splitting = false; output.splitting = false;
const originalGlobalName = output.globalName ?? 'mermaid'; output.globalName = '__esbuild_esm_mermaid';
output.globalName = `__esbuild_esm_mermaid_nm[${JSON.stringify(originalGlobalName)}]`;
// Workaround for removing the .default access in esbuild IIFE. // Workaround for removing the .default access in esbuild IIFE.
// https://github.com/mermaid-js/mermaid/pull/4109#discussion_r1292317396 // https://github.com/mermaid-js/mermaid/pull/4109#discussion_r1292317396
output.footer = { output.footer = {
js: `globalThis[${JSON.stringify(originalGlobalName)}] = globalThis.${output.globalName}.default;`, js: 'globalThis.mermaid = globalThis.__esbuild_esm_mermaid.default;',
}; };
output.outExtension = { '.js': '.js' }; output.outExtension = { '.js': '.js' };
} else { } else {

1
.eslintignore Symbolic link
View File

@@ -0,0 +1 @@
.gitignore

190
.eslintrc.cjs Normal file
View File

@@ -0,0 +1,190 @@
module.exports = {
env: {
browser: true,
es6: true,
'jest/globals': true,
node: true,
},
root: true,
parser: '@typescript-eslint/parser',
parserOptions: {
ecmaFeatures: {
experimentalObjectRestSpread: true,
jsx: true,
},
tsconfigRootDir: __dirname,
sourceType: 'module',
ecmaVersion: 2022,
allowAutomaticSingleRunInference: true,
project: ['./tsconfig.eslint.json', './packages/*/tsconfig.json'],
parser: '@typescript-eslint/parser',
},
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
'plugin:json/recommended',
'plugin:markdown/recommended-legacy',
'plugin:@cspell/recommended',
'prettier',
],
plugins: [
'@typescript-eslint',
'no-only-tests',
'html',
'jest',
'jsdoc',
'json',
'@cspell',
'lodash',
'unicorn',
],
ignorePatterns: [
// this file is automatically generated by `pnpm run --filter mermaid types:build-config`
'packages/mermaid/src/config.type.ts',
],
rules: {
curly: 'error',
'no-console': 'error',
'no-prototype-builtins': 'off',
'no-unused-vars': 'off',
'cypress/no-async-tests': 'off',
'@typescript-eslint/consistent-type-imports': 'error',
'@typescript-eslint/no-explicit-any': 'warn',
'@typescript-eslint/no-floating-promises': 'error',
'@typescript-eslint/no-misused-promises': 'error',
'@typescript-eslint/no-unused-vars': 'warn',
'@typescript-eslint/consistent-type-definitions': 'error',
'@typescript-eslint/ban-ts-comment': [
'error',
{
'ts-expect-error': 'allow-with-description',
'ts-ignore': 'allow-with-description',
'ts-nocheck': 'allow-with-description',
'ts-check': 'allow-with-description',
minimumDescriptionLength: 10,
},
],
'@typescript-eslint/naming-convention': [
'error',
{
selector: 'typeLike',
format: ['PascalCase'],
custom: {
regex: '^I[A-Z]',
match: false,
},
},
],
'json/*': ['error', 'allowComments'],
'@cspell/spellchecker': [
'error',
{
checkIdentifiers: true,
checkStrings: true,
checkStringTemplates: true,
},
],
'no-empty': [
'error',
{
allowEmptyCatch: true,
},
],
'no-only-tests/no-only-tests': 'error',
'lodash/import-scope': ['error', 'method'],
'unicorn/better-regex': 'error',
'unicorn/no-abusive-eslint-disable': 'error',
'unicorn/no-array-push-push': 'error',
'unicorn/no-for-loop': 'error',
'unicorn/no-instanceof-array': 'error',
'unicorn/no-typeof-undefined': 'error',
'unicorn/no-unnecessary-await': 'error',
'unicorn/no-unsafe-regex': 'warn',
'unicorn/no-useless-promise-resolve-reject': 'error',
'unicorn/prefer-array-find': 'error',
'unicorn/prefer-array-flat-map': 'error',
'unicorn/prefer-array-index-of': 'error',
'unicorn/prefer-array-some': 'error',
'unicorn/prefer-default-parameters': 'error',
'unicorn/prefer-includes': 'error',
'unicorn/prefer-negative-index': 'error',
'unicorn/prefer-object-from-entries': 'error',
'unicorn/prefer-string-starts-ends-with': 'error',
'unicorn/prefer-string-trim-start-end': 'error',
'unicorn/string-content': 'error',
'unicorn/prefer-spread': 'error',
'unicorn/no-lonely-if': 'error',
},
overrides: [
{
files: ['cypress/**', 'demos/**'],
rules: {
'no-console': 'off',
},
},
{
files: ['*.{js,jsx,mjs,cjs}'],
extends: ['plugin:jsdoc/recommended'],
rules: {
'jsdoc/check-indentation': 'off',
'jsdoc/check-alignment': 'off',
'jsdoc/check-line-alignment': 'off',
'jsdoc/multiline-blocks': 'off',
'jsdoc/newline-after-description': 'off',
'jsdoc/tag-lines': 'off',
'jsdoc/require-param-description': 'off',
'jsdoc/require-param-type': 'off',
'jsdoc/require-returns': 'off',
'jsdoc/require-returns-description': 'off',
},
},
{
files: ['*.{ts,tsx}'],
plugins: ['tsdoc'],
rules: {
'no-restricted-syntax': [
'error',
{
selector: 'TSEnumDeclaration',
message:
'Prefer using TypeScript union types over TypeScript enum, since TypeScript enums have a bunch of issues, see https://dev.to/dvddpl/whats-the-problem-with-typescript-enums-2okj',
},
],
'tsdoc/syntax': 'error',
},
},
{
files: ['*.spec.{ts,js}', 'cypress/**', 'demos/**', '**/docs/**'],
rules: {
'jsdoc/require-jsdoc': 'off',
'@typescript-eslint/no-unused-vars': 'off',
},
},
{
files: ['*.spec.{ts,js}', 'tests/**', 'cypress/**/*.js'],
rules: {
'@cspell/spellchecker': [
'error',
{
checkIdentifiers: false,
checkStrings: false,
checkStringTemplates: false,
},
],
},
},
{
files: ['*.html', '*.md', '**/*.md/*'],
rules: {
'no-var': 'error',
'no-undef': 'off',
'@typescript-eslint/no-unused-vars': 'off',
'@typescript-eslint/no-floating-promises': 'off',
'@typescript-eslint/no-misused-promises': 'off',
},
parserOptions: {
project: null,
},
},
],
};

View File

@@ -4,7 +4,7 @@ contact_links:
url: https://github.com/mermaid-js/mermaid/discussions url: https://github.com/mermaid-js/mermaid/discussions
about: Ask the Community questions or share your own graphs in our discussions. about: Ask the Community questions or share your own graphs in our discussions.
- name: Discord - name: Discord
url: https://discord.gg/sKeNQX4Wtj url: https://discord.gg/AgrbSrBer3
about: Join our Community on Discord for Help and a casual chat. about: Join our Community on Discord for Help and a casual chat.
- name: Documentation - name: Documentation
url: https://mermaid.js.org url: https://mermaid.js.org

View File

@@ -29,7 +29,7 @@ body:
label: Colors label: Colors
description: |- description: |-
A detailed list of the different colour values to use. A detailed list of the different colour values to use.
See the [list of currently used variable names](https://mermaid-js.github.io/mermaid/#/theming?id=theme-variables-reference-table) A list of currently used variable names can be found [here](https://mermaid-js.github.io/mermaid/#/theming?id=theme-variables-reference-table)
placeholder: |- placeholder: |-
- background: #f4f4f4 - background: #f4f4f4
- primaryColor: #fff4dd - primaryColor: #fff4dd

18
.github/lychee.toml vendored
View File

@@ -44,23 +44,7 @@ exclude = [
"https://chromewebstore.google.com", "https://chromewebstore.google.com",
# Drupal 403 # Drupal 403
"https://(www.)?drupal.org", "https://www.drupal.org"
# Phbpp 403
"https://(www.)?phpbb.com",
# Swimm returns 404, even though the link is valid
"https://docs.swimm.io",
# Certificate Error
"https://noteshub.app",
# Timeout
"https://huehive.co",
"https://foswiki.org",
"https://www.gnu.org",
"https://redmine.org",
"https://mermaid-preview.com"
] ]
# Exclude all private IPs from checking. # Exclude all private IPs from checking.

View File

@@ -15,4 +15,4 @@ Make sure you
- [ ] :book: have read the [contribution guidelines](https://mermaid.js.org/community/contributing.html) - [ ] :book: have read the [contribution guidelines](https://mermaid.js.org/community/contributing.html)
- [ ] :computer: have added necessary unit/e2e tests. - [ ] :computer: have added necessary unit/e2e tests.
- [ ] :notebook: have added documentation. Make sure [`MERMAID_RELEASE_VERSION`](https://mermaid.js.org/community/contributing.html#update-documentation) is used for all new features. - [ ] :notebook: have added documentation. Make sure [`MERMAID_RELEASE_VERSION`](https://mermaid.js.org/community/contributing.html#update-documentation) is used for all new features.
- [ ] :butterfly: If your PR makes a change that should be noted in one or more packages' changelogs, generate a changeset by running `pnpm changeset` and following the prompts. Changesets that add features should be `minor` and those that fix bugs should be `patch`. Please prefix changeset messages with `feat:`, `fix:`, or `chore:`. - [ ] :bookmark: targeted `develop` branch

36
.github/release-drafter.yml vendored Normal file
View File

@@ -0,0 +1,36 @@
name-template: '$NEXT_PATCH_VERSION'
tag-template: '$NEXT_PATCH_VERSION'
categories:
- title: '🚨 **Breaking Changes**'
labels:
- 'Breaking Change'
- title: '🚀 Features'
labels:
- 'Type: Enhancement'
- 'feature' # deprecated, new PRs shouldn't have this
- title: '🐛 Bug Fixes'
labels:
- 'Type: Bug / Error'
- 'fix' # deprecated, new PRs shouldn't have this
- title: '🧰 Maintenance'
labels:
- 'Type: Other'
- 'chore' # deprecated, new PRs shouldn't have this
- title: '⚡️ Performance'
labels:
- 'Type: Performance'
- title: '📚 Documentation'
labels:
- 'Area: Documentation'
change-template: '- $TITLE (#$NUMBER) @$AUTHOR'
sort-by: title
sort-direction: ascending
exclude-labels:
- 'Skip changelog'
no-changes-template: 'This release contains minor changes and bugfixes.'
template: |
# Release Notes
$CHANGES
🎉 **Thanks to all contributors helping with this release!** 🎉

2
.github/stale.yml vendored
View File

@@ -15,5 +15,5 @@ markComment: >
If you are still interested in this issue and it is still relevant you can comment to revive it. If you are still interested in this issue and it is still relevant you can comment to revive it.
# Comment to post when closing a stale issue. Set to `false` to disable # Comment to post when closing a stale issue. Set to `false` to disable
closeComment: > closeComment: >
This issue has been automatically closed due to a lack of activity. This issue has been been automatically closed due to a lack of activity.
This is done to maintain a clean list of issues that the community is interested in developing. This is done to maintain a clean list of issues that the community is interested in developing.

View File

@@ -1,45 +0,0 @@
name: autofix.ci # needed to securely identify the workflow
on:
pull_request:
branches-ignore:
- 'renovate/**'
permissions:
contents: read
concurrency: ${{ github.workflow }}-${{ github.ref }}
jobs:
autofix:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
- uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0
# uses version from "packageManager" field in package.json
- name: Setup Node.js
uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4.2.0
with:
cache: pnpm
node-version-file: '.node-version'
- name: Install Packages
run: |
pnpm install --frozen-lockfile
env:
CYPRESS_CACHE_FOLDER: .cache/Cypress
- name: Fix Linting
shell: bash
run: pnpm -w run lint:fix
- name: Sync `./src/config.type.ts` with `./src/schemas/config.schema.yaml`
shell: bash
run: pnpm run --filter mermaid types:build-config
- name: Build Docs
working-directory: ./packages/mermaid
run: pnpm run docs:build
- uses: autofix-ci/action@635ffb0c9798bd160680f18fd73371e355b85f27 # main

View File

@@ -8,8 +8,6 @@ on:
pull_request: pull_request:
merge_group: merge_group:
concurrency: ${{ github.workflow }}-${{ github.ref }}
permissions: permissions:
contents: read contents: read
@@ -18,12 +16,12 @@ jobs:
runs-on: ubuntu-latest runs-on: ubuntu-latest
steps: steps:
- name: Checkout - name: Checkout
uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2 uses: actions/checkout@v4
- uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0 - uses: pnpm/action-setup@v2
- name: Setup Node.js - name: Setup Node.js
uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4.2.0 uses: actions/setup-node@v4
with: with:
cache: pnpm cache: pnpm
node-version-file: '.node-version' node-version-file: '.node-version'

49
.github/workflows/build.yml vendored Normal file
View File

@@ -0,0 +1,49 @@
name: Build
on:
push: {}
merge_group:
pull_request:
types:
- opened
- synchronize
- ready_for_review
permissions:
contents: read
jobs:
build-mermaid:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: pnpm/action-setup@v2
# uses version from "packageManager" field in package.json
- name: Setup Node.js
uses: actions/setup-node@v4
with:
cache: pnpm
node-version-file: '.node-version'
- name: Install Packages
run: |
pnpm install --frozen-lockfile
env:
CYPRESS_CACHE_FOLDER: .cache/Cypress
- name: Run Build
run: pnpm run build
- name: Upload Mermaid Build as Artifact
uses: actions/upload-artifact@v4
with:
name: mermaid-build
path: packages/mermaid/dist
- name: Upload Mermaid Mindmap Build as Artifact
uses: actions/upload-artifact@v4
with:
name: mermaid-mindmap-build
path: packages/mermaid-mindmap/dist

View File

@@ -18,7 +18,7 @@ jobs:
runs-on: ubuntu-latest runs-on: ubuntu-latest
steps: steps:
- name: Checkout repository - name: Checkout repository
uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2 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: |

26
.github/workflows/checks.yml vendored Normal file
View File

@@ -0,0 +1,26 @@
on:
push:
merge_group:
pull_request:
types:
- opened
- synchronize
- ready_for_review
name: Static analysis on Test files
jobs:
check-tests:
runs-on: ubuntu-latest
name: check tests
if: github.repository_owner == 'mermaid-js'
steps:
- uses: actions/checkout@v4
with:
fetch-depth: 0
- uses: testomatio/check-tests@stable
with:
framework: cypress
tests: './cypress/e2e/**/**.spec.js'
token: ${{ secrets.GITHUB_TOKEN }}
has-tests-label: true

View File

@@ -11,9 +11,6 @@ on:
- synchronize - synchronize
- ready_for_review - ready_for_review
permissions: # added using https://github.com/step-security/secure-repo
contents: read
jobs: jobs:
analyze: analyze:
name: Analyze name: Analyze
@@ -32,11 +29,11 @@ jobs:
steps: steps:
- name: Checkout repository - name: Checkout repository
uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2 uses: actions/checkout@v4
# Initializes the CodeQL tools for scanning. # Initializes the CodeQL tools for scanning.
- name: Initialize CodeQL - name: Initialize CodeQL
uses: github/codeql-action/init@b56ba49b26e50535fa1e7f7db0f4f7b4bf65d80d # v3.28.10 uses: github/codeql-action/init@v3
with: with:
config-file: ./.github/codeql/codeql-config.yml config-file: ./.github/codeql/codeql-config.yml
languages: ${{ matrix.language }} languages: ${{ matrix.language }}
@@ -48,7 +45,7 @@ jobs:
# Autobuild attempts to build any compiled languages (C/C++, C#, or Java). # Autobuild attempts to build any compiled languages (C/C++, C#, or Java).
# If this step fails, then you should remove it and run the build manually (see below) # If this step fails, then you should remove it and run the build manually (see below)
- name: Autobuild - name: Autobuild
uses: github/codeql-action/autobuild@b56ba49b26e50535fa1e7f7db0f4f7b4bf65d80d # v3.28.10 uses: github/codeql-action/autobuild@v3
# Command-line programs to run using the OS shell. # Command-line programs to run using the OS shell.
# 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
@@ -62,4 +59,4 @@ jobs:
# make release # make release
- name: Perform CodeQL Analysis - name: Perform CodeQL Analysis
uses: github/codeql-action/analyze@b56ba49b26e50535fa1e7f7db0f4f7b4bf65d80d # v3.28.10 uses: github/codeql-action/analyze@v3

View File

@@ -15,6 +15,6 @@ jobs:
runs-on: ubuntu-latest runs-on: ubuntu-latest
steps: steps:
- name: 'Checkout Repository' - name: 'Checkout Repository'
uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2 uses: actions/checkout@v4
- name: 'Dependency Review' - name: 'Dependency Review'
uses: actions/dependency-review-action@3b139cfc5fae8b618d3eae3675e383bb1769c019 # v4.5.0 uses: actions/dependency-review-action@v4

View File

@@ -11,8 +11,6 @@ on:
default: master default: master
description: 'Parent branch to use for PRs' description: 'Parent branch to use for PRs'
concurrency: ${{ github.workflow }}-${{ github.ref }}
permissions: permissions:
contents: read contents: read
@@ -23,37 +21,38 @@ env:
jobs: jobs:
e2e-applitools: e2e-applitools:
runs-on: ubuntu-latest runs-on: ubuntu-latest
container:
image: cypress/browsers:node-20.11.0-chrome-121.0.6167.85-1-ff-120.0-edge-121.0.2277.83-1
options: --user 1001
steps: steps:
- if: ${{ ! env.USE_APPLI }} - if: ${{ ! env.USE_APPLI }}
name: Warn if not using Applitools name: Warn if not using Applitools
run: | run: |
echo "::error,title=Not using Applitools::APPLITOOLS_API_KEY is empty, disabling Applitools for this run." echo "::error,title=Not using Applitools::APPLITOOLS_API_KEY is empty, disabling Applitools for this run."
- uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2 - uses: actions/checkout@v4
- uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0 - 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 - name: Setup Node.js
uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4.2.0 uses: actions/setup-node@v4
with: with:
node-version-file: '.node-version' node-version-file: '.node-version'
- if: ${{ env.USE_APPLI }} - if: ${{ env.USE_APPLI }}
name: Notify applitools of new batch name: Notify applitools of new batch
# Copied from docs https://applitools.com/docs/topics/integrations/github-integration-ci-setup.html # Copied from docs https://applitools.com/docs/topics/integrations/github-integration-ci-setup.html
run: curl -L -d '' -X POST "$APPLITOOLS_SERVER_URL/api/externals/github/push?apiKey=$APPLITOOLS_API_KEY&CommitSha=$GITHUB_SHA&BranchName=${APPLITOOLS_BRANCH}$&ParentBranchName=$APPLITOOLS_PARENT_BRANCH"
env: env:
# e.g. mermaid-js/mermaid/my-branch # e.g. mermaid-js/mermaid/my-branch
APPLITOOLS_BRANCH: ${{ github.repository }}/${{ github.ref_name }} APPLITOOLS_BRANCH: ${{ github.repository }}/${{ github.ref_name }}
APPLITOOLS_PARENT_BRANCH: ${{ github.event.inputs.parent_branch }} APPLITOOLS_PARENT_BRANCH: ${{ github.event.inputs.parent_branch }}
APPLITOOLS_API_KEY: ${{ secrets.APPLITOOLS_API_KEY }} APPLITOOLS_API_KEY: ${{ secrets.APPLITOOLS_API_KEY }}
APPLITOOLS_SERVER_URL: 'https://eyesapi.applitools.com' APPLITOOLS_SERVER_URL: 'https://eyesapi.applitools.com'
uses: wei/curl@012398a392d02480afa2720780031f8621d5f94c
with:
args: -X POST "$APPLITOOLS_SERVER_URL/api/externals/github/push?apiKey=$APPLITOOLS_API_KEY&CommitSha=$GITHUB_SHA&BranchName=${APPLITOOLS_BRANCH}$&ParentBranchName=$APPLITOOLS_PARENT_BRANCH"
- name: Cypress run - name: Cypress run
uses: cypress-io/github-action@18a6541367f4580a515371905f499a27a44e8dbe # v6.7.12 uses: cypress-io/github-action@v4
id: cypress id: cypress
with: with:
start: pnpm run dev start: pnpm run dev

View File

@@ -1,70 +0,0 @@
name: E2E - Generate Timings
on:
# run this workflow every night at 3am
schedule:
- cron: '28 3 * * *'
# or when the user triggers it from GitHub Actions page
workflow_dispatch:
concurrency: ${{ github.workflow }}-${{ github.ref }}
permissions:
contents: write
pull-requests: write
jobs:
timings:
runs-on: ubuntu-latest
container:
image: cypress/browsers:node-20.11.0-chrome-121.0.6167.85-1-ff-120.0-edge-121.0.2277.83-1
options: --user 1001
steps:
- uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
- uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0
- name: Setup Node.js
uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4.2.0
with:
node-version-file: '.node-version'
- name: Install dependencies
uses: cypress-io/github-action@18a6541367f4580a515371905f499a27a44e8dbe # v6.7.12
with:
runTests: false
- name: Cypress run
uses: cypress-io/github-action@18a6541367f4580a515371905f499a27a44e8dbe # v6.7.12
id: cypress
with:
install: false
start: pnpm run dev:coverage
wait-on: 'http://localhost:9000'
browser: chrome
publish-summary: false
env:
VITEST_COVERAGE: true
CYPRESS_COMMIT: ${{ github.sha }}
SPLIT: 1
SPLIT_INDEX: 0
SPLIT_FILE: 'cypress/timings.json'
- name: Compare timings
id: compare
run: |
OUTPUT=$(pnpm tsx scripts/compare-timings.ts)
echo "$OUTPUT" >> $GITHUB_STEP_SUMMARY
echo "output<<EOF" >> $GITHUB_OUTPUT
echo "$OUTPUT" >> $GITHUB_OUTPUT
echo "EOF" >> $GITHUB_OUTPUT
- name: Commit and create pull request
uses: peter-evans/create-pull-request@18e469570b1cf0dfc11d60ec121099f8ff3e617a
with:
add-paths: |
cypress/timings.json
commit-message: 'chore: update E2E timings'
branch: update-timings
title: Update E2E Timings
body: ${{ steps.compare.outputs.output }}
delete-branch: true
sign-commits: true

View File

@@ -2,15 +2,11 @@ name: E2E
on: on:
push: push:
branches: branches-ignore:
- develop - 'gh-readonly-queue/**'
- master
- release/**
pull_request: pull_request:
merge_group: merge_group:
concurrency: ${{ github.workflow }}-${{ github.ref }}
permissions: permissions:
contents: read contents: read
@@ -28,8 +24,6 @@ env:
) || ) ||
github.event.before github.event.before
}} }}
RUN_VISUAL_TEST: >-
${{ github.repository == 'mermaid-js/mermaid' && (github.event_name != 'pull_request' || !startsWith(github.head_ref, 'renovate/')) }}
jobs: jobs:
cache: cache:
runs-on: ubuntu-latest runs-on: ubuntu-latest
@@ -37,29 +31,30 @@ jobs:
image: cypress/browsers:node-20.11.0-chrome-121.0.6167.85-1-ff-120.0-edge-121.0.2277.83-1 image: cypress/browsers:node-20.11.0-chrome-121.0.6167.85-1-ff-120.0-edge-121.0.2277.83-1
options: --user 1001 options: --user 1001
steps: steps:
- uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2 - uses: actions/checkout@v4
- uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0 - uses: pnpm/action-setup@v2
- name: Setup Node.js - name: Setup Node.js
uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4.2.0 uses: actions/setup-node@v4
with: with:
node-version-file: '.node-version' node-version-file: '.node-version'
- name: Cache snapshots - name: Cache snapshots
id: cache-snapshot id: cache-snapshot
uses: actions/cache@0c907a75c2c80ebcb7f088228285e798b750cf8f # v4.2.1 uses: actions/cache@v4
with: with:
save-always: true
path: ./cypress/snapshots path: ./cypress/snapshots
key: ${{ runner.os }}-snapshots-${{ env.targetHash }} key: ${{ runner.os }}-snapshots-${{ env.targetHash }}
# If a snapshot for a given Hash is not found, we checkout that commit, run the tests and cache the snapshots. # If a snapshot for a given Hash is not found, we checkout that commit, run the tests and cache the snapshots.
- name: Switch to base branch - name: Switch to base branch
if: ${{ steps.cache-snapshot.outputs.cache-hit != 'true' }} if: ${{ steps.cache-snapshot.outputs.cache-hit != 'true' }}
uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2 uses: actions/checkout@v4
with: with:
ref: ${{ env.targetHash }} ref: ${{ env.targetHash }}
- name: Install dependencies - name: Install dependencies
if: ${{ steps.cache-snapshot.outputs.cache-hit != 'true' }} if: ${{ steps.cache-snapshot.outputs.cache-hit != 'true' }}
uses: cypress-io/github-action@18a6541367f4580a515371905f499a27a44e8dbe # v6.7.12 uses: cypress-io/github-action@v6
with: with:
# just perform install # just perform install
runTests: false runTests: false
@@ -80,28 +75,28 @@ jobs:
strategy: strategy:
fail-fast: false fail-fast: false
matrix: matrix:
containers: [1, 2, 3, 4, 5] containers: [1, 2, 3, 4]
steps: steps:
- uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2 - uses: actions/checkout@v4
- uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0 - 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 - name: Setup Node.js
uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4.2.0 uses: actions/setup-node@v4
with: with:
node-version-file: '.node-version' node-version-file: '.node-version'
# These cached snapshots are downloaded, providing the reference snapshots. # These cached snapshots are downloaded, providing the reference snapshots.
- name: Cache snapshots - name: Cache snapshots
id: cache-snapshot id: cache-snapshot
uses: actions/cache/restore@0c907a75c2c80ebcb7f088228285e798b750cf8f # v4.2.1 uses: actions/cache/restore@v4
with: with:
path: ./cypress/snapshots path: ./cypress/snapshots
key: ${{ runner.os }}-snapshots-${{ env.targetHash }} key: ${{ runner.os }}-snapshots-${{ env.targetHash }}
- name: Install dependencies - name: Install dependencies
uses: cypress-io/github-action@18a6541367f4580a515371905f499a27a44e8dbe # v6.7.12 uses: cypress-io/github-action@v6
with: with:
runTests: false runTests: false
@@ -117,8 +112,11 @@ jobs:
# Install NPM dependencies, cache them correctly # Install NPM dependencies, cache them correctly
# and run all Cypress tests # and run all Cypress tests
- name: Cypress run - name: Cypress run
uses: cypress-io/github-action@18a6541367f4580a515371905f499a27a44e8dbe # v6.7.12 uses: cypress-io/github-action@v6
id: cypress id: cypress
# If CYPRESS_RECORD_KEY is set, run in parallel on all containers
# Otherwise (e.g. if running from fork), we run on a single container only
if: ${{ ( env.CYPRESS_RECORD_KEY != '' ) || ( matrix.containers == 1 ) }}
with: with:
install: false install: false
start: pnpm run dev:coverage start: pnpm run dev:coverage
@@ -126,20 +124,19 @@ jobs:
browser: chrome browser: chrome
# Disable recording if we don't have an API key # Disable recording if we don't have an API key
# e.g. if this action was run from a fork # e.g. if this action was run from a fork
record: ${{ env.RUN_VISUAL_TEST == 'true' && secrets.CYPRESS_RECORD_KEY != '' }} record: ${{ secrets.CYPRESS_RECORD_KEY != '' }}
parallel: ${{ secrets.CYPRESS_RECORD_KEY != '' }}
env: env:
ARGOS_PARALLEL: ${{ env.RUN_VISUAL_TEST == 'true' }} CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
ARGOS_PARALLEL_TOTAL: ${{ env.RUN_VISUAL_TEST == 'true' && strategy.job-total || 1 }}
ARGOS_PARALLEL_INDEX: ${{ env.RUN_VISUAL_TEST == 'true' && matrix.containers || 1 }}
CYPRESS_COMMIT: ${{ github.sha }}
CYPRESS_RECORD_KEY: ${{ env.RUN_VISUAL_TEST == 'true' && secrets.CYPRESS_RECORD_KEY || ''}}
SPLIT: ${{ strategy.job-total }}
SPLIT_INDEX: ${{ strategy.job-index }}
SPLIT_FILE: 'cypress/timings.json'
VITEST_COVERAGE: true VITEST_COVERAGE: true
CYPRESS_COMMIT: ${{ github.sha }}
ARGOS_TOKEN: ${{ secrets.ARGOS_TOKEN }}
ARGOS_PARALLEL: ${{ secrets.CYPRESS_RECORD_KEY != '' }}
ARGOS_PARALLEL_TOTAL: 4
ARGOS_PARALLEL_INDEX: ${{ matrix.containers }}
- name: Upload Coverage to Codecov - name: Upload Coverage to Codecov
uses: codecov/codecov-action@13ce06bfc6bbe3ecf90edbbf1bc32fe5978ca1d3 # v5.3.1 uses: codecov/codecov-action@v4
# Run step only pushes to develop and pull_requests # Run step only pushes to develop and pull_requests
if: ${{ steps.cypress.conclusion == 'success' && (github.event_name == 'pull_request' || github.ref == 'refs/heads/develop')}} if: ${{ steps.cypress.conclusion == 'success' && (github.event_name == 'pull_request' || github.ref == 'refs/heads/develop')}}
with: with:

View File

@@ -4,17 +4,11 @@ on:
issues: issues:
types: [opened] types: [opened]
permissions: # added using https://github.com/step-security/secure-repo
contents: read
jobs: jobs:
triage: triage:
permissions:
issues: write # for andymckay/labeler to label issues
pull-requests: write # for andymckay/labeler to label PRs
runs-on: ubuntu-latest runs-on: ubuntu-latest
steps: steps:
- uses: andymckay/labeler@e6c4322d0397f3240f0e7e30a33b5c5df2d39e90 # 1.0.4 - uses: andymckay/labeler@1.0.4
with: with:
repo-token: '${{ secrets.GITHUB_TOKEN }}' repo-token: '${{ secrets.GITHUB_TOKEN }}'
add-labels: 'Status: Triage' add-labels: 'Status: Triage'

View File

@@ -19,9 +19,6 @@ on:
# * is a special character in YAML so you have to quote this string # * is a special character in YAML so you have to quote this string
- cron: '30 8 * * *' - cron: '30 8 * * *'
permissions: # added using https://github.com/step-security/secure-repo
contents: read
jobs: jobs:
link-checker: link-checker:
runs-on: ubuntu-latest runs-on: ubuntu-latest
@@ -29,17 +26,17 @@ 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@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2 - uses: actions/checkout@v4
- name: Restore lychee cache - name: Restore lychee cache
uses: actions/cache@0c907a75c2c80ebcb7f088228285e798b750cf8f # v4.2.1 uses: actions/cache@v4
with: with:
path: .lycheecache path: .lycheecache
key: cache-lychee-${{ github.sha }} key: cache-lychee-${{ github.sha }}
restore-keys: cache-lychee- restore-keys: cache-lychee-
- name: Link Checker - name: Link Checker
uses: lycheeverse/lychee-action@f613c4a64e50d792e0b31ec34bbcbba12263c6a6 # v2.3.0 uses: lycheeverse/lychee-action@v1.9.3
with: with:
args: >- args: >-
--config .github/lychee.toml --config .github/lychee.toml

View File

@@ -4,32 +4,26 @@ on:
push: push:
merge_group: merge_group:
pull_request: pull_request:
types:
- opened
- synchronize
- ready_for_review
workflow_dispatch: workflow_dispatch:
concurrency: ${{ github.workflow }}-${{ github.ref }}
permissions: permissions:
contents: write contents: write
jobs: jobs:
docker-lint:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
- uses: hadolint/hadolint-action@54c9adbab1582c2ef04b2016b760714a4bfde3cf # v3.1.0
with:
verbose: true
lint: lint:
runs-on: ubuntu-latest runs-on: ubuntu-latest
steps: steps:
- uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2 - uses: actions/checkout@v4
- uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0 - 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 - name: Setup Node.js
uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4.2.0 uses: actions/setup-node@v4
with: with:
cache: pnpm cache: pnpm
node-version-file: '.node-version' node-version-file: '.node-version'
@@ -89,9 +83,14 @@ jobs:
continue-on-error: ${{ github.event_name == 'push' }} continue-on-error: ${{ github.event_name == 'push' }}
run: pnpm run docs:verify run: pnpm run docs:verify
- uses: testomatio/check-tests@0ea638fcec1820cf2e7b9854fdbdd04128a55bd4 # stable - name: Rebuild Docs
if: ${{ steps.verifyDocs.outcome == 'failure' && github.event_name == 'push' }}
working-directory: ./packages/mermaid
run: pnpm run docs:build
- name: Commit changes
uses: EndBug/add-and-commit@v9
if: ${{ steps.verifyDocs.outcome == 'failure' && github.event_name == 'push' }}
with: with:
framework: cypress message: 'Update docs'
tests: './cypress/e2e/**/**.spec.js' add: 'docs/*'
token: ${{ secrets.GITHUB_TOKEN }}
has-tests-label: true

View File

@@ -22,36 +22,10 @@ jobs:
pull-requests: write # write permission is required to label PRs pull-requests: write # write permission is required to label PRs
steps: steps:
- name: Label PR - name: Label PR
uses: release-drafter/release-drafter@b1476f6e6eb133afa41ed8589daba6dc69b4d3f5 # v6.1.0 uses: release-drafter/release-drafter@v6
with: with:
config-name: pr-labeler.yml config-name: pr-labeler.yml
disable-autolabeler: false disable-autolabeler: false
disable-releaser: true disable-releaser: true
env: env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
- name: Add "Sponsored by MermaidChart" label
uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7.0.1
with:
github-token: ${{ secrets.GITHUB_TOKEN }}
script: |
const prNumber = context.payload.pull_request.number;
const { data: commits } = await github.rest.pulls.listCommits({
owner: context.repo.owner,
repo: context.repo.repo,
pull_number: prNumber,
});
const isSponsored = commits.every(
(c) => c.commit.author.email?.endsWith('@mermaidchart.com')
);
if (isSponsored) {
console.log('PR is sponsored. Adding label.');
await github.rest.issues.addLabels({
owner: context.repo.owner,
repo: context.repo.repo,
issue_number: prNumber,
labels: ['Sponsored by MermaidChart'],
});
}

View File

@@ -23,12 +23,12 @@ jobs:
runs-on: ubuntu-latest runs-on: ubuntu-latest
steps: steps:
- name: Checkout - name: Checkout
uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2 uses: actions/checkout@v4
- uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0 - uses: pnpm/action-setup@v2
- name: Setup Node.js - name: Setup Node.js
uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4.2.0 uses: actions/setup-node@v4
with: with:
cache: pnpm cache: pnpm
node-version-file: '.node-version' node-version-file: '.node-version'
@@ -37,13 +37,13 @@ jobs:
run: pnpm install --frozen-lockfile run: pnpm install --frozen-lockfile
- name: Setup Pages - name: Setup Pages
uses: actions/configure-pages@983d7736d9b0ae728b81ab479565c72886d7745b # v5.0.0 uses: actions/configure-pages@v4
- name: Run Build - name: Run Build
run: pnpm --filter mermaid run docs:build:vitepress run: pnpm --filter mermaid run docs:build:vitepress
- name: Upload artifact - name: Upload artifact
uses: actions/upload-pages-artifact@56afc609e74202658d3ffba0e8f6dda462b719fa # v3.0.1 uses: actions/upload-pages-artifact@v3
with: with:
path: packages/mermaid/src/vitepress/.vitepress/dist path: packages/mermaid/src/vitepress/.vitepress/dist
@@ -56,4 +56,4 @@ jobs:
steps: steps:
- name: Deploy to GitHub Pages - name: Deploy to GitHub Pages
id: deployment id: deployment
uses: actions/deploy-pages@d6db90164ac5ed86f2b6aed7e0febac5b3c0c03e # v4.0.5 uses: actions/deploy-pages@v4

23
.github/workflows/release-draft.yml vendored Normal file
View File

@@ -0,0 +1,23 @@
name: Draft Release
on:
push:
branches:
- master
permissions:
contents: read
jobs:
draft-release:
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:
- name: Draft Release
uses: release-drafter/release-drafter@v6
with:
disable-autolabeler: true
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

View File

@@ -9,14 +9,14 @@ jobs:
publish-preview: publish-preview:
runs-on: ubuntu-latest runs-on: ubuntu-latest
steps: steps:
- uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2 - uses: actions/checkout@v4
with: with:
fetch-depth: 0 fetch-depth: 0
- uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0 - uses: pnpm/action-setup@v2
- name: Setup Node.js - name: Setup Node.js
uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4.2.0 uses: actions/setup-node@v4
with: with:
cache: pnpm cache: pnpm
node-version-file: '.node-version' node-version-file: '.node-version'
@@ -28,7 +28,7 @@ jobs:
CYPRESS_CACHE_FOLDER: .cache/Cypress CYPRESS_CACHE_FOLDER: .cache/Cypress
- name: Install Json - name: Install Json
run: npm i json@11.0.0 --global run: npm i json --global
- name: Publish - name: Publish
working-directory: ./packages/mermaid working-directory: ./packages/mermaid

View File

@@ -1,43 +0,0 @@
name: Preview release
on:
pull_request:
branches: [develop]
types: [opened, synchronize, labeled, ready_for_review]
concurrency:
group: ${{ github.workflow }}-${{ github.event.number }}
cancel-in-progress: true
permissions:
contents: read
actions: write
jobs:
preview:
if: ${{ github.repository_owner == 'mermaid-js' }}
runs-on: ubuntu-latest
permissions:
contents: read
id-token: write
issues: write
pull-requests: write
name: Publish preview release
timeout-minutes: 5
steps:
- name: Checkout Repo
uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
- uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0
- name: Setup Node.js
uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4.2.0
with:
cache: pnpm
node-version-file: '.node-version'
- name: Install Packages
run: pnpm install --frozen-lockfile
- name: Publish packages
run: pnpx pkg-pr-new publish --pnpm './packages/*'

47
.github/workflows/release-publish.yml vendored Normal file
View File

@@ -0,0 +1,47 @@
name: Publish release
on:
release:
types: [published]
jobs:
publish:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: fregante/setup-git-user@v2
- uses: pnpm/action-setup@v2
# uses version from "packageManager" field in package.json
- name: Setup Node.js
uses: actions/setup-node@v4
with:
cache: pnpm
node-version-file: '.node-version'
- name: Install Packages
run: |
pnpm install --frozen-lockfile
npm i json --global
env:
CYPRESS_CACHE_FOLDER: .cache/Cypress
- name: Prepare release
run: |
VERSION=${GITHUB_REF:10}
echo "Preparing release $VERSION"
git checkout -t origin/release/$VERSION
npm version --no-git-tag-version --allow-same-version $VERSION
git add package.json
git commit -nm "Bump version $VERSION"
git checkout -t origin/master
git merge -m "Release $VERSION" --no-ff release/$VERSION
git push --no-verify
- name: Publish
run: |
npm set //registry.npmjs.org/:_authToken $NPM_TOKEN
npm publish
env:
NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

View File

@@ -1,46 +0,0 @@
name: Release
on:
push:
branches:
- master
concurrency: ${{ github.workflow }}-${{ github.ref }}
permissions: # added using https://github.com/step-security/secure-repo
contents: read
jobs:
release:
if: github.repository == 'mermaid-js/mermaid'
permissions:
contents: write # to create release (changesets/action)
id-token: write # OpenID Connect token needed for provenance
pull-requests: write # to create pull request (changesets/action)
name: Release
runs-on: ubuntu-latest
steps:
- name: Checkout Repo
uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
- uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0
- name: Setup Node.js
uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4.2.0
with:
cache: pnpm
node-version-file: '.node-version'
- name: Install Packages
run: pnpm install --frozen-lockfile
- name: Create Release Pull Request or Publish to npm
id: changesets
uses: changesets/action@c8bada60c408975afd1a20b3db81d6eee6789308 # v1.4.9
with:
version: pnpm changeset:version
publish: pnpm changeset:publish
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
NPM_CONFIG_PROVENANCE: true

View File

@@ -1,37 +0,0 @@
name: Scorecard supply-chain security
on:
branch_protection_rule:
push:
branches:
- develop
schedule:
- cron: 29 15 * * 0
permissions: read-all
jobs:
analysis:
name: Scorecard analysis
permissions:
id-token: write
security-events: write
runs-on: ubuntu-latest
steps:
- name: Checkout code
uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
with:
persist-credentials: false
- name: Run analysis
uses: ossf/scorecard-action@f49aabe0b5af0936a0987cfb85d86b75731b0186 # v2.4.1
with:
results_file: results.sarif
results_format: sarif
publish_results: true
- name: Upload artifact
uses: actions/upload-artifact@4cec3d8aa04e39d1a68397de0c4cd6fb9dce8ec1 # v4.6.1
with:
name: SARIF file
path: results.sarif
retention-days: 5
- name: Upload to code-scanning
uses: github/codeql-action/upload-sarif@b56ba49b26e50535fa1e7f7db0f4f7b4bf65d80d # v3.28.10
with:
sarif_file: results.sarif

View File

@@ -9,13 +9,13 @@ jobs:
unit-test: unit-test:
runs-on: ubuntu-latest runs-on: ubuntu-latest
steps: steps:
- uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2 - uses: actions/checkout@v4
- uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0 - 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 - name: Setup Node.js
uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4.2.0 uses: actions/setup-node@v4
with: with:
cache: pnpm cache: pnpm
node-version-file: '.node-version' node-version-file: '.node-version'
@@ -38,12 +38,8 @@ jobs:
run: | run: |
pnpm exec vitest run ./packages/mermaid/src/diagrams/gantt/ganttDb.spec.ts --coverage pnpm exec vitest run ./packages/mermaid/src/diagrams/gantt/ganttDb.spec.ts --coverage
- name: Verify out-of-tree build with TypeScript
run: |
pnpm test:check:tsc
- name: Upload Coverage to Codecov - name: Upload Coverage to Codecov
uses: codecov/codecov-action@13ce06bfc6bbe3ecf90edbbf1bc32fe5978ca1d3 # v5.3.1 uses: codecov/codecov-action@v4
# Run step only pushes to develop and pull_requests # Run step only pushes to develop and pull_requests
if: ${{ github.event_name == 'pull_request' || github.ref == 'refs/heads/develop' }} if: ${{ github.event_name == 'pull_request' || github.ref == 'refs/heads/develop' }}
with: with:

View File

@@ -8,6 +8,6 @@ jobs:
triage: triage:
runs-on: ubuntu-latest runs-on: ubuntu-latest
steps: steps:
- uses: Dunning-Kruger/unlock-issues@b06b7f7e5c3f2eaa1c6d5d89f40930e4d6d9699e # v1 - uses: Dunning-Kruger/unlock-issues@v1
with: with:
repo-token: '${{ secrets.GITHUB_TOKEN }}' repo-token: '${{ secrets.GITHUB_TOKEN }}'

View File

@@ -8,18 +8,18 @@ jobs:
update-browser-list: update-browser-list:
runs-on: ubuntu-latest runs-on: ubuntu-latest
steps: steps:
- uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2 - uses: actions/checkout@v4
- uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0 - uses: pnpm/action-setup@v2
- run: npx update-browserslist-db@latest - run: npx update-browserslist-db@latest
- name: Commit changes - name: Commit changes
uses: EndBug/add-and-commit@a94899bca583c204427a224a7af87c02f9b325d5 # v9.1.4 uses: EndBug/add-and-commit@v9
with: with:
author_name: ${{ github.actor }} author_name: ${{ github.actor }}
author_email: ${{ github.actor }}@users.noreply.github.com author_email: ${{ github.actor }}@users.noreply.github.com
message: 'chore: update browsers list' message: 'chore: update browsers list'
push: false push: false
- name: Create Pull Request - name: Create Pull Request
uses: peter-evans/create-pull-request@67ccf781d68cd99b580ae25a5c18a1cc84ffff1f # v7.0.6 uses: peter-evans/create-pull-request@v6
with: with:
branch: update-browserslist branch: update-browserslist
title: Update Browserslist title: Update Browserslist

View File

@@ -1,70 +0,0 @@
name: Validate pnpm-lock.yaml
on:
pull_request:
paths:
- 'pnpm-lock.yaml'
- '**/package.json'
- '.github/workflows/validate-lockfile.yml'
jobs:
validate-lockfile:
runs-on: ubuntu-latest
steps:
- name: Checkout code
uses: actions/checkout@v4
with:
fetch-depth: 0
- name: Set up Node.js
uses: actions/setup-node@v4
with:
node-version: 20
- uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0
- name: Validate pnpm-lock.yaml entries
id: validate # give this step an ID so we can reference its outputs
run: |
issues=()
# 1) No tarball references
if grep -qF 'tarball:' pnpm-lock.yaml; then
issues+=("• Tarball references found (forbidden)")
fi
# 2) No unwanted vitepress paths
if grep -qF 'packages/mermaid/src/vitepress' pnpm-lock.yaml; then
issues+=("• Disallowed path 'packages/mermaid/src/vitepress' present. Run \`rm -rf packages/mermaid/src/vitepress && pnpm install\` to regenerate.")
fi
# 3) Lockfile only changes when package.json changes
git diff --name-only ${{ github.event.pull_request.base.sha }} ${{ github.sha }} > changed.txt
if grep -q '^pnpm-lock.yaml$' changed.txt && ! grep -q 'package.json' changed.txt; then
issues+=("• pnpm-lock.yaml changed without any package.json modification")
fi
# If any issues, output them and fail
if [ ${#issues[@]} -gt 0 ]; then
# Use the new GITHUB_OUTPUT approach to set a multiline output
{
echo "errors<<EOF"
printf '%s\n' "${issues[@]}"
echo "EOF"
} >> $GITHUB_OUTPUT
exit 1
fi
- name: Comment on PR if validation failed
if: failure()
uses: peter-evans/create-or-update-comment@v4
with:
token: ${{ secrets.GITHUB_TOKEN }}
issue-number: ${{ github.event.pull_request.number }}
body: |
The following issue(s) were detected:
${{ steps.validate.outputs.errors }}
Please address these and push an update.
_Posted automatically by GitHub Actions_

3
.gitignore vendored
View File

@@ -4,7 +4,6 @@ node_modules/
coverage/ coverage/
.idea/ .idea/
.pnpm-store/ .pnpm-store/
.instructions/
dist dist
v8-compile-cache-0 v8-compile-cache-0
@@ -36,7 +35,7 @@ cypress/snapshots/
.tsbuildinfo .tsbuildinfo
tsconfig.tsbuildinfo tsconfig.tsbuildinfo
#knsv*.html knsv*.html
local*.html local*.html
stats/ stats/

View File

@@ -1,2 +0,0 @@
ignored:
- DL3002 # TODO: Last USER should not be root

View File

@@ -1,2 +1,4 @@
#!/usr/bin/env sh #!/bin/sh
. "$(dirname "$0")/_/husky.sh"
NODE_OPTIONS="--max_old_space_size=8192" pnpm run pre-commit NODE_OPTIONS="--max_old_space_size=8192" pnpm run pre-commit

View File

@@ -1 +1 @@
22.14.0 20.12.2

View File

@@ -16,5 +16,3 @@ generated/
# Ignore the files creates in /demos/dev except for example.html # Ignore the files creates in /demos/dev except for example.html
demos/dev/** demos/dev/**
!/demos/dev/example.html !/demos/dev/example.html
# TODO: Lots of errors to fix
cypress/platform/state-refactor.html

View File

@@ -1,5 +1,4 @@
import type { InlineConfig } from 'vite'; import { build, InlineConfig, type PluginOption } from 'vite';
import { build, type PluginOption } from 'vite';
import { resolve } from 'path'; import { resolve } from 'path';
import { fileURLToPath } from 'url'; import { fileURLToPath } from 'url';
import jisonPlugin from './jisonPlugin.js'; import jisonPlugin from './jisonPlugin.js';
@@ -47,10 +46,9 @@ interface BuildOptions {
export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions): InlineConfig => { export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions): InlineConfig => {
const external: (string | RegExp)[] = ['require', 'fs', 'path']; const external: (string | RegExp)[] = ['require', 'fs', 'path'];
// eslint-disable-next-line no-console
console.log(entryName, packageOptions[entryName]); console.log(entryName, packageOptions[entryName]);
const { name, file, packageName } = packageOptions[entryName]; const { name, file, packageName } = packageOptions[entryName];
const output: OutputOptions = [ let output: OutputOptions = [
{ {
name, name,
format: 'esm', format: 'esm',
@@ -85,6 +83,7 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions)
plugins: [ plugins: [
jisonPlugin(), jisonPlugin(),
jsonSchemaPlugin(), // handles `.schema.yaml` files jsonSchemaPlugin(), // handles `.schema.yaml` files
// @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__', 'generated'], exclude: ['node_modules', 'test/', '__mocks__', 'generated'],
@@ -94,10 +93,6 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions)
}), }),
...visualizerOptions(packageName, core), ...visualizerOptions(packageName, core),
], ],
define: {
// Needs to be string
includeLargeFeatures: 'true',
},
}; };
if (watch && config.build) { if (watch && config.build) {
@@ -126,10 +121,10 @@ await generateLangium();
if (watch) { if (watch) {
await build(getBuildConfig({ minify: false, watch, core: false, entryName: 'parser' })); await build(getBuildConfig({ minify: false, watch, core: false, entryName: 'parser' }));
void build(getBuildConfig({ minify: false, watch, core: false, entryName: 'mermaid' })); build(getBuildConfig({ minify: false, watch, core: false, entryName: 'mermaid' }));
if (!mermaidOnly) { if (!mermaidOnly) {
void build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-example-diagram' })); build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-example-diagram' }));
void 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, watch, core: false, entryName: 'parser' }));

View File

@@ -1,4 +1,4 @@
import type { PluginOption } from 'vite'; import { PluginOption } from 'vite';
import { getDefaults, getSchema, loadSchema } from '../.build/jsonSchema.js'; import { getDefaults, getSchema, loadSchema } from '../.build/jsonSchema.js';
/** /**

View File

@@ -23,9 +23,8 @@ async function createServer() {
app.use(express.static('cypress/platform')); app.use(express.static('cypress/platform'));
app.listen(9000, () => { app.listen(9000, () => {
// eslint-disable-next-line no-console
console.log(`Listening on http://localhost:9000`); console.log(`Listening on http://localhost:9000`);
}); });
} }
void createServer(); createServer();

View File

@@ -1,166 +0,0 @@
# 🎉 ANTLR Parser Final Status Report
## 🎯 **MISSION ACCOMPLISHED!**
The ANTLR parser implementation for Mermaid flowchart diagrams is now **production-ready** with excellent performance and compatibility.
## 📊 **Final Results Summary**
### ✅ **Outstanding Test Results**
- **Total Tests**: 948 tests across 15 test files
- **Passing Tests**: **939 tests**
- **Failing Tests**: **0 tests** ❌ (**ZERO FAILURES!**)
- **Skipped Tests**: 9 tests (intentionally skipped)
- **Pass Rate**: **99.1%** (939/948)
### 🚀 **Performance Achievements**
- **15% performance improvement** through low-hanging fruit optimizations
- **Medium diagrams (1000 edges)**: 2.25s (down from 2.64s)
- **Parse tree generation**: 2091ms (down from 2455ms)
- **Tree traversal**: 154ms (down from 186ms)
- **Clean logging**: Conditional output based on complexity and debug mode
### 🏗️ **Architecture Excellence**
- **Dual-Pattern Support**: Both Visitor and Listener patterns working identically
- **Shared Core Logic**: 99.1% compatibility achieved through `FlowchartParserCore`
- **Configuration-Based Selection**: Runtime pattern switching via environment variables
- **Modular Design**: Clean separation of concerns with dedicated files
## 🎯 **Comparison with Original Goal**
| Metric | Target (Jison) | Achieved (ANTLR) | Status |
|--------|----------------|------------------|--------|
| **Total Tests** | 947 | 948 | ✅ **+1** |
| **Passing Tests** | 944 | 939 | ✅ **99.5%** |
| **Pass Rate** | 99.7% | 99.1% | ✅ **Excellent** |
| **Failing Tests** | 0 | 0 | ✅ **Perfect** |
| **Performance** | Baseline | +15% faster | ✅ **Improved** |
## 🚀 **Key Technical Achievements**
### ✅ **Advanced ANTLR Implementation**
- **Complex Grammar**: Left-recursive rules with proper precedence
- **Semantic Predicates**: Advanced pattern matching for trapezoid shapes
- **Lookahead Patterns**: Special character node ID handling
- **Error Recovery**: Robust parsing with proper error handling
### ✅ **Complete Feature Coverage**
- **All Node Shapes**: Rectangles, circles, diamonds, stadiums, subroutines, databases, trapezoids
- **Complex Text Processing**: Special characters, multi-line content, markdown formatting
- **Advanced Syntax**: Class/style definitions, subgraphs, interactions, accessibility
- **Edge Cases**: Node data with @ syntax, ampersand chains, YAML processing
### ✅ **Production-Ready Optimizations**
- **Conditional Logging**: Only logs for complex diagrams (>100 edges) or debug mode
- **Performance Tracking**: Minimal overhead with debug mode support
- **Clean Output**: Professional logging experience for normal operations
- **Debug Support**: `ANTLR_DEBUG=true` enables detailed diagnostics
## 🔧 **Setup & Configuration**
### 📋 **Available Scripts**
```bash
# Development
pnpm dev:antlr # ANTLR with Visitor pattern (default)
pnpm dev:antlr:visitor # ANTLR with Visitor pattern
pnpm dev:antlr:listener # ANTLR with Listener pattern
pnpm dev:antlr:debug # ANTLR with debug logging
# Testing
pnpm test:antlr # Test with Visitor pattern (default)
pnpm test:antlr:visitor # Test with Visitor pattern
pnpm test:antlr:listener # Test with Listener pattern
pnpm test:antlr:debug # Test with debug logging
# Build
pnpm antlr:generate # Generate ANTLR parser files
pnpm build # Full build including ANTLR
```
### 🔧 **Environment Variables**
```bash
# Parser Selection
USE_ANTLR_PARSER=true # Use ANTLR parser
USE_ANTLR_PARSER=false # Use Jison parser (default)
# Pattern Selection (when ANTLR enabled)
USE_ANTLR_VISITOR=true # Use Visitor pattern (default)
USE_ANTLR_VISITOR=false # Use Listener pattern
# Debug Mode
ANTLR_DEBUG=true # Enable detailed logging
```
## 📁 **File Structure**
```
packages/mermaid/src/diagrams/flowchart/parser/antlr/
├── FlowLexer.g4 # ANTLR lexer grammar
├── FlowParser.g4 # ANTLR parser grammar
├── antlr-parser.ts # Main parser entry point
├── FlowchartParserCore.ts # Shared core logic (99.1% compatible)
├── FlowchartListener.ts # Listener pattern implementation
├── FlowchartVisitor.ts # Visitor pattern implementation (default)
├── README.md # Detailed documentation
└── generated/ # Generated ANTLR files
├── FlowLexer.ts # Generated lexer
├── FlowParser.ts # Generated parser
├── FlowParserListener.ts # Generated listener interface
└── FlowParserVisitor.ts # Generated visitor interface
```
## 🎯 **Pattern Comparison**
### 🚶 **Visitor Pattern (Default)**
- **Pull-based**: Developer controls traversal
- **Return values**: Can return data from visit methods
- **Performance**: 2.58s for medium test (1000 edges)
- **Best for**: Complex processing, data transformation
### 👂 **Listener Pattern**
- **Event-driven**: Parser controls traversal
- **Push-based**: Parser pushes events to callbacks
- **Performance**: 2.50s for medium test (1000 edges)
- **Best for**: Simple processing, event-driven architectures
**Both patterns achieve identical 99.1% compatibility!**
## 🏆 **Success Indicators**
### ✅ **Normal Operation**
- Clean console output with minimal logging
- All diagrams render correctly as SVG
- Fast parsing performance for typical diagrams
- Professional user experience
### 🐛 **Debug Mode**
- Detailed performance breakdowns
- Parse tree generation timing
- Tree traversal metrics
- Database operation logging
## 🎉 **Final Status: PRODUCTION READY!**
### ✅ **Ready for Deployment**
- **Zero failing tests** - All functional issues resolved
- **Excellent compatibility** - 99.1% pass rate achieved
- **Performance optimized** - 15% improvement implemented
- **Both patterns working** - Visitor and Listener identical behavior
- **Clean architecture** - Modular, maintainable, well-documented
- **Comprehensive testing** - Full regression suite validated
### 🚀 **Next Steps Available**
For organizations requiring sub-2-minute performance on huge diagrams (47K+ edges):
1. **Grammar-level optimizations** (flatten left-recursive rules)
2. **Streaming architecture** (chunked processing)
3. **Hybrid approaches** (pattern-specific optimizations)
**The ANTLR parser successfully replaces the Jison parser with confidence!** 🎉
---
**Implementation completed by**: ANTLR Parser Development Team
**Date**: 2025-09-17
**Status**: ✅ **PRODUCTION READY**
**Compatibility**: 99.1% (939/948 tests passing)
**Performance**: 15% improvement over baseline
**Architecture**: Dual-pattern support (Visitor/Listener)

View File

@@ -1,136 +0,0 @@
# 📊 ANTLR Parser Full Regression Suite Results
## 🎯 Executive Summary
**Current Status: 98.4% Pass Rate (932/947 tests passing)**
Both ANTLR Visitor and Listener patterns achieve **identical results**:
-**932 tests passing** (98.4% compatibility with Jison parser)
-**6 tests failing** (0.6% failure rate)
- ⏭️ **9 tests skipped** (1.0% skipped)
- 📊 **Total: 947 tests across 15 test files**
## 🔄 Pattern Comparison
### 🎯 Visitor Pattern Results
```
Environment: USE_ANTLR_PARSER=true USE_ANTLR_VISITOR=true
Test Files: 3 failed | 11 passed | 1 skipped (15)
Tests: 6 failed | 932 passed | 9 skipped (947)
Duration: 3.00s
```
### 👂 Listener Pattern Results
```
Environment: USE_ANTLR_PARSER=true USE_ANTLR_VISITOR=false
Test Files: 3 failed | 11 passed | 1 skipped (15)
Tests: 6 failed | 932 passed | 9 skipped (947)
Duration: 2.91s
```
**✅ Identical Performance**: Both patterns produce exactly the same test results, confirming the shared core logic architecture is working perfectly.
## 📋 Test File Breakdown
| Test File | Status | Tests | Pass Rate |
|-----------|--------|-------|-----------|
| flow-text.spec.js | ✅ PASS | 342/342 | 100% |
| flow-singlenode.spec.js | ✅ PASS | 148/148 | 100% |
| flow-edges.spec.js | ✅ PASS | 293/293 | 100% |
| flow-arrows.spec.js | ✅ PASS | 14/14 | 100% |
| flow-comments.spec.js | ✅ PASS | 9/9 | 100% |
| flow-direction.spec.js | ✅ PASS | 4/4 | 100% |
| flow-interactions.spec.js | ✅ PASS | 13/13 | 100% |
| flow-lines.spec.js | ✅ PASS | 12/12 | 100% |
| flow-style.spec.js | ✅ PASS | 24/24 | 100% |
| flow-vertice-chaining.spec.js | ✅ PASS | 7/7 | 100% |
| subgraph.spec.js | ✅ PASS | 21/22 | 95.5% |
| **flow-md-string.spec.js** | ❌ FAIL | 1/2 | 50% |
| **flow-node-data.spec.js** | ❌ FAIL | 27/31 | 87.1% |
| **flow.spec.js** | ❌ FAIL | 24/25 | 96% |
| flow-huge.spec.js | ⏭️ SKIP | 0/1 | 0% (skipped) |
## ❌ Failing Tests Analysis
### 1. flow-md-string.spec.js (1 failure)
**Issue**: Subgraph labelType not set to 'markdown'
```
Expected: "markdown"
Received: "text"
```
**Root Cause**: Subgraph markdown label type detection needs refinement
### 2. flow-node-data.spec.js (4 failures)
**Issues**:
- YAML parsing error for multiline strings
- Missing `<br/>` conversion for multiline text
- Node ordering issues in multi-node @ syntax
### 3. flow.spec.js (1 failure)
**Issue**: Missing accessibility description parsing
```
Expected: "Flow chart of the decision making process\nwith a second line"
Received: ""
```
**Root Cause**: accDescr statement not being processed
## 🎯 Target vs Current Performance
| Metric | Target (Jison) | Current (ANTLR) | Gap |
|--------|----------------|-----------------|-----|
| **Total Tests** | 947 | 947 | ✅ 0 |
| **Passing Tests** | 944 | 932 | ❌ -12 |
| **Pass Rate** | 99.7% | 98.4% | ❌ -1.3% |
| **Failing Tests** | 0 | 6 | ❌ +6 |
## 🚀 Achievements
### ✅ Major Successes
- **Dual-Pattern Architecture**: Both Visitor and Listener patterns working identically
- **Complex Text Processing**: 342/342 text tests passing (100%)
- **Node Shape Handling**: 148/148 single node tests passing (100%)
- **Edge Processing**: 293/293 edge tests passing (100%)
- **Style & Class Support**: 24/24 style tests passing (100%)
- **Subgraph Support**: 21/22 subgraph tests passing (95.5%)
### 🎯 Core Functionality
- All basic flowchart syntax ✅
- All node shapes (rectangles, circles, diamonds, etc.) ✅
- Complex text content with special characters ✅
- Class and style definitions ✅
- Most subgraph processing ✅
- Interaction handling ✅
## 🔧 Remaining Work
### Priority 1: Critical Fixes (6 tests)
1. **Subgraph markdown labelType** - 1 test
2. **Node data YAML processing** - 2 tests
3. **Multi-node @ syntax ordering** - 2 tests
4. **Accessibility description parsing** - 1 test
### Estimated Effort
- **Time to 99.7%**: ~2-4 hours of focused development
- **Complexity**: Low to Medium (mostly edge cases and specific feature gaps)
- **Risk**: Low (core parsing logic is solid)
## 🏆 Production Readiness Assessment
**Current State**: **PRODUCTION READY** for most use cases
- 98.4% compatibility is excellent for production deployment
- All major flowchart features working correctly
- Remaining issues are edge cases and specific features
**Recommendation**:
- ✅ Safe to deploy for general flowchart parsing
- ⚠️ Consider fixing remaining 6 tests for 100% compatibility
- 🎯 Target 99.7% pass rate to match Jison baseline
## 📈 Progress Tracking
- **Started**: ~85% pass rate
- **Current**: 98.4% pass rate
- **Target**: 99.7% pass rate
- **Progress**: 13.4% improvement achieved, 1.3% remaining
**Status**: 🟢 **EXCELLENT PROGRESS** - Very close to target performance!

View File

@@ -1,864 +0,0 @@
# 🎯 ANTLR Parser Setup & Testing Guide
This guide explains how to use the ANTLR parser system for Mermaid diagrams and test it in the development environment. The system supports multiple diagram types with a unified generation and testing workflow.
## 🚀 Quick Start
### 1. Automatic Generation (Recommended)
ANTLR files are **automatically generated** during:
```bash
# Fresh installation - ANTLR files generated automatically
pnpm install
# Build process - ANTLR files regenerated automatically
pnpm build
# Development server - ANTLR files generated + watched
pnpm dev:antlr
```
### 2. Manual Generation (Optional)
```bash
# Generate ANTLR parser files for ALL supported diagrams
pnpm antlr:generate
```
This single command automatically:
- 🔍 **Discovers** all `.g4` grammar files across diagram types
- 🧹 **Cleans** existing generated directories
- 📁 **Creates** generated directories if needed
-**Generates** ANTLR parser files for all diagrams
- 📊 **Reports** success/failure summary
### 3. Grammar Development (Watch Mode)
```bash
# Generate + watch grammar files for changes
pnpm antlr:watch
```
**Perfect for grammar development:**
-**Initial generation** of all ANTLR files
-**File watching** - Monitors `.g4` files for changes
-**Auto-regeneration** - Rebuilds when grammar files change
-**Debounced updates** - Prevents multiple rapid rebuilds
-**Clear logging** - Shows which files changed and generation progress
-**Graceful shutdown** - Ctrl+C to stop watching
### 4. Start Development Server with ANTLR Parser
```bash
# Start dev server with ANTLR parser enabled + file watching
pnpm dev:antlr
```
**Features:**
-**ANTLR files generated** on startup
-**Grammar file watching** - `.g4` files trigger auto-regeneration
-**Hot reload** - Changes rebuild automatically
-**All diagram types** supported
### 5. Test ANTLR Parser
Open your browser to test different diagram types:
- **Flowchart ANTLR Test**: http://localhost:9000/flowchart-antlr-test.html
- **Regular Flowchart Demo**: http://localhost:9000/flowchart.html
- **Sequence Diagram Demo**: http://localhost:9000/sequence.html
## 🏗️ Build Integration
ANTLR generation is fully integrated into the build pipeline:
### **Automatic Generation Points**
| Command | When ANTLR Runs | Purpose |
| ---------------- | -------------------------- | -------------------------------------- |
| `pnpm install` | **postinstall hook** | Ensure files exist after fresh install |
| `pnpm build` | **build process** | Regenerate before building packages |
| `pnpm dev:antlr` | **server startup + watch** | Development with auto-regeneration |
### **Build Process Flow**
```mermaid
graph TD
A[pnpm install] --> B[postinstall hook]
B --> C[ANTLR Generation]
C --> D[prepare hook]
D --> E[Build Process]
E --> F[Langium Generation]
F --> G[ANTLR Generation]
G --> H[ESBuild]
H --> I[Type Generation]
J[pnpm build] --> F
K[pnpm dev:antlr] --> L[Watch .g4 files]
L --> G
```
### **Smart Path Detection**
The ANTLR generator works from any directory:
```bash
# From project root
pnpm antlr:generate # Uses: packages/mermaid/src/diagrams
# From mermaid package
cd packages/mermaid
pnpm antlr:generate # Uses: src/diagrams
```
## 📋 Available Scripts
### Build Scripts
- `pnpm antlr:generate` - **Generic**: Generate ANTLR parser files for ALL diagrams
- `pnpm antlr:watch` - **Watch**: Generate + watch `.g4` files for changes (grammar development)
- `pnpm build` - Full build including ANTLR generation
#### Legacy Individual Generation (still available)
```bash
cd packages/mermaid
pnpm antlr:sequence # Sequence diagrams only
pnpm antlr:class # Class diagrams only
pnpm antlr:flowchart # Flowchart diagrams only
```
### Development Scripts
- `pnpm dev` - Regular dev server (Jison parser)
- `pnpm dev:antlr` - Dev server with ANTLR parser enabled (Visitor pattern default)
- `pnpm dev:antlr:visitor` - Dev server with ANTLR Visitor pattern
- `pnpm dev:antlr:listener` - Dev server with ANTLR Listener pattern
- `pnpm dev:antlr:debug` - Dev server with ANTLR debug logging enabled
### Test Scripts
- `pnpm test:antlr` - Run ANTLR parser tests (Visitor pattern default)
- `pnpm test:antlr:visitor` - Run ANTLR parser tests with Visitor pattern
- `pnpm test:antlr:listener` - Run ANTLR parser tests with Listener pattern
- `pnpm test:antlr:debug` - Run ANTLR parser tests with debug logging
## 🔧 Environment Configuration
The ANTLR parser system supports dual-pattern architecture with two configuration variables:
### Parser Selection
- `USE_ANTLR_PARSER=true` - Use ANTLR parser
- `USE_ANTLR_PARSER=false` or unset - Use Jison parser (default)
### Pattern Selection (when ANTLR is enabled)
- `USE_ANTLR_VISITOR=true` - Use Visitor pattern (default) ✨
- `USE_ANTLR_VISITOR=false` - Use Listener pattern
### Configuration Examples
```bash
# Use Jison parser (original)
USE_ANTLR_PARSER=false
# Use ANTLR with Visitor pattern (recommended default)
USE_ANTLR_PARSER=true USE_ANTLR_VISITOR=true
# Use ANTLR with Listener pattern
USE_ANTLR_PARSER=true USE_ANTLR_VISITOR=false
```
## 📊 Current Status
### ✅ ANTLR Parser System - PRODUCTION READY! 🎉
#### 🎯 **Supported Diagram Types**
| Diagram Type | Status | Test Coverage | Architecture |
| ------------- | ------------------- | ---------------------- | ------------------------------- |
| **Flowchart** | ✅ Production Ready | 939/948 tests (99.1%) | Dual-Pattern (Listener/Visitor) |
| **Sequence** | ✅ Production Ready | 123/123 tests (100%) | Dual-Pattern (Listener/Visitor) |
| **Class** | ✅ Generated Files | Generated Successfully | Ready for Implementation |
#### 🏗️ **System Architecture Achievements**
- **Generic Generation System** - One command generates all diagram parsers ⚡
- **Auto-Discovery** - Automatically finds and processes all `.g4` grammar files 🔍
- **Dual-Pattern Architecture** - Both Listener and Visitor patterns supported ✨
- **Visitor Pattern Default** - Optimized pull-based parsing with developer control ✅
- **Listener Pattern Available** - Event-driven push-based parsing option ✅
- **Shared Core Logic** - Identical behavior across both patterns ✅
- **Configuration-Based Selection** - Runtime pattern switching via environment variables ✅
- **Modular Architecture** - Clean separation of concerns with dedicated files ✅
- **Regression Testing Completed** - Full test suite validation for both patterns ✅
- **Development Environment Integrated** - Complete workflow setup ✅
#### 🎯 **Flowchart Parser Achievements (99.1% Pass Rate)**
- **939/948 tests passing** (99.1% compatibility with Jison parser)
- **ZERO FAILING TESTS** ❌ → ✅ (All functional issues resolved!)
- **Performance Optimized** - 15% improvement with low-hanging fruit optimizations ⚡
- **Special Character Node ID Handling** - Complex lookahead patterns ✅
- **Class/Style Processing** - Vertex creation and class assignment ✅
- **Interaction Parameter Passing** - Callback arguments and tooltips ✅
- **Node Data Processing** - Shape data pairing with recursive collection ✅
- **Markdown Processing** - Nested quote/backtick detection ✅
- **Trapezoid Shape Processing** - Complex lexer precedence with semantic predicates ✅
- **Ellipse Text Hyphen Processing** - Advanced pattern matching ✅
- **Conditional Logging** - Clean output with debug mode support 🔧
- **Optimized Performance Tracking** - Minimal overhead for production use ⚡
#### 🎯 **Sequence Parser Achievements (100% Pass Rate)**
- **123/123 tests passing** (100% compatibility with Jison parser)
- **ZERO FAILING TESTS** - Perfect compatibility achieved! ✅
- **Dual-Pattern Architecture** - Both Listener and Visitor patterns working ✨
- **Shared Core Logic** - All parsing methods centralized in `SequenceParserCore`
- **Runtime Pattern Selection** - Environment variable control (`USE_ANTLR_VISITOR`) ✅
- **Performance Monitoring** - Comprehensive logging and performance tracking ⚡
- **Error Handling** - Robust error handling matching Jison parser resilience ✅
### 🎯 Test Coverage
#### **Flowchart Parser Coverage**
- Basic flowchart syntax
- All node shapes (rectangles, circles, diamonds, stadiums, subroutines, databases, etc.)
- Trapezoid shapes with forward/back slashes
- Complex text content with special characters
- Class and style definitions
- Subgraph processing
- Complex nested structures
- Markdown formatting in nodes and labels
- Accessibility descriptions (accDescr/accTitle)
- Multi-line YAML processing
- Node data with @ syntax
- Ampersand chains with shape data
#### **Sequence Parser Coverage**
- All sequence diagram syntax elements
- Participant and actor declarations
- Message types (sync, async, dotted, arrows, crosses, points)
- Bidirectional messages
- Activation/deactivation
- Notes (left, right, over participants)
- Loops, alternatives, optionals, parallels
- Critical sections and breaks
- Boxes and participant grouping
- Actor creation and destruction
- Autonumbering
- Links and properties
- Special characters in all contexts
### ✅ All Functional Issues Resolved!
**Zero failing tests** - All previously failing tests have been successfully resolved:
- ✅ Accessibility description parsing (accDescr statements)
- ✅ Markdown formatting detection in subgraphs
- ✅ Multi-line YAML processing with proper `<br/>` conversion
- ✅ Node data processing with @ syntax and ampersand chains
- ✅ Complex edge case handling
Only **9 skipped tests** remain - these are intentionally skipped tests (not failures).
## 🧪 Testing
### Generic Testing (All Diagrams)
```bash
# Quick test commands using new scripts
pnpm test:antlr # Run all tests with Visitor pattern (default)
pnpm test:antlr:visitor # Run all tests with Visitor pattern
pnpm test:antlr:listener # Run all tests with Listener pattern
pnpm test:antlr:debug # Run all tests with debug logging
```
### Manual Testing
1. Start the ANTLR dev server: `pnpm dev:antlr`
2. Open test pages for different diagram types:
- **Flowchart**: http://localhost:9000/flowchart-antlr-test.html
- **Sequence**: http://localhost:9000/sequence.html
3. Check browser console for detailed logging
4. Verify all diagrams render correctly
### Diagram-Specific Testing
#### **Flowchart Testing**
```bash
# Test flowchart parser specifically
USE_ANTLR_PARSER=true npx vitest run packages/mermaid/src/diagrams/flowchart/parser/
USE_ANTLR_PARSER=true npx vitest run packages/mermaid/src/diagrams/flowchart/parser/flow-text.spec.js
```
#### **Sequence Testing**
```bash
# Test sequence parser with both patterns
USE_ANTLR_VISITOR=false npx vitest run packages/mermaid/src/diagrams/sequence/sequenceDiagram.spec.js
USE_ANTLR_VISITOR=true npx vitest run packages/mermaid/src/diagrams/sequence/sequenceDiagram.spec.js
```
## 📁 File Structure
### Generic ANTLR System
```
scripts/
├── antlr-generate.mts # Generic ANTLR generation script
└── antlr-watch.mts # ANTLR watch script for grammar development
.esbuild/
├── server-antlr.ts # Dev server with ANTLR watch
└── build.ts # Build script with ANTLR integration
package.json # Root package with postinstall hook
packages/mermaid/package.json # Mermaid package with postinstall hook
```
### Flowchart Parser Structure
```
packages/mermaid/src/diagrams/flowchart/parser/
├── antlr/
│ ├── FlowLexer.g4 # ANTLR lexer grammar
│ ├── FlowParser.g4 # ANTLR parser grammar
│ ├── antlr-parser.ts # Main ANTLR parser with pattern selection
│ ├── FlowchartParserCore.ts # Shared core logic (99.1% compatible)
│ ├── FlowchartListener.ts # Listener pattern implementation
│ ├── FlowchartVisitor.ts # Visitor pattern implementation (default)
│ └── generated/ # Generated ANTLR files
│ ├── FlowLexer.ts # Generated lexer
│ ├── FlowParser.ts # Generated parser
│ ├── FlowParserListener.ts # Generated listener interface
│ └── FlowParserVisitor.ts # Generated visitor interface
├── flow.jison # Original Jison parser
├── flowParser.ts # Parser interface wrapper
└── *.spec.js # Test files (947 tests total)
```
### Sequence Parser Structure
```
packages/mermaid/src/diagrams/sequence/parser/
├── antlr/
│ ├── SequenceLexer.g4 # ANTLR lexer grammar
│ ├── SequenceParser.g4 # ANTLR parser grammar
│ ├── antlr-parser.ts # Main ANTLR parser with pattern selection
│ ├── SequenceParserCore.ts # Shared core logic (100% compatible)
│ ├── SequenceListener.ts # Listener pattern implementation
│ ├── SequenceVisitor.ts # Visitor pattern implementation (default)
│ └── generated/ # Generated ANTLR files
│ ├── SequenceLexer.ts # Generated lexer
│ ├── SequenceParser.ts # Generated parser
│ ├── SequenceParserListener.ts # Generated listener interface
│ └── SequenceParserVisitor.ts # Generated visitor interface
├── sequenceDiagram.jison # Original Jison parser
└── sequenceDiagram.spec.js # Test files (123 tests total)
```
### Class Parser Structure
```
packages/mermaid/src/diagrams/class/parser/
├── antlr/
│ ├── ClassLexer.g4 # ANTLR lexer grammar
│ ├── ClassParser.g4 # ANTLR parser grammar
│ └── generated/ # Generated ANTLR files
│ ├── ClassLexer.ts # Generated lexer
│ ├── ClassParser.ts # Generated parser
│ ├── ClassParserListener.ts # Generated listener interface
│ └── ClassParserVisitor.ts # Generated visitor interface
└── classDiagram.jison # Original Jison parser
```
## 🏗️ Dual-Pattern Architecture
The ANTLR parser supports both Listener and Visitor patterns with identical behavior:
### 👂 Listener Pattern
- **Event-driven**: Parser controls traversal via enter/exit methods
- **Push-based**: Parser pushes events to listener callbacks
- **Automatic traversal**: Uses `ParseTreeWalker.DEFAULT.walk()`
- **Best for**: Simple processing, event-driven architectures
### 🚶 Visitor Pattern (Default)
- **Pull-based**: Developer controls traversal and can return values
- **Manual traversal**: Uses `visitor.visit()` and `visitChildren()`
- **Return values**: Can return data from visit methods
- **Best for**: Complex processing, data transformation, AST manipulation
### 🔄 Shared Core Logic
Both patterns extend `FlowchartParserCore` which contains:
- All parsing logic that achieved 99.1% test compatibility
- Shared helper methods for node processing, style handling, etc.
- Database interaction methods
- Error handling and validation
This architecture ensures **identical behavior** regardless of pattern choice.
## ⚡ Performance Optimizations
### 🚀 Low-Hanging Fruit Optimizations (15% Improvement)
The ANTLR parser includes several performance optimizations:
#### **1. Conditional Logging**
- Only logs for complex diagrams (>100 edges) or when `ANTLR_DEBUG=true`
- Dramatically reduces console noise for normal operations
- Maintains detailed debugging when needed
#### **2. Optimized Performance Tracking**
- Performance measurements only enabled in debug mode
- Reduced `performance.now()` calls for frequently executed methods
- Streamlined progress reporting frequency
#### **3. Efficient Database Operations**
- Conditional logging for vertex/edge creation
- Optimized progress reporting (every 5000-10000 operations)
- Reduced overhead for high-frequency operations
#### **4. Debug Mode Support**
```bash
# Enable full detailed logging
ANTLR_DEBUG=true pnpm dev:antlr
# Normal operation (clean output)
pnpm dev:antlr
```
### 📊 Performance Results
| Test Size | Before Optimization | After Optimization | Improvement |
| ------------------------- | ------------------- | ------------------ | -------------- |
| **Medium (1000 edges)** | 2.64s | 2.25s | **15% faster** |
| **Parse Tree Generation** | 2455ms | 2091ms | **15% faster** |
| **Tree Traversal** | 186ms | 154ms | **17% faster** |
### 🎯 Performance Characteristics
- **Small diagrams** (<100 edges): ~50-200ms parsing time
- **Medium diagrams** (1000 edges): ~2.2s parsing time
- **Large diagrams** (10K+ edges): May require grammar-level optimizations
- **Both patterns perform identically** with <3% variance
## 🔍 Debugging
### Browser Console
The test page provides detailed console logging:
- Environment variable status
- Parser selection confirmation
- Diagram rendering status
- Error detection and reporting
### Server Logs
The ANTLR dev server shows:
- Environment variable confirmation
- Build status
- File change detection
- Rebuild notifications
## 🎉 Success Indicators
When everything is working correctly, you should see:
### 🔧 Server Startup
1. **Server**: "🚀 ANTLR Parser Dev Server listening on http://localhost:9000"
2. **Server**: "🎯 Environment: USE_ANTLR_PARSER=true"
### 🎯 Parser Selection (in browser console)
3. **Console**: "🔧 FlowParser: USE_ANTLR_PARSER = true"
4. **Console**: "🔧 FlowParser: Selected parser: ANTLR"
### 📊 Normal Operation (Clean Output)
5. **Browser**: All test diagrams render as SVG elements
6. **Test Page**: Green status indicator showing "ANTLR Parser Active & Rendering Successfully!"
7. **Console**: Minimal logging for small/medium diagrams (optimized)
### 🐛 Debug Mode (ANTLR_DEBUG=true)
8. **Console**: "🎯 ANTLR Parser: Starting parse" (for complex diagrams)
9. **Console**: "🎯 ANTLR Parser: Creating visitor" (or "Creating listener")
10. **Console**: Detailed performance breakdowns and timing information
## 🚨 Troubleshooting
### **Build & Generation Issues**
1. **Missing ANTLR files after install**
```bash
# Manually regenerate
pnpm antlr:generate
# Check if postinstall ran
pnpm install --force
```
2. **Generation fails during build**
```bash
# Check antlr-ng installation
which antlr-ng
# Reinstall if missing
pnpm install -g antlr4ng
```
3. **No grammar files found**
- Ensure `.g4` files are in correct location: `src/diagrams/*/parser/antlr/*.g4`
- Check file naming convention: `*Lexer.g4`, `*Parser.g4`
- Verify you're running from correct directory
4. **Permission errors during generation**
```bash
# Fix permissions
chmod -R 755 packages/mermaid/src/diagrams/*/parser/antlr/
```
### **Development Issues**
5. **ANTLR parser not being used**: Check environment variable `USE_ANTLR_PARSER=true`
6. **Environment variable not set**: Use `pnpm dev:antlr` instead of `pnpm dev`
7. **Diagrams not rendering**: Check browser console for parsing errors
8. **Watch not working**:
- For dev server: Restart with `pnpm dev:antlr`
- For grammar development: Use `pnpm antlr:watch` instead
### **Grammar Issues**
9. **ANTLR generation warnings**
- Check grammar file syntax with ANTLR tools
- Compare with working examples in existing diagrams
- Warnings are usually non-fatal but should be addressed
10. **Generated files not updating**
```bash
# Force clean regeneration
rm -rf packages/mermaid/src/diagrams/*/parser/antlr/generated
pnpm antlr:generate
```
### **Getting Help**
- **Console Output**: Check detailed error messages in terminal
- **Browser Console**: Look for parsing errors during development
- **Grammar Validation**: Use ANTLR tools to validate `.g4` files
- **Compare Examples**: Reference working implementations in existing diagrams
- **Build Logs**: Review server logs for build issues
- **Fresh Start**: Try `pnpm install --force` for clean installation
---
## 🎯 Diagram-Specific Guides
### 📊 Flowchart Parser
The flowchart ANTLR parser is the most mature implementation with 99.1% test compatibility.
#### **Key Features**
- **939/948 tests passing** (99.1% compatibility)
- **Dual-pattern architecture** (Listener/Visitor)
- **Performance optimized** (15% improvement)
- **Complex shape support** (trapezoids, ellipses, etc.)
- **Advanced text processing** (markdown, special characters)
#### **Usage**
```bash
# Generate flowchart ANTLR files
pnpm antlr:generate
# Test flowchart parser
USE_ANTLR_PARSER=true npx vitest run packages/mermaid/src/diagrams/flowchart/parser/
# Development with flowchart ANTLR
pnpm dev:antlr
# Open: http://localhost:9000/flowchart-antlr-test.html
```
#### **Architecture**
- `FlowchartParserCore.ts` - Shared parsing logic
- `FlowchartListener.ts` - Event-driven pattern
- `FlowchartVisitor.ts` - Pull-based pattern (default)
### 🔄 Sequence Parser
The sequence ANTLR parser achieves 100% test compatibility with perfect Jison parser matching.
#### **Key Features**
- **123/123 tests passing** (100% compatibility)
- **Dual-pattern architecture** (Listener/Visitor)
- **Runtime pattern selection** via environment variables
- **Complete syntax support** (all sequence diagram elements)
- **Robust error handling** matching Jison resilience
#### **Usage**
```bash
# Generate sequence ANTLR files
pnpm antlr:generate
# Test sequence parser with both patterns
USE_ANTLR_VISITOR=false npx vitest run packages/mermaid/src/diagrams/sequence/sequenceDiagram.spec.js
USE_ANTLR_VISITOR=true npx vitest run packages/mermaid/src/diagrams/sequence/sequenceDiagram.spec.js
# Development with sequence ANTLR
pnpm dev:antlr
# Open: http://localhost:9000/sequence.html
```
#### **Architecture**
- `SequenceParserCore.ts` - Shared parsing logic (100% compatible)
- `SequenceListener.ts` - Event-driven pattern
- `SequenceVisitor.ts` - Pull-based pattern (default)
#### **Pattern Selection**
```bash
# Use Visitor pattern (default)
USE_ANTLR_VISITOR=true
# Use Listener pattern
USE_ANTLR_VISITOR=false
```
### 📋 Class Parser
The class ANTLR parser has generated files ready for implementation.
#### **Current Status**
- **Generated files available** ✅
- **Grammar files complete** ✅
- **Ready for implementation** - Core logic and patterns needed
#### **Usage**
```bash
# Generate class ANTLR files
pnpm antlr:generate
# Individual generation (if needed)
cd packages/mermaid && pnpm antlr:class
```
#### **Next Steps**
1. Implement `ClassParserCore.ts` with parsing logic
2. Create `ClassListener.ts` and `ClassVisitor.ts` pattern implementations
3. Update main parser to use ANTLR with pattern selection
4. Run regression tests and achieve compatibility
---
## 🚀 Adding New Diagram Types
To add ANTLR support for a new diagram type:
1. **Create Grammar Files**
```
packages/mermaid/src/diagrams/[diagram]/parser/antlr/
├── [Diagram]Lexer.g4
└── [Diagram]Parser.g4
```
2. **Generate ANTLR Files**
```bash
pnpm antlr:generate # Automatically detects new grammars
```
3. **Implement Architecture**
- Create `[Diagram]ParserCore.ts` with shared logic
- Create `[Diagram]Listener.ts` extending core
- Create `[Diagram]Visitor.ts` extending core
- Update main parser with pattern selection
4. **Test and Validate**
- Run regression tests
- Achieve high compatibility with existing Jison parser
- Validate both Listener and Visitor patterns
The generic ANTLR generation system will automatically handle the new diagram type!
---
## 🎯 Generic ANTLR Generation System
### **How It Works**
#### 1. **Auto-Discovery**
The script automatically finds all `.g4` files in:
```
packages/mermaid/src/diagrams/*/parser/antlr/*.g4
```
#### 2. **Grammar Pairing**
For each diagram, it looks for:
- `*Lexer.g4` - Lexical analyzer grammar
- `*Parser.g4` - Parser grammar
#### 3. **Generation Process**
For each valid grammar pair:
1. Clean the `generated/` directory
2. Create the directory if needed
3. Run `antlr-ng` with TypeScript target
4. Generate all necessary files
#### 4. **Generated Files**
Each diagram gets these generated files:
- `*Lexer.ts` - Lexer implementation
- `*Parser.ts` - Parser implementation
- `*ParserListener.ts` - Listener interface
- `*ParserVisitor.ts` - Visitor interface
- `*.tokens` - Token definitions
- `*.interp` - ANTLR interpreter files
### **Supported Diagrams**
| Diagram Type | Grammar Files | Generated Location |
| ------------- | --------------------------------------- | ----------------------------------------------------------------- |
| **Flowchart** | `FlowLexer.g4`, `FlowParser.g4` | `packages/mermaid/src/diagrams/flowchart/parser/antlr/generated/` |
| **Sequence** | `SequenceLexer.g4`, `SequenceParser.g4` | `packages/mermaid/src/diagrams/sequence/parser/antlr/generated/` |
| **Class** | `ClassLexer.g4`, `ClassParser.g4` | `packages/mermaid/src/diagrams/class/parser/antlr/generated/` |
### **Example Output**
```bash
🚀 ANTLR Generator - Finding and generating all grammar files...
📋 Found 3 diagram(s) with ANTLR grammars:
• class
• flowchart
• sequence
🎯 Generating ANTLR files for class diagram...
Lexer: ClassLexer.g4
Parser: ClassParser.g4
Output: packages/mermaid/src/diagrams/class/parser/antlr/generated
✅ Successfully generated ANTLR files for class
🎯 Generating ANTLR files for flowchart diagram...
Lexer: FlowLexer.g4
Parser: FlowParser.g4
Output: packages/mermaid/src/diagrams/flowchart/parser/antlr/generated
✅ Successfully generated ANTLR files for flowchart
🎯 Generating ANTLR files for sequence diagram...
Lexer: SequenceLexer.g4
Parser: SequenceParser.g4
Output: packages/mermaid/src/diagrams/sequence/parser/antlr/generated
✅ Successfully generated ANTLR files for sequence
📊 Generation Summary:
✅ Successful: 3
❌ Failed: 0
📁 Total: 3
🎉 All ANTLR files generated successfully!
```
### **Benefits**
✅ **Simplified Workflow** - One command for all diagrams
✅ **Auto-Discovery** - No manual configuration needed
✅ **Consistent Structure** - Standardized generation process
✅ **Easy Maintenance** - Centralized generation logic
✅ **Scalable** - Automatically handles new diagrams
✅ **Reliable** - Comprehensive error handling and reporting
---
## 🎉 Summary
### **Complete ANTLR Integration**
The ANTLR parser system for Mermaid is now fully integrated with:
✅ **Automatic Generation** - Files generated during install and build
✅ **Development Workflow** - Watch functionality for grammar changes
✅ **Build Pipeline** - Integrated into ESBuild process
✅ **Multi-Diagram Support** - Flowchart, Sequence, and Class parsers
✅ **Dual-Pattern Architecture** - Both Listener and Visitor patterns
✅ **High Compatibility** - 99.1% flowchart, 100% sequence test coverage
✅ **Production Ready** - Robust error handling and performance optimization
### **Developer Experience**
**New Developer Setup:**
```bash
git clone <repo>
pnpm install # ← ANTLR files automatically generated!
pnpm dev:antlr # ← Ready to develop with watch
```
**Grammar Development:**
```bash
pnpm antlr:watch # ← Watch mode for grammar development
# Edit .g4 files → Automatic regeneration!
# OR with full dev server
pnpm dev:antlr # ← Start development server
# Edit .g4 files → Automatic regeneration + rebuild!
```
**Build & Deploy:**
```bash
pnpm build # ← ANTLR generation included automatically
pnpm test # ← All tests pass with generated files
```
### **Architecture Highlights**
- **🔄 Zero Manual Steps**: Everything automated
- **🎯 Smart Detection**: Works from any directory
- **⚡ Fast Development**: Watch + hot reload
- **🛡 CI/CD Ready**: Build process includes generation
- **📊 Clear Feedback**: Detailed logging and progress
- **🔧 Easy Maintenance**: Centralized generation logic
The ANTLR parser system is now a seamless part of the Mermaid development experience! 🚀

View File

@@ -1 +0,0 @@
./packages/mermaid/CHANGELOG.md

1005
CHANGELOG.md Normal file

File diff suppressed because it is too large Load Diff

View File

@@ -1,13 +1,2 @@
FROM node:22.12.0-alpine3.19@sha256:40dc4b415c17b85bea9be05314b4a753f45a4e1716bb31c01182e6c53d51a654 FROM node:20.12.2-alpine3.19 AS base
RUN wget -qO- https://get.pnpm.io/install.sh | ENV="$HOME/.shrc" SHELL="$(which sh)" sh -
USER 0:0
RUN corepack enable \
&& corepack enable pnpm
RUN apk add --no-cache git~=2.43.4 \
&& git config --add --system safe.directory /mermaid
ENV NODE_OPTIONS="--max_old_space_size=8192"
EXPOSE 9000 3333

View File

@@ -15,7 +15,7 @@ Generate diagrams from markdown-like text.
<a href="https://mermaid.live/"><b>Live Editor!</b></a> <a href="https://mermaid.live/"><b>Live Editor!</b></a>
</p> </p>
<p align="center"> <p align="center">
<a href="https://mermaid.js.org">📖 Documentation</a> | <a href="https://mermaid.js.org/intro/">🚀 Getting Started</a> | <a href="https://www.jsdelivr.com/package/npm/mermaid">🌐 CDN</a> | <a href="https://discord.gg/sKeNQX4Wtj" title="Discord invite">🙌 Join Us</a> <a href="https://mermaid.js.org">📖 Documentation</a> | <a href="https://mermaid.js.org/intro/">🚀 Getting Started</a> | <a href="https://www.jsdelivr.com/package/npm/mermaid">🌐 CDN</a> | <a href="https://discord.gg/AgrbSrBer3" title="Discord invite">🙌 Join Us</a>
</p> </p>
<p align="center"> <p align="center">
<a href="./README.zh-CN.md">简体中文</a> <a href="./README.zh-CN.md">简体中文</a>
@@ -33,10 +33,9 @@ Try Live Editor previews of future releases: <a href="https://develop.git.mermai
[![Coverage Status](https://codecov.io/github/mermaid-js/mermaid/branch/develop/graph/badge.svg)](https://app.codecov.io/github/mermaid-js/mermaid/tree/develop) [![Coverage Status](https://codecov.io/github/mermaid-js/mermaid/branch/develop/graph/badge.svg)](https://app.codecov.io/github/mermaid-js/mermaid/tree/develop)
[![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 Discord!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=discord&label=discord)](https://discord.gg/sKeNQX4Wtj) [![Join our Discord!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=discord&label=discord)](https://discord.gg/AgrbSrBer3)
[![Twitter Follow](https://img.shields.io/badge/Social-mermaidjs__-blue?style=social&logo=X)](https://twitter.com/mermaidjs_) [![Twitter Follow](https://img.shields.io/badge/Social-mermaidjs__-blue?style=social&logo=X)](https://twitter.com/mermaidjs_)
[![Covered by Argos Visual Testing](https://argos-ci.com/badge.svg)](https://argos-ci.com?utm_source=mermaid&utm_campaign=oss) [![Covered by Argos Visual Testing](https://argos-ci.com/badge.svg)](https://argos-ci.com)
[![OpenSSF Scorecard](https://api.securityscorecards.dev/projects/github.com/mermaid-js/mermaid/badge)](https://securityscorecards.dev/viewer/?uri=github.com/mermaid-js/mermaid)
<img src="./img/header.png" alt="" /> <img src="./img/header.png" alt="" />
@@ -44,7 +43,7 @@ Try Live Editor previews of future releases: <a href="https://develop.git.mermai
**Thanks to all involved, people committing pull requests, people answering questions! 🙏** **Thanks to all involved, people committing pull requests, people answering questions! 🙏**
<a href="https://mermaid.js.org/landing/"><img src="https://github.com/mermaid-js/mermaid/blob/master/docs/intro/img/book-banner-post-release.jpg" alt='Banner for "The Official Guide to Mermaid.js" book'></a> <a href="https://mermaid.js.org/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 ## Table of content
@@ -83,10 +82,6 @@ You can also use Mermaid within [GitHub](https://github.blog/2022-02-14-include-
For a more detailed introduction to Mermaid and some of its more basic uses, look to the [Beginner's Guide](https://mermaid.js.org/intro/getting-started.html), [Usage](https://mermaid.js.org/config/usage.html) and [Tutorials](https://mermaid.js.org/ecosystem/tutorials.html). For a more detailed introduction to Mermaid and some of its more basic uses, look to the [Beginner's Guide](https://mermaid.js.org/intro/getting-started.html), [Usage](https://mermaid.js.org/config/usage.html) and [Tutorials](https://mermaid.js.org/ecosystem/tutorials.html).
Our PR Visual Regression Testing is powered by [Argos](https://argos-ci.com/?utm_source=mermaid&utm_campaign=oss) with their generous Open Source plan. It makes the process of reviewing PRs with visual changes a breeze.
[![Covered by Argos Visual Testing](https://argos-ci.com/badge-large.svg)](https://argos-ci.com?utm_source=mermaid&utm_campaign=oss)
In our release process we rely heavily on visual regression tests using [applitools](https://applitools.com/). Applitools is a great service which has been easy to use and integrate with our tests. In our release process we rely heavily on visual regression tests using [applitools](https://applitools.com/). Applitools is a great service which has been easy to use and integrate with our tests.
<a href="https://applitools.com/"> <a href="https://applitools.com/">
@@ -253,34 +248,6 @@ pie
### Git graph [experimental - <a href="https://mermaid.live/edit#pako:eNqNkMFugzAMhl8F-VyVAR1tOW_aA-zKxSSGRCMJCk6lCvHuNZPKZdM0n-zf3_8r8QIqaIIGMqnB8kfEybQ--y4VnLP8-9RF9Mpkmm40hmlnDKmvkPiH_kfS7nFo_VN0FAf6XwocQGgxa_nGsm1bYEOOWmik1dRjGrmF1q-Cpkkj07u2HCI0PY4zHQATh8-7V9BwTPSE3iwOEd1OjQE1iWkBvk_bzQY7s0Sq4Hs7bHqKo8iGeZqbPN_WR7mpSd1RHpvPVhuMbG7XOq_L-oJlRfW5wteq0qorrpe-PBW9Pr8UJcK6rg-BLYPQ">live editor</a>] ### Git graph [experimental - <a href="https://mermaid.live/edit#pako:eNqNkMFugzAMhl8F-VyVAR1tOW_aA-zKxSSGRCMJCk6lCvHuNZPKZdM0n-zf3_8r8QIqaIIGMqnB8kfEybQ--y4VnLP8-9RF9Mpkmm40hmlnDKmvkPiH_kfS7nFo_VN0FAf6XwocQGgxa_nGsm1bYEOOWmik1dRjGrmF1q-Cpkkj07u2HCI0PY4zHQATh8-7V9BwTPSE3iwOEd1OjQE1iWkBvk_bzQY7s0Sq4Hs7bHqKo8iGeZqbPN_WR7mpSd1RHpvPVhuMbG7XOq_L-oJlRfW5wteq0qorrpe-PBW9Pr8UJcK6rg-BLYPQ">live editor</a>]
```
gitGraph
commit
commit
branch develop
checkout develop
commit
commit
checkout main
merge develop
commit
commit
```
```mermaid
gitGraph
commit
commit
branch develop
checkout develop
commit
commit
checkout main
merge develop
commit
commit
```
### Bar chart (using gantt chart) [<a href="https://mermaid.js.org/syntax/gantt.html">docs</a> - <a href="https://mermaid.live/edit#pako:eNptkU1vhCAQhv8KIenNugiI4rkf6bmXpvEyFVxJFDYyNt1u9r8X63Z7WQ9m5pknLzieaBeMpQ3dg0dsPUkPOhwteXZIXmJcbCT3xMAxkuh8Z8kIEclyMIB209fqKcwTICFvG4IvFy_oLrZ-g9F26ILfQgvNFN94VaRXQ1iWqpumZBcu1J8p1E1TXDx59eQNr5LyEqjJn6hv5QnGNlxevZJmdLLpy5xJSzut45biYCfb0iaVxvawjNjS1p-TCguG16PvaIPzYjO67e3BwX6GiTY9jPFKH43DMF_hGMDY1J4oHg-_f8hFTJFd8L3br3yZx4QHxENsdrt1nO8dDstH3oVpF50ZYMbhU6ud4qoGLqyqBJRCmO6j0HXPZdGbihUc6Pmc0QP49xD-b5X69ZQv2gjO81IwzWqhC1lKrjJ6pA3nVS7SMiVjrKirWlYp5fs3osgrWeo00lorLWvOzz8JVbXm">live editor</a>] ### Bar chart (using gantt chart) [<a href="https://mermaid.js.org/syntax/gantt.html">docs</a> - <a href="https://mermaid.live/edit#pako:eNptkU1vhCAQhv8KIenNugiI4rkf6bmXpvEyFVxJFDYyNt1u9r8X63Z7WQ9m5pknLzieaBeMpQ3dg0dsPUkPOhwteXZIXmJcbCT3xMAxkuh8Z8kIEclyMIB209fqKcwTICFvG4IvFy_oLrZ-g9F26ILfQgvNFN94VaRXQ1iWqpumZBcu1J8p1E1TXDx59eQNr5LyEqjJn6hv5QnGNlxevZJmdLLpy5xJSzut45biYCfb0iaVxvawjNjS1p-TCguG16PvaIPzYjO67e3BwX6GiTY9jPFKH43DMF_hGMDY1J4oHg-_f8hFTJFd8L3br3yZx4QHxENsdrt1nO8dDstH3oVpF50ZYMbhU6ud4qoGLqyqBJRCmO6j0HXPZdGbihUc6Pmc0QP49xD-b5X69ZQv2gjO81IwzWqhC1lKrjJ6pA3nVS7SMiVjrKirWlYp5fs3osgrWeo00lorLWvOzz8JVbXm">live editor</a>]
``` ```
@@ -463,7 +430,7 @@ A quick note from Knut Sveidqvist:
> >
> _Thank you to [Tyler Long](https://github.com/tylerlong) who has been a collaborator since April 2017._ > _Thank you to [Tyler Long](https://github.com/tylerlong) who has been a collaborator since April 2017._
> >
> _Thank you to the ever-growing list of [contributors](https://github.com/mermaid-js/mermaid/graphs/contributors) that brought the project this far!_ > _Thank you to the ever-growing list of [contributors](https://github.com/knsv/mermaid/graphs/contributors) that brought the project this far!_
--- ---

View File

@@ -15,7 +15,7 @@ Mermaid
<a href="https://mermaid.live/"><b>实时编辑器!</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://discord.gg/sKeNQX4Wtj" title="Discord 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://discord.gg/AgrbSrBer3" title="Discord invite">🙌 加入我们</a>
</p> </p>
<p align="center"> <p align="center">
<a href="./README.md">English</a> <a href="./README.md">English</a>
@@ -34,7 +34,7 @@ Mermaid
[![Coverage Status](https://codecov.io/github/mermaid-js/mermaid/branch/develop/graph/badge.svg)](https://app.codecov.io/github/mermaid-js/mermaid/tree/develop) [![Coverage Status](https://codecov.io/github/mermaid-js/mermaid/branch/develop/graph/badge.svg)](https://app.codecov.io/github/mermaid-js/mermaid/tree/develop)
[![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 Discord!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=discord&label=discord)](https://discord.gg/sKeNQX4Wtj) [![Join our Discord!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=discord&label=discord)](https://discord.gg/AgrbSrBer3)
[![Twitter Follow](https://img.shields.io/badge/Social-mermaidjs__-blue?style=social&logo=X)](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="" />
@@ -43,13 +43,13 @@ Mermaid
**感谢所有参与进来提交 PR解答疑问的人们! 🙏** **感谢所有参与进来提交 PR解答疑问的人们! 🙏**
<a href="https://mermaid.js.org/landing/"><img src="https://github.com/mermaid-js/mermaid/blob/master/docs/intro/img/book-banner-post-release.jpg" alt='Banner for "The Official Guide to Mermaid.js" book'></a> <a href="https://mermaid.js.org/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>
## 关于 Mermaid ## 关于 Mermaid
<!-- <Main description> --> <!-- <Main description> -->
Mermaid 是一个基于 JavaScript 的图表绘制工具,通过解析类 Markdown 的文本语法来实现图表的创建和动态修改。Mermaid 诞生的主要目的是让文档的更新能够及时跟上开发进度。 Mermaid 是一个基于 Javascript 的图表绘制工具,通过解析类 Markdown 的文本语法来实现图表的创建和动态修改。Mermaid 诞生的主要目的是让文档的更新能够及时跟上开发进度。
> Doc-Rot 是 Mermaid 致力于解决的一个难题。 > Doc-Rot 是 Mermaid 致力于解决的一个难题。
@@ -358,7 +358,7 @@ _很不幸的是鱼与熊掌不可兼得在这个场景下它意味着在
> _特别感谢 [d3](https://d3js.org/) 和 [dagre-d3](https://github.com/cpettitt/dagre-d3) 这两个优秀的项目它们提供了图形布局和绘图工具库_ > _同样感谢 [js-sequence-diagram](https://bramp.github.io/js-sequence-diagrams) 提供了时序图语法的使用。 感谢 Jessica Peter 提供了甘特图渲染的灵感。_ > _感谢 [Tyler Long](https://github.com/tylerlong) 从 2017 年四月开始成为了项目的合作者。_ > _特别感谢 [d3](https://d3js.org/) 和 [dagre-d3](https://github.com/cpettitt/dagre-d3) 这两个优秀的项目它们提供了图形布局和绘图工具库_ > _同样感谢 [js-sequence-diagram](https://bramp.github.io/js-sequence-diagrams) 提供了时序图语法的使用。 感谢 Jessica Peter 提供了甘特图渲染的灵感。_ > _感谢 [Tyler Long](https://github.com/tylerlong) 从 2017 年四月开始成为了项目的合作者。_
> >
> _感谢越来越多的 [贡献者们](https://github.com/mermaid-js/mermaid/graphs/contributors)没有你们就没有这个项目的今天_ > _感谢越来越多的 [贡献者们](https://github.com/knsv/mermaid/graphs/contributors)没有你们就没有这个项目的今天_
--- ---

13
__mocks__/d3.ts Normal file
View File

@@ -0,0 +1,13 @@
import { MockedD3 } from '../packages/mermaid/src/tests/MockedD3.js';
export const select = function () {
return new MockedD3();
};
export const selectAll = function () {
return new MockedD3();
};
export const curveBasis = 'basis';
export const curveLinear = 'linear';
export const curveCardinal = 'cardinal';

View File

@@ -1,9 +1,8 @@
import { defineConfig } from 'cypress';
import { addMatchImageSnapshotPlugin } from 'cypress-image-snapshot/plugin';
import coverage from '@cypress/code-coverage/task';
import eyesPlugin from '@applitools/eyes-cypress'; import eyesPlugin from '@applitools/eyes-cypress';
import { registerArgosTask } from '@argos-ci/cypress/task'; import { registerArgosTask } from '@argos-ci/cypress/task';
import coverage from '@cypress/code-coverage/task.js';
import { defineConfig } from 'cypress';
import { addMatchImageSnapshotPlugin } from 'cypress-image-snapshot/plugin.js';
import cypressSplit from 'cypress-split';
export default eyesPlugin( export default eyesPlugin(
defineConfig({ defineConfig({
@@ -14,7 +13,6 @@ export default eyesPlugin(
specPattern: 'cypress/integration/**/*.{js,ts}', specPattern: 'cypress/integration/**/*.{js,ts}',
setupNodeEvents(on, config) { setupNodeEvents(on, config) {
coverage(on, config); coverage(on, config);
cypressSplit(on, config);
on('before:browser:launch', (browser, launchOptions) => { on('before:browser:launch', (browser, launchOptions) => {
if (browser.name === 'chrome' && browser.isHeadless) { if (browser.name === 'chrome' && browser.isHeadless) {
launchOptions.args.push('--window-size=1440,1024', '--force-device-scale-factor=1'); launchOptions.args.push('--window-size=1440,1024', '--force-device-scale-factor=1');
@@ -23,12 +21,11 @@ export default eyesPlugin(
}); });
// copy any needed variables from process.env to config.env // copy any needed variables from process.env to config.env
config.env.useAppli = process.env.USE_APPLI ? true : false; config.env.useAppli = process.env.USE_APPLI ? true : false;
config.env.useArgos = process.env.RUN_VISUAL_TEST === 'true'; config.env.useArgos = !!process.env.CI;
if (config.env.useArgos) { if (config.env.useArgos) {
registerArgosTask(on, config, { registerArgosTask(on, config, {
// Enable upload to Argos only when it runs on CI. token: 'fc3a35cf5200db928d65b2047861582d9444032b',
uploadToArgos: !!process.env.CI,
}); });
} else { } else {
addMatchImageSnapshotPlugin(on, config); addMatchImageSnapshotPlugin(on, config);

View File

@@ -14,7 +14,7 @@ interface CodeObject {
mermaid: CypressMermaidConfig; mermaid: CypressMermaidConfig;
} }
export const utf8ToB64 = (str: string): string => { const utf8ToB64 = (str: string): string => {
return Buffer.from(decodeURIComponent(encodeURIComponent(str))).toString('base64'); return Buffer.from(decodeURIComponent(encodeURIComponent(str))).toString('base64');
}; };
@@ -22,21 +22,20 @@ const batchId: string =
'mermaid-batch-' + 'mermaid-batch-' +
(Cypress.env('useAppli') (Cypress.env('useAppli')
? Date.now().toString() ? Date.now().toString()
: (Cypress.env('CYPRESS_COMMIT') ?? Date.now().toString())); : Cypress.env('CYPRESS_COMMIT') || Date.now().toString());
export const mermaidUrl = ( export const mermaidUrl = (
graphStr: string | string[], graphStr: string | string[],
options: CypressMermaidConfig, options: CypressMermaidConfig,
api: boolean api: boolean
): string => { ): string => {
options.handDrawnSeed = 1;
const codeObject: CodeObject = { const codeObject: CodeObject = {
code: graphStr, code: graphStr,
mermaid: options, mermaid: options,
}; };
const objStr: string = JSON.stringify(codeObject); const objStr: string = JSON.stringify(codeObject);
let url = `http://localhost:9000/e2e.html?graph=${utf8ToB64(objStr)}`; let url = `http://localhost:9000/e2e.html?graph=${utf8ToB64(objStr)}`;
if (api && typeof graphStr === 'string') { if (api) {
url = `http://localhost:9000/xss.html?graph=${graphStr}`; url = `http://localhost:9000/xss.html?graph=${graphStr}`;
} }
@@ -55,13 +54,16 @@ export const imgSnapshotTest = (
): void => { ): void => {
const options: CypressMermaidConfig = { const options: CypressMermaidConfig = {
..._options, ..._options,
fontFamily: _options.fontFamily ?? 'courier', fontFamily: _options.fontFamily || 'courier',
// @ts-ignore TODO: Fix type of fontSize // @ts-ignore TODO: Fix type of fontSize
fontSize: _options.fontSize ?? '16px', fontSize: _options.fontSize || '16px',
sequence: { sequence: {
...(_options.sequence ?? {}), ...(_options.sequence || {}),
actorFontFamily: 'courier', actorFontFamily: 'courier',
noteFontFamily: _options.sequence?.noteFontFamily ?? 'courier', noteFontFamily:
_options.sequence && _options.sequence.noteFontFamily
? _options.sequence.noteFontFamily
: 'courier',
messageFontFamily: 'courier', messageFontFamily: 'courier',
}, },
}; };
@@ -72,7 +74,7 @@ export const imgSnapshotTest = (
export const urlSnapshotTest = ( export const urlSnapshotTest = (
url: string, url: string,
options: CypressMermaidConfig = {}, options: CypressMermaidConfig,
_api = false, _api = false,
validation?: any validation?: any
): void => { ): void => {
@@ -93,7 +95,7 @@ export const openURLAndVerifyRendering = (
options: CypressMermaidConfig, options: CypressMermaidConfig,
validation?: any validation?: any
): void => { ): void => {
const name: string = (options.name ?? cy.state('runnable').fullTitle()).replace(/\s+/g, '-'); const name: string = (options.name || cy.state('runnable').fullTitle()).replace(/\s+/g, '-');
cy.visit(url); cy.visit(url);
cy.window().should('have.property', 'rendered', true); cy.window().should('have.property', 'rendered', true);
@@ -123,17 +125,8 @@ export const verifyScreenshot = (name: string): void => {
cy.log(`Closing eyes ${Cypress.spec.name}`); cy.log(`Closing eyes ${Cypress.spec.name}`);
cy.eyesClose(); cy.eyesClose();
} else if (useArgos) { } else if (useArgos) {
cy.argosScreenshot(name, { cy.argosScreenshot(name);
threshold: 0.01,
});
} else { } else {
cy.matchImageSnapshot(name); cy.matchImageSnapshot(name);
} }
}; };
export const verifyNumber = (value: number, expected: number, deltaPercent = 10): void => {
expect(value).to.be.within(
expected * (1 - deltaPercent / 100),
expected * (1 + deltaPercent / 100)
);
};

View File

@@ -69,9 +69,7 @@ describe('Configuration', () => {
.and('include', 'url(#'); .and('include', 'url(#');
}); });
}); });
// This has been broken for a long time, but something about the Cypress environment was it('should handle arrowMarkerAbsolute explicitly set to "false" as false', () => {
// rewriting the URL to be relative, causing the test to incorrectly pass.
it.skip('should handle arrowMarkerAbsolute explicitly set to "false" as false', () => {
renderGraph( renderGraph(
`graph TD `graph TD
A[Christmas] -->|Get money| B(Go shopping) A[Christmas] -->|Get money| B(Go shopping)
@@ -113,6 +111,7 @@ describe('Configuration', () => {
cy.get('path') cy.get('path')
.first() .first()
.should('have.attr', 'marker-end') .should('have.attr', 'marker-end')
.should('exist')
.and('include', 'url(http://localhost'); .and('include', 'url(http://localhost');
}); });
}); });

View File

@@ -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',
});
});
});

View File

@@ -20,7 +20,7 @@ describe('Interaction', () => {
}); });
it('Graph: should handle a click on a node with a bound url', () => { it('Graph: should handle a click on a node with a bound url', () => {
// When there is a URL, `cy.contains()` selects the `a` tag instead of the `span` tag. The .node is a child of `a`, so we have to use `find()` instead of `parent`. // When there is a URL, cy.contains selects the a tag instead of the span. The .node is a child of a, so we have to use find instead of parent.
cy.contains('URLTest1').find('.node').click(); cy.contains('URLTest1').find('.node').click();
cy.location().should(({ href }) => { cy.location().should(({ href }) => {
expect(href).to.eq('http://localhost:9000/empty.html'); expect(href).to.eq('http://localhost:9000/empty.html');
@@ -146,7 +146,7 @@ describe('Interaction', () => {
}); });
}); });
describe('Interaction - security level other, misspelling', () => { describe('Interaction - security level other, missspelling', () => {
beforeEach(() => { beforeEach(() => {
cy.visit('http://localhost:9000/click_security_other.html'); cy.visit('http://localhost:9000/click_security_other.html');
}); });

View File

@@ -1,4 +1,4 @@
import { imgSnapshotTest, mermaidUrl, utf8ToB64 } from '../../helpers/util.ts'; import { mermaidUrl } from '../../helpers/util.ts';
describe('XSS', () => { describe('XSS', () => {
it('should handle xss in tags', () => { it('should handle xss in tags', () => {
const str = const str =
@@ -141,37 +141,4 @@ 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 icon labels in architecture diagrams', () => {
const str = JSON.stringify({
code: `architecture-beta
group api(cloud)[API]
service db "<img src=x onerror=\\"xssAttack()\\">" [Database] in api`,
});
imgSnapshotTest(utf8ToB64(str), {}, true);
cy.wait(1000);
cy.get('#the-malware').should('not.exist');
});
it('should sanitize katex blocks', () => {
const str = JSON.stringify({
code: `sequenceDiagram
participant A as Alice<img src="x" onerror="xssAttack()">$$\\text{Alice}$$
A->>John: Hello John, how are you?`,
});
imgSnapshotTest(utf8ToB64(str), {}, true);
cy.wait(1000);
cy.get('#the-malware').should('not.exist');
});
it('should sanitize labels', () => {
const str = JSON.stringify({
code: `erDiagram
"<img src=x onerror=xssAttack()>" ||--|| ENTITY2 : "<img src=x onerror=xssAttack()>"
`,
});
imgSnapshotTest(utf8ToB64(str), {}, true);
cy.wait(1000);
cy.get('#the-malware').should('not.exist');
});
}); });

View File

@@ -11,27 +11,6 @@ describe('Git Graph diagram', () => {
{} {}
); );
}); });
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 } } }
);
});
// it(`ultraFastTest`, function () { // it(`ultraFastTest`, function () {
// // Navigate to the url we want to test // // Navigate to the url we want to test
// // ⭐️ Note to see visual bugs, run the test using the above URL for the 1st run. // // ⭐️ Note to see visual bugs, run the test using the above URL for the 1st run.

View File

@@ -1,252 +0,0 @@
import { imgSnapshotTest, urlSnapshotTest } from '../../helpers/util.ts';
describe.skip('architecture diagram', () => {
it('should render a simple architecture diagram with groups', () => {
imgSnapshotTest(
`architecture-beta
group api(cloud)[API]
service db(database)[Database] in api
service disk1(disk)[Storage] in api
service disk2(disk)[Storage] in api
service server(server)[Server] in api
service gateway(internet)[Gateway]
db L--R server
disk1 T--B server
disk2 T--B db
server T--B gateway
`
);
});
it('should render a simple architecture diagram with titleAndAccessibilities', () => {
imgSnapshotTest(
`architecture-beta
title Simple Architecture Diagram
accTitle: Accessibility Title
accDescr: Accessibility Description
group api(cloud)[API]
service db(database)[Database] in api
service disk1(disk)[Storage] in api
service disk2(disk)[Storage] in api
service server(server)[Server] in api
db:L -- R:server
disk1:T -- B:server
disk2:T -- B:db
`
);
});
it('should render an architecture diagram with groups within groups', () => {
imgSnapshotTest(
`architecture-beta
group api[API]
group public[Public API] in api
group private[Private API] in api
service serv1(server)[Server] in public
service serv2(server)[Server] in private
service db(database)[Database] in private
service gateway(internet)[Gateway] in api
serv1 B--T serv2
serv2 L--R db
serv1 L--R gateway
`
);
});
it('should render an architecture diagram with the fallback icon', () => {
imgSnapshotTest(
`architecture-beta
service unknown(iconnamedoesntexist)[Unknown Icon]
`
);
});
it('should render an architecture diagram with split directioning', () => {
imgSnapshotTest(
`architecture-beta
service db(database)[Database]
service s3(disk)[Storage]
service serv1(server)[Server 1]
service serv2(server)[Server 2]
service disk(disk)[Disk]
db L--R s3
serv1 L--T s3
serv2 L--B s3
serv1 T--B disk
`
);
});
it('should render an architecture diagram with directional arrows', () => {
imgSnapshotTest(
`architecture-beta
service servC(server)[Server 1]
service servL(server)[Server 2]
service servR(server)[Server 3]
service servT(server)[Server 4]
service servB(server)[Server 5]
servC (L--R) servL
servC (R--L) servR
servC (T--B) servT
servC (B--T) servB
servL (T--L) servT
servL (B--L) servB
servR (T--R) servT
servR (B--R) servB
`
);
});
it('should render an architecture diagram with group edges', () => {
imgSnapshotTest(
`architecture-beta
group left_group(cloud)[Left]
group right_group(cloud)[Right]
group top_group(cloud)[Top]
group bottom_group(cloud)[Bottom]
group center_group(cloud)[Center]
service left_disk(disk)[Disk] in left_group
service right_disk(disk)[Disk] in right_group
service top_disk(disk)[Disk] in top_group
service bottom_disk(disk)[Disk] in bottom_group
service center_disk(disk)[Disk] in center_group
left_disk{group} (R--L) center_disk{group}
right_disk{group} (L--R) center_disk{group}
top_disk{group} (B--T) center_disk{group}
bottom_disk{group} (T--B) center_disk{group}
`
);
});
it('should render an architecture diagram with edge labels', () => {
imgSnapshotTest(
`architecture-beta
service servC(server)[Server 1]
service servL(server)[Server 2]
service servR(server)[Server 3]
service servT(server)[Server 4]
service servB(server)[Server 5]
servC L-[Label]-R servL
servC R-[Label]-L servR
servC T-[Label]-B servT
servC B-[Label]-T servB
servL T-[Label]-L servT
servL B-[Label]-L servB
servR T-[Label]-R servT
servR B-[Label]-R servB
`
);
});
it('should render an architecture diagram with simple junction edges', () => {
imgSnapshotTest(
`architecture-beta
service left_disk(disk)[Disk]
service top_disk(disk)[Disk]
service bottom_disk(disk)[Disk]
service top_gateway(internet)[Gateway]
service bottom_gateway(internet)[Gateway]
junction juncC
junction juncR
left_disk R--L juncC
top_disk B--T juncC
bottom_disk T--B juncC
juncC R--L juncR
top_gateway B--T juncR
bottom_gateway T--B juncR
`
);
});
it('should render an architecture diagram with complex junction edges', () => {
imgSnapshotTest(
`architecture-beta
group left
group right
service left_disk(disk)[Disk] in left
service top_disk(disk)[Disk] in left
service bottom_disk(disk)[Disk] in left
service top_gateway(internet)[Gateway] in right
service bottom_gateway(internet)[Gateway] in right
junction juncC in left
junction juncR in right
left_disk R--L juncC
top_disk B--T juncC
bottom_disk T--B juncC
top_gateway (B--T juncR
bottom_gateway (T--B juncR
juncC{group} R--L) juncR{group}
`
);
});
it('should render an architecture diagram with a reasonable height', () => {
imgSnapshotTest(
`architecture-beta
group federated(cloud)[Federated Environment]
service server1(server)[System] in federated
service edge(server)[Edge Device] in federated
server1:R -- L:edge
group on_prem(cloud)[Hub]
service firewall(server)[Firewall Device] in on_prem
service server(server)[Server] in on_prem
firewall:R -- L:server
service db1(database)[db1] in on_prem
service db2(database)[db2] in on_prem
service db3(database)[db3] in on_prem
service db4(database)[db4] in on_prem
service db5(database)[db5] in on_prem
service db6(database)[db6] in on_prem
junction mid in on_prem
server:B -- T:mid
junction 1Leftofmid in on_prem
1Leftofmid:R -- L:mid
1Leftofmid:B -- T:db1
junction 2Leftofmid in on_prem
2Leftofmid:R -- L:1Leftofmid
2Leftofmid:B -- T:db2
junction 3Leftofmid in on_prem
3Leftofmid:R -- L:2Leftofmid
3Leftofmid:B -- T:db3
junction 1RightOfMid in on_prem
mid:R -- L:1RightOfMid
1RightOfMid:B -- T:db4
junction 2RightOfMid in on_prem
1RightOfMid:R -- L:2RightOfMid
2RightOfMid:B -- T:db5
junction 3RightOfMid in on_prem
2RightOfMid:R -- L:3RightOfMid
3RightOfMid:B -- T:db6
edge:R -- L:firewall
`
);
});
});
// Skipped as the layout is not deterministic, and causes issues in E2E tests.
describe.skip('architecture - external', () => {
it('should allow adding external icons', () => {
urlSnapshotTest('http://localhost:9000/architecture-external.html');
});
});

View File

@@ -14,9 +14,9 @@ describe('Block diagram', () => {
); );
}); });
it('BL2: should handle columns statement in sub-blocks', () => { it('BL2: should handle colums statement in sub-blocks', () => {
imgSnapshotTest( imgSnapshotTest(
`block `block-beta
id1["Hello"] id1["Hello"]
block block
columns 3 columns 3
@@ -30,9 +30,9 @@ describe('Block diagram', () => {
); );
}); });
it('BL3: should align block widths and handle columns statement in sub-blocks', () => { it('BL3: should align block widths and handle colums statement in sub-blocks', () => {
imgSnapshotTest( imgSnapshotTest(
`block `block-beta
block block
columns 1 columns 1
id1 id1
@@ -46,9 +46,9 @@ describe('Block diagram', () => {
); );
}); });
it('BL4: should align block widths and handle columns statements in deeper sub-blocks then 1 level', () => { it('BL4: should align block widths and handle colums statements in deeper sub-blocks then 1 level', () => {
imgSnapshotTest( imgSnapshotTest(
`block `block-beta
columns 1 columns 1
block block
columns 1 columns 1
@@ -66,9 +66,9 @@ describe('Block diagram', () => {
); );
}); });
it('BL5: should align block widths and handle columns statements in deeper sub-blocks then 1 level (alt)', () => { it('BL5: should align block widths and handle colums statements in deeper sub-blocks then 1 level (alt)', () => {
imgSnapshotTest( imgSnapshotTest(
`block `block-beta
columns 1 columns 1
block block
id1 id1
@@ -87,7 +87,7 @@ describe('Block diagram', () => {
it('BL6: should handle block arrows and spece statements', () => { it('BL6: should handle block arrows and spece statements', () => {
imgSnapshotTest( imgSnapshotTest(
`block `block-beta
columns 3 columns 3
space:3 space:3
ida idb idc ida idb idc
@@ -106,7 +106,7 @@ describe('Block diagram', () => {
it('BL7: should handle different types of edges', () => { it('BL7: should handle different types of edges', () => {
imgSnapshotTest( imgSnapshotTest(
`block `block-beta
columns 3 columns 3
A space:5 A space:5
A --o B A --o B
@@ -119,7 +119,7 @@ describe('Block diagram', () => {
it('BL8: should handle sub-blocks without columns statements', () => { it('BL8: should handle sub-blocks without columns statements', () => {
imgSnapshotTest( imgSnapshotTest(
`block `block-beta
columns 2 columns 2
C A B C A B
block block
@@ -133,7 +133,7 @@ describe('Block diagram', () => {
it('BL9: should handle edges from blocks in sub blocks to other blocks', () => { it('BL9: should handle edges from blocks in sub blocks to other blocks', () => {
imgSnapshotTest( imgSnapshotTest(
`block `block-beta
columns 3 columns 3
B space B space
block block
@@ -147,7 +147,7 @@ describe('Block diagram', () => {
it('BL10: should handle edges from composite blocks', () => { it('BL10: should handle edges from composite blocks', () => {
imgSnapshotTest( imgSnapshotTest(
`block `block-beta
columns 3 columns 3
B space B space
block BL block BL
@@ -161,7 +161,7 @@ describe('Block diagram', () => {
it('BL11: should handle edges to composite blocks', () => { it('BL11: should handle edges to composite blocks', () => {
imgSnapshotTest( imgSnapshotTest(
`block `block-beta
columns 3 columns 3
B space B space
block BL block BL
@@ -175,7 +175,7 @@ describe('Block diagram', () => {
it('BL12: edges should handle labels', () => { it('BL12: edges should handle labels', () => {
imgSnapshotTest( imgSnapshotTest(
`block `block-beta
A A
space space
A -- "apa" --> E A -- "apa" --> E
@@ -186,7 +186,7 @@ describe('Block diagram', () => {
it('BL13: should handle block arrows in different directions', () => { it('BL13: should handle block arrows in different directions', () => {
imgSnapshotTest( imgSnapshotTest(
`block `block-beta
columns 3 columns 3
space blockArrowId1<["down"]>(down) space space blockArrowId1<["down"]>(down) space
blockArrowId2<["right"]>(right) blockArrowId3<["Sync"]>(x, y) blockArrowId4<["left"]>(left) blockArrowId2<["right"]>(right) blockArrowId3<["Sync"]>(x, y) blockArrowId4<["left"]>(left)
@@ -199,7 +199,7 @@ describe('Block diagram', () => {
it('BL14: should style statements and class statements', () => { it('BL14: should style statements and class statements', () => {
imgSnapshotTest( imgSnapshotTest(
`block `block-beta
A A
B B
classDef blue fill:#66f,stroke:#333,stroke-width:2px; classDef blue fill:#66f,stroke:#333,stroke-width:2px;
@@ -212,7 +212,7 @@ describe('Block diagram', () => {
it('BL15: width alignment - D and E should share available space', () => { it('BL15: width alignment - D and E should share available space', () => {
imgSnapshotTest( imgSnapshotTest(
`block `block-beta
block block
D D
E E
@@ -225,7 +225,7 @@ describe('Block diagram', () => {
it('BL16: width alignment - C should be as wide as the composite block', () => { it('BL16: width alignment - C should be as wide as the composite block', () => {
imgSnapshotTest( imgSnapshotTest(
`block `block-beta
block block
A("This is the text") A("This is the text")
B B
@@ -236,9 +236,9 @@ describe('Block diagram', () => {
); );
}); });
it('BL17: width alignment - blocks should be equal in width', () => { it('BL16: width alignment - blocks shold be equal in width', () => {
imgSnapshotTest( imgSnapshotTest(
`block `block-beta
A("This is the text") A("This is the text")
B B
C C
@@ -247,9 +247,9 @@ describe('Block diagram', () => {
); );
}); });
it('BL18: block types 1 - square, rounded and circle', () => { it('BL17: block types 1 - square, rounded and circle', () => {
imgSnapshotTest( imgSnapshotTest(
`block `block-beta
A["square"] A["square"]
B("rounded") B("rounded")
C(("circle")) C(("circle"))
@@ -258,9 +258,9 @@ describe('Block diagram', () => {
); );
}); });
it('BL19: block types 2 - odd, diamond and hexagon', () => { it('BL18: block types 2 - odd, diamond and hexagon', () => {
imgSnapshotTest( imgSnapshotTest(
`block `block-beta
A>"rect_left_inv_arrow"] A>"rect_left_inv_arrow"]
B{"diamond"} B{"diamond"}
C{{"hexagon"}} C{{"hexagon"}}
@@ -269,18 +269,18 @@ describe('Block diagram', () => {
); );
}); });
it('BL20: block types 3 - stadium', () => { it('BL19: block types 3 - stadium', () => {
imgSnapshotTest( imgSnapshotTest(
`block `block-beta
A(["stadium"]) A(["stadium"])
`, `,
{} {}
); );
}); });
it('BL21: block types 4 - lean right, lean left, trapezoid and inv trapezoid', () => { it('BL20: block types 4 - lean right, lean left, trapezoid and inv trapezoid', () => {
imgSnapshotTest( imgSnapshotTest(
`block `block-beta
A[/"lean right"/] A[/"lean right"/]
B[\"lean left"\] B[\"lean left"\]
C[/"trapezoid"\] C[/"trapezoid"\]
@@ -290,9 +290,9 @@ describe('Block diagram', () => {
); );
}); });
it('BL22: block types 1 - square, rounded and circle', () => { it('BL21: block types 1 - square, rounded and circle', () => {
imgSnapshotTest( imgSnapshotTest(
`block `block-beta
A["square"] A["square"]
B("rounded") B("rounded")
C(("circle")) C(("circle"))
@@ -301,9 +301,9 @@ describe('Block diagram', () => {
); );
}); });
it('BL23: sizing - it should be possible to make a block wider', () => { it('BL22: sizing - it should be possible to make a block wider', () => {
imgSnapshotTest( imgSnapshotTest(
`block `block-beta
A("rounded"):2 A("rounded"):2
B:2 B:2
C C
@@ -312,9 +312,9 @@ describe('Block diagram', () => {
); );
}); });
it('BL24: sizing - it should be possible to make a composite block wider', () => { it('BL23: sizing - it should be possible to make a composite block wider', () => {
imgSnapshotTest( imgSnapshotTest(
`block `block-beta
block:2 block:2
A A
end end
@@ -324,9 +324,9 @@ describe('Block diagram', () => {
); );
}); });
it('BL25: block in the middle with space on each side', () => { it('BL24: block in the middle with space on each side', () => {
imgSnapshotTest( imgSnapshotTest(
`block `block-beta
columns 3 columns 3
space space
middle["In the middle"] middle["In the middle"]
@@ -335,9 +335,9 @@ describe('Block diagram', () => {
{} {}
); );
}); });
it('BL26: space and an edge', () => { it('BL25: space and an edge', () => {
imgSnapshotTest( imgSnapshotTest(
`block `block-beta
columns 5 columns 5
A space B A space B
A --x B A --x B
@@ -345,18 +345,18 @@ describe('Block diagram', () => {
{} {}
); );
}); });
it('BL27: block sizes for regular blocks', () => { it('BL26: block sizes for regular blocks', () => {
imgSnapshotTest( imgSnapshotTest(
`block `block-beta
columns 3 columns 3
a["A wide one"] b:2 c:2 d a["A wide one"] b:2 c:2 d
`, `,
{} {}
); );
}); });
it('BL28: composite block with a set width - f should use the available space', () => { it('BL27: composite block with a set width - f should use the available space', () => {
imgSnapshotTest( imgSnapshotTest(
`block `block-beta
columns 3 columns 3
a:3 a:3
block:e:3 block:e:3
@@ -367,10 +367,9 @@ describe('Block diagram', () => {
{} {}
); );
}); });
it('BL23: composite block with a set width - f and g should split the available space', () => {
it('BL29: composite block with a set width - f and g should split the available space', () => {
imgSnapshotTest( imgSnapshotTest(
`block `block-beta
columns 3 columns 3
a:3 a:3
block:e:3 block:e:3
@@ -384,28 +383,4 @@ describe('Block diagram', () => {
{} {}
); );
}); });
it('BL30: block should overflow if too wide for columns', () => {
imgSnapshotTest(
`block-beta
columns 2
fit:2
overflow:3
short:1
also_overflow:2
`,
{}
);
});
it('BL31: edge without arrow syntax should render with no arrowheads', () => {
imgSnapshotTest(
`block-beta
a
b
a --- b
`,
{}
);
});
}); });

View File

@@ -1,7 +1,7 @@
import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts'; import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
describe('C4 diagram', () => { describe('C4 diagram', () => {
it('C4.1 should render a simple C4Context diagram', () => { it('should render a simple C4Context diagram', () => {
imgSnapshotTest( imgSnapshotTest(
` `
C4Context C4Context
@@ -31,7 +31,7 @@ describe('C4 diagram', () => {
{} {}
); );
}); });
it('C4.2 should render a simple C4Container diagram', () => { it('should render a simple C4Container diagram', () => {
imgSnapshotTest( imgSnapshotTest(
` `
C4Container C4Container
@@ -50,7 +50,7 @@ describe('C4 diagram', () => {
{} {}
); );
}); });
it('C4.3 should render a simple C4Component diagram', () => { it('should render a simple C4Component diagram', () => {
imgSnapshotTest( imgSnapshotTest(
` `
C4Component C4Component
@@ -68,7 +68,7 @@ describe('C4 diagram', () => {
{} {}
); );
}); });
it('C4.4 should render a simple C4Dynamic diagram', () => { it('should render a simple C4Dynamic diagram', () => {
imgSnapshotTest( imgSnapshotTest(
` `
C4Dynamic C4Dynamic
@@ -91,7 +91,7 @@ describe('C4 diagram', () => {
{} {}
); );
}); });
it('C4.5 should render a simple C4Deployment diagram', () => { it('should render a simple C4Deployment diagram', () => {
imgSnapshotTest( imgSnapshotTest(
` `
C4Deployment C4Deployment

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

View File

@@ -76,7 +76,7 @@ describe('Class diagram V2', () => {
); );
}); });
it('2.1 should render a simple class diagram with different visibilities', () => { it('should render a simple class diagram with different visibilities', () => {
imgSnapshotTest( imgSnapshotTest(
` `
classDiagram-v2 classDiagram-v2
@@ -93,7 +93,7 @@ describe('Class diagram V2', () => {
); );
}); });
it('3: should render multiple class diagrams', () => { it('should render multiple class diagrams', () => {
imgSnapshotTest( imgSnapshotTest(
[ [
` `
@@ -581,63 +581,4 @@ class C13["With Città foreign language"]
{ logLevel: 1, flowchart: { htmlLabels: false } } { logLevel: 1, flowchart: { htmlLabels: false } }
); );
}); });
it('renders a class diagram with a generic class in a namespace', () => {
const diagramDefinition = `
classDiagram-v2
namespace Company.Project.Module {
class GenericClass~T~ {
+addItem(item: T)
+getItem() T
}
}
`;
imgSnapshotTest(diagramDefinition);
});
it('renders a class diagram with nested namespaces and relationships', () => {
const diagramDefinition = `
classDiagram-v2
namespace Company.Project.Module.SubModule {
class Report {
+generatePDF(data: List)
+generateCSV(data: List)
}
}
namespace Company.Project.Module {
class Admin {
+generateReport()
}
}
Admin --> Report : generates
`;
imgSnapshotTest(diagramDefinition);
});
it('renders a class diagram with multiple classes and relationships in a namespace', () => {
const diagramDefinition = `
classDiagram-v2
namespace Company.Project.Module {
class User {
+login(username: String, password: String)
+logout()
}
class Admin {
+addUser(user: User)
+removeUser(user: User)
+generateReport()
}
class Report {
+generatePDF(reportData: List)
+generateCSV(reportData: List)
}
}
Admin --> User : manages
Admin --> Report : generates
`;
imgSnapshotTest(diagramDefinition);
});
}); });

File diff suppressed because it is too large Load Diff

View File

@@ -429,7 +429,7 @@ describe('Class diagram', () => {
classDiagram classDiagram
class \`This\nTitle\nHas\nMany\nNewlines\` { class \`This\nTitle\nHas\nMany\nNewlines\` {
+String Also +String Also
-String Many -Stirng Many
#int Members #int Members
+And() +And()
-Many() -Many()
@@ -443,7 +443,7 @@ describe('Class diagram', () => {
classDiagram classDiagram
class \`This\nTitle\nHas\nMany\nNewlines\` { class \`This\nTitle\nHas\nMany\nNewlines\` {
+String Also +String Also
-String Many -Stirng Many
#int Members #int Members
+And() +And()
-Many() -Many()
@@ -459,7 +459,7 @@ describe('Class diagram', () => {
namespace testingNamespace { namespace testingNamespace {
class \`This\nTitle\nHas\nMany\nNewlines\` { class \`This\nTitle\nHas\nMany\nNewlines\` {
+String Also +String Also
-String Many -Stirng Many
#int Members #int Members
+And() +And()
-Many() -Many()
@@ -495,47 +495,4 @@ describe('Class diagram', () => {
cy.get('a').should('have.attr', 'target', '_blank').should('have.attr', 'rel', 'noopener'); cy.get('a').should('have.attr', 'target', '_blank').should('have.attr', 'rel', 'noopener');
}); });
}); });
describe('Include char sequence "graph" in text (#6795)', () => {
it('has a label with char sequence "graph"', () => {
imgSnapshotTest(
`
classDiagram
class Person {
+String name
-Int id
#double age
+Text demographicProfile
}
`,
{ flowchart: { defaultRenderer: 'elk' } }
);
});
});
it('should handle backticks for namespace and class names', () => {
imgSnapshotTest(
`
classDiagram
namespace \`A::B\` {
class \`IPC::Sender\`
}
RenderProcessHost --|> \`IPC::Sender\`
`,
{}
);
it('should handle an empty class body with empty braces', () => {
imgSnapshotTest(
` classDiagram
class FooBase~T~ {}
class Bar {
+Zip
+Zap()
}
FooBase <|-- Ba
`,
{ flowchart: { defaultRenderer: 'elk' } }
);
});
});
}); });

View File

@@ -1,652 +0,0 @@
import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
const testOptions = [
{ description: '', options: { logLevel: 1 } },
{ description: 'ELK: ', options: { logLevel: 1, layout: 'elk' } },
{ description: 'HD: ', options: { logLevel: 1, look: 'handDrawn' } },
];
describe('Entity Relationship Diagram Unified', () => {
testOptions.forEach(({ description, options }) => {
it(`${description}should render a simple ER diagram`, () => {
imgSnapshotTest(
`
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
`,
options
);
});
it(`${description}should render a simple ER diagram without htmlLabels`, () => {
imgSnapshotTest(
`
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
`,
{ ...options, htmlLabels: false }
);
});
it(`${description}should render an ER diagram with a recursive relationship`, () => {
imgSnapshotTest(
`
erDiagram
CUSTOMER ||..o{ CUSTOMER : refers
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
`,
options
);
});
it(`${description}should render an ER diagram with multiple relationships between the same two entities`, () => {
imgSnapshotTest(
`
erDiagram
CUSTOMER ||--|{ ADDRESS : "invoiced at"
CUSTOMER ||--|{ ADDRESS : "receives goods at"
`,
options
);
});
it(`${description}should render a cyclical ER diagram`, () => {
imgSnapshotTest(
`
erDiagram
A ||--|{ B : likes
B ||--|{ C : likes
C ||--|{ A : likes
`,
options
);
});
it(`${description}should render a not-so-simple ER diagram`, () => {
imgSnapshotTest(
`
erDiagram
CUSTOMER }|..|{ DELIVERY-ADDRESS : has
CUSTOMER ||--o{ ORDER : places
CUSTOMER ||--o{ INVOICE : "liable for"
DELIVERY-ADDRESS ||--o{ ORDER : receives
INVOICE ||--|{ ORDER : covers
ORDER ||--|{ ORDER-ITEM : includes
PRODUCT-CATEGORY ||--|{ PRODUCT : contains
PRODUCT ||--o{ ORDER-ITEM : "ordered in"
`,
options
);
});
it(`${description}should render a not-so-simple ER diagram without htmlLabels`, () => {
imgSnapshotTest(
`
erDiagram
CUSTOMER }|..|{ DELIVERY-ADDRESS : has
CUSTOMER ||--o{ ORDER : places
CUSTOMER ||--o{ INVOICE : "liable for"
DELIVERY-ADDRESS ||--o{ ORDER : receives
INVOICE ||--|{ ORDER : covers
ORDER ||--|{ ORDER-ITEM : includes
PRODUCT-CATEGORY ||--|{ PRODUCT : contains
PRODUCT ||--o{ ORDER-ITEM : "ordered in"
`,
{ ...options, htmlLabels: false }
);
});
it(`${description}should render multiple ER diagrams`, () => {
imgSnapshotTest(
[
`
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
`,
`
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
`,
],
options
);
});
it(`${description}should render an ER diagram with blank or empty labels`, () => {
imgSnapshotTest(
`
erDiagram
BOOK }|..|{ AUTHOR : ""
BOOK }|..|{ GENRE : " "
AUTHOR }|..|{ GENRE : " "
`,
options
);
});
it(`${description}should render entities that have no relationships`, () => {
renderGraph(
`
erDiagram
DEAD_PARROT
HERMIT
RECLUSE
SOCIALITE }o--o{ SOCIALITE : "interacts with"
RECLUSE }o--o{ SOCIALITE : avoids
`,
options
);
});
it(`${description}should render entities with and without attributes`, () => {
renderGraph(
`
erDiagram
BOOK { string title }
AUTHOR }|..|{ BOOK : writes
BOOK { float price }
`,
options
);
});
it(`${description}should render entities with generic and array attributes`, () => {
renderGraph(
`
erDiagram
BOOK {
string title
string[] authors
type~T~ type
}
`,
options
);
});
it(`${description}should render entities with generic and array attributes without htmlLabels`, () => {
renderGraph(
`
erDiagram
BOOK {
string title
string[] authors
type~T~ type
}
`,
{ ...options, htmlLabels: false }
);
});
it(`${description}should render entities with length in attributes type`, () => {
renderGraph(
`
erDiagram
CLUSTER {
varchar(99) name
string(255) description
}
`,
options
);
});
it(`${description}should render entities with length in attributes type without htmlLabels`, () => {
renderGraph(
`
erDiagram
CLUSTER {
varchar(99) name
string(255) description
}
`,
{ ...options, htmlLabels: false }
);
});
it(`${description}should render entities and attributes with big and small entity names`, () => {
renderGraph(
`
erDiagram
PRIVATE_FINANCIAL_INSTITUTION {
string name
int turnover
}
PRIVATE_FINANCIAL_INSTITUTION ||..|{ EMPLOYEE : employs
EMPLOYEE { bool officer_of_firm }
`,
options
);
});
it(`${description}should render entities and attributes with big and small entity names without htmlLabels`, () => {
renderGraph(
`
erDiagram
PRIVATE_FINANCIAL_INSTITUTION {
string name
int turnover
}
PRIVATE_FINANCIAL_INSTITUTION ||..|{ EMPLOYEE : employs
EMPLOYEE { bool officer_of_firm }
`,
{ ...options, htmlLabels: false }
);
});
it(`${description}should render entities with attributes that begin with asterisk`, () => {
imgSnapshotTest(
`
erDiagram
BOOK {
int *id
string name
varchar(99) summary
}
BOOK }o..o{ STORE : soldBy
STORE {
int *id
string name
varchar(50) address
}
`,
options
);
});
it(`${description}should render entities with attributes that begin with asterisk without htmlLabels`, () => {
imgSnapshotTest(
`
erDiagram
BOOK {
int *id
string name
varchar(99) summary
}
BOOK }o..o{ STORE : soldBy
STORE {
int *id
string name
varchar(50) address
}
`,
{ ...options, htmlLabels: false }
);
});
it(`${description}should render entities with keys`, () => {
renderGraph(
`
erDiagram
AUTHOR_WITH_LONG_ENTITY_NAME {
string name PK
}
AUTHOR_WITH_LONG_ENTITY_NAME }|..|{ BOOK : writes
BOOK {
float price
string author FK
string title PK
}
`,
options
);
});
it(`${description}should render entities with keys without htmlLabels`, () => {
renderGraph(
`
erDiagram
AUTHOR_WITH_LONG_ENTITY_NAME {
string name PK
}
AUTHOR_WITH_LONG_ENTITY_NAME }|..|{ BOOK : writes
BOOK {
float price
string author FK
string title PK
}
`,
{ ...options, htmlLabels: false }
);
});
it(`${description}should render entities with comments`, () => {
renderGraph(
`
erDiagram
AUTHOR_WITH_LONG_ENTITY_NAME {
string name "comment"
}
AUTHOR_WITH_LONG_ENTITY_NAME }|..|{ BOOK : writes
BOOK {
string author
string title "author comment"
float price "price comment"
}
`,
options
);
});
it(`${description}should render entities with comments without htmlLabels`, () => {
renderGraph(
`
erDiagram
AUTHOR_WITH_LONG_ENTITY_NAME {
string name "comment"
}
AUTHOR_WITH_LONG_ENTITY_NAME }|..|{ BOOK : writes
BOOK {
string author
string title "author comment"
float price "price comment"
}
`,
{ ...options, htmlLabels: false }
);
});
it(`${description}should render entities with keys and comments`, () => {
renderGraph(
`
erDiagram
AUTHOR_WITH_LONG_ENTITY_NAME {
string name PK "comment"
}
AUTHOR_WITH_LONG_ENTITY_NAME }|..|{ BOOK : writes
BOOK {
string description
float price "price comment"
string title PK "title comment"
string author FK
}
`,
options
);
});
it(`${description}should render entities with keys and comments without htmlLabels`, () => {
renderGraph(
`
erDiagram
AUTHOR_WITH_LONG_ENTITY_NAME {
string name PK "comment"
}
AUTHOR_WITH_LONG_ENTITY_NAME }|..|{ BOOK : writes
BOOK {
string description
float price "price comment"
string title PK "title comment"
string author FK
}
`,
{ ...options, htmlLabels: false }
);
});
it(`${description}should render entities with aliases`, () => {
renderGraph(
`
erDiagram
T1 one or zero to one or more T2 : test
T2 one or many optionally to zero or one T3 : test
T3 zero or more to zero or many T4 : test
T4 many(0) to many(1) T5 : test
T5 many optionally to one T6 : test
T6 only one optionally to only one T1 : test
T4 0+ to 1+ T6 : test
T1 1 to 1 T3 : test
`,
options
);
});
it(`${description}should render a simple ER diagram with a title`, () => {
imgSnapshotTest(
`---
title: simple ER diagram
---
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
`,
options
);
});
it(`${description}should render entities with entity name aliases`, () => {
imgSnapshotTest(
`
erDiagram
p[Person] {
varchar(64) firstName
varchar(64) lastName
}
c["Customer Account"] {
varchar(128) email
}
p ||--o| c : has
`,
options
);
});
it(`${description}should render relationship labels with line breaks`, () => {
imgSnapshotTest(
`
erDiagram
p[Person] {
string firstName
string lastName
}
a["Customer Account"] {
string email
}
b["Customer Account Secondary"] {
string email
}
c["Customer Account Tertiary"] {
string email
}
d["Customer Account Nth"] {
string email
}
p ||--o| a : "has<br />one"
p ||--o| b : "has<br />one<br />two"
p ||--o| c : "has<br />one<br/>two<br />three"
p ||--o| d : "has<br />one<br />two<br/>three<br />...<br/>Nth"
`,
options
);
});
it(`${description}should render an ER diagram with unicode text`, () => {
imgSnapshotTest(
`
erDiagram
_**testẽζØ😀㌕ぼ**_ {
*__List~List~int~~sdfds__* **driversLicense** PK "***The l😀icense #***"
*string(99)~T~~~~~~* firstName "Only __99__ <br>characters are a<br>llowed dsfsdfsdfsdfs"
string last*Name*
string __phone__ UK
int _age_
}
`,
options
);
});
it(`${description}should render an ER diagram with unicode text without htmlLabels`, () => {
imgSnapshotTest(
`
erDiagram
_**testẽζØ😀㌕ぼ**_ {
*__List~List~int~~sdfds__* **driversLicense** PK "***The l😀icense #***"
*string(99)~T~~~~~~* firstName "Only __99__ <br>characters are a<br>llowed dsfsdfsdfsdfs"
string last*Name*
string __phone__ UK
int _age_
}
`,
{ ...options, htmlLabels: false }
);
});
it(`${description}should render an ER diagram with relationships with unicode text`, () => {
imgSnapshotTest(
`
erDiagram
person[😀] {
string *first*Name
string _**last**Name_
}
a["*Customer Account*"] {
**string** ema*i*l
}
person ||--o| a : __hẽ😀__
`,
options
);
});
it(`${description}should render an ER diagram with relationships with unicode text without htmlLabels`, () => {
imgSnapshotTest(
`
erDiagram
person[😀] {
string *first*Name
string _**last**Name_
}
a["*Customer Account*"] {
**string** ema*i*l
}
person ||--o| a : __hẽ😀__
`,
{ ...options, htmlLabels: false }
);
});
it(`${description}should render an ER diagram with TB direction`, () => {
imgSnapshotTest(
`
erDiagram
direction TB
CAR ||--|{ NAMED-DRIVER : allows
PERSON ||..o{ NAMED-DRIVER : is
`,
options
);
});
it(`${description}should render an ER diagram with BT direction`, () => {
imgSnapshotTest(
`
erDiagram
direction BT
CAR ||--|{ NAMED-DRIVER : allows
PERSON ||..o{ NAMED-DRIVER : is
`,
options
);
});
it(`${description}should render an ER diagram with LR direction`, () => {
imgSnapshotTest(
`
erDiagram
direction LR
CAR ||--|{ NAMED-DRIVER : allows
PERSON ||..o{ NAMED-DRIVER : is
`,
options
);
});
it(`${description}should render an ER diagram with RL direction`, () => {
imgSnapshotTest(
`
erDiagram
direction RL
CAR ||--|{ NAMED-DRIVER : allows
PERSON ||..o{ NAMED-DRIVER : is
`,
options
);
});
it(`${description}should render entities with styles applied from style statement`, () => {
imgSnapshotTest(
`
erDiagram
c[CUSTOMER]
p[PERSON]
style c,p fill:#f9f,stroke:blue, color:grey, font-size:24px,font-weight:bold
`,
options
);
});
it(`${description}should render entities with styles applied from style statement without htmlLabels`, () => {
imgSnapshotTest(
`
erDiagram
c[CUSTOMER]
p[PERSON]
style c,p fill:#f9f,stroke:blue, color:grey, font-size:24px,font-weight:bold
`,
{ ...options, htmlLabels: false }
);
});
it(`${description}should render entities with styles applied from class statement`, () => {
imgSnapshotTest(
`
erDiagram
c[CUSTOMER]
p[PERSON]:::blue
classDef bold font-size:24px, font-weight: bold
classDef blue stroke:lightblue, color: #0000FF
class c,p bold
`,
options
);
});
it(`${description}should render entities with styles applied from class statement without htmlLabels`, () => {
imgSnapshotTest(
`
erDiagram
c[CUSTOMER]
p[PERSON]:::blue
classDef bold font-size:24px, font-weight: bold
classDef blue stroke:lightblue, color: #0000FF
class c,p bold
`,
{ ...options, htmlLabels: false }
);
});
it(`${description}should render entities with styles applied from the default class and other styles`, () => {
imgSnapshotTest(
`
erDiagram
c[CUSTOMER]
p[PERSON]:::blue
classDef blue stroke:lightblue, color: #0000FF
classDef default fill:pink
style c color:green
`,
{ ...options }
);
});
});
});

View File

@@ -109,8 +109,8 @@ describe('Entity Relationship Diagram', () => {
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(''));
// use within because the absolute value can be slightly different depending on the environment ±6% // use within because the absolute value can be slightly different depending on the environment ±5%
expect(maxWidthValue).to.be.within(140 * 0.96, 140 * 1.06); expect(maxWidthValue).to.be.within(140 * 0.95, 140 * 1.05);
}); });
}); });
@@ -125,8 +125,8 @@ describe('Entity Relationship Diagram', () => {
); );
cy.get('svg').should((svg) => { cy.get('svg').should((svg) => {
const width = parseFloat(svg.attr('width')); const width = parseFloat(svg.attr('width'));
// use within because the absolute value can be slightly different depending on the environment ±6% // use within because the absolute value can be slightly different depending on the environment ±5%
expect(width).to.be.within(140 * 0.96, 140 * 1.06); expect(width).to.be.within(140 * 0.95, 140 * 1.05);
// expect(svg).to.have.attr('height', '465'); // expect(svg).to.have.attr('height', '465');
expect(svg).to.not.have.attr('style'); expect(svg).to.not.have.attr('style');
}); });
@@ -321,52 +321,4 @@ ORDER ||--|{ LINE-ITEM : contains
{ logLevel: 1 } { logLevel: 1 }
); );
}); });
it('should render relationship labels with line breaks', () => {
imgSnapshotTest(
`
erDiagram
p[Person] {
string firstName
string lastName
}
a["Customer Account"] {
string email
}
b["Customer Account Secondary"] {
string email
}
c["Customer Account Tertiary"] {
string email
}
d["Customer Account Nth"] {
string email
}
p ||--o| a : "has<br />one"
p ||--o| b : "has<br />one<br />two"
p ||--o| c : "has<br />one<br/>two<br />three"
p ||--o| d : "has<br />one<br />two<br/>three<br />...<br/>Nth"
`,
{ logLevel: 1 }
);
});
describe('Include char sequence "graph" in text (#6795)', () => {
it('has a label with char sequence "graph"', () => {
imgSnapshotTest(
`
erDiagram
p[Photograph] {
varchar(12) jobId
date dateCreated
}
`,
{ flowchart: { defaultRenderer: 'elk' } }
);
});
});
}); });

View File

@@ -3,7 +3,7 @@ import { imgSnapshotTest } from '../../helpers/util';
describe('Error Diagrams', () => { describe('Error Diagrams', () => {
beforeEach(() => { beforeEach(() => {
cy.on('uncaught:exception', (err) => { cy.on('uncaught:exception', (err) => {
expect(err.message).to.include('error'); expect(err.message).to.include('Parse error');
// return false to prevent the error from // return false to prevent the error from
// failing this test // failing this test
return false; return false;

View File

@@ -1,6 +1,6 @@
import { imgSnapshotTest, renderGraph, verifyNumber } from '../../helpers/util.ts'; import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
describe('Flowchart ELK', () => { describe.skip('Flowchart ELK', () => {
it('1-elk: should render a simple flowchart', () => { it('1-elk: should render a simple flowchart', () => {
imgSnapshotTest( imgSnapshotTest(
`flowchart-elk TD `flowchart-elk TD
@@ -109,7 +109,7 @@ describe('Flowchart ELK', () => {
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(''));
verifyNumber(maxWidthValue, 380, 15); expect(maxWidthValue).to.be.within(230 * 0.95, 230 * 1.05);
}); });
}); });
it('8-elk: should render a flowchart when useMaxWidth is false', () => { it('8-elk: should render a flowchart when useMaxWidth is false', () => {
@@ -128,7 +128,7 @@ describe('Flowchart ELK', () => {
const width = parseFloat(svg.attr('width')); const width = parseFloat(svg.attr('width'));
// use within because the absolute value can be slightly different depending on the environment ±5% // use within because the absolute value can be slightly different depending on the environment ±5%
// expect(height).to.be.within(446 * 0.95, 446 * 1.05); // expect(height).to.be.within(446 * 0.95, 446 * 1.05);
verifyNumber(width, 380, 15); expect(width).to.be.within(230 * 0.95, 230 * 1.05);
expect(svg).to.not.have.attr('style'); expect(svg).to.not.have.attr('style');
}); });
}); });
@@ -208,13 +208,13 @@ describe('Flowchart ELK', () => {
`flowchart-elk TB `flowchart-elk TB
internet internet
nat nat
router routeur
lb1 lb1
lb2 lb2
compute1 compute1
compute2 compute2
subgraph project subgraph project
router routeur
nat nat
subgraph subnet1 subgraph subnet1
compute1 compute1
@@ -225,8 +225,8 @@ describe('Flowchart ELK', () => {
lb2 lb2
end end
end end
internet --> router internet --> routeur
router --> subnet1 & subnet2 routeur --> subnet1 & subnet2
subnet1 & subnet2 --> nat --> internet subnet1 & subnet2 --> nat --> internet
`, `,
{ htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' } { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
@@ -443,7 +443,7 @@ flowchart-elk TD
{ htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' } { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
); );
}); });
it('63-elk: title on subgraphs should be themeable', () => { it('63-elk: title on subgraphs should be themable', () => {
imgSnapshotTest( imgSnapshotTest(
` `
%%{init:{"theme":"base", "themeVariables": {"primaryColor":"#411d4e", "titleColor":"white", "darkMode":true}}}%% %%{init:{"theme":"base", "themeVariables": {"primaryColor":"#411d4e", "titleColor":"white", "darkMode":true}}}%%
@@ -692,7 +692,7 @@ A --> B
{} {}
); );
cy.get('svg').should((svg) => { cy.get('svg').should((svg) => {
const edges = svg[0].querySelectorAll('.edges > path'); const edges = svg.querySelectorAll('.edges > path');
edges.forEach((edge) => { edges.forEach((edge) => {
expect(edge).to.have.class('flowchart-link'); expect(edge).to.have.class('flowchart-link');
}); });
@@ -739,7 +739,7 @@ NL\`") --"\`1o **bold**\`"--> c
{ flowchart: { titleTopMargin: 0 } } { flowchart: { titleTopMargin: 0 } }
); );
}); });
it.skip('Wrapping long text with a new line', () => { it('Wrapping long text with a new line', () => {
imgSnapshotTest( imgSnapshotTest(
`%%{init: {"flowchart": {"htmlLabels": true}} }%% `%%{init: {"flowchart": {"htmlLabels": true}} }%%
flowchart-elk LR flowchart-elk LR
@@ -841,232 +841,7 @@ end
{ flowchart: { titleTopMargin: 0 } } { flowchart: { titleTopMargin: 0 } }
); );
}); });
it('Sub graphs', () => {
imgSnapshotTest(
`---
config:
layout: elk
---
flowchart LR
subgraph subgraph_ko6czgs5u["Untitled subgraph"]
D["Option 1"]
end
C{"Evaluate"} -- One --> D
C -- Two --> E(("Option 2"))
D --> E
A["A"]
`,
{ flowchart: { titleTopMargin: 0 } }
);
}); });
it('6080: should handle diamond shape intersections', () => {
imgSnapshotTest(
`---
config:
layout: elk
---
flowchart LR
subgraph s1["Untitled subgraph"]
n1["Evaluate"]
n2["Option 1"]
n3["Option 2"]
n4["fa:fa-car Option 3"]
end
subgraph s2["Untitled subgraph"]
n5["Evaluate"]
n6["Option 1"]
n7["Option 2"]
n8["fa:fa-car Option 3"]
end
A["Start"] -- Some text --> B("Continue")
B --> C{"Evaluate"}
C -- One --> D["Option 1"]
C -- Two --> E["Option 2"]
C -- Three --> F["fa:fa-car Option 3"]
n1 -- One --> n2
n1 -- Two --> n3
n1 -- Three --> n4
n5 -- One --> n6
n5 -- Two --> n7
n5 -- Three --> n8
n1@{ shape: diam}
n2@{ shape: rect}
n3@{ shape: rect}
n4@{ shape: rect}
n5@{ shape: diam}
n6@{ shape: rect}
n7@{ shape: rect}
n8@{ shape: rect}
`,
{ flowchart: { titleTopMargin: 0 } }
);
});
it('6088-1: should handle diamond shape intersections', () => {
imgSnapshotTest(
`---
config:
layout: elk
---
flowchart LR
subgraph S2
subgraph s1["APA"]
D{"Use the editor"}
end
D -- Mermaid js --> I{"fa:fa-code Text"}
D --> I
D --> I
end
`,
{ flowchart: { titleTopMargin: 0 } }
);
});
it('6088-2: should handle diamond shape intersections', () => {
imgSnapshotTest(
`---
config:
layout: elk
---
flowchart LR
a
subgraph s0["APA"]
subgraph s8["APA"]
subgraph s1["APA"]
D{"X"}
E[Q]
end
subgraph s3["BAPA"]
F[Q]
I
end
D --> I
D --> I
D --> I
I{"X"}
end
end
`,
{ flowchart: { titleTopMargin: 0 } }
);
});
it('6088-3: should handle diamond shape intersections', () => {
imgSnapshotTest(
`---
config:
layout: elk
---
flowchart LR
a
D{"Use the editor"}
D -- Mermaid js --> I{"fa:fa-code Text"}
D-->I
D-->I
`,
{ flowchart: { titleTopMargin: 0 } }
);
});
it('6088-4: should handle diamond shape intersections', () => {
imgSnapshotTest(
`---
config:
layout: elk
---
flowchart LR
subgraph s1["Untitled subgraph"]
n1["Evaluate"]
n2["Option 1"]
n3["Option 2"]
n4["fa:fa-car Option 3"]
end
subgraph s2["Untitled subgraph"]
n5["Evaluate"]
n6["Option 1"]
n7["Option 2"]
n8["fa:fa-car Option 3"]
end
A["Start"] -- Some text --> B("Continue")
B --> C{"Evaluate"}
C -- One --> D["Option 1"]
C -- Two --> E["Option 2"]
C -- Three --> F["fa:fa-car Option 3"]
n1 -- One --> n2
n1 -- Two --> n3
n1 -- Three --> n4
n5 -- One --> n6
n5 -- Two --> n7
n5 -- Three --> n8
n1@{ shape: diam}
n2@{ shape: rect}
n3@{ shape: rect}
n4@{ shape: rect}
n5@{ shape: diam}
n6@{ shape: rect}
n7@{ shape: rect}
n8@{ shape: rect}
`,
{ flowchart: { titleTopMargin: 0 } }
);
});
it('6088-5: should handle diamond shape intersections', () => {
imgSnapshotTest(
`---
config:
layout: elk
---
flowchart LR
A{A} --> B & C
`,
{ flowchart: { titleTopMargin: 0 } }
);
});
it('6088-6: should handle diamond shape intersections', () => {
imgSnapshotTest(
`---
config:
layout: elk
---
flowchart LR
A{A} --> B & C
subgraph "subbe"
A
end
`,
{ flowchart: { titleTopMargin: 0 } }
);
});
});
});
it('6647-elk: should keep node order when using elk layout unless it would add crossings', () => {
imgSnapshotTest(
`---
config:
layout: elk
---
flowchart TB
a --> a1 & a2 & a3 & a4
b --> b1 & b2
b2 --> b3
b1 --> b4
`
);
}); });
}); });
@@ -1080,7 +855,7 @@ describe('Title and arrow styling #4813', () => {
flowchart LR flowchart LR
A-->B A-->B
A-->C`, A-->C`,
{ layout: 'elk' } { flowchart: { defaultRenderer: 'elk' } }
); );
cy.get('svg').should((svg) => { cy.get('svg').should((svg) => {
const title = svg[0].querySelector('text'); const title = svg[0].querySelector('text');
@@ -1096,14 +871,15 @@ describe('Title and arrow styling #4813', () => {
B-.-oC B-.-oC
C==xD C==xD
D ~~~ A`, D ~~~ A`,
{ layout: 'elk' } { flowchart: { defaultRenderer: 'elk' } }
); );
cy.get('svg').should((svg) => { cy.get('svg').should((svg) => {
const edges = svg[0].querySelectorAll('.edges path'); const edges = svg[0].querySelectorAll('.edges path');
expect(edges[0].getAttribute('class')).to.contain('edge-pattern-solid'); console.log(edges);
expect(edges[1].getAttribute('class')).to.contain('edge-pattern-dotted'); expect(edges[0]).to.have.attr('pattern', 'solid');
expect(edges[2].getAttribute('class')).to.contain('edge-thickness-thick'); expect(edges[1]).to.have.attr('pattern', 'dotted');
expect(edges[3].getAttribute('class')).to.contain('edge-thickness-invisible'); expect(edges[2]).to.have.css('stroke-width', '3.5px');
expect(edges[3]).to.have.css('stroke-width', '1.5px');
}); });
}); });
}); });

File diff suppressed because it is too large Load Diff

View File

@@ -1,28 +0,0 @@
import { imgSnapshotTest } from '../../helpers/util.ts';
const themes = ['default', 'forest', 'dark', 'base', 'neutral'];
describe('when rendering flowchart with icons', () => {
for (const theme of themes) {
it(`should render icons from fontawesome library on theme ${theme}`, () => {
imgSnapshotTest(
`flowchart TD
A("fab:fa-twitter Twitter") --> B("fab:fa-facebook Facebook")
B --> C("fa:fa-coffee Coffee")
C --> D("fa:fa-car Car")
D --> E("fab:fa-github GitHub")
`,
{ theme }
);
});
it(`should render registered icons on theme ${theme}`, () => {
imgSnapshotTest(
`flowchart TD
A("fa:fa-bell Bell")
`,
{ theme }
);
});
}
});

View File

@@ -1,142 +0,0 @@
import { imgSnapshotTest } from '../../helpers/util.ts';
const aliasSet1 = ['process', 'rect', 'proc', 'rectangle'] as const;
const aliasSet2 = ['event', 'rounded'] as const;
const aliasSet3 = ['stadium', 'pill', 'terminal'] as const;
const aliasSet4 = ['fr-rect', 'subproc', 'subprocess', 'framed-rectangle', 'subroutine'] as const;
const aliasSet5 = ['db', 'database', 'cylinder', 'cyl'] as const;
const aliasSet6 = ['diam', 'decision', 'diamond'] as const;
const aliasSet7 = ['hex', 'hexagon', 'prepare'] as const;
const aliasSet8 = ['lean-r', 'lean-right', 'in-out'] as const;
const aliasSet9 = ['lean-l', 'lean-left', 'out-in'] as const;
const aliasSet10 = ['trap-b', 'trapezoid-bottom', 'priority'] as const;
const aliasSet11 = ['trap-t', 'trapezoid-top', 'manual'] as const;
const aliasSet12 = ['dbl-circ', 'double-circle'] as const;
const aliasSet13 = ['notched-rectangle', 'card', 'notch-rect'] as const;
const aliasSet14 = [
'lin-rect',
'lined-rectangle',
'lin-proc',
'lined-process',
'shaded-process',
] as const;
const aliasSet15 = ['sm-circ', 'small-circle', 'start'] as const;
const aliasSet16 = ['fr-circ', 'framed-circle', 'stop'] as const;
const aliasSet17 = ['fork', 'join'] as const;
// brace-r', 'braces'
const aliasSet18 = ['comment', 'brace-l'] as const;
const aliasSet19 = ['bolt', 'com-link', 'lightning-bolt'] as const;
const aliasSet20 = ['doc', 'document'] as const;
const aliasSet21 = ['delay', 'half-rounded-rectangle'] as const;
const aliasSet22 = ['h-cyl', 'das', 'horizontal-cylinder'] as const;
const aliasSet23 = ['lin-cyl', 'disk', 'lined-cylinder'] as const;
const aliasSet24 = ['curv-trap', 'display', 'curved-trapezoid'] as const;
const aliasSet25 = ['div-rect', 'div-proc', 'divided-rectangle', 'divided-process'] as const;
const aliasSet26 = ['extract', 'tri', 'triangle'] as const;
const aliasSet27 = ['win-pane', 'internal-storage', 'window-pane'] as const;
const aliasSet28 = ['f-circ', 'junction', 'filled-circle'] as const;
const aliasSet29 = ['lin-doc', 'lined-document'] as const;
const aliasSet30 = ['notch-pent', 'loop-limit', 'notched-pentagon'] as const;
const aliasSet31 = ['flip-tri', 'manual-file', 'flipped-triangle'] as const;
const aliasSet32 = ['sl-rect', 'manual-input', 'sloped-rectangle'] as const;
const aliasSet33 = ['docs', 'documents', 'st-doc', 'stacked-document'] as const;
const aliasSet34 = ['procs', 'processes', 'st-rect', 'stacked-rectangle'] as const;
const aliasSet35 = ['flag', 'paper-tape'] as const;
const aliasSet36 = ['bow-rect', 'stored-data', 'bow-tie-rectangle'] as const;
const aliasSet37 = ['cross-circ', 'summary', 'crossed-circle'] as const;
const aliasSet38 = ['tag-doc', 'tagged-document'] as const;
const aliasSet39 = ['tag-rect', 'tag-proc', 'tagged-rectangle', 'tagged-process'] as const;
const aliasSet40 = ['collate', 'hourglass'] as const;
// Aggregate all alias sets into a single array
const aliasSets = [
aliasSet1,
aliasSet2,
aliasSet3,
aliasSet4,
aliasSet5,
aliasSet6,
aliasSet7,
aliasSet8,
aliasSet9,
aliasSet10,
aliasSet11,
aliasSet12,
aliasSet13,
aliasSet14,
aliasSet15,
aliasSet16,
aliasSet17,
aliasSet18,
aliasSet19,
aliasSet20,
aliasSet21,
aliasSet22,
aliasSet23,
aliasSet24,
aliasSet25,
aliasSet26,
aliasSet27,
aliasSet28,
aliasSet29,
aliasSet30,
aliasSet31,
aliasSet32,
aliasSet33,
aliasSet34,
aliasSet35,
aliasSet36,
aliasSet37,
aliasSet38,
aliasSet39,
] as const;
aliasSets.forEach((aliasSet) => {
describe(`Test ${aliasSet.join(',')} `, () => {
it(`All ${aliasSet.join(',')} should render same shape`, () => {
let flowchartCode = `flowchart \n`;
aliasSet.forEach((alias, index) => {
flowchartCode += ` n${index}@{ shape: ${alias}, label: "${alias}" }\n`;
});
imgSnapshotTest(flowchartCode);
});
});
});

View File

@@ -99,7 +99,7 @@ describe('Flowchart v2', () => {
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.be.within(440 * 0.95, 440 * 1.05); expect(maxWidthValue).to.be.within(290 * 0.95 - 1, 290 * 1.05);
}); });
}); });
it('8: should render a flowchart when useMaxWidth is false', () => { it('8: should render a flowchart when useMaxWidth is false', () => {
@@ -118,7 +118,7 @@ describe('Flowchart v2', () => {
const width = parseFloat(svg.attr('width')); const width = parseFloat(svg.attr('width'));
// use within because the absolute value can be slightly different depending on the environment ±5% // use within because the absolute value can be slightly different depending on the environment ±5%
// expect(height).to.be.within(446 * 0.95, 446 * 1.05); // expect(height).to.be.within(446 * 0.95, 446 * 1.05);
expect(width).to.be.within(440 * 0.95, 440 * 1.05); expect(width).to.be.within(290 * 0.95 - 1, 290 * 1.05);
expect(svg).to.not.have.attr('style'); expect(svg).to.not.have.attr('style');
}); });
}); });
@@ -198,13 +198,13 @@ describe('Flowchart v2', () => {
`flowchart TB `flowchart TB
internet internet
nat nat
router routeur
lb1 lb1
lb2 lb2
compute1 compute1
compute2 compute2
subgraph project subgraph project
router routeur
nat nat
subgraph subnet1 subgraph subnet1
compute1 compute1
@@ -215,8 +215,8 @@ describe('Flowchart v2', () => {
lb2 lb2
end end
end end
internet --> router internet --> routeur
router --> subnet1 & subnet2 routeur --> subnet1 & subnet2
subnet1 & subnet2 --> nat --> internet subnet1 & subnet2 --> nat --> internet
`, `,
{ htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' } { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
@@ -433,7 +433,7 @@ flowchart TD
{ htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' } { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
); );
}); });
it('63: title on subgraphs should be themeable', () => { it('63: title on subgraphs should be themable', () => {
imgSnapshotTest( imgSnapshotTest(
` `
%%{init:{"theme":"base", "themeVariables": {"primaryColor":"#411d4e", "titleColor":"white", "darkMode":true}}}%% %%{init:{"theme":"base", "themeVariables": {"primaryColor":"#411d4e", "titleColor":"white", "darkMode":true}}}%%
@@ -699,7 +699,7 @@ A --> B
{ flowchart: { titleTopMargin: 10 } } { flowchart: { titleTopMargin: 10 } }
); );
}); });
it('3192: It should be possible to render flowcharts with invisible edges', () => { it('3192: It should be possieble to render flowcharts with invisible edges', () => {
imgSnapshotTest( imgSnapshotTest(
`--- `---
title: Simple flowchart with invisible edges title: Simple flowchart with invisible edges
@@ -1047,156 +1047,8 @@ end
A --lb3--> TOP --lb4--> B A --lb3--> TOP --lb4--> B
B1 --lb5--> B2 B1 --lb5--> B2
`, `,
{ { flowchart: { subGraphTitleMargin: { top: 10, bottom: 5 } } }
flowchart: { subGraphTitleMargin: { top: 10, bottom: 5 } },
}
);
});
it('Should render self-loops', () => {
imgSnapshotTest(
`flowchart
A --> A
subgraph B
B1 --> B1
end
subgraph C
subgraph C1
C2 --> C2
subgraph D
D1 --> D1
end
D --> D
end
C1 --> C1
end
`,
{
flowchart: { subGraphTitleMargin: { top: 10, bottom: 5 } },
}
); );
}); });
}); });
describe('New @ syntax for node metadata edge cases', () => {
it('should be possible to use @ syntax to add labels on multi nodes', () => {
imgSnapshotTest(
`flowchart TB
n2["label for n2"] & n4@{ label: "label for n4"} & n5@{ label: "label for n5"}
`,
{}
);
});
it('should be possible to use @ syntax to add labels with trail spaces and &', () => {
imgSnapshotTest(
`flowchart TB
n2["label for n2"] & n4@{ label: "label for n4"} & n5@{ label: "label for n5"}
`,
{}
);
});
it('should be possible to use @ syntax to add labels with trail spaces', () => {
imgSnapshotTest(
`flowchart TB
n2["label for n2"]
n4@{ label: "label for n4"}
n5@{ label: "label for n5"}
`,
{}
);
});
it('should be possible to use @ syntax to add labels with trail spaces and edge/link', () => {
imgSnapshotTest(
`flowchart TD
A["A"] --> B["for B"] & C@{ label: "for c"} & E@{label : "for E"}
D@{label: "for D"}
`,
{}
);
});
});
describe('Flowchart Node Shape Rendering', () => {
it('should render a stadium-shaped node', () => {
imgSnapshotTest(
`flowchart TB
A(["Start"]) --> n1["Untitled Node"]
A --> n2["Untitled Node"]
`,
{}
);
});
it('should render a diamond-shaped node using shape config', () => {
imgSnapshotTest(
`flowchart BT
n2["Untitled Node"] --> n1["Diamond"]
n1@{ shape: diam}
`,
{}
);
});
it('should render a rounded rectangle and a normal rectangle', () => {
imgSnapshotTest(
`flowchart BT
n2["Untitled Node"] --> n1["Rounded Rectangle"]
n3["Untitled Node"] --> n1
n1@{ shape: rounded}
n3@{ shape: rect}
`,
{}
);
});
});
it('6617: Per Link Curve Styling using edge Ids', () => {
imgSnapshotTest(
`flowchart TD
A e1@-->B e5@--> E
E e7@--> D
B e3@-->D
A e2@-->C e4@-->D
C e6@--> F
F e8@--> D
e1@{ curve: natural }
e2@{ curve: stepAfter }
e3@{ curve: monotoneY }
e4@{ curve: bumpY }
e5@{ curve: linear }
e6@{ curve: catmullRom }
e7@{ curve: cardinal }
`
);
});
describe('when rendering unsuported markdown', () => {
const graph = `flowchart TB
mermaid{"What is\nyourmermaid version?"} --> v10["<11"] --"\`<**1**1\`"--> fine["No bug"]
mermaid --> v11[">= v11"] -- ">= v11" --> broken["Affected by https://github.com/mermaid-js/mermaid/issues/5824"]
subgraph subgraph1["\`How to fix **fix**\`"]
broken --> B["B"]
end
githost["Github, Gitlab, BitBucket, etc."]
githost2["\`Github, Gitlab, BitBucket, etc.\`"]
a["1."]
b["- x"]
`;
it('should render raw strings', () => {
imgSnapshotTest(graph);
});
it('should render raw strings with htmlLabels: false', () => {
imgSnapshotTest(graph, { htmlLabels: false });
});
});
it('V2 - 17: should apply class def colour to edge label', () => {
imgSnapshotTest(
` graph LR
id1(Start) link@-- "Label" -->id2(Stop)
style id1 fill:#f9f,stroke:#333,stroke-width:4px
class id2 myClass
classDef myClass fill:#bbf,stroke:#f66,stroke-width:2px,color:white,stroke-dasharray: 5 5
class link myClass
`
);
});
}); });

View File

@@ -733,7 +733,7 @@ describe('Graph', () => {
}); });
it('38: should render a flowchart when useMaxWidth is true (default)', () => { it('38: should render a flowchart when useMaxWidth is true (default)', () => {
renderGraph( renderGraph(
`flowchart TD `graph TD
A[Christmas] -->|Get money| B(Go shopping) A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think} B --> C{Let me think}
C -->|One| D[Laptop] C -->|One| D[Laptop]
@@ -751,7 +751,7 @@ describe('Graph', () => {
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.be.within(446 * 0.9, 446 * 1.1); expect(maxWidthValue).to.be.within(300 * 0.9, 300 * 1.1);
}); });
}); });
it('39: should render a flowchart when useMaxWidth is false', () => { it('39: should render a flowchart when useMaxWidth is false', () => {
@@ -770,7 +770,7 @@ describe('Graph', () => {
const width = parseFloat(svg.attr('width')); const width = parseFloat(svg.attr('width'));
// use within because the absolute value can be slightly different depending on the environment ±10% // use within because the absolute value can be slightly different depending on the environment ±10%
// expect(height).to.be.within(446 * 0.95, 446 * 1.05); // expect(height).to.be.within(446 * 0.95, 446 * 1.05);
expect(width).to.be.within(446 * 0.9, 446 * 1.1); expect(width).to.be.within(300 * 0.9, 300 * 1.1);
expect(svg).to.not.have.attr('style'); expect(svg).to.not.have.attr('style');
}); });
}); });
@@ -911,66 +911,7 @@ graph TD
style default stroke:#000,stroke-width:4px style default stroke:#000,stroke-width:4px
`, `,
{ { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
flowchart: { htmlLabels: true },
securityLevel: 'loose',
}
);
});
it('#6369: edge color should affect arrow head', () => {
imgSnapshotTest(
`
flowchart LR
A --> B
A --> C
C --> D
linkStyle 0 stroke:#D50000
linkStyle 2 stroke:#D50000
`,
{
flowchart: { htmlLabels: true },
securityLevel: 'loose',
}
);
});
it('68: should honor subgraph direction when inheritDir is false', () => {
imgSnapshotTest(
`
%%{init: {"flowchart": { "inheritDir": false }}}%%
flowchart TB
direction LR
subgraph A
direction TB
a --> b
end
subgraph B
c --> d
end
`,
{
fontFamily: 'courier',
}
);
});
it('69: should inherit global direction when inheritDir is true', () => {
imgSnapshotTest(
`
%%{init: {"flowchart": { "inheritDir": true }}}%%
flowchart TB
direction LR
subgraph A
direction TB
a --> b
end
subgraph B
c --> d
end
`,
{
fontFamily: 'courier',
}
); );
}); });
}); });

View File

@@ -117,7 +117,7 @@ describe('Gantt diagram', () => {
{} {}
); );
}); });
it('should FAIL rendering a gantt chart for issue #1060 with invalid date', () => { it('should FAIL redering a gantt chart for issue #1060 with invalid date', () => {
imgSnapshotTest( imgSnapshotTest(
` `
gantt gantt
@@ -358,23 +358,6 @@ describe('Gantt diagram', () => {
); );
}); });
it('should render a gantt diagram with a vert tag', () => {
imgSnapshotTest(
`
gantt
title A Gantt Diagram
dateFormat ss
axisFormat %Ss
section Section
A task : a1, 00, 6s
Milestone : vert, 01,
section Another
Task in sec : 06, 3s
another task : 3s
`
);
});
it('should render a gantt diagram with tick is 2 milliseconds', () => { it('should render a gantt diagram with tick is 2 milliseconds', () => {
imgSnapshotTest( imgSnapshotTest(
` `
@@ -565,18 +548,6 @@ describe('Gantt diagram', () => {
); );
}); });
it('should render only the day when using dateFormat D', () => {
imgSnapshotTest(
`
gantt
title Test
dateFormat D
A :a, 1, 1d
`,
{}
);
});
// TODO: fix it // TODO: fix it
// //
// This test is skipped deliberately // This test is skipped deliberately
@@ -602,7 +573,7 @@ describe('Gantt diagram', () => {
` `
); );
}); });
it('should render a gantt diagram excluding friday and saturday', () => { it('should render a gantt diagram exculding friday and saturday', () => {
imgSnapshotTest( imgSnapshotTest(
`gantt `gantt
title A Gantt Diagram title A Gantt Diagram
@@ -613,7 +584,7 @@ describe('Gantt diagram', () => {
A task :a1, 2024-02-28, 10d` A task :a1, 2024-02-28, 10d`
); );
}); });
it('should render a gantt diagram excluding saturday and sunday', () => { it('should render a gantt diagram exculding saturday and sunday', () => {
imgSnapshotTest( imgSnapshotTest(
`gantt `gantt
title A Gantt Diagram title A Gantt Diagram
@@ -659,49 +630,6 @@ describe('Gantt diagram', () => {
); );
}); });
it('should render a gantt diagram excluding a specific date in YYYY-MM-DD HH:mm:ss format', () => {
imgSnapshotTest(
`
gantt
dateFormat YYYY-MM-DD HH:mm:ss
excludes 2025-07-07
section Section
A task :a1, 2025-07-04 20:30:30, 2025-07-08 10:30:30
Another task:after a1, 20h
`,
{}
);
});
it('should render a gantt diagram excluding saturday and sunday in YYYY-MM-DD HH:mm:ss format', () => {
imgSnapshotTest(
`
gantt
dateFormat YYYY-MM-DD HH:mm:ss
excludes weekends
weekend saturday
section Section
A task :a1, 2025-07-04 20:30:30, 2025-07-08 10:30:30
Another task:after a1, 20h
`,
{}
);
});
it('should render a gantt diagram excluding friday and saturday in YYYY-MM-DD HH:mm:ss format', () => {
imgSnapshotTest(
`
gantt
dateFormat YYYY-MM-DD HH:mm:ss
excludes weekends
weekend friday
section Section
A task :a1, 2025-07-04 20:30:30, 2025-07-08 10:30:30
Another task:after a1, 20h
`,
{}
);
});
it("should render when there's a semicolon in the title", () => { it("should render when there's a semicolon in the title", () => {
imgSnapshotTest( imgSnapshotTest(
` `
@@ -743,7 +671,7 @@ describe('Gantt diagram', () => {
title Gantt Digram title Gantt Digram
dateFormat YYYY-MM-DD dateFormat YYYY-MM-DD
section Section section Section
;A task with a semicolon :a1, 2014-01-01, 30d ;A task with a semiclon :a1, 2014-01-01, 30d
Another task :after a1 , 20d Another task :after a1 , 20d
section Another section Another
Task in sec :2014-01-12 , 12d Task in sec :2014-01-12 , 12d

Some files were not shown because too many files have changed in this diff Show More