本投稿は TECOTEC Advent Calendar 2025 の7日目の記事です。
ソリューション本部の黒田です。
普段はUIUXデザインを担当しております。
昨今、AIを使用してデザイン・開発を効率化する流れが主流となってきています。
今回は 「Mermaid to FigJam」 というプラグインを使用して、フロー図を簡単に自動生成できる方法を紹介します。
- Mermaid to FigJamとは？
- Mermaid to FigJamを使うメリット
- Mermaid記法でフロー図を出力
- Mermaid to FigJamでフロー図を生成
- 最後に
- テコテックの採用活動について
Mermaid to FigJamとは？
「Mermaid to FigJam」は、Mermaid記法で書かれたテキストベースの図表定義を、「FigJam」上で自動的に図表に変換できるプラグインです。
このプラグインを使用することで、プロジェクトの設計段階で簡単にフロー図やオブジェクト図を作成することができます。
Mermaid to FigJamを使うメリット
プロジェクトの設計段階では、フロー図を「まずテキストで書き起こす」ワークフローが一般化しています。その記法の代表例として Mermaid記法が挙げられます。
Mermaid記法は、GitHub や Notion などの主要ツールに標準対応し、図をテキストとして管理できるため、
- 変更差分が追える
- ドキュメントの自動生成に使える
- レビューしやすい
といったメリットがあります。
一方、プロダクト設計や要件定義のブレストには FigJamがよく使用されます。
この2つをつなぐのが 「Mermaid to FigJam」です。
Mermaid のコードを貼るだけで FigJam ネイティブの図形として再構築してくれるため、貼り付け後に自由に編集することができます。
Mermaid記法でフロー図を出力
ChatGPTなどのAIに現在決まっている仕様を共有して、Mermaid記法で整理してもらうと、簡単に下書きを作成することができます。
今回は例として、「toC向けのレジャー施設のチケット販売サイトのフロー図をMermaid記法で一通り出力してください。」とプロンプトを作成し、ChatGPTに投げ、ブラッシュアップした結果、下記のようなMermaid記法のコードを作成しました。
flowchart TD
%% --- ユーザーフロー ---
A[トップページ] --> B[イベント一覧を見る]
B --> C[イベント詳細ページ]
C --> D[チケット選択]
D --> E[座席指定（任意）]
E --> F[カートに追加]
F --> G[カート確認]
G --> H[ログイン / 新規登録]
H --> I[注文内容確認]
I --> J[クーポン・割引適用]
J --> K[支払い方法選択]
K --> L[決済処理]
L --> M{決済成功？}
M -- はい --> N[チケット発行]
M -- いいえ --> O[決済エラー表示]
N --> P[メール / マイページでチケット確認]
P --> Q[当日入場]
Q --> R{座席指定あり？}
R -- はい --> S[QRコードスキャン・座席案内]
R -- いいえ --> T[QRコードスキャン・自由席案内]
S --> U[入場完了・イベント参加]
T --> U[入場完了・イベント参加]
U --> V[イベント終了後レビュー投稿（任意）]
%% --- オプションフロー ---
F --> W[購入途中でキャンセル]
W --> X[カート削除 / トップページへ戻る]
%% --- 管理者フロー ---
AdminStart[管理者ログイン] --> AdminA[イベント作成・編集]
AdminA --> AdminB[チケット種別設定]
AdminB --> AdminC[在庫管理]
AdminC --> AdminD[売上・アクセス分析]
%% --- フロントと管理者の関係 ---
B -.-> AdminA
N -.-> AdminC
V -.-> AdminD
Mermaid to FigJamでフロー図を生成
FigJamでMermaid to FigJamを実行します。
FigJam上の下のツールバー「+」ボタンより、「Mermaid to FigJam」で検索し、「実行」→「Generate Flowchart from Mermaid」を選択します。
すると、変換モーダルがでてくるので、先ほど出力したMermaid記法を貼り付けて、「Mermaid→FigJam」のボタンをクリックします。
処理が成功すると、下記のフロー図が完成します！
最後に
今回は簡単なプロンプトでフロー図を作成しましたが、実際のプロジェクトではより複雑な要件を整理し、プロンプトに落とし込んで正しいフロー図を作成する必要があると思います。
これからのAI時代、どのようにAIを上手く使いこなせるかがキーポイントだと私は考えていますので、今後も積極的に多くのAIに触れて業務効率化を図っていきたいと思います。
本記事が少しでも多くの方の、AIを使う手助けになれば幸いです。
テコテックの採用活動について
テコテックでは新卒採用、中途採用共に積極的に募集をしています。
採用サイトにて会社の雰囲気や福利厚生、募集内容をご確認いただけます。
ご興味を持っていただけましたら是非ご覧ください。
tecotec.co.jp
