2022/08/08

Mermaid - Flowchart

Mermaid 是用 text 與 code 撰寫 diagrams 的語法,能夠用在 markdown 的 codeblock 裡面,目前支援的語法有 flowchart, sequence diagram, class diagram, state diagram, entity relationship diagram, gantt chart, user journey diagram。

Mermaid Live Editor 是線上編輯的工具,也可以在 Markdown 工具裡面試試看以沒有支援 mermaid,可在 code block 的 lang 填上 mermaid。

flowchart LR
    A-->B

實際上 render flowchart 會是這樣

Flowchart

Orientation

第一行 flowchart 後面要指定方向

  • TB - top to bottom
  • TD - top-down/ same as top to bottom
  • BT - bottom to top
  • RL - right to left
  • LR - left to right

Node

節點的前面是 id,後面是節點格式及文字

flowchat LR
id1(圓角節點)
id2([stadium-shaped node])
id3[[subroutine shaped node]]
id4[(cylindrical shaped Database)]
id5((circle))
id6{rhombus}
id7{{hexagon}}
id8[/parallelogram/]
id9[\parallelogram alt\]
id10[/trapezoid\]
id11[\trapezoid alt/]

實際上 render 會是這樣

flowchart LR
A --> B
C --- D
E --text on link---F
G --text on link2-->H
I ---|text on link|J
K -->|text on link|L
M -.-> N
O -. dotted link with text .-> P
Q ==> R
S == thick link with text ==> T
U -- chain --> V -- chain --> W
a --> b & c --> d
e & f--> g & h
i --o j
j --x k

實際上 render 會是這樣

特殊字元

" 把文字填在裡面,另外可用 #quote; 代表 :,支援 HTML character names

flowchart LR
id1["This is the (text) in the box"]
A["A double quote:#quot;"] -->B["A dec char:#9829;"]

可倍 render 為

flowchart LR
id1["This is the (text) in the box"]
A["A double quote:#quot;"] -->B["A dec char:#9829;"]

subgraph

語法為

subgraph title
    graph definition
end

subgraph subgraphid [title]
    graph definition
end

範例

flowchart TB
    c1-->a2
    d1-->a2
    subgraph one
    a1-->a2
    end

    subgraph two
    b1-->b2
    end

    subgraph sid1 [three]
    c1-->c2
    end

render 結果

flowcharts

可在 flowchart 之間加上 edges

flowchart TB
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end

    one --> two
    three --> two
    two --> c2

render

subgraph 之間加上方向(direction 語法在 MarkText 不支援)

flowchart LR
  subgraph TOP
    direction TB
    subgraph B1
        direction RL
        i1 -->f1
    end
    subgraph B2
        direction BT
        i2 -->f2
    end
  end
  A --> TOP --> B
  B1 --> B2

Interaction

當 js 為 securityLevel='strict' 這個功能會被 disable,securityLevel='loose' 則會 enabled

click nodeId callback
click nodeId call callback()

可在 js 增加 callback() function 讓 mermaid node 使用

<script>
  var callback = function(){
      alert('A callback was triggered');
  }
</script>

Styling a node

可設定不同的 border,或 background顏色

flowchart LR
    id1(Start)-->id2(Stop)
    style id1 fill:#f9f,stroke:#333,stroke-width:4px
    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5

render

用 classDef 可更方便地定義新的 style class

classDef className fill:#f9f,stroke:#333,stroke-width:4px;
class nodeId1 className;
class nodeId1,nodeId2 className;
%% 用 ::: 可快速指定 node 的 style class
A:::className
flowchart LR
    A:::someclass --> B
    classDef someclass fill:#f96;

render

References

mermaid github

網頁流程圖函式庫 mermaid.js

2022/08/01

物件導向設計 SOLID 原則

SOLID 是 Robert C. Martin 提出物件導向系統的五個設計原則,套用這些原則開發的系統,能夠更容易被維護與擴充功能。

S: Single Responsibility Principle 單一功能原則

O: Open-Close Principle 開放封閉原則

L: Liskov’s Substitution Principle 里氏替換原則

I: The Interface Segregation Principle 介面隔離原則

D: The Dependency Inversion Principle 依賴反轉原則

有些文件提供了六個設計原則,另外一個是

L: Law of Demeter 迪米特原则

單一功能原則

每個物件,不管是類別、函數,都只負責一項功能。

每個函數都只能有一種功能,這邊比較直覺,但類別的部分比較難判斷,什麼時候必須把有相近功能的函數放在同一個類別裡面。

可先利用使用/呼叫這個類別的其他類別的角色來判斷,例如網頁 rest Command,資料庫存取介面,然後在因應不同的 rest url 或是不同的 table 區分類別。

開放封閉原則

對功能擴充開放,對修改封閉。

要增加新的程式碼,擴充原有系統的新功能,而不是修改既有功能的程式碼。

已經正常運作的東西沒有壞掉,就不要任意修改的意思。這個方法最常用在維護舊系統程式碼的狀況,有時會遇到要修改其他人寫的程式,或雖然是自己寫的程式,但已經很久沒有看過,已經忘記當時的實作細節的時候,就要用擴充的方式去修改舊系統的程式。

開放封閉原則在大部分的情況下是正確的,但有時候一些舊系統的程式碼,已經很確定有明顯的錯誤或設計問題時,還是必須要狠心用力去修改,如果還是以擴充的方式去做,只會讓專案更亂。

里氏替換原則

程式中的物件可以在不改變程式正確性的前提下被它的子類別所替換的。

實作了 Interface 或是繼承了某個 class,在其他程式中,如果出現該 Interface 或是父類別時,都可以用 sub-class 取代。

如果類別繼承錯誤,父類別通過的測試,子類別未必可以通過。

介面隔離原則

針對不同的使用端,開放不同的使用介面。

類別之間,透過最小的介面互相溝通。

如果只使用一個介面,可能會造成 Fat Interface,產生很多多餘的程式碼,不容易維護。

依賴反轉原則

當 A 模組在內部使用 B 模組的情況下,我們稱 A 為高階模組,B 為低階模組。高階模組不應該依賴於低階模組,兩者都該依賴抽象介面。

透過介面,讓各類別的實作分開獨立,降低類別之間的耦合度。

迪米特原则

也被稱為最小知識原則

一個物件應該對其他物件保持最小的了解,也就是低耦合,高內聚

類別之間的耦合度越高,當一個類別改變時,對另一個類別的影響越多。

總結

S: 單一類別單一功能 O: 開放擴充,封閉修改 L: 父類別可用子類別替換 I: 類別之間以最小介面互相溝通 D: 利用介面抽象化

L(LoD): 類別之間低耦合

References

SOLID (物件導向設計) - 維基百科,自由的百科全書

09. 物件導向設計原則—SOLID - iT 邦幫忙::一起幫忙解決難題,拯救 IT 人的一天

物件導向程式設計五大原則:SOLID-软件开发平台及语言笔记大全(超详细)

使人瘋狂的 SOLID 原則

超易懂!原來SOLID原則要這麼理解 - 每日頭條

設計模式六大原則 - 每日頭條