@mermaid-js/mermaid-cli 9.1.7 → 9.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mermaid-js/mermaid-cli",
-  "version": "9.1.7",
+  "version": "9.3.0",
   "description": "Command-line interface for mermaid",
   "license": "MIT",
   "repository": "git@github.com:mermaid-js/mermaid-cli.git",
@@ -10,13 +10,12 @@
     "mmdc": "./src/cli.js"
   },
   "engines": {
-    "node": ">=14.1.0"
+    "node": "^14.13 || >=16.0"
   },
   "exports": "./src/index.js",
   "scripts": {
-    "upgrade": "yarn-upgrade-all && sh copy_modules.sh",
-    "prepare": "sh copy_modules.sh",
-    "prepack": "sh copy_modules.sh",
+    "prepare": "vite build",
+    "prepack": "vite build",
     "test": "standard && yarn node --experimental-vm-modules $(yarn bin jest)",
     "lint": "standard",
     "lint-fix": "standard --fix"
@@ -24,20 +23,22 @@
   "dependencies": {
     "chalk": "^5.0.1",
     "commander": "^9.0.0",
-    "puppeteer": "^18.0.5"
+    "puppeteer": "^19.0.0"
   },
   "devDependencies": {
     "@fortawesome/fontawesome-free-webfonts": "^1.0.9",
-    "mermaid": "^9.1.2",
+    "@mermaid-js/mermaid-mindmap": "^9.2.2",
+    "mermaid": "^9.2.2",
     "jest": "^29.0.1",
     "standard": "^17.0.0",
+    "vite": "^4.0.3",
+    "vite-plugin-singlefile": "^0.13.1",
+    "vite-svg-loader": "^4.0.0",
     "yarn-upgrade-all": "^0.7.0"
   },
   "files": [
     "src/",
-    "mermaid.min.js",
-    "index.html",
-    "fontawesome/*"
+    "dist/"
   ],
   "jest": {
     "moduleNameMapper": {
@@ -46,7 +47,7 @@
   },
   "standard": {
     "ignore": [
-      "mermaid.min.js"
+      "/dist/"
     ]
   }
 }

package/src/index.js

@@ -1,4 +1,4 @@
-import { Command } from 'commander'
+import { Command, Option, InvalidArgumentError } from 'commander'
 import chalk from 'chalk'
 import fs from 'fs'
 import path from 'path'
@@ -60,23 +60,40 @@ const getInputData = async inputFile => new Promise((resolve, reject) => {
   })
 })
 
