Learn to Create Beautiful Tech Architecture Diagrams with AI

Tue, 31 Mar 2026 19:51:00 +0800

✈️ Learn to Create Beautiful Tech Architecture Diagrams with AI

👋 This guide is written for complete beginners who have never drawn an architecture diagram before. You don’t need design skills, you don’t need to write code — just know how to chat with AI.

What is a Tech Architecture Diagram and Why Should I Draw One?

Simply put, a tech architecture diagram helps you “draw out” the system in your head.

For example, if you’re building an app: what functional modules does it have? How do users interact with it? How does data flow? Drawing these relationships as a diagram is an architecture diagram.

The benefits are real:

✅ Clarify your own thinking — the process of drawing helps you organize your system design
✅ Communicate with coworkers effortlessly — a picture is worth a thousand words
✅ Impress in presentations — bosses and clients instantly understand how great your solution is
✅ AI draws for you, saving time and effort — with AI, you can get a decent diagram in minutes

🤔 Which Method Should a Beginner Choose? (Read This First)

Your Situation	Recommended Method	Difficulty
Just want the fastest way to get a good-looking image, no changes later	Method 1 (AI generates image directly)	⭐
Willing to take one more step for easier future edits	Method 2 (Mermaid.js code generation)	⭐⭐
Creating formal docs that need repeated edits and consistent style	Method 3 (Excalidraw local drawing)	⭐⭐⭐

💡 Beginner tip: Try Method 1 first to get a feel, then try Method 2. Save Method 3 for when you need to create formal documents.

Method 1: Let AI Draw a Picture for You (Simplest, Fastest)

⏱ Time: 2-3 minutes 🛠 Tool: Gemini 3.1 Pro (by Google, free)

How It Works in One Sentence

Ask your AI (like Gemini) to write a “visual description prompt” first, then feed that prompt to the AI’s image generation feature, and the AI draws the picture for you.

Step-by-Step Guide

Step 1: Ask AI to Write a “Visual Description Prompt”

Open Gemini and enter the following (copy and replace with your content):

Please write a prompt for generating a technical architecture diagram.
I want to draw an architecture diagram for [your system name, e.g., e-commerce website],
with the following modules: user interface, product management, order system, payment system, admin panel.
The data flow is: user places an order → order system calls payment → payment completion notifies product management to update inventory.
Please provide a detailed prompt in English suitable for text-to-image models. The style should be professional, clean, and visually appealing.

The AI will return a detailed English description.

Step 2: Feed the Prompt to AI for Image Generation

In Gemini (or other AI with image generation), select the image generation feature (like Gemini’s built-in Banana 2.0 model), paste the prompt from the previous step, and click generate.

Step 3: Done 🎉

The AI will output an image. If you’re not satisfied, regenerate until you’re happy.

Pros and Cons

✅ Pros	❌ Cons
Fastest — done in minutes	Hard to modify — system changes require full regeneration
Great visual quality, rich colors	Results can be inconsistent
No extra tools needed	Poor prompts lead to poor results

📌 Beginner Tips

Be detailed in your prompt — the more specific you are, the better the output. Don’t just say “draw an architecture diagram” — specify the modules and how they connect
Try multiple times — it’s normal to not get a perfect result on the first try
English prompts work better — most image generation models understand English better

Method 2: Let AI Generate Code, Then Render It into a Diagram (Recommended for Beginners)

⏱ Time: 3-5 minutes 🛠 Tool: Any AI (ChatGPT, Claude, Gemini) + Mermaid.js

How It Works in One Sentence

A flowchart is essentially code (Mermaid.js syntax). You ask AI to write this code, then use a free online tool to render it as an image. Want to change the diagram? Ask AI to modify the code and re-render.

Step-by-Step Guide

Step 1: Ask AI to Generate Mermaid Code

Open your preferred AI (ChatGPT, Claude, Gemini) and enter (copy and replace with your content):

Please use Mermaid syntax to draw an architecture diagram for an e-commerce system.
The system includes: user interface, product management, order system, payment system, admin panel.
Data flow: user places order → order system calls payment → payment completion notifies product management to update inventory.
Output pure Mermaid code using graph TD format.

The AI will return something like:

graph TD
    A[User Interface] --> B[Order System]
    B --> C[Payment System]
    B --> D[Product Management]
    C --> E[Payment Complete]
    E --> D

Step 2: Render the Code as an Image

Open this free website: mermaid.live

Paste the AI-generated code into the left editor panel
The right panel will instantly display the flowchart
Click the “Export” button in the top-right corner and choose PNG or SVG format (SVG is a vector format — it stays sharp at any size, great for formal documents)

Step 3: Want to Modify It? Ask AI to Change the Code

