インストール - Mermaidのソースを表示

== 概要 ==
Mermaidは、テキストベースでダイアグラムを作成できるJavaScriptベースのライブラリである。<br>
<br>
Mermaidの特徴は、プログラマにとって馴染みのある文法でダイアグラムを描けることである。<br>
難しいGUIツールの操作を覚える必要がなく、テキストエディタだけで作業できるため、バージョン管理との相性が良い。<br>
<br>
対応しているダイアグラムの主な種類として、フローチャート、シーケンス図、クラス図、ステート図、ガントチャート、Entity Relationship図等がある。<br>
<br>
実務での活用シーンを以下に示す。<br>
* プロジェクトのワークフロー図作成
* システム設計書でのデータフロー表現
* アプリケーションのアーキテクチャ図
* データベース設計書作成
<br>
特に、Gitベースのドキュメント管理との相性が良く、GitHubやGitLab等でも標準でサポートされている。<br>
<br>
カスタマイズ性も高く、テーマの変更や色の調整、方向の設定等、様々な設定が可能である。<br>
最近では、レスポンシブ対応やアニメーション機能等も追加されており、表現の幅が広がっている。<br>
<br>
また、他のドキュメント生成ツールとの統合も容易で、Markdownベースのドキュメントと組み合わせることにより、効果的なドキュメント作成が可能になる。<br>
<br>
開発チームでの情報共有や顧客へのプレゼンテーション資料作成等、様々なシーンで活用できる実用的なツールである。<br>
<br><br>

== Mermaidのインストール ==
==== Node.jsのインストール ====
Node.jsのインストールは、[[インストール_-_Yarn#NordJS|インストール - Yarn]]のページを参照すること。<br>
<br>
==== Mermaidのインストール ====
<code>npm</code>コマンドを使用して、mermaindをインストールする。<br>
 # グローバルインストールする場合
 npm install -g @mermaid-js/mermaid-cli
<br>
mermaindは、以下に示すディレクトリにインストールされる。<br>
 /<Nodeのインストールディレクトリ>/bin
 /<Nodeのインストールディレクトリ>/lib/node_modules/@mermaid-js
<br><br>

== 使用方法 ==
<br><br>

== 画像形式に変換 ==
==== 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
<br>
==== Node.jsでスクリプトを生成する場合 ====
<code>npm</code>コマンドを使用して、mermaind-puppeteerをインストールする。<br>
 # グローバルインストールする場合
 npm install mermaid puppeteer
<br>
 <syntaxhighlight lang="js">
 const mermaid = require('mermaid');
 const fs = require('fs');
 
 mermaid.initialize({ startOnLoad: true });
 mermaid.render('mqtt-flow', mermaidDefinition, (svgCode) => {
    // SVGをPNGに変換するロジック
 });
 </syntaxhighlight>
<br><br>


{{#seo:
|title={{PAGENAME}} : Exploring Electronics and SUSE Linux | MochiuWiki
|keywords=MochiuWiki,Mochiu,Wiki,Mochiu Wiki,Electric Circuit,Electric,pcb,Mathematics,AVR,TI,STMicro,AVR,ATmega,MSP430,STM,Arduino,Xilinx,FPGA,Verilog,HDL,PinePhone,Pine Phone,Raspberry,Raspberry Pi,C,C++,C#,Qt,Qml,MFC,Shell,Bash,Zsh,Fish,SUSE,SLE,Suse Enterprise,Suse Linux,openSUSE,open SUSE,Leap,Linux,uCLnux,Podman,電気回路,電子回路,基板,プリント基板
|description={{PAGENAME}} - 電子回路とSUSE Linuxに関する情報 | This page is {{PAGENAME}} in our wiki about electronic circuits and SUSE Linux
|image=/resources/assets/MochiuLogo_Single_Blue.png
}}

__FORCETOC__
[[カテゴリ:RHEL]][[カテゴリ:SUSE]][[カテゴリ:Raspberry_Pi]][[カテゴリ:PinePhone]]