架构可视化分析:从六维设计视角生成单文件架构图

前言

接手一个陌生仓库时,往往先看目录树,再找入口文件,然后靠注释和 README 拼出架构印象。这种人工读码的方式在小型项目里够用,面对中大型项目时问题就显现了:架构设计是否清晰、技术栈选型是否合理、安全与性能这类特殊设计有没有落到位,往往只能靠经验和零散记忆。

下面介绍的架构可视化分析(architecture-visualization-analysis)Skill,做的就是这件事:以系统架构设计师的视角,对指定项目做六维深度分析,再通过双渲染引擎把结果输出成一张可交互的单文件 HTML。它的价值不在于”画图”,而在于把架构判断结构化、可追溯、可交付。

这是什么

架构可视化分析是一个项目架构分析与可视化产物生成 Skill,坐标 @user_989eb8f0/tri-html,版本 1.5.0,来源 community,分类 dev-programming,由 user_989eb8f0 发布维护,官方地址为 https://www.skillhub.cn/skills/user_989eb8f0/tri-html。

它面向一个具体问题:如何把一个项目的架构设计(而不是代码实现细节)系统化地讲清楚,并产出一个能直接交付的可视化产物。输入是项目路径(默认当前项目),输出是一份单文件 HTML,中间经过六维分析、结构化诊断与修复回执。

核心功能

六维架构分析

分析视角固定为六维:架构设计、目录结构、技术栈选型、代码设计、功能设计、特殊设计(安全/性能等)。这一步先对项目做全面深度扫描,再进入可视化生成,避免只画目录树就当架构图。

双渲染引擎

产物由两条渲染通道生成:

  • 高精度 viewer 引擎:以 Typed JSON IR 为中间表示,经过确定性校验的 showcase 门禁后,生成单文件交互 HTML,包含五类视图:架构图、工作流、时序图、数据流、生命周期。交互能力包括深浅主题、聚焦、路径探查、角色透镜、故事播放,导出格式支持 PNG、SVG、WebM。
  • Mermaid 兼容模式:生成目录树、类图、ER 图、旅程图,适配已有 Mermaid 渲染链路的环境。

showcase 门禁与结构化诊断回执

viewer 引擎在渲染前经过确定性校验的 showcase 门禁,即产物必须先满足客观门槛才能输出,而不是渲染出来再看效果。诊断结果以结构化回执形式给出修复建议,最多两轮。

上游依赖检测与引擎降级链

内置上游依赖检测的三态逻辑,以及渲染引擎的 Node 探测降级链:环境探测到不同条件时按既定链路选择渲染方式,减少”装完跑不起来”的情况。

受控语言模式与解说视频选项

1.4.0 起新增受控语言模式与解说视频可选项,解说视频默认关闭。受控语言模式对标 ASD-STE100 风格,1.5.0 起默认 lite 档,并修正了句长计数校准缺陷。

安装与启用

官方资料未给出可直接执行的安装命令与配置文件字段。可确认的信息如下:

  • 坐标:@user_989eb8f0/tri-html,支持独立安装。
  • 激活方式:当上游路由建议指向本 skill(L2=I10、L3=arch-viz)时激活,也可在支持通用 SKILL.md 格式的 Agent(Cursor、Codex CLI、Claude Code 等)中按坐标安装后手动调用。
  • 上游依赖检测为三态逻辑,渲染引擎带 Node 探测降级链,安装后首次运行会按探测结果决定渲染通道,无需手动指定。

具体安装命令与目录布局,请以官方页面 https://www.skillhub.cn/skills/user_989eb8f0/tri-html 为准。

典型用法

官方资料给出的最简调用是直接指定项目路径(默认当前项目):

/architecture-visualization-analysis

或显式传入路径:

/architecture-visualization-analysis /path/to/project

流程上,Skill 会先完成六维分析,再进入双引擎渲染,输出单文件 HTML。诊断阶段给出结构化回执,回执在两轮后结束,不再无限追问。

适用场景与注意

适合:接手陌生项目需要快速建立架构全貌、需要向团队或评审交付一份可交互架构文档、需要把架构设计判断结构化留档。

注意:

  • 输出是架构设计视角的分析产物,不是代码文档生成器,实现细节以架构层级为边界。
  • 受控语言模式默认 lite 档,措辞受限于 ASD-STE100 风格对齐,若需要自由措辞需确认该模式的档位设置。
  • 解说视频默认关闭,如需开启须显式指定。
  • 上游依赖与 Node 探测降级是自动链路,遇到渲染异常时先确认运行环境是否满足探测前置条件,而不是先改产物。

结语

架构可视化分析把”架构图”从人工画图变成了六维分析 + 双引擎渲染的确定性流程,产物是单文件 HTML,可直接交付。它的定位是下游执行 Skill,衔接上游路由建议(L2=I10、L3=arch-viz),不是独立架构咨询工具。

官方地址:https://www.skillhub.cn/skills/user_989eb8f0/tri-html


本文事实均依据 Skill 官方页面资料(版本 1.5.0),未包含未经核实的用户反馈与额外数据。

羽毛球分组比赛记分
小程序二维码

欢迎使用《羽毛球分组比赛记分》微信小程序

小夜