From 30d4632a0b738a2e9d13cbe480b442e27711b31b Mon Sep 17 00:00:00 2001 From: Ashish Jain Date: Wed, 28 Aug 2024 14:50:31 +0200 Subject: [PATCH 01/51] Prettier lint fixes --- .../setup/interfaces/mermaid.MermaidConfig.md | 1 - packages/parser/langium-config.json | 25 ++++--------------- 2 files changed, 5 insertions(+), 21 deletions(-) diff --git a/docs/config/setup/interfaces/mermaid.MermaidConfig.md b/docs/config/setup/interfaces/mermaid.MermaidConfig.md index 95de778d4..96585b405 100644 --- a/docs/config/setup/interfaces/mermaid.MermaidConfig.md +++ b/docs/config/setup/interfaces/mermaid.MermaidConfig.md @@ -69,7 +69,6 @@ This matters if you are using base tag settings. #### Defined in - [packages/mermaid/src/config.type.ts:187](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L187) --- diff --git a/packages/parser/langium-config.json b/packages/parser/langium-config.json index 2246a203d..bf64493ad 100644 --- a/packages/parser/langium-config.json +++ b/packages/parser/langium-config.json @@ -4,42 +4,27 @@ { "id": "info", "grammar": "src/language/info/info.langium", - "fileExtensions": [ - ".mmd", - ".mermaid" - ] + "fileExtensions": [".mmd", ".mermaid"] }, { "id": "packet", "grammar": "src/language/packet/packet.langium", - "fileExtensions": [ - ".mmd", - ".mermaid" - ] + "fileExtensions": [".mmd", ".mermaid"] }, { "id": "pie", "grammar": "src/language/pie/pie.langium", - "fileExtensions": [ - ".mmd", - ".mermaid" - ] + "fileExtensions": [".mmd", ".mermaid"] }, { "id": "architecture", "grammar": "src/language/architecture/architecture.langium", - "fileExtensions": [ - ".mmd", - ".mermaid" - ] + "fileExtensions": [".mmd", ".mermaid"] }, { "id": "gitGraph", "grammar": "src/language/gitGraph/gitGraph.langium", - "fileExtensions": [ - ".mmd", - ".mermaid" - ] + "fileExtensions": [".mmd", ".mermaid"] } ], "mode": "production", From 882a2cc63ee628fc417a1bb32fd6c14e29c0bbd9 Mon Sep 17 00:00:00 2001 From: omkarht Date: Wed, 28 Aug 2024 18:31:16 +0530 Subject: [PATCH 02/51] created spec file for old shapes --- .../integration/rendering/oldShapes.spec.ts | 107 ++++++++++++++++++ 1 file changed, 107 insertions(+) create mode 100644 cypress/integration/rendering/oldShapes.spec.ts diff --git a/cypress/integration/rendering/oldShapes.spec.ts b/cypress/integration/rendering/oldShapes.spec.ts new file mode 100644 index 000000000..9197142ce --- /dev/null +++ b/cypress/integration/rendering/oldShapes.spec.ts @@ -0,0 +1,107 @@ +import { imgSnapshotTest } from '../../helpers/util'; + +const looks = ['classic', 'handDrawn'] as const; +const directions = ['TB', 'BT', 'LR', 'RL'] as const; + +const shapesSet1 = ['text', 'card', 'shadedProcess', 'question', 'hexagon'] as const; + +const shapesSet2 = ['roundedRect', 'squareRect', 'stateStart', 'stateEnd', 'labelRect'] as const; + +const shapesSet3 = ['forkJoin', 'choice', 'note', 'stadium', 'rect_left_inv_arrow'] as const; + +const shapesSet4 = [ + 'subroutine', + 'cylinder', + 'circle', + 'doublecircle', + 'rect_left_inv_arrow', +] 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 }); + }); + }); + }); + }); +}); From 9746497673a5a3491424fab7e0d1eefffc0b81ae Mon Sep 17 00:00:00 2001 From: omkarht Date: Wed, 28 Aug 2024 18:57:43 +0530 Subject: [PATCH 03/51] updated oldShapes.spec.ts file --- cypress/integration/rendering/oldShapes.spec.ts | 12 +++--------- 1 file changed, 3 insertions(+), 9 deletions(-) diff --git a/cypress/integration/rendering/oldShapes.spec.ts b/cypress/integration/rendering/oldShapes.spec.ts index 9197142ce..87615ed6d 100644 --- a/cypress/integration/rendering/oldShapes.spec.ts +++ b/cypress/integration/rendering/oldShapes.spec.ts @@ -3,19 +3,13 @@ import { imgSnapshotTest } from '../../helpers/util'; const looks = ['classic', 'handDrawn'] as const; const directions = ['TB', 'BT', 'LR', 'RL'] as const; -const shapesSet1 = ['text', 'card', 'shadedProcess', 'question', 'hexagon'] 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', 'rect_left_inv_arrow'] as const; +const shapesSet3 = ['forkJoin', 'choice', 'note', 'stadium', 'odd'] as const; -const shapesSet4 = [ - 'subroutine', - 'cylinder', - 'circle', - 'doublecircle', - 'rect_left_inv_arrow', -] as const; +const shapesSet4 = ['subroutine', 'cylinder', 'circle', 'doublecircle', 'odd'] as const; const shapesSet5 = ['anchor', 'lean_right', 'lean_left', 'trapezoid', 'inv_trapezoid'] as const; From 71753671e046f9c8f53e261ebe29766425c912be Mon Sep 17 00:00:00 2001 From: omkarht Date: Wed, 28 Aug 2024 19:02:20 +0530 Subject: [PATCH 04/51] moved old shapes from newShapes.spec.ts file to separate file --- .../integration/rendering/newShapes.spec.ts | 35 +++---------------- 1 file changed, 4 insertions(+), 31 deletions(-) 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) => { From 08d59d3d2b74648fc38ec3eaf41a2ea95ca51410 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Wed, 28 Aug 2024 19:06:47 +0530 Subject: [PATCH 05/51] chore: Align export syntax --- .../mermaid/src/rendering-util/svgRegister.ts | 27 +++++++------------ 1 file changed, 10 insertions(+), 17 deletions(-) diff --git a/packages/mermaid/src/rendering-util/svgRegister.ts b/packages/mermaid/src/rendering-util/svgRegister.ts index 6a21d5b8b..c9627af0a 100644 --- a/packages/mermaid/src/rendering-util/svgRegister.ts +++ b/packages/mermaid/src/rendering-util/svgRegister.ts @@ -1,10 +1,10 @@ import type { Selection } from 'd3-selection'; -type IconResolver = ( +export type IconResolver = ( parent: Selection, width?: number ) => Selection; -type IconLibrary = Record; +export type IconLibrary = Record; /** * Converts an SVG Icon passed as a string into a properly formatted IconResolver @@ -12,7 +12,10 @@ type IconLibrary = Record; * @param originalSize - the original size of the SVG Icon in pixels * @returns IconResolver */ -const createIcon: (icon: string, originalSize: number) => IconResolver = (icon, originalSize) => { +export const createIcon: (icon: string, originalSize: number) => IconResolver = ( + icon, + originalSize +) => { return ( parent: Selection, size: number = originalSize @@ -24,17 +27,17 @@ const createIcon: (icon: string, originalSize: number) => IconResolver = (icon, const icons: IconLibrary = {}; -const isIconNameInUse = (name: string): boolean => { +export const isIconNameInUse = (name: string): boolean => { return icons[name] !== undefined; }; -const registerIcon = (name: string, resolver: IconResolver) => { +export const registerIcon = (name: string, resolver: IconResolver) => { if (!isIconNameInUse(name)) { icons[name] = resolver; } }; -const registerIcons = (library: IconLibrary) => { +export const registerIcons = (library: IconLibrary) => { Object.entries(library).forEach(([name, resolver]) => { if (!isIconNameInUse(name)) { icons[name] = resolver; @@ -42,19 +45,9 @@ const registerIcons = (library: IconLibrary) => { }); }; -const getIcon = (name: string): IconResolver | null => { +export const getIcon = (name: string): IconResolver | null => { if (isIconNameInUse(name)) { return icons[name]; } return icons.unknown; }; - -export { - registerIcon, - registerIcons, - getIcon, - isIconNameInUse, - createIcon, - IconLibrary, - IconResolver, -}; From b3495219aeedd32a90f081a4277ba17dc068c241 Mon Sep 17 00:00:00 2001 From: omkarht Date: Wed, 28 Aug 2024 19:17:18 +0530 Subject: [PATCH 06/51] updated taggedRect Shape --- .../src/rendering-util/rendering-elements/shapes/taggedRect.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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..f77716d0e 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; From bed6c5dd0ca6bebd39b7f86a3144863382998c3a Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Wed, 28 Aug 2024 21:04:21 +0530 Subject: [PATCH 07/51] chore: Move icons to architecture We are planning to release an icons library separately. Till we figure out the APIs for those, all external surface for icons are removed, to avoid making a breaking change when the new library comes. --- docs/config/icons.md | 2 +- .../setup/interfaces/mermaid.Mermaid.md | 26 +- .../setup/interfaces/mermaid.MermaidConfig.md | 37 +- .../setup/interfaces/mermaid.RunOptions.md | 8 +- docs/config/setup/modules/mermaid.md | 62 +- packages/mermaid/src/config.type.ts | 9 - .../diagrams/architecture/architectureDb.ts | 53 +- .../architecture/architectureRenderer.ts | 35 +- .../diagrams/architecture/icons/default.ts | 99 + .../architecture/icons}/svgRegister.ts | 11 +- .../src/diagrams/architecture/svgDraw.ts | 22 +- packages/mermaid/src/docs/config/icons.md | 2 +- packages/mermaid/src/mermaid.ts | 6 - packages/mermaid/src/mermaidAPI.ts | 46 +- .../src/rendering-util/svg/aws/awsCommon.ts | 237 -- .../src/rendering-util/svg/aws/awsFull.ts | 2816 ----------------- .../src/rendering-util/svg/default/blank.ts | 11 - .../src/rendering-util/svg/default/cloud.ts | 13 - .../rendering-util/svg/default/database.ts | 18 - .../src/rendering-util/svg/default/disk.ts | 20 - .../rendering-util/svg/default/internet.ts | 19 - .../src/rendering-util/svg/default/server.ts | 42 - .../src/rendering-util/svg/default/unknown.ts | 13 - .../svg/digital-ocean/digitalOcean.ts | 321 -- .../src/rendering-util/svg/github/github.ts | 26 - .../mermaid/src/rendering-util/svg/index.ts | 32 - .../mermaid/src/schemas/config.schema.yaml | 5 - 27 files changed, 193 insertions(+), 3798 deletions(-) create mode 100644 packages/mermaid/src/diagrams/architecture/icons/default.ts rename packages/mermaid/src/{rendering-util => diagrams/architecture/icons}/svgRegister.ts (87%) delete mode 100644 packages/mermaid/src/rendering-util/svg/aws/awsCommon.ts delete mode 100644 packages/mermaid/src/rendering-util/svg/aws/awsFull.ts delete mode 100644 packages/mermaid/src/rendering-util/svg/default/blank.ts delete mode 100644 packages/mermaid/src/rendering-util/svg/default/cloud.ts delete mode 100644 packages/mermaid/src/rendering-util/svg/default/database.ts delete mode 100644 packages/mermaid/src/rendering-util/svg/default/disk.ts delete mode 100644 packages/mermaid/src/rendering-util/svg/default/internet.ts delete mode 100644 packages/mermaid/src/rendering-util/svg/default/server.ts delete mode 100644 packages/mermaid/src/rendering-util/svg/default/unknown.ts delete mode 100644 packages/mermaid/src/rendering-util/svg/digital-ocean/digitalOcean.ts delete mode 100644 packages/mermaid/src/rendering-util/svg/github/github.ts delete mode 100644 packages/mermaid/src/rendering-util/svg/index.ts diff --git a/docs/config/icons.md b/docs/config/icons.md index d0a80f2d8..5b12c0a64 100644 --- a/docs/config/icons.md +++ b/docs/config/icons.md @@ -4,7 +4,7 @@ > > ## 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 (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. diff --git a/docs/config/setup/interfaces/mermaid.Mermaid.md b/docs/config/setup/interfaces/mermaid.Mermaid.md index 04f5bcc93..09fab149c 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:441](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L441) +[packages/mermaid/src/mermaid.ts:435](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L435) --- @@ -59,7 +59,7 @@ A graph definition key #### Defined in -[packages/mermaid/src/mermaid.ts:443](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L443) +[packages/mermaid/src/mermaid.ts:437](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L437) --- @@ -89,7 +89,7 @@ Use [initialize](mermaid.Mermaid.md#initialize) and [run](mermaid.Mermaid.md#run #### Defined in -[packages/mermaid/src/mermaid.ts:436](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L436) +[packages/mermaid/src/mermaid.ts:430](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L430) --- @@ -116,7 +116,7 @@ This function should be called before the run function. #### 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:434](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L434) --- @@ -130,7 +130,7 @@ Use [parse](mermaid.Mermaid.md#parse) and [render](mermaid.Mermaid.md#render) in #### Defined in -[packages/mermaid/src/mermaid.ts:430](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L430) +[packages/mermaid/src/mermaid.ts:424](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L424) --- @@ -180,7 +180,7 @@ Error if the diagram is invalid and parseOptions.suppressErrors is false or not #### Defined in -[packages/mermaid/src/mermaid.ts:431](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L431) +[packages/mermaid/src/mermaid.ts:425](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L425) --- @@ -190,7 +190,7 @@ Error if the diagram is invalid and parseOptions.suppressErrors is false or not #### Defined in -[packages/mermaid/src/mermaid.ts:425](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L425) +[packages/mermaid/src/mermaid.ts:419](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L419) --- @@ -218,7 +218,7 @@ Used to register external diagram types. #### Defined in -[packages/mermaid/src/mermaid.ts:439](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L439) +[packages/mermaid/src/mermaid.ts:433](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L433) --- @@ -242,7 +242,7 @@ Used to register external diagram types. #### Defined in -[packages/mermaid/src/mermaid.ts:438](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L438) +[packages/mermaid/src/mermaid.ts:432](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L432) --- @@ -268,7 +268,7 @@ Used to register external diagram types. #### Defined in -[packages/mermaid/src/mermaid.ts:432](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L432) +[packages/mermaid/src/mermaid.ts:426](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L426) --- @@ -316,7 +316,7 @@ Renders the mermaid diagrams #### Defined in -[packages/mermaid/src/mermaid.ts:437](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L437) +[packages/mermaid/src/mermaid.ts:431](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L431) --- @@ -351,7 +351,7 @@ to it (eg. dart interop wrapper). (Initially there is no parseError member of me #### 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:436](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L436) --- @@ -361,4 +361,4 @@ to it (eg. dart interop wrapper). (Initially there is no parseError member of me #### Defined in -[packages/mermaid/src/mermaid.ts:424](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L424) +[packages/mermaid/src/mermaid.ts:418](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L418) diff --git a/docs/config/setup/interfaces/mermaid.MermaidConfig.md b/docs/config/setup/interfaces/mermaid.MermaidConfig.md index 96585b405..ad078653a 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:193](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L193) +[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:199](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L199) +[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:196](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L196) +[packages/mermaid/src/config.type.ts:197](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L197) --- @@ -121,7 +121,7 @@ should not change unless content is changed. #### 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:201](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L201) --- @@ -183,7 +183,7 @@ See #### 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:203](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L203) --- @@ -217,7 +217,7 @@ If set to true, ignores legacyMathML. #### 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:196](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L196) --- @@ -243,19 +243,6 @@ 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:152](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L152) - ---- - ### journey • `Optional` **journey**: `JourneyDiagramConfig` @@ -323,7 +310,7 @@ Defines which main look to use for the diagram. #### 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: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:194](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L194) +[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:198](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L198) +[packages/mermaid/src/config.type.ts:199](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L199) --- @@ -407,7 +394,7 @@ The maximum allowed size of the users text diagram #### 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:198](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L198) --- @@ -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:209](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L209) +[packages/mermaid/src/config.type.ts:210](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L210) --- @@ -531,7 +518,7 @@ 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:202](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L202) --- diff --git a/docs/config/setup/interfaces/mermaid.RunOptions.md b/docs/config/setup/interfaces/mermaid.RunOptions.md index 6d45d3549..aae004d6d 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:48](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L48) --- @@ -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:52](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L52) --- @@ -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:44](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L44) --- @@ -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:56](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L56) diff --git a/docs/config/setup/modules/mermaid.md b/docs/config/setup/modules/mermaid.md index 8e3b025b7..bdaeb05e1 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:446](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L446) - -## 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:440](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L440) diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts index 0459faf52..035a158e0 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/architectureRenderer.ts b/packages/mermaid/src/diagrams/architecture/architectureRenderer.ts index f23c1894b..558b90483 100644 --- a/packages/mermaid/src/diagrams/architecture/architectureRenderer.ts +++ b/packages/mermaid/src/diagrams/architecture/architectureRenderer.ts @@ -1,39 +1,40 @@ -// TODO remove no-console -/* eslint-disable no-console */ 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 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 { defaultIconLibrary } from './icons/default.js'; +import { registerIconLibrary } from './icons/svgRegister.js'; import { drawEdges, drawGroups, drawJunctions, drawServices } from './svgDraw.js'; -import { getConfigField } from './architectureDb.js'; +registerIconLibrary(defaultIconLibrary); cytoscape.use(fcose); function addServices(services: ArchitectureService[], cy: cytoscape.Core) { @@ -319,13 +320,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 +434,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 +456,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/icons/default.ts b/packages/mermaid/src/diagrams/architecture/icons/default.ts new file mode 100644 index 000000000..8c33df09c --- /dev/null +++ b/packages/mermaid/src/diagrams/architecture/icons/default.ts @@ -0,0 +1,99 @@ +import { createIcon, type IconLibrary } from './svgRegister.js'; + +export const defaultIconLibrary: IconLibrary = { + database: createIcon( + ` + + + + + + + +`, + 80 + ), + server: createIcon( + ` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +`, + 80 + ), + disk: createIcon( + ` + + + + + + + + + +`, + 80 + ), + internet: createIcon( + ` + + + + + + + + +`, + 80 + ), + cloud: createIcon( + ` + + + `, + 80 + ), + unknown: createIcon( + ` + + ? +`, + 80 + ), + blank: createIcon( + ` + +`, + 80 + ), +}; diff --git a/packages/mermaid/src/rendering-util/svgRegister.ts b/packages/mermaid/src/diagrams/architecture/icons/svgRegister.ts similarity index 87% rename from packages/mermaid/src/rendering-util/svgRegister.ts rename to packages/mermaid/src/diagrams/architecture/icons/svgRegister.ts index c9627af0a..712644afa 100644 --- a/packages/mermaid/src/rendering-util/svgRegister.ts +++ b/packages/mermaid/src/diagrams/architecture/icons/svgRegister.ts @@ -1,3 +1,4 @@ +import { log } from '$root/logger.js'; import type { Selection } from 'd3-selection'; export type IconResolver = ( @@ -31,16 +32,12 @@ export const isIconNameInUse = (name: string): boolean => { return icons[name] !== undefined; }; -export const registerIcon = (name: string, resolver: IconResolver) => { - if (!isIconNameInUse(name)) { - icons[name] = resolver; - } -}; - -export const registerIcons = (library: IconLibrary) => { +export const registerIconLibrary = (library: IconLibrary) => { Object.entries(library).forEach(([name, resolver]) => { if (!isIconNameInUse(name)) { icons[name] = resolver; + } else { + log.warn(`Icon with name ${name} already exists. Skipping registration.`); } }); }; diff --git a/packages/mermaid/src/diagrams/architecture/svgDraw.ts b/packages/mermaid/src/diagrams/architecture/svgDraw.ts index cbe385f27..ef3ddb7f6 100644 --- a/packages/mermaid/src/diagrams/architecture/svgDraw.ts +++ b/packages/mermaid/src/diagrams/architecture/svgDraw.ts @@ -1,26 +1,26 @@ // TODO remove no-console /* eslint-disable no-console */ -import type { D3Element } from '../../types.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 { 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'; +import { getIcon } from './icons/svgRegister.js'; export const drawEdges = async function (edgesEl: D3Element, cy: cytoscape.Core) { const padding = getConfigField('padding'); diff --git a/packages/mermaid/src/docs/config/icons.md b/packages/mermaid/src/docs/config/icons.md index 0b9c78d54..3d27be623 100644 --- a/packages/mermaid/src/docs/config/icons.md +++ b/packages/mermaid/src/docs/config/icons.md @@ -1,4 +1,4 @@ -# SVG Icons (v???+) +# 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. diff --git a/packages/mermaid/src/mermaid.ts b/packages/mermaid/src/mermaid.ts index 0cc94bcc2..43fc5bd31 100644 --- a/packages/mermaid/src/mermaid.ts +++ b/packages/mermaid/src/mermaid.ts @@ -19,8 +19,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 +35,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"`. diff --git a/packages/mermaid/src/mermaidAPI.ts b/packages/mermaid/src/mermaidAPI.ts index af2fbd04d..3fdd967f1 100644 --- a/packages/mermaid/src/mermaidAPI.ts +++ b/packages/mermaid/src/mermaidAPI.ts @@ -6,29 +6,26 @@ import { select } from 'd3'; import { compile, serialize, stringify } from 'stylis'; // @ts-ignore: TODO Fix ts errors +import DOMPurify from 'dompurify'; +import isEmpty from 'lodash-es/isEmpty.js'; import { version } from '../package.json'; +import { addSVGa11yTitleDescription, setA11yDiagramInfo } from './accessibility.js'; +import assignWithDepth from './assignWithDepth.js'; import * as configApi from './config.js'; +import type { MermaidConfig } from './config.type.js'; import { addDiagrams } from './diagram-api/diagram-orchestration.js'; +import type { DiagramMetadata, DiagramStyleClassDef } from './diagram-api/types.js'; import { Diagram } from './Diagram.js'; +import { evaluate } from './diagrams/common/common.js'; import errorRenderer from './diagrams/error/errorRenderer.js'; import { attachFunctions } from './interactionDb.js'; import { log, setLogLevel } from './logger.js'; +import { preprocessDiagram } from './preprocess.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'; -import { setA11yDiagramInfo, addSVGa11yTitleDescription } from './accessibility.js'; -import type { DiagramMetadata, DiagramStyleClassDef } 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, ParseResult, RenderResult } from './types.js'; -import assignWithDepth from './assignWithDepth.js'; +import { decodeEntities } from './utils.js'; +import { toBase64 } from './utils/base64.js'; const MAX_TEXTLENGTH = 50_000; const MAX_TEXTLENGTH_EXCEEDED_MSG = @@ -492,29 +489,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/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/schemas/config.schema.yaml b/packages/mermaid/src/schemas/config.schema.yaml index e90285574..a7b3549eb 100644 --- a/packages/mermaid/src/schemas/config.schema.yaml +++ b/packages/mermaid/src/schemas/config.schema.yaml @@ -227,11 +227,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 From 16faef4613b91a7d3a98a1563c25b57f9238acc7 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Wed, 28 Aug 2024 21:14:30 +0530 Subject: [PATCH 08/51] docs: Changeset --- .changeset/silly-apples-glow.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/silly-apples-glow.md diff --git a/.changeset/silly-apples-glow.md b/.changeset/silly-apples-glow.md new file mode 100644 index 000000000..c06b1590d --- /dev/null +++ b/.changeset/silly-apples-glow.md @@ -0,0 +1,5 @@ +--- +'mermaid': patch +--- + +chore: Move icons to architecture, remove full icon sets to reduce bundle size From 10bdc8dde609b22d5f169acbe41c8012084b9b3a Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Wed, 28 Aug 2024 21:18:52 +0530 Subject: [PATCH 09/51] docs: Remove icons docs --- packages/mermaid/src/docs/config/icons.md | 61 ----------------------- 1 file changed, 61 deletions(-) delete mode 100644 packages/mermaid/src/docs/config/icons.md diff --git a/packages/mermaid/src/docs/config/icons.md b/packages/mermaid/src/docs/config/icons.md deleted file mode 100644 index 3d27be623..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 -``` From 0ecdbf4374687dac6af92092c711fb19c397991a Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Wed, 28 Aug 2024 15:55:38 +0000 Subject: [PATCH 10/51] [autofix.ci] apply automated fixes --- docs/config/icons.md | 67 -------------------------------------------- 1 file changed, 67 deletions(-) delete mode 100644 docs/config/icons.md diff --git a/docs/config/icons.md b/docs/config/icons.md deleted file mode 100644 index 5b12c0a64..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 -``` From dccd6121b14a883610e6603af20b5a3e0476fd1a Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Wed, 28 Aug 2024 21:37:54 +0530 Subject: [PATCH 11/51] chore: Remove aws icons from demo --- demos/architecture.html | 63 ++--------------------------------------- 1 file changed, 3 insertions(+), 60 deletions(-) diff --git a/demos/architecture.html b/demos/architecture.html index fc65b6beb..137b3fbf0 100644 --- a/demos/architecture.html +++ b/demos/architecture.html @@ -226,7 +226,7 @@
-

