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で描画したフローチャートです。
横書きのフローチャート例
同じフローチャートを横書きにした例です。横方向に矢印を伸ばすために
``` 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 の記述方法については、下記のシリーズで紹介しています。
0 件のコメント:
コメントを投稿