# 【Power Apps】手書きの図をAI BuilderでMermaid記法に自動変換してみた - 公開日: 2026-03-11 - カテゴリ: Power Apps - 著者: tan（@kama_bizdev） - URL: https://flow-with-tech.com/power-apps-handwriting-to-mermaid-ai-builder/ - サイト: 改善紀 — 好奇心の赴くままに。 --- ## この記事を読んでわかること - 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コントロール）](https://flow-with-tech.com/power-apps-mermaid-pcf-preview/) --- ## 仕組みの全体像 全体の流れはとてもシンプルです。 ![](https://flow-with-tech.com/media/wp/2026/03/CleanShot-2026-03-11-at-18.53.04@2x.png) 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にはペン入力コントロールがあるので、まずはこちらで試してみました。 ![](https://flow-with-tech.com/media/wp/2026/03/CleanShot-2026-03-11-at-18.42.14.gif) *早送りしています* ペン入力コントロールで図を描いて、そのImageプロパティをAI Builderに送信します。 ちゃんとMermaid記法に変換されて、プレビューもできました。 ![](https://flow-with-tech.com/media/wp/2026/03/CleanShot-2026-03-11-at-18.44.27@2x.png) **…が、ペン入力には重大な欠点がありました。** Apple Pencilを使っていても、**一画描くごとにワンテンポ待たないと次の線が認識されない**のです。ピーっと線を引いて、少し間を置いて、次の線を描き始める…という感じ。連続して文字を書こうとすると全然ついてこないので、文字入りの図を描くのはかなりストレスです。 （正直、これは実用にはちょっと厳しいかなと思いました…） ### カメラ撮影パターン ペン入力の書き心地に限界を感じたので、別のアプローチを試しました。**紙やホワイトボードに普通に描いて、それをPower Appsのカメラで撮影する**方法です。（ホワイトボードがないのでiPadの画面を壁に投影しています。真っ暗な部屋でこれを検証しています。真っ暗です） 撮影した画像をAI Builderに送信すると… ![](https://flow-with-tech.com/media/wp/2026/03/CleanShot-2026-03-11-at-18.46.02.gif) こちらもちゃんと変換されました。そして何より、**紙やホワイトボードに書くときの書き心地は最高**です。当たり前ですが、ペンのレスポンスを気にする必要がないので、自然なスピードで図が描けます。 打ち合わせ中にホワイトボードに描いた図をパシャッと撮ってMermaid化する、というユースケースを考えると、**むしろこっちのほうが本命**だと思います。 > 余談ですが、ホワイトボードに投影している手書きはOneNoteで書いています。もはやOneNote内の Copilotが読み取って綺麗な図として清書して生成してくれるのでは・・ --- ## 比較：ペン入力 vs カメラ撮影 | 項目 | ペン入力 | カメラ撮影 | | --- | --- | --- | | 書き心地 | △ レスポンスが遅い | ◎ 紙・ホワイトボードなので自然 | | 手軽さ | ○ アプリ内で完結 | △ 紙やホワイトボードが別途必要 | | 実用性 | △ 文字入りの図は厳しい | △ Mermaidなんて意識しない | | おすすめ度 | **そもそも** | **このアプリ要る？** | --- ## まとめ AI Builderの画像認識とMermaid記法の組み合わせをしたことある人いらっしゃいますか。世間はCoworkで盛り上がっているのに、なぜMermaid記法とPower Appsの組み合わせネタを出し続けているんだろうか。 （あと、5個ぐらいネタあるのでしばらくやり続けたいと思います笑。やろうと思えば、あと10個ぐらいいけるかな。） > 参考：[Power AppsでMermaid記法をプレビューする（PCFコントロール）](https://flow-with-tech.com/power-apps-mermaid-pcf-preview/)