如何使用 AI 给你画图

如何使用 AI 给你画图

技术方案中最耗时的部分往往是画图，但画图的需求不仅限于技术人员——财务做报表、运营做宣传图、产品画路线图、管理层做战略汇报……都离不开"画图"这件事。

本文介绍三种实用的 AI 画图技巧，覆盖从简单流程图到复杂定制化图形的各类场景，无需任何设计基础。

以下所有案例均由 Claude 4.6 Opus 模型生成。每个案例附有完整提示词，可直接复制使用。

---

一、Mermaid：快速、标准的文本图表

• 简介： Mermaid 是一种通过文本和代码生成图表的标记语言。可以在 Mermaid Live Editor 中免费体验。它能覆盖流程图、ER 图、时序图、UML 图、甘特图等绝大多数常用图表。

• 优势：

  • 高效沟通： 特别适合绘制流程图、甘特图、组织架构图等标准图表，能快速将复杂关系讲清楚。
  • 易于维护： 格式简单，代码即图。当逻辑变化时，只需修改几行文字即可更新图表，非常适合敏捷迭代。

• 局限： 样式相对朴素，不适合用于需要精美视觉效果的正式汇报场合。

• 使用方式： 将需求描述提供给 AI，让它直接输出 Mermaid 代码，粘贴到 Mermaid Live Editor 即可渲染。

• 推荐人群： 所有人。特别适合项目经理、开发、HR、行政等需要快速出图的角色。

案例 1：报销审批流程图（财务/行政）

提示词：

帮我用 Mermaid 生成一个企业报销审批的流程图。大概流程是：员工提交报销 → 按金额走不同审批层级（5000 以下主管直接批，5000 以上要总监审批）→ 财务审核单据 → 出纳打款。每个环节都要有驳回退回的路径。不同节点用不同颜色区分一下，谢谢

AI 生成的 Mermaid 代码（粘贴到 Mermaid Live Editor 即可渲染）：

flowchart TD
    A["员工提交报销申请"] --> B{"金额 ≤ 5000元?"}
    B -->|"是"| C["直属主管审批"]
    B -->|"否"| D["直属主管审批"]
    D --> E["部门总监审批"]
    C --> F{"审批通过?"}
    E --> G{"审批通过?"}
    F -->|"驳回"| H["退回修改"]
    G -->|"驳回"| H
    H --> A
    F -->|"通过"| I["财务审核"]
    G -->|"通过"| I
    I --> J{"单据合规?"}
    J -->|"不合规"| K["退回补充材料"]
    K --> A
    J -->|"合规"| L["出纳打款"]
    L --> M["员工确认收款"]
    M --> N["流程结束"]

    style A fill:#4A90D9,stroke:#357ABD,color:#fff
    style B fill:#F5A623,stroke:#D4920E,color:#fff
    style C fill:#7B68EE,stroke:#6A5ACD,color:#fff
    style D fill:#7B68EE,stroke:#6A5ACD,color:#fff
    style E fill:#7B68EE,stroke:#6A5ACD,color:#fff
    style F fill:#F5A623,stroke:#D4920E,color:#fff
    style G fill:#F5A623,stroke:#D4920E,color:#fff
    style H fill:#E74C3C,stroke:#C0392B,color:#fff
    style I fill:#2ECC71,stroke:#27AE60,color:#fff
    style J fill:#F5A623,stroke:#D4920E,color:#fff
    style K fill:#E74C3C,stroke:#C0392B,color:#fff
    style L fill:#2ECC71,stroke:#27AE60,color:#fff
    style M fill:#2ECC71,stroke:#27AE60,color:#fff
    style N fill:#1ABC9C,stroke:#16A085,color:#fff

---

案例 2：公司组织架构图（HR/管理层）

提示词：

