Image type

You may select any of the following image types for the /img endpoint by adding e.g. ?type=png:

  • jpeg (default)
  • png
  • webp

Use /svg to get an SVG image.

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
mermaid chart example with background color

Themes

You can change the theme of the diagram without modifying the diagram code. See the mermaid theme docs for details. Note that these are the built-in mermaid.js themes and not the custom mermaid live editor themes.

Current available theme options are:

  1. default - This is the default theme for all diagrams.
  2. neutral - This theme is great for black and white documents that will be printed.
  3. dark - This theme goes well with dark-colored elements or dark-mode.
  4. forest - This theme contains shades of green.

Demo:

https://mermaid.ink/img/pako:eNpNkM9qwzAMh19F6NRB8wI5DNak7aWwwXqLexCxUpvNf3AURkny7rNbynaTPn0_ITRjHzRjjddE0cC5VR7grWtMsqM4Gi9QVa_LkQVc8HxbYLc5BhhNiNH660uxd0WBZj4ViUGM9V9rGTT37LvnBdruRFFCvPzx809YYN_ZD5MX_-cmcU4cuoHqgaqeEjSUsqBECW7RcXJkdT55LiGFYtixwjqXmgeavkWh8mtWp6hJeK-thIS1pIm3SJOEz5vvn_3DaS3lB7gHXH8BFrFcZw?theme=dark
A mermaid.ink chart example
https://mermaid.ink/img/pako:eNpNkM9qwzAMh19F6NRB8wI5DNak7aWwwXqLexCxUpvNf3AURkny7rNbynaTPn0_ITRjHzRjjddE0cC5VR7grWtMsqM4Gi9QVa_LkQVc8HxbYLc5BhhNiNH660uxd0WBZj4ViUGM9V9rGTT37LvnBdruRFFCvPzx809YYN_ZD5MX_-cmcU4cuoHqgaqeEjSUsqBECW7RcXJkdT55LiGFYtixwjqXmgeavkWh8mtWp6hJeK-thIS1pIm3SJOEz5vvn_3DaS3lB7gHXH8BFrFcZw?theme=dark&bgColor=1b1b1f
A mermaid.ink chart example