Mermaid Ink

Getting Started

1. Go to mermaid-live-editor
2. Create or edit your chart
3. Copy the encoded string from your browser URL, it looks like this:

   https://mermaid-js.github.io/mermaid-live-editor/edit#pako:eNpNkM9qwzAMh19F6NRB8wI5DNak7aWwwXqLexCxUpvNf3AURkny7rNbynaTPn0_ITRjHzRjjddE0cC5VR7grWtMsqM4Gi9QVa_LkQVc8HxbYLc5BhhNiNH660uxd0WBZj4ViUGM9V9rGTT37LvnBdruRFFCvPzx809YYN_ZD5MX_-cmcU4cuoHqgaqeEjSUsqBECW7RcXJkdT55LiGFYtixwjqXmgeavkWh8mtWp6hJeK-thIS1pIm3SJOEz5vvn_3DaS3lB7gHXH8BFrFcZw

4. Paste the encoded string (e.g. pako:eNpNkM9...) after https://mermaid.ink/img/
   ^*

   Use https://mermaid.ink/svg/ if you want a SVG image.
   , for example:

   https://mermaid.ink/img/pako:eNpNkM9qwzAMh19F6NRB8wI5DNak7aWwwXqLexCxUpvNf3AURkny7rNbynaTPn0_ITRjHzRjjddE0cC5VR7grWtMsqM4Gi9QVa_LkQVc8HxbYLc5BhhNiNH660uxd0WBZj4ViUGM9V9rGTT37LvnBdruRFFCvPzx809YYN_ZD5MX_-cmcU4cuoHqgaqeEjSUsqBECW7RcXJkdT55LiGFYtixwjqXmgeavkWh8mtWp6hJeK-thIS1pIm3SJOEz5vvn_3DaS3lB7gHXH8BFrFcZw

5. Done, you could use the URL as a regular image URL:

Background colors

Images are generated with a transparent background by default.

As mermaid diagram with light themes are barely readable on dark backgrounds (and vice-versa), it is possible to force a background color by appending the following query parameter to any /svg or /img URL: ?bgColor=<color>. The color value is interpreted as an hexadecimal color code by default, but you can also use named colors by prefixing the value with !.

Examples:

• Add a red background using hexadecimal color: ?bgColor=FF0000
• Add a white background using named color: ?bgColor=!white

Demo:

https://mermaid.ink/svg/pako:eNpNkM9qwzAMh19F6NRB8wI5DNak7aWwwXqLexCxUpvNf3AURkny7rNbynaTPn0_ITRjHzRjjddE0cC5VR7grWtMsqM4Gi9QVa_LkQVc8HxbYLc5BhhNiNH660uxd0WBZj4ViUGM9V9rGTT37LvnBdruRFFCvPzx809YYN_ZD5MX_-cmcU4cuoHqgaqeEjSUsqBECW7RcXJkdT55LiGFYtixwjqXmgeavkWh8mtWp6hJeK-thIS1pIm3SJOEz5vvn_3DaS3lB7gHXH8BFrFcZw?bgColor=555555