+/**
+ * Commander parser that converts a string to an integer.
+ *
+ * @param {string} value - The value from commander.
+ * @param {*} _unused - Unused.
+ * @returns {number} The value parsed as a number.
+ * @throws {InvalidArgumentError} If the arg is not valid.
+ * @see https://github.com/tj/commander.js/wiki/Class:-Option#argparserfn
+ */
+function parseCommanderInt (value, _unused) {
+  const parsedValue = parseInt(value, 10)
+  if (isNaN(parsedValue) || parsedValue < 1) {
+    throw new InvalidArgumentError('Not an positive integer.')
+  }
+  return parsedValue
+}
+
 async function cli () {
   const commander = new Command()
   commander
     .version(pkg.version)
-    .option('-t, --theme [theme]', 'Theme of the chart, could be default, forest, dark or neutral. Optional. Default: default', /^default|forest|dark|neutral$/, 'default')
-    .option('-w, --width [width]', 'Width of the page. Optional. Default: 800', /^\d+$/, '800')
-    .option('-H, --height [height]', 'Height of the page. Optional. Default: 600', /^\d+$/, '600')
+    .addOption(new Option('-t, --theme [theme]', 'Theme of the chart').choices(['default', 'forest', 'dark', 'neutral']).default('default'))
+    .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 (...)```) will be extracted and generated. Required.')
     .option('-o, --output [output]', 'Output file. It should be either md, svg, png or pdf. Optional. Default: input + ".svg"')
-    .option('-e, --outputFormat <format>', 'Output format for the generated image. It should be either svg, png or pdf. Optional. Default: output file extension')
-    .option('-b, --backgroundColor [backgroundColor]', 'Background color for pngs/svgs (not pdfs). Example: transparent, red, \'#F0F0F0\'. Optional. Default: white')
-    .option('-c, --configFile [configFile]', 'JSON configuration file for mermaid. Optional')
-    .option('-C, --cssFile [cssFile]', 'CSS file for the page. Optional')
-    .option('-s, --scale [scale]', 'Puppeteer scale factor, default 1. Optional')
+    .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.')
+    .option('-C, --cssFile [cssFile]', 'CSS file for the page.')
+    .addOption(new Option('-s, --scale [scale]', 'Puppeteer scale factor').argParser(parseCommanderInt).default(1))
     .option('-f, --pdfFit [pdfFit]', 'Scale PDF to fit chart')
     .option('-q, --quiet', 'Suppress log output')
-    .option('-p --puppeteerConfigFile [puppeteerConfigFile]', 'JSON configuration file for puppeteer. Optional')
+    .option('-p --puppeteerConfigFile [puppeteerConfigFile]', 'JSON configuration file for puppeteer.')
     .parse(process.argv)
 
   const options = commander.opts()
@@ -98,7 +115,11 @@ async function cli () {
   // if an input file is defined, it should take precedence, otherwise, input is
   // coming from stdin and just name the file out.svg, if it hasn't been
   // specified with the '-o' option
-    output = input ? (input + '.svg') : 'out.svg'
+    if (outputFormat) {
+      output = input ? (`${input}.${outputFormat}`) : `out.${outputFormat}`
+    } else {
+      output = input ? (`${input}.svg`) : 'out.svg'
+    }
   }
   if (!/\.(?:svg|png|pdf|md)$/.test(output)) {
     error('Output file must end with ".md", ".svg", ".png" or ".pdf"')
@@ -129,19 +150,13 @@ async function cli () {
     myCSS = fs.readFileSync(cssFile, 'utf-8')
   }
 
-  // normalize args
-  width = parseInt(width)
-  height = parseInt(height)
-  backgroundColor = backgroundColor || 'white'
-  const deviceScaleFactor = parseInt(scale || 1, 10)
-
   await run(
     input, output, {
       puppeteerConfig,
       quiet,
       outputFormat,
       parseMMDOptions: {
-        mermaidConfig, backgroundColor, myCSS, pdfFit, viewport: { width, height, deviceScaleFactor }
+        mermaidConfig, backgroundColor, myCSS, pdfFit, viewport: { width, height, deviceScaleFactor: scale }
       }
     }
   )
@@ -185,21 +200,32 @@ async function parseMMD (...args) {
  */
 async function renderMermaid (browser, definition, outputFormat, { viewport, backgroundColor = 'white', mermaidConfig = {}, myCSS, pdfFit } = {}) {
   const page = await browser.newPage()
+  page.on('console', (msg) => {
+    console.log(msg.text())
+  })
   try {
     if (viewport) {
       await page.setViewport(viewport)
     }
-    const mermaidHTMLPath = path.join(__dirname, '..', 'index.html')
+    const mermaidHTMLPath = path.join(__dirname, '..', 'dist', 'index.html')
     await page.goto(url.pathToFileURL(mermaidHTMLPath))
     await page.$eval('body', (body, backgroundColor) => {
       body.style.background = backgroundColor
     }, backgroundColor)
-    const metadata = await page.$eval('#container', (container, definition, mermaidConfig, myCSS, backgroundColor) => {
+    const metadata = await page.$eval('#container', async (container, definition, mermaidConfig, myCSS, backgroundColor) => {
       container.textContent = definition
-      window.mermaid.initialize(mermaidConfig)
+
+      /** @type {import("mermaid")} Already imported mermaid instance */
+      const mermaid = globalThis.mermaid
+      /** @type {import("@mermaid-js/mermaid-mindmap")} */
+      const mermaidMindmap = globalThis.mermaidMindmap
+
+      await mermaid.registerExternalDiagrams([mermaidMindmap])
+
+      mermaid.initialize(mermaidConfig)
       // should throw an error if mmd diagram is invalid
       try {
-        window.mermaid.initThrowsErrors(undefined, container)
+        await mermaid.initThrowsErrorsAsync(undefined, container)
       } catch (error) {
         if (error instanceof Error) {
           // mermaid-js doesn't currently throws JS Errors, but let's leave this
@@ -338,7 +364,8 @@ async function run (input, output, { puppeteerConfig = {}, quiet = false, output
     }
   }
 
-  const mermaidChartsInMarkdown = /^\s*```(?:mermaid)(\r?\n([\s\S]*?))```\s*$/
+  // TODO: should we use a Markdown parser like remark instead of rolling our own parser?
+  const mermaidChartsInMarkdown = /^[^\S\n]*```(?:mermaid)(\r?\n([\s\S]*?))```[^\S\n]*$/
   const mermaidChartsInMarkdownRegexGlobal = new RegExp(mermaidChartsInMarkdown, 'gm')
   const browser = await puppeteer.launch(puppeteerConfig)
   try {

package/fontawesome/css/fa-brands.css

@@ -1,9 +0,0 @@
-@font-face {
-  font-family: 'Font Awesome 5 Brands';
-  font-style: normal;
-  font-weight: normal;
-  src: url("../webfonts/fa-brands-400.eot");
-  src: url("../webfonts/fa-brands-400.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-brands-400.woff2") format("woff2"), url("../webfonts/fa-brands-400.woff") format("woff"), url("../webfonts/fa-brands-400.ttf") format("truetype"), url("../webfonts/fa-brands-400.svg#fontawesome") format("svg"); }
-
-.fab {
-  font-family: 'Font Awesome 5 Brands'; }

package/fontawesome/css/fa-regular.css

@@ -1,10 +0,0 @@
-@font-face {
-  font-family: 'Font Awesome 5 Free';
-  font-style: normal;
-  font-weight: 400;
-  src: url("../webfonts/fa-regular-400.eot");
-  src: url("../webfonts/fa-regular-400.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-regular-400.woff2") format("woff2"), url("../webfonts/fa-regular-400.woff") format("woff"), url("../webfonts/fa-regular-400.ttf") format("truetype"), url("../webfonts/fa-regular-400.svg#fontawesome") format("svg"); }
-
-.far {
-  font-family: 'Font Awesome 5 Free';
-  font-weight: 400; }

package/fontawesome/css/fa-solid.css

@@ -1,11 +0,0 @@
-@font-face {
-  font-family: 'Font Awesome 5 Free';
-  font-style: normal;
-  font-weight: 900;
-  src: url("../webfonts/fa-solid-900.eot");
-  src: url("../webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-solid-900.woff2") format("woff2"), url("../webfonts/fa-solid-900.woff") format("woff"), url("../webfonts/fa-solid-900.ttf") format("truetype"), url("../webfonts/fa-solid-900.svg#fontawesome") format("svg"); }
-
-.fa,
-.fas {
-  font-family: 'Font Awesome 5 Free';
-  font-weight: 900; }