baoyu-diagram

圖表產生器

建立多種圖表類型的專業 SVG 圖表。所有輸出都是單一自包含的 .svg 檔案，內嵌樣式和字型。

支援的圖表類型

類型	使用時機	主要特徵
架構圖	系統元件與關係	分組方塊、連接箭頭、區域邊界
流程圖	決策邏輯、流程步驟	菱形決策、圓角步驟方塊、方向性流程
序列圖	參與者之間的時間順序互動	垂直生命線、水平訊息、啟動條
結構圖	類別圖、ER 圖、組織圖	分隔方塊、類型化關係（繼承、組合）
心智圖	腦力激盪、主題探索	中央節點、放射狀分支、有機佈局
時間軸	時間順序事件	水平/垂直軸、事件標記、時間區間
示意圖	概念解釋、比較	自由形式佈局、圖示、註解、視覺隱喻
狀態機	狀態轉換、生命週期	圓角狀態節點、標籤化轉換、開始/結束標記
資料流圖	資料轉換管線	處理氣泡、資料儲存、外部實體

設計系統

色彩調色盤

元件類別的語意色彩：

類別	填色 (rgba)	邊框	用途
主要	`rgba(8, 51, 68, 0.4)`	`#22d3ee` (青色)	前端、使用者面向、輸入
次要	`rgba(6, 78, 59, 0.4)`	`#34d399` (翡翠綠)	後端、服務、處理
第三	`rgba(76, 29, 149, 0.4)`	`#a78bfa` (紫羅蘭)	資料庫、儲存、持久化
強調	`rgba(120, 53, 15, 0.3)`	`#fbbf24` (琥珀色)	雲端、基礎設施、區域
警示	`rgba(136, 19, 55, 0.4)`	`#fb7185` (玫瑰紅)	安全性、錯誤、警告
連接器	`rgba(251, 146, 60, 0.3)`	`#fb923c` (橘色)	匯流排、佇列、中介軟體
中性	`rgba(30, 41, 59, 0.5)`	`#94a3b8` (石板灰)	外部、通用、未知
強調色	`rgba(59, 130, 246, 0.3)`	`#60a5fa` (藍色)	活躍狀態、焦點、當前步驟

對於流程圖和序列圖，請根據角色（參與者、決策、流程）而非技術來分配顏色。

字體排版

使用內嵌 SVG @font-face 或系統等寬字型備援：

<style>
  @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&amp;display=swap');
  text { font-family: 'JetBrains Mono', 'SF Mono', 'Cascadia Code', monospace; }
</style>

字型大小依角色：

標題： 16px，粗細 700
元件名稱： 11-12px，粗細 600
子標籤/說明： 9px，粗細 400，顏色 #94a3b8
註解/備註： 8px，粗細 400
小標籤（箭頭上）： 7-8px

核心視覺元素

背景： #0f172a (slate-900) 搭配細微網格：

<defs>
  <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
    <path d="M 40 0 L 0 0 0 40" fill="none" stroke="#1e293b" stroke-width="0.5"/>
  </pattern>
</defs>
<rect width="100%" height="100%" fill="#0f172a"/>
<rect width="100%" height="100%" fill="url(#grid)"/>

箭頭標記（標準）：

<marker id="arrow" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
  <polygon points="0 0, 10 3.5, 0 7" fill="#64748b"/>
</marker>

箭頭標記（彩色）— 依需要為每種顏色建立：

<marker id="arrow-cyan" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
  <polygon points="0 0, 10 3.5, 0 7" fill="#22d3ee"/>
</marker>

開放箭頭（用於非同步/返回訊息）：

<marker id="arrow-open" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
  <polyline points="0 0, 10 3.5, 0 7" fill="none" stroke="#64748b" stroke-width="1.5"/>
</marker>

SVG 結構與圖層

按此順序繪製元素以獲得正確的 z 順序（SVG 從後往前繪製）：

背景填色 + 網格圖案
區域/群組邊界（虛線輪廓）
連接箭頭和線條
不透明遮罩矩形（與元件方塊相同位置，fill="#0f172a"）
元件方塊（半透明填色 + 邊框）
文字標籤
圖例（右下角或底部區域，在所有邊界之外）
標題區塊（左上角）

不透明遮罩矩形技巧至關重要 — 如果沒有它，半透明的元件填色會顯示底下的箭頭：

