Zenn
🎨

DrawIO向けXML生成プロンプトテンプレート集

に公開
AI
automation
XML
draw.io
AsciiDoc
tech

DrawIO向けXML生成プロンプトテンプレート集

基本プロンプトテンプレート

汎用フローチャート生成プロンプト

メインプロンプトテンプレート

以下のAsciiDoc文書からDraw.io XMLファイルを生成してください。

【必須要件】
・XML宣言とmxfile構造を完全に含める
・id="0"とid="1"の予約セルを必須で含める
・全てのvertex要素にgeometry（x,y,width,height）を設定
・全てのedge要素にedgeStyleとgeometry（relative="1"）を設定
・fillColor、strokeColor、whiteSpace=wrap、html=1を全要素に設定

【スタイル定義】
・楕円（開始/終了）: fillColor=#d5e8d4, strokeColor=#82b366
・矩形（プロセス）: fillColor=#dae8fc, strokeColor=#6c8ebf  
・菱形（判定）: fillColor=#fff2cc, strokeColor=#d6b656
・接続線: edgeStyle=orthogonalEdgeStyle

【レイアウト】
・開始要素: y=50付近
・要素間隔: 垂直100px、水平200px
・中央配置: x=250-350の範囲
・ページサイズ: 1169x827

【ADoc文書】
{ここにADoc文書を貼り付け}

【出力形式】
完全なDraw.io XML形式で出力してください。

使用例

入力ADoc文書

== ユーザー登録プロセス

. システム開始
. ユーザー情報入力
. 入力内容確認
. 登録可能か判定
  * 可能な場合: 登録実行
  * 不可能な場合: エラー表示
. 完了

生成される基本構造

要素タイプ 要素名 配置座標（目安）
楕円 システム開始 x=250, y=50
矩形 ユーザー情報入力 x=250, y=150
矩形 入力内容確認 x=250, y=250
菱形 登録可能か判定 x=250, y=350
矩形 登録実行 x=150, y=450
矩形 エラー表示 x=350, y=450
楕円 完了 x=250, y=550

カスタマイズパターン

高品質版プロンプト

【追加品質要件】
・fontSize=11をすべての要素に設定
・align=center, verticalAlign=middleを設定
・fontStyle=1を開始/終了要素に設定
・strokeWidth=2を重要要素に設定
・spacing=4, spacingTop=-1を全要素に設定

コンパクト版プロンプト

【レイアウト調整】
・要素間隔: 垂直80px、水平150px
・要素サイズ: width=100, height=50
・ページサイズ: 827x1169（縦長）

多分岐対応版プロンプト

【複雑分岐対応】
・3分岐以上の場合は水平配置
・判定要素サイズ: width=140, height=80
・分岐ラベル: Yes/No/その他を明記
・合流処理を適切に配置

基本図形特化プロンプト

プロセス重視プロンプト

プロセス中心のフロー図専用

以下のADoc文書から、プロセス処理を中心としたDraw.io XMLを生成してください。

【プロセス特化要件】
・プロセス要素を視覚的に強調（fillColor=#dae8fc, strokeWidth=2）
・判定要素は最小限に抑制
・サブプロセスは色分けで区別（fillColor=#e1d5e7）
・処理時間や担当者情報をテキストに含める

【推奨要素配置】
・メインプロセス: 中央縦配置
・サブプロセス: 右側配置
・例外処理: 左側配置

【ADoc文書】
{ADoc文書}

完全なDraw.io XML形式で出力してください。

判定重視プロンプト

意思決定フロー専用

以下のADoc文書から、判定・分岐を中心としたDraw.io XMLを生成してください。

【判定特化要件】
・判定要素を大きめに表示（width=140, height=80）
・条件文を明確にラベル表示
・Yes/No以外の多分岐も適切に処理
・判定結果による処理の重要度を色分け

【分岐ラベル要件】
・True分岐: fontColor=#82b366（緑）
・False分岐: fontColor=#b85450（赤）
・その他分岐: fontColor=#6c8ebf（青）

【ADoc文書】
{ADoc文書}

完全なDraw.io XML形式で出力してください。

シンプル構造プロンプト

最小限の要素構成専用

以下のADoc文書から、シンプルな構造のDraw.io XMLを生成してください。

【シンプル化要件】
・要素数を最小限に抑制
・複雑な分岐は統合
・詳細な説明は省略し、概要のみ表示
・直線的なフローを優先

【制約事項】
・要素数: 最大7個まで
・分岐数: 最大2分岐まで
・テキスト: 1行15文字以内

【ADoc文書】
{ADoc文書}

完全なDraw.io XML形式で出力してください。

初心者向けプロンプト

失敗回避特化プロンプト

エラー発生を最小限に抑制

以下のADoc文書からDraw.io XMLを生成してください。
初心者でも確実に動作するよう、安全性を最優先してください。

【安全性最優先要件】
・必須の予約セル（id="0", id="1"）を確実に含める
・全要素にparent="1"を設定
・IDは英数字のみ使用、重複しない
・全vertex要素にvertex="1"を設定
・全edge要素にedge="1"とsource/target属性を設定
・geometryのas="geometry"を忘れずに設定

【基本スタイル（必須）】
・楕円: ellipse;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366
・矩形: rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf
・菱形: rhombus;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656
・接続線: edgeStyle=orthogonalEdgeStyle;rounded=0;html=1

【ADoc文書】
{ADoc文書}

Draw.ioで確実に開ける完全なXML形式で出力してください。

最小品質保証プロンプト

基本的な見た目の品質を確保

以下のADoc文書からDraw.io XMLを生成してください。
基本的な品質基準を満たすよう設定してください。

【品質基準】
・文字サイズ: fontSize=11を全要素に設定
・文字配置: align=center, verticalAlign=middleを設定
・要素サイズ: 楕円・矩形は120x60、菱形は120x80
・要素間隔: 垂直100px、水平180px
・改行処理: 長いテキストは
で適切に改行

【色彩統一】
・同種要素は同色で統一
・コントラストを確保（背景色と文字色）
・全体的な調和を重視

【レイアウト品質】
・中央揃えで整然と配置
・重複・重なりなし
・画面内に収まる配置

【ADoc文書】
{ADoc文書}

視覚的に整ったDraw.io XML形式で出力してください。

段階的生成プロンプト

複雑な文書を段階的に処理

以下のADoc文書を段階的に分析してDraw.io XMLを生成してください。

【段階1: 構造解析】
まず文書構造を分析し、以下を特定してください：
・開始点と終了点
・主要なプロセス要素
・判定・分岐ポイント
・例外処理

【段階2: 要素抽出】
特定した要素を以下の形式で整理してください：
・要素名
・要素タイプ（楕円/矩形/菱形）
・接続関係

【段階3: XML生成】
整理された要素をもとに、以下の品質でXMLを生成してください：
・必須構造要件の完全遵守
・適切なスタイル設定
・論理的なレイアウト配置

【ADoc文書】
{ADoc文書}

段階的に分析した結果を簡潔に示してから、完全なDraw.io XMLを出力してください。

プロンプト使用時の重要ポイント

プロンプト選択の指針

文書の特徴 推奨プロンプト 理由
単純な手順書 シンプル構造プロンプト 要素数が少なく分かりやすい
複雑な業務フロー 汎用フローチャートプロンプト バランスの取れた表現
処理中心の文書 プロセス重視プロンプト 処理の流れを強調
条件分岐が多い文書 判定重視プロンプト 分岐構造を明確化
初回使用・学習目的 失敗回避特化プロンプト 確実な動作を優先
品質を重視する場合 最小品質保証プロンプト 見た目の品質確保
大規模・複雑な文書 段階的生成プロンプト 段階的な処理で精度向上

効果的な活用方法

