原生的 draw.io 绘图软件不支持很好的中英文混排, 其只支持设置一种默认字体, 而无法做到为中英文都设置各自的默认字体. 因此在绘制字体要求较为严格的图片时(如宋体 + Times New Roman), 会带来很多不必要的麻烦. 因此, 本文使用 draw.io 支持的自定义插件方式, 自动化中英文混排时的字体设置问题.
前言与背景
draw.io 是一款免费的在线绘图工具, 由于其主要使用 JS 编写, 因此可以很容易地使用 electron 移植到 Linux 桌面软件上, 加上其功能看上去尚且较为完善, 且经过了一个博士师兄的认可, 最终选择暂时使用该软件进行各种图形的绘画.
不过由于其样式设置仅支持一种字体, 经过测试使用 , 连接两种字体也无济于事:
解决方案
draw.io 支持用户自定义一段 JS 插件代码来进行自动化的字体检测与设置, 因此使用该插件方案自动检测所有的元素, 当出现中英文混排时使用内置的 span 标签, 为对应的字符串设置相应的字体.
插件文件代码如下, powered by Claude 3.7 Sonnet Extended, debugged by rqdmap.
允许外部拓展
默认的 draw 桌面应用出于安全原因不支持外部代码拓展, 需要为程序添加 --enable-plugins 参数以启用外部拓展.
加载拓展
分 draw.io 的两种使用方式来看:
-
对于 Web 应用来说, 直接将脚本放在 F12 控制台中即可, 调试起来也更加方便, 可以通过
console.log打印信息到控制台, 但是缺点是无法持久化插件, 每次都需要手动塞进去- 此外, Web 端的应用在导出 PDF 格式时, 会出现字体格式变化等问题, 具体就我所观测到的是, 加粗的宋体字体在 Web 端导出后, 加粗格式消失, 但换用桌面段则可以正常导出, 疑似也是与浏览器的字体配置/功能等问题相关.
-
对于桌面应用来说, 脚本是通用的(
electron 是方便的), 在 其他->插件 中导入该插件文件即可, 之后即可持久化加载该插件-
理论上是可以持久化的, 但是桌面端有 bug: 加载插件后, 前一两次可以正常加载, 后续就无法正常加载了.. 尝试了半天, 包括切换到 draw.io 版本为最新版, 都不行, 也没有很好的调试办法.. 甚至也有一个相关的issue: Adding custom plugin does not load in future sessions after first use of plugin. · Issue #1993 · jgraph/drawio-desktop 期待修复ing..
-
桌面应用调试插件较为困难, 看不到 log 信息, 插件的删除和加载也有 bug, 在调试阶段还是使用 Web 会容易一些.
-
总体来看确实 draw.io 项目是 bug 多多的, 但是也可能间接说明了其复杂程度.. 难怪官方 contributer 是不接受公开 pr 的, 也是第一次看到开源项目的此类声明…
draw.io is closed to contributions (unless a maintainer permits it, which is extremely rare).
The level of complexity of this project means that even simple changes can break a lot of other moving parts. The amount of testing required is far more than it first seems. If we were to receive a PR, we’d have to basically throw it away and write it how we want it to be implemented.
部署结果
