Architecture Diagram Generator

Quick Start:

Create HTML structure with flexible layout (single/double/triple column) → Define CSS styles for layers and grids → Add content with categorized panels → Use semantic colors for different layers.

Critical Rules

Rule 1: Direct HTML Embedding

IMPORTANT

Write architecture diagrams as direct HTML in Markdown.

NEVER

use code blocks (

```html

). The HTML should be embedded directly in the document without any fencing.

Rule 2: No Empty Lines in HTML Structure

CRITICAL

Do NOT add any empty lines within the HTML architecture diagram structure. Keep the entire HTML block continuous to prevent parsing errors.

Rule 3: Incremental Creation Approach

RECOMMENDED

Create architecture diagrams in multiple steps:

First

Create the overall framework (wrapper, sidebars, main structure) and define all CSS styles

Second

Add layer containers with titles

Third

Fill in components layer by layer

Fourth

Add detailed content and refinements

Rule 4: Flexible Layout Structure

Architecture diagrams can use flexible layouts based on complexity:

Single Column

Main content only (for simple architectures)

Two Column

Main content + one sidebar (left or right)

Three Column

Full layout with both sidebars (for complex systems)

Left Sidebar

Supporting systems (monitoring, operations, analytics)

Main Content

Core architecture layers (user, application, data, infrastructure)

Right Sidebar

Cross-cutting concerns (security, compliance, governance) Rule 5: Layer-Based Organization Each layer should have: Clear semantic meaning (User, Application, AI/Logic, Data, Infrastructure) Consistent color coding Grid-based layout for components Appropriate nesting for sub-components Rule 6: Color Semantics Use consistent semantic meaning for layers — the exact color palette varies by style (see examples). The standard semantic mapping: User Layer — user-facing interfaces and clients Application Layer — business logic and API services AI/Logic Layer — intelligence, rules, processing engines Data Layer — databases, caches, storage Infrastructure Layer — containers, networking, DevOps External Services — third-party APIs, cloud services (typically dashed border) Style Examples Choose a visual style that matches your project's tone and audience. Each example contains a complete, copy-ready HTML template.

Style File Suitable For 1 Steel Blue styles/steel-blue.md Consulting reports, banking/finance, government projects, RFP proposals 2 Ember Warm styles/ember-warm.md Retail/e-commerce, education platforms, lifestyle brands, cultural institutions 3 Neon Dark styles/neon-dark.md Tech talks, developer conferences, gaming platforms, cybersecurity dashboards 4 Stark Block styles/stark-block.md Creative studios, education platforms, indie developers, tech blogs 5 Ocean Teal styles/ocean-teal.md Travel platforms, logistics/shipping, green tech, weather/ocean projects 6 Dusk Glow styles/dusk-glow.md Social media, entertainment platforms, martech, content creation tools 7 Rose Bloom styles/rose-bloom.md Fashion/beauty, luxury brands, wedding platforms, premium memberships 8 Sage Forest styles/sage-forest.md Healthcare, agritech, clean energy, sustainability, bioinformatics 9 Frost Clean styles/frost-clean.md Design tools, developer docs, API references, minimalist SaaS 10 Indigo Deep styles/indigo-deep.md Brand-consistent systems, enterprise white papers, internal platforms 11 Pastel Mix styles/pastel-mix.md SaaS products, startups, general tech architecture, product docs 12 Slate Dark styles/slate-dark.md Enterprise dark mode, internal tools, developer dashboards Layout Examples Choose a layout structure that fits your architecture's complexity. Layouts use wireframe style (no colors) to focus on structural patterns. Combine any layout with any style above.

Layout

File

Best For

1

Three-Column

layouts/three-column.md

Complex systems with cross-cutting concerns and monitoring sidebars

2

Single Stack

layouts/single-stack.md

Simple services, microservice detail views, focused documentation

3

Left Sidebar

layouts/left-sidebar.md

Systems with operations/monitoring emphasis, DevOps-centric views

4

Right Sidebar

layouts/right-sidebar.md

Systems with security/compliance emphasis, governance-focused views

5

Pipeline

layouts/pipeline.md

Data pipelines, CI/CD flows, ETL processes, horizontal stage-based flows

6

Two-Column Split

layouts/two-column-split.md

Before/after comparisons, dual-system views, migration architecture

7

Dashboard

layouts/dashboard.md

System overviews with KPIs, monitoring dashboards, executive summaries

8

Grid Catalog

layouts/grid-catalog.md

Service catalogs, component libraries, equal-weight microservices

9

Banner + Center

layouts/banner-center.md

Gateway-centric architectures, user-facing systems with shared infrastructure

10

Nested Containers

layouts/nested-containers.md

Cloud deployments, VPC/network topology, environment isolation

11

Layer Layouts

layouts/layer-layouts.md

Per-layer layout patterns: grid, sub-group, product group, KPI, vertical stack, zones, inline pipeline, mixed width

12

Connectors

layouts/connectors.md

SVG overlay connectors between components: solid/dashed lines, arrows, labels, curved & orthogonal paths

Advanced Features

NOTE

These advanced components require additional CSS styles. Add these to your