请帮我画一个公司的组织架构图，用 Mermaid 格式。我们公司 CEO 下面有四个高管：CTO 管技术（前端、后端、数据三个部门）、CPO 管产品（产品设计和用户体验）、CFO 管财务（财务和法务）、COO 管运营（运营、客户成功、市场）。不同条线用不同颜色区分一下，谢谢

AI 生成的 Mermaid 代码：

graph TD
    CEO["🏢 CEO<br/>首席执行官"]
    CEO --> CTO["💻 CTO<br/>首席技术官"]
    CEO --> CPO["📋 CPO<br/>首席产品官"]
    CEO --> CFO["💰 CFO<br/>首席财务官"]
    CEO --> COO["⚙️ COO<br/>首席运营官"]

    CTO --> FE["前端开发部"]
    CTO --> BE["后端开发部"]
    CTO --> DATA["数据平台部"]

    CPO --> PD["产品设计部"]
    CPO --> UX["用户体验部"]

    CFO --> FIN["财务管理部"]
    CFO --> LEGAL["法务合规部"]

    COO --> OPS["运营部"]
    COO --> CS["客户成功部"]
    COO --> MKT["市场营销部"]

    style CEO fill:#1a1a2e,stroke:#1a1a2e,color:#fff
    style CTO fill:#4A90D9,stroke:#357ABD,color:#fff
    style CPO fill:#9B59B6,stroke:#8E44AD,color:#fff
    style CFO fill:#2ECC71,stroke:#27AE60,color:#fff
    style COO fill:#E67E22,stroke:#D35400,color:#fff
    style FE fill:#85C1E9,stroke:#5DADE2,color:#1a1a2e
    style BE fill:#85C1E9,stroke:#5DADE2,color:#1a1a2e
    style DATA fill:#85C1E9,stroke:#5DADE2,color:#1a1a2e
    style PD fill:#D7BDE2,stroke:#BB8FCE,color:#1a1a2e
    style UX fill:#D7BDE2,stroke:#BB8FCE,color:#1a1a2e
    style FIN fill:#ABEBC6,stroke:#82E0AA,color:#1a1a2e
    style LEGAL fill:#ABEBC6,stroke:#82E0AA,color:#1a1a2e
    style OPS fill:#F5CBA7,stroke:#F0B27A,color:#1a1a2e
    style CS fill:#F5CBA7,stroke:#F0B27A,color:#1a1a2e
    style MKT fill:#F5CBA7,stroke:#F0B27A,color:#1a1a2e

---

案例 3：项目排期甘特图（项目经理/开发）

提示词：

帮我用 Mermaid 画一个 Q2 新功能上线的甘特图。大概有这几个阶段：需求调研和 PRD 评审、交互和视觉设计、前后端开发（可以并行）、联调测试、灰度发布到全量上线。从 4 月 1 号开始，需求阶段已经做完了，设计阶段正在进行中，谢谢

AI 生成的 Mermaid 代码：

gantt
    title Q2 新功能上线计划
    dateFormat  YYYY-MM-DD
    axisFormat  %m/%d

    section 需求阶段
    需求调研与分析       :done, req1, 2026-04-01, 7d
    PRD 评审与确认       :done, req2, after req1, 3d

    section 设计阶段
    交互设计稿          :active, des1, after req2, 5d
    视觉设计稿          :des2, after des1, 5d
    设计评审            :des3, after des2, 2d

    section 开发阶段
    前端开发            :dev1, after des3, 15d
    后端开发            :dev2, after des3, 15d
    前后端联调          :dev3, after dev1, 5d

    section 测试阶段
    功能测试            :test1, after dev3, 5d
    性能测试            :test2, after test1, 3d
    UAT 验收           :test3, after test2, 3d

    section 上线阶段
    灰度发布            :rel1, after test3, 2d
    全量上线            :milestone, rel2, after rel1, 0d

---

二、SVG：高保真、定制化的矢量图

• 简介： SVG 是一种矢量图形格式，无论如何缩放都不会失真。许多在线设计工具（如 Figma、draw.io）的底层都广泛使用它。

