体制図.designer エディタを開く

体制図は、書くより
組み替えるほうが速い

YAML で体制を書くと、16:9 の PowerPoint がそのまま出てきます。 中身は画像ではなく、ひとつずつ編集できる図形。 レビューで出た「この人の役職だけ直して」に、PowerPoint 上でそのまま応えられます。

サンプルの体制図を読み込んでいます…

↑ これは画像ではありません。いま動いているエディタが描いたサンプル「SI案件(発注者・受注者)」です。

3ステップで使う

白紙から書き始める必要はありません。

1

サンプルを表示する

左上の「サンプルを表示…」から、自分の案件に近いものを選びます。 5種類(SI案件 / 少人数チーム / 保守・運用 / 多階層 / 多社混成)そろえてあります。

2

名前と役割を直す

カードをクリックすると、右のフォームで直せます。並び順や上下関係を変えたいときは カードをドラッグします。会社ごとの色は、凡例をクリックして変えられます。

3

PPTX を出す

右上の「PPTX」を押すとダウンロードされます。PowerPoint で開けば、 すべてが編集できる図形になっています。YAML も「保存」で残せます。

サーバーにデータを残しません。編集中の内容はブラウザの中だけにあります。 残したいときは「保存」で YAML をダウンロードして、次回は「開く」から読み込みます (画面にファイルをドラッグ&ドロップしても開きます)。

書く・見る・直すが、ひとつの画面に

どこを直しても、残りの2つにすぐ反映されます。

YAML 書く プレビュー 見る クリックで選択 / ドラッグで組み替え 左上のボタンで YAML を開閉 インスペクタ 直す 名前 役割 所属 子の並べ方
カードを選ぶと、YAML の該当する行が帯で示されます。逆に、YAML のカーソルを動かすと その位置のカードが選ばれます。

右ペインは一度にひとつのことだけ

カードを選んでいればそのカードの設定、何も選んでいなければ図全体の設定 (所属組織やタイトル)に切り替わります。両方が混ざらないので迷いません。

閲覧のみモード(V)

図がクリックもドラッグも受け付けなくなります。できあがった図を人に見せるとき、 うっかり構造を変えてしまう心配がありません。

会社の色は凡例から

図の凡例をクリックすると、その組織の設定が開きます。色を変えると、カードの枠線と塗り、 凡例の見本の両方に反映されます。

コメントは消えません

画面での修正は、YAML のテキストではなく構文木を書き換えています。 コメントも書式もそのまま残るので、Git の差分が「変えたところだけ」になります。

ドラッグで組み替える

落とせる場所は2種類です。カードの上か、カードとカードのあいだか。 「カードの何割の位置か」で決まるのではなく、落とせる領域そのものが分かれているので、 少し動かしただけで意味が変わってしまうことがありません。

カードの上に落とす → 子にする 緑になったカードの子になります。 別の上司の下に付け替えるとき。 カードのあいだに落とす → 兄弟にする 緑のバーの位置に挿入されます。 並べ替えるとき。
縦積み(childLayout: stack)のときは上下の隙間が挿入位置になり、 バーも横向きに変わります。ルート同士の隙間に落とすと、最上位に引き上げられます。

ドラッグ中は、プレビュー下端の帯に「田中 xxx の中で 中村 xxx の直前へ」のように 落としたあとの結果が出ます。落とせない場所では赤くなり、理由(「自分の配下には移せません」など)が 表示されます。Esc で取り消せます。

キーボード

操作キー
保存(YAML をダウンロード)⌘S / Ctrl+S
元に戻す / やり直す⌘Z / ⇧⌘Z
選択を移す(親 / 子 / 兄弟)↑ ↓ ← →
選択中のノードを削除Delete
閲覧のみモードの切り替えV
選択解除 / ドラッグ取り消しEsc

生成AIに書かせる

名簿や議事録から YAML を書き起こすのは、生成AIの得意な仕事です。 下のプロンプトをコピーし、末尾に手元の情報を貼って渡してください。 返ってきたものをエディタの YAML ペインに貼れば、そのまま図になります。

① ゼロから体制図を作らせる 名簿や議事録から書き起こす
あなたはプロジェクト体制図の YAML を書くアシスタントです。
下記のスキーマに厳密に従って、**YAML だけ**を出力してください。前後の説明は不要です。

# スキーマ

## トップレベル(roots のみ必須。ほかは任意)
title:      図のタイトル
subtitle:   副題(時点・フェーズなど)
footer:     右下に小さく出す版数・日付
cardOrder:  name-role(既定) | role-name   役割を名前より上に出すなら role-name
showRole:   true(既定) | false            false にすると全カードから役割が消える
showNote:   true(既定) | false            false にすると稼働率などの note が消える
orgInCard:  false(既定) | true            true にするとカードにも会社名が入る
legend:     true | false(省略時は orgs があれば表示される)
orgs:       所属組織の一覧。色分けと凡例の単位になる
  - id:    英数字の識別子(ノードの org: から参照される)
    name:  凡例に表示する名前
    color: "#RRGGBB"(省略すると自動で色が割り当てられる)
roots:      ノードの一覧(必須・1つ以上)。複数書くと横に並ぶ

