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 'master' into develop

Browse Source
This commit is contained in:
Per Brolin 2023-02-21 10:29:21 +01:00
commit 6b251de227
172 changed files with 2135 additions and 2173 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.percy.yml
View File

@ -1,6 +0,0 @@
version: 2
snapshot:
widths:
- 1280
discovery:
disable-cache: true

15
.tern-project
View File

@ -1,15 +0,0 @@
{
"ecmaVersion": 6,
"libs": ["browser"],
"loadEagerly": [],
"dontLoad": ["node_modules/**"],
"plugins": {
"modules": {},
"es_modules": {},
"node": {},
"doc_comment": {
"fullDocs": true,
"strong": true
}
}
}

6
.vite/build.ts
View File

@ -62,12 +62,6 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions)
sourcemap: true,
entryFileNames: `${name}.esm${minify ? '.min' : ''}.mjs`,
},
{
name,
format: 'umd',
sourcemap: true,
entryFileNames: `${name}${minify ? '.min' : ''}.js`,
},
];
if (core) {

15
.vite/server.ts
View File

@ -1,27 +1,20 @@
import express, { NextFunction, Request, Response } from 'express';
import express from 'express';
import cors from 'cors';
import { createServer as createViteServer } from 'vite';
const cors = (req: Request, res: Response, next: NextFunction) => {
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
res.header('Access-Control-Allow-Headers', 'Content-Type');
next();
};
async function createServer() {
const app = express();
// Create Vite server in middleware mode
const vite = await createViteServer({
configFile: './vite.config.ts',
mode: 'production',
server: { middlewareMode: true },
appType: 'custom', // don't include Vite's default HTML handling middlewares
});
app.use(cors);
app.use(cors());
app.use(express.static('./packages/mermaid/dist'));
// app.use(express.static('./packages/mermaid-example-diagram/dist'));
app.use(express.static('./packages/mermaid-example-diagram/dist'));
app.use(vite.middlewares);
app.use(express.static('demos'));

55
V10-BreakingChanges.md
View File

@ -1,5 +1,58 @@
# A collection of updates that change the behaviour
# A collection of updates that change the behavior
## Async
`parse`, `render` are now async.
## Lazy loading and asynchronisity
- Invalid dates are rendered as syntax error instead of returning best guess or the current date
## ParseError is removed
```js
//< v10.0.0
mermaid.parse(text, parseError);
//>= v10.0.0
await mermaid.parse(text).catch(parseError);
// or
try {
await mermaid.parse(text);
} catch (err) {
parseError(err);
}
```
## Init deprecated and InitThrowsErrors removed
The config passed to `init` was not being used eariler.
It will now be used.
The `init` function is deprecated and will be removed in the next major release.
init currently works as a wrapper to `initialize` and `run`.
```js
//< v10.0.0
mermaid.init(config, selector, cb);
//>= v10.0.0
mermaid.initialize(config);
mermaid.run({
querySelector: selector,
postRenderCallback: cb,
suppressErrors: true,
});
```
```js
//< v10.0.0
mermaid.initThrowsErrors(config, selector, cb);
//>= v10.0.0
mermaid.initialize(config);
mermaid.run({
querySelector: selector,
postRenderCallback: cb,
suppressErrors: false,
});
```

2
cypress/integration/rendering/erDiagram.spec.js
View File

@ -188,7 +188,7 @@ describe('Entity Relationship Diagram', () => {
erDiagram
CLUSTER {
varchar(99) name
string(255) description
string(255) description
}
`,
{ logLevel: 1 }

2
cypress/integration/rendering/flowchart-elk.spec.js
View File

@ -1,6 +1,6 @@
import { imgSnapshotTest, renderGraph } from '../../helpers/util';
describe('Flowchart ELK', () => {
describe.skip('Flowchart ELK', () => {
it('1-elk: should render a simple flowchart', () => {
imgSnapshotTest(
`flowchart-elk TD

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

@ -670,6 +670,17 @@ title: Simple flowchart
---
flowchart TD
A --> B
`,
{ titleTopMargin: 0 }
);
});
it('3192: It should be possieble to render flowcharts with invisible edges', () => {
imgSnapshotTest(
`---
title: Simple flowchart with invisible edges
---
flowchart TD
A ~~~ B
`,
{ titleTopMargin: 0 }
);

6
cypress/integration/rendering/sequencediagram.spec.js
View File

@ -116,7 +116,11 @@ context('Sequence diagram', () => {
loop Loopy
Bob->>Alice: Pasten
end `,
{ wrap: true }
{
sequence: {
wrap: true,
},
}
);
});
context('font settings', () => {

16
cypress/platform/bundle-test.js
View File

@ -49,13 +49,9 @@ mermaid.initialize({
],
},
});
mermaid.render(
'the-id-of-the-svg',
code,
(svg) => {
console.log(svg);
const elem = document.querySelector('#graph-to-be');
elem.innerHTML = svg;
}
// ,document.querySelector('#tmp')
);
void (async () => {
const { svg } = await mermaid.render('the-id-of-the-svg', code);
console.log(svg);
const elem = document.querySelector('#graph-to-be');
elem.innerHTML = svg;
})();

4
cypress/platform/class.html
View File

@ -113,8 +113,8 @@ classE o-- classF : aggregation
callback Shape "callbackFunction" "This is a tooltip for a callback"
</pre>
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
};

4
cypress/platform/click_security_loose.html
View File

@ -125,7 +125,6 @@
</pre>
</div>
<script src="./mermaid.js"></script>
<script>
function clickByFlow(elemName) {
const div = document.createElement('div');
@ -162,6 +161,9 @@
document.getElementsByTagName('body')[0].appendChild(div);
}
</script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.initialize({ startOnLoad: true, securityLevel: 'loose', logLevel: 1 });
</script>
</body>

4
cypress/platform/click_security_other.html
View File

