目次
環境
・Visual Studio Code(ver:1.77.3)
・Mermaid
Visual Studio Codeに拡張Pluginを追加
まずはCtrl + Shift + Xあるいは拡張機能のアイコンをクリックして拡張機能の追加画面を出す
・Mermaid Markdown Syntax Highlighting
・Mermaid Preview
の2つをインストールする
ここで動作確認のために簡単なMermaidのシーケンス図を記述する
このとき、ファイルの拡張子は.mdに変更する必要がある
```mermaid
sequenceDiagram
%% Example Comment
Character Blueprint ->> Weapon Actor: Factory経由でSpawn
Weapon Actor -->> Character Blueprint: Spawnと同時にOwnerに対してAttach
```
続いて、Command Paletteを開く(Ctrl + Shift + P)
Mermaid Previewをインストールしている状態であれば
ここでPreview Mermaidが選択できる
Previewを開くと実際のMermaidの記述と、生成される図が表示されるようになる
NotionでMermaidを記述する
まずはUMLを追加したいページにコードを追加する
デフォルト設定がJava Scriptになっているため、これをMermaidに変更する
あとは先程記述したMermaidから```mermaid ```の部分を削除してコピペしてやれば簡単にプレビューできる
Mermaidについて
Mermaidで作成可能なものは非常に豊富で
フローチャート、シーケンス図、クラス図、ガントチャート...etcと様々なものを書くことができる
導入に至った経緯としては、図を書いて説明する工数を省きたいといったものからです。
また、Notionで使用できる点も優れていて、例えばチーム開発の際の情報共有にも使いやすいですね。
また、participant as を使うことでtypedef的な書き方が出来ます。
長い名称のものを書くときなんかには便利です。
participant rig as Control Rig participant animbp as Animation Blueprint
