How to preview a diagram image from PlantUML code on a GitHub page

In this post, I will explain how to display a diagram image written in PlantUML as a diagram on a GitHub page.

Key takeaways

• Google Chrome extension Pegmatite can be used to display PlantUML on GitHub as a diagram.
• Set up PlantUML server locally to avoid sending internal information to an external server.

Pegmatite

Pegmatite is a Google chrome extension. It replaces PlantUML code blocks into preview images. Especially, it runs on the following sites.

• https://github.com/*
• https://gist.github.com/*
• https://gitpitch.com/*
• https://gitlab.com/*
• https://bitbucket.org/*
• https://.backlog.jp/wiki/

Let's take a simple state diagram as an example.

[*] --> State1
State1 --> [*]

By using Pegmatite, you can see like that.

Add extension

First add this Chrome extension here.

By adding this, a PlantUML code will be replaced by the preview image when you view it on GitHub.

However, since it is on an externally published URL on PlantUML server, care should be taken to use it in business.

For example, the following URL will make the image accessible.

https://www.plantuml.com/plantuml/img/SoWkIImgAStDuUAArefLqDMrKmWkIIn9DUI2K60He0mNbqDgNWfG7G00

Set up PlantUML server locally

Let's set up PlantUML server locally to avoid sending internal information to an external server. There is a Docker image available for setting up a PlantUML server.

https://hub.docker.com/r/plantuml/plantuml-server

Use this to launch a local PlantUML server.

• pull the image

docker pull plantuml/plantuml-server

• run a server

docker run -d -p 8888:8080 plantuml/plantuml-server

• specify Base URL

Change the configuration to use the local PlantUML server as per README of dai0304/pegmatite.

Go to the Option settings of Pegmatite.

Input http://localhost:8888/img/.

That's it. You are ready to view a preview image on GitHub pages.