GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-01-14 06:43:25 +08:00
Code Issues Projects Releases Wiki Activity

Merge branch 'release/8.13.6'

Browse Source
This commit is contained in:
Knut Sveidqvist 2021-12-17 07:51:59 +01:00
commit a349fd3aba
84 changed files with 2864 additions and 160480 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.commitlintrc.json Normal file
View File

@ -0,0 +1,5 @@
{
"extends": [
"@commitlint/config-conventional"
]
}

20
.eslintrc.json
View File

@ -13,8 +13,8 @@
},
"sourceType": "module"
},
"extends": ["eslint:recommended", "plugin:jsdoc/recommended", "plugin:prettier/recommended"],
"plugins": ["jest", "jsdoc", "prettier"],
"extends": ["eslint:recommended", "plugin:jsdoc/recommended", "plugin:markdown/recommended", "plugin:prettier/recommended"],
"plugins": ["html", "jest", "jsdoc", "prettier"],
"rules": {
"no-prototype-builtins": 0,
"no-unused-vars": 0,
@ -23,6 +23,16 @@
"jsdoc/check-line-alignment": 0,
"jsdoc/multiline-blocks": 0,
"jsdoc/newline-after-description": 0,
"jsdoc/tag-lines": 0
}
}
"jsdoc/tag-lines": 0,
"no-empty": ["error", { "allowEmptyCatch": true }]
},
"overrides": [
{
"files": "./**/*.html",
"rules": {
"no-undef": "off",
"jsdoc/require-jsdoc": "off"
}
}
]
}

16
.github/workflows/update-browserlist.yml vendored Normal file
View File

@ -0,0 +1,16 @@
name: Update Browserslist
on:
workflow_dispatch:
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- run: npx browserslist@latest --update-db
- name: Commit changes
uses: EndBug/add-and-commit@v7
with:
author_name: ${{ github.actor }}
author_email: ${{ github.actor }}@users.noreply.github.com
message: 'Update Browserslist'

7
.gitignore vendored
View File

