1. 從“畫圖五分鐘調格式兩小時”說起如果你寫過技術文檔大概率經歷過這種崩潰架構圖畫完產品經理說“這個模塊往左挪一點”你打開繪圖工具拖了十分鐘導出圖片貼進文檔結果下次改需求又得重來一遍。更別提多人協(xié)作時每個人用的工具不一樣有人用 Visio有人用 draw.io有人直接截圖最后文檔里的圖風格五花八門。AI 畫圖這件事核心不是讓 AI 替你“畫”而是讓 AI 把自然語言描述轉成可版本控制、可二次編輯的圖形代碼。PlantUML、Mermaid、Graphviz、SVG 這四種文本繪圖方案正好覆蓋了程序員日常最高頻的四類需求時序交互、快速流程圖、復雜依賴關系、高定制架構圖。它們共同的優(yōu)點是——圖形即代碼改一行文字就能重新渲染配合 Git 管理 diff 清晰可見。但問題來了這些圖形代碼的語法各有各的坑手寫效率低讓 AI 生成又得反復切換模型和工具。我試過在多個平臺之間來回粘貼光是配置 API Key 和環(huán)境就耗掉不少時間。所以這篇內容聚焦一件事用 TaoToken 統(tǒng)一 Key/API 通道把四種畫圖鏈路一次性跑通。你只需要配好一份 settings.json 和 config.toml后面無論讓 AI 生成 PlantUML 還是 SVG都走同一個入口。適合誰正在寫技術文檔的后端、需要畫架構圖的架構師、以及想用 AI 提效但不想折騰多平臺配置的開發(fā)者。2. TaoToken 前置統(tǒng)一 Key 與 API 通道TaoToken 在這里扮演的角色是模型調用的統(tǒng)一網關。你不需要為每個 AI 工具單獨申請 Key也不用在 Cursor、VS Code 插件、命令行工具之間反復切換配置。一個 Key一套 API 地址就能讓 AI 幫你生成 PlantUML、Mermaid、Graphviz 和 SVG 代碼。具體來說TaoToken 提供兩類入口模型對話適合臨時讓 AI 生成一段圖形代碼粘貼即用不用裝任何插件。地址是https://taotoken.net/api配合對話界面。Coding Plan適合長期在編輯器里做 AI 輔助編碼比如讓 AI 直接往你的.puml或.mmd文件里寫內容。這個方案對頻繁畫圖的場景更劃算。你需要先拿到 API Key。操作路徑很簡單訪問官網https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content注冊后在控制臺創(chuàng)建 Key。控制臺地址是https://taotoken.net/console?utm_sourcetaotoken_aicg_blog_endutm_contentconsoleutm_campaignrewriteAPI Keys 管理頁在https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi-keysutm_campaignrewrite。注意API 地址統(tǒng)一用https://taotoken.net/api不要加 UTM 參數(shù)避免部分客戶端把查詢字符串當成路徑的一部分導致 404。拿到 Key 之后下面進入配置環(huán)節(jié)。我會給出兩份配置骨架一份是 VS Code 的settings.json一份是命令行工具用的config.toml。你可以根據(jù)自己的工具鏈選其中一份也可以兩份都配。3. 可復制配置settings.json 與 config.toml 骨架3.1 VS Code settings.json 配置如果你用 VS Code 配合 PlantUML 插件或 Mermaid 預覽插件可以在settings.json里把 AI 補全的 API 指向 TaoToken。下面這份配置以 PlantUML 插件為例核心是把模型請求地址和 Key 寫對{ plantuml.server: https://www.plantuml.com/plantuml, plantuml.render: Local, aiAssistant.provider: openai-compatible, aiAssistant.baseUrl: https://taotoken.net/api, aiAssistant.apiKey: 你的_TaoToken_Key, aiAssistant.model: claude-3.7-sonnet, aiAssistant.temperature: 0.3, aiAssistant.maxTokens: 4096, editor.quickSuggestions: { other: true, comments: false, strings: true } }幾個參數(shù)說明baseUrl必須寫成https://taotoken.net/api不要帶尾部斜杠model字段填你實際要用的模型名TaoToken 支持多種模型具體列表可以在模型對話頁面查看temperature建議設低一點畫圖代碼需要穩(wěn)定輸出0.2 到 0.4 之間比較合適。3.2 config.toml 配置骨架如果你用命令行工具比如aichat或自建的腳本調用config.toml的骨架如下[default] api_base https://taotoken.net/api api_key 你的_TaoToken_Key model claude-3.7-sonnet temperature 0.3 max_tokens 4096 [plantuml] prompt_template 請根據(jù)以下描述生成 PlantUML 代碼只輸出代碼塊不要解釋{input} [mermaid] prompt_template 請根據(jù)以下描述生成 Mermaid 代碼只輸出代碼塊不要解釋{input} [graphviz] prompt_template 請根據(jù)以下描述生成 Graphviz DOT 代碼只輸出代碼塊不要解釋{input} [svg] prompt_template 請根據(jù)以下描述生成 SVG 代碼要求 viewBox 為 0 0 800 600只輸出 SVG 代碼不要解釋{input}這份配置的好處是四種畫圖語言各自有獨立的 prompt 模板調用時只需要指定 section 名不用每次重復寫“請生成 PlantUML”這類前綴。實際使用時你可以寫一個簡單的 shell 函數(shù)來調用draw() { local lang$1 local desc$2 aichat --config ~/.config/aichat/config.toml \ --role $lang \ $desc }然后這樣用draw plantuml 畫一個用戶登錄的時序圖包含瀏覽器、前端、后端、Redis、數(shù)據(jù)庫 draw mermaid 畫一個訂單狀態(tài)流轉的流程圖 draw graphviz 畫一個微服務依賴關系圖 draw svg 畫一個三層架構圖包含網關、業(yè)務層、數(shù)據(jù)層配置完成后建議先用一個最簡單的請求驗證通道是否打通。4. 驗證請求從自然語言到四種圖形代碼4.1 PlantUML 時序圖驗證先拿登錄流程做測試。給 AI 的輸入可以是這樣請用 PlantUML 畫一個賬號密碼登錄的時序圖參與者包括瀏覽器、前端、后端 API、Redis、數(shù)據(jù)庫。 流程瀏覽器輸入賬號密碼點擊登錄 - 前端加密 - 后端接收 - 限流校驗 - 查 Redis 緩存 - 未命中查數(shù)據(jù)庫 - 比對密碼哈希 - 校驗用戶狀態(tài) - 生成 Token - Token 存 Redis - 返回 Token 給前端。 只輸出 PlantUML 代碼塊。AI 返回的代碼大致如下startuml actor 用戶 as U participant 瀏覽器 as B participant 前端 as F participant 后端API as API database Redis as R database 數(shù)據(jù)庫 as DB U - B: 輸入賬號密碼 B - F: 點擊登錄 F - F: 前端加密 F - API: 發(fā)送登錄請求 API - API: 限流校驗 API - R: 查詢用戶緩存 alt 緩存未命中 R -- API: 無數(shù)據(jù) API - DB: 查詢用戶 DB -- API: 返回用戶信息 else 緩存命中 R -- API: 返回用戶信息 end API - API: 比對密碼哈希 API - API: 校驗用戶狀態(tài) API - API: 生成 Token API - R: 存儲 Token API -- F: 返回 Token F - B: 持久化 Token enduml把這段代碼貼進 PlantUML 預覽插件或者用在線渲染器打開就能看到標準的時序圖。驗證成功的標志是圖形正常渲染參與者之間的箭頭方向正確alt分支顯示為條件塊。4.2 Mermaid 流程圖驗證同樣的登錄流程換成 Mermaid 的輸入請用 Mermaid 畫一個登錄流程圖從瀏覽器開始到返回 Token 結束。 只輸出 Mermaid 代碼塊。返回結果flowchart TD A[瀏覽器] -- B[輸入賬號密碼] B -- C[前端加密] C -- D[后端API接收] D -- E[限流校驗] E -- F{Redis緩存命中?} F --|是| G[返回用戶信息] F --|否| H[查詢數(shù)據(jù)庫] H -- G G -- I[比對密碼哈希] I -- J{用戶狀態(tài)正常?} J --|否| K[返回錯誤] J --|是| L[生成Token] L -- M[Token存Redis] M -- N[返回Token給前端]Mermaid 的優(yōu)勢是 Markdown 原生支持很多文檔平臺直接渲染。驗證時注意flowchart TD的方向聲明以及條件分支的{}語法。4.3 Graphviz 依賴圖驗證Graphviz 適合畫非線性的依賴關系。輸入請用 Graphviz DOT 語言畫一個微服務依賴圖包含網關、用戶服務、訂單服務、支付服務、庫存服務、消息隊列、數(shù)據(jù)庫。 只輸出 DOT 代碼塊。返回digraph Microservices { rankdirLR; node [shapebox, stylerounded]; Gateway [labelAPI網關]; UserSvc [label用戶服務]; OrderSvc [label訂單服務]; PaySvc [label支付服務]; StockSvc [label庫存服務]; MQ [label消息隊列, shapeparallelogram]; DB [label數(shù)據(jù)庫, shapecylinder]; Gateway - UserSvc; Gateway - OrderSvc; OrderSvc - PaySvc; OrderSvc - StockSvc; OrderSvc - MQ; PaySvc - DB; StockSvc - DB; UserSvc - DB; }用dot -Tpng命令渲染或者貼進 Graphviz 在線編輯器。驗證點是節(jié)點形狀和rankdir方向是否符合預期。4.4 SVG 架構圖驗證SVG 的驗證稍微特殊因為它是 XML 文本需要瀏覽器打開。輸入請生成一個 SVG 三層架構圖viewBox 為 0 0 800 600包含網關層、業(yè)務層、數(shù)據(jù)層用矩形和文字表示配色簡潔。 只輸出 SVG 代碼。返回的 SVG 代碼保存為.svg文件用瀏覽器打開即可。驗證時重點看viewBox是否正確、文字是否在矩形內居中、整體布局是否在可視區(qū)域內。四種方式都跑通后你會發(fā)現(xiàn)一個規(guī)律AI 生成圖形代碼的質量取決于你的描述是否結構化。把流程拆成“參與者 動作 條件分支”比籠統(tǒng)地說“畫個登錄圖”效果好得多。5. 本篇常見錯排查5.1 請求返回 401 或 403最常見的原因是 Key 沒填對或者baseUrl寫成了帶 UTM 參數(shù)的地址。檢查兩點apiKey字段是否完整復制了 TaoToken 控制臺里的 KeybaseUrl是否嚴格為https://taotoken.net/api。如果用的是環(huán)境變量確認變量名和配置文件里引用的一致。5.2 PlantUML 渲染報語法錯誤AI 生成的 PlantUML 代碼有時會缺少startuml和enduml包裹或者參與者別名用了中文導致解析失敗。解決辦法是在 prompt 里明確要求“使用英文別名中文用引號包裹”例如participant 瀏覽器 as B。另外alt分支必須成對出現(xiàn)else和end缺一個就會報錯。5.3 Mermaid 在 Markdown 里不渲染部分 Markdown 編輯器需要額外開啟 Mermaid 支持。如果你用的是 VS Code安裝 Markdown Preview Mermaid Support 插件即可。另外注意代碼塊語言標記要寫成mermaid不要寫成mmd后者很多渲染器不識別。5.4 Graphviz 中文亂碼Graphviz 默認字體可能不支持中文渲染出來是方框。在 DOT 代碼里加一行node [fontnameSimHei];或者graph [fontnameMicrosoft YaHei];即可。Linux 環(huán)境下需要確認系統(tǒng)裝了中文字體否則即使指定字體名也無效。5.5 SVG 顯示不全或元素重疊SVG 的viewBox決定了可視區(qū)域。如果 AI 生成的元素坐標超出了viewBox范圍就會顯示不全。排查方法是把viewBox臨時改大比如從0 0 800 600改成0 0 1200 900看元素是否出現(xiàn)。如果出現(xiàn)說明原始坐標超界需要讓 AI 重新生成或手動調整坐標。另一個常見問題是文字沒有設置text-anchormiddle導致文字從矩形左上角開始繪制看起來像溢出。5.6 模型返回內容包含多余解釋有些模型會在代碼塊前后加“好的以下是代碼”之類的文字。如果你用腳本自動提取代碼塊需要做正則匹配。更省事的辦法是在 prompt 里加一句“只輸出代碼塊不要任何解釋”并且在config.toml的模板里已經預設了這個約束。6. 把四種鏈路串起來我的實際工作流配置跑通之后我日常的畫圖流程是這樣的先在草稿紙上把流程或架構用文字列出來然后根據(jù)圖的類型選工具。線性流程和時序交互用 PlantUML快速原型和文檔內嵌用 Mermaid復雜依賴和網狀關系用 Graphviz最終要放進 PPT 或對外文檔的架構圖用 SVG。四種方式生成的代碼都存進 Git 倉庫和文檔放在一起。改需求時直接改文字描述讓 AI 重新生成或者手動微調代碼diff 清晰可見。這樣做的最大好處是圖不再是黑盒而是和代碼一樣可追溯、可協(xié)作。如果你還沒配好 TaoToken 的通道建議先從模型對話入口試一次讓 AI 生成一段 Mermaid 代碼貼進 Markdown 預覽看看效果。確認通道沒問題后再按上面的settings.json或config.toml配置到本地工具鏈。長期在編輯器里畫圖的話Coding Plan 的入口在https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding-planutm_campaignrewrite接入文檔在https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewrite遇到配置問題可以先翻文檔里的示例。最后分享一個我踩過的坑Graphviz 的rankdir參數(shù)不要隨便設成TB又混用LR的子圖否則布局會亂成一團。如果發(fā)現(xiàn)節(jié)點位置詭異先把rankdir統(tǒng)一成LR或TB再逐步調整。畫圖這件事工具是輔助清晰的邏輯描述才是核心。