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

今天接著跟大家聊采用DeepSeek工具來繪制軟件功能架構(gòu)圖。對(duì)于場景的流程圖，包括軟件設(shè)計(jì)里面的用例圖，序列圖講這塊的已經(jīng)很多了。即通過DeepSeek工具來生成源代碼，再配合Mermaid或PlantUML工具來繼續(xù)圖形的生成。

圖片

但是實(shí)際上這類繪圖真正的難點(diǎn)在類似軟件功能架構(gòu)圖的繪制。在這之前我試用了類似Draw.io，PlantUML，Mermaid等各種工具。也包括了在線的類似 ProcessOn，億圖等各種繪圖工具。也不斷的在測(cè)試和驗(yàn)證如何繪制功能架構(gòu)圖。

最終的結(jié)論就是要繪制出完全符合我們需求的功能架構(gòu)圖，我們?nèi)匀恍枰捌谶M(jìn)行足夠的提示語約束往往才能夠達(dá)成。即我們不需要去做大模型的技術(shù)參數(shù)微調(diào)，更多的是應(yīng)該和AI交互不斷調(diào)整我們的提示語模板，最終得到我們期望的一個(gè)繪圖結(jié)果。

今天拿Drawio和SVG兩種場景來舉例說明。

1. DeepSeek+Drawio來生成架構(gòu)圖

首先是Drawio，我們和DeepSeek對(duì)話如下：

我現(xiàn)在需要一個(gè)標(biāo)準(zhǔn)的CRM系統(tǒng)的功能架構(gòu)圖。請(qǐng)直接幫我用draw.io繪制，輸出可以導(dǎo)入到draw.io在線工具的xml源代碼文件給我。

基于這個(gè)需要返回相關(guān)的源代碼文件如下：

圖片

我們直接將代碼文件存儲(chǔ)為本地的xml文件，然后再導(dǎo)入到Draw.io在線繪圖工具，那么得出的圖形如下：

圖片

可以看到第一次的輸出結(jié)果，完全不是我們希望的場景功能架構(gòu)圖。于是我們對(duì)提示語模板進(jìn)行調(diào)整，調(diào)整后如下：

圖片

在新的提示語中我們明確的架構(gòu)圖的分層，核心的應(yīng)用功能層的模塊要求和具體的布局方式等信息。然后AI幫我們重新生成了XML的源代碼文件，再一次導(dǎo)入到Draw.io工具后生成的架構(gòu)圖如下：

圖片

從上圖來看，基本上已經(jīng)有所模樣，但是如果到真正可用還需要做進(jìn)一步的細(xì)化調(diào)整。但是基本說明這個(gè)思路是可行的。

2. DeepSeek+SVG來生成架構(gòu)圖

接著我們來試驗(yàn)第二種方式，即讓DeepSeek直接輸出html網(wǎng)頁文件給我們，在網(wǎng)頁文件中直接給出SVG繪圖的源代碼文件。

當(dāng)然我們的思路還是一樣，首先只給最簡單的提示語，讓DeepSeek給我們一個(gè)標(biāo)準(zhǔn)的CRM系統(tǒng)功能架構(gòu)圖。

圖片

注意在我沒有做任何調(diào)整的時(shí)候，AI繪圖結(jié)果如下：

圖片

這顯然跟我們的希望還是明顯的差距。第二次我們?nèi)匀皇羌訌?qiáng)提示語約束，和前面draw.io繪圖采用同樣的提示語約束。

圖片

有了這個(gè)約束后重新繪圖如下：

圖片

大家注意看，這個(gè)和我們希望的功能架構(gòu)圖已經(jīng)相當(dāng)類似了。但是我們還希望應(yīng)用層一級(jí)功能模塊下的二級(jí)功能能否多列出幾個(gè)核心功能。因此我們用MES系統(tǒng)功能架構(gòu)繪制進(jìn)一步測(cè)試，希望能夠多列出幾個(gè)二級(jí)功能點(diǎn)，還是同樣的提示語代碼。

圖片

我們?cè)俅芜\(yùn)行AI生成的SVG圖，結(jié)果如下：

圖片

我們還可用再增加一些提示詞約束，類似基礎(chǔ)層背景色為#A56739，中間層背景色為#00AA48，門戶層背景色為#0AFEE1。同時(shí)我們對(duì)一些邊距進(jìn)行了調(diào)整，當(dāng)然你也可以直接修改生成的SVG源代碼。得到最終的架構(gòu)圖如下：

圖片

所以從上面的簡單提示語微調(diào)可以看到。最終輸出的架構(gòu)圖基本能夠滿足我們的需求。真正好用的不是結(jié)合什么在線作圖工具，而是直接出SVG的可以瀏覽器直接運(yùn)行的源代碼文件。而且這種源代碼文件本身還可以進(jìn)行修改。

簡單總結(jié)就是要有最夠耐心調(diào)整下提示語約束，就可以生成出符合你期望的軟件功能架構(gòu)圖，對(duì)于其它架構(gòu)圖也是同樣的道理。