JavaScript、HTML、CSS到类图

我一直在寻找一种工具，可以帮助我为我的web开发项目生成类图

我有一个eclipse插件，但它只适用于JavaScript，不链接HTML和CSS-

找到了另一个我想要的，但它要求我使用npm，然而，因为我从一开始就没有在我的项目中使用它，所以现在我很难改变结构-

我正在使用可视化代码来编写代码，但如果它完成了工作（只要它的窗口不变），我很乐意将代码移动到另一个编辑器中：）

我想要的结果如下：

请让我知道，如果我已经张贴在错误的部分，我很高兴移动它

---

我找到了一些可视化代码的插件，但似乎都是用于序列图的插件，而没有用于类图的插件。

下面是一个使用vis js的示例：

//创建一个包含节点的数组
var节点=新的vis.DataSet([{
id:1，
标签：“节点1”
},
{
id:2，
标签：“节点2”
},
{
id:3，
标签：“节点3”
},
{
id:4，
标签：“节点4”
},
{
id:5，
标签：“节点5”
},
{
id:6，
标签：“节点6”
},
{
id:7，
标签：“节点7”
},
{
id:8，
标签：“节点8”
}
]);
//创建具有边的阵列
var edges=new vis.DataSet([{
发信人:1,，
致:8,，
箭头：“到”，
破折号：对
},
{
发信人:1,，
致:3,，
箭头：“到”
},
{
发信人:1,，
致:2,，
箭头：“到，从”
},
{
发信人:2,，
致:4,，
箭头：“到，中间”
},
{
发信人:2,，
致:5,，
箭头：“到，中间，从”
},
{
起:5,，
致:6,，
箭头：{
致：{
缩放因子：2
}
}
},
{
起:6,，
致:7,，
箭头：{
中间：{
比例因子：0.5
},
发信人：是的
}
}
]);
//创建网络
var container=document.getElementById（'mynetwork'）；
风险值数据={
节点：节点，
边缘：边缘
};
var选项={}；
var网络=新的可视网络（容器、数据、选项）
#我的网络{
宽度：400px；
高度：300px；
}

您可以使用d3或JSVIS，请提供一个链接，以确保我看到的是正确的材料：）