HOME      NEWS      MAP

Javascript API Client Code

To use PlantUML image generation, a text diagram description have to be :
  1. Encoded in UTF-8
  2. Compressed using Deflate algorithm
  3. Reencoded in ASCII using a transformation close to base64
This is exactly what the following compress() function is doing.

The running page is here.


<!--  taken from https://github.com/johan/js-deflate -->
<script src="deflate.js"></script>
<script>
$ = function(id){ return document.getElementById(id) };

function encode64(data) {
	r = "";
	for (i=0; i<data.length; i+=3) {
 		if (i+2==data.length) {
			r +=append3bytes(data.charCodeAt(i), data.charCodeAt(i+1), 0);
		} else if (i+1==data.length) {
			r += append3bytes(data.charCodeAt(i), 0, 0);
		} else {
			r += append3bytes(data.charCodeAt(i), data.charCodeAt(i+1),
				data.charCodeAt(i+2));
		}
	}
	return r;
}

function append3bytes(b1, b2, b3) {
	c1 = b1 >> 2;
	c2 = ((b1 & 0x3) << 4) | (b2 >> 4);
	c3 = ((b2 & 0xF) << 2) | (b3 >> 6);
	c4 = b3 & 0x3F;
	r = "";
	r += encode6bit(c1 & 0x3F);
	r += encode6bit(c2 & 0x3F);
	r += encode6bit(c3 & 0x3F);
	r += encode6bit(c4 & 0x3F);
	return r;
}

function encode6bit(b) {
	if (b < 10) {
 		return String.fromCharCode(48 + b);
	}
	b -= 10;
	if (b < 26) {
 		return String.fromCharCode(65 + b);
	}
	b -= 26;
	if (b < 26) {
 		return String.fromCharCode(97 + b);
	}
	b -= 26;
	if (b == 0) {
 		return '-';
	}
	if (b == 1) {
 		return '_';
	}
	return '?';
}

function compress(s) {
  //UTF8
  s = unescape(encodeURIComponent(s));
  $('im').src = "http://www.plantuml.com/plantuml/img/"+encode64(zip_deflate(s, 9));
}
</script>

<form>
<textarea id="inflated" cols="64" rows="16">Bob->Alice : hello</textarea>
<p>
<input type=submit onclick="compress($('inflated').value);return false;">
<p>
<img id="im" src=http://www.plantuml.com/plantuml/img/SyfFKj2rKt3CoKnELR1Io4ZDoSa70000>
</form>

HOME      NEWS      MAP