Architecture Diagram Generator

中文 | English

Summary

This source turns architecture-diagram generation into a packaged Claude skill: the user supplies a textual system description, and the agent emits a standalone dark-themed HTML/SVG diagram that can be iterated through chat.

Source

• Raw file: raw/Cocoon-AIarchitecture-diagram-generator Generate beautiful dark-themed system architecture diagrams as standalone HTMLSVG files. Works as a Claude AI skill..md
• Translated raw file: raw/Cocoon-AIarchitecture-diagram-generator Generate beautiful dark-themed system architecture diagrams as standalone HTMLSVG files. Works as a Claude AI skill..zh.md
• Original URL: https://github.com/Cocoon-AI/architecture-diagram-generator
• Ingest date: 2026-04-15

Key Contributions

• Packages architecture diagram generation as a reusable skill instead of a one-off prompt.
• Uses text-first system descriptions as the handoff surface, which keeps the method compatible with other coding agents and repo docs.
• Chooses a portable output format: one standalone HTML file that can also render SVG for sharing and iteration.
• Shows that visual architecture artifacts can be treated like other agent-native repo deliverables: generated, revised, and exchanged through plain text instructions.

Practical Implications

• A repo can expose diagrams as a reproducible artifact, not only as screenshots pasted into docs.
• Diagram generation becomes easier to delegate when the system description is already structured in markdown or bullet form.
• Architecture visualization is starting to look like a sibling control surface to code, docs, and design contracts: still visual, but driven by text that agents can read and rewrite.

Related Pages

• Agent-Readable Design Systems
• Agent-First Repositories
• Codex Operating Practices