mermaid.jsを使ってフローチャート(flowchart)を表示する方法をご紹介します。
その他にダイヤグラムやガントチャート等も作成し表示することが出来ます。
Contents
ディスプレイ広告
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>
mermaid.jsを使ってフローチャート(flowchart)を表示するデモページ
mermaid.jsを使ってフローチャート(flowchart)を表示するデモページ
ソース元:Flowcharts – Basic Syntax
以下がソース元です。
Flowcharts – Basic Syntax
※流用される場合は自己責任でお願いします。
デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。