JavaScript、HTML、CSS 到类图

Question

我一直在寻找可以帮助我为我的 Web 开发元素生成类图的工具。

我有一个用于 eclipse 的插件，但它只适用于 JavaScript，不能链接 HTML 和 CSS - http://jsuml.org/ .

找到另一个可以做我想要的东西，但它需要我使用 npm，但是，因为我从一开始就没有在我的元素中使用它，所以我现在很难改变结构 - https://www.npmjs.org/package/wavi

我正在使用可视化代码编写我的代码，但如果它完成工作(只要它的窗口)，我很乐意将我的代码移动到另一个编辑器:)

我正在寻找的结果如下所示:

如果我将其发布在错误的部分，请告诉我，我很乐意将其移动。

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

Answer 1

这是一个使用 vis js 的例子:

// create an array with nodes
var nodes = new vis.DataSet([{
    id: 1,
    label: 'Node 1'
  },
  {
    id: 2,
    label: 'Node 2'
  },
  {
    id: 3,
    label: 'Node 3'
  },
  {
    id: 4,
    label: 'Node 4'
  },
  {
    id: 5,
    label: 'Node 5'
  },
  {
    id: 6,
    label: 'Node 6'
  },
  {
    id: 7,
    label: 'Node 7'
  },
  {
    id: 8,
    label: 'Node 8'
  }
]);

// create an array with edges
var edges = new vis.DataSet([{
    from: 1,
    to: 8,
    arrows: 'to',
    dashes: true
  },
  {
    from: 1,
    to: 3,
    arrows: 'to'
  },
  {
    from: 1,
    to: 2,
    arrows: 'to, from'
  },
  {
    from: 2,
    to: 4,
    arrows: 'to, middle'
  },
  {
    from: 2,
    to: 5,
    arrows: 'to, middle, from'
  },
  {
    from: 5,
    to: 6,
    arrows: {
      to: {
        scaleFactor: 2
      }
    }
  },
  {
    from: 6,
    to: 7,
    arrows: {
      middle: {
        scaleFactor: 0.5
      },
      from: true
    }
  }
]);

// create a network
var container = document.getElementById('mynetwork');
var data = {
  nodes: nodes,
  edges: edges
};
var options = {};
var network = new vis.Network(container, data, options);

#myNetwork {
  width: 400px;
  height: 300px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js"></script>
<div id='mynetwork'></div>

可以找到更多示例here