Scrapbox:d3-graphvizを実行する
/masui/D3をScrapboxで実行する
← 元ネタです。
d3-graphviz
← こいつを足しました。
suto3/rund3: D3 running environment
https://suto3.github.io/rund3?p=suto3/Scrapbox:d3-graphvizを実行する&c=d3.js&s=d3.css
↑こんな感じで実行します。
code:d3.css
/* */
code:d3.js
d3.select("#graph").graphviz()
.fade(false)
.renderDot(
code: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の受信"
;
}
`
code:d3.js
);
実行
Scrapbox-howto.icon
graphviz.icon
d3.js.icon
Scrapbox-tips.icon