jgraph快速生成drawio可绘制图

阅读更多

 

使用java的jgrapht的库组织的图像快速可视化，该如何做呢？

这里给出一个简洁的办法。

工具：

1、java的graph的库： https://jgrapht.org/

2、JavaScript的可视化在线图工具：https://www.draw.io/

 

用于打印边的类

public class SimpleDefaultEdge extends DefaultEdge {

    /**
     *
     */
    private static final long serialVersionUID = 1870891835682617414L;

    @Override
    public Object getSource() {
        return super.getSource();
    }

    @Override
    public Object getTarget() {
        return super.getTarget();
    }

    /*
     * (non-Javadoc)
     * @see java.lang.Object#toString()
     */
    @Override
    public String toString() {
        return String.format("%s->%s", this.getSource(), this.getTarget());
    }

}

 

图的组织

public static void test026() throws Exception {
        Graph dag =
                new DirectedAcyclicGraph(SimpleDefaultEdge.class);
        /**
         * DAG的结构如下，有3个联通子图。
         *
         * 
         *            1     9   10  11
         *        / |   | \ |       |
         *      2   3   4   5       12
         *        \ | / | /
         *          6   7
         *           \ /|
         *            8 13
         * 
         */
        IntStream.rangeClosed(1, 13).forEach(v -> {
            dag.addVertex(v);
        });

        dag.addEdge(1, 2);
        dag.addEdge(1, 3);
        dag.addEdge(1, 4);
        dag.addEdge(1, 5);
        dag.addEdge(9, 5);

        dag.addEdge(2, 6);
        dag.addEdge(3, 6);
        dag.addEdge(4, 6);
        dag.addEdge(4, 7);
        dag.addEdge(5, 7);

        dag.addEdge(6, 8);
        dag.addEdge(7, 8);
        dag.addEdge(7, 13);

        dag.addEdge(11, 12);

        dag.edgeSet().forEach(e -> {
            System.out.println(e);
        });

    }

 

输出 写道

1->2
1->3
1->4
1->5
9->5
2->6
3->6
4->6
4->7
5->7
6->8
7->8
7->13
11->12

 

进入 https://www.draw.io/ 找到菜单“调整图形” -> “插入”-> “高级”-> “从文本...”。 在弹出的对话框里面的select下拉框里面选择“图标”，可以看见里面有范例代码如下：

写道

;Example:
a->b
b->edge label->c
c->a

 我们把刚刚java里面输出的内容更新到里面，如下：

写道

;Example:
1->2
1->3
1->4
1->5
9->5
2->6
3->6
4->6
4->7
5->7
6->8
7->8
7->13
11->12

 点击插入按钮，数据就从jgraph导入到drawio了，实现了可视化。

 

可能导入之后的图形布局看着不是很舒服，可以进行调整。进入菜单“调整图形”->“布局”->"垂直流" ，可以调整布局。也可以在这里进行其他方式的布局调整。