DeepSeek+Drawio+SVG繪制架構(gòu)圖-找到一種真正可行實用的方法和思路

作者：何明璐 2025-02-28 04:00:00

今天接著跟大家聊采用DeepSeek工具來繪制軟件功能架構(gòu)圖。對于場景的流程圖，包括軟件設(shè)計里面的用例圖，序列圖講這塊的已經(jīng)很多了。

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

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

圖片

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

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

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

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

首先是Drawio，我們和DeepSeek對話如下：

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

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

圖片

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

圖片

可以看到第一次的輸出結(jié)果，完全不是我們希望的場景功能架構(gòu)圖。于是我們對提示語模板進(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)整。但是基本說明這個思路是可行的。

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

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

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

圖片

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

圖片

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

圖片

有了這個約束后重新繪圖如下：

圖片

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

圖片