Architecture Diagram - Setup Guide¶
Source: nousresearch/hermes-agent (227.9K⭐)
Skill: nousresearch/hermes-agent@architecture-diagram
Installs: 320
Category: Engineering / Diagrams
First Seen: Apr 15, 2026
Generate professional, dark-themed technical architecture diagrams as standalone HTML files with inline SVG graphics. No external tools, no API keys, no rendering libraries - just write the HTML file and open it in a browser.
Installation¶
npx skills add nousresearch/hermes-agent@architecture-diagram
Prerequisites¶
| Requirement | Details |
|---|---|
| Hermes Agent | Any version |
| A browser | To view the generated HTML/SVG files |
| Nothing else | No external tools, API keys, or rendering libraries needed |
What It Provides¶
Best Suited For¶
- Software system architecture (frontend / backend / database layers)
- Cloud infrastructure (VPC, regions, subnets, managed services)
- Microservice / service-mesh topology
- Database + API maps, deployment diagrams
- Any tech-infra subject that fits a dark, grid-backed aesthetic
Not Suited For¶
- Physics, chemistry, math, biology, or other scientific subjects
- Physical objects (vehicles, hardware, anatomy, cross-sections)
- Floor plans, narrative journeys, educational / textbook-style visuals
- Hand-drawn whiteboard sketches → use
excalidrawinstead - Animated explainers → use an animation skill
Quick Start¶
# 1. Install
npx skills add nousresearch/hermes-agent@architecture-diagram
# 2. Describe your architecture to Hermes
# Example: "Generate an architecture diagram for a Next.js app
# with Vercel hosting, Supabase database, and Cloudflare CDN"
# 3. The agent generates an HTML file at the path it reports
# 4. Open in browser
open architecture-diagram.html # macOS
xdg-open architecture-diagram.html # Linux
How It Works¶
The skill instructs the agent to generate pure HTML with inline SVG elements. The output is: - Self-contained: Single HTML file, no external dependencies - Dark-themed: Professionally styled with grid background - Responsive: Scales to viewport - Shareable: Send the HTML file directly - opens in any browser
Diagram Features¶
| Feature | Detail |
|---|---|
| Color palette | Dark background (#0d1117), accent borders, muted text |
| Grid | Subtle background grid for alignment reference |
| Layers | Visual grouping by architectural tier (frontend, backend, data) |
| Connections | Animated or dashed lines showing data flow |
| Labels | Clean typography on service boxes |
| Icons | Simple geometric shapes representing service types |
Verification¶
After generation, open the HTML in a browser and verify: - All services/components are labeled correctly - Data flow arrows point the right direction - Color coding distinguishes layers - File opens without errors in Chrome, Firefox, and Safari
Security¶
All three audits passed.
Related: excalidraw-setup.md, hyperframes-setup.md
Integration with CorpusIQ¶
CorpusIQ is the connector layer that lets AI assistants read the systems a business already runs on - accounting, payments, CRM, email, files and analytics - and answer with the source named. It is read-only by design: it retrieves data and never writes to, or acts in, a connected system, which is what makes it safe to point at live accounts.
This page is part of the CorpusIQ directory, the reference we maintain for the MCP server and agent-skill ecosystem. Run alongside CorpusIQ, a third-party server like this one can be combined with a company's own business data in a single answer.