“一圖勝千言”高度概括了通過圖形來描述技術實作、項目進度、性能瓶頸等項目場景比文字描述更有視覺沖擊力及直覺明了。前端項目在實施的過程中也會産生大量“度量衡”資料，這些資料借助特定的圖形也能友善項目參與者及時了解項目近況，以便做出決策。
本篇内容将補充些 UML、Scrum 等相關圖形，以便更加便捷交流。UML 中重點介紹類圖和時序圖，它們在工程師的技術實作方案中較為常見且重要，應該充分掌握。Scrum 中挑選了燃盡圖和甘特圖作為掌握的内容項，以便項目者了解任務項的安排及任務消耗情況，屬于項目管理工具範疇，應當了解。最後介紹火焰圖，一種友善工程師排查性能瓶頸的工具。“工欲善其事必先利其器”，上述工具圖均能在項目實施的各個環節起到便捷溝通交流提效的作用。後續章節的項目架構方案中會涉及到大量上述工具圖的應用。
類圖(Class diagram)
主要描述系統的結構化設計，用類圖可以顯示出類、接口（抽象類）以及它們之間的靜态結構和關系。類圖中包含類(Class)、抽象類(Abstract Class)/接口(Interface)以及類之間的關系等三類元素。
UML-類圖
| 關系 | 說明 |
| 泛化(generalization) | 用一條帶空心箭頭的直接表示，屬于類的繼承結構，注：最終代碼中，泛化關系表現為繼承非抽象類。 |
| 實作(realize) | 用一條帶空心箭頭的虛線表示，屬于類的繼承結構，注：最終代碼中，實作關系表現為繼承抽象類 |
| 聚合(aggregation) | 用一條帶空心菱形箭頭的直線表示，表示整體由部分構成的語義，整體和部分不是強依賴的，即使整體不存在了，部分仍然存在 |
| 組合(composition) | 用一條帶實心菱形箭頭直線表示，表示整體由部分構成的語義，是一種強依賴的特殊聚合關系，如果整體不存在了，則部分也不存在了 |
| 關聯(association) | 用一條直線表示的；它描述不同類的對象之間的結構關系；它是一種靜态關系， 通常與運作狀态無關，一般由常識等因素決定的；它一般用來定義對象之間靜态的、天然的結構； 是以，關聯關系是一種“強關聯”的關系。注：在最終代碼中，關聯對象通常是以成員變量的形式實作的。 |
| 依賴(dependency) | 用一套帶箭頭的虛線表示，描述一個對象在運作期間會用到另一個對象的關系。注：在最終代碼中，依賴關系展現為類構造方法及類方法的傳入參數，箭頭的指向為調用關系；依賴關系除了臨時知道對方外，還是“使用”對方的方法和屬性。 |
時序圖(Sequence Diagram)
是顯示對象之間互動的圖，這些對象是按時間順序排列的。順序圖中顯示的是參與互動的對象及其對象之間消息互動的順序。時序圖中包括的模組化元素主要有：角色（Actor）、生命線（Lifeline）、控制焦點（Focus of control）、消息（Message）等等。
UML-時序圖
| 元素 | 說明 |
| 角色(Actor) | 可以是人、及其甚至其他的系統或者子系統 |
| 生命線(Lifeline) | 生命線在順序圖中表示為從對象圖示向下延伸的一條虛線，表示對象存在的時間 |
| 控制焦點(Focus of Control) | 控制焦點是順序圖中表示時間段的符号，在這個時間段内對象将執行相應的操作。用小矩形表示 |
| 消息(Message) | 消息一般分為同步消息（Synchronous Message），異步消息（Asynchronous Message）和傳回消息（Return Message） |
燃盡圖(Burdown Chart)
項目管理用工具，是用于表示剩餘工作量的工作圖表，由橫軸（X）和縱軸（Y）組成，橫軸表示時間，縱軸表示工作量。這種圖表可以直覺的預測何時工作将全部完成，常用于軟體開發中的靈活軟體開發方式，也可以用于其他類型的工作流程監控。
燃盡圖
甘特圖(Gantt Chart)
項目管理用工具，也稱為條狀圖(Bar chart)，基本是一條線條圖，橫軸表示時間，縱軸表示活動(項目)，線條表示在整個期間上計劃和實際的活動完成情況。它直覺地表明任務計劃在什麼時候進行，及實際進展與計劃要求的對比。
甘特圖
火焰圖(Flame Graph)
看起來就像一團跳動的火焰，是以得名。火焰圖可以将 CPU 的使用情況可視化，使我們直覺地了解到程式的性能瓶頸，通常要結合作業系統的性能分析工具（profiling tracer）使用。
https://www.brendangregg.com/flamegraphs.html
https://www.brendangregg.com/FlameGraphs/cpu-mysql-updated.svg
火焰圖