diff --git a/.changeset/famous-bananas-join.md b/.changeset/famous-bananas-join.md deleted file mode 100644 index 48c29a8ad..000000000 --- a/.changeset/famous-bananas-join.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -'mermaid': patch ---- - -Fix for self loops in cluster -Supporting legacy defaultRenderer directive diff --git a/.changeset/khaki-items-leave.md b/.changeset/khaki-items-leave.md deleted file mode 100644 index d84776eb2..000000000 --- a/.changeset/khaki-items-leave.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'mermaid': minor ---- - -feat(er): allow multi-line relationship labels diff --git a/.changeset/nice-flowers-yawn.md b/.changeset/nice-flowers-yawn.md deleted file mode 100644 index b3c00cfb4..000000000 --- a/.changeset/nice-flowers-yawn.md +++ /dev/null @@ -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. diff --git a/.changeset/pants-things-go.md b/.changeset/pants-things-go.md deleted file mode 100644 index 559e572d1..000000000 --- a/.changeset/pants-things-go.md +++ /dev/null @@ -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. diff --git a/.cspell/libraries.txt b/.cspell/libraries.txt index ad0e3e701..73a2dceeb 100644 --- a/.cspell/libraries.txt +++ b/.cspell/libraries.txt @@ -30,6 +30,7 @@ Foswiki Gitea graphlib Grav +icones iconify Inkdrop jiti diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index 91153084e..3db5f6f37 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -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: diff --git a/cypress/helpers/util.ts b/cypress/helpers/util.ts index 133a35032..74b17cf05 100644 --- a/cypress/helpers/util.ts +++ b/cypress/helpers/util.ts @@ -73,7 +73,7 @@ export const imgSnapshotTest = ( export const urlSnapshotTest = ( url: string, - options: CypressMermaidConfig, + options: CypressMermaidConfig = {}, _api = false, validation?: any ): void => { diff --git a/cypress/integration/rendering/architecture.spec.ts b/cypress/integration/rendering/architecture.spec.ts index 459931979..1deb1f7da 100644 --- a/cypress/integration/rendering/architecture.spec.ts +++ b/cypress/integration/rendering/architecture.spec.ts @@ -1,9 +1,9 @@ -import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts'; +import { imgSnapshotTest, urlSnapshotTest } from '../../helpers/util.ts'; -describe('architecture diagram', () => { +describe.skip('architecture diagram', () => { it('should render a simple architecture diagram with groups', () => { imgSnapshotTest( - `architecture + `architecture-beta group api(cloud)[API] service db(database)[Database] in api @@ -21,7 +21,7 @@ describe('architecture diagram', () => { }); it('should render an architecture diagram with groups within groups', () => { imgSnapshotTest( - `architecture + `architecture-beta group api[API] group public[Public API] in api group private[Private API] in api @@ -41,14 +41,14 @@ describe('architecture diagram', () => { }); it('should render an architecture diagram with the fallback icon', () => { imgSnapshotTest( - `architecture + `architecture-beta service unknown(iconnamedoesntexist)[Unknown Icon] ` ); }); it('should render an architecture diagram with split directioning', () => { imgSnapshotTest( - `architecture + `architecture-beta service db(database)[Database] service s3(disk)[Storage] service serv1(server)[Server 1] @@ -64,7 +64,7 @@ describe('architecture diagram', () => { }); it('should render an architecture diagram with directional arrows', () => { imgSnapshotTest( - `architecture + `architecture-beta service servC(server)[Server 1] service servL(server)[Server 2] service servR(server)[Server 3] @@ -85,7 +85,7 @@ describe('architecture diagram', () => { }); it('should render an architecture diagram with group edges', () => { imgSnapshotTest( - `architecture + `architecture-beta group left_group(cloud)[Left] group right_group(cloud)[Right] group top_group(cloud)[Top] @@ -107,7 +107,7 @@ describe('architecture diagram', () => { }); it('should render an architecture diagram with edge labels', () => { imgSnapshotTest( - `architecture + `architecture-beta service servC(server)[Server 1] service servL(server)[Server 2] service servR(server)[Server 3] @@ -128,7 +128,7 @@ describe('architecture diagram', () => { }); it('should render an architecture diagram with simple junction edges', () => { imgSnapshotTest( - `architecture + `architecture-beta service left_disk(disk)[Disk] service top_disk(disk)[Disk] service bottom_disk(disk)[Disk] @@ -148,7 +148,7 @@ describe('architecture diagram', () => { }); it('should render an architecture diagram with complex junction edges', () => { imgSnapshotTest( - `architecture + `architecture-beta group left group right service left_disk(disk)[Disk] in left @@ -172,3 +172,9 @@ describe('architecture diagram', () => { ); }); }); + +describe('architecture - external', () => { + it('should allow adding external icons', () => { + urlSnapshotTest('http://localhost:9000/architecture-external.html'); + }); +}); diff --git a/cypress/integration/rendering/newShapes.spec.ts b/cypress/integration/rendering/newShapes.spec.ts index e26878f40..d2f3a7111 100644 --- a/cypress/integration/rendering/newShapes.spec.ts +++ b/cypress/integration/rendering/newShapes.spec.ts @@ -18,9 +18,9 @@ const newShapesSet2 = [ ] as const; const newShapesSet3 = [ - 'halfRoundedRectangle', 'curvedTrapezoid', 'bowTieRect', + 'waveEdgedRectangle', 'dividedRectangle', 'crossedCircle', ] as const; @@ -29,38 +29,16 @@ const newShapesSet4 = [ 'waveRectangle', 'trapezoidalPentagon', 'linedCylinder', - 'waveEdgedRectangle', 'multiWaveEdgedRectangle', + 'halfRoundedRectangle', ] as const; const newShapesSet5 = [ 'linedWaveEdgedRect', 'taggedWaveEdgedRectangle', - 'text', - 'card', - 'shadedProcess', -] as const; - -const newShapesSet6 = ['roundedRect', 'squareRect', 'stateStart', 'stateEnd', 'labelRect'] as const; - -const newShapesSet7 = ['forkJoin', 'choice', 'note', 'stadium'] as const; - -const newShapesSet8 = [ - 'question', - 'hexagon', 'curlyBraces', - 'multiRect', - 'waveEdgedRectangle', -] as const; - -const newShapesSet9 = ['anchor', 'lean_right', 'lean_left', 'trapezoid', 'inv_trapezoid'] as const; - -const newShapesSet10 = [ - 'subroutine', - 'cylinder', - 'circle', - 'doublecircle', - 'rect_left_inv_arrow', + 'curvedTrapezoid', + 'waveRectangle', ] as const; // Aggregate all shape sets into a single array @@ -70,11 +48,6 @@ const newShapesSets = [ newShapesSet3, newShapesSet4, newShapesSet5, - newShapesSet6, - newShapesSet7, - newShapesSet8, - newShapesSet9, - newShapesSet10, ] as const; looks.forEach((look) => { diff --git a/cypress/integration/rendering/oldShapes.spec.ts b/cypress/integration/rendering/oldShapes.spec.ts new file mode 100644 index 000000000..87615ed6d --- /dev/null +++ b/cypress/integration/rendering/oldShapes.spec.ts @@ -0,0 +1,101 @@ +import { imgSnapshotTest } from '../../helpers/util'; + +const looks = ['classic', 'handDrawn'] as const; +const directions = ['TB', 'BT', 'LR', 'RL'] as const; + +const shapesSet1 = ['text', 'card', 'shadedProcess', 'diamond', 'hexagon'] as const; + +const shapesSet2 = ['roundedRect', 'squareRect', 'stateStart', 'stateEnd', 'labelRect'] as const; + +const shapesSet3 = ['forkJoin', 'choice', 'note', 'stadium', 'odd'] as const; + +const shapesSet4 = ['subroutine', 'cylinder', 'circle', 'doublecircle', 'odd'] as const; + +const shapesSet5 = ['anchor', 'lean_right', 'lean_left', 'trapezoid', 'inv_trapezoid'] as const; + +// Aggregate all shape sets into a single array +const shapesSets = [shapesSet1, shapesSet2, shapesSet3, shapesSet4, shapesSet5] as const; + +looks.forEach((look) => { + directions.forEach((direction) => { + shapesSets.forEach((shapesSet) => { + describe(`Test ${shapesSet.join(', ')} in ${look} look and dir ${direction}`, () => { + it(`without label`, () => { + let flowchartCode = `flowchart ${direction}\n`; + shapesSet.forEach((newShape, index) => { + flowchartCode += ` n${index} --> n${index}${index}@{ shape: ${newShape} }@\n`; + }); + imgSnapshotTest(flowchartCode, { look }); + }); + + it(`with label`, () => { + let flowchartCode = `flowchart ${direction}\n`; + shapesSet.forEach((newShape, index) => { + flowchartCode += ` n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'This is a label for ${newShape} shape' }@\n`; + }); + imgSnapshotTest(flowchartCode, { look }); + }); + + it(`connect all shapes with each other`, () => { + let flowchartCode = `flowchart ${direction}\n`; + shapesSet.forEach((newShape, index) => { + flowchartCode += ` n${index}${index}@{ shape: ${newShape}, label: 'This is a label for ${newShape} shape' }@\n`; + }); + for (let i = 0; i < shapesSet.length; i++) { + for (let j = i + 1; j < shapesSet.length; j++) { + flowchartCode += ` n${i}${i} --> n${j}${j}\n`; + } + } + imgSnapshotTest(flowchartCode, { look }); + }); + + it(`with very long label`, () => { + let flowchartCode = `flowchart ${direction}\n`; + shapesSet.forEach((newShape, index) => { + flowchartCode += ` n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'This is a very very very very very long long long label for ${newShape} shape' }@\n`; + }); + imgSnapshotTest(flowchartCode, { look }); + }); + + it(`with markdown htmlLabels:true`, () => { + let flowchartCode = `flowchart ${direction}\n`; + shapesSet.forEach((newShape, index) => { + flowchartCode += ` n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'This is **bold**
and strong for ${newShape} shape' }@\n`; + }); + imgSnapshotTest(flowchartCode, { look }); + }); + + it(`with markdown htmlLabels:false`, () => { + let flowchartCode = `flowchart ${direction}\n`; + shapesSet.forEach((newShape, index) => { + flowchartCode += ` n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'This is **bold**
and strong for ${newShape} shape' }@\n`; + }); + imgSnapshotTest(flowchartCode, { + look, + htmlLabels: false, + flowchart: { htmlLabels: false }, + }); + }); + + it(`with styles`, () => { + let flowchartCode = `flowchart ${direction}\n`; + shapesSet.forEach((newShape, index) => { + flowchartCode += ` n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'new ${newShape} shape' }@\n`; + flowchartCode += ` style n${index}${index} fill:#f9f,stroke:#333,stroke-width:4px \n`; + }); + imgSnapshotTest(flowchartCode, { look }); + }); + + it(`with classDef`, () => { + let flowchartCode = `flowchart ${direction}\n`; + flowchartCode += ` classDef customClazz fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5\n`; + shapesSet.forEach((newShape, index) => { + flowchartCode += ` n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'new ${newShape} shape' }@\n`; + flowchartCode += ` n${index}${index}:::customClazz\n`; + }); + imgSnapshotTest(flowchartCode, { look }); + }); + }); + }); + }); +}); diff --git a/cypress/platform/architecture-external.html b/cypress/platform/architecture-external.html new file mode 100644 index 000000000..71770425d --- /dev/null +++ b/cypress/platform/architecture-external.html @@ -0,0 +1,52 @@ + + + + + + Architecture Mermaid Test Page + + + + + +

External Icons Demo

+ 
+    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]
+
+ + + + diff --git a/demos/architecture.html b/demos/architecture.html index fc65b6beb..6d978d952 100644 --- a/demos/architecture.html +++ b/demos/architecture.html @@ -226,84 +226,31 @@
-

AWS Icon Demo

+

External Icons Demo

     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]
