draw.io如何实现文本竖向排列？

Question

在使用 draw.io（现称 diagrams.net）绘制流程图或架构图时，用户常遇到“如何实现文本竖向排列”的问题。尤其是在绘制垂直泳道图、组织结构图或需要节省横向空间时，竖向文本能显著提升可读性与布局美观。然而，draw.io 默认不直接提供“垂直文字”按钮，导致初学者难以找到正确操作路径。常见疑问包括：是否需手动旋转文本框？能否让文字在矩形形状内自动垂直排列？是否支持中文竖向显示且不出现乱码或断行异常？此外，部分用户尝试通过角度旋转实现竖排文本，却发现文字方向颠倒或对齐错乱。因此，如何在保持编辑灵活性的前提下，精准控制文本的垂直排列方式，成为实际使用中的高频技术难题。

Answer 1

在 diagrams.net（原 draw.io）中实现文本竖向排列的深度解析

1. 问题背景与核心挑战

在绘制垂直泳道图、组织结构图或资源受限的横向布局时，文本的竖向排列成为提升可读性与空间利用率的关键手段。然而，diagrams.net 并未提供“垂直文字”按钮，用户常误以为需通过外部工具预处理文本或依赖复杂插件。

实际使用中，常见疑问包括：

• 是否必须手动旋转每个文本框？
• 能否让文字在矩形形状内自动垂直堆叠？
• 中文竖排是否会出现字序错乱或断行异常？
• 旋转后文字方向颠倒，如何纠正？
• 是否支持混合排版（部分横排 + 部分竖排）？

2. 基础实现方式：利用角度旋转控制文本方向

最直接的方法是通过设置文本旋转角度来实现竖向排列。操作路径如下：

1. 选中目标形状（如矩形）；
2. 在右侧格式面板中切换至“文本”选项卡；
3. 找到“旋转”字段，输入 90 或 -90 度；
4. 调整“垂直对齐”和“水平对齐”以优化位置；
5. 若文字颠倒，尝试使用 270 度替代。

此方法适用于单个标签或标题，但批量应用时效率较低。

3. 进阶技巧：结合样式代码批量控制文本方向

对于需要统一管理多个竖排文本的场景，可通过自定义单元格样式实现自动化配置。

属性名	值示例	说明
textRotation	90	顺时针旋转90度
textRotation	-90	逆时针旋转90度
verticalAlign	middle	垂直居中对齐
align	center	水平居中对齐
whiteSpace	wrap	允许自动换行
fontFamily	Simsun, serif	推荐使用支持中文竖排字体
fontSize	12	避免过小导致显示模糊
spacingTop	20	补偿旋转后的顶部留白
spacingLeft	10	左侧间距微调
html	1	启用HTML渲染以支持高级格式

4. 中文竖向显示兼容性分析

中文在竖排时面临两个主要问题：字符顺序与断行逻辑。diagrams.net 使用浏览器渲染引擎，默认按拉丁语系规则处理文本流。

解决方案建议：

• 使用 <br> 手动分隔汉字，模拟传统竖排效果；
• 选择支持垂直布局的字体，如“SimSun”、“NSimSun”或“KaiTi”；
• 禁用自动换行（whiteSpace=nowrap），防止系统错误拆分词语；
• 测试不同导出格式（PNG/SVG/PDF）下的渲染一致性。

5. 可视化流程：构建竖排文本应用逻辑

```mermaid
graph TD
    A[开始] --> B{是否为中文文本?}
    B -- 是 --> C[选择SimSun等中文字体]
    B -- 否 --> D[使用Arial或Helvetica]
    C --> E[设置textRotation = -90]
    D --> E
    E --> F[调整verticalAlign与align]
    F --> G[检查导出效果]
    G --> H{是否出现乱码?}
    H -- 是 --> I[更换字体或缩小字号]
    H -- 否 --> J[完成]
    I --> J
```
    

6. 实战案例：垂直泳道图中的标签优化

在 BPMN 风格的垂直泳道图中，泳道名称常需竖向排列以节省横向空间。推荐做法：

1. 创建矩形作为泳道容器；
2. 双击输入名称，如“财务部”；
3. 在“文本”面板设置：textRotation=-90, align=center, verticalAlign=middle；
4. 调整宽度至刚好容纳最长文本的高度；
5. 复制样式到其他泳道以保持一致性；
6. 使用“格式刷”工具快速应用；
7. 导出前预览SVG模式下字体嵌入情况；
8. 必要时将文本转为路径以确保跨平台显示一致；
9. 考虑添加辅助线标记原始基线位置；
10. 建立模板库供团队复用。