UML Diagrams & API Documentation by GitHub Actions

Continuously update design documents and view them on the web.

UML Diagrams & API Documentation by GitHub Actions
Photo by Roman Synkevych / Unsplash


JaPong project has grown big enough that I need a quick way to recap the specs of each component while developing. Although I already looked at those documents to check if I was on the right track, viewing them using Visual Studio Code's plugin was anything but a convenient experience. So, I created a website that shows UML images and links to API websites of JaPong servers.

Tools to Write UML and APIs

I write various UML documents such as class, sequence, and deployment diagrams using PlantUML. For APIs, I write OpenAPI documents for REST APIs and AsyncAPI documents for asynchronous APIs such as WebSocket APIs.

GitHub Actions

I manage all the design documents of JaPong in uztbt/japong-design. I configured GitHub Actions for that repository. Every time I push, it generates up-to-date images from the UML and API websites and stores them in designated buckets of Google Cloud Storage.

Link to the GitHub Actions


I wrote a single HTML file to show the links to the API websites and the images generated from the UML documents. GitHub Actions also publishes this HTML file to a bucket of Google Cloud Storage.

Link to this website


After setting up GitHub Actions and Google Cloud Storage, it has become easier to check the documentation of JaPong. By continuously updating the design documents and viewing them on the web, I will keep working towards the release of JaPong 0.3.0.