mcpField
A
architecture-diagram-creator

architecture-diagram-creator

github.com/mhattingpete開発689462 回インストール14 週間前に更新
リポジトリ

architecture-diagram-creator について

architecture-diagram-creatorは、システム構成やデータフロー、ビジネス背景を扱うHTMLアーキテクチャ図を作成するスキルです。プロジェクト情報を分析し、6つのセクションに整理します。

主な機能

  1. 01ビジネス背景と目標
  2. 02SVGデータフロー図
  3. 03多段階パイプラインの表示
  4. 04レイヤー型システムアーキテクチャ
  5. 05機能要件と非機能要件
  6. 06デプロイ情報

活用シーン

  1. 01プロジェクトアーキテクチャの文書化
  2. 02データ処理パイプラインの表示
  3. 03システムコンポーネントとデータフローの提示

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/mhattingpete/claude-skills-marketplace --skill architecture-diagram-creator

インストール後、Claude Code で/architecture-diagram-creatorを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

assets/templates/
architecture_components.html
base_template.html
references/
example_architecture.html

詳細

アーキテクチャ図の作成

データフロー、ビジネスコンテキスト、システムアーキテクチャを含む、包括的な HTML アーキテクチャ図を作成します。

使用する場面

  • 「[project] のアーキテクチャ図を作成して」
  • 「概要図を生成して」
  • 「システムアーキテクチャを文書化して」
  • 「データフローと処理パイプラインを示して」

含めるコンポーネント

  1. ビジネスコンテキスト：目標、ユーザー、価値、指標
  2. データフロー：ソース → 処理 → 出力を示す SVG 図
  3. 処理パイプライン：複数段階の可視化
  4. システムアーキテクチャ：レイヤー化されたコンポーネント（データ／処理／サービス／出力）
  5. 機能：機能要件と非機能要件
  6. デプロイ：モデル、前提条件、ワークフロー

HTML 構造

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>[Project] Architecture</title>
  <style>
    body { font-family: system-ui; max-width: 1200px; margin: 0 auto; padding: 20px; }
    h1 { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 30px; }
    .section { margin: 30px 0; }
    svg { max-width: 100%; }
    /* Use semantic colors: #4299e1 (data), #ed8936 (processing), #9f7aea (AI), #48bb78 (success) */
  </style>
</head>
<body>
  <h1>[Project Name] - Architecture Overview</h1>

  
  
  
  
  
  
</body>
</html>

データフロー用 SVG パターン

<svg viewBox="0 0 800 400">
  
  <rect x="50" y="150" width="120" height="80" fill="#4299e1"/>

  
  <rect x="340" y="150" width="120" height="80" fill="#ed8936"/>

  
  <rect x="630" y="150" width="120" height="80" fill="#48bb78"/>

  
  <path d="M170,190 L340,190" stroke="#666" stroke-width="2" marker-end="url(#arrow)"/>
</svg>

ワークフロー

  1. プロジェクトを分析します（README、コード構造）
  2. 目的、データソース、処理、技術スタック、出力を抽出します
  3. 6 つのセクションをすべて含む HTML を作成します
  4. 視覚的な階層構造を表す色を使用します
  5. [project]-architecture.html に書き込みます

図はわかりやすくし、スタイルを統一して、実際のプロジェクトの詳細を含めてください。

コメント

Markdown 対応