AIMEK's blog: Typoraの紹介④　～シーケンス図を作成する～

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

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

Typora関連記事

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

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

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

→第5回はこちら Typora(Markdownエディタ)の紹介⑤　～フロー図を作成する～

→第6回はこちら TyporaVer1.x リリースに伴い有料化(でもベータ版はまだまだ無料利用可能)

→第7回はこちら 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」を使用してシーケンス図を作成する方法を紹介します。

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

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

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

作図内容は、「Empty Diagram」と表示されている箇所に表示されます。
- 【入力時】
- 【選択後】

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

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

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

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

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

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

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

js-sequence 公式「Syntax」より

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

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

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

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

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

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

作図内容は、「空のダイアグラム」と表示されている箇所に表示されます。
- 【入力時】
- 【選択後】

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

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

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

構文は「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でのシーケンス図表記方法を全て使いたい、

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

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

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

AIMEK's blog

2021年9月24日金曜日

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

Typora バージョン

Typora(Markdown)で作図する理由

Typoraで扱える図式

拡張機能の有効化

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

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

まとめ

0 件のコメント:

コメントを投稿

2021年9月24日金曜日

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

Typora バージョン

Typora(Markdown)で作図する理由

Typoraで扱える図式

拡張機能の有効化

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

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

まとめ

0 件のコメント:

コメントを投稿

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