Adding UML Diagrams to Rehype in Astro | David Teather

submited by

Style Pass

2024-10-07 14:30:06

I just recently added UML diagrams for my blogs, since in the future I want to create blog posts and youtube videos about system design and wanted to define UML diagrams in markdown and have them rendered out.

I decided to use mermaidjs to define and render out the diagrams since it seems to get the job done and honestly it had a better website and more stars than alternatives on GitHub. Let’s get started!

We’ll be using rehype-mermaid, the way this library and others work is it internally uses playwright which is a headless browser that uses the mermaid javascript library to generate the images. Unfortunantely this does make both installation and the build step need an additional dependency.

Then after that, you should be pretty much all set for the initial setup, try to create a mermaid codeblock on a markdown file of yours. Here’s an example from earlier

So let’s address these! I’ll be creating a post-processor rehype extension to do these, it’s probably not the most efficient or best practice way since I don’t know rehype that well but hey it works! It also just runs at build time so it won’t slow users down.