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

Merge branch 'develop' into sidv/splitUnicode

Browse Source 
* develop:
  Update docs
  Rename info to note
  Rename "info" to "note"
  Update all patch dependencies
  Fix Directives Documentation
  Update tutorial link
  Run build
  Fix link to Tutorials from n00b-overview page
  UPdated version to 10.2.3
  Remove old changelog
  Remove old changelog
  Setting version to 10.2.2
  #4446 Improved regular expression
  #4446 Updating the cleanup criteria
  #4438 Reverted to the changes from #4285
  Fix download
  Fix compile error in docs.
  Fix Contributor link in homepage
  Update docs
  Add hint on "flowchart" and "graph" (and some more styling)
This commit is contained in:
Sidharth Vinod 2023-06-12 14:58:58 +05:30
commit c85e479f88
No known key found for this signature in database
GPG Key ID: FB5CCD378D3907CD
26 changed files with 370 additions and 2304 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
cypress/helpers/util.js
View File

@ -60,7 +60,7 @@ export const renderGraph = (graphStr, options, api) => {
openURLAndVerifyRendering(url, options); openURLAndVerifyRendering(url, options);
}; };
const openURLAndVerifyRendering = (url, options, validation = undefined) => { export const openURLAndVerifyRendering = (url, options, validation = undefined) => {
const useAppli = Cypress.env('useAppli'); const useAppli = Cypress.env('useAppli');
const name = (options.name || cy.state('runnable').fullTitle()).replace(/\s+/g, '-'); const name = (options.name || cy.state('runnable').fullTitle()).replace(/\s+/g, '-');

9
cypress/integration/other/ghsa.spec.js
View File

@ -1,4 +1,4 @@
import { urlSnapshotTest } from '../../helpers/util.js'; import { urlSnapshotTest, openURLAndVerifyRendering } from '../../helpers/util.js';
describe('CSS injections', () => { describe('CSS injections', () => {
it('should not allow CSS injections outside of the diagram', () => { it('should not allow CSS injections outside of the diagram', () => {
@ -13,4 +13,11 @@ describe('CSS injections', () => {
flowchart: { htmlLabels: false }, flowchart: { htmlLabels: false },
}); });
}); });
it('should not allow manipulating styletags using arrowheads', () => {
openURLAndVerifyRendering('http://localhost:9000/xss23-css.html', {
logLevel: 1,
arrowMarkerAbsolute: false,
flowchart: { htmlLabels: true },
});
});
}); });

85
cypress/platform/xss23-css.html Normal file
View File

@ -0,0 +1,85 @@
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<link
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
rel="stylesheet"
/>
<style>
body {
/* background: rgb(221, 208, 208); */
/* background:#333; */
font-family: 'Arial';
/* font-size: 18px !important; */
}
h1 {
color: grey;
}
.mermaid2 {
display: none;
}
.mermaid svg {
/* font-size: 18px !important; */
}
.malware {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 150px;
background: red;
color: black;
display: flex;
display: flex;
justify-content: center;
align-items: center;
font-family: monospace;
font-size: 72px;
}
</style>
</head>
<body>
<div>Security check</div>
<div class="flex">
<div id="diagram" class="mermaid"></div>
<div id="graph-div"></div>
<div id="res" class=""></div>
</div>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
};
mermaid.initialize({
theme: 'base',
startOnLoad: false,
flowcharts: { htmlLabels: true },
});
function callback() {
alert('It worked');
}
function xssAttack() {
const div = document.createElement('div');
div.id = 'the-malware';
div.className = 'malware';
div.innerHTML = 'XSS Succeeded';
document.getElementsByTagName('body')[0].appendChild(div);
throw new Error('XSS Succeeded');
}
let diagram = `graph TD
A[["a marker-end=#quot;url(<s title='#<style>*{background:red}</style>'>b"]]
`;
const el = document.querySelector('#graph-div');
console.log(diagram);
const { svg } = await mermaid.render('graph-div', diagram);
document.querySelector('#res').innerHTML = svg;
window.rendered = true;
</script>
</body>
</html>

1054
docs/CHANGELOG.md
View File

File diff suppressed because it is too large Load Diff

2
docs/community/n00b-overview.md
View File

