sphinxでフロー図を表現する#

フロー図などを作図可能なSphinxの拡張機能

  • ブロック図(blockdiag)

  • シーケンス図(seqdiag)

  • アクティビティ図(actdiag)

  • 論理ネットワーク図(nwdiag)

設定方法#

パッケージインストール#

  • sphinxcontrib-blockdiag

  • sphinxcontrib-seqdiag

  • sphinxcontrib-actdiag

  • sphinxcontrib-nwdiag

pip:

pip install sphinxcontrib-actdiag sphinxcontrib-blockdiag sphinxcontrib-nwdiag sphinxcontrib-seqdiag

poetry:

poetry add sphinxcontrib-actdiag sphinxcontrib-blockdiag sphinxcontrib-nwdiag sphinxcontrib-seqdiag

conf.pythのextensions設定#

conf.py#
1extensions = [
2  'sphinxcontrib.blockdiag',
3  'sphinxcontrib.seqdiag',
4  'sphinxcontrib.actdiag',
5  'sphinxcontrib.nwdiag',
6  'sphinxcontrib.rackdiag',
7  'sphinxcontrib.packetdiag',
8]

イメージファイル形式選択の指定#

PNG か SV

conf.py#
1# blockdiag
2blockdiag_html_image_format = 'SVG'

日本語フォント#

日本語文字列を出力可能にするためにフォントファイルttf形式のファイルが必要となる。

IPAexフォント

conf.pythのfont設定#

conf.py#
1# blockdiag-font
2blockdiag_fontpath = 'docs/_font/ipaexg.ttf'

書き方のサンプル#

blockdiagディレクティブ内に記載 [1]

 1code
 2.. blockdiag::
 3
 4  blockdiag {
 5    // ノード設定
 6    A [label = "春"];
 7    B [label = "夏"];
 8    C [label = "秋"];
 9    D [label = "冬"];
10
11    // ラベル
12    A -> B [label = "梅雨", textcolor="orange"];
13    B -> C [label = "残暑", textcolor="pink"];
14    C -> D [label = "紅葉", textcolor="red"];
15    D -> A [label = "花見", textcolor="green"];
16  }
blockdiag 春 夏 秋 冬 梅雨 残暑 紅葉 花見

関連リンク