title: Mermaid class diagrams get wider only, ignore direction
body: <p>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 <em>SO</em>.</p>
  <p>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.</p>
  <p>Here is screen shot with H1 element for reference.</p>
  <p><a href="https://i.stack.imgur.com/tFlBb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tFlBb.png" alt="mermaid class diagram" /></a></p>
  <p>I added the <code>direction</code> key word, but the layout ignores it. I have tried <code>TD</code> and <code>TB</code> and <code>LR</code> and <code>RL</code> for <code>direction</code> values. The class diagrams renders the same in all cases.</p>
  <p>I found this <a href="https://gitlab.com/gitlab-org/gitlab/-/issues/37282" rel="nofollow noreferrer">a more complicated diagram</a> 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.</p>
  <p>How do I get Mermaid to expand more vertically instead of horizontally and/or to not reduce the text size so much?</p>
  <p>Here is the code:</p>
  <pre><code>classDiagram
  %% Direction does not seem to be working?
  direction TB
  %% ---- Lib Classes ----
  class Lib_FancyFruit
  class Lib_GoodBread{
      +Double yeastAmount
  }
  Lib_FancyFruit *-- &quot;0..*&quot; Lib_GoodBread : breads
  class Lib_SeasideManor
  class Lib_LiberalSpice{
      +String currentFlavor
  }
  Lib_SeasideManor *-- &quot;0..*&quot; Lib_LiberalSpice : spicesAllAround
  class Lib_PrimeCurrents
  class Lib_GardenFresh
  Lib_GardenFresh *-- &quot;0..*&quot; Lib_PrimeCurrents : currentCurrents
  class Lib_RepeatingHistory
  class Lib_TranslationInformation
  class Lib_HistoryLayerAgain
  Lib_RepeatingHistory *-- &quot;0..*&quot; Lib_TranslationInformation : recentHistory
  Lib_TranslationInformation *-- &quot;0..*&quot; Lib_HistoryLayerAgain : anotherTranslationInformation
  %% ---- Interfaces ----
  class HappinessSadnessDisplay{
      &lt;&lt;interface&gt;&gt;
      ~String formattedCurrentThings
      ~Date onceDate
      ~String formattedDayDate
      ~String goryDetail
      ~String firstName
      ~Bool workComplete
      ~Bool appointmentScheduled
  }
  class RedTrainSchedule{
      &lt;&lt;interface&gt;&gt;
      ~Double dailyCrayonsDue
      ~Bool willBeOnTimeToday
      ~createFreightTrainRailLine() FreightTrainRailLine
  }
  %% ---- Enums ----
  class Pill{
      &lt;&lt;enumeration&gt;&gt;
      reallyOval
      circularizedKind
  }
  %% ---- Main Classes ----
  class WanderingMan
  WanderingMan o-- &quot;1&quot; Lib_LiberalSpice : spice
  WanderingMan o-- &quot;0..1&quot; Pill : pill
  WanderingMan o-- &quot;0..1&quot; Lib_GardenFresh : gardenAccounts
  WanderingMan o-- &quot;0..1&quot; PoliteHamAction : hamStory
  WanderingMan o-- &quot;0..1&quot; PoliteHamAction : scheduledPorkchops
  WanderingMan o-- &quot;0..1&quot; Lib_GoodBread : unwrappedBread
  WanderingMan ..|&gt; RedTrainSchedule
  WanderingMan ..|&gt; HappinessSadnessDisplay
  class PoliteHamAction{
      ~String porkNumber
  }
  PoliteHamAction o-- &quot;1&quot; Lib_HistoryLayerAgain : actionLayerDetail
  </code></pre>