象と散歩: Markdown（Typora）でフローチャートを描く

2019年7月22日

Markdown（Typora）でフローチャートを描く

TyporaでMarkdownを始めよう！ | 象と散歩でTyporaでのMarkdownの書き方を紹介いたしましたが、今回は、TyporaでMarkdown第2弾として、flowchart.js を使ったフロチャートの書き方です。

文法サポートでダイアグラムをチェック

最初にTyporaのメニューバーの "ファイル(F) → 設定" で文法サポートのダイアグラムをチェックをします。

これで、シーケンス図、クラス図、フローチャート、ガントチャートなどを記述することができるようになりますが、今回は、flowchart.js を使ってフローチャートを記述する方法を紹介します。

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

フローチャートは、```flow から ``` の間に記述しますが、Typoraでは、

```flow

と書いて Enterすると、フローチャートダイアグラムが開きますので、こちらに記述していきます。

前半にエイリアス名の定義（エイリアス名==>コマンド: 処理名）を記述します。次に後に定義したエイリアス名を使ってフローを記述していきます。

```flow
# エイリアス名の定義
# フローの記述
```

コマンドの記述方法

エイリアス名で使うコマンド一覧です。利用できるオブジェクトは、処理ボックス、入出力ボックス、サブルーチンボックス、条件分岐などがあります。

コマンド（エイリアス名の定義）	意味
alias_name=>start: TEXT	処理開始
alias_name=>end: TEXT	処理終了
alias_name=>operation: TEXT	処理
alias_name=>iputoutput: TEXT	入出力
alias_name=>subroutine: TEXT	サブルーチン
alias_name=>condition: TEXT	条件分岐
alias_name=>COMMAND : TEXT :>URL[https://.....]	処理名のURLリンク

alias_name と => の間はスペース不用
command: と NAME の間にはスペース必要

下表は、フローを記述するコマンド一覧です。フローはすべてのオブジェクトが繋がるように記載します。

コマンド（フローの記述）	意味
alias_name1->alias_name2	name1からname2へ矢印
alias_name(right)	右方向へ矢印
alias_name(left)	左方向へ矢印
alias_name(yes)	alias_name1（条件分岐）で"yes"の場合
alias_name(no)	alias_name1（条件分岐）で"no"の場合

縦型のフローチャート例

flowchart.js にもサンプルがありますが、実際の記述と図形を見た方がわかりやすいかと思います。

``` flow
st=>start: 開始
op1=>operation: 処理1
op2=>operation: 処理2
cd1=>condition: 条件分岐1
cd2=>condition: 条件分岐2
sb1=>subroutine: サブルーチン
io1=>inputoutput: 出力 
e=>end: 終了

st->cd1
cd1(yes)->op1->sb1->cd2
cd1(no)->sb1->cd2
cd2(yes)->io1
cd2(no)->op2->io1
io1->e
```

下図は、Typoraで描画したフローチャートです。

横書きのフローチャート例

同じフローチャートを横書きにした例です。横方向に矢印を伸ばすために st(right)->cd1 のように (right) を使います。

``` flow
st=>start: 開始
op1=>operation: 処理1
op2=>operation: 処理2
cd1=>condition: 条件分岐1
cd2=>condition: 条件分岐2
sb1=>subroutine: サブルーチン
io1=>inputoutput: 出力 
e=>end: 終了

st(right)->cd1
cd1(yes)->op1(right)->sb1->cd2
cd1(no)->sb1(right)->cd2
cd2(yes)->io1
cd2(no, right)->op2->io1
io1->e
```

Typoraで描画するとこんな感じです。

まとめ

draw.ioなどでフローチャートを描いて画像で貼り付けてもいいのですが、Markdownのプレーンテキストの特徴を生かして flowchart.js でフローを描きましょう。同じくTyporaでサポートしているMermaidでもフローチャートを記述できますが、flowchart.jsの方がシンプルなフローで好きです。

Typora で Markdown シリーズ

Typora での Markdown の記述方法については、下記のシリーズで紹介しています。

象と散歩

Translate