まずは、簡単な例とそのソースです。
JavaScriptの1行目で、シーケンス図作成マネージャのインスタンスを作成します。引数は、シーケンス図作成の起点となる要素のIDです。このマネージャで、各部品を表示するためのフローラインを作成します。ちなみに、フローライン（FlowLine）といのは、このツールのAPI用に勝手に割り当てたワードで、正式な名称ではありません。一般的には動線を意味します。
2行目と3行目で、mainLineとrightLineという2つのフローラインを作成しています。フローラインの間は、デフォルトでは1em空くような指定となっています。mainLineは、各部品（開始・終了・処理・分岐等）を表示するメインのフローラインです。rightLineは、分岐から右に表示される矢印のためのものです。矢印を表示する方向にフローラインが存在する場合、その中央を通るように調整されます。フローラインの幅は、デフォルトでは0なのですが、この例では、cssで5emに指定してあります。
4行目以降が、各部品の作成です。フローラインに追加する形で作成します。フローラインに既に部品が存在する時点で部品を追加すると、自動的に直前の部品とラインで結びます。但し、実際にラインが描画されるのは、addEnd()が呼び出されたタイミングとなります。
4行目と9行目で、開始マークと終了マークを作成します。
5行目と7行目で、処理を作成します。
6行目で、分岐を作成します。分岐は、デフォルトの状態では、例のようにYesとNoが表示されます。
8行目で、合流を作成します。合流は、サイズ0の要素で、矢印の目標等に使用します。
10行目で、6行目で作成した分岐から8行目で作成した合流までを、矢印で結びます。
接続元の部品から、接続先の部品へ、矢印で結ぶ指示となります。第1引数は接続元のラインを開始する位置、第3引数は接続先のラインを終了させる位置です。
接続元や接続先の位置は、方位で指定する形になります。指定方法は以下のようになります。
先程の例に含まれない機能と、いくつかのカスタマイズ方法等を紹介します。
分岐の表現のカスタマイズ方法と、ループ制御の表現方法を紹介します。
この例では、メインのフローラインの両側にラインを表示する必要があるため、事前に3つのフローラインを作成しています。
2行目で分岐を作成しています。3行目がそのオプションです。表示するテキストを、デフォルトのYesの代わりにはい、Noの代わりにいいえ、としています。また、表示する位置もはいを分岐の西側（左側）、いいえを南側（下側）に配置しています。
6行目で、終了の上の合流を作成しています。この合流は、フローライン上の直前の部品である、5行目で作成した合流とは、ラインで結びたくないので、ラインを描画しない指定をしています。
9行目で、分岐のはいと終了の上の合流を通常のライン（矢印ではない）で結んでいます。
条件分岐で、分岐先でのみ異なる処理を行うなどは、通常あることです。この様な場合、処理を並列で表示することになります。
この例では4つのフローラインを作成しています。
1行目で、左側のフローラインに処理を追加しています。
2行目で、左側から2番めのフローラインに処理を追加しています。この時、オプションとして基準となる部品を指定しています。この指定は、追加する部品を基準となる部品の横に並べて表示させるものです。部品の高さが異なる場合、デフォルトでは中央合わせで表示します。
3行目ではTOP、4行目ではBOTTOMを指定していますが、これはそれぞれ上合わせ下合わせの指定です。
1行目で左側のフローラインに、2行目で左側から2番めのフローラインに、3行目で左側から3番めのフローラインにそれぞれ合流を作成しています。左側から2番めと3番めの合流は、直前の部品と矢印で結ぶため、自動的にラインを描画しない指定をしています。
長いフローを、複数列に表示して、見やすくしたい場合はよくあります。
この例では、処理１を行うや処理２を行うを表示しているmainLineと、処理３を行うや処理４を行うを表示しているmainLine2という２つのフローラインの他に、gapというフローラインを作成しています。gapは、部品を格納しないので、幅は0となります。
JavaScriptの11行目で、処理２を行うから処理３を行うへ直接ラインを結んでいますが、この時縦のラインがgapフローラインを通るように調整されます。
交差は、表示上どうしてもライン同士が交差してしまうが、合流しているわけではないことを表現したい場合に使用します。
また、終了ポイントを複数作成する場合も注意が必要なので、紹介します。
この例では5つのフローラインを作成しています。幅やマージンは、cssで指定しています。指定方法の詳細は、「CSSによるカスタマイズ」を参照してください。
JavaScriptの2行目で2つ目の分岐の横に、交差を作成しています。
4行目でエラー終了を作成しています。この時点ではフィニッシュ処理（ラインの描画）を行わせたくないので、オプションでフィニッシュ処理を行わない指定をしています。終了ポイントを複数作成する場合は、最後の終了ポイント以外では、必ずこの指定が必要となります。指定しないと、複数回ラインが表示されてしまいます。
下記が、ラインの表示部分のみ抜粋したJavaScriptソースです。
1行目で、成功？からエラーコード設定へ、ラインを表示しています。また、2行目で、エラーコード設定からエラー終了へ、矢印を表示しています。直線で繋ぐだけの場合は、lineToやarrowToを使用します。
交差と複数の終了ポイントで使用したCSSの指定は以下の通りです。このドキュメント全体で、leftLineとrightLineは幅を5emと指定しています。
フローラインの位置の調整は、margin-leftを設定します。左に移動させたい場合は負の値を指定し、右に移動させたい場合は正の値を指定します。
デフォルトの状態で、フローラインの間は1em空いているので、-1emを指定すれば右側のフローラインとの空きは0になります。
実は、ラインの色などをカスタマイズするのは、現在のSVCは非常に苦手です。矢印部分（markerとして定義）とライン部分の色や線種を、簡単にリンクする方法が無いからです。そこで、このライブラリでは、それぞれのフローチャート毎に矢印部分を定義し、固有のIDを付けてカスタマイズ可能としています。
1〜3行目が矢印部分の色の指定です。IDは、ArrowsFC_＋[起点となる要素のID]です（この例ではflow07）。矢印部分は、ラインの太さによってサイズや太さが変わるので、この例では色の指定のみしています。
4〜9行目がライン部分の色と太さの指定です。4行目が通常のラインの指定です。5行目が交差の半円部分になります。6行目が矢印のラインの指定です。ラインの色や太さ・線種などを変更する場合は、通常この3つをまとめて指定します。
部品の枠線は、開始マークと終了マーク・処理に関しては、通常のHTML要素のborderで表示し、分岐に関してはSVGにより表示しています。
1〜3行目が開始マークと終了マーク・処理の枠線の指定、4〜7行目が分岐の枠線の指定です。8〜10行目は全ての部品に対する指定となります。
フローチャートが影響を受ける範囲のフォントサイズを変更する場合、起点となる要素かその先祖に指定してください。起点となる要素の子孫に指定すると、表示が崩れます。
また、フォントサイズに％指定をした場合など、フォントサイズが少数点以下になることがあります。小数点以下になると表示が崩れることがあるので、内部で小数点以下が無くなるよう調整しています。このため、想定とは異なる表示となることがあります。
Firefoxで印刷やPDF出力を行う時、表示が崩れることがあります。その場合は、フォントサイズを偶数ピクセル（16pxや14px等）に指定してください。
CSSのdisplay: flex;やmargin: auto;等を指定すると、表示が崩れます。スクリプトで動的に表示を行っていることが原因です。この為、レンダリング後にdisplay: flex;でセンタリングを行います。このページのサンプルは、全てこの方法によりセンタリングを行っています。
フォントサイズを変更するで使用したスクリプトです。終了ポイントを作成し、ラインを表示した後に、センタリングの指示を行っています。
下記より、アーカイブをダウンロードして、適当なディレクトリに解凍してください。
[日付] [サイズ] byte
[SHA256]
アーカイブを解凍すると、以下のようなディレクトリ構成となります。
dir/
+-jslib/
+-01.00.00.01/
+-jsdraw2.css
+-jsdraw2.js
+-jsdrawSD2.css
+-jsdrawSD2.js
+-jsdrawFC.css
+-jsdrawFC.js
+-jswebutilities.js
+-sequence_template.html
+-flow_template.html
flow_template.htmlがHTMLのテンプレートで、内容は次章で簡単に解説します。
必要なライブラリをロードし、最低限のコードを記述したテンプレートHTMLです。
必要なスクリプトとスタイルシートは、上記の5ファイルです。
ライブラリのパスなどは、配置した環境に合わせて読み替えてください。
16行目から25行目までが、シーケンスを記述するスクリプトになります。
15行目でloadイベントに登録していますが、DOMContentLoadedイベントでも問題ありません。
16行目でマネージャのコンストラクタに渡しているidは、30行目のdiv要素のidです。