1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

業務フロー図(BPMN)を日本語から生成するWebアプリを作った ― AIに何をさせ、何を人が握るか

1
Last updated at Posted at 2026-07-06

業務フロー図(BPMN)を日本語から生成するWebアプリを作った ― AIに何をさせ、何を人が握るか

「この業務、そもそもどうなってるんだっけ?」

自動化やDXの相談を受けると、たいてい最初にこの壁にぶつかります。業務が図になっていない。頭の中と口頭でだけ回っている。だから、何を自動化すべきかも決められません。

そこで、日本語で業務を説明すると、編集できる業務フロー図(BPMN)に変換するWebアプリを作りました。まず動くものです。

この記事は「作りました」の紹介より、AIに任せた所と、あえて人間(コード)に握らせた所の設計判断を、実装した一次情報として残すものです。ここが、チャットAIに投げるのと道具にするのとの分かれ目でした。

BPMN … 業務フロー図の国際的な書き方の規格。丸(開始・終了)、四角(作業)、ひし形(分岐)と線で業務を表します。

何ができるか

「顧客からメールで注文が届く。営業担当が在庫を確認し、あれば出荷、なければ発注する」——このくらいの日本語を書いて「生成」を押すと、担当者・作業・分岐・合流を備えたフロー図が出ます。

日本語の業務説明から生成した業務フロー図(BPMN)の例

出た図はその場で編集できます(bpmn.io のエディタを内蔵)。さらに、業務の横断検索・カテゴリ一括変換・CSV出力まで通します。

そしてAIの処理は、利用者のPC内のローカルLLM(Ollama)で完結できます。業務の内容を外部に送りません。お好みで自分のAPIキーで OpenAI / Gemini / Anthropic を選ぶこともできます。

なぜチャットAIでなく「道具」にしたか

チャットAIに頼めば、フロー図の下書きは出ます。ではなぜアプリにしたのか。理由は2つです。

  1. 出た図を道具として使いたい:編集・検索・一括変換・書き出し。貼って終わりにしない。
  2. 業務の内容を外に出したくない:社外に見せられない業務でも、手元だけで図にできる。

社員が業務内容を外部AIに貼ってしまう「シャドーAI」の不安は、現場でよく聞きます。ローカルで完結する選択肢は、その不安への直球の答えです。

設計の肝:AIにBPMNのXMLを直接書かせない

📌 ここから数セクションは開発者向けの技術解説です。ツールの活用や業務改善に関心のある方は、「実測でわかったこと」や「おわりに」まで読み飛ばしてかまいません。

ここが実装のいちばんの判断です。

BPMNの実体は、要素と座標を持つXMLです。最初、これをLLMに直接書かせようとしました。結果は破綻でした。小さいモデルはXMLの構造をすぐ崩します。

方針を変えました。LLMには「工程」と「線」だけの中間JSONを出させる。そこから先――XMLへの変換と図のレイアウト――は、AIを使わない決まりきったコードに任せる。

日本語 → [LLM] 中間JSON(工程と線だけ) → [検証] → [決定的コード] BPMN XML+自動レイアウト → 描画

中間JSONの形はこれだけです。

{
  "nodes": [{ "id": "n1", "type": "start|task|gateway|end", "label": "表示名", "lane": "担当者" }],
  "edges": [{ "from": "n1", "to": "n2", "label": "分岐条件" }]
}

XML化には bpmn.io 公式の bpmn-moddle(意味モデルの組み立て)と bpmn-auto-layout(座標の自動付与)を使いました。レイアウトを自前で書かないのは、車輪の再発明を避けるためです。

さらに、Ollama の構造化出力(出力の形をJSONスキーマで縛る機能)を必須にしました。これを入れた瞬間、形式の崩れがほぼ消えました。

機械検証を挟む ― これが「要件定義の抜け漏れチェック」

中間JSONを、決まった11項目で機械採点してから図にします。到達できない工程がないか。分岐に条件ラベルが付いているか。開始と終了があるか。

