「この業務、そもそもどうなってるんだっけ?」
自動化やDXの相談を受けると、たいてい最初にこの壁にぶつかります。業務が図になっていない。頭の中と口頭でだけ回っている。だから、何を自動化すべきかも決められません。
そこで、日本語で業務を説明すると、編集できる業務フロー図(BPMN)に変換するWebアプリを作りました。まず動くものです。
- ▶ ブラウザですぐ試す:https://mamagotolab.com/bpmn-generator/
- 🔗 コード:mamagotolab/bpmn-generator(MIT)
この記事は「作りました」の紹介より、AIに任せた所と、あえて人間(コード)に握らせた所の設計判断を、実装した一次情報として残すものです。ここが、チャットAIに投げるのと道具にするのとの分かれ目でした。
BPMN … 業務フロー図の国際的な書き方の規格。丸(開始・終了)、四角(作業)、ひし形(分岐)と線で業務を表します。
何ができるか
「顧客からメールで注文が届く。営業担当が在庫を確認し、あれば出荷、なければ発注する」——このくらいの日本語を書いて「生成」を押すと、担当者・作業・分岐・合流を備えたフロー図が出ます。
出た図はその場で編集できます(bpmn.io のエディタを内蔵)。さらに、業務の横断検索・カテゴリ一括変換・CSV出力まで通します。
そしてAIの処理は、利用者のPC内のローカルLLM(Ollama)で完結できます。業務の内容を外部に送りません。お好みで自分のAPIキーで OpenAI / Gemini / Anthropic を選ぶこともできます。
なぜチャットAIでなく「道具」にしたか
チャットAIに頼めば、フロー図の下書きは出ます。ではなぜアプリにしたのか。理由は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
- ご依頼(クラウドワークス):https://crowdworks.jp/public/employees/6942778
ママゴトラボは、業務の自動化ツールを要件定義から設計してつくる開発ラボです。
「この作業、自動化できないかな?」がありましたら、お気軽にご相談ください。
👉 https://mamagotolab.com

