1. 为什么在 VSCode 里画 UML 会卡在竖排文本上在 VSCode 里用 Drawio 插件画 UML最常被忽略的一个细节就是文本方向。类图里属性名太长、时序图里参与者名字太宽、部署图里节点标签想省横向空间这时候竖排文本就派上用场了。但很多人第一次操作会发现明明把文本框转了 90 度文字却还是横着的或者文字跟着转了但整个框歪得没法对齐再或者导出 PNG 之后竖排文字直接变成乱码方块。这个问题的本质是 Drawio 的文本方向有两套逻辑一套是形状自身的旋转角度另一套是文本的书写方向。你只转形状文本默认还是水平排版你只改文本方向形状的宽高又不会自动适配。UML 建模对对齐和间距要求比普通流程图高得多类图的属性区、时序图的生命线标签、用例图的椭圆文字一旦竖排没设好整张图的可读性就崩了。我试过在 VSCode 的 Drawio 插件里反复调这两个参数最后总结出一套可复制的配置方式。这篇就围绕 VSCode Drawio 插件这个组合把竖排文本在 UML 类图、时序图里的设置步骤、settings.json 骨架、以及验证是否生效的方法讲清楚。适合已经在用 VSCode 做 UML 建模、但被文本方向卡住的开发者也适合想把 Drawio 在线操作迁移到本地插件的人。核心检索词先摆出来Drawio 设置竖排文本在 VSCode 插件里通过形状旋转加文本方向双参数控制UML 建模时对类图属性、时序图标签尤其有用。下面从环境准备讲到验证排障每一步都能直接跟做。2. TaoToken 前置给 UML 建模配一个稳定的模型对话入口画 UML 本身不需要模型但实际建模过程中经常要查语法、让模型帮你把需求转成类图结构、或者解释一段 PlantUML 和 Drawio 的差异。这时候有个顺手的模型对话入口会省很多事。TaoToken 提供的就是这样一个入口官网在 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content API 地址是 https://taotoken.net/api 注意 API 这个地址不加 UTM 参数。它的定位不是替代 VSCode 或 Drawio而是当你在建模时遇到「这个关联关系该用聚合还是组合」「时序图的消息编号怎么写」这类问题时能快速开一个对话问清楚。对于长期做 UML 建模和 Agent 编码的人Coding Plan 更适合把模型能力接进日常流程入口在 https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding-planutm_campaignrewrite 。如果你只是想验证某个模型对 UML 语法的理解可以直接用模型对话页面https://taotoken.net/model-chat?utm_sourcetaotoken_aicg_blog_endutm_contentmodel-chatutm_campaignrewrite 。需要自己写脚本调用时去控制台和 API Keys 页面拿凭证控制台 https://taotoken.net/console?utm_sourcetaotoken_aicg_blog_endutm_contentconsoleutm_campaignrewrite API Keys https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi-keysutm_campaignrewrite 。接入文档在 https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewrite Claude Code 相关的 Anthropic 配置参考 https://taotoken.net/claudecode-anthropic?utm_sourcetaotoken_aicg_blog_endutm_contentclaudecode-anthropicutm_campaignrewrite 。这一节的作用是当你在第 3 节配置 Drawio 插件、第 5 节排查竖排文本不生效时如果怀疑是 UML 语法或结构问题可以随时开一个模型对话对照确认。它不参与 Drawio 的渲染但能帮你少走弯路。3. 可复制配置VSCode Drawio 插件与 settings.json 骨架3.1 插件安装与文件关联在 VSCode 扩展市场搜索 Drawio Integration安装后它会把.drawio、.dio文件识别为可编辑的图形文件。安装完成后建议先确认版本因为竖排文本相关的文本方向属性在不同版本里行为略有差异。打开命令面板执行code --list-extensions --show-versions | grep -i drawio预期输出类似hediet.vscode-drawio1.8.0。版本低于 1.6 的建议升级否则textDirection属性可能不生效。3.2 settings.json 配置骨架VSCode 的 Drawio 插件本身不直接控制文本方向文本方向是写在 Drawio 图形文件里的样式属性。但插件有几个和编辑体验相关的配置值得先固定下来避免每次打开都重置。在 VSCode 的settings.json里加入{ hediet.vscode-drawio.theme: dark, hediet.vscode-drawio.codeLinkActivated: true, hediet.vscode-drawio.customFonts: [ JetBrains Mono, Consolas, Microsoft YaHei ], hediet.vscode-drawio.globalVars: { umlFontSize: 12, umlFontFamily: Microsoft YaHei }, editor.fontFamily: JetBrains Mono, Consolas, Microsoft YaHei, editor.fontSize: 13 }这里customFonts和globalVars是关键。UML 图里中文竖排如果字体不支持会出现方块或错位把中文字体加进 customFonts 能减少这类问题。globalVars里的umlFontSize和umlFontFamily可以在 Drawio 图形里通过%umlFontSize%引用统一类图属性区的字号。3.3 竖排文本的核心样式参数Drawio 里实现竖排文本靠的是形状样式里的两个属性组合horizontal0控制文本书写方向directionnorth/south控制文本旋转方向。在 VSCode 插件里你可以选中形状后按CtrlShiftP打开命令面板执行Drawio: Edit Style直接粘贴样式字符串。一个类图属性区的竖排文本框样式如下shaperectangle;whiteSpacewrap;html1;horizontal0;directionnorth;fontSize12;fontFamilyMicrosoft YaHei;aligncenter;verticalAlignmiddle;strokeColor#6c8ebf;fillColor#dae8fc;关键参数对照表参数取值作用horizontal0 / 10 表示文本竖排1 表示横排directionnorth / south / east / west文本旋转方向north 是从下往上读whiteSpacewrap允许文本换行竖排时配合宽度控制aligncenter文本在形状内水平对齐verticalAlignmiddle文本在形状内垂直对齐fontFamilyMicrosoft YaHei中文字体避免竖排乱码注意horizontal0和directionnorth必须同时设置。只设horizontal0文本会竖排但方向可能反了只设directionnorth形状会转但文本还是横的。这是最容易踩的坑。3.4 时序图生命线标签的竖排配置时序图里参与者名字如果很长横排会撑宽整张图。把参与者标签改成竖排样式如下shapeumlLifeline;participantumlActor;whiteSpacewrap;html1;horizontal0;directionnorth;fontSize11;fontFamilyMicrosoft YaHei;perimeterlifelinePerimeter;outlineConnect0;strokeColor#9673a6;fillColor#e1d5e7;这里shapeumlLifeline是 Drawio 内置的时序图生命线形状加上horizontal0;directionnorth后参与者名字会从下往上竖排显示生命线本身不受影响。宽度建议设成 30 到 40 像素太窄文字会挤太宽又失去竖排省空间的意义。4. 验证请求在 UML 图里确认竖排文本真的生效4.1 新建一个类图验证文件在 VSCode 里新建uml-vertical-test.drawio用 Drawio 插件打开。先拖一个矩形双击输入「用户服务类」然后按CtrlShiftP执行Drawio: Edit Style粘贴 3.3 节的样式字符串。确认后你会看到文字变成从下往上竖排。如果文字还是横的检查两点一是样式里有没有分号结尾Drawio 样式字符串必须以分号结束二是horizontal的值是不是被写成了horizontal0而不是horizontal:0Drawio 用等号不用冒号。4.2 用 XML 源码直接验证Drawio 文件本质是 XML你可以右键选择Open With然后选Text Editor直接看源码里有没有写入样式。一个生效的竖排文本框在 XML 里长这样mxCell id2 value用户服务类 styleshaperectangle;whiteSpacewrap;html1;horizontal0;directionnorth;fontSize12;fontFamilyMicrosoft YaHei;aligncenter;verticalAlignmiddle; vertex1 parent1 mxGeometry x120 y80 width40 height160 asgeometry/ /mxCell注意width40 height160竖排文本的宽高比和横排是反过来的。如果你只改样式不改宽高文字会溢出形状。这是第二个高频坑。4.3 导出验证按CtrlShiftP执行Drawio: Export导出为 PNG 或 SVG。打开导出文件确认竖排文字没有变成方块、没有旋转错位。如果导出后文字方向变了多半是字体没嵌入回到 3.2 节把customFonts里的中文字体确认一遍。4.4 用模型对话辅助验证 UML 结构如果你不确定某个竖排标签在 UML 语义上是否合理比如时序图里参与者竖排后消息箭头是否还对得齐可以开一个模型对话把结构描述一遍让它帮你检查。入口用 https://taotoken.net/model-chat?utm_sourcetaotoken_aicg_blog_endutm_contentmodel-chatutm_campaignrewrite 把类图或时序图的元素关系贴进去问它竖排标签是否影响可读性。这一步不是必须但在复杂图里能省不少返工。5. 本篇常见错排查5.1 文字竖排了但方向反了现象文字从下往上读变成从上往下读或者左右颠倒。原因是direction取值不对。north是从下往上south是从上往下east和west是水平方向旋转。UML 类图属性区一般用north时序图参与者标签也用north。如果你要的是从上往下读改成directionsouth。5.2 竖排后文字溢出形状现象文字超出矩形边界或者被截断。原因是宽高没跟着调整。竖排文本的形状宽度应该约等于字号加内边距高度应该约等于文字长度。一个 12 号字、6 个字的竖排标签宽度设 30 到 40高度设 100 到 120 比较合适。在 VSCode 插件里选中形状后直接拖拽控制点调整或者右键Edit Data改mxGeometry的 width 和 height。5.3 导出后竖排文字变方块现象VSCode 里显示正常导出 PNG 后中文变方块。原因是导出时用的字体和编辑时不一致。解决办法是在settings.json的customFonts里把中文字体放在第一位并且在 Drawio 样式里显式写fontFamilyMicrosoft YaHei。如果还是不行导出时选 SVG 而不是 PNGSVG 对字体回退处理更好。5.4 样式粘贴后没反应现象执行Drawio: Edit Style粘贴样式后形状外观没变化。检查三点样式字符串末尾有没有分号horizontal和direction有没有拼错当前选中的是不是形状本身而不是形状里的文本。在 Drawio 里双击进入文本编辑状态时改样式是无效的必须先按Esc退出文本编辑再选形状。5.5 时序图生命线竖排后箭头错位现象参与者标签竖排后消息箭头起点对不上生命线。原因是生命线的perimeter参数在竖排后计算方式变了。解决办法是保持perimeterlifelinePerimeter不变同时把生命线形状的宽度固定为 30 到 40不要用自适应宽度。如果还是错位把参与者标签单独做成一个竖排文本框放在生命线顶部而不是直接改生命线形状的文本方向。5.6 接入层报错怎么定位如果你在 VSCode 里通过脚本调用模型来辅助生成 Drawio XML遇到 401 或 403先去 API Keys 页面确认 key 状态https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi-keysutm_campaignrewrite 。接入参数和错误码对照看文档https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewrite 。如果是 Claude Code 相关的 Anthropic 配置问题参考 https://taotoken.net/claudecode-anthropic?utm_sourcetaotoken_aicg_blog_endutm_contentclaudecode-anthropicutm_campaignrewrite 。这一节只做排障分流不展开注册流程。6. 长期建模的配置沉淀与入口选择竖排文本只是 Drawio UML 建模里的一个小点但它的配置方式反映了 Drawio 的一个特点样式即配置所有视觉行为都写在 XML 的 style 字符串里。把常用的竖排样式存成 VSCode 代码片段或者写一个脚本批量给类图属性区加horizontal0;directionnorth比每次手动改效率高得多。如果你长期做 UML 建模和 Agent 编码建议把模型能力接进日常流程用 Coding Plan 统一管理https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding-planutm_campaignrewrite 。需要自己写脚本批量处理 Drawio XML 时控制台和 API Keys 是必经入口控制台 https://taotoken.net/console?utm_sourcetaotoken_aicg_blog_endutm_contentconsoleutm_campaignrewrite API Keys https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi-keysutm_campaignrewrite 。模型对话用于快速验证 UML 语义https://taotoken.net/model-chat?utm_sourcetaotoken_aicg_blog_endutm_contentmodel-chatutm_campaignrewrite 。接入文档和 Claude Code Anthropic 配置分别看 https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewrite 和 https://taotoken.net/claudecode-anthropic?utm_sourcetaotoken_aicg_blog_endutm_contentclaudecode-anthropicutm_campaignrewrite 。最后留一个实操建议把你项目里所有竖排文本框的样式抽成一个vertical-text.style文件放在仓库根目录每次新建 UML 图时直接复制粘贴。这样比记参数靠谱也比每次问模型快。