jsでシーケンスダイアグラムを描画するjs-sequence-diagrams

なんか面白そうなので試してみました。

underscore.jsとRapha〓lに依存してるので用意します。

Underscore.js
Rapha〓l―JavaScript Library

        <div id="diagram"></div>

        <script src="js/vendor/underscore.js"></script>
        <script src="js/vendor/raphael-min.js"></script>
        <script src="js/vendor/sequence-diagram-min.js"></script>

        <script>
              var diagram = Diagram.parse("A->B: Does something");
              diagram.drawSVG('diagram');
        </script>

一部抜粋してますが、これだけで表示されました。

Does somethingのところに日本語をいれたら、表示されなかったんですが、以下のようにthemeにsimpleを指定すると表示されました。
デフォルトで手書き風の"hand"が使われるんですね。

        <script>
              var diagram = Diagram.parse("A->B: 何かする");
              diagram.drawSVG('diagram', {theme: 'simple'});
        </script>

適当にダイジェスト認証のシーケンス図を書いてみた

Client->Server: 認証が必要なページにアクセス
Note right of Server: nonceの算出
Server->Client: 401でnonceを返す
Note left of Client: nonceを鍵ににusernameとpasswordをハッシュ
Client->Server: Authorizationヘッダをつけてアクセス
Note right of Server: クライアントと同様にハッシュ値を計算し、送られたものと比較
Server->Client: 200を返す