<!-- 遮罩層：不透明背景以隱藏箭頭 -->
<rect x="100" y="100" width="160" height="60" rx="6" fill="#0f172a"/>
<!-- 視覺層：樣式化元件 -->
<rect x="100" y="100" width="160" height="60" rx="6" fill="rgba(8,51,68,0.4)" stroke="#22d3ee" stroke-width="1.5"/>
<text x="180" y="125" fill="white" font-size="11" font-weight="600" text-anchor="middle">API Gateway</text>
<text x="180" y="141" fill="#94a3b8" font-size="9" text-anchor="middle">Kong / Nginx</text>

間距規則

這些規則可防止重疊 — 請嚴格遵守：

元件方塊高度： 50-70px（標準），80-120px（大型/複雜）
元件之間最小間距： 垂直 40px，水平 30px
箭頭標籤間距： 距離任何方塊邊緣 10px
區域邊界內距： 邊界內緣與包含元件之間 20px
圖例位置： 至少低於圖表最下方元件 20px
標題區塊： 距離左上角 20px，位於圖表內容區域之外
viewBox： 始終延伸以容納所有內容 + 四周 30px 內距

元件樣式

標準方塊（服務/流程）：

<rect x="X" y="Y" width="160" height="60" rx="6" fill="#0f172a"/>
<rect x="X" y="Y" width="160" height="60" rx="6" fill="FILL" stroke="STROKE" stroke-width="1.5"/>
<text x="CX" y="Y+24" fill="white" font-size="11" font-weight="600" text-anchor="middle">名稱</text>
<text x="CX" y="Y+40" fill="#94a3b8" font-size="9" text-anchor="middle">說明</text>

決策菱形（流程圖）：

<g transform="translate(CX, CY)">
  <polygon points="0,-35 50,0 0,35 -50,0" fill="#0f172a"/>
  <polygon points="0,-35 50,0 0,35 -50,0" fill="rgba(120,53,15,0.3)" stroke="#fbbf24" stroke-width="1.5"/>
  <text y="4" fill="white" font-size="10" font-weight="600" text-anchor="middle">條件？</text>
</g>

資料庫圓柱體：

<g transform="translate(X, Y)">
  <rect x="0" y="10" width="120" height="50" rx="2" fill="#0f172a"/>
  <ellipse cx="60" cy="10" rx="60" ry="12" fill="#0f172a"/>
  <ellipse cx="60" cy="60" rx="60" ry="12" fill="#0f172a"/>
  <rect x="0" y="10" width="120" height="50" fill="rgba(76,29,149,0.4)"/>
  <ellipse cx="60" cy="10" rx="60" ry="12" fill="rgba(76,29,149,0.4)" stroke="#a78bfa" stroke-width="1.5"/>
  <ellipse cx="60" cy="60" rx="60" ry="12" fill="rgba(76,29,149,0.4)" stroke="#a78bfa" stroke-width="1.5"/>
  <line x1="0" y1="10" x2="0" y2="60" stroke="#a78bfa" stroke-width="1.5"/>
  <line x1="120" y1="10" x2="120" y2="60" stroke="#a78bfa" stroke-width="1.5"/>
  <text x="60" y="40" fill="white" font-size="11" font-weight="600" text-anchor="middle">PostgreSQL</text>
</g>

區域邊界：

<rect x="X" y="Y" width="W" height="H" rx="12" fill="none" stroke="#fbbf24" stroke-width="1" stroke-dasharray="8,4"/>
<text x="X+12" y="Y+16" fill="#fbbf24" font-size="9" font-weight="600">AWS us-east-1</text>

安全群組：

<rect x="X" y="Y" width="W" height="H" rx="8" fill="none" stroke="#fb7185" stroke-width="1" stroke-dasharray="4,4"/>
<text x="X+10" y="Y+14" fill="#fb7185" font-size="8" font-weight="500">VPC / 安全群組</text>

類型特定佈局指引

將此 SKILL.md 檔案的目錄路徑確定為 {baseDir}。在開始佈局之前，請先閱讀特定圖表類型的參考檔案。參考檔案位於 {baseDir}/references/，包含詳細的佈局演算法和範例。

架構圖

→ 閱讀 {baseDir}/references/architecture.md

要點：從左到右或從上到下的資料流。將相關服務分組在區域邊界內。在層之間使用匯流排/連接器。將資料庫放在底部或右側。

流程圖

→ 閱讀 {baseDir}/references/flowchart.md

要點：從上到下的主要流程。菱形用於決策，出口箭頭上標示「是/否」。圓角矩形用於開始/結束。使用強調色表示快樂路徑。

序列圖

→ 閱讀 {baseDir}/references/sequence.md

