Habilidades architecture-diagram
📦

architecture-diagram

v1.0 Revisión del contenido r1 Seguro 🌐 Acceso a red⚙️ Comandos externos

Generar diagramas de arquitectura

Los equipos necesitan diagramas técnicos claros que muestren sistemas, redes y servicios en la nube. Esta skill guía a las herramientas de IA para producir diagramas HTML oscuros e independientes con SVG en línea.

Compatible con: Claude Codex Code(CC)
📊 74 Adecuado

Instalar con mi Agente

Copia esta solicitud en tu Agente. Incluye la página canónica del Skill y el manifiesto.

Solicitud de agente
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.

Tu Agente debe seguir mostrando su plan y solicitar cualquier confirmación exigida por la política de seguridad.

Recursos legibles por agentes

Usa estos enlaces cuando un agente de IA, crawler o script necesite contexto limpio en vez de leer la página completa.

Detalle Markdown GET /skills/cocoon-ai-architecture-diagram.md Manifest firmado GET /api/skills/cocoon-ai-architecture-diagram/manifest Lockfile firmado GET /api/skills/cocoon-ai-architecture-diagram/lockfile

Pruébalo

Usando "architecture-diagram". Una aplicación SaaS con usuarios de navegador, frontend React, servicio API, caché Redis, PostgreSQL y un proveedor de autenticación.

Resultado esperado:

Una página de arquitectura HTML oscura que muestra usuarios, frontend, servicios backend, caché, base de datos, flujo de autenticación, etiquetas de conexión y tarjetas de resumen.

Usando "architecture-diagram". Un sitio estático en AWS con CloudFront, buckets S3, API Gateway, funciones Lambda y DynamoDB.

Resultado esperado:

Un diagrama de nube con un límite de región AWS, cajas de servicios, flechas para rutas de solicitud, anotaciones de almacenamiento y notas de despliegue.

Usando "architecture-diagram". Una plataforma Kubernetes con ingress, servicios, workers, bus de eventos, base de datos y monitoreo externo.

Resultado esperado:

Un diagrama de plataforma estructurado con límites de cluster, ubicación del bus de mensajes, grupos de servicios, enlaces de monitoreo y una leyenda externa.

Auditoría de seguridad

Seguro
v10 • 9/7/2026 Abrir el informe versionado

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.

2
Archivos escaneados
484
Líneas analizadas
2
Elementos de revisión
0
Falsos positivos ignorados
Elementos de revisión de capacidades (2)

Estas son capacidades locales reales que pueden esperarse para esta habilidad, por lo que requieren revisión, pero no se cuentan como comportamiento malicioso confirmado.

Bajo
assets/template.html:7
Hardcoded URL
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swa
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.
Bajo
SKILL.md:34
Hardcoded URL
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swa
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.

Factores de riesgo

🌐 Acceso a red (2)
assets/template.html:7 SKILL.md:34
⚙️ Comandos externos (35)
SKILL.md:22 SKILL.md:23 SKILL.md:24 SKILL.md:25 SKILL.md:26 SKILL.md:27 SKILL.md:28 SKILL.md:33-35 SKILL.md:35-41 SKILL.md:41-42 SKILL.md:42-46 SKILL.md:46-48 SKILL.md:48-50 SKILL.md:50-52 SKILL.md:52 SKILL.md:55-59 SKILL.md:59-63 SKILL.md:63 SKILL.md:64-69 SKILL.md:69-71 SKILL.md:71-73 SKILL.md:73 SKILL.md:74-77 SKILL.md:77-88 SKILL.md:88-92 SKILL.md:92-106 SKILL.md:106-110 SKILL.md:110-124 SKILL.md:124-128 SKILL.md:128-132 SKILL.md:132-143 SKILL.md:143-147 SKILL.md:147-149 SKILL.md:149-150 SKILL.md:150-158
Auditado por: codex Ver historial de auditorías →
Compartir y citar este informe

