@ledsun blog

Hのキーがhellで、Sのキーがslaveだ、と彼は思った。そしてYのキーがyouだ。

marmaid.jsを使ってシーケンス図を書くためのHTMLファイルのテンプレート

SPAのような、あるページを表示するときにブラウザからサーバーへ複数回のリクエストを送るWebサイトがあります。 シーケンスそのものは複雑ではありませんが、複数種類のリクエストを送信していることを強調したいことがあります。 そんなときにサッとシーケンス図を描いて図示できると便利です。

簡単な図なのでわざわざ作図ツールを使うほどではありません。 なるべく手軽にシーケンス図を書きたいです。 そこで思いつきました。 marmaid.jsを組み込んだHTMLファイルを用意します。 例えば次のHTMLファイルです。

これをブラウザで表示すればシーケンス図が得られます。

f:id:ledsun:20220318200816p:plain
ブラウザでひらいくとシーケンス図が得られます。

お好みのテキストエディタで編集して、好きなシーケンス図が得られます。

marmaid.jsにはライブエディタもあります。 よく考えたら、要りませんでした。