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: 2026-01-24. I previously used PlantUML, but I have now moved to Mermaid.js for all diagrams in this blog. It's much simpler as it doesn't require Java or any external dependencies to be installed on the local machine for client-side rendering.

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
erDiagram
  CUSTOMER }|..|{ DELIVERY-ADDRESS : has
  CUSTOMER ||--o{ ORDER : places
  CUSTOMER ||--o{ INVOICE : "liable for"
  DELIVERY-ADDRESS ||--o{ ORDER : receives
  INVOICE ||--|{ ORDER : covers
  ORDER ||--|{ ORDER-ITEM : includes
  PRODUCT-CATEGORY ||--|{ PRODUCT : contains
  PRODUCT ||--o{ ORDER-ITEM : "ordered in"
```

  erDiagram
  CUSTOMER }|..|{ DELIVERY-ADDRESS : has
  CUSTOMER ||--o{ ORDER : places
  CUSTOMER ||--o{ INVOICE : "liable for"
  DELIVERY-ADDRESS ||--o{ ORDER : receives
  INVOICE ||--|{ ORDER : covers
  ORDER ||--|{ ORDER-ITEM : includes
  PRODUCT-CATEGORY ||--|{ PRODUCT : contains
  PRODUCT ||--o{ ORDER-ITEM : "ordered in"

```mermaid
sequenceDiagram
    Alice->>John: Hello John, how are you?
    %% this is a comment
    John-->>Alice: Great!
```

  sequenceDiagram
    Alice->>John: Hello John, how are you?
    %% this is a comment
    John-->>Alice: Great!

```mermaid

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

```

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