基于Web使用andflow_js 画个ER图

andflow_js组件希望可以在网页上设计和展示流程图、架构图、关系图等图形，如今andflow_js 可以用来实现基于Web的ER图。只需要传递 json配置参数即可实现，同时还能通过js函数进行实时读取、调整。

代码如下：

var flowModel= {
	"code": "",
	"name": "",
	"show_action_body": "true",
	"show_action_content": "true",
	"theme": "flow_theme_default",
	"link_type": "Flowchart",
	"params": [],
	"actions": [],
	"links": [
		{
			"source_id": "list_item_list_86360da09b96477998fa8eb539a39f51_1",
			"target_id": "list_item_list_45b0a819cce542169be1d7e124b250e5_0",
			"label_source": "N",
			"label_target": "1"
		},
		{
			"source_id": "list_item_list_86360da09b96477998fa8eb539a39f51_0",
			"target_id": "list_item_list_cdf17f356147444d9108a010c6370cbe_0",
			"label_source": "N",
			"label_target": "1"
		}
	],
	"groups": [],
	"lists": [
		{
			"id": "list_cdf17f356147444d9108a010c6370cbe",
			"name": "erd",
			"left": "23px",
			"top": "106px",
			"items": [
				{
					"id": "list_item_list_cdf17f356147444d9108a010c6370cbe_0",
					"title": "id"
				},
				{
					"id": "list_item_list_cdf17f356147444d9108a010c6370cbe_1",
					"title": "name"
				},
				{
					"id": "list_item_list_cdf17f356147444d9108a010c6370cbe_2",
					"title": "age"
				},
				{
					"id": "list_item_list_cdf17f356147444d9108a010c6370cbe_3",
					"title": "grade"
				},
				{
					"id": "list_item_list_cdf17f356147444d9108a010c6370cbe_4",
					"title": "phone"
				},
				{
					"id": "list_item_list_cdf17f356147444d9108a010c6370cbe_5",
					"title": "address"
				}
			],
			"title": "students",
			"width": "150px",
			"height": "200px"
		},
		{
			"id": "list_45b0a819cce542169be1d7e124b250e5",
			"name": "erd",
			"left": "543px",
			"top": "103px",
			"items": [
				{
					"id": "list_item_list_45b0a819cce542169be1d7e124b250e5_0",
					"title": "id"
				},
				{
					"id": "list_item_list_45b0a819cce542169be1d7e124b250e5_1",
					"title": "groupname"
				},
				{
					"id": "list_item_list_45b0a819cce542169be1d7e124b250e5_2",
					"title": ""
				},
				{
					"id": "list_item_list_45b0a819cce542169be1d7e124b250e5_3",
					"title": ""
				}
			],
			"title": "group",
			"width": "150px",
			"height": "200px"
		},
		{
			"id": "list_86360da09b96477998fa8eb539a39f51",
			"name": "erd",
			"left": "273px",
			"top": "114px",
			"items": [
				{
					"id": "list_item_list_86360da09b96477998fa8eb539a39f51_0",
					"title": "student_id"
				},
				{
					"id": "list_item_list_86360da09b96477998fa8eb539a39f51_1",
					"title": "group_id"
				},
				{
					"id": "list_item_list_86360da09b96477998fa8eb539a39f51_2",
					"title": ""
				}
			],
			"title": "student_group",
			"width": "150px",
			"height": "200px"
		}
	]
};


    var options={
        tags:tags,            //组件过滤标签列表
        metadata:metadata,    //组件元素
        flowModel:flowModel,  //流程模型
        img_path: "../img/meta/",
        editable:true,   //是否可编辑，默认true
        show_toolbar: true,
        metadata_position: 'default', //top,left,default
        render_action:function(metadata,action,html){ return html; },//节点渲染
        render_action_helper: function(metadata,html){return null},  //节点拖拉渲染
        render_state_list: function(datas){return null},             //流程状态列表渲染
        render_link:function(conn,linktype,linkdata){return null},   //连接线渲染
        event_group_click:function(group){
 
        },
        event_group_dblclick: function(group){
            
        },
        //节点单击事件
        event_action_click:function(metadata,action){
 

        },
        //节点双击事件
        event_action_dblclick:function(metadata,action){
 

        },
        //连线单击事件
        event_link_click: function (link) {
           
        },
        //连线双击事件
        event_link_dblclick: function (link) {

            var label = prompt("set link labels, split by ',' ", (link.label_source||'')+","+(link.label_target||''));
            
            var labels = label.split(",");
            if(labels.length>0){
                link.label_source=labels[0];
            }

            if(labels.length>1){
                link.label_target=labels[1];
            }
            
            andflow.setLinkInfo(link);  
        },

        //画图板单击事件
        event_canvas_click: function(e){
            
        }
    }


    andflow.newInstance("andflow",options);
    andflow.showFlow();

添加公众号，回复andflow，获取源代码