VuePressでPlantUMLを使う

VuePressのMarkdownに、PlantUMLで書いた図を挿入します。
VuePressはmarkdown-itを使っているので、markdown-it用のプラグインが自由に使えるようです。

markdown-itには、PlantUMLのプラグインがあります。
そちらをVuePressに組み込みます。

まず依存を追加。

$ yarn add -D markdown-it-plantuml

続いてVuePressに組み込み。

config.js

module.exports = {
    ...
    markdown: {
        config: md => {
            md.use(require('markdown-it-plantuml'))
        }
    }
}

Markdown中で以下のように使えます。

@startuml
actor User
component hello
User -> hello: USERNAME
@enduml

導入にあたって行った変更は以下: