The tool that powers the diagrams on this wiki
Warning: This section is under construction
For this site, I author everything in MDX. Diagrams are written as regular
fenced codeblocks, with
mermaid as the language.
The code blocks are rendered as is, and a client-side request is made
mermaid.thekevinwang.com with the diagram payload.
The server returns a SVG image:
Behind this, there is a Lambda function, running a Docker container. Here is an overview of the Dockerfile.
This builds an OCI image, which is hosted on AWS ECR. When Lambda uses this to run a container, it internally runs a compiled http server, and uses the Mermaid CLI binary to process incoming diagram text. It returns a simple SVG string.
The end to end flow looks like this
The same client-side request to generate a mermaid diagram could occur
server-side, but I simply have it client-side because I want to be
able to request an updated diagram SVG, in response to changes in the
mode value (dark/default).
I’ve run into some issues with the
Content-Type header. If I set it
to the correct value —
image/svg+xml — in Lambda container code,
it either gets automatically base64-encoded by API Gateway, or I get
an XML error.
However, if I call the lambda function's URL directly, it just works, but I don’t get any flexiblity of CDN edge caching, or adding a fully qualified domain name.
So, my fix was to use edge compute (CloudFront functions) to
Content-Type header accordingly. 🧠
Here are some syntax cheatsheets I found to be helpful:
And of course, the Mermaid live playground