Diagrams In Blog

I use a text to diagram tool called PlantUML. It’s perfect! Now, I want to use it with my hugo site, through a short code. So, I I type a code like below, I should see out like as the image.

@startuml
A -> B : Hello
A <- B : Hi There!
@enduml

Update: I spend many hours trying to work this out. Created a firebase function to process posting and converting and yada yada. But finally gave up on Hugo. Until there is a plugin support in the core, this will be a very challenging thing.

During my (failed) research, I ran into Hexo and PlantUML filter plugin. I saw a a WordPress Migration plugin. I decided to give it a go.

In less than 20 minutes, I managed to install hexo, create a project, migrate wordpress items and got plantuml working.

@startuml
A -> B : Hello
A <- B : Hi There!
@enduml

I guess I will have to wait for hugo to mature a bit more. I really liked the speed and simplicity of hugo. But lack of plugin support in processing really killed it!

Update: I am now using a hexo-local-plantuml instead. This generates plantuml files and svg locally. So overall page rendering is fast. Downside, I need to have Java and graphviz working locally. I have created a working Docker image (yogendra/blog-toolbox:latest) to help me work around this

Update: Trying client side rendering