[GitHub Global] Translate Vibe Coding 零基础教程/40 编程学习/05 AI 绘图指南.md to en
This commit is contained in:
yupi-translate-app[bot]
committed by
GitHub
GitHub
parent
a6a4995081
commit
f39b1dd65f
@@ -0,0 +1,326 @@
|
||||
# The Complete Guide to AI Drawing for Programmers
|
||||
|
||||
> Generate architecture diagrams in 1 minute, say goodbye to manual drawing
|
||||
|
||||
Hello, I'm Yupi the programmer.
|
||||
|
||||
As a programmer, drawing diagrams is a daily routine. Whether it's creating architecture diagrams for presentations, flowcharts for documentation, or mind maps for brainstorming, our ability to draw directly reflects our professionalism.
|
||||
|
||||
In the past, drawing diagrams required significant time and effort. A complex architecture diagram could take hours, with constant adjustments needed. Now, in the time it takes to drink a cup of water, AI can draw it for you, and the results are exceptionally professional!
|
||||
|
||||
Below, I will share **5 major AI drawing methods**, each with detailed step-by-step tutorials. These methods are increasingly powerful, so I recommend liking and saving this guide. Whether you need to generate prototypes, design posters, or draw architecture diagrams, flowcharts, UML class diagrams, etc., it will be a breeze~
|
||||
|
||||
⭐️ Recommended to watch the video version for more detailed demonstrations: https://bilibili.com/video/BV1DP7JzAE7k
|
||||
|
||||
## The Essence of AI Drawing
|
||||
|
||||
Before we begin, let's understand the essence of AI drawing: **essentially, it's about generating text code that various drawing tools can understand**, then importing this code into the corresponding tools for rendering.
|
||||
|
||||
This way, we can leverage AI's creativity and the tools' capabilities to freely generate images.
|
||||
|
||||
|
||||
|
||||
Although mainstream AI models and tools can achieve drawing functionality, I strongly recommend using **Cursor tool with Claude 4 model** for the best results.
|
||||
|
||||
Now, let's introduce several AI drawing methods:
|
||||
|
||||
## 1. Text Drawing
|
||||
|
||||
Text drawing is the most popular method among advanced programmers, allowing the generation of professional technical diagrams through simple text descriptions. Mainstream text drawing languages include **Mermaid** and **PlantUML**.
|
||||
|
||||
### Mermaid - The Most Popular Text Drawing Tool
|
||||
|
||||
Mermaid is currently the most popular text drawing tool, with simple and intuitive syntax, natively supported by platforms like GitHub and Yuque. Whether you need to draw software architecture diagrams, business flowcharts, database ER diagrams, or Git branch diagrams, Mermaid can handle it effortlessly.
|
||||
|
||||
Let's start by drawing a user login flowchart. Just provide AI with this prompt:
|
||||
|
||||
```plain
|
||||
Please use Mermaid syntax to draw a user login flowchart, including the following steps:
|
||||
1. User enters username and password
|
||||
2. Frontend validates the format
|
||||
3. Sends request to backend
|
||||
4. Backend verifies user information
|
||||
5. If verification is successful, generate and return a token
|
||||
6. If verification fails, return an error message
|
||||
7. Frontend redirects or displays an error based on the result
|
||||
```
|
||||
|
||||
Execute this in Cursor or other AI tools, and AI will generate Mermaid code. Then, you can copy the code into tools that support Mermaid, such as Yuque, Typora, or the online [Mermaid rendering website](https://mermaid-live.nodejs.cn/edit).
|
||||
|
||||
|
||||
|
||||
Many AI chat assistants have built-in Mermaid rendering tools, allowing you to see the results directly and download them:
|
||||
|
||||
|
||||
|
||||
Mermaid also supports various chart types, such as sequence diagrams, Gantt charts, pie charts, Git branch diagrams, and architecture diagrams.
|
||||
|
||||
### PlantUML - Professional UML Drawing Tool
|
||||
|
||||
PlantUML is another powerful text drawing tool, especially skilled in drawing UML diagrams, sequence diagrams, and system architecture diagrams. Its syntax is more professional and standardized compared to Mermaid, producing more refined diagrams.
|
||||
|
||||
Let's use AI + PlantUML to draw a classic order system class diagram:
|
||||
|
||||
```plain
|
||||
Please use PlantUML syntax to draw a class diagram for an order system, including:
|
||||
- Order class: orderID, userID, totalAmount, status, createTime
|
||||
- OrderItem class: productID, quantity, unitPrice
|
||||
- User class: userID, username, email
|
||||
- Product class: productID, name, price, stock
|
||||
Show the relationships between them
|
||||
```
|
||||
|
||||
AI will generate professional PlantUML code, which you can also view in Yuque's text drawing or the [PlantUML rendering website](https://www.plantuml.com/plantuml/uml/).
|
||||
|
||||
|
||||
|
||||
### How to Choose?
|
||||
|
||||
| Feature | **Mermaid** | **PlantUML** | **Graphviz** |
|
||||
| ------------ | ------------------------ | ----------------- | ------------------ |
|
||||
| **Chart Types** | Flowcharts, sequence diagrams, Gantt charts, etc. | Full UML series, architecture diagrams | Various charts, extremely flexible |
|
||||
| **Syntax Difficulty** | Simple and intuitive | Medium, UML standards | More complex |
|
||||
| **Ecosystem Support** | Native support by GitHub/GitLab | Requires plugin support | Widely supported |
|
||||
| **Use Cases** | Daily documentation illustrations | Professional architecture design | Complex network topologies |
|
||||
|
||||
My recommendation is to use Mermaid for daily tasks due to its simple syntax and good platform support; for professional UML diagrams, choose PlantUML.
|
||||
|
||||
## 2. Web Drawing
|
||||
|
||||
Web drawing is a very free and flexible drawing method. Essentially, it's "images as websites" — generating web code containing visual elements and rendering various images in the browser.
|
||||
|
||||
### Native Web Drawing
|
||||
|
||||
Using core web development technologies (HTML + CSS + JavaScript), we can generate various types of charts. We can also leverage third-party visualization libraries (like ECharts, D3.js, etc.) to enhance the effects.
|
||||
|
||||
For example, when data needs to be displayed, AI can use Apache ECharts and other visualization libraries to generate professional data dashboards:
|
||||
|
||||
```plain
|
||||
Please generate a data visualization dashboard page, displaying real-time data for an e-commerce platform:
|
||||
1. Page layout: dark-themed dashboard style
|
||||
2. Include the following charts: real-time sales, sales distribution by category, 24-hour sales trend, top 10 best-selling products, user geographic distribution
|
||||
3. Use ECharts with animation effects
|
||||
```
|
||||
|
||||
AI will generate a complete website with various charts, which is quite impressive~
|
||||
|
||||
|
||||
|
||||
You can directly take screenshots as needed to get images; you can also use tools like [Codepen](https://codepen.io/) to quickly share the generated website with others.
|
||||
|
||||
### SVG Vector Drawing
|
||||
|
||||
SVG is scalable vector graphics, which can be infinitely scaled without distortion, making it ideal for drawing UI materials, logos, graphic illustrations, technical architecture diagrams, flowcharts, etc.
|
||||
|
||||
Let's use SVG to draw a system architecture diagram:
|
||||
|
||||
```plain
|
||||
Please generate an SVG format system architecture diagram, showing a typical three-tier architecture:
|
||||
- Presentation layer: Web frontend, mobile App
|
||||
- Business layer: API server cluster (3 nodes)
|
||||
- Data layer: Master-slave database, Redis cache
|
||||
Requirements: Use different colors for each layer, add connecting lines to show data flow
|
||||
```
|
||||
|
||||
The SVG code generated by AI can be saved directly as an SVG file and opened in a browser.
|
||||
|
||||
|
||||
|
||||
## 3. Professional Drawing Tools - Draw.io
|
||||
|
||||
Combining AI with professional drawing tools can achieve a 1+1 > 2 effect.
|
||||
|
||||
The drawing tool I use most often is the free and open-source **draw.io**, which offers high flexibility, supports importing and exporting various formats, and has a rich library of shapes and templates.
|
||||
|
||||
There's also a popular open-source project [next-ai-draw-io](https://github.com/DayuanJiang/next-ai-draw-io), which allows generating and editing draw.io images directly through AI conversations, gaining 6k stars in just a few days!
|
||||
|
||||
|
||||
|
||||
This project supports online experience, allowing you to start drawing from scratch, such as drawing a flowchart to demonstrate how RAG works. AI will automatically generate Draw.io drawing code, and soon a beautiful flowchart is ready!
|
||||
|
||||
⭐️ Recommended to watch the video demonstration: https://bilibili.com/video/BV18NmnB4EeM
|
||||
|
||||
|
||||
|
||||
Then, you can use Draw.io's powerful drawing capabilities to manually modify any element or change the style. You can also use AI conversations to help modify, such as adding animated connecting lines, instantly elevating the sophistication.
|
||||
|
||||
|
||||
|
||||
### Generating Various Technical Diagrams
|
||||
|
||||
Also, architecture diagrams related to programmers' work:
|
||||
|
||||
```plain
|
||||
Prompt: Draw a microservices architecture diagram for an e-commerce platform
|
||||
```
|
||||
|
||||
|
||||
|
||||
UML Class Diagram:
|
||||
|
||||
```plain
|
||||
Prompt: Use a UML class diagram to show the design of the user management module
|
||||
```
|
||||
|
||||
|
||||
|
||||
ER Diagram:
|
||||
|
||||
```plain
|
||||
Prompt: Draw a database ER diagram for an online education platform
|
||||
```
|
||||
|
||||
|
||||
|
||||
Sequence Diagram:
|
||||
|
||||
```plain
|
||||
Prompt: Use a sequence diagram to show the interaction process of user login
|
||||
```
|
||||
|
||||
|
||||
|
||||
These are all handled effortlessly, saving you a lot of time and effort~
|
||||
|
||||
### Usage Tips
|
||||
|
||||
Some usage tips, such as using free icon libraries to enrich the drawing elements:
|
||||
|
||||
```plain
|
||||
Prompt: Use AWS icons to generate a CDN architecture diagram
|
||||
```
|
||||
|
||||
|
||||
|
||||
You can use native SVG animation tags to add scaling and path animations to the entire drawing:
|
||||
|
||||
```plain
|
||||
Prompt: Demonstrate a DDOS attack, use SVG's <animateMotion> and <animateTransform type="scale"> to add scaling and path animations
|
||||
```
|
||||
|
||||
|
||||
|
||||
You can also upload a sketch, such as a Mermaid flowchart generated by a text model, and let AI help replace it with a more aesthetically pleasing style:
|
||||
|
||||
```plain
|
||||
Prompt: Change to a rainbow theme color scheme, enlarge the font, use bold animated connecting lines
|
||||
```
|
||||
|
||||
The result is pretty good!
|
||||
|
||||
|
||||
|
||||
Finally, export it to various image or document formats, and enjoy~
|
||||
|
||||
|
||||
|
||||
### Local Deployment
|
||||
|
||||
Note that the official demo website may have limits and instability. For example, after using it several times in a row, I was denied access.
|
||||
|
||||
Therefore, I recommend downloading the open-source code locally and configuring your own large model according to the official documentation [AI Providers](https://github.com/DayuanJiang/next-ai-draw-io/blob/main/docs/ai-providers.md) to run it; or use Docker to start it with one click, and use it however you like.
|
||||
|
||||
|
||||
|
||||
## 4. Mind Maps
|
||||
|
||||
AI can help us quickly generate beautiful mind maps and export them to formats supported by professional mind mapping software.
|
||||
|
||||
The mind mapping software I use most often is XMind, which supports rich styles and themes.
|
||||
|
||||
I recommend letting AI generate **Markdown format mind maps**, as Markdown format is more universal and convenient for use in various documentation tools:
|
||||
|
||||
```plain
|
||||
Please generate a mind map about "Microservices Architecture Design" in Markdown format, using indentation to represent hierarchical relationships
|
||||
```
|
||||
|
||||
AI will generate Markdown format like this:
|
||||
|
||||
```markdown
|
||||
# Microservices Architecture Design
|
||||
|
||||
## Service Splitting Principles
|
||||
- Single Responsibility
|
||||
- Each service is responsible for only one business function
|
||||
- High cohesion, low coupling
|
||||
- Service Autonomy
|
||||
- Independent deployment
|
||||
- Independent technology selection
|
||||
```
|
||||
|
||||
Import this Markdown file directly into XMind, and you'll get a well-structured mind map!
|
||||
|
||||
|
||||
|
||||
## 5. AI Drawing Tips
|
||||
|
||||
### Tip 1: Provide Example Diagrams for AI to Imitate
|
||||
|
||||
When you see a great diagram and want to draw a similar one, you can screenshot it and let AI generate a similar diagram.
|
||||
|
||||
For example, imitate the system architecture diagram I provided:
|
||||
|
||||
```plain
|
||||
Based on the system architecture diagram I provided, generate a similar style and structure in draw.io format, but change the content to:
|
||||
- An online education platform architecture
|
||||
- Keep the original color scheme and layout style
|
||||
```
|
||||
|
||||
The result is quite similar, isn't it?
|
||||
|
||||
|
||||
|
||||
### Tip 2: Screenshot Annotation for Precise Modifications
|
||||
|
||||
If you're not satisfied with some parts of the AI-generated diagram, you can screenshot it, draw red circles around the areas you want to modify, and tell AI how to modify them.
|
||||
|
||||
|
||||
|
||||
### Tip 3: Configure Professional System Presets
|
||||
|
||||
The effect of AI generation largely depends on the input prompts, so to make AI draw more professional diagrams, configuring a good system prompt is crucial.
|
||||
|
||||
In Cursor, we can set project-level Rules to ensure AI follows your drawing standards.
|
||||
|
||||
Here's a professional architecture diagram preset for reference:
|
||||
|
||||
```plain
|
||||
# Technical Architecture Diagram Expert
|
||||
|
||||
You are a senior system architect and technical chart design expert.
|
||||
|
||||
## Drawing Principles
|
||||
1. All text must be in Simplified Chinese
|
||||
2. Keep diagrams concise and clear, avoid over-complexity
|
||||
3. Use standard technical icons and symbols
|
||||
4. Professional color scheme, clear hierarchy
|
||||
|
||||
## Color Scheme
|
||||
- Presentation layer: Blue tones (#3498db)
|
||||
- Business layer: Green tones (#2ecc71)
|
||||
- Data layer: Orange tones (#e67e22)
|
||||
```
|
||||
|
||||
Configure this preset in Cursor Rules, and AI will generate images according to the rules, ensuring consistency and professionalism.
|
||||
|
||||
## Final Words
|
||||
|
||||
By now, I believe you've mastered various AI drawing techniques! From simple text drawing to complex dynamic charts, AI can handle it all effortlessly.
|
||||
|
||||
Not only does it save us a lot of time, but mom no longer has to worry about my ugly drawings!
|
||||
|
||||
If you found this guide helpful, don't forget to like and save it. For those interested in programming and AI, follow Yupi. My free and open-source [AI Knowledge Base](https://ai.codefather.cn) also aggregates a wealth of AI knowledge and tutorials, hoping to be helpful.
|
||||
|
||||
|
||||
|
||||
## Recommended Resources
|
||||
|
||||
1) Yupi AI Navigation Website: [AI Resource Collection, Latest AI News, Free AI Tutorials](https://ai.codefather.cn)
|
||||
|
||||
2) Programming Navigation Learning Circle: [Learning Paths, Programming Tutorials, Practical Projects, Job Hunting Guide, Q&A](https://www.codefather.cn)
|
||||
|
||||
3) Programmer Interview Cheatsheet: [Internship/Campus/Social Recruitment High-Frequency Questions, Enterprise Real Questions Analysis](https://www.mianshiya.com)
|
||||
|
||||
4) Programmer Resume Maker: [Professional Templates, Rich Examples, Direct to Interview](https://www.laoyujianli.com)
|
||||
|
||||
5) 1-on-1 Mock Interview: [Essential for Internship/Campus/Social Recruitment Interviews to Get Offers](https://ai.mianshiya.com)
|
||||
Reference in New Issue
Block a user