Communitygithub.com

AILatest-Studio/ailatest-skill

建立、修改與 QA 可出版的程序流程圖,採用一致的中文期刊風格視覺系統,支援可設定的階段數量、水平或垂直佈局、彩色標題、對齊分隔線、填滿流程箭頭、線條圖示、微軟雅黑字體,以及 PNG/SVG/PDF 匯出。

ailatest-skill 是什麼?

此技巧專為需要產生高品質、符合出版標準的程序流程圖的研究人員、技術作家與開發人員而設計。其核心功能是將任何有序流程(如研究方法、決策框架或實作工作流程)轉換為視覺上連貫一致的圖表,遵循特定的中文期刊風格指南。該技巧支援 2 到 6 個階段的水平或垂直序列,以及用於比較分析的二維矩陣。它會根據內容的語義結構自動決定階段的數量與方向,並套用嚴格的視覺系統,包含深藍-青-綠的配色、填滿的箭頭、線條圖示,以及明確要求使用 Microsoft YaHei 字體以確保 CJK 文字正確顯示。此技巧的主要優點在於能夠以程式化、可重現的方式產出可直接用於投稿的圖表,無需手動調整排版或字型。它包含一個內建的 QA 流程,用於檢查對齊、字型嵌入與整體一致性,確保最終的 PNG、SVG 及 PDF 匯出檔案能夠無縫整合到 Microsoft Word 文件中。該技巧支援 Claude Code 等 AI 代理平台,並可透過自然語言指令(例如「將此研究方法轉為五階段的期刊圖表」)觸發。其工作流程包括定義語義合約、建構內容、套用視覺系統、以程式化方式繪圖,以及最終的 QA 檢查。這使其成為一個強大的工具,可用於標準化與加速學術或技術出版物的圖表製作流程。

相容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/AILatest-Studio/ailatest-skill/tree/HEAD/skills/draw-process-flowchart

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

程序流程圖

使用此技巧將任何有序的程序、決策框架、證據鏈或實作工作流程轉換為清晰可出版的流程圖。所提供的參考圖片是風格參考,而非固定的四欄範本:請根據內容選擇階段的數量與方向。

工作流程

1. 定義語義合約

在繪製前先列出實際階段。預設使用二至六個階段;僅在階段具有明確的決策、負責人、輸入/輸出或證據類型時才進行拆分。當相鄰方塊包含重複的文字時合併階段。

選擇閱讀方向:

  • 對於 2–6 個精簡階段與寬頁面,使用水平序列;
  • 對於長標籤、多階段或窄直式頁面,使用垂直序列;
  • 僅在兩個獨立維度具有分析必要性時,才使用二維矩陣。

用一行寫下主序列,例如:

輸入/觀察 → 分析/設計 → 執行/交付 → 反饋/複核

僅在增加明確的交接或生命週期時,才添加可選的次要實作帶。將其標籤對齊到相應的主要階段;不要重複主要面板的文字。

為每個階段定義一個問題:

  • 什麼證據或輸入啟動了程序?
  • 接下來發生什麼分析、驗證或分類?
  • 隨後有哪些選項、行動或決策?
  • 如何結束實作、交付、反饋或複核?

保留使用者的術語與因果邏輯。不要為了填補空白而虛構統計數據、標準、成本或因果關係的主張。

2. 建構內容

每個階段使用二至四個簡短內容組。每個組包含:

  1. 一個簡短的彩色標籤(粗體);
  2. 一行簡潔的解釋文字;
  3. 當後面還有其他組時,在組下方放置一條淺色虛線分隔線。

除非使用者明確要求矩陣、卡片或比較佈局,否則保持所有階段具有相同的內部結構。不要僅僅因為一個階段包含多個選項就給予其額外的內部卡片;應優先使用文字層級與分隔線。

保持解釋性註解簡短且低調。將定義、範例邊界或注意事項放在註解行中,而非主要標籤中。當文件本身已提供圖標題與說明文字時,請勿在圖片內重複它們。

3. 套用視覺系統