• 优势：

  • 高可塑性： 理论上能满足所有画图需求，无论是复杂的战略图还是需要审美的分析图。
  • AI 原生支持： Claude 能原生渲染 SVG，可以通过多轮对话逐步调整图表细节（配色、布局、文字等）。

• 局限： 对话式微调虽然方便，但如果想手动修改 SVG 源码，门槛比 Mermaid 高。

• 使用方式： 向 AI 描述你想要的图表内容和风格，让它生成 SVG 代码。后续可以通过对话不断微调。也支持"图生图"——将已有截图发给 AI，让它用 SVG 重新绘制并优化。

• 推荐人群： 管理层、产品、运营、客户成功。特别适合做向上汇报的各类战略图、分析图。

案例 4：年度战略全景图（管理层/向上汇报）

提示词：

请用 SVG 画一个公司2026年度战略全景图。顶部放深色标题栏写上公司使命，下面一条愿景条概述三年目标。中间是三大战略支柱——业务增长、产品创新、组织效能，每个支柱下面列4条关键举措和负责人，三个支柱分别用蓝、绿、橙区分。再往下放4个 KPI 指标卡片（营收目标、客户满意度、技术指标、人才流失率），每个卡片要显示目标值和当前值的对比。底部画一条 Q1-Q4 的关键里程碑时间线。整体用专业的深蓝色系商务配色，宽960px，高720px，谢谢

效果：

---

案例 5：SWOT 分析图（产品/运营/向上汇报）

提示词：

帮我用 SVG 画一个 SWOT 分析图，主题是"某 SaaS 产品的市场分析"。经典四象限布局就行——左上优势（绿色）、右上劣势（红色）、左下机会（蓝色）、右下威胁（黄色），每个象限列5个具体要点。中心放一个小圆写"SWOT 2026"，旁边标注一下"内部因素"和"外部因素"。底部加一行说明文字。风格要现代简洁，圆角卡片带轻微阴影，整体宽800px，高680px，谢谢

效果：

---

案例 6：客户旅程图（客户成功/产品/运营）

提示词：

请帮我用 SVG 画一个客户旅程图（Customer Journey Map）。顶部5个阶段：认知→试用→购买→使用→续费/推荐，每个阶段用不同颜色的胶囊标签。中间画一条情绪曲线，用折线连接各阶段的情绪点，标上 emoji 和情绪描述。下面分三行：关键触点（每阶段4个）、痛点（浅红色背景，每阶段2个）、改进机会（浅绿色背景，每阶段2个）。白色卡片式布局，带轻微阴影，整体宽1050px，高620px，谢谢

效果：

---

三、HTML：无所不能的"万能画布"

• 简介： 利用 HTML、CSS 和 JavaScript，AI 能创造出任何你想要的视觉效果。

• 优势：

  • 数据可视化： 结合 Chart.js 等图表库，可以把枯燥的数据变成动态、可交互的图表。
  • 定制化设计： 任何复杂的"图"，HTML 都能实现——宣传卡片、仪表盘、路线图等。
  • 可交互： 鼠标悬停高亮、点击跳转、动态筛选……图表不再是死图。

• 局限： 几乎没有。唯一的门槛是你需要清楚自己想实现什么效果。

• 使用方式： 直接告诉 AI 你想要的图表类型和数据内容，让它输出完整的 HTML 文件。用浏览器打开即可查看效果。

• 推荐人群： 财务、运营、产品、市场。特别适合做数据看板和宣传物料。

案例 7：财务管理仪表盘（财务/管理层）

提示词：

