【Notion】mermaidでフローチャートを書く方法を丁寧に説明します2023-03-29【Notion】mermaidでフローチャートを書く方法を丁寧に説明しますNotionフローチャートの目的Mermaid記法でフローチャートを作成する。Mermaid記法でフローチャートを書く方法フローチャートを宣言するフローチャートを作成するフローチャートのNodeの形を変えるフローチャートでIF文を利用する(YES/NO)フローチャートの線の種類を変えるMemraid記法は、フローチャートの作成に適した記法です。フローチャートは、処理の流れや手順をグラフィカルに表現するための図式であり、複雑な処理をわかりやすくするために広く用いられています。今回はNotionでフローチャートを作成する方法を紹介していきます。フローチャートの目的フローチャートは、以下のような目的で利用されます。処理の流れをわかりやすくすること処理の手順を明確にすること問題解決のプロセスや、情報システムの構成を説明することMermaid記法でフローチャートを作成する。実際の例を基に作成していきます。今回はフローチャートのサンプルでよく使われるスーパーに買物へ行くを題材にします。「果物を買いにスーパーに行く。りんごかみかんのうち安い方を買うことにする。スーパーが休みなら家に帰る。Notion実際に書いたMemraid記法はこちらになります。これから一つずつ説明します。H;Mermaid記法でフローチャートを書く方法フローチャートを宣言するMemraidでflowchartもしくはgraphと宣言します。これによりフローチャートとしてみなされるようになります。フローチャートの向き先はこちらです。左から右へフローチャートを作成する基本的な書き方からまずは覚えていきましょう。対象を-->で繋ぐことでAとBの繋がりを表現できます。AからBへの遷移を表す(矢印なし)フローチャートにコメントを入れる場合は二通り書き方があります。お好きな方を利用してください。text!|BフローチャートのNodeの形を変えるデフォルトは長方形ですが、いろんな形で表すことができます。Mermaidのフローチャートでよく使うのはこのあたりになります。box}}フローチャートでIF文を利用する(YES/NO)フローチャートで条件分岐を書きたいときは、条件をB{}で表してあげてその先で分岐してあげます。E[End]注意点としては、スペースを開けて書くコメントの書き方だと対象が同じものとして扱われてしまい条件分岐が複数ある時できなくなります。条件分岐時は|YES|のように書きましょう。これが実際の失敗例です。わからない頭になってしまいます。フローチャートの線の種類を変えるmermaid記法のNode同士を繋ぐ線は、直線以外にも太線や関係性を表す線など色々な書き方があります。以下に代表的な線の書き方をまとめました。目的に合わせた線を書けると意味も伝わりやすくなるためぜひ有効活用してみてください。以上mermaidでフローチャートを書く方法をご紹介しました。元エンジニアのプロダクトマネージャー。大規模プロダクトからスタートアップの顧問まで担当。事業開発・プロダクト戦略・KPI立案からのグロースが得意。読者になるこのブログについてはてなブログをはじめよう!ikuo00ukさんは、はてなブログを使っています。ブログを報告する引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。