Paste the old code back to the AI and tell it what you want to change:

`1`	`Modify the code above to add a "Login Verification" module between "User Interface" and "Order System".`

After modification, go back to mermaid.live to paste and export.

Pros and Cons

✅ Pros	❌ Cons
Good image quality, professional look	Complex diagrams are still hard to modify later
Easier to modify than Method 1 — change code, re-render	Major architecture changes essentially require regeneration
No software installation needed — works in a browser

📌 Beginner Tips

Mermaid has fixed syntax — when asking AI, clearly say “use Mermaid syntax”
mermaid.live is a gem — paste and preview instantly, completely free, no account needed
Export as SVG for best results — vector format stays sharp at any size
Save your code — for future modifications, just send the old code to AI

Method 3: Let AI Generate Editable Architecture Diagrams (For Formal Documents)

⏱ Time: 10-15 minutes (first setup takes a bit longer) 🛠 Tools: An AI coding tool + Obsidian + a “Drawing Instruction Pack”

How It Works in One Sentence

This is the most professional method, but requires some initial setup. Once configured, you tell AI what to draw, and AI generates a draggable, editable architecture diagram file that you open in Obsidian — adjust anything you don’t like manually. Methods 1 and 2 produce “static” images; this method produces “living” ones.

🤔 First, Understand: What is a “Drawing Instruction Pack” (Skills)?

Skills are a set of “instruction manuals” that tell AI how to draw diagrams for you.

Without it: You say “draw an architecture diagram” — AI can only give you a text description
With it: AI knows how to generate an editable architecture diagram file

Think of it as installing a “diagram plugin” for your AI.

This instruction pack is called axton-obsidian-visual-skills — a free open-source project by Axton. It includes 3 drawing abilities:

Drawing Method	Generated File	Best For	Visual Style
Excalidraw	`.excalidraw` file	Flowcharts, mind maps, architecture diagrams	✏️ Hand-drawn style (like a whiteboard)
Mermaid	Text rules	Flowcharts, sequence diagrams, comparison charts	🎯 Professional business style
Canvas	`.canvas` file	Mind maps, knowledge organization	🎨 Colorful cards

💡 You can also use Draw.io — Draw.io is another free drawing tool with its own instruction pack. This guide uses Excalidraw as an example.

🔧 Prerequisite Installation (One-Time)

💡 Where Should This Instruction Pack Go?

AI tools look for these instruction files in a fixed location on your computer. Recommended location:

C:\Users\yourusername\.claude\skills\

🤔 What’s this path?

C:\Users\yourusername\ ← Your “user folder” — where software stores config files by default

\.claude\ ← Configuration folder created by Claude Code

skills\ ← Where drawing instructions are stored

Don’t know your username? Open File Explorer, type %USERPROFILE% in the address bar and press Enter — that’s the folder.

🤔 Why on C drive? Because your user folder is on C by default. This makes the instruction pack available to all projects on this machine.

This location works for both OpenCode and Claude Code — install once, use with both tools.

Other tools may use different locations, but beginners can just use the path above.

Installation Method 1: Let AI Install It for You (Recommended, Easiest)

Whether you use OpenCode, Claude Code, or Cursor, just say:

1
2
3

Help me download axtonliu/axton-obsidian-visual-skills from GitHub,
unzip it, and put the excalidraw-diagram, mermaid-visualizer, and obsidian-canvas-creator
folders into C:\Users\yourusername\.claude\skills\ directory.

AI will handle downloading, unzipping, and copying. Restart your tool when done.

💡 Replace “yourusername” with your actual username.

Installation Method 2: Manual Download

If your AI doesn’t support file operations:

Open the axton-obsidian-visual-skills download page
Click the green Code button → Download ZIP
Unzip the file — you’ll see 3 folders
Open your C:\Users\yourusername\.claude\ folder (create a skills folder if it doesn’t exist)

Drag all 3 folders in

Final structure:

C:\Users\yourusername\.claude\skills\
   ├── excalidraw-diagram\
   │     └── SKILL.md
   ├── mermaid-visualizer\
   │     └── SKILL.md
   └── obsidian-canvas-creator\
         └── SKILL.md

Installation Method 3: Claude Code Quick Install

If you use Claude Code (only works with it), type in the chat:

1
2

/plugin marketplace add axtonliu/axton-obsidian-visual-skills
/plugin install obsidian-visual-skills

Restart Claude Code after installation. Not supported by OpenCode or Cursor.

You’ll Also Need:

Software	Purpose	Cost
OpenCode / Claude Code / Cursor	Runs AI to generate diagram files	Free tiers available
Obsidian	View and manually adjust diagrams	Free
Obsidian Excalidraw Plugin	Edit Excalidraw files in Obsidian	Free (search “Excalidraw” in the plugin marketplace)

