Support icons in mermaid graphs

Everyone can contribute. Help move this issue forward while earning points, leveling up and collecting rewards.

• Close this issue

Problem to solve

Allow users to enhance their mermaid graphs with icons.

Intended users

• Presley (Product Designer)
• Documentation writers
• Documentation readers

Further details

Currently there is no way to insert icons into mermaid graphs. The current workaround is to use Unicode characters like ♡ https://emojipedia.org/white-heart-suit/

Proposal

Send mermaid node text through the GitLab text processor.

There are a 2 different supported methods that I see. In order of favorability:

1. Allow Font Awesome icons in text. This is supported in mermaid. Example

2. Support the GitLab set of icons like :monkey: 🐒

Permissions and Security

• View markdown files or
• Edit markdown files

Documentation

In the mermaid section of the GitLab markdown documentation add how to use this icon feature.

Testing

Rendering any of these mermaid documents and having icons appear.

Font Awesome

graph LR
   FONTAWESOME["fa:fa-gitlab"]

GitLab icons

graph LR
   GITLAB[":monkey:"]

UNICODE

Unicode works but has a limited icon set compared to Font Awesome.

graph LR
   UNICODE[" 📊"]

What does success look like, and how can we measure that?

Rendering a mermaid graph and having icons appear.

What is the type of buyer?

• Core

Links / references

Similar to #20727