Merge branch 'develop' into pr/dreathed/4856
* develop: (21 commits) Linting chore: temp fix for eslint OOM chore: Update error snapshots Fix ESLint chore: Prettier chore: YOLO `pnpm --recursive update` chore: Remove commitlint Fix flowchart-elk render test chore: Add example page link in index chore: Remove cy.viewport fix: Cypress test for Suppress Error fix: Race condition when running suppressError test. fix: Retain default behavior when rendering errors cases chore: Add suppressErrorRendering to secure flags. fix: Remove blank SVG docs: Rebuild Add test Add test chore: Add suppressErrorRendering to config Throw error when detecting diagram type failed and `suppressErrorRendering` is set ...
This commit is contained in:
Sidharth Vinod
commit
edac77de74
|
|
@ -1,3 +0,0 @@
|
|||
{
|
||||
"extends": ["@commitlint/config-conventional"]
|
||||
}
|
||||
|
|
@ -14,7 +14,7 @@ module.exports = {
|
|||
},
|
||||
tsconfigRootDir: __dirname,
|
||||
sourceType: 'module',
|
||||
ecmaVersion: 2020,
|
||||
ecmaVersion: 2022,
|
||||
allowAutomaticSingleRunInference: true,
|
||||
project: ['./tsconfig.eslint.json', './packages/*/tsconfig.json'],
|
||||
parser: '@typescript-eslint/parser',
|
||||
|
|
@ -23,7 +23,7 @@ module.exports = {
|
|||
'eslint:recommended',
|
||||
'plugin:@typescript-eslint/recommended',
|
||||
'plugin:json/recommended',
|
||||
'plugin:markdown/recommended',
|
||||
'plugin:markdown/recommended-legacy',
|
||||
'plugin:@cspell/recommended',
|
||||
'prettier',
|
||||
],
|
||||
|
|
|
|||
|
|
@ -1,4 +0,0 @@
|
|||
#!/bin/sh
|
||||
# . "$(dirname "$0")/_/husky.sh"
|
||||
|
||||
# npx --no-install commitlint --edit $1
|
||||
|
|
@ -3,5 +3,6 @@
|
|||
"printWidth": 100,
|
||||
"singleQuote": true,
|
||||
"useTabs": false,
|
||||
"tabWidth": 2
|
||||
"tabWidth": 2,
|
||||
"trailingComma": "es5"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -125,4 +125,46 @@ describe('Configuration', () => {
|
|||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe('suppressErrorRendering', () => {
|
||||
beforeEach(() => {
|
||||
cy.on('uncaught:exception', (err, runnable) => {
|
||||
return !err.message.includes('Parse error on line');
|
||||
});
|
||||
});
|
||||
|
||||
it('should not render error diagram if suppressErrorRendering is set', () => {
|
||||
const url = 'http://localhost:9000/suppressError.html?suppressErrorRendering=true';
|
||||
cy.visit(url);
|
||||
cy.window().should('have.property', 'rendered', true);
|
||||
cy.get('#test')
|
||||
.find('svg')
|
||||
.should(($svg) => {
|
||||
// all failing diagrams should not appear!
|
||||
expect($svg).to.have.length(2);
|
||||
// none of the diagrams should be error diagrams
|
||||
expect($svg).to.not.contain('Syntax error');
|
||||
});
|
||||
cy.matchImageSnapshot(
|
||||
'configuration.spec-should-not-render-error-diagram-if-suppressErrorRendering-is-set'
|
||||
);
|
||||
});
|
||||
|
||||
it('should render error diagram if suppressErrorRendering is not set', () => {
|
||||
const url = 'http://localhost:9000/suppressError.html';
|
||||
cy.visit(url);
|
||||
cy.window().should('have.property', 'rendered', true);
|
||||
cy.get('#test')
|
||||
.find('svg')
|
||||
.should(($svg) => {
|
||||
// all five diagrams should be rendered
|
||||
expect($svg).to.have.length(5);
|
||||
// some of the diagrams should be error diagrams
|
||||
expect($svg).to.contain('Syntax error');
|
||||
});
|
||||
cy.matchImageSnapshot(
|
||||
'configuration.spec-should-render-error-diagram-if-suppressErrorRendering-is-not-set'
|
||||
);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -810,7 +810,10 @@ context('Sequence diagram', () => {
|
|||
note left of Alice: config: mirrorActors=true<br/>directive: mirrorActors=false
|
||||
Bob->>Alice: Short as well
|
||||
`,
|
||||
{ logLevel: 0, sequence: { mirrorActors: true, noteFontSize: 18, noteFontFamily: 'Arial' } }
|
||||
{
|
||||
logLevel: 0,
|
||||
sequence: { mirrorActors: true, noteFontSize: 18, noteFontFamily: 'Arial' },
|
||||
}
|
||||
);
|
||||
});
|
||||
});
|
||||
|
|
@ -861,7 +864,10 @@ context('Sequence diagram', () => {
|
|||
a->>j: Hello John, how are you?
|
||||
j-->>a: Great!
|
||||
`,
|
||||
{ logLevel: 0, sequence: { mirrorActors: true, noteFontSize: 18, noteFontFamily: 'Arial' } }
|
||||
{
|
||||
logLevel: 0,
|
||||
sequence: { mirrorActors: true, noteFontSize: 18, noteFontFamily: 'Arial' },
|
||||
}
|
||||
);
|
||||
});
|
||||
it('should support actor links and properties when not mirrored EXPERIMENTAL: USE WITH CAUTION', () => {
|
||||
|
|
|
|||
|
|
@ -33,7 +33,9 @@
|
|||
background-image: radial-gradient(#fff 1%, transparent 11%),
|
||||
radial-gradient(#fff 1%, transparent 11%);
|
||||
background-size: 20px 20px;
|
||||
background-position: 0 0, 10px 10px;
|
||||
background-position:
|
||||
0 0,
|
||||
10px 10px;
|
||||
background-repeat: repeat;
|
||||
}
|
||||
.malware {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
|
|
|
|||
|
|
@ -0,0 +1,59 @@
|
|||
<!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=" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="test">
|
||||
<pre class="mermaid">
|
||||
flowchart
|
||||
a[This should be visible]
|
||||
</pre
|
||||
>
|
||||
<pre class="mermaid">
|
||||
flowchart
|
||||
a --< b
|
||||
</pre
|
||||
>
|
||||
<pre class="mermaid">
|
||||
flowchart
|
||||
a[This should be visible]
|
||||
</pre
|
||||
>
|
||||
<pre class="mermaid">
|
||||
---
|
||||
config:
|
||||
suppressErrorRendering: true # This should not affect anything, as suppressErrorRendering is a secure config
|
||||
---
|
||||
flowchart
|
||||
a --< b
|
||||
</pre
|
||||
>
|
||||
<pre class="mermaid">
|
||||
---
|
||||
config:
|
||||
suppressErrorRendering: false # This should not affect anything, as suppressErrorRendering is a secure config
|
||||
---
|
||||
flowchart
|
||||
a --< b
|
||||
</pre
|
||||
>
|
||||
</div>
|
||||
<script type="module">
|
||||
import mermaid from './mermaid.esm.mjs';
|
||||
const shouldSuppress =
|
||||
new URLSearchParams(window.location.search).get('suppressErrorRendering') === 'true';
|
||||
mermaid.initialize({ startOnLoad: false, suppressErrorRendering: shouldSuppress });
|
||||
try {
|
||||
await mermaid.run();
|
||||
} catch {
|
||||
if (window.Cypress) {
|
||||
window.rendered = true;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import mermaid from './mermaid.esm.mjs';
|
||||
import flowchartELK from './mermaid-flowchart-elk.esm.mjs';
|
||||
import externalExample from './mermaid-example-diagram.esm.mjs';
|
||||
import zenUml from './mermaid-zenuml.esm.mjs';
|
||||
|
||||
|
|
@ -45,7 +46,7 @@ const contentLoaded = async function () {
|
|||
document.getElementsByTagName('body')[0].appendChild(div);
|
||||
}
|
||||
|
||||
await mermaid.registerExternalDiagrams([externalExample, zenUml]);
|
||||
await mermaid.registerExternalDiagrams([externalExample, zenUml, flowchartELK]);
|
||||
mermaid.initialize(graphObj.mermaid);
|
||||
await mermaid.run();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en" xmlns="http://www.w3.org/1999/html">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
|
|
|
|||
|
|
@ -39,6 +39,8 @@ graph TB
|
|||
|
||||
<script type="module">
|
||||
import mermaid from '/mermaid.esm.mjs';
|
||||
import flowchartELK from '/mermaid-flowchart-elk.esm.mjs';
|
||||
await mermaid.registerExternalDiagrams([flowchartELK]);
|
||||
async function render(str) {
|
||||
const { svg } = await mermaid.render('dynamic', str);
|
||||
document.getElementById('dynamicDiagram').innerHTML = svg;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
|
|
@ -18,6 +18,7 @@
|
|||
<p>
|
||||
Some of these pages have duplicates; some are slow to load because they have so many graphs.
|
||||
</p>
|
||||
<p>You can test custom code in the <a href="./dev/example.html">development page</a>.</p>
|
||||
<p>
|
||||
If you'd like to clean up one of the pages, please feel free to
|
||||
<a href="https://github.com/mermaid-js/mermaid/pulls">submit a pull request (PR).</a>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en" xmlns="http://www.w3.org/1999/html">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en" xmlns="http://www.w3.org/1999/html">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
|
|
|
|||
|
|
@ -175,13 +175,15 @@ statement
|
|||
|
||||
The functions for setting title and description are provided by a common module. This is the import from flowDb.js:
|
||||
|
||||
import {
|
||||
```
|
||||
import {
|
||||
setAccTitle,
|
||||
getAccTitle,
|
||||
getAccDescription,
|
||||
setAccDescription,
|
||||
clear as commonClear,
|
||||
} from '../../commonDb';
|
||||
} from '../../commonDb';
|
||||
```
|
||||
|
||||
The accessibility title and description are inserted into the SVG element in the `render` function in mermaidAPI.
|
||||
|
||||
|
|
|
|||
|
|
@ -64,13 +64,15 @@ The syntax for accessible titles and descriptions is described in [the Accessibi
|
|||
|
||||
The functions for setting title and description are provided by a common module. This is the import in flowDb.js:
|
||||
|
||||
import {
|
||||
```
|
||||
import {
|
||||
setAccTitle,
|
||||
getAccTitle,
|
||||
getAccDescription,
|
||||
setAccDescription,
|
||||
clear as commonClear,
|
||||
} from '../../commonDb';
|
||||
} from '../../commonDb';
|
||||
```
|
||||
|
||||
The accessibility title and description are inserted into the SVG element in the `render` function in mermaidAPI.
|
||||
|
||||
|
|
|
|||
|
|
@ -47,7 +47,8 @@ Here the structure of a directive text is like a nested key-value pair map or a
|
|||
|
||||
The following code snippet shows the structure of a directive:
|
||||
|
||||
%%{
|
||||
```
|
||||
%%{
|
||||
init: {
|
||||
"theme": "dark",
|
||||
"fontFamily": "monospace",
|
||||
|
|
@ -60,15 +61,20 @@ The following code snippet shows the structure of a directive:
|
|||
"mirrorActors": true
|
||||
}
|
||||
}
|
||||
}%%
|
||||
}%%
|
||||
```
|
||||
|
||||
You can also define the directives in a single line, like this:
|
||||
|
||||
%%{init: { **insert configuration options here** } }%%
|
||||
```
|
||||
%%{init: { **insert configuration options here** } }%%
|
||||
```
|
||||
|
||||
For example, the following code snippet:
|
||||
|
||||
%%{init: { "sequence": { "mirrorActors":false }}}%%
|
||||
```
|
||||
%%{init: { "sequence": { "mirrorActors":false }}}%%
|
||||
```
|
||||
|
||||
**Notes:**
|
||||
The JSON object that is passed as {**argument**} must be valid key value pairs and encased in quotation marks or it will be ignored.
|
||||
|
|
|
|||
|
|
@ -61,7 +61,7 @@ By default, MathML is used for rendering mathematical expressions. If you have u
|
|||
Example with legacy mode enabled (the latest version of KaTeX's stylesheet can be found on their [docs](https://katex.org/docs/browser.html)):
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<!-- KaTeX requires the use of the HTML5 doctype. Without it, KaTeX may not render properly -->
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
|
|
|||
|
|
@ -43,6 +43,7 @@ const config = {
|
|||
securityLevel: 'strict',
|
||||
startOnLoad: true,
|
||||
arrowMarkerAbsolute: false,
|
||||
suppressErrorRendering: false,
|
||||
|
||||
er: {
|
||||
diagramPadding: 20,
|
||||
|
|
@ -97,7 +98,7 @@ mermaid.initialize(config);
|
|||
|
||||
#### Defined in
|
||||
|
||||
[mermaidAPI.ts:622](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L622)
|
||||
[mermaidAPI.ts:635](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L635)
|
||||
|
||||
## Functions
|
||||
|
||||
|
|
|
|||
|
|
@ -73,7 +73,7 @@ Example:
|
|||
## Simple full example:
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<body>
|
||||
<pre class="mermaid">
|
||||
|
|
|
|||
|
|
@ -311,7 +311,9 @@ xychart-beta
|
|||
|
||||
### CDN
|
||||
|
||||
https://cdn.jsdelivr.net/npm/mermaid@<version>/dist/
|
||||
```
|
||||
https://cdn.jsdelivr.net/npm/mermaid@<version>/dist/
|
||||
```
|
||||
|
||||
To select a version:
|
||||
|
||||
|
|
|
|||
|
|
@ -51,7 +51,7 @@ One should **beware the use of some words or symbols** that can break diagrams.
|
|||
| Diagram Breakers | Reason | Solution |
|
||||
| ------------------------------------------------------------------------------------ | ----------------------------------------------------------------------- | ------------------------------------------------- |
|
||||
| **Comments** | | |
|
||||
| [` %%{``}%% `](https://github.com/mermaid-js/mermaid/issues/1968) | Similar to [Directives](../config/directives.md) confuses the renderer. | In comments using `%%`, avoid using "{}". |
|
||||
| [`%%{``}%%`](https://github.com/mermaid-js/mermaid/issues/1968) | Similar to [Directives](../config/directives.md) confuses the renderer. | In comments using `%%`, avoid using "{}". |
|
||||
| **Flow-Charts** | | |
|
||||
| 'end' | The word "End" can cause Flowcharts and Sequence diagrams to break | Wrap them in quotation marks to prevent breakage. |
|
||||
| [Nodes inside Nodes](../syntax/flowchart.md?id=special-characters-that-break-syntax) | Mermaid gets confused with nested shapes | wrap them in quotation marks to prevent breaking |
|
||||
|
|
|
|||
|
|
@ -636,8 +636,10 @@ Understanding and avoiding common syntax errors is key to a smooth experience wi
|
|||
|
||||
A common mistake is incorrect linking syntax, which can lead to unexpected results or broken diagrams:
|
||||
|
||||
block-beta
|
||||
```
|
||||
block-beta
|
||||
A - B
|
||||
```
|
||||
|
||||
**Correction**:
|
||||
Ensure that links between blocks are correctly specified with arrows (--> or ---) to define the direction and type of connection. Also remember that one of the fundaments for block diagram is to give the author full control of where the boxes are positioned so in the example you need to add a space between the boxes:
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
|
||||
> "In software engineering, a class diagram in the Unified Modeling Language (UML) is a type of static structure diagram that describes the structure of a system by showing the system's classes, their attributes, operations (or methods), and the relationships among objects."
|
||||
>
|
||||
> \-Wikipedia
|
||||
> -Wikipedia
|
||||
|
||||
The class diagram is the main building block of object-oriented modeling. It is used for general conceptual modeling of the structure of the application, and for detailed modeling to translate the models into programming code. Class diagrams can also be used for data modeling. The classes in a class diagram represent both the main elements, interactions in the application, and the classes to be programmed.
|
||||
|
||||
|
|
@ -296,7 +296,9 @@ To describe the visibility (or encapsulation) of an attribute or method/function
|
|||
|
||||
A relationship is a general term covering the specific types of logical connections found on class and object diagrams.
|
||||
|
||||
[classA][Arrow][ClassB]
|
||||
```
|
||||
[classA][Arrow][ClassB]
|
||||
```
|
||||
|
||||
There are eight different types of relations defined for classes under UML which are currently supported:
|
||||
|
||||
|
|
@ -369,7 +371,9 @@ classO .. classP : Link(Dashed)
|
|||
|
||||
It is possible to add label text to a relation:
|
||||
|
||||
[classA][Arrow][ClassB]:LabelText
|
||||
```
|
||||
[classA][Arrow][ClassB]:LabelText
|
||||
```
|
||||
|
||||
```mermaid-example
|
||||
classDiagram
|
||||
|
|
@ -401,7 +405,9 @@ classDiagram
|
|||
|
||||
Here is the syntax:
|
||||
|
||||
[Relation Type][Link][Relation Type]
|
||||
```
|
||||
[Relation Type][Link][Relation Type]
|
||||
```
|
||||
|
||||
Where `Relation Type` can be one of:
|
||||
|
||||
|
|
@ -465,7 +471,9 @@ The different cardinality options are :
|
|||
|
||||
Cardinality can be easily defined by placing the text option within quotes `"` before or after a given arrow. For example:
|
||||
|
||||
[classA] "cardinality1" [Arrow] "cardinality2" [ClassB]:LabelText
|
||||
```
|
||||
[classA] "cardinality1" [Arrow] "cardinality2" [ClassB]:LabelText
|
||||
```
|
||||
|
||||
```mermaid-example
|
||||
classDiagram
|
||||
|
|
@ -618,9 +626,11 @@ It is possible to bind a click event to a node. The click can lead to either a j
|
|||
|
||||
You would define these actions on a separate line after all classes have been declared.
|
||||
|
||||
action className "reference" "tooltip"
|
||||
click className call callback() "tooltip"
|
||||
click className href "url" "tooltip"
|
||||
```
|
||||
action className "reference" "tooltip"
|
||||
click className call callback() "tooltip"
|
||||
click className href "url" "tooltip"
|
||||
```
|
||||
|
||||
- _action_ is either `link` or `callback`, depending on which type of interaction you want to have called
|
||||
- _className_ is the id of the node that the action will be associated with
|
||||
|
|
@ -803,11 +813,15 @@ should have a different look. This is done by predefining classes in css styles
|
|||
|
||||
Then attaching that class to a specific node:
|
||||
|
||||
```
|
||||
cssClass "nodeId1" styleClass;
|
||||
```
|
||||
|
||||
It is also possible to attach a class to a list of nodes in one statement:
|
||||
|
||||
```
|
||||
cssClass "nodeId1,nodeId2" styleClass;
|
||||
```
|
||||
|
||||
A shorter form of adding a class is to attach the classname to the node using the `:::` operator:
|
||||
|
||||
|
|
|
|||
|
|
@ -86,7 +86,9 @@ When including attributes on ER diagrams, you must decide whether to include for
|
|||
|
||||
Mermaid syntax for ER diagrams is compatible with PlantUML, with an extension to label the relationship. Each statement consists of the following parts:
|
||||
|
||||
```
|
||||
<first-entity> [<relationship> <second-entity> : <relationship-label>]
|
||||
```
|
||||
|
||||
Where:
|
||||
|
||||
|
|
@ -97,7 +99,9 @@ Where:
|
|||
|
||||
For example:
|
||||
|
||||
```
|
||||
PROPERTY ||--|{ ROOM : contains
|
||||
```
|
||||
|
||||
This statement can be read as _a property contains one or more rooms, and a room is part of one and only one property_. You can see that the label here is from the first entity's perspective: a property contains a room, but a room does not contain a property. When considered from the perspective of the second entity, the equivalent label is usually very easy to infer. (Some ER diagrams label relationships from both perspectives, but this is not supported here, and is usually superfluous).
|
||||
|
||||
|
|
|
|||
|
|
@ -642,9 +642,11 @@ Numbers given are base 10, so `#` can be encoded as `#35;`. It is also supported
|
|||
|
||||
## Subgraphs
|
||||
|
||||
subgraph title
|
||||
```
|
||||
subgraph title
|
||||
graph definition
|
||||
end
|
||||
end
|
||||
```
|
||||
|
||||
An example below:
|
||||
|
||||
|
|
@ -865,8 +867,10 @@ It is possible to bind a click event to a node, the click can lead to either a j
|
|||
> **Note**
|
||||
> This functionality is disabled when using `securityLevel='strict'` and enabled when using `securityLevel='loose'`.
|
||||
|
||||
click nodeId callback
|
||||
click nodeId call callback()
|
||||
```
|
||||
click nodeId callback
|
||||
click nodeId call callback()
|
||||
```
|
||||
|
||||
- nodeId is the id of the node
|
||||
- callback is the name of a javascript function defined on the page displaying the graph, the function will be called with the nodeId as parameter.
|
||||
|
|
@ -989,11 +993,15 @@ have no ids in the same way as nodes, some other way of deciding what style the
|
|||
Instead of ids, the order number of when the link was defined in the graph is used, or use default to apply to all links.
|
||||
In the example below the style defined in the linkStyle statement will belong to the fourth link in the graph:
|
||||
|
||||
linkStyle 3 stroke:#ff3,stroke-width:4px,color:red;
|
||||
```
|
||||
linkStyle 3 stroke:#ff3,stroke-width:4px,color:red;
|
||||
```
|
||||
|
||||
It is also possible to add style to multiple links in a single statement, by separating link numbers with commas:
|
||||
|
||||
linkStyle 1,2,7 color:blue;
|
||||
```
|
||||
linkStyle 1,2,7 color:blue;
|
||||
```
|
||||
|
||||
### Styling line curves
|
||||
|
||||
|
|
@ -1003,8 +1011,10 @@ Available curve styles include `basis`, `bumpX`, `bumpY`, `cardinal`, `catmullRo
|
|||
|
||||
In this example, a left-to-right graph uses the `stepBefore` curve style:
|
||||
|
||||
%%{ init: { 'flowchart': { 'curve': 'stepBefore' } } }%%
|
||||
graph LR
|
||||
```
|
||||
%%{ init: { 'flowchart': { 'curve': 'stepBefore' } } }%%
|
||||
graph LR
|
||||
```
|
||||
|
||||
For a full list of available curves, including an explanation of custom curves, refer to
|
||||
the [Shapes](https://github.com/d3/d3-shape/blob/main/README.md#curves) documentation in the
|
||||
|
|
@ -1035,19 +1045,27 @@ should have a different look.
|
|||
|
||||
A class definition looks like the example below:
|
||||
|
||||
```
|
||||
classDef className fill:#f9f,stroke:#333,stroke-width:4px;
|
||||
```
|
||||
|
||||
Also, it is possible to define style to multiple classes in one statement:
|
||||
|
||||
```
|
||||
classDef firstClassName,secondClassName font-size:12pt;
|
||||
```
|
||||
|
||||
Attachment of a class to a node is done as per below:
|
||||
|
||||
```
|
||||
class nodeId1 className;
|
||||
```
|
||||
|
||||
It is also possible to attach a class to a list of nodes in one statement:
|
||||
|
||||
```
|
||||
class nodeId1,nodeId2 className;
|
||||
```
|
||||
|
||||
A shorter form of adding a class is to attach the classname to the node using the `:::`operator as per below:
|
||||
|
||||
|
|
@ -1118,7 +1136,9 @@ flowchart LR
|
|||
|
||||
If a class is named default it will be assigned to all classes without specific class definitions.
|
||||
|
||||
```
|
||||
classDef default fill:#f9f,stroke:#333,stroke-width:4px;
|
||||
```
|
||||
|
||||
## Basic support for fontawesome
|
||||
|
||||
|
|
@ -1191,7 +1211,9 @@ Starting with Mermaid version 9.4, you can use an alternate renderer named elk.
|
|||
The _elk_ renderer is an experimental feature.
|
||||
You can change the renderer to elk by adding this directive:
|
||||
|
||||
%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
|
||||
```
|
||||
%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
|
||||
```
|
||||
|
||||
> **Note**
|
||||
> Note that the site needs to use mermaid version 9.4+ for this to work and have this featured enabled in the lazy-loading configuration.
|
||||
|
|
|
|||
|
|
@ -468,11 +468,15 @@ Styling of the Gantt diagram is done by defining a number of CSS classes. During
|
|||
|
||||
You can style or hide the marker for the current date. To style it, add a value for the `todayMarker` key.
|
||||
|
||||
todayMarker stroke-width:5px,stroke:#0f0,opacity:0.5
|
||||
```
|
||||
todayMarker stroke-width:5px,stroke:#0f0,opacity:0.5
|
||||
```
|
||||
|
||||
To hide the marker, set `todayMarker` to `off`.
|
||||
|
||||
todayMarker off
|
||||
```
|
||||
todayMarker off
|
||||
```
|
||||
|
||||
## Configuration
|
||||
|
||||
|
|
@ -514,8 +518,10 @@ mermaid.ganttConfig = {
|
|||
|
||||
It is possible to bind a click event to a task. The click can lead to either a javascript callback or to a link which will be opened in the current browser tab. **Note**: This functionality is disabled when using `securityLevel='strict'` and enabled when using `securityLevel='loose'`.
|
||||
|
||||
click taskId call callback(arguments)
|
||||
click taskId href URL
|
||||
```
|
||||
click taskId call callback(arguments)
|
||||
click taskId href URL
|
||||
```
|
||||
|
||||
- taskId is the id of the task
|
||||
- callback is the name of a javascript function defined on the page displaying the graph, the function will be called with the taskId as the parameter if no other arguments are specified.
|
||||
|
|
|
|||
|
|
@ -60,11 +60,13 @@ The syntax for creating Mindmaps is simple and relies on indentation for setting
|
|||
|
||||
In the following example you can see how there are 3 different levels. One with starting at the left of the text and another level with two rows starting at the same column, defining the node A. At the end there is one more level where the text is indented further than the previous lines defining the nodes B and C.
|
||||
|
||||
mindmap
|
||||
```
|
||||
mindmap
|
||||
Root
|
||||
A
|
||||
B
|
||||
C
|
||||
```
|
||||
|
||||
In summary is a simple text outline where there is one node at the root level called `Root` which has one child `A`. `A` in turn has two children `B`and `C`. In the diagram below we can see this rendered as a mindmap.
|
||||
|
||||
|
|
@ -230,11 +232,13 @@ _These classes need to be supplied by the site administrator._
|
|||
|
||||
The actual indentation does not really matter only compared with the previous rows. If we take the previous example and disrupt it a little we can see how the calculations are performed. Let us start with placing C with a smaller indentation than `B` but larger then `A`.
|
||||
|
||||
mindmap
|
||||
```
|
||||
mindmap
|
||||
Root
|
||||
A
|
||||
B
|
||||
C
|
||||
```
|
||||
|
||||
This outline is unclear as `B` clearly is a child of `A` but when we move on to `C` the clarity is lost. `C` is not a child of `B` with a higher indentation nor does it have the same indentation as `B`. The only thing that is clear is that the first node with smaller indentation, indicating a parent, is A. Then Mermaid relies on this known truth and compensates for the unclear indentation and selects `A` as a parent of `C` leading till the same diagram with `B` and `C` as siblings.
|
||||
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
# Pie chart diagrams
|
||||
|
||||
> A pie chart (or a circle chart) is a circular statistical graphic, which is divided into slices to illustrate numerical proportion. In a pie chart, the arc length of each slice (and consequently its central angle and area), is proportional to the quantity it represents. While it is named for its resemblance to a pie which has been sliced, there are variations on the way it can be presented. The earliest known pie chart is generally credited to William Playfair's Statistical Breviary of 1801
|
||||
> \-Wikipedia
|
||||
> -Wikipedia
|
||||
|
||||
Mermaid can render Pie Chart diagrams.
|
||||
|
||||
|
|
|
|||
|
|
@ -59,8 +59,10 @@ The title is a short description of the chart and it will always render on top o
|
|||
|
||||
#### Example
|
||||
|
||||
quadrantChart
|
||||
```
|
||||
quadrantChart
|
||||
title This is a sample example
|
||||
```
|
||||
|
||||
### x-axis
|
||||
|
||||
|
|
|
|||
|
|
@ -56,12 +56,14 @@ An important note on user text: all input can be surrounded in quotes or not. Fo
|
|||
|
||||
A requirement definition contains a requirement type, name, id, text, risk, and verification method. The syntax follows:
|
||||
|
||||
<type> user_defined_name {
|
||||
```
|
||||
<type> user_defined_name {
|
||||
id: user_defined_id
|
||||
text: user_defined text
|
||||
risk: <risk>
|
||||
verifymethod: <method>
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Type, risk, and method are enumerations defined in SysML.
|
||||
|
||||
|
|
@ -75,10 +77,12 @@ Type, risk, and method are enumerations defined in SysML.
|
|||
|
||||
An element definition contains an element name, type, and document reference. These three are all user defined. The element feature is intended to be lightweight but allow requirements to be connected to portions of other documents.
|
||||
|
||||
element user_defined_name {
|
||||
```
|
||||
element user_defined_name {
|
||||
type: user_defined_type
|
||||
docref: user_defined_ref
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Relationship
|
||||
|
||||
|
|
@ -86,11 +90,15 @@ Relationships are comprised of a source node, destination node, and relationship
|
|||
|
||||
Each follows the definition format of
|
||||
|
||||
{name of source} - <type> -> {name of destination}
|
||||
```
|
||||
{name of source} - <type> -> {name of destination}
|
||||
```
|
||||
|
||||
or
|
||||
|
||||
{name of destination} <- <type> - {name of source}
|
||||
```
|
||||
{name of destination} <- <type> - {name of source}
|
||||
```
|
||||
|
||||
"name of source" and "name of destination" should be names of requirement or element nodes defined elsewhere.
|
||||
|
||||
|
|
|
|||
|
|
@ -98,8 +98,10 @@ sequenceDiagram
|
|||
|
||||
It is possible to create and destroy actors by messages. To do so, add a create or destroy directive before the message.
|
||||
|
||||
create participant B
|
||||
A --> B: Hello
|
||||
```
|
||||
create participant B
|
||||
A --> B: Hello
|
||||
```
|
||||
|
||||
Create directives support actor/participant distinction and aliases. The sender or the recipient of a message can be destroyed but only the recipient can be created.
|
||||
|
||||
|
|
@ -143,22 +145,26 @@ And fixing diagram code does not get rid of this error and rendering of all othe
|
|||
|
||||
The actor(s) can be grouped in vertical boxes. You can define a color (if not, it will be transparent) and/or a descriptive label using the following notation:
|
||||
|
||||
box Aqua Group Description
|
||||
... actors ...
|
||||
end
|
||||
box Group without description
|
||||
... actors ...
|
||||
end
|
||||
box rgb(33,66,99)
|
||||
... actors ...
|
||||
end
|
||||
```
|
||||
box Aqua Group Description
|
||||
... actors ...
|
||||
end
|
||||
box Group without description
|
||||
... actors ...
|
||||
end
|
||||
box rgb(33,66,99)
|
||||
... actors ...
|
||||
end
|
||||
```
|
||||
|
||||
> **Note**
|
||||
> If your group name is a color you can force the color to be transparent:
|
||||
|
||||
box transparent Aqua
|
||||
... actors ...
|
||||
end
|
||||
```
|
||||
box transparent Aqua
|
||||
... actors ...
|
||||
end
|
||||
```
|
||||
|
||||
```mermaid-example
|
||||
sequenceDiagram
|
||||
|
|
@ -196,7 +202,9 @@ The actor(s) can be grouped in vertical boxes. You can define a color (if not, i
|
|||
|
||||
Messages can be of two displayed either solid or with a dotted line.
|
||||
|
||||
[Actor][Arrow][Actor]:Message text
|
||||
```
|
||||
[Actor][Arrow][Actor]:Message text
|
||||
```
|
||||
|
||||
There are six types of arrows currently supported:
|
||||
|
||||
|
|
@ -314,9 +322,11 @@ sequenceDiagram
|
|||
|
||||
It is possible to express loops in a sequence diagram. This is done by the notation
|
||||
|
||||
loop Loop text
|
||||
... statements ...
|
||||
end
|
||||
```
|
||||
loop Loop text
|
||||
... statements ...
|
||||
end
|
||||
```
|
||||
|
||||
See the example below:
|
||||
|
||||
|
|
@ -340,17 +350,21 @@ sequenceDiagram
|
|||
|
||||
It is possible to express alternative paths in a sequence diagram. This is done by the notation
|
||||
|
||||
alt Describing text
|
||||
... statements ...
|
||||
else
|
||||
... statements ...
|
||||
end
|
||||
```
|
||||
alt Describing text
|
||||
... statements ...
|
||||
else
|
||||
... statements ...
|
||||
end
|
||||
```
|
||||
|
||||
or if there is sequence that is optional (if without else).
|
||||
|
||||
opt Describing text
|
||||
... statements ...
|
||||
end
|
||||
```
|
||||
opt Describing text
|
||||
... statements ...
|
||||
end
|
||||
```
|
||||
|
||||
See the example below:
|
||||
|
||||
|
|
@ -386,13 +400,15 @@ It is possible to show actions that are happening in parallel.
|
|||
|
||||
This is done by the notation
|
||||
|
||||
par [Action 1]
|
||||
... statements ...
|
||||
and [Action 2]
|
||||
... statements ...
|
||||
and [Action N]
|
||||
... statements ...
|
||||
end
|
||||
```
|
||||
par [Action 1]
|
||||
... statements ...
|
||||
and [Action 2]
|
||||
... statements ...
|
||||
and [Action N]
|
||||
... statements ...
|
||||
end
|
||||
```
|
||||
|
||||
See the example below:
|
||||
|
||||
|
|
@ -454,13 +470,15 @@ It is possible to show actions that must happen automatically with conditional h
|
|||
|
||||
This is done by the notation
|
||||
|
||||
critical [Action that must be performed]
|
||||
... statements ...
|
||||
option [Circumstance A]
|
||||
... statements ...
|
||||
option [Circumstance B]
|
||||
... statements ...
|
||||
end
|
||||
```
|
||||
critical [Action that must be performed]
|
||||
... statements ...
|
||||
option [Circumstance A]
|
||||
... statements ...
|
||||
option [Circumstance B]
|
||||
... statements ...
|
||||
end
|
||||
```
|
||||
|
||||
See the example below:
|
||||
|
||||
|
|
@ -510,9 +528,11 @@ It is possible to indicate a stop of the sequence within the flow (usually used
|
|||
|
||||
This is done by the notation
|
||||
|
||||
break [something happened]
|
||||
... statements ...
|
||||
end
|
||||
```
|
||||
break [something happened]
|
||||
... statements ...
|
||||
end
|
||||
```
|
||||
|
||||
See the example below:
|
||||
|
||||
|
|
@ -542,15 +562,17 @@ It is possible to highlight flows by providing colored background rects. This is
|
|||
|
||||
The colors are defined using rgb and rgba syntax.
|
||||
|
||||
rect rgb(0, 255, 0)
|
||||
... content ...
|
||||
end
|
||||
```
|
||||
rect rgb(0, 255, 0)
|
||||
... content ...
|
||||
end
|
||||
```
|
||||
|
||||
<!---->
|
||||
|
||||
rect rgba(0, 0, 255, .1)
|
||||
... content ...
|
||||
end
|
||||
```
|
||||
rect rgba(0, 0, 255, .1)
|
||||
... content ...
|
||||
end
|
||||
```
|
||||
|
||||
See the examples below:
|
||||
|
||||
|
|
@ -674,7 +696,9 @@ Actors can have popup-menus containing individualized links to external pages. F
|
|||
|
||||
This can be configured by adding one or more link lines with the format:
|
||||
|
||||
link <actor>: <link-label> @ <link-url>
|
||||
```
|
||||
link <actor>: <link-label> @ <link-url>
|
||||
```
|
||||
|
||||
```mermaid-example
|
||||
sequenceDiagram
|
||||
|
|
@ -708,7 +732,9 @@ There is an advanced syntax that relies on JSON formatting. If you are comfortab
|
|||
|
||||
This can be configured by adding the links lines with the format:
|
||||
|
||||
links <actor>: <json-formatted link-name link-url pairs>
|
||||
```
|
||||
links <actor>: <json-formatted link-name link-url pairs>
|
||||
```
|
||||
|
||||
An example is below:
|
||||
|
||||
|
|
|
|||
|
|
@ -467,7 +467,9 @@ a _[valid CSS property name](https://www.w3.org/TR/CSS/#properties)_ followed by
|
|||
|
||||
Here is an example of a classDef with just one property-value pair:
|
||||
|
||||
```
|
||||
classDef movement font-style:italic;
|
||||
```
|
||||
|
||||
where
|
||||
|
||||
|
|
@ -478,7 +480,9 @@ If you want to have more than one _property-value pair_ then you put a comma (`,
|
|||
|
||||
Here is an example with three property-value pairs:
|
||||
|
||||
```
|
||||
classDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow
|
||||
```
|
||||
|
||||
where
|
||||
|
||||
|
|
|
|||
|
|
@ -39,8 +39,10 @@ xychart-beta
|
|||
|
||||
The chart can be drawn horizontal or vertical, default value is vertical.
|
||||
|
||||
xychart-beta horizontal
|
||||
...
|
||||
```
|
||||
xychart-beta horizontal
|
||||
...
|
||||
```
|
||||
|
||||
### Title
|
||||
|
||||
|
|
@ -48,9 +50,11 @@ The title is a short description of the chart and it will always render on top o
|
|||
|
||||
#### Example
|
||||
|
||||
xychart-beta
|
||||
```
|
||||
xychart-beta
|
||||
title "This is a simple example"
|
||||
...
|
||||
```
|
||||
|
||||
> **Note**
|
||||
> If the title is a single word one no need to use `"`, but if it has space `"` is needed
|
||||
|
|
@ -96,8 +100,10 @@ A bar chart offers the capability to graphically depict bars.
|
|||
|
||||
The only two things required are the chart name (`xychart-beta`) and one data set. So you will be able to draw a chart with a simple config like
|
||||
|
||||
xychart-beta
|
||||
```
|
||||
xychart-beta
|
||||
line [+1.3, .6, 2.4, -.34]
|
||||
```
|
||||
|
||||
## Chart Configurations
|
||||
|
||||
|
|
|
|||
|
|
@ -423,13 +423,15 @@ It is possible to indicate a stop of the sequence within the flow (usually used
|
|||
|
||||
This is done by the notation
|
||||
|
||||
try {
|
||||
```
|
||||
try {
|
||||
...statements...
|
||||
} catch {
|
||||
} catch {
|
||||
...statements...
|
||||
} finally {
|
||||
} finally {
|
||||
...statements...
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
See the example below:
|
||||
|
||||
|
|
|
|||
104
package.json
104
package.json
|
|
@ -25,8 +25,8 @@
|
|||
"dev:vite": "tsx .vite/server.ts",
|
||||
"dev:coverage": "pnpm coverage:cypress:clean && VITE_COVERAGE=true pnpm dev:vite",
|
||||
"release": "pnpm build",
|
||||
"lint": "eslint --cache --cache-strategy content --ignore-path .gitignore . && pnpm lint:jison && prettier --cache --check .",
|
||||
"lint:fix": "eslint --cache --cache-strategy content --fix --ignore-path .gitignore . && prettier --write . && tsx scripts/fixCSpell.ts",
|
||||
"lint": "cross-env NODE_OPTIONS=--max_old_space_size=8192 eslint --cache --cache-strategy content --ignore-path .gitignore . && pnpm lint:jison && prettier --cache --check .",
|
||||
"lint:fix": "cross-env NODE_OPTIONS=--max_old_space_size=8192 eslint --cache --cache-strategy content --fix --ignore-path .gitignore . && prettier --write . && tsx scripts/fixCSpell.ts",
|
||||
"lint:jison": "tsx ./scripts/jison/lint.mts",
|
||||
"contributors": "tsx scripts/updateContributors.ts",
|
||||
"cypress": "cypress run",
|
||||
|
|
@ -61,70 +61,68 @@
|
|||
]
|
||||
},
|
||||
"devDependencies": {
|
||||
"@applitools/eyes-cypress": "^3.40.6",
|
||||
"@commitlint/cli": "^17.6.1",
|
||||
"@commitlint/config-conventional": "^17.6.1",
|
||||
"@cspell/eslint-plugin": "^8.3.2",
|
||||
"@cypress/code-coverage": "^3.12.18",
|
||||
"@rollup/plugin-typescript": "^11.1.1",
|
||||
"@types/cors": "^2.8.13",
|
||||
"@types/eslint": "^8.37.0",
|
||||
"@types/express": "^4.17.17",
|
||||
"@types/js-yaml": "^4.0.5",
|
||||
"@types/jsdom": "^21.1.1",
|
||||
"@types/lodash": "^4.14.194",
|
||||
"@types/mdast": "^3.0.11",
|
||||
"@types/node": "^20.11.17",
|
||||
"@types/prettier": "^2.7.2",
|
||||
"@types/rollup-plugin-visualizer": "^4.2.1",
|
||||
"@typescript-eslint/eslint-plugin": "^6.7.2",
|
||||
"@typescript-eslint/parser": "^6.7.2",
|
||||
"@vitest/coverage-v8": "^0.34.0",
|
||||
"@vitest/spy": "^0.34.0",
|
||||
"@vitest/ui": "^0.34.0",
|
||||
"@applitools/eyes-cypress": "^3.42.3",
|
||||
"@cspell/eslint-plugin": "^8.6.0",
|
||||
"@cypress/code-coverage": "^3.12.30",
|
||||
"@rollup/plugin-typescript": "^11.1.6",
|
||||
"@types/cors": "^2.8.17",
|
||||
"@types/eslint": "^8.56.6",
|
||||
"@types/express": "^4.17.21",
|
||||
"@types/js-yaml": "^4.0.9",
|
||||
"@types/jsdom": "^21.1.6",
|
||||
"@types/lodash": "^4.17.0",
|
||||
"@types/mdast": "^4.0.3",
|
||||
"@types/node": "^20.11.30",
|
||||
"@types/rollup-plugin-visualizer": "^4.2.4",
|
||||
"@typescript-eslint/eslint-plugin": "^7.3.1",
|
||||
"@typescript-eslint/parser": "^7.3.1",
|
||||
"@vitest/coverage-v8": "^1.4.0",
|
||||
"@vitest/spy": "^1.4.0",
|
||||
"@vitest/ui": "^1.4.0",
|
||||
"ajv": "^8.12.0",
|
||||
"chokidar": "^3.5.3",
|
||||
"concurrently": "^8.0.1",
|
||||
"chokidar": "^3.6.0",
|
||||
"concurrently": "^8.2.2",
|
||||
"cors": "^2.8.5",
|
||||
"cspell": "^8.3.2",
|
||||
"cypress": "^12.17.4",
|
||||
"cross-env": "^7.0.3",
|
||||
"cspell": "^8.6.0",
|
||||
"cypress": "^13.7.1",
|
||||
"cypress-image-snapshot": "^4.0.1",
|
||||
"esbuild": "^0.20.0",
|
||||
"eslint": "^8.47.0",
|
||||
"eslint-config-prettier": "^8.8.0",
|
||||
"eslint-plugin-cypress": "^2.13.2",
|
||||
"eslint-plugin-html": "^7.1.0",
|
||||
"eslint-plugin-jest": "^27.2.1",
|
||||
"eslint-plugin-jsdoc": "^46.0.0",
|
||||
"esbuild": "^0.20.2",
|
||||
"eslint": "^8.57.0",
|
||||
"eslint-config-prettier": "^9.1.0",
|
||||
"eslint-plugin-cypress": "^2.15.1",
|
||||
"eslint-plugin-html": "^8.0.0",
|
||||
"eslint-plugin-jest": "^27.9.0",
|
||||
"eslint-plugin-jsdoc": "^48.2.1",
|
||||
"eslint-plugin-json": "^3.1.0",
|
||||
"eslint-plugin-lodash": "^7.4.0",
|
||||
"eslint-plugin-markdown": "^3.0.0",
|
||||
"eslint-plugin-markdown": "^4.0.1",
|
||||
"eslint-plugin-no-only-tests": "^3.1.0",
|
||||
"eslint-plugin-tsdoc": "^0.2.17",
|
||||
"eslint-plugin-unicorn": "^47.0.0",
|
||||
"express": "^4.18.2",
|
||||
"globby": "^13.1.4",
|
||||
"husky": "^8.0.3",
|
||||
"jest": "^29.5.0",
|
||||
"eslint-plugin-unicorn": "^51.0.1",
|
||||
"express": "^4.19.1",
|
||||
"globby": "^14.0.1",
|
||||
"husky": "^9.0.11",
|
||||
"jest": "^29.7.0",
|
||||
"jison": "^0.4.18",
|
||||
"js-yaml": "^4.1.0",
|
||||
"jsdom": "^22.0.0",
|
||||
"jsdom": "^24.0.0",
|
||||
"langium-cli": "3.0.1",
|
||||
"lint-staged": "^13.2.1",
|
||||
"lint-staged": "^15.2.2",
|
||||
"markdown-table": "^3.0.3",
|
||||
"nyc": "^15.1.0",
|
||||
"path-browserify": "^1.0.1",
|
||||
"pnpm": "^8.6.8",
|
||||
"prettier": "^2.8.8",
|
||||
"prettier-plugin-jsdoc": "^0.4.2",
|
||||
"rimraf": "^5.0.0",
|
||||
"rollup-plugin-visualizer": "^5.9.2",
|
||||
"start-server-and-test": "^2.0.0",
|
||||
"tsx": "^4.6.2",
|
||||
"typescript": "^5.1.3",
|
||||
"vite": "^4.5.2",
|
||||
"vite-plugin-istanbul": "^4.1.0",
|
||||
"vitest": "^0.34.0"
|
||||
"pnpm": "^8.15.5",
|
||||
"prettier": "^3.2.5",
|
||||
"prettier-plugin-jsdoc": "^1.3.0",
|
||||
"rimraf": "^5.0.5",
|
||||
"rollup-plugin-visualizer": "^5.12.0",
|
||||
"start-server-and-test": "^2.0.3",
|
||||
"tsx": "^4.7.1",
|
||||
"typescript": "^5.4.3",
|
||||
"vite": "^5.2.3",
|
||||
"vite-plugin-istanbul": "^6.0.0",
|
||||
"vitest": "^1.4.0"
|
||||
},
|
||||
"nyc": {
|
||||
"report-dir": "coverage/cypress"
|
||||
|
|
|
|||
|
|
@ -38,14 +38,14 @@
|
|||
]
|
||||
},
|
||||
"dependencies": {
|
||||
"@braintree/sanitize-url": "^6.0.1",
|
||||
"d3": "^7.0.0",
|
||||
"khroma": "^2.0.0"
|
||||
"@braintree/sanitize-url": "^6.0.4",
|
||||
"d3": "^7.9.0",
|
||||
"khroma": "^2.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"concurrently": "^8.0.0",
|
||||
"rimraf": "^5.0.0",
|
||||
"mermaid": "workspace:*"
|
||||
"concurrently": "^8.2.2",
|
||||
"mermaid": "workspace:*",
|
||||
"rimraf": "^5.0.5"
|
||||
},
|
||||
"files": [
|
||||
"dist"
|
||||
|
|
|
|||
|
|
@ -29,15 +29,15 @@
|
|||
"author": "Knut Sveidqvist",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"d3": "^7.4.0",
|
||||
"d3": "^7.9.0",
|
||||
"dagre-d3-es": "7.0.10",
|
||||
"khroma": "^2.0.0",
|
||||
"elkjs": "^0.9.0"
|
||||
"elkjs": "^0.9.2",
|
||||
"khroma": "^2.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"concurrently": "^8.0.0",
|
||||
"rimraf": "^5.0.0",
|
||||
"mermaid": "workspace:^"
|
||||
"concurrently": "^8.2.2",
|
||||
"mermaid": "workspace:^",
|
||||
"rimraf": "^5.0.5"
|
||||
},
|
||||
"files": [
|
||||
"dist"
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@
|
|||
],
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@zenuml/core": "^3.17.2"
|
||||
"@zenuml/core": "^3.19.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"mermaid": "workspace:^"
|
||||
|
|
|
|||
|
|
@ -68,69 +68,69 @@
|
|||
]
|
||||
},
|
||||
"dependencies": {
|
||||
"@braintree/sanitize-url": "^6.0.1",
|
||||
"@braintree/sanitize-url": "^7.0.1",
|
||||
"@mermaid-js/parser": "workspace:^",
|
||||
"cytoscape": "^3.28.1",
|
||||
"cytoscape-cose-bilkent": "^4.1.0",
|
||||
"d3": "^7.4.0",
|
||||
"d3": "^7.9.0",
|
||||
"d3-sankey": "^0.12.3",
|
||||
"dagre-d3-es": "7.0.10",
|
||||
"dayjs": "^1.11.7",
|
||||
"dompurify": "^3.0.5",
|
||||
"elkjs": "^0.9.0",
|
||||
"dayjs": "^1.11.10",
|
||||
"dompurify": "^3.0.11",
|
||||
"elkjs": "^0.9.2",
|
||||
"katex": "^0.16.9",
|
||||
"khroma": "^2.0.0",
|
||||
"khroma": "^2.1.0",
|
||||
"lodash-es": "^4.17.21",
|
||||
"mdast-util-from-markdown": "^1.3.0",
|
||||
"stylis": "^4.1.3",
|
||||
"mdast-util-from-markdown": "^2.0.0",
|
||||
"stylis": "^4.3.1",
|
||||
"ts-dedent": "^2.2.0",
|
||||
"uuid": "^9.0.0"
|
||||
"uuid": "^9.0.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@adobe/jsonschema2md": "^7.1.4",
|
||||
"@types/cytoscape": "^3.19.9",
|
||||
"@types/d3": "^7.4.0",
|
||||
"@types/d3-sankey": "^0.12.1",
|
||||
"@types/d3-scale": "^4.0.3",
|
||||
"@types/d3-scale-chromatic": "^3.0.0",
|
||||
"@types/d3-selection": "^3.0.5",
|
||||
"@types/d3-shape": "^3.1.1",
|
||||
"@types/dompurify": "^3.0.2",
|
||||
"@types/jsdom": "^21.1.1",
|
||||
"@adobe/jsonschema2md": "^7.1.5",
|
||||
"@types/cytoscape": "^3.19.16",
|
||||
"@types/d3": "^7.4.3",
|
||||
"@types/d3-sankey": "^0.12.4",
|
||||
"@types/d3-scale": "^4.0.8",
|
||||
"@types/d3-scale-chromatic": "^3.0.3",
|
||||
"@types/d3-selection": "^3.0.10",
|
||||
"@types/d3-shape": "^3.1.6",
|
||||
"@types/dompurify": "^3.0.5",
|
||||
"@types/jsdom": "^21.1.6",
|
||||
"@types/katex": "^0.16.7",
|
||||
"@types/lodash-es": "^4.17.7",
|
||||
"@types/micromatch": "^4.0.2",
|
||||
"@types/prettier": "^2.7.2",
|
||||
"@types/stylis": "^4.0.2",
|
||||
"@types/uuid": "^9.0.1",
|
||||
"@typescript-eslint/eslint-plugin": "^5.59.0",
|
||||
"@typescript-eslint/parser": "^5.59.0",
|
||||
"ajv": "^8.11.2",
|
||||
"chokidar": "^3.5.3",
|
||||
"concurrently": "^8.0.1",
|
||||
"cpy-cli": "^4.2.0",
|
||||
"@types/lodash-es": "^4.17.12",
|
||||
"@types/micromatch": "^4.0.6",
|
||||
"@types/prettier": "^3.0.0",
|
||||
"@types/stylis": "^4.2.5",
|
||||
"@types/uuid": "^9.0.8",
|
||||
"@typescript-eslint/eslint-plugin": "^7.3.1",
|
||||
"@typescript-eslint/parser": "^7.3.1",
|
||||
"ajv": "^8.12.0",
|
||||
"chokidar": "^3.6.0",
|
||||
"concurrently": "^8.2.2",
|
||||
"cpy-cli": "^5.0.0",
|
||||
"csstree-validator": "^3.0.0",
|
||||
"globby": "^13.1.4",
|
||||
"globby": "^14.0.1",
|
||||
"jison": "^0.4.18",
|
||||
"js-base64": "^3.7.5",
|
||||
"jsdom": "^22.0.0",
|
||||
"json-schema-to-typescript": "^11.0.3",
|
||||
"js-base64": "^3.7.7",
|
||||
"jsdom": "^24.0.0",
|
||||
"json-schema-to-typescript": "^13.1.2",
|
||||
"micromatch": "^4.0.5",
|
||||
"path-browserify": "^1.0.1",
|
||||
"prettier": "^2.8.8",
|
||||
"remark": "^14.0.2",
|
||||
"remark-frontmatter": "^4.0.1",
|
||||
"remark-gfm": "^3.0.1",
|
||||
"rimraf": "^5.0.0",
|
||||
"start-server-and-test": "^2.0.0",
|
||||
"type-fest": "^4.1.0",
|
||||
"typedoc": "^0.25.0",
|
||||
"typedoc-plugin-markdown": "^3.15.2",
|
||||
"typescript": "^5.0.4",
|
||||
"prettier": "^3.2.5",
|
||||
"remark": "^15.0.1",
|
||||
"remark-frontmatter": "^5.0.0",
|
||||
"remark-gfm": "^4.0.0",
|
||||
"rimraf": "^5.0.5",
|
||||
"start-server-and-test": "^2.0.3",
|
||||
"type-fest": "^4.13.1",
|
||||
"typedoc": "^0.25.12",
|
||||
"typedoc-plugin-markdown": "^3.17.1",
|
||||
"typescript": "^5.4.3",
|
||||
"unist-util-flatmap": "^1.0.0",
|
||||
"unist-util-visit": "^4.1.2",
|
||||
"vitepress": "^1.0.0-rc.40",
|
||||
"vitepress-plugin-search": "^1.0.4-alpha.22"
|
||||
"unist-util-visit": "^5.0.0",
|
||||
"vitepress": "^1.0.1",
|
||||
"vitepress-plugin-search": "1.0.4-alpha.22"
|
||||
},
|
||||
"files": [
|
||||
"dist/",
|
||||
|
|
|
|||
|
|
@ -85,7 +85,7 @@ const LOGMSG_COPIED = `, and copied to ${FINAL_DOCS_DIR}`;
|
|||
|
||||
const WARN_DOCSDIR_DOESNT_MATCH = `Changed files were transformed in ${SOURCE_DOCS_DIR} but do not match the files in ${FINAL_DOCS_DIR}. Please run 'pnpm --filter mermaid run docs:build' after making changes to ${SOURCE_DOCS_DIR} to update the ${FINAL_DOCS_DIR} directory with the transformed files.`;
|
||||
|
||||
const prettierConfig = prettier.resolveConfig.sync('.') ?? {};
|
||||
const prettierConfig = (await prettier.resolveConfig('.')) ?? {};
|
||||
// From https://github.com/vuejs/vitepress/blob/428eec3750d6b5648a77ac52d88128df0554d4d1/src/node/markdownToVue.ts#L20-L21
|
||||
const includesRE = /<!--\s*@include:\s*(.*?)\s*-->/g;
|
||||
const includedFiles: Set<string> = new Set();
|
||||
|
|
@ -326,7 +326,7 @@ export function transformMarkdownAst({
|
|||
*
|
||||
* @param file {string} name of the file that will be verified
|
||||
*/
|
||||
const transformMarkdown = (file: string) => {
|
||||
const transformMarkdown = async (file: string) => {
|
||||
const doc = injectPlaceholders(transformIncludeStatements(file, readSyncedUTF8file(file)));
|
||||
|
||||
let transformed = remark()
|
||||
|
|
@ -347,7 +347,7 @@ const transformMarkdown = (file: string) => {
|
|||
transformed = doc;
|
||||
}
|
||||
|
||||
const formatted = prettier.format(transformed, {
|
||||
const formatted = await prettier.format(transformed, {
|
||||
parser: 'markdown',
|
||||
...prettierConfig,
|
||||
});
|
||||
|
|
@ -454,7 +454,7 @@ async function transformJsonSchema(file: string) {
|
|||
|
||||
const transformed = transformer.stringify(await transformer.run(markdownAst as Root));
|
||||
|
||||
const formatted = prettier.format(transformed, {
|
||||
const formatted = await prettier.format(transformed, {
|
||||
parser: 'markdown',
|
||||
...prettierConfig,
|
||||
});
|
||||
|
|
@ -472,7 +472,7 @@ async function transformJsonSchema(file: string) {
|
|||
*
|
||||
* @param filename {string} name of the HTML file to transform
|
||||
*/
|
||||
const transformHtml = (filename: string) => {
|
||||
const transformHtml = async (filename: string) => {
|
||||
/**
|
||||
* Insert the '...auto generated...' comment into an HTML file after the<html> element
|
||||
*
|
||||
|
|
@ -496,7 +496,7 @@ const transformHtml = (filename: string) => {
|
|||
};
|
||||
|
||||
const transformedHTML = insertAutoGeneratedComment(filename);
|
||||
const formattedHTML = prettier.format(transformedHTML, {
|
||||
const formattedHTML = await prettier.format(transformedHTML, {
|
||||
parser: 'html',
|
||||
...prettierConfig,
|
||||
});
|
||||
|
|
@ -541,7 +541,7 @@ export const processDocs = async () => {
|
|||
const mdFileGlobs = getGlobs([posix.join(sourceDirGlob, '*.md')]);
|
||||
const mdFiles = await getFilesFromGlobs(mdFileGlobs);
|
||||
console.log(`${action} ${mdFiles.length} markdown files...`);
|
||||
mdFiles.forEach(transformMarkdown);
|
||||
await Promise.all(mdFiles.map(transformMarkdown));
|
||||
|
||||
for (const includedFile of includedFiles) {
|
||||
rmSync(includedFile, { force: true });
|
||||
|
|
@ -552,7 +552,7 @@ export const processDocs = async () => {
|
|||
const htmlFileGlobs = getGlobs([posix.join(sourceDirGlob, '*.html')]);
|
||||
const htmlFiles = await getFilesFromGlobs(htmlFileGlobs);
|
||||
console.log(`${action} ${htmlFiles.length} html files...`);
|
||||
htmlFiles.forEach(transformHtml);
|
||||
await Promise.all(htmlFiles.map(transformHtml));
|
||||
|
||||
const otherFileGlobs = getGlobs([sourceDirGlob, '!**/*.md', '!**/*.html']);
|
||||
const otherFiles = await getFilesFromGlobs(otherFileGlobs);
|
||||
|
|
@ -591,9 +591,9 @@ export const processDocs = async () => {
|
|||
return;
|
||||
}
|
||||
if (isMd(path)) {
|
||||
transformMarkdown(path);
|
||||
void transformMarkdown(path);
|
||||
} else if (isHtml(path)) {
|
||||
transformHtml(path);
|
||||
void transformHtml(path);
|
||||
} else if (isOther(path)) {
|
||||
copyTransformedContents(path, true);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -160,6 +160,12 @@ export interface MermaidConfig {
|
|||
wrap?: boolean;
|
||||
fontSize?: number;
|
||||
markdownAutoWrap?: boolean;
|
||||
/**
|
||||
* Suppresses inserting 'Syntax error' diagram in the DOM.
|
||||
* This is useful when you want to control how to handle syntax errors in your application.
|
||||
*
|
||||
*/
|
||||
suppressErrorRendering?: boolean;
|
||||
}
|
||||
/**
|
||||
* The object containing configurations specific for packet diagrams.
|
||||
|
|
|
|||
|
|
@ -53,7 +53,7 @@ describe('diagram-orchestration', () => {
|
|||
expect(() =>
|
||||
detectType('flowchart TD; A-->B', { flowchart: { defaultRenderer: 'dagre-d3' } })
|
||||
).toThrowErrorMatchingInlineSnapshot(
|
||||
'"No diagram type detected matching given configuration for text: flowchart TD; A-->B"'
|
||||
`[UnknownDiagramError: No diagram type detected matching given configuration for text: flowchart TD; A-->B]`
|
||||
);
|
||||
|
||||
// graph & dagre-wrapper => flowchart-v2
|
||||
|
|
|
|||
|
|
@ -17,16 +17,16 @@ describe('DiagramAPI', () => {
|
|||
|
||||
it('should throw error if diagram is not defined', () => {
|
||||
expect(() => getDiagram('loki')).toThrowErrorMatchingInlineSnapshot(
|
||||
'"Diagram loki not found."'
|
||||
`[Error: Diagram loki not found.]`
|
||||
);
|
||||
});
|
||||
|
||||
it('should handle diagram registrations', () => {
|
||||
expect(() => getDiagram('loki')).toThrowErrorMatchingInlineSnapshot(
|
||||
'"Diagram loki not found."'
|
||||
`[Error: Diagram loki not found.]`
|
||||
);
|
||||
expect(() => detectType('loki diagram')).toThrowErrorMatchingInlineSnapshot(
|
||||
'"No diagram type detected matching given configuration for text: loki diagram"'
|
||||
`[UnknownDiagramError: No diagram type detected matching given configuration for text: loki diagram]`
|
||||
);
|
||||
const detector: DiagramDetector = (str: string) => {
|
||||
return str.match('loki') !== null;
|
||||
|
|
|
|||
|
|
@ -65,23 +65,23 @@ describe('diagram detection', () => {
|
|||
|
||||
test('should throw the right error for incorrect diagram', async () => {
|
||||
await expect(Diagram.fromText('graph TD; A-->')).rejects.toThrowErrorMatchingInlineSnapshot(`
|
||||
"Parse error on line 2:
|
||||
[Error: Parse error on line 2:
|
||||
graph TD; A-->
|
||||
--------------^
|
||||
Expecting 'AMP', 'COLON', 'PIPE', 'TESTSTR', 'DOWN', 'DEFAULT', 'NUM', 'COMMA', 'NODE_STRING', 'BRKT', 'MINUS', 'MULT', 'UNICODE_TEXT', got 'EOF'"
|
||||
Expecting 'AMP', 'COLON', 'PIPE', 'TESTSTR', 'DOWN', 'DEFAULT', 'NUM', 'COMMA', 'NODE_STRING', 'BRKT', 'MINUS', 'MULT', 'UNICODE_TEXT', got 'EOF']
|
||||
`);
|
||||
await expect(Diagram.fromText('sequenceDiagram; A-->B')).rejects
|
||||
.toThrowErrorMatchingInlineSnapshot(`
|
||||
"Parse error on line 1:
|
||||
...quenceDiagram; A-->B
|
||||
-----------------------^
|
||||
Expecting 'TXT', got 'NEWLINE'"
|
||||
[Error: Parse error on line 1:
|
||||
...quenceDiagram; A-->B
|
||||
-----------------------^
|
||||
Expecting 'TXT', got 'NEWLINE']
|
||||
`);
|
||||
});
|
||||
|
||||
test('should throw the right error for unregistered diagrams', async () => {
|
||||
await expect(Diagram.fromText('thor TD; A-->B')).rejects.toThrowErrorMatchingInlineSnapshot(
|
||||
'"No diagram type detected matching given configuration for text: thor TD; A-->B"'
|
||||
`[UnknownDiagramError: No diagram type detected matching given configuration for text: thor TD; A-->B]`
|
||||
);
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -67,9 +67,8 @@ describe('the flowchart renderer', function () {
|
|||
});
|
||||
});
|
||||
|
||||
['Multi<br>Line', 'Multi<br/>Line', 'Multi<br />Line', 'Multi<br\t/>Line'].forEach(function (
|
||||
labelText
|
||||
) {
|
||||
['Multi<br>Line', 'Multi<br/>Line', 'Multi<br />Line', 'Multi<br\t/>Line'].forEach(
|
||||
function (labelText) {
|
||||
it('should handle multiline texts with different line breaks', async function () {
|
||||
const addedNodes = [];
|
||||
const fakeDiag = {
|
||||
|
|
@ -109,7 +108,8 @@ describe('the flowchart renderer', function () {
|
|||
expect(addedNodes[0][1].label.firstChild.innerHTML).toEqual('Multi'); // <tspan> node, line 1
|
||||
expect(addedNodes[0][1].label.lastChild.innerHTML).toEqual('Line'); // <tspan> node, line 2
|
||||
});
|
||||
});
|
||||
}
|
||||
);
|
||||
|
||||
[
|
||||
[['fill:#fff'], 'fill:#fff;', ''],
|
||||
|
|
|
|||
|
|
@ -138,7 +138,7 @@ describe('packet diagrams', () => {
|
|||
18-20: "error"
|
||||
`;
|
||||
await expect(parser.parse(str)).rejects.toThrowErrorMatchingInlineSnapshot(
|
||||
'"Packet block 18 - 20 is not contiguous. It should start from 17."'
|
||||
`[Error: Packet block 18 - 20 is not contiguous. It should start from 17.]`
|
||||
);
|
||||
});
|
||||
|
||||
|
|
@ -148,7 +148,7 @@ describe('packet diagrams', () => {
|
|||
18: "error"
|
||||
`;
|
||||
await expect(parser.parse(str)).rejects.toThrowErrorMatchingInlineSnapshot(
|
||||
'"Packet block 18 - 18 is not contiguous. It should start from 17."'
|
||||
`[Error: Packet block 18 - 18 is not contiguous. It should start from 17.]`
|
||||
);
|
||||
});
|
||||
|
||||
|
|
@ -159,7 +159,7 @@ describe('packet diagrams', () => {
|
|||
19: "error"
|
||||
`;
|
||||
await expect(parser.parse(str)).rejects.toThrowErrorMatchingInlineSnapshot(
|
||||
'"Packet block 19 - 19 is not contiguous. It should start from 18."'
|
||||
`[Error: Packet block 19 - 19 is not contiguous. It should start from 18.]`
|
||||
);
|
||||
});
|
||||
|
||||
|
|
@ -169,7 +169,7 @@ describe('packet diagrams', () => {
|
|||
25-20: "error"
|
||||
`;
|
||||
await expect(parser.parse(str)).rejects.toThrowErrorMatchingInlineSnapshot(
|
||||
'"Packet block 25 - 20 is invalid. End must be greater than start."'
|
||||
`[Error: Packet block 25 - 20 is invalid. End must be greater than start.]`
|
||||
);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -98,7 +98,10 @@ describe('Testing quadrantChart jison file', () => {
|
|||
str =
|
||||
'quadrantChart\n Y-AxIs "Urgent(* +=[❤" --> "Not Urgent (* +=[❤"\n ';
|
||||
expect(parserFnConstructor(str)).not.toThrow();
|
||||
expect(mockDB.setYAxisBottomText).toHaveBeenCalledWith({ text: 'Urgent(* +=[❤', type: 'text' });
|
||||
expect(mockDB.setYAxisBottomText).toHaveBeenCalledWith({
|
||||
text: 'Urgent(* +=[❤',
|
||||
type: 'text',
|
||||
});
|
||||
expect(mockDB.setYAxisTopText).toHaveBeenCalledWith({
|
||||
text: 'Not Urgent (* +=[❤',
|
||||
type: 'text',
|
||||
|
|
@ -107,7 +110,10 @@ describe('Testing quadrantChart jison file', () => {
|
|||
clearMocks();
|
||||
str = 'quadrantChart\n y-AxIs "Urgent(* +=[❤"';
|
||||
expect(parserFnConstructor(str)).not.toThrow();
|
||||
expect(mockDB.setYAxisBottomText).toHaveBeenCalledWith({ text: 'Urgent(* +=[❤', type: 'text' });
|
||||
expect(mockDB.setYAxisBottomText).toHaveBeenCalledWith({
|
||||
text: 'Urgent(* +=[❤',
|
||||
type: 'text',
|
||||
});
|
||||
expect(mockDB.setYAxisTopText).not.toHaveBeenCalled();
|
||||
|
||||
clearMocks();
|
||||
|
|
@ -165,7 +171,10 @@ describe('Testing quadrantChart jison file', () => {
|
|||
clearMocks();
|
||||
str = 'QuadRantChart \n QuaDrant-3 "Deligate(* +=[❤"';
|
||||
expect(parserFnConstructor(str)).not.toThrow();
|
||||
expect(mockDB.setQuadrant3Text).toHaveBeenCalledWith({ text: 'Deligate(* +=[❤', type: 'text' });
|
||||
expect(mockDB.setQuadrant3Text).toHaveBeenCalledWith({
|
||||
text: 'Deligate(* +=[❤',
|
||||
type: 'text',
|
||||
});
|
||||
});
|
||||
|
||||
it('should be able to parse quadrant4 text', () => {
|
||||
|
|
|
|||
|
|
@ -25,7 +25,11 @@ const clear = (): void => {
|
|||
};
|
||||
|
||||
class SankeyLink {
|
||||
constructor(public source: SankeyNode, public target: SankeyNode, public value: number = 0) {}
|
||||
constructor(
|
||||
public source: SankeyNode,
|
||||
public target: SankeyNode,
|
||||
public value: number = 0
|
||||
) {}
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -627,12 +627,18 @@ const activationBounds = function (actor, actors) {
|
|||
const actorObj = actors[actor];
|
||||
const activations = actorActivations(actor);
|
||||
|
||||
const left = activations.reduce(function (acc, activation) {
|
||||
const left = activations.reduce(
|
||||
function (acc, activation) {
|
||||
return common.getMin(acc, activation.startx);
|
||||
}, actorObj.x + actorObj.width / 2 - 1);
|
||||
const right = activations.reduce(function (acc, activation) {
|
||||
},
|
||||
actorObj.x + actorObj.width / 2 - 1
|
||||
);
|
||||
const right = activations.reduce(
|
||||
function (acc, activation) {
|
||||
return common.getMax(acc, activation.stopx);
|
||||
}, actorObj.x + actorObj.width / 2 + 1);
|
||||
},
|
||||
actorObj.x + actorObj.width / 2 + 1
|
||||
);
|
||||
return [left, right];
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@ By default, MathML is used for rendering mathematical expressions. If you have u
|
|||
Example with legacy mode enabled (the latest version of KaTeX's stylesheet can be found on their [docs](https://katex.org/docs/browser.html)):
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<!-- KaTeX requires the use of the HTML5 doctype. Without it, KaTeX may not render properly -->
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
|
|
|||
|
|
@ -67,7 +67,7 @@ Example:
|
|||
## Simple full example:
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<body>
|
||||
<pre class="mermaid">
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ One should **beware the use of some words or symbols** that can break diagrams.
|
|||
| Diagram Breakers | Reason | Solution |
|
||||
| ------------------------------------------------------------------------------------ | ----------------------------------------------------------------------- | ------------------------------------------------- |
|
||||
| **Comments** | | |
|
||||
| [` %%{``}%% `](https://github.com/mermaid-js/mermaid/issues/1968) | Similar to [Directives](../config/directives.md) confuses the renderer. | In comments using `%%`, avoid using "{}". |
|
||||
| [`%%{``}%%`](https://github.com/mermaid-js/mermaid/issues/1968) | Similar to [Directives](../config/directives.md) confuses the renderer. | In comments using `%%`, avoid using "{}". |
|
||||
| **Flow-Charts** | | |
|
||||
| 'end' | The word "End" can cause Flowcharts and Sequence diagrams to break | Wrap them in quotation marks to prevent breakage. |
|
||||
| [Nodes inside Nodes](../syntax/flowchart.md?id=special-characters-that-break-syntax) | Mermaid gets confused with nested shapes | wrap them in quotation marks to prevent breaking |
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
|
|
|
|||
|
|
@ -16,24 +16,24 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"@mdi/font": "^6.9.96",
|
||||
"@vueuse/core": "^10.1.0",
|
||||
"@vueuse/core": "^10.9.0",
|
||||
"font-awesome": "^4.7.0",
|
||||
"jiti": "^1.18.2",
|
||||
"vue": "^3.3",
|
||||
"mermaid": "workspace:^"
|
||||
"jiti": "^1.21.0",
|
||||
"mermaid": "workspace:^",
|
||||
"vue": "^3.4.21"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@iconify-json/carbon": "^1.1.16",
|
||||
"@unocss/reset": "^0.58.0",
|
||||
"@iconify-json/carbon": "^1.1.31",
|
||||
"@unocss/reset": "^0.58.6",
|
||||
"@vite-pwa/vitepress": "^0.4.0",
|
||||
"@vitejs/plugin-vue": "^4.2.1",
|
||||
"fast-glob": "^3.2.12",
|
||||
"@vitejs/plugin-vue": "^4.6.2",
|
||||
"fast-glob": "^3.3.2",
|
||||
"https-localhost": "^4.7.1",
|
||||
"pathe": "^1.1.0",
|
||||
"unocss": "^0.58.0",
|
||||
"pathe": "^1.1.2",
|
||||
"unocss": "^0.58.6",
|
||||
"unplugin-vue-components": "^0.26.0",
|
||||
"vite": "^4.5.2",
|
||||
"vite-plugin-pwa": "^0.19.0",
|
||||
"vite-plugin-pwa": "^0.19.7",
|
||||
"vitepress": "1.0.0-rc.45",
|
||||
"workbox-window": "^7.0.0"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -160,7 +160,7 @@ describe('when using mermaid and ', () => {
|
|||
await expect(
|
||||
mermaid.parse('this is not a mermaid diagram definition')
|
||||
).rejects.toThrowErrorMatchingInlineSnapshot(
|
||||
'"No diagram type detected matching given configuration for text: this is not a mermaid diagram definition"'
|
||||
`[UnknownDiagramError: No diagram type detected matching given configuration for text: this is not a mermaid diagram definition]`
|
||||
);
|
||||
});
|
||||
|
||||
|
|
@ -172,9 +172,9 @@ describe('when using mermaid and ', () => {
|
|||
it('should throw for an invalid flow definition', async () => {
|
||||
await expect(mermaid.parse('graph TQ;A--x|text including URL space|B;')).rejects
|
||||
.toThrowErrorMatchingInlineSnapshot(`
|
||||
"Lexical error on line 1. Unrecognized text.
|
||||
[Error: Lexical error on line 1. Unrecognized text.
|
||||
graph TQ;A--x|text includ
|
||||
-----^"
|
||||
-----^]
|
||||
`);
|
||||
});
|
||||
|
||||
|
|
@ -204,10 +204,10 @@ describe('when using mermaid and ', () => {
|
|||
'Bob-->Alice: Feel sick...\n' +
|
||||
'end';
|
||||
await expect(mermaid.parse(text)).rejects.toThrowErrorMatchingInlineSnapshot(`
|
||||
"Parse error on line 2:
|
||||
[Error: Parse error on line 2:
|
||||
...equenceDiagramAlice:->Bob: Hello Bob, h...
|
||||
----------------------^
|
||||
Expecting 'SOLID_OPEN_ARROW', 'DOTTED_OPEN_ARROW', 'SOLID_ARROW', 'DOTTED_ARROW', 'SOLID_CROSS', 'DOTTED_CROSS', 'SOLID_POINT', 'DOTTED_POINT', got 'TXT'"
|
||||
Expecting 'SOLID_OPEN_ARROW', 'DOTTED_OPEN_ARROW', 'SOLID_ARROW', 'DOTTED_ARROW', 'SOLID_CROSS', 'DOTTED_CROSS', 'SOLID_POINT', 'DOTTED_POINT', got 'TXT']
|
||||
`);
|
||||
});
|
||||
|
||||
|
|
@ -219,7 +219,7 @@ describe('when using mermaid and ', () => {
|
|||
await expect(
|
||||
mermaid.parse('this is not a mermaid diagram definition')
|
||||
).rejects.toThrowErrorMatchingInlineSnapshot(
|
||||
'"No diagram type detected matching given configuration for text: this is not a mermaid diagram definition"'
|
||||
`[UnknownDiagramError: No diagram type detected matching given configuration for text: this is not a mermaid diagram definition]`
|
||||
);
|
||||
expect(parseErrorWasCalled).toEqual(true);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -680,7 +680,7 @@ describe('mermaidAPI', () => {
|
|||
await expect(
|
||||
mermaidAPI.parse('this is not a mermaid diagram definition')
|
||||
).rejects.toThrowErrorMatchingInlineSnapshot(
|
||||
'"No diagram type detected matching given configuration for text: this is not a mermaid diagram definition"'
|
||||
`[UnknownDiagramError: No diagram type detected matching given configuration for text: this is not a mermaid diagram definition]`
|
||||
);
|
||||
});
|
||||
it('returns false for invalid definition with silent option', async () => {
|
||||
|
|
|
|||
|
|
@ -368,6 +368,16 @@ const render = async function (
|
|||
const enclosingDivID = 'd' + id;
|
||||
const enclosingDivID_selector = '#' + enclosingDivID;
|
||||
|
||||
const removeTempElements = () => {
|
||||
// -------------------------------------------------------------------------------
|
||||
// Remove the temporary HTML element if appropriate
|
||||
const tmpElementSelector = isSandboxed ? iFrameID_selector : enclosingDivID_selector;
|
||||
const node = select(tmpElementSelector).node();
|
||||
if (node && 'remove' in node) {
|
||||
node.remove();
|
||||
}
|
||||
};
|
||||
|
||||
let root: any = select('body');
|
||||
|
||||
const isSandboxed = config.securityLevel === SECURITY_LVL_SANDBOX;
|
||||
|
|
@ -424,6 +434,10 @@ const render = async function (
|
|||
try {
|
||||
diag = await Diagram.fromText(text, { title: processed.title });
|
||||
} catch (error) {
|
||||
if (config.suppressErrorRendering) {
|
||||
removeTempElements();
|
||||
throw error;
|
||||
}
|
||||
diag = await Diagram.fromText('error');
|
||||
parseEncounteredException = error;
|
||||
}
|
||||
|
|
@ -451,7 +465,11 @@ const render = async function (
|
|||
try {
|
||||
await diag.renderer.draw(text, id, version, diag);
|
||||
} catch (e) {
|
||||
if (config.suppressErrorRendering) {
|
||||
removeTempElements();
|
||||
} else {
|
||||
errorRenderer.draw(text, id, version);
|
||||
}
|
||||
throw e;
|
||||
}
|
||||
|
||||
|
|
@ -487,13 +505,7 @@ const render = async function (
|
|||
throw parseEncounteredException;
|
||||
}
|
||||
|
||||
// -------------------------------------------------------------------------------
|
||||
// Remove the temporary HTML element if appropriate
|
||||
const tmpElementSelector = isSandboxed ? iFrameID_selector : enclosingDivID_selector;
|
||||
const node = select(tmpElementSelector).node();
|
||||
if (node && 'remove' in node) {
|
||||
node.remove();
|
||||
}
|
||||
removeTempElements();
|
||||
|
||||
return {
|
||||
diagramType,
|
||||
|
|
@ -566,6 +578,7 @@ function addA11yInfo(
|
|||
* securityLevel: 'strict',
|
||||
* startOnLoad: true,
|
||||
* arrowMarkerAbsolute: false,
|
||||
* suppressErrorRendering: false,
|
||||
*
|
||||
* er: {
|
||||
* diagramPadding: 20,
|
||||
|
|
|
|||
|
|
@ -121,7 +121,7 @@ it('should handle strings with newlines', () => {
|
|||
expect(() =>
|
||||
splitLineToFitWidth(getLineFromString(str), checkFn)
|
||||
).toThrowErrorMatchingInlineSnapshot(
|
||||
'"splitLineToFitWidth does not support newlines in the line"'
|
||||
`[Error: splitLineToFitWidth does not support newlines in the line]`
|
||||
);
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -159,7 +159,15 @@ properties:
|
|||
in the current `currentConfig`.
|
||||
|
||||
This prevents malicious graph directives from overriding a site's default security.
|
||||
default: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize', 'maxEdges']
|
||||
default:
|
||||
[
|
||||
'secure',
|
||||
'securityLevel',
|
||||
'startOnLoad',
|
||||
'maxTextSize',
|
||||
'suppressErrorRendering',
|
||||
'maxEdges',
|
||||
]
|
||||
type: array
|
||||
items:
|
||||
type: string
|
||||
|
|
@ -238,6 +246,12 @@ properties:
|
|||
markdownAutoWrap:
|
||||
type: boolean
|
||||
default: true
|
||||
suppressErrorRendering:
|
||||
type: boolean
|
||||
default: false
|
||||
description: |
|
||||
Suppresses inserting 'Syntax error' diagram in the DOM.
|
||||
This is useful when you want to control how to handle syntax errors in your application.
|
||||
|
||||
$defs: # JSON Schema definition (maybe we should move these to a separate file)
|
||||
BaseDiagramConfig:
|
||||
|
|
|
|||
|
|
@ -39,9 +39,11 @@ export class MockedD3 {
|
|||
return this.select(select_str);
|
||||
});
|
||||
|
||||
append = vi
|
||||
.fn()
|
||||
.mockImplementation(function (this: MockedD3, type: string, id = '' + '-appended'): MockedD3 {
|
||||
append = vi.fn().mockImplementation(function (
|
||||
this: MockedD3,
|
||||
type: string,
|
||||
id = '' + '-appended'
|
||||
): MockedD3 {
|
||||
const newMock = new MockedD3(id);
|
||||
newMock.attribs.set('type', type);
|
||||
this._children.push(newMock);
|
||||
|
|
|
|||
4069
pnpm-lock.yaml
4069
pnpm-lock.yaml
File diff suppressed because it is too large
Load Diff
|
|
@ -12,12 +12,12 @@
|
|||
"author": "",
|
||||
"license": "ISC",
|
||||
"devDependencies": {
|
||||
"webpack": "^5.88.2",
|
||||
"webpack": "^5.91.0",
|
||||
"webpack-cli": "^4.10.0",
|
||||
"webpack-dev-server": "^4.11.1"
|
||||
"webpack-dev-server": "^4.15.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"mermaid": "workspace:*",
|
||||
"@mermaid-js/mermaid-example-diagram": "workspace:*"
|
||||
"@mermaid-js/mermaid-example-diagram": "workspace:*",
|
||||
"mermaid": "workspace:*"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
|
|
|
|||
Loading…
Reference in New Issue