386
408

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

「Claude × Draw.io × スイムレーン」で業務フロー図のたたきを瞬時に作るプロンプト

Last updated at Posted at 2025-08-04

はじめに

ご無沙汰しております。Cursor→Claudeとコスって開発PMを日々やっている中で、何を発信してよいやら迷走した1ヶ月でしたが復活しました。結局のところ、Tipsとプロンプトかなあというところに思い至りまして、そのまま使えずとも、「こんなことに使えるんだあ」という気付きになれば幸いです。
Claudeと言いつつ、ChatGPTでもGeminiでも行けるっちゃいけるんですが、Opusがやっぱり優秀なのでClaudeでやっています。

概要:ワークフロー図づくりで“詰む”前に──

「フロー図描いてって軽く言われたけど、そもそも何を聞けばいいんや……」――そんな若手の悲鳴を(また)聞きまして、プロンプトで一撃解決できんかと作ってみました。
「プロンプトはそのまんま載せてます。コピペして即生成AIに突っ込めば動くはず。

こんな感じのフローが簡単に作れるはずです

image.png

目次

  1. なんでプロンプト?:背景と狙い
  2. プロンプト全文
    • 2-1. ワークフロー分析アシスタント
    • 2-2. ワークフロー図作成プロンプト
  3. こう使うとハマらない:実践 Tips
  4. まとめ:フロー図は で描け

1. なんでプロンプト?:背景と狙い

プロダクト相談で一番多いのが 「資料がフワッとしてて進まん」 問題。とりあえずやったれ精神でヒアリングに飛び込むのは素敵ですが、要点を取りこぼすと後で仕様変更が襲ってきます。

行動を変えるのは難しい。
だったら “行動が変わる仕掛け” を先に置けばいい!

ということで、質問・確認事項を“プロンプト化” → ChatGPT に肩代わりしてもらうアプローチを試行。社内で回したら「これは便利」と声が上がったので、Qiita にも放流します。


2. プロンプト全文

2-1. ワークフロー分析アシスタント

# ワークフロー分析アシスタント
あなたはワークフロー図作成の専門家です。提供された説明テキストから、ワークフローの基本構造を分析し、不足している情報を特定します。
## 実行手順
1. 提供されたテキストを分析し、以下を抽出してください:
   - プロセスの流れ(開始→終了)
   - 関係者/部門(誰が何をするか)
   - 判断・分岐ポイント
   - システム連携箇所
2. 抽出した情報を以下の形式で整理:
【抽出できた情報】
ワークフローの概要:
識別できたプロセス:
識別できた関係者:
識別できた分岐条件:
【不明確な点】
3. ワークフロー図作成に必要だが不足している情報をリストアップ
最後に「これらの情報でワークフロー図の作成を開始しますか?それとも不明確な点について確認しますか?」と質問してください。

2-2. ワークフロー図作成プロンプト

# 基本指示
draw.io形式(.drawio/.xml)で編集可能なワークフロー図を作成してください。以下の設計原則を厳守してください。

# 設計原則
## 1. レイアウト構造
スイムレーン構造を採用し、役割や部門ごとにレーンを分けること
左から右への一方通行の流れで構成すること(逆戻りする矢印は禁止)
横幅は必要に応じて拡張可能(制限なし)
A4横向き(16:9)での表示を想定した縦横比で作成

## 2. 矢印・接続線のルール
縦横線のみで構成(斜め線は使用禁止)
edgeStyle=orthogonalEdgeStyleを使用
矢印の交差は最小限に抑える
グリッド(10px単位)に沿った配置

## 3. 要素の配置
各プロセスは明確に左から右へ進行
並列処理は上下に配置し、合流点は右側に設定
適切な余白と間隔を確保

## 4. 視覚的要素
役割別・機能別に色分けを実施
フォントサイズは視認性を考慮(タイトル20pt以上、本文12pt以上)
重要な情報(特典、新機能など)は別枠で下部に配置

# 必要情報のヒアリング
作成前に以下の情報を提供してください:

## 1. 基本情報
[ ] ワークフローのタイトル
[ ] 対象システム/サービス名
[ ] 想定利用者(誰のためのワークフローか)

## 2. プロセス情報
[ ] 主要なプロセス/ステップの一覧
[ ] 各プロセスの実行者(部門/役割)
[ ] 分岐条件がある場合はその詳細

## 3. スイムレーン設定
[ ] 必要なレーン数と各レーンの名称
例:利用者、システム、管理者、外部連携など
[ ] 各レーンの責任範囲

## 4. 特殊要件
[ ] 並列処理の有無とその内容
[ ] 条件分岐の詳細(Yes/No分岐など)
[ ] 外部システムとの連携ポイント
[ ] 特に強調したい要素(新機能、特典など)

## 5. 付加情報
[ ] 補足説明が必要な箇所
[ ] 注意事項や制約事項
[ ] バージョン情報や更新日

# 出力形式

<?xml version="1.0" encoding="UTF-8"?>
<mxfile host="app.diagrams.net" ...>
  <!-- draw.io形式のXMLコード -->
</mxfile>

# サンプル質問フォーマット
1. ワークフロー名:[記入してください]
2. 主要プロセス:
   - [ ] プロセス1:[内容](実行者:[部門/役割])
   - [ ] プロセス2:[内容](実行者:[部門/役割])
   ...
3. スイムレーン構成:
   - レーン1:[名称]
   - レーン2:[名称]
   ...
4. 条件分岐:
   - 分岐点:[プロセス名]
   - 条件:[Yes/No または 複数選択肢]
5. 特記事項:[あれば記入]
このプロンプトを使用することで、整理された見やすいワークフロー図を一貫して作成できます。

3. こう使うとハマらない:実践 Tips

よくある詰み 先にこれ聞いとけ! どうプロンプトが効くか
「担当者が増えたけどレーン足りん…」 スイムレーンの責任範囲 2-2 の 3.スイムレーン設定 が事前ヒアリングを強制
「Yes/No だけじゃ分岐増えた…」 分岐条件の粒度 2-1 が 判断・分岐ポイント を抽出→不足を質問
XML がカオスで開けない draw.ioで一度プレビュー プロンプトが orthogonalEdgeStyle 指定で崩れにくい

ポイントは「負債を作らない型」を最初に置くこと。
最初の 30 分を ChatGPT に丸投げ ⇒ 返ってきた雛形を一緒にレビュー、がワークフロー育成の鉄板ムーブです。


4. まとめ:フロー図は で描く

  • 質問リスト化 → AI に丸投げ でヒアリング漏れを撲滅
  • 設計原則をプロンプトに埋め込み、レイアウトベースの作成を自動化
  • 若手でも「動く一枚絵」をサクッと起こせるから、次の改善に頭を使える

フロー図を作るとき、日本の開発現場のどこかがちょっとでも楽しくなれば幸いです。
おわり。

いえらぶでは一緒に最速でサービス開発する仲間を募集しています

AIを活用しまくっているのは、つまるところ業界に対して1つでも多く・早くプロダクトを提供するのが目的です。共感してくれる方を広く募集しています。

カジュアル面談しましょう

DMいつでもお待ちしております。採用拘わらず、AIについてでもマネジメントについてでも、何でもお話ししたいです。

新卒採用サイト

大学生向けインターンシップ「いえらぶAIブートキャンプ」募集ページ

386
408
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
386
408

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?