I am having a problem using Mermaid syntax to layout class diagrams inside GitLab markdown. I have some evidence that I made a mistake in my Mermaid syntax, irrespective of GitLab. Thus, I felt it OK to ask on SO.
The class diagrams I am trying to create with Mermaid only lays out wider and wider as I add elements. The text in the diagram also get smaller and smaller. I cannot get the layout to expand vertically instead.
Here is screen shot with H1 element for reference.
I added the direction
key word, but the layout ignores it. I have tried TD
and TB
and LR
and RL
for direction
values. The class diagrams renders the same in all cases.
I found this a more complicated diagram that renders nicely in GitLab. That layout uses both horizontal and vertical space. This makes me think that GitLab is working, but my syntax is wrong.
How do I get Mermaid to expand more vertically instead of horizontally and/or to not reduce the text size so much?
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