「システム設計書やマニュアル作成のために、Web上で動的にフローチャートを描画したい」
「画像ではなく、コードベースで管理できるフローチャートツールが欲しい」
そんなニーズに応えるのが、今回ご紹介するJavaScript用フローチャート描画ライブラリです。
HTMLと数行のJavaScriptコードだけで、分岐やループを含む複雑なフローチャートをブラウザ上に描画できます。この記事では、ライブラリの導入方法から具体的なコーディング手順までを解説します。
目次
1. ライブラリのダウンロードと準備
まずは必要なファイルを準備しましょう。以下のリンクからライブラリ一式をダウンロードしてください。
解凍すると jslib フォルダなどが展開されます。これらをプロジェクトフォルダに配置し、HTMLファイルから読み込みます。
HTMLテンプレート
以下は、ライブラリを読み込んでフローチャートを表示するための最小限のHTML構成です。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>フローチャート描画サンプル</title>
<!-- スタイルシートの読み込み -->
<link rel="stylesheet" href="./jslib/01.00.00.00/jsdraw2.css" type="text/css" />
<link rel="stylesheet" href="./jslib/01.00.00.00/jsdrawFC.css" type="text/css" />
<!-- スクリプトの読み込み -->
<script type="text/javascript" src="./jslib/01.00.00.00/jswebutilities.js"></script>
<script type="text/javascript" src="./jslib/01.00.00.00/jsdraw2.js"></script>
<script type="text/javascript" src="./jslib/01.00.00.00/jsdrawFC.js"></script>
</head>
<body>
<!-- ここにフローチャートが描画されます -->
<div id="flow01"></div>
</body>
</html>2. 基本的なフローチャートの描き方
JavaScriptを使って、シンプルな「開始 → 処理 → 分岐 → 終了」の流れを描いてみましょう。
JavaScriptコード例
window.addEventListener("load", ...) 内などに以下のコードを記述します。
// 1. マネージャのインスタンス化（引数は描画先のdiv ID） const fcManager = new com.yscjp.jsapp.draw.FCManager('flow01');
// 2. フローライン（動線）の作成 const mainLine = fcManager.addFlowLine('mainLine'); const rightLine = fcManager.addFlowLine('rightLine'); // 分岐用
// 3. 部品の配置 const start = mainLine.addStart('start', '開始'); const process01 = mainLine.addProcess('process01', '処理1を実行'); const branch01 = mainLine.addBranch('branch01', '成功？'); const process02 = mainLine.addProcess('process02', '処理2を実行'); const confluence01 = mainLine.addConfluence('confluence01'); // 合流点 const end = mainLine.addEnd('end', '終了');
// 4. 分岐の矢印を結ぶ // 分岐(branch01)の東(E)から、合流点(confluence01)の東(E)へ矢印を引く branch01.connectArrowTo('E', confluence01, 'E');解説：
addFlowLine：要素を配置する縦のラインを定義します。addStart/addEnd：開始・終了の端子を作成します。addProcess：処理ボックスを作成します。addBranch：ひし形の分岐を作成します。connectArrowTo：要素間を矢印で結びます。引数は「開始位置の方角」「対象要素」「終了位置の方角」です（N=北, E=東, S=南, W=西）。
3. 応用：分岐のカスタマイズとCSS調整
デフォルトでは分岐に「Yes/No」が表示されますが、これを「はい/いいえ」に変更したり、デザインを調整したりすることも可能です。
分岐テキストの変更
addBranch の第3引数にオプションを指定します。
const branch01 = mainLine.addBranch('branch01', '終了？', { yesText:'はい', noText:'いいえ', yesDirection:'W', noDirection:'S' } );CSSでのデザイン調整
フローチャートの各要素にはクラスが付与されているため、CSSで色や太さを変更できます。
/* 線の色を赤にする */
#flow01
.com_yscjp_jsapp_draw_FC_class_line_solid,
#flow01
.com_yscjp_jsapp_draw_FC_class_arrow_solid { stroke: red; stroke-width: 2px; }
/* 処理ボックスの枠線を変更 */
#flow01
.com_yscjp_jsapp_draw_FC_class_parts_border { border: 2px solid orange; border-radius: 4px; }まとめ
このライブラリを使えば、専用の作図ソフトを使わずに、コードベースでメンテナンス可能なフローチャートをWebサイトに埋め込むことができます。
仕様変更があってもJavaScriptの修正だけですぐに反映できるため、ドキュメント管理の効率化にも役立つでしょう。ぜひ活用してみてください。
【推奨】業務システム化に有効なアイテム
生成AIを学ぶ
起業のためのシステム化
【シゴトAI】実務で使えるAIスキルを最短習得！評判と特徴 – 起業のためのシステム化
実務直結のAI教育「シゴトAI」を解説。スマホ受講やLINEサポートで、初心者でも仕事や副業に活かせるスキルを習得可能。あなたに合った活用法が見つかります。
起業のためのシステム化
45歳からの生成AI！ライフシフトラボで「稼ぐ力」を習得 – 起業のためのシステム化
40代〜60代特化！知識ゼロから3ヶ月で「稼げるAIスキル」を習得するライフシフトラボ。経験×AIで起業・副業を加速させましょう。無料説明会受付中。
起業のためのシステム化
デジハクでAIを仕事に！未経験からプロを目指すマンツーマン講座 – 起業のためのシステム化
未経験からAIスキルで稼ぐ力をつけるオンラインスクール「デジハク」。マンツーマン指導と充実のアフターサポートで、副業・フリーランスへの道を最短で切り拓きます。
システム化のパートナー（ミラーマスター合同会社）
ミラーマスター合同会社｜千葉のDX…
Dify自己ホスト型AIチャットボット導入支援 – ミラーマスター合同会社｜千葉のDX・システム開発とデジタル…
中小企業の属人化・問い合わせ対応をAIで自動化。セキュアなDify自己ホスト型チャットボット導入を10万円で専門家が支援。
ミラーマスター合同会社｜千葉のDX…
【製造業向け】業務改善・DX支援コンサル – ミラーマスター合同会社｜千葉のDX・システム開発とデジタル事…
製造業の経営者様へ。生産性向上・コスト削減を実現。40年の現場経験を持つ専門家が貴社のDXを伴走支援します。
ミラーマスター合同会社｜千葉のDX…
中小企業のシステム開発伴走支援 – ミラーマスター合同会社｜千葉のDX・システム開発とデジタル事業創造
「誰に頼めば…」とお悩みの中小企業様へ。40年の経験を持つ代表が貴社の開発プロジェクトを成功に導きます。全国対応。
VPSサーバの選定
起業のためのシステム化
Difyに最適なVPS比較 XServer vs ConoHa
DifyでAI構築！XServer VPSとConoHa VPSを徹底比較。初心者におすすめの料金、簡単さ、スペックを解説します。
起業のためのシステム化
エックスサーバーのおすすめは？WordPress・VPS比較
国内シェアNo.1「エックスサーバー」のおすすめは？WordPressからVPS、法人利用まで、目的別に最適なプランを徹底解説。
起業のためのシステム化
ConoHaのおすすめは？WINGとVPSを徹底比較
ConoHaのおすすめは？WordPress(WING)、AI(VPS)、FXなど目的別に全サービスを比較。最適なプランが見つかります。
コメント