mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-01-14 06:43:25 +08:00
merge upstream
This commit is contained in:
Nicholas Bollweg
commit
7156cf4c71
@ -1,6 +0,0 @@
|
||||
---
|
||||
'mermaid': patch
|
||||
---
|
||||
|
||||
Fix for self loops in cluster
|
||||
Supporting legacy defaultRenderer directive
|
||||
@ -1,5 +0,0 @@
|
||||
---
|
||||
'mermaid': minor
|
||||
---
|
||||
|
||||
feat(er): allow multi-line relationship labels
|
||||
@ -1,9 +0,0 @@
|
||||
---
|
||||
'mermaid': minor
|
||||
'@mermaid-js/docs': patch
|
||||
'@mermaid-js/parser': minor
|
||||
---
|
||||
|
||||
New Diagram: Architecture
|
||||
|
||||
Adds architecture diagrams which allows users to show relations between services.
|
||||
@ -1,6 +0,0 @@
|
||||
---
|
||||
'@mermaid-js/layout-elk': patch
|
||||
---
|
||||
|
||||
fix: Updates to the default elk configuration
|
||||
feat: exposing cycleBreakingStrategy to the configuration so that it can be modified suing the configuration.
|
||||
@ -1,5 +0,0 @@
|
||||
---
|
||||
'mermaid': patch
|
||||
---
|
||||
|
||||
chore: Move icons to architecture, remove full icon sets to reduce bundle size
|
||||
@ -30,6 +30,7 @@ Foswiki
|
||||
Gitea
|
||||
graphlib
|
||||
Grav
|
||||
icones
|
||||
iconify
|
||||
Inkdrop
|
||||
jiti
|
||||
|
||||
6
.github/workflows/release.yml
vendored
6
.github/workflows/release.yml
vendored
@ -12,9 +12,11 @@ permissions: # added using https://github.com/step-security/secure-repo
|
||||
|
||||
jobs:
|
||||
release:
|
||||
if: github.repository == 'mermaid-js/mermaid'
|
||||
permissions:
|
||||
contents: write # for changesets/action to push to the repo
|
||||
pull-requests: write # for changesets/action to create PRs
|
||||
contents: write # to create release (changesets/action)
|
||||
id-token: write # OpenID Connect token needed for provenance
|
||||
pull-requests: write # to create pull request (changesets/action)
|
||||
name: Release
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
|
||||
@ -73,7 +73,7 @@ export const imgSnapshotTest = (
|
||||
|
||||
export const urlSnapshotTest = (
|
||||
url: string,
|
||||
options: CypressMermaidConfig,
|
||||
options: CypressMermaidConfig = {},
|
||||
_api = false,
|
||||
validation?: any
|
||||
): void => {
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { imgSnapshotTest } from '../../helpers/util.ts';
|
||||
import { imgSnapshotTest, urlSnapshotTest } from '../../helpers/util.ts';
|
||||
|
||||
describe.skip('architecture diagram', () => {
|
||||
it('should render a simple architecture diagram with groups', () => {
|
||||
@ -172,3 +172,9 @@ describe.skip('architecture diagram', () => {
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe('architecture - external', () => {
|
||||
it('should allow adding external icons', () => {
|
||||
urlSnapshotTest('http://localhost:9000/architecture-external.html');
|
||||
});
|
||||
});
|
||||
|
||||
52
cypress/platform/architecture-external.html
Normal file
52
cypress/platform/architecture-external.html
Normal file
@ -0,0 +1,52 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<title>Architecture Mermaid Test Page</title>
|
||||
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
|
||||
<style>
|
||||
div.mermaid {
|
||||
/* font-family: 'trebuchet ms', verdana, arial; */
|
||||
font-family: 'Courier New', Courier, monospace !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h2>External Icons Demo</h2>
|
||||
<pre class="mermaid">
|
||||
architecture-beta
|
||||
service s3(logos:aws-s3)[Cloud Store]
|
||||
service ec2(logos:aws-ec2)[Server]
|
||||
service api(logos:aws-api-gateway)[Api Gateway]
|
||||
service fa(fa:image)[Font Awesome Icon]
|
||||
</pre>
|
||||
|
||||
<script type="module">
|
||||
import mermaid from './mermaid.esm.mjs';
|
||||
mermaid.initialize({
|
||||
startOnLoad: false,
|
||||
logLevel: 0,
|
||||
});
|
||||
mermaid.registerIconPacks([
|
||||
{
|
||||
name: 'logos',
|
||||
loader: () =>
|
||||
fetch('https://unpkg.com/@iconify-json/logos/icons.json').then((res) => res.json()),
|
||||
},
|
||||
{
|
||||
name: 'fa',
|
||||
loader: () =>
|
||||
fetch('https://unpkg.com/@iconify-json/fa6-regular/icons.json').then((res) =>
|
||||
res.json()
|
||||
),
|
||||
},
|
||||
]);
|
||||
await mermaid.run();
|
||||
if (window.Cypress) {
|
||||
window.rendered = true;
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -226,27 +226,31 @@
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<!-- <h2>AWS Icon Demo</h2>
|
||||
<h2>External Icons Demo</h2>
|
||||
<pre class="mermaid">
|
||||
architecture-beta
|
||||
service s3(aws:s3)[Cloud Store]
|
||||
service ec2(aws:ec2)[Server]
|
||||
service wave(aws:wavelength)[Wave]
|
||||
service droplet(do:droplet)[Droplet]
|
||||
service repo(gh:github)[Repository]
|
||||
</pre> -->
|
||||
service s3(logos:aws-s3)[Cloud Store]
|
||||
service ec2(logos:aws-ec2)[Server]
|
||||
service api(logos:aws-api-gateway)[Api Gateway]
|
||||
service fa(fa:image)[Font Awesome Icon]
|
||||
</pre>
|
||||
|
||||
<script type="module">
|
||||
import mermaid from './mermaid.esm.mjs';
|
||||
mermaid.initialize({
|
||||
theme: 'base',
|
||||
startOnLoad: true,
|
||||
logLevel: 0,
|
||||
architecture: {
|
||||
iconSize: 80,
|
||||
mermaid.registerIconPacks([
|
||||
{
|
||||
name: 'logos',
|
||||
loader: () =>
|
||||
fetch('https://unpkg.com/@iconify-json/logos/icons.json').then((res) => res.json()),
|
||||
},
|
||||
// iconLibraries: ['aws:common', 'aws:full', 'github', 'digital-ocean'],
|
||||
});
|
||||
{
|
||||
name: 'fa',
|
||||
loader: () =>
|
||||
fetch('https://unpkg.com/@iconify-json/fa6-regular/icons.json').then((res) =>
|
||||
res.json()
|
||||
),
|
||||
},
|
||||
]);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -28,7 +28,7 @@ page.
|
||||
|
||||
#### Defined in
|
||||
|
||||
[packages/mermaid/src/mermaid.ts:435](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L435)
|
||||
[packages/mermaid/src/mermaid.ts:436](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L436)
|
||||
|
||||
---
|
||||
|
||||
@ -59,7 +59,7 @@ A graph definition key
|
||||
|
||||
#### Defined in
|
||||
|
||||
[packages/mermaid/src/mermaid.ts:437](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L437)
|
||||
[packages/mermaid/src/mermaid.ts:438](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L438)
|
||||
|
||||
---
|
||||
|
||||
@ -89,7 +89,7 @@ Use [initialize](mermaid.Mermaid.md#initialize) and [run](mermaid.Mermaid.md#run
|
||||
|
||||
#### Defined in
|
||||
|
||||
[packages/mermaid/src/mermaid.ts:430](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L430)
|
||||
[packages/mermaid/src/mermaid.ts:431](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L431)
|
||||
|
||||
---
|
||||
|
||||
@ -116,7 +116,7 @@ This function should be called before the run function.
|
||||
|
||||
#### Defined in
|
||||
|
||||
[packages/mermaid/src/mermaid.ts:434](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L434)
|
||||
[packages/mermaid/src/mermaid.ts:435](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L435)
|
||||
|
||||
---
|
||||
|
||||
@ -130,7 +130,7 @@ Use [parse](mermaid.Mermaid.md#parse) and [render](mermaid.Mermaid.md#render) in
|
||||
|
||||
#### Defined in
|
||||
|
||||
[packages/mermaid/src/mermaid.ts:424](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L424)
|
||||
[packages/mermaid/src/mermaid.ts:425](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L425)
|
||||
|
||||
---
|
||||
|
||||
@ -180,7 +180,7 @@ Error if the diagram is invalid and parseOptions.suppressErrors is false or not
|
||||
|
||||
#### Defined in
|
||||
|
||||
[packages/mermaid/src/mermaid.ts:425](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L425)
|
||||
[packages/mermaid/src/mermaid.ts:426](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L426)
|
||||
|
||||
---
|
||||
|
||||
@ -190,7 +190,7 @@ Error if the diagram is invalid and parseOptions.suppressErrors is false or not
|
||||
|
||||
#### Defined in
|
||||
|
||||
[packages/mermaid/src/mermaid.ts:419](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L419)
|
||||
[packages/mermaid/src/mermaid.ts:420](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L420)
|
||||
|
||||
---
|
||||
|
||||
@ -218,7 +218,31 @@ Used to register external diagram types.
|
||||
|
||||
#### Defined in
|
||||
|
||||
[packages/mermaid/src/mermaid.ts:433](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L433)
|
||||
[packages/mermaid/src/mermaid.ts:434](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L434)
|
||||
|
||||
---
|
||||
|
||||
### registerIconPacks
|
||||
|
||||
• **registerIconPacks**: (`iconLoaders`: `IconLoader`\[]) => `void`
|
||||
|
||||
#### Type declaration
|
||||
|
||||
▸ (`iconLoaders`): `void`
|
||||
|
||||
##### Parameters
|
||||
|
||||
| Name | Type |
|
||||
| :------------ | :-------------- |
|
||||
| `iconLoaders` | `IconLoader`\[] |
|
||||
|
||||
##### Returns
|
||||
|
||||
`void`
|
||||
|
||||
#### Defined in
|
||||
|
||||
[packages/mermaid/src/mermaid.ts:439](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L439)
|
||||
|
||||
---
|
||||
|
||||
@ -242,7 +266,7 @@ Used to register external diagram types.
|
||||
|
||||
#### Defined in
|
||||
|
||||
[packages/mermaid/src/mermaid.ts:432](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L432)
|
||||
[packages/mermaid/src/mermaid.ts:433](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L433)
|
||||
|
||||
---
|
||||
|
||||
@ -268,7 +292,7 @@ Used to register external diagram types.
|
||||
|
||||
#### Defined in
|
||||
|
||||
[packages/mermaid/src/mermaid.ts:426](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L426)
|
||||
[packages/mermaid/src/mermaid.ts:427](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L427)
|
||||
|
||||
---
|
||||
|
||||
@ -316,7 +340,7 @@ Renders the mermaid diagrams
|
||||
|
||||
#### Defined in
|
||||
|
||||
[packages/mermaid/src/mermaid.ts:431](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L431)
|
||||
[packages/mermaid/src/mermaid.ts:432](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L432)
|
||||
|
||||
---
|
||||
|
||||
@ -351,7 +375,7 @@ to it (eg. dart interop wrapper). (Initially there is no parseError member of me
|
||||
|
||||
#### Defined in
|
||||
|
||||
[packages/mermaid/src/mermaid.ts:436](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L436)
|
||||
[packages/mermaid/src/mermaid.ts:437](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L437)
|
||||
|
||||
---
|
||||
|
||||
@ -361,4 +385,4 @@ to it (eg. dart interop wrapper). (Initially there is no parseError member of me
|
||||
|
||||
#### Defined in
|
||||
|
||||
[packages/mermaid/src/mermaid.ts:418](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L418)
|
||||
[packages/mermaid/src/mermaid.ts:419](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L419)
|
||||
|
||||
@ -18,7 +18,7 @@ The nodes to render. If this is set, `querySelector` will be ignored.
|
||||
|
||||
#### Defined in
|
||||
|
||||
[packages/mermaid/src/mermaid.ts:48](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L48)
|
||||
[packages/mermaid/src/mermaid.ts:49](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L49)
|
||||
|
||||
---
|
||||
|
||||
@ -44,7 +44,7 @@ A callback to call after each diagram is rendered.
|
||||
|
||||
#### Defined in
|
||||
|
||||
[packages/mermaid/src/mermaid.ts:52](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L52)
|
||||
[packages/mermaid/src/mermaid.ts:53](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L53)
|
||||
|
||||
---
|
||||
|
||||
@ -56,7 +56,7 @@ The query selector to use when finding elements to render. Default: `".mermaid"`
|
||||
|
||||
#### Defined in
|
||||
|
||||
[packages/mermaid/src/mermaid.ts:44](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L44)
|
||||
[packages/mermaid/src/mermaid.ts:45](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L45)
|
||||
|
||||
---
|
||||
|
||||
@ -68,4 +68,4 @@ If `true`, errors will be logged to the console, but not thrown. Default: `false
|
||||
|
||||
#### Defined in
|
||||
|
||||
[packages/mermaid/src/mermaid.ts:56](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L56)
|
||||
[packages/mermaid/src/mermaid.ts:57](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L57)
|
||||
|
||||
@ -87,4 +87,4 @@
|
||||
|
||||
#### Defined in
|
||||
|
||||
[packages/mermaid/src/mermaid.ts:440](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L440)
|
||||
[packages/mermaid/src/mermaid.ts:442](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L442)
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
>
|
||||
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/architecture.md](../../packages/mermaid/src/docs/syntax/architecture.md).
|
||||
|
||||
# Architecture Diagrams Documentation (v\<MERMAID_RELEASE_VERSION>+)
|
||||
# Architecture Diagrams Documentation (v11.1.0+)
|
||||
|
||||
> In the context of mermaid-js, the architecture diagram is used to show the relationship between services and resources commonly found within the Cloud or CI/CD deployments. In an architecture diagram, services (nodes) are connected by edges. Related services can be placed within groups to better illustrate how they are organized.
|
||||
|
||||
@ -191,4 +191,85 @@ architecture-beta
|
||||
bottom_gateway:T -- B:junctionRight
|
||||
```
|
||||
|
||||
## Configuration
|
||||
## Icons
|
||||
|
||||
By default, architecture diagram supports the following icons: `cloud`, `database`, `disk`, `internet`, `server`.
|
||||
Users can use any of the 200,000+ icons available in iconify.design, or add their own custom icons, by following the steps below.
|
||||
|
||||
The icon packs available can be found at [icones.js.org](https://icones.js.org/).
|
||||
We use the name defined when registering the icon pack, to override the prefix field of the iconify pack. This allows the user to use shorter names for the icons. It also allows us to load a particular pack only when it is used in a diagram.
|
||||
|
||||
Using JSON file directly from CDN:
|
||||
|
||||
```js
|
||||
import mermaid from 'CDN/mermaid.esm.mjs';
|
||||
mermaid.registerIconPacks([
|
||||
{
|
||||
name: 'logos',
|
||||
loader: () =>
|
||||
fetch('https://unpkg.com/@iconify-json/logos/icons.json').then((res) => res.json()),
|
||||
},
|
||||
]);
|
||||
```
|
||||
|
||||
Using packages and a bundler:
|
||||
|
||||
```bash
|
||||
npm install @iconify-json/logos
|
||||
```
|
||||
|
||||
With lazy loading
|
||||
|
||||
```js
|
||||
import mermaid from 'mermaid';
|
||||
|
||||
mermaid.registerIconPacks([
|
||||
{
|
||||
name: 'logos',
|
||||
loader: () => import('@iconify-json/logos').then((module) => module.icons),
|
||||
},
|
||||
]);
|
||||
```
|
||||
|
||||
Without lazy loading
|
||||
|
||||
```js
|
||||
import mermaid from 'mermaid';
|
||||
import { icons } from '@iconify-json/logos';
|
||||
mermaid.registerIconPacks([
|
||||
{
|
||||
name: icons.prefix, // To use the prefix defined in the icon pack
|
||||
icons,
|
||||
},
|
||||
]);
|
||||
```
|
||||
|
||||
After the icons are installed, they can be used in the architecture diagram by using the format "name:icon-name", where name is the value used when registering the icon pack.
|
||||
|
||||
```mermaid-example
|
||||
architecture-beta
|
||||
group api(logos:aws-lambda)[API]
|
||||
|
||||
service db(logos:aws-aurora)[Database] in api
|
||||
service disk1(logos:aws-glacier)[Storage] in api
|
||||
service disk2(logos:aws-s3)[Storage] in api
|
||||
service server(logos:aws-ec2)[Server] in api
|
||||
|
||||
db:L -- R:server
|
||||
disk1:T -- B:server
|
||||
disk2:T -- B:db
|
||||
```
|
||||
|
||||
```mermaid
|
||||
architecture-beta
|
||||
group api(logos:aws-lambda)[API]
|
||||
|
||||
service db(logos:aws-aurora)[Database] in api
|
||||
service disk1(logos:aws-glacier)[Storage] in api
|
||||
service disk2(logos:aws-s3)[Storage] in api
|
||||
service server(logos:aws-ec2)[Server] in api
|
||||
|
||||
db:L -- R:server
|
||||
disk1:T -- B:server
|
||||
disk2:T -- B:db
|
||||
```
|
||||
|
||||
@ -286,7 +286,7 @@ erDiagram
|
||||
|
||||
- If you want the relationship label to be more than one word, you must use double quotes around the phrase
|
||||
- If you don't want a label at all on a relationship, you must use an empty double-quoted string
|
||||
- (v\<MERMAID_RELEASE_VERSION>+) If you want a multi-line label on a relationship, use `<br />` between the two lines (`"first line<br />second line"`)
|
||||
- (v11.1.0+) If you want a multi-line label on a relationship, use `<br />` between the two lines (`"first line<br />second line"`)
|
||||
|
||||
## Styling
|
||||
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
"version": "10.2.4",
|
||||
"description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
|
||||
"type": "module",
|
||||
"packageManager": "pnpm@9.7.1+sha512.faf344af2d6ca65c4c5c8c2224ea77a81a5e8859cbc4e06b1511ddce2f0151512431dd19e6aff31f2c6a8f5f2aced9bd2273e1fed7dd4de1868984059d2c4247",
|
||||
"packageManager": "pnpm@9.9.0+sha512.60c18acd138bff695d339be6ad13f7e936eea6745660d4cc4a776d5247c540d0edee1a563695c183a66eb917ef88f2b4feb1fc25f32a7adcadc7aaf3438e99c1",
|
||||
"keywords": [
|
||||
"diagram",
|
||||
"markdown",
|
||||
@ -89,7 +89,7 @@
|
||||
"cpy-cli": "^5.0.0",
|
||||
"cross-env": "^7.0.3",
|
||||
"cspell": "^8.6.0",
|
||||
"cypress": "^13.11.0",
|
||||
"cypress": "^13.14.1",
|
||||
"cypress-image-snapshot": "^4.0.1",
|
||||
"esbuild": "^0.21.5",
|
||||
"eslint": "^9.4.0",
|
||||
@ -117,7 +117,6 @@
|
||||
"markdown-table": "^3.0.3",
|
||||
"nyc": "^15.1.0",
|
||||
"path-browserify": "^1.0.1",
|
||||
"pnpm": "^8.15.5",
|
||||
"prettier": "^3.2.5",
|
||||
"prettier-plugin-jsdoc": "^1.3.0",
|
||||
"rimraf": "^5.0.5",
|
||||
|
||||
@ -1,5 +1,14 @@
|
||||
# @mermaid-js/layout-elk
|
||||
|
||||
## 0.1.3
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- [#5810](https://github.com/mermaid-js/mermaid/pull/5810) [`33a809f`](https://github.com/mermaid-js/mermaid/commit/33a809f09a9aa1f84ba06201ab550bad81c3ff65) Thanks [@knsv](https://github.com/knsv)! - fix: Updates to the default elk configuration
|
||||
feat: exposing cycleBreakingStrategy to the configuration so that it can be modified suing the configuration.
|
||||
- Updated dependencies [[`6ecdf7b`](https://github.com/mermaid-js/mermaid/commit/6ecdf7be688efdc53c52fea3ba891327242bc890), [`28bd07f`](https://github.com/mermaid-js/mermaid/commit/28bd07fdeb4fc981107d21317ec6160b31f80116), [`8e640da`](https://github.com/mermaid-js/mermaid/commit/8e640da5436e8ae013b11b1c1821a9afcc15d0d3), [`256a148`](https://github.com/mermaid-js/mermaid/commit/256a148bbf484fc7db6c19f94dd69d5d268ee048), [`16faef4`](https://github.com/mermaid-js/mermaid/commit/16faef4613b91a7d3a98a1563c25b57f9238acc7)]:
|
||||
- mermaid@11.1.0
|
||||
|
||||
## 0.1.2
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@mermaid-js/layout-elk",
|
||||
"version": "0.1.2",
|
||||
"version": "0.1.3",
|
||||
"description": "ELK layout engine for mermaid",
|
||||
"module": "dist/mermaid-layout-elk.core.mjs",
|
||||
"types": "dist/layouts.d.ts",
|
||||
|
||||
@ -1,5 +1,27 @@
|
||||
# mermaid
|
||||
|
||||
## 11.1.0
|
||||
|
||||
### Minor Changes
|
||||
|
||||
- [#5793](https://github.com/mermaid-js/mermaid/pull/5793) [`6ecdf7b`](https://github.com/mermaid-js/mermaid/commit/6ecdf7be688efdc53c52fea3ba891327242bc890) Thanks [@sidharthv96](https://github.com/sidharthv96)! - feat: Add support for iconify icons
|
||||
|
||||
- [#5711](https://github.com/mermaid-js/mermaid/pull/5711) [`8e640da`](https://github.com/mermaid-js/mermaid/commit/8e640da5436e8ae013b11b1c1821a9afcc15d0d3) Thanks [@NicolasNewman](https://github.com/NicolasNewman)! - feat(er): allow multi-line relationship labels
|
||||
|
||||
- [#5452](https://github.com/mermaid-js/mermaid/pull/5452) [`256a148`](https://github.com/mermaid-js/mermaid/commit/256a148bbf484fc7db6c19f94dd69d5d268ee048) Thanks [@NicolasNewman](https://github.com/NicolasNewman)! - New Diagram: Architecture
|
||||
|
||||
Adds architecture diagrams which allows users to show relations between services.
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- [#5810](https://github.com/mermaid-js/mermaid/pull/5810) [`28bd07f`](https://github.com/mermaid-js/mermaid/commit/28bd07fdeb4fc981107d21317ec6160b31f80116) Thanks [@knsv](https://github.com/knsv)! - Fix for self loops in cluster
|
||||
Supporting legacy defaultRenderer directive
|
||||
|
||||
- [#5789](https://github.com/mermaid-js/mermaid/pull/5789) [`16faef4`](https://github.com/mermaid-js/mermaid/commit/16faef4613b91a7d3a98a1563c25b57f9238acc7) Thanks [@sidharthv96](https://github.com/sidharthv96)! - chore: Move icons to architecture, remove full icon sets to reduce bundle size
|
||||
|
||||
- Updated dependencies [[`256a148`](https://github.com/mermaid-js/mermaid/commit/256a148bbf484fc7db6c19f94dd69d5d268ee048), [`7d8143b`](https://github.com/mermaid-js/mermaid/commit/7d8143b917ee3562149a0e0a821ed2d6f29cc05d)]:
|
||||
- @mermaid-js/parser@0.3.0
|
||||
|
||||
## 11.0.2
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "mermaid",
|
||||
"version": "11.0.2",
|
||||
"version": "11.1.0",
|
||||
"description": "Markdown-ish syntax for generating flowcharts, mindmaps, sequence diagrams, class diagrams, gantt charts, git graphs and more.",
|
||||
"type": "module",
|
||||
"module": "./dist/mermaid.core.mjs",
|
||||
@ -68,6 +68,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@braintree/sanitize-url": "^7.0.1",
|
||||
"@iconify/utils": "^2.1.32",
|
||||
"@mermaid-js/parser": "workspace:^",
|
||||
"cytoscape": "^3.29.2",
|
||||
"cytoscape-cose-bilkent": "^4.1.0",
|
||||
@ -88,8 +89,9 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@adobe/jsonschema2md": "^8.0.0",
|
||||
"@types/cytoscape-fcose": "^2.2.4",
|
||||
"@iconify/types": "^2.0.0",
|
||||
"@types/cytoscape": "^3.21.4",
|
||||
"@types/cytoscape-fcose": "^2.2.4",
|
||||
"@types/d3": "^7.4.3",
|
||||
"@types/d3-sankey": "^0.12.4",
|
||||
"@types/d3-scale": "^4.0.8",
|
||||
|
||||
@ -0,0 +1,43 @@
|
||||
import { unknownIcon } from '$root/rendering-util/icons.js';
|
||||
import type { IconifyJSON } from '@iconify/types';
|
||||
|
||||
const wrapIcon = (icon: string) => {
|
||||
return `<g><rect width="80" height="80" style="fill: #087ebf; stroke-width: 0px;"/>${icon}</g>`;
|
||||
};
|
||||
|
||||
export const architectureIcons: IconifyJSON = {
|
||||
prefix: 'mermaid-architecture',
|
||||
height: 80,
|
||||
width: 80,
|
||||
icons: {
|
||||
database: {
|
||||
body: wrapIcon(
|
||||
'<path id="b" data-name="4" d="m20,57.86c0,3.94,8.95,7.14,20,7.14s20-3.2,20-7.14" style="fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 2px;"/><path id="c" data-name="3" d="m20,45.95c0,3.94,8.95,7.14,20,7.14s20-3.2,20-7.14" style="fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 2px;"/><path id="d" data-name="2" d="m20,34.05c0,3.94,8.95,7.14,20,7.14s20-3.2,20-7.14" style="fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 2px;"/><ellipse id="e" data-name="1" cx="40" cy="22.14" rx="20" ry="7.14" style="fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 2px;"/><line x1="20" y1="57.86" x2="20" y2="22.14" style="fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 2px;"/><line x1="60" y1="57.86" x2="60" y2="22.14" style="fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 2px;"/>'
|
||||
),
|
||||
},
|
||||
server: {
|
||||
body: wrapIcon(
|
||||
'<rect x="17.5" y="17.5" width="45" height="45" rx="2" ry="2" style="fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 2px;"/><line x1="17.5" y1="32.5" x2="62.5" y2="32.5" style="fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 2px;"/><line x1="17.5" y1="47.5" x2="62.5" y2="47.5" style="fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 2px;"/><g><path d="m56.25,25c0,.27-.45.5-1,.5h-10.5c-.55,0-1-.23-1-.5s.45-.5,1-.5h10.5c.55,0,1,.23,1,.5Z" style="fill: #fff; stroke-width: 0px;"/><path d="m56.25,25c0,.27-.45.5-1,.5h-10.5c-.55,0-1-.23-1-.5s.45-.5,1-.5h10.5c.55,0,1,.23,1,.5Z" style="fill: none; stroke: #fff; stroke-miterlimit: 10;"/></g><g><path d="m56.25,40c0,.27-.45.5-1,.5h-10.5c-.55,0-1-.23-1-.5s.45-.5,1-.5h10.5c.55,0,1,.23,1,.5Z" style="fill: #fff; stroke-width: 0px;"/><path d="m56.25,40c0,.27-.45.5-1,.5h-10.5c-.55,0-1-.23-1-.5s.45-.5,1-.5h10.5c.55,0,1,.23,1,.5Z" style="fill: none; stroke: #fff; stroke-miterlimit: 10;"/></g><g><path d="m56.25,55c0,.27-.45.5-1,.5h-10.5c-.55,0-1-.23-1-.5s.45-.5,1-.5h10.5c.55,0,1,.23,1,.5Z" style="fill: #fff; stroke-width: 0px;"/><path d="m56.25,55c0,.27-.45.5-1,.5h-10.5c-.55,0-1-.23-1-.5s.45-.5,1-.5h10.5c.55,0,1,.23,1,.5Z" style="fill: none; stroke: #fff; stroke-miterlimit: 10;"/></g><g><circle cx="32.5" cy="25" r=".75" style="fill: #fff; stroke: #fff; stroke-miterlimit: 10;"/><circle cx="27.5" cy="25" r=".75" style="fill: #fff; stroke: #fff; stroke-miterlimit: 10;"/><circle cx="22.5" cy="25" r=".75" style="fill: #fff; stroke: #fff; stroke-miterlimit: 10;"/></g><g><circle cx="32.5" cy="40" r=".75" style="fill: #fff; stroke: #fff; stroke-miterlimit: 10;"/><circle cx="27.5" cy="40" r=".75" style="fill: #fff; stroke: #fff; stroke-miterlimit: 10;"/><circle cx="22.5" cy="40" r=".75" style="fill: #fff; stroke: #fff; stroke-miterlimit: 10;"/></g><g><circle cx="32.5" cy="55" r=".75" style="fill: #fff; stroke: #fff; stroke-miterlimit: 10;"/><circle cx="27.5" cy="55" r=".75" style="fill: #fff; stroke: #fff; stroke-miterlimit: 10;"/><circle cx="22.5" cy="55" r=".75" style="fill: #fff; stroke: #fff; stroke-miterlimit: 10;"/></g>'
|
||||
),
|
||||
},
|
||||
disk: {
|
||||
body: wrapIcon(
|
||||
'<rect x="20" y="15" width="40" height="50" rx="1" ry="1" style="fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 2px;"/><ellipse cx="24" cy="19.17" rx=".8" ry=".83" style="fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 2px;"/><ellipse cx="56" cy="19.17" rx=".8" ry=".83" style="fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 2px;"/><ellipse cx="24" cy="60.83" rx=".8" ry=".83" style="fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 2px;"/><ellipse cx="56" cy="60.83" rx=".8" ry=".83" style="fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 2px;"/><ellipse cx="40" cy="33.75" rx="14" ry="14.58" style="fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 2px;"/><ellipse cx="40" cy="33.75" rx="4" ry="4.17" style="fill: #fff; stroke: #fff; stroke-miterlimit: 10; stroke-width: 2px;"/><path d="m37.51,42.52l-4.83,13.22c-.26.71-1.1,1.02-1.76.64l-4.18-2.42c-.66-.38-.81-1.26-.33-1.84l9.01-10.8c.88-1.05,2.56-.08,2.09,1.2Z" style="fill: #fff; stroke-width: 0px;"/>'
|
||||
),
|
||||
},
|
||||
internet: {
|
||||
body: wrapIcon(
|
||||
'<circle cx="40" cy="40" r="22.5" style="fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 2px;"/><line x1="40" y1="17.5" x2="40" y2="62.5" style="fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 2px;"/><line x1="17.5" y1="40" x2="62.5" y2="40" style="fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 2px;"/><path d="m39.99,17.51c-15.28,11.1-15.28,33.88,0,44.98" style="fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 2px;"/><path d="m40.01,17.51c15.28,11.1,15.28,33.88,0,44.98" style="fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 2px;"/><line x1="19.75" y1="30.1" x2="60.25" y2="30.1" style="fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 2px;"/><line x1="19.75" y1="49.9" x2="60.25" y2="49.9" style="fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 2px;"/>'
|
||||
),
|
||||
},
|
||||
cloud: {
|
||||
body: wrapIcon(
|
||||
'<path d="m65,47.5c0,2.76-2.24,5-5,5H20c-2.76,0-5-2.24-5-5,0-1.87,1.03-3.51,2.56-4.36-.04-.21-.06-.42-.06-.64,0-2.6,2.48-4.74,5.65-4.97,1.65-4.51,6.34-7.76,11.85-7.76.86,0,1.69.08,2.5.23,2.09-1.57,4.69-2.5,7.5-2.5,6.1,0,11.19,4.38,12.28,10.17,2.14.56,3.72,2.51,3.72,4.83,0,.03,0,.07-.01.1,2.29.46,4.01,2.48,4.01,4.9Z" style="fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 2px;"/>'
|
||||
),
|
||||
},
|
||||
unknown: unknownIcon,
|
||||
blank: {
|
||||
body: wrapIcon(''),
|
||||
},
|
||||
},
|
||||
};
|
||||
@ -1,3 +1,4 @@
|
||||
import { registerIconPacks } from '$root/rendering-util/icons.js';
|
||||
import type { Position } from 'cytoscape';
|
||||
import cytoscape from 'cytoscape';
|
||||
import type { FcoseLayoutOptions } from 'cytoscape-fcose';
|
||||
@ -9,6 +10,7 @@ import { log } from '../../logger.js';
|
||||
import { selectSvgElement } from '../../rendering-util/selectSvgElement.js';
|
||||
import { setupGraphViewbox } from '../../setupGraphViewbox.js';
|
||||
import { getConfigField } from './architectureDb.js';
|
||||
import { architectureIcons } from './architectureIcons.js';
|
||||
import type {
|
||||
ArchitectureDataStructures,
|
||||
ArchitectureJunction,
|
||||
@ -30,11 +32,14 @@ import {
|
||||
isArchitectureDirectionY,
|
||||
nodeData,
|
||||
} from './architectureTypes.js';
|
||||
import { defaultIconLibrary } from './icons/default.js';
|
||||
import { registerIconLibrary } from './icons/svgRegister.js';
|
||||
import { drawEdges, drawGroups, drawJunctions, drawServices } from './svgDraw.js';
|
||||
|
||||
registerIconLibrary(defaultIconLibrary);
|
||||
registerIconPacks([
|
||||
{
|
||||
name: architectureIcons.prefix,
|
||||
icons: architectureIcons,
|
||||
},
|
||||
]);
|
||||
cytoscape.use(fcose);
|
||||
|
||||
function addServices(services: ArchitectureService[], cy: cytoscape.Core) {
|
||||
|
||||
@ -1,99 +0,0 @@
|
||||
import { createIcon, type IconLibrary } from './svgRegister.js';
|
||||
|
||||
export const defaultIconLibrary: IconLibrary = {
|
||||
database: createIcon(
|
||||
`<g>
|
||||
<rect width="80" height="80" style="fill: #087ebf; stroke-width: 0px;"/>
|
||||
<path id="b" data-name="4" d="m20,57.86c0,3.94,8.95,7.14,20,7.14s20-3.2,20-7.14" style="fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 2px;"/>
|
||||
<path id="c" data-name="3" d="m20,45.95c0,3.94,8.95,7.14,20,7.14s20-3.2,20-7.14" style="fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 2px;"/>
|
||||
<path id="d" data-name="2" d="m20,34.05c0,3.94,8.95,7.14,20,7.14s20-3.2,20-7.14" style="fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 2px;"/>
|
||||
<ellipse id="e" data-name="1" cx="40" cy="22.14" rx="20" ry="7.14" style="fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 2px;"/>
|
||||
<line x1="20" y1="57.86" x2="20" y2="22.14" style="fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 2px;"/>
|
||||
<line x1="60" y1="57.86" x2="60" y2="22.14" style="fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 2px;"/>
|
||||
</g>`,
|
||||
80
|
||||
),
|
||||
server: createIcon(
|
||||
`<g>
|
||||
<rect width="80" height="80" style="fill: #087ebf; stroke-width: 0px;"/>
|
||||
<rect x="17.5" y="17.5" width="45" height="45" rx="2" ry="2" style="fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 2px;"/>
|
||||
<line x1="17.5" y1="32.5" x2="62.5" y2="32.5" style="fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 2px;"/>
|
||||
<line x1="17.5" y1="47.5" x2="62.5" y2="47.5" style="fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 2px;"/>
|
||||
<g>
|
||||
<path d="m56.25,25c0,.27-.45.5-1,.5h-10.5c-.55,0-1-.23-1-.5s.45-.5,1-.5h10.5c.55,0,1,.23,1,.5Z" style="fill: #fff; stroke-width: 0px;"/>
|
||||
<path d="m56.25,25c0,.27-.45.5-1,.5h-10.5c-.55,0-1-.23-1-.5s.45-.5,1-.5h10.5c.55,0,1,.23,1,.5Z" style="fill: none; stroke: #fff; stroke-miterlimit: 10;"/>
|
||||
</g>
|
||||
<g>
|
||||
<path d="m56.25,40c0,.27-.45.5-1,.5h-10.5c-.55,0-1-.23-1-.5s.45-.5,1-.5h10.5c.55,0,1,.23,1,.5Z" style="fill: #fff; stroke-width: 0px;"/>
|
||||
<path d="m56.25,40c0,.27-.45.5-1,.5h-10.5c-.55,0-1-.23-1-.5s.45-.5,1-.5h10.5c.55,0,1,.23,1,.5Z" style="fill: none; stroke: #fff; stroke-miterlimit: 10;"/>
|
||||
</g>
|
||||
<g>
|
||||
<path d="m56.25,55c0,.27-.45.5-1,.5h-10.5c-.55,0-1-.23-1-.5s.45-.5,1-.5h10.5c.55,0,1,.23,1,.5Z" style="fill: #fff; stroke-width: 0px;"/>
|
||||
<path d="m56.25,55c0,.27-.45.5-1,.5h-10.5c-.55,0-1-.23-1-.5s.45-.5,1-.5h10.5c.55,0,1,.23,1,.5Z" style="fill: none; stroke: #fff; stroke-miterlimit: 10;"/>
|
||||
</g>
|
||||
<g>
|
||||
<circle cx="32.5" cy="25" r=".75" style="fill: #fff; stroke: #fff; stroke-miterlimit: 10;"/>
|
||||
<circle cx="27.5" cy="25" r=".75" style="fill: #fff; stroke: #fff; stroke-miterlimit: 10;"/>
|
||||
<circle cx="22.5" cy="25" r=".75" style="fill: #fff; stroke: #fff; stroke-miterlimit: 10;"/>
|
||||
</g>
|
||||
<g>
|
||||
<circle cx="32.5" cy="40" r=".75" style="fill: #fff; stroke: #fff; stroke-miterlimit: 10;"/>
|
||||
<circle cx="27.5" cy="40" r=".75" style="fill: #fff; stroke: #fff; stroke-miterlimit: 10;"/>
|
||||
<circle cx="22.5" cy="40" r=".75" style="fill: #fff; stroke: #fff; stroke-miterlimit: 10;"/>
|
||||
</g>
|
||||
<g>
|
||||
<circle cx="32.5" cy="55" r=".75" style="fill: #fff; stroke: #fff; stroke-miterlimit: 10;"/>
|
||||
<circle cx="27.5" cy="55" r=".75" style="fill: #fff; stroke: #fff; stroke-miterlimit: 10;"/>
|
||||
<circle cx="22.5" cy="55" r=".75" style="fill: #fff; stroke: #fff; stroke-miterlimit: 10;"/>
|
||||
</g>
|
||||
</g>`,
|
||||
80
|
||||
),
|
||||
disk: createIcon(
|
||||
`<g>
|
||||
<rect width="80" height="80" style="fill: #087ebf; stroke-width: 0px;"/>
|
||||
<rect x="20" y="15" width="40" height="50" rx="1" ry="1" style="fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 2px;"/>
|
||||
<ellipse cx="24" cy="19.17" rx=".8" ry=".83" style="fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 2px;"/>
|
||||
<ellipse cx="56" cy="19.17" rx=".8" ry=".83" style="fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 2px;"/>
|
||||
<ellipse cx="24" cy="60.83" rx=".8" ry=".83" style="fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 2px;"/>
|
||||
<ellipse cx="56" cy="60.83" rx=".8" ry=".83" style="fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 2px;"/>
|
||||
<ellipse cx="40" cy="33.75" rx="14" ry="14.58" style="fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 2px;"/>
|
||||
<ellipse cx="40" cy="33.75" rx="4" ry="4.17" style="fill: #fff; stroke: #fff; stroke-miterlimit: 10; stroke-width: 2px;"/>
|
||||
<path d="m37.51,42.52l-4.83,13.22c-.26.71-1.1,1.02-1.76.64l-4.18-2.42c-.66-.38-.81-1.26-.33-1.84l9.01-10.8c.88-1.05,2.56-.08,2.09,1.2Z" style="fill: #fff; stroke-width: 0px;"/>
|
||||
</g>`,
|
||||
80
|
||||
),
|
||||
internet: createIcon(
|
||||
`<g>
|
||||
<rect width="80" height="80" style="fill: #087ebf; stroke-width: 0px;"/>
|
||||
<circle cx="40" cy="40" r="22.5" style="fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 2px;"/>
|
||||
<line x1="40" y1="17.5" x2="40" y2="62.5" style="fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 2px;"/>
|
||||
<line x1="17.5" y1="40" x2="62.5" y2="40" style="fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 2px;"/>
|
||||
<path d="m39.99,17.51c-15.28,11.1-15.28,33.88,0,44.98" style="fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 2px;"/>
|
||||
<path d="m40.01,17.51c15.28,11.1,15.28,33.88,0,44.98" style="fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 2px;"/>
|
||||
<line x1="19.75" y1="30.1" x2="60.25" y2="30.1" style="fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 2px;"/>
|
||||
<line x1="19.75" y1="49.9" x2="60.25" y2="49.9" style="fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 2px;"/>
|
||||
</g>`,
|
||||
80
|
||||
),
|
||||
cloud: createIcon(
|
||||
`<g>
|
||||
<rect width="80" height="80" style="fill: #087ebf; stroke-width: 0px;"/>
|
||||
<path d="m65,47.5c0,2.76-2.24,5-5,5H20c-2.76,0-5-2.24-5-5,0-1.87,1.03-3.51,2.56-4.36-.04-.21-.06-.42-.06-.64,0-2.6,2.48-4.74,5.65-4.97,1.65-4.51,6.34-7.76,11.85-7.76.86,0,1.69.08,2.5.23,2.09-1.57,4.69-2.5,7.5-2.5,6.1,0,11.19,4.38,12.28,10.17,2.14.56,3.72,2.51,3.72,4.83,0,.03,0,.07-.01.1,2.29.46,4.01,2.48,4.01,4.9Z" style="fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 2px;"/>
|
||||
</g>`,
|
||||
80
|
||||
),
|
||||
unknown: createIcon(
|
||||
`<g>
|
||||
<rect width="80" height="80" style="fill: #087ebf; stroke-width: 0px;"/>
|
||||
<text transform="translate(21.16 64.67)" style="fill: #fff; font-family: ArialMT, Arial; font-size: 67.75px;"><tspan x="0" y="0">?</tspan></text>
|
||||
</g>`,
|
||||
80
|
||||
),
|
||||
blank: createIcon(
|
||||
`<g>
|
||||
<rect width="80" height="80" style="fill: #087ebf; stroke-width: 0px;"/>
|
||||
</g>`,
|
||||
80
|
||||
),
|
||||
};
|
||||
@ -1,50 +0,0 @@
|
||||
import { log } from 'mermaid/dist/logger.js';
|
||||
import type { Selection } from 'd3-selection';
|
||||
|
||||
export type IconResolver = (
|
||||
parent: Selection<SVGGElement, unknown, Element | null, unknown>,
|
||||
width?: number
|
||||
) => Selection<SVGGElement, unknown, Element | null, unknown>;
|
||||
export type IconLibrary = Record<string, IconResolver>;
|
||||
|
||||
/**
|
||||
* Converts an SVG Icon passed as a string into a properly formatted IconResolver
|
||||
* @param icon - html code for the svg icon as a string (the SVG tag should not be included)
|
||||
* @param originalSize - the original size of the SVG Icon in pixels
|
||||
* @returns IconResolver
|
||||
*/
|
||||
export const createIcon: (icon: string, originalSize: number) => IconResolver = (
|
||||
icon,
|
||||
originalSize
|
||||
) => {
|
||||
return (
|
||||
parent: Selection<SVGGElement, unknown, Element | null, unknown>,
|
||||
size: number = originalSize
|
||||
) => {
|
||||
parent.html(`<g style="transform: scale(${size / originalSize})">${icon}</g>`);
|
||||
return parent;
|
||||
};
|
||||
};
|
||||
|
||||
const icons: IconLibrary = {};
|
||||
|
||||
export const isIconNameInUse = (name: string): boolean => {
|
||||
return icons[name] !== undefined;
|
||||
};
|
||||
|
||||
export const registerIconLibrary = (library: IconLibrary) => {
|
||||
Object.entries(library).forEach(([name, resolver]) => {
|
||||
if (!isIconNameInUse(name)) {
|
||||
icons[name] = resolver;
|
||||
} else {
|
||||
log.warn(`Icon with name ${name} already exists. Skipping registration.`);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
export const getIcon = (name: string): IconResolver | null => {
|
||||
if (isIconNameInUse(name)) {
|
||||
return icons[name];
|
||||
}
|
||||
return icons.unknown;
|
||||
};
|
||||
@ -1,10 +1,10 @@
|
||||
// TODO remove no-console
|
||||
/* eslint-disable no-console */
|
||||
import { getIconSVG } from '$root/rendering-util/icons.js';
|
||||
import type cytoscape from 'cytoscape';
|
||||
import { getConfig } from '../../diagram-api/diagramAPI.js';
|
||||
import { createText } from '../../rendering-util/createText.js';
|
||||
import type { D3Element } from '../../types.js';
|
||||
import { db, getConfigField } from './architectureDb.js';
|
||||
import { architectureIcons } from './architectureIcons.js';
|
||||
import {
|
||||
ArchitectureDirectionArrow,
|
||||
ArchitectureDirectionArrowShift,
|
||||
@ -20,7 +20,6 @@ import {
|
||||
type ArchitectureJunction,
|
||||
type ArchitectureService,
|
||||
} from './architectureTypes.js';
|
||||
import { getIcon } from './icons/svgRegister.js';
|
||||
|
||||
export const drawEdges = async function (edgesEl: D3Element, cy: cytoscape.Core) {
|
||||
const padding = getConfigField('padding');
|
||||
@ -198,7 +197,6 @@ export const drawGroups = async function (groupsEl: D3Element, cy: cytoscape.Cor
|
||||
const data = nodeData(node);
|
||||
if (data.type === 'group') {
|
||||
const { h, w, x1, y1 } = node.boundingBox();
|
||||
console.log(`Draw group (${data.id}): pos=(${x1}, ${y1}), dim=(${w}, ${h})`);
|
||||
|
||||
groupsEl
|
||||
.append('rect')
|
||||
@ -213,7 +211,9 @@ export const drawGroups = async function (groupsEl: D3Element, cy: cytoscape.Cor
|
||||
let shiftedY1 = y1;
|
||||
if (data.icon) {
|
||||
const bkgElem = groupLabelContainer.append('g');
|
||||
getIcon(data.icon)?.(bkgElem, groupIconSize);
|
||||
bkgElem.html(
|
||||
`<g>${await getIconSVG(data.icon, { height: groupIconSize, width: groupIconSize, fallbackPrefix: architectureIcons.prefix })}</g>`
|
||||
);
|
||||
bkgElem.attr(
|
||||
'transform',
|
||||
'translate(' +
|
||||
@ -290,15 +290,19 @@ export const drawServices = async function (
|
||||
textElem.attr('transform', 'translate(' + iconSize / 2 + ', ' + iconSize + ')');
|
||||
}
|
||||
|
||||
let bkgElem = serviceElem.append('g');
|
||||
const bkgElem = serviceElem.append('g');
|
||||
if (service.icon) {
|
||||
// TODO: should a warning be given to end-users saying which icon names are available?
|
||||
// if (!isIconNameInUse(service.icon)) {
|
||||
// throw new Error(`Invalid SVG Icon name: "${service.icon}"`);
|
||||
// }
|
||||
bkgElem = getIcon(service.icon)?.(bkgElem, iconSize);
|
||||
bkgElem.html(
|
||||
`<g>${await getIconSVG(service.icon, { height: iconSize, width: iconSize, fallbackPrefix: architectureIcons.prefix })}</g>`
|
||||
);
|
||||
} else if (service.iconText) {
|
||||
bkgElem = getIcon('blank')?.(bkgElem, iconSize);
|
||||
bkgElem.html(
|
||||
`<g>${await getIconSVG('blank', { height: iconSize, width: iconSize, fallbackPrefix: architectureIcons.prefix })}</g>`
|
||||
);
|
||||
const textElemContainer = bkgElem.append('g');
|
||||
const fo = textElemContainer
|
||||
.append('foreignObject')
|
||||
|
||||
@ -177,7 +177,6 @@ function sidebarConfig() {
|
||||
{ text: 'Directives', link: '/config/directives' },
|
||||
{ text: 'Theming', link: '/config/theming' },
|
||||
{ text: 'Math', link: '/config/math' },
|
||||
{ text: 'Icons', link: '/config/icons' },
|
||||
{ text: 'Accessibility', link: '/config/accessibility' },
|
||||
{ text: 'Mermaid CLI', link: '/config/mermaidCLI' },
|
||||
{ text: 'FAQ', link: '/config/faq' },
|
||||
|
||||
@ -2,6 +2,13 @@ import mermaid, { type MermaidConfig } from 'mermaid';
|
||||
import zenuml from '../../../../../mermaid-zenuml/dist/mermaid-zenuml.core.mjs';
|
||||
|
||||
const init = mermaid.registerExternalDiagrams([zenuml]);
|
||||
mermaid.registerIconPacks([
|
||||
{
|
||||
name: 'logos',
|
||||
loader: () =>
|
||||
fetch('https://unpkg.com/@iconify-json/logos/icons.json').then((res) => res.json()),
|
||||
},
|
||||
]);
|
||||
|
||||
export const render = async (id: string, code: string, config: MermaidConfig): Promise<string> => {
|
||||
await init;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
# Architecture Diagrams Documentation (v<MERMAID_RELEASE_VERSION>+)
|
||||
# Architecture Diagrams Documentation (v11.1.0+)
|
||||
|
||||
> In the context of mermaid-js, the architecture diagram is used to show the relationship between services and resources commonly found within the Cloud or CI/CD deployments. In an architecture diagram, services (nodes) are connected by edges. Related services can be placed within groups to better illustrate how they are organized.
|
||||
|
||||
@ -153,4 +153,71 @@ architecture-beta
|
||||
bottom_gateway:T -- B:junctionRight
|
||||
```
|
||||
|
||||
## Configuration
|
||||
## Icons
|
||||
|
||||
By default, architecture diagram supports the following icons: `cloud`, `database`, `disk`, `internet`, `server`.
|
||||
Users can use any of the 200,000+ icons available in iconify.design, or add their own custom icons, by following the steps below.
|
||||
|
||||
The icon packs available can be found at [icones.js.org](https://icones.js.org/).
|
||||
We use the name defined when registering the icon pack, to override the prefix field of the iconify pack. This allows the user to use shorter names for the icons. It also allows us to load a particular pack only when it is used in a diagram.
|
||||
|
||||
Using JSON file directly from CDN:
|
||||
|
||||
```js
|
||||
import mermaid from 'CDN/mermaid.esm.mjs';
|
||||
mermaid.registerIconPacks([
|
||||
{
|
||||
name: 'logos',
|
||||
loader: () =>
|
||||
fetch('https://unpkg.com/@iconify-json/logos/icons.json').then((res) => res.json()),
|
||||
},
|
||||
]);
|
||||
```
|
||||
|
||||
Using packages and a bundler:
|
||||
|
||||
```bash
|
||||
npm install @iconify-json/logos
|
||||
```
|
||||
|
||||
With lazy loading
|
||||
|
||||
```js
|
||||
import mermaid from 'mermaid';
|
||||
|
||||
mermaid.registerIconPacks([
|
||||
{
|
||||
name: 'logos',
|
||||
loader: () => import('@iconify-json/logos').then((module) => module.icons),
|
||||
},
|
||||
]);
|
||||
```
|
||||
|
||||
Without lazy loading
|
||||
|
||||
```js
|
||||
import mermaid from 'mermaid';
|
||||
import { icons } from '@iconify-json/logos';
|
||||
mermaid.registerIconPacks([
|
||||
{
|
||||
name: icons.prefix, // To use the prefix defined in the icon pack
|
||||
icons,
|
||||
},
|
||||
]);
|
||||
```
|
||||
|
||||
After the icons are installed, they can be used in the architecture diagram by using the format "name:icon-name", where name is the value used when registering the icon pack.
|
||||
|
||||
```mermaid-example
|
||||
architecture-beta
|
||||
group api(logos:aws-lambda)[API]
|
||||
|
||||
service db(logos:aws-aurora)[Database] in api
|
||||
service disk1(logos:aws-glacier)[Storage] in api
|
||||
service disk2(logos:aws-s3)[Storage] in api
|
||||
service server(logos:aws-ec2)[Server] in api
|
||||
|
||||
db:L -- R:server
|
||||
disk1:T -- B:server
|
||||
disk2:T -- B:db
|
||||
```
|
||||
|
||||
@ -192,7 +192,7 @@ erDiagram
|
||||
|
||||
- If you want the relationship label to be more than one word, you must use double quotes around the phrase
|
||||
- If you don't want a label at all on a relationship, you must use an empty double-quoted string
|
||||
- (v<MERMAID_RELEASE_VERSION>+) If you want a multi-line label on a relationship, use `<br />` between the two lines (`"first line<br />second line"`)
|
||||
- (v11.1.0+) If you want a multi-line label on a relationship, use `<br />` between the two lines (`"first line<br />second line"`)
|
||||
|
||||
## Styling
|
||||
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
* Web page integration module for the mermaid framework. It uses the mermaidAPI for mermaid
|
||||
* functionality and to render the diagrams to svg code!
|
||||
*/
|
||||
import { registerIconPacks } from '$root/rendering-util/icons.js';
|
||||
import { dedent } from 'ts-dedent';
|
||||
import type { MermaidConfig } from './config.type.js';
|
||||
import { detectType, registerLazyLoadedDiagrams } from './diagram-api/detectType.js';
|
||||
@ -435,6 +436,7 @@ export interface Mermaid {
|
||||
contentLoaded: typeof contentLoaded;
|
||||
setParseErrorHandler: typeof setParseErrorHandler;
|
||||
detectType: typeof detectType;
|
||||
registerIconPacks: typeof registerIconPacks;
|
||||
}
|
||||
|
||||
const mermaid: Mermaid = {
|
||||
@ -451,6 +453,7 @@ const mermaid: Mermaid = {
|
||||
contentLoaded,
|
||||
setParseErrorHandler,
|
||||
detectType,
|
||||
registerIconPacks,
|
||||
};
|
||||
|
||||
export default mermaid;
|
||||
|
||||
100
packages/mermaid/src/rendering-util/icons.ts
Normal file
100
packages/mermaid/src/rendering-util/icons.ts
Normal file
@ -0,0 +1,100 @@
|
||||
import { log } from '$root/logger.js';
|
||||
import type { ExtendedIconifyIcon, IconifyIcon, IconifyJSON } from '@iconify/types';
|
||||
import type { IconifyIconCustomisations } from '@iconify/utils';
|
||||
import { getIconData, iconToHTML, iconToSVG, replaceIDs, stringToIcon } from '@iconify/utils';
|
||||
|
||||
interface AsyncIconLoader {
|
||||
name: string;
|
||||
loader: () => Promise<IconifyJSON>;
|
||||
}
|
||||
|
||||
interface SyncIconLoader {
|
||||
name: string;
|
||||
icons: IconifyJSON;
|
||||
}
|
||||
|
||||
export type IconLoader = AsyncIconLoader | SyncIconLoader;
|
||||
|
||||
export const unknownIcon: IconifyIcon = {
|
||||
body: '<g><rect width="80" height="80" style="fill: #087ebf; stroke-width: 0px;"/><text transform="translate(21.16 64.67)" style="fill: #fff; font-family: ArialMT, Arial; font-size: 67.75px;"><tspan x="0" y="0">?</tspan></text></g>',
|
||||
height: 80,
|
||||
width: 80,
|
||||
};
|
||||
|
||||
const iconsStore = new Map<string, IconifyJSON>();
|
||||
const loaderStore = new Map<string, AsyncIconLoader['loader']>();
|
||||
|
||||
export const registerIconPacks = (iconLoaders: IconLoader[]) => {
|
||||
for (const iconLoader of iconLoaders) {
|
||||
if (!iconLoader.name) {
|
||||
throw new Error(
|
||||
'Invalid icon loader. Must have a "name" property with non-empty string value.'
|
||||
);
|
||||
}
|
||||
log.debug('Registering icon pack:', iconLoader.name);
|
||||
if ('loader' in iconLoader) {
|
||||
loaderStore.set(iconLoader.name, iconLoader.loader);
|
||||
} else if ('icons' in iconLoader) {
|
||||
iconsStore.set(iconLoader.name, iconLoader.icons);
|
||||
} else {
|
||||
log.error('Invalid icon loader:', iconLoader);
|
||||
throw new Error('Invalid icon loader. Must have either "icons" or "loader" property.');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const getRegisteredIconData = async (iconName: string, fallbackPrefix?: string) => {
|
||||
const data = stringToIcon(iconName, true, fallbackPrefix !== undefined);
|
||||
if (!data) {
|
||||
throw new Error(`Invalid icon name: ${iconName}`);
|
||||
}
|
||||
const prefix = data.prefix || fallbackPrefix;
|
||||
if (!prefix) {
|
||||
throw new Error(`Icon name must contain a prefix: ${iconName}`);
|
||||
}
|
||||
let icons = iconsStore.get(prefix);
|
||||
if (!icons) {
|
||||
const loader = loaderStore.get(prefix);
|
||||
if (!loader) {
|
||||
throw new Error(`Icon set not found: ${data.prefix}`);
|
||||
}
|
||||
try {
|
||||
const loaded = await loader();
|
||||
icons = { ...loaded, prefix };
|
||||
iconsStore.set(prefix, icons);
|
||||
} catch (e) {
|
||||
log.error(e);
|
||||
throw new Error(`Failed to load icon set: ${data.prefix}`);
|
||||
}
|
||||
}
|
||||
const iconData = getIconData(icons, data.name);
|
||||
if (!iconData) {
|
||||
throw new Error(`Icon not found: ${iconName}`);
|
||||
}
|
||||
return iconData;
|
||||
};
|
||||
|
||||
export const isIconAvailable = async (iconName: string) => {
|
||||
try {
|
||||
await getRegisteredIconData(iconName);
|
||||
return true;
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
export const getIconSVG = async (
|
||||
iconName: string,
|
||||
customisations?: IconifyIconCustomisations & { fallbackPrefix?: string }
|
||||
) => {
|
||||
let iconData: ExtendedIconifyIcon;
|
||||
try {
|
||||
iconData = await getRegisteredIconData(iconName, customisations?.fallbackPrefix);
|
||||
} catch (e) {
|
||||
log.error(e);
|
||||
iconData = unknownIcon;
|
||||
}
|
||||
const renderData = iconToSVG(iconData, customisations);
|
||||
const svg = iconToHTML(replaceIDs(renderData.body), renderData.attributes);
|
||||
return svg;
|
||||
};
|
||||
@ -1,5 +1,17 @@
|
||||
# @mermaid-js/parser
|
||||
|
||||
## 0.3.0
|
||||
|
||||
### Minor Changes
|
||||
|
||||
- [#5452](https://github.com/mermaid-js/mermaid/pull/5452) [`256a148`](https://github.com/mermaid-js/mermaid/commit/256a148bbf484fc7db6c19f94dd69d5d268ee048) Thanks [@NicolasNewman](https://github.com/NicolasNewman)! - New Diagram: Architecture
|
||||
|
||||
Adds architecture diagrams which allows users to show relations between services.
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- [#5793](https://github.com/mermaid-js/mermaid/pull/5793) [`7d8143b`](https://github.com/mermaid-js/mermaid/commit/7d8143b917ee3562149a0e0a821ed2d6f29cc05d) Thanks [@sidharthv96](https://github.com/sidharthv96)! - feat: Support - in architecture icons
|
||||
|
||||
## 0.2.0
|
||||
|
||||
### Minor Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@mermaid-js/parser",
|
||||
"version": "0.2.0",
|
||||
"version": "0.3.0",
|
||||
"description": "MermaidJS parser",
|
||||
"author": "Yokozuna59",
|
||||
"contributors": [
|
||||
|
||||
@ -49,7 +49,7 @@ Edge:
|
||||
terminal ARROW_DIRECTION: 'L' | 'R' | 'T' | 'B';
|
||||
terminal ARCH_ID: /[\w]+/;
|
||||
terminal ARCH_TEXT_ICON: /\("[^"]+"\)/;
|
||||
terminal ARCH_ICON: /\([\w:]+\)/;
|
||||
terminal ARCH_ICON: /\([\w-:]+\)/;
|
||||
terminal ARCH_TITLE: /\[[\w ]+\]/;
|
||||
terminal ARROW_GROUP: /\{group\}/;
|
||||
terminal ARROW_INTO: /<|>/;
|
||||
242
pnpm-lock.yaml
generated
242
pnpm-lock.yaml
generated
@ -13,7 +13,7 @@ importers:
|
||||
version: 3.44.7(encoding@0.1.13)(typescript@5.4.5)
|
||||
'@argos-ci/cypress':
|
||||
specifier: ^2.1.0
|
||||
version: 2.1.2(cypress@13.14.0)
|
||||
version: 2.1.2(cypress@13.14.1)
|
||||
'@changesets/changelog-github':
|
||||
specifier: ^0.5.0
|
||||
version: 0.5.0(encoding@0.1.13)
|
||||
@ -25,7 +25,7 @@ importers:
|
||||
version: 8.13.3(eslint@9.8.0)
|
||||
'@cypress/code-coverage':
|
||||
specifier: ^3.12.30
|
||||
version: 3.12.45(@babel/core@7.25.2)(@babel/preset-env@7.25.4(@babel/core@7.25.2))(babel-loader@9.1.3(@babel/core@7.25.2)(webpack@5.93.0(esbuild@0.21.5)))(cypress@13.14.0)(webpack@5.93.0(esbuild@0.21.5))
|
||||
version: 3.12.45(@babel/core@7.25.2)(@babel/preset-env@7.25.4(@babel/core@7.25.2))(babel-loader@9.1.3(@babel/core@7.25.2)(webpack@5.93.0(esbuild@0.21.5)))(cypress@13.14.1)(webpack@5.93.0(esbuild@0.21.5))
|
||||
'@eslint/js':
|
||||
specifier: ^9.4.0
|
||||
version: 9.8.0
|
||||
@ -87,11 +87,11 @@ importers:
|
||||
specifier: ^8.6.0
|
||||
version: 8.14.2
|
||||
cypress:
|
||||
specifier: ^13.11.0
|
||||
version: 13.14.0
|
||||
specifier: ^13.14.1
|
||||
version: 13.14.1
|
||||
cypress-image-snapshot:
|
||||
specifier: ^4.0.1
|
||||
version: 4.0.1(cypress@13.14.0)(jest@29.7.0(@types/node@20.16.2))
|
||||
version: 4.0.1(cypress@13.14.1)(jest@29.7.0(@types/node@20.16.2))
|
||||
esbuild:
|
||||
specifier: ^0.21.5
|
||||
version: 0.21.5
|
||||
@ -170,9 +170,6 @@ importers:
|
||||
path-browserify:
|
||||
specifier: ^1.0.1
|
||||
version: 1.0.1
|
||||
pnpm:
|
||||
specifier: ^8.15.5
|
||||
version: 8.15.9
|
||||
prettier:
|
||||
specifier: ^3.2.5
|
||||
version: 3.3.3
|
||||
@ -212,6 +209,9 @@ importers:
|
||||
'@braintree/sanitize-url':
|
||||
specifier: ^7.0.1
|
||||
version: 7.1.0
|
||||
'@iconify/utils':
|
||||
specifier: ^2.1.32
|
||||
version: 2.1.32
|
||||
'@mermaid-js/parser':
|
||||
specifier: workspace:^
|
||||
version: link:../parser
|
||||
@ -267,6 +267,9 @@ importers:
|
||||
'@adobe/jsonschema2md':
|
||||
specifier: ^8.0.0
|
||||
version: 8.0.2
|
||||
'@iconify/types':
|
||||
specifier: ^2.0.0
|
||||
version: 2.0.0
|
||||
'@types/cytoscape':
|
||||
specifier: ^3.21.4
|
||||
version: 3.21.5
|
||||
@ -500,6 +503,67 @@ importers:
|
||||
specifier: ^7.0.0
|
||||
version: 7.1.0
|
||||
|
||||
packages/mermaid/src/vitepress:
|
||||
dependencies:
|
||||
'@mdi/font':
|
||||
specifier: ^7.0.0
|
||||
version: 7.4.47
|
||||
'@vueuse/core':
|
||||
specifier: ^10.9.0
|
||||
version: 10.11.1(vue@3.4.38(typescript@5.4.5))
|
||||
font-awesome:
|
||||
specifier: ^4.7.0
|
||||
version: 4.7.0
|
||||
jiti:
|
||||
specifier: ^1.21.0
|
||||
version: 1.21.6
|
||||
mermaid:
|
||||
specifier: workspace:^
|
||||
version: link:../..
|
||||
vue:
|
||||
specifier: ^3.4.21
|
||||
version: 3.4.38(typescript@5.4.5)
|
||||
devDependencies:
|
||||
'@iconify-json/carbon':
|
||||
specifier: ^1.1.31
|
||||
version: 1.1.37
|
||||
'@unocss/reset':
|
||||
specifier: ^0.59.0
|
||||
version: 0.59.4
|
||||
'@vite-pwa/vitepress':
|
||||
specifier: ^0.4.0
|
||||
version: 0.4.0(vite-plugin-pwa@0.19.8(vite@5.4.2(@types/node@22.5.1)(terser@5.31.6))(workbox-build@7.1.1(@types/babel__core@7.20.5))(workbox-window@7.1.0))
|
||||
'@vitejs/plugin-vue':
|
||||
specifier: ^5.0.0
|
||||
version: 5.1.2(vite@5.4.2(@types/node@22.5.1)(terser@5.31.6))(vue@3.4.38(typescript@5.4.5))
|
||||
fast-glob:
|
||||
specifier: ^3.3.2
|
||||
version: 3.3.2
|
||||
https-localhost:
|
||||
specifier: ^4.7.1
|
||||
version: 4.7.1
|
||||
pathe:
|
||||
specifier: ^1.1.2
|
||||
version: 1.1.2
|
||||
unocss:
|
||||
specifier: ^0.59.0
|
||||
version: 0.59.4(postcss@8.4.41)(rollup@4.21.1)(vite@5.4.2(@types/node@22.5.1)(terser@5.31.6))
|
||||
unplugin-vue-components:
|
||||
specifier: ^0.26.0
|
||||
version: 0.26.0(@babel/parser@7.25.4)(rollup@4.21.1)(vue@3.4.38(typescript@5.4.5))
|
||||
vite:
|
||||
specifier: ^5.0.0
|
||||
version: 5.4.2(@types/node@22.5.1)(terser@5.31.6)
|
||||
vite-plugin-pwa:
|
||||
specifier: ^0.19.7
|
||||
version: 0.19.8(vite@5.4.2(@types/node@22.5.1)(terser@5.31.6))(workbox-build@7.1.1(@types/babel__core@7.20.5))(workbox-window@7.1.0)
|
||||
vitepress:
|
||||
specifier: 1.1.4
|
||||
version: 1.1.4(@algolia/client-search@4.24.0)(@types/node@22.5.1)(axios@1.7.5)(postcss@8.4.41)(search-insights@2.15.0)(terser@5.31.6)(typescript@5.4.5)
|
||||
workbox-window:
|
||||
specifier: ^7.0.0
|
||||
version: 7.1.0
|
||||
|
||||
packages/parser:
|
||||
dependencies:
|
||||
langium:
|
||||
@ -612,6 +676,9 @@ packages:
|
||||
'@antfu/install-pkg@0.1.1':
|
||||
resolution: {integrity: sha512-LyB/8+bSfa0DFGC06zpCEfs89/XoWZwws5ygEa5D+Xsm3OfI+aXQ86VgVG7Acyef+rSZ5HE7J8rrxzrQeM3PjQ==}
|
||||
|
||||
'@antfu/install-pkg@0.4.1':
|
||||
resolution: {integrity: sha512-T7yB5QNG29afhWVkVq7XeIMBa5U/vs9mX69YqayXypPRmYzUmzwnYltplHmPtZ4HPCn+sQKeXW8I47wCbuBOjw==}
|
||||
|
||||
'@antfu/utils@0.7.10':
|
||||
resolution: {integrity: sha512-+562v9k4aI80m1+VuMHehNJWLOFjBnXn3tdOitzD0il5b7smkSBal4+a3oKiQTbrwMmN/TBUMDvbdoWDehgOww==}
|
||||
|
||||
@ -2175,6 +2242,9 @@ packages:
|
||||
'@iconify/utils@2.1.30':
|
||||
resolution: {integrity: sha512-bY0IO5xLOlbzJBnjWLxknp6Sss3yla03sVY9VeUz9nT6dbc+EGKlLfCt+6uytJnWm5CUvTF/BNotsLWF7kI61A==}
|
||||
|
||||
'@iconify/utils@2.1.32':
|
||||
resolution: {integrity: sha512-LeifFZPPKu28O3AEDpYJNdEbvS4/ojAPyIW+pF/vUpJTYnbTiXUHkCh0bwgFRzKvdpb8H4Fbfd/742++MF4fPQ==}
|
||||
|
||||
'@img/sharp-darwin-arm64@0.33.5':
|
||||
resolution: {integrity: sha512-UT4p+iz/2H4twwAoLCqfA9UH5pI6DggwKEGuaPy7nCVQ8ZsiY5PIcrRvD1DzuY3qYL07NtIQcWnBSY/heikIFQ==}
|
||||
engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
|
||||
@ -4354,8 +4424,8 @@ packages:
|
||||
cypress-wait-until@3.0.2:
|
||||
resolution: {integrity: sha512-iemies796dD5CgjG5kV0MnpEmKSH+s7O83ZoJLVzuVbZmm4lheMsZqAVT73hlMx4QlkwhxbyUzhOBUOZwoOe0w==}
|
||||
|
||||
cypress@13.14.0:
|
||||
resolution: {integrity: sha512-r0+nhd033x883YL6068futewUsl02Q7rWiinyAAIBDW/OOTn+UMILWgNuCiY3vtJjd53efOqq5R9dctQk/rKiw==}
|
||||
cypress@13.14.1:
|
||||
resolution: {integrity: sha512-Wo+byPmjps66hACEH5udhXINEiN3qS3jWNGRzJOjrRJF3D0+YrcP2LVB1T7oYaVQM/S+eanqEvBWYc8cf7Vcbg==}
|
||||
engines: {node: ^16.0.0 || ^18.0.0 || >=20.0.0}
|
||||
hasBin: true
|
||||
|
||||
@ -7147,6 +7217,9 @@ packages:
|
||||
package-json-from-dist@1.0.0:
|
||||
resolution: {integrity: sha512-dATvCeZN/8wQsGywez1mzHtTlP22H8OEfPrVMLNr4/eGa+ijtLn/6M5f0dY8UKNrC2O9UCU6SSoG3qRKnt7STw==}
|
||||
|
||||
package-manager-detector@0.2.0:
|
||||
resolution: {integrity: sha512-E385OSk9qDcXhcM9LNSe4sdhx8a9mAPrZ4sMLW+tmxl5ZuGtPUcdFu+MPP2jbgiWAZ6Pfe5soGFMd+0Db5Vrog==}
|
||||
|
||||
pako@1.0.11:
|
||||
resolution: {integrity: sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==}
|
||||
|
||||
@ -7325,11 +7398,6 @@ packages:
|
||||
resolution: {integrity: sha512-TRzzuFRRmEoSW/p1KVAmiOgPco2Irlah+bGFCeNfJXxxYGwSw7YwAOAcd7X28K/m5bjBWKsC29KyoMfHbypayg==}
|
||||
engines: {node: '>=12.13.0'}
|
||||
|
||||
pnpm@8.15.9:
|
||||
resolution: {integrity: sha512-SZQ0ydj90aJ5Tr9FUrOyXApjOrzuW7Fee13pDzL0e1E6ypjNXP0AHDHw20VLw4BO3M1XhQHkyik6aBYWa72fgQ==}
|
||||
engines: {node: '>=16.14'}
|
||||
hasBin: true
|
||||
|
||||
points-on-curve@0.2.0:
|
||||
resolution: {integrity: sha512-0mYKnYYe9ZcqMCWhUjItv/oHjvgEsfKvnUTg8sAtnHr3GVy7rGkXCb6d5cSyqrWqL4k81b9CPg3urd+T7aop3A==}
|
||||
|
||||
@ -8283,6 +8351,9 @@ packages:
|
||||
tinybench@2.9.0:
|
||||
resolution: {integrity: sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==}
|
||||
|
||||
tinyexec@0.3.0:
|
||||
resolution: {integrity: sha512-tVGE0mVJPGb0chKhqmsoosjsS+qUnJVGJpZgsHYQcGoPlG3B51R3PouqTgEGH2Dc9jjFyOqOpix6ZHNMXp1FZg==}
|
||||
|
||||
tinypool@0.8.4:
|
||||
resolution: {integrity: sha512-i11VH5gS6IFeLY3gMBQ00/MmLncVP7JLXOw1vlgkytLmJK7QnEr7NXf0LBdxfmNPAeyetukOk0bOYrJrFGjYJQ==}
|
||||
engines: {node: '>=14.0.0'}
|
||||
@ -9281,6 +9352,11 @@ snapshots:
|
||||
execa: 5.1.1
|
||||
find-up: 5.0.0
|
||||
|
||||
'@antfu/install-pkg@0.4.1':
|
||||
dependencies:
|
||||
package-manager-detector: 0.2.0
|
||||
tinyexec: 0.3.0
|
||||
|
||||
'@antfu/utils@0.7.10': {}
|
||||
|
||||
'@apideck/better-ajv-errors@0.3.6(ajv@8.17.1)':
|
||||
@ -9554,12 +9630,12 @@ snapshots:
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
|
||||
'@argos-ci/cypress@2.1.2(cypress@13.14.0)':
|
||||
'@argos-ci/cypress@2.1.2(cypress@13.14.1)':
|
||||
dependencies:
|
||||
'@argos-ci/browser': 2.1.3
|
||||
'@argos-ci/core': 2.5.0
|
||||
'@argos-ci/util': 2.1.1
|
||||
cypress: 13.14.0
|
||||
cypress: 13.14.1
|
||||
cypress-wait-until: 3.0.2
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
@ -10906,14 +10982,14 @@ snapshots:
|
||||
|
||||
'@cspell/url@8.14.2': {}
|
||||
|
||||
'@cypress/code-coverage@3.12.45(@babel/core@7.25.2)(@babel/preset-env@7.25.4(@babel/core@7.25.2))(babel-loader@9.1.3(@babel/core@7.25.2)(webpack@5.93.0(esbuild@0.21.5)))(cypress@13.14.0)(webpack@5.93.0(esbuild@0.21.5))':
|
||||
'@cypress/code-coverage@3.12.45(@babel/core@7.25.2)(@babel/preset-env@7.25.4(@babel/core@7.25.2))(babel-loader@9.1.3(@babel/core@7.25.2)(webpack@5.93.0(esbuild@0.21.5)))(cypress@13.14.1)(webpack@5.93.0(esbuild@0.21.5))':
|
||||
dependencies:
|
||||
'@babel/core': 7.25.2
|
||||
'@babel/preset-env': 7.25.4(@babel/core@7.25.2)
|
||||
'@cypress/webpack-preprocessor': 6.0.2(@babel/core@7.25.2)(@babel/preset-env@7.25.4(@babel/core@7.25.2))(babel-loader@9.1.3(@babel/core@7.25.2)(webpack@5.93.0(esbuild@0.21.5)))(webpack@5.93.0(esbuild@0.21.5))
|
||||
babel-loader: 9.1.3(@babel/core@7.25.2)(webpack@5.93.0(esbuild@0.21.5))
|
||||
chalk: 4.1.2
|
||||
cypress: 13.14.0
|
||||
cypress: 13.14.1
|
||||
dayjs: 1.11.12
|
||||
debug: 4.3.6(supports-color@8.1.1)
|
||||
execa: 4.1.0
|
||||
@ -11249,6 +11325,18 @@ snapshots:
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
|
||||
'@iconify/utils@2.1.32':
|
||||
dependencies:
|
||||
'@antfu/install-pkg': 0.4.1
|
||||
'@antfu/utils': 0.7.10
|
||||
'@iconify/types': 2.0.0
|
||||
debug: 4.3.6(supports-color@8.1.1)
|
||||
kolorist: 1.8.0
|
||||
local-pkg: 0.5.0
|
||||
mlly: 1.7.1
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
|
||||
'@img/sharp-darwin-arm64@0.33.5':
|
||||
optionalDependencies:
|
||||
'@img/sharp-libvips-darwin-arm64': 1.0.4
|
||||
@ -12301,6 +12389,16 @@ snapshots:
|
||||
transitivePeerDependencies:
|
||||
- rollup
|
||||
|
||||
'@unocss/astro@0.59.4(rollup@4.21.1)(vite@5.4.2(@types/node@22.5.1)(terser@5.31.6))':
|
||||
dependencies:
|
||||
'@unocss/core': 0.59.4
|
||||
'@unocss/reset': 0.59.4
|
||||
'@unocss/vite': 0.59.4(rollup@4.21.1)(vite@5.4.2(@types/node@22.5.1)(terser@5.31.6))
|
||||
optionalDependencies:
|
||||
vite: 5.4.2(@types/node@22.5.1)(terser@5.31.6)
|
||||
transitivePeerDependencies:
|
||||
- rollup
|
||||
|
||||
'@unocss/cli@0.59.4(rollup@2.79.1)':
|
||||
dependencies:
|
||||
'@ampproject/remapping': 2.3.0
|
||||
@ -12319,6 +12417,24 @@ snapshots:
|
||||
transitivePeerDependencies:
|
||||
- rollup
|
||||
|
||||
'@unocss/cli@0.59.4(rollup@4.21.1)':
|
||||
dependencies:
|
||||
'@ampproject/remapping': 2.3.0
|
||||
'@rollup/pluginutils': 5.1.0(rollup@4.21.1)
|
||||
'@unocss/config': 0.59.4
|
||||
'@unocss/core': 0.59.4
|
||||
'@unocss/preset-uno': 0.59.4
|
||||
cac: 6.7.14
|
||||
chokidar: 3.6.0
|
||||
colorette: 2.0.20
|
||||
consola: 3.2.3
|
||||
fast-glob: 3.3.2
|
||||
magic-string: 0.30.11
|
||||
pathe: 1.1.2
|
||||
perfect-debounce: 1.0.0
|
||||
transitivePeerDependencies:
|
||||
- rollup
|
||||
|
||||
'@unocss/config@0.59.4':
|
||||
dependencies:
|
||||
'@unocss/core': 0.59.4
|
||||
@ -12444,6 +12560,22 @@ snapshots:
|
||||
transitivePeerDependencies:
|
||||
- rollup
|
||||
|
||||
'@unocss/vite@0.59.4(rollup@4.21.1)(vite@5.4.2(@types/node@22.5.1)(terser@5.31.6))':
|
||||
dependencies:
|
||||
'@ampproject/remapping': 2.3.0
|
||||
'@rollup/pluginutils': 5.1.0(rollup@4.21.1)
|
||||
'@unocss/config': 0.59.4
|
||||
'@unocss/core': 0.59.4
|
||||
'@unocss/inspector': 0.59.4
|
||||
'@unocss/scope': 0.59.4
|
||||
'@unocss/transformer-directives': 0.59.4
|
||||
chokidar: 3.6.0
|
||||
fast-glob: 3.3.2
|
||||
magic-string: 0.30.11
|
||||
vite: 5.4.2(@types/node@22.5.1)(terser@5.31.6)
|
||||
transitivePeerDependencies:
|
||||
- rollup
|
||||
|
||||
'@vite-pwa/vitepress@0.4.0(vite-plugin-pwa@0.19.8(vite@5.4.2(@types/node@22.5.1)(terser@5.31.6))(workbox-build@7.1.1(@types/babel__core@7.20.5))(workbox-window@7.1.0))':
|
||||
dependencies:
|
||||
vite-plugin-pwa: 0.19.8(vite@5.4.2(@types/node@22.5.1)(terser@5.31.6))(workbox-build@7.1.1(@types/babel__core@7.20.5))(workbox-window@7.1.0)
|
||||
@ -13873,10 +14005,10 @@ snapshots:
|
||||
|
||||
cuint@0.2.2: {}
|
||||
|
||||
cypress-image-snapshot@4.0.1(cypress@13.14.0)(jest@29.7.0(@types/node@20.16.2)):
|
||||
cypress-image-snapshot@4.0.1(cypress@13.14.1)(jest@29.7.0(@types/node@20.16.2)):
|
||||
dependencies:
|
||||
chalk: 2.4.2
|
||||
cypress: 13.14.0
|
||||
cypress: 13.14.1
|
||||
fs-extra: 7.0.1
|
||||
glob: 7.2.3
|
||||
jest-image-snapshot: 4.2.0(jest@29.7.0(@types/node@20.16.2))
|
||||
@ -13887,7 +14019,7 @@ snapshots:
|
||||
|
||||
cypress-wait-until@3.0.2: {}
|
||||
|
||||
cypress@13.14.0:
|
||||
cypress@13.14.1:
|
||||
dependencies:
|
||||
'@cypress/request': 3.0.1
|
||||
'@cypress/xvfb': 1.2.4(supports-color@8.1.1)
|
||||
@ -14923,7 +15055,7 @@ snapshots:
|
||||
proxy-addr: 2.0.7
|
||||
rfdc: 1.4.1
|
||||
secure-json-parse: 2.7.0
|
||||
semver: 7.6.2
|
||||
semver: 7.6.3
|
||||
tiny-lru: 8.0.2
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
@ -16599,7 +16731,7 @@ snapshots:
|
||||
mdast-util-from-markdown@2.0.1:
|
||||
dependencies:
|
||||
'@types/mdast': 4.0.4
|
||||
'@types/unist': 3.0.2
|
||||
'@types/unist': 3.0.3
|
||||
decode-named-character-reference: 1.0.2
|
||||
devlop: 1.1.0
|
||||
mdast-util-to-string: 4.0.0
|
||||
@ -16689,7 +16821,7 @@ snapshots:
|
||||
mdast-util-to-markdown@2.1.0:
|
||||
dependencies:
|
||||
'@types/mdast': 4.0.4
|
||||
'@types/unist': 3.0.2
|
||||
'@types/unist': 3.0.3
|
||||
longest-streak: 3.1.0
|
||||
mdast-util-phrasing: 4.1.0
|
||||
mdast-util-to-string: 4.0.0
|
||||
@ -17290,6 +17422,8 @@ snapshots:
|
||||
|
||||
package-json-from-dist@1.0.0: {}
|
||||
|
||||
package-manager-detector@0.2.0: {}
|
||||
|
||||
pako@1.0.11: {}
|
||||
|
||||
parent-module@1.0.1:
|
||||
@ -17453,8 +17587,6 @@ snapshots:
|
||||
|
||||
pngjs@6.0.0: {}
|
||||
|
||||
pnpm@8.15.9: {}
|
||||
|
||||
points-on-curve@0.2.0: {}
|
||||
|
||||
points-on-path@0.2.1:
|
||||
@ -18556,6 +18688,8 @@ snapshots:
|
||||
|
||||
tinybench@2.9.0: {}
|
||||
|
||||
tinyexec@0.3.0: {}
|
||||
|
||||
tinypool@0.8.4: {}
|
||||
|
||||
tinyspy@2.2.1: {}
|
||||
@ -18795,7 +18929,7 @@ snapshots:
|
||||
|
||||
unist-util-stringify-position@4.0.0:
|
||||
dependencies:
|
||||
'@types/unist': 3.0.2
|
||||
'@types/unist': 3.0.3
|
||||
|
||||
unist-util-visit-parents@6.0.1:
|
||||
dependencies:
|
||||
@ -18843,6 +18977,35 @@ snapshots:
|
||||
- rollup
|
||||
- supports-color
|
||||
|
||||
unocss@0.59.4(postcss@8.4.41)(rollup@4.21.1)(vite@5.4.2(@types/node@22.5.1)(terser@5.31.6)):
|
||||
dependencies:
|
||||
'@unocss/astro': 0.59.4(rollup@4.21.1)(vite@5.4.2(@types/node@22.5.1)(terser@5.31.6))
|
||||
'@unocss/cli': 0.59.4(rollup@4.21.1)
|
||||
'@unocss/core': 0.59.4
|
||||
'@unocss/extractor-arbitrary-variants': 0.59.4
|
||||
'@unocss/postcss': 0.59.4(postcss@8.4.41)
|
||||
'@unocss/preset-attributify': 0.59.4
|
||||
'@unocss/preset-icons': 0.59.4
|
||||
'@unocss/preset-mini': 0.59.4
|
||||
'@unocss/preset-tagify': 0.59.4
|
||||
'@unocss/preset-typography': 0.59.4
|
||||
'@unocss/preset-uno': 0.59.4
|
||||
'@unocss/preset-web-fonts': 0.59.4
|
||||
'@unocss/preset-wind': 0.59.4
|
||||
'@unocss/reset': 0.59.4
|
||||
'@unocss/transformer-attributify-jsx': 0.59.4
|
||||
'@unocss/transformer-attributify-jsx-babel': 0.59.4
|
||||
'@unocss/transformer-compile-class': 0.59.4
|
||||
'@unocss/transformer-directives': 0.59.4
|
||||
'@unocss/transformer-variant-group': 0.59.4
|
||||
'@unocss/vite': 0.59.4(rollup@4.21.1)(vite@5.4.2(@types/node@22.5.1)(terser@5.31.6))
|
||||
optionalDependencies:
|
||||
vite: 5.4.2(@types/node@22.5.1)(terser@5.31.6)
|
||||
transitivePeerDependencies:
|
||||
- postcss
|
||||
- rollup
|
||||
- supports-color
|
||||
|
||||
unpipe@1.0.0: {}
|
||||
|
||||
unplugin-vue-components@0.26.0(@babel/parser@7.25.4)(rollup@2.79.1)(vue@3.4.38(typescript@5.4.5)):
|
||||
@ -18864,6 +19027,25 @@ snapshots:
|
||||
- rollup
|
||||
- supports-color
|
||||
|
||||
unplugin-vue-components@0.26.0(@babel/parser@7.25.4)(rollup@4.21.1)(vue@3.4.38(typescript@5.4.5)):
|
||||
dependencies:
|
||||
'@antfu/utils': 0.7.10
|
||||
'@rollup/pluginutils': 5.1.0(rollup@4.21.1)
|
||||
chokidar: 3.6.0
|
||||
debug: 4.3.6(supports-color@8.1.1)
|
||||
fast-glob: 3.3.2
|
||||
local-pkg: 0.4.3
|
||||
magic-string: 0.30.11
|
||||
minimatch: 9.0.5
|
||||
resolve: 1.22.8
|
||||
unplugin: 1.12.0
|
||||
vue: 3.4.38(typescript@5.4.5)
|
||||
optionalDependencies:
|
||||
'@babel/parser': 7.25.4
|
||||
transitivePeerDependencies:
|
||||
- rollup
|
||||
- supports-color
|
||||
|
||||
unplugin@1.12.0:
|
||||
dependencies:
|
||||
acorn: 8.12.1
|
||||
@ -18919,12 +19101,12 @@ snapshots:
|
||||
|
||||
vfile-message@4.0.2:
|
||||
dependencies:
|
||||
'@types/unist': 3.0.2
|
||||
'@types/unist': 3.0.3
|
||||
unist-util-stringify-position: 4.0.0
|
||||
|
||||
vfile@6.0.2:
|
||||
dependencies:
|
||||
'@types/unist': 3.0.2
|
||||
'@types/unist': 3.0.3
|
||||
unist-util-stringify-position: 4.0.0
|
||||
vfile-message: 4.0.2
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user