Excalidraw与Typst结合：学术绘图新组合
在撰写技术文档、论文或系统设计说明书时，你是否曾为一张架构图反复调整数小时？是否因为团队成员无法协同编辑TikZ代码而延误交付？又或者，看着LaTeX生成的规整图表，总觉得少了点“人味儿”？
这些问题的背后，其实是传统学术绘图工具链的深层矛盾：表达的自由度与排版的严谨性难以兼顾。直到最近，一个轻量却极具潜力的新组合悄然浮现——Excalidraw + Typst。它不追求取代专业工具，而是重新定义了“高效且富有表现力”的技术写作流程。
Excalidraw并不是第一个在线白板工具，但它可能是目前最适合作为技术草图协作平台的存在。它的核心魅力在于“看起来像随手画的，实则结构清晰”。这得益于其底层对图形语义的保留能力：你在画布上拖出的一个矩形，不只是像素点，而是一个带有ID、位置、样式和连接关系的对象。这种“结构化的手绘感”，让它既能用于非正式讨论，又能支撑正式出版物所需的精度。
更进一步的是，Excalidraw的数据模型完全开放。所有元素都以JSON格式存储，这意味着你可以用脚本批量生成图表，也可以通过版本控制系统（如Git）追踪每一次修改。比如，下面这段JSON描述了一个简单的客户端-服务器通信示意图：
{ "type": "excalidraw", "version": 2, "source": "excalidraw.com", "elements": [ { "id": "A1", "type": "rectangle", "x": 100, "y": 100, "width": 160, "height": 60, "strokeColor": "#000", "backgroundColor": "transparent", "roughness": 2, "fillStyle": "hachure" }, { "id": "B1", "type": "arrow", "points": [[180, 130], [300, 130]], "startArrowhead": null, "endArrowhead": "arrow" } ] }这里的roughness控制线条的“手绘抖动”程度，值越高越像真人执笔；fillStyle: "hachure"则启用交叉线填充，模仿纸面速写的阴影效果。这些参数让机器绘制的图形拥有了温度。
而且，这个JSON不仅可以被导入导出，还能作为自动化流程的一部分。设想一下，在CI/CD流水线中运行Python脚本，根据当前微服务配置自动生成最新的部署拓扑图，并自动更新文档引用——这才是真正的“基础设施即代码”延伸到可视化层面。
更令人兴奋的是AI功能的引入。当你输入“画一个包含用户、网关、认证服务和数据库的三层Web架构”，后端调用大模型解析意图，返回对应的JSON结构并渲染到画布上。虽然初稿可能不够完美，但已经节省了80%的起始时间。这种“自然语言→草图”的转换，正在改变我们构思复杂系统的节奏。
如果说Excalidraw负责“想得清楚”，那Typst的任务就是“写得漂亮”。
Typst不是另一个LaTeX克隆。它是从零开始为现代写作者设计的排版引擎，语法简洁如Markdown，输出质量媲美LaTeX，编译速度却快了一个数量级——这一切得益于其Rust实现的核心和声明式布局模型。
更重要的是，Typst原生支持SVG嵌入，无论是作为文件引用还是内联代码，都能无缝整合外部图形资源。这就为接入Excalidraw提供了天然通道。你可以这样写：
#image("diagram.svg", width: 100%)也可以直接把SVG内容塞进文档：
#svg( width: 80%, content: [ <svg viewBox="0 0 400 200" xmlns="http://www.w3.org/2000/svg"> <rect x="50" y="50" width="100" height="50" fill="none" stroke="black" /> <text x="60" y="80">Client</text> <line x1="150" y1="75" x2="250" y2="75" stroke="black" marker-end="url(#arrow)" /> <rect x="250" y="50" width="100" height="50" fill="none" stroke="black" /> <text x="260" y="80">Server</text> </svg> ] )两种方式各有优势：前者适合已完成的设计，便于团队分工；后者则可用于动态图表，比如结合变量生成不同规模的网络拓扑。
Typst的强大还体现在它的条件逻辑和模块化能力。例如，你可以定义一个函数来统一插入所有架构图，并自动添加题注和编号：
#let insert-figure(path, caption) = { #figure( image(path), caption: caption ) } // 使用 #insert-figure("fig-architecture-overview.svg", "系统整体架构")当整个项目中的图表都遵循这一模式时，风格一致性就不再是靠自觉维护，而是由代码强制保障。
这套工作流的实际运转是这样的：
- 某位工程师提出需要一张新的API调用流程图；
- 团队进入Excalidraw共享房间，边讨论边绘制，利用AI快速拉出基础组件；
- 完成后导出为SVG和原始JSON，提交至Git仓库；
- 文档作者在Typst文件中引用该SVG，加入说明文字；
- 运行
typst compile main.typ，即时生成PDF预览； - 若后续架构变更，只需回到Excalidraw修改并重新导出，再次编译即可同步更新。
整个过程实现了三个关键突破：
- 图文同步：不再有“文档里的截图早已过时”的尴尬。所有图表都是可追溯、可版本控制的一等公民。
- 协作无门槛：设计师、开发、产品经理都可以在同一块画布上协作，无需懂TikZ或Inkscape。
- 风格可控：既保留手绘的亲和力，又通过Typst确保最终输出的专业质感。
我在实际使用中发现，最大的收益其实来自心理层面：人们更愿意参与绘图了。以前让同事帮忙改个LaTeX TikZ片段，往往石沉大海；现在发个Excalidraw链接，几分钟内就有反馈。工具的情绪成本，有时比学习成本更致命。
当然，也有一些细节需要注意。比如导出SVG时要关闭背景色，保证透明底图；字体建议统一为Inter这类现代无衬线体，避免Virgil手写字体与正文冲突；文件命名也要规范，如fig-auth-flow.svg明确标识用途。
更有意思的是扩展可能性。对于标准模板图（如Kubernetes部署图、OAuth流程），完全可以编写脚本调用Excalidraw API批量生成JSON，再注入Typst文档。未来甚至可以构建一个“文档即服务”系统：输入一段YAML配置，自动生成包含图表的技术说明书。
我们正处在一个技术写作范式迁移的节点上。过去，高质量文档意味着沉重的工具负担和漫长的迭代周期；而现在，模块化、开放格式与智能辅助正在重塑整个链条。
Excalidraw与Typst的结合看似简单，实则代表了一种新型工作哲学：让创意在自由环境中生长，再用工程化手段固化成果。它不要求你精通每一项技术，而是鼓励你组合最佳工具，形成个性化的高产流程。
也许几年后，“用自然语言描述需求，自动生成完整文档”将成为常态。但在那一天到来之前，Excalidraw + Typst 已经为我们提供了一个足够强大又足够轻盈的起点——既能快速涂鸦灵感，也能交付印刷级成品。这才是真正属于当代技术人的笔与纸。
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
