dealforest/flowchart

Flowchart SVG Generator

Visio 風スイムレーンフローチャート SVG 生成スキル。 ユーザーの自然言語の説明から中間 JSON を構築し、Sugiyama レイアウトエンジンで SVG を生成する。

引数

スキル呼び出し時の引数はフローの説明。以下のいずれかの形式:

• 自然言語: 「動画生成完了するまでのフロー」
• Mermaid 記法: sequenceDiagram や flowchart TD
• 箇条書き: ステップの列挙

引数がない場合はユーザーに何のフローを図にしたいか確認する。

ワークフロー

Step 1: フローの理解

引数の内容に応じてフローを理解する:

• コードベースの処理フロー の場合 → Glob/Grep/Read でソースコードを読み、実際の処理の流れを把握
• 概念的なフロー の場合 → 引数の説明から関係者・ステップ・分岐を整理
• Mermaid 記法 の場合 → そのまま中間 JSON に変換

Step 2: 中間 JSON を生成

フローの理解をもとに中間 JSON を /tmp/flowchart-output/<name>.json に書き出す。

{
  "title": "フロー名",
  "participants": [
    {"id": "p1", "name": "表示名", "icon": "user"}
  ],
  "steps": [
    {"id": "s1", "participant": "p1", "text": "ステップ名", "type": "process"}
  ],
  "arrows": [
    {"from": "s1", "to": "s2", "label": null, "branch": null}
  ]
}

Step 3: SVG を生成

mkdir -p /tmp/flowchart-output
python3 ~/.claude/skills/flowchart/generate_flowchart.py /tmp/flowchart-output/<name>.json /tmp/flowchart-output/<name>.svg

Step 4: ブラウザで開く

open -a "Google Chrome" /tmp/flowchart-output/<name>.svg

JSON 設計ガイドライン

participants

フローに関わるアクター・システムをスイムレーンとして定義。

| フィールド | 説明 | |-----------|------| | id | 一意の識別子（英数字） | | name | スイムレーンヘッダーの表示名 | | icon | アイコン種別 |

icon 一覧: user, server, database, ai, cloud, mobile, payment, email, shield, gear, document, clock

steps

| フィールド | 説明 | |-----------|------| | id | 一意の識別子 | | participant | 所属する participant の id | | text | ステップの表示テキスト（簡潔に） | | type | ノードの種別（下表参照） |

type 一覧:

| type | 描画 | 用途 | |------|------|------| | start | ピル（青） | フローの開始点 | | end | ピル（青） | フローの終了点 | | process | 角丸ボックス（白） | 一般的な処理 | | internal | 角丸ボックス（淡いブルー） | 内部処理・自動処理 | | external | 角丸ボックス（淡いグリーン） | 外部入出力・API 呼び出し | | condition | ダイヤモンド（紫枠） | 条件分岐 |

arrows

| フィールド | 説明 | |-----------|------| | from | 始点 step の id | | to | 終点 step の id | | label | 矢印上のラベル（不要なら null） | | branch | null=通常, "yes"=条件Yes, "no"=条件No |

設計のコツ

• participant は 3〜5 が最適（2 だと単純すぎ、6 以上は幅が広くなりすぎる）
• step のテキストは 10 文字前後（長いと折り返される）
• condition の後は必ず yes/no の 2 本の arrow を定義
• internal は自システム内の処理、external は他システムとのやりとり で使い分け

スクリプトの場所

~/.claude/skills/flowchart/generate_flowchart.py