@mermaid-js/mermaid-cli 10.9.0 → 11.1.1

package/dist-types/src/index.d.ts

@@ -1,5 +1,5 @@
 /**
- * Options to pass to {@link parseMMD }
+ * Options to pass to {@link parseMMD}
  */
 export type ParseMDDOptions = {
     /**
@@ -52,7 +52,7 @@ export type MarkdownImageProps = {
  * path to a markdown file containing mermaid.
  * If this is a string, loads the mermaid definition from the given file.
  * If this is `undefined`, loads the mermaid definition from stdin.
- * @param {`${string}.${"md" | "markdown" | "svg" | "png" | "pdf"}`} output - Path to the output file.
+ * @param {`${string}.${"md" | "markdown" | "svg" | "png" | "pdf"}` | "/dev/stdout"} output - Path to the output file.
  * @param {Object} [opts] - Options
  * @param {import("puppeteer").LaunchOptions} [opts.puppeteerConfig] - Puppeteer launch options.
  * @param {boolean} [opts.quiet] - If set, suppress log output.
@@ -60,27 +60,12 @@ export type MarkdownImageProps = {
  * Defaults to `output` extension. Overrides `output` extension if set.
  * @param {ParseMDDOptions} [opts.parseMMDOptions] - Options to pass to {@link parseMMDOptions}.
  */
-export function run(input: `${string}.${"md" | "markdown"}` | string | undefined, output: `${string}.${"md" | "markdown" | "svg" | "png" | "pdf"}`, { puppeteerConfig, quiet, outputFormat, parseMMDOptions }?: {
+export function run(input: `${string}.${"md" | "markdown"}` | string | undefined, output: `${string}.${"md" | "markdown" | "svg" | "png" | "pdf"}` | "/dev/stdout", { puppeteerConfig, quiet, outputFormat, parseMMDOptions }?: {
     puppeteerConfig?: puppeteer.LaunchOptions | undefined;
     quiet?: boolean | undefined;
     outputFormat?: "svg" | "png" | "pdf" | undefined;
     parseMMDOptions?: ParseMDDOptions | undefined;
 } | undefined): Promise<void>;
-/**
- * Render a mermaid diagram.
- *
- * @param {import("puppeteer").Browser} browser - Puppeteer Browser
- * @param {string} definition - Mermaid diagram definition
- * @param {"svg" | "png" | "pdf"} outputFormat - Mermaid output format.
- * @param {ParseMDDOptions} [opt] - Options, see {@link ParseMDDOptions} for details.
- * @returns {Promise<{title: string | null, desc: string | null, data: Buffer}>} The output file in bytes,
- * with optional metadata.
- */
-export function renderMermaid(browser: import("puppeteer").Browser, definition: string, outputFormat: "svg" | "png" | "pdf", { viewport, backgroundColor, mermaidConfig, myCSS, pdfFit, svgId }?: ParseMDDOptions | undefined): Promise<{
-    title: string | null;
-    desc: string | null;
-    data: Buffer;
-}>;
 /**
  * @typedef {Object} ParseMDDOptions Options to pass to {@link parseMMD}
  * @property {import("puppeteer").Viewport} [viewport] - Puppeteer viewport (e.g. `width`, `height`, `deviceScaleFactor`)
@@ -91,18 +76,20 @@ export function renderMermaid(browser: import("puppeteer").Browser, definition:
  * @property {string} [svgId] - The id attribute for the SVG element to be rendered.
  */
 /**
- * Parse and render a mermaid diagram.
- *
- * @deprecated Prefer {@link renderMermaid}, as it also returns useful metadata.
+ * Render a mermaid diagram.
  *
  * @param {import("puppeteer").Browser} browser - Puppeteer Browser
  * @param {string} definition - Mermaid diagram definition
  * @param {"svg" | "png" | "pdf"} outputFormat - Mermaid output format.
  * @param {ParseMDDOptions} [opt] - Options, see {@link ParseMDDOptions} for details.
- *
- * @returns {Promise<Buffer>} The output file in bytes.
+ * @returns {Promise<{title: string | null, desc: string | null, data: Uint8Array}>} The output file in bytes,
+ * with optional metadata.
  */
-export function parseMMD(browser: import("puppeteer").Browser, definition: string, outputFormat: "svg" | "png" | "pdf", opt?: ParseMDDOptions | undefined): Promise<Buffer>;
+export function renderMermaid(browser: import("puppeteer").Browser, definition: string, outputFormat: "svg" | "png" | "pdf", { viewport, backgroundColor, mermaidConfig, myCSS, pdfFit, svgId }?: ParseMDDOptions | undefined): Promise<{
+    title: string | null;
+    desc: string | null;
+    data: Uint8Array;
+}>;
 export function cli(): Promise<void>;
 /**
  * Prints an error to stderr, then closes with exit code 1

package/dist-types/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SA2Wc,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;;;;;8BAwGlE;AA1QD;;;;;;;;;GASG;AACH,uCAPW,OAAO,WAAW,EAAE,OAAO,cAC3B,MAAM,gBACN,KAAK,GAAG,KAAK,GAAG,KAAK,qGAEnB,QAAQ;IAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAC,CAAC,CAyH9E;AA3JD;;;;;;;;GAQG;AAEH;;;;;;;;;;;GAWG;AACH,kCAPW,OAAO,WAAW,EAAE,OAAO,cAC3B,MAAM,gBACN,KAAK,GAAG,KAAK,GAAG,KAAK,sCAGnB,QAAQ,MAAM,CAAC,CAK3B;AA3HD,qCAgGC;AApLD;;;;;GAKG;AACH,+BAHW,MAAM,GACJ,KAAK,CAKjB;sBA1BqB,WAAW"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SAuWc,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;;;;;8BAsHlF;AApSD;;;;;;;;GAQG;AAEH;;;;;;;;;GASG;AACH,uCAPW,OAAO,WAAW,EAAE,OAAO,cAC3B,MAAM,gBACN,KAAK,GAAG,KAAK,GAAG,KAAK,qGAEnB,OAAO,CAAC;IAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IAAC,IAAI,EAAE,UAAU,CAAA;CAAC,CAAC,CA2HlF;AAzPD,qCA2GC;AA/LD;;;;;GAKG;AACH,+BAHW,MAAM,GACJ,KAAK,CAKjB;sBA1BqB,WAAW"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mermaid-js/mermaid-cli",
-  "version": "10.9.0",
+  "version": "11.1.1",
   "description": "Command-line interface for mermaid",
   "license": "MIT",
   "repository": "git@github.com:mermaid-js/mermaid-cli.git",
@@ -10,7 +10,7 @@
     "mmdc": "./src/cli.js"
   },
   "engines": {
-    "node": "^14.13 || >=16.0"
+    "node": "^18.19 || >=20.0"
   },
   "exports": {
     ".": {
@@ -24,21 +24,26 @@
   "scripts": {
     "prepare": "tsc && vite build",
     "prepack": "tsc && vite build",
-    "test": "standard && yarn node --experimental-vm-modules $(yarn bin jest)",
+    "test": "NODE_OPTIONS=\"$NODE_OPTIONS --experimental-vm-modules\" npx jest",
     "lint": "standard",
     "lint-fix": "standard --fix"
   },
   "dependencies": {
     "chalk": "^5.0.1",
-    "commander": "^10.0.0",
-    "mermaid": "^10.8.0",
-    "puppeteer": "^19.0.0"
+    "commander": "^12.1.0",
+    "mermaid": "^11.0.2"
+  },
+  "peerDependencies": {
+    "puppeteer": "^23"
   },
   "devDependencies": {
-    "@fortawesome/fontawesome-free": "^5.6.0",
+    "@fortawesome/fontawesome-free": "^6.5.2",
+    "@mermaid-js/layout-elk": "^0.1.2",
     "@mermaid-js/mermaid-zenuml": "^0.2.0",
-    "@tsconfig/node14": "^14.1.0",
+    "@tsconfig/node18": "^18.2.4",
+    "@types/node": "~18.19.31",
     "jest": "^29.0.1",
+    "puppeteer": "^23.1.1",
     "standard": "^17.0.0",
     "typescript": "^5.0.1-rc",
     "vite": "^4.0.3",
@@ -61,5 +66,6 @@
       "/dist/",
       "/dist-types/"
     ]
-  }
+  },
+  "packageManager": "npm@10.8.1"
 }

package/src/index.js

@@ -111,7 +111,7 @@ async function cli () {
     .addOption(new Option('-w, --width [width]', 'Width of the page').argParser(parseCommanderInt).default(800))
     .addOption(new Option('-H, --height [height]', 'Height of the page').argParser(parseCommanderInt).default(600))
     .option('-i, --input <input>', 'Input mermaid file. Files ending in .md will be treated as Markdown and all charts (e.g. ```mermaid (...)``` or :::mermaid (...):::) will be extracted and generated. Use `-` to read from stdin.')
-    .option('-o, --output [output]', 'Output file. It should be either md, svg, png or pdf. Optional. Default: input + ".svg"')
+    .option('-o, --output [output]', 'Output file. It should be either md, svg, png, pdf or use `-` to output to stdout. Optional. Default: input + ".svg"')
     .addOption(new Option('-e, --outputFormat [format]', 'Output format for the generated image.').choices(['svg', 'png', 'pdf']).default(null, 'Loaded from the output file extension'))
     .addOption(new Option('-b, --backgroundColor [backgroundColor]', 'Background color for pngs/svgs (not pdfs). Example: transparent, red, \'#F0F0F0\'.').default('white'))
     .option('-c, --configFile [configFile]', 'JSON configuration file for mermaid.')
@@ -150,12 +150,24 @@ async function cli () {
     } else {
       output = input ? (`${input}.svg`) : 'out.svg'
     }
-  }
-  if (!/\.(?:svg|png|pdf|md|markdown)$/.test(output)) {
+  } else if (output === '-') {
+    // `--output -` means write to stdout.
+    output = '/dev/stdout'
+    quiet = true
+
+    if (!outputFormat) {
+      outputFormat = 'svg'
+      warn('No output format specified, using svg. ' +
+        'If you want to specify an output format and supress this warning, ' +
+        'please use `-e <format>.` '
+      )
+    }
+  } else if (!/\.(?:svg|png|pdf|md|markdown)$/.test(output)) {
     error('Output file must end with ".md"/".markdown", ".svg", ".png" or ".pdf"')
   }
+
   const outputDir = path.dirname(output)
-  if (!fs.existsSync(outputDir)) {
+  if (output !== '/dev/stdout' && !fs.existsSync(outputDir)) {
     error(`Output directory "${outputDir}/" doesn't exist`)
   }
 
@@ -165,15 +177,14 @@ async function cli () {
     checkConfigFile(configFile)
     mermaidConfig = Object.assign(mermaidConfig, JSON.parse(fs.readFileSync(configFile, 'utf-8')))
   }
-  // @ts-expect-error Setting headless to `1` is not officially supported
+
   let puppeteerConfig = /** @type {import('puppeteer').PuppeteerLaunchOptions} */ ({
     /*
-     * `headless: 1` is not officially supported, but setting this to any
-     * non-`true` truthy value doesn't change any behavior, but it hides the
-     * Puppeteer old Headless deprecation warning,
-     * see https://github.com/argos-ci/jest-puppeteer/issues/553#issuecomment-1561826456
+     * `headless: 'shell'` is not officially supported in Puppeteer v19, v20, v21,
+     * but still works. In Puppeteer v22, it uses the `chrome-headless-shell` package,
+     * which is much faster than the regular headless mode.
      */
-    headless: 1
+    headless: 'shell'
   })
   if (puppeteerConfigFile) {
     checkConfigFile(puppeteerConfigFile)
@@ -211,23 +222,6 @@ async function cli () {
  * @property {string} [svgId] - The id attribute for the SVG element to be rendered.
  */
 
-/**
- * Parse and render a mermaid diagram.
- *
- * @deprecated Prefer {@link renderMermaid}, as it also returns useful metadata.
- *
- * @param {import("puppeteer").Browser} browser - Puppeteer Browser
- * @param {string} definition - Mermaid diagram definition
- * @param {"svg" | "png" | "pdf"} outputFormat - Mermaid output format.
- * @param {ParseMDDOptions} [opt] - Options, see {@link ParseMDDOptions} for details.
- *
- * @returns {Promise<Buffer>} The output file in bytes.
- */
-async function parseMMD (browser, definition, outputFormat, opt) {
-  const { data } = await renderMermaid(browser, definition, outputFormat, opt)
-  return data
-}
-
 /**
  * Render a mermaid diagram.
  *
@@ -235,13 +229,13 @@ async function parseMMD (browser, definition, outputFormat, opt) {
  * @param {string} definition - Mermaid diagram definition
  * @param {"svg" | "png" | "pdf"} outputFormat - Mermaid output format.
  * @param {ParseMDDOptions} [opt] - Options, see {@link ParseMDDOptions} for details.
- * @returns {Promise<{title: string | null, desc: string | null, data: Buffer}>} The output file in bytes,
+ * @returns {Promise<{title: string | null, desc: string | null, data: Uint8Array}>} The output file in bytes,
  * with optional metadata.
  */
 async function renderMermaid (browser, definition, outputFormat, { viewport, backgroundColor = 'white', mermaidConfig = {}, myCSS, pdfFit, svgId } = {}) {
   const page = await browser.newPage()
   page.on('console', (msg) => {
-    console.log(msg.text())
+    console.warn(msg.text())
   })
   try {
     if (viewport) {
@@ -262,10 +256,12 @@ async function renderMermaid (browser, definition, outputFormat, { viewport, bac
        * so that they get correctly bundled.
        * @property {import("mermaid")["default"]} mermaid Already imported mermaid instance
        * @property {import("@mermaid-js/mermaid-zenuml")["default"]} zenuml Already imported mermaid-zenuml instance
+       * @property {import("@mermaid-js/layout-elk")["default"]} elkLayouts Already imported mermaid-elkLayouts instance
        */
-      const { mermaid, zenuml } = /** @type {GlobalThisWithMermaid & typeof globalThis} */ (globalThis)
+      const { mermaid, zenuml, elkLayouts } = /** @type {GlobalThisWithMermaid & typeof globalThis} */ (globalThis)
 
       await mermaid.registerExternalDiagrams([zenuml])
+      mermaid.registerLayoutLoaders(elkLayouts)
       mermaid.initialize({ startOnLoad: false, ...mermaidConfig })
       // should throw an error if mmd diagram is invalid
       const { svg: svgText } = await mermaid.render(svgId || 'my-svg', definition, container)
@@ -390,7 +386,7 @@ function markdownImage ({ url, title, alt }) {
  * path to a markdown file containing mermaid.
  * If this is a string, loads the mermaid definition from the given file.
  * If this is `undefined`, loads the mermaid definition from stdin.
- * @param {`${string}.${"md" | "markdown" | "svg" | "png" | "pdf"}`} output - Path to the output file.
+ * @param {`${string}.${"md" | "markdown" | "svg" | "png" | "pdf"}` | "/dev/stdout"} output - Path to the output file.
  * @param {Object} [opts] - Options
  * @param {import("puppeteer").LaunchOptions} [opts.puppeteerConfig] - Puppeteer launch options.
  * @param {boolean} [opts.quiet] - If set, suppress log output.
@@ -413,7 +409,11 @@ async function run (input, output, { puppeteerConfig = {}, quiet = false, output
   // TODO: should we use a Markdown parser like remark instead of rolling our own parser?
   const mermaidChartsInMarkdown = /^[^\S\n]*[`:]{3}(?:mermaid)([^\S\n]*\r?\n([\s\S]*?))[`:]{3}[^\S\n]*$/
   const mermaidChartsInMarkdownRegexGlobal = new RegExp(mermaidChartsInMarkdown, 'gm')
-  const browser = await puppeteer.launch(puppeteerConfig)
+  /**
+   * @type {puppeteer.Browser | undefined}
+   * Lazy-loaded browser instance, only created when needed.
+   */
+  let browser
   try {
     if (!outputFormat) {
       const outputFormatFromFilename =
@@ -433,8 +433,15 @@ async function run (input, output, { puppeteerConfig = {}, quiet = false, output
 
     const definition = await getInputData(input)
     if (input && /\.(md|markdown)$/.test(input)) {
+      if (output === '/dev/stdout') {
+        throw new Error('Cannot use `stdout` with markdown input')
+      }
+
       const imagePromises = []
       for (const mermaidCodeblockMatch of definition.matchAll(mermaidChartsInMarkdownRegexGlobal)) {
+        if (browser === undefined) {
+          browser = await puppeteer.launch(puppeteerConfig)
+        }
         const mermaidDefinition = mermaidCodeblockMatch[2]
 
         /** Output can be either a template image file, or a `.md` output file.
@@ -488,12 +495,15 @@ async function run (input, output, { puppeteerConfig = {}, quiet = false, output
       }
     } else {
       info('Generating single mermaid chart')
-      const data = await parseMMD(browser, definition, outputFormat, parseMMDOptions)
-      await fs.promises.writeFile(output, data)
+      browser = await puppeteer.launch(puppeteerConfig)
+      const { data } = await renderMermaid(browser, definition, outputFormat, parseMMDOptions)
+      await output !== '/dev/stdout'
+        ? fs.promises.writeFile(output, data)
+        : process.stdout.write(data)
     }
   } finally {
-    await browser.close()
+    await browser?.close?.()
   }
 }
 
-export { run, renderMermaid, parseMMD, cli, error }
+export { run, renderMermaid, cli, error }