プロンプトのカスタマイズ手順

  1. ベースプロンプト選択: 文書特徴に応じた適切なプロンプト選択
  2. 要件調整: 組織固有の要件に応じた修正
  3. スタイル調整: 企業カラーやデザイン基準に合わせた色変更
  4. レイアウト調整: 用途に応じたサイズ・配置の微調整

品質向上のコツ

・最初は失敗回避プロンプトで確実な動作確認
・慣れてきたら品質保証プロンプトで見た目向上
・複雑な文書では段階的生成プロンプトで精度確保
・定期的にプロンプトのブラッシュアップを実施

これらの基本プロンプトテンプレートにより、様々なレベルのユーザーが確実にDraw.io XMLファイルを生成できるようになります。次章では、より専門的な図表タイプに特化したプロンプトについて詳しく解説します。

図表タイプ別専用プロンプト

プロセスフロー図プロンプト

標準プロセスフロープロンプト

以下のADoc文書から、プロセスフローに特化したDraw.io XMLを生成してください。

【プロセスフロー特化要件】
・処理ステップを明確に可視化
・各プロセスに処理時間・担当者情報を含める
・サブプロセスは階層的に表現
・例外処理・エラーハンドリングを明示

【スタイル定義】
・メインプロセス: fillColor=#dae8fc, strokeColor=#6c8ebf, strokeWidth=2
・サブプロセス: fillColor=#e1d5e7, strokeColor=#9673a6
・自動処理: fillColor=#f5f5f5, strokeColor=#666666, strokeStyle=dashed
・手動処理: fillColor=#fff2cc, strokeColor=#d6b656
・例外処理: fillColor=#ffcccc, strokeColor=#b85450

【レイアウト】
・メインフロー: 中央縦配置
・サブプロセス: 右側に配置（x=450以降）
・例外処理: 左側に配置（x=50-150）
・処理時間表示: 各要素下部に小さく表示

【テキスト形式】
・処理名
（担当：○○）
（所要時間：○分）

【ADoc文書】
{ADoc文書}

プロセス管理に適したDraw.io XML形式で出力してください。

業務プロセス改善用プロンプト

以下のADoc文書から、業務改善分析用のプロセスフロー図を生成してください。

【改善分析特化要件】
・現状の問題点を可視化（赤色要素で表現）
・改善ポイントを明示（緑色要素で表現）
・ボトルネック箇所を強調表示
・代替フローを破線で表現

【問題・改善の色分け】
・問題のあるプロセス: fillColor=#ffcccc, strokeColor=#cc0000, strokeWidth=3
・改善対象プロセス: fillColor=#ccffcc, strokeColor=#00cc00, strokeWidth=3
・ボトルネック: fillColor=#ffcc99, strokeColor=#ff6600, strokeWidth=4
・代替フロー: strokeStyle=dashed, strokeColor=#999999

【分析用ラベル】
・処理時間、コスト、リスクレベルを併記
・改善効果予測を緑文字で表示

【ADoc文書】
{ADoc文書}

業務改善分析に適したDraw.io XML形式で出力してください。

製造・生産プロセス用プロンプト

以下のADoc文書から、製造・生産ライン用のプロセスフロー図を生成してください。

【製造プロセス特化要件】
・工程順序を明確に表現
・品質チェックポイントを強調
・原料・中間品・完成品を区別
・設備・機械要素を専用スタイルで表現

【製造要素の色分け】
・原料投入: fillColor=#e6f3ff, strokeColor=#0080ff
・加工工程: fillColor=#ffe6cc, strokeColor=#ff8000
・品質検査: fillColor=#ffffe6, strokeColor=#cccc00, shape=hexagon
・設備・機械: fillColor=#f0f0f0, strokeColor=#808080, shape=cylinder
・完成品: fillColor=#e6ffe6, strokeColor=#00cc00

【工程管理情報】
・処理能力（個/時間）
・品質基準値
・設備稼働率
・要員配置数

【ADoc文書】
{ADoc文書}

製造管理に適したDraw.io XML形式で出力してください。

意思決定フロー図プロンプト

標準意思決定フロープロンプト

以下のADoc文書から、意思決定に特化したフローチャートを生成してください。

【意思決定特化要件】
・判定条件を明確に表現
・複数条件の組み合わせを適切に処理
・意思決定の根拠・基準を明示
・結果に至るまでの論理的経路を可視化

【判定要素の強化】
・判定要素サイズ: width=160, height=100
・条件文を2行で明確に表示
・判定基準を括弧内で併記
・優先度によるサイズ調整

【分岐ラベル詳細化】
・YES分岐: value="✓ 条件満たす", fontColor=#00cc00, fontStyle=1
・NO分岐: value="✗ 条件満たさず", fontColor=#cc0000, fontStyle=1
・保留分岐: value="? 要追加検討", fontColor=#0066cc
・その他: 具体的条件を明記

【決定結果の表現】
・最終決定: fillColor=#ccffcc, strokeColor=#00cc00, fontStyle=1
・却下決定: fillColor=#ffcccc, strokeColor=#cc0000, fontStyle=1
・保留決定: fillColor=#ccccff, strokeColor=#0000cc

【ADoc文書】
{ADoc文書}

意思決定支援に適したDraw.io XML形式で出力してください。

リスク評価フロープロンプト

以下のADoc文書から、リスク評価・管理用の意思決定フローを生成してください。

【リスク評価特化要件】
・リスクレベルを色の濃淡で表現
・確率と影響度の両軸で評価
・対策の優先順位を明示
・エスカレーション経路を明確化

【リスクレベル色分け】
・高リスク: fillColor=#ff3333, strokeColor=#cc0000, fontColor=#ffffff
・中リスク: fillColor=#ffcc00, strokeColor=#cc9900
・低リスク: fillColor=#ccffcc, strokeColor=#00cc00
・許容範囲: fillColor=#f0f0f0, strokeColor=#999999

【評価軸の表現】
・確率レベル（高/中/低）をサイズで表現
・影響度レベル（大/中/小）を枠線太さで表現
・緊急度を点滅エフェクトで表現（strokeStyle=dashed）

【対策プロセス】
・即座対応: fillColor=#ff6666, strokeWidth=4
・計画対応: fillColor=#ffaa66, strokeWidth=2
・監視継続: fillColor=#66aaff, strokeWidth=1

【ADoc文書】
{ADoc文書}

リスク管理に適したDraw.io XML形式で出力してください。

承認ワークフロープロンプト

以下のADoc文書から、承認・申請ワークフロー図を生成してください。

【承認フロー特化要件】
・承認者の役職・権限レベルを明示
・承認期限・所要時間を表示
・承認ルートの複数パターンに対応
・差し戻し・再申請フローを含める

【承認者レベル表現】
・一般承認者: fillColor=#e6f2ff, strokeColor=#4d94ff
・管理職承認: fillColor=#ffe6f2, strokeColor=#ff4d94
・役員承認: fillColor=#fff2e6, strokeColor=#ff944d
・最終承認者: fillColor=#f2ffe6, strokeColor=#94ff4d, strokeWidth=3

【承認状態の表現】
・承認済み: ✓マーク, fontColor=#00cc00
・否認: ✗マーク, fontColor=#cc0000
・保留中: ?マーク, fontColor=#cc6600
・期限切れ: ⚠マーク, fontColor=#ff0000

【フロー制御】
・通常ルート: 実線
・緊急ルート: strokeWidth=3, strokeColor=#ff0000
・差し戻し: strokeStyle=dashed, strokeColor=#cc6600

【ADoc文書】
{ADoc文書}

承認管理に適したDraw.io XML形式で出力してください。

システム構成図プロンプト

ITシステム構成図プロンプト

以下のADoc文書から、ITシステム構成図を生成してください。

【システム構成特化要件】
・システム階層（プレゼンテーション層/ビジネス層/データ層）を明示
・サーバー・データベース・ネットワーク機器を適切に表現
・データフロー・通信プロトコルを明記
・セキュリティ境界・ファイアウォールを表現