帮我用 HTML + Chart.js 做一个财务管理仪表盘。顶部放4个 KPI 卡片：本月总收入 ¥826.5万（环比+12.3%）、总支出 ¥583.2万、净利润 ¥243.3万、利润率 29.4%，每个卡片顶部有不同颜色的装饰条。中间左边放月度收入 vs 支出的趋势折线图（近6个月数据，带面积填充），右边放费用类目占比的环形图（人力成本42%、云服务18%、市场推广15%、办公租赁12%、差旅8%、其他5%）。底部左边放预算 vs 实际的对比柱状图，右边放近期大额支出记录表格（5条记录，有日期、项目、金额、审批状态标签）。整体浅灰背景加白色圆角卡片的现代仪表盘风格，谢谢

效果：

---

案例 8：小红书风格种草卡片（运营/市场）

提示词：

请用 HTML+CSS 帮我做一组小红书风格的产品种草卡片，主题是"办公好物推荐"，3张卡片并排。页面标题用渐变粉色写"办公好物推荐 ✨"。每张卡片要有产品图区域（用渐变色背景加 emoji 代替实物图）、右上角贴个标签（爆款/口碑/新品）、产品标题和标签（#办公神器 #降噪 之类的粉色标签）、口语化的种草文案、底部价格大字加种草按钮、还有点赞评论收藏的互动数据。三个产品分别是：降噪耳机 ¥899、人体工学椅 ¥1599、便携显示器 ¥1299。用小红书标志性的粉红色调，卡片圆角，hover 有上浮效果，谢谢

效果：

---

案例 9：产品路线图（产品/向上汇报）

提示词：

帮我用 HTML+CSS 做一个2026年产品路线图（Roadmap）。深色科技风背景，标题用渐变色文字写"2026 产品路线图"。顶部加个图例：已完成（绿色）、进行中（蓝色发光）、计划中（灰色）。按 Q1-Q4 分4列，每列有不同颜色的季度标题和主题——Q1 基础升级用绿色、Q2 AI 赋能用蓝色、Q3 生态开放用紫色、Q4 商业化用红色。每个季度放3个功能卡片，包含功能名称、状态标签、描述文字和进度条。Q1 有2个已完成加1个进行中，Q2 有1个进行中加2个计划中，Q3 和 Q4 全部计划中。卡片左边框用状态颜色标识，hover 有向右滑动效果。底部注明"产品部 · 仅供内部参考"，谢谢

效果：

---

四、三种方式对比与选择建议

方式	适用场景	上手难度	视觉效果	可维护性	推荐人群
Mermaid	流程图、甘特图、组织架构图等标准图表	低	朴素	高（纯文本）	所有人
SVG	战略图、SWOT、客户旅程图等定制化矢量图	中	高	中	管理层/产品/运营
HTML	数据仪表盘、宣传卡片、路线图、交互式图表	中	很高	低	财务/运营/市场/产品

选择建议

你的需求	推荐方式	典型场景
快速沟通，5 分钟出图	Mermaid	审批流程、项目排期、组织架构
向上汇报，需要专业感	SVG	战略全景图、SWOT 分析、客户旅程
数据展示，需要交互或精美效果	HTML	财务仪表盘、产品路线图、宣传物料

---

五、实用提示词技巧

不管用哪种方式，以下技巧都能让 AI 出图效果更好：

1. 说清楚内容结构： 把你要的每个模块和具体内容都描述出来，越具体越好。不需要写成编号列表，用自然的语言把需求说清楚即可。
2. 指定风格和配色： "现代简洁风"、"深色科技风"、"小红书粉红色调"等关键词很有效。
3. 给出尺寸和布局： "宽960px"、"4列布局"、"左右分栏"等描述帮助 AI 把控比例。
4. 图生图： 截图你喜欢的样式发给 AI，说"照这个风格帮我重新画一个"，效果通常很好。
5. 多轮微调： 第一版不满意就继续对话调整——"标题再大一点"、"颜色换成蓝色系"、"加一个图例"。

---

附录

• Mermaid 快速上手教程： zhuanlan.zhihu.com/p/625897489
• Mermaid Live Editor： mermaid.live/
• Chart.js 官方文档： www.chartjs.org/docs/
• SVG 基础教程： developer.mozilla.org/zh-CN/docs/…