diff --git a/DIAGRAMS.md b/DIAGRAMS.md index fc81ceaa..75b57ed6 100644 --- a/DIAGRAMS.md +++ b/DIAGRAMS.md @@ -1,64 +1,130 @@ -# C4 Diagrams -C4 stands for Context, Container, Component, Code. +# Diagrams -# Context +# Project Structure +Kyoo is a monorepo that consists of several projects each in their own directory. Diagram below shows an outline of kyoo, projects, and artifacts. + +```mermaid +block-beta + columns 1 + block:proj1:1 + proj_name["Kyoo"]:1 + end + block:proj2:1 + dir_1["autosync/"] + dir_2["back/"] + dir_3["front/"] + dir_4["transcoder/"] + dir_5["scanner/"] + end + block:proj3:1 + %% columns auto (default) + block:autosync_b:1 + autosync_i1("kyoo_autosync") + end + block:back_b:1 + columns 1 + back_i1("kyoo_back") + back_i2("kyoo_migrations") + end + block:front_b:1 + front_i1("kyoo_front") + end + block:transcoder_b:1 + transcoder_i1("kyoo_transcoder") + end + block:scanner_b:1 + columns 1 + scanner_i1("kyoo_scanner") + scanner_i2("kyoo_scanner*") + end + end + + style proj_name fill:transparent,stroke-width:0px + style proj1 fill:#1168bd,stroke-width:0px + style proj2 fill:#1168bd,stroke-width:0px + style proj3 fill:#1168bd,stroke-width:0px + + style dir_1 fill:#438dd5,stroke-width:0px + style dir_2 fill:#438dd5,stroke-width:0px + style dir_3 fill:#438dd5,stroke-width:0px + style dir_4 fill:#438dd5,stroke-width:0px + style dir_5 fill:#438dd5,stroke-width:0px + + style autosync_b fill:#438dd5,stroke-width:0px + style back_b fill:#438dd5,stroke-width:0px + style front_b fill:#438dd5,stroke-width:0px + style transcoder_b fill:#438dd5,stroke-width:0px + style scanner_b fill:#438dd5,stroke-width:0px + + style autosync_i1 fill:#85bbf0,stroke-width:0px + style back_i1 fill:#85bbf0,stroke-width:0px + style back_i2 fill:#85bbf0,stroke-width:0px + style front_i1 fill:#85bbf0,stroke-width:0px + style transcoder_i1 fill:#85bbf0,stroke-width:0px + style scanner_i1 fill:#85bbf0,stroke-width:0px + style scanner_i2 fill:#85bbf0,stroke-width:0px +``` + +# C4 Diagrams +Diagrams that focus on capturing project from a high level point of view. Context, Container, Component, Code + +## Context ```mermaid C4Context title Context diagram for Kyoo System Person(user, "User") - System(kyoo, "Kyoo", "Self-hosted media server focused on video content.") - System_Ext(media, "MediaLibrary", "") - System_Ext(content, "ContentDatabase", "Media Info. Artwork, etc.") - System_Ext(tracker, "ActivityTracker", "") - - - Rel(user, kyoo, "watches") - - Rel(kyoo, content, "fetches metadata, title screen, backgrounds, etc") - Rel(kyoo, media, "media content source") - Rel(kyoo, tracker, "update tracking") - - UpdateLayoutConfig($c4ShapeInRow="2", $c4BoundaryInRow="1") -``` -# Container -```mermaid - C4Container - - title Container diagram for Kyoo System - Person(user, "User") - - System_Boundary(s1, "Kyoo") { - Container(frontend, "frontend") - Container(backend, "backend") - Container(scanner, "scanner") - Container(autosync, "autosync") - Container(sharem, "sharemessage") - Container(transcoder, "transcoder") - } - + System(kyoo, "Kyoo", "") System_Ext(media, "MediaLibrary", "") System_Ext(content, "ContentDatabase", "") System_Ext(tracker, "ActivityTracker", "") - Rel(user, frontend, "/") - Rel(user, backend, "/api") - Rel(frontend, backend, "") - Rel(backend, sharem, "") - Rel(backend, media, "") - Rel(backend, transcoder, "") - Rel(autosync, sharem, "") - Rel(autosync, tracker, "") - Rel(scanner, sharem, "") - Rel(scanner, media, "") - Rel(scanner, content, "") - Rel(transcoder, media, "") + Rel(user, kyoo, "") + Rel(kyoo, content, "") + Rel(kyoo, media, "") + Rel(kyoo, tracker, "") + UpdateLayoutConfig($c4ShapeInRow="2", $c4BoundaryInRow="2") +``` - BiRel(backend, scanner, "") +## Container +Messaging is middleware. EnterpriseMessageBus is for any messaging handled between different projects. +```mermaid + C4Container + UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1") + title Container diagram for Kyoo System + Person(user, "User") - UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1") + System_Boundary(internal, "Kyoo") { + Container(frontend, "front/") + Container(backend, "back/") + Container(transcoder, "transcoder/") + Container(autosync, "autosync/") + ContainerQueue(emb, "emb", "", "EnterpriseMessageBus") + Container(scanner, "scanner/") + } + + System_Boundary(external, "External") { + System_Ext(tracker, "ActivityTracker", "") + System_Ext(media, "MediaLibrary", "") + System_Ext(content, "ContentDatabase", "") + + } + + Rel(user, frontend, "") + Rel(user, backend, "") + Rel(frontend, backend, "") + Rel(backend, emb, "") + Rel(backend, media, "") + Rel(backend, transcoder, "") + Rel_Back(autosync, emb, "") + Rel(autosync, tracker, "") + Rel_Back(scanner, emb, "") + Rel(scanner, backend, "") + Rel(scanner, media, "") + Rel(scanner, content, "") + Rel(transcoder, media, "") ```