【システム要素の形状・色分け】
・Webサーバー: shape=cylinder, fillColor=#e6f3ff, strokeColor=#0080ff
・アプリサーバー: shape=cube, fillColor=#ffe6cc, strokeColor=#ff8000
・データベース: shape=cylinder, fillColor=#e6ffe6, strokeColor=#00cc00
・ファイアウォール: shape=trapezoid, fillColor=#ffcccc, strokeColor=#cc0000
・ロードバランサー: shape=diamond, fillColor=#f0e6ff, strokeColor=#8000ff
・ユーザー端末: shape=rectangle, fillColor=#f0f0f0, strokeColor=#808080

【ネットワーク表現】
・インターネット: 雲形状, fillColor=#e6e6ff
・内部ネットワーク: 実線接続
・外部ネットワーク: 破線接続
・セキュアな通信: 太線 + 暗号化記号

【技術スペック表示】
・IPアドレス・ポート番号
・プロトコル（HTTP/HTTPS/SQL等）
・性能仕様（CPU/メモリ/ストレージ）

【ADoc文書】
{ADoc文書}

システム設計に適したDraw.io XML形式で出力してください。

インフラ構成図プロンプト

以下のADoc文書から、インフラストラクチャ構成図を生成してください。

【インフラ特化要件】
・物理・仮想環境の区別を明示
・ラック・データセンター配置を表現
・冗長化・高可用性構成を強調
・監視・運用系統を別色で表現

【インフラ要素表現】
・物理サーバー: 厚い枠線, fillColor=#ffe6cc, strokeWidth=3
・仮想マシン: 薄い枠線, fillColor=#e6f3ff, strokeWidth=1
・ストレージ: shape=hexagon, fillColor=#f0ffe6, strokeColor=#80cc00
・ネットワーク機器: shape=triangle, fillColor=#ffe6f0, strokeColor=#cc0080
・監視システム: shape=ellipse, fillColor=#fff0e6, strokeColor=#ff8000

【高可用性表現】
・冗長化接続: 二重線
・フェイルオーバー: 破線 + 矢印
・ロードバランシング: 扇状分岐
・バックアップ: 点線 + Backup表記

【運用レイヤー】
・本番環境: fillColor濃いめ
・ステージング: fillColor中間
・開発環境: fillColor薄め
・運用監視: 別色系統で統一

【ADoc文書】
{ADoc文書}

インフラ管理に適したDraw.io XML形式で出力してください。

マイクロサービス構成図プロンプト

以下のADoc文書から、マイクロサービス アーキテクチャ構成図を生成してください。

【マイクロサービス特化要件】
・サービス境界を明確に区分
・API通信・メッセージングを詳細表現
・コンテナ・オーケストレーション層を表現
・サービスメッシュ・監視を可視化

【サービス表現】
・マイクロサービス: rounded=1, fillColor=#e6f7ff, strokeColor=#1890ff
・API Gateway: shape=hexagon, fillColor=#fff7e6, strokeColor=#fa8c16
・メッセージキュー: shape=parallelogram, fillColor=#f6ffed, strokeColor=#52c41a
・データベース: shape=cylinder, fillColor=#f9f0ff, strokeColor=#722ed1
・外部サービス: strokeStyle=dashed, fillColor=#fff2e8, strokeColor=#fa541c

【通信プロトコル表現】
・HTTP/REST: 実線, ラベル「HTTP」
・gRPC: 太線, ラベル「gRPC」
・メッセージング: 波線, ラベル「MQ」
・ストリーミング: 二重線, ラベル「Stream」

【コンテナ・K8s要素】
・Pod: 薄い枠で囲み
・Service: shape=diamond
・Ingress: shape=trapezoid
・ConfigMap/Secret: shape=note

【ADoc文書】
{ADoc文書}

マイクロサービス設計に適したDraw.io XML形式で出力してください。

組織図・関係図プロンプト

組織階層図プロンプト

以下のADoc文書から、組織階層図を生成してください。

【組織図特化要件】
・階層レベルを縦方向で明確に表現
・役職・部門の重要度をサイズ・色で差別化
・報告ライン・指揮命令系統を明示
・兼任・マトリックス組織を適切に表現

【階層レベル表現】
・経営層: y=50, 大きいサイズ, fillColor=#ff6b6b, fontStyle=1
・部長層: y=200, 中サイズ, fillColor=#4ecdc4
・課長層: y=350, 標準サイズ, fillColor=#45b7d1
・主任層: y=500, 小サイズ, fillColor=#96ceb4
・一般層: y=650, 最小サイズ, fillColor=#ffeaa7

【関係線の表現】
・直接報告: 実線, strokeWidth=2
・間接報告: 破線, strokeWidth=1
・兼任関係: 点線, strokeColor=#ff7675
・プロジェクト関係: 波線, strokeColor=#6c5ce7

【役職・権限表示】
・役職名を太字で表示
・担当領域を小さく併記
・人数規模を括弧内で表示

【ADoc文書】
{ADoc文書}

組織管理に適したDraw.io XML形式で出力してください。

ステークホルダー関係図プロンプト

以下のADoc文書から、ステークホルダー関係図を生成してください。

【ステークホルダー特化要件】
・影響力と利害関係の強さを視覚化
・内部・外部ステークホルダーを区別
・関係性の種類（協力・対立・中立）を色分け
・コミュニケーション頻度を線の太さで表現

【ステークホルダー分類】
・主要ステークホルダー: 大きいサイズ, strokeWidth=3
・重要ステークホルダー: 中サイズ, strokeWidth=2
・一般ステークホルダー: 小サイズ, strokeWidth=1
・中央プロジェクト: 特大サイズ, 中央配置

【関係性の色分け】
・強い協力関係: strokeColor=#00cc00, strokeWidth=4
・協力関係: strokeColor=#66cc66, strokeWidth=2
・中立関係: strokeColor=#cccccc, strokeWidth=1
・対立関係: strokeColor=#cc6666, strokeWidth=2
・強い対立: strokeColor=#cc0000, strokeWidth=4

【影響力レベル】
・High: shape=star, fillColor=#ffcc00
・Medium: shape=ellipse, fillColor=#ccffcc
・Low: shape=rectangle, fillColor=#ccccff

【ADoc文書】
{ADoc文書}

関係性管理に適したDraw.io XML形式で出力してください。

データフロー関係図プロンプト

以下のADoc文書から、データフロー関係図を生成してください。

【データフロー特化要件】
・データの流れ方向を明確に表現
・データ変換・加工処理を強調
・データストア・データソースを区別
・リアルタイム・バッチ処理の区分

【データ要素表現】
・データソース: shape=ellipse, fillColor=#e6f7ff, strokeColor=#1890ff
・データストア: shape=cylinder, fillColor=#f6ffed, strokeColor=#52c41a
・データ変換: shape=rectangle, fillColor=#fff7e6, strokeColor=#fa8c16
・データ出力: shape=parallelogram, fillColor=#f9f0ff, strokeColor=#722ed1

【フロータイプ別表現】
・リアルタイムフロー: 実線, strokeWidth=3, strokeColor=#ff4d4f
・バッチフロー: 破線, strokeWidth=2, strokeColor=#1890ff
・手動フロー: 点線, strokeWidth=1, strokeColor=#8c8c8c
・API通信: 二重線, strokeColor=#52c41a

【データ属性表示】
・データ量（KB/MB/GB）
・更新頻度（リアルタイム/日次/週次）
・データ形式（JSON/XML/CSV）
・セキュリティレベル

【ADoc文書】
{ADoc文書}

データ管理に適したDraw.io XML形式で出力してください。

複合図表プロンプト

業務システム全体図プロンプト

以下のADoc文書から、業務システム全体を俯瞰する複合図表を生成してください。

