Mermaid类图在GitLab中仅横向拉伸、direction参数失效如何解决

问题根因 #

你遇到的类图强制横向拉伸、direction参数不生效的问题，核心有两个原因：

• 你当前使用的Mermaid版本中，类图的direction全局参数优先级低于渲染引擎的自动布局规则，独立无关联的类分组会被默认横向平铺排布
• 没有对逻辑上属于同一分组的类做封装，引擎识别到多个独立零散的类组合，会自动横向排列所有分组来减少纵向高度，导致整体被拉宽。

解决方法 #

1. 最开头加上Mermaid全局初始化指令，强制指定布局方向，优先级高于普通的direction参数
2. 用namespace把逻辑同组的类封装起来，渲染引擎会把同一个命名空间内的元素当成一个整体块，优先纵向堆叠不同的命名空间块
3. 调整关联关系声明顺序，优先声明核心类，再声明关联的从属类，引导引擎从上到下排布核心节点。

修改后的可正常纵向排布的代码： #

%%{init: {'classDiagram': {'direction': 'TB'}, 'theme': 'default'}}%%
classDiagram
%% ---- Lib Classes 分组 ----
namespace Lib工具类 {
    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
}
%% ---- 接口分组 ----
namespace 接口定义 {
    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
    }
}
%% ---- 枚举分组 ----
namespace 枚举定义 {
    class Pill{
        <<enumeration>>
        reallyOval
        circularizedKind
    }
}
%% ---- 业务主类分组 ----
namespace 业务核心类 {
    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
}

修改后渲染时会先纵向排布四个命名空间块，每个块内部再按TB方向布局，不会再出现整体横向拉伸、文字缩小的问题。

内容的提问来源于stack exchange，提问作者Jeff