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.

1@startuml
2A -> B : Hello
3A <- B : Hi There!
4@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.

1        ```plantuml
2        @startuml
3        A -> B : Hello
4        A <- B : Hi There!
5        @enduml
6        ```

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

Update 11 Apr 2022: Here is a something new

Hugo introduced support codeblock rendering extension in 0.93.0. Check here

So now a code block like below will generate a diagram. Its based on mermaidjs.

```mermaid

graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

```

** 11 Apr 2022**: Another attempt to PlatUML in Client Side

1    ```plantuml
2    @startuml
3    A -> B : Hello
4    A <- B : Hi There!
5    @enduml
6    ```

1@startuml
2A -> B : Hello
3A <- B : Hi There!
4@enduml