Web Toolarium

FLOWCHART SIMULATOR

フローチャートシミュレーター

変数・処理・条件分岐・ループを組み合わせたフローチャートを作成し、実際の値の変化を確認しながら実行できます。

ブラウザ内で完結 自動保存 JSON入出力 任意JavaScript実行なし PC推奨

PC推奨:ノードの配置・接続・編集は、マウス操作ができる画面での利用に適しています。

EDITOR

フローチャート

100%
ノードを配置してフローを作成してください
Delete 選択削除Ctrl+Z UndoCtrl+Y RedoCtrl+S 保存ダブルクリック 設定
この端末のlocalStorageへ自動保存

HOW TO USE

作って、動かして、値の変化を確認

左のノードを追加し、ノード下部の出力ポートから次のノードへ接続します。処理式・条件式・表示式は、右側の「設定」を開いて編集できます。

なぜ必要? 図形を並べただけでは、条件分岐の進む先や変数の変化、ループが終わるかどうかまでは確認できません。実際に動かすことで、考えた順番どおりに処理されているかを確かめられます。

こんなときに使ってください。 プログラミングを始める前の処理整理、授業や説明での流れの確認、条件分岐・計算・ループの動作確認、実装前の間違い探しに利用できます。

  1. 右側の「変数」を開いて、数値型・文字列型・真偽型の変数を登録
  2. 開始から終了までノードを接続し、判断には Yes / No の2本を用意
  3. 「1ステップ実行」で現在ノードと変数の変化を確認
  4. 完成したフローは JSON 保存、複数の案は「開く」から管理

式は安全な小さな式言語で評価されます。任意のJavaScriptコードを実行する機能はなく、ブラウザ外へフローチャートや変数を送信しません。

GUIDE

フローチャートの基本と操作方法

フローチャートは、処理の順番や条件による分岐を図形と接続線で表す方法です。このツールでは、作成したフローをそのまま実行できます。

フローチャートとは?

作業やプログラムの流れを、上から下へ進む接続線と図形で表した図です。処理の順番、条件による分岐、繰り返しを目で確認できるため、処理の整理や説明に役立ちます。

それぞれの図形の役割

端子(開始・終了)
フローの始まりと終わりを表します。
設定方法:左の端子から「開始」または「終了」を追加します。右側の設定で端子の種類も変更できます。
例:開始 → 処理 → 終了
処理
変数への代入や計算など、実行する処理を表します。
設定方法:右側の設定で表示名と処理式を入力します。1行に1つの代入式を書きます。
例:表示名「カウントアップ」、処理式 count = count + 1
判断
条件式を判定し、YesとNoの2方向へ分岐します。
設定方法:右側の設定で条件式を入力し、YesとNoの出力をそれぞれ接続します。
例:条件式 score >= 70。真ならYes、偽ならNoへ進みます。
表示
計算結果やメッセージを右側の「出力」に追加します。
設定方法:右側の設定で表示名と出力式を入力します。
例:出力式 "count=" + count
ループ開始
条件が真の間はループ本体へ進み、偽になったらループ終了後へ進みます。
設定方法:右側の設定で条件式を入力し、対応するループ終了を設定します。
例:条件式 count < 5。真なら本体、偽ならループ終了後へ進みます。
ループ終了
ループ本体の最後で、対応するループ開始へ戻ります。ループ開始で条件が偽になった場合は、ループ終了後の処理へ進みます。
設定方法:右側の設定で対応するループ開始を選択します。
例:countを増やす処理の後に置き、countが5未満の間だけ繰り返します。

図形の書き方

共通の作成手順

  1. 左のノード一覧から図形を中央キャンバスへドラッグ&ドロップします。
  2. 開始から終了まで、処理の順番に図形を配置します。ノードはドラッグして位置を整えます。
  3. ノードをクリックしてメニューを開き、「処理を編集」から表示名や式を設定します。

図形ごとの配置と設定

端子(開始・終了)

配置:開始はフローの先頭に1つ、終了はフローの最後に配置します。

接続:開始には次のノードへのOUTを1本だけ接続し、終了にはINだけを接続します。終了からOUTは出しません。

処理

設定:「処理を編集」で表示名と処理式を入力します。処理式は1行1代入にします。

接続:前のノードからINへ入り、次のノードへOUTを1本接続します。例:count = count + 1

判断

設定:条件式を入力します。結果が true または false になる式にします。

接続:下側のYesとNoを、それぞれ次のノードへ1本ずつ接続します。例:score >= 70

表示

設定:表示名と出力式を入力します。実行すると右側の「出力」に結果が追加されます。

接続:前のノードからINへ入り、次のノードへOUTを1本接続します。例:"count=" + count

ループ開始

設定:条件式を入力し、対応するループ終了と同じ色・番号のペアにします。

接続:OUTはループ本体の先頭へ1本だけ接続します。条件がfalseのときのループ終了への移動は自動です。

ループ終了

設定:右側の設定で対応するループ開始を選択し、ループ本体の最後に配置します。

接続:OUTはループ後の処理へ1本接続します。ループ開始へ戻る線は直接作らず、実行時に自動で戻ります。