🖐️ Step-by-Step Guide

Step 1: Install Skills, Tell AI What to Draw

After installing Skills, type directly in OpenCode, Claude Code, or Cursor:

For Excalidraw hand-drawn style architecture diagram:

Use Excalidraw to draw an e-commerce system architecture diagram, including:
user interface, product management, order system, payment system, admin panel.
User places order → order system calls payment → payment completion updates inventory.
Use Chinese labels.

AI will automatically generate a .excalidraw file in the current directory.

🔍 Can’t find the file? Check the AI’s output — it usually tells you the save path.

For Mermaid business-style flowchart:

1
2

Convert this flow into a Mermaid diagram:
User visits homepage → browses products → adds to cart → submits order → pays online → completes transaction

AI will generate Mermaid code — copy it to mermaid.live to render.

For Canvas mind map:

1
2

Organize this article into an Obsidian Canvas mind map:
[paste your content]

AI will generate a .canvas file — open with Obsidian to see a colorful card layout.

Step 2: Manual Adjustments in Obsidian

Open Obsidian and drag the generated file in
For Excalidraw files (.excalidraw or .md), double-click to enter edit mode
Freely drag boxes, adjust arrows, modify text, change colors
Drag a new box to add a module, select and press Delete to remove

💡 This is the key advantage — you have a “living” architecture diagram.

Step 3 (Optional): Change Style with AI

After adjusting content and layout, screenshot it and send to Gemini (or other AI) with a reference image:

`1`	`Help me convert Image 1 to a hand-drawn style similar to Image 2, adding appropriate illustrations to help users understand`

(Prompt 1: Major changes — content layout may also be adjusted)

`1`	`Convert to a hand-drawn style similar to Image 2`

(Prompt 2: Minor changes — only colors and style, content layout stays the same)

🔍 What Diagrams Can Excalidraw Skills Draw?

Diagram Type	Best For
Flowchart	Business processes, operation steps, task sequences
Mind Map	Concept expansion, topic classification, brainstorming
Hierarchy Diagram	Organization structure, system layers, directory structure
Relationship Diagram	Dependencies, influence relationships, element interactions
Comparison Chart	Solution comparison, option analysis, before/after
Timeline	Event evolution, project milestones, version iterations
Matrix	2D classification, priority matrix, capability positioning
Free Canvas	Scattered ideas, initial drafts, free-form notes

⚠️ Common Issues & Solutions

Q: Chinese text doesn’t have a hand-drawn look? A: Excalidraw’s hand-drawn font (Excalifont) supports English by default; Chinese fonts need online loading. If Chinese shows as regular font:

Ensure access to Excalidraw.com (needs internet)
Or download Chinese font files from the Excalidraw official font library
Place them in your Obsidian vault under Excalidraw/CJK Fonts
Enable “Load Chinese fonts at startup” in Excalidraw plugin settings and restart Obsidian

Q: The generated diagram looks messy? A: That’s normal — AI-generated layouts aren’t always perfect. Just drag and adjust in Obsidian — that’s the biggest advantage of Method 3.

Q: Do I have to use Claude Code? A: No. These Skills work on OpenCode, Claude Code, and Cursor. OpenCode is compatible with Claude Code’s Skills format.

Pros and Cons

✅ Pros	❌ Cons
Edit anything — drag to adjust	First-time environment setup takes time
Not dependent on prompt quality — content can be manually refined	Longer workflow, more steps
Create a set of consistently styled document diagrams	Occasional text encoding or alignment issues
Works well with Obsidian for knowledge management
One Skills install gives three drawing methods

📌 Beginner Tips

Try Methods 1 and 2 first, then move to Method 3 when you’re comfortable
Skills installation is the key step — once installed, AI knows how to generate editable files
Excalidraw defaults to hand-drawn style, giving a亲切, approachable look
Obsidian’s Excalidraw plugin offers the best viewing and editing experience
Method 3’s greatest value is editability — once set up, future changes are just drag-and-drop
Check out the demo video on GitHub before deciding

🔧 Tools Summary

Tool	Purpose	Cost	Difficulty
Gemini	Chat + text-to-image generation	Free	Low
ChatGPT	Chat + text-to-image generation	Paid/Free	Low
OpenCode	AI coding tool, auto-loads `~/.claude/skills/`, supports parallel execution	Free	Medium
Claude Code	AI coding tool, supports Skills	API usage pricing	Medium
Cursor	AI coding tool	Free tier sufficient	Medium
mermaid.live	Convert Mermaid code to images	Free	Low
Excalidraw	Editable diagram tool	Free & open source	Low
Obsidian	Note-taking + Excalidraw plugin for editable diagrams	Free	Medium
axton-obsidian-visual-skills	AI drawing instruction pack (Excalidraw / Mermaid / Canvas)	Free & open source	Medium