【複合図表要件】
・業務フロー + システム構成 + 組織関係を統合表現
・レイヤー別（業務層/システム層/インフラ層）の明確な区分
・時系列フロー + 空間的配置の両軸での表現
・複数視点からの情報を統合的に可視化

【レイヤー構成】
・業務レイヤー: y=50-250, fillColor系統=#e6f7ff
・システムレイヤー: y=300-500, fillColor系統=#fff7e6
・インフラレイヤー: y=550-750, fillColor系統=#f6ffed

【統合要素表現】
・業務プロセス: 標準フロー形状
・システム機能: 四角形 + システムアイコン
・データフロー: 特殊矢印 + データ量表示
・組織責任: 色分け + 担当者名表示

【相互関係線】
・業務-システム連携: 縦方向実線
・システム間連携: 横方向実線
・データ連携: 波線
・承認・報告ライン: 破線

【ADoc文書】
{ADoc文書}

統合管理に適したDraw.io XML形式で出力してください。

タイムライン + フロー複合図プロンプト

以下のADoc文書から、時系列とプロセスフローを統合した複合図表を生成してください。

【時系列統合要件】
・横軸に時間軸、縦軸にプロセス階層を設定
・フェーズ・マイルストーンを明確に区分
・並行処理・依存関係を適切に表現
・クリティカルパスを強調表示

【時間軸設定】
・フェーズ区切り: 縦破線, strokeColor=#cccccc
・マイルストーン: shape=diamond, fillColor=#ffcc00
・期限・締切: shape=triangle, fillColor=#ff6666
・現在位置: 太い縦線, strokeColor=#00cc00

【プロセス階層】
・戦略レベル: y=50-150, 大きい要素
・戦術レベル: y=200-400, 中サイズ要素
・運用レベル: y=450-650, 小さい要素

【時系列フロー表現】
・順次プロセス: 右向き矢印
・並行プロセス: 複数矢印
・待機時間: 点線区間
・クリティカルパス: strokeWidth=4, strokeColor=#ff0000

【ADoc文書】
{ADoc文書}

プロジェクト管理に適したDraw.io XML形式で出力してください。

多次元分析図プロンプト

以下のADoc文書から、複数の分析軸を統合した多次元分析図を生成してください。

【多次元分析要件】
・優先度×複雑度×影響度の3軸分析
・要素サイズ・色・位置で多次元情報を表現
・クラスタリング・グループ化の可視化
・トレンド・変化方向の表示

【次元表現方法】
・X軸: 複雑度（左:低 → 右:高）
・Y軸: 優先度（下:低 → 上:高）
・サイズ: 影響度（小:低 → 大:高）
・色: カテゴリ別分類

【分析エリア区分】
・高優先度×低複雑度: fillColor=#ccffcc（クイックウィン）
・高優先度×高複雑度: fillColor=#ffcccc（重要課題）
・低優先度×低複雑度: fillColor=#f0f0f0（後回し）
・低優先度×高複雑度: fillColor=#ccccff（要検討）

【動的要素】
・改善方向: 矢印で表示
・目標位置: 破線四角で表示
・リスク要因: 赤い枠線で囲み

【ADoc文書】
{ADoc文書}

戦略分析に適したDraw.io XML形式で出力してください。

プロンプト使用ガイド

図表タイプ別適用場面

図表タイプ 適用場面 重要なポイント
プロセスフロー 業務手順書、製造工程、改善活動 時間軸と担当者の明確化
意思決定フロー 承認フロー、リスク判定、評価プロセス 判定基準と結果の明示
システム構成 IT設計書、インフラ構成、サービス設計 技術要素と接続関係
組織・関係図 組織図、ステークホルダー分析 関係性と影響力の表現
複合図表 全体俯瞰、統合分析、戦略検討 複数視点の統合表現

品質向上のためのプロンプト強化

色彩統一強化版（全タイプ共通追加）

【色彩統一追加要件】
・企業カラー適用: メインカラー=#企業色コード
・アクセシビリティ対応: コントラスト比4.5:1以上確保
・グレースケール対応: 白黒印刷でも判別可能
・色覚バリアフリー: 色以外の区別方法併用

レイアウト最適化版（全タイプ共通追加）

【レイアウト最適化追加要件】
・黄金比配置: 要素配置に1:1.618の比率適用
・余白設計: 要素間に十分な余白確保
・視線誘導: 左上から右下への自然な流れ
・重要度階層: サイズと配置で重要度表現

これらの専門的なプロンプトテンプレートにより、様々な業務分野に特化した高品質なDraw.io XMLファイルを生成できるようになります。次章では、これらのプロンプトを実際の業務文書に適用した具体的な実践例について詳しく解説します。

実践的応用例：専門図表の作成

企業内標準プロセス図の作成例

人事採用プロセスの標準化

対象ADoc文書

= 新卒採用プロセス標準手順書

== 概要
新卒採用における標準的な選考プロセスを定義する。

== 選考フロー

=== 事前準備段階
. 採用計画策定
  * 採用予定数の決定
  * 求める人材像の明確化
  * 予算・スケジュール確定
. 求人票作成・公開
  * 内容レビュー（人事部→部門長→役員）
  * 各種媒体への掲載

=== 選考段階
. 書類選考
  * 応募書類受付（期限：募集開始から30日）
  * 一次選考（担当：人事部、期間：7日以内）
  * 結果通知（選考から3日以内）

. 面接選考
  .. 一次面接
     * 実施者：人事部担当者
     * 所要時間：30分
     * 評価項目：基本スキル、コミュニケーション能力
  .. 二次面接
     * 実施者：配属予定部署管理職
     * 所要時間：45分
     * 評価項目：専門性、チーム適応性
  .. 最終面接
     * 実施者：役員
     * 所要時間：30分
     * 評価項目：企業適合性、将来性

. 内定・入社手続き
  * 内定通知（最終面接から1週間以内）
  * 入社意思確認（内定通知から2週間以内）
  * 入社手続き完了

== 例外処理
* 選考辞退：任意のタイミングで受付
* 選考延期：応募者の事情により最大1ヶ月延期可能
* 追加面接：必要に応じて部門長判断で実施

使用プロンプト

「標準プロセスフロープロンプト」を使用し、以下をカスタマイズ：

【人事プロセス特化要件】
・選考段階を色分け（準備/選考/決定）
・期限・所要時間を要素内に明記
・担当者・責任者を括弧内で表示
・例外処理を破線で表現

【色分け】
・事前準備: fillColor=#e6f3ff, strokeColor=#0080ff
・書類選考: fillColor=#ffe6cc, strokeColor=#ff8000
・面接選考: fillColor=#f0ffe6, strokeColor=#80cc00
・内定手続: fillColor=#ffe6f0, strokeColor=#ff0080
・例外処理: fillColor=#ffcccc, strokeColor=#cc0000, strokeStyle=dashed

生成されるXML（抜粋）

<?xml version="1.0" encoding="UTF-8"?>
<mxfile host="app.diagrams.net" modified="2025-08-10T00:00:00.000Z" agent="Mozilla/5.0" version="24.6.4" type="device">
  <diagram name="新卒採用プロセス" id="recruitment_process">
    <mxGraphModel dx="1422" dy="794" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1169" pageHeight="827" math="0" shadow="0">
      <root>
        <mxCell id="0" />
        <mxCell id="1" parent="0" />
        
        <!-- 開始 -->
        <mxCell id="start" value="新卒採用開始" style="ellipse;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;fontSize=12;fontStyle=1;" vertex="1" parent="1">
          <mxGeometry x="250" y="50" width="120" height="60" as="geometry" />
        </mxCell>
        
        <!-- 事前準備段階 -->
        <mxCell id="plan" value="採用計画策定&#xa;（人事部）&#xa;（期間：2週間）" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#e6f3ff;strokeColor=#0080ff;fontSize=11;" vertex="1" parent="1">
          <mxGeometry x="200" y="150" width="140" height="80" as="geometry" />
        </mxCell>
        
        <mxCell id="job_post" value="求人票作成・公開&#xa;（人事部→部門長→役員）&#xa;（期間：1週間）" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#e6f3ff;strokeColor=#0080ff;fontSize=11;" vertex="1" parent="1">
          <mxGeometry x="200" y="270" width="140" height="80" as="geometry" />
        </mxCell>
        
        <!-- 選考段階 -->
        <mxCell id="document_screening" value="書類選考&#xa;（人事部）&#xa;（期限：7日以内）" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#ff8000;fontSize=11;" vertex="1" parent="1">
          <mxGeometry x="200" y="390" width="140" height="80" as="geometry" />
        </mxCell>
        
        <!-- 接続線 -->
        <mxCell id="edge1" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;" edge="1" parent="1" source="start" target="plan">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        
        <mxCell id="edge2" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;" edge="1" parent="1" source="plan" target="job_post">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        
      </root>
    </mxGraphModel>
  </diagram>