@ -59,8 +59,8 @@
Add another diagram to demo page : 48h
</pre>
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
function clickByFlow(elemName) {
const div = document.createElement('div');
div.className = 'created-by-click';

4
cypress/platform/click_security_sandbox.html
View File

@ -125,8 +125,8 @@
</pre>
</div>
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
function clickByFlow(elemName) {
const div = document.createElement('div');
div.className = 'created-by-click';

4
cypress/platform/click_security_strict.html
View File

@ -61,8 +61,8 @@
Add another diagram to demo page : 48h
</pre>
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
function clickByFlow(elemName) {
const div = document.createElement('div');
div.className = 'created-by-click';

4
cypress/platform/css1.html
View File

@ -28,8 +28,8 @@
end
A --> B
</pre>
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
function showFullFirstSquad(elemName) {
console.log('show ' + elemName);
}

4
cypress/platform/current2.html
View File

@ -107,8 +107,8 @@ Note over Alice,Bob: Looks
Note over Bob,Alice: Looks back
</pre>
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
};

38
cypress/platform/e2e.html
View File

@ -1,32 +1,12 @@
<html>
<head>
<meta charset="utf-8" />
<!-- <meta charset="iso-8859-15"/> -->
<script src="./viewer.js" type="module"></script>
<!-- <link href="https://fonts.googleapis.com/css?family=Mansalva&display=swap" rel="stylesheet" /> -->
<link
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
rel="stylesheet"
/>
<style>
body {
/* font-family: 'Mansalva', cursive;*/
/* font-family: 'Mansalva', cursive; */
/* font-family: 'arial'; */
/* font-family: "trebuchet ms", verdana, arial; */
}
/* div {
font-family: 'arial';
} */
/* .mermaid-main-font {
font-family: "trebuchet ms", verdana, arial;
font-family: var(--mermaid-font-family);
} */
/* :root {
--mermaid-font-family: '"trebuchet ms", verdana, arial';
--mermaid-font-family: "Comic Sans MS", "Comic Sans", cursive;
--mermaid-font-family: '"Lucida Console", Monaco, monospace';
} */
svg {
border: 2px solid darkred;
}
@ -36,21 +16,5 @@
}
</style>
</head>
<body>
<!-- <script src="./mermaid.js"></script> -->
<script>
// Notice startOnLoad=false
// This prevents default handling in mermaid from render before the e2e logic is applied
// mermaid.initialize({
// startOnLoad: false,
// useMaxWidth: true,
// // "themeCSS": ":root { --mermaid-font-family: \"trebuchet ms\", verdana, arial;}",
// // fontFamily: '\"trebuchet ms\", verdana, arial;'
// // fontFamily: '"Comic Sans MS", "Comic Sans", cursive'
// // fontFamily: '"Mansalva", cursive',
// // fontFamily: '"Noto Sans SC", sans-serif'
// fontFamily: '"Noto Sans SC", sans-serif'
// });
</script>
</body>
<body></body>
</html>

2
cypress/platform/external-diagrams-example-diagram.html
View File

@ -17,7 +17,7 @@ example-diagram
await mermaid.registerExternalDiagrams([exampleDiagram]);
await mermaid.initialize({ logLevel: 0 });
await mermaid.initThrowsErrorsAsync();
await mermaid.run();
if (window.Cypress) {
window.rendered = true;
}

4
cypress/platform/flow.html
View File

@ -29,8 +29,8 @@
click a_a "http://www.aftonbladet.se" "apa"
</pre>
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.initialize({
theme: 'forest',
// themeCSS: '.node rect { fill: red; }',

46
cypress/platform/flow2.html Normal file
View File

@ -0,0 +1,46 @@
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
<style>
body {
font-family: 'trebuchet ms', verdana, arial;
}
</style>
</head>
<body>
<pre class="mermaid">
graph TB
subgraph One
a1-->a2-->a3
end
</pre>
<pre class="mermaid">
graph TB
a_a --> b_b:::apa --> c_c:::apa
classDef apa fill:#f9f,stroke:#333,stroke-width:4px;
class a_a apa;
</pre>
<pre class="mermaid">
graph TB
a_a(Aftonbladet) --> b_b[gorilla]:::apa --> c_c{chimp}:::apa -->a_a
a_a --> c --> d_d --> c_c
classDef apa fill:#f9f,stroke:#333,stroke-width:4px;
class a_a apa;
click a_a "http://www.aftonbladet.se" "apa"
</pre>
<script type="module">
import mermaid from '../../packages/mermaid/src/mermaid';
mermaid.initialize({
theme: 'forest',
// themeCSS: '.node rect { fill: red; }',
logLevel: 3,
flowchart: { curve: 'linear' },
gantt: { axisFormat: '%m/%d/%Y' },
sequence: { actorMargin: 50 },
// sequenceDiagram: { actorMargin: 300 } // deprecated
});
</script>
</body>
</html>

14
cypress/platform/ghsa1.html
View File

@ -8,18 +8,18 @@
</div>
<svg id="diagram"></svg>
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.initialize({ startOnLoad: false, logLevel: 0 });
const graph = `
%%{ init: { "themeVariables" : { "textColor": "green;} #target { background-color: crimson }", "mainBkg": "#fff000" } } }%%
graph TD
A[Goose]
`;
%%{ init: { "themeVariables" : { "textColor": "green;} #target { background-color: crimson }", "mainBkg": "#fff000" } } }%%
graph TD
A[Goose]
`;
const diagram = document.getElementById('diagram');
const svg = mermaid.render('diagram-svg', graph);
const { svg } = await mermaid.render('diagram-svg', graph);
diagram.innerHTML = svg;
if (window.Cypress) {
window.rendered = true;

6
cypress/platform/ghsa2.html
View File

@ -8,8 +8,8 @@
</div>
<svg id="diagram"></svg>
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.initialize({ startOnLoad: false, logLevel: 0 });
const graph = `
@ -19,7 +19,7 @@
`;
const diagram = document.getElementById('diagram');
const svg = mermaid.render('diagram-svg', graph);
const { svg } = await mermaid.render('diagram-svg', graph);
diagram.innerHTML = svg;
if (window.Cypress) {
window.rendered = true;

16
cypress/platform/ghsa3.html
View File

@ -49,8 +49,8 @@
<div id="diagram" class="mermaid"></div>
<div id="res" class=""></div>
</div>
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
};
@ -91,13 +91,11 @@
diagram += 'le> * { background : red}</style>test</p>"]';
console.log(diagram);
// document.querySelector('#diagram').innerHTML = diagram;
mermaid.render('diagram', diagram, (res) => {
document.querySelector('#res').innerHTML = res;
if (window.Cypress) {
window.rendered = true;
}
});
const { svg } = await mermaid.render('diagram', diagram);
document.querySelector('#res').innerHTML = svg;
if (window.Cypress) {
window.rendered = true;
}
</script>
</body>
</html>

4
cypress/platform/git-graph.html
View File

@ -43,8 +43,8 @@
cssClass "BankAccount" customCss
</pre>
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
};

4
cypress/platform/gitgraph.html
View File

@ -130,8 +130,8 @@
commit
merge main
</pre>
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
};

4
cypress/platform/gitgraph2.html
View File

@ -98,8 +98,8 @@
commit
merge main
</pre>
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
};

4
cypress/platform/huge.html
View File

File diff suppressed because one or more lines are too long

4
cypress/platform/info.html
View File

@ -7,8 +7,8 @@
<pre class="mermaid">
info
</pre>
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.initialize({
theme: 'forest',
// themeCSS: '.node rect { fill: red; }',

4
cypress/platform/interaction.html
View File

@ -87,8 +87,8 @@
Add another diagram to demo page : 48h
</pre>
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
function clickByFlow(elemName) {
const div = document.createElement('div');
div.className = 'created-by-click';

2
cypress/platform/per.html
View File

@ -59,7 +59,7 @@ A-->B
>
<script src="./packages/mermaid-mindmap/dist/mermaid-mindmap-detector.js"></script>
<script src="./packages/mermaid-mindmap/dist/mermaid-example-diagram-detector.js"></script>
<script src="./packages/mermaid/dist/mermaid.js"></script>
<script src="./packages/mermaid/dist/mermaid.esm.mjs"></script>
<script>
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);

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

@ -1,14 +1,4 @@
<html>
<head>
<script src="http://localhost:9000/mermaid.js"></script>
<script>
mermaid.initialize({
theme: 'base',
themeVariables: {},
startOnLoad: true,
});
</script>
</head>
<body>
<h1>Example</h1>
<pre class="mermaid">
@ -26,4 +16,12 @@ sequenceDiagram
Note left of Ernie: Cookies are good
</pre>
</body>
<script type="module">
import mermaid from '/mermaid.esm.mjs';
mermaid.initialize({
theme: 'base',
themeVariables: {},
startOnLoad: true,
});
</script>
</html>

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

@ -9,19 +9,19 @@
<body>
<div id="graph"></div>
<script src="./mermaid.js"></script>
<script>
mermaid.init({ startOnLoad: false });
<script type="module">
import mermaid from './mermaid.esm.mjs';
await mermaid.initialize({ startOnLoad: false });
await mermaid.run();
mermaid.mermaidAPI.initialize({ securityLevel: 'strict' });
await mermaid.mermaidAPI.initialize({ securityLevel: 'strict' });
try {
console.log('rendering');
mermaid.mermaidAPI.render('graphDiv', `>`);
await mermaid.mermaidAPI.render('graphDiv', `>`);
} catch (e) {}
mermaid.mermaidAPI.render('graphDiv', `graph LR\n a --> b`, (html) => {
document.getElementById('graph').innerHTML = html;
});
const { svg } = await mermaid.mermaidAPI.render('graphDiv', `graph LR\n a --> b`);
document.getElementById('graph').innerHTML = svg;
</script>
</body>
</html>

18
cypress/platform/rerender.html
View File

@ -9,20 +9,20 @@
<body>
<div id="graph"></div>
<script src="./mermaid.js"></script>
<script>
mermaid.init({ startOnLoad: false });
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.initialize({ startOnLoad: false });
mermaid.mermaidAPI.initialize();
rerender('XMas');
function rerender(text) {
async function rerender(text) {
const graphText = `graph TD
A[${text}] -->|Get money| B(Go shopping)`;
const graph = mermaid.mermaidAPI.render('id', graphText);
console.log('\x1b[35m%s\x1b[0m', '>> graph', graph);
document.getElementById('graph').innerHTML = graph;
const { svg } = await mermaid.mermaidAPI.render('id', graphText);
console.log('\x1b[35m%s\x1b[0m', '>> graph', svg);
document.getElementById('graph').innerHTML = svg;
}
window.rerender = rerender;
await rerender('XMas');
</script>
<button id="rerender" onclick="rerender('Saturday')">Rerender</button>
</body>

4
cypress/platform/showcase_base.html
View File

@ -313,8 +313,8 @@ requirementDiagram
merge release
</pre>
</div>
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
};

4
cypress/platform/showcase_base_dark.html
View File

@ -308,8 +308,8 @@ gitGraph
</pre>
</div>
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
};

4
cypress/platform/showcase_dark.html
View File

@ -308,8 +308,8 @@ gitGraph
merge release
</pre>
</div>
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
};

4
cypress/platform/showcase_default.html
View File

@ -301,8 +301,8 @@ requirementDiagram
merge release
</pre>
</div>
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
};

4
cypress/platform/showcase_forest.html
View File

@ -305,8 +305,8 @@ requirementDiagram
merge release
</pre>
</div>
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
};

4
cypress/platform/showcase_neutral.html
View File

@ -305,8 +305,8 @@ requirementDiagram
merge release
</pre>
</div>
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
};

6
cypress/platform/sidv.html
View File

@ -239,12 +239,6 @@ sequenceDiagram
Today: 1, -1h
</pre>
<!-- <div id="cy"></div> -->
<!-- <script src="http://localhost:9000/packages/mermaid-mindmap/dist/mermaid-mindmap-detector.js"></script> -->
<!-- <script src="./mermaid-example-diagram-detector.js"></script> -->
<!-- <script src="//cdn.jsdelivr.net/npm/mermaid@9.1.7/dist/mermaid.min.js"></script> -->
<!-- <script src="./mermaid.js"></script> -->
<script type="module">
import mermaid from '../../packages/mermaid/src/mermaid';
mermaid.parseError = function (err, hash) {

4
cypress/platform/subgraph.html
View File

@ -34,8 +34,8 @@
9e122290-->82072290_1ec3_e711_8c5a_005056ad0002
style 9e122290 fill:#F99,stroke-width:2px,stroke:#F0F
</pre>
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
function showFullFirstSquad(elemName) {
console.log('show ' + elemName);
}

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

@ -120,8 +120,8 @@
</div>
</div>
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
};

4
cypress/platform/user-journey.html
View File

@ -25,8 +25,8 @@
Get into car:4: Dad, Mum, Child 1, Child 2
Drive home:3: Dad
</pre>
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.initialize({
theme: 'forest',
logLevel: 3,

4
cypress/platform/vertices.html
View File

@ -26,8 +26,8 @@
A --> B --> C
</pre>
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
function showFullFirstSquad(elemName) {
console.log('show ' + elemName);
}

29
cypress/platform/viewer.js
View File

@ -75,7 +75,7 @@ function merge(current, update) {
return current;
}
const contentLoadedApi = function () {
const contentLoadedApi = async function () {
let pos = document.location.href.indexOf('?graph=');
if (pos > 0) {
pos = pos + 7;
@ -102,38 +102,25 @@ const contentLoadedApi = function () {
mermaid2.initialize(cnf);
for (let i = 0; i < numCodes; i++) {
mermaid2.render(
const { svg, bindFunctions } = await mermaid2.render(
'newid' + i,
graphObj.code[i],
(svgCode, bindFunctions) => {
div.innerHTML = svgCode;
bindFunctions(div);
},
divs[i]
);
div.innerHTML = svg;
bindFunctions(div);
}
} else {
const div = document.createElement('div');
div.id = 'block';
div.className = 'mermaid';
// div.innerHTML = graphObj.code
console.warn('graphObj.mermaid', graphObj.mermaid);
document.getElementsByTagName('body')[0].appendChild(div);
mermaid2.initialize(graphObj.mermaid);
mermaid2.render(
'newid',
graphObj.code,
(svgCode, bindFunctions) => {
div.innerHTML = svgCode;
if (bindFunctions) {
bindFunctions(div);
}
},
div
);
const { svg, bindFunctions } = await mermaid2.render('newid', graphObj.code, div);
div.innerHTML = svg;
bindFunctions(div);
}
}
markRendered();
@ -148,7 +135,7 @@ if (typeof document !== 'undefined') {
function () {
if (this.location.href.match('xss.html')) {
this.console.log('Using api');
contentLoadedApi();
void contentLoadedApi();
} else {
this.console.log('Not using api');
void contentLoaded();

4
cypress/platform/xss.html
View File

@ -33,8 +33,8 @@
</script>
</head>
<body>
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.initialize({
startOnLoad: false,
useMaxWidth: true,

11
cypress/platform/xss10.html
View File

@ -49,8 +49,8 @@
<div id="diagram" class="mermaid"></div>
<div id="res" class=""></div>
</div>
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
};
@ -104,10 +104,9 @@
// diagram += "=xssAttack()> --> B";
console.log(diagram);
// document.querySelector('#diagram').innerHTML = diagram;
mermaid.render('diagram', diagram, (res) => {
console.log(res);
document.querySelector('#res').innerHTML = res;
});
const { svg } = await mermaid.render('diagram', diagram);
console.log(res);
document.querySelector('#res').innerHTML = svg;
</script>
</body>
</html>

11
cypress/platform/xss11.html
View File

@ -49,8 +49,8 @@
<div id="diagram" class="mermaid"></div>
<div id="res" class=""></div>
</div>
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
};
@ -102,10 +102,9 @@
// diagram += "=xssAttack()> --> B";
console.log(diagram);
// document.querySelector('#diagram').innerHTML = diagram;
mermaid.render('diagram', diagram, (res) => {
console.log(res);
document.querySelector('#res').innerHTML = res;
});
const { svg } = await mermaid.render('diagram', diagram);
console.log(res);
document.querySelector('#res').innerHTML = svg;
</script>
</body>
</html>

11
cypress/platform/xss12.html
View File

@ -49,8 +49,8 @@
<div id="diagram" class="mermaid"></div>
<div id="res" class=""></div>
</div>
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
};
@ -102,10 +102,9 @@
// diagram += "=xssAttack()> --> B";
console.log(diagram);
// document.querySelector('#diagram').innerHTML = diagram;
mermaid.render('diagram', diagram, (res) => {
console.log(res);
document.querySelector('#res').innerHTML = res;
});
const { svg } = await mermaid.render('diagram', diagram);
console.log(res);
document.querySelector('#res').innerHTML = svg;
</script>
</body>
</html>

11
cypress/platform/xss13.html
View File

@ -49,8 +49,8 @@
<div id="diagram" class="mermaid"></div>
<div id="res" class=""></div>
</div>
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
};
@ -102,10 +102,9 @@
// diagram += "=xssAttack()> --> B";
console.log(diagram);
// document.querySelector('#diagram').innerHTML = diagram;
mermaid.render('diagram', diagram, (res) => {
console.log(res);
document.querySelector('#res').innerHTML = res;
});
const { svg } = await mermaid.render('diagram', diagram);
console.log(res);
document.querySelector('#res').innerHTML = svg;
</script>
</body>
</html>

11
cypress/platform/xss14.html
View File

@ -49,8 +49,8 @@
<div id="diagram" class="mermaid"></div>
<div id="res" class=""></div>
</div>
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
};
@ -104,10 +104,9 @@
// diagram += "=xssAttack()> --> B";
console.log(diagram);
// document.querySelector('#diagram').innerHTML = diagram;
mermaid.render('diagram', diagram, (res) => {
console.log(res);
document.querySelector('#res').innerHTML = res;
});
const { svg } = await mermaid.render('diagram', diagram);
console.log(res);
document.querySelector('#res').innerHTML = svg;
</script>
</body>
</html>

11
cypress/platform/xss15.html
View File

@ -49,8 +49,8 @@
<div id="diagram" class="mermaid"></div>
<div id="res" class=""></div>
</div>
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
};
@ -103,10 +103,9 @@
// diagram += "=xssAttack()> --> B";
console.log(diagram);
// document.querySelector('#diagram').innerHTML = diagram;
mermaid.render('diagram', diagram, (res) => {
console.log(res);
document.querySelector('#res').innerHTML = res;
});
const { svg } = await mermaid.render('diagram', diagram);
console.log(res);
document.querySelector('#res').innerHTML = svg;
</script>
</body>
</html>

11
cypress/platform/xss16.html
View File

@ -49,8 +49,8 @@
<div id="diagram" class="mermaid"></div>
<div id="res" class=""></div>
</div>
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
};
@ -102,10 +102,9 @@
// diagram += '//via.placeholder.com/64\' width=64 />"]';
// console.log(diagram);
// document.querySelector('#diagram').innerHTML = diagram;
mermaid.render('diagram', diagram, (res) => {
console.log(res);
document.querySelector('#res').innerHTML = res;
});
const { svg } = await mermaid.render('diagram', diagram);
console.log(res);
document.querySelector('#res').innerHTML = svg;
</script>
</body>
</html>

11
cypress/platform/xss17.html
View File

@ -49,8 +49,8 @@
<div id="diagram" class="mermaid"></div>
<div id="res" class=""></div>
</div>
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
};
@ -102,10 +102,9 @@
// diagram += '//via.placeholder.com/64\' width=64 />"]';
// console.log(diagram);
// document.querySelector('#diagram').innerHTML = diagram;
mermaid.render('diagram', diagram, (res) => {
console.log(res);
document.querySelector('#res').innerHTML = res;
});
const { svg } = await mermaid.render('diagram', diagram);
console.log(res);
document.querySelector('#res').innerHTML = svg;
</script>
</body>
</html>

11
cypress/platform/xss18.html
View File

@ -49,8 +49,8 @@
<div id="diagram" class="mermaid"></div>
<div id="res" class=""></div>
</div>
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
};
@ -101,10 +101,9 @@
// diagram += '//via.placeholder.com/64\' width=64 />"]';
// console.log(diagram);
// document.querySelector('#diagram').innerHTML = diagram;
mermaid.render('diagram', diagram, (res) => {
console.log(res);
document.querySelector('#res').innerHTML = res;
});
const { svg } = await mermaid.render('diagram', diagram);
console.log(res);
document.querySelector('#res').innerHTML = svg;
</script>
</body>
</html>

11
cypress/platform/xss19.html
View File

@ -49,8 +49,8 @@
<div id="diagram" class="mermaid"></div>
<div id="res" class=""></div>
</div>
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
};
@ -103,10 +103,9 @@ class Shape{
// diagram += '//via.placeholder.com/64\' width=64 />"]';
// console.log(diagram);
// document.querySelector('#diagram').innerHTML = diagram;
mermaid.render('diagram', diagram, (res) => {
console.log(res);
document.querySelector('#res').innerHTML = res;
});
const { svg } = await mermaid.render('diagram', diagram);
console.log(res);
document.querySelector('#res').innerHTML = svg;
</script>
</body>
</html>

6
cypress/platform/xss2.html
View File

@ -48,8 +48,8 @@
Alice->>Bob: Hi Bob
Bob->>Alice: Hi Alice
</pre>
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.initialize({
startOnLoad: true,
useMaxWidth: true,
@ -59,7 +59,7 @@
const handler = setInterval(() => {
cnt++;
a = {};
if (typeof a.polluted !== 'undefined') {
if (a.polluted !== undefined) {
clearInterval(handler);
xssAttack();
}

10
cypress/platform/xss20.html
View File

@ -49,8 +49,8 @@
<div id="diagram" class="mermaid"></div>
<div id="res" class=""></div>
</div>
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
};
@ -101,10 +101,8 @@ A --> B["<a href='javasc`;
diagram += `ript#colon;xssAttack()'>AAA</a>"]`;
// diagram += '//via.placeholder.com/64\' width=64 />"]';
// document.querySelector('#diagram').innerHTML = diagram;
mermaid.render('diagram', diagram, (res) => {
// console.log(res);
document.querySelector('#res').innerHTML = res;
});
const { svg } = await mermaid.render('diagram', diagram);
document.querySelector('#res').innerHTML = svg;
</script>
</body>
</html>

12
cypress/platform/xss21.html
View File

@ -49,8 +49,8 @@
<div id="diagram" class="mermaid"></div>
<div id="res" class=""></div>
</div>
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
};
@ -97,14 +97,12 @@
// A --> B["&lt;a href='javascript`;
// diagram += `ript#colon;xssAttack()'&gt;AAA&lt;/a&gt;"]`;
let diagram = ` graph TD
A --> B["<a href='javasc`;
A --> B["<a href='javasc`;
diagram += `ript#9;t#colon;xssAttack()'>AAA</a>"]`;
// diagram += '//via.placeholder.com/64\' width=64 />"]';
// document.querySelector('#diagram').innerHTML = diagram;
mermaid.render('diagram', diagram, (res) => {
console.log(res);
document.querySelector('#res').innerHTML = res;
});
const { svg } = await mermaid.render('diagram', diagram);
document.querySelector('#res').innerHTML = svg;
</script>
</body>
</html>

4
cypress/platform/xss22.html
View File

@ -8,8 +8,8 @@
graph TD
A --&gt; B["&lt;a href='javascript#9;t#colon;alert(document.location)'&gt;AAA&lt;/a&gt;"]
</pre>
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.initialize({ startOnLoad: true });
</script>
</body>

4
cypress/platform/xss3.html
View File

@ -36,8 +36,8 @@
graph LR
A --> B
</pre>
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.initialize({
startOnLoad: true,
useMaxWidth: true,

9
cypress/platform/xss4.html
View File

@ -49,8 +49,8 @@
<div id="diagram" class="mermaid"></div>
<div id="res" class=""></div>
</div>
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
};
@ -95,9 +95,8 @@
console.log(diagram);
// document.querySelector('#diagram').innerHTML = diagram;
mermaid.render('diagram', diagram, (res) => {
document.querySelector('#res').innerHTML = res;
});
const { svg } = await mermaid.render('diagram', diagram);
document.querySelector('#res').innerHTML = svg;
</script>
</body>
</html>

11
cypress/platform/xss5.html
View File

@ -49,8 +49,8 @@
<div id="diagram" class="mermaid"></div>
<div id="res" class=""></div>
</div>
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
};
@ -99,10 +99,9 @@
console.log(diagram);
// document.querySelector('#diagram').innerHTML = diagram;
mermaid.render('diagram', diagram, (res) => {
console.log(res);
document.querySelector('#res').innerHTML = res;
});
const { svg } = await mermaid.render('diagram', diagram);
console.log(res);
document.querySelector('#res').innerHTML = svg;
</script>
</body>
</html>

11
cypress/platform/xss6.html
View File

@ -49,8 +49,8 @@
<div id="diagram" class="mermaid"></div>
<div id="res" class=""></div>
</div>
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
};
@ -97,10 +97,9 @@
// 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;
});
const { svg } = await mermaid.render('diagram', diagram);
console.log(res);
document.querySelector('#res').innerHTML = svg;
</script>
</body>
</html>

