dashmotion

Dashmotion

フローチャートやシステム構成図を、流れる線や移動するドット付きの自己完結型HTML・SVGとして生成します。Mermaidのアニメーション化にも対応します。

AIスキル大辞典による日本語要約
品質評価88/100評価確度:十分
人気度(GitHub Star) 75発掘スコア 75
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のインストール

このGitHubリポジトリにあるSkillを確認し、現在の環境に適した方法でインストールしてください。
インストール後、正常に利用できることを確認し、基本的な使い方も簡潔に説明してください。

Repository:
https://github.com/csthink/dashmotion
04

この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