@ -4,8 +4,7 @@ node_modules/
coverage/
.idea/
dist/*.js
dist/*.map
dist
yarn-error.log
.npmrc
@ -13,10 +12,6 @@ token
package-lock.json
dist/classTest.html
dist/sequenceTest.html
.vscode/
cypress/platform/current.html
cypress/platform/experimental.html

4
.husky/commit-msg Normal file
View File

@ -0,0 +1,4 @@
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
npx --no-install commitlint --edit $1

2
.husky/pre-commit Executable file → Normal file
View File

@ -1,4 +1,4 @@
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
yarn dlx lint-staged
yarn pre-commit

4
.lintstagedrc.json
View File

@ -1,5 +1,5 @@
{
"*": [
"*.{js,html,md}": [
"yarn lint:fix"
]
}
}

15
jison/loader.js → .webpack/loaders/jison.js
View File

@ -1,6 +1,19 @@
const { Generator } = require('jison');
const validate = require('schema-utils');
const schema = require('./parser-options-schema.json');
const schema = {
title: 'Jison Parser options',
type: 'object',
properties: {
'token-stack': {
type: 'boolean',
},
debug: {
type: 'boolean',
},
},
additionalProperties: false,
};
module.exports = function jisonLoader(source) {
const options = this.getOptions();

45
.webpack/webpack.config.babel.js Normal file
View File

@ -0,0 +1,45 @@
import { merge, mergeWithCustomize, customizeObject } from 'webpack-merge';
import nodeExternals from 'webpack-node-externals';
import baseConfig from './webpack.config.base';
export default (_env, args) => {
switch (args.mode) {
case 'development':
return [
baseConfig,
merge(baseConfig, {
externals: [nodeExternals()],
output: {
filename: '[name].core.js',
},
}),
];
case 'production':
return [
// umd
merge(baseConfig, {
output: {
filename: '[name].min.js',
},
}),
// esm
mergeWithCustomize({
customizeObject: customizeObject({
'output.library': 'replace',
}),
})(baseConfig, {
experiments: {
outputModule: true,
},
output: {
library: {
type: 'module',
},
filename: '[name].esm.min.mjs',
},
}),
];
default:
throw new Error('No matching configuration was found!');
}
};

54
.webpack/webpack.config.base.js Normal file
View File

@ -0,0 +1,54 @@
import path from 'path';
export const resolveRoot = (...relativePath) => path.resolve(__dirname, '..', ...relativePath);
export default {
amd: false, // https://github.com/lodash/lodash/issues/3052
target: 'web',
entry: {
mermaid: './src/mermaid.js',
},
resolve: {
extensions: ['.wasm', '.mjs', '.js', '.json', '.jison'],
fallback: {
fs: false, // jison generated code requires 'fs'
path: require.resolve('path-browserify'),
},
},
output: {
path: resolveRoot('./dist'),
filename: '[name].js',
library: {
name: 'mermaid',
type: 'umd',
export: 'default',
},
globalObject: 'typeof self !== "undefined" ? self : this',
},
module: {
rules: [
{
test: /\.js$/,
include: [resolveRoot('./src'), resolveRoot('./node_modules/dagre-d3-renderer/lib')],
use: {
loader: 'babel-loader',
},
},
{
// load scss to string
test: /\.scss$/,
use: ['css-to-string-loader', 'css-loader', 'sass-loader'],
},
{
test: /\.jison$/,
use: {
loader: path.resolve(__dirname, './loaders/jison.js'),
options: {
'token-stack': true,
},
},
},
],
},
devtool: 'source-map',
};

37
.webpack/webpack.config.e2e.babel.js Normal file
View File

@ -0,0 +1,37 @@
import baseConfig, { resolveRoot } from './webpack.config.base';
import { merge } from 'webpack-merge';
export default merge(baseConfig, {
mode: 'development',
entry: {
mermaid: './src/mermaid.js',
e2e: './cypress/platform/viewer.js',
'bundle-test': './cypress/platform/bundle-test.js',
},
output: {
globalObject: 'window',
},
devServer: {
compress: true,
port: 9000,
static: [
{ directory: resolveRoot('cypress', 'platform') },
{ directory: resolveRoot('dist') },
{ directory: resolveRoot('demos') },
],
},
externals: {
mermaid: 'mermaid',
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
},
},
],
},
});

3
Renfay.md
View File

@ -1,3 +0,0 @@
# Renfay project
A note system!

13
cypress/integration/rendering/flowchart-v2.spec.js
View File

@ -610,7 +610,7 @@ flowchart RL
imgSnapshotTest(
`flowchart TB
a{{"Lorem 'ipsum' dolor 'sit' amet, 'consectetur' adipiscing 'elit'."}}
--> b{{"Lorem #quot;ipsum#quot; dolor #quot;sit#quot; amet,#quot;consectetur#quot; adipiscing #quot;elit#quot;."}}
--> b{{"Lorem #quot;ipsum#quot; dolor #quot;sit#quot; amet,#quot;consectetur#quot; adipiscing #quot;elit#quot;."}}
`,
{ htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
);
@ -638,4 +638,15 @@ flowchart RL
{ htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
);
});
it('2388: handling default in the node name', () => {
imgSnapshotTest(
`
flowchart LR
default-index.js --> dot.template.js
index.js --> module-utl.js
`,
{ htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
);
});
});

25
cypress/integration/rendering/theme.spec.js
View File

@ -1,5 +1,30 @@
import { imgSnapshotTest } from '../../helpers/util.js';
describe('themeCSS balancing, it', () => {
it('should not allow unbalanced CSS definitions', () => {
imgSnapshotTest(
`
%%{init: { 'themeCSS': '} * { background: red }' } }%%
flowchart TD
a --> b
`,
{}
);
cy.get('svg');
});
it('should not allow unbalanced CSS definitions 2', () => {
imgSnapshotTest(
`
%%{init: { 'themeCSS': '\u007D * { background: red }' } }%%
flowchart TD
a2 --> b2
`,
{}
);
cy.get('svg');
});
});
describe('Pie Chart', () => {
// beforeEach(()=>{
// cy.clock((new Date('2014-06-09')).getTime());

12
cypress/platform/class.html
View File

@ -115,14 +115,14 @@
<script src="./mermaid.js"></script>
<script>
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
};
// console.error('Mermaid error: ', err);
};
mermaid.initialize({
theme: 'default',
// arrowMarkerAbsolute: true,
// themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
logLevel: 0,
flowchart: { curve: 'linear', "htmlLabels": true },
flowchart: { curve: 'linear', htmlLabels: true },
// gantt: { axisFormat: '%m/%d/%Y' },
sequence: { actorMargin: 50, showSequenceNumbers: true },
// sequenceDiagram: { actorMargin: 300 } // deprecated
@ -131,9 +131,11 @@
// fontFamily: '"arial", sans-serif',
// },
curve: 'linear',
securityLevel: 'loose'
securityLevel: 'loose',
});
function callback(){alert('It worked');}
function callback() {
alert('It worked');
}
</script>
</body>
</html>

40
cypress/platform/click_security_loose.html
View File

@ -130,39 +130,39 @@
<script src="./mermaid.js"></script>
<script>
function clickByFlow(elemName) {
const div = document.createElement('div')
div.className = 'created-by-click'
div.style = 'padding: 20px; background: green; color: white;'
div.innerText = 'Clicked By Flow'
const div = document.createElement('div');
div.className = 'created-by-click';
div.style = 'padding: 20px; background: green; color: white;';
div.innerText = 'Clicked By Flow';
document.getElementsByTagName('body')[0].appendChild(div)
document.getElementsByTagName('body')[0].appendChild(div);
}
function clickByFlowArg(argument) {
const div = document.createElement('div')
div.className = 'created-by-click-2'
div.style = 'padding: 20px; background: green; color: white;'
div.innerText = 'Clicked By Flow: ' + argument
const div = document.createElement('div');
div.className = 'created-by-click-2';
div.style = 'padding: 20px; background: green; color: white;';
div.innerText = 'Clicked By Flow: ' + argument;
document.getElementsByTagName('body')[0].appendChild(div)
document.getElementsByTagName('body')[0].appendChild(div);
}
function clickByGantt(arg1, arg2, arg3) {
const div = document.createElement('div')
div.className = 'created-by-gant-click'
div.style = 'padding: 20px; background: green; color: white;'
div.innerText = 'Clicked By Gant'
const div = document.createElement('div');
div.className = 'created-by-gant-click';
div.style = 'padding: 20px; background: green; color: white;';
div.innerText = 'Clicked By Gant';
if (arg1) div.innerText += ' ' + arg1;
if (arg2) div.innerText += ' ' + arg2;
if (arg3) div.innerText += ' ' + arg3;
document.getElementsByTagName('body')[0].appendChild(div)
document.getElementsByTagName('body')[0].appendChild(div);
}
function clickByClass(arg) {
const div = document.createElement('div')
div.className = 'created-by-class-click'
div.style = 'padding: 20px; background: purple; color: white;'
div.innerText = 'Clicked By Class' + (arg?arg:'')
const div = document.createElement('div');
div.className = 'created-by-class-click';
div.style = 'padding: 20px; background: purple; color: white;';
div.innerText = 'Clicked By Class' + (arg ? arg : '');
document.getElementsByTagName('body')[0].appendChild(div)
document.getElementsByTagName('body')[0].appendChild(div);
}
mermaid.initialize({ startOnLoad: true, securityLevel: 'loose', logLevel: 1 });
</script>

20
cypress/platform/click_security_other.html
View File

@ -62,20 +62,20 @@
<script src="./mermaid.js"></script>
<script>
function clickByFlow(elemName) {
const div = document.createElement('div')
div.className = 'created-by-click'
div.style = 'padding: 20px; background: green; color: white;'
div.innerText = 'Clicked By Flow'
const div = document.createElement('div');
div.className = 'created-by-click';
div.style = 'padding: 20px; background: green; color: white;';
div.innerText = 'Clicked By Flow';
document.getElementsByTagName('body')[0].appendChild(div)
document.getElementsByTagName('body')[0].appendChild(div);
}
function clickByGantt(elemName) {
const div = document.createElement('div')
div.className = 'created-by-gant-click'
div.style = 'padding: 20px; background: green; color: white;'
div.innerText = 'Clicked By Gant'
const div = document.createElement('div');
div.className = 'created-by-gant-click';
div.style = 'padding: 20px; background: green; color: white;';
div.innerText = 'Clicked By Gant';
document.getElementsByTagName('body')[0].appendChild(div)
document.getElementsByTagName('body')[0].appendChild(div);
}
mermaid.initialize({ startOnLoad: true, securityLevel: 'strct', logLevel: 1 });
</script>

20
cypress/platform/click_security_strict.html
View File

@ -64,23 +64,23 @@
<script src="./mermaid.js"></script>
<script>
function clickByFlow(elemName) {
const div = document.createElement('div')
div.className = 'created-by-click'
div.style = 'padding: 20px; background: green; color: white;'
div.innerText = 'Clicked By Flow'
const div = document.createElement('div');
div.className = 'created-by-click';
div.style = 'padding: 20px; background: green; color: white;';
div.innerText = 'Clicked By Flow';
document.getElementsByTagName('body')[0].appendChild(div)
document.getElementsByTagName('body')[0].appendChild(div);
}
function clickByGantt(arg1, arg2, arg3) {
const div = document.createElement('div')
div.className = 'created-by-gant-click'
div.style = 'padding: 20px; background: green; color: white;'
div.innerText = 'Clicked By Gant'
const div = document.createElement('div');
div.className = 'created-by-gant-click';
div.style = 'padding: 20px; background: green; color: white;';
div.innerText = 'Clicked By Gant';
if (arg1) div.innerText += ' ' + arg1;
if (arg2) div.innerText += ' ' + arg2;
if (arg3) div.innerText += ' ' + arg3;
document.getElementsByTagName('body')[0].appendChild(div)
document.getElementsByTagName('body')[0].appendChild(div);
}
mermaid.initialize({ startOnLoad: true, securityLevel: 'strict', logLevel: 1 });
</script>

39
cypress/platform/css1.html Normal file
View File

@ -0,0 +1,39 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Mermaid Quick Test Page</title>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
<style>
body {
font-family: 'trebuchet ms', verdana, arial;
}
</style>
</head>
<body>
<div class="mermaid2">
%%{init: { 'themeCSS': '} * { background: lightblue }' } }%%
flowchart TD
a --> b
</div>
<div class="mermaid">
%%{init:{"theme":"base", "themeVariables": {"primaryColor":"#411d4e", "titleColor":"white", "darkMode":true}}}%%
flowchart LR
subgraph A
a --> b
end
subgraph B
i -->f
end
A --> B
</div>
<script src="./mermaid.js"></script>
<script>
function showFullFirstSquad(elemName) {
console.log('show ' + elemName);
}
mermaid.initialize({ startOnLoad: true, securityLevel: 'loose', logLevel: 0 });
</script>
</body>
</html>

12
cypress/platform/current.html
View File

@ -155,23 +155,25 @@ _one --> b
<script src="./mermaid.js"></script>
<script>
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
};
// console.error('Mermaid error: ', err);
};
mermaid.initialize({
// theme: 'forest',
// themeVariables:{primaryColor: '#ff0000'},
// arrowMarkerAbsolute: true,
// themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
logLevel: 0,
flowchart: { curve: 'cardinal', "htmlLabels": true },
flowchart: { curve: 'cardinal', htmlLabels: true },
// gantt: { axisFormat: '%m/%d/%Y' },
sequence: { actorMargin: 50, showSequenceNumbers: true },
// sequenceDiagram: { actorMargin: 300 } // deprecated
fontFamily: '"arial", sans-serif',
curve: 'cardinal',
securityLevel: 'strict'
securityLevel: 'strict',
});
function callback(){alert('It worked');}
function callback() {
alert('It worked');
}
</script>
</body>
</html>

12
cypress/platform/current2.html
View File

@ -107,23 +107,25 @@ Note over Bob,Alice: Looks back
<script src="./mermaid.js"></script>
<script>
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
};
// console.error('Mermaid error: ', err);
};
mermaid.initialize({
// theme: 'forest',
// themeVariables:{primaryColor: '#ff0000'},
// arrowMarkerAbsolute: true,
// themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
logLevel: 0,
flowchart: { curve: 'cardinal', "htmlLabels": false },
flowchart: { curve: 'cardinal', htmlLabels: false },
// gantt: { axisFormat: '%m/%d/%Y' },
sequence: { actorMargin: 50, showSequenceNumbers: true },
// sequenceDiagram: { actorMargin: 300 } // deprecated
fontFamily: '"arial", sans-serif',
curve: 'cardinal',
securityLevel: 'strict'
securityLevel: 'strict',
});
function callback(){alert('It worked');}
function callback() {
alert('It worked');
}
</script>
</body>
</html>

2
cypress/platform/huge.html
View File

@ -29,7 +29,7 @@
// arrowMarkerAbsolute: true,
// themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
logLevel: 0,
flowchart: { curve: 'linear', "htmlLabels": false },
flowchart: { curve: 'linear', htmlLabels: false },
// gantt: { axisFormat: '%m/%d/%Y' },
sequence: { actorMargin: 50 },
// sequenceDiagram: { actorMargin: 300 } // deprecated

30
cypress/platform/interaction.html
View File

@ -90,31 +90,31 @@
<script src="./mermaid.js"></script>
<script>
function clickByFlow(elemName) {
const div = document.createElement('div')
div.className = 'created-by-click'
div.style = 'padding: 20px; background: green; color: white;'
div.innerText = 'Clicked By Flow'
const div = document.createElement('div');
div.className = 'created-by-click';
div.style = 'padding: 20px; background: green; color: white;';
div.innerText = 'Clicked By Flow';
document.getElementsByTagName('body')[0].appendChild(div)
document.getElementsByTagName('body')[0].appendChild(div);
}
function clickByGantt(arg1, arg2, arg3) {
const div = document.createElement('div')
div.className = 'created-by-gant-click'
div.style = 'padding: 20px; background: green; color: white;'
div.innerText = 'Clicked By Gant'
const div = document.createElement('div');
div.className = 'created-by-gant-click';
div.style = 'padding: 20px; background: green; color: white;';
div.innerText = 'Clicked By Gant';
if (arg1) div.innerText += ' ' + arg1;
if (arg2) div.innerText += ' ' + arg2;
if (arg3) div.innerText += ' ' + arg3;
document.getElementsByTagName('body')[0].appendChild(div)
document.getElementsByTagName('body')[0].appendChild(div);
}
function clickByClass() {
const div = document.createElement('div')
div.className = 'created-by-class-click'
div.style = 'padding: 20px; background: purple; color: white;'
div.innerText = 'Clicked By Class'
const div = document.createElement('div');
div.className = 'created-by-class-click';
div.style = 'padding: 20px; background: purple; color: white;';
div.innerText = 'Clicked By Class';
document.getElementsByTagName('body')[0].appendChild(div)
document.getElementsByTagName('body')[0].appendChild(div);
}
mermaid.initialize({ startOnLoad: true, securityLevel: 'loose', logLevel: 1 });
</script>

15
cypress/platform/knsv.html
View File

@ -38,32 +38,33 @@ stateDiagram-v2
<script src="./mermaid.js"></script>
<script>
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
};
// console.error('Mermaid error: ', err);
};
mermaid.initialize({
// theme: 'dark',
theme: 'forest',
arrowMarkerAbsolute: true,
// themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
logLevel: 2,
flowchart: { nodeSpacing: 10, curve: 'cardinal', htmlLabels: false },
// gantt: { axisFormat: '%m/%d/%Y' },
sequence: { actorFontFamily: 'courier',actorMargin: 50, showSequenceNumbers: false },
sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false },
// sequenceDiagram: { actorMargin: 300 } // deprecated
// fontFamily: '"times", sans-serif',
// fontFamily: 'courier',
state:{
state: {
nodeSpacing: 50,
rankSpacing: 50,
defaultRenderer: 'dagre-wrapper',
},
logLevel:0,
logLevel: 0,
fontSize: 18,
curve: 'cardinal',
securityLevel: 'strict',
// themeVariables: {relationLabelColor: 'red'}
});
function callback(){alert('It worked');}
function callback() {
alert('It worked');
}
</script>
</body>
</html>

40
cypress/platform/knsv2.html
View File

@ -46,8 +46,8 @@
<script src="./mermaid.js"></script>
<script>
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
};
// console.error('Mermaid error: ', err);
};
mermaid.initialize({
theme: 'forest',
arrowMarkerAbsolute: true,
@ -58,35 +58,39 @@
},
flowchart: {
// defaultRenderer: 'dagre-wrapper',
nodeSpacing: 10, curve: 'cardinal', htmlLabels: true
nodeSpacing: 10,
curve: 'cardinal',
htmlLabels: true,
},
htmlLabels: false,
// gantt: { axisFormat: '%m/%d/%Y' },
sequence: { actorFontFamily: 'courier',actorMargin: 50, showSequenceNumbers: false },
sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false },
// sequenceDiagram: { actorMargin: 300 } // deprecated
// fontFamily: '"times", sans-serif',
// fontFamily: 'courier',
fontSize: 18,
curve: 'basis',
securityLevel: 'strict',
startOnLoad: false
startOnLoad: false,
// themeVariables: {relationLabelColor: 'red'}
});
function callback(){alert('It worked');}
function callback() {
alert('It worked');
}
var diagram = "%%{init: {\"flowchart\": {\"htmlLabels\": \"false\"}} }%%\n";
diagram += "flowchart\n";
diagram += "A[\"<ifra";
diagram += "me srcdoc='<scrip";
diagram += "t src=http://localhost:9000/exploit.js>";
diagram += "</scr"
diagram += "ipt>'></iframe>\"]";
var diagram = '%%{init: {"flowchart": {"htmlLabels": "false"}} }%%\n';
diagram += 'flowchart\n';
diagram += 'A["<ifra';
diagram += "me srcdoc='<scrip";
diagram += 't src=http://localhost:9000/exploit.js>';
diagram += '</scr';
diagram += 'ipt>\'></iframe>"]';
console.log(diagram);
// document.querySelector('#diagram').innerHTML = diagram;
mermaid.render('diagram', diagram, (res) => {
document.querySelector('#res').innerHTML = res;
});
console.log(diagram);
// document.querySelector('#diagram').innerHTML = diagram;
mermaid.render('diagram', diagram, (res) => {
document.querySelector('#res').innerHTML = res;
});
</script>
</body>
</html>

10
cypress/platform/knsv3.html
View File

@ -185,8 +185,8 @@ style N stroke:#0000ff,fill:#ccccff,color:#0000ff
<script src="./mermaid.js"></script>
<script>
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
};
// console.error('Mermaid error: ', err);
};
mermaid.initialize({
theme: 'neutral',
arrowMarkerAbsolute: true,
@ -195,7 +195,7 @@ style N stroke:#0000ff,fill:#ccccff,color:#0000ff
flowchart: { nodeSpacing: 10, curve: 'cardinal', htmlLabels: true },
htmlLabels: true,
// gantt: { axisFormat: '%m/%d/%Y' },
sequence: { actorFontFamily: 'courier',actorMargin: 50, showSequenceNumbers: false },
sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false },
// sequenceDiagram: { actorMargin: 300 } // deprecated
// fontFamily: '"times", sans-serif',
// fontFamily: 'courier',
@ -204,7 +204,9 @@ style N stroke:#0000ff,fill:#ccccff,color:#0000ff
securityLevel: 'loose',
// themeVariables: {relationLabelColor: 'red'}
});
function callback(){alert('It worked');}
function callback() {
alert('It worked');
}
</script>
</body>
</html>

7
cypress/platform/regression/issue-1874.html
View File

@ -3,10 +3,9 @@
<script src="http://localhost:9000/mermaid.js"></script>
<script>
mermaid.initialize({
theme: 'base',
themeVariables: {
},
startOnLoad: true,
theme: 'base',
themeVariables: {},
startOnLoad: true,
});
</script>

17
cypress/platform/render-after-error.html
View File

@ -11,21 +11,16 @@
</div>
<script src="./mermaid.js"></script>
<script>
mermaid.init({ startOnLoad: false });
<script>mermaid.init({ startOnLoad: false });
mermaid.mermaidAPI.initialize();
try{
mermaid.mermaidAPI.render("graphDiv",
`>`);
} catch(e){}
try {
mermaid.mermaidAPI.render('graphDiv', `>`);
} catch (e) {}
mermaid.mermaidAPI.render("graphDiv",
`graph LR\n a --> b`, html => {
document.getElementById('graph').innerHTML=html;
mermaid.mermaidAPI.render('graphDiv', `graph LR\n a --> b`, (html) => {
document.getElementById('graph').innerHTML = html;
});
</script>
</body>

11
cypress/platform/rerender.html
View File

@ -11,21 +11,18 @@
</div>
<script src="./mermaid.js"></script>
<script>
mermaid.init({ startOnLoad: false });
<script>mermaid.init({ startOnLoad: false });
mermaid.mermaidAPI.initialize();
rerender('XMas');
function rerender(text) {
var graphText = `graph TD
A[${text}] -->|Get money| B(Go shopping)`
A[${text}] -->|Get money| B(Go shopping)`;
var graph = mermaid.mermaidAPI.render('id', graphText);
console.log('\x1b[35m%s\x1b[0m', '>> graph', graph)
document.getElementById('graph').innerHTML=graph;
console.log('\x1b[35m%s\x1b[0m', '>> graph', graph);
document.getElementById('graph').innerHTML = graph;
}
</script>
<button id="rerender" onclick="rerender('Saturday')">Rerender</button>

12
cypress/platform/showcase_base.html
View File

@ -267,23 +267,25 @@ requirementDiagram
<script src="./mermaid.js"></script>
<script>
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
};
// console.error('Mermaid error: ', err);
};
mermaid.initialize({
theme: 'base',
// themeVariables:
// arrowMarkerAbsolute: true,
// themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
logLevel: 0,
flowchart: { curve: 'cardinal', "htmlLabels": false },
flowchart: { curve: 'cardinal', htmlLabels: false },
// gantt: { axisFormat: '%m/%d/%Y' },
sequence: { actorMargin: 50, showSequenceNumbers: true },
// sequenceDiagram: { actorMargin: 300 } // deprecated
fontFamily: '"arial", sans-serif',
curve: 'cardinal',
securityLevel: 'strict'
securityLevel: 'strict',
});
function callback(){alert('It worked');}
function callback() {
alert('It worked');
}
</script>
</body>
</html>

21
cypress/platform/showcase_base_dark.html
View File

@ -262,15 +262,24 @@ requirementDiagram
<script src="./mermaid.js"></script>
<script>
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
};
// console.error('Mermaid error: ', err);
};
mermaid.initialize({
theme: 'base',
themeVariables: { primaryColor: '#9400D3', darkMode: true, background: '#222', textColor:'white', primaryTextColor: '#f4f4f4', nodeBkg: '#ff0000', mainBkg:'#0000ff', tertiaryColor:'#ffffcc' },
themeVariables: {
primaryColor: '#9400D3',
darkMode: true,
background: '#222',
textColor: 'white',
primaryTextColor: '#f4f4f4',
nodeBkg: '#ff0000',
mainBkg: '#0000ff',
tertiaryColor: '#ffffcc',
},
// arrowMarkerAbsolute: true,
// themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
logLevel: 0,
flowchart: { curve: 'cardinal', "htmlLabels": false },
flowchart: { curve: 'cardinal', htmlLabels: false },
// gantt: { axisFormat: '%m/%d/%Y' },
sequence: { actorMargin: 50, showSequenceNumbers: true },
// sequenceDiagram: { actorMargin: 300 } // deprecated
@ -278,7 +287,9 @@ requirementDiagram
curve: 'cardinal',
// securityLevel: 'strict'
});
function callback(){alert('It worked');}
function callback() {
alert('It worked');
}
</script>
</body>
</html>

12
cypress/platform/showcase_dark.html
View File

@ -259,22 +259,24 @@ requirementDiagram
<script src="./mermaid.js"></script>
<script>
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
};
// console.error('Mermaid error: ', err);
};
mermaid.initialize({
theme: 'dark',
// arrowMarkerAbsolute: true,
// themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
logLevel: 0,
flowchart: { curve: 'cardinal', "htmlLabels": true },
flowchart: { curve: 'cardinal', htmlLabels: true },
// gantt: { axisFormat: '%m/%d/%Y' },
sequence: { actorMargin: 50, showSequenceNumbers: true },
// sequenceDiagram: { actorMargin: 300 } // deprecated
fontFamily: '"arial", sans-serif',
curve: 'cardinal',
securityLevel: 'strict'
securityLevel: 'strict',
});
function callback(){alert('It worked');}
function callback() {
alert('It worked');
}
</script>
</body>
</html>

12
cypress/platform/showcase_default.html
View File

@ -254,22 +254,24 @@ requirementDiagram
<script src="./mermaid.js"></script>
<script>
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
};
// console.error('Mermaid error: ', err);
};
mermaid.initialize({
// theme: 'dark',
// arrowMarkerAbsolute: true,
// themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
logLevel: 0,
flowchart: { curve: 'cardinal', "htmlLabels": false },
flowchart: { curve: 'cardinal', htmlLabels: false },
// gantt: { axisFormat: '%m/%d/%Y' },
sequence: { actorMargin: 50, showSequenceNumbers: true },
// sequenceDiagram: { actorMargin: 300 } // deprecated
fontFamily: '"arial", sans-serif',
curve: 'cardinal',
securityLevel: 'strict'
securityLevel: 'strict',
});
function callback(){alert('It worked');}
function callback() {
alert('It worked');
}
</script>
</body>
</html>

12
cypress/platform/showcase_forest.html
View File

@ -258,22 +258,24 @@ requirementDiagram
<script src="./mermaid.js"></script>
<script>
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
};
// console.error('Mermaid error: ', err);
};
mermaid.initialize({
theme: 'forest',
// arrowMarkerAbsolute: true,
// themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
logLevel: 0,
flowchart: { curve: 'cardinal', "htmlLabels": false },
flowchart: { curve: 'cardinal', htmlLabels: false },
// gantt: { axisFormat: '%m/%d/%Y' },
sequence: { actorMargin: 50, showSequenceNumbers: true },
// sequenceDiagram: { actorMargin: 300 } // deprecated
fontFamily: '"arial", sans-serif',
curve: 'cardinal',
securityLevel: 'strict'
securityLevel: 'strict',
});
function callback(){alert('It worked');}
function callback() {
alert('It worked');
}
</script>
</body>
</html>

12
cypress/platform/showcase_neutral.html
View File

@ -257,22 +257,24 @@ requirementDiagram
<script src="./mermaid.js"></script>
<script>
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
};
// console.error('Mermaid error: ', err);
};
mermaid.initialize({
theme: 'neutral',
// arrowMarkerAbsolute: true,
// themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
logLevel: 0,
flowchart: { curve: 'cardinal', "htmlLabels": false },
flowchart: { curve: 'cardinal', htmlLabels: false },
// gantt: { axisFormat: '%m/%d/%Y' },
sequence: { actorMargin: 50, showSequenceNumbers: true },
// sequenceDiagram: { actorMargin: 300 } // deprecated
fontFamily: '"arial", sans-serif',
curve: 'cardinal',
securityLevel: 'strict'
securityLevel: 'strict',
});
function callback(){alert('It worked');}
function callback() {
alert('It worked');
}
</script>
</body>
</html>

6
cypress/platform/subgraph.html
View File

@ -37,9 +37,9 @@
<script src="./mermaid.js"></script>
<script>
function showFullFirstSquad(elemName) {
console.log('show ' + elemName);
}
mermaid.initialize({ startOnLoad: true, securityLevel: 'loose', logLevel: 1 });
console.log('show ' + elemName);
}
mermaid.initialize({ startOnLoad: true, securityLevel: 'loose', logLevel: 1 });
</script>
</body>
</html>

10
cypress/platform/theme-directives.html
View File

@ -120,8 +120,8 @@
<script src="./mermaid.js"></script>
<script>
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
};
// console.error('Mermaid error: ', err);
};
mermaid.initialize({
// theme: 'dark',
// theme: 'dark',
@ -129,7 +129,7 @@
// themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
logLevel: 0,
// flowchart: { useMaxWidth: true },
graph: { curve: 'cardinal', "htmlLabels": false },
graph: { curve: 'cardinal', htmlLabels: false },
// gantt: { axisFormat: '%m/%d/%Y' },
sequence: { actorMargin: 50, showSequenceNumbers: true },
// sequenceDiagram: { actorMargin: 300 } // deprecated
@ -137,7 +137,9 @@
curve: 'cardinal',
securityLevel: 'strict',
});
function callback(){alert('It worked');}
function callback() {
alert('It worked');
}
</script>
</body>
</html>

6
cypress/platform/vertices.html
View File

@ -29,9 +29,9 @@
<script src="./mermaid.js"></script>
<script>
function showFullFirstSquad(elemName) {
console.log('show ' + elemName);
}
mermaid.initialize({ startOnLoad: true, securityLevel: 'loose', logLevel: 1 });
console.log('show ' + elemName);
}
mermaid.initialize({ startOnLoad: true, securityLevel: 'loose', logLevel: 1 });
</script>
</body>
</html>

10
cypress/platform/xss.html
View File

@ -23,11 +23,11 @@
}
</style>
<script>
function xssAttack(){
const div = document.createElement('div')
div.id = 'the-malware'
div.className = 'malware'
div.innerHTML = 'XSS Succeeded'
function xssAttack() {
const div = document.createElement('div');
div.id = 'the-malware';
div.className = 'malware';
div.innerHTML = 'XSS Succeeded';
document.getElementsByTagName('body')[0].appendChild(div);
// const el = document.querySelector('.mermaid');
// el.parentNode.removeChild(el);

53
cypress/platform/xss10.html
View File

@ -46,8 +46,8 @@
<script src="./mermaid.js"></script>
<script>
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
};
// console.error('Mermaid error: ', err);
};
mermaid.initialize({
theme: 'forest',
arrowMarkerAbsolute: true,
@ -58,11 +58,13 @@
},
flowchart: {
// defaultRenderer: 'dagre-wrapper',
nodeSpacing: 10, curve: 'cardinal', htmlLabels: true
nodeSpacing: 10,
curve: 'cardinal',
htmlLabels: true,
},
htmlLabels: true,
// gantt: { axisFormat: '%m/%d/%Y' },
sequence: { actorFontFamily: 'courier',actorMargin: 50, showSequenceNumbers: false },
sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false },
// sequenceDiagram: { actorMargin: 300 } // deprecated
// fontFamily: '"times", sans-serif',
// fontFamily: 'courier',
@ -70,35 +72,36 @@
curve: 'basis',
securityLevel: 'antiscript',
startOnLoad: false,
secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize']
secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize'],
// themeVariables: {relationLabelColor: 'red'}
});
function callback(){alert('It worked');}
function xssAttack(){
const div = document.createElement('div')
div.id = 'the-malware'
div.className = 'malware'
div.innerHTML = 'XSS Succeeded'
function callback() {
alert('It worked');
}
function xssAttack() {
const div = document.createElement('div');
div.id = 'the-malware';
div.className = 'malware';
div.innerHTML = 'XSS Succeeded';
document.getElementsByTagName('body')[0].appendChild(div);
throw new Error('XSS Succeded');
}
var diagram = "classDiagram\n"
diagram += "class Square~<img/src";
var diagram = 'classDiagram\n';
diagram += 'class Square~<img/src';
diagram += "='1'/onerror=xssAttack()>~{\n";
diagram += "id A\n";
diagram += "}";
diagram += 'id A\n';
diagram += '}';
// var diagram = "stateDiagram-v2\n";
// diagram += "<img/src='1'/onerror"
// diagram += "=xssAttack()> --> B";
console.log(diagram);
// document.querySelector('#diagram').innerHTML = diagram;
mermaid.render('diagram', diagram, (res) => {
console.log(res);
document.querySelector('#res').innerHTML = res;
});
// var diagram = "stateDiagram-v2\n";
// diagram += "<img/src='1'/onerror"
// diagram += "=xssAttack()> --> B";
console.log(diagram);
// document.querySelector('#diagram').innerHTML = diagram;
mermaid.render('diagram', diagram, (res) => {
console.log(res);
document.querySelector('#res').innerHTML = res;
});
</script>
</body>
</html>

49
cypress/platform/xss11.html
View File

@ -46,8 +46,8 @@
<script src="./mermaid.js"></script>
<script>
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
};
// console.error('Mermaid error: ', err);
};
mermaid.initialize({
theme: 'forest',
arrowMarkerAbsolute: true,
@ -58,11 +58,13 @@
},
flowchart: {
// defaultRenderer: 'dagre-wrapper',
nodeSpacing: 10, curve: 'cardinal', htmlLabels: true
nodeSpacing: 10,
curve: 'cardinal',
htmlLabels: true,
},
htmlLabels: true,
// gantt: { axisFormat: '%m/%d/%Y' },
sequence: { actorFontFamily: 'courier',actorMargin: 50, showSequenceNumbers: false },
sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false },
// sequenceDiagram: { actorMargin: 300 } // deprecated
// fontFamily: '"times", sans-serif',
// fontFamily: 'courier',
@ -70,33 +72,34 @@
curve: 'basis',
securityLevel: 'antiscript',
startOnLoad: false,
secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize']
secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize'],
// themeVariables: {relationLabelColor: 'red'}
});
function callback(){alert('It worked');}
function xssAttack(){
const div = document.createElement('div')
div.id = 'the-malware'
div.className = 'malware'
div.innerHTML = 'XSS Succeeded'
function callback() {
alert('It worked');
}
function xssAttack() {
const div = document.createElement('div');
div.id = 'the-malware';
div.className = 'malware';
div.innerHTML = 'XSS Succeeded';
document.getElementsByTagName('body')[0].appendChild(div);
throw new Error('XSS Succeded');
}
var diagram = "stateDiagram-v2\n"
diagram += "s2 : This is a state description<img/src";
var diagram = 'stateDiagram-v2\n';
diagram += 's2 : This is a state description<img/src';
diagram += "='1'/onerror=xssAttack()>";
// var diagram = "stateDiagram-v2\n";
// diagram += "<img/src='1'/onerror"
// diagram += "=xssAttack()> --> B";
console.log(diagram);
// document.querySelector('#diagram').innerHTML = diagram;
mermaid.render('diagram', diagram, (res) => {
console.log(res);
document.querySelector('#res').innerHTML = res;
});
// var diagram = "stateDiagram-v2\n";
// diagram += "<img/src='1'/onerror"
// diagram += "=xssAttack()> --> B";
console.log(diagram);
// document.querySelector('#diagram').innerHTML = diagram;
mermaid.render('diagram', diagram, (res) => {
console.log(res);
document.querySelector('#res').innerHTML = res;
});
</script>
</body>
</html>

49
cypress/platform/xss12.html
View File

@ -46,8 +46,8 @@
<script src="./mermaid.js"></script>
<script>
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
};
// console.error('Mermaid error: ', err);
};
mermaid.initialize({
theme: 'forest',
arrowMarkerAbsolute: true,
@ -58,11 +58,13 @@
},
flowchart: {
// defaultRenderer: 'dagre-wrapper',
nodeSpacing: 10, curve: 'cardinal', htmlLabels: true
nodeSpacing: 10,
curve: 'cardinal',
htmlLabels: true,
},
htmlLabels: true,
// gantt: { axisFormat: '%m/%d/%Y' },
sequence: { actorFontFamily: 'courier',actorMargin: 50, showSequenceNumbers: false },
sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false },
// sequenceDiagram: { actorMargin: 300 } // deprecated
// fontFamily: '"times", sans-serif',
// fontFamily: 'courier',
@ -70,33 +72,34 @@
curve: 'basis',
securityLevel: 'antiscript',
startOnLoad: false,
secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize']
secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize'],
// themeVariables: {relationLabelColor: 'red'}
});
function callback(){alert('It worked');}
function xssAttack(){
const div = document.createElement('div')
div.id = 'the-malware'
div.className = 'malware'
div.innerHTML = 'XSS Succeeded'
function callback() {
alert('It worked');
}
function xssAttack() {
const div = document.createElement('div');
div.id = 'the-malware';
div.className = 'malware';
div.innerHTML = 'XSS Succeeded';
document.getElementsByTagName('body')[0].appendChild(div);
throw new Error('XSS Succeded');
}
var diagram = "stateDiagram-v2\n"
diagram += "s2 : A<img/src";
var diagram = 'stateDiagram-v2\n';
diagram += 's2 : A<img/src';
diagram += "='1'/onerror=xssAttack()>";
// var diagram = "stateDiagram-v2\n";
// diagram += "<img/src='1'/onerror"
// diagram += "=xssAttack()> --> B";
console.log(diagram);
// document.querySelector('#diagram').innerHTML = diagram;
mermaid.render('diagram', diagram, (res) => {
console.log(res);
document.querySelector('#res').innerHTML = res;
});
// var diagram = "stateDiagram-v2\n";
// diagram += "<img/src='1'/onerror"
// diagram += "=xssAttack()> --> B";
console.log(diagram);
// document.querySelector('#diagram').innerHTML = diagram;
mermaid.render('diagram', diagram, (res) => {
console.log(res);
document.querySelector('#res').innerHTML = res;
});
</script>
</body>
</html>

49
cypress/platform/xss13.html
View File

@ -46,8 +46,8 @@
<script src="./mermaid.js"></script>
<script>
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
};
// console.error('Mermaid error: ', err);
};
mermaid.initialize({
theme: 'forest',
arrowMarkerAbsolute: true,
@ -58,11 +58,13 @@
},
flowchart: {
// defaultRenderer: 'dagre-wrapper',
nodeSpacing: 10, curve: 'cardinal', htmlLabels: true
nodeSpacing: 10,
curve: 'cardinal',
htmlLabels: true,
},
htmlLabels: true,
// gantt: { axisFormat: '%m/%d/%Y' },
sequence: { actorFontFamily: 'courier',actorMargin: 50, showSequenceNumbers: false },
sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false },
// sequenceDiagram: { actorMargin: 300 } // deprecated
// fontFamily: '"times", sans-serif',
// fontFamily: 'courier',
@ -70,33 +72,34 @@
curve: 'basis',
securityLevel: 'antiscript',
startOnLoad: false,
secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize']
secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize'],
// themeVariables: {relationLabelColor: 'red'}
});
function callback(){alert('It worked');}
function xssAttack(){
const div = document.createElement('div')
div.id = 'the-malware'
div.className = 'malware'
div.innerHTML = 'XSS Succeeded'
function callback() {
alert('It worked');
}
function xssAttack() {
const div = document.createElement('div');
div.id = 'the-malware';
div.className = 'malware';
div.innerHTML = 'XSS Succeeded';
document.getElementsByTagName('body')[0].appendChild(div);
throw new Error('XSS Succeded');
}
var diagram = "stateDiagram-v2\n"
diagram += "if_state --> False: if n < 0<img/src";
var diagram = 'stateDiagram-v2\n';
diagram += 'if_state --> False: if n < 0<img/src';
diagram += "='1'/onerror=xssAttack()>";
// var diagram = "stateDiagram-v2\n";
// diagram += "<img/src='1'/onerror"
// diagram += "=xssAttack()> --> B";
console.log(diagram);
// document.querySelector('#diagram').innerHTML = diagram;
mermaid.render('diagram', diagram, (res) => {
console.log(res);
document.querySelector('#res').innerHTML = res;
});
// var diagram = "stateDiagram-v2\n";
// diagram += "<img/src='1'/onerror"
// diagram += "=xssAttack()> --> B";
console.log(diagram);
// document.querySelector('#diagram').innerHTML = diagram;
mermaid.render('diagram', diagram, (res) => {
console.log(res);
document.querySelector('#res').innerHTML = res;
});
</script>
</body>
</html>

50
cypress/platform/xss14.html
View File

@ -46,8 +46,8 @@
<script src="./mermaid.js"></script>
<script>
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
};
// console.error('Mermaid error: ', err);
};
mermaid.initialize({
theme: 'forest',
arrowMarkerAbsolute: true,
@ -58,11 +58,13 @@
},
flowchart: {
// defaultRenderer: 'dagre-wrapper',
nodeSpacing: 10, curve: 'cardinal', htmlLabels: true
nodeSpacing: 10,
curve: 'cardinal',
htmlLabels: true,
},
htmlLabels: true,
// gantt: { axisFormat: '%m/%d/%Y' },
sequence: { actorFontFamily: 'courier',actorMargin: 50, showSequenceNumbers: false },
sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false },
// sequenceDiagram: { actorMargin: 300 } // deprecated
// fontFamily: '"times", sans-serif',
// fontFamily: 'courier',
@ -70,34 +72,36 @@
curve: 'basis',
securityLevel: 'antiscript',
startOnLoad: false,
secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize']
secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize'],
// themeVariables: {relationLabelColor: 'red'}
});
function callback(){alert('It worked');}
function xssAttack(){
const div = document.createElement('div')
div.id = 'the-malware'
div.className = 'malware'
div.innerHTML = 'XSS Succeeded'
function callback() {
alert('It worked');
}
function xssAttack() {
const div = document.createElement('div');
div.id = 'the-malware';
div.className = 'malware';
div.innerHTML = 'XSS Succeeded';
document.getElementsByTagName('body')[0].appendChild(div);
throw new Error('XSS Succeded');
}
var diagram = "classDiagram\n"
diagram += "classA <-- classB : <ifr";
var diagram = 'classDiagram\n';
diagram += 'classA <-- classB : <ifr';
diagram += "ame/srcdoc='<scr";
diagram += "ipt>parent.xssAttack(`XSS`)</";
diagram += 'ipt>parent.xssAttack(`XSS`)</';
diagram += "script>'>";
// var diagram = "stateDiagram-v2\n";
// diagram += "<img/src='1'/onerror"
// diagram += "=xssAttack()> --> B";
console.log(diagram);
// document.querySelector('#diagram').innerHTML = diagram;
mermaid.render('diagram', diagram, (res) => {
console.log(res);
document.querySelector('#res').innerHTML = res;
});
// var diagram = "stateDiagram-v2\n";
// diagram += "<img/src='1'/onerror"
// diagram += "=xssAttack()> --> B";
console.log(diagram);
// document.querySelector('#diagram').innerHTML = diagram;
mermaid.render('diagram', diagram, (res) => {
console.log(res);
document.querySelector('#res').innerHTML = res;
});
</script>
</body>
</html>

14
cypress/platform/xss2.html
View File

@ -22,11 +22,11 @@
}
</style>
<script>
function xssAttack(){
const div = document.createElement('div')
div.id = 'the-malware'
div.className = 'malware'
div.innerHTML = 'XSS Succeeded'
function xssAttack() {
const div = document.createElement('div');
div.id = 'the-malware';
div.className = 'malware';
div.innerHTML = 'XSS Succeeded';
document.getElementsByTagName('body')[0].appendChild(div);
throw new Error('XSS Succeded');
}
@ -62,11 +62,11 @@
var handler = setInterval(() => {
cnt++;
a = {};
if(typeof a.polluted !== 'undefined') {
if (typeof a.polluted !== 'undefined') {
clearInterval(handler);
xssAttack();
}
if(cnt>20) {
if (cnt > 20) {
clearInterval(handler);
}
}, 100);

14
cypress/platform/xss3.html
View File

@ -22,11 +22,11 @@
}
</style>
<script>
function xssAttack(){
const div = document.createElement('div')
div.id = 'the-malware'
div.className = 'malware'
div.innerHTML = 'XSS Succeeded'
function xssAttack() {
const div = document.createElement('div');
div.id = 'the-malware';
div.className = 'malware';
div.innerHTML = 'XSS Succeeded';
document.getElementsByTagName('body')[0].appendChild(div);
throw new Error('XSS Succeded');
}
@ -49,11 +49,11 @@
var handler = setInterval(() => {
cnt++;
a = {};
if(typeof a.polluted !== 'undefined') {
if (typeof a.polluted !== 'undefined') {
clearInterval(handler);
xssAttack();
}
if(cnt>20) {
if (cnt > 20) {
clearInterval(handler);
}
}, 100);

40
cypress/platform/xss4.html
View File

@ -46,8 +46,8 @@
<script src="./mermaid.js"></script>
<script>
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
};
// console.error('Mermaid error: ', err);
};
mermaid.initialize({
theme: 'forest',
arrowMarkerAbsolute: true,
@ -58,11 +58,13 @@
},
flowchart: {
// defaultRenderer: 'dagre-wrapper',
nodeSpacing: 10, curve: 'cardinal', htmlLabels: true
nodeSpacing: 10,
curve: 'cardinal',
htmlLabels: true,
},
htmlLabels: false,
// gantt: { axisFormat: '%m/%d/%Y' },
sequence: { actorFontFamily: 'courier',actorMargin: 50, showSequenceNumbers: false },
sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false },
// sequenceDiagram: { actorMargin: 300 } // deprecated
// fontFamily: '"times", sans-serif',
// fontFamily: 'courier',
@ -70,24 +72,26 @@
curve: 'basis',
securityLevel: 'strict',
startOnLoad: false,
secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize']
secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize'],
// themeVariables: {relationLabelColor: 'red'}
});
function callback(){alert('It worked');}
function callback() {
alert('It worked');
}
var diagram = "%%{init: {\"flowchart\": {\"htmlLabels\": \"true\"}} }%%\n";
diagram += "flowchart\n";
diagram += "A[\"<ifra";
diagram += "me srcdoc='<scrip";
diagram += "t src=http://localhost:9000/exploit.js>";
diagram += "</scr"
diagram += "ipt>'></iframe>\"]";
var diagram = '%%{init: {"flowchart": {"htmlLabels": "true"}} }%%\n';
diagram += 'flowchart\n';
diagram += 'A["<ifra';
diagram += "me srcdoc='<scrip";
diagram += 't src=http://localhost:9000/exploit.js>';
diagram += '</scr';
diagram += 'ipt>\'></iframe>"]';
console.log(diagram);
// document.querySelector('#diagram').innerHTML = diagram;
mermaid.render('diagram', diagram, (res) => {
document.querySelector('#res').innerHTML = res;
});
console.log(diagram);
// document.querySelector('#diagram').innerHTML = diagram;
mermaid.render('diagram', diagram, (res) => {
document.querySelector('#res').innerHTML = res;
});
</script>
</body>
</html>

46
cypress/platform/xss5.html
View File

@ -46,8 +46,8 @@
<script src="./mermaid.js"></script>
<script>
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
};
// console.error('Mermaid error: ', err);
};
mermaid.initialize({
theme: 'forest',
arrowMarkerAbsolute: true,
@ -58,11 +58,13 @@
},
flowchart: {
// defaultRenderer: 'dagre-wrapper',
nodeSpacing: 10, curve: 'cardinal', htmlLabels: true
nodeSpacing: 10,
curve: 'cardinal',
htmlLabels: true,
},
htmlLabels: true,
// gantt: { axisFormat: '%m/%d/%Y' },
sequence: { actorFontFamily: 'courier',actorMargin: 50, showSequenceNumbers: false },
sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false },
// sequenceDiagram: { actorMargin: 300 } // deprecated
// fontFamily: '"times", sans-serif',
// fontFamily: 'courier',
@ -70,29 +72,31 @@
curve: 'basis',
securityLevel: 'antiscript',
startOnLoad: false,
secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize']
secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize'],
// themeVariables: {relationLabelColor: 'red'}
});
function callback(){alert('It worked');}
function xssAttack(){
const div = document.createElement('div')
div.id = 'the-malware'
div.className = 'malware'
div.innerHTML = 'XSS Succeeded'
function callback() {
alert('It worked');
}
function xssAttack() {
const div = document.createElement('div');
div.id = 'the-malware';
div.className = 'malware';
div.innerHTML = 'XSS Succeeded';
document.getElementsByTagName('body')[0].appendChild(div);
throw new Error('XSS Succeded');
}
var diagram = "graph LR\n";
diagram += "B-->D\(\"<img onerror=location=\`java";
// diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n";
diagram += "script\x3a;xssAttack\u0028\u0029\` src=x>\"\);\n";
var diagram = 'graph LR\n';
diagram += 'B-->D("<img onerror=location=`java';
// diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n";
diagram += 'script\x3a;xssAttack\u0028\u0029` src=x>");\n';
console.log(diagram);
// document.querySelector('#diagram').innerHTML = diagram;
mermaid.render('diagram', diagram, (res) => {
console.log(res);
document.querySelector('#res').innerHTML = res;
});
console.log(diagram);
// document.querySelector('#diagram').innerHTML = diagram;
mermaid.render('diagram', diagram, (res) => {
console.log(res);
document.querySelector('#res').innerHTML = res;
});
</script>
</body>
</html>

44
cypress/platform/xss6.html
View File

@ -46,8 +46,8 @@
<script src="./mermaid.js"></script>
<script>
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
};
// console.error('Mermaid error: ', err);
};
mermaid.initialize({
theme: 'forest',
arrowMarkerAbsolute: true,
@ -58,11 +58,13 @@
},
flowchart: {
// defaultRenderer: 'dagre-wrapper',
nodeSpacing: 10, curve: 'cardinal', htmlLabels: true
nodeSpacing: 10,
curve: 'cardinal',
htmlLabels: true,
},
htmlLabels: true,
// gantt: { axisFormat: '%m/%d/%Y' },
sequence: { actorFontFamily: 'courier',actorMargin: 50, showSequenceNumbers: false },
sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false },
// sequenceDiagram: { actorMargin: 300 } // deprecated
// fontFamily: '"times", sans-serif',
// fontFamily: 'courier',
@ -70,27 +72,29 @@
curve: 'basis',
securityLevel: 'antiscript',
startOnLoad: false,
secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize']
secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize'],
// themeVariables: {relationLabelColor: 'red'}
});
function callback(){alert('It worked');}
function xssAttack(){
const div = document.createElement('div')
div.id = 'the-malware'
div.className = 'malware'
div.innerHTML = 'XSS Succeeded'
function callback() {
alert('It worked');
}
function xssAttack() {
const div = document.createElement('div');
div.id = 'the-malware';
div.className = 'malware';
div.innerHTML = 'XSS Succeeded';
document.getElementsByTagName('body')[0].appendChild(div);
throw new Error('XSS Succeded');
}
var diagram = "graph LR\n";
diagram += "A(<img/src/onerror=xssAttack`1`>)";
// diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n";
console.log(diagram);
// document.querySelector('#diagram').innerHTML = diagram;
mermaid.render('diagram', diagram, (res) => {
console.log(res);
document.querySelector('#res').innerHTML = res;
});
var diagram = 'graph LR\n';
diagram += 'A(<img/src/onerror=xssAttack`1`>)';
// diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n";
console.log(diagram);
// document.querySelector('#diagram').innerHTML = diagram;
mermaid.render('diagram', diagram, (res) => {
console.log(res);
document.querySelector('#res').innerHTML = res;
});
</script>
</body>
</html>

48
cypress/platform/xss7.html
View File

@ -46,8 +46,8 @@
<script src="./mermaid.js"></script>
<script>
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
};
// console.error('Mermaid error: ', err);
};
mermaid.initialize({
theme: 'forest',
arrowMarkerAbsolute: true,
@ -58,11 +58,13 @@
},
flowchart: {
// defaultRenderer: 'dagre-wrapper',
nodeSpacing: 10, curve: 'cardinal', htmlLabels: true
nodeSpacing: 10,
curve: 'cardinal',
htmlLabels: true,
},
htmlLabels: true,
// gantt: { axisFormat: '%m/%d/%Y' },
sequence: { actorFontFamily: 'courier',actorMargin: 50, showSequenceNumbers: false },
sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false },
// sequenceDiagram: { actorMargin: 300 } // deprecated
// fontFamily: '"times", sans-serif',
// fontFamily: 'courier',
@ -70,29 +72,31 @@
curve: 'basis',
securityLevel: 'antiscript',
startOnLoad: false,
secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize']
secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize'],
// themeVariables: {relationLabelColor: 'red'}
});
function callback(){alert('It worked');}
function xssAttack(){
const div = document.createElement('div')
div.id = 'the-malware'
div.className = 'malware'
div.innerHTML = 'XSS Succeeded'
function callback() {
alert('It worked');
}
function xssAttack() {
const div = document.createElement('div');
div.id = 'the-malware';
div.className = 'malware';
div.innerHTML = 'XSS Succeeded';
document.getElementsByTagName('body')[0].appendChild(div);
throw new Error('XSS Succeded');
}
var diagram = "graph LR\n";
diagram += " B(<a href='<";
diagram += "script></";
diagram += "script>Javascript:xssAttack`1`'>Click)";
// diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n";
console.log(diagram);
// document.querySelector('#diagram').innerHTML = diagram;
mermaid.render('diagram', diagram, (res) => {
console.log(res);
document.querySelector('#res').innerHTML = res;
});
var diagram = 'graph LR\n';
diagram += " B(<a href='<";
diagram += 'script></';
diagram += "script>Javascript:xssAttack`1`'>Click)";
// diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n";
console.log(diagram);
// document.querySelector('#diagram').innerHTML = diagram;
mermaid.render('diagram', diagram, (res) => {
console.log(res);
document.querySelector('#res').innerHTML = res;
});
</script>
</body>
</html>

45
cypress/platform/xss8.html
View File

@ -46,8 +46,8 @@
<script src="./mermaid.js"></script>
<script>
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
};
// console.error('Mermaid error: ', err);
};
mermaid.initialize({
theme: 'forest',
arrowMarkerAbsolute: true,
@ -58,11 +58,13 @@
},
flowchart: {
// defaultRenderer: 'dagre-wrapper',
nodeSpacing: 10, curve: 'cardinal', htmlLabels: true
nodeSpacing: 10,
curve: 'cardinal',
htmlLabels: true,
},
htmlLabels: true,
// gantt: { axisFormat: '%m/%d/%Y' },
sequence: { actorFontFamily: 'courier',actorMargin: 50, showSequenceNumbers: false },
sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false },
// sequenceDiagram: { actorMargin: 300 } // deprecated
// fontFamily: '"times", sans-serif',
// fontFamily: 'courier',
@ -70,29 +72,30 @@
curve: 'basis',
securityLevel: 'antiscript',
startOnLoad: false,
secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize']
secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize'],
// themeVariables: {relationLabelColor: 'red'}
});
function callback(){alert('It worked');}
function xssAttack(){
const div = document.createElement('div')
div.id = 'the-malware'
div.className = 'malware'
div.innerHTML = 'XSS Succeeded'
function callback() {
alert('It worked');
}
function xssAttack() {
const div = document.createElement('div');
div.id = 'the-malware';
div.className = 'malware';
div.innerHTML = 'XSS Succeeded';
document.getElementsByTagName('body')[0].appendChild(div);
throw new Error('XSS Succeded');
}
var diagram = "stateDiagram-v2\n";
diagram += "<img/src='1'/onerror=xssAttack()> --> B";
// diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n";
console.log(diagram);
// document.querySelector('#diagram').innerHTML = diagram;
mermaid.render('diagram', diagram, (res) => {
console.log(res);
document.querySelector('#res').innerHTML = res;
});
var diagram = 'stateDiagram-v2\n';
diagram += "<img/src='1'/onerror=xssAttack()> --> B";
// diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n";
console.log(diagram);
// document.querySelector('#diagram').innerHTML = diagram;
mermaid.render('diagram', diagram, (res) => {
console.log(res);
document.querySelector('#res').innerHTML = res;
});
</script>
</body>
</html>

45
cypress/platform/xss9.html
View File

@ -46,8 +46,8 @@
<script src="./mermaid.js"></script>
<script>
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
};
// console.error('Mermaid error: ', err);
};
mermaid.initialize({
theme: 'forest',
arrowMarkerAbsolute: true,
@ -58,11 +58,13 @@
},
flowchart: {
// defaultRenderer: 'dagre-wrapper',
nodeSpacing: 10, curve: 'cardinal', htmlLabels: true
nodeSpacing: 10,
curve: 'cardinal',
htmlLabels: true,
},
htmlLabels: true,
// gantt: { axisFormat: '%m/%d/%Y' },
sequence: { actorFontFamily: 'courier',actorMargin: 50, showSequenceNumbers: false },
sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false },
// sequenceDiagram: { actorMargin: 300 } // deprecated
// fontFamily: '"times", sans-serif',
// fontFamily: 'courier',
@ -70,29 +72,30 @@
curve: 'basis',
securityLevel: 'antiscript',
startOnLoad: false,
secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize']
secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize'],
// themeVariables: {relationLabelColor: 'red'}
});
function callback(){alert('It worked');}
function xssAttack(){
const div = document.createElement('div')
div.id = 'the-malware'
div.className = 'malware'
div.innerHTML = 'XSS Succeeded'
function callback() {
alert('It worked');
}
function xssAttack() {
const div = document.createElement('div');
div.id = 'the-malware';
div.className = 'malware';
div.innerHTML = 'XSS Succeeded';
document.getElementsByTagName('body')[0].appendChild(div);
throw new Error('XSS Succeded');
}
var diagram = "stateDiagram-v2\n";
diagram += "<img/src='1'/onerror=xssAttack()> --> B";
// diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n";
console.log(diagram);
// document.querySelector('#diagram').innerHTML = diagram;
mermaid.render('diagram', diagram, (res) => {
console.log(res);
document.querySelector('#res').innerHTML = res;
});
var diagram = 'stateDiagram-v2\n';
diagram += "<img/src='1'/onerror=xssAttack()> --> B";
// diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n";
console.log(diagram);
// document.querySelector('#diagram').innerHTML = diagram;
mermaid.render('diagram', diagram, (res) => {
console.log(res);
document.querySelector('#res').innerHTML = res;
});
</script>
</body>
</html>

14
dist/dataflowchart.html → demos/dataflowchart.html
View File

@ -36,17 +36,17 @@
theme: 'forest',
logLevel: 3,
securityLevel: 'loose',
flowchart: { curve: 'basis' }
flowchart: { curve: 'basis' },
});
</script>
<script>
function testClick(nodeId) {
console.log("clicked", nodeId)
var originalBgColor = document.querySelector('body').style.backgroundColor
document.querySelector('body').style.backgroundColor = 'yellow'
setTimeout(function() {
document.querySelector('body').style.backgroundColor = originalBgColor
}, 100)
console.log('clicked', nodeId);
var originalBgColor = document.querySelector('body').style.backgroundColor;
document.querySelector('body').style.backgroundColor = 'yellow';
setTimeout(function () {
document.querySelector('body').style.backgroundColor = originalBgColor;
}, 100);
}
</script>
</body>

14
dist/flowchart.html → demos/flowchart.html
View File

@ -1088,17 +1088,17 @@
theme: 'forest',
logLevel: 3,
securityLevel: 'loose',
flowchart: { curve: 'basis' }
flowchart: { curve: 'basis' },
});
</script>
<script>
function testClick(nodeId) {
console.log("clicked", nodeId)
var originalBgColor = document.querySelector('body').style.backgroundColor
document.querySelector('body').style.backgroundColor = 'yellow'
setTimeout(function() {
document.querySelector('body').style.backgroundColor = originalBgColor
}, 100)
console.log('clicked', nodeId);
var originalBgColor = document.querySelector('body').style.backgroundColor;
document.querySelector('body').style.backgroundColor = 'yellow';
setTimeout(function () {
document.querySelector('body').style.backgroundColor = originalBgColor;
}, 100);
}
</script>
</body>

28
dist/index.html → demos/index.html
View File

@ -790,31 +790,31 @@
</script>
<script>
function ganttTestClick(a, b, c) {
console.log("a:", a)
console.log("b:", b)
console.log("c:", c)
console.log('a:', a);
console.log('b:', b);
console.log('c:', c);
}
function testClick(nodeId) {
console.log("clicked", nodeId)
var originalBgColor = document.querySelector('body').style.backgroundColor
document.querySelector('body').style.backgroundColor = 'yellow'
setTimeout(function() {
document.querySelector('body').style.backgroundColor = originalBgColor
}, 100)
console.log('clicked', nodeId);
var originalBgColor = document.querySelector('body').style.backgroundColor;
document.querySelector('body').style.backgroundColor = 'yellow';
setTimeout(function () {
document.querySelector('body').style.backgroundColor = originalBgColor;
}, 100);
}
</script>
<script>
const testLineEndings = (test, input) => {
try {
mermaid.render(test, input, () => { });
mermaid.render(test, input, () => {});
} catch (err) {
console.error("Error in %s:\n\n%s", test, err);
console.error('Error in %s:\n\n%s', test, err);
}
};
testLineEndings("CR", "graph LR\rsubgraph CR\rA --> B\rend");
testLineEndings("LF", "graph LR\nsubgraph LF\nA --> B\nend");
testLineEndings("CRLF", "graph LR\r\nsubgraph CRLF\r\nA --> B\r\nend");
testLineEndings('CR', 'graph LR\rsubgraph CR\rA --> B\rend');
testLineEndings('LF', 'graph LR\nsubgraph LF\nA --> B\nend');
testLineEndings('CRLF', 'graph LR\r\nsubgraph CRLF\r\nA --> B\r\nend');
</script>
</body>

30301
dist/mermaid.core.js vendored
View File

File diff suppressed because one or more lines are too long

1
dist/mermaid.core.js.map vendored
View File

File diff suppressed because one or more lines are too long

3
dist/mermaid.esm.min.mjs vendored
View File

File diff suppressed because one or more lines are too long

32
dist/mermaid.esm.min.mjs.LICENSE.txt vendored
View File

@ -1,32 +0,0 @@
/*!
* Wait for document loaded before starting the execution
*/
/*! @license DOMPurify 2.3.3 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/2.3.3/LICENSE */
/*! Check if previously processed */
/*! sequence config was passed as #1 */
/**
* @license
* Copyright (c) 2012-2013 Chris Pettitt
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
* THE SOFTWARE.
*/