</mxfile>

人事採用プロセス図のサンプル

期待される成果

  • 各プロセスの責任者と期限が明確に可視化
  • 色分けにより選考段階が一目で理解可能
  • 例外処理が破線で適切に区別表現
  • 実際の企業で即座に活用可能な実用性

技術仕様書からの図表生成例

Webアプリケーション システム構成図

対象ADoc文書

= ECサイト システム構成設計書

== システム概要
オンラインショッピングサイトのシステム構成を定義する。

== システム構成

=== フロントエンド層
* Webサーバー (Nginx)
  - 役割：静的コンテンツ配信、リバースプロキシ
  - スペック：CPU 2core, Memory 4GB
  - IPアドレス：192.168.1.10
  - ポート：80, 443

* CDN (CloudFlare)
  - 役割：グローバル配信、キャッシュ
  - エンドポイント：https://cdn.example.com

=== アプリケーション層
* アプリサーバー (Node.js)
  - 役割：ビジネスロジック処理
  - スペック：CPU 4core, Memory 8GB
  - IPアドレス：192.168.1.20-22（3台構成）
  - ポート：3000
  - 負荷分散：ロードバランサー使用

* API Gateway
  - 役割：API管理、認証、レート制限
  - スペック：CPU 2core, Memory 4GB
  - IPアドレス：192.168.1.30
  - ポート：8080

=== データ層
* メインDB (PostgreSQL)
  - 役割：商品情報、注文情報、ユーザー情報
  - スペック：CPU 8core, Memory 32GB, SSD 1TB
  - IPアドレス：192.168.1.40（Master）, 192.168.1.41（Slave）
  - ポート：5432
  - レプリケーション：Master-Slave構成

* キャッシュDB (Redis)
  - 役割：セッション管理、キャッシュ
  - スペック：CPU 4core, Memory 16GB
  - IPアドレス：192.168.1.50
  - ポート：6379

* ファイルストレージ (AWS S3)
  - 役割：商品画像、ユーザーファイル保存
  - エンドポイント：https://s3.amazonaws.com/ec-bucket

=== 外部連携
* 決済サービス (Stripe API)
  - 接続方式：HTTPS/REST API
  - エンドポイント：https://api.stripe.com

* 配送API (ヤマト運輸 API)
  - 接続方式：HTTPS/SOAP
  - エンドポイント：https://api.yamato.co.jp

== セキュリティ
* ファイアウォール：192.168.1.1
* SSL証明書：Let's Encrypt
* WAF (Web Application Firewall)：CloudFlare

== 監視・運用
* 監視システム：Prometheus + Grafana
* ログ管理：ELK Stack (Elasticsearch, Logstash, Kibana)
* バックアップ：日次自動バックアップ（保持期間：30日）

使用プロンプト

「ITシステム構成図プロンプト」を使用し、以下をカスタマイズ：

【ECサイト特化要件】
・レイヤー別配置（フロント/アプリ/データ層）
・IPアドレス・ポート番号を要素内に表示
・Master-Slave構成を色分けで表現
・外部API連携を破線で表現
・セキュリティ要素を専用色で強調

【技術仕様表示】
・サーバースペック（CPU/Memory）を小さく併記
・プロトコル情報を接続線ラベルに表示
・負荷分散・冗長化を視覚的に表現

生成されるXML（主要部分）

<?xml version="1.0" encoding="UTF-8"?>
<mxfile host="app.diagrams.net" modified="2025-08-10T00:00:00.000Z" agent="Mozilla/5.0" version="24.6.4" type="device">
  <diagram name="ECサイト システム構成" id="ec_system">
    <mxGraphModel dx="1422" dy="794" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1400" pageHeight="1000" math="0" shadow="0">
      <root>
        <mxCell id="0" />
        <mxCell id="1" parent="0" />
        
        <!-- フロントエンド層 -->
        <mxCell id="cdn" value="CDN&#xa;(CloudFlare)&#xa;https://cdn.example.com" style="ellipse;whiteSpace=wrap;html=1;fillColor=#e6e6ff;strokeColor=#4d4dff;fontSize=10;" vertex="1" parent="1">
          <mxGeometry x="100" y="50" width="140" height="80" as="geometry" />
        </mxCell>
        
        <mxCell id="nginx" value="Webサーバー (Nginx)&#xa;192.168.1.10&#xa;CPU:2core, Mem:4GB&#xa;Port: 80,443" style="shape=cube;whiteSpace=wrap;html=1;fillColor=#e6f3ff;strokeColor=#0080ff;fontSize=9;" vertex="1" parent="1">
          <mxGeometry x="300" y="50" width="160" height="100" as="geometry" />
        </mxCell>
        
        <!-- アプリケーション層 -->
        <mxCell id="loadbalancer" value="ロードバランサー&#xa;負荷分散" style="rhombus;whiteSpace=wrap;html=1;fillColor=#f0e6ff;strokeColor=#8000ff;fontSize=10;" vertex="1" parent="1">
          <mxGeometry x="350" y="200" width="120" height="80" as="geometry" />
        </mxCell>
        
        <mxCell id="app1" value="Node.js #1&#xa;192.168.1.20&#xa;CPU:4core, Mem:8GB&#xa;Port: 3000" style="shape=cube;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#ff8000;fontSize=9;" vertex="1" parent="1">
          <mxGeometry x="200" y="320" width="140" height="80" as="geometry" />
        </mxCell>
        
        <!-- データ層 -->
        <mxCell id="postgres_master" value="PostgreSQL Master&#xa;192.168.1.40&#xa;CPU:8core, Mem:32GB&#xa;SSD:1TB, Port:5432" style="shape=cylinder;whiteSpace=wrap;html=1;fillColor=#e6ffe6;strokeColor=#00cc00;fontSize=9;" vertex="1" parent="1">
          <mxGeometry x="200" y="490" width="150" height="100" as="geometry" />
        </mxCell>
        
        <!-- 接続線 -->
        <mxCell id="edge1" value="HTTPS" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#0080ff;" edge="1" parent="1" source="cdn" target="nginx">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        
      </root>
    </mxGraphModel>
  </diagram>
</mxfile>

ECサイトシステム構成図のサンプル

期待される成果

  • 実際のIPアドレス・ポート番号・スペック情報を含む実用的構成図
  • レイヤー別の色分けによる構造の明確化
  • Master-Slave、負荷分散などの冗長化構成を適切に表現
  • 外部API連携を破線で区別し、プロトコル情報も明記

複雑な業務フローの可視化例

システム障害対応フロー

対象ADoc文書

= システム障害対応手順書

== 概要
本番システムで障害が発生した際の対応手順を定義する。

== 障害レベル定義
* レベル1（軽微）：一部機能の制限、ユーザー影響軽微
* レベル2（重要）：主要機能停止、多数ユーザー影響
* レベル3（緊急）：システム全停止、全ユーザー影響

