Creating Flowcharts with Sphinx#
An extension for Sphinx that enables drawing flowcharts and other diagrams.
Block diagrams (blockdiag)
Sequence diagrams (seqdiag)
Activity diagrams (actdiag)
Network diagrams (nwdiag)
Configuration method#
Package installation#
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
Extensions settings for conf.py#
conf.py#
1extensions = [
2 'sphinxcontrib.blockdiag',
3 'sphinxcontrib.seqdiag',
4 'sphinxcontrib.actdiag',
5 'sphinxcontrib.nwdiag',
6 'sphinxcontrib.rackdiag',
7 'sphinxcontrib.packetdiag',
8]
Specifying Image File Format Selection#
PNG か SV
conf.py#
1# blockdiag
2blockdiag_html_image_format = 'SVG'
Japanese Font#
To enable output of Japanese strings, a font file in ttf format is required.
conf.py font setting#
conf.py#
1# blockdiag-font
2blockdiag_fontpath = 'docs/_font/ipaexg.ttf'
Usage example#
Described within the blockdiag directive [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 }
Related links