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

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

## フローブロック

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

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

![エージェントフロー図。Worker というグループの中に Do the job というステップが 1 つあります。](/diagrams/agentflow/flow.svg)

## ステップの種類

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

```mermaid
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? です。](/diagrams/agentflow/shapes.svg)

## 矢印の形

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

```mermaid
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 からビルドログの箱へ点線が伸びています。](/diagrams/agentflow/arrows.svg)

## フローの入れ子

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

```mermaid
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 つ入っています。](/diagrams/agentflow/nested.svg)

## Mernyx で描いてみる

.mmd ファイルを開いて、キャンバスでノードを動かしてみてください。ソースコードもついてきます。macOS ネイティブで、ブラウザは介在しません。