💡

Mermaidでフローチャートを作成してみる（VS Code）

に公開
VS Code
Markdown
Mermaid
tech

はじめに

自身の研究内容や今後の方針を説明する際、よくフローチャートを作成するのですが、「コードベースで作成できるツールはないのかな？」と探していたところ、Mermaidというツールを見つけました。

実際に試してみたところ、手軽に実装できるうえに、Chatgptとの親和性も良好でした。

この記事では、VS Code上でMermaidを使ってフローチャートを作成する流れを紹介していきます。

Mermaidとは？

テキストベースでフローチャートやシーケンス図を作成をできるツールです。

特徴

  • コードベースで描画できる
    ノードや矢印を定義するだけで図が生成される
  • 再利用性が高い
    コードとして残るため、修正やバージョン管理が簡単
  • 対応ツールが豊富
    Github、VSCode、など

MermaidはVSCodeの拡張機能をインストールすることで、コード書きながらプレビューできるようになります。
エディタ上で完結するため、実装・修正が非常にしやすいです。

また、Chatgptとの相性も良いです。
フローの概要と出力形式をChatgptに伝えれば、Mermaid形式のコードを生成してくれるので、それをVSCodeに貼り付けて調整するだけでOKです。

🔑 アイデアの壁打ちはChatGPT、描画と調整はVS Code、という風に作業できる

実際にVSCodeでMermaidを使う手順

1．VS Codeの拡張機能をインストール

  • VS Codeを開き、左側の拡張機能タブをクリック
  • 「Markdown Preview Mermaid Support」をインストール

2. Mermaidコードを書いてみる

Markdownファイル（.md）を作成し、コードを記述する。

```mermaid
flowchart LR

    %% ノードの定義
    A[スタート]
    B[処理1]
    C[処理2]

    %% 処理の流れを定義
    A --> B --> C

3. プレビューで確認

  • ショートカットキー
    • Windows / Linux → Ctrl + Shift + V
    • Mac → Cmd + Shift + V
  • コード最上部に表示されるMermaidEditorをクリック。

以下のように、左側にコード、右側にプレビューが表示されます

まとめ

今回はフローチャートを作成する手段として Mermaid を試してみました。
VS Code上でプレビューしながらサクサク編集できる点は非常に便利で、おすすめできます。

一方で、細かいレイアウト調整などはコードだけでは難しい部分もあり、多少の試行錯誤が必要でした💦
また、自分にとっては 「ChatGPTで雛形を作る → VS Codeで調整する」 という流れが作業スタイルに合っていると感じました。
この記事では触れていない機能もまだまだあるので、気になる方はぜひ調べてみてください。

今後も研究ログや記事作成の中で、Mermaidを活用してフロー図を整理していこうと思います。

Discussion