Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →
nousresearch avatar

Architecture Diagram

nousresearch/hermes-agent

  • 303 installs
  • 226k repo stars
  • Updated August 5, 2026
  • nousresearch/hermes-agent

Generate architecture diagrams from system descriptions so teams can document services, data flows, deployments, and component boundaries during design and implementation.

About

Architecture-diagram is a Hermes agent skill that produces visual system diagrams from natural-language or structured descriptions. It helps engineers document microservices, APIs, data paths, and deployment topology for reviews, READMEs, and stakeholder alignment during builds.

  • Turns system descriptions into diagrams
  • Clarifies services and data flows
  • Supports design reviews and onboarding
  • Agent-assisted technical documentation
  • Speeds architecture communication

Architecture Diagram by the numbers

  • 303 all-time installs (skills.sh)
  • +16 installs in the week ending Aug 4, 2026 (Skillselion tracking)
  • Ranked #452 of 1,879 Documentation skills by installs in the Skillselion catalog
  • Data as of Aug 5, 2026 (Skillselion catalog sync)
npx skills add https://github.com/nousresearch/hermes-agent --skill architecture-diagram

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

Listed on Skillselion
Installs303
repo stars★ 226k
Last updatedAugust 5, 2026
Repositorynousresearch/hermes-agent ↗

What it does

Generate architecture diagrams from system descriptions so teams can document services, data flows, deployments, and component boundaries during design and implementation.

Files

SKILL.mdMarkdownGitHub ↗

Architecture Diagram Skill

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.

Scope

Best suited for:

  • Software system architecture (frontend / backend / database layers)
  • Cloud infrastructure (VPC, regions, subnets, managed services)
  • Microservice / service-mesh topology
  • Database + API map, deployment diagrams
  • Anything with a tech-infra subject that fits a dark, grid-backed aesthetic

Look elsewhere first 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 (consider excalidraw)
  • Animated explainers (consider an animation skill)

If a more specialized skill is available for the subject, prefer that. If none fits, this skill can also serve as a general SVG diagram fallback — the output will just carry the dark tech aesthetic described below.

Based on Cocoon AI's architecture-diagram-generator (MIT).

Workflow

1. User describes their system architecture (components, connections, technologies) 2. Generate the HTML file following the design system below 3. Save with write_file to a .html file (e.g. ~/architecture-diagram.html) 4. User opens in any browser — works offline, no dependencies

Output Location

Save diagrams to a user-specified path, or default to the current working directory:

./[project-name]-architecture.html

Preview

After saving, suggest the user open it:

# macOS
open ./my-architecture.html
# Linux
xdg-open ./my-architecture.html

Design System & Visual Language

Color Palette (Semantic Mapping)

Use specific rgba fills and hex strokes to categorize components:

Component TypeFill (rgba)Stroke (Hex)
Frontendrgba(8, 51, 68, 0.4)#22d3ee (cyan-400)
Backendrgba(6, 78, 59, 0.4)#34d399 (emerald-400)
Databasergba(76, 29, 149, 0.4)#a78bfa (violet-400)
AWS/Cloudrgba(120, 53, 15, 0.3)#fbbf24 (amber-400)
Securityrgba(136, 19, 55, 0.4)#fb7185 (rose-400)
Message Busrgba(251, 146, 60, 0.3)#fb923c (orange-400)
Externalrgba(30, 41, 59, 0.5)#94a3b8 (slate-400)

Typography & Background

  • Font: JetBrains Mono (Monospace), loaded from Google Fonts
  • Sizes: 12px (Names), 9px (Sublabels), 8px (Annotations), 7px (Tiny labels)
  • Background: Slate-950 (#020617) with a subtle 40px grid pattern
<!-- Background Grid Pattern -->
<pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
  <path d="M 40 0 L 0 0 0 40" fill="none" stroke="#1e293b" stroke-width="0.5"/>
</pattern>

Technical Implementation Details

Component Rendering

Components are rounded rectangles (rx="6") with 1.5px strokes. To prevent arrows from showing through semi-transparent fills, use a double-rect masking technique: 1. Draw an opaque background rect (#0f172a) 2. Draw the semi-transparent styled rect on top

Connection Rules

  • Z-Order: Draw arrows early in the SVG (after the grid) so they render behind component boxes
  • Arrowheads: Defined via SVG markers
  • Security Flows: Use dashed lines in rose color (#fb7185)
  • Boundaries:
  • Security Groups: Dashed (4,4), rose color
  • Regions: Large dashed (8,4), amber color, rx="12"

Spacing & Layout Logic

  • Standard Height: 60px (Services); 80-120px (Large components)
  • Vertical Gap: Minimum 40px between components
  • Message Buses: Must be placed in the gap between services, not overlapping them
  • Legend Placement: CRITICAL. Must be placed outside all boundary boxes. Calculate the lowest Y-coordinate of all boundaries and place the legend at least 20px below it.

Document Structure

The generated HTML file follows a four-part layout: 1. Header: Title with a pulsing dot indicator and subtitle 2. Main SVG: The diagram contained within a rounded border card 3. Summary Cards: A grid of three cards below the diagram for high-level details 4. Footer: Minimal metadata

Info Card Pattern

<div class="card">
  <div class="card-header">
    <div class="card-dot cyan"></div>
    <h3>Title</h3>
  </div>
  <ul>
    <li>• Item one</li>
    <li>• Item two</li>
  </ul>
</div>

Output Requirements

  • Single File: One self-contained .html file
  • No External Dependencies: All CSS and SVG must be inline (except Google Fonts)
  • No JavaScript: Use pure CSS for any animations (like pulsing dots)
  • Compatibility: Must render correctly in any modern web browser

Template Reference

Load the full HTML template for the exact structure, CSS, and SVG component examples:

skill_view(name="architecture-diagram", file_path="templates/template.html")

The template contains working examples of every component type (frontend, backend, database, cloud, security), arrow styles (standard, dashed, curved), security groups, region boundaries, and the legend — use it as your structural reference when generating diagrams.

Related skills

open.feishu.cnLark MarkdownInstantly turn any markdown file into clean, formatted Lark/Figma-compatible documents without manual reformatting.488klarksuiteLark DocCreate, read, update, summarize, rewrite and manage Feishu/Lark cloud documents directly from agent workflows.401k16.1klarksuiteLark WikiCreate, organize, query, and manage documents, spaces, and members inside Lark (Feishu) knowledge bases directly from AI agent workflows.397k16.1kmattpocockDomain ModelingBuild and sharpen a project's domain model: pin down domain terminology in a glossary and record architectural decisions as ADRs.318k202kxixu-meOpensource Guide CoachGet expert, attribution-safe guidance on launching and sustaining an open-source project.270k71xixu-meReadme I18nMaintain consistent, updatable language selector blocks across every README variant in a multilingual repository.270k71
Documentationdocsbackend
Browse by category
AI & AgentsFrontend & DesignBackend & DataDev ToolsAutomationTesting & ReviewSecurityMonitoring & CloudDocs & Planning
Design & frontend
Design systemsAnimation & motionAccessibility (a11y)CSS & TailwindUI designUXDesign to codeshadcn/uiLanding pagesBest design skills
Most searched skills
find-skillscavemanfrontend-designbrainstormingsystematic-debuggingstop-slopemil-design-engui-ux-pro-maxkarpathy-guidelinesweb-design-guidelinesreact-best-practicesgrill-meimprovemicrosoft-foundryagent-browser
Browse all listings
All agent skillsAll MCP serversAll marketplacesAll plugins

This week in AI coding

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.