Architecture Diagram — Dark-themed SVG architecture/cloud/infra diagrams as HTML
معمارية Hermes Diagram — Dark-themed SVG architecture/cloud/infra diagrams as HTML
Start with meaning, then move to detail.
This lesson explains Architecture Diagram — Dark-themed SVG architecture/cloud/infra diagrams as HTML as part of Hermes internals and extension points. You will learn what it does, when it matters, and the smallest safe test that proves it works.
If you are new, do not memorize names. Focus on three questions: what problem does this solve, what access does it need, and how can you verify the result?
For practice, inspect the first example, identify its effects, run it on test data, and compare the result with the source claim.
For advanced readers, inspect Skill metadata, Reference: full SKILL.md, Scope, then verify failure modes and version compatibility.
Know Python, Git, and basic project structure before changing code.
A clear outcome before you read.
- Understand Architecture Diagram — Dark-themed SVG architecture/cloud/infra diagrams as HTML without assumed prior knowledge.
- Separate the source description from what still needs testing in your environment.
- Read the first command and identify its inputs and outputs before copying it.
Short definitions before the details.
- Skill
- An instruction bundle that teaches Hermes a repeatable workflow without necessarily adding an external service.
- Automation
- Running work later or repeatedly with explicit success and failure conditions.
Dark-themed SVG architecture/cloud/infra diagrams as HTML
What does the source say, and in what order?
- 01Skill metadata
Start here to understand the core idea or structure.
- 02Reference: full SKILL.md
Read this after the foundation, then connect it to the previous step.
- 03Scope
Read this after the foundation, then connect it to the previous step.
- 04Workflow
Read this after the foundation, then connect it to the previous step.
- 05Output Location
Read this after the foundation, then connect it to the previous step.
- 06Preview
Read this after the foundation, then connect it to the previous step.
- 07Design System & Visual Language
Read this after the foundation, then connect it to the previous step.
- 08Color Palette (Semantic Mapping)
Read this after the foundation, then connect it to the previous step.
- 09Typography & Background
Read this after the foundation, then connect it to the previous step.
- 10Technical Implementation Details
Finish here to verify the result and special cases.
Copy only after you understand the effect.
./[project-name]-architecture.html# macOS
open ./my-architecture.html
# Linux
xdg-open ./my-architecture.html## 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:* DasheRead the first command and identify its inputs and outputs before copying it.
Match every command to your installed Hermes version, review the files and accounts it can reach, and use non-sensitive data for the first test. If this explanation differs from the source, the official source wins.