Sphinx
blockdiag

contrib-blockdiag のサンプル

More than 1 year has passed since last update.

contrib-blockdiag 1.5.5

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

使い方

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

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

  • 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

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

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

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

.. blockdiag::

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

   stacked -> diamond -> database;
   }

blockdiag-765b6528953fd1b2002f59d71ebcfa695e74205f.png

ノードに番号を振る

.. blockdiag::

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

   A -> B -> C;
   }

blockdiag-b4f6ddc2c15dc505ed61e306517816a91612c265.png

ノードの省略を表現する

.. blockdiag::

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

blockdiag-82715c2337ce7a3fb6a67974493f8bb2255de9dd.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

縦に並べる

.. blockdiag::

   diagram {
   orientation = portrait

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

blockdiag-055d2f727cb7409b0e129f4964c508ce0f367625.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

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

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

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

エッジにスタイルを設定する

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

おまけ

contrib-nwdiag 0.9.5

この投稿は公式の ネットワーク図生成ツール nwdiag のドキュメントに依る
自分ドキュメントを書くときに使いそうなものを中心にサンプルを作成した。

使い方

 
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

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

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

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