DEV Community

Kazuki Higashiguchi
Kazuki Higashiguchi

Posted on

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.

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

[*] --> State1
State1 --> [*]
Enter fullscreen mode Exit fullscreen mode

By using Pegmatite, you can see like that.

image

Add extension

First add this Chrome extension here.

image

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
Enter fullscreen mode Exit fullscreen mode
  • run a server
docker run -d -p 8888:8080 plantuml/plantuml-server
Enter fullscreen mode Exit fullscreen mode
  • 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.

image

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

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

Discussion (0)