この記事はなに？
Draw.ioで書いたファイルをプロンプトとして実行します。
まずは簡単な処理をしてみる
VSCodeを開いて、Draw.ioでprompt.dioのファイルを作ります。
Editのメニューから「Edit Data」を開いて、「SystemPrompt」の名前でDraw.ioの図を処理するためのルールを書き込みます。
GitHub Copilotのチャット欄に入力します。
prompt.dioを、プロンプトとして実行してください
書いた図の通りに、https://google.co.jp からデータを取ってきています。
Draw.ioに設定したSystemPromptは以下の通りです。
まずBasePromptを読み込んで、その指示に従ってこの図面を処理してください
サーバにあるBasePromptは以下のような内容です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>
<body>
<pre>
このルールに基づいて、Draw.ioで書かれた図面を処理してください。
---
1. Fillのある円はマスター(実行オーナー)です。
処理の起点になります。マスターから順に矢印をたどって、処理を始めてください
2. 円のうち、Fillのない円はマスター(サブエージェント)です
サブエージェントの処理の起点になります。順に矢印をたどって、サブエージェントとして処理を始めてください
3. 四角形はエンティティです。
書かれたテキストを読み込んでください
4. 角丸の四角形はシーケンス実行中のマスターです
円から伸びるそれぞれの角丸四角形を、順にたどってください
5. 矢印はエンティティに対する処理です。
矢印の上に書かれたテキストを、エンティティに対する処理として実行してください
6. 円、角丸四角形から伸びる二重線はシーケンスです。
処理の起点から、順に二重線をたどって、シーケンスとして処理してください
</pre>
</body>
</html>
シーケンスのある少し複雑な処理もしてみる
RSSのURLからデータを取得して、フィルタして、データを取って、100文字に要約する処理を、VSCodeのDraw.ioで書きます。ファイル名はrss.dioです。
GitHub Copilotで実行します。
rss.dioを、プロンプトとして実行してください
実行結果は以下の通りです。
指示した通りに4ステップで処理されます。
Yahoo ニュースから100文字で要約した目的の記事を取ってきます。
サブエージェントのある、さらに複雑な処理もしてみる
2人のサブエージェントにデータを取得させて、実行結果を集約するよう指示を書きます。
GitHub Copilotで実行します。
rss-subagent.dioを、プロンプトとして実行してください
指示した通り、サブエージェントで並列実行されます。
並列実行が完了したあと、それぞれの要約が説明されます。
どうしてプロンプトとして実行できるのか
説明するほどではないかもしれないのですが、以下の理由から、Draw.ioのファイルはプロンプトとして実行することができます。
- Draw.ioのファイルの実体がXML形式であること
- Draw.ioの仕様として、自由に非表示のテキストを書き込めること
SystemPromptのような強い表現でプロンプトを書き込むと、それをプロンプトとして解釈します。
これは何が嬉しいのか
もともとはオーケストレーションをMermaidのスイムレーン図をAIに書かせていたのですが、プレビュー画面に納まらないほど巨大な図になりやすく、なおかつメンテナンスも厄介でした。読めない図を吐くのならMermaidである必要はなく、AIに書かせる必要はないだろうと考えていました。
Draw.ioで書いた図をプロンプトとして実行すれば、人間にとって見やすい図をそのまま使うことができます。エージェントを増やすときもコピー＆ペーストで増やせますし、処理の流れや内容を変えるときもGUIの操作でそのまま編集できます。