インストール - 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に変換するロジック
 });