From 95c483934dd473a90746efa0e6a97bca1398523f Mon Sep 17 00:00:00 2001 From: NicolasNewman Date: Mon, 19 Aug 2024 17:40:12 -0500 Subject: [PATCH] feat(arch): all non-generic icon packs are now lazy loaded --- demos/architecture.html | 7 +-- docs/config/icons.md | 12 +++- .../setup/interfaces/mermaid.MermaidConfig.md | 56 +++++++++---------- packages/mermaid/src/config.type.ts | 5 +- packages/mermaid/src/docs/config/icons.md | 12 +++- packages/mermaid/src/mermaidAPI.ts | 14 ++++- .../digitalOcean.ts | 0 .../mermaid/src/rendering-util/svg/index.ts | 18 ++++-- .../mermaid/src/schemas/config.schema.yaml | 2 +- 9 files changed, 77 insertions(+), 49 deletions(-) rename packages/mermaid/src/rendering-util/svg/{digitial-ocean => digital-ocean}/digitalOcean.ts (100%) diff --git a/demos/architecture.html b/demos/architecture.html index deacbc242..fc65b6beb 100644 --- a/demos/architecture.html +++ b/demos/architecture.html @@ -232,9 +232,8 @@ service s3(aws:s3)[Cloud Store] service ec2(aws:ec2)[Server] service wave(aws:wavelength)[Wave] - - s3:L -- R:ec2 - s3:T -- B:wave + service droplet(do:droplet)[Droplet] + service repo(gh:github)[Repository] @@ -296,7 +295,7 @@ iconSize: 80, }, useMaxWidth: false, - iconLibraries: ['aws:full'], + iconLibraries: ['aws:common', 'aws:full', 'github', 'digital-ocean'], }); function callback() { alert('It worked'); diff --git a/docs/config/icons.md b/docs/config/icons.md index 58487acbb..d0a80f2d8 100644 --- a/docs/config/icons.md +++ b/docs/config/icons.md @@ -23,9 +23,15 @@ SVG Icons can be used with supported diagrams. Alongside the icon packs included | Digital Ocean | `do:` | | GitHub | `gh:` | -### Extended AWS Icons +Note that in order to use non-generic icons that are provided with Mermaid, the packs must be explicitly loaded when on initialization initialized. -Due to the large number of icons available to represent AWS services, only the most important ones are enabled by default. For full access, add `'aws:full'` to the `iconLibraries` field when initializing mermaid. +```js +import sampleIconPack from 'sample-icon-pack'; + +mermaid.initialize({ + iconLibraries: ['aws:common', 'aws:full', 'github', 'digital-ocean'], +}); +``` ## Using Custom Icon Packs @@ -35,7 +41,7 @@ Custom icon packs can be used by including them in the `iconLibraries` array on import sampleIconPack from 'sample-icon-pack'; mermaid.initialize({ - iconLibraries: [sampleIconPack, 'aws:full'], + iconLibraries: [sampleIconPack, 'aws:full', ...], }); ``` diff --git a/docs/config/setup/interfaces/mermaid.MermaidConfig.md b/docs/config/setup/interfaces/mermaid.MermaidConfig.md index d0f689ce0..c7ac33dde 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:190](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L190) +[packages/mermaid/src/config.type.ts:193](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L193) --- @@ -49,7 +49,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:199](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L199) --- @@ -59,7 +59,7 @@ This matters if you are using base tag settings. #### 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:196](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L196) --- @@ -69,7 +69,7 @@ This matters if you are using base tag settings. #### 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:186](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L186) --- @@ -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:177](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L177) +[packages/mermaid/src/config.type.ts:180](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L180) --- @@ -111,7 +111,7 @@ should not change unless content is changed. #### Defined in -[packages/mermaid/src/config.type.ts:170](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L170) +[packages/mermaid/src/config.type.ts:173](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L173) --- @@ -121,7 +121,7 @@ should not change unless content is changed. #### 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:200](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L200) --- @@ -148,7 +148,7 @@ should not change unless content is changed. #### 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:188](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L188) --- @@ -158,7 +158,7 @@ should not change unless content is changed. #### Defined in -[packages/mermaid/src/config.type.ts:178](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L178) +[packages/mermaid/src/config.type.ts:181](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L181) --- @@ -182,7 +182,7 @@ See #### 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:202](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L202) --- @@ -196,7 +196,7 @@ If set to true, ignores legacyMathML. #### Defined in -[packages/mermaid/src/config.type.ts:159](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L159) +[packages/mermaid/src/config.type.ts:162](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L162) --- @@ -206,7 +206,7 @@ If set to true, ignores legacyMathML. #### Defined in -[packages/mermaid/src/config.type.ts:180](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L180) +[packages/mermaid/src/config.type.ts:183](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L183) --- @@ -216,7 +216,7 @@ If set to true, ignores legacyMathML. #### 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:195](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L195) --- @@ -244,7 +244,7 @@ Defines the seed to be used when using handDrawn look. This is important for the ### iconLibraries -• `Optional` **iconLibraries**: ([`IconLibrary`](../modules/mermaid.md#iconlibrary) | `"aws:full"`)\[] +• `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. @@ -261,7 +261,7 @@ For supported diagrams (i.e., Architecture), their syntax allows refering to key #### 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:184](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L184) --- @@ -322,7 +322,7 @@ Defines which main look to use for the 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:203](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L203) --- @@ -356,7 +356,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:194](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L194) --- @@ -366,7 +366,7 @@ The maximum allowed size of the users text diagram #### 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:198](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L198) --- @@ -376,7 +376,7 @@ The maximum allowed size of the users text diagram #### 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:189](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L189) --- @@ -386,7 +386,7 @@ The maximum allowed size of the users text diagram #### 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:190](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L190) --- @@ -396,7 +396,7 @@ The maximum allowed size of the users text diagram #### 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:192](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L192) --- @@ -406,7 +406,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:197](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L197) --- @@ -442,7 +442,7 @@ Level of trust for parsed diagram #### Defined in -[packages/mermaid/src/config.type.ts:179](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L179) +[packages/mermaid/src/config.type.ts:182](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L182) --- @@ -464,7 +464,7 @@ Dictates whether mermaid starts on Page load #### 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:187](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L187) --- @@ -477,7 +477,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:206](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L206) +[packages/mermaid/src/config.type.ts:209](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L209) --- @@ -520,7 +520,7 @@ You may also use `themeCSS` to override this value. #### 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:185](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L185) --- @@ -530,7 +530,7 @@ You may also use `themeCSS` to override this value. #### 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:201](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L201) --- @@ -540,4 +540,4 @@ You may also use `themeCSS` to override this value. #### 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:191](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L191) diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts index 3f8144f23..7c2eccefd 100644 --- a/packages/mermaid/src/config.type.ts +++ b/packages/mermaid/src/config.type.ts @@ -149,7 +149,10 @@ export interface MermaidConfig { * 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; + 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/docs/config/icons.md b/packages/mermaid/src/docs/config/icons.md index 285037182..0b9c78d54 100644 --- a/packages/mermaid/src/docs/config/icons.md +++ b/packages/mermaid/src/docs/config/icons.md @@ -17,9 +17,15 @@ SVG Icons can be used with supported diagrams. Alongside the icon packs included | Digital Ocean | `do:` | | GitHub | `gh:` | -### Extended AWS Icons +Note that in order to use non-generic icons that are provided with Mermaid, the packs must be explicitly loaded when on initialization initialized. -Due to the large number of icons available to represent AWS services, only the most important ones are enabled by default. For full access, add `'aws:full'` to the `iconLibraries` field when initializing mermaid. +```js +import sampleIconPack from 'sample-icon-pack'; + +mermaid.initialize({ + iconLibraries: ['aws:common', 'aws:full', 'github', 'digital-ocean'], +}); +``` ## Using Custom Icon Packs @@ -29,7 +35,7 @@ Custom icon packs can be used by including them in the `iconLibraries` array on import sampleIconPack from 'sample-icon-pack'; mermaid.initialize({ - iconLibraries: [sampleIconPack, 'aws:full'], + iconLibraries: [sampleIconPack, 'aws:full', ...], }); ``` diff --git a/packages/mermaid/src/mermaidAPI.ts b/packages/mermaid/src/mermaidAPI.ts index 861d115ff..7fb8b8401 100644 --- a/packages/mermaid/src/mermaidAPI.ts +++ b/packages/mermaid/src/mermaidAPI.ts @@ -23,6 +23,7 @@ import { setA11yDiagramInfo, addSVGa11yTitleDescription } from './accessibility. 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'; @@ -495,10 +496,17 @@ function initialize(options: MermaidConfig = {}) { // eslint-disable-next-line @typescript-eslint/no-misused-promises options.iconLibraries.forEach(async (library) => { if (typeof library === 'string') { - if (library === 'aws:full') { - const { default: awsFull } = await import('./rendering-util/svg/aws/awsFull.js'); - registerIcons(awsFull); + 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); } diff --git a/packages/mermaid/src/rendering-util/svg/digitial-ocean/digitalOcean.ts b/packages/mermaid/src/rendering-util/svg/digital-ocean/digitalOcean.ts similarity index 100% rename from packages/mermaid/src/rendering-util/svg/digitial-ocean/digitalOcean.ts rename to packages/mermaid/src/rendering-util/svg/digital-ocean/digitalOcean.ts diff --git a/packages/mermaid/src/rendering-util/svg/index.ts b/packages/mermaid/src/rendering-util/svg/index.ts index 01329bac5..22a8514a7 100644 --- a/packages/mermaid/src/rendering-util/svg/index.ts +++ b/packages/mermaid/src/rendering-util/svg/index.ts @@ -6,9 +6,16 @@ import internet from './default/internet.js'; import cloud from './default/cloud.js'; import unknown from './default/unknown.js'; import blank from './default/blank.js'; -import awsCommon from './aws/awsCommon.js'; -import digitalOcean from './digitial-ocean/digitalOcean.js'; -import github from './github/github.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, @@ -18,9 +25,8 @@ const defaultIconLibrary: IconLibrary = { cloud: cloud, unknown: unknown, blank: blank, - ...awsCommon, - ...digitalOcean, - ...github, }; 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 fddd4a6fa..017060756 100644 --- a/packages/mermaid/src/schemas/config.schema.yaml +++ b/packages/mermaid/src/schemas/config.schema.yaml @@ -220,7 +220,7 @@ properties: 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 + tsType: Array forceLegacyMathML: description: | This option forces Mermaid to rely on KaTeX's own stylesheet for rendering MathML. Due to differences between OS