✈️ 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)

💡 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):

1
2
3
4
5

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

📌 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):

1
2
3
4

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

1. Paste the AI-generated code into the left editor panel
2. The right panel will instantly display the flowchart
3. 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

📌 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:

💡 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:

1. Open the axton-obsidian-visual-skills download page

2. Click the green Code button → Download ZIP

3. Unzip the file — you’ll see 3 folders

4. Open your C:\Users\yourusername\.claude\ folder (create a skills folder if it doesn’t exist)

5. Drag all 3 folders in

   Final structure:

   1 2 3 4 5 6 7

   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:

🖐️ 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:

1
2
3
4

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?

⚠️ 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:

1. Ensure access to Excalidraw.com (needs internet)
2. Or download Chinese font files from the Excalidraw official font library
3. Place them in your Obsidian vault under Excalidraw/CJK Fonts
4. 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

📌 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

🎯 Beginner Quick Start Roadmap

1
2
3
4
5
6
7
8
9

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!