Diagram Design · Interactive Gallery

選一種關係,看一個真正可用的圖

12 種圖型・同一套編輯設計語言・可澍科技自然風險案例

DATA FLOW · ROLE-SCOPED PIPELINE

自然風險資料,如何變成可採取行動的報告

角色是泳道、步驟是欄位;珊瑚橘只標示資料從分析準備跨入風險建模的關鍵交接。

Data Flow 最適合回答:「誰在什麼階段,接到什麼資料,再交出什麼?」
可澍科技自然風險資料流資料工程、風險分析與顧問團隊依序完成場址匯入、空間連結、風險計算、證據審查與報告發布。DATA ENGINEERRISK ANALYSTCONSULTANT匯入場址address → lat/lon串接自然資料WDPA · GBIF · ESA空間連結0.5 km · 2 km計算平台分數F1 · F2 · F3發布報告map · table · PDFRISK FEATURES
標準交接關鍵分析交接發布輸出

適合資料

有角色、階段、輸入與輸出欄位的工作流程。

互動建議

角色篩選、技術/商業視角、節點下鑽。

不要這樣畫

所有框同色、斜線亂穿、十幾條箭頭重疊。

STORY MAP · RELEASE SLICES

企業自然風險平台:第一版應該做到哪裡?

以可澍科技的「地圖+互動表格」工作流改寫為 User Story Map;橫向是使用順序,縱向是 MVP、下一版與 Later。

Story Map 不是地理地圖。它用一條 Release Cut,回答第一版到底要交付哪些使用者成果。
ACTIVITY 1
選擇企業場址
ACTIVITY 2
查看空間風險
ACTIVITY 3
核對證據表格
ACTIVITY 4
產出揭露報告
WALKING
SKELETON
搜尋據點
切換 0.5/2 km
排序風險分數
匯出結果
MVP
選單選擇據點MAP-101 · 3pt
顯示敏感度與分數RISK-114 · 5pt
RISK
地圖與表格同步TBL-128 · 8pt
PDF 摘要EXP-132 · 3pt
RELEASE 2
多場址比較MAP-205 · 5pt
F1/F2/F3 分解RISK-217 · 5pt
欄位註解與來源TBL-222 · 3pt
TNFD 對齊頁EXP-230 · 5pt
LATER
情境與年度預估MAP-310 · 8pt
授信工作流串接TBL-325 · 8pt

讀法

先橫向看完整故事,再往下看哪些成果被放進 MVP。

焦點

Release Cut+最高風險故事卡,恰好兩個 accent。

互動建議

點故事卡展開驗收標準,或切換不同 Persona。

GEO + INTERACTIVE TABLE

地圖負責看位置,表格負責查證據

案例欄位取自可澍科技互動報告:據點、區域、敏感度、平台分數、地址,以及 F1/F2/F3。

地圖與表格必須同步。否則使用者會看到兩套互不相干的答案。
SITE RISK VIEW

全部場址總覽

3SITES
7.8AVG SCORE
2 kmRADIUS
2HIGH RISK

篩選後據點明細

3 ROWS · PLATFORM EVIDENCE
據點區域敏感度F1 依賴F2 壓力F3 暴露平台分數地址
台中一廠台灣中部HIGH8.26.88.68.1台中市
高雄材料廠台灣南部MED6.17.26.66.6高雄市
河內供應商越南北部HIGH8.87.99.08.7Hanoi
GANTT · DELIVERY PLAN

八週完成自然風險分析與報告

時間是橫軸、任務是列;重點不是畫滿色條,而是看依賴、交接與關鍵路徑。

有開始日、結束日、負責人與依賴關係時,再用甘特圖。
八週專案甘特圖場址盤點、資料串接、空間分析、證據審查與報告發布的八週時程。W1W2W3W4W5W6W7W8場址與地址盤點自然資料串接0.5/2 km 空間分析證據審查互動報告發布
TIMELINE · EVIDENCE HISTORY

平台風險模型的四次成熟

Timeline 適合事件;如果是任務持續期間,請改用 Gantt。

每個節點只留「何時、發生什麼、為什麼重要」。
模型演進時間軸從資料盤點到雙尺度分析、平台分數與互動證據表的演進。PHASE 01場址盤點地址→經緯度PHASE 02雙尺度分析0.5 km/2 kmPHASE 03F1/F2/F3平台分數PHASE 04證據工作台地圖+表格
SWIMLANE · CROSS-FUNCTIONAL FLOW

