Question

编辑1：

如果我将它们变成一个类并将其转换为UML图表怎么样？

如果可能的话，我想根据我的HTML代码创建动态UML图。

代码如下所示：

<h2><a id="Foo"><br />Foo</a></h2>
<h3><a id="FooHead"><br />FooHead</a></h3>
<table class="table">
    <tr>
        <th>Field</th>
        <th>Datatype</th>
        <th>Length</th>
        <th></th>
        <th>Description</th>
    </tr>
    <tr>
        <td>Foo1</td>
        <td>String</td>
        <td>32</td>
        <td>M</td>
        <td>Unique foo number.</td>
    </tr>
    <tr>
        <td>Foo2</td>
        <td>String</td>
        <td>32</td>
        <td>M</td>
        <td>Foo2.</td>
    </tr>
</table>

<h3><a id="FooLine"><br />FooLine</a></h3>
<table class="table">
    <tr>
        <th>Field</th>
        <th>Datatype</th>
        <th>Length</th>
        <th></th>
        <th>Description</th>
    </tr>
    <tr>
        <td>Foo1</td>
        <td>String</td>
        <td>32</td>
        <td>M</td>
        <td>Unique foo number.</td>
    </tr>
    <tr>
        <td>Foo6</td>
        <td>String</td>
        <td>32</td>
        <td>M</td>
        <td>Foo6.</td>
    </tr>
    <tr>
        <td>Foo7</td>
        <td>String</td>
        <td>32</td>
        <td>M</td>
        <td>Foo7.</td>
    </tr>
</table>

UML图应该看起来像这样（见下文）。我试过谷歌搜索，无法找到任何东西。任何有关解决方案的想法或指向正确方向的任何想法都将非常感激。

Answer 1

为了将表格设置为UML分类器（类，接口等），CSS可能很有用。 CSS selectors可能会帮助您为特定信息（名称，类型或非标准信息，如长度）设置特定列的样式。

如果你想在你的表之间绘制关系，那么简单的解决方案是使用一些Javascript库，例如JSPlumb或Raphael。

最后，如果你想离开HTML表格，这里有一些关于Polymer Web components个人作品的广告。 Polymeria UML是一组web components。受Eclipse UML2元素的启发，它支持通用类图元素。这是一项正在进行的工作：当前版本基于Polymer 0.5。 Polymer 1.0的发展很快就会出现。

Answer 2

看看：http://gojs.net/temp/umlFromTables.html

实施完全在那里的页面上。代码改编自GoJS示例：UML Class

如何从HTML表创建动态UML图？

编辑1：

2 个答案: