Mermaidで会話フロー図を作るだけで対話botが構築できるようにした & Slack上で動かしてみた

要約

Mermaidで会話フロー図を作るとそれを読み込んで対話botを構築してくれるスクリプトを作った。さらに、出来上がった対話 botAWS lambda + Slack API 構成で Slack 上で動くようにした。

出来上がった品

slack上での動作例

「@jiya hi」と入力すると会話スタート。質問してくるので、答えていくと、次に何するべきかを提示してくれる。会話フローはこんな感じで定義している。

会話フロー

この会話フローが Mermaid で記述されており、容易に変更できるようになっている。

スクリプトはこちら github.com

経緯

最近 Mermaid がマイブームで、設計図とかサービス間の連携の図とか、ちょっとした図はとりあえず Mermaid で記述している。だけど複数の分岐があるようなフロー図って、図にしてもぶっちゃけ読む気しないよなぁ...と思って、アキネイターみたいに対話形式で結論を出してくれるものが欲しくなった。せっかくならいろんな人(主に会社の人)に使ってもらえるように Slack アプリとして動かせるようにした。

技術要素

今回お世話になった技術

mermaid-js.github.io

いろんな図をマークダウンで記述・生成できるようにしたもの。GitHub や Notion で動くのが素晴らしい。

api.slack.com

Slack に色々な自作アプリを連携して workspace をカスタマイズできるようにするもの。

aws.amazon.com

簡単な処理をサーバーレスで行えるようにしてくれるサービス。