Which Unicode font?

[VladimirAlexiev]

What Unicode font do you use at http://www.plantuml.com/plantuml?

this diagram shows fine on your server, but on our installation is missing the 5-digit Unicode chars such as <U+1F552>.

Our setup:

• linux 3.5.0-28-generic, java 1.6.0_25-b06, default encoding: UTF-8
• plantuml 1.2017.16 (20170903), confluence plugin 6.8-SNAPSHOT by avono AG (approx 20170907), graphviz 2.38.9 (20140413)

I thought it's a problem with the default encoding but after setting it to UTF-8 we still have the problem.

[arnaudroques]

There is a special command that helps to solve fonts issue. For example, you can try: @startuml listfont This is a test for <U+1F3E2> @enduml This diagram will test all fonts available on your server. On the official server, it gives http://www.plantuml.com/plantuml/uml/SoWkIImgAStDuSh9B2v9oyyhKGZ9o2nM0A94XPBKuXA5jFmY1PjGRKCtOrSZEow7rBmKe6e0

So it seems that you need the "Segoe UI Emoji" or "Segoe UI Symbol" font. Hope this helps!

[VladimirAlexiev]

Richer test:

@startuml
listfonts Unicode test: <U+260F>, <U+00A9>, <U+1F552>, <U+1F3A8>, <U+1F3E2>
@enduml

I find "Dialog" most readable (and I think this is the default font). But on our linux installation, "Dialog" doesn't have those unicode chars. We'll investigate where to get a richer font.

[VladimirAlexiev]

Here's the first diagram. I want to see how Github renders it:

@startuml
hide members
hide circles
class appellation as "<U+260F> Appellation"       <<appellation>>
class right       as "<U+00A9> Right"             <<right>>
class activity    as "<U+1F552> Activity"         <<activity>>
class place       as "<U+1F30D> Place"            <<place>>
class artwork     as "<U+1F3A8> Man-Made Object"  <<artwork>>
class museum      as "<U+1F3E2> Legal Entity"     <<museum>>
@enduml

[VladimirAlexiev]

Hi @arnaudroques! I'm making this diagram and some of the Unicode emojis (that ChatGPT picked for me) don't show on the PlantUML server.

The troublesome characters are:

listfont <U+1F3F7> Domain, <U+1F6E2> Unit, <U+1F527> Property, <U+1F6E0> ClassificationProperty, <U+1F9E9> PropertyRelation

Github shows them fine:

@startuml
listfont <U+1F3F7> Domain, <U+1F6E2> Unit, <U+1F527> Property, <U+1F6E0> ClassificationProperty, <U+1F9E9> PropertyRelation
@enduml

The PlantUML server has maybe 5x more fonts, but doesn't show the chars.

• Only <U+1F527> Property (wrench) is shown in 6-7 of the fonts.
• It's strange that <U+1F6E0> ClassificationProperty (wrench and hammer) doesn't show, since that char is a "brother" of the previous one!
• the Dialog font has a lot fewer usable chars on the PlantUML server compared to Github
• I can't see any regularity as to which fonts are shown vs which ones aren't.

So Arnaud, please reopen the issue. Please install some better font resource(s) on the PlantUML server. I'm clueless as to where to find fonts, but I'll ask on Twitter.

[VladimirAlexiev]

• asked https://twitter.com/valexiev1/status/1646492952930164738
• https://superuser.com/questions/876572/how-do-i-find-out-which-font-contains-a-certain-special-character discusses a similar question, but in 2015-2017
• https://www.fileformat.info/info/unicode/char/1F3F7/fontsupport.htm shows 3 fonts that support this particular char:

[VladimirAlexiev]

I tried to express 3 icons using 3 different styles as per https://plantuml.com/creole:

• <U+xxxxx> hex special chars
• &#nnnnnnn; decimal special chars
• <:emoji:> emoji names

Results:

• Github (PNG preview) shows hex and emoji ok

  
  @startuml
  hide empty members
  hide empty attributes
  hide circle

class "<U+1F3F7> U+1F3F7\n<U+1F527> U+1F527\n<U+1F6E0> U+1F6E0" class "🏷 127991\n🔧 128295\n🛠 128736" class "<:label:> label\n<:wrench:> wrench\n<:hammer_and_wrench:> hammer_and_wrench" @enduml