== 障害対応フロー

=== 初期対応（発生から15分以内）
. 障害検知
  * 監視アラート自動検知
  * ユーザーからの連絡
  * 定期チェックでの発見

. 初期判定
  * 障害レベルの判定
  * 影響範囲の確認
  * 緊急度の評価

. 初期エスカレーション
  .. レベル1の場合
     * 担当エンジニアが対応
     * リーダーに状況報告
     
  .. レベル2の場合
     * チームリーダーが指揮
     * 関係部署に連絡
     * 暫定対応の検討
     
  .. レベル3の場合
     * インシデント指揮官招集
     * 経営陣への即座報告
     * 緊急対策本部設置

=== 対応フェーズ（15分～復旧まで）

==== 詳細調査・対応
. 根本原因調査
  * ログ解析
  * システム状態確認
  * 外部要因調査（ネットワーク、電源等）

. 対応策決定
  * 暫定対応（サービス継続優先）
  * 恒久対応（根本解決）
  * 回避策（代替手段）

. 対応実行
  * 作業担当者アサイン
  * 作業手順の確認
  * 影響範囲の再確認
  * バックアップ取得

==== 復旧作業
. システム復旧
  * 段階的復旧
  * 動作確認
  * 性能確認

. サービス復旧
  * ユーザー通知
  * 機能確認
  * 負荷テスト

=== 事後対応
. 報告書作成
  * 発生原因
  * 対応経過
  * 影響範囲
  * 再発防止策

. 改善実施
  * システム改修
  * 監視強化
  * 手順見直し

== 並行タスク
* ユーザー向け情報発信
  - Webサイトでの障害告知
  - SNSでの情報発信
  - 顧客問い合わせ対応

* ステークホルダー連絡
  - 経営陣への報告
  - 関係部署への連絡
  - 外部パートナーへの通知

== 特殊ケース
* 営業時間外発生
  - オンコール担当者による初期対応
  - 必要に応じて緊急招集

* 複合障害
  - 複数システム同時障害
  - 外部サービス連携障害

* セキュリティインシデント
  - 情報漏洩可能性
  - 不正アクセス検知

使用プロンプト

「複合図表プロンプト」と「意思決定フロープロンプト」を組み合わせて使用：

【障害対応特化要件】
・障害レベル別の色分け（緑/黄/赤）
・時間軸を意識した配置（縦軸：時間経過）
・並行タスクを横方向に配置
・エスカレーション経路を明確化
・緊急度を枠線太さで表現

【レベル別色分け】
・レベル1: fillColor=#e6ffe6, strokeColor=#00cc00
・レベル2: fillColor=#ffffcc, strokeColor=#cccc00
・レベル3: fillColor=#ffcccc, strokeColor=#cc0000, strokeWidth=3

【タスクタイプ別配置】
・メインフロー: x=200-400（中央）
・並行タスク: x=500-700（右側）
・エスカレーション: x=50-150（左側）

期待される成果構成

フェーズ1: 初期対応（y=50-300）
├─ 障害検知 → 初期判定 → レベル別分岐
├─ 並行：ユーザー通知、ステークホルダー連絡
└─ エスカレーション：レベル別指揮官

フェーズ2: 対応実行（y=350-600）
├─ 詳細調査 → 対応策決定 → 復旧作業
├─ 並行：継続的情報発信
└─ 特殊ケース分岐

フェーズ3: 事後対応（y=650-800）
├─ 報告書作成 → 改善実施
└─ 完了

生成される障害対応フローXML（重要部分）

<?xml version="1.0" encoding="UTF-8"?>
<mxfile host="app.diagrams.net" modified="2025-08-10T00:00:00.000Z" agent="Mozilla/5.0" version="24.6.4" type="device">
  <diagram name="システム障害対応フロー" id="incident_response_flow">
    <mxGraphModel dx="1422" dy="1200" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1400" pageHeight="1200" math="0" shadow="0">
      <root>
        <mxCell id="0" />
        <mxCell id="1" parent="0" />
        
        <!-- 開始 -->
        <mxCell id="start" value="障害発生" style="ellipse;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;fontSize=12;fontStyle=1;" vertex="1" parent="1">
          <mxGeometry x="290" y="30" width="120" height="60" as="geometry" />
        </mxCell>
        
        <!-- フェーズ1: 初期対応（15分以内） -->
        <mxCell id="phase1_label" value="【初期対応フェーズ】&#xa;発生から15分以内" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f0f0f0;strokeColor=#666666;fontSize=10;fontStyle=1;align=left;" vertex="1" parent="1">
          <mxGeometry x="50" y="120" width="140" height="50" as="geometry" />
        </mxCell>
        
        <mxCell id="detection" value="障害検知&#xa;• 監視アラート&#xa;• ユーザー連絡&#xa;• 定期チェック" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontSize=10;align=left;verticalAlign=top;" vertex="1" parent="1">
          <mxGeometry x="290" y="130" width="120" height="80" as="geometry" />
        </mxCell>
        
        <mxCell id="initial_assessment" value="初期判定&#xa;• 障害レベル判定&#xa;• 影響範囲確認&#xa;• 緊急度評価" style="rhombus;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;fontSize=10;align=left;verticalAlign=top;" vertex="1" parent="1">
          <mxGeometry x="270" y="250" width="160" height="100" as="geometry" />
        </mxCell>
        
        <!-- レベル別エスカレーション -->
        <mxCell id="level1_response" value="レベル1対応&#xa;（軽微）&#xa;• 担当エンジニア対応&#xa;• リーダー報告" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#e6ffe6;strokeColor=#00cc00;fontSize=9;align=left;verticalAlign=top;" vertex="1" parent="1">
          <mxGeometry x="80" y="380" width="140" height="80" as="geometry" />
        </mxCell>
        
        <mxCell id="level2_response" value="レベル2対応&#xa;（重要）&#xa;• チームリーダー指揮&#xa;• 関係部署連絡&#xa;• 暫定対応検討" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#ffffcc;strokeColor=#cccc00;fontSize=9;align=left;verticalAlign=top;" vertex="1" parent="1">
          <mxGeometry x="280" y="380" width="140" height="80" as="geometry" />
        </mxCell>
        
        <mxCell id="level3_response" value="レベル3対応&#xa;（緊急）&#xa;• インシデント指揮官招集&#xa;• 経営陣即座報告&#xa;• 緊急対策本部設置" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#ffcccc;strokeColor=#cc0000;strokeWidth=3;fontSize=9;align=left;verticalAlign=top;" vertex="1" parent="1">
          <mxGeometry x="480" y="380" width="140" height="80" as="geometry" />
        </mxCell>
        
        <!-- 並行タスク（右側） -->
        <mxCell id="user_notification" value="ユーザー向け情報発信&#xa;• Webサイト障害告知&#xa;• SNS情報発信&#xa;• 問い合わせ対応" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#e1d5e7;strokeColor=#9673a6;fontSize=9;align=left;verticalAlign=top;" vertex="1" parent="1">
          <mxGeometry x="700" y="200" width="150" height="80" as="geometry" />
        </mxCell>
        
        <!-- 接続線 -->
        <mxCell id="edge1" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;" edge="1" parent="1" source="start" target="detection">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        
        <mxCell id="edge2" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;" edge="1" parent="1" source="detection" target="initial_assessment">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        
        <mxCell id="edge3" value="レベル1" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;fontColor=#00cc00;fontSize=9;" edge="1" parent="1" source="initial_assessment" target="level1_response">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        
        <mxCell id="edge4" value="レベル2" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;fontColor=#cccc00;fontSize=9;" edge="1" parent="1" source="initial_assessment" target="level2_response">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        
        <mxCell id="edge5" value="レベル3" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;fontColor=#cc0000;fontSize=9;fontStyle=1;" edge="1" parent="1" source="initial_assessment" target="level3_response">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        
        <!-- 並行タスクへの接続線 -->
        <mxCell id="edge_parallel1" value="並行実行" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#9673a6;strokeStyle=dashed;fontSize=9;" edge="1" parent="1" source="detection" target="user_notification">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        
      </root>
    </mxGraphModel>
  </diagram>
