MermaidでFizzBuzzのフローチャートを書いてみる

はじめに

この記事では、「MermaidでFizzBuzzフローチャートの書き方」について書いています。

Mermaidとは、フローチャートシステム開発で使われるシーケンス図、ガントチャートなどをテキストで表現することができます。

最近QiitaやGitHubなどでMermaidがサポートされるなど使える場面が増えているため、書き方を試しながら学んでみようとなったのが記事を書いたきっかけです。

その中でフローチャートの基本的な書き方を調べてみました(あまり実例に沿った書き方がWebで調べても見つからなかったので、、、)

自分に向けた備忘録でもありますが、「Mermaidで簡単なフローチャートを書いてみたい」な人の一助になれば嬉しいです。

コード

早速ですがFizzBuzzフローチャートをMermaidで書いたコードが下記です。(変数名が雑ですがご容赦ください)

```mermaid
flowchart TD
  start([start])
  start --> loop_begin[/for i in 1..100\]
  loop_begin --> c_fizzbuzz{i%15 == 0}
  c_fizzbuzz -->  |yes| fizzbuzz[[Output FizzBuzz]]
  c_fizzbuzz -->  |no| c_fizz{i%3 == 0}
  c_fizz -->  |yes| fizz[[Output Fizz]]
  c_fizz -->  |no| c_buzz{i%5 == 0}
  c_buzz -->  |yes| buzz[[Output Buzz]]
  c_buzz -->  |no| num[[Output 'i']]
  fizzbuzz --> loop_finish[\ loop end /]
  fizz --> loop_finish  %% ここはコメントです
  buzz --> loop_finish
  num --> loop_finish
  loop_finish--> EOF([end])
```

上の記述でフローチャートが描画されます。

Note

今回は描画される図を省略いたしました。

理由として、VSCodemarkdown preview enhancedでは表示されるのに何故かはてなブログでは表示されなかったためです(原因は不明。色々試したのですが上手くいかず)

申し訳ありません

FizzBuzzフローチャートをMermaidで書いて感じた注意点として

  • IDの部分は、語尾にendを使えない(予約子とかなのかもしれない)
    • ENDEndは大丈夫。またend_xxxもOK。xxx_endの形だけがNG。
  • text部分に"は使えない

おわりに

「MermaidでFizzBuzzフローチャートの書き方」について解説しました。

仕方ないとはいえ、あまりきれいなフローチャートにはなりませんでした(笑)でも簡単にフローチャートを書くという点では良いなと思いました。

ちょっとしたフローチャートをMermaidで書きたいけど書き方に困ったときに参照していただければと思います。

さいごに、記事を書く上で参考にしたサイトのリンクを以下に掲載します。合わせて読んでいただくと良いかと思います。

mermaid-js.github.io