127752
dist/mermaid.js vendored
View File

File diff suppressed because one or more lines are too long

1
dist/mermaid.js.map vendored
View File

File diff suppressed because one or more lines are too long

3
dist/mermaid.min.js vendored
View File

File diff suppressed because one or more lines are too long

32
dist/mermaid.min.js.LICENSE.txt vendored
View File

@ -1,32 +0,0 @@
/*!
* Wait for document loaded before starting the execution
*/
/*! @license DOMPurify 2.3.3 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/2.3.3/LICENSE */
/*! Check if previously processed */
/*! sequence config was passed as #1 */
/**
* @license
* Copyright (c) 2012-2013 Chris Pettitt
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
* THE SOFTWARE.
*/

1
dist/mermaid.min.js.map vendored
View File

File diff suppressed because one or more lines are too long

25
docs/Tutorials.md
View File

@ -37,30 +37,29 @@ https://codepen.io/janzeteachesit/pen/OWWZKN
https://codepen.io/Ryuno-Ki/pen/LNxwgR
## Python Integration with mermaid-js
Here's an example of python integration with mermaid-js which uses the mermaid.ink service.
This is also working with colab and jupyter lab notebooks.
## Jupyter Integration with mermaid-js
Here's an example of Python integration with mermaid-js which uses the mermaid.ink service, that displays the graph in a Jupyter notebook.
```python
import base64
import requests, io
from PIL import Image
from IPython.display import Image, display
import matplotlib.pyplot as plt
graph = """
def mm(graph):
graphbytes = graph.encode("ascii")
base64_bytes = base64.b64encode(graphbytes)
base64_string = base64_bytes.decode("ascii")
display(Image(url="https://mermaid.ink/img/" + base64_string))
mm("""
graph LR;
A--> B & C & D;
B--> A & E;
C--> A & E;
D--> A & E;
E--> B & C & D;
"""
graphbytes = graph.encode("ascii")
base64_bytes = base64.b64encode(graphbytes)
base64_string = base64_bytes.decode("ascii")
img = Image.open(io.BytesIO(requests.get('https://mermaid.ink/img/' + base64_string).content))
plt.imshow(img)
""")
```
**Output**

