2021年9月24日金曜日

Typoraの紹介④ ~シーケンス図を作成する~

 

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

今回も第1~3回に引き続き、MarkdownエディタのTyporaを取り扱います。

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

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

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

今回は図式(シーケンス図)の記載方法を紹介します。

Typora バージョン


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

Typora(Markdown)で作図する理由


作図時間の短縮、が一番の目的になるかと思います。

 

普段お目にかかる設計書はExcelやWordで作成されていることが多いですが、

図を挿入して作成すると結構時間がかかりますよね。

Markdown形式で図式を作成するとなると、作成するための構文を覚える必要がありますが

慣れてしまえば図を挿入して作成するより、はるかに早く図を作成することができるようになるかと思います。

 

ただ、扱う拡張機能によっては、作図できる表現が狭いこともあるので、そこには注意が必要です。

 

(なお、HTML、PDF、epub、docx 形式でのエクスポートがサポートされているようですので、

Wordは単純にエクスポートで「docx」を指定、ExcelはPDF出力した結果を画像化して挿入する

流れになるかと思います。)

 

Typoraで扱える図式


Typoraでは拡張機能を有効にすることで、以下の図式を記載することができます。

設計書(基本、詳細設計書等)で使用されることが多いフローチャート、シーケンス図等を

作成できる「 js-sequence 」「 flowchart.js 」「 mermaid.js 」をサポートしているからです。

 

  • js-sequence

    • シーケンス図
  • flowchart.js

    • フローチャート
  • mermaid.js

    • シーケンス図
    • フローチャート
    • ガントチャート
    • クラス図
    • 状態図
    • 円グラフ

 

拡張機能の有効化


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

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

 

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

 

シーケンス図の記法 (js-sequence)


「Typoraで扱える図式」で紹介したように、Typoraでは「js-sequence」または「mermaid.js」を

使用してシーケンス図を作成することができます。

まずは「js-sequence」を使用してシーケンス図を作成する方法を紹介します。

 

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

    そうすると、「js-sequence」を使用してシーケンス図を作成するモードになります。

     

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

    作図内容は、「Empty Diagram」と表示されている箇所に表示されます。

    • 【入力時】
    • 【選択後】

 

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

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

    Title: シーケンス図(例)
    note right of ユーザー: 同期メッセージ
    ユーザー->ログイン画面: ID、Password入力
    note left of サーバー: 非同期メッセージ
    ログイン画面->>サーバー: 登録情報チェック
    note left of サーバー: 応答メッセージ
    サーバー-->>ログイン画面: チェック結果返却
    note over ログイン画面: チェックNG時:メッセージ表示(再入力を促す)
    participant 入力画面 as IM
    ログイン画面->ログイン画面:
    note over ログイン画面: チェックOK時:入力画面へ遷移
    ログイン画面->IM:
    
    Created with Raphaël 2.2.0シーケンス図(例)ユーザーユーザーログイン画面ログイン画面サーバーサーバー入力画面入力画面同期メッセージID、Password入力非同期メッセージ登録情報チェック応答メッセージチェック結果返却チェックNG時:メッセージ表示(再入力を促す)チェックOK時:入力画面へ遷移

    構文は「js-sequence」の公式ページで確認可能ですが、以下のみが用意されています。

    比較的簡素なので覚えやすい反面、表現の幅は狭いかもしれません。

    とはいえ、「ライフライン、ノート、メッセージ(種類別)」は表現できるので、

    手早く簡易的なシーケンス図を作成したい場合に向いているのではないでしょうか。

    js-sequence 公式 「Syntax」より

     

    シーケンス図の記法 (mermaid.js)


    次に「mermaid.js」を使用してシーケンス図を作成する方法を紹介します。

     

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

       

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

      シーケンス図を作成する場合、「sequenceDiagram」とまず記載し、

      続けてシーケンス図の要素を記載していきます。

      作図内容は、「空のダイアグラム」と表示されている箇所に表示されます。

      • 【入力時】

      • 【選択後】

       

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

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

      sequenceDiagram
      %% シーケンス図(例)
      autonumber
      	participant U as ユーザー
      	participant L as ログイン画面
      	note right of U: 同期メッセージ
      	U->>L: ID、Password入力
      	participant S as サーバー
      	activate L
          note left of S: 非同期メッセージ
          L->>S: 登録情報チェック
      	activate S
          note left of S: 応答メッセージ
          S-->>L: チェック結果返却
      	deactivate S
          
      	alt チェックNG時
      		activate L
              L->>L: メッセージ表示(再入力を促す)
      		deactivate L
          else チェックOK時
      		participant I as 入力画面
              L->>I: 入力画面へ遷移
          end
      	deactivate L
      

      ユーザーログイン画面サーバー入力画面同期メッセージID、Password入力1非同期メッセージ登録情報チェック2応答メッセージチェック結果返却3メッセージ表示(再入力を促す)4入力画面へ遷移5alt[チェックNG時][チェックOK時]ユーザーログイン画面サーバー入力画面

       

      構文は「js-sequence」に比べると表現できることが増えています。(公式ページで確認可)

      現在サポートされている矢印には次の6種類があります。

      タイプ 説明 表示内容
      -> 矢印のない実線
      --> 矢印のない点線
      ->> 矢印の付いた実線
      -->> 矢印の付いた点線
      -x 末尾に十字が付いた実線
      --x 末尾に十字が付いた点線

      非同期メッセージについては、公式ページ「 mermaid.js公式 シーケンス図 」に

      用意されていると記載のある構文「-)」を使用してみたのですが、

      現在これはサポートされていないようです。(以下の様なエラーメッセージが表示される)

       

      「-x」「--x」を非同期メッセージとして使用するという情報もありましたが、

      UMLでの記法とは異なるので、使用する際はどこかに定義付けしておく必要がありそうです。

       

      複合フラグメントは「alt」「loop」「opt」「par」についてはサポートがあるので、

      条件分岐、ループ等を伴う少し複雑なシーケンス図を記載する場合には

      こちらを使用する方が良いでしょう。

      ただし「ref」等を使用したい場合は、Typoraで使用可能な「js-sequence」「mermaid」の

      両方でサポートされていないため、Visual Studio Code にPlantUMLを入れて作成する等

      別のエディタを使用するしかないと思われます。

    まとめ


    Typoraで図式(シーケンス図)を作図する方法について、今回は紹介しました。

    かなり複雑なシーケンス図を作成したい、UMLでのシーケンス図表記方法を全て使いたい、

    という場合でなければそれなりのシーケンス図を楽に作成できるかと思います。

     

    興味を持った方は是非一度作成してみてください。

     

    今回はこのへんで。ではまた!

0 件のコメント:

コメントを投稿