【VSCode】mermaidの記述テンプレート
みなさんこんにちは。
VSCodeの拡張機能であるMermaidはテキスト形式で記述した内容を
グラフ化したり、フローチャート化することが可能です。
今回は記述についてテンプレート式にしてご紹介したいと思います。
Mermaidの記述をマスターすると検索も容易ですし、修正も手軽にできます。
開発現場でもよく使用する機会があり
覚えておくととてもためになるので、スキルアップのきっかけになればと思います。
VSCodeに関する過去の記事
VSCodeに関する小ワザやテクニックなどの参考記事については、過去にご紹介しておりますのでそちらもどうぞ。
記述例
基本形
VScodeでMermaid記法を使う際には、以下の記述でmermaid を指定してください。
```mermaid
// この中にMermaid記法
```
構文一覧
フローチャートを記載する際は以下のような記述になります。
actorを記述すると人のマーク、participantを記述するとタスクマークを表示します。
コード
```mermaid
sequenceDiagram
actor Alice
actor Bob
actor Tom
participant TestTask
Alice->>Bob: 実線のアロー
Bob-->>Alice: 点線のアロー
Bob->>TestTask:アクターからタスクへのアロー
矢印の種類
矢印の種類はいくつかありますが、実務で使用するものに絞ると以下のようになります。
記述説明
矢印のタイプと説明は以下のようになります。
| タイプ | 説明 |
|---|---|
| -> | 矢印なしの実線 |
| –> | 矢印のない点線 |
| ->> | 矢印付きの実線 |
| –>> | 矢印付きの点線 |
| -x | 端に十字がある実線 |
| –x | 点線と十字 |
| -) | 端に開いた矢印がある実線（非同期） |
| –) | 端に開いた矢印が付いた点線（非同期） |
コード
sequenceDiagram
actor Alice
actor Bob
Alice->Bob :矢印なしの実線
Alice-->Bob :矢印のない点線
Alice->>Bob :矢印付きの実線
Alice-->>Bob :矢印付きの点線
Alice-xBob :端に十字がある実線
Alice--xBob :点線と十字
Alice-)Bob :端に開いた矢印がある実線（非同期）
Alice--)Bob :端に開いた矢印が付いた点線（非同期）
アクティブ状態を表現
コード
タスクのアクティブ状態を表現するためには以下の記述になります。
sequenceDiagram
actor Alice
actor Bob
Alice->>Bob: タスク開始
activate Bob
Bob-->>Alice: ex)処理完了
deactivate Bob
結果
注記、メモ書きを表現
コード
sequenceDiagram
actor Alice
actor Bob
Note right of Alice: メモを表示
Note over Alice,Bob: タスクをまたがるメモ
結果
ループ表現
コード
sequenceDiagram
actor Alice
actor Bob
Alice->>Bob: ループを開始します。
alt 正常処理パターン
Bob->>Alice: メッセージ
else 異常処理パターン
Bob->>Alice: メッセージ
end
opt レスポンス
Bob->>Alice: メッセージ
end
結果
タスクを新規作成
フローの時にタスクが作成される場合は以下のように表現します。
コード
sequenceDiagram
actor Alice
actor Bob
create participant TestTask
Alice->>TestTask: 作成したタスクへのアロー
結果
アクターを新規作成
フローの時にアクターが作成される場合は以下のように表現します。
コード
sequenceDiagram
actor Alice
actor Bob
create actor NewActor as NewActor
Alice->>NewActor: 作成したアクターへのアロー
結果
アクターを削除
アクター、タスクを削除することも可能です。
削除する際は対象タスクへアローも必要になります。
コード
sequenceDiagram
actor Alice
actor Bob
create actor Taro as NewActor
Alice->>Taro: 作成したアクターへのアロー
destroy Taro
Alice-xTaro: 削除完了するためのアロー
結果
採番する
すべてのアローに対して採番することも可能です。
コード
sequenceDiagram
actor Alice
actor Bob
autonumber
create actor Taro as NewActor
Alice->>Taro: 作成したアクターへのアロー
Taro->>Bob: アロー
destroy Taro
Alice-xTaro: 削除完了するためのアロー
結果
記述テンプレート一式
今までの内容をすべて網羅したコートは以下の通りになります。
(サンプルでご紹介した内容と一部異なります。)
コード
```mermaid
sequenceDiagram
actor Alice
actor Bob
actor TestActor
participant TestTask
Alice->>Bob: 実線のアロー
Bob-->>Alice: 点線のアロー
Bob->>TestTask:アクターからタスクへのアロー
%% アクティブ状態を表現
Alice->>Bob: タスク開始
activate Bob
Bob-->>Alice: ex)処理完了
deactivate Bob
%% 注記、メモ書き
Note right of Alice: メモを表示
Note over Alice,Bob: タスクをまたがるメモ
%% ループ表現
Alice->>Bob: ループを開始します。
alt 正常処理パターン
Bob->>Alice: メッセージ
else 異常処理パターン
Bob->>Alice: メッセージ
end
opt レスポンス
Bob->>Alice: メッセージ
end
%% タスクを新規作成
create participant Tom
Alice->>Tom: 作成したタスクへのアロー
%% アクターを新規作成
create actor Taro as NewActor
Tom->>Taro: 作成したアクターへのアロー
%% アクターを削除
%% 削除する際は対象タスクへアローも必要
destroy Tom
Alice-xTom: 削除完了するためのアロー
destroy TestTask
TestActor-xTestTask:削除完了のためのアロー
%% 採番する
autonumber
%% 以下は矢印の書式サンプル
Alice->Bob :矢印なしの実線
Alice-->Bob :矢印のない点線
Alice->>Bob :矢印付きの実線
Alice-->>Bob :矢印付きの点線
Alice-xBob :端に十字がある実線
Alice--xBob :点線と十字
Alice-)Bob :端に開いた矢印がある実線（非同期）
Alice--)Bob :端に開いた矢印が付いた点線（非同期）
```
結果
最後に
いかがでしたでしょうか。
フローチャートを作成する際は、パワポや専用のWebアプリ、描画ツールで作成しがちですが、直感的にテキストで記述できるようになると、
かなりの時間短縮になるかと思います。
構文を覚えるのに多少のタイムコストは必要ですが、
しっかりマスターして基本を抑えながらと実装できると業務効率も格段に向上するかと思います。
そのきっかけとして、少しでも参考になればと思います。
開発依頼について
ココナラでWebスクレイピング開発サービスを出品しております。
自分で開発をしようと思ったけど、VBAでのネット記事が少なく困っている方も多いかと思います。
そんな方はいつでもお気軽にご相談ください。
また、本ブログからご依頼いただいた方については割引特典がございますので、
ご不明点と合わせてメッセージをいただけると幸いです。
Excelにてブラウザ操作自動化ツールを作成します その作業、webスクレイピングを使って自動化しましょう！
Webスクレイピング以外にもWebアプリの開発サービスも出品しております。
こちらについても、本ブログからご依頼いただいた方については割引特典がございますので、
お気軽にご相談ください。
