tags with tags with the appropriate src attribute and generates the diagrams
- * by running the JAR executable
- */
-const cheerio = module.parent.require('cheerio');
-const fs = require('fs');
-const path = require('path');
-const { exec } = require('child_process');
-const logger = require('../../util/logger');
-
-const JAR_PATH = path.resolve(__dirname, 'plantuml.jar');
-
-const {
- ERR_PROCESSING,
- ERR_READING,
-} = require('../../constants');
-
-// Tracks diagrams that have already been processed
-const processedDiagrams = new Set();
-
-/**
- * Generates diagram and replaces src attribute of puml tag
- * @param src src attribute of the puml tag
- * @param cwf original file that contains the puml tag, we resolve relative src to this file
- * @param config sourcePath and resultPath from parser context
- * @returns {string} resolved src attribute
- */
-function generateDiagram(src, cwf, config) {
- const { sourcePath, resultPath } = config;
- const _cwf = cwf || sourcePath;
-
- // For replacing img.src
- const diagramSrc = src.replace('.puml', '.png');
- // Path of the .puml file
- const rawDiagramPath = path.resolve(path.dirname(_cwf), src);
- // Path of the .png to be generated
- const outputFilePath = path.resolve(resultPath, path.relative(sourcePath, rawDiagramPath)
- .replace('.puml', '.png'));
- // Output dir for the png file
- const outputDir = path.dirname(outputFilePath);
-
- // Tracks built files to avoid accessing twice
- if (processedDiagrams.has(outputFilePath)) { return diagramSrc; }
- processedDiagrams.add(outputFilePath);
-
- // Creates output dir if it doesn't exist
- if (!fs.existsSync(outputDir)) {
- fs.mkdirSync(outputDir, { recursive: true });
- }
-
- // Read diagram file, launch PlantUML jar
- fs.readFile(rawDiagramPath, (err, data) => {
- if (err) {
- logger.debug(err);
- logger.error(`${ERR_READING} ${rawDiagramPath}`);
- return;
- }
-
- const umlCode = data.toString();
-
- // Java command to launch PlantUML jar
- const cmd = `java -jar "${JAR_PATH}" -pipe > "${outputFilePath}"`;
- const childProcess = exec(cmd);
-
- let errorLog = '';
-
- childProcess.stdin.write(
- umlCode,
- (e) => {
- if (e) {
- logger.debug(e);
- logger.error(`${ERR_PROCESSING} ${rawDiagramPath}`);
- }
- childProcess.stdin.end();
- },
- );
-
- childProcess.on('error', (error) => {
- logger.debug(error);
- logger.error(`${ERR_PROCESSING} ${rawDiagramPath}`);
- });
-
- childProcess.stderr.on('data', (errorMsg) => {
- errorLog += errorMsg;
- });
-
- childProcess.on('exit', () => {
- // This goes to the log file, but not shown on the console
- logger.debug(errorLog);
- });
- });
-
- return diagramSrc;
-}
-
-module.exports = {
- preRender: (content, pluginContext, frontmatter, config) => {
- // Clear tags processed before for live reload
- processedDiagrams.clear();
- // Processes all tags
- const $ = cheerio.load(content, { xmlMode: true });
- $('puml').each((i, tag) => {
- // eslint-disable-next-line no-param-reassign
- tag.name = 'pic';
- const { src, cwf } = tag.attribs;
- // eslint-disable-next-line no-param-reassign
- tag.attribs.src = generateDiagram(src, cwf, config);
- });
-
- return $.html();
- },
- getSources: () => ({
- tagMap: [['puml', 'src']],
- }),
-};
diff --git a/src/plugins/default/plantuml.jar b/src/widgets/plantuml.jar
similarity index 100%
rename from src/plugins/default/plantuml.jar
rename to src/widgets/plantuml.jar
diff --git a/src/widgets/puml.js b/src/widgets/puml.js
new file mode 100644
index 0000000000..aa461ab018
--- /dev/null
+++ b/src/widgets/puml.js
@@ -0,0 +1,159 @@
+const path = require('path');
+const cheerio = require('cheerio');
+const cryptoJS = require('crypto-js');
+const fs = require('fs');
+const { exec } = require('child_process');
+
+const parserUtil = require('../lib/markbind/src/utils');
+const logger = require('../util/logger');
+const fsUtil = require('../util/fsUtil');
+const md = require('../lib/markbind/src/lib/markdown-it');
+const {
+ ATTRIB_RESULT_PATH,
+} = require('../lib/markbind/src/constants');
+
+const _ = {};
+_.hasIn = require('lodash/hasIn');
+
+const PLANTUML_JAR_NAME = 'plantuml.jar';
+const PUML_NAME = 'puml';
+
+function getFileName(context, content) {
+ if (context.name !== undefined) {
+ return `${context.name}.png`;
+ }
+
+ if (context.src !== undefined) {
+ const fileName = fsUtil.removeExtension(context.src);
+ return `${fileName}.png`;
+ }
+
+ const hashedContent = cryptoJS.MD5(content).toString();
+ return `${hashedContent}.png`;
+}
+
+function generateElement(context) {
+ const element = cheerio.parseHTML('')[0];
+ const entries = Object.entries(context);
+ entries.forEach(([key, val]) => {
+ if (key === ATTRIB_RESULT_PATH) {
+ return;
+ }
+ element.attribs[key] = val;
+ });
+
+ return element;
+}
+
+/*
+* Curry function takes in context returning a widgetHandler function
+* PUML widgetHandler takes in raw PUML contents and returns img with puml
+*/
+function parseAndRender(context) {
+ return function (content) {
+ const outputDir = path.dirname(context.resultPath);
+ const fileName = getFileName(context, content);
+ // Path of the .puml file
+ const outputPath = path.join(outputDir, path.basename(fileName));
+ const JAR_PATH = path.resolve(__dirname, PLANTUML_JAR_NAME);
+
+ // Creates output dir if it doesn't exist
+ if (!fs.existsSync(outputDir)) {
+ fs.mkdirSync(outputDir, { recursive: true });
+ }
+
+ // Java command to launch PlantUML jar
+ const cmd = `java -jar "${JAR_PATH}" -pipe > "${outputPath}"`;
+ const childProcess = exec(cmd);
+
+ let errorLog = '';
+ childProcess.stdin.write(
+ content,
+ (e) => {
+ if (e) {
+ logger.debug(e);
+ }
+ childProcess.stdin.end();
+ },
+ );
+
+ childProcess.on('error', (error) => {
+ logger.debug(error);
+ });
+
+ childProcess.stderr.on('data', (errorMsg) => {
+ errorLog += errorMsg;
+ });
+
+ childProcess.on('exit', () => {
+ // This goes to the log file, but not shown on the console
+ logger.debug(errorLog);
+ });
+
+ const elementContext = context;
+ elementContext.src = fileName;
+ const element = generateElement(elementContext);
+
+ return cheerio.html(element);
+ };
+}
+
+class Puml {
+ constructor() {
+ this.name = PUML_NAME;
+ }
+
+ preprocess(config, context, pumlElement) { // eslint-disable-line class-methods-use-this
+ const element = pumlElement;
+ if (!_.hasIn(element.attribs, 'src')) {
+ return element;
+ }
+ const resultPath = path.resolve(path.dirname(config.resultPath), element.attribs.src);
+ const pumlContext = {
+ resultPath,
+ ...element.attribs,
+ };
+
+ // Path of the .puml file
+ const rawDiagramPath = path.resolve(path.dirname(context.cwf), pumlContext.src);
+ const pumlContent = fs.readFileSync(rawDiagramPath, 'utf8');
+ const generatePUML = parseAndRender(pumlContext);
+
+ const childrenDOM = generatePUML(pumlContent);
+ element.name = 'div';
+ element.attribs = {};
+
+ element.children = cheerio.parseHTML(childrenDOM);
+ element.children.cwf = context.cwf;
+ return element;
+ }
+
+ parse(config, context, pumlElement) {
+ const element = pumlElement;
+
+ const pumlContext = {
+ resultPath: config.resultPath,
+ ...element.attribs,
+ };
+
+ element.name = 'div';
+ element.attribs = {};
+ cheerio.prototype.options.xmlMode = false;
+ const generatePUML = parseAndRender(pumlContext);
+ const widgetHandler = {};
+ widgetHandler[this.name] = generatePUML;
+
+ const pumlContent = parserUtil.extractCodeElement(element, this.name);
+
+ element.children = cheerio.parseHTML(md.render(cheerio.html(pumlContent), widgetHandler), true);
+ return element;
+ }
+}
+
+/*
+* Parse and render PUML widget
+*/
+module.exports = {
+ parseAndRender,
+ Puml,
+};
diff --git a/src/widgets/widgets.js b/src/widgets/widgets.js
new file mode 100644
index 0000000000..801d48ec22
--- /dev/null
+++ b/src/widgets/widgets.js
@@ -0,0 +1,28 @@
+const pumlWidget = require('./puml');
+
+const WIDGETS = {
+ puml: new pumlWidget.Puml(),
+};
+
+function preprocessWidget(config, context, element) {
+ const widget = WIDGETS[element.name];
+ if (widget === undefined) {
+ return element;
+ }
+
+ return widget.preprocess(config, context, element);
+}
+
+function parseWidget(config, context, element) {
+ const widget = WIDGETS[element.name];
+ if (widget === undefined) {
+ return element;
+ }
+
+ return widget.parse(config, context, element);
+}
+
+module.exports = {
+ preprocessWidget,
+ parseWidget,
+};
diff --git a/test/functional/test_site/expected/b169e11db4f52a01eb352071b156c59b.png b/test/functional/test_site/expected/b169e11db4f52a01eb352071b156c59b.png
new file mode 100644
index 0000000000..e6e95dbbe9
Binary files /dev/null and b/test/functional/test_site/expected/b169e11db4f52a01eb352071b156c59b.png differ
diff --git a/test/functional/test_site/expected/index.html b/test/functional/test_site/expected/index.html
index dc18a1dd28..b9598c2667 100644
--- a/test/functional/test_site/expected/index.html
+++ b/test/functional/test_site/expected/index.html
@@ -469,33 +469,48 @@ Markbind Plugin Pre-render
-
+
Test PlantUML live reload with include
PlantUML Test
-
Sequence Diagram
+
Sequence Diagram
+
+
Use Case Diagram
+
+
Class Diagram
+
+
Activity Diagram
+
+
Component Diagram
+
+
State Diagram
+
+
Object Diagram
+
+
PlantUML Inline Test
+
+
diff --git a/test/functional/test_site/expected/inline-output.png b/test/functional/test_site/expected/inline-output.png
new file mode 100644
index 0000000000..32a71b61dc
Binary files /dev/null and b/test/functional/test_site/expected/inline-output.png differ
diff --git a/test/functional/test_site/expected/testPlantUML.html b/test/functional/test_site/expected/testPlantUML.html
index f766091d47..859cb60bfd 100644
--- a/test/functional/test_site/expected/testPlantUML.html
+++ b/test/functional/test_site/expected/testPlantUML.html
@@ -26,27 +26,41 @@
PlantUML Test
-
Sequence Diagram
+
Sequence Diagram
+
+
Use Case Diagram
+
+
Class Diagram
+
+
Activity Diagram
+
+
Component Diagram
+
+
State Diagram
+
+
Object Diagram
+
+
PlantUML Inline Test
+
+