Ctrl+K

blockdiag

3.1. blockdiag#

blockdiagはSphinx ドキュメントに組織図や流れ図などを作成するためのExtensionです。 blockdiagはSphinxのみならず、iPython, Track, moinmoin, mediawiki, Pukiwikiなどにも ブロック図を埋め込む事ができます. blockdiagは日本人によって開発され、ホームページも日本語で提供されています。 (http://blockdiag.com/ja/index.html)

blockdiagのシリーズには、数種類の図に対応した、

  • ブロック図 (blockdiag コマンド)見本

  • シーケンス図 (seqdiag コマンド) 見本

  • アクティビティ図 (actdiag コマンド) 見本

  • 論理ネットワーク図 (nwdiag コマンド) 見本 3.2 章

    • ラック配置図 (rackdiag コマンド) 見本

    • パケット構成図 (packetdiag コマンド) 見本

などの兄弟姉妹パッケージがあります。

ブロック図、シーケンス図、アクテビティ図、論理ネットワーク図は、 ほぼ同等 の図をPlantUMLを用いて作成できます。

ラック配置図、パケット構成図についてはは同等の機能がPlantUMLには用意されていません。 nwdiagと同じ様に、移植することも不可能ではないように思われますが、いまのところは工夫して使って行くしかない様です。

以下では、blockdiagの入力データとそれに対応するPlatUMLの出力結果を示します。

3.1.1. blockdiag examples#

リスト 3.1 blockdiag入力の一例#
blockdiag admin {
     top_page -> config -> config_edit -> config_confirm -> top_page;
}
_images/blockdiag_simple.png

図 3.1 blockdiagコマンドによって作成した図(png)。#

図 3.2 blockdiag による作図の一例(sphinx ディレクティブ blockdiag を利用)#

@startuml skinparam linetype ortho [top_page] -> [config] [config] -> [config_edit] [config_edit] -> [config_confirm] [config_confirm] -> [top_page] @enduml

図 3.3 plantumlで書き直した図#

リスト 3.2 blockdiag 作例2 の入力#
blockdiag {
  A -> B -> C -> D;
  A -> E -> F -> D;
}

図 3.4 blockdiag 作例2#

@startuml [A] as A [B] as B [C] as C [D] as D [E] as E [F] as F A -> B B -> C C -> D A --> E E -> F F -up-> D @enduml

図 3.5 plantUML 作例2#

リスト 3.3 blockdiag 作例3のソースコード#
blockdiag admin {
orientation = portrait

A -> B -> C;
B -> D;

A[label = 1st];
B[label = 2nd];
C[label = 3rd];
D[label = 4th];
}

図 3.6 blockdiag 作例3#

skinparam componentStyle rectangle [1st] as A #Red [2nd] as B #Yellow cloud { [3rd] as C #Green [4th] as D #Pink } A --> B B --> C B --> D

図 3.7 作例3のPlantUML版#

リスト 3.4 blockdiag 作例4のソースコード#
blockdiag admin {
index [label = "List of FOOs"];
add [label = "Add FOO"];
add_confirm [label = "Add FOO (confirm)"];
edit [label = "Edit FOO"];
edit_confirm [label = "Edit FOO (confirm)"];
show [label = "Show FOO"];
delete_confirm [label = "Delete FOO (confirm)"];

index -> add  -> add_confirm  -> index;
index -> edit -> edit_confirm -> index;
index -> show -> index;
index -> delete_confirm -> index;
}

図 3.8 blockdiag 作例4#

hide empty description skinparam componentStyle rectangle component "List of FOOs" as index frame fadd { component "Add FOO" as add component "Add FOO (confirm)" as add_confirm } frame fedit{ component "Edit FOO" as edit component "Edit FOO (confirm)" as edit_confirm } frame fshow{ component "Show FOO" as show } frame fdelete{ component "Delete FOO (confirm)" as delete_confirm } index -left-> add add --> add_confirm add_confirm -> index index -right-> edit edit --> edit_confirm edit_confirm -> index index -down-> show show -up-> index index -up-> delete_confirm delete_confirm -down-> index

図 3.9 plantuml による 作例4#

3.1.2. nwdiag example#

リスト 3.5 オリジナルのnwdiag 　入力例1#
nwdiag {
network dmz {
address = "210.x.x.x/24"

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

web01 [address = "172.x.x.1"];
web02 [address = "172.x.x.2"];
db01;
db02;
}
}
_images/nwdiag_sample1.png

図 3.10 nwdiag によって作成した図#

3.1.3. rackdiag example#

リスト 3.6 rackdiag 入力例#
rackdiag {
// define height of rack
16U;

// define rack items
1: UPS [2U];
3: DB Server
4: Web Server
5: Web Server
6: Web Server
7: Load Balancer
8: L3 Switch
}

3.1.4. packetdiag example#

リスト 3.7 packetdiag 入力例#
packetdiag{
colwidth = 32
node_height = 72

0-15: Source Port
16-31: Destination Port
32-63: Sequence Number
64-95: Acknowledgment Number
96-99: Data Offset
100-105: Reserved
106: URG [rotate = 270]
107: ACK [rotate = 270]
108: PSH [rotate = 270]
109: RST [rotate = 270]
110: SYN [rotate = 270]
111: FIN [rotate = 270]
112-127: Window
128-143: Checksum
144-159: Urgent Pointer
160-191: (Options and Padding)
192-223: data [colheight = 3]
}

3.1.5. actdiag example#

リスト 3.8 actdiag 入力例#
actdiag {
write -> convert -> image

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

3.1.6. seqdiag example#

リスト 3.9 seqdiag 入力例#
seqdiag {
browser  -> webserver [label = "GET /index.html"];
browser <-- webserver;
browser  -> webserver [label = "POST /blog/comment"];
webserver  -> database [label = "INSERT comment"];
webserver <-- database;
browser <-- webserver;
}
_images/seqdiag_sample1.png

図 3.11 seqdiag コマンドの出力（例1）#

図 3.12 seqdiag directive を使った図#

リスト 3.10 seqdiag 入力例2#
seqdiag {
// auto return edge
A => B [label = "call", return = "return"];

// nested auto return edge
A => B => C [label = "call", return = "return"];

// nested sequence
A => B [label = "nested call"]{
B => C [label = "call 1"];
B => D [label = "call 2"];
B => E [label = "call 3"];
          }
}

図 3.13 seqdiag 出力例2#

_images/seqdiag_sample2.png

図 3.14 seqdiag コマンドによる出力#

activate A A -> B :call activate B A <- B :return deactivate B A -> B :call activate B B -> C:call activate C B <- C: return deactivate C A <- B :return deactivate B A -> B :nested call activate B B -> C:call 1 activate C B <- C: deactivate C B -> D:call 2 activate D B <- D: deactivate D B -> E:call 3 activate E B <- E: deactivate E A <- B :return deactivate B deactivate A

図 3.15 actdiagの例をPlatUMLで書き直して見ました。#

3.1.7. actdiag#

actdiag をPlantUMLのアクティビティ図でおきかえられるかを試して見ます。

http://blockdiag.com/ja/actdiag/examples.html#simple-diagram の例を試してみましょう。

リスト 3.11 actdiagへの入力例#
   actdiag {
   write -> convert -> image

   lane user {
   label = "User"
   write [label = "Writing reST"];
   image [label = "Get diagram IMAGE"];
   }
   lane actdiag {
   convert [label = "Convert reST to Image"];
   }
   }
_images/actdiag_sample1.png

図 3.16 actdiagコマンドによる出力例#

|userlane| User #lightgreen:Writing reST; |actidiaglane| actdiag #pink:Convert reST to Image; |userlane| #lightgreen:Get Diagram Image;

図 3.17 http://blockdiag.com/ja/_images/actdiag-27aec367951ef70f7b5badceebbcc0c2bc687752.png#

デスクリプションをPlantUMLで追加します。

partition #pink/white Process { :A; #lightblue/lightgreen :B; :C; } legend right | **Name** | **Description** | | A | browsers in each client | | B | browsers in each client | | C | database server | end legend

図 3.18 デスクリプションを legend/endlegend とCreole記法を使って追加しました。#

3.1.8. シークエンス図#

リスト 3.12 http://blockdiag.com/ja/_images/seqdiag-d86fff2ba41af47bef92201ce99bf44d4235fb12.png のseqdiag 入力#
seqdiag {
// Use note (put note on rightside)
browser -> webserver [note = "request\nGET /"];
browser <- webserver;

// Use leftnote and rightnote
browser -> webserver [leftnote = "send request"];
browser <- webserver [rightnote = "send response"];
}
http://blockdiag.com/ja/_images/seqdiag-d86fff2ba41af47bef92201ce99bf44d4235fb12.png

browser -> webserver activate browser activate webserver note right: "request\nGET" browser <- webserver deactivate webserver browser -> webserver note left: "send request" activate webserver browser <- webserver note right: "send response" deactivate webserver

図 3.19 http://blockdiag.com/ja/_images/seqdiag-d86fff2ba41af47bef92201ce99bf44d4235fb12.png をPlantUMLで再現#

目次