Tracのwikiに図面を入れる(BlockDiag編)

Tracwikiでblockdiagを使うためのプラグインを導入した。直線や円と言ったプリミティブな図形ではなく、開発現場でそのまま使えるような図面を描けるのが特徴だ。利用環境は下記の通り。

導入

% sudo /opt/local/bin/easy_install-2.6 blockdiag
% sudo ln -s /opt/local/Library/Frameworks/Python.framework/Versions/2.6/bin/blockdiag /opt/local/bin/
% sudo /opt/local/bin/easy_install-2.6 seqdiag
% sudo ln -s /opt/local/Library/Frameworks/Python.framework/Versions/2.6/bin/seqdiag /opt/local/bin/
% sudo /opt/local/bin/easy_install-2.6 actdiag
% sudo ln -s /opt/local/Library/Frameworks/Python.framework/Versions/2.6/bin/actdiag /opt/local/bin/
% sudo /opt/local/bin/easy_install-2.6 nwdiag
% sudo ln -s /opt/local/Library/Frameworks/Python.framework/Versions/2.6/bin/nwdiag /opt/local/bin/
  • BlockDiagPluginに上記コマンドへのパスを追記しておく。(web_ui.pyに記載)
cmd = ['/opt/local/bin/' + name, '-a', '-T', type, '-o', outfile, infile]
  • BlockDiagPluginをインストールする。
% sudo /opt/local/bin/python2.6 setup.py install

使用例

  • blockdiagの記載
{{{
#!blockdiag(type=png)
{
   A -> B -> C;
            B -> D;
            B -> E;
}
}}}
  • 表示例

  • seqdiagの記載
{{{
#!seqdiag(type=png)
{
  browser  -> webserver [label = "GET /index.html"];
  browser <-- webserver;

  browser  -> webserver [label = "POST /blog/comment"];
              webserver  -> database [label = "INSERT comment"];
              webserver <-- database;
  browser <-- webserver;
}
}}}
  • 表示例

  • actdiagの記載
{{{
#!actdiag(type=png)
{
  write -> convert -> image

  lane user {
     label = "User"
     write [label = "Writing reST"];
     image [label = "Get diagram IMAGE"];
  }
  lane actdiag {
     convert [label = "Convert reST to Image"];
  }
}
}}}
  • 表示例

  • nwdiagの記載
{{{
#!nwdiag(type=png)
{
  network dmz {
      address = "192.x.x.x/24"

      web01 [address = "192.x.x.1"];
      web02 [address = "192.x.x.2"];
      web03 [address = "192.x.x.3"];
  }
  network internal {
      address = "172.x.x.x/24";

      web01 [address = "172.x.x.1"];
      web02 [address = "172.x.x.2"];
      db01;
  }
}
}}}
  • 表示例