この発想は、要件定義の「抜け漏れチェック」そのものです。仕様に穴がないかを、人手でなく仕組みで見る。長くプロジェクトの段取りを整えてきた延長で、自然にこの形になりました。

そして重要なのが、AIの出力は9割でいいという割り切りです。足りない1割は検証が「ここが繋がっていません」と赤で指摘し、利用者が図の上で線を1本引いて直す。エディタという保険があるから、AIに完璧を求めずに済む。この一点が、軽いモデルでも成立する理由です。

実測でわかったこと(数字は試作の実測です)

同じ受注業務の説明で、モデルを変えて試しました(GPUなしのCPU)。

モデル 結果 所要
qwen2.5:3b 分岐後の「合流」を落とす 約30〜60秒
qwen2.5:7b 合流まで正しく描く 約1〜2分

差が出たのは、分岐が1本に戻る「合流」でした。実務のフローは合流が頻出するので、精度差はここに集約されます。推奨は7B、最低ラインは3B(3Bは下書き+手直し前提)。GPUがあればどちらも数秒です。

本人しか気づけない罠も2つ拾いました。

  • 簡体字の混入:qwen系(中国由来のモデル)は、日本語出力に簡体字が混じることがあります(「営業」が「营业」など)。日本語へ寄せる正規化を1枚かませて潰しました。
  • 公開版ではローカルLLMに繋げない:これは公開して初めて出た罠です。HTTPSの公開サイトから、各自のPCのlocalhost(Ollama)へは、ブラウザのセキュリティ(Private Network Access/混在コンテンツ)で接続できません。なので公開版は「自分のAPIキーでオンラインAI」用途に割り切り、ローカルで完結したい人は手元で起動してもらう案内を、アプリとREADMEの両方に入れました。

技術スタック

  • フロント:Vanilla JS(ESM)+ Vite。フレームワークなし。
  • BPMN:bpmn-js / bpmn-moddle / bpmn-auto-layout
  • AI:Ollama(ローカル)/ BYOKで OpenAI・Gemini・Anthropic
  • サーバー・データベースなし。業務データはブラウザ内だけ。ホスティングは静的配信(Cloudflare Pages)。

守るべきデータをサーバーに置かない、という設計が、そのままセキュリティの答えになっています。

FAQ

Q. 業務の内容はどこかに送信されますか?
ローカルAI(Ollama)を選べば送信しません。処理はあなたのPC内で完結し、データはブラウザの中だけに保存されます。オンラインAIを選んだ時だけ、その説明文が選んだAI提供元に送られます(画面で明示します)。

Q. 図が完璧に出ません。
AIの下書きは9割主義です。軽いモデルでは分岐の合流などが抜けます。ツールが抜けを赤で指摘するので、図の上で線を1本引けば完成します。より正確な図には7Bモデルを使ってください。

Q. 公開版でローカルAIが動きません。
ブラウザの制限で、公開サイトから各自のlocalhostへは繋げません。ローカルで使う場合はコードをクローンして自分のPCで起動してください。

おわりに

作ってみて確信したのは、AI活用の要点は「どれだけAIに任せるか」ではなく、どこを人間(と仕組み)が握るかを決めることだ、ということでした。全部AIに投げると崩れる。握る所を設計すると、道具になります。

このツールで「AIに任せる所」と「確実な処理に任せる所」を切り分けたのと同じ考え方で、みなさんの業務でも「自動化すべき所」と「人が判断すべき所」を見極めて設計します。

「自社の業務に合わせたい」「業務の流れごと整理したい」というご相談を承っています。
業務の流れを整理する“要件定義”から、運用後の保守まで対応します。


ママゴトラボは、業務の自動化ツールを要件定義から設計してつくる開発ラボです。
「この作業、自動化できないかな?」がありましたら、お気軽にご相談ください。
👉 https://mamagotolab.com

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?