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
今回は描画される図を省略いたしました。
理由として、VSCodeのmarkdown preview enhancedでは表示されるのに何故かはてなブログでは表示されなかったためです(原因は不明。色々試したのですが上手くいかず)
申し訳ありません
FizzBuzzのフローチャートをMermaidで書いて感じた注意点として
- IDの部分は、語尾に
end
を使えない(予約子とかなのかもしれない)END
やEnd
は大丈夫。またend_xxx
もOK。xxx_end
の形だけがNG。
- text部分に
"
は使えない
おわりに
「MermaidでFizzBuzzのフローチャートの書き方」について解説しました。
仕方ないとはいえ、あまりきれいなフローチャートにはなりませんでした(笑)でも簡単にフローチャートを書くという点では良いなと思いました。
ちょっとしたフローチャートをMermaidで書きたいけど書き方に困ったときに参照していただければと思います。
さいごに、記事を書く上で参考にしたサイトのリンクを以下に掲載します。合わせて読んでいただくと良いかと思います。