Scrapbox:d3-graphvizを実行する
/masui/D3をScrapboxで実行する← 元ネタです。
d3-graphviz ← こいつを足しました。
↑こんな感じで実行します。
d3.css/* */d3.jsd3.select("#graph").graphviz()
.fade(false)
.renderDot(d3.js `digraph {\
"CLOSED"->"LISTEN" [label="パッシブオープン（TCB生成）"];
"CLOSED"->"SYN_SENT" [label="アクティブオープン（TCB生成とSYNの送信）"];
"LISTEN"->"SYN_RECEIVED" [label="SYNの受信（SYN/ACKの送信）"];
"LISTEN"->"CLOSED" [label="クローズ（TCB削除）"];
"LISTEN"->"SYN_SENT" [label="SENT（SYNの送信）"];
"SYN_RECEIVED"->"ESTABLISHED" [label="ACKの受信"];
"SYN_RECEIVED"->"FIN_WAIT_1" [label="クローズ（FINの送信）"];
"SYN_SENT"->"ESTABLISHED" [label="SYN/ACKの受信（ACKの送信）"];
"SYN_SENT"->"SYN_RECEIVED" [label="SYNの受信（ACKの送信）"];
"ESTABLISHED"->"FIN_WAIT_1" [label="クローズ（FINの送信）"];
"FIN_WAIT_1"->"FIN_WAIT_2" [label="ACKの受信"];
"FIN_WAIT_1"->"CLOSING" [label="FINの受信（ACKの送信）"];
"FIN_WAIT_1"->"TIME_WAIT" [label="FIN ACKの受信（ACKの送信）"];
"FIN_WAIT_2"->"TIME_WAIT" [label="FINの受信（ACKの送信）"];
"CLOSING"->"TIME_WAIT" [label="FIN ACKの受信"];
"TIME_WAIT"->"CLOSED" [label="タイムアウト待ち（TCB削除）"];
"ESTABLISHED"->"CLOSE_WAIT" [label="FIN ACKの受信"];
"CLOSE_WAIT"->"LAST_ACK" [label="クローズ（FINの送信）"];
"LAST_ACK"->"CLOSED" [label="FIN ACKの受信"];
}
`d3.js );