mermaid.js入門：フローチャート作成の基本から応用テクニックまで徹底解説｜DAD UNION

今回はmermaid.jsの魅力とその使い方を徹底解説します。mermaid.jsを用いることで、フローチャートやダイヤグラム、ガントチャートなど、複雑な図表を手軽に作成し、見やすく表示することができます。

Contents

mermaid.jsとは何か？
mermaid.jsの導入方法
- CSSの設定
- mermaid.jsを使ったJavaScriptの設定
実際のフローチャート作成例
mermaid.jsを使ってフローチャート（flowchart）を表示するデモページ
ソース元：Flowcharts – Basic Syntax
まとめ

mermaid.jsとは何か？

mermaid.jsは、JavaScriptベースのライブラリで、プログラマーやエンジニアにとって非常に便利なツールです。コードを書くようにして図表を作成でき、特に技術文書やプレゼンテーション資料作りに役立ちます。

mermaid.jsの導入方法

まず、mermaid.jsを導入するためには、CSSとJavaScriptの設定が必要です。以下に基本的な設定方法を示しますが、これはカスタマイズ可能ですので、自分の好みに合わせて変更しましょう。

CSSの設定

<style>
body {
  margin: 20px 10px;
  padding: 0;
  font-size: 18px;
  text-align: center;
}
h1{
  text-align: center;
  font-size: 22px;
  line-height: 2em;
  padding-bottom: 20px;
}
</style>

mermaid.jsを使ったJavaScriptの設定

※mermaid.min.jsファイルを読み込みます。mermaid.initialize({オプション})で初期設定を行います。オプションではページ読み込み後の実行をtrueにしてます。

<script src="mermaid.min.js"></script>
<script>mermaid.initialize({startOnLoad:true});</script>

実際のフローチャート作成例

ここでは、簡単なフローチャートの作成例を紹介します。例えば、パソコンのプロセッサーを選択する際の決定フローを表現することができます。
フローチャートを表示するタグに「class=”mermaid”」を記述します。「class=”mermaid”」タグ内に作るフローチャートの内容を記述します。

<h1>mermaid.jsを使ってフローチャート（flowchart）を表示</h1>

<div class="mermaid">
flowchart TD
  パソコンのプロセッサー選択 --> 持ち歩く
  持ち歩く -->|はい| スペック
  持ち歩く -->|いいえ| 予算
  スペック -->|よい| R1[Core i7]
  スペック -->|低め| R2[Core i5]
  予算 --> |あり| R3[Core i9]
  予算 --> |なし| R4[Core i7]
</div>
<br>
<br>
<div class="mermaid">
flowchart LR
  パソコンのプロセッサー選択 --> 持ち歩く
  持ち歩く -->|はい| スペック
  持ち歩く -->|いいえ| 予算
  スペック -->|よい| R1[Core i7]
  スペック -->|低め| R2[Core i5]
  予算 --> |あり| R3[Core i9]
  予算 --> |なし| R4[Core i7]
</div>

mermaid.jsは単なるフローチャート作成ツールに留まりません。例えば、プロジェクトのガントチャートやシーケンス図、クラス図など、様々な種類の図表を作成することが可能です。