要點：參與者作為頂部的方塊，垂直虛線生命線，水平箭頭表示訊息（實線=同步，虛線=返回）。時間向下流動。啟動條顯示處理。如果複雜則編號訊息。

結構圖

→ 閱讀 {baseDir}/references/structural.md

要點：分隔方塊（類別圖的名稱/屬性/方法）。關係線：實線加實心菱形=組合，實線加空心菱形=聚合，虛線箭頭=依賴，實線三角形=繼承。

心智圖

從中心概念自由放射狀佈局。使用有機曲線（帶三次貝茲曲線的 <path>）作為分支。使用調色盤變化分支顏色。中心節點字型較大，向外逐漸減小。

時間軸

水平或垂直軸線。事件標記為軸上的圓形或菱形。說明文字交替偏移到兩側以避免重疊。使用顏色分類事件類型。

狀態機

圓角矩形狀態，複合狀態使用雙邊框。實心圓形表示初始狀態，靶心表示最終狀態。曲線箭頭表示自轉換。所有轉換標籤使用 event [guard] / action 格式。

輸出規則

輸出單一 .svg 檔案 — 無外部依賴，除了 Google Fonts 匯入
設定 viewBox 以容納所有內容並加上 30px 內距；不要設定固定的 width/height 屬性（讓 SVG 響應式縮放）
在根 <svg> 元素上包含 xmlns="http://www.w3.org/2000/svg"
將所有 <style>、<defs>、標記和圖案放在 SVG 頂部
使用 text-anchor="middle" 實現置中標籤；確保文字不溢出方塊
中文文字支援： 當標籤包含中文字元時，使用 font-family: 'JetBrains Mono', 'Noto Sans SC', 'PingFang SC', sans-serif' 並增加方塊寬度 — CJK 字元較寬
儲存位置： 如果輸入是檔案，儲存到 {inputFileDir}/diagram/。否則儲存到 {projectDir}/diagram/{topic-slug}/。如果目錄不存在則建立

腳本

將此 SKILL.md 檔案的目錄路徑確定為 {baseDir}。腳本路徑：{baseDir}/scripts/main.ts。

解析 ${BUN_X} 執行環境：如果已安裝 bun → bun；如果可用 npx → npx -y bun；否則建議安裝 bun。

SVG → @2x PNG

儲存 SVG 後，將其轉換為 @2x PNG：

${BUN_X} {baseDir}/scripts/main.ts <svg-path> [options]

選項：

-s, --scale <n> — 縮放倍數（預設：2）
-o, --output <path> — 自訂輸出路徑（預設：<input>@2x.png）
--json — JSON 輸出

流程

從使用者請求中識別圖表類型
如果該類型有對應的參考檔案，則閱讀該檔案
規劃佈局：列出所有元件，決定分組和流程方向，計算位置
按照上述圖層順序撰寫 SVG
驗證間距規則 — 無重疊，圖例在邊界外，viewBox 足夠大
儲存 SVG 檔案
執行 ${BUN_X} {baseDir}/scripts/main.ts <svg-path> 以產生 @2x PNG
將兩個檔案呈現給使用者

您可能也喜歡

docker-expert

41Kdevops-cloud

您是進階的 Docker 容器化專家，具備全面的實務知識，涵蓋容器優化、安全強化、多階段建置、編排模式以及基於當前業界最佳實務的生產部署策略。

sickn33

獲取

import-infrastructure-as-code

37Kdevops-cloud

Import existing Azure resources into Terraform using Azure CLI discovery and Azure Verified Modules (AVM). Use when asked to reverse-engineer live Azure infrastructure, generate Infrastructure as Code from existing subscriptions/resource groups/resource IDs, map dependencies, derive exact import addresses from downloaded module source, prevent configuration drift, and produce AVM-based Terraform files ready for validation and planning across any Azure resource type.

github

獲取

devops-engineer

11Kdevops-cloud

Creates Dockerfiles, configures CI/CD pipelines, writes Kubernetes manifests, and generates Terraform/Pulumi infrastructure templates. Handles deployment automation, GitOps configuration, incident response runbooks, and internal developer platform tooling. Use when setting up CI/CD pipelines, containerizing applications, managing infrastructure as code, deploying to Kubernetes clusters, configuring cloud platforms, automating releases, or responding to production incidents. Invoke for pipelines, Docker, Kubernetes, GitOps, Terraform, GitHub Actions, on-call, or platform engineering.

jeffallan

獲取

繼續探索

瀏覽 devops-cloud 熱門 Skills 最近更新