architecture-diagramlisted

# 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: 1. **First**: Create the overall framework (wrapper, sidebars, main structure) and define all CSS styles 2. **Second**: Add layer containers with titles 3. **Third**: Fill in components layer by layer 4. **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, d