建立清晰的圖表
使用已安裝的 graphics CLI 作為確定性介面。保留已建立的 .diagram.json 原始檔;將 .light.svg、.dark.svg、.light.png、.dark.png 以及 .tldr 視為可取代的匯出產物。
嚴格遵循提示
將使用者的提示視為完整的內容規格。
- 保留提供的標籤、數值、關係、相對大小及省略的部分。
- 僅添加繪製這些事實所需的中立機制。
- 不要自行發明標題、副標題、圖例、註解、範例、含意、類別、度量、刻度、連接線或裝飾性宣稱。
- 不要將簡短標籤擴展成句子。優先使用使用者原本的一到三個字詞的標籤。
- 在更新時,移除被拒絕的內容,不要用新的闡述來取代它。
尋找來源
- 閱讀本地儲存庫的指示,尋找
graphics.config.*。 - 在建立新的
.diagram.json之前,先搜尋現有的相同主題.diagram.json。 - 更新該來源,而不是編輯產生的圖像或建立重複的檔案。
- 在含有
kb/的知識庫中,使用kb/diagrams/<slug>.diagram.json,並與kb/notes/<slug>.md配對。根據主機的慣例嵌入或連結已渲染的淺色/深色圖像,並透過筆記而非二進制畫布來連結知識。 - 在知識庫之外,預設使用
diagrams/<slug>.diagram.json。
編排視覺效果
在建立或大幅重新設計圖表之前,請閱讀 visual-communication.md。
深入套用這些預設值:
- 對一般概念使用圓角矩形。相同角色的元素應獲得相同的大小、圓角半徑、筆劃粗細、圖示大小以及標籤處理方式。
- 在相連的形狀之間至少保留 96px(最好是 120–200px),以便箭頭看起來是關係而不是接縫。
- 將圖示直接放在其語義形狀內部。不要將有邊框的圖示瓦片放在另一個有邊框的卡片內部。
- 當提示允許抽象化時,使用三到七個主要元素。
- 建立明確的閱讀順序,並將同層級的元素對齊到共享的格線。
- 使用空白(在邊框、顏色或文字之前)來分隔群組。
- 最多對一個語義區別使用顏色。永遠不要做出任意的尺寸或樣式變更,而暗示提示未提供的差異。
- 讓圖示保持輔助性:標籤仍必須承載意義。
- 每個物件偏好一個可見邊界,每條軸線或連接線偏好一個可見筆劃。
不要為了滿足這些偏好而「改善」文字資料。提示具有最終決定權。
建立與渲染
使用公開的 schema URL,或執行 graphics init 來取得起始檔:
graphics check diagrams/<slug>.diagram.json --strict
graphics render diagrams/<slug>.diagram.json
渲染指令會覆寫同名稱的所有匯出產物。在版面或對比度不確定時,檢查淺色與深色兩者的輸出。處理所有有用的 lint 發現;變更來源,然後重新渲染。
如果儲存庫使用自己的字型或圖示套件,請閱讀 customization.md。不要將 MonoLisa 或其他授權字型加入儲存庫。預設渲染會使用系統的無襯線字型堆疊。
謹慎使用 tldraw
產生的 .tldr 檔案是可編輯的交換格式,且不需要 tldraw SDK 或桌面應用程式即可建立。當有人想要直接編輯畫布時,可以在 tldraw Offline 中開啟它:
graphics open diagrams/<slug>.tldr
如果缺少可選應用程式,graphics desktop install 會解析目前官方版本,驗證其發布的 SHA-256 雜湊值,然後啟動平台安裝程式。該應用程式會將 .tldr 匯入為未儲存的文件;在該處儲存文件以建立其較新的原生 .tldraw 套件。永遠不要直接改寫原生的 .tldraw ZIP/SQLite 套件。
驗證
- 執行
graphics check <source> --strict。 - 執行
graphics render <source>。 - 確認所有五個產物都存在於來源旁或指定的輸出目錄中。
- 以實際大小檢查淺色與深色輸出。
- 確認同層級的形狀不會暗示錯誤的差異。
- 確認連接線夠長、在
.tldr中綁定到預期的形狀,且不會穿過標籤。 - 如果需要附帶的筆記,請確認其路徑和視覺參考。