Skip to content

Conversation

@chosh-dev
Copy link
Contributor

Replace btoa with toBase64Url for encoding in drawMermaidImage.

Since Mermaid Ink uses the encoded string in a URL, all characters must be URL-safe. Node names may include characters that are not URL-safe, which can cause a 404 error in Mermaid Ink.

as-is-url , to-be-url

image

Replacing +, /, and = with -, _, and an empty string is defined in the RFC for URL-safe Base64, and Mermaid Ink supports this format.

I also replaced btoa in the test code. The table below shows the encrypted URL before and after the change.

as-is

https://mermaid.ink/img/Z3JhcGggVEQ7IEEgLS0+IEI7?bgColor=!white&type=png
https://mermaid.ink/img/Z3JhcGggTFI7IFN0YXJ0IC0tPiBFbmQ7?bgColor=!white&type=jpeg
https://mermaid.ink/img/Z3JhcGggVEI7IFggLS0+IFk7?bgColor=!white&type=webp
https://mermaid.ink/img/Zmxvd2NoYXJ0IFREOyBBIC0tPiBCOw==?bgColor=#FF5733&type=png
https://mermaid.ink/img/Zmxvd2NoYXJ0IFREOyBBIC0tPiBCOw==?bgColor=#FFF&type=png
https://mermaid.ink/img/Y2xhc3NEaWFncmFtOyBjbGFzcyBBOyBjbGFzcyBCOw==?bgColor=!transparent&type=png
https://mermaid.ink/img/Z3JhcGggVEQ7CiAgICBBW0NocmlzdG1hc10gLS0+fEdldCBtb25leXwgQihHbyBzaG9wcGluZykKICAgIEIgLS0+IEN7TGV0IG1lIHRoaW5rfQogICAgQyAtLT58T25lfCBEW0xhcHRvcF0KICAgIEMgLS0+fFR3b3wgRVtpUGhvbmVdCiAgICBDIC0tPnxUaHJlZXwgRltmYTpmYS1jYXIgQ2FyXQ==?bgColor=!white&type=png
https://mermaid.ink/img/Z3JhcGggVEQ7IEEgLS0+IEI7?bgColor=!white&type=png

to-be

https://mermaid.ink/img/Z3JhcGggVEQ7IEEgLS0-IEI7?bgColor=!white&type=png
https://mermaid.ink/img/Z3JhcGggTFI7IFN0YXJ0IC0tPiBFbmQ7?bgColor=!white&type=jpeg
https://mermaid.ink/img/Z3JhcGggVEI7IFggLS0-IFk7?bgColor=!white&type=webp
https://mermaid.ink/img/Zmxvd2NoYXJ0IFREOyBBIC0tPiBCOw?bgColor=#FF5733&type=png
https://mermaid.ink/img/Zmxvd2NoYXJ0IFREOyBBIC0tPiBCOw?bgColor=#FFF&type=png
https://mermaid.ink/img/Y2xhc3NEaWFncmFtOyBjbGFzcyBBOyBjbGFzcyBCOw?bgColor=!transparent&type=png
https://mermaid.ink/img/Z3JhcGggVEQ7CiAgICBBW0NocmlzdG1hc10gLS0-fEdldCBtb25leXwgQihHbyBzaG9wcGluZykKICAgIEIgLS0-IEN7TGV0IG1lIHRoaW5rfQogICAgQyAtLT58T25lfCBEW0xhcHRvcF0KICAgIEMgLS0-fFR3b3wgRVtpUGhvbmVdCiAgICBDIC0tPnxUaHJlZXwgRltmYTpmYS1jYXIgQ2FyXQ?bgColor=!white&type=png
https://mermaid.ink/img/Z3JhcGggVEQ7IEEgLS0-IEI7?bgColor=!white&type=png

@changeset-bot
Copy link

changeset-bot bot commented Nov 26, 2025

⚠️ No Changeset found

Latest commit: 6752dae

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant