一、竖排文字的技术背景与需求场景

在Smart架构图（通常指基于智能算法或自动化工具生成的架构可视化图形）中，竖排文字的需求常见于以下场景：

1. 东方文化适配：中文传统排版中，竖排常用于标题、注释或强调性内容，尤其在涉及传统文化、古籍风格或特定设计语言的架构图中。
2. 空间优化：在横向空间受限的架构图中（如窄幅流程图、时间轴图），竖排可提升信息密度。
3. 视觉层次：通过竖排文字与横排内容的对比，强化关键节点的视觉区分度。

技术实现的核心挑战在于：如何让自动化工具（如SmartDraw、Lucidchart、自定义绘图库等）支持中文字的垂直旋转与布局适配。以下从工具链角度展开分析。

二、主流工具中的竖排实现方案

1. 基于CSS的Web端架构图工具

对于使用HTML/CSS渲染的架构图工具（如基于D3.js、SVG.js的自定义绘图库），竖排可通过CSS的writing-mode属性实现：

.vertical-text {
  writing-mode: vertical-rl; /* 从右到左竖排 */
  text-orientation: mixed; /* 保持中文直立 */
  transform: rotate(180deg); /* 可选：调整文字方向 */
}

关键点：

• vertical-rl：垂直从右到左排列，符合中文古籍习惯。
• text-orientation: mixed：确保中文保持直立，避免字母或数字倾斜。
• 兼容性：需测试Chrome、Firefox、Safari等浏览器的支持情况，部分旧版本可能需要前缀（如-webkit-writing-mode）。

2. 设计工具导出后的二次处理

若架构图通过Adobe Illustrator、Sketch等设计工具生成，竖排文字可通过以下步骤实现：

1. 创建文本框：输入中文内容后，选择“垂直文本工具”（Illustrator中需从工具栏调用）。
2. 调整对齐：在“字符”面板中设置对齐方式为“居中”，避免文字偏移。
3. 导出为SVG：确保导出时勾选“将文本转换为轮廓”，避免字体缺失问题。
4. 嵌入Smart工具：将SVG导入Smart架构图工具时，需检查是否保留了文本的垂直属性（部分工具可能自动转换为横排）。

3. 代码生成架构图的动态适配

对于通过代码（如Python的Matplotlib、Graphviz）生成架构图的场景，竖排需结合文本旋转与布局调整：

示例：Matplotlib中的竖排实现

import matplotlib.pyplot as plt
fig, ax = plt.subplots()
# 横排文本（基准）
ax.text(0.5, 0.5, "横排示例", ha='center', va='center', fontsize=12)
# 竖排文本：通过旋转实现
for i, char in enumerate("竖排示例"):
    ax.text(0.7, 0.5 - i*0.1, char, ha='center', va='center', 
            rotation=90, fontsize=12)  # 每个字符旋转90度
plt.axis('off')
plt.show()

优化方案：

• 使用textpath模块或自定义函数批量处理字符串，避免逐字符旋转。
• 结合transform属性实现整体旋转，例如：

  ax.text(0.7, 0.5, "竖排示例", ha='center', va='center', 
          rotation=90, fontsize=12, rotation_mode='anchor')

示例：Graphviz中的竖排实现

Graphviz默认不支持竖排，但可通过以下方式模拟：

1. 使用HTML标签：Graphviz的DOT语言支持HTML标签，可嵌入<BR>和旋转属性：

   digraph G {
     node [shape=box];
     A [label=<
       <TABLE BORDER="0" CELLBORDER="1" CELLSPACING="0">
         <TR><TD ALIGN="CENTER"><B>竖<BR>排<BR>示<BR>例</B></TD></TR>
       </TABLE>
     >];
   }

2. 输出为SVG后处理：通过脚本（如Python的lxml库）修改SVG中的transform属性。

三、自动化工具中的竖排适配技巧

1. SmartDraw/Lucidchart等商业工具

• 内置竖排功能：部分工具（如SmartDraw）提供“文本方向”选项，可直接选择竖排。
• 快捷键操作：选中文本框后，按Alt+↓（示例快捷键，需根据工具调整）切换方向。
• 导出检查：导出为PDF或图片时，确认竖排文本未被转换为位图（避免模糊）。

2. 自定义绘图库的通用方案

对于基于Canvas或WebGL的自定义绘图库，竖排需实现以下逻辑：

1. 计算字符位置：根据文本宽度和行高，逐字符定位。
2. 旋转矩阵：应用2D旋转矩阵（如rotate(90deg)）调整文字方向。
3. 性能优化：对长文本使用离屏渲染（Offscreen Canvas）减少重绘开销。

四、常见问题与解决方案

1. 文字方向错误

• 现象：竖排后文字倒置或方向不一致。
• 原因：未正确设置text-orientation或旋转中心点。
• 解决：
  • CSS中添加text-orientation: upright（部分浏览器需前缀）。
  • 代码中调整旋转原点（如Matplotlib的rotation_mode='anchor'）。

2. 字体显示异常

• 现象：竖排后字体缺失或显示为方框。
• 原因：导出时未嵌入字体，或工具不支持中文字体。
• 解决：
  • 设计工具中勾选“嵌入字体”。
  • 代码中使用系统默认中文字体（如"Microsoft YaHei"）。

3. 布局错乱

• 现象：竖排文本与其他元素重叠。
• 原因：未预留足够的垂直空间。
• 解决：
  • 动态计算文本高度（如通过getBBox()在SVG中获取尺寸）。
  • 调整架构图的边距或使用自动布局算法。

五、最佳实践建议

1. 优先使用CSS方案：对于Web端架构图，CSS的writing-mode是最高效的实现方式。
2. 设计工具导出前检查：确保SVG/PDF中保留了文本的垂直属性。
3. 代码生成时模块化：将竖排逻辑封装为函数（如drawVerticalText(x, y, text)），提升复用性。
4. 测试多平台兼容性：在目标环境中验证竖排效果（如移动端、不同浏览器）。

六、总结

在Smart架构图中实现中文字竖排，需根据工具类型选择合适的技术路径：Web端优先使用CSS属性，设计工具依赖内置功能或二次处理，代码生成方案需结合旋转与布局算法。通过验证兼容性、优化字体嵌入和动态调整布局，可确保竖排文字在自动化架构图中的稳定呈现。