@mermaid-js/mermaid-cli 8.13.4 → 8.13.8

package/README.md

@@ -21,6 +21,40 @@ mmdc -i input.mmd -o output.svg
 mmdc -i input.mmd -o output.png -t dark -b transparent
 ```
 
+### Transform a markdown file with mermaid diagrams
+
+```sh
+mmdc -i readme.template.md -o readme.md
+```
+
+This command transforms a markdown file itself. The mermaid-cli will find the mermaid diagrams, create SVG files from them and refer to those in the markdown output.
+
+This:
+
+~~~md
+### Some markdown
+```mermaid
+graph
+   [....]
+```
+
+### Some more markdown
+```mermaid
+sequenceDiagram
+   [....]
+```
+~~~
+
+Becomes:
+
+```md
+### Some markdown
+![diagram](./readme-1.svg)
+
+### Some more markdown
+![diagram](./readme-2.svg)
+```
+
 ### Piping from stdin
 
 You can easily pipe input from stdin. This example shows how to use a heredoc to

package/index.bundle.js

@@ -1,36 +1,42 @@
 #!/usr/bin/env node
 "use strict";
 
-function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+var _commander = _interopRequireDefault(require("commander"));
 
-function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+var _chalk = _interopRequireDefault(require("chalk"));
 
-process.title = "mmdc";
+var _fs = _interopRequireDefault(require("fs"));
 
-const commander = require('commander');
+var _path = _interopRequireDefault(require("path"));
 
-const chalk = require('chalk');
+var _puppeteer = _interopRequireDefault(require("puppeteer"));
 
-const fs = require('fs');
+var _package = _interopRequireDefault(require("./package.json"));
 
-const path = require('path');
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const puppeteer = require('puppeteer');
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
 
-const pkg = require('./package.json');
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+
+process.title = "mmdc";
 
 const error = message => {
-  console.log(chalk.red(`\n${message}\n`));
+  console.log(_chalk.default.red(`\n${message}\n`));
   process.exit(1);
 };
 
+const warn = message => {
+  console.log(_chalk.default.yellow(`\n${message}\n`));
+};
+
 const checkConfigFile = file => {
-  if (!fs.existsSync(file)) {
+  if (!_fs.default.existsSync(file)) {
     error(`Configuration file "${file}" doesn't exist`);
   }
 };
 
