スキル architecture-diagram

📦

architecture-diagram

Name: architecture-diagram
Author: Cocoon-AI

v1.0 コンテンツリビジョン r1 安全 🌐 ネットワークアクセス⚙️ 外部コマンド

アーキテクチャ図を生成

チームには、システム、ネットワーク、クラウドサービスを示す明確な技術図が必要です。このスキルは、AIツールがインラインSVGを使ったダークテーマのスタンドアロンHTML図を作成できるようにガイドします。

対応: Claude Codex Code(CC)

📊 74 十分

自分のエージェントでインストール

このリクエストをエージェントにコピーしてください。正規の Skill ページとマニフェストが含まれています。

エージェントリクエスト

Review the Skillstore skill "architecture-diagram" from https://skillstore.io/skills/cocoon-ai-architecture-diagram.md and its manifest at https://skillstore.io/api/skills/cocoon-ai-architecture-diagram/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.

エージェントは引き続き計画を提示し、セキュリティポリシーで必要な確認を求める必要があります。

エージェントが読めるリソース

AI エージェント、クローラー、スクリプトがページ全体ではなく整理されたコンテキストを必要とする場合は、これらのリンクを使ってください。

Markdown詳細 GET /skills/cocoon-ai-architecture-diagram.md 署名済み manifest GET /api/skills/cocoon-ai-architecture-diagram/manifest 署名済み lockfile GET /api/skills/cocoon-ai-architecture-diagram/lockfile

テストする

「architecture-diagram」を使用しています。 browser users、React frontend、API service、Redis cache、PostgreSQL、auth providerを持つSaaS app。

期待される結果:

users、frontend、backend services、cache、database、auth flow、connection labels、summary cardsを示すダークなHTMLアーキテクチャページ。

「architecture-diagram」を使用しています。 CloudFront、S3 buckets、API Gateway、Lambda functions、DynamoDBを持つAWS static site。

期待される結果:

AWS region boundary、service boxes、request pathsのarrows、storage annotations、deployment notesを含むクラウド図。

「architecture-diagram」を使用しています。 ingress、services、workers、event bus、database、external monitoringを持つKubernetes platform。

期待される結果:

cluster boundaries、message bus placement、service groups、monitoring links、external legendを含む構造化されたプラットフォーム図。

セキュリティ監査

安全

v10 • 2026/7/9 バージョン別レポートを開く

Most static findings are false positives caused by markdown inline code, SVG examples, CSS colors, and diagram wording. The only confirmed issue is the Google Fonts dependency in SKILL.md and assets/template.html, which can trigger external network requests. No prompt injection, data exfiltration intent, or executable command behavior was found.

スキャンされたファイル

484

解析済み行数

レビュー項目

誤検知を無視

機能レビュー項目 (2)

これらは、このスキルに期待される可能性のある実際のローカル機能であるため、レビューが必要ですが、確認済みの悪意ある動作としてはカウントされません。

低

assets/template.html:7

Hardcoded URL

assets/template.html:7 loads JetBrains Mono from Google Fonts, so generated diagrams can make an external network request when opened. The provider appears benign and no secret data is sent, so this is a low-severity privacy and dependency risk.

低

SKILL.md:34

Hardcoded URL

SKILL.md:34 loads JetBrains Mono from Google Fonts, so generated diagrams can make an external network request when opened. The provider appears benign and no secret data is sent, so this is a low-severity privacy and dependency risk.

監査者: codex 監査履歴を表示 →

このレポートを共有・引用

バージョン付き評価レポート、中立的なバッジ、埋め込みカード、引用を共有できます。Skillstore は証拠を報告しますが、この Skill が安全かどうかは判断しません。

バージョン別レポートを開く

レポートリンクをコピー

https://skillstore.io/skills/cocoon-ai-architecture-diagram/audits/10?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdownバッジ

