Javascriptでフローチャートを描く

フローチャートの描き方について

機能の概要

まずは、簡単な例とそのソースです。

JavaScriptの1行目で、シーケンス図作成マネージャのインスタンスを作成します。引数は、シーケンス図作成の起点となる要素のIDです。このマネージャで、各部品を表示するためのフローラインを作成します。ちなみに、フローライン(FlowLine)といのは、このツールのAPI用に勝手に割り当てたワードで、正式な名称ではありません。一般的には動線を意味します。

必要なHTML

JavaScript ソース

2行目と3行目で、mainLinerightLineという2つのフローラインを作成しています。フローラインの間は、デフォルトでは1em空くような指定となっています。mainLineは、各部品(開始・終了・処理・分岐等)を表示するメインのフローラインです。rightLineは、分岐から右に表示される矢印のためのものです。矢印を表示する方向にフローラインが存在する場合、その中央を通るように調整されます。フローラインの幅は、デフォルトでは0なのですが、この例では、css5emに指定してあります。

4行目以降が、各部品の作成です。フローラインに追加する形で作成します。フローラインに既に部品が存在する時点で部品を追加すると、自動的に直前の部品とラインで結びます。但し、実際にラインが描画されるのは、addEnd()が呼び出されたタイミングとなります。

4行目と9行目で、開始マークと終了マークを作成します。

5行目と7行目で、処理を作成します。

6行目で、分岐を作成します。分岐は、デフォルトの状態では、例のようにYesNoが表示されます。

8行目で、合流を作成します。合流は、サイズ0の要素で、矢印の目標等に使用します。

10行目で、6行目で作成した分岐から8行目で作成した合流までを、矢印で結びます。

接続元の部品から、接続先の部品へ、矢印で結ぶ指示となります。第1引数は接続元のラインを開始する位置、第3引数は接続先のラインを終了させる位置です。

接続元や接続先の位置は、方位で指定する形になります。指定方法は以下のようになります。

NW
NNW
NNE
NE
ENE
ESE
SE
SSE
SSW
SW
WSW
WNW

機能の詳細

先程の例に含まれない機能と、いくつかのカスタマイズ方法等を紹介します。

分岐のカスタマイズと、ループ制御の表現

分岐の表現のカスタマイズ方法と、ループ制御の表現方法を紹介します。

この例では、メインのフローラインの両側にラインを表示する必要があるため、事前に3つのフローラインを作成しています。

JavaScript ソース(フローラインの作成箇所などは省略)

2行目で分岐を作成しています。3行目がそのオプションです。表示するテキストを、デフォルトのYesの代わりにNoの代わりにとしています。また、表示する位置もを分岐の西側(左側)南側(下側)に配置しています。

6行目で、の上の合流を作成しています。この合流は、フローライン上の直前の部品である、5行目で作成した合流とは、ラインで結びたくないので、ラインを描画しない指定をしています。

9行目で、分岐のの上の合流通常のライン(矢印ではない)で結んでいます。

並列表示

条件分岐で、分岐先でのみ異なる処理を行うなどは、通常あることです。この様な場合、処理を並列で表示することになります。

この例では4つのフローラインを作成しています。

JavaScript ソース(処理を横に並べて表示している部分のみ抜粋)

1行目で、左側のフローラインに処理を追加しています。

2行目で、左側から2番めのフローラインに処理を追加しています。この時、オプションとして基準となる部品を指定しています。この指定は、追加する部品を基準となる部品の横に並べて表示させるものです。部品の高さが異なる場合、デフォルトでは中央合わせで表示します。

3行目ではTOP、4行目ではBOTTOMを指定していますが、これはそれぞれ上合わせ下合わせの指定です。

JavaScript ソース(合流を横に並べて表示している部分のみ抜粋)

1行目で左側のフローラインに、2行目で左側から2番めのフローラインに、3行目で左側から3番めのフローラインにそれぞれ合流を作成しています。左側から2番めと3番めの合流は、直前の部品と矢印で結ぶため、自動的にラインを描画しない指定をしています。

JavaScript ソース(全体)

長いフローを、複数の列に表示する

長いフローを、複数列に表示して、見やすくしたい場合はよくあります。

この例では、を表示しているmainLineと、を表示しているmainLine2という2つのフローラインの他に、gapというフローラインを作成しています。gapは、部品を格納しないので、幅は0となります。

JavaScriptの11行目で、からへ直接ラインを結んでいますが、この時縦のラインがgapフローラインを通るように調整されます。

JavaScript ソース

交差と複数の終了ポイント

交差は、表示上どうしてもライン同士が交差してしまうが、合流しているわけではないことを表現したい場合に使用します。