@ -69,6 +69,6 @@ In fact one can pick up the syntax for it quite easily from the examples given a
## Mermaid is for everyone. ## Mermaid is for everyone.
Video [Tutorials](https://mermaid-js.github.io/mermaid/#/../config/Tutorials) are also available for the mermaid [live editor](https://mermaid.live/). Video [Tutorials](https://mermaid.js.org/config/Tutorials.html) are also available for the mermaid [live editor](https://mermaid.live/).
Alternatively you can use Mermaid [Plug-Ins](https://mermaid-js.github.io/mermaid/#/./integrations), with tools you already use, like Google Docs. Alternatively you can use Mermaid [Plug-Ins](https://mermaid-js.github.io/mermaid/#/./integrations), with tools you already use, like Google Docs.

63
docs/config/directives.md
View File

@ -8,11 +8,11 @@
## Directives ## Directives
Directives gives a diagram author the capability to alter the appearance of a diagram before rendering by changing the applied configuration. Directives give a diagram author the capability to alter the appearance of a diagram before rendering by changing the applied configuration.
The significance of having directives is that you have them available while writing the diagram, and can modify the default global and diagram specific configurations. So, directives are applied on top of the default configurations. The beauty of directives is that you can use them to alter configuration settings for a specific diagram, i.e. at an individual level. The significance of having directives is that you have them available while writing the diagram, and can modify the default global and diagram-specific configurations. So, directives are applied on top of the default configuration. The beauty of directives is that you can use them to alter configuration settings for a specific diagram, i.e. at an individual level.
While directives allow you to change most of the default configuration settings, there are some that are not available, that too for security reasons. Also, you do have the _option to define the set of configurations_ that you would allow to be available to the diagram author for overriding with help of directives. While directives allow you to change most of the default configuration settings, there are some that are not available, for security reasons. Also, you have the _option to define the set of configurations_ that you wish to allow diagram authors to override with directives.
## Types of Directives options ## Types of Directives options
@ -27,22 +27,22 @@ Mermaid basically supports two types of configuration options to be overridden b
- startOnLoad - startOnLoad
- secure - secure
2. _Diagram specific configurations_ : These are the configurations that are available and applied to a specific diagram. For each diagram there are specific configuration that will alter how that particular diagram looks and behaves. 2. _Diagram-specific configurations_ : These are the configurations that are available and applied to a specific diagram. For each diagram there are specific configuration that will alter how that particular diagram looks and behaves.
For example, `mirrorActors` is a configuration that is specific to the `SequenceDiagram` and alter whether the actors are mirrored or not. So this config is available only for the `SequenceDiagram` type. For example, `mirrorActors` is a configuration that is specific to the `SequenceDiagram` and alters whether the actors are mirrored or not. So this config is available only for the `SequenceDiagram` type.
**NOTE:** These options listed here are not all the configuration options. To get hold of all the configuration options, please refer to the [defaultConfig.ts](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/defaultConfig.ts) in the source code. **NOTE:** Not all configuration options are listed here. To get hold of all the configuration options, please refer to the [defaultConfig.ts](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/defaultConfig.ts) in the source code.
> **Note** > **Note**
> We plan to publish a complete list of top-level configurations & all the diagram specific configurations, with their possible values in the docs soon. > We plan to publish a complete list of top-level configurations & diagram-specific configurations with their possible values in the docs soon.
## Declaring directives ## Declaring directives
Now that we have defined the types of configurations that are available, we can learn how to declare directives. Now that we have defined the types of configurations that are available, we can learn how to declare directives.
A directive always starts and end `%%` sign with directive text in between, like `%% {directive_text} %%`. A directive always starts and ends with `%%` signs with directive text in between, like `%% {directive_text} %%`.
Here the structure of a directive text is like a nested key-value pair map or a JSON object with root being _init_. Where all the general configurations are defined in the top level, and all the diagram specific configurations are defined one level deeper with diagram type as key/root for that section. Here the structure of a directive text is like a nested key-value pair map or a JSON object with root being _init_. Where all the general configurations are defined in the top level, and all the diagram specific configurations are defined one level deeper with diagram type as key/root for that section.
Following code snippet shows the structure of a directive: The following code snippet shows the structure of a directive:
%%{ %%{
init: { init: {
@ -61,14 +61,14 @@ Following code snippet shows the structure of a directive:
You can also define the directives in a single line, like this: You can also define the directives in a single line, like this:
%%{init: { **insert argument here**}}%% %%{init: { **insert configuration options here** } }%%
For example, the following code snippet: For example, the following code snippet:
%%{init: { "sequence": { "mirrorActors":false }}}%% %%{init: { "sequence": { "mirrorActors":false }}}%%
**Notes:** **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. The JSON object that is passed as {**argument**} must be valid key value pairs and encased in quotation marks or it will be ignored.
Valid Key Value pairs can be found in config. Valid Key Value pairs can be found in config.
Example with a simple graph: Example with a simple graph:
@ -87,7 +87,7 @@ A-->B
Here the directive declaration will set the `logLevel` to `debug` and the `theme` to `dark` for a rendered mermaid diagram, changing the appearance of the diagram itself. Here the directive declaration will set the `logLevel` to `debug` and the `theme` to `dark` for a rendered mermaid diagram, changing the appearance of the diagram itself.
Note: You can use 'init' or 'initialize' as both acceptable as init directives. Also note that `%%init%%` and `%%initialize%%` directives will be grouped together after they are parsed. This means: Note: You can use 'init' or 'initialize' as both are acceptable as init directives. Also note that `%%init%%` and `%%initialize%%` directives will be grouped together after they are parsed.
```mermaid-example ```mermaid-example
%%{init: { 'logLevel': 'debug', 'theme': 'forest' } }%% %%{init: { 'logLevel': 'debug', 'theme': 'forest' } }%%
@ -101,7 +101,7 @@ Note: You can use 'init' or 'initialize' as both acceptable as init directives.
... ...
``` ```
parsing the above generates a single `%%init%%` JSON object below, combining the two directives and carrying over the last value given for `loglevel`: For example, parsing the above generates a single `%%init%%` JSON object below, combining the two directives and carrying over the last value given for `loglevel`:
```json ```json
{ {
@ -115,16 +115,15 @@ This will then be sent to `mermaid.initialize(...)` for rendering.
## Directive Examples ## Directive Examples
More directive examples for diagram specific configuration overrides Now that the concept of directives has been explained, let us see some more examples of directive usage:
Now that the concept of directives has been explained, Let us see some more examples for directives usage:
### Changing Theme via directive ### Changing theme via directive
The following code snippet changes theme to forest: The following code snippet changes `theme` to `forest`:
`%%{init: { "theme": "forest" } }%%` `%%{init: { "theme": "forest" } }%%`
Possible themes value are: `default`,`base`, `dark`, `forest` and `neutral`. Possible theme values are: `default`,`base`, `dark`, `forest` and `neutral`.
Default Value is `default`. Default Value is `default`.
Example: Example:
@ -155,7 +154,7 @@ A --> C[End]
### Changing fontFamily via directive ### Changing fontFamily via directive
The following code snippet changes fontFamily to rebuchet MS, Verdana, Arial, Sans-Serif: The following code snippet changes fontFamily to Trebuchet MS, Verdana, Arial, Sans-Serif:
`%%{init: { "fontFamily": "Trebuchet MS, Verdana, Arial, Sans-Serif" } }%%` `%%{init: { "fontFamily": "Trebuchet MS, Verdana, Arial, Sans-Serif" } }%%`
@ -187,11 +186,11 @@ A --> C[End]
### Changing logLevel via directive ### Changing logLevel via directive
The following code snippet changes logLevel to 2: The following code snippet changes `logLevel` to `2`:
`%%{init: { "logLevel": 2 } }%%` `%%{init: { "logLevel": 2 } }%%`
Possible logLevel values are: Possible `logLevel` values are:
- `1` for _debug_, - `1` for _debug_,
- `2` for _info_ - `2` for _info_
@ -234,14 +233,14 @@ Some common flowchart configurations are:
- _diagramPadding_: number - _diagramPadding_: number
- _useMaxWidth_: number - _useMaxWidth_: number
For complete list of flowchart configurations, see [defaultConfig.ts](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/defaultConfig.ts) in the source code. For a complete list of flowchart configurations, see [defaultConfig.ts](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/defaultConfig.ts) in the source code.
_Soon we plan to publish a complete list all diagram specific configurations updated in the docs_ _Soon we plan to publish a complete list of all diagram-specific configurations updated in the docs._
The following code snippet changes flowchart config: The following code snippet changes flowchart config:
`%%{init: { "flowchart": { "htmlLabels": true, "curve": "linear" } } }%%` `%%{init: { "flowchart": { "htmlLabels": true, "curve": "linear" } } }%%`
Here were are overriding only the flowchart config, and not the general config, where HtmlLabels is set to true and curve is set to linear. Here we are overriding only the flowchart config, and not the general config, setting `htmlLabels` to `true` and `curve` to `linear`.
```mermaid-example ```mermaid-example
%%{init: { "flowchart": { "htmlLabels": true, "curve": "linear" } } }%% %%{init: { "flowchart": { "htmlLabels": true, "curve": "linear" } } }%%
@ -267,7 +266,7 @@ A --> C[End]
### Changing Sequence diagram config via directive ### Changing Sequence diagram config via directive
Some common sequence configurations are: Some common sequence diagram configurations are:
- _width_: number - _width_: number
- _height_: number - _height_: number
@ -278,8 +277,8 @@ Some common sequence configurations are:
- _showSequenceNumbers_: boolean - _showSequenceNumbers_: boolean
- _wrap_: boolean - _wrap_: boolean
For complete list of sequence diagram configurations, see _defaultConfig.ts_ in the source code. For a complete list of sequence diagram configurations, see [defaultConfig.ts](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/defaultConfig.ts) in the source code.
_Soon we plan to publish a complete list all diagram specific configurations updated in the docs_ _Soon we plan to publish a complete list of all diagram-specific configurations updated in the docs._
So, `wrap` by default has a value of `false` for sequence diagrams. So, `wrap` by default has a value of `false` for sequence diagrams.
@ -289,7 +288,7 @@ Let us see an example:
sequenceDiagram sequenceDiagram
Alice->Bob: Hello Bob, how are you? Alice->Bob: Hello Bob, how are you?
Bob->Alice: Fine, How did you mother like the book I suggested? And did you catch with the new book about alien invasion? Bob->Alice: Fine, how did you mother like the book I suggested? And did you catch the new book about alien invasion?
Alice->Bob: Good. Alice->Bob: Good.
Bob->Alice: Cool Bob->Alice: Cool
``` ```
@ -298,7 +297,7 @@ Bob->Alice: Cool
sequenceDiagram sequenceDiagram
Alice->Bob: Hello Bob, how are you? Alice->Bob: Hello Bob, how are you?
Bob->Alice: Fine, How did you mother like the book I suggested? And did you catch with the new book about alien invasion? Bob->Alice: Fine, how did you mother like the book I suggested? And did you catch the new book about alien invasion?
Alice->Bob: Good. Alice->Bob: Good.
Bob->Alice: Cool Bob->Alice: Cool
``` ```
@ -309,13 +308,13 @@ The following code snippet changes sequence diagram config for `wrap` to `true`:
`%%{init: { "sequence": { "wrap": true} } }%%` `%%{init: { "sequence": { "wrap": true} } }%%`
Using in the diagram above, the wrap will be enabled. By applying that snippet to the diagram above, `wrap` will be enabled:
```mermaid-example ```mermaid-example
%%{init: { "sequence": { "wrap": true, "width":300 } } }%% %%{init: { "sequence": { "wrap": true, "width":300 } } }%%
sequenceDiagram sequenceDiagram
Alice->Bob: Hello Bob, how are you? Alice->Bob: Hello Bob, how are you?
Bob->Alice: Fine, How did you mother like the book I suggested? And did you catch with the new book about alien invasion? Bob->Alice: Fine, how did you mother like the book I suggested? And did you catch the new book about alien invasion?
Alice->Bob: Good. Alice->Bob: Good.
Bob->Alice: Cool Bob->Alice: Cool
``` ```
@ -324,7 +323,7 @@ Bob->Alice: Cool
%%{init: { "sequence": { "wrap": true, "width":300 } } }%% %%{init: { "sequence": { "wrap": true, "width":300 } } }%%
sequenceDiagram sequenceDiagram
Alice->Bob: Hello Bob, how are you? Alice->Bob: Hello Bob, how are you?
Bob->Alice: Fine, How did you mother like the book I suggested? And did you catch with the new book about alien invasion? Bob->Alice: Fine, how did you mother like the book I suggested? And did you catch the new book about alien invasion?
Alice->Bob: Good. Alice->Bob: Good.
Bob->Alice: Cool Bob->Alice: Cool
``` ```

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

@ -96,7 +96,7 @@ mermaid.initialize(config);
#### Defined in #### Defined in
[mermaidAPI.ts:667](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L667) [mermaidAPI.ts:670](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L670)
## Functions ## Functions
@ -127,7 +127,7 @@ Return the last node appended
#### Defined in #### Defined in
[mermaidAPI.ts:306](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L306) [mermaidAPI.ts:309](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L309)
--- ---
@ -295,7 +295,7 @@ Put the svgCode into an iFrame. Return the iFrame code
#### Defined in #### Defined in
[mermaidAPI.ts:285](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L285) [mermaidAPI.ts:288](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L288)
--- ---
@ -320,4 +320,4 @@ Remove any existing elements from the given document
#### Defined in #### Defined in
[mermaidAPI.ts:356](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L356) [mermaidAPI.ts:359](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L359)

11
docs/syntax/flowchart.md
View File

@ -32,6 +32,9 @@ flowchart LR
> **Note** > **Note**
> The id is what is displayed in the box. > The id is what is displayed in the box.
> **💡 Tip**
> Instead of `flowchart` one can also use `graph`.
### A node with text ### A node with text
It is also possible to set text in the box that differs from the id. If this is done several times, it is the last text It is also possible to set text in the box that differs from the id. If this is done several times, it is the last text
@ -785,7 +788,10 @@ This feature is applicable to node labels, edge labels, and subgraph labels.
## Interaction ## Interaction
It is possible to bind a click event to a node, the click can lead to either a javascript callback or to a link which will be opened in a new browser tab. **Note**: This functionality is disabled when using `securityLevel='strict'` and enabled when using `securityLevel='loose'`. It is possible to bind a click event to a node, the click can lead to either a javascript callback or to a link which will be opened in a new browser tab.
> **Note**
> This functionality is disabled when using `securityLevel='strict'` and enabled when using `securityLevel='loose'`.
click nodeId callback click nodeId callback
click nodeId call callback() click nodeId call callback()
@ -1077,7 +1083,8 @@ You can change the renderer to elk by adding this directive:
%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%% %%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
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. > **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.
### Width ### Width

7
docs/syntax/quadrantChart.md
View File

@ -46,9 +46,6 @@ quadrantChart
## Syntax ## Syntax
> **Note**
> In place of `<text>` you can use text like `this is a sample text` or inside **double quotes** like `"This type of text may contain unicode like ❤"`.
> **Note** > **Note**
> If there is no points available in the chart both **axis** text and **quadrant** will be rendered in the center of the respective quadrant. > If there is no points available in the chart both **axis** text and **quadrant** will be rendered in the center of the respective quadrant.
> If there are points **x-axis** labels will rendered from left of the respective quadrant also they will be displayed in bottom of the chart, and **y-axis** lables will be rendered in bottom of the respective quadrant, the quadrant text will render at top of the respective quadrant. > If there are points **x-axis** labels will rendered from left of the respective quadrant also they will be displayed in bottom of the chart, and **y-axis** lables will be rendered in bottom of the respective quadrant, the quadrant text will render at top of the respective quadrant.
@ -152,7 +149,7 @@ Points are used to plot a circle inside the quadrantChart. The syntax is `<text>
%%{init: {"quadrantChart": {"chartWidth": 400, "chartHeight": 400}, "themeVariables": {"quadrant1TextFill": "#ff0000"} }}%% %%{init: {"quadrantChart": {"chartWidth": 400, "chartHeight": 400}, "themeVariables": {"quadrant1TextFill": "#ff0000"} }}%%
quadrantChart quadrantChart
x-axis Urgent --> Not Urgent x-axis Urgent --> Not Urgent
y-axis Not Important --> important y-axis Not Important --> "Important ❤"
quadrant-1 Plan quadrant-1 Plan
quadrant-2 Do quadrant-2 Do
quadrant-3 Deligate quadrant-3 Deligate
@ -163,7 +160,7 @@ quadrantChart
%%{init: {"quadrantChart": {"chartWidth": 400, "chartHeight": 400}, "themeVariables": {"quadrant1TextFill": "#ff0000"} }}%% %%{init: {"quadrantChart": {"chartWidth": 400, "chartHeight": 400}, "themeVariables": {"quadrant1TextFill": "#ff0000"} }}%%
quadrantChart quadrantChart
x-axis Urgent --> Not Urgent x-axis Urgent --> Not Urgent
y-axis Not Important --> important y-axis Not Important --> "Important ❤"
quadrant-1 Plan quadrant-1 Plan
quadrant-2 Do quadrant-2 Do
quadrant-3 Deligate quadrant-3 Deligate

2
package.json
View File

@ -1,7 +1,7 @@
{ {
"name": "mermaid-monorepo", "name": "mermaid-monorepo",
"private": true, "private": true,
"version": "10.2.0", "version": "10.2.3",
"description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.", "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
"type": "module", "type": "module",
"packageManager": "pnpm@8.5.1", "packageManager": "pnpm@8.5.1",

4
packages/mermaid/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "mermaid", "name": "mermaid",
"version": "10.2.0", "version": "10.2.3",
"description": "Markdown-ish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.", "description": "Markdown-ish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
"type": "module", "type": "module",
"module": "./dist/mermaid.core.mjs", "module": "./dist/mermaid.core.mjs",
@ -28,7 +28,7 @@
"docs:build": "rimraf ../../docs && pnpm docs:spellcheck && pnpm docs:code && ts-node-esm src/docs.mts", "docs:build": "rimraf ../../docs && pnpm docs:spellcheck && pnpm docs:code && ts-node-esm src/docs.mts",
"docs:verify": "pnpm docs:spellcheck && pnpm docs:code && ts-node-esm src/docs.mts --verify", "docs:verify": "pnpm docs:spellcheck && pnpm docs:code && ts-node-esm src/docs.mts --verify",
"docs:pre:vitepress": "rimraf src/vitepress && pnpm docs:code && ts-node-esm src/docs.mts --vitepress", "docs:pre:vitepress": "rimraf src/vitepress && pnpm docs:code && ts-node-esm src/docs.mts --vitepress",
"docs:build:vitepress": "pnpm docs:pre:vitepress && (cd src/vitepress && pnpm --filter ./ install --no-frozen-lockfile && pnpm run build) && cpy --flat src/docs/landing/ ./src/vitepress/.vitepress/dist/landing", "docs:build:vitepress": "pnpm docs:pre:vitepress && (cd src/vitepress && pnpm --filter ./ install --no-frozen-lockfile --ignore-scripts && pnpm run build) && cpy --flat src/docs/landing/ ./src/vitepress/.vitepress/dist/landing",
"docs:dev": "pnpm docs:pre:vitepress && concurrently \"pnpm --filter ./ src/vitepress dev\" \"ts-node-esm src/docs.mts --watch --vitepress\"", "docs:dev": "pnpm docs:pre:vitepress && concurrently \"pnpm --filter ./ src/vitepress dev\" \"ts-node-esm src/docs.mts --watch --vitepress\"",
"docs:serve": "pnpm docs:build:vitepress && vitepress serve src/vitepress", "docs:serve": "pnpm docs:build:vitepress && vitepress serve src/vitepress",
"docs:spellcheck": "cspell --config ../../cSpell.json \"src/docs/**/*.md\"", "docs:spellcheck": "cspell --config ../../cSpell.json \"src/docs/**/*.md\"",

8
packages/mermaid/src/diagrams/gantt/ganttDb.js
View File

@ -1,8 +1,8 @@
import { sanitizeUrl } from '@braintree/sanitize-url'; import { sanitizeUrl } from '@braintree/sanitize-url';
import dayjs from 'dayjs/esm/index.js'; import dayjs from 'dayjs';
import dayjsIsoWeek from 'dayjs/esm/plugin/isoWeek/index.js'; import dayjsIsoWeek from 'dayjs/plugin/isoWeek.js';
import dayjsCustomParseFormat from 'dayjs/esm/plugin/customParseFormat/index.js'; import dayjsCustomParseFormat from 'dayjs/plugin/customParseFormat.js';
import dayjsAdvancedFormat from 'dayjs/esm/plugin/advancedFormat/index.js'; import dayjsAdvancedFormat from 'dayjs/plugin/advancedFormat.js';
import { log } from '../../logger.js'; import { log } from '../../logger.js';
import * as configApi from '../../config.js'; import * as configApi from '../../config.js';
import utils from '../../utils.js'; import utils from '../../utils.js';

2
packages/mermaid/src/diagrams/gantt/ganttDb.spec.ts
View File

@ -1,5 +1,5 @@
// @ts-nocheck TODO: Fix TS // @ts-nocheck TODO: Fix TS
import dayjs from 'dayjs/esm/index.js'; import dayjs from 'dayjs';
import ganttDb from './ganttDb.js'; import ganttDb from './ganttDb.js';
import { convert } from '../../tests/util.js'; import { convert } from '../../tests/util.js';

2
packages/mermaid/src/diagrams/gantt/ganttRenderer.js
View File

@ -1,4 +1,4 @@
import dayjs from 'dayjs/esm/index.js'; import dayjs from 'dayjs';
import { log } from '../../logger.js'; import { log } from '../../logger.js';
import { import {
select, select,

10
packages/mermaid/src/docs/.vitepress/components/Contributors.vue
View File

@ -5,12 +5,12 @@ import { contributors } from '../contributors';
<template> <template>
<div flex="~ wrap gap2" justify-center> <div flex="~ wrap gap2" justify-center>
<a <a
v-for="{ name, avatar } of contributors" v-for="{ username, avatar } of contributors"
:key="name" :key="username"
:href="`https://github.com/${name}`" :href="`https://github.com/${username}`"
m-0 m-0
rel="noopener noreferrer" rel="noopener noreferrer"
:aria-label="`${name} on GitHub`" :aria-label="`${username} on GitHub`"
> >
<img <img
loading="lazy" loading="lazy"
@ -20,7 +20,7 @@ import { contributors } from '../contributors';
rounded-full rounded-full
h-12 h-12
w-12 w-12
:alt="`${name}'s avatar`" :alt="`${username}'s avatar`"
/> />
</a> </a>
</div> </div>

20
packages/mermaid/src/docs/.vitepress/scripts/fetch-avatars.ts
View File

@ -1,3 +1,4 @@
/* eslint-disable no-console */
import { mkdir, writeFile, readFile } from 'node:fs/promises'; import { mkdir, writeFile, readFile } from 'node:fs/promises';
import { existsSync } from 'node:fs'; import { existsSync } from 'node:fs';
import { fileURLToPath } from 'url'; import { fileURLToPath } from 'url';
@ -12,22 +13,23 @@ async function download(url: string, fileName: URL) {
if (existsSync(fileName)) { if (existsSync(fileName)) {
return; return;
} }
// eslint-disable-next-line no-console console.log('downloading', url);
console.log('downloading', fileName);
try { try {
const image = await fetch(url); const image = await fetch(url);
await writeFile(fileName, Buffer.from(await image.arrayBuffer())); await writeFile(fileName, Buffer.from(await image.arrayBuffer()));
} catch {} } catch (error) {
console.error(error);
}
} }
async function fetchAvatars() { async function fetchAvatars() {
await mkdir(fileURLToPath(new URL('..', getAvatarPath('none'))), { recursive: true }); await mkdir(fileURLToPath(new URL(getAvatarPath('none'))).replace('none.png', ''), {
recursive: true,
});
contributors = JSON.parse(await readFile(pathContributors, { encoding: 'utf-8' })); contributors = JSON.parse(await readFile(pathContributors, { encoding: 'utf-8' }));
await Promise.allSettled( for (const name of contributors) {
contributors.map((name) => await download(`https://github.com/${name}.png?size=100`, getAvatarPath(name));
download(`https://github.com/${name}.png?size=100`, getAvatarPath(name)) }
)
);
} }
fetchAvatars(); fetchAvatars();

3
packages/mermaid/src/docs/.vitepress/scripts/fetch-contributors.ts
View File

@ -23,9 +23,8 @@ async function fetchContributors() {
} }
); );
data = await response.json(); data = await response.json();
console.log(response.status, response.statusText);
console.log(data);
collaborators.push(...data.map((i) => i.login)); collaborators.push(...data.map((i) => i.login));
console.log(`Fetched page ${page}`);
page++; page++;
} while (data.length === 100); } while (data.length === 100);
return collaborators.filter((name) => !name.includes('[bot]')); return collaborators.filter((name) => !name.includes('[bot]'));

1024
packages/mermaid/src/docs/CHANGELOG.md
View File

File diff suppressed because it is too large Load Diff

2
packages/mermaid/src/docs/community/n00b-overview.md
View File

@ -63,6 +63,6 @@ In fact one can pick up the syntax for it quite easily from the examples given a
## Mermaid is for everyone. ## Mermaid is for everyone.
Video [Tutorials](https://mermaid-js.github.io/mermaid/#/../config/Tutorials) are also available for the mermaid [live editor](https://mermaid.live/). Video [Tutorials](https://mermaid.js.org/config/Tutorials.html) are also available for the mermaid [live editor](https://mermaid.live/).
Alternatively you can use Mermaid [Plug-Ins](https://mermaid-js.github.io/mermaid/#/./integrations), with tools you already use, like Google Docs. Alternatively you can use Mermaid [Plug-Ins](https://mermaid-js.github.io/mermaid/#/./integrations), with tools you already use, like Google Docs.

59
packages/mermaid/src/docs/config/directives.md
View File

@ -2,11 +2,11 @@
## Directives ## Directives
Directives gives a diagram author the capability to alter the appearance of a diagram before rendering by changing the applied configuration. Directives give a diagram author the capability to alter the appearance of a diagram before rendering by changing the applied configuration.
The significance of having directives is that you have them available while writing the diagram, and can modify the default global and diagram specific configurations. So, directives are applied on top of the default configurations. The beauty of directives is that you can use them to alter configuration settings for a specific diagram, i.e. at an individual level. The significance of having directives is that you have them available while writing the diagram, and can modify the default global and diagram-specific configurations. So, directives are applied on top of the default configuration. The beauty of directives is that you can use them to alter configuration settings for a specific diagram, i.e. at an individual level.
While directives allow you to change most of the default configuration settings, there are some that are not available, that too for security reasons. Also, you do have the _option to define the set of configurations_ that you would allow to be available to the diagram author for overriding with help of directives. While directives allow you to change most of the default configuration settings, there are some that are not available, for security reasons. Also, you have the _option to define the set of configurations_ that you wish to allow diagram authors to override with directives.
## Types of Directives options ## Types of Directives options
@ -21,23 +21,23 @@ Mermaid basically supports two types of configuration options to be overridden b
- startOnLoad - startOnLoad
- secure - secure
2. _Diagram specific configurations_ : These are the configurations that are available and applied to a specific diagram. For each diagram there are specific configuration that will alter how that particular diagram looks and behaves. 2. _Diagram-specific configurations_ : These are the configurations that are available and applied to a specific diagram. For each diagram there are specific configuration that will alter how that particular diagram looks and behaves.
For example, `mirrorActors` is a configuration that is specific to the `SequenceDiagram` and alter whether the actors are mirrored or not. So this config is available only for the `SequenceDiagram` type. For example, `mirrorActors` is a configuration that is specific to the `SequenceDiagram` and alters whether the actors are mirrored or not. So this config is available only for the `SequenceDiagram` type.
**NOTE:** These options listed here are not all the configuration options. To get hold of all the configuration options, please refer to the [defaultConfig.ts](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/defaultConfig.ts) in the source code. **NOTE:** Not all configuration options are listed here. To get hold of all the configuration options, please refer to the [defaultConfig.ts](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/defaultConfig.ts) in the source code.
```note ```note
We plan to publish a complete list of top-level configurations & all the diagram specific configurations, with their possible values in the docs soon. We plan to publish a complete list of top-level configurations & diagram-specific configurations with their possible values in the docs soon.
``` ```
## Declaring directives ## Declaring directives
Now that we have defined the types of configurations that are available, we can learn how to declare directives. Now that we have defined the types of configurations that are available, we can learn how to declare directives.
A directive always starts and end `%%` sign with directive text in between, like `%% {directive_text} %%`. A directive always starts and ends with `%%` signs with directive text in between, like `%% {directive_text} %%`.
Here the structure of a directive text is like a nested key-value pair map or a JSON object with root being _init_. Where all the general configurations are defined in the top level, and all the diagram specific configurations are defined one level deeper with diagram type as key/root for that section. Here the structure of a directive text is like a nested key-value pair map or a JSON object with root being _init_. Where all the general configurations are defined in the top level, and all the diagram specific configurations are defined one level deeper with diagram type as key/root for that section.
Following code snippet shows the structure of a directive: The following code snippet shows the structure of a directive:
``` ```
%%{ %%{
@ -59,7 +59,7 @@ Following code snippet shows the structure of a directive:
You can also define the directives in a single line, like this: You can also define the directives in a single line, like this:
``` ```
%%{init: { **insert argument here**}}%% %%{init: { **insert configuration options here** } }%%
``` ```
For example, the following code snippet: For example, the following code snippet:
@ -69,7 +69,7 @@ For example, the following code snippet:
``` ```
**Notes:** **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. The JSON object that is passed as {**argument**} must be valid key value pairs and encased in quotation marks or it will be ignored.
Valid Key Value pairs can be found in config. Valid Key Value pairs can be found in config.
Example with a simple graph: Example with a simple graph:
@ -82,7 +82,7 @@ A-->B
Here the directive declaration will set the `logLevel` to `debug` and the `theme` to `dark` for a rendered mermaid diagram, changing the appearance of the diagram itself. Here the directive declaration will set the `logLevel` to `debug` and the `theme` to `dark` for a rendered mermaid diagram, changing the appearance of the diagram itself.
Note: You can use 'init' or 'initialize' as both acceptable as init directives. Also note that `%%init%%` and `%%initialize%%` directives will be grouped together after they are parsed. This means: Note: You can use 'init' or 'initialize' as both are acceptable as init directives. Also note that `%%init%%` and `%%initialize%%` directives will be grouped together after they are parsed.
```mermaid ```mermaid
%%{init: { 'logLevel': 'debug', 'theme': 'forest' } }%% %%{init: { 'logLevel': 'debug', 'theme': 'forest' } }%%
@ -90,7 +90,7 @@ Note: You can use 'init' or 'initialize' as both acceptable as init directives.
... ...
``` ```
parsing the above generates a single `%%init%%` JSON object below, combining the two directives and carrying over the last value given for `loglevel`: For example, parsing the above generates a single `%%init%%` JSON object below, combining the two directives and carrying over the last value given for `loglevel`:
```json ```json
{ {
@ -104,16 +104,15 @@ This will then be sent to `mermaid.initialize(...)` for rendering.
## Directive Examples ## Directive Examples
More directive examples for diagram specific configuration overrides Now that the concept of directives has been explained, let us see some more examples of directive usage:
Now that the concept of directives has been explained, Let us see some more examples for directives usage:
### Changing Theme via directive ### Changing theme via directive
The following code snippet changes theme to forest: The following code snippet changes `theme` to `forest`:
`%%{init: { "theme": "forest" } }%%` `%%{init: { "theme": "forest" } }%%`
Possible themes value are: `default`,`base`, `dark`, `forest` and `neutral`. Possible theme values are: `default`,`base`, `dark`, `forest` and `neutral`.
Default Value is `default`. Default Value is `default`.
Example: Example:
@ -132,7 +131,7 @@ A --> C[End]
### Changing fontFamily via directive ### Changing fontFamily via directive
The following code snippet changes fontFamily to rebuchet MS, Verdana, Arial, Sans-Serif: The following code snippet changes fontFamily to Trebuchet MS, Verdana, Arial, Sans-Serif:
`%%{init: { "fontFamily": "Trebuchet MS, Verdana, Arial, Sans-Serif" } }%%` `%%{init: { "fontFamily": "Trebuchet MS, Verdana, Arial, Sans-Serif" } }%%`
@ -152,11 +151,11 @@ A --> C[End]
### Changing logLevel via directive ### Changing logLevel via directive
The following code snippet changes logLevel to 2: The following code snippet changes `logLevel` to `2`:
`%%{init: { "logLevel": 2 } }%%` `%%{init: { "logLevel": 2 } }%%`
Possible logLevel values are: Possible `logLevel` values are:
- `1` for _debug_, - `1` for _debug_,
- `2` for _info_ - `2` for _info_
@ -188,14 +187,14 @@ Some common flowchart configurations are:
- _diagramPadding_: number - _diagramPadding_: number
- _useMaxWidth_: number - _useMaxWidth_: number
For complete list of flowchart configurations, see [defaultConfig.ts](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/defaultConfig.ts) in the source code. For a complete list of flowchart configurations, see [defaultConfig.ts](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/defaultConfig.ts) in the source code.
_Soon we plan to publish a complete list all diagram specific configurations updated in the docs_ _Soon we plan to publish a complete list of all diagram-specific configurations updated in the docs._
The following code snippet changes flowchart config: The following code snippet changes flowchart config:
`%%{init: { "flowchart": { "htmlLabels": true, "curve": "linear" } } }%%` `%%{init: { "flowchart": { "htmlLabels": true, "curve": "linear" } } }%%`
Here were are overriding only the flowchart config, and not the general config, where HtmlLabels is set to true and curve is set to linear. Here we are overriding only the flowchart config, and not the general config, setting `htmlLabels` to `true` and `curve` to `linear`.
```mermaid-example ```mermaid-example
%%{init: { "flowchart": { "htmlLabels": true, "curve": "linear" } } }%% %%{init: { "flowchart": { "htmlLabels": true, "curve": "linear" } } }%%
@ -210,7 +209,7 @@ A --> C[End]
### Changing Sequence diagram config via directive ### Changing Sequence diagram config via directive
Some common sequence configurations are: Some common sequence diagram configurations are:
- _width_: number - _width_: number
- _height_: number - _height_: number
@ -221,8 +220,8 @@ Some common sequence configurations are:
- _showSequenceNumbers_: boolean - _showSequenceNumbers_: boolean
- _wrap_: boolean - _wrap_: boolean
For complete list of sequence diagram configurations, see _defaultConfig.ts_ in the source code. For a complete list of sequence diagram configurations, see [defaultConfig.ts](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/defaultConfig.ts) in the source code.
_Soon we plan to publish a complete list all diagram specific configurations updated in the docs_ _Soon we plan to publish a complete list of all diagram-specific configurations updated in the docs._
So, `wrap` by default has a value of `false` for sequence diagrams. So, `wrap` by default has a value of `false` for sequence diagrams.
@ -232,7 +231,7 @@ Let us see an example:
sequenceDiagram sequenceDiagram
Alice->Bob: Hello Bob, how are you? Alice->Bob: Hello Bob, how are you?
Bob->Alice: Fine, How did you mother like the book I suggested? And did you catch with the new book about alien invasion? Bob->Alice: Fine, how did you mother like the book I suggested? And did you catch the new book about alien invasion?
Alice->Bob: Good. Alice->Bob: Good.
Bob->Alice: Cool Bob->Alice: Cool
``` ```
@ -243,13 +242,13 @@ The following code snippet changes sequence diagram config for `wrap` to `true`:
`%%{init: { "sequence": { "wrap": true} } }%%` `%%{init: { "sequence": { "wrap": true} } }%%`
Using in the diagram above, the wrap will be enabled. By applying that snippet to the diagram above, `wrap` will be enabled:
```mermaid-example ```mermaid-example
%%{init: { "sequence": { "wrap": true, "width":300 } } }%% %%{init: { "sequence": { "wrap": true, "width":300 } } }%%
sequenceDiagram sequenceDiagram
Alice->Bob: Hello Bob, how are you? Alice->Bob: Hello Bob, how are you?
Bob->Alice: Fine, How did you mother like the book I suggested? And did you catch with the new book about alien invasion? Bob->Alice: Fine, how did you mother like the book I suggested? And did you catch the new book about alien invasion?
Alice->Bob: Good. Alice->Bob: Good.
Bob->Alice: Cool Bob->Alice: Cool
``` ```

2
packages/mermaid/src/docs/package.json
View File

@ -30,7 +30,7 @@
"unplugin-vue-components": "^0.24.1", "unplugin-vue-components": "^0.24.1",
"vite": "^4.3.3", "vite": "^4.3.3",
"vite-plugin-pwa": "^0.15.0", "vite-plugin-pwa": "^0.15.0",
"vitepress": "1.0.0-beta.1", "vitepress": "1.0.0-beta.2",
"workbox-window": "^6.5.4" "workbox-window": "^6.5.4"
} }
} }

12
packages/mermaid/src/docs/syntax/flowchart.md
View File

@ -25,6 +25,10 @@ flowchart LR
The id is what is displayed in the box. The id is what is displayed in the box.
``` ```
```tip
Instead of `flowchart` one can also use `graph`.
```
### A node with text ### A node with text
It is also possible to set text in the box that differs from the id. If this is done several times, it is the last text It is also possible to set text in the box that differs from the id. If this is done several times, it is the last text
@ -494,7 +498,11 @@ This feature is applicable to node labels, edge labels, and subgraph labels.
## Interaction ## Interaction
It is possible to bind a click event to a node, the click can lead to either a javascript callback or to a link which will be opened in a new browser tab. **Note**: This functionality is disabled when using `securityLevel='strict'` and enabled when using `securityLevel='loose'`. It is possible to bind a click event to a node, the click can lead to either a javascript callback or to a link which will be opened in a new browser tab.
```note
This functionality is disabled when using `securityLevel='strict'` and enabled when using `securityLevel='loose'`.
```
``` ```
click nodeId callback click nodeId callback
@ -737,7 +745,9 @@ 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. 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.
```
### Width ### Width

6
packages/mermaid/src/docs/syntax/quadrantChart.md
View File

@ -23,10 +23,6 @@ quadrantChart
## Syntax ## Syntax
```note
In place of `<text>` you can use text like `this is a sample text` or inside **double quotes** like `"This type of text may contain unicode like ❤"`.
```
```note ```note
If there is no points available in the chart both **axis** text and **quadrant** will be rendered in the center of the respective quadrant. If there is no points available in the chart both **axis** text and **quadrant** will be rendered in the center of the respective quadrant.
If there are points **x-axis** labels will rendered from left of the respective quadrant also they will be displayed in bottom of the chart, and **y-axis** lables will be rendered in bottom of the respective quadrant, the quadrant text will render at top of the respective quadrant. If there are points **x-axis** labels will rendered from left of the respective quadrant also they will be displayed in bottom of the chart, and **y-axis** lables will be rendered in bottom of the respective quadrant, the quadrant text will render at top of the respective quadrant.
@ -134,7 +130,7 @@ Points are used to plot a circle inside the quadrantChart. The syntax is `<text>
%%{init: {"quadrantChart": {"chartWidth": 400, "chartHeight": 400}, "themeVariables": {"quadrant1TextFill": "#ff0000"} }}%% %%{init: {"quadrantChart": {"chartWidth": 400, "chartHeight": 400}, "themeVariables": {"quadrant1TextFill": "#ff0000"} }}%%
quadrantChart quadrantChart
x-axis Urgent --> Not Urgent x-axis Urgent --> Not Urgent
y-axis Not Important --> important y-axis Not Important --> "Important ❤"
quadrant-1 Plan quadrant-1 Plan
quadrant-2 Do quadrant-2 Do
quadrant-3 Deligate quadrant-3 Deligate

2
packages/mermaid/src/logger.ts
View File

@ -2,7 +2,7 @@
/* eslint-disable @typescript-eslint/no-unused-vars */ /* eslint-disable @typescript-eslint/no-unused-vars */
/* eslint-disable @typescript-eslint/no-empty-function */ /* eslint-disable @typescript-eslint/no-empty-function */
/* eslint-disable no-console */ /* eslint-disable no-console */
import dayjs from 'dayjs/esm/index.js'; import dayjs from 'dayjs';
export type LogLevel = 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'fatal'; export type LogLevel = 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'fatal';

5
packages/mermaid/src/mermaidAPI.ts
View File

@ -263,7 +263,10 @@ export const cleanUpSvgCode = (
// Replace marker-end urls with just the # anchor (remove the preceding part of the URL) // Replace marker-end urls with just the # anchor (remove the preceding part of the URL)
if (!useArrowMarkerUrls && !inSandboxMode) { if (!useArrowMarkerUrls && !inSandboxMode) {
cleanedUpSvg = cleanedUpSvg.replace(/marker-end="url\(.*?#/g, 'marker-end="url(#'); cleanedUpSvg = cleanedUpSvg.replace(
/marker-end="url\([\d+./:=?A-Za-z-]*?#/g,
'marker-end="url(#'
);
} }
cleanedUpSvg = decodeEntities(cleanedUpSvg); cleanedUpSvg = decodeEntities(cleanedUpSvg);

246
pnpm-lock.yaml generated
View File

@ -429,60 +429,8 @@ importers:
specifier: ^0.15.0 specifier: ^0.15.0
version: 0.15.0(vite@4.3.3)(workbox-build@6.5.4)(workbox-window@6.5.4) version: 0.15.0(vite@4.3.3)(workbox-build@6.5.4)(workbox-window@6.5.4)
vitepress: vitepress:
specifier: 1.0.0-beta.1 specifier: 1.0.0-beta.2
version: 1.0.0-beta.1(@algolia/client-search@4.14.2)(@types/node@18.16.0) version: 1.0.0-beta.2(@algolia/client-search@4.14.2)(@types/node@18.16.0)(search-insights@2.6.0)
workbox-window:
specifier: ^6.5.4
version: 6.5.4
packages/mermaid/src/vitepress:
dependencies:
'@vueuse/core':
specifier: ^10.1.0
version: 10.1.0(vue@3.2.47)
jiti:
specifier: ^1.18.2
version: 1.18.2
vue:
specifier: ^3.2.47
version: 3.2.47
devDependencies:
'@iconify-json/carbon':
specifier: ^1.1.16
version: 1.1.16
'@unocss/reset':
specifier: ^0.52.0
version: 0.52.0
'@vite-pwa/vitepress':
specifier: ^0.0.5
version: 0.0.5(vite-plugin-pwa@0.15.0)
'@vitejs/plugin-vue':
specifier: ^4.2.1
version: 4.2.1(vite@4.3.3)(vue@3.2.47)
fast-glob:
specifier: ^3.2.12
version: 3.2.12
https-localhost:
specifier: ^4.7.1
version: 4.7.1
pathe:
specifier: ^1.1.0
version: 1.1.0
unocss:
specifier: ^0.52.0
version: 0.52.0(postcss@8.4.23)(rollup@2.79.1)(vite@4.3.3)
unplugin-vue-components:
specifier: ^0.24.1
version: 0.24.1(rollup@2.79.1)(vue@3.2.47)
vite:
specifier: ^4.3.3
version: 4.3.3(@types/node@18.16.0)
vite-plugin-pwa:
specifier: ^0.15.0
version: 0.15.0(vite@4.3.3)(workbox-build@6.5.4)(workbox-window@6.5.4)
vitepress:
specifier: 1.0.0-alpha.76
version: 1.0.0-alpha.76(@algolia/client-search@4.14.2)(@types/node@18.16.0)
workbox-window: workbox-window:
specifier: ^6.5.4 specifier: ^6.5.4
version: 6.5.4 version: 6.5.4
@ -514,6 +462,29 @@ packages:
'@algolia/autocomplete-shared': 1.8.2 '@algolia/autocomplete-shared': 1.8.2
dev: true dev: true
/@algolia/autocomplete-core@1.9.2(@algolia/client-search@4.14.2)(algoliasearch@4.14.2)(search-insights@2.6.0):
resolution: {integrity: sha512-hkG80c9kx9ClVAEcUJbTd2ziVC713x9Bji9Ty4XJfKXlxlsx3iXsoNhAwfeR4ulzIUg7OE5gez0UU1zVDdG7kg==}
dependencies:
'@algolia/autocomplete-plugin-algolia-insights': 1.9.2(@algolia/client-search@4.14.2)(algoliasearch@4.14.2)(search-insights@2.6.0)
'@algolia/autocomplete-shared': 1.9.2(@algolia/client-search@4.14.2)(algoliasearch@4.14.2)
transitivePeerDependencies:
- '@algolia/client-search'
- algoliasearch
- search-insights
dev: true
/@algolia/autocomplete-plugin-algolia-insights@1.9.2(@algolia/client-search@4.14.2)(algoliasearch@4.14.2)(search-insights@2.6.0):
resolution: {integrity: sha512-2LVsf4W66hVHQ3Ua/8k15oPlxjELCztbAkQm/hP42Sw+GLkHAdY1vaVRYziaWq64+Oljfg6FKkZHCdgXH+CGIA==}
peerDependencies:
search-insights: '>= 1 < 3'
dependencies:
'@algolia/autocomplete-shared': 1.9.2(@algolia/client-search@4.14.2)(algoliasearch@4.14.2)
search-insights: 2.6.0
transitivePeerDependencies:
- '@algolia/client-search'
- algoliasearch
dev: true
/@algolia/autocomplete-preset-algolia@1.8.2(@algolia/client-search@4.14.2)(algoliasearch@4.14.2): /@algolia/autocomplete-preset-algolia@1.8.2(@algolia/client-search@4.14.2)(algoliasearch@4.14.2):
resolution: {integrity: sha512-J0oTx4me6ZM9kIKPuL3lyU3aB8DEvpVvR6xWmHVROx5rOYJGQcZsdG4ozxwcOyiiu3qxMkIbzntnV1S1VWD8yA==} resolution: {integrity: sha512-J0oTx4me6ZM9kIKPuL3lyU3aB8DEvpVvR6xWmHVROx5rOYJGQcZsdG4ozxwcOyiiu3qxMkIbzntnV1S1VWD8yA==}
peerDependencies: peerDependencies:
@ -525,10 +496,31 @@ packages:
algoliasearch: 4.14.2 algoliasearch: 4.14.2
dev: true dev: true
/@algolia/autocomplete-preset-algolia@1.9.2(@algolia/client-search@4.14.2)(algoliasearch@4.14.2):
resolution: {integrity: sha512-pqgIm2GNqtCT59Y1ICctIPrYTi34+wNPiNWEclD/yDzp5uDUUsyGe5XrUjCNyQRTKonAlmYxoaEHOn8FWgmBHA==}
peerDependencies:
'@algolia/client-search': '>= 4.9.1 < 6'
algoliasearch: '>= 4.9.1 < 6'
dependencies:
'@algolia/autocomplete-shared': 1.9.2(@algolia/client-search@4.14.2)(algoliasearch@4.14.2)
'@algolia/client-search': 4.14.2
algoliasearch: 4.14.2
dev: true
/@algolia/autocomplete-shared@1.8.2: /@algolia/autocomplete-shared@1.8.2:
resolution: {integrity: sha512-b6Z/X4MczChMcfhk6kfRmBzPgjoPzuS9KGR4AFsiLulLNRAAqhP+xZTKtMnZGhLuc61I20d5WqlId02AZvcO6g==} resolution: {integrity: sha512-b6Z/X4MczChMcfhk6kfRmBzPgjoPzuS9KGR4AFsiLulLNRAAqhP+xZTKtMnZGhLuc61I20d5WqlId02AZvcO6g==}
dev: true dev: true
/@algolia/autocomplete-shared@1.9.2(@algolia/client-search@4.14.2)(algoliasearch@4.14.2):
resolution: {integrity: sha512-XxX6YDn+7LG+SmdpXEOnj7fc3TjiVpQ0CbGhjLwrd2tYr6LVY2D4Iiu/iuYJ4shvVDWWnpwArSk0uIWC/8OPUA==}
peerDependencies:
'@algolia/client-search': '>= 4.9.1 < 6'
algoliasearch: '>= 4.9.1 < 6'
dependencies:
'@algolia/client-search': 4.14.2
algoliasearch: 4.14.2
dev: true
/@algolia/cache-browser-local-storage@4.14.2: /@algolia/cache-browser-local-storage@4.14.2:
resolution: {integrity: sha512-FRweBkK/ywO+GKYfAWbrepewQsPTIEirhi1BdykX9mxvBPtGNKccYAxvGdDCumU1jL4r3cayio4psfzKMejBlA==} resolution: {integrity: sha512-FRweBkK/ywO+GKYfAWbrepewQsPTIEirhi1BdykX9mxvBPtGNKccYAxvGdDCumU1jL4r3cayio4psfzKMejBlA==}
dependencies: dependencies:
@ -2933,6 +2925,10 @@ packages:
resolution: {integrity: sha512-NaXVp3I8LdmJ54fn038KHgG7HmbIzZlKS2FkVf6mKcW5bYMJovkx4947joQyZk5yubxOZ+ddHSh79y39Aevufg==} resolution: {integrity: sha512-NaXVp3I8LdmJ54fn038KHgG7HmbIzZlKS2FkVf6mKcW5bYMJovkx4947joQyZk5yubxOZ+ddHSh79y39Aevufg==}
dev: true dev: true
/@docsearch/css@3.5.0:
resolution: {integrity: sha512-Ob5FQLubplcBNihAVtriR59FRBeP8u69F6mu4L4yIr60KfsPc10bOV0DoPErJw0zF9IBN2cNLW9qdmt8zWPxyg==}
dev: true
/@docsearch/js@3.3.5(@algolia/client-search@4.14.2): /@docsearch/js@3.3.5(@algolia/client-search@4.14.2):
resolution: {integrity: sha512-nZi074OCryZnzva2LNcbQkwBJIND6cvuFI4s1FIe6Ygf6n9g6B/IYUULXNx05rpoCZ+KEoEt3taROpsHBliuSw==} resolution: {integrity: sha512-nZi074OCryZnzva2LNcbQkwBJIND6cvuFI4s1FIe6Ygf6n9g6B/IYUULXNx05rpoCZ+KEoEt3taROpsHBliuSw==}
dependencies: dependencies:
@ -2945,6 +2941,19 @@ packages:
- react-dom - react-dom
dev: true dev: true
/@docsearch/js@3.5.0(@algolia/client-search@4.14.2)(search-insights@2.6.0):
resolution: {integrity: sha512-WqB+z+zVKSXDkGq028nClT9RvMzfFlemZuIulX5ZwWkdUtl4k7M9cmZA/c6kuZf7FG24XQsMHWuBjeUo9hLRyA==}
dependencies:
'@docsearch/react': 3.5.0(@algolia/client-search@4.14.2)(search-insights@2.6.0)
preact: 10.11.0
transitivePeerDependencies:
- '@algolia/client-search'
- '@types/react'
- react
- react-dom
- search-insights
dev: true
/@docsearch/react@3.3.5(@algolia/client-search@4.14.2): /@docsearch/react@3.3.5(@algolia/client-search@4.14.2):
resolution: {integrity: sha512-Zuxf4z5PZ9eIQkVCNu76v1H+KAztKItNn3rLzZa7kpBS+++TgNARITnZeUS7C1DKoAhJZFr6T/H+Lvc6h/iiYg==} resolution: {integrity: sha512-Zuxf4z5PZ9eIQkVCNu76v1H+KAztKItNn3rLzZa7kpBS+++TgNARITnZeUS7C1DKoAhJZFr6T/H+Lvc6h/iiYg==}
peerDependencies: peerDependencies:
@ -2967,6 +2976,29 @@ packages:
- '@algolia/client-search' - '@algolia/client-search'
dev: true dev: true
/@docsearch/react@3.5.0(@algolia/client-search@4.14.2)(search-insights@2.6.0):
resolution: {integrity: sha512-3IG8mmSMzSHNGy2S1VuPyYU9tFCxFpj5Ov8SYwsSHM4yMvFsaO9oFxXocA5lSenliIELhuOuS5+BdxHa/Qlf2A==}
peerDependencies:
'@types/react': '>= 16.8.0 < 19.0.0'
react: '>= 16.8.0 < 19.0.0'
react-dom: '>= 16.8.0 < 19.0.0'
peerDependenciesMeta:
'@types/react':
optional: true
react:
optional: true
react-dom:
optional: true
dependencies:
'@algolia/autocomplete-core': 1.9.2(@algolia/client-search@4.14.2)(algoliasearch@4.14.2)(search-insights@2.6.0)
'@algolia/autocomplete-preset-algolia': 1.9.2(@algolia/client-search@4.14.2)(algoliasearch@4.14.2)
'@docsearch/css': 3.5.0
algoliasearch: 4.14.2
transitivePeerDependencies:
- '@algolia/client-search'
- search-insights
dev: true
/@es-joy/jsdoccomment@0.37.1: /@es-joy/jsdoccomment@0.37.1:
resolution: {integrity: sha512-5vxWJ1gEkEF0yRd0O+uK6dHJf7adrxwQSX8PuRiPfFSAbNLnY0ZJfXaZucoz14Jj2N11xn2DnlEPwWRpYpvRjg==} resolution: {integrity: sha512-5vxWJ1gEkEF0yRd0O+uK6dHJf7adrxwQSX8PuRiPfFSAbNLnY0ZJfXaZucoz14Jj2N11xn2DnlEPwWRpYpvRjg==}
engines: {node: ^14 || ^16 || ^17 || ^18 || ^19 || ^20} engines: {node: ^14 || ^16 || ^17 || ^18 || ^19 || ^20}
@ -4716,6 +4748,17 @@ packages:
vue: 3.3.4 vue: 3.3.4
dev: true dev: true
/@vitejs/plugin-vue@4.2.3(vite@4.3.9)(vue@3.3.4):
resolution: {integrity: sha512-R6JDUfiZbJA9cMiguQ7jxALsgiprjBeHL5ikpXfJCH62pPHtI+JdJ5xWj6Ev73yXSlYl86+blXn1kZHQ7uElxw==}
engines: {node: ^14.18.0 || >=16.0.0}
peerDependencies:
vite: ^4.0.0
vue: ^3.2.25
dependencies:
vite: 4.3.9(@types/node@18.16.0)
vue: 3.3.4
dev: true
/@vitest/coverage-c8@0.31.0(vitest@0.31.0): /@vitest/coverage-c8@0.31.0(vitest@0.31.0):
resolution: {integrity: sha512-h72qN1D962AO7UefQVulm9JFP5ACS7OfhCdBHioXU8f7ohH/+NTZCgAqmgcfRNHHO/8wLFxx+93YVxhodkEJVA==} resolution: {integrity: sha512-h72qN1D962AO7UefQVulm9JFP5ACS7OfhCdBHioXU8f7ohH/+NTZCgAqmgcfRNHHO/8wLFxx+93YVxhodkEJVA==}
peerDependencies: peerDependencies:
@ -12930,6 +12973,11 @@ packages:
ajv-keywords: 5.1.0(ajv@8.11.0) ajv-keywords: 5.1.0(ajv@8.11.0)
dev: true dev: true
/search-insights@2.6.0:
resolution: {integrity: sha512-vU2/fJ+h/Mkm/DJOe+EaM5cafJv/1rRTZpGJTuFPf/Q5LjzgMDsqPdSaZsAe+GAWHHsfsu+rQSAn6c8IGtBEVw==}
engines: {node: '>=8.16.0'}
dev: true
/secure-json-parse@2.7.0: /secure-json-parse@2.7.0:
resolution: {integrity: sha512-6aU+Rwsezw7VR8/nyvKTx8QpWH9FrcYiXXlqC4z5d5XQBDRqtbfsRjnwGyqbi3gddNtWHuEk9OANUotL26qKUw==} resolution: {integrity: sha512-6aU+Rwsezw7VR8/nyvKTx8QpWH9FrcYiXXlqC4z5d5XQBDRqtbfsRjnwGyqbi3gddNtWHuEk9OANUotL26qKUw==}
dev: true dev: true
@ -14484,7 +14532,7 @@ packages:
mlly: 1.2.0 mlly: 1.2.0
pathe: 1.1.0 pathe: 1.1.0
picocolors: 1.0.0 picocolors: 1.0.0
vite: 4.3.8(@types/node@18.16.0) vite: 4.3.9(@types/node@18.16.0)
transitivePeerDependencies: transitivePeerDependencies:
- '@types/node' - '@types/node'
- less - less
@ -14611,6 +14659,39 @@ packages:
fsevents: 2.3.2 fsevents: 2.3.2
dev: true dev: true
/vite@4.3.9(@types/node@18.16.0):
resolution: {integrity: sha512-qsTNZjO9NoJNW7KnOrgYwczm0WctJ8m/yqYAMAK9Lxt4SoySUfS5S8ia9K7JHpa3KEeMfyF8LoJ3c5NeBJy6pg==}
engines: {node: ^14.18.0 || >=16.0.0}
hasBin: true
peerDependencies:
'@types/node': '>= 14'
less: '*'
sass: '*'
stylus: '*'
sugarss: '*'
terser: ^5.4.0
peerDependenciesMeta:
'@types/node':
optional: true
less:
optional: true
sass:
optional: true
stylus:
optional: true
sugarss:
optional: true
terser:
optional: true
dependencies:
'@types/node': 18.16.0
esbuild: 0.17.18
postcss: 8.4.23
rollup: 3.21.0
optionalDependencies:
fsevents: 2.3.2
dev: true
/vitepress-plugin-search@1.0.4-alpha.20(flexsearch@0.7.31)(vitepress@1.0.0-alpha.72)(vue@3.3.4): /vitepress-plugin-search@1.0.4-alpha.20(flexsearch@0.7.31)(vitepress@1.0.0-alpha.72)(vue@3.3.4):
resolution: {integrity: sha512-zG+ev9pw1Mg7htABlFCNXb8XwnKN+qfTKw+vU0Ers6RIrABx+45EAAFBoaL1mEpl1FRFn1o/dQ7F4b8GP6HdGQ==} resolution: {integrity: sha512-zG+ev9pw1Mg7htABlFCNXb8XwnKN+qfTKw+vU0Ers6RIrABx+45EAAFBoaL1mEpl1FRFn1o/dQ7F4b8GP6HdGQ==}
engines: {node: ^14.13.1 || ^16.7.0 || >=18} engines: {node: ^14.13.1 || ^16.7.0 || >=18}
@ -14657,13 +14738,13 @@ packages:
- terser - terser
dev: true dev: true
/vitepress@1.0.0-alpha.76(@algolia/client-search@4.14.2)(@types/node@18.16.0): /vitepress@1.0.0-beta.2(@algolia/client-search@4.14.2)(@types/node@18.16.0)(search-insights@2.6.0):
resolution: {integrity: sha512-fzR1pDpGnSMeCJ+AnDdMe/ETD2G0Go+g6mTxDv9ps7Hmr1JjVqw97nasCyZg3jgfQxi2nt78EJ/bw7hY5n/rlw==} resolution: {integrity: sha512-DBXYjtYbm3W1IPPJ2TiCaK/XK+o/2XmL2+jslOGKm+txcbmG0kbeB+vadC5tCUZA9NdA+9Ywj3M4548c7t/SDg==}
hasBin: true hasBin: true
dependencies: dependencies:
'@docsearch/css': 3.3.5 '@docsearch/css': 3.5.0
'@docsearch/js': 3.3.5(@algolia/client-search@4.14.2) '@docsearch/js': 3.5.0(@algolia/client-search@4.14.2)(search-insights@2.6.0)
'@vitejs/plugin-vue': 4.2.3(vite@4.3.8)(vue@3.3.4) '@vitejs/plugin-vue': 4.2.3(vite@4.3.9)(vue@3.3.4)
'@vue/devtools-api': 6.5.0 '@vue/devtools-api': 6.5.0
'@vueuse/core': 10.1.2(vue@3.3.4) '@vueuse/core': 10.1.2(vue@3.3.4)
'@vueuse/integrations': 10.1.2(focus-trap@7.4.3)(vue@3.3.4) '@vueuse/integrations': 10.1.2(focus-trap@7.4.3)(vue@3.3.4)
@ -14672,49 +14753,7 @@ packages:
mark.js: 8.11.1 mark.js: 8.11.1
minisearch: 6.1.0 minisearch: 6.1.0
shiki: 0.14.2 shiki: 0.14.2
vite: 4.3.8(@types/node@18.16.0) vite: 4.3.9(@types/node@18.16.0)
vue: 3.3.4
transitivePeerDependencies:
- '@algolia/client-search'
- '@types/node'
- '@types/react'
- '@vue/composition-api'
- async-validator
- axios
- change-case
- drauu
- fuse.js
- idb-keyval
- jwt-decode
- less
- nprogress
- qrcode
- react
- react-dom
- sass
- sortablejs
- stylus
- sugarss
- terser
- universal-cookie
dev: true
/vitepress@1.0.0-beta.1(@algolia/client-search@4.14.2)(@types/node@18.16.0):
resolution: {integrity: sha512-V2yyCwQ+v9fh7rbnGDLp8M7vHa9sLElexXf/JHtBOsOwv7ed9wt1QI4WUagYgKR3TeoJT9v2s6f0UaQSne0EvQ==}
hasBin: true
dependencies:
'@docsearch/css': 3.3.5
'@docsearch/js': 3.3.5(@algolia/client-search@4.14.2)
'@vitejs/plugin-vue': 4.2.3(vite@4.3.8)(vue@3.3.4)
'@vue/devtools-api': 6.5.0
'@vueuse/core': 10.1.2(vue@3.3.4)
'@vueuse/integrations': 10.1.2(focus-trap@7.4.3)(vue@3.3.4)
body-scroll-lock: 4.0.0-beta.0
focus-trap: 7.4.3
mark.js: 8.11.1
minisearch: 6.1.0
shiki: 0.14.2
vite: 4.3.8(@types/node@18.16.0)
vue: 3.3.4 vue: 3.3.4
transitivePeerDependencies: transitivePeerDependencies:
- '@algolia/client-search' - '@algolia/client-search'
@ -14734,6 +14773,7 @@ packages:
- react - react
- react-dom - react-dom
- sass - sass
- search-insights
- sortablejs - sortablejs
- stylus - stylus
- sugarss - sugarss