從客戶場址到 TNFD 報告,責任在哪裡交接?

每條泳道是一個角色;只有跨泳道交接需要明確箭頭。

PM 最常用泳道圖找出「沒有人負責」與「來回等待」的地方。
角色需求資料分析審查交付
客戶 ESG提供場址確認解讀採取行動
資料工程欄位檢查串接 WDPA/GBIF空間 join
風險分析計算 F1/F2/F3證據核對
顧問敘事與揭露發布報告
QUADRANT · PRIORITIZATION

四個場址,先處理哪一個?

橫軸是自然風險,縱軸是營運重要性;象限不是貼標籤,而是支持資源排序。

軸必須能驅動決策;如果只是「好/壞」兩個抽象形容詞,象限沒有用。
場址風險優先矩陣台中一廠同時具有高自然風險與高營運重要性,應優先處理。台中一廠高雄材料廠河內供應商台北辦公室自然風險 →營運重要性 ↑
USER JOURNEY · ANALYST EXPERIENCE

風險分析師的一次完整查證旅程

階段、動作、痛點與機會排列在一起;情緒曲線只用來找出最需要改善的時刻。

Story Map 切版本;User Journey 找體驗痛點。兩者不要混在同一張圖。
匯入場址查看地圖核對證據產出報告
動作上傳地址切換半徑排序與篩選下載 PDF
痛點地址格式不一不知道半徑差異地圖與表格曾不同步來源說明不足
機會自動清理並排比較單一選取狀態附證據清單
情緒●●●○○●●●●○●●○○○●●●●○
ARCHITECTURE · SYSTEM BOUNDARIES

自然風險平台的最小可讀架構

保留五個真正影響理解的元件:輸入、資料層、分析引擎、證據庫與報告端。

架構圖不是把所有服務都畫出來,而是說清楚邊界、責任與主要路徑。
自然風險平台架構企業場址進入資料層,與自然資料整合後由分析引擎計算,再產出證據庫和互動報告。企業場址address · lat/lon自然資料層WDPA · GBIF · ESA風險分析引擎radius · F1 · F2 · F3證據庫score · source · trace報告HTML/PDF
SANKEY · QUANTITY FLOW

30 個場址的風險結果,最後流向哪種行動?

線帶寬度代表數量;只在「流量拆分與合併」是重點時使用。

如果線條寬度沒有數量意義,那就不是 Sankey,只是粗箭頭流程圖。
場址風險到管理行動 Sankey30 個場址依高、中、低風險分流,再對應立即改善、補充資料與例行監測。高風險 14中風險 10低風險 6立即改善補充資料例行監測
BAR · RANKING

場址平台分數排名

名稱長、需要排序時用橫條圖;高風險場址是唯一 accent。

排序比裝飾重要。原始 Excel 列順序通常不是觀眾需要的順序。
場址平台分數排名河內供應商 8.7 最高,其次為台中一廠 8.1。河內供應商8.7台中一廠8.1高雄材料廠6.6台北辦公室4.0
LINE · YEAR-OVER-YEAR

前幾年與今年:風險分數是否正在改善?

過去年度退成灰色,今年使用 accent;比較的是走勢形狀與轉折。

如果只比較兩個時間點,Slopegraph 往往比多條折線更清楚。
三年風險分數趨勢2026 年上半年風險分數下降,但第三季略有回升。Q1Q2Q3Q4NOW2026 回升
CASE INDEX · CROSS-INDUSTRY

同一種圖,放進不同工作才真正學得會

以下案例橫跨產品、專案管理、製造供應鏈、數據分析、地理資訊與行銷自動化。

先選「要回答的問題」,再選圖;產業只是換資料,不應綁死圖型。
DATA PLATFORM
多來源資料如何變成決策輸出

適用資料工程、金融徵信、醫療資料與顧問專案。

PROJECT ROOM
側邊欄+甘特+流程節點

適用 PM、系統導入、藥廠驗證與設計裝修。

GEO NETWORK
地圖、連線、tooltip 與明細

適用供應鏈、門市拓點、物流及公共政策。

PERFORMANCE
雷達圖+橫條排名

適用能力比較、產品評估、區域績效與問卷。

