前言
作为写代码最牛的Claude 3.7，最近被大家拿来做各种创意设计，流程图、知识卡片、海报，只有你想不到的，没有它做不到的。
果然，人类的创新是无穷的。
今天就给大家分享下我使用 Claude 3.7 生成 SVG 图片的效果，不论是生成写作插图，还是为技术文档配图，绝对可以让你事半功倍。
快速体验
首先，给大家展示一个简单的案例：员工入职流程图。
效果如下：
非常简单、快捷，这不比自己吭哧吭哧画半天有效果。
生成工具
生成工具的话，可以直接使用 Claude 官网，也可以使用 Cursor，或者国内一些 Claude 的镜像网站，我这里直接选择的 Cursor 进行生成。
预览
SVG的预览可以通过安装软件或者放置到html代码中，这里为了简单，我直接通过在线网站预览的。
实战
上面的体验稍显简单，我们挑选几个大家日常会碰到的场景，再进一步展示下。
- 提炼大纲，形成思维导图
- 帮忙绘制架构图
思维导图
很早之前看过一本书，《高效能人士的七个习惯》，内容非常不错，今天就为它生成一个思维导图吧。
提示词：
*****
- 积极主动（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 重新制作下。
提示词：
*****
顶部组件
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技术的进步为我们带来了无限可能，而目前的探索仅仅是个开始。希望大家一起不断尝试，共同发掘更多创新的应用场景，激发更多的灵感与创意！