11
cypress/platform/xss7.html
View File

@ -49,8 +49,8 @@
<div id="diagram" class="mermaid"></div>
<div id="res" class=""></div>
</div>
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
};
@ -99,10 +99,9 @@
// 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;
});
const { svg } = await mermaid.render('diagram', diagram);
console.log(res);
document.querySelector('#res').innerHTML = svg;
</script>
</body>
</html>

11
cypress/platform/xss8.html
View File

@ -49,8 +49,8 @@
<div id="diagram" class="mermaid"></div>
<div id="res" class=""></div>
</div>
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
};
@ -98,10 +98,9 @@
// 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;
});
const { svg } = await mermaid.render('diagram', diagram);
console.log(res);
document.querySelector('#res').innerHTML = svg;
</script>
</body>
</html>

11
cypress/platform/xss9.html
View File

@ -49,8 +49,8 @@
<div id="diagram" class="mermaid"></div>
<div id="res" class=""></div>
</div>
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
};
@ -98,10 +98,9 @@
// 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;
});
const { svg } = await mermaid.render('diagram', diagram);
console.log(res);
document.querySelector('#res').innerHTML = svg;
</script>
</body>
</html>

22
demos/c4context.html
View File

@ -217,8 +217,8 @@
</pre>
<hr />
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
const ALLOWED_TAGS = [
'a',
'b',
@ -273,8 +273,7 @@
},
// sequenceDiagram: { actorMargin: 300 } // deprecated
});
</script>
<script>
function testClick(nodeId) {
console.log('clicked', nodeId);
let originalBgColor = document.querySelector('body').style.backgroundColor;
@ -283,21 +282,18 @@
document.querySelector('body').style.backgroundColor = originalBgColor;
}, 100);
}
</script>
<script>
const testLineEndings = (test, input) => {
const testLineEndings = async (test, input) => {
try {
mermaid.render(test, input, () => {
//no-op
});
await mermaid.render(test, input);
} catch (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');
await testLineEndings('CR', 'graph LR\rsubgraph CR\rA --> B\rend');
await testLineEndings('LF', 'graph LR\nsubgraph LF\nA --> B\nend');
await testLineEndings('CRLF', 'graph LR\r\nsubgraph CRLF\r\nA --> B\r\nend');
</script>
</body>
</html>

4
demos/classchart.html
View File

@ -154,8 +154,8 @@
</pre>
<hr />
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.initialize({
theme: 'default',
// themeCSS: '.node rect { fill: red; }',

4
demos/dataflowchart.html
View File

@ -34,8 +34,8 @@
noSide[|borders:no| stroke no side ];
</pre>
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.initialize({
theme: 'forest',
logLevel: 3,

2
demos/er.html
View File

@ -109,8 +109,8 @@
MANUFACTURER only one to zero or more CAR : makes
</pre>
<script src="./mermaid.js"></script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.initialize({
theme: 'default',

4
demos/flowchart.html
View File

@ -1507,8 +1507,8 @@
<h1 id="link-clicked">Anchor for "link-clicked" test</h1>
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.initialize({
theme: 'forest',
logLevel: 3,

4
demos/gantt.html
View File

@ -182,8 +182,8 @@
}
</script>
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.initialize({
logLevel: 3,
securityLevel: 'loose',

4
demos/git.html
View File

@ -38,8 +38,8 @@
merge newbranch
</pre>
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
const ALLOWED_TAGS = [
'a',
'b',

6
demos/journey.html
View File

@ -17,7 +17,7 @@
<h1>Journey diagram demo</h1>
<pre class="mermaid">
---
title: My working day
title: My working day
---
journey
accTitle: Very simple journey demo
@ -32,8 +32,8 @@
Sit down: 3: Me
</pre>
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.initialize({
theme: 'forest',
logLevel: 3,

1
demos/mindmap.html
View File

@ -40,7 +40,6 @@
<script type="module">
import mermaid from './mermaid.esm.mjs';
import mermaidMindmap from './mermaid-mindmap.esm.mjs';
const ALLOWED_TAGS = [
'a',

4
demos/requirements.html
View File

@ -159,8 +159,8 @@
An Example <- copies - test_entity2
</pre>
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.initialize({
theme: 'neutral',
// themeCSS: '.node rect { fill: red; }',

4
demos/sequence.html
View File

@ -144,8 +144,8 @@
>
<hr />
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.initialize({
theme: 'base',
// themeCSS: '.node rect { fill: red; }',

4
demos/state.html
View File

@ -218,8 +218,8 @@
</pre>
<hr />
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.initialize({
theme: 'default',
// themeCSS: '.node rect { fill: red; }',

4
demos/timeline.html
View File

@ -23,8 +23,8 @@
1940 : fourth step : fifth step
</pre>
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.initialize({
theme: 'forest',
logLevel: 1,

19
docs/config/setup/interfaces/mermaidAPI.ParseOptions.md Normal file
View File

@ -0,0 +1,19 @@
> **Warning**
>
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
>
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/interfaces/mermaidAPI.ParseOptions.md](../../../../packages/mermaid/src/docs/config/setup/interfaces/mermaidAPI.ParseOptions.md).
# Interface: ParseOptions
[mermaidAPI](../modules/mermaidAPI.md).ParseOptions
## Properties
### suppressErrors
• `Optional` **suppressErrors**: `boolean`
#### Defined in
[mermaidAPI.ts:70](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L70)

54
docs/config/setup/interfaces/mermaidAPI.RenderResult.md Normal file
View File

@ -0,0 +1,54 @@
> **Warning**
>
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
>
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/interfaces/mermaidAPI.RenderResult.md](../../../../packages/mermaid/src/docs/config/setup/interfaces/mermaidAPI.RenderResult.md).
# Interface: RenderResult
[mermaidAPI](../modules/mermaidAPI.md).RenderResult
## Properties
### bindFunctions
• `Optional` **bindFunctions**: (`element`: `Element`) => `void`
#### Type declaration
▸ (`element`): `void`
Bind function to be called after the svg has been inserted into the DOM.
This is necessary for adding event listeners to the elements in the svg.
```js
const { svg, bindFunctions } = mermaidAPI.render('id1', 'graph TD;A-->B');
div.innerHTML = svg;
bindFunctions?.(div); // To call bindFunctions only if it's present.
```
##### Parameters
| Name | Type |
| :-------- | :-------- |
| `element` | `Element` |
##### Returns
`void`
#### Defined in
[mermaidAPI.ts:91](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L91)
---
### svg
• **svg**: `string`
The svg code for the rendered graph.
#### Defined in
[mermaidAPI.ts:81](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L81)

29
docs/config/setup/modules/mermaidAPI.md
View File

@ -6,6 +6,11 @@
# Module: mermaidAPI
## Interfaces
- [ParseOptions](../interfaces/mermaidAPI.ParseOptions.md)
- [RenderResult](../interfaces/mermaidAPI.RenderResult.md)
## References
### default
@ -20,13 +25,13 @@ Renames and re-exports [mermaidAPI](mermaidAPI.md#mermaidapi)
#### Defined in
[mermaidAPI.ts:74](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L74)
[mermaidAPI.ts:75](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L75)
## Variables
### mermaidAPI
• `Const` **mermaidAPI**: `Readonly`<{ `defaultConfig`: `MermaidConfig` = configApi.defaultConfig; `getConfig`: () => `MermaidConfig` = configApi.getConfig; `getSiteConfig`: () => `MermaidConfig` = configApi.getSiteConfig; `globalReset`: () => `void` ; `initialize`: (`options`: `MermaidConfig`) => `void` ; `parse`: (`text`: `string`, `parseError?`: `ParseErrorFunction`) => `boolean` ; `parseAsync`: (`text`: `string`, `parseError?`: `ParseErrorFunction`) => `Promise`<`boolean`> ; `parseDirective`: (`p`: `any`, `statement`: `string`, `context`: `string`, `type`: `string`) => `void` ; `render`: (`id`: `string`, `text`: `string`, `cb?`: (`svgCode`: `string`, `bindFunctions?`: (`element`: `Element`) => `void`) => `void`, `svgContainingElement?`: `Element`) => `string` ; `renderAsync`: (`id`: `string`, `text`: `string`, `cb?`: (`svgCode`: `string`, `bindFunctions?`: (`element`: `Element`) => `void`) => `void`, `svgContainingElement?`: `Element`) => `Promise`<`string`> ; `reset`: () => `void` ; `setConfig`: (`conf`: `MermaidConfig`) => `MermaidConfig` = configApi.setConfig; `updateSiteConfig`: (`conf`: `MermaidConfig`) => `MermaidConfig` = configApi.updateSiteConfig }>
• `Const` **mermaidAPI**: `Readonly`<{ `defaultConfig`: `MermaidConfig` = configApi.defaultConfig; `getConfig`: () => `MermaidConfig` = configApi.getConfig; `getSiteConfig`: () => `MermaidConfig` = configApi.getSiteConfig; `globalReset`: () => `void` ; `initialize`: (`options`: `MermaidConfig`) => `void` ; `parse`: (`text`: `string`, `parseOptions?`: [`ParseOptions`](../interfaces/mermaidAPI.ParseOptions.md)) => `Promise`<`boolean` | `void`> ; `parseDirective`: (`p`: `any`, `statement`: `string`, `context`: `string`, `type`: `string`) => `void` ; `render`: (`id`: `string`, `text`: `string`, `svgContainingElement?`: `Element`) => `Promise`<[`RenderResult`](../interfaces/mermaidAPI.RenderResult.md)> ; `reset`: () => `void` ; `setConfig`: (`conf`: `MermaidConfig`) => `MermaidConfig` = configApi.setConfig; `updateSiteConfig`: (`conf`: `MermaidConfig`) => `MermaidConfig` = configApi.updateSiteConfig }>
## mermaidAPI configuration defaults
@ -90,7 +95,7 @@ mermaid.initialize(config);
#### Defined in
[mermaidAPI.ts:886](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L886)
[mermaidAPI.ts:680](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L680)
## Functions
@ -121,7 +126,7 @@ Return the last node appended
#### Defined in
[mermaidAPI.ts:287](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L287)
[mermaidAPI.ts:308](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L308)
---
@ -147,7 +152,7 @@ the cleaned up svgCode
#### Defined in
[mermaidAPI.ts:238](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L238)
[mermaidAPI.ts:259](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L259)
---
@ -173,7 +178,7 @@ the string with all the user styles
#### Defined in
[mermaidAPI.ts:167](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L167)
[mermaidAPI.ts:188](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L188)
---
@ -196,7 +201,7 @@ the string with all the user styles
#### Defined in
[mermaidAPI.ts:215](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L215)
[mermaidAPI.ts:236](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L236)
---
@ -223,7 +228,7 @@ with an enclosing block that has each of the cssClasses followed by !important;
#### Defined in
[mermaidAPI.ts:151](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L151)
[mermaidAPI.ts:172](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L172)
---
@ -243,7 +248,7 @@ with an enclosing block that has each of the cssClasses followed by !important;
#### Defined in
[mermaidAPI.ts:131](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L131)
[mermaidAPI.ts:152](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L152)
---
@ -263,7 +268,7 @@ with an enclosing block that has each of the cssClasses followed by !important;
#### Defined in
[mermaidAPI.ts:102](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L102)
[mermaidAPI.ts:123](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L123)
---
@ -289,7 +294,7 @@ Put the svgCode into an iFrame. Return the iFrame code
#### Defined in
[mermaidAPI.ts:266](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L266)
[mermaidAPI.ts:287](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L287)
---
@ -314,4 +319,4 @@ Remove any existing elements from the given document
#### Defined in
[mermaidAPI.ts:337](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L337)
[mermaidAPI.ts:358](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L358)

8
docs/config/usage.md
View File

@ -59,7 +59,7 @@ Example:
```html
<script type="module">
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@9/dist/mermaid.esm.min.mjs';
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
mermaid.initialize({ startOnLoad: true });
</script>
```
@ -82,7 +82,7 @@ Example:
B-->D(fa:fa-spinner);
</pre>
<script type="module">
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@9/dist/mermaid.esm.min.mjs';
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
mermaid.initialize({ startOnLoad: true });
</script>
</body>
@ -331,8 +331,8 @@ The future proof way of setting the configuration is by using the initialization
on what kind of integration you use.
```html
<script src="../dist/mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
let config = { startOnLoad: true, flowchart: { useMaxWidth: false, htmlLabels: true } };
mermaid.initialize(config);
</script>

4
docs/intro/index.md
View File

@ -249,7 +249,7 @@ To select a version:
Replace `<version>` with the desired version number.
Latest Version: <https://cdn.jsdelivr.net/npm/mermaid@9>
Latest Version: <https://cdn.jsdelivr.net/npm/mermaid@10>
## Deploying Mermaid
@ -267,7 +267,7 @@ To Deploy Mermaid:
```html
<script type="module">
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@9/dist/mermaid.esm.min.mjs';
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
mermaid.initialize({ startOnLoad: true });
</script>
```

6
docs/intro/n00b-gettingStarted.md
View File

@ -128,14 +128,14 @@ b. The importing of mermaid library through the `mermaid.esm.js` or `mermaid.esm
```html
<body>
<script type="module">
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@9/dist/mermaid.esm.min.mjs';
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
mermaid.initialize({ startOnLoad: true });
</script>
</body>
```
**Notes**:
Rendering in Mermaid is initialized by `mermaid.initialize()` call. You can place `mermaid.initialize()` inside `mermaid.min.js` for brevity. However, doing the opposite lets you control when it starts looking for `<div>`tags inside the web page with `mermaid.initialize()`. This is useful when you think that not all `<div>` tags may have loaded on the execution of `mermaid.min.js` file.
Rendering in Mermaid is initialized by `mermaid.initialize()` call. You can place `mermaid.initialize()` inside `mermaid.esm.min.mjs` for brevity. However, doing the opposite lets you control when it starts looking for `<div>`tags inside the web page with `mermaid.initialize()`. This is useful when you think that not all `<div>` tags may have loaded on the execution of `mermaid.esm.min.mjs` file.
`startOnLoad` is one of the parameters that can be defined by `mermaid.initialize()`
@ -172,7 +172,7 @@ Please refer to the [Mindmap](../syntax/mindmap.md?id=integrating-with-your-libr
</pre>
<script type="module">
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@9/dist/mermaid.esm.min.mjs';
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
mermaid.initialize({ startOnLoad: true });
</script>
</body>

14
docs/syntax/flowchart.md
View File

@ -391,6 +391,20 @@ flowchart LR
A == text ==> B
```
### An invisible link
This can be a useful tool in some instances where you want to alter the default positioning of a node.
```mermaid-example
flowchart LR
A ~~~ B
```
```mermaid
flowchart LR
A ~~~ B
```
### Chaining of links
It is possible declare many links in the same line as per below:

12
docs/syntax/mindmap.md
View File

@ -262,7 +262,7 @@ You can still use the pre 9.4.0 method to add mermaid with mindmaps to a web pag
```html
<script type="module">
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@9/dist/mermaid.esm.min.mjs';
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@9.3.0/dist/mermaid.esm.min.mjs';
import mindmap from 'https://cdn.jsdelivr.net/npm/@mermaid-js/mermaid-mindmap@9.3.0/dist/mermaid-mindmap.esm.min.mjs';
await mermaid.registerExternalDiagrams([mindmap]);
</script>
@ -272,16 +272,8 @@ From version 9.4.0 you can simplify this code to:
```html
<script type="module">
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@9/dist/mermaid.esm.min.mjs';
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
</script>
```
or if you prefer not using the ESM package:
```html
<script src="https://cdn.jsdelivr.net/npm/mermaid@9/dist/mermaid.min.js"></script>
```
Note that more complex integrations that use the **render** function directly need to use the **renderAsync** method instead in order to render mind maps.
You can also refer the implementation in the live editor [here](https://github.com/mermaid-js/mermaid-live-editor/blob/develop/src/lib/util/mermaid.ts) to see how the async loading is done.

6
docs/syntax/timeline.md
View File

@ -466,9 +466,9 @@ Timeline uses experimental lazy loading & async rendering features which could c
You can use this method to add mermaid including the timeline diagram to a web page:
```html
<script src="https://cdn.jsdelivr.net/npm/mermaid@9/dist/mermaid.min.js"></script>
<script type="module">
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
</script>
```
Note that more complex integrations that the **render** function directly need to use the **renderAsync** method instead in order to render timeline.
You can also refer the implementation in the live editor [here](https://github.com/mermaid-js/mermaid-live-editor/blob/develop/src/lib/util/mermaid.ts) to see how the async loading is done.

12
package.json
View File

@ -34,7 +34,7 @@
"test:watch": "vitest --watch",
"test:coverage": "vitest --coverage",
"prepublishOnly": "pnpm build && pnpm test",
"prepare": "concurrently \"husky install\" \"pnpm build\"",
"prepare": "husky install && pnpm build",
"pre-commit": "lint-staged"
},
"repository": {
@ -58,8 +58,9 @@
"@commitlint/cli": "^17.2.0",
"@commitlint/config-conventional": "^17.2.0",
"@cspell/eslint-plugin": "^6.14.2",
"@types/cors": "^2.8.13",
"@types/eslint": "^8.4.10",
"@types/express": "^4.17.14",
"@types/express": "^4.17.17",
"@types/js-yaml": "^4.0.5",
"@types/jsdom": "^21.0.0",
"@types/lodash": "^4.14.188",
@ -73,6 +74,7 @@
"@vitest/spy": "^0.28.4",
"@vitest/ui": "^0.28.4",
"concurrently": "^7.5.0",
"cors": "^2.8.5",
"coveralls": "^3.1.1",
"cypress": "^12.0.0",
"cypress-image-snapshot": "^4.0.1",
@ -103,11 +105,11 @@
"prettier-plugin-jsdoc": "^0.4.2",
"rimraf": "^4.0.0",
"rollup-plugin-visualizer": "^5.8.3",
"start-server-and-test": "^1.14.0",
"start-server-and-test": "^1.15.4",
"ts-node": "^10.9.1",
"typescript": "^4.8.4",
"vite": "^4.0.0",
"vitest": "^0.28.4"
"vite": "^4.1.1",
"vitest": "^0.28.5"
},
"volta": {
"node": "18.14.0"

14
packages/mermaid/package.json
View File

@ -1,13 +1,12 @@
{
"name": "mermaid",
"version": "9.4.0",
"version": "10.0.0",
"description": "Markdown-ish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
"main": "./dist/mermaid.min.js",
"type": "module",
"module": "./dist/mermaid.core.mjs",
"types": "./dist/mermaid.d.ts",
"exports": {
".": {
"require": "./dist/mermaid.min.js",
"import": "./dist/mermaid.core.mjs",
"types": "./dist/mermaid.d.ts"
},
@ -56,13 +55,13 @@
"cytoscape": "^3.23.0",
"cytoscape-cose-bilkent": "^4.1.0",
"cytoscape-fcose": "^2.1.0",
"d3": "^7.0.0",
"d3": "^7.4.0",
"dagre-d3-es": "7.0.8",
"dompurify": "2.4.3",
"elkjs": "^0.8.2",
"khroma": "^2.0.0",
"lodash-es": "^4.17.21",
"moment": "^2.29.4",
"moment-mini": "^2.29.4",
"non-layered-tidy-tree-layout": "^2.0.2",
"stylis": "^4.1.2",
"ts-dedent": "^2.2.0",
@ -109,8 +108,5 @@
"dist",
"README.md"
],
"sideEffects": [
"**/*.css",
"**/*.scss"
]
"sideEffects": false
}

83
packages/mermaid/src/Diagram.ts
View File

@ -3,26 +3,24 @@ import { log } from './logger';
import { getDiagram, registerDiagram } from './diagram-api/diagramAPI';
import { detectType, getDiagramLoader } from './diagram-api/detectType';
import { extractFrontMatter } from './diagram-api/frontmatter';
import { isDetailedError } from './utils';
import type { DetailedError } from './utils';
import { UnknownDiagramError } from './errors';
import { DetailedError } from './utils';
export type ParseErrorFunction = (err: string | DetailedError | unknown, hash?: any) => void;
export class Diagram {
type = 'graph';
parser;
renderer;
db;
private detectTypeFailed = false;
constructor(public txt: string, parseError?: ParseErrorFunction) {
private detectError?: UnknownDiagramError;
constructor(public text: string) {
this.text += '\n';
const cnf = configApi.getConfig();
this.txt = txt;
try {
this.type = detectType(txt, cnf);
this.type = detectType(text, cnf);
} catch (e) {
this.handleError(e, parseError);
this.type = 'error';
this.detectTypeFailed = true;
this.detectError = e as UnknownDiagramError;
}
const diagram = getDiagram(this.type);
log.debug('Type ' + this.type);
@ -46,44 +44,19 @@ export class Diagram {
diagram.init(cnf);
log.info('Initialized diagram ' + this.type, cnf);
}
this.txt += '\n';
this.parse(this.txt, parseError);
this.parse();
}
parse(text: string, parseError?: ParseErrorFunction): boolean {
if (this.detectTypeFailed) {
return false;
parse() {
if (this.detectError) {
throw this.detectError;
}
try {
text = text + '\n';
this.db.clear?.();
this.parser.parse(text);
return true;
} catch (error) {
this.handleError(error, parseError);
}
return false;
this.db.clear?.();
this.parser.parse(this.text);
}
handleError(error: unknown, parseError?: ParseErrorFunction) {
// Is this the correct way to access mermaid's parseError()
// method ? (or global.mermaid.parseError()) ?
if (parseError === undefined) {
// No mermaid.parseError() handler defined, so re-throw it
throw error;
}
if (isDetailedError(error)) {
// Handle case where error string and hash were
// wrapped in object like`const error = { str, hash };`
parseError(error.str, error.hash);
return;
}
// Otherwise, assume it is just an error string and pass it on
parseError(error as string);
async render(id: string, version: string) {
await this.renderer.draw(this.text, id, version, this);
}
getParser() {
@ -95,30 +68,20 @@ export class Diagram {
}
}
export const getDiagramFromText = (
txt: string,
parseError?: ParseErrorFunction
): Diagram | Promise<Diagram> => {
const type = detectType(txt, configApi.getConfig());
export const getDiagramFromText = async (text: string): Promise<Diagram> => {
const type = detectType(text, configApi.getConfig());
try {
// Trying to find the diagram
getDiagram(type);
} catch (error) {
const loader = getDiagramLoader(type);
if (!loader) {
throw new Error(`Diagram ${type} not found.`);
throw new UnknownDiagramError(`Diagram ${type} not found.`);
}
// TODO: Uncomment for v10
// // Diagram not available, loading it
// const { diagram } = await loader();
// registerDiagram(type, diagram, undefined, diagram.injectUtils);
// // new diagram will try getDiagram again and if fails then it is a valid throw
return loader().then(({ diagram }) => {
registerDiagram(type, diagram, undefined);
return new Diagram(txt, parseError);
});
// Diagram not available, loading it.
// new diagram will try getDiagram again and if fails then it is a valid throw
const { id, diagram } = await loader();
registerDiagram(id, diagram);
}
return new Diagram(txt, parseError);
return new Diagram(text);
};
export default Diagram;

20
packages/mermaid/src/__mocks__/mermaidAPI.ts
View File

@ -5,24 +5,14 @@
*/
import * as configApi from '../config';
import { vi } from 'vitest';
import { addDiagrams } from '../diagram-api/diagram-orchestration';
import Diagram, { type ParseErrorFunction } from '../Diagram';
// Normally, we could just do the following to get the original `parse()`
// implementation, however, requireActual returns a promise and it's not documented how to use withing mock file.
/** {@inheritDoc mermaidAPI.parse} */
function parse(text: string, parseError?: ParseErrorFunction): boolean {
addDiagrams();
const diagram = new Diagram(text, parseError);
return diagram.parse(text, parseError);
}
import { mermaidAPI as mAPI } from '../mermaidAPI';
// original version cannot be modified since it was frozen with `Object.freeze()`
export const mermaidAPI = {
render: vi.fn(),
renderAsync: vi.fn(),
parse,
render: vi.fn().mockResolvedValue({
svg: '<svg></svg>',
}),
parse: mAPI.parse,
parseDirective: vi.fn(),
initialize: vi.fn(),
getConfig: configApi.getConfig,

1
packages/mermaid/src/config.ts
View File

@ -243,6 +243,7 @@ const checkConfig = (config: MermaidConfig) => {
if (!config) {
return;
}
// @ts-expect-error Properties were removed in v10. Warning should exist.
if (config.lazyLoadedDiagrams || config.loadExternalDiagramsAtStartup) {
issueWarning('LAZY_LOAD_DEPRECATED');
}

4
packages/mermaid/src/config.type.ts
View File

@ -3,10 +3,6 @@
import DOMPurify from 'dompurify';
export interface MermaidConfig {
/** @deprecated use mermaid.registerLazyDiagrams instead */
lazyLoadedDiagrams?: string[];
/** @deprecated use mermaid.registerLazyDiagrams instead */
loadExternalDiagramsAtStartup?: boolean;
theme?: string;
themeVariables?: any;
themeCSS?: string;

3
packages/mermaid/src/dagre-wrapper/edges.js
View File

@ -453,6 +453,9 @@ export const insertEdge = function (elem, e, edge, clusterDb, diagramType, graph
case 'thick':
strokeClasses = 'edge-thickness-thick';
break;
case 'invisible':
strokeClasses = 'edge-thickness-thick';
break;
default:
strokeClasses = '';
}

37
packages/mermaid/src/diagram-api/detectType.ts
View File

@ -7,6 +7,8 @@ import type {
ExternalDiagramDefinition,
} from './types';
import { frontMatterRegex } from './frontmatter';
import { getDiagram, registerDiagram } from './diagramAPI';
import { UnknownDiagramError } from '../errors';
const directive = /%{2}{\s*(?:(\w+)\s*:|(\w+))\s*(?:(\w+)|((?:(?!}%{2}).|\r?\n)*))?\s*(?:}%{2})?/gi;
const anyComment = /\s*%%.*\n/gm;
@ -44,7 +46,7 @@ export const detectType = function (text: string, config?: MermaidConfig): strin
}
}
throw new Error(`No diagram type detected for text: ${text}`);
throw new UnknownDiagramError(`No diagram type detected for text: ${text}`);
};
export const registerLazyLoadedDiagrams = (...diagrams: ExternalDiagramDefinition[]) => {
@ -53,6 +55,39 @@ export const registerLazyLoadedDiagrams = (...diagrams: ExternalDiagramDefinitio
}
};
export const loadRegisteredDiagrams = async () => {
log.debug(`Loading registered diagrams`);
// Load all lazy loaded diagrams in parallel
const results = await Promise.allSettled(
Object.entries(detectors).map(async ([key, { detector, loader }]) => {
if (loader) {
try {
getDiagram(key);
} catch (error) {
try {
// Register diagram if it is not already registered
const { diagram, id } = await loader();
registerDiagram(id, diagram, detector);
} catch (err) {
// Remove failed diagram from detectors
log.error(`Failed to load external diagram with key ${key}. Removing from detectors.`);
delete detectors[key];
throw err;
}
}
}
})
);
const failed = results.filter((result) => result.status === 'rejected');
if (failed.length > 0) {
log.error(`Failed to load ${failed.length} external diagrams`);
for (const res of failed) {
log.error(res);
}
throw new Error(`Failed to load ${failed.length} external diagrams`);
}
};
export const addDetector = (key: string, detector: DiagramDetector, loader?: DiagramLoader) => {
if (detectors[key]) {
log.error(`Detector with key ${key} already exists`);

382
packages/mermaid/src/diagram-api/diagram-orchestration.ts
View File

@ -1,104 +1,24 @@
import { registerDiagram } from './diagramAPI';
// @ts-ignore: TODO Fix ts errors
import gitGraphParser from '../diagrams/git/parser/gitGraph';
import { gitGraphDetector } from '../diagrams/git/gitGraphDetector';
import gitGraphDb from '../diagrams/git/gitGraphAst';
import gitGraphRenderer from '../diagrams/git/gitGraphRenderer';
import gitGraphStyles from '../diagrams/git/styles';
// @ts-ignore: TODO Fix ts errors
import c4Parser from '../diagrams/c4/parser/c4Diagram';
import { c4Detector } from '../diagrams/c4/c4Detector';
import c4Db from '../diagrams/c4/c4Db';
import c4Renderer from '../diagrams/c4/c4Renderer';
import c4Styles from '../diagrams/c4/styles';
// @ts-ignore: TODO Fix ts errors
import classParser from '../diagrams/class/parser/classDiagram';
import { classDetector } from '../diagrams/class/classDetector';
import { classDetectorV2 } from '../diagrams/class/classDetector-V2';
import classDb from '../diagrams/class/classDb';
import classRenderer from '../diagrams/class/classRenderer';
import classRendererV2 from '../diagrams/class/classRenderer-v2';
import classStyles from '../diagrams/class/styles';
// @ts-ignore: TODO Fix ts errors
import erParser from '../diagrams/er/parser/erDiagram';
import { erDetector } from '../diagrams/er/erDetector';
import erDb from '../diagrams/er/erDb';
import erRenderer from '../diagrams/er/erRenderer';
import erStyles from '../diagrams/er/styles';
// @ts-ignore: TODO Fix ts errors
import flowParser from '../diagrams/flowchart/parser/flow';
import { flowDetector } from '../diagrams/flowchart/flowDetector';
import { flowDetectorV2 } from '../diagrams/flowchart/flowDetector-v2';
import flowDb from '../diagrams/flowchart/flowDb';
import flowRenderer from '../diagrams/flowchart/flowRenderer';
import flowRendererV2 from '../diagrams/flowchart/flowRenderer-v2';
import flowStyles from '../diagrams/flowchart/styles';
// @ts-ignore: TODO Fix ts errors
import ganttParser from '../diagrams/gantt/parser/gantt';
import { ganttDetector } from '../diagrams/gantt/ganttDetector';
import ganttDb from '../diagrams/gantt/ganttDb';
import ganttRenderer from '../diagrams/gantt/ganttRenderer';
import ganttStyles from '../diagrams/gantt/styles';
// @ts-ignore: TODO Fix ts errors
import infoParser from '../diagrams/info/parser/info';
import infoDb from '../diagrams/info/infoDb';
import infoRenderer from '../diagrams/info/infoRenderer';
import { infoDetector } from '../diagrams/info/infoDetector';
import infoStyles from '../diagrams/info/styles';
// @ts-ignore: TODO Fix ts errors
import pieParser from '../diagrams/pie/parser/pie';
import { pieDetector } from '../diagrams/pie/pieDetector';
import pieDb from '../diagrams/pie/pieDb';
import pieRenderer from '../diagrams/pie/pieRenderer';
import pieStyles from '../diagrams/pie/styles';
// @ts-ignore: TODO Fix ts errors
import requirementParser from '../diagrams/requirement/parser/requirementDiagram';
import { requirementDetector } from '../diagrams/requirement/requirementDetector';
import requirementDb from '../diagrams/requirement/requirementDb';
import requirementRenderer from '../diagrams/requirement/requirementRenderer';
import requirementStyles from '../diagrams/requirement/styles';
// @ts-ignore: TODO Fix ts errors
import sequenceParser from '../diagrams/sequence/parser/sequenceDiagram';
import { sequenceDetector } from '../diagrams/sequence/sequenceDetector';
import sequenceDb from '../diagrams/sequence/sequenceDb';
import sequenceRenderer from '../diagrams/sequence/sequenceRenderer';
import sequenceStyles from '../diagrams/sequence/styles';
// @ts-ignore: TODO Fix ts errors
import stateParser from '../diagrams/state/parser/stateDiagram';
import { stateDetector } from '../diagrams/state/stateDetector';
import { stateDetectorV2 } from '../diagrams/state/stateDetector-V2';
import stateDb from '../diagrams/state/stateDb';
import stateRenderer from '../diagrams/state/stateRenderer';
import stateRendererV2 from '../diagrams/state/stateRenderer-v2';
import stateStyles from '../diagrams/state/styles';
// @ts-ignore: TODO Fix ts errors
import journeyParser from '../diagrams/user-journey/parser/journey';
import { journeyDetector } from '../diagrams/user-journey/journeyDetector';
import journeyDb from '../diagrams/user-journey/journeyDb';
import journeyRenderer from '../diagrams/user-journey/journeyRenderer';
import journeyStyles from '../diagrams/user-journey/styles';
import { setConfig } from '../config';
import errorRenderer from '../diagrams/error/errorRenderer';
import errorStyles from '../diagrams/error/styles';
import c4 from '../diagrams/c4/c4Detector';
import flowchart from '../diagrams/flowchart/flowDetector';
import flowchartV2 from '../diagrams/flowchart/flowDetector-v2';
import er from '../diagrams/er/erDetector';
import git from '../diagrams/git/gitGraphDetector';
import gantt from '../diagrams/gantt/ganttDetector';
import info from '../diagrams/info/infoDetector';
import pie from '../diagrams/pie/pieDetector';
import requirement from '../diagrams/requirement/requirementDetector';
import sequence from '../diagrams/sequence/sequenceDetector';
import classDiagram from '../diagrams/class/classDetector';
import classDiagramV2 from '../diagrams/class/classDetector-V2';
import state from '../diagrams/state/stateDetector';
import stateV2 from '../diagrams/state/stateDetector-V2';
import journey from '../diagrams/user-journey/journeyDetector';
import error from '../diagrams/error/errorDetector';
import flowchartElk from '../diagrams/flowchart/elk/detector';
import timeline from '../diagrams/timeline/detector';
import mindmap from '../diagrams/mindmap/detector';
import { registerLazyLoadedDiagrams } from './detectType';
// Lazy loaded diagrams
import timelineDetector from '../diagrams/timeline/detector';
import mindmapDetector from '../diagrams/mindmap/detector';
import { registerDiagram } from './diagramAPI';
let hasLoadedDiagrams = false;
export const addDiagrams = () => {
@ -108,31 +28,6 @@ export const addDiagrams = () => {
// This is added here to avoid race-conditions.
// We could optimize the loading logic somehow.
hasLoadedDiagrams = true;
registerLazyLoadedDiagrams(flowchartElk, timelineDetector, mindmapDetector);
registerDiagram(
'error',
// Special diagram with error messages but setup as a regular diagram
{
db: {
clear: () => {
// Quite ok, clear needs to be there for error to work as a regular diagram
},
},
styles: errorStyles,
renderer: errorRenderer,
parser: {
parser: { yy: {} },
parse: () => {
// no op
},
},
init: () => {
// no op
},
},
(text) => text.toLowerCase().trim() === 'error'
);
registerDiagram(
'---',
// --- diagram type may appear if YAML front-matter is not parsed correctly
@ -142,8 +37,8 @@ export const addDiagrams = () => {
// Quite ok, clear needs to be there for --- to work as a regular diagram
},
},
styles: errorStyles, // should never be used
renderer: errorRenderer, // should never be used
styles: {}, // should never be used
renderer: {}, // should never be used
parser: {
parser: { yy: {} },
parse: () => {
@ -160,220 +55,25 @@ export const addDiagrams = () => {
return text.toLowerCase().trimStart().startsWith('---');
}
);
registerDiagram(
'c4',
{
parser: c4Parser,
db: c4Db,
renderer: c4Renderer,
styles: c4Styles,
init: (cnf) => {
c4Renderer.setConf(cnf.c4);
},
},
c4Detector
);
registerDiagram(
'class',
{
parser: classParser,
db: classDb,
renderer: classRenderer,
styles: classStyles,
init: (cnf) => {
if (!cnf.class) {
cnf.class = {};
}
cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
classDb.clear();
},
},
classDetector
);
registerDiagram(
'classDiagram',
{
parser: classParser,
db: classDb,
renderer: classRendererV2,
styles: classStyles,
init: (cnf) => {
if (!cnf.class) {
cnf.class = {};
}
cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
classDb.clear();
},
},
classDetectorV2
);
registerDiagram(
'er',
{
parser: erParser,
db: erDb,
renderer: erRenderer,
styles: erStyles,
},
erDetector
);
registerDiagram(
'gantt',
{
parser: ganttParser,
db: ganttDb,
renderer: ganttRenderer,
styles: ganttStyles,
},
ganttDetector
);
registerDiagram(
'info',
{
parser: infoParser,
db: infoDb,
renderer: infoRenderer,
styles: infoStyles,
},
infoDetector
);
registerDiagram(
'pie',
{
parser: pieParser,
db: pieDb,
renderer: pieRenderer,
styles: pieStyles,
},
pieDetector
);
registerDiagram(
'requirement',
{
parser: requirementParser,
db: requirementDb,
renderer: requirementRenderer,
styles: requirementStyles,
},
requirementDetector
);
registerDiagram(
'sequence',
{
parser: sequenceParser,
db: sequenceDb,
renderer: sequenceRenderer,
styles: sequenceStyles,
init: (cnf) => {
if (!cnf.sequence) {
cnf.sequence = {};
}
cnf.sequence.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
if ('sequenceDiagram' in cnf) {
throw new Error(
'`mermaid config.sequenceDiagram` has been renamed to `config.sequence`. Please update your mermaid config.'
);
}
sequenceDb.setWrap(cnf.wrap);
sequenceRenderer.setConf(cnf.sequence);
},
},
sequenceDetector
);
registerDiagram(
'state',
{
parser: stateParser,
db: stateDb,
renderer: stateRenderer,
styles: stateStyles,
init: (cnf) => {
if (!cnf.state) {
cnf.state = {};
}
cnf.state.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
stateDb.clear();
},
},
stateDetector
);
registerDiagram(
'stateDiagram',
{
parser: stateParser,
db: stateDb,
renderer: stateRendererV2,
styles: stateStyles,
init: (cnf) => {
if (!cnf.state) {
cnf.state = {};
}
cnf.state.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
stateDb.clear();
},
},
stateDetectorV2
);
registerDiagram(
'journey',
{
parser: journeyParser,
db: journeyDb,
renderer: journeyRenderer,
styles: journeyStyles,
init: (cnf) => {
journeyRenderer.setConf(cnf.journey);
journeyDb.clear();
},
},
journeyDetector
);
registerDiagram(
'flowchart',
{
parser: flowParser,
db: flowDb,
renderer: flowRendererV2,
styles: flowStyles,
init: (cnf) => {
if (!cnf.flowchart) {
cnf.flowchart = {};
}
// TODO, broken as of 2022-09-14 (13809b50251845475e6dca65cc395761be38fbd2)
cnf.flowchart.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
flowRenderer.setConf(cnf.flowchart);
flowDb.clear();
flowDb.setGen('gen-1');
},
},
flowDetector
);
registerDiagram(
'flowchart-v2',
{
parser: flowParser,
db: flowDb,
renderer: flowRendererV2,
styles: flowStyles,
init: (cnf) => {
if (!cnf.flowchart) {
cnf.flowchart = {};
}
cnf.flowchart.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
// flowchart-v2 uses dagre-wrapper, which doesn't have access to flowchart cnf
setConfig({ flowchart: { arrowMarkerAbsolute: cnf.arrowMarkerAbsolute } });
flowRendererV2.setConf(cnf.flowchart);
flowDb.clear();
flowDb.setGen('gen-2');
},
},
flowDetectorV2
);
registerDiagram(
'gitGraph',
{ parser: gitGraphParser, db: gitGraphDb, renderer: gitGraphRenderer, styles: gitGraphStyles },
gitGraphDetector
registerLazyLoadedDiagrams(
error,
c4,
classDiagram,
classDiagramV2,
er,
gantt,
info,
pie,
requirement,
sequence,
flowchart,
flowchartV2,
flowchartElk,
mindmap,
timeline,
git,
state,
stateV2,
journey
);
};

4
packages/mermaid/src/diagram-api/diagramAPI.spec.ts
View File

@ -2,8 +2,12 @@ import { detectType } from './detectType';
import { getDiagram, registerDiagram } from './diagramAPI';
import { addDiagrams } from './diagram-orchestration';
import { DiagramDetector } from './types';
import { getDiagramFromText } from '../Diagram';
addDiagrams();
beforeAll(async () => {
await getDiagramFromText('sequenceDiagram');
});
describe('DiagramAPI', () => {
it('should return default diagrams', () => {

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