また、終了ポイントを複数作成する場合も注意が必要なので、紹介します。

この例では5つのフローラインを作成しています。幅やマージンは、cssで指定しています。指定方法の詳細は、「CSSによるカスタマイズ」を参照してください。

JavaScriptの2行目で2つ目の分岐の横に、交差を作成しています。

4行目でを作成しています。この時点ではフィニッシュ処理(ラインの描画)を行わせたくないので、オプションでフィニッシュ処理を行わない指定をしています。終了ポイントを複数作成する場合は、最後の終了ポイント以外では、必ずこの指定が必要となります。指定しないと、複数回ラインが表示されてしまいます。

JavaScript ソース(『成功?』から『エラー終了』までの表示部分のみ抜粋)

下記が、ラインの表示部分のみ抜粋したJavaScriptソースです。

1行目で、からへ、ラインを表示しています。また、2行目で、からへ、矢印を表示しています。直線で繋ぐだけの場合は、lineToarrowToを使用します。

JavaScript ソース(ラインを表示する部分のみ抜粋)
JavaScript ソース(全体)

CSSによるカスタマイズ

フローラインの幅や位置を指定する

で使用したCSSの指定は以下の通りです。このドキュメント全体で、leftLinerightLineは幅を5emと指定しています。

フローラインの位置の調整は、margin-leftを設定します。左に移動させたい場合は負の値を指定し、右に移動させたい場合は正の値を指定します。

デフォルトの状態で、フローラインの間は1em空いているので、-1emを指定すれば右側のフローラインとの空きは0になります。

『交差と複数の終了ポイント』のフローラインの指定

ラインのカスタマイズ

実は、ラインの色などをカスタマイズするのは、現在のSVCは非常に苦手です。矢印部分(markerとして定義)とライン部分の色や線種を、簡単にリンクする方法が無いからです。そこで、このライブラリでは、それぞれのフローチャート毎に矢印部分を定義し、固有のIDを付けてカスタマイズ可能としています。

CSSによる、ラインの色や太さのカスタマイズ

1〜3行目が矢印部分の色の指定です。IDは、ArrowsFC_[起点となる要素のID]です(この例ではflow07)。矢印部分は、ラインの太さによってサイズや太さが変わるので、この例では色の指定のみしています。

4〜9行目がライン部分の色と太さの指定です。4行目が通常のラインの指定です。5行目が交差の半円部分になります。6行目が矢印のラインの指定です。ラインの色や太さ・線種などを変更する場合は、通常この3つをまとめて指定します。

CSSによる、部品の枠等のカスタマイズ

部品の枠線は、開始マークと終了マーク・処理に関しては、通常のHTML要素のborderで表示し、分岐に関してはSVGにより表示しています。

1〜3行目が開始マークと終了マーク・処理の枠線の指定、4〜7行目が分岐の枠線の指定です。8〜10行目は全ての部品に対する指定となります。

フォントサイズを変更する

フローチャートが影響を受ける範囲のフォントサイズを変更する場合、起点となる要素かその先祖に指定してください。起点となる要素の子孫に指定すると、表示が崩れます。

また、フォントサイズに%指定をした場合など、フォントサイズが少数点以下になることがあります。小数点以下になると表示が崩れることがあるので、内部で小数点以下が無くなるよう調整しています。このため、想定とは異なる表示となることがあります。

Firefoxで印刷やPDF出力を行う時、表示が崩れることがあります。その場合は、フォントサイズを偶数ピクセル(16pxや14px等)に指定してください。

フローチャートを表示しているHTML
CSSの指定

センタリング

CSSのdisplay: flex;margin: auto;等を指定すると、表示が崩れます。スクリプトで動的に表示を行っていることが原因です。この為、レンダリング後にdisplay: flex;でセンタリングを行います。このページのサンプルは、全てこの方法によりセンタリングを行っています。

センタリングの指示を行うJavaScript

で使用したスクリプトです。終了ポイントを作成し、ラインを表示した後に、センタリングの指示を行っています。

ダウンロードとセットアップ

ライブラリのダウンロード

下記より、アーカイブをダウンロードして、適当なディレクトリに解凍してください。

  [日付]   [サイズ] 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のテンプレート

必要なライブラリをロードし、最低限のコードを記述したテンプレートHTMLです。

テンプレートHTML

必要なスクリプトとスタイルシートは、上記の5ファイルです。

ライブラリのパスなどは、配置した環境に合わせて読み替えてください。

16行目から25行目までが、シーケンスを記述するスクリプトになります。

15行目loadイベントに登録していますが、DOMContentLoadedイベントでも問題ありません。

16行目でマネージャのコンストラクタに渡しているidは、30行目div要素のidです。