zkDiagram: interactive diagrams and visual program

zkDiagram是 draw2d 库的综合 .使用这个库可以在web程序中使用Visio-style来画图表
官方网站：http://www.integratedmodelling.org/software/zk/zkdiagram.html

代码：

<?xml version="1.0" encoding="utf-8"?>
<?page title="ZK::First Draw2D Workspace"?>
<window border="none">
	<vbox id="map">
		<workspace width="600px" height="600px" router="bezier">
			<textnode fillColor="#bbbbbb" x="10" y="90" width="240"
				height="50"
				text="This is a simple demo. Try moving and connecting shapes." />
			<imagenode img="flow.gif" x="100" y="200" width="48"
				height="40">
				<port position="left" />
				<port position="right" />
			</imagenode>
			<imagenode img="variable.gif" x="100" y="250" width="48"
				height="40">
				<port position="top" />
				<port position="bottom" />
			</imagenode>
			<imagenode img="flow.gif" x="200" y="300" width="48"
				height="40">
				<port position="top" />
				<port position="bottom" />
			</imagenode>
			<zknode x="200" y="175" width="300" height="60"><!--  any ZK component... -->
				<window border="none">
					<listbox id="box" width="300px" multiple="true"
						checkmark="true">
						<listhead>
							<listheader label="Name" />
							<listheader label="Gender" />
							<listheader label="Age" />
							<listheader label="Description" />
						</listhead>
						<listitem>
							<listcell label="Mary" />
							<listcell label="FEMALE" />
							<listcell label="18" />
							<listcell label="A young lady." />
						</listitem>
						<listitem>
							<listcell label="John" />
							<listcell label="MALE" />
							<listcell label="20" />
							<listcell label="A college student." />
						</listitem>
					</listbox>
				</window><!-- and as many ports as we want -->
				<port position="left" />
				<port position="left" />
				<port position="right" />
			</zknode>
		</workspace>
	</vbox>
</window>

效果图：