ソフトウェア/pukiwiki/uml.inc.php の履歴(No.3)

UML を貼るためのプラグインです†

このように書くと、

&uml(
[*] -> コマンド待ち
コマンド待ち: rready = 1
コマンド待ち: rvalid = 0
コマンド待ち --> 読み出し: arvalid & \narready
読み出し: rready = 0
読み出し: rvalid = 0
読み出し-right--> 結果送信: 読み出し終了
結果送信: rready = 0
結果送信: rvalid = 1
結果送信 --> コマンド待ち : rready
);

こう表示されます。

&uml( [*] -> コマンド待ち コマンド待ち: rready = 1 コマンド待ち: rvalid = 0 コマンド待ち --> 読み出し: arvalid & \narready 読み出し: rready = 0 読み出し: rvalid = 0 読み出し-right--> 結果送信: 読み出し終了 結果送信: rready = 0 結果送信: rvalid = 1 結果送信 --> コマンド待ち : rready );

謝辞†

図の作成には PlantUML を利用させていただきました

http://ja.plantuml.com/

/usr/local/bin に plantuml.jar を置いて使っています。

表示には、

851手書き雑フォント
http://www39.atpages.jp/yagoinienie/851fontpage.html

を

http://www.hirok-k.com/blog/751.html

を参考に Web フォント化して使わせていただきました。

ソースファイル†

cache/uml_svg/ というフォルダの下に .svg ファイルをキャッシュします。

plugin/uml.inc.php

LANG:php
<?php

$plugin_uml_initialized = false;

function plantuml($source)
{
    $tmp = tempnam("/tmp", "plantuml");

    $source = <<<"EOS"
@startuml
skinparam defaultFontName TegakiZatsu
skinparam defaultFontStyle bold
skinparam handwritten true
skinparam monochrome true
skinparam shadowing false
$source
@enduml
EOS;

    $handle = fopen($tmp, "w");
    fwrite($handle, preg_replace("/\\r?\\n/","\r\n",$source));
    fclose($handle);
    system("/usr/bin/java -Dfile.encoding=utf-8 -jar /usr/local/bin/plantuml.jar ".$tmp." -tsvg");
    unlink($tmp);

    $svg = file_get_contents($tmp.".svg");
    unlink($tmp.".svg");

    return preg_replace('/^<\\?xml.*?>/', '', $svg);
}

function plantuml_convert($source)
{
    $image_base = sha1($source);
    $image_dir = "cache/uml_svg/{$image_base[0]}/{$image_base[1]}";
    $image_svg = "{$image_dir}/{$image_base}.svg";

    if(!file_exists($image_svg)) {
        $svg = plantuml($source);
        
        if (mb_substr($svg,0,4)=="<svg") {
            if(!file_exists($image_dir)){
                mkdir($image_dir, 0770, true);
            }
            $fh = fopen($image_svg, "w");
            fwrite($fh, $svg);
            fclose($fh);
        }
    } else {
        $svg = file_get_contents($image_svg);
    }

    return $svg;
}

function plugin_uml_inline()
{
    $style = '';
    global $plugin_uml_initialized;
    if (!$plugin_uml_initialized) {
      $style = <<<'EOS'
<style type="text/css">
@font-face {
  font-family: "TegakiZatsu";
  src: url("/~takeuchi/851tegaki_zatsu.woff") format('woff');
}

svg text[font-family="TegakiZatsu"] {
  font-family: "TegakiZatsu";
}
</style>
EOS;
      $plugin_uml_initialized = true;
    }

    $aryargs = func_get_args();
    $source = join(",", $aryargs);
    $source = rtrim($source, ",");  //remove extra comma at the end.
    $source = str_replace("<br>", "\n",$source);
    return $style . plantuml_convert($source);
}

?>

pukiwiki.php の改造†

複数行のパラメータを渡せるように、次のように改造しました。

LANG:php
//      $body  = convert_html(get_source($base));

        for($i=0;$i<count($lines);$i++)
            if (preg_match('/\&uml\(/', $lines[$i]) && $lines[$i][0]!=' ') 
                while(!preg_match('/\&uml\(.*?\)\;/', $lines[$i]) && ($i+1<count($lines)))
                    array_splice($lines, $i, 2, chop($lines[$i]) . '<br>' . $lines[$i+1] );

        $body  = convert_html($lines);

plantuml のソースコードを簡単に書くには†

こちらが参考になりそうです。

Qiita - AtomとPlantUMLで爆速UMLモデリング
http://qiita.com/nakahashi/items/3d88655f055ca6a2617c

Windows7 64bit 上でリアルタイムに図を確認できました。

以下では Sublime 3 でも似たようなことができると書かれているのですが、

http://qiita.com/ogomr/items/0b5c4de7f38fd1482a48

まだうまくいってません。

質問・コメント†