2021年11月5日金曜日

Typora(Markdownエディタ)の紹介⑤ ~フロー図を作成する~

 

おはようございます。ひっくです。

今回も、MarkdownエディタのTyporaを取り扱います。

→第1回 はこちら Typora(Markdownエディタ)の紹介①

→第2回 はこちら Typora(Markdownエディタ)の紹介② ~画像の保存先を変更する~

→第3回 はこちら Typora(Markdownエディタ)の紹介③ ~数式を編集する~

→第4回 はこちら Typora(Markdownエディタ)の紹介④ ~シーケンス図を作成する~

今回は図式(フロー図)の記載方法を紹介します。

Typora バージョン


今回確認するTyporaバージョンは、「0.11.13(beta)」となります。

 

拡張機能の有効化


第4回(シーケンス図の作成) と同内容となります。既に有効化されている方は読み飛ばしてください。

 

Markdownで図を作成できる設定となっているか確認します。

設定は、「ファイル」→「設定」→「Markdown」→「文法サポート」から変更できます。

 

以下赤枠の設定がチェックONになっていればOKです。

 

フロー図の記法 (flowchart.js)


Typoraでは「flowchart.js」を使用してフロー図を作成することができます。

以下にフロー図を作成する方法を紹介します。

 

  1. バッククォート「`」× 3 を記載した後、続けて「flow」と記載します。

    これで、「flowchart.js」を使用してフロー図を作成するモードになります。

     

    【選択後】のカーソル表示部分に、「flowchart.js」の構文を使用して作図していきます。

    初期表示でフロー図が表示されます。

    • 【入力時】

    • 【選択後】

 

  1. 以下は作図した際の記載例です。

    入力欄には、以下のような記載をしています。

    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
    
    Created with Raphaël 2.2.0 ログイン処理開始 ID、パスワード入力値チェック 入力値が 不正な値? ID存在チェック ID存在 チェック結果? ログイン処理 終了 ID存在なしメッセージ表示 操作ログ出力 入力値不正 メッセージ表示 No Yes Yes No

    構文の詳細は 「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 件のコメント:

コメントを投稿