Design: Other-to-Architecture

Goal: Bridge the gap between “requirements” and “technical design” instantly. We use AI to visualize systems, identify security threats, and validate compliance before writing code.

The Workflow

graph TD
    Spec["PRD / User Stories"] -->|Feed into AI| Architect["AI Architect"]
    Architect -->|Generate Code| Mermaid["Mermaid / PlantUML"]
    Mermaid -->|Render| Diagram["Visual Architecture"]
    Architect -->|Analyze| Threat["Threat Model (STRIDE)"]
    Architect -->|Analyze| Data["Data Flow Diagram"]
    
    style Spec fill:#e1f5fe
    style Diagram fill:#fff9c4
    style Threat fill:#ffcdd2

Tools Used

• Diagramming: ChatGTP / Claude (generating syntax), Mermaid Live / Draw.io.
• Design: Figma AI (UI generation).
• Security: Microsoft Threat Modeling Tool (fed by AI inputs).

Step-by-Step Implementation

1. Context Injection: Provide the PRD from the previous stage to the AI.
2. Visual Generation: Ask the AI to generate a C4 Component diagram using Mermaid.js syntax.
3. Data Flow Analysis: Ask the AI to trace purely the movement of sensitive data (PII) through the proposed system.
4. Security Review: Run a “STRIDE” analysis prompt against the architecture.
5. Compliance Check: Ask “Does this architecture violate GDPR laws regarding data locality?”

Example Scenario: Microservices Architecture

Input (Context):

“We are building the VIP discount service. It needs to read user data from the ‘User Service’ (SQL) and update the ‘Cart Service’ (Redis). It must be high performance.”

1. Generating the Architecture

Prompt:

“Create a C4 Component diagram in Mermaid syntax for the VIP Discount Service. Show interactions with User Service, Cart Service, and the Frontend.”

AI Output (Rendered):

graph TD
    %% Nodes
    customer((Customer))
    
    subgraph VIP [VIP Discount System]
        direction TB
        webapp["Web App\n(React)"]
        vip_svc["VIP Service\n(Go/Node)"]
        user_db[("User DB\nPostgreSQL")]
        cart_cache[("Cart Cache\nRedis")]
    end

    %% Relationships
    customer -->|Uses| webapp
    webapp -->|Request Discount API| vip_svc
    vip_svc -->|Reads Tier| user_db
    vip_svc -->|Updates Total| cart_cache

    %% Styling
    style customer fill:#e1f5fe,stroke:#01579b
    style webapp fill:#fff9c4,stroke:#fbc02d
    style vip_svc fill:#e8f5e9,stroke:#2e7d32
    style user_db fill:#eeeeee,stroke:#9e9e9e
    style cart_cache fill:#eeeeee,stroke:#9e9e9e

2. Generating Security Checklist

Prompt:

“Perform a security review on this architecture using the STRIDE methodology. Focus on the Redis connection.”

AI Output:

Tampering: If Redis is unencrypted, an attacker could alter the cart total manually.

• Mitigation: Enable TLS for Redis connections.

Information Disclosure: User tier data might be logged in cleartext.

• Mitigation: Enforce strict log redaction for PII.

Implementation Guidelines

• Iterate on Syntax: AI often makes small syntax errors in Mermaid. Use the “Repair” prompt: “This code threw a syntax error. Fix it.”
• Visual Validation: Don’t trust the code blindly. Render it and have a human architect confirm the arrows point the right way.
• Include Non-Functionals: Explicitly ask the AI to design for “High Availability” or “Low Latency” to see how the diagram changes (e.g., adding caches or load balancers).

Key Pitfalls

Complexity Bias

AI tends to over-engineer. It might suggest Kubernetes and Kafka for a simple To-Do app. Always challenge it: “Can we do this more simply?”

Key Takeaways

1. Visualization is Cheap: You can generate 5 different architectural options in 5 minutes.
2. Security First: AI makes threat modeling accessible to every developer, not just security experts.
3. Living Documentation: Keep the Mermaid code in your repo. It updates easier than a PNG file.