-const inputPipedFromStdin = () => fs.fstatSync(0).isFIFO();
+const inputPipedFromStdin = () => _fs.default.fstatSync(0).isFIFO();
 
 const getInputData = /*#__PURE__*/function () {
   var _ref = _asyncToGenerator(function* (inputFile) {
@@ -38,7 +44,7 @@ const getInputData = /*#__PURE__*/function () {
       // if an input file has been specified using '-i', it takes precedence over
       // piping from stdin
       if (typeof inputFile !== 'undefined') {
-        return fs.readFile(inputFile, 'utf-8', (err, data) => {
+        return _fs.default.readFile(inputFile, 'utf-8', (err, data) => {
           if (err) {
             return reject(err);
           }
@@ -74,8 +80,10 @@ const convertToValidXML = html => {
   return html.replace(/<br>/gi, '<br/>');
 };
 
-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').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 svg, png or pdf. Optional. Default: input + ".svg"').option('-b, --backgroundColor [backgroundColor]', 'Background color. 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').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').parse(process.argv);
-const options = commander.opts();
+_commander.default.version(_package.default.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').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('-b, --backgroundColor [backgroundColor]', 'Background color. 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').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').parse(process.argv);
+
+const options = _commander.default.opts();
+
 let {
   theme,
   width,
@@ -92,12 +100,14 @@ let {
 } = options; // check input file
 
 if (!(input || inputPipedFromStdin())) {
-  console.log(chalk.red(`\nPlease specify input file: -i <input>\n`));
-  commander.help();
+  console.log(_chalk.default.red(`\nPlease specify input file: -i <input>\n`));
+
+  _commander.default.help();
+
   process.exit(1);
 }
 
-if (input && !fs.existsSync(input)) {
+if (input && !_fs.default.existsSync(input)) {
   error(`Input file "${input}" doesn't exist`);
 } // check output file
 
@@ -109,13 +119,13 @@ if (!output) {
   output = input ? input + '.svg' : 'out.svg';
 }
 
-if (!/\.(?:svg|png|pdf)$/.test(output)) {
-  error(`Output file must end with ".svg", ".png" or ".pdf"`);
+if (!/\.(?:svg|png|pdf|md)$/.test(output)) {
+  error(`Output file must end with ".md", ".svg", ".png" or ".pdf"`);
 }
 
-const outputDir = path.dirname(output);
+const outputDir = _path.default.dirname(output);
 
-if (!fs.existsSync(outputDir)) {
+if (!_fs.default.existsSync(outputDir)) {
   error(`Output directory "${outputDir}/" doesn't exist`);
 } // check config files
 
@@ -126,25 +136,25 @@ let mermaidConfig = {
 
 if (configFile) {
   checkConfigFile(configFile);
-  mermaidConfig = Object.assign(mermaidConfig, JSON.parse(fs.readFileSync(configFile, 'utf-8')));
+  mermaidConfig = Object.assign(mermaidConfig, JSON.parse(_fs.default.readFileSync(configFile, 'utf-8')));
 }
 
 let puppeteerConfig = {};
 
 if (puppeteerConfigFile) {
   checkConfigFile(puppeteerConfigFile);
-  puppeteerConfig = JSON.parse(fs.readFileSync(puppeteerConfigFile, 'utf-8'));
+  puppeteerConfig = JSON.parse(_fs.default.readFileSync(puppeteerConfigFile, 'utf-8'));
 } // check cssFile
 
 
 let myCSS;
 
 if (cssFile) {
-  if (!fs.existsSync(cssFile)) {
+  if (!_fs.default.existsSync(cssFile)) {
     error(`CSS file "${cssFile}" doesn't exist`);
   }
 
-  myCSS = fs.readFileSync(cssFile, 'utf-8');
+  myCSS = _fs.default.readFileSync(cssFile, 'utf-8');
 }
 
 const info = message => {
@@ -167,7 +177,7 @@ const parseMMD = /*#__PURE__*/function () {
       height,
       deviceScaleFactor
     });
-    yield page.goto(`file://${path.join(__dirname, 'index.html')}`);
+    yield page.goto(`file://${_path.default.join(__dirname, 'index.html')}`);
     yield page.evaluate(`document.body.style.background = '${backgroundColor}'`);
     const result = yield page.$eval('#container', (container, definition, mermaidConfig, myCSS) => {
       container.textContent = definition;
@@ -206,9 +216,22 @@ const parseMMD = /*#__PURE__*/function () {
     }
 
     if (output.endsWith('svg')) {
-      const svg = yield page.$eval('#container', container => container.innerHTML);
+      const svg = yield page.$eval('#container', (container, backgroundColor) => {
+        var _container$getElement, _container$getElement2;
+
+        const svg = (_container$getElement = container.getElementsByTagName) === null || _container$getElement === void 0 ? void 0 : (_container$getElement2 = _container$getElement.call(container, 'svg')) === null || _container$getElement2 === void 0 ? void 0 : _container$getElement2[0];
+
+        if (svg.style) {
+          svg.style.backgroundColor = backgroundColor;
+        } else {
+          warn("svg not found. Not applying background color.");
+        }
+
+        return container.innerHTML;
+      }, backgroundColor);
       const svg_xml = convertToValidXML(svg);
-      fs.writeFileSync(output, svg_xml);
+
+      _fs.default.writeFileSync(output, svg_xml);
     } else if (output.endsWith('png')) {
       const clip = yield page.$eval('svg', svg => {
         const react = svg.getBoundingClientRect();
@@ -263,23 +286,47 @@ const parseMMD = /*#__PURE__*/function () {
 }();
 
 _asyncToGenerator(function* () {
-  const browser = yield puppeteer.launch(puppeteerConfig);
+  const mermaidChartsInMarkdown = '^```(?:mermaid)(\r?\n([\\s\\S]*?))```$';
+  const mermaidChartsInMarkdownRegexGlobal = new RegExp(mermaidChartsInMarkdown, 'gm');
+  const mermaidChartsInMarkdownRegex = new RegExp(mermaidChartsInMarkdown);
+  const browser = yield _puppeteer.default.launch(puppeteerConfig);
   const definition = yield getInputData(input);
 
   if (/\.md$/.test(input)) {
-    const matches = definition.match(/^```(?:mermaid)(\n([\s\S]*?))```$/gm);
-
-    if (matches !== null) {
-      info(`Found ${matches.length} mermaid charts in Markdown input`);
-      const mmdStrings = matches.map(str => str.replace(/^```(?:mermaid)(\n([\s\S]*?))```$/, '$1').trim());
-      yield Promise.all(mmdStrings.map((mmdString, index) => {
-        const output_file = output.replace(/(\..*)$/, `-${index + 1}$1`);
-        info(` - ${output_file}`);
-        return parseMMD(browser, mmdString, output_file);
-      }));
+    const diagrams = [];
+    const outDefinition = definition.replace(mermaidChartsInMarkdownRegexGlobal, mermaidMd => {
+      const md = mermaidChartsInMarkdownRegex.exec(mermaidMd)[1]; // Output can be either a template image file, or a `.md` output file.
+      //   If it is a template image file, use that to created numbered diagrams
+      //     I.e. if "out.png", use "out-1.png", "out-2.png", etc
+      //   If it is an output `.md` file, use that to base .svg numbered diagrams on
+      //     I.e. if "out.md". use "out-1.svg", "out-2.svg", etc
+
+      const outputFile = output.replace(/(\..*)$/, `-${diagrams.length + 1}$1`).replace(/(\.md)$/, '.svg');
+      const outputFileRelative = `./${_path.default.relative(_path.default.dirname(_path.default.resolve(output)), _path.default.resolve(outputFile))}`;
+      diagrams.push([outputFile, md]);
+      return `![diagram](${outputFileRelative})`;
+    });
+
+    if (diagrams.length) {
+      info(`Found ${diagrams.length} mermaid charts in Markdown input`);
+      yield Promise.all(diagrams.map( /*#__PURE__*/function () {
+        var _ref4 = _asyncToGenerator(function* ([imgFile, md]) {
+          yield parseMMD(browser, md, imgFile);
+          info(` ✅ ${imgFile}`);
+        });
+
+        return function (_x5) {
+          return _ref4.apply(this, arguments);
+        };
+      }()));
     } else {
       info(`No mermaid charts found in Markdown input`);
     }
+
+    if (/\.md$/.test(output)) {
+      yield _fs.default.promises.writeFile(output, outDefinition, 'utf-8');
+      info(` ✅ ${output}`);
+    }
   } else {
     info(`Generating single mermaid chart`);
     yield parseMMD(browser, definition, output);