DeepSeek+Drawio+SVG绘制架构图-一种真正可行实用的方法和思路

boyanx2个月前技术教程13

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

今天接着跟大家聊采用DeepSeek工具来绘制软件功能架构图。对于场景的流程图,包括软件设计里面的用例图,序列图讲这块的已经很多了。即通过DeepSeek工具来生成源代码,再配合Mermaid或PlantUML工具来继续图形的生成。

但是实际上这类绘图真正的难点在类似软件功能架构图的绘制。在这之前我试用了类似Draw.io,PlantUML,Mermaid等各种工具。也包括了在线的类似 ProcessOn,亿图等各种绘图工具。也不断的在测试和验证如何绘制功能架构图。

最终的结论就是要绘制出完全符合我们需求的功能架构图,我们仍然需要前期进行足够的提示与约束往往才能够达成。即我们不需要去做大模型的技术参数微调,更多的是应该和AI交互不断调整我们的提示语模板,最终得到我们期望的一个绘图结果。

今天拿Drawio和SVG两种场景来举例说明。

1. DeepSeek+Drawio来生成架构图

首先是Drawio,我们和DeepSeek对话如下:

我现在需要一个标准的CRM系统的功能架构图。请直接帮我用draw.io绘制,输出可以导入到draw.io在线工具的xml源代码文件给我。

基于这个需要返回相关的源代码文件如下:

我们直接将代码文件存储为本地的xml文件,然后再导入到Draw.io在线绘图工具,那么得出的图形如下:

可以看到第一次的输出结果,完全不是我们希望的场景功能架构图。于是我们对提示语模板进行调整,调整后如下:

在新的提示语中我们明确的架构图的分层,核心的应用功能层的模块要求和具体的布局方式等信息。然后AI帮我们重新生成了XML的源代码文件,再一次导入到Draw.io工具后生成的架构图如下:

从上图来看,基本上已经有所模样,但是如果到真正可用还需要做进一步的细化调整。但是基本说明这个思路是可行的。

2. DeepSeek+SVG来生成架构图

接着我们来试验第二种方式,即让DeepSeek直接输出html网页文件给我们,在网页文件中直接给出SVG绘图的源代码文件。

当然我们的思路还是一样,首先只给最简单的提示语,让DeepSeek给我们一个标准的CRM系统功能架构图。

注意在我没有做任何调整的时候,AI绘图结果如下:

这显然跟我们的希望还有明显的差距。第二次我们仍然是加强提示语约束,和前面draw.io绘图采用同样的提示语约束。

有了这个约束后重新绘图如下:

大家注意看,这个和我们希望的功能架构图已经相当类似了。但是我们还希望应用层一级功能模块下的二级功能能否多列出几个核心功能。因此我们用MES系统功能架构绘制进一步测试,希望能够多列出几个二级功能点,还是同样的提示语代码。

我们再次运行AI生成的SVG图,结果如下:

我们还可用再增加一些提示词约束,类似基础层背景色为#A56739,中间层背景色为#00AA48,门户层背景色为#0AFEE1。同时我们对一些边距进行了调整,当然你也可以直接修改生成的SVG源代码。得到最终的架构图如下:

所以从上面的简单提示语微调可以看到。最终输出的架构图基本能够满足我们的需求。真正好用的不是结合什么在线作图工具,而是直接出SVG的可以浏览器直接运行的源代码文件。而且这种源代码文件本身还可以进行修改。

简单总结就是要有最够耐心调整下提示语约束,就可以生成出符合你期望的软件功能架构图,对于其它架构图也是同样的道理。

今天分享就到这里,希望对大家有所启发。



标签: svg 生成

相关文章

AI驱动的文本矢量图形生成技术,转化为有层次结构的矢量图形!

NeuralSVG是创新的文本驱动矢量图形生成技术。通过一个小型的多层感知器网络,将文本提示转化为具有层次结构的矢量图形。该网络以形状索引为输入,输出形状参数,再经可微染器生成像素输出。基于分数蒸馏采...

3秒SVG变3D!Vecto3D:免费在线神器,设计师/小白都能用

Vecto3D 是一款免费开源工具,可将简单 SVG(如 Logo)快速转换为可定制 3D 模型,支持调整几何、材质及场景参数,并导出为 GLB、STL 等格式,适用于设计、游戏开发和 3D 打印。...

Web开发人员的福音!8个实用的SVG工具

SVG可缩放矢量图形(Scalable Vector Graphics)是基于可扩展标记语言(XML),用于描述二维矢量图形的一种图形格式。SVG是W3C在2000年8月制定的一种新的二维矢量图形格式...

文章和PPT配图有救了!SVG绘图专家智能体大揭秘

阿里妹导读 本文分享如何使用 DeepSeek-V3-0324 和 Claude 3.5 或...

Net.Codecrete.QrCodeGenerator:NET平台上的QR码生成利器

大家好,我是深山踏红叶,今天要介绍一个二维码生成的免费库 Net.Codecrete.QrCodeGenerator 用于生成二维码。非常简洁、易用,且可以生成符合二维码标准的二维码图像。前言Net....

详细教你微信公众号正文页SVG交互开发

现在很多公众号都直接在正文页通过SVG交互动画增加文章的阅读交互体验,而不再跳转H5。结合这一需求,本期分享的内容是如何开发交互式SVG,并嵌入微信公众号正文页。设计师和前端开发同学都可以来学习下。学...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。