contrib-blockdiag のサンプル

 contrib-blockdiag 1.5.5
=========================

この投稿は公式の[ブロック図生成ツールblockdiagのドキュメント](http://blockdiag.com/ja/blockdiag/sphinxcontrib.html)に依る
自分ドキュメントを書くときに使いそうなものを中心にサンプルを作成した。

 使い方
=======

conf.pyに以下を設定する

```conf.py
# Enabled extensions
extensions = ['sphinxcontrib.blockdiag']
# Fontpath for blockdiag (truetype font)
blockdiag_fontpath = 'C:\Windows\Fonts\meiryo.ttc' # メイリオUI標準
```

 シンプルなサンプル
=================

```
.. blockdiag::

   diagram {
   // set default shape
   default_shape = roundedbox
     A -> B -> C;
          B -> D;
   }
```
![blockdiag-f37971ccf5b6f8f6991e9d4368a1bb9541f3a8f9.png](https://qiita-image-store.s3.amazonaws.com/0/99561/acd15725-8bc9-e499-90bf-a4ba905c9c7c.png)

特に指定しない場合、描画属性は以下が使われる

- node_width = 128;
- node_height = 40;
- span_width = 64;
- span_height = 40;
- default_fontsize = 11;
- default_shape = box;
- orientation = ;
 - 無指定は横書き。portrait指定で縦に並ぶ。
- default_node_color = white;
- default_group_color = orange;
- default_linecolor = black;
- default_textcolor = black;

ノードとエッジにラベルをつける
===========================

```
.. blockdiag::

   diagram {
   // Set labels to nodes.
   A [label = "foo"];
   B [label = "bar"];
   C [label = "baz"];

   // Set labels to edges. (short text only)
   A -> B [label = "click bar", textcolor="red"];
   B -> C [label = "click baz"];
   C -> A;
   }
```
![blockdiag-56c26c6f84696607402c35fdb5007e6dfce5e8da.png](https://qiita-image-store.s3.amazonaws.com/0/99561/1f501382-ccd3-6789-4aa4-981f69fdf13b.png)


 個々のノードに属性を設定する
================================

```
.. blockdiag::

   diagram {
   // standard node shapes
   box [shape = "box"];
   roundedbox [shape = "roundedbox"];
   diamond [shape = "diamond"];
   ellipse [shape = "ellipse"];
   note [shape = "note"];

   cloud [shape = "cloud"];
   mail [shape = "mail"];
   beginpoint [shape = "beginpoint"];
   endpoint [shape = "endpoint"];
   minidiamond [shape = "minidiamond"];
   actor [shape = "actor"];
   dots [shape = "dots"];

   box -> roundedbox -> diamond -> ellipse;
   cloud -> note -> mail -> actor;
   minidiamond -> beginpoint -> endpoint -> dots;

   // node shapes for flowcharts
   condition [shape = "flowchart.condition"];
   database [shape = "flowchart.database"];
   input [shape = "flowchart.input"];
   loopin [shape = "flowchart.loopin"];
   loopout [shape = "flowchart.loopout"];
   terminator [shape = "flowchart.terminator"];

   condition -> database -> terminator -> input;
   loopin -> loopout;
   }
```

![blockdiag-a3744841be8e159775fef636eb84f133283514a9.png](https://qiita-image-store.s3.amazonaws.com/0/99561/3b1fc996-349e-b543-30fd-35b4b996d83c.png)

ノードのスタック(重ね合わせ)
===========================

```
.. blockdiag::

   diagram {
   // Set stacked to nodes.
   stacked [stacked];
   diamond [shape = "diamond", stacked];
   database [shape = "flowchart.database", stacked];

   stacked -> diamond -> database;
   }
```
![blockdiag-765b6528953fd1b2002f59d71ebcfa695e74205f.png](https://qiita-image-store.s3.amazonaws.com/0/99561/7c83bd9f-8c1d-b2c4-a57c-9c5841ff6902.png)

ノードに番号を振る
==================

```
.. blockdiag::

   diagram {
   // Set numbered-badge to nodes.
   B [numbered = 99];
   C [numbered = A];

   A -> B -> C;
   }
```
![blockdiag-b4f6ddc2c15dc505ed61e306517816a91612c265.png](https://qiita-image-store.s3.amazonaws.com/0/99561/28033c94-4dc4-e473-b232-6cd0f2aca009.png)

ノードの省略を表現する
=====================

```
.. blockdiag::

   diagram {
   A -> B, C, D;
   C [shape = "dots"];
   // hide edge forward to dots node
   A -> C [style = "none"];
   }
```

![blockdiag-82715c2337ce7a3fb6a67974493f8bb2255de9dd.png](https://qiita-image-store.s3.amazonaws.com/0/99561/d45d034c-2914-b5ce-e2fe-d38cf6dfb1bb.png)

ノードをグルーピングする
======================

```
.. blockdiag::

   diagram {
   A -> B -> C -> D;
   A -> E;
   A -> H;

   // A and B belong to first group.
   group {
      A; B;
   }

   // E, F and G belong to second group.
   group second_group {
      // Set group-label
      label = "second group";

      // Set background-color to this group.
      color = "#77FF77";

      // Set textcolor to this group
      textcolor = "#FF0000";

      E -> F -> G;

      // H and I belong to third "nested" group.
      group {
          label = "third group";
          color = "#FF0000";

          // Set group shape to 'line group' (default is box)
          shape = line;

          // Set line style (effects to 'line group' only)
          style = dashed;

          H -> I;
      }
   }

   // J belongs to second group
   J [group = second_group];
   }
```
![blockdiag-98a80ddb5afb5a7e2bd23e2479478237320ce9ee.png](https://qiita-image-store.s3.amazonaws.com/0/99561/e58cdd40-e641-8f7d-1940-eccba6f10498.png)

縦に並べる
===========

```
.. blockdiag::

   diagram {
   orientation = portrait

   A -> B -> C;
        B -> D;
   }
```

![blockdiag-055d2f727cb7409b0e129f4964c508ce0f367625.png](https://qiita-image-store.s3.amazonaws.com/0/99561/6e91ffbe-8f79-34b0-7113-8b6520ed1adb.png)

クラスを使って属性を定義する
===========================

Sphinx向けには実装されていない。

シンプルな管理画面の画面遷移図(例)
================================

```
.. blockdiag::

   diagram {
   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;
   }
```

![blockdiag-143eb5f0041d9f4f56467208953139e0429710d6.png](https://qiita-image-store.s3.amazonaws.com/0/99561/0f05cdcb-9db9-ceda-9f68-f2f61d885023.png)

ノードに説明をつけて表と同時に生成する
=====================================

```
.. blockdiag::
   :desctable:

   {
   // Set numbered-badge and description to nodes.
   A [numbered = 1, label = "Input", description = "Beef, carrots, potatoes, curry powder and water"];
   B [numbered = 2, label = "Process", description = "Simmer and simmer"];
   C [numbered = 3, label = "Output", description = "yum-yum curry"];

   A -> B -> C;
   }
```

![blockdiag-c84aad2838129aebe027e188745df814d79e9289.png](https://qiita-image-store.s3.amazonaws.com/0/99561/a7e89d63-72aa-f24f-e25b-b06b810ee3ee.png)


| No | Name  | Description                                   | 
|:-- |:----- |:--------------------------------------------- |
|1   |Input  |Beef, carrots, potatoes, curry powder and water|
|2   |Process|Simmer and simmer                              |
|3   |Output |yum-yum curry                                  |

ノードにスタイルを設定する
========================

```
.. blockdiag::

   diagram {
   // Set boder-style to nodes.
   B [style = dotted];
   C [style = dashed];
   D [style = "3,3,3,3,15,3"];

   A -> B -> C -> D;
   }
```
![blockdiag-531967ed2e920e91689ed3630b9603f31258c1bf.png](https://qiita-image-store.s3.amazonaws.com/0/99561/bdc3215f-4313-8ba9-9b5e-62aced217340.png)

エッジにスタイルを設定する
========================
```
.. blockdiag::

   diagram {
   // Set style to edges.
   A -> B [style = dotted];
   B -> C [style = dashed];
   C -> D [style = none];
   D -> E [style = "3,3,3,3,15,3"];
   }
```
![blockdiag-0ad88887888b416c42553d951bca257a97ef3b52.png](https://qiita-image-store.s3.amazonaws.com/0/99561/035d313a-a431-ab59-a11b-a4931df94fc0.png)


おまけ
======
 contrib-nwdiag 0.9.5	
=========================

この投稿は公式の[ ネットワーク図生成ツール nwdiag のドキュメント](http://blockdiag.com/ja/nwdiag/sphinxcontrib.html)に依る
自分ドキュメントを書くときに使いそうなものを中心にサンプルを作成した。

 使い方
=======
　
conf.pyに以下を設定する

```conf.py
# Enabled extensions
extensions = ['sphinxcontrib.nwdiag',
              'sphinxcontrib.rackdiag',
              'sphinxcontrib.packetdiag']
# Fontpath for nwdiag series (truetype font)
nwdiag_fontpath = 'C:\Windows\Fonts\meiryo.ttc' # メイリオUI標準
```

 シンプルなサンプル
=================
```
.. nwdiag::
   :desctable:

   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;
      }
   }
```
![nwdiag-23f0ec18c64dfa242168f58d8507234e97a254e7.png](https://qiita-image-store.s3.amazonaws.com/0/99561/9bc2ae07-d5e7-d356-bee8-5971550e2ed4.png)


ノードに説明をつけて表と同時に生成する
====================================

```
.. nwdiag::
   :desctable:

   nwdiag {
      network {
        A [address = 192.168.0.1, description = "web server01"];
        B [address = 192.168.0.2, description = "web server02"];
      }
      network {
        A [address = 172.0.0.1];
        C [address = 172.0.0.2, description = "database server"];
      }
   }
```

![nwdiag-5653af42e82fe462eabf9210a40be4ac9335a2b2.png](https://qiita-image-store.s3.amazonaws.com/0/99561/10296817-f0c8-a024-d3a2-d76ac4e97c06.png)

| Name | Description |
|:---- |:----------- |
|A     |web server01 |
|B     |web server02 |
|C     |database server|

ラック図のサンプル
==================

```
.. rackdiag::

   rackdiag {
   // define height of rack
   12U;

   // define description of rack
   description = "Tokyo/1234 East";

   // define rack units
   1: UPS [2U];   // define height of unit
   3: DB Server [5kg]  // define weight of unit
   4: Web Server [0.5A]  // define ampere of unit
   5: Web Server
   6: Web Server
   7: Load Balancer
   8: L3 Switch
   }
```
![rackdiag-0102c65e631051e2f6328e05aed6b9c026979cac.png](https://qiita-image-store.s3.amazonaws.com/0/99561/1cb432c9-aac9-1559-3d1f-aaed21f5f6ba.png)