--- title: "Generating Weird & Beautiful Architecture Diagrams with Claude" type: post url: "https://robotpaper.ai/generating-weird-beautiful-architecture-diagrams-with-claude/" canonical: "https://robotpaper.ai/generating-weird-beautiful-architecture-diagrams-with-claude/" markdown_url: "https://robotpaper.ai/generating-weird-beautiful-architecture-diagrams-with-claude.md" published: "2026-02-03T11:43:39.000+00:00" updated: "2026-10-22T21:57:56.000+00:00" tags: ["ClaudeCode"] author: "Roy Osherove" author_links: ["https://robotpaper.ai", "https://x.com/royosherove", "https://www.linkedin.com/in/osherove/", "https://forms.gle/jQSx5KoXvrVA1JCK7", "https://robotpaper.ai/about-roy.md"] description: "I had Claude Opus 4.5 generate draw.io XML architecture diagrams from a prompt, then asked for 35+ styles, from AWS re:Invent and blueprint to LEGO and ukiyo-e." usage: "Licensed under CC BY 4.0 — reuse, quote and adapt with attribution (Roy Osherove, link to the original post)." license: "https://creativecommons.org/licenses/by/4.0/" --- # Generating Weird & Beautiful Architecture Diagrams with Claude As an architect, I love doing diagrams. I think visually. In the past I loved using Miro, mermaid, and a bunch of others, but only recently (past week!) did I try and experiment with drawIO and its XM files format. This whole post is just about a fun late night experiment I did that I wanted to share. GenAI is removing a lot of the friction to experiment and I love it. Anyway, a common use case for me is that I want to describe and draw an architecture diagram for a proposed architecture. I'm not talking about the live version of doing it with people in the room, but when preparing for a meeting and coming up with a few different variations of diagrams. I love to tinker and I can spend hours on diagrams. I like them to look visually interesting and useful. At [my new job](https://robotpaper.ai/about/) we use a lot of diagramming tools including [DrawIO](https://www.drawio.com/) (local app), Which I've not used before. Last night I played around with it, and discovered it has a useful xml file format. What if I could generate that XML with claud? could I provide an architecture description and generate a nice diagram or will it look like crap? I was delighted to see claude opus 4.5 generated remarkably detailed, readable and professional looking diagrams for my purposes from prompts which I refined using claude as well. the process was: 1. describe architecture in my own words as a prompt, and ask it to: 2. generate a prompt that describes this architecture so that we can then feed this to an agent that will create a drawio xml file diagram from it. 3. Run the generated prompt in claude opus 4.5 and see what happens. The first time I tried this I asked it to create a diagram that describes the main architecture of a kubernetes cluster and its components. (very much like the sentence I just wrote here). To my surprise here's what I got: ![Kubernetes cluster architecture diagram generated by Claude as draw.io XML, showing control plane, worker nodes and networking](https://robotpaper.ai/content/images/2026/02/image-43.png) OK. This is... useful! And it only took a couple of minutes. The nice thing is, the better the instructions the better the diagram. Here's another diagram I generated with a more detailed prompt asking it to keep official AWS icons and diagram guidelines with a detailed diagram of some AWS services relating to moving to ECS or lambda functions: ![Detailed AWS architecture diagram with official AWS icons, VPC, availability zones and ECS/Lambda services, generated by Claude](https://robotpaper.ai/content/images/2026/02/image-45.png) I did not touch this diagram. This all came out of Claude opus in one shot from a prompt (that was very detailed, but was also generated from an architecture description) ## More Styles Please! Then i started asking myself as I was playing with the styling instructions - what other "styles" would it know to create if I asked it? So I asked Claude to give me 10-20 other styles (as crazy as possible) in which to generate the same 3-tier web application architecture with. ANd it came up with what you see below. SOme of them are not useful but very creative, and some of them are just weird. But I love that I can be creative with this style and this might be useful to others who read this. Think of it more like an art project. Each diagram below shows the exact same 3-tier web architecture - presentation, application, and data tiers - rendered in a completely different visual style. All generated by Claude as raw draw.io XML. No manual drawing required. We start with professional, production-ready styles and gradually descend into artistic madness. --- # **Professional & Clean** ## **AWS re:Invent (Featured Example)** ![3-tier web application architecture diagram in AWS re:Invent style with dark background and neon AWS service boxes, generated by Claude](https://robotpaper.ai/content/images/2026/02/image-7.png) This is what a "standard" architecture diagram looks like when generated by Claude asking it to use the AWS re:Invent style with official AWS iconography and conference presentation aesthetics. **What Claude generated:** - **Color scheme**: AWS orange (#FF9900) as primary accent on dark background (#161E2D) - **Service boxes**: Each AWS service has its icon-style box with colored accent bar - **Proper naming**: Amazon Route 53, Amazon CloudFront, AWS WAF, API Gateway, Application Load Balancer - **Infrastructure details**: VPC boundaries with CIDR notation, Availability Zones (us-east-1a, us-east-1b), private subnets - **Multi-AZ setup**: Primary and standby databases with sync indicators - **Service categories**: Color-coded legend (Compute, Database, Storage, Security, Networking) **The prompt was simply:** "Create a 3-tier architecture diagram in AWS re:Invent conference style" Claude understood that this meant dark backgrounds, orange accents, proper AWS service naming conventions, and the visual language of cloud architecture diagrams. --- ### **Corporate** ![3-tier web application architecture diagram in corporate/enterprise style, generated by Claude as draw.io XML](https://robotpaper.ai/content/images/2026/02/image-8.png) The safe choice: blue gradients, professional fonts, and the kind of diagrams that make it past any design review. Perfect for enterprise presentations. --- ### **Material Design** ![3-tier web application architecture diagram in Material Design style, generated by Claude as draw.io XML](https://robotpaper.ai/content/images/2026/02/image-9.png) Google's design language with paper-like layers, subtle shadows, and the signature FAB button. Clean, purposeful, and touchable. --- ### **Minimalist Flat** ![3-tier web application architecture diagram in minimalist flat style, generated by Claude as draw.io XML](https://robotpaper.ai/content/images/2026/02/image-10.png) Ultra-clean lines, no gradients, no shadows. Pure geometric shapes in a carefully curated color palette. Less is more. --- ### **Swiss Style** ![3-tier web application architecture diagram in Swiss style, generated by Claude as draw.io XML](https://robotpaper.ai/content/images/2026/02/image-11.png) International Typographic Style with Helvetica, mathematical grids, and ruthless minimalism. Form follows function. --- ### **Blueprint** ![3-tier web application architecture diagram in blueprint style, generated by Claude as draw.io XML](https://robotpaper.ai/content/images/2026/02/image-12.png) Technical drawing style on blue background with white lines, dimension markers, and engineering precision. Feels like real architecture. --- # **Tech Nostalgia** ### **Windows 95/98** ![3-tier web application architecture diagram in Windows 95/98 style, generated by Claude as draw.io XML](https://robotpaper.ai/content/images/2026/02/image-13.png) Classic gray UI with beveled 3D buttons, blue title bars, and that unmistakable teal desktop. Complete with "My Computer" icons and a helpful Clippy. --- ### **macOS Aqua** ![3-tier web application architecture diagram in macOS Aqua style, generated by Claude as draw.io XML](https://robotpaper.ai/content/images/2026/02/image-14.png) Early 2000s Apple glossiness with gel-like buttons, pinstripe textures, and those iconic traffic light window controls. So shiny you want to lick it. --- ### **Dark Neon** ![3-tier web application architecture diagram in dark neon style, generated by Claude as draw.io XML](https://robotpaper.ai/content/images/2026/02/image-15.png) Glowing components on pure black backgrounds. Each element pulses with electric color against the void. Modern and sleek. --- ### **TRON** ![3-tier web application architecture diagram in TRON style, generated by Claude as draw.io XML](https://robotpaper.ai/content/images/2026/02/image-16.png) (FYI red lines are actually moving in the drawio file rendering) Digital frontier with glowing cyan circuits on pure black. Light cycle trails and grid patterns straight from the MCP's domain. --- # **Elegant Artistic** ### **Art Deco** ![3-tier web application architecture diagram in Art Deco style, generated by Claude as draw.io XML](https://robotpaper.ai/content/images/2026/02/image-17.png) 1920s glamour with geometric sunbursts, gold and black color schemes, and the elegant symmetry of the Chrysler Building era. --- ### **Art Nouveau** ![3-tier web application architecture diagram in Art Nouveau style, generated by Claude as draw.io XML](https://robotpaper.ai/content/images/2026/02/image-18.png) Alphonse Mucha-inspired flowing organic lines, peacock feathers, and nature motifs. Elegant curves and botanical decorations wrap around each component. --- ### **Stained Glass** ![3-tier web application architecture diagram in stained glass style, generated by Claude as draw.io XML](https://robotpaper.ai/content/images/2026/02/image-19.png) Cathedral window aesthetic with bold black leading lines separating jewel-toned glass segments. Sacred and luminous. --- ### **Noir** ![3-tier web application architecture diagram in film noir style, generated by Claude as draw.io XML](https://robotpaper.ai/content/images/2026/02/image-20.png) Black and white film aesthetic with dramatic shadows, venetian blind patterns, and femme fatale mystery. Moody and cinematic. --- # **Cultural Heritage** ### **Japanese Ukiyo-e** ![3-tier web application architecture diagram in Japanese ukiyo-e style, generated by Claude as draw.io XML](https://robotpaper.ai/content/images/2026/02/image-21.png) Traditional woodblock print style with wave patterns, cherry blossoms, and Mount Fuji. Hokusai meets cloud architecture. --- ### **Samurai** ![3-tier web application architecture diagram in samurai style, generated by Claude as draw.io XML](https://robotpaper.ai/content/images/2026/02/image-22.png) Feudal Japanese aesthetic with katana motifs, clan mon emblems, and armor-inspired components. Honor and precision in every connection. --- ### **African Kente** ![3-tier web application architecture diagram in African kente style, generated by Claude as draw.io XML](https://robotpaper.ai/content/images/2026/02/image-23.png) Vibrant geometric patterns inspired by Ghanaian royal cloth. Gold, green, red, and black in intricate woven designs. --- ### **Aztec/Mayan** ![3-tier web application architecture diagram in Aztec/Mayan style, generated by Claude as draw.io XML](https://robotpaper.ai/content/images/2026/02/image-24.png) Ancient Mesoamerican temple aesthetics with stepped pyramids, serpent motifs, and hieroglyphic-style decorations. --- ### **Soviet Constructivism** ![3-tier web application architecture diagram in Soviet constructivist style, generated by Claude as draw.io XML](https://robotpaper.ai/content/images/2026/02/image-25.png) Bold red and black propaganda poster style with diagonal compositions, worker imagery, and revolutionary typography. Comrade Architecture! --- # **Thematic & Playful** ### **Chalkboard** ![3-tier web application architecture diagram in chalkboard style, generated by Claude as draw.io XML](https://robotpaper.ai/content/images/2026/02/image-26.png) Green or black board with hand-drawn chalk elements, eraser smudges, and "Today's Lesson" headers. Back to school vibes. --- ### **Newspaper** ![3-tier web application architecture diagram in newspaper style, generated by Claude as draw.io XML](https://robotpaper.ai/content/images/2026/02/image-27.png) "The Architecture Times" - halftone dots, woodcut illustrations, classified ad typography, and headline drama. Extra! Extra! --- ### **Comic Book** ![3-tier web application architecture diagram in comic book style, generated by Claude as draw.io XML](https://robotpaper.ai/content/images/2026/02/image-28.png) POW! BAM! Bold outlines, Ben-Day dots, speech bubbles, and dynamic action lines bring superhero energy to your diagrams. --- ### **Brutalist** ![3-tier web application architecture diagram in brutalist style, generated by Claude as draw.io XML](https://robotpaper.ai/content/images/2026/02/image-29.png) Raw concrete aesthetic with heavy black borders, monospace typography, and intentionally stark, uncomfortable design. Aggressively functional. --- # **Gaming & Pop Culture** ### **Minecraft** ![3-tier web application architecture diagram in Minecraft style, generated by Claude as draw.io XML](https://robotpaper.ai/content/images/2026/02/image-30.png) Blocky pixel aesthetic with grass, stone, and obsidian textures. Creeper faces, redstone circuits, and health hearts bring gaming charm. --- ### **LEGO** ![3-tier web application architecture diagram in LEGO style, generated by Claude as draw.io XML](https://robotpaper.ai/content/images/2026/02/image-31.png) Brick-built components with visible studs, instruction manual numbering, and that unmistakable click-together aesthetic. Ages 16+. --- ### **Fallout Pip-Boy** ![3-tier web application architecture diagram in Fallout Pip-Boy style, generated by Claude as draw.io XML](https://robotpaper.ai/content/images/2026/02/image-32.png) Green CRT phosphor glow with scan lines and retro-futuristic nuclear aesthetics. Vault-Boy mascot and S.P.E.C.I.A.L. stats for the wasteland. --- ### **Origami** ![3-tier web application architecture diagram in origami style, generated by Claude as draw.io XML](https://robotpaper.ai/content/images/2026/02/image-33.png) Folded paper aesthetic with visible creases, mountain/valley fold lines, and paper crane decorations. Delicate and geometric. --- # **Anime & Cute** ### **Studio Ghibli** ![3-tier web application architecture diagram in Studio Ghibli style, generated by Claude as draw.io XML](https://robotpaper.ai/content/images/2026/02/image-34.png) Miyazaki-inspired watercolor warmth with Totoro-like creatures, floating castles, and that magical sense of wonder. Pure whimsy. --- ### **Kawaii** ![3-tier web application architecture diagram in kawaii style, generated by Claude as draw.io XML](https://robotpaper.ai/content/images/2026/02/image-35.png) Japanese cute culture with blushing cheeks, sparkles, pastel colors, and components that look like they want to be your friend. UwU. --- # **Classical Art** ### **Impressionist** ![3-tier web application architecture diagram in impressionist style, generated by Claude as draw.io XML](https://robotpaper.ai/content/images/2026/02/image-36.png) Soft, blurry edges with pastel color dabs inspired by Monet's water lilies. Dreamy atmosphere with dappled light effects. Technical diagrams as fine art. --- ### **Baroque** ![3-tier web application architecture diagram in baroque style, generated by Claude as draw.io XML](https://robotpaper.ai/content/images/2026/02/image-37.png) Ornate cathedral grandeur with gold filigree, cherubs, and theatrical velvet curtains. Components become sacred reliquaries dripping with religious opulence. --- # **Retro Aesthetic Madness** ### **Vaporwave** ![3-tier web application architecture diagram in vaporwave style, generated by Claude as draw.io XML](https://robotpaper.ai/content/images/2026/02/image-38.png) A E S T H E T I C pink and cyan gradients, Greek statues, palm trees, and endless sunset grids. Welcome to the mallsoft architecture. --- ### **Cyberpunk Synthwave** ![3-tier web application architecture diagram in cyberpunk synthwave style, generated by Claude as draw.io XML](https://robotpaper.ai/content/images/2026/02/image-39.png) Neon-drenched cityscapes with hot pink and electric blue. Chrome text and laser grids against a midnight sky. The future is now. --- ### **Memphis Design** ![3-tier web application architecture diagram in Memphis design style, generated by Claude as draw.io XML](https://robotpaper.ai/content/images/2026/02/image-40.png) 1980s postmodern explosion with squiggles, confetti, clashing patterns, and deliberate "bad taste" that's actually brilliant. Maximum chaos. --- # **Abstract & Surreal** ### **Cubist** ![3-tier web application architecture diagram in cubist style, generated by Claude as draw.io XML](https://robotpaper.ai/content/images/2026/02/image-41.png) Picasso-style fragmented geometric shapes showing multiple perspectives simultaneously. Earthy tones with angular, overlapping forms. Is it a database or a guitar? --- ### **Surrealist** ![3-tier web application architecture diagram in surrealist style, generated by Claude as draw.io XML](https://robotpaper.ai/content/images/2026/02/image-42.png) Dali-inspired melting shapes and dreamlike imagery. Floating eyes, elephants on stilts, and checkerboard desert landscapes. Architecture from a fever dream. The most unhinged style in the collection. --- ## **Summary** --- *All diagrams generated by Claude Code Opus 4.5* *as raw draw.io XML. No manual drawing done. All styles were suggested by Claude Opus 4.5 in about 3 prompts asking it for crazy creative styles.* *This was a fun exercise!.* --- ## About the author **Roy Osherove** - Senior Solutions Architect at AWS working on AI for production and AI-driven development; author of The Art of Unit Testing and Elastic Leadership, with about 20 years of consulting and training on unit testing, TDD, team leadership and continuous delivery. ### Sites - [RobotPaper](https://robotpaper.ai/): This blog: AI patterns and anti-patterns, AI and coding agents, and engineering leadership. - [osherove.com](https://osherove.com): Roy's personal site. Author of The Art of Unit Testing and Elastic Leadership; consulting and training on unit testing, TDD, team leadership and continuous delivery, plus about 20 years of blog posts. - [The Art of Unit Testing](https://www.artofunittesting.com): The Art of Unit Testing, 3rd Edition (Manning): readable, maintainable, trustworthy unit tests, plus TDD workshops in C#, JavaScript, Java and Kotlin. - [5whys.com](https://www.5whys.com): Roy's writing on software team leadership: self-organizing teams, surviving chaos, learning mode and the Elastic Leadership model. - [Pipeline Driven](https://pipelinedriven.org): Continuous delivery and DevOps practices: build patterns, pipeline-friendly testing, DevOps metrics and enterprise DevOps. - [Elastic Leadership](https://www.elasticleadership.com): Elastic Leadership, Roy's framework for software team leaders (survival, learning and self-organizing modes). ### Social - X: [https://x.com/royosherove](https://x.com/royosherove) - LinkedIn: [https://www.linkedin.com/in/osherove/](https://www.linkedin.com/in/osherove/) ### Contact - Contact form: [https://forms.gle/jQSx5KoXvrVA1JCK7](https://forms.gle/jQSx5KoXvrVA1JCK7) ### License Content on robotpaper.ai is licensed under [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/): reuse, quote and adapt with attribution (Roy Osherove, link to the original post). More about Roy and his other sites and projects: [https://robotpaper.ai/about-roy.md](https://robotpaper.ai/about-roy.md)