2019/07/10
Graphvizを使ってフロー図等をテキストで描く
はじめに
Sphinxでドキュメントをまとめてる際に簡単なフローチャートや相関図などを入れたかったため
互換性のあるモジュールで出来るものを探しててgraphvizを導入しました。
互換性のあるモジュールで出来るものを探しててgraphvizを導入しました。
サンプルや導入例を記載します。
インストール
Sphinxで標準モジュールがdot言語というものを使って出来ると書いてありました。
が、そもそもdotが使えるソフトウェア環境が前提だったようで
|
1 | yum install -y graphviz graphviz-devel |
を実行して必要なモジュールツールをインストールします。
Sphinxでは
|
1 2 3 4 5 | extensions = [ 'sphinx.ext.autodoc', 'sphinx.ext.imgmath', + 'sphinx.ext.graphviz' ] |
と拡張モジュールを記述するだけでOK.
フロー図
LauncCartの購入フローを参考に。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | digraph storefront { node [shape=circle size="4,4"] top complete; node [shape=box] product cartlist login address delivery payment confirm card ; top[label="トップ"]; product[label="商品詳細ページ"]; cartlist[label="カート一覧"]; login[label="ログイン"]; address[label="お届け先選択 or 複数配送先指定"]; delivery[label="配送方法,日時選択"]; payment[label="支払い方法選択\nクーポン,使用ポイント指定"]; confirm[label="確認画面"]; card[label="カード情報入力"]; npmodal[label="AFTEEモーダル表示"]; complete[label="完了"]; sendmail[label="注文確認メール送信"]; ship_new[label="お届け先住所入力"]; top -> product; product -> cartlist [label="カートへ追加\n(存在,在庫等チェック)"]; cartlist -> login [label="未ログイン"]; cartlist -> address [label="ログイン済み"]; login -> login [label="ログイン失敗"]; login -> address [label="ログイン"]; login -> ship_new [label="非会員購入"]; ship_new -> delivery [label="フォーム入力"]; address -> delivery; delivery -> payment; payment -> confirm; confirm -> card [label="クレカ決済"]; confirm -> npmodal [label="AFTEE決済"]; confirm -> complete [label="その他の決済"]; npmodal -> complete [label="決済成功"]; card -> complete [label="決済成功" bgcolor="#F08080"]; complete -> sendmail; } |
Git遷移図
遷移図という区分でもないが要素間の遷移や説明の簡易事例
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | digraph git_commit2 { rankdir=RL; subgraph cluster0 { node [shape=record]; head [shape=record,label="HEAD | maint", style="dotted"]; head_new [shape=record,label="HEAD | maint" style="filled" fillcolor="#ffd8b2"]; master [shape=record,label="master" style="filled" fillcolor="#ffd8b2"]; struct2 [shape=record,label="ed489" style="filled" fillcolor="#c0f0c0"]; struct3 [shape=record,label="da985" style="filled" fillcolor="#c0f0c0"]; struct4 [shape=record,label="c10b9" style="filled" fillcolor="#c0f0c0"]; struct5 [shape=record,label="b325c" style="filled" fillcolor="#c0f0c0"]; struct6 [shape=record,label="a47c3" style="filled" fillcolor="#c0f0c0"]; struct7 [shape=record,label="1800b" style="filled" fillcolor="#c0f0c0"]; head -> struct6 [label="X"]; head_new-> struct7; head -> head_new [style="dotted"]; master -> struct2; struct2 -> struct3 -> struct4 ->struct5 -> struct6; struct7 -> struct6; } subgraph cluster1 { node [shape=record]; stage [shape=record,label="Stage (Index)" style="filled" fillcolor="#a0a0ff"]; directory [shape=record,label="Working Directory" style="filled" fillcolor="#ffa0a0"]; } stage -> struct7; } |
オンライン編集ツール
https://dreampuf.github.io/GraphvizOnline/
Author Profile
スターフィールド編集部
SHARE
