Neura Market Architecture Diagram Generator Reference

Overview

This tool generates professional, dark-themed technical architecture diagrams as standalone HTML files with inline SVG graphics. The output is a single self-contained file that renders correctly in any modern browser without external tools, API keys, or rendering libraries. It works fully offline once the file is saved.

When to Use

Use this generator for any technical infrastructure subject that fits a dark, grid-backed aesthetic. Suitable scenarios include:

• Software system architecture (frontend/backend/database layers)
• Cloud infrastructure (VPC, regions, subnets, managed services)
• Microservice or service-mesh topology
• Database plus API maps and deployment diagrams
• General SVG diagram fallback when no specialized skill exists

When Not to Use

This tool is not suitable for:

• Physics, chemistry, math, biology, or other scientific subjects
• Physical objects (vehicles, hardware, anatomy, cross-sections)
• Floor plans, narrative journeys, or educational/textbook-style visuals
• Hand-drawn whiteboard sketches (use excalidraw instead)
• Animated explainers (use an animation skill instead)

If a more specialized skill is available for the subject, prefer that.

Capabilities

The generator produces a single self-contained HTML file with inline CSS and SVG. Key capabilities include:

• Component rendering: Rounded rectangles with semantic color mapping for frontend, backend, database, AWS/cloud, security, message bus, and external components
• Double-rect masking: Prevents arrow show-through behind semi-transparent fills
• Arrow z-order: Arrows are drawn early in the SVG (after the grid) to ensure correct z-order behind components
• Arrow styles: Supports standard, dashed, and curved arrow styles
• Security flow lines: Dashed rose color lines for security flows
• Boundary boxes: Security group boundaries (dashed 4,4, rose) and region boundaries (large dashed 8,4, amber, rx="12")
• Legend placement: Placed outside all boundary boxes, at least 20px below the lowest boundary Y-coordinate
• Header: Includes title, pulsing dot indicator, and subtitle
• Summary cards: Grid of three cards below the diagram
• Footer: Minimal metadata
• Typography: JetBrains Mono font from Google Fonts
• Background: Slate-950 (#020617) with a subtle 40px grid pattern
• Animations: Pure CSS animations (e.g., pulsing dots), no JavaScript
• File saving: Saves to user-specified path or defaults to ./[project-name]-architecture.html
• Open commands: Provides open commands for macOS and Linux

Prerequisites

• Ability to write files to disk (write_file capability)
• Access to the full HTML template via skill_view(name="architecture-diagram", file_path="templates/template.html") for structural reference
• User must have a modern web browser to view the output

Procedure: Generate Architecture Diagram

Follow these steps in order:

1. User describes system architecture: Provide details about components, connections, and technologies.
2. Generate the HTML file: The tool produces the HTML following the design system.
3. Save with write_file: Save to a .html file (e.g., ~/architecture-diagram.html).
4. Open in any browser: The file works offline with no dependencies.

Default Output Path

If no output_path is specified, the file saves to ./[project-name]-architecture.html in the current working directory.

Opening the File

After saving, use one of these commands:

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

Parameters

Parameter	Meaning	Required
output_path	File path to save the generated HTML diagram; defaults to ./[project-name]-architecture.html in the current working directory	No
project_name	Used to construct default filename if output_path not specified	No

Design System

Background Grid

The background uses a 40px grid pattern defined inline in the 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>

Component Colors

Each component type uses a specific rgba fill and matching border color:

Component Type	Fill	Border
Frontend	rgba(8, 51, 68, 0.4)	#22d3ee
Backend	rgba(6, 78, 59, 0.4)	#34d399
Database	rgba(76, 29, 149, 0.4)	#a78bfa
AWS/Cloud	rgba(120, 53, 15, 0.3)	#fbbf24
Security	rgba(136, 19, 55, 0.4)	#fb7185
Message Bus	rgba(251, 146, 60, 0.3)	#fb923c
External	rgba(30, 41, 59, 0.5)	#94a3b8

Component Dimensions

• Standard component height: 60px
• Large components: 80-120px
• Minimum vertical gap between components: 40px
• Corner radius: rx="6"

Background Color

The diagram background is #020617 (slate-950). Component backgrounds use #0f172a as the base fill behind the semi-transparent overlay.

Summary Cards

Below the diagram, three summary cards are rendered using this structure:

<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>

Constraints and Caveats

• Message buses must be placed in the gap between services, not overlapping them
• Legend must be placed outside all boundary boxes; calculate lowest Y-coordinate of all boundaries and place legend at least 20px below it
• All CSS and SVG must be inline (except Google Fonts)
• No JavaScript allowed; use pure CSS for animations
• Must render correctly in any modern web browser
• Based on Cocoon AI's architecture-diagram-generator (MIT)

Failure Modes

• Diagram may not render correctly if SVG syntax is malformed
• Legend may overlap boundaries if Y-coordinate calculation is incorrect
• Arrows may show through semi-transparent fills if double-rect masking is omitted
• Components may overlap if spacing/layout logic is not followed
• File may not open if saved with incorrect extension or path

Template Reference

For structural reference, the full HTML template is available at skill_view(name="architecture-diagram", file_path="templates/template.html"). This 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.