AWS Icon Demo

+ From 8af76c2608e24a2b52ad1df9fc46ee7302b01392 Mon Sep 17 00:00:00 2001 From: Robson Piere <11904136+robsonpiere@users.noreply.github.com> Date: Wed, 28 Aug 2024 15:04:48 -0300 Subject: [PATCH 12/51] Adding Microsoft Loop --- packages/mermaid/src/docs/ecosystem/integrations-community.md | 1 + 1 file changed, 1 insertion(+) 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 From a568f51024bb976aca17fc824e1a1315b18e2f2a Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Wed, 28 Aug 2024 18:15:48 +0000 Subject: [PATCH 13/51] [autofix.ci] apply automated fixes --- .../setup/interfaces/mermaid.MermaidConfig.md | 56 +++++++++---------- docs/ecosystem/integrations-community.md | 1 + 2 files changed, 29 insertions(+), 28 deletions(-) diff --git a/docs/config/setup/interfaces/mermaid.MermaidConfig.md b/docs/config/setup/interfaces/mermaid.MermaidConfig.md index 96585b405..de1c1e66a 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:193](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L193) +[packages/mermaid/src/config.type.ts:203](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L203) --- @@ -49,7 +49,7 @@ This matters if you are using base tag settings. #### 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:209](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L209) --- @@ -59,7 +59,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:206](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L206) --- @@ -69,7 +69,7 @@ This matters if you are using base tag settings. #### Defined in -[packages/mermaid/src/config.type.ts:187](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L187) +[packages/mermaid/src/config.type.ts:196](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L196) --- @@ -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:181](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L181) +[packages/mermaid/src/config.type.ts:190](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L190) --- @@ -111,7 +111,7 @@ should not change unless content is changed. #### Defined in -[packages/mermaid/src/config.type.ts:174](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L174) +[packages/mermaid/src/config.type.ts:183](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L183) --- @@ -121,7 +121,7 @@ should not change unless content is changed. #### 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:210](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L210) --- @@ -149,7 +149,7 @@ should not change unless content is changed. #### Defined in -[packages/mermaid/src/config.type.ts:189](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L189) +[packages/mermaid/src/config.type.ts:198](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L198) --- @@ -159,7 +159,7 @@ should not change unless content is changed. #### Defined in -[packages/mermaid/src/config.type.ts:182](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L182) +[packages/mermaid/src/config.type.ts:191](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L191) --- @@ -183,7 +183,7 @@ See #### 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:212](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L212) --- @@ -197,7 +197,7 @@ If set to true, ignores legacyMathML. #### Defined in -[packages/mermaid/src/config.type.ts:163](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L163) +[packages/mermaid/src/config.type.ts:172](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L172) --- @@ -207,7 +207,7 @@ If set to true, ignores legacyMathML. #### Defined in -[packages/mermaid/src/config.type.ts:184](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L184) +[packages/mermaid/src/config.type.ts:193](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L193) --- @@ -217,7 +217,7 @@ If set to true, ignores legacyMathML. #### 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:205](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L205) --- @@ -252,7 +252,7 @@ For supported diagrams (i.e., Architecture), their syntax allows refering to key #### Defined in -[packages/mermaid/src/config.type.ts:152](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L152) +[packages/mermaid/src/config.type.ts:162](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L162) --- @@ -262,7 +262,7 @@ For supported diagrams (i.e., Architecture), their syntax allows refering to key #### Defined in -[packages/mermaid/src/config.type.ts:185](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L185) +[packages/mermaid/src/config.type.ts:194](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L194) --- @@ -323,7 +323,7 @@ Defines which main look to use for the diagram. #### 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:213](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L213) --- @@ -357,7 +357,7 @@ The maximum allowed size of the users text diagram #### 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:204](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L204) --- @@ -367,7 +367,7 @@ The maximum allowed size of the users text diagram #### 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:208](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L208) --- @@ -377,7 +377,7 @@ The maximum allowed size of the users text diagram #### 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:199](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L199) --- @@ -387,7 +387,7 @@ The maximum allowed size of the users text diagram #### 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:200](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L200) --- @@ -397,7 +397,7 @@ The maximum allowed size of the users text diagram #### 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:202](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L202) --- @@ -407,7 +407,7 @@ The maximum allowed size of the users text diagram #### 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:207](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L207) --- @@ -443,7 +443,7 @@ Level of trust for parsed diagram #### 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:192](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L192) --- @@ -465,7 +465,7 @@ Dictates whether mermaid starts on Page load #### Defined in -[packages/mermaid/src/config.type.ts:188](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L188) +[packages/mermaid/src/config.type.ts:197](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L197) --- @@ -478,7 +478,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:209](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L209) +[packages/mermaid/src/config.type.ts:219](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L219) --- @@ -521,7 +521,7 @@ You may also use `themeCSS` to override this value. #### Defined in -[packages/mermaid/src/config.type.ts:186](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L186) +[packages/mermaid/src/config.type.ts:195](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L195) --- @@ -531,7 +531,7 @@ 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:211](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L211) --- @@ -541,4 +541,4 @@ You may also use `themeCSS` to override this value. #### 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:201](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L201) 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 From c17f9be10e397f90e0c2e9d023ce439e488243d3 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Thu, 29 Aug 2024 12:38:33 +0530 Subject: [PATCH 14/51] fix: Update diagram keyword --- .../rendering/architecture.spec.ts | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/cypress/integration/rendering/architecture.spec.ts b/cypress/integration/rendering/architecture.spec.ts index 459931979..f27336bad 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 } from '../../helpers/util.ts'; describe('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 From 5309d21588980479ddf154d34c3aaa7c92661635 Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Thu, 29 Aug 2024 07:13:36 +0000 Subject: [PATCH 15/51] [autofix.ci] apply automated fixes --- .../setup/interfaces/mermaid.MermaidConfig.md | 56 +++++++++---------- 1 file changed, 28 insertions(+), 28 deletions(-) diff --git a/docs/config/setup/interfaces/mermaid.MermaidConfig.md b/docs/config/setup/interfaces/mermaid.MermaidConfig.md index 96585b405..de1c1e66a 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:193](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L193) +[packages/mermaid/src/config.type.ts:203](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L203) --- @@ -49,7 +49,7 @@ This matters if you are using base tag settings. #### 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:209](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L209) --- @@ -59,7 +59,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:206](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L206) --- @@ -69,7 +69,7 @@ This matters if you are using base tag settings. #### Defined in -[packages/mermaid/src/config.type.ts:187](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L187) +[packages/mermaid/src/config.type.ts:196](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L196) --- @@ -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:181](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L181) +[packages/mermaid/src/config.type.ts:190](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L190) --- @@ -111,7 +111,7 @@ should not change unless content is changed. #### Defined in -[packages/mermaid/src/config.type.ts:174](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L174) +[packages/mermaid/src/config.type.ts:183](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L183) --- @@ -121,7 +121,7 @@ should not change unless content is changed. #### 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:210](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L210) --- @@ -149,7 +149,7 @@ should not change unless content is changed. #### Defined in -[packages/mermaid/src/config.type.ts:189](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L189) +[packages/mermaid/src/config.type.ts:198](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L198) --- @@ -159,7 +159,7 @@ should not change unless content is changed. #### Defined in -[packages/mermaid/src/config.type.ts:182](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L182) +[packages/mermaid/src/config.type.ts:191](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L191) --- @@ -183,7 +183,7 @@ See #### 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:212](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L212) --- @@ -197,7 +197,7 @@ If set to true, ignores legacyMathML. #### Defined in -[packages/mermaid/src/config.type.ts:163](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L163) +[packages/mermaid/src/config.type.ts:172](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L172) --- @@ -207,7 +207,7 @@ If set to true, ignores legacyMathML. #### Defined in -[packages/mermaid/src/config.type.ts:184](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L184) +[packages/mermaid/src/config.type.ts:193](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L193) --- @@ -217,7 +217,7 @@ If set to true, ignores legacyMathML. #### 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:205](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L205) --- @@ -252,7 +252,7 @@ For supported diagrams (i.e., Architecture), their syntax allows refering to key #### Defined in -[packages/mermaid/src/config.type.ts:152](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L152) +[packages/mermaid/src/config.type.ts:162](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L162) --- @@ -262,7 +262,7 @@ For supported diagrams (i.e., Architecture), their syntax allows refering to key #### Defined in -[packages/mermaid/src/config.type.ts:185](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L185) +[packages/mermaid/src/config.type.ts:194](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L194) --- @@ -323,7 +323,7 @@ Defines which main look to use for the diagram. #### 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:213](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L213) --- @@ -357,7 +357,7 @@ The maximum allowed size of the users text diagram #### 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:204](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L204) --- @@ -367,7 +367,7 @@ The maximum allowed size of the users text diagram #### 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:208](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L208) --- @@ -377,7 +377,7 @@ The maximum allowed size of the users text diagram #### 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:199](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L199) --- @@ -387,7 +387,7 @@ The maximum allowed size of the users text diagram #### 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:200](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L200) --- @@ -397,7 +397,7 @@ The maximum allowed size of the users text diagram #### 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:202](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L202) --- @@ -407,7 +407,7 @@ The maximum allowed size of the users text diagram #### 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:207](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L207) --- @@ -443,7 +443,7 @@ Level of trust for parsed diagram #### 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:192](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L192) --- @@ -465,7 +465,7 @@ Dictates whether mermaid starts on Page load #### Defined in -[packages/mermaid/src/config.type.ts:188](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L188) +[packages/mermaid/src/config.type.ts:197](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L197) --- @@ -478,7 +478,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:209](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L209) +[packages/mermaid/src/config.type.ts:219](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L219) --- @@ -521,7 +521,7 @@ You may also use `themeCSS` to override this value. #### Defined in -[packages/mermaid/src/config.type.ts:186](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L186) +[packages/mermaid/src/config.type.ts:195](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L195) --- @@ -531,7 +531,7 @@ 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:211](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L211) --- @@ -541,4 +541,4 @@ You may also use `themeCSS` to override this value. #### 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:201](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L201) From 45e2366b5be31b8b5e06f7f107124b8e23b1ae23 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Thu, 29 Aug 2024 13:03:02 +0530 Subject: [PATCH 16/51] test: Skip architecture diagram --- cypress/integration/rendering/architecture.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/cypress/integration/rendering/architecture.spec.ts b/cypress/integration/rendering/architecture.spec.ts index f27336bad..9eefbe1e4 100644 --- a/cypress/integration/rendering/architecture.spec.ts +++ b/cypress/integration/rendering/architecture.spec.ts @@ -1,6 +1,6 @@ import { imgSnapshotTest } from '../../helpers/util.ts'; -describe('architecture diagram', () => { +describe.skip('architecture diagram', () => { it('should render a simple architecture diagram with groups', () => { imgSnapshotTest( `architecture-beta From 56e9095619b7f812bf25fdb7f0103b325ec77d9b Mon Sep 17 00:00:00 2001 From: omkarht Date: Thu, 29 Aug 2024 13:09:40 +0530 Subject: [PATCH 17/51] updated labelRect shape --- .../rendering-util/rendering-elements/shapes/labelRect.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) 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)); From 0ea88df662ceb782ded3e0d031b5ef9bbb1b8995 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Thu, 29 Aug 2024 13:25:45 +0530 Subject: [PATCH 18/51] feat: Add iconify support --- packages/mermaid/package.json | 4 +- packages/mermaid/src/mermaid.ts | 3 ++ packages/mermaid/src/rendering-util/icons.ts | 36 ++++++++++++++++++ pnpm-lock.yaml | 39 ++++++++++++++++++++ 4 files changed, 81 insertions(+), 1 deletion(-) create mode 100644 packages/mermaid/src/rendering-util/icons.ts diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json index 3fee53a0d..198627560 100644 --- a/packages/mermaid/package.json +++ b/packages/mermaid/package.json @@ -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/mermaid.ts b/packages/mermaid/src/mermaid.ts index 43fc5bd31..52cca1cfe 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'; @@ -435,6 +436,7 @@ export interface Mermaid { contentLoaded: typeof contentLoaded; setParseErrorHandler: typeof setParseErrorHandler; detectType: typeof detectType; + registerIconPacks: typeof registerIconPacks; } const mermaid: Mermaid = { @@ -451,6 +453,7 @@ const mermaid: Mermaid = { contentLoaded, setParseErrorHandler, detectType, + registerIconPacks, }; export default mermaid; diff --git a/packages/mermaid/src/rendering-util/icons.ts b/packages/mermaid/src/rendering-util/icons.ts new file mode 100644 index 000000000..76a03cde5 --- /dev/null +++ b/packages/mermaid/src/rendering-util/icons.ts @@ -0,0 +1,36 @@ +import { log } from '$root/logger.js'; +import type { IconifyJSON } from '@iconify/types'; +import type { IconifyIconCustomisations } from '@iconify/utils'; +import { getIconData, iconToHTML, iconToSVG, replaceIDs, stringToIcon } from '@iconify/utils'; + +export const iconsStore = new Map(); + +export const registerIconPacks = (...iconPacks: IconifyJSON[]) => { + for (const pack of iconPacks) { + iconsStore.set(pack.prefix, pack); + } +}; + +export const getIconSVG = (iconName: string, customisations?: IconifyIconCustomisations) => { + try { + const data = stringToIcon(iconName, true, true); + if (!data) { + throw new Error(`Invalid icon name: ${iconName}`); + } + const icons = iconsStore.get(data.prefix || 'default'); + if (!icons) { + throw new Error(`Icon set not found: ${data.prefix}`); + } + const iconData = getIconData(icons, data.name); + if (!iconData) { + throw new Error(`Icon not found: ${iconName}`); + } + const renderData = iconToSVG(iconData, customisations); + const svg = iconToHTML(replaceIDs(renderData.body), renderData.attributes); + return svg; + } catch (e) { + log.error(e); + // Return unknown icon svg. + return '?'; + } +}; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c8e7d0411..654055151 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -212,6 +212,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 +270,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 @@ -612,6 +618,9 @@ packages: '@antfu/install-pkg@0.1.1': resolution: {integrity: sha512-LyB/8+bSfa0DFGC06zpCEfs89/XoWZwws5ygEa5D+Xsm3OfI+aXQ86VgVG7Acyef+rSZ5HE7J8rrxzrQeM3PjQ==} + '@antfu/install-pkg@0.4.1': + resolution: {integrity: sha512-T7yB5QNG29afhWVkVq7XeIMBa5U/vs9mX69YqayXypPRmYzUmzwnYltplHmPtZ4HPCn+sQKeXW8I47wCbuBOjw==} + '@antfu/utils@0.7.10': resolution: {integrity: sha512-+562v9k4aI80m1+VuMHehNJWLOFjBnXn3tdOitzD0il5b7smkSBal4+a3oKiQTbrwMmN/TBUMDvbdoWDehgOww==} @@ -2175,6 +2184,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} @@ -7147,6 +7159,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==} @@ -8283,6 +8298,9 @@ packages: tinybench@2.9.0: resolution: {integrity: sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==} + tinyexec@0.3.0: + resolution: {integrity: sha512-tVGE0mVJPGb0chKhqmsoosjsS+qUnJVGJpZgsHYQcGoPlG3B51R3PouqTgEGH2Dc9jjFyOqOpix6ZHNMXp1FZg==} + tinypool@0.8.4: resolution: {integrity: sha512-i11VH5gS6IFeLY3gMBQ00/MmLncVP7JLXOw1vlgkytLmJK7QnEr7NXf0LBdxfmNPAeyetukOk0bOYrJrFGjYJQ==} engines: {node: '>=14.0.0'} @@ -9281,6 +9299,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)': @@ -11249,6 +11272,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 @@ -17290,6 +17325,8 @@ snapshots: package-json-from-dist@1.0.0: {} + package-manager-detector@0.2.0: {} + pako@1.0.11: {} parent-module@1.0.1: @@ -18556,6 +18593,8 @@ snapshots: tinybench@2.9.0: {} + tinyexec@0.3.0: {} + tinypool@0.8.4: {} tinyspy@2.2.1: {} From e0f7ea56e129783226e780d54ba4466f5cd8b9a0 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Thu, 29 Aug 2024 13:55:20 +0530 Subject: [PATCH 19/51] fix: Unknown icon size --- packages/mermaid/src/rendering-util/icons.ts | 69 ++++++++++++++------ 1 file changed, 48 insertions(+), 21 deletions(-) diff --git a/packages/mermaid/src/rendering-util/icons.ts b/packages/mermaid/src/rendering-util/icons.ts index 76a03cde5..199bc4206 100644 --- a/packages/mermaid/src/rendering-util/icons.ts +++ b/packages/mermaid/src/rendering-util/icons.ts @@ -1,8 +1,14 @@ import { log } from '$root/logger.js'; -import type { IconifyJSON } from '@iconify/types'; +import type { ExtendedIconifyIcon, IconifyIcon, IconifyJSON } from '@iconify/types'; import type { IconifyIconCustomisations } from '@iconify/utils'; import { getIconData, iconToHTML, iconToSVG, replaceIDs, stringToIcon } from '@iconify/utils'; +export const unknownIcon: IconifyIcon = { + body: '?', + height: 80, + width: 80, +}; + export const iconsStore = new Map(); export const registerIconPacks = (...iconPacks: IconifyJSON[]) => { @@ -11,26 +17,47 @@ export const registerIconPacks = (...iconPacks: IconifyJSON[]) => { } }; -export const getIconSVG = (iconName: string, customisations?: IconifyIconCustomisations) => { +const getRegisteredIconData = (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}`); + } + const icons = iconsStore.get(prefix); + if (!icons) { + throw new Error(`Icon set not found: ${data.prefix}`); + } + const iconData = getIconData(icons, data.name); + if (!iconData) { + throw new Error(`Icon not found: ${iconName}`); + } + return iconData; +}; + +export const isIconAvailable = (iconName: string) => { try { - const data = stringToIcon(iconName, true, true); - if (!data) { - throw new Error(`Invalid icon name: ${iconName}`); - } - const icons = iconsStore.get(data.prefix || 'default'); - if (!icons) { - throw new Error(`Icon set not found: ${data.prefix}`); - } - const iconData = getIconData(icons, data.name); - if (!iconData) { - throw new Error(`Icon not found: ${iconName}`); - } - const renderData = iconToSVG(iconData, customisations); - const svg = iconToHTML(replaceIDs(renderData.body), renderData.attributes); - return svg; - } catch (e) { - log.error(e); - // Return unknown icon svg. - return '?'; + getRegisteredIconData(iconName); + return true; + } catch { + return false; } }; + +export const getIconSVG = ( + iconName: string, + customisations?: IconifyIconCustomisations & { fallbackPrefix?: string } +) => { + let iconData: ExtendedIconifyIcon; + try { + iconData = 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; +}; From 6ecdf7be688efdc53c52fea3ba891327242bc890 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Thu, 29 Aug 2024 13:56:16 +0530 Subject: [PATCH 20/51] docs: Changeset --- .changeset/eight-apricots-arrive.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/eight-apricots-arrive.md diff --git a/.changeset/eight-apricots-arrive.md b/.changeset/eight-apricots-arrive.md new file mode 100644 index 000000000..551d79837 --- /dev/null +++ b/.changeset/eight-apricots-arrive.md @@ -0,0 +1,5 @@ +--- +'mermaid': minor +--- + +feat: Add support for iconify icons From a4b7e494dbc39a49393be144050b60d9a47613b1 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Thu, 29 Aug 2024 13:56:43 +0530 Subject: [PATCH 21/51] feat: Support - in icon names --- .../parser/src/language/architecture/architecture.langium | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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: /<|>/; From 790f71bb1a118e82fb92b4fbf7fe2ccbd3c8e5a3 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Thu, 29 Aug 2024 14:00:21 +0530 Subject: [PATCH 22/51] feat: Move architecture icons into iconify format --- .../architecture/architectureIcons.ts | 43 ++++++++ .../architecture/architectureRenderer.ts | 6 +- .../diagrams/architecture/icons/default.ts | 99 ------------------- .../architecture/icons/svgRegister.ts | 50 ---------- .../src/diagrams/architecture/svgDraw.ts | 20 ++-- 5 files changed, 58 insertions(+), 160 deletions(-) create mode 100644 packages/mermaid/src/diagrams/architecture/architectureIcons.ts delete mode 100644 packages/mermaid/src/diagrams/architecture/icons/default.ts delete mode 100644 packages/mermaid/src/diagrams/architecture/icons/svgRegister.ts 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 558b90483..84b9ed655 100644 --- a/packages/mermaid/src/diagrams/architecture/architectureRenderer.ts +++ b/packages/mermaid/src/diagrams/architecture/architectureRenderer.ts @@ -1,3 +1,4 @@ +import { registerIconPacks } from '$root/rendering-util/icons.js'; import type { Position } from 'cytoscape'; import cytoscape from 'cytoscape'; import type { FcoseLayoutOptions } from 'cytoscape-fcose'; @@ -9,6 +10,7 @@ import { log } from '../../logger.js'; import { selectSvgElement } from '../../rendering-util/selectSvgElement.js'; import { setupGraphViewbox } from '../../setupGraphViewbox.js'; import { getConfigField } from './architectureDb.js'; +import { architectureIcons } from './architectureIcons.js'; import type { ArchitectureDataStructures, ArchitectureJunction, @@ -30,11 +32,9 @@ import { isArchitectureDirectionY, nodeData, } from './architectureTypes.js'; -import { defaultIconLibrary } from './icons/default.js'; -import { registerIconLibrary } from './icons/svgRegister.js'; import { drawEdges, drawGroups, drawJunctions, drawServices } from './svgDraw.js'; -registerIconLibrary(defaultIconLibrary); +registerIconPacks(architectureIcons); cytoscape.use(fcose); function addServices(services: ArchitectureService[], cy: cytoscape.Core) { diff --git a/packages/mermaid/src/diagrams/architecture/icons/default.ts b/packages/mermaid/src/diagrams/architecture/icons/default.ts deleted file mode 100644 index 8c33df09c..000000000 --- a/packages/mermaid/src/diagrams/architecture/icons/default.ts +++ /dev/null @@ -1,99 +0,0 @@ -import { createIcon, type IconLibrary } from './svgRegister.js'; - -export const defaultIconLibrary: IconLibrary = { - database: createIcon( - ` - - - - - - - -`, - 80 - ), - server: createIcon( - ` - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -`, - 80 - ), - disk: createIcon( - ` - - - - - - - - - -`, - 80 - ), - internet: createIcon( - ` - - - - - - - - -`, - 80 - ), - cloud: createIcon( - ` - - - `, - 80 - ), - unknown: createIcon( - ` - - ? -`, - 80 - ), - blank: createIcon( - ` - -`, - 80 - ), -}; diff --git a/packages/mermaid/src/diagrams/architecture/icons/svgRegister.ts b/packages/mermaid/src/diagrams/architecture/icons/svgRegister.ts deleted file mode 100644 index 712644afa..000000000 --- a/packages/mermaid/src/diagrams/architecture/icons/svgRegister.ts +++ /dev/null @@ -1,50 +0,0 @@ -import { log } from '$root/logger.js'; -import type { Selection } from 'd3-selection'; - -export type IconResolver = ( - parent: Selection, - width?: number -) => Selection; -export 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 - */ -export const createIcon: (icon: string, originalSize: number) => IconResolver = ( - icon, - originalSize -) => { - return ( - parent: Selection, - size: number = originalSize - ) => { - parent.html(`${icon}`); - return parent; - }; -}; - -const icons: IconLibrary = {}; - -export const isIconNameInUse = (name: string): boolean => { - return icons[name] !== undefined; -}; - -export const registerIconLibrary = (library: IconLibrary) => { - Object.entries(library).forEach(([name, resolver]) => { - if (!isIconNameInUse(name)) { - icons[name] = resolver; - } else { - log.warn(`Icon with name ${name} already exists. Skipping registration.`); - } - }); -}; - -export const getIcon = (name: string): IconResolver | null => { - if (isIconNameInUse(name)) { - return icons[name]; - } - return icons.unknown; -}; diff --git a/packages/mermaid/src/diagrams/architecture/svgDraw.ts b/packages/mermaid/src/diagrams/architecture/svgDraw.ts index ef3ddb7f6..d1c053f71 100644 --- a/packages/mermaid/src/diagrams/architecture/svgDraw.ts +++ b/packages/mermaid/src/diagrams/architecture/svgDraw.ts @@ -1,10 +1,10 @@ -// TODO remove no-console -/* eslint-disable no-console */ +import { getIconSVG } from '$root/rendering-util/icons.js'; import type cytoscape from 'cytoscape'; import { getConfig } from '../../diagram-api/diagramAPI.js'; import { createText } from '../../rendering-util/createText.js'; import type { D3Element } from '../../types.js'; import { db, getConfigField } from './architectureDb.js'; +import { architectureIcons } from './architectureIcons.js'; import { ArchitectureDirectionArrow, ArchitectureDirectionArrowShift, @@ -20,7 +20,6 @@ import { type ArchitectureJunction, type ArchitectureService, } from './architectureTypes.js'; -import { getIcon } from './icons/svgRegister.js'; export const drawEdges = async function (edgesEl: D3Element, cy: cytoscape.Core) { const padding = getConfigField('padding'); @@ -198,7 +197,6 @@ export const drawGroups = async function (groupsEl: D3Element, cy: cytoscape.Cor const data = nodeData(node); if (data.type === 'group') { const { h, w, x1, y1 } = node.boundingBox(); - console.log(`Draw group (${data.id}): pos=(${x1}, ${y1}), dim=(${w}, ${h})`); groupsEl .append('rect') @@ -213,7 +211,9 @@ export const drawGroups = async function (groupsEl: D3Element, cy: cytoscape.Cor let shiftedY1 = y1; if (data.icon) { const bkgElem = groupLabelContainer.append('g'); - getIcon(data.icon)?.(bkgElem, groupIconSize); + bkgElem.html( + `${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( + `${getIconSVG(service.icon, { height: iconSize, width: iconSize, fallbackPrefix: architectureIcons.prefix })}` + ); } else if (service.iconText) { - bkgElem = getIcon('blank')?.(bkgElem, iconSize); + bkgElem.html( + `${getIconSVG('blank', { height: iconSize, width: iconSize, fallbackPrefix: architectureIcons.prefix })}` + ); const textElemContainer = bkgElem.append('g'); const fo = textElemContainer .append('foreignObject') From 7d8143b917ee3562149a0e0a821ed2d6f29cc05d Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Thu, 29 Aug 2024 14:01:26 +0530 Subject: [PATCH 23/51] docs: Changeset --- .changeset/yellow-maps-poke.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/yellow-maps-poke.md diff --git a/.changeset/yellow-maps-poke.md b/.changeset/yellow-maps-poke.md new file mode 100644 index 000000000..4e6d6bd23 --- /dev/null +++ b/.changeset/yellow-maps-poke.md @@ -0,0 +1,5 @@ +--- +'@mermaid-js/parser': patch +--- + +feat: Support - in architecture icons From eaae85c6f80c482b822b9669fbbc5198584b0e6c Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Thu, 29 Aug 2024 08:38:25 +0000 Subject: [PATCH 24/51] [autofix.ci] apply automated fixes --- .../setup/interfaces/mermaid.MermaidConfig.md | 67 ++++++++----------- 1 file changed, 27 insertions(+), 40 deletions(-) diff --git a/docs/config/setup/interfaces/mermaid.MermaidConfig.md b/docs/config/setup/interfaces/mermaid.MermaidConfig.md index de1c1e66a..ad078653a 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) From 249e18314a57970598ba95f36816454335d38f4d Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Thu, 29 Aug 2024 09:36:26 +0000 Subject: [PATCH 25/51] [autofix.ci] apply automated fixes --- .../setup/interfaces/mermaid.Mermaid.md | 50 ++++++++++++++----- .../setup/interfaces/mermaid.RunOptions.md | 8 +-- docs/config/setup/modules/mermaid.md | 2 +- 3 files changed, 42 insertions(+), 18 deletions(-) diff --git a/docs/config/setup/interfaces/mermaid.Mermaid.md b/docs/config/setup/interfaces/mermaid.Mermaid.md index 09fab149c..99a054caa 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:435](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L435) +[packages/mermaid/src/mermaid.ts:436](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L436) --- @@ -59,7 +59,7 @@ A graph definition key #### Defined in -[packages/mermaid/src/mermaid.ts:437](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L437) +[packages/mermaid/src/mermaid.ts:438](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L438) --- @@ -89,7 +89,7 @@ Use [initialize](mermaid.Mermaid.md#initialize) and [run](mermaid.Mermaid.md#run #### Defined in -[packages/mermaid/src/mermaid.ts:430](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L430) +[packages/mermaid/src/mermaid.ts:431](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L431) --- @@ -116,7 +116,7 @@ This function should be called before the run function. #### Defined in -[packages/mermaid/src/mermaid.ts:434](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L434) +[packages/mermaid/src/mermaid.ts:435](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L435) --- @@ -130,7 +130,7 @@ Use [parse](mermaid.Mermaid.md#parse) and [render](mermaid.Mermaid.md#render) in #### Defined in -[packages/mermaid/src/mermaid.ts:424](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L424) +[packages/mermaid/src/mermaid.ts:425](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L425) --- @@ -180,7 +180,7 @@ Error if the diagram is invalid and parseOptions.suppressErrors is false or not #### Defined in -[packages/mermaid/src/mermaid.ts:425](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L425) +[packages/mermaid/src/mermaid.ts:426](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L426) --- @@ -190,7 +190,7 @@ Error if the diagram is invalid and parseOptions.suppressErrors is false or not #### Defined in -[packages/mermaid/src/mermaid.ts:419](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L419) +[packages/mermaid/src/mermaid.ts:420](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L420) --- @@ -218,7 +218,31 @@ Used to register external diagram types. #### Defined in -[packages/mermaid/src/mermaid.ts:433](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L433) +[packages/mermaid/src/mermaid.ts:434](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L434) + +--- + +### registerIconPacks + +• **registerIconPacks**: (...`iconPacks`: `IconifyJSON`\[]) => `void` + +#### Type declaration + +▸ (`...iconPacks`): `void` + +##### Parameters + +| Name | Type | +| :------------- | :--------------- | +| `...iconPacks` | `IconifyJSON`\[] | + +##### Returns + +`void` + +#### Defined in + +[packages/mermaid/src/mermaid.ts:439](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L439) --- @@ -242,7 +266,7 @@ Used to register external diagram types. #### Defined in -[packages/mermaid/src/mermaid.ts:432](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L432) +[packages/mermaid/src/mermaid.ts:433](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L433) --- @@ -268,7 +292,7 @@ Used to register external diagram types. #### Defined in -[packages/mermaid/src/mermaid.ts:426](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L426) +[packages/mermaid/src/mermaid.ts:427](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L427) --- @@ -316,7 +340,7 @@ Renders the mermaid diagrams #### Defined in -[packages/mermaid/src/mermaid.ts:431](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L431) +[packages/mermaid/src/mermaid.ts:432](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L432) --- @@ -351,7 +375,7 @@ to it (eg. dart interop wrapper). (Initially there is no parseError member of me #### Defined in -[packages/mermaid/src/mermaid.ts:436](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L436) +[packages/mermaid/src/mermaid.ts:437](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L437) --- @@ -361,4 +385,4 @@ to it (eg. dart interop wrapper). (Initially there is no parseError member of me #### Defined in -[packages/mermaid/src/mermaid.ts:418](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L418) +[packages/mermaid/src/mermaid.ts:419](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L419) diff --git a/docs/config/setup/interfaces/mermaid.RunOptions.md b/docs/config/setup/interfaces/mermaid.RunOptions.md index aae004d6d..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:48](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L48) +[packages/mermaid/src/mermaid.ts:49](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L49) --- @@ -44,7 +44,7 @@ A callback to call after each diagram is rendered. #### Defined in -[packages/mermaid/src/mermaid.ts:52](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L52) +[packages/mermaid/src/mermaid.ts:53](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L53) --- @@ -56,7 +56,7 @@ The query selector to use when finding elements to render. Default: `".mermaid"` #### Defined in -[packages/mermaid/src/mermaid.ts:44](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L44) +[packages/mermaid/src/mermaid.ts:45](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L45) --- @@ -68,4 +68,4 @@ If `true`, errors will be logged to the console, but not thrown. Default: `false #### Defined in -[packages/mermaid/src/mermaid.ts:56](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L56) +[packages/mermaid/src/mermaid.ts:57](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L57) diff --git a/docs/config/setup/modules/mermaid.md b/docs/config/setup/modules/mermaid.md index bdaeb05e1..60c219f2d 100644 --- a/docs/config/setup/modules/mermaid.md +++ b/docs/config/setup/modules/mermaid.md @@ -87,4 +87,4 @@ #### Defined in -[packages/mermaid/src/mermaid.ts:440](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L440) +[packages/mermaid/src/mermaid.ts:442](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L442) From f27feb268ac2e75b994a40dcba147af74583f877 Mon Sep 17 00:00:00 2001 From: omkarht Date: Thu, 29 Aug 2024 16:51:55 +0530 Subject: [PATCH 26/51] updated waveEdgedRectangle shape --- .../shapes/waveEdgedRectangle.ts | 24 ++++++++++++++----- 1 file changed, 18 insertions(+), 6 deletions(-) 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 2538fbea2..c38033373 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/waveEdgedRectangle.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/waveEdgedRectangle.ts @@ -16,10 +16,15 @@ export const waveEdgedRectangle = async (parent: SVGAElement, node: Node) => { const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node)); const w = Math.max(bbox.width + (node.padding ?? 0) * 2, node?.width ?? 0); const h = Math.max(bbox.height + (node.padding ?? 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, {}); @@ -30,10 +35,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); @@ -54,7 +66,7 @@ export const waveEdgedRectangle = async (parent: SVGAElement, node: Node) => { waveEdgeRect.attr('transform', `translate(0,${-waveAmplitude / 2})`); label.attr( 'transform', - `translate(${-w / 2 + (node.padding ?? 0) - (bbox.x - (bbox.left ?? 0))},${-h / 2 + (node.padding ?? 0) - waveAmplitude / 2 - (bbox.y - (bbox.top ?? 0))})` + `translate(${-w / 2 + (node.padding ?? 0) - (bbox.x - (bbox.left ?? 0))},${-h / 2 + (node.padding ?? 0) - waveAmplitude - (bbox.y - (bbox.top ?? 0))})` ); updateNodeBounds(node, waveEdgeRect); From ee84ed42363d80e6db546c9964164824fbf47066 Mon Sep 17 00:00:00 2001 From: omkarht Date: Thu, 29 Aug 2024 18:53:17 +0530 Subject: [PATCH 27/51] updated stateEnd Shape --- .../rendering-elements/shapes/stateEnd.ts | 47 +++++++++++++------ 1 file changed, 32 insertions(+), 15 deletions(-) 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..ac7e4cdc7 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,36 @@ 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); + + circle.attr('class', 'basic label-container'); + + if (cssStyles) { + circle.selectAll('path').attr('style', cssStyles); + } + + if (nodeStyles) { + circle.selectAll('path').attr('style', nodeStyles); } updateNodeBounds(node, circle); From eb341bdfb6426cb26192cc0ca764ac773bb665f3 Mon Sep 17 00:00:00 2001 From: omkarht Date: Thu, 29 Aug 2024 19:33:44 +0530 Subject: [PATCH 28/51] fixes issue for withoutlabel shapes --- .../rendering-elements/shapes/choice.ts | 11 ++++++----- .../rendering-elements/shapes/forkJoin.ts | 9 ++++++--- .../rendering-elements/shapes/stateEnd.ts | 2 -- 3 files changed, 12 insertions(+), 10 deletions(-) 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/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/stateEnd.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateEnd.ts index ac7e4cdc7..882f0ba49 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateEnd.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateEnd.ts @@ -39,8 +39,6 @@ export const stateEnd = (parent: SVG, node: Node) => { const circle = shapeSvg.insert(() => roughNode, ':first-child'); circle.insert(() => roughInnerNode); - circle.attr('class', 'basic label-container'); - if (cssStyles) { circle.selectAll('path').attr('style', cssStyles); } From f4d4c784e4d3239ea9509b3c9384b47b58365a37 Mon Sep 17 00:00:00 2001 From: omkarht Date: Thu, 29 Aug 2024 19:51:12 +0530 Subject: [PATCH 29/51] fixed issue for without label shapes --- .../rendering-elements/shapes/crossedCircle.ts | 12 +++++++----- .../rendering-elements/shapes/filledCircle.ts | 12 ++++++++---- .../rendering-elements/shapes/lightningBolt.ts | 12 +++++++----- 3 files changed, 22 insertions(+), 14 deletions(-) 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/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); } From ef26fc921c003cd90793926408d91fa9fb616d8f Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Mon, 2 Sep 2024 13:20:34 +0530 Subject: [PATCH 30/51] docs: Add iconify docs --- .cspell/libraries.txt | 1 + docs/syntax/architecture.md | 56 ++++++++++++++++++- .../mermaid/src/docs/syntax/architecture.md | 56 ++++++++++++++++++- 3 files changed, 111 insertions(+), 2 deletions(-) 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/docs/syntax/architecture.md b/docs/syntax/architecture.md index 2d71d84fb..c204dbca6 100644 --- a/docs/syntax/architecture.md +++ b/docs/syntax/architecture.md @@ -191,4 +191,58 @@ 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/). + +Using JSON file directly from CDN: + +```js +import mermaid from 'CDN/mermaid.esm.mjs'; + +// You have to call `initialize` with startOnLoad:false before calling `registerIconPacks`, +// to prevent mermaid from starting before the icons are loaded +mermaid.initialize({ + startOnLoad: false, + logLevel: 0, +}); +const logos = await fetch('https://unpkg.com/@iconify-json/logos/icons.json'); +mermaid.registerIconPacks(await logos.json()); +mermaid.init(); +``` + +Using packages and a bundler: + +```js +import mermaid from 'mermaid'; +// npm install @iconify-json/logos +import { icons as logos } from '@iconify-json/logos'; + +mermaid.initialize({ + startOnLoad: false, + logLevel: 0, +}); +mermaid.registerIconPacks(logos); +mermaid.init(); +``` + +After the icons are installed, they can be used in the architecture diagram by using the format "prefix:icon-name", where prefix comes from the icon pack you selected. + +```` +```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/packages/mermaid/src/docs/syntax/architecture.md b/packages/mermaid/src/docs/syntax/architecture.md index e74995ce3..c2aa2fb99 100644 --- a/packages/mermaid/src/docs/syntax/architecture.md +++ b/packages/mermaid/src/docs/syntax/architecture.md @@ -153,4 +153,58 @@ 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/). + +Using JSON file directly from CDN: + +```js +import mermaid from 'CDN/mermaid.esm.mjs'; + +// You have to call `initialize` with startOnLoad:false before calling `registerIconPacks`, +// to prevent mermaid from starting before the icons are loaded +mermaid.initialize({ + startOnLoad: false, + logLevel: 0, +}); +const logos = await fetch('https://unpkg.com/@iconify-json/logos/icons.json'); +mermaid.registerIconPacks(await logos.json()); +mermaid.init(); +``` + +Using packages and a bundler: + +```js +import mermaid from 'mermaid'; +// npm install @iconify-json/logos +import { icons as logos } from '@iconify-json/logos'; + +mermaid.initialize({ + startOnLoad: false, + logLevel: 0, +}); +mermaid.registerIconPacks(logos); +mermaid.init(); +``` + +After the icons are installed, they can be used in the architecture diagram by using the format "prefix:icon-name", where prefix comes from the icon pack you selected. + +```` +```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 +``` +```` From 336c3127edafbc21916cf9fbaca98ac230862de3 Mon Sep 17 00:00:00 2001 From: saurabhg772244 Date: Mon, 2 Sep 2024 13:35:33 +0530 Subject: [PATCH 31/51] updated rough js hachureGap and shapes --- cypress/platform/saurabh.html | 28 ++++++++----------- .../shapes/handDrawnShapeStyles.ts | 3 +- .../rendering-elements/shapes/multiRect.ts | 2 +- .../rendering-elements/shapes/taggedRect.ts | 2 +- .../shapes/taggedWaveEdgedRectangle.ts | 5 +++- 5 files changed, 20 insertions(+), 20 deletions(-) diff --git a/cypress/platform/saurabh.html b/cypress/platform/saurabh.html index f1722a8a2..329189450 100644 --- a/cypress/platform/saurabh.html +++ b/cypress/platform/saurabh.html @@ -62,22 +62,18 @@ 
-flowchart
-A
-      B@{ shape: multiRect, label: "title aduwab whgdawhbd wajhdbawj"  }@
-      F@{ shape: multiRect, label: "title "  }@
-      G@{ shape: multiRect, label: "title \n duawd \n duawd \n duawd \n duawd"  }@
-      C
-      D 
-      E 
-      C -->B
-      B --> D
-      B --> E
-      F --> A
-      A --> F
+      ---
+        config:
+          flowchart:
+            htmlLabels: true
+      ---
+      flowchart
+      classDef customClazz fill:#bbf,stroke:#f66,stroke-width:4px,color:#000,stroke-dasharray: 5 5
+      A1 --> B1@{ shape: taggedWaveEdgedRectangle, label: "test augfuyfavf yafuabffaev ydvaubfuac" }@ --> C1
+      A2 --> B2@{ shape: taggedRect, label: "test augfuyfavf yafuabffaev ydvaubfuac" }@ --> C2
+      B1:::customClazz
- diff --git a/packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue b/packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue index b98c49348..5e0bbfa87 100644 --- a/packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue +++ b/packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue @@ -86,11 +86,9 @@ onUnmounted(() => mut.disconnect()); const renderChart = async () => { console.log('rendering chart' + props.id + code.value); - const hasDarkClass = document.documentElement.classList.contains('dark'); const mermaidConfig = { securityLevel: 'loose', startOnLoad: false, - theme: hasDarkClass ? 'dark' : 'default', }; let svgCode = await render(props.id, code.value, mermaidConfig); // This is a hack to force v-html to re-render, otherwise the diagram disappears diff --git a/packages/mermaid/src/docs/.vitepress/theme/mermaid.ts b/packages/mermaid/src/docs/.vitepress/theme/mermaid.ts index 47e238692..79ba278e0 100644 --- a/packages/mermaid/src/docs/.vitepress/theme/mermaid.ts +++ b/packages/mermaid/src/docs/.vitepress/theme/mermaid.ts @@ -5,7 +5,19 @@ const init = mermaid.registerExternalDiagrams([zenuml]); export const render = async (id: string, code: string, config: MermaidConfig): Promise => { await init; - mermaid.initialize(config); + const hasDarkClass = document.documentElement.classList.contains('dark'); + const theme = hasDarkClass ? 'dark' : 'default'; + mermaid.initialize({ ...config, theme }); const { svg } = await mermaid.render(id, code); return svg; }; + +declare global { + interface Window { + mermaid: typeof mermaid; + render: typeof render; + } +} + +window.mermaid = mermaid; +window.render = render; diff --git a/packages/mermaid/src/docs/syntax/architecture.md b/packages/mermaid/src/docs/syntax/architecture.md index c2aa2fb99..ed50e1c0b 100644 --- a/packages/mermaid/src/docs/syntax/architecture.md +++ b/packages/mermaid/src/docs/syntax/architecture.md @@ -208,3 +208,26 @@ architecture-beta disk2:T -- B:db ``` ```` + +
loading...
+ + From 7cda494bf4d28fe1410bf22d073cca42b7d5cb5f Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Mon, 2 Sep 2024 08:25:52 +0000 Subject: [PATCH 33/51] [autofix.ci] apply automated fixes --- docs/config/setup/classes/mermaid.UnknownDiagramError.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/config/setup/classes/mermaid.UnknownDiagramError.md b/docs/config/setup/classes/mermaid.UnknownDiagramError.md index abe205bb5..3e1edf597 100644 --- a/docs/config/setup/classes/mermaid.UnknownDiagramError.md +++ b/docs/config/setup/classes/mermaid.UnknownDiagramError.md @@ -127,7 +127,7 @@ Error.prepareStackTrace #### Defined in -node_modules/@types/node/globals.d.ts:98 +node_modules/@types/node/globals.d.ts:28 --- @@ -141,7 +141,7 @@ Error.stackTraceLimit #### Defined in -node_modules/@types/node/globals.d.ts:100 +node_modules/@types/node/globals.d.ts:30 ## Methods @@ -168,4 +168,4 @@ Error.captureStackTrace #### Defined in -node_modules/@types/node/globals.d.ts:91 +node_modules/@types/node/globals.d.ts:21 From 7056c20ccaea65e9f85d74c705256a9fcffdf8e9 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Mon, 2 Sep 2024 14:00:03 +0530 Subject: [PATCH 34/51] docs: Add external icons in demos --- demos/architecture.html | 22 +++++++++------------- 1 file changed, 9 insertions(+), 13 deletions(-) diff --git a/demos/architecture.html b/demos/architecture.html index 137b3fbf0..0e2ce1453 100644 --- a/demos/architecture.html +++ b/demos/architecture.html @@ -226,27 +226,23 @@
- + service s3(logos:aws-s3)[Cloud Store] + service ec2(logos:aws-ec2)[Server] + service api(logos:aws-api-gateway)[Api Gateway] + From f5cc0dcaea980f8553e7c6460c210d2ff679ed92 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Mon, 2 Sep 2024 14:05:37 +0530 Subject: [PATCH 35/51] test: External diagram rendering test --- cypress/helpers/util.ts | 2 +- .../rendering/architecture.spec.ts | 6 ++- cypress/platform/architecture-external.html | 39 +++++++++++++++++++ 3 files changed, 45 insertions(+), 2 deletions(-) create mode 100644 cypress/platform/architecture-external.html 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 9eefbe1e4..6c49298da 100644 --- a/cypress/integration/rendering/architecture.spec.ts +++ b/cypress/integration/rendering/architecture.spec.ts @@ -1,4 +1,4 @@ -import { imgSnapshotTest } from '../../helpers/util.ts'; +import { imgSnapshotTest, urlSnapshotTest } from '../../helpers/util.ts'; describe.skip('architecture diagram', () => { it('should render a simple architecture diagram with groups', () => { @@ -172,3 +172,7 @@ describe.skip('architecture diagram', () => { ); }); }); + +it('should allow adding external icons', () => { + urlSnapshotTest('http://localhost:9000/architecture-external.html'); +}); diff --git a/cypress/platform/architecture-external.html b/cypress/platform/architecture-external.html new file mode 100644 index 000000000..605709846 --- /dev/null +++ b/cypress/platform/architecture-external.html @@ -0,0 +1,39 @@ + + + + + + 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]
+
+ + + + From 8ef24e5a18597a776d9a6efc7f31220573ebd879 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Mon, 2 Sep 2024 14:47:46 +0530 Subject: [PATCH 36/51] chore: update pnpm, remove dependency --- package.json | 3 +-- pnpm-lock.yaml | 20 +++++--------------- 2 files changed, 6 insertions(+), 17 deletions(-) diff --git a/package.json b/package.json index 21ae5360c..9aeedf8f7 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", @@ -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/pnpm-lock.yaml b/pnpm-lock.yaml index c8e7d0411..5a59b4e9d 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -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 @@ -7325,11 +7322,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==} @@ -16599,7 +16591,7 @@ snapshots: mdast-util-from-markdown@2.0.1: dependencies: '@types/mdast': 4.0.4 - '@types/unist': 3.0.2 + '@types/unist': 3.0.3 decode-named-character-reference: 1.0.2 devlop: 1.1.0 mdast-util-to-string: 4.0.0 @@ -16689,7 +16681,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 @@ -17453,8 +17445,6 @@ snapshots: pngjs@6.0.0: {} - pnpm@8.15.9: {} - points-on-curve@0.2.0: {} points-on-path@0.2.1: @@ -18795,7 +18785,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: @@ -18919,12 +18909,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 From 69c9a564f2f190498f95f733ef58bfb6043f6598 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Mon, 2 Sep 2024 16:11:33 +0530 Subject: [PATCH 37/51] chore: Disable mermaid in SSR --- .../setup/classes/mermaid.UnknownDiagramError.md | 6 +++--- docs/syntax/architecture.md | 4 +++- .../mermaid/src/docs/.vitepress/theme/mermaid.ts | 13 ++++++++++--- packages/mermaid/src/docs/syntax/architecture.md | 4 +++- 4 files changed, 19 insertions(+), 8 deletions(-) diff --git a/docs/config/setup/classes/mermaid.UnknownDiagramError.md b/docs/config/setup/classes/mermaid.UnknownDiagramError.md index 3e1edf597..abe205bb5 100644 --- a/docs/config/setup/classes/mermaid.UnknownDiagramError.md +++ b/docs/config/setup/classes/mermaid.UnknownDiagramError.md @@ -127,7 +127,7 @@ Error.prepareStackTrace #### Defined in -node_modules/@types/node/globals.d.ts:28 +node_modules/@types/node/globals.d.ts:98 --- @@ -141,7 +141,7 @@ Error.stackTraceLimit #### Defined in -node_modules/@types/node/globals.d.ts:30 +node_modules/@types/node/globals.d.ts:100 ## Methods @@ -168,4 +168,4 @@ Error.captureStackTrace #### Defined in -node_modules/@types/node/globals.d.ts:21 +node_modules/@types/node/globals.d.ts:91 diff --git a/docs/syntax/architecture.md b/docs/syntax/architecture.md index e1b13de18..a45a9308b 100644 --- a/docs/syntax/architecture.md +++ b/docs/syntax/architecture.md @@ -267,5 +267,7 @@ const main = async () => { document.getElementById('arch-example').innerHTML = svg; }; -setTimeout(main, 100) +if (!import.meta.env.SSR) { + setTimeout(main, 100); +} diff --git a/packages/mermaid/src/docs/.vitepress/theme/mermaid.ts b/packages/mermaid/src/docs/.vitepress/theme/mermaid.ts index 79ba278e0..c4021d2cb 100644 --- a/packages/mermaid/src/docs/.vitepress/theme/mermaid.ts +++ b/packages/mermaid/src/docs/.vitepress/theme/mermaid.ts @@ -17,7 +17,14 @@ declare global { mermaid: typeof mermaid; render: typeof render; } -} -window.mermaid = mermaid; -window.render = render; + interface ImportMeta { + env: { + SSR: boolean; + }; + } +} +if (!import.meta.env.SSR) { + window.mermaid = mermaid; + window.render = render; +} diff --git a/packages/mermaid/src/docs/syntax/architecture.md b/packages/mermaid/src/docs/syntax/architecture.md index ed50e1c0b..f4ff3bd72 100644 --- a/packages/mermaid/src/docs/syntax/architecture.md +++ b/packages/mermaid/src/docs/syntax/architecture.md @@ -229,5 +229,7 @@ const main = async () => { document.getElementById('arch-example').innerHTML = svg; }; -setTimeout(main, 100) +if (!import.meta.env.SSR) { + setTimeout(main, 100); +} From 0b127eecd96773ca511cf6991099259ae102cdd7 Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Mon, 2 Sep 2024 10:46:53 +0000 Subject: [PATCH 38/51] [autofix.ci] apply automated fixes --- docs/config/setup/classes/mermaid.UnknownDiagramError.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/config/setup/classes/mermaid.UnknownDiagramError.md b/docs/config/setup/classes/mermaid.UnknownDiagramError.md index abe205bb5..3e1edf597 100644 --- a/docs/config/setup/classes/mermaid.UnknownDiagramError.md +++ b/docs/config/setup/classes/mermaid.UnknownDiagramError.md @@ -127,7 +127,7 @@ Error.prepareStackTrace #### Defined in -node_modules/@types/node/globals.d.ts:98 +node_modules/@types/node/globals.d.ts:28 --- @@ -141,7 +141,7 @@ Error.stackTraceLimit #### Defined in -node_modules/@types/node/globals.d.ts:100 +node_modules/@types/node/globals.d.ts:30 ## Methods @@ -168,4 +168,4 @@ Error.captureStackTrace #### Defined in -node_modules/@types/node/globals.d.ts:91 +node_modules/@types/node/globals.d.ts:21 From f4decdee49b4961358913a7d3537bab004476561 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Mon, 2 Sep 2024 18:01:35 +0530 Subject: [PATCH 39/51] chore: Update cypress --- package.json | 2 +- pnpm-lock.yaml | 183 +++++++++++++++++++++++++++++++++++++++++++++---- 2 files changed, 169 insertions(+), 16 deletions(-) diff --git a/package.json b/package.json index 9aeedf8f7..5683b6ed9 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 5a59b4e9d..fff57c2cc 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -13,7 +13,7 @@ importers: version: 3.44.7(encoding@0.1.13)(typescript@5.4.5) '@argos-ci/cypress': specifier: ^2.1.0 - version: 2.1.2(cypress@13.14.0) + version: 2.1.2(cypress@13.14.1) '@changesets/changelog-github': specifier: ^0.5.0 version: 0.5.0(encoding@0.1.13) @@ -25,7 +25,7 @@ importers: version: 8.13.3(eslint@9.8.0) '@cypress/code-coverage': specifier: ^3.12.30 - version: 3.12.45(@babel/core@7.25.2)(@babel/preset-env@7.25.4(@babel/core@7.25.2))(babel-loader@9.1.3(@babel/core@7.25.2)(webpack@5.93.0(esbuild@0.21.5)))(cypress@13.14.0)(webpack@5.93.0(esbuild@0.21.5)) + version: 3.12.45(@babel/core@7.25.2)(@babel/preset-env@7.25.4(@babel/core@7.25.2))(babel-loader@9.1.3(@babel/core@7.25.2)(webpack@5.93.0(esbuild@0.21.5)))(cypress@13.14.1)(webpack@5.93.0(esbuild@0.21.5)) '@eslint/js': specifier: ^9.4.0 version: 9.8.0 @@ -87,11 +87,11 @@ importers: specifier: ^8.6.0 version: 8.14.2 cypress: - specifier: ^13.11.0 - version: 13.14.0 + specifier: ^13.14.1 + version: 13.14.1 cypress-image-snapshot: specifier: ^4.0.1 - version: 4.0.1(cypress@13.14.0)(jest@29.7.0(@types/node@20.16.2)) + version: 4.0.1(cypress@13.14.1)(jest@29.7.0(@types/node@20.16.2)) esbuild: specifier: ^0.21.5 version: 0.21.5 @@ -497,6 +497,67 @@ importers: specifier: ^7.0.0 version: 7.1.0 + packages/mermaid/src/vitepress: + dependencies: + '@mdi/font': + specifier: ^7.0.0 + version: 7.4.47 + '@vueuse/core': + specifier: ^10.9.0 + version: 10.11.1(vue@3.4.38(typescript@5.4.5)) + font-awesome: + specifier: ^4.7.0 + version: 4.7.0 + jiti: + specifier: ^1.21.0 + version: 1.21.6 + mermaid: + specifier: workspace:^ + version: link:../.. + vue: + specifier: ^3.4.21 + version: 3.4.38(typescript@5.4.5) + devDependencies: + '@iconify-json/carbon': + specifier: ^1.1.31 + version: 1.1.37 + '@unocss/reset': + specifier: ^0.59.0 + version: 0.59.4 + '@vite-pwa/vitepress': + specifier: ^0.4.0 + version: 0.4.0(vite-plugin-pwa@0.19.8(vite@5.4.2(@types/node@22.5.1)(terser@5.31.6))(workbox-build@7.1.1(@types/babel__core@7.20.5))(workbox-window@7.1.0)) + '@vitejs/plugin-vue': + specifier: ^5.0.0 + version: 5.1.2(vite@5.4.2(@types/node@22.5.1)(terser@5.31.6))(vue@3.4.38(typescript@5.4.5)) + fast-glob: + specifier: ^3.3.2 + version: 3.3.2 + https-localhost: + specifier: ^4.7.1 + version: 4.7.1 + pathe: + specifier: ^1.1.2 + version: 1.1.2 + unocss: + specifier: ^0.59.0 + version: 0.59.4(postcss@8.4.41)(rollup@4.21.1)(vite@5.4.2(@types/node@22.5.1)(terser@5.31.6)) + unplugin-vue-components: + specifier: ^0.26.0 + version: 0.26.0(@babel/parser@7.25.4)(rollup@4.21.1)(vue@3.4.38(typescript@5.4.5)) + vite: + specifier: ^5.0.0 + version: 5.4.2(@types/node@22.5.1)(terser@5.31.6) + vite-plugin-pwa: + specifier: ^0.19.7 + version: 0.19.8(vite@5.4.2(@types/node@22.5.1)(terser@5.31.6))(workbox-build@7.1.1(@types/babel__core@7.20.5))(workbox-window@7.1.0) + vitepress: + specifier: 1.1.4 + version: 1.1.4(@algolia/client-search@4.24.0)(@types/node@22.5.1)(axios@1.7.5)(postcss@8.4.41)(search-insights@2.15.0)(terser@5.31.6)(typescript@5.4.5) + workbox-window: + specifier: ^7.0.0 + version: 7.1.0 + packages/parser: dependencies: langium: @@ -4351,8 +4412,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 @@ -9546,12 +9607,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 @@ -10898,14 +10959,14 @@ snapshots: '@cspell/url@8.14.2': {} - '@cypress/code-coverage@3.12.45(@babel/core@7.25.2)(@babel/preset-env@7.25.4(@babel/core@7.25.2))(babel-loader@9.1.3(@babel/core@7.25.2)(webpack@5.93.0(esbuild@0.21.5)))(cypress@13.14.0)(webpack@5.93.0(esbuild@0.21.5))': + '@cypress/code-coverage@3.12.45(@babel/core@7.25.2)(@babel/preset-env@7.25.4(@babel/core@7.25.2))(babel-loader@9.1.3(@babel/core@7.25.2)(webpack@5.93.0(esbuild@0.21.5)))(cypress@13.14.1)(webpack@5.93.0(esbuild@0.21.5))': dependencies: '@babel/core': 7.25.2 '@babel/preset-env': 7.25.4(@babel/core@7.25.2) '@cypress/webpack-preprocessor': 6.0.2(@babel/core@7.25.2)(@babel/preset-env@7.25.4(@babel/core@7.25.2))(babel-loader@9.1.3(@babel/core@7.25.2)(webpack@5.93.0(esbuild@0.21.5)))(webpack@5.93.0(esbuild@0.21.5)) babel-loader: 9.1.3(@babel/core@7.25.2)(webpack@5.93.0(esbuild@0.21.5)) chalk: 4.1.2 - cypress: 13.14.0 + cypress: 13.14.1 dayjs: 1.11.12 debug: 4.3.6(supports-color@8.1.1) execa: 4.1.0 @@ -12293,6 +12354,16 @@ snapshots: transitivePeerDependencies: - rollup + '@unocss/astro@0.59.4(rollup@4.21.1)(vite@5.4.2(@types/node@22.5.1)(terser@5.31.6))': + dependencies: + '@unocss/core': 0.59.4 + '@unocss/reset': 0.59.4 + '@unocss/vite': 0.59.4(rollup@4.21.1)(vite@5.4.2(@types/node@22.5.1)(terser@5.31.6)) + optionalDependencies: + vite: 5.4.2(@types/node@22.5.1)(terser@5.31.6) + transitivePeerDependencies: + - rollup + '@unocss/cli@0.59.4(rollup@2.79.1)': dependencies: '@ampproject/remapping': 2.3.0 @@ -12311,6 +12382,24 @@ snapshots: transitivePeerDependencies: - rollup + '@unocss/cli@0.59.4(rollup@4.21.1)': + dependencies: + '@ampproject/remapping': 2.3.0 + '@rollup/pluginutils': 5.1.0(rollup@4.21.1) + '@unocss/config': 0.59.4 + '@unocss/core': 0.59.4 + '@unocss/preset-uno': 0.59.4 + cac: 6.7.14 + chokidar: 3.6.0 + colorette: 2.0.20 + consola: 3.2.3 + fast-glob: 3.3.2 + magic-string: 0.30.11 + pathe: 1.1.2 + perfect-debounce: 1.0.0 + transitivePeerDependencies: + - rollup + '@unocss/config@0.59.4': dependencies: '@unocss/core': 0.59.4 @@ -12436,6 +12525,22 @@ snapshots: transitivePeerDependencies: - rollup + '@unocss/vite@0.59.4(rollup@4.21.1)(vite@5.4.2(@types/node@22.5.1)(terser@5.31.6))': + dependencies: + '@ampproject/remapping': 2.3.0 + '@rollup/pluginutils': 5.1.0(rollup@4.21.1) + '@unocss/config': 0.59.4 + '@unocss/core': 0.59.4 + '@unocss/inspector': 0.59.4 + '@unocss/scope': 0.59.4 + '@unocss/transformer-directives': 0.59.4 + chokidar: 3.6.0 + fast-glob: 3.3.2 + magic-string: 0.30.11 + vite: 5.4.2(@types/node@22.5.1)(terser@5.31.6) + transitivePeerDependencies: + - rollup + '@vite-pwa/vitepress@0.4.0(vite-plugin-pwa@0.19.8(vite@5.4.2(@types/node@22.5.1)(terser@5.31.6))(workbox-build@7.1.1(@types/babel__core@7.20.5))(workbox-window@7.1.0))': dependencies: vite-plugin-pwa: 0.19.8(vite@5.4.2(@types/node@22.5.1)(terser@5.31.6))(workbox-build@7.1.1(@types/babel__core@7.20.5))(workbox-window@7.1.0) @@ -13865,10 +13970,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)) @@ -13879,7 +13984,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) @@ -14915,7 +15020,7 @@ snapshots: proxy-addr: 2.0.7 rfdc: 1.4.1 secure-json-parse: 2.7.0 - semver: 7.6.2 + semver: 7.6.3 tiny-lru: 8.0.2 transitivePeerDependencies: - supports-color @@ -18833,6 +18938,35 @@ snapshots: - rollup - supports-color + unocss@0.59.4(postcss@8.4.41)(rollup@4.21.1)(vite@5.4.2(@types/node@22.5.1)(terser@5.31.6)): + dependencies: + '@unocss/astro': 0.59.4(rollup@4.21.1)(vite@5.4.2(@types/node@22.5.1)(terser@5.31.6)) + '@unocss/cli': 0.59.4(rollup@4.21.1) + '@unocss/core': 0.59.4 + '@unocss/extractor-arbitrary-variants': 0.59.4 + '@unocss/postcss': 0.59.4(postcss@8.4.41) + '@unocss/preset-attributify': 0.59.4 + '@unocss/preset-icons': 0.59.4 + '@unocss/preset-mini': 0.59.4 + '@unocss/preset-tagify': 0.59.4 + '@unocss/preset-typography': 0.59.4 + '@unocss/preset-uno': 0.59.4 + '@unocss/preset-web-fonts': 0.59.4 + '@unocss/preset-wind': 0.59.4 + '@unocss/reset': 0.59.4 + '@unocss/transformer-attributify-jsx': 0.59.4 + '@unocss/transformer-attributify-jsx-babel': 0.59.4 + '@unocss/transformer-compile-class': 0.59.4 + '@unocss/transformer-directives': 0.59.4 + '@unocss/transformer-variant-group': 0.59.4 + '@unocss/vite': 0.59.4(rollup@4.21.1)(vite@5.4.2(@types/node@22.5.1)(terser@5.31.6)) + optionalDependencies: + vite: 5.4.2(@types/node@22.5.1)(terser@5.31.6) + transitivePeerDependencies: + - postcss + - rollup + - supports-color + unpipe@1.0.0: {} unplugin-vue-components@0.26.0(@babel/parser@7.25.4)(rollup@2.79.1)(vue@3.4.38(typescript@5.4.5)): @@ -18854,6 +18988,25 @@ snapshots: - rollup - supports-color + unplugin-vue-components@0.26.0(@babel/parser@7.25.4)(rollup@4.21.1)(vue@3.4.38(typescript@5.4.5)): + dependencies: + '@antfu/utils': 0.7.10 + '@rollup/pluginutils': 5.1.0(rollup@4.21.1) + chokidar: 3.6.0 + debug: 4.3.6(supports-color@8.1.1) + fast-glob: 3.3.2 + local-pkg: 0.4.3 + magic-string: 0.30.11 + minimatch: 9.0.5 + resolve: 1.22.8 + unplugin: 1.12.0 + vue: 3.4.38(typescript@5.4.5) + optionalDependencies: + '@babel/parser': 7.25.4 + transitivePeerDependencies: + - rollup + - supports-color + unplugin@1.12.0: dependencies: acorn: 8.12.1 From c68ae309e5379fec11ccd6f7edc89a2fb7d89cb4 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Mon, 2 Sep 2024 18:34:58 +0530 Subject: [PATCH 40/51] test: Wrap in describe block --- cypress/integration/rendering/architecture.spec.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/cypress/integration/rendering/architecture.spec.ts b/cypress/integration/rendering/architecture.spec.ts index 6c49298da..1deb1f7da 100644 --- a/cypress/integration/rendering/architecture.spec.ts +++ b/cypress/integration/rendering/architecture.spec.ts @@ -173,6 +173,8 @@ describe.skip('architecture diagram', () => { }); }); -it('should allow adding external icons', () => { - urlSnapshotTest('http://localhost:9000/architecture-external.html'); +describe('architecture - external', () => { + it('should allow adding external icons', () => { + urlSnapshotTest('http://localhost:9000/architecture-external.html'); + }); }); From 0edfab104886de283ca6c4741ff1568f03670f77 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Mon, 2 Sep 2024 19:51:14 +0530 Subject: [PATCH 41/51] feat: Lazy load icons Co-authored-by: Alois Klink --- cypress/platform/architecture-external.html | 9 +- demos/architecture.html | 22 ++-- .../setup/interfaces/mermaid.Mermaid.md | 10 +- docs/syntax/architecture.md | 100 +++++++++--------- .../architecture/architectureRenderer.ts | 7 +- .../src/diagrams/architecture/svgDraw.ts | 6 +- .../src/docs/.vitepress/theme/Mermaid.vue | 2 + .../src/docs/.vitepress/theme/mermaid.ts | 28 ++--- .../mermaid/src/docs/syntax/architecture.md | 88 +++++++-------- packages/mermaid/src/rendering-util/icons.ts | 59 +++++++++-- 10 files changed, 183 insertions(+), 148 deletions(-) diff --git a/cypress/platform/architecture-external.html b/cypress/platform/architecture-external.html index 605709846..b76ac54ce 100644 --- a/cypress/platform/architecture-external.html +++ b/cypress/platform/architecture-external.html @@ -28,8 +28,13 @@ startOnLoad: false, logLevel: 0, }); - const logos = await fetch('https://unpkg.com/@iconify-json/logos/icons.json'); - mermaid.registerIconPacks(await logos.json()); + mermaid.registerIconPacks([ + { + name: 'logos', + loader: () => + fetch('https://unpkg.com/@iconify-json/logos/icons.json').then((res) => res.json()), + }, + ]); await mermaid.run(); if (window.Cypress) { window.rendered = true; diff --git a/demos/architecture.html b/demos/architecture.html index 0e2ce1453..6d978d952 100644 --- a/demos/architecture.html +++ b/demos/architecture.html @@ -232,17 +232,25 @@ 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/setup/interfaces/mermaid.Mermaid.md b/docs/config/setup/interfaces/mermaid.Mermaid.md index 99a054caa..f4e9eb4ec 100644 --- a/docs/config/setup/interfaces/mermaid.Mermaid.md +++ b/docs/config/setup/interfaces/mermaid.Mermaid.md @@ -224,17 +224,17 @@ Used to register external diagram types. ### registerIconPacks -• **registerIconPacks**: (...`iconPacks`: `IconifyJSON`\[]) => `void` +• **registerIconPacks**: (`iconLoaders`: `IconLoader`\[]) => `void` #### Type declaration -▸ (`...iconPacks`): `void` +▸ (`iconLoaders`): `void` ##### Parameters -| Name | Type | -| :------------- | :--------------- | -| `...iconPacks` | `IconifyJSON`\[] | +| Name | Type | +| :------------ | :-------------- | +| `iconLoaders` | `IconLoader`\[] | ##### Returns diff --git a/docs/syntax/architecture.md b/docs/syntax/architecture.md index a45a9308b..10d6b9aba 100644 --- a/docs/syntax/architecture.md +++ b/docs/syntax/architecture.md @@ -197,41 +197,69 @@ By default, architecture diagram supports the following icons: `cloud`, `databas 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'; - -// You have to call `initialize` with startOnLoad:false before calling `registerIconPacks`, -// to prevent mermaid from starting before the icons are loaded -mermaid.initialize({ - startOnLoad: false, - logLevel: 0, -}); -const logos = await fetch('https://unpkg.com/@iconify-json/logos/icons.json'); -mermaid.registerIconPacks(await logos.json()); -mermaid.init(); +mermaid.registerIconPacks([ + { + name: 'logos', + loader: () => + fetch('https://unpkg.com/@iconify-json/logos/icons.json').then((res) => res.json()), + }, +]); ``` Using packages and a bundler: -```js -import mermaid from 'mermaid'; -// npm install @iconify-json/logos -import { icons as logos } from '@iconify-json/logos'; - -mermaid.initialize({ - startOnLoad: false, - logLevel: 0, -}); -mermaid.registerIconPacks(logos); -mermaid.init(); +```bash +npm install @iconify-json/logos ``` -After the icons are installed, they can be used in the architecture diagram by using the format "prefix:icon-name", where prefix comes from the icon pack you selected. +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] @@ -245,29 +273,3 @@ architecture-beta disk1:T -- B:server disk2:T -- B:db ``` -```` - -
loading...
- - diff --git a/packages/mermaid/src/diagrams/architecture/architectureRenderer.ts b/packages/mermaid/src/diagrams/architecture/architectureRenderer.ts index 84b9ed655..3abb69b9f 100644 --- a/packages/mermaid/src/diagrams/architecture/architectureRenderer.ts +++ b/packages/mermaid/src/diagrams/architecture/architectureRenderer.ts @@ -34,7 +34,12 @@ import { } from './architectureTypes.js'; import { drawEdges, drawGroups, drawJunctions, drawServices } from './svgDraw.js'; -registerIconPacks(architectureIcons); +registerIconPacks([ + { + name: architectureIcons.prefix, + icons: architectureIcons, + }, +]); cytoscape.use(fcose); function addServices(services: ArchitectureService[], cy: cytoscape.Core) { diff --git a/packages/mermaid/src/diagrams/architecture/svgDraw.ts b/packages/mermaid/src/diagrams/architecture/svgDraw.ts index d1c053f71..357839394 100644 --- a/packages/mermaid/src/diagrams/architecture/svgDraw.ts +++ b/packages/mermaid/src/diagrams/architecture/svgDraw.ts @@ -212,7 +212,7 @@ export const drawGroups = async function (groupsEl: D3Element, cy: cytoscape.Cor if (data.icon) { const bkgElem = groupLabelContainer.append('g'); bkgElem.html( - `${getIconSVG(data.icon, { height: groupIconSize, width: groupIconSize, fallbackPrefix: architectureIcons.prefix })}` + `${await getIconSVG(data.icon, { height: groupIconSize, width: groupIconSize, fallbackPrefix: architectureIcons.prefix })}` ); bkgElem.attr( 'transform', @@ -297,11 +297,11 @@ export const drawServices = async function ( // throw new Error(`Invalid SVG Icon name: "${service.icon}"`); // } bkgElem.html( - `${getIconSVG(service.icon, { height: iconSize, width: iconSize, fallbackPrefix: architectureIcons.prefix })}` + `${await getIconSVG(service.icon, { height: iconSize, width: iconSize, fallbackPrefix: architectureIcons.prefix })}` ); } else if (service.iconText) { bkgElem.html( - `${getIconSVG('blank', { height: iconSize, width: iconSize, fallbackPrefix: architectureIcons.prefix })}` + `${await getIconSVG('blank', { height: iconSize, width: iconSize, fallbackPrefix: architectureIcons.prefix })}` ); const textElemContainer = bkgElem.append('g'); const fo = textElemContainer diff --git a/packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue b/packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue index 5e0bbfa87..b98c49348 100644 --- a/packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue +++ b/packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue @@ -86,9 +86,11 @@ onUnmounted(() => mut.disconnect()); const renderChart = async () => { console.log('rendering chart' + props.id + code.value); + const hasDarkClass = document.documentElement.classList.contains('dark'); const mermaidConfig = { securityLevel: 'loose', startOnLoad: false, + theme: hasDarkClass ? 'dark' : 'default', }; let svgCode = await render(props.id, code.value, mermaidConfig); // This is a hack to force v-html to re-render, otherwise the diagram disappears diff --git a/packages/mermaid/src/docs/.vitepress/theme/mermaid.ts b/packages/mermaid/src/docs/.vitepress/theme/mermaid.ts index c4021d2cb..2357fe384 100644 --- a/packages/mermaid/src/docs/.vitepress/theme/mermaid.ts +++ b/packages/mermaid/src/docs/.vitepress/theme/mermaid.ts @@ -2,29 +2,17 @@ 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; - const hasDarkClass = document.documentElement.classList.contains('dark'); - const theme = hasDarkClass ? 'dark' : 'default'; - mermaid.initialize({ ...config, theme }); + mermaid.initialize(config); const { svg } = await mermaid.render(id, code); return svg; }; - -declare global { - interface Window { - mermaid: typeof mermaid; - render: typeof render; - } - - interface ImportMeta { - env: { - SSR: boolean; - }; - } -} -if (!import.meta.env.SSR) { - window.mermaid = mermaid; - window.render = render; -} diff --git a/packages/mermaid/src/docs/syntax/architecture.md b/packages/mermaid/src/docs/syntax/architecture.md index f4ff3bd72..0d199c8b1 100644 --- a/packages/mermaid/src/docs/syntax/architecture.md +++ b/packages/mermaid/src/docs/syntax/architecture.md @@ -159,42 +159,56 @@ By default, architecture diagram supports the following icons: `cloud`, `databas 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'; - -// You have to call `initialize` with startOnLoad:false before calling `registerIconPacks`, -// to prevent mermaid from starting before the icons are loaded -mermaid.initialize({ - startOnLoad: false, - logLevel: 0, -}); -const logos = await fetch('https://unpkg.com/@iconify-json/logos/icons.json'); -mermaid.registerIconPacks(await logos.json()); -mermaid.init(); +mermaid.registerIconPacks([ + { + name: 'logos', + loader: () => + fetch('https://unpkg.com/@iconify-json/logos/icons.json').then((res) => res.json()), + }, +]); ``` Using packages and a bundler: -```js -import mermaid from 'mermaid'; -// npm install @iconify-json/logos -import { icons as logos } from '@iconify-json/logos'; - -mermaid.initialize({ - startOnLoad: false, - logLevel: 0, -}); -mermaid.registerIconPacks(logos); -mermaid.init(); +```bash +npm install @iconify-json/logos ``` -After the icons are installed, they can be used in the architecture diagram by using the format "prefix:icon-name", where prefix comes from the icon pack you selected. +With lazy loading -```` -```mermaid +```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] @@ -207,29 +221,3 @@ architecture-beta disk1:T -- B:server disk2:T -- B:db ``` -```` - -
loading...
- - diff --git a/packages/mermaid/src/rendering-util/icons.ts b/packages/mermaid/src/rendering-util/icons.ts index 199bc4206..27709b822 100644 --- a/packages/mermaid/src/rendering-util/icons.ts +++ b/packages/mermaid/src/rendering-util/icons.ts @@ -3,21 +3,47 @@ import type { ExtendedIconifyIcon, IconifyIcon, IconifyJSON } from '@iconify/typ 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, }; -export const iconsStore = new Map(); +const iconsStore = new Map(); +const loaderStore = new Map(); -export const registerIconPacks = (...iconPacks: IconifyJSON[]) => { - for (const pack of iconPacks) { - iconsStore.set(pack.prefix, pack); +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 = (iconName: string, fallbackPrefix?: string) => { +const getRegisteredIconData = async (iconName: string, fallbackPrefix?: string) => { const data = stringToIcon(iconName, true, fallbackPrefix !== undefined); if (!data) { throw new Error(`Invalid icon name: ${iconName}`); @@ -26,9 +52,20 @@ const getRegisteredIconData = (iconName: string, fallbackPrefix?: string) => { if (!prefix) { throw new Error(`Icon name must contain a prefix: ${iconName}`); } - const icons = iconsStore.get(prefix); + let icons = iconsStore.get(prefix); if (!icons) { - throw new Error(`Icon set not found: ${data.prefix}`); + 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) { @@ -37,22 +74,22 @@ const getRegisteredIconData = (iconName: string, fallbackPrefix?: string) => { return iconData; }; -export const isIconAvailable = (iconName: string) => { +export const isIconAvailable = async (iconName: string) => { try { - getRegisteredIconData(iconName); + await getRegisteredIconData(iconName); return true; } catch { return false; } }; -export const getIconSVG = ( +export const getIconSVG = async ( iconName: string, customisations?: IconifyIconCustomisations & { fallbackPrefix?: string } ) => { let iconData: ExtendedIconifyIcon; try { - iconData = getRegisteredIconData(iconName, customisations?.fallbackPrefix); + iconData = await getRegisteredIconData(iconName, customisations?.fallbackPrefix); } catch (e) { log.error(e); iconData = unknownIcon; From e44cdbd79d8803022b56e952b37f0fd54a8e58be Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Mon, 2 Sep 2024 19:55:04 +0530 Subject: [PATCH 42/51] test: Add second icon pack --- cypress/platform/architecture-external.html | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/cypress/platform/architecture-external.html b/cypress/platform/architecture-external.html index b76ac54ce..71770425d 100644 --- a/cypress/platform/architecture-external.html +++ b/cypress/platform/architecture-external.html @@ -20,6 +20,7 @@ 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]