@mermaid-js/mermaid-cli 10.8.0 → 10.9.1

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

@@ -22,6 +22,10 @@ export type ParseMDDOptions = {
      * - If set, scale PDF to fit chart.
      */
     pdfFit?: boolean | undefined;
+    /**
+     * - The id attribute for the SVG element to be rendered.
+     */
+    svgId?: string | undefined;
 };
 /**
  * Markdown image properties
@@ -72,7 +76,7 @@ export function run(input: `${string}.${"md" | "markdown"}` | string | undefined
  * @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 }?: ParseMDDOptions | undefined): Promise<{
+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;
@@ -84,6 +88,7 @@ export function renderMermaid(browser: import("puppeteer").Browser, definition:
  * @property {Parameters<import("mermaid")["default"]["initialize"]>[0]} [mermaidConfig] - Mermaid config.
  * @property {CSSStyleDeclaration["cssText"]} [myCSS] - Optional CSS text.
  * @property {boolean} [pdfFit] - If set, scale PDF to fit chart.
+ * @property {string} [svgId] - The id attribute for the SVG element to be rendered.
  */
 /**
  * Parse and render a mermaid diagram.

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SA+Vc,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;AAvQD;;;;;;;;;GASG;AACH,uCAPW,OAAO,WAAW,EAAE,OAAO,cAC3B,MAAM,gBACN,KAAK,GAAG,KAAK,GAAG,KAAK,8FAEnB,QAAQ;IAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAC,CAAC,CAsH9E;AAvJD;;;;;;;GAOG;AAEH;;;;;;;;;;;GAWG;AACH,kCAPW,OAAO,WAAW,EAAE,OAAO,cAC3B,MAAM,gBACN,KAAK,GAAG,KAAK,GAAG,KAAK,sCAGnB,QAAQ,MAAM,CAAC,CAK3B;AAzHD,qCA+FC;AAnLD;;;;;GAKG;AACH,+BAHW,MAAM,GACJ,KAAK,CAKjB;sBAnBqB,WAAW"}
+{"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mermaid-js/mermaid-cli",
-  "version": "10.8.0",
+  "version": "10.9.1",
   "description": "Command-line interface for mermaid",
   "license": "MIT",
   "repository": "git@github.com:mermaid-js/mermaid-cli.git",
@@ -31,14 +31,14 @@
   "dependencies": {
     "chalk": "^5.0.1",
     "commander": "^10.0.0",
+    "mermaid": "^10.8.0",
     "puppeteer": "^19.0.0"
   },
   "devDependencies": {
     "@fortawesome/fontawesome-free": "^5.6.0",
-    "@mermaid-js/mermaid-zenuml": "^0.1.1",
+    "@mermaid-js/mermaid-zenuml": "^0.2.0",
     "@tsconfig/node14": "^14.1.0",
     "jest": "^29.0.1",
-    "mermaid": "^10.0.0",
     "standard": "^17.0.0",
     "typescript": "^5.0.1-rc",
     "vite": "^4.0.3",

package/src/index.js

@@ -12,6 +12,13 @@ const pkg = require('../package.json')
 // __dirname is not available in ESM modules by default
 const __dirname = url.fileURLToPath(new url.URL('.', import.meta.url))
 
+/**
+ * Mermaid.js IFFE path.
+ *
+ * Importing this in a browser adds a global `mermaid` object.
+ */
+const mermaidIIFEPath = path.resolve(path.dirname(require.resolve('mermaid')), 'mermaid.js')
+
 /**
  * Prints an error to stderr, then closes with exit code 1
  *
@@ -103,12 +110,13 @@ async function cli () {
     .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. Use `-` to read from stdin.')
+    .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"')
     .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.')
+    .option('-I, --svgId [svgId]', 'The id attribute for the SVG element to be rendered.')
     .addOption(new Option('-s, --scale [scale]', 'Puppeteer scale factor').argParser(parseCommanderInt).default(1))
     .option('-f, --pdfFit', 'Scale PDF to fit chart')
     .option('-q, --quiet', 'Suppress log output')
@@ -117,7 +125,7 @@ async function cli () {
 
   const options = commander.opts()
 
-  let { theme, width, height, input, output, outputFormat, backgroundColor, configFile, cssFile, puppeteerConfigFile, scale, pdfFit, quiet } = options
+  let { theme, width, height, input, output, outputFormat, backgroundColor, configFile, cssFile, svgId, puppeteerConfigFile, scale, pdfFit, quiet } = options
 
   // check input file
   if (!input) {
@@ -187,7 +195,7 @@ async function cli () {
       quiet,
       outputFormat,
       parseMMDOptions: {
-        mermaidConfig, backgroundColor, myCSS, pdfFit, viewport: { width, height, deviceScaleFactor: scale }
+        mermaidConfig, backgroundColor, myCSS, pdfFit, viewport: { width, height, deviceScaleFactor: scale }, svgId
       }
     }
   )
@@ -200,6 +208,7 @@ async function cli () {
  * @property {Parameters<import("mermaid")["default"]["initialize"]>[0]} [mermaidConfig] - Mermaid config.
  * @property {CSSStyleDeclaration["cssText"]} [myCSS] - Optional CSS text.
  * @property {boolean} [pdfFit] - If set, scale PDF to fit chart.
+ * @property {string} [svgId] - The id attribute for the SVG element to be rendered.
  */
 
 /**
@@ -229,7 +238,7 @@ async function parseMMD (browser, definition, outputFormat, opt) {
  * @returns {Promise<{title: string | null, desc: string | null, data: Buffer}>} The output file in bytes,
  * with optional metadata.
  */
