フローチャートの書き方メモ - mermaid.js

(src=original)

はじめに

フローチャートを書きたいときには、どんなツールを使うのが良いのでしょうか。

以前の私はパワーポイントもしくはイラストレーターで一生懸命作っていましたが、 時短を意識してマークダウンエディターで文書を書くようになってからは、mermaidというjavascriptで書かれた描画ツールをよく利用しています。^[1]

mermaidを使うメリットをまとめてみました。

• ユーザーは図の論理構造だけを考えれば良い。

• フローチャート以外の図も充実。（ガントチャート、UML図など）

• コードで記述するのでgitで変更差分を管理できる。

• cssやjavascriptの知識があれば、デザインを調整可能。^[2]

それでは、実際に使ってみましょう。

使ってみる

簡単な例をみてみましょう。Fig.1はジャンケンの関係を表すフローチャートです。

フローチャート記号もジャンケンのシンボルに似たデザインで合わせてみました。

Fig.1 簡単なフローチャートの例

live editor もしくは、typoraやVisual Studio Codeなどのマークダウンプレビューが可能なエディターを立ち上げて以下のコードを書いてプレビューします。 するとFig.1のようなグラフを描画できます。live editorでは画像ファイルとしてダウンロードも可能です。

```mermaid
graph LR 
  id1([グー])
  id2>チョキ]
  id3{パー}
  id1-->id2
  id2-->id3
  id3-->id1
```

簡単な説明

まず、フローチャートであることを明示するためにgraphと書きます。その右に書いた LRは"左から右"という意味です。TDもしくはTBと書くと、上から下へのフローチャートになります。

id+数字で書かれたところはフローチャートの要素の名前です。その右側に書いているのが、端子の形と端子の中に書く文字列です。 id1([グー])は中にグーと書いた丸端子です。

HTMLに埋め込む

このサイトのようにHTMLの中でdiv要素の中にコードを記述して直接ウェブページにフローチャートを書くこともできます。

ただし、最後にmermaidのjavascriptを読み込む必要があります。

javascriptファイルはこちらからダウンロードできます。

<div style="text-align:center" class="mermaid"> 
graph LR
  id1([グー])
  id2>チョキ]
  id3{パー}
  id1-->id2
  id2-->id3
  id3-->id1
 </div>

 <script src="mermaid.min.js"></script>

optimize(;minify=false)

チートシート

フローチャートの記号にはそれぞれ意味があるようです。丸端子は始点終点、◇は分岐といった具合です。

フローチャートの記号の意味と、記号の出力方法の両方を知っていないとmermaidでフローチャートを作ることはできません。

そこで、JIS規格っぽい感じのフローチャートを書くためのチートシート（Fig.2）を作りました。

Fig.2 フローチャートのチートシート

フローチャート記号の中に括弧も一緒に記載したので、記号の記述を忘れてもすぐに理解できます。

実際のコードは以下のとおりです。

graph TD
  id1(["([はじめ])"])
  id2("(家帰る)")
  id3{"{運動したか？}"}
  id4("(風呂に入る)")
  id5[["[[筋トレ]]"]]
  id6(("((ごはん食べる))"))
  id7(["([寝る])"])
  sub1[["[[筋トレ]]"]]
  sub2[/"[/腕立て伏せ\]"\]
  sub3[腕立て伏せ２０回]
  sub4[\"[\腕立て伏せ/]"/]
  sub5[/"[/アプリで入力する/]"/]
  sub6[("[(データベースに保存する)]")]
  id1-->id2
  id2-->id3
  id3-->|yes|id4
  id3-->|no|id5
  id5-->id3
  id4-->id6
  id6-->id7
  subgraph 腕立て伏せ20回3セットやる
  sub1---sub2
  sub2-.->sub3
  sub3-.->sub4
  sub4-->sub5
  sub4==>|3セット|sub2
  sub5-->sub6
  end

まとめ

コードで管理可能なmermaid.jsを用いたフローチャートの書き方、HTMLへの導入方法、チートシートを書いてみました。

mermaid.jsにはフローチャート以外にもUML図やガントチャート、円グラフを書く機能も用意されています。

機会があれば、こうした機能もブログで使ってみたいと思います。

めでたしめでたし