How to Supercharge Diagram Creation with AI: From Text Prompts to draw.io

Introduction

This article shows how to use large language models (LLMs) to produce technical diagrams—flowcharts, architecture sketches, and SVG graphics—in just a few minutes. By leveraging text‑to‑diagram capabilities, the generated images remain editable, ensuring high quality and easy refinement.

Choosing the AI Model

The author compared several models (ChatGPT, DeepSeek, Claude, Grok) and settled on Claude‑3.7‑sonnet in Thinking mode via the Cursor extension because it offers a good balance of cost (free) and output quality.

Text‑Based Diagram Languages

Within the Chinese knowledge base platform Yuque , four native text diagram syntaxes are supported:

PlantUML – strong customisation, suited for architecture design.

Mermaid – low learning curve, good for project documentation.

Flowchart – very easy to use, ideal for simple processes.

Graphviz – high customisation, best for complex, non‑linear diagrams.

These languages can be invoked by typing /文本 in Yuque, which opens a dialog where the desired language is selected.

Example: Login Flow Diagram

A sample login process is described in plain text, then the AI is asked to render it with each of the four languages. The resulting images (PlantUML, Mermaid, Flowchart, Graphviz) demonstrate the visual differences. PlantUML produces a sequence diagram, while the others show more limited expressiveness.

[浏览器]
   ↓
[输入账号密码，点击登录]
   ↓
[前端加密（可选）]
   ↓
[后端 API 接收]
   ↓
[限流校验（Sentinel）]
   ↓
[请求 Redis 查询用户缓存 → 若未命中 → 查询数据库]
   ↓
[比对密码（哈希比对）]
   ↓
[校验用户状态（是否禁用、是否冻结、是否实名认证）]
   ↓
[登录成功 → 更新登录日志 → 生成 Token（JWT 或 Session）]
   ↓
[Token 存储到 Redis + 绑定设备/客户端信息]
   ↓
[返回 Token 给前端，前端持久化（LocalStorage / Cookie）]

Obsidian Canvas

Obsidian’s Canvas feature can visualise relationships between markdown notes, acting as a mind‑map. The author demonstrates importing multiple documents, adjusting the layout, and embedding full article content as child nodes.

SVG as a Text‑Based Graphic Format

SVG files are XML‑based vector graphics, making them another form of text‑to‑image. The article provides a detailed prompt for an “SVG poster design expert” that includes style, technical constraints, and performance considerations. This prompt can be fed to the AI to generate ready‑to‑use SVG code.

# SVG海报设计专家Prompt

你是一名专业的图形设计师和SVG开发专家，对视觉美学和技术实现有极高造诣。
...
请根据提供的主题或内容，创建一个独特、引人注目且技术精湛的SVG海报。

Configuring the Prompt in Cursor

Open Cursor settings.

Add a project‑level rule.

Paste the SVG prompt and set the rule to “Always” (or another preferred option).

When generating images, providing a reference diagram helps the model mimic the desired style. Screenshots can be pasted directly into Cursor for visual guidance.

draw.io Integration

draw.io is an open‑source diagram editor that accepts XML input. By letting the AI output the XML representation of a diagram (e.g., the login flow), users can paste it into draw.io and instantly obtain a editable diagram. A tip: use the “copy code” button in the AI output to avoid rendering issues.

Overall, the workflow consists of:

Write a concise textual description of the desired diagram.

Choose the appropriate text‑diagram language (PlantUML, Mermaid, etc.).

Prompt the AI (Claude‑3.7‑sonnet via Cursor) with the description and language.

Review the generated image, make minor edits in the target tool (Obsidian Canvas, draw.io, or an SVG editor).

Conclusion

The author shares four AI‑driven diagram techniques, emphasizing speed, editability, and the ability to fine‑tune results. Readers are encouraged to experiment with the presented prompts and tools to streamline their technical documentation workflow.