Javascript

DIVのタグに書かれた情報に従ってSVGを描画する。
例えば

  <script src="http://www.asahi-net.or.jp/~jn2k-oot/p01/javascript/ko2svg.js"></script>
  :
  <div class=ko2svg>
	{
		configuration: {
			sheet: {
				width: 400,
				height: 300
			},
			shapes: [
				{ shape: "box", width: 100, height: 80, stroke: "#acacff" },
				{ shape: "connection", stroke: "#acacff" },
			]
		},
		shapes: [
			{ shape: "box", id: "A", label: "A", cx: 80, cy: 50 },
			{ shape: "box", id: "B", label: "B", cx: 300, cy: 50 },
			{ shape: "connection", id: "AB", src: "A", des: "B", arrow: "des" },
			{ shape: "circle", id: "C", cx: 100, cy: 200, r: 50, label: "C", stroke: "#80aa80" },
			{ shape: "connection", id: "CB", src: "C", des: "B", arrow: "des", stroke: "#80aa80" },
		]
	}
  </div>

と書くと、以下のように描画される。

{ configuration: { sheet: { width: 400, height: 300 }, shapes: [ { shape: "box", width: 100, height: 80, stroke: "#acacff" }, { shape: "connection", stroke: "#acacff" }, ] }, shapes: [ { shape: "box", id: "A", label: "A", cx: 80, cy: 50 }, { shape: "box", id: "B", label: "B", cx: 300, cy: 50 }, { shape: "connection", id: "AB", src: "A", des: "B", arrow: "des" }, { shape: "circle", id: "C", cx: 100, cy: 200, r: 50, label: "C", stroke: "#80aa80" }, { shape: "connection", id: "CB", src: "C", des: "B", arrow: "des", stroke: "#80aa80" }, ] }

Software

ko2svg