はじめに
今更ながらmermaidを使用してみて便利だと感じたため、簡単な使い方を記載しました。
mermaidとは
JavaScriptベースの図を書くツール。mdファイルの中にテキストを記載することでフローチャート、クラス図、ガントチャート、シーケンス図などを表示できる。github, Qiita, Zennなどがmermaid記法に対応している。githubのREADME.mdやwikiなどでちょっとした図を書くときに便利。
https://mermaid.js.org/
VSCodeでは拡張機能"Markdown Preview Mermaid Support"をインストールすることで使用可能。
フローチャートを書いてみる
カメラ映像をJetsonに入力し、推論結果をMQTTでAWSにアップロードするシステムを書いてみる。
- 左→右のフローチャートを書く場合は"flowchart LR"と記載する。
- ノード（変数名[表示テキスト]）を作成し、矢印でつなげる。
- 複数のノードをまとめたいときはsubgraphを使用する。
flowchart LR
%% component %%
camera[カメラ]
jetson[Jetson Nano]
core[IoT Core]
db[DynamoDB]
subgraph AWS
core --> db
end
camera --> jetson
jetson --MQTT--> core
"flowchart TD"と記載すると、上→下のフローチャートになる。
スタイルを変更する
クラスを定義し、CSSでスタイルを指定することで、特定のノードのみスタイルを変更することができる。
上図のAWSの要素のみ緑色で塗りつぶし、枠線を無しにしてみる。
flowchart LR
%% style %%
classDef awsComponent fill:#7BCCAC,stroke-opacity:0;
%% component %%
camera[カメラ]
jetson[Jetson Nano]
core[IoT Core]:::awsComponent
db[DynamoDB]:::awsComponent
subgraph AWS
core --> db
end
camera --> jetson
jetson --MQTT--> core
フローチャートの中に画像を入れてみる
上図のJetsonのノードを画像に変更してみる。
flowchart LR
%% style %%
classDef awsComponent fill:#7BCCAC,stroke-opacity:0;
classDef image fill-opacity:0,stroke-opacity:0;
%% component %%
camera[カメラ]
jetson[<img src="https://user-images.githubusercontent.com/65023550/206888562-6710308d-6a9e-4a88-9005-a7cff4ed1fd3.jpg" width="100">]:::image
core[IoT Core]:::awsComponent
db[DynamoDB]:::awsComponent
subgraph AWS
core --> db
end
camera --> jetson
jetson --MQTT--> core
おわりに
矢印の位置の調整などをしなくて済むので、ちょっとした図を描くときに便利だと感じた。AWSのアイコンが使用できるようになればもっと便利だと思った。