3.5 图形与可视化辅助装备
3.5 图形与可视化辅助装备
本节摘要：前端的"图"有两副面孔：作为资产的矢量图，与作为沟通手段的示意图。本节配三件辅助装备——矢量图代码预览、代码截图生成、编辑器内绘图白板，分别解决"改图看不见效果""给同事看代码不体面""随手画架构图要切外部工具"三类痛点。辅线装备，按场景选装，不必全上。
工位上总有那么一抽屉"杂项工具"：单说哪件都不是主角，缺了哪件又总在某个时刻硌手。前端工位里这一抽屉装的是图形类辅助：矢量图既是资产又是代码、给同事贴代码片段的方式五花八门、方案沟通时想画个框图还得打开外部画图软件。这一节清点这一抽屉，作为前端专区的收尾——主链（写、构、跑、看）已通，辅助链按需配齐。
矢量图预览：图就是代码
前端项目里的矢量图常常以源码形态存在——图标、插画直接是可编辑的标记文本。改一个路径坐标、调一处渐变，光看代码无从想象效果。矢量图预览装备在侧栏给出实时渲染：选中文件即出图，改动即刷新；多图可并排对照。更实用的进阶是"代码即图"的工作流：本册各章配的示意图走的正是这条路——图形以源码形式进仓库、随代码一起评审，渲染交给流水线。前端工位里这套工作流的日常版就是预览装备加版本控制：图源码化后，改图的 diff 变得可评审，这是位图资产永远做不到的。
代码截图：把代码体面地递出去
提问、写文档、做评审意见，经常要把一段代码"递"给别人看。直接复制粘贴丢失高亮与排版，截图又要靠系统截屏再裁剪。代码截图装备专治此事：选中代码、一条命令，生成一张带语法高亮、带窗口质感、可调内边距与背景的图片，直接进剪贴板。它的价值不在"能截图"，而在递出去的代码保持了工位的专业观感——配色统一、字距正常、上下文完整，接收方一眼能读。配置一份与团队文档风格统一的预设，胜过每人各自的即兴截屏。
绘图白板：方案沟通不切窗口
第三件是编辑器内绘图白板：手绘风的框图、流程图、示意草图，文件存在仓库里，与代码同版本演进。它填补的场景是"方案沟通的中途稿"——正式架构图有专门工具管，但讨论过程中的"我给你画一下"需要的是快：新建白板、拖几个框、连几条线、随手标注，文件存进仓库的文档目录。白板文件是文本格式，版本控制能看 diff，这也延续了"图源码化"的主线。
配置与联动
三件装备都是轻量级，配置面很小，值得写的集中在两处。预览装备的外部程序联动（默认浏览器打开大图）与白板的自动保存：
{ "svg.preview.mode": "svg", "excalidraw.workspaceFileBind": true, "excalidraw.autoSave": true }
白板的自动保存与工作区绑定尤其要开：草图画到一半切走再回来，图还在原位，这是"随手"的前提——任何需要"先保存一下"的工具都配不上草稿的即兴。
台面实测：一次方案沟通的三件套接力
拿一次真实的方案讨论看三件装备怎么接力。讨论主题是"新组件目录怎么组织"：先在白板上拖出目标结构草图，标注哪层放公共组件、哪层放业务组件——五分钟出稿，白板文件提交进仓库，与会者各自打开同一份草稿；讨论中需要引用现有代码里的一段目录工具函数，代码截图装备把那段函数连高亮截出，直接贴进讨论记录；定稿后涉及一个新图标资源，矢量源码进仓库，预览装备确认渲染无误。整个沟通链路没有一次打开外部画图工具或系统截屏。
坑点提醒
坑一，白板文件膨胀。 白板虽是文本格式，嵌入手绘轨迹后体积可观，仓库里要控制数量，过期草图定期清掉。坑二，截图泄密。 代码截图太方便，反而容易把内部信息随手截出去——截图前过一眼内容，敏感标识打码后再递。坑三，预览插件的安全面。 预览类装备会读取并渲染文件，来源不明的图形文件别在工作区里随便预览，这条安全线与 3.4 节的伺服边界、第 7 章的选型评估同源。
替代方案
矢量编辑的完整替代是专业矢量设计工具（功能全面但重），编辑器内预览只该承担"看与微调"；代码截图的替代是外部美化工具（粘贴代码生成图，效果相当但多一步切换）；白板的替代是专业画图软件（精致但慢）。这一抽屉装备的共同定位是"够用且不离开工位"——如果你发现自己天天在用它们干重活，那是该升级专用工具的信号，而不是编辑器装备的错。
常见疑问快答
问：矢量图的源码化管理，团队推广的成本高吗？答：第一步只是“把图形文件当文本文件入库”——版本控制天然支持，评审流程零改动。真正的成本在绘制习惯：设计师产出的位图与开发者手写的矢量源码之间需要一道转换约定。建议从“新增图形一律源码化”开始渐进，存量位图不强制迁移。
问：白板文件放仓库哪里合适？答：专门的文档目录、与正式文档同层但分文件夹（草稿区与成稿区分离）。命名带上日期或主题前缀，过期草稿的清理节奏与 2.3 节待办树的清点对齐——草稿不清理，仓库会变成垃圾抽屉。
问：代码截图装备会不会泄露敏感信息？答：风险真实存在——截图太方便，反而少了“贴出去之前看一眼”的摩擦。团队可以约定：截图默认打码敏感标识；涉及内部系统界面的截图走内部渠道。工具的便利要配纪律的清醒。
问：三件装备一件都不装，损失大吗？答：看你的“图形工作占比”。日常以业务逻辑为主、偶尔看图的工位，内置预览加系统截屏够用；但凡每周都要“画给同事看”的场景，这一抽屉装备的回报立现。辅线装备的采购原则从来是按场景，不按齐全。
问：这几件装备对非前端工位有参考价值吗？答：方法论层面有——“图源码化、沟通即文件、草稿进仓库”这三条原则适用于任何需要画图说话的工位：后端画链路图、运维画部署图，同样可以走矢量源码加白板草稿的组合。装备是前端的，章法是通用的。
问：白板画的图能不能升级成正式架构图？答：能，且路径顺滑——白板文件本身是结构化文本，把其中定稿的部分迁到正式图形工具里精修即可；更彻底的走法是矢量源码路线，草稿与成稿同一格式，升级只是“加约束”而不是“重画”。
收束与第二轮升级收官
前端专区的装备至此配齐：三件套小装备、框架适配器、构建接线、浏览器联动、图形辅助，一条流水线加一条辅助链。下一章转向工位的另一半——后端专区，从 Python 的整备开始。