Default fontSize overwrites font size values set for sequence and c4 diagrams

[jonabc]

Description

In https://github.com/mermaid-js/mermaid/commit/f14971e908787e19c4924f0d0e047e391c41d90b, the default config was updated to include a default fontSize: 16 value on the root configuration object. This value overwrites all configured values for the specific sub-type font sizes for the sequence and c4 diagram types making it impossible to set unique font sizes.

I've been able to workaround the problem by calling mermaid.mermaidAPI.updateSiteConfig({fontSize: undefined}) to remove the default value and restore the old behavior. It would be great if mermaid could be fixed so that the workaround wasn't needed though.

Steps to reproduce

1. Go to this mermaid live editor sequence diagram example
2. In the "Config" tab, notice that all fonts are set to 1 but the rendered example doesn't respect those values
3. Add "fontSize": 1 to the configuration and notice that all text in the rendered example is updated

Screenshots

Here's a gif showing the above reproduction steps

Code Sample

No response

Setup

Desktop

• OS and Version: Mac
• Browser and Version: Chrome, Edge, Firefox, Safari

Smartphone

• Device: [Samsung, iPhone, ...]
• OS and Version: [Android, iOS, ...]
• Browser and Version: [Chrome, Safari, ...]

Additional Context

The font configuration in set on the sequence and c4 diagram setConf methods by overriding any local config, but wouldn't it make more sense to use the cnf.font* values as defaults rather than overrides? e.g. setting fontSize values for the sequence diagram

  // CURRENT
  // always sets the individual font sizes if the passed in configuration has a `fontSize` value
  if (cnf.fontSize) {
    conf.actorFontSize = conf.noteFontSize = conf.messageFontSize = cnf.fontSize;
  }

  // PROPOSED
  // only sets individual font sizes based on the passed in configuration if a value is not already set
  if (cnf.fontSize) {
    conf.actorFontSize ||= conf.noteFontSize ||= conf.messageFontSize ||= cnf.fontSize;
  }

This would be a breaking change on the existing configuration behavior though and could impact any users that are expecting the configuration to work as an override.

[becca-tiessen]

I'm running into this as well, this is causing text to overflow out of my sequence diagram notes. I tried directly setting the noteFontSize and actorFontSize to 14 (which is supposed to be the default of both), but like @jonabc noted above it is not respected.

Current workaround is this 😬

.noteText, .actor {
  font-size: 14px !important;
}

[gardenbaum]

Thank you so much @becca-tiessen! Your link helped me a lot.

[rjzak]

I wasn't able to get Mermaid to work properly, but I found that Excalidraw https://excalidraw.com/ is able to import Mermaid charts. From there, it's easy to change the font sizes for the required components.