## ノード
name:         必須。氏名または組織名
role:         役割や役職
org:          orgs[].id への参照。カードの色になる
note:         稼働率などの補記(小さい文字で入る)
group:        この配下を破線の枠で囲み、左上にラベルを付ける
childLayout:  row(既定・横並び) | stack(縦積み) | grid(格子)
columns:      grid のときの列数
cellWidth:    grid のとき、子カードの幅を pt でそろえる
cellHeight:   grid のとき、子カードの高さを pt でそろえる
aside:        left | right   本流から横に出す(PMO・監査・第三者評価など)
dashed:       true  親との線を破線にする(兼務や支援などの弱い関係)
emphasis:     true  枠線を太くして強調する
children:     子ノードの一覧

# 1枚に収めるための決まり(重要)
スライドは 960 × 540pt です。横に広がりすぎると全体が縮小され、文字が読めなくなります。
- 末端のメンバー一覧は childLayout: stack にする(横幅を大きく節約できる)
- 5人以上のチームは childLayout: grid と columns: 2〜3 を組み合わせる
- 階層は4段程度までにおさめる
- 発注者と受注者のように系統が分かれるときは、roots に2つ書いて横に並べる

# 出力例(この書き方にそろえる)
title: 販売管理システム再構築 体制図
subtitle: フェーズ2 / 2026年10月時点
orgs:
  - id: client
    name: 発注者
    color: "#2B6CB0"
  - id: vendor
    name: 受注者
    color: "#2F855A"
roots:
  - name: 山田 部長
    role: プロジェクトオーナー
    org: client
    group: 発注者
    emphasis: true
    children:
      - name: 佐藤 課長
        role: 業務推進責任者
        org: client
        childLayout: stack
        children:
          - { name: 鈴木, role: 受注業務, org: client }
          - { name: 高橋, role: 在庫・物流, org: client }
  - name: 田中
    role: プロジェクトマネージャ
    org: vendor
    group: 受注者
    note: 稼働 100%
    children:
      - name: 渡辺
        role: PMO / 品質管理
        org: vendor
        aside: right
      - name: 中村
        role: 開発リーダー
        org: vendor
        childLayout: grid
        columns: 2
        children:
          - { name: 小林, role: 設計・開発, org: vendor }
          - { name: 加藤, role: 設計・開発, org: vendor }

# 体制の情報
(ここに手元の情報を貼ってください。名簿でも議事録の抜粋でも、箇条書きで構いません。
 会社名 / 部署 / 氏名 / 役割 / 稼働率 / 誰が誰の下につくか が分かると精度が上がります)
② いまある体制図を直させる 異動や増員を反映する
次の YAML はプロジェクト体制図の定義です。
指示どおりに直して、**YAML 全体**を出力してください。

守ってほしいこと:
- キーの名前や構造(スキーマ)は変えない
- `#` で始まるコメント行はそのまま残す
- 指示に関係のないところは変えない
- 横に広がりすぎるときは childLayout を stack か grid に変えて収める

# 指示
(例: 中村を開発リーダーから外し、代わりに松本を置いてください。
 開発チームに吉田と山本の2名(どちらもパートナーA社)を追加してください。
 渡辺の稼働を 50% に変えてください)

# 現在の YAML
(エディタの YAML ペインの内容をそのまま貼ってください)
③ 1枚に収まらないときに整えさせる 構成は変えず、並べ方だけを調整する
次の体制図 YAML が横に広がりすぎて、スライド(960 × 540pt)に収めると
縮小されてしまい、文字が読めません。**誰が誰の下につくか(構成)は一切変えずに**、
並べ方の指定だけを調整して収めてください。YAML 全体を出力してください。

変えてよいキー:
- childLayout(row / stack / grid)
- columns(grid の列数)
- cellWidth / cellHeight(grid の子カードの寸法・pt)
- showRole / showNote(役割や補記を隠して高さを詰める。最後の手段)

効き方の目安:
- 末端のメンバー一覧を stack にすると、横幅が大きく減る
- 5人以上のチームは grid と columns: 2〜3 の組み合わせが効く
- grid に cellWidth / cellHeight を入れると、カードがそろって締まって見える

# 現在の YAML
(ここに貼ってください)

返ってきた YAML は、貼るだけで検証されます。 キーの綴りや構造が間違っていれば、エディタがその場所を指摘します (そのあいだもプレビューは直前の図を保ちます)。AI の出力を一行ずつ確かめる必要はありません。

YAML の書き方

手で書くときの早見表です。上のプロンプトにも同じ内容が入っています。

ノードのフィールド

キー意味
name必須。氏名や組織名
role役割・役職
orgorgs[].id への参照。カードの色になる
note稼働率などの補記(小さめの文字)
groupこの配下を破線の枠で囲み、左上にラベルを出す
childLayoutrow(既定) / stack / grid
columnsgrid の列数
cellWidth / cellHeightgrid の子カードの幅・高さ(pt)
asideleft / right。本流から横に出す
dashed親との接続線を破線にする
emphasis枠線を太くする
children子ノードの配列

3つの childLayout の使い分け

収まらないとき

プレビュー右上に「図の倍率」が出ています。0.62 を下回ると警告が出るので、そこを目安にしてください。

末端を縦積みにする

いちばん効きます。メンバーを束ねているリーダーの childLayout を stack にしてください。

大人数は格子にまとめる

5人以上なら grid + columns: 2 か 3。 cellWidth / cellHeight でそろえると、見た目が締まります。

系統は横に並べる

発注者と受注者のように系統が分かれるなら、ひとつのツリーに押し込まず、 roots に2つ書いて横に並べます。

役割や補記を隠す

全体設定の「役割を表示する」「補記を表示する」を外すと、カードの高さが詰まります。 ほかで足りないときの最後の手段です。