workflow-visualizer

ワークフロー可視化ツール

ユーザーの作業が、ツール、自動化、AI エージェント、スケジュールされたタスク、そしてその合間にある人の作業を通じて、実際にどのように進むかを示すインタラクティブな HTML 図を作成します。目標は、ユーザーが月に一度これを開き、システムの全体像を把握して、何を追加、削除、または簡素化するかを判断できるようにすることです。

これはメタスキルの領域です。可視化する対象が実際にある場合に最も効果を発揮します。スキルが入ったフォルダー、スケジュールされたタスクのセット、文書化されたワークフローのセット、既知のツールスタックなどが該当します。

開始する前に

何を可視化するかを特定します。次のようなものが考えられます。

• ユーザーの Cowork 環境全体 — スキル、スケジュールされたタスク、コネクター、エージェント、コンテンツフォルダー
• 特定の業務ワークフロー — 例：「リード獲得から請求書の支払い完了まで」
• コンテンツパイプライン — 例：「アイデアから YouTube へのアップロード、さらにコンテンツの再利用まで」
• チームのツールスタック — どのアプリが何と連携し、誰が何を使っているか

「何をマッピングしますか？」と尋ねます。ユーザーが範囲を指定せずに「自分のワークフロー」とだけ言った場合は、デフォルトで現在の Cowork フォルダー、~/Coding/skills/ のスキャン、およびスケジュールされたタスクを対象にします。

入力情報を収集する

関連するフォルダーをスキャンします。Cowork 全体を可視化する場合は、次の情報が対象です。

• インストール済みのすべてのスキル（およびそれらが起動する条件）
• スケジュールされたタスク（および実行時刻）
• コネクターの一覧（Gmail、Calendar、Slack など）
• 最近のタスク／チャット履歴（アクセスできる場合。ユーザーが実際に何を使っているか）
• フォルダー内の BUSINESS_CONTEXT.md、README.md、またはシステムのドキュメント

特定のワークフローの場合は、ユーザーに一度その流れを説明してもらいます。各ステップ、使用するツール、各ステップの入力と出力、判断が必要な箇所を記録します。

図の構成

ノードとエッジを使ったインタラクティブな図にします。各ノードは、スキル、アプリ、人、スケジュールされたタスク、データストアなどの個別の要素です。各エッジは、データフロー、トリガー、依存関係などの関係を表します。

ノードはフェーズまたはドメインごとにグループ化します。一般的なグループ分けは次のとおりです。

• トリガー（スケジュールされたタスク、手動のプロンプト、受信メールなど）
• 入力（データソース、コネクター、ファイルフォルダー）
• 処理（スキル、エージェント、スクリプト）
• 出力（生成される成果物 — ダッシュボード、メール、コンテンツ）
• 保存先（データが最終的に保存される場所）

見分けやすいビジュアル表現を使います。

• 種類ごとに色分け — トリガー、スキル、データストアをそれぞれ別の色にする
• カテゴリごとに形を変える — トリガーは円、処理は長方形、保存先は円柱にする
• エッジのスタイル — 明示的なフローは実線、任意のフローは破線にし、矢印で方向を示す

インタラクティブ機能

図では、ユーザーが次の操作をできるようにします。

• ノードをクリック — 次の情報を含む詳細パネルを開く：これは何か、何が起動するか、何をするか、何を生成するか、関連ファイル
• エッジにカーソルを合わせる — ノード間を流れるデータ／イベントを表示する
• ドメインでフィルター — コンテンツパイプラインだけ、財務ワークフローだけなどを表示する
• ズーム／パン — 大きな図に対応する
• 検索 — 名前からノードを探す

任意ですが、効果的な機能：

• アクティビティの重ね合わせ — 使用状況データを利用できる場合は、実際の使用頻度に応じてノードの色やサイズを変えます。「6 か月前にインストールしたまま一度も使っていない」休眠状態の項目を見つけられるようにします。
• 予定／稼働中の切り替え — ユーザーが追加を計画しているノードがある場合、表示を切り替えられるようにします。

技術的な実装

自己完結型の単一の .html ファイルとして workflow-map-YYYY-MM-DD.html に保存します。

フォースディレクトグラフライブラリを使用します（シンプルなケースでは Mermaid、より高度な操作が必要な場合は Cytoscape.js／vis-network）。データは JS オブジェクトとして埋め込みます。表示時にネットワークアクセスが必要となる外部依存関係は避けます。

レイアウトのヒント：

• 手動でレイアウトできるようにします。自動レイアウトはすぐに見づらくなります。
• 再度開いたときに配置が変わらないよう、レイアウト位置をファイルに保存します。
• ノートパソコンの画面で図を操作できるようにします。複雑な図にはパン／ズームが必要です。

補足サマリー

HTML に加えて、図の内容を文章で説明する workflow-summary.md を作成します。

# Workflow map — [date]

## What this is
One paragraph: what this diagram represents.

## The shape
3-5 paragraphs walking through the system from triggers to outputs. Not a list — a narrative. "Every morning at 7am, the morning-briefing skill fires, which pulls from Gmail and Calendar connectors, and writes both to chat (for me) and to Slack. By 9am I've usually responded to a few flagged emails, which feeds into..."

## What's working
The pieces of the system that are humming.

## What's stale
Nodes that exist but aren't used. Candidates for removal.

## What's missing
Gaps you noticed — workflows the user has alluded to but no clear node handles, or obvious next-step automations.

## Suggestions
Specific moves: add this scheduled task, retire this skill, reorganize this folder.

ユーザーが実際に読むのはサマリーです。図は、サマリーを読みたくなるきっかけになります。

ルール

1. 想像上のものを可視化しないでください。 計画中のものではなく、実際に存在するものをマッピングしてください。別の「計画中」オーバーレイとして明確にラベル付けするなら、将来的なノードを含めてもかまいませんが、デフォルトでは混在させないでください。
2. 少ないほど効果的です。 ノードが60個ある図は読めません。システムが本当に複雑な場合は、3～4個のサブ図に分けて相互にリンクしてください。
3. 名前は重要です。 ユーザーが実際に使っている名前を使用してください。スキルの名前がmorning-briefingなら、ノードのラベルも「AIを活用した毎日の要約生成ツール」ではなく、その名前にしてください。
4. 使われていないものを明らかにしてください。 ワークフローマップから得られる最も価値のある洞察は、たいてい「4か月前にこれを作ったのに、それ以来一度も使っていない」というものです。遠慮せず、指摘してください。
5. 修正ではなく、再生成してください。 ユーザーが新しいスキルやタスクを追加したら、マップ全体を再生成してください。図を少しずつ同期させようとするのは、徒労に終わります。