前言

作为写代码最牛的Claude 3.7，最近被大家拿来做各种创意设计，流程图、知识卡片、海报，只有你想不到的，没有它做不到的。

果然，人类的创新是无穷的。

今天就给大家分享下我使用 Claude 3.7 生成 SVG 图片的效果，不论是生成写作插图，还是为技术文档配图，绝对可以让你事半功倍。

快速体验

首先，给大家展示一个简单的案例：员工入职流程图。

效果如下：

非常简单、快捷，这不比自己吭哧吭哧画半天有效果。

生成工具

生成工具的话，可以直接使用 Claude 官网，也可以使用 Cursor，或者国内一些 Claude 的镜像网站，我这里直接选择的 Cursor 进行生成。

预览

SVG的预览可以通过安装软件或者放置到html代码中，这里为了简单，我直接通过在线网站预览的。

lzltool.cn/Image/SvgPr…

实战

上面的体验稍显简单，我们挑选几个大家日常会碰到的场景，再进一步展示下。

• 提炼大纲，形成思维导图
• 帮忙绘制架构图

思维导图

很早之前看过一本书，《高效能人士的七个习惯》，内容非常不错，今天就为它生成一个思维导图吧。

提示词：

markdown
 代码解读
复制代码
*****
- 积极主动（Be Proactive）
  - 强调责任感和个人选择的力量。
  - 专注于你能控制的事物，并采取行动。
- 以终为始（Begin with the End in Mind）
  - 定义个人愿景并设定长期目标。
  - 从目标出发来指导当前的行为和决策。
- 要事第一（Put First Things First）
  - 时间管理和优先级设置。
  - 集中精力完成对个人愿景最重要的任务。
- 双赢思维（Think Win-Win）
  - 寻求互利的合作方案。
  - 培养一种基于相互尊重和成果分享的心态。
- 知彼解己（Seek First to Understand, Then to Be Understood）
  - 有效的沟通始于深刻的倾听。
  - 努力理解他人观点，然后再清晰地表达自己的意见。
- 统合综效（Synergize）
  - 团队合作与创造性合作。
  - 通过团队成员之间的差异产生创新解决方案。
- 不断更新（Sharpen the Saw）
  - 持续改进个人，保持平衡的生活方式。
  - 投资于自我更新的四个方面：身体、精神、智力、社会/情感。
*****
请为以上内容设计一张思维导图，并输出SVG源码。
要求如下：
1、图片样式：横向树状图，节点从左到右，从上到下排列，图形美观
2、风格定位：简约 
3、颜色方案：暖色系 
4、请仔细分析内容，保证层次清晰、图形不要重叠

效果：

架构图

这是昨天为了分享 MCP 架构时仓促做的图，当时也花了好几分钟呢，今天使用 Claude 3.7 重新制作下。

提示词：

markdown
 代码解读
复制代码
*****
顶部组件
Claude（左侧）
Cursor（中间）
Trae（右侧）
底部组件
文件系统（左侧）
MySQL（中间偏左）
Chrome Console（中间偏右）
Gitee（右侧）
连接关系
图中通过线条展示了这些组件之间的相互连接关系，形成了一个网状结构。每个顶部组件都与多个底部组件相连，表明它们之间存在数据流或功能依赖关系。
******
请为以上内容设计一张系统架构图，并输出SVG源码。
要求如下：
1、图片样式：拓扑图
2、风格定位：简约、科技
3、颜色方案：冷色系 
4、请仔细分析内容，保证层次清晰、图形不要重叠

效果：

效果和原图对比是不是很明显？

并且，通过细化、调整提示词，我们还可以制作更加惊艳的各类图形，这个等我积累一下，再给大家分享。

SVG是什么

那为什么都在生成SVG呢？

简单来说，SVG是一种用代码描述图形的矢量格式，如同用数学公式“画图”。

代码这种文本数据，对于大模型来说比图片等二进制数据更加容易操作。

并且：

• SVG支持无损缩放，一次生成，多处使用，节省算力消耗；
• 体积小，文件大小约为PNG的10%；
• 原生支持动画、点击响应等交互逻辑，突破静态限制。

应用场景

结合刚才的案例和SVG的特点，梳理了几个应用场景，大家可以作为灵感尝试一下。

学习与教学

• 知识卡片：快速将复杂信息结构化为思维导图或流程图，适用于个人学习和团队分享。
• 课程大纲：制作动态的课程大纲或知识点总结，提高课堂趣味性和学生参与度。

技术文档

• 系统架构图：清晰展示系统组件间的连接关系，便于开发人员理解数据流和功能依赖。
• 技术博客插图：添加高质量的技术图表，增强文章的专业性和可读性。

内容创作

• 文章插图：根据文章主题自动生成独特的插图，避免版权问题并提升内容吸引力。
• 信息图表：将统计数据转化为直观的信息图表，使内容更具说服力和传播力。

数据分析

• 数据可视化：生成柱状图、饼图、折线图等用于展示业务增长、市场趋势等数据。
• 实时监控仪表盘：利用SVG的交互能力，制作动态仪表盘，实时展示关键指标的变化。

教育与培训

• 在线课程课件：为在线学习平台制作互动式课件，帮助学生更好地理解抽象概念。
• 操作指南：通过步骤指南或流程图指导学员完成实际任务。

总结

通过今天的分享，我们见证了Claude 3.7在SVG生成领域的卓越表现，无论是复杂的系统架构图还是细致的思维导图，它都能高效且美观地助我们一臂之力。

AI技术的进步为我们带来了无限可能，而目前的探索仅仅是个开始。希望大家一起不断尝试，共同发掘更多创新的应用场景，激发更多的灵感与创意！