Markdown でフローチャート線(エッジ)の変更まとめ (Mermaid)

便利ツール

2022.01.27

Notion でフローチャートをはじめとした図が書けるようになりました！これは Mermaid に対応したことによるものです。

前回の記事では、「フローチャートの書きかたの基本」と、その応用として「全体の図の方向の決め方・設定の方向」についてまとめました。今回の記事では、その続きとしてフローチャートを書く上で知っておけるといい機能「矢印・エッジの変更」についてまとめていきます！

　基本的な書き方について知りたい方は、この記事からみてください！！
https://ai-research-collection.com/mermaid_flowchart1

フローチャート作り方実践編

フローチャートを書く上で、線の部分(エッジ/辺)を変えたいと思うことがあると思います！
そこで、よく使いそうなものをコードと完成例つきでまとめていきます！(ここで紹介するコードは下のサンプルコードの2行目を変更するだけで、そのまま使えます！)

flowchart LR
    はじめ --> おわり

ここまでは線の種類でしたが、両端のマークも変えることができます！

また、線(エッジ)の間に文章を入れることもできます！
方法は、主に2種類です。

➀ 通常のコード + |文章|

flowchart LR
    はじめ -->|処理| おわり

➁ 通常のコードの中に文章挿入

flowchart LR
　　はじめ --処理--> おわり

点線と通常の線で書きかたが➁だと少し変わってしまうので、はじめの内は➀で書いて、慣れてきてより直感的に書きたければ➁を使うのもありだと思います！(ちなみに、著者は➀推しです)

ここまでの説明では、すべて最小の長さで説明をしていたのですが、エッジの長さを調整する方法があります！
その方法は簡単！記号を増やすだけ！

これは、どういうことかというと具体例をあげて説明するとわかりやすいと思います。

間の -が多いほど長くなる

間の .が多いほど長くなる

間の =が多いほど長くなる