使用UML对HTML的JavaScript更改建模？

我在一个复杂的PHP系统中工作，该系统使用AJAX调用（用户从菜单中选择内容）来构建SQL搜索字符串。添加到搜索条件的每个附加内容都会使用AJAX从菜单中删除该内容。例如，为

客户标识添加条件将从菜单中删除条目。这就好像已经将条件添加到搜索词中一样有意义，那么防止用户再次重新选择条件肯定是有意义的

通过从菜单中删除选定的条件来跟踪视图的更改，使用JQuery变得非常复杂。说到这里，有没有一种好方法（可能是使用UML）来建模如何根据JavaScript对HTML进行更改。我注意到有相当多的bug潜入其中。
我想到了两个可能有用的UML图，可能还有三个。您可以使用类图对菜单结构进行建模。给定的菜单项将是一个类，具有可用的布尔属性，并且与子菜单项具有组合关系。子菜单项有一个约束，如果其父菜单项不可用，则子菜单项不可用

您可以使用活动图对用例的行为进行详细建模。您可以使用用例图来建模系统以及用户（“参与者”）如何与系统交互
 （1）类似问题：（2）相关文章：（3）可能相关的例子：