mermaid.jsを使ってフローチャート（flowchart）を表示する方法｜DAD UNION

mermaid.jsを使ってフローチャート（flowchart）を表示する方法をご紹介します。
その他にダイヤグラムやガントチャート等も作成し表示することが出来ます。

Contents

mermaid.jsを使ってフローチャート（flowchart）を表示するCSSの記述
mermaid.jsを使ってフローチャート（flowchart）を表示するJavaScriptの記述
mermaid.jsを使ってフローチャート（flowchart）を表示するHTMLの記述
mermaid.jsを使ってフローチャート（flowchart）を表示するデモページ
ソース元：Flowcharts – Basic Syntax

mermaid.jsを使ってフローチャート（flowchart）を表示する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を使ってフローチャート（flowchart）を表示するJavaScriptの記述

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

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

mermaid.jsを使ってフローチャート（flowchart）を表示するHTMLの記述

※フローチャートを表示するタグに「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>