Hugo Shortcode for PlantUML

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!

comments powered by Disqus