PlantUML
- 如何使用模板
- 時序圖樣版 Sequence Diagram Template
- Web3.0 概念: tpl-web123-v1.iuml
- HTTP 概念: tpl-story-http-v1.iuml
- Exit, Voice and Loyalty《叛離、抗議與忠誠》: tpl-evl-v1.iuml
- The Site Reliability Workbook Ch2 - Implementing SLOs : tpl-sre-slos-v1.iuml
- Random Oracle tpl-random-oracle-v1.iuml
- DNS-over-HTTPS (DoH) tpl-doh-dns-https-v1.iuml
- Crypto Custody : tpl-custody-fork-v1.iuml
- 法國大革命 : tpl-French-Revolution-v1.iuml
- 組件圖樣板 Component Diagram Template
- 狀態圖樣版 State Diagram Template
如何使用模板
先看過 Preprocessing - PlantUML，模板採用 iuml 副檔名前面加上 tpl，引入語法如下。
!include tpl-web123-v1.iuml
使用 tpl-web123-v1 解說 DAO
tpl-web123-v1.iuml 內容
@startuml
actor "消費者\nAlice" as Alice #red
participant "Browser\n瀏覽器\nBrowser" as Browser
participant "Service\n那個平台\nSRV" as SRV
collections "HTTP Server\n超文本傳輸協定服務\nHTTPD" as HTTPD
actor "生產者\nBob" as Bob #yellow
== 100 寫 HTML ==
autonumber 101
Bob -> HTTPD : 上傳或產生 HTML
note left
文字創作、圖片、歌曲、影片、
人際關係、個資、身分識別
end note
== 200 給 HTTP RESPONSE ==
autonumber 201
HTTPD -> Browser : HTTP/1.1 200 OK\n內容 HTML
Browser -> Alice : 解析HTML內容後\n展現在瀏覽器裡面
== 300 Web 1.0 免費白吃的午餐 ? 注意力與隱私商品化 ==
autonumber 301
Alice <-> SRV : 給我內容
SRV <-> Bob : 生產內容
Bob <-> SRV : $💰$ 誰來付錢 $💰$
== 400 Web 2.0 免費的商品 ==
autonumber 401
SRV <-> Alice : 消費者免費拿到內容\n給平台收賣個資
SRV -> SRV : 💰💰💰💰💰💰💰
Bob <-> SRV : 消費者變成生產者\n在平台販售內容。
== 500 Web 3.0 去媒介平台 ==
autonumber 501
Bob -> Alice : 消費者變成生產者，買賣不經那個平台
Alice -> Bob : 生產者變成消費者，買賣不經那個平台
@enduml
套版加上 DAO 的說明
web123-v1.puml 套用模板
@startuml
header DLTDOJO3
footer
https://dltdojo.github.io/taichu-crypto/
Licensed under the Apache License Version 2.0
<img:../images/qr-taichu-crypto.png{scale=0.5}>
end footer
title dltdojo3-web123-v1
legend top
那個 Web x.0 的故事
endlegend
skinparam handwritten true
!include tpl-web123-v1.iuml
'這裡以下都是新增
== 600 Web 3.0 DAO ==
autonumber 601
participant "DAO" as DAO
Alice -> DAO : 加入 DAO
Bob -> DAO : 加入 DAO
Bob <-> Alice : 消費者變成生產者，買賣不經那個平台。
DAO -> Alice : 💰💰💰
DAO -> Bob : 💰💰💰
@enduml
PlantUML Online Demo Service 效果
如要外部使用可以利用下列連結，利用線上服務 PlantUML Online Demo Service 利用下列方式加入模板。
引用
!include https://dltdojo.github.io/taichu-crypto/puml/tpl-web123-v1.iuml
時序圖樣版 Sequence Diagram Template
Web3.0 概念: tpl-web123-v1.iuml
內容
@startuml
actor "消費者\nAlice" as Alice #red
participant "Browser\n瀏覽器\nBrowser" as Browser
participant "Service\n那個平台\nSRV" as SRV
collections "HTTP Server\n超文本傳輸協定服務\nHTTPD" as HTTPD
actor "生產者\nBob" as Bob #yellow
== 100 寫 HTML ==
autonumber 101
Bob -> HTTPD : 上傳或產生 HTML
note left
文字創作、圖片、歌曲、影片、
人際關係、個資、身分識別
end note
== 200 給 HTTP RESPONSE ==
autonumber 201
HTTPD -> Browser : HTTP/1.1 200 OK\n內容 HTML
Browser -> Alice : 解析HTML內容後\n展現在瀏覽器裡面
== 300 Web 1.0 免費白吃的午餐 ? 注意力與隱私商品化 ==
autonumber 301
Alice <-> SRV : 給我內容
SRV <-> Bob : 生產內容
Bob <-> SRV : $💰$ 誰來付錢 $💰$
== 400 Web 2.0 免費的商品 ==
autonumber 401
SRV <-> Alice : 消費者免費拿到內容\n給平台收賣個資
SRV -> SRV : 💰💰💰💰💰💰💰
Bob <-> SRV : 消費者變成生產者\n在平台販售內容。
== 500 Web 3.0 去媒介平台 ==
autonumber 501
Bob -> Alice : 消費者變成生產者，買賣不經那個平台
Alice -> Bob : 生產者變成消費者，買賣不經那個平台
@enduml
引用
!include https://dltdojo.github.io/taichu-crypto/puml/tpl-web123-v1.iuml
HTTP 概念: tpl-story-http-v1.iuml
內容
@startuml
actor "消費者\nAlice" as Alice #red
participant "瀏覽器\nBrowser" as Browser
collections "超文本傳輸協定服務\nHTTPD" as HTTPD
participant "那個平台\nSRV" as SRV
actor "生產者\nBob" as Bob #yellow
== 100 寫 HTML ==
autonumber 101
Bob -> SRV : 註冊或架設
Bob -> HTTPD : 上傳或產生 HTML
note left
文字創作、圖片、歌曲、影片、
人際關係、個資、身分識別
end note
== 200 HTTP 協定 ==
autonumber 201
Alice -> Browser : http://example.com/foo
Browser -> HTTPD : GET /foo HTTP/1.1
HTTPD -> Browser : HTTP/1.1 200 OK\n內容 HTML
Browser -> Alice : 解析HTML內容後\n展現在瀏覽器裡面
@enduml
引用
!include https://dltdojo.github.io/taichu-crypto/puml/tpl-story-http-v1.iuml
Exit, Voice and Loyalty《叛離、抗議與忠誠》: tpl-evl-v1.iuml
Joystream - Github 的 DAO 治理結構針對組織的 Exit, Voice, and Loyalty - wikipedia 問題加以設計，希望探索或建構出可長久的組織結構。
內容
@startuml
actor "個人甲\nAlice" as Alice #red
collections "原組織或企業\nORG" as ORG
collections "新組織或企業\nNORG" as NORG #red
actor "個人乙\nBob" as Bob #yellow
== 100 當個人甲乙對原組織的運作感到不滿時 ==
autonumber 101
Bob -> ORG: 🔥😠🔥
Alice -> ORG: 🔥😠🔥
== 200 Exit 叛離 ==
autonumber 201
Alice -> ORG : Bye
note right
脫離組織運作
end note
Alice -> NORG : 加入其他組織
Alice -> Bob : 或拉人分裂出新組織
== 300 Voice 抗議 ==
autonumber 301
Bob -> ORG : 抗議啦
note left
提出異議
end note
ORG -> Bob : 回應
Bob -> Bob : Loyalty 忠誠
ORG -> Bob : 不理會
Bob -> Bob : Exit 叛離
== 400 Loyalty 忠誠 ==
autonumber 401
Bob -> ORG : 組織運轉順暢
Alice -> ORG : 組織運作良好
@enduml
引用
!include https://dltdojo.github.io/taichu-crypto/puml/tpl-evl-v1.iuml
The Site Reliability Workbook Ch2 - Implementing SLOs : tpl-sre-slos-v1.iuml
內容
' WIP
' The Site Reliability Workbook Chapter 2 - Implementing SLOs
' https://landing.google.com/sre/workbook/chapters/implementing-slos/
' Service Level Objectives/Service Level Indicators
@startuml
skinparam ParticipantPadding 10
skinparam BoxPadding 10
actor "使用者" as User #Yellow
box "Request-driven\n需求導向" #LightBlue
participant "Web Site" as Web
participant "API Service" as Api
end box
box "Pipeline\n管路" #LightCoral
participant "Pipeline Job" as Job
participant Log
end box
box "Storage\n儲存" #LightPink
database "GameState" as DB
database UserData
participant UserFile
end box
note right of Web
SLIs:
Availability
Latency
Quality
end note
User -> Web
Web -> DB
Api -> DB
Api -> Job
note right of Job
SLIs:
Freshness
Correctness
Coverage
end note
DB -> UserData
UserData -> Api
note right of DB
SLIs:
Durability
end note
actor "SRE\n網站可靠性工程師" as RE #Red
@enduml
引用
!include https://dltdojo.github.io/taichu-crypto/puml/tpl-sre-slos-v1.iuml
Random Oracle tpl-random-oracle-v1.iuml
內容
' https://www.odaily.com/post/5133096
' https://www.jishuwen.com/d/2JWW
@startuml
' Random Oracle RO
actor Alice #yellow
participant "Random Oracle" as RO #yellow
actor Bob
== 100 Random Oracle ==
autonumber 101
Alice -> RO: 輸入值
Alice <- RO: 輸出隨機值
note left
隨機分佈在值域內
end note
Bob -> RO: 輸入值
Bob <- RO: 隨機值
note right
如 103 輸入值與 101 一樣
104 值會與 102 相同
end note
@enduml
引用
!include https://dltdojo.github.io/taichu-crypto/puml/tpl-random-oracle-v1.iuml
DNS-over-HTTPS (DoH) tpl-doh-dns-https-v1.iuml
A cartoon intro to DNS over HTTPS
內容
' A cartoon intro to DNS over HTTPS
' https://hacks.mozilla.org/2018/05/a-cartoon-intro-to-dns-over-https/
@startuml
skinparam ParticipantPadding 5
skinparam BoxPadding 5
box "Alice Realm" #LightBlue
actor "Alice\n瀏覽器" as Alice #yellow
participant "DoB\nAlice" as ADOB #white
end box
box "The kingdom of far far away" #white
participant "DNS善意\nPort 53" as GDNS #green
participant "DNS惡意\nPort 53" as BDNS #red
participant "DoH\nPort 443" as DOH #yellow
end box
box "Bob Realm" #LightCoral
participant "DoB\nBob" as BDOB #white
actor "Bob\n瀏覽器" as Bob
end box
== 100 Tracking 追蹤 ==
autonumber 101
Bob -> BDNS : register
Alice -> GDNS : DNS port 53
GDNS -> BDNS
BDNS -> BDNS : tracking 紀錄追蹤
BDNS -> GDNS : 給正確的地址
GDNS -> Alice
== 200 Spoofing 欺騙 ==
autonumber 201
BDNS -> GDNS : 給假造的地址
GDNS -> Alice
note over ADOB
要自保需確認每個查詢都是可信的。
一般人在公共場域無法確認。
end note
== 300 DNS over HTTPS (DoH) ==
autonumber 301
Alice -> DOH : 可設定可信的 DoH\nHTTPS port 443
DOH -> DOH : 紀錄
DOH -> Alice : 可信任的地址
note over DOH
隱私與內容過濾
1. DNS 個人紀錄被移出 ISP
2. DNS 紀錄(ISP端與用戶裝置端)的利用、加值、過濾
3. DNS 紀錄 ISP端法遵議題
4. 資料集中化不再分散各個 DNS
5. 牽涉不同司法管轄
6. 需信任 DoH 不做紀錄
end note
== 400 DNS over Blockchain (DoB) ==
autonumber 401
ADOB <-> BDOB: 同步
Alice -> ADOB: 只查自己節點
Bob -> BDOB: 無紀錄洩漏問題
note over DOH
1. DoB 不普及
2. DoB 節點成本需用客戶在乎隱私動機來支付，
否則容易轉成中心化 API 服務架構，回到紀
錄竄改100/200原點，還不如用 DoH。
end note
@enduml
引用
!include https://dltdojo.github.io/taichu-crypto/puml/tpl-doh-dns-https-v1.iuml
Crypto Custody : tpl-custody-fork-v1.iuml
The Crypto Custody Conundrum: What Are We Even Talking About?
內容
' https://www.coindesk.com/the-crypto-custody-conundrum-what-are-we-even-talking-about
' The Crypto Custody Conundrum: What Are We Even Talking About?
' 借據、本票(民法債務不履行) 保管條(刑法侵占)
@startuml
skinparam ParticipantPadding 5
skinparam BoxPadding 5
actor "使用者" as User #Yellow
box "司法" #LightSalmon
participant "民法\nCivil law" as CIVIL
participant "刑法\nCriminal law" as CRIMINAL
end box
actor "SafeKeeping\n保管人" as SK #Red
== 100 C is for custody ==
autonumber 101
User -> SK: 保管申請
User -> SK: 交付保管物
SK -> User: 保管證明\n契約、借據、本票(民法債務不履行)\n保管條(刑法侵占)
User -> SK: 要求返還
SK -> SK: 無法返還
SK <-> User: 協調
User -> CIVIL: 最佳利益???
User -> CRIMINAL: 最佳利益???
== 200 C is for complication ==
autonumber 201
User <-> SK
note right
無記名資產
金鑰即所有權
交付金鑰與轉帳之保管差異
end note
== 300 C is for consent ==
autonumber 301
User <-> SK
note right #red
多簽之部分所有權保管
end note
== 400 C is for consumer ==
autonumber 401
User <-> SK
note right
金融消費者保護法
虛擬通貨適用
end note
== 500 C is for challenge ==
autonumber 501
User <-> SK
note right
有種東西稱為分叉 fork
ownership?
liability?
end note
@enduml
引用
!include https://dltdojo.github.io/taichu-crypto/puml/tpl-custody-fork-v1.iuml
法國大革命 : tpl-French-Revolution-v1.iuml
內容
' Révolution française
' https://zh.wikipedia.org/zh-tw/%E6%B3%95%E5%9B%BD%E5%A4%A7%E9%9D%A9%E5%91%BD
' 法國大革命（法語：Révolution française， 1789年－1799年）是法國的一段社會激進與政治動盪的時期，對於法國歷史以及全歐洲都留下深刻廣泛影響。
'
@startuml
skinparam ParticipantPadding 5
skinparam BoxPadding 5
actor "法國國王\n路易十六" as King #Yellow
box "三級會議" #Red
actor "代表甲" as A
actor "代表乙" as B
end box
database "議會大樓" as BUILDING
box "國民議會\n室內網球場" #Blue
actor "代表丙" as C
actor "代表丁" as D
end box
participant "巴士底監獄" as Bastille
== 三級會議 ==
A <-> B : 衝突
King -> BUILDING: 整修關閉
== 附近網球場 ==
B -> C : 換地方
C <-> D : 繼續衝突
note right: 網球場宣言
D -> Bastille
== 法國大革命 ==
Bastille --> King : 三年後法蘭西第一共和國成立
@enduml
引用
!include https://dltdojo.github.io/taichu-crypto/puml/tpl-French-Revolution-v1.iuml
組件圖樣板 Component Diagram Template
State machine Replication SMR
There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery @mathiasverraes
How Does Distributed Consensus Work?
內容
' How Does Distributed Consensus Work? https://medium.com/s/story/lets-take-a-crack-at-understanding-distributed-consensus-dad23d0dc95
' https://ethfans.org/posts/lets-take-a-crack-at-understanding-distributed-consensus-part-1
' https://www.chainnews.com/articles/879522545128.htm
'
@startuml
agent "Client" as Client
rectangle "State Machine Replication" {
rectangle "Server1" #LightBlue {
frame SM1 [
State Machine
----
balance(alice)=199
balance(bob)=1
]
component "Consensus" as Consensus1
component "Ledger" as Ledger1
}
rectangle "Server2" #LightCoral{
frame SM2 [
State Machine
----
balance(alice)=199
balance(bob)=1
]
component "Consensus" as Consensus2
component "Ledger" as Ledger2
}
rectangle "ServerN+1" as ServerN1 #yellow
stack TwoHardThins #LightGreen[
Two hard problems in distributed systems:
2. Exactly-once delivery
1. Guaranteed order of messages
2. Exactly-once delivery
@mathiasverraes
]
}
Client --> Consensus1 : == 1
Consensus1 <--> TwoHardThins : == 2
TwoHardThins <--> Consensus2 : == 2
Consensus1 <--> ServerN1: == 2 問題：故障與時序
Consensus2 <-> ServerN1 : == 2
Consensus1 -> Ledger1 : == 3
Ledger1 --> SM1 : == 4
Consensus2 --> Ledger2: == 3
Ledger2 --> SM2 : == 4
SM2 -> Client: == 5
@enduml
引用
!include https://dltdojo.github.io/taichu-crypto/puml/tpl-state-machine-replication-v1.iuml
TON tpl-ton-v1.iuml
內容
' [ton-blockchain/ton github](https://github.com/ton-blockchain)
'
@startuml
' TON有四个角色：验证员，合作者，提名者和渔夫（Validators, collators, nominators, and fisherman.）
actor "Validator\n驗證者" as Validator
actor "Collator\n合作者" as Collator
actor "Nominator\n提名者" as Nominator
' 漁夫捕捉無效驗證者的無效交易
actor "Fisherman\n漁夫" as Fisherman #red
' 主鏈有 TON 的創世參數還有驗證節點紀錄
rectangle "TON Main Blockchain" {
' 可生成最多 2^32 條工作鏈条工作链，創工作鏈需 2/3 驗證節點支持。
' 每條工作鏈的虛擬機器可不同，地址帳戶代幣合約等也有差異。
' 每條工作鏈會有該工作鏈的基礎原生代幣。
rectangle "Workchain 1\n工作鏈壹" as WC1 #LightBlue {
' 每條工作鏈可生成最多 2^60 條分片鏈
' 同一條工作鏈的分片鏈其帳戶合約地址格式相同。
component "Shardchain\n分片鏈A1" as W1SA1
component "Shardchain\n分片鏈A2" as W1SA2
component "Shardchain\n分片鏈AN" as W1SAN
}
rectangle "Workchain 2\n工作鏈貳" as WC2 #LightCoral{
component "Shardchain\n分片鏈B1" as W2SB1
component "Shardchain\n分片鏈B2" as W2SB2
component "Shardchain\n分片鏈BN" as W2SBN
}
rectangle "Workchain N\n工作鏈N"
}
W1SA1 <--> W1SA2: == 1 Hypercube routing
W1SA2 <-> W1SAN: == 1
W1SA1 <--> W1SAN: == 1
Validator ..> WC1
Fisherman ..> WC1
Collator ..> WC2
Nominator ..> WC2
@enduml
引用
!include https://dltdojo.github.io/taichu-crypto/puml/tpl-ton-v1.iuml
TV Buddha by Nam June Paik tpl-tv-buddha
內容
@startuml
' TV Buddha by Nam June Paik
' “The future is now.” -Nam June Paik
package "You" {
[👀] as U #Yellow
}
package "TV Buddha" as TVBuddha{
folder "Buddha"{
[👀] as BUDDHA #Green
}
folder "Tele - vision" {
[📺] as TV
[🎥] as Camera
}
}
U -> TVBuddha
BUDDHA -> TV
Camera --> BUDDHA
TV - Camera
@enduml
引用
!include https://dltdojo.github.io/taichu-crypto/puml/tpl-tv-buddha-v1.iuml
DLTDOJO3 v1 tpl-dltdojo3-v1.iuml
內容
@startuml
actor "Developer" as Dev
actor "Operator" as Op
actor "學員\nUser" as User #red
rectangle "DLTDOJO3" {
rectangle "cli" #LightBlue {
component "taichu-raw" as TaichuRaw #yellow
component mdbook
}
rectangle "Kubernetes" #LightCoral{
rectangle "Services" {
component "Git\nCICD" as drone
component plantuml
component registry
}
rectangle "MAD WHITE" as madwhite {
component "code\nserver" as cs
}
rectangle "MAD RED" as madred {
component "veloren\nserver" as vs
}
}
}
TaichuRaw -- mdbook
Op ..> TaichuRaw
Dev ..> plantuml
Dev ..> registry
Dev ..> cs
User ..> cs
@enduml
引用
!include https://dltdojo.github.io/taichu-crypto/puml/tpl-dltdojo3-v1.iuml
WIP tpl-dltdojo3-x
@startuml
header DLTDOJO3
footer
https://dltdojo.github.io/taichu-crypto/
Licensed under the Apache License Version 2.0
<img:../images/qr-taichu-crypto.png{scale=0.5}>
end footer
title dltdojo3-comp-template
skinparam handwritten false
left to right direction
package "Docker Container" {
folder "Code Server container"{
[Code\nServer] as CS #Yellow
[mad-white\nprojects]
folder "VS Code Extension"{
[plantuml]
}
}
}
package "Kubernetes" {
folder "microk8s" {
[DNS]
[Registry]
[Storage]
}
folder "Gitops"{
[GIT gogs] as GIT #Green
[CI drone] as CI #Blue
}
}
CS --> GIT : 1. push
GIT -> CI : 2. build and test
CI --> Registry : 3. push
CI <-- Registry : 4. pull image
@enduml
狀態圖樣版 State Diagram Template
tpl-state-machine-v1.iuml
內容
@startuml
[*] -> Waiting
Waiting --> Started: Start
Waiting --> Finished : Done
Started --> Finished : Finish
Started --> Suspended : Suspend
Suspended --> Started : Resume
@enduml
引用
!include https://dltdojo.github.io/taichu-crypto/puml/tpl-state-machine-v1.iuml