一直在尋找能夠將程式碼在開發中進行視覺化，或者流程化的工具，之前也找了很多相關的UML工具
其實當時後漏掉另一個厲害的 UML工具
Jetbrain付費版IDE的UML Tools
最主是目前這些工具都需要手動或者被動產生UML圖表，與程式碼無法及時同步，花了很多時間拉出圖，當未來有什麼異動，還是需要時間整理，久了就無法持續下去，而官方的這個工具是與你的程式碼同步的，可惜是他是付費版本的IDE才有的內建功能
與LLM (AI)的整合
而現在的uml描述語言主要應該有plantuml與 mermaid 等等，之前用了claude的artifacts 功能，也就是可以及時preview由llm產生的html or mermiad語法，直接視覺化的看到產生結果，立刻可以進行修正或者調整
Claude Artifacts
這邊我只要將我的kotlin class的定義丟幾個給他，並且加上一些提示，就可以產生這樣的圖表，詳細的語法其實是這樣
classDiagram
class ParkExperienceSettings {
-experienceType: ExperienceType
+currentMode: String
+currentAttractionType: String
+currentPriorityPass: String
+DEFAULT_SETTINGS: ParkExperienceSettings$
}
class ExperienceType {
<<enumeration>>
EXPERIENCE_TYPE_A
EXPERIENCE_TYPE_B
EXPERIENCE_TYPE_C
EXPERIENCE_TYPE_SPECIAL
+value: Int
+parse(value: Int): ExperienceType$
}
class ParkMap {
+currentVisitorId: VisitorId?
+visitorList: List<ParkVisitor>
+defaultAttraction: ExperienceOption
+specialAttraction: ExperienceOption?
}
class ParkVisitor {
+experienceOption: ExperienceOption
}
class AttractionProperties {
+id: String?
+attractionName: String?
+attractionData: AttractionData
+capacityLimit: Int?
+heightRequirement: Int?
+familyFriendlyOnly: Boolean
+experienceMethod: ExperienceMethod
}
class AttractionData {
+nameId: Int
+shortNameId: Int
+descriptionId: Int
+mapKey: String
+parkIndex: Int
+queueIndex: Int
+imageId: Int
+locationPath: String
+attractionIconIndex: Int
+attractionTypeValue: AttractionType
+attraction: Attraction
+analyticsName: String
}
class AttractionType {
<<enumeration>>
ATTRACTION_ROLLERCOASTER
ATTRACTION_WATERRIDE
ATTRACTION_FAMILYRIDE
ATTRACTION_THRILL_RIDE
ATTRACTION_KIDDIE_RIDE
ATTRACTION_DARK_RIDE
ATTRACTION_SHOW
ATTRACTION_VR_A
ATTRACTION_VR_B
ATTRACTION_VR_C
ATTRACTION_VR_D
+value: Int
+fromInt(value: Int): AttractionType$
}
class ExperienceMethod {
<<enumeration>>
EXP_METHOD_STANDARD
EXP_METHOD_EXPRESS
EXP_METHOD_NO_THRILL
EXP_METHOD_THRILL_SEEKER
EXP_METHOD_BEGINNER
EXP_METHOD_INTERMEDIATE
EXP_METHOD_ADVANCED
+value: Int
+fromInt(value: Int): ExperienceMethod$
}
class ExperienceOption {
-experienceIdx: ExperienceType
+attractionValue: AttractionType
+experienceMethod: Int
+isPriorityPass: Boolean
+attractionProperties: AttractionProperties?
-isUsingDefaultPlan: Boolean
+setUseDefaultPlan(enable: Boolean): void
+getExperienceIdx(): ExperienceType
+isUsingFastTrack: Boolean
}
class Attraction {
<<interface>>
}
class ExperienceMethodUiOption {
<<enumeration>>
BEST_EXPERIENCE
BEST_WITH_PRIORITY
SHORTEST_QUEUES
THRILL_SEEKER
FAMILY_FRIENDLY
RELAXED_PACE
ALL_INCLUSIVE
+index: Int
}
ParkExperienceSettings --> ExperienceType
ParkMap --> VisitorId
ParkMap --> ParkVisitor
ParkMap --> ExperienceOption
ParkVisitor --> ExperienceOption
AttractionProperties --> AttractionData
AttractionProperties --> ExperienceMethod
AttractionData --> AttractionType
ExperienceOption --> ExperienceType
ExperienceOption --> AttractionType
ExperienceOption --> AttractionProperties
AttractionData --> "1" Attraction
ParkMap "1" --> "0..1" VisitorId : currentVisitorId
ParkMap "1" --> "0..*" ParkVisitor : visitorList
ParkMap "1" --> "1" ExperienceOption : defaultAttraction
ParkMap "1" --> "0..1" ExperienceOption : specialAttraction對於一次性的架構分析，算是很方便，但如果我經常要回頭來看架構跟分析，每次都必須這樣做嗎? 其實就非常的麻煩，工程師的想法，
”既然要改，那就改天吧”
最後就會無疾而終
AI動態產生Mermaid
於是就有一個IDEA，但還沒有時間來實作
LLM + Jetbrains IDE Plugin + Mermaid Preview 介面
有時候我們也不是要看到所有的流程與物件，僅需要關注某些，也就是如果有用過Github Copilot Chat，他可以再sidebar讓你選擇你校針對詢問的檔案有那些，因此就想模仿他這樣的介面，透過選擇想要繪製的檔案加入，又或者ai可以進一步的建議要加入繪製的class，然後下面是初步的想法
- 選擇想要繪製的class
- 透過AI建議其他可能可以引入的class
- 透過Local LLM進行隱私資料去除或者提醒 (譬如你當中剛好提到公司敏感資訊或是不想被看到的東西)
- 經過Local LLM處理後的class，就可以丟到Cloud LLM + Prompt請他產生mermaid語法
- 在Plugin中直接顯示 html +mermaid.js + mermaid語法的preview結果
這樣預期可以快速地分析或者更新處目前程式碼的架構與流程，搭配不同的uml diagram，甚至如果可以在上面再加上一些註解或者標示，對於debug或是流程追朔，都會是非常方便的事情，也就不在需要手動在那邊化流程圖
示意圖
以上是很初步的idea，也希望有時間能夠把它做出來
參考