268
docs/development.md
View File

@ -1,134 +1,134 @@
# Development and Contribution 🙌
So you want to help? That's great!
![Image of happy people jumping with excitement](https://media.giphy.com/media/BlVnrxJgTGsUw/giphy.gif)
Here are a few things to know to get you started on the right path.
**The Docs Structure is dictated by [sidebar.md](https://github.com/mermaid-js/mermaid/edit/develop/docs/_sidebar.md)**
**Note: Commits and Pull Requests should be directed to the develop branch.**
## Branching
Mermaid uses a [Git Flow](https://guides.github.com/introduction/flow/)–inspired approach to branching. So development is done in the `develop` branch.
Once development is done we branch a `release` branch from `develop` for testing.
Once the release happens we merge the `release` branch with `master` and kill the `release` branch.
This means that **you should branch off your pull request from develop** and direct all Pull Requests to it.
## Contributing Code
We make all changes via Pull Requests. As we have many Pull Requests from developers new to mermaid, we have put in place a process, wherein *knsv, Knut Sveidqvist* is the primary reviewer of changes and merging pull requests. The process is as follows:
* Large changes reviewed by knsv or other developer asked to review by knsv
* Smaller, low-risk changes like dependencies, documentation, etc. can be merged by active collaborators
* Documentation (we encourage updates to the docs folder; you can submit them via direct commits)
When you commit code, create a branch with the following naming convention:
Start with the type, such as **feature** or **bug**, followed by the issue number for reference, and a text that describes the issue.
**One example:**
`feature/945_state_diagrams`
**Another example:**
`bug/123_nasty_bug_branch`
## Contributing to Documentation
If it is not in the documentation, it's like it never happened. Wouldn't that be sad? With all the effort that was put into the feature?
The docs are located in the `docs` folder and are written in Markdown. Just pick the right section and start typing. If you want to propose changes to the structure of the documentation, such as adding a new section or a new file you do that via the **[sidebar](https://github.com/mermaid-js/mermaid/edit/develop/docs/_sidebar.md)**.
> **All the documents displayed in the github.io page are listed in [sidebar.md](https://github.com/mermaid-js/mermaid/edit/develop/docs/_sidebar.md)**.
The contents of [https://mermaid-js.github.io/mermaid/](https://mermaid-js.github.io/mermaid/) are based on the docs from the `master` branch. Updates commited to the `master` branch are reflected in the [Mermaid Docs](https://mermaid-js.github.io/mermaid/) once released.
## How to Contribute to Documentation
We are a little less strict here, it is OK to commit directly in the `develop` branch if you are a collaborator.
The documentation is located in the `docs` directory and organized according to relevant subfolder.
We encourage contributions to the documentation at [mermaid-js/mermaid/docs](https://github.com/mermaid-js/mermaid/tree/develop/docs). We publish documentation using GitHub Pages with [Docsify](https://www.youtube.com/watch?v=TV88lp7egMw&t=3s)
### Add Unit Tests for Parsing
This is important so that, if someone that does not know about this great feature suggests a change to the grammar, they get notified early on when that change breaks the parser. Another important aspect is that, without proper parsing, tests refactoring is pretty much impossible.
### Add E2E Tests
This tests the rendering and visual apearance of the diagrams. This ensures that the rendering of that feature in the e2e will be reviewed in the release process going forward. Less chance that it breaks!
To start working with the e2e tests:
1. Run `yarn dev` to start the dev server
2. Start **Cypress** by running `cypress open` in the **mermaid** folder.
(Make sure you have path to Cypress in order, the binary is located in `node_modules/.bin`).
The rendering tests are very straightforward to create. There is a function `imgSnapshotTest`, which takes a diagram in text form and the mermaid options, and it renders that diagram in Cypress.
When running in CI it will take a snapshot of the rendered diagram and compare it with the snapshot from last build and flag it for review if it differs.
This is what a rendering test looks like:
```js
it('should render forks and joins', () => {
imgSnapshotTest(
`
stateDiagram
state fork_state &lt;&lt;fork&gt;&gt;
[*] --> fork_state
fork_state --> State2
fork_state --> State3
state join_state &lt;&lt;join&gt;&gt;
State2 --> join_state
State3 --> join_state
join_state --> State4
State4 --> [*]
`,
{ logLevel: 0 }
);
cy.get('svg');
});
```
### Any Questions or Suggestions?
After logging in at [GitHub.com](https://www.github.com), open or append to an issue [using the GitHub issue tracker of the mermaid-js repository](https://github.com/mermaid-js/mermaid/issues?q=is%3Aissue+is%3Aopen+label%3A%22Area%3A+Documentation%22).
### How to Contribute a Suggestion
Markdown is used to format the text, for more information about Markdown [see the GitHub Markdown help page](https://help.github.com/en/github/writing-on-github/basic-writing-and-formatting-syntax).
To edit Docs on your computer:
1. Find the Markdown file (.md) to edit in the [mermaid-js/mermaid/docs](https://github.com/mermaid-js/mermaid/tree/develop/docs) directory in the `develop` branch.
2. Create a fork of the develop branch.
3. Make changes or add new documentation.
4. Commit changes to your fork and push it to GitHub.
5. Create a Pull Request of your fork.
To edit Docs on GitHub:
1. Login to [GitHub.com](https://www.github.com).
2. Navigate to [mermaid-js/mermaid/docs](https://github.com/mermaid-js/mermaid/tree/develop/docs).
3. To edit a file, click the pencil icon at the top-right of the file contents panel.
4. Describe what you changed in the **Propose file change** section, located at the bottom of the page.
5. Submit your changes by clicking the button **Propose file change** at the bottom (by automatic creation of a fork and a new branch).
6. Create a Pull Request of your newly forked branch by clicking the green **Create Pull Request** button.
## Last Words
Don't get daunted if it is hard in the beginning. We have a great community with only encouraging words. So, if you get stuck, ask for help and hints in the Slack forum. If you want to show off something good, show it off there.
[Join our Slack community if you want closer contact!](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE)
![Image of superhero wishing you good luck](https://media.giphy.com/media/l49JHz7kJvl6MCj3G/giphy.gif)
# Development and Contribution 🙌
So you want to help? That's great!
![Image of happy people jumping with excitement](https://media.giphy.com/media/BlVnrxJgTGsUw/giphy.gif)
Here are a few things to know to get you started on the right path.
**The Docs Structure is dictated by [sidebar.md](https://github.com/mermaid-js/mermaid/edit/develop/docs/_sidebar.md)**
**Note: Commits and Pull Requests should be directed to the develop branch.**
## Branching
Mermaid uses a [Git Flow](https://guides.github.com/introduction/flow/)–inspired approach to branching. So development is done in the `develop` branch.
Once development is done we branch a `release` branch from `develop` for testing.
Once the release happens we merge the `release` branch with `master` and kill the `release` branch.
This means that **you should branch off your pull request from develop** and direct all Pull Requests to it.
## Contributing Code
We make all changes via Pull Requests. As we have many Pull Requests from developers new to mermaid, we have put in place a process, wherein *knsv, Knut Sveidqvist* is the primary reviewer of changes and merging pull requests. The process is as follows:
* Large changes reviewed by knsv or other developer asked to review by knsv
* Smaller, low-risk changes like dependencies, documentation, etc. can be merged by active collaborators
* Documentation (we encourage updates to the docs folder; you can submit them via direct commits)
When you commit code, create a branch with the following naming convention:
Start with the type, such as **feature** or **bug**, followed by the issue number for reference, and a text that describes the issue.
**One example:**
`feature/945_state_diagrams`
**Another example:**
`bug/123_nasty_bug_branch`
## Contributing to Documentation
If it is not in the documentation, it's like it never happened. Wouldn't that be sad? With all the effort that was put into the feature?
The docs are located in the `docs` folder and are written in Markdown. Just pick the right section and start typing. If you want to propose changes to the structure of the documentation, such as adding a new section or a new file you do that via the **[sidebar](https://github.com/mermaid-js/mermaid/edit/develop/docs/_sidebar.md)**.
> **All the documents displayed in the github.io page are listed in [sidebar.md](https://github.com/mermaid-js/mermaid/edit/develop/docs/_sidebar.md)**.
The contents of [https://mermaid-js.github.io/mermaid/](https://mermaid-js.github.io/mermaid/) are based on the docs from the `master` branch. Updates commited to the `master` branch are reflected in the [Mermaid Docs](https://mermaid-js.github.io/mermaid/) once released.
## How to Contribute to Documentation
We are a little less strict here, it is OK to commit directly in the `develop` branch if you are a collaborator.
The documentation is located in the `docs` directory and organized according to relevant subfolder.
We encourage contributions to the documentation at [mermaid-js/mermaid/docs](https://github.com/mermaid-js/mermaid/tree/develop/docs). We publish documentation using GitHub Pages with [Docsify](https://www.youtube.com/watch?v=TV88lp7egMw&t=3s)
### Add Unit Tests for Parsing
This is important so that, if someone that does not know about this great feature suggests a change to the grammar, they get notified early on when that change breaks the parser. Another important aspect is that, without proper parsing, tests refactoring is pretty much impossible.
### Add E2E Tests
This tests the rendering and visual apearance of the diagrams. This ensures that the rendering of that feature in the e2e will be reviewed in the release process going forward. Less chance that it breaks!
To start working with the e2e tests:
1. Run `yarn dev` to start the dev server
2. Start **Cypress** by running `cypress open` in the **mermaid** folder.
(Make sure you have path to Cypress in order, the binary is located in `node_modules/.bin`).
The rendering tests are very straightforward to create. There is a function `imgSnapshotTest`, which takes a diagram in text form and the mermaid options, and it renders that diagram in Cypress.
When running in CI it will take a snapshot of the rendered diagram and compare it with the snapshot from last build and flag it for review if it differs.
This is what a rendering test looks like:
```js
it('should render forks and joins', () => {
imgSnapshotTest(
`
stateDiagram
state fork_state &lt;&lt;fork&gt;&gt;
[*] --> fork_state
fork_state --> State2
fork_state --> State3
state join_state &lt;&lt;join&gt;&gt;
State2 --> join_state
State3 --> join_state
join_state --> State4
State4 --> [*]
`,
{ logLevel: 0 }
);
cy.get('svg');
});
```
### Any Questions or Suggestions?
After logging in at [GitHub.com](https://www.github.com), open or append to an issue [using the GitHub issue tracker of the mermaid-js repository](https://github.com/mermaid-js/mermaid/issues?q=is%3Aissue+is%3Aopen+label%3A%22Area%3A+Documentation%22).
### How to Contribute a Suggestion
Markdown is used to format the text, for more information about Markdown [see the GitHub Markdown help page](https://help.github.com/en/github/writing-on-github/basic-writing-and-formatting-syntax).
To edit Docs on your computer:
1. Find the Markdown file (.md) to edit in the [mermaid-js/mermaid/docs](https://github.com/mermaid-js/mermaid/tree/develop/docs) directory in the `develop` branch.
2. Create a fork of the develop branch.
3. Make changes or add new documentation.
4. Commit changes to your fork and push it to GitHub.
5. Create a Pull Request of your fork.
To edit Docs on GitHub:
1. Login to [GitHub.com](https://www.github.com).
2. Navigate to [mermaid-js/mermaid/docs](https://github.com/mermaid-js/mermaid/tree/develop/docs).
3. To edit a file, click the pencil icon at the top-right of the file contents panel.
4. Describe what you changed in the **Propose file change** section, located at the bottom of the page.
5. Submit your changes by clicking the button **Propose file change** at the bottom (by automatic creation of a fork and a new branch).
6. Create a Pull Request of your newly forked branch by clicking the green **Create Pull Request** button.
## Last Words
Don't get daunted if it is hard in the beginning. We have a great community with only encouraging words. So, if you get stuck, ask for help and hints in the Slack forum. If you want to show off something good, show it off there.
[Join our Slack community if you want closer contact!](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE)
![Image of superhero wishing you good luck](https://media.giphy.com/media/l49JHz7kJvl6MCj3G/giphy.gif)

270
docs/index.html
View File

@ -1,141 +1,167 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>mermaid - Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="description" content="Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<!-- <link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css"> -->
<link rel="stylesheet" href="theme.css">
<script src="//cdn.jsdelivr.net/npm/mermaid@8.13.0/dist/mermaid.min.js"></script>
<!-- <script src="http://localhost:9000/mermaid.js"></script> -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
<head>
<meta charset="UTF-8" />
<title>
mermaid - Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams,
gantt charts and git graphs.
</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta
name="description"
content="Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs."
/>
<meta
name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
/>
<!-- <link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css"> -->
<link rel="stylesheet" href="theme.css" />
<script src="//cdn.jsdelivr.net/npm/mermaid@8.13.0/dist/mermaid.min.js"></script>
<!-- <script src="http://localhost:9000/mermaid.js"></script> -->
<script>
// prettier-ignore
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-153180559-1', 'auto');
if(location) {
ga('send', 'pageview', location.hash);
}
ga('create', 'UA-153180559-1', 'auto');
if (location) {
ga('send', 'pageview', location.hash);
}
</script>
<script>
var require = {
paths: { vs: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.29.1/min/vs' },
};
</script>
<script>var require = { paths: { 'vs': 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.29.1/min/vs' } }</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.29.1/min/vs/loader.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.29.1/min/vs/editor/editor.main.nls.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.29.1/min/vs/editor/editor.main.js"></script>
<script>exports = {};</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.29.1/min/vs/editor/editor.main.js"></script>
<script>
exports = {};
</script>
<script src="https://unpkg.com/monaco-mermaid/browser.js"></script>
<style>
.markdown-section {
max-width: 1200px;
}
</style>
</head>
<body>
<div id="app"></div>
<script>
var initEditor = exports.default;
var parser = new DOMParser();
var currentCodeExample = 0;
var colorize = [];
<style>
.markdown-section {
max-width: 1200px;
}
</style>
</head>
<body>
<div id="app"></div>
<script>
var initEditor = exports.default;
var parser = new DOMParser();
var currentCodeExample = 0;
var colorize = [];
function colorizeEverything(html) {
initEditor(monaco)
return new Promise((resolve, reject) => {
monaco.editor.setTheme('mermaid')
var parsed = parser.parseFromString(html, 'text/html').body
Promise.all([...parsed.querySelectorAll('pre[id*="code"]')].map(codeBlock => monaco.editor.colorize(codeBlock.innerText, 'mermaid'))).then(result => {
parsed.querySelectorAll('pre[id*="code"]').forEach((codeBlock, index) => codeBlock.innerHTML = result[index])
resolve(parsed.innerHTML)
})
})
}
function colorizeEverything(html) {
initEditor(monaco);
return new Promise((resolve, reject) => {
monaco.editor.setTheme('mermaid');
var parsed = parser.parseFromString(html, 'text/html').body;
Promise.all(
[...parsed.querySelectorAll('pre[id*="code"]')].map((codeBlock) =>
monaco.editor.colorize(codeBlock.innerText, 'mermaid')
)
).then((result) => {
parsed
.querySelectorAll('pre[id*="code"]')
.forEach((codeBlock, index) => (codeBlock.innerHTML = result[index]));
resolve(parsed.innerHTML);
});
});
}
function escapeHTML(html) {
return html.replaceAll('&', '&amp;').replaceAll('<', '&lt;').replaceAll('>', '&gt;').replaceAll('"', '&quot;').replaceAll('\'', '&apos;')
}
function escapeHTML(html) {
return html
.replaceAll('&', '&amp;')
.replaceAll('<', '&lt;')
.replaceAll('>', '&gt;')
.replaceAll('"', '&quot;')
.replaceAll("'", '&apos;');
}
window.$docsify = {
search: 'auto',
name: 'mermaid',
repo: 'https://github.com/mermaid-js/mermaid',
loadSidebar: true,
mergeNavbar: true,
maxLevel: 4,
subMaxLevel: 2,
markdown: {
renderer: {
code: function(code, lang) {
if (lang.startsWith('mermaid') || lang === 'mmd') {
var resultingHTML = '';
if (lang === "mmd" || lang === 'mermaid-example') {
currentCodeExample++;
colorize.push(currentCodeExample);
resultingHTML += (
'<pre id="code' + currentCodeExample + '">' + escapeHTML(code) + '</pre>'
)
window.$docsify = {
search: 'auto',
name: 'mermaid',
repo: 'https://github.com/mermaid-js/mermaid',
loadSidebar: true,
mergeNavbar: true,
maxLevel: 4,
subMaxLevel: 2,
markdown: {
renderer: {
code: function (code, lang) {
if (lang.startsWith('mermaid') || lang === 'mmd') {
var resultingHTML = '';
if (lang === 'mmd' || lang === 'mermaid-example') {
currentCodeExample++;
colorize.push(currentCodeExample);
resultingHTML +=
'<pre id="code' + currentCodeExample + '">' + escapeHTML(code) + '</pre>';
}
if (lang === 'mermaid' || lang === 'mermaid-example') {
resultingHTML +=
'<div class="mermaid">' + mermaid.render('mermaid-svg-' + num++, code) + '</div>';
}
if (resultingHTML !== '') {
return resultingHTML;
}
}
if (lang === 'mermaid' || lang === 'mermaid-example') {
resultingHTML += (
'<div class="mermaid">' + mermaid.render('mermaid-svg-' + num++, code) + "</div>"
return this.origin.code.apply(this, arguments);
},
},
},
plugins: [
function (hook, vm) {
hook.beforeEach(function (html) {
url = 'https://github.com/mermaid-js/mermaid/blob/develop/docs/' + vm.route.file;
var editHtml = '[:memo: Edit this Page](' + url + ')\n';
return editHtml + html;
});
hook.afterEach(function (html, next) {
next(html);
(async () => {
while (!window.hasOwnProperty('monaco'))
await new Promise((resolve) => setTimeout(resolve, 1000));
colorizeEverything(html).then(
(newHTML) => (document.querySelector('article.markdown-section').innerHTML = newHTML)
);
}
})();
});
},
],
};
if (resultingHTML !== '') {
return resultingHTML;
}
}
return this.origin.code.apply(this, arguments);
}
var num = 0;
const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
const conf = {
logLevel: 4,
startOnLoad: false,
themeCSS: '.label { font-family: Source Sans Pro,Helvetica Neue,Arial,sans-serif; }',
};
if (isDarkMode) conf.theme = 'dark';
mermaid.initialize(conf);
</script>
<script>
window.onhashchange = function (a) {
//code
if (location) {
ga('send', 'pageview', location.hash);
}
},
plugins: [
function (hook, vm) {
hook.beforeEach(function (html) {
url = 'https://github.com/mermaid-js/mermaid/blob/develop/docs/' + vm.route.file
var editHtml = '[:memo: Edit this Page](' + url + ')\n'
return editHtml + html
})
hook.afterEach(function (html, next) {
next(html);
(async() => {
while (!window.hasOwnProperty("monaco"))
await new Promise(resolve => setTimeout(resolve, 1000));
colorizeEverything(html).then(newHTML => document.querySelector('article.markdown-section').innerHTML = newHTML)
})();
})
}
]
}
var num = 0;
const isDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches
const conf = { logLevel:4, startOnLoad: false, themeCSS:'.label { font-family: Source Sans Pro,Helvetica Neue,Arial,sans-serif; }' };
if(isDarkMode && false) conf.theme = 'dark';
mermaid.initialize(conf);
</script>
<script>
window.onhashchange = function(a) {
//code
if(location) {
ga('send', 'pageview', location.hash);
}
}
</script>
<script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/ga.min.js"></script>
</body>
</html>
<!-- -->
};
</script>
<script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/ga.min.js"></script>
</body>
</html>

235
docs/landing/index.html
View File

@ -4,11 +4,15 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>
The Official Guide to Mermaid.js
</title>
<meta name="description" content="Landing page for the book The Official Guide to Mermaid.js: Create complex diagrams and beautiful flowcharts easily using text and code" />
<meta name="keywords" content="book, guide, mermaid, flowcharts, sequence diagrams, class diagrams, state diagrams, pie charts, Entity Relationship Diagrams, User Journey Diagrams, Requirement Diagrams, Gantt Charts" />
<title>The Official Guide to Mermaid.js</title>
<meta
name="description"
content="Landing page for the book The Official Guide to Mermaid.js: Create complex diagrams and beautiful flowcharts easily using text and code"
/>
<meta
name="keywords"
content="book, guide, mermaid, flowcharts, sequence diagrams, class diagrams, state diagrams, pie charts, Entity Relationship Diagrams, User Journey Diagrams, Requirement Diagrams, Gantt Charts"
/>
<meta name="author" content="Knut Sveidqvist, Ashish Jain" />
<link rel="stylesheet" href="https://unpkg.com/tailwindcss/dist/tailwind.min.css" />
<!--Replace with your tailwind.css once created-->
@ -16,43 +20,82 @@
<!-- Define your gradient here - use online tools to find a gradient matching your branding-->
<style>
.gradient {
background: linear-gradient(90deg, #7557C9 0%, #f4f4f4 100%);
background: linear-gradient(90deg, #7557c9 0%, #f4f4f4 100%);
}
.p-shadow {
text-shadow: #7557c9 0px 0px 5px
text-shadow: #7557c9 0px 0px 5px;
}
</style>
<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
// prettier-ignore
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-153180559-1', 'auto');
ga('send', 'pageview');
ga('create', 'UA-153180559-1', 'auto');
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->
</head>
<body class="leading-normal tracking-normal text-white gradient" style="font-family: 'Source Sans Pro', sans-serif;">
<body
class="leading-normal tracking-normal text-white gradient"
style="font-family: 'Source Sans Pro', sans-serif"
>
<!--Nav-->
<!--Hero-->
<div class="pt-24">
<div style="" class="container lg:px-24 max-w-5xl px-4 mx-auto flex flex-wrap flex-col md:flex-row items-center">
<div
style=""
class="
container
lg:px-24
max-w-5xl
px-4
mx-auto
flex flex-wrap flex-col
md:flex-row
items-center
"
>
<!--Left Col-->
<div class="w-full md:w-1/2">
<div class="flex flex-col justify-center items-start text-center md:text-left">
<div class="flex flex-col justify-center items-start text-center md:text-left">
<div class="flex flex-col items-center">
<p class="uppercase tracking-loose w-full p-shadow">MermaidPress</p>
<h1 class="my-4 text-5xl font-bold leading-tight p-shadow">
The Official Guide to Mermaid.js
</h1>
<p class="leading-normal text-2xl mb-8 p-shadow">
Learn to create complex diagrams and beautiful flowcharts easily using text and code using Mermaid.js.
Learn to create complex diagrams and beautiful flowcharts easily using text and code
using Mermaid.js.
</p>
<a href="https://www.amazon.com/Official-Guide-Mermaid-js-beautiful-flowcharts-dp-1801078025/dp/1801078025/ref=mt_other?_encoding=UTF8&me=&qid=1628153965">
<button style="background: #FFA41C;border: 1px solid #FF8F00;" class="mx-auto lg:mx-0 hover:underline text-black font-bold rounded-full my-6 py-4 px-8 shadow-lg focus:outline-none focus:shadow-outline transform transition hover:scale-105 duration-300 ease-in-out">
<a
href="https://www.amazon.com/Official-Guide-Mermaid-js-beautiful-flowcharts-dp-1801078025/dp/1801078025/ref=mt_other?_encoding=UTF8&me=&qid=1628153965"
>
<button
style="background: #ffa41c; border: 1px solid #ff8f00"
class="
mx-auto
lg:mx-0
hover:underline
text-black
font-bold
rounded-full
my-6
py-4
px-8
shadow-lg
focus:outline-none focus:shadow-outline
transform
transition
hover:scale-105
duration-300
ease-in-out
"
>
Purchase on Amazon
</button>
</a>
@ -66,15 +109,27 @@
</div>
</div>
<div class="relative -mt-0 lg:-mt-12">
<svg viewBox="0 0 1428 174" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<svg
viewBox="0 0 1428 174"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-2.000000, 44.000000)" fill="#FFFFFF" fill-rule="nonzero">
<path d="M0,0 C90.7283404,0.927527913 147.912752,27.187927 291.910178,59.9119003 C387.908462,81.7278826 543.605069,89.334785 759,82.7326078 C469.336065,156.254352 216.336065,153.6679 0,74.9732496" opacity="0.100000001"></path>
<path
d="M0,0 C90.7283404,0.927527913 147.912752,27.187927 291.910178,59.9119003 C387.908462,81.7278826 543.605069,89.334785 759,82.7326078 C469.336065,156.254352 216.336065,153.6679 0,74.9732496"
opacity="0.100000001"
></path>
<path
d="M100,104.708498 C277.413333,72.2345949 426.147877,52.5246657 546.203633,45.5787101 C666.259389,38.6327546 810.524845,41.7979068 979,55.0741668 C931.069965,56.122511 810.303266,74.8455141 616.699903,111.243176 C423.096539,147.640838 250.863238,145.462612 100,104.708498 Z"
opacity="0.100000001"
></path>
<path d="M1046,51.6521276 C1130.83045,29.328812 1279.08318,17.607883 1439,40.1656806 L1439,120 C1271.17211,77.9435312 1140.17211,55.1609071 1046,51.6521276 Z" id="Path-4" opacity="0.200000003"></path>
<path
d="M1046,51.6521276 C1130.83045,29.328812 1279.08318,17.607883 1439,40.1656806 L1439,120 C1271.17211,77.9435312 1140.17211,55.1609071 1046,51.6521276 Z"
id="Path-4"
opacity="0.200000003"
></path>
</g>
<g transform="translate(-4.000000, 76.000000)" fill="#FFFFFF" fill-rule="nonzero">
<path
@ -87,7 +142,8 @@
<section class="bg-white border-b py-8">
<div class="container max-w-5xl mx-auto m-8">
<h2 class="w-full my-2 text-5xl font-bold leading-tight text-center text-gray-800">
Get up to speed with using Mermaid diagrams along with real-world examples and expert tips from the authors to facilitate a seamless development workflow
Get up to speed with using Mermaid diagrams along with real-world examples and expert tips
from the authors to facilitate a seamless development workflow
</h2>
<div class="w-full mb-4">
<div class="h-1 mx-auto gradient w-64 opacity-25 my-0 py-0 rounded-t"></div>
@ -95,7 +151,8 @@
<div class="flex flex-wrap">
<div class="w-full sm:w-1/2 p-6 flex items-center">
<p class="text-3xl text-gray-800 font-normal leading-none mb-3">
Flowcharts is a diagram type that visualizes a process or an algorithm by showing the steps in order, as well as the different paths the execution can take.
Flowcharts is a diagram type that visualizes a process or an algorithm by showing the
steps in order, as well as the different paths the execution can take.
</p>
</div>
<div class="w-full sm:w-1/2 p-6 flex justify-center items-center">
@ -103,13 +160,14 @@
</div>
</div>
<div class="flex flex-wrap flex-col-reverse sm:flex-row flex justify-center items-center">
<div class="w-full sm:w-1/2 p-6 mt-6 ">
<div class="w-full sm:w-1/2 p-6 mt-6">
<img class="z-50 w-full" style="" src="sequence-diagram.png" />
</div>
<div class="w-full sm:w-1/2 p-6 mt-6">
<div class="align-middle flex items-center">
<p class="text-3xl text-gray-800 font-normal leading-none mb-3">
Sequence diagrams lets you model and visualize interactions between different actors or objects in a system, as well as the order of those interactions
Sequence diagrams lets you model and visualize interactions between different actors
or objects in a system, as well as the order of those interactions
</p>
</div>
</div>
@ -118,7 +176,7 @@
<div class="w-full sm:w-1/2 p-6 flex items-center">
<p class="text-3xl text-gray-800 font-normal leading-none mb-3">
A class diagram is a graphical representation that is used to visualize and describe
an object-oriented system.
an object-oriented system.
</p>
</div>
<div class="w-full sm:w-1/2 p-6 flex justify-center items-center">
@ -126,13 +184,14 @@ an object-oriented system.
</div>
</div>
<div class="flex flex-wrap flex-col-reverse sm:flex-row flex justify-center items-center">
<div class="w-full sm:w-1/2 p-6 mt-6 ">
<div class="w-full sm:w-1/2 p-6 mt-6">
<img class="z-50 w-full" style="" src="er.png" />
</div>
<div class="w-full sm:w-1/2 p-6 mt-6">
<div class="align-middle flex items-center">
<p class="text-3xl text-gray-800 font-normal leading-none mb-3">
An entity-relationship diagram is a graphical representation that is used to visualize the different types of entities that exist within a system.
An entity-relationship diagram is a graphical representation that is used to
visualize the different types of entities that exist within a system.
</p>
</div>
</div>
@ -140,7 +199,8 @@ an object-oriented system.
<div class="flex flex-wrap">
<div class="w-full sm:w-1/2 p-6 flex items-center">
<p class="text-3xl text-gray-800 font-normal leading-none mb-3">
Use State diagrams to model and document state machines, an abstract way of representing a system or an algorithm.
Use State diagrams to model and document state machines, an abstract way of
representing a system or an algorithm.
</p>
</div>
<div class="w-full sm:w-1/2 p-6 flex justify-center items-center">
@ -148,19 +208,22 @@ an object-oriented system.
</div>
</div>
<div class="flex flex-wrap flex-col-reverse sm:flex-row flex justify-center items-center">
<div class="w-full sm:w-1/2 p-6 mt-6 ">
<div class="w-full sm:w-1/2 p-6 mt-6">
<img class="z-50 w-full" style="" src="gantt.png" />
</div>
<div class="w-full sm:w-1/2 p-6 mt-6">
<div class="align-middle flex items-center">
<p class="text-3xl text-gray-800 font-normal leading-none mb-3">
A Gantt chart is a graphical representation that is used to visualize and describe tasks (events or activities) over time.
A Gantt chart is a graphical representation that is used to visualize and describe
tasks (events or activities) over time.
</p>
</div>
</div>
</div>
</div>
<p class="text-3xl text-gray-800 font-normal leading-none mt-3 text-center">These were a few of the diagrams supported by Mermaid.</p>
<p class="text-3xl text-gray-800 font-normal leading-none mt-3 text-center">
These were a few of the diagrams supported by Mermaid.
</p>
</section>
<section class="bg-gray-100 border-b py-8">
@ -169,10 +232,32 @@ an object-oriented system.
Book description
</h1>
<div class="w-full mb-4">
<p class="text-black mb-4">Mermaid lets you represent diagrams using text and code which simplifies the maintenance of complex diagrams. This is a great option for developers as they’re more familiar with code, rather than special tools for generating diagrams. Besides, diagrams in code simplify maintenance and ensure that the code is supported by version control systems. In some cases, Mermaid makes refactoring support for name changes possible while also enabling team collaboration for review distribution and updates.</p>
<p class="text-black mb-4">Developers working with any system will be able to put their knowledge to work with this practical guide to using Mermaid for documentation. The book is also a great reference for looking up the syntax for specific diagrams when authoring diagrams.</p>
<p class="text-black mb-4">You’ll start by getting up to speed with the importance of accurate and visual documentation. Next, the book introduces Mermaid and establishes how to use it to create effective documentation. By using different tools, editors, or a custom documentation platform, you’ll also learn how to use Mermaid syntax for various diagrams. Later chapters cover advanced configuration settings and theme options to manipulate your diagram as per your needs.</p>
<p class="text-black mb-4">By the end of this Mermaid book, you’ll have become well-versed with the different types of Mermaid diagrams and how they can be used in your workflows.</p>
<p class="text-black mb-4">
Mermaid lets you represent diagrams using text and code which simplifies the maintenance
of complex diagrams. This is a great option for developers as they’re more familiar with
code, rather than special tools for generating diagrams. Besides, diagrams in code
simplify maintenance and ensure that the code is supported by version control systems.
In some cases, Mermaid makes refactoring support for name changes possible while also
enabling team collaboration for review distribution and updates.
</p>
<p class="text-black mb-4">
Developers working with any system will be able to put their knowledge to work with this
practical guide to using Mermaid for documentation. The book is also a great reference
for looking up the syntax for specific diagrams when authoring diagrams.
</p>
<p class="text-black mb-4">
You’ll start by getting up to speed with the importance of accurate and visual
documentation. Next, the book introduces Mermaid and establishes how to use it to create
effective documentation. By using different tools, editors, or a custom documentation
platform, you’ll also learn how to use Mermaid syntax for various diagrams. Later
chapters cover advanced configuration settings and theme options to manipulate your
diagram as per your needs.
</p>
<p class="text-black mb-4">
By the end of this Mermaid book, you’ll have become well-versed with the different types
of Mermaid diagrams and how they can be used in your workflows.
</p>
</div>
</div>
</section>
<section class="bg-white py-8">
@ -187,12 +272,25 @@ an object-oriented system.
<div class="flex flex-col mx-4 rounded-lg bg-white mt-4 sm:-mt-6 shadow-lg z-10">
<div class="flex-1 bg-white rounded-t rounded-b-none overflow-hidden shadow">
<ul class="w-full text-base font-bold px-4">
<li class="border-b py-4 px-4">Understand good and bad documentation, and the art of effective documentation</li>
<li class="border-b py-4 px-4">Become well-versed with maintaining complex diagrams with ease</li>
<li class="border-b py-4 px-4">Learn how to set up a custom documentation system</li>
<li class="border-b py-4 px-4">Learn how to implement Mermaid diagrams in your workflows</li>
<li class="border-b py-4 px-4">Understand how to set up themes for a Mermaid diagram for an entire site</li>
<li class="border-b py-4 px-4">Discover how to draw different types of diagrams such as flowcharts, class diagrams, Gantt charts, and more</li>
<li class="border-b py-4 px-4">
Understand good and bad documentation, and the art of effective documentation
</li>
<li class="border-b py-4 px-4">
Become well-versed with maintaining complex diagrams with ease
</li>
<li class="border-b py-4 px-4">
Learn how to set up a custom documentation system
</li>
<li class="border-b py-4 px-4">
Learn how to implement Mermaid diagrams in your workflows
</li>
<li class="border-b py-4 px-4">
Understand how to set up themes for a Mermaid diagram for an entire site
</li>
<li class="border-b py-4 px-4">
Discover how to draw different types of diagrams such as flowcharts, class
diagrams, Gantt charts, and more
</li>
</ul>
</div>
</div>
@ -200,7 +298,13 @@ an object-oriented system.
</div>
</section>
<!-- Change the colour #f8fafc to match the previous section colour -->
<svg class="wave-top" viewBox="0 0 1439 147" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<svg
class="wave-top"
viewBox="0 0 1439 147"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-1.000000, -14.000000)" fill-rule="nonzero">
<g class="wave" fill="#f8fafc">
@ -209,13 +313,21 @@ an object-oriented system.
></path>
</g>
<g transform="translate(1.000000, 15.000000)" fill="#FFFFFF">
<g transform="translate(719.500000, 68.500000) rotate(-180.000000) translate(-719.500000, -68.500000) ">
<path d="M0,0 C90.7283404,0.927527913 147.912752,27.187927 291.910178,59.9119003 C387.908462,81.7278826 543.605069,89.334785 759,82.7326078 C469.336065,156.254352 216.336065,153.6679 0,74.9732496" opacity="0.100000001"></path>
<g
transform="translate(719.500000, 68.500000) rotate(-180.000000) translate(-719.500000, -68.500000) "
>
<path
d="M0,0 C90.7283404,0.927527913 147.912752,27.187927 291.910178,59.9119003 C387.908462,81.7278826 543.605069,89.334785 759,82.7326078 C469.336065,156.254352 216.336065,153.6679 0,74.9732496"
opacity="0.100000001"
></path>
<path
d="M100,104.708498 C277.413333,72.2345949 426.147877,52.5246657 546.203633,45.5787101 C666.259389,38.6327546 810.524845,41.7979068 979,55.0741668 C931.069965,56.122511 810.303266,74.8455141 616.699903,111.243176 C423.096539,147.640838 250.863238,145.462612 100,104.708498 Z"
opacity="0.100000001"
></path>
<path d="M1046,51.6521276 C1130.83045,29.328812 1279.08318,17.607883 1439,40.1656806 L1439,120 C1271.17211,77.9435312 1140.17211,55.1609071 1046,51.6521276 Z" opacity="0.200000003"></path>
<path
d="M1046,51.6521276 C1130.83045,29.328812 1279.08318,17.607883 1439,40.1656806 L1439,120 C1271.17211,77.9435312 1140.17211,55.1609071 1046,51.6521276 Z"
opacity="0.200000003"
></path>
</g>
</g>
</g>
@ -230,15 +342,40 @@ an object-oriented system.
</div>
<h3 class="my-4 text-3xl leading-tight">
<p class="mb-4 p-shadow">Written by Knut Sveidqvist and Ashish Jain.</p>
<p class="p-shadow">Knut is the creator of Mermaid and both authors are active core team members of the Mermaid open-source project.</p>
<p class="p-shadow">
Knut is the creator of Mermaid and both authors are active core team members of the
Mermaid open-source project.
</p>
</h3>
<a href="https://www.amazon.com/Official-Guide-Mermaid-js-beautiful-flowcharts-dp-1801078025/dp/1801078025/ref=mt_other?_encoding=UTF8&me=&qid=1628153965">
<button style="background: #FFA41C;border: 1px solid #FF8F00;" class="mx-auto lg:mx-0 hover:underline bg-white text-gray-800 font-bold rounded-full my-6 py-4 px-8 shadow-lg focus:outline-none focus:shadow-outline transform transition hover:scale-105 duration-300 ease-in-out">
<a
href="https://www.amazon.com/Official-Guide-Mermaid-js-beautiful-flowcharts-dp-1801078025/dp/1801078025/ref=mt_other?_encoding=UTF8&me=&qid=1628153965"
>
<button
style="background: #ffa41c; border: 1px solid #ff8f00"
class="
mx-auto
lg:mx-0
hover:underline
bg-white
text-gray-800
font-bold
rounded-full
my-6
py-4
px-8
shadow-lg
focus:outline-none focus:shadow-outline
transform
transition
hover:scale-105
duration-300
ease-in-out
"
>
Purchase Now on Amazon
</button>
</a>
</section>
<!--Footer-->
</body>
</html>
</html>

5
jest.config.js
View File

@ -4,7 +4,10 @@ module.exports = {
testEnvironment: 'jsdom',
transform: {
'^.+\\.jsx?$': ['babel-jest', { rootMode: 'upward' }],
'^.+\\.jison$': [path.resolve(__dirname, './jison/transformer.js'), { 'token-stack': true }],
'^.+\\.jison$': [
path.resolve(__dirname, './src/jison/transformer.js'),
{ 'token-stack': true },
],
},
transformIgnorePatterns: ['/node_modules/(?!dagre-d3-renderer/lib).*\\.js'],
moduleNameMapper: {

13
jison/parser-options-schema.json
View File

@ -1,13 +0,0 @@
{
"title": "Jison Parser options",
"type": "object",
"properties": {
"token-stack": {
"type": "boolean"
},
"debug": {
"type": "boolean"
}
},
"additionalProperties": false
}

22
package.json
View File

@ -1,6 +1,6 @@
{
"name": "mermaid",
"version": "8.13.5",
"version": "8.13.6",
"description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
"main": "dist/mermaid.core.js",
"module": "dist/mermaid.esm.min.mjs",
@ -21,23 +21,24 @@
"git graph"
],
"scripts": {
"build:development": "webpack --progress --color",
"build:production": "yarn build:development --mode production --config webpack.config.prod.babel.js",
"build:development": "webpack --mode development --progress --color",
"build:production": "webpack --mode production --progress --color",
"build": "concurrently \"yarn build:development\" \"yarn build:production\"",
"postbuild": "documentation build src/mermaidAPI.js src/config.js src/defaultConfig.js --shallow -f md --markdown-toc false > docs/Setup.md",
"build:watch": "yarn build:development --watch",
"release": "yarn build",
"lint": "eslint .",
"lint": "eslint ./ --ext js,html",
"lint:fix": "yarn lint --fix",
"e2e:depr": "yarn lint && jest e2e --config e2e/jest.config.js",
"cypress": "percy exec -- cypress run",
"e2e": "start-server-and-test dev http://localhost:9000/ cypress",
"e2e-upd": "yarn lint && jest e2e -u --config e2e/jest.config.js",
"dev": "webpack serve --config webpack.config.e2e.js",
"dev": "webpack serve --config ./.webpack/webpack.config.e2e.babel.js",
"test": "yarn lint && jest src/.*",
"test:watch": "jest --watch src",
"prepublishOnly": "yarn build && yarn test",
"prepare": "husky install && yarn build"
"prepare": "husky install && yarn build",
"pre-commit": "lint-staged"
},
"repository": {
"type": "git",
@ -60,7 +61,7 @@
"d3": "^7.0.0",
"dagre": "^0.8.5",
"dagre-d3": "^0.6.4",
"dompurify": "2.3.3",
"dompurify": "2.3.4",
"graphlib": "^2.1.8",
"khroma": "^1.4.1",
"moment-mini": "^2.24.0",
@ -71,6 +72,8 @@
"@babel/eslint-parser": "^7.14.7",
"@babel/preset-env": "^7.14.7",
"@babel/register": "^7.14.5",
"@commitlint/cli": "^15.0.0",
"@commitlint/config-conventional": "^15.0.0",
"@percy/cli": "^1.0.0-beta.58",
"@percy/cypress": "^3.1.0",
"@percy/migrate": "^0.11.0",
@ -79,13 +82,15 @@
"concurrently": "^6.2.2",
"coveralls": "^3.0.2",
"css-to-string-loader": "^0.1.3",
"cypress": "9.0.0",
"cypress": "9.1.1",
"documentation": "13.2.0",
"eslint": "^8.2.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-cypress": "^2.12.1",
"eslint-plugin-html": "^6.2.0",
"eslint-plugin-jest": "^25.2.4",
"eslint-plugin-jsdoc": "^37.0.3",
"eslint-plugin-markdown": "^2.2.1",
"eslint-plugin-prettier": "^4.0.0",
"husky": "^7.0.1",
"identity-obj-proxy": "^3.0.0",
@ -102,6 +107,7 @@
"webpack": "^5.53.0",
"webpack-cli": "^4.7.2",
"webpack-dev-server": "^4.3.0",
"webpack-merge": "^5.8.0",
"webpack-node-externals": "^3.0.0"
},
"files": [

6
src/dagre-wrapper/nodes.js
View File

@ -345,6 +345,12 @@ const rect = (parent, node) => {
return shapeSvg;
};
/**
* @param rect
* @param borders
* @param totalWidth
* @param totalHeight
*/
function applyNodePropertyBorders(rect, borders, totalWidth, totalHeight) {
const strokeDashArray = [];
const addBorder = (length) => {

1
src/defaultConfig.js
View File

@ -37,6 +37,7 @@ const config = {
themeCSS: undefined,
/* **maxTextSize** - The maximum allowed size of the users text diamgram */
maxTextSize: 50000,
darkMode: false,
/**
* | Parameter | Description | Type | Required | Values |

2
src/diagrams/flowchart/parser/flow.jison
View File

@ -560,7 +560,7 @@ direction
alphaNumToken : PUNCTUATION | AMP | UNICODE_TEXT | NUM| ALPHA | COLON | COMMA | PLUS | EQUALS | MULT | DOT | BRKT| UNDERSCORE ;
idStringToken : ALPHA|UNDERSCORE |UNICODE_TEXT | NUM| COLON | COMMA | PLUS | MINUS | DOWN |EQUALS | MULT | BRKT | DOT | PUNCTUATION | AMP;
idStringToken : ALPHA|UNDERSCORE |UNICODE_TEXT | NUM| COLON | COMMA | PLUS | MINUS | DOWN |EQUALS | MULT | BRKT | DOT | PUNCTUATION | AMP | DEFAULT;
graphCodeTokens: STADIUMSTART | STADIUMEND | SUBROUTINESTART | SUBROUTINEEND | VERTEX_WITH_PROPS_START | CYLINDERSTART | CYLINDEREND | TRAPSTART | TRAPEND | INVTRAPSTART | INVTRAPEND | PIPE | PS | PE | SQS | SQE | DIAMOND_START | DIAMOND_STOP | TAGSTART | TAGEND | ARROW_CROSS | ARROW_POINT | ARROW_CIRCLE | ARROW_OPEN | QUOTE | SEMI;
%%

12
src/diagrams/flowchart/parser/flow.spec.js
View File

@ -51,6 +51,18 @@ describe('when parsing ', function () {
expect(edges[0].end).toBe('monograph');
});
it('should allow default in the node name/id', function () {
const res = flow.parser.parse('graph TD\ndefault --> monograph');
const vert = flow.parser.yy.getVertices();
const edges = flow.parser.yy.getEdges();
expect(vert['default'].id).toBe('default');
expect(vert['monograph'].id).toBe('monograph');
expect(edges[0].start).toBe('default');
expect(edges[0].end).toBe('monograph');
});
describe('special characters should be be handled.', function () {
const charTest = function (char, result) {
const res = flow.parser.parse('graph TD;A(' + char + ')-->B;');

0
jison/transformer.js → src/jison/transformer.js
View File

6
src/mermaidAPI.js
View File

@ -60,7 +60,7 @@ import { attachFunctions } from './interactionDb';
import { log, setLogLevel } from './logger';
import getStyles from './styles';
import theme from './themes';
import utils, { directiveSanitizer, assignWithDepth } from './utils';
import utils, { directiveSanitizer, assignWithDepth, sanitizeCss } from './utils';
/**
* @param text
@ -223,6 +223,7 @@ const render = function (id, _txt, cb, container) {
let txt = _txt;
const graphInit = utils.detectInit(txt);
if (graphInit) {
directiveSanitizer(graphInit);
configApi.addDirective(graphInit);
}
let cnf = configApi.getConfig();
@ -533,6 +534,9 @@ const handleDirective = function (p, directive, type) {
p.setWrap(directive.type === 'wrap');
}
break;
case 'themeCss':
log.warn('themeCss encountered');
break;
default:
log.warn(
`Unhandled directive: source: '%%{${directive.type}: ${JSON.stringify(

16
src/utils.js
View File

@ -974,6 +974,11 @@ export const directiveSanitizer = (args) => {
log.debug('sanitize deleting constr option', key);
delete args[key];
}
if (key.indexOf('themeCSS') >= 0) {
log.debug('sanitizing themeCss option');
args[key] = sanitizeCss(args[key]);
}
if (configKeys.indexOf(key) < 0) {
log.debug('sanitize deleting option', key);
delete args[key];
@ -987,6 +992,16 @@ export const directiveSanitizer = (args) => {
}
}
};
export const sanitizeCss = (str) => {
const stringsearch = 'o';
const startCnt = (str.match(/\{/g) || []).length;
const endCnt = (str.match(/\}/g) || []).length;
if (startCnt !== endCnt) {
return '{ /* ERROR: Unbalanced CSS */ }';
}
// Todo add more checks here
return str;
};
export default {
assignWithDepth,
@ -1013,4 +1028,5 @@ export default {
entityDecode,
initIdGeneratior,
directiveSanitizer,
sanitizeCss,
};

3
todo.md
View File

@ -1,3 +0,0 @@
- git graph requires a blank line at the end. why?
- Create a desktop client
- Do the rendering in an iframe to avoid global CSS to affect rendering.

11
webpack.config.babel.js
View File

@ -1,11 +0,0 @@
import nodeExternals from 'webpack-node-externals';
import { jsConfig } from './webpack.config.base';
const config = jsConfig();
const coreConfig = jsConfig();
coreConfig.externals = [nodeExternals()];
coreConfig.output.filename = '[name].core.js';
export default [config, coreConfig];

60
webpack.config.base.js
View File

@ -1,60 +0,0 @@
import path from 'path';
const jisonRule = {
test: /\.jison$/,
use: {
loader: path.resolve(__dirname, './jison/loader'),
options: {
'token-stack': true,
},
},
};
const jsRule = {
test: /\.js$/,
include: [
path.resolve(__dirname, './src'),
path.resolve(__dirname, './node_modules/dagre-d3-renderer/lib'),
],
use: {
loader: 'babel-loader',
},
};
const scssRule = {
// load scss to string
test: /\.scss$/,
use: [{ loader: 'css-to-string-loader' }, { loader: 'css-loader' }, { loader: 'sass-loader' }],
};
export const jsConfig = () => {
return {
amd: false, // https://github.com/lodash/lodash/issues/3052
mode: 'development',
target: 'web',
entry: {
mermaid: './src/mermaid.js',
},
resolve: {
extensions: ['.wasm', '.mjs', '.js', '.json', '.jison'],
fallback: {
fs: false, // jison generated code requires 'fs'
path: require.resolve('path-browserify'),
},
},
output: {
path: path.join(__dirname, './dist/'),
filename: '[name].js',
library: {
name: 'mermaid',
type: 'umd',
export: 'default',
},
globalObject: 'typeof self !== "undefined" ? self : this',
},
module: {
rules: [jsRule, scssRule, jisonRule],
},
devtool: 'source-map',
};
};

67
webpack.config.e2e.js
View File

@ -1,67 +0,0 @@
const path = require('path');
const jsRule = {
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
},
};
const jisonRule = {
test: /\.jison$/,
use: {
loader: path.resolve(__dirname, './jison/loader'),
options: {
'token-stack': true,
},
},
};
const scssRule = {
// load scss to string
test: /\.scss$/,
use: [{ loader: 'css-to-string-loader' }, { loader: 'css-loader' }, { loader: 'sass-loader' }],
};
module.exports = {
amd: false, // https://github.com/lodash/lodash/issues/3052
mode: 'development',
target: 'web',
entry: {
mermaid: './src/mermaid.js',
e2e: './cypress/platform/viewer.js',
'bundle-test': './cypress/platform/bundle-test.js',
},
resolve: {
extensions: ['.wasm', '.mjs', '.js', '.json', '.jison'],
fallback: {
fs: false, // jison generated code requires 'fs'
path: require.resolve('path-browserify'),
},
},
output: {
path: path.join(__dirname, './dist/'),
filename: '[name].js',
library: {
name: 'mermaid',
type: 'umd',
export: 'default',
},
},
devServer: {
compress: true,
port: 9000,
static: [
{ directory: path.join(__dirname, 'cypress', 'platform') },
{ directory: path.join(__dirname, 'dist') },
],
},
module: {
rules: [jsRule, scssRule, jisonRule],
},
externals: {
mermaid: 'mermaid',
},
devtool: 'source-map',
};

17
webpack.config.prod.babel.js
View File

@ -1,17 +0,0 @@
import { jsConfig } from './webpack.config.base';
const umdConfig = jsConfig();
umdConfig.mode = 'production';
umdConfig.output.filename = '[name].min.js';
const esmConfig = jsConfig();
esmConfig.mode = 'production';
esmConfig.output.library = {
type: 'module',
};
esmConfig.experiments = {
outputModule: true,
};
esmConfig.output.filename = '[name].esm.min.mjs';
export default [umdConfig, esmConfig];

2927
yarn.lock
View File

File diff suppressed because it is too large Load Diff