@mermaid-js/mermaid-cli 11.4.2 → 11.4.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/README.md +4 -11
  2. package/dist/assets/index-DQukWeul.js +38 -0
  3. package/dist/index.html +1 -1
  4. package/dist-types/src/index.d.ts +7 -2
  5. package/dist-types/src/index.d.ts.map +1 -1
  6. package/dist-types/src/version.d.ts +1 -1
  7. package/package.json +2 -2
  8. package/src/index.js +20 -8
  9. package/src/version.js +1 -1
  10. package/dist/assets/index-BgzLmH-2.js +0 -38
package/dist/index.html CHANGED
@@ -1,6 +1,6 @@
1
1
  <!doctype html>
2
2
  <html>
3
- <script charset="utf-8" src="./assets/index-BgzLmH-2.js"></script>
3
+ <script charset="utf-8" src="./assets/index-DQukWeul.js"></script>
4
4
 
5
5
  <body>
6
6
  <div id="container"></div>
package/dist-types/src/index.d.ts CHANGED
@@ -26,10 +26,14 @@ export type ParseMDDOptions = {
26
26
  * - The id attribute for the SVG element to be rendered.
27
27
  */
28
28
  svgId?: string | undefined;
29
+ /**
30
+ * - Icon packages to use.
31
+ */
32
+ iconPacks?: string[] | undefined;
29
33
  };
30
34
  /**
31
35
  * Markdown image properties
32
- * Used to create an markdown image that looks like `![alt](url "title")`
36
+ * Used to create a markdown image that looks like `![alt](url "title")`
33
37
  */
