How to control image size etc. ? Some config directives not reflected in diagram

[dcs3spp]

I am using remark-mermaid from fumadocs, e.g.

%%{
  init: {
    "fontFamily": "monospace",
    "look": "classic",
    "maxTextSize": 8,
    sequence: {
      "actorFontSize": 8
    }
  }
}%%
graph LR
    A[Square Rect] -- Link text --> B((Circle))
    A --> C(Round Rect)
    B --> D{Rhombus}
    C --> D

Loading

That renders an svg in a div tag

<div>
<svg>...</svg>
</div>

I am aware of config directives and have also looked at mermaid source. I have tried setting maxTextSize and various font size config attributes in text header to make readable on smaller devices but neither seem to have affect.

For example, for the diagram below: I tried configuring with the following directives:

%%{
  init: {
    "fontFamily": "monospace",
    "look": "classic",
    "maxTextSize": 8,
    sequence: {
      "actorFontSize": 8
    }
  }
}%%
sequenceDiagram
    participant Publisher
    participant Hub
    participant Subscriber

    Subscriber->>Hub: 1. Subscribe to topic (GET)
    Hub->>Subscriber: 2. Send challenge for verification
    Subscriber->>Hub: 3. Respond with challenge (confirmation)
    Hub->>Subscriber: 4. Subscription confirmed

    Publisher->>Hub: 5. Publish content update (POST)
    Hub->>Subscriber: 6. Notify subscribers (POST)
    Subscriber->>Subscriber: 7. Verify HMAC using request body
    Subscriber->>Subscriber: 8. Parse XML and process update
    Subscriber->>Hub: 9. Send acknowledgment (200 OK)

Loading

%%{
  init: {
    "fontFamily": "monospace",
    "theme": "forest",
    "look": "classic",
    "maxTextSize": 8,
    sequence: {
      "actorFontSize": 8
    }
  }
}%%
sequenceDiagram
    participant Publisher
    participant Hub
    participant Subscriber

    Subscriber->>Hub: 1. Subscribe to topic (GET)
    Hub->>Subscriber: 2. Send challenge for verification
    Subscriber->>Hub: 3. Respond with challenge (confirmation)
    Hub->>Subscriber: 4. Subscription confirmed

    Publisher->>Hub: 5. Publish content update (POST)
    Hub->>Subscriber: 6. Notify subscribers (POST)
    Subscriber->>Subscriber: 7. Verify HMAC using request body
    Subscriber->>Subscriber: 8. Parse XML and process update
    Subscriber->>Hub: 9. Send acknowledgment (200 OK)

The theme and font configuration are not reflected in the diagram!

Is there a way to configure the remark plugin to specify the class name for the surrounding div tag to allow image size CSS configuration for different devices etc? :

<div className="customClassName">
<svg>...</svg>
</div>

Or what alternative mechanisms are available to customise image size, font etc.?