Add svg-as-string mode

temando · Jan 19, 2018 · abc9f74 · abc9f74
1 parent 6ac2832
commit abc9f74
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 15 deletions.
diff --git a/src/index.js b/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);

diff --git a/src/utils.js b/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,6 +30,12 @@ function render(source, destination) {
   // Clean up temporary file
   fs.removeSync(mmdPath);
 
+  if (asString) {
+    const string = fs.readFileSync(svgPath).toString();
+    fs.removeSync(svgPath);
+    return string;
+  }
+
   return `./${svgFilename}`;
 }
 

diff --git a/test/index.test.js b/test/index.test.js
@@ -40,6 +40,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(result).toMatch(/<svg id="[\s\S]*<\/svg>/);
+    expect(vfile.messages[0].message).toBe('mermaid code block replaced with graph');
+  });
+
   it('can handle mermaid images', () => {
     const srcFile = `${fixturesDir}/image-mermaid.md`;
     const destFile = `${runtimeDir}/image-mermaid.md`;