dashmotion は何をしますか?
動く図 — Claude AI スキル: アニメーションするフローチャートやアーキテクチャ図を自己完結型のHTML/SVGとして生成します。コネクターが流れ、リクエストが光の点として移動します。
概要
このスキルは、Claude AIエージェントがシステムアーキテクチャやフローチャートを動的に視覚化するための自己完結型HTML/SVGファイルを生成する機能を提供します。静的図とは異なり、コネクターがアニメーションで流れ、システム間のリクエストが光の点として表現されるため、動作の流れを直感的に理解できます。
主な特徴
- アニメーションするコネクター: データやリクエストの流れを動的に表示
- 光の点表現: リクエストがシステム間を移動する様子を視覚化
- 自己完結型: 外部依存なしでブラウザで直接動作
- カスタマイズ可能: 図のスタイルや速度を調整可能
使用方法
Claude AIに以下のようなリクエストを送信してください:
マイクロサービスアーキテクチャのアニメーションフローチャートを作成して。
ユーザーリクエストがAPIゲートウェイから各サービスへ流れる様子を光の点で表示したい。
対応プラットフォーム
- Claude Code
- Cursor
- Codex
- その他のAIエージェント
生成例
output.html や diagram.svg として保存される自己完結型ファイルが生成されます。ブラウザで開くだけでアニメーションを確認できます。