Mermaid エージェントフロー図のチートシート

エージェントのステップと、それぞれが何のステップか。

このページのすべての図は

Mernyx（macOS 向けネイティブ Mermaid エディタ）が描いたものです。ブラウザで動く Mermaid.js ではなく、App のキャンバスで使うのと同じレンダラーです。

フローブロック

フローは中のステップを所有するブロックです。end キーワードが閉じます。

agentflow-beta TB
  flow worker["Worker"]
    job["Do the job"]@{ shape: task }
  end

エージェントフロー図。Worker というグループの中に Do the job というステップが 1 つあります。

ステップの種類

shape: のあとの語がそのステップの種類を表します。input、task、tool、decision、action、refdoc の 6 種類です。

agentflow-beta LR
  brief["Brief"]@{ shape: input }
  draft["Draft copy"]@{ shape: task }
  check["spell_check"]@{ shape: tool }
  guide["Style guide"]@{ shape: refdoc }
  ship["Publish"]@{ shape: action }
  ok["Ready?"]@{ shape: decision }
  brief --> draft --> check --> ship
  ok --> ship

左から右へ並ぶ 6 ステップのエージェントフロー図。Brief、Draft copy、spell_check、Style guide、Publish、Ready? です。

矢印の形

ラベルつきの矢印は理由を表します。× は再試行、点線は読みに行く対象を指します。

agentflow-beta TB
  check["Tests pass?"]@{ shape: decision }
  ship["Ship it"]@{ shape: action }
  fix["Fix the build"]@{ shape: task }
  logs["Build logs"]@{ shape: refdoc }
  check -- yes --> ship
  check -- no --> fix
  fix --x check
  fix -.- logs

テストが通ったかを問う判断が、Yes で Ship it へ、No で Fix the build へ分岐します。Fix the build からビルドログの箱へ点線が伸びています。

フローの入れ子

フローの中に別のフローを置けます。中にあるものはサブエージェントです。

agentflow-beta TB
  flow team["Content Team"]
    flow researcher["Researcher"]
      gather["Gather sources"]@{ shape: task }
    end
    flow writer["Writer"]
      compose["Compose draft"]@{ shape: task }
    end
    researcher --> writer
  end

Content Team というフローの中に Researcher と Writer の 2 つのフローがあり、矢印で結ばれていて、それぞれにステップが 1 つ入っています。

Mermaid エージェントフロー図のチートシート

フローブロック

ステップの種類

矢印の形

フローの入れ子

Mernyx で描いてみる