この記事はなに？

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の操作でそのまま編集できます。