RailRoad Diagramを書くツールを見てみる

Python
2020.08.29

はじめに

正規表現をわかりやすく図にしてくれる鉄道図。

オンラインのサービスはすでにあるけど、PythonでもSVGで出力してくれるツールがある。

SVGにするとBlenderでインポートできるので使い方を見てみる

参照元

pypi.org

github.com

マニュアルを軽く見てみる

Diagram

コンストラクタ パラメータ

  • css
    • 図に含めるCSS
    • default = railrload.DEFALT_STYLE
    • 自前で用意している別ファイルを使用するため、明示的にCSSを含めない場合、css=Noneとする
  • type
    • simple or complex
    • default = simple
    • 始点と終点の形状を変える事ができる

method

format
  • パディングの追加ができる
  • 図作成後に .format(...padding)
    • 初期値は padding 20px だが追加のパディングが 0-4 指定できる
writeSvg(cb)
  • 図を出力するメソッド
  • ファイル出力するなら f.write を渡す
  • 文字列として出力するなら sys.stdout.write を渡す
walk(bc)

Components

Leaves(葉)

  • Terminal(text, href?, title?, cls?) または文字列
    • 最初以外の引数は任意
      • href
      • title svgのtitle エレメントをそのエレメントに追加する
        • これによってhover text、スクリーンリーダーへの descriptionの追加、他のアシスト技術などに追加
      • デフォルトの terminal を拡張するためのもの？
  • NonTerminal(text, href) インストラクションまたは他のプロダクションを表す
    • パラメータの意味は Terminal と同じ
    • デフォルトクラスは non-terminal
  • Comment(text, href) コメント
    • パラメータの意味は Terminal と同じ
    • デフォルトクラスは non-terminal
  • Skip() 空の行
  • Start(type, label) と End(type) start/endの形状
    • これらはデフォルトで適用される
    • もし独自で追加したい場合は、Start() を呼び出して自分でつける事ができる
    • typeは “simple” または “complex” のいずれかを取る

Containers

Sequence(…children)
from railroad import Diagram, Sequence
import sys
d = Diagram("foo", Sequence("1", "2", "3"))
path = "images/sequence.svg"
with open(path, mode="w") as f:
d.writeSvg(f.write)Code language: JavaScript (javascript)
Stack(… children)
from railroad import Diagram, Stack
import sys
d = Diagram("foo", Stack("1", "2", "3"))
path = "images/stack.svg"
with open(path, mode="w") as f:
d.writeSvg(f.write)Code language: JavaScript (javascript)
OptionalSequence(…children)
  • すべてのアイテムが個別なオプション
  • 少なくとも１つ選択しなければならない
from railroad import Diagram, OptionalSequence
import sys
d = Diagram("foo", OptionalSequence("1", "2", "3"))
path = "images/optionalsequence.svg"
with open(path, mode="w") as f:
d.writeSvg(f.write)Code language: JavaScript (javascript)
  • 🤔なにか切れていますね
Choice(index, …children)
  • 正規表現の | のようなもの
  • index はデフォルト値を示す。0スタート
  • ここでは3番目をデフォルト値をしたイメージ
from railroad import Diagram, Choice
import sys
d = Diagram(Choice(2, "first" , "second", "third"))
path = "images/choice.svg"
with open(path, mode="w") as f:
d.writeSvg(f.write)Code language: JavaScript (javascript)
MultipleChoice(index, type, …children)
  • CSSの || または &&文法
  • チェックボックスのオプションみたいなイメージ(複数可)
  • index はデフォルト値を示す。0スタート
  • type は “any”任意と”all”すべてがある
    • 任意個数の選択で良い
    • すべてを選択しなければならない
from railroad import Diagram, MultipleChoice
import sys
d = Diagram(MultipleChoice(0, "any","first" , "second", "third"))
path = "images/multiplechoice_any.svg"
with open(path, mode="w", encoding="utf-8") as f:
d.writeSvg(f.write)Code language: JavaScript (javascript)
from railroad import Diagram, MultipleChoice
import sys
d = Diagram(MultipleChoice(0, "all","first" , "second", "third"))
path = "images/multiplechoice_all.svg"
with open(path, mode="w", encoding="utf-8") as f:
d.writeSvg(f.write)Code language: JavaScript (javascript)
HorizontalChoice(… children)
  • Choiceと同じ。水平に積み上げられる
  • 選択が高すぎる場合に最適
  • 画面が細い場合に自動的に水平になる
from railroad import Diagram, HorizontalChoice, Choice
import sys
d = Diagram(HorizontalChoice(Choice(0, "1","2","3","4","5"),Choice(0, "6","7","8","9","10")))
path = "images/horizontalchoice.svg"
with open(path, mode="w", encoding="utf-8") as f:
d.writeSvg(f.write)Code language: JavaScript (javascript)
Optional(child, skip?)
  • 正規表現の ? のようなもの
  • Choice(1, Skip(), child) の略記
OneOrMore(child, repeat?)
  • 正規表現の + のようなもの
  • repeat?はオプション。通過する必要がある回数を書く
AlternatingSequence(option1, option2)
  • OneOrMoreに似ている
  • 2つの選択肢を交互に切り替える
ZeroOrMore(child, repeat?, skip?)
Group(child、label?)

オプション

調整できる幾つかの値があります。大文字の内容がモジュールの先頭にあります。これらは railroad.OPTION_NAME_HERE を介して調整できます。ノート: もしCSSのテキストサイズが変更したい場合、ここでできます

VS (vertical separation)

  • 2つのアイテムの間の隙間の数(px)。
  • デフォルトは 8px
  • VS計算時にwidthは考慮されない

AR

  • arcsの半径。px。
  • 枝分かれするChoiceのような容器に使われる。
  • 自明ではない図のサイズに比較的大きな影響を与える
  • タイトでもルーズでも見た目は良くなる

DIAGRAM_CLASS

  • <svg> CSSスタイルシートで使用するために各図のルートに設定されるクラス
  • デフォルトは railroad-diagram

STROKE_ODD_PIXEL_LENGTH

  • デフォルトではstrokeのピクセル長に奇数を使います
  • ラスタライズアーティファクトのため、2つの要素間の距離の半分が見た目がベストです
  • 偶数を使う場合は False に設定する

CHAR_WIDTH

  • 通常のテキストの文字のおおよその幅
  • デフォルトは8.5

COMMENT_CHAR_WIDTH

  • commentテキスト内の文字のおおよその幅(px単位)
  • デフォルトは7
タイトルとURLをコピーしました