8

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.

mermaid class diagram

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
Jeff
  • 3,829
  • 1
  • 31
  • 49
  • 1
    Same issue here, any ideas how to solve this? – Piotr L Feb 08 '22 at 10:58
  • 3
    @PiotrL I never solved it. I lived with wide diagrams. However, my GitLab installation has been upgraded since I originally wrote this question, and now some of my diagrams that were too wide render taller instead. So there has been some improvement. – Jeff Feb 08 '22 at 23:13

0 Answers0