Communitygithub.com

csthink/dashmotion

動く図 — Claude AI スキル: アニメーションするフローチャートやアーキテクチャ図を自己完結型のHTML/SVGとして生成します。コネクターが流れ、リクエストが光の点として移動します。

dashmotion とは?

このスキルは、Claude Code などの AI エージェントが、アニメーションするフローチャートやアーキテクチャ図を自己完結型の HTML/SVG ファイルとして生成できるようにします。主な特徴は、コネクターを流れる動きやリクエストを光の点で表現する動的なビジュアライゼーションであり、単なる静的図に比べてシステムの動作を直感的に理解しやすくなります。生成されたファイルは外部依存がなく、ブラウザでそのまま開いて動作するため、Markdown への埋め込みや共有も容易です。これにより、システム設計の説明やデバッグ、プレゼンテーション資料の作成が効率化され、開発者やアーキテクトはより説得力のあるドキュメントを素早く作成できます。

対応✓Claude Code~Codex CLI~Cursor
npx skills add csthink/dashmotion

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

dashmotion は何をしますか?

動く図 — Claude AI スキル: アニメーションするフローチャートやアーキテクチャ図を自己完結型のHTML/SVGとして生成します。コネクターが流れ、リクエストが光の点として移動します。

概要

このスキルは、Claude AIエージェントがシステムアーキテクチャやフローチャートを動的に視覚化するための自己完結型HTML/SVGファイルを生成する機能を提供します。静的図とは異なり、コネクターがアニメーションで流れ、システム間のリクエストが光の点として表現されるため、動作の流れを直感的に理解できます。

主な特徴

  • アニメーションするコネクター: データやリクエストの流れを動的に表示
  • 光の点表現: リクエストがシステム間を移動する様子を視覚化
  • 自己完結型: 外部依存なしでブラウザで直接動作
  • カスタマイズ可能: 図のスタイルや速度を調整可能

使用方法

Claude AIに以下のようなリクエストを送信してください:

マイクロサービスアーキテクチャのアニメーションフローチャートを作成して。
ユーザーリクエストがAPIゲートウェイから各サービスへ流れる様子を光の点で表示したい。

対応プラットフォーム

  • Claude Code
  • Cursor
  • Codex
  • その他のAIエージェント

生成例

output.html や diagram.svg として保存される自己完結型ファイルが生成されます。ブラウザで開くだけでアニメーションを確認できます。

関連スキル