PlantUML/Mermaid绘制Vue及Vuex状态图

题记

最近对PlantUML/Mermaid 产生了兴趣，花了些时间快速过了一遍官方文档。

不知道画点什么来练手，那就对着常见的图形画一遍。

虽没有那种用sketch或者ps画的漂亮，那么细腻。但是这种可以用代码直接生成图形的感觉很棒。

PlantUML及Mermaid 可以制作多种多样的图，时序图，流程图，泳道图，乃至甘特图。

下面的例子中只用到了流程图，我另外一篇就用到了泳道图。

理想化的研发流程

实例

单项数据流

PlantUML

@startuml
skinparam activity {
    FontColor          white
    AttributeFontColor white
    FontSize           17
    AttributeFontSize  15
    AttributeFontname  Droid Sans Mono
    BackgroundColor    #527BC6
    BorderColor        black
    ArrowColor         #222266
}
repeat
:State;
note right 
    全局的状态维护
end note
:View;
note right 
    视图（会根据状态变化刷新）
end note
:Actions;
note right 
    行为（可以改动状态）
end note
repeat while(true)
@enduml

Mermaid

graph LR
View(("View「视图层」👀")) -->|event| Actions
Actions(("Actions「行为层」🤘")) -->|dispatch->commit| State
State(("State「状态层」😆")) -->|re-render| View

Vuex

PlantUML

@startuml
skinparam activity {
    FontColor          white
    AttributeFontColor white
    FontSize           17
    AttributeFontSize  15
    AttributeFontname  Droid Sans Mono
    BackgroundColor    #527BC6
    BorderColor        black
    ArrowColor         #222266
}
partition Vuex {
    "State" --> [render]"Vue Components"
    "Vue Components" --> [Dispatch]"Actions"
    "Actions" --> [Commit]"Mutations"
    "Mutations" --> [Mutate]"State"
}
"Backend Api" --> "Actions"
"Actions" --> "Backend Api" 
"Mutations" --> "Devtools"
"Devtools" --> "Mutations" 
@enduml

Mermaid

graph LR
style VueComponents fill:#08b884,stroke:#08b884,stroke-width:4px
style Actions fill:#ffb749,stroke:#ffb749,stroke-width:2px
style Mutations fill:#e25963,stroke:#e25963,stroke-width:4px
style State fill:#8f7cb7,stroke:#8f7cb7,stroke-width:2px
style Backend fill:#577282,stroke:#577282,stroke-width:2px
style Devtools fill:#577282,stroke:#577282,stroke-width:2px
VueComponents -->|Dispatch| Actions((Actions))
subgraph Vuex
Actions --> |Commit| Mutations((Mutations))
Mutations --> |Mutate| State((State))
end
State --> |Render| VueComponents
Backend["Backend Api"] -.-> Actions
Actions -.-> Backend
Devtools -.-> Mutations
Mutations -.-> Devtools

Vue 2.x 生命周期图

PlantUML

@startuml
title edit review
skinparam activity {
    FontColor          white
    AttributeFontColor white
    FontSize           17
    AttributeFontSize  15
    AttributeFontname  Droid Sans Mono
    BackgroundColor    #527BC6
    BorderColor        black
    ArrowColor         #222266
}
(*)-->"new Vue()"
"new Vue()" --> "Init Events & Lifecycle"
"Init Events & Lifecycle" --> "beforeCreate"
"beforeCreate" --> "Init injections & reactivity"
"Init injections & reactivity" --> "created"
"created" --> "Has 'el' options?"
--> if "" then
    --> [YES]"Has 'template' option?"
    else 
    --> [NO]"when vm.$mount(el)  is called" 
    --> "Has 'template' option?"
    endif
if "" then
--> "Compile template into render function"
--> "beforeMount"
else
--> "Compile el's outerHTML as template"
--> "beforeMount"
endif
--> "Create vm.$el and replace 'el' with it"
--> Mounted
Mounted --> "Virtual DOM re-render and patch"
"Virtual DOM re-render and patch" --> Mounted
"Virtual DOM re-render and patch" --> beforeUpdate
"Virtual DOM re-render and patch" --> updated
Mounted --> "when vm.$destroy() is called"
--> beforeDestroy
--> "Teardown watchers,child components and event listeners"
--> Destroyed
@enduml

Mermaid

graph TD
style newVue fill:#31495c,stroke:#31495c,stroke-width:4px
style InitEventsLifecycle fill:#08b884,stroke:#08b884,stroke-width:2px
style breforeCreate fill:#fff,stroke:#ed989c,stroke-width:4px
style created fill:#fff,stroke:#ed989c,stroke-width:4px
style beforeMount fill:#fff,stroke:#ed989c,stroke-width:4px
style Mounted fill:#ed989c,stroke:#ed989c,stroke-width:4px
style beforeUpdate fill:#fff,stroke:#ed989c,stroke-width:4px
style updated fill:#fff,stroke:#ed989c,stroke-width:4px
style beforeDestroy fill:#fff,stroke:#ed989c,stroke-width:4px
style Destoryed fill:#ed989c,stroke:#ed989c,stroke-width:4px
style CTIRF fill:#08b884,stroke:#08b884,stroke-width:2px
style CLOAT fill:#08b884,stroke:#08b884,stroke-width:2px
style VDRP fill:#08b884,stroke:#08b884,stroke-width:2px
style TW fill:#08b884,stroke:#08b884,stroke-width:2px
style InitEventsLifecycle fill:#08b884,stroke:#08b884,stroke-width:2px
newVue["new Vue()"] --> InitEventsLifecycle["Init Events & Lifecycle"]
InitEventsLifecycle -.-> breforeCreate
breforeCreate --> InitInjectionsReactivity["Init injections & reactivity"]
InitInjectionsReactivity -.-> created
created --> HasElOption{"Has 'el' option?"}
HasElOption -.->|"No(when vm.$mounted(el) is called"|HasTemplateOption{"Has 'template' option ?"}
HasElOption -.->|"YES"|HasTemplateOption
HasTemplateOption -->|YES|CTIRF["Compile template into render function"]
HasTemplateOption -->|NO|CLOAT["Compile el's outerHTML as template"]
CTIRF -.-> beforeMount
CLOAT -.-> beforeMount
beforeMount --> CEREWI["Create vm.$el and replace 'el' with it"]
CEREWI -.-> Mounted((Mounted))
Mounted --> VDRP["Virtual DOM  re-render and patch"]
VDRP --> Mounted
VDRP -.->|"when data changes"|beforeUpdate
VDRP -.-> updated
Mounted -->|"when vm.$destroy() is called"|beforeDestroy
beforeDestroy --> TW["Teardown watchers,child components and event listeners"]
TW --> Destoryed((Destoryed))