Graphviz:状態遷移図を作ってみよう - suto3の大福帳

Graphviz:状態遷移図を作ってみよう

状態遷移図とは

くわしくはこちら → 状態遷移図（STD:state transition diagram）

状態を定義（起こりうることを数パターンにまとめる）

各状態でおこる入力を定義（これも起こりうることを数パターンにまとめる）

状態と入力の対から、次の状態に線を引く

（ちゃんと遷移するようなコードを書く）

状態遷移図の書き方

状態を書き、そこから矢印を引っ張る

矢印が場合分け。入力などで分岐（などが曲者）

場合分けが全ての事を網羅。

状態の定義が場合分けに対して適切

場合によっては終端状態を置く

状態遷移図の例 : 自動ドア

1. 閉まっている状態

2. 開いている状態

センサの状態

1. センサ反応（開ける）

2. センサ無反応（閉じる）

↓こんな

code:d3.js

const digraph = ` digraph automata_0 {

size ="8.5, 11";

rankdir = LR;

ratio=auto;

label="自動ドアの状態遷移図";

node fontsize = 12, shape = circle;

edge fontsize = 10;

s1 label="閉まっている状態";

s2 label="開いている状態";

s1 -> s2 label="センサ反応";

s2 -> s1 label="センサ無反応";

s2 -> s2 label="センサ反応";

s1 -> s1 label="センサ無反応";

}

`

実行

code:d3.js

d3.select("#graph").graphviz()

.fade(false)

.renderDot(digraph);

code:vizScript.js

const graph = ` digraph automata_0 {

size ="8.5, 11";

rankdir = LR;

ratio=auto;

label="自動ドアの状態遷移図";

node fontsize = 12, shape = circle;

edge fontsize = 10;

s1 label="閉まっている状態";

s2 label="開いている状態";

s1 -> s2 label="センサ反応";

s2 -> s1 label="センサ無反応";

s2 -> s2 label="センサ反応";

s1 -> s1 label="センサ無反応";

}

`;

code:vizScript.js

const viz = new Viz();

viz.renderSVGElement(graph)

.then(function(element) {

const editor = document.getElementById('editor');

editor.appendChild(element);

});

viz-script-button.icon ←viz-script-button実行ボタン