Comparte el informe de evaluación versionado, la insignia neutral, la tarjeta insertable y las citas. Skillstore presenta evidencias sin decidir si este Skill es seguro.

Abrir el informe versionado
Evaluación de seguridad

Copiar enlace del informe

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

Insignia 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)

Insignia 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>

Tarjeta para insertar

<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>
Citas académicas (APA · BibTeX · CFF)

Cita 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

Cita 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"

Puntuación de Skillstore

Por qué esta puntuación Confianza de la evidencia: Alto
36
Arquitectura
85
Mantenibilidad
87
Contenido
72
Comunidad
91
Cumplimiento de la especificación

Lo que puedes crear

Documentar la arquitectura de un producto

Crear un diagrama claro para servicios, bases de datos, clientes y flujos de datos principales en un producto de software.

Explicar la infraestructura en la nube

Mostrar regiones, grupos de seguridad, balanceadores de carga, almacenamiento y límites de servicios para un despliegue en la nube.

Revisar flujos de seguridad

Mapear rutas de autenticación, recursos protegidos y límites de confianza de red antes de una revisión de diseño.

Prueba estos prompts

Crear un diagrama básico del sistema 
Crea un diagrama de arquitectura para una aplicación web con usuarios, un frontend, un servicio API y una base de datos PostgreSQL.
Diagramar un despliegue en la nube 
Crea un diagrama de arquitectura HTML independiente para un despliegue en AWS con CloudFront, S3, un balanceador de carga de aplicaciones, servidores API y RDS.
Mostrar seguridad y flujos de datos 
Crea un diagrama de arquitectura centrado en seguridad que muestre inicio de sesión OAuth, validación JWT, rutas TLS, grupos de seguridad, servicios privados y acceso a la base de datos.
Refinar un diagrama de arquitectura complejo 
Revisa este plan de diagrama de arquitectura para eliminar solapamientos, colocar leyendas fuera de los límites, agrupar servicios relacionados y etiquetar claramente cada conexión.

Mejores prácticas

  • Proporciona los componentes principales, límites, protocolos y flujos de datos antes de pedir el diagrama.
  • Revisa el diseño SVG en busca de solapamientos después de agregar o eliminar servicios.
  • Mantén las leyendas fuera de los límites de región y cluster para obtener diagramas más limpios.

Evitar

  • No pidas un diagrama completo a partir de nombres de producto vagos sin detalles de arquitectura.
  • No coloques leyendas ni texto de resumen dentro de los límites de infraestructura.
  • No dependas de las etiquetas predeterminadas de la plantilla en un entregable final.

Preguntas frecuentes

¿Qué crea esta skill?
Crea diagramas de arquitectura HTML independientes con CSS incrustado y gráficos SVG en línea.
¿Qué herramientas pueden usar esta skill?
El informe enumera soporte para Claude, Codex y Claude Code.
¿Genera diagramas a partir de cuentas en la nube en vivo?
No. Debes proporcionar los detalles de arquitectura que deben aparecer en el diagrama.
¿Puede funcionar sin conexión el resultado?
El HTML y SVG pueden funcionar sin conexión si el enlace de Google Fonts se elimina o se reemplaza.
¿Qué estilos de diagrama se incluyen?
Incluye estilos oscuros para componentes de nube, frontend, backend, base de datos, seguridad, bus de mensajes y componentes externos.
¿Se requiere JavaScript para el resultado?
No. La skill solicita HTML puro, animaciones CSS y SVG en línea sin JavaScript.

Detalles del desarrollador

Autor

Cocoon-AI

Licencia

MIT

Versión del autor

v1.0

Revisión de Skillstore

r1

Aviso de versión

La versión declarada por el autor no es un SemVer válido.

Repositorio

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

Ref.

0519034dad657fb1f7706e0550e962beeda73fdf

Actualidad del mantenimiento

25/7/2026

Uso

30 descargas · 324 vistas

Estructura de archivos

📁 assets/

📄 template.html

📄 SKILL.md