question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Sequence Diagrams: Message font weight with can only be bolder, not lighter

See original GitHub issue

Describe the bug In sequence diagrams, the font weight of messages has a look that feels bold. The problem is that we cannot use the configuration to make it normal, but it does respond if we want to make it bolder.

To Reproduce Render an arbitrary sequence diagram such as:

sequenceDiagram
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!
    Alice-)John: See you later!

use the following settings to toggle the messageFontWeight value between “normal” and “bold”. You can even try with “light”, “lighter” and it will remain looking bold (compared for example to the font used in the actors)

{
	"sequence": {
		"messageFontFamily": "arial",
		"messageFontWeight": "normal",
		"messageFontSize": 14
	}
}

Expected behavior I would expect the text to be by default bold and allow users to set it to normal. But I get the feeling that “normal” has as “bold” feel and we can only make it bolder, not lighter.

Screenshots Using normal font weight Screenshot 2021-04-07 at 18 16 42

Using bold font weight Screenshot 2021-04-07 at 18 16 15

Desktop (please complete the following information):

  • OS: MacOS BigSur (mermaid Cli v. 8.9.2)

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Reactions:3
  • Comments:5 (1 by maintainers)

github_iconTop GitHub Comments

2reactions
wkotlowskicommented, Jul 26, 2021

@beatrizsanchez There is a stroke setting that messes up the weight. We solved the issue by adding a css styling to the diagram:

.mermaid {
            display: flex;
            justify-content: center;
            margin-bottom: 16px;

            & > svg {
                max-height: 800px !important;
                max-width: 600px !important;

                .messageText {
                    stroke: none !important;
                }
            }
        }
1reaction
wkotlowskicommented, Jul 7, 2021

I have the similar problem, but instead of using the words: normal, or bold, I had tried using numbers as the default value is 400. I’ve set it to 10, 50, 100, 200 and there is no effect.

Read more comments on GitHub >

github_iconTop Results From Across the Web

font-weight - CSS: Cascading Style Sheets - MDN Web Docs
The font-weight CSS property sets the weight (or boldness) of the font. The weights available depend on the font-family that is currently ...
Read more >
Use creole syntax to style your texts
A light-weight Creole engine is integrated in PlantUML to have a standardized way to emit styled text. All diagrams support this syntax.
Read more >
EA Sequence diagrams: messages font size
If you right-click the label you've got some options to play around with, but font typeface and size aren't among them. You can...
Read more >
RFC 7996 - SVG Drawings for RFCs: SVG 1.2 RFC
In particular, the SVG 'font' element is not allowed. ... sans-serif, monospace) font-weight (normal, bold, bolder, lighter) font-style (normal, italic, ...
Read more >
PlantUML Language Reference Guide
1 Sequence Diagram. 1.1 Basic examples. The sequence "->" is used to draw a message between two participants. Participants do not have to...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found