おはようございます。ひっくです。
今回も、MarkdownエディタのTyporaを取り扱います。
Typora関連記事
→第1回 はこちら Typora(Markdownエディタ)の紹介①
→第2回 はこちら Typora(Markdownエディタ)の紹介② ～画像の保存先を変更する～
→第3回 はこちら Typora(Markdownエディタ)の紹介③ ～数式を編集する～
→第4回 はこちら Typora(Markdownエディタ)の紹介④ ～シーケンス図を作成する～
→第6回 はこちら TyporaVer1.x リリースに伴い有料化(でもベータ版はまだまだ無料利用可能)
→第7回 はこちら Typora(Markdownエディタ)の紹介⑥ ～クラス図を作成する～
今回は図式(フロー図)の記載方法を紹介します。
Typora バージョン
今回確認するTyporaバージョンは、「0.11.13(beta)」となります。
拡張機能の有効化
※ 第4回(シーケンス図の作成) と同内容となります。既に有効化されている方は読み飛ばしてください。
Markdownで図を作成できる設定となっているか確認します。
設定は、「ファイル」→「設定」→「Markdown」→「文法サポート」から変更できます。
以下赤枠の設定がチェックONになっていればOKです。
フロー図の記法 (flowchart.js)
Typoraでは「flowchart.js」を使用してフロー図を作成することができます。
以下にフロー図を作成する方法を紹介します。
-
バッククォート「`」× 3 を記載した後、続けて「flow」と記載します。
これで、「flowchart.js」を使用してフロー図を作成するモードになります。
【選択後】のカーソル表示部分に、「flowchart.js」の構文を使用して作図していきます。
初期表示でフロー図が表示されます。
-
【入力時】
-
【選択後】
-
-
以下は作図した際の記載例です。
入力欄には、以下のような記載をしています。
st=>start: ログイン処理開始:>http://www.google.com e=>end: ログイン処理 終了 opMsg=>operation: 入力値不正 メッセージ表示 opMsg1=>operation: ID存在なしメッセージ表示 opChk=>operation: ID、パスワード入力値チェック subChk=>subroutine: ID存在チェック cond=>condition: 入力値が 不正な値？ cond2=>condition: ID存在 チェック結果？ ioLog=>inputoutput: 操作ログ出力 st->opChk->cond cond(true@No)->subChk->cond2->e cond2(false@No)->opMsg1->ioLog->e cond(false@Yes)->opMsg->ioLog(left)->e cond2(true@Yes)->e構文の詳細は 「flowchart.js」のGitHub ReadMe.md で確認可能ですが、
簡単に紹介すると、2つ覚えなければいけない構文があります。
①各ノードを定義する構文
「ノード変数名=>ノードタイプ: ノードテキスト |ノード表示装飾(※) :>URLリンク(※)」
※はオプション項目。
②接続を定義する構文
「ノード変数名->ノード変数名(方向:[ top / left / right / bottom ])」
ノードを定義して、各ノードを接続することでフロー図を作成していくことができます。
基本となる構文さえ覚えてしまえば、後は自由に作成することができます。
以下は個人的な感想となります。(注意すべき点や、考えられる使用用途等を挙げてみました。)
-
上記例の「ログイン処理 開始」をクリックしてみてください。
リンクURLとしてGoogleの検索ページを設定しているので、そちらに遷移します。
リンクURLはどのノードに対しても設定することができます。
例えばGitHubの該当URLを付記すれば、対応するソースとの対応関係が
すぐに確認できるので使い勝手が良くなるかもしれません。
-
ノード変数名は分かりやすい変数名とする方が良いでしょう。
似た変数名が多いと、各ノードを接続する際に、ノードに対応する変数を
探す手間が増えそうです。
-
条件分岐のノードは、ノードテキストを改行する方が図が小さくなりやすく
見やすいフロー図を作成できるようになるかと思います。
他のノードでも改行は許可されるため、必要に応じて使用した方が良いでしょう。
-
ノード接続時の方向(left等)は必ず記載しなければならない訳ではありません。
ただ、多方面から接続される場合や、ノード下部にスペースがない場合に
接続線が乱れる(※)ことがあります。
このような場合は、方向を記載して調整するのが良いでしょう。
※上記例の「cond(false@Yes)->opMsg->ioLog(left)->e」記載について、
方向情報を削除した際の表示例が、以下となります。
-
まとめ
Typoraで図式(フロー図)を作図する方法について、今回は紹介しました。
複雑になってくると各ノード間の接続が作成しづらくなるので、慣れが必要かもしれません。
ですが、ぱぱっと簡易的なフロー図を作成したい場合には、便利かと思います。
興味を持った方は是非一度作成してみてください。
今回はこのへんで。ではまた！
0 件のコメント:
コメントを投稿