-async function renderMermaid (browser, definition, outputFormat, { viewport, backgroundColor = 'white', mermaidConfig = {}, myCSS, pdfFit } = {}) {
+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())
@@ -243,11 +252,14 @@ async function renderMermaid (browser, definition, outputFormat, { viewport, bac
     await page.$eval('body', (body, backgroundColor) => {
       body.style.background = backgroundColor
     }, backgroundColor)
-    const metadata = await page.$eval('#container', async (container, definition, mermaidConfig, myCSS, backgroundColor) => {
+    await page.addScriptTag({ path: mermaidIIFEPath })
+    const metadata = await page.$eval('#container', async (container, definition, mermaidConfig, myCSS, backgroundColor, svgId) => {
+      await Promise.all(Array.from(document.fonts, (font) => font.load()))
+
       /**
        * @typedef {Object} GlobalThisWithMermaid
-       * We've already imported these modules in our `index.html` file, so that they
-       * get correctly bundled.
+       * We've already imported these modules in our `index.html` file (or by running `page.addScriptTag`),
+       * 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
        */
@@ -256,7 +268,7 @@ async function renderMermaid (browser, definition, outputFormat, { viewport, bac
       await mermaid.registerExternalDiagrams([zenuml])
       mermaid.initialize({ startOnLoad: false, ...mermaidConfig })
       // should throw an error if mmd diagram is invalid
-      const { svg: svgText } = await mermaid.render('my-svg', definition, container)
+      const { svg: svgText } = await mermaid.render(svgId || 'my-svg', definition, container)
       container.innerHTML = svgText
 
       const svg = container.getElementsByTagName?.('svg')?.[0]
@@ -292,7 +304,7 @@ async function renderMermaid (browser, definition, outputFormat, { viewport, bac
       return {
         title, desc
       }
-    }, definition, mermaidConfig, myCSS, backgroundColor)
+    }, definition, mermaidConfig, myCSS, backgroundColor, svgId)
 
     if (outputFormat === 'svg') {
       const svgXML = await page.$eval('svg', (svg) => {
@@ -399,7 +411,7 @@ 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]*```(?:mermaid)([^\S\n]*\r?\n([\s\S]*?))```[^\S\n]*$/
+  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)
   try {