🎯 Beginner Quick Start Roadmap

Day 1 → Try Method 1: Generate images with Gemini (just try it)
         ↓
Day 2 → Try Method 2: Generate flowcharts with Mermaid.js
         (Learn the "change code = change diagram" approach)
         ↓
Day 3 → Use Method 2 diagrams in your documents
         ↓
When needed → Explore Method 3: Install Skills + Obsidian + Excalidraw plugin
(No rush — Methods 1 and 2 are already sufficient)

💬 FAQ

Q: Are all these tools free? A: Gemini and mermaid.live are completely free. ChatGPT and Claude have free tiers — you only pay after using them up.

Q: Can I use generated images commercially? A: Yes, the architecture diagram is your own design — AI is just a tool to draw it.

Q: I’m a product manager/operations person, not a developer — can I still draw? A: Absolutely. Method 1 only requires typing, Method 2 only requires copy-pasting — no coding needed.

Q: Are there copyright issues with generated images? A: The copyright of tool-generated images belongs to you.

Q: Do Mac and Windows both work? A: All tools mentioned have web versions, so the OS doesn’t matter.

Q: What exactly is “axton-obsidian-visual-skills” in Method 3, do I have to install it? A: It’s an open-source AI drawing “instruction pack.” You can draw without it, but with it installed, AI can directly generate editable architecture diagram files instead of static images. If you only need occasional diagrams, Methods 1 and 2 are sufficient. If you need frequent edits and formal documents, highly recommended.

Q: What’s the difference between the 3 drawing methods (Excalidraw / Mermaid / Canvas) in Method 3? A: Simply put — Excalidraw is like a hand-drawn whiteboard, best for architecture diagrams; Mermaid has a professional business style, great for formal docs; Canvas is a colorful mind map tool for organizing ideas. Choose based on what you need.

Q: Does Method 3 require Claude Code? Can I use ChatGPT? A: These Skills are designed for AI coding tools that can manipulate local files — OpenCode, Claude Code, Cursor all work. ChatGPT’s web version can’t handle local files, so it won’t work.

Q: Where should the installed Skills be? How do I check? A: They go in ~/.claude/skills/. Check that directory — it should have excalidraw-diagram, mermaid-visualizer, and obsidian-canvas-creator folders. Restart your AI tool and it should recognize them.

📝 Final words: The most important thing about drawing architecture diagrams is clarifying what you want to express. AI is just a tool to turn your ideas into images. Start with the simplest Method 1 — the first step is the most important!

Excalidraw on Yanmu

Learn to Create Beautiful Tech Architecture Diagrams with AI

✈️ Learn to Create Beautiful Tech Architecture Diagrams with AI

What is a Tech Architecture Diagram and Why Should I Draw One?

🤔 Which Method Should a Beginner Choose? (Read This First)

Method 1: Let AI Draw a Picture for You (Simplest, Fastest)

How It Works in One Sentence

Step-by-Step Guide

Step 1: Ask AI to Write a “Visual Description Prompt”

Step 2: Feed the Prompt to AI for Image Generation

Step 3: Done 🎉

Pros and Cons

📌 Beginner Tips

Method 2: Let AI Generate Code, Then Render It into a Diagram (Recommended for Beginners)

How It Works in One Sentence

Step-by-Step Guide

Step 1: Ask AI to Generate Mermaid Code

Step 2: Render the Code as an Image

Step 3: Want to Modify It? Ask AI to Change the Code

Pros and Cons

📌 Beginner Tips

Method 3: Let AI Generate Editable Architecture Diagrams (For Formal Documents)

How It Works in One Sentence

🤔 First, Understand: What is a “Drawing Instruction Pack” (Skills)?

🔧 Prerequisite Installation (One-Time)

💡 Where Should This Instruction Pack Go?

Installation Method 1: Let AI Install It for You (Recommended, Easiest)

Installation Method 2: Manual Download

Installation Method 3: Claude Code Quick Install

You’ll Also Need:

🖐️ Step-by-Step Guide

Step 1: Install Skills, Tell AI What to Draw

Step 2: Manual Adjustments in Obsidian

Step 3 (Optional): Change Style with AI

🔍 What Diagrams Can Excalidraw Skills Draw?

⚠️ Common Issues & Solutions

Pros and Cons

📌 Beginner Tips

🔧 Tools Summary

🎯 Beginner Quick Start Roadmap

💬 FAQ