この記事の目的
Typoraを用いて画像のようなフローチャートが書けるようになることをこの記事の目的としています。ステップを踏み,飛躍のない説明を心がけています。
準備
Typoraをインストールし開くと,画像のようなウィンドウが表示されます。
Typoraではmarkdown記法で記述した文をすぐに表示してくれます。
コードを組み込む際に用いる**```**を書き,さらにflowと書くことで画像のような組み込みコード欄とEmpy Diagram -> Endの不rpーチャートが表示されます。
部品の用意
フローチャートには,はじめを表すものや処理を表すものなどの部品があり,それぞれ名前が決まっています。フローチャートを書く際にははじめに部品を用意し,その後用意した部品を矢印でつないでいきます。以下のようにして部品を用意します。
部品の名前(なんでもいい)=>部品名(決まっている)(コンマ)(枠の中に各文字)
開始->終了を書く
開始と終了の部品を用意します。ここではkaishi,shuryouがそれぞれ開始,終了の部品名になっています。
kaishi=>start: 開始
shuryou=>end: 終了
ここまで書くと,**ERROR [Flowchart] null is not an object (evaluating t.key)**というエラーが出ているはずです。このエラーは用意した部品をつなげることで解消されます。
kaishi=>start: 開始
shuryou=>end: 終了
kaishi->shuryou
画像のような開始->終了のフローチャートを書くことができました。
開始->処理->終了を書く
開始->終了の流れがわかれば,後はそれを応用するだけです。部品を用意し流れを書く流れはどのフローチャートでも変わりません。
入出力の部品名はinputoutputなので,同様に用意していきます。
kaishi=>start: 開始
shuryou=>end: 終了
nyushutshuryoku=>inputoutput: 処理
kaishi->nyushutshuryoku->shuryou
分岐させる
入室力や処理の結果によって分岐させたい時にはconditionという部品を使います。
condition部品を矢印で繋ぐ時には(yes),(no)によって矢印の行き先を変更させます。
kaishi=>start: 開始
shuryou=>end: 終了
nyushutshuryoku=>inputoutput: 入出力
bunki=>condition: 分岐
kaishi->nyushutshuryoku->bunki
bunki(no)->nyushutshuryoku
bunki(yes)->shuryou
これで目的のフローチャートは達成されました。これらを応用することで様々なフローチャートを作成することができます。