Communitygithub.com

must-mohsin1/drawing-diagrams

アーキテクチャ、依存関係、シーケンス、ステートマシン、フローチャート、データフロー、ER図をライブのExcalidrawキャンバスにレンダリングするClaude Codeスキルです。手描き風の美観を持ち、依存関係マップは決定論的に、その他はLLMが構成します。

drawing-diagrams とは?

このスキルは、Claude Codeを利用して、アーキテクチャ図、依存関係図、シーケンス図、ステートマシン図、フローチャート、データフロー図、ER図など、さまざまな種類の図をライブのExcalidrawキャンバス上に生成・レンダリングします。手描き風の美しい見た目を特徴とし、依存関係マップについては決定論的なアルゴリズムで正確に配置し、それ以外の図についてはLLM(大規模言語モデル)がコンテンツを構成して生成します。このスキルは主にClaude Code環境で動作し、開発者がシステム設計やアーキテクチャの可視化をリアルタイムで行うのに役立ちます。図の内容は自然言語の指示で指定でき、出力はExcalidraw形式で提供されるため、簡単に編集や共有が可能です。

対応✓Claude Code~Codex CLI~Cursor
npx skills add must-mohsin1/drawing-diagrams

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

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

ドキュメント

drawing-diagrams は何をしますか?

アーキテクチャ、依存関係、シーケンス、ステートマシン、フローチャート、データフロー、ER図をライブのExcalidrawキャンバスにレンダリングするClaude Codeスキルです。手描き風の美観を持ち、依存関係マップは決定論的に、その他はLLMが構成します。

機能

  • 複数の図タイプをサポート:
    • アーキテクチャ図
    • 依存関係図
    • シーケンス図
    • ステートマシン図
    • フローチャート
    • データフロー図
    • ER図
  • 手描き風の美しい視覚スタイル
  • 依存関係マップの決定論的配置
  • LLMによるその他の図タイプの構成
  • Excalidrawキャンバスへのライブレンダリング

使用方法

must-mohsin1/drawing-diagrams スキルをClaude Codeで有効にしたら、自然言語で図の生成を依頼します。

例:

  • 「シンプルなクライアント・サーバーアーキテクチャ図を作成してください」
  • 「このシステムの依存関係図を生成してください」
  • 「ログインプロセスのシーケンス図を描いてください」
  • 「注文処理のフローチャートを作成してください」

動作環境

  • Claude Code環境
  • Excalidrawの互換性

ライセンス

このスキルの詳細なライセンス情報については、元のリポジトリを参照してください。

関連スキル