フローチャート作成

フローチャート作成ツールについて

フローチャートは、作業の流れを表した図です。それぞれの手順を四角の中に入れ、矢印で順番を示します。選ぶ場面では、ひし形の中の質問が流れをはいといいえに分けます。全体の流れが一目でわかるので、説明もチェックもかんたんです。

多くのフローチャートツールでは、四角も矢印も手でひとつずつ動かします。時間がかかるうえ、線もよく交差します。このツールでは、紙のリストのように手順を1行に1つ書くだけです。四角の配置も、矢印も、線の間隔も自動です。1行を変えれば、チャートもすぐに更新されます。

主な機能

テキストを入れるとチャートができる — 1行に1手順。四角、矢印、間隔はおまかせ
はい・いいえの質問 — 行の最後に?を付けて、その下に進み先を書く
繰り返しとジャンプ — -> 手順名で前（または先）の手順へ。横の線として描かれます
標準の図形 — 丸い開始と終了、四角、ひし形、入力・出力用の平行四辺形
わかりやすいメッセージ — 問題のある行を教えてくれて、クリックひとつでその行へ移動
8種類のスタイル — クラシック、ミニマル、ボールド、パステル、ダーク、青写真、手描き風、黒板
上から下、または左から右 — 授業のプリント用に図形の凡例も付けられます
PNGとSVG — スライド向けのくっきりした画像、または編集・印刷できるSVG。入力したテキストはこのブラウザに保存されます

テキストでフローチャートを書く方法

1行に1つ手順を書きます。言葉で図形が決まります。

入力	できるもの
`お湯をわかす`	四角の中の手順
`お湯は熱い？`	ひし形の中の質問（行の最後が?）
質問の下の`はい:`と`いいえ:`	質問の進み先
`-> お湯をわかす`	その手順への矢印（手順が上にあれば繰り返し）
`開始`、`終了`、`終了: 完了`	丸い開始または終了
`入力: 名前`、`出力: 合計`	入力・出力用の平行四辺形
`// メモ`	自分用のメモ（描かれません）

分岐の手順は、はい:またはいいえ:の下の行に書き、スペース2つでインデントします。分岐が終わったら左に戻ります。次の行は質問のあとの手順になり、2つの流れはそこでまた合流します。短い分岐は1行で書けます：はい: 傘を持つ。

両方の進み先を書く必要はありません。質問にはい:だけがあれば、「いいえ」の流れはそのまま次の手順に進みます。分岐には赤:、黄:、緑:のような別の短い名前も付けられるので、1つの質問から3つ以上の進み先を作れます。

移動先は、手順と同じ言葉で書きます。大文字・小文字や、最後の?は気にしなくて大丈夫です。手順のあとに前へ戻るには、次の行か同じ行の最後に-> 手順名と書きます：まずお金をためる -> お金はある？。

かっこでも図形を選べます。(テキスト)は丸い端、[テキスト]は四角、/テキスト/は入力・出力の平行四辺形、<テキスト>はひし形です。?で終わるけれど質問ではない手順には[ ]を使います。たとえば[「なぜ？」と聞く]です。

まずはこの3つの例から

テキストボックスの下にある例を押すと読み込まれます。そこから自由に変えてください。最初の例朝のしたくで、基本がわかります。

行	前のスペース	働き
開始: 起きる	0	丸い開始
目覚ましを止める	0	手順
学校または仕事の日？	0	質問
はい:	2	「はい」の流れが始まる
さっとシャワーを浴びる	4	「はい」の流れの手順
着替える	4	「はい」の流れの次の手順
いいえ:	2	「いいえ」の流れが始まる
あと1時間寝る	4	「いいえ」の流れの手順
朝ごはんを食べる	0	ここで2つの流れが合流
雨が降っている？	0	「はい」の流れだけの質問
はい: 傘を持つ	2	1行で書いた短い「はい」の流れ
歯をみがく	0	「いいえ」の流れはここにそのまま来る
終了: 家を出る	0	丸い終了