AUTOMATION
節點流程+實際操作測驗

適用 ManyChat、CRM、自動化工具與軟體培訓。

EVIDENCE
地圖與表格同步

適用需要查證來源、篩選與稽核的報告。

PROJECT ROOM · SIDEBAR NAVIGATION

專案不只一張甘特圖:用側邊欄建立完整敘事

參考你的 POC 結構,將總覽、需求、資料串接、甘特進度與交付成果分頁;示範系統導入案例。

側邊欄適合五個以上章節,讓會議中可以跳著講,也讓讀者知道自己在哪裡。
EXECUTIVE OVERVIEW

八週完成營運儀表板 MVP

8WEEKS
6DATA SOURCES
72%PROGRESS
3OPEN ISSUES

本週焦點:完成資料品質規則,進入使用者驗收。

ERP 訂單客服工單網站事件統一資料模型clean · join · metric營運儀表板KPI · ALERT
W1W2W3W4W5W6W7需求盤點資料串接儀表板設計使用者驗收上線移交
交付物負責人狀態驗收條件
資料字典資料工程完成欄位定義一致
互動儀表板BI 設計驗收中五項任務可完成
操作手冊顧問草稿新人可獨立操作
GEO NETWORK · TOOLTIP + ROUTES

匿名供應鏈地圖:點是據點,線是關係

參考你全球儀表板的地圖連線方式;名稱匿名化,tooltip 顯示區域、類型、量級與狀態。

地圖上的 tooltip 要回答「這是誰、為何重要、下一步是什麼」,不能只重複地名。
區域營運中心
類型:組裝
處理量:12.4K/月
狀態:需擴充
北區供應節點
類型:零件
交期:8 日
狀態:正常
海外物流節點
類型:轉運
準時率:91%
狀態:觀察
南區銷售節點
類型:通路
營收占比:18%
狀態:正常
匿名節點區域角色主要指標狀態
Node A東亞營運中心12.4K/月需擴充
Node B北區零件供應交期 8 日正常
Node C海外物流轉運準時率 91%觀察
RADAR + BAR · PERFORMANCE

雷達看輪廓,長條看排名

同一份資料用兩種圖回答不同問題:雷達圖比較多維能力結構,橫條圖回答誰高誰低。

雷達圖不適合精準讀值;旁邊補一張排序圖,讀者才不會只看到漂亮形狀。
轉換留存效率品質成長
REGION SCORE · SORTED
北區
88
中區
79
海外
71
南區
64

案例可替換成:員工能力、藥品競品、產品功能、城市指標、供應商表現。

AUTOMATION FLOW · PRACTICAL EXAM

ManyChat 實作課:左邊做流程,右邊即時驗收

參考你的實戰測驗,把節點流程、條件分支、操作任務、計時與分數放在同一畫面。

教軟體不能只有步驟截圖。讓學生真的完成任務,再以可觀察條件驗收。
關鍵字觸發留言包含「指南」
傳送歡迎訊息文字+按鈕
已追蹤?YES → 蒐集 Email
尚未追蹤NO → 提醒追蹤
交付內容標籤+連結
GEO + EVIDENCE TABLE · POLISHED EXAMPLE

地圖看空間關係,表格保留可稽核證據

參考聯發科平台實測報告的成熟結構,重新套用 diagram-design 的紙張灰、墨色與單一橘色焦點;資料與名稱已匿名化。

雙半徑不是裝飾切換:0.5 km 看場址腹地,2 km 看周邊環境脈絡。
11SITES IN BATCH
22–33SCORE RANGE
8 / 11HIGH SENSITIVITY
2PRIORITY SIGNALS
NORTH DISTRICTSCIENCE PARKSOUTH CORRIDOR
場址 A|營運中心
周圍敏感度:高
分數:33
主要訊號:斷層、水系
場址 B|研發大樓
周圍敏感度:高
分數:22
主要訊號:水系保護區
場址 C|資料中心
周圍敏感度:高
分數:33
主要訊號:活動斷層
場址 D|辦公大樓
周圍敏感度:中
分數:22
主要訊號:溪流
場址 E|研發基地
周圍敏感度:中
分數:22
主要訊號:景觀尺度差異
場址 F|製造基地
周圍敏感度:低
分數:11
主要訊號:0.5 km 無交集
高敏感度
中敏感度
低敏感度
點選場址可同步定位下方證據列;hover 可查看摘要。示意底圖|資料與名稱已匿名化

