Your are a software engineer who love code? Then maybe you also love with diagrams (I said maybe!). There is lot of diagrams and we need it to capture requirement, draft code base, network topology, timeline and more. So diagram is important.

This blog is built using Jekyll and I am looking for some solution to allow me to draw diagram if needed with combination of markdown syntax, this should be possible.

I prefer to use PlantUML compare to others tools that available. It will convert my plain text to diagram. Thus plain text is useful for revision. PlantUML support lots of diagram such as sequence diagram, use case diagram, class diagram, activity diagram, component diagram, state diagram, object diagram, deployment diagram, timing diagram, gantt chart and many more.. there is existed few plugins on rubygems but this plugin need a little touch-up.

I fork "jekyll-remote-plantuml" and change a litle bits :smirk:

So because I know storing generated image into repo will make that repo grow bigger in term of size so I decide to format the image into base64 each time building jekyll website and cache downloaded image during CI/CD

It quite silly, I do some code modification to accomplish my objective. So thank you original developer of jekyll-remote-plantuml gem for awesome work.

What and why?

My plugins named as jekyll-plantuml-base64 do everything same as what jekyll-remote-plantuml do but the image will be converted into base64.

Why base64? Because I don’t need to store this image on my repository and there is a trick to cached this image during CI/CD to speed up the built process next time.

How to install ?

Option 1: To install this plugin on Jekyll, you just have to follow the guideline of Jekyll documentation

Option 2: Use rubygems, by adding gem 'jekyll-plantuml-base64', '~> 0.1.4.36' on your gemfile then bundle install

Option 3: Pull the gems directly from git by adding gem 'jekyll-remote-plantuml', '0.1.4.36', git: 'https://github.com/RobbiNespu/jekyll-remote-plantuml' on your gemfile and then bundle install

How to use ?

To use the jekyll-plantuml-base64 plugin, you just have to wrap you text between % plantuml % and % endplantuml % tags.

For example, to create a basic shema between Bob and Alice, you can write the following code

which will generated:

As you see this image created (retrieve the binary from a remote provider), stored and re-formated as base64 before displayed on you website.

Cool huh?

Edit