Merge branch 'develop' into docs/formatting

This commit is contained in:
steph 2022-12-21 14:43:56 -08:00
commit dbfb29de27
70 changed files with 1533 additions and 507 deletions

View File

@ -14,4 +14,5 @@ Make sure you
- [ ] :book: have read the [contribution guidelines](https://github.com/mermaid-js/mermaid/blob/develop/CONTRIBUTING.md)
- [ ] :computer: have added unit/e2e tests (if appropriate)
- [ ] :notebook: have added documentation (if appropriate)
- [ ] :bookmark: targeted `develop` branch

View File

@ -7,6 +7,7 @@ on:
- opened
- synchronize
- ready_for_review
workflow_dispatch:
permissions:
contents: write

View File

@ -146,7 +146,7 @@ const main = async () => {
};
if (watch) {
build(getBuildConfig({ minify: false, watch, core: true, entryName: 'mermaid' }));
build(getBuildConfig({ minify: false, watch, core: false, entryName: 'mermaid' }));
if (!mermaidOnly) {
build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-mindmap' }));
// build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-example-diagram' }));

View File

@ -10,7 +10,7 @@ English | [简体中文](./README.zh-CN.md)
**Thanks to all involved, people committing pull requests, people answering questions! 🙏**
<a href="https://mermaid-js.github.io/mermaid/landing/"><img src="https://github.com/mermaid-js/mermaid/blob/master/docs/img/book-banner-post-release.jpg" alt="Explore Mermaid.js in depth, with real-world examples, tips & tricks from the creator... The first official book on Mermaid is available for purchase. Check it out!"></a>
<a href="https://mermaid-js.github.io/mermaid/landing/"><img src="https://github.com/mermaid-js/mermaid/blob/master/docs/intro/img/book-banner-post-release.jpg" alt="Explore Mermaid.js in depth, with real-world examples, tips & tricks from the creator... The first official book on Mermaid is available for purchase. Check it out!"></a>
## About

View File

@ -10,7 +10,7 @@
**感谢所有参与进来提交 PR解答疑问的人们! 🙏**
<a href="https://mermaid-js.github.io/mermaid/landing/"><img src="https://github.com/mermaid-js/mermaid/blob/master/docs/img/book-banner-pre-release.jpg" alt="Explore Mermaid.js in depth, with real-world examples, tips & tricks from the creator... The first official book on Mermaid is available for purchase. Check it out!"></a>
<a href="https://mermaid-js.github.io/mermaid/landing/"><img src="https://github.com/mermaid-js/mermaid/blob/master/docs/intro/img/book-banner-post-release.jpg" alt="Explore Mermaid.js in depth, with real-world examples, tips & tricks from the creator... The first official book on Mermaid is available for purchase. Check it out!"></a>
## 关于 Mermaid

View File

@ -14,6 +14,7 @@
"bilkent",
"bisheng",
"braintree",
"brkt",
"brolin",
"brotli",
"classdef",
@ -60,12 +61,14 @@
"mindmaps",
"mitigations",
"mkdocs",
"mult",
"orlandoni",
"phpbb",
"plantuml",
"playfair",
"pnpm",
"podlite",
"quence",
"ranksep",
"rect",
"rects",
@ -81,6 +84,8 @@
"substate",
"sveidqvist",
"techn",
"teststr",
"textlength",
"treemap",
"ts-nocheck",
"tuleap",

View File

@ -1,13 +1,10 @@
import { urlSnapshotTest } from '../../helpers/util';
describe('mermaid', () => {
describe('registerDiagram', () => {
it('should work on @mermaid-js/mermaid-mindmap and mermaid-example-diagram', () => {
const url = 'http://localhost:9000/external-diagrams-mindmap.html';
cy.visit(url);
cy.get('svg', {
// may be a bit slower than normal, since vite might need to re-compile mermaid/mermaid-mindmap/mermaid-example-diagram
timeout: 10000,
}).matchImageSnapshot();
urlSnapshotTest(url, {}, false, false);
});
});
});

View File

@ -7,4 +7,10 @@ describe('CSS injections', () => {
flowchart: { htmlLabels: false },
});
});
it('should not allow adding styletags affecting the page', () => {
urlSnapshotTest('http://localhost:9000/ghsa3.html', {
logLevel: 1,
flowchart: { htmlLabels: false },
});
});
});

View File

