インストール - Mermaid
概要
Mermaidは、テキストベースでダイアグラムを作成できるJavaScriptベースのライブラリである。
Mermaidの特徴は、プログラマにとって馴染みのある文法でダイアグラムを描けることである。
難しいGUIツールの操作を覚える必要がなく、テキストエディタだけで作業できるため、バージョン管理との相性が良い。
対応しているダイアグラムの主な種類として、フローチャート、シーケンス図、クラス図、ステート図、ガントチャート、Entity Relationship図等がある。
実務での活用シーンを以下に示す。
- プロジェクトのワークフロー図作成
- システム設計書でのデータフロー表現
- アプリケーションのアーキテクチャ図
- データベース設計書作成
- データベース構造の視覚化
特に、Gitベースのドキュメント管理との相性が良く、GitHubやGitLab等でも標準でサポートされている。
カスタマイズ性も高く、テーマの変更や色の調整、方向の設定等、様々な設定が可能である。
最近では、レスポンシブ対応やアニメーション機能等も追加されており、表現の幅が広がっている。
また、他のドキュメント生成ツールとの統合も容易で、Markdownベースのドキュメントと組み合わせることにより、効果的なドキュメント作成が可能になる。
開発チームでの情報共有や顧客へのプレゼンテーション資料作成等、様々なシーンで活用できる実用的なツールである。
Mermaidのインストール
Node.jsのインストール
Node.jsのインストールは、インストール - Yarnのページを参照すること。
Mermaidのインストール
npmコマンドを使用して、mermaindをインストールする。
# グローバルインストールする場合 npm install -g @mermaid-js/mermaid-cli
mermaindは、以下に示すディレクトリにインストールされる。
/<Nodeのインストールディレクトリ>/bin /<Nodeのインストールディレクトリ>/lib/node_modules/@mermaid-js
使用方法
Mermaidの主な特徴として、シンプルな構文で複雑なダイアグラムを描画できる点が挙げられる。
対応している主なダイアグラムの種類を、以下に示す。
- フローチャート
- シーケンス図
- クラス図
- ステート図
- ガントチャート
- Entity Relationship図
以下に示す構文を組み合わせることにより、複雑なダイアグラムが表現できる。
矢印の種類 (実線、破線) や、ノードの形状 (四角、丸四角、ひし形等)、方向、色等も自由にカスタマイズ可能である。
主要な構文要素
- 矢印の種類
graph LR A1-->B1 %% 通常の矢印 A2==>B2 %% 太い矢印 A3-.->B3 %% 点線矢印 A4--o B4 %% 丸端の線 A5--x B5 %% バツ印の線 A6 === B6 %% 太い線
- ノードの形状
graph TB
A[四角形]
B(丸四角)
C([カプセル形])
D[[二重四角]]
E{ひし形}
F{{六角形}}
G[(データベース)]
H((円形))
- 方向指定 (graphの後に記述)
graph TB %% 上から下 (Top to Bottom) A --> B graph BT %% 下から上 (Bottom to Top) A --> B graph LR %% 左から右 (Left to Right) A --> B graph RL %% 右から左 (Right to Left) A --> B
- 色とスタイル
graph LR A:::red --> B:::green C[青色の四角] style C fill:#0000ff,color:#fff D[カスタム色とスタイル] style D fill:#f9f,stroke:#333,stroke-width:4px classDef red fill:#ff0000,color:#fff classDef green fill:#00ff00,color:#000
- テキストの配置 (矢印上のラベル)
graph LR A -->|上部テキスト| B C -- 中央テキスト --> D E ---|下部テキスト| F
- 線の長さと曲がり方
graph TD A1 ===== B1 %% 長い線 A2 --> B2 %% 通常の線 A3 -.- B3 %% 短い点線 %% 曲線と曲がり方 X --> |ストレート|Y P ---> |カーブ| Q M -.-> |点線カーブ| N %% 複雑な経路 Start -->|経路1| Middle Start ---->|経路2| Middle Middle --> |最終| End
- マルチライン (複数行) テキスト
graph TD A[複数行の
テキスト表示] B[First Line
Second Line
Third Line]
- サブグラフ (グループ化)
サブグラフを使用することにより、大規模な図の整理や構造化が容易になる。
graph TB
subgraph グループ1
a1 --> a2
end
subgraph グループ2
b1 --> b2
end
a1 --> b2
- サイズと余白の調整
%% 図の方向とサイズ graph TB %% 余白を広めにとる A[開始] %% ノード間の距離を明示的に空ける B[処理1] C[処理2] A --> B B --> C
フローチャート
graph TD
A[四角形のノード] --> B(丸みを帯びたノード)
B --> C{ひし形のノード}
C -->|はい| D[処理1]
C -->|いいえ| E[処理2]
シーケンス図
sequenceDiagram 参加者A->>参加者B: リクエスト送信 参加者B-->>参加者A: レスポンス返却 Note over 参加者A,参加者B: 注釈を入れることも可能
ステート図
stateDiagram-v2 [*] --> 待機中 待機中 --> 処理中: 開始 処理中 --> 完了: 終了 完了 --> [*]
クラス図
classDiagram
class Animal{
+String name
+makeSound()
}
class Dog{
+bark()
}
Animal <|-- Dog
ガントチャートの基本
gantt title プロジェクトスケジュール section フェーズ1 タスク1 :a1, 2024-01-01, 30d タスク2 :after a1, 20d
画像形式に変換
mermaid-cliを使用する場合
# 基本的な使用方法 mmdc -i <入力するMermaidファイル>.mmd -o <出力する画像ファイル>.png # 背景色を指定する場合 mmdc -i <入力するMermaidファイル>.mmd -o <出力する画像ファイル>.png -b white # 画像サイズを1920x1080で出力する場合 mmdc -i <入力するMermaidファイル>.mmd -o <出力する画像ファイル>.png -w 1920 -H 1080 # 画像サイズを3840x2160で出力する場合 mmdc -i <入力するMermaidファイル>.mmd -o <出力する画像ファイル>.png -w 3840 -H 2160 # 基本サイズの2倍 mmdc -i <入力するMermaidファイル>.mmd -o <出力する画像ファイル>.png -s 2 # 基本サイズの3倍 mmdc -i <入力するMermaidファイル>.mmd -o <出力する画像ファイル>.png -s 3
Node.jsでスクリプトを生成する場合
npmコマンドを使用して、mermaind-puppeteerをインストールする。
# グローバルインストールする場合 npm install mermaid puppeteer
const mermaid = require('mermaid');
const fs = require('fs');
mermaid.initialize({ startOnLoad: true });
mermaid.render('mqtt-flow', mermaidDefinition, (svgCode) => {
// SVGをPNGに変換するロジック
});