Marp diagram plugin example (Powered by kroki.io)

.gitignore

node_modules
package-lock.json
.vscode

diagrams2.md

marp	theme
true	default

commands

git clone https://gist.github.com/c443b391a42db8c03274f8c71cdc1eb2.git marp-diagrams-plantuml
cd ./marp-diagrams-plantuml
npm i --verbose --no-audit
npx marp -c ./marp.config.js ./diagrams2.md -p

---

sequenceDiagram1

Alice -> Bob: Authentication Request
Bob --> Alice: Authentication Response

diagrams2.pdf

marp.config.js

const plantUmlRenderer = require('./plantuml-plugin')

module.exports = {
  engine: ({ marp }) => marp.use(plantUmlRenderer)
}

package.json

{
  "license": "WTFPL",
  "private": true,
  "dependencies": {
    "@marp-team/marp-cli": "1.7.2",
    "@marp-team/marp-core": "3.2.0",
    "plantuml-encoder": "1.4.0"
  }
}

plantuml-plugin.js

const entrypoint = 'http://localhost:8080/plantuml/'
const plantumlEncoder = require('plantuml-encoder')

const plantUmlRenderer = (md) => {
  const { fence } = md.renderer.rules

  md.renderer.rules.fence = (tokens, idx, options, env, self) => {
    const info = md.utils.unescapeAll(tokens[idx].info).trim()
    if (info) {
      const [lang] = info.split(/(\s+)/g)
      if (lang === 'plantuml') {
        const data = plantumlEncoder.encode(tokens[idx].content.trim()); // pure plantuml codes without @startuml and line breakers
        console.log(`content is ${tokens[idx].content}`);
        const imgUrl = `${entrypoint}png/${data}`;
        console.log(`url is ${tokens[idx].content}`);

        return `<p><marp-auto-scaling data-downscale-only><img src="${imgUrl}"/></marp-auto-scaling></p>`
      }
    }

    return fence.call(self, tokens, idx, options, env, self)
  }
}

module.exports = plantUmlRenderer

settings.json

{
    "workbench.colorCustomizations": {
        "activityBar.activeBackground": "#3399ff",
        "activityBar.activeBorder": "#bf0060",
        "activityBar.background": "#3399ff",
        "activityBar.foreground": "#15202b",
        "activityBar.inactiveForeground": "#15202b99",
        "activityBarBadge.background": "#bf0060",
        "activityBarBadge.foreground": "#e7e7e7",
        "sash.hoverBorder": "#3399ff",
        "statusBar.background": "#007fff",
        "statusBar.foreground": "#e7e7e7",
        "statusBarItem.hoverBackground": "#3399ff",
        "statusBarItem.remoteBackground": "#007fff",
        "statusBarItem.remoteForeground": "#e7e7e7",
        "titleBar.activeBackground": "#007fff",
        "titleBar.activeForeground": "#e7e7e7",
        "titleBar.inactiveBackground": "#007fff99",
        "titleBar.inactiveForeground": "#e7e7e799"
    },
    "peacock.color": "#007fff"
}

test.js

const str = `@startuml
Alice -> Bob: Authentication Request
Bob --> Alice: Authentication Response
@enduml`
var plantumlEncoder = require('plantuml-encoder')

var encoded = plantumlEncoder.encode("Alice -> Bob: Authentication Request\nBob --> Alice: Authentication Response")
console.log(encoded);