- [Plantuml SVG](http://www.plantuml.com/plantuml/svg/PSr12uCW6CRnkvz26kooooggrIAwh6-mMn1cBnJuob1ZxDlFr6Amq_Fd9o-ssZ1bLXHaNYQWW2_peGWuWjA_n8nHoxWQ2CeNnGKGmWNJcaRryn9tQLSqD4Gl7MM99HyxvO-h9H_HVdy-nKbHbl6T-ktb9hUapAou3LAakHMtnt5T2JQ2g1hgrlvJlHL8FblniT7C444DJ4x3yVfd4Mb1JYkABm00) shows hex and emoji ok
- [PlantUML PNG](https://www.plantuml.com/plantuml/png/PSr12uCW6CRnkvz26kooooggrIAwh6-mMn1cBnJuob1ZxDlFr6Amq_Fd9o-ssZ1bLXHaNYQWW2_peGWuWjA_n8nHoxWQ2CeNnGKGmWNJcaRryn9tQLSqD4Gl7MM99HyxvO-h9H_HVdy-nKbHbl6T-ktb9hUapAou3LAakHMtnt5T2JQ2g1hgrlvJlHL8FblniT7C444DJ4x3yVfd4Mb1JYkABm00)  shows emoji ok, but chars are missing from hex
- Decimal chars don't show on any of the platforms. I used the windows calculator in Programmer notation and I think my decimal char codes are correct? Eg `<U+1F3F7> = &#127991;` right @arnaudroques ?

---

So I'll use the `<:emoji:>` notation, which works for both PNG and SVG output. 
An extra benefit is that emoji are already colored (on the other hand, you cannot recolor them using `<color:colorName>...</color>`).

One can pick emoji from the [emoji cheat sheet](https://github.com/ikatyang/emoji-cheat-sheet/blob/master/README.md) or the [Unicode full-emoji-list](https://unicode.org/emoji/charts/full-emoji-list.html)

I'll update the documentation.

[arnaudroques]

We've just installed "Noto Emoji" on www.plantuml.com but this is only partially working (see). I don't know why this is not working for Serif and Sans Serif. But I think it just makes your PNG working.

The <:emoji:> notation uses data stored in here and does not use any font: that's why it is working.

Decimal chars don't show on any of the platforms. I used the windows calculator in Programmer notation and I think my decimal char codes are correct? Eg <U+1F3F7> = &#127991; right @arnaudroques ?

Yes, this is probably a bug on our side.

• Github (PNG preview) shows hex and emoji ok

BTW, I am not aware of any Github/PNG preview: can you post a screenshot about this? Thanks!

[VladimirAlexiev]

example after Noto Emoji is installed. I can see all my chars in there, thanks!!

Github/PNG preview: can you post a screenshot

Both images above: https://github.com/plantuml/plantuml/issues/72#issuecomment-1507022544 and https://github.com/plantuml/plantuml/issues/72#issuecomment-1506888642 are generated by Github. If you hover, you can Copy out the source that I put in Github, but Github is smart enough to show PlantUML source as an image.

BTW, it also reprocesses PlantUML image links to "githubusercontent" image links. Eg http://www.plantuml.com/plantuml/png/PSr12uCW6CRnkvz26kooooggrIAwh6-mMn1cBnJuob1ZxDlFr6Amq_Fd9o-ssZ1bLXHaNYQWW2_peGWuWjA_n8nHoxWQ2CeNnGKGmWNJcaRryn9tQLSqD4Gl7MM99HyxvO-h9H_HVdy-nKbHbl6T-ktb9hUapAou3LAakHMtnt5T2JQ2g1hgrlvJlHL8FblniT7C444DJ4x3yVfd4Mb1JYkABm00 is rendered as this image on Github: note the URL is different, and what it shows in Github vs PlantUML server is different:

[VladimirAlexiev]

@arnaudroques https://github.com/plantuml/plantuml/tree/master/src/net/sourceforge/plantuml/emoji/data shows 1177 files.

• But the doc on emoji talks about a much smaller number "Over 580 emojis" and lists 6 Unicode blocks
• Which is the right number? And maybe there are missing Unicode blocks in the documentation?

[arnaudroques]

@arnaudroques https://github.com/plantuml/plantuml/tree/master/src/net/sourceforge/plantuml/emoji/data shows 1177 files.

• But the doc on emoji talks about a much smaller number "Over 580 emojis" and lists 6 Unicode blocks
• Which is the right number? And maybe there are missing Unicode blocks in the documentation?

Once again, the documentation is not up to date... sorry about that :-) The right number is actually 1174 (and all names are listed here).

[VladimirAlexiev]

I updated the documentation with the new numbers, added a link to Block 27, counts per block, and links between Emoji and Unicode special chars. Pleasure working with you!!!

[VladimirAlexiev]

@arnaudroques Maybe it's not Github but this Chrome addon that does the visualization:

[claudio-salvio]

Hello @VladimirAlexiev

As far as I know, Github does not render PlantUML code. Surely your diagram view is produced by the Chrome extension that you mention.

I use another extension called "Markdown Diagrams". It is available -at least- for Firefox, Chrome and Edge.

I mentioned this extension in a January 2022 issue because I had been using it for a while and found it very useful. The issue mentioned is [ERD] The size of horizontal lines is not modified according to the number of characters #874, and there you can see a mixture of PlantUML code and images of diagrams.

It seems to me a good practice to include both the code and the image when I get involved in an issue. In fact, if it is a fixed bug, the image will show the situation before the correction and -with the help of the extension- you will be able to see the image of the diagram after the fix.

In my case, since I have the extension active, when I access the mentioned issue I see the duplicate diagrams by default because the problem has not yet been resolved, but if I double click on the images rendered by the addon, it shows the plantuml code.

Kind regards, Claudio Salvio

I💙PlantUML 🙏Thanks to all who make this useful software possible, especially @arnaudroques

[VladimirAlexiev]

Thanks @claudio-salvio, you are right! I use a plugin called "PlantUML Visualizer" (see issue linked above)