閱讀 references/style-spec.md 以了解確切的代碼與適應規則。參考樣式使用:

  • 白色背景、等寬的階段模組、細灰色外邊框;
  • 深藍色 → 青色 → 綠色的調色盤,在需要更多階段時以淺色調擴展;
  • 階段之間使用深色實心箭頭;
  • 每個階段一個白色線條圖示,選擇以符合階段含義;
  • 無漸層、陰影、剖面線填充、剪貼畫混合或裝飾性迴圈。

每當使用者要求使用 Microsoft YaHei 時,請使用真正的 Microsoft YaHei 檔案。明確使用 Matplotlib FontProperties(fname=...) 註冊常規與粗體字型檔案;不要依賴字型系列名稱查找或合成粗體。在匯出的 SVG 中驗證字型,若發現問題則報告字型問題,不要默默地取代為其他 CJK 字型。

對標題、組標籤、主要說明、行動文字與生命週期標籤使用粗體排版。僅對次要註解使用常規或低調文字。透過大小、顏色與留白保持層級可見,而非添加不必要的邊框。

4. 確定性繪製

偏好可重現的 Matplotlib/SVG 工作流程。從 scripts/draw_flowchart_template.py 開始,設定 orientation 與 stages,並將範例標籤替換為使用者的內容。將輔助功能保持獨立,用於:

  • 階段幾何與標題帶;
  • 標題線條圖示;
  • 對齊的分隔線;
  • 填滿的多邊形箭頭;
  • 可選的生命週期/實作帶;
  • 多格式匯出。

對於四階段水平佈局,使用 references/style-spec.md 中的參考幾何。對於其他階段數量,計算等寬模組寬度,並在標籤適合的情況下使用相同的外邊距、間隙寬度、標題高度與內容基準線。在縮小字型之前先縮短措辭。

匯出至少 300 dpi 的 PNG 加上可編輯的 SVG 與 PDF。設定 svg.fonttype = "none",以便在可能的情況下保持文字可搜尋/可編輯。僅在檢查獨立圖片後再將 PNG 或 PDF 嵌入稿件中。

5. 交付前的品質保證

以 100% 的比例檢查獨立圖片,然後檢查渲染後的稿件頁面。確認以下所有事項:

  • 所選的階段數量與閱讀方向是明確的;
  • 在所選佈局內,標題共享一致的基準線與高度;
  • 文字組在其分配的區域內垂直居中;
  • 虛線分隔線使用統一的虛線樣式、線寬、顏色、縮排與平衡的間距;
  • 所有階段使用相同的內部卡片策略;
  • 填滿的箭頭位於間隙中,不接觸邊框,並指向預期方向;
  • 可選的底部標籤對齊其父階段且大小足夠;
  • 圖示共享統一的筆畫寬度、顏色、比例與光學對齊;
  • 沒有文字接觸到彩色標題、分隔線、外邊框或輸出條;
  • 在稿件縮放後,沒有標籤換行或裁剪;
  • 嵌入後,圖編號/說明文字序列保持不變;
  • 匯出的 SVG 中包含 Microsoft YaHei Regular/Bold,而非非預期的後備字型。

對於 DOCX 交付,使用文件渲染技巧的渲染 → 檢查每一頁的迴圈。在每次幾何或字型更改後重新渲染。保留原始稿件,並將修改後的檔案寫入新的輸出路徑。

視覺範例

位於 assets/research-evidence-flow.png 的隨附圖片是一個重建的五階段研究證據鏈範例。它是合成的示範內容,不是使用者提供的圖表或專案資料。

調用範例

  • 「使用 $draw-process-flowchart 將此研究方法轉換為五階段的期刊圖表。」
  • 「使用 $draw-process-flowchart 以相同的顏色、箭頭、圖示與 Microsoft YaHei 字形垂直重新設計此工作流程。」
  • 「使用 $draw-process-flowchart 標準化此兩階段比較圖表,並匯出 PNG/SVG/PDF。」

Individual skills in this repo

This repo contains 2 individual skills — each has its own dedicated page.

相關技能