-
+ 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] + diff --git a/docs/config/icons.md b/docs/config/icons.md deleted file mode 100644 index d0a80f2d8..000000000 --- a/docs/config/icons.md +++ /dev/null @@ -1,67 +0,0 @@ -> **Warning** -> -> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. -> -> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/icons.md](../../packages/mermaid/src/docs/config/icons.md). - -# SVG Icons (v???+) - -SVG Icons can be used with supported diagrams. Alongside the icon packs included with Mermaid, 3rd party libraries can be included in the configuration to cover additional use-cases. - -## Supported Diagrams - -| Diagram | Usage | -| ------------ | --------------------------------- | -| Architecture | Icon names are surrounded by `()` | - -## Included Icon Packs - -| Icon Pack | Prefix | -| ------------- | ------ | -| default | N/A | -| Amazon AWS | `aws:` | -| Digital Ocean | `do:` | -| GitHub | `gh:` | - -Note that in order to use non-generic icons that are provided with Mermaid, the packs must be explicitly loaded when on initialization initialized. - -```js -import sampleIconPack from 'sample-icon-pack'; - -mermaid.initialize({ - iconLibraries: ['aws:common', 'aws:full', 'github', 'digital-ocean'], -}); -``` - -## Using Custom Icon Packs - -Custom icon packs can be used by including them in the `iconLibraries` array on mermaid initialization. - -```js -import sampleIconPack from 'sample-icon-pack'; - -mermaid.initialize({ - iconLibraries: [sampleIconPack, 'aws:full', ...], -}); -``` - -## Creating Custom Icon Packs - -```js -import { createIcon } from 'mermaid'; -import type { IconLibrary, IconResolver } from 'mermaid'; - -// type IconLibrary = Record; -// createIcon: (icon: string, originalSize: number) => IconResolver -const myIconLibrary: IconLibrary = { - defaultCloudExample: createIcon( - ` - - - `, - 80 - ) -}; - -export default myIconLibrary -``` diff --git a/docs/config/setup/interfaces/mermaid.Mermaid.md b/docs/config/setup/interfaces/mermaid.Mermaid.md index 33cb77288..d4826ba01 100644 --- a/docs/config/setup/interfaces/mermaid.Mermaid.md +++ b/docs/config/setup/interfaces/mermaid.Mermaid.md @@ -28,7 +28,7 @@ page. #### Defined in -[packages/mermaid/src/mermaid.ts:451](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L451) +[packages/mermaid/src/mermaid.ts:446](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L446) --- @@ -59,7 +59,7 @@ A graph definition key #### Defined in -[packages/mermaid/src/mermaid.ts:453](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L453) +[packages/mermaid/src/mermaid.ts:448](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L448) --- @@ -89,7 +89,7 @@ Use [initialize](mermaid.Mermaid.md#initialize) and [run](mermaid.Mermaid.md#run #### Defined in -[packages/mermaid/src/mermaid.ts:446](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L446) +[packages/mermaid/src/mermaid.ts:441](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L441) --- @@ -116,7 +116,7 @@ This function should be called before the run function. #### Defined in -[packages/mermaid/src/mermaid.ts:450](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L450) +[packages/mermaid/src/mermaid.ts:445](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L445) --- @@ -130,7 +130,7 @@ Use [parse](mermaid.Mermaid.md#parse) and [render](mermaid.Mermaid.md#render) in #### 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:435](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L435) --- @@ -180,7 +180,7 @@ console.log(await mermaid.parse('wrong \n a --> b')); #### Defined in -[packages/mermaid/src/mermaid.ts:441](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L441) +[packages/mermaid/src/mermaid.ts:436](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L436) --- @@ -190,7 +190,7 @@ console.log(await mermaid.parse('wrong \n a --> b')); #### 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:430](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L430) --- @@ -218,6 +218,30 @@ Used to register external diagram types. #### Defined in +[packages/mermaid/src/mermaid.ts:444](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L444) + +--- + +### registerIconPacks + +• **registerIconPacks**: (`iconLoaders`: `IconLoader`\[]) => `void` + +#### Type declaration + +▸ (`iconLoaders`): `void` + +##### Parameters + +| Name | Type | +| :------------ | :-------------- | +| `iconLoaders` | `IconLoader`\[] | + +##### Returns + +`void` + +#### Defined in + [packages/mermaid/src/mermaid.ts:449](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L449) --- @@ -242,7 +266,7 @@ Used to register external diagram types. #### Defined in -[packages/mermaid/src/mermaid.ts:448](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L448) +[packages/mermaid/src/mermaid.ts:443](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L443) --- @@ -269,7 +293,7 @@ Used to register external diagram types. #### Defined in -[packages/mermaid/src/mermaid.ts:442](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L442) +[packages/mermaid/src/mermaid.ts:437](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L437) --- @@ -317,7 +341,7 @@ Renders the mermaid diagrams #### Defined in -[packages/mermaid/src/mermaid.ts:447](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L447) +[packages/mermaid/src/mermaid.ts:442](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L442) --- @@ -352,7 +376,7 @@ to it (eg. dart interop wrapper). (Initially there is no parseError member of me #### Defined in -[packages/mermaid/src/mermaid.ts:452](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L452) +[packages/mermaid/src/mermaid.ts:447](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L447) --- @@ -362,4 +386,4 @@ to it (eg. dart interop wrapper). (Initially there is no parseError member of me #### 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:429](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L429) diff --git a/docs/config/setup/interfaces/mermaid.MermaidConfig.md b/docs/config/setup/interfaces/mermaid.MermaidConfig.md index a400ed143..74fad5be0 100644 --- a/docs/config/setup/interfaces/mermaid.MermaidConfig.md +++ b/docs/config/setup/interfaces/mermaid.MermaidConfig.md @@ -26,7 +26,7 @@ #### Defined in -[packages/mermaid/src/config.type.ts:203](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L203) +[packages/mermaid/src/config.type.ts:194](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L194) --- @@ -49,7 +49,7 @@ This matters if you are using base tag settings. #### Defined in -[packages/mermaid/src/config.type.ts:209](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L209) +[packages/mermaid/src/config.type.ts:200](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L200) --- @@ -59,7 +59,7 @@ This matters if you are using base tag settings. #### Defined in -[packages/mermaid/src/config.type.ts:206](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L206) +[packages/mermaid/src/config.type.ts:197](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L197) --- @@ -69,7 +69,7 @@ This matters if you are using base tag settings. #### Defined in -[packages/mermaid/src/config.type.ts:196](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L196) +[packages/mermaid/src/config.type.ts:187](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L187) --- @@ -93,7 +93,7 @@ You can set this attribute to base the seed on a static string. #### Defined in -[packages/mermaid/src/config.type.ts:190](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L190) +[packages/mermaid/src/config.type.ts:181](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L181) --- @@ -111,7 +111,7 @@ should not change unless content is changed. #### Defined in -[packages/mermaid/src/config.type.ts:183](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L183) +[packages/mermaid/src/config.type.ts:174](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L174) --- @@ -121,7 +121,7 @@ should not change unless content is changed. #### Defined in -[packages/mermaid/src/config.type.ts:210](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L210) +[packages/mermaid/src/config.type.ts:201](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L201) --- @@ -149,7 +149,7 @@ should not change unless content is changed. #### Defined in -[packages/mermaid/src/config.type.ts:198](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L198) +[packages/mermaid/src/config.type.ts:189](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L189) --- @@ -159,7 +159,7 @@ should not change unless content is changed. #### Defined in -[packages/mermaid/src/config.type.ts:191](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L191) +[packages/mermaid/src/config.type.ts:182](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L182) --- @@ -183,7 +183,7 @@ See #### Defined in -[packages/mermaid/src/config.type.ts:212](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L212) +[packages/mermaid/src/config.type.ts:203](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L203) --- @@ -197,7 +197,7 @@ If set to true, ignores legacyMathML. #### Defined in -[packages/mermaid/src/config.type.ts:172](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L172) +[packages/mermaid/src/config.type.ts:163](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L163) --- @@ -207,7 +207,7 @@ If set to true, ignores legacyMathML. #### Defined in -[packages/mermaid/src/config.type.ts:193](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L193) +[packages/mermaid/src/config.type.ts:184](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L184) --- @@ -217,7 +217,7 @@ If set to true, ignores legacyMathML. #### Defined in -[packages/mermaid/src/config.type.ts:205](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L205) +[packages/mermaid/src/config.type.ts:196](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L196) --- @@ -243,26 +243,13 @@ Defines the seed to be used when using handDrawn look. This is important for the --- -### iconLibraries - -• `Optional` **iconLibraries**: ([`IconLibrary`](../modules/mermaid.md#iconlibrary) | `"aws:common"` | `"aws:full"` | `"github"` | `"digital-ocean"`)\[] - -This option specifies an object contianing a mappig of SVG icon names to a resolver that returns the svg code. -For supported diagrams (i.e., Architecture), their syntax allows refering to key names in this object to display the corresponding SVG icon in the rendered diagram. - -#### Defined in - -[packages/mermaid/src/config.type.ts:162](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L162) - ---- - ### journey • `Optional` **journey**: `JourneyDiagramConfig` #### Defined in -[packages/mermaid/src/config.type.ts:194](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L194) +[packages/mermaid/src/config.type.ts:185](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L185) --- @@ -323,7 +310,7 @@ Defines which main look to use for the diagram. #### Defined in -[packages/mermaid/src/config.type.ts:213](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L213) +[packages/mermaid/src/config.type.ts:204](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L204) --- @@ -357,7 +344,7 @@ The maximum allowed size of the users text diagram #### Defined in -[packages/mermaid/src/config.type.ts:204](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L204) +[packages/mermaid/src/config.type.ts:195](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L195) --- @@ -367,7 +354,7 @@ The maximum allowed size of the users text diagram #### Defined in -[packages/mermaid/src/config.type.ts:208](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L208) +[packages/mermaid/src/config.type.ts:199](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L199) --- @@ -377,7 +364,7 @@ The maximum allowed size of the users text diagram #### Defined in -[packages/mermaid/src/config.type.ts:199](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L199) +[packages/mermaid/src/config.type.ts:190](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L190) --- @@ -387,7 +374,7 @@ The maximum allowed size of the users text diagram #### Defined in -[packages/mermaid/src/config.type.ts:200](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L200) +[packages/mermaid/src/config.type.ts:191](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L191) --- @@ -397,7 +384,7 @@ The maximum allowed size of the users text diagram #### Defined in -[packages/mermaid/src/config.type.ts:202](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L202) +[packages/mermaid/src/config.type.ts:193](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L193) --- @@ -407,7 +394,7 @@ The maximum allowed size of the users text diagram #### Defined in -[packages/mermaid/src/config.type.ts:207](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L207) +[packages/mermaid/src/config.type.ts:198](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L198) --- @@ -443,7 +430,7 @@ Level of trust for parsed diagram #### Defined in -[packages/mermaid/src/config.type.ts:192](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L192) +[packages/mermaid/src/config.type.ts:183](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L183) --- @@ -465,7 +452,7 @@ Dictates whether mermaid starts on Page load #### Defined in -[packages/mermaid/src/config.type.ts:197](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L197) +[packages/mermaid/src/config.type.ts:188](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L188) --- @@ -478,7 +465,7 @@ This is useful when you want to control how to handle syntax errors in your appl #### Defined in -[packages/mermaid/src/config.type.ts:219](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L219) +[packages/mermaid/src/config.type.ts:210](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L210) --- @@ -521,7 +508,7 @@ You may also use `themeCSS` to override this value. #### Defined in -[packages/mermaid/src/config.type.ts:195](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L195) +[packages/mermaid/src/config.type.ts:186](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L186) --- @@ -531,7 +518,7 @@ You may also use `themeCSS` to override this value. #### Defined in -[packages/mermaid/src/config.type.ts:211](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L211) +[packages/mermaid/src/config.type.ts:202](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L202) --- @@ -541,4 +528,4 @@ You may also use `themeCSS` to override this value. #### Defined in -[packages/mermaid/src/config.type.ts:201](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L201) +[packages/mermaid/src/config.type.ts:192](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L192) diff --git a/docs/config/setup/interfaces/mermaid.RunOptions.md b/docs/config/setup/interfaces/mermaid.RunOptions.md index 6d45d3549..0bcfc2356 100644 --- a/docs/config/setup/interfaces/mermaid.RunOptions.md +++ b/docs/config/setup/interfaces/mermaid.RunOptions.md @@ -18,7 +18,7 @@ The nodes to render. If this is set, `querySelector` will be ignored. #### Defined in -[packages/mermaid/src/mermaid.ts:54](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L54) +[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:58](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L58) +[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:50](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L50) +[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:62](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L62) +[packages/mermaid/src/mermaid.ts:57](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L57) diff --git a/docs/config/setup/modules/mermaid.md b/docs/config/setup/modules/mermaid.md index 3dd6cea4b..cb0f123f2 100644 --- a/docs/config/setup/modules/mermaid.md +++ b/docs/config/setup/modules/mermaid.md @@ -26,41 +26,6 @@ ## Type Aliases -### IconLibrary - -Ƭ **IconLibrary**: `Record`<`string`, [`IconResolver`](mermaid.md#iconresolver)> - -#### Defined in - -[packages/mermaid/src/rendering-util/svgRegister.ts:7](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/svgRegister.ts#L7) - ---- - -### IconResolver - -Ƭ **IconResolver**: (`parent`: `Selection`<`SVGGElement`, `unknown`, `Element` | `null`, `unknown`>, `width?`: `number`) => `Selection`<`SVGGElement`, `unknown`, `Element` | `null`, `unknown`> - -#### Type declaration - -▸ (`parent`, `width?`): `Selection`<`SVGGElement`, `unknown`, `Element` | `null`, `unknown`> - -##### Parameters - -| Name | Type | -| :------- | :-------------------------------------------------------------------- | -| `parent` | `Selection`<`SVGGElement`, `unknown`, `Element` \| `null`, `unknown`> | -| `width?` | `number` | - -##### Returns - -`Selection`<`SVGGElement`, `unknown`, `Element` | `null`, `unknown`> - -#### Defined in - -[packages/mermaid/src/rendering-util/svgRegister.ts:3](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/svgRegister.ts#L3) - ---- - ### InternalHelpers Ƭ **InternalHelpers**: typeof `internalHelpers` @@ -122,29 +87,4 @@ #### Defined in -[packages/mermaid/src/mermaid.ts:456](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L456) - -## Functions - -### createIcon - -▸ **createIcon**(`icon`, `originalSize`): [`IconResolver`](mermaid.md#iconresolver) - -Converts an SVG Icon passed as a string into a properly formatted IconResolver - -#### Parameters - -| Name | Type | Description | -| :------------- | :------- | :-------------------------------------------------------------------------- | -| `icon` | `string` | html code for the svg icon as a string (the SVG tag should not be included) | -| `originalSize` | `number` | the original size of the SVG Icon in pixels | - -#### Returns - -[`IconResolver`](mermaid.md#iconresolver) - -IconResolver - -#### Defined in - -[packages/mermaid/src/rendering-util/svgRegister.ts:15](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/svgRegister.ts#L15) +[packages/mermaid/src/mermaid.ts:452](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L452) diff --git a/docs/ecosystem/integrations-community.md b/docs/ecosystem/integrations-community.md index 75f20dd1a..a9687359b 100644 --- a/docs/ecosystem/integrations-community.md +++ b/docs/ecosystem/integrations-community.md @@ -74,6 +74,7 @@ To add an integration to this list, see the [Integrations - create page](./integ - [Markdown for mermaid plugin](https://github.com/jamieh-mongolian/markdown-for-mermaid-plugin) - [redmine-mermaid](https://github.com/styz/redmine_mermaid) - Visual Studio Code [Polyglot Interactive Notebooks](https://github.com/dotnet/interactive#net-interactive) +- [Microsoft Loop](https://loop.cloud.microsoft) ✅ ### LLM integrations diff --git a/docs/intro/examples.md b/docs/intro/examples.md deleted file mode 100644 index 0909a8cd3..000000000 --- a/docs/intro/examples.md +++ /dev/null @@ -1,247 +0,0 @@ -> **Warning** -> -> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. -> -> ## Please edit the corresponding file in [/packages/mermaid/src/docs/intro/examples.md](../../packages/mermaid/src/docs/intro/examples.md). - -## Diagram Types - -### [Flowchart](../syntax/flowchart.md?id=flowcharts-basic-syntax) - -```mermaid-example -graph TD; - A-->B; - A-->C; - B-->D; - C-->D; -``` - -```mermaid -graph TD; - A-->B; - A-->C; - B-->D; - C-->D; -``` - -### [Sequence diagram](../syntax/sequenceDiagram.md) - -```mermaid-example -sequenceDiagram - participant Alice - participant Bob - Alice->>John: Hello John, how are you? - loop HealthCheck - John->>John: Fight against hypochondria - end - Note right of John: Rational thoughts
prevail! - John-->>Alice: Great! - John->>Bob: How about you? - Bob-->>John: Jolly good! -``` - -```mermaid -sequenceDiagram - participant Alice - participant Bob - Alice->>John: Hello John, how are you? - loop HealthCheck - John->>John: Fight against hypochondria - end - Note right of John: Rational thoughts
prevail! - John-->>Alice: Great! - John->>Bob: How about you? - Bob-->>John: Jolly good! -``` - -### [Gantt diagram](../syntax/gantt.md) - -```mermaid-example -gantt -dateFormat YYYY-MM-DD -title Adding GANTT diagram to mermaid -excludes weekdays 2014-01-10 - -section A section -Completed task :done, des1, 2014-01-06,2014-01-08 -Active task :active, des2, 2014-01-09, 3d -Future task : des3, after des2, 5d -Future task2 : des4, after des3, 5d -``` - -```mermaid -gantt -dateFormat YYYY-MM-DD -title Adding GANTT diagram to mermaid -excludes weekdays 2014-01-10 - -section A section -Completed task :done, des1, 2014-01-06,2014-01-08 -Active task :active, des2, 2014-01-09, 3d -Future task : des3, after des2, 5d -Future task2 : des4, after des3, 5d -``` - -### [Class diagram](../syntax/classDiagram.md) - -```mermaid-example -classDiagram -Class01 <|-- AveryLongClass : Cool -Class03 *-- Class04 -Class05 o-- Class06 -Class07 .. Class08 -Class09 --> C2 : Where am i? -Class09 --* C3 -Class09 --|> Class07 -Class07 : equals() -Class07 : Object[] elementData -Class01 : size() -Class01 : int chimp -Class01 : int gorilla -Class08 <--> C2: Cool label -``` - -```mermaid -classDiagram -Class01 <|-- AveryLongClass : Cool -Class03 *-- Class04 -Class05 o-- Class06 -Class07 .. Class08 -Class09 --> C2 : Where am i? -Class09 --* C3 -Class09 --|> Class07 -Class07 : equals() -Class07 : Object[] elementData -Class01 : size() -Class01 : int chimp -Class01 : int gorilla -Class08 <--> C2: Cool label -``` - -### [Git graph](../syntax/gitgraph.md) - -```mermaid-example - gitGraph - commit - commit - branch develop - commit - commit - commit - checkout main - commit - commit -``` - -```mermaid - gitGraph - commit - commit - branch develop - commit - commit - commit - checkout main - commit - commit -``` - -### [Entity Relationship Diagram - :exclamation: experimental](../syntax/entityRelationshipDiagram.md) - -```mermaid-example -erDiagram - CUSTOMER ||--o{ ORDER : places - ORDER ||--|{ LINE-ITEM : contains - CUSTOMER }|..|{ DELIVERY-ADDRESS : uses - -``` - -```mermaid -erDiagram - CUSTOMER ||--o{ ORDER : places - ORDER ||--|{ LINE-ITEM : contains - CUSTOMER }|..|{ DELIVERY-ADDRESS : uses - -``` - -### [User Journey Diagram](../syntax/userJourney.md) - -```mermaid-example -journey - title My working day - section Go to work - Make tea: 5: Me - Go upstairs: 3: Me - Do work: 1: Me, Cat - section Go home - Go downstairs: 5: Me - Sit down: 5: Me -``` - -```mermaid -journey - title My working day - section Go to work - Make tea: 5: Me - Go upstairs: 3: Me - Do work: 1: Me, Cat - section Go home - Go downstairs: 5: Me - Sit down: 5: Me -``` - -### [Quadrant Chart](../syntax/quadrantChart.md) - -```mermaid-example -quadrantChart - title Reach and engagement of campaigns - x-axis Low Reach --> High Reach - y-axis Low Engagement --> High Engagement - quadrant-1 We should expand - quadrant-2 Need to promote - quadrant-3 Re-evaluate - quadrant-4 May be improved - Campaign A: [0.3, 0.6] - Campaign B: [0.45, 0.23] - Campaign C: [0.57, 0.69] - Campaign D: [0.78, 0.34] - Campaign E: [0.40, 0.34] - Campaign F: [0.35, 0.78] -``` - -```mermaid -quadrantChart - title Reach and engagement of campaigns - x-axis Low Reach --> High Reach - y-axis Low Engagement --> High Engagement - quadrant-1 We should expand - quadrant-2 Need to promote - quadrant-3 Re-evaluate - quadrant-4 May be improved - Campaign A: [0.3, 0.6] - Campaign B: [0.45, 0.23] - Campaign C: [0.57, 0.69] - Campaign D: [0.78, 0.34] - Campaign E: [0.40, 0.34] - Campaign F: [0.35, 0.78] -``` - -### [XY Chart](../syntax/xyChart.md) - -```mermaid-example -xychart-beta - title "Sales Revenue" - x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] - y-axis "Revenue (in $)" 4000 --> 11000 - bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] - line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] -``` - -```mermaid -xychart-beta - title "Sales Revenue" - x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] - y-axis "Revenue (in $)" 4000 --> 11000 - bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] - line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] -``` diff --git a/docs/syntax/architecture.md b/docs/syntax/architecture.md index 2d71d84fb..12a7cf409 100644 --- a/docs/syntax/architecture.md +++ b/docs/syntax/architecture.md @@ -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\+) +# 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 +``` diff --git a/docs/syntax/entityRelationshipDiagram.md b/docs/syntax/entityRelationshipDiagram.md index 77b81f83b..693cb53c7 100644 --- a/docs/syntax/entityRelationshipDiagram.md +++ b/docs/syntax/entityRelationshipDiagram.md @@ -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 -- (v11.0.2-b.1+) If you want a multi-line label on a relationship, use `
` between the two lines (`"first line
second line"`) +- (v11.1.0+) If you want a multi-line label on a relationship, use `
` between the two lines (`"first line
second line"`) ## Styling diff --git a/package.json b/package.json index 21ae5360c..5683b6ed9 100644 --- a/package.json +++ b/package.json @@ -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", @@ -88,7 +88,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", @@ -116,7 +116,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", diff --git a/packages/mermaid-layout-elk/CHANGELOG.md b/packages/mermaid-layout-elk/CHANGELOG.md index e1ec1d2dd..9588e7885 100644 --- a/packages/mermaid-layout-elk/CHANGELOG.md +++ b/packages/mermaid-layout-elk/CHANGELOG.md @@ -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 diff --git a/packages/mermaid-layout-elk/package.json b/packages/mermaid-layout-elk/package.json index 551468947..f229349e2 100644 --- a/packages/mermaid-layout-elk/package.json +++ b/packages/mermaid-layout-elk/package.json @@ -1,6 +1,6 @@ { "name": "@mermaid-chart/layout-elk", - "version": "0.1.2-b.3", + "version": "0.1.3-b.1", "description": "ELK layout engine for mermaid", "module": "dist/mermaid-layout-elk.core.mjs", "types": "dist/layouts.d.ts", diff --git a/packages/mermaid/CHANGELOG.md b/packages/mermaid/CHANGELOG.md index 5a34667fa..d7221d232 100644 --- a/packages/mermaid/CHANGELOG.md +++ b/packages/mermaid/CHANGELOG.md @@ -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 diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json index a52eb493c..171740f41 100644 --- a/packages/mermaid/package.json +++ b/packages/mermaid/package.json @@ -1,6 +1,6 @@ { "name": "@mermaid-chart/mermaid", - "version": "11.0.2-b.9", + "version": "11.1.0-b.1", "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", diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts index a50236778..31169280d 100644 --- a/packages/mermaid/src/config.type.ts +++ b/packages/mermaid/src/config.type.ts @@ -154,15 +154,6 @@ export interface MermaidConfig { * */ legacyMathML?: boolean; - /** - * This option specifies an object contianing a mappig of SVG icon names to a resolver that returns the svg code. - * For supported diagrams (i.e., Architecture), their syntax allows refering to key names in this object to display the corresponding SVG icon in the rendered diagram. - * - */ - iconLibraries?: Array< - | import('./rendering-util/svgRegister.js').IconLibrary - | import('./rendering-util/svg/index.js').IconNamespaceKeys - >; /** * This option forces Mermaid to rely on KaTeX's own stylesheet for rendering MathML. Due to differences between OS * fonts and browser's MathML implementation, this option is recommended if consistent rendering is important. diff --git a/packages/mermaid/src/diagrams/architecture/architectureDb.ts b/packages/mermaid/src/diagrams/architecture/architectureDb.ts index f019d1eff..93fa71ca3 100644 --- a/packages/mermaid/src/diagrams/architecture/architectureDb.ts +++ b/packages/mermaid/src/diagrams/architecture/architectureDb.ts @@ -1,18 +1,29 @@ -// TODO remove no-console -/* eslint-disable no-console */ -import type { - ArchitectureState, - ArchitectureDB, - ArchitectureService, - ArchitectureGroup, - ArchitectureEdge, - ArchitectureDirectionPairMap, - ArchitectureDirectionPair, - ArchitectureSpatialMap, - ArchitectureNode, - ArchitectureJunction, -} from './architectureTypes.js'; +import type { ArchitectureDiagramConfig } from '../../config.type.js'; +import DEFAULT_CONFIG from '../../defaultConfig.js'; import { getConfig } from '../../diagram-api/diagramAPI.js'; +import type { D3Element } from '../../types.js'; +import { ImperativeState } from '../../utils/imperativeState.js'; +import { + clear as commonClear, + getAccDescription, + getAccTitle, + getDiagramTitle, + setAccDescription, + setAccTitle, + setDiagramTitle, +} from '../common/commonDb.js'; +import type { + ArchitectureDB, + ArchitectureDirectionPair, + ArchitectureDirectionPairMap, + ArchitectureEdge, + ArchitectureGroup, + ArchitectureJunction, + ArchitectureNode, + ArchitectureService, + ArchitectureSpatialMap, + ArchitectureState, +} from './architectureTypes.js'; import { getArchitectureDirectionPair, isArchitectureDirection, @@ -20,19 +31,6 @@ import { isArchitectureService, shiftPositionByArchitectureDirectionPair, } from './architectureTypes.js'; -import { - setAccTitle, - getAccTitle, - setDiagramTitle, - getDiagramTitle, - getAccDescription, - setAccDescription, - clear as commonClear, -} from '../common/commonDb.js'; -import type { ArchitectureDiagramConfig } from '../../config.type.js'; -import DEFAULT_CONFIG from '../../defaultConfig.js'; -import type { D3Element } from '../../types.js'; -import { ImperativeState } from '../../utils/imperativeState.js'; const DEFAULT_ARCHITECTURE_CONFIG: Required = DEFAULT_CONFIG.architecture; @@ -286,7 +284,6 @@ const getDataStructures = () => { adjList, spatialMaps, }; - console.log(state.records.dataStructures); } return state.records.dataStructures; }; diff --git a/packages/mermaid/src/diagrams/architecture/architectureIcons.ts b/packages/mermaid/src/diagrams/architecture/architectureIcons.ts new file mode 100644 index 000000000..dd6c99f9c --- /dev/null +++ b/packages/mermaid/src/diagrams/architecture/architectureIcons.ts @@ -0,0 +1,43 @@ +import { unknownIcon } from '$root/rendering-util/icons.js'; +import type { IconifyJSON } from '@iconify/types'; + +const wrapIcon = (icon: string) => { + return `${icon}`; +}; + +export const architectureIcons: IconifyJSON = { + prefix: 'mermaid-architecture', + height: 80, + width: 80, + icons: { + database: { + body: wrapIcon( + '' + ), + }, + server: { + body: wrapIcon( + '' + ), + }, + disk: { + body: wrapIcon( + '' + ), + }, + internet: { + body: wrapIcon( + '' + ), + }, + cloud: { + body: wrapIcon( + '' + ), + }, + unknown: unknownIcon, + blank: { + body: wrapIcon(''), + }, + }, +}; diff --git a/packages/mermaid/src/diagrams/architecture/architectureRenderer.ts b/packages/mermaid/src/diagrams/architecture/architectureRenderer.ts index f23c1894b..3abb69b9f 100644 --- a/packages/mermaid/src/diagrams/architecture/architectureRenderer.ts +++ b/packages/mermaid/src/diagrams/architecture/architectureRenderer.ts @@ -1,39 +1,45 @@ -// TODO remove no-console -/* eslint-disable no-console */ +import { registerIconPacks } from '$root/rendering-util/icons.js'; import type { Position } from 'cytoscape'; import cytoscape from 'cytoscape'; -import type { Diagram } from '../../Diagram.js'; import type { FcoseLayoutOptions } from 'cytoscape-fcose'; import fcose from 'cytoscape-fcose'; +import { select } from 'd3'; import type { DrawDefinition, SVG } from '../../diagram-api/types.js'; +import type { Diagram } from '../../Diagram.js'; 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, - ArchitectureSpatialMap, - EdgeSingularData, - EdgeSingular, ArchitectureJunction, + ArchitectureSpatialMap, + EdgeSingular, + EdgeSingularData, NodeSingularData, } from './architectureTypes.js'; import { type ArchitectureDB, type ArchitectureDirection, - type ArchitectureGroup, type ArchitectureEdge, + type ArchitectureGroup, type ArchitectureService, ArchitectureDirectionName, + edgeData, getOppositeArchitectureDirection, isArchitectureDirectionXY, isArchitectureDirectionY, nodeData, - edgeData, } from './architectureTypes.js'; -import { select } from 'd3'; -import { setupGraphViewbox } from '../../setupGraphViewbox.js'; import { drawEdges, drawGroups, drawJunctions, drawServices } from './svgDraw.js'; -import { getConfigField } from './architectureDb.js'; +registerIconPacks([ + { + name: architectureIcons.prefix, + icons: architectureIcons, + }, +]); cytoscape.use(fcose); function addServices(services: ArchitectureService[], cy: cytoscape.Core) { @@ -319,13 +325,6 @@ function layoutArchitecture( // Create the relative constraints for fcose by using an inverse of the spatial map and performing BFS on it const relativePlacementConstraint = getRelativeConstraints(spatialMaps); - console.log(`Horizontal Alignments:`); - console.log(alignmentConstraint.horizontal); - console.log(`Vertical Alignments:`); - console.log(alignmentConstraint.vertical); - console.log(`Relative Alignments:`); - console.log(relativePlacementConstraint); - const layout = cy.layout({ name: 'fcose', quality: 'proof', @@ -440,9 +439,6 @@ export const draw: DrawDefinition = async (text, id, _version, diagObj: Diagram) const groups = db.getGroups(); const edges = db.getEdges(); const ds = db.getDataStructures(); - console.log('Services: ', services); - console.log('Edges: ', edges); - console.log('Groups: ', groups); const svg: SVG = selectSvgElement(id); @@ -465,8 +461,6 @@ export const draw: DrawDefinition = async (text, id, _version, diagObj: Diagram) positionNodes(db, cy); setupGraphViewbox(undefined, svg, getConfigField('padding'), getConfigField('useMaxWidth')); - - console.log('=============================================================='); }; export const renderer = { draw }; diff --git a/packages/mermaid/src/diagrams/architecture/svgDraw.ts b/packages/mermaid/src/diagrams/architecture/svgDraw.ts index cbe385f27..357839394 100644 --- a/packages/mermaid/src/diagrams/architecture/svgDraw.ts +++ b/packages/mermaid/src/diagrams/architecture/svgDraw.ts @@ -1,26 +1,25 @@ -// TODO remove no-console -/* eslint-disable no-console */ -import type { D3Element } from '../../types.js'; +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, - type ArchitectureDB, - type ArchitectureService, ArchitectureDirectionArrowShift, - isArchitectureDirectionX, - isArchitectureDirectionY, edgeData, - nodeData, - isArchitectureDirectionXY, getArchitectureDirectionPair, getArchitectureDirectionXYFactors, + isArchitectureDirectionX, + isArchitectureDirectionXY, + isArchitectureDirectionY, isArchitecturePairXY, + nodeData, + type ArchitectureDB, type ArchitectureJunction, + type ArchitectureService, } from './architectureTypes.js'; -import type cytoscape from 'cytoscape'; -import { getIcon } from '../../rendering-util/svgRegister.js'; -import { db, getConfigField } from './architectureDb.js'; -import { getConfig } from '../../diagram-api/diagramAPI.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( + `${await getIconSVG(data.icon, { height: groupIconSize, width: groupIconSize, fallbackPrefix: architectureIcons.prefix })}` + ); 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( + `${await getIconSVG(service.icon, { height: iconSize, width: iconSize, fallbackPrefix: architectureIcons.prefix })}` + ); } else if (service.iconText) { - bkgElem = getIcon('blank')?.(bkgElem, iconSize); + bkgElem.html( + `${await getIconSVG('blank', { height: iconSize, width: iconSize, fallbackPrefix: architectureIcons.prefix })}` + ); const textElemContainer = bkgElem.append('g'); const fo = textElemContainer .append('foreignObject') diff --git a/packages/mermaid/src/docs/.vitepress/config.ts b/packages/mermaid/src/docs/.vitepress/config.ts index ebbab35c7..619de961d 100644 --- a/packages/mermaid/src/docs/.vitepress/config.ts +++ b/packages/mermaid/src/docs/.vitepress/config.ts @@ -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' }, diff --git a/packages/mermaid/src/docs/.vitepress/theme/mermaid.ts b/packages/mermaid/src/docs/.vitepress/theme/mermaid.ts index 47e238692..2357fe384 100644 --- a/packages/mermaid/src/docs/.vitepress/theme/mermaid.ts +++ b/packages/mermaid/src/docs/.vitepress/theme/mermaid.ts @@ -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 => { await init; diff --git a/packages/mermaid/src/docs/config/icons.md b/packages/mermaid/src/docs/config/icons.md deleted file mode 100644 index 0b9c78d54..000000000 --- a/packages/mermaid/src/docs/config/icons.md +++ /dev/null @@ -1,61 +0,0 @@ -# SVG Icons (v???+) - -SVG Icons can be used with supported diagrams. Alongside the icon packs included with Mermaid, 3rd party libraries can be included in the configuration to cover additional use-cases. - -## Supported Diagrams - -| Diagram | Usage | -| ------------ | --------------------------------- | -| Architecture | Icon names are surrounded by `()` | - -## Included Icon Packs - -| Icon Pack | Prefix | -| ------------- | ------ | -| default | N/A | -| Amazon AWS | `aws:` | -| Digital Ocean | `do:` | -| GitHub | `gh:` | - -Note that in order to use non-generic icons that are provided with Mermaid, the packs must be explicitly loaded when on initialization initialized. - -```js -import sampleIconPack from 'sample-icon-pack'; - -mermaid.initialize({ - iconLibraries: ['aws:common', 'aws:full', 'github', 'digital-ocean'], -}); -``` - -## Using Custom Icon Packs - -Custom icon packs can be used by including them in the `iconLibraries` array on mermaid initialization. - -```js -import sampleIconPack from 'sample-icon-pack'; - -mermaid.initialize({ - iconLibraries: [sampleIconPack, 'aws:full', ...], -}); -``` - -## Creating Custom Icon Packs - -```js -import { createIcon } from 'mermaid'; -import type { IconLibrary, IconResolver } from 'mermaid'; - -// type IconLibrary = Record; -// createIcon: (icon: string, originalSize: number) => IconResolver -const myIconLibrary: IconLibrary = { - defaultCloudExample: createIcon( - ` - - - `, - 80 - ) -}; - -export default myIconLibrary -``` diff --git a/packages/mermaid/src/docs/ecosystem/integrations-community.md b/packages/mermaid/src/docs/ecosystem/integrations-community.md index 81b0386b1..15f802ed5 100644 --- a/packages/mermaid/src/docs/ecosystem/integrations-community.md +++ b/packages/mermaid/src/docs/ecosystem/integrations-community.md @@ -69,6 +69,7 @@ To add an integration to this list, see the [Integrations - create page](./integ - [Markdown for mermaid plugin](https://github.com/jamieh-mongolian/markdown-for-mermaid-plugin) - [redmine-mermaid](https://github.com/styz/redmine_mermaid) - Visual Studio Code [Polyglot Interactive Notebooks](https://github.com/dotnet/interactive#net-interactive) +- [Microsoft Loop](https://loop.cloud.microsoft) ✅ ### LLM integrations diff --git a/packages/mermaid/src/docs/syntax/architecture.md b/packages/mermaid/src/docs/syntax/architecture.md index f8164f271..476c60532 100644 --- a/packages/mermaid/src/docs/syntax/architecture.md +++ b/packages/mermaid/src/docs/syntax/architecture.md @@ -1,4 +1,4 @@ -# Architecture Diagrams Documentation (v11.0.2-b.7+) +# 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 +``` diff --git a/packages/mermaid/src/docs/syntax/entityRelationshipDiagram.md b/packages/mermaid/src/docs/syntax/entityRelationshipDiagram.md index f995f23b3..8c83d2232 100644 --- a/packages/mermaid/src/docs/syntax/entityRelationshipDiagram.md +++ b/packages/mermaid/src/docs/syntax/entityRelationshipDiagram.md @@ -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 -- (v11.0.2-b.1+) If you want a multi-line label on a relationship, use `
` between the two lines (`"first line
second line"`) +- (v11.1.0+) If you want a multi-line label on a relationship, use `
` between the two lines (`"first line
second line"`) ## Styling diff --git a/packages/mermaid/src/mermaid.ts b/packages/mermaid/src/mermaid.ts index 20e22676b..a7ea01bff 100644 --- a/packages/mermaid/src/mermaid.ts +++ b/packages/mermaid/src/mermaid.ts @@ -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'; @@ -19,8 +20,6 @@ import type { LayoutData } from './rendering-util/types.js'; import type { ParseOptions, ParseResult, RenderResult } from './types.js'; import type { DetailedError } from './utils.js'; import utils, { isDetailedError } from './utils.js'; -import type { IconLibrary, IconResolver } from './rendering-util/svgRegister.js'; -import { createIcon } from './rendering-util/svgRegister.js'; export type { DetailedError, @@ -37,12 +36,8 @@ export type { SVG, SVGGroup, UnknownDiagramError, - IconLibrary, - IconResolver, }; -export { createIcon }; - export interface RunOptions { /** * The query selector to use when finding elements to render. Default: `".mermaid"`. @@ -451,6 +446,7 @@ export interface Mermaid { contentLoaded: typeof contentLoaded; setParseErrorHandler: typeof setParseErrorHandler; detectType: typeof detectType; + registerIconPacks: typeof registerIconPacks; } const mermaid: Mermaid = { @@ -467,6 +463,7 @@ const mermaid: Mermaid = { contentLoaded, setParseErrorHandler, detectType, + registerIconPacks, }; export default mermaid; diff --git a/packages/mermaid/src/mermaidAPI.ts b/packages/mermaid/src/mermaidAPI.ts index 436ce92dc..d98e77137 100644 --- a/packages/mermaid/src/mermaidAPI.ts +++ b/packages/mermaid/src/mermaidAPI.ts @@ -6,6 +6,7 @@ import { select } from 'd3'; import { compile, serialize, stringify } from 'stylis'; // @ts-ignore: TODO Fix ts errors +import DOMPurify from 'dompurify'; import { version } from '../package.json'; import * as configApi from './config.js'; import { addDiagrams } from './diagram-api/diagram-orchestration.js'; @@ -15,7 +16,6 @@ import { attachFunctions } from './interactionDb.js'; import { log, setLogLevel } from './logger.js'; import getStyles from './styles.js'; import theme from './themes/index.js'; -import DOMPurify from 'dompurify'; import type { MermaidConfig } from './config.type.js'; import { evaluate } from './diagrams/common/common.js'; import isEmpty from 'lodash-es/isEmpty.js'; @@ -23,9 +23,6 @@ import { setA11yDiagramInfo, addSVGa11yTitleDescription } from './accessibility. import type { DiagramMetadata, DiagramStyleClassDef, Positions } from './diagram-api/types.js'; import { preprocessDiagram } from './preprocess.js'; import { decodeEntities } from './utils.js'; -import type { IconLibrary } from './rendering-util/svgRegister.js'; -import { registerIcons } from './rendering-util/svgRegister.js'; -import defaultIconLibrary from './rendering-util/svg/index.js'; import { toBase64 } from './utils/base64.js'; import type { D3Element, ParseOptions, RenderResult } from './types.js'; import assignWithDepth from './assignWithDepth.js'; @@ -493,29 +490,6 @@ function initialize(userOptions: MermaidConfig = {}) { // Set default options configApi.saveConfigFromInitialize(options); - registerIcons(defaultIconLibrary); - if (options?.iconLibraries) { - // TODO: find a better way to handle this, assumed to be resolved by the time diagrams are being generated - // eslint-disable-next-line @typescript-eslint/no-misused-promises - options.iconLibraries.forEach(async (library) => { - if (typeof library === 'string') { - let lib: IconLibrary = {}; - if (library === 'aws:common') { - lib = (await import('./rendering-util/svg/aws/awsCommon.js')).default; - } else if (library === 'aws:full') { - lib = (await import('./rendering-util/svg/aws/awsFull.js')).default; - } else if (library === 'digital-ocean') { - lib = (await import('./rendering-util/svg/digital-ocean/digitalOcean.js')).default; - } else if (library === 'github') { - lib = (await import('./rendering-util/svg/github/github.js')).default; - } - registerIcons(lib); - } else { - registerIcons(library); - } - }); - } - if (options?.theme && options.theme in theme) { // Todo merge with user options options.themeVariables = theme[options.theme as keyof typeof theme].getThemeVariables( diff --git a/packages/mermaid/src/rendering-util/icons.ts b/packages/mermaid/src/rendering-util/icons.ts new file mode 100644 index 000000000..27709b822 --- /dev/null +++ b/packages/mermaid/src/rendering-util/icons.ts @@ -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; +} + +interface SyncIconLoader { + name: string; + icons: IconifyJSON; +} + +export type IconLoader = AsyncIconLoader | SyncIconLoader; + +export const unknownIcon: IconifyIcon = { + body: '?', + height: 80, + width: 80, +}; + +const iconsStore = new Map(); +const loaderStore = new Map(); + +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; +}; diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/choice.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/choice.ts index ff3e2998f..5d2804d40 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/choice.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/choice.ts @@ -4,12 +4,15 @@ import type { SVG } from '$root/diagram-api/types.js'; // @ts-ignore TODO: Fix rough typings import rough from 'roughjs'; import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js'; -import { createPathFromPoints, getNodeClasses, labelHelper } from './util.js'; +import { createPathFromPoints, getNodeClasses } from './util.js'; -export const choice = async (parent: SVG, node: Node) => { +export const choice = (parent: SVG, node: Node) => { const { nodeStyles } = styles2String(node); node.label = ''; - const { shapeSvg } = await labelHelper(parent, node, getNodeClasses(node)); + const shapeSvg = parent + .insert('g') + .attr('class', getNodeClasses(node)) + .attr('id', node.domId ?? node.id); const { cssStyles } = node; const s = Math.max(28, node.width ?? 0); @@ -34,8 +37,6 @@ export const choice = async (parent: SVG, node: Node) => { const roughNode = rc.path(choicePath, options); const choiceShape = shapeSvg.insert(() => roughNode, ':first-child'); - choiceShape.attr('class', 'basic label-container'); - if (cssStyles && node.look !== 'handDrawn') { choiceShape.selectAll('path').attr('style', cssStyles); } diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/crossedCircle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/crossedCircle.ts index cb4533daa..fe5b36115 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/crossedCircle.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/crossedCircle.ts @@ -1,5 +1,6 @@ import { log } from '$root/logger.js'; -import { labelHelper, getNodeClasses, updateNodeBounds } from './util.js'; +import { getNodeClasses, updateNodeBounds } from './util.js'; +import type { SVG } from '$root/diagram-api/types.js'; import type { Node } from '$root/rendering-util/types.d.ts'; import { styles2String, @@ -22,11 +23,14 @@ function createLine(r: number) { M ${pointQ1.x},${pointQ1.y} L ${pointQ3.x},${pointQ3.y}`; } -export const crossedCircle = async (parent: SVGAElement, node: Node) => { +export const crossedCircle = (parent: SVG, node: Node) => { const { labelStyles, nodeStyles } = styles2String(node); node.labelStyle = labelStyles; node.label = ''; - const { shapeSvg } = await labelHelper(parent, node, getNodeClasses(node)); + const shapeSvg = parent + .insert('g') + .attr('class', getNodeClasses(node)) + .attr('id', node.domId ?? node.id); const radius = Math.max(30, node?.width ?? 0); const { cssStyles } = node; @@ -46,8 +50,6 @@ export const crossedCircle = async (parent: SVGAElement, node: Node) => { const crossedCircle = shapeSvg.insert(() => circleNode, ':first-child'); crossedCircle.insert(() => lineNode); - crossedCircle.attr('class', 'basic label-container'); - if (cssStyles && node.look !== 'handDrawn') { crossedCircle.selectAll('path').attr('style', cssStyles); } diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/filledCircle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/filledCircle.ts index 9e7f56c84..d0eb82010 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/filledCircle.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/filledCircle.ts @@ -1,6 +1,7 @@ import { log } from '$root/logger.js'; -import { labelHelper, getNodeClasses, updateNodeBounds } from './util.js'; +import { getNodeClasses, updateNodeBounds } from './util.js'; import type { Node } from '$root/rendering-util/types.d.ts'; +import type { SVG } from '$root/diagram-api/types.js'; import { styles2String, userNodeOverrides, @@ -8,11 +9,14 @@ import { import rough from 'roughjs'; import intersect from '../intersect/index.js'; -export const filledCircle = async (parent: SVGAElement, node: Node) => { +export const filledCircle = (parent: SVG, node: Node) => { const { labelStyles, nodeStyles } = styles2String(node); node.label = ''; node.labelStyle = labelStyles; - const { shapeSvg } = await labelHelper(parent, node, getNodeClasses(node)); + const shapeSvg = parent + .insert('g') + .attr('class', getNodeClasses(node)) + .attr('id', node.domId ?? node.id); const radius = 7; const { cssStyles } = node; @@ -29,7 +33,7 @@ export const filledCircle = async (parent: SVGAElement, node: Node) => { const filledCircle = shapeSvg.insert(() => circleNode, ':first-child'); - filledCircle.attr('class', 'basic label-container'); + // filledCircle.attr('class', 'basic label-container'); if (cssStyles && node.look !== 'handDrawn') { filledCircle.selectAll('path').attr('style', cssStyles); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/forkJoin.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/forkJoin.ts index 687d281f0..0c5f171e8 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/forkJoin.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/forkJoin.ts @@ -1,14 +1,17 @@ -import { getNodeClasses, labelHelper, updateNodeBounds } from './util.js'; +import { getNodeClasses, updateNodeBounds } from './util.js'; import intersect from '../intersect/index.js'; import type { Node } from '$root/rendering-util/types.d.ts'; import type { SVG } from '$root/diagram-api/types.js'; import rough from 'roughjs'; import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js'; -export const forkJoin = async (parent: SVG, node: Node, dir: string) => { +export const forkJoin = (parent: SVG, node: Node, dir: string) => { const { nodeStyles } = styles2String(node); node.label = ''; - const { shapeSvg } = await labelHelper(parent, node, getNodeClasses(node)); + const shapeSvg = parent + .insert('g') + .attr('class', getNodeClasses(node)) + .attr('id', node.domId ?? node.id); const { cssStyles } = node; let width = Math.max(70, node?.width ?? 0); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.ts index f74191a9a..bb6a6c210 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.ts @@ -97,9 +97,10 @@ export const userNodeOverrides = (node: Node, options: any) => { fill: stylesMap.get('fill') || mainBkg, fillStyle: 'hachure', // solid fill fillWeight: 4, + hachureGap: 5.2, stroke: stylesMap.get('stroke') || nodeBorder, seed: handDrawnSeed, - strokeWidth: 1.3, + strokeWidth: stylesMap.get('stroke-width')?.replace('px', '') || 1.3, fillLineDash: [0, 0], }, options diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/labelRect.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/labelRect.ts index 2d5c6d6ea..174ea5ae1 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/labelRect.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/labelRect.ts @@ -16,7 +16,7 @@ export const roundedRect = async (parent: SVGAElement, node: Node) => { }; export const labelRect = async (parent: SVGElement, node: Node) => { - const { shapeSvg } = await labelHelper(parent, node, 'label'); + const { shapeSvg, bbox, label } = await labelHelper(parent, node, 'label'); // log.trace('Classes = ', node.class); // add the rect @@ -27,6 +27,10 @@ export const labelRect = async (parent: SVGElement, node: Node) => { const totalHeight = 0.1; rect.attr('width', totalWidth).attr('height', totalHeight); shapeSvg.attr('class', 'label edgeLabel'); + label.attr( + 'transform', + `translate(${-(bbox.width / 2) - (bbox.x - (bbox.left ?? 0))}, ${-(bbox.height / 2) - (bbox.y - (bbox.top ?? 0))})` + ); // if (node.props) { // const propKeys = new Set(Object.keys(node.props)); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/lightningBolt.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/lightningBolt.ts index 48ac31037..75f5b7b20 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/lightningBolt.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/lightningBolt.ts @@ -1,6 +1,7 @@ import { log } from '$root/logger.js'; -import { labelHelper, getNodeClasses, updateNodeBounds } from './util.js'; +import { getNodeClasses, updateNodeBounds } from './util.js'; import type { Node } from '$root/rendering-util/types.d.ts'; +import type { SVG } from '$root/diagram-api/types.js'; import { styles2String, userNodeOverrides, @@ -9,11 +10,14 @@ import rough from 'roughjs'; import intersect from '../intersect/index.js'; import { createPathFromPoints } from './util.js'; -export const lightningBolt = async (parent: SVGAElement, node: Node) => { +export const lightningBolt = (parent: SVG, node: Node) => { const { labelStyles, nodeStyles } = styles2String(node); node.label = ''; node.labelStyle = labelStyles; - const { shapeSvg } = await labelHelper(parent, node, getNodeClasses(node)); + const shapeSvg = parent + .insert('g') + .attr('class', getNodeClasses(node)) + .attr('id', node.domId ?? node.id); const { cssStyles } = node; const height = 80; const width = 80; @@ -42,8 +46,6 @@ export const lightningBolt = async (parent: SVGAElement, node: Node) => { const lightningBolt = shapeSvg.insert(() => lineNode, ':first-child'); - lightningBolt.attr('class', 'basic label-container'); - if (cssStyles && node.look !== 'handDrawn') { lightningBolt.selectAll('path').attr('style', cssStyles); } diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/multiRect.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/multiRect.ts index e675e59db..a836277c6 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/multiRect.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/multiRect.ts @@ -57,7 +57,7 @@ export const multiRect = async (parent: SVGAElement, node: Node) => { const outerPath = createPathFromPoints(outerPathPoints); const outerNode = rc.path(outerPath, options); const innerPath = createPathFromPoints(innerPathPoints); - const innerNode = rc.path(innerPath, options); + const innerNode = rc.path(innerPath, { ...options, fill: 'none' }); const multiRect = shapeSvg.insert(() => innerNode, ':first-child'); multiRect.insert(() => outerNode, ':first-child'); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateEnd.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateEnd.ts index a277ff0b9..882f0ba49 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateEnd.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateEnd.ts @@ -3,10 +3,13 @@ import intersect from '../intersect/index.js'; import type { Node } from '$root/rendering-util/types.d.ts'; import type { SVG } from '$root/diagram-api/types.js'; import rough from 'roughjs'; -import { solidStateFill } from './handDrawnShapeStyles.js'; +import { solidStateFill, styles2String, userNodeOverrides } from './handDrawnShapeStyles.js'; import { getConfig } from '$root/diagram-api/diagramAPI.js'; export const stateEnd = (parent: SVG, node: Node) => { + const { labelStyles, nodeStyles } = styles2String(node); + node.labelStyle = labelStyles; + const { cssStyles } = node; const { themeVariables } = getConfig(); const { lineColor } = themeVariables; const shapeSvg = parent @@ -14,22 +17,34 @@ export const stateEnd = (parent: SVG, node: Node) => { .attr('class', 'node default') .attr('id', node.domId || node.id); - let circle; - let innerCircle; - if (node.look === 'handDrawn') { - // @ts-ignore TODO: Fix rough typings - const rc = rough.svg(shapeSvg); - const roughNode = rc.circle(0, 0, 14, { ...solidStateFill(lineColor), roughness: 0.5 }); - const roughInnerNode = rc.circle(0, 0, 5, { ...solidStateFill(lineColor), fillStyle: 'solid' }); - circle = shapeSvg.insert(() => roughNode); - innerCircle = shapeSvg.insert(() => roughInnerNode); - } else { - innerCircle = shapeSvg.insert('circle', ':first-child'); - circle = shapeSvg.insert('circle', ':first-child'); + // @ts-ignore TODO: Fix rough typings + const rc = rough.svg(shapeSvg); + const options = userNodeOverrides(node, {}); - circle.attr('class', 'state-start').attr('r', 7).attr('width', 14).attr('height', 14); + if (node.look !== 'handDrawn') { + options.roughness = 0; + options.fillStyle = 'solid'; + } - innerCircle.attr('class', 'state-end').attr('r', 5).attr('width', 10).attr('height', 10); + const roughNode = rc.circle(0, 0, 14, { + ...solidStateFill(lineColor), + roughness: 0.5, + ...options, + }); + const roughInnerNode = rc.circle(0, 0, 5, { + ...solidStateFill(lineColor), + fillStyle: 'solid', + ...options, + }); + const circle = shapeSvg.insert(() => roughNode, ':first-child'); + circle.insert(() => roughInnerNode); + + if (cssStyles) { + circle.selectAll('path').attr('style', cssStyles); + } + + if (nodeStyles) { + circle.selectAll('path').attr('style', nodeStyles); } updateNodeBounds(node, circle); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/taggedRect.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/taggedRect.ts index c6d048897..abb8a39c0 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/taggedRect.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/taggedRect.ts @@ -15,7 +15,7 @@ export const taggedRect = async (parent: SVGAElement, node: Node) => { const h = Math.max(bbox.height + (node.padding ?? 0) * 2, node?.height ?? 0); const x = -w / 2; const y = -h / 2; - const tagWidth = 0.2 * w; + const tagWidth = 0.2 * h; const tagHeight = 0.2 * h; const { cssStyles } = node; @@ -45,7 +45,7 @@ export const taggedRect = async (parent: SVGAElement, node: Node) => { const rectNode = rc.path(rectPath, options); const tagPath = createPathFromPoints(tagPoints); - const tagNode = rc.path(tagPath, options); + const tagNode = rc.path(tagPath, { ...options, fillStyle: 'solid' }); const taggedRect = shapeSvg.insert(() => tagNode, ':first-child'); taggedRect.insert(() => rectNode, ':first-child'); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/taggedWaveEdgedRectangle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/taggedWaveEdgedRectangle.ts index 76449aa22..a2b15b821 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/taggedWaveEdgedRectangle.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/taggedWaveEdgedRectangle.ts @@ -67,7 +67,10 @@ export const taggedWaveEdgedRectangle = async (parent: SVGAElement, node: Node) const waveEdgeRectNode = rc.path(waveEdgeRectPath, options); const taggedWaveEdgeRectPath = createPathFromPoints(tagPoints); - const taggedWaveEdgeRectNode = rc.path(taggedWaveEdgeRectPath, options); + const taggedWaveEdgeRectNode = rc.path(taggedWaveEdgeRectPath, { + ...options, + fillStyle: 'solid', + }); const waveEdgeRect = shapeSvg.insert(() => taggedWaveEdgeRectNode, ':first-child'); waveEdgeRect.insert(() => waveEdgeRectNode, ':first-child'); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/waveEdgedRectangle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/waveEdgedRectangle.ts index d3a363d4d..4f0dd6a41 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/waveEdgedRectangle.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/waveEdgedRectangle.ts @@ -19,10 +19,15 @@ export const waveEdgedRectangle = async (parent: SVGAElement, node: Node) => { const labelPaddingY = node.look === 'neo' ? nodePadding * 1 : nodePadding; const w = Math.max(bbox.width + (labelPaddingX ?? 0) * 2, node?.width ?? 0); const h = Math.max(bbox.height + (labelPaddingY ?? 0) * 2, node?.height ?? 0); - const waveAmplitude = h / 4; + const waveAmplitude = h / 8; const finalH = h + waveAmplitude; const { cssStyles } = node; + // To maintain minimum width + const minWidth = 70; + const widthDif = minWidth - w; + const extraW = widthDif > 0 ? widthDif / 2 : 0; + // @ts-ignore - rough is not typed const rc = rough.svg(shapeSvg); const options = userNodeOverrides(node, {}); @@ -33,10 +38,17 @@ export const waveEdgedRectangle = async (parent: SVGAElement, node: Node) => { } const points = [ - { x: -w / 2, y: finalH / 2 }, - ...generateFullSineWavePoints(-w / 2, finalH / 2, w / 2, finalH / 2, waveAmplitude, 0.8), - { x: w / 2, y: -finalH / 2 }, - { x: -w / 2, y: -finalH / 2 }, + { x: -w / 2 - extraW, y: finalH / 2 }, + ...generateFullSineWavePoints( + -w / 2 - extraW, + finalH / 2, + w / 2 + extraW, + finalH / 2, + waveAmplitude, + 0.8 + ), + { x: w / 2 + extraW, y: -finalH / 2 }, + { x: -w / 2 - extraW, y: -finalH / 2 }, ]; const waveEdgeRectPath = createPathFromPoints(points); diff --git a/packages/mermaid/src/rendering-util/svg/aws/awsCommon.ts b/packages/mermaid/src/rendering-util/svg/aws/awsCommon.ts deleted file mode 100644 index 0f3391414..000000000 --- a/packages/mermaid/src/rendering-util/svg/aws/awsCommon.ts +++ /dev/null @@ -1,237 +0,0 @@ -import { createIcon } from '../../svgRegister.js'; -// cSpell:disable -const awsIcons = { - 'aws:amplify': createIcon( - ` - - - - -`, - 80 - ), - 'aws:api-gateway': createIcon( - ` - - - - - - -`, - 80 - ), - 'aws:aurora': createIcon( - ` - - - - -`, - 80 - ), - 'aws:cloudformation': createIcon( - ` - - - - -`, - 80 - ), - 'aws:cloudfront': createIcon( - ` - - - - -`, - 80 - ), - 'aws:cloudwatch': createIcon( - ` - - - - -`, - 80 - ), - 'aws:documentdb': createIcon( - ` - - - - -`, - 80 - ), - 'aws:dynamodb': createIcon( - ` - - - - -`, - 80 - ), - 'aws:ec2': createIcon( - ` - - - - -`, - 80 - ), - 'aws:efs': createIcon( - ` - - - - - - -`, - 80 - ), - 'aws:elastic-beanstalk': createIcon( - ` - - - - -`, - 80 - ), - 'aws:fargate': createIcon( - ` - - - - -`, - 80 - ), - 'aws:iam': createIcon( - ` - - - - -`, - 80 - ), - 'aws:kms': createIcon( - ` - - - - -`, - 80 - ), - 'aws:kinesis': createIcon( - ` - - - - -`, - 80 - ), - 'aws:lambda': createIcon( - ` - - - - -`, - 80 - ), - 'aws:lightsail': createIcon( - ` - - - - -`, - 80 - ), - 'aws:neptune': createIcon( - ` - - - - -`, - 80 - ), - 'aws:rds': createIcon( - ` - - - - -`, - 80 - ), - 'aws:redshift': createIcon( - ` - - - - -`, - 80 - ), - 'aws:route-53': createIcon( - ` - - - - -`, - 80 - ), - 'aws:secrets-manager': createIcon( - ` - - - - -`, - 80 - ), - 'aws:s3': createIcon( - ` - - - - - - -`, - 80 - ), - 'aws:timestream': createIcon( - ` - - - - -`, - 80 - ), - 'aws:vpc': createIcon( - ` - - - - -`, - 80 - ), -}; - -export default awsIcons; diff --git a/packages/mermaid/src/rendering-util/svg/aws/awsFull.ts b/packages/mermaid/src/rendering-util/svg/aws/awsFull.ts deleted file mode 100644 index cae1de757..000000000 --- a/packages/mermaid/src/rendering-util/svg/aws/awsFull.ts +++ /dev/null @@ -1,2816 +0,0 @@ -import { createIcon } from '../../svgRegister.js'; -// cSpell:disable -const awsIcons = { - 'aws:activate': createIcon( - ` - - - - - - -`, - 80 - ), - 'aws:alexa-for-business': createIcon( - ` - - - - -`, - 80 - ), - 'aws:apache-mxnet-on-aws': createIcon( - ` - - - - -`, - 80 - ), - 'aws:app-mesh': createIcon( - ` - - - - -`, - 80 - ), - 'aws:app-runner': createIcon( - ` - - - - - - -`, - 80 - ), - 'aws:appconfig': createIcon( - ` - - - - -`, - 80 - ), - 'aws:appfabric': createIcon( - ` - - - - - - -`, - 80 - ), - 'aws:appflow': createIcon( - ` - - - - - - -`, - 80 - ), - 'aws:application-auto-scaling': createIcon( - ` - - - - - - -`, - 80 - ), - 'aws:application-composer': createIcon( - ` - - - - -`, - 80 - ), - 'aws:application-cost-profiler': createIcon( - ` - - - - - - -`, - 80 - ), - 'aws:application-discovery-service': createIcon( - ` - - - - -`, - 80 - ), - 'aws:application-migration-service': createIcon( - ` - - - - -`, - 80 - ), - 'aws:appstream': createIcon( - ` - - - - -`, - 80 - ), - 'aws:appsync': createIcon( - ` - - - - - - -`, - 80 - ), - 'aws:artifact': createIcon( - ` - - - - -`, - 80 - ), - 'aws:athena': createIcon( - ` - - - - -`, - 80 - ), - 'aws:audit-manager': createIcon( - ` - - - - - - -`, - 80 - ), - 'aws:augmented-ai-a2i': createIcon( - ` - - - - -`, - 80 - ), - 'aws:auto-scaling': createIcon( - ` - - - - -`, - 80 - ), - 'aws:b2b-data-interchange': createIcon( - ` - - - - - - -`, - 80 - ), - 'aws:backint-agent': createIcon( - ` - - - - - - -`, - 80 - ), - 'aws:backup': createIcon( - ` - - - - -`, - 80 - ), - 'aws:batch': createIcon( - ` - - - - -`, - 80 - ), - 'aws:bedrock': createIcon( - ` - - - - - - -`, - 80 - ), - 'aws:billing-conductor': createIcon( - ` - - - - - - -`, - 80 - ), - 'aws:bottlerocket': createIcon( - ` - - - - - - -`, - 80 - ), - 'aws:braket': createIcon( - ` - - - - -`, - 80 - ), - 'aws:budgets': createIcon( - ` - - - - -`, - 80 - ), - 'aws:certificate-manager': createIcon( - ` - - - - -`, - 80 - ), - 'aws:chatbot': createIcon( - ` - - - - -`, - 80 - ), - 'aws:chime-sdk': createIcon( - ` - - - - - - -`, - 80 - ), - 'aws:chime': createIcon( - ` - - - - -`, - 80 - ), - 'aws:clean-rooms': createIcon( - ` - - - - -`, - 80 - ), - 'aws:client-vpn': createIcon( - ` - - - - -`, - 80 - ), - 'aws:cloud-control-api': createIcon( - ` - - - - - - -`, - 80 - ), - 'aws:cloud-development-kit': createIcon( - ` - - - - -`, - 80 - ), - 'aws:cloud-directory': createIcon( - ` - - - - - - -`, - 80 - ), - 'aws:cloud-map': createIcon( - ` - - - - -`, - 80 - ), - 'aws:cloud-wan': createIcon( - ` - - - - -`, - 80 - ), - 'aws:cloud9': createIcon( - ` - - - - -`, - 80 - ), - - 'aws:cloudhsm': createIcon( - ` - - - - -`, - 80 - ), - 'aws:cloudsearch': createIcon( - ` - - - - -`, - 80 - ), - 'aws:cloudshell': createIcon( - ` - - - - - - -`, - 80 - ), - 'aws:cloudtrail': createIcon( - ` - - - - -`, - 80 - ), - 'aws:codeartifact': createIcon( - ` - - - - - - -`, - 80 - ), - 'aws:codebuild': createIcon( - ` - - - - -`, - 80 - ), - 'aws:codecatalyst': createIcon( - ` - - - - -`, - 80 - ), - 'aws:codecommit': createIcon( - ` - - - - -`, - 80 - ), - 'aws:codedeploy': createIcon( - ` - - - - -`, - 80 - ), - 'aws:codeguru': createIcon( - ` - - - - -`, - 80 - ), - 'aws:codepipeline': createIcon( - ` - - - - -`, - 80 - ), - 'aws:codestar': createIcon( - ` - - - - -`, - 80 - ), - 'aws:codewhisperer': createIcon( - ` - - - - - - -`, - 80 - ), - 'aws:cognito': createIcon( - ` - - - - -`, - 80 - ), - 'aws:command-line-interface': createIcon( - ` - - - - -`, - 80 - ), - 'aws:comprehend-medical': createIcon( - ` - - - - - - -`, - 80 - ), - 'aws:comprehend': createIcon( - ` - - - - -`, - 80 - ), - 'aws:compute-optimizer': createIcon( - ` - - - - - - -`, - 80 - ), - 'aws:config': createIcon( - ` - - - - -`, - 80 - ), - 'aws:connect': createIcon( - ` - - - - -`, - 80 - ), - 'aws:console-mobile-application': createIcon( - ` - - - - - - -`, - 80 - ), - 'aws:control-tower': createIcon( - ` - - - - -`, - 80 - ), - 'aws:corretto': createIcon( - ` - - - - - - -`, - 80 - ), - 'aws:cost-and-usage-report': createIcon( - ` - - - - -`, - 80 - ), - 'aws:cost-explorer': createIcon( - ` - - - - -`, - 80 - ), - 'aws:data-exchange': createIcon( - ` - - - - -`, - 80 - ), - 'aws:data-pipeline': createIcon( - ` - - - - -`, - 80 - ), - 'aws:database-migration-service': createIcon( - ` - - - - -`, - 80 - ), - 'aws:datasync': createIcon( - ` - - - - -`, - 80 - ), - 'aws:datazone': createIcon( - ` - - - - -`, - 80 - ), - 'aws:deep-learning-amis': createIcon( - ` - - - - - - -`, - 80 - ), - 'aws:deep-learning-containers': createIcon( - ` - - - - -`, - 80 - ), - 'aws:deepcomposer': createIcon( - ` - - - - -`, - 80 - ), - 'aws:deeplens': createIcon( - ` - - - - -`, - 80 - ), - 'aws:deepracer': createIcon( - ` - - - - -`, - 80 - ), - 'aws:detective': createIcon( - ` - - - - -`, - 80 - ), - 'aws:device-farm': createIcon( - ` - - - - -`, - 80 - ), - 'aws:devops-guru': createIcon( - ` - - - - - - -`, - 80 - ), - 'aws:direct-connect': createIcon( - ` - - - - -`, - 80 - ), - 'aws:directory-service': createIcon( - ` - - - - -`, - 80 - ), - 'aws:distro-for-opentelemetry': createIcon( - ` - - - - - - -`, - 80 - ), - 'aws:ec2-auto-scaling': createIcon( - ` - - - - -`, - 80 - ), - 'aws:ec2-image-builder': createIcon( - ` - - - - -`, - 80 - ), - 'aws:ecs-anywhere': createIcon( - ` - - - - - - -`, - 80 - ), - 'aws:eks-anywhere': createIcon( - ` - - - - - - -`, - 80 - ), - 'aws:eks-cloud': createIcon( - ` - - - - - - -`, - 80 - ), - 'aws:eks-distro': createIcon( - ` - - - - - - -`, - 80 - ), - 'aws:elastic-block-store': createIcon( - ` - - - - -`, - 80 - ), - 'aws:elastic-container-registry': createIcon( - ` - - - - -`, - 80 - ), - 'aws:elastic-container-service': createIcon( - ` - - - - -`, - 80 - ), - 'aws:elastic-disaster-recovery': createIcon( - ` - - - - -`, - 80 - ), - 'aws:elastic-fabric-adapter': createIcon( - ` - - - - - - -`, - 80 - ), - 'aws:elastic-inference': createIcon( - ` - - - - -`, - 80 - ), - 'aws:elastic-kubernetes-service': createIcon( - ` - - - - -`, - 80 - ), - 'aws:elastic-load-balancing': createIcon( - ` - - - - -`, - 80 - ), - 'aws:elastic-transcoder': createIcon( - ` - - - - -`, - 80 - ), - 'aws:elasticache': createIcon( - ` - - - - -`, - 80 - ), - 'aws:elemental-appliances-&-software': createIcon( - ` - - - - -`, - 80 - ), - 'aws:elemental-conductor': createIcon( - ` - - - - -`, - 80 - ), - 'aws:elemental-delta': createIcon( - ` - - - - -`, - 80 - ), - 'aws:elemental-link': createIcon( - ` - - - - - - -`, - 80 - ), - 'aws:elemental-live': createIcon( - ` - - - - -`, - 80 - ), - 'aws:elemental-mediaconnect': createIcon( - ` - - - - -`, - 80 - ), - 'aws:elemental-mediaconvert': createIcon( - ` - - - - -`, - 80 - ), - 'aws:elemental-medialive': createIcon( - ` - - - - -`, - 80 - ), - 'aws:elemental-mediapackage': createIcon( - ` - - - - -`, - 80 - ), - 'aws:elemental-mediastore': createIcon( - ` - - - - -`, - 80 - ), - 'aws:elemental-mediatailor': createIcon( - ` - - - - -`, - 80 - ), - 'aws:elemental-server': createIcon( - ` - - - - -`, - 80 - ), - 'aws:emr': createIcon( - ` - - - - -`, - 80 - ), - 'aws:entity-resolution': createIcon( - ` - - - - - - -`, - 80 - ), - 'aws:eventbridge': createIcon( - ` - - - - -`, - 80 - ), - 'aws:express-workflows': createIcon( - ` - - - - -`, - 80 - ), - 'aws:fault-injection-simulator': createIcon( - ` - - - - - - -`, - 80 - ), - 'aws:file-cache': createIcon( - ` - - - - -`, - 80 - ), - 'aws:finspace': createIcon( - ` - - - - - - -`, - 80 - ), - 'aws:firewall-manager': createIcon( - ` - - - - -`, - 80 - ), - 'aws:forecast': createIcon( - ` - - - - -`, - 80 - ), - 'aws:fraud-detector': createIcon( - ` - - - - -`, - 80 - ), - 'aws:freertos': createIcon( - ` - - - - -`, - 80 - ), - 'aws:fsx-for-lustre': createIcon( - ` - - - - -`, - 80 - ), - 'aws:fsx-for-netapp-ontap': createIcon( - ` - - - - - - -`, - 80 - ), - 'aws:fsx-for-openzfs': createIcon( - ` - - - - -`, - 80 - ), - 'aws:fsx-for-wfs': createIcon( - ` - - - - - - -`, - 80 - ), - 'aws:fsx': createIcon( - ` - - - - - - -`, - 80 - ), - 'aws:gamekit': createIcon( - ` - - - - - - -`, - 80 - ), - 'aws:gamelift': createIcon( - ` - - - - - - -`, - 80 - ), - 'aws:gamesparks': createIcon( - ` - - - - - - -`, - 80 - ), - 'aws:genomics-cli': createIcon( - ` - - - - -`, - 80 - ), - 'aws:global-accelerator': createIcon( - ` - - - - -`, - 80 - ), - 'aws:glue-databrew': createIcon( - ` - - - - - - -`, - 80 - ), - 'aws:glue-elastic-views': createIcon( - ` - - - - - - -`, - 80 - ), - 'aws:glue': createIcon( - ` - - - - -`, - 80 - ), - 'aws:ground-station': createIcon( - ` - - - - -`, - 80 - ), - 'aws:guardduty': createIcon( - ` - - - - -`, - 80 - ), - 'aws:health-dashboard': createIcon( - ` - - - - -`, - 80 - ), - 'aws:healthimaging': createIcon( - ` - - - - - - -`, - 80 - ), - 'aws:healthlake': createIcon( - ` - - - - - - -`, - 80 - ), - 'aws:healthomics': createIcon( - ` - - - - -`, - 80 - ), - 'aws:healthscribe': createIcon( - ` - - - - - - -`, - 80 - ), - 'aws:honeycode': createIcon( - ` - - - - - - -`, - 80 - ), - 'aws:iam-identity-center': createIcon( - ` - - - - -`, - 80 - ), - 'aws:inspector': createIcon( - ` - - - - -`, - 80 - ), - 'aws:interactive-video-service': createIcon( - ` - - - - - - -`, - 80 - ), - 'aws:iot-1-click': createIcon( - ` - - - - -`, - 80 - ), - 'aws:iot-analytics': createIcon( - ` - - - - -`, - 80 - ), - 'aws:iot-button': createIcon( - ` - - - - -`, - 80 - ), - 'aws:iot-core': createIcon( - ` - - - - -`, - 80 - ), - 'aws:iot-device-defender': createIcon( - ` - - - - -`, - 80 - ), - 'aws:iot-device-management': createIcon( - ` - - - - -`, - 80 - ), - 'aws:iot-events': createIcon( - ` - - - - -`, - 80 - ), - 'aws:iot-expresslink': createIcon( - ` - - - - - - -`, - 80 - ), - 'aws:iot-fleetwise': createIcon( - ` - - - - - - -`, - 80 - ), - 'aws:iot-greengrass': createIcon( - ` - - - - -`, - 80 - ), - 'aws:iot-roborunner': createIcon( - ` - - - - - - -`, - 80 - ), - 'aws:iot-sitewise': createIcon( - ` - - - - -`, - 80 - ), - 'aws:iot-things-graph': createIcon( - ` - - - - -`, - 80 - ), - 'aws:iot-twinmaker': createIcon( - ` - - - - - - -`, - 80 - ), - 'aws:iq': createIcon( - ` - - - - - - -`, - 80 - ), - 'aws:kendra': createIcon( - ` - - - - -`, - 80 - ), - 'aws:keyspaces': createIcon( - ` - - - - -`, - 80 - ), - 'aws:kinesis-data-firehose': createIcon( - ` - - - - - - -`, - 80 - ), - 'aws:kinesis-data-streams': createIcon( - ` - - - - - - -`, - 80 - ), - 'aws:kinesis-video-streams': createIcon( - ` - - - - - - -`, - 80 - ), - 'aws:lake-formation': createIcon( - ` - - - - -`, - 80 - ), - 'aws:launch-wizard': createIcon( - ` - - - - -`, - 80 - ), - 'aws:lex': createIcon( - ` - - - - -`, - 80 - ), - 'aws:license-manager': createIcon( - ` - - - - -`, - 80 - ), - 'aws:lightsail-for-research': createIcon( - ` - - - - -`, - 80 - ), - 'aws:local-zones': createIcon( - ` - - - - -`, - 80 - ), - 'aws:location-service': createIcon( - ` - - - - - - -`, - 80 - ), - 'aws:lookout-for-equipment': createIcon( - ` - - - - - - -`, - 80 - ), - 'aws:lookout-for-metrics': createIcon( - ` - - - - - - -`, - 80 - ), - 'aws:lookout-for-vision': createIcon( - ` - - - - - - -`, - 80 - ), - 'aws:macie': createIcon( - ` - - - - -`, - 80 - ), - 'aws:mainframe-modernization': createIcon( - ` - - - - - - -`, - 80 - ), - 'aws:managed-blockchain': createIcon( - ` - - - - -`, - 80 - ), - 'aws:managed-grafana': createIcon( - ` - - - - - - -`, - 80 - ), - 'aws:managed-service-for-apache-flink': createIcon( - ` - - - - - - -`, - 80 - ), - 'aws:managed-service-for-prometheus': createIcon( - ` - - - - - - -`, - 80 - ), - 'aws:managed-services': createIcon( - ` - - - - - - -`, - 80 - ), - 'aws:managed-streaming-for-apache-kafka': createIcon( - ` - - - - -`, - 80 - ), - 'aws:managed-workflows-for-apache-airflow': createIcon( - ` - - - - - - -`, - 80 - ), - 'aws:management-console': createIcon( - ` - - - - -`, - 80 - ), - 'aws:marketplace_dark': createIcon( - ` - - - - -`, - 80 - ), - 'aws:marketplace_light': createIcon( - ` - - - - -`, - 80 - ), - 'aws:memorydb-for-redis': createIcon( - ` - - - - - - -`, - 80 - ), - 'aws:migration-evaluator': createIcon( - ` - - - - - - -`, - 80 - ), - 'aws:migration-hub': createIcon( - ` - - - - -`, - 80 - ), - 'aws:monitron': createIcon( - ` - - - - - - -`, - 80 - ), - 'aws:mq': createIcon( - ` - - - - -`, - 80 - ), - 'aws:network-firewall': createIcon( - ` - - - - - - -`, - 80 - ), - 'aws:neuron': createIcon( - ` - - - - -`, - 80 - ), - 'aws:nice-dcv': createIcon( - ` - - - - - - -`, - 80 - ), - 'aws:nice-enginframe': createIcon( - ` - - - - - - -`, - 80 - ), - 'aws:nimble-studio': createIcon( - ` - - - - - - -`, - 80 - ), - 'aws:nitro-enclaves': createIcon( - ` - - - - -`, - 80 - ), - 'aws:open-3d-engine': createIcon( - ` - - - - - - -`, - 80 - ), - 'aws:opensearch-service': createIcon( - ` - - - - -`, - 80 - ), - 'aws:opsworks': createIcon( - ` - - - - -`, - 80 - ), - 'aws:organizations': createIcon( - ` - - - - -`, - 80 - ), - 'aws:outposts-family': createIcon( - ` - - - - -`, - 80 - ), - 'aws:outposts-rack': createIcon( - ` - - - - -`, - 80 - ), - 'aws:outposts-servers': createIcon( - ` - - - - - - -`, - 80 - ), - 'aws:panorama': createIcon( - ` - - - - - - -`, - 80 - ), - 'aws:parallel-cluster': createIcon( - ` - - - - - - -`, - 80 - ), - 'aws:payment-cryptography': createIcon( - ` - - - - - - -`, - 80 - ), - 'aws:personalize': createIcon( - ` - - - - -`, - 80 - ), - 'aws:pinpoint-apis': createIcon( - ` - - - - - - -`, - 80 - ), - 'aws:pinpoint': createIcon( - ` - - - - - - -`, - 80 - ), - 'aws:polly': createIcon( - ` - - - - -`, - 80 - ), - 'aws:private-5g': createIcon( - ` - - - - -`, - 80 - ), - 'aws:private-certificate-authority': createIcon( - ` - - - - -`, - 80 - ), - 'aws:privatelink': createIcon( - ` - - - - -`, - 80 - ), - 'aws:professional-services': createIcon( - ` - - - - - - -`, - 80 - ), - 'aws:proton': createIcon( - ` - - - - - - -`, - 80 - ), - 'aws:q': createIcon( - ` - - - - - - -`, - 80 - ), - 'aws:quantum-ledger-database': createIcon( - ` - - - - -`, - 80 - ), - 'aws:quicksight': createIcon( - ` - - - - -`, - 80 - ), - 'aws:rds-on-vmware': createIcon( - ` - - - - -`, - 80 - ), - 'aws:red-hat-openshift-service-on-aws': createIcon( - ` - - - - - - -`, - 80 - ), - 'aws:rekognition': createIcon( - ` - - - - -`, - 80 - ), - 'aws:repost-private': createIcon( - ` - - - - - - -`, - 80 - ), - 'aws:repost': createIcon( - ` - - - - - - -`, - 80 - ), - 'aws:reserved-instance-reporting': createIcon( - ` - - - - -`, - 80 - ), - 'aws:resilience-hub': createIcon( - ` - - - - -`, - 80 - ), - 'aws:resource-access-manager': createIcon( - ` - - - - -`, - 80 - ), - 'aws:resource-explorer': createIcon( - ` - - - - -`, - 80 - ), - 'aws:robomaker': createIcon( - ` - - - - -`, - 80 - ), - 'aws:s3-on-outposts': createIcon( - ` - - - - - - -`, - 80 - ), - 'aws:sagemaker-ground-truth': createIcon( - ` - - - - -`, - 80 - ), - 'aws:sagemaker-studio-lab': createIcon( - ` - - - - - - -`, - 80 - ), - 'aws:sagemaker': createIcon( - ` - - - - -`, - 80 - ), - 'aws:savings-plans': createIcon( - ` - - - - - - -`, - 80 - ), - 'aws:security-hub': createIcon( - ` - - - - -`, - 80 - ), - 'aws:security-lake': createIcon( - ` - - - - -`, - 80 - ), - 'aws:serverless-application-repository': createIcon( - ` - - - - -`, - 80 - ), - 'aws:service-catalog': createIcon( - ` - - - - -`, - 80 - ), - 'aws:service-management-connector': createIcon( - ` - - - - -`, - 80 - ), - 'aws:shield': createIcon( - ` - - - - -`, - 80 - ), - 'aws:signer': createIcon( - ` - - - - - - -`, - 80 - ), - 'aws:simple-email-service': createIcon( - ` - - - - -`, - 80 - ), - 'aws:simple-notification-service': createIcon( - ` - - - - -`, - 80 - ), - 'aws:simple-queue-service': createIcon( - ` - - - - -`, - 80 - ), - 'aws:simple-storage-service-glacier': createIcon( - ` - - - - - - -`, - 80 - ), - 'aws:simspace-weaver': createIcon( - ` - - - - -`, - 80 - ), - 'aws:site-to-site-vpn': createIcon( - ` - - - - - - -`, - 80 - ), - 'aws:snowball-edge': createIcon( - ` - - - - -`, - 80 - ), - 'aws:snowball': createIcon( - ` - - - - -`, - 80 - ), - 'aws:snowcone': createIcon( - ` - - - - - - -`, - 80 - ), - 'aws:snowmobile': createIcon( - ` - - - - -`, - 80 - ), - 'aws:step-functions': createIcon( - ` - - - - -`, - 80 - ), - 'aws:storage-gateway': createIcon( - ` - - - - -`, - 80 - ), - 'aws:supply-chain': createIcon( - ` - - - - -`, - 80 - ), - 'aws:support': createIcon( - ` - - - - -`, - 80 - ), - 'aws:systems-manager': createIcon( - ` - - - - -`, - 80 - ), - 'aws:telco-network-builder': createIcon( - ` - - - - -`, - 80 - ), - 'aws:tensorflow-on-aws': createIcon( - ` - - - - -`, - 80 - ), - 'aws:textract': createIcon( - ` - - - - -`, - 80 - ), - 'aws:thinkbox-deadline': createIcon( - ` - - - - - - -`, - 80 - ), - 'aws:thinkbox-frost': createIcon( - ` - - - - - - -`, - 80 - ), - 'aws:thinkbox-krakatoa': createIcon( - ` - - - - - - -`, - 80 - ), - 'aws:thinkbox-sequoia': createIcon( - ` - - - - - - -`, - 80 - ), - 'aws:thinkbox-stoke': createIcon( - ` - - - - - - -`, - 80 - ), - 'aws:thinkbox-xmesh': createIcon( - ` - - - - - - -`, - 80 - ), - 'aws:tools-and-sdks': createIcon( - ` - - - - -`, - 80 - ), - 'aws:torchserve': createIcon( - ` - - - - - - -`, - 80 - ), - 'aws:training-certification': createIcon( - ` - - - - -`, - 80 - ), - 'aws:transcribe': createIcon( - ` - - - - -`, - 80 - ), - 'aws:transfer-family': createIcon( - ` - - - - -`, - 80 - ), - 'aws:transit-gateway': createIcon( - ` - - - - -`, - 80 - ), - 'aws:translate': createIcon( - ` - - - - -`, - 80 - ), - 'aws:trusted-advisor': createIcon( - ` - - - - -`, - 80 - ), - 'aws:verified-access': createIcon( - ` - - - - -`, - 80 - ), - 'aws:verified-permissions': createIcon( - ` - - - - -`, - 80 - ), - 'aws:vmware-cloud-on-aws': createIcon( - ` - - - - -`, - 80 - ), - 'aws:vpc-lattice': createIcon( - ` - - - - -`, - 80 - ), - 'aws:waf': createIcon( - ` - - - - - - -`, - 80 - ), - 'aws:wavelength': createIcon( - ` - - - - -`, - 80 - ), - 'aws:well-architected-tool': createIcon( - ` - - - - -`, - 80 - ), - 'aws:wickr': createIcon( - ` - - - - -`, - 80 - ), - 'aws:workdocs-sdk': createIcon( - ` - - - - - - -`, - 80 - ), - 'aws:workdocs': createIcon( - ` - - - - - - -`, - 80 - ), - 'aws:worklink': createIcon( - ` - - - - -`, - 80 - ), - 'aws:workmail': createIcon( - ` - - - - -`, - 80 - ), - 'aws:workspaces-family': createIcon( - ` - - - - -`, - 80 - ), - 'aws:workspaces-thin-client': createIcon( - ` - - - - - - -`, - 80 - ), - 'aws:x-ray': createIcon( - ` - - - - -`, - 80 - ), -}; - -export default awsIcons; diff --git a/packages/mermaid/src/rendering-util/svg/default/blank.ts b/packages/mermaid/src/rendering-util/svg/default/blank.ts deleted file mode 100644 index 53bf8b92c..000000000 --- a/packages/mermaid/src/rendering-util/svg/default/blank.ts +++ /dev/null @@ -1,11 +0,0 @@ -/** - * Designer: Nicolas Newman - */ -import { createIcon } from '../../svgRegister.js'; - -export default createIcon( - ` - -`, - 80 -); diff --git a/packages/mermaid/src/rendering-util/svg/default/cloud.ts b/packages/mermaid/src/rendering-util/svg/default/cloud.ts deleted file mode 100644 index ad4d860f5..000000000 --- a/packages/mermaid/src/rendering-util/svg/default/cloud.ts +++ /dev/null @@ -1,13 +0,0 @@ -/** - * Designer: Nicolas Newman - * @see https://github.com/NicolasNewman/IconLibrary - */ -import { createIcon } from '../../svgRegister.js'; - -export default createIcon( - ` - - - `, - 80 -); diff --git a/packages/mermaid/src/rendering-util/svg/default/database.ts b/packages/mermaid/src/rendering-util/svg/default/database.ts deleted file mode 100644 index d0fb31296..000000000 --- a/packages/mermaid/src/rendering-util/svg/default/database.ts +++ /dev/null @@ -1,18 +0,0 @@ -/** - * Designer: Nicolas Newman - * @see https://github.com/NicolasNewman/IconLibrary - */ -import { createIcon } from '../../svgRegister.js'; - -export default createIcon( - ` - - - - - - - -`, - 80 -); diff --git a/packages/mermaid/src/rendering-util/svg/default/disk.ts b/packages/mermaid/src/rendering-util/svg/default/disk.ts deleted file mode 100644 index 6e21be9e6..000000000 --- a/packages/mermaid/src/rendering-util/svg/default/disk.ts +++ /dev/null @@ -1,20 +0,0 @@ -/** - * Designer: Nicolas Newman - * @see https://github.com/NicolasNewman/IconLibrary - */ -import { createIcon } from '../../svgRegister.js'; - -export default createIcon( - ` - - - - - - - - - -`, - 80 -); diff --git a/packages/mermaid/src/rendering-util/svg/default/internet.ts b/packages/mermaid/src/rendering-util/svg/default/internet.ts deleted file mode 100644 index fd23d2aca..000000000 --- a/packages/mermaid/src/rendering-util/svg/default/internet.ts +++ /dev/null @@ -1,19 +0,0 @@ -/** - * Designer: Nicolas Newman - * @see https://github.com/NicolasNewman/IconLibrary - */ -import { createIcon } from '../../svgRegister.js'; - -export default createIcon( - ` - - - - - - - - -`, - 80 -); diff --git a/packages/mermaid/src/rendering-util/svg/default/server.ts b/packages/mermaid/src/rendering-util/svg/default/server.ts deleted file mode 100644 index e73e8c406..000000000 --- a/packages/mermaid/src/rendering-util/svg/default/server.ts +++ /dev/null @@ -1,42 +0,0 @@ -/** - * Designer: Nicolas Newman - * @see https://github.com/NicolasNewman/IconLibrary - */ -import { createIcon } from '../../svgRegister.js'; - -export default createIcon( - ` - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -`, - 80 -); diff --git a/packages/mermaid/src/rendering-util/svg/default/unknown.ts b/packages/mermaid/src/rendering-util/svg/default/unknown.ts deleted file mode 100644 index c6889be9b..000000000 --- a/packages/mermaid/src/rendering-util/svg/default/unknown.ts +++ /dev/null @@ -1,13 +0,0 @@ -/** - * Designer: Nicolas Newman - * @see https://github.com/NicolasNewman/IconLibrary - */ -import { createIcon } from '../../svgRegister.js'; - -export default createIcon( - ` - - ? -`, - 80 -); diff --git a/packages/mermaid/src/rendering-util/svg/digital-ocean/digitalOcean.ts b/packages/mermaid/src/rendering-util/svg/digital-ocean/digitalOcean.ts deleted file mode 100644 index bf2501dc5..000000000 --- a/packages/mermaid/src/rendering-util/svg/digital-ocean/digitalOcean.ts +++ /dev/null @@ -1,321 +0,0 @@ -import { createIcon } from '../../svgRegister.js'; -// cSpell:disable -const digitalOceanIcons = { - 'do:api': createIcon( - ` - - - - - - - -`, - 41.61 - ), - 'do:cli': createIcon( - ` - - - - - - - - - -`, - 41.61 - ), - 'do:dns': createIcon( - ` - - - - - - - - - - - - -`, - 41.61 - ), - 'do:droplet': createIcon( - ` - - - - - - - - -`, - 41.61 - ), - 'do:kubernetes': createIcon( - ` - - - - - - - -`, - 41.61 - ), - 'do:local-ssd': createIcon( - ` - - - - - - - - -`, - 41.61 - ), - 'do:mysql': createIcon( - ` - - - - - - - - - - - - - - - -`, - 41.61 - ), - 'do:redis-copy': createIcon( - ` - - - - - - - - - - - - - - - - - - - -`, - 41.61 - ), - 'do:redis': createIcon( - ` - - - - - - - - - - - - - - - - -`, - 41.61 - ), - 'do:monitoring': createIcon( - ` - - - - - - - - - - - - -`, - 41.61 - ), - 'do:projects': createIcon( - ` - - - - - - - - - - - - - -`, - 41.61 - ), - 'do:spaces-cdn': createIcon( - ` - - - - - - - - - - - - -`, - 41.61 - ), - 'do:spaces-object-storage': createIcon( - ` - - - - - - - - - - - - -`, - 41.61 - ), - 'do:teams': createIcon( - ` - - - - - - - - - - - - -`, - 41.61 - ), - 'do:terraform-provider': createIcon( - ` - - - - - - - - - - -`, - 41.61 - ), - 'do:volumes-block-storage': createIcon( - ` - - - - - - - - - - - - - - - -`, - 41.61 - ), -}; - -export default digitalOceanIcons; diff --git a/packages/mermaid/src/rendering-util/svg/github/github.ts b/packages/mermaid/src/rendering-util/svg/github/github.ts deleted file mode 100644 index 6b90573eb..000000000 --- a/packages/mermaid/src/rendering-util/svg/github/github.ts +++ /dev/null @@ -1,26 +0,0 @@ -import { createIcon } from '../../svgRegister.js'; - -const githubIcons = { - 'gh:action': createIcon( - ` - - - - - - - -`, - 200 - ), - 'gh:github': createIcon( - ` - -`, - 98 - ), -}; - -export default githubIcons; diff --git a/packages/mermaid/src/rendering-util/svg/index.ts b/packages/mermaid/src/rendering-util/svg/index.ts deleted file mode 100644 index 22a8514a7..000000000 --- a/packages/mermaid/src/rendering-util/svg/index.ts +++ /dev/null @@ -1,32 +0,0 @@ -import type { IconLibrary } from '../svgRegister.js'; -import database from './default/database.js'; -import server from './default/server.js'; -import disk from './default/disk.js'; -import internet from './default/internet.js'; -import cloud from './default/cloud.js'; -import unknown from './default/unknown.js'; -import blank from './default/blank.js'; - -/** Creates a resolver to the path to lazy-load included icon packs */ -const getIconNamespaces = (basePath: string) => ({ - 'aws:common': `${basePath}/aws/awsCommon.js`, - 'aws:full': `${basePath}/aws/awsFull.js`, - github: `${basePath}/github/github.js`, - 'digital-ocean': `${basePath}/digital-ocean/digitalOcean.js`, -}); - -type IconNamespaceKeys = keyof ReturnType; - -const defaultIconLibrary: IconLibrary = { - database: database, - server: server, - disk: disk, - internet: internet, - cloud: cloud, - unknown: unknown, - blank: blank, -}; - -export default defaultIconLibrary; -export { getIconNamespaces }; -export type { IconNamespaceKeys }; diff --git a/packages/mermaid/src/rendering-util/svgRegister.ts b/packages/mermaid/src/rendering-util/svgRegister.ts deleted file mode 100644 index 6a21d5b8b..000000000 --- a/packages/mermaid/src/rendering-util/svgRegister.ts +++ /dev/null @@ -1,60 +0,0 @@ -import type { Selection } from 'd3-selection'; - -type IconResolver = ( - parent: Selection, - width?: number -) => Selection; -type IconLibrary = Record; - -/** - * 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 - */ -const createIcon: (icon: string, originalSize: number) => IconResolver = (icon, originalSize) => { - return ( - parent: Selection, - size: number = originalSize - ) => { - parent.html(`${icon}`); - return parent; - }; -}; - -const icons: IconLibrary = {}; - -const isIconNameInUse = (name: string): boolean => { - return icons[name] !== undefined; -}; - -const registerIcon = (name: string, resolver: IconResolver) => { - if (!isIconNameInUse(name)) { - icons[name] = resolver; - } -}; - -const registerIcons = (library: IconLibrary) => { - Object.entries(library).forEach(([name, resolver]) => { - if (!isIconNameInUse(name)) { - icons[name] = resolver; - } - }); -}; - -const getIcon = (name: string): IconResolver | null => { - if (isIconNameInUse(name)) { - return icons[name]; - } - return icons.unknown; -}; - -export { - registerIcon, - registerIcons, - getIcon, - isIconNameInUse, - createIcon, - IconLibrary, - IconResolver, -}; diff --git a/packages/mermaid/src/schemas/config.schema.yaml b/packages/mermaid/src/schemas/config.schema.yaml index 896fc6b09..52ecda2ed 100644 --- a/packages/mermaid/src/schemas/config.schema.yaml +++ b/packages/mermaid/src/schemas/config.schema.yaml @@ -231,11 +231,6 @@ properties: fall back to legacy rendering for KaTeX. type: boolean default: false - iconLibraries: - description: | - This option specifies an object contianing a mappig of SVG icon names to a resolver that returns the svg code. - For supported diagrams (i.e., Architecture), their syntax allows refering to key names in this object to display the corresponding SVG icon in the rendered diagram. - tsType: Array forceLegacyMathML: description: | This option forces Mermaid to rely on KaTeX's own stylesheet for rendering MathML. Due to differences between OS diff --git a/packages/parser/CHANGELOG.md b/packages/parser/CHANGELOG.md index 4b864f523..4cf29b73a 100644 --- a/packages/parser/CHANGELOG.md +++ b/packages/parser/CHANGELOG.md @@ -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 diff --git a/packages/parser/package.json b/packages/parser/package.json index fc70e844b..a26a2a71e 100644 --- a/packages/parser/package.json +++ b/packages/parser/package.json @@ -1,6 +1,6 @@ { "name": "@mermaid-js/parser", - "version": "0.2.0", + "version": "0.3.0", "description": "MermaidJS parser", "author": "Yokozuna59", "contributors": [ diff --git a/packages/parser/src/language/architecture/architecture.langium b/packages/parser/src/language/architecture/architecture.langium index 6246b423e..11af26243 100644 --- a/packages/parser/src/language/architecture/architecture.langium +++ b/packages/parser/src/language/architecture/architecture.langium @@ -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: /<|>/; \ No newline at end of file +terminal ARROW_INTO: /<|>/; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 5046c7de5..16a75c97d 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -13,7 +13,7 @@ importers: version: 3.44.6(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.1(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.3(@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.3(@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 @@ -621,6 +624,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==} @@ -2162,6 +2168,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} @@ -4414,8 +4423,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 @@ -7203,6 +7212,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==} @@ -7381,11 +7393,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==} @@ -8338,6 +8345,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'} @@ -9356,6 +9366,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)': @@ -9629,12 +9644,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 @@ -10939,14 +10954,14 @@ snapshots: '@cspell/url@8.14.2': {} - '@cypress/code-coverage@3.12.45(@babel/core@7.25.2)(@babel/preset-env@7.25.3(@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.3(@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.3(@babel/core@7.25.2) '@cypress/webpack-preprocessor': 6.0.2(@babel/core@7.25.2)(@babel/preset-env@7.25.3(@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 @@ -11282,6 +11297,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 @@ -14035,10 +14062,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)) @@ -14049,7 +14076,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) @@ -16757,7 +16784,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 @@ -16847,7 +16874,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 @@ -17468,6 +17495,8 @@ snapshots: package-json-from-dist@1.0.0: {} + package-manager-detector@0.2.0: {} + pako@1.0.11: {} parent-module@1.0.1: @@ -17631,8 +17660,6 @@ snapshots: pngjs@6.0.0: {} - pnpm@8.15.9: {} - points-on-curve@0.2.0: {} points-on-path@0.2.1: @@ -18733,6 +18760,8 @@ snapshots: tinybench@2.9.0: {} + tinyexec@0.3.0: {} + tinypool@0.8.4: {} tinyspy@2.2.1: {} @@ -18973,7 +19002,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: @@ -19097,12 +19126,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