roam/distributed-web-application.svg

<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" contentStyleType="text/css" height="469px" preserveAspectRatio="none" style="width:273px;height:469px;background:#FFFFFF;" version="1.1" viewBox="0 0 273 469" width="273px" zoomAndPan="magnify"><defs/><g><line style="stroke:#181818;stroke-width:0.5;stroke-dasharray:5.0,5.0;" x1="35" x2="35" y1="84.0679" y2="220.892"/><line style="stroke:#A80036;stroke-width:1.0;stroke-dasharray:1.0,4.0;" x1="35" x2="35" y1="220.892" y2="248.892"/><line style="stroke:#181818;stroke-width:0.5;stroke-dasharray:5.0,5.0;" x1="35" x2="35" y1="248.892" y2="385.716"/><line style="stroke:#181818;stroke-width:0.5;stroke-dasharray:5.0,5.0;" x1="141" x2="141" y1="84.0679" y2="220.892"/><line style="stroke:#A80036;stroke-width:1.0;stroke-dasharray:1.0,4.0;" x1="141" x2="141" y1="220.892" y2="248.892"/><line style="stroke:#181818;stroke-width:0.5;stroke-dasharray:5.0,5.0;" x1="141" x2="141" y1="248.892" y2="385.716"/><line style="stroke:#181818;stroke-width:0.5;stroke-dasharray:5.0,5.0;" x1="237" x2="237" y1="84.0679" y2="220.892"/><line style="stroke:#A80036;stroke-width:1.0;stroke-dasharray:1.0,4.0;" x1="237" x2="237" y1="220.892" y2="248.892"/><line style="stroke:#181818;stroke-width:0.5;stroke-dasharray:5.0,5.0;" x1="237" x2="237" y1="248.892" y2="385.716"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="55" x="5" y="79.9659">Browser</text><ellipse cx="35.5" cy="13.5" fill="#E2E2F0" rx="8" ry="8" style="stroke:#181818;stroke-width:0.5;"/><path d="M35.5,21.5 L35.5,48.5 M22.5,29.5 L48.5,29.5 M35.5,48.5 L22.5,63.5 M35.5,48.5 L48.5,63.5 " fill="none" style="stroke:#181818;stroke-width:0.5;"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="55" x="5" y="399.682">Browser</text><ellipse cx="35.5" cy="412.284" fill="#E2E2F0" rx="8" ry="8" style="stroke:#181818;stroke-width:0.5;"/><path d="M35.5,420.284 L35.5,447.284 M22.5,428.284 L48.5,428.284 M35.5,447.284 L22.5,462.284 M35.5,447.284 L48.5,462.284 " fill="none" style="stroke:#181818;stroke-width:0.5;"/><rect fill="#E2E2F0" height="33.0679" rx="2.5" ry="2.5" style="stroke:#181818;stroke-width:0.5;" width="71" x="106" y="50"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="57" x="113" y="71.9659">WebApp</text><rect fill="#E2E2F0" height="33.0679" rx="2.5" ry="2.5" style="stroke:#181818;stroke-width:0.5;" width="71" x="106" y="384.716"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="57" x="113" y="406.682">WebApp</text><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="63" x="203" y="79.9659">Database</text><path d="M219.5,29 C219.5,19 237.5,19 237.5,19 C237.5,19 255.5,19 255.5,29 L255.5,55 C255.5,65 237.5,65 237.5,65 C237.5,65 219.5,65 219.5,55 L219.5,29 " fill="#E2E2F0" style="stroke:#181818;stroke-width:1.5;"/><path d="M219.5,29 C219.5,39 237.5,39 237.5,39 C237.5,39 255.5,39 255.5,29 " fill="none" style="stroke:#181818;stroke-width:1.5;"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="63" x="203" y="399.682">Database</text><path d="M219.5,413.784 C219.5,403.784 237.5,403.784 237.5,403.784 C237.5,403.784 255.5,403.784 255.5,413.784 L255.5,439.784 C255.5,449.784 237.5,449.784 237.5,449.784 C237.5,449.784 219.5,449.784 219.5,439.784 L219.5,413.784 " fill="#E2E2F0" style="stroke:#181818;stroke-width:1.5;"/><path d="M219.5,413.784 C219.5,423.784 237.5,423.784 237.5,423.784 C237.5,423.784 255.5,423.784 255.5,413.784 " fill="none" style="stroke:#181818;stroke-width:1.5;"/><polygon fill="#181818" points="129.5,113.7739,139.5,117.7739,129.5,121.7739,133.5,117.7739" style="stroke:#181818;stroke-width:1.0;"/><line style="stroke:#181818;stroke-width:1.0;" x1="35.5" x2="135.5" y1="117.7739" y2="117.7739"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="8
@startuml
actor Browser
participant WebApp
database Database

Browser -> WebApp : Request Page
WebApp -> Database : Load Data
Database -> WebApp : Return Data
WebApp -> Browser : Render Page
...
Browser -> WebApp : Save Form
WebApp -> Database : Write Data
Database -> WebApp : Data Stored
WebApp -> Browser : Done!
@enduml

PlantUML version 1.2022.12(Sun Oct 23 14:12:26 EDT 2022)
(GPL source distribution)
Java Runtime: OpenJDK Runtime Environment
JVM: OpenJDK 64-Bit Server VM
Default Encoding: UTF-8
Language: en
Country: US
--></g></svg>