接続方法とルール

  1. 「接続モード」を押すか、ノードのメニューから「接続開始」を選びます。
  2. 接続元ノードの下側にあるOUT、または判断のYes / Noをクリックします。
  3. 接続先ノードの上側にあるINをクリックすると接続されます。
  4. 通常のOUTは1本だけ接続できます。INには複数の接続元から接続できます。
  5. 同じOUTから別のノードへ接続すると、古い接続は自動的に新しい接続へ置き換わります。
  6. 接続線を削除するときは線をクリックして選択し、Deleteキーを押します。
  7. 線が交差しないようにノードをドラッグして配置を整えます。
OUTは1本だけ
処理A
処理B

1つのOUTから出せる接続は1本です。別のノードへつなぎ直すと、古い線が置き換わります。

INは複数接続できる
処理A
処理B
処理C

複数のOUTから、同じノードのINへ接続できます。分岐後の流れを1つに合流させるときに使います。

判断だけはYesとNoを別々に接続します。ループ開始とループ終了はペア設定で結び、ループ開始からループ終了への直接接続や、ループ終了からループ開始への直接接続は作りません。

右側のそれぞれの説明

出力
表示ノードが実行されたときの結果を、実行順に追加して表示します。分岐で通らなかった表示ノードの結果は追加されません。
確認:実行前は「まだ出力はありません。」と表示され、実行中は「出力」が自動で開きます。
変数
変数名・型・初期値を登録します。実行中は現在の実値を確認できます。
履歴
通過したノード、条件判定、変数の変化をステップごとに確認できます。
設定
選択したノードの表示名、処理式、条件式、表示式を編集します。

出力の確認方法

  1. 表示ノードの設定で、出力式を入力します。例:"count=" + count
  2. 「1ステップ実行」または「連続実行」で表示ノードまで進めます。
  3. 表示ノードが実行されると、式を評価した結果が「出力」に1件追加されます。
  4. 同じ表示ノードをループで複数回実行した場合も、実行された回数分が上から順番に追加されます。
  5. 出力を最初から確認したいときは、編集モードで「クリア」を押してから実行します。

例:変数 count が 1 のとき、表示式 "count=" + count の出力は count=1 になります。

実行中は編集できないため、右側には変数の実値と出力を表示します。「実行を終了」で編集モードに戻ります。

動かし方

1ステップ実行現在のノードを1つだけ実行します。

連続実行設定した速度で自動実行します。

一時停止連続実行を一時停止します。

実行を終了実行モードを終了して編集へ戻ります。

速度 普通⌄連続実行の速度を選びます。

  1. 左のノード一覧から図形を中央キャンバスへドラッグ&ドロップします。
  2. キャンバス上のノードをドラッグして位置を整えます。
  3. ノードをクリックするとメニューが開き、「処理を編集」から内容を変更できます。
  4. 接続線をクリックして選択し、Deleteキーで削除できます。
  5. 「1ステップ実行」は1ノードずつ、「連続実行」は自動で実行します。実行を止めるときは「実行を終了」を押します。
  6. プロジェクトはこの端末に自動保存され、JSON保存でバックアップできます。

条件式で使える算術方法とその例

種類記号例意味
加算+score + 10scoreに10を足す
減算-count - 1countから1を引く
乗算*price * quantitypriceとquantityを掛ける
除算/total / 2totalを2で割る
剰余%count % 2 == 0偶数か判定する

比較・論理演算子

種類記号例意味
等しい==score == 70scoreが70と等しい
異なる!=score != 0scoreが0ではない
より大きい>score > 70scoreが70より大きい
以上>=score >= 70scoreが70以上
より小さい<count < 5countが5より小さい
以下<=count <= 5countが5以下
かつ&&score >= 70 && count < 5左右の条件が両方とも真
または||score < 0 || score > 100左右のどちらかが真
否定!!isFinished真偽値を反転する

= は処理で値を代入する記号、== は条件で値を比較する記号です。!isFinished を使う場合は、isFinished を真偽型の変数として登録してください。複雑な条件は (score + bonus) >= 70 のように括弧でまとめます。

実行エラーになる場合の対処方法

エラー表示 実行できない理由は、実行ボタンの下に表示されます。問題のあるノードはキャンバス上でも確認できるため、表示された内容に沿って1つずつ修正します。

  1. 構造エラーの場合は、表示されたノード名と接続内容を確認します。
  2. ノードをクリックして「処理を編集」を選び、処理式・条件式・表示式を修正します。
  3. 接続が不足している場合は、出力ポートから接続先の入力ポートへ接続します。
  4. 実行中にエラーが出た場合は「実行を終了」で編集モードへ戻り、修正後に「1ステップ実行」で再確認します。

接続・構成を確認する場合

  • 開始ノードは1つだけにし、開始から終了までつなぎます。
  • 判断と終了以外のノードは、次の接続を1本にします。
  • 判断はYesとNoを1本ずつ接続します。
  • ループ開始とループ終了を同じ番号のペアにします。

式・値を確認する場合

  • 処理式は1行1代入にし、使用する変数を先に登録します。
  • 数値型・文字列型・真偽型を混在させないようにします。
  • 判断やループの条件式は、結果が true または false になるようにします。
  • 0での割り算、閉じていない括弧や文字列を確認します。

LOCAL PROJECTS

保存したプロジェクト