Mermaidでフローチャートを書きたい！
GitHubでぱぱっと試す
GitHubのマークダウンでMermaid ダイアグラム
https://mermaid.js.org/syntax/flowchart.html
日本語で書ける
ただし全角の「？」「！」を含むとGitHubではエラー
code:はじめてのMermaid フローチャート
---
title: GitHub Blog (2022/02) の例
---
flowchart TD
A本番環境へのデプロイ --> B(今日は金曜日?);
B -- はい --> Cデプロイしない!;
B -- いいえ --> Dデプロイするためにdeploy.shを実行!;
C --> E週末を楽しんで!;
D --> E週末を楽しんで!;
Nodeにidを振る（上のA~E）
https://mermaid.js.org/syntax/flowchart.html#a-node-default
idの代わりにテキストを表示できる
https://mermaid.js.org/syntax/flowchart.html#a-node-with-text
NodeからNodeへ矢印が引ける：Graph
https://mermaid.js.org/syntax/flowchart.html#graph
フローチャートの向き（5種類）
https://mermaid.js.org/syntax/flowchart.html#flowchart-orientation
TD - top-down/ same as top to bottom
TD == TB
Nodeの形状
[]で囲むと長方形
{}で囲むとひし形
https://mermaid.js.org/syntax/flowchart.html#a-node-rhombus
IMO：条件分岐に使えそう
([])で囲むとスタジアム状
https://mermaid.js.org/syntax/flowchart.html#a-stadium-shaped-node
Link
-->で矢印
https://mermaid.js.org/syntax/flowchart.html#a-link-with-arrow-head
リンクにテキストを載せられる（-- はい -->）
https://mermaid.js.org/syntax/flowchart.html#a-link-with-arrow-head-and-text
A-->|はい|Bでもよい
-.->で点線
https://mermaid.js.org/syntax/flowchart.html#dotted-link
Linkの長さについて（TODO）
https://mermaid.js.org/syntax/flowchart.html#minimum-length-of-a-link
Subgrah
https://mermaid.js.org/syntax/flowchart.html#subgraphs
Styling
https://mermaid.js.org/syntax/flowchart.html#styling-and-classes
Interaction!!（TODO）
https://mermaid.js.org/syntax/flowchart.html#interaction
Comment
https://mermaid.js.org/syntax/flowchart.html#comments
バッククォートでマークダウンが書けるみたい