graphvizによるフローチャートの作成

graphviz で別途フローチャートを作成し、 sphinx に取り込んで表示するまでを紹介する。

digraph G1 { graph [size="4,4"]; node [shape=diamond] d ; node [shape=parallelogram] b c e; node [shape=box,style=rounded] a f ; a [label="スタート"]; b [label="Kateでtext fileを編集し、\n dotファイルを作成"]; c [label="xdotで確認"]; d [label="正しくできているか"]; e [label="sphinxに取り込む"]; f [label="エンド"]; a->b; b->c; c->d; d->e [label="Yes"]; d->b [label="No"]; e->f; }

図 3 graphvizでフローチャートを作成する際の主な流れ

実際の手順

以下詳しく説明していく.

  1. Kate でtextファイルを作成し、 dot 形式で保存

    ../_images/0514-2.png

  2. xdot で確認

    ../_images/0514-1.png

    ちなみに図1は graphviz で以下のようなコードで生成される

    リスト 2 work_flow.dot
     1// graphviz での作成の流れ
 2
 3digraph G1 {
 4
 5    graph [size="4,4"];
 6    node [shape=diamond] d ;
 7    node [shape=parallelogram] b c e;
 8    node [shape=box,style=rounded] a f ;
 9        a [label="スタート"]; 
10        b [label="Kateでtext fileを編集し、\n dotファイルを作成"];
11        c [label="xdotで確認"];
12        d [label="正しくできているか"];
13        e [label="sphinxに取り込む"];
14        f [label="エンド"];
15        
16        
17        a->b;
18        b->c;
19        c->d;
20        d->e [label="Yes"];
21        d->b [label="No"];
22        e->f;
23        
24}

    フローチャートが完成していれば xdot でファイルを開くと以下のように表示される

    ../_images/0514-4.png

  3. sphinx に取り込む:

    .. graphviz:: work_flow.dot

ないしは、（推奨）:

.. graphviz::
    :caption: graphvizでフローチャートを作成する際の主な流れ

    digraph G1 {

        graph [size="4,4"];
        node [shape=diamond] d ;
        node [shape=parallelogram] b c e;
        node [shape=box,style=rounded] a f ;
            a [label="スタート"];
            b [label="Kateでtext fileを編集し、\n dotファイルを作成"];
            c [label="xdotで確認"];
            d [label="正しくできているか"];
            e [label="sphinxに取り込む"];
            f [label="エンド"];


            a->b;
            b->c;
            c->d;
            d->e [label="Yes"];
            d->b [label="No"];
            e->f;

    }

実行例