Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
reveal-md integrate plantuml

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.

{
"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"
}
}
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));
});
};
# First page
```plantuml
@startuml
Bob -> Alice : hello
@enduml
```
----
## Second page
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.