</mxfile>

システム障害対応フロー図のサンプル

期待される成果

  • 時間軸に沿った段階的対応フローの可視化
  • 障害レベル別の対応ルートを色分けで明確化
  • 並行して実行されるタスクを空間的に分離表現
  • 複雑な業務フローを理解しやすい形で整理

大規模システム構成図の実例

マイクロサービス アーキテクチャ全体構成

対象ADoc文書

= eコマース マイクロサービス アーキテクチャ設計書

== アーキテクチャ概要
マイクロサービス アーキテクチャによるeコマースプラットフォームの設計

== サービス構成

=== フロントエンド
* Web Frontend (React SPA)
  - ポート：3000
  - 責任：ユーザーインターフェース
  - 技術：React 18, TypeScript

* Mobile App (React Native)
  - プラットフォーム：iOS, Android
  - 責任：モバイルユーザーエクスペリエンス

=== API Gateway層
* API Gateway (Kong)
  - ポート：8000, 8443
  - 責任：ルーティング、認証、レート制限
  - プラグイン：JWT, Rate Limiting, CORS

* Service Mesh (Istio)
  - 責任：サービス間通信、トラフィック管理
  - 機能：Circuit Breaker, Retry, Timeout

=== ビジネスサービス
* User Service
  - ポート：8001
  - データベース：PostgreSQL (users_db)
  - 責任：ユーザー管理、認証、プロファイル
  - API：REST, gRPC

* Product Service
  - ポート：8002
  - データベース：MongoDB (products_db)
  - 責任：商品カタログ、在庫管理
  - API：REST, GraphQL

* Order Service
  - ポート：8003
  - データベース：PostgreSQL (orders_db)
  - 責任：注文処理、注文履歴
  - API：REST, Events

* Payment Service
  - ポート：8004
  - データベース：PostgreSQL (payments_db)
  - 責任：決済処理、請求管理
  - 外部連携：Stripe, PayPal

* Notification Service
  - ポート：8005
  - データベース：Redis (notifications_cache)
  - 責任：通知配信、メール送信
  - 外部連携：SendGrid, Firebase

* Analytics Service
  - ポート：8006
  - データベース：ClickHouse (analytics_db)
  - 責任：行動分析、レポート作成
  - API：REST, WebSocket

=== インフラサービス
* Message Queue (Apache Kafka)
  - ポート：9092
  - 責任：非同期メッセージング
  - トピック：orders, payments, notifications

* Event Store (EventStore)
  - ポート：2113
  - 責任：イベントソーシング
  - 用途：監査ログ、イベント再生

* Service Discovery (Consul)
  - ポート：8500
  - 責任：サービス登録・発見
  - 機能：ヘルスチェック、KV Store

* Configuration Management (Consul KV)
  - 責任：設定管理、機能フラグ

=== データ層
* User Database (PostgreSQL)
  - 用途：ユーザー情報、認証データ
  - レプリケーション：Master-Slave

* Product Database (MongoDB)
  - 用途：商品情報、カテゴリ
  - シャーディング：商品ID基準

* Order Database (PostgreSQL)
  - 用途：注文データ、取引履歴
  - パーティショニング：日付基準

* Cache Layer (Redis Cluster)
  - 用途：セッション、キャッシュ
  - 構成：3 Master + 3 Slave

* Search Engine (Elasticsearch)
  - 用途：商品検索、ログ分析
  - インデックス：products, logs

=== 監視・運用
* Monitoring (Prometheus + Grafana)
  - メトリクス収集・可視化
  - アラート：Slack, PagerDuty

* Logging (ELK Stack)
  - ログ収集：Logstash
  - 保存：Elasticsearch
  - 可視化：Kibana

* Tracing (Jaeger)
  - 分散トレーシング
  - 性能分析

=== デプロイメント
* Container Platform (Kubernetes)
  - オーケストレーション
  - オートスケーリング
  - ロードバランシング

* CI/CD (GitLab CI)
  - 自動テスト
  - 自動デプロイ
  - カナリアリリース

== セキュリティ
* Authentication：OAuth 2.0 + JWT
* Authorization：RBAC (Role-Based Access Control)
* Network Security：TLS 1.3, VPN
* Data Encryption：AES-256

使用プロンプト

「マイクロサービス構成図プロンプト」を使用し、大規模対応として以下を強化：

【大規模対応要件】
・サービス数が多いため横幅を1600pxに拡張
・レイヤー別の明確な縦配置（y座標でレイヤー分離）
・サービス間通信の可視化（REST/gRPC/Events）
・データベース種別の形状・色分け
・外部サービス連携の破線表現

【レイヤー配置】
・Frontend: y=50-150
・API Gateway: y=200-300
・Business Services: y=350-500（横2列配置）
・Infrastructure: y=550-650
・Data Layer: y=700-850
・Monitoring: y=900-1000

生成されるマイクロサービス構成図XML（主要部分）

<?xml version="1.0" encoding="UTF-8"?>
<mxfile host="app.diagrams.net" modified="2025-08-10T00:00:00.000Z" agent="Mozilla/5.0" version="24.6.4" type="device">
  <diagram name="eコマース マイクロサービス アーキテクチャ" id="microservices_ecommerce">
    <mxGraphModel dx="1422" dy="794" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1400" pageHeight="1000" math="0" shadow="0">
      <root>
        <mxCell id="0" />
        <mxCell id="1" parent="0" />
        
        <!-- フロントエンド層 -->
        <mxCell id="web_frontend" value="Web Frontend&#xa;React SPA&#xa;Port: 3000" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#e6f7ff;strokeColor=#1890ff;fontSize=11;" vertex="1" parent="1">
          <mxGeometry x="200" y="50" width="140" height="70" as="geometry" />
        </mxCell>
        
        <mxCell id="mobile_app" value="Mobile App&#xa;React Native&#xa;iOS, Android" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#e6f7ff;strokeColor=#1890ff;fontSize=11;" vertex="1" parent="1">
          <mxGeometry x="380" y="50" width="140" height="70" as="geometry" />
        </mxCell>
        
        <!-- API Gateway層 -->
        <mxCell id="api_gateway" value="API Gateway&#xa;Kong&#xa;Port: 8000" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#fff7e6;strokeColor=#fa8c16;fontSize=11;" vertex="1" parent="1">
          <mxGeometry x="290" y="160" width="140" height="70" as="geometry" />
        </mxCell>
        
        <!-- ビジネスサービス層 -->
        <mxCell id="user_service" value="User Service&#xa;Port: 8001&#xa;Authentication" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f6ffed;strokeColor=#52c41a;fontSize=11;" vertex="1" parent="1">
          <mxGeometry x="100" y="270" width="120" height="70" as="geometry" />
        </mxCell>
        
        <mxCell id="product_service" value="Product Service&#xa;Port: 8002&#xa;Catalog" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f6ffed;strokeColor=#52c41a;fontSize=11;" vertex="1" parent="1">
          <mxGeometry x="240" y="270" width="120" height="70" as="geometry" />
        </mxCell>
        
        <mxCell id="order_service" value="Order Service&#xa;Port: 8003&#xa;Order Processing" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f6ffed;strokeColor=#52c41a;fontSize=11;" vertex="1" parent="1">
          <mxGeometry x="380" y="270" width="120" height="70" as="geometry" />
        </mxCell>
        
        <!-- データ層 -->
        <mxCell id="users_db" value="User Database&#xa;PostgreSQL&#xa;Users Data" style="shape=cylinder;whiteSpace=wrap;html=1;fillColor=#fff2e8;strokeColor=#fa541c;fontSize=11;" vertex="1" parent="1">
          <mxGeometry x="100" y="490" width="120" height="70" as="geometry" />
        </mxCell>
        
        <mxCell id="products_db" value="Product Database&#xa;MongoDB&#xa;Catalog Data" style="shape=cylinder;whiteSpace=wrap;html=1;fillColor=#fff2e8;strokeColor=#fa541c;fontSize=11;" vertex="1" parent="1">
          <mxGeometry x="240" y="490" width="120" height="70" as="geometry" />
        </mxCell>
        
        <mxCell id="orders_db" value="Order Database&#xa;PostgreSQL&#xa;Order Data" style="shape=cylinder;whiteSpace=wrap;html=1;fillColor=#fff2e8;strokeColor=#fa541c;fontSize=11;" vertex="1" parent="1">
          <mxGeometry x="380" y="490" width="120" height="70" as="geometry" />
        </mxCell>
        
        <!-- 外部サービス -->
        <mxCell id="stripe_api" value="Stripe API&#xa;Payment" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#fffbe6;strokeColor=#fadb14;strokeStyle=dashed;fontSize=11;" vertex="1" parent="1">
          <mxGeometry x="850" y="200" width="100" height="60" as="geometry" />
        </mxCell>
        
        <!-- 接続線 -->
        <mxCell id="edge1" value="HTTPS" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#1890ff;" edge="1" parent="1" source="web_frontend" target="api_gateway">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        
        <mxCell id="edge2" value="HTTPS" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#1890ff;" edge="1" parent="1" source="mobile_app" target="api_gateway">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        
        <mxCell id="edge3" value="REST" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#52c41a;" edge="1" parent="1" source="api_gateway" target="user_service">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        
        <mxCell id="edge4" value="SQL" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#fa541c;" edge="1" parent="1" source="user_service" target="users_db">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        
        <mxCell id="edge5" value="NoSQL" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#fa541c;" edge="1" parent="1" source="product_service" target="products_db">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        
      </root>
    </mxGraphModel>
  </diagram>
