I often need to embed diagrams into documentation but I dislike having to keep track of separate files for the image. I went looking for a way to embed them as “code” in the document and found GitLab’s ability to embed PlantUML in Markdown content including READMEs, issues, MRs, etc. I want to be able to do the same with Hugo.
I spun up a Hugo Shortcode
to add support for {{< plantuml >}} ... {{< /plantuml >}} in pages
where the source for the diagram is in the middle.
Stick this in a Hugo Markdown page…
{{< plantuml id="eg" >}}
Alice -> Bob: test
{{< /plantuml >}}
… and it becomes this when rendered!
The source for the shortcode is below. I also put a copy of rawdeflate.js
from here in static/js/rawdeflate.js.
I should also note that it would be polite if I were to use my own PlantUML
server to generate these images but this is a static site hosted on GitLab so
I can’t run the server there. Thanks PlantUML!