Document how to use emoji in mermaid diagrams

[jsoref]

trafficstars

Code of Conduct

• [X] I have read and agree to the GitHub Docs project's Code of Conduct

What article on docs.github.com is affected?

https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/creating-diagrams

What part(s) of the article would you like to see updated?

Add a section explaining how to use emoji

Additional information

The first hit of https://www.google.com/search?q=mermaid+diagram+emoji&ie=UTF-8 is:

https://github.com/mermaid-js/mermaid/issues/625

the first suggestion ... https://github.com/mermaid-js/mermaid/issues/625#issuecomment-378441698 does not work in GitHub:

graph TD
A---foo[&amp#x1F619]

a later suggestion ... https://github.com/mermaid-js/mermaid/issues/625#issuecomment-558295512 does work:

graph TD
A-->B("hello 🥰")

Note: there is no documentation on the mermaid website at this time ...

• https://github.com/mermaid-js/mermaid/issues/5308

[nguyenalex836]

@jsoref Thanks for opening this issue! I'll get this triaged for review ✨

[gsosm0760]

Emeğinize sağlık

[suleymanay]

Ben

[rishusam]

graph TD; A[Start] --> B[Process 🛠️]; B --> C{Decision ✅}; C -->|Yes| D[Result 😊]; C -->|No| E[Result 😞]; B --> F(Sub-process 💼); F --> G(Another process 📝); G -->|Done| H[End 🏁];

[rishusam]

emoji_mermaid.py

def replace_emojis(mermaid_code): # Define mappings of placeholders to emoji Unicode characters emoji_map = { ':smile:': '😊', ':rocket:': '🚀', ':heart:': '❤️', }

# Replace placeholders with emojis
for placeholder, emoji in emoji_map.items():
    mermaid_code = mermaid_code.replace(placeholder, emoji)

return mermaid_code

Example Mermaid code with placeholders

mermaid_code = """ graph TD; A[Start] --> B[Process :rocket:]; B --> C{Decision :smile:}; C -->|Yes| D[Result :heart:]; C -->|No| E[Result :heart:]; B --> F(Sub-process); F --> G(Another process); G -->|Done| H[End]; """

Pre-process Mermaid code

processed_mermaid_code = replace_emojis(mermaid_code) print(processed_mermaid_code)

[nguyenalex836]

@jsoref Thank you for your patience while our team reviewed this! Given the solution to this issue is to paste in the emoji, we don't feel it it necessary to document this. Thank you for your contribution 💛 I'll go ahead and close out this issue.