@ -485,8 +485,7 @@ describe('Class diagram V2', () => {
classDiagram-v2
note "I love this diagram!\nDo you love it?"
class Class10 {
<<service>>
int id
int id
size()
}
note for Class10 "Cool class\nI said it's very cool class!"

View File

@ -414,7 +414,6 @@ describe('Class diagram', () => {
classDiagram
note "I love this diagram!\nDo you love it?"
class Class10 {
<<service>>
int id
size()
}

View File

@ -1,6 +1,6 @@
import { imgSnapshotTest } from '../../helpers/util';
describe('State diagram', () => {
describe('Current diagram', () => {
it('should render a state with states in it', () => {
imgSnapshotTest(
`

View File

@ -182,6 +182,20 @@ describe('Entity Relationship Diagram', () => {
cy.get('svg');
});
it('should render entities with length in attributes type', () => {
renderGraph(
`
erDiagram
CLUSTER {
varchar(99) name
string(255) description
}
`,
{ logLevel: 1 }
);
cy.get('svg');
});
it('should render entities and attributes with big and small entity names', () => {
renderGraph(
`

View File

@ -4,7 +4,7 @@
</script>
<body>
<div id="target">
<h1>This element does not belong to the SVG but we can style it</h1>
<h1>Background should be yellow!!!</h1>
</div>
<svg id="diagram"></svg>

100
cypress/platform/ghsa3.html Normal file
View File

@ -0,0 +1,100 @@
<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>
<h1>PAGE SHOULD NOT BE RED</h1>
<div class="flex">
<div id="diagram" class="mermaid"></div>
<div id="res" class=""></div>
</div>
<script src="./mermaid.js"></script>
<script>
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
};
mermaid.initialize({
theme: 'forest',
arrowMarkerAbsolute: true,
// themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
logLevel: 0,
state: {
defaultRenderer: 'dagre-wrapper',
},
flowchart: {
// defaultRenderer: 'dagre-wrapper',
nodeSpacing: 10,
curve: 'cardinal',
htmlLabels: true,
},
htmlLabels: true,
// gantt: { axisFormat: '%m/%d/%Y' },
sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false },
// sequenceDiagram: { actorMargin: 300 } // deprecated
// fontFamily: '"times", sans-serif',
// fontFamily: 'courier',
fontSize: 18,
curve: 'basis',
// securityLevel: 'strict',
startOnLoad: false,
secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize'],
// themeVariables: {relationLabelColor: 'red'}
});
function callback() {
alert('It worked');
}
let diagram = '%%{init: {"flowchart": {"htmlLabels": "true"}} }%%\n';
diagram += 'flowchart\n';
diagram += 'A["<p><sty';
diagram += 'le> * { background : red}</style>test</p>"]';
console.log(diagram);
// document.querySelector('#diagram').innerHTML = diagram;
mermaid.render('diagram', diagram, (res) => {
document.querySelector('#res').innerHTML = res;
});
</script>
</body>
</html>

View File

@ -6,6 +6,10 @@
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<link
href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
rel="stylesheet"
@ -14,7 +18,7 @@
body {
/* background: rgb(221, 208, 208); */
/* background:#333; */
font-family: 'Courier New', Courier, monospace;
font-family: 'Arial';
/* font-size: 18px !important; */
}
h1 {
@ -23,235 +27,77 @@
.mermaid2 {
display: none;
}
.mermaid {
border: 1px solid red;
font-family: 'Courier New', Courier, monospace;
.mermaid svg {
/* font-size: 18px !important; */
background-color: #eee;
background-image: radial-gradient(#fff 1%, transparent 11%),
radial-gradient(#fff 1%, transparent 11%);
background-size: 20px 20px;
background-position: 0 0, 10px 10px;
background-repeat: repeat;
}
.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>info below</div>
<div class="">
<pre class="mermaid2" style="width: 100%; height: 400px">
flowchart TB;subgraph "number as labels";1;end;
</pre>
<pre class="mermaid2" style="width: 100%; height: 400px">
flowchart TB;a[APA];
</pre>
<pre class="mermaid2" style="margin-left: 100px">
graph TD
work --> sleep
sleep --> work
eat --> sleep
work --> eat
</pre>
<pre class="mermaid2" style="margin-left: 100px">
flowchart TD
work --> sleep
sleep --> work
eat --> sleep
work --> eat
</pre>
<pre class="mermaid2" style="">
graph TB
A
B
subgraph foo[Foo SubGraph]
C
D
end
subgraph bar[Bar SubGraph]
E
F
end
G
A-->B
B-->C
C-->D
B-->D
D-->E
E-->A
E-->F
F-->D
F-->G
B-->G
G-->D
style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
style bar fill:#999,stroke-width:2px,stroke:#0F0,color:blue
</pre>
<pre class="mermaid2" style="">
graph TB
%%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%%
A
B
subgraph foo[Foo SubGraph]
C
D
end
subgraph bar[Bar SubGraph]
E
F
end
G
A-->B
B-->C
C-->D
B-->D
D-->E
E-->A
E-->F
F-->D
F-->G
B-->G
G-->D
style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue
</pre>
<pre class="mermaid2" style="">
<div>Security check</div>
<pre id="diagram" class="mermaid">
graph TD
A[Christmas] ==> D
A[Christmas] -->|Get money| B(Go shopping)
A[Christmas] ==> C
</pre>
<pre class="mermaid2" style="">
graph TD
%%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%%
A[Christmas] ==> D
A[Christmas] -->|Get money| B(Go shopping)
A[Christmas] ==> C
</pre>
<pre class="mermaid2" style="">
flowchart TD
A[Christmas] ==> D
A[Christmas] -->|Get money| B(Go shopping)
A[Christmas] ==> C
</pre>
<pre class="mermaid2" style="">
flowchart TD
%%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%%
A[Christmas] ==> D
A[Christmas] -->|Get money| B(Go shopping)
A[Christmas] ==> C
</pre>
<pre class="mermaid2" style="">
flowchart LR
a["<strong>Haiya</strong>"]---->b
</pre>
<pre class="mermaid" style="">
flowchart LR
%%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%%
a["<strong>Haiya</strong>"]---->b
</pre>
<pre class="mermaid2" style="">
flowchart TD
A[Christmas] ==> D
A[Christmas] -->|Get money| B(Go shopping)
A[Christmas] ==> C
</pre>
<pre class="mermaid2" style="">
flowchart TD
%%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%%
A[Christmas] ==> D
A[Christmas] -->|Get money| B(Go shopping)
A[Christmas] ==> C
</pre>
<pre class="mermaid2" style="">
%%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%%
classDiagram-v2
Class01 <|-- AveryLongClass : Cool
&lt;&lt;interface&gt;&gt; Class01
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class12 <|.. Class08
Class11 ..>Class12
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class01 : -int privateChimp
Class01 : +int publicGorilla
Class01 : #int protectedMarmoset
Class08 <--> C2: Cool label
class Class10 {
&lt;&lt;service&gt;&gt;
int id
test()
}
</pre>
<pre class="mermaid2" style="">
classDiagram-v2
Class01 <|-- AveryLongClass : Cool
&lt;&lt;interface&gt;&gt; Class01
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class12 <|.. Class08
Class11 ..>Class12
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class01 : -int privateChimp
Class01 : +int publicGorilla
Class01 : #int protectedMarmoset
Class08 <--> C2: Cool label
class Class10 {
&lt;&lt;service&gt;&gt;
int id
test()
}
</pre>
<pre class="mermaid" style="">
flowchart BT
subgraph S1
sub1 -->sub2
end
subgraph S2
sub4
end
S1 --> S2
sub1 --> sub4
</pre>
</div>
<script src="./mermaid.js"></script>
<script>
A["test"] --"<p><style> * { display : none}</style>test</p>"--> B
</pre>
<!-- <div id="cy"></div> -->
<!-- <script src="http://localhost:9000/packages/mermaid-mindmap/dist/mermaid-mindmap-detector.js"></script> -->
<!-- <script src="./mermaid-example-diagram-detector.js"></script> -->
<!-- <script src="//cdn.jsdelivr.net/npm/mermaid@9.1.7/dist/mermaid.min.js"></script> -->
<!-- <script src="./mermaid.js"></script> -->
<script type="module">
import mindmap from '../../packages/mermaid-mindmap/src/detector';
// import example from '../../packages/mermaid-example-diagram/src/detector';
import mermaid from '../../packages/mermaid/src/mermaid';
await mermaid.registerExternalDiagrams([mindmap]);
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
};
mermaid.initialize({
// theme: 'neutral',
// arrowMarkerAbsolute: true,
// themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
theme: 'default',
startOnLoad: true,
logLevel: 0,
flowchart: { curve: 'cardinal', htmlLabels: false },
// htmlLabels: true,
// gantt: { axisFormat: '%m/%d/%Y' },
// sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false },
// sequenceDiagram: { actorMargin: 300 } // deprecated
// fontFamily: '"times", sans-serif',
fontFamily: 'courier',
// fontSize: 18,
// curve: 'cardinal',
securityLevel: 'loose',
// themeVariables: {relationLabelColor: 'red'}
flowchart: {
useMaxWidth: false,
htmlLabels: true,
},
gantt: {
useMaxWidth: false,
},
useMaxWidth: false,
});
function callback() {
alert('It worked');
}
mermaid.parseError = function (err, hash) {
console.error('In parse error:');
console.error(err);
};
// mermaid.test1('first_slow', 1200).then((r) => console.info(r));
// mermaid.test1('second_fast', 200).then((r) => console.info(r));
// mermaid.test1('third_fast', 200).then((r) => console.info(r));
// mermaid.test1('forth_slow', 1200).then((r) => console.info(r));
</script>
</body>
</html>

View File

@ -40,7 +40,7 @@ erDiagram
string city
string region
string state
string postal_code
string(5) postal_code
string country
}
@ -57,6 +57,20 @@ erDiagram
number final_price
}
</pre>
<hr />
<pre class="mermaid">
erDiagram
"HOSPITAL" {
int id PK
int doctor_id FK
string address UK
string name
string phone_number
string fax_number
}
</pre>
<hr />
<script src="./mermaid.js"></script>
<script type="module">

View File

@ -60,7 +60,7 @@ Place the renderer in the diagram folder.
### Step 3: Detection of the new diagram type
The second thing to do is to add the capability to detect the new new diagram to type to the detectType in utils.js. The detection should return a key for the new diagram type.
The second thing to do is to add the capability to detect the new diagram to type to the detectType in utils.js. The detection should return a key for the new diagram type.
[This key will be used to as the aria roledescription](#aria-roledescription), so it should be a word that clearly describes the diagram type.
For example, if your new diagram use a UML deployment diagram, a good key would be "UMLDeploymentDiagram" because assistive technologies such as a screen reader
would voice that as "U-M-L Deployment diagram." Another good key would be "deploymentDiagram" because that would be voiced as "Deployment Diagram." A bad key would be "deployment" because that would not sufficiently describe the diagram.

View File

@ -90,7 +90,7 @@ mermaid.initialize(config);
#### Defined in
[mermaidAPI.ts:968](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L968)
[mermaidAPI.ts:961](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L961)
## Functions
@ -295,19 +295,18 @@ Put the svgCode into an iFrame. Return the iFrame code
### removeExistingElements
**removeExistingElements**(`doc`, `isSandboxed`, `id`, `divSelector`, `iFrameSelector`): `void`
**removeExistingElements**(`doc`, `id`, `divId`, `iFrameId`): `void`
Remove any existing elements from the given document
#### Parameters
| Name | Type | Description |
| :--------------- | :--------- | :---------------------------------------------- |
| `doc` | `Document` | the document to removed elements from |
| `isSandboxed` | `boolean` | whether or not we are in sandboxed mode |
| `id` | `string` | id for any existing SVG element |
| `divSelector` | `string` | selector for any existing enclosing div element |
| `iFrameSelector` | `string` | selector for any existing iFrame element |
| Name | Type | Description |
| :--------- | :--------- | :------------------------------------ |
| `doc` | `Document` | the document to removed elements from |
| `id` | `string` | id for any existing SVG element |
| `divId` | `string` | - |
| `iFrameId` | `string` | - |
#### Returns
@ -315,4 +314,4 @@ Remove any existing elements from the given document
#### Defined in
[mermaidAPI.ts:336](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L336)
[mermaidAPI.ts:335](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L335)

View File

@ -12,15 +12,15 @@ Themes can now be customized at the site-wide level, or on individual Mermaid di
## Available Themes
1. **default** - This is the default theme for all diagrams.
1. [**default**](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/themes/theme-default.js) - This is the default theme for all diagrams.
2. **neutral** - This theme is great for black and white documents that will be printed.
2. [**neutral**](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/themes/theme-neutral.js) - This theme is great for black and white documents that will be printed.
3. **dark** - This theme goes well with dark-colored elements or dark-mode.
3. [**dark**](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/themes/theme-dark.js) - This theme goes well with dark-colored elements or dark-mode.
4. **forest** - This theme contains shades of green.
4. [**forest**](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/themes/theme-forest.js) - This theme contains shades of green.
5. **base** - This is the only theme that can be modified. Use this theme as the base for customizations.
5. [**base**](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/themes/theme-base.js) - This is the only theme that can be modified. Use this theme as the base for customizations.
## Site-wide Theme
@ -53,6 +53,18 @@ Example of `init` directive setting the `theme` to `forest`:
a --> b
```
```mermaid-example
%%{init: {'theme':'forest'}}%%
graph TD
a --> b
```
```mermaid
%%{init: {'theme':'forest'}}%%
graph TD
a --> b
```
> **Reminder**: the only theme that can be customed is the `base` theme. The following section covers how to use `themeVariables` for customizations.
## Customizing Themes with `themeVariables`
@ -127,6 +139,66 @@ Example of modifying `themeVariables` using the `init` directive:
end
```
```mermaid-example
%%{
init: {
'theme': 'base',
'themeVariables': {
'primaryColor': '#BB2528',
'primaryTextColor': '#fff',
'primaryBorderColor': '#7C0000',
'lineColor': '#F8B229',
'secondaryColor': '#006100',
'tertiaryColor': '#fff'
}
}
}%%
graph TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
B --> G[/Another/]
C ==>|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
subgraph section
C
D
E
F
G
end
```
```mermaid
%%{
init: {
'theme': 'base',
'themeVariables': {
'primaryColor': '#BB2528',
'primaryTextColor': '#fff',
'primaryBorderColor': '#7C0000',
'lineColor': '#F8B229',
'secondaryColor': '#006100',
'tertiaryColor': '#fff'
}
}
}%%
graph TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
B --> G[/Another/]
C ==>|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
subgraph section
C
D
E
F
G
end
```
## Color and Color Calculation
To ensure diagram readability, the default value of certain variables is calculated or derived from other variables. For example, `primaryBorderColor` is derived from the `primaryColor` variable. So if the `primaryColor` variable is customized, Mermaid will adjust `primaryBorderColor` automatically. Adjustments can mean a color inversion, a hue change, a darkening/lightening by 10%, etc.

View File

@ -238,10 +238,6 @@ Square : +setMessages(List~string~ messages)
Square : +getMessages() List~string~
```
#### Return Type
Optionally you can end the method/function definition with the data type that will be returned.
#### Visibility
To describe the visibility (or encapsulation) of an attribute or method/function that is a part of a class (i.e. a class member), optional notation may be placed before that members' name:
@ -271,7 +267,7 @@ There are eight different types of relations defined for classes under UML which
| Type | Description |
| ------- | ------------- |
| `<\|--` | Inheritance |
| `\*--` | Composition |
| `*--` | Composition |
| `o--` | Aggregation |
| `-->` | Association |
| `--` | Link (Solid) |

View File

@ -230,25 +230,26 @@ erDiagram
}
```
The `type` and `name` values must begin with an alphabetic character and may contain digits, hyphens or underscores. Other than that, there are no restrictions, and there is no implicit set of valid data types.
The `type` and `name` values must begin with an alphabetic character and may contain digits, hyphens, underscores, parentheses and square brackets. Other than that, there are no restrictions, and there is no implicit set of valid data types.
#### Attribute Keys and Comments
Attributes may also have a `key` or comment defined. Keys can be "PK" or "FK", for Primary Key or Foreign Key. And a `comment` is defined by double quotes at the end of an attribute. Comments themselves cannot have double-quote characters in them.
Attributes may also have a `key` or comment defined. Keys can be "PK", "FK" or "UK", for Primary Key, Foreign Key or Unique Key. And a `comment` is defined by double quotes at the end of an attribute. Comments themselves cannot have double-quote characters in them.
```mermaid-example
erDiagram
CAR ||--o{ NAMED-DRIVER : allows
CAR {
string allowedDriver FK "The license of the allowed driver"
string registrationNumber
string registrationNumber UK
string make
string model
string[] parts
}
PERSON ||--o{ NAMED-DRIVER : is
PERSON {
string driversLicense PK "The license #"
string firstName
string(99) firstName "Only 99 characters are allowed"
string lastName
int age
}
@ -260,14 +261,15 @@ erDiagram
CAR ||--o{ NAMED-DRIVER : allows
CAR {
string allowedDriver FK "The license of the allowed driver"
string registrationNumber
string registrationNumber UK
string make
string model
string[] parts
}
PERSON ||--o{ NAMED-DRIVER : is
PERSON {
string driversLicense PK "The license #"
string firstName
string(99) firstName "Only 99 characters are allowed"
string lastName
int age
}

View File

@ -180,7 +180,7 @@ More shapes will be added, beginning with the shapes available in flowcharts.
# Icons and classes
## icons
## Icons
As with flowcharts you can add icons to your nodes but with an updated syntax. The styling for the font based icons are added during the integration so that they are available for the web page. _This is not something a diagram author can do but has to be done with the site administrator or the integrator_. Once the icon fonts are in place you add them to the mind map nodes using the `::icon()` syntax. You place the classes for the icon within the parenthesis like in the following example where icons for material design and fontawesome 4 are displayed. The intention is that this approach should be used for all diagrams supporting icons. **Experimental feature:** This wider scope is also the reason Mindmaps are experimental as this syntax and approach could change.

View File

@ -1,10 +1,10 @@
{
"name": "mermaid-monorepo",
"private": true,
"version": "9.2.2",
"version": "9.3.0-rc1",
"description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
"type": "module",
"packageManager": "pnpm@7.17.1",
"packageManager": "pnpm@7.18.2",
"keywords": [
"diagram",
"markdown",
@ -75,7 +75,7 @@
"coveralls": "^3.1.1",
"cypress": "^10.11.0",
"cypress-image-snapshot": "^4.0.1",
"esbuild": "^0.15.13",
"esbuild": "^0.16.0",
"eslint": "^8.27.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-cypress": "^2.12.1",

View File

@ -1,7 +1,7 @@
{
"name": "@mermaid-js/mermaid-mindmap",
"version": "9.2.2",
"description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
"version": "9.3.0",
"description": "Mindmap diagram module for MermaidJS.",
"module": "dist/mermaid-mindmap.core.mjs",
"types": "dist/detector.d.ts",
"type": "module",

View File

@ -10,7 +10,7 @@ English | [简体中文](./README.zh-CN.md)
**Thanks to all involved, people committing pull requests, people answering questions! 🙏**
<a href="https://mermaid-js.github.io/mermaid/landing/"><img src="https://github.com/mermaid-js/mermaid/blob/master/docs/img/book-banner-post-release.jpg" alt="Explore Mermaid.js in depth, with real-world examples, tips & tricks from the creator... The first official book on Mermaid is available for purchase. Check it out!"></a>
<a href="https://mermaid-js.github.io/mermaid/landing/"><img src="https://github.com/mermaid-js/mermaid/blob/master/docs/intro/img/book-banner-post-release.jpg" alt="Explore Mermaid.js in depth, with real-world examples, tips & tricks from the creator... The first official book on Mermaid is available for purchase. Check it out!"></a>
## About

View File

@ -10,7 +10,7 @@
**感谢所有参与进来提交 PR解答疑问的人们! 🙏**
<a href="https://mermaid-js.github.io/mermaid/landing/"><img src="https://github.com/mermaid-js/mermaid/blob/master/docs/img/book-banner-pre-release.jpg" alt="Explore Mermaid.js in depth, with real-world examples, tips & tricks from the creator... The first official book on Mermaid is available for purchase. Check it out!"></a>
<a href="https://mermaid-js.github.io/mermaid/landing/"><img src="https://github.com/mermaid-js/mermaid/blob/master/docs/intro/img/book-banner-post-release.jpg" alt="Explore Mermaid.js in depth, with real-world examples, tips & tricks from the creator... The first official book on Mermaid is available for purchase. Check it out!"></a>
## 关于 Mermaid

View File

@ -1,6 +1,6 @@
{
"name": "mermaid",
"version": "9.2.3-rc.1",
"version": "9.3.0",
"description": "Markdown-ish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
"main": "./dist/mermaid.min.js",
"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 && vitepress build src/vitepress",
"docs:build:vitepress": "pnpm docs:pre:vitepress && vitepress build src/vitepress && cpy --flat src/docs/landing/ ./src/vitepress/.vitepress/dist/landing",
"docs:dev": "pnpm docs:pre:vitepress && concurrently \"vitepress dev src/vitepress\" \"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\"",
@ -54,7 +54,7 @@
"dependencies": {
"@braintree/sanitize-url": "^6.0.0",
"d3": "^7.0.0",
"dagre-d3-es": "7.0.4",
"dagre-d3-es": "7.0.6",
"dompurify": "2.4.1",
"khroma": "^2.0.0",
"lodash-es": "^4.17.21",
@ -77,6 +77,7 @@
"chokidar": "^3.5.3",
"concurrently": "^7.5.0",
"coveralls": "^3.1.1",
"cpy-cli": "^4.2.0",
"cspell": "^6.14.3",
"globby": "^13.1.2",
"jison": "^0.4.18",
@ -93,8 +94,8 @@
"typedoc-plugin-markdown": "^3.13.6",
"typescript": "^4.8.4",
"unist-util-flatmap": "^1.0.0",
"vitepress": "^1.0.0-alpha.28",
"vitepress-plugin-search": "^1.0.4-alpha.15"
"vitepress": "^1.0.0-alpha.31",
"vitepress-plugin-search": "^1.0.4-alpha.16"
},
"files": [
"dist",

View File

@ -102,7 +102,6 @@ export const getDiagramFromText = (
try {
// Trying to find the diagram
getDiagram(type);
return new Diagram(txt, parseError);
} catch (error) {
const loader = getDiagramLoader(type);
if (!loader) {
@ -118,6 +117,7 @@ export const getDiagramFromText = (
return new Diagram(txt, parseError);
});
}
return new Diagram(txt, parseError);
};
export default Diagram;

View File

@ -6,6 +6,13 @@ describe('accessibility', () => {
const fauxSvgNode = new MockedD3();
describe('setA11yDiagramInfo', () => {
it('sets the svg element role to "graphics-document document"', () => {
// @ts-ignore Required to easily handle the d3 select types
const svgAttrSpy = vi.spyOn(fauxSvgNode, 'attr').mockReturnValue(fauxSvgNode);
setA11yDiagramInfo(fauxSvgNode, 'flowchart');
expect(svgAttrSpy).toHaveBeenCalledWith('role', 'graphics-document document');
});
it('sets the aria-roledescription to the diagram type', () => {
// @ts-ignore Required to easily handle the d3 select types
const svgAttrSpy = vi.spyOn(fauxSvgNode, 'attr').mockReturnValue(fauxSvgNode);
@ -13,11 +20,12 @@ describe('accessibility', () => {
expect(svgAttrSpy).toHaveBeenCalledWith('aria-roledescription', 'flowchart');
});
it('does nothing if the diagram type is empty', () => {
it('does not set the aria-roledescription if the diagram type is empty', () => {
// @ts-ignore Required to easily handle the d3 select types
const svgAttrSpy = vi.spyOn(fauxSvgNode, 'attr').mockReturnValue(fauxSvgNode);
setA11yDiagramInfo(fauxSvgNode, '');
expect(svgAttrSpy).not.toHaveBeenCalled();
expect(svgAttrSpy).toHaveBeenCalledTimes(1);
expect(svgAttrSpy).toHaveBeenCalledWith('role', expect.anything()); // only called to set the role
});
});

View File

@ -1,18 +1,33 @@
/**
* Accessibility (a11y) functions, types, helpers
* @see https://www.w3.org/WAI/
* @see https://www.w3.org/TR/wai-aria-1.1/
* @see https://www.w3.org/TR/svg-aam-1.0/
*
*/
import { D3Element } from './mermaidAPI';
import isEmpty from 'lodash-es/isEmpty';
import isEmpty from 'lodash-es/isEmpty.js';
/**
* Add aria-roledescription to the svg element to the diagramType
* SVG element role:
* The SVG element role _should_ be set to 'graphics-document' per SVG standard
* but in practice is not always done by browsers, etc. (As of 2022-12-08).
* A fallback role of 'document' should be set for those browsers, etc., that only support ARIA 1.0.
*
* @see https://www.w3.org/TR/svg-aam-1.0/#roleMappingGeneralRules
* @see https://www.w3.org/TR/graphics-aria-1.0/#graphics-document
*/
const SVG_ROLE = 'graphics-document document';
/**
* Add role and aria-roledescription to the svg element
*
* @param svg - d3 object that contains the SVG HTML element
* @param diagramType - diagram name for to the aria-roledescription
*/
export function setA11yDiagramInfo(svg: D3Element, diagramType: string | null | undefined) {
svg.attr('role', SVG_ROLE);
if (!isEmpty(diagramType)) {
svg.attr('aria-roledescription', diagramType);
}

View File

@ -1,5 +1,5 @@
import { layout as dagreLayout } from 'dagre-d3-es/src/dagre/index.js';
import * as graphlibJson from 'dagre-d3-es/src/graphlib/json';
import * as graphlibJson from 'dagre-d3-es/src/graphlib/json.js';
import insertMarkers from './markers';
import { updateNodeBounds } from './shapes/util';
import {

View File

@ -1,7 +1,7 @@
/** Decorates with functions required by mermaids dagre-wrapper. */
import { log } from '../logger';
import * as graphlibJson from 'dagre-d3-es/src/graphlib/json';
import * as graphlib from 'dagre-d3-es/src/graphlib';
import * as graphlibJson from 'dagre-d3-es/src/graphlib/json.js';
import * as graphlib from 'dagre-d3-es/src/graphlib/index.js';
export let clusterDb = {};
let descendants = {};

View File

@ -1,5 +1,5 @@
import * as graphlibJson from 'dagre-d3-es/src/graphlib/json';
import * as graphlib from 'dagre-d3-es/src/graphlib';
import * as graphlibJson from 'dagre-d3-es/src/graphlib/json.js';
import * as graphlib from 'dagre-d3-es/src/graphlib/index.js';
import {
validate,
adjustClustersAndEdges,

View File

@ -0,0 +1,67 @@
import { describe, test, expect } from 'vitest';
import Diagram, { getDiagramFromText } from './Diagram';
import { addDetector } from './diagram-api/detectType';
import { addDiagrams } from './diagram-api/diagram-orchestration';
addDiagrams();
describe('diagram detection', () => {
test('should detect inbuilt diagrams', () => {
const graph = getDiagramFromText('graph TD; A-->B') as Diagram;
expect(graph).toBeInstanceOf(Diagram);
expect(graph.type).toBe('flowchart-v2');
const sequence = getDiagramFromText(
'sequenceDiagram; Alice->>+John: Hello John, how are you?'
) as Diagram;
expect(sequence).toBeInstanceOf(Diagram);
expect(sequence.type).toBe('sequence');
});
test('should detect external diagrams', async () => {
addDetector(
'loki',
(str) => str.startsWith('loki'),
() =>
Promise.resolve({
id: 'loki',
diagram: {
db: {},
parser: {
parse: () => {
// no-op
},
parser: {
yy: {},
},
},
renderer: {},
styles: {},
},
})
);
const diagram = (await getDiagramFromText('loki TD; A-->B')) as Diagram;
expect(diagram).toBeInstanceOf(Diagram);
expect(diagram.type).toBe('loki');
});
test('should throw the right error for incorrect diagram', () => {
expect(() => getDiagramFromText('graph TD; A-->')).toThrowErrorMatchingInlineSnapshot(`
"Parse error on line 3:
graph TD; A-->
--------------^
Expecting 'AMP', 'ALPHA', 'COLON', 'PIPE', 'TESTSTR', 'DOWN', 'DEFAULT', 'NUM', 'COMMA', 'MINUS', 'BRKT', 'DOT', 'PUNCTUATION', 'UNICODE_TEXT', 'PLUS', 'EQUALS', 'MULT', 'UNDERSCORE', got 'EOF'"
`);
expect(() => getDiagramFromText('sequenceDiagram; A-->B')).toThrowErrorMatchingInlineSnapshot(`
"Parse error on line 1:
...quenceDiagram; A-->B
-----------------------^
Expecting 'TXT', got 'NEWLINE'"
`);
});
test('should throw the right error for unregistered diagrams', () => {
expect(() => getDiagramFromText('thor TD; A-->B')).toThrowError(
'No diagram type detected for text: thor TD; A-->B'
);
});
});

View File

@ -1,5 +1,5 @@
import { select } from 'd3';
import * as graphlib from 'dagre-d3-es/src/graphlib';
import * as graphlib from 'dagre-d3-es/src/graphlib/index.js';
import { log } from '../../logger';
import { getConfig } from '../../config';
import { render } from '../../dagre-wrapper/index.js';

View File

@ -47,7 +47,9 @@ export const sanitizeText = (text: string, config: MermaidConfig): string => {
if (config.dompurifyConfig) {
text = DOMPurify.sanitize(sanitizeMore(text, config), config.dompurifyConfig).toString();
} else {
text = DOMPurify.sanitize(sanitizeMore(text, config));
text = DOMPurify.sanitize(sanitizeMore(text, config), {
FORBID_TAGS: ['style'],
}).toString();
}
return text;
};

View File

@ -1,4 +1,4 @@
import * as graphlib from 'dagre-d3-es/src/graphlib';
import * as graphlib from 'dagre-d3-es/src/graphlib/index.js';
import { line, curveBasis, select } from 'd3';
import { layout as dagreLayout } from 'dagre-d3-es/src/dagre/index.js';
import { getConfig } from '../../config';
@ -7,7 +7,7 @@ import utils from '../../utils';
import erMarkers from './erMarkers';
import { configureSvgSize } from '../../setupGraphViewbox';
import { parseGenericTypes } from '../common/common';
import { v4 as uuid4 } from 'uuid';
import { v5 as uuid5 } from 'uuid';
/** Regex used to remove chars from the entity name so the result can be used in an id */
const BAD_ID_CHARS_REGEXP = /[^\dA-Za-z](\W)*/g;
@ -643,9 +643,24 @@ export const draw = function (text, id, _version, diagObj) {
svg.attr('viewBox', `${svgBounds.x - padding} ${svgBounds.y - padding} ${width} ${height}`);
}; // draw
/**
* UUID namespace for ER diagram IDs
*
* This can be generated via running:
*
* ```js
* const { v5: uuid5 } = await import('uuid');
* uuid5(
* 'https://mermaid-js.github.io/mermaid/syntax/entityRelationshipDiagram.html',
* uuid5.URL
* );
* ```
*/
const MERMAID_ERDIAGRAM_UUID = '28e9f9db-3c8d-5aa5-9faf-44286ae5937c';
/**
* Return a unique id based on the given string. Start with the prefix, then a hyphen, then the
* simplified str, then a hyphen, then a unique uuid. (Hyphens are only included if needed.)
* simplified str, then a hyphen, then a unique uuid based on the str. (Hyphens are only included if needed.)
* Although the official XML standard for ids says that many more characters are valid in the id,
* this keeps things simple by accepting only A-Za-z0-9.
*
@ -656,7 +671,11 @@ export const draw = function (text, id, _version, diagObj) {
*/
export function generateId(str = '', prefix = '') {
const simplifiedStr = str.replace(BAD_ID_CHARS_REGEXP, '');
return `${strWithHyphen(prefix)}${strWithHyphen(simplifiedStr)}${uuid4()}`;
// we use `uuid v5` so that UUIDs are consistent given a string.
return `${strWithHyphen(prefix)}${strWithHyphen(simplifiedStr)}${uuid5(
str,
MERMAID_ERDIAGRAM_UUID
)}`;
}
/**

View File

@ -0,0 +1,12 @@
import { generateId } from './erRenderer';
describe('erRenderer', () => {
describe('generateId', () => {
it('should be deterministic', () => {
const id1 = generateId('hello world', 'my-prefix');
const id2 = generateId('hello world', 'my-prefix');
expect(id1).toBe(id2);
});
});
});

View File

@ -29,9 +29,9 @@ accDescr\s*"{"\s* { this.begin("acc_descr_multili
"erDiagram" return 'ER_DIAGRAM';
"{" { this.begin("block"); return 'BLOCK_START'; }
<block>\s+ /* skip whitespace in block */
<block>\b((?:PK)|(?:FK))\b return 'ATTRIBUTE_KEY'
<block>\b((?:PK)|(?:FK)|(?:UK))\b return 'ATTRIBUTE_KEY'
<block>(.*?)[~](.*?)*[~] return 'ATTRIBUTE_WORD';
<block>[A-Za-z][A-Za-z0-9\-_\[\]]* return 'ATTRIBUTE_WORD'
<block>[A-Za-z][A-Za-z0-9\-_\[\]\(\)]* return 'ATTRIBUTE_WORD'
<block>\"[^"]*\" return 'COMMENT';
<block>[\n]+ /* nothing */
<block>"}" { this.popState(); return 'BLOCK_STOP'; }

View File

@ -176,17 +176,18 @@ describe('when parsing ER diagram it...', function () {
expect(entities[entity].attributes.length).toBe(1);
});
it('should allow an entity with attribute starting with fk or pk and a comment', function () {
it('should allow an entity with attribute starting with fk, pk or uk and a comment', function () {
const entity = 'BOOK';
const attribute1 = 'int fk_title FK';
const attribute2 = 'string pk_author PK';
const attribute3 = 'float pk_price PK "comment"';
const attribute3 = 'string uk_address UK';
const attribute4 = 'float pk_price PK "comment"';
erDiagram.parser.parse(
`erDiagram\n${entity} {\n${attribute1} \n\n${attribute2}\n${attribute3}\n}`
`erDiagram\n${entity} {\n${attribute1} \n\n${attribute2}\n${attribute3}\n${attribute4}\n}`
);
const entities = erDb.getEntities();
expect(entities[entity].attributes.length).toBe(3);
expect(entities[entity].attributes.length).toBe(4);
});
it('should allow an entity with attribute that has a generic type', function () {
@ -214,6 +215,19 @@ describe('when parsing ER diagram it...', function () {
expect(entities[entity].attributes.length).toBe(2);
});
it('should allow an entity with attribute that is a limited length string', function () {
const entity = 'BOOK';
const attribute1 = 'character(10) isbn FK';
const attribute2 = 'varchar(5) postal_code "Five digits"';
erDiagram.parser.parse(`erDiagram\n${entity} {\n${attribute1}\n${attribute2}\n}`);
const entities = erDb.getEntities();
expect(Object.keys(entities).length).toBe(1);
expect(entities[entity].attributes.length).toBe(2);
expect(entities[entity].attributes[0].attributeType).toBe('character(10)');
expect(entities[entity].attributes[1].attributeType).toBe('varchar(5)');
});
it('should allow an entity with multiple attributes to be defined', function () {
const entity = 'BOOK';
const attribute1 = 'string title';

View File

@ -1,4 +1,4 @@
import * as graphlib from 'dagre-d3-es/src/graphlib';
import * as graphlib from 'dagre-d3-es/src/graphlib/index.js';
import { select, curveLinear, selectAll } from 'd3';
import flowDb from './flowDb';

View File

@ -1,4 +1,4 @@
import * as graphlib from 'dagre-d3-es/src/graphlib';
import * as graphlib from 'dagre-d3-es/src/graphlib/index.js';
import { select, curveLinear, selectAll } from 'd3';
import { getConfig } from '../../config';
import { render as Render } from 'dagre-d3-es';

View File

@ -1,6 +1,5 @@
import flowDb from '../flowDb';
import flow from './flow';
import filter from 'lodash-es/filter';
import { setConfig } from '../../../config';
setConfig({

View File

@ -1,6 +1,5 @@
import flowDb from '../flowDb';
import flow from './flow';
import filter from 'lodash-es/filter';
import { setConfig } from '../../../config';
setConfig({

View File

@ -1,4 +1,4 @@
import * as graphlib from 'dagre-d3-es/src/graphlib';
import * as graphlib from 'dagre-d3-es/src/graphlib/index.js';
import { select } from 'd3';
import { getConfig } from '../../config';
import { render } from '../../dagre-wrapper/index.js';

View File

@ -273,7 +273,7 @@ const transformHtml = (filename: string) => {
};
const getGlobs = (globs: string[]): string[] => {
globs.push('!**/dist', '!**/redirect.spec.ts');
globs.push('!**/dist', '!**/redirect.spec.ts', '!**/landing');
if (!vitepress) {
globs.push('!**/.vitepress', '!**/vite.config.ts', '!src/docs/index.md');
}

View File

@ -14,37 +14,34 @@ export default defineConfig({
lang: 'en-US',
title: 'Mermaid',
description: 'Create diagrams and visualizations using text and code.',
base: '/mermaid/',
base: '/',
markdown: allMarkdownTransformers,
head: [['link', { rel: 'icon', type: 'image/x-icon', href: '/mermaid/favicon.ico' }]],
head: [['link', { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]],
themeConfig: {
nav: nav(),
editLink: {
pattern: 'https://github.com/mermaid-js/mermaid/edit/develop/packages/mermaid/src/docs/:path',
text: 'Edit this page on GitHub',
},
sidebar: {
'/': sidebarAll(),
},
socialLinks: [
{ icon: 'github', link: 'https://github.com/mermaid-js/mermaid' },
{ icon: 'slack', link: 'https://mermaid-talk.slack.com' },
],
},
});
function nav() {
return [
{ text: 'Intro', link: '/intro/', activeMatch: '/intro/' },
{ text: 'Docs', link: '/intro/', activeMatch: '/intro/' },
{
text: 'Configuration',
link: '/config/configuration',
text: 'Tutorials',
link: '/config/Tutorials',
activeMatch: '/config/',
},
{ text: 'Syntax', link: '/syntax/classDiagram', activeMatch: '/syntax/' },
{ text: 'Misc', link: '/misc/integrations', activeMatch: '/misc/' },
{
text: 'Community',
link: '/community/n00b-overview',
activeMatch: '/community/',
},
{ text: 'Integrations', link: '/misc/integrations', activeMatch: '/misc/' },
{
text: version,
items: [

View File

@ -1,3 +1,6 @@
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');
@import url('https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css');
:root {
--vp-c-brand: #ff3670;
--vp-c-brand-light: #ff5e8c;

View File

@ -18,7 +18,7 @@ export default {
if (newPath) {
console.log(`Redirecting to ${newPath} from ${window.location}`);
// router.go isn't loading the ID properly.
window.location.href = `/mermaid/${newPath}`;
window.location.href = `/${newPath}`;
}
} catch (e) {}
};

View File

@ -1,13 +1,16 @@
import mermaid, { type MermaidConfig } from 'mermaid';
import mindmap from '@mermaid-js/mermaid-mindmap';
try {
await mermaid.registerExternalDiagrams([mindmap]);
} catch (e) {
console.error(e);
}
const init = (async () => {
try {
await mermaid.registerExternalDiagrams([mindmap]);
} catch (e) {
console.error(e);
}
})();
export const render = async (id: string, code: string, config: MermaidConfig): Promise<string> => {
await init;
mermaid.initialize(config);
const svg = await mermaid.renderAsync(id, code);
return svg;

View File

@ -8,6 +8,7 @@ test.each([
['http://localhost:1234/mermaid/#/flowchart.md', 'syntax/flowchart.html'],
['http://localhost/mermaid/#/flowchart.md', 'syntax/flowchart.html'],
['https://mermaid-js.github.io/mermaid/#/flowchart.md', 'syntax/flowchart.html'],
['https://mermaid.js.org/#/flowchart.md', 'syntax/flowchart.html'],
['https://mermaid-js.github.io/mermaid/#/./flowchart', 'syntax/flowchart.html'],
['https://mermaid-js.github.io/mermaid/#/flowchart', 'syntax/flowchart.html'],
['https://mermaid-js.github.io/mermaid/#flowchart', 'syntax/flowchart.html'],
@ -31,7 +32,4 @@ test.each([
test('should throw for invalid URL', () => {
// Not mermaid domain
expect(() => getRedirect('https://www.google.com')).toThrowError();
// Not `/mermaid/` path
expect(() => getRedirect('http://localhost/#/flowchart.md')).toThrowError();
});

View File

@ -10,8 +10,9 @@ export interface Redirect {
const getBaseFile = (link: string): Redirect => {
const url = new URL(link);
if (
(url.hostname !== 'mermaid-js.github.io' && url.hostname !== 'localhost') ||
url.pathname !== '/mermaid/'
url.hostname !== 'mermaid-js.github.io' &&
url.hostname !== 'mermaid.js.org' &&
url.hostname !== 'localhost'
) {
throw new Error('Not mermaidjs url');
}

View File

@ -55,7 +55,7 @@ Place the renderer in the diagram folder.
### Step 3: Detection of the new diagram type
The second thing to do is to add the capability to detect the new new diagram to type to the detectType in utils.js. The detection should return a key for the new diagram type.
The second thing to do is to add the capability to detect the new diagram to type to the detectType in utils.js. The detection should return a key for the new diagram type.
[This key will be used to as the aria roledescription](#aria-roledescription), so it should be a word that clearly describes the diagram type.
For example, if your new diagram use a UML deployment diagram, a good key would be "UMLDeploymentDiagram" because assistive technologies such as a screen reader
would voice that as "U-M-L Deployment diagram." Another good key would be "deploymentDiagram" because that would be voiced as "Deployment Diagram." A bad key would be "deployment" because that would not sufficiently describe the diagram.

View File

@ -6,15 +6,15 @@ Themes can now be customized at the site-wide level, or on individual Mermaid di
## Available Themes
1. **default** - This is the default theme for all diagrams.
1. [**default**](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/themes/theme-default.js) - This is the default theme for all diagrams.
1. **neutral** - This theme is great for black and white documents that will be printed.
2. [**neutral**](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/themes/theme-neutral.js) - This theme is great for black and white documents that will be printed.
1. **dark** - This theme goes well with dark-colored elements or dark-mode.
3. [**dark**](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/themes/theme-dark.js) - This theme goes well with dark-colored elements or dark-mode.
1. **forest** - This theme contains shades of green.
4. [**forest**](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/themes/theme-forest.js) - This theme contains shades of green.
1. **base** - This is the only theme that can be modified. Use this theme as the base for customizations.
5. [**base**](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/themes/theme-base.js) - This is the only theme that can be modified. Use this theme as the base for customizations.
## Site-wide Theme
@ -35,7 +35,13 @@ To customize the theme of an individual diagram, use the `init` directive.
Example of `init` directive setting the `theme` to `forest`:
```mmd
```mermaid-example
%%{init: {'theme':'forest'}}%%
graph TD
a --> b
```
```mermaid
%%{init: {'theme':'forest'}}%%
graph TD
a --> b
@ -85,6 +91,36 @@ Example of modifying `themeVariables` using the `init` directive:
end
```
```mermaid
%%{
init: {
'theme': 'base',
'themeVariables': {
'primaryColor': '#BB2528',
'primaryTextColor': '#fff',
'primaryBorderColor': '#7C0000',
'lineColor': '#F8B229',
'secondaryColor': '#006100',
'tertiaryColor': '#fff'
}
}
}%%
graph TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
B --> G[/Another/]
C ==>|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
subgraph section
C
D
E
F
G
end
```
## Color and Color Calculation
To ensure diagram readability, the default value of certain variables is calculated or derived from other variables. For example, `primaryBorderColor` is derived from the `primaryColor` variable. So if the `primaryColor` variable is customized, Mermaid will adjust `primaryBorderColor` automatically. Adjustments can mean a color inversion, a hue change, a darkening/lightening by 10%, etc.

Binary file not shown.

After

Width:  |  Height:  |  Size: 34 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 42 KiB

View File

@ -0,0 +1,337 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>The Official Guide to Mermaid.js</title>
<meta
name="description"
content="Landing page for the book The Official Guide to Mermaid.js: Create complex diagrams and beautiful flowcharts easily using text and code"
/>
<meta
name="keywords"
content="book, guide, mermaid, flowcharts, sequence diagrams, class diagrams, state diagrams, pie charts, Entity Relationship Diagrams, User Journey Diagrams, Requirement Diagrams, Gantt Charts"
/>
<meta name="author" content="Knut Sveidqvist, Ashish Jain" />
<link rel="stylesheet" href="https://unpkg.com/tailwindcss@2/dist/tailwind.min.css" />
<!--Replace with your tailwind.css once created-->
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700" rel="stylesheet" />
<!-- Define your gradient here - use online tools to find a gradient matching your branding-->
<style>
.gradient {
background: linear-gradient(90deg, #7557c9 0%, #f4f4f4 100%);
}
.p-shadow {
text-shadow: #7557c9 0px 0px 5px;
}
</style>
<!-- Google Analytics -->
<script>
// prettier-ignore
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-153180559-1', 'auto');
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->
</head>
<body
class="leading-normal tracking-normal text-white gradient"
style="font-family: 'Source Sans Pro', sans-serif"
>
<!--Nav-->
<!--Hero-->
<div class="pt-24">
<div
style=""
class="container lg:px-24 max-w-5xl px-4 mx-auto flex flex-wrap flex-col md:flex-row items-center"
>
<!--Left Col-->
<div class="w-full md:w-1/2">
<div class="flex flex-col justify-center items-start text-center md:text-left">
<div class="flex flex-col items-center">
<p class="uppercase tracking-loose w-full p-shadow">MermaidPress</p>
<h1 class="my-4 text-5xl font-bold leading-tight p-shadow">
The Official Guide to Mermaid.js
</h1>
<p class="leading-normal text-2xl mb-8 p-shadow">
Learn to create complex diagrams and beautiful flowcharts easily using text and code
using Mermaid.js.
</p>
<a
href="https://www.amazon.com/Official-Guide-Mermaid-js-beautiful-flowcharts-dp-1801078025/dp/1801078025/ref=mt_other?_encoding=UTF8&amp;me=&amp;qid=1628153965"
>
<button
style="background: #ffa41c; border: 1px solid #ff8f00"
class="mx-auto lg:mx-0 hover:underline text-black font-bold rounded-full my-6 py-4 px-8 shadow-lg focus:outline-none focus:shadow-outline transform transition hover:scale-105 duration-300 ease-in-out"
>
Purchase on Amazon
</button>
</a>
</div>
</div>
</div>
<!--Right Col-->
<div class="flex-1 md:w-3/5 py-6 text-center flex justify-end">
<img class="z-50" style="max-width: 350px" src="cover.jpg" />
</div>
</div>
</div>
<div class="relative -mt-0 lg:-mt-12">
<svg
viewBox="0 0 1428 174"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-2.000000, 44.000000)" fill="#FFFFFF" fill-rule="nonzero">
<path
d="M0,0 C90.7283404,0.927527913 147.912752,27.187927 291.910178,59.9119003 C387.908462,81.7278826 543.605069,89.334785 759,82.7326078 C469.336065,156.254352 216.336065,153.6679 0,74.9732496"
opacity="0.100000001"
></path>
<path
d="M100,104.708498 C277.413333,72.2345949 426.147877,52.5246657 546.203633,45.5787101 C666.259389,38.6327546 810.524845,41.7979068 979,55.0741668 C931.069965,56.122511 810.303266,74.8455141 616.699903,111.243176 C423.096539,147.640838 250.863238,145.462612 100,104.708498 Z"
opacity="0.100000001"
></path>
<path
d="M1046,51.6521276 C1130.83045,29.328812 1279.08318,17.607883 1439,40.1656806 L1439,120 C1271.17211,77.9435312 1140.17211,55.1609071 1046,51.6521276 Z"
id="Path-4"
opacity="0.200000003"
></path>
</g>
<g transform="translate(-4.000000, 76.000000)" fill="#FFFFFF" fill-rule="nonzero">
<path
d="M0.457,34.035 C57.086,53.198 98.208,65.809 123.822,71.865 C181.454,85.495 234.295,90.29 272.033,93.459 C311.355,96.759 396.635,95.801 461.025,91.663 C486.76,90.01 518.727,86.372 556.926,80.752 C595.747,74.596 622.372,70.008 636.799,66.991 C663.913,61.324 712.501,49.503 727.605,46.128 C780.47,34.317 818.839,22.532 856.324,15.904 C922.689,4.169 955.676,2.522 1011.185,0.432 C1060.705,1.477 1097.39,3.129 1121.236,5.387 C1161.703,9.219 1208.621,17.821 1235.4,22.304 C1285.855,30.748 1354.351,47.432 1440.886,72.354 L1441.191,104.352 L1.121,104.031 L0.457,34.035 Z"
></path>
</g>
</g>
</svg>
</div>
<section class="bg-white border-b py-8">
<div class="container max-w-5xl mx-auto m-8">
<h2 class="w-full my-2 text-5xl font-bold leading-tight text-center text-gray-800">
Get up to speed with using Mermaid diagrams along with real-world examples and expert tips
from the authors to facilitate a seamless development workflow
</h2>
<div class="w-full mb-4">
<div class="h-1 mx-auto gradient w-64 opacity-25 my-0 py-0 rounded-t"></div>
</div>
<div class="flex flex-wrap">
<div class="w-full sm:w-1/2 p-6 flex items-center">
<p class="text-3xl text-gray-800 font-normal leading-none mb-3">
Flowcharts is a diagram type that visualizes a process or an algorithm by showing the
steps in order, as well as the different paths the execution can take.
</p>
</div>
<div class="w-full sm:w-1/2 p-6 flex justify-center items-center">
<img class="z-50" src="flowchart.png" />
</div>
</div>
<div class="flex flex-wrap flex-col-reverse sm:flex-row flex justify-center items-center">
<div class="w-full sm:w-1/2 p-6 mt-6">
<img class="z-50 w-full" style="" src="sequence-diagram.png" />
</div>
<div class="w-full sm:w-1/2 p-6 mt-6">
<div class="align-middle flex items-center">
<p class="text-3xl text-gray-800 font-normal leading-none mb-3">
Sequence diagrams lets you model and visualize interactions between different actors
or objects in a system, as well as the order of those interactions
</p>
</div>
</div>
</div>
<div class="flex flex-wrap">
<div class="w-full sm:w-1/2 p-6 flex items-center">
<p class="text-3xl text-gray-800 font-normal leading-none mb-3">
A class diagram is a graphical representation that is used to visualize and describe
an object-oriented system.
</p>
</div>
<div class="w-full sm:w-1/2 p-6 flex justify-center items-center">
<img class="z-50" style="" src="class.png" />
</div>
</div>
<div class="flex flex-wrap flex-col-reverse sm:flex-row flex justify-center items-center">
<div class="w-full sm:w-1/2 p-6 mt-6">
<img class="z-50 w-full" style="" src="er.png" />
</div>
<div class="w-full sm:w-1/2 p-6 mt-6">
<div class="align-middle flex items-center">
<p class="text-3xl text-gray-800 font-normal leading-none mb-3">
An entity-relationship diagram is a graphical representation that is used to
visualize the different types of entities that exist within a system.
</p>
</div>
</div>
</div>
<div class="flex flex-wrap">
<div class="w-full sm:w-1/2 p-6 flex items-center">
<p class="text-3xl text-gray-800 font-normal leading-none mb-3">
Use State diagrams to model and document state machines, an abstract way of
representing a system or an algorithm.
</p>
</div>
<div class="w-full sm:w-1/2 p-6 flex justify-center items-center">
<img class="z-50" style="" src="state.png" />
</div>
</div>
<div class="flex flex-wrap flex-col-reverse sm:flex-row flex justify-center items-center">
<div class="w-full sm:w-1/2 p-6 mt-6">
<img class="z-50 w-full" style="" src="gantt.png" />
</div>
<div class="w-full sm:w-1/2 p-6 mt-6">
<div class="align-middle flex items-center">
<p class="text-3xl text-gray-800 font-normal leading-none mb-3">
A Gantt chart is a graphical representation that is used to visualize and describe
tasks (events or activities) over time.
</p>
</div>
</div>
</div>
</div>
<p class="text-3xl text-gray-800 font-normal leading-none mt-3 text-center">
These were a few of the diagrams supported by Mermaid.
</p>
</section>
<section class="bg-gray-100 border-b py-8">
<div class="container mx-auto flex flex-wrap max-w-5xl mx-auto m-8 pt-4 pb-12 px-8">
<h1 class="w-full my-2 text-5xl font-bold leading-tight text-center text-gray-800">
Book description
</h1>
<div class="w-full mb-4">
<p class="text-black mb-4">
Mermaid lets you represent diagrams using text and code which simplifies the maintenance
of complex diagrams. This is a great option for developers as theyre more familiar with
code, rather than special tools for generating diagrams. Besides, diagrams in code
simplify maintenance and ensure that the code is supported by version control systems.
In some cases, Mermaid makes refactoring support for name changes possible while also
enabling team collaboration for review distribution and updates.
</p>
<p class="text-black mb-4">
Developers working with any system will be able to put their knowledge to work with this
practical guide to using Mermaid for documentation. The book is also a great reference
for looking up the syntax for specific diagrams when authoring diagrams.
</p>
<p class="text-black mb-4">
Youll start by getting up to speed with the importance of accurate and visual
documentation. Next, the book introduces Mermaid and establishes how to use it to create
effective documentation. By using different tools, editors, or a custom documentation
platform, youll also learn how to use Mermaid syntax for various diagrams. Later
chapters cover advanced configuration settings and theme options to manipulate your
diagram as per your needs.
</p>
<p class="text-black mb-4">
By the end of this Mermaid book, youll have become well-versed with the different types
of Mermaid diagrams and how they can be used in your workflows.
</p>
</div>
</div>
</section>
<section class="bg-white py-8">
<div class="container mx-auto px-2 pt-4 pb-12 text-gray-800">
<h1 class="w-full my-2 text-5xl font-bold leading-tight text-center text-gray-800">
What you will learn
</h1>
<div class="w-full mb-4">
<div class="h-1 mx-auto gradient w-64 opacity-25 my-0 py-0 rounded-t"></div>
</div>
<div class="flex flex-col sm:flex-row justify-center items-center pt-12 my-12 sm:my-4">
<div class="flex flex-col mx-4 rounded-lg bg-white mt-4 sm:-mt-6 shadow-lg z-10">
<div class="flex-1 bg-white rounded-t rounded-b-none overflow-hidden shadow">
<ul class="w-full text-base font-bold px-4">
<li class="border-b py-4 px-4">
Understand good and bad documentation, and the art of effective documentation
</li>
<li class="border-b py-4 px-4">
Become well-versed with maintaining complex diagrams with ease
</li>
<li class="border-b py-4 px-4">
Learn how to set up a custom documentation system
</li>
<li class="border-b py-4 px-4">
Learn how to implement Mermaid diagrams in your workflows
</li>
<li class="border-b py-4 px-4">
Understand how to set up themes for a Mermaid diagram for an entire site
</li>
<li class="border-b py-4 px-4">
Discover how to draw different types of diagrams such as flowcharts, class
diagrams, Gantt charts, and more
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- Change the colour #f8fafc to match the previous section colour -->
<svg
class="wave-top"
viewBox="0 0 1439 147"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-1.000000, -14.000000)" fill-rule="nonzero">
<g class="wave" fill="#f8fafc">
<path
d="M1440,84 C1383.555,64.3 1342.555,51.3 1317,45 C1259.5,30.824 1206.707,25.526 1169,22 C1129.711,18.326 1044.426,18.475 980,22 C954.25,23.409 922.25,26.742 884,32 C845.122,37.787 818.455,42.121 804,45 C776.833,50.41 728.136,61.77 713,65 C660.023,76.309 621.544,87.729 584,94 C517.525,105.104 484.525,106.438 429,108 C379.49,106.484 342.823,104.484 319,102 C278.571,97.783 231.737,88.736 205,84 C154.629,75.076 86.296,57.743 0,32 L0,0 L1440,0 L1440,84 Z"
></path>
</g>
<g transform="translate(1.000000, 15.000000)" fill="#FFFFFF">
<g
transform="translate(719.500000, 68.500000) rotate(-180.000000) translate(-719.500000, -68.500000) "
>
<path
d="M0,0 C90.7283404,0.927527913 147.912752,27.187927 291.910178,59.9119003 C387.908462,81.7278826 543.605069,89.334785 759,82.7326078 C469.336065,156.254352 216.336065,153.6679 0,74.9732496"
opacity="0.100000001"
></path>
<path
d="M100,104.708498 C277.413333,72.2345949 426.147877,52.5246657 546.203633,45.5787101 C666.259389,38.6327546 810.524845,41.7979068 979,55.0741668 C931.069965,56.122511 810.303266,74.8455141 616.699903,111.243176 C423.096539,147.640838 250.863238,145.462612 100,104.708498 Z"
opacity="0.100000001"
></path>
<path
d="M1046,51.6521276 C1130.83045,29.328812 1279.08318,17.607883 1439,40.1656806 L1439,120 C1271.17211,77.9435312 1140.17211,55.1609071 1046,51.6521276 Z"
opacity="0.200000003"
></path>
</g>
</g>
</g>
</g>
</svg>
<section class="container mx-auto text-center py-6 mb-12">
<h1 class="w-full my-2 text-5xl font-bold leading-tight text-center text-white p-shadow">
Purchase The Official Guide to Mermaid.js
</h1>
<div class="w-full mb-4">
<div class="h-1 mx-auto bg-white w-1/6 opacity-25 my-0 py-0 rounded-t"></div>
</div>
<h3 class="my-4 text-3xl leading-tight">
<p class="mb-4 p-shadow">Written by Knut Sveidqvist and Ashish Jain.</p>
<p class="p-shadow">
Knut is the creator of Mermaid and both authors are active core team members of the
Mermaid open-source project.
</p>
</h3>
<a
href="https://www.amazon.com/Official-Guide-Mermaid-js-beautiful-flowcharts-dp-1801078025/dp/1801078025/ref=mt_other?_encoding=UTF8&amp;me=&amp;qid=1628153965"
>
<button
style="background: #ffa41c; border: 1px solid #ff8f00"
class="mx-auto lg:mx-0 hover:underline bg-white text-gray-800 font-bold rounded-full my-6 py-4 px-8 shadow-lg focus:outline-none focus:shadow-outline transform transition hover:scale-105 duration-300 ease-in-out"
>
Purchase Now on Amazon
</button>
</a>
</section>
<!--Footer-->
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

View File

@ -141,10 +141,6 @@ Square : +setMessages(List~string~ messages)
Square : +getMessages() List~string~
```
#### Return Type
Optionally you can end the method/function definition with the data type that will be returned.
#### Visibility
To describe the visibility (or encapsulation) of an attribute or method/function that is a part of a class (i.e. a class member), optional notation may be placed before that members' name:
@ -176,7 +172,7 @@ There are eight different types of relations defined for classes under UML which
| Type | Description |
| ------- | ------------- |
| `<\|--` | Inheritance |
| `\*--` | Composition |
| `*--` | Composition |
| `o--` | Aggregation |
| `-->` | Association |
| `--` | Link (Solid) |

View File

@ -160,25 +160,26 @@ erDiagram
}
```
The `type` and `name` values must begin with an alphabetic character and may contain digits, hyphens or underscores. Other than that, there are no restrictions, and there is no implicit set of valid data types.
The `type` and `name` values must begin with an alphabetic character and may contain digits, hyphens, underscores, parentheses and square brackets. Other than that, there are no restrictions, and there is no implicit set of valid data types.
#### Attribute Keys and Comments
Attributes may also have a `key` or comment defined. Keys can be "PK" or "FK", for Primary Key or Foreign Key. And a `comment` is defined by double quotes at the end of an attribute. Comments themselves cannot have double-quote characters in them.
Attributes may also have a `key` or comment defined. Keys can be "PK", "FK" or "UK", for Primary Key, Foreign Key or Unique Key. And a `comment` is defined by double quotes at the end of an attribute. Comments themselves cannot have double-quote characters in them.
```mermaid-example
erDiagram
CAR ||--o{ NAMED-DRIVER : allows
CAR {
string allowedDriver FK "The license of the allowed driver"
string registrationNumber
string registrationNumber UK
string make
string model
string[] parts
}
PERSON ||--o{ NAMED-DRIVER : is
PERSON {
string driversLicense PK "The license #"
string firstName
string(99) firstName "Only 99 characters are allowed"
string lastName
int age
}

View File

@ -112,7 +112,7 @@ More shapes will be added, beginning with the shapes available in flowcharts.
# Icons and classes
## icons
## Icons
As with flowcharts you can add icons to your nodes but with an updated syntax. The styling for the font based icons are added during the integration so that they are available for the web page. _This is not something a diagram author can do but has to be done with the site administrator or the integrator_. Once the icon fonts are in place you add them to the mind map nodes using the `::icon()` syntax. You place the classes for the icon within the parenthesis like in the following example where icons for material design and fontawesome 4 are displayed. The intention is that this approach should be used for all diagrams supporting icons. **Experimental feature:** This wider scope is also the reason Mindmaps are experimental as this syntax and approach could change.

View File

@ -470,61 +470,48 @@ describe('mermaidAPI', function () {
svgElement.id = svgId;
const tempDivElement = givenDocument.createElement('div'); // doesn't matter what the tag is in the test
tempDivElement.id = tempDivId;
const tempiFrameElement = givenDocument.createElement('div'); // doesn't matter what the tag is in the test
const tempiFrameElement = givenDocument.createElement('iframe'); // doesn't matter what the tag is in the test
tempiFrameElement.id = tempIframeId;
it('removes an existing element with given id', () => {
rootHtml.appendChild(svgElement);
rootHtml.append(tempDivElement);
rootHtml.append(tempiFrameElement);
expect(givenDocument.getElementById(svgElement.id)).toEqual(svgElement);
removeExistingElements(givenDocument, false, svgId, tempDivId, tempIframeId);
expect(givenDocument.getElementById(tempDivElement.id)).toEqual(tempDivElement);
expect(givenDocument.getElementById(tempiFrameElement.id)).toEqual(tempiFrameElement);
removeExistingElements(givenDocument, svgId, tempDivId, tempIframeId);
expect(givenDocument.getElementById(svgElement.id)).toBeNull();
expect(givenDocument.getElementById(tempDivElement.id)).toBeNull();
expect(givenDocument.getElementById(tempiFrameElement.id)).toBeNull();
});
describe('is in sandboxed mode', () => {
const inSandboxedMode = true;
it('removes an existing iframe element even if div element is absent', () => {
tempiFrameElement.append(svgElement);
rootHtml.append(tempiFrameElement);
it('removes an existing element with the given iFrame selector', () => {
tempiFrameElement.append(svgElement);
rootHtml.append(tempiFrameElement);
rootHtml.append(tempDivElement);
expect(givenDocument.getElementById(tempIframeId)).toEqual(tempiFrameElement);
expect(givenDocument.getElementById(tempDivId)).toEqual(tempDivElement);
expect(givenDocument.getElementById(svgId)).toEqual(svgElement);
removeExistingElements(
givenDocument,
inSandboxedMode,
svgId,
'#' + tempDivId,
'#' + tempIframeId
);
expect(givenDocument.getElementById(tempDivId)).toEqual(tempDivElement);
expect(givenDocument.getElementById(tempIframeId)).toBeNull();
expect(givenDocument.getElementById(svgId)).toBeNull();
});
expect(givenDocument.getElementById(tempIframeId)).toEqual(tempiFrameElement);
expect(givenDocument.getElementById(tempDivId)).toBeNull();
expect(givenDocument.getElementById(svgId)).toEqual(svgElement);
removeExistingElements(givenDocument, svgId, tempDivId, tempIframeId);
expect(givenDocument.getElementById(tempDivId)).toBeNull();
expect(givenDocument.getElementById(tempIframeId)).toBeNull();
expect(givenDocument.getElementById(svgId)).toBeNull();
});
describe('not in sandboxed mode', () => {
const inSandboxedMode = false;
it('removes an existing element with the given enclosing div selector', () => {
tempDivElement.append(svgElement);
rootHtml.append(tempDivElement);
rootHtml.append(tempiFrameElement);
it('removes both existing div and iframe elements when both are present', () => {
tempDivElement.append(svgElement);
rootHtml.append(tempDivElement);
rootHtml.append(tempiFrameElement);
expect(givenDocument.getElementById(tempIframeId)).toEqual(tempiFrameElement);
expect(givenDocument.getElementById(tempDivId)).toEqual(tempDivElement);
expect(givenDocument.getElementById(svgId)).toEqual(svgElement);
removeExistingElements(
givenDocument,
inSandboxedMode,
svgId,
'#' + tempDivId,
'#' + tempIframeId
);
expect(givenDocument.getElementById(tempIframeId)).toEqual(tempiFrameElement);
expect(givenDocument.getElementById(tempDivId)).toBeNull();
expect(givenDocument.getElementById(svgId)).toBeNull();
});
expect(givenDocument.getElementById(tempIframeId)).toEqual(tempiFrameElement);
expect(givenDocument.getElementById(tempDivId)).toEqual(tempDivElement);
expect(givenDocument.getElementById(svgId)).toEqual(svgElement);
removeExistingElements(givenDocument, svgId, tempDivId, tempIframeId);
expect(givenDocument.getElementById(tempIframeId)).toBeNull();
expect(givenDocument.getElementById(tempDivId)).toBeNull();
expect(givenDocument.getElementById(svgId)).toBeNull();
});
});

View File

@ -29,7 +29,7 @@ import utils, { directiveSanitizer } from './utils';
import DOMPurify from 'dompurify';
import { MermaidConfig } from './config.type';
import { evaluate } from './diagrams/common/common';
import isEmpty from 'lodash-es/isEmpty';
import isEmpty from 'lodash-es/isEmpty.js';
import { setA11yDiagramInfo, addSVGa11yTitleDescription } from './accessibility';
// diagram names that support classDef statements
@ -55,8 +55,8 @@ const IFRAME_SANDBOX_OPTS = 'allow-top-navigation-by-user-activation allow-popup
const IFRAME_NOT_SUPPORTED_MSG = 'The "iframe" tag is not supported by your browser.';
// DOMPurify settings for svgCode
const DOMPURE_TAGS = ['foreignobject'];
const DOMPURE_ATTR = ['dominant-baseline'];
const DOMPURIFY_TAGS = ['foreignobject'];
const DOMPURIFY_ATTR = ['dominant-baseline'];
// This is what is returned from getClasses(...) methods.
// It is slightly renamed to ..StyleClassDef instead of just ClassDef because "class" is a greatly ambiguous and overloaded word.
@ -328,29 +328,22 @@ function sandboxedIframe(parentNode: D3Element, iFrameId: string): D3Element {
* Remove any existing elements from the given document
*
* @param doc - the document to removed elements from
* @param isSandboxed - whether or not we are in sandboxed mode
* @param id - id for any existing SVG element
* @param divSelector - selector for any existing enclosing div element
* @param iFrameSelector - selector for any existing iFrame element
*/
export const removeExistingElements = (
doc: Document,
isSandboxed: boolean,
id: string,
divSelector: string,
iFrameSelector: string
divId: string,
iFrameId: string
) => {
// Remove existing SVG element if it exists
const existingSvg = doc.getElementById(id);
if (existingSvg) {
existingSvg.remove();
}
doc.getElementById(id)?.remove();
// Remove previous temporary element if it exists
const element = isSandboxed ? doc.querySelector(iFrameSelector) : doc.querySelector(divSelector);
if (element) {
element.remove();
}
// Both div and iframe needs to be cleared in case there is a config change happening between renders.
doc.getElementById(divId)?.remove();
doc.getElementById(iFrameId)?.remove();
};
/**
@ -443,7 +436,7 @@ const render = function (
// No svgContainingElement was provided
// If there is an existing element with the id, we remove it. This likely a previously rendered diagram
removeExistingElements(document, isSandboxed, id, iFrameID_selector, enclosingDivID_selector);
removeExistingElements(document, id, enclosingDivID, iFrameID);
// Add the temporary div used for rendering with the enclosingDivID.
// This temporary div will contain a svg with the id == id
@ -536,11 +529,11 @@ const render = function (
if (isSandboxed) {
const svgEl = root.select(enclosingDivID_selector + ' svg').node();
svgCode = putIntoIFrame(svgCode, svgEl);
} else if (isLooseSecurityLevel) {
} else if (!isLooseSecurityLevel) {
// Sanitize the svgCode using DOMPurify
svgCode = DOMPurify.sanitize(svgCode, {
ADD_TAGS: DOMPURE_TAGS,
ADD_ATTR: DOMPURE_ATTR,
ADD_TAGS: DOMPURIFY_TAGS,
ADD_ATTR: DOMPURIFY_ATTR,
});
}
@ -650,7 +643,7 @@ const renderAsync = async function (
// No svgContainingElement was provided
// If there is an existing element with the id, we remove it. This likely a previously rendered diagram
removeExistingElements(document, isSandboxed, id, iFrameID_selector, enclosingDivID_selector);
removeExistingElements(document, id, enclosingDivID, iFrameID);
// Add the temporary div used for rendering with the enclosingDivID.
// This temporary div will contain a svg with the id == id
@ -738,11 +731,11 @@ const renderAsync = async function (
if (isSandboxed) {
const svgEl = root.select(enclosingDivID_selector + ' svg').node();
svgCode = putIntoIFrame(svgCode, svgEl);
} else if (isLooseSecurityLevel) {
} else if (!isLooseSecurityLevel) {
// Sanitize the svgCode using DOMPurify
svgCode = DOMPurify.sanitize(svgCode, {
ADD_TAGS: DOMPURE_TAGS,
ADD_ATTR: DOMPURE_ATTR,
ADD_TAGS: DOMPURIFY_TAGS,
ADD_ATTR: DOMPURIFY_ATTR,
});
}

View File

@ -3,7 +3,7 @@ import utils from './utils';
import assignWithDepth from './assignWithDepth';
import { detectType } from './diagram-api/detectType';
import { addDiagrams } from './diagram-api/diagram-orchestration';
import memoize from 'lodash-es/memoize';
import memoize from 'lodash-es/memoize.js';
import { MockedD3 } from './tests/MockedD3';
addDiagrams();

View File

@ -21,7 +21,7 @@ import { log } from './logger';
import { detectType } from './diagram-api/detectType';
import assignWithDepth from './assignWithDepth';
import { MermaidConfig } from './config.type';
import memoize from 'lodash-es/memoize';
import memoize from 'lodash-es/memoize.js';
// Effectively an enum of the supported curve types, accessible by name
const d3CurveTypes = {
@ -194,7 +194,10 @@ export const isSubstringInArray = function (str: string, arr: string[]): number
* @param defaultCurve - The default curve to return
* @returns The curve factory to use
*/
export function interpolateToCurve(interpolate?: string, defaultCurve: CurveFactory): CurveFactory {
export function interpolateToCurve(
interpolate: string | undefined,
defaultCurve: CurveFactory
): CurveFactory {
if (!interpolate) {
return defaultCurve;
}

View File

@ -68,8 +68,8 @@ importers:
specifier: ^4.0.1
version: 4.0.1_bg25yee4qeg7mpleuvd346a3tq
esbuild:
specifier: ^0.15.13
version: 0.15.13
specifier: ^0.16.0
version: 0.16.7
eslint:
specifier: ^8.27.0
version: 8.27.0
@ -173,8 +173,8 @@ importers:
specifier: ^7.0.0
version: 7.6.1
dagre-d3-es:
specifier: 7.0.4
version: 7.0.4
specifier: 7.0.6
version: 7.0.6
dompurify:
specifier: 2.4.1
version: 2.4.1
@ -236,6 +236,9 @@ importers:
coveralls:
specifier: ^3.1.1
version: 3.1.1
cpy-cli:
specifier: ^4.2.0
version: 4.2.0
cspell:
specifier: ^6.14.3
version: 6.14.3
@ -285,11 +288,11 @@ importers:
specifier: ^1.0.0
version: 1.0.0
vitepress:
specifier: ^1.0.0-alpha.28
version: 1.0.0-alpha.28_tbpndr44ulefs3hehwpi2mkf2y
specifier: ^1.0.0-alpha.31
version: 1.0.0-alpha.31_tbpndr44ulefs3hehwpi2mkf2y
vitepress-plugin-search:
specifier: ^1.0.4-alpha.15
version: 1.0.4-alpha.15_s3edpouswd4dgoi2en7bdlrp54
specifier: ^1.0.4-alpha.16
version: 1.0.4-alpha.16_ifjhkyx3os4sbm7zdnvthc52am
packages/mermaid-example-diagram:
devDependencies:
@ -1727,6 +1730,96 @@ packages:
dev: true
optional: true
/@esbuild/android-arm/0.16.7:
resolution: {integrity: sha512-yhzDbiVcmq6T1/XEvdcJIVcXHdLjDJ5cQ0Dp9R9p9ERMBTeO1dR5tc8YYv8zwDeBw1xZm+Eo3MRo8cwclhBS0g==}
engines: {node: '>=12'}
cpu: [arm]
os: [android]
requiresBuild: true
dev: true
optional: true
/@esbuild/android-arm64/0.16.7:
resolution: {integrity: sha512-tYFw0lBJSEvLoGzzYh1kXuzoX1iPkbOk3O29VqzQb0HbOy7t/yw1hGkvwoJhXHwzQUPsShyYcTgRf6bDBcfnTw==}
engines: {node: '>=12'}
cpu: [arm64]
os: [android]
requiresBuild: true
dev: true
optional: true
/@esbuild/android-x64/0.16.7:
resolution: {integrity: sha512-3P2OuTxwAtM3k/yEWTNUJRjMPG1ce8rXs51GTtvEC5z1j8fC1plHeVVczdeHECU7aM2/Buc0MwZ6ciM/zysnWg==}
engines: {node: '>=12'}
cpu: [x64]
os: [android]
requiresBuild: true
dev: true
optional: true
/@esbuild/darwin-arm64/0.16.7:
resolution: {integrity: sha512-VUb9GK23z8jkosHU9yJNUgQpsfJn+7ZyBm6adi2Ec5/U241eR1tAn82QicnUzaFDaffeixiHwikjmnec/YXEZg==}
engines: {node: '>=12'}
cpu: [arm64]
os: [darwin]
requiresBuild: true
dev: true
optional: true
/@esbuild/darwin-x64/0.16.7:
resolution: {integrity: sha512-duterlv3tit3HI9vhzMWnSVaB1B6YsXpFq1Ntd6Fou82BB1l4tucYy3FI9dHv3tvtDuS0NiGf/k6XsdBqPZ01w==}
engines: {node: '>=12'}
cpu: [x64]
os: [darwin]
requiresBuild: true
dev: true
optional: true
/@esbuild/freebsd-arm64/0.16.7:
resolution: {integrity: sha512-9kkycpBFes/vhi7B7o0cf+q2WdJi+EpVzpVTqtWFNiutARWDFFLcB93J8PR1cG228sucsl3B+7Ts27izE6qiaQ==}
engines: {node: '>=12'}
cpu: [arm64]
os: [freebsd]
requiresBuild: true
dev: true
optional: true
/@esbuild/freebsd-x64/0.16.7:
resolution: {integrity: sha512-5Ahf6jzWXJ4J2uh9dpy5DKOO+PeRUE/9DMys6VuYfwgQzd6n5+pVFm58L2Z2gRe611RX6SdydnNaiIKM3svY7g==}
engines: {node: '>=12'}
cpu: [x64]
os: [freebsd]
requiresBuild: true
dev: true
optional: true
/@esbuild/linux-arm/0.16.7:
resolution: {integrity: sha512-QqJnyCfu5OF78Olt7JJSZ7OSv/B4Hf+ZJWp4kkq9xwMsgu7yWq3crIic8gGOpDYTqVKKMDAVDgRXy5Wd/nWZyQ==}
engines: {node: '>=12'}
cpu: [arm]
os: [linux]
requiresBuild: true
dev: true
optional: true
/@esbuild/linux-arm64/0.16.7:
resolution: {integrity: sha512-2wv0xYDskk2+MzIm/AEprDip39a23Chptc4mL7hsHg26P0gD8RUhzmDu0KCH2vMThUI1sChXXoK9uH0KYQKaDg==}
engines: {node: '>=12'}
cpu: [arm64]
os: [linux]
requiresBuild: true
dev: true
optional: true
/@esbuild/linux-ia32/0.16.7:
resolution: {integrity: sha512-APVYbEilKbD5ptmKdnIcXej2/+GdV65TfTjxR2Uk8t1EsOk49t6HapZW6DS/Bwlvh5hDwtLapdSumIVNGxgqLg==}
engines: {node: '>=12'}
cpu: [ia32]
os: [linux]
requiresBuild: true
dev: true
optional: true
/@esbuild/linux-loong64/0.15.13:
resolution: {integrity: sha512-+BoyIm4I8uJmH/QDIH0fu7MG0AEx9OXEDXnqptXCwKOlOqZiS4iraH1Nr7/ObLMokW3sOCeBNyD68ATcV9b9Ag==}
engines: {node: '>=12'}
@ -1736,6 +1829,114 @@ packages:
dev: true
optional: true
/@esbuild/linux-loong64/0.16.7:
resolution: {integrity: sha512-5wPUAGclplQrAW7EFr3F84Y/d++7G0KykohaF4p54+iNWhUnMVU8Bh2sxiEOXUy4zKIdpHByMgJ5/Ko6QhtTUw==}
engines: {node: '>=12'}
cpu: [loong64]
os: [linux]
requiresBuild: true
dev: true
optional: true
/@esbuild/linux-mips64el/0.16.7:
resolution: {integrity: sha512-hxzlXtWF6yWfkE/SMTscNiVqLOAn7fOuIF3q/kiZaXxftz1DhZW/HpnTmTTWrzrS7zJWQxHHT4QSxyAj33COmA==}
engines: {node: '>=12'}
cpu: [mips64el]
os: [linux]
requiresBuild: true
dev: true
optional: true
/@esbuild/linux-ppc64/0.16.7:
resolution: {integrity: sha512-WM83Dac0LdXty5xPhlOuCD5Egfk1xLND/oRLYeB7Jb/tY4kzFSDgLlq91wYbHua/s03tQGA9iXvyjgymMw62Vw==}
engines: {node: '>=12'}
cpu: [ppc64]
os: [linux]
requiresBuild: true
dev: true
optional: true
/@esbuild/linux-riscv64/0.16.7:
resolution: {integrity: sha512-3nkNnNg4Ax6MS/l8O8Ynq2lGEVJYyJ2EoY3PHjNJ4PuZ80EYLMrFTFZ4L/Hc16AxgtXKwmNP9TM0YKNiBzBiJQ==}
engines: {node: '>=12'}
cpu: [riscv64]
os: [linux]
requiresBuild: true
dev: true
optional: true
/@esbuild/linux-s390x/0.16.7:
resolution: {integrity: sha512-3SA/2VJuv0o1uD7zuqxEP+RrAyRxnkGddq0bwHQ98v1KNlzXD/JvxwTO3T6GM5RH6JUd29RTVQTOJfyzMkkppA==}
engines: {node: '>=12'}
cpu: [s390x]
os: [linux]
requiresBuild: true
dev: true
optional: true
/@esbuild/linux-x64/0.16.7:
resolution: {integrity: sha512-xi/tbqCqvPIzU+zJVyrpz12xqciTAPMi2fXEWGnapZymoGhuL2GIWIRXg4O2v5BXaYA5TSaiKYE14L0QhUTuQg==}
engines: {node: '>=12'}
cpu: [x64]
os: [linux]
requiresBuild: true
dev: true
optional: true
/@esbuild/netbsd-x64/0.16.7:
resolution: {integrity: sha512-NUsYbq3B+JdNKn8SXkItFvdes9qTwEoS3aLALtiWciW/ystiCKM20Fgv9XQBOXfhUHyh5CLEeZDXzLOrwBXuCQ==}
engines: {node: '>=12'}
cpu: [x64]
os: [netbsd]
requiresBuild: true
dev: true
optional: true
/@esbuild/openbsd-x64/0.16.7:
resolution: {integrity: sha512-qjwzsgeve9I8Tbsko2FEkdSk2iiezuNGFgipQxY/736NePXDaDZRodIejYGWOlbYXugdxb0nif5yvypH6lKBmA==}
engines: {node: '>=12'}
cpu: [x64]
os: [openbsd]
requiresBuild: true
dev: true
optional: true
/@esbuild/sunos-x64/0.16.7:
resolution: {integrity: sha512-mFWDz4RoBTzPphTCkM7Kc7Qpa0o/Z01acajR+Ai7LdfKgcP/C6jYOaKwv7nKzD0+MjOT20j7You9g4ozYy1dKQ==}
engines: {node: '>=12'}
cpu: [x64]
os: [sunos]
requiresBuild: true
dev: true
optional: true
/@esbuild/win32-arm64/0.16.7:
resolution: {integrity: sha512-m39UmX19RvEIuC8sYZ0M+eQtdXw4IePDSZ78ZQmYyFaXY9krq4YzQCK2XWIJomNLtg4q+W5aXr8bW3AbqWNoVg==}
engines: {node: '>=12'}
cpu: [arm64]
os: [win32]
requiresBuild: true
dev: true
optional: true
/@esbuild/win32-ia32/0.16.7:
resolution: {integrity: sha512-1cbzSEZA1fANwmT6rjJ4G1qQXHxCxGIcNYFYR9ctI82/prT38lnwSRZ0i5p/MVXksw9eMlHlet6pGu2/qkXFCg==}
engines: {node: '>=12'}
cpu: [ia32]
os: [win32]
requiresBuild: true
dev: true
optional: true
/@esbuild/win32-x64/0.16.7:
resolution: {integrity: sha512-QaQ8IH0JLacfGf5cf0HCCPnQuCTd/dAI257vXBgb/cccKGbH/6pVtI1gwhdAQ0Y48QSpTIFrh9etVyNdZY+zzw==}
engines: {node: '>=12'}
cpu: [x64]
os: [win32]
requiresBuild: true
dev: true
optional: true
/@eslint/eslintrc/1.3.3:
resolution: {integrity: sha512-uj3pT6Mg+3t39fvLrj8iuCIJ38zKO9FpGtJ4BBJebJhEwjoT+KLVNCcHT5QC9NGRIEi7fZ0ZR8YRb884auB4Lg==}
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@ -2853,15 +3054,15 @@ packages:
eslint-visitor-keys: 3.3.0
dev: true
/@vitejs/plugin-vue/3.2.0_vite@3.2.3+vue@3.2.41:
resolution: {integrity: sha512-E0tnaL4fr+qkdCNxJ+Xd0yM31UwMkQje76fsDVBBUCoGOUPexu2VDUYHL8P4CwV+zMvWw6nlRw19OnRKmYAJpw==}
/@vitejs/plugin-vue/4.0.0_vite@4.0.1+vue@3.2.45:
resolution: {integrity: sha512-e0X4jErIxAB5oLtDqbHvHpJe/uWNkdpYV83AOG2xo2tEVSzCzewgJMtREZM30wXnM5ls90hxiOtAuVU6H5JgbA==}
engines: {node: ^14.18.0 || >=16.0.0}
peerDependencies:
vite: ^3.0.0
vite: ^4.0.0
vue: ^3.2.25
dependencies:
vite: 3.2.3
vue: 3.2.41
vite: 4.0.1
vue: 3.2.45
dev: true
/@vitest/coverage-c8/0.25.1_oullksb5ic6y72oh2wekoaiuii:
@ -2889,114 +3090,113 @@ packages:
sirv: 2.0.2
dev: true
/@vue/compiler-core/3.2.41:
resolution: {integrity: sha512-oA4mH6SA78DT+96/nsi4p9DX97PHcNROxs51lYk7gb9Z4BPKQ3Mh+BLn6CQZBw857Iuhu28BfMSRHAlPvD4vlw==}
/@vue/compiler-core/3.2.45:
resolution: {integrity: sha512-rcMj7H+PYe5wBV3iYeUgbCglC+pbpN8hBLTJvRiK2eKQiWqu+fG9F+8sW99JdL4LQi7Re178UOxn09puSXvn4A==}
dependencies:
'@babel/parser': 7.19.1
'@vue/shared': 3.2.41
'@vue/shared': 3.2.45
estree-walker: 2.0.2
source-map: 0.6.1
dev: true
/@vue/compiler-dom/3.2.41:
resolution: {integrity: sha512-xe5TbbIsonjENxJsYRbDJvthzqxLNk+tb3d/c47zgREDa/PCp6/Y4gC/skM4H6PIuX5DAxm7fFJdbjjUH2QTMw==}
/@vue/compiler-dom/3.2.45:
resolution: {integrity: sha512-tyYeUEuKqqZO137WrZkpwfPCdiiIeXYCcJ8L4gWz9vqaxzIQRccTSwSWZ/Axx5YR2z+LvpUbmPNXxuBU45lyRw==}
dependencies:
'@vue/compiler-core': 3.2.41
'@vue/shared': 3.2.41
'@vue/compiler-core': 3.2.45
'@vue/shared': 3.2.45
dev: true
/@vue/compiler-sfc/3.2.41:
resolution: {integrity: sha512-+1P2m5kxOeaxVmJNXnBskAn3BenbTmbxBxWOtBq3mQTCokIreuMULFantBUclP0+KnzNCMOvcnKinqQZmiOF8w==}
requiresBuild: true
/@vue/compiler-sfc/3.2.45:
resolution: {integrity: sha512-1jXDuWah1ggsnSAOGsec8cFjT/K6TMZ0sPL3o3d84Ft2AYZi2jWJgRMjw4iaK0rBfA89L5gw427H4n1RZQBu6Q==}
dependencies:
'@babel/parser': 7.19.1
'@vue/compiler-core': 3.2.41
'@vue/compiler-dom': 3.2.41
'@vue/compiler-ssr': 3.2.41
'@vue/reactivity-transform': 3.2.41
'@vue/shared': 3.2.41
'@vue/compiler-core': 3.2.45
'@vue/compiler-dom': 3.2.45
'@vue/compiler-ssr': 3.2.45
'@vue/reactivity-transform': 3.2.45
'@vue/shared': 3.2.45
estree-walker: 2.0.2
magic-string: 0.25.9
postcss: 8.4.18
source-map: 0.6.1
dev: true
/@vue/compiler-ssr/3.2.41:
resolution: {integrity: sha512-Y5wPiNIiaMz/sps8+DmhaKfDm1xgj6GrH99z4gq2LQenfVQcYXmHIOBcs5qPwl7jaW3SUQWjkAPKMfQemEQZwQ==}
/@vue/compiler-ssr/3.2.45:
resolution: {integrity: sha512-6BRaggEGqhWht3lt24CrIbQSRD5O07MTmd+LjAn5fJj568+R9eUD2F7wMQJjX859seSlrYog7sUtrZSd7feqrQ==}
dependencies:
'@vue/compiler-dom': 3.2.41
'@vue/shared': 3.2.41
'@vue/compiler-dom': 3.2.45
'@vue/shared': 3.2.45
dev: true
/@vue/devtools-api/6.4.5:
resolution: {integrity: sha512-JD5fcdIuFxU4fQyXUu3w2KpAJHzTVdN+p4iOX2lMWSHMOoQdMAcpFLZzm9Z/2nmsoZ1a96QEhZ26e50xLBsgOQ==}
dev: true
/@vue/reactivity-transform/3.2.41:
resolution: {integrity: sha512-mK5+BNMsL4hHi+IR3Ft/ho6Za+L3FA5j8WvreJ7XzHrqkPq8jtF/SMo7tuc9gHjLDwKZX1nP1JQOKo9IEAn54A==}
/@vue/reactivity-transform/3.2.45:
resolution: {integrity: sha512-BHVmzYAvM7vcU5WmuYqXpwaBHjsS8T63jlKGWVtHxAHIoMIlmaMyurUSEs1Zcg46M4AYT5MtB1U274/2aNzjJQ==}
dependencies:
'@babel/parser': 7.19.1
'@vue/compiler-core': 3.2.41
'@vue/shared': 3.2.41
'@vue/compiler-core': 3.2.45
'@vue/shared': 3.2.45
estree-walker: 2.0.2
magic-string: 0.25.9
dev: true
/@vue/reactivity/3.2.41:
resolution: {integrity: sha512-9JvCnlj8uc5xRiQGZ28MKGjuCoPhhTwcoAdv3o31+cfGgonwdPNuvqAXLhlzu4zwqavFEG5tvaoINQEfxz+l6g==}
/@vue/reactivity/3.2.45:
resolution: {integrity: sha512-PRvhCcQcyEVohW0P8iQ7HDcIOXRjZfAsOds3N99X/Dzewy8TVhTCT4uXpAHfoKjVTJRA0O0K+6QNkDIZAxNi3A==}
dependencies:
'@vue/shared': 3.2.41
'@vue/shared': 3.2.45
dev: true
/@vue/runtime-core/3.2.41:
resolution: {integrity: sha512-0LBBRwqnI0p4FgIkO9q2aJBBTKDSjzhnxrxHYengkAF6dMOjeAIZFDADAlcf2h3GDALWnblbeprYYpItiulSVQ==}
/@vue/runtime-core/3.2.45:
resolution: {integrity: sha512-gzJiTA3f74cgARptqzYswmoQx0fIA+gGYBfokYVhF8YSXjWTUA2SngRzZRku2HbGbjzB6LBYSbKGIaK8IW+s0A==}
dependencies:
'@vue/reactivity': 3.2.41
'@vue/shared': 3.2.41
'@vue/reactivity': 3.2.45
'@vue/shared': 3.2.45
dev: true
/@vue/runtime-dom/3.2.41:
resolution: {integrity: sha512-U7zYuR1NVIP8BL6jmOqmapRAHovEFp7CSw4pR2FacqewXNGqZaRfHoNLQsqQvVQ8yuZNZtxSZy0FFyC70YXPpA==}
/@vue/runtime-dom/3.2.45:
resolution: {integrity: sha512-cy88YpfP5Ue2bDBbj75Cb4bIEZUMM/mAkDMfqDTpUYVgTf/kuQ2VQ8LebuZ8k6EudgH8pYhsGWHlY0lcxlvTwA==}
dependencies:
'@vue/runtime-core': 3.2.41
'@vue/shared': 3.2.41
'@vue/runtime-core': 3.2.45
'@vue/shared': 3.2.45
csstype: 2.6.21
dev: true
/@vue/server-renderer/3.2.41_vue@3.2.41:
resolution: {integrity: sha512-7YHLkfJdTlsZTV0ae5sPwl9Gn/EGr2hrlbcS/8naXm2CDpnKUwC68i1wGlrYAfIgYWL7vUZwk2GkYLQH5CvFig==}
/@vue/server-renderer/3.2.45_vue@3.2.45:
resolution: {integrity: sha512-ebiMq7q24WBU1D6uhPK//2OTR1iRIyxjF5iVq/1a5I1SDMDyDu4Ts6fJaMnjrvD3MqnaiFkKQj+LKAgz5WIK3g==}
peerDependencies:
vue: 3.2.41
vue: 3.2.45
dependencies:
'@vue/compiler-ssr': 3.2.41
'@vue/shared': 3.2.41
vue: 3.2.41
'@vue/compiler-ssr': 3.2.45
'@vue/shared': 3.2.45
vue: 3.2.45
dev: true
/@vue/shared/3.2.41:
resolution: {integrity: sha512-W9mfWLHmJhkfAmV+7gDjcHeAWALQtgGT3JErxULl0oz6R6+3ug91I7IErs93eCFhPCZPHBs4QJS7YWEV7A3sxw==}
/@vue/shared/3.2.45:
resolution: {integrity: sha512-Ewzq5Yhimg7pSztDV+RH1UDKBzmtqieXQlpTVm2AwraoRL/Rks96mvd8Vgi7Lj+h+TH8dv7mXD3FRZR3TUvbSg==}
dev: true
/@vueuse/core/9.4.0_vue@3.2.41:
resolution: {integrity: sha512-JzgenGj1ZF2BHOen5rsFiAyyI9sXAv7aKhNLlm9b7SwYQeKTcxTWdhudonURCSP3Egl9NQaRBzes2lv/1JUt/Q==}
/@vueuse/core/9.6.0_vue@3.2.45:
resolution: {integrity: sha512-qGUcjKQXHgN+jqXEgpeZGoxdCbIDCdVPz3QiF1uyecVGbMuM63o96I1GjYx5zskKgRI0FKSNsVWM7rwrRMTf6A==}
dependencies:
'@types/web-bluetooth': 0.0.16
'@vueuse/metadata': 9.4.0
'@vueuse/shared': 9.4.0_vue@3.2.41
vue-demi: 0.13.11_vue@3.2.41
'@vueuse/metadata': 9.6.0
'@vueuse/shared': 9.6.0_vue@3.2.45
vue-demi: 0.13.11_vue@3.2.45
transitivePeerDependencies:
- '@vue/composition-api'
- vue
dev: true
/@vueuse/metadata/9.4.0:
resolution: {integrity: sha512-7GKMdGAsJyQJl35MYOz/RDpP0FxuiZBRDSN79QIPbdqYx4Sd0sVTnIC68KJ6Oln0t0SouvSUMvRHuno216Ud2Q==}
/@vueuse/metadata/9.6.0:
resolution: {integrity: sha512-sIC8R+kWkIdpi5X2z2Gk8TRYzmczDwHRhEFfCu2P+XW2JdPoXrziqsGpDDsN7ykBx4ilwieS7JUIweVGhvZ93w==}
dev: true
/@vueuse/shared/9.4.0_vue@3.2.41:
resolution: {integrity: sha512-fTuem51KwMCnqUKkI8B57qAIMcFovtGgsCtAeqxIzH3i6nE9VYge+gVfneNHAAy7lj8twbkNfqQSygOPJTm4tQ==}
/@vueuse/shared/9.6.0_vue@3.2.45:
resolution: {integrity: sha512-/eDchxYYhkHnFyrb00t90UfjCx94kRHxc7J1GtBCqCG4HyPMX+krV9XJgVtWIsAMaxKVU4fC8NSUviG1JkwhUQ==}
dependencies:
vue-demi: 0.13.11_vue@3.2.41
vue-demi: 0.13.11_vue@3.2.45
transitivePeerDependencies:
- '@vue/composition-api'
- vue
@ -3295,6 +3495,14 @@ packages:
indent-string: 4.0.0
dev: true
/aggregate-error/4.0.1:
resolution: {integrity: sha512-0poP0T7el6Vq3rstR8Mn4V/IQrpBLO6POkUSrN7RhyY+GF/InCFShQzsQ39T25gkHhLgSLByyAz+Kjb+c2L98w==}
engines: {node: '>=12'}
dependencies:
clean-stack: 4.2.0
indent-string: 5.0.0
dev: true
/ajv-formats/2.1.1_ajv@8.11.0:
resolution: {integrity: sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==}
peerDependencies:
@ -3487,6 +3695,11 @@ packages:
engines: {node: '>=0.10.0'}
dev: true
/arrify/3.0.0:
resolution: {integrity: sha512-tLkvA81vQG/XqE2mjDkGQHoOINtMHtysSnemrmoGe6PydDPMRbVugqyk4A6V/WDWEfm3l+0d8anA9r8cv/5Jaw==}
engines: {node: '>=12'}
dev: true
/asn1/0.2.6:
resolution: {integrity: sha512-ix/FxPn0MDjeyJ7i/yoHGFt/EX6LyNbxSEhPPXODPL+KB0VPk86UYfL0lMdy+KCnv+fmvIzySwaK5COwqVbWTQ==}
dependencies:
@ -3821,6 +4034,16 @@ packages:
quick-lru: 4.0.1
dev: true
/camelcase-keys/7.0.2:
resolution: {integrity: sha512-Rjs1H+A9R+Ig+4E/9oyB66UC5Mj9Xq3N//vcLf2WzgdTi/3gUu3Z9KoqmlrEG4VuuLK8wJHofxzdQXz/knhiYg==}
engines: {node: '>=12'}
dependencies:
camelcase: 6.3.0
map-obj: 4.3.0
quick-lru: 5.1.1
type-fest: 1.4.0
dev: true
/camelcase/5.3.1:
resolution: {integrity: sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==}
engines: {node: '>=6'}
@ -3966,6 +4189,13 @@ packages:
engines: {node: '>=6'}
dev: true
/clean-stack/4.2.0:
resolution: {integrity: sha512-LYv6XPxoyODi36Dp976riBtSY27VmFo+MKqEU9QCCWyTrdEPDog+RWA7xQWHi6Vbp61j5c4cdzzX1NidnwtUWg==}
engines: {node: '>=12'}
dependencies:
escape-string-regexp: 5.0.0
dev: true
/clear-module/4.1.2:
resolution: {integrity: sha512-LWAxzHqdHsAZlPlEyJ2Poz6AIs384mPeqLVCru2p0BrP9G/kVGuhNyZYClLO6cXlnuJjzC8xtsJIuMjKqLXoAw==}
engines: {node: '>=8'}
@ -4315,6 +4545,39 @@ packages:
request: 2.88.2
dev: true
/cp-file/9.1.0:
resolution: {integrity: sha512-3scnzFj/94eb7y4wyXRWwvzLFaQp87yyfTnChIjlfYrVqp5lVO3E2hIJMeQIltUT0K2ZAB3An1qXcBmwGyvuwA==}
engines: {node: '>=10'}
dependencies:
graceful-fs: 4.2.10
make-dir: 3.1.0
nested-error-stacks: 2.1.1
p-event: 4.2.0
dev: true
/cpy-cli/4.2.0:
resolution: {integrity: sha512-b04b+cbdr29CdpREPKw/itrfjO43Ty0Aj7wRM6M6LoE4GJxZJCk9Xp+Eu1IqztkKh3LxIBt1tDplENsa6KYprg==}
engines: {node: '>=12.20'}
hasBin: true
dependencies:
cpy: 9.0.1
meow: 10.1.5
dev: true
/cpy/9.0.1:
resolution: {integrity: sha512-D9U0DR5FjTCN3oMTcFGktanHnAG5l020yvOCR1zKILmAyPP7I/9pl6NFgRbDcmSENtbK1sQLBz1p9HIOlroiNg==}
engines: {node: ^12.20.0 || ^14.17.0 || >=16.0.0}
dependencies:
arrify: 3.0.0
cp-file: 9.1.0
globby: 13.1.2
junk: 4.0.0
micromatch: 4.0.5
nested-error-stacks: 2.1.1
p-filter: 3.0.0
p-map: 5.5.0
dev: true
/create-require/1.1.1:
resolution: {integrity: sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==}
dev: true
@ -4899,10 +5162,46 @@ packages:
d3-zoom: 3.0.0
dev: false
/dagre-d3-es/7.0.4:
resolution: {integrity: sha512-fQL8ldFR9UYpecz48d1smrXNJ9zGUK38Vl5OzX6Fhn9LR+oQh0GzHRPQylP5kWawmMTKm1QtqcHMVySMJ5CYaQ==}
/d3/7.7.0:
resolution: {integrity: sha512-VEwHCMgMjD2WBsxeRGUE18RmzxT9Bn7ghDpzvTEvkLSBAKgTMydJjouZTjspgQfRHpPt/PB3EHWBa6SSyFQq4g==}
engines: {node: '>=12'}
dependencies:
d3: 7.6.1
d3-array: 3.2.0
d3-axis: 3.0.0
d3-brush: 3.0.0
d3-chord: 3.0.1
d3-color: 3.1.0
d3-contour: 4.0.0
d3-delaunay: 6.0.2
d3-dispatch: 3.0.1
d3-drag: 3.0.0
d3-dsv: 3.0.1
d3-ease: 3.0.1
d3-fetch: 3.0.1
d3-force: 3.0.0
d3-format: 3.1.0
d3-geo: 3.0.1
d3-hierarchy: 3.1.2
d3-interpolate: 3.0.1
d3-path: 3.0.1
d3-polygon: 3.0.1
d3-quadtree: 3.0.1
d3-random: 3.0.1
d3-scale: 4.0.2
d3-scale-chromatic: 3.0.0
d3-selection: 3.0.0
d3-shape: 3.1.0
d3-time: 3.0.0
d3-time-format: 4.1.0
d3-timer: 3.0.1
d3-transition: 3.0.1_d3-selection@3.0.0
d3-zoom: 3.0.0
dev: false
/dagre-d3-es/7.0.6:
resolution: {integrity: sha512-CaaE/nZh205ix+Up4xsnlGmpog5GGm81Upi2+/SBHxwNwrccBb3K51LzjZ1U6hgvOlAEUsVWf1xSTzCyKpJ6+Q==}
dependencies:
d3: 7.7.0
lodash-es: 4.17.21
dev: false
@ -5014,6 +5313,11 @@ packages:
engines: {node: '>=0.10.0'}
dev: true
/decamelize/5.0.1:
resolution: {integrity: sha512-VfxadyCECXgQlkoEAjeghAr5gY3Hf+IKjKb+X8tGVDtveCjN+USwprd2q3QXBR9T1+x2DG0XZF5/w+7HAtSaXA==}
engines: {node: '>=10'}
dev: true
/decimal.js/10.4.1:
resolution: {integrity: sha512-F29o+vci4DodHYT9UrR5IEbfBw9pE5eSapIJdTqXK5+6hq+t8VRxwQyKlW2i+KDKFkkJQRvFyI/QXD83h8LyQw==}
dev: true
@ -5505,6 +5809,36 @@ packages:
esbuild-windows-arm64: 0.15.13
dev: true
/esbuild/0.16.7:
resolution: {integrity: sha512-P6OBFYFSQOGzfApqCeYKqfKRRbCIRsdppTXFo4aAvtiW3o8TTyiIplBvHJI171saPAiy3WlawJHCveJVIOIx1A==}
engines: {node: '>=12'}
hasBin: true
requiresBuild: true
optionalDependencies:
'@esbuild/android-arm': 0.16.7
'@esbuild/android-arm64': 0.16.7
'@esbuild/android-x64': 0.16.7
'@esbuild/darwin-arm64': 0.16.7
'@esbuild/darwin-x64': 0.16.7
'@esbuild/freebsd-arm64': 0.16.7
'@esbuild/freebsd-x64': 0.16.7
'@esbuild/linux-arm': 0.16.7
'@esbuild/linux-arm64': 0.16.7
'@esbuild/linux-ia32': 0.16.7
'@esbuild/linux-loong64': 0.16.7
'@esbuild/linux-mips64el': 0.16.7
'@esbuild/linux-ppc64': 0.16.7
'@esbuild/linux-riscv64': 0.16.7
'@esbuild/linux-s390x': 0.16.7
'@esbuild/linux-x64': 0.16.7
'@esbuild/netbsd-x64': 0.16.7
'@esbuild/openbsd-x64': 0.16.7
'@esbuild/sunos-x64': 0.16.7
'@esbuild/win32-arm64': 0.16.7
'@esbuild/win32-ia32': 0.16.7
'@esbuild/win32-x64': 0.16.7
dev: true
/escalade/3.1.1:
resolution: {integrity: sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==}
engines: {node: '>=6'}
@ -5529,6 +5863,11 @@ packages:
engines: {node: '>=10'}
dev: true
/escape-string-regexp/5.0.0:
resolution: {integrity: sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==}
engines: {node: '>=12'}
dev: true
/escodegen/1.14.3:
resolution: {integrity: sha512-qFcX0XJkdg+PB3xjZZG/wKSuT1PnQWx57+TVSjIMmILd2yC/6ByYElPwJnslDsuWuSAp4AwJGumarAAmJch5Kw==}
engines: {node: '>=4.0'}
@ -6161,16 +6500,6 @@ packages:
resolution: {integrity: sha512-XGozTsMPYkm+6b5QL3Z9wQcJjNYxp0CYn3U1gO7dwD6PAqU1SVWZxI9CCg3z+ml3YfqdPnrBehaBrnH2AGKbNA==}
dev: true
/follow-redirects/1.15.2:
resolution: {integrity: sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==}
engines: {node: '>=4.0'}
peerDependencies:
debug: '*'
peerDependenciesMeta:
debug:
optional: true
dev: true
/follow-redirects/1.15.2_debug@4.3.2:
resolution: {integrity: sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==}
engines: {node: '>=4.0'}
@ -6715,7 +7044,7 @@ packages:
engines: {node: '>=8.0.0'}
dependencies:
eventemitter3: 4.0.7
follow-redirects: 1.15.2
follow-redirects: 1.15.2_debug@4.3.2
requires-port: 1.0.0
transitivePeerDependencies:
- debug
@ -6827,6 +7156,11 @@ packages:
engines: {node: '>=8'}
dev: true
/indent-string/5.0.0:
resolution: {integrity: sha512-m6FAo/spmsW2Ab2fU35JTYwtOKa2yAwXSwgjSv1TJzh4Mh7mC3lzAOVLBprb72XsTrgkEIsl7YrFNAiDiRhIGg==}
engines: {node: '>=12'}
dev: true
/inflight/1.0.6:
resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==}
dependencies:
@ -7788,6 +8122,11 @@ packages:
verror: 1.10.0
dev: true
/junk/4.0.0:
resolution: {integrity: sha512-ojtSU++zLJ3jQG9bAYjg94w+/DOJtRyD7nPaerMFrBhmdVmiV5/exYH5t4uHga4G/95nT6hr1OJoKIFbYbrW5w==}
engines: {node: '>=12.20'}
dev: true
/keyv/4.5.0:
resolution: {integrity: sha512-2YvuMsA+jnFGtBareKqgANOEKe1mk3HKiXu2fRmAfyxG0MJAywNhi5ttWA3PMjl4NmpyjZNbFifR2vNjW1znfA==}
dependencies:
@ -8174,6 +8513,24 @@ packages:
fs-monkey: 1.0.3
dev: true
/meow/10.1.5:
resolution: {integrity: sha512-/d+PQ4GKmGvM9Bee/DPa8z3mXs/pkvJE2KEThngVNOqtmljC6K7NMPxtc2JeZYTmpWb9k/TmxjeL18ez3h7vCw==}
engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
dependencies:
'@types/minimist': 1.2.2
camelcase-keys: 7.0.2
decamelize: 5.0.1
decamelize-keys: 1.1.0
hard-rejection: 2.1.0
minimist-options: 4.1.0
normalize-package-data: 3.0.3
read-pkg-up: 8.0.0
redent: 4.0.0
trim-newlines: 4.0.2
type-fest: 1.4.0
yargs-parser: 20.2.9
dev: true
/meow/8.1.2:
resolution: {integrity: sha512-r85E3NdZ+mpYk1C6RjPFEMSE+s1iZMuHtsHAqY0DT3jZczl0diWUZ8g6oU7h0M9cD2EL+PzaYghhCLzR0ZNn5Q==}
engines: {node: '>=10'}
@ -8543,6 +8900,10 @@ packages:
resolution: {integrity: sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==}
dev: true
/nested-error-stacks/2.1.1:
resolution: {integrity: sha512-9iN1ka/9zmX1ZvLV9ewJYEk9h7RyRRtqdK0woXcqohu8EWIerfPUjYJPg0ULy0UqP7cslmdGc8xKDJcojlKiaw==}
dev: true
/netmask/2.0.2:
resolution: {integrity: sha512-dBpDMdxv9Irdq66304OLfEmQ9tbNRFnFTuZiLo+bD+r332bBmMJ8GBLXklIXXgxd3+v9+KUnZaUR5PJMa75Gsg==}
engines: {node: '>= 0.4.0'}
@ -8729,6 +9090,20 @@ packages:
engines: {node: '>=8'}
dev: true
/p-event/4.2.0:
resolution: {integrity: sha512-KXatOjCRXXkSePPb1Nbi0p0m+gQAwdlbhi4wQKJPI1HsMQS9g+Sqp2o+QHziPr7eYJyOZet836KoHEVM1mwOrQ==}
engines: {node: '>=8'}
dependencies:
p-timeout: 3.2.0
dev: true
/p-filter/3.0.0:
resolution: {integrity: sha512-QtoWLjXAW++uTX67HZQz1dbTpqBfiidsB6VtQUC9iR85S120+s0T5sO6s+B5MLzFcZkrEd/DGMmCjR+f2Qpxwg==}
engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
dependencies:
p-map: 5.5.0
dev: true
/p-finally/1.0.0:
resolution: {integrity: sha512-LICb2p9CB7FS+0eR1oqWnHhp0FljGLZCWBE9aix0Uye9W8LTQPwMTYVGWQWIw9RdQiDg4+epXQODwIYJtSJaow==}
engines: {node: '>=4'}
@ -8781,6 +9156,13 @@ packages:
aggregate-error: 3.1.0
dev: true
/p-map/5.5.0:
resolution: {integrity: sha512-VFqfGDHlx87K66yZrNdI4YGtD70IRyd+zSvgks6mzHPRNkoKy+9EKP4SFC77/vTTQYmRmti7dvqC+m5jBrBAcg==}
engines: {node: '>=12'}
dependencies:
aggregate-error: 4.0.1
dev: true
/p-retry/4.6.2:
resolution: {integrity: sha512-312Id396EbJdvRONlngUx0NydfrIQ5lsYu0znKVUzVvArzEIt08V1qhtyESbGVd1FGX7UKtiFp5uwKZdM8wIuQ==}
engines: {node: '>=8'}
@ -8789,6 +9171,13 @@ packages:
retry: 0.13.1
dev: true
/p-timeout/3.2.0:
resolution: {integrity: sha512-rhIwUycgwwKcP9yTOOFK/AKsAopjjCakVqLHePO3CC6Mir1Z99xT+R63jZxAT5lFZLa2inS5h+ZS2GvR99/FBg==}
engines: {node: '>=8'}
dependencies:
p-finally: 1.0.0
dev: true
/p-try/2.2.0:
resolution: {integrity: sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==}
engines: {node: '>=6'}
@ -9031,6 +9420,15 @@ packages:
source-map-js: 1.0.2
dev: true
/postcss/8.4.20:
resolution: {integrity: sha512-6Q04AXR1212bXr5fh03u8aAwbLxAQNGQ/Q1LNa0VfOI06ZAlhPHtQvE4OIdpj4kLThXilalPnmDSOD65DcHt+g==}
engines: {node: ^10 || ^12 || >=14}
dependencies:
nanoid: 3.3.4
picocolors: 1.0.0
source-map-js: 1.0.2
dev: true
/preact/10.11.0:
resolution: {integrity: sha512-Fk6+vB2kb6mSJfDgODq0YDhMfl0HNtK5+Uc9QqECO4nlyPAQwCI+BKyWO//idA7ikV7o+0Fm6LQmNuQi1wXI1w==}
dev: true
@ -9216,6 +9614,15 @@ packages:
type-fest: 0.8.1
dev: true
/read-pkg-up/8.0.0:
resolution: {integrity: sha512-snVCqPczksT0HS2EC+SxUndvSzn6LRCwpfSvLrIfR5BKDQQZMaI6jPRC9dYvYFDRAuFEAnkwww8kBBNE/3VvzQ==}
engines: {node: '>=12'}
dependencies:
find-up: 5.0.0
read-pkg: 6.0.0
type-fest: 1.4.0
dev: true
/read-pkg/5.2.0:
resolution: {integrity: sha512-Ug69mNOpfvKDAc2Q8DRpMjjzdtrnv9HcSMX+4VsZxD1aZ6ZzrIE7rlzXBtWTyhULSMKg076AW6WR5iZpD0JiOg==}
engines: {node: '>=8'}
@ -9226,6 +9633,16 @@ packages:
type-fest: 0.6.0
dev: true
/read-pkg/6.0.0:
resolution: {integrity: sha512-X1Fu3dPuk/8ZLsMhEj5f4wFAF0DWoK7qhGJvgaijocXxBmSToKfbFtqbxMO7bVjNA1dmE5huAzjXj/ey86iw9Q==}
engines: {node: '>=12'}
dependencies:
'@types/normalize-package-data': 2.4.1
normalize-package-data: 3.0.3
parse-json: 5.2.0
type-fest: 1.4.0
dev: true
/readable-stream/1.1.14:
resolution: {integrity: sha512-+MeVjFf4L44XUkhM1eYbD8fyEsxcV81pqMSR5gblfcLCHfZvbrqy4/qYHE+/R5HoBUT11WV5O08Cr1n3YXkWVQ==}
dependencies:
@ -9278,6 +9695,14 @@ packages:
strip-indent: 3.0.0
dev: true
/redent/4.0.0:
resolution: {integrity: sha512-tYkDkVVtYkSVhuQ4zBgfvciymHaeuel+zFKXShfDnFP5SyVEP7qo70Rf1jTOTCx3vGNAbnEi/xFkcfQVMIBWag==}
engines: {node: '>=12'}
dependencies:
indent-string: 5.0.0
strip-indent: 4.0.0
dev: true
/regexp-tree/0.1.24:
resolution: {integrity: sha512-s2aEVuLhvnVJW6s/iPgEGK6R+/xngd2jNQ+xy4bXNDKxZKJH6jpPHY6kVeVv1IeLCHgswRj+Kl3ELaDjG6V1iw==}
hasBin: true
@ -9494,6 +9919,14 @@ packages:
fsevents: 2.3.2
dev: true
/rollup/3.7.4:
resolution: {integrity: sha512-jN9rx3k5pfg9H9al0r0y1EYKSeiRANZRYX32SuNXAnKzh6cVyf4LZVto1KAuDnbHT03E1CpsgqDKaqQ8FZtgxw==}
engines: {node: '>=14.18.0', npm: '>=8.0.0'}
hasBin: true
optionalDependencies:
fsevents: 2.3.2
dev: true
/run-parallel/1.2.0:
resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
dependencies:
@ -9847,6 +10280,7 @@ packages:
/sourcemap-codec/1.4.8:
resolution: {integrity: sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==}
deprecated: Please use @jridgewell/sourcemap-codec instead
dev: true
/spawn-command/0.0.2-1:
@ -10071,6 +10505,13 @@ packages:
min-indent: 1.0.1
dev: true
/strip-indent/4.0.0:
resolution: {integrity: sha512-mnVSV2l+Zv6BLpSD/8V87CW/y9EmmbYzGCIavsnsI6/nwn26DwffM/yztm30Z/I2DY9wdS3vXVCMnHDgZaVNoA==}
engines: {node: '>=12'}
dependencies:
min-indent: 1.0.1
dev: true
/strip-json-comments/3.1.1:
resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
engines: {node: '>=8'}
@ -10295,6 +10736,11 @@ packages:
engines: {node: '>=8'}
dev: true
/trim-newlines/4.0.2:
resolution: {integrity: sha512-GJtWyq9InR/2HRiLZgpIKv+ufIKrVrvjQWEj7PxAXNc5dwbNJkqhAUoAGgzRmULAnoOM5EIpveYd3J2VeSAIew==}
engines: {node: '>=12'}
dev: true
/trough/2.1.0:
resolution: {integrity: sha512-AqTiAOLcj85xS7vQ8QkAV41hPDIJ71XJB4RCUrzo/1GM2CQwhkJGaf9Hgr7BOugMRpgGUrqRg/DrBDl4H40+8g==}
dev: true
@ -10433,6 +10879,11 @@ packages:
engines: {node: '>=8'}
dev: true
/type-fest/1.4.0:
resolution: {integrity: sha512-yGSza74xk0UG8k+pLh5oeoYirvIiWo5t0/o3zHHAO2tRDiZcxWP7fywNlXhqb6/r6sWvwi+RsyQMWhVLe4BVuA==}
engines: {node: '>=10'}
dev: true
/type-is/1.6.18:
resolution: {integrity: sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==}
engines: {node: '>= 0.6'}
@ -10748,8 +11199,41 @@ packages:
fsevents: 2.3.2
dev: true
/vitepress-plugin-search/1.0.4-alpha.15_s3edpouswd4dgoi2en7bdlrp54:
resolution: {integrity: sha512-Ef/VkhTVYlECVI0H9Ck6745UNPfYFppAqnlxVSMJXdxP2vjOZ5TYNczlTTQ2p9dh16MFw/IurbL1/GrG4nXdNw==}
/vite/4.0.1:
resolution: {integrity: sha512-kZQPzbDau35iWOhy3CpkrRC7It+HIHtulAzBhMqzGHKRf/4+vmh8rPDDdv98SWQrFWo6//3ozwsRmwQIPZsK9g==}
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:
esbuild: 0.16.7
postcss: 8.4.20
resolve: 1.22.1
rollup: 3.7.4
optionalDependencies:
fsevents: 2.3.2
dev: true
/vitepress-plugin-search/1.0.4-alpha.16_ifjhkyx3os4sbm7zdnvthc52am:
resolution: {integrity: sha512-D+rs7bwzH+IO+7T9NlxvqSOqmSKbN1yHxUoqClTy5JH+DomL3CcrH2TgSvXc2s58ztlc1dC07c7THo4cNjlUAg==}
engines: {node: ^14.13.1 || ^16.7.0 || >=18}
peerDependencies:
flexsearch: ^0.7.31
@ -10762,23 +11246,23 @@ packages:
flexsearch: 0.7.31
markdown-it: 13.0.1
vite: 3.2.3
vitepress: 1.0.0-alpha.28_tbpndr44ulefs3hehwpi2mkf2y
vue: 3.2.41
vitepress: 1.0.0-alpha.31_tbpndr44ulefs3hehwpi2mkf2y
vue: 3.2.45
dev: true
/vitepress/1.0.0-alpha.28_tbpndr44ulefs3hehwpi2mkf2y:
resolution: {integrity: sha512-pvbLssDMgLUN1terajmPlFBxHSDGO4DqwexKbjFyr7LeELerVuwGrG6F2J1hxmwOlbpLd1kHXEDqGm9JX/kTDQ==}
/vitepress/1.0.0-alpha.31_tbpndr44ulefs3hehwpi2mkf2y:
resolution: {integrity: sha512-FWFXLs7WLbFbemxjBWo2S2+qUZCIoeLLyAKfVUpIu3LUB8oQ8cyIANRGO6f6zsM51u2bvJU9Sm+V6Z0WjOWS2Q==}
hasBin: true
dependencies:
'@docsearch/css': 3.3.0
'@docsearch/js': 3.3.0_tbpndr44ulefs3hehwpi2mkf2y
'@vitejs/plugin-vue': 3.2.0_vite@3.2.3+vue@3.2.41
'@vitejs/plugin-vue': 4.0.0_vite@4.0.1+vue@3.2.45
'@vue/devtools-api': 6.4.5
'@vueuse/core': 9.4.0_vue@3.2.41
'@vueuse/core': 9.6.0_vue@3.2.45
body-scroll-lock: 4.0.0-beta.0
shiki: 0.11.1
vite: 3.2.3
vue: 3.2.41
vite: 4.0.1
vue: 3.2.45
transitivePeerDependencies:
- '@algolia/client-search'
- '@types/node'
@ -10930,7 +11414,7 @@ packages:
resolution: {integrity: sha512-fmL7V1eiDBFRRnu+gfRWTzyPpNIHJTc4mWnFkwBUmO9U3KPgJAmTx7oxi2bl/Rh6HLdU7+4C9wlj0k2E4AdKFQ==}
dev: true
/vue-demi/0.13.11_vue@3.2.41:
/vue-demi/0.13.11_vue@3.2.45:
resolution: {integrity: sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==}
engines: {node: '>=12'}
hasBin: true
@ -10942,17 +11426,17 @@ packages:
'@vue/composition-api':
optional: true
dependencies:
vue: 3.2.41
vue: 3.2.45
dev: true
/vue/3.2.41:
resolution: {integrity: sha512-uuuvnrDXEeZ9VUPljgHkqB5IaVO8SxhPpqF2eWOukVrBnRBx2THPSGQBnVRt0GrIG1gvCmFXMGbd7FqcT1ixNQ==}
/vue/3.2.45:
resolution: {integrity: sha512-9Nx/Mg2b2xWlXykmCwiTUCWHbWIj53bnkizBxKai1g61f2Xit700A1ljowpTIM11e3uipOeiPcSqnmBg6gyiaA==}
dependencies:
'@vue/compiler-dom': 3.2.41
'@vue/compiler-sfc': 3.2.41
'@vue/runtime-dom': 3.2.41
'@vue/server-renderer': 3.2.41_vue@3.2.41
'@vue/shared': 3.2.41
'@vue/compiler-dom': 3.2.45
'@vue/compiler-sfc': 3.2.45
'@vue/runtime-dom': 3.2.45
'@vue/server-renderer': 3.2.45_vue@3.2.45
'@vue/shared': 3.2.45
dev: true
/w3c-hr-time/1.0.2: