diff --git a/tools/template/architecture.md b/tools/template/architecture.md
index 9268f3d..0e40c0f 100644
--- a/tools/template/architecture.md
+++ b/tools/template/architecture.md
@@ -201,7 +201,201 @@ class FsWatcherImpl{
 ### 5.1.2 Client Side UML
 
 ```mermaid
- 
+classDiagram
+Error <|-- RPCErrorWrapper
+class RPCErrorWrapper {
+    +data?: unknown
+    +code: RPCErrorCode
+    +toJSON(): Inline
+}
+MessageEvent <|-- RPCNotificationEvent
+class RPCNotificationEvent {
+    +notification: ChunkNotification
+}
+```
+```mermaid
+classDiagram
+class ViewModelBase {
+    +updateAsSource(path: string, updatedAt: number): void
+}
+<<Interface>> ViewModelBase
+ViewModelBase <|.. IViewModel
+class IViewModel {
+    +pageView: IPageViewModel
+}
+<<Interface>> IViewModel
+IPageViewModel <|.. BlankPage
+class BlankPage {
+    +type: string
+    +updateAsSource(_path: string, _updatedAt: number): void
+}
+IViewModel <|.. ViewModel
+class ViewModel {
+    +pageView: IPageViewModel
+    +updateAsSource(path: string, updatedAt: number): void
+}
+ViewModelBase <|.. IPageViewModel
+class IPageViewModel {
+    +type: string
+}
+<<Interface>> IPageViewModel
+IPageViewModel <|.. IDocumentViewModel
+class IDocumentViewModel {
+    +updateOnNotification(notification: ChunkNotification): void
+}
+<<Interface>> IDocumentViewModel
+class ChunkListMutator {
+    +add(i?: number | undefined, chunkContent?: ChunkContent | undefined): void
+    +create(i?: number | undefined): void
+    +addFromText(i: number, text: string): void
+    +del(id: string): void
+    +move(id: string, pos: number): void
+}
+<<Interface>> ChunkListMutator
+class ChunkListState {
+    +chunks: Chunk[]
+    +cloen(): ChunkListState
+}
+class ChunkListStateMutator
+<<Interface>> ChunkListStateMutator
+class ChunkListHistory {
+    +history: ChunkListHistoryElem[]
+    +limit: number
+    -applyLast(mutator: ChunkListStateMutator, updatedAt: number): void
+    +current: ChunkListState
+    +currentUpdatedAt: number
+    +revoke(): void
+    +apply(mutator: ChunkListStateMutator, updatedAt: number): boolean
+}
+class ChunkMutator {
+    +setType(t: ChunkContentType): void
+    +setContent(s: string): void
+}
+<<Interface>> ChunkMutator
+IDocumentViewModel <|.. DocumentViewModel
+class DocumentViewModel {
+    +type: "document"
+    +docPath: string
+    +chunks: Chunk[]
+    +history: ChunkListHistory
+    +buffer: Inline
+    +seq: number
+    +tags: string[]
+    +updatedAt: number
+    +tagsUpdatedAt: number
+    +updateOnNotification(notification: ChunkNotification): void
+    -updateMark(updatedAt: number): void
+    +apply(mutator: ChunkListStateMutator, updatedAt: number, seq: number, refresh?: boolean): void
+    +updateAsSource(_path: string, _updatedAt: number): void
+    +useChunks(): [Chunk[], ChunkListMutator]
+    +useTags(): [string[], (tags: string[]) => Promise<void>]
+    +useChunk(chunk_arg: Chunk): [Chunk, ChunkMutator]
+}
+IViewModel ..> "1" IPageViewModel
+ViewModel ..> "1" IPageViewModel
+ChunkListHistory ..> "1" ChunkListStateMutator
+ChunkListHistory ..> "1" ChunkListState
+DocumentViewModel ..> "1" ChunkListHistory
+DocumentViewModel ..> "1" ChunkListStateMutator
+DocumentViewModel ..> "1" ChunkListMutator
+DocumentViewModel ..> "1" ChunkMutator
+```
+```mermaid
+classDiagram
+class ChunkListStateMutator
+<<Interface>> ChunkListStateMutator
+class ChunkListStateAddMutator
+class ChunkListStateDeleteMutator
+class ChunkListStateModifyMutator
+class ChunkListStateMoveMutator
+ChunkListStateMutator <|.. ChunkListStateAddMutator
+ChunkListStateMutator <|.. ChunkListStateDeleteMutator
+ChunkListStateMutator <|.. ChunkListStateModifyMutator
+ChunkListStateMutator <|.. ChunkListStateMoveMutator
+```
+```mermaid
+classDiagram
+class IRPCMessageManager {
+    +opened: boolean
+    +close(): void
+    +sendNotification(notification: ChunkNotification): void
+    +addEventListener(name: "notification", listener: RPCMessageMessagerEventListener): void
+    +addEventListener(name: string, listener: EventListenerOrEventListenerObject): void
+    +removeEventListener(name: "notification", listener: RPCMessageMessagerEventListener): void
+    +removeEventListener(name: string, listener: EventListenerOrEventListenerObject): void
+    +invokeMethod(m: RPCMessageBody): Promise<RPCResponse>
+}
+<<Interface>> IRPCMessageManager
+IRPCMessageManager <|.. RPCMessageManager
+class RPCMessageManager {
+    -callbackList: Map<number, RPCCallback>
+    -curId: number
+    -ws?: WebSocket | undefined
+    +opened: boolean
+    +open(url: string | URL, protocals?: string | undefined): Promise<void>
+    +close(): void
+    -genId(): number
+    +genHeader(): Inline
+    +send(message: RPCMethod): Promise<RPCResponse>
+    +sendNotification(message: ChunkNotification): void
+    +addEventListener(type: "notification", callback: RPCMessageMessagerEventListener): void
+    +removeEventListener(type: "notification", callback: RPCMessageMessagerEventListener): void
+    +invokeMethod(m: RPCMessageBody): Promise<RPCResponse>
+}
+class FsDirEntry {
+    +name: string
+    +isDirectory: boolean
+    +isFile: boolean
+    +isSymlink: boolean
+}
+<<Interface>> FsDirEntry
+class FsStatInfo {
+    +isFile: boolean
+    +isDirectory: boolean
+    +isSymlink: boolean
+    +size: number
+    +mtime: Date | null
+    +atime: Date | null
+    +birthtime: Date | null
+}
+<<Interface>> FsStatInfo
+FsStatInfo <|.. FsGetResult
+class FsGetResult {
+    +entries?: FsDirEntry[] | undefined
+}
+<<Interface>> FsGetResult
+class IFsEventMap {
+    +modify: (this: IFsManager, event: MessageEvent<NotImplemented>) => void
+    +create: (this: IFsManager, event: MessageEvent<NotImplemented>) => void
+    +delete: (this: IFsManager, event: MessageEvent<NotImplemented>) => void
+}
+<<Interface>> IFsEventMap
+class IFsManager {
+    +get(path: string): Promise<Response>
+    +getStat(path: string): Promise<FsGetResult>
+    +upload(filePath: string, data: BodyInit): Promise<number>
+    +delete(filePath: string): Promise<number>
+    +mkdir(path: string): Promise<number>
+    +addEventListener(name: string, listener: EventListenerOrEventListenerObject): void
+    +removeEventListener(name: string, listener: EventListenerOrEventListenerObject): void
+    +dispatchEvent(event: Event): boolean
+}
+<<Interface>> IFsManager
+IFsManager <|.. FsManager
+class FsManager {
+    -manager: RPCMessageManager
+    -prefix: string
+    +get(path: string): Promise<Response>
+    +getStat(filePath: string): Promise<FsGetResult>
+    +upload(filePath: string, data: BodyInit): Promise<number>
+    +mkdir(filePath: string): Promise<number>
+    +delete(filePath: string): Promise<number>
+}
+FsGetResult ..> "*" FsDirEntry
+IFsEventMap ..> "1" IFsManager
+IFsManager ..> "1" FsGetResult
+FsManager ..> "1" RPCMessageManager
+FsManager ..> "1" FsGetResult
 ```
 
 ## 5.2 의사코드