【Power Apps】手書きの図をAI BuilderでMermaid記法に自動変換してみた

この記事を読んでわかること

• Power Appsで手書きの図をAI Builderに送り、Mermaid記法に自動変換する方法
• ペン入力とカメラ撮影、それぞれの使用感と比較
• 既存のMermaid PCFコントロールと組み合わせてアプリ内プレビューする方法

やりたいこと

突然ですが、もうMermaid記法を自分で書きたくないと思いませんか。手書きでチャート書いてAIが書いてくれたらいいじゃんって。

打ち合わせ中にサッと描いたフロー図を、どうしてもPower AppsでMermaid記法としてプレビューしたい。なんなら手書きで書くところからPower Appsでやりたい。どうしても。

今回は、Power Appsで手書きの図を書いたり、図を写真で撮ったりして、AI BuilderでMermaid記法に変換→アプリ内でプレビューするのをやってみました。

以前、Power Apps内でMermaid記法をプレビューできるPCFコントロールについて記事を書きました。今回はその活用先を広げる試みです。同時にMermaid記法を自分で書きたくない強い信念を持っています。

参考：Power AppsでMermaid記法をプレビューする（PCFコントロール）

仕組みの全体像

全体の流れはとてもシンプルです。

1. Power Apps上で手書きの図を取得する（ペン入力 or カメラ撮影）
2. 取得した画像をAI Builderに送る
3. AI Builderが画像を解析し、Mermaid記法のテキストを返す
4. 返ってきたMermaid記法を、PCFコントロールでプレビュー表示する

AI Builderに送るプロンプト

AI Builderに渡しているプロンプトはこちらです。

Power Appsのアプリから渡された画像を解析し、その内容をMermaid記法で表現するAIアシスタント向けのプロンプトを作成してください。

---

## コンテキスト
Power Appsのアプリから送られてくる画像を受け取り、その画像の内容を理解して、Mermaid記法（フローチャートやシーケンス図、quadrantChartなどの図表記法）で表現するタスクです。

## 指示
1. 画像の内容を詳細に解析してください。
2. 画像に含まれる要素（ノード、関係、フローなど）を特定し、それらをMermaid記法で表現してください。
3. Mermaid記法の種類（例：flowchart、sequenceDiagramなど）は画像の内容に最も適したものを選択してください。
4. 出力は正確なMermaid記法のテキストとして返してください。

## 出力形式
- Mermaid記法のテキストをそのまま返してください。
- 余計な説明や注釈は含めず、純粋なMermaidコードのみを出力してください。　
- ```mermaidや、```

も不要です

---

画像を入力してください：Image

Mermaid記法の種類（flowchart、sequenceDiagram、quadrantChartなど）は指定せず、AI Builder側に画像の内容から最適なものを選ばせています。手書きの図がフローチャートっぽければflowchartを、シーケンスっぽければsequenceDiagramを返してくれるので、柔軟に対応できます。（今の所フローチャート以外は試したことがないです）

実際にやってみた

ペン入力パターン

Power Appsにはペン入力コントロールがあるので、まずはこちらで試してみました。

ペン入力コントロールで図を描いて、そのImageプロパティをAI Builderに送信します。

ちゃんとMermaid記法に変換されて、プレビューもできました。

…が、ペン入力には重大な欠点がありました。

Apple Pencilを使っていても、一画描くごとにワンテンポ待たないと次の線が認識されないのです。ピーっと線を引いて、少し間を置いて、次の線を描き始める…という感じ。連続して文字を書こうとすると全然ついてこないので、文字入りの図を描くのはかなりストレスです。

（正直、これは実用にはちょっと厳しいかなと思いました…）

カメラ撮影パターン

ペン入力の書き心地に限界を感じたので、別のアプローチを試しました。紙やホワイトボードに普通に描いて、それをPower Appsのカメラで撮影する方法です。（ホワイトボードがないのでiPadの画面を壁に投影しています。真っ暗な部屋でこれを検証しています。真っ暗です）

撮影した画像をAI Builderに送信すると…

こちらもちゃんと変換されました。そして何より、紙やホワイトボードに書くときの書き心地は最高です。当たり前ですが、ペンのレスポンスを気にする必要がないので、自然なスピードで図が描けます。

打ち合わせ中にホワイトボードに描いた図をパシャッと撮ってMermaid化する、というユースケースを考えると、むしろこっちのほうが本命だと思います。

余談ですが、ホワイトボードに投影している手書きはOneNoteで書いています。もはやOneNote内の Copilotが読み取って綺麗な図として清書して生成してくれるのでは・・

比較：ペン入力 vs カメラ撮影

まとめ

AI Builderの画像認識とMermaid記法の組み合わせをしたことある人いらっしゃいますか。世間はCoworkで盛り上がっているのに、なぜMermaid記法とPower Appsの組み合わせネタを出し続けているんだろうか。

（あと、5個ぐらいネタあるのでしばらくやり続けたいと思います笑。やろうと思えば、あと10個ぐらいいけるかな。）

参考：Power AppsでMermaid記法をプレビューする（PCFコントロール）

tantan_tech

淡々と改善している人

XContact

建設会社にて、現場の施工管理からDX推進、データ利活用や機械学習を経て、現在は社内の市民開発（Power Platform）を推進しています。