01
このSkillでできること
- ✓アニメーション付きフローチャートを生成する
- ✓システム構成・インフラ・ネットワーク図を生成する
- ✓Mermaidのフローチャートや状態図を動く図に変換する
- ✓自己完結型HTML・SVGとして出力する
02
使い方
01
STEP 1
工程や分岐を表す場合はFlowモードを使う
02
STEP 2
構成要素やサービスの関係を表す場合はArchitectureモードを使う
03
STEP 3
MermaidのflowchartまたはstateDiagram-v2を入力する
04
STEP 4
動きのある処理経路にはアニメーション付き出力を指定する
03
Skillのインストール
初心者におすすめ
AIにこのSkillを追加してもらう
GitHub URLごとCodexやClaude Codeへ渡し、現在の環境に合う方法を判断してもらいます。
このGitHubリポジトリにあるSkillを確認し、現在の環境に適した方法でインストールしてください。
インストール後、正常に利用できることを確認し、基本的な使い方も簡潔に説明してください。
Repository:
https://github.com/csthink/dashmotion04
このSkillを使うプロンプト例
Skill名を明示すると、意図したSkillを使わせやすくなります。自動発動型では必須とは限りません。
3段階のログイン処理を、流れるコネクター付きのダークテーマHTML・SVGフローチャートにしてください。出力例を見る
流れる線と経路上を移動するドットを含む、ループ再生可能な自己完結型HTML・SVG図。05
安全性チェック
自動解析による参考情報です。Skillの安全性を保証するものではありません。
外部API通信検出あり
Shellコマンド実行検出あり
ファイル読み取り明確な記述なし
ファイル書き込み明確な記述なし
ネットワークアクセス検出あり
認証情報明確な記述なし
検出根拠を見る
- shell: nstalled via the skills CLI (drop -g if project-local) rm -rf ~/.claude/skills/dashmotion # installed by unzipping (use ./.claude/... for project-
- network: owchart converted into an animated dashmotion diagram](https://github.com/csthink/dashmotion/raw/main/examples/images/mermaid-demo.gif) What to expect:
- network: nstall this alongside [architecture-diagram-generator](https://github.com/Cocoon-AI/architecture-diagram-generator)?** Yes — tested side by side. Animati
- dangerous: nstalled via the skills CLI (drop -g if project-local) rm -rf ~/.claude/skills/dashmotion # installed by unzipping (use ./.claude/... for project-
06
関連Skill
optim-agent
optim-agent
測定可能な単一の目的値に対して、設定可能なシステムパラメータの最適化を支援するAgent Skillです。
agent-skillsai-agentsautoml
au-bookkeeping
豪州ブックキーピング
月末締めやBAS作業前に、豪州取引の勘定科目コーディング、照合、修正案の準備を支援するスキル。
評価確度:暫定accountingaustraliabas
browser-lanes
browser-lanes(ブラウザレーン)
MASC BrowserツールでFirefox/Zenのタブを読み取り・操作し、画像確認やWeb操作の結果検証を行うスキル。
評価確度:暫定agentsaiharness