Add svg-as-string mode

.travis.yml

@@ -1,6 +1,9 @@
 language: node_js
 
-node_js: ['6']
+node_js:
+  - '6'
+  - '8'
+  - '10'
 
 install:
 - yarn install

jest.config.js

@@ -5,7 +5,6 @@ module.exports = {
   coveragePathIgnorePatterns: [
     '/node_modules/',
   ],
-  mapCoverage: true,
   moduleDirectories: [
     'node_modules',
   ],

package.json

@@ -13,26 +13,26 @@
     "url": "git@github.com:temando/remark-mermaid.git"
   },
   "dependencies": {
-    "fs-extra": "^4.0.1",
-    "unist-util-visit": "^1.1.3",
-    "which": "^1.3.0"
+    "fs-extra": "^7.0.0",
+    "unist-util-visit": "^1.3.1",
+    "which": "^1.3.1"
   },
   "devDependencies": {
     "changelog-verify": "^1.0.4",
     "eslint": "^4.2.0",
     "eslint-config-airbnb-base": "^11.1.0",
     "eslint-plugin-import": "^2.0.0",
-    "jest": "^21.2.1",
-    "mermaid.cli": "^0.3.1",
-    "remark-parse": "^4.0.0",
-    "remark-stringify": "^4.0.0",
-    "to-vfile": "^2.1.2",
-    "unified": "^6.1.5",
-    "version-changelog": "^2.1.0",
-    "vfile": "^2.2.0"
+    "jest": "^23.4.1",
+    "mermaid.cli": "^0.5.1",
+    "remark-parse": "^5.0.0",
+    "remark-stringify": "^5.0.0",
+    "to-vfile": "^5.0.0",
+    "unified": "^7.0.0",
+    "version-changelog": "^3.1.0",
+    "vfile": "^3.0.0"
   },
   "peerDependencies": {
-    "mermaid.cli": "^0.3.1"
+    "mermaid.cli": "^0.5.1"
   },
   "scripts": {
     "lint": "$(npm bin)/eslint src",

src/index.js

@@ -90,7 +90,7 @@ function replaceLinkWithEmbedded(node, index, parent, vFile) {
  * @param {boolean} isSimple
  * @return {function}
  */
-function visitCodeBlock(ast, vFile, isSimple) {
+function visitCodeBlock(ast, vFile, { isSimple, asString }) {
   return visit(ast, 'code', (node, index, parent) => {
     const { lang, value, position } = node;
     const destinationDir = getDestinationDir(vFile);
@@ -109,21 +109,28 @@ function visitCodeBlock(ast, vFile, isSimple) {
 
     // Otherwise, let's try and generate a graph!
     } else {
-      let graphSvgFilename;
+      let svg;
       try {
-        graphSvgFilename = render(value, destinationDir);
+        svg = render(value, destinationDir, asString);
 
         vFile.info(`${lang} code block replaced with graph`, position, PLUGIN_NAME);
       } catch (error) {
         vFile.message(error, position, PLUGIN_NAME);
         return node;
       }
 
-      newNode = {
-        type: 'image',
-        title: '`mermaid` image',
-        url: graphSvgFilename,
-      };
+      if (asString) {
+        newNode = {
+          type: 'html',
+          value: svg,
+        };
+      } else {
+        newNode = {
+          type: 'image',
+          title: '`mermaid` image',
+          url: svg,
+        };
+      }
     }
 
     parent.children.splice(index, 1, newNode);
@@ -142,7 +149,7 @@ function visitCodeBlock(ast, vFile, isSimple) {
  * @param {boolean} isSimple
  * @return {function}
  */
-function visitLink(ast, vFile, isSimple) {
+function visitLink(ast, vFile, { isSimple }) {
   if (isSimple) {
     return visit(ast, 'link', (node, index, parent) => replaceLinkWithEmbedded(node, index, parent, vFile));
   }
@@ -160,7 +167,7 @@ function visitLink(ast, vFile, isSimple) {
  * @param {boolean} isSimple
  * @return {function}
  */
-function visitImage(ast, vFile, isSimple) {
+function visitImage(ast, vFile, { isSimple }) {
   if (isSimple) {
     return visit(ast, 'image', (node, index, parent) => replaceLinkWithEmbedded(node, index, parent, vFile));
   }
@@ -182,7 +189,8 @@ function visitImage(ast, vFile, isSimple) {
  * @return {function}
  */
 function mermaid(options = {}) {
-  const simpleMode = options.simple || false;
+  const isSimple = options.simple || false;
+  const asString = options.asString || false;
 
   /**
    * @param {object} ast MDAST
@@ -191,9 +199,9 @@ function mermaid(options = {}) {
    * @return {object}
    */
   return function transformer(ast, vFile, next) {
-    visitCodeBlock(ast, vFile, simpleMode);
-    visitLink(ast, vFile, simpleMode);
-    visitImage(ast, vFile, simpleMode);
+    visitCodeBlock(ast, vFile, { isSimple, asString });
+    visitLink(ast, vFile, { isSimple });
+    visitImage(ast, vFile, { isSimple });
 
     if (typeof next === 'function') {
       return next(null, ast, vFile);

src/utils.js

@@ -14,7 +14,7 @@ const PLUGIN_NAME = 'remark-mermaid';
  * @param  {string} destination
  * @return {string}
  */
-function render(source, destination) {
+function render(source, destination, asString) {
   const unique = crypto.createHmac('sha1', PLUGIN_NAME).update(source).digest('hex');
   const mmdcExecutable = which.sync('mmdc');
   const mmdPath = path.join(destination, `${unique}.mmd`);
@@ -30,15 +30,21 @@ function render(source, destination) {
   // Clean up temporary file
   fs.removeSync(mmdPath);
 
+  if (asString) {
+    const string = fs.readFileSync(svgPath, { encoding: 'utf-8' });
+    fs.removeSync(svgPath);
+    return string;
+  }
+
   return `./${svgFilename}`;
 }
 
 /**
- * Accepts the `source` of the graph as a string, and render an SVG using
+ * Accepts the path `inputFile` to the graph, and render an SVG using
  * mermaid.cli. Returns the path to the rendered SVG.
  *
+ * @param  {string} inputFile
  * @param  {string} destination
- * @param  {string} source
  * @return {string}
  */
 function renderFromFile(inputFile, destination) {

test/index.test.js

@@ -5,8 +5,9 @@ const toVFile = require('to-vfile');
 const unified = require('unified');
 const mermaid = require('../src/');
 
+const isTravis = 'TRAVIS' in process.env && 'CI' in process.env;
 const fixturesDir = path.join(__dirname, '/fixtures');
-const runtimeDir = path.join(__dirname, '/runtime');
+const runtimeDir = isTravis ? '/tmp' : path.join(__dirname, '/runtime');
 const remark = unified().use(parse).use(stringify).freeze();
 
 // Utility function to add metdata to a vFile.
@@ -40,6 +41,17 @@ describe('remark-mermaid', () => {
     expect(vfile.messages[0].message).toBe('mermaid code block replaced with graph');
   });
 
+  it('can handle code blocks to svg string', () => {
+    const srcFile = `${fixturesDir}/code-block.md`;
+    const destFile = `${runtimeDir}/code-block.md`;
+    const vfile = toVFile.readSync(srcFile);
+    addMetadata(vfile, destFile);
+
+    const result = remark().use(mermaid, { asString: true }).processSync(vfile).toString();
+    expect(vfile.messages[0].message).toBe('mermaid code block replaced with graph');
+    expect(result).toMatch(/<svg id="[\s\S]*<\/svg>/);
+  });
+
   it('can handle mermaid images', () => {
     const srcFile = `${fixturesDir}/image-mermaid.md`;
     const destFile = `${runtimeDir}/image-mermaid.md`;

test/utils.test.js

@@ -3,8 +3,9 @@ const path = require('path');
 const toVFile = require('to-vfile');
 const { render, renderFromFile, getDestinationDir } = require('../src/utils');
 
+const isTravis = 'TRAVIS' in process.env && 'CI' in process.env;
 const fixturesDir = path.join(__dirname, '/fixtures');
-const runtimeDir = path.join(__dirname, '/runtime');
+const runtimeDir = isTravis ? '/tmp' : path.join(__dirname, '/runtime');
 
 jasmine.DEFAULT_TIMEOUT_INTERVAL = 30000;