mirror of
https://github.com/NousResearch/hermes-agent.git
synced 2026-04-26 01:01:40 +00:00
55ce76b372
Port of Cocoon AI's architecture-diagram-generator (MIT) as a Hermes skill. Generates professional dark-themed system architecture diagrams as standalone HTML/SVG files. Self-contained output, no dependencies. - SKILL.md with design system specs, color palette, layout rules - HTML template with all component types, arrow styles, legend examples - Fits alongside excalidraw in creative/ category Source: https://github.com/Cocoon-AI/architecture-diagram-generator
129 lines
4.9 KiB
Markdown
129 lines
4.9 KiB
Markdown
---
|
|
name: architecture-diagram
|
|
description: Generate professional dark-themed system architecture diagrams as standalone HTML/SVG files. Self-contained output with no external dependencies. Based on Cocoon AI's architecture-diagram-generator (MIT).
|
|
version: 1.0.0
|
|
author: Cocoon AI (hello@cocoon-ai.com), ported by Hermes Agent
|
|
license: MIT
|
|
dependencies: []
|
|
metadata:
|
|
hermes:
|
|
tags: [architecture, diagrams, SVG, HTML, visualization, infrastructure, cloud]
|
|
related_skills: [excalidraw]
|
|
---
|
|
|
|
# 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.
|
|
|
|
Based on [Cocoon AI's architecture-diagram-generator](https://github.com/Cocoon-AI/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:
|
|
```bash
|
|
# 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 Type | Fill (rgba) | Stroke (Hex) |
|
|
| :--- | :--- | :--- |
|
|
| **Frontend** | `rgba(8, 51, 68, 0.4)` | `#22d3ee` (cyan-400) |
|
|
| **Backend** | `rgba(6, 78, 59, 0.4)` | `#34d399` (emerald-400) |
|
|
| **Database** | `rgba(76, 29, 149, 0.4)` | `#a78bfa` (violet-400) |
|
|
| **AWS/Cloud** | `rgba(120, 53, 15, 0.3)` | `#fbbf24` (amber-400) |
|
|
| **Security** | `rgba(136, 19, 55, 0.4)` | `#fb7185` (rose-400) |
|
|
| **Message Bus** | `rgba(251, 146, 60, 0.3)` | `#fb923c` (orange-400) |
|
|
| **External** | `rgba(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
|
|
|
|
```svg
|
|
<!-- 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
|
|
```html
|
|
<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.
|