mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-01-28 07:03:17 +08:00
feat(arch): all non-generic icon packs are now lazy loaded
This commit is contained in:
NicolasNewman
parent
d36522648f
commit
95c483934d
@ -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]
|
||||
</pre
|
||||
>
|
||||
|
||||
@ -296,7 +295,7 @@
|
||||
iconSize: 80,
|
||||
},
|
||||
useMaxWidth: false,
|
||||
iconLibraries: ['aws:full'],
|
||||
iconLibraries: ['aws:common', 'aws:full', 'github', 'digital-ocean'],
|
||||
});
|
||||
function callback() {
|
||||
alert('It worked');
|
||||
|
||||
@ -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', ...],
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
@ -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 <https://developer.mozilla.org/en-US/docs/Web/CSS/font-family>
|
||||
|
||||
#### 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)
|
||||
|
||||
@ -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<import('./rendering-util/svgRegister.js').IconLibrary | 'aws:full'>;
|
||||
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.
|
||||
|
||||
@ -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', ...],
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
@ -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<typeof getIconNamespaces>;
|
||||
|
||||
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 };
|
||||
|
||||
@ -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<import('./rendering-util/svgRegister.js').IconLibrary | 'aws:full'>
|
||||
tsType: Array<import('./rendering-util/svgRegister.js').IconLibrary | import('./rendering-util/svg/index.js').IconNamespaceKeys>
|
||||
forceLegacyMathML:
|
||||
description: |
|
||||
This option forces Mermaid to rely on KaTeX's own stylesheet for rendering MathML. Due to differences between OS
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user