[![Skillstore security assessment](https://skillstore.io/badges/skills/cocoon-ai-architecture-diagram/security.svg)](https://skillstore.io/skills/cocoon-ai-architecture-diagram?utm_source=security_passport_badge)

HTMLバッジ

<a href="https://skillstore.io/skills/cocoon-ai-architecture-diagram?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/cocoon-ai-architecture-diagram/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

埋め込みカード

<iframe src="https://skillstore.io/embed/skills/cocoon-ai-architecture-diagram.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>

学術引用 (APA · BibTeX · CFF)

APA形式の引用

Cocoon-AI. (2026). architecture-diagram security audit report (audit version 10) [Author version 1.0]. Skillstore. https://skillstore.io/skills/cocoon-ai-architecture-diagram/audits/10

BibTeX形式の引用

@techreport{cocoon-ai-cocoon-ai-architecture-diagram-2026,
  author = {Cocoon-AI},
  title = {architecture-diagram security audit report (audit version 10)},
  institution = {Skillstore},
  year = {2026},
  number = {10},
  url = {https://skillstore.io/skills/cocoon-ai-architecture-diagram/audits/10},
  note = {Author version 1.0}
}

CITATION.cff

cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "architecture-diagram security audit report (audit version 10)"
version: "1.0"
type: report
authors:
  - name: "Cocoon-AI"
date-released: "2026-07-09"
url: "https://skillstore.io/skills/cocoon-ai-architecture-diagram/audits/10"
identifiers:
  - type: other
    value: "skillstore:cocoon-ai-architecture-diagram:audit:10"
    description: "Skillstore immutable audit report identifier"

Skillstore スコア

このスコアの理由証拠の信頼度: 高

アーキテクチャ

保守性

コンテンツ

コミュニティ

仕様準拠

作成できるもの

プロダクトアーキテクチャを文書化する

ソフトウェアプロダクト内のservices、databases、clients、主要なdata flowsのための明確な図を作成します。

クラウドインフラストラクチャを説明する

クラウドデプロイメントのregions、security groups、load balancers、storage、service boundariesを示します。

セキュリティフローをレビューする

設計レビューの前に、authentication paths、protected resources、network trust boundariesをマッピングします。

これらのプロンプトを試す

基本的なシステム図を作成する

users、frontend、API service、PostgreSQL databaseを持つweb appのアーキテクチャ図を作成してください。

クラウドデプロイメントを図解する

CloudFront、S3、application load balancer、API servers、RDSを含むAWS deploymentのスタンドアロンHTMLアーキテクチャ図を作成してください。

セキュリティとデータフローを示す

OAuth login、JWT validation、TLS paths、security groups、private services、database accessを示す、セキュリティ重視のアーキテクチャ図を作成してください。

複雑なアーキテクチャ図を改善する

このアーキテクチャ図の計画を修正し、重なりをなくし、legendsをboundariesの外に配置し、関連するservicesをグループ化し、すべてのconnectionsに明確なラベルを付けてください。

ベストプラクティス

図を依頼する前に、主要なcomponents、boundaries、protocols、data flowsを提供してください。
servicesを追加または削除した後は、SVGレイアウトに重なりがないか確認してください。
より見やすい図にするため、legendsはregion boundariesやcluster boundariesの外に配置してください。

回避

アーキテクチャの詳細なしに、曖昧なプロダクト名だけで完全な図を依頼しないでください。
legendsやsummary textをinfrastructure boundariesの内側に配置しないでください。
最終成果物でデフォルトテンプレートのラベルに依存しないでください。

よくある質問

このスキルは何を作成しますか？

埋め込みCSSとインラインSVGグラフィックを使ったスタンドアロンHTMLアーキテクチャ図を作成します。

どのツールでこのスキルを使用できますか？

レポートには、Claude、Codex、Claude Codeのサポートが記載されています。

ライブのクラウドアカウントから図を生成しますか？

いいえ。図に表示するアーキテクチャの詳細を提供する必要があります。

出力はオフラインで動作しますか？

Google Fontsリンクを削除または置き換えれば、HTMLとSVGはオフラインで動作できます。

どのような図のスタイルが含まれていますか？

cloud、frontend、backend、database、security、message bus、external components向けのダークスタイルが含まれています。

出力にJavaScriptは必要ですか？

いいえ。このスキルは、JavaScriptを使わず、純粋なHTML、CSS animations、インラインSVGで作成することを求めます。

開発者情報

作成者

Cocoon-AI

ライセンス

MIT

作者バージョン

v1.0

Skillstore リビジョン

バージョンに関する注意

作者が宣言したバージョンは有効な SemVer ではありません。

リポジトリ

https://github.com/Cocoon-AI/architecture-diagram-generator/tree/main/architecture-diagram/

参照

0519034dad657fb1f7706e0550e962beeda73fdf

メンテナンスの新しさ

2026/7/21

利用状況

29 ダウンロード · 324 閲覧

ファイル構成

📁 assets/

📄 template.html

📄 SKILL.md

すべて表示

📦

c4-modeling

C4アーキテクチャ図を作成する

作成者 Consiliency

アーキテクチャドキュメントでは詳細レベルが混在し、ステークホルダーを混乱させることがよくあります。このスキルは、Mermaid構文、レベルごとのルール、レビュー確認項目に基づいてC4図の作成を支援します。

ドキュメント表示

📦

design-doc-mermaid

Create Mermaid Diagrams and Design Documents

作成者 spillwavesolutions

Complex systems are difficult to explain consistently. This skill creates structured Mermaid diagrams and design documents from requirements, source code, and configuration.

ドキュメント表示

📦