Multilingual Wiki Documentation

You are currently using syntax.
In an attempt to improve PlantUML documentation...
Please do not use this website for your own diagrams.
You can click here and use the online server here for your own documentation.

Wiki Toc    View page history    Add new chapter    Reorder page    Raw


Javascript で API クライアントを実装する

Javascript API Client Code

PlantUML Webサーバを使用するには、元となるPlantUMLのコードを以下のような文字列にしてある必要があります。

  1. UTF-8 エンコードの文字列を
  2. デフレート アルゴリズムで圧縮して
  3. base64の一種を使って再びASCIIにエンコードしたもの

以下のcompress()関数は、この処理を実装したものです。


<!--  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

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.


<!--  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


Please report any bugs to plantuml@gmail.com or here.
This website is still in beta testing.