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


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

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

実際の手順
-----------

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

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

    .. image:: 0514-2.png
        :scale: 50%


2. :program:`xdot` で確認

    .. image:: 0514-1.png
         :scale: 50%
    
    ちなみに図1は :program:`graphviz` で以下のようなコードで生成される

    .. literalinclude:: work_flow.dot
        :linenos:
        :caption: work_flow.dot
    
    フローチャートが完成していれば :program:`xdot` でファイルを開くと以下のように表示される
    
    .. image:: 0514-4.png
        :scale: 50%
    
 
 
3.  :program:`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;
                
        }


実行例
------

.. toctree::
    :numbered:
    :maxdepth: 2

    shapes
    ../demo/demo