據點明細與平台證據

6 VISIBLE SITES · 0.5 KM
場址用途位置敏感度周圍敏感度平台分數主要敏感圖層/證據優先訊號
場址 A營運中心低高33水系保護區、活動斷層物種訊號 α
場址 B研發大樓低高22水系保護區、山崩地滑物種訊號 β
場址 C資料中心低高33活動斷層、取水口範圍物種訊號 γ
場址 D辦公大樓低中22溪流、景觀尺度交集—
場址 E研發基地低中22水系保護區物種訊號 δ
場址 F製造基地低低110.5 km 無敏感圖層交集持續監測
BUTTON ATLAS · 8 ROLES + STATES

按鈕不是裝飾:先決定角色,再決定外觀

整理自你 0914 參考資料。每一顆都能實際按;hover、active、loading 與回饋狀態都保留。

一頁只保留一個主要行動,其餘按鈕必須主動退後。
01 SOLID

主要實心

全頁最重要的行動。

02 ACCENT

強調色實心

需要明確承諾的節點。

03 OUTLINE

次要線框

與主操作並列但次一級。

04 TEXT

文字按鈕

最低層級,不搶畫面。

05 ICON

圖示按鈕

空間小且圖示含義明確。

06 SEGMENTED

分段控制

同一維度切換,不是導覽。

07 DANGER

危險操作

破壞性動作不可與主色混用。

08 LOADING

載入狀態

使用者需要知道系統有回應。

SIDEBAR ATLAS · 4 NAVIGATION PATTERNS

側邊欄有四種目的,不是都畫成一條深色矩形

固定導覽、懸浮導覽、工具軌道、情境面板,各自對應不同的資訊關係。

章節導覽放左邊;檢查、屬性與即時資訊通常放右邊。
01 FIXED NAVIGATION

固定章節側欄

02 FLOATING ISLAND

懸浮浮島側欄

03 TOOL RAIL

圖示工具軌道

04 CONTEXT PANEL

右側情境面板

TIMELINE · PRODUCT EVOLUTION

十四個月產品發展:事件、里程碑與決策脈絡

間距依真實月份比例配置;hover 每個事件可查看成果、指標與下一步。

Timeline 呈現「何時發生什麼」;不是把專案任務全部塞成一條線。
FEB 2025研究啟動訪談 12 位使用者
確認三個核心痛點:資料分散、缺乏比較、報告難以稽核。
APR 2025Prototype v1地圖+明細表
完成第一版可點擊原型;任務成功率 58%。
JUL 2025MVP 上線首批 120 位使用者
關鍵里程碑:整合資料匯入、圖表篩選與 PDF 匯出。
SEP 2025Design v2任務成功率 81%
重新設計側邊欄與篩選器;平均操作時間下降 34%。
DEC 2025企業版權限與稽核軌跡
加入角色權限、資料版本與證據追蹤。
APR 2026正式規模化8 種圖表模板
完成跨產業模板、互動圖表與教學案例庫。
GANTT · DELIVERY CONTROL

十週系統導入:進度、負責人、依賴與今天

不只畫色條;每列包含實際進度,hover 顯示負責人、交付物與依賴。

甘特圖回答的是時間與依賴,不是用彩色條把工作清單重新畫一次。
TASK / WEEK
W1
W2
W3
W4
W5
W6 · TODAY
W7
W8
W9
W10
需求與成功指標
資料盤點與權限
串接與品質規則
儀表板與互動
使用者驗收 UAT
教育訓練與上線
BAR · MULTI-METRIC COMPARISON

各區域營運表現:營收、轉換率與去年同期

完整資料、雙軸、排序、資料標籤與 tooltip;不再只有四根沒有脈絡的色條。

長條圖的價值在比較;tooltip 應補充數值與變化原因,不要只重複軸標。
LINE · YEAR-OVER-YEAR TREND

三年趨勢、目標線與關鍵事件

12 個月完整資料、去年同期、今年表現與年度目標;hover 可讀精確數值。

趨勢圖要讓人找到轉折與原因,而不是只畫一條漂亮曲線。
BUBBLE MATRIX · 14 REAL RECORDS