34
38
  export type MarkdownImageProps = {
35
39
  /**
@@ -74,6 +78,7 @@ export function run(input: `${string}.${"md" | "markdown"}` | string | undefined
74
78
  * @property {CSSStyleDeclaration["cssText"]} [myCSS] - Optional CSS text.
75
79
  * @property {boolean} [pdfFit] - If set, scale PDF to fit chart.
76
80
  * @property {string} [svgId] - The id attribute for the SVG element to be rendered.
81
+ * @property {string[]} [iconPacks] - Icon packages to use.
77
82
  */
78
83
  /**
79
84
  * Render a mermaid diagram.
@@ -85,7 +90,7 @@ export function run(input: `${string}.${"md" | "markdown"}` | string | undefined
85
90
  * @returns {Promise<{title: string | null, desc: string | null, data: Uint8Array}>} The output file in bytes,
86
91
  * with optional metadata.
87
92
  */
88
- export function renderMermaid(browser: import("puppeteer").Browser | import("puppeteer").BrowserContext, definition: string, outputFormat: "svg" | "png" | "pdf", { viewport, backgroundColor, mermaidConfig, myCSS, pdfFit, svgId }?: ParseMDDOptions): Promise<{
93
+ export function renderMermaid(browser: import("puppeteer").Browser | import("puppeteer").BrowserContext, definition: string, outputFormat: "svg" | "png" | "pdf", { viewport, backgroundColor, mermaidConfig, myCSS, pdfFit, svgId, iconPacks }?: ParseMDDOptions): Promise<{
89
94
  title: string | null;
90
95
  desc: string | null;
91
96
  data: Uint8Array;
package/dist-types/src/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SAyWc,MAAM;;;;SACN,MAAM;;;;;;AAqBpB;;;;;;;;;;;;;;GAcG;AACH,2BAZW,GAAG,MAAM,IAAI,IAAI,GAAG,UAAU,EAAE,GAAG,MAAM,GAAG,SAAS,UAIrD,GAAG,MAAM,IAAI,IAAI,GAAG,UAAU,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,EAAE,GAAG,aAAa,8DAEhF;IAAiD,eAAe;IACzC,KAAK;IACS,YAAY;IAElB,eAAe;CAChD,iBA+GA;AAvSD;;;;;;;;GAQG;AAEH;;;;;;;;;GASG;AACH,uCAPW,OAAO,WAAW,EAAE,OAAO,GAAG,OAAO,WAAW,EAAE,cAAc,cAChE,MAAM,gBACN,KAAK,GAAG,KAAK,GAAG,KAAK,uEACrB,eAAe,GACb,OAAO,CAAC;IAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IAAC,IAAI,EAAE,UAAU,CAAA;CAAC,CAAC,CA8HlF;AA5PD,qCA2GC;AA/LD;;;;;GAKG;AACH,+BAHW,MAAM,GACJ,KAAK,CAKjB;sBAxBqB,WAAW"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SAqXc,MAAM;;;;SACN,MAAM;;;;;;AAqBpB;;;;;;;;;;;;;;GAcG;AACH,2BAZW,GAAG,MAAM,IAAI,IAAI,GAAG,UAAU,EAAE,GAAG,MAAM,GAAG,SAAS,UAIrD,GAAG,MAAM,IAAI,IAAI,GAAG,UAAU,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,EAAE,GAAG,aAAa,8DAEhF;IAAiD,eAAe;IACzC,KAAK;IACS,YAAY;IAElB,eAAe;CAChD,iBA+GA;AAlTD;;;;;;;;;GASG;AAEH;;;;;;;;;GASG;AACH,uCAPW,OAAO,WAAW,EAAE,OAAO,GAAG,OAAO,WAAW,EAAE,cAAc,cAChE,MAAM,gBACN,KAAK,GAAG,KAAK,GAAG,KAAK,kFACrB,eAAe,GACb,OAAO,CAAC;IAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IAAC,IAAI,EAAE,UAAU,CAAA;CAAC,CAAC,CAwIlF;AAxQD,qCA4GC;AAhMD;;;;;GAKG;AACH,+BAHW,MAAM,GACJ,KAAK,CAKjB;sBAxBqB,WAAW"}
package/dist-types/src/version.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- export const version: "11.4.2";
1
+ export const version: "11.4.3";
2
2
  //# sourceMappingURL=version.d.ts.map
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mermaid-js/mermaid-cli",
3
- "version": "11.4.2",
3
+ "version": "11.4.3",
4
4
  "description": "Command-line interface for mermaid",
5
5
  "license": "MIT",
6
6
  "repository": "git@github.com:mermaid-js/mermaid-cli.git",
@@ -32,7 +32,7 @@
32
32
  "dependencies": {
33
33
  "@mermaid-js/mermaid-zenuml": "^0.2.0",
34
34
  "chalk": "^5.0.1",
35
- "commander": "^12.1.0",
35
+ "commander": "^13.1.0",
36
36
  "import-meta-resolve": "^4.1.0",
37
37
  "mermaid": "^11.0.2"
38
38
  },
package/src/index.js CHANGED
@@ -97,7 +97,7 @@ async function getInputData (inputFile) {
97
97
  function parseCommanderInt (value, _unused) {
98
98
  const parsedValue = parseInt(value, 10)
99
99
  if (isNaN(parsedValue) || parsedValue < 1) {
100
- throw new InvalidArgumentError('Not an positive integer.')
100
+ throw new InvalidArgumentError('Not a positive integer.')
101
101
  }
102
102
  return parsedValue
103
103
  }
@@ -120,11 +120,12 @@ async function cli () {
120
120
  .option('-f, --pdfFit', 'Scale PDF to fit chart')
121
121
  .option('-q, --quiet', 'Suppress log output')
122
122
  .option('-p --puppeteerConfigFile [puppeteerConfigFile]', 'JSON configuration file for puppeteer.')
123
+ .option('--iconPacks <icons...>', 'Icon packs to use, e.g. @iconify-json/logos. These should be Iconify NPM packages that expose a icons.json file, see https://iconify.design/docs/icons/json.html. These will be downloaded from https://unkpg.com when needed.', [])
123
124
  .parse(process.argv)
124
125
 
125
126
  const options = commander.opts()
126
127
 
127
- let { theme, width, height, input, output, outputFormat, backgroundColor, configFile, cssFile, svgId, puppeteerConfigFile, scale, pdfFit, quiet } = options
128
+ let { theme, width, height, input, output, outputFormat, backgroundColor, configFile, cssFile, svgId, puppeteerConfigFile, scale, pdfFit, quiet, iconPacks } = options
128
129
 
129
130
  // check input file
130
131
  if (!input) {
@@ -157,7 +158,7 @@ async function cli () {
157
158
  if (!outputFormat) {
158
159
  outputFormat = 'svg'
159
160
  warn('No output format specified, using svg. ' +
160
- 'If you want to specify an output format and supress this warning, ' +
161
+ 'If you want to specify an output format and suppress this warning, ' +
161
162
  'please use `-e <format>.` '
162
163
  )
163
164
  }
@@ -205,7 +206,7 @@ async function cli () {
205
206
  quiet,
206
207
  outputFormat,
207
208
  parseMMDOptions: {
208
- mermaidConfig, backgroundColor, myCSS, pdfFit, viewport: { width, height, deviceScaleFactor: scale }, svgId
209
+ mermaidConfig, backgroundColor, myCSS, pdfFit, viewport: { width, height, deviceScaleFactor: scale }, svgId, iconPacks
209
210
  }
210
211
  }
211
212
  )
@@ -219,6 +220,7 @@ async function cli () {
219
220
  * @property {CSSStyleDeclaration["cssText"]} [myCSS] - Optional CSS text.
220
221
  * @property {boolean} [pdfFit] - If set, scale PDF to fit chart.
221
222
  * @property {string} [svgId] - The id attribute for the SVG element to be rendered.
223
+ * @property {string[]} [iconPacks] - Icon packages to use.
222
224
  */
223
225
 
224
226
  /**
@@ -231,7 +233,7 @@ async function cli () {
231
233
  * @returns {Promise<{title: string | null, desc: string | null, data: Uint8Array}>} The output file in bytes,
232
234
  * with optional metadata.
233
235
  */
234
- async function renderMermaid (browser, definition, outputFormat, { viewport, backgroundColor = 'white', mermaidConfig = {}, myCSS, pdfFit, svgId } = {}) {
236
+ async function renderMermaid (browser, definition, outputFormat, { viewport, backgroundColor = 'white', mermaidConfig = {}, myCSS, pdfFit, svgId, iconPacks = [] } = {}) {
235
237
  const page = await browser.newPage()
236
238
  page.on('console', (msg) => {
237
239
  console.warn(msg.text())
@@ -249,7 +251,7 @@ async function renderMermaid (browser, definition, outputFormat, { viewport, bac
249
251
  page.addScriptTag({ path: mermaidIIFEPath }),
250
252
  page.addScriptTag({ path: zenumlIIFEPath })
251
253
  ])
252
- const metadata = await page.$eval('#container', async (container, definition, mermaidConfig, myCSS, backgroundColor, svgId) => {
254
+ const metadata = await page.$eval('#container', async (container, definition, mermaidConfig, myCSS, backgroundColor, svgId, iconPacks) => {
253
255
  await Promise.all(Array.from(document.fonts, (font) => font.load()))
254
256
 
255
257
  /**
@@ -264,6 +266,16 @@ async function renderMermaid (browser, definition, outputFormat, { viewport, bac
264
266
 
265
267
  await mermaid.registerExternalDiagrams([zenuml])
266
268
  mermaid.registerLayoutLoaders(elkLayouts)
269
+ // lazy load icon packs
270
+ mermaid.registerIconPacks(
271
+ iconPacks.map((icon) => ({
272
+ name: icon.split('/')[1],
273
+ loader: () =>
274
+ fetch(`https://unpkg.com/${icon}/icons.json`)
275
+ .then((res) => res.json())
276
+ .catch(() => error(`Failed to fetch icon: ${icon}`))
277
+ }))
278
+ )
267
279
  mermaid.initialize({ startOnLoad: false, ...mermaidConfig })
268
280
  // should throw an error if mmd diagram is invalid
269
281
  const { svg: svgText } = await mermaid.render(svgId || 'my-svg', definition, container)
@@ -302,7 +314,7 @@ async function renderMermaid (browser, definition, outputFormat, { viewport, bac
302
314
  return {
303
315
  title, desc
304
316
  }
305
- }, definition, mermaidConfig, myCSS, backgroundColor, svgId)
317
+ }, definition, mermaidConfig, myCSS, backgroundColor, svgId, iconPacks)
306
318
 
307
319
  if (outputFormat === 'svg') {
308
320
  const svgXML = await page.$eval('svg', (svg) => {
@@ -358,7 +370,7 @@ async function renderMermaid (browser, definition, outputFormat, { viewport, bac
358
370
 
359
371
  /**
360
372
  * @typedef {object} MarkdownImageProps Markdown image properties
361
- * Used to create an markdown image that looks like `![alt](url "title")`
373
+ * Used to create a markdown image that looks like `![alt](url "title")`
362
374
  * @property {string} url - Path to image.
363
375
  * @property {string} alt - Image alt text, required.
364
376
  * @property {string | null} [title] - Optional image title text.
package/src/version.js CHANGED
@@ -1 +1 @@
1
- export const version = '11.4.2'
1
+ export const version = '11.4.3'