打开一个网站，网站你看到的模块首页、导航栏、结构按钮，网站背后全是模块模块在支撑。结构图画得清不清楚，结构直接决定开发时会不会打架。网站我见过一个电商项目，模块前端把购物车塞进用户中心模块，结构后端却把购物车挂在订单系统下，网站两边联调时接口对不上，模块白白耗了三天。结构这就是网站结构图没定好的代价。

网站功能模块结构图，模块说白了就是结构把整站拆成一个个能独立干活又互相通气的小单元，再用线连起来。它不是给老板看的装饰画，是给产品、前端、后端、测试四个人同时看的地图。画法没有绝对标准，但逻辑必须一条线走到底。

先分大类，再拆细项

最顶层通常按用户角色或业务域切。比如一个内容站，可以切成“访客模块”“注册用户模块”“编辑后台模块”“系统管理模块”。访客模块下面再挂文章浏览、搜索、评论；注册用户模块挂收藏、点赞、个人资料。每个叶子节点对应一个具体页面或一组接口。别一上来就画几十个框，先分四到六个一级模块，再往下钻。

我习惯用颜色区分模块的归属。前端模块用蓝色，后端服务用绿色，第三方对接用灰色。这样一眼就能看出哪些模块需要联调，哪些只是内部调用。Visio、Draw.io、甚至PPT都能画，工具不重要，重要的是每个框里写清楚模块名和核心职责，别只写“用户模块”四个字——要写成“用户模块：登录注册、资料编辑、密码找回”。

数据流比层级更重要

很多人画结构图只画树状层级，忽略了模块之间的数据流向。结果开发时发现，评论模块要调用户模块的头像，用户模块又要调消息模块的通知，绕成一团。正确做法是在结构图旁边加箭头，标出“谁调用谁”“谁给谁传数据”。比如“订单模块 → 支付模块：传递订单号与金额”“支付模块 → 订单模块：回传支付状态”。箭头方向别画反，否则后端会骂人。

还有一个坑：公共模块别重复画。像“权限校验”“日志记录”“文件上传”这类功能，很多模块都要用，就在结构图底部单独拉一个“公共服务层”，所有需要它的模块用虚线连过去。否则每个模块里都塞一个“权限”子框，图会乱成毛线团。

画完要能直接对应代码目录

好的结构图，前端工程师看一眼就知道该建哪些文件夹。比如“商品模块”下面有“列表页”“详情页”“搜索组件”，那代码目录里就是 /src/modules/product/ 下面分 list.vue、detail.vue、search.vue。后端同理，/services/product/ 下面放控制器、服务层、数据访问层。如果结构图和代码目录对不上，说明图是画给别人看的，不是给自己用的。

我见过最离谱的结构图，把“首页轮播图”和“用户登录”画在同一层级，问为什么，答曰“都在首页上”。这就是没按功能逻辑分，按页面位置分了。轮播图属于内容展示模块，登录属于用户认证模块，两者八竿子打不着。画图时多问一句“这个功能坏了，会影响谁”，答案就是它的模块边界。

最后说个实在的：结构图不是画完就锁进柜子。每次加新功能，先在图里找位置——是挂到现有模块下，还是新开一个一级模块？改完图再动手写代码。坚持三个月，你会发现联调时间少了一半。图不用漂亮，但每条线都得有理由。