摘要：昨天我在微信技术沟通群里面和大家分享采用Claude3.7 Sonnet结合svg来绘制复杂架构图，由于询问的人比较多，所以我今天准备写一篇文章来完整进行说明。

Hello，大家好，我是人月聊IT。

昨天我在微信技术沟通群里面和大家分享采用Claude3.7 Sonnet结合svg来绘制复杂架构图，由于询问的人比较多，所以我今天准备写一篇文章来完整进行说明。

在DeepSeek出来后我分享过采用DeepSeek输出SVG源代码来绘制架构图，但是实际效果一般，中间需要多次调整。当然也可以采用DeepSeek结合Draw.io或者MemrAId在线绘图工具来绘制各种图表。

但是我在前面文章已经专门指出，对应在线绘图工具实际很难完成复杂的架构图，流程图或者模型图的输出。最佳的方式仍然是让AI输出SVG图源代码进行绘制。

在我用DeepSeek的时候实际很多时候输出并没有达到我理想的状态，但是最近我使用了Claude3.7 Sonnet以后，再次的感受到了Claude3.7在SVG绘图方面强大的能力和优势。

今天我就分享一些常见的图，并给出具体的提示语，大家可以看下AI最终的SVG图绘制效果。

1. 绘制业务系统功能架构图

具体的提示语：请帮我生成一个企业CRM客户关系管理系统功能架构图，要包括当前企业主流企业级CRM系统所有的功能模块，细化到二级功能点。注意图要分成三层：底层是技术平台层，包括相关技术组件，公共组件，系统管理，流程引擎等。中间为功能导可以分多矩形模块，矩形模块还要细化—层，小矩形为二级功能点。上层为门户层，请用html网页绘制SVG图给我。

最终的SVG图汇总效果如下：

可以看到，除了中间层有少量重叠以外基本完全满足我们的要求。而且提示语也不复杂，不需要给出太多的提示语约束。

2. 绘制系统集成架构关系图

具体的提示语：好的，请以一个通用的制造企业为例，企业已经建设了ERP，CRM，WMS，MES，采购系统，销售系统，PLM系统，HR系统，财务报销系统，预算系统。请输出这些系统的集成关系图给我。注意系统间需要联想，体现出重要的集成和接口点，线上面标准集成的核心数据对象。注意连线布局只能是横向水平或纵向垂直，不能斜线，不能弯折。但是各个系统的矩形框的大小可以灵活布局来适应画线条间的连接。请基于以上要求用html网页绘制SVG图给我。

具体的源代码输出：

最终的图形输出如下：

3. 绘制端到端流程图

具体提示语如下：我在做汽车零部件制造行业的端到端流程分析，基于你的经验帮我绘制一个从市场需求或销售机会开始到最终的产品交付的完整的端到端流程。里面需要包括供应链，物流，生产，销售，市场，财务等关键业务，但是不要包括产品研发部分，假设这个产品是已经批量生产的产品。

我需要你参考visio跨职能带流程图的画法来提供。其中纵向是端到端的大阶段，你可以自己将其划分为个关键阶段。横向为职能带，体现的是业务部门，类似采购部，生产部，财务部等。整个端到端要体现跨业务部门的流程流转，体现的核心的业务对象在端到端流程中的变迁，但是不要体现单个业务对象本身的人工审批流。

整个端到端只考虑主体正向流程，不考虑逆向流程，变更流程，扩展分支流程等。 好的，请基于以上要求用html网页绘制SVG图给我。

最终绘制输出如下：

4. 绘制数据架构逻辑模型图

接着我们再试下数据架构中的逻辑模型图绘制，这个相对来说是比较难的绘制，特别是连续和布局的美观性。

提示语如下：我现在需要绘制一个企业供应链系统中的类似数据库设计里面的逻辑模型图，每一个数据对象一个大矩形，顶部是数据表名称，下面列出关键的3到5个字段，同时体现标准pk和fk主外键。另外该图中的数据对象关系连线不能是斜线，不能穿越矩阵框，对于斜线的都转变为直角折线进行连接。

另外我当前没有主数据系统，同时供应链覆盖采购需求和招投标流程，覆盖仓储物流流程。因此相关的供应商，物料，采购需求，招投标，库存相关等数据库对象都要考虑到。

请基于以上需求帮我用svg图绘制该数据架构逻辑模型图给我。注意布局工整美观。

注意大家看下绘制输出：

大家注意上图里面出现了数据对象矩阵框重叠，连接线跨越了数据对象等问题。这些问题你可以进一步调整提示语去修正，让AI继续输出。

但是今天我要说的一个极其牛的工具，即直接对SVG输出图进行可视化编辑和修改。具体工具地址：

https://unpkg.com/svgedit@7.3.4/dist/editor/index.html

进入这个页面点小红框处可以导入SVG源代码并进行在线SVG图修改和边界。这可以极大减少我们图形调整时间。

上图我简单可视化调整了下后的输出如下：

5. 绘制微服务逻辑部署架构图

参考提示语如下：我现在设计和实现了一个简单的电商平台，采用微服务架构，其中包括了客户中心，商品中心，订单中心，结算中心，库存中心几个微服务。底层采用mysql读写分离集群，redis集群，rabbitmq消息集群，微服务包括了服务注册发现中心集群，微服务网关集群。前端包括了APP端和桌面BS web端。反向代理采用了Ngnix集群。日志采集分析采用ELK集群。请基于以上描述帮我生成微服务架构体现的部署逻辑架构图，要符合主流的微服务逻辑部署架构图的画画法。如果部署图上能够生成相关的小图标示例更好。

请基于以上需求帮我用svg图绘制该逻辑部署架构图给我。注意布局工整美观，连续清晰不要重叠，不要穿越已有组件。

具体生成的逻辑部署架构图如下：

通过以上整体试用下来，我感觉Claude3.7 Sonnet在绘制SVG图方面足够强大。我们常用的架构图，流程图，模型图基本都能够灵活绘制。虽然还有一些内容重叠，连续错乱的小问题，但是基本通过我前面介绍的工具网页可以快速达到调整的目的。

这个功能讲极大的方便我们在做技术方案时候的图形绘制。特别是我们在售前项目支撑过程中，除了文字内容外，还需要配相关的架构图，流程图。采用前面这个方式完全满足。这极大解决了通过AI来辅助做售前方案和标书的所有问题。

当然SVG图的应用还有很多场景，大家也可以不断挖掘。今天的分享就到这里，希望对大家有所启发。

来源：人月聊IT