買うべき？は、繰り返しと途中での終了が加わった例です。お金はある？の下で、「いいえ」の流れはまずお金をためる、そのあと-> お金はある？と進むので、チャートは戻ってもう一度たずねます。いいえ: 終了: 買わないの行は、分岐の途中で流れを終わらせます。

ログインの流れは、入力・出力の図形と、分岐の中の質問を使う例です。パスワードを間違えると、失敗が3回？でアカウントをロックするか、いいえ: -> 入力: メールアドレスとパスワードで最初に戻ります。

フローチャートの記号と意味

図形	名前	使いどころ
角の丸い四角	端子	流れの開始と終了
四角	処理	「合計に1を足す」のような1つの動作
ひし形	判断	2つ以上の答えがある質問
平行四辺形	入出力	「数を読み込む」「結果を表示する」のように、入ってくる・出ていくデータ
矢印	流れ線	手順の順番

詳細設定で図形の凡例を表示にチェックを入れると、この凡例がチャートの下に表示されます。使った図形だけが載ります。

8種類のスタイル

クラシック — やわらかい色。図形の種類ごとに色が変わります
ミニマル — 白地に黒い線。印刷のインクを節約できます
ボールド — 白い文字の力強い塗りつぶし図形。スライド向け
パステル — やさしい色と丸い角
ダーク — 暗い背景に光る図形。画面向け
青写真 — 青い方眼に白い線。設計図のような見た目
手描き風 — 罫線入りのノートに描いたスケッチ
黒板 — 緑の黒板にチョークの線。授業向け

スタイルは見た目だけを変えます。手順、レイアウト、ダウンロードは同じです。図形ごとに色を変えるは、スタイル一覧の下ですべて同じ色に変えられます。

フローチャートを使う人

学生 — 情報の授業のアルゴリズム、理科の実験の手順、数学の解き方を考える
先生 — クラスのルールや「困ったときはどうする？」を全画面で黒板代わりに見せる
チーム — 依頼、注文、サポートの問い合わせがどう処理されるかを順番に説明する
プログラマー — コードを書く前に関数の流れをスケッチする
家庭で — 何かを決めたり、子どもが従う毎日の流れを描いたりする

よくある質問

フローチャートとは？

フローチャートは、作業の手順を表した図です。四角に手順を入れ、矢印で順番を示し、ひし形に流れが分かれる質問を入れます。学校、職場、プログラミングで、物事の仕組みを説明するときに使われます。

はい・いいえの判断はどう追加しますか？

行の最後に疑問符を付けます。たとえば雨が降っている？です。次の行にはい:といいえ:を書き、それぞれの手順をスペース2つでインデントします。片方だけ書いた場合、もう片方の流れはそのまま次の手順に進みます。

繰り返しはどう作りますか？

->と、前にある手順と同じ言葉を書きます。たとえば-> お金はある？です。矢印がその手順に戻ります。チャートの横の線として描かれるので、ほかの線とは交差しません。

赤や黄色のメッセージは何ですか？

赤い行は、存在しない手順へのジャンプなど、描けない問題です。黄色い行は、出口が1つしかない質問などのヒントです。メッセージは行番号から始まります。クリックすると、テキストボックスのその行が選ばれます。ボックスの左の行番号にも印が付きます。

別のソフトでフローチャートを編集できますか？

はい。SVGをダウンロードしてください。Inkscape、Illustrator、Figmaで開け、PowerPointやWordにも挿入できます。文字はそのまま文字として残ります。PNGは2倍サイズの画像で、スライドや文書にくっきり使えます。

作ったフローチャートは保存やアップロードされますか？

入力したテキストと設定はこのブラウザに保存されるので、戻ってきてもチャートが残っています。アップロードはされません。チャートはお使いの端末で描かれます。

ほかの言語でも書けますか？

はい。手順はどの言語でも入力できます。中国語・日本語・韓国語は文字の間で折り返され、アラビア語とヘブライ語は右から左に描かれます。このページでは、特別な言葉は日本語と英語のどちらでも使えます（開始、終了、はい、いいえ、入力、出力、またはStart、End、yes、no、Input、Output）。(テキスト)や/テキスト/のようなかっこは、どの言語でも使えます。