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