@ledsun blog

無味の味は佳境に入らざればすなわち知れず

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

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

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

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

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

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

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