Merge branch 'develop' into sidv/splitUnicode

* 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

View File

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

View File

@ -1,4 +1,4 @@
import { urlSnapshotTest } from '../../helpers/util.js';
import { urlSnapshotTest, openURLAndVerifyRendering } from '../../helpers/util.js';
describe('CSS injections', () => {
it('should not allow CSS injections outside of the diagram', () => {
@ -13,4 +13,11 @@ describe('CSS injections', () => {
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 },
});
});
});

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>

File diff suppressed because it is too large Load Diff

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.
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.

View File

@ -8,11 +8,11 @@
## 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
@ -27,22 +27,22 @@ Mermaid basically supports two types of configuration options to be overridden b
- startOnLoad
- 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.
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.
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 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**
> 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
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.
Following code snippet shows the structure of a directive:
The following code snippet shows the structure of a directive:
%%{
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:
%%{init: { **insert argument here**}}%%
%%{init: { **insert configuration options here** } }%%
For example, the following code snippet:
%%{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.
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.
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.
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
%%{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
{
@ -115,16 +115,15 @@ This will then be sent to `mermaid.initialize(...)` for rendering.
## 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 for directives usage:
Now that the concept of directives has been explained, let us see some more examples of directive 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" } }%%`
Possible themes value are: `default`,`base`, `dark`, `forest` and `neutral`.
Possible theme values are: `default`,`base`, `dark`, `forest` and `neutral`.
Default Value is `default`.
Example:
@ -155,7 +154,7 @@ A --> C[End]
### 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" } }%%`
@ -187,11 +186,11 @@ A --> C[End]
### Changing logLevel via directive
The following code snippet changes logLevel to 2:
The following code snippet changes `logLevel` to `2`:
`%%{init: { "logLevel": 2 } }%%`
Possible logLevel values are:
Possible `logLevel` values are:
- `1` for _debug_,
- `2` for _info_
@ -234,14 +233,14 @@ Some common flowchart configurations are:
- _diagramPadding_: 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.
_Soon we plan to publish a complete list all diagram specific configurations updated in the docs_
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 of all diagram-specific configurations updated in the docs._
The following code snippet changes flowchart config:
`%%{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
%%{init: { "flowchart": { "htmlLabels": true, "curve": "linear" } } }%%
@ -267,7 +266,7 @@ A --> C[End]
### Changing Sequence diagram config via directive
Some common sequence configurations are:
Some common sequence diagram configurations are:
- _width_: number
- _height_: number
@ -278,8 +277,8 @@ Some common sequence configurations are:
- _showSequenceNumbers_: boolean
- _wrap_: boolean
For complete list of sequence diagram configurations, see _defaultConfig.ts_ in the source code.
_Soon we plan to publish a complete list all diagram specific configurations updated in the docs_
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 of all diagram-specific configurations updated in the docs._
So, `wrap` by default has a value of `false` for sequence diagrams.
@ -289,7 +288,7 @@ Let us see an example:
sequenceDiagram
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.
Bob->Alice: Cool
```
@ -298,7 +297,7 @@ Bob->Alice: Cool
sequenceDiagram
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.
Bob->Alice: Cool
```
@ -309,13 +308,13 @@ The following code snippet changes sequence diagram config for `wrap` to `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
%%{init: { "sequence": { "wrap": true, "width":300 } } }%%
sequenceDiagram
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.
Bob->Alice: Cool
```
@ -324,7 +323,7 @@ Bob->Alice: Cool
%%{init: { "sequence": { "wrap": true, "width":300 } } }%%
sequenceDiagram
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.
Bob->Alice: Cool
```

View File

@ -96,7 +96,7 @@ mermaid.initialize(config);
#### 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
@ -127,7 +127,7 @@ Return the last node appended
#### 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
[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
[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)

View File

@ -32,6 +32,9 @@ flowchart LR
> **Note**
> The id is what is displayed in the box.
> **💡 Tip**
> Instead of `flowchart` one can also use `graph`.
### 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
@ -785,7 +788,10 @@ This feature is applicable to node labels, edge labels, and subgraph labels.
## 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 call callback()
@ -1077,7 +1083,8 @@ You can change the renderer to elk by adding this directive:
%%{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

View File

@ -46,9 +46,6 @@ quadrantChart
## 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**
> 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.
@ -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"} }}%%
quadrantChart
x-axis Urgent --> Not Urgent
y-axis Not Important --> important
y-axis Not Important --> "Important ❤"
quadrant-1 Plan
quadrant-2 Do
quadrant-3 Deligate
@ -163,7 +160,7 @@ quadrantChart
%%{init: {"quadrantChart": {"chartWidth": 400, "chartHeight": 400}, "themeVariables": {"quadrant1TextFill": "#ff0000"} }}%%
quadrantChart
x-axis Urgent --> Not Urgent
y-axis Not Important --> important
y-axis Not Important --> "Important ❤"
quadrant-1 Plan
quadrant-2 Do
quadrant-3 Deligate

View File

@ -1,7 +1,7 @@
{
"name": "mermaid-monorepo",
"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.",
"type": "module",
"packageManager": "pnpm@8.5.1",

View File

@ -1,6 +1,6 @@
{
"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.",
"type": "module",
"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: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: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:serve": "pnpm docs:build:vitepress && vitepress serve src/vitepress",
"docs:spellcheck": "cspell --config ../../cSpell.json \"src/docs/**/*.md\"",

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

File diff suppressed because it is too large Load Diff

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.
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.

View File

@ -2,11 +2,11 @@
## 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
@ -21,23 +21,23 @@ Mermaid basically supports two types of configuration options to be overridden b
- startOnLoad
- 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.
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.
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 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
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
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.
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:
```
%%{init: { **insert argument here**}}%%
%%{init: { **insert configuration options here** } }%%
```
For example, the following code snippet:
@ -69,7 +69,7 @@ For example, the following code snippet:
```
**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.
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.
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
%%{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
{
@ -104,16 +104,15 @@ This will then be sent to `mermaid.initialize(...)` for rendering.
## 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 for directives usage:
Now that the concept of directives has been explained, let us see some more examples of directive 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" } }%%`
Possible themes value are: `default`,`base`, `dark`, `forest` and `neutral`.
Possible theme values are: `default`,`base`, `dark`, `forest` and `neutral`.
Default Value is `default`.
Example:
@ -132,7 +131,7 @@ A --> C[End]
### 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" } }%%`
@ -152,11 +151,11 @@ A --> C[End]
### Changing logLevel via directive
The following code snippet changes logLevel to 2:
The following code snippet changes `logLevel` to `2`:
`%%{init: { "logLevel": 2 } }%%`
Possible logLevel values are:
Possible `logLevel` values are:
- `1` for _debug_,
- `2` for _info_
@ -188,14 +187,14 @@ Some common flowchart configurations are:
- _diagramPadding_: 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.
_Soon we plan to publish a complete list all diagram specific configurations updated in the docs_
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 of all diagram-specific configurations updated in the docs._
The following code snippet changes flowchart config:
`%%{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
%%{init: { "flowchart": { "htmlLabels": true, "curve": "linear" } } }%%
@ -210,7 +209,7 @@ A --> C[End]
### Changing Sequence diagram config via directive
Some common sequence configurations are:
Some common sequence diagram configurations are:
- _width_: number
- _height_: number
@ -221,8 +220,8 @@ Some common sequence configurations are:
- _showSequenceNumbers_: boolean
- _wrap_: boolean
For complete list of sequence diagram configurations, see _defaultConfig.ts_ in the source code.
_Soon we plan to publish a complete list all diagram specific configurations updated in the docs_
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 of all diagram-specific configurations updated in the docs._
So, `wrap` by default has a value of `false` for sequence diagrams.
@ -232,7 +231,7 @@ Let us see an example:
sequenceDiagram
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.
Bob->Alice: Cool
```
@ -243,13 +242,13 @@ The following code snippet changes sequence diagram config for `wrap` to `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
%%{init: { "sequence": { "wrap": true, "width":300 } } }%%
sequenceDiagram
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.
Bob->Alice: Cool
```

View File

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

View File

@ -25,6 +25,10 @@ flowchart LR
The id is what is displayed in the box.
```
```tip
Instead of `flowchart` one can also use `graph`.
```
### 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
@ -494,7 +498,11 @@ This feature is applicable to node labels, edge labels, and subgraph labels.
## 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
@ -737,7 +745,9 @@ You can change the renderer to elk by adding this directive:
%%{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.
```
### Width

View File

@ -23,10 +23,6 @@ quadrantChart
## 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
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.
@ -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"} }}%%
quadrantChart
x-axis Urgent --> Not Urgent
y-axis Not Important --> important
y-axis Not Important --> "Important ❤"
quadrant-1 Plan
quadrant-2 Do
quadrant-3 Deligate

View File

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

View File

@ -263,7 +263,10 @@ export const cleanUpSvgCode = (
// Replace marker-end urls with just the # anchor (remove the preceding part of the URL)
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);

246
pnpm-lock.yaml generated
View File

@ -429,60 +429,8 @@ importers:
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-beta.1
version: 1.0.0-beta.1(@algolia/client-search@4.14.2)(@types/node@18.16.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)
specifier: 1.0.0-beta.2
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
@ -514,6 +462,29 @@ packages:
'@algolia/autocomplete-shared': 1.8.2
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):
resolution: {integrity: sha512-J0oTx4me6ZM9kIKPuL3lyU3aB8DEvpVvR6xWmHVROx5rOYJGQcZsdG4ozxwcOyiiu3qxMkIbzntnV1S1VWD8yA==}
peerDependencies:
@ -525,10 +496,31 @@ packages:
algoliasearch: 4.14.2
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:
resolution: {integrity: sha512-b6Z/X4MczChMcfhk6kfRmBzPgjoPzuS9KGR4AFsiLulLNRAAqhP+xZTKtMnZGhLuc61I20d5WqlId02AZvcO6g==}
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:
resolution: {integrity: sha512-FRweBkK/ywO+GKYfAWbrepewQsPTIEirhi1BdykX9mxvBPtGNKccYAxvGdDCumU1jL4r3cayio4psfzKMejBlA==}
dependencies:
@ -2933,6 +2925,10 @@ packages:
resolution: {integrity: sha512-NaXVp3I8LdmJ54fn038KHgG7HmbIzZlKS2FkVf6mKcW5bYMJovkx4947joQyZk5yubxOZ+ddHSh79y39Aevufg==}
dev: true
/@docsearch/css@3.5.0:
resolution: {integrity: sha512-Ob5FQLubplcBNihAVtriR59FRBeP8u69F6mu4L4yIr60KfsPc10bOV0DoPErJw0zF9IBN2cNLW9qdmt8zWPxyg==}
dev: true
/@docsearch/js@3.3.5(@algolia/client-search@4.14.2):
resolution: {integrity: sha512-nZi074OCryZnzva2LNcbQkwBJIND6cvuFI4s1FIe6Ygf6n9g6B/IYUULXNx05rpoCZ+KEoEt3taROpsHBliuSw==}
dependencies:
@ -2945,6 +2941,19 @@ packages:
- react-dom
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):
resolution: {integrity: sha512-Zuxf4z5PZ9eIQkVCNu76v1H+KAztKItNn3rLzZa7kpBS+++TgNARITnZeUS7C1DKoAhJZFr6T/H+Lvc6h/iiYg==}
peerDependencies:
@ -2967,6 +2976,29 @@ packages:
- '@algolia/client-search'
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:
resolution: {integrity: sha512-5vxWJ1gEkEF0yRd0O+uK6dHJf7adrxwQSX8PuRiPfFSAbNLnY0ZJfXaZucoz14Jj2N11xn2DnlEPwWRpYpvRjg==}
engines: {node: ^14 || ^16 || ^17 || ^18 || ^19 || ^20}
@ -4716,6 +4748,17 @@ packages:
vue: 3.3.4
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):
resolution: {integrity: sha512-h72qN1D962AO7UefQVulm9JFP5ACS7OfhCdBHioXU8f7ohH/+NTZCgAqmgcfRNHHO/8wLFxx+93YVxhodkEJVA==}
peerDependencies:
@ -12930,6 +12973,11 @@ packages:
ajv-keywords: 5.1.0(ajv@8.11.0)
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:
resolution: {integrity: sha512-6aU+Rwsezw7VR8/nyvKTx8QpWH9FrcYiXXlqC4z5d5XQBDRqtbfsRjnwGyqbi3gddNtWHuEk9OANUotL26qKUw==}
dev: true
@ -14484,7 +14532,7 @@ packages:
mlly: 1.2.0
pathe: 1.1.0
picocolors: 1.0.0
vite: 4.3.8(@types/node@18.16.0)
vite: 4.3.9(@types/node@18.16.0)
transitivePeerDependencies:
- '@types/node'
- less
@ -14611,6 +14659,39 @@ packages:
fsevents: 2.3.2
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):
resolution: {integrity: sha512-zG+ev9pw1Mg7htABlFCNXb8XwnKN+qfTKw+vU0Ers6RIrABx+45EAAFBoaL1mEpl1FRFn1o/dQ7F4b8GP6HdGQ==}
engines: {node: ^14.13.1 || ^16.7.0 || >=18}
@ -14657,13 +14738,13 @@ packages:
- terser
dev: true
/vitepress@1.0.0-alpha.76(@algolia/client-search@4.14.2)(@types/node@18.16.0):
resolution: {integrity: sha512-fzR1pDpGnSMeCJ+AnDdMe/ETD2G0Go+g6mTxDv9ps7Hmr1JjVqw97nasCyZg3jgfQxi2nt78EJ/bw7hY5n/rlw==}
/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-DBXYjtYbm3W1IPPJ2TiCaK/XK+o/2XmL2+jslOGKm+txcbmG0kbeB+vadC5tCUZA9NdA+9Ywj3M4548c7t/SDg==}
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)
'@docsearch/css': 3.5.0
'@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.9)(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)
@ -14672,49 +14753,7 @@ packages:
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
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)
vite: 4.3.9(@types/node@18.16.0)
vue: 3.3.4
transitivePeerDependencies:
- '@algolia/client-search'
@ -14734,6 +14773,7 @@ packages:
- react
- react-dom
- sass
- search-insights
- sortablejs
- stylus
- sugarss