Scene / Flow diagrams

Scene と Flow は、Fragment の中で「図」をテキストとして書くための簡単な記法です。図形や矢印をコード風に書くと、Fragment が図としてレンダリングし、人も AI も同じ構造を読めるようになります。

Why write diagrams as text?

図は便利ですが、一般的なツールだと「ドラッグ＆ドロップ」「レイアウト調整」に時間がかかります。 Scene / Flow では、構造だけをテキストで書き、見た目の整形は Fragment に任せる設計にしています。

・バージョン管理しやすい（Git / 履歴）
・AI に「この図をたどって説明して」とお願いできる
・コピー＆ペーストで別の Fragment に再利用できる

Scene — a moment or layout

Scene は「場面」や「レイアウト」を表す図です。ボックスやテキスト、矢印の位置をざっくり書き、全体の関係性を掴むのに向いています。

Example: a simple Scene block

scene:
  canvas:
    width: 720
    height: 260
  shapes:
    - type: rect
      id: fragment
      x: 80
      y: 96
      w: 160
      h: 64
      label: "Fragment"
    - type: rect
      id: prism
      x: 320
      y: 96
      w: 180
      h: 64
      label: "Prism (YAML)"
    - type: arrow
      from: fragment
      to: prism
      label: "settings"

実際の描画は Fragment 側が行います。ここでは「どんなオブジェクトがどう繋がっているか」だけを書きます。

Flow — a process or logic

Flow は「流れ」や「手順」を表す図です。ノードと矢印だけに絞り、「何から何へ進むのか」をシンプルに書きます。

Example: a simple Flow block

flow:
  layout: tb          # top-bottom
  nodes:
    - id: idea
      label: "Write Fragment"
    - id: config
      label: "Add small YAML"
    - id: reflect
      label: "Review with AI"
  edges:
    - from: idea
      to: config
    - from: config
      to: reflect

Flow は、Scene よりも「順番」や「ロジック」にフォーカスした表現です。

Using Scene / Flow in Markdown

Studio では、通常の Markdown の中に scene や flow ブロックを書くだけで図になります。

# 例：Fragment 内での記述イメージ

ここに本文のメモを書く…

```scene
scene:
  # ...
```

さらに説明を書く…

```flow
flow:
  # ...
```

コードブロック内のフォーマットが多少崩れていても、できるかぎり解釈して図にします（ただし、YAML 形式に近いほど意図どおりになりやすいです）。

Not a design tool

Scene / Flow は「完璧な図」を作るツールではありません。細かいデザインよりも、構造と関係性を素早く共有することを優先しています。

Shared with AI

図がテキストで書かれていることで、AI に対して「この Flow を一歩ずつたどって説明して」「この Scene を別の案に書き換えて」といった要望が出しやすくなります。

Try Scene / Flow in your own Fragment

テンプレートから始めるか、空の Fragment に 1 つだけ Scene / Flow ブロックを書いてみてください。あとは少しずつ形を整えていけば十分です。

Use Scene / Flow templates Open Studio