如何调整Mermaid状态图布局适配屏幕与打印需求？

针对你的状态图横向过长、字体过小的问题，以下是几个可行的解决方案，兼顾打印和屏幕阅读需求：

1. 强制纵向布局并限制宽度 #

直接在Mermaid代码开头添加初始化配置，强制从上到下的纵向布局，并设置最大宽度适配屏幕和打印纸：

%%{init: {'maxWidth': 800, 'direction': 'TB', 'fontSize': 14}}%%
stateDiagram-v2
  # 你的状态图定义内容

• direction: TB：将布局从默认的横向（LR）改为纵向（从上到下），让图表优先纵向扩展
• maxWidth: 800：限制图表最大宽度为800像素，适配多数屏幕，打印时也能契合8.5×11英寸纸张的宽度（去掉边距后约8英寸=812像素）
• fontSize: 14：确保字体在屏幕和打印时都清晰可读

2. 拆分大型状态图 #

如果状态数量过多，直接纵向布局仍显拥挤，可将整体流程拆分为多个独立的子状态图，按逻辑模块划分（比如初始化流程、核心业务流程、异常处理流程），每个子图单独渲染，纵向排列在页面上：

• 屏幕端可通过上下滚动依次查看各模块
• 打印时可分页打印每个子图，保证内容完整且字体清晰

3. 用CSS强制容器宽度 #

在HTML页面中，给Mermaid的渲染容器添加CSS样式，强制限制宽度，让图表自动适配纵向布局：

.mermaid {
  max-width: 8in; /* 匹配8.5英寸纸张的可用打印宽度 */
  margin: 0 auto;
  overflow-x: hidden; /* 隐藏横向溢出，避免滚动 */
}

4. 优化状态分组与层级 #

通过状态分组功能，将相关状态归类到同一个组内，减少横向展开的层级，让布局更紧凑：

stateDiagram-v2
  state "用户操作模块" as UserOps {
    state A: 登录
    state B: 提交请求
  }
  state "系统处理模块" as SysProc {
    state C: 验证数据
    state D: 执行业务
  }
  UserOps --> SysProc

分组后图表的横向扩展会被限制，转而纵向排列各组，提升可读性。

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