美人鱼类图仅变宽,忽略方向

Jef*_*eff 9 gitlab mermaid

我在使用 Mermaid 语法在 GitLab markdown 中布局类图时遇到问题。我有一些证据表明我在 Mermaid 语法中犯了一个错误,无论 GitLab 是什么。因此,我觉得可以询问SO

当我添加元素时,我尝试使用 Mermaid 创建的类图只会变得越来越宽。图中的文字也变得越来越小。我无法让布局垂直扩展。

这是 H1 元素的屏幕截图供参考。

美人鱼类图

我添加了direction关键字,但布局忽略了它。我已经尝试过TDand TBand LRandRLdirection价值观。类图在所有情况下呈现相同。

我发现这是一个更复杂的图表,可以在 GitLab 中很好地呈现。该布局同时使用水平和垂直空间。这让我认为 GitLab 正在工作,但我的语法是错误的。

如何让 Mermaid 更垂直地而不是水平地扩展和/或不减小文本大小太多?

这是代码:

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
Run Code Online (Sandbox Code Playgroud)