排放量 × 自然敏感度:十四個匿名場址的投資優先序

保留實測資料的排放量級與敏感度分布,只匿名化公司與場址;圓越大代表排放量越高,hover 可讀完整紀錄。

這不是四顆示意圓:每一點都是一筆場址資料,能回答「高曝險又高排放的是誰」。
11 / 14HIGH OR VERY HIGH
806,332MAX EMISSIONS
27,595MIN EMISSIONS
14TRACEABLE SITES
場址排放量敏感度行動
RADAR + RANKING · REAL RISK PROFILE

三類據點的風險輪廓,與十個高分場址排名

熱浪、淹水、乾旱沿用實際資料結構;雷達看輪廓,橫條精準讀值,兩張圖都提供 tooltip。

同一資料用兩種圖回答兩個問題:風險長什麼樣,以及到底誰最該先處理。
5.0TOP COMPOSITE SCORE
30TAIWAN SITES
15GLOBAL SITES
10SUPPLY ROUTES

三類據點風險輪廓

綜合風險分數排名

GLOBAL SUPPLY NETWORK · 10 REAL ROUTES

全球素材來源、處理中心與供應占比

保留十條供應路徑的座標、占比與風險分數;來源與素材改為 A、B、C。點標記、線與表格皆可點擊並顯示細節。

地圖在左、資料表在右;點列資料會立即 zoom 到來源地,首頁按鈕可回到全球全貌。
10ACTIVE ROUTES
4.9HIGHEST RISK
100%LARGEST SHARE
3DESTINATION HUBS
來源處理中心虛線粗細=供應占比
路徑素材占比風險
SANKEY · QUANTIFIED MATERIAL FLOW

十條真實供應紀錄,如何流向三個處理中心

線寬對應供應占比;hover 每條線可讀素材、來源、目的地、占比與綜合風險。

這張圖和全球地圖使用同一批資料:地圖回答「在哪裡」,Sankey 回答「多少流向哪裡」。
來源素材類型處理中心
來源素材占比分數
資料庫關聯圖 · 多來源整合案例

五種資料來源,如何整理成一套可追溯的決策儀表板

借用既有多來源儀表板的整合思路,重新匿名化為資料來源 A–E;保留時間、地區、人口、狀態與事件之間真正需要的關聯。

這張圖不是教資料庫語法,而是讓非技術讀者看懂:每張圖的數字從哪裡來、靠什麼欄位接起來。
5SOURCE DOMAINS
1UNIFIED EVENT TABLE
4SHARED DIMENSIONS
4DASHBOARD OUTPUTS
01 原始資料來源
02 標準化關聯模型
03 儀表板輸出
資料來源 AEVENT API
事件識別碼文字
發生日期日期
分類狀態代碼
匿名化的案件/事件登錄資料;保留事件時間與分類狀態。
資料來源 BLIVE FEED
到訪時間時間戳
訊號類型代碼
數量整數
近即時訊號來源,用來比對正式事件與前兆變化。
資料來源 CREFERENCE
區域代碼外鍵
人口數整數
統計年度年份
人口基準資料,讓原始數量可換算成標準化率值。
資料來源 DGEO LAYER
區域識別碼主鍵
區域幾何多邊形
區域名稱文字
區域邊界與地理名稱,支援分區著色及空間篩選。
資料來源 EFACILITY
據點識別碼主鍵
經緯度座標
服務類型分類
服務據點位置,用於點位、距離與可及性分析。
整合事件紀錄FACT TABLE
event_id主鍵
date_id外鍵
area_id外鍵
status_id外鍵
event_count數值
所有視覺輸出的共同事實表;原始資料先在此統一時間、地區與狀態。
時間維度DIM
date_id主鍵
週/月/年欄位
人口維度DIM
population_id主鍵
基準人口數值
區域維度DIM
area_id主鍵
名稱/幾何欄位
狀態維度DIM
status_id主鍵
分類/版本欄位
城市趨勢LINE + BAR
週/月變化時間序列
實際 vs 預測比較
族群分析SMALL MULTIPLES
年齡/類別群組
標準化率指標
區域地圖CHOROPLETH
區域分布地圖
點選明細表格
熱點與服務可及性HEATMAP
事件密度熱點
鄰近據點距離
實線=資料流 虛線框=共用維度 橘色=目前選取路徑