</mxfile>

マイクロサービス構成図のサンプル

期待される成果

  • 60+要素: サービス、データベース、外部連携等
  • 複数のサービス間通信パターン: REST、gRPC、メッセージキュー
  • レイヤー別色分け: フロントエンド、ビジネス、インフラ、データ
  • 大規模システムの全体俯瞰: 実際の企業システムレベルの複雑性

高度な品質向上テクニック

企業ブランド統一とアクセシビリティ強化

企業カラー適用プロンプト強化版

【企業ブランド統一要件】
・メインカラー：#0066CC（企業ブルー）
・サブカラー：#FF9900（企業オレンジ）
・アクセントカラー：#00CC66（成功）、#CC0000（エラー）
・ニュートラル：#F5F5F5（背景）、#333333（テキスト）

【色彩適用ルール】
・重要プロセス：企業ブルー系統
・サブプロセス：企業オレンジ系統
・成功フロー：アクセント緑
・エラー・例外：アクセント赤
・システム・自動：ニュートラル系

【アクセシビリティ要件】
・最小コントラスト比：4.5:1
・色覚バリアフリー：形状・パターンでの補完
・フォントサイズ：最小10px、推奨11px
・要素間隔：最小20px、推奨30px

品質チェック自動化プロンプト

生成後に以下の品質チェックを実行し、問題があれば修正版を提示してください：

【構造チェック】
・id="0", id="1"の存在確認
・全要素のparent="1"設定確認
・IDの一意性確認
・source/target参照の正当性確認

【スタイルチェック】
・fillColor, strokeColorの設定確認
・whiteSpace=wrap, html=1の設定確認
・フォントサイズの一貫性確認
・色彩統一性の確認

【レイアウトチェック】
・要素重複の回避確認
・適切な間隔の確保確認
・画面内配置の確認
・論理的な配置順序の確認

問題が発見された場合は、修正点を明示して改善版XMLを提供してください。

複雑なADoc文書解析手法

大規模文書の段階的解析プロンプト

Phase 1: 文書構造解析プロンプト

以下の大規模ADoc文書を段階的に解析してください。

【Phase 1: 構造解析】
まず文書全体を分析し、以下の構造を特定してください：
1. 主要セクション（== レベル）の抽出
2. サブセクション（=== レベル）の階層関係
3. リスト構造の分析（番号付き・箇条書き）
4. 特殊ブロック（テーブル・コード等）の識別

【抽出フォーマット】

セクション構造：

  • セクション1: [名前] → サブセクション数: X
  • セクション2: [名前] → サブセクション数: Y

フロー要素候補：

  • 開始要素: [リスト]
  • プロセス要素: [リスト]
  • 判定要素: [リスト]
  • 終了要素: [リスト]

次のPhase 2で詳細解析を実行するため、ここでは構造把握のみを実行してください。

【大規模ADoc文書】
{大規模文書をここに貼り付け}

Phase 2: 要素抽出・関係性分析プロンプト

Phase 1の構造解析結果を踏まえ、詳細な要素抽出を実行してください。

【Phase 2: 詳細抽出】
1. フロー要素の詳細特定
   - 各要素の種類（楕円/矩形/菱形）
   - 要素間の接続関係
   - 分岐条件の抽出

2. 複雑構造の分解
   - 入れ子リストの階層化
   - 条件分岐の論理構造
   - 並行処理の特定

3. 例外・特殊ケースの抽出
   - エラーハンドリング
   - 代替フロー
   - 特殊条件処理

【Phase 1の結果】
{Phase 1で得られた構造解析結果}

【期待アウトプット】
フロー要素詳細リスト、接続関係マップ、配置方針を含む設計仕様

Phase 3: 最終XML生成プロンプト

Phase 1, 2の解析結果を基に、最終的なDraw.io XMLを生成してください。

【Phase 3: XML生成】
以下の解析結果を活用し、高品質なXMLを生成：

【Phase 1結果】
{構造解析結果}

【Phase 2結果】
{詳細抽出結果}

【品質要件】
・全ての必須構造要件の遵守
・適切なスタイル定義の適用
・論理的で理解しやすいレイアウト
・複雑さを軽減する効果的な配置

完全なDraw.io XML形式で出力してください。

チームでの運用事例

組織レベルでの標準化例

チーム標準プロンプトテンプレート

【組織名】株式会社○○○ 標準Draw.io生成プロンプト v2.1

【必須組織要件】
・企業カラー：メインブルー #003366, サブオレンジ #FF6600
・ロゴ配置：右上角に企業ロゴエリア確保
・文書管理番号：左下に文書ID表示エリア
・承認印エリア：右下に承認者印欄
・フォント統一：全要素 fontSize=11

【品質基準】
・レベル1（内部用）：基本構造遵守のみ
・レベル2（部門共有）：スタイル統一+レイアウト最適化
・レベル3（対外提示）：企業ブランド+アクセシビリティ完全対応

【使用時の注意】
・機密情報の取り扱い：機密レベルに応じた色分け
・バージョン管理：更新時は必ずバージョン番号を更新
・承認フロー：レベル2以上は部門長承認必須

【組織内テンプレート参照】
・基本業務フロー：template_business_v2.xml
・システム構成図：template_system_v2.xml
・組織図：template_org_v2.xml

【ADoc文書】
{文書内容}

上記組織標準に準拠したDraw.io XMLを生成してください。

チーム運用での成功ポイント

  • 標準化による効率向上: 80%の作業時間短縮を実現
  • 品質の安定化: レビュー指摘件数を70%削減
  • スキル底上げ: 新人でも3日で実用レベルに到達
  • 組織資産化: 再利用可能なテンプレートライブラリ構築

これらの実践例により、第1部で学んだ理論知識と第2部のプロンプトテンプレートが、実際の業務でどのように活用され、どのような成果を生み出すかを具体的に示すことができました。

Discussion