Mermaid class diagrams get wider only, ignore direction

The class diagrams I am trying to create with Mermaid only layout wider and wider as I add elements. The text in the diagram also get smaller and smaller.

Here is screen shot with H1 element for reference.

I added the direction directive, but the layout seems to ignore this. I have tried TD and TB and LR and RL for `direction values. The class diagrams renders the same in all cases.

I got the same behavior on 2 different version of GitLab: 14.0.8-ee and 14.3.0-pre (gitlab.com).

At first, I thought this behavior was a bug, but I found this (closed and fixed) GitLab issue, and it lays out the diagram elements both horizontally and vertically so that the elements have space.

So I’ve gotta be doing something wrong in my syntax, right? But what?

Here is the code:

classDiagram
%% Direction does not seem to be working?
direction TB
%% ---- Lib Classes ----
class Lib_FancyFruit
class Lib_GoodBread{
    +Double yeastAmount
}
Lib_FancyFruit *-- "0..*" Lib_GoodBread : breads
class Lib_SeasideManor
class Lib_LiberalSpice{
    +String currentFlavor
}
Lib_SeasideManor *-- "0..*" Lib_LiberalSpice : spicesAllAround
class Lib_PrimeCurrents
class Lib_GardenFresh
Lib_GardenFresh *-- "0..*" Lib_PrimeCurrents : currentCurrents
class Lib_RepeatingHistory
class Lib_TranslationInformation
class Lib_HistoryLayerAgain
Lib_RepeatingHistory *-- "0..*" Lib_TranslationInformation : recentHistory
Lib_TranslationInformation *-- "0..*" Lib_HistoryLayerAgain : anotherTranslationInformation
%% ---- Interfaces ----
class HappinessSadnessDisplay{
    <<interface>>
    ~String formattedCurrentThings
    ~Date onceDate
    ~String formattedDayDate
    ~String goryDetail
    ~String firstName
    ~Bool workComplete
    ~Bool appointmentScheduled
}
class RedTrainSchedule{
    <<interface>>
    ~Double dailyCrayonsDue
    ~Bool willBeOnTimeToday
    ~createFreightTrainRailLine() FreightTrainRailLine
}
%% ---- Enums ----
class Pill{
    <<enumeration>>
    reallyOval
    circularizedKind
}
%% ---- Main Classes ----
class WanderingMan
WanderingMan o-- "1" Lib_LiberalSpice : spice
WanderingMan o-- "0..1" Pill : pill
WanderingMan o-- "0..1" Lib_GardenFresh : gardenAccounts
WanderingMan o-- "0..1" PoliteHamAction : hamStory
WanderingMan o-- "0..1" PoliteHamAction : scheduledPorkchops
WanderingMan o-- "0..1" Lib_GoodBread : unwrappedBread
WanderingMan ..|> RedTrainSchedule
WanderingMan ..|> HappinessSadnessDisplay
class PoliteHamAction{
    ~String porkNumber
}
PoliteHamAction o-- "1" Lib_HistoryLayerAgain : actionLayerDetail

Did you sort it out by any chance? I’m facing exactly the same issue - the “direction” directive isn’t doing anything.