reveal-md integrate plantuml

01-reveal-md-plantuml.md

Integrate plantuml in reveal-md

This is how to integrate plantuml scripts in you reveal-md presentations.

Download the preproc.js from below to your project and replace the plantuml server url with your plantuml server.
Also replace the plantumlDir with your target dir for the generated png files.
Run reveal-md with the preproc.js:

reveal-md slides.md --preprocessor preproc.js

See package.json from below for required dependencies.

Now you can add plantuml scripts in your slides.md file. See slides.md.txt from below.

package.json

{
  "dependencies": {
    "md5": "2.2.1",
    "request": "2.88.0",
    "reveal-md": "3.0.4"
  },
  "scripts": {
    "start": "reveal-md slides.md --preprocessor preproc.js --disable-auto-open --port 80"
  }
}

preproc.js

var request = require('request');
var fs = require('fs')
var md5 = require('md5');

// specify target dir for rendered diagrams
var plantumlDir = "/slides/plantumlGenerated/";
if (!fs.existsSync(plantumlDir)){
    fs.mkdirSync(plantumlDir);
}

var createPNG = (plantumlScript, fileNameAbsolute) => {
    request.post({
        // set you plantuml server here
        url:  'http://plantuml:8080/png',
        body: plantumlScript
      })
      .pipe(fs.createWriteStream(fileNameAbsolute));
}


var resolvePlantuml = (markdown) => 
    markdown.replace(/```plantuml\s*([\s\S]*?)```/igm, function(match, text, offset){
        // match "```plantuml" then any whitespace or linebreak
        // then any characters (including line breaks) and mark it as capture group (parenthesis) -> ([\s\S]*?)
        // then "```"
        // -> the found capturegroup is available in the variable "text". It is the plantuml script.
    
        // using md5 hash of the text as filename
        var fileName = "picture" + md5(text) + ".png"
        var fileNameAbsolute = plantumlDir + fileName;
        
        console.log(text);
        
        // create rendered PNG if not already exists
        if (!fs.existsSync(fileNameAbsolute)) {
            console.log("Save as: " + fileNameAbsolute);
            createPNG(text, fileNameAbsolute);
        } else {
            console.log("File already exists: " + fileNameAbsolute);
        }

        // return an img tag as replacement for the plantuml-script
        return '<img src="plantumlGenerated/'+fileName+'"/>';
    })


module.exports = (markdown, options) => {
    return new Promise((resolve, reject) => {
        return resolve(resolvePlantuml(markdown));
    });
};

slides.md.txt

# First page

```plantuml
@startuml
Bob -> Alice : hello
@enduml
```
----

## Second page